@krizaka/ui 2.6.0 → 2.9.0

package/dist/scroll-stage.js

@@ -0,0 +1,59 @@
+"use client";
+import {
+  brandClass,
+  storyVariantClass
+} from "./chunk-555LWYIN.js";
+import {
+  cn
+} from "./chunk-5AXLA4LK.js";
+
+// src/scroll-stage/scroll-stage.tsx
+import * as React from "react";
+var SCENE = "[data-kzs-scene]";
+function ScrollStage({ as: Tag = "div", variant, threshold = 0.2, className, children, ...props }) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const root = ref.current;
+    if (!root || typeof IntersectionObserver === "undefined") return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const el = entry.target;
+          if (entry.isIntersecting) {
+            el.setAttribute("data-in", "");
+            el.setAttribute("data-live", "");
+          } else el.removeAttribute("data-live");
+        }
+      },
+      { threshold }
+    );
+    const watch = (scope) => scope.querySelectorAll(SCENE).forEach((el) => io.observe(el));
+    if (root.matches(SCENE)) io.observe(root);
+    watch(root);
+    const mo = new MutationObserver((records) => {
+      for (const record of records)
+        record.addedNodes.forEach((node) => {
+          if (!(node instanceof Element)) return;
+          if (node.matches(SCENE)) io.observe(node);
+          watch(node);
+        });
+    });
+    mo.observe(root, { childList: true, subtree: true });
+    root.setAttribute("data-kzs-stage", "on");
+    return () => {
+      io.disconnect();
+      mo.disconnect();
+      root.removeAttribute("data-kzs-stage");
+    };
+  }, [threshold]);
+  return React.createElement(Tag, { ref, className: cn(storyVariantClass(variant), className), ...props }, children);
+}
+function Scene({ as: Tag = "section", brand, className, children, ...props }) {
+  return React.createElement(Tag, { "data-kzs-scene": "", className: cn(brandClass(brand), className) || void 0, ...props }, children);
+}
+export {
+  Scene,
+  ScrollStage
+};
+//# sourceMappingURL=scroll-stage.js.map

