@pyreon/storybook 0.2.0 → 0.6.0

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":"src","children":[{"uid":"e27e4752-1","name":"render.ts"},{"uid":"e27e4752-3","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"e27e4752-1":{"renderedLength":1288,"gzipLength":673,"brotliLength":0,"metaUid":"e27e4752-0"},"e27e4752-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"e27e4752-2"}},"nodeMetas":{"e27e4752-0":{"id":"/src/render.ts","moduleParts":{"index.js":"e27e4752-1"},"imported":[{"uid":"e27e4752-4"},{"uid":"e27e4752-6"}],"importedBy":[{"uid":"e27e4752-2"}]},"e27e4752-2":{"id":"/src/index.ts","moduleParts":{"index.js":"e27e4752-3"},"imported":[{"uid":"e27e4752-0"},{"uid":"e27e4752-4"},{"uid":"e27e4752-5"},{"uid":"e27e4752-6"}],"importedBy":[],"isEntry":true},"e27e4752-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"e27e4752-2"},{"uid":"e27e4752-0"}]},"e27e4752-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"e27e4752-2"}]},"e27e4752-6":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"e27e4752-2"},{"uid":"e27e4752-0"}]}},"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":"home/runner/work/fundamentals/fundamentals/node_modules/.bun/@pyreon+core@0.6.0/node_modules/@pyreon/core/lib/jsx-runtime.js","uid":"a15c263f-1"},{"name":"src","children":[{"uid":"a15c263f-3","name":"render-impl.tsx"},{"uid":"a15c263f-5","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"a15c263f-1":{"renderedLength":1640,"gzipLength":827,"brotliLength":0,"metaUid":"a15c263f-0"},"a15c263f-3":{"renderedLength":1280,"gzipLength":673,"brotliLength":0,"metaUid":"a15c263f-2"},"a15c263f-5":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"a15c263f-4"}},"nodeMetas":{"a15c263f-0":{"id":"/home/runner/work/fundamentals/fundamentals/node_modules/.bun/@pyreon+core@0.6.0/node_modules/@pyreon/core/lib/jsx-runtime.js","moduleParts":{"index.js":"a15c263f-1"},"imported":[],"importedBy":[{"uid":"a15c263f-2"}]},"a15c263f-2":{"id":"/src/render-impl.tsx","moduleParts":{"index.js":"a15c263f-3"},"imported":[{"uid":"a15c263f-9"},{"uid":"a15c263f-0"}],"importedBy":[{"uid":"a15c263f-6"}]},"a15c263f-4":{"id":"/src/index.ts","moduleParts":{"index.js":"a15c263f-5"},"imported":[{"uid":"a15c263f-6"},{"uid":"a15c263f-7"},{"uid":"a15c263f-8"},{"uid":"a15c263f-9"}],"importedBy":[],"isEntry":true},"a15c263f-6":{"id":"/src/render.ts","moduleParts":{},"imported":[{"uid":"a15c263f-2"}],"importedBy":[{"uid":"a15c263f-4"}]},"a15c263f-7":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"a15c263f-4"}]},"a15c263f-8":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"a15c263f-4"}]},"a15c263f-9":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"a15c263f-4"},{"uid":"a15c263f-2"}]}},"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":"src","children":[{"uid":"4ccb792b-1","name":"render.ts"},{"uid":"4ccb792b-3","name":"preview.ts"}]}]}],"isRoot":true},"nodeParts":{"4ccb792b-1":{"renderedLength":1094,"gzipLength":589,"brotliLength":0,"metaUid":"4ccb792b-0"},"4ccb792b-3":{"renderedLength":421,"gzipLength":284,"brotliLength":0,"metaUid":"4ccb792b-2"}},"nodeMetas":{"4ccb792b-0":{"id":"/src/render.ts","moduleParts":{"preview.js":"4ccb792b-1"},"imported":[{"uid":"4ccb792b-4"},{"uid":"4ccb792b-5"}],"importedBy":[{"uid":"4ccb792b-2"}]},"4ccb792b-2":{"id":"/src/preview.ts","moduleParts":{"preview.js":"4ccb792b-3"},"imported":[{"uid":"4ccb792b-4"},{"uid":"4ccb792b-0"}],"importedBy":[],"isEntry":true},"4ccb792b-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"4ccb792b-2"},{"uid":"4ccb792b-0"}]},"4ccb792b-5":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"4ccb792b-0"}]}},"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":"home/runner/work/fundamentals/fundamentals/node_modules/.bun/@pyreon+core@0.6.0/node_modules/@pyreon/core/lib/jsx-runtime.js","uid":"3cdd8ae0-1"},{"name":"src","children":[{"uid":"3cdd8ae0-3","name":"render-impl.tsx"},{"uid":"3cdd8ae0-5","name":"preview-impl.tsx"},{"uid":"3cdd8ae0-7","name":"preview.ts"}]}]}],"isRoot":true},"nodeParts":{"3cdd8ae0-1":{"renderedLength":1634,"gzipLength":823,"brotliLength":0,"metaUid":"3cdd8ae0-0"},"3cdd8ae0-3":{"renderedLength":1100,"gzipLength":595,"brotliLength":0,"metaUid":"3cdd8ae0-2"},"3cdd8ae0-5":{"renderedLength":452,"gzipLength":313,"brotliLength":0,"metaUid":"3cdd8ae0-4"},"3cdd8ae0-7":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"3cdd8ae0-6"}},"nodeMetas":{"3cdd8ae0-0":{"id":"/home/runner/work/fundamentals/fundamentals/node_modules/.bun/@pyreon+core@0.6.0/node_modules/@pyreon/core/lib/jsx-runtime.js","moduleParts":{"preview.js":"3cdd8ae0-1"},"imported":[],"importedBy":[{"uid":"3cdd8ae0-4"},{"uid":"3cdd8ae0-2"}]},"3cdd8ae0-2":{"id":"/src/render-impl.tsx","moduleParts":{"preview.js":"3cdd8ae0-3"},"imported":[{"uid":"3cdd8ae0-8"},{"uid":"3cdd8ae0-0"}],"importedBy":[{"uid":"3cdd8ae0-4"}]},"3cdd8ae0-4":{"id":"/src/preview-impl.tsx","moduleParts":{"preview.js":"3cdd8ae0-5"},"imported":[{"uid":"3cdd8ae0-2"},{"uid":"3cdd8ae0-0"}],"importedBy":[{"uid":"3cdd8ae0-6"}]},"3cdd8ae0-6":{"id":"/src/preview.ts","moduleParts":{"preview.js":"3cdd8ae0-7"},"imported":[{"uid":"3cdd8ae0-4"}],"importedBy":[],"isEntry":true},"3cdd8ae0-8":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"3cdd8ae0-2"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -1,8 +1,57 @@
-import { Fragment, h, h as h$1 } from "@pyreon/core";
 import { mount, mount as mount$1 } from "@pyreon/runtime-dom";
+import { Fragment, h } from "@pyreon/core";
 import { computed, effect, signal } from "@pyreon/reactivity";
 
-//#region src/render.ts
+//#region ../../node_modules/.bun/@pyreon+core@0.6.0/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.
 */
@@ -38,10 +87,9 @@ function renderToCanvas({ storyFn, showMain, showError }, canvasElement) {
 }
 /**
 * Default render implementation used when no custom `render` is provided.
-* Simply calls `h(component, args)`.
 */
 function defaultRender(component, args) {
-	return h$1(component, args);
+	return /* @__PURE__ */ jsx(component, { ...args });
 }
 
 //#endregion

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["mount","h"],"sources":["../src/render.ts"],"sourcesContent":["import { h } from '@pyreon/core'\nimport 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    // Get the story result — either from a custom render function\n    // or by calling the component with args\n    const element = storyFn()\n\n    // Mount the Pyreon VNode tree into the canvas\n    const unmount = mount(element, canvasElement)\n    canvasState.set(canvasElement, unmount)\n\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 * Simply calls `h(component, args)`.\n */\nexport function defaultRender(\n  component: ComponentFn<any>,\n  args: Record<string, unknown>,\n): VNodeChild {\n  return h(component, args)\n}\n"],"mappings":";;;;;;;;AAOA,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;EAMF,MAAM,UAAUA,QAHA,SAAS,EAGM,cAAc;AAC7C,cAAY,IAAI,eAAe,QAAQ;AAEvC,YAAU;UACH,KAAK;AAEZ,YAAU;GACR,OAAO;GACP,cAHY,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,EAG5C;GACpB,CAAC;;;;;;;AAQN,SAAgB,cACd,WACA,MACY;AACZ,QAAOC,IAAE,WAAW,KAAK"}
+{"version":3,"file":"index.js","names":["h","mount"],"sources":["../../../node_modules/.bun/@pyreon+core@0.6.0/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"}

package/lib/preview.js

@@ -1,7 +1,55 @@
-import { h } from "@pyreon/core";
 import { mount } from "@pyreon/runtime-dom";
 
-//#region src/render.ts
+//#region ../../node_modules/.bun/@pyreon+core@0.6.0/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.
 */
@@ -37,7 +85,7 @@ function renderToCanvas({ storyFn, showMain, showError }, canvasElement) {
 }
 
 //#endregion
-//#region src/preview.ts
+//#region src/preview-impl.tsx
 /**
 * Default render function — if the story CSF has a `component` but no
 * explicit `render`, this is used to create the VNode.
@@ -45,7 +93,7 @@ function renderToCanvas({ storyFn, showMain, showError }, canvasElement) {
 function render(args, context) {
 	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.");
-	return h(Component, args);
+	return /* @__PURE__ */ jsx(Component, { ...args });
 }
 
 //#endregion

