@krizaka/ui 3.44.0 → 3.46.0

package/dist/meter.js

@@ -1,5 +1,32 @@
 // src/meter/meter.tsx
 import { tv } from "tailwind-variants";
+
+// src/meter/model.ts
+var MeterOptimum = { Low: "low", High: "high" };
+var MeterLevel = { Ok: "ok", Success: "success", Warning: "warning", Danger: "danger" };
+var clamp01 = (n) => Math.min(1, Math.max(0, n));
+var percent = (ratio) => `${Math.round(ratio * 100)} %`;
+function levelOf(ratio, thresholds, optimum) {
+  if (!thresholds) return MeterLevel.Ok;
+  const good = optimum === MeterOptimum.Low ? MeterLevel.Success : MeterLevel.Danger;
+  const bad = optimum === MeterOptimum.Low ? MeterLevel.Danger : MeterLevel.Success;
+  if (ratio >= thresholds.high) return bad;
+  return ratio >= thresholds.low ? MeterLevel.Warning : good;
+}
+function meterModel({ value = 0, min = 0, max = 100, valueText, thresholds, optimum = MeterOptimum.Low, parts }) {
+  const span = max - min || 1;
+  const ratio = clamp01((value - min) / span);
+  const shares = (parts ?? []).map((p, i) => ({ ...p, i, ratio: clamp01(p.value / span), words: p.valueText ?? percent(p.value / span) }));
+  let start = 0;
+  const arcs = parts ? shares.map((p) => {
+    const arc = { part: p.i, len: p.ratio, start };
+    start += p.ratio;
+    return arc;
+  }) : [{ part: void 0, len: ratio, start: 0 }];
+  return { ratio, level: levelOf(ratio, thresholds, optimum), words: valueText ?? percent(ratio), shares, arcs };
+}
+
+// src/meter/meter.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var meter = tv({
   slots: {
@@ -40,11 +67,7 @@ function Meter({
   ...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 { ratio, level, words, shares, arcs } = meterModel({ value, min, max, valueText, thresholds, optimum, parts });
   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(" ") }),
@@ -53,31 +76,28 @@ function Meter({
   ] }, 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
-          ))
+          arcs.map((arc, i) => {
+            const length = Math.max(0, arc.len * 100 - (parts ? 1 : 0));
+            return /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: "50",
+                cy: "50",
+                r,
+                fill: "none",
+                strokeWidth: "9",
+                pathLength: 100,
+                strokeDasharray: `${length} ${100 - length}`,
+                strokeDashoffset: -arc.start * 100,
+                className: [arc.part === void 0 ? STROKE[level] : PART_STROKE[arc.part % PART_STROKE.length], "transition-[stroke-dasharray] duration-700 motion-reduce:transition-none"].join(" ")
+              },
+              i
+            );
+          })
         ] }),
         children !== void 0 && /* @__PURE__ */ jsx("div", { className: s.center(), children })
       ] }),

package/dist/meter.js.map

