@krizaka/ui 3.2.0 → 3.4.0

package/dist/slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/slider/slider.tsx"],"sourcesContent":["// Client. Radix Slider: role=\"slider\" on each thumb, arrows / Page Up / Page Down / Home / End, a range with two\n// thumbs. The words arrive as props: `label` names the thumb(s), `formatValue` gives the aria-valuetext and the value\n// shown next to a visible label.\nimport { Slider as SliderPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const slider = tv({\n  slots: {\n    root: \"flex flex-col gap-2\",\n    header: \"flex items-baseline justify-between gap-3 text-xs font-semibold text-fg-secondary\",\n    value: \"font-mono text-[11px] tabular-nums text-fg-secondary\",\n    control:\n      \"relative flex h-6 w-full touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-40\",\n    track: \"relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-3\",\n    range: \"absolute h-full rounded-full bg-linear-to-r from-accent to-accent-2\",\n    thumb:\n      \"block h-5 w-5 cursor-grab rounded-full border border-border-strong bg-fg-on-media shadow-md transition-[box-shadow] \" +\n      \"focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring/50 active:cursor-grabbing\",\n  },\n});\n\nexport type SliderValue = number | [number, number];\n\nexport type SliderProps<V extends SliderValue = number> = Omit<\n  React.ComponentProps<typeof SliderPrimitive.Root>,\n  \"value\" | \"defaultValue\" | \"onValueChange\" | \"onValueCommit\" | \"children\"\n> & {\n  /** One number (a thumb) or two (a range). Controlled with `onValueChange`. */\n  value?: V;\n  /** The value at first, uncontrolled: one number, or two for a range. */\n  defaultValue?: V;\n  /** Called on every move, with one number or two. */\n  onValueChange?: (value: V) => void;\n  /** Called once the drag or the key press ends. */\n  onValueCommit?: (value: V) => void;\n  /** The accessible name — of the thumb, or of both thumbs of a range — passed translated. */\n  label: string;\n  /** For a range: each thumb's own name ([\"Minimum\", \"Maximum\"]), passed translated. */\n  thumbLabels?: [string, string];\n  /** The value as words (aria-valuetext) and as shown: \"1.5×\", \"−12 %\", \"3 min\". */\n  formatValue?: (value: number) => string;\n  /** Shows the label and the value above the track. Without it, `label` only names the thumb. */\n  showLabel?: boolean;\n  /** Fills from this value instead of the minimum (a ±range from 0: brightness, balance). One thumb only. */\n  origin?: number;\n};\n\nconst toArray = (v: SliderValue | undefined) => (v === undefined ? undefined : typeof v === \"number\" ? [v] : v);\n\n/** A slider on one value or a range: `value`/`defaultValue` + `onValueChange`, `min`, `max`, `step`. */\nexport function Slider<V extends SliderValue = number>({\n  value,\n  defaultValue,\n  onValueChange,\n  onValueCommit,\n  label,\n  thumbLabels,\n  formatValue = String,\n  showLabel,\n  origin,\n  min = 0,\n  max = 100,\n  className,\n  ...props\n}: SliderProps<V>) {\n  const s = slider();\n  const range = Array.isArray(value ?? defaultValue);\n  const [inner, setInner] = React.useState(() => toArray(defaultValue) ?? [min]);\n  const current = toArray(value) ?? inner;\n  const out = (next: number[]) => (range ? next : next[0]) as V;\n  const pct = (v: number) => ((v - min) / (max - min || 1)) * 100;\n  const fill =\n    origin !== undefined && !range\n      ? { left: `${Math.min(pct(origin), pct(current[0]))}%`, right: `${100 - Math.max(pct(origin), pct(current[0]))}%` }\n      : undefined;\n  const id = React.useId();\n  return (\n    <div className={s.root({ className })} data-range={range ? \"\" : undefined}>\n      {showLabel && (\n        <div className={s.header()}>\n          <span id={`${id}-label`}>{label}</span>\n          <span className={s.value()} aria-hidden>\n            {current.map(formatValue).join(\" – \")}\n          </span>\n        </div>\n      )}\n      <SliderPrimitive.Root\n        min={min}\n        max={max}\n        value={current}\n        onValueChange={(next) => {\n          if (value === undefined) setInner(next);\n          onValueChange?.(out(next));\n        }}\n        onValueCommit={onValueCommit && ((next) => onValueCommit(out(next)))}\n        className={s.control()}\n        {...props}\n      >\n        <SliderPrimitive.Track className={s.track()}>\n          {fill ? <span data-origin=\"\" className={s.range()} style={fill} /> : <SliderPrimitive.Range className={s.range()} />}\n        </SliderPrimitive.Track>\n        {current.map((v, i) => (\n          <SliderPrimitive.Thumb\n            key={i}\n            aria-label={range ? (thumbLabels?.[i] ?? label) : showLabel ? undefined : label}\n            aria-labelledby={!range && showLabel ? `${id}-label` : undefined}\n            aria-valuetext={formatValue(v)}\n            className={s.thumb()}\n          />\n        ))}\n      </SliderPrimitive.Root>\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,SAAS,UAAU,uBAAuB;AAC1C,YAAY,WAAW;AACvB,SAAS,UAAU;AA2EX,SACE,KADF;AAzED,IAAM,SAAS,GAAG;AAAA,EACvB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SACE;AAAA,IACF,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OACE;AAAA,EAEJ;AACF,CAAC;AA4BD,IAAM,UAAU,CAAC,MAAgC,MAAM,SAAY,SAAY,OAAO,MAAM,WAAW,CAAC,CAAC,IAAI;AAGtG,SAAS,OAAuC;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,IAAI,OAAO;AACjB,QAAM,QAAQ,MAAM,QAAQ,SAAS,YAAY;AACjD,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAS,MAAM,QAAQ,YAAY,KAAK,CAAC,GAAG,CAAC;AAC7E,QAAM,UAAU,QAAQ,KAAK,KAAK;AAClC,QAAM,MAAM,CAAC,SAAoB,QAAQ,OAAO,KAAK,CAAC;AACtD,QAAM,MAAM,CAAC,OAAgB,IAAI,QAAQ,MAAM,OAAO,KAAM;AAC5D,QAAM,OACJ,WAAW,UAAa,CAAC,QACrB,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI,MAAM,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,MAAM,KAAK,IAAI,IAAI,MAAM,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,IAChH;AACN,QAAM,KAAW,YAAM;AACvB,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,cAAY,QAAQ,KAAK,QAC7D;AAAA,iBACC,qBAAC,SAAI,WAAW,EAAE,OAAO,GACvB;AAAA,0BAAC,UAAK,IAAI,GAAG,EAAE,UAAW,iBAAM;AAAA,MAChC,oBAAC,UAAK,WAAW,EAAE,MAAM,GAAG,eAAW,MACpC,kBAAQ,IAAI,WAAW,EAAE,KAAK,UAAK,GACtC;AAAA,OACF;AAAA,IAEF;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,eAAe,CAAC,SAAS;AACvB,cAAI,UAAU,OAAW,UAAS,IAAI;AACtC,0BAAgB,IAAI,IAAI,CAAC;AAAA,QAC3B;AAAA,QACA,eAAe,kBAAkB,CAAC,SAAS,cAAc,IAAI,IAAI,CAAC;AAAA,QAClE,WAAW,EAAE,QAAQ;AAAA,QACpB,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAgB,OAAhB,EAAsB,WAAW,EAAE,MAAM,GACvC,iBAAO,oBAAC,UAAK,eAAY,IAAG,WAAW,EAAE,MAAM,GAAG,OAAO,MAAM,IAAK,oBAAC,gBAAgB,OAAhB,EAAsB,WAAW,EAAE,MAAM,GAAG,GACpH;AAAA,UACC,QAAQ,IAAI,CAAC,GAAG,MACf;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cAEC,cAAY,QAAS,cAAc,CAAC,KAAK,QAAS,YAAY,SAAY;AAAA,cAC1E,mBAAiB,CAAC,SAAS,YAAY,GAAG,EAAE,WAAW;AAAA,cACvD,kBAAgB,YAAY,CAAC;AAAA,cAC7B,WAAW,EAAE,MAAM;AAAA;AAAA,YAJd;AAAA,UAKP,CACD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/slider/slider.tsx"],"sourcesContent":["// Client. Radix Slider: role=\"slider\" on each thumb, arrows / Page Up / Page Down / Home / End, a range with two\n// thumbs, horizontal or vertical. The words arrive as props: `label` names the thumb(s), `formatValue` gives the\n// aria-valuetext and the value shown (above the track, or floating over the thumb while it is touched). `ticks` draws the\n// graduations of the steps (and `marks` their words under the track); `tone` fills with the brand's gradient or its\n// accent alone.\nimport { Slider as SliderPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { tv } from \"../tv\";\n\nexport const slider = tv({\n  slots: {\n    root: \"flex flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:items-center\",\n    header: \"flex items-baseline justify-between gap-3 text-xs font-semibold text-fg-secondary\",\n    value: \"font-mono text-[11px] tabular-nums text-fg-secondary\",\n    control:\n      \"relative flex touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-40 \" +\n      \"data-[orientation=horizontal]:h-6 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:flex-col\",\n    track:\n      \"relative grow overflow-hidden rounded-full bg-surface-3 inset-shadow-well \" +\n      \"data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\",\n    range: \"absolute rounded-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\",\n    thumb:\n      \"group/thumb relative block h-5 w-5 cursor-grab rounded-full border-2 border-accent bg-fg-on-media shadow-raised transition-[box-shadow,scale] duration-150 \" +\n      \"hover:scale-110 focus-visible:outline-hidden focus-visible:focus-ring active:scale-110 active:cursor-grabbing motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:active:scale-100\",\n    // The value over the thumb: shown while the thumb is hovered, focused or held.\n    bubble:\n      \"pointer-events-none absolute bottom-full left-1/2 mb-2.5 -translate-x-1/2 whitespace-nowrap rounded-lg bg-fg px-2 py-1 font-mono text-[11px] font-semibold tabular-nums text-surface-0 opacity-0 shadow-floating \" +\n      \"transition-opacity duration-150 after:absolute after:left-1/2 after:top-full after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-fg \" +\n      \"group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100 group-active/thumb:opacity-100 data-[always]:opacity-100 motion-reduce:transition-none\",\n    bubbleVertical: \"bottom-auto left-full top-1/2 mb-0 ml-3 -translate-x-0 -translate-y-1/2 after:hidden\",\n    ticks: \"pointer-events-none absolute inset-0\",\n    tick: \"absolute rounded-full bg-border-strong data-[on]:bg-on-accent/70 data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-px data-[orientation=horizontal]:-translate-x-1/2 data-[orientation=horizontal]:-translate-y-1/2 data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-1 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:translate-y-1/2\",\n    marks: \"relative h-4 w-full text-[11px] font-medium tabular-nums text-fg-secondary\",\n    mark: \"absolute top-0 -translate-x-1/2 whitespace-nowrap first:translate-x-0 last:-translate-x-full\",\n  },\n  variants: {\n    tone: {\n      /** The brand's signature: accent → accent-2, a glow under it. */\n      gradient: { range: \"bg-linear-to-r from-accent to-accent-2 shadow-glow data-[orientation=vertical]:bg-linear-to-t\" },\n      /** The accent alone. */\n      solid: { range: \"bg-accent\" },\n    },\n    size: {\n      md: {},\n      lg: {\n        track: \"data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5\",\n        thumb: \"h-6 w-6\",\n        control: \"data-[orientation=horizontal]:h-8 data-[orientation=vertical]:w-8\",\n      },\n    },\n  },\n  defaultVariants: { tone: \"gradient\", size: \"md\" },\n});\n\nexport type SliderValue = number | [number, number];\n\nexport type SliderMark = {\n  /** Where the mark stands. */\n  value: number;\n  /** Its words under the track (\"0\", \"50 %\", \"Max\"), passed translated. */\n  label: string;\n};\n\nexport type SliderProps<V extends SliderValue = number> = Omit<\n  React.ComponentProps<typeof SliderPrimitive.Root>,\n  \"value\" | \"defaultValue\" | \"onValueChange\" | \"onValueCommit\" | \"children\"\n> & {\n  /** One number (a thumb) or two (a range). Controlled with `onValueChange`. */\n  value?: V;\n  /** The value at first, uncontrolled: one number, or two for a range. */\n  defaultValue?: V;\n  /** Called on every move, with one number or two. */\n  onValueChange?: (value: V) => void;\n  /** Called once the drag or the key press ends. */\n  onValueCommit?: (value: V) => void;\n  /** The accessible name — of the thumb, or of both thumbs of a range — passed translated. */\n  label: string;\n  /** For a range: each thumb's own name ([\"Minimum\", \"Maximum\"]), passed translated. */\n  thumbLabels?: [string, string];\n  /** The value as words (aria-valuetext) and as shown: \"1.5×\", \"−12 %\", \"3 min\". */\n  formatValue?: (value: number) => string;\n  /** Shows the label and the value above the track. Without it, `label` only names the thumb. */\n  showLabel?: boolean;\n  /** Shows the value floating over the thumb while it is hovered, focused or held (`\"always\"`: at all times). */\n  floatingValue?: boolean | \"always\";\n  /** Fills from this value instead of the minimum (a ±range from 0: brightness, balance). One horizontal thumb only. */\n  origin?: number;\n  /** Draws a graduation at every step (`true`, up to 40 of them) or at the values given. */\n  ticks?: boolean | readonly number[];\n  /** Words under the track at some values (`[{ value: 0, label: \"0\" }, { value: 100, label: \"100\" }]`). Horizontal only. */\n  marks?: readonly SliderMark[];\n  /**\n   * `gradient` (the brand's accent → accent-2, a glow) or `solid` (the accent alone).\n   * @default \"gradient\"\n   */\n  tone?: \"gradient\" | \"solid\";\n  /**\n   * md · lg (a thicker track and thumb: a hero control, a touch screen).\n   * @default \"md\"\n   */\n  size?: \"md\" | \"lg\";\n};\n\nconst toArray = (v: SliderValue | undefined) => (v === undefined ? undefined : typeof v === \"number\" ? [v] : v);\n\n/** A slider on one value or a range: `value`/`defaultValue` + `onValueChange`, `min`, `max`, `step`, `orientation`. */\nexport function Slider<V extends SliderValue = number>({\n  value,\n  defaultValue,\n  onValueChange,\n  onValueCommit,\n  label,\n  thumbLabels,\n  formatValue = String,\n  showLabel,\n  floatingValue,\n  origin,\n  ticks,\n  marks,\n  tone,\n  size,\n  min = 0,\n  max = 100,\n  step = 1,\n  orientation = \"horizontal\",\n  className,\n  ...props\n}: SliderProps<V>) {\n  const s = slider({ tone, size });\n  const range = Array.isArray(value ?? defaultValue);\n  const vertical = orientation === \"vertical\";\n  const [inner, setInner] = React.useState(() => toArray(defaultValue) ?? [min]);\n  const current = toArray(value) ?? inner;\n  const out = (next: number[]) => (range ? next : next[0]) as V;\n  const pct = (v: number) => ((v - min) / (max - min || 1)) * 100;\n  const fill =\n    origin !== undefined && !range && !vertical\n      ? { left: `${Math.min(pct(origin), pct(current[0]!))}%`, right: `${100 - Math.max(pct(origin), pct(current[0]!))}%` }\n      : undefined;\n  const lo = range ? Math.min(...current) : (origin ?? min);\n  const hi = range ? Math.max(...current) : current[0]!;\n  const tickValues = ticks === true ? (max - min) / step <= 40 ? Array.from({ length: Math.round((max - min) / step) + 1 }, (_, i) => min + i * step) : [] : ticks ? [...ticks] : [];\n  const id = React.useId();\n  return (\n    <div className={s.root({ className })} data-range={range ? \"\" : undefined} data-orientation={orientation}>\n      {showLabel && (\n        <div className={s.header()}>\n          <span id={`${id}-label`}>{label}</span>\n          <span className={s.value()} aria-hidden>\n            {current.map(formatValue).join(\" – \")}\n          </span>\n        </div>\n      )}\n      <SliderPrimitive.Root\n        min={min}\n        max={max}\n        step={step}\n        orientation={orientation}\n        value={current}\n        onValueChange={(next) => {\n          if (value === undefined) setInner(next);\n          onValueChange?.(out(next));\n        }}\n        onValueCommit={onValueCommit && ((next) => onValueCommit(out(next)))}\n        className={s.control()}\n        {...props}\n      >\n        <SliderPrimitive.Track className={s.track()}>\n          {fill ? <span data-origin=\"\" data-orientation={orientation} className={s.range()} style={fill} /> : <SliderPrimitive.Range className={s.range()} />}\n          {tickValues.length ? (\n            <span aria-hidden className={s.ticks()}>\n              {tickValues.map((t) => (\n                <span\n                  key={t}\n                  data-orientation={orientation}\n                  data-on={t > lo && t < hi ? \"\" : undefined}\n                  className={s.tick()}\n                  style={vertical ? { bottom: `${pct(t)}%` } : { left: `${pct(t)}%` }}\n                />\n              ))}\n            </span>\n          ) : null}\n        </SliderPrimitive.Track>\n        {current.map((v, i) => (\n          <SliderPrimitive.Thumb\n            key={i}\n            aria-label={range ? (thumbLabels?.[i] ?? label) : showLabel ? undefined : label}\n            aria-labelledby={!range && showLabel ? `${id}-label` : undefined}\n            aria-valuetext={formatValue(v)}\n            className={s.thumb()}\n          >\n            {floatingValue ? (\n              <span aria-hidden data-always={floatingValue === \"always\" ? \"\" : undefined} className={s.bubble({ className: vertical ? s.bubbleVertical() : undefined })}>\n                {formatValue(v)}\n              </span>\n            ) : null}\n          </SliderPrimitive.Thumb>\n        ))}\n      </SliderPrimitive.Root>\n      {marks?.length && !vertical ? (\n        <div aria-hidden className={s.marks()}>\n          {marks.map((m) => (\n            <span key={m.value} className={s.mark()} style={{ left: `${pct(m.value)}%` }}>\n              {m.label}\n            </span>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/stat.d.ts

