From c56d0e7699586d87c1c670d068ad5d9be7588ae3 Mon Sep 17 00:00:00 2001
From: "deepsource-autofix[bot]"
 <62050782+deepsource-autofix[bot]@users.noreply.github.com>
Date: Mon, 14 Jul 2025 02:43:55 +0000
Subject: [PATCH] style: format code with Prettier

This commit fixes the style issues introduced in 75be8fe according to the output
from Prettier.

Details: None
---
 .rules/architecture/constraints.md            |  45 ++++++-
 .rules/architecture/patterns.md               | 123 ++++++++---------
 .rules/architecture/principles.md             |  48 ++++---
 .rules/instructions.md                        |   5 +
 .rules/project/overview.md                    |  18 ++-
 .rules/project/progress.md                    | 126 +++++++++++-------
 .rules/project/structure.md                   |  47 ++++---
 .rules/project/workflow.md                    |  27 +++-
 .rules/references/external.md                 |  34 ++++-
 CLAUDE.md                                     |  40 +++++-
 docs/features/rokkit-ui-features.md           |   8 +-
 docs/forms/readme.md                          |   4 +-
 packages/helpers/spec/mocks/element.spec.js   |   4 +-
 packages/helpers/src/mocks/element.js         |   1 -
 sites/learn/CODEVIEWER_USAGE.md               |   6 +-
 .../learn/src/lib/components/Story/README.md  |  47 +++++--
 .../palette/fragments/02-multiple-colors.js   |  18 +--
 .../(learn)/chart-elements/palette/stories.js |   2 +-
 .../patterns/fragments/02-multiple.js         |  38 +++---
 .../chart-elements/patterns/stories.js        |   2 +-
 .../symbols/fragments/03-custom-attributes.js |  42 +++---
 .../(learn)/chart-elements/symbols/stories.js |   2 +-
 .../charts/plot/fragments/02-chart-types.js   |  48 +++----
 .../routes/(learn)/charts/plot/intro/cars.js  |   2 +-
 .../src/routes/(learn)/charts/plot/stories.js |   2 +-
 .../elements/accordion/fragments/02-fields.js |  34 ++---
 .../accordion/fragments/03-nested-fields.js   |  14 +-
 .../(learn)/elements/accordion/stories.js     |   2 +-
 .../(learn)/elements/breadcrumbs/stories.js   |   2 +-
 .../(learn)/elements/drop-down/stories.js     |   2 +-
 .../list/fragments/02-field-mapping.js        |   6 +-
 .../list/fragments/03-component-field.js      |   2 +-
 .../routes/(learn)/elements/list/stories.js   |   2 +-
 .../(learn)/elements/multi-select/stories.js  |   2 +-
 .../routes/(learn)/elements/select/stories.js |   2 +-
 .../routes/(learn)/elements/switch/stories.js |   2 +-
 .../elements/table/fragments/02-columns.js    |  26 ++--
 .../routes/(learn)/elements/table/stories.js  |   2 +-
 .../(learn)/elements/tabs/fields/data.js      |   2 +-
 .../routes/(learn)/elements/tabs/stories.js   |   2 +-
 .../(learn)/elements/tabs/using/data.js       |   2 +-
 .../routes/(learn)/elements/tree/stories.js   |   2 +-
 .../routes/(learn)/forms/advanced/stories.js  |   2 +-
 .../routes/(learn)/forms/builder/stories.js   |   2 +-
 .../routes/(learn)/forms/inputs/stories.js    |   2 +-
 .../routes/(learn)/forms/layout/stories.js    |   2 +-
 .../routes/(learn)/forms/overview/stories.js  |   2 +-
 .../routes/(learn)/forms/schema/stories.js    |   2 +-
 .../(learn)/forms/validation/stories.js       |   2 +-
 .../routes/(learn)/input/calendar/stories.js  |   2 +-
 .../(learn)/input/inputfield/stories.js       |   2 +-
 .../src/routes/(learn)/input/range/stories.js |   2 +-
 .../routes/(learn)/input/rating/stories.js    |   2 +-
 .../(learn)/layout/nav-content/stories.js     |   2 +-
 .../fragments/02-custom-css.css               |   2 +-
 .../(learn)/layout/responsive-grid/stories.js |   2 +-
 .../routes/(learn)/layout/stepper/stories.js  |   2 +-
 .../routes/(learn)/primitives/item/stories.js |   2 +-
 .../routes/(learn)/primitives/pill/stories.js |   2 +-
 .../templates/editor/fragments/01-schema.js   | 106 +++++++--------
 .../(learn)/templates/editor/stories.js       |   2 +-
 .../fragments/05-theme-customization.js       |   2 +-
 .../routes/(learn)/theming/colors/stories.js  |   2 +-
 .../(learn)/utilities/connector/stories.js    |   2 +-
 .../fragments/02-dynamic-validation.js        |  58 ++++----
 .../utilities/validation-report/stories.js    |   2 +-
 .../welcome/getting-started/stories.js        |   2 +-
 67 files changed, 643 insertions(+), 412 deletions(-)

diff --git a/.rules/architecture/constraints.md b/.rules/architecture/constraints.md
index c983e25d7..5a6c42c37 100644
--- a/.rules/architecture/constraints.md
+++ b/.rules/architecture/constraints.md
@@ -5,18 +5,21 @@
 ### Framework Dependencies
 
 #### Svelte 5 Requirements
+
 - **Minimum Version**: Svelte ^5.0.0
 - **Reasoning**: Runes system is fundamental to our reactive architecture
 - **Impact**: Cannot support Svelte 4 components without major API changes
 - **Migration Path**: Wrapper components for legacy support
 
 #### Node.js Compatibility
+
 - **Minimum Version**: Node.js >= 18.0.0
 - **Reasoning**: ESM support, modern JavaScript features
 - **Build Targets**: ES2022+ for optimal performance
 - **Legacy Support**: Transpilation for older browsers via build tools
 
 #### TypeScript Integration
+
 - **Requirement**: Full TypeScript support for all public APIs
 - **Generic Support**: Components must support generic type parameters
 - **Type Safety**: Runtime validation only in development mode
@@ -25,12 +28,14 @@
 ### Bundle Size Constraints
 
 #### Core Package Limits
+
 - **@rokkit/core**: < 15KB gzipped
 - **@rokkit/ui**: < 50KB gzipped (full bundle)
 - **Individual Components**: < 5KB gzipped each
 - **Tree Shaking**: All exports must be tree-shakeable
 
 #### Performance Budgets
+
 - **Initial Load**: < 100KB total for basic usage
 - **Component Import**: < 10KB additional per component
 - **Runtime Overhead**: < 5% compared to vanilla implementation
@@ -38,17 +43,20 @@
 ### Browser Support
 
 #### Modern Browsers (Primary Support)
+
 - Chrome >= 90
 - Firefox >= 88
 - Safari >= 14
 - Edge >= 90
 
 #### Legacy Support (Best Effort)
+
 - IE: Not supported
 - Chrome < 90: Via build tool transpilation
 - Safari < 14: Limited feature support
 
 #### Required Features
+
 - ES Modules
 - CSS Custom Properties
 - ResizeObserver
@@ -59,7 +67,9 @@
 ### API Consistency Requirements
 
 #### Component Interface Pattern
+
 All selection components MUST follow:
+
 ```typescript
 interface SelectionComponent<T> {
   items: T[]
@@ -70,6 +80,7 @@ interface SelectionComponent<T> {
 ```
 
 #### Event Pattern Consistency
+
 ```typescript
 interface ComponentEvents<T> {
   select: CustomEvent<{ value: T }>
@@ -78,6 +89,7 @@ interface ComponentEvents<T> {
 ```
 
 #### Field Mapping System
+
 - MUST support nested field access
 - MUST provide default field mappings
 - MUST be runtime configurable
