@misoto22/design 0.6.1 → 0.8.0

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,62 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * A rung of the type scale, named for what it is FOR rather than for a pixel
+ * value. `base` is body copy; `lead` is the standfirst that carries a piece and
+ * is the only step here that touches the heading ladder (`--fs-item`, its
+ * bottom rung). Nothing above that: a paragraph larger than a record title is a
+ * heading that forgot to be one.
+ */
+type TextSize = 'xs' | 'sm' | 'base' | 'lead';
+/**
+ * A rung of the ink ladder. Three, because the ladder has three.
+ *
+ * `muted` is `--ink-3-aa` and never `--ink-3`. The two look identical on paper
+ * and are not the same token: `--ink-3` is a translucent tint that inherits
+ * whatever is under it, so it clears AA on the page ground and quietly fails on
+ * a card, a plate, or a code block.
+ */
+type TextTone = 'body' | 'strong' | 'muted';
+type TextElement = 'p' | 'span' | 'div' | 'li' | 'figcaption';
+interface TextProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    /** Which rung of the type scale. See {@link TextSize}. */
+    size?: TextSize;
+    /** Which rung of the ink ladder. See {@link TextTone}. */
+    tone?: TextTone;
+    /**
+     * The element, and ONLY the element.
+     *
+     * Changing it changes what the markup means — a `span` inside a sentence, an
+     * `li` inside a list someone else opened — and changes nothing about the
+     * look. That separation is the whole point: the alternative is a `<p>` nested
+     * inside a `<p>`, which the HTML parser silently splits into two, or a
+     * paragraph faked out of a `<div>` because the real element brought a size
+     * with it.
+     */
+    as?: TextElement;
+}
+/**
+ * A paragraph, or a run of text that wants the system's voice.
+ *
+ * The step between `Article` and raw JSX. `Article` styles a whole reading
+ * column from element selectors and is the right answer for a post; this is for
+ * the single paragraph that is NOT in a column — a card's description, a
+ * dialog's explanation, the line under an empty state.
+ *
+ * The default tone is `body` (`--ink-2`), not `--ink`. A page whose paragraphs
+ * are all full-strength ink has spent the top of the ladder on its body copy
+ * and has nothing left for the headings, which is the single most common way a
+ * monochrome page loses its hierarchy.
+ *
+ * @example
+ * <Text>Twelve releases this quarter, none rolled back.</Text>
+ * @example
+ * <Text size="lead" tone="strong">A monochrome system for software and writing.</Text>
+ * @example
+ * <Text as="span" size="sm" tone="muted">Updated just now</Text>
+ */
+declare function Text({ children, size, tone, as, className, ...rest }: TextProps): react.JSX.Element;
+
+export { Text, type TextElement, type TextProps, type TextSize, type TextTone, Text as default };

package/dist/components/Text/Text.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const SIZE = {
+  xs: "text-xs leading-[1.6]",
+  sm: "text-sm leading-[1.65]",
+  base: "text-base font-light leading-[1.75]",
+  lead: "text-[length:var(--fs-item)] font-light leading-[1.6]"
+};
+const TONE = {
+  body: "text-(--ink-2)",
+  strong: "text-(--ink)",
+  muted: "text-(--ink-3-aa)"
+};
+function Text({
+  children,
+  size = "base",
+  tone = "body",
+  as = "p",
+  className,
+  ...rest
+}) {
+  const Comp = as;
+  return /* @__PURE__ */ jsx(Comp, { className: cn("m-0", SIZE[size], TONE[tone], className), ...rest, children });
+}
+var Text_default = Text;
+export {
+  Text,
+  Text_default as default
+};
+//# sourceMappingURL=Text.js.map

package/dist/components/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * A rung of the type scale, named for what it is FOR rather than for a pixel\n * value. `base` is body copy; `lead` is the standfirst that carries a piece and\n * is the only step here that touches the heading ladder (`--fs-item`, its\n * bottom rung). Nothing above that: a paragraph larger than a record title is a\n * heading that forgot to be one.\n */\nexport type TextSize = 'xs' | 'sm' | 'base' | 'lead'\n\n/**\n * A rung of the ink ladder. Three, because the ladder has three.\n *\n * `muted` is `--ink-3-aa` and never `--ink-3`. The two look identical on paper\n * and are not the same token: `--ink-3` is a translucent tint that inherits\n * whatever is under it, so it clears AA on the page ground and quietly fails on\n * a card, a plate, or a code block.\n */\nexport type TextTone = 'body' | 'strong' | 'muted'\n\nexport type TextElement = 'p' | 'span' | 'div' | 'li' | 'figcaption'\n\n/**\n * Weight travels with the size, deliberately.\n *\n * The system sets long-form copy at 300 — it is what gives a page of prose its\n * air. At 12 and 14px that same weight is a hairline: the strokes thin out\n * below the point where a light face is a choice and turn into a legibility\n * bug. So the two small steps step back up to 400, and a caller never has to\n * know that the trade exists.\n */\nconst SIZE: Record<TextSize, string> = {\n  xs: 'text-xs leading-[1.6]',\n  sm: 'text-sm leading-[1.65]',\n  base: 'text-base font-light leading-[1.75]',\n  lead: 'text-[length:var(--fs-item)] font-light leading-[1.6]',\n}\n\nconst TONE: Record<TextTone, string> = {\n  body: 'text-(--ink-2)',\n  strong: 'text-(--ink)',\n  muted: 'text-(--ink-3-aa)',\n}\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode\n  /** Which rung of the type scale. See {@link TextSize}. */\n  size?: TextSize\n  /** Which rung of the ink ladder. See {@link TextTone}. */\n  tone?: TextTone\n  /**\n   * The element, and ONLY the element.\n   *\n   * Changing it changes what the markup means — a `span` inside a sentence, an\n   * `li` inside a list someone else opened — and changes nothing about the\n   * look. That separation is the whole point: the alternative is a `<p>` nested\n   * inside a `<p>`, which the HTML parser silently splits into two, or a\n   * paragraph faked out of a `<div>` because the real element brought a size\n   * with it.\n   */\n  as?: TextElement\n}\n\n/**\n * A paragraph, or a run of text that wants the system's voice.\n *\n * The step between `Article` and raw JSX. `Article` styles a whole reading\n * column from element selectors and is the right answer for a post; this is for\n * the single paragraph that is NOT in a column — a card's description, a\n * dialog's explanation, the line under an empty state.\n *\n * The default tone is `body` (`--ink-2`), not `--ink`. A page whose paragraphs\n * are all full-strength ink has spent the top of the ladder on its body copy\n * and has nothing left for the headings, which is the single most common way a\n * monochrome page loses its hierarchy.\n *\n * @example\n * <Text>Twelve releases this quarter, none rolled back.</Text>\n * @example\n * <Text size=\"lead\" tone=\"strong\">A monochrome system for software and writing.</Text>\n * @example\n * <Text as=\"span\" size=\"sm\" tone=\"muted\">Updated just now</Text>\n */\nexport function Text({\n  children,\n  size = 'base',\n  tone = 'body',\n  as = 'p',\n  className,\n  ...rest\n}: TextProps) {\n  const Comp = as as ElementType\n\n  return (\n    <Comp className={cn('m-0', SIZE[size], TONE[tone], className)} {...rest}>\n      {children}\n    </Comp>\n  )\n}\n\nexport default Text\n"],"mappings":"AAgGI;AA/FJ,SAAS,UAAU;AAgCnB,MAAM,OAAiC;AAAA,EACrC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,OAAiC;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAyCO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,OAAO;AAEb,SACE,oBAAC,QAAK,WAAW,GAAG,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,SAAS,GAAI,GAAG,MAChE,UACH;AAEJ;AAEA,IAAO,eAAQ;","names":[]}

