@krizaka/ui 3.20.0 → 3.22.0

package/dist/step-showcase.js

@@ -0,0 +1,227 @@
+"use client";
+import {
+  cn
+} from "./chunk-2FRWNSRO.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

@@ -1,7 +1,7 @@
 "use client";
 import {
   useSlidingIndicator
-} from "./chunk-VDR2EP6K.js";
+} from "./chunk-4QN5YJ3D.js";
 
 // src/tabs/tabs.tsx
 import { Tabs as TabsPrimitive } from "radix-ui";
@@ -31,7 +31,7 @@ var tabs = tv({
       },
       /* Pills that scroll sideways on a phone: a feed's sections. */
       pills: {
-        list: "gap-1.5 overflow-x-auto overscroll-x-contain [scrollbar-width:none] data-[orientation=horizontal]:pb-1 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-full before:border before:border-accent before:bg-accent-soft",
+        list: "gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden 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-full before:border before:border-accent before:bg-accent-soft",
         trigger: "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 data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent"
       }
     }

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 overscroll-x-contain [scrollbar-width:none] data-[orientation=horizontal]:pb-1 \" +\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\",\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/update-prompt.d.ts

@@ -0,0 +1,86 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const updatePrompt: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            version?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            version?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    mark: string;
+    content: string;
+    title: string;
+    message: string;
+    version: string;
+    actions: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            version?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    mark: string;
+    content: string;
+    title: string;
+    message: string;
+    version: string;
+    actions: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    mark: string;
+    content: string;
+    title: string;
+    message: string;
+    version: string;
+    actions: string;
+}>>;
+type UpdatePromptProps = Omit<React.ComponentProps<"section">, "title"> & {
+    /** The headline (“A new version is available”). */
+    title: React.ReactNode;
+    /** Why update, in a sentence — the backend's localized `message`. */
+    message?: React.ReactNode;
+    /** The versions, in words and mono (“1.2.0 → 1.4.0”). */
+    versionLabel?: React.ReactNode;
+    /** The product's mark (decorative), e.g. `<OrazakaLogo />`. */
+    mark?: React.ReactNode;
+    /** The button that updates (“Update”). */
+    updateLabel: string;
+    /** Opens the store page, or reloads the app on the new version. */
+    onUpdate: () => void;
+    /** The way out (“Later”). */
+    laterLabel: string;
+    /** Called by the way out: the hook remembers it for this version. */
+    onLater: () => void;
+};
+/** The soft update: an invitation that can be dismissed, announced politely. */
+declare function UpdatePrompt({ title, message, versionLabel, mark, updateLabel, onUpdate, laterLabel, onLater, className, ...props }: UpdatePromptProps): React.JSX.Element;
+
+export { UpdatePrompt, type UpdatePromptProps, updatePrompt };

package/dist/update-prompt.js

@@ -0,0 +1,41 @@
+import "./chunk-TDG7ED2W.js";
+import {
+  Button
+} from "./chunk-3IN6TOPM.js";
+import "./chunk-43PTCDTL.js";
+import "./chunk-2VNYHG4E.js";
+
+// src/update-prompt/update-prompt.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var updatePrompt = tv({
+  slots: {
+    root: "flex w-full flex-wrap items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-4 text-sm text-fg",
+    mark: "flex h-10 w-10 shrink-0 items-center justify-center [&>svg]:h-10 [&>svg]:w-10",
+    content: "flex min-w-0 flex-1 flex-col gap-0.5",
+    title: "font-semibold text-fg",
+    message: "text-fg-secondary",
+    version: "font-mono text-xs text-fg-tertiary",
+    actions: "flex shrink-0 items-center gap-2"
+  }
+});
+function UpdatePrompt({ title, message, versionLabel, mark, updateLabel, onUpdate, laterLabel, onLater, className, ...props }) {
+  const s = updatePrompt();
+  return /* @__PURE__ */ jsxs("section", { role: "region", "aria-label": typeof title === "string" ? title : void 0, "data-kind": "update-soft", className: s.root({ className }), ...props, children: [
+    mark && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.mark(), children: mark }),
+    /* @__PURE__ */ jsxs("div", { className: s.content(), children: [
+      /* @__PURE__ */ jsx("p", { className: s.title(), children: title }),
+      message && /* @__PURE__ */ jsx("p", { className: s.message(), children: message }),
+      versionLabel && /* @__PURE__ */ jsx("p", { className: s.version(), children: versionLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: s.actions(), children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onLater, children: laterLabel }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", shape: "cut", onClick: onUpdate, children: updateLabel })
+    ] })
+  ] });
+}
+export {
+  UpdatePrompt,
+  updatePrompt
+};
+//# sourceMappingURL=update-prompt.js.map