package/lib/preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview.js","names":[],"sources":["../src/render.ts","../src/preview.ts"],"sourcesContent":["import { h } from '@pyreon/core'\nimport 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    // Get the story result — either from a custom render function\n    // or by calling the component with args\n    const element = storyFn()\n\n    // Mount the Pyreon VNode tree into the canvas\n    const unmount = mount(element, canvasElement)\n    canvasState.set(canvasElement, unmount)\n\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 * Simply calls `h(component, args)`.\n */\nexport function defaultRender(\n  component: ComponentFn<any>,\n  args: Record<string, unknown>,\n): VNodeChild {\n  return h(component, args)\n}\n","import { h } from '@pyreon/core'\nimport type { ComponentFn, VNodeChild } from '@pyreon/core'\nimport { renderToCanvas } from './render'\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 h(Component, args)\n}\n"],"mappings":";;;;;;;AAOA,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;EAMF,MAAM,UAAU,MAHA,SAAS,EAGM,cAAc;AAC7C,cAAY,IAAI,eAAe,QAAQ;AAEvC,YAAU;UACH,KAAK;AAEZ,YAAU;GACR,OAAO;GACP,cAHY,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,EAG5C;GACpB,CAAC;;;;;;;;;;AC5CN,SAAgB,OACd,MACA,SACY;CACZ,MAAM,YAAY,QAAQ;AAC1B,KAAI,CAAC,UACH,OAAM,IAAI,MACR,iHACD;AAEH,QAAO,EAAE,WAAW,KAAK"}
+{"version":3,"file":"preview.js","names":[],"sources":["../../../node_modules/.bun/@pyreon+core@0.6.0/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"}

package/lib/types/index.d.ts

@@ -1,5 +1,5 @@
-import { ComponentFn, ComponentFn as ComponentFn$1, Fragment, Props, Props as Props$1, VNode, VNodeChild, VNodeChild as VNodeChild$1, h } from "@pyreon/core";
 import { mount } from "@pyreon/runtime-dom";
+import { ComponentFn, ComponentFn as ComponentFn$1, Fragment, Props, Props as Props$1, VNode, VNodeChild, VNodeChild as VNodeChild$1, h } from "@pyreon/core";
 import { computed, effect, signal } from "@pyreon/reactivity";
 
 //#region src/types.d.ts
@@ -75,7 +75,7 @@ interface StoryObj<TMeta extends Meta<any> = Meta> {
 /** Extract the args type from a Meta definition. */
 type MetaArgs<TMeta> = TMeta extends Meta<infer C> ? InferProps<C> : Props$1;
 //#endregion
-//#region src/render.d.ts
+//#region src/render-impl.d.ts
 /**
  * Render a Pyreon story into a Storybook canvas element.
  *
@@ -108,7 +108,6 @@ declare function renderToCanvas({
 }, canvasElement: HTMLElement): void;
 /**
  * Default render implementation used when no custom `render` is provided.
- * Simply calls `h(component, args)`.
  */
 declare function defaultRender(component: ComponentFn$1<any>, args: Record<string, unknown>): VNodeChild$1;
 //#endregion

package/lib/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index2.d.ts","names":[],"sources":["../../src/types.ts","../../src/render.ts"],"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;;;;;;;;iBCagB,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;;;;;iBAgCD,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,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"}

package/lib/types/preview.d.ts

@@ -1,7 +1,57 @@
-import { h } from "@pyreon/core";
 import { mount } from "@pyreon/runtime-dom";
 
-//#region src/render.ts
+//#region ../../node_modules/.bun/@pyreon+core@0.6.0/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. */
+
+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.
 */
@@ -41,7 +91,7 @@ function renderToCanvas({
 }
 
 //#endregion
-//#region src/preview.ts
+//#region src/preview-impl.tsx
 /**
 * Default render function — if the story CSF has a `component` but no
 * explicit `render`, this is used to create the VNode.
@@ -49,7 +99,9 @@ function renderToCanvas({
 function render(args, context) {
   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.");
-  return h(Component, args);
+  return /* @__PURE__ */jsx(Component, {
+    ...args
+  });
 }
 
 //#endregion

package/lib/types/preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview.d.ts","names":[],"sources":["../../src/render.ts","../../src/preview.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,cAAA,CACd;EACE,OAAA;EACA,QAAA;EACA;AAAA,CAAA,EAYF,aAAA,EACM;EAEN,MAAM,WAAA,GAAc,WAAA,CAAY,GAAA,CAAI,aAAA,CAAc;EAClD,IAAI,WAAA,EAAa;IACf,WAAA,CAAA,CAAa;IACb,WAAA,CAAY,MAAA,CAAO,aAAA,CAAc;;EAGnC,IAAI;IAMF,MAAM,OAAA,GAAU,KAAA,CAHA,OAAA,CAAA,CAAS,EAGM,aAAA,CAAc;IAC7C,WAAA,CAAY,GAAA,CAAI,aAAA,EAAe,OAAA,CAAQ;IAEvC,QAAA,CAAA,CAAU;WACH,GAAA,EAAK;IAEZ,SAAA,CAAU;MACR,KAAA,EAAO,uBAAA;MACP,WAAA,EAAA,CAHY,GAAA,YAAe,KAAA,GAAQ,GAAA,GAAM,IAAI,KAAA,CAAM,MAAA,CAAO,GAAA,CAAI,CAAC,EAG5C;KACpB,CAAC;;;;;;;;;;AC5CN,SAAgB,MAAA,CACd,IAAA,EACA,OAAA,EACY;EACZ,MAAM,SAAA,GAAY,OAAA,CAAQ,SAAA;EAC1B,IAAI,CAAC,SAAA,EACH,MAAM,IAAI,KAAA,CACR,gHAAA,CACD;EAEH,OAAO,CAAA,CAAE,SAAA,EAAW,IAAA,CAAK"}
+{"version":3,"file":"preview.d.ts","names":[],"sources":["../../../../node_modules/.bun/@pyreon+core@0.6.0/node_modules/@pyreon/core/lib/jsx-runtime.js","../../src/render-impl.tsx","../../src/preview-impl.tsx"],"x_google_ignoreList":[0],"mappings":";;;;;;;;;;;;AAYA,SAAS,CAAA,CAAE,IAAA,EAAM,KAAA,EAAO,GAAG,QAAA,EAAU;EACpC,OAAO;IACN,IAAA;IACA,KAAA,EAAO,KAAA,IAAS,WAAA;IAChB,QAAA,EAAU,iBAAA,CAAkB,QAAA,CAAS;IACrC,GAAA,EAAK,KAAA,EAAO,GAAA,IAAO;GACnB;;AAEF,SAAS,iBAAA,CAAkB,QAAA,EAAU;EACpC,KAAK,IAAI,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,QAAA,CAAS,MAAA,EAAQ,CAAA,EAAA,EAAK,IAAI,KAAA,CAAM,OAAA,CAAQ,QAAA,CAAS,CAAA,CAAA,CAAG,EAAE,OAAO,eAAA,CAAgB,QAAA,CAAS;EAC1G,OAAO,QAAA;;AAER,SAAS,eAAA,CAAgB,QAAA,EAAU;EAClC,MAAM,MAAA,GAAS,EAAE;EACjB,KAAK,MAAM,KAAA,IAAS,QAAA,EAAU,IAAI,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,EAAE,MAAA,CAAO,IAAA,CAAK,GAAG,eAAA,CAAgB,KAAA,CAAM,CAAC,CAAA,KACzF,MAAA,CAAO,IAAA,CAAK,KAAA,CAAM;EACvB,OAAO,MAAA;;;;;;;;;AAYR,SAAS,GAAA,CAAI,IAAA,EAAM,KAAA,EAAO,GAAA,EAAK;EAC9B,MAAM;IAAE,QAAA;IAAU,GAAG;EAAA,CAAA,GAAS,KAAA;EAC9B,MAAM,YAAA,GAAe,GAAA,IAAO,IAAA,GAAO;IAClC,GAAG,IAAA;IACH;GACA,GAAG,IAAA;EACJ,IAAI,OAAO,IAAA,KAAS,UAAA,EAAY,OAAO,CAAA,CAAE,IAAA,EAAM,QAAA,KAAa,KAAK,CAAA,GAAI;IACpE,GAAG,YAAA;IACH;GACA,GAAG,YAAA,CAAa;EACjB,OAAO,CAAA,CAAE,IAAA,EAAM,YAAA,EAAc,IAAG,QAAA,KAAa,KAAK,CAAA,GAAI,EAAE,GAAG,KAAA,CAAM,OAAA,CAAQ,QAAA,CAAS,GAAG,QAAA,GAAW,CAAC,QAAA,CAAS,EAAC;;;;;;;;;;;;;;;;;;;;;AC9B5G,SAAgB,cAAA,CACd;EACE,OAAA;EACA,QAAA;EACA;AAAA,CAAA,EAYF,aAAA,EACM;EAEN,MAAM,WAAA,GAAc,WAAA,CAAY,GAAA,CAAI,aAAA,CAAc;EAClD,IAAI,WAAA,EAAa;IACf,WAAA,CAAA,CAAa;IACb,WAAA,CAAY,MAAA,CAAO,aAAA,CAAc;;EAGnC,IAAI;IAEF,MAAM,OAAA,GAAU,KAAA,CADA,OAAA,CAAA,CAAS,EACM,aAAA,CAAc;IAC7C,WAAA,CAAY,GAAA,CAAI,aAAA,EAAe,OAAA,CAAQ;IACvC,QAAA,CAAA,CAAU;WACH,GAAA,EAAK;IAEZ,SAAA,CAAU;MACR,KAAA,EAAO,uBAAA;MACP,WAAA,EAAA,CAHY,GAAA,YAAe,KAAA,GAAQ,GAAA,GAAM,IAAI,KAAA,CAAM,MAAA,CAAO,GAAA,CAAI,CAAC,EAG5C;KACpB,CAAC;;;;;;;;;;ACvCN,SAAgB,MAAA,CACd,IAAA,EACA,OAAA,EACY;EACZ,MAAM,SAAA,GAAY,OAAA,CAAQ,SAAA;EAC1B,IAAI,CAAC,SAAA,EACH,MAAM,IAAI,KAAA,CACR,gHAAA,CACD;EAEH,OAAO,eAAA,GAAA,CAAC,SAAA,EAAD;IAAW,GAAI;EAAA,CAAQ,CAAA"}

package/lib/types/preview2.d.ts

@@ -1,6 +1,6 @@
 import { ComponentFn, VNodeChild } from "@pyreon/core";
 
-//#region src/render.d.ts
+//#region src/render-impl.d.ts
 /**
  * Render a Pyreon story into a Storybook canvas element.
  *
@@ -32,7 +32,7 @@ declare function renderToCanvas({
   forceRemount: boolean;
 }, canvasElement: HTMLElement): void;
 //#endregion
-//#region src/preview.d.ts
+//#region src/preview-impl.d.ts
 /**
  * Default render function — if the story CSF has a `component` but no
  * explicit `render`, this is used to create the VNode.

package/lib/types/preview2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview2.d.ts","names":[],"sources":["../../src/render.ts","../../src/preview.ts"],"mappings":";;;;;AAqBA;;;;;;;;;;iBAAgB,cAAA,CAAA;EAEZ,OAAA;EACA,QAAA;EACA;AAAA;EAEA,OAAA,QAAe,UAAA;EACf,YAAA;IACE,SAAA,GAAY,WAAA;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;;;;;;;iBCpBD,MAAA,eAAqB,MAAA,kBAAA,CACnC,IAAA,EAAM,KAAA,EACN,OAAA;EAAW,SAAA,GAAY,WAAA;AAAA,IACtB,UAAA"}
+{"version":3,"file":"preview2.d.ts","names":[],"sources":["../../src/render-impl.tsx","../../src/preview-impl.tsx"],"mappings":";;;;;AAoBA;;;;;;;;;;iBAAgB,cAAA,CAAA;EAEZ,OAAA;EACA,QAAA;EACA;AAAA;EAEA,OAAA,QAAe,UAAA;EACf,YAAA;IACE,SAAA,GAAY,WAAA;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;;;;;;;iBCpBD,MAAA,eAAqB,MAAA,kBAAA,CACnC,IAAA,EAAM,KAAA,EACN,OAAA;EAAW,SAAA,GAAY,WAAA;AAAA,IACtB,UAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/storybook",
-  "version": "0.2.0",
+  "version": "0.6.0",
   "description": "Storybook renderer for Pyreon — mount, render, and interact with Pyreon components in Storybook",
   "license": "MIT",
   "repository": {
@@ -51,9 +51,9 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.3.1",
-    "@pyreon/reactivity": "^0.3.1",
-    "@pyreon/runtime-dom": "^0.3.1",
+    "@pyreon/core": ">=0.5.0 <1.0.0",
+    "@pyreon/reactivity": ">=0.5.0 <1.0.0",
+    "@pyreon/runtime-dom": ">=0.5.0 <1.0.0",
     "storybook": ">=8.0.0"
   }
 }

package/src/index.ts

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

package/src/preview-impl.tsx

@@ -0,0 +1,28 @@
+import type { ComponentFn, VNodeChild } from '@pyreon/core'
+import { renderToCanvas } from './render-impl'
+
+/**
+ * Preview entry — Storybook loads this in the preview iframe.
+ *
+ * Exports the render function and default decorators/parameters
+ * that apply to all stories using this renderer.
+ */
+
+export { renderToCanvas }
+
+/**
+ * Default render function — if the story CSF has a `component` but no
+ * explicit `render`, this is used to create the VNode.
+ */
+export function render<TArgs extends Record<string, unknown>>(
+  args: TArgs,
+  context: { component?: ComponentFn<any> },
+): VNodeChild {
+  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.',
+    )
+  }
+  return <Component {...args} />
+}

