gridsmith-ui 0.9.2 → 0.11.0

package/dist/index.js

@@ -1,18 +1,19 @@
-import { useAppShell, ControlSizeContext, Button, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, useDirtyGuard, DiscardConfirm, defaultMaxWidth } from './chunk-Z37HO5NU.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell } from './chunk-Z37HO5NU.js';
+import { useAppShell, ControlSizeContext, Button, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, useDirtyGuard, DiscardConfirm, defaultMaxWidth } from './chunk-YMUCTZXS.js';
+export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell } from './chunk-YMUCTZXS.js';
 import { Skeleton } from './chunk-M3AARGLI.js';
 export { Skeleton } from './chunk-M3AARGLI.js';
-import { useOverlayLayer, useCloseOnFocusOut, focusInitial, rovingTabStop, OVERLAY_CLOSE_ATTR, useNonModalDialog, useFocusTrap } from './chunk-RLUK575N.js';
-import { Link } from './chunk-ENBESZS2.js';
-export { CodeBlock, Divider, Link } from './chunk-ENBESZS2.js';
-import { Badge } from './chunk-OVVRMMCO.js';
-export { Badge } from './chunk-OVVRMMCO.js';
-import { inferColumnKinds, CardValue } from './chunk-FDIFQ5UF.js';
-import { SplitPaneCtx, TableCardCtx } from './chunk-RG4KUCRS.js';
+import { useOverlayLayer, useCloseOnFocusOut, focusInitial, rovingTabStop, OVERLAY_CLOSE_ATTR, useNonModalDialog, useFocusTrap } from './chunk-NHQCMOAN.js';
+import { Link } from './chunk-QJBCZ7BR.js';
+export { CodeBlock, Divider, Link } from './chunk-QJBCZ7BR.js';
+import { Badge } from './chunk-U2JT37GJ.js';
+export { Badge } from './chunk-U2JT37GJ.js';
+import { inferColumnKinds, CardValue } from './chunk-CR2KF73R.js';
+import { SplitPaneCtx, usePreferences, TableCardCtx, preferenceActionKey } from './chunk-QNVSMY4R.js';
+export { PreferencesContext, preferenceActionKey, usePreferences } from './chunk-QNVSMY4R.js';
 import { useBreakpoint } from './chunk-CRQ6KCRD.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-CRQ6KCRD.js';
-import { useTextOverflow, Tooltip, usePosition } from './chunk-CQADS7JZ.js';
-export { Tooltip, useTextOverflow } from './chunk-CQADS7JZ.js';
+import { useTextOverflow, Tooltip, usePosition } from './chunk-IYD6ZDM2.js';
+export { Tooltip, useTextOverflow } from './chunk-IYD6ZDM2.js';
 import { mergeRefs, Slot } from './chunk-PKLVP5ZB.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
 import { Icon } from './chunk-X4CNZFWC.js';
@@ -1123,6 +1124,36 @@ function RadioGroup({ value, onChange, options, orientation = "vertical", classN
     )
   ] });
 }