package/dist/scroll-stage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scroll-stage/scroll-stage.tsx"],"sourcesContent":["// Client. The conductor of a told page (story.css): chapters that play their entrance once, in order, when they first\n// come into view, and whose one slow loop runs only while they are on screen. One IntersectionObserver for the stage,\n// no animation frame, nothing at all under prefers-reduced-motion.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport type { StoryVariant };\n\nconst SCENE = \"[data-kzs-scene]\";\n\ntype Polymorphic = \"div\" | \"main\" | \"article\" | \"section\";\n\nexport type ScrollStageProps = React.HTMLAttributes<HTMLElement> & {\n  /**\n   * The element the stage renders.\n   * @default \"div\"\n   */\n  as?: Polymorphic;\n  /**\n   * The look of every storytelling component inside (each one can still set its own): `default` or `arcade`.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /**\n   * How much of a scene must be visible before it plays (0–1).\n   * @default 0.2\n   */\n  threshold?: number;\n};\n\n/**\n * Plays the scenes (`Scene`, or any `[data-kzs-scene]`) it contains: each one gets `data-in` once, when it first enters\n * the viewport — its parts then arrive in order (the visual, the announcement, the words: `data-kzs-reveal`) — and\n * `data-live` while it is visible, which runs its one loop. Until the stage has switched motion on, and under\n * `prefers-reduced-motion`, everything is visible and still.\n */\nexport function ScrollStage({ as: Tag = \"div\", variant, threshold = 0.2, className, children, ...props }: ScrollStageProps) {\n  const ref = React.useRef<HTMLElement>(null);\n  React.useEffect(() => {\n    const root = ref.current;\n    if (!root || typeof IntersectionObserver === \"undefined\") return;\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const io = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          const el = entry.target as HTMLElement;\n          if (entry.isIntersecting) {\n            el.setAttribute(\"data-in\", \"\");\n            el.setAttribute(\"data-live\", \"\");\n          } else el.removeAttribute(\"data-live\");\n        }\n      },\n      { threshold },\n    );\n    const watch = (scope: ParentNode) => scope.querySelectorAll(SCENE).forEach((el) => io.observe(el));\n    if (root.matches(SCENE)) io.observe(root);\n    watch(root);\n    const mo = new MutationObserver((records) => {\n      for (const record of records)\n        record.addedNodes.forEach((node) => {\n          if (!(node instanceof Element)) return;\n          if (node.matches(SCENE)) io.observe(node);\n          watch(node);\n        });\n    });\n    mo.observe(root, { childList: true, subtree: true });\n    root.setAttribute(\"data-kzs-stage\", \"on\");\n    return () => {\n      io.disconnect();\n      mo.disconnect();\n      root.removeAttribute(\"data-kzs-stage\");\n    };\n  }, [threshold]);\n  return React.createElement(Tag, { ref, className: cn(storyVariantClass(variant), className), ...props }, children);\n}\n\nexport type SceneProps = React.HTMLAttributes<HTMLElement> & {\n  /**\n   * The element the scene renders.\n   * @default \"section\"\n   */\n  as?: Polymorphic | \"header\" | \"footer\" | \"li\";\n  /** A brand scope for the scene (`orochia` → `.brand-orochia`): its accent and gradient become that brand's. */\n  brand?: string;\n};\n\n/** A chapter of a `ScrollStage`: played once when it enters the viewport, its loop running while it is visible. */\nexport function Scene({ as: Tag = \"section\", brand, className, children, ...props }: SceneProps) {\n  return React.createElement(Tag, { \"data-kzs-scene\": \"\", className: cn(brandClass(brand), className) || undefined, ...props }, children);\n}\n"],"mappings":";;;;;;;;;;AAGA,YAAY,WAAW;AAOvB,IAAM,QAAQ;AA4BP,SAAS,YAAY,EAAE,IAAI,MAAM,OAAO,SAAS,YAAY,KAAK,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC1H,QAAM,MAAY,aAAoB,IAAI;AAC1C,EAAM,gBAAU,MAAM;AACpB,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,QAAQ,OAAO,yBAAyB,YAAa;AAC1D,QAAI,OAAO,WAAW,kCAAkC,EAAE,QAAS;AACnE,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,YAAY;AACX,mBAAW,SAAS,SAAS;AAC3B,gBAAM,KAAK,MAAM;AACjB,cAAI,MAAM,gBAAgB;AACxB,eAAG,aAAa,WAAW,EAAE;AAC7B,eAAG,aAAa,aAAa,EAAE;AAAA,UACjC,MAAO,IAAG,gBAAgB,WAAW;AAAA,QACvC;AAAA,MACF;AAAA,MACA,EAAE,UAAU;AAAA,IACd;AACA,UAAM,QAAQ,CAAC,UAAsB,MAAM,iBAAiB,KAAK,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,EAAE,CAAC;AACjG,QAAI,KAAK,QAAQ,KAAK,EAAG,IAAG,QAAQ,IAAI;AACxC,UAAM,IAAI;AACV,UAAM,KAAK,IAAI,iBAAiB,CAAC,YAAY;AAC3C,iBAAW,UAAU;AACnB,eAAO,WAAW,QAAQ,CAAC,SAAS;AAClC,cAAI,EAAE,gBAAgB,SAAU;AAChC,cAAI,KAAK,QAAQ,KAAK,EAAG,IAAG,QAAQ,IAAI;AACxC,gBAAM,IAAI;AAAA,QACZ,CAAC;AAAA,IACL,CAAC;AACD,OAAG,QAAQ,MAAM,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AACnD,SAAK,aAAa,kBAAkB,IAAI;AACxC,WAAO,MAAM;AACX,SAAG,WAAW;AACd,SAAG,WAAW;AACd,WAAK,gBAAgB,gBAAgB;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AACd,SAAa,oBAAc,KAAK,EAAE,KAAK,WAAW,GAAG,kBAAkB,OAAO,GAAG,SAAS,GAAG,GAAG,MAAM,GAAG,QAAQ;AACnH;AAaO,SAAS,MAAM,EAAE,IAAI,MAAM,WAAW,OAAO,WAAW,UAAU,GAAG,MAAM,GAAe;AAC/F,SAAa,oBAAc,KAAK,EAAE,kBAAkB,IAAI,WAAW,GAAG,WAAW,KAAK,GAAG,SAAS,KAAK,QAAW,GAAG,MAAM,GAAG,QAAQ;AACxI;","names":[]}

package/dist/settings-layout.d.ts

