@geenius/storybook 0.1.0

package/dist/react.js

@@ -0,0 +1,253 @@
+import { filterSurface } from './chunk-FB7KPF72.js';
+import { getStoredTheme, setHashRoute, setStoredTheme, getHashRoute, matchesShortcut, DEFAULT_SHORTCUTS, applyTheme, resolveTheme } from './chunk-IEHIPVSX.js';
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function isTypingTarget(target) {
+  return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target instanceof HTMLElement && target.isContentEditable;
+}
+function isFocusSearchShortcut(event) {
+  return matchesShortcut(event, DEFAULT_SHORTCUTS.focusSearch) || matchesShortcut(event, "Cmd+K") || matchesShortcut(event, "Ctrl+K");
+}
+function syncTheme(mode) {
+  applyTheme(resolveTheme(mode));
+  if (mode !== "system" || typeof window === "undefined") {
+    return () => void 0;
+  }
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  const handleChange = () => applyTheme(resolveTheme("system"));
+  media.addEventListener("change", handleChange);
+  return () => media.removeEventListener("change", handleChange);
+}
+function StoryDeck(props) {
+  return /* @__PURE__ */ jsxs("section", { className: "gsb-story-deck", children: [
+    /* @__PURE__ */ jsxs("header", { className: "gsb-story-deck__header", children: [
+      props.eyebrow ? /* @__PURE__ */ jsx("p", { className: "gsb-eyebrow", children: props.eyebrow }) : null,
+      /* @__PURE__ */ jsx("h2", { className: "gsb-story-deck__title", children: props.title }),
+      /* @__PURE__ */ jsx("p", { className: "gsb-story-deck__summary", children: props.summary }),
+      props.actions
+    ] }),
+    props.children
+  ] });
+}
+function StoryGrid(props) {
+  return /* @__PURE__ */ jsx("div", { className: `gsb-story-grid gsb-story-grid--${props.columns ?? 2}`, children: props.children });
+}
+function StoryCard(props) {
+  const toneClass = props.tone && props.tone !== "default" ? ` gsb-card--${props.tone}` : "";
+  return /* @__PURE__ */ jsxs("section", { className: `gsb-card${toneClass}`, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "gsb-card__title", children: props.title }),
+      props.summary ? /* @__PURE__ */ jsx("p", { className: "gsb-card__summary", children: props.summary }) : null
+    ] }),
+    props.children
+  ] });
+}
+function StoryNote(props) {
+  const toneClass = props.tone && props.tone !== "info" ? ` gsb-note--${props.tone}` : "";
+  return /* @__PURE__ */ jsx("div", { className: `gsb-note${toneClass}`, children: props.children });
+}
+function StoryMetrics(props) {
+  return /* @__PURE__ */ jsx("div", { className: "gsb-metrics", children: props.items.map((item) => /* @__PURE__ */ jsxs("div", { className: "gsb-metric", children: [
+    /* @__PURE__ */ jsx("p", { className: "gsb-metric__label", children: item.label }),
+    /* @__PURE__ */ jsx("p", { className: "gsb-metric__value", children: item.value }),
+    item.detail ? /* @__PURE__ */ jsx("p", { className: "gsb-metric__detail", children: item.detail }) : null
+  ] }, item.label)) });
+}
+function StoryComparison(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "gsb-comparison", children: [
+    /* @__PURE__ */ jsxs("section", { className: "gsb-comparison__pane", children: [
+      /* @__PURE__ */ jsx("span", { className: "gsb-pill gsb-pill--accent", children: props.primaryLabel }),
+      /* @__PURE__ */ jsx("div", { className: "gsb-comparison__canvas", children: props.primary })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "gsb-comparison__pane", children: [
+      /* @__PURE__ */ jsx("span", { className: "gsb-pill", children: props.secondaryLabel }),
+      /* @__PURE__ */ jsx("div", { className: "gsb-comparison__canvas", children: props.secondary })
+    ] })
+  ] });
+}
+function ReactStorybookApp(props) {
+  const allStories = useMemo(
+    () => props.sections.flatMap((section) => section.stories),
+    [props.sections]
+  );
+  const allIds = useMemo(() => allStories.map((story) => story.id), [allStories]);
+  const resolveRoute = () => {
+    const route = getHashRoute(allIds);
+    return route === "dashboard" ? props.defaultStoryId : route;
+  };
+  const [activeStory, setActiveStory] = useState(resolveRoute);
+  const [search, setSearch] = useState("");
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [themeMode, setThemeMode] = useState(
+    () => getStoredTheme("dark")
+  );
+  const searchInputRef = useRef(null);
+  useEffect(() => syncTheme(themeMode), [themeMode]);
+  useEffect(() => {
+    setHashRoute(activeStory);
+  }, [activeStory]);
+  useEffect(() => {
+    const handleHashChange = () => setActiveStory(resolveRoute());
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [allIds, props.defaultStoryId]);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (!isTypingTarget(event.target) && isFocusSearchShortcut(event)) {
+        event.preventDefault();
+        setSidebarOpen(true);
+        searchInputRef.current?.focus();
+        return;
+      }
+      if (isTypingTarget(event.target)) return;
+      if (matchesShortcut(event, DEFAULT_SHORTCUTS.toggleTheme)) {
+        event.preventDefault();
+        setThemeMode((previous) => {
+          const next = previous === "dark" ? "light" : previous === "light" ? "system" : "dark";
+          setStoredTheme(next);
+          return next;
+        });
+        return;
+      }
+      if (matchesShortcut(event, DEFAULT_SHORTCUTS.goHome)) {
+        event.preventDefault();
+        setActiveStory(props.defaultStoryId);
+        return;
+      }
+      if (matchesShortcut(event, DEFAULT_SHORTCUTS.toggleSidebar)) {
+        event.preventDefault();
+        setSidebarOpen((previous) => !previous);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [props.defaultStoryId]);
+  const filteredSections = useMemo(() => {
+    if (!search.trim()) return props.sections;
+    const filtered = filterSurface(props.sections, search);
+    return filtered.map((section) => {
+      const original = props.sections.find(
+        (candidate) => candidate.title === section.title
+      );
+      return {
+        ...original,
+        stories: original.stories.filter(
+          (story) => section.stories.some((candidate) => candidate.id === story.id)
+        )
+      };
+    });
+  }, [props.sections, search]);
+  const activeMeta = allStories.find((story) => story.id === activeStory) ?? allStories[0];
+  const ActiveComponent = props.components[activeMeta.id];
+  const themeLabel = themeMode === "dark" ? "Dark" : themeMode === "light" ? "Light" : "System";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "gsb-shell", children: [
+      /* @__PURE__ */ jsxs("aside", { className: `gsb-sidebar${sidebarOpen ? " is-open" : ""}`, children: [
+        /* @__PURE__ */ jsxs("div", { className: "gsb-sidebar__top", children: [
+          /* @__PURE__ */ jsxs("div", { className: "gsb-sidebar__brand", children: [
+            /* @__PURE__ */ jsx("p", { className: "gsb-eyebrow", children: props.frameworkLabel }),
+            /* @__PURE__ */ jsx("h1", { className: "gsb-sidebar__title", children: props.packageName }),
+            /* @__PURE__ */ jsx("p", { className: "gsb-sidebar__summary", children: props.overview })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "gsb-count", children: allStories.length })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "0.5rem",
+              marginBottom: "1rem",
+              padding: "0 0.25rem"
+            },
+            children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "gsb-theme-toggle",
+                onClick: () => setThemeMode((previous) => {
+                  const next = previous === "dark" ? "light" : previous === "light" ? "system" : "dark";
+                  setStoredTheme(next);
+                  return next;
+                }),
+                children: themeLabel
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "gsb-search", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: searchInputRef,
+            type: "search",
+            value: search,
+            onChange: (event) => setSearch(event.target.value),
+            placeholder: "Search stories, tags, or ids\u2026",
+            className: "gsb-search__input"
+          }
+        ) }),
+        filteredSections.length === 0 ? /* @__PURE__ */ jsx("div", { className: "gsb-empty", children: "No stories match this search." }) : filteredSections.map((section) => /* @__PURE__ */ jsxs("section", { className: "gsb-sidebar__section", children: [
+          /* @__PURE__ */ jsx("h2", { className: "gsb-sidebar__section-title", children: section.title }),
+          /* @__PURE__ */ jsx("div", { className: "gsb-sidebar__items", children: section.stories.map((story) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: `gsb-sidebar__item${story.id === activeMeta.id ? " is-active" : ""}`,
+              onClick: () => {
+                setActiveStory(story.id);
+                setSidebarOpen(false);
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "gsb-sidebar__item-title", children: [
+                  /* @__PURE__ */ jsx("span", { children: story.label }),
+                  story.tags?.[0] ? /* @__PURE__ */ jsx("span", { className: "gsb-pill", children: story.tags[0] }) : null
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "gsb-sidebar__item-id", children: story.id }),
+                story.description ? /* @__PURE__ */ jsx("div", { className: "gsb-sidebar__item-description", children: story.description }) : null
+              ]
+            },
+            story.id
+          )) })
+        ] }, section.title))
+      ] }),
+      /* @__PURE__ */ jsx("main", { className: "gsb-main", children: /* @__PURE__ */ jsxs("div", { className: "gsb-main__inner", children: [
+        /* @__PURE__ */ jsx("div", { className: "gsb-topbar", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "gsb-nav-toggle",
+            onClick: () => setSidebarOpen(true),
+            children: "Browse stories"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("header", { className: "gsb-hero", children: [
+          /* @__PURE__ */ jsxs("div", { className: "gsb-hero__meta", children: [
+            /* @__PURE__ */ jsx("span", { className: "gsb-pill gsb-pill--accent", children: props.frameworkLabel }),
+            /* @__PURE__ */ jsx("span", { className: "gsb-pill", children: activeMeta.id }),
+            activeMeta.tags?.map((tag) => /* @__PURE__ */ jsx("span", { className: "gsb-pill", children: tag }, tag))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "gsb-story-deck__header", children: [
+            /* @__PURE__ */ jsx("p", { className: "gsb-eyebrow", children: "Story surface" }),
+            /* @__PURE__ */ jsx("h2", { className: "gsb-hero__title", children: activeMeta.label }),
+            activeMeta.description ? /* @__PURE__ */ jsx("p", { className: "gsb-hero__summary", children: activeMeta.description }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "gsb-story-space", children: /* @__PURE__ */ jsx(ActiveComponent, {}) })
+      ] }) })
+    ] }),
+    sidebarOpen ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "gsb-backdrop",
+        onClick: () => setSidebarOpen(false),
+        "aria-label": "Close navigation"
+      }
+    ) : null
+  ] });
+}
+
+export { ReactStorybookApp, StoryCard, StoryComparison, StoryDeck, StoryGrid, StoryMetrics, StoryNote };
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react.tsx"],"names":[],"mappings":"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","file":"react.js","sourcesContent":["import {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentType,\n  type ReactNode,\n} from 'react'\nimport { filterSurface } from './surface.js'\nimport type { ThemeMode } from './types.js'\nimport {\n  applyTheme,\n  DEFAULT_SHORTCUTS,\n  getHashRoute,\n  getStoredTheme,\n  matchesShortcut,\n  resolveTheme,\n  setHashRoute,\n  setStoredTheme,\n} from './utils.js'\n\nexport type StoryEntry<StoryId extends string> = {\n  id: StoryId\n  label: string\n  description?: string\n  tags?: readonly string[]\n}\n\nexport type StorySection<StoryId extends string> = {\n  title: string\n  stories: readonly StoryEntry<StoryId>[]\n}\n\nexport type StoryComponentMap<StoryId extends string> = Record<\n  StoryId,\n  ComponentType<Record<string, never>>\n>\n\nfunction isTypingTarget(target: EventTarget | null): boolean {\n  return (\n    target instanceof HTMLInputElement ||\n    target instanceof HTMLTextAreaElement ||\n    target instanceof HTMLSelectElement ||\n    (target instanceof HTMLElement && target.isContentEditable)\n  )\n}\n\nfunction isFocusSearchShortcut(event: KeyboardEvent): boolean {\n  return (\n    matchesShortcut(event, DEFAULT_SHORTCUTS.focusSearch) ||\n    matchesShortcut(event, 'Cmd+K') ||\n    matchesShortcut(event, 'Ctrl+K')\n  )\n}\n\nfunction syncTheme(mode: ThemeMode): () => void {\n  applyTheme(resolveTheme(mode))\n\n  if (mode !== 'system' || typeof window === 'undefined') {\n    return () => undefined\n  }\n\n  const media = window.matchMedia('(prefers-color-scheme: dark)')\n  const handleChange = () => applyTheme(resolveTheme('system'))\n\n  media.addEventListener('change', handleChange)\n  return () => media.removeEventListener('change', handleChange)\n}\n\nexport function StoryDeck(props: {\n  eyebrow?: string\n  title: string\n  summary: string\n  children: ReactNode\n  actions?: ReactNode\n}) {\n  return (\n    <section className=\"gsb-story-deck\">\n      <header className=\"gsb-story-deck__header\">\n        {props.eyebrow ? <p className=\"gsb-eyebrow\">{props.eyebrow}</p> : null}\n        <h2 className=\"gsb-story-deck__title\">{props.title}</h2>\n        <p className=\"gsb-story-deck__summary\">{props.summary}</p>\n        {props.actions}\n      </header>\n      {props.children}\n    </section>\n  )\n}\n\nexport function StoryGrid(props: { columns?: 2 | 3; children: ReactNode }) {\n  return (\n    <div className={`gsb-story-grid gsb-story-grid--${props.columns ?? 2}`}>\n      {props.children}\n    </div>\n  )\n}\n\nexport function StoryCard(props: {\n  title: string\n  summary?: string\n  tone?: 'default' | 'accent' | 'success' | 'warning' | 'danger'\n  children: ReactNode\n}) {\n  const toneClass =\n    props.tone && props.tone !== 'default' ? ` gsb-card--${props.tone}` : ''\n\n  return (\n    <section className={`gsb-card${toneClass}`}>\n      <div>\n        <h3 className=\"gsb-card__title\">{props.title}</h3>\n        {props.summary ? (\n          <p className=\"gsb-card__summary\">{props.summary}</p>\n        ) : null}\n      </div>\n      {props.children}\n    </section>\n  )\n}\n\nexport function StoryNote(props: {\n  tone?: 'info' | 'warning' | 'success' | 'danger'\n  children: ReactNode\n}) {\n  const toneClass =\n    props.tone && props.tone !== 'info' ? ` gsb-note--${props.tone}` : ''\n  return <div className={`gsb-note${toneClass}`}>{props.children}</div>\n}\n\nexport function StoryMetrics(props: {\n  items: ReadonlyArray<{ label: string; value: string; detail?: string }>\n}) {\n  return (\n    <div className=\"gsb-metrics\">\n      {props.items.map((item) => (\n        <div key={item.label} className=\"gsb-metric\">\n          <p className=\"gsb-metric__label\">{item.label}</p>\n          <p className=\"gsb-metric__value\">{item.value}</p>\n          {item.detail ? (\n            <p className=\"gsb-metric__detail\">{item.detail}</p>\n          ) : null}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport function StoryComparison(props: {\n  primaryLabel: string\n  secondaryLabel: string\n  primary: ReactNode\n  secondary: ReactNode\n}) {\n  return (\n    <div className=\"gsb-comparison\">\n      <section className=\"gsb-comparison__pane\">\n        <span className=\"gsb-pill gsb-pill--accent\">{props.primaryLabel}</span>\n        <div className=\"gsb-comparison__canvas\">{props.primary}</div>\n      </section>\n      <section className=\"gsb-comparison__pane\">\n        <span className=\"gsb-pill\">{props.secondaryLabel}</span>\n        <div className=\"gsb-comparison__canvas\">{props.secondary}</div>\n      </section>\n    </div>\n  )\n}\n\nexport function ReactStorybookApp<StoryId extends string>(props: {\n  packageName: string\n  frameworkLabel: string\n  overview: string\n  sections: readonly StorySection<StoryId>[]\n  components: StoryComponentMap<StoryId>\n  defaultStoryId: StoryId\n}) {\n  const allStories = useMemo(\n    () => props.sections.flatMap((section) => section.stories),\n    [props.sections],\n  )\n  const allIds = useMemo(() => allStories.map((story) => story.id), [allStories])\n\n  const resolveRoute = () => {\n    const route = getHashRoute(allIds)\n    return route === 'dashboard' ? props.defaultStoryId : (route as StoryId)\n  }\n\n  const [activeStory, setActiveStory] = useState<StoryId>(resolveRoute)\n  const [search, setSearch] = useState('')\n  const [sidebarOpen, setSidebarOpen] = useState(false)\n  const [themeMode, setThemeMode] = useState<ThemeMode>(() =>\n    getStoredTheme('dark'),\n  )\n  const searchInputRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => syncTheme(themeMode), [themeMode])\n\n  useEffect(() => {\n    setHashRoute(activeStory)\n  }, [activeStory])\n\n  useEffect(() => {\n    const handleHashChange = () => setActiveStory(resolveRoute())\n    window.addEventListener('hashchange', handleHashChange)\n    return () => window.removeEventListener('hashchange', handleHashChange)\n  }, [allIds, props.defaultStoryId])\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (!isTypingTarget(event.target) && isFocusSearchShortcut(event)) {\n        event.preventDefault()\n        setSidebarOpen(true)\n        searchInputRef.current?.focus()\n        return\n      }\n\n      if (isTypingTarget(event.target)) return\n\n      if (matchesShortcut(event, DEFAULT_SHORTCUTS.toggleTheme)) {\n        event.preventDefault()\n        setThemeMode((previous) => {\n          const next =\n            previous === 'dark'\n              ? 'light'\n              : previous === 'light'\n                ? 'system'\n                : 'dark'\n          setStoredTheme(next)\n          return next\n        })\n        return\n      }\n\n      if (matchesShortcut(event, DEFAULT_SHORTCUTS.goHome)) {\n        event.preventDefault()\n        setActiveStory(props.defaultStoryId)\n        return\n      }\n\n      if (matchesShortcut(event, DEFAULT_SHORTCUTS.toggleSidebar)) {\n        event.preventDefault()\n        setSidebarOpen((previous) => !previous)\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n    return () => window.removeEventListener('keydown', handleKeyDown)\n  }, [props.defaultStoryId])\n\n  const filteredSections = useMemo(() => {\n    if (!search.trim()) return props.sections\n\n    const filtered = filterSurface(props.sections, search)\n    return filtered.map((section) => {\n      const original = props.sections.find(\n        (candidate) => candidate.title === section.title,\n      )!\n\n      return {\n        ...original,\n        stories: original.stories.filter((story) =>\n          section.stories.some((candidate) => candidate.id === story.id),\n        ),\n      }\n    })\n  }, [props.sections, search])\n\n  const activeMeta =\n    allStories.find((story) => story.id === activeStory) ?? allStories[0]\n  const ActiveComponent = props.components[activeMeta.id] as ComponentType<\n    Record<string, never>\n  >\n  const themeLabel =\n    themeMode === 'dark'\n      ? 'Dark'\n      : themeMode === 'light'\n        ? 'Light'\n        : 'System'\n\n  return (\n    <>\n      <div className=\"gsb-shell\">\n        <aside className={`gsb-sidebar${sidebarOpen ? ' is-open' : ''}`}>\n          <div className=\"gsb-sidebar__top\">\n            <div className=\"gsb-sidebar__brand\">\n              <p className=\"gsb-eyebrow\">{props.frameworkLabel}</p>\n              <h1 className=\"gsb-sidebar__title\">{props.packageName}</h1>\n              <p className=\"gsb-sidebar__summary\">{props.overview}</p>\n            </div>\n            <span className=\"gsb-count\">{allStories.length}</span>\n          </div>\n\n          <div\n            style={{\n              display: 'flex',\n              gap: '0.5rem',\n              marginBottom: '1rem',\n              padding: '0 0.25rem',\n            }}\n          >\n            <button\n              type=\"button\"\n              className=\"gsb-theme-toggle\"\n              onClick={() =>\n                setThemeMode((previous) => {\n                  const next =\n                    previous === 'dark'\n                      ? 'light'\n                      : previous === 'light'\n                        ? 'system'\n                        : 'dark'\n                  setStoredTheme(next)\n                  return next\n                })\n              }\n            >\n              {themeLabel}\n            </button>\n          </div>\n\n          <div className=\"gsb-search\">\n            <input\n              ref={searchInputRef}\n              type=\"search\"\n              value={search}\n              onChange={(event) => setSearch(event.target.value)}\n              placeholder=\"Search stories, tags, or ids…\"\n              className=\"gsb-search__input\"\n            />\n          </div>\n\n          {filteredSections.length === 0 ? (\n            <div className=\"gsb-empty\">No stories match this search.</div>\n          ) : (\n            filteredSections.map((section) => (\n              <section key={section.title} className=\"gsb-sidebar__section\">\n                <h2 className=\"gsb-sidebar__section-title\">{section.title}</h2>\n                <div className=\"gsb-sidebar__items\">\n                  {section.stories.map((story) => (\n                    <button\n                      key={story.id}\n                      type=\"button\"\n                      className={`gsb-sidebar__item${story.id === activeMeta.id ? ' is-active' : ''}`}\n                      onClick={() => {\n                        setActiveStory(story.id)\n                        setSidebarOpen(false)\n                      }}\n                    >\n                      <div className=\"gsb-sidebar__item-title\">\n                        <span>{story.label}</span>\n                        {story.tags?.[0] ? (\n                          <span className=\"gsb-pill\">{story.tags[0]}</span>\n                        ) : null}\n                      </div>\n                      <div className=\"gsb-sidebar__item-id\">{story.id}</div>\n                      {story.description ? (\n                        <div className=\"gsb-sidebar__item-description\">\n                          {story.description}\n                        </div>\n                      ) : null}\n                    </button>\n                  ))}\n                </div>\n              </section>\n            ))\n          )}\n        </aside>\n\n        <main className=\"gsb-main\">\n          <div className=\"gsb-main__inner\">\n            <div className=\"gsb-topbar\">\n              <button\n                type=\"button\"\n                className=\"gsb-nav-toggle\"\n                onClick={() => setSidebarOpen(true)}\n              >\n                Browse stories\n              </button>\n            </div>\n\n            <header className=\"gsb-hero\">\n              <div className=\"gsb-hero__meta\">\n                <span className=\"gsb-pill gsb-pill--accent\">\n                  {props.frameworkLabel}\n                </span>\n                <span className=\"gsb-pill\">{activeMeta.id}</span>\n                {activeMeta.tags?.map((tag) => (\n                  <span key={tag} className=\"gsb-pill\">\n                    {tag}\n                  </span>\n                ))}\n              </div>\n              <div className=\"gsb-story-deck__header\">\n                <p className=\"gsb-eyebrow\">Story surface</p>\n                <h2 className=\"gsb-hero__title\">{activeMeta.label}</h2>\n                {activeMeta.description ? (\n                  <p className=\"gsb-hero__summary\">{activeMeta.description}</p>\n                ) : null}\n              </div>\n            </header>\n\n            <div className=\"gsb-story-space\">\n              <ActiveComponent />\n            </div>\n          </div>\n        </main>\n      </div>\n\n      {sidebarOpen ? (\n        <button\n          type=\"button\"\n          className=\"gsb-backdrop\"\n          onClick={() => setSidebarOpen(false)}\n          aria-label=\"Close navigation\"\n        />\n      ) : null}\n    </>\n  )\n}\n"]}

