diff --git a/.rules/colors.md b/.rules/colors.md
index 77add7bb..2679e856 100644
--- a/.rules/colors.md
+++ b/.rules/colors.md
@@ -1,4 +1,3 @@
-
 `getVariableMap(colors.orange)` generates the css variables below.
 
 ```json
@@ -17,7 +16,9 @@
     "--color-primary-950": "#172554";
 }
 ```
+
 and `getColorMap('primary')` generates the following object
+
 ```js
 {
      "500": 'var(--color-primary-500)',
@@ -33,32 +34,29 @@ and `getColorMap('primary')` generates the following object
 Using `shorcuts` configuration in unocss.config.js I am able to change the colors using `bg-primary-500` styles.
 
 Unocss config.
+
 ```js
-shortcuts=  [
-		['skin-orange', getVariableMap(colors.orange)],
-		['skin-green', getVariableMap(colors.green)]
-],
-colors = {
-   primary: getColorMap('primary')
-}
+;((shortcuts = [
+  ['skin-orange', getVariableMap(colors.orange)],
+  ['skin-green', getVariableMap(colors.green)]
+]),
+  (colors = {
+    primary: getColorMap('primary')
+  }))
 ```
 
 The html and css are below.
 
 ```html
 <section data-skin="orange">
-  <div class="bg-primary-500 text-white p-4 rounded-md">
-    This is an orange section.
-  </div>
+  <div class="bg-primary-500 text-white p-4 rounded-md">This is an orange section.</div>
   <div class="bg-primary-500/20 text-white p-4 rounded-md">
     This is an orange section with opacity.
   </div>
 </section>
 
 <section data-skin="green">
-  <div class="bg-primary-500 text-white p-4 rounded-md">
-    This is an orange section.
-  </div>
+  <div class="bg-primary-500 text-white p-4 rounded-md">This is an orange section.</div>
   <div class="bg-primary-500/20 text-white p-4 rounded-md">
     This is an orange section with opacity.
   </div>
@@ -66,10 +64,10 @@ The html and css are below.
 ```
 
 ```css