@@ -0,0 +1,154 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const settingsLayout: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            head?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            columns?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            navList?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            section?: tailwind_variants.ClassValue;
+            sectionHead?: tailwind_variants.ClassValue;
+            sectionTitle?: tailwind_variants.ClassValue;
+            sectionDescription?: tailwind_variants.ClassValue;
+            sectionBody?: tailwind_variants.ClassValue;
+            sectionFooter?: tailwind_variants.ClassValue;
+            navLink?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            head?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            columns?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            navList?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            section?: tailwind_variants.ClassValue;
+            sectionHead?: tailwind_variants.ClassValue;
+            sectionTitle?: tailwind_variants.ClassValue;
+            sectionDescription?: tailwind_variants.ClassValue;
+            sectionBody?: tailwind_variants.ClassValue;
+            sectionFooter?: tailwind_variants.ClassValue;
+            navLink?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    head: string;
+    title: string;
+    description: string;
+    columns: string;
+    nav: string;
+    navList: string;
+    navLink: string;
+    content: string;
+    section: string;
+    sectionHead: string;
+    sectionTitle: string;
+    sectionDescription: string;
+    sectionBody: string;
+    sectionFooter: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            head?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            columns?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            navList?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            section?: tailwind_variants.ClassValue;
+            sectionHead?: tailwind_variants.ClassValue;
+            sectionTitle?: tailwind_variants.ClassValue;
+            sectionDescription?: tailwind_variants.ClassValue;
+            sectionBody?: tailwind_variants.ClassValue;
+            sectionFooter?: tailwind_variants.ClassValue;
+            navLink?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    head: string;
+    title: string;
+    description: string;
+    columns: string;
+    nav: string;
+    navList: string;
+    navLink: string;
+    content: string;
+    section: string;
+    sectionHead: string;
+    sectionTitle: string;
+    sectionDescription: string;
+    sectionBody: string;
+    sectionFooter: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    head: string;
+    title: string;
+    description: string;
+    columns: string;
+    nav: string;
+    navList: string;
+    navLink: string;
+    content: string;
+    section: string;
+    sectionHead: string;
+    sectionTitle: string;
+    sectionDescription: string;
+    sectionBody: string;
+    sectionFooter: string;
+}>>;
+interface SettingsNavItem {
+    /** Its id (the anchor of a section on one long page). */
+    id: string;
+    /** Its words. */
+    label: string;
+    /** Where it leads: a page (`/settings/billing`) or an anchor (`#billing`). */
+    href: string;
+    /** Its icon (a signature icon). */
+    icon?: React.ReactNode;
+    /** The section shown now: `aria-current`. */
+    current?: boolean;
+}
+type SettingsLayoutProps = Omit<React.ComponentProps<"div">, "title"> & {
+    /** The screen's title (`Settings`). */
+    title?: React.ReactNode;
+    /** One sentence under it. */
+    description?: React.ReactNode;
+    /** The sections. */
+    nav: readonly SettingsNavItem[];
+    /** The navigation's accessible name (`Settings sections`). */
+    navLabel: string;
+    /** The app's link component for the sections (Next's `Link`); an `<a>` otherwise. */
+    linkAs?: React.ElementType;
+    /** The current section's forms (`SettingsSection`). */
+    children: React.ReactNode;
+};
+/** A settings screen: sections on the left (chips on a phone), forms on the right. */
+declare function SettingsLayout({ title, description, nav, navLabel, linkAs: Link, className, children, ...props }: SettingsLayoutProps): React.JSX.Element;
+type SettingsSectionProps = Omit<React.ComponentProps<"section">, "title"> & {
+    /** The section's title: it names the region (and is its anchor's target when `id` is set). */
+    title: React.ReactNode;
+    /** What these settings change, in one sentence. */
+    description?: React.ReactNode;
+    /** At the foot: the section's own save (a Button), a note. */
+    footer?: React.ReactNode;
+    /** The fields. */
+    children: React.ReactNode;
+};
+/** A group of settings: a titled card with its fields and its own save. */
+declare function SettingsSection({ title, description, footer, id, className, children, ...props }: SettingsSectionProps): React.JSX.Element;
+
+export { SettingsLayout, type SettingsLayoutProps, type SettingsNavItem, SettingsSection, type SettingsSectionProps, settingsLayout };

package/dist/settings-layout.js

@@ -0,0 +1,57 @@
+// src/settings-layout/settings-layout.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var settingsLayout = tv({
+  slots: {
+    root: "flex w-full flex-col gap-6",
+    head: "flex flex-col gap-1",
+    title: "font-display text-2xl font-extrabold tracking-tight text-fg",
+    description: "max-w-2xl text-sm text-fg-secondary",
+    columns: "grid grid-cols-1 gap-6 lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-10",
+    nav: "-mx-4 overflow-x-auto px-4 [scrollbar-width:none] lg:mx-0 lg:overflow-visible lg:px-0",
+    navList: "flex w-max gap-2 lg:sticky lg:top-20 lg:w-auto lg:flex-col lg:gap-0.5",
+    navLink: "flex h-9 items-center gap-2.5 whitespace-nowrap rounded-full border border-border-default bg-surface-1 px-3.5 text-sm font-medium text-fg-secondary no-underline hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current]:border-accent aria-[current]:text-fg lg:rounded-lg lg:border-transparent lg:bg-transparent lg:px-3 lg:hover:bg-surface-2 lg:aria-[current]:bg-accent-soft [&>svg]:h-4 [&>svg]:w-4",
+    content: "flex min-w-0 flex-col gap-6",
+    section: "rounded-xl border border-border-default bg-surface-1",
+    sectionHead: "flex flex-col gap-1 px-5 pt-5",
+    sectionTitle: "text-base font-bold text-fg",
+    sectionDescription: "text-sm text-fg-secondary",
+    sectionBody: "flex flex-col gap-4 px-5 py-5",
+    sectionFooter: "flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle bg-surface-2/40 px-5 py-3 rounded-b-xl"
+  }
+});
+var s = settingsLayout();
+function SettingsLayout({ title, description, nav, navLabel, linkAs: Link = "a", className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
+    (title || description) && /* @__PURE__ */ jsxs("div", { className: s.head(), children: [
+      title && /* @__PURE__ */ jsx("h1", { className: s.title(), children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: s.description(), children: description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: s.columns(), children: [
+      /* @__PURE__ */ jsx("nav", { "aria-label": navLabel, className: s.nav(), children: /* @__PURE__ */ jsx("ul", { className: s.navList(), children: nav.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Link, { href: item.href, className: s.navLink(), "aria-current": item.current ? item.href.startsWith("#") ? "location" : "page" : void 0, children: [
+        item.icon,
+        item.label
+      ] }) }, item.id)) }) }),
+      /* @__PURE__ */ jsx("div", { className: s.content(), children })
+    ] })
+  ] });
+}
+function SettingsSection({ title, description, footer, id, className, children, ...props }) {
+  const auto = React.useId();
+  const titleId = `${id ?? auto}-title`;
+  return /* @__PURE__ */ jsxs("section", { id, "aria-labelledby": titleId, className: s.section({ className }), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: s.sectionHead(), children: [
+      /* @__PURE__ */ jsx("h2", { id: titleId, className: s.sectionTitle(), children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: s.sectionDescription(), children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: s.sectionBody(), children }),
+    footer && /* @__PURE__ */ jsx("div", { className: s.sectionFooter(), children: footer })
+  ] });
+}
+export {
+  SettingsLayout,
+  SettingsSection,
+  settingsLayout
+};
+//# sourceMappingURL=settings-layout.js.map