package/src/preview.ts

@@ -1,29 +1 @@
-import { h } from '@pyreon/core'
-import type { ComponentFn, VNodeChild } from '@pyreon/core'
-import { renderToCanvas } from './render'
-
-/**
- * Preview entry — Storybook loads this in the preview iframe.
- *
- * Exports the render function and default decorators/parameters
- * that apply to all stories using this renderer.
- */
-
-export { renderToCanvas }
-
-/**
- * Default render function — if the story CSF has a `component` but no
- * explicit `render`, this is used to create the VNode.
- */
-export function render<TArgs extends Record<string, unknown>>(
-  args: TArgs,
-  context: { component?: ComponentFn<any> },
-): VNodeChild {
-  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.',
-    )
-  }
-  return h(Component, args)
-}
+export { render, renderToCanvas } from './preview-impl'

package/src/render-impl.tsx

@@ -0,0 +1,69 @@
+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.
+ */
+const canvasState = new WeakMap<HTMLElement, () => void>()
+
+/**
+ * Render a Pyreon story into a Storybook canvas element.
+ *
+ * This is the core integration point — Storybook calls this function
+ * every time a story needs to be displayed or re-rendered (e.g. when
+ * the user changes args via the Controls panel).
+ *
+ * It handles:
+ * 1. Cleaning up the previous mount (disposing effects, removing DOM)
+ * 2. Building the VNode from the story function or component + args
+ * 3. Mounting the new VNode into the canvas
+ */
+export function renderToCanvas(
+  {
+    storyFn,
+    showMain,
+    showError,
+  }: {
+    storyFn: () => VNodeChild
+    storyContext: {
+      component?: ComponentFn<any>
+      args: Record<string, unknown>
+      [key: string]: unknown
+    }
+    showMain: () => void
+    showError: (error: { title: string; description: string }) => void
+    forceRemount: boolean
+  },
+  canvasElement: HTMLElement,
+): void {
+  // Always clean up the previous render
+  const prevUnmount = canvasState.get(canvasElement)
+  if (prevUnmount) {
+    prevUnmount()
+    canvasState.delete(canvasElement)
+  }
+
+  try {
+    const element = storyFn()
+    const unmount = mount(element, canvasElement)
+    canvasState.set(canvasElement, unmount)
+    showMain()
+  } catch (err) {
+    const error = err instanceof Error ? err : new Error(String(err))
+    showError({
+      title: `Error rendering story`,
+      description: error.message,
+    })
+  }
+}
+
+/**
+ * Default render implementation used when no custom `render` is provided.
+ */
+export function defaultRender(
+  component: ComponentFn<any>,
+  args: Record<string, unknown>,
+): VNodeChild {
+  const Component = component
+  return <Component {...args} />
+}

