@misoto22/folio 0.0.0 → 0.16.0

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

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { ToasterProps } from 'sonner';
+export { toast } from 'sonner';
+
+/**
+ * Transient confirmations, mounted once near the app root.
+ *
+ * A toast is for something that succeeded and needs no response. Anything the
+ * 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.
+ *
+ * @example
+ * // app root
+ * <Toaster />
+ * // anywhere
+ * toast.success('Saved')
+ */
+declare function Toaster({ position, closeButton, richColors, theme, style, ...rest }: ToasterProps): react.JSX.Element;
+
+export { Toaster, Toaster as default };

package/dist/components/Toast/Toast.js

@@ -0,0 +1,64 @@
+"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)"
+};
+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,
+      theme: theme ?? mode,
+      style: { ...TOKEN_STYLE, ...richColors ? RICH_STYLE : null, ...style },
+      ...rest
+    }
+  );
+}
+var Toast_default = Toaster;
+export {
+  Toaster,
+  Toast_default as default,
+  toast
+};
+//# sourceMappingURL=Toast.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,46 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+
+type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root>;
+/**
+ * A segmented control: several options, one strip.
+ *
+ * `type="single"` is a choice — Radix gives it radio semantics, and it is the
+ * right shape for a view switcher or a density setting. `type="multiple"` is a
+ * set of independent toggles, which is a different thing announced differently;
+ * choosing the wrong one is how a "filter by tag" control ends up telling a
+ * screen reader that picking one tag unpicks the others.
+ *
+ * The two look different on purpose. A single-value strip moves ONE filled pill
+ * between its options, so the eye follows a thing travelling; a multiple-value
+ * strip fills each pressed option separately, because there is no single
+ * selection to travel. Two people looking at a screenshot should be able to
+ * tell which kind they are looking at, and before this they could not.
+ *
+ * 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, 'aria-required': ariaRequired, ...props }: ToggleGroupProps): react.JSX.Element;
+type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>;
+/**
+ * One segment.
+ *
+ * In a single-value group the item draws no background of its own — the
+ * travelling pill behind it does — so it only changes ink. In a multiple-value
+ * group it fills, because there is nothing travelling.
+ */
+declare function ToggleGroupItem({ className, value, ...props }: ToggleGroupItemProps): react.JSX.Element;
+
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, ToggleGroup as default };

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,88 @@
+"use client";
+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,
+  "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) ?? ""
+  );
+  const value = single ? props.value ?? uncontrolled : null;
+  const [ref, indicator] = useSelectionIndicator(value);
+  const root = /* @__PURE__ */ jsxs(
+    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
+        // of that. Without it the strip grew to whatever the widest sibling was
+        // — a label above it — and left dead space after the last segment.
+        "relative inline-flex w-fit items-center gap-1 rounded-(--radius-pill) border border-(--rule-2) p-1",
+        className
+      ),
+      ...props,
+      onValueChange: (next) => {
+        if (single) setUncontrolled(next ?? "");
+        props.onValueChange?.(next);
+      },
+      children: [
+        single && indicator.ready && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-folio-animated": true,
+            className: "absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none",
+            style: {
+              transform: `translate(${indicator.offset}px, ${indicator.top}px)`,
+              width: indicator.width,
+              height: indicator.height,
+              insetInlineStart: 0,
+              top: 0
+            }
+          }
+        ),
+        children
+      ]
+    }
+  );
+  return single ? /* @__PURE__ */ jsx(SingleValueContext.Provider, { value, children: root }) : root;
+}
+function ToggleGroupItem({ className, value, ...props }) {
+  const selected = useContext(SingleValueContext);
+  const isSingle = selected !== null;
+  const active = isSingle && selected === value;
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      value,
+      "data-indicator-active": active ? "true" : void 0,
+      className: cn(
+        "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",
+        isSingle ? active ? "text-(--accent-foreground)" : "text-(--ink-3-aa) hover:text-(--ink)" : "text-(--ink-3-aa) hover:text-(--ink) data-[state=on]:bg-(--accent) data-[state=on]:text-(--accent-foreground)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var ToggleGroup_default = ToggleGroup;
+export {
+  ToggleGroup,
+  ToggleGroupItem,
+  ToggleGroup_default as default
+};
+//# sourceMappingURL=ToggleGroup.js.map

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

@@ -0,0 +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 { 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-folio-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,uBAAmB;AAAA,YACnB,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/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+/**
+ * Wrap the app — or the smallest subtree that has tooltips — once. Radix needs
+ * it to share the open/close timing between neighbouring triggers, which is
+ * what stops a row of icon buttons flashing a tooltip per hover.
+ */
+declare const TooltipProvider: react.FC<TooltipPrimitive.TooltipProviderProps>;
+interface TooltipProps extends Pick<ComponentProps<typeof TooltipPrimitive.Root>, 'open' | 'defaultOpen' | 'onOpenChange' | 'delayDuration'> {
+    /** The element the tooltip describes. Must be focusable. */
+    children: ReactNode;
+    /**
+     * The tip. Keep it to a phrase — a tooltip is unreachable on touch and
+     * invisible to a reader who is scanning, so anything a user NEEDS belongs on
+     * the page instead.
+     */
+    content: ReactNode;
+    side?: ComponentProps<typeof TooltipPrimitive.Content>['side'];
+    sideOffset?: number;
+}
+/**
+ * A short label on hover and on focus.
+ *
+ * `asChild` on the trigger by design: the tooltip must not add a wrapper that
+ * swallows the trigger's own focus ring or breaks a flex row. It also means the
+ * child has to be focusable — a `<div>` trigger gets no keyboard tooltip, which
+ * is the failure this API shape makes obvious rather than silent.
+ *
+ * Not a replacement for an accessible name. An icon-only button still needs its
+ * own `aria-label`; the tooltip repeats that name for sighted pointer users.
+ *
+ * @example
+ * <TooltipProvider>
+ *   <Tooltip content="Copy to clipboard">
+ *     <Button iconOnly aria-label="Copy"><Copy size={16} /></Button>
+ *   </Tooltip>
+ * </TooltipProvider>
+ */
+declare function Tooltip({ children, content, side, sideOffset, ...root }: TooltipProps): react.JSX.Element;
+
+export { Tooltip, type TooltipProps, TooltipProvider, Tooltip as default };

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../lib/cn.js";
+import { useOverlayContainer } from "../../lib/overlay-container.js";
+const TooltipProvider = TooltipPrimitive.Provider;
+function Tooltip({
+  children,
+  content,
+  side = "top",
+  sideOffset = 6,
+  ...root
+}) {
+  const container = useOverlayContainer();
+  return /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { ...root, children: [
+    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
+      TooltipPrimitive.Content,
+      {
+        collisionBoundary: container ?? void 0,
+        collisionPadding: 8,
+        side,
+        sideOffset,
+        "data-folio-animated": true,
+        className: cn(
+          "z-(--z-toast) max-w-64 rounded-(--radius) bg-(--feature-surface) px-2.5 py-1.5 font-mono text-[11px] leading-snug text-(--on-feature)",
+          "data-[state=delayed-open]:animate-[folio-fade-in_var(--duration-fast)_var(--ease)]"
+        ),
+        children: content
+      }
+    ) })
+  ] });
+}
+var Tooltip_default = Tooltip;
+export {
+  Tooltip,
+  TooltipProvider,
+  Tooltip_default as default
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client'\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/**\n * Wrap the app — or the smallest subtree that has tooltips — once. Radix needs\n * it to share the open/close timing between neighbouring triggers, which is\n * what stops a row of icon buttons flashing a tooltip per hover.\n */\nexport const TooltipProvider = TooltipPrimitive.Provider\n\nexport interface TooltipProps\n  extends Pick<ComponentProps<typeof TooltipPrimitive.Root>, 'open' | 'defaultOpen' | 'onOpenChange' | 'delayDuration'> {\n  /** The element the tooltip describes. Must be focusable. */\n  children: ReactNode\n  /**\n   * The tip. Keep it to a phrase — a tooltip is unreachable on touch and\n   * invisible to a reader who is scanning, so anything a user NEEDS belongs on\n   * the page instead.\n   */\n  content: ReactNode\n  side?: ComponentProps<typeof TooltipPrimitive.Content>['side']\n  sideOffset?: number\n}\n\n/**\n * A short label on hover and on focus.\n *\n * `asChild` on the trigger by design: the tooltip must not add a wrapper that\n * swallows the trigger's own focus ring or breaks a flex row. It also means the\n * child has to be focusable — a `<div>` trigger gets no keyboard tooltip, which\n * is the failure this API shape makes obvious rather than silent.\n *\n * Not a replacement for an accessible name. An icon-only button still needs its\n * own `aria-label`; the tooltip repeats that name for sighted pointer users.\n *\n * @example\n * <TooltipProvider>\n *   <Tooltip content=\"Copy to clipboard\">\n *     <Button iconOnly aria-label=\"Copy\"><Copy size={16} /></Button>\n *   </Tooltip>\n * </TooltipProvider>\n */\nexport function Tooltip({\n  children,\n  content,\n  side = 'top',\n  sideOffset = 6,\n  ...root\n}: TooltipProps) {\n  const container = useOverlayContainer()\n\n  return (\n    <TooltipPrimitive.Root {...root}>\n      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n      <TooltipPrimitive.Portal container={container ?? undefined}>\n        <TooltipPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n          side={side}\n          sideOffset={sideOffset}\n          data-folio-animated\n          className={cn(\n            'z-(--z-toast) max-w-64 rounded-(--radius) bg-(--feature-surface) px-2.5 py-1.5 font-mono text-[11px] leading-snug text-(--on-feature)',\n            'data-[state=delayed-open]:animate-[folio-fade-in_var(--duration-fast)_var(--ease)]',\n          )}\n        >\n          {content}\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    </TooltipPrimitive.Root>\n  )\n}\n\nexport default Tooltip\n"],"mappings":";AAwDI,SACE,KADF;AAtDJ,YAAY,sBAAsB;AAElC,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAO7B,MAAM,kBAAkB,iBAAiB;AAkCzC,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,GAAG;AACL,GAAiB;AACf,QAAM,YAAY,oBAAoB;AAEtC,SACE,qBAAC,iBAAiB,MAAjB,EAAuB,GAAG,MACzB;AAAA,wBAAC,iBAAiB,SAAjB,EAAyB,SAAO,MAAE,UAAS;AAAA,IAC5C,oBAAC,iBAAiB,QAAjB,EAAwB,WAAW,aAAa,QAC/C;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACD,mBAAmB,aAAa;AAAA,QAChC,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA,uBAAmB;AAAA,QACnB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH,GACF;AAAA,KACF;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 };