package/dist/settings-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/settings-layout/settings-layout.tsx"],"sourcesContent":["// Server-safe. Settings, read from the products' account and administration screens: a list of sections on the left\n// (a row of chips that scrolls on a phone), the current section's forms on the right, each form a titled card with its\n// own save at the foot. The sections are links (one page each) or anchors (one long page).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const settingsLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    head: \"flex flex-col gap-1\",\n    title: \"font-display text-2xl font-extrabold tracking-tight text-fg\",\n    description: \"max-w-2xl text-sm text-fg-secondary\",\n    columns: \"grid grid-cols-1 gap-6 lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-10\",\n    nav: \"-mx-4 overflow-x-auto px-4 [scrollbar-width:none] lg:mx-0 lg:overflow-visible lg:px-0\",\n    navList: \"flex w-max gap-2 lg:sticky lg:top-20 lg:w-auto lg:flex-col lg:gap-0.5\",\n    navLink:\n      \"flex h-9 items-center gap-2.5 whitespace-nowrap rounded-full border border-border-default bg-surface-1 px-3.5 text-sm font-medium text-fg-secondary no-underline \" +\n      \"hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current]:border-accent aria-[current]:text-fg \" +\n      \"lg:rounded-lg lg:border-transparent lg:bg-transparent lg:px-3 lg:hover:bg-surface-2 lg:aria-[current]:bg-accent-soft [&>svg]:h-4 [&>svg]:w-4\",\n    content: \"flex min-w-0 flex-col gap-6\",\n    section: \"rounded-xl border border-border-default bg-surface-1\",\n    sectionHead: \"flex flex-col gap-1 px-5 pt-5\",\n    sectionTitle: \"text-base font-bold text-fg\",\n    sectionDescription: \"text-sm text-fg-secondary\",\n    sectionBody: \"flex flex-col gap-4 px-5 py-5\",\n    sectionFooter: \"flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle bg-surface-2/40 px-5 py-3 rounded-b-xl\",\n  },\n});\nconst s = settingsLayout();\n\nexport interface SettingsNavItem {\n  /** Its id (the anchor of a section on one long page). */\n  id: string;\n  /** Its words. */\n  label: string;\n  /** Where it leads: a page (`/settings/billing`) or an anchor (`#billing`). */\n  href: string;\n  /** Its icon (a signature icon). */\n  icon?: React.ReactNode;\n  /** The section shown now: `aria-current`. */\n  current?: boolean;\n}\n\nexport type SettingsLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The screen's title (`Settings`). */\n  title?: React.ReactNode;\n  /** One sentence under it. */\n  description?: React.ReactNode;\n  /** The sections. */\n  nav: readonly SettingsNavItem[];\n  /** The navigation's accessible name (`Settings sections`). */\n  navLabel: string;\n  /** The app's link component for the sections (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /** The current section's forms (`SettingsSection`). */\n  children: React.ReactNode;\n};\n\n/** A settings screen: sections on the left (chips on a phone), forms on the right. */\nexport function SettingsLayout({ title, description, nav, navLabel, linkAs: Link = \"a\", className, children, ...props }: SettingsLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      {(title || description) && (\n        <div className={s.head()}>\n          {title && <h1 className={s.title()}>{title}</h1>}\n          {description && <p className={s.description()}>{description}</p>}\n        </div>\n      )}\n      <div className={s.columns()}>\n        <nav aria-label={navLabel} className={s.nav()}>\n          <ul className={s.navList()}>\n            {nav.map((item) => (\n              <li key={item.id}>\n                <Link href={item.href} className={s.navLink()} aria-current={item.current ? (item.href.startsWith(\"#\") ? \"location\" : \"page\") : undefined}>\n                  {item.icon}\n                  {item.label}\n                </Link>\n              </li>\n            ))}\n          </ul>\n        </nav>\n        <div className={s.content()}>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport type SettingsSectionProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The section's title: it names the region (and is its anchor's target when `id` is set). */\n  title: React.ReactNode;\n  /** What these settings change, in one sentence. */\n  description?: React.ReactNode;\n  /** At the foot: the section's own save (a Button), a note. */\n  footer?: React.ReactNode;\n  /** The fields. */\n  children: React.ReactNode;\n};\n\n/** A group of settings: a titled card with its fields and its own save. */\nexport function SettingsSection({ title, description, footer, id, className, children, ...props }: SettingsSectionProps) {\n  const auto = React.useId();\n  const titleId = `${id ?? auto}-title`;\n  return (\n    <section id={id} aria-labelledby={titleId} className={s.section({ className })} {...props}>\n      <div className={s.sectionHead()}>\n        <h2 id={titleId} className={s.sectionTitle()}>\n          {title}\n        </h2>\n        {description && <p className={s.sectionDescription()}>{description}</p>}\n      </div>\n      <div className={s.sectionBody()}>{children}</div>\n      {footer && <div className={s.sectionFooter()}>{footer}</div>}\n    </section>\n  );\n}\n"],"mappings":";AAGA,YAAY,WAAW;AACvB,SAAS,UAAU;AA2DX,SACY,KADZ;AAzDD,IAAM,iBAAiB,GAAG;AAAA,EAC/B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,SACE;AAAA,IAGF,SAAS;AAAA,IACT,SAAS;AAAA,IACT,aAAa;AAAA,IACb,cAAc;AAAA,IACd,oBAAoB;AAAA,IACpB,aAAa;AAAA,IACb,eAAe;AAAA,EACjB;AACF,CAAC;AACD,IAAM,IAAI,eAAe;AA+BlB,SAAS,eAAe,EAAE,OAAO,aAAa,KAAK,UAAU,QAAQ,OAAO,KAAK,WAAW,UAAU,GAAG,MAAM,GAAwB;AAC5I,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACvC;AAAA,cAAS,gBACT,qBAAC,SAAI,WAAW,EAAE,KAAK,GACpB;AAAA,eAAS,oBAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,MAC1C,eAAe,oBAAC,OAAE,WAAW,EAAE,YAAY,GAAI,uBAAY;AAAA,OAC9D;AAAA,IAEF,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB;AAAA,0BAAC,SAAI,cAAY,UAAU,WAAW,EAAE,IAAI,GAC1C,8BAAC,QAAG,WAAW,EAAE,QAAQ,GACtB,cAAI,IAAI,CAAC,SACR,oBAAC,QACC,+BAAC,QAAK,MAAM,KAAK,MAAM,WAAW,EAAE,QAAQ,GAAG,gBAAc,KAAK,UAAW,KAAK,KAAK,WAAW,GAAG,IAAI,aAAa,SAAU,QAC7H;AAAA,aAAK;AAAA,QACL,KAAK;AAAA,SACR,KAJO,KAAK,EAKd,CACD,GACH,GACF;AAAA,MACA,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,UAAS;AAAA,OACzC;AAAA,KACF;AAEJ;AAcO,SAAS,gBAAgB,EAAE,OAAO,aAAa,QAAQ,IAAI,WAAW,UAAU,GAAG,MAAM,GAAyB;AACvH,QAAM,OAAa,YAAM;AACzB,QAAM,UAAU,GAAG,MAAM,IAAI;AAC7B,SACE,qBAAC,aAAQ,IAAQ,mBAAiB,SAAS,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAClF;AAAA,yBAAC,SAAI,WAAW,EAAE,YAAY,GAC5B;AAAA,0BAAC,QAAG,IAAI,SAAS,WAAW,EAAE,aAAa,GACxC,iBACH;AAAA,MACC,eAAe,oBAAC,OAAE,WAAW,EAAE,mBAAmB,GAAI,uBAAY;AAAA,OACrE;AAAA,IACA,oBAAC,SAAI,WAAW,EAAE,YAAY,GAAI,UAAS;AAAA,IAC1C,UAAU,oBAAC,SAAI,WAAW,EAAE,cAAc,GAAI,kBAAO;AAAA,KACxD;AAEJ;","names":[]}

