@pyreon/storybook 0.10.0 → 0.11.1

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"home/runner/work/fundamentals/fundamentals/node_modules/.bun/@pyreon+core@0.7.11/node_modules/@pyreon/core/lib/jsx-runtime.js","uid":"433454f0-1"},{"name":"src","children":[{"uid":"433454f0-3","name":"render-impl.tsx"},{"uid":"433454f0-5","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"433454f0-1":{"renderedLength":1641,"gzipLength":828,"brotliLength":0,"metaUid":"433454f0-0"},"433454f0-3":{"renderedLength":1280,"gzipLength":673,"brotliLength":0,"metaUid":"433454f0-2"},"433454f0-5":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"433454f0-4"}},"nodeMetas":{"433454f0-0":{"id":"/home/runner/work/fundamentals/fundamentals/node_modules/.bun/@pyreon+core@0.7.11/node_modules/@pyreon/core/lib/jsx-runtime.js","moduleParts":{"index.js":"433454f0-1"},"imported":[],"importedBy":[{"uid":"433454f0-2"}]},"433454f0-2":{"id":"/src/render-impl.tsx","moduleParts":{"index.js":"433454f0-3"},"imported":[{"uid":"433454f0-9"},{"uid":"433454f0-0"}],"importedBy":[{"uid":"433454f0-6"}]},"433454f0-4":{"id":"/src/index.ts","moduleParts":{"index.js":"433454f0-5"},"imported":[{"uid":"433454f0-6"},{"uid":"433454f0-7"},{"uid":"433454f0-8"},{"uid":"433454f0-9"}],"importedBy":[],"isEntry":true},"433454f0-6":{"id":"/src/render.ts","moduleParts":{},"imported":[{"uid":"433454f0-2"}],"importedBy":[{"uid":"433454f0-4"}]},"433454f0-7":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"433454f0-4"}]},"433454f0-8":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"433454f0-4"}]},"433454f0-9":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"433454f0-4"},{"uid":"433454f0-2"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"92260a4b-1","name":"render-impl.tsx"},{"uid":"92260a4b-3","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"92260a4b-1":{"renderedLength":1280,"gzipLength":673,"brotliLength":0,"metaUid":"92260a4b-0"},"92260a4b-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"92260a4b-2"}},"nodeMetas":{"92260a4b-0":{"id":"/src/render-impl.tsx","moduleParts":{"index.js":"92260a4b-1"},"imported":[{"uid":"92260a4b-7"},{"uid":"92260a4b-8"}],"importedBy":[{"uid":"92260a4b-4"}]},"92260a4b-2":{"id":"/src/index.ts","moduleParts":{"index.js":"92260a4b-3"},"imported":[{"uid":"92260a4b-4"},{"uid":"92260a4b-5"},{"uid":"92260a4b-6"},{"uid":"92260a4b-7"}],"importedBy":[],"isEntry":true},"92260a4b-4":{"id":"/src/render.ts","moduleParts":{},"imported":[{"uid":"92260a4b-0"}],"importedBy":[{"uid":"92260a4b-2"}]},"92260a4b-5":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"92260a4b-2"}]},"92260a4b-6":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"92260a4b-2"}]},"92260a4b-7":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"92260a4b-2"},{"uid":"92260a4b-0"}]},"92260a4b-8":{"id":"@pyreon/core/jsx-runtime","moduleParts":{},"imported":[],"importedBy":[{"uid":"92260a4b-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/analysis/preview.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"preview.js","children":[{"name":"home/runner/work/fundamentals/fundamentals/node_modules/.bun/@pyreon+core@0.7.11/node_modules/@pyreon/core/lib/jsx-runtime.js","uid":"5064bfa4-1"},{"name":"src","children":[{"uid":"5064bfa4-3","name":"render-impl.tsx"},{"uid":"5064bfa4-5","name":"preview-impl.tsx"},{"uid":"5064bfa4-7","name":"preview.ts"}]}]}],"isRoot":true},"nodeParts":{"5064bfa4-1":{"renderedLength":1635,"gzipLength":825,"brotliLength":0,"metaUid":"5064bfa4-0"},"5064bfa4-3":{"renderedLength":1100,"gzipLength":595,"brotliLength":0,"metaUid":"5064bfa4-2"},"5064bfa4-5":{"renderedLength":452,"gzipLength":313,"brotliLength":0,"metaUid":"5064bfa4-4"},"5064bfa4-7":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"5064bfa4-6"}},"nodeMetas":{"5064bfa4-0":{"id":"/home/runner/work/fundamentals/fundamentals/node_modules/.bun/@pyreon+core@0.7.11/node_modules/@pyreon/core/lib/jsx-runtime.js","moduleParts":{"preview.js":"5064bfa4-1"},"imported":[],"importedBy":[{"uid":"5064bfa4-4"},{"uid":"5064bfa4-2"}]},"5064bfa4-2":{"id":"/src/render-impl.tsx","moduleParts":{"preview.js":"5064bfa4-3"},"imported":[{"uid":"5064bfa4-8"},{"uid":"5064bfa4-0"}],"importedBy":[{"uid":"5064bfa4-4"}]},"5064bfa4-4":{"id":"/src/preview-impl.tsx","moduleParts":{"preview.js":"5064bfa4-5"},"imported":[{"uid":"5064bfa4-2"},{"uid":"5064bfa4-0"}],"importedBy":[{"uid":"5064bfa4-6"}]},"5064bfa4-6":{"id":"/src/preview.ts","moduleParts":{"preview.js":"5064bfa4-7"},"imported":[{"uid":"5064bfa4-4"}],"importedBy":[],"isEntry":true},"5064bfa4-8":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"5064bfa4-2"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"preview.js","children":[{"name":"src","children":[{"uid":"08ed9fb2-1","name":"render-impl.tsx"},{"uid":"08ed9fb2-3","name":"preview-impl.tsx"},{"uid":"08ed9fb2-5","name":"preview.ts"}]}]}],"isRoot":true},"nodeParts":{"08ed9fb2-1":{"renderedLength":1100,"gzipLength":595,"brotliLength":0,"metaUid":"08ed9fb2-0"},"08ed9fb2-3":{"renderedLength":452,"gzipLength":313,"brotliLength":0,"metaUid":"08ed9fb2-2"},"08ed9fb2-5":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"08ed9fb2-4"}},"nodeMetas":{"08ed9fb2-0":{"id":"/src/render-impl.tsx","moduleParts":{"preview.js":"08ed9fb2-1"},"imported":[{"uid":"08ed9fb2-7"},{"uid":"08ed9fb2-6"}],"importedBy":[{"uid":"08ed9fb2-2"}]},"08ed9fb2-2":{"id":"/src/preview-impl.tsx","moduleParts":{"preview.js":"08ed9fb2-3"},"imported":[{"uid":"08ed9fb2-0"},{"uid":"08ed9fb2-6"}],"importedBy":[{"uid":"08ed9fb2-4"}]},"08ed9fb2-4":{"id":"/src/preview.ts","moduleParts":{"preview.js":"08ed9fb2-5"},"imported":[{"uid":"08ed9fb2-2"}],"importedBy":[],"isEntry":true},"08ed9fb2-6":{"id":"@pyreon/core/jsx-runtime","moduleParts":{},"imported":[],"importedBy":[{"uid":"08ed9fb2-2"},{"uid":"08ed9fb2-0"}]},"08ed9fb2-7":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"08ed9fb2-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -1,56 +1,8 @@
 import { mount, mount as mount$1 } from "@pyreon/runtime-dom";
+import { jsx } from "@pyreon/core/jsx-runtime";
 import { Fragment, h } from "@pyreon/core";
 import { computed, effect, signal } from "@pyreon/reactivity";
 
-//#region ../../node_modules/.bun/@pyreon+core@0.7.11/node_modules/@pyreon/core/lib/jsx-runtime.js
-/**
-* Hyperscript function — the compiled output of JSX.
-* `<div class="x">hello</div>` → `h("div", { class: "x" }, "hello")`
-*
-* Generic on P so TypeScript validates props match the component's signature
-* at the call site, then stores the result in the loosely-typed VNode.
-*/
-/** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */
-const EMPTY_PROPS = {};
-function h$1(type, props, ...children) {
-	return {
-		type,
-		props: props ?? EMPTY_PROPS,
-		children: normalizeChildren(children),
-		key: props?.key ?? null
-	};
-}
-function normalizeChildren(children) {
-	for (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);
-	return children;
-}
-function flattenChildren(children) {
-	const result = [];
-	for (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));
-	else result.push(child);
-	return result;
-}
-/**
-* JSX automatic runtime.
-*
-* When tsconfig has `"jsxImportSource": "@pyreon/core"`, the TS/bundler compiler
-* rewrites JSX to imports from this file automatically:
-*   <div class="x" />  →  jsx("div", { class: "x" })
-*/
-function jsx(type, props, key) {
-	const { children, ...rest } = props;
-	const propsWithKey = key != null ? {
-		...rest,
-		key
-	} : rest;
-	if (typeof type === "function") return h$1(type, children !== void 0 ? {
-		...propsWithKey,
-		children
-	} : propsWithKey);
-	return h$1(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);
-}
-
-//#endregion
 //#region src/render-impl.tsx
 /**
 * State tracked per canvas element so we can clean up between renders.

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["h","mount"],"sources":["../../../node_modules/.bun/@pyreon+core@0.7.11/node_modules/@pyreon/core/lib/jsx-runtime.js","../src/render-impl.tsx"],"sourcesContent":["//#region src/h.ts\n/** Marker for fragment nodes — renders children without a wrapper element */\nconst Fragment = Symbol(\"Pyreon.Fragment\");\n/**\n* Hyperscript function — the compiled output of JSX.\n* `<div class=\"x\">hello</div>` → `h(\"div\", { class: \"x\" }, \"hello\")`\n*\n* Generic on P so TypeScript validates props match the component's signature\n* at the call site, then stores the result in the loosely-typed VNode.\n*/\n/** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */\nconst EMPTY_PROPS = {};\nfunction h(type, props, ...children) {\n\treturn {\n\t\ttype,\n\t\tprops: props ?? EMPTY_PROPS,\n\t\tchildren: normalizeChildren(children),\n\t\tkey: props?.key ?? null\n\t};\n}\nfunction normalizeChildren(children) {\n\tfor (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);\n\treturn children;\n}\nfunction flattenChildren(children) {\n\tconst result = [];\n\tfor (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));\n\telse result.push(child);\n\treturn result;\n}\n\n//#endregion\n//#region src/jsx-runtime.ts\n/**\n* JSX automatic runtime.\n*\n* When tsconfig has `\"jsxImportSource\": \"@pyreon/core\"`, the TS/bundler compiler\n* rewrites JSX to imports from this file automatically:\n*   <div class=\"x\" />  →  jsx(\"div\", { class: \"x\" })\n*/\nfunction jsx(type, props, key) {\n\tconst { children, ...rest } = props;\n\tconst propsWithKey = key != null ? {\n\t\t...rest,\n\t\tkey\n\t} : rest;\n\tif (typeof type === \"function\") return h(type, children !== void 0 ? {\n\t\t...propsWithKey,\n\t\tchildren\n\t} : propsWithKey);\n\treturn h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);\n}\nconst jsxs = jsx;\n\n//#endregion\nexport { Fragment, jsx, jsxs };\n//# sourceMappingURL=jsx-runtime.js.map","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"],"x_google_ignoreList":[0],"mappings":";;;;;;;;;;;;;AAWA,MAAM,cAAc,EAAE;AACtB,SAASA,IAAE,MAAM,OAAO,GAAG,UAAU;AACpC,QAAO;EACN;EACA,OAAO,SAAS;EAChB,UAAU,kBAAkB,SAAS;EACrC,KAAK,OAAO,OAAO;EACnB;;AAEF,SAAS,kBAAkB,UAAU;AACpC,MAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,IAAK,KAAI,MAAM,QAAQ,SAAS,GAAG,CAAE,QAAO,gBAAgB,SAAS;AAC1G,QAAO;;AAER,SAAS,gBAAgB,UAAU;CAClC,MAAM,SAAS,EAAE;AACjB,MAAK,MAAM,SAAS,SAAU,KAAI,MAAM,QAAQ,MAAM,CAAE,QAAO,KAAK,GAAG,gBAAgB,MAAM,CAAC;KACzF,QAAO,KAAK,MAAM;AACvB,QAAO;;;;;;;;;AAYR,SAAS,IAAI,MAAM,OAAO,KAAK;CAC9B,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,eAAe,OAAO,OAAO;EAClC,GAAG;EACH;EACA,GAAG;AACJ,KAAI,OAAO,SAAS,WAAY,QAAOA,IAAE,MAAM,aAAa,KAAK,IAAI;EACpE,GAAG;EACH;EACA,GAAG,aAAa;AACjB,QAAOA,IAAE,MAAM,cAAc,GAAG,aAAa,KAAK,IAAI,EAAE,GAAG,MAAM,QAAQ,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC;;;;;;;;AC5C5G,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,UAAUC,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

