@pyreon/storybook 0.0.1

package/lib/index.js

@@ -0,0 +1,49 @@
+import { Fragment, h, h as h$1 } from "@pyreon/core";
+import { mount, mount as mount$1 } from "@pyreon/runtime-dom";
+import { computed, effect, signal } from "@pyreon/reactivity";
+
+//#region src/render.ts
+/**
+* State tracked per canvas element so we can clean up between renders.
+*/
+const canvasState = /* @__PURE__ */ new WeakMap();
+/**
+* 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
+*/
+function renderToCanvas({ storyFn, showMain, showError }, canvasElement) {
+	const prevUnmount = canvasState.get(canvasElement);
+	if (prevUnmount) {
+		prevUnmount();
+		canvasState.delete(canvasElement);
+	}
+	try {
+		const unmount = mount$1(storyFn(), canvasElement);
+		canvasState.set(canvasElement, unmount);
+		showMain();
+	} catch (err) {
+		showError({
+			title: `Error rendering story`,
+			description: (err instanceof Error ? err : new Error(String(err))).message
+		});
+	}
+}
+/**
+* Default render implementation used when no custom `render` is provided.
+* Simply calls `h(component, args)`.
+*/
+function defaultRender(component, args) {
+	return h$1(component, args);
+}
+
+//#endregion
+export { Fragment, computed, defaultRender, effect, h, mount, renderToCanvas, signal };
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +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"}

package/lib/preset.js

@@ -0,0 +1,20 @@
+import { join } from "node:path";
+
+//#region src/preset.ts
+/**
+* Storybook preset for @pyreon/storybook.
+*
+* This file is loaded by Storybook's server when the user sets
+* `framework: "@pyreon/storybook"` in their `.storybook/main.ts`.
+*
+* It tells Storybook:
+* - Which renderer to use (via the preview entry)
+* - What framework name to report
+*/
+const addons = [];
+const previewAnnotations = [join(__dirname, "preview")];
+const core = { renderer: "@pyreon/storybook" };
+
+//#endregion
+export { addons, core, previewAnnotations };
+//# sourceMappingURL=preset.js.map

package/lib/preset.js.map

@@ -0,0 +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"}

package/lib/preview.js

@@ -0,0 +1,53 @@
+import { h } from "@pyreon/core";
+import { mount } from "@pyreon/runtime-dom";
+
+//#region src/render.ts
+/**
+* State tracked per canvas element so we can clean up between renders.
+*/
+const canvasState = /* @__PURE__ */ new WeakMap();
+/**
+* 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
+*/
+function renderToCanvas({ storyFn, showMain, showError }, canvasElement) {
+	const prevUnmount = canvasState.get(canvasElement);
+	if (prevUnmount) {
+		prevUnmount();
+		canvasState.delete(canvasElement);
+	}
+	try {
+		const unmount = mount(storyFn(), canvasElement);
+		canvasState.set(canvasElement, unmount);
+		showMain();
+	} catch (err) {
+		showError({
+			title: `Error rendering story`,
+			description: (err instanceof Error ? err : new Error(String(err))).message
+		});
+	}
+}
+
+//#endregion
+//#region src/preview.ts
+/**
+* Default render function — if the story CSF has a `component` but no
+* explicit `render`, this is used to create the VNode.
+*/
+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);
+}
+
+//#endregion
+export { render, renderToCanvas };
+//# sourceMappingURL=preview.js.map

package/lib/preview.js.map

@@ -0,0 +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"}

package/lib/types/index.d.ts