@@ -20,6 +20,7 @@ declare const stat: tailwind_variants.TVReturnType<{
     meta: string;
     trend: string;
     hint: string;
+    chart: string;
 }, undefined, {
     trend: {
         up: {
@@ -39,6 +40,7 @@ declare const stat: tailwind_variants.TVReturnType<{
     meta: string;
     trend: string;
     hint: string;
+    chart: string;
 }, tailwind_variants.TVReturnTypeLike<{
     trend: {
         up: {
@@ -58,6 +60,7 @@ declare const stat: tailwind_variants.TVReturnType<{
     meta: string;
     trend: string;
     hint: string;
+    chart: string;
 }>>;
 type StatTrend = "up" | "down" | "flat";
 type StatProps = Omit<React.ComponentProps<"div">, "children"> & {
@@ -71,7 +74,33 @@ type StatProps = Omit<React.ComponentProps<"div">, "children"> & {
     trend?: StatTrend;
     /** The change, in words, as read and shown (e.g. "+12 % vs last week") — the arrow alone says nothing. */
     trendLabel?: React.ReactNode;
+    /** Under the figure: a `Sparkline` of @krizaka/charts (its own accessible summary), a `Meter`. */
+    chart?: React.ReactNode;
 };
-declare function Stat({ label, value, hint, trend, trendLabel, className, ...props }: StatProps): React.JSX.Element;
+declare function Stat({ label, value, hint, trend, trendLabel, chart, className, ...props }: StatProps): React.JSX.Element;
+declare const statGrid: tailwind_variants.TVReturnType<{
+    divided: {
+        true: "gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5";
+        false: "gap-6 p-5";
+    };
+}, undefined, "grid w-full grid-cols-[repeat(auto-fit,minmax(var(--kz-stat-min,11rem),1fr))] overflow-hidden rounded-xl border border-border-default bg-surface-1", {
+    divided: {
+        true: "gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5";
+        false: "gap-6 p-5";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    divided: {
+        true: "gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5";
+        false: "gap-6 p-5";
+    };
+}, undefined>>;
+type StatGridProps = React.ComponentProps<"div"> & {
+    /** Hairlines between the stats (default) or space only. */
+    divided?: boolean;
+    /** The narrowest a stat may be before the row wraps, in rem. Default 11. */
+    minWidth?: number;
+};
+/** A row of key figures that wraps with the width: a dashboard's head. The stats are its children. */
+declare function StatGrid({ divided, minWidth, className, style, ...props }: StatGridProps): React.JSX.Element;
 
-export { Stat, type StatProps, type StatTrend, stat };
+export { Stat, StatGrid, type StatGridProps, type StatProps, type StatTrend, stat, statGrid };

package/dist/stat.js

@@ -10,7 +10,8 @@ var stat = tv({
     // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries
     // the direction's colour.
     trend: "inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0",
-    hint: "text-fg-secondary"
+    hint: "text-fg-secondary",
+    chart: "mt-2 h-10 w-full min-w-0"
   },
   variants: {
     trend: {
@@ -21,7 +22,7 @@ var stat = tv({
   }
 });
 var ARROW = { up: "M7 17 17 7M8 7h9v9", down: "M7 7l10 10M17 8v9H8", flat: "M5 12h14M13 6l6 6-6 6" };
-function Stat({ label, value, hint, trend, trendLabel, className, ...props }) {
+function Stat({ label, value, hint, trend, trendLabel, chart, className, ...props }) {
   const s = stat({ trend });
   return /* @__PURE__ */ jsxs("div", { "data-trend": trend, className: s.root({ className }), ...props, children: [
     /* @__PURE__ */ jsx("p", { className: s.label(), children: label }),
@@ -32,11 +33,27 @@ function Stat({ label, value, hint, trend, trendLabel, className, ...props }) {
         trendLabel
       ] }),
       hint && /* @__PURE__ */ jsx("span", { className: s.hint(), children: hint })
-    ] })
+    ] }),
+    chart ? /* @__PURE__ */ jsx("div", { className: s.chart(), children: chart }) : null
   ] });
 }
+var statGrid = tv({
+  base: "grid w-full grid-cols-[repeat(auto-fit,minmax(var(--kz-stat-min,11rem),1fr))] overflow-hidden rounded-xl border border-border-default bg-surface-1",
+  variants: {
+    divided: {
+      true: "gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5",
+      false: "gap-6 p-5"
+    }
+  },
+  defaultVariants: { divided: true }
+});
+function StatGrid({ divided, minWidth = 11, className, style, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: statGrid({ divided, className }), style: { ...style, ["--kz-stat-min"]: `${minWidth}rem` }, ...props });
+}
 export {
   Stat,
-  stat
+  StatGrid,
+  stat,
+  statGrid
 };
 //# sourceMappingURL=stat.js.map

package/dist/stat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/stat/stat.tsx"],"sourcesContent":["// Server-safe. A key figure: a label, the value in tabular digits, a hint, a trend. Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stat = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-1\",\n    label: \"text-xs font-semibold uppercase tracking-wider text-fg-secondary\",\n    value: \"font-display text-2xl font-black tabular-nums text-fg\",\n    meta: \"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\",\n    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries\n    // the direction's colour.\n    trend: \"inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0\",\n    hint: \"text-fg-secondary\",\n  },\n  variants: {\n    trend: {\n      up: { trend: \"[&>svg]:text-success\" },\n      down: { trend: \"[&>svg]:text-danger\" },\n      flat: { trend: \"[&>svg]:text-fg-secondary\" },\n    },\n  },\n});\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\n\nconst ARROW: Record<StatTrend, string> = { up: \"M7 17 17 7M8 7h9v9\", down: \"M7 7l10 10M17 8v9H8\", flat: \"M5 12h14M13 6l6 6-6 6\" };\n\nexport type StatProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** What the figure is (\"Revenue\"), above it. */\n  label: React.ReactNode;\n  /** The figure, formatted by the app, in tabular digits. */\n  value: React.ReactNode;\n  /** A line under the value: the period, the comparison. */\n  hint?: React.ReactNode;\n  /** The direction of the change; its arrow is decorative. */\n  trend?: StatTrend;\n  /** The change, in words, as read and shown (e.g. \"+12 % vs last week\") — the arrow alone says nothing. */\n  trendLabel?: React.ReactNode;\n};\n\nexport function Stat({ label, value, hint, trend, trendLabel, className, ...props }: StatProps) {\n  const s = stat({ trend });\n  return (\n    <div data-trend={trend} className={s.root({ className })} {...props}>\n      <p className={s.label()}>{label}</p>\n      <p className={s.value()}>{value}</p>\n      {(trendLabel || hint) && (\n        <p className={s.meta()}>\n          {trend && trendLabel && (\n            <span className={s.trend()}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                <path d={ARROW[trend]} />\n              </svg>\n              {trendLabel}\n            </span>\n          )}\n          {hint && <span className={s.hint()}>{hint}</span>}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAAU;AA2Cb,cAKM,YALN;AAzCC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA;AAAA;AAAA,IAGN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,IAAI,EAAE,OAAO,uBAAuB;AAAA,MACpC,MAAM,EAAE,OAAO,sBAAsB;AAAA,MACrC,MAAM,EAAE,OAAO,4BAA4B;AAAA,IAC7C;AAAA,EACF;AACF,CAAC;AAID,IAAM,QAAmC,EAAE,IAAI,sBAAsB,MAAM,uBAAuB,MAAM,wBAAwB;AAezH,SAAS,KAAK,EAAE,OAAO,OAAO,MAAM,OAAO,YAAY,WAAW,GAAG,MAAM,GAAc;AAC9F,QAAM,IAAI,KAAK,EAAE,MAAM,CAAC;AACxB,SACE,qBAAC,SAAI,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D;AAAA,wBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,KAC9B,cAAc,SACd,qBAAC,OAAE,WAAW,EAAE,KAAK,GAClB;AAAA,eAAS,cACR,qBAAC,UAAK,WAAW,EAAE,MAAM,GACvB;AAAA,4BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAG,MAAM,KAAK,GAAG,GACzB;AAAA,QACC;AAAA,SACH;AAAA,MAED,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,OAC5C;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../src/stat/stat.tsx"],"sourcesContent":["// Server-safe. A key figure: a label, the value in tabular digits, a hint, a trend. Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stat = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-1\",\n    label: \"text-xs font-semibold uppercase tracking-wider text-fg-secondary\",\n    value: \"font-display text-2xl font-black tabular-nums text-fg\",\n    meta: \"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\",\n    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries\n    // the direction's colour.\n    trend: \"inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0\",\n    hint: \"text-fg-secondary\",\n    chart: \"mt-2 h-10 w-full min-w-0\",\n  },\n  variants: {\n    trend: {\n      up: { trend: \"[&>svg]:text-success\" },\n      down: { trend: \"[&>svg]:text-danger\" },\n      flat: { trend: \"[&>svg]:text-fg-secondary\" },\n    },\n  },\n});\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\n\nconst ARROW: Record<StatTrend, string> = { up: \"M7 17 17 7M8 7h9v9\", down: \"M7 7l10 10M17 8v9H8\", flat: \"M5 12h14M13 6l6 6-6 6\" };\n\nexport type StatProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** What the figure is (\"Revenue\"), above it. */\n  label: React.ReactNode;\n  /** The figure, formatted by the app, in tabular digits. */\n  value: React.ReactNode;\n  /** A line under the value: the period, the comparison. */\n  hint?: React.ReactNode;\n  /** The direction of the change; its arrow is decorative. */\n  trend?: StatTrend;\n  /** The change, in words, as read and shown (e.g. \"+12 % vs last week\") — the arrow alone says nothing. */\n  trendLabel?: React.ReactNode;\n  /** Under the figure: a `Sparkline` of @krizaka/charts (its own accessible summary), a `Meter`. */\n  chart?: React.ReactNode;\n};\n\nexport function Stat({ label, value, hint, trend, trendLabel, chart, className, ...props }: StatProps) {\n  const s = stat({ trend });\n  return (\n    <div data-trend={trend} className={s.root({ className })} {...props}>\n      <p className={s.label()}>{label}</p>\n      <p className={s.value()}>{value}</p>\n      {(trendLabel || hint) && (\n        <p className={s.meta()}>\n          {trend && trendLabel && (\n            <span className={s.trend()}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                <path d={ARROW[trend]} />\n              </svg>\n              {trendLabel}\n            </span>\n          )}\n          {hint && <span className={s.hint()}>{hint}</span>}\n        </p>\n      )}\n      {chart ? <div className={s.chart()}>{chart}</div> : null}\n    </div>\n  );\n}\n\nexport const statGrid = tv({\n  base: \"grid w-full grid-cols-[repeat(auto-fit,minmax(var(--kz-stat-min,11rem),1fr))] overflow-hidden rounded-xl border border-border-default bg-surface-1\",\n  variants: {\n    divided: {\n      true: \"gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5\",\n      false: \"gap-6 p-5\",\n    },\n  },\n  defaultVariants: { divided: true },\n});\n\nexport type StatGridProps = React.ComponentProps<\"div\"> & {\n  /** Hairlines between the stats (default) or space only. */\n  divided?: boolean;\n  /** The narrowest a stat may be before the row wraps, in rem. Default 11. */\n  minWidth?: number;\n};\n\n/** A row of key figures that wraps with the width: a dashboard's head. The stats are its children. */\nexport function StatGrid({ divided, minWidth = 11, className, style, ...props }: StatGridProps) {\n  return <div className={statGrid({ divided, className })} style={{ ...style, [\"--kz-stat-min\" as string]: `${minWidth}rem` }} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,UAAU;AA8Cb,cAKM,YALN;AA5CC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA;AAAA;AAAA,IAGN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,IAAI,EAAE,OAAO,uBAAuB;AAAA,MACpC,MAAM,EAAE,OAAO,sBAAsB;AAAA,MACrC,MAAM,EAAE,OAAO,4BAA4B;AAAA,IAC7C;AAAA,EACF;AACF,CAAC;AAID,IAAM,QAAmC,EAAE,IAAI,sBAAsB,MAAM,uBAAuB,MAAM,wBAAwB;AAiBzH,SAAS,KAAK,EAAE,OAAO,OAAO,MAAM,OAAO,YAAY,OAAO,WAAW,GAAG,MAAM,GAAc;AACrG,QAAM,IAAI,KAAK,EAAE,MAAM,CAAC;AACxB,SACE,qBAAC,SAAI,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D;AAAA,wBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,KAC9B,cAAc,SACd,qBAAC,OAAE,WAAW,EAAE,KAAK,GAClB;AAAA,eAAS,cACR,qBAAC,UAAK,WAAW,EAAE,MAAM,GACvB;AAAA,4BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAG,MAAM,KAAK,GAAG,GACzB;AAAA,QACC;AAAA,SACH;AAAA,MAED,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,OAC5C;AAAA,IAED,QAAQ,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM,IAAS;AAAA,KACtD;AAEJ;AAEO,IAAM,WAAW,GAAG;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,KAAK;AACnC,CAAC;AAUM,SAAS,SAAS,EAAE,SAAS,WAAW,IAAI,WAAW,OAAO,GAAG,MAAM,GAAkB;AAC9F,SAAO,oBAAC,SAAI,WAAW,SAAS,EAAE,SAAS,UAAU,CAAC,GAAG,OAAO,EAAE,GAAG,OAAO,CAAC,eAAyB,GAAG,GAAG,QAAQ,MAAM,GAAI,GAAG,OAAO;AAC1I;","names":[]}

package/dist/terminal-replay.js

@@ -1,43 +1,17 @@
 "use client";
+import {
+  CheckGlyph,
+  PauseGlyph,
+  PlayGlyph,
+  RetryGlyph
+} from "./chunk-KDXRYUD3.js";
 import {
   cn
-} from "./chunk-G3ETON2A.js";
+} from "./chunk-2FRWNSRO.js";
 
 // src/terminal-replay/terminal-replay.tsx
 import * as React from "react";
-
-// src/glyphs.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function Glyph({ className = "h-4 w-4", fill, children }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      className,
-      fill: fill ? "currentColor" : "none",
-      stroke: fill ? "none" : "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": true,
-      focusable: "false",
-      children
-    }
-  );
-}
-var PlayGlyph = (p) => /* @__PURE__ */ jsx(Glyph, { ...p, fill: true, children: /* @__PURE__ */ jsx("path", { d: "M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z" }) });
-var PauseGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, fill: true, children: [
-  /* @__PURE__ */ jsx("rect", { x: "6", y: "5", width: "4", height: "14", rx: "1" }),
-  /* @__PURE__ */ jsx("rect", { x: "14", y: "5", width: "4", height: "14", rx: "1" })
-] });
-var CheckGlyph = (p) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
-var RetryGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M4 12a8 8 0 1 0 2.3-5.7L4 8.5" }),
-  /* @__PURE__ */ jsx("path", { d: "M4 4v4.5h4.5" })
-] });
-
-// src/terminal-replay/terminal-replay.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var TONE = {
   muted: "text-fg-secondary",
   accent: "text-fg-accent",
