altitude-design 0.1.2 → 0.2.1

package/dist/index.cjs

@@ -37,6 +37,7 @@ __export(index_exports, {
   AltitudeProvider: () => AltitudeProvider,
   Avatar: () => Avatar,
   AvatarGroup: () => AvatarGroup,
+  Await: () => Await,
   Badge: () => Badge,
   Board: () => Board,
   BoardCard: () => BoardCard,
@@ -56,6 +57,7 @@ __export(index_exports, {
   Drilldown: () => Drilldown,
   DropZone: () => DropZone,
   DropdownMenu: () => DropdownMenu,
+  EmptyState: () => EmptyState,
   Field: () => Field,
   HoldButton: () => HoldButton,
   HoverCard: () => HoverCard,
@@ -63,11 +65,13 @@ __export(index_exports, {
   Input: () => Input,
   Kbd: () => Kbd,
   Layer: () => Layer,
+  LoadingScope: () => LoadingScope,
   Pile: () => Pile,
   Popover: () => Popover,
   Progress: () => Progress,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
+  RevealGroup: () => RevealGroup,
   ScrollArea: () => ScrollArea,
   Select: () => Select,
   SelectItem: () => SelectItem,
@@ -98,9 +102,11 @@ __export(index_exports, {
   Textarea: () => Textarea,
   Toaster: () => Toaster,
   Tooltip: () => Tooltip,
+  checkScheme: () => checkScheme,
   commandScore: () => commandScore,
   contrast: () => contrast,
   deriveAccent: () => deriveAccent,
+  readPromised: () => readPromised,
   riseDelay: () => riseDelay,
   toast: () => toast,
   useAltitude: () => useAltitude,
@@ -340,6 +346,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 +410,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 +437,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 +450,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 })
   ));
@@ -473,9 +551,190 @@ function Kbd({ listen, className, children, ...rest }) {
 }
 
 // project/components/src/controls.tsx
+var React3 = __toESM(require("react"), 1);
+
+// project/components/src/suspense.tsx
 var React2 = __toESM(require("react"), 1);
-var Button = React2.forwardRef(function Button2({ variant = "secondary", size = "md", square, loading, leading, trailing, className, children, disabled, type = "button", ...rest }, ref) {
+var isPromise = (v) => !!v && (typeof v === "object" || typeof v === "function") && typeof v.then === "function";
+var hasPromise = (children) => Array.isArray(children) ? children.some(isPromise) : isPromise(children);
+var settled = /* @__PURE__ */ new WeakMap();
+var reactUse = React2.use;
+function readPromised(v) {
+  if (!isPromise(v)) return v;
+  if (reactUse) return reactUse(v);
+  let r = settled.get(v);
+  if (!r) {
+    const rec = { s: "pending" };
+    settled.set(v, rec);
+    v.then((x) => {
+      rec.s = "done";
+      rec.v = x;
+    }, (e) => {
+      rec.s = "error";
+      rec.e = e;
+    });
+    r = rec;
+  }
+  if (r.s === "done") return r.v;
+  if (r.s === "error") throw r.e;
+  throw v;
+}
+function readChildren(children) {
+  return Array.isArray(children) ? children.map((c) => readPromised(c)) : readPromised(children);
+}
+function useArrival(waiting) {
+  const d = React2.useRef(null);
+  if (waiting && !d.current) {
+    let done;
+    d.current = { p: new Promise((r) => {
+      done = r;
+    }), done };
+  }
+  const cur = d.current;
+  useIsoLayoutEffect(() => {
+    if (!waiting && cur) {
+      cur.done();
+      if (d.current === cur) d.current = null;
+    }
+  });
+  return waiting && cur ? cur.p : null;
+}
+function Arrive({ when, children }) {
+  if (when) readPromised(when);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
+}
+function useHasWaited(waiting) {
+  const r = React2.useRef(false);
+  if (waiting) r.current = true;
+  return r.current;
+}
+var ScopeContext = React2.createContext(null);
+function LoadingScope({ children }) {
+  const [members] = React2.useState(() => /* @__PURE__ */ new Set());
+  const [waiting, setWaiting] = React2.useState(false);
+  const report = React2.useCallback((id, w) => {
+    if (w) members.add(id);
+    else members.delete(id);
+    setWaiting(members.size > 0);
+  }, [members]);
+  const value = React2.useMemo(() => ({ report, waiting }), [report, waiting]);
+  return /* @__PURE__ */ React2.createElement(ScopeContext.Provider, { value }, children);
+}
+function useReportWaiting(waiting) {
+  const scope = React2.useContext(ScopeContext);
+  const [id] = React2.useState(() => ({}));
+  const report = scope?.report;
+  useIsoLayoutEffect(() => {
+    report?.(id, waiting);
+  }, [report, waiting]);
+  useIsoLayoutEffect(() => () => report?.(id, false), [report]);
+}
+var useScopeWaiting = () => !!React2.useContext(ScopeContext)?.waiting;
+var Group = class {
+  constructor() {
+    this.waiting = /* @__PURE__ */ new Set();
+    this.held = /* @__PURE__ */ new Map();
+  }
+  wait(id) {
+    this.waiting.add(id);
+  }
+  /** Returns true when this was the last one: everything held is released together. */
+  land(id, release) {
+    this.waiting.delete(id);
+    this.held.set(id, release);
+    if (this.waiting.size) return false;
+    this.flush();
+    return true;
+  }
+  leave(id) {
+    this.waiting.delete(id);
+    this.held.delete(id);
+    if (!this.waiting.size && this.held.size) this.flush();
+  }
+  flush() {
+    const all = Array.from(this.held.values());
+    this.held.clear();
+    all.forEach((f) => f());
+  }
+};
+var GroupContext = React2.createContext(null);
+function RevealGroup({ children }) {
+  const group = React2.useMemo(() => new Group(), []);
+  return /* @__PURE__ */ React2.createElement(GroupContext.Provider, { value: group }, children);
+}
+var GRACE = 300;
+function Await({ imprint, shape = "block", inline, enabled = true, className, children }) {
+  const group = React2.useContext(GroupContext);
+  const box = React2.useRef({ id: {}, since: null });
+  React2.useEffect(() => () => group?.leave(box.current.id), [group]);
+  if (!enabled) return /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
+  return /* @__PURE__ */ React2.createElement(React2.Suspense, { fallback: /* @__PURE__ */ React2.createElement(Imprint, { box, group, inline }, imprint) }, /* @__PURE__ */ React2.createElement(Landed, { box, group, shape, inline, className, imprint }, children));
+}
+function Imprint({ box, group, inline, children }) {
+  useIsoLayoutEffect(() => {
+    if (box.current.since === null) box.current.since = performance.now();
+    group?.wait(box.current.id);
+  }, []);
+  return /* @__PURE__ */ React2.createElement("span", { className: "alt-await-wait", "data-inline": inline ? "" : void 0, "aria-busy": "true" }, children, /* @__PURE__ */ React2.createElement("span", { className: "alt-sr" }, "Loading"));
+}
+function Landed({ box, group, shape, inline, className, imprint, children }) {
+  const [phase, setPhase] = React2.useState(null);
+  const [delay, setDelay] = React2.useState(0);
+  const [graceLeft, setGraceLeft] = React2.useState(0);
+  const done = React2.useRef(void 0);
+  useIsoLayoutEffect(() => {
+    const since = box.current.since;
+    box.current.since = null;
+    if (since === null) return;
+    const release = () => {
+      clearTimeout(done.current);
+      if (performance.now() - since < GRACE) {
+        setPhase(null);
+        return;
+      }
+      const d = riseDelay();
+      setDelay(d);
+      setPhase("reveal");
+      done.current = setTimeout(() => setPhase(null), d + 320);
+    };
+    if (group && !group.land(box.current.id, release)) {
+      setGraceLeft(Math.max(0, GRACE - (performance.now() - since)));
+      setPhase("held");
+    } else if (!group) release();
+  }, []);
+  React2.useEffect(() => () => clearTimeout(done.current), []);
   return /* @__PURE__ */ React2.createElement(
+    "span",
+    {
+      className: cx("alt-await", className),
+      "data-phase": phase ?? void 0,
+      "data-inline": inline ? "" : void 0,
+      "data-shape": shape,
+      "aria-busy": phase === "held" || void 0,
+      style: phase ? { ["--alt-rise-delay"]: delay + "ms", ["--alt-grace-left"]: graceLeft + "ms" } : void 0
+    },
+    phase === "held" && /* @__PURE__ */ React2.createElement("span", { className: "alt-await-held", "data-early": graceLeft > 0 ? "" : void 0, "aria-hidden": "true" }, imprint),
+    phase === "reveal" && shape !== "none" && /* @__PURE__ */ React2.createElement("span", { className: "alt-skeleton alt-await-imprint", "data-shape": shape, "aria-hidden": "true" }),
+    /* @__PURE__ */ React2.createElement("span", { className: "alt-await-face" }, children)
+  );
+}
+var LINE_WIDTHS = ["100%", "94%", "82%", "97%", "64%"];
+function TextImprint({ lines = 1, width, className }) {
+  return /* @__PURE__ */ React2.createElement("span", { className: cx("alt-await-lines", className), style: { ["--lines"]: lines, width } }, Array.from({ length: lines }, (_, i) => /* @__PURE__ */ React2.createElement(
+    "span",
+    {
+      key: i,
+      className: "alt-skeleton",
+      "data-shape": "text",
+      style: { width: lines === 1 ? "100%" : i === lines - 1 ? "60%" : LINE_WIDTHS[i % LINE_WIDTHS.length], ["--i"]: i }
+    }
+  )));
+}
+var hint = (s) => typeof s === "object" ? s : {};
+
+// project/components/src/controls.tsx
+var Button = React3.forwardRef(function Button2({ variant = "secondary", size = "md", square, loading, leading, trailing, className, children, disabled, type = "button", ...rest }, ref) {
+  return /* @__PURE__ */ React3.createElement(
     "button",
     {
       ref,
@@ -490,14 +749,15 @@ var Button = React2.forwardRef(function Button2({ variant = "secondary", size =
       ...rest,
       onClick: loading ? (e) => e.preventDefault() : rest.onClick
     },
-    /* @__PURE__ */ React2.createElement("span", { className: "alt-btn-label" }, leading, children, trailing),
-    loading && /* @__PURE__ */ React2.createElement("span", { className: "alt-btn-spinner" }, /* @__PURE__ */ React2.createElement(Spinner, { size: size === "sm" ? 14 : 16 }))
+    /* @__PURE__ */ React3.createElement("span", { className: "alt-btn-label" }, leading, children, trailing),
+    loading && /* @__PURE__ */ React3.createElement("span", { className: "alt-btn-spinner" }, /* @__PURE__ */ React3.createElement(Spinner, { size: size === "sm" ? 14 : 16 }))
   );
 });
-var Card = React2.forwardRef(function Card2({ interactive, className, onKeyDown, settle, status, heldBy, relevance, style, ...rest }, ref) {
+var Card = React3.forwardRef(function Card2({ interactive, className, onKeyDown, settle, status, heldBy, relevance, style, skeleton, children, ...rest }, ref) {
   const actionable = interactive && !!rest.onClick;
   const { style: depthStyle, ...depth } = useDepth({ settle, status, heldBy, relevance });
-  return /* @__PURE__ */ React2.createElement(
+  const { lines = 3 } = hint(skeleton);
+  return /* @__PURE__ */ React3.createElement(
     "div",
     {
       ref,
@@ -514,29 +774,51 @@ var Card = React2.forwardRef(function Card2({ interactive, className, onKeyDown,
       ...depth,
       style: { ...depthStyle, ...style },
       ...rest
-    }
+    },
+    /* @__PURE__ */ React3.createElement(LoadingScope, null, /* @__PURE__ */ React3.createElement(Await, { shape: "none", enabled: skeleton !== false, imprint: /* @__PURE__ */ React3.createElement("span", { className: "alt-await-card" }, /* @__PURE__ */ React3.createElement(TextImprint, { className: "alt-card-title", width: "45%" }), /* @__PURE__ */ React3.createElement(TextImprint, { className: "alt-await-card-body", lines })) }, children))
   );
 });
-var CardHeader = ({ className, ...p }) => /* @__PURE__ */ React2.createElement("div", { className: cx("alt-card-header", className), ...p });
-var CardTitle = ({ className, ...p }) => /* @__PURE__ */ React2.createElement("h3", { className: cx("alt-card-title", className), ...p });
-var CardDescription = ({ className, ...p }) => /* @__PURE__ */ React2.createElement("p", { className: cx("alt-card-desc", className), ...p });
-var CardContent = ({ className, ...p }) => /* @__PURE__ */ React2.createElement("div", { className: cx("alt-card-content", className), ...p });
-var CardFooter = ({ className, ...p }) => /* @__PURE__ */ React2.createElement("div", { className: cx("alt-card-footer", className), ...p });
-var Input = React2.forwardRef(function Input2({ invalid, leading, trailing, size = "md", className, disabled, placeholder, ...rest }, ref) {
+var CardHeader = ({ className, ...p }) => /* @__PURE__ */ React3.createElement("div", { className: cx("alt-card-header", className), ...p });
+var Promised$ = ({ children }) => /* @__PURE__ */ React3.createElement(React3.Fragment, null, readChildren(children));
+function usePendingText(children, skeleton, required) {
+  const scopeWaiting = useScopeWaiting();
+  const missing = skeleton !== false && children === void 0 && (required || scopeWaiting);
+  useReportWaiting(required && skeleton !== false && (children === void 0 || hasPromise(children)));
+  const arrival = useArrival(missing);
+  const waited = useHasWaited(missing || hasPromise(children));
+  return { arrival, waited };
+}
+function PendingText({ children, skeleton, lines, width, required }) {
+  const { arrival, waited } = usePendingText(children, skeleton, required);
+  if (!waited) return /* @__PURE__ */ React3.createElement(React3.Fragment, null, children);
+  const h = hint(skeleton);
+  return /* @__PURE__ */ React3.createElement(Await, { shape: "text", enabled: skeleton !== false, imprint: /* @__PURE__ */ React3.createElement(TextImprint, { lines: h.lines ?? lines, width: h.width ?? width }) }, /* @__PURE__ */ React3.createElement(Arrive, { when: arrival }, /* @__PURE__ */ React3.createElement(Promised$, null, children)));
+}
+var CardTitle = ({ className, children, skeleton, ...p }) => /* @__PURE__ */ React3.createElement("h3", { className: cx("alt-card-title", className), ...p }, /* @__PURE__ */ React3.createElement(PendingText, { skeleton, lines: 1, width: "55%", required: true }, children));
+var CardDescription = ({ className, children, skeleton, ...p }) => /* @__PURE__ */ React3.createElement("p", { className: cx("alt-card-desc", className), ...p }, /* @__PURE__ */ React3.createElement(PendingText, { skeleton, lines: 2, required: false }, children));
+var CardContent = ({ className, skeleton, children, ...p }) => {
+  const { lines = 3 } = hint(skeleton);
+  const scopeWaiting = useScopeWaiting();
+  const missing = skeleton !== false && children === void 0 && scopeWaiting;
+  const arrival = useArrival(missing);
+  return /* @__PURE__ */ React3.createElement("div", { className: cx("alt-card-content", className), ...p }, /* @__PURE__ */ React3.createElement(Await, { shape: "none", enabled: skeleton !== false, imprint: /* @__PURE__ */ React3.createElement(TextImprint, { lines }) }, /* @__PURE__ */ React3.createElement(Arrive, { when: arrival }, children)));
+};
+var CardFooter = ({ className, ...p }) => /* @__PURE__ */ React3.createElement("div", { className: cx("alt-card-footer", className), ...p });
+var Input = React3.forwardRef(function Input2({ invalid, leading, trailing, size = "md", className, disabled, placeholder, ...rest }, ref) {
   useApproach();
   useKeyFocus();
-  return /* @__PURE__ */ React2.createElement("div", { className: cx("alt-input", className), "data-size": size, "data-approach": "56", "data-invalid": invalid ? "" : void 0, "data-disabled": disabled ? "" : void 0 }, leading && /* @__PURE__ */ React2.createElement("span", { className: "alt-input-adorn" }, leading), /* @__PURE__ */ React2.createElement("input", { ref, disabled, "aria-invalid": invalid || void 0, placeholder: placeholder ?? " ", ...rest }), trailing && /* @__PURE__ */ React2.createElement("span", { className: "alt-input-adorn" }, trailing));
+  return /* @__PURE__ */ React3.createElement("div", { className: cx("alt-input", className), "data-size": size, "data-approach": "56", "data-invalid": invalid ? "" : void 0, "data-disabled": disabled ? "" : void 0 }, leading && /* @__PURE__ */ React3.createElement("span", { className: "alt-input-adorn" }, leading), /* @__PURE__ */ React3.createElement("input", { ref, disabled, "aria-invalid": invalid || void 0, placeholder: placeholder ?? " ", ...rest }), trailing && /* @__PURE__ */ React3.createElement("span", { className: "alt-input-adorn" }, trailing));
 });
-var Textarea = React2.forwardRef(function Textarea2({ invalid, className, disabled, placeholder, maxLength, showFill = true, onChange, value, defaultValue, ...rest }, ref) {
-  const [len, setLen] = React2.useState(() => String(value ?? defaultValue ?? "").length);
-  React2.useEffect(() => {
+var Textarea = React3.forwardRef(function Textarea2({ invalid, className, disabled, placeholder, maxLength, showFill = true, onChange, value, defaultValue, ...rest }, ref) {
+  const [len, setLen] = React3.useState(() => String(value ?? defaultValue ?? "").length);
+  React3.useEffect(() => {
     if (value !== void 0) setLen(String(value).length);
   }, [value]);
   const gauge = showFill && maxLength ? Math.min(1, len / maxLength) : null;
   const level = gauge === null ? void 0 : len >= maxLength ? "full" : gauge >= 0.9 ? "near" : "ok";
   useApproach();
   useKeyFocus();
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     "div",
     {
       className: cx("alt-input", className),
@@ -547,8 +829,8 @@ var Textarea = React2.forwardRef(function Textarea2({ invalid, className, disabl
       "data-fill": level,
       style: gauge !== null ? { ["--alt-fill"]: gauge } : void 0
     },
-    gauge !== null && /* @__PURE__ */ React2.createElement("span", { className: "alt-input-gauge", "aria-hidden": "true" }),
-    /* @__PURE__ */ React2.createElement(
+    gauge !== null && /* @__PURE__ */ React3.createElement("span", { className: "alt-input-gauge", "aria-hidden": "true" }),
+    /* @__PURE__ */ React3.createElement(
       "textarea",
       {
         ref,
@@ -565,22 +847,22 @@ var Textarea = React2.forwardRef(function Textarea2({ invalid, className, disabl
         }
       }
     ),
-    gauge !== null && /* @__PURE__ */ React2.createElement("span", { className: "alt-input-count", "aria-live": "polite" }, len, " / ", maxLength)
+    gauge !== null && /* @__PURE__ */ React3.createElement("span", { className: "alt-input-count", "aria-live": "polite" }, len, " / ", maxLength)
   );
 });
-function Field({ label, hint, error, required, className, children }) {
-  const id = React2.useId();
+function Field({ label, hint: hint2, error, required, className, children }) {
+  const id = React3.useId();
   const controlId = children.props.id || id + "-control";
-  const describedBy = [hint && id + "-hint", error && id + "-error"].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ React2.createElement("div", { className: cx("alt-field", className) }, /* @__PURE__ */ React2.createElement("label", { className: "alt-field-label", htmlFor: controlId }, label, required && /* @__PURE__ */ React2.createElement("span", { className: "alt-field-req", "aria-hidden": "true" }, " *")), React2.cloneElement(children, { id: controlId, "aria-describedby": describedBy, invalid: !!error || children.props.invalid, required }), hint && !error && /* @__PURE__ */ React2.createElement("p", { className: "alt-field-hint", id: id + "-hint" }, hint), error && /* @__PURE__ */ React2.createElement("p", { className: "alt-field-error", id: id + "-error", role: "alert" }, /* @__PURE__ */ React2.createElement(Icons.AlertCircle, { size: 14 }), error));
+  const describedBy = [hint2 && id + "-hint", error && id + "-error"].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ React3.createElement("div", { className: cx("alt-field", className) }, /* @__PURE__ */ React3.createElement("label", { className: "alt-field-label", htmlFor: controlId }, label, required && /* @__PURE__ */ React3.createElement("span", { className: "alt-field-req", "aria-hidden": "true" }, " *")), React3.cloneElement(children, { id: controlId, "aria-describedby": describedBy, invalid: !!error || children.props.invalid, required }), hint2 && !error && /* @__PURE__ */ React3.createElement("p", { className: "alt-field-hint", id: id + "-hint" }, hint2), error && /* @__PURE__ */ React3.createElement("p", { className: "alt-field-error", id: id + "-error", role: "alert" }, /* @__PURE__ */ React3.createElement(Icons.AlertCircle, { size: 14 }), error));
 }
-var Checkbox = React2.forwardRef(function Checkbox2({ label, description, indeterminate, onCheckedChange, onChange, className, disabled, ...rest }, ref) {
-  const inner = React2.useRef(null);
-  React2.useImperativeHandle(ref, () => inner.current);
-  React2.useEffect(() => {
+var Checkbox = React3.forwardRef(function Checkbox2({ label, description, indeterminate, onCheckedChange, onChange, className, disabled, ...rest }, ref) {
+  const inner = React3.useRef(null);
+  React3.useImperativeHandle(ref, () => inner.current);
+  React3.useEffect(() => {
     if (inner.current) inner.current.indeterminate = !!indeterminate;
   }, [indeterminate]);
-  return /* @__PURE__ */ React2.createElement("label", { className: cx("alt-check", className), "data-disabled": disabled ? "" : void 0 }, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement("label", { className: cx("alt-check", className), "data-disabled": disabled ? "" : void 0 }, /* @__PURE__ */ React3.createElement(
     "input",
     {
       ref: inner,
@@ -592,20 +874,20 @@ var Checkbox = React2.forwardRef(function Checkbox2({ label, description, indete
         onCheckedChange?.(e.target.checked);
       }
     }
-  ), /* @__PURE__ */ React2.createElement("span", { className: "alt-check-track", "aria-hidden": "true" }, /* @__PURE__ */ React2.createElement("span", { className: "alt-check-fill" }), /* @__PURE__ */ React2.createElement("svg", { className: "alt-check-mark", viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React2.createElement("path", { className: "alt-check-tick", d: "M3.5 8.5l3 3 6-6.5", pathLength: 16 }), /* @__PURE__ */ React2.createElement("path", { className: "alt-check-dash", d: "M4 8h8", pathLength: 16 }))), (label || description) && /* @__PURE__ */ React2.createElement("span", { className: "alt-check-text" }, label && /* @__PURE__ */ React2.createElement("span", { className: "alt-check-label" }, label), description && /* @__PURE__ */ React2.createElement("span", { className: "alt-check-desc" }, description)));
+  ), /* @__PURE__ */ React3.createElement("span", { className: "alt-check-track", "aria-hidden": "true" }, /* @__PURE__ */ React3.createElement("span", { className: "alt-check-fill" }), /* @__PURE__ */ React3.createElement("svg", { className: "alt-check-mark", viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React3.createElement("path", { className: "alt-check-tick", d: "M3.5 8.5l3 3 6-6.5", pathLength: 16 }), /* @__PURE__ */ React3.createElement("path", { className: "alt-check-dash", d: "M4 8h8", pathLength: 16 }))), (label || description) && /* @__PURE__ */ React3.createElement("span", { className: "alt-check-text" }, label && /* @__PURE__ */ React3.createElement("span", { className: "alt-check-label" }, label), description && /* @__PURE__ */ React3.createElement("span", { className: "alt-check-desc" }, description)));
 });
-var RadioCtx = React2.createContext(null);
+var RadioCtx = React3.createContext(null);
 function RadioGroup({ value, defaultValue = "", onValueChange, name, disabled, orientation = "vertical", className, children, ...rest }) {
-  const auto = React2.useId();
+  const auto = React3.useId();
   const [v, set] = useControllable(value, defaultValue, onValueChange);
-  const root = React2.useRef(null);
-  const slots = React2.useRef(/* @__PURE__ */ new Map());
-  const [bead, setBead] = React2.useState(null);
-  const register = React2.useCallback((val, el) => {
+  const root = React3.useRef(null);
+  const slots = React3.useRef(/* @__PURE__ */ new Map());
+  const [bead, setBead] = React3.useState(null);
+  const register = React3.useCallback((val, el) => {
     if (el) slots.current.set(val, el);
     else slots.current.delete(val);
   }, []);
-  const measure = React2.useCallback(() => {
+  const measure = React3.useCallback(() => {
     const el = slots.current.get(v), r = root.current;
     if (!el || !r) {
       setBead(null);
@@ -618,13 +900,13 @@ function RadioGroup({ value, defaultValue = "", onValueChange, name, disabled, o
   useIsoLayoutEffect(() => {
     measure();
   }, [measure]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const ro = new ResizeObserver(() => measure());
     if (root.current) ro.observe(root.current);
     document.fonts?.ready.then(() => measure());
     return () => ro.disconnect();
   }, [measure]);
-  return /* @__PURE__ */ React2.createElement(RadioCtx.Provider, { value: { name: name || auto, value: v, set, disabled, register } }, /* @__PURE__ */ React2.createElement("div", { ref: root, role: "radiogroup", className: cx("alt-radio-group", className), "data-orientation": orientation, "data-disabled": disabled ? "" : void 0, ...rest }, children, bead && /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(RadioCtx.Provider, { value: { name: name || auto, value: v, set, disabled, register } }, /* @__PURE__ */ React3.createElement("div", { ref: root, role: "radiogroup", className: cx("alt-radio-group", className), "data-orientation": orientation, "data-disabled": disabled ? "" : void 0, ...rest }, children, bead && /* @__PURE__ */ React3.createElement(
     "span",
     {
       className: "alt-radio-thumb",
@@ -635,9 +917,9 @@ function RadioGroup({ value, defaultValue = "", onValueChange, name, disabled, o
   )));
 }
 function Radio({ value, label, description, disabled, className }) {
-  const g = React2.useContext(RadioCtx);
+  const g = React3.useContext(RadioCtx);
   const off = disabled || g?.disabled;
-  return /* @__PURE__ */ React2.createElement("label", { className: cx("alt-check alt-radio", className), "data-disabled": off ? "" : void 0 }, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement("label", { className: cx("alt-check alt-radio", className), "data-disabled": off ? "" : void 0 }, /* @__PURE__ */ React3.createElement(
     "input",
     {
       type: "radio",
@@ -647,11 +929,11 @@ function Radio({ value, label, description, disabled, className }) {
       checked: g ? g.value === value : void 0,
       onChange: () => g?.set(value)
     }
-  ), /* @__PURE__ */ React2.createElement("span", { className: "alt-check-track", "data-round": "", "aria-hidden": "true", ref: (el) => g?.register(value, el) }, /* @__PURE__ */ React2.createElement("span", { className: "alt-check-fill" })), (label || description) && /* @__PURE__ */ React2.createElement("span", { className: "alt-check-text" }, label && /* @__PURE__ */ React2.createElement("span", { className: "alt-check-label" }, label), description && /* @__PURE__ */ React2.createElement("span", { className: "alt-check-desc" }, description)));
+  ), /* @__PURE__ */ React3.createElement("span", { className: "alt-check-track", "data-round": "", "aria-hidden": "true", ref: (el) => g?.register(value, el) }, /* @__PURE__ */ React3.createElement("span", { className: "alt-check-fill" })), (label || description) && /* @__PURE__ */ React3.createElement("span", { className: "alt-check-text" }, label && /* @__PURE__ */ React3.createElement("span", { className: "alt-check-label" }, label), description && /* @__PURE__ */ React3.createElement("span", { className: "alt-check-desc" }, description)));
 }
 function Switch({ checked, defaultChecked = false, onCheckedChange, label, className, disabled, ...rest }) {
   const [on, set] = useControllable(checked, defaultChecked, onCheckedChange);
-  const control = /* @__PURE__ */ React2.createElement(
+  const control = /* @__PURE__ */ React3.createElement(
     "button",
     {
       type: "button",
@@ -665,29 +947,29 @@ function Switch({ checked, defaultChecked = false, onCheckedChange, label, class
         set(!on);
       }
     },
-    /* @__PURE__ */ React2.createElement("span", { className: "alt-switch-fill" }),
-    /* @__PURE__ */ React2.createElement("span", { className: "alt-switch-thumb" })
+    /* @__PURE__ */ React3.createElement("span", { className: "alt-switch-fill" }),
+    /* @__PURE__ */ React3.createElement("span", { className: "alt-switch-thumb" })
   );
   if (!label) return control;
-  return /* @__PURE__ */ React2.createElement("label", { className: cx("alt-switch-row", className), "data-disabled": disabled ? "" : void 0 }, control, /* @__PURE__ */ React2.createElement("span", null, label));
+  return /* @__PURE__ */ React3.createElement("label", { className: cx("alt-switch-row", className), "data-disabled": disabled ? "" : void 0 }, control, /* @__PURE__ */ React3.createElement("span", null, label));
 }
-var TabsCtx = React2.createContext(null);
+var TabsCtx = React3.createContext(null);
 function Tabs({ value, defaultValue = "", onValueChange, variant = "folder", className, children, ...rest }) {
   const [v, set] = useControllable(value, defaultValue, onValueChange);
-  const id = React2.useId();
-  const nodes = React2.useRef(/* @__PURE__ */ new Map());
-  const register = React2.useCallback((val, el) => {
+  const id = React3.useId();
+  const nodes = React3.useRef(/* @__PURE__ */ new Map());
+  const register = React3.useCallback((val, el) => {
     if (el) nodes.current.set(val, el);
     else nodes.current.delete(val);
   }, []);
-  return /* @__PURE__ */ React2.createElement(TabsCtx.Provider, { value: { value: v, set, id, variant, register, nodes } }, /* @__PURE__ */ React2.createElement("div", { className: cx("alt-tabs", className), "data-variant": variant, ...rest }, children));
+  return /* @__PURE__ */ React3.createElement(TabsCtx.Provider, { value: { value: v, set, id, variant, register, nodes } }, /* @__PURE__ */ React3.createElement("div", { className: cx("alt-tabs", className), "data-variant": variant, ...rest }, children));
 }
 function TabsList({ className, children, ...rest }) {
-  const t = React2.useContext(TabsCtx);
-  const listRef = React2.useRef(null);
+  const t = React3.useContext(TabsCtx);
+  const listRef = React3.useRef(null);
   const pill = t.variant === "segmented";
-  const [ind, setInd] = React2.useState({ x: 0, w: 0, ready: false });
-  const measure = React2.useCallback(() => {
+  const [ind, setInd] = React3.useState({ x: 0, w: 0, ready: false });
+  const measure = React3.useCallback(() => {
     if (!pill) return;
     const el = t.nodes.current.get(t.value);
     if (!el) return;
@@ -696,7 +978,7 @@ function TabsList({ className, children, ...rest }) {
   useIsoLayoutEffect(() => {
     measure();
   }, [measure]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!pill) return;
     const ro = new ResizeObserver(measure);
     if (listRef.current) ro.observe(listRef.current);
@@ -713,7 +995,7 @@ function TabsList({ className, children, ...rest }) {
       t.nodes.current.get(next)?.focus();
     }
   };
-  return /* @__PURE__ */ React2.createElement("div", { ref: listRef, role: "tablist", className: cx("alt-tabs-list", className), onKeyDown, ...rest }, pill && /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement("div", { ref: listRef, role: "tablist", className: cx("alt-tabs-list", className), onKeyDown, ...rest }, pill && /* @__PURE__ */ React3.createElement(
     "span",
     {
       className: "alt-tabs-indicator",
@@ -724,9 +1006,9 @@ function TabsList({ className, children, ...rest }) {
   ), children);
 }
 function TabsTrigger({ value, className, children, ...rest }) {
-  const t = React2.useContext(TabsCtx);
+  const t = React3.useContext(TabsCtx);
   const on = t.value === value;
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     "button",
     {
       ref: (el) => t.register(value, el),
@@ -744,21 +1026,21 @@ function TabsTrigger({ value, className, children, ...rest }) {
   );
 }
 function TabsContent({ value, className, ...rest }) {
-  const t = React2.useContext(TabsCtx);
+  const t = React3.useContext(TabsCtx);
   if (t.value !== value) return null;
-  return /* @__PURE__ */ React2.createElement("div", { role: "tabpanel", id: `${t.id}-p-${value}`, "aria-labelledby": `${t.id}-t-${value}`, tabIndex: 0, className: cx("alt-tabs-content", className), ...rest });
+  return /* @__PURE__ */ React3.createElement("div", { role: "tabpanel", id: `${t.id}-p-${value}`, "aria-labelledby": `${t.id}-t-${value}`, tabIndex: 0, className: cx("alt-tabs-content", className), ...rest });
 }
 function Slider({ value, defaultValue = 50, onValueChange, min = 0, max = 100, step = 1, disabled, format = (v) => v, className, ...rest }) {
   const [v, set] = useControllable(value, defaultValue, onValueChange);
-  const [drag, setDrag] = React2.useState(false);
-  const track = React2.useRef(null);
+  const [drag, setDrag] = React3.useState(false);
+  const track = React3.useRef(null);
   const clamp = (n) => Math.min(max, Math.max(min, Math.round((n - min) / step) * step + min));
   const fromX = (x) => {
     const r = track.current.getBoundingClientRect();
     return clamp(min + (x - r.left) / r.width * (max - min));
   };
   const pct = (v - min) / (max - min) * 100;
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     "div",
     {
       className: cx("alt-slider", className),
@@ -778,8 +1060,8 @@ function Slider({ value, defaultValue = 50, onValueChange, min = 0, max = 100, s
       onPointerCancel: () => setDrag(false),
       ...rest
     },
-    /* @__PURE__ */ React2.createElement("div", { className: "alt-slider-track", ref: track }, /* @__PURE__ */ React2.createElement("div", { className: "alt-slider-fill", style: { width: pct + "%" } })),
-    /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React3.createElement("div", { className: "alt-slider-track", ref: track }, /* @__PURE__ */ React3.createElement("div", { className: "alt-slider-fill", style: { width: pct + "%" } })),
+    /* @__PURE__ */ React3.createElement(
       "div",
       {
         className: "alt-slider-thumb",
@@ -800,13 +1082,13 @@ function Slider({ value, defaultValue = 50, onValueChange, min = 0, max = 100, s
           }
         }
       },
-      /* @__PURE__ */ React2.createElement("span", { className: "alt-slider-bubble", "aria-hidden": "true" }, format(v))
+      /* @__PURE__ */ React3.createElement("span", { className: "alt-slider-bubble", "aria-hidden": "true" }, format(v))
     )
   );
 }
 function Progress({ value = null, max = 100, className, ...rest }) {
   const ind = value === null || value === void 0;
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     "div",
     {
       role: "progressbar",
@@ -817,31 +1099,72 @@ function Progress({ value = null, max = 100, className, ...rest }) {
       "data-indeterminate": ind ? "" : void 0,
       ...rest
     },
-    /* @__PURE__ */ React2.createElement("div", { className: "alt-progress-fill", style: ind ? void 0 : { width: `${Math.max(0, Math.min(100, value / max * 100))}%` } })
+    /* @__PURE__ */ React3.createElement("div", { className: "alt-progress-fill", style: ind ? void 0 : { width: `${Math.max(0, Math.min(100, value / max * 100))}%` } })
   );
 }
-function Badge({ tone = "neutral", variant = "plate", lamp, dot, className, children, ...rest }) {
+function Badge({ children, skeleton, ...props }) {
+  const missing = skeleton !== false && children === void 0;
+  useReportWaiting(missing || skeleton !== false && hasPromise(children));
+  const arrival = useArrival(missing);
+  if (!useHasWaited(missing || hasPromise(children))) return /* @__PURE__ */ React3.createElement(BadgeFace, { ...props }, children);
+  const h = hint(skeleton);
+  return /* @__PURE__ */ React3.createElement(
+    Await,
+    {
+      inline: true,
+      shape: "block",
+      enabled: skeleton !== false,
+      imprint: /* @__PURE__ */ React3.createElement("span", { className: "alt-skeleton alt-badge-imprint", "data-variant": props.variant === "count" ? "count" : void 0, style: { width: h.width } })
+    },
+    /* @__PURE__ */ React3.createElement(Arrive, { when: arrival }, /* @__PURE__ */ React3.createElement(BadgeLanded, { ...props }, children))
+  );
+}
+function BadgeLanded({ children, ...props }) {
+  return /* @__PURE__ */ React3.createElement(BadgeFace, { ...props }, readChildren(children));
+}
+function BadgeFace({ tone = "neutral", variant = "plate", lamp, dot, className, children, ...rest }) {
   const v = variant === "soft" ? "tinted" : variant;
   const showLamp = v !== "count" && !!(lamp ?? (dot || tone === "positive" || tone === "caution" || tone === "critical"));
   const label = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
-  const [stamp, setStamp] = React2.useState(void 0);
-  const [lit, setLit] = React2.useState(0);
-  const prev = React2.useRef({ tone, label });
-  React2.useEffect(() => {
+  const [stamp, setStamp] = React3.useState(void 0);
+  const [lit, setLit] = React3.useState(0);
+  const prev = React3.useRef({ tone, label });
+  React3.useEffect(() => {
     const p = prev.current;
     if (p.label !== label) setStamp((x) => x === "a" ? "b" : "a");
     if (p.tone !== tone) setLit((n) => n + 1);
     prev.current = { tone, label };
   }, [tone, label]);
-  return /* @__PURE__ */ React2.createElement("span", { className: cx("alt-badge", className), "data-tone": tone, "data-variant": v, "data-stamp": stamp, ...rest }, showLamp && /* @__PURE__ */ React2.createElement("span", { key: lit, className: "alt-badge-lamp", "aria-hidden": "true", "data-lit": lit ? "" : void 0, "data-pulse": lamp === "pulse" ? "" : void 0 }), children);
+  return /* @__PURE__ */ React3.createElement("span", { className: cx("alt-badge", className), "data-tone": tone, "data-variant": v, "data-stamp": stamp, ...rest }, showLamp && /* @__PURE__ */ React3.createElement("span", { key: lit, className: "alt-badge-lamp", "aria-hidden": "true", "data-lit": lit ? "" : void 0, "data-pulse": lamp === "pulse" ? "" : void 0 }), children);
 }
 var TINTS = ["accent", "positive", "caution", "critical"];
-function Avatar({ name, src, size = 36, status, live, presence, lamp, className, style, onClick, ...rest }) {
+function Avatar({ skeleton, ...props }) {
+  const missing = skeleton !== false && props.name === void 0;
+  const promised = isPromise(props.name) || isPromise(props.src);
+  useReportWaiting(missing || skeleton !== false && isPromise(props.name));
+  const arrival = useArrival(missing);
+  if (!useHasWaited(missing || promised)) return /* @__PURE__ */ React3.createElement(AvatarFace, { ...props, name: props.name ?? "", src: props.src });
+  const size = props.size ?? 36;
+  return /* @__PURE__ */ React3.createElement(
+    Await,
+    {
+      inline: true,
+      shape: "circle",
+      enabled: skeleton !== false,
+      imprint: /* @__PURE__ */ React3.createElement("span", { className: "alt-skeleton alt-avatar-imprint", "data-shape": "circle", style: { width: size, height: size } })
+    },
+    /* @__PURE__ */ React3.createElement(Arrive, { when: arrival }, /* @__PURE__ */ React3.createElement(AvatarLanded, { ...props }))
+  );
+}
+function AvatarLanded(props) {
+  return /* @__PURE__ */ React3.createElement(AvatarFace, { ...props, name: readPromised(props.name) ?? "", src: readPromised(props.src) });
+}
+function AvatarFace({ name, src, size = 36, status, live, presence, lamp, className, style, onClick, ...rest }) {
   const initials = name.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
   const tint = TINTS[[...name].reduce((a, c) => a + c.charCodeAt(0), 0) % TINTS.length];
   const label = [name, status, live && "live"].filter(Boolean).join(", ");
   const showLamp = (lamp ?? size >= 24) && (status === "active" || status === "idle");
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     "span",
     {
       className: cx("alt-avatar", className),
@@ -864,29 +1187,29 @@ function Avatar({ name, src, size = 36, status, live, presence, lamp, className,
       style: { ["--size"]: size + "px", ...style },
       ...rest
     },
-    /* @__PURE__ */ React2.createElement("span", { className: "alt-avatar-shadow", "aria-hidden": "true" }),
-    /* @__PURE__ */ React2.createElement("span", { className: "alt-avatar-face" }, src ? /* @__PURE__ */ React2.createElement("img", { src, alt: "" }) : initials),
-    showLamp && /* @__PURE__ */ React2.createElement("span", { className: "alt-avatar-lamp", "aria-hidden": "true" })
+    /* @__PURE__ */ React3.createElement("span", { className: "alt-avatar-shadow", "aria-hidden": "true" }),
+    /* @__PURE__ */ React3.createElement("span", { className: "alt-avatar-face" }, src ? /* @__PURE__ */ React3.createElement("img", { src, alt: "" }) : initials),
+    showLamp && /* @__PURE__ */ React3.createElement("span", { className: "alt-avatar-lamp", "aria-hidden": "true" })
   );
 }
 function AvatarGroup({ className, children, max, style, ...rest }) {
-  const all = React2.Children.toArray(children);
+  const all = React3.Children.toArray(children);
   const shown = max ? all.slice(0, max) : all;
   const extra = all.length - shown.length;
   const size = shown[0]?.props?.size || 36;
-  return /* @__PURE__ */ React2.createElement("div", { className: cx("alt-avatar-group", className), style: { ["--size"]: size + "px", ...style }, ...rest }, shown, extra > 0 && /* @__PURE__ */ React2.createElement("span", { className: "alt-avatar", "data-tint": "more", role: "img", "aria-label": `${extra} more`, style: { ["--size"]: size + "px" } }, /* @__PURE__ */ React2.createElement("span", { className: "alt-avatar-shadow", "aria-hidden": "true" }), /* @__PURE__ */ React2.createElement("span", { className: "alt-avatar-face" }, "+", extra)));
+  return /* @__PURE__ */ React3.createElement("div", { className: cx("alt-avatar-group", className), style: { ["--size"]: size + "px", ...style }, ...rest }, shown, extra > 0 && /* @__PURE__ */ React3.createElement("span", { className: "alt-avatar", "data-tint": "more", role: "img", "aria-label": `${extra} more`, style: { ["--size"]: size + "px" } }, /* @__PURE__ */ React3.createElement("span", { className: "alt-avatar-shadow", "aria-hidden": "true" }), /* @__PURE__ */ React3.createElement("span", { className: "alt-avatar-face" }, "+", extra)));
 }
-var LINE_WIDTHS = ["100%", "94%", "82%", "97%", "64%"];
+var LINE_WIDTHS2 = ["100%", "94%", "82%", "97%", "64%"];
 function Skeleton({ loaded, shape = "block", lines = 3, width, height, radius, className, style, children, ...rest }) {
-  const [reveal, setReveal] = React2.useState(null);
-  const was = React2.useRef(loaded);
-  React2.useEffect(() => {
+  const [reveal, setReveal] = React3.useState(null);
+  const was = React3.useRef(loaded);
+  React3.useEffect(() => {
     if (loaded && !was.current) setReveal(riseDelay());
     if (!loaded) setReveal(null);
     was.current = loaded;
   }, [loaded]);
   if (loaded) {
-    return /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React3.createElement(
       "div",
       {
         className: cx("alt-reveal", className),
@@ -894,14 +1217,14 @@ function Skeleton({ loaded, shape = "block", lines = 3, width, height, radius, c
         style: { ...reveal ? { ["--alt-rise-delay"]: reveal + "ms" } : null, ...style },
         ...rest
       },
-      /* @__PURE__ */ React2.createElement("div", { className: "alt-reveal-inner" }, children)
+      /* @__PURE__ */ React3.createElement("div", { className: "alt-reveal-inner" }, children)
     );
   }
   if (shape === "text") {
-    return /* @__PURE__ */ React2.createElement("div", { className: cx("alt-skeleton-lines", className), "aria-hidden": "true", style: { width, ...style }, ...rest }, Array.from({ length: lines }, (_, i) => /* @__PURE__ */ React2.createElement("div", { key: i, className: "alt-skeleton", "data-shape": "text", style: { width: i === lines - 1 && lines > 1 ? "60%" : LINE_WIDTHS[i % LINE_WIDTHS.length], height: height ?? 12, ["--i"]: i } })));
+    return /* @__PURE__ */ React3.createElement("div", { className: cx("alt-skeleton-lines", className), "aria-hidden": "true", style: { width, ...style }, ...rest }, Array.from({ length: lines }, (_, i) => /* @__PURE__ */ React3.createElement("div", { key: i, className: "alt-skeleton", "data-shape": "text", style: { width: i === lines - 1 && lines > 1 ? "60%" : LINE_WIDTHS2[i % LINE_WIDTHS2.length], height: height ?? 12, ["--i"]: i } })));
   }
   const d = shape === "circle" ? width ?? height ?? 40 : void 0;
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     "div",
     {
       className: cx("alt-skeleton", className),
@@ -915,13 +1238,13 @@ function Skeleton({ loaded, shape = "block", lines = 3, width, height, radius, c
 var toneIcon = { neutral: Icons.Info, accent: Icons.Info, positive: Icons.CircleCheck, caution: Icons.AlertTriangle, critical: Icons.AlertCircle };
 function Alert({ tone = "neutral", variant = "flat", title, action, icon: icon2, onDismiss, settle, className, style, children, ...rest }) {
   const I = toneIcon[tone];
-  const [closing, setClosing] = React2.useState(false);
+  const [closing, setClosing] = React3.useState(false);
   const { style: depthStyle, ...depth } = useDepth({ settle });
   const dismiss = () => {
     setClosing(true);
     window.setTimeout(() => onDismiss?.(), 400);
   };
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     "div",
     {
       role: tone === "critical" ? "alert" : "status",
@@ -933,16 +1256,16 @@ function Alert({ tone = "neutral", variant = "flat", title, action, icon: icon2,
       style: { ...depthStyle, ...style },
       ...rest
     },
-    /* @__PURE__ */ React2.createElement("div", { className: "alt-alert-inner" }, /* @__PURE__ */ React2.createElement("span", { className: "alt-alert-icon", "aria-hidden": "true" }, icon2 ?? /* @__PURE__ */ React2.createElement(I, { size: 18 })), /* @__PURE__ */ React2.createElement("div", { className: "alt-alert-body" }, title && /* @__PURE__ */ React2.createElement("p", { className: "alt-alert-title" }, title), children && /* @__PURE__ */ React2.createElement("div", { className: "alt-alert-text" }, children)), action && /* @__PURE__ */ React2.createElement("div", { className: "alt-alert-action" }, action), onDismiss && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "alt-alert-close", "aria-label": "Dismiss", onClick: dismiss }, /* @__PURE__ */ React2.createElement(Icons.X, { size: 14 })))
+    /* @__PURE__ */ React3.createElement("div", { className: "alt-alert-inner" }, /* @__PURE__ */ React3.createElement("span", { className: "alt-alert-icon", "aria-hidden": "true" }, icon2 ?? /* @__PURE__ */ React3.createElement(I, { size: 18 })), /* @__PURE__ */ React3.createElement("div", { className: "alt-alert-body" }, title && /* @__PURE__ */ React3.createElement("p", { className: "alt-alert-title" }, title), children && /* @__PURE__ */ React3.createElement("div", { className: "alt-alert-text" }, children)), action && /* @__PURE__ */ React3.createElement("div", { className: "alt-alert-action" }, action), onDismiss && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "alt-alert-close", "aria-label": "Dismiss", onClick: dismiss }, /* @__PURE__ */ React3.createElement(Icons.X, { size: 14 })))
   );
 }
 function AlertStack({ children, expanded, defaultExpanded = false, onExpandedChange, moreLabel = (n) => `+${n} more`, lessLabel = "Show less", className, ...rest }) {
-  const list = React2.Children.toArray(children).filter(React2.isValidElement);
+  const list = React3.Children.toArray(children).filter(React3.isValidElement);
   const [open, setOpen] = useControllable(expanded, defaultExpanded, onExpandedChange);
   const topKey = list[0]?.key;
-  const prevTop = React2.useRef(topKey);
-  const [risen, setRisen] = React2.useState(0);
-  React2.useEffect(() => {
+  const prevTop = React3.useRef(topKey);
+  const [risen, setRisen] = React3.useState(0);
+  React3.useEffect(() => {
     if (prevTop.current !== topKey) {
       prevTop.current = topKey;
       if (topKey != null) setRisen((r) => r + 1);
@@ -950,20 +1273,20 @@ function AlertStack({ children, expanded, defaultExpanded = false, onExpandedCha
   }, [topKey]);
   const hidden = list.length - 1;
   const all = open || hidden < 1;
-  return /* @__PURE__ */ React2.createElement("div", { className: cx("alt-alert-stack", className), "data-expanded": all ? "" : void 0, "data-sheets": all ? void 0 : Math.min(hidden, 2), ...rest }, all ? list.map((el, i) => /* @__PURE__ */ React2.createElement("div", { key: el.key, className: "alt-alert-stack-item", style: { ["--i"]: i } }, el)) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, list.slice(1, 3).map((el, i) => /* @__PURE__ */ React2.createElement("span", { key: el.key, className: "alt-alert-sheet", "aria-hidden": "true", "data-tone": el.props.tone ?? "neutral", style: { ["--i"]: i + 1 } })), /* @__PURE__ */ React2.createElement("div", { key: String(topKey) + risen, className: "alt-alert-stack-top", "data-risen": risen ? "" : void 0 }, list[0])), hidden > 0 && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "alt-alert-more", "aria-expanded": all, onClick: () => setOpen(!open) }, all ? lessLabel : moreLabel(hidden)));
+  return /* @__PURE__ */ React3.createElement("div", { className: cx("alt-alert-stack", className), "data-expanded": all ? "" : void 0, "data-sheets": all ? void 0 : Math.min(hidden, 2), ...rest }, all ? list.map((el, i) => /* @__PURE__ */ React3.createElement("div", { key: el.key, className: "alt-alert-stack-item", style: { ["--i"]: i } }, el)) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, list.slice(1, 3).map((el, i) => /* @__PURE__ */ React3.createElement("span", { key: el.key, className: "alt-alert-sheet", "aria-hidden": "true", "data-tone": el.props.tone ?? "neutral", style: { ["--i"]: i + 1 } })), /* @__PURE__ */ React3.createElement("div", { key: String(topKey) + risen, className: "alt-alert-stack-top", "data-risen": risen ? "" : void 0 }, list[0])), hidden > 0 && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "alt-alert-more", "aria-expanded": all, onClick: () => setOpen(!open) }, all ? lessLabel : moreLabel(hidden)));
 }
 function Accordion({ items, type = "single", defaultValue = [], className, ...rest }) {
-  const [open, setOpen] = React2.useState(defaultValue);
-  const id = React2.useId();
+  const [open, setOpen] = React3.useState(defaultValue);
+  const id = React3.useId();
   const toggle = (v) => setOpen((o) => o.includes(v) ? o.filter((x) => x !== v) : type === "single" ? [v] : [...o, v]);
-  return /* @__PURE__ */ React2.createElement("div", { className: cx("alt-acc", className), ...rest }, items.map((it) => {
+  return /* @__PURE__ */ React3.createElement("div", { className: cx("alt-acc", className), ...rest }, items.map((it) => {
     const on = open.includes(it.value);
-    return /* @__PURE__ */ React2.createElement("div", { key: it.value, className: "alt-acc-item", "data-state": on ? "open" : "closed" }, /* @__PURE__ */ React2.createElement("h3", { className: "alt-acc-heading" }, /* @__PURE__ */ React2.createElement("button", { type: "button", className: "alt-acc-trigger", "aria-expanded": on, "aria-controls": `${id}-${it.value}`, onClick: () => toggle(it.value) }, /* @__PURE__ */ React2.createElement("span", null, it.title), /* @__PURE__ */ React2.createElement(Icons.ChevronDown, { className: "alt-acc-chevron", size: 18 }))), /* @__PURE__ */ React2.createElement("div", { className: "alt-acc-panel", id: `${id}-${it.value}`, role: "region", ...on ? {} : inert }, /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("div", { className: "alt-acc-content" }, it.content))));
+    return /* @__PURE__ */ React3.createElement("div", { key: it.value, className: "alt-acc-item", "data-state": on ? "open" : "closed" }, /* @__PURE__ */ React3.createElement("h3", { className: "alt-acc-heading" }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "alt-acc-trigger", "aria-expanded": on, "aria-controls": `${id}-${it.value}`, onClick: () => toggle(it.value) }, /* @__PURE__ */ React3.createElement("span", null, it.title), /* @__PURE__ */ React3.createElement(Icons.ChevronDown, { className: "alt-acc-chevron", size: 18 }))), /* @__PURE__ */ React3.createElement("div", { className: "alt-acc-panel", id: `${id}-${it.value}`, role: "region", ...on ? {} : inert }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("div", { className: "alt-acc-content" }, it.content))));
   }));
 }
 function HoldButton({ onConfirm, duration = 1e3, variant = "danger", holdingLabel, doneLabel, repeatable = false, className, children, style, disabled, onClick, ...rest }) {
-  const [state, setState] = React2.useState("idle");
-  const timer = React2.useRef(void 0);
+  const [state, setState] = React3.useState("idle");
+  const timer = React3.useRef(void 0);
   const done = state === "done";
   const start = () => {
     if (disabled || state !== "idle") return;
@@ -980,9 +1303,9 @@ function HoldButton({ onConfirm, duration = 1e3, variant = "danger", holdingLabe
     window.clearTimeout(timer.current);
     setState("idle");
   };
-  React2.useEffect(() => () => window.clearTimeout(timer.current), []);
+  React3.useEffect(() => () => window.clearTimeout(timer.current), []);
   const label = done ? doneLabel ?? children : state === "holding" ? holdingLabel ?? children : children;
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     Button,
     {
       ...rest,
@@ -1017,16 +1340,16 @@ function HoldButton({ onConfirm, duration = 1e3, variant = "danger", holdingLabe
       },
       onContextMenu: (e) => e.preventDefault()
     },
-    /* @__PURE__ */ React2.createElement("span", { className: "alt-hold-fill", "aria-hidden": "true" }),
-    /* @__PURE__ */ React2.createElement("span", { className: "alt-hold-text" }, label),
-    /* @__PURE__ */ React2.createElement("span", { className: "alt-sr", "aria-live": "polite" }, state === "holding" ? "Keep holding to confirm" : done ? "Confirmed" : "")
+    /* @__PURE__ */ React3.createElement("span", { className: "alt-hold-fill", "aria-hidden": "true" }),
+    /* @__PURE__ */ React3.createElement("span", { className: "alt-hold-text" }, label),
+    /* @__PURE__ */ React3.createElement("span", { className: "alt-sr", "aria-live": "polite" }, state === "holding" ? "Keep holding to confirm" : done ? "Confirmed" : "")
   );
 }
 function ScrollArea({ header, maxHeight = 280, className, children, ...rest }) {
-  const body = React2.useRef(null);
-  const inner = React2.useRef(null);
-  const [edges, setEdges] = React2.useState({ top: false, bottom: false });
-  const update = React2.useCallback(() => {
+  const body = React3.useRef(null);
+  const inner = React3.useRef(null);
+  const [edges, setEdges] = React3.useState({ top: false, bottom: false });
+  const update = React3.useCallback(() => {
     const el = body.current;
     if (!el) return;
     const top = el.scrollTop > 1, bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 1;
@@ -1039,15 +1362,15 @@ function ScrollArea({ header, maxHeight = 280, className, children, ...rest }) {
     if (inner.current) ro.observe(inner.current);
     return () => ro.disconnect();
   }, [update]);
-  return /* @__PURE__ */ React2.createElement("div", { className: cx("alt-scroll", className), "data-top": edges.top ? "" : void 0, "data-bottom": edges.bottom ? "" : void 0, ...rest }, header && /* @__PURE__ */ React2.createElement("div", { className: "alt-scroll-header" }, header), /* @__PURE__ */ React2.createElement("div", { className: "alt-scroll-body", ref: body, onScroll: update, style: { maxHeight }, tabIndex: 0, "aria-label": rest["aria-label"] }, /* @__PURE__ */ React2.createElement("div", { ref: inner }, children)), /* @__PURE__ */ React2.createElement("span", { className: "alt-scroll-lip", "data-edge": "top", "aria-hidden": "true" }), /* @__PURE__ */ React2.createElement("span", { className: "alt-scroll-lip", "data-edge": "bottom", "aria-hidden": "true" }));
+  return /* @__PURE__ */ React3.createElement("div", { className: cx("alt-scroll", className), "data-top": edges.top ? "" : void 0, "data-bottom": edges.bottom ? "" : void 0, ...rest }, header && /* @__PURE__ */ React3.createElement("div", { className: "alt-scroll-header" }, header), /* @__PURE__ */ React3.createElement("div", { className: "alt-scroll-body", ref: body, onScroll: update, style: { maxHeight }, tabIndex: 0, "aria-label": rest["aria-label"] }, /* @__PURE__ */ React3.createElement("div", { ref: inner }, children)), /* @__PURE__ */ React3.createElement("span", { className: "alt-scroll-lip", "data-edge": "top", "aria-hidden": "true" }), /* @__PURE__ */ React3.createElement("span", { className: "alt-scroll-lip", "data-edge": "bottom", "aria-hidden": "true" }));
 }
 function DropZone({ onFiles, accept, multiple = true, state, className, children, ...rest }) {
-  const [armed, setArmed] = React2.useState(false);
-  const [over, setOver] = React2.useState(false);
-  const [landed, setLanded] = React2.useState(0);
-  const input = React2.useRef(null);
+  const [armed, setArmed] = React3.useState(false);
+  const [over, setOver] = React3.useState(false);
+  const [landed, setLanded] = React3.useState(0);
+  const input = React3.useRef(null);
   const { style: depthStyle, ...depth } = useDepth({ settle: landed || void 0 });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     let n = 0;
     const hasFiles = (e) => Array.from(e.dataTransfer?.types || []).includes("Files");
     const enter = (e) => {
@@ -1085,7 +1408,7 @@ function DropZone({ onFiles, accept, multiple = true, state, className, children
     setLanded((x) => x + 1);
   };
   const visual = state ?? (over ? "over" : armed ? "armed" : "idle");
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     "div",
     {
       className: cx("alt-drop", className),
@@ -1114,7 +1437,7 @@ function DropZone({ onFiles, accept, multiple = true, state, className, children
       },
       ...rest
     },
-    /* @__PURE__ */ React2.createElement("input", { ref: input, type: "file", hidden: true, accept, multiple, onChange: (e) => take(Array.from(e.target.files || [])) }),
+    /* @__PURE__ */ React3.createElement("input", { ref: input, type: "file", hidden: true, accept, multiple, onChange: (e) => take(Array.from(e.target.files || [])) }),
     children
   );
 }
@@ -1125,12 +1448,12 @@ var move = (arr, from, to) => {
   return a;
 };
 function SortableList({ items, getKey, onReorder, renderItem, getLabel = (i) => String(getKey(i)), gap = 8, className, ...rest }) {
-  const nodes = React2.useRef(/* @__PURE__ */ new Map());
-  const before = React2.useRef(/* @__PURE__ */ new Map());
-  const start = React2.useRef(null);
-  const [drag, setDrag] = React2.useState(null);
-  const [kb, setKb] = React2.useState(null);
-  const [msg, setMsg] = React2.useState("");
+  const nodes = React3.useRef(/* @__PURE__ */ new Map());
+  const before = React3.useRef(/* @__PURE__ */ new Map());
+  const start = React3.useRef(null);
+  const [drag, setDrag] = React3.useState(null);
+  const [kb, setKb] = React3.useState(null);
+  const [msg, setMsg] = React3.useState("");
   const snapshot = () => {
     before.current.clear();
     nodes.current.forEach((el, k) => before.current.set(k, el.getBoundingClientRect().top));
@@ -1209,7 +1532,7 @@ function SortableList({ items, getKey, onReorder, renderItem, getLabel = (i) =>
   const s = start.current;
   const h = drag && s ? s.hs[drag.from] + gap : 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;
-  return /* @__PURE__ */ React2.createElement("div", { className: cx("alt-sort", className), style: { gap }, role: "list", "aria-label": rest["aria-label"], "data-dragging": drag ? "" : void 0 }, drag && s && /* @__PURE__ */ React2.createElement("div", { className: "alt-sort-slot", "aria-hidden": "true", style: { top: slotTop, height: s.hs[drag.from] } }), items.map((item, i) => {
+  return /* @__PURE__ */ React3.createElement("div", { className: cx("alt-sort", className), style: { gap }, role: "list", "aria-label": rest["aria-label"], "data-dragging": drag ? "" : void 0 }, drag && s && /* @__PURE__ */ React3.createElement("div", { className: "alt-sort-slot", "aria-hidden": "true", style: { top: slotTop, height: s.hs[drag.from] } }), items.map((item, i) => {
     const key = keys[i];
     const held = drag?.key === key || kb === key;
     let shift = 0;
@@ -1218,7 +1541,7 @@ function SortableList({ items, getKey, onReorder, renderItem, getLabel = (i) =>
       if (drag.to < drag.from && i >= drag.to && i < drag.from) shift = h;
     }
     const transform = drag?.key === key ? `translateY(${drag.dy}px)` : shift ? `translateY(${shift}px)` : void 0;
-    return /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React3.createElement(
       "div",
       {
         key,
@@ -1240,14 +1563,14 @@ function SortableList({ items, getKey, onReorder, renderItem, getLabel = (i) =>
         onPointerCancel: onPointerUp,
         onKeyDown: (e) => onKeyDown(e, key, i)
       },
-      /* @__PURE__ */ React2.createElement("span", { className: "alt-sort-grip", "aria-hidden": "true" }, /* @__PURE__ */ React2.createElement("svg", { width: "12", height: "16", viewBox: "0 0 12 16", fill: "currentColor" }, /* @__PURE__ */ React2.createElement("circle", { cx: "3", cy: "3", r: "1.3" }), /* @__PURE__ */ React2.createElement("circle", { cx: "9", cy: "3", r: "1.3" }), /* @__PURE__ */ React2.createElement("circle", { cx: "3", cy: "8", r: "1.3" }), /* @__PURE__ */ React2.createElement("circle", { cx: "9", cy: "8", r: "1.3" }), /* @__PURE__ */ React2.createElement("circle", { cx: "3", cy: "13", r: "1.3" }), /* @__PURE__ */ React2.createElement("circle", { cx: "9", cy: "13", r: "1.3" }))),
-      /* @__PURE__ */ React2.createElement("div", { className: "alt-sort-body" }, renderItem(item, { held }))
+      /* @__PURE__ */ React3.createElement("span", { className: "alt-sort-grip", "aria-hidden": "true" }, /* @__PURE__ */ React3.createElement("svg", { width: "12", height: "16", viewBox: "0 0 12 16", fill: "currentColor" }, /* @__PURE__ */ React3.createElement("circle", { cx: "3", cy: "3", r: "1.3" }), /* @__PURE__ */ React3.createElement("circle", { cx: "9", cy: "3", r: "1.3" }), /* @__PURE__ */ React3.createElement("circle", { cx: "3", cy: "8", r: "1.3" }), /* @__PURE__ */ React3.createElement("circle", { cx: "9", cy: "8", r: "1.3" }), /* @__PURE__ */ React3.createElement("circle", { cx: "3", cy: "13", r: "1.3" }), /* @__PURE__ */ React3.createElement("circle", { cx: "9", cy: "13", r: "1.3" }))),
+      /* @__PURE__ */ React3.createElement("div", { className: "alt-sort-body" }, renderItem(item, { held }))
     );
-  }), /* @__PURE__ */ React2.createElement("span", { className: "alt-sr", "aria-live": "assertive" }, msg));
+  }), /* @__PURE__ */ React3.createElement("span", { className: "alt-sr", "aria-live": "assertive" }, msg));
 }
 
 // project/components/src/pile.tsx
-var React3 = __toESM(require("react"), 1);
+var React4 = __toESM(require("react"), 1);
 function Pile({
   count,
   interactive,
@@ -1269,15 +1592,15 @@ function Pile({
   const live = interactive || openable;
   const [isOpen, setOpen] = useControllable(open, defaultOpen, onOpenChange);
   const { mounted, state } = usePresence(openable && isOpen, 260);
-  const root = React3.useRef(null);
-  const top = React3.useRef(null);
-  const id = React3.useId();
+  const root = React4.useRef(null);
+  const top = React4.useRef(null);
+  const id = React4.useId();
   const toggle = () => {
     if (openable) setOpen(!isOpen);
   };
-  const close = React3.useCallback(() => setOpen(false), [setOpen]);
+  const close = React4.useCallback(() => setOpen(false), [setOpen]);
   useOutside(root, openable && isOpen, close);
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "div",
     {
       ref: root,
@@ -1286,8 +1609,8 @@ function Pile({
       "data-open": openable && isOpen ? "" : void 0,
       ...rest
     },
-    Array.from({ length: sheets }, (_, i) => /* @__PURE__ */ React3.createElement("span", { key: i, className: "alt-pile-sheet", "aria-hidden": "true", style: { ["--i"]: i + 1 } })),
-    /* @__PURE__ */ React3.createElement(
+    Array.from({ length: sheets }, (_, i) => /* @__PURE__ */ React4.createElement("span", { key: i, className: "alt-pile-sheet", "aria-hidden": "true", style: { ["--i"]: i + 1 } })),
+    /* @__PURE__ */ React4.createElement(
       "div",
       {
         ref: top,
@@ -1306,8 +1629,8 @@ function Pile({
       },
       children
     ),
-    n > 1 && /* @__PURE__ */ React3.createElement("span", { className: "alt-pile-count", "aria-label": `${n} items` }, n),
-    openable && mounted && /* @__PURE__ */ React3.createElement(
+    n > 1 && /* @__PURE__ */ React4.createElement("span", { className: "alt-pile-count", "aria-label": `${n} items` }, n),
+    openable && mounted && /* @__PURE__ */ React4.createElement(
       "div",
       {
         className: "alt-pile-list",
@@ -1321,23 +1644,23 @@ function Pile({
           }
         }
       },
-      /* @__PURE__ */ React3.createElement("ul", { className: "alt-pile-list-inner", style: { maxHeight } }, items.map((it, i) => /* @__PURE__ */ React3.createElement("li", { key: getKey ? getKey(it, i) : i }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "alt-pile-item", style: { ["--i"]: Math.min(i, 10) }, onClick: () => onSelect?.(it, i) }, renderItem(it, { index: i })))))
+      /* @__PURE__ */ React4.createElement("ul", { className: "alt-pile-list-inner", style: { maxHeight } }, items.map((it, i) => /* @__PURE__ */ React4.createElement("li", { key: getKey ? getKey(it, i) : i }, /* @__PURE__ */ React4.createElement("button", { type: "button", className: "alt-pile-item", style: { ["--i"]: Math.min(i, 10) }, onClick: () => onSelect?.(it, i) }, renderItem(it, { index: i })))))
     )
   );
 }
 
 // project/components/src/overlays.tsx
-var React4 = __toESM(require("react"), 1);
+var React5 = __toESM(require("react"), 1);
 var EXIT_3 = 160;
 var EXIT_4 = 190;
 var EXIT_5 = 220;
 var lastTipClose = 0;
 var openCard = null;
 function Tooltip({ content, side = "top", delay = 450, defaultOpen = false, children }) {
-  const [open, setOpen] = React4.useState(defaultOpen);
-  const [warm, setWarm] = React4.useState(false);
-  const timer = React4.useRef(void 0);
-  const id = React4.useId();
+  const [open, setOpen] = React5.useState(defaultOpen);
+  const [warm, setWarm] = React5.useState(false);
+  const timer = React5.useRef(void 0);
+  const id = React5.useId();
   const { mounted, state } = usePresence(open, EXIT_3);
   const show = () => {
     const isWarm = Date.now() - lastTipClose < 400;
@@ -1352,8 +1675,8 @@ function Tooltip({ content, side = "top", delay = 450, defaultOpen = false, chil
       return false;
     });
   };
-  React4.useEffect(() => () => window.clearTimeout(timer.current), []);
-  return /* @__PURE__ */ React4.createElement(
+  React5.useEffect(() => () => window.clearTimeout(timer.current), []);
+  return /* @__PURE__ */ React5.createElement(
     "span",
     {
       className: "alt-tip-anchor",
@@ -1369,27 +1692,27 @@ function Tooltip({ content, side = "top", delay = 450, defaultOpen = false, chil
         if (e.key === "Escape") hide();
       }
     },
-    React4.cloneElement(children, { "aria-describedby": open ? id : void 0 }),
-    mounted && /* @__PURE__ */ React4.createElement("span", { role: "tooltip", id, className: "alt-tip", "data-side": side, "data-state": state, "data-warm": warm ? "" : void 0 }, content)
+    React5.cloneElement(children, { "aria-describedby": open ? id : void 0 }),
+    mounted && /* @__PURE__ */ React5.createElement("span", { role: "tooltip", id, className: "alt-tip", "data-side": side, "data-state": state, "data-warm": warm ? "" : void 0 }, content)
   );
 }
 function Popover({ trigger, children, open, defaultOpen = false, onOpenChange, side = "bottom", align = "start", className, ...rest }) {
   const [isOpen, set] = useControllable(open, defaultOpen, onOpenChange);
-  const ref = React4.useRef(null);
-  const panel = React4.useRef(null);
-  const id = React4.useId();
+  const ref = React5.useRef(null);
+  const panel = React5.useRef(null);
+  const id = React5.useId();
   const { mounted, state } = usePresence(isOpen, EXIT_3);
-  const close = React4.useCallback(() => set(false), [set]);
+  const close = React5.useCallback(() => set(false), [set]);
   useOutside(ref, isOpen, close);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (state !== "open" || !panel.current) return;
     const f = panel.current.querySelector('input, textarea, select, button, [href], [tabindex]:not([tabindex="-1"])');
     (f || panel.current).focus({ preventScroll: true });
   }, [state]);
-  return /* @__PURE__ */ React4.createElement("span", { className: "alt-pop-anchor", ref }, React4.cloneElement(trigger, { "aria-expanded": isOpen, "aria-controls": id, "aria-haspopup": "dialog", onClick: (e) => {
+  return /* @__PURE__ */ React5.createElement("span", { className: "alt-pop-anchor", ref }, React5.cloneElement(trigger, { "aria-expanded": isOpen, "aria-controls": id, "aria-haspopup": "dialog", onClick: (e) => {
     trigger.props.onClick?.(e);
     set(!isOpen);
-  } }), mounted && /* @__PURE__ */ React4.createElement(
+  } }), mounted && /* @__PURE__ */ React5.createElement(
     "div",
     {
       ref: panel,
@@ -1413,15 +1736,15 @@ function Popover({ trigger, children, open, defaultOpen = false, onOpenChange, s
   ));
 }
 function DropdownMenu({ trigger, items, align = "start", side = "bottom", defaultOpen = false, className }) {
-  const [open, setOpen] = React4.useState(defaultOpen);
-  const [active, setActive] = React4.useState(-1);
-  const [hl, setHl] = React4.useState(null);
-  const anchor = React4.useRef(null);
-  const menu = React4.useRef(null);
-  const refs = React4.useRef([]);
-  const id = React4.useId();
+  const [open, setOpen] = React5.useState(defaultOpen);
+  const [active, setActive] = React5.useState(-1);
+  const [hl, setHl] = React5.useState(null);
+  const anchor = React5.useRef(null);
+  const menu = React5.useRef(null);
+  const refs = React5.useRef([]);
+  const id = React5.useId();
   const { mounted, state } = usePresence(open, EXIT_3);
-  const close = React4.useCallback(() => {
+  const close = React5.useCallback(() => {
     setOpen(false);
     setActive(-1);
   }, []);
@@ -1431,7 +1754,7 @@ function DropdownMenu({ trigger, items, align = "start", side = "bottom", defaul
     const el = active >= 0 ? refs.current[active] : null;
     setHl(el ? { y: el.offsetTop, h: el.offsetHeight } : null);
   }, [active, mounted]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (state === "open") menu.current?.focus({ preventScroll: true });
   }, [state]);
   const choose = (i) => {
@@ -1465,7 +1788,7 @@ function DropdownMenu({ trigger, items, align = "start", side = "bottom", defaul
   };
   let n = 0;
   const activeTone = active >= 0 ? items[active].tone : void 0;
-  return /* @__PURE__ */ React4.createElement("span", { className: "alt-pop-anchor", ref: anchor }, React4.cloneElement(trigger, {
+  return /* @__PURE__ */ React5.createElement("span", { className: "alt-pop-anchor", ref: anchor }, React5.cloneElement(trigger, {
     "aria-haspopup": "menu",
     "aria-expanded": open,
     "aria-controls": id,
@@ -1480,7 +1803,7 @@ function DropdownMenu({ trigger, items, align = "start", side = "bottom", defaul
         setActive(enabled[0]);
       }
     }
-  }), mounted && /* @__PURE__ */ React4.createElement(
+  }), mounted && /* @__PURE__ */ React5.createElement(
     "div",
     {
       ref: menu,
@@ -1496,7 +1819,7 @@ function DropdownMenu({ trigger, items, align = "start", side = "bottom", defaul
       onKeyDown,
       onPointerLeave: () => setActive(-1)
     },
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(
       "span",
       {
         className: "alt-menu-hl",
@@ -1506,10 +1829,10 @@ function DropdownMenu({ trigger, items, align = "start", side = "bottom", defaul
       }
     ),
     items.map((it, i) => {
-      if (it.type === "separator") return /* @__PURE__ */ React4.createElement("div", { key: i, className: "alt-menu-sep", role: "separator" });
-      if (it.type === "label") return /* @__PURE__ */ React4.createElement("div", { key: i, className: "alt-menu-label", style: { ["--i"]: n++ } }, it.label);
+      if (it.type === "separator") return /* @__PURE__ */ React5.createElement("div", { key: i, className: "alt-menu-sep", role: "separator" });
+      if (it.type === "label") return /* @__PURE__ */ React5.createElement("div", { key: i, className: "alt-menu-label", style: { ["--i"]: n++ } }, it.label);
       const item = it;
-      return /* @__PURE__ */ React4.createElement(
+      return /* @__PURE__ */ React5.createElement(
         "div",
         {
           key: i,
@@ -1526,9 +1849,9 @@ function DropdownMenu({ trigger, items, align = "start", side = "bottom", defaul
           onPointerMove: () => !item.disabled && active !== i && setActive(i),
           onClick: () => choose(i)
         },
-        item.icon && /* @__PURE__ */ React4.createElement("span", { className: "alt-menu-icon" }, item.icon),
-        /* @__PURE__ */ React4.createElement("span", { className: "alt-menu-text" }, item.label),
-        item.shortcut && /* @__PURE__ */ React4.createElement("span", { className: "alt-menu-shortcut" }, item.shortcut)
+        item.icon && /* @__PURE__ */ React5.createElement("span", { className: "alt-menu-icon" }, item.icon),
+        /* @__PURE__ */ React5.createElement("span", { className: "alt-menu-text" }, item.label),
+        item.shortcut && /* @__PURE__ */ React5.createElement("span", { className: "alt-menu-shortcut" }, item.shortcut)
       );
     })
   ));
@@ -1536,10 +1859,10 @@ function DropdownMenu({ trigger, items, align = "start", side = "bottom", defaul
 function HoverCard({ trigger, children, side = "bottom", align = "start", openDelay = 400, closeDelay = 250, open, defaultOpen = false, onOpenChange, className }) {
   const [isOpen, set] = useControllable(open, defaultOpen, onOpenChange);
   const { mounted, state } = usePresence(isOpen, EXIT_3);
-  const timer = React4.useRef(void 0);
-  const closeMe = React4.useRef(() => set(false));
+  const timer = React5.useRef(void 0);
+  const closeMe = React5.useRef(() => set(false));
   closeMe.current = () => set(false);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!isOpen) return;
     const mine = () => closeMe.current();
     if (openCard && openCard !== mine) {
@@ -1563,8 +1886,8 @@ function HoverCard({ trigger, children, side = "bottom", align = "start", openDe
       if (isOpen) lastTipClose = Date.now();
     }, delay);
   };
-  React4.useEffect(() => () => window.clearTimeout(timer.current), []);
-  return /* @__PURE__ */ React4.createElement(
+  React5.useEffect(() => () => window.clearTimeout(timer.current), []);
+  return /* @__PURE__ */ React5.createElement(
     "span",
     {
       className: "alt-pop-anchor alt-hovercard-anchor",
@@ -1588,7 +1911,7 @@ function HoverCard({ trigger, children, side = "bottom", align = "start", openDe
       }
     },
     trigger,
-    mounted && /* @__PURE__ */ React4.createElement(
+    mounted && /* @__PURE__ */ React5.createElement(
       "div",
       {
         className: cx("alt-pop alt-hovercard", className),
@@ -1603,6 +1926,7 @@ function HoverCard({ trigger, children, side = "bottom", align = "start", openDe
 }
 var summits = 0;
 var summitTaken = () => summits > 0;
+var MODAL_FOCUS = "[data-autofocus], input, textarea, select";
 function useModal({
   open,
   onDismiss,
@@ -1612,12 +1936,13 @@ function useModal({
   dismissible = true,
   summit = false,
   autoFocus = true,
-  focusSelector = "[data-autofocus], input, textarea, select"
+  focusSelector = MODAL_FOCUS,
+  restoreFocus = autoFocus
 }) {
   const ctx = useAltitude();
-  const restore = React4.useRef(null);
+  const restore = React5.useRef(null);
   const presence = usePresence(open, exitMs);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!open) return;
     restore.current = document.activeElement;
     const pop = modal ? ctx?.pushLayer() : void 0;
@@ -1628,10 +1953,10 @@ function useModal({
       pop?.();
       if (modal) document.body.style.overflow = prev;
       if (summit) summits--;
-      if (autoFocus) restore.current?.focus?.({ preventScroll: true });
+      if (restoreFocus) restore.current?.focus?.({ preventScroll: true });
     };
   }, [open]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (presence.state !== "open" || !autoFocus) return;
     let raf = 0;
     const tryFocus = () => {
@@ -1664,15 +1989,39 @@ function useModal({
   };
   return { ...presence, onKeyDown };
 }
-function Dialog({ open, defaultOpen = false, onOpenChange, trigger, title, description, children, footer, size = "md", dismissible = true, className }) {
+function Dialog({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  children,
+  footer,
+  size = "md",
+  dismissible = true,
+  initialFocus = "first-field",
+  focusSelector = MODAL_FOCUS,
+  className
+}) {
   const [isOpen, set] = useControllable(open, defaultOpen, onOpenChange);
-  const panel = React4.useRef(null);
-  const id = React4.useId();
-  const { mounted, state, onKeyDown } = useModal({ open: isOpen, onDismiss: () => set(false), exitMs: EXIT_5, panel, dismissible, summit: true });
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, trigger && React4.cloneElement(trigger, { "aria-haspopup": "dialog", onClick: (e) => {
+  const panel = React5.useRef(null);
+  const id = React5.useId();
+  const { mounted, state, onKeyDown } = useModal({
+    open: isOpen,
+    onDismiss: () => set(false),
+    exitMs: EXIT_5,
+    panel,
+    dismissible,
+    summit: true,
+    autoFocus: initialFocus !== false,
+    focusSelector: initialFocus === "title" ? ".alt-dialog-title" : focusSelector,
+    restoreFocus: true
+  });
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, trigger && React5.cloneElement(trigger, { "aria-haspopup": "dialog", onClick: (e) => {
     trigger.props.onClick?.(e);
     set(true);
-  } }), mounted && /* @__PURE__ */ React4.createElement(Layer, null, /* @__PURE__ */ React4.createElement("div", { className: "alt-dialog-root", "data-state": state, onKeyDown }, /* @__PURE__ */ React4.createElement("div", { className: "alt-scrim", onClick: () => dismissible && set(false) }), /* @__PURE__ */ React4.createElement(
+  } }), mounted && /* @__PURE__ */ React5.createElement(Layer, null, /* @__PURE__ */ React5.createElement("div", { className: "alt-dialog-root", "data-state": state, onKeyDown }, /* @__PURE__ */ React5.createElement("div", { className: "alt-scrim", onClick: () => dismissible && set(false) }), /* @__PURE__ */ React5.createElement(
     "div",
     {
       ref: panel,
@@ -1684,10 +2033,10 @@ function Dialog({ open, defaultOpen = false, onOpenChange, trigger, title, descr
       className: cx("alt-dialog", className),
       "data-size": size
     },
-    /* @__PURE__ */ React4.createElement("div", { className: "alt-dialog-head" }, /* @__PURE__ */ React4.createElement("h2", { className: "alt-dialog-title", id: `${id}-t` }, title), description && /* @__PURE__ */ React4.createElement("p", { className: "alt-dialog-desc", id: `${id}-d` }, description)),
-    children && /* @__PURE__ */ React4.createElement("div", { className: "alt-dialog-body" }, children),
-    footer && /* @__PURE__ */ React4.createElement("div", { className: "alt-dialog-footer" }, footer),
-    dismissible && /* @__PURE__ */ React4.createElement(Button, { variant: "ghost", size: "sm", square: true, "aria-label": "Close", className: "alt-dialog-close", onClick: () => set(false) }, /* @__PURE__ */ React4.createElement(Icons.X, null))
+    /* @__PURE__ */ React5.createElement("div", { className: "alt-dialog-head" }, /* @__PURE__ */ React5.createElement("h2", { className: "alt-dialog-title", id: `${id}-t`, tabIndex: initialFocus === "title" ? -1 : void 0 }, title), description && /* @__PURE__ */ React5.createElement("p", { className: "alt-dialog-desc", id: `${id}-d` }, description)),
+    children && /* @__PURE__ */ React5.createElement("div", { className: "alt-dialog-body" }, children),
+    footer && /* @__PURE__ */ React5.createElement("div", { className: "alt-dialog-footer" }, footer),
+    dismissible && /* @__PURE__ */ React5.createElement(Button, { variant: "ghost", size: "sm", square: true, "aria-label": "Close", className: "alt-dialog-close", onClick: () => set(false) }, /* @__PURE__ */ React5.createElement(Icons.X, null))
   ))));
 }
 var toasts = [];
@@ -1717,16 +2066,16 @@ var toastIcon = { neutral: Icons.Info, positive: Icons.CircleCheck, caution: Ico
 var STACK = 3;
 var GAP = 8;
 function Toaster({ className }) {
-  const [, force] = React4.useReducer((n) => n + 1, 0);
-  const [expanded, setExpanded] = React4.useState(false);
-  const heights = React4.useRef(/* @__PURE__ */ new Map());
-  React4.useEffect(() => {
+  const [, force] = React5.useReducer((n) => n + 1, 0);
+  const [expanded, setExpanded] = React5.useState(false);
+  const heights = React5.useRef(/* @__PURE__ */ new Map());
+  React5.useEffect(() => {
     subs.add(force);
     return () => {
       subs.delete(force);
     };
   }, []);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (expanded) return;
     const timers = toasts.filter((t) => !t.leaving && t.duration > 0).map((t) => setTimeout(() => toast.dismiss(t.id), t.duration));
     return () => timers.forEach(clearTimeout);
@@ -1735,7 +2084,7 @@ function Toaster({ className }) {
   const frontH = live[0] ? heights.current.get(live[0].id) || 64 : 64;
   let offset = 0;
   const total = live.slice(0, 5).reduce((a, t) => a + (heights.current.get(t.id) || 64) + GAP, 0);
-  return /* @__PURE__ */ React4.createElement(Layer, null, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(Layer, null, /* @__PURE__ */ React5.createElement(
     "section",
     {
       "aria-label": "Notifications",
@@ -1777,7 +2126,7 @@ function Toaster({ className }) {
       }
       if (!t.leaving && i >= 0) offset += h + GAP;
       const I = toastIcon[t.tone || "neutral"];
-      return /* @__PURE__ */ React4.createElement(
+      return /* @__PURE__ */ React5.createElement(
         "div",
         {
           key: t.id,
@@ -1795,28 +2144,28 @@ function Toaster({ className }) {
           },
           style: { transform: `translateY(${y}) scale(${s})`, opacity: o, boxShadow: sh, zIndex: 100 - Math.max(i, 0), height: behind ? frontH : void 0, pointerEvents: o ? void 0 : "none" }
         },
-        /* @__PURE__ */ React4.createElement("span", { className: "alt-toast-icon" }, /* @__PURE__ */ React4.createElement(I, { size: 18 })),
-        /* @__PURE__ */ React4.createElement("div", { className: "alt-toast-body" }, /* @__PURE__ */ React4.createElement("p", { className: "alt-toast-title" }, t.title), t.description && /* @__PURE__ */ React4.createElement("p", { className: "alt-toast-desc" }, t.description)),
-        t.action && /* @__PURE__ */ React4.createElement(Button, { size: "sm", variant: "secondary", className: "alt-toast-action", onClick: () => {
+        /* @__PURE__ */ React5.createElement("span", { className: "alt-toast-icon" }, /* @__PURE__ */ React5.createElement(I, { size: 18 })),
+        /* @__PURE__ */ React5.createElement("div", { className: "alt-toast-body" }, /* @__PURE__ */ React5.createElement("p", { className: "alt-toast-title" }, t.title), t.description && /* @__PURE__ */ React5.createElement("p", { className: "alt-toast-desc" }, t.description)),
+        t.action && /* @__PURE__ */ React5.createElement(Button, { size: "sm", variant: "secondary", className: "alt-toast-action", onClick: () => {
           t.action.onClick();
           toast.dismiss(t.id);
         } }, t.action.label),
-        /* @__PURE__ */ React4.createElement("button", { type: "button", className: "alt-toast-close", "aria-label": "Dismiss", onClick: () => toast.dismiss(t.id) }, /* @__PURE__ */ React4.createElement(Icons.X, { size: 14 }))
+        /* @__PURE__ */ React5.createElement("button", { type: "button", className: "alt-toast-close", "aria-label": "Dismiss", onClick: () => toast.dismiss(t.id) }, /* @__PURE__ */ React5.createElement(Icons.X, { size: 14 }))
       );
     })
   ));
 }
 
 // project/components/src/nav.tsx
-var React5 = __toESM(require("react"), 1);
+var React6 = __toESM(require("react"), 1);
 function Drilldown({ root, className, ...rest }) {
-  const [path, setPath] = React5.useState([root]);
-  const [dir, setDir] = React5.useState("down");
-  const [out, setOut] = React5.useState(null);
-  const view = React5.useRef(null);
+  const [path, setPath] = React6.useState([root]);
+  const [dir, setDir] = React6.useState("down");
+  const [out, setOut] = React6.useState(null);
+  const view = React6.useRef(null);
   const depth = path.length - 1;
   const current = path[depth];
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!out) return;
     const t = setTimeout(() => setOut(null), 220);
     return () => clearTimeout(t);
@@ -1832,18 +2181,18 @@ function Drilldown({ root, className, ...rest }) {
     setOut(current);
     setPath(path.slice(0, i + 1));
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     view.current?.focus({ preventScroll: true });
   }, [current.id]);
-  const render = (node) => node.children?.length ? /* @__PURE__ */ React5.createElement("ul", { className: "alt-drill-list" }, node.children.map((c) => /* @__PURE__ */ React5.createElement("li", { key: c.id }, /* @__PURE__ */ React5.createElement("button", { type: "button", className: "alt-drill-row", onClick: () => go(c) }, /* @__PURE__ */ React5.createElement("span", { className: "alt-drill-row-text" }, /* @__PURE__ */ React5.createElement("span", { className: "alt-drill-row-title" }, c.title), c.description && /* @__PURE__ */ React5.createElement("span", { className: "alt-drill-row-desc" }, c.description)), c.children?.length ? /* @__PURE__ */ React5.createElement("span", { className: "alt-drill-count" }, c.children.length) : null, /* @__PURE__ */ React5.createElement(Icons.ChevronDown, { className: "alt-drill-chev", size: 16 }))))) : /* @__PURE__ */ React5.createElement("div", { className: "alt-drill-leaf" }, node.content);
+  const render = (node) => node.children?.length ? /* @__PURE__ */ React6.createElement("ul", { className: "alt-drill-list" }, node.children.map((c) => /* @__PURE__ */ React6.createElement("li", { key: c.id }, /* @__PURE__ */ React6.createElement("button", { type: "button", className: "alt-drill-row", onClick: () => go(c) }, /* @__PURE__ */ React6.createElement("span", { className: "alt-drill-row-text" }, /* @__PURE__ */ React6.createElement("span", { className: "alt-drill-row-title" }, c.title), c.description && /* @__PURE__ */ React6.createElement("span", { className: "alt-drill-row-desc" }, c.description)), c.children?.length ? /* @__PURE__ */ React6.createElement("span", { className: "alt-drill-count" }, c.children.length) : null, /* @__PURE__ */ React6.createElement(Icons.ChevronDown, { className: "alt-drill-chev", size: 16 }))))) : /* @__PURE__ */ React6.createElement("div", { className: "alt-drill-leaf" }, node.content);
   const sheets = Math.min(depth, 3);
-  return /* @__PURE__ */ React5.createElement("div", { className: cx("alt-drill", className), "data-dir": dir, ...rest }, /* @__PURE__ */ React5.createElement("nav", { className: "alt-crumbs", "aria-label": "Location" }, /* @__PURE__ */ React5.createElement("ol", null, path.map((n, i) => /* @__PURE__ */ React5.createElement("li", { key: n.id, "data-d": Math.min(i, 3), style: { ["--d"]: i, zIndex: i + 1 }, "data-current": i === depth ? "" : void 0, "data-new": i === depth && dir === "down" && i > 0 ? "" : void 0 }, /* @__PURE__ */ React5.createElement("button", { type: "button", onClick: () => back(i), "aria-current": i === depth ? "location" : void 0 }, n.title))))), /* @__PURE__ */ React5.createElement("div", { className: "alt-pile alt-drill-pile", "data-sheets": sheets }, Array.from({ length: sheets }, (_, i) => /* @__PURE__ */ React5.createElement("span", { key: i, className: "alt-pile-sheet", "aria-hidden": "true", style: { ["--i"]: i + 1 } })), /* @__PURE__ */ React5.createElement("div", { className: "alt-pile-top alt-drill-stage" }, out && /* @__PURE__ */ React5.createElement("div", { key: "out-" + out.id, className: "alt-drill-view", "data-phase": "out", "aria-hidden": "true" }, render(out)), /* @__PURE__ */ React5.createElement("div", { key: current.id, ref: view, tabIndex: -1, className: "alt-drill-view", "data-phase": "in", "aria-label": typeof current.title === "string" ? current.title : void 0 }, render(current)))));
+  return /* @__PURE__ */ React6.createElement("div", { className: cx("alt-drill", className), "data-dir": dir, ...rest }, /* @__PURE__ */ React6.createElement("nav", { className: "alt-crumbs", "aria-label": "Location" }, /* @__PURE__ */ React6.createElement("ol", null, path.map((n, i) => /* @__PURE__ */ React6.createElement("li", { key: n.id, "data-d": Math.min(i, 3), style: { ["--d"]: i, zIndex: i + 1 }, "data-current": i === depth ? "" : void 0, "data-new": i === depth && dir === "down" && i > 0 ? "" : void 0 }, /* @__PURE__ */ React6.createElement("button", { type: "button", onClick: () => back(i), "aria-current": i === depth ? "location" : void 0 }, n.title))))), /* @__PURE__ */ React6.createElement("div", { className: "alt-pile alt-drill-pile", "data-sheets": sheets }, Array.from({ length: sheets }, (_, i) => /* @__PURE__ */ React6.createElement("span", { key: i, className: "alt-pile-sheet", "aria-hidden": "true", style: { ["--i"]: i + 1 } })), /* @__PURE__ */ React6.createElement("div", { className: "alt-pile-top alt-drill-stage" }, out && /* @__PURE__ */ React6.createElement("div", { key: "out-" + out.id, className: "alt-drill-view", "data-phase": "out", "aria-hidden": "true" }, render(out)), /* @__PURE__ */ React6.createElement("div", { key: current.id, ref: view, tabIndex: -1, className: "alt-drill-view", "data-phase": "in", "aria-label": typeof current.title === "string" ? current.title : void 0 }, render(current)))));
 }
 
 // project/components/src/sheet.tsx
-var React6 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 var EXIT_42 = 190;
-var SheetCtx = React6.createContext(null);
+var SheetCtx = React7.createContext(null);
 function Sheet({
   open,
   defaultOpen = false,
@@ -1859,28 +2208,28 @@ function Sheet({
   ...rest
 }) {
   const [isOpen, set] = useControllable(open, defaultOpen, onOpenChange);
-  const panel = React6.useRef(null);
-  const scroller = React6.useRef(null);
-  const inner = React6.useRef(null);
-  const id = React6.useId();
-  const [titled, setTitled] = React6.useState(false);
-  const [described, setDescribed] = React6.useState(false);
-  const [edges, setEdges] = React6.useState({ top: false, bottom: false });
-  const [drag, setDrag] = React6.useState(null);
-  const pull = React6.useRef(null);
-  const [panelEl, setPanelEl] = React6.useState(null);
-  const panelRef = React6.useCallback((el) => {
+  const panel = React7.useRef(null);
+  const scroller = React7.useRef(null);
+  const inner = React7.useRef(null);
+  const id = React7.useId();
+  const [titled, setTitled] = React7.useState(false);
+  const [described, setDescribed] = React7.useState(false);
+  const [edges, setEdges] = React7.useState({ top: false, bottom: false });
+  const [drag, setDrag] = React7.useState(null);
+  const pull = React7.useRef(null);
+  const [panelEl, setPanelEl] = React7.useState(null);
+  const panelRef = React7.useCallback((el) => {
     panel.current = el;
     setPanelEl(el);
   }, []);
-  const underSummit = React6.useMemo(() => isOpen && summitTaken(), [isOpen]);
-  const close = React6.useCallback(() => set(false), [set]);
+  const underSummit = React7.useMemo(() => isOpen && summitTaken(), [isOpen]);
+  const close = React7.useCallback(() => set(false), [set]);
   const { mounted, state, onKeyDown } = useModal({ open: isOpen, onDismiss: close, exitMs: EXIT_42, panel, modal, dismissible, autoFocus: !underSummit });
   useApproach(side === "bottom" && dismissible);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (isOpen) setDrag(null);
   }, [isOpen]);
-  const measure = React6.useCallback(() => {
+  const measure = React7.useCallback(() => {
     const el = scroller.current;
     if (!el) return;
     const top = el.scrollTop > 1, bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 1;
@@ -1916,17 +2265,17 @@ function Sheet({
       close();
     } else setDrag(null);
   };
-  const ctx = React6.useMemo(() => ({ titleId: `${id}-t`, descId: `${id}-d`, setTitled, setDescribed }), [id]);
+  const ctx = React7.useMemo(() => ({ titleId: `${id}-t`, descId: `${id}-d`, setTitled, setDescribed }), [id]);
   const dragging = !!drag && !drag.leaving && !!pull.current;
   const dragStyle = drag ? drag.leaving ? { transform: `translateY(${drag.dy + 24}px)` } : { transform: `translateY(${drag.dy}px)`, transition: dragging ? "none" : void 0 } : void 0;
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, trigger && React6.cloneElement(trigger, {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, trigger && React7.cloneElement(trigger, {
     "aria-haspopup": "dialog",
     "aria-expanded": isOpen,
     onClick: (e) => {
       trigger.props.onClick?.(e);
       set(modal ? true : !isOpen);
     }
-  }), mounted && /* @__PURE__ */ React6.createElement(Layer, null, /* @__PURE__ */ React6.createElement(SheetCtx.Provider, { value: ctx }, /* @__PURE__ */ React6.createElement("div", { className: "alt-sheet-root", "data-state": state, "data-exit": !isOpen ? "" : void 0, "data-modal": modal ? "" : void 0, onKeyDown }, modal && /* @__PURE__ */ React6.createElement("div", { className: "alt-scrim", onClick: () => dismissible && close() }), /* @__PURE__ */ React6.createElement(
+  }), mounted && /* @__PURE__ */ React7.createElement(Layer, null, /* @__PURE__ */ React7.createElement(SheetCtx.Provider, { value: ctx }, /* @__PURE__ */ React7.createElement("div", { className: "alt-sheet-root", "data-state": state, "data-exit": !isOpen ? "" : void 0, "data-modal": modal ? "" : void 0, onKeyDown }, modal && /* @__PURE__ */ React7.createElement("div", { className: "alt-scrim", onClick: () => dismissible && close() }), /* @__PURE__ */ React7.createElement(
     "div",
     {
       ref: panelRef,
@@ -1944,7 +2293,7 @@ function Sheet({
       style: { ...style, ...dragStyle },
       ...rest
     },
-    side === "bottom" && dismissible && /* @__PURE__ */ React6.createElement(
+    side === "bottom" && dismissible && /* @__PURE__ */ React7.createElement(
       "span",
       {
         className: "alt-sheet-pull",
@@ -1956,35 +2305,35 @@ function Sheet({
         onPointerCancel: onPullUp
       }
     ),
-    /* @__PURE__ */ React6.createElement("div", { className: "alt-sheet-scroll", ref: scroller, onScroll: measure }, /* @__PURE__ */ React6.createElement("div", { className: "alt-sheet-inner", ref: inner }, children)),
-    dismissible && /* @__PURE__ */ React6.createElement(Button, { variant: "ghost", size: "sm", square: true, "aria-label": "Close", className: "alt-sheet-close", onClick: close }, /* @__PURE__ */ React6.createElement(Icons.X, null))
+    /* @__PURE__ */ React7.createElement("div", { className: "alt-sheet-scroll", ref: scroller, onScroll: measure }, /* @__PURE__ */ React7.createElement("div", { className: "alt-sheet-inner", ref: inner }, children)),
+    dismissible && /* @__PURE__ */ React7.createElement(Button, { variant: "ghost", size: "sm", square: true, "aria-label": "Close", className: "alt-sheet-close", onClick: close }, /* @__PURE__ */ React7.createElement(Icons.X, null))
   )))));
 }
 function SheetHeader({ className, ...p }) {
-  return /* @__PURE__ */ React6.createElement("div", { className: cx("alt-sheet-header", className), ...p });
+  return /* @__PURE__ */ React7.createElement("div", { className: cx("alt-sheet-header", className), ...p });
 }
 function SheetTitle({ className, ...p }) {
-  const c = React6.useContext(SheetCtx);
-  React6.useEffect(() => {
+  const c = React7.useContext(SheetCtx);
+  React7.useEffect(() => {
     c?.setTitled(true);
     return () => c?.setTitled(false);
   }, [c]);
-  return /* @__PURE__ */ React6.createElement("h2", { id: c?.titleId, className: cx("alt-sheet-title", className), ...p });
+  return /* @__PURE__ */ React7.createElement("h2", { id: c?.titleId, className: cx("alt-sheet-title", className), ...p });
 }
 function SheetDescription({ className, ...p }) {
-  const c = React6.useContext(SheetCtx);
-  React6.useEffect(() => {
+  const c = React7.useContext(SheetCtx);
+  React7.useEffect(() => {
     c?.setDescribed(true);
     return () => c?.setDescribed(false);
   }, [c]);
-  return /* @__PURE__ */ React6.createElement("p", { id: c?.descId, className: cx("alt-sheet-desc", className), ...p });
+  return /* @__PURE__ */ React7.createElement("p", { id: c?.descId, className: cx("alt-sheet-desc", className), ...p });
 }
 function SheetFooter({ className, ...p }) {
-  return /* @__PURE__ */ React6.createElement("div", { className: cx("alt-sheet-footer", className), ...p });
+  return /* @__PURE__ */ React7.createElement("div", { className: cx("alt-sheet-footer", className), ...p });
 }
 
 // project/components/src/command.tsx
-var React7 = __toESM(require("react"), 1);
+var React8 = __toESM(require("react"), 1);
 var EXIT_52 = 220;
 function commandScore(text, query) {
   const t = text.toLowerCase(), q = query.toLowerCase().trim();
@@ -2035,18 +2384,18 @@ function matchRanges(label, query) {
   return out;
 }
 function Marked({ text, ranges }) {
-  if (!ranges.length) return /* @__PURE__ */ React7.createElement(React7.Fragment, null, text);
+  if (!ranges.length) return /* @__PURE__ */ React8.createElement(React8.Fragment, null, text);
   const parts = [];
   let i = 0;
   ranges.forEach(([a, b], k) => {
     if (a > i) parts.push(text.slice(i, a));
-    parts.push(/* @__PURE__ */ React7.createElement("mark", { key: k, className: "alt-cmd-match" }, text.slice(a, b)));
+    parts.push(/* @__PURE__ */ React8.createElement("mark", { key: k, className: "alt-cmd-match" }, text.slice(a, b)));
     i = b;
   });
   if (i < text.length) parts.push(text.slice(i));
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, parts);
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, parts);
 }
-var SearchIcon = () => /* @__PURE__ */ React7.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement("circle", { cx: "11", cy: "11", r: "7" }), /* @__PURE__ */ React7.createElement("path", { d: "M20 20l-3.5-3.5" }));
+var SearchIcon = () => /* @__PURE__ */ React8.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", "aria-hidden": "true" }, /* @__PURE__ */ React8.createElement("circle", { cx: "11", cy: "11", r: "7" }), /* @__PURE__ */ React8.createElement("path", { d: "M20 20l-3.5-3.5" }));
 var ms = (cs, name, fallback) => parseFloat(cs.getPropertyValue(name)) || fallback;
 function CommandPalette({
   items,
@@ -2058,6 +2407,8 @@ function CommandPalette({
   filter,
   empty,
   shortcut = "k",
+  query: queryProp,
+  defaultQuery = "",
   onQueryChange,
   closeOnSelect = true,
   hints = true,
@@ -2065,26 +2416,30 @@ function CommandPalette({
   ...rest
 }) {
   const [isOpen, set] = useControllable(open, defaultOpen, onOpenChange);
-  const [query, setQuery] = React7.useState("");
-  const [active, setActive] = React7.useState(0);
-  const [onset, setOnset] = React7.useState(true);
-  const [said, setSaid] = React7.useState("");
-  const panel = React7.useRef(null);
-  const viewport = React7.useRef(null);
-  const list = React7.useRef(null);
-  const sizer = React7.useRef(null);
-  const rowEls = React7.useRef(/* @__PURE__ */ new Map());
-  const prevTops = React7.useRef(null);
-  const byKeyboard = React7.useRef(false);
-  const [panelEl, setPanelEl] = React7.useState(null);
-  const panelRef = React7.useCallback((el) => {
+  const [innerQuery, setInnerQuery] = React8.useState(defaultQuery);
+  const query = queryProp ?? innerQuery;
+  const [active, setActive] = React8.useState(0);
+  const [onset, setOnset] = React8.useState(true);
+  const [said, setSaid] = React8.useState("");
+  const panel = React8.useRef(null);
+  const viewport = React8.useRef(null);
+  const list = React8.useRef(null);
+  const sizer = React8.useRef(null);
+  const rowEls = React8.useRef(/* @__PURE__ */ new Map());
+  const prevTops = React8.useRef(null);
+  const byKeyboard = React8.useRef(false);
+  const caretPlaced = React8.useRef(false);
+  const seed = React8.useRef(defaultQuery);
+  seed.current = defaultQuery;
+  const [panelEl, setPanelEl] = React8.useState(null);
+  const panelRef = React8.useCallback((el) => {
     panel.current = el;
     setPanelEl(el);
   }, []);
-  const id = React7.useId();
-  const close = React7.useCallback(() => set(false), [set]);
+  const id = React8.useId();
+  const close = React8.useCallback(() => set(false), [set]);
   const { mounted, state, onKeyDown } = useModal({ open: isOpen, onDismiss: close, exitMs: EXIT_52, panel, summit: true });
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!shortcut) return;
     const key = shortcut.toLowerCase();
     const on = (e) => {
@@ -2100,13 +2455,17 @@ function CommandPalette({
     window.addEventListener("keydown", on);
     return () => window.removeEventListener("keydown", on);
   }, [shortcut, isOpen, set]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (isOpen) {
-      setQuery("");
+      setInnerQuery(seed.current);
       setActive(0);
       setOnset(true);
+      caretPlaced.current = false;
     }
   }, [isOpen]);
+  React8.useEffect(() => {
+    setActive(0);
+  }, [query]);
   const q = query.trim();
   const score = filter ?? itemScore;
   const view = items.map((g, gi) => {
@@ -2170,14 +2529,14 @@ function CommandPalette({
       ro.disconnect();
     };
   }, [panelEl]);
-  const [hl, setHl] = React7.useState(null);
+  const [hl, setHl] = React8.useState(null);
   useIsoLayoutEffect(() => {
     const el = activeRow ? rowEls.current.get(activeRow.key) : null;
     setHl(el ? { y: el.offsetTop, h: el.offsetHeight } : null);
     if (el && byKeyboard.current) el.scrollIntoView({ block: "nearest" });
     byKeyboard.current = false;
   }, [activeRow?.key, rowsKey, panelEl]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!q) {
       setSaid("");
       return;
@@ -2207,7 +2566,7 @@ function CommandPalette({
   const label = rest["aria-label"] ?? "Command palette";
   const activeIndex = activeRow ? flat.indexOf(activeRow) : -1;
   let n = 0;
-  return /* @__PURE__ */ React7.createElement(Layer, null, /* @__PURE__ */ React7.createElement("div", { className: "alt-cmd-root", "data-state": state, onKeyDown }, /* @__PURE__ */ React7.createElement("div", { className: "alt-scrim", onClick: close }), /* @__PURE__ */ React7.createElement("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": label, tabIndex: -1, className: cx("alt-cmd", className), "data-ephemeral": ephemeral ? "" : void 0 }, /* @__PURE__ */ React7.createElement("div", { className: "alt-cmd-head" }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Layer, null, /* @__PURE__ */ React8.createElement("div", { className: "alt-cmd-root", "data-state": state, onKeyDown }, /* @__PURE__ */ React8.createElement("div", { className: "alt-scrim", onClick: close }), /* @__PURE__ */ React8.createElement("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": label, tabIndex: -1, className: cx("alt-cmd", className), "data-ephemeral": ephemeral ? "" : void 0 }, /* @__PURE__ */ React8.createElement("div", { className: "alt-cmd-head" }, /* @__PURE__ */ React8.createElement(
     Input,
     {
       className: "alt-cmd-field",
@@ -2221,17 +2580,23 @@ function CommandPalette({
       "aria-controls": `${id}-list`,
       "aria-autocomplete": "list",
       "aria-activedescendant": activeIndex >= 0 ? `${id}-o-${activeIndex}` : void 0,
-      leading: /* @__PURE__ */ React7.createElement(SearchIcon, null),
-      trailing: /* @__PURE__ */ React7.createElement("span", { "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement(Kbd, null, "esc")),
+      leading: /* @__PURE__ */ React8.createElement(SearchIcon, null),
+      trailing: /* @__PURE__ */ React8.createElement("span", { "aria-hidden": "true" }, /* @__PURE__ */ React8.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(
+  )), /* @__PURE__ */ React8.createElement("div", { className: "alt-cmd-viewport", ref: viewport }, /* @__PURE__ */ React8.createElement("div", { ref: sizer }, /* @__PURE__ */ React8.createElement("div", { className: "alt-cmd-list", ref: list, role: "listbox", id: `${id}-list`, "aria-label": "Results" }, /* @__PURE__ */ React8.createElement(
     "span",
     {
       className: "alt-cmd-hl",
@@ -2242,10 +2607,10 @@ function CommandPalette({
   ), view.map((v) => {
     const labelId = `${id}-g-${v.gi}`;
     const groupPredicted = !!v.g.predicted || v.rows.every((r) => r.item.predicted);
-    return /* @__PURE__ */ React7.createElement("div", { key: v.gk, role: "group", "aria-labelledby": v.g.label ? labelId : void 0, className: "alt-cmd-group" }, v.g.label && /* @__PURE__ */ React7.createElement("div", { id: labelId, role: "presentation", className: "alt-cmd-label", "data-flip": "g:" + v.gk, "data-predicted": groupPredicted ? "" : void 0 }, v.g.label), v.rows.map(() => {
+    return /* @__PURE__ */ React8.createElement("div", { key: v.gk, role: "group", "aria-labelledby": v.g.label ? labelId : void 0, className: "alt-cmd-group" }, v.g.label && /* @__PURE__ */ React8.createElement("div", { id: labelId, role: "presentation", className: "alt-cmd-label", "data-flip": "g:" + v.gk, "data-predicted": groupPredicted ? "" : void 0 }, v.g.label), v.rows.map(() => {
       const i = n++, r = flat[i], item = r.item;
       const on = r === activeRow;
-      return /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React8.createElement(
         "div",
         {
           key: r.key,
@@ -2266,16 +2631,16 @@ function CommandPalette({
           },
           onClick: () => choose(r)
         },
-        item.icon && /* @__PURE__ */ React7.createElement("span", { className: "alt-cmd-icon", "aria-hidden": "true" }, item.icon),
-        /* @__PURE__ */ React7.createElement("span", { className: "alt-cmd-text" }, /* @__PURE__ */ React7.createElement("span", { className: "alt-cmd-title" }, /* @__PURE__ */ React7.createElement(Marked, { text: item.label, ranges: matchRanges(item.label, q) })), item.description && /* @__PURE__ */ React7.createElement("span", { className: "alt-cmd-desc" }, item.description)),
-        item.shortcut && /* @__PURE__ */ React7.createElement("span", { className: "alt-cmd-keys" }, item.shortcut.map((k, j) => /* @__PURE__ */ React7.createElement(Kbd, { key: j }, k)))
+        item.icon && /* @__PURE__ */ React8.createElement("span", { className: "alt-cmd-icon", "aria-hidden": "true" }, item.icon),
+        /* @__PURE__ */ React8.createElement("span", { className: "alt-cmd-text" }, /* @__PURE__ */ React8.createElement("span", { className: "alt-cmd-title" }, /* @__PURE__ */ React8.createElement(Marked, { text: item.label, ranges: matchRanges(item.label, q) })), item.description && /* @__PURE__ */ React8.createElement("span", { className: "alt-cmd-desc" }, item.description)),
+        item.shortcut && /* @__PURE__ */ React8.createElement("span", { className: "alt-cmd-keys" }, item.shortcut.map((k, j) => /* @__PURE__ */ React8.createElement(Kbd, { key: j }, k)))
       );
     }));
-  })), q && !flat.length && /* @__PURE__ */ React7.createElement("div", { className: "alt-cmd-empty" }, typeof empty === "function" ? empty(q) : empty ?? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("b", null, "No results for \u201C", q, "\u201D"), "Try another word, or check the spelling.")))), hints && /* @__PURE__ */ React7.createElement("div", { className: "alt-cmd-foot", "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement(Kbd, null, "\u2191"), /* @__PURE__ */ React7.createElement(Kbd, null, "\u2193"), "Move"), /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement(Kbd, null, "\u21B5"), "Choose"), /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement(Kbd, null, "esc"), "Close")), /* @__PURE__ */ React7.createElement("span", { className: "alt-sr", "aria-live": "polite" }, said))));
+  })), q && !flat.length && /* @__PURE__ */ React8.createElement("div", { className: "alt-cmd-empty" }, typeof empty === "function" ? empty(q) : empty ?? /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("b", null, "No results for \u201C", q, "\u201D"), "Try another word, or check the spelling.")))), hints && /* @__PURE__ */ React8.createElement("div", { className: "alt-cmd-foot", "aria-hidden": "true" }, /* @__PURE__ */ React8.createElement("span", null, /* @__PURE__ */ React8.createElement(Kbd, null, "\u2191"), /* @__PURE__ */ React8.createElement(Kbd, null, "\u2193"), "Move"), /* @__PURE__ */ React8.createElement("span", null, /* @__PURE__ */ React8.createElement(Kbd, null, "\u21B5"), "Choose"), /* @__PURE__ */ React8.createElement("span", null, /* @__PURE__ */ React8.createElement(Kbd, null, "esc"), "Close")), /* @__PURE__ */ React8.createElement("span", { className: "alt-sr", "aria-live": "polite" }, said))));
 }
 
 // project/components/src/select.tsx
-var React8 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 var EXIT_32 = 160;
 function SelectItem(_) {
   return null;
@@ -2284,17 +2649,17 @@ var textOf = (o) => o.textValue ?? (typeof o.label === "string" || typeof o.labe
 function collect(items, children) {
   if (items) return items;
   const out = [];
-  React8.Children.forEach(children, (c) => {
-    if (!React8.isValidElement(c) || c.type !== SelectItem) return;
+  React9.Children.forEach(children, (c) => {
+    if (!React9.isValidElement(c) || c.type !== SelectItem) return;
     const p = c.props;
     out.push({ value: p.value, label: p.children, textValue: p.textValue, description: p.description, icon: p.icon, disabled: p.disabled });
   });
   return out;
 }
-var Tick = () => /* @__PURE__ */ React8.createElement("svg", { className: "alt-select-tick", viewBox: "0 0 16 16", width: "15", height: "15", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" }, /* @__PURE__ */ React8.createElement("path", { d: "M3.5 8.5l3 3 6-6.5", pathLength: 16 }));
-var Chevron = () => /* @__PURE__ */ React8.createElement(Icons.ChevronDown, { className: "alt-select-chevron", size: 16 });
+var Tick = () => /* @__PURE__ */ React9.createElement("svg", { className: "alt-select-tick", viewBox: "0 0 16 16", width: "15", height: "15", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" }, /* @__PURE__ */ React9.createElement("path", { d: "M3.5 8.5l3 3 6-6.5", pathLength: 16 }));
+var Chevron = () => /* @__PURE__ */ React9.createElement(Icons.ChevronDown, { className: "alt-select-chevron", size: 16 });
 function useSide(open, anchor, list) {
-  const [side, setSide] = React8.useState("bottom");
+  const [side, setSide] = React9.useState("bottom");
   useIsoLayoutEffect(() => {
     if (!open || !anchor.current || !list.current) return;
     const a = anchor.current.getBoundingClientRect(), need = list.current.offsetHeight + 12;
@@ -2312,9 +2677,9 @@ function useSide(open, anchor, list) {
   return side;
 }
 function useGlow(value) {
-  const [glow, setGlow] = React8.useState(void 0);
-  const first = React8.useRef(true);
-  React8.useEffect(() => {
+  const [glow, setGlow] = React9.useState(void 0);
+  const first = React9.useRef(true);
+  React9.useEffect(() => {
     if (first.current) {
       first.current = false;
       return;
@@ -2324,8 +2689,8 @@ function useGlow(value) {
   return glow;
 }
 function useLabelId(controlId, fallback) {
-  const [labelId, setLabelId] = React8.useState(void 0);
-  React8.useEffect(() => {
+  const [labelId, setLabelId] = React9.useState(void 0);
+  React9.useEffect(() => {
     const label = document.querySelector(`label[for="${CSS.escape(controlId)}"]`);
     if (!label) {
       setLabelId(void 0);
@@ -2337,8 +2702,8 @@ function useLabelId(controlId, fallback) {
   return labelId;
 }
 function OptionList({ id, options, active, value, state, side, query, empty, listRef, labelledBy, label, focusable, onActive, onChoose, onKeyDown }) {
-  const rows = React8.useRef([]);
-  const [hl, setHl] = React8.useState(null);
+  const rows = React9.useRef([]);
+  const [hl, setHl] = React9.useState(null);
   useIsoLayoutEffect(() => {
     const el = active >= 0 ? rows.current[active] : null;
     setHl(el ? { y: el.offsetTop, h: el.offsetHeight } : null);
@@ -2353,9 +2718,9 @@ function OptionList({ id, options, active, value, state, side, query, empty, lis
     if (!query || typeof o.label !== "string") return o.label;
     const i = t.toLowerCase().indexOf(query.toLowerCase());
     if (i < 0) return o.label;
-    return /* @__PURE__ */ React8.createElement(React8.Fragment, null, t.slice(0, i), /* @__PURE__ */ React8.createElement("mark", { className: "alt-cmd-match" }, t.slice(i, i + query.length)), t.slice(i + query.length));
+    return /* @__PURE__ */ React9.createElement(React9.Fragment, null, t.slice(0, i), /* @__PURE__ */ React9.createElement("mark", { className: "alt-cmd-match" }, t.slice(i, i + query.length)), t.slice(i + query.length));
   };
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     "div",
     {
       ref: listRef,
@@ -2371,8 +2736,8 @@ function OptionList({ id, options, active, value, state, side, query, empty, lis
       onKeyDown,
       onMouseDown: (e) => e.preventDefault()
     },
-    /* @__PURE__ */ React8.createElement("span", { className: "alt-menu-hl", "aria-hidden": "true", style: hl ? { transform: `translateY(${hl.y}px)`, height: hl.h, opacity: 1 } : { opacity: 0 } }),
-    options.map((o, i) => /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement("span", { className: "alt-menu-hl", "aria-hidden": "true", style: hl ? { transform: `translateY(${hl.y}px)`, height: hl.h, opacity: 1 } : { opacity: 0 } }),
+    options.map((o, i) => /* @__PURE__ */ React9.createElement(
       "div",
       {
         key: o.value,
@@ -2391,11 +2756,11 @@ function OptionList({ id, options, active, value, state, side, query, empty, lis
         },
         onClick: () => onChoose(i)
       },
-      o.icon && /* @__PURE__ */ React8.createElement("span", { className: "alt-menu-icon" }, o.icon),
-      /* @__PURE__ */ React8.createElement("span", { className: "alt-menu-text" }, marks(o), o.description && /* @__PURE__ */ React8.createElement("span", { className: "alt-select-desc" }, o.description)),
-      o.value === value && /* @__PURE__ */ React8.createElement(Tick, null)
+      o.icon && /* @__PURE__ */ React9.createElement("span", { className: "alt-menu-icon" }, o.icon),
+      /* @__PURE__ */ React9.createElement("span", { className: "alt-menu-text" }, marks(o), o.description && /* @__PURE__ */ React9.createElement("span", { className: "alt-select-desc" }, o.description)),
+      o.value === value && /* @__PURE__ */ React9.createElement(Tick, null)
     )),
-    !options.length && /* @__PURE__ */ React8.createElement("div", { className: "alt-select-empty" }, empty)
+    !options.length && /* @__PURE__ */ React9.createElement("div", { className: "alt-select-empty" }, empty)
   );
 }
 function Select({
@@ -2417,16 +2782,16 @@ function Select({
 }) {
   const options = collect(items, children);
   const [v, set] = useControllable(value, defaultValue, onValueChange);
-  const [open, setOpen] = React8.useState(defaultOpen);
-  const [active, setActive] = React8.useState(() => defaultOpen ? options.findIndex((o) => o.value === (value ?? defaultValue)) : -1);
-  const auto = React8.useId();
+  const [open, setOpen] = React9.useState(defaultOpen);
+  const [active, setActive] = React9.useState(() => defaultOpen ? options.findIndex((o) => o.value === (value ?? defaultValue)) : -1);
+  const auto = React9.useId();
   const triggerId = id ?? auto + "-trigger";
   const listId = auto + "-list";
-  const root = React8.useRef(null);
-  const field = React8.useRef(null);
-  const trigger = React8.useRef(null);
-  const list = React8.useRef(null);
-  const typed = React8.useRef({ text: "", at: 0 });
+  const root = React9.useRef(null);
+  const field = React9.useRef(null);
+  const trigger = React9.useRef(null);
+  const list = React9.useRef(null);
+  const typed = React9.useRef({ text: "", at: 0 });
   const { mounted, state } = usePresence(open, EXIT_32);
   const side = useSide(mounted, field, list);
   const glow = useGlow(v);
@@ -2435,12 +2800,12 @@ function Select({
   useKeyFocus();
   const chosen = options.find((o) => o.value === v);
   const enabled = options.map((o, i) => o.disabled ? -1 : i).filter((i) => i >= 0);
-  const close = React8.useCallback((refocus = true) => {
+  const close = React9.useCallback((refocus = true) => {
     setOpen(false);
     if (refocus) trigger.current?.focus({ preventScroll: true });
   }, []);
   useOutside(root, open, () => close(false));
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (state === "open") list.current?.focus({ preventScroll: true });
   }, [state]);
   const openAt = (i) => {
@@ -2512,7 +2877,7 @@ function Select({
       }
     }
   };
-  return /* @__PURE__ */ React8.createElement("div", { ref: root, className: cx("alt-select", className), "data-open": open ? "" : void 0 }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { ref: root, className: cx("alt-select", className), "data-open": open ? "" : void 0 }, /* @__PURE__ */ React9.createElement(
     "div",
     {
       ref: field,
@@ -2523,7 +2888,7 @@ function Select({
       "data-invalid": invalid ? "" : void 0,
       "data-disabled": disabled ? "" : void 0
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "button",
       {
         ref: trigger,
@@ -2540,10 +2905,10 @@ function Select({
         onClick: () => open ? close() : openAt(current()),
         onKeyDown: onTriggerKey
       },
-      /* @__PURE__ */ React8.createElement("span", { className: "alt-select-value", "data-placeholder": chosen ? void 0 : "", "data-glow": glow }, chosen ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, chosen.icon && /* @__PURE__ */ React8.createElement("span", { className: "alt-select-icon" }, chosen.icon), chosen.label) : placeholder),
-      /* @__PURE__ */ React8.createElement(Chevron, null)
+      /* @__PURE__ */ React9.createElement("span", { className: "alt-select-value", "data-placeholder": chosen ? void 0 : "", "data-glow": glow }, chosen ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, chosen.icon && /* @__PURE__ */ React9.createElement("span", { className: "alt-select-icon" }, chosen.icon), chosen.label) : placeholder),
+      /* @__PURE__ */ React9.createElement(Chevron, null)
     )
-  ), name && /* @__PURE__ */ React8.createElement("input", { type: "hidden", name, value: v }), mounted && /* @__PURE__ */ React8.createElement(
+  ), name && /* @__PURE__ */ React9.createElement("input", { type: "hidden", name, value: v }), mounted && /* @__PURE__ */ React9.createElement(
     OptionList,
     {
       id: listId,
@@ -2582,24 +2947,24 @@ function Combobox({
 }) {
   const [v, set] = useControllable(value, defaultValue, onValueChange);
   const chosen = items.find((o) => o.value === v);
-  const [text, setText] = React8.useState(chosen ? textOf(chosen) : "");
-  const [typing, setTyping] = React8.useState(false);
-  const [open, setOpen] = React8.useState(defaultOpen);
-  const [active, setActive] = React8.useState(() => defaultOpen ? items.findIndex((o) => o.value === (value ?? defaultValue)) : -1);
-  const auto = React8.useId();
+  const [text, setText] = React9.useState(chosen ? textOf(chosen) : "");
+  const [typing, setTyping] = React9.useState(false);
+  const [open, setOpen] = React9.useState(defaultOpen);
+  const [active, setActive] = React9.useState(() => defaultOpen ? items.findIndex((o) => o.value === (value ?? defaultValue)) : -1);
+  const auto = React9.useId();
   const inputId = id ?? auto + "-input";
   const listId = auto + "-list";
-  const root = React8.useRef(null);
-  const field = React8.useRef(null);
-  const input = React8.useRef(null);
-  const list = React8.useRef(null);
+  const root = React9.useRef(null);
+  const field = React9.useRef(null);
+  const input = React9.useRef(null);
+  const list = React9.useRef(null);
   const { mounted, state } = usePresence(open, EXIT_32);
   const side = useSide(mounted, field, list);
   const glow = useGlow(v);
   const labelId = useLabelId(inputId, auto + "-label");
   useApproach();
   useKeyFocus();
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (!typing) setText(chosen ? textOf(chosen) : "");
   }, [v]);
   const q = typing ? text.trim() : "";
@@ -2666,7 +3031,7 @@ function Combobox({
     if (!root.current?.contains(e.relatedTarget)) commit();
   };
   const filled = !!chosen && !typing;
-  return /* @__PURE__ */ React8.createElement("div", { ref: root, className: cx("alt-select alt-combobox", className), "data-open": open ? "" : void 0 }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { ref: root, className: cx("alt-select alt-combobox", className), "data-open": open ? "" : void 0 }, /* @__PURE__ */ React9.createElement(
     "div",
     {
       ref: field,
@@ -2677,7 +3042,7 @@ function Combobox({
       "data-invalid": invalid ? "" : void 0,
       "data-disabled": disabled ? "" : void 0
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "input",
       {
         ref: input,
@@ -2707,7 +3072,7 @@ function Combobox({
         }
       }
     ),
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "button",
       {
         type: "button",
@@ -2728,9 +3093,9 @@ function Combobox({
           input.current?.focus();
         }
       },
-      /* @__PURE__ */ React8.createElement(Chevron, null)
+      /* @__PURE__ */ React9.createElement(Chevron, null)
     )
-  ), name && /* @__PURE__ */ React8.createElement("input", { type: "hidden", name, value: v }), mounted && /* @__PURE__ */ React8.createElement(
+  ), name && /* @__PURE__ */ React9.createElement("input", { type: "hidden", name, value: v }), mounted && /* @__PURE__ */ React9.createElement(
     OptionList,
     {
       id: listId,
@@ -2752,30 +3117,30 @@ function Combobox({
 }
 
 // project/components/src/stepper.tsx
-var React9 = __toESM(require("react"), 1);
-var Tick2 = () => /* @__PURE__ */ React9.createElement("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" }, /* @__PURE__ */ React9.createElement("path", { d: "M3.5 8.5l3 3 6-6.5", pathLength: 16 }));
+var React10 = __toESM(require("react"), 1);
+var Tick2 = () => /* @__PURE__ */ React10.createElement("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" }, /* @__PURE__ */ React10.createElement("path", { d: "M3.5 8.5l3 3 6-6.5", pathLength: 16 }));
 var word = { done: "completed", current: "current", upcoming: "not started" };
 function Stepper({ steps, current, onStepChange, orientation = "horizontal", className, ...rest }) {
-  const [seen, setSeen] = React9.useState(current);
-  const [motion, setMotion] = React9.useState(null);
-  const [said, setSaid] = React9.useState("");
+  const [seen, setSeen] = React10.useState(current);
+  const [motion, setMotion] = React10.useState(null);
+  const [said, setSaid] = React10.useState("");
   if (seen !== current) {
     setSeen(current);
     setMotion({ pressed: seen, risen: current, stamp: current > seen ? seen : -1, delay: (current > seen ? 150 : 60) + riseDelay(), key: (motion?.key ?? 0) + 1 });
   }
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!motion) return;
     const t = steps[current];
     setSaid(t ? `Step ${current + 1} of ${steps.length}: ${typeof t.title === "string" ? t.title : ""}` : "All steps complete");
     const done = setTimeout(() => setMotion(null), 900);
     return () => clearTimeout(done);
   }, [motion?.key]);
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("ol", { className: cx("alt-stepper", className), "data-orientation": orientation, "aria-label": rest["aria-label"] ?? "Progress", ...rest }, steps.map((s, i) => {
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("ol", { className: cx("alt-stepper", className), "data-orientation": orientation, "aria-label": rest["aria-label"] ?? "Progress", ...rest }, steps.map((s, i) => {
     const state = i < current ? "done" : i === current ? "current" : "upcoming";
     const back = state === "done" && !!onStepChange;
     const rising = motion && motion.risen === i;
     const stamped = motion && motion.stamp === i;
-    return /* @__PURE__ */ React9.createElement("li", { key: s.id ?? i, className: "alt-step-item", "data-state": state, "aria-current": state === "current" ? "step" : void 0 }, /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React10.createElement("li", { key: s.id ?? i, className: "alt-step-item", "data-state": state, "aria-current": state === "current" ? "step" : void 0 }, /* @__PURE__ */ React10.createElement(
       "div",
       {
         className: "alt-step",
@@ -2794,14 +3159,59 @@ function Stepper({ steps, current, onStepChange, orientation = "horizontal", cla
         } : {},
         style: rising ? { ["--alt-rise-delay"]: motion.delay + "ms" } : void 0
       },
-      /* @__PURE__ */ React9.createElement("span", { className: "alt-step-mark", "data-stamp": stamped ? motion.key % 2 ? "a" : "b" : void 0 }, state === "done" ? /* @__PURE__ */ React9.createElement(Tick2, null) : i + 1),
-      /* @__PURE__ */ React9.createElement("span", { className: "alt-step-text" }, /* @__PURE__ */ React9.createElement("span", { className: "alt-sr" }, "Step ", i + 1, " of ", steps.length, ", ", word[state], ": "), /* @__PURE__ */ React9.createElement("span", { className: "alt-step-title" }, s.title), s.description && /* @__PURE__ */ React9.createElement("span", { className: "alt-step-desc" }, s.description))
-    ), i < steps.length - 1 && /* @__PURE__ */ React9.createElement("span", { className: "alt-step-line", "aria-hidden": "true", "data-done": i < current ? "" : void 0 }));
-  })), /* @__PURE__ */ React9.createElement("span", { className: "alt-sr", "aria-live": "polite" }, said));
+      /* @__PURE__ */ React10.createElement("span", { className: "alt-step-mark", "data-stamp": stamped ? motion.key % 2 ? "a" : "b" : void 0 }, state === "done" ? /* @__PURE__ */ React10.createElement(Tick2, null) : i + 1),
+      /* @__PURE__ */ React10.createElement("span", { className: "alt-step-text" }, /* @__PURE__ */ React10.createElement("span", { className: "alt-sr" }, "Step ", i + 1, " of ", steps.length, ", ", word[state], ": "), /* @__PURE__ */ React10.createElement("span", { className: "alt-step-title" }, s.title), s.description && /* @__PURE__ */ React10.createElement("span", { className: "alt-step-desc" }, s.description))
+    ), i < steps.length - 1 && /* @__PURE__ */ React10.createElement("span", { className: "alt-step-line", "aria-hidden": "true", "data-done": i < current ? "" : void 0 }));
+  })), /* @__PURE__ */ React10.createElement("span", { className: "alt-sr", "aria-live": "polite" }, said));
+}
+
+// project/components/src/empty.tsx
+var React11 = __toESM(require("react"), 1);
+function EmptyState({
+  icon: icon2,
+  title,
+  description,
+  action,
+  secondary,
+  size = "md",
+  headingLevel = 3,
+  announce,
+  className,
+  children,
+  ...rest
+}) {
+  const id = React11.useId();
+  const H = `h${headingLevel}`;
+  const words = typeof announce === "string" ? announce : announce && typeof title === "string" ? title : "";
+  const [said, setSaid] = React11.useState("");
+  React11.useEffect(() => {
+    if (!words) {
+      setSaid("");
+      return;
+    }
+    const t = setTimeout(() => setSaid(words), 100);
+    return () => clearTimeout(t);
+  }, [words]);
+  return /* @__PURE__ */ React11.createElement(
+    "section",
+    {
+      className: cx("alt-empty", className),
+      "data-size": size,
+      "aria-labelledby": `${id}-t`,
+      "aria-describedby": description ? `${id}-d` : void 0,
+      ...rest
+    },
+    icon2 && /* @__PURE__ */ React11.createElement("span", { className: "alt-empty-icon", "aria-hidden": "true" }, icon2),
+    /* @__PURE__ */ React11.createElement(H, { id: `${id}-t`, className: "alt-empty-title" }, title),
+    description && /* @__PURE__ */ React11.createElement("p", { id: `${id}-d`, className: "alt-empty-desc" }, description),
+    children,
+    (action || secondary) && /* @__PURE__ */ React11.createElement("div", { className: "alt-empty-actions" }, action, secondary),
+    announce && /* @__PURE__ */ React11.createElement("span", { className: "alt-sr", "aria-live": "polite" }, said)
+  );
 }
 
 // project/components/src/collections.tsx
-var React10 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 var dropSnapshots = /* @__PURE__ */ new WeakMap();
 var ms2 = (cs, name, fallback) => parseFloat(cs.getPropertyValue(name)) || fallback;
 function pagePlace(el) {
@@ -2823,7 +3233,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 = React12.useRef(null);
   useIsoLayoutEffect(() => {
     const root = host.current;
     if (!root) return;
@@ -2852,12 +3262,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 = React12.forwardRef(function Table2({ maxHeight, underlay, className, children, ...rest }, ref) {
+  const wrap = React12.useRef(null);
+  const table = React12.useRef(null);
+  React12.useImperativeHandle(ref, () => table.current);
+  const [edges, setEdges] = React12.useState({ top: false, bottom: false });
+  const measure = React12.useCallback(() => {
     const el = wrap.current;
     if (!el) return;
     const top = el.scrollTop > 1, bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 1;
@@ -2878,7 +3288,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__ */ React12.createElement(
     "div",
     {
       ref: wrap,
@@ -2890,27 +3300,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__ */ React12.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__ */ React12.createElement("thead", { className: cx("alt-table-head", className), ...p });
+var TableBody = React12.forwardRef(function TableBody2({ className, ...p }, ref) {
+  return /* @__PURE__ */ React12.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__ */ React12.createElement("tfoot", { className: cx("alt-table-foot", className), ...p });
+var TableCaption = ({ className, ...p }) => /* @__PURE__ */ React12.createElement("caption", { className: cx("alt-table-caption", className), ...p });
+var TableRow = React12.forwardRef(function TableRow2({ rowId, selected, interactive, relevance, settle, held, className, style, ...rest }, ref) {
+  const [glow, setGlow] = React12.useState(void 0);
+  const [delay, setDelay] = React12.useState(0);
+  const first = React12.useRef(true);
+  React12.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__ */ React12.createElement(
     "tr",
     {
       ref,
@@ -2926,15 +3336,28 @@ 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__ */ React12.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__ */ React12.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__ */ React12.createElement("th", { scope: "col", className: cx("alt-th", className), "data-align": align, "aria-sort": onSort ? sort ?? "none" : void 0, ...rest }, onSort ? /* @__PURE__ */ React12.createElement("button", { type: "button", className: "alt-table-sort", "data-sort": sort ?? "none", onClick: onSort }, children, /* @__PURE__ */ React12.createElement(SortIcon, null)) : children);
 }
 function TableCell({ align, className, ...rest }) {
-  return /* @__PURE__ */ React10.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" }));
-function DataTable({
+  return /* @__PURE__ */ React12.createElement("td", { className: cx("alt-td", className), "data-align": align, ...rest });
+}
+var GripIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "12", height: "16", viewBox: "0 0 12 16", fill: "currentColor", "aria-hidden": "true" }, /* @__PURE__ */ React12.createElement("circle", { cx: "3", cy: "3", r: "1.3" }), /* @__PURE__ */ React12.createElement("circle", { cx: "9", cy: "3", r: "1.3" }), /* @__PURE__ */ React12.createElement("circle", { cx: "3", cy: "8", r: "1.3" }), /* @__PURE__ */ React12.createElement("circle", { cx: "9", cy: "8", r: "1.3" }), /* @__PURE__ */ React12.createElement("circle", { cx: "3", cy: "13", r: "1.3" }), /* @__PURE__ */ React12.createElement("circle", { cx: "9", cy: "13", r: "1.3" }));
+function DataTable({ skeleton, ...props }) {
+  const missing = skeleton !== false && props.rows === void 0;
+  useReportWaiting(missing || skeleton !== false && isPromise(props.rows));
+  const arrival = useArrival(missing);
+  if (!useHasWaited(missing || isPromise(props.rows))) return /* @__PURE__ */ React12.createElement(DataTableFace, { ...props, rows: props.rows ?? [] });
+  const { lines = 5 } = hint(skeleton);
+  const { columns, selectable, toolbar, maxHeight, className } = props;
+  return /* @__PURE__ */ React12.createElement(Await, { shape: "none", enabled: skeleton !== false, imprint: /* @__PURE__ */ React12.createElement("div", { className: cx("alt-data-table", className) }, (selectable || toolbar) && /* @__PURE__ */ React12.createElement("div", { className: "alt-table-tools" }, toolbar && /* @__PURE__ */ React12.createElement("div", { className: "alt-table-tools-end" }, toolbar)), /* @__PURE__ */ React12.createElement(Table, { maxHeight, "aria-label": props["aria-label"] }, /* @__PURE__ */ React12.createElement(TableHeader, null, /* @__PURE__ */ React12.createElement(TableRow, null, selectable && /* @__PURE__ */ React12.createElement(TableHead, { className: "alt-th-check" }, /* @__PURE__ */ React12.createElement("span", { className: "alt-skeleton alt-check-imprint" })), columns.map((c) => /* @__PURE__ */ React12.createElement(TableHead, { key: c.key, align: c.align, style: { width: c.width } }, c.header)))), /* @__PURE__ */ React12.createElement(TableBody, null, Array.from({ length: lines }, (_, i) => /* @__PURE__ */ React12.createElement(TableRow, { key: i }, selectable && /* @__PURE__ */ React12.createElement(TableCell, { className: "alt-td-check" }, /* @__PURE__ */ React12.createElement("span", { className: "alt-skeleton alt-check-imprint" })), columns.map((c, ci) => /* @__PURE__ */ React12.createElement(TableCell, { key: c.key, align: c.align }, /* @__PURE__ */ React12.createElement("span", { className: "alt-skeleton alt-cell-imprint", "data-shape": "text", style: { width: CELL_WIDTHS[(i + ci) % CELL_WIDTHS.length], ["--i"]: i } })))))))) }, /* @__PURE__ */ React12.createElement(Arrive, { when: arrival }, /* @__PURE__ */ React12.createElement(DataTableLanded, { ...props })));
+}
+var CELL_WIDTHS = ["72%", "54%", "86%", "63%", "78%"];
+function DataTableLanded(props) {
+  return /* @__PURE__ */ React12.createElement(DataTableFace, { ...props, rows: readPromised(props.rows) ?? [] });
+}
+function DataTableFace({
   columns,
   rows,
   getRowId,
@@ -2958,11 +3381,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] = React12.useState("");
+  const table = React12.useRef(null);
+  const body = React12.useRef(null);
   const name = (r) => getRowLabel?.(r) ?? getRowId(r);
-  const view = React10.useMemo(() => {
+  const view = React12.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 +3402,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 = React12.useRef(null);
+  const [drag, setDrag] = React12.useState(null);
+  const [held, setHeld] = React12.useState(null);
   const rowEls = () => Array.from(body.current?.querySelectorAll("tr[data-row]") ?? []);
   const snapshot = (at) => {
     if (!table.current) return;
@@ -3051,24 +3474,24 @@ function DataTable({
       setSaid(`Move cancelled; ${name(view[index])} is back at position ${held.origin + 1}.`);
     }
   };
-  React10.useEffect(() => {
+  React12.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__ */ React12.createElement("div", { className: cx("alt-data-table", className) }, (selectable || toolbar) && /* @__PURE__ */ React12.createElement("div", { className: "alt-table-tools" }, sel.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "alt-table-selection" }, /* @__PURE__ */ React12.createElement(Badge, { variant: "count", tone: "accent", "aria-hidden": "true" }, sel.length), /* @__PURE__ */ React12.createElement("span", null, "selected"), actions?.(sel), /* @__PURE__ */ React12.createElement(Button, { size: "sm", variant: "ghost", onClick: () => setSel([]) }, "Clear")), toolbar && /* @__PURE__ */ React12.createElement("div", { className: "alt-table-tools-end" }, toolbar)), /* @__PURE__ */ React12.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__ */ React12.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__ */ React12.createElement(TableHeader, null, /* @__PURE__ */ React12.createElement(TableRow, null, movable && /* @__PURE__ */ React12.createElement(TableHead, { className: "alt-th-grip" }, /* @__PURE__ */ React12.createElement("span", { className: "alt-sr" }, "Move")), selectable && /* @__PURE__ */ React12.createElement(TableHead, { className: "alt-th-check" }, /* @__PURE__ */ React12.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__ */ React12.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__ */ React12.createElement(TableBody, { ref: body }, !view.length && /* @__PURE__ */ React12.createElement("tr", null, /* @__PURE__ */ React12.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 +3499,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__ */ React12.createElement(
         TableRow,
         {
           key: id,
@@ -3091,7 +3514,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__ */ React12.createElement(TableCell, { className: "alt-td-grip" }, /* @__PURE__ */ React12.createElement(
           "button",
           {
             type: "button",
@@ -3107,18 +3530,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__ */ React12.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__ */ React12.createElement(TableCell, { className: "alt-td-check" }, /* @__PURE__ */ React12.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__ */ React12.createElement(TableCell, { key: c.key, align: c.align }, onRowClick && ci === 0 ? /* @__PURE__ */ React12.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__ */ React12.createElement("span", { className: "alt-sr", "aria-live": "polite" }, selectable && sel.length ? `${sel.length} selected. ` : "", said));
 }
-var BoardCtx = React10.createContext(null);
+var BoardCtx = React12.createContext(null);
 function readBoard(root) {
   return Array.from(root.querySelectorAll("[data-board-col]")).map((col) => {
     const list = col.querySelector(".alt-board-list");
@@ -3165,18 +3588,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 = React12.forwardRef(function Board2({ onMove, className, children, ...rest }, ref) {
+  const root = React12.useRef(null);
+  React12.useImperativeHandle(ref, () => root.current);
+  const hintId = React12.useId();
+  const [carry, setCarry] = React12.useState(null);
+  const [kb, setKb] = React12.useState(null);
+  const [landing, setLanding] = React12.useState(null);
+  const [said, setSaid] = React12.useState("");
+  const start = React12.useRef(null);
+  const dragged = React12.useRef(false);
   useCarry(root, "[data-board-card]", "data-board-card");
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     if (!landing) return;
     const t = setTimeout(() => setLanding(null), 450);
     return () => clearTimeout(t);
@@ -3305,17 +3728,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__ */ React12.createElement(BoardCtx.Provider, { value: ctx }, /* @__PURE__ */ React12.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__ */ React12.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__ */ React12.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 = React12.useContext(BoardCtx);
   const [isCollapsed, setCollapsed] = useControllable(collapsed, defaultCollapsed, onCollapsedChange);
-  const count = React10.Children.toArray(children).filter(React10.isValidElement).length;
+  const count = React12.Children.toArray(children).filter(React12.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__ */ React12.createElement(
     "section",
     {
       className: cx("alt-board-col", className),
@@ -3326,7 +3749,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__ */ React12.createElement("header", { className: "alt-board-head" }, /* @__PURE__ */ React12.createElement("h3", { className: "alt-board-title" }, title), /* @__PURE__ */ React12.createElement("span", { className: "alt-board-count", "aria-label": `${count} ${count === 1 ? "card" : "cards"}` }, count), collapsible && /* @__PURE__ */ React12.createElement(
       Button,
       {
         variant: "ghost",
@@ -3338,20 +3761,20 @@ function BoardColumn({ id, title, collapsed, defaultCollapsed = false, onCollaps
         "data-collapsed": isCollapsed ? "" : void 0,
         onClick: () => setCollapsed(!isCollapsed)
       },
-      /* @__PURE__ */ React10.createElement(Icons.ChevronDown, null)
+      /* @__PURE__ */ React12.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__ */ React12.createElement(Pile, { count: Math.max(count, 1), className: "alt-board-pile" }, /* @__PURE__ */ React12.createElement("div", { className: "alt-board-pile-face" }, /* @__PURE__ */ React12.createElement("b", null, title), /* @__PURE__ */ React12.createElement("span", null, count ? `${count} ${count === 1 ? "card" : "cards"}` : "No cards"))) : /* @__PURE__ */ React12.createElement("div", { className: "alt-board-list", style: receiving ? { paddingBottom: carry.h + carry.gap } : void 0 }, carry && carry.to.column === id && /* @__PURE__ */ React12.createElement("span", { className: "alt-board-slot", "aria-hidden": "true", style: { top: carry.slotTop, height: carry.h } }), children, !count && !carry && /* @__PURE__ */ React12.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 = React12.forwardRef(function BoardCard2({ id, label, heldBy, settle, className, style, onClickCapture, children, ...rest }, ref) {
+  const ctx = React12.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__ */ React12.createElement(
     "div",
     {
       ref,