package/dist/solidjs.d.ts

@@ -0,0 +1,58 @@
+import * as solid_js_h_jsx_runtime from 'solid-js/h/jsx-runtime';
+import { Component, JSX } from 'solid-js';
+
+type StoryEntry<StoryId extends string> = {
+    id: StoryId;
+    label: string;
+    description?: string;
+    tags?: readonly string[];
+};
+type StorySection<StoryId extends string> = {
+    title: string;
+    stories: readonly StoryEntry<StoryId>[];
+};
+type StoryComponentMap<StoryId extends string> = Record<StoryId, Component<Record<string, never>>>;
+declare function StoryDeck(props: {
+    eyebrow?: string;
+    title: string;
+    summary: string;
+    children: JSX.Element;
+    actions?: JSX.Element;
+}): solid_js_h_jsx_runtime.JSX.Element;
+declare function StoryGrid(props: {
+    columns?: 2 | 3;
+    children: JSX.Element;
+}): solid_js_h_jsx_runtime.JSX.Element;
+declare function StoryCard(props: {
+    title: string;
+    summary?: string;
+    tone?: 'default' | 'accent' | 'success' | 'warning' | 'danger';
+    children: JSX.Element;
+}): solid_js_h_jsx_runtime.JSX.Element;
+declare function StoryNote(props: {
+    tone?: 'info' | 'warning' | 'success' | 'danger';
+    children: JSX.Element;
+}): solid_js_h_jsx_runtime.JSX.Element;
+declare function StoryMetrics(props: {
+    items: ReadonlyArray<{
+        label: string;
+        value: string;
+        detail?: string;
+    }>;
+}): solid_js_h_jsx_runtime.JSX.Element;
+declare function StoryComparison(props: {
+    primaryLabel: string;
+    secondaryLabel: string;
+    primary: JSX.Element;
+    secondary: JSX.Element;
+}): solid_js_h_jsx_runtime.JSX.Element;
+declare function SolidStorybookApp<StoryId extends string>(props: {
+    packageName: string;
+    frameworkLabel: string;
+    overview: string;
+    sections: readonly StorySection<StoryId>[];
+    components: StoryComponentMap<StoryId>;
+    defaultStoryId: StoryId;
+}): solid_js_h_jsx_runtime.JSX.Element;
+
+export { SolidStorybookApp, StoryCard, StoryComparison, type StoryComponentMap, StoryDeck, type StoryEntry, StoryGrid, StoryMetrics, StoryNote, type StorySection };

