@krizaka/ui 2.2.0 → 2.3.0

package/dist/meter.js

@@ -0,0 +1,107 @@
+// src/meter/meter.tsx
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var meter = tv({
+  slots: {
+    root: "flex w-full flex-col gap-1.5",
+    header: "flex items-baseline gap-2 text-xs",
+    caption: "min-w-0 flex-1 truncate font-medium text-fg",
+    figure: "shrink-0 tabular-nums text-fg-secondary",
+    track: "relative flex h-2 w-full gap-0.5 overflow-hidden rounded-full bg-surface-3",
+    fill: "h-full rounded-full transition-[width] duration-700 motion-reduce:transition-none",
+    legend: "mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-fg-secondary",
+    swatch: "inline-block h-2 w-2 shrink-0 rounded-full",
+    ring: "relative inline-flex shrink-0 items-center justify-center",
+    center: "absolute inset-0 flex flex-col items-center justify-center text-center"
+  },
+  variants: {
+    size: { sm: { track: "h-1.5", ring: "h-14 w-14" }, md: { ring: "h-24 w-24" }, lg: { track: "h-3", ring: "h-36 w-36" } }
+  },
+  defaultVariants: { size: "md" }
+});
+var BG = { ok: "bg-accent", success: "bg-success", warning: "bg-warning", danger: "bg-danger" };
+var STROKE = { ok: "stroke-accent", success: "stroke-success", warning: "stroke-warning", danger: "stroke-danger" };
+var PART_BG = ["bg-accent", "bg-fg-secondary", "bg-accent-2", "bg-border-strong"];
+var PART_STROKE = ["stroke-accent", "stroke-fg-secondary", "stroke-accent-2", "stroke-border-strong"];
+function Meter({
+  label,
+  value = 0,
+  min = 0,
+  max = 100,
+  valueText,
+  thresholds,
+  optimum = "low",
+  parts,
+  variant = "bar",
+  size = "md",
+  showLabel,
+  className,
+  children,
+  ...props
+}) {
+  const s = meter({ size });
+  const span = max - min || 1;
+  const ratio = Math.min(1, Math.max(0, (value - min) / span));
+  const level = !thresholds ? "ok" : ratio >= thresholds.high ? optimum === "low" ? "danger" : "success" : ratio >= thresholds.low ? "warning" : optimum === "low" ? "success" : "danger";
+  const words = valueText ?? `${Math.round(ratio * 100)} %`;
+  const shares = (parts ?? []).map((p, i) => ({ ...p, i, ratio: Math.min(1, Math.max(0, p.value / span)), words: p.valueText ?? `${Math.round(p.value / span * 100)} %` }));
+  const a11y = parts ? { role: "group", "aria-label": label } : { role: "meter", "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Math.min(max, Math.max(min, value)), "aria-valuetext": words };
+  const legend = parts && /* @__PURE__ */ jsx("ul", { className: s.legend(), children: shares.map((p) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: [s.swatch(), PART_BG[p.i % PART_BG.length]].join(" ") }),
+    /* @__PURE__ */ jsx("span", { className: "text-fg", children: p.label }),
+    /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: p.words })
+  ] }, p.i)) });
+  if (variant === "ring") {
+    const r = 44;
+    let offset = 0;
+    const arcs = parts ? shares.map((p) => {
+      const arc = { cls: PART_STROKE[p.i % PART_STROKE.length], len: p.ratio * 100, start: offset };
+      offset += arc.len;
+      return arc;
+    }) : [{ cls: STROKE[level], len: ratio * 100, start: 0 }];
+    return /* @__PURE__ */ jsxs("div", { ...a11y, "data-level": parts ? void 0 : level, className: ["inline-flex flex-col items-center gap-2", className].filter(Boolean).join(" "), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: s.ring(), children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r, fill: "none", strokeWidth: "9", className: "stroke-border-default" }),
+          arcs.map((a, i) => /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              r,
+              fill: "none",
+              strokeWidth: "9",
+              pathLength: 100,
+              strokeDasharray: `${Math.max(0, a.len - (parts ? 1 : 0))} ${100 - Math.max(0, a.len - (parts ? 1 : 0))}`,
+              strokeDashoffset: -a.start,
+              className: [a.cls, "transition-[stroke-dasharray] duration-700 motion-reduce:transition-none"].join(" ")
+            },
+            i
+          ))
+        ] }),
+        children !== void 0 && /* @__PURE__ */ jsx("div", { className: s.center(), children })
+      ] }),
+      legend
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ...a11y, "data-level": parts ? void 0 : level, className: s.root({ className }), ...props, children: [
+    showLabel && /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: s.header(), children: [
+      /* @__PURE__ */ jsx("span", { className: s.caption(), children: label }),
+      !parts && /* @__PURE__ */ jsx("span", { className: s.figure(), children: words })
+    ] }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.track(), children: parts ? shares.map((p) => /* @__PURE__ */ jsx("span", { className: [s.fill(), PART_BG[p.i % PART_BG.length]].join(" "), style: { width: `${p.ratio * 100}%` } }, p.i)) : /* @__PURE__ */ jsx("span", { className: [s.fill(), BG[level]].join(" "), style: { width: `${ratio * 100}%` } }) }),
+    legend
+  ] });
+}
+function MeterValue({ value, caption }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "font-display text-lg font-semibold text-fg tabular-nums", children: value }),
+    caption && /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide text-fg-secondary", children: caption })
+  ] });
+}
+export {
+  Meter,
+  MeterValue,
+  meter
+};
+//# sourceMappingURL=meter.js.map

