@usefragments/core 1.10.0 → 1.10.2

package/dist/storyAdapter.js

@@ -0,0 +1,371 @@
+// src/storybook-csf.ts
+import {
+  toId as storybookToId,
+  storyNameFromExport as storybookStoryNameFromExport,
+  isExportStory as storybookIsExportStory
+} from "@storybook/csf";
+var toId = (...args) => storybookToId(...args);
+var storyNameFromExport = (...args) => storybookStoryNameFromExport(...args);
+var isExportStory = (...args) => storybookIsExportStory(...args);
+
+// src/react-create-element.ts
+import { createRequire } from "module";
+function getCreateElement() {
+  try {
+    return createRequire(import.meta.url)("react").createElement;
+  } catch (error) {
+    throw new Error(
+      '@usefragments/core: story rendering requires the optional peer dependency "react" (>=18). Install react to use storyModuleToFragment default render paths.',
+      { cause: error instanceof Error ? error : void 0 }
+    );
+  }
+}
+
+// src/storyAdapter.ts
+var globalPreviewConfig = {};
+function setPreviewConfig(config) {
+  globalPreviewConfig = config;
+}
+function getPreviewConfig() {
+  return globalPreviewConfig;
+}
+function storyModuleToFragment(storyModule, filePath) {
+  const meta = storyModule.default;
+  const component = meta.component;
+  if (!component) {
+    return null;
+  }
+  const componentName = extractComponentName(meta, filePath);
+  const category = extractCategory(meta.title);
+  const props = convertArgTypes(meta.argTypes ?? {}, globalPreviewConfig.argTypes);
+  const variants = extractVariants(storyModule, component, meta);
+  const figmaUrl = extractFigmaUrl(meta.parameters);
+  const fragmentMeta = {
+    name: componentName,
+    description: meta.parameters?.docs?.description?.component ?? `${componentName} component`,
+    category,
+    tags: meta.tags?.filter((t) => t !== "autodocs"),
+    status: "stable",
+    figma: figmaUrl
+  };
+  const usage = {
+    when: [`Use ${componentName} for its intended purpose`],
+    whenNot: ["When a more specific component is available"]
+  };
+  return {
+    component,
+    meta: fragmentMeta,
+    usage,
+    props,
+    variants
+  };
+}
+function extractComponentName(meta, filePath) {
+  if (meta.title) {
+    const parts = meta.title.split("/");
+    return parts[parts.length - 1];
+  }
+  if (meta.component?.displayName) {
+    return meta.component.displayName;
+  }
+  if (meta.component?.name && meta.component.name !== "Component") {
+    return meta.component.name;
+  }
+  const match = filePath.match(/([^/\\]+)\.stories\.(tsx?|jsx?)$/);
+  return match?.[1] ?? "Unknown";
+}
+function extractCategory(title) {
+  if (!title) return "general";
+  const parts = title.split("/");
+  if (parts.length >= 3) {
+    return parts[parts.length - 2].toLowerCase();
+  }
+  return "general";
+}
+function extractFigmaUrl(parameters) {
+  if (!parameters) return void 0;
+  const design = parameters.design;
+  if (design?.url && typeof design.url === "string") {
+    return design.url;
+  }
+  if (typeof parameters.figma === "string") {
+    return parameters.figma;
+  }
+  return void 0;
+}
+function convertArgTypes(argTypes, globalArgTypes) {
+  const props = {};
+  const mergedArgTypes = { ...globalArgTypes, ...argTypes };
+  for (const [name, argType] of Object.entries(mergedArgTypes)) {
+    if (argType.table?.disable) continue;
+    if (argType.control === false && argType.action) continue;
+    const { controlType, controlOptions } = extractControlInfo(argType);
+    props[name] = {
+      type: inferPropType(argType),
+      description: argType.description ?? `${name} prop`,
+      ...argType.options && { values: argType.options },
+      ...argType.table?.defaultValue && {
+        default: argType.table.defaultValue.summary
+      },
+      ...argType.defaultValue !== void 0 && {
+        default: argType.defaultValue
+      },
+      ...argType.type?.required && { required: true },
+      ...controlType && { controlType },
+      ...controlOptions && Object.keys(controlOptions).length > 0 && { controlOptions }
+    };
+  }
+  return props;
+}
+function extractControlInfo(argType) {
+  if (argType.control === void 0 || argType.control === false) {
+    return {};
+  }
+  const control = typeof argType.control === "string" ? { type: argType.control } : argType.control;
+  const validControlTypes = [
+    "text",
+    "number",
+    "range",
+    "boolean",
+    "select",
+    "multi-select",
+    "radio",
+    "inline-radio",
+    "check",
+    "inline-check",
+    "object",
+    "file",
+    "color",
+    "date"
+  ];
+  const controlType = validControlTypes.includes(control.type) ? control.type : void 0;
+  const controlOptions = {};
+  if (control.min !== void 0) controlOptions.min = control.min;
+  if (control.max !== void 0) controlOptions.max = control.max;
+  if (control.step !== void 0) controlOptions.step = control.step;
+  if (control.presetColors) controlOptions.presetColors = control.presetColors;
+  return {
+    controlType,
+    controlOptions: Object.keys(controlOptions).length > 0 ? controlOptions : void 0
+  };
+}
+function inferPropType(argType) {
+  if (argType.action) return "function";
+  if (argType.options?.length) return "enum";
+  if (argType.type?.name) {
+    const typeMap = {
+      string: "string",
+      number: "number",
+      boolean: "boolean",
+      object: "object",
+      array: "array",
+      function: "function"
+    };
+    const mapped = typeMap[argType.type.name];
+    if (mapped) return mapped;
+  }
+  const control = typeof argType.control === "string" ? argType.control : argType.control ? argType.control.type : void 0;
+  if (control) {
+    const controlMap = {
+      // Text controls
+      text: "string",
+      // Number controls
+      number: "number",
+      range: "number",
+      // Boolean controls
+      boolean: "boolean",
+      check: "boolean",
+      "inline-check": "boolean",
+      // Enum/selection controls
+      select: "enum",
+      "multi-select": "enum",
+      radio: "enum",
+      "inline-radio": "enum",
+      // Object controls
+      object: "object",
+      file: "object",
+      // Special string controls
+      color: "string",
+      date: "string"
+    };
+    const mapped = controlMap[control];
+    if (mapped) return mapped;
+  }
+  return "string";
+}
+function isStory(value) {
+  if (typeof value === "object" && value !== null) {
+    const obj = value;
+    if ("args" in obj || "render" in obj || "play" in obj) return true;
+  }
+  if (typeof value === "function") {
+    const fn = value;
+    if ("args" in fn) return true;
+  }
+  return false;
+}
+function extractVariants(storyModule, component, meta) {
+  const variants = [];
+  for (const [exportName, exportValue] of Object.entries(storyModule)) {
+    if (exportName === "default") continue;
+    if (!isExportStory(exportName, meta)) continue;
+    if (!isStory(exportValue)) continue;
+    const story = exportValue;
+    const storyName = typeof story === "object" && story.name || typeof story === "object" && story.storyName || typeof story === "function" && story.storyName || storyNameFromExport(exportName);
+    const storyId = toId(meta.title || "Unknown", exportName);
+    let description = `${storyName} variant`;
+    if (typeof story === "object" && story.parameters?.docs?.description?.story) {
+      description = story.parameters.docs.description.story;
+    }
+    const storyPlayFn = typeof story === "object" ? story.play : story.play;
+    const hasPlayFunction = !!storyPlayFn;
+    const wrappedPlay = storyPlayFn ? async (context) => {
+      const args = {
+        ...globalPreviewConfig.args,
+        ...meta.args,
+        ...typeof story === "function" ? story.args : story.args
+      };
+      const fullContext = buildStoryContext(meta, story, args, storyId, storyName);
+      const playContext = {
+        ...fullContext,
+        canvasElement: context.canvasElement,
+        args: context.args,
+        step: context.step
+      };
+      await storyPlayFn(playContext);
+    } : void 0;
+    const storyTags = typeof story === "object" ? story.tags : void 0;
+    const loaders = collectLoaders(meta, story);
+    const variantArgs = {
+      ...globalPreviewConfig.args,
+      ...meta.args,
+      ...typeof story === "function" ? story.args : story.args
+    };
+    const hasArgs = Object.keys(variantArgs).length > 0;
+    variants.push({
+      name: storyName,
+      description,
+      render: createRenderFunction(story, component, meta, storyId, storyName),
+      // Store Storybook-specific metadata
+      ...hasPlayFunction && { hasPlayFunction: true },
+      ...wrappedPlay && { play: wrappedPlay },
+      ...storyId && { storyId },
+      ...storyTags && { tags: storyTags },
+      ...loaders.length > 0 && { loaders },
+      ...hasArgs && { args: variantArgs }
+    });
+  }
+  return variants;
+}
+function collectLoaders(meta, story) {
+  const allLoaders = [
+    ...globalPreviewConfig.loaders ?? [],
+    ...meta.loaders ?? [],
+    ...typeof story === "function" ? story.loaders ?? [] : story.loaders ?? []
+  ];
+  if (allLoaders.length === 0) {
+    return [];
+  }
+  return allLoaders.map((loader) => {
+    return async () => {
+      const minimalContext = {
+        args: {},
+        argTypes: {},
+        globals: {},
+        parameters: {},
+        id: "",
+        kind: meta.title || "Unknown",
+        name: "",
+        story: "",
+        viewMode: "story",
+        loaded: {},
+        abortSignal: new AbortController().signal,
+        componentId: "",
+        title: meta.title || "Unknown"
+      };
+      return loader(minimalContext);
+    };
+  });
+}
+function buildStoryContext(meta, story, args, storyId, storyName, loadedData) {
+  const mergedArgs = {
+    ...globalPreviewConfig.args,
+    ...meta.args,
+    ...typeof story === "object" ? story.args : story.args,
+    ...args
+  };
+  const mergedArgTypes = {
+    ...globalPreviewConfig.argTypes,
+    ...meta.argTypes,
+    ...typeof story === "object" ? story.argTypes : story.argTypes
+  };
+  const mergedParameters = {
+    ...globalPreviewConfig.parameters,
+    ...meta.parameters,
+    ...typeof story === "object" ? story.parameters : story.parameters
+  };
+  return {
+    args: mergedArgs,
+    argTypes: mergedArgTypes ?? {},
+    globals: {},
+    parameters: mergedParameters ?? {},
+    id: storyId,
+    kind: meta.title || "Unknown",
+    name: storyName,
+    story: storyName,
+    viewMode: "story",
+    loaded: loadedData ?? {},
+    abortSignal: new AbortController().signal,
+    componentId: toId(meta.title || "Unknown", ""),
+    title: meta.title || "Unknown"
+  };
+}
+function createRenderFunction(story, component, meta, storyId, storyName) {
+  return (options) => {
+    const args = {
+      ...globalPreviewConfig.args,
+      ...meta.args,
+      ...typeof story === "function" ? story.args : story.args,
+      ...options?.args
+      // Runtime overrides from viewer props panel
+    };
+    const loadedData = options?.loadedData;
+    const context = buildStoryContext(meta, story, args, storyId, storyName, loadedData);
+    let renderFn;
+    if (typeof story === "function") {
+      renderFn = () => story(args);
+    } else if (story.render) {
+      renderFn = () => story.render.length >= 2 ? story.render(args, context) : story.render(args);
+    } else if (meta.render) {
+      renderFn = () => meta.render.length >= 2 ? meta.render(args, context) : meta.render(args);
+    } else {
+      renderFn = () => getCreateElement()(component, args);
+    }
+    const allDecorators = [
+      ...globalPreviewConfig.decorators ?? [],
+      ...meta.decorators ?? [],
+      ...typeof story === "function" ? story.decorators ?? [] : story.decorators ?? []
+    ].reverse();
+    if (allDecorators.length > 0) {
+      return applyDecorators(renderFn, allDecorators, context);
+    }
+    return renderFn();
+  };
+}
+function applyDecorators(renderFn, decorators, context) {
+  let storyFn = renderFn;
+  for (const decorator of decorators) {
+    const wrappedFn = storyFn;
+    storyFn = () => decorator(wrappedFn, context);
+  }
+  return storyFn();
+}
+export {
+  getPreviewConfig,
+  isExportStory,
+  setPreviewConfig,
+  storyModuleToFragment,
+  storyNameFromExport,
+  toId
+};
+//# sourceMappingURL=storyAdapter.js.map

