style: format code with Prettier

.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,43 +34,40 @@ 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>
 </section>
 ```
 
 ```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

.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.
 
----
+---

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!
+The system handles loading, error states, and provides copy functionality automatically!

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>).
 
----
+---

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'
 		})

sites/learn/src/routes/(learn)/elements/list/fragments/02-field-mapping.js

@@ -1,4 +1,4 @@
 const fields = {
-  text: 'name',
-  image: 'photo'
-}
+	text: 'name',
+	image: 'photo'
+}

sites/learn/src/routes/(learn)/elements/list/fragments/03-component-field.js

@@ -1 +1 @@
-const fields = { component: 'type' }
+const fields = { component: 'type' }

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;
-}
+}

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]
-]
+	swatch.palette.blue[300],
+	swatch.palette.blue[500],
+	swatch.palette.blue[700],
+	swatch.palette.blue[900]
+]

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]
-  }
-]
+	{
+		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]
+	}
+]

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' }
-  }
-}
+	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' }
+	}
+}

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
-}
+	data: cumulativeData,
+	x: 'period',
+	y: 'total',
+	fill: 'department',
+	stack: true
+}

sites/learn/src/stories/charts/plot/intro/cars.js

@@ -447,4 +447,4 @@ export const data = [
 		gear: 4,
 		carb: 2
 	}
-]
+]

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);
   }
-}
+}