gridsmith-ui 0.31.1 → 0.33.0

package/dist/chunk-ZQV26NND.js

@@ -0,0 +1,213 @@
+"use client";
+import { FormChangeCtx } from './chunk-72SDAX54.js';
+import { Button } from './chunk-FF57N3P7.js';
+import { readBreakpointPx } from './chunk-ZHUVLBCC.js';
+import { createContext, useRef, useState, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var OVERLAY_ROOT_ATTR = "data-overlay-root";
+function controlsOf(root) {
+  if (!root) return "";
+  const controls = root.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 OverlayMarkCtx = createContext(null);
+function OverlayMarkScope({ mark, children }) {
+  return /* @__PURE__ */ jsx(OverlayMarkCtx, { value: mark, children: /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children }) });
+}
+function useOverlayMark(open) {
+  const forms = useRef(/* @__PURE__ */ new Map());
+  const count = useRef(0);
+  const round = useRef(0);
+  const [changed, setChanged] = useState(false);
+  const [holds, setHolds] = useState(0);
+  const [pends, setPends] = useState(0);
+  const [answers, setAnswers] = useState([]);
+  const [wasOpen, setWasOpen] = useState(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (!open) {
+      setChanged(false);
+      setAnswers([]);
+    }
+  }
+  useEffect(() => {
+    if (open) return;
+    round.current++;
+    for (const [id, f] of forms.current) {
+      if (f.mounted) f.stamp = 0;
+      else forms.current.delete(id);
+    }
+  }, [open]);
+  const mark = useMemo(() => ({
+    report: (form) => {
+      const f = forms.current.get(form) ?? { stamp: 0, mounted: true };
+      f.stamp = ++count.current;
+      forms.current.set(form, f);
+      setChanged(true);
+    },
+    attach: (form) => {
+      const f = forms.current.get(form) ?? { stamp: 0, mounted: true };
+      f.mounted = true;
+      forms.current.set(form, f);
+      return () => {
+        const gone = forms.current.get(form);
+        if (!gone) return;
+        if (gone.stamp > 0) gone.mounted = false;
+        else forms.current.delete(form);
+      };
+    },
+    submit: (form, from) => {
+      const root = from.element()?.closest(`[${OVERLAY_ROOT_ATTR}]`) ?? null;
+      const answer = { form, since: count.current, root, controls: controlsOf(root), ...from };
+      const at = round.current;
+      let settled = false;
+      return {
+        settle: (how) => {
+          if (settled || at !== round.current) return;
+          settled = true;
+          setAnswers((list) => [...list, { ...answer, how }]);
+        }
+      };
+    },
+    hold: () => {
+      setHolds((n) => n + 1);
+      let released = false;
+      return () => {
+        if (released) return;
+        released = true;
+        setHolds((n) => n - 1);
+      };
+    },
+    pend: () => {
+      setPends((n) => n + 1);
+      let released = false;
+      return () => {
+        if (released) return;
+        released = true;
+        setPends((n) => n - 1);
+      };
+    },
+    open
+  }), [open]);
+  useEffect(() => {
+    if (!answers.length) return;
+    for (const a of answers) {
+      const form = a.element();
+      if (form?.isConnected && (form.querySelector("[aria-invalid='true']") || a.failing())) continue;
+      if (a.how === "returned") {
+        const now = a.root?.isConnected ? controlsOf(a.root) : "";
+        if (now !== "" && now !== a.controls) continue;
+      }
+      for (const [id, f] of forms.current) {
+        if (f.stamp === 0 || f.stamp > a.since || id !== a.form && f.mounted) continue;
+        if (f.mounted) forms.current.set(id, { ...f, stamp: 0 });
+        else forms.current.delete(id);
+      }
+    }
+    setAnswers([]);
+    setChanged([...forms.current.values()].some((f) => f.stamp > 0));
+  }, [answers]);
+  return { marked: changed || holds > 0, pending: pends > 0, mark };
+}
+var OverlayCloseCtx = createContext(null);
+function useDirtyGuard(dirty, onClose, onDiscard) {
+  const [wantsConfirm, setWantsConfirm] = useState(false);
+  const confirming = wantsConfirm && !!dirty;
+  const pending = useRef(void 0);
+  const runAfter = useCallback((then) => {
+    if (typeof then === "function" && then !== onClose) then();
+  }, [onClose]);
+  const requestClose = useCallback((then) => {
+    if (!dirty) {
+      onClose();
+      runAfter(then);
+      return;
+    }
+    pending.current = then;
+    setWantsConfirm((c) => !c);
+  }, [dirty, onClose, runAfter]);
+  const keep = useCallback(() => {
+    pending.current = void 0;
+    setWantsConfirm(false);
+  }, []);
+  const discard = useCallback(() => {
+    setWantsConfirm(false);
+    onDiscard?.();
+    onClose();
+    const then = pending.current;
+    pending.current = void 0;
+    runAfter(then);
+  }, [onClose, onDiscard, runAfter]);
+  return { confirming, requestClose, keep, discard };
+}
+function DiscardConfirm({ open, onKeep, onDiscard }) {
+  const keepRef = useRef(null);
+  const returnTo = useRef(null);
+  const overlay = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    overlay.current = keepRef.current?.closest("[role='dialog'], [role='alertdialog']") ?? null;
+    returnTo.current = active && active !== document.body && overlay.current?.contains(active) ? active : null;
+    keepRef.current?.focus();
+    return () => {
+      if (document.activeElement !== document.body) return;
+      const back = returnTo.current;
+      if (back && back.isConnected) {
+        back.focus();
+        return;
+      }
+      const first = overlay.current?.querySelector("button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])");
+      (first ?? overlay.current)?.focus();
+    };
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Unsaved changes",
+      "data-discard-confirm": "",
+      className: "shrink-0 flex flex-wrap items-center justify-between gap-ds-3 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-status-warning-bg)]",
+      style: { padding: "var(--ds-space-3) var(--ds-page-gutter)" },
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--ds-text-primary)]", children: "You have unsaved changes." }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", ref: keepRef, variant: "secondary", size: "sm", onClick: onKeep, children: "Keep editing" }),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "destructive", size: "sm", onClick: onDiscard, children: "Discard changes" })
+        ] })
+      ]
+    }
+  );
+}
+function useCompact(ref, breakpoint, band = 0) {
+  const px = typeof breakpoint === "number" ? breakpoint : readBreakpointPx(breakpoint);
+  const width = useElementWidth(ref);
+  return useBelow(width, px, band);
+}
+function useBelow(width, threshold, band = 0) {
+  const [below, setBelow] = useState(false);
+  const next = width > 0 && width < (below ? threshold + band : threshold);
+  if (next !== below) setBelow(next);
+  return next;
+}
+function useElementWidth(ref) {
+  const [width, setWidth] = useState(0);
+  const check = useCallback(() => {
+    const next = ref.current?.offsetWidth ?? 0;
+    if (next > 0) setWidth(next);
+  }, [ref]);
+  useLayoutEffect(() => {
+    check();
+    if (!ref.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(check);
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [check, ref]);
+  return width;
+}
+
+export { DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayCloseCtx, OverlayMarkCtx, OverlayMarkScope, useBelow, useCompact, useDirtyGuard, useElementWidth, useOverlayMark };
+//# sourceMappingURL=chunk-ZQV26NND.js.map
+//# sourceMappingURL=chunk-ZQV26NND.js.map

package/dist/chunk-ZQV26NND.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/components/DiscardConfirm.tsx","../../../showcase/src/lib/use-compact.ts"],"names":["useState","useCallback"],"mappings":"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","file":"chunk-ZQV26NND.js","sourcesContent":["import { createContext, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { Button } from \"./Button\";\nimport { FormChangeCtx } from \"../lib/form-context\";\n\n/** Marks an overlay's panel: the part of the page whose controls a submit's answer is read from (0.21.0). */\nexport const OVERLAY_ROOT_ATTR = \"data-overlay-root\";\n\n/**\n * The controls a part of the page shows, by id or name: a save that keeps its form shows the same ones afterwards, a\n * step flow that moves on shows others, and a confirmation that replaces the form shows none (Sprint 25.12 A15).\n */\nfunction controlsOf(root: Element | null): string {\n  if (!root) return \"\";\n  const controls = root.querySelectorAll<HTMLElement>(\"input, select, textarea, [role='combobox'], [role='radiogroup'], [role='checkbox'], [role='switch'], [role='slider'], [role='spinbutton'], [contenteditable='true']\");\n  return Array.from(controls).map((el) => el.id || el.getAttribute(\"name\") || el.getAttribute(\"role\") || el.tagName).join(\"|\");\n}\n\n/** A submitted form's answer, which the overlay reads once the page's answer is on screen. */\nexport interface OverlaySubmit {\n  /** The page answered: its promise resolved (\"resolved\"), or its onSubmit returned no promise (\"returned\"). */\n  settle: (how: \"resolved\" | \"returned\") => void;\n}\n\n/**\n * Sprint 25.12 A15 (R28-25): what an overlay knows of the forms inside it. A FormWrapper reports each change the user\n * makes, and the overlay asks before discarding while any form holds one. The overlay owns the marks, so a step flow\n * with one form per step keeps its changes after Next. A `dirty` prop the page passes wins over them. Hand-written flags\n * failed both ways in one run: the seats drawer had none, and the event drawer's was true before anything was typed.\n *\n * 0.21.0 (the review of 29 September): one mark per form, and a save clears only its own form's changes, and only those\n * made before its submit: two forms in one drawer, or a change typed while a save was running, were lost when the other\n * save cleared the drawer's single mark. A form that's gone keeps its changes until a later save or the overlay closing.\n */\nexport interface OverlayMark {\n  /** The user gave one of this form's controls a new value. */\n  report: (form: string) => void;\n  /** This form is in the overlay until the returned function runs. */\n  attach: (form: string) => () => void;\n  /**\n   * This form was submitted. Call before the page's onSubmit runs, then settle with its answer: the overlay reads it\n   * once the answer is on screen, and clears the form's changes if it saved (FormWrapper's onSubmit says when).\n   */\n  submit: (form: string, from: { element: () => HTMLFormElement | null; failing: () => boolean }) => OverlaySubmit;\n  /**\n   * Work that closing would lose, such as a running upload (Sprint 25.12 A33): the overlay asks before closing while any\n   * is held. Returns the release.\n   */\n  hold: () => () => void;\n  /**\n   * Text a control holds but hasn't committed, such as a half-typed tag (Sprint 25.29 item 15): the overlay always asks\n   * before closing while any is held, whatever the page's `dirty` says, since a page's `dirty` counts only what's\n   * committed. Returns the release.\n   */\n  pend: () => () => void;\n  /** Whether the overlay is open: work held inside a kept-mounted overlay stops when it closes. */\n  open: boolean;\n}\n\nexport const OverlayMarkCtx = createContext<OverlayMark | null>(null);\n\n/**\n * An overlay's children, with its mark. Controls inside answer to a FormWrapper inside the overlay, never to a form\n * around it (0.21.0): a \"New label\" dialog opened from an edit drawer's form, or a delete's typed confirmation, marked the\n * drawer.\n */\nexport function OverlayMarkScope({ mark, children }: { mark: OverlayMark; children: ReactNode }) {\n  return <OverlayMarkCtx value={mark}><FormChangeCtx value={null}>{children}</FormChangeCtx></OverlayMarkCtx>;\n}\n\n/** A form's changes in its overlay: the last one's number (0: none since it saved), and whether the form is still there. */\ninterface FormMark { stamp: number; mounted: boolean }\n\ninterface Answer { form: string; since: number; root: HTMLElement | null; controls: string; how: \"resolved\" | \"returned\"; element: () => HTMLFormElement | null; failing: () => boolean }\n\n/**\n * An overlay's marks: set by a change, cleared by a save of the same form, and reset whenever the overlay closes; held\n * while work runs. `pending`: text a control holds uncommitted, which the page's `dirty` never replaces.\n */\nexport function useOverlayMark(open: boolean): { marked: boolean; pending: boolean; mark: OverlayMark } {\n  const forms = useRef(new Map<string, FormMark>());\n  const count = useRef(0);\n  // answers from before the overlay last closed are void\n  const round = useRef(0);\n  const [changed, setChanged] = useState(false);\n  const [holds, setHolds] = useState(0);\n  const [pends, setPends] = useState(0);\n  const [answers, setAnswers] = useState<Answer[]>([]);\n  const [wasOpen, setWasOpen] = useState(open);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    if (!open) {\n      setChanged(false);\n      setAnswers([]);\n    }\n  }\n  useEffect(() => {\n    if (open) return;\n    round.current++;\n    for (const [id, f] of forms.current) {\n      if (f.mounted) f.stamp = 0;\n      else forms.current.delete(id);\n    }\n  }, [open]);\n  const mark = useMemo<OverlayMark>(() => ({\n    report: (form) => {\n      const f = forms.current.get(form) ?? { stamp: 0, mounted: true };\n      f.stamp = ++count.current;\n      forms.current.set(form, f);\n      setChanged(true);\n    },\n    attach: (form) => {\n      const f = forms.current.get(form) ?? { stamp: 0, mounted: true };\n      f.mounted = true;\n      forms.current.set(form, f);\n      return () => {\n        const gone = forms.current.get(form);\n        if (!gone) return;\n        if (gone.stamp > 0) gone.mounted = false;\n        else forms.current.delete(form);\n      };\n    },\n    submit: (form, from) => {\n      // the overlay's controls before the page answers, and the last change the save can carry\n      const root = from.element()?.closest<HTMLElement>(`[${OVERLAY_ROOT_ATTR}]`) ?? null;\n      const answer = { form, since: count.current, root, controls: controlsOf(root), ...from };\n      const at = round.current;\n      let settled = false;\n      return {\n        settle: (how) => {\n          if (settled || at !== round.current) return;\n          settled = true;\n          setAnswers((list) => [...list, { ...answer, how }]);\n        },\n      };\n    },\n    hold: () => {\n      setHolds((n) => n + 1);\n      let released = false;\n      return () => {\n        if (released) return;\n        released = true;\n        setHolds((n) => n - 1);\n      };\n    },\n    pend: () => {\n      setPends((n) => n + 1);\n      let released = false;\n      return () => {\n        if (released) return;\n        released = true;\n        setPends((n) => n - 1);\n      };\n    },\n    open,\n  }), [open]);\n\n  // An answer is read once it is on screen (this runs after the commit that carries the page's answer):\n  // - a field still invalid in the form, or a check of its own failing: nothing saved;\n  // - a submit that returned no promise and now shows other controls: a step flow moved on, and saves at its end;\n  // - otherwise it saved: its form's changes up to its submit clear, with those of forms that have gone (a flow's steps).\n  /* eslint-disable react-hooks/set-state-in-effect -- the answer is a DOM read after the page's answer commits */\n  useEffect(() => {\n    if (!answers.length) return;\n    for (const a of answers) {\n      const form = a.element();\n      if (form?.isConnected && (form.querySelector(\"[aria-invalid='true']\") || a.failing())) continue;\n      if (a.how === \"returned\") {\n        const now = a.root?.isConnected ? controlsOf(a.root) : \"\";\n        if (now !== \"\" && now !== a.controls) continue;\n      }\n      for (const [id, f] of forms.current) {\n        if (f.stamp === 0 || f.stamp > a.since || (id !== a.form && f.mounted)) continue;\n        if (f.mounted) forms.current.set(id, { ...f, stamp: 0 });\n        else forms.current.delete(id);\n      }\n    }\n    setAnswers([]);\n    setChanged([...forms.current.values()].some((f) => f.stamp > 0));\n  }, [answers]);\n  /* eslint-enable react-hooks/set-state-in-effect */\n  return { marked: changed || holds > 0, pending: pends > 0, mark };\n}\n\n/**\n * The open overlay's guarded close (round 21): a Drawer, Dialog, or a Sheet given `dirty`, provides it so a form inside\n * can close the overlay through the same unsaved-changes question Escape and the close control ask. FormWrapper's\n * `onCancel` uses it; run 58's hand-wired Cancel closed a half-filled invite with no question while Escape asked.\n * `then` runs once the overlay has closed — never when the user keeps editing (the review of 23 September: the\n * form's own onCancel was dropped inside an overlay).\n */\nexport const OverlayCloseCtx = createContext<((then?: () => void) => void) | null>(null);\n\n/**\n * The dirty guard an overlay with a form shares (Sprint 25.2, C1): while the\n * content is dirty, every close path — Escape, backdrop, the close control —\n * asks first, inside the overlay rather than in a second dialog. The page\n * passes `dirty`; the overlay does the rest.\n */\nexport function useDirtyGuard(dirty: boolean | undefined, onClose: () => void, onDiscard?: () => void) {\n  const [wantsConfirm, setWantsConfirm] = useState(false);\n  const confirming = wantsConfirm && !!dirty;\n  // What runs after the close goes ahead (a form's own onCancel). A close path wired as a click handler passes its event\n  // here, so only a function counts; the overlay's own onClose is not run twice.\n  const pending = useRef<unknown>(undefined);\n  const runAfter = useCallback((then: unknown) => { if (typeof then === \"function\" && then !== onClose) (then as () => void)(); }, [onClose]);\n  const requestClose = useCallback((then?: unknown) => {\n    if (!dirty) { onClose(); runAfter(then); return; }\n    pending.current = then;\n    // A second close request while the question is showing (Escape again, another backdrop click) keeps editing.\n    setWantsConfirm((c) => !c);\n  }, [dirty, onClose, runAfter]);\n  const keep = useCallback(() => { pending.current = undefined; setWantsConfirm(false); }, []);\n  const discard = useCallback(() => {\n    setWantsConfirm(false);\n    onDiscard?.();\n    onClose();\n    const then = pending.current;\n    pending.current = undefined;\n    runAfter(then);\n  }, [onClose, onDiscard, runAfter]);\n  return { confirming, requestClose, keep, discard };\n}\n\nexport function DiscardConfirm({ open, onKeep, onDiscard }: { open: boolean; onKeep: () => void; onDiscard: () => void }) {\n  const keepRef = useRef<HTMLButtonElement>(null);\n  const returnTo = useRef<HTMLElement | null>(null);\n  const overlay = useRef<HTMLElement | null>(null);\n  // Focus moves to \"Keep editing\" while the question shows and goes back where it was when it closes — or to the\n  // overlay's first control when nothing inside it had focus — so a non-modal drawer keeps answering Escape and a\n  // screen reader keeps its place (Sprint 25.2 review).\n  useEffect(() => {\n    if (!open) return;\n    const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n    overlay.current = keepRef.current?.closest<HTMLElement>(\"[role='dialog'], [role='alertdialog']\") ?? null;\n    returnTo.current = active && active !== document.body && overlay.current?.contains(active) ? active : null;\n    keepRef.current?.focus();\n    return () => {\n      if (document.activeElement !== document.body) return;\n      const back = returnTo.current;\n      if (back && back.isConnected) { back.focus(); return; }\n      const first = overlay.current?.querySelector<HTMLElement>(\"button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])\");\n      (first ?? overlay.current)?.focus();\n    };\n  }, [open]);\n  if (!open) return null;\n  return (\n    <div\n      role=\"group\"\n      aria-label=\"Unsaved changes\"\n      data-discard-confirm=\"\"\n      className=\"shrink-0 flex flex-wrap items-center justify-between gap-ds-3 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-status-warning-bg)]\"\n      // at the overlay's inset, as its header, body and footer are (Sprint 25.14 A36)\n      style={{ padding: \"var(--ds-space-3) var(--ds-page-gutter)\" }}\n    >\n      <p className=\"text-sm text-[var(--ds-text-primary)]\">You have unsaved changes.</p>\n      <div className=\"flex items-center gap-ds-2\">\n        <Button type=\"button\" ref={keepRef} variant=\"secondary\" size=\"sm\" onClick={onKeep}>Keep editing</Button>\n        <Button type=\"button\" variant=\"destructive\" size=\"sm\" onClick={onDiscard}>Discard changes</Button>\n      </div>\n    </div>\n  );\n}\n","import { useState, useCallback, useLayoutEffect, type RefObject } from \"react\";\nimport { readBreakpointPx, type BreakpointKey } from \"./use-breakpoint\";\n\n/**\n * True when the observed element is narrower than the breakpoint — a container\n * measurement, not the viewport, so a layout inside a sidebar shell or the\n * builder's canvas answers for the width it actually has. One implementation\n * for TableToolbar, SettingsLayout and the examples (Sprint 25.2).\n *\n * An unlaid-out element (tests, SSR) reports width 0 and is treated as not\n * compact; tests inject a width by overriding `offsetWidth`.\n */\nexport function useCompact(ref: RefObject<HTMLElement | null>, breakpoint: number | BreakpointKey, band = 0): boolean {\n  const px = typeof breakpoint === \"number\" ? breakpoint : readBreakpointPx(breakpoint);\n  const width = useElementWidth(ref);\n  return useBelow(width, px, band);\n}\n\n/**\n * Whether a width is below a threshold, held across `band` px above it once it is (round 27 review): a layout whose\n * answer changes the width it measures — an aside that collapses removes a page scrollbar, which widens the layout\n * back over the threshold — otherwise flips on every frame at the edge (SplitView's aside toggled about 90 times in\n * 1.5 s with a 15 px scrollbar). The answer turns true below `threshold` and false again only at `threshold + band`.\n * A width of 0 (no layout yet) is never below.\n */\nexport function useBelow(width: number, threshold: number, band = 0): boolean {\n  const [below, setBelow] = useState(false);\n  const next = width > 0 && width < (below ? threshold + band : threshold);\n  // render-time state adjustment: the answer is known now, so no frame paints the other one\n  if (next !== below) setBelow(next);\n  return next;\n}\n\n/** The element's laid-out width in px, kept current by a ResizeObserver; 0 until it has a layout (tests, SSR). */\nexport function useElementWidth(ref: RefObject<HTMLElement | null>): number {\n  const [width, setWidth] = useState(0);\n  const check = useCallback(() => {\n    const next = ref.current?.offsetWidth ?? 0;\n    if (next > 0) setWidth(next);\n  }, [ref]);\n  useLayoutEffect(() => {\n    check();\n    if (!ref.current || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(check);\n    observer.observe(ref.current);\n    return () => observer.disconnect();\n  }, [check, ref]);\n  return width;\n}\n"]}

package/dist/dashboard.d.ts

@@ -0,0 +1,207 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { IconName } from './icons.js';
+import { a as DropdownMenuEntry } from './DropdownMenu-DqT7ZQ0D.js';
+
+/**
+ * Sprint 32 (A2) — a dashboard's layout, as plain data: its widgets in reading order, each with a width in columns of 12
+ * and a height in rows of a fixed height. The grid lays them out as text is laid out: left to right, then the next row,
+ * each taking the first space after the one before that fits it (CSS grid's sparse auto-placement, never `dense`), so
+ * what's on screen, what a screen reader reads and where Tab goes are one order by construction.
+ *
+ * Server-safe: no React and no browser, so `gridsmith-ui/utils` exports the helpers (normaliseLayout, moveItem,
+ * resizeItem, addItem, removeItem) and a page that only adds a widget, or a test that checks a layout, needs no drag
+ * code. The rest is the grid's own: where widgets land (`placeLayout`, a copy of the browser's placement rule, held equal
+ * to Chrome's by a Chrome test), where a key or a pointer would take one (`stepTarget`, `nearestIndex`) and the words a
+ * screen reader hears for a size. Where things land is worked out here, from the layout, never measured from the
+ * screen: measuring a preview feeds back into it, the flicker sortable grids are known for.
+ */
+interface DashboardLayoutItem {
+    id: string;
+    /** Its width, in columns of 12. */
+    w: number;
+    /** Its height, in rows. */
+    h: number;
+    /** The narrowest it may be made, in columns (default 3, a quarter of the width; a widget is never narrower). */
+    minW?: number;
+    /** The shortest it may be made, in rows (default 2). */
+    minH?: number;
+    /** The widest it may be made, in columns (default 12). */
+    maxW?: number;
+    /** The tallest it may be made, in rows. */
+    maxH?: number;
+}
+type DashboardLayout = DashboardLayoutItem[];
+
+/**
+ * Sprint 32 (A1–A13) — the dashboard grid: a dashboard the people using the app arrange themselves. Its widgets sit in a
+ * reading order on 12 columns (lib/dashboard-layout.ts), each one of the library's titled frames, which the grid only
+ * places: no frame of its own, so never a card in a card (A3). In the view it is an ordinary page (custom_interaction#20):
+ * nothing drags, and a widget's own links and clicks work as anywhere else. In its edit mode, entered on purpose, each
+ * widget gets three controls beside its frame, never inside it (A4): a move handle, a ⋯ menu (Set up, Move, Size and the
+ * page's own actions) and a resize grip. Every drag has a keyboard way and a plain click way (accessibility#26), and
+ * everything is said in the grid's own polite live region, with the widget's name, never its id (A7).
+ *
+ * The pointer and touch go through dnd-kit 6.3.1, the Kanban's: the mouse sensor after 5 px and the touch sensor after a
+ * hold (never the pointer sensor, which also answers touch and would start on a 5 px swipe), its auto-scroll for the page,
+ * and nothing of its own said. The keyboard's moves are the grid's own state, never dnd-kit's keyboard sensor (A5).
+ */
+/** A kind of widget the palette offers (A8): its name, an optional description and icon, and the size it starts at. */
+interface DashboardWidgetKind {
+    id: string;
+    name: string;
+    description?: string;
+    icon?: IconName;
+    /** Its starting width, in columns of 12. A chart's kind starts tall enough to hold the chart's floor (5 rows). */
+    w: number;
+    /** Its starting height, in rows. */
+    h: number;
+}
+interface DashboardItemProps {
+    /** The widget's id, as its layout entry has it. */
+    id: string;
+    /**
+     * The widget's name, its frame's title on screen ("Cash balance"): what a screen reader hears on the grid's controls
+     * ("Move Cash balance") and in what the grid says ("Cash balance, position 3 of 8"). In development a label that
+     * differs from the frame's title is warned about.
+     */
+    label: string;
+    /** The widget: one of the library's titled frames (a ChartContainer, a StatsCard, a titled Table, a Card with a CardHeader). */
+    children: ReactNode;
+}
+interface DashboardGridProps {
+    /**
+     * The widgets in reading order, each with a width in columns of 12 and a height in rows: plain data the page saves as it
+     * likes. Authoritative: the grid draws what it's given, normalised (normaliseLayout), each widget once, in this order.
+     */
+    layout: readonly DashboardLayoutItem[];
+    /** The layout after a change the person made: once per change kept (a drop, a menu choice, a keyboard drop, a resize kept). */
+    onLayoutChange?: (layout: DashboardLayout) => void;
+    /**
+     * The edit mode, entered on purpose (custom_interaction#20): handles, grips and the column guides, and each widget's
+     * content inert, so a press on a chart never opens its report mid-edit. Off, the dashboard is an ordinary page.
+     */
+    editing?: boolean;
+    /**
+     * Edit mode only: the person chose a widget to set up, from its ⋯ menu's Set up or by a click on the widget (one that
+     * began on it, never the end of a drag or a resize). Show its settings in the page's side panel.
+     */
+    onSelect?: (id: string) => void;
+    /**
+     * A widget's own entries for its ⋯ menu (Duplicate, Remove…), after the grid's Set up, Move and Size, as a Kanban card's
+     * cardActions. A Remove that takes the widget out puts focus on the same control in the widget before, else after.
+     */
+    itemActions?: (id: string) => DropdownMenuEntry[];
+    /**
+     * A widget of this kind added from the palette, by a click on its row (at the end) or a drop (where it lands): add the
+     * page's widget and its layout entry (addItem), and return the new widget's id, or a promise of it for an id the server
+     * makes. Focus goes to the new widget's move handle (its ⋯ on a stacked grid).
+     */
+    onAdd?: (kind: DashboardWidgetKind, index: number) => string | PromiseLike<string>;
+    /** The widgets, each a DashboardItem: an array or a fragment of them. */
+    children?: ReactNode;
+    /**
+     * The name of the widgets' group while editing, as a screen reader hears it, and where focus goes when the last widget
+     * is removed. Default "Dashboard widgets".
+     */
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * Sprint 32 (A8): the palette and the grid share one drag, so a widget library's kind can be dragged onto the grid. A
+ * page that uses both wraps them in a DashboardEditor (anywhere above both: the side panel and the page's content); a
+ * grid alone needs none. One grid to an editor: each tab's grid in turn, as only the open tab's is drawn.
+ */
+declare function DashboardEditor({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * One widget on a DashboardGrid (A3). The grid reads its props and draws it in a cell of its own, in the layout's order;
+ * on its own it draws its children.
+ */
+declare function DashboardItem({ children }: DashboardItemProps): react_jsx_runtime.JSX.Element;
+/** The grid drawn in a drag arena: an editor's, else one of its own (a grid alone needs no editor). */
+declare function DashboardGrid(props: DashboardGridProps): react_jsx_runtime.JSX.Element;
+
+interface DashboardPaletteProps {
+    /** The kinds of widget the page offers (headline number, line chart, table, text note, image…), in the order listed. */
+    kinds: DashboardWidgetKind[];
+    /** The list's name, as a screen reader hears it. Default "Widget library". */
+    label?: string;
+    /**
+     * The line above the list that says what a row does: by default "Select or drag to add" while the rows drag,
+     * and "Select a widget to add it" where they don't (a grid stacked at a narrow width); none while the grid isn't
+     * editing. A function gives other words for each case (it's told whether the rows drag); false draws none.
+     */
+    hint?: false | ((rowsDrag: boolean) => string);
+    className?: string;
+}
+/**
+ * Sprint 32 (A8): the widget library the briefs ask for, a list of the kinds of widget a page offers, each with its name,
+ * an optional description and icon. Each kind is one control, a button named "Add {kind}" (the look fixes, D5): a click,
+ * Enter or Space adds the widget at the end (the plain click way, accessibility#26), and a pointer's drag of the row
+ * places it where it's dropped (the grid's sensors tell the two apart: 5 px of movement for a mouse, a 250 ms press for a
+ * finger). The grid asks the page for the widget (its onAdd), focus goes to the new widget's move handle, and the grid's
+ * live region says where it went. It reaches the grid through the DashboardEditor round them both.
+ *
+ * Where it sits, so the grid keeps its width (the guidance's composition): in an AsidePanel with `width="312px"
+ * collapseBelow="xl" resizable={false}`, docked beside the grid from 1280 px and a drawer over the page below, its body
+ * padded as the panel's heading is (each row's hover tint and focus outline reach 8 px into that padding). An Add closes
+ * the overlay the panel has become, wherever it opens over the page (the drawer, or the phone's sheet), so the new widget
+ * isn't left under it; docked beside the grid, the panel stays open. Wherever the grid is stacked (narrower than 40rem)
+ * nothing drags, and focus goes to the new widget's ⋯, since a stacked grid has no handle. Adding and dragging are off
+ * while the grid isn't editing.
+ *
+ * A line above the list says what a row does (the owner's look at the second sheet: the rows drag, so say so), as visible
+ * text before the list rather than its description, which screen readers read unreliably: its words follow whether the
+ * rows drag (`hint`), and there are none while the grid isn't editing, outside a DashboardEditor, or with no kinds. The
+ * list keeps its name, its data attribute and the className, so the line is the list's sibling, not its wrapper.
+ */
+declare function DashboardPalette({ kinds, label, hint, className }: DashboardPaletteProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Sprint 32 (A10): a draft the person edits and then saves or cancels as a whole: a dashboard's tabs (added, renamed,
+ * reordered, removed), each tab's layout and each widget's settings, in whatever shape the page gives it. Every change can be
+ * undone and redone (custom_interaction#26), from the page's visible Undo and Redo buttons and from the keyboard:
+ * Ctrl+Z or ⌘Z undoes, with Shift it redoes, outside text fields only, so a field's own undo keeps working.
+ */
+interface DraftHistory<T> {
+    /** The draft now. */
+    value: T;
+    /**
+     * Changes the draft: a new value, or a function of the one before. Each change is a step that Undo takes back, and a
+     * change after an Undo drops what Redo had. Pass `merge` (a field's name, say) for a run of changes that is one step:
+     * each keystroke in a widget's title field, so Undo takes back the edit, not a letter. A change to the same value
+     * adds no step.
+     */
+    set: (next: T | ((prev: T) => T), merge?: string) => void;
+    undo: () => void;
+    redo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    /**
+     * The draft differs from what was last saved (the first value, or the last `reset`): `dirty` enables Save. Cancel always
+     * goes back to the view, calling `reset(saved)` first, so it's never disabled.
+     */
+    dirty: boolean;
+    /**
+     * Starts again from a saved value, with no steps to undo: after Save, `reset()` takes the draft as saved; Cancel
+     * passes the saved value back, `reset(saved)`, and the draft is that. A value loaded after the first render is passed
+     * here too.
+     */
+    reset: (next?: T) => void;
+}
+interface DraftHistoryOptions {
+    /** Ctrl+Z, ⌘Z and their Shift forms on the page. Default true; off where two drafts share a page, or a dialog has its own. */
+    shortcuts?: boolean;
+}
+/**
+ * A draft held whole until it's saved, with undo and redo: a dashboard's tabs, each tab's layout and each widget's
+ * settings in one value, or anything else a page edits before Save. `set` changes it, one step Undo takes back; `dirty`
+ * says it differs from what was last saved, and enables Save; Cancel always goes back to the view, calling
+ * `reset(saved)` first; `reset()` after Save. Ctrl+Z or ⌘Z undoes and with Shift redoes, outside text fields, unless
+ * `shortcuts` is false.
+ */
+declare function useDraftHistory<T>(initial: T | (() => T), { shortcuts }?: DraftHistoryOptions): DraftHistory<T>;
+
+export { DashboardEditor, DashboardGrid, type DashboardGridProps, DashboardItem, type DashboardItemProps, type DashboardLayout, type DashboardLayoutItem, DashboardPalette, type DashboardPaletteProps, type DashboardWidgetKind, type DraftHistory, type DraftHistoryOptions, useDraftHistory };