-[data-skin="orange"]{
+[data-skin='orange'] {
   @apply skin-orange;
 }
-[data-skin="green"]{
+[data-skin='green'] {
   @apply skin-green;
 }
 ```
@@ -78,11 +76,7 @@ I am able to get the `bg-primary-500` style to work with the css variables as co
 
 I needed to use the variables to switch the primary and secondary colors in the system, and I want to continue using the `bg-primary-500` or `bg-primary-500/20` css styles.
 
-
-
-
-
 ['theme-colors', theme.getPalette(mapping)],
-		['vibrant', theme.getPalette({ primary: 'blue', secondary: 'purple' })],
+['vibrant', theme.getPalette({ primary: 'blue', secondary: 'purple' })],
 
 I was able to generate custom rules using the approach below
diff --git a/.rules/guidelines/styles.md b/.rules/guidelines/styles.md
index 6ea400a2..85a8a95b 100644
--- a/.rules/guidelines/styles.md
+++ b/.rules/guidelines/styles.md
@@ -12,7 +12,7 @@ This document defines the conventions for separating theme and layout styles, an
 
 - **Purpose:** Control colors, gradients, shadows, border colors, and other visual tokens that define the "look and feel" of a theme.
 - **Location:** `packages/themes/src/rokkit/`
-- **Examples:** 
+- **Examples:**
   - Background and text colors
   - Gradients
   - Border colors
@@ -135,4 +135,4 @@ This document defines the conventions for separating theme and layout styles, an
 - See `rokkit/input.css` and `base/input.css` for implementation patterns.
 - For further questions, consult the project maintainers or open a discussion in the repo.
 
----
\ No newline at end of file
+---
diff --git a/.rules/project/progress.md b/.rules/project/progress.md
index 580c3129..9b970356 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, input styles migration for InputField complete (see guidelines/styles.md, input.css)
 
 ## 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,21 +108,25 @@
 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
 
 ### Input Styles Migration (In Progress)
-| Task | Status | Notes |
-|------|--------|-------|
+
+| Task                                         | Status      | Notes                                                                                        |
+| -------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------- |
 | Input styles migration to theme/layout split | ✅ Complete | InputField styles refactored: theme/layout split, data-attribute selectors, guidelines added |
 
 ### 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
@@ -119,16 +134,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
@@ -136,6 +154,7 @@
 ## Implementation Guidelines
 
 ### Component Migration Checklist
+
 When working on any component:
 
 - [ ] Preserve existing API surface (items, value, fields, using props)
@@ -148,6 +167,7 @@ When working on any component:
 - [ ] Update documentation examples
 
 ### Quality Requirements
+
 All components must meet:
 
 - [ ] Field mapping system preserved and working
@@ -162,6 +182,7 @@ All components must meet:
 ### Technical Decisions Made
 
 ### InputField Styles Migration (May 2024)
+
 - Migrated all InputField component styles to new theme/layout split:
   - Theme styles (colors, gradients, border colors, error/disabled states) moved to `packages/themes/src/rokkit/input.css`
   - Layout styles (spacing, flex, structure, sizing) moved to `packages/themes/src/base/input.css`
@@ -170,6 +191,7 @@ All components must meet:
 - Updated this progress file to track and document the migration
 
 ### 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
@@ -180,6 +202,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
@@ -190,12 +213,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
@@ -205,6 +230,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
@@ -213,6 +239,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
@@ -220,6 +247,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
@@ -227,6 +255,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')`
@@ -236,6 +265,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
@@ -244,15 +274,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/docs/CODEVIEWER_USAGE.md b/docs/CODEVIEWER_USAGE.md
index cd87f3d6..a525ecec 100644
--- a/docs/CODEVIEWER_USAGE.md
+++ b/docs/CODEVIEWER_USAGE.md
@@ -19,6 +19,7 @@ tutorial/
 ```
 
 **Example `src/App.svelte`:**
+
 ```svelte
 <script>
 	import { List } from '@rokkit/ui'
@@ -44,6 +45,7 @@ tutorial/
 ### 2. Use CodeViewer in Your Tutorial Page
 
 **Example `+page.svelte`:**
+
 ```svelte
 <script>
 	import { onMount } from 'svelte'
@@ -70,7 +72,7 @@ tutorial/
 
 <div class="space-y-8">
 	<h1>My Tutorial Section</h1>
-	
+
 	{#if loading}
 		<div>Loading demo...</div>
 	{:else}
@@ -129,4 +131,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/docs/stories.md b/docs/stories.md
index c71069d4..4309fcc0 100644
--- a/docs/stories.md
+++ b/docs/stories.md
@@ -85,6 +85,7 @@ Each story's main component should be in `src/App.svelte` and can include additi
 ## Why a Separate System?
 
 The Story System is intentionally kept separate from the core Rokkit library to:
+
 - Avoid adding runtime or bundle size overhead to production apps.
 - Allow rapid iteration and improvement of documentation tools.
 - Provide a focused, best-in-class learning experience for Rokkit users.
@@ -109,6 +110,6 @@ The Story System is intentionally kept separate from the core Rokkit library to:
 
 ## Licensing
 
-For licensing and language model usage, see [llms.txt](../sites/learn/src/routes/(learn)/welcome/introduction/llms.txt).
+For licensing and language model usage, see [llms.txt](<../sites/learn/src/routes/(learn)/welcome/introduction/llms.txt>).
 
----
\ No newline at end of file
+---
diff --git a/packages/actions/src/navigator.svelte.js b/packages/actions/src/navigator.svelte.js
index 5a9e338b..e871e553 100644
--- a/packages/actions/src/navigator.svelte.js
+++ b/packages/actions/src/navigator.svelte.js
@@ -15,16 +15,16 @@ function scrollFocusedIntoView(container, wrapper) {
 	if (wrapper.focusedKey) {
 		focusedElement = container.querySelector(`[data-path="${wrapper.focusedKey}"]`)
 	}
-	
+
 	// Fallback: find by aria-current
 	if (!focusedElement) {
 		focusedElement = container.querySelector('[aria-current="true"]')
 	}
-	
+
 	// Scroll into view if element found
 	if (focusedElement) {
-		focusedElement.scrollIntoView({ 
-			behavior: 'smooth', 
+		focusedElement.scrollIntoView({
+			behavior: 'smooth',
 			block: 'nearest',
 			inline: 'nearest'
 		})
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 f63d808a..fc34d62d 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 @@
 const 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 633d8bf6..529511de 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 @@
-const fields = { component: 'type' }
\ No newline at end of file
+const fields = { component: 'type' }
diff --git a/sites/learn/src/routes/(learn)/elements/tabs/fragments/01-styling.css b/sites/learn/src/routes/(learn)/elements/tabs/fragments/01-styling.css
index 0686c95c..9a35b82b 100644
--- a/sites/learn/src/routes/(learn)/elements/tabs/fragments/01-styling.css
+++ b/sites/learn/src/routes/(learn)/elements/tabs/fragments/01-styling.css
@@ -4,12 +4,12 @@
   transition: all 0.2s ease;
 }
 
-[data-tab-item][aria-selected="true"] {
+[data-tab-item][aria-selected='true'] {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
 }
 
 /* Vertical layout adjustments */
-[data-tab-orientation="vertical"] [data-tab-list] {
+[data-tab-orientation='vertical'] [data-tab-list] {
   min-width: 200px;
-}
\ No newline at end of file
+}
diff --git a/sites/learn/src/stories/chart-elements/palette/fragments/02-multiple-colors.js b/sites/learn/src/stories/chart-elements/palette/fragments/02-multiple-colors.js
index 5e9219c7..54d73185 100644
--- a/sites/learn/src/stories/chart-elements/palette/fragments/02-multiple-colors.js
+++ b/sites/learn/src/stories/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/stories/chart-elements/patterns/fragments/02-multiple.js b/sites/learn/src/stories/chart-elements/patterns/fragments/02-multiple.js
index d3bb36be..06c7c3a1 100644
--- a/sites/learn/src/stories/chart-elements/patterns/fragments/02-multiple.js
+++ b/sites/learn/src/stories/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/stories/chart-elements/symbols/fragments/03-custom-attributes.js b/sites/learn/src/stories/chart-elements/symbols/fragments/03-custom-attributes.js
index cc9ef2d2..518af35f 100644
--- a/sites/learn/src/stories/chart-elements/symbols/fragments/03-custom-attributes.js
+++ b/sites/learn/src/stories/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/stories/charts/plot/fragments/02-chart-types.js b/sites/learn/src/stories/charts/plot/fragments/02-chart-types.js
index d5d827f5..387fb11e 100644
--- a/sites/learn/src/stories/charts/plot/fragments/02-chart-types.js
+++ b/sites/learn/src/stories/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/stories/charts/plot/intro/cars.js b/sites/learn/src/stories/charts/plot/intro/cars.js
index 8db05f66..6da05f72 100644
--- a/sites/learn/src/stories/charts/plot/intro/cars.js
+++ b/sites/learn/src/stories/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/stories/responsive-grid/fragments/02-custom-css.css b/sites/learn/src/stories/responsive-grid/fragments/02-custom-css.css
index c0815dc0..7d108e01 100644
--- a/sites/learn/src/stories/responsive-grid/fragments/02-custom-css.css
+++ b/sites/learn/src/stories/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/stories/templates/editor/fragments/01-schema.js b/sites/learn/src/stories/templates/editor/fragments/01-schema.js
index 705035a8..4d9434ff 100644
--- a/sites/learn/src/stories/templates/editor/fragments/01-schema.js
+++ b/sites/learn/src/stories/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/stories/validation-report/fragments/02-dynamic-validation.js b/sites/learn/src/stories/validation-report/fragments/02-dynamic-validation.js
index 60e19013..c07db6d3 100644
--- a/sites/learn/src/stories/validation-report/fragments/02-dynamic-validation.js
+++ b/sites/learn/src/stories/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
 const password = ''
-$: validationItems = validatePassword(password)
\ No newline at end of file
+$: validationItems = validatePassword(password)
diff --git a/sites/learn/src/theme/base/tab.css b/sites/learn/src/theme/base/tab.css
index 90a67bec..1561da59 100644
--- a/sites/learn/src/theme/base/tab.css
+++ b/sites/learn/src/theme/base/tab.css
@@ -51,7 +51,6 @@
   @apply flex items-center;
 }
 
-
 /* Tab Content Area */
 [data-tabs-content] {
   @apply flex flex-1;
@@ -91,4 +90,4 @@
   [data-tabs-trigger] {
     @apply text-sm;
   }
-}
\ No newline at end of file
+}
diff --git a/sites/learn/src/theme/minimal/tab.css b/sites/learn/src/theme/minimal/tab.css
index 1825a0b1..a98c658e 100644
--- a/sites/learn/src/theme/minimal/tab.css
+++ b/sites/learn/src/theme/minimal/tab.css
@@ -46,7 +46,9 @@
 [data-style='minimal'] [data-tabs-root][data-position='after'] [data-tabs-trigger] {
   @apply pt-0.5;
 }
-[data-style='minimal'] [data-tabs-root][data-position='after'] [data-tabs-trigger][aria-selected='true'] {
+[data-style='minimal']
+  [data-tabs-root][data-position='after']
+  [data-tabs-trigger][aria-selected='true'] {
   @apply -mt-0.5 border-b-0 border-secondary-z6 mb-0 border-t-2;
 }