package/dist/components/Timestamp/Timestamp.d.ts

@@ -0,0 +1,59 @@
+import * as react from 'react';
+import { TimeHTMLAttributes } from 'react';
+
+/**
+ * How the instant reads.
+ *
+ * `auto` is relative while the gap is small enough to be useful and absolute
+ * once it is not — "3 hours ago" answers the question a reader is actually
+ * asking about a recent record, and "2 years ago" does not.
+ */
+type TimestampFormat = 'auto' | 'relative' | 'absolute';
+interface TimestampProps extends Omit<TimeHTMLAttributes<HTMLTimeElement>, 'dateTime' | 'children'> {
+    /** The instant. A `Date`, an ISO string, or epoch milliseconds. */
+    value: Date | string | number;
+    /** How the instant reads. See {@link TimestampFormat}. */
+    format?: TimestampFormat;
+    /**
+     * How far from now `auto` still prints a relative time, in milliseconds.
+     * Seven days by default — past a week the calendar date is the more useful
+     * fact, and it is also the one that stops changing.
+     */
+    relativeWithin?: number;
+    /** Adds the clock time to the absolute form. */
+    showTime?: boolean;
+}
+/**
+ * A date or a time, rendered the one way the system renders them.
+ *
+ * Every list of records needs this, and `new Date().toLocaleString()` at the
+ * call site is precisely how a product ends up with four date formats on one
+ * screen.
+ *
+ * **On hydration.** Both halves of a formatted date are environment-dependent:
+ * a relative time depends on when it is read, and even an absolute one depends
+ * on the reader's locale and time zone, none of which a static build knows. So
+ * the first paint — the one the server produces and the one the client must
+ * reproduce exactly — is the ISO calendar date in UTC, sliced straight out of
+ * the ISO string with no `Intl` anywhere near it. Both sides compute it from
+ * the same characters, so they cannot disagree. The locale-aware and relative
+ * forms are applied after mount, in an effect, where there is a reader to be
+ * local to. This package statically exports every page, so the alternative is a
+ * hydration mismatch on any page with a date on it.
+ *
+ * The `datetime` attribute is the full ISO instant from the first render
+ * onwards and never changes, so a screen reader, a crawler, or anything else
+ * parsing the markup gets the exact moment whether or not the effect has run.
+ *
+ * It formats once per mount. A hundred rows each holding a ticking interval to
+ * keep "3 minutes ago" honest is a cost nobody asked for; a list that must tick
+ * should re-key or re-render from above.
+ *
+ * @example
+ * <Timestamp value={deploy.finishedAt} />
+ * @example
+ * <Timestamp value="2026-01-14T09:30:00Z" format="absolute" showTime />
+ */
+declare function Timestamp({ value, format, relativeWithin, showTime, className, ...rest }: TimestampProps): react.JSX.Element;
+
+export { Timestamp, type TimestampFormat, type TimestampProps, Timestamp as default };

package/dist/components/Timestamp/Timestamp.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "../../lib/cn.js";
+const UNITS = [
+  ["year", 31556952e3],
+  ["month", 2629746e3],
+  ["week", 6048e5],
+  ["day", 864e5],
+  ["hour", 36e5],
+  ["minute", 6e4]
+];
+function relative(deltaMs) {
+  const format = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+  const gap = Math.abs(deltaMs);
+  for (const [unit, size] of UNITS) {
+    if (gap >= size) return format.format(Math.trunc(deltaMs / size), unit);
+  }
+  return format.format(0, "second");
+}
+function absolute(date, showTime) {
+  return new Intl.DateTimeFormat(void 0, {
+    dateStyle: "medium",
+    ...showTime ? { timeStyle: "short" } : {}
+  }).format(date);
+}
+function Timestamp({
+  value,
+  format = "auto",
+  relativeWithin = 6048e5,
+  showTime = false,
+  className,
+  ...rest
+}) {
+  const date = value instanceof Date ? value : new Date(value);
+  const time = date.getTime();
+  const valid = !Number.isNaN(time);
+  const [local, setLocal] = useState(false);
+  useEffect(() => setLocal(true), []);
+  if (!valid) {
+    return /* @__PURE__ */ jsx("span", { className: cn("text-(--ink-3-aa)", className), ...rest, children: "\u2014" });
+  }
+  const iso = date.toISOString();
+  return /* @__PURE__ */ jsx("time", { dateTime: iso, className: cn("tabular-nums", className), ...rest, children: local ? read(date, format, relativeWithin, showTime) : iso.slice(0, 10) });
+}
+function read(date, format, relativeWithin, showTime) {
+  const delta = date.getTime() - Date.now();
+  const asRelative = format === "relative" || format === "auto" && Math.abs(delta) < relativeWithin;
+  return asRelative ? relative(delta) : absolute(date, showTime);
+}
+var Timestamp_default = Timestamp;
+export {
+  Timestamp,
+  Timestamp_default as default
+};
+//# sourceMappingURL=Timestamp.js.map