@@ -1,54 +1,6 @@
 import { mount } from "@pyreon/runtime-dom";
+import { jsx } from "@pyreon/core/jsx-runtime";
 
-//#region ../../node_modules/.bun/@pyreon+core@0.7.11/node_modules/@pyreon/core/lib/jsx-runtime.js
-/**
-* Hyperscript function — the compiled output of JSX.
-* `<div class="x">hello</div>` → `h("div", { class: "x" }, "hello")`
-*
-* Generic on P so TypeScript validates props match the component's signature
-* at the call site, then stores the result in the loosely-typed VNode.
-*/
-/** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */
-const EMPTY_PROPS = {};
-function h(type, props, ...children) {
-	return {
-		type,
-		props: props ?? EMPTY_PROPS,
-		children: normalizeChildren(children),
-		key: props?.key ?? null
-	};
-}
-function normalizeChildren(children) {
-	for (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);
-	return children;
-}
-function flattenChildren(children) {
-	const result = [];
-	for (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));
-	else result.push(child);
-	return result;
-}
-/**
-* JSX automatic runtime.
-*
-* When tsconfig has `"jsxImportSource": "@pyreon/core"`, the TS/bundler compiler
-* rewrites JSX to imports from this file automatically:
-*   <div class="x" />  →  jsx("div", { class: "x" })
-*/
-function jsx(type, props, key) {
-	const { children, ...rest } = props;
-	const propsWithKey = key != null ? {
-		...rest,
-		key
-	} : rest;
-	if (typeof type === "function") return h(type, children !== void 0 ? {
-		...propsWithKey,
-		children
-	} : propsWithKey);
-	return h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);
-}
-
-//#endregion
 //#region src/render-impl.tsx
 /**
 * State tracked per canvas element so we can clean up between renders.

package/lib/preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview.js","names":[],"sources":["../../../node_modules/.bun/@pyreon+core@0.7.11/node_modules/@pyreon/core/lib/jsx-runtime.js","../src/render-impl.tsx","../src/preview-impl.tsx"],"sourcesContent":["//#region src/h.ts\n/** Marker for fragment nodes — renders children without a wrapper element */\nconst Fragment = Symbol(\"Pyreon.Fragment\");\n/**\n* Hyperscript function — the compiled output of JSX.\n* `<div class=\"x\">hello</div>` → `h(\"div\", { class: \"x\" }, \"hello\")`\n*\n* Generic on P so TypeScript validates props match the component's signature\n* at the call site, then stores the result in the loosely-typed VNode.\n*/\n/** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */\nconst EMPTY_PROPS = {};\nfunction h(type, props, ...children) {\n\treturn {\n\t\ttype,\n\t\tprops: props ?? EMPTY_PROPS,\n\t\tchildren: normalizeChildren(children),\n\t\tkey: props?.key ?? null\n\t};\n}\nfunction normalizeChildren(children) {\n\tfor (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);\n\treturn children;\n}\nfunction flattenChildren(children) {\n\tconst result = [];\n\tfor (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));\n\telse result.push(child);\n\treturn result;\n}\n\n//#endregion\n//#region src/jsx-runtime.ts\n/**\n* JSX automatic runtime.\n*\n* When tsconfig has `\"jsxImportSource\": \"@pyreon/core\"`, the TS/bundler compiler\n* rewrites JSX to imports from this file automatically:\n*   <div class=\"x\" />  →  jsx(\"div\", { class: \"x\" })\n*/\nfunction jsx(type, props, key) {\n\tconst { children, ...rest } = props;\n\tconst propsWithKey = key != null ? {\n\t\t...rest,\n\t\tkey\n\t} : rest;\n\tif (typeof type === \"function\") return h(type, children !== void 0 ? {\n\t\t...propsWithKey,\n\t\tchildren\n\t} : propsWithKey);\n\treturn h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);\n}\nconst jsxs = jsx;\n\n//#endregion\nexport { Fragment, jsx, jsxs };\n//# sourceMappingURL=jsx-runtime.js.map","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"],"x_google_ignoreList":[0],"mappings":";;;;;;;;;;;AAWA,MAAM,cAAc,EAAE;AACtB,SAAS,EAAE,MAAM,OAAO,GAAG,UAAU;AACpC,QAAO;EACN;EACA,OAAO,SAAS;EAChB,UAAU,kBAAkB,SAAS;EACrC,KAAK,OAAO,OAAO;EACnB;;AAEF,SAAS,kBAAkB,UAAU;AACpC,MAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,IAAK,KAAI,MAAM,QAAQ,SAAS,GAAG,CAAE,QAAO,gBAAgB,SAAS;AAC1G,QAAO;;AAER,SAAS,gBAAgB,UAAU;CAClC,MAAM,SAAS,EAAE;AACjB,MAAK,MAAM,SAAS,SAAU,KAAI,MAAM,QAAQ,MAAM,CAAE,QAAO,KAAK,GAAG,gBAAgB,MAAM,CAAC;KACzF,QAAO,KAAK,MAAM;AACvB,QAAO;;;;;;;;;AAYR,SAAS,IAAI,MAAM,OAAO,KAAK;CAC9B,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,eAAe,OAAO,OAAO;EAClC,GAAG;EACH;EACA,GAAG;AACJ,KAAI,OAAO,SAAS,WAAY,QAAO,EAAE,MAAM,aAAa,KAAK,IAAI;EACpE,GAAG;EACH;EACA,GAAG,aAAa;AACjB,QAAO,EAAE,MAAM,cAAc,GAAG,aAAa,KAAK,IAAI,EAAE,GAAG,MAAM,QAAQ,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC;;;;;;;;AC5C5G,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/lib/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index2.d.ts","names":[],"sources":["../../../src/types.ts","../../../src/render-impl.tsx"],"mappings":";;;;;;;;;UAQiB,cAAA;EACf,SAAA,EAAW,aAAA;EACX,WAAA,EAAa,YAAA;EACb,aAAA,EAAe,WAAA;AAAA;;KAML,UAAA,MAAgB,CAAA,SAAU,aAAA,YAAuB,CAAA,GAAI,OAAA;AAAA,UAIhD,YAAA,SAAqB,OAAA;EACpC,IAAA,EAAM,KAAA;EACN,QAAA,EAAU,MAAA;EACV,OAAA,EAAS,MAAA;EACT,EAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;AAAA;AAAA,KAGU,OAAA,SAAgB,OAAA,KAC1B,IAAA,EAAM,KAAA,EACN,OAAA,EAAS,YAAA,CAAa,KAAA,MACnB,YAAA;AAAA,KAEO,WAAA,SAAoB,OAAA,KAC9B,OAAA,EAAS,OAAA,CAAQ,KAAA,GACjB,OAAA,EAAS,YAAA,CAAa,KAAA,MACnB,YAAA;AAAA,UAIY,IAAA,oBAAwB,aAAA,QAAmB,aAAA;EA1BhC;EA4B1B,SAAA,GAAY,UAAA;EA5BmD;EA8B/D,KAAA;EA9BoE;EAgCpE,UAAA,GAAa,WAAA,CAAY,UAAA,CAAW,UAAA;EAhCV;EAkC1B,IAAA,GAAO,OAAA,CAAQ,UAAA,CAAW,UAAA;EAlC4B;EAoCtD,QAAA,GAAW,MAAA;EApCoD;EAsC/D,UAAA,GAAa,MAAA;EAtCuD;EAwCpE,IAAA;EApC2B;;;;EAyC3B,MAAA,IACE,IAAA,EAAM,UAAA,CAAW,UAAA,GACjB,OAAA,EAAS,YAAA,CAAa,UAAA,CAAW,UAAA,OAC9B,YAAA;EAzCI;EA2CT,cAAA,uBAAqC,MAAA;EA3CtB;EA6Cf,cAAA,uBAAqC,MAAA;AAAA;AAAA,UAKtB,QAAA,eAAuB,IAAA,QAAY,IAAA;EApD5C;EAsDN,IAAA,GAAO,OAAA,CAAQ,QAAA,CAAS,KAAA;EArDd;EAuDV,QAAA,GAAW,MAAA;EAtDF;EAwDT,UAAA,GAAa,WAAA,CAAY,QAAA,CAAS,KAAA;EAtDlC;EAwDA,UAAA,GAAa,MAAA;EAtDb;EAwDA,IAAA;EAxDQ;EA0DR,MAAA,IACE,IAAA,EAAM,QAAA,CAAS,KAAA,GACf,OAAA,EAAS,YAAA,CAAa,QAAA,CAAS,KAAA,OAC5B,YAAA;EA1DY;EA4DjB,IAAA;EA5D0B;EA8D1B,IAAA,IAAQ,OAAA;IACN,aAAA,EAAe,WAAA;IACf,IAAA,EAAM,QAAA,CAAS,KAAA;IACf,IAAA,GAAO,IAAA,UAAc,EAAA,QAAU,OAAA,WAAkB,OAAA;EAAA,MAC7C,OAAA;AAAA;;KAIH,QAAA,UAAkB,KAAA,SAAc,IAAA,YAAgB,UAAA,CAAW,CAAA,IAAK,OAAA;;;;;;;AA7FrE;;;;;;;;iBCYgB,cAAA,CAAA;EAEZ,OAAA;EACA,QAAA;EACA;AAAA;EAEA,OAAA,QAAe,YAAA;EACf,YAAA;IACE,SAAA,GAAY,aAAA;IACZ,IAAA,EAAM,MAAA;IAAA,CACL,GAAA;EAAA;EAEH,QAAA;EACA,SAAA,GAAY,KAAA;IAAS,KAAA;IAAe,WAAA;EAAA;EACpC,YAAA;AAAA,GAEF,aAAA,EAAe,WAAA;;;;iBA0BD,aAAA,CACd,SAAA,EAAW,aAAA,OACX,IAAA,EAAM,MAAA,oBACL,YAAA"}
+{"version":3,"file":"index2.d.ts","names":[],"sources":["../../../src/types.ts","../../../src/render-impl.tsx"],"mappings":";;;;;;;;;UAQiB,cAAA;EACf,SAAA,EAAW,aAAA;EACX,WAAA,EAAa,YAAA;EACb,aAAA,EAAe,WAAA;AAAA;;KAML,UAAA,MAAgB,CAAA,SAAU,aAAA,YAAuB,CAAA,GAAI,OAAA;AAAA,UAIhD,YAAA,SAAqB,OAAA;EACpC,IAAA,EAAM,KAAA;EACN,QAAA,EAAU,MAAA;EACV,OAAA,EAAS,MAAA;EACT,EAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;AAAA;AAAA,KAGU,OAAA,SAAgB,OAAA,KAAU,IAAA,EAAM,KAAA,EAAO,OAAA,EAAS,YAAA,CAAa,KAAA,MAAW,YAAA;AAAA,KAExE,WAAA,SAAoB,OAAA,KAC9B,OAAA,EAAS,OAAA,CAAQ,KAAA,GACjB,OAAA,EAAS,YAAA,CAAa,KAAA,MACnB,YAAA;AAAA,UAIY,IAAA,oBAAwB,aAAA,QAAmB,aAAA;EAvBhC;EAyB1B,SAAA,GAAY,UAAA;EAzBmD;EA2B/D,KAAA;EA3BoE;EA6BpE,UAAA,GAAa,WAAA,CAAY,UAAA,CAAW,UAAA;EA7BV;EA+B1B,IAAA,GAAO,OAAA,CAAQ,UAAA,CAAW,UAAA;EA/B4B;EAiCtD,QAAA,GAAW,MAAA;EAjCoD;EAmC/D,UAAA,GAAa,MAAA;EAnCuD;EAqCpE,IAAA;EAjC2B;;;;EAsC3B,MAAA,IACE,IAAA,EAAM,UAAA,CAAW,UAAA,GACjB,OAAA,EAAS,YAAA,CAAa,UAAA,CAAW,UAAA,OAC9B,YAAA;EAtCI;EAwCT,cAAA,uBAAqC,MAAA;EAxCtB;EA0Cf,cAAA,uBAAqC,MAAA;AAAA;AAAA,UAKtB,QAAA,eAAuB,IAAA,QAAY,IAAA;EAjD5C;EAmDN,IAAA,GAAO,OAAA,CAAQ,QAAA,CAAS,KAAA;EAlDd;EAoDV,QAAA,GAAW,MAAA;EAnDF;EAqDT,UAAA,GAAa,WAAA,CAAY,QAAA,CAAS,KAAA;EAnDlC;EAqDA,UAAA,GAAa,MAAA;EAnDb;EAqDA,IAAA;EArDQ;EAuDR,MAAA,IAAU,IAAA,EAAM,QAAA,CAAS,KAAA,GAAQ,OAAA,EAAS,YAAA,CAAa,QAAA,CAAS,KAAA,OAAY,YAAA;EApD3D;EAsDjB,IAAA;EAtD0B;EAwD1B,IAAA,IAAQ,OAAA;IACN,aAAA,EAAe,WAAA;IACf,IAAA,EAAM,QAAA,CAAS,KAAA;IACf,IAAA,GAAO,IAAA,UAAc,EAAA,QAAU,OAAA,WAAkB,OAAA;EAAA,MAC7C,OAAA;AAAA;;KAIH,QAAA,UAAkB,KAAA,SAAc,IAAA,YAAgB,UAAA,CAAW,CAAA,IAAK,OAAA;;;;;;;AAvFrE;;;;;;;;iBCYgB,cAAA,CAAA;EAEZ,OAAA;EACA,QAAA;EACA;AAAA;EAEA,OAAA,QAAe,YAAA;EACf,YAAA;IACE,SAAA,GAAY,aAAA;IACZ,IAAA,EAAM,MAAA;IAAA,CACL,GAAA;EAAA;EAEH,QAAA;EACA,SAAA,GAAY,KAAA;IAAS,KAAA;IAAe,WAAA;EAAA;EACpC,YAAA;AAAA,GAEF,aAAA,EAAe,WAAA;;;;iBA0BD,aAAA,CACd,SAAA,EAAW,aAAA,OACX,IAAA,EAAM,MAAA,oBACL,YAAA"}

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@pyreon/storybook",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Storybook renderer for Pyreon — mount, render, and interact with Pyreon components in Storybook",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/pyreon/fundamentals.git",
-    "directory": "packages/storybook"
+    "url": "https://github.com/pyreon/pyreon.git",
+    "directory": "packages/tools/storybook"
   },
   "homepage": "https://github.com/pyreon/fundamentals/tree/main/packages/storybook#readme",
   "bugs": {
-    "url": "https://github.com/pyreon/fundamentals/issues"
+    "url": "https://github.com/pyreon/pyreon/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -48,12 +48,13 @@
     "build": "vl_rolldown_build",
     "dev": "vl_rolldown_build-watch",
     "test": "vitest run",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check ."
   },
   "peerDependencies": {
-    "@pyreon/core": ">=0.7.0 <0.8.0",
-    "@pyreon/reactivity": ">=0.7.0 <0.8.0",
-    "@pyreon/runtime-dom": ">=0.7.0 <0.8.0",
+    "@pyreon/core": "^0.11.1",
+    "@pyreon/reactivity": "^0.11.1",
+    "@pyreon/runtime-dom": "^0.11.1",
     "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,20 +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
 }