package/src/render.ts

@@ -1,75 +1 @@
-import { h } from '@pyreon/core'
-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.
- */
-const canvasState = new WeakMap<HTMLElement, () => void>()
-
-/**
- * Render a Pyreon story into a Storybook canvas element.
- *
- * This is the core integration point — Storybook calls this function
- * every time a story needs to be displayed or re-rendered (e.g. when
- * the user changes args via the Controls panel).
- *
- * It handles:
- * 1. Cleaning up the previous mount (disposing effects, removing DOM)
- * 2. Building the VNode from the story function or component + args
- * 3. Mounting the new VNode into the canvas
- */
-export function renderToCanvas(
-  {
-    storyFn,
-    showMain,
-    showError,
-  }: {
-    storyFn: () => VNodeChild
-    storyContext: {
-      component?: ComponentFn<any>
-      args: Record<string, unknown>
-      [key: string]: unknown
-    }
-    showMain: () => void
-    showError: (error: { title: string; description: string }) => void
-    forceRemount: boolean
-  },
-  canvasElement: HTMLElement,
-): void {
-  // Always clean up the previous render
-  const prevUnmount = canvasState.get(canvasElement)
-  if (prevUnmount) {
-    prevUnmount()
-    canvasState.delete(canvasElement)
-  }
-
-  try {
-    // Get the story result — either from a custom render function
-    // or by calling the component with args
-    const element = storyFn()
-
-    // Mount the Pyreon VNode tree into the canvas
-    const unmount = mount(element, canvasElement)
-    canvasState.set(canvasElement, unmount)
-
-    showMain()
-  } catch (err) {
-    const error = err instanceof Error ? err : new Error(String(err))
-    showError({
-      title: `Error rendering story`,
-      description: error.message,
-    })
-  }
-}
-
-/**
- * Default render implementation used when no custom `render` is provided.
- * Simply calls `h(component, args)`.
- */
-export function defaultRender(
-  component: ComponentFn<any>,
-  args: Record<string, unknown>,
-): VNodeChild {
-  return h(component, args)
-}
+export { defaultRender, renderToCanvas } from './render-impl'

