altitude-design 0.1.2 → 0.2.0

package/dist/fonts.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400..700&family=JetBrains+Mono:wght@400;500&display=swap');

package/dist/index.cjs

@@ -56,6 +56,7 @@ __export(index_exports, {
   Drilldown: () => Drilldown,
   DropZone: () => DropZone,
   DropdownMenu: () => DropdownMenu,
+  EmptyState: () => EmptyState,
   Field: () => Field,
   HoldButton: () => HoldButton,
   HoverCard: () => HoverCard,
@@ -98,6 +99,7 @@ __export(index_exports, {
   Textarea: () => Textarea,
   Toaster: () => Toaster,
   Tooltip: () => Tooltip,
+  checkScheme: () => checkScheme,
   commandScore: () => commandScore,
   contrast: () => contrast,
   deriveAccent: () => deriveAccent,
@@ -340,6 +342,63 @@ function deriveAccent(accent, surfaces) {
     "--accent-soft": rgbToHex(mix(hexToRgb(ground), a, dark ? 0.2 : 0.13))
   };
 }
+var SURFACES = ["surface-trench", "surface-well", "surface-ground", "surface-raised", "surface-lifted", "surface-floating", "surface-overlay", "surface-modal"];
+var PAIRS = [];
+for (const t of ["ink", "ink-muted", "accent-ink", "positive", "caution", "critical"]) for (const g of SURFACES) PAIRS.push([t, g, 4.5]);
+for (const [t, g] of [
+  ["ink", "accent-soft"],
+  ["accent-ink", "accent-soft"],
+  ["positive", "positive-soft"],
+  ["caution", "caution-soft"],
+  ["critical", "critical-soft"],
+  ["ink", "critical-soft"],
+  ["ink", "positive-soft"],
+  ["ink", "caution-soft"],
+  ["ink-muted", "accent-soft"],
+  ["on-accent", "accent"],
+  ["on-critical", "critical"]
+]) PAIRS.push([t, g, 4.5]);
+for (const g of ["surface-ground", "surface-well", "surface-raised", "surface-trench"]) PAIRS.push(["line-control", g, 3], ["accent", g, 3]);
+for (const p of ["presence-1", "presence-2", "presence-3"]) {
+  PAIRS.push(["on-presence", p, 4.5]);
+  for (const g of SURFACES) PAIRS.push([p, g, 3]);
+}
+var isHex = (v) => /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(v);
+function checkScheme(colors) {
+  const cs = typeof Element !== "undefined" && colors instanceof Element ? getComputedStyle(colors) : null;
+  const get = (n) => (cs ? cs.getPropertyValue("--" + n) : colors[n] ?? "").trim();
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const ok = (n) => {
+    const v = get(n);
+    if (isHex(v)) return true;
+    if (!seen.has(n)) {
+      seen.add(n);
+      out.push(v ? `${n} is ${v}: use a 3- or 6-digit hex colour so it can be checked.` : `${n} is missing.`);
+    }
+    return false;
+  };
+  const L = (n) => lum(hexToRgb(get(n)));
+  for (let i = 1; i < SURFACES.length; i++) {
+    const lo = SURFACES[i - 1], hi = SURFACES[i];
+    if (!ok(lo) || !ok(hi)) continue;
+    if (i <= 3 ? L(hi) <= L(lo) : L(hi) < L(lo)) out.push(`${hi} (${get(hi)}) must be ${i <= 3 ? "lighter than" : "at least as light as"} ${lo} (${get(lo)}).`);
+  }
+  for (const [t, g, min] of PAIRS) {
+    if (!ok(t) || !ok(g)) continue;
+    const r = contrast(get(t), get(g));
+    if (r < min) out.push(`${t} on ${g} is ${r.toFixed(2)}:1; it needs ${min}:1.`);
+  }
+  return out;
+}
+var SHADOW_OR_LINE = /^(trench|well|elev-\d|lip-top|lip-bottom|line)$/;
+function schemeCss(sel, tokens) {
+  const decl = (keep) => Object.entries(tokens).filter(([k, v]) => keep(k) && typeof v === "string" && /^[\w-]+$/.test(k) && !/[;{}<>]/.test(v)).map(([k, v]) => `--${k}: ${v};`).join(" ");
+  const plain = decl((k) => !SHADOW_OR_LINE.test(k)), soft = decl((k) => SHADOW_OR_LINE.test(k));
+  let css = plain ? `${sel} { ${plain} }` : "";
+  if (soft) css += `@media not (prefers-contrast: more) { ${sel}:not([data-contrast="more"], [data-contrast="more"] *) { ${soft} } }`;
+  return css;
+}
 var AltitudeContext = React.createContext(null);
 var useAltitude = () => React.useContext(AltitudeContext);
 function AltitudeProvider({ scheme, accent, motion = "system", contrast: contrast2 = "system", recede = true, approach = true, className, style, children, ...rest }) {
@@ -347,6 +406,18 @@ function AltitudeProvider({ scheme, accent, motion = "system", contrast: contras
   const [host, setHost] = React.useState(null);
   const [layers, setLayers] = React.useState(0);
   const [accentVars, setAccentVars] = React.useState(null);
+  const custom = scheme && typeof scheme === "object" ? scheme : null;
+  const schemeKey = custom ? JSON.stringify(custom) : scheme;
+  const scope = React.useId();
+  const schemeSel = `.alt-root[data-scheme-id="${scope}"]`;
+  const warned = React.useRef("");
+  React.useEffect(() => {
+    if (!custom || !rootRef.current || warned.current === schemeKey) return;
+    warned.current = schemeKey;
+    const issues = checkScheme(rootRef.current);
+    if (issues.length) console.warn(`Altitude: the scheme "${custom.name}" breaks ${issues.length} of the scheme invariants (see Theming.md):
+` + issues.join("\n"));
+  }, [schemeKey]);
   useIsoLayoutEffect(() => {
     if (!accent || !rootRef.current) {
       setAccentVars(null);
@@ -362,7 +433,7 @@ function AltitudeProvider({ scheme, accent, motion = "system", contrast: contras
     const mo = new MutationObserver(compute);
     mo.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
     return () => mo.disconnect();
-  }, [accent, scheme]);
+  }, [accent, schemeKey]);
   const api = React.useMemo(() => ({
     host,
     pushLayer: () => {
@@ -375,13 +446,16 @@ function AltitudeProvider({ scheme, accent, motion = "system", contrast: contras
     {
       ref: rootRef,
       className: cx("alt-root", className),
-      "data-theme": scheme,
+      "data-theme": custom ? custom.base ?? "daylight" : scheme,
+      "data-scheme": custom?.name,
+      "data-scheme-id": custom ? scope : void 0,
       "data-motion": motion === "system" ? void 0 : motion,
       "data-contrast": contrast2 === "more" ? "more" : void 0,
       "data-approach-off": approach ? void 0 : "",
       style: { ...accentVars, ...style },
       ...rest
     },
+    custom && /* @__PURE__ */ React.createElement("style", null, schemeCss(schemeSel, custom.tokens)),
     /* @__PURE__ */ React.createElement("div", { className: "alt-stage", "data-receded": recede && layers > 0 ? "" : void 0 }, children),
     /* @__PURE__ */ React.createElement("div", { className: "alt-layers", ref: setHost })
   ));
@@ -2058,6 +2132,8 @@ function CommandPalette({
   filter,
   empty,
   shortcut = "k",
+  query: queryProp,
+  defaultQuery = "",
   onQueryChange,
   closeOnSelect = true,
   hints = true,
@@ -2065,7 +2141,8 @@ function CommandPalette({
   ...rest
 }) {
   const [isOpen, set] = useControllable(open, defaultOpen, onOpenChange);
-  const [query, setQuery] = React7.useState("");
+  const [innerQuery, setInnerQuery] = React7.useState(defaultQuery);
+  const query = queryProp ?? innerQuery;
   const [active, setActive] = React7.useState(0);
   const [onset, setOnset] = React7.useState(true);
   const [said, setSaid] = React7.useState("");
@@ -2076,6 +2153,9 @@ function CommandPalette({
   const rowEls = React7.useRef(/* @__PURE__ */ new Map());
   const prevTops = React7.useRef(null);
   const byKeyboard = React7.useRef(false);
+  const caretPlaced = React7.useRef(false);
+  const seed = React7.useRef(defaultQuery);
+  seed.current = defaultQuery;
   const [panelEl, setPanelEl] = React7.useState(null);
   const panelRef = React7.useCallback((el) => {
     panel.current = el;
@@ -2102,11 +2182,15 @@ function CommandPalette({
   }, [shortcut, isOpen, set]);
   React7.useEffect(() => {
     if (isOpen) {
-      setQuery("");
+      setInnerQuery(seed.current);
       setActive(0);
       setOnset(true);
+      caretPlaced.current = false;
     }
   }, [isOpen]);
+  React7.useEffect(() => {
+    setActive(0);
+  }, [query]);
   const q = query.trim();
   const score = filter ?? itemScore;
   const view = items.map((g, gi) => {
@@ -2224,11 +2308,17 @@ function CommandPalette({
       leading: /* @__PURE__ */ React7.createElement(SearchIcon, null),
       trailing: /* @__PURE__ */ React7.createElement("span", { "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement(Kbd, null, "esc")),
       onChange: (e) => {
-        setQuery(e.target.value);
+        setInnerQuery(e.target.value);
         setActive(0);
         setOnset(false);
         onQueryChange?.(e.target.value);
       },
+      onFocus: (e) => {
+        if (caretPlaced.current) return;
+        caretPlaced.current = true;
+        const n2 = e.currentTarget.value.length;
+        e.currentTarget.setSelectionRange(n2, n2);
+      },
       onKeyDown: onInputKeyDown
     }
   )), /* @__PURE__ */ React7.createElement("div", { className: "alt-cmd-viewport", ref: viewport }, /* @__PURE__ */ React7.createElement("div", { ref: sizer }, /* @__PURE__ */ React7.createElement("div", { className: "alt-cmd-list", ref: list, role: "listbox", id: `${id}-list`, "aria-label": "Results" }, /* @__PURE__ */ React7.createElement(
@@ -2800,8 +2890,53 @@ function Stepper({ steps, current, onStepChange, orientation = "horizontal", cla
   })), /* @__PURE__ */ React9.createElement("span", { className: "alt-sr", "aria-live": "polite" }, said));
 }
 
-// project/components/src/collections.tsx
+// project/components/src/empty.tsx
 var React10 = __toESM(require("react"), 1);
+function EmptyState({
+  icon: icon2,
+  title,
+  description,
+  action,
+  secondary,
+  size = "md",
+  headingLevel = 3,
+  announce,
+  className,
+  children,
+  ...rest
+}) {
+  const id = React10.useId();
+  const H = `h${headingLevel}`;
+  const words = typeof announce === "string" ? announce : announce && typeof title === "string" ? title : "";
+  const [said, setSaid] = React10.useState("");
+  React10.useEffect(() => {
+    if (!words) {
+      setSaid("");
+      return;
+    }
+    const t = setTimeout(() => setSaid(words), 100);
+    return () => clearTimeout(t);
+  }, [words]);
+  return /* @__PURE__ */ React10.createElement(
+    "section",
+    {
+      className: cx("alt-empty", className),
+      "data-size": size,
+      "aria-labelledby": `${id}-t`,
+      "aria-describedby": description ? `${id}-d` : void 0,
+      ...rest
+    },
+    icon2 && /* @__PURE__ */ React10.createElement("span", { className: "alt-empty-icon", "aria-hidden": "true" }, icon2),
+    /* @__PURE__ */ React10.createElement(H, { id: `${id}-t`, className: "alt-empty-title" }, title),
+    description && /* @__PURE__ */ React10.createElement("p", { id: `${id}-d`, className: "alt-empty-desc" }, description),
+    children,
+    (action || secondary) && /* @__PURE__ */ React10.createElement("div", { className: "alt-empty-actions" }, action, secondary),
+    announce && /* @__PURE__ */ React10.createElement("span", { className: "alt-sr", "aria-live": "polite" }, said)
+  );
+}
+
+// project/components/src/collections.tsx
+var React11 = __toESM(require("react"), 1);
 var dropSnapshots = /* @__PURE__ */ new WeakMap();
 var ms2 = (cs, name, fallback) => parseFloat(cs.getPropertyValue(name)) || fallback;
 function pagePlace(el) {
@@ -2823,7 +2958,7 @@ function placeIn(el, host) {
   return { x: a.x - b.x, y: a.y - b.y };
 }
 function useCarry(host, selector, attr, durToken = "--dur-travel-3") {
-  const prev = React10.useRef(null);
+  const prev = React11.useRef(null);
   useIsoLayoutEffect(() => {
     const root = host.current;
     if (!root) return;
@@ -2852,12 +2987,12 @@ var moveItem = (arr, from, to) => {
   a.splice(to, 0, x);
   return a;
 };
-var Table = React10.forwardRef(function Table2({ maxHeight, underlay, className, children, ...rest }, ref) {
-  const wrap = React10.useRef(null);
-  const table = React10.useRef(null);
-  React10.useImperativeHandle(ref, () => table.current);
-  const [edges, setEdges] = React10.useState({ top: false, bottom: false });
-  const measure = React10.useCallback(() => {
+var Table = React11.forwardRef(function Table2({ maxHeight, underlay, className, children, ...rest }, ref) {
+  const wrap = React11.useRef(null);
+  const table = React11.useRef(null);
+  React11.useImperativeHandle(ref, () => table.current);
+  const [edges, setEdges] = React11.useState({ top: false, bottom: false });
+  const measure = React11.useCallback(() => {
     const el = wrap.current;
     if (!el) return;
     const top = el.scrollTop > 1, bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 1;
@@ -2878,7 +3013,7 @@ var Table = React10.forwardRef(function Table2({ maxHeight, underlay, className,
   }, [measure]);
   useCarry(table, "tbody > tr[data-row]", "data-row");
   const scrolls = maxHeight !== void 0;
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       ref: wrap,
@@ -2890,27 +3025,27 @@ var Table = React10.forwardRef(function Table2({ maxHeight, underlay, className,
       ...scrolls ? { tabIndex: 0, role: "region", "aria-label": rest["aria-label"] } : {}
     },
     underlay,
-    /* @__PURE__ */ React10.createElement("table", { ref: table, className: cx("alt-table", className), ...rest }, children)
+    /* @__PURE__ */ React11.createElement("table", { ref: table, className: cx("alt-table", className), ...rest }, children)
   );
 });
-var TableHeader = ({ className, ...p }) => /* @__PURE__ */ React10.createElement("thead", { className: cx("alt-table-head", className), ...p });
-var TableBody = React10.forwardRef(function TableBody2({ className, ...p }, ref) {
-  return /* @__PURE__ */ React10.createElement("tbody", { ref, className: cx("alt-table-body", className), ...p });
+var TableHeader = ({ className, ...p }) => /* @__PURE__ */ React11.createElement("thead", { className: cx("alt-table-head", className), ...p });
+var TableBody = React11.forwardRef(function TableBody2({ className, ...p }, ref) {
+  return /* @__PURE__ */ React11.createElement("tbody", { ref, className: cx("alt-table-body", className), ...p });
 });
-var TableFooter = ({ className, ...p }) => /* @__PURE__ */ React10.createElement("tfoot", { className: cx("alt-table-foot", className), ...p });
-var TableCaption = ({ className, ...p }) => /* @__PURE__ */ React10.createElement("caption", { className: cx("alt-table-caption", className), ...p });
-var TableRow = React10.forwardRef(function TableRow2({ rowId, selected, interactive, relevance, settle, held, className, style, ...rest }, ref) {
-  const [glow, setGlow] = React10.useState(void 0);
-  const [delay, setDelay] = React10.useState(0);
-  const first = React10.useRef(true);
-  React10.useEffect(() => {
+var TableFooter = ({ className, ...p }) => /* @__PURE__ */ React11.createElement("tfoot", { className: cx("alt-table-foot", className), ...p });
+var TableCaption = ({ className, ...p }) => /* @__PURE__ */ React11.createElement("caption", { className: cx("alt-table-caption", className), ...p });
+var TableRow = React11.forwardRef(function TableRow2({ rowId, selected, interactive, relevance, settle, held, className, style, ...rest }, ref) {
+  const [glow, setGlow] = React11.useState(void 0);
+  const [delay, setDelay] = React11.useState(0);
+  const first = React11.useRef(true);
+  React11.useEffect(() => {
     const wasFirst = first.current;
     first.current = false;
     if (settle === void 0 || settle === null || settle === false || wasFirst && settle !== true) return;
     setDelay(riseDelay());
     setGlow((g) => g === "a" ? "b" : "a");
   }, [settle]);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "tr",
     {
       ref,
@@ -2926,14 +3061,14 @@ var TableRow = React10.forwardRef(function TableRow2({ rowId, selected, interact
     }
   );
 });
-var SortIcon = () => /* @__PURE__ */ React10.createElement("svg", { className: "alt-table-sort-icon", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" }, /* @__PURE__ */ React10.createElement("path", { d: "M6 15l6-6 6 6" }));
+var SortIcon = () => /* @__PURE__ */ React11.createElement("svg", { className: "alt-table-sort-icon", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" }, /* @__PURE__ */ React11.createElement("path", { d: "M6 15l6-6 6 6" }));
 function TableHead({ align, sort, onSort, className, children, ...rest }) {
-  return /* @__PURE__ */ React10.createElement("th", { scope: "col", className: cx("alt-th", className), "data-align": align, "aria-sort": onSort ? sort ?? "none" : void 0, ...rest }, onSort ? /* @__PURE__ */ React10.createElement("button", { type: "button", className: "alt-table-sort", "data-sort": sort ?? "none", onClick: onSort }, children, /* @__PURE__ */ React10.createElement(SortIcon, null)) : children);
+  return /* @__PURE__ */ React11.createElement("th", { scope: "col", className: cx("alt-th", className), "data-align": align, "aria-sort": onSort ? sort ?? "none" : void 0, ...rest }, onSort ? /* @__PURE__ */ React11.createElement("button", { type: "button", className: "alt-table-sort", "data-sort": sort ?? "none", onClick: onSort }, children, /* @__PURE__ */ React11.createElement(SortIcon, null)) : children);
 }
 function TableCell({ align, className, ...rest }) {
-  return /* @__PURE__ */ React10.createElement("td", { className: cx("alt-td", className), "data-align": align, ...rest });
+  return /* @__PURE__ */ React11.createElement("td", { className: cx("alt-td", className), "data-align": align, ...rest });
 }
-var GripIcon = () => /* @__PURE__ */ React10.createElement("svg", { width: "12", height: "16", viewBox: "0 0 12 16", fill: "currentColor", "aria-hidden": "true" }, /* @__PURE__ */ React10.createElement("circle", { cx: "3", cy: "3", r: "1.3" }), /* @__PURE__ */ React10.createElement("circle", { cx: "9", cy: "3", r: "1.3" }), /* @__PURE__ */ React10.createElement("circle", { cx: "3", cy: "8", r: "1.3" }), /* @__PURE__ */ React10.createElement("circle", { cx: "9", cy: "8", r: "1.3" }), /* @__PURE__ */ React10.createElement("circle", { cx: "3", cy: "13", r: "1.3" }), /* @__PURE__ */ React10.createElement("circle", { cx: "9", cy: "13", r: "1.3" }));
+var GripIcon = () => /* @__PURE__ */ React11.createElement("svg", { width: "12", height: "16", viewBox: "0 0 12 16", fill: "currentColor", "aria-hidden": "true" }, /* @__PURE__ */ React11.createElement("circle", { cx: "3", cy: "3", r: "1.3" }), /* @__PURE__ */ React11.createElement("circle", { cx: "9", cy: "3", r: "1.3" }), /* @__PURE__ */ React11.createElement("circle", { cx: "3", cy: "8", r: "1.3" }), /* @__PURE__ */ React11.createElement("circle", { cx: "9", cy: "8", r: "1.3" }), /* @__PURE__ */ React11.createElement("circle", { cx: "3", cy: "13", r: "1.3" }), /* @__PURE__ */ React11.createElement("circle", { cx: "9", cy: "13", r: "1.3" }));
 function DataTable({
   columns,
   rows,
@@ -2958,11 +3093,11 @@ function DataTable({
 }) {
   const [sel, setSel] = useControllable(selected, defaultSelected, onSelectedChange);
   const [srt, setSrt] = useControllable(sort, defaultSort, onSortChange);
-  const [said, setSaid] = React10.useState("");
-  const table = React10.useRef(null);
-  const body = React10.useRef(null);
+  const [said, setSaid] = React11.useState("");
+  const table = React11.useRef(null);
+  const body = React11.useRef(null);
   const name = (r) => getRowLabel?.(r) ?? getRowId(r);
-  const view = React10.useMemo(() => {
+  const view = React11.useMemo(() => {
     const col = srt && columns.find((c) => c.key === srt.key);
     if (!srt || !col?.sortValue) return rows;
     const d = srt.direction === "descending" ? -1 : 1;
@@ -2979,9 +3114,9 @@ function DataTable({
     setSaid(next ? `Sorted by ${typeof c.header === "string" ? c.header : c.key}, ${next.direction}.` : "Sort cleared.");
   };
   const toggle = (id, on) => setSel(on ? [...sel.filter((x) => x !== id), id] : sel.filter((x) => x !== id));
-  const start = React10.useRef(null);
-  const [drag, setDrag] = React10.useState(null);
-  const [held, setHeld] = React10.useState(null);
+  const start = React11.useRef(null);
+  const [drag, setDrag] = React11.useState(null);
+  const [held, setHeld] = React11.useState(null);
   const rowEls = () => Array.from(body.current?.querySelectorAll("tr[data-row]") ?? []);
   const snapshot = (at) => {
     if (!table.current) return;
@@ -3051,24 +3186,24 @@ function DataTable({
       setSaid(`Move cancelled; ${name(view[index])} is back at position ${held.origin + 1}.`);
     }
   };
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!movable) setHeld(null);
   }, [movable]);
   const s = start.current;
   const h = drag && s ? s.hs[drag.from] : 0;
   const slotTop = drag && s ? drag.to <= drag.from ? s.tops[drag.to] : s.tops[drag.to] + s.hs[drag.to] - s.hs[drag.from] : 0;
   const span = columns.length + (selectable ? 1 : 0) + (movable ? 1 : 0);
-  return /* @__PURE__ */ React10.createElement("div", { className: cx("alt-data-table", className) }, (selectable || toolbar) && /* @__PURE__ */ React10.createElement("div", { className: "alt-table-tools" }, sel.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "alt-table-selection" }, /* @__PURE__ */ React10.createElement(Badge, { variant: "count", tone: "accent", "aria-hidden": "true" }, sel.length), /* @__PURE__ */ React10.createElement("span", null, "selected"), actions?.(sel), /* @__PURE__ */ React10.createElement(Button, { size: "sm", variant: "ghost", onClick: () => setSel([]) }, "Clear")), toolbar && /* @__PURE__ */ React10.createElement("div", { className: "alt-table-tools-end" }, toolbar)), /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement("div", { className: cx("alt-data-table", className) }, (selectable || toolbar) && /* @__PURE__ */ React11.createElement("div", { className: "alt-table-tools" }, sel.length > 0 && /* @__PURE__ */ React11.createElement("div", { className: "alt-table-selection" }, /* @__PURE__ */ React11.createElement(Badge, { variant: "count", tone: "accent", "aria-hidden": "true" }, sel.length), /* @__PURE__ */ React11.createElement("span", null, "selected"), actions?.(sel), /* @__PURE__ */ React11.createElement(Button, { size: "sm", variant: "ghost", onClick: () => setSel([]) }, "Clear")), toolbar && /* @__PURE__ */ React11.createElement("div", { className: "alt-table-tools-end" }, toolbar)), /* @__PURE__ */ React11.createElement(
     Table,
     {
       ref: table,
       maxHeight,
       "aria-label": rest["aria-label"],
       "data-dragging": drag ? "" : void 0,
-      underlay: drag && s ? /* @__PURE__ */ React10.createElement("span", { className: "alt-table-slot", "aria-hidden": "true", style: { top: slotTop + (table.current?.offsetTop ?? 0), height: h } }) : null
+      underlay: drag && s ? /* @__PURE__ */ React11.createElement("span", { className: "alt-table-slot", "aria-hidden": "true", style: { top: slotTop + (table.current?.offsetTop ?? 0), height: h } }) : null
     },
-    /* @__PURE__ */ React10.createElement(TableHeader, null, /* @__PURE__ */ React10.createElement(TableRow, null, movable && /* @__PURE__ */ React10.createElement(TableHead, { className: "alt-th-grip" }, /* @__PURE__ */ React10.createElement("span", { className: "alt-sr" }, "Move")), selectable && /* @__PURE__ */ React10.createElement(TableHead, { className: "alt-th-check" }, /* @__PURE__ */ React10.createElement(Checkbox, { "aria-label": "Select all rows", checked: all, indeterminate: some, onCheckedChange: (on) => setSel(on ? Array.from(/* @__PURE__ */ new Set([...sel, ...ids])) : sel.filter((x) => !ids.includes(x))) })), columns.map((c) => /* @__PURE__ */ React10.createElement(TableHead, { key: c.key, align: c.align, style: { width: c.width }, sort: srt?.key === c.key ? srt.direction : "none", onSort: c.sortValue ? () => cycle(c) : void 0 }, c.header)))),
-    /* @__PURE__ */ React10.createElement(TableBody, { ref: body }, !view.length && /* @__PURE__ */ React10.createElement("tr", null, /* @__PURE__ */ React10.createElement("td", { className: "alt-td alt-table-empty", colSpan: span }, empty)), view.map((r, i) => {
+    /* @__PURE__ */ React11.createElement(TableHeader, null, /* @__PURE__ */ React11.createElement(TableRow, null, movable && /* @__PURE__ */ React11.createElement(TableHead, { className: "alt-th-grip" }, /* @__PURE__ */ React11.createElement("span", { className: "alt-sr" }, "Move")), selectable && /* @__PURE__ */ React11.createElement(TableHead, { className: "alt-th-check" }, /* @__PURE__ */ React11.createElement(Checkbox, { "aria-label": "Select all rows", checked: all, indeterminate: some, onCheckedChange: (on) => setSel(on ? Array.from(/* @__PURE__ */ new Set([...sel, ...ids])) : sel.filter((x) => !ids.includes(x))) })), columns.map((c) => /* @__PURE__ */ React11.createElement(TableHead, { key: c.key, align: c.align, style: { width: c.width }, sort: srt?.key === c.key ? srt.direction : "none", onSort: c.sortValue ? () => cycle(c) : void 0 }, c.header)))),
+    /* @__PURE__ */ React11.createElement(TableBody, { ref: body }, !view.length && /* @__PURE__ */ React11.createElement("tr", null, /* @__PURE__ */ React11.createElement("td", { className: "alt-td alt-table-empty", colSpan: span }, empty)), view.map((r, i) => {
       const id = ids[i];
       let shift = 0;
       if (drag && id !== drag.id && h) {
@@ -3076,7 +3211,7 @@ function DataTable({
         if (drag.to < drag.from && i >= drag.to && i < drag.from) shift = h;
       }
       const following = drag?.id === id;
-      return /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React11.createElement(
         TableRow,
         {
           key: id,
@@ -3091,7 +3226,7 @@ function DataTable({
             if (!e.target.closest("button, a, input, label, select, textarea")) onRowClick(r);
           } : void 0
         },
-        movable && /* @__PURE__ */ React10.createElement(TableCell, { className: "alt-td-grip" }, /* @__PURE__ */ React10.createElement(
+        movable && /* @__PURE__ */ React11.createElement(TableCell, { className: "alt-td-grip" }, /* @__PURE__ */ React11.createElement(
           "button",
           {
             type: "button",
@@ -3107,18 +3242,18 @@ function DataTable({
               if (held?.id === id && !drag) setTimeout(() => setHeld((x) => x?.id === id && document.activeElement?.closest(`tr[data-row="${CSS.escape(id)}"]`) === null ? null : x), 0);
             }
           },
-          /* @__PURE__ */ React10.createElement(GripIcon, null)
+          /* @__PURE__ */ React11.createElement(GripIcon, null)
         )),
-        selectable && /* @__PURE__ */ React10.createElement(TableCell, { className: "alt-td-check" }, /* @__PURE__ */ React10.createElement(Checkbox, { "aria-label": `Select ${name(r)}`, checked: chosen.has(id), onCheckedChange: (on) => toggle(id, on) })),
+        selectable && /* @__PURE__ */ React11.createElement(TableCell, { className: "alt-td-check" }, /* @__PURE__ */ React11.createElement(Checkbox, { "aria-label": `Select ${name(r)}`, checked: chosen.has(id), onCheckedChange: (on) => toggle(id, on) })),
         columns.map((c, ci) => {
           const content = c.cell ? c.cell(r) : String(r[c.key] ?? "");
-          return /* @__PURE__ */ React10.createElement(TableCell, { key: c.key, align: c.align }, onRowClick && ci === 0 ? /* @__PURE__ */ React10.createElement("button", { type: "button", className: "alt-table-rowbtn", onClick: () => onRowClick(r) }, content) : content);
+          return /* @__PURE__ */ React11.createElement(TableCell, { key: c.key, align: c.align }, onRowClick && ci === 0 ? /* @__PURE__ */ React11.createElement("button", { type: "button", className: "alt-table-rowbtn", onClick: () => onRowClick(r) }, content) : content);
         })
       );
     }))
-  ), /* @__PURE__ */ React10.createElement("span", { className: "alt-sr", "aria-live": "polite" }, selectable && sel.length ? `${sel.length} selected. ` : "", said));
+  ), /* @__PURE__ */ React11.createElement("span", { className: "alt-sr", "aria-live": "polite" }, selectable && sel.length ? `${sel.length} selected. ` : "", said));
 }
-var BoardCtx = React10.createContext(null);
+var BoardCtx = React11.createContext(null);
 function readBoard(root) {
   return Array.from(root.querySelectorAll("[data-board-col]")).map((col) => {
     const list = col.querySelector(".alt-board-list");
@@ -3165,18 +3300,18 @@ function plan(cols, id, cx2, cy, h) {
   }
   return { to: { column: tc.id, index }, shifts, slotTop, gap: tc.gap };
 }
-var Board = React10.forwardRef(function Board2({ onMove, className, children, ...rest }, ref) {
-  const root = React10.useRef(null);
-  React10.useImperativeHandle(ref, () => root.current);
-  const hintId = React10.useId();
-  const [carry, setCarry] = React10.useState(null);
-  const [kb, setKb] = React10.useState(null);
-  const [landing, setLanding] = React10.useState(null);
-  const [said, setSaid] = React10.useState("");
-  const start = React10.useRef(null);
-  const dragged = React10.useRef(false);
+var Board = React11.forwardRef(function Board2({ onMove, className, children, ...rest }, ref) {
+  const root = React11.useRef(null);
+  React11.useImperativeHandle(ref, () => root.current);
+  const hintId = React11.useId();
+  const [carry, setCarry] = React11.useState(null);
+  const [kb, setKb] = React11.useState(null);
+  const [landing, setLanding] = React11.useState(null);
+  const [said, setSaid] = React11.useState("");
+  const start = React11.useRef(null);
+  const dragged = React11.useRef(false);
   useCarry(root, "[data-board-card]", "data-board-card");
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!landing) return;
     const t = setTimeout(() => setLanding(null), 450);
     return () => clearTimeout(t);
@@ -3305,17 +3440,17 @@ var Board = React10.forwardRef(function Board2({ onMove, className, children, ..
     return d;
   };
   const ctx = { carry, kb, landing, hintId, onPointerDown, onPointerMove, onPointerUp, onKeyDown, onBlur, swallowClick };
-  return /* @__PURE__ */ React10.createElement(BoardCtx.Provider, { value: ctx }, /* @__PURE__ */ React10.createElement("div", { ref: root, role: "group", "aria-label": rest["aria-label"] ?? "Board", className: cx("alt-board", className), "data-carrying": carry || kb ? "" : void 0, ...rest }, children, /* @__PURE__ */ React10.createElement("span", { id: hintId, className: "alt-sr" }, "Press Space to pick up. While holding a card, use the arrow keys to move it, Space to drop it, Escape to cancel."), /* @__PURE__ */ React10.createElement("span", { className: "alt-sr", "aria-live": "assertive" }, said)));
+  return /* @__PURE__ */ React11.createElement(BoardCtx.Provider, { value: ctx }, /* @__PURE__ */ React11.createElement("div", { ref: root, role: "group", "aria-label": rest["aria-label"] ?? "Board", className: cx("alt-board", className), "data-carrying": carry || kb ? "" : void 0, ...rest }, children, /* @__PURE__ */ React11.createElement("span", { id: hintId, className: "alt-sr" }, "Press Space to pick up. While holding a card, use the arrow keys to move it, Space to drop it, Escape to cancel."), /* @__PURE__ */ React11.createElement("span", { className: "alt-sr", "aria-live": "assertive" }, said)));
 });
 function BoardColumn({ id, title, collapsed, defaultCollapsed = false, onCollapsedChange, collapsible, className, children, ...rest }) {
-  const ctx = React10.useContext(BoardCtx);
+  const ctx = React11.useContext(BoardCtx);
   const [isCollapsed, setCollapsed] = useControllable(collapsed, defaultCollapsed, onCollapsedChange);
-  const count = React10.Children.toArray(children).filter(React10.isValidElement).length;
+  const count = React11.Children.toArray(children).filter(React11.isValidElement).length;
   const label = typeof title === "string" ? title : id;
   const carry = ctx?.carry;
   const over = carry ? carry.to.column === id : ctx?.kb?.at.column === id;
   const receiving = !!carry && carry.to.column === id && carry.from.column !== id && !isCollapsed;
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "section",
     {
       className: cx("alt-board-col", className),
@@ -3326,7 +3461,7 @@ function BoardColumn({ id, title, collapsed, defaultCollapsed = false, onCollaps
       "data-over": over ? "" : void 0,
       ...rest
     },
-    /* @__PURE__ */ React10.createElement("header", { className: "alt-board-head" }, /* @__PURE__ */ React10.createElement("h3", { className: "alt-board-title" }, title), /* @__PURE__ */ React10.createElement("span", { className: "alt-board-count", "aria-label": `${count} ${count === 1 ? "card" : "cards"}` }, count), collapsible && /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement("header", { className: "alt-board-head" }, /* @__PURE__ */ React11.createElement("h3", { className: "alt-board-title" }, title), /* @__PURE__ */ React11.createElement("span", { className: "alt-board-count", "aria-label": `${count} ${count === 1 ? "card" : "cards"}` }, count), collapsible && /* @__PURE__ */ React11.createElement(
       Button,
       {
         variant: "ghost",
@@ -3338,20 +3473,20 @@ function BoardColumn({ id, title, collapsed, defaultCollapsed = false, onCollaps
         "data-collapsed": isCollapsed ? "" : void 0,
         onClick: () => setCollapsed(!isCollapsed)
       },
-      /* @__PURE__ */ React10.createElement(Icons.ChevronDown, null)
+      /* @__PURE__ */ React11.createElement(Icons.ChevronDown, null)
     )),
-    isCollapsed ? /* @__PURE__ */ React10.createElement(Pile, { count: Math.max(count, 1), className: "alt-board-pile" }, /* @__PURE__ */ React10.createElement("div", { className: "alt-board-pile-face" }, /* @__PURE__ */ React10.createElement("b", null, title), /* @__PURE__ */ React10.createElement("span", null, count ? `${count} ${count === 1 ? "card" : "cards"}` : "No cards"))) : /* @__PURE__ */ React10.createElement("div", { className: "alt-board-list", style: receiving ? { paddingBottom: carry.h + carry.gap } : void 0 }, carry && carry.to.column === id && /* @__PURE__ */ React10.createElement("span", { className: "alt-board-slot", "aria-hidden": "true", style: { top: carry.slotTop, height: carry.h } }), children, !count && !carry && /* @__PURE__ */ React10.createElement("div", { className: "alt-board-empty" }, "No cards"))
+    isCollapsed ? /* @__PURE__ */ React11.createElement(Pile, { count: Math.max(count, 1), className: "alt-board-pile" }, /* @__PURE__ */ React11.createElement("div", { className: "alt-board-pile-face" }, /* @__PURE__ */ React11.createElement("b", null, title), /* @__PURE__ */ React11.createElement("span", null, count ? `${count} ${count === 1 ? "card" : "cards"}` : "No cards"))) : /* @__PURE__ */ React11.createElement("div", { className: "alt-board-list", style: receiving ? { paddingBottom: carry.h + carry.gap } : void 0 }, carry && carry.to.column === id && /* @__PURE__ */ React11.createElement("span", { className: "alt-board-slot", "aria-hidden": "true", style: { top: carry.slotTop, height: carry.h } }), children, !count && !carry && /* @__PURE__ */ React11.createElement("div", { className: "alt-board-empty" }, "No cards"))
   );
 }
-var BoardCard = React10.forwardRef(function BoardCard2({ id, label, heldBy, settle, className, style, onClickCapture, children, ...rest }, ref) {
-  const ctx = React10.useContext(BoardCtx);
+var BoardCard = React11.forwardRef(function BoardCard2({ id, label, heldBy, settle, className, style, onClickCapture, children, ...rest }, ref) {
+  const ctx = React11.useContext(BoardCtx);
   const depth = useDepth({ heldBy, settle });
   const carry = ctx?.carry;
   const following = carry?.id === id;
   const carried = following || ctx?.kb?.id === id;
   const shift = carry?.shifts[id];
   const transform = following ? `translate(${carry.dx}px, ${carry.dy}px)` : shift ? `translateY(${shift}px)` : void 0;
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       ref,