package/dist/meter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/meter/meter.tsx"],"sourcesContent":["// Server-safe. A measure within a known range — a quota, a balance, a share — as opposed to the progress of a task.\n// `role=\"meter\"`, its value in words; thresholds turn it to warning then danger (or the reverse when high is good);\n// split into parts (90 % to the creator, 10 % to the platform) it becomes a stacked bar or ring with its legend: the\n// text version of what it draws.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const meter = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-1.5\",\n    header: \"flex items-baseline gap-2 text-xs\",\n    caption: \"min-w-0 flex-1 truncate font-medium text-fg\",\n    figure: \"shrink-0 tabular-nums text-fg-secondary\",\n    track: \"relative flex h-2 w-full gap-0.5 overflow-hidden rounded-full bg-surface-3\",\n    fill: \"h-full rounded-full transition-[width] duration-700 motion-reduce:transition-none\",\n    legend: \"mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-fg-secondary\",\n    swatch: \"inline-block h-2 w-2 shrink-0 rounded-full\",\n    ring: \"relative inline-flex shrink-0 items-center justify-center\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n  },\n  variants: {\n    size: { sm: { track: \"h-1.5\", ring: \"h-14 w-14\" }, md: { ring: \"h-24 w-24\" }, lg: { track: \"h-3\", ring: \"h-36 w-36\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\n/** The colour of a fill: by tone (thresholds) or by part (the accent, a neutral, accent-2, a lighter neutral). */\nconst BG = { ok: \"bg-accent\", success: \"bg-success\", warning: \"bg-warning\", danger: \"bg-danger\" } as const;\nconst STROKE = { ok: \"stroke-accent\", success: \"stroke-success\", warning: \"stroke-warning\", danger: \"stroke-danger\" } as const;\nconst PART_BG = [\"bg-accent\", \"bg-fg-secondary\", \"bg-accent-2\", \"bg-border-strong\"];\nconst PART_STROKE = [\"stroke-accent\", \"stroke-fg-secondary\", \"stroke-accent-2\", \"stroke-border-strong\"];\n\nexport interface MeterPart {\n  /** Its name (“To the creator”) — passed translated. */\n  label: string;\n  /** Its value, in the meter's unit. */\n  value: number;\n  /** Its value in words (“€9.00”), in the legend and for assistive technology; default: its percentage. */\n  valueText?: string;\n}\n\nexport type MeterProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** The accessible name (“Storage”, “Split of a tip”) — passed translated; shown with `showLabel`. */\n  label: string;\n  /** The value, between `min` and `max` (ignored with `parts`). */\n  value?: number;\n  /**\n   * The bottom of the range.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * The top of the range.\n   * @default 100\n   */\n  max?: number;\n  /** The value in words (“42 GB of 50 GB”) — passed translated; default: the percentage. */\n  valueText?: string;\n  /**\n   * Ratios (0–1) where the tone changes: past `high` it is in danger, past `low` in warning — or the reverse with\n   * `optimum=\"high\"` (a balance: the lower, the worse). Without thresholds the fill is the brand accent.\n   */\n  thresholds?: { readonly low: number; readonly high: number };\n  /**\n   * Which end is good.\n   * @default \"low\"\n   */\n  optimum?: \"low\" | \"high\";\n  /** Split into parts that add up to `max`: a stacked bar or ring, with its legend. */\n  parts?: readonly MeterPart[];\n  /**\n   * bar · ring.\n   * @default \"bar\"\n   */\n  variant?: \"bar\" | \"ring\";\n  /**\n   * sm · md · lg: the bar's thickness, the ring's diameter.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Shows the label and the value above the bar. */\n  showLabel?: boolean;\n  /** A ring's centre: the value, a word. */\n  children?: React.ReactNode;\n};\n\n/** A measure within a range — a quota, a balance, a share — toned by thresholds or split into parts. */\nexport function Meter({\n  label,\n  value = 0,\n  min = 0,\n  max = 100,\n  valueText,\n  thresholds,\n  optimum = \"low\",\n  parts,\n  variant = \"bar\",\n  size = \"md\",\n  showLabel,\n  className,\n  children,\n  ...props\n}: MeterProps) {\n  const s = meter({ size });\n  const span = max - min || 1;\n  const ratio = Math.min(1, Math.max(0, (value - min) / span));\n  const level = !thresholds ? \"ok\" : ratio >= thresholds.high ? (optimum === \"low\" ? \"danger\" : \"success\") : ratio >= thresholds.low ? \"warning\" : optimum === \"low\" ? \"success\" : \"danger\";\n  const words = valueText ?? `${Math.round(ratio * 100)} %`;\n  const shares = (parts ?? []).map((p, i) => ({ ...p, i, ratio: Math.min(1, Math.max(0, p.value / span)), words: p.valueText ?? `${Math.round((p.value / span) * 100)} %` }));\n  const a11y = parts\n    ? { role: \"group\" as const, \"aria-label\": label }\n    : { role: \"meter\" as const, \"aria-label\": label, \"aria-valuemin\": min, \"aria-valuemax\": max, \"aria-valuenow\": Math.min(max, Math.max(min, value)), \"aria-valuetext\": words };\n  const legend = parts && (\n    <ul className={s.legend()}>\n      {shares.map((p) => (\n        <li key={p.i} className=\"flex items-center gap-1.5\">\n          <span aria-hidden className={[s.swatch(), PART_BG[p.i % PART_BG.length]].join(\" \")} />\n          <span className=\"text-fg\">{p.label}</span>\n          <span className=\"tabular-nums\">{p.words}</span>\n        </li>\n      ))}\n    </ul>\n  );\n\n  if (variant === \"ring\") {\n    const r = 44;\n    let offset = 0;\n    const arcs = parts\n      ? shares.map((p) => {\n          const arc = { cls: PART_STROKE[p.i % PART_STROKE.length]!, len: p.ratio * 100, start: offset };\n          offset += arc.len;\n          return arc;\n        })\n      : [{ cls: STROKE[level], len: ratio * 100, start: 0 }];\n    return (\n      <div {...a11y} data-level={parts ? undefined : level} className={[\"inline-flex flex-col items-center gap-2\", className].filter(Boolean).join(\" \")} {...props}>\n        <div className={s.ring()}>\n          <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n            <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth=\"9\" className=\"stroke-border-default\" />\n            {arcs.map((a, i) => (\n              <circle\n                key={i}\n                cx=\"50\"\n                cy=\"50\"\n                r={r}\n                fill=\"none\"\n                strokeWidth=\"9\"\n                pathLength={100}\n                strokeDasharray={`${Math.max(0, a.len - (parts ? 1 : 0))} ${100 - Math.max(0, a.len - (parts ? 1 : 0))}`}\n                strokeDashoffset={-a.start}\n                className={[a.cls, \"transition-[stroke-dasharray] duration-700 motion-reduce:transition-none\"].join(\" \")}\n              />\n            ))}\n          </svg>\n          {children !== undefined && <div className={s.center()}>{children}</div>}\n        </div>\n        {legend}\n      </div>\n    );\n  }\n\n  return (\n    <div {...a11y} data-level={parts ? undefined : level} className={s.root({ className })} {...props}>\n      {showLabel && (\n        <div aria-hidden className={s.header()}>\n          <span className={s.caption()}>{label}</span>\n          {!parts && <span className={s.figure()}>{words}</span>}\n        </div>\n      )}\n      <div aria-hidden className={s.track()}>\n        {parts ? (\n          shares.map((p) => <span key={p.i} className={[s.fill(), PART_BG[p.i % PART_BG.length]].join(\" \")} style={{ width: `${p.ratio * 100}%` }} />)\n        ) : (\n          <span className={[s.fill(), BG[level]].join(\" \")} style={{ width: `${ratio * 100}%` }} />\n        )}\n      </div>\n      {legend}\n    </div>\n  );\n}\n\nexport interface MeterValueProps {\n  /** The figure. */\n  value: React.ReactNode;\n  /** A word under it. */\n  caption?: React.ReactNode;\n}\n\n/** For the ring's centre when it shows a figure and a word. */\nexport function MeterValue({ value, caption }: MeterValueProps) {\n  return (\n    <>\n      <span className=\"font-display text-lg font-semibold text-fg tabular-nums\">{value}</span>\n      {caption && <span className=\"text-[10px] uppercase tracking-wide text-fg-secondary\">{caption}</span>}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/motion.css