package/dist/update-prompt.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/update-prompt/update-prompt.tsx"],"sourcesContent":["// Server-safe. The soft invitation to update: a dismissible banner, in the flow of the page, never a blocker.\n// Every word is a prop (the app passes them translated); the version and the store URL come from `useAppConfig`.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const updatePrompt = tv({\n  slots: {\n    root: \"flex w-full flex-wrap items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-4 text-sm text-fg\",\n    mark: \"flex h-10 w-10 shrink-0 items-center justify-center [&>svg]:h-10 [&>svg]:w-10\",\n    content: \"flex min-w-0 flex-1 flex-col gap-0.5\",\n    title: \"font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    version: \"font-mono text-xs text-fg-tertiary\",\n    actions: \"flex shrink-0 items-center gap-2\",\n  },\n});\n\nexport type UpdatePromptProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The headline (“A new version is available”). */\n  title: React.ReactNode;\n  /** Why update, in a sentence — the backend's localized `message`. */\n  message?: React.ReactNode;\n  /** The versions, in words and mono (“1.2.0 → 1.4.0”). */\n  versionLabel?: React.ReactNode;\n  /** The product's mark (decorative), e.g. `<OrazakaLogo />`. */\n  mark?: React.ReactNode;\n  /** The button that updates (“Update”). */\n  updateLabel: string;\n  /** Opens the store page, or reloads the app on the new version. */\n  onUpdate: () => void;\n  /** The way out (“Later”). */\n  laterLabel: string;\n  /** Called by the way out: the hook remembers it for this version. */\n  onLater: () => void;\n};\n\n/** The soft update: an invitation that can be dismissed, announced politely. */\nexport function UpdatePrompt({ title, message, versionLabel, mark, updateLabel, onUpdate, laterLabel, onLater, className, ...props }: UpdatePromptProps) {\n  const s = updatePrompt();\n  return (\n    <section role=\"region\" aria-label={typeof title === \"string\" ? title : undefined} data-kind=\"update-soft\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <div className={s.content()}>\n        <p className={s.title()}>{title}</p>\n        {message && <p className={s.message()}>{message}</p>}\n        {versionLabel && <p className={s.version()}>{versionLabel}</p>}\n      </div>\n      <div className={s.actions()}>\n        <Button variant=\"ghost\" size=\"sm\" onClick={onLater}>\n          {laterLabel}\n        </Button>\n        <Button variant=\"primary\" size=\"sm\" shape=\"cut\" onClick={onUpdate}>\n          {updateLabel}\n        </Button>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;AAIA,SAAS,UAAU;AAuCX,cAIF,YAJE;AArCD,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAsBM,SAAS,aAAa,EAAE,OAAO,SAAS,cAAc,MAAM,aAAa,UAAU,YAAY,SAAS,WAAW,GAAG,MAAM,GAAsB;AACvJ,QAAM,IAAI,aAAa;AACvB,SACE,qBAAC,aAAQ,MAAK,UAAS,cAAY,OAAO,UAAU,WAAW,QAAQ,QAAW,aAAU,eAAc,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC7I;AAAA,YACC,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,KAAK,GAChC,gBACH;AAAA,IAEF,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB;AAAA,0BAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,MAC/B,WAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,MAC/C,gBAAgB,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,wBAAa;AAAA,OAC5D;AAAA,IACA,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB;AAAA,0BAAC,UAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,SACxC,sBACH;AAAA,MACA,oBAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,OAAM,OAAM,SAAS,UACtD,uBACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/video-player.d.ts

@@ -163,7 +163,7 @@ type VideoPlayerProps = {
     title: string;
     /** The picture shown before playback. */
     poster?: string;
-    /** Starts playing, muted (browsers refuse sound without a gesture) — not under reduced motion. */
+    /** Starts playing, muted (browsers refuse sound without a gesture), once on screen and again each time it comes back — not under reduced motion. */
     autoPlay?: boolean;
     /** Starts muted. */
     muted?: boolean;

package/dist/video-player.js

@@ -158,11 +158,17 @@ function VideoPlayer({
       hls?.destroy();
     };
   }, [url, type]);
+  const [inView, setInView] = React.useState(() => !pauseWhenHidden || typeof IntersectionObserver === "undefined");
   React.useEffect(() => {
     const element = video.current;
-    if (!element || !url || !(wanted || autoPlay && !reduce)) return;
+    if (!element || !url || !wanted) return;
     playSafely(element);
-  }, [url, wanted, autoPlay, reduce]);
+  }, [url, wanted]);
+  React.useEffect(() => {
+    const element = video.current;
+    if (!element || !url || !autoPlay || reduce || !inView) return;
+    playSafely(element);
+  }, [url, autoPlay, reduce, inView]);
   React.useEffect(() => {
     if (video.current) showTrack(video.current, caption);
   }, [caption, tracks.length]);
@@ -172,7 +178,14 @@ function VideoPlayer({
     return () => document.removeEventListener("fullscreenchange", change);
   }, []);
   React.useEffect(() => () => clearTimeout(idleTimer.current), []);
-  useInView(root, (visible) => !visible && video.current && !video.current.paused && video.current.pause(), pauseWhenHidden);
+  useInView(
+    root,
+    (visible) => {
+      setInView(visible);
+      if (!visible && video.current && !video.current.paused) video.current.pause();
+    },
+    pauseWhenHidden
+  );
   const play = () => {
     setWanted(true);
     setFailed(false);