+
+// ../../showcase/src/lib/segments.ts
+function stepValue(spec, current, delta) {
+  if (current === null) return delta > 0 ? spec.min : spec.max;
+  const span = spec.max - spec.min + 1;
+  return spec.min + ((current - spec.min + delta) % span + span) % span;
+}
+function typeDigit(spec, buffer, digit) {
+  if (!/^\d$/.test(digit)) return { buffer, value: buffer ? Number(buffer) : null, advance: false };
+  let next = buffer + digit;
+  if (next.length > spec.maxDigits || Number(next) > spec.max) next = digit;
+  const n = Number(next);
+  const value = n >= spec.min && n <= spec.max ? n : null;
+  const full = next.length >= spec.maxDigits;
+  const noRoom = n > 0 && n * 10 > spec.max;
+  return { buffer: next, value, advance: full || noRoom };
+}
+var pad2 = (n) => String(n).padStart(2, "0");
+function timeSegments(use24Hour) {
+  return [
+    { key: "hour", label: "Hours", min: use24Hour ? 0 : 1, max: use24Hour ? 23 : 12, maxDigits: 2, placeholder: "--" },
+    { key: "minute", label: "Minutes", min: 0, max: 59, maxDigits: 2, placeholder: "--" }
+  ];
+}
+function dateSegments(dayFirst, daysInMonth = 31) {
+  const day = { key: "day", label: "Day", min: 1, max: daysInMonth, maxDigits: 2, placeholder: "dd" };
+  const month = { key: "month", label: "Month", min: 1, max: 12, maxDigits: 2, placeholder: "mm" };
+  const year = { key: "year", label: "Year", min: 1, max: 9999, maxDigits: 4, placeholder: "yyyy" };
+  return dayFirst ? [day, month, year] : [month, day, year];
+}
 var CONTROL_HEIGHT2 = {
   sm: "h-[var(--ds-control-height-sm)]",
   md: "h-[var(--ds-control-height-md)]",
@@ -1160,6 +1191,44 @@ function isSameDay(a, b) {
 function formatDate(d) {
   return `${MONTHS[d.getMonth()].slice(0, 3)} ${d.getDate()}, ${d.getFullYear()}`;
 }
+function localeDayFirst() {
+  try {
+    const parts = new Intl.DateTimeFormat(void 0).formatToParts(new Date(2e3, 11, 25));
+    return parts.findIndex((p) => p.type === "day") < parts.findIndex((p) => p.type === "month");
+  } catch {
+    return true;
+  }
+}
+function validDate(year, monthIndex, day) {
+  if (monthIndex < 0 || monthIndex > 11 || day < 1) return null;
+  const d = new Date(year, monthIndex, day);
+  return d.getFullYear() === year && d.getMonth() === monthIndex && d.getDate() === day ? d : null;
+}
+function parseTypedDate(text, dayFirst = localeDayFirst()) {
+  const t = text.trim().replace(/\s+/g, " ");
+  if (!t) return null;
+  let m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(t);
+  if (m) return validDate(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  const monthIndex = (name) => MONTHS.findIndex((mm) => mm.toLowerCase().startsWith(name.toLowerCase().replace(/\.$/, "")));
+  m = /^([A-Za-z]{3,})\.?\s+(\d{1,2}),?\s+(\d{4})$/.exec(t);
+  if (m) {
+    const mi = monthIndex(m[1]);
+    return mi < 0 ? null : validDate(Number(m[3]), mi, Number(m[2]));
+  }
+  m = /^(\d{1,2})\s+([A-Za-z]{3,})\.?,?\s+(\d{4})$/.exec(t);
+  if (m) {
+    const mi = monthIndex(m[2]);
+    return mi < 0 ? null : validDate(Number(m[3]), mi, Number(m[1]));
+  }
+  m = /^(\d{1,2})[/.-](\d{1,2})[/.-](\d{2,4})$/.exec(t);
+  if (m) {
+    const a = Number(m[1]), b = Number(m[2]);
+    const year = m[3].length === 2 ? 2e3 + Number(m[3]) : Number(m[3]);
+    const [day, month] = a > 12 ? [a, b] : b > 12 ? [b, a] : dayFirst ? [a, b] : [b, a];
+    return validDate(year, month - 1, day);
+  }
+  return null;
+}
 function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, className, ref, container, error = false, label, id, size: sizeProp, min, max, range }) {
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
@@ -1177,6 +1246,33 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   const firstDay = getFirstDayOfWeek(year, month);
   const today = useMemo(() => /* @__PURE__ */ new Date(), []);
   const isTopLayer = useOverlayLayer(open);
+  const prevMonth = () => setViewDate(new Date(year, month - 1, 1));
+  const nextMonth = () => setViewDate(new Date(year, month + 1, 1));
+  const startOf = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  const isDisabledDay = (d) => !!min && d < startOf(min) || !!max && d > startOf(max);
+  useCloseOnFocusOut(open, triggerRef, panelRef, () => setOpen(false), isTopLayer);
+  useEffect(() => {
+    if (open) requestAnimationFrame(() => focusInitial(panelRef.current));
+  }, [open]);
+  const closeAndRefocus = () => {
+    setOpen(false);
+    focusSegment(0);
+  };
+  const dayFirst = useMemo(() => localeDayFirst(), []);
+  const [segs, setSegs] = useState(() => value ? { day: value.getDate(), month: value.getMonth() + 1, year: value.getFullYear() } : { day: null, month: null, year: null });
+  const [buffers, setBuffers] = useState({});
+  const lastCommitted = useRef(null);
+  useEffect(() => {
+    if (value && value.getTime() === lastCommitted.current) return;
+    setSegs(value ? { day: value.getDate(), month: value.getMonth() + 1, year: value.getFullYear() } : { day: null, month: null, year: null });
+    setBuffers({});
+  }, [value]);
+  const specs = dateSegments(dayFirst, segs.month && segs.year ? getDaysInMonth(segs.year, segs.month - 1) : 31);
+  const segmentRefs = useRef([]);
+  const focusSegment = (i) => {
+    segmentRefs.current[Math.max(0, Math.min(specs.length - 1, i))]?.focus();
+  };
+  const focusSegmentRef = useLatest(focusSegment);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -1187,7 +1283,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
     const keyHandler = (e) => {
       if (e.key === "Escape" && isTopLayer()) {
         setOpen(false);
-        triggerRef.current?.focus();
+        focusSegmentRef.current(0);
       }
     };
     document.addEventListener("mousedown", handler);
@@ -1196,18 +1292,88 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
       document.removeEventListener("mousedown", handler);
       document.removeEventListener("keydown", keyHandler);
     };
-  }, [open, isTopLayer]);
-  const prevMonth = () => setViewDate(new Date(year, month - 1, 1));
-  const nextMonth = () => setViewDate(new Date(year, month + 1, 1));
-  const startOf = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
-  const isDisabledDay = (d) => !!min && d < startOf(min) || !!max && d > startOf(max);
-  useCloseOnFocusOut(open, triggerRef, panelRef, () => setOpen(false), isTopLayer);
-  useEffect(() => {
-    if (open) requestAnimationFrame(() => focusInitial(panelRef.current));
-  }, [open]);
-  const closeAndRefocus = () => {
-    setOpen(false);
-    triggerRef.current?.focus();
+  }, [open, isTopLayer, focusSegmentRef]);
+  const [typedInvalid, setTypedInvalid] = useState(false);
+  const commitIfComplete = (next) => {
+    if (next.day === null || next.month === null || next.year === null) {
+      setTypedInvalid(false);
+      return;
+    }
+    const d = validDate(next.year, next.month - 1, next.day);
+    const ok = !!d && (!min || d >= min) && (!max || d <= max);
+    setTypedInvalid(!ok);
+    if (d && ok && !(value && isSameDay(value, d))) {
+      lastCommitted.current = d.getTime();
+      onChange(d);
+      setViewDate(d);
+    }
+  };
+  const setSegment = (key, v, commit = true) => {
+    setSegs((cur) => {
+      const next = { ...cur, [key]: v };
+      if (commit) commitIfComplete(next);
+      return next;
+    });
+  };
+  const applyTyped = (text) => {
+    const d = parseTypedDate(text, dayFirst);
+    if (!d) return;
+    const next = { day: d.getDate(), month: d.getMonth() + 1, year: d.getFullYear() };
+    setSegs(next);
+    setBuffers({});
+    commitIfComplete(next);
+  };
+  const onSegmentKeyDown = (e, index, spec) => {
+    const key = e.key;
+    if (key === "Tab" || key === "Shift" || key === "Escape" || key.startsWith("F")) return;
+    e.preventDefault();
+    const k = spec.key;
+    const clearBuffer = () => setBuffers((b) => ({ ...b, [k]: "" }));
+    if (key === "ArrowLeft") {
+      focusSegment(index - 1);
+      return;
+    }
+    if (key === "ArrowRight") {
+      focusSegment(index + 1);
+      return;
+    }
+    if (key === "ArrowUp" || key === "ArrowDown") {
+      clearBuffer();
+      setSegment(k, stepValue(spec, segs[k], key === "ArrowUp" ? 1 : -1));
+      return;
+    }
+    if (key === "Home") {
+      clearBuffer();
+      setSegment(k, spec.min);
+      return;
+    }
+    if (key === "End") {
+      clearBuffer();
+      setSegment(k, spec.max);
+      return;
+    }
+    if (key === "Backspace" || key === "Delete") {
+      if (segs[k] === null && !buffers[k]) {
+        focusSegment(index - 1);
+        return;
+      }
+      clearBuffer();
+      setSegment(k, null, false);
+      return;
+    }
+    if (/^\d$/.test(key)) {
+      const r = typeDigit(spec, buffers[k] ?? "", key);
+      setBuffers((b) => ({ ...b, [k]: r.advance ? "" : r.buffer }));
+      setSegment(k, r.value);
+      if (r.advance) focusSegment(index + 1);
+    }
+  };
+  const shown = (spec) => {
+    const k = spec.key;
+    const b = buffers[k];
+    if (b && segs[k] === null) return b;
+    if (segs[k] === null) return spec.placeholder;
+    return k === "year" ? String(segs[k]) : pad2(segs[k]);
   };
   const selectDay = (day) => {
     const d = new Date(year, month, day);
@@ -1227,34 +1393,78 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
     label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-[var(--ds-text-primary)] mb-ds-1", children: label }),
     /* @__PURE__ */ jsxs(
-      "button",
+      "div",
       {
-        id: inputId,
         ref: triggerRef,
-        type: "button",
-        onClick: () => !disabled && setOpen(!open),
-        disabled,
-        "aria-invalid": error || void 0,
-        "aria-haspopup": "dialog",
-        "aria-expanded": open,
+        "data-date-field": "",
+        role: "group",
+        id: inputId,
+        "aria-label": label ?? "Date",
+        "aria-description": !value ? placeholder : void 0,
+        "aria-invalid": error || typedInvalid || void 0,
+        onPaste: (e) => {
+          const text = e.clipboardData.getData("text");
+          if (text) {
+            e.preventDefault();
+            applyTyped(text);
+          }
+        },
         className: cn(
           "flex items-center gap-ds-2 w-full",
           CONTROL_HEIGHT2[size],
           TEXT_SIZE2[size],
           "border-[length:var(--ds-border-width)]",
-          error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+          error || typedInvalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
-          "transition-colors cursor-pointer",
+          "transition-colors",
           "px-ds-3 py-ds-2",
-          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
+          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)] focus-within:border-[var(--ds-input-border-hover)]",
           open && ACTIVE_RING,
           disabled && "opacity-disabled cursor-not-allowed",
-          value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
+          "text-[var(--ds-text-primary)]"
         ),
         children: [
-          /* @__PURE__ */ jsx(Icon, { name: "calendar", size: 14, className: "text-[var(--ds-text-muted)]" }),
-          value ? formatDate(value) : placeholder
+          /* @__PURE__ */ jsx(Icon, { name: "calendar", size: 14, className: "text-[var(--ds-text-muted)] shrink-0" }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center min-w-0 flex-1 tabular-nums", onClick: () => focusSegment(0), children: specs.map((spec, i) => {
+            const k = spec.key;
+            return /* @__PURE__ */ jsxs("span", { className: "contents", children: [
+              i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "px-[1px] text-[var(--ds-text-muted)]", children: "/" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ref: (el) => {
+                    segmentRefs.current[i] = el;
+                  },
+                  role: "spinbutton",
+                  tabIndex: disabled ? -1 : 0,
+                  "data-segment": spec.key,
+                  "aria-label": spec.label,
+                  "aria-valuemin": spec.min,
+                  "aria-valuemax": spec.max,
+                  "aria-valuenow": segs[k] ?? void 0,
+                  "aria-valuetext": segs[k] === null ? "empty" : String(segs[k]),
+                  onKeyDown: (e) => onSegmentKeyDown(e, i, spec),
+                  onClick: (e) => e.stopPropagation(),
+                  className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", segs[k] === null && !buffers[k] && "text-[var(--ds-text-muted)]"),
+                  children: shown(spec)
+                }
+              )
+            ] }, spec.key);
+          }) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Choose a date",
+              "aria-haspopup": "dialog",
+              "aria-expanded": open,
+              onClick: () => !disabled && setOpen(!open),
+              disabled,
+              className: "shrink-0 -mr-ds-1 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] focus-visible:outline-2 focus-visible:outline-[var(--ds-accent-primary)] disabled:cursor-not-allowed",
+              children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 14 })
+            }
+          )
         ]
       }
     ),