package/dist/storyAdapter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/storybook-csf.ts","../src/react-create-element.ts","../src/storyAdapter.ts"],"sourcesContent":["import {\n  toId as storybookToId,\n  storyNameFromExport as storybookStoryNameFromExport,\n  isExportStory as storybookIsExportStory,\n} from \"@storybook/csf\";\n\nexport const toId: typeof storybookToId = (...args) => storybookToId(...args);\nexport const storyNameFromExport: typeof storybookStoryNameFromExport = (...args) =>\n  storybookStoryNameFromExport(...args);\nexport const isExportStory: typeof storybookIsExportStory = (...args) =>\n  storybookIsExportStory(...args);\n","import { createRequire } from \"node:module\";\n\nexport function getCreateElement(): typeof import(\"react\")[\"createElement\"] {\n  try {\n    return (createRequire(import.meta.url)(\"react\") as typeof import(\"react\")).createElement;\n  } catch (error) {\n    throw new Error(\n      '@usefragments/core: story rendering requires the optional peer dependency \"react\" (>=18). Install react to use storyModuleToFragment default render paths.',\n      { cause: error instanceof Error ? error : undefined },\n    );\n  }\n}\n","/**\n * Runtime adapter for converting Storybook CSF modules to Fragment definitions.\n *\n * This operates on IMPORTED modules at runtime, not source code parsing.\n * By leveraging Vite's module system, we get 100% accurate render functions\n * without any regex or AST parsing complexity.\n *\n * Supports Storybook 8.x with both CSF2 (Template.bind) and CSF3 (object stories).\n */\n\nimport type { ComponentType, ReactNode } from \"react\";\nimport { toId, storyNameFromExport, isExportStory } from \"./storybook-csf.js\";\nimport { getCreateElement } from \"./react-create-element.js\";\nimport type {\n  FragmentDefinition,\n  FragmentMeta,\n  FragmentUsage,\n  PropDefinition,\n  FragmentVariant,\n  ControlType,\n  VariantLoader,\n  PlayFunction,\n  PlayFunctionContext,\n  VariantRenderOptions,\n} from \"./types.js\";\n\n// Re-export @storybook/csf utilities for use in other modules\nexport { toId, storyNameFromExport, isExportStory };\n\n/**\n * Storybook decorator function signature\n */\nexport type Decorator = (\n  Story: () => ReactNode,\n  context: StoryContext\n) => ReactNode;\n\n/**\n * Storybook loader function signature\n */\nexport type Loader = (context: StoryContext) => Promise<Record<string, unknown>>;\n\n/**\n * Storybook play function signature (internal, extends StoryContext)\n */\ntype StorybookPlayFunction = (context: StorybookPlayFunctionContext) => Promise<void>;\n\n/**\n * Context passed to Storybook play functions (extends StoryContext for compatibility)\n */\ninterface StorybookPlayFunctionContext extends StoryContext {\n  canvasElement: HTMLElement;\n  step: (name: string, fn: () => Promise<void>) => Promise<void>;\n}\n\n/**\n * Context passed to decorators and render functions\n */\nexport interface StoryContext {\n  args: Record<string, unknown>;\n  argTypes: Record<string, StoryArgType>;\n  globals: Record<string, unknown>;\n  parameters: Record<string, unknown>;\n  id: string;\n  kind: string;\n  name: string;\n  story: string;\n  viewMode: \"story\" | \"docs\";\n  loaded: Record<string, unknown>;\n  abortSignal: AbortSignal;\n  componentId: string;\n  title: string;\n}\n\n/**\n * Storybook Meta (default export)\n */\nexport interface StoryMeta {\n  title?: string;\n  component?: ComponentType<unknown>;\n  subcomponents?: Record<string, ComponentType<unknown>>;\n  tags?: string[];\n  parameters?: Record<string, unknown> & {\n    docs?: {\n      description?: {\n        component?: string;\n      };\n    };\n  };\n  argTypes?: Record<string, StoryArgType>;\n  args?: Record<string, unknown>;\n  decorators?: Decorator[];\n  loaders?: Loader[];\n  render?: (args: Record<string, unknown>, context?: StoryContext) => ReactNode;\n  // Story filtering\n  includeStories?: string[] | RegExp;\n  excludeStories?: string[] | RegExp;\n}\n\n/**\n * Storybook argType definition\n */\nexport interface StoryArgType {\n  control?:\n    | string\n    | false\n    | { type: string; min?: number; max?: number; step?: number; presetColors?: string[] };\n  options?: string[];\n  description?: string;\n  table?: {\n    defaultValue?: { summary: string };\n    type?: { summary: string };\n    category?: string;\n    subcategory?: string;\n    disable?: boolean;\n  };\n  type?: { name: string; required?: boolean };\n  name?: string;\n  defaultValue?: unknown;\n  if?: { arg?: string; exists?: boolean };\n  mapping?: Record<string, unknown>;\n  action?: string;\n}\n\n/**\n * Storybook Story export (CSF3)\n */\nexport interface Story {\n  args?: Record<string, unknown>;\n  argTypes?: Record<string, StoryArgType>;\n  render?: (args: Record<string, unknown>, context?: StoryContext) => ReactNode;\n  decorators?: Decorator[];\n  loaders?: Loader[];\n  play?: StorybookPlayFunction;\n  parameters?: Record<string, unknown> & {\n    docs?: {\n      description?: {\n        story?: string;\n      };\n    };\n  };\n  name?: string;\n  storyName?: string; // Legacy CSF2\n  tags?: string[];\n}\n\n/**\n * CSF2 story function (from Template.bind({})) with args attached\n */\nexport type CSF2Story = ((args: Record<string, unknown>) => ReactNode) & {\n  args?: Record<string, unknown>;\n  argTypes?: Record<string, StoryArgType>;\n  decorators?: Decorator[];\n  loaders?: Loader[];\n  play?: StorybookPlayFunction;\n  parameters?: Record<string, unknown>;\n  storyName?: string;\n};\n\n/**\n * A complete Storybook module with default meta and named story exports\n */\nexport interface StoryModule {\n  default: StoryMeta;\n  [exportName: string]: Story | CSF2Story | StoryMeta | unknown;\n}\n\n/**\n * Global configuration from preview.tsx\n */\nexport interface PreviewConfig {\n  decorators?: Decorator[];\n  parameters?: Record<string, unknown>;\n  globalTypes?: Record<string, unknown>;\n  args?: Record<string, unknown>;\n  argTypes?: Record<string, StoryArgType>;\n  loaders?: Loader[];\n}\n\n// Store for global preview config (set by previewLoader)\nlet globalPreviewConfig: PreviewConfig = {};\n\n/**\n * Set the global preview configuration loaded from .storybook/preview.tsx\n */\nexport function setPreviewConfig(config: PreviewConfig): void {\n  globalPreviewConfig = config;\n}\n\n/**\n * Get the current global preview configuration\n */\nexport function getPreviewConfig(): PreviewConfig {\n  return globalPreviewConfig;\n}\n\n/**\n * Convert a Storybook module to a Fragment definition at runtime.\n *\n * @param storyModule - The imported Storybook module\n * @param filePath - File path for metadata extraction\n * @returns A complete FragmentDefinition ready for the viewer\n */\nexport function storyModuleToFragment(\n  storyModule: StoryModule,\n  filePath: string\n): FragmentDefinition | null {\n  const meta = storyModule.default;\n  const component = meta.component;\n\n  // Stories without a component (e.g., documentation pages, icon galleries) are skipped\n  if (!component) {\n    return null;\n  }\n\n  const componentName = extractComponentName(meta, filePath);\n  const category = extractCategory(meta.title);\n  const props = convertArgTypes(meta.argTypes ?? {}, globalPreviewConfig.argTypes);\n  const variants = extractVariants(storyModule, component, meta);\n\n  // Extract Figma URL from parameters.design.url (storybook-addon-designs) or parameters.figma\n  const figmaUrl = extractFigmaUrl(meta.parameters);\n\n  const fragmentMeta: FragmentMeta = {\n    name: componentName,\n    description:\n      meta.parameters?.docs?.description?.component ??\n      `${componentName} component`,\n    category,\n    tags: meta.tags?.filter((t) => t !== \"autodocs\"),\n    status: \"stable\",\n    figma: figmaUrl,\n  };\n\n  const usage: FragmentUsage = {\n    when: [`Use ${componentName} for its intended purpose`],\n    whenNot: [\"When a more specific component is available\"],\n  };\n\n  return {\n    component,\n    meta: fragmentMeta,\n    usage,\n    props,\n    variants,\n  };\n}\n\n/**\n * Extract component name from meta or file path\n */\nfunction extractComponentName(meta: StoryMeta, filePath: string): string {\n  // Try title (last fragment of path like \"Components/Forms/Button\" -> \"Button\")\n  if (meta.title) {\n    const parts = meta.title.split(\"/\");\n    return parts[parts.length - 1];\n  }\n\n  // Try component displayName\n  if (meta.component?.displayName) {\n    return meta.component.displayName;\n  }\n\n  // Try component name\n  if (meta.component?.name && meta.component.name !== \"Component\") {\n    return meta.component.name;\n  }\n\n  // Fallback: extract from file path\n  const match = filePath.match(/([^/\\\\]+)\\.stories\\.(tsx?|jsx?)$/);\n  return match?.[1] ?? \"Unknown\";\n}\n\n/**\n * Extract category from Storybook title path\n */\nfunction extractCategory(title?: string): string {\n  if (!title) return \"general\";\n\n  const parts = title.split(\"/\");\n  // \"Components/Forms/Button\" -> \"forms\" (need at least 3 parts for a subcategory)\n  if (parts.length >= 3) {\n    return parts[parts.length - 2].toLowerCase();\n  }\n  // \"Components/Button\" -> \"general\" (no subcategory specified)\n  return \"general\";\n}\n\n/**\n * Extract Figma URL from Storybook parameters\n * Supports storybook-addon-designs format and custom figma parameter\n */\nfunction extractFigmaUrl(parameters?: Record<string, unknown>): string | undefined {\n  if (!parameters) return undefined;\n\n  // Try storybook-addon-designs format: parameters.design.url\n  const design = parameters.design as { url?: string; type?: string } | undefined;\n  if (design?.url && typeof design.url === \"string\") {\n    return design.url;\n  }\n\n  // Try custom figma parameter: parameters.figma\n  if (typeof parameters.figma === \"string\") {\n    return parameters.figma;\n  }\n\n  return undefined;\n}\n\n/**\n * Convert Storybook argTypes to Fragment props\n * Merges global argTypes from preview config with meta argTypes\n */\nfunction convertArgTypes(\n  argTypes: Record<string, StoryArgType>,\n  globalArgTypes?: Record<string, StoryArgType>\n): Record<string, PropDefinition> {\n  const props: Record<string, PropDefinition> = {};\n\n  // Merge global and meta argTypes (meta takes precedence)\n  const mergedArgTypes = { ...globalArgTypes, ...argTypes };\n\n  for (const [name, argType] of Object.entries(mergedArgTypes)) {\n    // Skip disabled argTypes\n    if (argType.table?.disable) continue;\n    // Skip action-only argTypes (no control)\n    if (argType.control === false && argType.action) continue;\n\n    // Extract control type and options\n    const { controlType, controlOptions } = extractControlInfo(argType);\n\n    props[name] = {\n      type: inferPropType(argType),\n      description: argType.description ?? `${name} prop`,\n      ...(argType.options && { values: argType.options }),\n      ...(argType.table?.defaultValue && {\n        default: argType.table.defaultValue.summary,\n      }),\n      ...(argType.defaultValue !== undefined && {\n        default: argType.defaultValue,\n      }),\n      ...(argType.type?.required && { required: true }),\n      ...(controlType && { controlType }),\n      ...(controlOptions && Object.keys(controlOptions).length > 0 && { controlOptions }),\n    };\n  }\n\n  return props;\n}\n\n/**\n * Extract control type and options from a Storybook argType\n */\nfunction extractControlInfo(argType: StoryArgType): {\n  controlType?: ControlType;\n  controlOptions?: PropDefinition[\"controlOptions\"];\n} {\n  // Handle no control or explicitly disabled control\n  if (argType.control === undefined || argType.control === false) {\n    return {};\n  }\n\n  const control = typeof argType.control === \"string\"\n    ? { type: argType.control }\n    : argType.control;\n\n  // Map control type string to ControlType\n  const validControlTypes: ControlType[] = [\n    \"text\", \"number\", \"range\", \"boolean\", \"select\", \"multi-select\",\n    \"radio\", \"inline-radio\", \"check\", \"inline-check\", \"object\", \"file\", \"color\", \"date\"\n  ];\n\n  const controlType = validControlTypes.includes(control.type as ControlType)\n    ? (control.type as ControlType)\n    : undefined;\n\n  // Extract control options for controls that need them\n  const controlOptions: PropDefinition[\"controlOptions\"] = {};\n\n  if (control.min !== undefined) controlOptions.min = control.min;\n  if (control.max !== undefined) controlOptions.max = control.max;\n  if (control.step !== undefined) controlOptions.step = control.step;\n  if (control.presetColors) controlOptions.presetColors = control.presetColors;\n\n  return {\n    controlType,\n    controlOptions: Object.keys(controlOptions).length > 0 ? controlOptions : undefined,\n  };\n}\n\n/**\n * Infer prop type from Storybook control/type\n * Handles all Storybook 8.x control types\n */\nfunction inferPropType(argType: StoryArgType): PropDefinition[\"type\"] {\n  // Action argType → function\n  if (argType.action) return \"function\";\n\n  // If has options, it's an enum\n  if (argType.options?.length) return \"enum\";\n\n  // Check explicit type\n  if (argType.type?.name) {\n    const typeMap: Record<string, PropDefinition[\"type\"]> = {\n      string: \"string\",\n      number: \"number\",\n      boolean: \"boolean\",\n      object: \"object\",\n      array: \"array\",\n      function: \"function\",\n    };\n    const mapped = typeMap[argType.type.name];\n    if (mapped) return mapped;\n  }\n\n  // Check control type\n  const control =\n    typeof argType.control === \"string\"\n      ? argType.control\n      : argType.control\n        ? argType.control.type\n        : undefined;\n\n  if (control) {\n    const controlMap: Record<string, PropDefinition[\"type\"]> = {\n      // Text controls\n      text: \"string\",\n\n      // Number controls\n      number: \"number\",\n      range: \"number\",\n\n      // Boolean controls\n      boolean: \"boolean\",\n      check: \"boolean\",\n      \"inline-check\": \"boolean\",\n\n      // Enum/selection controls\n      select: \"enum\",\n      \"multi-select\": \"enum\",\n      radio: \"enum\",\n      \"inline-radio\": \"enum\",\n\n      // Object controls\n      object: \"object\",\n      file: \"object\",\n\n      // Special string controls\n      color: \"string\",\n      date: \"string\",\n    };\n    const mapped = controlMap[control];\n    if (mapped) return mapped;\n  }\n\n  return \"string\";\n}\n\n/**\n * Check if a value looks like a Storybook story\n * Handles both CSF 3 (objects) and CSF 2 (functions from Template.bind({}))\n */\nfunction isStory(value: unknown): value is Story | CSF2Story {\n  // CSF 3: Story is an object with args/render/play\n  if (typeof value === \"object\" && value !== null) {\n    const obj = value as Record<string, unknown>;\n    if (\"args\" in obj || \"render\" in obj || \"play\" in obj) return true;\n  }\n\n  // CSF 2: Story is a function (from Template.bind({})) with args attached\n  if (typeof value === \"function\") {\n    const fn = value as ((...args: unknown[]) => unknown) & { args?: unknown };\n    if (\"args\" in fn) return true;\n  }\n\n  return false;\n}\n\n/**\n * Extract variants from story exports using @storybook/csf utilities\n */\nfunction extractVariants(\n  storyModule: StoryModule,\n  component: ComponentType<unknown>,\n  meta: StoryMeta\n): FragmentVariant[] {\n  const variants: FragmentVariant[] = [];\n\n  for (const [exportName, exportValue] of Object.entries(storyModule)) {\n    // Skip default export\n    if (exportName === \"default\") continue;\n\n    // Use isExportStory to filter based on includeStories/excludeStories\n    if (!isExportStory(exportName, meta)) continue;\n\n    // Check if it's a story\n    if (!isStory(exportValue)) continue;\n\n    const story = exportValue as Story | CSF2Story;\n\n    // Get story name using storyNameFromExport\n    const storyName =\n      (typeof story === \"object\" && story.name) ||\n      (typeof story === \"object\" && story.storyName) ||\n      (typeof story === \"function\" && story.storyName) ||\n      storyNameFromExport(exportName);\n\n    // Generate story ID matching Storybook format\n    const storyId = toId(meta.title || \"Unknown\", exportName);\n\n    // Extract description based on story format\n    let description = `${storyName} variant`;\n    if (typeof story === \"object\" && story.parameters?.docs?.description?.story) {\n      description = story.parameters.docs.description.story;\n    }\n\n    // Check for play function and capture it\n    const storyPlayFn = typeof story === \"object\" ? story.play : story.play;\n    const hasPlayFunction = !!storyPlayFn;\n\n    // Create wrapped play function that adapts Storybook context to our PlayFunctionContext\n    const wrappedPlay: PlayFunction | undefined = storyPlayFn\n      ? async (context: PlayFunctionContext): Promise<void> => {\n          // Build full Storybook context for compatibility\n          const args = {\n            ...globalPreviewConfig.args,\n            ...meta.args,\n            ...(typeof story === \"function\" ? story.args : story.args),\n          };\n          const fullContext = buildStoryContext(meta, story, args, storyId, storyName);\n\n          // Merge our context with Storybook context\n          const playContext = {\n            ...fullContext,\n            canvasElement: context.canvasElement,\n            args: context.args,\n            step: context.step,\n          };\n\n          await storyPlayFn(playContext as unknown as StorybookPlayFunctionContext);\n        }\n      : undefined;\n\n    // Get story tags\n    const storyTags = typeof story === \"object\" ? story.tags : undefined;\n\n    // Collect loaders from global, meta, and story (in order)\n    const loaders = collectLoaders(meta, story);\n\n    // Compute the merged args for this variant (for code generation)\n    const variantArgs = {\n      ...globalPreviewConfig.args,\n      ...meta.args,\n      ...(typeof story === \"function\" ? story.args : story.args),\n    };\n\n    // Only include args if there are any defined\n    const hasArgs = Object.keys(variantArgs).length > 0;\n\n    variants.push({\n      name: storyName,\n      description,\n      render: createRenderFunction(story, component, meta, storyId, storyName),\n      // Store Storybook-specific metadata\n      ...(hasPlayFunction && { hasPlayFunction: true }),\n      ...(wrappedPlay && { play: wrappedPlay }),\n      ...(storyId && { storyId }),\n      ...(storyTags && { tags: storyTags }),\n      ...(loaders.length > 0 && { loaders }),\n      ...(hasArgs && { args: variantArgs }),\n    });\n  }\n\n  return variants;\n}\n\n/**\n * Collect loaders from global, meta, and story levels\n * Returns wrapped loader functions that execute with context\n */\nfunction collectLoaders(\n  meta: StoryMeta,\n  story: Story | CSF2Story\n): VariantLoader[] {\n  const allLoaders: Loader[] = [\n    ...(globalPreviewConfig.loaders ?? []),\n    ...(meta.loaders ?? []),\n    ...(typeof story === \"function\" ? story.loaders ?? [] : story.loaders ?? []),\n  ];\n\n  if (allLoaders.length === 0) {\n    return [];\n  }\n\n  // Wrap each loader to execute without requiring context at call time\n  // The actual context will be built when the loader is executed\n  return allLoaders.map((loader) => {\n    return async (): Promise<Record<string, unknown>> => {\n      // Create a minimal context for loader execution\n      const minimalContext: StoryContext = {\n        args: {},\n        argTypes: {},\n        globals: {},\n        parameters: {},\n        id: \"\",\n        kind: meta.title || \"Unknown\",\n        name: \"\",\n        story: \"\",\n        viewMode: \"story\",\n        loaded: {},\n        abortSignal: new AbortController().signal,\n        componentId: \"\",\n        title: meta.title || \"Unknown\",\n      };\n      return loader(minimalContext);\n    };\n  });\n}\n\n/**\n * Build a StoryContext for decorators and render functions\n */\nfunction buildStoryContext(\n  meta: StoryMeta,\n  story: Story | CSF2Story,\n  args: Record<string, unknown>,\n  storyId: string,\n  storyName: string,\n  loadedData?: Record<string, unknown>\n): StoryContext {\n  const mergedArgs = {\n    ...globalPreviewConfig.args,\n    ...meta.args,\n    ...(typeof story === \"object\" ? story.args : story.args),\n    ...args,\n  };\n\n  const mergedArgTypes = {\n    ...globalPreviewConfig.argTypes,\n    ...meta.argTypes,\n    ...(typeof story === \"object\" ? story.argTypes : story.argTypes),\n  };\n\n  const mergedParameters = {\n    ...globalPreviewConfig.parameters,\n    ...meta.parameters,\n    ...(typeof story === \"object\" ? story.parameters : story.parameters),\n  };\n\n  return {\n    args: mergedArgs,\n    argTypes: mergedArgTypes ?? {},\n    globals: {},\n    parameters: mergedParameters ?? {},\n    id: storyId,\n    kind: meta.title || \"Unknown\",\n    name: storyName,\n    story: storyName,\n    viewMode: \"story\",\n    loaded: loadedData ?? {},\n    abortSignal: new AbortController().signal,\n    componentId: toId(meta.title || \"Unknown\", \"\"),\n    title: meta.title || \"Unknown\",\n  };\n}\n\n/**\n * Create a render function for a story\n * Handles both CSF 3 (objects) and CSF 2 (functions)\n * Applies decorators in correct order: story → meta → global (innermost first)\n * Accepts optional args overrides and loaded data from loaders\n */\nfunction createRenderFunction(\n  story: Story | CSF2Story,\n  component: ComponentType<unknown>,\n  meta: StoryMeta,\n  storyId: string,\n  storyName: string\n): (options?: VariantRenderOptions) => ReactNode {\n  return (options?: VariantRenderOptions) => {\n    // Merge args: global → meta → story → runtime overrides\n    const args = {\n      ...globalPreviewConfig.args,\n      ...meta.args,\n      ...(typeof story === \"function\" ? story.args : story.args),\n      ...options?.args,  // Runtime overrides from viewer props panel\n    };\n\n    const loadedData = options?.loadedData;\n\n    // Build the story context with loaded data\n    const context = buildStoryContext(meta, story, args, storyId, storyName, loadedData);\n\n    // Create the base render function\n    let renderFn: () => ReactNode;\n\n    if (typeof story === \"function\") {\n      // CSF 2: Story is a function (from Template.bind({}))\n      renderFn = () => story(args);\n    } else if (story.render) {\n      // CSF 3: Story has custom render function\n      // Support both render(args) and render(args, context) signatures\n      renderFn = () =>\n        story.render!.length >= 2\n          ? story.render!(args, context)\n          : story.render!(args);\n    } else if (meta.render) {\n      // CSF 3: Meta has default render function\n      renderFn = () =>\n        meta.render!.length >= 2\n          ? meta.render!(args, context)\n          : meta.render!(args);\n    } else {\n      // Default: render component with args\n      renderFn = () => getCreateElement()(component, args);\n    }\n\n    // Collect decorators in Storybook order\n    // story → meta → global, then reverse to apply innermost first\n    const allDecorators = [\n      ...(globalPreviewConfig.decorators ?? []),\n      ...(meta.decorators ?? []),\n      ...(typeof story === \"function\" ? story.decorators ?? [] : story.decorators ?? []),\n    ].reverse();\n\n    // Apply decorators if any\n    if (allDecorators.length > 0) {\n      return applyDecorators(renderFn, allDecorators, context);\n    }\n\n    return renderFn();\n  };\n}\n\n/**\n * Apply decorators in the correct order\n * Decorators wrap from innermost to outermost\n */\nfunction applyDecorators(\n  renderFn: () => ReactNode,\n  decorators: Decorator[],\n  context: StoryContext\n): ReactNode {\n  // Start with the base render function\n  let storyFn: () => ReactNode = renderFn;\n\n  // Each decorator wraps the previous one\n  for (const decorator of decorators) {\n    const wrappedFn = storyFn;\n    storyFn = () => decorator(wrappedFn, context);\n  }\n\n  return storyFn();\n}\n\n/**\n * Convert PascalCase to Title Case\n * @deprecated Use storyNameFromExport from @storybook/csf instead\n */\nfunction pascalToTitle(name: string): string {\n  return name.replace(/([A-Z])/g, \" $1\").trim();\n}\n"],"mappings":"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","names":[]}