@@ -0,0 +1,116 @@
+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 { computed, effect, signal } from "@pyreon/reactivity";
+
+//#region src/types.d.ts
+/**
+ * The Pyreon renderer descriptor used by Storybook internally.
+ * This tells Storybook what our "component" and "storyResult" types are.
+ */
+interface PyreonRenderer {
+  component: ComponentFn$1<any>;
+  storyResult: VNodeChild$1;
+  canvasElement: HTMLElement;
+}
+/** Extract props type from a Pyreon component function. */
+type InferProps<T> = T extends ComponentFn$1<infer P> ? P : Props$1;
+interface StoryContext<TArgs = Props$1> {
+  args: TArgs;
+  argTypes: Record<string, unknown>;
+  globals: Record<string, unknown>;
+  id: string;
+  kind: string;
+  name: string;
+  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;
+interface Meta<TComponent extends ComponentFn$1<any> = ComponentFn$1> {
+  /** The component to document. */
+  component?: TComponent;
+  /** Display title in the sidebar. */
+  title?: string;
+  /** Decorators applied to every story in this file. */
+  decorators?: DecoratorFn<InferProps<TComponent>>[];
+  /** Default args for all stories. */
+  args?: Partial<InferProps<TComponent>>;
+  /** Arg type definitions for Controls panel. */
+  argTypes?: Record<string, unknown>;
+  /** Story parameters (backgrounds, viewport, etc.). */
+  parameters?: Record<string, unknown>;
+  /** Tags for filtering (e.g. "autodocs"). */
+  tags?: string[];
+  /**
+   * Default render function. If omitted, the component is called
+   * with args as props: `h(component, args)`.
+   */
+  render?: (args: InferProps<TComponent>, context: StoryContext<InferProps<TComponent>>) => VNodeChild$1;
+  /** Exclude arg names from Controls. */
+  excludeStories?: string | string[] | RegExp;
+  /** Include only these story names. */
+  includeStories?: string | string[] | RegExp;
+}
+interface StoryObj<TMeta extends Meta<any> = Meta> {
+  /** Args for this specific story (merged with meta.args). */
+  args?: Partial<MetaArgs<TMeta>>;
+  /** Arg type overrides. */
+  argTypes?: Record<string, unknown>;
+  /** Decorators for this story only. */
+  decorators?: DecoratorFn<MetaArgs<TMeta>>[];
+  /** Parameters for this story. */
+  parameters?: Record<string, unknown>;
+  /** Tags for this story. */
+  tags?: string[];
+  /** Override the render function for this story. */
+  render?: (args: MetaArgs<TMeta>, context: StoryContext<MetaArgs<TMeta>>) => VNodeChild$1;
+  /** Story name override. */
+  name?: string;
+  /** Play function for interaction tests. */
+  play?: (context: {
+    canvasElement: HTMLElement;
+    args: MetaArgs<TMeta>;
+    step: (name: string, fn: () => Promise<void>) => Promise<void>;
+  }) => Promise<void> | void;
+}
+/** 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
+/**
+ * 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
+ */
+declare function renderToCanvas({
+  storyFn,
+  showMain,
+  showError
+}: {
+  storyFn: () => VNodeChild$1;
+  storyContext: {
+    component?: ComponentFn$1<any>;
+    args: Record<string, unknown>;
+    [key: string]: unknown;
+  };
+  showMain: () => void;
+  showError: (error: {
+    title: string;
+    description: string;
+  }) => void;
+  forceRemount: boolean;
+}, 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
+export { type ComponentFn, type DecoratorFn, Fragment, type InferProps, type Meta, type Props, type PyreonRenderer, type StoryContext, type StoryFn, type StoryObj, type VNode, type VNodeChild, computed, defaultRender, effect, h, mount, renderToCanvas, signal };
+//# sourceMappingURL=index2.d.ts.map

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

@@ -0,0 +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"}

package/lib/types/preset.d.ts

@@ -0,0 +1,17 @@
+import { join } from "node:path";
+
+//#region src/preset.ts
+/**
+* Storybook preset for @pyreon/storybook.
+*
+* This file is loaded by Storybook's server when the user sets
+* `framework: "@pyreon/storybook"` in their `.storybook/main.ts`.
+*
+* It tells Storybook:
+* - Which renderer to use (via the preview entry)
+* - What framework name to report
+*/
+
+//#endregion
+export { addons, core, previewAnnotations };
+//# sourceMappingURL=preset.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"preset.d.ts","names":[],"sources":["../../src/preset.ts"],"mappings":""}

package/lib/types/preset2.d.ts

@@ -0,0 +1,19 @@
+//#region src/preset.d.ts
+/**
+ * Storybook preset for @pyreon/storybook.
+ *
+ * This file is loaded by Storybook's server when the user sets
+ * `framework: "@pyreon/storybook"` in their `.storybook/main.ts`.
+ *
+ * It tells Storybook:
+ * - Which renderer to use (via the preview entry)
+ * - What framework name to report
+ */
+declare const addons: string[];
+declare const previewAnnotations: string[];
+declare const core: {
+  renderer: string;
+};
+//#endregion
+export { addons, core, previewAnnotations };
+//# sourceMappingURL=preset2.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"preset2.d.ts","names":[],"sources":["../../src/preset.ts"],"mappings":";;AAiBA;;;;;AAEA;;;;cAFa,MAAA;AAAA,cAEA,kBAAA;AAAA,cAEA,IAAA;EAEZ,QAAA;AAAA"}

package/lib/types/preview.d.ts

@@ -0,0 +1,57 @@
+import { h } from "@pyreon/core";
+import { mount } from "@pyreon/runtime-dom";
+
+//#region src/render.ts
+/**
+* State tracked per canvas element so we can clean up between renders.
+*/
+
+/**
+* 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
+*/
+function renderToCanvas({
+  storyFn,
+  showMain,
+  showError
+}, canvasElement) {
+  const prevUnmount = canvasState.get(canvasElement);
+  if (prevUnmount) {
+    prevUnmount();
+    canvasState.delete(canvasElement);
+  }
+  try {
+    const unmount = mount(storyFn(), canvasElement);
+    canvasState.set(canvasElement, unmount);
+    showMain();
+  } catch (err) {
+    showError({
+      title: `Error rendering story`,
+      description: (err instanceof Error ? err : new Error(String(err))).message
+    });
+  }
+}
+
+//#endregion
+//#region src/preview.ts
+/**
+* Default render function — if the story CSF has a `component` but no
+* explicit `render`, this is used to create the VNode.
+*/
+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);
+}
+
+//#endregion
+export { render, renderToCanvas };
+//# sourceMappingURL=preview.d.ts.map

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