@@ -41,17 +41,31 @@
   from { opacity: 0; transform: translateY(70%); filter: blur(6px); }
 }
 
-/* RotatingWord: the alternatives share one grid cell, the current one rolls in. */
+/* RotatingWord: every alternative shares one grid cell from the first paint (the line keeps the width of the longest
+   word: no layout shift); the current one is visible and rolls in each time it becomes current. */
 .kz-rotating {
   display: inline-grid;
   overflow: hidden;
   padding-bottom: 0.08em;
   vertical-align: bottom;
 }
-.kz-rotating > .kz-word {
+.kz-rotating > * {
   grid-area: 1 / 1;
   white-space: nowrap;
 }
+.kz-rotating > [data-active="false"] {
+  visibility: hidden;
+}
+.kz-rotating > [data-active="true"] {
+  animation: kz-word-in 0.6s var(--kz-ease) both;
+}
+
+/* A softer reveal for schemas and dense content: shorter travel, no blur. */
+[data-reveal="soft"] {
+  transform: translateY(12px);
+  filter: none;
+  transition-duration: 0.6s;
+}
 
 /* Sheen across a primary action on hover. */
 .kz-sheen {
@@ -140,6 +154,15 @@
 @keyframes kz-dialog-in {
   from { opacity: 0; transform: translateY(32px); }
 }
+/* Side panels and drawers slide in from their edge. */
+.kz-dialog[data-placement="right"] { animation-name: kz-drawer-right; }
+.kz-dialog[data-placement="left"] { animation-name: kz-drawer-left; }
+@keyframes kz-drawer-right {
+  from { opacity: 0.4; transform: translateX(48px); }
+}
+@keyframes kz-drawer-left {
+  from { opacity: 0.4; transform: translateX(-48px); }
+}
 @media (min-width: 640px) {
   @keyframes kz-dialog-in {
     from { opacity: 0; transform: translateY(12px) scale(0.97); }
@@ -147,6 +170,14 @@
 }
 /* An indeterminate progress bar: a segment that crosses the track (Progress, variant bar). */
 .kz-progress[data-state="indeterminate"] { animation: kz-progress-slide 1.4s var(--kz-ease) infinite; }
+/* A segmented bar (Progress `segments`): the steps are cut out of the bar, whatever the surface behind it. */
+.kz-progress-segmented {
+  mask-image: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--kz-segments, 1) - 3px), transparent 0 calc(100% / var(--kz-segments, 1)));
+}
+/* A paused fill: diagonal stripes at rest. */
+.kz-progress-paused {
+  background-image: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--kz-accent) 85%, transparent) 0 6px, color-mix(in oklab, var(--kz-accent) 45%, transparent) 6px 12px);
+}
 @keyframes kz-progress-slide {
   from { transform: translateX(-100%); }
   to { transform: translateX(250%); }
@@ -205,9 +236,369 @@
   opacity: 0.5;
 }
 
