@krizaka/ui 3.21.0 → 3.23.0

package/dist/site-footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/site-footer/site-footer.tsx"],"sourcesContent":["// Client (the marks hold an id). The footer shared by every site of the Krizaka family: the site's own columns, then the\n// family in columns from `@krizaka/ui/sites` (the same groups as the bar's switcher), then the signature line — “A\n// Krizaka product” by the kind of the current site — the version and the place.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { FamilyMark } from \"../family-mark\";\nimport { KrizakaLogo } from \"../marks/KrizakaLogo\";\nimport { type FamilyLabels, familyLabels, siteById, type SiteId, sitesByGroup } from \"../sites/sites\";\n\nexport const siteFooter = tv({\n  slots: {\n    root: \"w-full border-t border-border-subtle bg-surface-0 text-fg\",\n    inner: \"mx-auto grid w-full max-w-(--kz-page-max,72rem) grid-cols-[minmax(0,1fr)] gap-10 px-(--kz-page-gutter,16px) py-12\",\n    top: \"grid grid-cols-[minmax(0,1fr)] gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]\",\n    site: \"grid content-start gap-3\",\n    siteName: \"inline-flex items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg\",\n    siteText: \"max-w-xs text-sm leading-relaxed text-fg-secondary\",\n    own: \"grid grid-cols-2 gap-8 sm:grid-cols-3\",\n    family: \"grid grid-cols-2 gap-8 border-t border-border-subtle pt-8 md:grid-cols-4\",\n    column: \"grid min-w-0 content-start gap-3\",\n    title: \"text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    list: \"grid min-w-0 gap-2\",\n    link:\n      \"inline-flex min-h-6 min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 rounded-md text-sm [overflow-wrap:anywhere] text-fg-secondary no-underline transition-colors hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg aria-[current=true]:text-fg aria-[current=true]:font-semibold\",\n    mark: \"flex h-4 w-4 shrink-0 items-center justify-center text-fg\",\n    tag: \"rounded-full bg-surface-3 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    bottom: \"flex flex-wrap items-center gap-x-5 gap-y-3 border-t border-border-subtle pt-6 text-xs text-fg-secondary\",\n    signature:\n      \"inline-flex items-center gap-2 rounded-md font-medium text-fg no-underline hover:text-fg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    version:\n      \"rounded-full border border-border-subtle bg-surface-2 px-2 py-0.5 font-mono text-[11px] text-fg-secondary\",\n    legal: \"flex flex-wrap items-center gap-x-4 gap-y-2 sm:ml-auto\",\n  },\n});\nconst s = siteFooter();\n\nexport type SiteFooterProps = Omit<React.ComponentProps<\"footer\">, \"children\"> & {\n  /** The site this footer belongs to (`@krizaka/ui/sites`): its mark and line, its signature, marked in the family. */\n  current: SiteId;\n  /**\n   * The family's words, passed translated: `familyLabels.fr` from `@krizaka/ui/sites`, or your own of the same shape.\n   * @default familyLabels.en\n   */\n  labels?: FamilyLabels;\n  /** The site's own columns (`SiteFooter.Column`), before the family. */\n  children?: React.ReactNode;\n  /** The version the site runs (`1.2.3`, shown `v1.2.3`). */\n  version?: string;\n  /** The environment, when it is not production (`DEV`). */\n  env?: string;\n  /**\n   * Shows the family in columns (the Krizaka sites: www, ui., java.). A product is independent once deployed: pass\n   * `family={false}` and the footer holds only its own columns, the legal links, the version and one publisher line —\n   * “A Krizaka product”, linking to www.krizaka.com.\n   * @default true\n   */\n  family?: boolean;\n  /** The end of the signature line: legal links, a language switch (`SiteFooter.Link`s or any inline content). */\n  legal?: React.ReactNode;\n};\n\n/** The footer of a Krizaka site: its own columns, the family in columns, the signature, the version, Montréal. */\nexport function SiteFooter({\n  current,\n  labels = familyLabels.en,\n  children,\n  version,\n  env,\n  legal,\n  family = true,\n  className,\n  ...props\n}: SiteFooterProps) {\n  const id = React.useId();\n  const site = siteById(current);\n  const krizaka = siteById(\"krizaka\");\n  const tag = [env, version && `v${version.replace(/^v/, \"\")}`].filter(Boolean).join(\" · \");\n  return (\n    <footer className={s.root({ className })} {...props}>\n      <div className={s.inner()}>\n        <div className={s.top()}>\n          <div className={s.site()}>\n            <a href={site.url} className={s.siteName()}>\n              <FamilyMark mark={site.mark} size={24} />\n              {site.name}\n            </a>\n            <p className={s.siteText()}>{labels.descriptions[site.id]}</p>\n          </div>\n          {children && <div className={s.own()}>{children}</div>}\n        </div>\n        {family && (\n          <nav aria-label={labels.family} className={s.family()}>\n            {sitesByGroup().map(({ group, sites }) => (\n              <div key={group} className={s.column()}>\n                <p id={`${id}-${group}`} className={s.title()}>\n                  {labels.groups[group]}\n                </p>\n                <ul aria-labelledby={`${id}-${group}`} className={s.list()}>\n                  {sites.map((item) => (\n                    <li key={item.id}>\n                      <a href={item.url} aria-current={item.id === current ? \"true\" : undefined} className={s.link()}>\n                        <span className={s.mark()}>\n                          <FamilyMark mark={item.mark} size={16} />\n                        </span>\n                        {item.name}\n                        {item.status !== \"released\" && <span className={s.tag()}>{labels.status[item.status]}</span>}\n                        {item.id === current && <span className=\"sr-only\">({labels.current})</span>}\n                      </a>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </nav>\n        )}\n        <div className={s.bottom()}>\n          <a href={krizaka.url} className={s.signature()}>\n            <KrizakaLogo size={18} animated={false} />\n            {labels.signature[site.kind]}\n          </a>\n          {tag && (\n            <span className={s.version()}>\n              <span className=\"sr-only\">{labels.version} </span>\n              {tag}\n            </span>\n          )}\n          <span>{labels.place}</span>\n          {legal && <div className={s.legal()}>{legal}</div>}\n        </div>\n      </div>\n    </footer>\n  );\n}\n\nexport type SiteFooterColumnProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The column's heading (“Docs”) — passed translated. */\n  title: string;\n  /** Its links (`SiteFooter.Link`). */\n  children: React.ReactNode;\n};\n\n/** One of the site's own columns: a heading and its links. */\nexport function SiteFooterColumn({ title, children, className, ...props }: SiteFooterColumnProps) {\n  const id = React.useId();\n  return (\n    <div className={s.column({ className })} {...props}>\n      <p id={id} className={s.title()}>\n        {title}\n      </p>\n      <ul aria-labelledby={id} className={s.list()}>\n        {React.Children.map(children, (child) => (child ? <li>{child}</li> : null))}\n      </ul>\n    </div>\n  );\n}\n\nexport type SiteFooterLinkProps = React.ComponentProps<\"a\"> & {\n  /** The current page: `aria-current=\"page\"`. */\n  active?: boolean;\n  /** Renders your router's `<Link>`. */\n  asChild?: boolean;\n};\n\n/** A link of the footer. */\nexport function SiteFooterLink({ active, asChild, className, ...props }: SiteFooterLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp aria-current={active ? \"page\" : undefined} className={s.link({ className })} {...props} />;\n}\n\nSiteFooter.Column = SiteFooterColumn;\nSiteFooter.Link = SiteFooterLink;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/site-footer/site-footer.tsx"],"sourcesContent":["// Client (the marks hold an id). The footer shared by every site of the Krizaka family: the site's own columns, then the\n// family in columns from `@krizaka/ui/sites` (the same groups as the bar's switcher), then the signature line — “A\n// Krizaka product” by the kind of the current site — the version and the place.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { FamilyMark } from \"../family-mark\";\nimport { KrizakaLogo } from \"../marks/KrizakaLogo\";\nimport { type FamilyLabels, familyLabels, siteById, type SiteId, sitesByGroup } from \"../sites/sites\";\n\nexport const siteFooter = tv({\n  slots: {\n    root: \"w-full border-t border-border-subtle bg-surface-0 text-fg\",\n    inner:\n      \"mx-auto grid w-full max-w-[calc(var(--kz-page-max,72rem)_+_2*var(--kz-page-gutter,clamp(16px,3.2vw,32px)))] grid-cols-[minmax(0,1fr)] gap-10 px-[var(--kz-page-gutter,clamp(16px,3.2vw,32px))] py-12\",\n    top: \"grid grid-cols-[minmax(0,1fr)] gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]\",\n    site: \"grid content-start gap-3\",\n    siteName: \"inline-flex items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg\",\n    siteText: \"max-w-xs text-sm leading-relaxed text-fg-secondary\",\n    own: \"grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-8\",\n    family: \"grid grid-cols-2 gap-8 border-t border-border-subtle pt-8 md:grid-cols-4\",\n    column: \"grid min-w-0 content-start gap-3\",\n    title: \"text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    list: \"grid min-w-0 gap-2\",\n    link:\n      \"inline-flex min-h-6 min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 rounded-md text-sm [overflow-wrap:anywhere] text-fg-secondary no-underline transition-colors hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg aria-[current=true]:text-fg aria-[current=true]:font-semibold\",\n    mark: \"flex h-4 w-4 shrink-0 items-center justify-center text-fg\",\n    tag: \"rounded-full bg-surface-3 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    bottom: \"flex flex-wrap items-center gap-x-5 gap-y-3 border-t border-border-subtle pt-6 text-xs text-fg-secondary\",\n    signature:\n      \"inline-flex items-center gap-2 rounded-md font-medium text-fg no-underline hover:text-fg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    version:\n      \"rounded-full border border-border-subtle bg-surface-2 px-2 py-0.5 font-mono text-[11px] text-fg-secondary\",\n    legal: \"flex flex-wrap items-center gap-x-4 gap-y-2 sm:ml-auto\",\n  },\n  variants: {\n    // `site`: the full footer. `docs`: no site block, the columns in one row, on the documentation's width. `app`: one\n    // slim line inside a signed-in product — signature, version, legal links.\n    variant: {\n      site: {},\n      docs: {\n        inner: \"max-w-[calc(var(--kz-page-max-docs,88rem)_+_2*var(--kz-page-gutter,clamp(16px,3.2vw,32px)))] gap-6 py-8\",\n        top: \"lg:grid-cols-[minmax(0,1fr)]\",\n        own: \"sm:grid-cols-4\",\n      },\n      app: {\n        root: \"bg-transparent\",\n        inner: \"gap-0 py-3\",\n        bottom: \"border-t-0 pt-0\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"site\" },\n});\n\nexport type SiteFooterProps = Omit<React.ComponentProps<\"footer\">, \"children\"> & {\n  /** The site this footer belongs to (`@krizaka/ui/sites`): its mark and line, its signature, marked in the family. */\n  current: SiteId;\n  /**\n   * The family's words, passed translated: `familyLabels.fr` from `@krizaka/ui/sites`, or your own of the same shape.\n   * @default familyLabels.en\n   */\n  labels?: FamilyLabels;\n  /** The site's own columns (`SiteFooter.Column`), before the family. */\n  children?: React.ReactNode;\n  /** The version the site runs (`1.2.3`, shown `v1.2.3`). */\n  version?: string;\n  /** The environment, when it is not production (`DEV`). */\n  env?: string;\n  /**\n   * Shows the family in columns (the Krizaka sites: www, ui., java.). A product is independent once deployed: pass\n   * `family={false}` and the footer holds only its own columns, the legal links, the version and one publisher line —\n   * “A Krizaka product”, linking to www.krizaka.com.\n   * @default true\n   */\n  family?: boolean;\n  /** The end of the signature line: legal links, a language switch (`SiteFooter.Link`s or any inline content). */\n  legal?: React.ReactNode;\n  /**\n   * `site` — the full footer of a marketing or company site. `docs` — a compact one for documentation pages (no site\n   * block, the columns in a row, the documentation's width; never the family). `app` — one slim line inside a signed-in\n   * product: the publisher line, the version and the legal links (no columns, no family); render it once, in the\n   * layout, and not at all where the app shell has a sidebar that holds them.\n   * @default \"site\"\n   */\n  variant?: \"site\" | \"docs\" | \"app\";\n};\n\n/** The footer of a Krizaka site: its own columns, the family in columns, the signature, the version, Montréal. */\nexport function SiteFooter({\n  current,\n  labels = familyLabels.en,\n  children,\n  version,\n  env,\n  legal,\n  family: familyProp = true,\n  variant = \"site\",\n  className,\n  ...props\n}: SiteFooterProps) {\n  const id = React.useId();\n  const s = siteFooter({ variant });\n  const family = variant === \"site\" && familyProp;\n  const slim = variant === \"app\";\n  const site = siteById(current);\n  const krizaka = siteById(\"krizaka\");\n  const tag = [env, version && `v${version.replace(/^v/, \"\")}`].filter(Boolean).join(\" · \");\n  return (\n    <footer className={s.root({ className })} {...props}>\n      <div className={s.inner()}>\n        {!slim && (\n          <div className={s.top()}>\n            {variant === \"site\" && (\n              <div className={s.site()}>\n                <a href={site.url} className={s.siteName()}>\n                  <FamilyMark mark={site.mark} size={24} />\n                  {site.name}\n                </a>\n                <p className={s.siteText()}>{labels.descriptions[site.id]}</p>\n              </div>\n            )}\n            {React.Children.toArray(children).length > 0 && <div className={s.own()}>{children}</div>}\n          </div>\n        )}\n        {family && (\n          <nav aria-label={labels.family} className={s.family()}>\n            {sitesByGroup().map(({ group, sites }) => (\n              <div key={group} className={s.column()}>\n                <p id={`${id}-${group}`} className={s.title()}>\n                  {labels.groups[group]}\n                </p>\n                <ul aria-labelledby={`${id}-${group}`} className={s.list()}>\n                  {sites.map((item) => (\n                    <li key={item.id}>\n                      <a href={item.url} aria-current={item.id === current ? \"true\" : undefined} className={s.link()}>\n                        <span className={s.mark()}>\n                          <FamilyMark mark={item.mark} size={16} />\n                        </span>\n                        {item.name}\n                        {item.status !== \"released\" && <span className={s.tag()}>{labels.status[item.status]}</span>}\n                        {item.id === current && <span className=\"sr-only\">({labels.current})</span>}\n                      </a>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </nav>\n        )}\n        <div className={s.bottom()}>\n          <a href={krizaka.url} className={s.signature()}>\n            <KrizakaLogo size={18} animated={false} />\n            {labels.signature[site.kind]}\n          </a>\n          {tag && (\n            <span className={s.version()}>\n              <span className=\"sr-only\">{labels.version} </span>\n              {tag}\n            </span>\n          )}\n          {!slim && <span>{labels.place}</span>}\n          {legal && <div className={s.legal()}>{legal}</div>}\n        </div>\n      </div>\n    </footer>\n  );\n}\n\nexport type SiteFooterColumnProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The column's heading (“Docs”) — passed translated. */\n  title: string;\n  /** Its links (`SiteFooter.Link`). */\n  children: React.ReactNode;\n};\n\n/** One of the site's own columns: a heading and its links. */\nexport function SiteFooterColumn({ title, children, className, ...props }: SiteFooterColumnProps) {\n  const id = React.useId();\n  // A group with no link is not a column: only a heading over nothing.\n  if (React.Children.toArray(children).length === 0) return null;\n  const s = siteFooter();\n  return (\n    <div className={s.column({ className })} {...props}>\n      <p id={id} className={s.title()}>\n        {title}\n      </p>\n      <ul aria-labelledby={id} className={s.list()}>\n        {React.Children.toArray(children).map((child, i) => <li key={i}>{child}</li>)}\n      </ul>\n    </div>\n  );\n}\n\nexport type SiteFooterLinkProps = React.ComponentProps<\"a\"> & {\n  /** The current page: `aria-current=\"page\"`. */\n  active?: boolean;\n  /** Renders your router's `<Link>`. */\n  asChild?: boolean;\n};\n\n/** A link of the footer. */\nexport function SiteFooterLink({ active, asChild, className, ...props }: SiteFooterLinkProps) {\n  const s = siteFooter();\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp aria-current={active ? \"page\" : undefined} className={s.link({ className })} {...props} />;\n}\n\nSiteFooter.Column = SiteFooterColumn;\nSiteFooter.Link = SiteFooterLink;\n"],"mappings":"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","names":[]}