package/dist/split-view.d.ts

@@ -0,0 +1,106 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const splitView: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            list?: tailwind_variants.ClassValue;
+            listHead?: tailwind_variants.ClassValue;
+            listTitle?: tailwind_variants.ClassValue;
+            listBody?: tailwind_variants.ClassValue;
+            detail?: tailwind_variants.ClassValue;
+            detailHead?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            detailBody?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            list?: tailwind_variants.ClassValue;
+            listHead?: tailwind_variants.ClassValue;
+            listTitle?: tailwind_variants.ClassValue;
+            listBody?: tailwind_variants.ClassValue;
+            detail?: tailwind_variants.ClassValue;
+            detailHead?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            detailBody?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    list: string;
+    listHead: string;
+    listTitle: string;
+    listBody: string;
+    detail: string;
+    detailHead: string;
+    back: string;
+    detailBody: string;
+    empty: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            list?: tailwind_variants.ClassValue;
+            listHead?: tailwind_variants.ClassValue;
+            listTitle?: tailwind_variants.ClassValue;
+            listBody?: tailwind_variants.ClassValue;
+            detail?: tailwind_variants.ClassValue;
+            detailHead?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            detailBody?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    list: string;
+    listHead: string;
+    listTitle: string;
+    listBody: string;
+    detail: string;
+    detailHead: string;
+    back: string;
+    detailBody: string;
+    empty: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    list: string;
+    listHead: string;
+    listTitle: string;
+    listBody: string;
+    detail: string;
+    detailHead: string;
+    back: string;
+    detailBody: string;
+    empty: string;
+}>>;
+type SplitViewProps = React.ComponentProps<"div"> & {
+    /** The list pane's title (`Messages`): it names the region. */
+    listTitle: React.ReactNode;
+    /** Actions in the list's head (a search, a filter, a new item). */
+    listActions?: React.ReactNode;
+    /** The items (a list of links, a DataTable). */
+    list: React.ReactNode;
+    /** The open item's head: its name, its actions. */
+    detailHead?: React.ReactNode;
+    /** The open item, or nothing. */
+    detail?: React.ReactNode;
+    /** What the detail pane says when nothing is open (desktop). */
+    empty?: React.ReactNode;
+    /** On a phone, the open item replaces the list. Usually: an item is selected in the address. */
+    showDetail?: boolean;
+    /** The way back to the list on a phone: your router's link (`<Link href="/inbox">Messages</Link>`). */
+    back?: React.ReactNode;
+    /** The list pane's accessible name when `listTitle` is not text. */
+    listLabel?: string;
+};
+/** A list and its open item: two panes on a desktop, one at a time on a phone. */
+declare function SplitView({ listTitle, listActions, list, detailHead, detail, empty, showDetail, back, listLabel, className, ...props }: SplitViewProps): React.JSX.Element;
+
+export { SplitView, type SplitViewProps, splitView };