@@ -86,12 +98,14 @@ interface ComponentEvents<T> {
 ### Component Composability Rules
 
 #### Snippet System Requirements
+
 - All components MUST support snippet-based customization
 - Default snippets MUST be provided for all render points
 - Snippet parameters MUST be consistently typed
 - No component should require external styling
 
 #### Using System Constraints
+
 - Component override system MUST work with any Svelte component
 - Default components MUST be replaceable
 - Type system MUST understand component swapping
@@ -100,18 +114,21 @@ interface ComponentEvents<T> {
 ### Accessibility Constraints
 
 #### WCAG 2.1 AA Compliance
+
 - All interactive components MUST meet AA standards
 - Keyboard navigation MUST be complete and intuitive
 - Screen reader support MUST be comprehensive
 - Focus management MUST be proper
 
 #### Required ARIA Support
+
 - All components MUST have appropriate roles
 - Dynamic content MUST announce changes
 - Complex widgets MUST have proper relationships
 - Error states MUST be announced
 
 #### Keyboard Navigation Standards
+
 - Arrow keys for list navigation
 - Enter/Space for activation
 - Escape for dismissal
@@ -122,18 +139,21 @@ interface ComponentEvents<T> {
 ### Svelte-Specific Constraints
 
 #### Reactivity System Limitations
+
 - Cannot break reactivity chains with intermediate functions
 - Derived values must be pure computations
 - Effects must handle cleanup properly
 - State mutations must be direct for reactivity
 
 #### Component System Limits
+
 - Circular component references not supported
 - Dynamic component imports require specific patterns
 - Context API has performance implications at scale
 - SSR requires careful hydration handling
 
 #### Bundle Strategy Constraints
+
 - Components cannot share complex internal state
 - Tree shaking requires careful export structure
 - Code splitting boundaries must be component-level
@@ -142,12 +162,14 @@ interface ComponentEvents<T> {
 ### Data Flow Constraints
 
 #### Field Mapping Limitations
+
 - Deep nesting has performance implications (>5 levels)
 - Circular references in data cause infinite loops
 - Function-based mappings break SSR
 - Dynamic field changes trigger full re-renders
 
 #### Performance Boundaries
+
 - Lists >1000 items require virtual scrolling
 - Deep object comparison is O(n) complexity
 - Frequent field mapping changes cause thrashing
@@ -156,12 +178,14 @@ interface ComponentEvents<T> {
 ### bits-ui Integration Constraints
 
 #### Wrapper Layer Requirements
+
 - Cannot modify bits-ui component internals
 - Must maintain API compatibility layer
 - Event handling must be proxied
 - Styling must work through CSS variables
 
 #### Feature Gaps
+
 - Some Rokkit features have no bits-ui equivalent
 - Custom behaviors require workaround implementations
 - Performance characteristics may differ
@@ -172,12 +196,14 @@ interface ComponentEvents<T> {
 ### Package Distribution
 
 #### NPM Publishing Requirements
+
 - All packages MUST use same versioning scheme
 - Dependencies MUST be explicitly declared
 - Peer dependencies MUST be minimal
 - Breaking changes MUST follow semver
 
 #### CDN Delivery Constraints
+
 - UMD builds for script tag usage
 - ES modules for modern bundlers
 - CSS must be separately loadable
@@ -186,12 +212,14 @@ interface ComponentEvents<T> {
 ### Framework Integration Limits
 
 #### SvelteKit Compatibility
+
 - Must work with both SSR and SPA modes
 - Cannot rely on browser-only APIs during SSR
 - Hydration must be seamless
 - App directory structure must be respected
 
 #### Build Tool Requirements
+
 - Vite: Primary support with official plugin
 - Webpack: Community support only
 - Rollup: Basic compatibility
@@ -200,18 +228,21 @@ interface ComponentEvents<T> {
 ## Security Constraints
 
 ### XSS Prevention
+
 - No innerHTML usage without sanitization
 - User content must be escaped by default
 - Dynamic script execution prohibited
 - Event handlers must be properly scoped
 
 ### Content Security Policy
+
 - No inline styles in components (CSP compliance)
 - No eval() or Function() constructor usage
 - External resource loading must be explicit
 - Script sources must be whitelisted
 
 ### Dependency Security
+
 - Regular security audits required
 - No dependencies with known vulnerabilities
 - Minimal dependency tree to reduce attack surface
@@ -220,18 +251,21 @@ interface ComponentEvents<T> {
 ## Data Processing Constraints
 
 ### Memory Management
+
 - Components must not leak memory
 - Event listeners must be properly cleaned up
 - Large datasets must use streaming approaches
 - Circular references must be avoided
 
 ### Performance Limits
+
 - Initial render: < 16ms for 60fps
 - Update operations: < 5ms for smooth interaction
 - Memory usage: < 10MB for typical applications
 - CPU usage: < 10% for idle state
 
 ### Scalability Boundaries
+
 - Maximum recommended items per component: 10,000
 - Maximum nesting depth: 10 levels
 - Maximum concurrent components: 1,000
@@ -240,18 +274,21 @@ interface ComponentEvents<T> {
 ## Future Constraint Considerations
 
 ### Svelte Evolution
+
 - Must be adaptable to future Svelte versions
 - Cannot rely on unstable internal APIs
 - Must follow Svelte ecosystem best practices
 - Should leverage new features when stable
 
 ### Web Standards Evolution
+
 - Must work with evolving browser standards
 - Should adopt new web APIs when beneficial
 - Must maintain backwards compatibility
 - Should progressive enhance with new features
 
 ### Ecosystem Changes
+
 - Must adapt to CSS framework evolution
 - Should integrate with new accessibility tools
 - Must work with evolving build tools
@@ -260,18 +297,21 @@ interface ComponentEvents<T> {
 ## Breaking Change Policy
 
 ### Allowed Breaking Changes
+
 - Major version bumps only
 - 6-month minimum notice period
 - Clear migration path provided
 - Deprecated API support for 2 versions
 
 ### Protected APIs
+
 - Core component props (items, value, fields)
 - Event emission patterns
 - Basic accessibility features
 - Field mapping system fundamentals
 
 ### Change Management
+
 - RFC process for major changes
 - Community feedback period
 - Beta releases for validation
@@ -280,19 +320,22 @@ interface ComponentEvents<T> {
 ## Exception Handling
 
 ### Constraint Violations
+
 - Document all exceptions with rationale
 - Time-bound exceptions with review dates
 - Alternative solutions must be provided
 - Impact assessment required
 
 ### Emergency Overrides
+
 - Critical security issues
 - Major browser breaking changes
 - Ecosystem-wide migrations
 - Performance critical optimizations
 
 ### Review Process
+
 - Quarterly constraint review
 - Exception audit and cleanup
 - Performance budget adjustments
-- Technology update assessments
\ No newline at end of file
+- Technology update assessments
diff --git a/.rules/architecture/patterns.md b/.rules/architecture/patterns.md
index e3e3ecd48..c79fb0b3a 100644
--- a/.rules/architecture/patterns.md
+++ b/.rules/architecture/patterns.md
@@ -10,7 +10,7 @@ Every Rokkit component follows this structural pattern:
 <script>
   import { FieldMapper } from '@rokkit/core'
   import { createEventDispatcher } from 'svelte'
-  
+
   // Props with defaults
   let {
     items = [],
@@ -20,14 +20,14 @@ Every Rokkit component follows this structural pattern:
     class: className = '',
     ...restProps
   } = $props()
-  
+
   // Internal state
   let mapping = $derived(new FieldMapper(fields, using))
   let processedItems = $derived(items.map(item => mapping.wrap(item)))
-  
+
   // Event dispatcher
   const dispatch = createEventDispatcher()
-  
+
   // Event handlers
   function handleSelection(item) {
     value = item
@@ -46,10 +46,12 @@ Every Rokkit component follows this structural pattern:
 ### Props Pattern Standardization
 
 **Required Props**:
+
 - `items`: Data array for selection components
 - `value`: Current selection (bindable)
 
 **Optional Props**:
+
 - `fields`: Field mapping object
 - `using`: Component override object
 - `class`: CSS class string
@@ -57,6 +59,7 @@ Every Rokkit component follows this structural pattern:
 - `placeholder`: Hint text
 
 **Component-Specific Props**:
+
 - Selection: `multiple`, `clearable`
 - Hierarchical: `autoClose`, `expandAll`
 - Input: `min`, `max`, `step`
@@ -84,11 +87,11 @@ class ComponentLogic {
   constructor(fields, using) {
     this.mapping = new FieldMapper(fields, using)
   }
-  
+
   processItems(items) {
-    return items.map(item => this.mapping.wrap(item))
+    return items.map((item) => this.mapping.wrap(item))
   }
-  
+
   renderItem(wrappedItem) {
     const Component = this.mapping.getComponent(wrappedItem)
     return { Component, props: this.mapping.getProps(wrappedItem) }
@@ -103,7 +106,7 @@ class ComponentLogic {
 ```svelte
 <script>
   import { SelectionManager } from '@rokkit/core'
-  
+
   let {
     items = [],
     value = $bindable(),
@@ -111,10 +114,10 @@ class ComponentLogic {
     fields = {},
     using = {}
   } = $props()
-  
+
   let selection = $derived(new SelectionManager(items, { multiple }))
   let mapping = $derived(new FieldMapper(fields, using))
-  
+
   function handleItemClick(item) {
     if (multiple) {
       value = selection.toggle(item, value)
@@ -122,7 +125,7 @@ class ComponentLogic {
       value = selection.select(item)
     }
   }
-  
+
   function handleKeyDown(event, item) {
     switch (event.key) {
       case 'Enter':
@@ -163,7 +166,7 @@ class ComponentLogic {
 <script>
   // Multi-selection specific logic
   let selectedItems = $derived(Array.isArray(value) ? value : [])
-  
+
   function toggleSelection(item) {
     const isSelected = selectedItems.includes(item)
     if (isSelected) {
@@ -172,11 +175,11 @@ class ComponentLogic {
       value = [...selectedItems, item]
     }
   }
-  
+
   function selectAll() {
     value = [...items]
   }
-  
+
   function clearAll() {
     value = []
   }
@@ -190,17 +193,17 @@ class ComponentLogic {
 ```svelte
 <script>
   import { TreeNode } from '@rokkit/core'
-  
+
   let {
     items = [],
     value = $bindable(),
     fields = {},
     autoClose = false
   } = $props()
-  
+
   let treeNodes = $derived(items.map(item => new TreeNode(item, fields)))
   let expandedNodes = $state(new Set())
-  
+
   function toggleExpansion(node) {
     if (expandedNodes.has(node.id)) {
       expandedNodes.delete(node.id)
@@ -212,7 +215,7 @@ class ComponentLogic {
     }
     expandedNodes = expandedNodes // Trigger reactivity
   }
-  
+
   function selectNode(node) {
     value = node.value
     dispatch('select', { value: node.value, path: node.path })
@@ -229,11 +232,11 @@ class ComponentLogic {
         {@render expandIcon(expandedNodes.has(node.id))}
       </button>
     {/if}
-    
+
     <div onclick={() => selectNode(node)}>
       {@render nodeContent(node)}
     </div>
-    
+
     {#if node.hasChildren && expandedNodes.has(node.id)}
       <div class="tree-children">
         {#each node.children as child (child.id)}
@@ -253,7 +256,7 @@ class ComponentLogic {
 ```svelte
 <script>
   import { InputValidator } from '@rokkit/core'
-  
+
   let {
     value = $bindable(),
     name,
@@ -263,27 +266,27 @@ class ComponentLogic {
     validation = {},
     disabled = false
   } = $props()
-  
+
   let validator = $derived(new InputValidator(validation))
   let errors = $state([])
   let touched = $state(false)
-  
+
   function handleInput(event) {
     value = event.target.value
     if (touched) {
       validateValue()
     }
   }
-  
+
   function handleBlur() {
     touched = true
     validateValue()
   }
-  
+
   function validateValue() {
     errors = validator.validate(value)
   }
-  
+
   $effect(() => {
     if (required && !value) {
       errors = ['This field is required']
@@ -295,7 +298,7 @@ class ComponentLogic {
   {#if label}
     <label for={name}>{label}</label>
   {/if}
-  
+
   <input
     id={name}
     {name}
@@ -308,7 +311,7 @@ class ComponentLogic {
     oninput={handleInput}
     onblur={handleBlur}
   />
-  
+
   {#if errors.length > 0}
     <div id="{name}-error" class="error-message">
       {errors[0]}
@@ -351,11 +354,11 @@ class ComponentLogic {
 ```svelte
 <script>
   import { createId, trapFocus } from '@rokkit/core'
-  
+
   let componentId = createId()
   let focusedIndex = $state(0)
   let containerRef = $state()
-  
+
   function handleKeyboard(event) {
     switch (event.key) {
       case 'ArrowDown':
@@ -379,7 +382,7 @@ class ComponentLogic {
         break
     }
   }
-  
+
   $effect(() => {
     if (containerRef) {
       trapFocus(containerRef)
@@ -415,20 +418,20 @@ class ComponentLogic {
 ```svelte
 <script>
   import { VirtualList } from '@rokkit/core'
-  
+
   let {
     items = [],
     itemHeight = 40,
     visibleCount = 10,
     threshold = 100
   } = $props()
-  
+
   // Use virtual scrolling for large datasets
   let useVirtual = $derived(items.length > threshold)
   let virtualList = $derived(
     useVirtual ? new VirtualList(items, { itemHeight, visibleCount }) : null
   )
-  
+
   let visibleItems = $derived(
     useVirtual ? virtualList.getVisibleItems() : items
   )
@@ -467,29 +470,29 @@ describe('Component', () => {
     { id: 1, name: 'Item 1' },
     { id: 2, name: 'Item 2' }
   ]
-  
+
   test('renders items correctly', () => {
     const { getByText } = render(Component, {
       props: { items: mockItems }
     })
-    
+
     expect(getByText('Item 1')).toBeInTheDocument()
     expect(getByText('Item 2')).toBeInTheDocument()
   })
-  
+
   test('handles selection', async () => {
     let selectedValue
     const { getByText } = render(Component, {
-      props: { 
+      props: {
         items: mockItems,
         value: selectedValue
       }
     })
-    
+
     await fireEvent.click(getByText('Item 1'))
     expect(selectedValue).toBe(mockItems[0])
   })
-  
+
   test('supports field mapping', () => {
     const customItems = [{ title: 'Custom Item' }]
     const { getByText } = render(Component, {
@@ -498,20 +501,20 @@ describe('Component', () => {
         fields: { text: 'title' }
       }
     })
-    
+
     expect(getByText('Custom Item')).toBeInTheDocument()
   })
-  
+
   test('keyboard navigation works', async () => {
     const { container } = render(Component, {
       props: { items: mockItems }
     })
-    
+
     const listbox = container.querySelector('[role="listbox"]')
-    
+
     await fireEvent.keyDown(listbox, { key: 'ArrowDown' })
     // Test focus movement
-    
+
     await fireEvent.keyDown(listbox, { key: 'Enter' })
     // Test selection
   })
@@ -522,10 +525,10 @@ describe('Component', () => {
 
 ### Component API Documentation
 
-```typescript
+````typescript
 /**
  * Flexible list component for displaying and selecting items
- * 
+ *
  * @example
  * ```svelte
  * <List items={users} fields={{ text: 'name' }} bind:value />
@@ -534,19 +537,19 @@ describe('Component', () => {
 interface ListProps<T = any> {
   /** Array of items to display */
   items: T[]
-  
+
   /** Currently selected item */
   value?: T | null
-  
+
   /** Field mapping configuration */
   fields?: FieldMapping
-  
+
   /** Custom component overrides */
   using?: ComponentMap
-  
+
   /** Enable multiple selection */
   multiple?: boolean
-  
+
   /** Additional CSS classes */
   class?: string
 }
@@ -554,25 +557,25 @@ interface ListProps<T = any> {
 interface ListEvents<T = any> {
   /** Fired when an item is selected */
   select: CustomEvent<{ value: T }>
-  
+
   /** Fired when selection changes */
   change: CustomEvent<{ value: T | T[] }>
-  
+
   /** Fired when focus moves between items */
-  move: CustomEvent<{ index: number, value: T }>
+  move: CustomEvent<{ index: number; value: T }>
 }
 
 interface ListSlots {
   /** Custom header content */
   header: {}
-  
-  /** Custom footer content */  
+
+  /** Custom footer content */
   footer: {}
-  
+
   /** Empty state content */
   empty: {}
-  
+
   /** Custom item renderer */
   stub: { node: WrappedNode }
 }
-```
+````
diff --git a/.rules/architecture/principles.md b/.rules/architecture/principles.md
index 6d8951932..411a0b5aa 100644
--- a/.rules/architecture/principles.md
+++ b/.rules/architecture/principles.md
@@ -11,6 +11,7 @@ Rokkit is built on the principle that **data should drive the interface**, not t
 **Principle**: Components automatically understand and adapt to data structures.
 
 **Implementation**:
+
 ```svelte
 <!-- Data shapes the component, not vice versa -->
 <List items={users} fields={{ text: 'fullName', image: 'avatar' }} />
@@ -18,6 +19,7 @@ Rokkit is built on the principle that **data should drive the interface**, not t
 ```
 
 **Benefits**:
+
 - Eliminates data transformation layers
 - Reduces boilerplate code
 - Enables rapid prototyping
@@ -28,6 +30,7 @@ Rokkit is built on the principle that **data should drive the interface**, not t
 **Principle**: Every component should be extensible without modification.
 
 **Implementation**:
+
 ```svelte
 <!-- Custom rendering through snippets -->
 <List {items}>
@@ -38,6 +41,7 @@ Rokkit is built on the principle that **data should drive the interface**, not t
 ```
 
 **Benefits**:
+
 - No need to fork components
 - Maintains upgrade path
 - Enables design system integration
@@ -48,12 +52,14 @@ Rokkit is built on the principle that **data should drive the interface**, not t
 **Principle**: Similar components should behave similarly.
 
 **Standard Props Pattern**:
+
 - `items` / `options`: Data array
 - `value`: Current selection(s)
 - `fields`: Field mapping configuration
 - `using`: Component override system
 
 **Standard Events Pattern**:
+
 - `select`: Item selection
 - `change`: Value changes
 - `move`: Navigation/focus changes
@@ -63,6 +69,7 @@ Rokkit is built on the principle that **data should drive the interface**, not t
 **Principle**: Start simple, add complexity as needed.
 
 **Levels of Usage**:
+
 1. **Basic**: `<List items={stringArray} />`
 2. **Mapped**: `<List items={objects} fields={mapping} />`
 3. **Custom**: `<List items={objects} {fields} {using} />`
@@ -73,6 +80,7 @@ Rokkit is built on the principle that **data should drive the interface**, not t
 **Principle**: Components should be accessible without additional configuration.
 
 **Implementation**:
+
 - ARIA attributes automatically applied
 - Keyboard navigation built-in
 - Screen reader support included
@@ -86,11 +94,11 @@ All selection components follow this structure:
 
 ```typescript
 interface SelectionComponent {
-  items: T[]                    // Data array
-  value: T | T[] | null        // Selected item(s)
-  fields: FieldMapping         // Data mapping
-  using: ComponentMap          // Custom components
-  multiple?: boolean           // Multi-selection
+  items: T[] // Data array
+  value: T | T[] | null // Selected item(s)
+  fields: FieldMapping // Data mapping
+  using: ComponentMap // Custom components
+  multiple?: boolean // Multi-selection
 }
 ```
 
@@ -102,10 +110,10 @@ Components dealing with nested data:
 
 ```typescript
 interface HierarchicalComponent {
-  items: TreeNode<T>[]         // Nested data
-  value: T | null              // Selected item
-  fields: NestedFieldMapping   // Nested mapping
-  autoClose?: boolean          // Behavior control
+  items: TreeNode<T>[] // Nested data
+  value: T | null // Selected item
+  fields: NestedFieldMapping // Nested mapping
+  autoClose?: boolean // Behavior control
 }
 ```
 
@@ -117,10 +125,10 @@ Form input components:
 
 ```typescript
 interface InputComponent {
-  value: T                     // Current value
-  placeholder?: string         // Hint text
-  disabled?: boolean          // State control
-  required?: boolean          // Validation
+  value: T // Current value
+  placeholder?: string // Hint text
+  disabled?: boolean // State control
+  required?: boolean // Validation
 }
 ```
 
@@ -144,15 +152,16 @@ const defaultFields = {
 
 // Custom mapping
 const customFields = {
-  text: 'name',        // Map 'name' to text display
-  image: 'avatar',     // Map 'avatar' to image display
-  children: 'items'    // Map 'items' to nested children
+  text: 'name', // Map 'name' to text display
+  image: 'avatar', // Map 'avatar' to image display
+  children: 'items' // Map 'items' to nested children
 }
 ```
 
 ### Advanced Mapping Features
 
 **Nested Field Access**:
+
 ```javascript
 const fields = {
   text: 'user.profile.displayName',
@@ -161,6 +170,7 @@ const fields = {
 ```
 
 **Dynamic Field Selection**:
+
 ```javascript
 const fields = {
   text: (item) => `${item.firstName} ${item.lastName}`,
@@ -177,7 +187,7 @@ The `using` property allows complete component replacement:
 ```svelte
 <script>
   import CustomItem from './CustomItem.svelte'
-  
+
   const using = {
     default: CustomItem,  // Default component
     special: SpecialItem  // Component for items with type='special'
@@ -222,7 +232,7 @@ Components use Svelte's reactive binding system:
 Components emit standard events for integration:
 
 ```svelte
-<List 
+<List
   {items}
   onselect={(e) => handleSelection(e.detail)}
   onchange={(e) => updateValue(e.detail)}
@@ -334,4 +344,4 @@ Components should continue working with imperfect data:
 - Regular dependency updates
 - Security vulnerability monitoring
 - Community contribution guidelines
-- Open source governance model
\ No newline at end of file
+- Open source governance model
diff --git a/.rules/instructions.md b/.rules/instructions.md
index 2290f203c..aa7f30442 100644
--- a/.rules/instructions.md
+++ b/.rules/instructions.md
@@ -80,12 +80,15 @@ Provide progress updates and explain technical decisions.
 ## Monorepo Structure & Guidelines
 
 ### Project Structure
+
 This is a monorepo with the following structure:
+
 - `packages/` - Library packages (e.g., @rokkit/forms, @rokkit/ui, @rokkit/core)
 - `sites/` - Demo sites and documentation (e.g., sites/learn)
 - `apps/` - Applications (if present)
 
 ### Library Development (`packages/`)
+
 - Create reusable components and utilities
 - Follow semantic versioning
 - Include comprehensive TypeScript definitions
@@ -93,6 +96,7 @@ This is a monorepo with the following structure:
 - Test thoroughly before publishing
 
 ### Demo Development (`sites/`)
+
 - Use library packages as dependencies
 - Use components from the packages (ex. @rokkit/ui) for the demo. Any custom components in the site should build on top of the library components.
 - Create progressive examples showing feature evolution
@@ -100,6 +104,7 @@ This is a monorepo with the following structure:
 - Include educational documentation
 
 ### Styling Guidelines
+
 - Use UnoCSS utility classes throughout
 - Follow neutral color palette: `neutral-50`, `neutral-100`, etc.
 - Use semantic colors: `primary-`, `secondary-`, `accent-`, `error-`, `warning-`, `success-`
diff --git a/.rules/project/overview.md b/.rules/project/overview.md
index 2e7df1ff5..726bca700 100644
--- a/.rules/project/overview.md
+++ b/.rules/project/overview.md
@@ -7,6 +7,7 @@ Rokkit is a cutting-edge Svelte UI library designed to simplify the creation of
 ## Core Objectives
 
 ### Primary Goals
+
 1. **Data-Driven Architecture**: Components automatically adapt to data structures without requiring data transformation
 2. **Maximum Flexibility**: Support for custom components, field mapping, and extensible behavior
 3. **Consistent API**: Unified approach across all components with predictable props and patterns
@@ -14,6 +15,7 @@ Rokkit is a cutting-edge Svelte UI library designed to simplify the creation of
 5. **Developer Experience**: Intuitive API that reduces boilerplate and common UI development pain points
 
 ### Strategic Vision
+
 - Become the go-to UI library for Svelte applications requiring flexible, data-driven interfaces
 - Provide a robust foundation that scales from simple forms to complex enterprise applications
 - Maintain backwards compatibility while evolving with Svelte ecosystem standards
@@ -22,12 +24,14 @@ Rokkit is a cutting-edge Svelte UI library designed to simplify the creation of
 ## Current State (December 2024)
 
 ### Recently Completed
+
 - ✅ **Svelte 5 Migration**: Successfully upgraded from Svelte 4 to Svelte 5 with runes
 - ✅ **Core Architecture**: Established package structure with @rokkit/core, @rokkit/ui, etc.
 - ✅ **Component Portfolio**: 15+ production-ready components following data-driven patterns
 - ✅ **Documentation Site**: Comprehensive tutorial system with live examples
 
 ### Active Development Phase
+
 - 🔄 **bits-ui Integration**: Refactoring components to leverage bits-ui for accessibility and behavior
 - 🔄 **API Standardization**: Ensuring consistent patterns across all components
 - 🔄 **Performance Optimization**: Leveraging Svelte 5 features for better performance
@@ -35,17 +39,20 @@ Rokkit is a cutting-edge Svelte UI library designed to simplify the creation of
 ## Key Features & Differentiators
 
 ### Data-Driven Components
+
 ```svelte
 <!-- Automatic adaptation to data structure -->
 <List items={apiData} fields={{ text: 'name', image: 'avatar' }} bind:value />
 ```
 
 ### Field Mapping System
+
 - Components adapt to any data structure via `fields` prop
 - No need to transform API responses to match component expectations
 - Supports nested field access and complex mappings
 
 ### Component Flexibility
+
 ```svelte
 <!-- Custom rendering via snippets -->
 <List {items}>
@@ -56,13 +63,16 @@ Rokkit is a cutting-edge Svelte UI library designed to simplify the creation of
 ```
 
 ### Consistent API Patterns
+
 All selection components follow the same pattern:
+
 - `items`: Data array
 - `value`: Selected item(s)
 - `fields`: Field mapping configuration
 - `using`: Custom component overrides
 
 ### Built-in Accessibility
+
 - Keyboard navigation support
 - ARIA attributes and roles
 - Screen reader compatibility
@@ -71,6 +81,7 @@ All selection components follow the same pattern:
 ## Package Architecture
 
 ### Core Packages
+
 - **@rokkit/core**: Field mapping, utilities, and foundational logic
 - **@rokkit/ui**: Main component library
 - **@rokkit/actions**: Svelte actions for enhanced behavior
@@ -79,18 +90,21 @@ All selection components follow the same pattern:
 - **@rokkit/themes**: Theming and CSS variable systems
 
 ### Development Packages
+
 - **@rokkit/data**: Data manipulation utilities (planned)
 - **@rokkit/layout**: Layout components and responsive utilities
 
 ## Target Use Cases
 
 ### Primary
+
 1. **Admin Dashboards**: Data tables, forms, navigation trees
 2. **Content Management**: File browsers, media galleries, content editors
 3. **E-commerce**: Product catalogs, filtering interfaces, checkout flows
 4. **Data Visualization**: Interactive charts, filterable datasets
 
 ### Secondary
+
 1. **Design Systems**: Foundation for custom component libraries
 2. **Rapid Prototyping**: Quick UI assembly for MVPs
 3. **Educational Tools**: Learning interfaces with complex data relationships
@@ -98,12 +112,14 @@ All selection components follow the same pattern:
 ## Success Metrics
 
 ### Technical
+
 - Component API consistency score > 95%
 - Bundle size < 50kb (tree-shaken)
 - TypeScript coverage > 90%
 - Accessibility compliance (WCAG 2.1 AA)
 
 ### Adoption
+
 - NPM downloads growth
 - Community contributions
 - Documentation completeness
@@ -123,4 +139,4 @@ All selection components follow the same pattern:
 2. **Component Standardization**: Ensure all components follow established patterns
 3. **Performance Optimization**: Utilize Svelte 5 features for better performance
 4. **Community Building**: Expand documentation and contribution guidelines
-5. **Ecosystem Growth**: Partner integrations and official adapters
\ No newline at end of file
+5. **Ecosystem Growth**: Partner integrations and official adapters
diff --git a/.rules/project/progress.md b/.rules/project/progress.md
index 3e28c93a4..37554c3cc 100644
--- a/.rules/project/progress.md
+++ b/.rules/project/progress.md
@@ -5,6 +5,7 @@
 **Status**: Active Development - Forms system architecture implemented, progressive tutorial creation in progress
 
 ## Foundation Status (✅ Completed)
+
 - [x] Svelte 5 migration with runes system
 - [x] Core package architecture established
 - [x] Build system operational
@@ -16,6 +17,7 @@
 ## Forms System Status
 
 ### Core Architecture (✅ Completed)
+
 - [x] FormBuilder class with reactive state management
 - [x] Separate validation state with dedicated methods
 - [x] Property composition system (schema + layout + validation → props)
@@ -25,70 +27,79 @@
 - [x] Flexible arbitrary property support from layout
 
 ### Components Implementation
-| Component | Status | Implementation Notes |
-|-----------|--------|---------------------|
-| FormBuilder | ✅ Complete | Three-parameter constructor, separate validation state |
-| Input.svelte | ✅ Complete | Universal wrapper with type-aware layouts |
-| FormRenderer | ✅ Complete | Snippet-based rendering with defaultInput and child |
-| Validation Utility | ✅ Complete | Schema-based validation with message objects |
+
+| Component          | Status      | Implementation Notes                                   |
+| ------------------ | ----------- | ------------------------------------------------------ |
+| FormBuilder        | ✅ Complete | Three-parameter constructor, separate validation state |
+| Input.svelte       | ✅ Complete | Universal wrapper with type-aware layouts              |
+| FormRenderer       | ✅ Complete | Snippet-based rendering with defaultInput and child    |
+| Validation Utility | ✅ Complete | Schema-based validation with message objects           |
 
 ### Tutorial Implementation
-| Section | Status | Description | URL |
-|---------|--------|-------------|-----|
-| Main Tutorial Page | ✅ Complete | Progressive navigation with sidebar | `/forms` |
-| 1. Input Components | ✅ Complete | Universal Input examples and properties | `/forms/inputs` |
-| 2. FormBuilder | ✅ Complete | Data-driven form creation with schema/layout | `/forms/builder` |
-| 3. FormRenderer | 🔄 In Progress | Snippet-based rendering and customization | `/forms/renderer` |
-| 4. Validation | 📋 Planned | Real-time validation and message handling | `/forms/validation` |
-| 5. Advanced Features | 📋 Planned | Custom snippets and complex layouts | `/forms/advanced` |
+
+| Section              | Status         | Description                                  | URL                 |
+| -------------------- | -------------- | -------------------------------------------- | ------------------- |
+| Main Tutorial Page   | ✅ Complete    | Progressive navigation with sidebar          | `/forms`            |
+| 1. Input Components  | ✅ Complete    | Universal Input examples and properties      | `/forms/inputs`     |
+| 2. FormBuilder       | ✅ Complete    | Data-driven form creation with schema/layout | `/forms/builder`    |
+| 3. FormRenderer      | 🔄 In Progress | Snippet-based rendering and customization    | `/forms/renderer`   |
+| 4. Validation        | 📋 Planned     | Real-time validation and message handling    | `/forms/validation` |
+| 5. Advanced Features | 📋 Planned     | Custom snippets and complex layouts          | `/forms/advanced`   |
 
 ### Shared Components
-| Component | Status | Description | Location |
-|-----------|--------|-------------|----------|
-| CodeViewer | ✅ Complete | Demo component with source code display and copy functionality | `tutorial/CodeViewer.svelte` |
-| Demo Loader | ✅ Complete | Utility for loading demo components and source code | `tutorial/demo-loader.js` |
-| Source Code API | ✅ Complete | API endpoint for serving demo source files securely | `/api/source-code` |
-| Syntax Highlighting | ✅ Complete | Shiki.js integration for code highlighting | `$lib/shiki.js` |
+
+| Component           | Status      | Description                                                    | Location                     |
+| ------------------- | ----------- | -------------------------------------------------------------- | ---------------------------- |
+| CodeViewer          | ✅ Complete | Demo component with source code display and copy functionality | `tutorial/CodeViewer.svelte` |
+| Demo Loader         | ✅ Complete | Utility for loading demo components and source code            | `tutorial/demo-loader.js`    |
+| Source Code API     | ✅ Complete | API endpoint for serving demo source files securely            | `/api/source-code`           |
+| Syntax Highlighting | ✅ Complete | Shiki.js integration for code highlighting                     | `$lib/shiki.js`              |
 
 ### Component Migration Status (Background Task)
 
 ### Selection Components
-| Component | Svelte 5 Status | bits-ui Integration | Implementation Notes |
-|-----------|-----------------|-------------------|---------------------|
-| List | ✅ Complete | 🔄 Custom approach | Core pattern - field mapping priority |
-| Tabs | ✅ Complete | 📋 bits-ui/tabs | Direct migration candidate |
-| Select | ✅ Complete | 📋 bits-ui/select | Complex - requires field mapping preservation |
-| MultiSelect | ✅ Complete | 📋 bits-ui/listbox | Custom behavior needed for multi-selection |
-| Switch | ✅ Complete | 📋 bits-ui/toggle-group | Simple migration |
-| DropDown | ✅ Complete | 📋 bits-ui/dropdown-menu | Architecture decision needed |
-
-### Hierarchical Components  
-| Component | Svelte 5 Status | bits-ui Integration | Implementation Notes |
-|-----------|-----------------|-------------------|---------------------|
-| Tree | ✅ Complete | ❌ No equivalent | Full custom implementation required |
-| Accordion | ✅ Complete | 📋 bits-ui/accordion | Direct migration with field mapping |
+
+| Component   | Svelte 5 Status | bits-ui Integration      | Implementation Notes                          |
+| ----------- | --------------- | ------------------------ | --------------------------------------------- |
+| List        | ✅ Complete     | 🔄 Custom approach       | Core pattern - field mapping priority         |
+| Tabs        | ✅ Complete     | 📋 bits-ui/tabs          | Direct migration candidate                    |
+| Select      | ✅ Complete     | 📋 bits-ui/select        | Complex - requires field mapping preservation |
+| MultiSelect | ✅ Complete     | 📋 bits-ui/listbox       | Custom behavior needed for multi-selection    |
+| Switch      | ✅ Complete     | 📋 bits-ui/toggle-group  | Simple migration                              |
+| DropDown    | ✅ Complete     | 📋 bits-ui/dropdown-menu | Architecture decision needed                  |
+
+### Hierarchical Components
+
+| Component | Svelte 5 Status | bits-ui Integration  | Implementation Notes                |
+| --------- | --------------- | -------------------- | ----------------------------------- |
+| Tree      | ✅ Complete     | ❌ No equivalent     | Full custom implementation required |
+| Accordion | ✅ Complete     | 📋 bits-ui/accordion | Direct migration with field mapping |
 
 ### Data Components
-| Component | Svelte 5 Status | bits-ui Integration | Implementation Notes |
-|-----------|-----------------|-------------------|---------------------|
-| Table | ✅ Complete | ❌ No equivalent | Complex data handling - custom required |
+
+| Component | Svelte 5 Status | bits-ui Integration | Implementation Notes                    |
+| --------- | --------------- | ------------------- | --------------------------------------- |
+| Table     | ✅ Complete     | ❌ No equivalent    | Complex data handling - custom required |
 
 ### Input Components
-| Component | Svelte 5 Status | bits-ui Integration | Implementation Notes |
-|-----------|-----------------|-------------------|---------------------|
-| Rating | ✅ Complete | ❌ No equivalent | Custom input component |
-| Range | ✅ Complete | 📋 bits-ui/slider | Feature gap analysis needed |
+
+| Component | Svelte 5 Status | bits-ui Integration | Implementation Notes        |
+| --------- | --------------- | ------------------- | --------------------------- |
+| Rating    | ✅ Complete     | ❌ No equivalent    | Custom input component      |
+| Range     | ✅ Complete     | 📋 bits-ui/slider   | Feature gap analysis needed |
 
 ### Primitive Components (Complete)
-| Component | Status | Notes |
-|-----------|--------|-------|
-| Icon | ✅ Complete | No migration needed |
-| Item | ✅ Complete | Core rendering primitive |
-| Pill | ✅ Complete | Wrapper component |
+
+| Component | Status      | Notes                    |
+| --------- | ----------- | ------------------------ |
+| Icon      | ✅ Complete | No migration needed      |
+| Item      | ✅ Complete | Core rendering primitive |
+| Pill      | ✅ Complete | Wrapper component        |
 
 ## Implementation Priorities
 
 ### Tutorial System (Recently Completed)
+
 1. **CodeViewer Component** - ✅ Complete - Reusable component for demo display with source code viewing
 2. **Demo Structure** - ✅ Complete - Standardized src/App.svelte pattern for maintainable demos
 3. **Source Code Loading** - ✅ Complete - API endpoint and fallback strategies for code display
@@ -97,16 +108,19 @@
 6. **Code Highlighting** - ✅ Complete - Shiki.js integration for syntax highlighting
 
 ### Forms System (Active)
+
 1. **FormRenderer Tutorial** (`/forms/renderer`) - Complete snippet-based rendering examples
 2. **Validation Tutorial** (`/forms/validation`) - Real-time validation and user-action triggers
 3. **Advanced Features Tutorial** (`/forms/advanced`) - Custom snippets, nested forms, complex layouts
 
 ### Critical Path Components (Background)
+
 1. **List** - Establishes core data-driven patterns for all other components
 2. **Select** - Tests field mapping complexity with bits-ui integration
 3. **Tree** - Custom implementation reference for components without bits-ui equivalents
 
 ### Integration Strategy
+
 - **bits-ui Components**: Wrap with Rokkit API layer maintaining field mapping
 - **Custom Components**: Build with accessibility patterns inspired by bits-ui
 - **API Preservation**: Maintain existing component interfaces during transition
@@ -114,16 +128,19 @@
 ## Technical Requirements
 
 ### Field Mapping System Preservation
+
 - All components must maintain current field mapping capabilities
 - `fields` prop must work identically across bits-ui and custom components
 - Dynamic component selection via `using` prop must be preserved
 
 ### Accessibility Standards
+
 - WCAG 2.1 AA compliance for all components
 - Keyboard navigation patterns consistent with bits-ui standards
 - Screen reader compatibility maintained or improved
 
 ### Performance Constraints
+
 - Bundle size impact from bits-ui must be justified by accessibility gains
 - Component rendering performance must not degrade
 - Tree-shaking must work effectively with wrapper approach
@@ -131,6 +148,7 @@
 ## Implementation Guidelines
 
 ### Component Migration Checklist
+
 When working on any component:
 
 - [ ] Preserve existing API surface (items, value, fields, using props)
@@ -143,6 +161,7 @@ When working on any component:
 - [ ] Update documentation examples
 
 ### Quality Requirements
+
 All components must meet:
 
 - [ ] Field mapping system preserved and working
@@ -157,6 +176,7 @@ All components must meet:
 ### Technical Decisions Made
 
 ### Forms System Decisions
+
 - **Separate Validation State**: Independent validation management from data/schema/layout
 - **Element Structure**: `{ scope, type, value, override, props }` pattern with JSON Pointer scopes
 - **Property Composition**: Schema + layout + validation merged into single props object
@@ -167,6 +187,7 @@ All components must meet:
 - **Browser Compatibility**: Fixed URL constructor issues for cross-environment compatibility
 
 ### Tutorial System Decisions
+
 - **Demo Structure**: Standardized `src/App.svelte` pattern for maintainable tutorial demos
 - **Source Code Loading**: Multi-strategy approach (API endpoint, raw imports, error on failure)
 - **Component Separation**: CodeViewer as shared component, demo-loader as utility module
@@ -177,12 +198,14 @@ All components must meet:
 - **Code Safety**: Proper HTML escaping and error boundaries
 
 ### Architecture Decisions (Background)
+
 - **Field Mapping Priority**: Preserve existing field mapping system over bits-ui native patterns
 - **Wrapper Strategy**: Use bits-ui as foundation but wrap with Rokkit API layer
 - **Custom Components**: Build without bits-ui for components with no equivalent
 - **Backward Compatibility**: Maintain existing APIs during transition
 
 ### Component-Specific Decisions
+
 - **Forms**: Complete custom implementation with accessibility patterns
 - **List**: Custom implementation with bits-ui accessibility patterns as reference
 - **Tree/Table**: Full custom implementation due to complexity and no bits-ui equivalent
@@ -192,6 +215,7 @@ All components must meet:
 ## LLM Development Notes
 
 ### When Working on Tutorial System
+
 1. **Use CodeViewer for demos** - Replace hardcoded examples with CodeViewer components
 2. **Follow demo structure** - Create `src/App.svelte` files for reusable, testable demos
 3. **Show errors clearly** - Display error messages instead of hardcoded fallback code
@@ -200,6 +224,7 @@ All components must meet:
 6. **Proper error handling** - Use try/catch blocks and show meaningful error messages
 
 ### When Working on Forms System
+
 1. **Maintain separate validation state** - validation should be user-action triggered, not automatic
 2. **Preserve element structure** - scope, type, value, override, props pattern is critical
 3. **Support arbitrary properties** - layout can contain any custom properties for components
@@ -207,6 +232,7 @@ All components must meet:
 5. **Use UnoCSS conventions** - neutral colors, semantic colors, dark mode support
 
 ### When Working on Components (Background)
+
 1. **Always check existing patterns** in `sites/learn/src/lib/stories/` for current API expectations
 2. **Field mapping is critical** - any component handling data must support the `fields` prop
 3. **Snippet support required** - users expect to customize rendering via snippets
@@ -214,6 +240,7 @@ All components must meet:
 5. **Performance matters** - test with realistic datasets (100-1000+ items)
 
 ### Tutorial System Patterns
+
 - Demo structure: `tutorial/{section}/{topic}/src/App.svelte`
 - CodeViewer usage: `<CodeViewer component={demoComponent} code={demoCode} title="..." description="..." />`
 - Demo loading: `const demo = await loadDemo('section/topic')`
@@ -223,6 +250,7 @@ All components must meet:
 - Error boundaries: Proper try/catch blocks and HTML escaping
 
 ### Forms System Patterns
+
 - FormBuilder constructor: `new FormBuilder(data, schema?, layout?)`
 - Element structure: `{ scope, type, value, override, props }`
 - JSON Pointer scopes: `#/fieldPath` format
@@ -231,15 +259,17 @@ All components must meet:
 - Snippet selection: defaultInput vs child based on override flag
 
 ### Common Patterns to Maintain (Background)
+
 - `items` prop for data arrays
-- `value` prop with `$bindable()` for selections  
+- `value` prop with `$bindable()` for selections
 - `fields` prop for data mapping configuration
 - `using` prop for component overrides
 - Standard event patterns (select, change, move)
 - Snippet support for customization
 
 ### Integration Strategy Notes
+
 - bits-ui provides accessibility foundation but may not support our data-driven patterns
 - Custom wrapper layer needed to preserve field mapping
 - Some components will remain fully custom (Tree, Table, Rating)
-- Bundle size impact must be measured and justified
\ No newline at end of file
+- Bundle size impact must be measured and justified
diff --git a/.rules/project/structure.md b/.rules/project/structure.md
index aabdd38ba..f8d17d86a 100644
--- a/.rules/project/structure.md
+++ b/.rules/project/structure.md
@@ -24,23 +24,24 @@ rokkit/
 
 This repository contains the following packages with their corresponding folder locations:
 
-| Package Name | Folder Location | Description |
-|--------------|-----------------|-------------|
-| `@rokkit/actions` | `packages/actions/` | Action utilities and helpers |
-| `@rokkit/bits-ui` | `packages/bits-ui/` | Data-driven UI components based on bits-ui |
-| `@rokkit/chart` | `packages/chart/` | Chart and visualization components |
-| `@rokkit/cli` | `packages/cli/` | Command line interface tools |
-| `@rokkit/core` | `packages/core/` | Core utilities and shared code |
-| `@rokkit/data` | `packages/data/` | Data manipulation utilities |
-| `@rokkit/forms` | `packages/forms/` | Form builder system |
-| `@rokkit/helpers` | `packages/helpers/` | Helper functions and utilities |
-| `@rokkit/icons` | `packages/icons/` | Icon components and utilities |
-| `@rokkit/states` | `packages/states/` | State management utilities |
-| `@rokkit/themes` | `packages/themes/` | Theme and styling utilities |
-| `@rokkit/tutorial` | `packages/tutorial/` | Tutorial and learning components |
-| `@rokkit/ui` | `packages/ui/` | UI component library |
+| Package Name       | Folder Location      | Description                                |
+| ------------------ | -------------------- | ------------------------------------------ |
+| `@rokkit/actions`  | `packages/actions/`  | Action utilities and helpers               |
+| `@rokkit/bits-ui`  | `packages/bits-ui/`  | Data-driven UI components based on bits-ui |
+| `@rokkit/chart`    | `packages/chart/`    | Chart and visualization components         |
+| `@rokkit/cli`      | `packages/cli/`      | Command line interface tools               |
+| `@rokkit/core`     | `packages/core/`     | Core utilities and shared code             |
+| `@rokkit/data`     | `packages/data/`     | Data manipulation utilities                |
+| `@rokkit/forms`    | `packages/forms/`    | Form builder system                        |
+| `@rokkit/helpers`  | `packages/helpers/`  | Helper functions and utilities             |
+| `@rokkit/icons`    | `packages/icons/`    | Icon components and utilities              |
+| `@rokkit/states`   | `packages/states/`   | State management utilities                 |
+| `@rokkit/themes`   | `packages/themes/`   | Theme and styling utilities                |
+| `@rokkit/tutorial` | `packages/tutorial/` | Tutorial and learning components           |
+| `@rokkit/ui`       | `packages/ui/`       | UI component library                       |
 
 ### Key Package Dependencies
+
 - `@rokkit/core` - Can be used by any package (foundational utilities)
 - `@rokkit/states` - Used by UI packages for data management
 - `@rokkit/bits-ui` - Provides data-driven wrappers for bits-ui components
@@ -50,11 +51,13 @@ This repository contains the following packages with their corresponding folder
 ## Package Development (`packages/`)
 
 ### Purpose
+
 - Create reusable, framework-agnostic libraries
 - Provide core functionality for the Rokkit ecosystem
 - Maintain strict separation of concerns
 
 ### Guidelines
+
 - Each package should have a clear, single responsibility
 - Use semantic versioning for releases
 - Include comprehensive TypeScript definitions
@@ -62,6 +65,7 @@ This repository contains the following packages with their corresponding folder
 - Test all public APIs extensively
 
 ### Structure Pattern
+
 ```
 packages/[package-name]/
 ├── src/
@@ -77,17 +81,20 @@ packages/[package-name]/
 ## Site Development (`sites/`)
 
 ### Purpose
+
 - Demonstrate library package capabilities
 - Provide educational content and examples
 - Show progressive enhancement patterns
 
 ### Guidelines
+
 - Import packages as dependencies (e.g., `@rokkit/forms`)
 - Create step-by-step learning experiences
 - Follow established styling patterns
 - Include both basic and advanced examples
 
 ### Learning Site Structure (`sites/learn/`)
+
 ```
 sites/learn/
 ├── src/
@@ -103,12 +110,14 @@ sites/learn/
 ## Development Workflow
 
 ### Package Development
+
 1. Develop in `packages/[name]/src/`
 2. Test thoroughly with unit and integration tests
 3. Update documentation in `packages/[name]/docs/`
 4. Version according to semantic versioning
 
 ### Demo Development
+
 1. Import published packages or use workspace references
 2. Create progressive examples in `sites/learn/src/lib/future/`
 3. Build route pages in `sites/learn/src/routes/`
@@ -117,12 +126,14 @@ sites/learn/
 ## Styling System
 
 ### UnoCSS Conventions
+
 - **Neutral Colors**: `neutral-50` through `neutral-900`
 - **Semantic Colors**: `primary-`, `secondary-`, `accent-`, `error-`, `warning-`, `success-`
 - **Dark Mode**: Always include `dark:` variants
 - **Interactive States**: Use `hover:`, `focus:`, `active:` variants
 
 ### Color Patterns
+
 ```css
 /* Backgrounds */
 bg-neutral-50 dark:bg-neutral-900        /* Page backgrounds */
@@ -146,12 +157,14 @@ focus:ring-2 focus:ring-primary-500
 ## Documentation Standards
 
 ### Package Documentation
+
 - Clear API reference in `docs/` folder
 - Usage examples with code snippets
 - Migration guides for breaking changes
 - Contributing guidelines
 
 ### Demo Documentation
+
 - Step-by-step tutorials
 - Progressive complexity examples
 - Real-world use cases
@@ -160,12 +173,14 @@ focus:ring-2 focus:ring-primary-500
 ## Cross-Package Dependencies
 
 ### Allowed Dependencies
+
 - `@rokkit/core` can be used by any package
 - UI packages can depend on core utilities
 - Sites can use any published package
 
 ### Dependency Guidelines
+
 - Minimize cross-package dependencies
 - Use peer dependencies for optional features
 - Document all external dependencies clearly
-- Keep dependency trees shallow
\ No newline at end of file
+- Keep dependency trees shallow
diff --git a/.rules/project/workflow.md b/.rules/project/workflow.md
index b3e6d1b1d..25ea18c23 100644
--- a/.rules/project/workflow.md
+++ b/.rules/project/workflow.md
@@ -3,6 +3,7 @@
 ## CRITICAL: Progress Tracking Requirement
 
 **MUST UPDATE** `.rules/project/progress.md` after any changes to:
+
 - Component status (🔄 In Progress, ✅ Complete, etc.)
 - Implementation decisions made
 - Technical challenges encountered
@@ -14,6 +15,7 @@ This maintains project continuity between development sessions.
 ## Component Development Standards
 
 ### File Structure Convention
+
 ```
 packages/ui/src/components/ComponentName/
 ├── ComponentName.svelte          # Main component implementation
@@ -23,6 +25,7 @@ packages/ui/src/components/ComponentName/
 ```
 
 ### Tutorial Structure Convention
+
 ```
 sites/learn/src/lib/stories/component-name/
 ├── 01-intro/
@@ -36,9 +39,11 @@ sites/learn/src/lib/stories/component-name/
 ## Component API Standards
 
 ### Required Props Pattern
+
 All data-driven components MUST follow this pattern:
+
 ```svelte
-let { 
+let {
   items = [],                    # Data array
   value = $bindable(),          # Selected value(s) - bindable
   fields = {},                  # Field mapping object
@@ -47,6 +52,7 @@ let {
 ```
 
 ### Data Handling Pattern
+
 ```svelte
 import { Proxy } from '@rokkit/states'
 
@@ -55,11 +61,12 @@ let proxyItems = $derived(items.map(item => new Proxy(item, fields)))
 
 // Access data through proxy methods
 proxyItem.get('text')    # Get field value
-proxyItem.has('href')    # Check field existence  
+proxyItem.has('href')    # Check field existence
 proxyItem.id             # Auto-generated ID
 ```
 
 ### Snippet Support Pattern
+
 ```svelte
 let { children } = $props()
 
@@ -77,6 +84,7 @@ let itemSnippet = $derived(children?.item ?? defaultItem)
 ## Implementation Requirements
 
 ### Component Structure Standards
+
 1. **No internal styling** - components must be completely unstyled
 2. **Data attributes only** - use `data-component-element` pattern for styling hooks
 3. **Proxy system** - use `@rokkit/states` Proxy for all data access
@@ -84,13 +92,16 @@ let itemSnippet = $derived(children?.item ?? defaultItem)
 5. **Accessibility** - proper ARIA attributes and keyboard navigation
 
 ### bits-ui Integration Pattern
+
 - Use bits-ui components as foundation when available
 - Wrap with Rokkit API layer (items, fields, value props)
 - Preserve bits-ui data attributes for theming
 - See `packages/bits-ui/src/List.svelte` for reference implementation
 
 ### Custom Component Pattern
+
 For components without bits-ui equivalent:
+
 - Follow same data attribute naming as bits-ui
 - Implement full accessibility support
 - Use established keyboard navigation patterns
@@ -99,6 +110,7 @@ For components without bits-ui equivalent:
 ## Quality Requirements
 
 ### Before Component is Complete
+
 - [ ] Follows standard prop pattern (items, value, fields)
 - [ ] Uses Proxy system for data access
 - [ ] Supports snippet customization
@@ -111,6 +123,7 @@ For components without bits-ui equivalent:
 - [ ] **Progress document updated**
 
 ### Testing Requirements
+
 - Field mapping functionality (custom fields work)
 - Data attribute presence and correctness
 - Accessibility attributes and behavior
@@ -122,6 +135,7 @@ For components without bits-ui equivalent:
 ### Before Starting Any Component Work
 
 **MUST Provide Feature Breakdown:**
+
 - Complete technical description
 - List all files to be created/modified
 - Integration points with existing components
@@ -129,6 +143,7 @@ For components without bits-ui equivalent:
 - Reference implementations to study
 
 **Example Breakdown:**
+
 ```
 Component: TreeSelect
 
@@ -165,12 +180,14 @@ Reference: Tree component + Select patterns
 ### During Development
 
 **Incremental Changes:**
+
 - Work on one file at a time
 - Test each change before proceeding
 - Update progress document after significant changes
 - Follow conventional commit patterns if committing
 
 **Conventional Commit Format:**
+
 ```
 feat(ui): add TreeSelect component with keyboard navigation
 fix(ui): resolve focus management in Tree component
@@ -191,6 +208,7 @@ docs(stories): update TreeSelect tutorial examples
 9. **Update progress tracking** with current status
 
 ### Integration Priorities
+
 - **Proxy over FieldMapper** - use @rokkit/states for data access
 - **bits-ui where possible** - leverage for accessibility and behavior
 - **Data attributes over classes** - use for theming hooks
@@ -200,11 +218,13 @@ docs(stories): update TreeSelect tutorial examples
 ## Reference Resources
 
 ### Study These Files
+
 - `packages/bits-ui/src/List.svelte` - bits-ui integration pattern
 - `sites/learn/src/lib/stories/02-elements/01-list/` - tutorial structure
 - Existing component tests for testing patterns
 
 ### Follow These Patterns
+
 - `.rules/architecture/patterns.md` - component implementation patterns
 - `.rules/references/external.md` - integration requirements
 - `.rules/project/progress.md` - current component status
@@ -222,9 +242,10 @@ docs(stories): update TreeSelect tutorial examples
 ## Success Criteria
 
 A component is considered complete when:
+
 - All quality requirements are met
 - Tutorial examples demonstrate key features
 - Tests verify functionality and accessibility
 - Progress document reflects completion status
 - Component follows established patterns
-- Performance is acceptable with realistic data
\ No newline at end of file
+- Performance is acceptable with realistic data
diff --git a/.rules/references/external.md b/.rules/references/external.md
index 6eedbcfc3..35d990952 100644
--- a/.rules/references/external.md
+++ b/.rules/references/external.md
@@ -3,12 +3,15 @@
 ## bits-ui Integration Strategy
 
 ### Reference Implementation
+
 See `packages/bits-ui/src/List.svelte` for the actual implementation pattern using:
+
 - `Command` component from bits-ui
-- `Proxy` system from `@rokkit/states` 
+- `Proxy` system from `@rokkit/states`
 - Snippet-based rendering with default fallbacks
 
 ### Key Integration Constraints
+
 - **Proxy System**: Use `@rokkit/states` Proxy instead of FieldMapper for data handling
 - **bits-ui Command**: List component built on Command primitive for search/selection
 - **API Compatibility**: Rokkit props (items, value, fields) must work identically
@@ -18,25 +21,32 @@ See `packages/bits-ui/src/List.svelte` for the actual implementation pattern usi
 ## Data-Attribute Styling System
 
 ### Component Data Attribute Pattern
+
 Components use data attributes for styling hooks. See actual implementations:
+
 - `packages/bits-ui/src/List.svelte` - shows bits-ui Command data attributes
 - bits-ui components provide their own data attribute patterns
 - Custom components should follow similar patterns
 
 ### Theme Layer Integration
+
 See project's `uno.config.js` for actual UnoCSS configuration.
 Theme layers target data attributes, not component internals.
 
 ### Theme Application Pattern
+
 Themes applied via body data attributes:
+
 - `data-style="rokkit|material|minimal"` - Visual theme
-- `data-mode="light|dark"` - Color mode  
+- `data-mode="light|dark"` - Color mode
 - `data-density="compact|cozy|loose"` - Spacing density
 
 Components inherit styling from these body-level data attributes.
 
 ### Unstyled Component Pattern
+
 All components have NO internal styling. Data attributes are handled internally by:
+
 - bits-ui components (which provide their own data attribute patterns)
 - Custom components (which should follow similar conventions)
 
@@ -45,14 +55,17 @@ See existing component implementations for patterns.
 ## Proxy System Integration
 
 ### Required Import Pattern
+
 See `packages/bits-ui/src/List.svelte` for the actual Proxy usage pattern.
 
 Key points:
+
 - Import `Proxy` from `@rokkit/states`
 - Create proxy items: `items.map(item => new Proxy(item, fields))`
 - Use `.get()`, `.has()`, `.id` methods for data access
 
 ### Proxy System Constraints
+
 - **Required for data components**: Use Proxy for consistent data access patterns
 - **Runtime flexibility**: Field mappings can change dynamically through Proxy
 - **Consistent API**: Proxy provides `.get()`, `.has()`, `.id` methods
@@ -61,8 +74,10 @@ Key points:
 ## Accessibility Integration Requirements
 
 ### WCAG 2.1 AA Compliance Pattern
+
 bits-ui components handle most accessibility concerns automatically.
 For custom components, ensure:
+
 - Proper ARIA roles and attributes
 - Keyboard navigation support
 - Focus management
@@ -71,6 +86,7 @@ For custom components, ensure:
 See bits-ui documentation for specific accessibility patterns.
 
 ### Data Attribute Conventions (Internal)
+
 - **Root elements**: `data-{component}-root`
 - **Sub-elements**: `data-{component}-{element}`
 - **State attributes**: `data-{state}={boolean}`
@@ -79,7 +95,9 @@ See bits-ui documentation for specific accessibility patterns.
 **Note**: These are handled internally by components. bits-ui provides these patterns, or we implement equivalent ones.
 
 ### Theme Layer Structure
+
 Theme files target data attributes, not classes. Structure:
+
 - Base: No styling by default
 - Theme layers: `[data-style="theme-name"] [data-component-root]`
 - Mode variations: `[data-mode="dark|light"]`
@@ -88,6 +106,7 @@ Theme files target data attributes, not classes. Structure:
 See theme packages for actual implementations.
 
 ### Keyboard Navigation Standard
+
 - **Arrow Keys**: Up/Down navigation in lists and trees
 - **Enter/Space**: Activation and selection
 - **Escape**: Close dropdowns and modals
@@ -97,10 +116,12 @@ See theme packages for actual implementations.
 ## Performance Integration Patterns
 
 ### Virtual Scrolling Threshold
+
 Use virtual scrolling for datasets > 100 items.
 Check existing Table component implementation for virtual scrolling patterns.
 
 ### Bundle Size Constraints
+
 - **Component chunking**: Each component must be tree-shakeable
 - **bits-ui selective imports**: Only import needed components
 - **CSS variable usage**: Avoid bundling unnecessary styles
@@ -110,9 +131,11 @@ Check existing Table component implementation for virtual scrolling patterns.
 ## Testing Integration Requirements
 
 ### Component Testing Pattern
+
 Standard tests for all Rokkit components should verify:
+
 - Field mapping via Proxy system works
-- Data attributes are applied correctly  
+- Data attributes are applied correctly
 - Accessibility attributes are present
 - Snippet rendering works as expected
 
@@ -121,16 +144,19 @@ See existing component test files for actual test patterns.
 ### Critical Dependencies
 
 ### @rokkit/states Integration
+
 - **Proxy**: Required for all data-driven components
 - **Consistent data access**: `.get()`, `.has()`, `.id` methods
 - **Field mapping**: Handles field mapping through constructor
 
 ### bits-ui Selective Usage
+
 - Only integrate components that enhance accessibility
 - Maintain Rokkit API surface over bits-ui patterns
 - Use wrapper pattern to preserve field mapping
 
 ### Performance Dependencies
+
 - Virtual scrolling for large datasets (threshold: 100+ items)
 - CSS variables for runtime theming
 - Tree-shaking for optimal bundle size
@@ -140,12 +166,14 @@ See existing component test files for actual test patterns.
 ## Integration Anti-Patterns
 
 ### Avoid These Patterns
+
 - Using CSS classes for component structure instead of data attributes
 - Adding internal component styles (components should be unstyled)
 - Skipping Proxy system for data components (assumes data structure)
 - Exposing data attributes to snippet users (implementation detail)
 
 ### Correct Rokkit Patterns
+
 - Handle data attributes internally in components
 - Keep components completely unstyled (only data attributes + user classes)
 - Keep snippets focused on content, not implementation details
diff --git a/CLAUDE.md b/CLAUDE.md
index 32ef87986..82d912f5a 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -9,7 +9,9 @@ Rokkit is a cutting-edge data-driven UI library built for Svelte 5. It empowers
 ## Core Principles
 
 ### Data-First Design
+
 Components automatically understand and adapt to data structures without requiring data transformation:
+
 ```svelte
 <!-- Data shapes the component, not vice versa -->
 <List items={users} fields={{ text: 'fullName', image: 'avatar' }} />
@@ -17,7 +19,9 @@ Components automatically understand and adapt to data structures without requiri
 ```
 
 ### Composable Flexibility
+
 Every component is extensible without modification through snippets and component overrides:
+
 ```svelte
 <List {items}>
   {#snippet customItem(node)}
@@ -27,7 +31,9 @@ Every component is extensible without modification through snippets and componen
 ```
 
 ### Consistent API Patterns
+
 All selection components follow the same pattern:
+
 - `items`: Data array
 - `value`: Selected item(s) (bindable)
 - `fields`: Field mapping configuration
@@ -35,12 +41,12 @@ All selection components follow the same pattern:
 - `child`: Optional child snippet used for specific item. Takes a `Proxy` class instance as input
 - `children`: standard children snippet for use in key value composite structures like Tabs/TabsGroup
 
-
 ## Architecture
 
 The project is organized as a Bun workspace monorepo with the following structure:
 
 - **packages/**: Contains the core library packages
+
   - `@rokkit/core`: Core utilities and field mapping system
   - `@rokkit/ui`: Main UI components
   - `@rokkit/actions`: Svelte actions for behaviors
@@ -62,6 +68,7 @@ The project is organized as a Bun workspace monorepo with the following structur
 ## Common Development Commands
 
 ### Root Level Commands (Bun Workspace)
+
 - `bun test:unit` - Run unit tests
 - `bun test:ci` - Run tests in CI mode
 - `bun coverage` - Generate test coverage report
@@ -71,19 +78,24 @@ The project is organized as a Bun workspace monorepo with the following structur
 - `bun publish:all` - Publish all packages
 
 ### Package-Level Commands
+
 Most packages support these commands:
+
 - `bun build` - Build the package
 - `bun clean` - Clean build artifacts
 - `bun prepublishOnly` - Prepare for publishing (TypeScript compilation)
 
 ### Site Development
+
 For the learn site (must cd into `sites/learn/` first):
+
 - `cd sites/learn && bun dev` - Start development server
 - `cd sites/learn && bun build` - Build for production
 - `cd sites/learn && bun preview` - Preview built site
 - `cd sites/learn && bun test:e2e` - Run end-to-end tests
 
 ### Testing
+
 - `bun test:unit` - Run unit tests (from project root)
 
 ## Key Technologies
@@ -99,13 +111,16 @@ For the learn site (must cd into `sites/learn/` first):
 ## Development Workflow
 
 ### CRITICAL: Progress Tracking
+
 **MUST UPDATE** `.rules/project/progress.md` after any changes to:
+
 - Component status (🔄 In Progress, ✅ Complete, etc.)
 - Implementation decisions made
 - Technical challenges encountered
 - Quality gate completions
 
 ### Before Starting Any Component Work
+
 1. **Ask clarifying questions** to understand requirements
 2. **Analyze existing codebase** and provide clear understanding
 3. **Present implementation strategy** with step-by-step approach
@@ -113,7 +128,9 @@ For the learn site (must cd into `sites/learn/` first):
 5. **Confirm approach** before writing any code
 
 ### Component Development Standards
+
 All components MUST follow these patterns:
+
 ```svelte
 let {
   items = [],                    // Data array
@@ -124,7 +141,9 @@ let {
 ```
 
 ### Data Handling Pattern
+
 Use the Proxy system from `@rokkit/states` for consistent data access:
+
 ```svelte
 import { Proxy } from '@rokkit/states'
 
@@ -135,6 +154,7 @@ let proxyItems = $derived(items.map(item => new Proxy(item, fields)))
 ## Component Implementation Requirements
 
 ### Structure Standards
+
 1. **No internal styling** - components must be completely unstyled
 2. **Data attributes only** - use `data-component-element` pattern for styling hooks
 3. **Proxy system** - use `@rokkit/states` Proxy for all data access
@@ -142,6 +162,7 @@ let proxyItems = $derived(items.map(item => new Proxy(item, fields)))
 5. **Accessibility** - proper ARIA attributes and keyboard navigation
 
 ### bits-ui Integration
+
 - Use bits-ui components as foundation when available
 - Wrap with Rokkit API layer (items, fields, value props)
 - Preserve bits-ui data attributes for theming
@@ -150,6 +171,7 @@ let proxyItems = $derived(items.map(item => new Proxy(item, fields)))
 ## Code Quality Rules
 
 The project enforces strict code quality through ESLint:
+
 - Maximum function complexity of 5
 - Maximum function length of 30 lines
 - Maximum nesting depth of 3
@@ -168,6 +190,7 @@ The project enforces strict code quality through ESLint:
 ## Styling System
 
 ### UnoCSS Conventions
+
 - **Neutral Colors**: `neutral-50` through `neutral-900`
 - **Semantic Colors**: `primary-`, `secondary-`, `accent-`, `error-`, `warning-`, `success-`
 - **Dark Mode**: Always include `dark:` variants.
@@ -175,6 +198,7 @@ The project enforces strict code quality through ESLint:
 - **Interactive States**: Use `hover:`, `focus:`, `active:` variants
 
 ### Color Patterns
+
 ```css
 /* Backgrounds */
 bg-neutral-base        /* Page backgrounds */
@@ -195,6 +219,7 @@ Packages use `workspace:latest` for internal dependencies to ensure consistency
 ## Quality Requirements
 
 Before any component is complete:
+
 - [ ] Follows standard prop pattern (items, value, fields)
 - [ ] Uses Proxy system for data access
 - [ ] Supports snippet customization
@@ -209,12 +234,13 @@ Before any component is complete:
 ## Field Mapping System
 
 Components adapt to any data structure through the field mapping system:
+
 ```javascript
 // Custom mapping
 const fields = {
-  text: 'name',        // Map 'name' to text display
-  image: 'avatar',     // Map 'avatar' to image display
-  children: 'items'    // Map 'items' to nested children
+  text: 'name', // Map 'name' to text display
+  image: 'avatar', // Map 'avatar' to image display
+  children: 'items' // Map 'items' to nested children
 }
 ```
 
@@ -225,6 +251,7 @@ The learn site uses a `StoryBuilder` class for managing interactive examples and
 ### Basic Usage
 
 **stories.js**
+
 ```javascript
 import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 
@@ -235,6 +262,7 @@ export const storyBuilder = new StoryBuilder(sources, modules)
 ```
 
 **+page.svelte**
+
 ```svelte
 <script>
   import { StoryViewer, Code } from '$lib/components/Story'
@@ -251,12 +279,14 @@ export const storyBuilder = new StoryBuilder(sources, modules)
 ### API Reference
 
 **Properties:**
+
 - `storyBuilder.loading` - Reactive loading state
 - `storyBuilder.error` - Error state if story loading fails
 - `storyBuilder.examples` - All processed examples
 - `storyBuilder.fragments` - Processed fragment files
 
 **Methods:**
+
 - `getExample(name)` - Get specific example by name
 - `getFragment(index)` - Get specific fragment by index
 - `hasExample(name)` - Check if example exists
@@ -289,6 +319,7 @@ Create fragments for reusable code examples with syntax highlighting:
 ```
 
 Access in templates:
+
 ```svelte
 <Code {...storyBuilder.getFragment(0)} />
 ```
@@ -308,6 +339,7 @@ The StoryBuilder includes comprehensive test coverage and works in both runtime
 ## Reference Files
 
 Study these files for implementation patterns:
+
 - `packages/bits-ui/src/List.svelte` - bits-ui integration pattern
 - `sites/learn/src/lib/stories/02-elements/01-list/` - tutorial structure
 - `.rules/architecture/patterns.md` - component implementation patterns
diff --git a/docs/features/rokkit-ui-features.md b/docs/features/rokkit-ui-features.md
index d6f66cf8b..abb966f92 100644
--- a/docs/features/rokkit-ui-features.md
+++ b/docs/features/rokkit-ui-features.md
@@ -7,6 +7,7 @@ Rokkit UI is a data-driven, composable, and themeable UI library for Svelte, des
 ## 🚀 Core Features
 
 ### 1. **Data-First Design**
+
 - **Description:** Rokkit components adapt to your data structure, not the other way around.
 - **Benefits:**
   - Eliminates the need for data transformation layers.
@@ -14,6 +15,7 @@ Rokkit UI is a data-driven, composable, and themeable UI library for Svelte, des
   - Enables rapid prototyping and seamless API integration.
 
 ### 2. **Composable & Extensible**
+
 - **Description:** Every component is designed for extension and composition.
 - **Benefits:**
   - Customize rendering and override behaviors without forking.
@@ -21,6 +23,7 @@ Rokkit UI is a data-driven, composable, and themeable UI library for Svelte, des
   - Supports complex and advanced use cases.
 
 ### 3. **Consistent & Predictable APIs**
+
 - **Description:** All controls follow a unified pattern for props and events.
 - **Benefits:**
   - Easy to learn and use.
@@ -28,6 +31,7 @@ Rokkit UI is a data-driven, composable, and themeable UI library for Svelte, des
   - Standardized props (`items`, `value`, `fields`, `using`) and events (`select`, `change`, `move`).
 
 ### 4. **Responsive & Themeable**
+
 - **Description:** Built-in support for dark mode, semantic color palettes, and responsive layouts.
 - **Benefits:**
   - Uses UnoCSS utility classes for modern, consistent styling.
@@ -35,6 +39,7 @@ Rokkit UI is a data-driven, composable, and themeable UI library for Svelte, des
   - Easily switch between light and dark modes.
 
 ### 5. **Accessible by Default**
+
 - **Description:** Accessibility is built in from the start.
 - **Benefits:**
   - ARIA attributes automatically applied.
@@ -42,6 +47,7 @@ Rokkit UI is a data-driven, composable, and themeable UI library for Svelte, des
   - Focus management handled for you.
 
 ### 6. **Progressive Enhancement**
+
 - **Description:** Start simple and add complexity as needed.
 - **Benefits:**
   - Use basic components out of the box.
@@ -84,4 +90,4 @@ Rokkit UI is a data-driven, composable, and themeable UI library for Svelte, des
 
 ---
 
-Rokkit UI is built to help you **build beyond limits**—with speed, flexibility, and confidence.
\ No newline at end of file
+Rokkit UI is built to help you **build beyond limits**—with speed, flexibility, and confidence.
diff --git a/docs/forms/readme.md b/docs/forms/readme.md
index 44a9f0832..4b2579ef1 100644
--- a/docs/forms/readme.md
+++ b/docs/forms/readme.md
@@ -85,7 +85,7 @@ const form = new FormBuilder(data, customSchema, customLayout)
 ```javascript
 // Validation messages structure
 const message = {
-  state: 'error',  // 'error', 'warning', 'info', 'success'
+  state: 'error', // 'error', 'warning', 'info', 'success'
   text: 'This field is required'
 }
 
@@ -114,7 +114,7 @@ const element = {
     description: "We'll never share your email",
     placeholder: 'Enter your email',
     className: 'custom-input',
-    customProperty: 'any-value',  // Arbitrary properties supported
+    customProperty: 'any-value', // Arbitrary properties supported
 
     // From schema
     required: true,
diff --git a/packages/helpers/spec/mocks/element.spec.js b/packages/helpers/spec/mocks/element.spec.js
index 23f96e1f8..4ca1c9a73 100644
--- a/packages/helpers/spec/mocks/element.spec.js
+++ b/packages/helpers/spec/mocks/element.spec.js
@@ -154,7 +154,7 @@ describe('element', () => {
 
 			// Verify the function returns true (indicating mock was applied)
 			expect(mockWasApplied).toBe(true)
-			 
+
 			expect(vi.isMockFunction(HTMLFormElement.prototype.requestSubmit)).toBeTruthy()
 
 			// Test the mock implementation works correctly
@@ -164,7 +164,7 @@ describe('element', () => {
 
 			form.requestSubmit()
 			expect(submitSpy).toHaveBeenCalled()
-			 
+
 			expect(HTMLFormElement.prototype.requestSubmit).toHaveBeenCalled()
 
 			vi.resetAllMocks()
diff --git a/packages/helpers/src/mocks/element.js b/packages/helpers/src/mocks/element.js
index bdf8b1a39..d90fb445f 100644
--- a/packages/helpers/src/mocks/element.js
+++ b/packages/helpers/src/mocks/element.js
@@ -86,7 +86,6 @@ export function createNestedElement(item) {
  * Mocks the requestSubmit function for HTMLFormElement which is not implemented by JSDOM
  */
 export function mockFormRequestSubmit() {
-	 
 	HTMLFormElement.prototype.requestSubmit = vi.fn(function (submitter) {
 		const event = new Event('submit', {
 			bubbles: true,
diff --git a/sites/learn/CODEVIEWER_USAGE.md b/sites/learn/CODEVIEWER_USAGE.md
index bf7592a7f..60a4ca6e2 100644
--- a/sites/learn/CODEVIEWER_USAGE.md
+++ b/sites/learn/CODEVIEWER_USAGE.md
@@ -17,6 +17,7 @@ tutorial/
 ```
 
 **Example `src/App.svelte`:**
+
 ```svelte
 <script>
 	import { List } from '@rokkit/ui'
@@ -42,6 +43,7 @@ tutorial/
 ### 2. Use CodeViewer in Your Tutorial Page
 
 **Example `+page.svelte`:**
+
 ```svelte
 <script>
 	import { onMount } from 'svelte'
@@ -68,7 +70,7 @@ tutorial/
 
 <div class="space-y-8">
 	<h1>My Tutorial Section</h1>
-	
+
 	{#if loading}
 		<div>Loading demo...</div>
 	{:else}
@@ -115,4 +117,4 @@ tutorial/
 3. Test that the demo loads and code displays correctly
 4. Iterate on your demo until it perfectly illustrates the concept
 
-The system handles loading, error states, and provides copy functionality automatically!
\ No newline at end of file
+The system handles loading, error states, and provides copy functionality automatically!
diff --git a/sites/learn/src/lib/components/Story/README.md b/sites/learn/src/lib/components/Story/README.md
index e1141b1c0..697565aa0 100644
--- a/sites/learn/src/lib/components/Story/README.md
+++ b/sites/learn/src/lib/components/Story/README.md
@@ -19,6 +19,7 @@ The Story system consists of five main components:
 The main component that handles loading stories from slugs and orchestrates the entire story display.
 
 **Props:**
+
 - `slug` (string, required) - The story slug to load (e.g., "introduction")
 - `title` (string, optional) - Optional title for the story
 - `description` (string, optional) - Optional description for the story
@@ -28,6 +29,7 @@ The main component that handles loading stories from slugs and orchestrates the
 - `oncopy` (function, optional) - Callback when code is copied
 
 **Usage:**
+
 ```svelte
 <script>
   import { StoryRoot } from '$lib/components/Story'
@@ -47,10 +49,12 @@ The main component that handles loading stories from slugs and orchestrates the
 Renders an interactive Svelte component within the story container.
 
 **Props:**
+
 - `component` (any, required) - The Svelte component to render
 - `class` (string, optional) - Additional CSS classes
 
 **Usage:**
+
 ```svelte
 <script>
   import { StoryComponent } from '$lib/components/Story'
@@ -65,6 +69,7 @@ Renders an interactive Svelte component within the story container.
 Displays syntax-highlighted code with support for single files or multiple files using tabs.
 
 **Props:**
+
 - `code` (string|StoryCodeFile[], optional) - The source code to display or array of files
 - `files` (StoryCodeFile[], optional) - Array of files (alternative to code)
 - `showCopyButton` (boolean, optional) - Whether to show just the copy button (default: false)
@@ -74,17 +79,19 @@ Displays syntax-highlighted code with support for single files or multiple files
 - `oncopy` (function, optional) - Callback when code is copied
 
 **StoryCodeFile Interface:**
+
 ```typescript
 interface StoryCodeFile {
-  id: string;           // Unique identifier for the file
-  name: string;         // Display name of the file
-  language: string;     // Programming language for syntax highlighting
-  content: string;      // File content
-  icon?: string;        // Optional icon for the file
+  id: string // Unique identifier for the file
+  name: string // Display name of the file
+  language: string // Programming language for syntax highlighting
+  content: string // File content
+  icon?: string // Optional icon for the file
 }
 ```
 
 **Usage:**
+
 ```svelte
 <script>
   import { StoryCode } from '$lib/components/Story'
@@ -123,10 +130,12 @@ interface StoryCodeFile {
 Displays error messages with consistent styling and branding.
 
 **Props:**
+
 - `error` (string, required) - The error message to display
 - `class` (string, optional) - Additional CSS classes
 
 **Usage:**
+
 ```svelte
 <script>
   import { StoryError } from '$lib/components/Story'
@@ -140,10 +149,12 @@ Displays error messages with consistent styling and branding.
 Displays a loading state with spinner and customizable message.
 
 **Props:**
+
 - `message` (string, optional) - Custom loading message (default: "Loading story...")
 - `class` (string, optional) - Additional CSS classes
 
 **Usage:**
+
 ```svelte
 <script>
   import { StoryLoading } from '$lib/components/Story'
@@ -186,7 +197,9 @@ Each story's main component should be in `src/App.svelte` and can include additi
 The Story system supports multiple files per story through the enhanced `StoryCode` component and `FileTabs` integration:
 
 ### File Structure
+
 For multi-file stories, place all files in the `src/` directory:
+
 ```
 story-name/
 └── src/
@@ -197,7 +210,9 @@ story-name/
 ```
 
 ### File Icons
+
 The system automatically assigns icons based on file extensions:
+
 - `.svelte` → 🔷
 - `.js`, `.mjs` → 🟨
 - `.ts` → 🔵
@@ -217,6 +232,7 @@ Custom icons can be provided via the `icon` property in the file object.
 4. Use the story in your tutorial page with `<StoryRoot slug="section/story-name" />`
 
 **Example story structure:**
+
 ```
 tutorial/elements/button/
 └── src/
@@ -226,15 +242,16 @@ tutorial/elements/button/
 ```
 
 **Example story component:**
+
 ```svelte
 <script>
   import { Button } from '@rokkit/ui'
   import { variants } from './button-variants.js'
   import './button-styles.css'
-  
+
   let selectedVariant = $state('primary')
   let clickCount = $state(0)
-  
+
   function handleClick() {
     clickCount++
   }
@@ -253,7 +270,7 @@ tutorial/elements/button/
       </label>
     {/each}
   </div>
-  
+
   <Button
     class={selectedVariant}
     onclick={handleClick}
@@ -278,7 +295,7 @@ tutorial/elements/button/
 The Story system uses semantic color shortcuts for consistent theming:
 
 - `text-neutral-overlay` - Primary text color
-- `text-neutral-floating` - Secondary text color  
+- `text-neutral-floating` - Secondary text color
 - `text-neutral-elevated` - Tertiary text color
 - `bg-neutral-base` - Base background color
 - `bg-neutral-subtle` - Subtle background color
@@ -292,6 +309,7 @@ The Story system uses semantic color shortcuts for consistent theming:
 If you're migrating from the old Demo components:
 
 **Old:**
+
 ```svelte
 <script>
   import { DemoRoot } from '../demo'
@@ -305,6 +323,7 @@ If you're migrating from the old Demo components:
 ```
 
 **New:**
+
 ```svelte
 <script>
   import { StoryRoot } from '$lib/components/Story'
@@ -320,10 +339,11 @@ If you're migrating from the old Demo components:
 ## Advanced Usage
 
 ### Custom File Handling
+
 ```svelte
 <script>
   import { StoryCode } from '$lib/components/Story'
-  
+
   let files = [
     {
       id: 'config',
@@ -339,12 +359,13 @@ If you're migrating from the old Demo components:
 ```
 
 ### Programmatic Control
+
 ```svelte
 <script>
   import { StoryRoot } from '$lib/components/Story'
-  
+
   let showCode = $state(false)
-  
+
   function toggleCode() {
     showCode = !showCode
   }
@@ -375,4 +396,4 @@ The Story system provides comprehensive error handling:
 - **Lazy loading** - Stories are loaded only when needed
 - **Code highlighting** - Syntax highlighting is deferred until code is shown
 - **Caching** - Successfully loaded stories are cached to avoid re-loading
-- **Bundle splitting** - Individual story components are code-split automatically
\ No newline at end of file
+- **Bundle splitting** - Individual story components are code-split automatically
diff --git a/sites/learn/src/routes/(learn)/chart-elements/palette/fragments/02-multiple-colors.js b/sites/learn/src/routes/(learn)/chart-elements/palette/fragments/02-multiple-colors.js
index 5e9219c78..54d731859 100644
--- a/sites/learn/src/routes/(learn)/chart-elements/palette/fragments/02-multiple-colors.js
+++ b/sites/learn/src/routes/(learn)/chart-elements/palette/fragments/02-multiple-colors.js
@@ -3,16 +3,16 @@ import { swatch } from '@rokkit/chart/lib'
 
 // Get colors for a 4-series chart
 const seriesColors = [
-  swatch.palette.blue[500],
-  swatch.palette.green[500], 
-  swatch.palette.orange[500],
-  swatch.palette.red[500]
+	swatch.palette.blue[500],
+	swatch.palette.green[500],
+	swatch.palette.orange[500],
+	swatch.palette.red[500]
 ]
 
 // Or use different shades of the same color
 const blueGradient = [
-  swatch.palette.blue[300],
-  swatch.palette.blue[500],
-  swatch.palette.blue[700],
-  swatch.palette.blue[900]
-]
\ No newline at end of file
+	swatch.palette.blue[300],
+	swatch.palette.blue[500],
+	swatch.palette.blue[700],
+	swatch.palette.blue[900]
+]
diff --git a/sites/learn/src/routes/(learn)/chart-elements/palette/stories.js b/sites/learn/src/routes/(learn)/chart-elements/palette/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/chart-elements/palette/stories.js
+++ b/sites/learn/src/routes/(learn)/chart-elements/palette/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/chart-elements/patterns/fragments/02-multiple.js b/sites/learn/src/routes/(learn)/chart-elements/patterns/fragments/02-multiple.js
index d3bb36bef..06c7c3a14 100644
--- a/sites/learn/src/routes/(learn)/chart-elements/patterns/fragments/02-multiple.js
+++ b/sites/learn/src/routes/(learn)/chart-elements/patterns/fragments/02-multiple.js
@@ -2,22 +2,22 @@
 import { swatch } from '@rokkit/chart/lib'
 
 const chartPatterns = [
-  {
-    id: 'series-1-stripes',
-    component: swatch.patterns.stripe,
-    fill: swatch.palette.blue[300],
-    stroke: swatch.palette.blue[500]
-  },
-  {
-    id: 'series-2-dots',
-    component: swatch.patterns.dot,
-    fill: swatch.palette.green[300], 
-    stroke: swatch.palette.green[500]
-  },
-  {
-    id: 'series-3-cross',
-    component: swatch.patterns.cross,
-    fill: swatch.palette.orange[300],
-    stroke: swatch.palette.orange[500]
-  }
-]
\ No newline at end of file
+	{
+		id: 'series-1-stripes',
+		component: swatch.patterns.stripe,
+		fill: swatch.palette.blue[300],
+		stroke: swatch.palette.blue[500]
+	},
+	{
+		id: 'series-2-dots',
+		component: swatch.patterns.dot,
+		fill: swatch.palette.green[300],
+		stroke: swatch.palette.green[500]
+	},
+	{
+		id: 'series-3-cross',
+		component: swatch.patterns.cross,
+		fill: swatch.palette.orange[300],
+		stroke: swatch.palette.orange[500]
+	}
+]
diff --git a/sites/learn/src/routes/(learn)/chart-elements/patterns/stories.js b/sites/learn/src/routes/(learn)/chart-elements/patterns/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/chart-elements/patterns/stories.js
+++ b/sites/learn/src/routes/(learn)/chart-elements/patterns/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/chart-elements/symbols/fragments/03-custom-attributes.js b/sites/learn/src/routes/(learn)/chart-elements/symbols/fragments/03-custom-attributes.js
index cc9ef2d2e..518af35fe 100644
--- a/sites/learn/src/routes/(learn)/chart-elements/symbols/fragments/03-custom-attributes.js
+++ b/sites/learn/src/routes/(learn)/chart-elements/symbols/fragments/03-custom-attributes.js
@@ -3,28 +3,28 @@ import { swatch } from '@rokkit/chart/lib'
 
 // Create symbols with varying properties
 const scatterData = data.map((point, index) => ({
-  x: point.x,
-  y: point.y,
-  symbol: {
-    name: point.category === 'high' ? 'diamond' : 'circle',
-    size: point.value > 50 ? 8 : 5, // Size based on value
-    fill: swatch.palette[point.color][400],
-    stroke: swatch.palette[point.color][700],
-    strokeWidth: point.highlighted ? 2 : 1,
-    opacity: point.active ? 1 : 0.6
-  }
+	x: point.x,
+	y: point.y,
+	symbol: {
+		name: point.category === 'high' ? 'diamond' : 'circle',
+		size: point.value > 50 ? 8 : 5, // Size based on value
+		fill: swatch.palette[point.color][400],
+		stroke: swatch.palette[point.color][700],
+		strokeWidth: point.highlighted ? 2 : 1,
+		opacity: point.active ? 1 : 0.6
+	}
 }))
 
 // Custom symbol themes
 const symbolThemes = {
-  business: {
-    primary: { name: 'square', fill: '#2563eb' },
-    secondary: { name: 'circle', fill: '#7c3aed' },
-    accent: { name: 'triangle', fill: '#dc2626' }
-  },
-  scientific: {
-    control: { name: 'circle', fill: '#059669' },
-    experimental: { name: 'diamond', fill: '#ea580c' },
-    outlier: { name: 'cross', fill: '#dc2626' }
-  }
-}
\ No newline at end of file
+	business: {
+		primary: { name: 'square', fill: '#2563eb' },
+		secondary: { name: 'circle', fill: '#7c3aed' },
+		accent: { name: 'triangle', fill: '#dc2626' }
+	},
+	scientific: {
+		control: { name: 'circle', fill: '#059669' },
+		experimental: { name: 'diamond', fill: '#ea580c' },
+		outlier: { name: 'cross', fill: '#dc2626' }
+	}
+}
diff --git a/sites/learn/src/routes/(learn)/chart-elements/symbols/stories.js b/sites/learn/src/routes/(learn)/chart-elements/symbols/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/chart-elements/symbols/stories.js
+++ b/sites/learn/src/routes/(learn)/chart-elements/symbols/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/charts/plot/fragments/02-chart-types.js b/sites/learn/src/routes/(learn)/charts/plot/fragments/02-chart-types.js
index d5d827f50..387fb11e3 100644
--- a/sites/learn/src/routes/(learn)/charts/plot/fragments/02-chart-types.js
+++ b/sites/learn/src/routes/(learn)/charts/plot/fragments/02-chart-types.js
@@ -3,38 +3,38 @@ import { Plot } from '@rokkit/chart'
 
 // Scatter plot for correlation analysis
 const scatterConfig = {
-  data: carData,
-  x: 'mpg',
-  y: 'hp', 
-  stroke: 'cyl',
-  symbol: 'transmission',
-  legend: true
+	data: carData,
+	x: 'mpg',
+	y: 'hp',
+	stroke: 'cyl',
+	symbol: 'transmission',
+	legend: true
 }
 
 // Line chart for trends over time
 const lineConfig = {
-  data: timeSeriesData,
-  x: 'date',
-  y: 'value',
-  stroke: 'series',
-  curve: 'natural',
-  legend: true
+	data: timeSeriesData,
+	x: 'date',
+	y: 'value',
+	stroke: 'series',
+	curve: 'natural',
+	legend: true
 }
 
-// Bar chart for categorical comparisons  
+// Bar chart for categorical comparisons
 const barConfig = {
-  data: categoryData,
-  x: 'category',
-  y: 'amount',
-  fill: 'category',
-  sort: { x: 'y', reverse: true }
+	data: categoryData,
+	x: 'category',
+	y: 'amount',
+	fill: 'category',
+	sort: { x: 'y', reverse: true }
 }
 
 // Area chart for cumulative data
 const areaConfig = {
-  data: cumulativeData,
-  x: 'period',
-  y: 'total',
-  fill: 'department',
-  stack: true
-}
\ No newline at end of file
+	data: cumulativeData,
+	x: 'period',
+	y: 'total',
+	fill: 'department',
+	stack: true
+}
diff --git a/sites/learn/src/routes/(learn)/charts/plot/intro/cars.js b/sites/learn/src/routes/(learn)/charts/plot/intro/cars.js
index 8db05f666..6da05f723 100644
--- a/sites/learn/src/routes/(learn)/charts/plot/intro/cars.js
+++ b/sites/learn/src/routes/(learn)/charts/plot/intro/cars.js
@@ -447,4 +447,4 @@ export const data = [
 		gear: 4,
 		carb: 2
 	}
-]
\ No newline at end of file
+]
diff --git a/sites/learn/src/routes/(learn)/charts/plot/stories.js b/sites/learn/src/routes/(learn)/charts/plot/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/charts/plot/stories.js
+++ b/sites/learn/src/routes/(learn)/charts/plot/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/elements/accordion/fragments/02-fields.js b/sites/learn/src/routes/(learn)/elements/accordion/fragments/02-fields.js
index 3d3e8ef0a..b889caeee 100644
--- a/sites/learn/src/routes/(learn)/elements/accordion/fragments/02-fields.js
+++ b/sites/learn/src/routes/(learn)/elements/accordion/fragments/02-fields.js
@@ -1,21 +1,21 @@
 const fields = {
-  text: 'category',
-  children: 'values',
-  image: 'photo'
+	text: 'category',
+	children: 'values',
+	image: 'photo'
 }
 
 const data = [
-  {
-    category: 'Fruits',
-    values: [
-      {
-        name: 'Apple',
-        photo: '/examples/apple.jpg'
-      },
-      {
-        name: 'Orange', 
-        photo: '/examples/orange.jpg'
-      }
-    ]
-  }
-]
\ No newline at end of file
+	{
+		category: 'Fruits',
+		values: [
+			{
+				name: 'Apple',
+				photo: '/examples/apple.jpg'
+			},
+			{
+				name: 'Orange',
+				photo: '/examples/orange.jpg'
+			}
+		]
+	}
+]
diff --git a/sites/learn/src/routes/(learn)/elements/accordion/fragments/03-nested-fields.js b/sites/learn/src/routes/(learn)/elements/accordion/fragments/03-nested-fields.js
index 5ceabf364..bcc14692c 100644
--- a/sites/learn/src/routes/(learn)/elements/accordion/fragments/03-nested-fields.js
+++ b/sites/learn/src/routes/(learn)/elements/accordion/fragments/03-nested-fields.js
@@ -1,8 +1,8 @@
 const fields = {
-  text: 'category',
-  children: 'values',
-  fields: {
-    text: 'name',
-    image: 'photo'
-  }
-}
\ No newline at end of file
+	text: 'category',
+	children: 'values',
+	fields: {
+		text: 'name',
+		image: 'photo'
+	}
+}
diff --git a/sites/learn/src/routes/(learn)/elements/accordion/stories.js b/sites/learn/src/routes/(learn)/elements/accordion/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/elements/accordion/stories.js
+++ b/sites/learn/src/routes/(learn)/elements/accordion/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/elements/breadcrumbs/stories.js b/sites/learn/src/routes/(learn)/elements/breadcrumbs/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/elements/breadcrumbs/stories.js
+++ b/sites/learn/src/routes/(learn)/elements/breadcrumbs/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/elements/drop-down/stories.js b/sites/learn/src/routes/(learn)/elements/drop-down/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/elements/drop-down/stories.js
+++ b/sites/learn/src/routes/(learn)/elements/drop-down/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/elements/list/fragments/02-field-mapping.js b/sites/learn/src/routes/(learn)/elements/list/fragments/02-field-mapping.js
index 62c02e261..5c26d9459 100644
--- a/sites/learn/src/routes/(learn)/elements/list/fragments/02-field-mapping.js
+++ b/sites/learn/src/routes/(learn)/elements/list/fragments/02-field-mapping.js
@@ -1,4 +1,4 @@
 let fields = {
-  text: 'name',
-  image: 'photo'
-}
\ No newline at end of file
+	text: 'name',
+	image: 'photo'
+}
diff --git a/sites/learn/src/routes/(learn)/elements/list/fragments/03-component-field.js b/sites/learn/src/routes/(learn)/elements/list/fragments/03-component-field.js
index 68294d980..7f35cca5e 100644
--- a/sites/learn/src/routes/(learn)/elements/list/fragments/03-component-field.js
+++ b/sites/learn/src/routes/(learn)/elements/list/fragments/03-component-field.js
@@ -1 +1 @@
-let fields = { component: 'type' }
\ No newline at end of file
+let fields = { component: 'type' }
diff --git a/sites/learn/src/routes/(learn)/elements/list/stories.js b/sites/learn/src/routes/(learn)/elements/list/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/elements/list/stories.js
+++ b/sites/learn/src/routes/(learn)/elements/list/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/elements/multi-select/stories.js b/sites/learn/src/routes/(learn)/elements/multi-select/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/elements/multi-select/stories.js
+++ b/sites/learn/src/routes/(learn)/elements/multi-select/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/elements/select/stories.js b/sites/learn/src/routes/(learn)/elements/select/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/elements/select/stories.js
+++ b/sites/learn/src/routes/(learn)/elements/select/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/elements/switch/stories.js b/sites/learn/src/routes/(learn)/elements/switch/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/elements/switch/stories.js
+++ b/sites/learn/src/routes/(learn)/elements/switch/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/elements/table/fragments/02-columns.js b/sites/learn/src/routes/(learn)/elements/table/fragments/02-columns.js
index fa7796672..23fad16d3 100644
--- a/sites/learn/src/routes/(learn)/elements/table/fragments/02-columns.js
+++ b/sites/learn/src/routes/(learn)/elements/table/fragments/02-columns.js
@@ -1,14 +1,14 @@
 const columns = [
-  { name: 'name', label: 'Person', sortable: true },
-  { name: 'city', label: 'Residing in' },
-  { 
-    name: 'gender', 
-    label: 'Gender', 
-    formatter: (value) => (value === 'M' ? 'Male' : 'Female') 
-  },
-  {
-    name: 'salary',
-    label: 'Annual Salary',
-    formatter: (value) => `$${value.toLocaleString()}`
-  }
-]
\ No newline at end of file
+	{ name: 'name', label: 'Person', sortable: true },
+	{ name: 'city', label: 'Residing in' },
+	{
+		name: 'gender',
+		label: 'Gender',
+		formatter: (value) => (value === 'M' ? 'Male' : 'Female')
+	},
+	{
+		name: 'salary',
+		label: 'Annual Salary',
+		formatter: (value) => `$${value.toLocaleString()}`
+	}
+]
diff --git a/sites/learn/src/routes/(learn)/elements/table/stories.js b/sites/learn/src/routes/(learn)/elements/table/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/elements/table/stories.js
+++ b/sites/learn/src/routes/(learn)/elements/table/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/elements/tabs/fields/data.js b/sites/learn/src/routes/(learn)/elements/tabs/fields/data.js
index c88d110e2..775de3a7e 100644
--- a/sites/learn/src/routes/(learn)/elements/tabs/fields/data.js
+++ b/sites/learn/src/routes/(learn)/elements/tabs/fields/data.js
@@ -19,4 +19,4 @@ export const options = [
 		photo: '/examples/spices.jpg',
 		artist: 'https://www.pexels.com/@mareefe/'
 	}
-]
\ No newline at end of file
+]
diff --git a/sites/learn/src/routes/(learn)/elements/tabs/stories.js b/sites/learn/src/routes/(learn)/elements/tabs/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/elements/tabs/stories.js
+++ b/sites/learn/src/routes/(learn)/elements/tabs/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/elements/tabs/using/data.js b/sites/learn/src/routes/(learn)/elements/tabs/using/data.js
index ea531b0eb..2bc820e91 100644
--- a/sites/learn/src/routes/(learn)/elements/tabs/using/data.js
+++ b/sites/learn/src/routes/(learn)/elements/tabs/using/data.js
@@ -23,4 +23,4 @@ export const options = [
 		artist: 'https://www.pexels.com/@mareefe/',
 		target: '_blank'
 	}
-]
\ No newline at end of file
+]
diff --git a/sites/learn/src/routes/(learn)/elements/tree/stories.js b/sites/learn/src/routes/(learn)/elements/tree/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/elements/tree/stories.js
+++ b/sites/learn/src/routes/(learn)/elements/tree/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/forms/advanced/stories.js b/sites/learn/src/routes/(learn)/forms/advanced/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/forms/advanced/stories.js
+++ b/sites/learn/src/routes/(learn)/forms/advanced/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/forms/builder/stories.js b/sites/learn/src/routes/(learn)/forms/builder/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/forms/builder/stories.js
+++ b/sites/learn/src/routes/(learn)/forms/builder/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/forms/inputs/stories.js b/sites/learn/src/routes/(learn)/forms/inputs/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/forms/inputs/stories.js
+++ b/sites/learn/src/routes/(learn)/forms/inputs/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/forms/layout/stories.js b/sites/learn/src/routes/(learn)/forms/layout/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/forms/layout/stories.js
+++ b/sites/learn/src/routes/(learn)/forms/layout/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/forms/overview/stories.js b/sites/learn/src/routes/(learn)/forms/overview/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/forms/overview/stories.js
+++ b/sites/learn/src/routes/(learn)/forms/overview/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/forms/schema/stories.js b/sites/learn/src/routes/(learn)/forms/schema/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/forms/schema/stories.js
+++ b/sites/learn/src/routes/(learn)/forms/schema/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/forms/validation/stories.js b/sites/learn/src/routes/(learn)/forms/validation/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/forms/validation/stories.js
+++ b/sites/learn/src/routes/(learn)/forms/validation/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/input/calendar/stories.js b/sites/learn/src/routes/(learn)/input/calendar/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/input/calendar/stories.js
+++ b/sites/learn/src/routes/(learn)/input/calendar/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/input/inputfield/stories.js b/sites/learn/src/routes/(learn)/input/inputfield/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/input/inputfield/stories.js
+++ b/sites/learn/src/routes/(learn)/input/inputfield/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/input/range/stories.js b/sites/learn/src/routes/(learn)/input/range/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/input/range/stories.js
+++ b/sites/learn/src/routes/(learn)/input/range/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/input/rating/stories.js b/sites/learn/src/routes/(learn)/input/rating/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/input/rating/stories.js
+++ b/sites/learn/src/routes/(learn)/input/rating/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/layout/nav-content/stories.js b/sites/learn/src/routes/(learn)/layout/nav-content/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/layout/nav-content/stories.js
+++ b/sites/learn/src/routes/(learn)/layout/nav-content/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/layout/responsive-grid/fragments/02-custom-css.css b/sites/learn/src/routes/(learn)/layout/responsive-grid/fragments/02-custom-css.css
index c0815dc0f..7d108e01d 100644
--- a/sites/learn/src/routes/(learn)/layout/responsive-grid/fragments/02-custom-css.css
+++ b/sites/learn/src/routes/(learn)/layout/responsive-grid/fragments/02-custom-css.css
@@ -40,4 +40,4 @@
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, 1fr);
   }
-}
\ No newline at end of file
+}
diff --git a/sites/learn/src/routes/(learn)/layout/responsive-grid/stories.js b/sites/learn/src/routes/(learn)/layout/responsive-grid/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/layout/responsive-grid/stories.js
+++ b/sites/learn/src/routes/(learn)/layout/responsive-grid/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/layout/stepper/stories.js b/sites/learn/src/routes/(learn)/layout/stepper/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/layout/stepper/stories.js
+++ b/sites/learn/src/routes/(learn)/layout/stepper/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/primitives/item/stories.js b/sites/learn/src/routes/(learn)/primitives/item/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/primitives/item/stories.js
+++ b/sites/learn/src/routes/(learn)/primitives/item/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/primitives/pill/stories.js b/sites/learn/src/routes/(learn)/primitives/pill/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/primitives/pill/stories.js
+++ b/sites/learn/src/routes/(learn)/primitives/pill/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/templates/editor/fragments/01-schema.js b/sites/learn/src/routes/(learn)/templates/editor/fragments/01-schema.js
index 705035a8b..4d9434ffa 100644
--- a/sites/learn/src/routes/(learn)/templates/editor/fragments/01-schema.js
+++ b/sites/learn/src/routes/(learn)/templates/editor/fragments/01-schema.js
@@ -1,54 +1,54 @@
 const schema = [
-  {
-    key: 'tenant',
-    type: 'object',
-    scope: '#/tenant',
-    properties: {
-      name: {
-        type: 'string',
-        required: true,
-        maxLength: 100
-      },
-      industry: {
-        type: 'enum',
-        options: ['Retail', 'Healthcare', 'Technology', 'Finance']
-      }
-    },
-    layout: {
-      type: 'vertical',
-      elements: [
-        {
-          label: 'name',
-          scope: '#/name'
-        },
-        {
-          label: 'industry',
-          scope: '#/industry'
-        }
-      ]
-    }
-  },
-  {
-    key: 'services',
-    type: 'object',
-    scope: '#/services',
-    _open: true,
-    children: [
-      {
-        key: 'identity',
-        type: 'object',
-        scope: '#/services/identity',
-        properties: {
-          provider: {
-            type: 'enum',
-            options: ['Okta', 'Auth0', 'AWS Cognito']
-          },
-          url: {
-            type: 'url',
-            required: true
-          }
-        }
-      }
-    ]
-  }
-]
\ No newline at end of file
+	{
+		key: 'tenant',
+		type: 'object',
+		scope: '#/tenant',
+		properties: {
+			name: {
+				type: 'string',
+				required: true,
+				maxLength: 100
+			},
+			industry: {
+				type: 'enum',
+				options: ['Retail', 'Healthcare', 'Technology', 'Finance']
+			}
+		},
+		layout: {
+			type: 'vertical',
+			elements: [
+				{
+					label: 'name',
+					scope: '#/name'
+				},
+				{
+					label: 'industry',
+					scope: '#/industry'
+				}
+			]
+		}
+	},
+	{
+		key: 'services',
+		type: 'object',
+		scope: '#/services',
+		_open: true,
+		children: [
+			{
+				key: 'identity',
+				type: 'object',
+				scope: '#/services/identity',
+				properties: {
+					provider: {
+						type: 'enum',
+						options: ['Okta', 'Auth0', 'AWS Cognito']
+					},
+					url: {
+						type: 'url',
+						required: true
+					}
+				}
+			}
+		]
+	}
+]
diff --git a/sites/learn/src/routes/(learn)/templates/editor/stories.js b/sites/learn/src/routes/(learn)/templates/editor/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/templates/editor/stories.js
+++ b/sites/learn/src/routes/(learn)/templates/editor/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/theming/colors/fragments/05-theme-customization.js b/sites/learn/src/routes/(learn)/theming/colors/fragments/05-theme-customization.js
index 00a106e5a..d7d65e629 100644
--- a/sites/learn/src/routes/(learn)/theming/colors/fragments/05-theme-customization.js
+++ b/sites/learn/src/routes/(learn)/theming/colors/fragments/05-theme-customization.js
@@ -21,4 +21,4 @@ const colors = {
 	// Include other palette colors with custom values as needed
 }
 
-themeRules('custom', mapping, colors)
\ No newline at end of file
+themeRules('custom', mapping, colors)
diff --git a/sites/learn/src/routes/(learn)/theming/colors/stories.js b/sites/learn/src/routes/(learn)/theming/colors/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/theming/colors/stories.js
+++ b/sites/learn/src/routes/(learn)/theming/colors/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/utilities/connector/stories.js b/sites/learn/src/routes/(learn)/utilities/connector/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/utilities/connector/stories.js
+++ b/sites/learn/src/routes/(learn)/utilities/connector/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/utilities/validation-report/fragments/02-dynamic-validation.js b/sites/learn/src/routes/(learn)/utilities/validation-report/fragments/02-dynamic-validation.js
index 6f7db8a27..edd31f7bc 100644
--- a/sites/learn/src/routes/(learn)/utilities/validation-report/fragments/02-dynamic-validation.js
+++ b/sites/learn/src/routes/(learn)/utilities/validation-report/fragments/02-dynamic-validation.js
@@ -1,35 +1,35 @@
 // Example of dynamic validation with form integration
 function validatePassword(password) {
-  return [
-    {
-      text: 'At least 8 characters long',
-      valid: password.length >= 8,
-      status: password.length >= 8 ? 'pass' : 'fail'
-    },
-    {
-      text: 'Contains uppercase letter',
-      valid: /[A-Z]/.test(password),
-      status: /[A-Z]/.test(password) ? 'pass' : 'fail'
-    },
-    {
-      text: 'Contains lowercase letter',
-      valid: /[a-z]/.test(password),
-      status: /[a-z]/.test(password) ? 'pass' : 'fail'
-    },
-    {
-      text: 'Contains number',
-      valid: /\d/.test(password),
-      status: /\d/.test(password) ? 'pass' : 'fail'
-    },
-    {
-      text: 'Contains special character',
-      valid: /[!@#$%^&*]/.test(password),
-      status: /[!@#$%^&*]/.test(password) ? 'pass' : 'warn',
-      optional: true
-    }
-  ]
+	return [
+		{
+			text: 'At least 8 characters long',
+			valid: password.length >= 8,
+			status: password.length >= 8 ? 'pass' : 'fail'
+		},
+		{
+			text: 'Contains uppercase letter',
+			valid: /[A-Z]/.test(password),
+			status: /[A-Z]/.test(password) ? 'pass' : 'fail'
+		},
+		{
+			text: 'Contains lowercase letter',
+			valid: /[a-z]/.test(password),
+			status: /[a-z]/.test(password) ? 'pass' : 'fail'
+		},
+		{
+			text: 'Contains number',
+			valid: /\d/.test(password),
+			status: /\d/.test(password) ? 'pass' : 'fail'
+		},
+		{
+			text: 'Contains special character',
+			valid: /[!@#$%^&*]/.test(password),
+			status: /[!@#$%^&*]/.test(password) ? 'pass' : 'warn',
+			optional: true
+		}
+	]
 }
 
 // Usage in component
 let password = ''
-$: validationItems = validatePassword(password)
\ No newline at end of file
+$: validationItems = validatePassword(password)
diff --git a/sites/learn/src/routes/(learn)/utilities/validation-report/stories.js b/sites/learn/src/routes/(learn)/utilities/validation-report/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/utilities/validation-report/stories.js
+++ b/sites/learn/src/routes/(learn)/utilities/validation-report/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)
diff --git a/sites/learn/src/routes/(learn)/welcome/getting-started/stories.js b/sites/learn/src/routes/(learn)/welcome/getting-started/stories.js
index ed7f5dc38..8b2a3cbda 100644
--- a/sites/learn/src/routes/(learn)/welcome/getting-started/stories.js
+++ b/sites/learn/src/routes/(learn)/welcome/getting-started/stories.js
@@ -3,4 +3,4 @@ import { StoryBuilder } from '$lib/components/Story/builder.svelte.js'
 const modules = import.meta.glob('./*/**/App.svelte', { import: 'default' })
 const sources = import.meta.glob('./*/**/*', { query: '?raw', import: 'default' })
 
-export const storyBuilder = new StoryBuilder(sources, modules)
\ No newline at end of file
+export const storyBuilder = new StoryBuilder(sources, modules)