package/dist/skip-link.js

@@ -2,7 +2,7 @@
 import {
   SkipLink,
   skipLink
-} from "./chunk-3GODX3D6.js";
+} from "./chunk-QDXV544C.js";
 export {
   SkipLink,
   skipLink

package/dist/slider.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   tv
-} from "./chunk-C2BRIFJG.js";
-import "./chunk-2FRWNSRO.js";
+} from "./chunk-HJFRHYCI.js";
+import "./chunk-NSLXEDIS.js";
 
 // src/slider/slider.tsx
 import { Slider as SliderPrimitive } from "radix-ui";

package/dist/stage-banner.js

@@ -2,7 +2,7 @@ import {
   brandClass,
   cn,
   storyVariantClass
-} from "./chunk-IZ7MV6HM.js";
+} from "./chunk-XVFQZ3ZG.js";
 
 // src/stage-banner/stage-banner.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/step-showcase.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+type DeviceKind = "phone" | "browser" | "desktop";
+interface DeviceFrameProps extends React.ComponentProps<"div"> {
+    /** The device: a phone, a browser window or a macOS window. */
+    kind: DeviceKind;
+    /** The browser's address or the window's title (“dev.orazaka.com”, “Orazaka”). */
+    title?: string;
+}
+/** A phone, a browser window or a macOS window around a screen of content. */
+declare function DeviceFrame({ kind, title, className, children, ...props }: DeviceFrameProps): React.JSX.Element;
+
+interface ShowcaseStep {
+    /** A stable key. */
+    id: string;
+    /** The step's name (“Make an image”), passed translated. */
+    title: string;
+    /** One line under it. */
+    description: string;
+    /** The still shown first, and the only picture under reduced motion. */
+    poster: string;
+    /** What the poster shows, for assistive technology. */
+    alt: string;
+    /** The recording: WebM and / or MP4. Without one, the poster stays `duration` ms. */
+    video?: {
+        webm?: string;
+        mp4?: string;
+    };
+    /** Milliseconds a step without a video stays. @default 6000 */
+    duration?: number;
+}
+interface StepShowcaseLabels {
+    /** The button's name while paused. */
+    play: string;
+    /** The button's name while it plays. */
+    pause: string;
+    /** A step's position in words: `(2, 4) => "Step 2 of 4"`. */
+    step: (n: number, total: number) => string;
+}
+declare const stepShowcaseLabels: StepShowcaseLabels;
+interface StepShowcaseProps extends Omit<React.ComponentProps<"section">, "children"> {
+    /** The sequence's accessible name (“Orazaka in your pocket”), passed translated. */
+    label: string;
+    /** The steps, in the order of the journey. */
+    steps: readonly ShowcaseStep[];
+    /** The device the recordings were made on. */
+    device: DeviceKind;
+    /** The browser's address or the window's title. */
+    deviceTitle?: string;
+    /** Moves on by itself (never under reduced motion). @default true */
+    autoplay?: boolean;
+    /** The controls' words, translated. */
+    labels?: StepShowcaseLabels;
+    /** The step shown first. @default 0 */
+    defaultIndex?: number;
+    /** Called when the step changes — `user` is true when the visitor asked for it. */
+    onIndexChange?: (index: number, user: boolean) => void;
+}
+/** One device frame, its steps beside it, playing each recording then the next — a product's guided tour. */
+declare function StepShowcase({ label, steps, device, deviceTitle, autoplay, labels, defaultIndex, onIndexChange, className, ...props }: StepShowcaseProps): React.JSX.Element;
+
+export { DeviceFrame, type DeviceFrameProps, type DeviceKind, type ShowcaseStep, StepShowcase, type StepShowcaseLabels, type StepShowcaseProps, stepShowcaseLabels };