package/dist/test-utils.d.ts

@@ -1,4 +1,4 @@
-import { C as CompiledBlock, b as CompiledFragment } from './governance-B5WWcmFY.js';
+import { C as CompiledBlock, c as CompiledFragment } from './governance-CLk_wkP9.js';
 import 'zod';
 import 'react';
 import './topology/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefragments/core",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "license": "MIT",
   "description": "Core types, schemas, and runtime API for Fragments component definitions",
   "author": "Conan McNicholl",
@@ -71,6 +71,14 @@
     "./test-utils": {
       "types": "./dist/test-utils.d.ts",
       "import": "./dist/test-utils.js"
+    },
+    "./story": {
+      "types": "./dist/storyAdapter.d.ts",
+      "import": "./dist/storyAdapter.js"
+    },
+    "./preview-runtime": {
+      "types": "./dist/preview-runtime.d.ts",
+      "import": "./dist/preview-runtime.js"
     }
   },
   "files": [

package/src/index.ts

@@ -501,28 +501,6 @@ export {
 } from "./policy-exclude.js";
 export type { PolicyExclude, PolicyExcludeInput } from "./policy-exclude.js";
 
-// Story adapter (runtime conversion of Storybook modules)
-export {
-  storyModuleToFragment,
-  setPreviewConfig,
-  getPreviewConfig,
-  // Re-export @storybook/csf utilities
-  toId,
-  storyNameFromExport,
-  isExportStory,
-} from "./storyAdapter.js";
-export type {
-  StoryModule,
-  StoryMeta,
-  Story,
-  StoryArgType,
-  StoryContext,
-  Decorator,
-  Loader,
-  PreviewConfig,
-  CSF2Story,
-} from "./storyAdapter.js";
-
 // Storybook adapter filtering
 export {
   checkStoryExclusion,
@@ -640,19 +618,6 @@ export type {
   CompositionGuideline,
 } from "./composition.js";
 
-// Shared preview runtime
-export {
-  executeVariantLoaders,
-  resolvePreviewRuntimeState,
-  usePreviewVariantRuntime,
-  PreviewVariantRuntime,
-} from "./preview-runtime.js";
-export type {
-  PreviewVariantLike,
-  PreviewRuntimeState,
-  PreviewRuntimeOptions,
-} from "./preview-runtime.js";
-
 // Component discovery
 export { discoverComponents, isReactComponent } from "./component-discovery.js";
 export type { DiscoverComponentsOptions } from "./component-discovery.js";

package/src/react-create-element.test.ts

@@ -0,0 +1,22 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+describe("getCreateElement", () => {
+  afterEach(() => {
+    vi.resetModules();
+    vi.doUnmock("node:module");
+  });
+
+  it("throws a clear error when react cannot be resolved", async () => {
+    vi.doMock("node:module", () => ({
+      createRequire: () => () => {
+        throw new Error("Cannot find module 'react'");
+      },
+    }));
+
+    const { getCreateElement } = await import("./react-create-element.js");
+
+    expect(() => getCreateElement()).toThrow(
+      '@usefragments/core: story rendering requires the optional peer dependency "react" (>=18). Install react to use storyModuleToFragment default render paths.',
+    );
+  });
+});

package/src/react-create-element.ts

@@ -0,0 +1,12 @@
+import { createRequire } from "node:module";
+
+export function getCreateElement(): typeof import("react")["createElement"] {
+  try {
+    return (createRequire(import.meta.url)("react") as typeof import("react")).createElement;
+  } catch (error) {
+    throw new Error(
+      '@usefragments/core: story rendering requires the optional peer dependency "react" (>=18). Install react to use storyModuleToFragment default render paths.',
+      { cause: error instanceof Error ? error : undefined },
+    );
+  }
+}

package/src/react-types.ts

@@ -3,7 +3,8 @@
  *
  * Import from '@usefragments/core/react' when you need React-typed
  * component definitions. The main '@usefragments/core' entrypoint
- * works without React installed.
+ * works without React installed — story and preview-runtime APIs live on
+ * `@usefragments/core/story` and `@usefragments/core/preview-runtime`.
  */
 
 import type { ComponentType, ReactNode, JSX } from 'react';

package/src/storyAdapter.ts

@@ -8,8 +8,9 @@
  * Supports Storybook 8.x with both CSF2 (Template.bind) and CSF3 (object stories).
  */
 
-import { createElement, type ComponentType, type ReactNode } from "react";
+import type { ComponentType, ReactNode } from "react";
 import { toId, storyNameFromExport, isExportStory } from "./storybook-csf.js";
+import { getCreateElement } from "./react-create-element.js";
 import type {
   FragmentDefinition,
   FragmentMeta,
@@ -711,7 +712,7 @@ function createRenderFunction(
           : meta.render!(args);
     } else {
       // Default: render component with args
-      renderFn = () => createElement(component, args);
+      renderFn = () => getCreateElement()(component, args);
     }
 
     // Collect decorators in Storybook order

package/src/tokens/scss.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 
 import { normalizeTokenGroupComment } from "./categories.js";
-import { parseScssTokens } from "./scss.js";
+import { parseScssTokens, parseScssVariables } from "./scss.js";
 
 /**
  * FRICTION #7d — stop prose SCSS comments from being slugified into token
@@ -92,3 +92,34 @@ describe("parseScssTokens category derivation (#7d)", () => {
     expect(out.categories.colors?.some((t) => t.name === "--fui-color-accent")).toBe(true);
   });
 });
+
+describe("parseScssVariables", () => {
+  it("retains multiline generated adapter expressions as one variable value", () => {
+    const variables = parseScssVariables(`
+$fui-font-weight-normal: map.get(
+  measurements.$legacy,
+  "typography",
+  "fontWeight",
+  "normal"
+) !default;
+`);
+
+    expect(variables.get("$fui-font-weight-normal")).toBe(
+      'map.get( measurements.$legacy, "typography", "fontWeight", "normal" )'
+    );
+  });
+
+  it("keeps Sass maps available for resolution without emitting the map container as a token", () => {
+    const scss = `
+$spacing: (
+  xs: 4px,
+  sm: 8px,
+);
+`;
+
+    expect(parseScssVariables(scss).get("$spacing")).toBe("( xs: 4px, sm: 8px, )");
+
+    const tokens = Object.values(parseScssTokens(scss).categories).flat();
+    expect(tokens.map((token) => token.name)).not.toContain("$spacing");
+  });
+});