@@ -0,0 +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"}

package/lib/types/preview2.d.ts

@@ -0,0 +1,45 @@
+import { ComponentFn, VNodeChild } from "@pyreon/core";
+
+//#region src/render.d.ts
+/**
+ * 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
+ */
+declare 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;
+//#endregion
+//#region src/preview.d.ts
+/**
+ * Default render function — if the story CSF has a `component` but no
+ * explicit `render`, this is used to create the VNode.
+ */
+declare function render<TArgs extends Record<string, unknown>>(args: TArgs, context: {
+  component?: ComponentFn<any>;
+}): VNodeChild;
+//#endregion
+export { render, renderToCanvas };
+//# sourceMappingURL=preview2.d.ts.map

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

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@pyreon/storybook",
+  "version": "0.0.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"
+  },
+  "homepage": "https://github.com/pyreon/fundamentals/tree/main/packages/storybook#readme",
+  "bugs": {
+    "url": "https://github.com/pyreon/fundamentals/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/types/index.d.ts"
+    },
+    "./preset": {
+      "bun": "./src/preset.ts",
+      "import": "./lib/preset.js",
+      "types": "./lib/types/preset.d.ts"
+    },
+    "./preview": {
+      "bun": "./src/preview.ts",
+      "import": "./lib/preview.js",
+      "types": "./lib/types/preview.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "vl_rolldown_build",
+    "dev": "vl_rolldown_build-watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@pyreon/core": "^0.2.1",
+    "@pyreon/reactivity": "^0.2.1",
+    "@pyreon/runtime-dom": "^0.2.1",
+    "storybook": ">=8.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,45 @@
+/**
+ * @pyreon/storybook — Storybook renderer for Pyreon components.
+ *
+ * Usage in .storybook/main.ts:
+ *   framework: "@pyreon/storybook"
+ *
+ * Usage in stories:
+ *   import type { Meta, StoryObj } from "@pyreon/storybook"
+ *   import { Button } from "./Button"
+ *
+ *   const meta = {
+ *     component: Button,
+ *     args: { label: "Click me" },
+ *   } satisfies Meta<typeof Button>
+ *
+ *   export default meta
+ *   type Story = StoryObj<typeof meta>
+ *
+ *   export const Primary: Story = {
+ *     args: { variant: "primary" },
+ *   }
+ */
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export type {
+  DecoratorFn,
+  InferProps,
+  Meta,
+  PyreonRenderer,
+  StoryContext,
+  StoryFn,
+  StoryObj,
+} from './types'
+
+// ─── Renderer ────────────────────────────────────────────────────────────────
+
+export { renderToCanvas, defaultRender } 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 { mount } from '@pyreon/runtime-dom'

package/src/preset.ts

@@ -0,0 +1,24 @@
+/**
+ * Storybook preset for @pyreon/storybook.
+ *
+ * This file is loaded by Storybook's server when the user sets
+ * `framework: "@pyreon/storybook"` in their `.storybook/main.ts`.
+ *
+ * It tells Storybook:
+ * - Which renderer to use (via the preview entry)
+ * - What framework name to report
+ */
+
+import { dirname, join } from 'node:path'
+
+function _getAbsolutePath(value: string): string {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+
+export const addons: string[] = []
+
+export const previewAnnotations: string[] = [join(__dirname, 'preview')]
+
+export const core = {
+  renderer: '@pyreon/storybook',
+}

package/src/preview.ts

@@ -0,0 +1,29 @@
+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)
+}

package/src/render.ts

@@ -0,0 +1,75 @@
+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)
+}