@@ -27,9 +21,7 @@ function makeRenderContext(overrides: {
   return {
     storyFn: overrides.storyFn ?? (() => <div>default</div>),
     storyContext: {
-      ...(overrides.component != null
-        ? { component: overrides.component }
-        : {}),
+      ...(overrides.component != null ? { component: overrides.component } : {}),
       args: overrides.args ?? {},
     },
     showMain: () => {
@@ -44,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>,
@@ -53,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>
     }
@@ -70,33 +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')
+    renderToCanvas(makeRenderContext({ storyFn: () => <div>First</div> }), canvas)
+    expect(canvas.textContent).toBe("First")
 
-    renderToCanvas(
-      makeRenderContext({ storyFn: () => <div>Second</div> }),
-      canvas,
-    )
-    expect(canvas.textContent).toBe('Second')
+    renderToCanvas(makeRenderContext({ storyFn: () => <div>Second</div> }), canvas)
+    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
 
@@ -116,10 +102,7 @@ describe('renderToCanvas', () => {
     expect(effectRunCount).toBe(initialCount + 1)
 
     // Re-render with a different story — should dispose previous effects
-    renderToCanvas(
-      makeRenderContext({ storyFn: () => <div>New story</div> }),
-      canvas,
-    )
+    renderToCanvas(makeRenderContext({ storyFn: () => <div>New story</div> }), canvas)
 
     const countAfterCleanup = effectRunCount
     count.set(2)
@@ -129,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: () => {
@@ -150,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: () => {
@@ -175,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)
 
@@ -189,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()
   })
@@ -217,12 +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}
@@ -232,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>
@@ -260,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">
@@ -271,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>
@@ -285,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()
   })
@@ -298,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>
     }