+/* ─── The conductor's states (MotionObserver) ───
+   - `[data-offscreen]` on a scope (`.kz-backdrop`, `.kz-iso`, `[data-motion-scope]`, a page's sections) while it is out
+     of view: every animation inside waits for it to come back — only what can be seen moves.
+   - `html[data-motion="settling"]` from the observer's mount until the page has loaded and settled (≈ 1.2 s after
+     `load`): the loops (`.kz-loop`, the backdrop's drift) hold their first frame, so nothing repaints the first screen
+     while it paints (LCP). Without the observer neither state is ever set: everything simply runs. */
+[data-offscreen] :is(*, *::before, *::after):not(.kz-backdrop-media) {
+  animation-play-state: paused !important;
+}
+html[data-motion="settling"] :is(.kz-loop, .kz-backdrop-drift, .kz-loop::before, .kz-loop::after) {
+  animation-play-state: paused !important;
+}
+
+/* The node of a signature icon (@krizaka/icons, `[data-node]`) lights up when the control that holds it is hovered or
+   focused; arrows lean toward where they lead. */
+svg[data-kz-icon] [data-node] {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform 320ms var(--kz-ease), filter 320ms var(--kz-ease);
+}
+:is(a, button, [data-kz-lights]):is(:hover, :focus-visible) svg[data-kz-icon] [data-node] {
+  transform: scale(1.5);
+  filter: drop-shadow(0 0 3px var(--kz-accent, #196df5));
+}
+svg[data-kz-icon="ForwardIcon"],
+svg[data-kz-icon="ExternalIcon"] {
+  transition: transform 220ms var(--kz-ease);
+}
+:is(a, button):is(:hover, :focus-visible) svg[data-kz-icon="ForwardIcon"] {
+  transform: translateX(3px);
+}
+:is(a, button):is(:hover, :focus-visible) svg[data-kz-icon="ExternalIcon"] {
+  transform: translate(2px, -2px);
+}
+
+/* Magnetic (`data-kz-magnetic`, driven by MotionObserver): the element leans a few pixels toward a fine pointer. */
+[data-kz-magnetic] {
+  translate: var(--kz-mag-x, 0) var(--kz-mag-y, 0);
+  transition: translate 420ms var(--kz-ease);
+}
+
+/* A figure that climbs (NumberTicker): an invisible copy of the final value shares the grid cell and holds the width. */
+.kz-count {
+  display: inline-grid;
+  font-variant-numeric: tabular-nums;
+}
+.kz-count > * {
+  grid-area: 1 / 1;
+}
+.kz-count[data-align="end"] {
+  justify-items: end;
+}
+.kz-count-ghost {
+  visibility: hidden;
+}
+/* Inside gradient text every box carries the gradient itself: an inline-grid is not clipped with its parent's text. */
+.kz-count,
+.kz-count > *,
+.kz-count-roll,
+.kz-count-digit {
+  background: inherit;
+  -webkit-background-clip: inherit;
+  background-clip: inherit;
+}
+/* Rolling digits (NumberTicker on change): each digit is a column 0–9 that slides to its value. */
+.kz-count-roll {
+  display: inline-flex;
+  user-select: none;
+}
+.kz-count-digit {
+  display: inline-block;
+  height: 1lh;
+  overflow: hidden;
+}
+.kz-count-digit > span {
+  display: flex;
+  flex-direction: column;
+  transform: translateY(calc(var(--kz-digit, 0) * -10%));
+  transition: transform 0.9s var(--kz-ease);
+}
+.kz-count-digit > span > span {
+  height: 1lh;
+}
+.kz-count[data-trend="up"] .kz-count-roll {
+  animation: kz-count-flash-up 1.2s var(--kz-ease);
+}
+.kz-count[data-trend="down"] .kz-count-roll {
+  animation: kz-count-flash-down 1.2s var(--kz-ease);
+}
+@keyframes kz-count-flash-up {
+  from { color: var(--kz-success-text, currentColor); }
+}
+@keyframes kz-count-flash-down {
+  from { color: var(--kz-danger-text, currentColor); }
+}
+
+/* ─── Marquee: a band that slides at a speed, pauses for the reader, and is a still row under reduced motion ─── */
+.kz-band {
+  --kz-band-gap: 2.5rem;
+}
+.kz-band[data-fade] > .kz-band-viewport {
+  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+}
+.kz-band[data-direction="right"] .kz-marquee {
+  animation-direction: reverse;
+}
+.kz-band:is([data-paused], :hover, :focus-within) .kz-marquee {
+  animation-play-state: paused;
+}
+
+/* ─── GlowCard: a bloom that follows the pointer, a ring of the brand gradient that turns ─── */
+@property --kz-glow-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 135deg;
+}
+.kz-glow {
+  --kz-glow-x: 30%;
+  --kz-glow-y: 0%;
+}
+/* The ring: the brand gradient, cut to the border (mask), faint at rest, bright under the pointer or the focus. */
+.kz-glow:is([data-glow="border"], [data-glow="both"])::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  z-index: -1;
+  padding: 1px;
+  border-radius: inherit;
+  background: conic-gradient(from var(--kz-glow-angle), transparent 0deg, var(--kz-accent) 70deg, var(--kz-accent-2, var(--kz-accent)) 140deg, transparent 210deg, transparent 360deg);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+  opacity: 0.35;
+  transition: opacity 0.4s var(--kz-ease);
+  pointer-events: none;
+}
+.kz-glow[data-alive]::before,
+.kz-glow:is(:hover, :focus-within)::before {
+  animation: kz-glow-turn 6s linear infinite;
+}
+.kz-glow:is(:hover, :focus-within)::before {
+  opacity: 1;
+}
+/* The bloom: under the pointer, inside the card. */
+.kz-glow:is([data-glow="spotlight"], [data-glow="both"])::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: radial-gradient(360px circle at var(--kz-glow-x) var(--kz-glow-y), color-mix(in oklab, var(--kz-accent) 16%, transparent), transparent 60%);
+  opacity: 0;
+  transition: opacity 0.4s var(--kz-ease);
+  pointer-events: none;
+}
+.kz-glow:is(:hover, :focus-within)::after {
+  opacity: 1;
+}
+@keyframes kz-glow-turn {
+  to { --kz-glow-angle: 495deg; }
+}
+
+/* ─── Toasts: a hairline at the bottom counts the time left, and pauses with the toast ─── */
+.kz-toast::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 2px;
+  transform-origin: left;
+  background: linear-gradient(90deg, var(--kz-accent), var(--kz-accent-2, var(--kz-accent)));
+  opacity: 0.7;
+  animation: kz-toast-time var(--kz-toast-duration, 4000ms) linear forwards;
+}
+.kz-toast:is([data-expanded="true"], :hover, :focus-within)::after {
+  animation-play-state: paused;
+}
+.kz-toast[data-type="loading"]::after {
+  display: none;
+}
+@keyframes kz-toast-time {
+  to { transform: scaleX(0); }
+}
+
+/* ─── Skeletons: one reflection of the brand light crosses every skeleton of the page at once ─── */
+.kz-skeleton,
+.kz-skeleton-shape :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, small, strong, b, em, time, a, button, img, svg, video, picture, canvas, [data-skeleton]) {
+  background-image: linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--kz-accent) 14%, transparent) 46%, color-mix(in oklab, var(--kz-text-primary) 8%, transparent) 50%, transparent 66%);
+  background-size: 200vw 100%;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  animation: kz-skeleton-sweep 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+@keyframes kz-skeleton-sweep {
+  from { background-position: 100vw 0; }
+  to { background-position: -100vw 0; }
+}
+/* SkeletonShape: the real component's text, media and icons become shapes in place (its layout untouched). */
+.kz-skeleton-shape { pointer-events: none; user-select: none; }
+.kz-skeleton-shape :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, small, strong, b, em, time, a, button, [data-skeleton]) {
+  color: transparent !important;
+}
+/* Text becomes one bar per line, as tall as the letters, as wide as the words. */
+.kz-skeleton-shape :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, small, time) {
+  width: fit-content;
+  max-width: 100%;
+  -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 0.18lh, #000 0.18lh 0.82lh, transparent 0.82lh 1lh);
+  mask-image: repeating-linear-gradient(to bottom, transparent 0 0.18lh, #000 0.18lh 0.82lh, transparent 0.82lh 1lh);
+  background-color: var(--kz-surface-3) !important;
+  border-radius: 3px;
+}
+.kz-skeleton-shape :is(a, button, [data-skeleton]) {
+  background-color: var(--kz-surface-3) !important;
+}
+.kz-skeleton-shape :is(img, svg, video, picture, canvas) {
+  background-color: var(--kz-surface-3);
+  opacity: 1;
+}
+.kz-skeleton-shape :is(img, video, picture, canvas) { object-position: -9999px; }
+.kz-skeleton-shape svg * { visibility: hidden; }
+.kz-skeleton-shape :is(p, li) :is(strong, b, em, a, time) { background: none; }
+
+/* ─── The loader glyph (Spinner, Loader, Button loading) ───
+   A segment of light travels around a hexagon while the node breathes; determinate, the trace grows to its value; done,
+   the trace closes and a check or a cross draws itself. */
+.kz-loader-trace {
+  stroke-dasharray: 24 76;
+  animation: kz-loader-trace 1.4s linear infinite;
+}
+[data-progress] > .kz-loader-trace {
+  animation: none;
+  transition: stroke-dasharray 0.6s var(--kz-ease);
+}
+.kz-loader-node {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: kz-loader-node 1.4s var(--kz-ease) infinite;
+}
+.kz-loader-mark {
+  stroke-dasharray: 20;
+  animation: kz-loader-draw 0.5s var(--kz-ease) 0.12s backwards;
+}
+@keyframes kz-loader-trace { to { stroke-dashoffset: -100; } }
+@keyframes kz-loader-node { 50% { transform: scale(0.62); opacity: 0.55; } }
+@keyframes kz-loader-draw { from { stroke-dashoffset: 20; } }
+/* Once: a ring of the status colour opens around what just succeeded or failed; a failure shakes its head. */
+[data-kz-status="success"] { animation: kz-status-ring 0.9s var(--kz-ease); --kz-status: var(--kz-success); }
+[data-kz-status="error"] { animation: kz-status-ring 0.9s var(--kz-ease), kz-status-shake 0.42s var(--kz-ease); --kz-status: var(--kz-danger); }
+@keyframes kz-status-ring {
+  from { box-shadow: 0 0 0 0 color-mix(in oklab, var(--kz-status, currentColor) 55%, transparent); }
+  to { box-shadow: 0 0 0 10px transparent; }
+}
+@keyframes kz-status-shake {
+  20% { translate: -3px 0; }
+  45% { translate: 3px 0; }
+  70% { translate: -2px 0; }
+}
+
+/* ─── The isometric kit (@krizaka/ui/iso) ───
+   Objects built from the Krizaka vocabulary — hexagons, cut corners, the node — extruded in isometric projection and lit
+   from inside in the brand accent (a `.brand-<id>` ancestor re-points it). Faces read the surfaces, edges the accent
+   text: both themes. Motion: stages that stack once at the entrance, a dome that breathes, light that flows along the
+   links, satellites that float; the pointer lifts an object and shows its label. */
+/* Unlayered CSS beats Tailwind's layers: the kit sets no size, the app's classes do (`w-full max-w-xl`). */
+.kz-iso {
+  overflow: visible;
+}
+/* Light, glass and floor never catch the pointer: the objects under the dome stay reachable. */
+:is(.kz-iso-floor, .kz-iso-rim, .kz-iso-dome, .kz-iso-dome-sheen, .kz-iso-link, .kz-iso-particle, .kz-iso-link-label, .kz-iso-shadow, .kz-iso-tether, .kz-iso-breathe) {
+  pointer-events: none;
+}
+.kz-iso-floor { fill: none; stroke: var(--kz-border-strong); stroke-width: 0.8; }
+.kz-iso-face { stroke: color-mix(in oklab, var(--kz-accent-text) 40%, transparent); stroke-width: 0.8; stroke-linejoin: round; }
+.kz-iso-base .kz-iso-top { fill: var(--kz-surface-3); }
+.kz-iso-base .kz-iso-left { fill: var(--kz-surface-2); }
+.kz-iso-base .kz-iso-right { fill: var(--kz-surface-1); }
+.kz-iso-base .kz-iso-face { stroke: color-mix(in oklab, var(--kz-accent-text) 24%, var(--kz-border-default)); }
+.kz-iso-accent .kz-iso-top { fill: color-mix(in oklab, var(--kz-accent) 72%, var(--kz-surface-3)); }
+.kz-iso-accent .kz-iso-left { fill: color-mix(in oklab, var(--kz-accent) 50%, var(--kz-surface-1)); }
+.kz-iso-accent .kz-iso-right { fill: color-mix(in oklab, var(--kz-accent) 32%, var(--kz-surface-0)); }
+.kz-iso-accent2 .kz-iso-top { fill: color-mix(in oklab, var(--kz-accent-2) 70%, var(--kz-surface-3)); }
+.kz-iso-accent2 .kz-iso-left { fill: color-mix(in oklab, var(--kz-accent) 62%, var(--kz-surface-1)); }
+.kz-iso-accent2 .kz-iso-right { fill: color-mix(in oklab, var(--kz-accent-2) 40%, var(--kz-surface-0)); }
+.kz-iso-glass .kz-iso-face { fill: color-mix(in oklab, var(--kz-accent) 14%, var(--kz-surface-1)); fill-opacity: 0.92; }
+.kz-iso-glass .kz-iso-top { fill: color-mix(in oklab, var(--kz-accent) 10%, var(--kz-surface-2)); }
+.kz-iso-strip { fill: none; stroke: var(--kz-accent-text); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 7; opacity: 0.85; }
+.kz-iso-strip.kz-loop { animation: kz-iso-blink 2.8s steps(2, jump-none) infinite; animation-delay: calc(var(--kz-iso-i, 0) * -0.7s); }
+.kz-iso-glyph { fill: none; stroke: var(--kz-on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
+.kz-iso-base .kz-iso-glyph, .kz-iso-glass .kz-iso-glyph { stroke: var(--kz-text-secondary); }
+.kz-iso-glyph-fill { fill: var(--kz-on-accent); opacity: 0.9; }
+.kz-iso-base .kz-iso-glyph-fill, .kz-iso-glass .kz-iso-glyph-fill { fill: var(--kz-text-secondary); }
+.kz-iso-node { fill: var(--kz-accent-text); }
+.kz-iso-shadow { fill: color-mix(in oklab, var(--kz-accent) 9%, transparent); stroke: color-mix(in oklab, var(--kz-accent-text) 22%, transparent); stroke-width: 0.6; }
+.kz-iso-tether { stroke: color-mix(in oklab, var(--kz-accent-text) 45%, transparent); stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; }
+.kz-iso-glow-stop { stop-color: var(--kz-accent); }
+.kz-iso-rim { fill: color-mix(in oklab, var(--kz-accent) 6%, transparent); stroke: color-mix(in oklab, var(--kz-accent-text) 30%, transparent); stroke-width: 1; }
+.kz-iso-dome { fill: color-mix(in oklab, var(--kz-accent) 5%, transparent); stroke: color-mix(in oklab, var(--kz-accent-text) 34%, transparent); stroke-width: 1.2; }
+.kz-iso-dome-sheen { fill: none; stroke: color-mix(in oklab, var(--kz-accent-text) 55%, transparent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 40 400; }
+.kz-iso-dome-sheen.kz-loop { animation: kz-iso-sheen 9s var(--kz-ease) infinite; }
+.kz-iso-link { fill: none; stroke: var(--kz-accent-text); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 8; opacity: 0.7; }
+.kz-iso-link.kz-loop { animation: kz-iso-flow 2.4s linear infinite; }
+.kz-iso-link[data-direction="in"].kz-loop { animation-direction: reverse; }
+.kz-iso-particle {
+  fill: var(--kz-accent-text);
+  offset-rotate: 0deg;
+  offset-distance: var(--kz-iso-at, 50%);
+}
+.kz-iso-particle.kz-loop {
+  animation: kz-iso-travel var(--kz-iso-dur, 3.6s) cubic-bezier(0.45, 0, 0.55, 1) infinite;
+  animation-delay: var(--kz-iso-delay, 0s);
+}
+.kz-iso-link-label rect { fill: var(--kz-surface-1); stroke: color-mix(in oklab, var(--kz-accent-text) 45%, var(--kz-border-default)); }
+.kz-iso-link-label text, .kz-iso-tip text {
+  fill: var(--kz-text-primary);
+  font: 600 12px/1 var(--kz-font-sans, system-ui), system-ui, sans-serif;
+  letter-spacing: 0.01em;
+}
+.kz-iso-link-label .kz-iso-strong { fill: var(--kz-accent-text); font-weight: 700; }
+.kz-iso-breathe.kz-loop { animation: kz-iso-breathe 5s ease-in-out infinite alternate; }
+.kz-iso-float.kz-loop { animation: kz-iso-float 8s ease-in-out infinite alternate; animation-delay: calc(var(--kz-iso-i, 0) * -2.3s); }
+/* `animated={false}` on a scene: the still frame, as prefers-reduced-motion shows it. */
+.kz-iso[data-animated="false"] :is(.kz-loop, .kz-iso-rise) { animation: none; }
+/* Entrance: each object rises into place once, in order (--kz-iso-i), when its scene first shows. */
+.kz-iso-rise { animation: kz-iso-rise 0.9s var(--kz-ease) backwards; animation-delay: calc(var(--kz-iso-i, 0) * 110ms + 120ms); }
+/* The pointer (or the focus, in an interactive scene) lifts an object and shows its label. */
+.kz-iso-item { outline: none; }
+.kz-iso-item > .kz-iso-lift { transition: translate 0.45s var(--kz-ease), filter 0.45s var(--kz-ease); }
+.kz-iso-tip { opacity: 0; transition: opacity 0.3s var(--kz-ease), translate 0.45s var(--kz-ease); pointer-events: none; }
+.kz-iso-leader { stroke: var(--kz-accent-text); stroke-width: 1; }
+.kz-iso-tip rect { fill: var(--kz-surface-1); stroke: var(--kz-border-strong); }
+@media (hover: hover) {
+  .kz-iso-item:hover > .kz-iso-lift { translate: 0 -8px; filter: drop-shadow(0 10px 14px color-mix(in oklab, var(--kz-accent) 35%, transparent)); }
+  .kz-iso-item:hover > .kz-iso-tip { opacity: 1; translate: 0 -8px; }
+}
+.kz-iso-item:focus-visible > .kz-iso-lift { translate: 0 -8px; filter: drop-shadow(0 0 6px var(--kz-ring, currentColor)); }
+.kz-iso-item:focus-visible > .kz-iso-tip { opacity: 1; translate: 0 -8px; }
+@keyframes kz-iso-rise { from { opacity: 0; transform: translateY(-34px); } }
+@keyframes kz-iso-flow { to { stroke-dashoffset: -40; } }
+@keyframes kz-iso-travel {
+  0% { offset-distance: 0%; opacity: 0; }
+  12% { opacity: 1; }
+  88% { opacity: 1; }
+  100% { offset-distance: 100%; opacity: 0; }
+}
+@keyframes kz-iso-float { from { transform: translateY(0); } to { transform: translateY(-9px); } }
+@keyframes kz-iso-breathe { from { opacity: 0.6; } to { opacity: 1; } }
+@keyframes kz-iso-blink { 50% { opacity: 0.35; } }
+@keyframes kz-iso-sheen { 0% { stroke-dashoffset: 40; } 60%, 100% { stroke-dashoffset: -400; } }
+
 @media (prefers-reduced-motion: reduce) {
-  .kz-page, .kz-word, .kz-gradient-text, .kz-marquee, .kz-backdrop-drift, .kz-overlay, .kz-dialog, .kz-pop, .kz-fade, .kz-progress { animation: none !important; }
+  .kz-page, .kz-word, .kz-gradient-text, .kz-marquee, .kz-backdrop-drift, .kz-overlay, .kz-dialog, .kz-pop, .kz-fade, .kz-progress,
+  .kz-skeleton, .kz-skeleton-shape *, .kz-toast::after, .kz-glow::before,
+  .kz-rotating > *, .kz-loop, .kz-iso-rise, .kz-count-roll, .kz-loader-trace, .kz-loader-node, .kz-loader-mark,
+  [data-kz-status] { animation: none !important; }
+  /* At rest, the trace stands still where a reader expects it: a third of the hexagon from the top. */
+  .kz-loader-trace:not([stroke-dasharray]) { stroke-dashoffset: -8; }
   [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
   .kz-sheen::after { display: none; }
+  /* The band stands still and scrolls by hand; its copy goes. */
+  .kz-band > .kz-band-viewport { overflow-x: auto; scrollbar-width: thin; }
+  .kz-band-copy { display: none !important; }
   .kz-lift, .kz-lift:hover { transform: none; transition: none; }
+  [data-kz-magnetic] { translate: none; }
+  .kz-count-digit > span { transition: none; }
+  /* The still frame is a composed picture, not a cut animation: particles rest along their link, labels show. */
+  .kz-iso-item > .kz-iso-lift, .kz-iso-tip { transition: none; }
 }

package/dist/motion.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+interface MotionObserverProps {
+    /**
+     * Hold the loops of the page (`.kz-loop`, the backdrop's drift) still until the page has loaded and settled
+     * (`html[data-motion="settling"]` → `"ready"`, about 1.2 s after `load`): nothing repaints the first screen while it
+     * paints.
+     * @default true
+     */
+    settle?: boolean;
+    /**
+     * Pause every animation of a scope while it is off screen (`data-offscreen` on `.kz-backdrop`, `.kz-iso`,
+     * `[data-motion-scope]` and the page's sections).
+     * @default true
+     */
+    pauseOffscreen?: boolean;
+}
+/**
+ * The Krizaka motion conductor. Mount it once at the root of the app; it renders nothing and keeps no animation frame
+ * running. It reveals every `[data-reveal]` element once as it enters the viewport (including elements added later:
+ * client navigation needs nothing more), pauses what is off screen, lets the first screen settle before its loops
+ * start, feeds the pointer to `.kz-spotlight` cards (`--spot-x`, `--spot-y`) and to `[data-kz-magnetic]` elements
+ * (`Button magnetic`). Under prefers-reduced-motion everything is revealed at once and nothing follows the pointer.
+ */
+declare function MotionObserver({ settle, pauseOffscreen }?: MotionObserverProps): null;
+
+interface RotatingWordProps {
+    /** The alternatives, passed translated; the first one is what the server renders. */
+    words: readonly string[];
+    /**
+     * Milliseconds each word stays.
+     * @default 2600
+     */
+    interval?: number;
+    /** Classes for every word (a colour, gradient text). */
+    className?: string;
+}
+/**
+ * A word that rolls through alternatives — the Krizaka headline signature. Every word shares one grid cell from the
+ * first paint, so the line keeps the width of the longest one (no layout shift); the current one rolls in. The server
+ * render shows the first word; it stays put under prefers-reduced-motion and while the tab is hidden. Decorative
+ * (`aria-hidden`): give the heading a stable accessible label.
+ */
+declare function RotatingWord({ words, interval, className }: RotatingWordProps): React.JSX.Element;
+
+export { MotionObserver, type MotionObserverProps, RotatingWord, type RotatingWordProps };

package/dist/motion.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  MotionObserver,
+  RotatingWord
+} from "./chunk-HAQWKORZ.js";
+export {
+  MotionObserver,
+  RotatingWord
+};
+//# sourceMappingURL=motion.js.map

package/dist/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}