package/src/tests/{storybook.test.ts → storybook.test.tsx}

@@ -1,15 +1,14 @@
-import { h, Fragment } from '@pyreon/core'
 import type { ComponentFn, VNodeChild } from '@pyreon/core'
-import { signal, effect } from '@pyreon/reactivity'
+import { effect, signal } from '@pyreon/reactivity'
 import { mount } from '@pyreon/runtime-dom'
-import { renderToCanvas, defaultRender } from '../render'
 import { render as previewRender } from '../preview'
+import { defaultRender, renderToCanvas } from '../render'
 import type {
-  Meta,
-  StoryObj,
   DecoratorFn,
-  StoryFn,
+  Meta,
   StoryContext,
+  StoryFn,
+  StoryObj,
 } from '../types'
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -26,7 +25,7 @@ function makeRenderContext(overrides: {
   args?: Record<string, unknown>
 }) {
   return {
-    storyFn: overrides.storyFn ?? (() => h('div', null, 'default')),
+    storyFn: overrides.storyFn ?? (() => <div>default</div>),
     storyContext: {
       component: overrides.component,
       args: overrides.args ?? {},
@@ -47,7 +46,7 @@ describe('renderToCanvas', () => {
   it('mounts a simple VNode into the canvas', () => {
     const canvas = createCanvas()
     const ctx = makeRenderContext({
-      storyFn: () => h('button', null, 'Click me'),
+      storyFn: () => <button>Click me</button>,
     })
 
     renderToCanvas(ctx, canvas)
@@ -59,12 +58,12 @@ describe('renderToCanvas', () => {
 
   it('mounts a Pyreon component with props', () => {
     function Button(props: { label: string; disabled?: boolean }) {
-      return h('button', { disabled: props.disabled ?? false }, props.label)
+      return <button disabled={props.disabled ?? false}>{props.label}</button>
     }
 
     const canvas = createCanvas()
     const ctx = makeRenderContext({
-      storyFn: () => h(Button, { label: 'Submit', disabled: true }),
+      storyFn: () => <Button label="Submit" disabled={true} />,
     })
 
     renderToCanvas(ctx, canvas)
@@ -80,13 +79,13 @@ describe('renderToCanvas', () => {
     const canvas = createCanvas()
 
     renderToCanvas(
-      makeRenderContext({ storyFn: () => h('div', null, 'First') }),
+      makeRenderContext({ storyFn: () => <div>First</div> }),
       canvas,
     )
     expect(canvas.textContent).toBe('First')
 
     renderToCanvas(
-      makeRenderContext({ storyFn: () => h('div', null, 'Second') }),
+      makeRenderContext({ storyFn: () => <div>Second</div> }),
       canvas,
     )
     expect(canvas.textContent).toBe('Second')
@@ -105,13 +104,10 @@ describe('renderToCanvas', () => {
         count()
         effectRunCount++
       })
-      return h('span', null, () => `${count()}`)
+      return <span>{() => `${count()}`}</span>
     }
 
-    renderToCanvas(
-      makeRenderContext({ storyFn: () => h(Counter, null) }),
-      canvas,
-    )
+    renderToCanvas(makeRenderContext({ storyFn: () => <Counter /> }), canvas)
 
     const initialCount = effectRunCount
     count.set(1)
@@ -119,7 +115,7 @@ describe('renderToCanvas', () => {
 
     // Re-render with a different story — should dispose previous effects
     renderToCanvas(
-      makeRenderContext({ storyFn: () => h('div', null, 'New story') }),
+      makeRenderContext({ storyFn: () => <div>New story</div> }),
       canvas,
     )
 
@@ -186,13 +182,10 @@ describe('renderToCanvas', () => {
     const count = signal(0)
 
     function Counter() {
-      return h('span', { 'data-testid': 'count' }, () => `Count: ${count()}`)
+      return <span data-testid="count">{() => `Count: ${count()}`}</span>
     }
 
-    renderToCanvas(
-      makeRenderContext({ storyFn: () => h(Counter, null) }),
-      canvas,
-    )
+    renderToCanvas(makeRenderContext({ storyFn: () => <Counter /> }), canvas)
 
     expect(canvas.textContent).toBe('Count: 0')
 
@@ -207,7 +200,7 @@ describe('renderToCanvas', () => {
 describe('defaultRender', () => {
   it('creates a VNode from component + args', () => {
     function Greeting(props: { name: string }) {
-      return h('p', null, `Hello, ${props.name}!`)
+      return <p>Hello, {props.name}!</p>
     }
 
     const canvas = createCanvas()
@@ -228,7 +221,7 @@ describe('Meta and StoryObj types', () => {
       label: string
       variant?: 'primary' | 'secondary'
     }) {
-      return h('button', { class: props.variant }, props.label)
+      return <button class={props.variant}>{props.label}</button>
     }
 
     const meta = {
@@ -244,10 +237,7 @@ describe('Meta and StoryObj types', () => {
 
   it('StoryObj inherits args from Meta', () => {
     function Input(props: { placeholder: string; disabled?: boolean }) {
-      return h('input', {
-        placeholder: props.placeholder,
-        disabled: props.disabled,
-      })
+      return <input placeholder={props.placeholder} disabled={props.disabled} />
     }
 
     const _meta = {
@@ -266,7 +256,11 @@ describe('Meta and StoryObj types', () => {
 
   it('StoryObj supports custom render function', () => {
     function Card(props: { title: string }) {
-      return h('div', { class: 'card' }, h('h2', null, props.title))
+      return (
+        <div class="card">
+          <h2>{props.title}</h2>
+        </div>
+      )
     }
 
     const _meta = {
@@ -277,7 +271,11 @@ describe('Meta and StoryObj types', () => {
     type Story = StoryObj<typeof _meta>
 
     const withWrapper: Story = {
-      render: (args) => h('div', { class: 'wrapper' }, h(Card, args)),
+      render: (args) => (
+        <div class="wrapper">
+          <Card {...args} />
+        </div>
+      ),
     }
 
     const canvas = createCanvas()
@@ -297,19 +295,15 @@ describe('Meta and StoryObj types', () => {
 describe('Decorators', () => {
   it('decorator wraps a story', () => {
     function Button(props: { label: string }) {
-      return h('button', null, props.label)
+      return <button>{props.label}</button>
     }
 
     const withPadding: DecoratorFn<{ label: string }> = (storyFn, context) => {
-      return h(
-        'div',
-        { style: 'padding: 1rem' },
-        storyFn(context.args, context),
-      )
+      return <div style="padding: 1rem">{storyFn(context.args, context)}</div>
     }
 
     const canvas = createCanvas()
-    const storyResult = withPadding((args) => h(Button, args), {
+    const storyResult = withPadding((args) => <Button {...args} />, {
       args: { label: 'Wrapped' },
       argTypes: {},
       globals: {},
@@ -328,14 +322,16 @@ describe('Decorators', () => {
 
   it('multiple decorators compose correctly', () => {
     function Text(props: { content: string }) {
-      return h('span', null, props.content)
+      return <span>{props.content}</span>
     }
 
-    const withBorder: DecoratorFn<{ content: string }> = (storyFn, ctx) =>
-      h('div', { class: 'border' }, storyFn(ctx.args, ctx))
+    const withBorder: DecoratorFn<{ content: string }> = (storyFn, ctx) => (
+      <div class="border">{storyFn(ctx.args, ctx)}</div>
+    )
 
-    const withTheme: DecoratorFn<{ content: string }> = (storyFn, ctx) =>
-      h('div', { class: 'theme-dark' }, storyFn(ctx.args, ctx))
+    const withTheme: DecoratorFn<{ content: string }> = (storyFn, ctx) => (
+      <div class="theme-dark">{storyFn(ctx.args, ctx)}</div>
+    )
 
     const context: StoryContext<{ content: string }> = {
       args: { content: 'Hello' },
@@ -348,7 +344,7 @@ describe('Decorators', () => {
     }
 
     // Compose: withTheme(withBorder(story))
-    const story: StoryFn<{ content: string }> = (args) => h(Text, args)
+    const story: StoryFn<{ content: string }> = (args) => <Text {...args} />
     const decorated = withTheme((_args, ctx) => withBorder(story, ctx), context)
 
     const canvas = createCanvas()
@@ -368,8 +364,12 @@ describe('Fragment stories', () => {
     const canvas = createCanvas()
     renderToCanvas(
       makeRenderContext({
-        storyFn: () =>
-          h(Fragment, null, h('p', null, 'Line 1'), h('p', null, 'Line 2')),
+        storyFn: () => (
+          <>
+            <p>Line 1</p>
+            <p>Line 2</p>
+          </>
+        ),
       }),
       canvas,
     )
@@ -387,7 +387,7 @@ describe('Fragment stories', () => {
 describe('preview render', () => {
   it('renders a component with args', () => {
     function Badge(props: { text: string }) {
-      return h('span', { class: 'badge' }, props.text)
+      return <span class="badge">{props.text}</span>
     }
 
     const canvas = createCanvas()