style: format code with Prettier

.rules/guidelines/coding.md

@@ -1,33 +1,39 @@
 Guidelines for Approaching Code Tasks
 
 ## Initial Assessment Phase
+
 - **Always seek clarification** on requirements before proceeding
 - **Ask targeted questions** to uncover unstated assumptions or edge cases
 - **Establish success criteria** - how will we know when the task is complete?
 - **Identify potential constraints** (performance, compatibility, security)
 
 ## Planning Phase
+
 - **Analyze the existing codebase** and provide a clear understanding of relevant components
 - **Present an implementation strategy** with a step-by-step approach
 - **Break down complex tasks** into smaller, manageable units of work
 - **Confirm approach** and obtain agreement before writing any code
 - **Identify potential risks** and discuss mitigation strategies
 
 ## Implementation Phase
+
 - **Start with a minimal working foundation** that demonstrates core functionality
 - **Implement features incrementally**, validating each step before proceeding
 - **Keep changes focused** with a small surface area to simplify debugging
 - **Document design decisions** and any non-obvious implementation details
 - **Seek feedback** at logical checkpoints during implementation
 
 ## Refinement Phase
+
 - **Review the implementation** against the original requirements
 - **Test edge cases** explicitly
 - **Optimize only after functionality is correct** and only where necessary
 - **Consider maintenance implications** of the implementation
 
 ## Rationale
+
 This structured approach prevents several common issues:
+
 - It avoids wasted effort implementing misunderstood requirements
 - It makes debugging simpler by isolating changes
 - It provides clear checkpoints for validation

.rules/guidelines/javascript.md

@@ -22,3 +22,4 @@ project/
 │   ├── index.spec.js
 │   └── utils.spec.js
 └── README.md
+```

.rules/guidelines/svelte.md

@@ -8,6 +8,7 @@
 - E2E tests should follow the page object pattern
 
 ## Svelte 5
+
 {{[Svelte & Svelte Kit Distilled](https://svelte-llm.khromov.se/svelte-complete-distilled)}}
 {{[svelte 5 documentation](https://svelte.dev/docs/svelte/llms.txt)}}
 
@@ -114,6 +115,7 @@ To pass a snippet to another component:
   {/snippet}
 </ChildComponent>
 ```
+
 Both of these options work in a similar way
 
 ### Important: What NOT to do

.rules/llms.md

@@ -16,11 +16,10 @@ First, carefully review the following guidelines:
 {{[SVELTE_5_GUIDELINES](./guidelines/svelte.md)}}
 </svelte_5_guidelines>
 
-
-
 Now, follow these instructions to implement Svelte 5 components and structure the project:
 
 1. Component Implementation:
+
    - Use Svelte 5 runes mode for all component code.
    - Implement state management using $state, $derived, and $effect runes.
    - Use $props() for component properties.
@@ -29,20 +28,24 @@ Now, follow these instructions to implement Svelte 5 components and structure th
    - Consider reduced motion in your implementations.
 
 2. Project Structure:
+
    - Use SvelteKit for the application structure.
    - Organize your project following the provided directory structure.
    - Use .svelte.js extension for files using runes in the source code.
    - Use .spec.svelte.js extension for test files using runes.
 
 3. Styling:
+
    - Use UnoCSS for all styling in the project.
 
 4. Testing:
+
    - Implement unit tests using vitest.
    - Implement end-to-end (e2e) tests using Playwright.
    - Follow the page object pattern for e2e tests.
 
 5. Event Handling:
+
    - Treat event handlers as properties in Svelte 5.
    - Use onclick instead of on:click for event binding.
    - Pass callback props to components instead of using event forwarding.
@@ -54,6 +57,7 @@ Now, follow these instructions to implement Svelte 5 components and structure th
 When implementing components or structuring the project, provide your code inside <code> tags. For explanations or comments, use <explanation> tags.
 
 Your final output should include:
+
 1. A brief overview of the implemented components or project structure.
 2. The actual implementation or structure in <code> tags.
 3. Explanations for your choices in <explanation> tags.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rokkit",
-  "version": "1.0.0-next.120",
+  "version": "1.0.0-next.121",
   "module": "src/index.js",
   "type": "module",
   "npm": {

packages/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.120",
+  "version": "1.0.0-next.121",
   "description": "Contains generic actions that can be used in various components.",
   "author": "Jerry Thomas <[email protected]>",
   "license": "MIT",

packages/bits-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/bits-ui",
-  "version": "1.0.0-next.120",
+  "version": "1.0.0-next.121",
   "type": "module",
   "description": "Data-driven UI components based on bits-ui",
   "author": "Jerry Thomas <[email protected]>",

packages/chart/README.md

@@ -18,15 +18,15 @@ The chart package provides a set of composable components that can be combined t
 <script>
    import { Plot } from '@rokkit/chart'
    import { dataset } from '@rokkit/data'
-   
+
    // Sample data
    const sampleData = [
      { model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
      { model: 'Model B', name: 'Product 2', category: 'Clothing', count: 32 },
      { model: 'Model C', name: 'Product 3', category: 'Electronics', count: 62 },
      // More data...
    ]
-   
+
    // Use the dataset class to process the data
    let data = dataset(sampleData)
      .groupBy('model')
@@ -50,6 +50,7 @@ The chart package provides a set of composable components that can be combined t
 The container component for all charts.
 
 **Props:**
+
 - `data` - The dataset to visualize (array or dataset object)
 - `width` - Width of the chart in pixels (default: 600)
 - `height` - Height of the chart in pixels (default: 400)
@@ -63,6 +64,7 @@ The container component for all charts.
 Renders an axis for the chart.
 
 **Props:**
+
 - `type` - Type of axis ('x' or 'y')
 - `field` - Data field to use for this axis
 - `label` - Axis label text
@@ -75,6 +77,7 @@ Renders an axis for the chart.
 Renders a bar chart.
 
 **Props:**
+
 - `x` - Field to use for x-axis values
 - `y` - Field to use for y-axis values
 - `fill` - Field to use for coloring the bars (optional)
@@ -88,6 +91,7 @@ Renders a bar chart.
 Renders grid lines for the chart.
 
 **Props:**
+
 - `direction` - Direction of grid lines ('x', 'y', or 'both') (default: 'both')
 - `xTicks` - Number of ticks for x-axis grid (optional)
 - `yTicks` - Number of ticks for y-axis grid (optional)
@@ -100,6 +104,7 @@ Renders grid lines for the chart.
 Renders a legend for the chart.
 
 **Props:**
+
 - `title` - Title for the legend (optional)
 - `align` - Alignment of the legend ('left', 'right', 'center') (default: 'right')
 - `verticalAlign` - Vertical position of the legend ('top', 'bottom') (default: 'top')
@@ -115,11 +120,11 @@ The chart components work seamlessly with the `@rokkit/data` package, allowing f
 <script>
    import { Plot } from '@rokkit/chart'
    import { dataset } from '@rokkit/data'
-   
+
    let input = [
      // Your raw data here
    ]
-   
+
    $: processedData = dataset(input)
      .groupBy('category')
      .summarize('name', { count: values => values.length, total: values => values.reduce((a, b) => a + b, 0) })

packages/chart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.120",
+  "version": "1.0.0-next.121",
   "type": "module",
   "description": "Data-driven chart components",
   "author": "Jerry Thomas <[email protected]>",