package/dist/split-view.js

@@ -0,0 +1,41 @@
+// src/split-view/split-view.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var splitView = tv({
+  slots: {
+    root: "grid w-full min-h-[min(40rem,calc(100dvh-8rem))] overflow-hidden rounded-xl border border-border-default bg-surface-1 md:grid-cols-[minmax(16rem,22rem)_minmax(0,1fr)]",
+    list: "flex min-h-0 min-w-0 flex-col border-border-subtle md:border-r data-[hidden-on-phone]:hidden md:data-[hidden-on-phone]:flex",
+    listHead: "flex h-14 shrink-0 items-center gap-2 border-b border-border-subtle px-4",
+    listTitle: "text-sm font-bold text-fg",
+    listBody: "min-h-0 flex-1 overflow-y-auto",
+    detail: "flex min-h-0 min-w-0 flex-col bg-surface-0 data-[hidden-on-phone]:hidden md:data-[hidden-on-phone]:flex",
+    detailHead: "flex h-14 shrink-0 items-center gap-2 border-b border-border-subtle px-4",
+    back: "md:hidden",
+    detailBody: "min-h-0 flex-1 overflow-y-auto p-4 md:p-6",
+    empty: "flex flex-1 items-center justify-center p-8 text-center text-sm text-fg-secondary"
+  }
+});
+var s = splitView();
+function SplitView({ listTitle, listActions, list, detailHead, detail, empty, showDetail = false, back, listLabel, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsxs("section", { className: s.list(), "aria-label": listLabel, "data-hidden-on-phone": showDetail ? "" : void 0, children: [
+      /* @__PURE__ */ jsxs("div", { className: s.listHead(), children: [
+        /* @__PURE__ */ jsx("h2", { className: s.listTitle(), children: listTitle }),
+        /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-1.5", children: listActions })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: s.listBody(), children: list })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: s.detail(), "data-hidden-on-phone": showDetail ? void 0 : "", children: [
+      (back || detailHead) && /* @__PURE__ */ jsxs("div", { className: s.detailHead(), children: [
+        back && /* @__PURE__ */ jsx("div", { className: s.back(), children: back }),
+        detailHead
+      ] }),
+      detail ? /* @__PURE__ */ jsx("div", { className: s.detailBody(), children: detail }) : /* @__PURE__ */ jsx("div", { className: s.empty(), children: empty })
+    ] })
+  ] });
+}
+export {
+  SplitView,
+  splitView
+};
+//# sourceMappingURL=split-view.js.map

package/dist/split-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/split-view/split-view.tsx"],"sourcesContent":["// Server-safe. A list and the item open beside it, read from the products' inboxes and queues (messages, moderation,\n// jobs): two panes on a desktop; on a phone one at a time — the list, or the open item with the way back — chosen by\n// `showDetail` (the address says which item is open: URL = state).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const splitView = tv({\n  slots: {\n    root:\n      \"grid w-full min-h-[min(40rem,calc(100dvh-8rem))] overflow-hidden rounded-xl border border-border-default bg-surface-1 \" +\n      \"md:grid-cols-[minmax(16rem,22rem)_minmax(0,1fr)]\",\n    list: \"flex min-h-0 min-w-0 flex-col border-border-subtle md:border-r data-[hidden-on-phone]:hidden md:data-[hidden-on-phone]:flex\",\n    listHead: \"flex h-14 shrink-0 items-center gap-2 border-b border-border-subtle px-4\",\n    listTitle: \"text-sm font-bold text-fg\",\n    listBody: \"min-h-0 flex-1 overflow-y-auto\",\n    detail: \"flex min-h-0 min-w-0 flex-col bg-surface-0 data-[hidden-on-phone]:hidden md:data-[hidden-on-phone]:flex\",\n    detailHead: \"flex h-14 shrink-0 items-center gap-2 border-b border-border-subtle px-4\",\n    back: \"md:hidden\",\n    detailBody: \"min-h-0 flex-1 overflow-y-auto p-4 md:p-6\",\n    empty: \"flex flex-1 items-center justify-center p-8 text-center text-sm text-fg-secondary\",\n  },\n});\nconst s = splitView();\n\nexport type SplitViewProps = React.ComponentProps<\"div\"> & {\n  /** The list pane's title (`Messages`): it names the region. */\n  listTitle: React.ReactNode;\n  /** Actions in the list's head (a search, a filter, a new item). */\n  listActions?: React.ReactNode;\n  /** The items (a list of links, a DataTable). */\n  list: React.ReactNode;\n  /** The open item's head: its name, its actions. */\n  detailHead?: React.ReactNode;\n  /** The open item, or nothing. */\n  detail?: React.ReactNode;\n  /** What the detail pane says when nothing is open (desktop). */\n  empty?: React.ReactNode;\n  /** On a phone, the open item replaces the list. Usually: an item is selected in the address. */\n  showDetail?: boolean;\n  /** The way back to the list on a phone: your router's link (`<Link href=\"/inbox\">Messages</Link>`). */\n  back?: React.ReactNode;\n  /** The list pane's accessible name when `listTitle` is not text. */\n  listLabel?: string;\n};\n\n/** A list and its open item: two panes on a desktop, one at a time on a phone. */\nexport function SplitView({ listTitle, listActions, list, detailHead, detail, empty, showDetail = false, back, listLabel, className, ...props }: SplitViewProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <section className={s.list()} aria-label={listLabel} data-hidden-on-phone={showDetail ? \"\" : undefined}>\n        <div className={s.listHead()}>\n          <h2 className={s.listTitle()}>{listTitle}</h2>\n          <div className=\"ml-auto flex items-center gap-1.5\">{listActions}</div>\n        </div>\n        <div className={s.listBody()}>{list}</div>\n      </section>\n      <section className={s.detail()} data-hidden-on-phone={showDetail ? undefined : \"\"}>\n        {(back || detailHead) && (\n          <div className={s.detailHead()}>\n            {back && <div className={s.back()}>{back}</div>}\n            {detailHead}\n          </div>\n        )}\n        {detail ? <div className={s.detailBody()}>{detail}</div> : <div className={s.empty()}>{empty}</div>}\n      </section>\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AA8CX,SACE,KADF;AA5CD,IAAM,YAAY,GAAG;AAAA,EAC1B,OAAO;AAAA,IACL,MACE;AAAA,IAEF,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF,CAAC;AACD,IAAM,IAAI,UAAU;AAwBb,SAAS,UAAU,EAAE,WAAW,aAAa,MAAM,YAAY,QAAQ,OAAO,aAAa,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,GAAmB;AAC/J,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,yBAAC,aAAQ,WAAW,EAAE,KAAK,GAAG,cAAY,WAAW,wBAAsB,aAAa,KAAK,QAC3F;AAAA,2BAAC,SAAI,WAAW,EAAE,SAAS,GACzB;AAAA,4BAAC,QAAG,WAAW,EAAE,UAAU,GAAI,qBAAU;AAAA,QACzC,oBAAC,SAAI,WAAU,qCAAqC,uBAAY;AAAA,SAClE;AAAA,MACA,oBAAC,SAAI,WAAW,EAAE,SAAS,GAAI,gBAAK;AAAA,OACtC;AAAA,IACA,qBAAC,aAAQ,WAAW,EAAE,OAAO,GAAG,wBAAsB,aAAa,SAAY,IAC3E;AAAA,eAAQ,eACR,qBAAC,SAAI,WAAW,EAAE,WAAW,GAC1B;AAAA,gBAAQ,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,QACxC;AAAA,SACH;AAAA,MAED,SAAS,oBAAC,SAAI,WAAW,EAAE,WAAW,GAAI,kBAAO,IAAS,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,OAC/F;AAAA,KACF;AAEJ;","names":[]}

package/dist/stage-banner.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { S as StoryVariant } from './story-variant-CLn4H5Nt.js';
+
+type StageBannerProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** Where the reader is: “Step 02”, “Chapter 3”, “Final round”. */
+    stage: React.ReactNode;
+    /** `sm`: the name of the chapter, beside the stage. */
+    name?: React.ReactNode;
+    /** `lg`: the title under the stage. */
+    title?: React.ReactNode;
+    /** `lg`: one line under the title. */
+    subtitle?: React.ReactNode;
+    /**
+     * `sm`: one line, before a chapter's heading. `lg`: centred, the stage above a title and a line — a section's opening.
+     * @default "sm"
+     */
+    size?: "sm" | "lg";
+    /**
+     * The element of the `lg` title: a heading when the banner opens a section that has none.
+     * @default "p"
+     */
+    titleAs?: "p" | "h2" | "h3";
+    /**
+     * `default`: a sober eyebrow. `arcade`: the stage call — a skewed plate that slams in, a light that sweeps it.
+     * @default "default"
+     */
+    variant?: StoryVariant;
+    /** A brand scope (`orochia` → `.brand-orochia`). */
+    brand?: string;
+};
+/** Announces a chapter: a stage and its name on one line, or (`size="lg"`) a stage, a title and a line, centred. */
+declare function StageBanner({ stage, name, title, subtitle, size, titleAs: Title, variant, brand, className, ...props }: StageBannerProps): React.JSX.Element;
+
+export { StageBanner, type StageBannerProps };