@@ -310,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>
     }
@@ -340,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))
@@ -355,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()
   })
@@ -365,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({
@@ -380,40 +360,320 @@ 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",
     )
   })
+})
+
+// ─── Decorator wrapping ─────────────────────────────────────────────────────
+
+describe("decorator wrapping", () => {
+  it("decorator modifies the rendered VNode structure", () => {
+    function Badge(props: { text: string }) {
+      return <span class="badge">{props.text}</span>
+    }
+
+    const withCard: DecoratorFn<{ text: string }> = (storyFn, ctx) => {
+      return (
+        <div class="card">
+          <h3>Decorated</h3>
+          {storyFn(ctx.args, ctx)}
+        </div>
+      )
+    }
+
+    const canvas = createCanvas()
+    const context: StoryContext<{ text: string }> = {
+      args: { text: "Info" },
+      argTypes: {},
+      globals: {},
+      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")
+    unmount()
+    canvas.remove()
+  })
+})
+
+// ─── Component with no args ─────────────────────────────────────────────────
+
+describe("component with no args", () => {
+  it("renders a component without any props via renderToCanvas", () => {
+    function Logo() {
+      return <img src="/logo.png" alt="Logo" />
+    }
+
+    const canvas = createCanvas()
+    renderToCanvas(
+      makeRenderContext({
+        storyFn: () => <Logo />,
+        args: {},
+      }),
+      canvas,
+    )
+
+    expect(canvas.querySelector("img")).toBeTruthy()
+    expect(canvas.querySelector("img")!.getAttribute("alt")).toBe("Logo")
+    canvas.remove()
+  })
+
+  it("renders a component with no args via defaultRender", () => {
+    function Divider() {
+      return <hr class="divider" />
+    }
+
+    const canvas = createCanvas()
+    const vnode = defaultRender(Divider, {})
+    const unmount = mount(vnode, canvas)
+
+    expect(canvas.querySelector("hr")).toBeTruthy()
+    expect(canvas.querySelector(".divider")).toBeTruthy()
+    unmount()
+    canvas.remove()
+  })
+
+  it("preview render works with empty args", () => {
+    function Spinner() {
+      return <div class="spinner">Loading...</div>
+    }
+
+    const canvas = createCanvas()
+    const vnode = previewRender({}, { component: Spinner })
+    const unmount = mount(vnode, canvas)
+
+    expect(canvas.querySelector(".spinner")!.textContent).toBe("Loading...")
+    unmount()
+    canvas.remove()
+  })
+})
+
+// ─── Error handling ──────────────────────────────────────────────────────────
+
+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")
+        },
+        storyContext: { args: {} },
+        showMain: () => {
+          /* noop */
+        },
+        showError: (err: { title: string; description: string }) => {
+          errorShown = err
+        },
+        forceRemount: false,
+      },
+      canvas,
+    )
 