@@ -1 +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-sm bg-surface-3\",\n    fill: \"h-full rounded-sm 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] text-fg-secondary\">{caption}</span>}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/meter/meter.tsx","../src/meter/model.ts"],"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\nimport { type MeterLevel, meterModel, type MeterPart, type MeterThresholds } from \"./model\";\n\nexport type { MeterPart };\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-sm bg-surface-3\",\n    fill: \"h-full rounded-sm 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: Record<MeterLevel, string> = { ok: \"bg-accent\", success: \"bg-success\", warning: \"bg-warning\", danger: \"bg-danger\" };\nconst STROKE: Record<MeterLevel, string> = { ok: \"stroke-accent\", success: \"stroke-success\", warning: \"stroke-warning\", danger: \"stroke-danger\" };\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 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?: MeterThresholds;\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 { ratio, level, words, shares, arcs } = meterModel({ value, min, max, valueText, thresholds, optimum, parts });\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    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((arc, i) => {\n              const length = Math.max(0, arc.len * 100 - (parts ? 1 : 0));\n              return (\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={`${length} ${100 - length}`}\n                  strokeDashoffset={-arc.start * 100}\n                  className={[arc.part === undefined ? STROKE[level] : PART_STROKE[arc.part % PART_STROKE.length], \"transition-[stroke-dasharray] duration-700 motion-reduce:transition-none\"].join(\" \")}\n                />\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] text-fg-secondary\">{caption}</span>}\n    </>\n  );\n}\n","// Headless: the arithmetic of a Meter, read by the web (`meter.tsx`) and the native (`native/meter.tsx`) alike.\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\n/** Which end of the range is good: `low` (a quota) or `high` (a score, a balance). */\nexport const MeterOptimum = { Low: \"low\", High: \"high\" } as const;\nexport type MeterOptimum = (typeof MeterOptimum)[keyof typeof MeterOptimum];\n\n/** The tone of a fill: the accent without thresholds, otherwise good, warning or bad. */\nexport const MeterLevel = { Ok: \"ok\", Success: \"success\", Warning: \"warning\", Danger: \"danger\" } as const;\nexport type MeterLevel = (typeof MeterLevel)[keyof typeof MeterLevel];\n\nexport interface MeterThresholds {\n  readonly low: number;\n  readonly high: number;\n}\n\nexport interface MeterInput {\n  value?: number;\n  min?: number;\n  max?: number;\n  valueText?: string;\n  thresholds?: MeterThresholds;\n  optimum?: MeterOptimum;\n  parts?: readonly MeterPart[];\n}\n\nexport interface MeterShare extends MeterPart {\n  i: number;\n  /** Its share of the range, 0–1. */\n  ratio: number;\n  /** Its value in words. */\n  words: string;\n}\n\n/** One arc of a ring, as fractions of the circle: the part it draws (none for the whole value), its length, where it starts. */\nexport interface MeterArc {\n  part: number | undefined;\n  len: number;\n  start: number;\n}\n\nexport interface MeterModel {\n  ratio: number;\n  level: MeterLevel;\n  words: string;\n  shares: MeterShare[];\n  arcs: MeterArc[];\n}\n\nconst clamp01 = (n: number) => Math.min(1, Math.max(0, n));\nconst percent = (ratio: number) => `${Math.round(ratio * 100)} %`;\n\nfunction levelOf(ratio: number, thresholds: MeterThresholds | undefined, optimum: MeterOptimum): MeterLevel {\n  if (!thresholds) return MeterLevel.Ok;\n  const good = optimum === MeterOptimum.Low ? MeterLevel.Success : MeterLevel.Danger;\n  const bad = optimum === MeterOptimum.Low ? MeterLevel.Danger : MeterLevel.Success;\n  if (ratio >= thresholds.high) return bad;\n  return ratio >= thresholds.low ? MeterLevel.Warning : good;\n}\n\n/** The ratio, tone, words, parts and ring arcs of a meter. */\nexport function meterModel({ value = 0, min = 0, max = 100, valueText, thresholds, optimum = MeterOptimum.Low, parts }: MeterInput): MeterModel {\n  const span = max - min || 1;\n  const ratio = clamp01((value - min) / span);\n  const shares = (parts ?? []).map((p, i) => ({ ...p, i, ratio: clamp01(p.value / span), words: p.valueText ?? percent(p.value / span) }));\n  let start = 0;\n  const arcs = parts\n    ? shares.map((p) => {\n        const arc = { part: p.i, len: p.ratio, start };\n        start += p.ratio;\n        return arc;\n      })\n    : [{ part: undefined, len: ratio, start: 0 }];\n  return { ratio, level: levelOf(ratio, thresholds, optimum), words: valueText ?? percent(ratio), shares, arcs };\n}\n"],"mappings":";AAKA,SAAS,UAAU;;;ACOZ,IAAM,eAAe,EAAE,KAAK,OAAO,MAAM,OAAO;AAIhD,IAAM,aAAa,EAAE,IAAI,MAAM,SAAS,WAAW,SAAS,WAAW,QAAQ,SAAS;AAyC/F,IAAM,UAAU,CAAC,MAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,CAAC,CAAC;AACzD,IAAM,UAAU,CAAC,UAAkB,GAAG,KAAK,MAAM,QAAQ,GAAG,CAAC;AAE7D,SAAS,QAAQ,OAAe,YAAyC,SAAmC;AAC1G,MAAI,CAAC,WAAY,QAAO,WAAW;AACnC,QAAM,OAAO,YAAY,aAAa,MAAM,WAAW,UAAU,WAAW;AAC5E,QAAM,MAAM,YAAY,aAAa,MAAM,WAAW,SAAS,WAAW;AAC1E,MAAI,SAAS,WAAW,KAAM,QAAO;AACrC,SAAO,SAAS,WAAW,MAAM,WAAW,UAAU;AACxD;AAGO,SAAS,WAAW,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,KAAK,WAAW,YAAY,UAAU,aAAa,KAAK,MAAM,GAA2B;AAC9I,QAAM,OAAO,MAAM,OAAO;AAC1B,QAAM,QAAQ,SAAS,QAAQ,OAAO,IAAI;AAC1C,QAAM,UAAU,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,OAAO,EAAE,GAAG,GAAG,GAAG,OAAO,QAAQ,EAAE,QAAQ,IAAI,GAAG,OAAO,EAAE,aAAa,QAAQ,EAAE,QAAQ,IAAI,EAAE,EAAE;AACvI,MAAI,QAAQ;AACZ,QAAM,OAAO,QACT,OAAO,IAAI,CAAC,MAAM;AAChB,UAAM,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,OAAO,MAAM;AAC7C,aAAS,EAAE;AACX,WAAO;AAAA,EACT,CAAC,IACD,CAAC,EAAE,MAAM,QAAW,KAAK,OAAO,OAAO,EAAE,CAAC;AAC9C,SAAO,EAAE,OAAO,OAAO,QAAQ,OAAO,YAAY,OAAO,GAAG,OAAO,aAAa,QAAQ,KAAK,GAAG,QAAQ,KAAK;AAC/G;;;ADwBQ,SAuEJ,UAtEM,KADF;AA/FD,IAAM,QAAQ,GAAG;AAAA,EACtB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,MAAM,EAAE,IAAI,EAAE,OAAO,SAAS,MAAM,YAAY,GAAG,IAAI,EAAE,MAAM,YAAY,GAAG,IAAI,EAAE,OAAO,OAAO,MAAM,YAAY,EAAE;AAAA,EACxH;AAAA,EACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAGD,IAAM,KAAiC,EAAE,IAAI,aAAa,SAAS,cAAc,SAAS,cAAc,QAAQ,YAAY;AAC5H,IAAM,SAAqC,EAAE,IAAI,iBAAiB,SAAS,kBAAkB,SAAS,kBAAkB,QAAQ,gBAAgB;AAChJ,IAAM,UAAU,CAAC,aAAa,mBAAmB,eAAe,kBAAkB;AAClF,IAAM,cAAc,CAAC,iBAAiB,uBAAuB,mBAAmB,sBAAsB;AAgD/F,SAAS,MAAM;AAAA,EACpB;AAAA,EACA,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,IAAI,MAAM,EAAE,KAAK,CAAC;AACxB,QAAM,EAAE,OAAO,OAAO,OAAO,QAAQ,KAAK,IAAI,WAAW,EAAE,OAAO,KAAK,KAAK,WAAW,YAAY,SAAS,MAAM,CAAC;AACnH,QAAM,OAAO,QACT,EAAE,MAAM,SAAkB,cAAc,MAAM,IAC9C,EAAE,MAAM,SAAkB,cAAc,OAAO,iBAAiB,KAAK,iBAAiB,KAAK,iBAAiB,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC,GAAG,kBAAkB,MAAM;AAC7K,QAAM,SAAS,SACb,oBAAC,QAAG,WAAW,EAAE,OAAO,GACrB,iBAAO,IAAI,CAAC,MACX,qBAAC,QAAa,WAAU,6BACtB;AAAA,wBAAC,UAAK,eAAW,MAAC,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,EAAE,IAAI,QAAQ,MAAM,CAAC,EAAE,KAAK,GAAG,GAAG;AAAA,IACpF,oBAAC,UAAK,WAAU,WAAW,YAAE,OAAM;AAAA,IACnC,oBAAC,UAAK,WAAU,gBAAgB,YAAE,OAAM;AAAA,OAHjC,EAAE,CAIX,CACD,GACH;AAGF,MAAI,YAAY,QAAQ;AACtB,UAAM,IAAI;AACV,WACE,qBAAC,SAAK,GAAG,MAAM,cAAY,QAAQ,SAAY,OAAO,WAAW,CAAC,2CAA2C,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OACrJ;AAAA,2BAAC,SAAI,WAAW,EAAE,KAAK,GACrB;AAAA,6BAAC,SAAI,SAAQ,eAAc,WAAU,4BAA2B,eAAW,MACzE;AAAA,8BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAM,MAAK,QAAO,aAAY,KAAI,WAAU,yBAAwB;AAAA,UAC3F,KAAK,IAAI,CAAC,KAAK,MAAM;AACpB,kBAAM,SAAS,KAAK,IAAI,GAAG,IAAI,MAAM,OAAO,QAAQ,IAAI,EAAE;AAC1D,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH;AAAA,gBACA,MAAK;AAAA,gBACL,aAAY;AAAA,gBACZ,YAAY;AAAA,gBACZ,iBAAiB,GAAG,MAAM,IAAI,MAAM,MAAM;AAAA,gBAC1C,kBAAkB,CAAC,IAAI,QAAQ;AAAA,gBAC/B,WAAW,CAAC,IAAI,SAAS,SAAY,OAAO,KAAK,IAAI,YAAY,IAAI,OAAO,YAAY,MAAM,GAAG,0EAA0E,EAAE,KAAK,GAAG;AAAA;AAAA,cAThL;AAAA,YAUP;AAAA,UAEJ,CAAC;AAAA,WACH;AAAA,QACC,aAAa,UAAa,oBAAC,SAAI,WAAW,EAAE,OAAO,GAAI,UAAS;AAAA,SACnE;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAK,GAAG,MAAM,cAAY,QAAQ,SAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzF;AAAA,iBACC,qBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,OAAO,GACnC;AAAA,0BAAC,UAAK,WAAW,EAAE,QAAQ,GAAI,iBAAM;AAAA,MACpC,CAAC,SAAS,oBAAC,UAAK,WAAW,EAAE,OAAO,GAAI,iBAAM;AAAA,OACjD;AAAA,IAEF,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,MAAM,GACjC,kBACC,OAAO,IAAI,CAAC,MAAM,oBAAC,UAAe,WAAW,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,IAAI,QAAQ,MAAM,CAAC,EAAE,KAAK,GAAG,GAAG,OAAO,EAAE,OAAO,GAAG,EAAE,QAAQ,GAAG,IAAI,KAAzG,EAAE,CAA0G,CAAE,IAE3I,oBAAC,UAAK,WAAW,CAAC,EAAE,KAAK,GAAG,GAAG,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,GAE3F;AAAA,IACC;AAAA,KACH;AAEJ;AAUO,SAAS,WAAW,EAAE,OAAO,QAAQ,GAAoB;AAC9D,SACE,iCACE;AAAA,wBAAC,UAAK,WAAU,2DAA2D,iBAAM;AAAA,IAChF,WAAW,oBAAC,UAAK,WAAU,iCAAiC,mBAAQ;AAAA,KACvE;AAEJ;","names":[]}