package/dist/stage-banner.js

@@ -0,0 +1,26 @@
+import {
+  brandClass,
+  cn,
+  storyVariantClass
+} from "./chunk-VCAAHCHL.js";
+
+// src/stage-banner/stage-banner.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function StageBanner({ stage, name, title, subtitle, size = "sm", titleAs: Title = "p", variant, brand, className, ...props }) {
+  const cls = cn("kzs-banner", storyVariantClass(variant), brandClass(brand), className);
+  if (size === "lg")
+    return /* @__PURE__ */ jsxs("div", { "data-size": "lg", className: cls, ...props, children: [
+      /* @__PURE__ */ jsx("span", { className: "kzs-banner-stage", children: stage }),
+      title && /* @__PURE__ */ jsx(Title, { className: "kzs-banner-title", children: title }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "kzs-banner-sub", children: subtitle })
+    ] });
+  return /* @__PURE__ */ jsxs("p", { className: cls, ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "kzs-banner-stage", children: stage }),
+    name && /* @__PURE__ */ jsx("span", { className: "kzs-banner-name", children: name }),
+    /* @__PURE__ */ jsx("span", { className: "kzs-banner-sweep", "aria-hidden": true })
+  ] });
+}
+export {
+  StageBanner
+};
+//# sourceMappingURL=stage-banner.js.map

