@pyreon/storybook 0.11.5 → 0.11.7

package/README.md

@@ -15,27 +15,27 @@ Configure Storybook to use the Pyreon renderer:
 ```ts
 // .storybook/main.ts
 export default {
-  stories: ["../src/**/*.stories.ts"],
-  framework: "@pyreon/storybook",
+  stories: ['../src/**/*.stories.ts'],
+  framework: '@pyreon/storybook',
 }
 ```
 
 ## Quick Start
 
 ```tsx
-import type { Meta, StoryObj } from "@pyreon/storybook"
-import { Button } from "./Button"
+import type { Meta, StoryObj } from '@pyreon/storybook'
+import { Button } from './Button'
 
 const meta = {
   component: Button,
-  args: { label: "Click me" },
+  args: { label: 'Click me' },
 } satisfies Meta<typeof Button>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
-  args: { variant: "primary" },
+  args: { variant: 'primary' },
 }
 
 export const AllVariants: Story = {
@@ -54,13 +54,13 @@ export const AllVariants: Story = {
 
 Core renderer called by Storybook to display stories. Handles cleanup of previous renders, error display, and mounting the VNode tree.
 
-| Parameter | Type | Description |
-| --- | --- | --- |
-| `context.storyFn` | `() => VNodeChild` | Function that produces the story VNode |
-| `context.showMain` | `() => void` | Show the main canvas |
-| `context.showError` | `(error) => void` | Show an error panel |
-| `context.forceRemount` | `boolean` | Whether to force a full remount |
-| `canvasElement` | `HTMLElement` | DOM element to render into |
+| Parameter              | Type               | Description                            |
+| ---------------------- | ------------------ | -------------------------------------- |
+| `context.storyFn`      | `() => VNodeChild` | Function that produces the story VNode |
+| `context.showMain`     | `() => void`       | Show the main canvas                   |
+| `context.showError`    | `(error) => void`  | Show an error panel                    |
+| `context.forceRemount` | `boolean`          | Whether to force a full remount        |
+| `canvasElement`        | `HTMLElement`      | DOM element to render into             |
 
 This function is used internally by the Storybook framework preset. You typically do not call it directly.
 
@@ -68,10 +68,10 @@ This function is used internally by the Storybook framework preset. You typicall
 
 Default render implementation. Called when no custom `render` function is provided on the story or meta.
 
-| Parameter | Type | Description |
-| --- | --- | --- |
-| `component` | `ComponentFn` | Pyreon component function |
-| `args` | `Record<string, unknown>` | Story args passed as props |
+| Parameter   | Type                      | Description                |
+| ----------- | ------------------------- | -------------------------- |
+| `component` | `ComponentFn`             | Pyreon component function  |
+| `args`      | `Record<string, unknown>` | Story args passed as props |
 
 **Returns:** `VNodeChild` — result of `h(component, args)`
 
@@ -79,33 +79,33 @@ Default render implementation. Called when no custom `render` function is provid
 
 Type for the default export of a story file. Provides type inference for args based on the component's props.
 
-| Property | Type | Description |
-| --- | --- | --- |
-| `component` | `TComponent` | The component to document |
-| `title` | `string` | Display title in sidebar |
-| `decorators` | `DecoratorFn[]` | Decorators for all stories in the file |
-| `args` | `Partial<InferProps<TComponent>>` | Default args |
-| `argTypes` | `Record<string, unknown>` | Arg type definitions for Controls |
-| `parameters` | `Record<string, unknown>` | Story parameters (backgrounds, viewport) |
-| `tags` | `string[]` | Tags for filtering (e.g. `"autodocs"`) |
-| `render` | `(args, context) => VNodeChild` | Default render function |
-| `excludeStories` | `string \| string[] \| RegExp` | Exclude named exports |
-| `includeStories` | `string \| string[] \| RegExp` | Include only named exports |
+| Property         | Type                              | Description                              |
+| ---------------- | --------------------------------- | ---------------------------------------- |
+| `component`      | `TComponent`                      | The component to document                |
+| `title`          | `string`                          | Display title in sidebar                 |
+| `decorators`     | `DecoratorFn[]`                   | Decorators for all stories in the file   |
+| `args`           | `Partial<InferProps<TComponent>>` | Default args                             |
+| `argTypes`       | `Record<string, unknown>`         | Arg type definitions for Controls        |
+| `parameters`     | `Record<string, unknown>`         | Story parameters (backgrounds, viewport) |
+| `tags`           | `string[]`                        | Tags for filtering (e.g. `"autodocs"`)   |
+| `render`         | `(args, context) => VNodeChild`   | Default render function                  |
+| `excludeStories` | `string \| string[] \| RegExp`    | Exclude named exports                    |
+| `includeStories` | `string \| string[] \| RegExp`    | Include only named exports               |
 
 ### `StoryObj<TMeta>`
 
 Type for individual story exports. Args are merged with `Meta.args`.
 
-| Property | Type | Description |
-| --- | --- | --- |
-| `args` | `Partial<MetaArgs>` | Args for this story |
-| `argTypes` | `Record<string, unknown>` | Arg type overrides |
-| `decorators` | `DecoratorFn[]` | Story-specific decorators |
-| `parameters` | `Record<string, unknown>` | Story parameters |
-| `tags` | `string[]` | Story tags |
-| `render` | `(args, context) => VNodeChild` | Custom render for this story |
-| `name` | `string` | Display name override |
-| `play` | `(context) => Promise<void> \| void` | Interaction test function |
+| Property     | Type                                 | Description                  |
+| ------------ | ------------------------------------ | ---------------------------- |
+| `args`       | `Partial<MetaArgs>`                  | Args for this story          |
+| `argTypes`   | `Record<string, unknown>`            | Arg type overrides           |
+| `decorators` | `DecoratorFn[]`                      | Story-specific decorators    |
+| `parameters` | `Record<string, unknown>`            | Story parameters             |
+| `tags`       | `string[]`                           | Story tags                   |
+| `render`     | `(args, context) => VNodeChild`      | Custom render for this story |
+| `name`       | `string`                             | Display name override        |
+| `play`       | `(context) => Promise<void> \| void` | Interaction test function    |
 
 ### `DecoratorFn<TArgs>`
 
@@ -119,11 +119,11 @@ const withTheme: DecoratorFn<{ label: string }> = (storyFn, context) => (
 
 ### `StoryFn<TArgs>` / `StoryContext<TArgs>` / `InferProps<T>`
 
-| Type | Description |
-| --- | --- |
-| `StoryFn<TArgs>` | `(args, context) => VNodeChild` |
+| Type                  | Description                                             |
+| --------------------- | ------------------------------------------------------- |
+| `StoryFn<TArgs>`      | `(args, context) => VNodeChild`                         |
 | `StoryContext<TArgs>` | `{ args, argTypes, globals, id, kind, name, viewMode }` |
-| `InferProps<T>` | Extract props type from a `ComponentFn<P>` |
+| `InferProps<T>`       | Extract props type from a `ComponentFn<P>`              |
 
 ## Patterns
 
@@ -136,9 +136,7 @@ const meta = {
   component: Button,
   decorators: [
     (storyFn, context) => (
-      <div style="padding: 20px; background: #f5f5f5;">
-        {storyFn(context.args, context)}
-      </div>
+      <div style="padding: 20px; background: #f5f5f5;">{storyFn(context.args, context)}</div>
     ),
   ],
 } satisfies Meta<typeof Button>
@@ -150,10 +148,10 @@ Use the `play` function for automated interaction testing.
 
 ```ts
 export const Clickable: Story = {
-  args: { label: "Click me" },
+  args: { label: 'Click me' },
   play: async ({ canvasElement, step }) => {
-    await step("click the button", async () => {
-      const button = canvasElement.querySelector("button")!
+    await step('click the button', async () => {
+      const button = canvasElement.querySelector('button')!
       button.click()
     })
   },
@@ -165,7 +163,7 @@ export const Clickable: Story = {
 Use signals directly in stories to demonstrate interactive behavior.
 
 ```tsx
-import { signal, effect } from "@pyreon/storybook"
+import { signal, effect } from '@pyreon/storybook'
 
 export const Interactive: Story = {
   render: (args) => {
@@ -173,7 +171,7 @@ export const Interactive: Story = {
     return (
       <div>
         <p>{() => `Count: ${count()}`}</p>
-        <button onClick={() => count.update(n => n + 1)}>Increment</button>
+        <button onClick={() => count.update((n) => n + 1)}>Increment</button>
       </div>
     )
   },

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["mount"],"sources":["../src/render-impl.tsx"],"sourcesContent":["import type { ComponentFn, VNodeChild } from \"@pyreon/core\"\nimport { mount } from \"@pyreon/runtime-dom\"\n\n/**\n * State tracked per canvas element so we can clean up between renders.\n */\nconst canvasState = new WeakMap<HTMLElement, () => void>()\n\n/**\n * Render a Pyreon story into a Storybook canvas element.\n *\n * This is the core integration point — Storybook calls this function\n * every time a story needs to be displayed or re-rendered (e.g. when\n * the user changes args via the Controls panel).\n *\n * It handles:\n * 1. Cleaning up the previous mount (disposing effects, removing DOM)\n * 2. Building the VNode from the story function or component + args\n * 3. Mounting the new VNode into the canvas\n */\nexport function renderToCanvas(\n  {\n    storyFn,\n    showMain,\n    showError,\n  }: {\n    storyFn: () => VNodeChild\n    storyContext: {\n      component?: ComponentFn<any>\n      args: Record<string, unknown>\n      [key: string]: unknown\n    }\n    showMain: () => void\n    showError: (error: { title: string; description: string }) => void\n    forceRemount: boolean\n  },\n  canvasElement: HTMLElement,\n): void {\n  // Always clean up the previous render\n  const prevUnmount = canvasState.get(canvasElement)\n  if (prevUnmount) {\n    prevUnmount()\n    canvasState.delete(canvasElement)\n  }\n\n  try {\n    const element = storyFn()\n    const unmount = mount(element, canvasElement)\n    canvasState.set(canvasElement, unmount)\n    showMain()\n  } catch (err) {\n    const error = err instanceof Error ? err : new Error(String(err))\n    showError({\n      title: `Error rendering story`,\n      description: error.message,\n    })\n  }\n}\n\n/**\n * Default render implementation used when no custom `render` is provided.\n */\nexport function defaultRender(\n  component: ComponentFn<any>,\n  args: Record<string, unknown>,\n): VNodeChild {\n  const Component = component\n  return <Component {...args} />\n}\n"],"mappings":";;;;;;;;;AAMA,MAAM,8BAAc,IAAI,SAAkC;;;;;;;;;;;;;AAc1D,SAAgB,eACd,EACE,SACA,UACA,aAYF,eACM;CAEN,MAAM,cAAc,YAAY,IAAI,cAAc;AAClD,KAAI,aAAa;AACf,eAAa;AACb,cAAY,OAAO,cAAc;;AAGnC,KAAI;EAEF,MAAM,UAAUA,QADA,SAAS,EACM,cAAc;AAC7C,cAAY,IAAI,eAAe,QAAQ;AACvC,YAAU;UACH,KAAK;AAEZ,YAAU;GACR,OAAO;GACP,cAHY,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,EAG5C;GACpB,CAAC;;;;;;AAON,SAAgB,cACd,WACA,MACY;AAEZ,QAAO,oBADW,WACX,EAAW,GAAI,MAAQ"}
+{"version":3,"file":"index.js","names":["mount"],"sources":["../src/render-impl.tsx"],"sourcesContent":["import type { ComponentFn, VNodeChild } from '@pyreon/core'\nimport { mount } from '@pyreon/runtime-dom'\n\n/**\n * State tracked per canvas element so we can clean up between renders.\n */\nconst canvasState = new WeakMap<HTMLElement, () => void>()\n\n/**\n * Render a Pyreon story into a Storybook canvas element.\n *\n * This is the core integration point — Storybook calls this function\n * every time a story needs to be displayed or re-rendered (e.g. when\n * the user changes args via the Controls panel).\n *\n * It handles:\n * 1. Cleaning up the previous mount (disposing effects, removing DOM)\n * 2. Building the VNode from the story function or component + args\n * 3. Mounting the new VNode into the canvas\n */\nexport function renderToCanvas(\n  {\n    storyFn,\n    showMain,\n    showError,\n  }: {\n    storyFn: () => VNodeChild\n    storyContext: {\n      component?: ComponentFn<any>\n      args: Record<string, unknown>\n      [key: string]: unknown\n    }\n    showMain: () => void\n    showError: (error: { title: string; description: string }) => void\n    forceRemount: boolean\n  },\n  canvasElement: HTMLElement,\n): void {\n  // Always clean up the previous render\n  const prevUnmount = canvasState.get(canvasElement)\n  if (prevUnmount) {\n    prevUnmount()\n    canvasState.delete(canvasElement)\n  }\n\n  try {\n    const element = storyFn()\n    const unmount = mount(element, canvasElement)\n    canvasState.set(canvasElement, unmount)\n    showMain()\n  } catch (err) {\n    const error = err instanceof Error ? err : new Error(String(err))\n    showError({\n      title: `Error rendering story`,\n      description: error.message,\n    })\n  }\n}\n\n/**\n * Default render implementation used when no custom `render` is provided.\n */\nexport function defaultRender(\n  component: ComponentFn<any>,\n  args: Record<string, unknown>,\n): VNodeChild {\n  const Component = component\n  return <Component {...args} />\n}\n"],"mappings":";;;;;;;;;AAMA,MAAM,8BAAc,IAAI,SAAkC;;;;;;;;;;;;;AAc1D,SAAgB,eACd,EACE,SACA,UACA,aAYF,eACM;CAEN,MAAM,cAAc,YAAY,IAAI,cAAc;AAClD,KAAI,aAAa;AACf,eAAa;AACb,cAAY,OAAO,cAAc;;AAGnC,KAAI;EAEF,MAAM,UAAUA,QADA,SAAS,EACM,cAAc;AAC7C,cAAY,IAAI,eAAe,QAAQ;AACvC,YAAU;UACH,KAAK;AAEZ,YAAU;GACR,OAAO;GACP,cAHY,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,EAG5C;GACpB,CAAC;;;;;;AAON,SAAgB,cACd,WACA,MACY;AAEZ,QAAO,oBADW,WACX,EAAW,GAAI,MAAQ"}

package/lib/preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"preset.js","names":[],"sources":["../src/preset.ts"],"sourcesContent":["/**\n * Storybook preset for @pyreon/storybook.\n *\n * This file is loaded by Storybook's server when the user sets\n * `framework: \"@pyreon/storybook\"` in their `.storybook/main.ts`.\n *\n * It tells Storybook:\n * - Which renderer to use (via the preview entry)\n * - What framework name to report\n */\n\nimport { dirname, join } from \"node:path\"\n\nfunction _getAbsolutePath(value: string): string {\n  return dirname(require.resolve(join(value, \"package.json\")))\n}\n\nexport const addons: string[] = []\n\nexport const previewAnnotations: string[] = [join(__dirname, \"preview\")]\n\nexport const core = {\n  renderer: \"@pyreon/storybook\",\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,SAAmB,EAAE;AAElC,MAAa,qBAA+B,CAAC,KAAK,WAAW,UAAU,CAAC;AAExE,MAAa,OAAO,EAClB,UAAU,qBACX"}
+{"version":3,"file":"preset.js","names":[],"sources":["../src/preset.ts"],"sourcesContent":["/**\n * Storybook preset for @pyreon/storybook.\n *\n * This file is loaded by Storybook's server when the user sets\n * `framework: \"@pyreon/storybook\"` in their `.storybook/main.ts`.\n *\n * It tells Storybook:\n * - Which renderer to use (via the preview entry)\n * - What framework name to report\n */\n\nimport { dirname, join } from 'node:path'\n\nfunction _getAbsolutePath(value: string): string {\n  return dirname(require.resolve(join(value, 'package.json')))\n}\n\nexport const addons: string[] = []\n\nexport const previewAnnotations: string[] = [join(__dirname, 'preview')]\n\nexport const core = {\n  renderer: '@pyreon/storybook',\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,SAAmB,EAAE;AAElC,MAAa,qBAA+B,CAAC,KAAK,WAAW,UAAU,CAAC;AAExE,MAAa,OAAO,EAClB,UAAU,qBACX"}

package/lib/preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview.js","names":[],"sources":["../src/render-impl.tsx","../src/preview-impl.tsx"],"sourcesContent":["import type { ComponentFn, VNodeChild } from \"@pyreon/core\"\nimport { mount } from \"@pyreon/runtime-dom\"\n\n/**\n * State tracked per canvas element so we can clean up between renders.\n */\nconst canvasState = new WeakMap<HTMLElement, () => void>()\n\n/**\n * Render a Pyreon story into a Storybook canvas element.\n *\n * This is the core integration point — Storybook calls this function\n * every time a story needs to be displayed or re-rendered (e.g. when\n * the user changes args via the Controls panel).\n *\n * It handles:\n * 1. Cleaning up the previous mount (disposing effects, removing DOM)\n * 2. Building the VNode from the story function or component + args\n * 3. Mounting the new VNode into the canvas\n */\nexport function renderToCanvas(\n  {\n    storyFn,\n    showMain,\n    showError,\n  }: {\n    storyFn: () => VNodeChild\n    storyContext: {\n      component?: ComponentFn<any>\n      args: Record<string, unknown>\n      [key: string]: unknown\n    }\n    showMain: () => void\n    showError: (error: { title: string; description: string }) => void\n    forceRemount: boolean\n  },\n  canvasElement: HTMLElement,\n): void {\n  // Always clean up the previous render\n  const prevUnmount = canvasState.get(canvasElement)\n  if (prevUnmount) {\n    prevUnmount()\n    canvasState.delete(canvasElement)\n  }\n\n  try {\n    const element = storyFn()\n    const unmount = mount(element, canvasElement)\n    canvasState.set(canvasElement, unmount)\n    showMain()\n  } catch (err) {\n    const error = err instanceof Error ? err : new Error(String(err))\n    showError({\n      title: `Error rendering story`,\n      description: error.message,\n    })\n  }\n}\n\n/**\n * Default render implementation used when no custom `render` is provided.\n */\nexport function defaultRender(\n  component: ComponentFn<any>,\n  args: Record<string, unknown>,\n): VNodeChild {\n  const Component = component\n  return <Component {...args} />\n}\n","import type { ComponentFn, VNodeChild } from \"@pyreon/core\"\nimport { renderToCanvas } from \"./render-impl\"\n\n/**\n * Preview entry — Storybook loads this in the preview iframe.\n *\n * Exports the render function and default decorators/parameters\n * that apply to all stories using this renderer.\n */\n\nexport { renderToCanvas }\n\n/**\n * Default render function — if the story CSF has a `component` but no\n * explicit `render`, this is used to create the VNode.\n */\nexport function render<TArgs extends Record<string, unknown>>(\n  args: TArgs,\n  context: { component?: ComponentFn<any> },\n): VNodeChild {\n  const Component = context.component\n  if (!Component) {\n    throw new Error(\n      \"[@pyreon/storybook] No component provided. Either set `component` in your meta or provide a `render` function.\",\n    )\n  }\n  return <Component {...args} />\n}\n"],"mappings":";;;;;;;AAMA,MAAM,8BAAc,IAAI,SAAkC;;;;;;;;;;;;;AAc1D,SAAgB,eACd,EACE,SACA,UACA,aAYF,eACM;CAEN,MAAM,cAAc,YAAY,IAAI,cAAc;AAClD,KAAI,aAAa;AACf,eAAa;AACb,cAAY,OAAO,cAAc;;AAGnC,KAAI;EAEF,MAAM,UAAU,MADA,SAAS,EACM,cAAc;AAC7C,cAAY,IAAI,eAAe,QAAQ;AACvC,YAAU;UACH,KAAK;AAEZ,YAAU;GACR,OAAO;GACP,cAHY,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,EAG5C;GACpB,CAAC;;;;;;;;;;ACvCN,SAAgB,OACd,MACA,SACY;CACZ,MAAM,YAAY,QAAQ;AAC1B,KAAI,CAAC,UACH,OAAM,IAAI,MACR,iHACD;AAEH,QAAO,oBAAC,WAAD,EAAW,GAAI,MAAQ"}
+{"version":3,"file":"preview.js","names":[],"sources":["../src/render-impl.tsx","../src/preview-impl.tsx"],"sourcesContent":["import type { ComponentFn, VNodeChild } from '@pyreon/core'\nimport { mount } from '@pyreon/runtime-dom'\n\n/**\n * State tracked per canvas element so we can clean up between renders.\n */\nconst canvasState = new WeakMap<HTMLElement, () => void>()\n\n/**\n * Render a Pyreon story into a Storybook canvas element.\n *\n * This is the core integration point — Storybook calls this function\n * every time a story needs to be displayed or re-rendered (e.g. when\n * the user changes args via the Controls panel).\n *\n * It handles:\n * 1. Cleaning up the previous mount (disposing effects, removing DOM)\n * 2. Building the VNode from the story function or component + args\n * 3. Mounting the new VNode into the canvas\n */\nexport function renderToCanvas(\n  {\n    storyFn,\n    showMain,\n    showError,\n  }: {\n    storyFn: () => VNodeChild\n    storyContext: {\n      component?: ComponentFn<any>\n      args: Record<string, unknown>\n      [key: string]: unknown\n    }\n    showMain: () => void\n    showError: (error: { title: string; description: string }) => void\n    forceRemount: boolean\n  },\n  canvasElement: HTMLElement,\n): void {\n  // Always clean up the previous render\n  const prevUnmount = canvasState.get(canvasElement)\n  if (prevUnmount) {\n    prevUnmount()\n    canvasState.delete(canvasElement)\n  }\n\n  try {\n    const element = storyFn()\n    const unmount = mount(element, canvasElement)\n    canvasState.set(canvasElement, unmount)\n    showMain()\n  } catch (err) {\n    const error = err instanceof Error ? err : new Error(String(err))\n    showError({\n      title: `Error rendering story`,\n      description: error.message,\n    })\n  }\n}\n\n/**\n * Default render implementation used when no custom `render` is provided.\n */\nexport function defaultRender(\n  component: ComponentFn<any>,\n  args: Record<string, unknown>,\n): VNodeChild {\n  const Component = component\n  return <Component {...args} />\n}\n","import type { ComponentFn, VNodeChild } from '@pyreon/core'\nimport { renderToCanvas } from './render-impl'\n\n/**\n * Preview entry — Storybook loads this in the preview iframe.\n *\n * Exports the render function and default decorators/parameters\n * that apply to all stories using this renderer.\n */\n\nexport { renderToCanvas }\n\n/**\n * Default render function — if the story CSF has a `component` but no\n * explicit `render`, this is used to create the VNode.\n */\nexport function render<TArgs extends Record<string, unknown>>(\n  args: TArgs,\n  context: { component?: ComponentFn<any> },\n): VNodeChild {\n  const Component = context.component\n  if (!Component) {\n    throw new Error(\n      '[@pyreon/storybook] No component provided. Either set `component` in your meta or provide a `render` function.',\n    )\n  }\n  return <Component {...args} />\n}\n"],"mappings":";;;;;;;AAMA,MAAM,8BAAc,IAAI,SAAkC;;;;;;;;;;;;;AAc1D,SAAgB,eACd,EACE,SACA,UACA,aAYF,eACM;CAEN,MAAM,cAAc,YAAY,IAAI,cAAc;AAClD,KAAI,aAAa;AACf,eAAa;AACb,cAAY,OAAO,cAAc;;AAGnC,KAAI;EAEF,MAAM,UAAU,MADA,SAAS,EACM,cAAc;AAC7C,cAAY,IAAI,eAAe,QAAQ;AACvC,YAAU;UACH,KAAK;AAEZ,YAAU;GACR,OAAO;GACP,cAHY,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,EAG5C;GACpB,CAAC;;;;;;;;;;ACvCN,SAAgB,OACd,MACA,SACY;CACZ,MAAM,YAAY,QAAQ;AAC1B,KAAI,CAAC,UACH,OAAM,IAAI,MACR,iHACD;AAEH,QAAO,oBAAC,WAAD,EAAW,GAAI,MAAQ"}

package/lib/types/index.d.ts

@@ -21,7 +21,7 @@ interface StoryContext<TArgs = Props$1> {
   id: string;
   kind: string;
   name: string;
-  viewMode: "story" | "docs";
+  viewMode: 'story' | 'docs';
 }
 type StoryFn<TArgs = Props$1> = (args: TArgs, context: StoryContext<TArgs>) => VNodeChild$1;
 type DecoratorFn<TArgs = Props$1> = (storyFn: StoryFn<TArgs>, context: StoryContext<TArgs>) => VNodeChild$1;

package/package.json

@@ -1,20 +1,17 @@
 {
   "name": "@pyreon/storybook",
-  "version": "0.11.5",
+  "version": "0.11.7",
   "description": "Storybook renderer for Pyreon — mount, render, and interact with Pyreon components in Storybook",
+  "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/storybook#readme",
+  "bugs": {
+    "url": "https://github.com/pyreon/pyreon/issues"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon.git",
     "directory": "packages/tools/storybook"
   },
-  "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/storybook#readme",
-  "bugs": {
-    "url": "https://github.com/pyreon/pyreon/issues"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
   "files": [
     "lib",
     "src",
@@ -44,17 +41,20 @@
     },
     "./package.json": "./package.json"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "vl_rolldown_build",
     "dev": "vl_rolldown_build-watch",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
-    "lint": "biome check ."
+    "lint": "oxlint ."
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.5",
-    "@pyreon/reactivity": "^0.11.5",
-    "@pyreon/runtime-dom": "^0.11.5",
+    "@pyreon/core": "^0.11.7",
+    "@pyreon/reactivity": "^0.11.7",
+    "@pyreon/runtime-dom": "^0.11.7",
     "storybook": ">=8.0.0"
   }
 }

package/src/index.ts

@@ -31,15 +31,15 @@ export type {
   StoryContext,
   StoryFn,
   StoryObj,
-} from "./types"
+} from './types'
 
 // ─── Renderer ────────────────────────────────────────────────────────────────
 
-export { defaultRender, renderToCanvas } from "./render"
+export { defaultRender, renderToCanvas } from './render'
 
 // ─── Pyreon re-exports for convenience ───────────────────────────────────────
 
-export type { ComponentFn, Props, VNode, VNodeChild } from "@pyreon/core"
-export { Fragment, h } from "@pyreon/core"
-export { computed, effect, signal } from "@pyreon/reactivity"
-export { mount } from "@pyreon/runtime-dom"
+export type { ComponentFn, Props, VNode, VNodeChild } from '@pyreon/core'
+export { Fragment, h } from '@pyreon/core'
+export { computed, effect, signal } from '@pyreon/reactivity'
+export { mount } from '@pyreon/runtime-dom'

package/src/preset.ts

@@ -9,16 +9,16 @@
  * - What framework name to report
  */
 
-import { dirname, join } from "node:path"
+import { dirname, join } from 'node:path'
 
 function _getAbsolutePath(value: string): string {
-  return dirname(require.resolve(join(value, "package.json")))
+  return dirname(require.resolve(join(value, 'package.json')))
 }
 
 export const addons: string[] = []
 
-export const previewAnnotations: string[] = [join(__dirname, "preview")]
+export const previewAnnotations: string[] = [join(__dirname, 'preview')]
 
 export const core = {
-  renderer: "@pyreon/storybook",
+  renderer: '@pyreon/storybook',
 }

package/src/preview-impl.tsx

@@ -1,5 +1,5 @@
-import type { ComponentFn, VNodeChild } from "@pyreon/core"
-import { renderToCanvas } from "./render-impl"
+import type { ComponentFn, VNodeChild } from '@pyreon/core'
+import { renderToCanvas } from './render-impl'
 
 /**
  * Preview entry — Storybook loads this in the preview iframe.
@@ -21,7 +21,7 @@ export function render<TArgs extends Record<string, unknown>>(
   const Component = context.component
   if (!Component) {
     throw new Error(
-      "[@pyreon/storybook] No component provided. Either set `component` in your meta or provide a `render` function.",
+      '[@pyreon/storybook] No component provided. Either set `component` in your meta or provide a `render` function.',
     )
   }
   return <Component {...args} />

package/src/preview.ts

@@ -1 +1 @@
-export { render, renderToCanvas } from "./preview-impl"
+export { render, renderToCanvas } from './preview-impl'

package/src/render-impl.tsx

@@ -1,5 +1,5 @@
-import type { ComponentFn, VNodeChild } from "@pyreon/core"
-import { mount } from "@pyreon/runtime-dom"
+import type { ComponentFn, VNodeChild } from '@pyreon/core'
+import { mount } from '@pyreon/runtime-dom'
 
 /**
  * State tracked per canvas element so we can clean up between renders.

package/src/render.ts

@@ -1 +1 @@
-export { defaultRender, renderToCanvas } from "./render-impl"
+export { defaultRender, renderToCanvas } from './render-impl'

package/src/tests/storybook.test.tsx

@@ -1,14 +1,14 @@
-import type { ComponentFn, VNodeChild } from "@pyreon/core"
-import { effect, signal } from "@pyreon/reactivity"
-import { mount } from "@pyreon/runtime-dom"
-import { render as previewRender } from "../preview"
-import { defaultRender, renderToCanvas } from "../render"
-import type { DecoratorFn, Meta, StoryContext, StoryFn, StoryObj } from "../types"
+import type { ComponentFn, VNodeChild } from '@pyreon/core'
+import { effect, signal } from '@pyreon/reactivity'
+import { mount } from '@pyreon/runtime-dom'
+import { render as previewRender } from '../preview'
+import { defaultRender, renderToCanvas } from '../render'
+import type { DecoratorFn, Meta, StoryContext, StoryFn, StoryObj } from '../types'
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
 function createCanvas(): HTMLElement {
-  const el = document.createElement("div")
+  const el = document.createElement('div')
   document.body.appendChild(el)
   return el
 }
@@ -36,8 +36,8 @@ function makeRenderContext(overrides: {
 
 // ─── renderToCanvas ──────────────────────────────────────────────────────────
 
-describe("renderToCanvas", () => {
-  it("mounts a simple VNode into the canvas", () => {
+describe('renderToCanvas', () => {
+  it('mounts a simple VNode into the canvas', () => {
     const canvas = createCanvas()
     const ctx = makeRenderContext({
       storyFn: () => <button>Click me</button>,
@@ -45,12 +45,12 @@ describe("renderToCanvas", () => {
 
     renderToCanvas(ctx, canvas)
 
-    expect(canvas.innerHTML).toContain("Click me")
-    expect(canvas.querySelector("button")).toBeTruthy()
+    expect(canvas.innerHTML).toContain('Click me')
+    expect(canvas.querySelector('button')).toBeTruthy()
     canvas.remove()
   })
 
-  it("mounts a Pyreon component with props", () => {
+  it('mounts a Pyreon component with props', () => {
     function Button(props: { label: string; disabled?: boolean }) {
       return <button disabled={props.disabled ?? false}>{props.label}</button>
     }
@@ -62,27 +62,27 @@ describe("renderToCanvas", () => {
 
     renderToCanvas(ctx, canvas)
 
-    const btn = canvas.querySelector("button")!
+    const btn = canvas.querySelector('button')!
     expect(btn).toBeTruthy()
-    expect(btn.textContent).toBe("Submit")
-    expect(btn.getAttribute("disabled")).not.toBeNull()
+    expect(btn.textContent).toBe('Submit')
+    expect(btn.getAttribute('disabled')).not.toBeNull()
     canvas.remove()
   })
 
-  it("cleans up previous mount on re-render", () => {
+  it('cleans up previous mount on re-render', () => {
     const canvas = createCanvas()
 
     renderToCanvas(makeRenderContext({ storyFn: () => <div>First</div> }), canvas)
-    expect(canvas.textContent).toBe("First")
+    expect(canvas.textContent).toBe('First')
 
     renderToCanvas(makeRenderContext({ storyFn: () => <div>Second</div> }), canvas)
-    expect(canvas.textContent).toBe("Second")
+    expect(canvas.textContent).toBe('Second')
     // Only one child — previous mount was cleaned up
     expect(canvas.children.length).toBe(1)
     canvas.remove()
   })
 
-  it("disposes reactive effects on cleanup", () => {
+  it('disposes reactive effects on cleanup', () => {
     const canvas = createCanvas()
     let effectRunCount = 0
 
@@ -112,13 +112,13 @@ describe("renderToCanvas", () => {
     canvas.remove()
   })
 
-  it("shows error when storyFn throws an Error", () => {
+  it('shows error when storyFn throws an Error', () => {
     const canvas = createCanvas()
     let errorShown: { title: string; description: string } | null = null
 
     const ctx = {
       storyFn: () => {
-        throw new Error("Boom")
+        throw new Error('Boom')
       },
       storyContext: { args: {} },
       showMain: () => {
@@ -133,17 +133,17 @@ describe("renderToCanvas", () => {
     renderToCanvas(ctx, canvas)
 
     expect(errorShown).not.toBeNull()
-    expect(errorShown!.description).toBe("Boom")
+    expect(errorShown!.description).toBe('Boom')
     canvas.remove()
   })
 
-  it("shows error when storyFn throws a non-Error value", () => {
+  it('shows error when storyFn throws a non-Error value', () => {
     const canvas = createCanvas()
     let errorShown: { title: string; description: string } | null = null
 
     const ctx = {
       storyFn: () => {
-        throw "string error"
+        throw 'string error'
       },
       storyContext: { args: {} },
       showMain: () => {
@@ -158,11 +158,11 @@ describe("renderToCanvas", () => {
     renderToCanvas(ctx, canvas)
 
     expect(errorShown).not.toBeNull()
-    expect(errorShown!.description).toBe("string error")
+    expect(errorShown!.description).toBe('string error')
     canvas.remove()
   })
 
-  it("renders reactive components that update the DOM", () => {
+  it('renders reactive components that update the DOM', () => {
     const canvas = createCanvas()
     const count = signal(0)
 
@@ -172,27 +172,27 @@ describe("renderToCanvas", () => {
 
     renderToCanvas(makeRenderContext({ storyFn: () => <Counter /> }), canvas)
 
-    expect(canvas.textContent).toBe("Count: 0")
+    expect(canvas.textContent).toBe('Count: 0')
 
     count.set(5)
-    expect(canvas.textContent).toBe("Count: 5")
+    expect(canvas.textContent).toBe('Count: 5')
     canvas.remove()
   })
 })
 
 // ─── defaultRender ───────────────────────────────────────────────────────────
 
-describe("defaultRender", () => {
-  it("creates a VNode from component + args", () => {
+describe('defaultRender', () => {
+  it('creates a VNode from component + args', () => {
     function Greeting(props: { name: string }) {
       return <p>Hello, {props.name}!</p>
     }
 
     const canvas = createCanvas()
-    const vnode = defaultRender(Greeting, { name: "World" })
+    const vnode = defaultRender(Greeting, { name: 'World' })
     const unmount = mount(vnode, canvas)
 
-    expect(canvas.textContent).toBe("Hello, World!")
+    expect(canvas.textContent).toBe('Hello, World!')
     unmount()
     canvas.remove()
   })
@@ -200,9 +200,9 @@ describe("defaultRender", () => {
 
 // ─── Type-level tests (Meta / StoryObj) ──────────────────────────────────────
 
-describe("Meta and StoryObj types", () => {
-  it("Meta accepts a component and typed args", () => {
-    function Button(props: { label: string; variant?: "primary" | "secondary" }) {
+describe('Meta and StoryObj types', () => {
+  it('Meta accepts a component and typed args', () => {
+    function Button(props: { label: string; variant?: 'primary' | 'secondary' }) {
       return (
         <button type="button" class={props.variant}>
           {props.label}
@@ -212,23 +212,23 @@ describe("Meta and StoryObj types", () => {
 
     const meta = {
       component: Button,
-      title: "Button",
-      args: { label: "Click", variant: "primary" as const },
-      tags: ["autodocs"],
+      title: 'Button',
+      args: { label: 'Click', variant: 'primary' as const },
+      tags: ['autodocs'],
     } satisfies Meta<typeof Button>
 
     expect(meta.component).toBe(Button)
-    expect(meta.args!.label).toBe("Click")
+    expect(meta.args!.label).toBe('Click')
   })
 
-  it("StoryObj inherits args from Meta", () => {
+  it('StoryObj inherits args from Meta', () => {
     function Input(props: { placeholder: string; disabled?: boolean }) {
       return <input placeholder={props.placeholder} disabled={props.disabled} />
     }
 
     const _meta = {
       component: Input,
-      args: { placeholder: "Type here" },
+      args: { placeholder: 'Type here' },
     } satisfies Meta<typeof Input>
 
     type Story = StoryObj<typeof _meta>
@@ -240,7 +240,7 @@ describe("Meta and StoryObj types", () => {
     expect(primary.args!.disabled).toBe(true)
   })
 
-  it("StoryObj supports custom render function", () => {
+  it('StoryObj supports custom render function', () => {
     function Card(props: { title: string }) {
       return (
         <div class="card">
@@ -251,7 +251,7 @@ describe("Meta and StoryObj types", () => {
 
     const _meta = {
       component: Card,
-      args: { title: "Default" },
+      args: { title: 'Default' },
     } satisfies Meta<typeof Card>
 
     type Story = StoryObj<typeof _meta>
@@ -265,12 +265,12 @@ describe("Meta and StoryObj types", () => {
     }
 
     const canvas = createCanvas()
-    const vnode = withWrapper.render!({ title: "Custom" }, {} as any)
+    const vnode = withWrapper.render!({ title: 'Custom' }, {} as any)
     const unmount = mount(vnode, canvas)
 
-    expect(canvas.querySelector(".wrapper")).toBeTruthy()
-    expect(canvas.querySelector(".card")).toBeTruthy()
-    expect(canvas.textContent).toBe("Custom")
+    expect(canvas.querySelector('.wrapper')).toBeTruthy()
+    expect(canvas.querySelector('.card')).toBeTruthy()
+    expect(canvas.textContent).toBe('Custom')
     unmount()
     canvas.remove()
   })
@@ -278,8 +278,8 @@ describe("Meta and StoryObj types", () => {
 
 // ─── Decorators ──────────────────────────────────────────────────────────────
 
-describe("Decorators", () => {
-  it("decorator wraps a story", () => {
+describe('Decorators', () => {
+  it('decorator wraps a story', () => {
     function Button(props: { label: string }) {
       return <button>{props.label}</button>
     }
@@ -290,23 +290,23 @@ describe("Decorators", () => {
 
     const canvas = createCanvas()
     const storyResult = withPadding((args) => <Button {...args} />, {
-      args: { label: "Wrapped" },
+      args: { label: 'Wrapped' },
       argTypes: {},
       globals: {},
-      id: "1",
-      kind: "Button",
-      name: "Primary",
-      viewMode: "story",
+      id: '1',
+      kind: 'Button',
+      name: 'Primary',
+      viewMode: 'story',
     })
 
     const unmount = mount(storyResult, canvas)
-    expect(canvas.querySelector("div[style]")).toBeTruthy()
-    expect(canvas.querySelector("button")!.textContent).toBe("Wrapped")
+    expect(canvas.querySelector('div[style]')).toBeTruthy()
+    expect(canvas.querySelector('button')!.textContent).toBe('Wrapped')
     unmount()
     canvas.remove()
   })
 
-  it("multiple decorators compose correctly", () => {
+  it('multiple decorators compose correctly', () => {
     function Text(props: { content: string }) {
       return <span>{props.content}</span>
     }
@@ -320,13 +320,13 @@ describe("Decorators", () => {
     )
 
     const context: StoryContext<{ content: string }> = {
-      args: { content: "Hello" },
+      args: { content: 'Hello' },
       argTypes: {},
       globals: {},
-      id: "1",
-      kind: "Text",
-      name: "Default",
-      viewMode: "story",
+      id: '1',
+      kind: 'Text',
+      name: 'Default',
+      viewMode: 'story',
     }
 
     // Compose: withTheme(withBorder(story))
@@ -335,9 +335,9 @@ describe("Decorators", () => {
 
     const canvas = createCanvas()
     const unmount = mount(decorated, canvas)
-    expect(canvas.querySelector(".theme-dark")).toBeTruthy()
-    expect(canvas.querySelector(".border")).toBeTruthy()
-    expect(canvas.querySelector("span")!.textContent).toBe("Hello")
+    expect(canvas.querySelector('.theme-dark')).toBeTruthy()
+    expect(canvas.querySelector('.border')).toBeTruthy()
+    expect(canvas.querySelector('span')!.textContent).toBe('Hello')
     unmount()
     canvas.remove()
   })
@@ -345,8 +345,8 @@ describe("Decorators", () => {
 
 // ─── Fragment and multiple children ──────────────────────────────────────────
 
-describe("Fragment stories", () => {
-  it("renders a story returning a Fragment", () => {
+describe('Fragment stories', () => {
+  it('renders a story returning a Fragment', () => {
     const canvas = createCanvas()
     renderToCanvas(
       makeRenderContext({
@@ -360,48 +360,48 @@ describe("Fragment stories", () => {
       canvas,
     )
 
-    const paragraphs = canvas.querySelectorAll("p")
+    const paragraphs = canvas.querySelectorAll('p')
     expect(paragraphs.length).toBe(2)
-    expect(paragraphs[0]!.textContent).toBe("Line 1")
-    expect(paragraphs[1]!.textContent).toBe("Line 2")
+    expect(paragraphs[0]!.textContent).toBe('Line 1')
+    expect(paragraphs[1]!.textContent).toBe('Line 2')
     canvas.remove()
   })
 })
 
 // ─── Preview render function ─────────────────────────────────────────────────
 
-describe("preview render", () => {
-  it("renders a component with args", () => {
+describe('preview render', () => {
+  it('renders a component with args', () => {
     function Badge(props: { text: string }) {
       return <span class="badge">{props.text}</span>
     }
 
     const canvas = createCanvas()
-    const vnode = previewRender({ text: "New" }, { component: Badge })
+    const vnode = previewRender({ text: 'New' }, { component: Badge })
     const unmount = mount(vnode, canvas)
 
-    expect(canvas.querySelector(".badge")!.textContent).toBe("New")
+    expect(canvas.querySelector('.badge')!.textContent).toBe('New')
     unmount()
     canvas.remove()
   })
 
-  it("throws when no component is provided", () => {
-    expect(() => previewRender({ foo: "bar" }, {})).toThrow(
-      "[@pyreon/storybook] No component provided",
+  it('throws when no component is provided', () => {
+    expect(() => previewRender({ foo: 'bar' }, {})).toThrow(
+      '[@pyreon/storybook] No component provided',
     )
   })
 
-  it("throws when component is undefined", () => {
-    expect(() => previewRender({ foo: "bar" }, { component: undefined } as any)).toThrow(
-      "[@pyreon/storybook] No component provided",
+  it('throws when component is undefined', () => {
+    expect(() => previewRender({ foo: 'bar' }, { component: undefined } as any)).toThrow(
+      '[@pyreon/storybook] No component provided',
     )
   })
 })
 
 // ─── Decorator wrapping ─────────────────────────────────────────────────────
 
-describe("decorator wrapping", () => {
-  it("decorator modifies the rendered VNode structure", () => {
+describe('decorator wrapping', () => {
+  it('decorator modifies the rendered VNode structure', () => {
     function Badge(props: { text: string }) {
       return <span class="badge">{props.text}</span>
     }
@@ -417,21 +417,21 @@ describe("decorator wrapping", () => {
 
     const canvas = createCanvas()
     const context: StoryContext<{ text: string }> = {
-      args: { text: "Info" },
+      args: { text: 'Info' },
       argTypes: {},
       globals: {},
-      id: "1",
-      kind: "Badge",
-      name: "Default",
-      viewMode: "story",
+      id: '1',
+      kind: 'Badge',
+      name: 'Default',
+      viewMode: 'story',
     }
 
     const decorated = withCard((args) => <Badge {...args} />, context)
     const unmount = mount(decorated, canvas)
 
-    expect(canvas.querySelector(".card")).toBeTruthy()
-    expect(canvas.querySelector("h3")!.textContent).toBe("Decorated")
-    expect(canvas.querySelector(".badge")!.textContent).toBe("Info")
+    expect(canvas.querySelector('.card')).toBeTruthy()
+    expect(canvas.querySelector('h3')!.textContent).toBe('Decorated')
+    expect(canvas.querySelector('.badge')!.textContent).toBe('Info')
     unmount()
     canvas.remove()
   })
@@ -439,8 +439,8 @@ describe("decorator wrapping", () => {
 
 // ─── Component with no args ─────────────────────────────────────────────────
 
-describe("component with no args", () => {
-  it("renders a component without any props via renderToCanvas", () => {
+describe('component with no args', () => {
+  it('renders a component without any props via renderToCanvas', () => {
     function Logo() {
       return <img src="/logo.png" alt="Logo" />
     }
@@ -454,12 +454,12 @@ describe("component with no args", () => {
       canvas,
     )
 
-    expect(canvas.querySelector("img")).toBeTruthy()
-    expect(canvas.querySelector("img")!.getAttribute("alt")).toBe("Logo")
+    expect(canvas.querySelector('img')).toBeTruthy()
+    expect(canvas.querySelector('img')!.getAttribute('alt')).toBe('Logo')
     canvas.remove()
   })
 
-  it("renders a component with no args via defaultRender", () => {
+  it('renders a component with no args via defaultRender', () => {
     function Divider() {
       return <hr class="divider" />
     }
@@ -468,13 +468,13 @@ describe("component with no args", () => {
     const vnode = defaultRender(Divider, {})
     const unmount = mount(vnode, canvas)
 
-    expect(canvas.querySelector("hr")).toBeTruthy()
-    expect(canvas.querySelector(".divider")).toBeTruthy()
+    expect(canvas.querySelector('hr')).toBeTruthy()
+    expect(canvas.querySelector('.divider')).toBeTruthy()
     unmount()
     canvas.remove()
   })
 
-  it("preview render works with empty args", () => {
+  it('preview render works with empty args', () => {
     function Spinner() {
       return <div class="spinner">Loading...</div>
     }
@@ -483,7 +483,7 @@ describe("component with no args", () => {
     const vnode = previewRender({}, { component: Spinner })
     const unmount = mount(vnode, canvas)
 
-    expect(canvas.querySelector(".spinner")!.textContent).toBe("Loading...")
+    expect(canvas.querySelector('.spinner')!.textContent).toBe('Loading...')
     unmount()
     canvas.remove()
   })
@@ -491,15 +491,15 @@ describe("component with no args", () => {
 
 // ─── Error handling ──────────────────────────────────────────────────────────
 
-describe("error handling", () => {
-  it("showError is called when storyFn itself throws", () => {
+describe('error handling', () => {
+  it('showError is called when storyFn itself throws', () => {
     const canvas = createCanvas()
     let errorShown: { title: string; description: string } | null = null
 
     renderToCanvas(
       {
         storyFn: () => {
-          throw new Error("storyFn exploded")
+          throw new Error('storyFn exploded')
         },
         storyContext: { args: {} },
         showMain: () => {
@@ -514,18 +514,18 @@ describe("error handling", () => {
     )
 
     expect(errorShown).not.toBeNull()
-    expect(errorShown!.description).toBe("storyFn exploded")
+    expect(errorShown!.description).toBe('storyFn exploded')
     canvas.remove()
   })
 
-  it("showError receives string-coerced non-Error throws", () => {
+  it('showError receives string-coerced non-Error throws', () => {
     const canvas = createCanvas()
     let errorShown: { title: string; description: string } | null = null
 
     renderToCanvas(
       {
         storyFn: () => {
-          throw "raw string error"
+          throw 'raw string error'
         },
         storyContext: { args: {} },
         showMain: () => {
@@ -540,15 +540,15 @@ describe("error handling", () => {
     )
 
     expect(errorShown).not.toBeNull()
-    expect(errorShown!.description).toBe("raw string error")
+    expect(errorShown!.description).toBe('raw string error')
     canvas.remove()
   })
 
-  it("component that throws during setup is handled by the framework", () => {
+  it('component that throws during setup is handled by the framework', () => {
     const canvas = createCanvas()
 
     function Broken(): never {
-      throw new Error("Component exploded")
+      throw new Error('Component exploded')
     }
 
     // Pyreon's mount catches component setup errors internally,
@@ -578,23 +578,23 @@ describe("error handling", () => {
 
 // ─── Re-render cleanup ──────────────────────────────────────────────────────
 
-describe("re-render cleanup", () => {
-  it("calling renderToCanvas twice cleans up previous mount", () => {
+describe('re-render cleanup', () => {
+  it('calling renderToCanvas twice cleans up previous mount', () => {
     const canvas = createCanvas()
 
     renderToCanvas(makeRenderContext({ storyFn: () => <div class="first">First</div> }), canvas)
-    expect(canvas.querySelector(".first")).toBeTruthy()
+    expect(canvas.querySelector('.first')).toBeTruthy()
 
     renderToCanvas(makeRenderContext({ storyFn: () => <div class="second">Second</div> }), canvas)
 
     // Previous content should be gone
-    expect(canvas.querySelector(".first")).toBeNull()
-    expect(canvas.querySelector(".second")).toBeTruthy()
-    expect(canvas.textContent).toBe("Second")
+    expect(canvas.querySelector('.first')).toBeNull()
+    expect(canvas.querySelector('.second')).toBeTruthy()
+    expect(canvas.textContent).toBe('Second')
     canvas.remove()
   })
 
-  it("re-render disposes effects from previous story", () => {
+  it('re-render disposes effects from previous story', () => {
     const canvas = createCanvas()
     let effectCount = 0
 
@@ -624,7 +624,7 @@ describe("re-render cleanup", () => {
     canvas.remove()
   })
 
-  it("showMain is called on successful render", () => {
+  it('showMain is called on successful render', () => {
     const canvas = createCanvas()
     let mainShown = false
 
@@ -650,20 +650,20 @@ describe("re-render cleanup", () => {
 
 // ─── Missing component in context ───────────────────────────────────────────
 
-describe("missing component in context", () => {
-  it("preview render throws when context has no component", () => {
+describe('missing component in context', () => {
+  it('preview render throws when context has no component', () => {
     expect(() => previewRender({ value: 1 }, {})).toThrow(
-      "[@pyreon/storybook] No component provided",
+      '[@pyreon/storybook] No component provided',
     )
   })
 
-  it("preview render throws when context.component is null", () => {
+  it('preview render throws when context.component is null', () => {
     expect(() => previewRender({ value: 1 }, { component: null } as any)).toThrow(
-      "[@pyreon/storybook] No component provided",
+      '[@pyreon/storybook] No component provided',
     )
   })
 
-  it("renderToCanvas works without component in storyContext when storyFn is provided", () => {
+  it('renderToCanvas works without component in storyContext when storyFn is provided', () => {
     const canvas = createCanvas()
 
     renderToCanvas(
@@ -673,7 +673,7 @@ describe("missing component in context", () => {
       canvas,
     )
 
-    expect(canvas.textContent).toBe("No component needed")
+    expect(canvas.textContent).toBe('No component needed')
     canvas.remove()
   })
 })

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { ComponentFn, Props, VNodeChild } from "@pyreon/core"
+import type { ComponentFn, Props, VNodeChild } from '@pyreon/core'
 
 // ─── Storybook Renderer Interface ────────────────────────────────────────────
 
@@ -26,7 +26,7 @@ export interface StoryContext<TArgs = Props> {
   id: string
   kind: string
   name: string
-  viewMode: "story" | "docs"
+  viewMode: 'story' | 'docs'
 }
 
 export type StoryFn<TArgs = Props> = (args: TArgs, context: StoryContext<TArgs>) => VNodeChild