gridsmith-ui 0.19.0 → 0.20.0

package/dist/index.js

@@ -1,7 +1,9 @@
-import { Button, useAppShell, REACT_VERSION_PROBLEM, ControlSizeContext, useDirtyGuard, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-5PDTHKW3.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-5PDTHKW3.js';
+import { Button, useAppShell, REACT_VERSION_PROBLEM, ControlSizeContext, useOverlayMark, useDirtyGuard, OverlayMarkCtx, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-6MXHGH3D.js';
+export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-6MXHGH3D.js';
 import { Skeleton, TITLE_TEXT } from './chunk-NCIZQYXQ.js';
 export { Skeleton } from './chunk-NCIZQYXQ.js';
+import { useReportedChange, useOptionalFormContext, FormChangeCtx, FormCtx } from './chunk-XVB55M3N.js';
+export { useFormContext } from './chunk-XVB55M3N.js';
 import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, focusAfterRemoval, rovingTabStop, useGridKeyboard, useNonModalDialog, usePressMarks, useReturnFocus, useCloseOnFocusOut } from './chunk-JXANCXK6.js';
 export { useGridKeyboard } from './chunk-JXANCXK6.js';
 import { Link } from './chunk-EQDR57AM.js';
@@ -115,6 +117,7 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
             return /* @__PURE__ */ jsxs(
               "button",
               {
+                type: "button",
                 "data-index": i,
                 role: "menuitem",
                 disabled: item.disabled,
@@ -194,6 +197,7 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: onClearSelection,
             className: "ml-auto text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
             "aria-label": "Clear selection",
@@ -204,6 +208,11 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
     }
   );
 }