package/dist/components/Timestamp/Timestamp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Timestamp/Timestamp.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport type { TimeHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * How the instant reads.\n *\n * `auto` is relative while the gap is small enough to be useful and absolute\n * once it is not — \"3 hours ago\" answers the question a reader is actually\n * asking about a recent record, and \"2 years ago\" does not.\n */\nexport type TimestampFormat = 'auto' | 'relative' | 'absolute'\n\nexport interface TimestampProps\n  extends Omit<TimeHTMLAttributes<HTMLTimeElement>, 'dateTime' | 'children'> {\n  /** The instant. A `Date`, an ISO string, or epoch milliseconds. */\n  value: Date | string | number\n  /** How the instant reads. See {@link TimestampFormat}. */\n  format?: TimestampFormat\n  /**\n   * How far from now `auto` still prints a relative time, in milliseconds.\n   * Seven days by default — past a week the calendar date is the more useful\n   * fact, and it is also the one that stops changing.\n   */\n  relativeWithin?: number\n  /** Adds the clock time to the absolute form. */\n  showTime?: boolean\n}\n\n/**\n * The units, largest first, with the milliseconds in one of each.\n *\n * The month and year lengths are the average ones — 30.44 and 365.24 days —\n * because a relative time is a rounded statement about a gap, not a calendar\n * calculation, and \"2 months ago\" must not become \"1 month ago\" because\n * February was short.\n */\nconst UNITS = [\n  ['year', 31_556_952_000],\n  ['month', 2_629_746_000],\n  ['week', 604_800_000],\n  ['day', 86_400_000],\n  ['hour', 3_600_000],\n  ['minute', 60_000],\n] as const\n\n/**\n * The gap in words, in the reader's own language.\n *\n * `Intl.RelativeTimeFormat` rather than a table of English strings: it is in\n * every runtime this package targets, costs nothing to ship, and `numeric:\n * 'auto'` is what turns \"1 day ago\" into \"yesterday\".\n *\n * Truncated, not rounded — ninety seconds is \"1 minute ago\", because a reader\n * who has just watched something happen is not helped by being told it was two\n * minutes. Anything under a minute is \"now\": the seconds are noise, and they\n * are also the only part that would be wrong a moment later.\n */\nfunction relative(deltaMs: number): string {\n  const format = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })\n  const gap = Math.abs(deltaMs)\n\n  for (const [unit, size] of UNITS) {\n    if (gap >= size) return format.format(Math.trunc(deltaMs / size), unit)\n  }\n  return format.format(0, 'second')\n}\n\n/** The calendar date, in the reader's own locale and time zone. */\nfunction absolute(date: Date, showTime: boolean): string {\n  return new Intl.DateTimeFormat(undefined, {\n    dateStyle: 'medium',\n    ...(showTime ? { timeStyle: 'short' as const } : {}),\n  }).format(date)\n}\n\n/**\n * A date or a time, rendered the one way the system renders them.\n *\n * Every list of records needs this, and `new Date().toLocaleString()` at the\n * call site is precisely how a product ends up with four date formats on one\n * screen.\n *\n * **On hydration.** Both halves of a formatted date are environment-dependent:\n * a relative time depends on when it is read, and even an absolute one depends\n * on the reader's locale and time zone, none of which a static build knows. So\n * the first paint — the one the server produces and the one the client must\n * reproduce exactly — is the ISO calendar date in UTC, sliced straight out of\n * the ISO string with no `Intl` anywhere near it. Both sides compute it from\n * the same characters, so they cannot disagree. The locale-aware and relative\n * forms are applied after mount, in an effect, where there is a reader to be\n * local to. This package statically exports every page, so the alternative is a\n * hydration mismatch on any page with a date on it.\n *\n * The `datetime` attribute is the full ISO instant from the first render\n * onwards and never changes, so a screen reader, a crawler, or anything else\n * parsing the markup gets the exact moment whether or not the effect has run.\n *\n * It formats once per mount. A hundred rows each holding a ticking interval to\n * keep \"3 minutes ago\" honest is a cost nobody asked for; a list that must tick\n * should re-key or re-render from above.\n *\n * @example\n * <Timestamp value={deploy.finishedAt} />\n * @example\n * <Timestamp value=\"2026-01-14T09:30:00Z\" format=\"absolute\" showTime />\n */\nexport function Timestamp({\n  value,\n  format = 'auto',\n  relativeWithin = 604_800_000,\n  showTime = false,\n  className,\n  ...rest\n}: TimestampProps) {\n  const date = value instanceof Date ? value : new Date(value)\n  const time = date.getTime()\n  const valid = !Number.isNaN(time)\n\n  // False through the server render and the hydrating render, true from the\n  // first effect on. That is the whole hydration contract in one flag.\n  const [local, setLocal] = useState(false)\n  useEffect(() => setLocal(true), [])\n\n  if (!valid) {\n    // Not \"Invalid Date\" — that is the browser's internal string and an\n    // engineering artefact in front of a reader. A value nothing can parse is a\n    // missing value, and a record UI already has a glyph for one. There is no\n    // <time> here either: an element whose datetime cannot be written is not a\n    // time.\n    return (\n      <span className={cn('text-(--ink-3-aa)', className)} {...rest}>\n        —\n      </span>\n    )\n  }\n\n  const iso = date.toISOString()\n\n  return (\n    <time dateTime={iso} className={cn('tabular-nums', className)} {...rest}>\n      {local ? read(date, format, relativeWithin, showTime) : iso.slice(0, 10)}\n    </time>\n  )\n}\n\n/**\n * The text a reader who has a clock and a locale gets. Only ever called after\n * mount — everything in here reads `Date.now()` or the ambient locale, which is\n * exactly what the server cannot know.\n */\nfunction read(\n  date: Date,\n  format: TimestampFormat,\n  relativeWithin: number,\n  showTime: boolean,\n): string {\n  const delta = date.getTime() - Date.now()\n  const asRelative = format === 'relative' || (format === 'auto' && Math.abs(delta) < relativeWithin)\n  return asRelative ? relative(delta) : absolute(date, showTime)\n}\n\nexport default Timestamp\n"],"mappings":";AAqIM;AAnIN,SAAS,WAAW,gBAAgB;AAEpC,SAAS,UAAU;AAmCnB,MAAM,QAAQ;AAAA,EACZ,CAAC,QAAQ,UAAc;AAAA,EACvB,CAAC,SAAS,SAAa;AAAA,EACvB,CAAC,QAAQ,MAAW;AAAA,EACpB,CAAC,OAAO,KAAU;AAAA,EAClB,CAAC,QAAQ,IAAS;AAAA,EAClB,CAAC,UAAU,GAAM;AACnB;AAcA,SAAS,SAAS,SAAyB;AACzC,QAAM,SAAS,IAAI,KAAK,mBAAmB,QAAW,EAAE,SAAS,OAAO,CAAC;AACzE,QAAM,MAAM,KAAK,IAAI,OAAO;AAE5B,aAAW,CAAC,MAAM,IAAI,KAAK,OAAO;AAChC,QAAI,OAAO,KAAM,QAAO,OAAO,OAAO,KAAK,MAAM,UAAU,IAAI,GAAG,IAAI;AAAA,EACxE;AACA,SAAO,OAAO,OAAO,GAAG,QAAQ;AAClC;AAGA,SAAS,SAAS,MAAY,UAA2B;AACvD,SAAO,IAAI,KAAK,eAAe,QAAW;AAAA,IACxC,WAAW;AAAA,IACX,GAAI,WAAW,EAAE,WAAW,QAAiB,IAAI,CAAC;AAAA,EACpD,CAAC,EAAE,OAAO,IAAI;AAChB;AAiCO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,OAAO,iBAAiB,OAAO,QAAQ,IAAI,KAAK,KAAK;AAC3D,QAAM,OAAO,KAAK,QAAQ;AAC1B,QAAM,QAAQ,CAAC,OAAO,MAAM,IAAI;AAIhC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,YAAU,MAAM,SAAS,IAAI,GAAG,CAAC,CAAC;AAElC,MAAI,CAAC,OAAO;AAMV,WACE,oBAAC,UAAK,WAAW,GAAG,qBAAqB,SAAS,GAAI,GAAG,MAAM,oBAE/D;AAAA,EAEJ;AAEA,QAAM,MAAM,KAAK,YAAY;AAE7B,SACE,oBAAC,UAAK,UAAU,KAAK,WAAW,GAAG,gBAAgB,SAAS,GAAI,GAAG,MAChE,kBAAQ,KAAK,MAAM,QAAQ,gBAAgB,QAAQ,IAAI,IAAI,MAAM,GAAG,EAAE,GACzE;AAEJ;AAOA,SAAS,KACP,MACA,QACA,gBACA,UACQ;AACR,QAAM,QAAQ,KAAK,QAAQ,IAAI,KAAK,IAAI;AACxC,QAAM,aAAa,WAAW,cAAe,WAAW,UAAU,KAAK,IAAI,KAAK,IAAI;AACpF,SAAO,aAAa,SAAS,KAAK,IAAI,SAAS,MAAM,QAAQ;AAC/D;AAEA,IAAO,oBAAQ;","names":[]}

package/dist/components/Toast/Toast.d.ts

@@ -9,6 +9,14 @@ export { toast } from 'sonner';
  * reader must act on belongs in the page — a toast is dismissed by time, and
  * time is not an acknowledgement.
  *
