diff --git a/.rules/guidelines/coding.md b/.rules/guidelines/coding.md
index 0d657d79c..88660cc58 100644
--- a/.rules/guidelines/coding.md
+++ b/.rules/guidelines/coding.md
@@ -30,8 +30,6 @@ Guidelines for Approaching Code Tasks
 - **Optimize only after functionality is correct** and only where necessary
 - **Consider maintenance implications** of the implementation
 
-
-
 ## Rationale
 
 This structured approach prevents several common issues:
diff --git a/.rules/instructions.md b/.rules/instructions.md
index 4cbca5075..53ab875f1 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/structure.md b/.rules/project/structure.md
index d70efb8c2..501359260 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-surface-50 dark:bg-surface-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,11 +173,13 @@ 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
diff --git a/CLAUDE.md b/CLAUDE.md
index 802dd4628..1556ccce5 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,7 +41,6 @@ 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:
@@ -62,6 +67,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 +77,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 +110,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 +127,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 +140,9 @@ let {
 ```
 
 ### Data Handling Pattern
+
 Use the Proxy system from `@rokkit/states` for consistent data access:
+
 ```svelte
 import { Proxy } from '@rokkit/states'
 
@@ -135,6 +153,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 +161,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 +170,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 +189,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 +197,7 @@ The project enforces strict code quality through ESLint:
 - **Interactive States**: Use `hover:`, `focus:`, `active:` variants
 
 ### Color Patterns
+
 ```css
 /* Backgrounds */
 bg-surface-z2        /* Page backgrounds */
@@ -195,6 +218,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 +233,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 +250,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 +261,7 @@ export const storyBuilder = new StoryBuilder(sources, modules)
 ```
 
 **+page.svelte**
+
 ```svelte
 <script>
   import { StoryViewer, Code } from '$lib/components/Story'
@@ -251,12 +278,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 +318,7 @@ Create fragments for reusable code examples with syntax highlighting:
 ```
 
 Access in templates:
+
 ```svelte
 <Code {...storyBuilder.getFragment(0)} />
 ```
@@ -308,6 +338,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/customizations/colors.md b/docs/customizations/colors.md
index cae606db1..450759dd2 100644
--- a/docs/customizations/colors.md
+++ b/docs/customizations/colors.md
@@ -16,18 +16,18 @@ Instead of traditional shortcuts like `bg-surface-300` or `bg-surface-100`, Rokk
 
 Each `z` value maps to a specific shade in your palette. For example, for neutral colors:
 
-| Shortcut         | Light Mode         | Dark Mode         |
-|------------------|-------------------|-------------------|
-| bg-surface-z1    | bg-surface-50     | bg-surface-950    |
-| bg-surface-z2    | bg-surface-100    | bg-surface-900    |
-| bg-surface-z3    | bg-surface-200    | bg-surface-800    |
-| bg-surface-z4    | bg-surface-300    | bg-surface-700    |
-| bg-surface-z5    | bg-surface-500    | bg-surface-600    |
-| bg-surface-z6    | bg-surface-600    | bg-surface-500    |
-| bg-surface-z7    | bg-surface-700    | bg-surface-300    |
-| bg-surface-z8    | bg-surface-800    | bg-surface-200    |
-| bg-surface-z9    | bg-surface-900    | bg-surface-100    |
-| bg-surface-z10   | bg-surface-950    | bg-surface-50     |
+| Shortcut       | Light Mode     | Dark Mode      |
+| -------------- | -------------- | -------------- |
+| bg-surface-z1  | bg-surface-50  | bg-surface-950 |
+| bg-surface-z2  | bg-surface-100 | bg-surface-900 |
+| bg-surface-z3  | bg-surface-200 | bg-surface-800 |
+| bg-surface-z4  | bg-surface-300 | bg-surface-700 |
+| bg-surface-z5  | bg-surface-500 | bg-surface-600 |
+| bg-surface-z6  | bg-surface-600 | bg-surface-500 |
+| bg-surface-z7  | bg-surface-700 | bg-surface-300 |
+| bg-surface-z8  | bg-surface-800 | bg-surface-200 |
+| bg-surface-z9  | bg-surface-900 | bg-surface-100 |
+| bg-surface-z10 | bg-surface-950 | bg-surface-50  |
 
 This mapping ensures that your UI adapts seamlessly between light and dark modes, with the lowest index (`z1`) always representing the lightest shade in light mode and the darkest in dark mode, and vice versa for `z10`.
 
@@ -43,7 +43,7 @@ shortcuts: [
   ...theme.getShortcuts('neutral'),
   ...theme.getShortcuts('primary'),
   ...theme.getShortcuts('secondary'),
-  ...theme.getShortcuts('info'),
+  ...theme.getShortcuts('info')
   // etc.
 ]
 ```
diff --git a/docs/customizations/icons.md b/docs/customizations/icons.md
index 94cf5c7f9..ed7120aad 100644
--- a/docs/customizations/icons.md
+++ b/docs/customizations/icons.md
@@ -21,7 +21,7 @@ import { iconShortcuts, defaultIcons } from '@rokkit/themes'
 
 export default defineConfig({
   shortcuts: [
-    ...Object.entries(iconShortcuts(defaultIcons, 'i-myicons')),
+    ...Object.entries(iconShortcuts(defaultIcons, 'i-myicons'))
     // other shortcuts...
   ]
 })
@@ -68,9 +68,7 @@ presetIcons({
   collections: {
     ...importIcons(icons),
     file: () =>
-      import('./static/icons/files/icons.json', { with: { type: 'json' } }).then(
-        (i) => i.default
-      )
+      import('./static/icons/files/icons.json', { with: { type: 'json' } }).then((i) => i.default)
   }
 })
 ```
@@ -86,4 +84,4 @@ presetIcons({
 
 ---
 
-For more on customizing styles and colors, see the [styles](./styles.md) and [colors](./colors.md) documentation.
\ No newline at end of file
+For more on customizing styles and colors, see the [styles](./styles.md) and [colors](./colors.md) documentation.
diff --git a/docs/customizations/styles.md b/docs/customizations/styles.md
index cd27db285..ffc406639 100644
--- a/docs/customizations/styles.md
+++ b/docs/customizations/styles.md
@@ -26,16 +26,19 @@ Rokkit leverages UnoCSS shortcuts to define "skins"—named style sets that bund
 shortcuts: [
   ['skin-default', theme.getPalette({ primary: 'orange', neutral: 'shark' })],
   ['skin-vibrant', theme.getPalette({ primary: 'blue', secondary: 'purple' })],
-  ['skin-seaweed', theme.getPalette({
-    primary: 'sky',
-    secondary: 'green',
-    accent: 'blue',
-    danger: 'rose',
-    success: 'lime',
-    neutral: 'zinc',
-    warning: 'amber',
-    info: 'indigo'
-  })],
+  [
+    'skin-seaweed',
+    theme.getPalette({
+      primary: 'sky',
+      secondary: 'green',
+      accent: 'blue',
+      danger: 'rose',
+      success: 'lime',
+      neutral: 'zinc',
+      warning: 'amber',
+      info: 'indigo'
+    })
+  ]
   // ...add more skins as needed
 ]
 ```
@@ -89,4 +92,4 @@ To create your own style system, simply define new UnoCSS shortcuts, palettes, a
 - **Spacing and variants**: Control density and appearance at both global and component levels.
 - **Composable and maintainable**: Rokkit’s style system is designed for scale and flexibility.
 
-For more on customizing colors and icons, see the [colors](./colors.md) and [icons](./icons.md) documentation.
\ No newline at end of file
+For more on customizing colors and icons, see the [colors](./colors.md) and [icons](./icons.md) documentation.
diff --git a/docs/forms/goals.md b/docs/forms/goals.md
index f1e70469f..75d783b21 100644
--- a/docs/forms/goals.md
+++ b/docs/forms/goals.md
@@ -7,11 +7,13 @@ Build a flexible, powerful form system that combines the simplicity of automatic
 ## Architectural Philosophy
 
 ### Clean Separation of Concerns
+
 - **Data Layer**: FormBuilder class manages state and reactivity
 - **Presentation Layer**: Snippet-based rendering with flexible layouts
 - **Integration Layer**: Unified property composition and event handling
 
 ### Progressive Enhancement
+
 - **Default behavior**: Automatic schema and layout derivation
 - **Schema override**: Custom validation rules and constraints
 - **Layout override**: Custom styling and arrangement
@@ -20,6 +22,7 @@ Build a flexible, powerful form system that combines the simplicity of automatic
 ## Core Design Principles
 
 ### 1. Simple Constructor Pattern
+
 ```javascript
 // Automatic derivation
 const form = new FormBuilder(data)
@@ -32,6 +35,7 @@ const form = new FormBuilder(data, customSchema, customLayout)
 ```
 
 ### 2. Enhanced Input Component Architecture
+
 ```svelte
 // Universal Input.svelte wrapper
 <Input {type} bind:value {...props} />
@@ -44,6 +48,7 @@ const form = new FormBuilder(data, customSchema, customLayout)
 ```
 
 ### 3. Clean Snippet Interface
+
 ```svelte
 {#snippet defaultInput(type, value, props)}
   <label>
@@ -62,24 +67,27 @@ const form = new FormBuilder(data, customSchema, customLayout)
 ```
 
 ### 4. Type-Aware Layout System
+
 - **Standard**: Label above input (text, number, email, etc.)
 - **Checkbox**: Checkbox first, label on the right
 - **Switch**: Inline layout with label
 - **Custom**: Complete override through child snippet
 
 ### 5. Comprehensive Message System
+
 ```javascript
 const messageTypes = {
-  error: "Validation failures, required field missing",
-  warning: "Potential issues, format suggestions",
-  info: "Helpful hints, character counts, examples",
-  success: "Confirmation messages, validation passed"
+  error: 'Validation failures, required field missing',
+  warning: 'Potential issues, format suggestions',
+  info: 'Helpful hints, character counts, examples',
+  success: 'Confirmation messages, validation passed'
 }
 ```
 
 ## Implementation Goals
 
 ### Phase 1: Enhanced Input Architecture ✅ Foundation
+
 - [x] Three-parameter constructor: `new FormBuilder(data, schema, layout)`
 - [x] Schema property standardization (`min`/`max` + `minimum`/`maximum`)
 - [x] Basic input type support with clean HTML implementation
@@ -89,6 +97,7 @@ const messageTypes = {
 - [ ] Integrate message state management with type-based styling
 
 ### Phase 2: Snippet-Based Rendering System
+
 - [ ] Create `defaultInput` snippet with type-aware layouts
 - [ ] Implement custom `child` snippet support for complete override
 - [ ] Property composition system (schema + layout + message properties)
@@ -96,6 +105,7 @@ const messageTypes = {
 - [ ] Replace current HTML rendering with snippet system
 
 ### Phase 3: Validation & Message Integration
+
 - [ ] Schema-based validation rule integration
 - [ ] Real-time validation triggers (change, blur, submit)
 - [ ] Inline message display with messageType styling
@@ -103,6 +113,7 @@ const messageTypes = {
 - [ ] Accessibility compliance with ARIA live regions
 
 ### Phase 4: Advanced Customization & Extension
+
 - [ ] Advanced custom snippet patterns
 - [ ] Theme integration across all rendering modes
 - [ ] Extension documentation and examples
@@ -111,17 +122,19 @@ const messageTypes = {
 ## Key Benefits
 
 ### For Simple Use Cases
+
 ```javascript
 // Just works - automatic everything
 const form = new FormBuilder({
-  name: "",
-  email: "",
+  name: '',
+  email: '',
   age: 0,
   subscribe: false
 })
 ```
 
 ### For Custom Requirements
+
 ```svelte
 {#snippet customEmailInput(type, value, props)}
   <div class="custom-email-wrapper">
@@ -138,45 +151,49 @@ const form = new FormBuilder({
 ```
 
 ### Property Composition Power
+
 ```javascript
 // All context available in props object
 const props = {
   // Display
-  label: "Email Address",
+  label: 'Email Address',
   description: "We'll never share your email",
 
   // Message system
-  message: "Please enter a valid email",
-  messageType: "error",
+  message: 'Please enter a valid email',
+  messageType: 'error',
 
   // Events
   onchange: handleChange,
 
   // Schema constraints
   required: true,
-  pattern: "[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$",
+  pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$',
 
   // Layout
-  placeholder: "user@example.com",
-  className: "custom-input"
+  placeholder: 'user@example.com',
+  className: 'custom-input'
 }
 ```
 
 ## Success Criteria
 
 ### Developer Experience
+
 - **Intuitive API**: Simple constructor, clear property names
 - **Progressive complexity**: Start simple, add complexity as needed
 - **Consistent patterns**: Same signature across all snippets
 - **Complete control**: Custom snippets for any requirement
 
 ### User Experience
+
 - **Rich feedback**: Error, warning, info, success message types
 - **Accessible**: Proper ARIA attributes and live regions
 - **Responsive**: Type-aware layouts that work on all devices
 - **Performance**: Fast rendering and minimal re-renders
 
 ### Technical Excellence
+
 - **Clean architecture**: Clear separation of concerns
 - **Extensible**: Easy to add new input types and behaviors
 - **Testable**: Unit, integration, and component test support
@@ -185,6 +202,7 @@ const props = {
 ## Future Vision
 
 ### Advanced Input Types
+
 - Date/time pickers with Input.svelte wrapper
 - Multi-select components with enhanced properties
 - File upload with validation and progress
@@ -192,6 +210,7 @@ const props = {
 - Color pickers with proper label positioning
 
 ### Enterprise Features
+
 - Form templates and reusable schemas
 - Advanced validation with custom functions
 - Conditional field display and dynamic layouts
@@ -199,6 +218,7 @@ const props = {
 - Internationalization and accessibility compliance
 
 ### Developer Ecosystem
+
 - VS Code snippets for common patterns
 - Storybook integration for component documentation
 - TypeScript definitions for full type safety
diff --git a/docs/story/README.md b/docs/story/README.md
index e22535f93..05ff921fc 100644
--- a/docs/story/README.md
+++ b/docs/story/README.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>).
 
 ---
diff --git a/docs/story/code-viewer.md b/docs/story/code-viewer.md
index cd87f3d66..a525ecec4 100644
--- a/docs/story/code-viewer.md
+++ b/docs/story/code-viewer.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/packages/bits-ui/src/FloatingNav.md b/packages/bits-ui/src/FloatingNav.md
index cceb9d0d7..4ee013159 100644
--- a/packages/bits-ui/src/FloatingNav.md
+++ b/packages/bits-ui/src/FloatingNav.md
@@ -59,25 +59,25 @@ A floating navigation component that uses `List.svelte` to render navigation ite
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `class` | `string` | `''` | Additional CSS class names |
-| `items` | `NavigationItem[]` | `[]` | Array of navigation items |
-| `activeSection` | `string` | `''` | Currently active section ID (bindable) |
-| `isExpanded` | `boolean` | `false` | Whether the nav is expanded (bindable) |
-| `isPinned` | `boolean` | `false` | Whether the nav is pinned open (bindable) |
-| `position` | `'left' \| 'right'` | `'right'` | Position of the nav |
-| `icons` | `Object` | `undefined` | Custom icon overrides |
-| `onNavigate` | `Function` | `undefined` | Callback when navigation item is clicked |
+| Prop            | Type                | Default     | Description                               |
+| --------------- | ------------------- | ----------- | ----------------------------------------- |
+| `class`         | `string`            | `''`        | Additional CSS class names                |
+| `items`         | `NavigationItem[]`  | `[]`        | Array of navigation items                 |
+| `activeSection` | `string`            | `''`        | Currently active section ID (bindable)    |
+| `isExpanded`    | `boolean`           | `false`     | Whether the nav is expanded (bindable)    |
+| `isPinned`      | `boolean`           | `false`     | Whether the nav is pinned open (bindable) |
+| `position`      | `'left' \| 'right'` | `'right'`   | Position of the nav                       |
+| `icons`         | `Object`            | `undefined` | Custom icon overrides                     |
+| `onNavigate`    | `Function`          | `undefined` | Callback when navigation item is clicked  |
 
 ## NavigationItem Interface
 
 ```typescript
 interface NavigationItem {
-  id: string              // Unique identifier for the navigation item
-  label: string           // Display text for the navigation item
-  href: string            // URL or anchor link for the navigation item
-  icon?: string           // Optional icon name (from defaultStateIcons)
+  id: string // Unique identifier for the navigation item
+  label: string // Display text for the navigation item
+  href: string // URL or anchor link for the navigation item
+  icon?: string // Optional icon name (from defaultStateIcons)
 }
 ```
 
@@ -197,4 +197,4 @@ You can override default icons by passing an `icons` prop:
 - `List.svelte` - Core list rendering functionality
 - `@rokkit/ui` - Icon component
 - `@rokkit/core` - defaultStateIcons
-- Tailwind CSS - Styling framework
\ No newline at end of file
+- Tailwind CSS - Styling framework
diff --git a/sites/learn/src/routes/(learn)/customization/icons/fragments/00-global-mapping.js b/sites/learn/src/routes/(learn)/customization/icons/fragments/00-global-mapping.js
index 64057233e..f52ed8728 100644
--- a/sites/learn/src/routes/(learn)/customization/icons/fragments/00-global-mapping.js
+++ b/sites/learn/src/routes/(learn)/customization/icons/fragments/00-global-mapping.js
@@ -1,8 +1,8 @@
 import { iconShortcuts, defaultIcons } from '@rokkit/themes'
 
 export default defineConfig({
-  shortcuts: [
-    ...Object.entries(iconShortcuts(defaultIcons, 'i-myicons')),
-    // other shortcuts...
-  ]
+	shortcuts: [
+		...Object.entries(iconShortcuts(defaultIcons, 'i-myicons'))
+		// other shortcuts...
+	]
 })
diff --git a/sites/learn/src/routes/(learn)/customization/icons/fragments/02-custom-collections.js b/sites/learn/src/routes/(learn)/customization/icons/fragments/02-custom-collections.js
index 058869a95..ef4d2268c 100644
--- a/sites/learn/src/routes/(learn)/customization/icons/fragments/02-custom-collections.js
+++ b/sites/learn/src/routes/(learn)/customization/icons/fragments/02-custom-collections.js
@@ -6,19 +6,17 @@
  */
 
 const icons = {
-  rokkit: '@rokkit/icons/ui.json',
-  logo: '@rokkit/icons/auth.json',
-  component: '@rokkit/icons/components.json',
-  app: '@rokkit/icons/app.json',
-  solar: '@iconify-json/solar/icons.json'
+	rokkit: '@rokkit/icons/ui.json',
+	logo: '@rokkit/icons/auth.json',
+	component: '@rokkit/icons/components.json',
+	app: '@rokkit/icons/app.json',
+	solar: '@iconify-json/solar/icons.json'
 }
 
 presetIcons({
-  collections: {
-    ...importIcons(icons),
-    file: () =>
-      import('./static/icons/files/icons.json', { with: { type: 'json' } }).then(
-        (i) => i.default
-      )
-  }
+	collections: {
+		...importIcons(icons),
+		file: () =>
+			import('./static/icons/files/icons.json', { with: { type: 'json' } }).then((i) => i.default)
+	}
 })
diff --git a/sites/sample/src/app.d.ts b/sites/sample/src/app.d.ts
index da08e6da5..4e661d5d2 100644
--- a/sites/sample/src/app.d.ts
+++ b/sites/sample/src/app.d.ts
@@ -10,4 +10,4 @@ declare global {
 	}
 }
 
-export {};
+export {}
diff --git a/sites/sample/src/app.html b/sites/sample/src/app.html
index 50bd0b52c..5269f6452 100644
--- a/sites/sample/src/app.html
+++ b/sites/sample/src/app.html
@@ -1,11 +1,11 @@
 <!doctype html>
 <html lang="%paraglide.lang%">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
 </html>
diff --git a/sites/sample/src/hooks.server.ts b/sites/sample/src/hooks.server.ts
index 51822109d..699fdf3ed 100644
--- a/sites/sample/src/hooks.server.ts
+++ b/sites/sample/src/hooks.server.ts
@@ -1,12 +1,13 @@
-import type { Handle } from '@sveltejs/kit';
-import { paraglideMiddleware } from '$lib/paraglide/server';
+import type { Handle } from '@sveltejs/kit'
+import { paraglideMiddleware } from '$lib/paraglide/server'
 
-const handleParaglide: Handle = ({ event, resolve }) => paraglideMiddleware(event.request, ({ request, locale }) => {
-	event.request = request;
+const handleParaglide: Handle = ({ event, resolve }) =>
+	paraglideMiddleware(event.request, ({ request, locale }) => {
+		event.request = request
 
-	return resolve(event, {
-		transformPageChunk: ({ html }) => html.replace('%paraglide.lang%', locale)
-	});
-});
+		return resolve(event, {
+			transformPageChunk: ({ html }) => html.replace('%paraglide.lang%', locale)
+		})
+	})
 
-export const handle: Handle = handleParaglide;
+export const handle: Handle = handleParaglide
diff --git a/sites/sample/src/hooks.ts b/sites/sample/src/hooks.ts
index e75600b3e..ceee355ae 100644
--- a/sites/sample/src/hooks.ts
+++ b/sites/sample/src/hooks.ts
@@ -1,3 +1,3 @@
-import { deLocalizeUrl } from '$lib/paraglide/runtime';
+import { deLocalizeUrl } from '$lib/paraglide/runtime'
 
-export const reroute = (request) => deLocalizeUrl(request.url).pathname;
+export const reroute = (request) => deLocalizeUrl(request.url).pathname
diff --git a/sites/sample/svelte.config.js b/sites/sample/svelte.config.js
index 10c4eeb27..6988d1f86 100644
--- a/sites/sample/svelte.config.js
+++ b/sites/sample/svelte.config.js
@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-auto'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -8,6 +8,6 @@ const config = {
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
 		adapter: adapter()
 	}
-};
+}
 
-export default config;
+export default config
diff --git a/sites/sample/vite.config.js b/sites/sample/vite.config.js
index c3ff0f591..8e06d56d8 100644
--- a/sites/sample/vite.config.js
+++ b/sites/sample/vite.config.js
@@ -1,6 +1,6 @@
-import { paraglideVitePlugin } from '@inlang/paraglide-js';
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { paraglideVitePlugin } from '@inlang/paraglide-js'
+import { sveltekit } from '@sveltejs/kit/vite'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
 	plugins: [
@@ -10,4 +10,4 @@ export default defineConfig({
 			outdir: './src/lib/paraglide'
 		})
 	]
-});
+})