-  it('throws when component is undefined', () => {
-    expect(() =>
-      previewRender({ foo: 'bar' }, { component: undefined } as any),
-    ).toThrow('[@pyreon/storybook] No component provided')
+    expect(errorShown).not.toBeNull()
+    expect(errorShown!.description).toBe("storyFn exploded")
+    canvas.remove()
+  })
+
+  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"
+        },
+        storyContext: { args: {} },
+        showMain: () => {
+          /* noop */
+        },
+        showError: (err: { title: string; description: string }) => {
+          errorShown = err
+        },
+        forceRemount: false,
+      },
+      canvas,
+    )
+
+    expect(errorShown).not.toBeNull()
+    expect(errorShown!.description).toBe("raw string error")
+    canvas.remove()
+  })
+
+  it("component that throws during setup is handled by the framework", () => {
+    const canvas = createCanvas()
+
+    function Broken(): never {
+      throw new Error("Component exploded")
+    }
+
+    // Pyreon's mount catches component setup errors internally,
+    // so renderToCanvas proceeds normally (showMain is called)
+    let mainShown = false
+    renderToCanvas(
+      {
+        storyFn: () => <Broken />,
+        storyContext: { args: {} },
+        showMain: () => {
+          mainShown = true
+        },
+        showError: () => {
+          /* noop */
+        },
+        forceRemount: false,
+      },
+      canvas,
+    )
+
+    // mount() catches the component error internally — renderToCanvas's
+    // try/catch does not see it, so showMain is called
+    expect(mainShown).toBe(true)
+    canvas.remove()
+  })
+})
+
+// ─── Re-render cleanup ──────────────────────────────────────────────────────
+
+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()
+
+    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")
+    canvas.remove()
+  })
+
+  it("re-render disposes effects from previous story", () => {
+    const canvas = createCanvas()
+    let effectCount = 0
+
+    const sig = signal(0)
+    function ReactiveStory() {
+      effect(() => {
+        sig()
+        effectCount++
+      })
+      return <div>Reactive</div>
+    }
+
+    renderToCanvas(makeRenderContext({ storyFn: () => <ReactiveStory /> }), canvas)
+
+    const afterFirst = effectCount
+    sig.set(1)
+    expect(effectCount).toBe(afterFirst + 1)
+
+    // Re-render with a different story
+    renderToCanvas(makeRenderContext({ storyFn: () => <div>Static</div> }), canvas)
+
+    const afterSecond = effectCount
+    sig.set(2)
+    sig.set(3)
+    // Old effect should be disposed — count should not increase
+    expect(effectCount).toBe(afterSecond)
+    canvas.remove()
+  })
+
+  it("showMain is called on successful render", () => {
+    const canvas = createCanvas()
+    let mainShown = false
+
+    renderToCanvas(
+      {
+        storyFn: () => <div>OK</div>,
+        storyContext: { args: {} },
+        showMain: () => {
+          mainShown = true
+        },
+        showError: () => {
+          /* noop */
+        },
+        forceRemount: false,
+      },
+      canvas,
+    )
+
+    expect(mainShown).toBe(true)
+    canvas.remove()
+  })
+})
+
+// ─── Missing component in context ───────────────────────────────────────────
+
+describe("missing component in context", () => {
+  it("preview render throws when context has no component", () => {
+    expect(() => previewRender({ value: 1 }, {})).toThrow(
+      "[@pyreon/storybook] No component provided",
+    )
+  })
+
+  it("preview render throws when context.component is null", () => {
+    expect(() => previewRender({ value: 1 }, { component: null } as any)).toThrow(
+      "[@pyreon/storybook] No component provided",
+    )
+  })
+
+  it("renderToCanvas works without component in storyContext when storyFn is provided", () => {
+    const canvas = createCanvas()
+
+    renderToCanvas(
+      makeRenderContext({
+        storyFn: () => <div>No component needed</div>,
+      }),
+      canvas,
+    )
+
+    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,13 +26,10 @@ 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
+export type StoryFn<TArgs = Props> = (args: TArgs, context: StoryContext<TArgs>) => VNodeChild
 
 export type DecoratorFn<TArgs = Props> = (
   storyFn: StoryFn<TArgs>,
@@ -84,10 +81,7 @@ export interface StoryObj<TMeta extends Meta<any> = Meta> {
   /** Tags for this story. */
   tags?: string[]
   /** Override the render function for this story. */
-  render?: (
-    args: MetaArgs<TMeta>,
-    context: StoryContext<MetaArgs<TMeta>>,
-  ) => VNodeChild
+  render?: (args: MetaArgs<TMeta>, context: StoryContext<MetaArgs<TMeta>>) => VNodeChild
   /** Story name override. */
   name?: string
   /** Play function for interaction tests. */