+ * `theme` follows `data-mode`. sonner defaults to `light` and hard-codes the
+ * description's colour per theme — `#3f3f3f`, overridden only under
+ * `[data-sonner-theme=dark]` — so a Toaster that never passed `theme` put dark
+ * grey text on this system's `--paper: #0d0d0d` and every
+ * `toast(title, { description })` lost its second half. Pass `theme` yourself
+ * and that wins; sonner's own `system` is the one value not to reach for, since
+ * it reads the OS rather than the attribute the page is actually painted from.
+ *
  * `richColors` stays off by default: sonner's rich palette is not this system's
  * status scale, and turning it on reintroduces chroma the White Reset spends
  * only on state.
@@ -19,6 +27,6 @@ export { toast } from 'sonner';
  * // anywhere
  * toast.success('Saved')
  */
-declare function Toaster({ position, closeButton, richColors, style, ...rest }: ToasterProps): react.JSX.Element;
+declare function Toaster({ position, closeButton, richColors, theme, style, ...rest }: ToasterProps): react.JSX.Element;
 
 export { Toaster, Toaster as default };

package/dist/components/Toast/Toast.js

@@ -1,33 +1,56 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
 import { Toaster as SonnerToaster, toast } from "sonner";
 const TOKEN_STYLE = {
   "--normal-bg": "var(--paper)",
   "--normal-text": "var(--ink)",
   "--normal-border": "var(--rule-2)",
+  "--border-radius": "var(--radius)",
+  fontFamily: "var(--sans)"
+};
+const RICH_STYLE = {
   "--success-bg": "var(--paper)",
   "--success-text": "var(--ok)",
   "--success-border": "var(--rule-2)",
   "--error-bg": "var(--paper)",
   "--error-text": "var(--danger)",
-  "--error-border": "var(--rule-2)",
-  "--border-radius": "var(--radius)",
-  fontFamily: "var(--sans)"
+  "--error-border": "var(--rule-2)"
 };