@@ -1292,8 +1502,8 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
               }
             ),
             /* @__PURE__ */ jsxs("div", { style: { padding: "var(--ds-space-2) var(--ds-space-3)" }, children: [
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-ds-0.5 mb-ds-1", children: DAYS.map((d) => /* @__PURE__ */ jsx("div", { className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, d)) }),
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-ds-0.5", onMouseLeave: () => setHover(null), children: cells.map((day, i) => {
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-ds-0.5 mb-ds-1 tabular-nums", children: DAYS.map((d) => /* @__PURE__ */ jsx("div", { className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, d)) }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-ds-0.5 tabular-nums", onMouseLeave: () => setHover(null), children: cells.map((day, i) => {
                 if (day === null) return /* @__PURE__ */ jsx("div", {}, `empty-${i}`);
                 const dateObj = new Date(year, month, day);
                 const isSelected = !!value && isSameDay(dateObj, value);
@@ -2080,6 +2290,12 @@ function SliderRange({
     )
   ] });
 }
+function fromValue(v, use24Hour) {
+  const m = /^(\d{1,2}):(\d{2})$/.exec(v);
+  if (!m) return { hour: null, minute: null, period: null };
+  const h24 = Number(m[1]);
+  return use24Hour ? { hour: h24, minute: Number(m[2]), period: null } : { hour: h24 % 12 === 0 ? 12 : h24 % 12, minute: Number(m[2]), period: h24 >= 12 ? "PM" : "AM" };
+}
 var CONTROL_HEIGHT4 = {
   sm: "h-[var(--ds-control-height-sm)]",
   md: "h-[var(--ds-control-height-md)]",
@@ -2105,6 +2321,23 @@ function generateMinutes(step) {
   for (let m = 0; m < 60; m += step) mins.push(m);
   return mins;
 }
+function parseTypedTime(text, use24Hour) {
+  const t = text.trim().toLowerCase().replace(/\s+/g, " ");
+  if (!t) return null;
+  const m = /^(\d{1,2})(?::?(\d{2}))?\s*(a\.?m\.?|p\.?m\.?|a|p)?$/.exec(t);
+  if (!m) return null;
+  let hour = Number(m[1]);
+  const minute = m[2] === void 0 ? 0 : Number(m[2]);
+  const suffix = m[3]?.replace(/\./g, "");
+  if (Number.isNaN(hour) || minute < 0 || minute > 59) return null;
+  if (suffix) {
+    if (hour < 1 || hour > 12) return null;
+    const pm = suffix.startsWith("p");
+    hour = pm ? hour === 12 ? 12 : hour + 12 : hour === 12 ? 0 : hour;
+  } else if (hour > 23) return null;
+  else if (!use24Hour && hour >= 1 && hour <= 12 && m[2] === void 0) ;
+  return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+}
 function parseTime(value) {
   const [h, m] = value.split(":").map(Number);
   const hour = isNaN(h) ? 12 : h;
@@ -2140,25 +2373,6 @@ function TimePicker({
   const minutes = generateMinutes(minuteStep);
   const isTopLayer = useOverlayLayer(open);
   useCloseOnFocusOut(open, triggerRef, panelRef, () => setOpen(false), isTopLayer);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (triggerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) return;
-      setOpen(false);
-    };
-    const keyHandler = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        setOpen(false);
-        triggerRef.current?.focus();
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    document.addEventListener("keydown", keyHandler);
-    return () => {
-      document.removeEventListener("mousedown", handler);
-      document.removeEventListener("keydown", keyHandler);
-    };
-  }, [open, isTopLayer]);
   useEffect(() => {
     if (!open) return;
     const id2 = requestAnimationFrame(() => {
@@ -2195,20 +2409,148 @@ function TimePicker({
     }
     onChange(`${pad(h24)}:${pad(minute)}`);
   }
-  const display = use24Hour ? value || "00:00" : `${pad(parsed.hour)}:${pad(parsed.minute)} ${parsed.period}`;
+  const specs = timeSegments(use24Hour);
+  const [segs, setSegs] = useState(() => fromValue(value, use24Hour));
+  const [buffers, setBuffers] = useState({});
+  const lastCommitted = useRef(null);
+  useEffect(() => {
+    if (value === lastCommitted.current) return;
+    setSegs(fromValue(value, use24Hour));
+    setBuffers({});
+  }, [value, use24Hour]);
+  const segmentRefs = useRef([]);
+  const segmentCount = specs.length + (use24Hour ? 0 : 1);
+  const focusSegment = (i) => {
+    const el = segmentRefs.current[Math.max(0, Math.min(segmentCount - 1, i))];
+    el?.focus();
+  };
+  const focusSegmentRef = useLatest(focusSegment);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (triggerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+    const keyHandler = (e) => {
+      if (e.key === "Escape" && isTopLayer()) {
+        setOpen(false);
+        focusSegmentRef.current(0);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("keydown", keyHandler);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", keyHandler);
+    };
+  }, [open, isTopLayer, focusSegmentRef]);
+  const commitIfComplete = (next) => {
+    if (next.hour === null || next.minute === null) return;
+    let h24 = next.hour;
+    if (!use24Hour) {
+      const period = next.period ?? "AM";
+      h24 = period === "AM" ? next.hour === 12 ? 0 : next.hour : next.hour === 12 ? 12 : next.hour + 12;
+    }
+    const out = `${pad2(h24)}:${pad2(next.minute)}`;
+    lastCommitted.current = out;
+    if (out !== value) onChange(out);
+  };
+  const setSegment = (key, v, commit = true) => {
+    setSegs((s) => {
+      const next = { ...s, [key]: v };
+      if (commit) commitIfComplete(next);
+      return next;
+    });
+  };
+  const applyTyped = (text) => {
+    const parsed2 = parseTypedTime(text, use24Hour);
+    if (!parsed2) return;
+    const next = fromValue(parsed2, use24Hour);
+    setSegs(next);
+    setBuffers({});
+    commitIfComplete(next);
+  };
+  const onSegmentKeyDown = (e, index, spec) => {
+    const key = e.key;
+    if (key === "Tab" || key === "Shift" || key === "Escape" || key.startsWith("F")) return;
+    e.preventDefault();
+    if (key === "ArrowLeft") {
+      focusSegment(index - 1);
+      return;
+    }
+    if (key === "ArrowRight") {
+      focusSegment(index + 1);
+      return;
+    }
+    if (!spec) {
+      if (key === "ArrowUp" || key === "ArrowDown" || key === " ") setSegment("period", segs.period === "PM" ? "AM" : "PM");
+      else if (/^[aA]$/.test(key)) setSegment("period", "AM");
+      else if (/^[pP]$/.test(key)) setSegment("period", "PM");
+      else if (key === "Backspace" || key === "Delete") {
+        setSegment("period", null, false);
+      }
+      return;
+    }
+    const k = spec.key;
+    const clearBuffer = () => setBuffers((b) => ({ ...b, [k]: "" }));
+    if (key === "ArrowUp" || key === "ArrowDown") {
+      clearBuffer();
+      setSegment(k, stepValue(spec, segs[k], key === "ArrowUp" ? 1 : -1));
+      return;
+    }
+    if (key === "Home") {
+      clearBuffer();
+      setSegment(k, spec.min);
+      return;
+    }
+    if (key === "End") {
+      clearBuffer();
+      setSegment(k, spec.max);
+      return;
+    }
+    if (key === "Backspace" || key === "Delete") {
+      if (segs[k] === null && !buffers[k]) {
+        focusSegment(index - 1);
+        return;
+      }
+      clearBuffer();
+      setSegment(k, null, false);
+      return;
+    }
+    if (/^\d$/.test(key)) {
+      const r = typeDigit(spec, buffers[k] ?? "", key);
+      setBuffers((b) => ({ ...b, [k]: r.advance ? "" : r.buffer }));
+      setSegment(k, r.value);
+      if (r.advance) focusSegment(index + 1);
+      return;
+    }
+    if (!use24Hour && /^[aApP]$/.test(key)) {
+      setSegment("period", /^[aA]$/.test(key) ? "AM" : "PM");
+      return;
+    }
+  };
+  const shown = (k, spec) => {
+    const b = buffers[k];
+    if (b && segs[k] === null) return b;
+    return segs[k] === null ? spec.placeholder : pad2(segs[k]);
+  };
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
     /* @__PURE__ */ jsxs(
-      "button",
+      "div",
       {
-        id,
         ref: triggerRef,
-        type: "button",
-        onClick: () => !disabled && setOpen(!open),
-        disabled,
+        "data-time-field": "",
+        role: "group",
+        id,
+        "aria-label": "Time",
         "aria-invalid": error || void 0,
-        "aria-haspopup": "dialog",
-        "aria-expanded": open,
-        "aria-controls": open ? listboxId : void 0,
+        onPaste: (e) => {
+          const text = e.clipboardData.getData("text");
+          if (text) {
+            e.preventDefault();
+            applyTyped(text);
+          }
+        },
         className: cn(
           "flex w-full items-center gap-ds-2",
           CONTROL_HEIGHT4[size],
@@ -2217,16 +2559,77 @@ function TimePicker({
           error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
-          "transition-colors cursor-pointer",
+          "transition-colors",
           "px-ds-3 py-ds-2",
-          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
+          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)] focus-within:border-[var(--ds-input-border-hover)]",
           open && ACTIVE_RING,
           disabled && "opacity-disabled cursor-not-allowed",
-          value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
+          "text-[var(--ds-text-primary)]"
         ),
         children: [
-          /* @__PURE__ */ jsx(Icon, { name: "clock", size: 14, className: "text-[var(--ds-text-muted)]" }),
-          display
+          /* @__PURE__ */ jsx(Icon, { name: "clock", size: 14, className: "text-[var(--ds-text-muted)] shrink-0" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center min-w-0 flex-1 tabular-nums", onClick: () => focusSegment(0), children: [
+            specs.map((spec, i) => {
+              const k = spec.key;
+              return /* @__PURE__ */ jsxs("span", { className: "contents", children: [
+                i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "px-[1px]", children: ":" }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ref: (el) => {
+                      segmentRefs.current[i] = el;
+                    },
+                    role: "spinbutton",
+                    tabIndex: disabled ? -1 : 0,
+                    "data-segment": spec.key,
+                    "aria-label": spec.label,
+                    "aria-valuemin": spec.min,
+                    "aria-valuemax": spec.max,
+                    "aria-valuenow": segs[k] ?? void 0,
+                    "aria-valuetext": segs[k] === null ? "empty" : pad2(segs[k]),
+                    onKeyDown: (e) => onSegmentKeyDown(e, i, spec),
+                    onClick: (e) => e.stopPropagation(),
+                    className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", segs[k] === null && !buffers[k] && "text-[var(--ds-text-muted)]"),
+                    children: shown(k, spec)
+                  }
+                )
+              ] }, spec.key);
+            }),
+            !use24Hour && /* @__PURE__ */ jsx(
+              "span",
+              {
+                ref: (el) => {
+                  segmentRefs.current[specs.length] = el;
+                },
+                role: "spinbutton",
+                tabIndex: disabled ? -1 : 0,
+                "data-segment": "period",
+                "aria-label": "AM or PM",
+                "aria-valuemin": 0,
+                "aria-valuemax": 1,
+                "aria-valuenow": segs.period === null ? void 0 : segs.period === "AM" ? 0 : 1,
+                "aria-valuetext": segs.period ?? "empty",
+                onKeyDown: (e) => onSegmentKeyDown(e, specs.length, null),
+                onClick: (e) => e.stopPropagation(),
+                className: cn("ml-ds-1 rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", segs.period === null && "text-[var(--ds-text-muted)]"),
+                children: segs.period ?? "--"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Choose a time",
+              "aria-haspopup": "dialog",
+              "aria-expanded": open,
+              "aria-controls": open ? listboxId : void 0,
+              onClick: () => !disabled && setOpen(!open),
+              disabled,
+              className: "shrink-0 -mr-ds-1 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] focus-visible:outline-2 focus-visible:outline-[var(--ds-accent-primary)] disabled:cursor-not-allowed",
+              children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 14 })
+            }
+          )
         ]
       }
     ),
@@ -2247,7 +2650,7 @@ function TimePicker({
             "rounded-[var(--ds-radius-md)]"
           ),
           style: { top: pos.top, left: pos.left },
-          children: /* @__PURE__ */ jsxs("div", { className: "inline-flex p-ds-1 gap-ds-1", children: [
+          children: /* @__PURE__ */ jsxs("div", { className: "inline-flex p-ds-1 gap-ds-1 tabular-nums", children: [
             /* @__PURE__ */ jsx("div", { "data-column": true, className: "max-h-48 overflow-y-auto w-ds-10", children: hours.map((h) => /* @__PURE__ */ jsx(
               "button",
               {
@@ -2575,7 +2978,7 @@ var Tag = forwardRef(function Tag2({
   className,
   children
 }, ref) {
-  const { ref: truncRef, isTruncated } = useTextOverflow({ lines: 1, disabled: !maxWidth });
+  const { ref: truncRef, isTruncated } = useTextOverflow({ lines: 1 });
   const handleRemove = (e) => {
     e.stopPropagation();
     onRemove?.();
@@ -2596,7 +2999,7 @@ var Tag = forwardRef(function Tag2({
         }
       } : void 0,
       className: cn(
-        "inline-flex items-center font-medium max-w-full whitespace-nowrap",
+        "inline-flex items-center font-medium max-w-full min-w-0 whitespace-nowrap",
         "rounded-[var(--ds-radius-sm)]",
         "transition-colors duration-[var(--ds-transition-speed)]",
         sizeStyles[size],
@@ -2607,7 +3010,7 @@ var Tag = forwardRef(function Tag2({
       ),
       style: maxWidth ? { maxWidth } : void 0,
       children: [
-        maxWidth ? /* @__PURE__ */ jsx("span", { ref: truncRef, className: "truncate", children }) : children,
+        /* @__PURE__ */ jsx("span", { ref: truncRef, className: "truncate min-w-0", children }),
         onRemove && !disabled && /* @__PURE__ */ jsx(
           "button",
           {
@@ -3456,7 +3859,10 @@ function collectInvalidFields(form) {
   }
   return out;
 }
-function FormWrapper({ onSubmit, validationMode = "onSubmit", children, actions, actionsAlign = "end", focusFirstError = true, errorSummary = true, className, ref }) {
+function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions, actionsAlign: actionsAlignProp, focusFirstError = true, errorSummary = true, className, ref }) {
+  const preferences = usePreferences();
+  const validationMode = validationModeProp ?? preferences.validationTiming ?? "onSubmit";
+  const actionsAlign = actionsAlignProp ?? preferences.formActions?.align ?? "end";
   const [errors, setErrors] = useState({});
   const [submitted, setSubmitted] = useState(false);
   const [submitCount, setSubmitCount] = useState(0);
@@ -4318,11 +4724,15 @@ var Card = forwardRef(function Card2({
             children: /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected })
           }
         ),
-        /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardCtx, { value: checkable, children: loading ? /* @__PURE__ */ jsxs("div", { className: "space-y-ds-3", children: [
-          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-4 w-1/3" }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-full" }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-2/3" })
-        ] }) : children }) })
+        /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardCtx, { value: checkable, children: loading ? (
+          // Round 15 (the owner's 52.1): a placeholder stands where the content will stand — inside the card's
+          // content inset (CardContent's padding), a title-height line then two body lines — never flush against the border.
+          /* @__PURE__ */ jsx("div", { "data-card-loading": "", "aria-busy": "true", className: cn("pr-ds-5 py-ds-4", checkable ? "pl-ds-10" : "pl-ds-5"), children: /* @__PURE__ */ jsxs("div", { className: "space-y-ds-3", children: [
+            /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-5 w-1/3" }),
+            /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-2/3" })
+          ] }) })
+        ) : children }) })
       ]
     }
   );
@@ -4331,7 +4741,7 @@ var CardHeader = forwardRef(function CardHeader2({ className, children, actions,
   const isCheckable = useContext(CardCtx);
   const hasActions = actions || menuItems;
   const pl = isCheckable ? "pl-ds-10" : "pl-ds-5";
-  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 shrink-0", children: [
+  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 shrink-0 ml-auto", children: [
     actions,
     menuItems && /* @__PURE__ */ jsx(
       DropdownMenu,
@@ -4355,8 +4765,8 @@ var CardHeader = forwardRef(function CardHeader2({ className, children, actions,
   ] }) : null;
   const iconBlock = icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 h-10 w-10 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-muted)] flex items-center justify-center mb-ds-1", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 20, className: "text-[var(--ds-text-secondary)]" }) }) : null;
   if (hasActions) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-ds-1.5 min-w-0", children: [
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-ds-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-ds-1.5 grow basis-1/2 [min-width:min-content] break-words", children: [
         iconBlock,
         children
       ] }),
@@ -4767,7 +5177,7 @@ function Table({
   loading = false,
   emptyState,
   onRowClick,
-  mobileBreakpoint = "md",
+  mobileBreakpoint: mobileBreakpointProp,
   ref
 }) {
   const [internalSortKey, setInternalSortKey] = useState(null);
@@ -4833,6 +5243,8 @@ function Table({
     (col) => col.kind ?? inferredKinds.get(col.key),
     [inferredKinds]
   );
+  const preferences = usePreferences();
+  const mobileBreakpoint = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? "md";
   const isMobile = useBreakpoint(mobileBreakpoint);
   if (isMobile) {
     if (loading) {
@@ -4915,7 +5327,7 @@ function Table({
                   headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left",
                   isSortable && "cursor-pointer select-none hover:text-[var(--ds-text-primary)]"
                 ),
-                style: col.maxWidth ? { maxWidth: col.maxWidth } : void 0,
+                style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
                 onClick: isSortable ? () => handleSort(col.key) : void 0,
                 children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-ds-1", children: [
                   col.header,
@@ -5005,6 +5417,10 @@ function Table({
                     } else {
                       inner = cellContent;
                     }
+                    const align = col.align ?? (kind === "number" ? "right" : "left");
+                    if (align !== "left" && cellContent !== null && cellContent !== void 0 && typeof cellContent !== "string" && typeof cellContent !== "number") {
+                      inner = /* @__PURE__ */ jsx("div", { className: cn("flex items-center", align === "center" ? "justify-center" : "justify-end"), children: inner });
+                    }
                     return /* @__PURE__ */ jsx(
                       "td",
                       {
@@ -5014,7 +5430,7 @@ function Table({
                           alignClass,
                           shrink && "w-px whitespace-nowrap"
                         ),
-                        style: col.maxWidth ? { maxWidth: col.maxWidth } : void 0,
+                        style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
                         children: inner
                       },
                       col.key
@@ -5027,7 +5443,7 @@ function Table({
               "td",
               {
                 colSpan: columns.length + (selectable ? 1 : 0) + 1,
-                className: "bg-[var(--ds-bg-muted)] px-ds-4 py-ds-3 text-sm text-[var(--ds-text-secondary)]",
+                className: "bg-[var(--ds-bg-muted)] px-ds-6 py-ds-4 text-sm text-[var(--ds-text-primary)]",
                 children: renderExpanded(row, i)
               }
             ) })
@@ -6791,8 +7207,10 @@ function renderIcon(icon) {
   if (isValidElement(icon) && icon.type === Icon) return cloneElement(icon, { size: FRAME_ICON_SIZE });
   return icon;
 }
-function EmptyState({ icon, iconFrame = "circle", title, description, action, variant = "empty", bordered = false, className }) {
-  const iconNode = icon === void 0 || icon === null ? void 0 : renderIcon(icon);
+function EmptyState({ icon, iconFrame = "circle", title, description, action, variant = "empty", bordered = false, style: styleProp, className }) {
+  const preferences = usePreferences();
+  const style = styleProp ?? (preferences.emptyStyle === "text-cta" ? "text" : "illustration");
+  const iconNode = style === "text" ? void 0 : icon === void 0 || icon === null ? void 0 : renderIcon(icon);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -6803,8 +7221,9 @@ function EmptyState({ icon, iconFrame = "circle", title, description, action, va
         bordered && "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
         className
       ),
+      "data-style": style,
       children: [
-        iconFrame === "none" && iconNode ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center mb-ds-4", children: iconNode }) : /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-emphasis)] flex items-center justify-center mb-ds-4", children: iconNode ?? /* @__PURE__ */ jsx("span", { className: "text-2xl text-[var(--ds-text-muted)]", children: defaultIcons[variant] }) }),
+        style === "text" ? null : iconFrame === "none" && iconNode ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center mb-ds-4", children: iconNode }) : /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-emphasis)] flex items-center justify-center mb-ds-4", children: iconNode ?? /* @__PURE__ */ jsx("span", { className: "text-2xl text-[var(--ds-text-muted)]", children: defaultIcons[variant] }) }),
         /* @__PURE__ */ jsx("h3", { className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] text-center", children: title }),
         description && /* @__PURE__ */ jsx("p", { className: "mt-ds-1 text-sm text-[var(--ds-text-muted)] max-w-sm text-center", children: description }),
         action && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: action })
@@ -6818,8 +7237,9 @@ function initialsOf(name) {
 function looksLikeUrl(s) {
   return /^(?:https?:|data:|blob:|\/|\.{1,2}\/)/.test(s) || /\.[a-z]{2,5}(?:$|[?#])/i.test(s);
 }
-function EntityCell({ avatar, src, initials, primary, secondary, size = "md", className }) {
+function EntityCell({ avatar, src, initials, primary, secondary, size: sizeProp, className }) {
   const inTableCard = useContext(TableCardCtx);
+  const size = sizeProp ?? (inTableCard ? "sm" : "md");
   let avatarElement;
   if (typeof avatar === "string") {
     avatarElement = looksLikeUrl(avatar) ? /* @__PURE__ */ jsx(Avatar, { src: avatar, alt: primary, size }) : /* @__PURE__ */ jsx(Avatar, { initials: avatar, alt: primary, size });
@@ -8334,11 +8754,13 @@ var StackedList = forwardRef(function StackedList2({
         const interactive = !!item.onClick;
         const hasEmphasis = item.unread !== void 0;
         const multiline = !!item.description;
+        const stackThis = stackMeta || isPhone && !!item.meta && !!item.actions;
+        const tall = multiline || stackThis && !stackMeta && !!item.leading;
         const trailing = item.unread || item.meta ? /* @__PURE__ */ jsxs("div", { className: cn(
           "shrink-0 flex items-center gap-ds-2 text-sm",
           // Below sm an article's meta sits under the title, left-aligned, whatever alignment its own markup
           // carries (round 6: a builder's items-end column put its badge mid-row).
-          stackMeta && "self-start [&>*]:items-start! [&>*]:text-left!",
+          stackThis && "self-start [&>*]:items-start! [&>*]:text-left!",
           isSelected ? "text-[var(--ds-nav-v-active-muted)]" : "text-[var(--ds-text-muted)]"
         ), children: [
           item.unread && /* @__PURE__ */ jsx(
@@ -8356,7 +8778,7 @@ var StackedList = forwardRef(function StackedList2({
           {
             className: cn(
               "flex gap-ds-3 py-ds-3",
-              multiline ? "items-start" : "items-center",
+              tall ? "items-start" : "items-center",
               inset,
               interactive && [
                 "cursor-pointer [transition:var(--ds-transition-interactive)]",
@@ -8383,7 +8805,7 @@ var StackedList = forwardRef(function StackedList2({
               }
             } : void 0,
             children: [
-              item.leading && /* @__PURE__ */ jsx("div", { className: cn("shrink-0", multiline && "mt-ds-0.5"), children: item.leading }),
+              item.leading && /* @__PURE__ */ jsx("div", { className: cn("shrink-0", tall && "mt-ds-0.5"), children: item.leading }),
               /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxs("div", { className: cn("flex gap-ds-2", stackMeta ? "flex-col" : "items-center justify-between"), children: [
                   /* @__PURE__ */ jsx(
@@ -8401,9 +8823,10 @@ var StackedList = forwardRef(function StackedList2({
                   (multiline || stackMeta) && trailing
                 ] }),
                 item.subtitle && /* @__PURE__ */ jsx(TruncText, { className: cn("text-sm", isSelected ? "text-[var(--ds-nav-v-active-muted)]" : "text-[var(--ds-text-secondary)]"), children: item.subtitle }),
-                item.description && /* @__PURE__ */ jsx(TruncText, { className: cn("text-xs", isSelected ? "text-[var(--ds-nav-v-active-muted)]" : "text-[var(--ds-text-muted)]"), children: item.description })
+                item.description && /* @__PURE__ */ jsx(TruncText, { className: cn("text-xs", isSelected ? "text-[var(--ds-nav-v-active-muted)]" : "text-[var(--ds-text-muted)]"), children: item.description }),
+                stackThis && !stackMeta && !multiline && trailing
               ] }),
-              !multiline && !stackMeta && trailing,
+              !multiline && !stackThis && trailing,
               item.actions && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -8862,7 +9285,7 @@ function TabButton({
   className,
   hasPanel
 }) {
-  const { ref: truncRef, isTruncated } = useTextOverflow({ lines: 1, disabled: !truncate });
+  const { ref: truncRef, isTruncated } = useTextOverflow({ lines: 1, disabled: !truncate && orientation !== "horizontal" });
   const isActive = activeTab === id;
   const tabId = `ds-tab-${id}`;
   const panelId = hasPanel === false ? void 0 : `ds-tabpanel-${id}`;
@@ -8921,6 +9344,8 @@ function TabButton({
       onKeyDown,
       className: cn(
         "px-ds-4 py-ds-2.5 text-sm font-medium",
+        // never wrap: the strip scrolls when the tabs do not fit (round 17, 54.4)
+        !fullWidth && !truncate && "shrink-0 whitespace-nowrap",
         disabled ? "cursor-not-allowed opacity-disabled" : "cursor-pointer",
         "transition-colors duration-[var(--ds-transition-speed)]",
         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
@@ -8937,7 +9362,7 @@ function TabButton({
         countBadge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: countBadge })
       ] }) : /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-ds-2 min-w-0", children: [
         icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: 16, className: "shrink-0" }),
-        label,
+        /* @__PURE__ */ jsx("span", { ref: truncRef, className: "truncate max-w-[24ch]", children: label }),
         countBadge
       ] })
     }
@@ -9400,8 +9825,10 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
     )
   ] });
 }
-function Pagination({ currentPage, totalPages, onPageChange, pageSize, pageSizeOptions, onPageSizeChange, className }) {
+function Pagination({ currentPage, totalPages, onPageChange, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, className }) {
   const pages = buildPageRange(currentPage, totalPages);
+  const preferences = usePreferences();
+  const pageSize = pageSizeProp ?? preferences.itemsPerPage;
   return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", className: cn("flex flex-wrap items-center gap-ds-3", className), children: [
     pageSizeOptions && pageSize != null && onPageSizeChange && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
       /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--ds-text-muted)] whitespace-nowrap", children: "Rows per page" }),
@@ -10167,14 +10594,16 @@ function SidebarNav({
           item.active ? isRoot ? "bg-[var(--ds-sidebar-active-bg)] [background-image:var(--ds-sidebar-active-image)] text-[var(--ds-sidebar-active-text)] font-medium border-l-[length:var(--ds-sidebar-active-rail)] border-[var(--ds-sidebar-active-accent)]" : "bg-[var(--ds-sidebar-active-bg)] [background-image:var(--ds-sidebar-active-image)] text-[var(--ds-sidebar-active-accent)] font-medium" : isRoot ? "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)] border-l-[length:var(--ds-sidebar-active-rail)] border-transparent" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
         ),
         children: [
-          item.icon && /* @__PURE__ */ jsx(
+          item.icon && // Round 15 (the owner's 52.8): the icon sits in a box one line tall, so a collapsed (icon-only) item is exactly as
+          // tall as the expanded item whose label sets that line — the rail no longer jumps when the sidebar collapses.
+          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center shrink-0 min-h-[1lh]", "data-sidebar-icon": "", children: /* @__PURE__ */ jsx(
             Icon,
             {
               name: item.icon,
               size: isRoot ? rootIconSize : childIconSize,
               className: cn("shrink-0", item.active && "text-[var(--ds-sidebar-active-accent)]")
             }
-          ),
+          ) }),
           !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(TruncLabel3, { className: isRoot ? "flex-1" : void 0, container: portalContainer ?? void 0, children: item.label }),
             item.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.badge })
@@ -10669,6 +11098,15 @@ var FLOATING_BLOCK = cn(
   "overflow-hidden"
 );
 var PageContainerContext = createContext(null);
+function useContentWidth(width) {
+  const ctx = useContext(PageContainerContext);
+  const request = ctx?.requestContentWidth;
+  useEffect(() => {
+    if (!request) return;
+    request(width);
+    return () => request(null);
+  }, [request, width]);
+}
 function usePageContainer() {
   return useContext(PageContainerContext);
 }
@@ -10709,6 +11147,7 @@ function floatingBlockPadding(navbarFloating, sidebarFloating, overlap) {
 var PageContainer = forwardRef(function PageContainer2({
   width,
   maxWidth = "xl",
+  contentWidth,
   padding = "default",
   verticalPadding,
   centered = true,
@@ -10729,8 +11168,19 @@ var PageContainer = forwardRef(function PageContainer2({
   }, []);
   const resolvedMaxWidth = width ? widthToMaxWidth[width] : maxWidth;
   const maxWidthValue = maxWidthValues[resolvedMaxWidth];
+  const [requestedWidth, setRequestedWidth] = useState(null);
+  const requestContentWidth = useCallback((w) => setRequestedWidth(w), []);
+  const effectiveContentWidth = contentWidth ?? requestedWidth ?? void 0;
+  const contentCap = effectiveContentWidth ? maxWidthValues[widthToMaxWidth[effectiveContentWidth]] : void 0;
+  const capped = (content) => contentCap ? /* @__PURE__ */ jsx("div", { "data-content-width": effectiveContentWidth, style: { maxWidth: contentCap }, children: content }) : content;
   const kids = Children.toArray(children);
   const headerIdx = kids.findIndex(isPageHeaderElement);
+  const headerCount = useRef(0);
+  const [wrappedHeader, setWrappedHeader] = useState(false);
+  const reportHeader = useCallback((present) => {
+    headerCount.current = Math.max(0, headerCount.current + (present ? 1 : -1));
+    setWrappedHeader(headerCount.current > 0);
+  }, []);
   const launcherCorner = shell?.launcherCorner ?? null;
   const vPad = verticalPadding ?? "default";
   const launcherPadding = launcherCorner ? { paddingBottom: `max(${bottomPaddingValues[vPad]}, var(--ds-toast-inset-${launcherCorner}, 0px))` } : {};
@@ -10776,21 +11226,22 @@ var PageContainer = forwardRef(function PageContainer2({
     observedRef.current = null;
   }, []);
   if (headerIdx === -1 || !headerEl || !r) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(PageContainerContext, { value: { contentMaxWidth: maxWidthValue, placement: "inside", containedBreadcrumbs: false, breadcrumbsInsideHeader: false, noBottomMargin: false, overlap: false, setPinnedHeight, reportHeader, requestContentWidth, insidePaddedColumn: true }, children: /* @__PURE__ */ jsx(
       "div",
       {
-        ref,
+        ref: setRoot,
+        "data-page-container": wrappedHeader ? "" : void 0,
         className: cn(
           "w-full",
           paddingClasses[padding],
-          verticalPaddingClasses[vPad],
+          wrappedHeader ? bottomPaddingClasses[vPad] : verticalPaddingClasses[vPad],
           centered && "mx-auto",
           className
         ),
         style: { maxWidth: maxWidthValue, containerType: "inline-size", ...launcherPadding },
-        children
+        children: capped(children)
       }
-    );
+    ) });
   }
   const rest = kids.filter((_, i) => i !== headerIdx);
   const snapping = r.behavior === "snapping";
@@ -10802,15 +11253,15 @@ var PageContainer = forwardRef(function PageContainer2({
   const placement = block ? "block" : r.outside ? "outside" : "inside";
   const breadcrumbsInsideHeader = snapping && floatingHeader && contained;
   const strip = contained && !breadcrumbsInsideHeader && crumbs ? /* @__PURE__ */ jsx(Breadcrumbs, { variant: "contained", itemVariant: r.breadcrumbStyle, bleed: true, contentMaxWidth: maxWidthValue, separator: r.breadcrumbSeparator, items: headerEl.props.title ? [...crumbs, { label: headerEl.props.title }] : crumbs }) : null;
-  const columnClass = (pad2) => cn("w-full", paddingClasses[pad2], centered && "mx-auto");
+  const columnClass = (pad3) => cn("w-full", paddingClasses[pad3], centered && "mx-auto");
   const columnStyle = { maxWidth: maxWidthValue, containerType: "inline-size" };
-  const header = /* @__PURE__ */ jsx(PageContainerContext, { value: { contentMaxWidth: maxWidthValue, placement, containedBreadcrumbs: contained, breadcrumbsInsideHeader, noBottomMargin: block, overlap: overlapActive, setPinnedHeight }, children: renderHeader ? renderHeader(headerEl) : headerEl });
+  const header = /* @__PURE__ */ jsx(PageContainerContext, { value: { contentMaxWidth: maxWidthValue, placement, containedBreadcrumbs: contained, breadcrumbsInsideHeader, noBottomMargin: block, overlap: overlapActive, setPinnedHeight, reportHeader, requestContentWidth }, children: renderHeader ? renderHeader(headerEl) : headerEl });
   const contentPadding = floatingHeader && shell?.isMobile ? "none" : padding;
   const wrapperStyle = floatingHeader || overlapActive ? {
     ...floatingHeader ? { paddingRight: "var(--ds-space-3)", paddingLeft: r.sidebarFloating ? 0 : "var(--ds-space-3)" } : {},
     ...overlapActive ? { marginTop: "calc(-1 * var(--ds-overlap, 0px))", position: "relative", zIndex: 1 } : {}
   } : void 0;
-  const column = /* @__PURE__ */ jsx("div", { ref: columnRef, className: cn(columnClass(contentPadding), bottomPaddingClasses[vPad], className), style: { ...columnStyle, ...launcherPadding }, children: rest });
+  const column = /* @__PURE__ */ jsx(PageContainerContext, { value: { contentMaxWidth: maxWidthValue, placement: "inside", containedBreadcrumbs: false, breadcrumbsInsideHeader: false, noBottomMargin: false, overlap: false, setPinnedHeight, reportHeader, requestContentWidth, insidePaddedColumn: true }, children: /* @__PURE__ */ jsx("div", { ref: columnRef, className: cn(columnClass(contentPadding), bottomPaddingClasses[vPad], className), style: { ...columnStyle, ...launcherPadding }, children: capped(rest) }) });
   return /* @__PURE__ */ jsxs("div", { ref: setRoot, "data-page-container": "", className: "w-full", children: [
     placement === "block" ? /* @__PURE__ */ jsx("div", { style: floatingBlockPadding(r.navbarFloating, r.sidebarFloating, overlapActive), children: /* @__PURE__ */ jsxs("div", { className: FLOATING_BLOCK, children: [
       strip,
@@ -10969,6 +11420,12 @@ var PageHeader = forwardRef(function PageHeader2({
 }, ref) {
   const shell = useAppShell();
   const container = usePageContainer();
+  const reportHeader = container?.reportHeader;
+  useLayoutEffect(() => {
+    if (!reportHeader) return;
+    reportHeader(true);
+    return () => reportHeader(false);
+  }, [reportHeader]);
   const r = resolvePageHeader(shell?.theme, {
     variant: variantProp,
     behavior: behaviorProp,
@@ -10985,11 +11442,14 @@ var PageHeader = forwardRef(function PageHeader2({
   const bcPill = r.breadcrumbStyle === "pill";
   const bcSep = r.breadcrumbSeparator;
   const contentMaxWidth = contentMaxWidthProp ?? container?.contentMaxWidth;
+  const insidePaddedColumn = !!container?.insidePaddedColumn;
+  const gutterWidth = insidePaddedColumn ? void 0 : contentMaxWidth;
+  const floating = isFloating && !insidePaddedColumn;
   const stickyTop = shell ? "top-0" : "top-[var(--ds-navbar-height)]";
   const snapping = behavior === "snapping";
   const inlineBreadcrumbs = container?.containedBreadcrumbs && !snapping ? void 0 : breadcrumbs;
   const hideExpandedBreadcrumbs = hideExpandedBreadcrumbsProp ?? (!!container?.containedBreadcrumbs && snapping);
-  const containedBreadcrumbs = containedBreadcrumbsProp ?? (container?.breadcrumbsInsideHeader && breadcrumbs?.length ? /* @__PURE__ */ jsx(Breadcrumbs, { variant: "contained", itemVariant: r.breadcrumbStyle, bleed: true, contentMaxWidth, separator: bcSep, items: [...breadcrumbs, { label: title }] }) : void 0);
+  const containedBreadcrumbs = containedBreadcrumbsProp ?? (container?.breadcrumbsInsideHeader && breadcrumbs?.length ? /* @__PURE__ */ jsx(Breadcrumbs, { variant: "contained", itemVariant: r.breadcrumbStyle, bleed: true, contentMaxWidth: gutterWidth, separator: bcSep, items: [...breadcrumbs, { label: title }] }) : void 0);
   const noBottomMargin = noBottomMarginProp ?? container?.noBottomMargin;
   const overlapActive = container?.overlap ?? false;
   if (behavior === "snapping") {
@@ -11007,7 +11467,7 @@ var PageHeader = forwardRef(function PageHeader2({
         expandedContent,
         collapseOffset,
         pinned,
-        contentMaxWidth,
+        contentMaxWidth: gutterWidth,
         variant,
         intensity,
         backgroundImage,
@@ -11019,7 +11479,7 @@ var PageHeader = forwardRef(function PageHeader2({
         as: Heading,
         className,
         stickyTop,
-        isFloating,
+        isFloating: floating,
         navbarFloating,
         sidebarFloating,
         containedBreadcrumbs,
@@ -11029,7 +11489,7 @@ var PageHeader = forwardRef(function PageHeader2({
   }
   let header;
   if (variant === "minimal") {
-    header = /* @__PURE__ */ jsx(MinimalHeader, { title, badge, breadcrumbs: inlineBreadcrumbs, actions, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: isFloating ? void 0 : ref, isFloating, contentMaxWidth });
+    header = /* @__PURE__ */ jsx(MinimalHeader, { title, badge, breadcrumbs: inlineBreadcrumbs, actions, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: floating ? void 0 : ref, isFloating: floating, contentMaxWidth: gutterWidth });
   } else if (variant === "tabs-integrated") {
     header = /* @__PURE__ */ jsx(
       TabsIntegratedHeader,
@@ -11046,15 +11506,16 @@ var PageHeader = forwardRef(function PageHeader2({
         breadcrumbSeparator: bcSep,
         as: Heading,
         className,
-        headerRef: isFloating ? void 0 : ref,
-        isFloating,
-        contentMaxWidth
+        headerRef: floating ? void 0 : ref,
+        isFloating: floating,
+        contentMaxWidth: gutterWidth
       }
     );
   } else if (variant === "colourful") {
     header = /* @__PURE__ */ jsx(
       ColourfulHeader,
       {
+        gutter: !insidePaddedColumn,
         title,
         description,
         badge,
@@ -11066,13 +11527,13 @@ var PageHeader = forwardRef(function PageHeader2({
         intensity,
         backgroundImage,
         overlapActive,
-        contentMaxWidth,
+        contentMaxWidth: gutterWidth,
         breadcrumbPill: bcPill,
         breadcrumbSeparator: bcSep,
         as: Heading,
         className,
-        headerRef: isFloating ? void 0 : ref,
-        isFloating,
+        headerRef: floating ? void 0 : ref,
+        isFloating: floating,
         noBottomMargin
       }
     );
@@ -11093,13 +11554,13 @@ var PageHeader = forwardRef(function PageHeader2({
         breadcrumbSeparator: bcSep,
         as: Heading,
         className,
-        headerRef: isFloating ? void 0 : ref,
-        isFloating,
-        contentMaxWidth
+        headerRef: floating ? void 0 : ref,
+        isFloating: floating,
+        contentMaxWidth: gutterWidth
       }
     );
   }
-  if (isFloating) {
+  if (floating) {
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -11231,7 +11692,8 @@ function ColourfulHeader({
   className,
   headerRef,
   isFloating,
-  noBottomMargin
+  noBottomMargin,
+  gutter = true
 }) {
   const isBold = intensity === "bold";
   const hasBreadcrumbs = !!(breadcrumbs && breadcrumbs.length > 0);
@@ -11271,11 +11733,12 @@ function ColourfulHeader({
           "div",
           {
             className: cn(
-              "relative z-10 w-full mx-auto px-ds-6 pb-ds-6",
+              "relative z-10 w-full mx-auto pb-ds-6",
+              gutter && "px-ds-6",
               hasBreadcrumbs ? "pt-ds-3" : "pt-ds-6"
             ),
             style: {
-              maxWidth: contentMaxWidth ?? "var(--ds-bp-xl)",
+              maxWidth: gutter ? contentMaxWidth ?? "var(--ds-bp-xl)" : void 0,
               containerType: "inline-size",
               ...overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px))` } : {}
             },
@@ -11557,7 +12020,7 @@ function SnappingHeader({
             }
           );
           if (effectiveMaxWidth) {
-            return /* @__PURE__ */ jsx("div", { className: cn("w-full mx-auto", collapsed ? "px-ds-3 @md:px-ds-6" : "px-ds-6"), style: { maxWidth: effectiveMaxWidth, containerType: "inline-size" }, children: innerContent });
+            return /* @__PURE__ */ jsx("div", { className: "w-full mx-auto px-ds-6", style: { maxWidth: effectiveMaxWidth, containerType: "inline-size" }, children: innerContent });
           }
           return innerContent;
         })()
@@ -12197,8 +12660,7 @@ var Navbar = forwardRef(function Navbar2({
     hasBorder && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
     GLASS_BACKDROP
   );
-  const isMobile = appShell?.isMobile;
-  const padStyle = resolvedSize === "sm" ? "var(--ds-space-2) var(--ds-space-4)" : resolvedSize === "lg" ? `var(--ds-space-2) var(${isMobile ? "--ds-space-3" : "--ds-space-6"})` : `var(--ds-space-1) var(${isMobile ? "--ds-space-3" : "--ds-space-6"})`;
+  const padStyle = resolvedSize === "sm" ? "var(--ds-space-2) var(--ds-space-4)" : resolvedSize === "lg" ? `var(--ds-space-2) var(--ds-space-6)` : `var(--ds-space-1) var(--ds-space-6)`;
   const floatingClasses = isFloating ? cn("rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]", GLASS_SURFACE) : void 0;
   let headerEl;
   if (align === "center") {
@@ -12365,7 +12827,8 @@ function MobileMenuItem({
 }
 var DEFAULT_BUTTON_ATTR = "data-dialog-default-button";
 var sizeClasses = {
-  sm: "max-w-sm",
+  // round 16 (the owner's item 5): the small dialog is 448 px, not 384 — a delete confirmation with a typed field was cramped
+  sm: "max-w-md",
   md: "max-w-lg",
   lg: "max-w-2xl",
   xl: "max-w-4xl",
@@ -13484,8 +13947,11 @@ function useToast() {
   if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
   return ctx;
 }
+function useToastOptional() {
+  return useContext(ToastContext);
+}
 var toastSeq = 0;
-function ToastProvider({ children, maxVisible = 1, position = "bottom-right", duration = 5e3, mode, pauseOnHover = true }) {
+function ToastProvider({ children, maxVisible = 1, position = "bottom-right", duration = 5e3, mode, pauseOnHover = true, coalesce = true }) {
   const [queue, setQueue] = useState([]);
   const isMobile = useBreakpoint("sm");
   const dismiss = useCallback((id) => {
@@ -13502,11 +13968,24 @@ function ToastProvider({ children, maxVisible = 1, position = "bottom-right", du
       message,
       variant: options.variant ?? "default",
       duration: options.duration ?? duration,
-      action: options.action
+      action: options.action,
+      key: options.key ?? options.variant ?? "default"
     };
-    setQueue((q) => q.some((t) => t.id === id) ? q.map((t) => t.id === id ? entry : t) : [...q, entry]);
+    const slots = Math.max(1, maxVisible);
+    setQueue((q) => {
+      if (q.some((t) => t.id === id)) return q.map((t) => t.id === id ? entry : t);
+      if (coalesce && q.length >= slots) {
+        const waiting = q.findIndex((t, i) => i >= slots && t.key === entry.key);
+        if (waiting >= 0) {
+          const next = [...q];
+          next[waiting] = entry;
+          return next;
+        }
+      }
+      return [...q, entry];
+    });
     return id;
-  }, [duration]);
+  }, [duration, maxVisible, coalesce]);
   const api = useMemo(() => ({
     toast,
     success: (m, o) => toast(m, { ...o, variant: "success" }),
@@ -13561,6 +14040,75 @@ function ToastProvider({ children, maxVisible = 1, position = "bottom-right", du
     )
   ] });
 }
+function useDestructiveAction(options) {
+  const { action, title, description, confirmLabel, typeToConfirm, onConfirm, onUndo, undoMessage, severity } = options;
+  const preferences = usePreferences();
+  const toast = useToastOptional();
+  const [open, setOpen] = useState(false);
+  const [typed, setTyped] = useState("");
+  const [busy, setBusy] = useState(false);
+  const key = action ?? preferenceActionKey(title.replace(/\?$/, ""));
+  const mode = preferences.destructiveMode ?? "dialog";
+  const high = severity === "high" || (preferences.highSeverityActions ?? []).includes(key);
+  const label = confirmLabel ?? title.replace(/\?$/, "").split(/\s+/)[0];
+  const listed = (preferences.typeToConfirmActions ?? []).includes(key) || high;
+  const typedText = typeToConfirm && typeToConfirm.trim() ? typeToConfirm : label.toUpperCase();
+  const typedRequired = listed;
+  const undoable = mode === "undo" && !high && typeof onUndo === "function" && toast !== null;
+  const close = () => {
+    setOpen(false);
+    setTyped("");
+  };
+  const failureMessage = (err) => err instanceof Error && err.message ? err.message : `${title.replace(/\?$/, "")} failed. Try again.`;
+  const confirm = async () => {
+    setBusy(true);
+    try {
+      await onConfirm();
+      close();
+    } catch (err) {
+      toast?.error(failureMessage(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const run = () => {
+    if (undoable) {
+      void (async () => {
+        try {
+          await onConfirm();
+        } catch (err) {
+          toast.error(failureMessage(err));
+          return;
+        }
+        const seconds = preferences.undoWindowSeconds ?? 5;
+        toast.success(undoMessage ?? `${title.replace(/\?$/, "")} done`, { duration: seconds * 1e3, action: { label: "Undo", onClick: onUndo } });
+      })();
+      return;
+    }
+    setOpen(true);
+  };
+  const matches = !typedRequired || typed.trim().toLowerCase() === typedText.trim().toLowerCase();
+  const element = open ? /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose: close,
+      title,
+      description,
+      variant: "destructive",
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: close, disabled: busy, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => void confirm(), disabled: !matches || busy, loading: busy, children: label })
+      ] }),
+      children: typedRequired && /* @__PURE__ */ jsx(Field, { label: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Type ",
+        /* @__PURE__ */ jsx("strong", { children: typedText }),
+        " to confirm"
+      ] }), children: /* @__PURE__ */ jsx(Input, { value: typed, onChange: (e) => setTyped(e.target.value), autoComplete: "off" }) })
+    }
+  ) : null;
+  return { run, element, open };
+}
 var SectionHeading = forwardRef(function SectionHeading2({
   title,
   description,
@@ -13700,6 +14248,6 @@ var TextOverflow = forwardRef(function TextOverflow2({
   return /* @__PURE__ */ jsx(Tooltip, { content: resolvedTooltipContent, children: content });
 });
 
-export { Accordion, ActionPanel, ActionPanelGroup, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimePicker, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, useFormContext, useSidebar, useToast };
+export { Accordion, ActionPanel, ActionPanelGroup, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimePicker, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, useContentWidth, useDestructiveAction, useFormContext, useSidebar, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map