package/dist/step-showcase.js

@@ -0,0 +1,227 @@
+"use client";
+import {
+  cn
+} from "./chunk-NSLXEDIS.js";
+
+// src/step-showcase/device-frame.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var screen = {
+  phone: "aspect-[9/19.5]",
+  browser: "aspect-[16/10]",
+  desktop: "aspect-[16/10]"
+};
+function DeviceFrame({ kind, title, className, children, ...props }) {
+  if (kind === "phone") {
+    return /* @__PURE__ */ jsx("div", { "data-device": "phone", className: cn("relative mx-auto w-full max-w-[18rem] rounded-[2.4rem] border border-border-strong bg-surface-3 p-2 shadow-2xl", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: cn("relative overflow-hidden rounded-[1.9rem] bg-surface-0", screen.phone), children: [
+      children,
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute left-1/2 top-2 h-5 w-20 -translate-x-1/2 rounded-full bg-surface-3" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-device": kind, className: cn("relative w-full overflow-hidden rounded-xl border border-border-default bg-surface-1 shadow-2xl", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-center gap-1.5 border-b border-border-subtle bg-surface-2 px-3", children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-2.5 w-2.5 rounded-full bg-danger/80" }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-2.5 w-2.5 rounded-full bg-warning/80" }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-2.5 w-2.5 rounded-full bg-success/80" }),
+      title && (kind === "browser" ? /* @__PURE__ */ jsx("span", { className: "mx-auto max-w-[60%] truncate rounded-md bg-surface-1 px-3 py-0.5 font-mono text-[11px] text-fg-secondary", children: title }) : /* @__PURE__ */ jsx("span", { className: "mx-auto truncate text-xs font-semibold text-fg-secondary", children: title }))
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden bg-surface-0", screen[kind]), children })
+  ] });
+}
+
+// src/step-showcase/step-showcase.tsx
+import * as React from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FILL_CSS = ".kz-step-fill{transform-origin:left;animation:kz-step-fill var(--kz-step-ms,6000ms) linear forwards}@keyframes kz-step-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}";
+var REDUCED = "(prefers-reduced-motion: reduce)";
+var noop = () => () => void 0;
+var readReduced = () => Boolean(typeof window !== "undefined" && window.matchMedia?.(REDUCED).matches);
+var subscribeReduced = (notify) => {
+  const q = window.matchMedia?.(REDUCED);
+  q?.addEventListener?.("change", notify);
+  return () => q?.removeEventListener?.("change", notify);
+};
+var stepShowcaseLabels = {
+  play: "Play the steps",
+  pause: "Pause the steps",
+  step: (n, total) => `Step ${n} of ${total}`
+};
+function StepShowcase({ label, steps, device, deviceTitle, autoplay = true, labels = stepShowcaseLabels, defaultIndex = 0, onIndexChange, className, ...props }) {
+  const total = steps.length;
+  const id = React.useId();
+  const root = React.useRef(null);
+  const video = React.useRef(null);
+  const bar = React.useRef(null);
+  const swipe = React.useRef(null);
+  const [index, setIndex] = React.useState(defaultIndex);
+  const [paused, setPaused] = React.useState(false);
+  const [hold, setHold] = React.useState({ hover: false, focus: false });
+  const [inView, setInView] = React.useState(false);
+  const [seen, setSeen] = React.useState(false);
+  const reduced = React.useSyncExternalStore(subscribeReduced, readReduced, () => false);
+  const mounted = React.useSyncExternalStore(noop, () => true, () => false);
+  const current = steps[Math.min(index, total - 1)];
+  const auto = autoplay && !reduced && mounted;
+  const running = auto && !paused && !hold.hover && !hold.focus && inView;
+  React.useEffect(() => {
+    const host = root.current;
+    if (!host || typeof IntersectionObserver === "undefined") return;
+    const io = new IntersectionObserver((e) => {
+      const visible = e.some((x) => x.isIntersecting);
+      setInView(visible);
+      if (visible) setSeen(true);
+    }, { threshold: 0.35 });
+    io.observe(host);
+    return () => io.disconnect();
+  }, []);
+  const go = React.useCallback(
+    (to, user) => {
+      const next = (to + total) % total;
+      setIndex(next);
+      if (bar.current) bar.current.style.transform = "scaleX(0)";
+      onIndexChange?.(next, user);
+    },
+    [total, onIndexChange]
+  );
+  React.useEffect(() => {
+    const v = video.current;
+    if (!v) return;
+    if (running) v.play()?.catch?.(() => void 0);
+    else v.pause();
+  }, [running, index, seen]);
+  const playable = Boolean(current?.video) && seen && !reduced;
+  const onTime = (e) => {
+    const v = e.currentTarget;
+    if (bar.current && v.duration) bar.current.style.transform = `scaleX(${v.currentTime / v.duration})`;
+  };
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      ref: root,
+      "aria-roledescription": "carousel",
+      "aria-label": label,
+      className: cn("grid items-center gap-6 md:grid-cols-[minmax(0,20rem)_minmax(0,1fr)] md:gap-10", className),
+      onPointerEnter: () => setHold((h) => ({ ...h, hover: true })),
+      onPointerLeave: () => setHold((h) => ({ ...h, hover: false })),
+      onFocus: () => setHold((h) => ({ ...h, focus: true })),
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setHold((h) => ({ ...h, focus: false }));
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2("style", { href: "kz-step-showcase", precedence: "medium", children: FILL_CSS }),
+        /* @__PURE__ */ jsxs2("div", { className: "order-2 grid gap-3 md:order-1", children: [
+          /* @__PURE__ */ jsx2("div", { role: "tablist", "aria-orientation": "vertical", "aria-label": label, className: "flex justify-center gap-2 md:grid md:gap-1", children: steps.map((s, i) => {
+            const active = i === index;
+            return /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                id: `${id}-tab-${i}`,
+                "aria-selected": active,
+                "aria-controls": `${id}-panel`,
+                tabIndex: active ? 0 : -1,
+                onClick: () => go(i, true),
+                onKeyDown: (e) => {
+                  if (e.key === "ArrowDown" || e.key === "ArrowRight") go(i + 1, true);
+                  else if (e.key === "ArrowUp" || e.key === "ArrowLeft") go(i - 1, true);
+                  else return;
+                  e.preventDefault();
+                },
+                className: cn(
+                  "group relative rounded-xl text-left outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+                  "max-md:h-2.5 max-md:w-2.5 max-md:rounded-full max-md:bg-border-strong max-md:aria-selected:w-6 max-md:aria-selected:bg-accent",
+                  "md:overflow-hidden md:p-4 md:hover:bg-surface-2 md:aria-selected:bg-surface-2"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs2("span", { className: "max-md:sr-only", children: [
+                    /* @__PURE__ */ jsxs2("span", { className: "flex items-baseline gap-3", children: [
+                      /* @__PURE__ */ jsx2("span", { className: cn("font-mono text-xs", active ? "text-fg-accent" : "text-fg-secondary"), children: String(i + 1).padStart(2, "0") }),
+                      /* @__PURE__ */ jsx2("span", { className: cn("text-sm font-semibold", active ? "text-fg" : "text-fg-secondary"), children: s.title })
+                    ] }),
+                    /* @__PURE__ */ jsx2("span", { className: "mt-1 block pl-8 text-xs leading-relaxed text-fg-secondary", children: s.description })
+                  ] }),
+                  active && auto && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "absolute inset-x-4 bottom-0 hidden h-0.5 overflow-hidden rounded-full bg-border-subtle md:block", children: /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      ref: bar,
+                      "data-fill": true,
+                      className: cn("block h-full bg-accent", !playable && "kz-step-fill"),
+                      style: { transform: playable ? "scaleX(0)" : void 0, animationPlayState: running ? "running" : "paused", ["--kz-step-ms"]: `${s.duration ?? 6e3}ms` },
+                      onAnimationEnd: () => go(index + 1, false)
+                    },
+                    `${s.id}-${playable}`
+                  ) })
+                ]
+              },
+              s.id
+            );
+          }) }),
+          /* @__PURE__ */ jsxs2("p", { "aria-hidden": true, className: "text-center text-sm md:hidden", children: [
+            /* @__PURE__ */ jsx2("span", { className: "font-semibold text-fg", children: current?.title }),
+            " ",
+            /* @__PURE__ */ jsx2("span", { className: "text-fg-secondary", children: current?.description })
+          ] }),
+          auto && /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => setPaused((p) => !p), "aria-pressed": paused, className: "mx-auto inline-flex h-8 items-center gap-2 rounded-full border border-border-subtle px-3 text-xs font-medium text-fg-secondary hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring md:mx-0 md:w-fit", children: [
+            /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "currentColor", "aria-hidden": true, children: paused ? /* @__PURE__ */ jsx2("path", { d: "M8 5v14l11-7z" }) : /* @__PURE__ */ jsx2("path", { d: "M7 5h4v14H7zM13 5h4v14h-4z" }) }),
+            paused ? labels.play : labels.pause
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            id: `${id}-panel`,
+            role: "tabpanel",
+            "aria-roledescription": "slide",
+            "aria-labelledby": `${id}-tab-${index}`,
+            className: "order-1 touch-pan-y md:order-2",
+            onPointerDown: (e) => {
+              swipe.current = e.clientX;
+            },
+            onPointerUp: (e) => {
+              if (swipe.current === null) return;
+              const dx = e.clientX - swipe.current;
+              swipe.current = null;
+              if (Math.abs(dx) > 40) go(index + (dx < 0 ? 1 : -1), true);
+            },
+            children: [
+              /* @__PURE__ */ jsx2(DeviceFrame, { kind: device, title: deviceTitle, children: steps.map((s, i) => {
+                const active = i === index;
+                return /* @__PURE__ */ jsxs2("div", { "data-step": s.id, "aria-hidden": !active, className: cn("absolute inset-0 transition-opacity duration-500 motion-reduce:transition-none", active ? "opacity-100" : "opacity-0"), children: [
+                  /* @__PURE__ */ jsx2("img", { src: s.poster, alt: active ? s.alt : "", loading: i === 0 ? "eager" : "lazy", decoding: "async", className: "h-full w-full object-cover" }),
+                  active && playable && s.video && /* @__PURE__ */ jsxs2(
+                    "video",
+                    {
+                      ref: video,
+                      muted: true,
+                      playsInline: true,
+                      preload: "metadata",
+                      poster: s.poster,
+                      "aria-hidden": true,
+                      tabIndex: -1,
+                      onTimeUpdate: onTime,
+                      onEnded: () => go(index + 1, false),
+                      className: "absolute inset-0 h-full w-full object-cover",
+                      children: [
+                        s.video.webm && /* @__PURE__ */ jsx2("source", { src: s.video.webm, type: "video/webm" }),
+                        s.video.mp4 && /* @__PURE__ */ jsx2("source", { src: s.video.mp4, type: "video/mp4" })
+                      ]
+                    },
+                    s.id
+                  )
+                ] }, s.id);
+              }) }),
+              /* @__PURE__ */ jsx2("span", { className: "sr-only", "aria-live": "off", children: labels.step(index + 1, total) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DeviceFrame,
+  StepShowcase,
+  stepShowcaseLabels
+};
+//# sourceMappingURL=step-showcase.js.map

package/dist/step-showcase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/step-showcase/device-frame.tsx","../src/step-showcase/step-showcase.tsx"],"sourcesContent":["// Server-safe. The frame a product's recording plays in: a phone, a browser window or a macOS window — drawn with the\n// tokens (no image), so it follows dark and light. The content fills the screen area (`object-cover` media).\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type DeviceKind = \"phone\" | \"browser\" | \"desktop\";\n\nexport interface DeviceFrameProps extends React.ComponentProps<\"div\"> {\n  /** The device: a phone, a browser window or a macOS window. */\n  kind: DeviceKind;\n  /** The browser's address or the window's title (“dev.orazaka.com”, “Orazaka”). */\n  title?: string;\n}\n\nconst screen: Record<DeviceKind, string> = {\n  phone: \"aspect-[9/19.5]\",\n  browser: \"aspect-[16/10]\",\n  desktop: \"aspect-[16/10]\",\n};\n\n/** A phone, a browser window or a macOS window around a screen of content. */\nexport function DeviceFrame({ kind, title, className, children, ...props }: DeviceFrameProps) {\n  if (kind === \"phone\") {\n    return (\n      <div data-device=\"phone\" className={cn(\"relative mx-auto w-full max-w-[18rem] rounded-[2.4rem] border border-border-strong bg-surface-3 p-2 shadow-2xl\", className)} {...props}>\n        <div className={cn(\"relative overflow-hidden rounded-[1.9rem] bg-surface-0\", screen.phone)}>\n          {children}\n          <span aria-hidden className=\"absolute left-1/2 top-2 h-5 w-20 -translate-x-1/2 rounded-full bg-surface-3\" />\n        </div>\n      </div>\n    );\n  }\n  return (\n    <div data-device={kind} className={cn(\"relative w-full overflow-hidden rounded-xl border border-border-default bg-surface-1 shadow-2xl\", className)} {...props}>\n      <div className=\"flex h-8 items-center gap-1.5 border-b border-border-subtle bg-surface-2 px-3\">\n        <span aria-hidden className=\"h-2.5 w-2.5 rounded-full bg-danger/80\" />\n        <span aria-hidden className=\"h-2.5 w-2.5 rounded-full bg-warning/80\" />\n        <span aria-hidden className=\"h-2.5 w-2.5 rounded-full bg-success/80\" />\n        {title &&\n          (kind === \"browser\" ? (\n            <span className=\"mx-auto max-w-[60%] truncate rounded-md bg-surface-1 px-3 py-0.5 font-mono text-[11px] text-fg-secondary\">{title}</span>\n          ) : (\n            <span className=\"mx-auto truncate text-xs font-semibold text-fg-secondary\">{title}</span>\n          ))}\n      </div>\n      <div className={cn(\"relative overflow-hidden bg-surface-0\", screen[kind])}>{children}</div>\n    </div>\n  );\n}\n","// Client (timers through the video, observers, swipe). A guided sequence in one device frame: the steps listed beside\n// it (a vertical tab list: number · title · one line, a bar filling under the current one), the frame playing the\n// step's recording muted, then moving on to the next; the recordings crossfade. It plays only while in view, holds on\n// hover and focus, keeps a visible play / pause button, and never shows a video's native controls. Recordings load\n// lazily (posters first, the current step's video once the block has been seen). Reduced motion: posters, manual steps.\n// Below `md` the list becomes dots under the frame, the frame swipes, the current step's words show under it.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { DeviceFrame, type DeviceKind } from \"./device-frame\";\n\nconst FILL_CSS = \".kz-step-fill{transform-origin:left;animation:kz-step-fill var(--kz-step-ms,6000ms) linear forwards}@keyframes kz-step-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}\";\nconst REDUCED = \"(prefers-reduced-motion: reduce)\";\nconst noop = () => () => undefined;\nconst readReduced = () => Boolean(typeof window !== \"undefined\" && window.matchMedia?.(REDUCED).matches);\nconst subscribeReduced = (notify: () => void) => {\n  const q = window.matchMedia?.(REDUCED);\n  q?.addEventListener?.(\"change\", notify);\n  return () => q?.removeEventListener?.(\"change\", notify);\n};\n\nexport interface ShowcaseStep {\n  /** A stable key. */\n  id: string;\n  /** The step's name (“Make an image”), passed translated. */\n  title: string;\n  /** One line under it. */\n  description: string;\n  /** The still shown first, and the only picture under reduced motion. */\n  poster: string;\n  /** What the poster shows, for assistive technology. */\n  alt: string;\n  /** The recording: WebM and / or MP4. Without one, the poster stays `duration` ms. */\n  video?: { webm?: string; mp4?: string };\n  /** Milliseconds a step without a video stays. @default 6000 */\n  duration?: number;\n}\n\nexport interface StepShowcaseLabels {\n  /** The button's name while paused. */\n  play: string;\n  /** The button's name while it plays. */\n  pause: string;\n  /** A step's position in words: `(2, 4) => \"Step 2 of 4\"`. */\n  step: (n: number, total: number) => string;\n}\n\nexport const stepShowcaseLabels: StepShowcaseLabels = {\n  play: \"Play the steps\",\n  pause: \"Pause the steps\",\n  step: (n, total) => `Step ${n} of ${total}`,\n};\n\nexport interface StepShowcaseProps extends Omit<React.ComponentProps<\"section\">, \"children\"> {\n  /** The sequence's accessible name (“Orazaka in your pocket”), passed translated. */\n  label: string;\n  /** The steps, in the order of the journey. */\n  steps: readonly ShowcaseStep[];\n  /** The device the recordings were made on. */\n  device: DeviceKind;\n  /** The browser's address or the window's title. */\n  deviceTitle?: string;\n  /** Moves on by itself (never under reduced motion). @default true */\n  autoplay?: boolean;\n  /** The controls' words, translated. */\n  labels?: StepShowcaseLabels;\n  /** The step shown first. @default 0 */\n  defaultIndex?: number;\n  /** Called when the step changes — `user` is true when the visitor asked for it. */\n  onIndexChange?: (index: number, user: boolean) => void;\n}\n\n/** One device frame, its steps beside it, playing each recording then the next — a product's guided tour. */\nexport function StepShowcase({ label, steps, device, deviceTitle, autoplay = true, labels = stepShowcaseLabels, defaultIndex = 0, onIndexChange, className, ...props }: StepShowcaseProps) {\n  const total = steps.length;\n  const id = React.useId();\n  const root = React.useRef<HTMLElement>(null);\n  const video = React.useRef<HTMLVideoElement>(null);\n  const bar = React.useRef<HTMLSpanElement>(null);\n  const swipe = React.useRef<number | null>(null);\n  const [index, setIndex] = React.useState(defaultIndex);\n  const [paused, setPaused] = React.useState(false);\n  const [hold, setHold] = React.useState({ hover: false, focus: false });\n  const [inView, setInView] = React.useState(false);\n  const [seen, setSeen] = React.useState(false);\n  const reduced = React.useSyncExternalStore(subscribeReduced, readReduced, () => false);\n  const mounted = React.useSyncExternalStore(noop, () => true, () => false);\n  const current = steps[Math.min(index, total - 1)];\n  const auto = autoplay && !reduced && mounted;\n  const running = auto && !paused && !hold.hover && !hold.focus && inView;\n\n  React.useEffect(() => {\n    const host = root.current;\n    if (!host || typeof IntersectionObserver === \"undefined\") return;\n    const io = new IntersectionObserver((e) => {\n      const visible = e.some((x) => x.isIntersecting);\n      setInView(visible);\n      if (visible) setSeen(true);\n    }, { threshold: 0.35 });\n    io.observe(host);\n    return () => io.disconnect();\n  }, []);\n\n  const go = React.useCallback(\n    (to: number, user: boolean) => {\n      const next = (to + total) % total;\n      setIndex(next);\n      if (bar.current) bar.current.style.transform = \"scaleX(0)\";\n      onIndexChange?.(next, user);\n    },\n    [total, onIndexChange],\n  );\n\n  // The recording runs only while the sequence does; its time is the bar.\n  React.useEffect(() => {\n    const v = video.current;\n    if (!v) return;\n    if (running) v.play()?.catch?.(() => undefined);\n    else v.pause();\n  }, [running, index, seen]);\n\n  const playable = Boolean(current?.video) && seen && !reduced;\n  const onTime = (e: React.SyntheticEvent<HTMLVideoElement>) => {\n    const v = e.currentTarget;\n    if (bar.current && v.duration) bar.current.style.transform = `scaleX(${v.currentTime / v.duration})`;\n  };\n\n  return (\n    <section\n      ref={root}\n      aria-roledescription=\"carousel\"\n      aria-label={label}\n      className={cn(\"grid items-center gap-6 md:grid-cols-[minmax(0,20rem)_minmax(0,1fr)] md:gap-10\", className)}\n      onPointerEnter={() => setHold((h) => ({ ...h, hover: true }))}\n      onPointerLeave={() => setHold((h) => ({ ...h, hover: false }))}\n      onFocus={() => setHold((h) => ({ ...h, focus: true }))}\n      onBlur={(e) => {\n        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setHold((h) => ({ ...h, focus: false }));\n      }}\n      {...props}\n    >\n      <style href=\"kz-step-showcase\" precedence=\"medium\">{FILL_CSS}</style>\n      <div className=\"order-2 grid gap-3 md:order-1\">\n        <div role=\"tablist\" aria-orientation=\"vertical\" aria-label={label} className=\"flex justify-center gap-2 md:grid md:gap-1\">\n          {steps.map((s, i) => {\n            const active = i === index;\n            return (\n              <button\n                key={s.id}\n                type=\"button\"\n                role=\"tab\"\n                id={`${id}-tab-${i}`}\n                aria-selected={active}\n                aria-controls={`${id}-panel`}\n                tabIndex={active ? 0 : -1}\n                onClick={() => go(i, true)}\n                onKeyDown={(e) => {\n                  if (e.key === \"ArrowDown\" || e.key === \"ArrowRight\") go(i + 1, true);\n                  else if (e.key === \"ArrowUp\" || e.key === \"ArrowLeft\") go(i - 1, true);\n                  else return;\n                  e.preventDefault();\n                }}\n                className={cn(\n                  \"group relative rounded-xl text-left outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-ring\",\n                  \"max-md:h-2.5 max-md:w-2.5 max-md:rounded-full max-md:bg-border-strong max-md:aria-selected:w-6 max-md:aria-selected:bg-accent\",\n                  \"md:overflow-hidden md:p-4 md:hover:bg-surface-2 md:aria-selected:bg-surface-2\",\n                )}\n              >\n                <span className=\"max-md:sr-only\">\n                  <span className=\"flex items-baseline gap-3\">\n                    <span className={cn(\"font-mono text-xs\", active ? \"text-fg-accent\" : \"text-fg-secondary\")}>{String(i + 1).padStart(2, \"0\")}</span>\n                    <span className={cn(\"text-sm font-semibold\", active ? \"text-fg\" : \"text-fg-secondary\")}>{s.title}</span>\n                  </span>\n                  <span className=\"mt-1 block pl-8 text-xs leading-relaxed text-fg-secondary\">{s.description}</span>\n                </span>\n                {active && auto && (\n                  <span aria-hidden className=\"absolute inset-x-4 bottom-0 hidden h-0.5 overflow-hidden rounded-full bg-border-subtle md:block\">\n                    <span\n                      key={`${s.id}-${playable}`}\n                      ref={bar}\n                      data-fill\n                      className={cn(\"block h-full bg-accent\", !playable && \"kz-step-fill\")}\n                      style={{ transform: playable ? \"scaleX(0)\" : undefined, animationPlayState: running ? \"running\" : \"paused\", [\"--kz-step-ms\" as string]: `${s.duration ?? 6000}ms` }}\n                      onAnimationEnd={() => go(index + 1, false)}\n                    />\n                  </span>\n                )}\n              </button>\n            );\n          })}\n        </div>\n        <p aria-hidden className=\"text-center text-sm md:hidden\">\n          <span className=\"font-semibold text-fg\">{current?.title}</span> <span className=\"text-fg-secondary\">{current?.description}</span>\n        </p>\n        {auto && (\n          <button type=\"button\" onClick={() => setPaused((p) => !p)} aria-pressed={paused} className=\"mx-auto inline-flex h-8 items-center gap-2 rounded-full border border-border-subtle px-3 text-xs font-medium text-fg-secondary hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring md:mx-0 md:w-fit\">\n            <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"currentColor\" aria-hidden>\n              {paused ? <path d=\"M8 5v14l11-7z\" /> : <path d=\"M7 5h4v14H7zM13 5h4v14h-4z\" />}\n            </svg>\n            {paused ? labels.play : labels.pause}\n          </button>\n        )}\n      </div>\n\n      <div\n        id={`${id}-panel`}\n        role=\"tabpanel\"\n        aria-roledescription=\"slide\"\n        aria-labelledby={`${id}-tab-${index}`}\n        className=\"order-1 touch-pan-y md:order-2\"\n        onPointerDown={(e) => {\n          swipe.current = e.clientX;\n        }}\n        onPointerUp={(e) => {\n          if (swipe.current === null) return;\n          const dx = e.clientX - swipe.current;\n          swipe.current = null;\n          if (Math.abs(dx) > 40) go(index + (dx < 0 ? 1 : -1), true);\n        }}\n      >\n        <DeviceFrame kind={device} title={deviceTitle}>\n          {steps.map((s, i) => {\n            const active = i === index;\n            return (\n              <div key={s.id} data-step={s.id} aria-hidden={!active} className={cn(\"absolute inset-0 transition-opacity duration-500 motion-reduce:transition-none\", active ? \"opacity-100\" : \"opacity-0\")}>\n                <img src={s.poster} alt={active ? s.alt : \"\"} loading={i === 0 ? \"eager\" : \"lazy\"} decoding=\"async\" className=\"h-full w-full object-cover\" />\n                {active && playable && s.video && (\n                  <video\n                    ref={video}\n                    key={s.id}\n                    muted\n                    playsInline\n                    preload=\"metadata\"\n                    poster={s.poster}\n                    aria-hidden\n                    tabIndex={-1}\n                    onTimeUpdate={onTime}\n                    onEnded={() => go(index + 1, false)}\n                    className=\"absolute inset-0 h-full w-full object-cover\"\n                  >\n                    {s.video.webm && <source src={s.video.webm} type=\"video/webm\" />}\n                    {s.video.mp4 && <source src={s.video.mp4} type=\"video/mp4\" />}\n                  </video>\n                )}\n              </div>\n            );\n          })}\n        </DeviceFrame>\n        <span className=\"sr-only\" aria-live=\"off\">\n          {labels.step(index + 1, total)}\n        </span>\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs"]}

package/dist/tabs.js

@@ -15,7 +15,7 @@ var tabs = tv({
     // (server render), each trigger carries its own active style.
     list: "group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100",
     trigger: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40",
-    content: "kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+    content: "kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=inactive]:hidden"
   },
   variants: {
     variant: {

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tabs/tabs.tsx"],"sourcesContent":["// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed\n    // (server render), each trigger carries its own active style.\n    list:\n      \"group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col \" +\n      \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 \" +\n      \"motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    trigger:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    content: \"kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    variant: {\n      /* The section of a page: a line under the list, the active tab underlined in the accent. */\n      underline: {\n        list:\n          \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-full before:bg-accent \" +\n          \"data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 \" +\n          \"data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) \" +\n          \"data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 \" +\n          \"data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)\",\n        trigger:\n          \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n          \"after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent \" +\n          \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n          \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent\",\n      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list:\n          \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm\",\n        trigger:\n          \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n          \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent \" +\n          \"transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none\",\n      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list:\n          \"gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n          \"before:rounded-full before:border before:border-accent before:bg-accent-soft\",\n        trigger:\n          \"h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n          \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, ...props }: TabsRootProps) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n    </VariantContext.Provider>\n  );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=tab]\", active: \"[role=tab][data-state=active]\" });\n  return <TabsPrimitive.List ref={ref} data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };\n"],"mappings":";;;;;;AAEA,SAAS,QAAQ,qBAAqB;AACtC,YAAY,WAAW;AACvB,SAAS,UAA6B;AA2EhC;AAvEC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA,IAGN,MACE;AAAA,IAGF,SACE;AAAA,IAEF,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA;AAAA,MAEP,WAAW;AAAA,QACT,MACE;AAAA,QAKF,SACE;AAAA,MAKJ;AAAA;AAAA,MAEA,WAAW;AAAA,QACT,MACE;AAAA,QAEF,SACE;AAAA,MAGJ;AAAA;AAAA,MAEA,OAAO;AAAA,QACL,MACE;AAAA,QAGF,SACE;AAAA,MAGJ;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,YAAY;AAC1C,CAAC;AAKD,IAAM,iBAAuB,oBAAuB,WAAW;AAQxD,SAAS,SAAS,EAAE,UAAU,aAAa,WAAW,GAAG,MAAM,GAAkB;AACtF,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,cAAc,MAAd,EAAmB,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GAC1G;AAEJ;AAGO,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAoD;AACjG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,QAAM,EAAE,IAAI,IAAI,oBAAoC,EAAE,MAAM,cAAc,QAAQ,gCAAgC,CAAC;AACnH,SAAO,oBAAC,cAAc,MAAd,EAAmB,KAAU,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3H;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChG;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrF;AAGO,IAAM,OAAO,EAAE,MAAM,UAAU,MAAM,UAAU,SAAS,aAAa,SAAS,YAAY;","names":[]}
+{"version":3,"sources":["../src/tabs/tabs.tsx"],"sourcesContent":["// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed\n    // (server render), each trigger carries its own active style.\n    list:\n      \"group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col \" +\n      \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 \" +\n      \"motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    trigger:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    content: \"kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=inactive]:hidden\",\n  },\n  variants: {\n    variant: {\n      /* The section of a page: a line under the list, the active tab underlined in the accent. */\n      underline: {\n        list:\n          \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-full before:bg-accent \" +\n          \"data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 \" +\n          \"data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) \" +\n          \"data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 \" +\n          \"data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)\",\n        trigger:\n          \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n          \"after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent \" +\n          \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n          \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent\",\n      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list:\n          \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm\",\n        trigger:\n          \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n          \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent \" +\n          \"transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none\",\n      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list:\n          \"gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n          \"before:rounded-full before:border before:border-accent before:bg-accent-soft\",\n        trigger:\n          \"h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n          \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, ...props }: TabsRootProps) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n    </VariantContext.Provider>\n  );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=tab]\", active: \"[role=tab][data-state=active]\" });\n  return <TabsPrimitive.List ref={ref} data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };\n"],"mappings":";;;;;;AAEA,SAAS,QAAQ,qBAAqB;AACtC,YAAY,WAAW;AACvB,SAAS,UAA6B;AA2EhC;AAvEC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA,IAGN,MACE;AAAA,IAGF,SACE;AAAA,IAEF,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA;AAAA,MAEP,WAAW;AAAA,QACT,MACE;AAAA,QAKF,SACE;AAAA,MAKJ;AAAA;AAAA,MAEA,WAAW;AAAA,QACT,MACE;AAAA,QAEF,SACE;AAAA,MAGJ;AAAA;AAAA,MAEA,OAAO;AAAA,QACL,MACE;AAAA,QAGF,SACE;AAAA,MAGJ;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,YAAY;AAC1C,CAAC;AAKD,IAAM,iBAAuB,oBAAuB,WAAW;AAQxD,SAAS,SAAS,EAAE,UAAU,aAAa,WAAW,GAAG,MAAM,GAAkB;AACtF,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,cAAc,MAAd,EAAmB,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GAC1G;AAEJ;AAGO,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAoD;AACjG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,QAAM,EAAE,IAAI,IAAI,oBAAoC,EAAE,MAAM,cAAc,QAAQ,gCAAgC,CAAC;AACnH,SAAO,oBAAC,cAAc,MAAd,EAAmB,KAAU,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3H;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChG;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrF;AAGO,IAAM,OAAO,EAAE,MAAM,UAAU,MAAM,UAAU,SAAS,aAAa,SAAS,YAAY;","names":[]}

package/dist/terminal-replay.js

@@ -7,7 +7,7 @@ import {
 } from "./chunk-KDXRYUD3.js";
 import {
   cn
-} from "./chunk-2FRWNSRO.js";
+} from "./chunk-NSLXEDIS.js";
 
 // src/terminal-replay/terminal-replay.tsx
 import * as React from "react";

package/dist/theme.js

@@ -1,9 +1,10 @@
 "use client";
 import {
   buttonVariants
-} from "./chunk-OWC2LZD2.js";
+} from "./chunk-CHOJUCVE.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-WEVYKZIF.js";
+import "./chunk-NSLXEDIS.js";
 
 // src/theme/theme.tsx
 import * as React from "react";

package/dist/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/theme/theme.tsx"],"sourcesContent":["// Client. ONE mechanism for the whole organisation: dark by default, `html.light` for light, `html.theme-<name>` for a\n// named theme, persisted in localStorage (`kz-theme` for the mode, `kz-theme-name` for the named theme).\nimport * as React from \"react\";\n\nimport { type ButtonVariants, buttonVariants } from \"../button/button\";\n\nexport type Mode = \"dark\" | \"light\" | \"system\";\n\nconst MODE_KEY = \"kz-theme\";\nconst NAME_KEY = \"kz-theme-name\";\nconst MODES: readonly Mode[] = [\"dark\", \"light\", \"system\"];\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\nconst isMode = (value: unknown): value is Mode => MODES.includes(value as Mode);\n\n// Storage blocked (private mode, sandbox): the choice lives in memory for the page.\nconst memory = new Map<string, string>();\n\nfunction read(key: string): string | null {\n  try {\n    return localStorage.getItem(key);\n  } catch {\n    return memory.get(key) ?? null;\n  }\n}\n\nfunction write(key: string, value: string | null) {\n  if (value === null) memory.delete(key);\n  else memory.set(key, value);\n  try {\n    if (value === null) localStorage.removeItem(key);\n    else localStorage.setItem(key, value);\n  } catch {\n    // storage blocked: memory holds it\n  }\n}\n\n// The persisted choice is an external store: every provider and tab reads the same value, the server reads none.\nconst listeners = new Set<() => void>();\nconst notify = () => listeners.forEach((listener) => listener());\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  window.addEventListener(\"storage\", listener);\n  return () => {\n    listeners.delete(listener);\n    window.removeEventListener(\"storage\", listener);\n  };\n}\n\nfunction applyMode(mode: Mode) {\n  const dark = window.matchMedia(DARK_QUERY).matches;\n  document.documentElement.classList.toggle(\"light\", mode === \"light\" || (mode === \"system\" && !dark));\n}\n\nfunction applyName(previous: string | null, next: string | null) {\n  const classes = document.documentElement.classList;\n  if (previous) classes.remove(`theme-${previous}`);\n  if (next) classes.add(`theme-${next}`);\n}\n\nexport type ThemeScriptProps = {\n  /** The nonce of a strict Content-Security-Policy (`script-src 'nonce-…'`). */\n  nonce?: string;\n  /**\n   * The mode before the visitor chooses one — pass the same value as `ThemeProvider`'s `defaultMode`. A persisted\n   * choice (`kz-theme`) always wins.\n   * @default \"system\"\n   */\n  defaultMode?: Mode;\n};\n\n/**\n * In <head>, before anything renders: applies the persisted mode (else `defaultMode`) and named theme, so the page\n * never flashes. `nonce` for a strict Content-Security-Policy.\n */\nexport function ThemeScript({ nonce, defaultMode = \"system\" }: ThemeScriptProps) {\n  const fallback = isMode(defaultMode) ? defaultMode : \"system\";\n  const js =\n    `(function(){try{var m=localStorage.getItem(\"${MODE_KEY}\");if(m!==\"dark\"&&m!==\"light\"&&m!==\"system\")m=\"${fallback}\";` +\n    `var n=localStorage.getItem(\"${NAME_KEY}\");var d=matchMedia(\"${DARK_QUERY}\").matches;var c=document.documentElement.classList;` +\n    `c.toggle(\"light\",m===\"light\"||(m===\"system\"&&!d));if(n)c.add(\"theme-\"+n)}catch(e){}})()`;\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: js }} />;\n}\n\nexport type ThemeContextValue = {\n  /** The chosen mode: dark, light or follow the system. */\n  mode: Mode;\n  setMode: (mode: Mode) => void;\n  /** The named theme (`html.theme-<name>`), or null. */\n  theme: string | null;\n  setTheme: (theme: string | null) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  /**\n   * The mode before the visitor chooses one (nothing persisted as `kz-theme`) — pass the same value to `ThemeScript`.\n   * @default \"system\"\n   */\n  defaultMode?: Mode;\n};\n\nexport function ThemeProvider({ children, defaultMode = \"system\" }: ThemeProviderProps) {\n  // Before hydration the server knows nothing persisted (ThemeScript has already applied it to <html>).\n  const stored = React.useSyncExternalStore(subscribe, () => read(MODE_KEY), () => null);\n  const mode: Mode = isMode(stored) ? stored : defaultMode;\n  const theme = React.useSyncExternalStore(subscribe, () => read(NAME_KEY), () => null);\n\n  // The same resolution as ThemeScript (a no-op after it), for an app that renders the provider without the script.\n  React.useEffect(() => {\n    const persisted = read(MODE_KEY);\n    applyMode(isMode(persisted) ? persisted : defaultMode);\n  }, [defaultMode]);\n\n  // \"system\" follows the operating system while the page is open.\n  React.useEffect(() => {\n    if (mode !== \"system\") return;\n    const query = window.matchMedia(DARK_QUERY);\n    const onChange = () => applyMode(\"system\");\n    query.addEventListener?.(\"change\", onChange);\n    return () => query.removeEventListener?.(\"change\", onChange);\n  }, [mode]);\n\n  const setMode = React.useCallback((next: Mode) => {\n    write(MODE_KEY, next);\n    applyMode(next);\n    notify();\n  }, []);\n\n  const setTheme = React.useCallback((next: string | null) => {\n    applyName(read(NAME_KEY), next);\n    write(NAME_KEY, next);\n    notify();\n  }, []);\n\n  const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme(): ThemeContextValue {\n  const context = React.useContext(ThemeContext);\n  if (!context) throw new Error(\"useTheme: wrap the app in <ThemeProvider>\");\n  return context;\n}\n\nconst ICONS: Record<Mode, React.ReactNode> = {\n  dark: <path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\" />,\n  light: (\n    <>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n    </>\n  ),\n  system: (\n    <>\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" />\n      <path d=\"M8 20h8M12 16v4\" />\n    </>\n  ),\n};\n\nexport type ThemeToggleProps = Omit<React.ComponentProps<\"button\">, \"onClick\" | \"children\"> &\n  Pick<ButtonVariants, \"variant\" | \"shape\"> & {\n    /** Any `Button` variant. */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * rounded · pill.\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** The accessible name — a string, or one per current mode (e.g. `(mode) => t(\"theme.\" + mode)`). */\n    label: string | ((mode: Mode) => string);\n  };\n\n/**\n * An icon button (styled as `IconButton`, without its Slot) that cycles dark → light → system. Needs a\n * <ThemeProvider> above it. State: `data-mode`.\n */\nexport function ThemeToggle({ label, variant = \"ghost\", shape, className, ...props }: ThemeToggleProps) {\n  const { mode, setMode } = useTheme();\n  const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] as Mode;\n  const name = typeof label === \"function\" ? label(mode) : label;\n  return (\n    <button\n      type=\"button\"\n      aria-label={name}\n      title={name}\n      data-mode={mode}\n      onClick={() => setMode(next)}\n      className={buttonVariants({ variant, shape, size: \"icon\", className })}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        {ICONS[mode]}\n      </svg>\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/theme/theme.tsx"],"sourcesContent":["// Client. ONE mechanism for the whole organisation: dark by default, `html.light` for light, `html.theme-<name>` for a\n// named theme, persisted in localStorage (`kz-theme` for the mode, `kz-theme-name` for the named theme).\nimport * as React from \"react\";\n\nimport { type ButtonVariants, buttonVariants } from \"../button/button\";\n\nexport type Mode = \"dark\" | \"light\" | \"system\";\n\nconst MODE_KEY = \"kz-theme\";\nconst NAME_KEY = \"kz-theme-name\";\nconst MODES: readonly Mode[] = [\"dark\", \"light\", \"system\"];\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\nconst isMode = (value: unknown): value is Mode => MODES.includes(value as Mode);\n\n// Storage blocked (private mode, sandbox): the choice lives in memory for the page.\nconst memory = new Map<string, string>();\n\nfunction read(key: string): string | null {\n  try {\n    return localStorage.getItem(key);\n  } catch {\n    return memory.get(key) ?? null;\n  }\n}\n\nfunction write(key: string, value: string | null) {\n  if (value === null) memory.delete(key);\n  else memory.set(key, value);\n  try {\n    if (value === null) localStorage.removeItem(key);\n    else localStorage.setItem(key, value);\n  } catch {\n    // storage blocked: memory holds it\n  }\n}\n\n// The persisted choice is an external store: every provider and tab reads the same value, the server reads none.\nconst listeners = new Set<() => void>();\nconst notify = () => listeners.forEach((listener) => listener());\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  window.addEventListener(\"storage\", listener);\n  return () => {\n    listeners.delete(listener);\n    window.removeEventListener(\"storage\", listener);\n  };\n}\n\nfunction applyMode(mode: Mode) {\n  const dark = window.matchMedia(DARK_QUERY).matches;\n  document.documentElement.classList.toggle(\"light\", mode === \"light\" || (mode === \"system\" && !dark));\n}\n\nfunction applyName(previous: string | null, next: string | null) {\n  const classes = document.documentElement.classList;\n  if (previous) classes.remove(`theme-${previous}`);\n  if (next) classes.add(`theme-${next}`);\n}\n\nexport type ThemeScriptProps = {\n  /** The nonce of a strict Content-Security-Policy (`script-src 'nonce-…'`). */\n  nonce?: string;\n  /**\n   * The mode before the visitor chooses one — pass the same value as `ThemeProvider`'s `defaultMode`. A persisted\n   * choice (`kz-theme`) always wins.\n   * @default \"system\"\n   */\n  defaultMode?: Mode;\n};\n\n/**\n * In <head>, before anything renders: applies the persisted mode (else `defaultMode`) and named theme, so the page\n * never flashes. `nonce` for a strict Content-Security-Policy.\n */\nexport function ThemeScript({ nonce, defaultMode = \"system\" }: ThemeScriptProps) {\n  const fallback = isMode(defaultMode) ? defaultMode : \"system\";\n  const js =\n    `(function(){try{var m=localStorage.getItem(\"${MODE_KEY}\");if(m!==\"dark\"&&m!==\"light\"&&m!==\"system\")m=\"${fallback}\";` +\n    `var n=localStorage.getItem(\"${NAME_KEY}\");var d=matchMedia(\"${DARK_QUERY}\").matches;var c=document.documentElement.classList;` +\n    `c.toggle(\"light\",m===\"light\"||(m===\"system\"&&!d));if(n)c.add(\"theme-\"+n)}catch(e){}})()`;\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: js }} />;\n}\n\nexport type ThemeContextValue = {\n  /** The chosen mode: dark, light or follow the system. */\n  mode: Mode;\n  setMode: (mode: Mode) => void;\n  /** The named theme (`html.theme-<name>`), or null. */\n  theme: string | null;\n  setTheme: (theme: string | null) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  /**\n   * The mode before the visitor chooses one (nothing persisted as `kz-theme`) — pass the same value to `ThemeScript`.\n   * @default \"system\"\n   */\n  defaultMode?: Mode;\n};\n\nexport function ThemeProvider({ children, defaultMode = \"system\" }: ThemeProviderProps) {\n  // Before hydration the server knows nothing persisted (ThemeScript has already applied it to <html>).\n  const stored = React.useSyncExternalStore(subscribe, () => read(MODE_KEY), () => null);\n  const mode: Mode = isMode(stored) ? stored : defaultMode;\n  const theme = React.useSyncExternalStore(subscribe, () => read(NAME_KEY), () => null);\n\n  // The same resolution as ThemeScript (a no-op after it), for an app that renders the provider without the script.\n  React.useEffect(() => {\n    const persisted = read(MODE_KEY);\n    applyMode(isMode(persisted) ? persisted : defaultMode);\n  }, [defaultMode]);\n\n  // \"system\" follows the operating system while the page is open.\n  React.useEffect(() => {\n    if (mode !== \"system\") return;\n    const query = window.matchMedia(DARK_QUERY);\n    const onChange = () => applyMode(\"system\");\n    query.addEventListener?.(\"change\", onChange);\n    return () => query.removeEventListener?.(\"change\", onChange);\n  }, [mode]);\n\n  const setMode = React.useCallback((next: Mode) => {\n    write(MODE_KEY, next);\n    applyMode(next);\n    notify();\n  }, []);\n\n  const setTheme = React.useCallback((next: string | null) => {\n    applyName(read(NAME_KEY), next);\n    write(NAME_KEY, next);\n    notify();\n  }, []);\n\n  const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme(): ThemeContextValue {\n  const context = React.useContext(ThemeContext);\n  if (!context) throw new Error(\"useTheme: wrap the app in <ThemeProvider>\");\n  return context;\n}\n\nconst ICONS: Record<Mode, React.ReactNode> = {\n  dark: <path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\" />,\n  light: (\n    <>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n    </>\n  ),\n  system: (\n    <>\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" />\n      <path d=\"M8 20h8M12 16v4\" />\n    </>\n  ),\n};\n\nexport type ThemeToggleProps = Omit<React.ComponentProps<\"button\">, \"onClick\" | \"children\"> &\n  Pick<ButtonVariants, \"variant\" | \"shape\"> & {\n    /** Any `Button` variant. */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * rounded · pill.\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** The accessible name — a string, or one per current mode (e.g. `(mode) => t(\"theme.\" + mode)`). */\n    label: string | ((mode: Mode) => string);\n  };\n\n/**\n * An icon button (styled as `IconButton`, without its Slot) that cycles dark → light → system. Needs a\n * <ThemeProvider> above it. State: `data-mode`.\n */\nexport function ThemeToggle({ label, variant = \"ghost\", shape, className, ...props }: ThemeToggleProps) {\n  const { mode, setMode } = useTheme();\n  const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] as Mode;\n  const name = typeof label === \"function\" ? label(mode) : label;\n  return (\n    <button\n      type=\"button\"\n      aria-label={name}\n      title={name}\n      data-mode={mode}\n      onClick={() => setMode(next)}\n      className={buttonVariants({ variant, shape, size: \"icon\", className })}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        {ICONS[mode]}\n      </svg>\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/toast.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-WEVYKZIF.js";
 import {
   cn
-} from "./chunk-2FRWNSRO.js";
+} from "./chunk-NSLXEDIS.js";
 
 // src/toast/toast.tsx
 import { toast, Toaster as Sonner } from "sonner";

package/dist/toc.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-G3ETON2A.js";
+} from "./chunk-WU4VLSEA.js";
 
 // src/toc/toc.tsx
 import * as React from "react";

package/dist/tooltip.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-J3NC6ER4.js";
 import {
   cn
-} from "./chunk-2FRWNSRO.js";
+} from "./chunk-NSLXEDIS.js";
 
 // src/tooltip/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "radix-ui";

package/dist/update-prompt.js

@@ -1,9 +1,10 @@
 import "./chunk-TDG7ED2W.js";
 import {
   Button
-} from "./chunk-3IN6TOPM.js";
+} from "./chunk-6ZYRUOTA.js";
 import "./chunk-43PTCDTL.js";
 import "./chunk-2VNYHG4E.js";
+import "./chunk-W675RFOA.js";
 
 // src/update-prompt/update-prompt.tsx
 import { tv } from "tailwind-variants";