@@ -130,7 +104,7 @@ function TerminalReplay({
   const control = state === "playing" ? { text: pauseLabel, Glyph: PauseGlyph } : state === "done" ? { text: replayLabel, Glyph: RetryGlyph } : { text: playLabel, Glyph: PlayGlyph };
   const commands = steps.map((s) => s.command).join("\n");
   const transcript = steps.map((s) => [`${prompt} ${s.command}`, ...(s.output ?? []).map((o) => line(o).text)].join("\n")).join("\n\n");
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     "figure",
     {
       ref: root,
@@ -140,26 +114,26 @@ function TerminalReplay({
       style: { "--kz-replay-rows": rows, ...style },
       ...props,
       children: [
-        /* @__PURE__ */ jsxs2("figcaption", { className: "flex items-center gap-3 border-b border-border-subtle bg-surface-2 px-3 py-2 text-xs text-fg-secondary", children: [
-          /* @__PURE__ */ jsxs2("span", { "aria-hidden": true, className: "flex shrink-0 gap-1.5", children: [
-            /* @__PURE__ */ jsx2("span", { className: "h-2.5 w-2.5 rounded-full bg-border-strong" }),
-            /* @__PURE__ */ jsx2("span", { className: "h-2.5 w-2.5 rounded-full bg-border-strong" }),
-            /* @__PURE__ */ jsx2("span", { className: "h-2.5 w-2.5 rounded-full bg-border-strong" })
+        /* @__PURE__ */ jsxs("figcaption", { className: "flex items-center gap-3 border-b border-border-subtle bg-surface-2 px-3 py-2 text-xs text-fg-secondary", children: [
+          /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "flex shrink-0 gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-border-strong" }),
+            /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-border-strong" }),
+            /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-border-strong" })
           ] }),
-          /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate font-mono", children: title }),
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-mono", children: title }),
+          /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
               onClick: toggle,
               className: "inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 font-medium text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-ring",
               children: [
-                /* @__PURE__ */ jsx2(control.Glyph, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ jsx(control.Glyph, { className: "h-3.5 w-3.5" }),
                 control.text
               ]
             }
           ),
-          copyLabel && /* @__PURE__ */ jsxs2(
+          copyLabel && /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
@@ -167,13 +141,13 @@ function TerminalReplay({
               "data-copied": copied ? "" : void 0,
               className: "inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 font-medium text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-ring",
               children: [
-                copied ? /* @__PURE__ */ jsx2(CheckGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx2(CopyGlyph, {}),
-                /* @__PURE__ */ jsx2("span", { "aria-live": "polite", children: copied ? copiedLabel ?? copyLabel : copyLabel })
+                copied ? /* @__PURE__ */ jsx(CheckGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(CopyGlyph, {}),
+                /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: copied ? copiedLabel ?? copyLabel : copyLabel })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             ref: screenRef,
@@ -182,36 +156,36 @@ function TerminalReplay({
             tabIndex: 0,
             className: "kz-replay-screen relative overflow-auto bg-surface-0 px-4 py-3 font-mono text-[0.8125rem] leading-relaxed text-fg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
             children: [
-              /* @__PURE__ */ jsxs2("div", { "aria-hidden": true, className: "kz-replay-live", children: [
+              /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "kz-replay-live", children: [
                 steps.slice(0, state === "idle" ? 0 : shown + 1).map((step, i) => {
                   const current = !whole && i === shown;
                   const typed = current ? step.command.slice(0, pos.chars) : step.command;
                   const output = (step.output ?? []).slice(0, current ? pos.lines : void 0);
                   const typing = current && pos.chars < step.command.length;
-                  return /* @__PURE__ */ jsxs2("div", { className: i > 0 ? "mt-3" : void 0, children: [
-                    /* @__PURE__ */ jsxs2("div", { className: "whitespace-pre", children: [
-                      /* @__PURE__ */ jsxs2("span", { className: "text-fg-accent select-none", children: [
+                  return /* @__PURE__ */ jsxs("div", { className: i > 0 ? "mt-3" : void 0, children: [
+                    /* @__PURE__ */ jsxs("div", { className: "whitespace-pre", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "text-fg-accent select-none", children: [
                         prompt,
                         " "
                       ] }),
-                      /* @__PURE__ */ jsx2("span", { className: "font-medium", children: typed }),
-                      typing && /* @__PURE__ */ jsx2("span", { className: "kz-replay-caret" })
+                      /* @__PURE__ */ jsx("span", { className: "font-medium", children: typed }),
+                      typing && /* @__PURE__ */ jsx("span", { className: "kz-replay-caret" })
                     ] }),
                     output.map((entry, j) => {
                       const { text, tone } = line(entry);
-                      return /* @__PURE__ */ jsx2("div", { className: cn("min-h-[1lh] whitespace-pre", tone ? TONE[tone] : "text-fg"), children: text }, j);
+                      return /* @__PURE__ */ jsx("div", { className: cn("min-h-[1lh] whitespace-pre", tone ? TONE[tone] : "text-fg"), children: text }, j);
                     })
                   ] }, i);
                 }),
-                (state === "idle" || whole) && /* @__PURE__ */ jsxs2("div", { className: cn("whitespace-pre", state !== "idle" && "mt-3"), children: [
-                  /* @__PURE__ */ jsxs2("span", { className: "text-fg-accent select-none", children: [
+                (state === "idle" || whole) && /* @__PURE__ */ jsxs("div", { className: cn("whitespace-pre", state !== "idle" && "mt-3"), children: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-fg-accent select-none", children: [
                     prompt,
                     " "
                   ] }),
-                  /* @__PURE__ */ jsx2("span", { className: "kz-replay-caret" })
+                  /* @__PURE__ */ jsx("span", { className: "kz-replay-caret" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx2("pre", { className: "sr-only", children: transcript })
+              /* @__PURE__ */ jsx("pre", { className: "sr-only", children: transcript })
             ]
           }
         )
@@ -220,9 +194,9 @@ function TerminalReplay({
   );
 }
 function CopyGlyph() {
-  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, focusable: "false", children: [
-    /* @__PURE__ */ jsx2("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
-    /* @__PURE__ */ jsx2("path", { d: "M5 15V6a2 2 0 0 1 2-2h8" })
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, focusable: "false", children: [
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 15V6a2 2 0 0 1 2-2h8" })
   ] });
 }
 export {

package/dist/terminal-replay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/terminal-replay/terminal-replay.tsx","../src/glyphs.tsx"],"sourcesContent":["// Client (a timer, an observer). A terminal session played back: each command is typed at the prompt, its output\n// arrives line by line, the screen follows the last line like a real terminal. What a reader sees without the motion\n// is the session itself: the server renders it whole (no JavaScript, reduced motion and assistive technology all get\n// the full transcript), the screen has a fixed height (no layout shift while it plays), the replay starts when it\n// scrolls into view, waits while it is off screen, and pauses or replays on demand (WCAG 2.2.2). A bounded chain of\n// timeouts, never a permanent animation frame.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { CheckGlyph, PauseGlyph, PlayGlyph, RetryGlyph } from \"../glyphs\";\n\n/** The colour of an output line — the tokens' text roles, all AA on the screen: secondary, accent, success, warning, danger. */\nexport type TerminalTone = \"muted\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\n\nexport interface TerminalLine {\n  /** The line as the program printed it (no colour codes). */\n  text: string;\n  /** Its colour, when the program coloured it. */\n  tone?: TerminalTone;\n}\n\nexport interface TerminalStep {\n  /** What is typed at the prompt (`npx orazaka install`). */\n  command: string;\n  /** What it printed, line by line. */\n  output?: readonly (string | TerminalLine)[];\n}\n\nexport type TerminalReplayProps = Omit<React.ComponentProps<\"figure\">, \"children\" | \"title\"> & {\n  /** The session, in order. */\n  steps: readonly TerminalStep[];\n  /** The accessible name of the screen (“Terminal session: install, start, dev”) — passed translated. */\n  label: string;\n  /** The window's title, shown in its bar (`~/projects — zsh`). */\n  title?: React.ReactNode;\n  /**\n   * What the prompt shows before each command.\n   * @default \"$\"\n   */\n  prompt?: string;\n  /** The play button's words (the replay is waiting or paused). */\n  playLabel: string;\n  /** The pause button's words (the replay is running). */\n  pauseLabel: string;\n  /** The replay button's words (the session is shown whole). */\n  replayLabel: string;\n  /** The copy button's words: it copies the commands, one per line. Without it, no copy button. */\n  copyLabel?: string;\n  /** What the copy button says once the commands are copied (announced politely). */\n  copiedLabel?: string;\n  /**\n   * Milliseconds per typed character.\n   * @default 34\n   */\n  typingSpeed?: number;\n  /**\n   * Milliseconds between two output lines.\n   * @default 70\n   */\n  lineDelay?: number;\n  /**\n   * Milliseconds between a command's last line and the next command.\n   * @default 900\n   */\n  stepDelay?: number;\n  /**\n   * The screen's height, in lines; longer sessions scroll.\n   * @default 18\n   */\n  rows?: number;\n  /**\n   * Plays the first time it scrolls into view. `false`: the session rests whole until the reader presses play.\n   * @default true\n   */\n  autoPlay?: boolean;\n};\n\ntype Phase = \"final\" | \"idle\" | \"playing\" | \"paused\" | \"done\";\ninterface Position {\n  step: number;\n  chars: number;\n  lines: number;\n}\n\nconst TONE: Record<TerminalTone, string> = {\n  muted: \"text-fg-secondary\",\n  accent: \"text-fg-accent\",\n  success: \"text-fg-success\",\n  warning: \"text-fg-warning\",\n  danger: \"text-fg-danger\",\n};\n\nconst line = (entry: string | TerminalLine): TerminalLine => (typeof entry === \"string\" ? { text: entry } : entry);\n\n/** The next position of the replay and how long to wait for it; null at the end of the session. */\nfunction advance(steps: readonly TerminalStep[], pos: Position, timing: { typing: number; line: number; step: number }): [Position, number] | null {\n  const current = steps[pos.step];\n  if (!current) return null;\n  const output = current.output ?? [];\n  if (pos.chars < current.command.length) {\n    // A space is a beat longer: the rhythm of someone typing, not of a printer.\n    const pause = current.command[pos.chars] === \" \" ? timing.typing * 2 : timing.typing;\n    return [{ ...pos, chars: pos.chars + 1 }, pause];\n  }\n  if (pos.lines < output.length) return [{ ...pos, lines: pos.lines + 1 }, pos.lines === 0 ? timing.line * 4 : timing.line];\n  if (pos.step < steps.length - 1) return [{ step: pos.step + 1, chars: 0, lines: 0 }, timing.step];\n  return null;\n}\n\n/** A terminal session played back: commands typed at the prompt, their output line by line — or the whole session at rest. */\nexport function TerminalReplay({\n  steps,\n  label,\n  title,\n  prompt = \"$\",\n  playLabel,\n  pauseLabel,\n  replayLabel,\n  copyLabel,\n  copiedLabel,\n  typingSpeed = 34,\n  lineDelay = 70,\n  stepDelay = 900,\n  rows = 18,\n  autoPlay = true,\n  className,\n  style,\n  ...props\n}: TerminalReplayProps) {\n  const root = React.useRef<HTMLElement>(null);\n  const screenRef = React.useRef<HTMLDivElement>(null);\n  // The server renders the session whole; the client takes it over unless the reader asked for less motion.\n  const [phase, setPhase] = React.useState<Phase>(\"final\");\n  const [pos, setPos] = React.useState<Position>({ step: 0, chars: 0, lines: 0 });\n  const [visible, setVisible] = React.useState(false);\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    const el = root.current;\n    if (!el || !autoPlay || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    setPhase(\"idle\");\n    // Starts the first time it is seen; off screen, it waits where it is.\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        const seen = Boolean(entry?.isIntersecting);\n        setVisible(seen);\n        if (seen) setPhase((current) => (current === \"idle\" ? \"playing\" : current));\n      },\n      { threshold: 0.35 },\n    );\n    io.observe(el);\n    return () => io.disconnect();\n  }, [autoPlay]);\n\n  const ended = phase === \"playing\" && !advance(steps, pos, { typing: typingSpeed, line: lineDelay, step: stepDelay });\n  // The end of the session is where the replay stands, not an event: derived, never set from an effect.\n  const state: Phase = ended ? \"done\" : phase;\n\n  React.useEffect(() => {\n    if (phase !== \"playing\" || !visible) return;\n    const next = advance(steps, pos, { typing: typingSpeed, line: lineDelay, step: stepDelay });\n    if (!next) return;\n    const timer = setTimeout(() => setPos(next[0]), next[1]);\n    return () => clearTimeout(timer);\n  }, [phase, visible, pos, steps, typingSpeed, lineDelay, stepDelay]);\n\n  // The screen follows the last line while it plays, like a terminal.\n  React.useEffect(() => {\n    const el = screenRef.current;\n    if (el && state === \"playing\") el.scrollTop = el.scrollHeight;\n  }, [pos, state]);\n\n  React.useEffect(() => {\n    if (!copied) return;\n    const timer = setTimeout(() => setCopied(false), 1800);\n    return () => clearTimeout(timer);\n  }, [copied]);\n\n  const whole = state === \"final\" || state === \"done\";\n  const shown = whole ? steps.length - 1 : pos.step;\n  const toggle = () => {\n    if (state === \"playing\") setPhase(\"paused\");\n    else if (state === \"paused\" || state === \"idle\") setPhase(\"playing\");\n    else {\n      // Played on demand — also under reduced motion: the reader asked for it. Off screen it would wait: it is on screen.\n      setVisible(true);\n      setPos({ step: 0, chars: 0, lines: 0 });\n      setPhase(\"playing\");\n    }\n  };\n  const control =\n    state === \"playing\"\n      ? { text: pauseLabel, Glyph: PauseGlyph }\n      : state === \"done\"\n        ? { text: replayLabel, Glyph: RetryGlyph }\n        : { text: playLabel, Glyph: PlayGlyph };\n  const commands = steps.map((s) => s.command).join(\"\\n\");\n  const transcript = steps.map((s) => [`${prompt} ${s.command}`, ...(s.output ?? []).map((o) => line(o).text)].join(\"\\n\")).join(\"\\n\\n\");\n\n  return (\n    <figure\n      ref={root}\n      data-state={state}\n      data-autoplay={autoPlay ? \"\" : undefined}\n      className={cn(\"kz-replay overflow-hidden rounded-xl border border-border-default bg-surface-1 shadow-md\", className)}\n      style={{ \"--kz-replay-rows\": rows, ...style } as React.CSSProperties}\n      {...props}\n    >\n      <figcaption className=\"flex items-center gap-3 border-b border-border-subtle bg-surface-2 px-3 py-2 text-xs text-fg-secondary\">\n        <span aria-hidden className=\"flex shrink-0 gap-1.5\">\n          <span className=\"h-2.5 w-2.5 rounded-full bg-border-strong\" />\n          <span className=\"h-2.5 w-2.5 rounded-full bg-border-strong\" />\n          <span className=\"h-2.5 w-2.5 rounded-full bg-border-strong\" />\n        </span>\n        <span className=\"min-w-0 flex-1 truncate font-mono\">{title}</span>\n        <button\n          type=\"button\"\n          onClick={toggle}\n          className=\"inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 font-medium text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-ring\"\n        >\n          <control.Glyph className=\"h-3.5 w-3.5\" />\n          {control.text}\n        </button>\n        {copyLabel && (\n          <button\n            type=\"button\"\n            onClick={() => navigator.clipboard?.writeText(commands).then(() => setCopied(true))}\n            data-copied={copied ? \"\" : undefined}\n            className=\"inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 font-medium text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-ring\"\n          >\n            {copied ? <CheckGlyph className=\"h-3.5 w-3.5\" /> : <CopyGlyph />}\n            <span aria-live=\"polite\">{copied ? (copiedLabel ?? copyLabel) : copyLabel}</span>\n          </button>\n        )}\n      </figcaption>\n      <div\n        ref={screenRef}\n        role=\"region\"\n        aria-label={label}\n        tabIndex={0}\n        className=\"kz-replay-screen relative overflow-auto bg-surface-0 px-4 py-3 font-mono text-[0.8125rem] leading-relaxed text-fg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n      >\n        <div aria-hidden className=\"kz-replay-live\">\n          {steps.slice(0, state === \"idle\" ? 0 : shown + 1).map((step, i) => {\n            const current = !whole && i === shown;\n            const typed = current ? step.command.slice(0, pos.chars) : step.command;\n            const output = (step.output ?? []).slice(0, current ? pos.lines : undefined);\n            const typing = current && pos.chars < step.command.length;\n            return (\n              <div key={i} className={i > 0 ? \"mt-3\" : undefined}>\n                <div className=\"whitespace-pre\">\n                  <span className=\"text-fg-accent select-none\">{prompt} </span>\n                  <span className=\"font-medium\">{typed}</span>\n                  {typing && <span className=\"kz-replay-caret\" />}\n                </div>\n                {output.map((entry, j) => {\n                  const { text, tone } = line(entry);\n                  return (\n                    <div key={j} className={cn(\"min-h-[1lh] whitespace-pre\", tone ? TONE[tone] : \"text-fg\")}>\n                      {text}\n                    </div>\n                  );\n                })}\n              </div>\n            );\n          })}\n          {(state === \"idle\" || whole) && (\n            <div className={cn(\"whitespace-pre\", state !== \"idle\" && \"mt-3\")}>\n              <span className=\"text-fg-accent select-none\">{prompt} </span>\n              <span className=\"kz-replay-caret\" />\n            </div>\n          )}\n        </div>\n        <pre className=\"sr-only\">{transcript}</pre>\n      </div>\n    </figure>\n  );\n}\n\n/** Two sheets, one over the other: copy. Drawn here, like the other glyphs of the primitives (decorative). */\nfunction CopyGlyph() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden focusable=\"false\">\n      <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n      <path d=\"M5 15V6a2 2 0 0 1 2-2h8\" />\n    </svg>\n  );\n}\n","// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\nexport const ArrowGlyph = ({ direction = \"right\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" }) => (\n  <Glyph {...p}>\n    <path d={direction === \"left\" ? \"M19 12H5m0 0 6-6m-6 6 6 6\" : \"M5 12h14m0 0-6-6m6 6-6 6\"} />\n  </Glyph>\n);\nexport const ExternalGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 4h6v6M20 4l-9 9\" />\n    <path d=\"M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4\" />\n  </Glyph>\n);\nexport const WarningGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 4 2.5 20h19L12 4Z\" />\n    <path d=\"M12 10v4M12 17.2v.1\" />\n  </Glyph>\n);\nexport const CopyGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n    <path d=\"M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3\" />\n  </Glyph>\n);\n"],"mappings":"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","names":["jsx","jsxs"]}
+{"version":3,"sources":["../src/terminal-replay/terminal-replay.tsx"],"sourcesContent":["// Client (a timer, an observer). A terminal session played back: each command is typed at the prompt, its output\n// arrives line by line, the screen follows the last line like a real terminal. What a reader sees without the motion\n// is the session itself: the server renders it whole (no JavaScript, reduced motion and assistive technology all get\n// the full transcript), the screen has a fixed height (no layout shift while it plays), the replay starts when it\n// scrolls into view, waits while it is off screen, and pauses or replays on demand (WCAG 2.2.2). A bounded chain of\n// timeouts, never a permanent animation frame.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { CheckGlyph, PauseGlyph, PlayGlyph, RetryGlyph } from \"../glyphs\";\n\n/** The colour of an output line — the tokens' text roles, all AA on the screen: secondary, accent, success, warning, danger. */\nexport type TerminalTone = \"muted\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\n\nexport interface TerminalLine {\n  /** The line as the program printed it (no colour codes). */\n  text: string;\n  /** Its colour, when the program coloured it. */\n  tone?: TerminalTone;\n}\n\nexport interface TerminalStep {\n  /** What is typed at the prompt (`npx orazaka install`). */\n  command: string;\n  /** What it printed, line by line. */\n  output?: readonly (string | TerminalLine)[];\n}\n\nexport type TerminalReplayProps = Omit<React.ComponentProps<\"figure\">, \"children\" | \"title\"> & {\n  /** The session, in order. */\n  steps: readonly TerminalStep[];\n  /** The accessible name of the screen (“Terminal session: install, start, dev”) — passed translated. */\n  label: string;\n  /** The window's title, shown in its bar (`~/projects — zsh`). */\n  title?: React.ReactNode;\n  /**\n   * What the prompt shows before each command.\n   * @default \"$\"\n   */\n  prompt?: string;\n  /** The play button's words (the replay is waiting or paused). */\n  playLabel: string;\n  /** The pause button's words (the replay is running). */\n  pauseLabel: string;\n  /** The replay button's words (the session is shown whole). */\n  replayLabel: string;\n  /** The copy button's words: it copies the commands, one per line. Without it, no copy button. */\n  copyLabel?: string;\n  /** What the copy button says once the commands are copied (announced politely). */\n  copiedLabel?: string;\n  /**\n   * Milliseconds per typed character.\n   * @default 34\n   */\n  typingSpeed?: number;\n  /**\n   * Milliseconds between two output lines.\n   * @default 70\n   */\n  lineDelay?: number;\n  /**\n   * Milliseconds between a command's last line and the next command.\n   * @default 900\n   */\n  stepDelay?: number;\n  /**\n   * The screen's height, in lines; longer sessions scroll.\n   * @default 18\n   */\n  rows?: number;\n  /**\n   * Plays the first time it scrolls into view. `false`: the session rests whole until the reader presses play.\n   * @default true\n   */\n  autoPlay?: boolean;\n};\n\ntype Phase = \"final\" | \"idle\" | \"playing\" | \"paused\" | \"done\";\ninterface Position {\n  step: number;\n  chars: number;\n  lines: number;\n}\n\nconst TONE: Record<TerminalTone, string> = {\n  muted: \"text-fg-secondary\",\n  accent: \"text-fg-accent\",\n  success: \"text-fg-success\",\n  warning: \"text-fg-warning\",\n  danger: \"text-fg-danger\",\n};\n\nconst line = (entry: string | TerminalLine): TerminalLine => (typeof entry === \"string\" ? { text: entry } : entry);\n\n/** The next position of the replay and how long to wait for it; null at the end of the session. */\nfunction advance(steps: readonly TerminalStep[], pos: Position, timing: { typing: number; line: number; step: number }): [Position, number] | null {\n  const current = steps[pos.step];\n  if (!current) return null;\n  const output = current.output ?? [];\n  if (pos.chars < current.command.length) {\n    // A space is a beat longer: the rhythm of someone typing, not of a printer.\n    const pause = current.command[pos.chars] === \" \" ? timing.typing * 2 : timing.typing;\n    return [{ ...pos, chars: pos.chars + 1 }, pause];\n  }\n  if (pos.lines < output.length) return [{ ...pos, lines: pos.lines + 1 }, pos.lines === 0 ? timing.line * 4 : timing.line];\n  if (pos.step < steps.length - 1) return [{ step: pos.step + 1, chars: 0, lines: 0 }, timing.step];\n  return null;\n}\n\n/** A terminal session played back: commands typed at the prompt, their output line by line — or the whole session at rest. */\nexport function TerminalReplay({\n  steps,\n  label,\n  title,\n  prompt = \"$\",\n  playLabel,\n  pauseLabel,\n  replayLabel,\n  copyLabel,\n  copiedLabel,\n  typingSpeed = 34,\n  lineDelay = 70,\n  stepDelay = 900,\n  rows = 18,\n  autoPlay = true,\n  className,\n  style,\n  ...props\n}: TerminalReplayProps) {\n  const root = React.useRef<HTMLElement>(null);\n  const screenRef = React.useRef<HTMLDivElement>(null);\n  // The server renders the session whole; the client takes it over unless the reader asked for less motion.\n  const [phase, setPhase] = React.useState<Phase>(\"final\");\n  const [pos, setPos] = React.useState<Position>({ step: 0, chars: 0, lines: 0 });\n  const [visible, setVisible] = React.useState(false);\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    const el = root.current;\n    if (!el || !autoPlay || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    setPhase(\"idle\");\n    // Starts the first time it is seen; off screen, it waits where it is.\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        const seen = Boolean(entry?.isIntersecting);\n        setVisible(seen);\n        if (seen) setPhase((current) => (current === \"idle\" ? \"playing\" : current));\n      },\n      { threshold: 0.35 },\n    );\n    io.observe(el);\n    return () => io.disconnect();\n  }, [autoPlay]);\n\n  const ended = phase === \"playing\" && !advance(steps, pos, { typing: typingSpeed, line: lineDelay, step: stepDelay });\n  // The end of the session is where the replay stands, not an event: derived, never set from an effect.\n  const state: Phase = ended ? \"done\" : phase;\n\n  React.useEffect(() => {\n    if (phase !== \"playing\" || !visible) return;\n    const next = advance(steps, pos, { typing: typingSpeed, line: lineDelay, step: stepDelay });\n    if (!next) return;\n    const timer = setTimeout(() => setPos(next[0]), next[1]);\n    return () => clearTimeout(timer);\n  }, [phase, visible, pos, steps, typingSpeed, lineDelay, stepDelay]);\n\n  // The screen follows the last line while it plays, like a terminal.\n  React.useEffect(() => {\n    const el = screenRef.current;\n    if (el && state === \"playing\") el.scrollTop = el.scrollHeight;\n  }, [pos, state]);\n\n  React.useEffect(() => {\n    if (!copied) return;\n    const timer = setTimeout(() => setCopied(false), 1800);\n    return () => clearTimeout(timer);\n  }, [copied]);\n\n  const whole = state === \"final\" || state === \"done\";\n  const shown = whole ? steps.length - 1 : pos.step;\n  const toggle = () => {\n    if (state === \"playing\") setPhase(\"paused\");\n    else if (state === \"paused\" || state === \"idle\") setPhase(\"playing\");\n    else {\n      // Played on demand — also under reduced motion: the reader asked for it. Off screen it would wait: it is on screen.\n      setVisible(true);\n      setPos({ step: 0, chars: 0, lines: 0 });\n      setPhase(\"playing\");\n    }\n  };\n  const control =\n    state === \"playing\"\n      ? { text: pauseLabel, Glyph: PauseGlyph }\n      : state === \"done\"\n        ? { text: replayLabel, Glyph: RetryGlyph }\n        : { text: playLabel, Glyph: PlayGlyph };\n  const commands = steps.map((s) => s.command).join(\"\\n\");\n  const transcript = steps.map((s) => [`${prompt} ${s.command}`, ...(s.output ?? []).map((o) => line(o).text)].join(\"\\n\")).join(\"\\n\\n\");\n\n  return (\n    <figure\n      ref={root}\n      data-state={state}\n      data-autoplay={autoPlay ? \"\" : undefined}\n      className={cn(\"kz-replay overflow-hidden rounded-xl border border-border-default bg-surface-1 shadow-md\", className)}\n      style={{ \"--kz-replay-rows\": rows, ...style } as React.CSSProperties}\n      {...props}\n    >\n      <figcaption className=\"flex items-center gap-3 border-b border-border-subtle bg-surface-2 px-3 py-2 text-xs text-fg-secondary\">\n        <span aria-hidden className=\"flex shrink-0 gap-1.5\">\n          <span className=\"h-2.5 w-2.5 rounded-full bg-border-strong\" />\n          <span className=\"h-2.5 w-2.5 rounded-full bg-border-strong\" />\n          <span className=\"h-2.5 w-2.5 rounded-full bg-border-strong\" />\n        </span>\n        <span className=\"min-w-0 flex-1 truncate font-mono\">{title}</span>\n        <button\n          type=\"button\"\n          onClick={toggle}\n          className=\"inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 font-medium text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-ring\"\n        >\n          <control.Glyph className=\"h-3.5 w-3.5\" />\n          {control.text}\n        </button>\n        {copyLabel && (\n          <button\n            type=\"button\"\n            onClick={() => navigator.clipboard?.writeText(commands).then(() => setCopied(true))}\n            data-copied={copied ? \"\" : undefined}\n            className=\"inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 font-medium text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-ring\"\n          >\n            {copied ? <CheckGlyph className=\"h-3.5 w-3.5\" /> : <CopyGlyph />}\n            <span aria-live=\"polite\">{copied ? (copiedLabel ?? copyLabel) : copyLabel}</span>\n          </button>\n        )}\n      </figcaption>\n      <div\n        ref={screenRef}\n        role=\"region\"\n        aria-label={label}\n        tabIndex={0}\n        className=\"kz-replay-screen relative overflow-auto bg-surface-0 px-4 py-3 font-mono text-[0.8125rem] leading-relaxed text-fg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n      >\n        <div aria-hidden className=\"kz-replay-live\">\n          {steps.slice(0, state === \"idle\" ? 0 : shown + 1).map((step, i) => {\n            const current = !whole && i === shown;\n            const typed = current ? step.command.slice(0, pos.chars) : step.command;\n            const output = (step.output ?? []).slice(0, current ? pos.lines : undefined);\n            const typing = current && pos.chars < step.command.length;\n            return (\n              <div key={i} className={i > 0 ? \"mt-3\" : undefined}>\n                <div className=\"whitespace-pre\">\n                  <span className=\"text-fg-accent select-none\">{prompt} </span>\n                  <span className=\"font-medium\">{typed}</span>\n                  {typing && <span className=\"kz-replay-caret\" />}\n                </div>\n                {output.map((entry, j) => {\n                  const { text, tone } = line(entry);\n                  return (\n                    <div key={j} className={cn(\"min-h-[1lh] whitespace-pre\", tone ? TONE[tone] : \"text-fg\")}>\n                      {text}\n                    </div>\n                  );\n                })}\n              </div>\n            );\n          })}\n          {(state === \"idle\" || whole) && (\n            <div className={cn(\"whitespace-pre\", state !== \"idle\" && \"mt-3\")}>\n              <span className=\"text-fg-accent select-none\">{prompt} </span>\n              <span className=\"kz-replay-caret\" />\n            </div>\n          )}\n        </div>\n        <pre className=\"sr-only\">{transcript}</pre>\n      </div>\n    </figure>\n  );\n}\n\n/** Two sheets, one over the other: copy. Drawn here, like the other glyphs of the primitives (decorative). */\nfunction CopyGlyph() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden focusable=\"false\">\n      <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n      <path d=\"M5 15V6a2 2 0 0 1 2-2h8\" />\n    </svg>\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-G3ETON2A.js";
+} from "./chunk-2FRWNSRO.js";
 
 // src/toast/toast.tsx
 import { toast, Toaster as Sonner } from "sonner";

package/dist/tooltip.js

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

package/dist/tree-view.d.ts

@@ -0,0 +1,111 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const treeView: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            toggle?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            toggle?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    group: string;
+    row: string;
+    toggle: string;
+    icon: string;
+    label: string;
+    meta: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            toggle?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    group: string;
+    row: string;
+    toggle: string;
+    icon: string;
+    label: string;
+    meta: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    group: string;
+    row: string;
+    toggle: string;
+    icon: string;
+    label: string;
+    meta: string;
+}>>;
+type TreeNode = {
+    /** A stable id. */
+    id: string;
+    /** Its name — passed translated. */
+    label: string;
+    /** A decorative icon before the name. */
+    icon?: React.ReactNode;
+    /** A detail after the name (a count, a size). */
+    meta?: React.ReactNode;
+    /** Its children; `undefined` for a leaf. With `hasChildren`, they load when it opens (`onLoadChildren`). */
+    children?: readonly TreeNode[];
+    /** A branch whose children are not loaded yet. */
+    hasChildren?: boolean;
+    /** Cannot be selected. */
+    disabled?: boolean;
+};
+type TreeViewProps = {
+    /** The roots. */
+    nodes: readonly TreeNode[];
+    /** The tree's accessible name (“Documentation”). */
+    "aria-label": string;
+    /** The ids of the open branches (controlled). */
+    expanded?: readonly string[];
+    /** The ids open at first, uncontrolled. */
+    defaultExpanded?: readonly string[];
+    /** Called with the open branches. */
+    onExpandedChange?: (expanded: string[]) => void;
+    /** The selected node (controlled). */
+    selected?: string | null;
+    /** The selected node at first, uncontrolled. */
+    defaultSelected?: string | null;
+    /** Called when a node is chosen (click, Enter or Space): navigate, open the file. */
+    onSelect?: (node: TreeNode) => void;
+    /** Called when a branch with `hasChildren` and no `children` opens: fetch them, then pass them in `nodes`. */
+    onLoadChildren?: (node: TreeNode) => void;
+    /** The words of a branch that is loading (“Loading”). */
+    loadingLabel?: string;
+    /** Classes merged on the tree. */
+    className?: string;
+};
+/**
+ * A hierarchy to browse — documentation sections, a studio's datasets, folders: one tab stop, the arrows walk it (→
+ * opens, ← closes or goes up), Home/End, a letter jumps to the next name; branches can load their children on demand.
+ */
+declare function TreeView({ nodes, "aria-label": label, expanded: expandedProp, defaultExpanded, onExpandedChange, selected: selectedProp, defaultSelected, onSelect, onLoadChildren, loadingLabel, className, }: TreeViewProps): React.JSX.Element;
+
+export { type TreeNode, TreeView, type TreeViewProps, treeView };