package/dist/motion.css

@@ -755,3 +755,16 @@ svg[data-kz-icon="ExternalIcon"] {
 @media (prefers-reduced-motion: reduce) {
   .kz-overlay, .kz-dialog, .kz-popover, .kz-tabs-panel { animation: none; transition: none; }
 }
+
+/* ── PAGE TRANSITIONS ───────────────────────────────────────────────────────────────────────────────────────────────
+   <PageTransition> (@krizaka/ui/motion) gives the page content the view-transition-class .kz-page: the old page leaves
+   quickly, the new one cross-fades in with a short rise. Tokens only. Reduced motion: the page changes at once, and every
+   view transition of the document (shared elements included) loses its animation. */
+::view-transition-old(.kz-page) { animation: kz-page-out var(--kz-motion-duration-fast) var(--kz-motion-ease-in) both; }
+::view-transition-new(.kz-page) { animation: kz-page-in var(--kz-motion-duration-base) var(--kz-motion-ease-out) both; }
+@keyframes kz-page-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes kz-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
+}

package/dist/motion.d.ts

@@ -1,5 +1,18 @@
 export { M as MotionObserver, a as MotionObserverProps, R as RotatingWord, b as RotatingWordProps } from './RotatingWord-D9s7FXFD.js';
-import 'react';
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+/** The `view-transition-class` the page change carries (styled in motion.css, « PAGE TRANSITIONS »). */
+declare const PAGE_TRANSITION_CLASS = "kz-page";
+interface PageTransitionProps {
+    children: ReactNode;
+}
+/**
+ * Wrap the page content (the root layout's `children`) once: a navigation then cross-fades and rises over the
+ * `--kz-motion-*` tokens, through the platform's View Transitions. Where the runtime has no `ViewTransition` it renders
+ * its children untouched; under `prefers-reduced-motion` motion.css makes the change instant. The DOM always updates.
+ */
+declare function PageTransition({ children }: PageTransitionProps): React.JSX.Element;
 
 /**
  * Page transitions on the platform: `document.startViewTransition` with a cross-fade fallback and an instant change
@@ -50,4 +63,4 @@ declare function sharedElementStyle(name: string): {
     viewTransitionName: string;
 };
 
-export { type CrossFadeOptions, type ViewTransitionEnv, type ViewTransitionLike, canViewTransition, crossFallback, runViewTransition, sharedElementStyle, transitionPage };
+export { type CrossFadeOptions, PAGE_TRANSITION_CLASS, PageTransition, type PageTransitionProps, type ViewTransitionEnv, type ViewTransitionLike, canViewTransition, crossFallback, runViewTransition, sharedElementStyle, transitionPage };

package/dist/motion.js

@@ -4,6 +4,21 @@ import {
   RotatingWord
 } from "./chunk-4JO5GSSD.js";
 
+// src/motion/PageTransition.tsx
+import * as React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var PAGE_TRANSITION_CLASS = "kz-page";
+var RUNTIME_KEYS = ["ViewTransition", "unstable_ViewTransition"];
+function runtimeViewTransition() {
+  const runtime = React;
+  return RUNTIME_KEYS.map((key) => runtime[key]).find(Boolean);
+}
+var ViewTransition = runtimeViewTransition();
+function PageTransition({ children }) {
+  if (!ViewTransition) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(ViewTransition, { default: PAGE_TRANSITION_CLASS, children });
+}
+
 // src/motion/view-transition.ts
 var IDENT = /^[A-Za-z_][A-Za-z0-9_-]*$/;
 function canViewTransition(doc) {
@@ -41,6 +56,8 @@ function sharedElementStyle(name) {
 }
 export {
   MotionObserver,
+  PAGE_TRANSITION_CLASS,
+  PageTransition,
   RotatingWord,
   canViewTransition,
   crossFallback,

package/dist/motion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/motion/view-transition.ts"],"sourcesContent":["/**\n * Page transitions on the platform: `document.startViewTransition` with a cross-fade fallback and an instant change\n * under reduced motion. Pure functions over an injected document, so they are testable without a browser.\n *\n * The contract (docs/direction-2027.md): the DOM always updates; motion is only the way it gets there.\n */\n\nexport interface ViewTransitionLike {\n  readonly finished: Promise<void>;\n}\n\nexport type StartViewTransition = (update: () => void) => ViewTransitionLike;\n\nexport interface ViewTransitionEnv {\n  /** The document whose transition runs. Defaults to the global one when the call happens in a browser. */\n  readonly doc?: {\n    startViewTransition?: StartViewTransition;\n    documentElement?: { animate?: (frames: Keyframe[], options: KeyframeAnimationOptions) => unknown };\n  };\n  /** `prefers-reduced-motion: reduce`. */\n  readonly reduced?: boolean;\n}\n\nexport interface CrossFadeOptions {\n  /** Milliseconds of the fallback cross-fade. */\n  readonly duration?: number;\n  readonly easing?: string;\n}\n\nconst IDENT = /^[A-Za-z_][A-Za-z0-9_-]*$/;\n\n/** True when the browser can run a native view transition. */\nexport function canViewTransition(doc: ViewTransitionEnv[\"doc\"]): boolean {\n  return typeof doc?.startViewTransition === \"function\";\n}\n\n/**\n * Runs `update` inside a view transition when the platform has one and motion is allowed; otherwise it runs `update`\n * at once. Resolves when the transition has finished (or straight away when there is none). It never rejects: a\n * skipped or aborted transition still leaves the DOM in its new state.\n */\nexport function runViewTransition(update: () => void, env: ViewTransitionEnv = {}): Promise<void> {\n  if (env.reduced || !canViewTransition(env.doc)) {\n    update();\n    return Promise.resolve();\n  }\n  const transition = env.doc!.startViewTransition!(update);\n  return transition.finished.then(\n    () => undefined,\n    () => undefined,\n  );\n}\n\n/**\n * The fallback for a browser without view transitions: the change is applied, then the root cross-fades from\n * transparent. Reduced motion means no fade at all. Returns the animation when one was started, otherwise `null`.\n */\nexport function crossFallback(update: () => void, env: ViewTransitionEnv = {}, options: CrossFadeOptions = {}): unknown {\n  update();\n  if (env.reduced || canViewTransition(env.doc)) return null;\n  const root = env.doc?.documentElement;\n  if (typeof root?.animate !== \"function\") return null;\n  return root.animate([{ opacity: 0 }, { opacity: 1 }], {\n    duration: options.duration ?? 200,\n    easing: options.easing ?? \"ease-out\",\n  });\n}\n\n/** One call for a change of page or step: a view transition where it exists, a cross-fade otherwise, instant under reduced motion. */\nexport function transitionPage(update: () => void, env: ViewTransitionEnv = {}, options: CrossFadeOptions = {}): Promise<void> {\n  if (canViewTransition(env.doc) && !env.reduced) return runViewTransition(update, env);\n  crossFallback(update, env, options);\n  return Promise.resolve();\n}\n\n/**\n * The `view-transition-name` for a shared element: the element morphs between the two states wherever it lands. The\n * name must be one CSS identifier and unique on the page while the transition runs.\n */\nexport function sharedElementStyle(name: string): { viewTransitionName: string } {\n  if (!IDENT.test(name)) throw new RangeError(`view-transition-name must be one identifier, got \"${name}\"`);\n  return { viewTransitionName: name };\n}\n"],"mappings":";;;;;;;AA6BA,IAAM,QAAQ;AAGP,SAAS,kBAAkB,KAAwC;AACxE,SAAO,OAAO,KAAK,wBAAwB;AAC7C;AAOO,SAAS,kBAAkB,QAAoB,MAAyB,CAAC,GAAkB;AAChG,MAAI,IAAI,WAAW,CAAC,kBAAkB,IAAI,GAAG,GAAG;AAC9C,WAAO;AACP,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACA,QAAM,aAAa,IAAI,IAAK,oBAAqB,MAAM;AACvD,SAAO,WAAW,SAAS;AAAA,IACzB,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAMO,SAAS,cAAc,QAAoB,MAAyB,CAAC,GAAG,UAA4B,CAAC,GAAY;AACtH,SAAO;AACP,MAAI,IAAI,WAAW,kBAAkB,IAAI,GAAG,EAAG,QAAO;AACtD,QAAM,OAAO,IAAI,KAAK;AACtB,MAAI,OAAO,MAAM,YAAY,WAAY,QAAO;AAChD,SAAO,KAAK,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,GAAG;AAAA,IACpD,UAAU,QAAQ,YAAY;AAAA,IAC9B,QAAQ,QAAQ,UAAU;AAAA,EAC5B,CAAC;AACH;AAGO,SAAS,eAAe,QAAoB,MAAyB,CAAC,GAAG,UAA4B,CAAC,GAAkB;AAC7H,MAAI,kBAAkB,IAAI,GAAG,KAAK,CAAC,IAAI,QAAS,QAAO,kBAAkB,QAAQ,GAAG;AACpF,gBAAc,QAAQ,KAAK,OAAO;AAClC,SAAO,QAAQ,QAAQ;AACzB;AAMO,SAAS,mBAAmB,MAA8C;AAC/E,MAAI,CAAC,MAAM,KAAK,IAAI,EAAG,OAAM,IAAI,WAAW,qDAAqD,IAAI,GAAG;AACxG,SAAO,EAAE,oBAAoB,KAAK;AACpC;","names":[]}
+{"version":3,"sources":["../src/motion/PageTransition.tsx","../src/motion/view-transition.ts"],"sourcesContent":["import type { ComponentType, ReactNode } from \"react\";\nimport * as React from \"react\";\n\n/** The `view-transition-class` the page change carries (styled in motion.css, « PAGE TRANSITIONS »). */\nexport const PAGE_TRANSITION_CLASS = \"kz-page\";\n\ntype ViewTransitionComponent = ComponentType<{ children?: ReactNode; default?: string }>;\n\n/** Next.js ships React canary, where it is `ViewTransition`; earlier canaries called it `unstable_ViewTransition`. */\nconst RUNTIME_KEYS = [\"ViewTransition\", \"unstable_ViewTransition\"] as const;\n\n// Read through a variable key: a plain React build has neither export, and a static `React.ViewTransition` would make\n// the bundler warn about a missing export.\nfunction runtimeViewTransition(): ViewTransitionComponent | undefined {\n  const runtime = React as unknown as Record<string, ViewTransitionComponent | undefined>;\n  return RUNTIME_KEYS.map((key) => runtime[key]).find(Boolean);\n}\n\nconst ViewTransition = runtimeViewTransition();\n\nexport interface PageTransitionProps {\n  children: ReactNode;\n}\n\n/**\n * Wrap the page content (the root layout's `children`) once: a navigation then cross-fades and rises over the\n * `--kz-motion-*` tokens, through the platform's View Transitions. Where the runtime has no `ViewTransition` it renders\n * its children untouched; under `prefers-reduced-motion` motion.css makes the change instant. The DOM always updates.\n */\nexport function PageTransition({ children }: PageTransitionProps) {\n  if (!ViewTransition) return <>{children}</>;\n  return <ViewTransition default={PAGE_TRANSITION_CLASS}>{children}</ViewTransition>;\n}\n","/**\n * Page transitions on the platform: `document.startViewTransition` with a cross-fade fallback and an instant change\n * under reduced motion. Pure functions over an injected document, so they are testable without a browser.\n *\n * The contract (docs/direction-2027.md): the DOM always updates; motion is only the way it gets there.\n */\n\nexport interface ViewTransitionLike {\n  readonly finished: Promise<void>;\n}\n\nexport type StartViewTransition = (update: () => void) => ViewTransitionLike;\n\nexport interface ViewTransitionEnv {\n  /** The document whose transition runs. Defaults to the global one when the call happens in a browser. */\n  readonly doc?: {\n    startViewTransition?: StartViewTransition;\n    documentElement?: { animate?: (frames: Keyframe[], options: KeyframeAnimationOptions) => unknown };\n  };\n  /** `prefers-reduced-motion: reduce`. */\n  readonly reduced?: boolean;\n}\n\nexport interface CrossFadeOptions {\n  /** Milliseconds of the fallback cross-fade. */\n  readonly duration?: number;\n  readonly easing?: string;\n}\n\nconst IDENT = /^[A-Za-z_][A-Za-z0-9_-]*$/;\n\n/** True when the browser can run a native view transition. */\nexport function canViewTransition(doc: ViewTransitionEnv[\"doc\"]): boolean {\n  return typeof doc?.startViewTransition === \"function\";\n}\n\n/**\n * Runs `update` inside a view transition when the platform has one and motion is allowed; otherwise it runs `update`\n * at once. Resolves when the transition has finished (or straight away when there is none). It never rejects: a\n * skipped or aborted transition still leaves the DOM in its new state.\n */\nexport function runViewTransition(update: () => void, env: ViewTransitionEnv = {}): Promise<void> {\n  if (env.reduced || !canViewTransition(env.doc)) {\n    update();\n    return Promise.resolve();\n  }\n  const transition = env.doc!.startViewTransition!(update);\n  return transition.finished.then(\n    () => undefined,\n    () => undefined,\n  );\n}\n\n/**\n * The fallback for a browser without view transitions: the change is applied, then the root cross-fades from\n * transparent. Reduced motion means no fade at all. Returns the animation when one was started, otherwise `null`.\n */\nexport function crossFallback(update: () => void, env: ViewTransitionEnv = {}, options: CrossFadeOptions = {}): unknown {\n  update();\n  if (env.reduced || canViewTransition(env.doc)) return null;\n  const root = env.doc?.documentElement;\n  if (typeof root?.animate !== \"function\") return null;\n  return root.animate([{ opacity: 0 }, { opacity: 1 }], {\n    duration: options.duration ?? 200,\n    easing: options.easing ?? \"ease-out\",\n  });\n}\n\n/** One call for a change of page or step: a view transition where it exists, a cross-fade otherwise, instant under reduced motion. */\nexport function transitionPage(update: () => void, env: ViewTransitionEnv = {}, options: CrossFadeOptions = {}): Promise<void> {\n  if (canViewTransition(env.doc) && !env.reduced) return runViewTransition(update, env);\n  crossFallback(update, env, options);\n  return Promise.resolve();\n}\n\n/**\n * The `view-transition-name` for a shared element: the element morphs between the two states wherever it lands. The\n * name must be one CSS identifier and unique on the page while the transition runs.\n */\nexport function sharedElementStyle(name: string): { viewTransitionName: string } {\n  if (!IDENT.test(name)) throw new RangeError(`view-transition-name must be one identifier, got \"${name}\"`);\n  return { viewTransitionName: name };\n}\n"],"mappings":";;;;;;;AACA,YAAY,WAAW;AA6BO;AA1BvB,IAAM,wBAAwB;AAKrC,IAAM,eAAe,CAAC,kBAAkB,yBAAyB;AAIjE,SAAS,wBAA6D;AACpE,QAAM,UAAU;AAChB,SAAO,aAAa,IAAI,CAAC,QAAQ,QAAQ,GAAG,CAAC,EAAE,KAAK,OAAO;AAC7D;AAEA,IAAM,iBAAiB,sBAAsB;AAWtC,SAAS,eAAe,EAAE,SAAS,GAAwB;AAChE,MAAI,CAAC,eAAgB,QAAO,gCAAG,UAAS;AACxC,SAAO,oBAAC,kBAAe,SAAS,uBAAwB,UAAS;AACnE;;;ACHA,IAAM,QAAQ;AAGP,SAAS,kBAAkB,KAAwC;AACxE,SAAO,OAAO,KAAK,wBAAwB;AAC7C;AAOO,SAAS,kBAAkB,QAAoB,MAAyB,CAAC,GAAkB;AAChG,MAAI,IAAI,WAAW,CAAC,kBAAkB,IAAI,GAAG,GAAG;AAC9C,WAAO;AACP,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACA,QAAM,aAAa,IAAI,IAAK,oBAAqB,MAAM;AACvD,SAAO,WAAW,SAAS;AAAA,IACzB,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAMO,SAAS,cAAc,QAAoB,MAAyB,CAAC,GAAG,UAA4B,CAAC,GAAY;AACtH,SAAO;AACP,MAAI,IAAI,WAAW,kBAAkB,IAAI,GAAG,EAAG,QAAO;AACtD,QAAM,OAAO,IAAI,KAAK;AACtB,MAAI,OAAO,MAAM,YAAY,WAAY,QAAO;AAChD,SAAO,KAAK,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,GAAG;AAAA,IACpD,UAAU,QAAQ,YAAY;AAAA,IAC9B,QAAQ,QAAQ,UAAU;AAAA,EAC5B,CAAC;AACH;AAGO,SAAS,eAAe,QAAoB,MAAyB,CAAC,GAAG,UAA4B,CAAC,GAAkB;AAC7H,MAAI,kBAAkB,IAAI,GAAG,KAAK,CAAC,IAAI,QAAS,QAAO,kBAAkB,QAAQ,GAAG;AACpF,gBAAc,QAAQ,KAAK,OAAO;AAClC,SAAO,QAAQ,QAAQ;AACzB;AAMO,SAAS,mBAAmB,MAA8C;AAC/E,MAAI,CAAC,MAAM,KAAK,IAAI,EAAG,OAAM,IAAI,WAAW,qDAAqD,IAAI,GAAG;AACxG,SAAO,EAAE,oBAAoB,KAAK;AACpC;","names":[]}