package/dist/solidjs.js

@@ -0,0 +1,260 @@
+import { filterSurface } from './chunk-FB7KPF72.js';
+import { getStoredTheme, setHashRoute, setStoredTheme, getHashRoute, matchesShortcut, DEFAULT_SHORTCUTS, applyTheme, resolveTheme } from './chunk-IEHIPVSX.js';
+import { createMemo, createSignal, createEffect, onCleanup } from 'solid-js';
+import { jsxs, jsx, Fragment } from 'solid-js/h/jsx-runtime';
+
+function isTypingTarget(target) {
+  return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target instanceof HTMLElement && target.isContentEditable;
+}
+function isFocusSearchShortcut(event) {
+  return matchesShortcut(event, DEFAULT_SHORTCUTS.focusSearch) || matchesShortcut(event, "Cmd+K") || matchesShortcut(event, "Ctrl+K");
+}
+function syncTheme(mode) {
+  applyTheme(resolveTheme(mode));
+  if (mode !== "system" || typeof window === "undefined") {
+    return () => void 0;
+  }
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  const handleChange = () => applyTheme(resolveTheme("system"));
+  media.addEventListener("change", handleChange);
+  return () => media.removeEventListener("change", handleChange);
+}
+function StoryDeck(props) {
+  return /* @__PURE__ */ jsxs("section", { class: "gsb-story-deck", children: [
+    /* @__PURE__ */ jsxs("header", { class: "gsb-story-deck__header", children: [
+      props.eyebrow ? /* @__PURE__ */ jsx("p", { class: "gsb-eyebrow", children: props.eyebrow }) : null,
+      /* @__PURE__ */ jsx("h2", { class: "gsb-story-deck__title", children: props.title }),
+      /* @__PURE__ */ jsx("p", { class: "gsb-story-deck__summary", children: props.summary }),
+      props.actions
+    ] }),
+    props.children
+  ] });
+}
+function StoryGrid(props) {
+  return /* @__PURE__ */ jsx("div", { class: `gsb-story-grid gsb-story-grid--${props.columns ?? 2}`, children: props.children });
+}
+function StoryCard(props) {
+  const toneClass = props.tone && props.tone !== "default" ? ` gsb-card--${props.tone}` : "";
+  return /* @__PURE__ */ jsxs("section", { class: `gsb-card${toneClass}`, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { class: "gsb-card__title", children: props.title }),
+      props.summary ? /* @__PURE__ */ jsx("p", { class: "gsb-card__summary", children: props.summary }) : null
+    ] }),
+    props.children
+  ] });
+}
+function StoryNote(props) {
+  const toneClass = props.tone && props.tone !== "info" ? ` gsb-note--${props.tone}` : "";
+  return /* @__PURE__ */ jsx("div", { class: `gsb-note${toneClass}`, children: props.children });
+}
+function StoryMetrics(props) {
+  return /* @__PURE__ */ jsx("div", { class: "gsb-metrics", children: props.items.map((item) => /* @__PURE__ */ jsxs("div", { class: "gsb-metric", children: [
+    /* @__PURE__ */ jsx("p", { class: "gsb-metric__label", children: item.label }),
+    /* @__PURE__ */ jsx("p", { class: "gsb-metric__value", children: item.value }),
+    item.detail ? /* @__PURE__ */ jsx("p", { class: "gsb-metric__detail", children: item.detail }) : null
+  ] })) });
+}
+function StoryComparison(props) {
+  return /* @__PURE__ */ jsxs("div", { class: "gsb-comparison", children: [
+    /* @__PURE__ */ jsxs("section", { class: "gsb-comparison__pane", children: [
+      /* @__PURE__ */ jsx("span", { class: "gsb-pill gsb-pill--accent", children: props.primaryLabel }),
+      /* @__PURE__ */ jsx("div", { class: "gsb-comparison__canvas", children: props.primary })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { class: "gsb-comparison__pane", children: [
+      /* @__PURE__ */ jsx("span", { class: "gsb-pill", children: props.secondaryLabel }),
+      /* @__PURE__ */ jsx("div", { class: "gsb-comparison__canvas", children: props.secondary })
+    ] })
+  ] });
+}
+function SolidStorybookApp(props) {
+  const allStories = createMemo(
+    () => props.sections.flatMap((section) => section.stories)
+  );
+  const allIds = createMemo(() => allStories().map((story) => story.id));
+  const resolveRoute = () => {
+    const route = getHashRoute(allIds());
+    return route === "dashboard" ? props.defaultStoryId : route;
+  };
+  const [activeStory, setActiveStory] = createSignal(
+    resolveRoute()
+  );
+  const [search, setSearch] = createSignal("");
+  const [sidebarOpen, setSidebarOpen] = createSignal(false);
+  const [themeMode, setThemeMode] = createSignal(getStoredTheme("dark"));
+  let searchInput;
+  createEffect(() => {
+    const cleanup = syncTheme(themeMode());
+    onCleanup(cleanup);
+  });
+  createEffect(() => {
+    setHashRoute(activeStory());
+  });
+  if (typeof window !== "undefined") {
+    const handleHashChange = () => setActiveStory(() => resolveRoute());
+    window.addEventListener("hashchange", handleHashChange);
+    onCleanup(() => window.removeEventListener("hashchange", handleHashChange));
+  }
+  if (typeof window !== "undefined") {
+    const handleKeyDown = (event) => {
+      if (!isTypingTarget(event.target) && isFocusSearchShortcut(event)) {
+        event.preventDefault();
+        setSidebarOpen(true);
+        return;
+      }
+      if (isTypingTarget(event.target)) return;
+      if (matchesShortcut(event, DEFAULT_SHORTCUTS.toggleTheme)) {
+        event.preventDefault();
+        setThemeMode((previous) => {
+          const next = previous === "dark" ? "light" : previous === "light" ? "system" : "dark";
+          setStoredTheme(next);
+          return next;
+        });
+        return;
+      }
+      if (matchesShortcut(event, DEFAULT_SHORTCUTS.goHome)) {
+        event.preventDefault();
+        setActiveStory(() => props.defaultStoryId);
+        return;
+      }
+      if (matchesShortcut(event, DEFAULT_SHORTCUTS.toggleSidebar)) {
+        event.preventDefault();
+        setSidebarOpen((previous) => !previous);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => window.removeEventListener("keydown", handleKeyDown));
+  }
+  const filteredSections = createMemo(() => {
+    if (!search().trim()) return props.sections;
+    const filtered = filterSurface(props.sections, search());
+    return filtered.map((section) => {
+      const original = props.sections.find(
+        (candidate) => candidate.title === section.title
+      );
+      return {
+        ...original,
+        stories: original.stories.filter(
+          (story) => section.stories.some((candidate) => candidate.id === story.id)
+        )
+      };
+    });
+  });
+  const activeMeta = createMemo(
+    () => allStories().find((story) => story.id === activeStory()) ?? allStories()[0]
+  );
+  const ActiveComponent = createMemo(() => props.components[activeMeta().id]);
+  const themeLabel = createMemo(
+    () => themeMode() === "dark" ? "Dark" : themeMode() === "light" ? "Light" : "System"
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { class: "gsb-shell", children: [
+      /* @__PURE__ */ jsxs("aside", { class: `gsb-sidebar${sidebarOpen() ? " is-open" : ""}`, children: [
+        /* @__PURE__ */ jsxs("div", { class: "gsb-sidebar__top", children: [
+          /* @__PURE__ */ jsxs("div", { class: "gsb-sidebar__brand", children: [
+            /* @__PURE__ */ jsx("p", { class: "gsb-eyebrow", children: props.frameworkLabel }),
+            /* @__PURE__ */ jsx("h1", { class: "gsb-sidebar__title", children: props.packageName }),
+            /* @__PURE__ */ jsx("p", { class: "gsb-sidebar__summary", children: props.overview })
+          ] }),
+          /* @__PURE__ */ jsx("span", { class: "gsb-count", children: allStories().length })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "0.5rem",
+              "margin-bottom": "1rem",
+              padding: "0 0.25rem"
+            },
+            children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                class: "gsb-theme-toggle",
+                onClick: () => setThemeMode((previous) => {
+                  const next = previous === "dark" ? "light" : previous === "light" ? "system" : "dark";
+                  setStoredTheme(next);
+                  return next;
+                }),
+                children: themeLabel()
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { class: "gsb-search", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: searchInput,
+            type: "search",
+            value: search(),
+            onInput: (event) => setSearch(event.currentTarget.value),
+            placeholder: "Search stories, tags, or ids\u2026",
+            class: "gsb-search__input"
+          }
+        ) }),
+        filteredSections().length === 0 ? /* @__PURE__ */ jsx("div", { class: "gsb-empty", children: "No stories match this search." }) : filteredSections().map((section) => /* @__PURE__ */ jsxs("section", { class: "gsb-sidebar__section", children: [
+          /* @__PURE__ */ jsx("h2", { class: "gsb-sidebar__section-title", children: section.title }),
+          /* @__PURE__ */ jsx("div", { class: "gsb-sidebar__items", children: section.stories.map((story) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              class: `gsb-sidebar__item${story.id === activeMeta().id ? " is-active" : ""}`,
+              onClick: () => {
+                setActiveStory(() => story.id);
+                setSidebarOpen(false);
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { class: "gsb-sidebar__item-title", children: [
+                  /* @__PURE__ */ jsx("span", { children: story.label }),
+                  story.tags?.[0] ? /* @__PURE__ */ jsx("span", { class: "gsb-pill", children: story.tags[0] }) : null
+                ] }),
+                /* @__PURE__ */ jsx("div", { class: "gsb-sidebar__item-id", children: story.id }),
+                story.description ? /* @__PURE__ */ jsx("div", { class: "gsb-sidebar__item-description", children: story.description }) : null
+              ]
+            }
+          )) })
+        ] }))
+      ] }),
+      /* @__PURE__ */ jsx("main", { class: "gsb-main", children: /* @__PURE__ */ jsxs("div", { class: "gsb-main__inner", children: [
+        /* @__PURE__ */ jsx("div", { class: "gsb-topbar", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            class: "gsb-nav-toggle",
+            onClick: () => setSidebarOpen(true),
+            children: "Browse stories"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("header", { class: "gsb-hero", children: [
+          /* @__PURE__ */ jsxs("div", { class: "gsb-hero__meta", children: [
+            /* @__PURE__ */ jsx("span", { class: "gsb-pill gsb-pill--accent", children: props.frameworkLabel }),
+            /* @__PURE__ */ jsx("span", { class: "gsb-pill", children: activeMeta().id }),
+            activeMeta().tags?.map((tag) => /* @__PURE__ */ jsx("span", { class: "gsb-pill", children: tag }))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { class: "gsb-story-deck__header", children: [
+            /* @__PURE__ */ jsx("p", { class: "gsb-eyebrow", children: "Story surface" }),
+            /* @__PURE__ */ jsx("h2", { class: "gsb-hero__title", children: activeMeta().label }),
+            activeMeta().description ? /* @__PURE__ */ jsx("p", { class: "gsb-hero__summary", children: activeMeta().description }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { class: "gsb-story-space", children: (() => {
+          const StoryComponent = ActiveComponent();
+          return /* @__PURE__ */ jsx(StoryComponent, {});
+        })() })
+      ] }) })
+    ] }),
+    sidebarOpen() ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        class: "gsb-backdrop",
+        onClick: () => setSidebarOpen(false),
+        "aria-label": "Close navigation"
+      }
+    ) : null
+  ] });
+}
+
+export { SolidStorybookApp, StoryCard, StoryComparison, StoryDeck, StoryGrid, StoryMetrics, StoryNote };
+//# sourceMappingURL=solidjs.js.map
+//# sourceMappingURL=solidjs.js.map