+var valueOf = (e) => {
+  const t = e.target;
+  if (!t) return void 0;
+  return t instanceof HTMLInputElement && (t.type === "checkbox" || t.type === "radio") ? t.checked : t.value;
+};
 var INPUT_HEIGHT = {
   sm: "h-[var(--ds-control-height-sm)]",
   md: "h-[var(--ds-control-height-md)]",
@@ -217,6 +226,7 @@ var INPUT_TEXT = {
 function Input({ className, size: sizeProp, error = false, prefix, suffix, ...props }) {
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
+  const onChange = useReportedChange(props.onChange, props.value, valueOf);
   const borderColor = error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]";
   const hoverBorder = !error && !props.disabled && !props.readOnly ? "hover:border-[var(--ds-input-border-hover)]" : "";
   if (prefix || suffix) {
@@ -252,7 +262,8 @@ function Input({ className, size: sizeProp, error = false, prefix, suffix, ...pr
                 "disabled:cursor-not-allowed",
                 "read-only:text-[var(--ds-text-secondary)] read-only:cursor-default"
               ),
-              ...props
+              ...props,
+              onChange: props.onChange || props.value === void 0 ? onChange : void 0
             }
           ),
           suffix && /* @__PURE__ */ jsx("span", { className: "shrink-0 pr-ds-3 text-[var(--ds-text-muted)] flex items-center", children: suffix })
@@ -281,11 +292,13 @@ function Input({ className, size: sizeProp, error = false, prefix, suffix, ...pr
         "transition-colors duration-[var(--ds-transition-speed)]",
         className
       ),
-      ...props
+      ...props,
+      onChange: props.onChange || props.value === void 0 ? onChange : void 0
     }
   );
 }
 function Textarea({ className, autoResize, maxRows, error = false, ref, ...props }) {
+  const onChange = useReportedChange(props.onChange, props.value, valueOf);
   const internalRef = useRef(null);
   const textareaRef = ref ?? internalRef;
   const resize = useCallback(() => {
@@ -324,7 +337,8 @@ function Textarea({ className, autoResize, maxRows, error = false, ref, ...props
         className
       ),
       onInput: autoResize ? resize : void 0,
-      ...props
+      ...props,
+      onChange: props.onChange || props.value === void 0 ? onChange : void 0
     }
   );
 }
@@ -347,18 +361,20 @@ var TOGGLE_SIZES = {
   md: { w: 44, h: 24, thumb: 16 }
 };
 function Toggle({ checked, onChange, label, disabled, error = false, layout = "full", size = "md", "aria-labelledby": ariaLabelledBy, ...rest }) {
+  const change = useReportedChange(onChange, checked);
   const dims = TOGGLE_SIZES[size];
   const travel = dims.w - dims.thumb - 3;
   const switchButton = /* @__PURE__ */ jsx(
     "button",
     {
+      type: "button",
       role: "switch",
       "aria-checked": checked,
       "aria-label": !label && !ariaLabelledBy ? "Toggle" : void 0,
       "aria-labelledby": ariaLabelledBy,
       "aria-invalid": error || void 0,
       disabled,
-      onClick: () => !disabled && onChange(!checked),
+      onClick: () => !disabled && change(!checked),
       ...rest,
       className: cn(
         "relative inline-flex shrink-0 items-center overflow-hidden",
@@ -407,15 +423,6 @@ function Toggle({ checked, onChange, label, disabled, error = false, layout = "f
     }
   );
 }
-var FormCtx = createContext(null);
-function useFormContext() {
-  const ctx = useContext(FormCtx);
-  if (!ctx) throw new Error("useFormContext must be used within FormWrapper");
-  return ctx;
-}
-function useOptionalFormContext() {
-  return useContext(FormCtx);
-}
 function InlineFieldError({ message, id, className }) {
   return /* @__PURE__ */ jsxs(
     "p",
@@ -454,7 +461,9 @@ function useFieldControl(own, options = {}) {
     requiredNote: noteId ? /* @__PURE__ */ jsx("span", { id: noteId, hidden: true, children: "Required" }) : null
   };
 }
-function Field({ label, children, hint, error, required, labelAction, id: idProp, validate, className }) {
+var AddAnotherRowCtx = createContext(false);
+function Field({ label, children, hint, error, required, labelAction, hideLabel = false, id: idProp, validate, className }) {
+  const inGroupRow = useContext(AddAnotherRowCtx);
   const generated = useId();
   const id = idProp ?? `field-${generated}`;
   const hintId = `${id}-hint`;
@@ -533,6 +542,10 @@ function Field({ label, children, hint, error, required, labelAction, id: idProp
     } } : {};
     control = cloneElement(child, isNative ? ariaOnly : { ...ariaOnly, ...errorFlag ? { error: true } : {}, ...onChange });
   }
+  const labelNode = /* @__PURE__ */ jsxs(Label, { id: labelId, htmlFor: id, className: cn(hideLabel && "sr-only", hideLabel && inGroupRow && "@max-[30rem]:not-sr-only"), children: [
+    label,
+    required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
+  ] });
   return (
     // In a settings panel a field keeps the narrow reading width however wide the page is (--ds-form-max, Sprint 25.9 A4)
     /* @__PURE__ */ jsxs(
@@ -541,11 +554,8 @@ function Field({ label, children, hint, error, required, labelAction, id: idProp
         className: cn("flex flex-col gap-ds-1.5 max-w-[var(--ds-form-max,none)]", className),
         ...validate ? { onFocusCapture, onBlurCapture, onInputCapture: recheck } : {},
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
-            /* @__PURE__ */ jsxs(Label, { id: labelId, htmlFor: id, children: [
-              label,
-              required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
-            ] }),
+          hideLabel && !labelAction ? labelNode : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
+            labelNode,
             labelAction
           ] }),
           /* @__PURE__ */ jsx(FieldContext.Provider, { value: fieldContext, children: control }),
@@ -564,7 +574,7 @@ var DROPDOWN_HEIGHT = {
 function Dropdown({
   options,
   value,
-  onChange,
+  onChange: onChangeProp,
   label,
   disabled,
   placeholder = "Select...",
@@ -579,6 +589,7 @@ function Dropdown({
   "aria-label": ariaLabel,
   ...wiring
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const generatedId = useId();
   const control = useFieldControl({ ...wiring, error: error || void 0 }, { requiredInDescription: true });
@@ -865,6 +876,7 @@ function Dropdown({
             /* @__PURE__ */ jsx(
               "button",
               {
+                type: "button",
                 "data-chip-remove": "",
                 onClick: () => {
                   pendingChipFocus.current = { index: i, value: v };
@@ -932,7 +944,8 @@ var TEXT_SIZE = {
   md: "text-sm",
   lg: "text-base"
 };
-function Combobox({ value, onChange, options, placeholder = "Search\u2026", disabled, loading = false, className, ref, container, error = false, size: sizeProp, ...wiring }) {
+function Combobox({ value, onChange: onChangeProp, options, placeholder = "Search\u2026", disabled, loading = false, className, ref, container, error = false, size: sizeProp, ...wiring }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const control = useFieldControl({ ...wiring, error: error || void 0 });
   const size = sizeProp ?? contextSize ?? "md";
@@ -1130,6 +1143,7 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
           children: /* @__PURE__ */ jsx("div", { style: { padding: "var(--ds-space-1)" }, children: loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-ds-4", children: /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "Loading options" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-ds-2 py-ds-3 text-sm text-[var(--ds-text-muted)] text-center", children: "No results" }) : filtered.map((opt, i) => /* @__PURE__ */ jsxs(
             "button",
             {
+              type: "button",
               id: `${listboxId}-opt-${i}`,
               role: "option",
               tabIndex: -1,
@@ -1161,7 +1175,8 @@ var CHECKBOX_SIZES = {
   sm: { box: "h-[16px] w-[16px]", glyph: 10, label: "text-xs" },
   md: { box: "h-[18px] w-[18px]", glyph: 12, label: "text-sm" }
 };
-function Checkbox({ checked, onChange, label, size = "md", disabled = false, indeterminate = false, className, ref }) {
+function Checkbox({ checked, onChange: onChangeProp, label, size = "md", disabled = false, indeterminate = false, className, ref }) {
+  const onChange = useReportedChange(onChangeProp, checked);
   const internalRef = useRef(null);
   const dims = CHECKBOX_SIZES[size];
   const mergedRef = useCallback(
@@ -1253,7 +1268,8 @@ function CheckboxGroupItem({ value, label, disabled, groupValue, onGroupChange }
     }
   );
 }
-function RadioGroup({ value, onChange, options, orientation = "vertical", className, label }) {
+function RadioGroup({ value, onChange: onChangeProp, options, orientation = "vertical", className, label }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const groupRef = useRef(null);
   const groupId = useId();
   const enabledOptions = options.filter((o) => !o.disabled);
@@ -1478,7 +1494,8 @@ function parseTypedDate(text, dayFirst = localeDayFirst()) {
   }
   return null;
 }
-function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, className, ref, container, error = false, label, id, size: sizeProp, min, max, range: range2, ...wiring }) {
+function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date", disabled, className, ref, container, error = false, label, id, size: sizeProp, min, max, range: range2, ...wiring }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
@@ -2083,7 +2100,7 @@ var DEFAULT_DATE_RANGE_PRESETS = [
 ];
 function DateRangePicker({
   value,
-  onChange,
+  onChange: onChangeProp,
   placeholder = "Pick a date range",
   disabled,
   error = false,
@@ -2099,6 +2116,7 @@ function DateRangePicker({
   size: sizeProp,
   ...wiring
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
@@ -2462,22 +2480,27 @@ function TruncFileName({ children, className }) {
   if (!isTruncated) return el;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
 }
+var PARALLEL = 3;
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-function FileUpload({ onFiles, accept, multiple = true, maxSize, className, error = false, label, id }) {
-  const [files, setFiles] = useState([]);
+var running = (item) => item.status === "queued" || item.status === "uploading";
+var failureOf = (err) => err instanceof Error && err.message ? err.message : "The upload didn't work.";
+function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accept, multiple = true, maxSize, className, error = false, label, id }) {
+  const controlled = files !== void 0;
+  const [own, setOwn] = useState([]);
+  const shown = controlled ? files : own;
   const [dragOver, setDragOver] = useState(false);
   const [rejected, setRejected] = useState(null);
   const inputRef = useRef(null);
+  const listRef = useRef(null);
   const nextEntryId = useRef(0);
-  const timers = useRef(/* @__PURE__ */ new Map());
-  useEffect(() => {
-    const running = timers.current;
-    return () => running.forEach(clearInterval);
-  }, []);
+  const controllers = useRef(/* @__PURE__ */ new Map());
+  const uploadRef = useLatest(upload);
+  const overlayMark = useContext(OverlayMarkCtx);
+  const reportChange = useContext(FormChangeCtx);
   const field = useField();
   const ownId = useId();
   const inputId = id ?? `${ownId}-input`;
@@ -2487,37 +2510,100 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
   const constraints = fileConstraints(accept, maxSize, multiple);
   const invalid = error || rejected != null;
   const describedBy = [constraints ? constraintsId : null, field?.describedBy, rejected ? rejectedId : null].filter(Boolean).join(" ") || void 0;
-  const stopTimer = (id2) => {
-    clearInterval(timers.current.get(id2));
-    timers.current.delete(id2);
+  const patch = (itemId, change) => setOwn((prev) => prev.map((i) => i.id === itemId ? { ...i, ...change } : i));
+  const stop = (itemId) => {
+    controllers.current.get(itemId)?.abort();
+    controllers.current.delete(itemId);
+  };
+  const start = (item) => {
+    const run = uploadRef.current;
+    if (!run || !item.file) return;
+    const controller = new AbortController();
+    controllers.current.set(item.id, controller);
+    patch(item.id, { status: "uploading", progress: 0, error: void 0 });
+    const settle = (change) => {
+      if (controller.signal.aborted) return;
+      controllers.current.delete(item.id);
+      patch(item.id, change);
+    };
+    let attempt;
+    try {
+      attempt = Promise.resolve(run(item.file, {
+        signal: controller.signal,
+        onProgress: (percent) => {
+          if (!controller.signal.aborted) patch(item.id, { progress: Math.max(0, Math.min(100, percent)) });
+        }
+      }));
+    } catch (err) {
+      attempt = Promise.reject(err);
+    }
+    attempt.then(() => settle({ status: "done", progress: 100 }), (err) => settle({ status: "error", error: failureOf(err) }));
   };
+  useEffect(() => {
+    if (controlled || !upload) return;
+    let active = own.filter((i) => i.status === "uploading" && controllers.current.has(i.id)).length;
+    for (const item of own) {
+      if (active >= PARALLEL) break;
+      if (item.status === "queued" || item.status === "uploading" && !controllers.current.has(item.id)) {
+        start(item);
+        active++;
+      }
+    }
+  }, [own, controlled, upload]);
+  const stopAll = useCallback(() => {
+    controllers.current.forEach((c) => c.abort());
+    controllers.current.clear();
+  }, []);
+  useEffect(() => stopAll, [stopAll]);
+  const overlayOpen = overlayMark?.open ?? true;
+  const [wasOpen, setWasOpen] = useState(overlayOpen);
+  if (overlayOpen !== wasOpen) {
+    setWasOpen(overlayOpen);
+    if (!overlayOpen && !controlled) setOwn((prev) => prev.filter((i) => !running(i)));
+  }
+  useEffect(() => {
+    if (!overlayOpen && !controlled) stopAll();
+  }, [overlayOpen, controlled, stopAll]);
+  const busy = shown.some(running);
+  useEffect(() => {
+    if (!busy || !overlayMark) return;
+    return overlayMark.hold();
+  }, [busy, overlayMark]);
+  const [heard, setHeard] = useState("");
+  const [seen, setSeen] = useState(() => new Map(shown.map((i) => [i.id, i.status])));
+  if (shown.length !== seen.size || shown.some((i) => seen.get(i.id) !== i.status)) {
+    const said = [];
+    for (const item of shown) {
+      const before = seen.get(item.id);
+      if (!before || before === item.status) continue;
+      if (item.status === "done") said.push(`${item.name} uploaded`);
+      else if (item.status === "error") said.push(`${item.name} didn't upload: ${item.error ?? "the upload failed"}`);
+    }
+    setSeen(new Map(shown.map((i) => [i.id, i.status])));
+    if (said.length) setHeard(said.join(". "));
+  }
+  const pendingFocus = useRef(null);
+  useEffect(() => {
+    const index = pendingFocus.current;
+    if (index === null) return;
+    pendingFocus.current = null;
+    const rows = Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).map((row) => row.querySelector("button")).filter((b) => !!b);
+    focusAfterRemoval(rows, index, inputRef.current);
+  }, [shown]);
   const addFiles = useCallback(
     (fileList) => {
       const { accepted, message } = checkFiles(Array.from(fileList), { accept, maxSize, multiple });
       setRejected(message);
       if (accepted.length === 0) return;
-      const entries = accepted.map((file) => ({ id: nextEntryId.current++, file, progress: 0, status: "uploading" }));
-      if (!multiple) {
-        timers.current.forEach(clearInterval);
-        timers.current.clear();
-      }
-      setFiles((prev) => multiple ? [...prev, ...entries] : entries);
-      onFiles(accepted);
-      for (const { id: id2 } of entries) {
-        let progress = 0;
-        const timer = setInterval(() => {
-          progress = Math.min(100, progress + Math.random() * 30 + 10);
-          const done = progress >= 100;
-          if (done) {
-            clearInterval(timer);
-            timers.current.delete(id2);
-          }
-          setFiles((prev) => prev.map((f) => f.id === id2 ? { ...f, progress, status: done ? "complete" : "uploading" } : f));
-        }, 300);
-        timers.current.set(id2, timer);
-      }
+      reportChange?.();
+      onFiles?.(accepted);
+      if (controlled) return;
+      const status = uploadRef.current ? "queued" : "added";
+      const entries = accepted.map((file) => ({ id: `${ownId}-file-${nextEntryId.current++}`, name: file.name, size: file.size, status, file }));
+      if (!multiple) stopAll();
+      setOwn((prev) => multiple ? [...prev, ...entries] : entries);
     },
-    [accept, maxSize, multiple, onFiles]
+    [accept, maxSize, multiple, onFiles, controlled, ownId, reportChange, stopAll, uploadRef]
   );
   const handleDrop = useCallback(
     (e) => {
@@ -2527,10 +2613,31 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
     },
     [addFiles]
   );
-  const removeFile = (id2) => {
-    stopTimer(id2);
-    setFiles((prev) => prev.filter((f) => f.id !== id2));
+  const indexOf = (item) => shown.findIndex((i) => i.id === item.id);
+  const cancel = (item) => {
+    pendingFocus.current = indexOf(item);
+    if (!controlled) {
+      stop(item.id);
+      setOwn((prev) => prev.filter((i) => i.id !== item.id));
+    }
+    onCancel?.(item);
   };
+  const retry = (item) => {
+    if (!controlled) patch(item.id, { status: "queued", progress: 0, error: void 0 });
+    onRetry?.(item);
+  };
+  const remove = (item) => {
+    pendingFocus.current = indexOf(item);
+    reportChange?.();
+    if (!controlled) {
+      stop(item.id);
+      setOwn((prev) => prev.filter((i) => i.id !== item.id));
+    }
+    onRemove?.(item);
+  };
+  const canCancel = !controlled || !!onCancel;
+  const canRetry = !controlled || !!onRetry;
+  const canRemove = !controlled || !!onRemove;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-ds-3", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-ds-1.5", children: [
       showLabel && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: label }),
@@ -2586,33 +2693,43 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
       ),
       rejected && /* @__PURE__ */ jsx(InlineFieldError, { id: rejectedId, message: rejected, className: "mt-0" })
     ] }),
-    files.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-ds-2", children: files.map((entry) => /* @__PURE__ */ jsxs(
-      "li",
-      {
-        className: cn(
-          "flex items-center gap-ds-3 text-sm",
-          "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-          "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]"
-        ),
-        style: { padding: "var(--ds-space-3)" },
-        children: [
-          /* @__PURE__ */ jsx(Icon, { name: "folder", size: 16, className: "text-[var(--ds-text-muted)] shrink-0" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx(TruncFileName, { className: "text-[var(--ds-text-primary)]", children: entry.file.name }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)]", children: formatSize(entry.file.size) }),
-            entry.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: entry.progress, size: "sm", className: "mt-ds-1" })
-          ] }),
-          entry.status === "complete" && /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, className: "text-[var(--ds-status-success)] shrink-0" }),
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => removeFile(entry.id), "aria-label": "Remove file", children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
-        ]
-      },
-      entry.id
-    )) })
+    shown.length > 0 && /* @__PURE__ */ jsx("ul", { ref: listRef, className: "space-y-ds-2", children: shown.map((item) => {
+      const words = item.status === "queued" ? "Waiting" : item.status === "uploading" ? `${Math.round(item.progress ?? 0)}%` : item.status === "done" ? "Uploaded" : item.status === "error" ? "Failed" : null;
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          "data-upload-status": item.status,
+          className: cn(
+            "flex items-center gap-ds-3 text-sm",
+            "border-[length:var(--ds-border-width)]",
+            item.status === "error" ? "border-[var(--ds-status-error)]" : "border-[var(--ds-border-subtle)]",
+            "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]"
+          ),
+          style: { padding: "var(--ds-space-3)" },
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "folder", size: 16, className: "text-[var(--ds-text-muted)] shrink-0" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx(TruncFileName, { className: "text-[var(--ds-text-primary)]", children: item.name }),
+              (item.size != null || words) && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)]", children: [item.size != null ? formatSize(item.size) : null, words].filter(Boolean).join(" \xB7 ") }),
+              item.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: item.progress ?? 0, size: "sm", label: `Uploading ${item.name}`, className: "mt-ds-1" }),
+              item.status === "error" && /* @__PURE__ */ jsx("p", { className: "mt-ds-1 text-xs text-[var(--ds-status-error)]", children: item.error ?? "The upload didn't work." })
+            ] }),
+            item.status === "done" && /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, className: "text-[var(--ds-status-success)] shrink-0", "aria-hidden": "true" }),
+            running(item) && canCancel && // the visible word starts the name, which says which file (WCAG 2.5.3)
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => cancel(item), "aria-label": `Cancel ${item.name}`, children: "Cancel" }),
+            item.status === "error" && canRetry && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => retry(item), "aria-label": `Retry ${item.name}`, children: "Retry" }),
+            !running(item) && canRemove && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => remove(item), "aria-label": `Remove ${item.name}`, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
+          ]
+        },
+        item.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx("p", { role: "status", className: "sr-only", children: heard })
   ] });
 }
 function SliderRange({
   value,
-  onChange,
+  onChange: onChangeProp,
   min = 0,
   max = 100,
   step = 1,
@@ -2627,6 +2744,7 @@ function SliderRange({
   trackStyle,
   formatValue
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const field = useField();
   const ownId = useId();
   const showLabel = label != null && !field;
@@ -2832,7 +2950,7 @@ function parseTime(value) {
 }
 function TimePicker({
   value,
-  onChange,
+  onChange: onChangeProp,
   use24Hour = false,
   minuteStep = 15,
   disabled,
@@ -2844,6 +2962,7 @@ function TimePicker({
   size: sizeProp,
   ...wiring
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
   const size = sizeProp ?? contextSize ?? "md";
@@ -3222,7 +3341,7 @@ var sizes = {
 };
 function NumberInput({
   value,
-  onChange,
+  onChange: onChangeProp,
   min = -Infinity,
   max = Infinity,
   step = 1,
@@ -3236,6 +3355,7 @@ function NumberInput({
   allowDecimals,
   id
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const intervalRef = useRef(void 0);
@@ -3254,13 +3374,13 @@ function NumberInput({
     [min, max]
   );
   const valueRef = useLatest(value);
-  const commitValue = useCallback((v) => {
+  const commitValue = useCallback((v, own = false) => {
     const clamped = clamp(v);
     valueRef.current = clamped;
     setDraft(String(clamped));
-    onChange(clamped);
+    (own ? onChangeProp : onChange)(clamped);
     return clamped;
-  }, [onChange, clamp, valueRef]);
+  }, [onChange, onChangeProp, clamp, valueRef]);
   const increment = useCallback(() => commitValue(valueRef.current + step), [commitValue, step, valueRef]);
   const decrement = useCallback(() => commitValue(valueRef.current - step), [commitValue, step, valueRef]);
   const startRepeat = useCallback(
@@ -3302,7 +3422,7 @@ function NumberInput({
       setDraft(String(committed));
     } else {
       const fallback = isFinite(min) ? min : 0;
-      const committed = commitValue(value !== void 0 ? value : fallback);
+      const committed = commitValue(value !== void 0 ? value : fallback, true);
       setDraft(String(committed));
     }
   }, [draft, commitValue, min, value]);
@@ -3543,7 +3663,7 @@ var Tag = forwardRef(function Tag2({
 });
 function TagInput({
   value,
-  onChange,
+  onChange: onChangeProp,
   placeholder = "Add a tag...",
   maxTags = Infinity,
   disabled = false,
@@ -3552,6 +3672,7 @@ function TagInput({
   id,
   "aria-label": ariaLabel
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const [input, setInput] = useState("");
   const inputRef = useRef(null);
   const addTag = useCallback(
@@ -3677,7 +3798,7 @@ var sizes2 = {
 };
 function PinInput({
   value,
-  onChange,
+  onChange: onChangeProp,
   length = 6,
   mask = false,
   disabled = false,
@@ -3686,6 +3807,7 @@ function PinInput({
   error = false,
   id
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const inputsRef = useRef([]);
@@ -3821,7 +3943,7 @@ function StarIcon({ filled, half, size }) {
 }
 function Rating({
   value,
-  onChange,
+  onChange: onChangeProp,
   max = 5,
   allowHalf = false,
   readOnly = false,
@@ -3829,15 +3951,16 @@ function Rating({
   className,
   error = false
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const [hoverValue, setHoverValue] = useState(null);
   const displayValue = hoverValue ?? value;
   const handleClick = useCallback(
     (starIdx, isLeftHalf) => {
-      if (readOnly || !onChange) return;
+      if (readOnly || !onChangeProp) return;
       const newValue = allowHalf && isLeftHalf ? starIdx + 0.5 : starIdx + 1;
       onChange(newValue === value ? 0 : newValue);
     },
-    [readOnly, onChange, allowHalf, value]
+    [readOnly, onChangeProp, onChange, allowHalf, value]
   );
   const handleMouseMove = useCallback(
     (starIdx, e) => {
@@ -3851,7 +3974,7 @@ function Rating({
   const iconSize = iconSizes[size];
   const step = allowHalf ? 0.5 : 1;
   const handleKeyDown = (e) => {
-    if (readOnly || !onChange) return;
+    if (readOnly || !onChangeProp) return;
     let next = null;
     if (e.key === "ArrowRight" || e.key === "ArrowUp") next = Math.min(max, value + step);
     else if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = Math.max(0, value - step);
@@ -3975,13 +4098,14 @@ var DEFAULT_SWATCHES = [
 ];
 function ColorPicker({
   value,
-  onChange,
+  onChange: onChangeProp,
   showAlpha = false,
   swatches = DEFAULT_SWATCHES,
   disabled = false,
   className,
   error = false
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const [hsl, setHsl] = useState(() => hexToHsl(value));
   const [hexInput, setHexInput] = useState(value);
   const satLightRef = useRef(null);
@@ -4222,6 +4346,7 @@ var Alert = forwardRef(function Alert2({
                 trigger: /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
                     className: cn(
                       "shrink-0 text-xs font-medium px-ds-2.5 py-ds-1 rounded-[var(--ds-radius-sm)]",
                       "transition-colors cursor-pointer",
@@ -4246,6 +4371,7 @@ var Alert = forwardRef(function Alert2({
               return /* @__PURE__ */ jsxs(
                 "button",
                 {
+                  type: "button",
                   onClick: a.onClick,
                   className: cn(
                     "shrink-0 text-xs font-medium px-ds-2.5 py-ds-1 rounded-[var(--ds-radius-sm)]",
@@ -4266,6 +4392,7 @@ var Alert = forwardRef(function Alert2({
             /* @__PURE__ */ jsxs(
               "button",
               {
+                type: "button",
                 onClick: () => setDetailsExpanded(!detailsExpanded),
                 "aria-expanded": detailsExpanded,
                 className: cn(
@@ -4293,6 +4420,7 @@ var Alert = forwardRef(function Alert2({
         dismissible && /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: onDismiss,
             className: "shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
             "aria-label": "Dismiss",
@@ -4303,6 +4431,12 @@ var Alert = forwardRef(function Alert2({
     }
   );
 });
+function controlsOf(form) {
+  if (!form) return "";
+  const controls = form.querySelectorAll("input, select, textarea, [role='combobox'], [role='radiogroup'], [role='checkbox'], [role='switch'], [role='slider'], [role='spinbutton'], [contenteditable='true']");
+  return Array.from(controls).map((el) => el.id || el.getAttribute("name") || el.getAttribute("role") || el.tagName).join("|");
+}
+var isThenable = (value) => !!value && typeof value.then === "function";
 function stampFormId(node, formId) {
   return Children.map(node, (child) => {
     if (!isValidElement(child)) return child;
@@ -4359,12 +4493,30 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
   const pendingSubmit = useRef(false);
   const pendingFocus = useRef(false);
   const onSubmitRef = useLatest(onSubmit);
+  const overlayMark = useContext(OverlayMarkCtx);
+  const reportChange = overlayMark ? overlayMark.report : null;
+  const [savedCheck, setSavedCheck] = useState(null);
+  useEffect(() => {
+    if (!savedCheck) return;
+    const form = formRef.current;
+    if (form && !form.querySelector("[aria-invalid='true']") && controlsOf(form) === savedCheck.controls) overlayMark?.clear();
+  }, [savedCheck, overlayMark]);
   useEffect(() => {
     if (pendingSubmit.current && submitted) {
       pendingSubmit.current = false;
-      onSubmitRef.current(errorsRef.current);
+      const form = formRef.current;
+      const passed = Object.keys(errorsRef.current).length === 0 && !form?.querySelector("[aria-invalid='true']");
+      const controls = controlsOf(form);
+      const result = onSubmitRef.current(errorsRef.current);
+      if (!passed || !overlayMark) return;
+      if (isThenable(result)) {
+        result.then(() => overlayMark.clear(), () => {
+        });
+      } else {
+        setSavedCheck({ controls });
+      }
     }
-  }, [submitted, submitCount, errors, errorsRef, onSubmitRef]);
+  }, [submitted, submitCount, errors, errorsRef, onSubmitRef, overlayMark]);
   const submittedRef = useLatest(submitted);
   const errorSummaryRef = useLatest(errorSummary);
   const summaryRef = useRef(null);
@@ -4418,7 +4570,15 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     pendingFocus.current = false;
   }, []);
   const setError = useCallback((field, message) => {
-    setErrors((prev) => prev[field] === message ? prev : { ...prev, [field]: message });
+    setErrors((prev) => {
+      if (!message) {
+        if (!(field in prev)) return prev;
+        const next = { ...prev };
+        delete next[field];
+        return next;
+      }
+      return prev[field] === message ? prev : { ...prev, [field]: message };
+    });
   }, []);
   const checks = useRef(/* @__PURE__ */ new Map());
   const register = useCallback((field, check) => {
@@ -4443,9 +4603,16 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     (e) => {
       e.preventDefault();
       if (checks.current.size > 0) {
-        const found = {};
-        for (const [field, check] of checks.current) found[field] = check();
-        setErrors((prev) => ({ ...prev, ...found }));
+        const found = /* @__PURE__ */ new Map();
+        for (const [field, check] of checks.current) found.set(field, check());
+        setErrors((prev) => {
+          const next = { ...prev };
+          for (const [field, message] of found) {
+            if (message) next[field] = message;
+            else delete next[field];
+          }
+          return next;
+        });
       }
       pendingSubmit.current = true;
       pendingFocus.current = focusFirstError;
@@ -4468,22 +4635,67 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     f.message
   ] }, f.id || f.label)) }) }) : null;
   const actionsNode = actions && !drawerFooter ? /* @__PURE__ */ jsx("div", { "data-form-actions": "", className: cn("flex flex-wrap items-center gap-ds-2 pt-ds-2", actionsAlign === "end" ? "justify-end" : "justify-start"), children: actions }) : null;
-  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted, register }, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className: cn("flex flex-col gap-ds-5 max-w-[var(--ds-form-max,none)]", className), noValidate: true, children: [
+  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted, register }, children: /* @__PURE__ */ jsx(FormChangeCtx.Provider, { value: reportChange, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className: cn("flex flex-col gap-ds-5 max-w-[var(--ds-form-max,none)]", className), noValidate: true, children: [
     summaryNode && /* @__PURE__ */ jsx("div", { ref: summaryRef, "data-form-error-summary": "", tabIndex: -1, className: "rounded-[var(--ds-radius-md)] outline-none focus-visible:shadow-[var(--ds-shadow-focus)]", children: summaryNode }),
     children,
     actionsNode
-  ] }) });
+  ] }) }) });
+}
+var FOCUSABLE2 = "input:not([disabled]):not([type='hidden']), select:not([disabled]), textarea:not([disabled]), [role='combobox'], [role='switch'], [role='radio'], [tabindex]:not([tabindex='-1'])";
+function AddAnother({ items, getId, itemName, columns, renderRow, onAdd, onRemove, addLabel = "Add another", label, minItems = 1, maxItems, className }) {
+  const listRef = useRef(null);
+  const addRef = useRef(null);
+  const pending = useRef(null);
+  const firstFields = () => Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).map((row) => row.querySelector(FOCUSABLE2)).filter((el) => !!el);
+  useEffect(() => {
+    const next = pending.current;
+    if (!next) return;
+    pending.current = null;
+    const fields = firstFields();
+    if (next.kind === "add") fields[fields.length - 1]?.focus();
+    else focusAfterRemoval(fields, next.index, addRef.current);
+  }, [items]);
+  const canRemove = items.length > minItems;
+  const canAdd = maxItems === void 0 || items.length < maxItems;
+  const grid = { "--gs-add-another-cols": `repeat(${columns.length}, minmax(0, 1fr)) max-content` };
+  const body = /* @__PURE__ */ jsxs("div", { "data-add-another": "", className: cn("@container flex flex-col gap-ds-3", className), style: grid, children: [
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "hidden gap-ds-3 text-sm font-medium text-[var(--ds-text-secondary)] @min-[30rem]:grid @min-[30rem]:grid-cols-[var(--gs-add-another-cols)]", children: [
+      columns.map((column) => /* @__PURE__ */ jsx("span", { children: column }, column)),
+      canRemove && /* @__PURE__ */ jsx("span", { className: "invisible inline-flex items-center whitespace-nowrap px-ds-4 text-xs font-medium", children: "Remove" })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { ref: listRef, className: "flex flex-col gap-ds-4 @min-[30rem]:gap-ds-3", children: items.map((item, index) => {
+      const id = getId(item);
+      return /* @__PURE__ */ jsxs("li", { "data-add-another-row": "", className: "grid grid-cols-1 items-start gap-ds-3 @min-[30rem]:grid-cols-[var(--gs-add-another-cols)]", children: [
+        /* @__PURE__ */ jsx(AddAnotherRowCtx.Provider, { value: true, children: renderRow(item, index, (column) => `${column}, ${itemName(index)}`) }),
+        canRemove && // the visible "Remove" starts its name, which says whose row it removes (WCAG 2.5.3 label in name)
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `Remove ${itemName(index)}`, className: "justify-self-start @min-[30rem]:mt-[calc((var(--ds-control-height-md)-var(--ds-control-height-sm))/2)]", onClick: () => {
+          pending.current = { kind: "remove", index };
+          onRemove(id);
+        }, children: "Remove" })
+      ] }, id);
+    }) }),
+    canAdd && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { ref: addRef, type: "button", variant: "secondary", onClick: () => {
+      pending.current = { kind: "add" };
+      onAdd();
+    }, children: addLabel }) })
+  ] });
+  if (!label) return body;
+  return /* @__PURE__ */ jsxs("fieldset", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsx("legend", { className: "mb-ds-2 text-sm font-medium text-[var(--ds-text-primary)]", children: label }),
+    body
+  ] });
 }
 function TransferList({
   available,
   selected,
-  onChange,
+  onChange: onChangeProp,
   availableTitle = "Available",
   selectedTitle = "Selected",
   searchable = true,
   className,
   ref
 }) {
+  const onChange = useReportedChange(onChangeProp, selected);
   const [checkedAvailable, setCheckedAvailable] = useState(/* @__PURE__ */ new Set());
   const [checkedSelected, setCheckedSelected] = useState(/* @__PURE__ */ new Set());
   const [searchLeft, setSearchLeft] = useState("");
@@ -4565,6 +4777,7 @@ function TransferList({
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: moveAllRight,
           disabled: !available.filter((i) => !i.disabled).length,
           "aria-label": isStacked ? "Move all down" : "Move all right",
@@ -4575,6 +4788,7 @@ function TransferList({
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: moveRight,
           disabled: !checkedAvailable.size,
           "aria-label": isStacked ? "Move selected down" : "Move selected right",
@@ -4585,6 +4799,7 @@ function TransferList({
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: moveLeft,
           disabled: !checkedSelected.size,
           "aria-label": isStacked ? "Move selected up" : "Move selected left",
@@ -4595,6 +4810,7 @@ function TransferList({
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: moveAllLeft,
           disabled: !selected.filter((i) => !i.disabled).length,
           "aria-label": isStacked ? "Move all up" : "Move all left",
@@ -4726,62 +4942,6 @@ function toInitials(value) {
   if (!/\s/.test(s) && Array.from(s).length <= 3) return s;
   return initialsOf(s);
 }
-var variantColors = {
-  success: "bg-[var(--ds-status-success)]",
-  warning: "bg-[var(--ds-status-warning)]",
-  error: "bg-[var(--ds-status-error)]",
-  info: "bg-[var(--ds-accent-primary)]",
-  neutral: "bg-[var(--ds-text-muted)]",
-  offline: "bg-[var(--ds-text-muted)] opacity-disabled"
-};
-var pulseRingColors = {
-  success: "bg-[color-mix(in_oklch,var(--ds-status-success)_30%,transparent)]",
-  warning: "bg-[color-mix(in_oklch,var(--ds-status-warning)_30%,transparent)]",
-  error: "bg-[color-mix(in_oklch,var(--ds-status-error)_30%,transparent)]",
-  info: "bg-[var(--ds-accent-soft)]",
-  neutral: "bg-[color-mix(in_oklch,var(--ds-text-muted)_20%,transparent)]",
-  offline: "bg-[color-mix(in_oklch,var(--ds-text-muted)_10%,transparent)]"
-};
-var StatusDot = forwardRef(function StatusDot2({
-  variant = "neutral",
-  label,
-  pulse = false,
-  className
-}, ref) {
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ref,
-      className: cn("inline-flex items-center gap-ds-1.5", className),
-      role: "status",
-      "aria-label": label ?? variant,
-      children: [
-        /* @__PURE__ */ jsxs("span", { className: "relative inline-flex shrink-0", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "rounded-[var(--ds-radius-full)] h-2.5 w-2.5",
-                variantColors[variant]
-              )
-            }
-          ),
-          pulse && variant !== "offline" && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "absolute inset-0 rounded-[var(--ds-radius-full)]",
-                "animate-ping motion-reduce:animate-none",
-                pulseRingColors[variant]
-              )
-            }
-          )
-        ] }),
-        label && /* @__PURE__ */ jsx("span", { className: "font-normal text-[var(--ds-text-primary)] text-[length:var(--ds-font-size-xs)]", children: label })
-      ]
-    }
-  );
-});
 var sizeStyles2 = {
   sm: "h-8 w-8 text-xs",
   md: "h-10 w-10 text-sm",
@@ -4804,13 +4964,23 @@ function colorStyles(color, seed) {
   if (color === "neutral") return "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]";
   return paletteStyles[color === "auto" ? paletteFor(seed) : color];
 }
-var statusVariantMap = {
-  online: "success",
-  away: "warning",
-  busy: "error",
-  offline: "offline"
-};
+function PresenceMark({ status }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 10 10", width: "10", height: "10", "aria-hidden": "true", focusable: "false", "data-presence": status, className: "block", children: [
+    status === "online" && /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "5", className: "fill-[var(--ds-status-success)]" }),
+    status === "away" && /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "4", fill: "none", strokeWidth: "2", className: "stroke-[var(--ds-status-warning)]" }),
+    status === "busy" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "5", className: "fill-[var(--ds-status-error)]" }),
+      /* @__PURE__ */ jsx("rect", { x: "2.5", y: "4.1", width: "5", height: "1.8", rx: "0.9", className: "fill-[var(--ds-bg-canvas)]" })
+    ] }),
+    status === "offline" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "4", fill: "none", strokeWidth: "2", className: "stroke-[var(--ds-text-muted)]" }),
+      /* @__PURE__ */ jsx("line", { x1: "3.1", y1: "6.9", x2: "6.9", y2: "3.1", strokeWidth: "1.5", strokeLinecap: "round", className: "stroke-[var(--ds-text-muted)]" })
+    ] })
+  ] });
+}
 function Avatar({ initials, src, alt, size = "md", status, color = "auto", className }) {
+  const who = alt ?? initials ?? "";
+  const named = status ? [who, status].filter(Boolean).join(", ") : void 0;
   const base = cn(
     "inline-flex items-center justify-center font-medium shrink-0",
     "rounded-[var(--ds-radius-full)]",
@@ -4822,13 +4992,15 @@ function Avatar({ initials, src, alt, size = "md", status, color = "auto", class
     {
       "data-avatar": "",
       src,
-      alt: alt ?? initials ?? "",
+      alt: named ?? alt ?? initials ?? "",
       className: cn(base, "object-cover")
     }
   ) : /* @__PURE__ */ jsx(
     "div",
     {
       "data-avatar": "",
+      role: named ? "img" : void 0,
+      "aria-label": named,
       className: cn(
         base,
         colorStyles(color, alt ?? initials ?? ""),
@@ -4850,20 +5022,14 @@ function Avatar({ initials, src, alt, size = "md", status, color = "auto", class
           size === "lg" && "bottom-[0px] right-[0px]"
         ),
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx(
-          StatusDot,
-          {
-            variant: statusVariantMap[status],
-            className: "rounded-[var(--ds-radius-full)] shadow-[0_0_0_2px_var(--ds-bg-canvas)]"
-          }
-        )
+        children: /* @__PURE__ */ jsx("span", { className: "block rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-canvas)] shadow-[0_0_0_2px_var(--ds-bg-canvas)]", children: /* @__PURE__ */ jsx(PresenceMark, { status }) })
       }
     )
   ] });
 }
 function MentionInput({
   value: controlledValue,
-  onChange,
+  onChange: onChangeProp,
   suggestions,
   trigger = "@",
   placeholder,
@@ -4872,6 +5038,7 @@ function MentionInput({
 }) {
   const [internalValue, setInternalValue] = useState("");
   const value = controlledValue ?? internalValue;
+  const onChange = useReportedChange(onChangeProp, value);
   const [query, setQuery] = useState("");
   const [showPopup, setShowPopup] = useState(false);
   const [activeIndex, setActiveIndex] = useState(0);
@@ -5777,6 +5944,57 @@ var DescriptionList = forwardRef(function DescriptionList2({
     }
   );
 });
+var variantColors = {
+  success: "bg-[var(--ds-status-success)]",
+  warning: "bg-[var(--ds-status-warning)]",
+  error: "bg-[var(--ds-status-error)]",
+  info: "bg-[var(--ds-accent-primary)]",
+  neutral: "bg-[var(--ds-text-muted)]",
+  offline: "bg-[var(--ds-text-muted)] opacity-disabled"
+};
+var pulseRingColors = {
+  success: "bg-[color-mix(in_oklch,var(--ds-status-success)_30%,transparent)]",
+  warning: "bg-[color-mix(in_oklch,var(--ds-status-warning)_30%,transparent)]",
+  error: "bg-[color-mix(in_oklch,var(--ds-status-error)_30%,transparent)]",
+  info: "bg-[var(--ds-accent-soft)]",
+  neutral: "bg-[color-mix(in_oklch,var(--ds-text-muted)_20%,transparent)]",
+  offline: "bg-[color-mix(in_oklch,var(--ds-text-muted)_10%,transparent)]"
+};
+var StatusDot = forwardRef(function StatusDot2({
+  variant = "neutral",
+  label,
+  pulse = false,
+  className
+}, ref) {
+  return (
+    // No live region (A48): the dot is read as its words where it sits; telling the user about a change as it happens
+    // is the toasts' job (WCAG 4.1.3). The dot itself is hidden from assistive technology.
+    /* @__PURE__ */ jsxs("span", { ref, "data-status-dot": variant, className: cn("inline-flex items-center gap-ds-1.5", className), children: [
+      /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "relative inline-flex shrink-0", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "rounded-[var(--ds-radius-full)] h-2.5 w-2.5",
+              variantColors[variant]
+            )
+          }
+        ),
+        pulse && variant !== "offline" && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "absolute inset-0 rounded-[var(--ds-radius-full)]",
+              "animate-ping motion-reduce:animate-none",
+              pulseRingColors[variant]
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "font-normal text-[var(--ds-text-primary)] text-[length:var(--ds-font-size-xs)]", children: label })
+    ] })
+  );
+});
 function Accordion({ items, type = "single", defaultOpen = [], open: controlledOpen, onOpenChange, className }) {
   const [internalOpen, setInternalOpen] = useState(new Set(defaultOpen));
   const baseId = useId();
@@ -5811,6 +6029,7 @@ function Accordion({ items, type = "single", defaultOpen = [], open: controlledO
       /* @__PURE__ */ jsxs(
         "button",
         {
+          type: "button",
           id: triggerId,
           "aria-expanded": isOpen,
           "aria-controls": panelId,
@@ -6196,6 +6415,7 @@ function Table({
               expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), children: /* @__PURE__ */ jsx(
                 "button",
                 {
+                  type: "button",
                   onClick: () => toggleExpand(i),
                   className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] cursor-pointer",
                   "aria-expanded": isExpanded,
@@ -6312,7 +6532,7 @@ var indicatorInset = {
 };
 function SegmentedControl({
   value,
-  onChange,
+  onChange: onChangeProp,
   options,
   size: sizeProp,
   variant = "default",
@@ -6323,6 +6543,7 @@ function SegmentedControl({
   maxOptions = 6,
   ...wiring
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const control = useFieldControl(wiring);
   const named = !ariaLabel && control.labelId ? { "aria-labelledby": control.labelId } : {};
@@ -8864,6 +9085,7 @@ function Carousel({
           /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               onClick: prev,
               disabled: !canPrev,
               "aria-label": "Previous slide",
@@ -8883,6 +9105,7 @@ function Carousel({
           /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               onClick: next,
               disabled: !canNext,
               "aria-label": "Next slide",
@@ -8903,6 +9126,7 @@ function Carousel({
         showIndicators && count > 1 && /* @__PURE__ */ jsx("div", { className: "absolute bottom-ds-3 left-1/2 -translate-x-1/2 flex gap-ds-1.5 z-10", children: children.map((_, i) => /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: () => goTo(i),
             "aria-label": `Go to slide ${i + 1}`,
             className: cn(
@@ -11651,6 +11875,7 @@ function TabButton({
     const btn2 = /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         id: tabId,
         role: "tab",
         "aria-selected": isActive,
@@ -11686,6 +11911,7 @@ function TabButton({
   const btn = /* @__PURE__ */ jsx(
     "button",
     {
+      type: "button",
       id: tabId,
       role: "tab",
       "aria-selected": isActive,
@@ -12059,6 +12285,7 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             ref: ellipsisBtnRef,
             onClick: () => {
               if (!dropdownOpen) setActiveIdx(0);
@@ -12109,6 +12336,7 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
         children: collapsedItems.map((ci, idx) => /* @__PURE__ */ jsxs(
           "button",
           {
+            type: "button",
             "data-index": idx,
             role: "menuitem",
             tabIndex: idx === activeIdx ? 0 : -1,
@@ -12304,6 +12532,7 @@ function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSize
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: () => onPageChange(currentPage - 1),
           disabled: currentPage <= 1,
           "aria-label": "Previous page",
@@ -12323,6 +12552,7 @@ function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSize
         (p, i) => p === "..." ? /* @__PURE__ */ jsx(EllipsisJumper, { totalPages, onPageChange }, `ellipsis-${i}`) : /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: () => onPageChange(p),
             "aria-current": p === currentPage ? "page" : void 0,
             className: cn(
@@ -12340,6 +12570,7 @@ function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSize
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: () => onPageChange(currentPage + 1),
           disabled: currentPage >= totalPages,
           "aria-label": "Next page",
@@ -12602,6 +12833,7 @@ function StepCircle({ status, index, onClick, clickable }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
+      type: "button",
       onClick,
       disabled: !clickable,
       "aria-current": status === "current" ? "step" : void 0,
@@ -12796,7 +13028,7 @@ var Sidebar = forwardRef(function Sidebar2({
   position = "flush",
   navbarFloating: navbarFloatingProp,
   navSize = "md",
-  fill = false,
+  fill: fill2 = false,
   className
 }, ref) {
   const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed ?? false);
@@ -12806,10 +13038,10 @@ var Sidebar = forwardRef(function Sidebar2({
   const appShell = useAppShell();
   const navbarFloating = navbarFloatingProp ?? appShell?.navbarFloating;
   useLayoutEffect(() => {
-    if (fill || !appShell) return;
+    if (fill2 || !appShell) return;
     return appShell.registerChrome("sidebar", position);
-  }, [appShell?.registerChrome, fill, position]);
-  const usesShellState = appShell !== null && !isControlled && defaultCollapsed === void 0 && !fill && type === "traditional";
+  }, [appShell?.registerChrome, fill2, position]);
+  const usesShellState = appShell !== null && !isControlled && defaultCollapsed === void 0 && !fill2 && type === "traditional";
   const uncontrolledCollapsed = usesShellState ? appShell.sidebarCollapsed : internalCollapsed;
   const collapsed = mini || (isControlled ? controlledCollapsed : uncontrolledCollapsed);
   const handleCollapsedChange = (value) => {
@@ -12828,11 +13060,11 @@ var Sidebar = forwardRef(function Sidebar2({
     effectiveDarkMode = false;
   }
   const isDark = effectiveDarkMode ?? variant === "dark";
-  const showCollapse = type === "traditional" && !mini && !fill;
+  const showCollapse = type === "traditional" && !mini && !fill2;
   const isMinimal = type === "minimal";
   const isCompact = type === "compact";
-  const isFloating = position === "floating" && !fill;
-  const sidebarWidth = fill ? "100%" : isCompact ? "var(--ds-sidebar-compact-width)" : collapsed ? "var(--ds-sidebar-collapsed-width)" : "var(--ds-sidebar-width)";
+  const isFloating = position === "floating" && !fill2;
+  const sidebarWidth = fill2 ? "100%" : isCompact ? "var(--ds-sidebar-compact-width)" : collapsed ? "var(--ds-sidebar-collapsed-width)" : "var(--ds-sidebar-width)";
   const aside = /* @__PURE__ */ jsxs(
     "aside",
     {
@@ -12870,6 +13102,7 @@ var Sidebar = forwardRef(function Sidebar2({
           const collapseButton = /* @__PURE__ */ jsxs(
             "button",
             {
+              type: "button",
               onClick: () => handleCollapsedChange(!collapsed),
               "aria-expanded": !collapsed,
               "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
@@ -13222,6 +13455,7 @@ function SidebarNav({
       /* @__PURE__ */ jsxs(
         "button",
         {
+          type: "button",
           onClick: () => {
             toggleExpand(key);
             onItemClick?.(item, index);
@@ -13356,6 +13590,7 @@ function SidebarNav({
         collapsible && /* @__PURE__ */ jsxs(
           "button",
           {
+            type: "button",
             onClick: () => onCollapsedChange(!collapsed),
             title: collapsed ? "Expand sidebar" : "Collapse sidebar",
             className: cn(
@@ -13422,6 +13657,7 @@ function CompactNavItem({
     /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         ref: setTriggerEl,
         onMouseEnter: !mobile && hasChildren ? handleMouseEnter : void 0,
         onMouseLeave: !mobile && hasChildren && isOpen ? handleMouseLeave : void 0,
@@ -13484,6 +13720,7 @@ function CompactNavItem({
     mobile && expanded && hasChildren && item.children && /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col gap-ds-1 pb-ds-1", children: item.children.map((child, ci) => /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         onClick: () => onItemClick?.(child, ci),
         className: cn(
           "flex items-center gap-ds-2 px-ds-3 py-ds-1.5 text-[length:var(--ds-font-size-xs)] rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer w-full",
@@ -13498,20 +13735,486 @@ function CompactNavItem({
     )) })
   ] });
 }
-function BottomNav({ items, onItemClick, maxVisible = 5, className, ref }) {
-  const needsOverflow = items.length > maxVisible;
-  const visibleItems = needsOverflow ? items.slice(0, maxVisible - 1) : items;
-  const overflowItems = needsOverflow ? items.slice(maxVisible - 1) : [];
-  const overflowHasActive = overflowItems.some((it) => it.active);
-  const [overflowOpen, setOverflowOpen] = useState(false);
-  const menuRef = useRef(null);
-  const closeOverflow = useCallback(() => setOverflowOpen(false), []);
+var variantStyles4 = {
+  default: "border-[var(--ds-border-default)] bg-[var(--ds-bg-surface)]",
+  success: "border-[var(--ds-status-success)] bg-[var(--ds-status-success-bg)]",
+  warning: "border-[var(--ds-status-warning)] bg-[var(--ds-status-warning-bg)]",
+  error: "border-[var(--ds-status-error)] bg-[var(--ds-status-error-bg)]"
+};
+var variantIcons = {
+  default: { name: "info", className: "text-[var(--ds-text-muted)]" },
+  success: { name: "check", className: "text-[var(--ds-status-success)]" },
+  warning: { name: "warning", className: "text-[var(--ds-status-warning)]" },
+  error: { name: "error", className: "text-[var(--ds-status-error)]" }
+};
+var TOAST_POSITION_CLASSES = {
+  "top-right": "top-[var(--ds-toast-inset-top)] right-[var(--ds-toast-inset-right)]",
+  "top-left": "top-[var(--ds-toast-inset-top)] left-[var(--ds-toast-inset-left)]",
+  "bottom-right": "bottom-[var(--ds-toast-inset-bottom-right)] right-[var(--ds-toast-inset-right)]",
+  "bottom-left": "bottom-[var(--ds-toast-inset-bottom-left)] left-[var(--ds-toast-inset-left)]",
+  "top-center": "top-[var(--ds-toast-inset-top)] left-1/2 -translate-x-1/2",
+  "bottom-center": "bottom-ds-4 left-1/2 -translate-x-1/2"
+};
+var finite = (ms) => typeof ms === "number" && Number.isFinite(ms) && ms > 0;
+function Toast({ variant = "default", message, visible, onDismiss, duration = 5e3, pauseOnHover = false, action, actionWindow, position = "bottom-right", mode, container, inline = false, paused = false, onActionLapse, onAction, restartKey = 0 }) {
+  const isMobile = useBreakpoint("sm");
+  const isCentered = position === "top-center" || position === "bottom-center";
+  const [hovered, setHovered] = useState(false);
+  const onDismissRef = useLatest(onDismiss);
+  const onLapseRef = useLatest(onActionLapse);
+  const actionUsed = useRef(false);
+  const phase = action ? finite(actionWindow) ? "window" : "none" : finite(duration) ? "plain" : "none";
+  const total = phase === "window" ? actionWindow : phase === "plain" ? duration : 0;
+  const timer = useRef(void 0);
+  const remaining = useRef(total);
+  const startedAt = useRef(0);
+  const isPaused = paused || !inline && pauseOnHover && hovered;
+  const stop = useCallback(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = void 0;
+      remaining.current -= Date.now() - startedAt.current;
+    }
+  }, []);
+  const start = useCallback(() => {
+    if (phase === "none" || timer.current) return;
+    startedAt.current = Date.now();
+    const expire = phase === "window" ? () => {
+      timer.current = void 0;
+      if (onLapseRef.current) onLapseRef.current();
+      else onDismissRef.current();
+    } : () => {
+      timer.current = void 0;
+      onDismissRef.current();
+    };
+    timer.current = setTimeout(expire, Math.max(0, remaining.current));
+  }, [phase, onDismissRef, onLapseRef]);
   useEffect(() => {
-    if (!overflowOpen) return;
-    function handleClick(e) {
-      if (menuRef.current && !menuRef.current.contains(e.target)) closeOverflow();
+    if (!visible) return;
+    remaining.current = total;
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = void 0;
     }
-    document.addEventListener("mousedown", handleClick);
+    if (!isPaused) start();
+    return () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+        timer.current = void 0;
+      }
+    };
+  }, [visible, phase, total, restartKey]);
+  useEffect(() => {
+    if (!visible) return;
+    if (isPaused) stop();
+    else start();
+  }, [isPaused, visible, start, stop]);
+  useEffect(() => {
+    actionUsed.current = false;
+  }, [restartKey]);
+  if (!visible) return null;
+  const icon = variantIcons[variant];
+  const pressAction = () => {
+    if (!action || actionUsed.current) return;
+    actionUsed.current = true;
+    if (onAction) onAction();
+    else {
+      void action.onClick();
+      onDismissRef.current();
+    }
+  };
+  const card = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-toast": "",
+      "data-variant": variant,
+      role: inline ? void 0 : variant === "error" ? "alert" : "status",
+      "aria-live": inline ? void 0 : variant === "error" ? "assertive" : "polite",
+      "data-mode": inline ? mode : void 0,
+      className: cn(
+        "flex items-center gap-ds-3 px-ds-4 py-ds-3",
+        isCentered ? "min-w-[360px] max-w-[560px]" : "min-w-[280px] max-w-[420px]",
+        "border-[length:var(--ds-border-width)]",
+        GLASS_DROPDOWN,
+        "rounded-[var(--ds-radius-md)]",
+        "text-sm text-[var(--ds-text-primary)]",
+        variantStyles4[variant]
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon.name, size: 18, className: cn("shrink-0", icon.className) }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: message }),
+        action && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: pressAction,
+            className: "shrink-0 text-xs font-semibold text-[var(--ds-accent-primary)] hover:underline cursor-pointer",
+            children: action.label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            "aria-label": "Dismiss notification",
+            className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer shrink-0",
+            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
+          }
+        )
+      ]
+    }
+  );
+  if (inline) return card;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-mode": mode,
+        onMouseEnter: pauseOnHover ? () => setHovered(true) : void 0,
+        onMouseLeave: pauseOnHover ? () => setHovered(false) : void 0,
+        className: cn(
+          "fixed z-[var(--ds-z-toast)]",
+          isMobile ? "bottom-ds-4 left-ds-4 right-ds-4" : TOAST_POSITION_CLASSES[position]
+        ),
+        children: card
+      }
+    ),
+    container ?? document.body
+  );
+}
+var ToastContext = createContext(null);
+var ToastLedgerCtx = createContext(null);
+var BottomNavPresenceCtx = createContext(null);
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within <ToastProvider>: the app shell's (get_app_shell writes it around AppShell). A page outside the shell (sign-in, a public page) shows its messages inline instead: an Alert above the form, and each field's error below the field.");
+  }
+  return ctx;
+}
+function useToastOptional() {
+  return useContext(ToastContext);
+}
+var toastSeq = 0;
+var heardSeq = 0;
+var mergeable = (e) => !e.action && e.variant !== "error";
+function fill(entries, slots) {
+  let shown = entries.filter((e) => e.shown).length;
+  if (shown >= slots || shown === entries.length) return entries;
+  const next = [...entries];
+  while (shown < slots) {
+    const urgent = next.findIndex((e) => !e.shown && !mergeable(e));
+    const at = urgent !== -1 ? urgent : next.findIndex((e) => !e.shown);
+    if (at === -1) break;
+    next[at] = { ...next[at], shown: true };
+    shown++;
+  }
+  return next;
+}
+function ToastProvider({ children, maxVisible = 3, position = "bottom-right", duration = 5e3, mode, pauseOnHover = true, coalesce = true }) {
+  const slots = Math.max(1, Math.floor(Number.isFinite(maxVisible) ? maxVisible : 1));
+  const [list, setList] = useState([]);
+  const entries = useRef([]);
+  const isMobile = useBreakpoint("sm");
+  const createdIds = useRef([]);
+  const [heard, setHeard] = useState([]);
+  const [hovered, setHovered] = useState(false);
+  const [focusInside, setFocusInside] = useState(false);
+  const paused = pauseOnHover && hovered || focusInside;
+  const stackRef = useRef(null);
+  const returnTo = useRef(null);
+  const answering = useRef([]);
+  const viaKey = useRef(false);
+  const refocus = useRef(false);
+  const pendingHeard = useRef(/* @__PURE__ */ new Map());
+  const heardTimer = useRef(void 0);
+  const [bottomNavs, setBottomNavs] = useState(0);
+  const registerBottomNav = useCallback(() => {
+    setBottomNavs((n) => n + 1);
+    let gone = false;
+    return () => {
+      if (gone) return;
+      gone = true;
+      setBottomNavs((n) => n - 1);
+    };
+  }, []);
+  const commit = useCallback((next) => {
+    entries.current = fill(next, slots);
+    setList(entries.current);
+  }, [slots]);
+  const [slotsSeen, setSlotsSeen] = useState(slots);
+  if (slots !== slotsSeen) {
+    setSlotsSeen(slots);
+    let kept = 0;
+    setList(fill(list.map((e) => e.shown && ++kept > slots ? { ...e, shown: false } : e), slots));
+  }
+  useEffect(() => {
+    entries.current = list;
+  }, [list]);
+  const announce = useCallback((entry) => {
+    pendingHeard.current.set(entry.id, entry);
+    if (heardTimer.current) return;
+    heardTimer.current = setTimeout(() => {
+      heardTimer.current = void 0;
+      const batch = [...pendingHeard.current.values()];
+      pendingHeard.current.clear();
+      setHeard((list2) => [...list2, ...batch.map((e) => ({
+        id: `heard-${++heardSeq}`,
+        assertive: e.variant === "error",
+        node: /* @__PURE__ */ jsxs(Fragment, { children: [
+          e.message,
+          e.action ? ` Press F8 to reach ${e.action.label}.` : ""
+        ] })
+      }))].slice(-5));
+    }, 0);
+  }, []);
+  useEffect(() => () => {
+    if (heardTimer.current) clearTimeout(heardTimer.current);
+  }, []);
+  const leaving = useCallback(() => {
+    if (!stackRef.current?.contains(document.activeElement)) return;
+    refocus.current = true;
+    setFocusInside(false);
+  }, []);
+  const remove = useCallback((id) => {
+    leaving();
+    commit(entries.current.filter((t) => t.id !== id));
+  }, [commit, leaving]);
+  const dismissAll = useCallback(() => {
+    leaving();
+    commit([]);
+  }, [commit, leaving]);
+  const update = useCallback((id, message, options = {}) => {
+    const list2 = entries.current;
+    const at = list2.findIndex((t2) => t2.id === id);
+    if (at === -1) return;
+    const t = list2[at];
+    const next = [...list2];
+    next[at] = { ...t, message, variant: options.variant ?? t.variant, duration: options.duration ?? t.duration, action: options.action ?? t.action, actionWindow: options.actionWindow ?? t.actionWindow, key: options.key ?? t.key, version: t.version + 1 };
+    commit(next);
+    announce(next[at]);
+  }, [commit, announce]);
+  const toast = useCallback((message, options = {}) => {
+    const list2 = entries.current;
+    const base = { message, variant: options.variant ?? "default", duration: options.duration ?? duration, action: options.action, actionWindow: options.actionWindow, key: options.key };
+    if (options.id) {
+      const at = list2.findIndex((t) => t.id === options.id);
+      if (at !== -1) {
+        const next = [...list2];
+        next[at] = { ...list2[at], ...base, version: list2[at].version + 1 };
+        createdIds.current.push(options.id);
+        commit(next);
+        announce(next[at]);
+        return options.id;
+      }
+    }
+    while (answering.current.length) {
+      const answered = answering.current.shift();
+      const at = list2.findIndex((t) => t.id === answered);
+      if (at === -1) continue;
+      const next = [...list2];
+      next[at] = { ...list2[at], ...base, version: list2[at].version + 1 };
+      createdIds.current.push(answered);
+      commit(next);
+      announce(next[at]);
+      return answered;
+    }
+    if (coalesce && base.key && mergeable(base)) {
+      const at = list2.findIndex((t) => t.key === base.key && mergeable(t));
+      if (at !== -1) {
+        const next = [...list2];
+        next[at] = { ...list2[at], ...base, version: list2[at].version + 1 };
+        createdIds.current.push(list2[at].id);
+        commit(next);
+        announce(next[at]);
+        return list2[at].id;
+      }
+    }
+    const id = options.id ?? `toast-${++toastSeq}`;
+    const entry = { id, ...base, shown: false, version: 0 };
+    createdIds.current.push(id);
+    commit([...list2, entry]);
+    announce(entry);
+    return id;
+  }, [duration, coalesce, commit, announce]);
+  const api = useMemo(() => ({
+    toast,
+    success: (m, o) => toast(m, { ...o, variant: "success" }),
+    warning: (m, o) => toast(m, { ...o, variant: "warning" }),
+    error: (m, o) => toast(m, { ...o, variant: "error" }),
+    update,
+    dismiss: remove,
+    dismissAll,
+    promise: async (promise, messages, options = {}) => {
+      const id = toast(messages.loading, { ...options, variant: "default", duration: Infinity });
+      try {
+        const value = await promise;
+        update(id, typeof messages.success === "function" ? messages.success(value) : messages.success, { variant: "success", duration });
+        return value;
+      } catch (err) {
+        update(id, typeof messages.error === "function" ? messages.error(err) : messages.error, { variant: "error", duration });
+        throw err;
+      }
+    }
+  }), [toast, update, remove, dismissAll, duration]);
+  const ledger = useMemo(() => ({
+    created: () => createdIds.current.length,
+    latestSince: (count) => {
+      if (createdIds.current.length <= count) return void 0;
+      const id = createdIds.current[createdIds.current.length - 1];
+      const entry = entries.current.find((t) => t.id === id);
+      return entry ? { id, message: entry.message } : void 0;
+    }
+  }), []);
+  const pressAction = useCallback((id) => {
+    const entry = entries.current.find((t) => t.id === id);
+    if (!entry?.action) return;
+    const run = entry.action.onClick;
+    leaving();
+    commit(entries.current.map((t) => t.id === id ? { ...t, action: void 0, actionWindow: void 0, version: t.version + 1 } : t));
+    answering.current.push(id);
+    const done = () => {
+      const waiting2 = answering.current.indexOf(id);
+      if (waiting2 === -1) return;
+      answering.current.splice(waiting2, 1);
+      remove(id);
+    };
+    let result;
+    try {
+      result = run();
+    } catch {
+      result = void 0;
+    }
+    if (result && typeof result.then === "function") result.then(done, done);
+    else done();
+  }, [commit, leaving, remove]);
+  const lapse = useCallback((id) => {
+    const list2 = entries.current;
+    const at = list2.findIndex((t) => t.id === id);
+    if (at === -1) return;
+    const next = [...list2];
+    next[at] = { ...list2[at], action: void 0, actionWindow: void 0, version: list2[at].version + 1 };
+    commit(next);
+  }, [commit]);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key !== "F8" || e.defaultPrevented) return;
+      const stack = stackRef.current;
+      if (!stack) return;
+      e.preventDefault();
+      const active = document.activeElement;
+      if (!stack.contains(active)) {
+        returnTo.current = active instanceof HTMLElement && active !== document.body ? active : null;
+        viaKey.current = true;
+      }
+      (stack.querySelector("button") ?? stack).focus();
+      viaKey.current = false;
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+  useEffect(() => {
+    if (!refocus.current) return;
+    refocus.current = false;
+    const back = returnTo.current;
+    const next = stackRef.current?.querySelector("button");
+    const main = document.querySelector("main");
+    if (back?.isConnected) back.focus();
+    else if (next) next.focus();
+    else if (main) {
+      if (!main.hasAttribute("tabindex")) {
+        main.setAttribute("tabindex", "-1");
+        main.addEventListener("blur", () => main.removeAttribute("tabindex"), { once: true });
+      }
+      main.focus();
+    }
+  }, [list]);
+  const shown = list.filter((t) => t.shown);
+  const waiting = list.length - shown.length;
+  const isTop = position.startsWith("top");
+  const hasBottomNav = isMobile && bottomNavs > 0;
+  return /* @__PURE__ */ jsx(ToastContext.Provider, { value: api, children: /* @__PURE__ */ jsxs(ToastLedgerCtx.Provider, { value: ledger, children: [
+    /* @__PURE__ */ jsx(BottomNavPresenceCtx.Provider, { value: registerBottomNav, children }),
+    /* @__PURE__ */ jsx("div", { className: "sr-only", role: "status", "aria-live": "polite", "data-toast-announcer": "polite", children: heard.filter((h) => !h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.node }, h.id)) }),
+    /* @__PURE__ */ jsx("div", { className: "sr-only", role: "alert", "aria-live": "assertive", "data-toast-announcer": "assertive", children: heard.filter((h) => h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.node }, h.id)) }),
+    shown.length > 0 && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: stackRef,
+          role: "region",
+          "aria-label": "Notifications",
+          tabIndex: -1,
+          "data-mode": mode,
+          "data-toast-stack": "",
+          onMouseEnter: () => setHovered(true),
+          onMouseLeave: () => setHovered(false),
+          onFocusCapture: (e) => {
+            setFocusInside(true);
+            const from = e.relatedTarget;
+            if (viaKey.current || from instanceof Node && e.currentTarget.contains(from)) return;
+            returnTo.current = from instanceof HTMLElement ? from : null;
+          },
+          onBlurCapture: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) setFocusInside(false);
+          },
+          className: cn(
+            "fixed z-[var(--ds-z-toast)] flex gap-ds-2 pointer-events-none outline-none",
+            isTop ? "flex-col" : "flex-col-reverse",
+            isMobile ? cn("left-ds-4 right-ds-4", !hasBottomNav && "bottom-ds-4") : TOAST_POSITION_CLASSES[position]
+          ),
+          style: hasBottomNav ? { bottom: "calc(var(--ds-space-12) + var(--ds-space-2) + var(--ds-space-4) + env(safe-area-inset-bottom))" } : void 0,
+          children: [
+            shown.map((t) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
+              Toast,
+              {
+                inline: true,
+                visible: true,
+                variant: t.variant,
+                message: t.message,
+                duration: t.duration,
+                action: t.action,
+                actionWindow: t.actionWindow,
+                mode,
+                paused,
+                restartKey: t.version,
+                onAction: () => pressAction(t.id),
+                onActionLapse: () => lapse(t.id),
+                onDismiss: () => remove(t.id)
+              }
+            ) }, t.id)),
+            (waiting > 0 || shown.length >= 2) && /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto flex items-center justify-end gap-ds-2 text-xs", "data-toast-overflow": "", children: [
+              waiting > 0 && /* @__PURE__ */ jsxs("span", { className: "rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-muted)] px-ds-2 py-ds-0.5 font-medium text-[var(--ds-text-secondary)]", children: [
+                "+",
+                waiting,
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: " more waiting" })
+              ] }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: dismissAll, className: "font-medium text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:underline cursor-pointer", children: "Clear all" })
+            ] })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] }) });
+}
+function BottomNav({ items, onItemClick, maxVisible = 5, className, ref }) {
+  const registerWithToasts = useContext(BottomNavPresenceCtx);
+  useEffect(() => registerWithToasts?.(), [registerWithToasts]);
+  const needsOverflow = items.length > maxVisible;
+  const visibleItems = needsOverflow ? items.slice(0, maxVisible - 1) : items;
+  const overflowItems = needsOverflow ? items.slice(maxVisible - 1) : [];
+  const overflowHasActive = overflowItems.some((it) => it.active);
+  const [overflowOpen, setOverflowOpen] = useState(false);
+  const menuRef = useRef(null);
+  const closeOverflow = useCallback(() => setOverflowOpen(false), []);
+  useEffect(() => {
+    if (!overflowOpen) return;
+    function handleClick(e) {
+      if (menuRef.current && !menuRef.current.contains(e.target)) closeOverflow();
+    }
+    document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [overflowOpen, closeOverflow]);
   return /* @__PURE__ */ jsxs(
@@ -13533,6 +14236,7 @@ function BottomNav({ items, onItemClick, maxVisible = 5, className, ref }) {
           /* @__PURE__ */ jsxs(
             "button",
             {
+              type: "button",
               onClick: () => setOverflowOpen(!overflowOpen),
               "aria-expanded": overflowOpen,
               "aria-haspopup": "true",
@@ -13560,6 +14264,7 @@ function BottomNav({ items, onItemClick, maxVisible = 5, className, ref }) {
               children: overflowItems.map((item, i) => /* @__PURE__ */ jsxs(
                 "button",
                 {
+                  type: "button",
                   role: "menuitem",
                   onClick: () => {
                     onItemClick?.(item, maxVisible - 1 + i);
@@ -13589,6 +14294,7 @@ function NavButton({ item, onClick }) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
+      type: "button",
       onClick,
       className: cn(
         "flex flex-col items-center justify-center gap-ds-0.5 flex-1 h-full",
@@ -14991,6 +15697,7 @@ function NavMenu({
     /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         ref: triggerRef,
         onClick: () => setOpen(!open),
         "aria-expanded": open,
@@ -15187,7 +15894,8 @@ var sizeClasses = {
   full: "max-w-[calc(100vw-2rem)]"
 };
 function Dialog({ open, onClose: onCloseProp, title, description, children, footer, variant = "default", size = "md", alert = false, container, onSubmit, dirty, onDiscard }) {
-  const guard = useDirtyGuard(dirty, onCloseProp, onDiscard);
+  const { marked, mark } = useOverlayMark(open);
+  const guard = useDirtyGuard(dirty ?? marked, onCloseProp, onDiscard);
   const onClose = guard.requestClose;
   const titleId = useId();
   const descriptionId = useId();
@@ -15324,7 +16032,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                             }
                           ),
                           description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description }),
-                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) })
+                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayMarkCtx, { value: mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) }) })
                         ] })
                       ] }) }),
                       /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
@@ -15350,6 +16058,7 @@ function HamburgerButton({ onClick, open, className: cls }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
+      type: "button",
       onClick,
       "aria-label": open ? "Close navigation menu" : "Open navigation menu",
       "aria-expanded": open ?? void 0,
@@ -15652,6 +16361,7 @@ function MobileMenuItem({
     return /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         onClick,
         className: cn(
           "flex items-center gap-ds-3 px-ds-3 py-ds-3 text-sm relative cursor-pointer w-full text-left",
@@ -15676,6 +16386,7 @@ function MobileMenuItem({
     return /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         onClick,
         className: cn(
           "flex items-center gap-ds-3 px-ds-3 py-ds-2.5 text-sm cursor-pointer w-full text-left",
@@ -15693,6 +16404,7 @@ function MobileMenuItem({
     return /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         onClick,
         className: cn(
           "flex items-center gap-ds-3 px-ds-3 py-ds-2.5 text-sm rounded-[var(--ds-radius-md)] cursor-pointer w-full text-left",
@@ -15709,6 +16421,7 @@ function MobileMenuItem({
   return /* @__PURE__ */ jsxs(
     "button",
     {
+      type: "button",
       onClick,
       className: cn(
         "flex items-center gap-ds-3 px-ds-3 py-ds-2.5 text-sm rounded-[var(--ds-radius-md)] cursor-pointer w-full text-left",
@@ -15870,6 +16583,7 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
                     return /* @__PURE__ */ jsxs(
                       "button",
                       {
+                        type: "button",
                         id: `${listboxId}-opt-${myIdx}`,
                         role: "option",
                         tabIndex: -1,
@@ -16058,6 +16772,7 @@ function ContextMenu({ items, children, className, ref, container }) {
                 return /* @__PURE__ */ jsxs(
                   "button",
                   {
+                    type: "button",
                     role: "menuitem",
                     disabled: item.disabled,
                     onClick: () => {
@@ -16168,6 +16883,7 @@ function NotificationCenter({
         /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-3", children: unreadCount > 0 && /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: onMarkAllRead,
             className: "text-sm text-[var(--ds-accent-primary)] hover:underline cursor-pointer",
             children: "Mark all read"
@@ -16178,6 +16894,7 @@ function NotificationCenter({
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: () => setFilter("all"),
             className: cn(
               "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)] transition-colors cursor-pointer",
@@ -16189,6 +16906,7 @@ function NotificationCenter({
         /* @__PURE__ */ jsxs(
           "button",
           {
+            type: "button",
             onClick: () => setFilter("unread"),
             className: cn(
               "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)] transition-colors cursor-pointer",
@@ -16238,6 +16956,7 @@ function NotificationCenter({
                 !n.read && onMarkRead && /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
                     onClick: () => onMarkRead(n.id),
                     "aria-label": "Mark as read",
                     className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5",
@@ -16247,6 +16966,7 @@ function NotificationCenter({
                 onDismiss && /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
                     onClick: () => onDismiss(n.id),
                     "aria-label": "Dismiss",
                     className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5",
@@ -16265,6 +16985,7 @@ function NotificationCenter({
     /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         ref: triggerRef,
         onClick: () => setOpen(!open),
         "aria-label": `Notifications${unreadCount ? ` (${unreadCount} unread)` : ""}`,
@@ -16304,6 +17025,7 @@ function NotificationCenter({
               unreadCount > 0 && /* @__PURE__ */ jsx(
                 "button",
                 {
+                  type: "button",
                   onClick: onMarkAllRead,
                   className: "text-xs text-[var(--ds-accent-primary)] hover:underline cursor-pointer",
                   children: "Mark all read"
@@ -16348,6 +17070,7 @@ function NotificationCenter({
                         !n.read && onMarkRead && /* @__PURE__ */ jsx(
                           "button",
                           {
+                            type: "button",
                             onClick: () => onMarkRead(n.id),
                             "aria-label": "Mark as read",
                             className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5",
@@ -16357,6 +17080,7 @@ function NotificationCenter({
                         onDismiss && /* @__PURE__ */ jsx(
                           "button",
                           {
+                            type: "button",
                             onClick: () => onDismiss(n.id),
                             "aria-label": "Dismiss",
                             className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5",
@@ -16520,6 +17244,7 @@ function Tour({ steps, open, onClose, onComplete, container }) {
                 /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
                     onClick: onClose,
                     className: "shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer -mt-ds-0.5",
                     "aria-label": "Close tour",
@@ -16539,6 +17264,7 @@ function Tour({ steps, open, onClose, onComplete, container }) {
                 current > 0 && /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
                     onClick: handlePrev,
                     className: cn(
                       "px-ds-3 py-ds-1.5 text-xs font-medium rounded-[var(--ds-radius-sm)]",
@@ -16552,6 +17278,7 @@ function Tour({ steps, open, onClose, onComplete, container }) {
                 /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
                     ref: nextRef,
                     onClick: handleNext,
                     className: cn(
@@ -16600,223 +17327,6 @@ function getPopoverPosition(rect, placement, padding) {
   top = Math.max(8, Math.min(top, window.innerHeight - popH - 8));
   return { top, left };
 }
-var variantStyles4 = {
-  default: "border-[var(--ds-border-default)] bg-[var(--ds-bg-surface)]",
-  success: "border-[var(--ds-status-success)] bg-[var(--ds-status-success-bg)]",
-  warning: "border-[var(--ds-status-warning)] bg-[var(--ds-status-warning-bg)]",
-  error: "border-[var(--ds-status-error)] bg-[var(--ds-status-error-bg)]"
-};
-var variantIcons = {
-  default: { name: "info", className: "text-[var(--ds-text-muted)]" },
-  success: { name: "check", className: "text-[var(--ds-status-success)]" },
-  warning: { name: "warning", className: "text-[var(--ds-status-warning)]" },
-  error: { name: "error", className: "text-[var(--ds-status-error)]" }
-};
-var TOAST_POSITION_CLASSES = {
-  "top-right": "top-[var(--ds-toast-inset-top)] right-[var(--ds-toast-inset-right)]",
-  "top-left": "top-[var(--ds-toast-inset-top)] left-[var(--ds-toast-inset-left)]",
-  "bottom-right": "bottom-[var(--ds-toast-inset-bottom-right)] right-[var(--ds-toast-inset-right)]",
-  "bottom-left": "bottom-[var(--ds-toast-inset-bottom-left)] left-[var(--ds-toast-inset-left)]",
-  "top-center": "top-[var(--ds-toast-inset-top)] left-1/2 -translate-x-1/2",
-  "bottom-center": "bottom-ds-4 left-1/2 -translate-x-1/2"
-};
-function Toast({ variant = "default", message, visible, onDismiss, duration = 5e3, pauseOnHover = false, action, position = "bottom-right", mode, container, inline = false }) {
-  const isMobile = useBreakpoint("sm");
-  const isCentered = position === "top-center" || position === "bottom-center";
-  const timerRef = useRef(void 0);
-  const startedAtRef = useRef(0);
-  const remainingRef = useRef(duration);
-  const onDismissRef = useLatest(onDismiss);
-  const startTimer = useCallback((ms) => {
-    const delay = ms ?? remainingRef.current;
-    remainingRef.current = delay;
-    startedAtRef.current = Date.now();
-    if (!Number.isFinite(delay) || delay <= 0) return;
-    timerRef.current = setTimeout(() => onDismissRef.current(), delay);
-  }, [onDismissRef]);
-  const clearTimer = useCallback(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      remainingRef.current -= Date.now() - startedAtRef.current;
-    }
-  }, []);
-  useEffect(() => {
-    if (!visible) return;
-    remainingRef.current = duration;
-    startTimer(duration);
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, [visible, duration, startTimer]);
-  const handleMouseEnter = pauseOnHover ? () => {
-    clearTimer();
-  } : void 0;
-  const handleMouseLeave = pauseOnHover ? () => {
-    startTimer();
-  } : void 0;
-  if (!visible) return null;
-  const icon = variantIcons[variant];
-  const card = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: variant === "error" ? "alert" : "status",
-      "aria-live": variant === "error" ? "assertive" : "polite",
-      "data-mode": inline ? mode : void 0,
-      onMouseEnter: inline ? handleMouseEnter : void 0,
-      onMouseLeave: inline ? handleMouseLeave : void 0,
-      className: cn(
-        "flex items-center gap-ds-3 px-ds-4 py-ds-3",
-        isCentered ? "min-w-[360px] max-w-[560px]" : "min-w-[280px] max-w-[420px]",
-        "border-[length:var(--ds-border-width)]",
-        GLASS_DROPDOWN,
-        "rounded-[var(--ds-radius-md)]",
-        "text-sm text-[var(--ds-text-primary)]",
-        variantStyles4[variant]
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: icon.name, size: 18, className: cn("shrink-0", icon.className) }),
-        /* @__PURE__ */ jsx("span", { className: "flex-1", children: message }),
-        action && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: action.onClick,
-            className: "shrink-0 text-xs font-semibold text-[var(--ds-accent-primary)] hover:underline cursor-pointer",
-            children: action.label
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onDismiss,
-            "aria-label": "Dismiss notification",
-            className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer shrink-0",
-            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
-          }
-        )
-      ]
-    }
-  );
-  if (inline) return card;
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-mode": mode,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        className: cn(
-          "fixed z-[var(--ds-z-toast)]",
-          isMobile ? "bottom-ds-4 left-ds-4 right-ds-4" : TOAST_POSITION_CLASSES[position]
-        ),
-        children: card
-      }
-    ),
-    container ?? document.body
-  );
-}
-var ToastContext = createContext(null);
-function useToast() {
-  const ctx = useContext(ToastContext);
-  if (!ctx) {
-    throw new Error("useToast must be used within <ToastProvider>: the app shell's (get_app_shell writes it around AppShell). A page outside the shell (sign-in, a public page) shows its messages inline instead: an Alert above the form, and each field's error below the field.");
-  }
-  return ctx;
-}
-function useToastOptional() {
-  return useContext(ToastContext);
-}
-var toastSeq = 0;
-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) => {
-    setQueue((q) => q.filter((t) => t.id !== id));
-  }, []);
-  const dismissAll = useCallback(() => setQueue([]), []);
-  const update = useCallback((id, message, options = {}) => {
-    setQueue((q) => q.map((t) => t.id === id ? { ...t, message, variant: options.variant ?? t.variant, duration: options.duration ?? t.duration, action: options.action ?? t.action } : t));
-  }, []);
-  const toast = useCallback((message, options = {}) => {
-    const id = options.id ?? `toast-${++toastSeq}`;
-    const entry = {
-      id,
-      message,
-      variant: options.variant ?? "default",
-      duration: options.duration ?? duration,
-      action: options.action,
-      key: options.key ?? options.variant ?? "default"
-    };
-    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, maxVisible, coalesce]);
-  const api = useMemo(() => ({
-    toast,
-    success: (m, o) => toast(m, { ...o, variant: "success" }),
-    warning: (m, o) => toast(m, { ...o, variant: "warning" }),
-    error: (m, o) => toast(m, { ...o, variant: "error" }),
-    update,
-    dismiss,
-    dismissAll,
-    promise: async (promise, messages, options = {}) => {
-      const id = toast(messages.loading, { ...options, variant: "default", duration: Infinity });
-      try {
-        const value = await promise;
-        update(id, typeof messages.success === "function" ? messages.success(value) : messages.success, { variant: "success", duration });
-        return value;
-      } catch (err) {
-        update(id, typeof messages.error === "function" ? messages.error(err) : messages.error, { variant: "error", duration });
-        throw err;
-      }
-    }
-  }), [toast, update, dismiss, dismissAll, duration]);
-  const visible = queue.slice(0, Math.max(1, maxVisible));
-  const isTop = position.startsWith("top");
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: api, children: [
-    children,
-    visible.length > 0 && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-mode": mode,
-          className: cn(
-            "fixed z-[var(--ds-z-toast)] flex gap-ds-2 pointer-events-none",
-            isTop ? "flex-col" : "flex-col-reverse",
-            isMobile ? "bottom-ds-4 left-ds-4 right-ds-4" : TOAST_POSITION_CLASSES[position]
-          ),
-          children: visible.map((t) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
-            Toast,
-            {
-              inline: true,
-              visible: true,
-              variant: t.variant,
-              message: t.message,
-              duration: t.duration,
-              pauseOnHover,
-              action: t.action,
-              mode,
-              onDismiss: () => dismiss(t.id)
-            }
-          ) }, t.id))
-        }
-      ),
-      document.body
-    )
-  ] });
-}
 function firstKey(item) {
   if (item !== null && typeof item === "object") return "id" in item ? item.id : void 0;
   return item;
@@ -16879,9 +17389,10 @@ function usePagination(list, options = {}) {
   };
 }
 function useDestructiveAction(options) {
-  const { action, title, description, confirmLabel, typeToConfirm, onConfirm, onUndo, undoMessage, severity } = options;
+  const { action, title, description, confirmLabel, typeToConfirm, onConfirm, onUndo, doneMessage, undoMessage, restoredMessage, severity } = options;
   const preferences = useShellPreferences();
   const toast = useToastOptional();
+  const ledger = useContext(ToastLedgerCtx);
   const [open, setOpen] = useState(false);
   const [typed, setTyped] = useState("");
   const [busy, setBusy] = useState(false);
@@ -16898,20 +17409,32 @@ function useDestructiveAction(options) {
     setTyped("");
   };
   const failureMessage = (err) => err instanceof Error && err.message ? err.message : `${title.replace(/\?$/, "")} failed. Try again.`;
+  const done = doneMessage ?? undoMessage ?? pastTenseOf(label);
   const confirm = async () => {
     setBusy(true);
+    const before = ledger?.created() ?? 0;
     try {
       await onConfirm();
       close();
+      if (toast && (ledger?.created() ?? 0) === before) toast.success(done);
     } catch (err) {
       toast?.error(failureMessage(err));
     } finally {
       setBusy(false);
     }
   };
+  const undo = async () => {
+    try {
+      await onUndo();
+      toast?.success(restoredMessage ?? "Restored");
+    } catch (err) {
+      toast?.error(err instanceof Error && err.message ? err.message : "Undo didn't work. Try again.");
+    }
+  };
   const run = () => {
     if (undoable) {
       void (async () => {
+        const before = ledger?.created() ?? 0;
         try {
           await onConfirm();
         } catch (err) {
@@ -16919,7 +17442,10 @@ function useDestructiveAction(options) {
           return;
         }
         const seconds = preferences.undoWindowSeconds ?? 5;
-        toast.success(undoMessage ?? `${title.replace(/\?$/, "")} done`, { duration: seconds * 1e3, action: { label: "Undo", onClick: onUndo } });
+        const undoAction = { label: "Undo", onClick: () => undo() };
+        const pages = (ledger?.created() ?? 0) > before ? ledger?.latestSince(before) : void 0;
+        if (pages) toast.update(pages.id, pages.message, { variant: "success", action: undoAction, actionWindow: seconds * 1e3 });
+        else toast.success(done, { action: undoAction, actionWindow: seconds * 1e3 });
       })();
       return;
     }
@@ -16947,6 +17473,61 @@ function useDestructiveAction(options) {
   ) : null;
   return { run, element, open };
 }
+var PAST_TENSE = {
+  delete: "Deleted",
+  remove: "Removed",
+  archive: "Archived",
+  leave: "Left",
+  revoke: "Revoked",
+  disconnect: "Disconnected",
+  cancel: "Cancelled",
+  reset: "Reset",
+  clear: "Cleared",
+  discard: "Discarded",
+  unpublish: "Unpublished",
+  deactivate: "Deactivated",
+  disable: "Disabled",
+  uninstall: "Uninstalled",
+  unsubscribe: "Unsubscribed",
+  block: "Blocked",
+  ban: "Banned",
+  suspend: "Suspended",
+  close: "Closed",
+  end: "Ended",
+  stop: "Stopped",
+  "sign out": "Signed out",
+  "log out": "Logged out",
+  transfer: "Transferred",
+  merge: "Merged",
+  overwrite: "Overwritten",
+  replace: "Replaced",
+  erase: "Erased",
+  purge: "Purged",
+  wipe: "Wiped",
+  drop: "Dropped",
+  detach: "Detached",
+  unlink: "Unlinked",
+  expire: "Expired",
+  reject: "Rejected",
+  decline: "Declined"
+};
+var warned2 = /* @__PURE__ */ new Set();
+function pastTenseOf(label) {
+  const words = label.trim().toLowerCase().split(/\s+/);
+  const found = PAST_TENSE[words.slice(0, 2).join(" ")] ?? PAST_TENSE[words[0] ?? ""];
+  if (found) return found;
+  let dev = false;
+  try {
+    dev = process.env.NODE_ENV !== "production";
+  } catch {
+    dev = false;
+  }
+  if (dev && !warned2.has(label)) {
+    warned2.add(label);
+    console.warn(`useDestructiveAction: "${label}" isn't a verb the hook knows; pass doneMessage so the confirmation says what happened.`);
+  }
+  return "Done";
+}
 var SectionHeading = forwardRef(function SectionHeading2({
   title,
   description,
@@ -17087,6 +17668,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, CardGrid, 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, Gantt, 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, TIME_ZOOMS, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, timeExtent, useContentWidth, useDestructiveAction, useFittedLabels, useFormContext, usePagination, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
+export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, 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, Gantt, 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, TIME_ZOOMS, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, timeExtent, useContentWidth, useDestructiveAction, useFittedLabels, usePagination, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map