+function readMode() {
+  if (typeof document === "undefined") return "light";
+  return document.documentElement.dataset.mode === "dark" ? "dark" : "light";
+}
+function readModeOnServer() {
+  return "light";
+}
+function subscribeToMode(onChange) {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {
+  };
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-mode"] });
+  return () => observer.disconnect();
+}
+function useMode() {
+  return useSyncExternalStore(subscribeToMode, readMode, readModeOnServer);
+}
 function Toaster({
   position = "bottom-right",
   closeButton = true,
   richColors = false,
+  theme,
   style,
   ...rest
 }) {
+  const mode = useMode();
   return /* @__PURE__ */ jsx(
     SonnerToaster,
     {
       position,
       closeButton,
       richColors,
-      style: { ...TOKEN_STYLE, ...style },
+      theme: theme ?? mode,
+      style: { ...TOKEN_STYLE, ...richColors ? RICH_STYLE : null, ...style },
       ...rest
     }
   );

package/dist/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["'use client'\n\nimport { Toaster as SonnerToaster, toast } from 'sonner'\nimport type { ToasterProps } from 'sonner'\nimport type { CSSProperties } from 'react'\n\n/**\n * Sonner's own custom properties, pointed at this system's tokens.\n *\n * Set as inline style on the Toaster rather than in a stylesheet: sonner\n * renders its list into a portal at the end of `<body>`, outside whatever\n * element a consumer's CSS is scoped to, and the inline style is the one place\n * guaranteed to reach it.\n *\n * Cast because this `@types/react` `CSSProperties` has no custom-property index\n * signature.\n */\nconst TOKEN_STYLE = {\n  '--normal-bg': 'var(--paper)',\n  '--normal-text': 'var(--ink)',\n  '--normal-border': 'var(--rule-2)',\n  '--success-bg': 'var(--paper)',\n  '--success-text': 'var(--ok)',\n  '--success-border': 'var(--rule-2)',\n  '--error-bg': 'var(--paper)',\n  '--error-text': 'var(--danger)',\n  '--error-border': 'var(--rule-2)',\n  '--border-radius': 'var(--radius)',\n  fontFamily: 'var(--sans)',\n} as CSSProperties\n\n/**\n * Transient confirmations, mounted once near the app root.\n *\n * A toast is for something that succeeded and needs no response. Anything the\n * reader must act on belongs in the page — a toast is dismissed by time, and\n * time is not an acknowledgement.\n *\n * `richColors` stays off by default: sonner's rich palette is not this system's\n * status scale, and turning it on reintroduces chroma the White Reset spends\n * only on state.\n *\n * @example\n * // app root\n * <Toaster />\n * // anywhere\n * toast.success('Saved')\n */\nexport function Toaster({\n  position = 'bottom-right',\n  closeButton = true,\n  richColors = false,\n  style,\n  ...rest\n}: ToasterProps) {\n  return (\n    <SonnerToaster\n      position={position}\n      closeButton={closeButton}\n      richColors={richColors}\n      style={{ ...TOKEN_STYLE, ...style }}\n      {...rest}\n    />\n  )\n}\n\nexport { toast }\nexport default Toaster\n"],"mappings":";AAwDI;AAtDJ,SAAS,WAAW,eAAe,aAAa;AAehD,MAAM,cAAc;AAAA,EAClB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,YAAY;AACd;AAmBO,SAAS,QAAQ;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,EAAE,GAAG,aAAa,GAAG,MAAM;AAAA,MACjC,GAAG;AAAA;AAAA,EACN;AAEJ;AAGA,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["'use client'\n\nimport { useSyncExternalStore } from 'react'\nimport { Toaster as SonnerToaster, toast } from 'sonner'\nimport type { ToasterProps } from 'sonner'\nimport type { CSSProperties } from 'react'\n\n/**\n * Sonner's own custom properties, pointed at this system's tokens.\n *\n * Set as inline style on the Toaster rather than in a stylesheet: sonner\n * renders its list into a portal at the end of `<body>`, outside whatever\n * element a consumer's CSS is scoped to, and the inline style is the one place\n * guaranteed to reach it.\n *\n * These four are the ones sonner reads unconditionally. The status pairs are\n * separate, below, because sonner does not.\n *\n * Cast because this `@types/react` `CSSProperties` has no custom-property index\n * signature.\n */\nconst TOKEN_STYLE = {\n  '--normal-bg': 'var(--paper)',\n  '--normal-text': 'var(--ink)',\n  '--normal-border': 'var(--rule-2)',\n  '--border-radius': 'var(--radius)',\n  fontFamily: 'var(--sans)',\n} as CSSProperties\n\n/**\n * The status pairs, emitted only when something will read them.\n *\n * sonner scopes `--success-*` and `--error-*` to `[data-rich-colors=true]`, so\n * at this package's default they are four declarations that do nothing while\n * sitting in the element's style attribute looking like the source of a success\n * toast's colour. Conditional rather than deleted: a consumer who turns\n * `richColors` on should still get this system's status scale rather than\n * sonner's.\n */\nconst RICH_STYLE = {\n  '--success-bg': 'var(--paper)',\n  '--success-text': 'var(--ok)',\n  '--success-border': 'var(--rule-2)',\n  '--error-bg': 'var(--paper)',\n  '--error-text': 'var(--danger)',\n  '--error-border': 'var(--rule-2)',\n} as CSSProperties\n\n/**\n * The mode the APP is in, which is not the mode the operating system is in.\n *\n * `data-mode` on `<html>` is this system's switch: a pre-paint script resolves\n * it from storage, falling back to `prefers-color-scheme`, and a reader can\n * override the OS from the page. sonner's own `theme=\"system\"` reads\n * `prefers-color-scheme` directly, so a reader on a dark machine reading a\n * light page would get a dark toast over a white page — the same defect as the\n * one this exists to fix, pointing the other way.\n */\ntype Mode = 'light' | 'dark'\n\nfunction readMode(): Mode {\n  if (typeof document === 'undefined') return 'light'\n  return document.documentElement.dataset.mode === 'dark' ? 'dark' : 'light'\n}\n\n/** Light on a server, which is what the pre-paint script also assumes. */\nfunction readModeOnServer(): Mode {\n  return 'light'\n}\n\nfunction subscribeToMode(onChange: () => void): () => void {\n  if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return () => {}\n  const observer = new MutationObserver(onChange)\n  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-mode'] })\n  return () => observer.disconnect()\n}\n\n/**\n * Observed rather than read once: the Toaster is mounted at the app root and\n * outlives every theme switch a reader makes under it.\n */\nfunction useMode(): Mode {\n  return useSyncExternalStore(subscribeToMode, readMode, readModeOnServer)\n}\n\n/**\n * Transient confirmations, mounted once near the app root.\n *\n * A toast is for something that succeeded and needs no response. Anything the\n * reader must act on belongs in the page — a toast is dismissed by time, and\n * time is not an acknowledgement.\n *\n * `theme` follows `data-mode`. sonner defaults to `light` and hard-codes the\n * description's colour per theme — `#3f3f3f`, overridden only under\n * `[data-sonner-theme=dark]` — so a Toaster that never passed `theme` put dark\n * grey text on this system's `--paper: #0d0d0d` and every\n * `toast(title, { description })` lost its second half. Pass `theme` yourself\n * and that wins; sonner's own `system` is the one value not to reach for, since\n * it reads the OS rather than the attribute the page is actually painted from.\n *\n * `richColors` stays off by default: sonner's rich palette is not this system's\n * status scale, and turning it on reintroduces chroma the White Reset spends\n * only on state.\n *\n * @example\n * // app root\n * <Toaster />\n * // anywhere\n * toast.success('Saved')\n */\nexport function Toaster({\n  position = 'bottom-right',\n  closeButton = true,\n  richColors = false,\n  theme,\n  style,\n  ...rest\n}: ToasterProps) {\n  const mode = useMode()\n\n  return (\n    <SonnerToaster\n      position={position}\n      closeButton={closeButton}\n      richColors={richColors}\n      theme={theme ?? mode}\n      style={{ ...TOKEN_STYLE, ...(richColors ? RICH_STYLE : null), ...style }}\n      {...rest}\n    />\n  )\n}\n\nexport { toast }\nexport default Toaster\n"],"mappings":";AAyHI;AAvHJ,SAAS,4BAA4B;AACrC,SAAS,WAAW,eAAe,aAAa;AAkBhD,MAAM,cAAc;AAAA,EAClB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,YAAY;AACd;AAYA,MAAM,aAAa;AAAA,EACjB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,kBAAkB;AACpB;AAcA,SAAS,WAAiB;AACxB,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,SAAO,SAAS,gBAAgB,QAAQ,SAAS,SAAS,SAAS;AACrE;AAGA,SAAS,mBAAyB;AAChC,SAAO;AACT;AAEA,SAAS,gBAAgB,UAAkC;AACzD,MAAI,OAAO,aAAa,eAAe,OAAO,qBAAqB,YAAa,QAAO,MAAM;AAAA,EAAC;AAC9F,QAAM,WAAW,IAAI,iBAAiB,QAAQ;AAC9C,WAAS,QAAQ,SAAS,iBAAiB,EAAE,YAAY,MAAM,iBAAiB,CAAC,WAAW,EAAE,CAAC;AAC/F,SAAO,MAAM,SAAS,WAAW;AACnC;AAMA,SAAS,UAAgB;AACvB,SAAO,qBAAqB,iBAAiB,UAAU,gBAAgB;AACzE;AA2BO,SAAS,QAAQ;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,OAAO,QAAQ;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,OAAO,EAAE,GAAG,aAAa,GAAI,aAAa,aAAa,MAAO,GAAG,MAAM;AAAA,MACtE,GAAG;AAAA;AAAA,EACN;AAEJ;AAGA,IAAO,gBAAQ;","names":[]}

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -21,13 +21,18 @@ type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root>;
  * Distinct from `Tabs`, which switches PANELS and owns a tabpanel relationship.
  * A toggle group changes a value.
  *
+ * Inside a `Field` the strip takes its name from that label, by pointing back at
+ * it — the root is a div, and `<label for>` does not bind to one, so the words
+ * above it do not click through. Standing alone it still needs its own
+ * `aria-label`.
+ *
  * @example
  * <ToggleGroup type="single" defaultValue="grid" aria-label="Layout">
  *   <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
  *   <ToggleGroupItem value="list">List</ToggleGroupItem>
  * </ToggleGroup>
  */
-declare function ToggleGroup({ className, children, ...props }: ToggleGroupProps): react.JSX.Element;
+declare function ToggleGroup({ className, children, 'aria-required': ariaRequired, ...props }: ToggleGroupProps): react.JSX.Element;
 type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>;
 /**
  * One segment.

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -3,9 +3,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { createContext, useContext, useState } from "react";
 import { cn } from "../../lib/cn.js";
+import { useFieldControl } from "../Field/field-control.js";
 import { useSelectionIndicator } from "../../lib/useSelectionIndicator.js";
 const SingleValueContext = createContext(null);
-function ToggleGroup({ className, children, ...props }) {
+function ToggleGroup({
+  className,
+  children,
+  "aria-required": ariaRequired,
+  ...props
+}) {
+  const field = useFieldControl();
+  const named = props["aria-label"] != null || props["aria-labelledby"] != null;
   const single = props.type === "single";
   const [uncontrolled, setUncontrolled] = useState(
     (single ? props.defaultValue : void 0) ?? ""
@@ -16,6 +24,8 @@ function ToggleGroup({ className, children, ...props }) {
     ToggleGroupPrimitive.Root,
     {
       ref,
+      "aria-labelledby": named ? void 0 : field?.labelId,
+      "aria-required": props.type === "single" ? ariaRequired : void 0,
       className: cn(
         // `w-fit` as well as `inline-flex`: a flex or grid parent stretches its
         // children to the track by default, and `inline-flex` does not opt out

package/dist/components/ToggleGroup/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["'use client'\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { createContext, useContext, useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root>\n\n/** Lets an item know whether the group tracks one value or several. */\nconst SingleValueContext = createContext<string | null>(null)\n\n/**\n * A segmented control: several options, one strip.\n *\n * `type=\"single\"` is a choice — Radix gives it radio semantics, and it is the\n * right shape for a view switcher or a density setting. `type=\"multiple\"` is a\n * set of independent toggles, which is a different thing announced differently;\n * choosing the wrong one is how a \"filter by tag\" control ends up telling a\n * screen reader that picking one tag unpicks the others.\n *\n * The two look different on purpose. A single-value strip moves ONE filled pill\n * between its options, so the eye follows a thing travelling; a multiple-value\n * strip fills each pressed option separately, because there is no single\n * selection to travel. Two people looking at a screenshot should be able to\n * tell which kind they are looking at, and before this they could not.\n *\n * Distinct from `Tabs`, which switches PANELS and owns a tabpanel relationship.\n * A toggle group changes a value.\n *\n * @example\n * <ToggleGroup type=\"single\" defaultValue=\"grid\" aria-label=\"Layout\">\n *   <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\n *   <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\n * </ToggleGroup>\n */\nexport function ToggleGroup({ className, children, ...props }: ToggleGroupProps) {\n  // Tracked here rather than left to Radix alone, because the sliding pill has\n  // to know which item to measure — and an uncontrolled group never tells\n  // anyone what it picked.\n  const single = props.type === 'single'\n  const [uncontrolled, setUncontrolled] = useState<string>(\n    (single ? (props.defaultValue as string | undefined) : undefined) ?? '',\n  )\n  const value = single ? ((props.value as string | undefined) ?? uncontrolled) : null\n  const [ref, indicator] = useSelectionIndicator<HTMLDivElement>(value)\n\n  const root = (\n    <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={cn(\n        // `w-fit` as well as `inline-flex`: a flex or grid parent stretches its\n        // children to the track by default, and `inline-flex` does not opt out\n        // of that. Without it the strip grew to whatever the widest sibling was\n        // — a label above it — and left dead space after the last segment.\n        'relative inline-flex w-fit items-center gap-1 rounded-(--radius-pill) border border-(--rule-2) p-1',\n        className,\n      )}\n      {...props}\n      onValueChange={(next: never) => {\n        if (single) setUncontrolled((next as string) ?? '')\n        ;(props.onValueChange as ((v: never) => void) | undefined)?.(next)\n      }}\n    >\n      {single && indicator.ready && (\n        <span\n          aria-hidden\n          data-m22-animated\n          className=\"absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n          style={{\n            transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n            width: indicator.width,\n            height: indicator.height,\n            insetInlineStart: 0,\n            top: 0,\n          }}\n        />\n      )}\n      {children}\n    </ToggleGroupPrimitive.Root>\n  )\n\n  return single ? (\n    <SingleValueContext.Provider value={value}>{root}</SingleValueContext.Provider>\n  ) : (\n    root\n  )\n}\n\nexport type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>\n\n/**\n * One segment.\n *\n * In a single-value group the item draws no background of its own — the\n * travelling pill behind it does — so it only changes ink. In a multiple-value\n * group it fills, because there is nothing travelling.\n */\nexport function ToggleGroupItem({ className, value, ...props }: ToggleGroupItemProps) {\n  const selected = useContext(SingleValueContext)\n  const isSingle = selected !== null\n  const active = isSingle && selected === value\n\n  return (\n    <ToggleGroupPrimitive.Item\n      value={value}\n      data-indicator-active={active ? 'true' : undefined}\n      className={cn(\n        'relative z-1 inline-flex min-h-(--control-h-sm) items-center justify-center gap-2 rounded-(--radius-pill) px-3.5 text-sm transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n        isSingle\n          ? active\n            ? 'text-(--accent-foreground)'\n            : 'text-(--ink-3-aa) hover:text-(--ink)'\n          : 'text-(--ink-3-aa) hover:text-(--ink) data-[state=on]:bg-(--accent) data-[state=on]:text-(--accent-foreground)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport default ToggleGroup\n"],"mappings":";AAgDI,SAiBI,KAjBJ;AA9CJ,YAAY,0BAA0B;AACtC,SAAS,eAAe,YAAY,gBAAqC;AACzE,SAAS,UAAU;AACnB,SAAS,6BAA6B;AAKtC,MAAM,qBAAqB,cAA6B,IAAI;AA0BrD,SAAS,YAAY,EAAE,WAAW,UAAU,GAAG,MAAM,GAAqB;AAI/E,QAAM,SAAS,MAAM,SAAS;AAC9B,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,KACrC,SAAU,MAAM,eAAsC,WAAc;AAAA,EACvE;AACA,QAAM,QAAQ,SAAW,MAAM,SAAgC,eAAgB;AAC/E,QAAM,CAAC,KAAK,SAAS,IAAI,sBAAsC,KAAK;AAEpE,QAAM,OACJ;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MACJ,eAAe,CAAC,SAAgB;AAC9B,YAAI,OAAQ,iBAAiB,QAAmB,EAAE;AACjD,QAAC,MAAM,gBAAqD,IAAI;AAAA,MACnE;AAAA,MAEC;AAAA,kBAAU,UAAU,SACnB;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,qBAAiB;AAAA,YACjB,WAAU;AAAA,YACV,OAAO;AAAA,cACL,WAAW,aAAa,UAAU,MAAM,OAAO,UAAU,GAAG;AAAA,cAC5D,OAAO,UAAU;AAAA,cACjB,QAAQ,UAAU;AAAA,cAClB,kBAAkB;AAAA,cAClB,KAAK;AAAA,YACP;AAAA;AAAA,QACF;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAGF,SAAO,SACL,oBAAC,mBAAmB,UAAnB,EAA4B,OAAe,gBAAK,IAEjD;AAEJ;AAWO,SAAS,gBAAgB,EAAE,WAAW,OAAO,GAAG,MAAM,GAAyB;AACpF,QAAM,WAAW,WAAW,kBAAkB;AAC9C,QAAM,WAAW,aAAa;AAC9B,QAAM,SAAS,YAAY,aAAa;AAExC,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,yBAAuB,SAAS,SAAS;AAAA,MACzC,WAAW;AAAA,QACT;AAAA,QACA,WACI,SACE,+BACA,yCACF;AAAA,QACJ;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["'use client'\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { createContext, useContext, useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useFieldControl } from '../Field/field-control'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root>\n\n/** Lets an item know whether the group tracks one value or several. */\nconst SingleValueContext = createContext<string | null>(null)\n\n/**\n * A segmented control: several options, one strip.\n *\n * `type=\"single\"` is a choice — Radix gives it radio semantics, and it is the\n * right shape for a view switcher or a density setting. `type=\"multiple\"` is a\n * set of independent toggles, which is a different thing announced differently;\n * choosing the wrong one is how a \"filter by tag\" control ends up telling a\n * screen reader that picking one tag unpicks the others.\n *\n * The two look different on purpose. A single-value strip moves ONE filled pill\n * between its options, so the eye follows a thing travelling; a multiple-value\n * strip fills each pressed option separately, because there is no single\n * selection to travel. Two people looking at a screenshot should be able to\n * tell which kind they are looking at, and before this they could not.\n *\n * Distinct from `Tabs`, which switches PANELS and owns a tabpanel relationship.\n * A toggle group changes a value.\n *\n * Inside a `Field` the strip takes its name from that label, by pointing back at\n * it — the root is a div, and `<label for>` does not bind to one, so the words\n * above it do not click through. Standing alone it still needs its own\n * `aria-label`.\n *\n * @example\n * <ToggleGroup type=\"single\" defaultValue=\"grid\" aria-label=\"Layout\">\n *   <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\n *   <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\n * </ToggleGroup>\n */\nexport function ToggleGroup({\n  className,\n  children,\n  'aria-required': ariaRequired,\n  ...props\n}: ToggleGroupProps) {\n  const field = useFieldControl()\n  const named = props['aria-label'] != null || props['aria-labelledby'] != null\n\n  // Tracked here rather than left to Radix alone, because the sliding pill has\n  // to know which item to measure — and an uncontrolled group never tells\n  // anyone what it picked.\n  const single = props.type === 'single'\n  const [uncontrolled, setUncontrolled] = useState<string>(\n    (single ? (props.defaultValue as string | undefined) : undefined) ?? '',\n  )\n  const value = single ? ((props.value as string | undefined) ?? uncontrolled) : null\n  const [ref, indicator] = useSelectionIndicator<HTMLDivElement>(value)\n\n  const root = (\n    <ToggleGroupPrimitive.Root\n      ref={ref}\n      aria-labelledby={named ? undefined : field?.labelId}\n      // Only on the single-value strip. Radix gives that one role=\"radiogroup\",\n      // which takes aria-required; a multiple-value strip is a role=\"toolbar\",\n      // where the attribute is not allowed at all — so a Field's `required`\n      // reaches one shape of this control and not the other.\n      aria-required={props.type === 'single' ? ariaRequired : undefined}\n      className={cn(\n        // `w-fit` as well as `inline-flex`: a flex or grid parent stretches its\n        // children to the track by default, and `inline-flex` does not opt out\n        // of that. Without it the strip grew to whatever the widest sibling was\n        // — a label above it — and left dead space after the last segment.\n        'relative inline-flex w-fit items-center gap-1 rounded-(--radius-pill) border border-(--rule-2) p-1',\n        className,\n      )}\n      {...props}\n      onValueChange={(next: never) => {\n        if (single) setUncontrolled((next as string) ?? '')\n        ;(props.onValueChange as ((v: never) => void) | undefined)?.(next)\n      }}\n    >\n      {single && indicator.ready && (\n        <span\n          aria-hidden\n          data-m22-animated\n          className=\"absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n          style={{\n            transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n            width: indicator.width,\n            height: indicator.height,\n            insetInlineStart: 0,\n            top: 0,\n          }}\n        />\n      )}\n      {children}\n    </ToggleGroupPrimitive.Root>\n  )\n\n  return single ? (\n    <SingleValueContext.Provider value={value}>{root}</SingleValueContext.Provider>\n  ) : (\n    root\n  )\n}\n\nexport type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>\n\n/**\n * One segment.\n *\n * In a single-value group the item draws no background of its own — the\n * travelling pill behind it does — so it only changes ink. In a multiple-value\n * group it fills, because there is nothing travelling.\n */\nexport function ToggleGroupItem({ className, value, ...props }: ToggleGroupItemProps) {\n  const selected = useContext(SingleValueContext)\n  const isSingle = selected !== null\n  const active = isSingle && selected === value\n\n  return (\n    <ToggleGroupPrimitive.Item\n      value={value}\n      data-indicator-active={active ? 'true' : undefined}\n      className={cn(\n        'relative z-1 inline-flex min-h-(--control-h-sm) items-center justify-center gap-2 rounded-(--radius-pill) px-3.5 text-sm transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n        isSingle\n          ? active\n            ? 'text-(--accent-foreground)'\n            : 'text-(--ink-3-aa) hover:text-(--ink)'\n          : 'text-(--ink-3-aa) hover:text-(--ink) data-[state=on]:bg-(--accent) data-[state=on]:text-(--accent-foreground)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport default ToggleGroup\n"],"mappings":";AA8DI,SAuBI,KAvBJ;AA5DJ,YAAY,0BAA0B;AACtC,SAAS,eAAe,YAAY,gBAAqC;AACzE,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AAKtC,MAAM,qBAAqB,cAA6B,IAAI;AA+BrD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,GAAG;AACL,GAAqB;AACnB,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,QAAQ,MAAM,YAAY,KAAK,QAAQ,MAAM,iBAAiB,KAAK;AAKzE,QAAM,SAAS,MAAM,SAAS;AAC9B,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,KACrC,SAAU,MAAM,eAAsC,WAAc;AAAA,EACvE;AACA,QAAM,QAAQ,SAAW,MAAM,SAAgC,eAAgB;AAC/E,QAAM,CAAC,KAAK,SAAS,IAAI,sBAAsC,KAAK;AAEpE,QAAM,OACJ;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,mBAAiB,QAAQ,SAAY,OAAO;AAAA,MAK5C,iBAAe,MAAM,SAAS,WAAW,eAAe;AAAA,MACxD,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MACJ,eAAe,CAAC,SAAgB;AAC9B,YAAI,OAAQ,iBAAiB,QAAmB,EAAE;AACjD,QAAC,MAAM,gBAAqD,IAAI;AAAA,MACnE;AAAA,MAEC;AAAA,kBAAU,UAAU,SACnB;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,qBAAiB;AAAA,YACjB,WAAU;AAAA,YACV,OAAO;AAAA,cACL,WAAW,aAAa,UAAU,MAAM,OAAO,UAAU,GAAG;AAAA,cAC5D,OAAO,UAAU;AAAA,cACjB,QAAQ,UAAU;AAAA,cAClB,kBAAkB;AAAA,cAClB,KAAK;AAAA,YACP;AAAA;AAAA,QACF;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAGF,SAAO,SACL,oBAAC,mBAAmB,UAAnB,EAA4B,OAAe,gBAAK,IAEjD;AAEJ;AAWO,SAAS,gBAAgB,EAAE,WAAW,OAAO,GAAG,MAAM,GAAyB;AACpF,QAAM,WAAW,WAAW,kBAAkB;AAC9C,QAAM,WAAW,aAAa;AAC9B,QAAM,SAAS,YAAY,aAAa;AAExC,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,yBAAuB,SAAS,SAAS;AAAA,MACzC,WAAW;AAAA,QACT;AAAA,QACA,WACI,SACE,+BACA,yCACF;AAAA,QACJ;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,55 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Which edge the bar sticks to, or neither.
+ *
+ * `bottom` is the form footer — the actions stay in reach while a long form
+ * scrolls under them. `top` is the filter bar over a list. `static` is the same
+ * bar with no stickiness, for a short page or a bar inside a dialog that is
+ * already the height of its content.
+ */
+type ToolbarPosition = 'bottom' | 'top' | 'static';
+type ToolbarAlign = 'start' | 'center' | 'end' | 'between';
+interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Names the bar for a screen reader — "Form actions", "List filters".
+     * Required, because a group with no name is announced as "group" and a page
+     * with two of them is a page with two identical announcements.
+     */
+    label: string;
+    /** Which edge the bar sticks to. See {@link ToolbarPosition}. */
+    position?: ToolbarPosition;
+    /** Where the contents sit along the inline axis. */
+    align?: ToolbarAlign;
+    children: ReactNode;
+}
+/**
+ * The bar of actions at the edge of a working surface.
+ *
+ * Two page templates built the same thing independently — a sticky strip on
+ * `--paper` with a rule along the edge it sticks to — which is the signal that
+ * it belongs here rather than in each of them.
+ *
+ * The ground is opaque `--paper` and not a blur. Content scrolls UNDER this
+ * bar, so anything translucent puts the last row of a table behind the submit
+ * button and makes both unreadable; `FloatingIconButton` blurs because it
+ * floats over a gap, which is a different problem.
+ *
+ * It is not `role="toolbar"`. That role's contract is a single tab stop with
+ * arrow keys moving between the controls inside it, and this implements no such
+ * thing — declaring the role without the behaviour tells a screen-reader user
+ * to press arrow keys that do nothing. It is a named `group`, so the controls
+ * keep their own places in the tab order and the bar is still announced.
+ *
+ * @example
+ * <Toolbar label="Form actions">
+ *   <Button variant="secondary">Cancel</Button>
+ *   <Button type="submit">Save changes</Button>
+ * </Toolbar>
+ * @example
+ * <Toolbar label="List filters" position="top" align="between">…</Toolbar>
+ */
+declare function Toolbar({ label, position, align, className, children, ...rest }: ToolbarProps): react.JSX.Element;
+
+export { Toolbar, type ToolbarAlign, type ToolbarPosition, type ToolbarProps, Toolbar as default };

package/dist/components/Toolbar/Toolbar.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const POSITION = {
+  bottom: "sticky bottom-0 z-(--z-sticky) border-t border-(--rule-2)",
+  top: "sticky top-0 z-(--z-sticky) border-b border-(--rule-2)",
+  static: "border-t border-(--rule-2)"
+};
+const ALIGN = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+};
+function Toolbar({
+  label,
+  position = "bottom",
+  align = "end",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": label,
+      className: cn(
+        "flex flex-wrap items-center gap-3 bg-(--paper) px-4 py-3",
+        POSITION[position],
+        ALIGN[align],
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+var Toolbar_default = Toolbar;
+export {
+  Toolbar,
+  Toolbar_default as default
+};
+//# sourceMappingURL=Toolbar.js.map

package/dist/components/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * Which edge the bar sticks to, or neither.\n *\n * `bottom` is the form footer — the actions stay in reach while a long form\n * scrolls under them. `top` is the filter bar over a list. `static` is the same\n * bar with no stickiness, for a short page or a bar inside a dialog that is\n * already the height of its content.\n */\nexport type ToolbarPosition = 'bottom' | 'top' | 'static'\n\nexport type ToolbarAlign = 'start' | 'center' | 'end' | 'between'\n\nexport interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Names the bar for a screen reader — \"Form actions\", \"List filters\".\n   * Required, because a group with no name is announced as \"group\" and a page\n   * with two of them is a page with two identical announcements.\n   */\n  label: string\n  /** Which edge the bar sticks to. See {@link ToolbarPosition}. */\n  position?: ToolbarPosition\n  /** Where the contents sit along the inline axis. */\n  align?: ToolbarAlign\n  children: ReactNode\n}\n\nconst POSITION: Record<ToolbarPosition, string> = {\n  bottom: 'sticky bottom-0 z-(--z-sticky) border-t border-(--rule-2)',\n  top: 'sticky top-0 z-(--z-sticky) border-b border-(--rule-2)',\n  static: 'border-t border-(--rule-2)',\n}\n\nconst ALIGN: Record<ToolbarAlign, string> = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n}\n\n/**\n * The bar of actions at the edge of a working surface.\n *\n * Two page templates built the same thing independently — a sticky strip on\n * `--paper` with a rule along the edge it sticks to — which is the signal that\n * it belongs here rather than in each of them.\n *\n * The ground is opaque `--paper` and not a blur. Content scrolls UNDER this\n * bar, so anything translucent puts the last row of a table behind the submit\n * button and makes both unreadable; `FloatingIconButton` blurs because it\n * floats over a gap, which is a different problem.\n *\n * It is not `role=\"toolbar\"`. That role's contract is a single tab stop with\n * arrow keys moving between the controls inside it, and this implements no such\n * thing — declaring the role without the behaviour tells a screen-reader user\n * to press arrow keys that do nothing. It is a named `group`, so the controls\n * keep their own places in the tab order and the bar is still announced.\n *\n * @example\n * <Toolbar label=\"Form actions\">\n *   <Button variant=\"secondary\">Cancel</Button>\n *   <Button type=\"submit\">Save changes</Button>\n * </Toolbar>\n * @example\n * <Toolbar label=\"List filters\" position=\"top\" align=\"between\">…</Toolbar>\n */\nexport function Toolbar({\n  label,\n  position = 'bottom',\n  align = 'end',\n  className,\n  children,\n  ...rest\n}: ToolbarProps) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={label}\n      className={cn(\n        'flex flex-wrap items-center gap-3 bg-(--paper) px-4 py-3',\n        POSITION[position],\n        ALIGN[align],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport default Toolbar\n"],"mappings":"AA6EI;AA5EJ,SAAS,UAAU;AA4BnB,MAAM,WAA4C;AAAA,EAChD,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,QAAQ;AACV;AAEA,MAAM,QAAsC;AAAA,EAC1C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AACX;AA4BO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,SAAS,QAAQ;AAAA,QACjB,MAAM,KAAK;AAAA,QACX;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/diagrams/ArchitectureFigure/ArchitectureFigure.d.ts

@@ -0,0 +1,55 @@
+import * as react from 'react';
+import { FigureChrome } from '../lib/frame.js';
+import { ArchitectureSpec } from '../spec.js';
+import '../lib/geometry.js';
+
+interface ArchitectureFigureProps extends FigureChrome {
+    spec: ArchitectureSpec;
+}
+/**
+ * A component map: services, datastores, boundaries, and what talks to what.
+ *
+ * Takes the same JSON an archify `architecture` specification carries —
+ * `components`, `boundaries`, `connections` — and draws it in this system's own
+ * terms: paper plates on a hairline, one reversed plate for the component the
+ * diagram is about, and seven drawn sigils where archify uses seven hues.
+ *
+ * IT RENDERS ON A SERVER because every position is already in the
+ * specification. A component gives a `row` and a `col` into a grid whose cell
+ * size is either declared or defaulted, or it gives an absolute `pos` — nothing
+ * here is solved for, relaxed, or measured. So the markup is a pure function of
+ * the input, it is identical on the server and in the browser, and there is no
+ * layout shift on hydration because there is no layout to do.
+ *
+ * A component that declares NEITHER flows: it takes the next free cell in
+ * declaration order, wrapping at `layout.cols`. That is still arithmetic on
+ * numbers the specification carries rather than a solver — and the alternative
+ * was every unplaced component defaulting to row 0, column 0 and stacking into
+ * one plate.
+ *
+ * BOUNDARIES ARE DRAWN FIRST, AND DRAWN DIFFERENTLY. A `region` is where
+ * something RUNS — a VPC, a zone, a cluster — and is a solid frame. A
+ * `security-group` is what may REACH it, and is dashed. That is not decoration:
+ * an infrastructure diagram is very often read for exactly one of those two
+ * questions, and a reader should be able to tell which line answers which
+ * without reading either label.
+ *
+ * @example
+ * <ArchitectureFigure
+ *   spec={{
+ *     meta: { title: 'Request path' },
+ *     components: [
+ *       { id: 'cdn', type: 'cloud', label: 'CloudFront', row: 0, col: 0 },
+ *       { id: 'api', type: 'backend', label: 'FastAPI', sublabel: 'ECS', row: 0, col: 1 },
+ *       { id: 'db', type: 'database', label: 'Postgres', row: 0, col: 2 },
+ *     ],
+ *     connections: [
+ *       { from: 'cdn', to: 'api', label: 'HTTPS' },
+ *       { from: 'api', to: 'db', label: 'SQL' },
+ *     ],
+ *   }}
+ * />
+ */
+declare function ArchitectureFigure({ spec, className, legend, cards, heading, activeIds, onSelectNode, }: ArchitectureFigureProps): react.JSX.Element;
+
+export { ArchitectureFigure, type ArchitectureFigureProps, ArchitectureFigure as default };