package/dist/native/form.d.ts

@@ -175,6 +175,34 @@ interface KrizakaFieldArray<T = unknown> {
 declare function useKrizakaFieldArray<T = unknown>(name: string): KrizakaFieldArray<T>;
 /** The value of a field, kept up to date (`form.Watch`): show a part of the form only when a box is ticked. */
 declare function useFormValue<T = unknown>(name: string): T;
+type FormFieldProps<T = unknown> = {
+    /** The field's name in the schema (typed by the form). */
+    name: string;
+    /** Checks the value on the server as it changes. */
+    validateAsync?: FieldCheck<T>;
+    /** The wait, in ms, before `validateAsync`. */
+    asyncDebounceMs?: number;
+    /** Draws the field: its value, setter, error (and the ids, on the web) (`useKrizakaField`). */
+    children: (field: KrizakaField<T>) => React.ReactNode;
+};
+/** A field drawn by the app (a control the package does not have): the form's value and errors, any markup. */
+declare function FormField({ name, validateAsync, asyncDebounceMs, children }: FormFieldProps): React.JSX.Element;
+type FieldArrayProps<T = unknown> = {
+    /** The array's name in the schema (typed by the form). */
+    name: string;
+    /** Draws the items: `items`, `push`, `remove`, `move`, `fieldName(i, "url")` for the fields of an item. */
+    children: (array: KrizakaFieldArray<T>) => React.ReactNode;
+};
+/** A list of fields that grows and shrinks (links, tiers, guests): each item's fields named `links[0].url`. */
+declare function FieldArray({ name, children }: FieldArrayProps): React.JSX.Element;
+type WatchProps<T = unknown> = {
+    /** The field to follow (typed by the form). */
+    name: string;
+    /** Draws from its current value: show a part of the form only when a choice is made. */
+    children: (value: T) => React.ReactNode;
+};
+/** Renders from a field's current value (a part shown only when a choice is made, a total). */
+declare function Watch({ name, children }: WatchProps): React.JSX.Element;
 /** The state of the submit, for a button: sending, and whether the last try succeeded. */
 declare function useFormStatus(): {
     submitting: boolean;
@@ -371,34 +399,6 @@ type MoneyProps = Base & {
 };
 /** An amount of the form, stored as integer minor units (cents), typed on the decimal keypad the locale's way. */
 declare function Money({ name, label, hint, disabled, style, currency, placeholder }: MoneyProps): React.JSX.Element;
-type FormFieldProps<T = unknown> = {
-    /** The field's name in the schema (typed by the form). */
-    name: string;
-    /** Checks the value on the server as it changes. */
-    validateAsync?: FieldCheck<T>;
-    /** The wait, in ms, before `validateAsync`. */
-    asyncDebounceMs?: number;
-    /** Draws the field: its value, setter, error (`useKrizakaField`). */
-    children: (field: KrizakaField<T>) => React.ReactNode;
-};
-/** A field drawn by the app (a control the package does not have). */
-declare function FormField({ name, validateAsync, asyncDebounceMs, children }: FormFieldProps): React.JSX.Element;
-type FieldArrayProps<T = unknown> = {
-    /** The array's name in the schema (typed by the form). */
-    name: string;
-    /** Draws the items: `items`, `push`, `remove`, `move`, `fieldName(i, "url")`. */
-    children: (array: KrizakaFieldArray<T>) => React.ReactNode;
-};
-/** A list of fields that grows and shrinks: each item's fields named `links[0].url`. */
-declare function FieldArray({ name, children }: FieldArrayProps): React.JSX.Element;
-type WatchProps<T = unknown> = {
-    /** The field to follow (typed by the form). */
-    name: string;
-    /** Draws from its current value. */
-    children: (value: T) => React.ReactNode;
-};
-/** Renders from a field's current value (a part shown only when a choice is made). */
-declare function Watch({ name, children }: WatchProps): React.JSX.Element;
 /** A form, defined once — the same schema and defaults as the web (`packages/core` of a product) — on native fields. */
 declare const createKrizakaForm: <S extends FormSchema>(definition: KrizakaFormDefinition<S>) => KrizakaFormFactory<S, {
     TextField: typeof TextField;

package/dist/native/form.js

@@ -141,7 +141,7 @@ function problemToErrors(problem, i18n = {}, known, codeFields = {}) {
 }
 
 // src/form/core.tsx
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 var FormContext = React.createContext(null);
 function useFormContext() {
   const ctx = React.useContext(FormContext);
@@ -286,6 +286,15 @@ function useFormValue(name) {
   const ctx = useFormContext();
   return useStore(ctx.api.store, (state) => getPath(state.values, name));
 }
+function FormField({ name, validateAsync, asyncDebounceMs, children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: children(useKrizakaField(name, { validateAsync, asyncDebounceMs })) });
+}
+function FieldArray({ name, children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: children(useKrizakaFieldArray(name)) });
+}
+function Watch({ name, children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: children(useFormValue(name)) });
+}
 function useFormStatus() {
   const ctx = useFormContext();
   const submitting = useStore(ctx.api.store, (s) => s.isSubmitting);
@@ -411,7 +420,7 @@ function latestBirthDate(age, today = /* @__PURE__ */ new Date()) {
 }
 
 // src/native/form.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var ChainContext = React2.createContext(null);
 function useChain(ctx) {
   const entries = React2.useRef([]);
@@ -662,15 +671,6 @@ function Money({ name, label, hint, disabled, style, currency, placeholder }) {
     }
   );
 }
-function FormField({ name, validateAsync, asyncDebounceMs, children }) {
-  return /* @__PURE__ */ jsx2(Fragment, { children: children(useKrizakaField(name, { validateAsync, asyncDebounceMs })) });
-}
-function FieldArray({ name, children }) {
-  return /* @__PURE__ */ jsx2(Fragment, { children: children(useKrizakaFieldArray(name)) });
-}
-function Watch({ name, children }) {
-  return /* @__PURE__ */ jsx2(Fragment, { children: children(useFormValue(name)) });
-}
 var fields = { TextField, TextArea, Checkbox, Switch, RadioGroup, Select, Combobox, DateField, Money, Slider, Field: FormField, FieldArray, Watch, Submit, FormError };
 var createKrizakaForm = makeCreateKrizakaForm(fields, FormRoot);
 var styles = StyleSheet.create({