package/dist/stage-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stage-banner/stage-banner.tsx"],"sourcesContent":["// Server-safe. The announcement of a chapter (story.css): “Step 02 · Payments”, or, large, a round with its title and a\n// line under it. In a `Scene` of a `ScrollStage` it arrives once, after the scene's visual.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport type StageBannerProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** Where the reader is: “Step 02”, “Chapter 3”, “Final round”. */\n  stage: React.ReactNode;\n  /** `sm`: the name of the chapter, beside the stage. */\n  name?: React.ReactNode;\n  /** `lg`: the title under the stage. */\n  title?: React.ReactNode;\n  /** `lg`: one line under the title. */\n  subtitle?: React.ReactNode;\n  /**\n   * `sm`: one line, before a chapter's heading. `lg`: centred, the stage above a title and a line — a section's opening.\n   * @default \"sm\"\n   */\n  size?: \"sm\" | \"lg\";\n  /**\n   * The element of the `lg` title: a heading when the banner opens a section that has none.\n   * @default \"p\"\n   */\n  titleAs?: \"p\" | \"h2\" | \"h3\";\n  /**\n   * `default`: a sober eyebrow. `arcade`: the stage call — a skewed plate that slams in, a light that sweeps it.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope (`orochia` → `.brand-orochia`). */\n  brand?: string;\n};\n\n/** Announces a chapter: a stage and its name on one line, or (`size=\"lg\"`) a stage, a title and a line, centred. */\nexport function StageBanner({ stage, name, title, subtitle, size = \"sm\", titleAs: Title = \"p\", variant, brand, className, ...props }: StageBannerProps) {\n  const cls = cn(\"kzs-banner\", storyVariantClass(variant), brandClass(brand), className);\n  if (size === \"lg\")\n    return (\n      <div data-size=\"lg\" className={cls} {...props}>\n        <span className=\"kzs-banner-stage\">{stage}</span>\n        {title && <Title className=\"kzs-banner-title\">{title}</Title>}\n        {subtitle && <p className=\"kzs-banner-sub\">{subtitle}</p>}\n      </div>\n    );\n  return (\n    <p className={cls} {...props}>\n      <span className=\"kzs-banner-stage\">{stage}</span>\n      {name && <span className=\"kzs-banner-name\">{name}</span>}\n      <span className=\"kzs-banner-sweep\" aria-hidden />\n    </p>\n  );\n}\n"],"mappings":";;;;;;;AAwCM,SACE,KADF;AAJC,SAAS,YAAY,EAAE,OAAO,MAAM,OAAO,UAAU,OAAO,MAAM,SAAS,QAAQ,KAAK,SAAS,OAAO,WAAW,GAAG,MAAM,GAAqB;AACtJ,QAAM,MAAM,GAAG,cAAc,kBAAkB,OAAO,GAAG,WAAW,KAAK,GAAG,SAAS;AACrF,MAAI,SAAS;AACX,WACE,qBAAC,SAAI,aAAU,MAAK,WAAW,KAAM,GAAG,OACtC;AAAA,0BAAC,UAAK,WAAU,oBAAoB,iBAAM;AAAA,MACzC,SAAS,oBAAC,SAAM,WAAU,oBAAoB,iBAAM;AAAA,MACpD,YAAY,oBAAC,OAAE,WAAU,kBAAkB,oBAAS;AAAA,OACvD;AAEJ,SACE,qBAAC,OAAE,WAAW,KAAM,GAAG,OACrB;AAAA,wBAAC,UAAK,WAAU,oBAAoB,iBAAM;AAAA,IACzC,QAAQ,oBAAC,UAAK,WAAU,mBAAmB,gBAAK;AAAA,IACjD,oBAAC,UAAK,WAAU,oBAAmB,eAAW,MAAC;AAAA,KACjD;AAEJ;","names":[]}

package/dist/story-variant-CLn4H5Nt.d.ts

@@ -0,0 +1,4 @@
+/** The look of the storytelling kit: `default` (sober, for any app) or `arcade` (the opt-in cabinet flavour). */
+type StoryVariant = "default" | "arcade";
+
+export type { StoryVariant as S };