@12-apps/ui 6.30.1 → 6.30.3

package/dist/{chunk-PMS3H3OO.js → chunk-DF2FFYZ7.js}

@@ -1,3 +1,6 @@
+import {
+  LightboxCurrentMedia
+} from "./chunk-2DWBJJK6.js";
 import {
   resolveLightboxProps
 } from "./chunk-UOS7DEQZ.js";
@@ -19,9 +22,6 @@ import {
 import {
   makeTestId
 } from "./chunk-56SJYTIT.js";
-import {
-  LightboxCurrentMedia
-} from "./chunk-2DWBJJK6.js";
 
 // src/components/data-display/Lightbox/Lightbox.tsx
 import Dialog from "@mui/material/Dialog/index.js";
@@ -128,4 +128,4 @@ export {
   Lightbox,
   Lightbox_default
 };
-//# sourceMappingURL=chunk-PMS3H3OO.js.map
+//# sourceMappingURL=chunk-DF2FFYZ7.js.map

package/dist/chunk-DG2A4DQU.js

@@ -0,0 +1,118 @@
+import {
+  focusFirstTabbable
+} from "./chunk-6PPF5WEN.js";
+
+// src/components/layout/SettingCard/SettingCard.hooks.ts
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+function saveErrorMessage(error, formatError, fallback) {
+  return formatError?.(error) ?? fallback;
+}
+function useControllableOpen(open, defaultOpen, onOpenChange) {
+  const [inner, setInner] = useState(defaultOpen);
+  const controlled = open !== void 0;
+  const value = controlled ? open : inner;
+  const setOpen = useCallback(
+    (next) => {
+      if (!controlled) setInner(next);
+      onOpenChange?.(next);
+    },
+    [controlled, onOpenChange]
+  );
+  return [value, setOpen];
+}
+function useSaveRunner(formatError, fallback) {
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const seq = useRef(0);
+  useEffect(
+    () => () => {
+      seq.current += 1;
+    },
+    []
+  );
+  const run = useCallback(
+    async (save) => {
+      const mine = seq.current += 1;
+      setSaving(true);
+      setError(null);
+      try {
+        await Promise.resolve().then(save);
+        if (seq.current !== mine) return false;
+        setSaving(false);
+        return true;
+      } catch (cause) {
+        if (seq.current !== mine) return false;
+        setSaving(false);
+        setError(saveErrorMessage(cause, formatError, fallback));
+        return false;
+      }
+    },
+    [formatError, fallback]
+  );
+  const reset = useCallback(() => {
+    seq.current += 1;
+    setSaving(false);
+    setError(null);
+  }, []);
+  return { saving, error, run, reset };
+}
+function useAsyncSwitch(options) {
+  const { checked, onChange, formatError, fallback } = options;
+  const [pending, setPending] = useState(null);
+  const { saving, error, run } = useSaveRunner(formatError, fallback);
+  const flip = useCallback(
+    async (next) => {
+      if (saving) return;
+      setPending(next);
+      await run(() => onChange(next));
+      setPending(null);
+    },
+    [saving, run, onChange]
+  );
+  return { shown: pending ?? checked, saving, error, flip };
+}
+function useFocusHandoff(open, body, trigger) {
+  const previous = useRef(open);
+  useLayoutEffect(() => {
+    if (previous.current === open) return;
+    previous.current = open;
+    if (open && body.current) focusFirstTabbable(body.current);
+    if (!open) trigger.current?.focus();
+  }, [open, body, trigger]);
+}
+function useSettingCard(props) {
+  const { copy, onSave, onCancel, open: openProp, defaultOpen = false, onOpenChange, formatError } = props;
+  const disabled = props.disabled ?? false;
+  const saveDisabled = props.saveDisabled ?? false;
+  const [open, setOpen] = useControllableOpen(openProp, defaultOpen, onOpenChange);
+  const { saving, error, run, reset } = useSaveRunner(formatError, copy.saveFailed);
+  const bodyRef = useRef(null);
+  const editRef = useRef(null);
+  useFocusHandoff(open, bodyRef, editRef);
+  useEffect(() => {
+    if (!open) reset();
+  }, [open, reset]);
+  const openCard = useCallback(() => setOpen(true), [setOpen]);
+  const cancel = useCallback(() => {
+    if (saving) return;
+    setOpen(false);
+    onCancel?.();
+  }, [saving, setOpen, onCancel]);
+  const save = useCallback(() => {
+    if (saving || saveDisabled) return;
+    void run(onSave).then((saved) => {
+      if (saved) setOpen(false);
+    });
+  }, [saving, saveDisabled, run, onSave, setOpen]);
+  return { open, disabled, saveDisabled, saving, error, bodyRef, editRef, openCard, cancel, save };
+}
+
+export {
+  saveErrorMessage,
+  useControllableOpen,
+  useSaveRunner,
+  useAsyncSwitch,
+  useFocusHandoff,
+  useSettingCard
+};
+//# sourceMappingURL=chunk-DG2A4DQU.js.map

package/dist/chunk-DG2A4DQU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingCard/SettingCard.hooks.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react';\n\nimport { focusFirstTabbable } from './SettingCard.focus';\n\nimport type { SettingCardProps, SettingErrorFormatter, SettingSaveResult } from './SettingCard.types';\n\n/** The sentence a rejected save shows: the host's, else the copy's fallback. */\nexport function saveErrorMessage(\n  error: unknown,\n  formatError: SettingErrorFormatter | undefined,\n  fallback: string,\n): string {\n  return formatError?.(error) ?? fallback;\n}\n\n/**\n * Open state that is controlled when `open` is passed and uncontrolled\n * otherwise — the shape MUI's own `useControlled` has, without its dev-only\n * warnings reaching into this package's surface.\n */\nexport function useControllableOpen(\n  open: boolean | undefined,\n  defaultOpen: boolean,\n  onOpenChange: ((open: boolean) => void) | undefined,\n): [boolean, (next: boolean) => void] {\n  const [inner, setInner] = useState(defaultOpen);\n  const controlled = open !== undefined;\n  const value = controlled ? open : inner;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!controlled) setInner(next);\n      onOpenChange?.(next);\n    },\n    [controlled, onOpenChange],\n  );\n\n  return [value, setOpen];\n}\n\n/**\n * Runs a save that may or may not be async and reports how it went.\n *\n * `Promise.resolve().then(save)` rather than `await save()`: it also catches a\n * handler that throws SYNCHRONOUSLY, which an `await` inside `try` would too —\n * but it keeps the pending state visible for one tick even when the handler\n * returns nothing, so a save never \"succeeds\" in the middle of the click that\n * started it. A sequence id drops the outcome of a run the card has since\n * abandoned (closed, or started again).\n */\nexport function useSaveRunner(formatError: SettingErrorFormatter | undefined, fallback: string) {\n  const [saving, setSaving] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const seq = useRef(0);\n\n  useEffect(\n    () => () => {\n      // Unmounted: whatever is still in flight has nobody left to report to.\n      seq.current += 1;\n    },\n    [],\n  );\n\n  const run = useCallback(\n    async (save: () => SettingSaveResult): Promise<boolean> => {\n      const mine = (seq.current += 1);\n      setSaving(true);\n      setError(null);\n      try {\n        await Promise.resolve().then(save);\n        if (seq.current !== mine) return false;\n        setSaving(false);\n        return true;\n      } catch (cause) {\n        if (seq.current !== mine) return false;\n        setSaving(false);\n        setError(saveErrorMessage(cause, formatError, fallback));\n        return false;\n      }\n    },\n    [formatError, fallback],\n  );\n\n  const reset = useCallback(() => {\n    seq.current += 1;\n    setSaving(false);\n    setError(null);\n  }, []);\n\n  return { saving, error, run, reset };\n}\n\n/**\n * A switch that saves the moment it flips.\n *\n * It shows the flip at once (`pending`) and holds it while the save runs; a\n * success hands back to the host's `checked`, which by then says the same\n * thing, and a failure drops `pending` so the switch returns to what is\n * actually saved. A flip while one is in flight is ignored rather than queued:\n * two racing writes of a boolean have no right answer.\n */\nexport function useAsyncSwitch(options: {\n  checked: boolean;\n  onChange: (checked: boolean) => SettingSaveResult;\n  formatError: SettingErrorFormatter | undefined;\n  fallback: string;\n}) {\n  const { checked, onChange, formatError, fallback } = options;\n  const [pending, setPending] = useState<boolean | null>(null);\n  const { saving, error, run } = useSaveRunner(formatError, fallback);\n\n  const flip = useCallback(\n    async (next: boolean) => {\n      if (saving) return;\n      setPending(next);\n      await run(() => onChange(next));\n      setPending(null);\n    },\n    [saving, run, onChange],\n  );\n\n  return { shown: pending ?? checked, saving, error, flip };\n}\n\n/**\n * Focus follows the card: into it when it opens, back to the trigger when it\n * closes.\n *\n * Inward, it is the Dialog's own rule (`focusFirstTabbable`, FUT-2696): the\n * first tabbable descendant, and a caller's `autoFocus` keeps winning. The\n * card is NOT a trap — it is inline, the rest of the page is still there, and\n * locking Tab inside it would strand a keyboard user who wants to leave\n * mid-edit. What it owes them is the round trip: the Edit trigger unmounts\n * while the card is open, so without the return focus would fall to <body>\n * and the reader would start again from the top of the page.\n *\n * Only a TRANSITION moves focus: a card mounted open (or closed) leaves focus\n * where the page put it.\n */\nexport function useFocusHandoff(\n  open: boolean,\n  body: RefObject<HTMLElement | null>,\n  trigger: RefObject<HTMLElement | null>,\n): void {\n  const previous = useRef(open);\n\n  useLayoutEffect(() => {\n    if (previous.current === open) return;\n    previous.current = open;\n    if (open && body.current) focusFirstTabbable(body.current);\n    if (!open) trigger.current?.focus();\n  }, [open, body, trigger]);\n}\n\n/**\n * Everything an editable card DOES, apart from how it looks: its open state,\n * the save and its outcome, Cancel, and where focus goes.\n */\nexport function useSettingCard(props: SettingCardProps) {\n  const { copy, onSave, onCancel, open: openProp, defaultOpen = false, onOpenChange, formatError } = props;\n  const disabled = props.disabled ?? false;\n  const saveDisabled = props.saveDisabled ?? false;\n  const [open, setOpen] = useControllableOpen(openProp, defaultOpen, onOpenChange);\n  const { saving, error, run, reset } = useSaveRunner(formatError, copy.saveFailed);\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const editRef = useRef<HTMLButtonElement>(null);\n  useFocusHandoff(open, bodyRef, editRef);\n\n  // However the card closed — Cancel, a save, or a controlling host — the\n  // next opening starts without the last one's error.\n  useEffect(() => {\n    if (!open) reset();\n  }, [open, reset]);\n\n  const openCard = useCallback(() => setOpen(true), [setOpen]);\n\n  const cancel = useCallback(() => {\n    if (saving) return;\n    setOpen(false);\n    onCancel?.();\n  }, [saving, setOpen, onCancel]);\n\n  const save = useCallback(() => {\n    if (saving || saveDisabled) return;\n    void run(onSave).then((saved) => {\n      if (saved) setOpen(false);\n    });\n  }, [saving, saveDisabled, run, onSave, setOpen]);\n\n  return { open, disabled, saveDisabled, saving, error, bodyRef, editRef, openCard, cancel, save };\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-RBGOGTT2.js → chunk-DWZ7FLA7.js}

@@ -2,14 +2,14 @@ import {
   ItemsPerPageSelect,
   PageInfo
 } from "./chunk-BB2IVF76.js";
-import {
-  paginationStyles
-} from "./chunk-CZBONNPA.js";
 import {
   makeTestId,
   muiSizeFor,
   resolvePaginationProps
 } from "./chunk-Z6TIAVEG.js";
+import {
+  paginationStyles
+} from "./chunk-CZBONNPA.js";
 
 // src/components/navigation/Pagination/Pagination.tsx
 import FirstPage from "@mui/icons-material/FirstPage";
@@ -191,4 +191,4 @@ Pagination.displayName = "Pagination";
 export {
   Pagination
 };
-//# sourceMappingURL=chunk-RBGOGTT2.js.map
+//# sourceMappingURL=chunk-DWZ7FLA7.js.map

package/dist/{chunk-237NDIT2.js → chunk-E3O72LBJ.js}

@@ -2,7 +2,7 @@ import {
   SwitchControl,
   SwitchHelper,
   SwitchRow
-} from "./chunk-5KFZGB5U.js";
+} from "./chunk-GS7ESED2.js";
 import {
   switchIds
 } from "./chunk-SZS7VZJN.js";
@@ -124,4 +124,4 @@ Switch.displayName = "Switch";
 export {
   Switch
 };
-//# sourceMappingURL=chunk-237NDIT2.js.map
+//# sourceMappingURL=chunk-E3O72LBJ.js.map

package/dist/{chunk-OH3YGJT5.js → chunk-EMNGIYH6.js}

@@ -1,13 +1,13 @@
 import {
   renderChartByType
-} from "./chunk-KT6HWAEN.js";
-import {
-  ChartContainer
-} from "./chunk-M5T3COS2.js";
+} from "./chunk-WZUNBSS7.js";
 import {
   getSizeStyles,
   getVariantStyles
 } from "./chunk-XXDXW6TX.js";
+import {
+  ChartContainer
+} from "./chunk-M5T3COS2.js";
 import {
   muiColor
 } from "./chunk-7ZPUN7TV.js";
@@ -104,4 +104,4 @@ var Chart = (props) => {
 export {
   Chart
 };
-//# sourceMappingURL=chunk-OH3YGJT5.js.map
+//# sourceMappingURL=chunk-EMNGIYH6.js.map

package/dist/{chunk-XFUNJYFT.js → chunk-EPNUVSNK.js}

@@ -1,9 +1,3 @@
-import {
-  useHoverCard
-} from "./chunk-SXYIXCUB.js";
-import {
-  HoverCardContent
-} from "./chunk-O26MKGIC.js";
 import {
   arrowSx,
   cardSx,
@@ -11,6 +5,12 @@ import {
   getTransformOrigin,
   sideOf
 } from "./chunk-KSLNO5NG.js";
+import {
+  useHoverCard
+} from "./chunk-SXYIXCUB.js";
+import {
+  HoverCardContent
+} from "./chunk-O26MKGIC.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -158,4 +158,4 @@ HoverCard.displayName = "HoverCard";
 export {
   HoverCard
 };
-//# sourceMappingURL=chunk-XFUNJYFT.js.map
+//# sourceMappingURL=chunk-EPNUVSNK.js.map

package/dist/{chunk-35UG2QDB.js → chunk-EUEUZI4L.js}

@@ -25,7 +25,7 @@ import {
 } from "./chunk-FAITHWIO.js";
 import {
   px
-} from "./chunk-SONWG2RT.js";
+} from "./chunk-OW4UEIXA.js";
 
 // src/components/data-display/Avatar/Avatar.view.tsx
 import MuiAvatar from "@mui/material/Avatar/index.js";
@@ -272,4 +272,4 @@ function AvatarView(props) {
 export {
   AvatarView
 };
-//# sourceMappingURL=chunk-35UG2QDB.js.map
+//# sourceMappingURL=chunk-EUEUZI4L.js.map

package/dist/{chunk-KUJLZFDW.js → chunk-FCG5YR6T.js}

@@ -1,9 +1,9 @@
 import {
   GridShell
-} from "./chunk-VEGT5PAD.js";
+} from "./chunk-BAISDZ3L.js";
 import {
   useDataViewsState
-} from "./chunk-K2JH7QPR.js";
+} from "./chunk-2F2HPQNQ.js";
 
 // src/components/data-display/DataViews/DataViewsGrid.tsx
 import { useEffect, useRef } from "react";
@@ -27,4 +27,4 @@ function DataViewsGrid(props) {
 export {
   DataViewsGrid
 };
-//# sourceMappingURL=chunk-KUJLZFDW.js.map
+//# sourceMappingURL=chunk-FCG5YR6T.js.map

package/dist/{chunk-2UBFDRL7.js → chunk-FCTURAZF.js}

@@ -2,7 +2,7 @@ import {
   buildGridColumns,
   buildRowActionsColumn,
   isActionsColumn
-} from "./chunk-57ZSQB5V.js";
+} from "./chunk-TLRTLYVT.js";
 
 // src/components/data-display/DataViews/data-views-columns.ts
 import { useMemo } from "react";
@@ -52,4 +52,4 @@ export {
   useColumnsWithActions,
   useRenderedColumns
 };
-//# sourceMappingURL=chunk-2UBFDRL7.js.map
+//# sourceMappingURL=chunk-FCTURAZF.js.map

package/dist/{chunk-UC6A6ASM.js → chunk-FFQKUTO6.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Text
-} from "./chunk-YTYROOLY.js";
+} from "./chunk-D22EGB3T.js";
 
 // src/components/data-display/DataViews/data-views-header-row.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -36,4 +36,4 @@ function GridHeaderRow({
 export {
   GridHeaderRow
 };
-//# sourceMappingURL=chunk-UC6A6ASM.js.map
+//# sourceMappingURL=chunk-FFQKUTO6.js.map

package/dist/{chunk-J3ZP6EUS.js → chunk-FNIHELAR.js}

@@ -26,7 +26,7 @@ import {
 } from "./chunk-XV2TDULR.js";
 import {
   px
-} from "./chunk-SONWG2RT.js";
+} from "./chunk-OW4UEIXA.js";
 
 // src/components/data-display/Badge/Badge.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
@@ -197,4 +197,4 @@ export {
   getAnchorOrigin,
   badgeStyles
 };
-//# sourceMappingURL=chunk-J3ZP6EUS.js.map
+//# sourceMappingURL=chunk-FNIHELAR.js.map

package/dist/{chunk-SQV3HPTZ.js → chunk-G76H5PEM.js}

@@ -1,9 +1,9 @@
-import {
-  tabsRootStyles
-} from "./chunk-EWSGWLHN.js";
 import {
   CustomTabPanel
 } from "./chunk-7UZ2TFIK.js";
+import {
+  tabsRootStyles
+} from "./chunk-EWSGWLHN.js";
 
 // src/components/navigation/Tabs/Tabs.tsx
 import Close from "@mui/icons-material/Close";
@@ -246,4 +246,4 @@ Tabs.displayName = "Tabs";
 export {
   Tabs
 };
-//# sourceMappingURL=chunk-SQV3HPTZ.js.map
+//# sourceMappingURL=chunk-G76H5PEM.js.map

package/dist/{chunk-FLIMEQUA.js → chunk-GBX5ACPF.js}

@@ -1,3 +1,7 @@
+import {
+  useSheetDrag,
+  useSheetOpen
+} from "./chunk-OLZTGVBT.js";
 import {
   SheetBody
 } from "./chunk-JBMBFYFA.js";
@@ -7,10 +11,6 @@ import {
 import {
   SheetOverlay
 } from "./chunk-U437KFDI.js";
-import {
-  useSheetDrag,
-  useSheetOpen
-} from "./chunk-REMK55JI.js";
 import {
   DEFAULT_DRAG_RESISTANCE,
   DEFAULT_VELOCITY_THRESHOLD,
@@ -124,4 +124,4 @@ var Sheet = (props) => {
 export {
   Sheet
 };
-//# sourceMappingURL=chunk-FLIMEQUA.js.map
+//# sourceMappingURL=chunk-GBX5ACPF.js.map

package/dist/{chunk-22ZJH7RY.js → chunk-GN26LHNJ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-HJOABXKN.js";
 import {
   Button
-} from "./chunk-BKAB4KZK.js";
+} from "./chunk-LKAKYP42.js";
 
 // src/components/feedback/ConfirmAction/ConfirmButton.tsx
 function createConfirmButton(copy, errorText) {
@@ -18,4 +18,4 @@ function createConfirmButton(copy, errorText) {
 export {
   createConfirmButton
 };
-//# sourceMappingURL=chunk-22ZJH7RY.js.map
+//# sourceMappingURL=chunk-GN26LHNJ.js.map

package/dist/{chunk-5KFZGB5U.js → chunk-GS7ESED2.js}

@@ -1,7 +1,7 @@
 import {
   onTrackInk,
   switchSx
-} from "./chunk-DEE6IPGI.js";
+} from "./chunk-TJXNVREN.js";
 import {
   LABEL_GAP_UNITS,
   SWITCH_ICON_SIZES,
@@ -217,4 +217,4 @@ export {
   SwitchHelper,
   SwitchRow
 };
-//# sourceMappingURL=chunk-5KFZGB5U.js.map
+//# sourceMappingURL=chunk-GS7ESED2.js.map

package/dist/{chunk-FGUK3D54.js → chunk-GZHZ7OTY.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-BKAB4KZK.js";
+} from "./chunk-LKAKYP42.js";
 import {
   Text
-} from "./chunk-YTYROOLY.js";
+} from "./chunk-D22EGB3T.js";
 
 // src/components/data-display/DataViews/data-views-select-all-strip.tsx
 import Checkbox from "@mui/material/Checkbox/index.js";
@@ -85,4 +85,4 @@ function SelectAllStrip({
 export {
   SelectAllStrip
 };
-//# sourceMappingURL=chunk-FGUK3D54.js.map
+//# sourceMappingURL=chunk-GZHZ7OTY.js.map

package/dist/chunk-HALFOXSZ.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-HALFOXSZ.js.map

package/dist/chunk-HALFOXSZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-BLBOYCOV.js → chunk-HKV4MQ2W.js}

@@ -1,13 +1,13 @@
-import {
-  resolveAxisConfig,
-  resolveBarGeometry
-} from "./chunk-4V532JF6.js";
 import {
   getAxisStyles,
   getDefaultColors,
   getSizeStyles,
   resolveSeries
 } from "./chunk-XXDXW6TX.js";
+import {
+  resolveAxisConfig,
+  resolveBarGeometry
+} from "./chunk-4V532JF6.js";
 
 // src/components/data-display/Chart/chart-context.ts
 function buildChartContext(props, theme) {
@@ -48,4 +48,4 @@ function buildChartContext(props, theme) {
 export {
   buildChartContext
 };
-//# sourceMappingURL=chunk-BLBOYCOV.js.map
+//# sourceMappingURL=chunk-HKV4MQ2W.js.map

package/dist/{chunk-K4JRHQMI.js → chunk-HMJM6DKA.js}

@@ -8,10 +8,10 @@ import {
 } from "./chunk-L7BRU4UF.js";
 import {
   Alert
-} from "./chunk-L6TCIZFR.js";
+} from "./chunk-SUAGBFYJ.js";
 import {
   Button
-} from "./chunk-BKAB4KZK.js";
+} from "./chunk-LKAKYP42.js";
 
 // src/components/feedback/NotificationStatusNotice/NotificationStatusNotice.tsx
 import Box from "@mui/material/Box/index.js";
@@ -106,4 +106,4 @@ NotificationStatusNotice.displayName = "NotificationStatusNotice";
 export {
   NotificationStatusNotice
 };
-//# sourceMappingURL=chunk-K4JRHQMI.js.map
+//# sourceMappingURL=chunk-HMJM6DKA.js.map

package/dist/{chunk-ZWIDQEJ4.js → chunk-HT7DWIR4.js}

@@ -1,15 +1,15 @@
-import {
-  iconFill
-} from "./chunk-QWBQVQRG.js";
 import {
   ICON_PATHS
 } from "./chunk-KEVPUBOE.js";
+import {
+  iconFill
+} from "./chunk-QWBQVQRG.js";
 import {
   iconSize
 } from "./chunk-RTSK5OZT.js";
 import {
   useUiTheme
-} from "./chunk-AIBNBWQU.js";
+} from "./chunk-NR7LSYLM.js";
 import {
   resolveTestId
 } from "./chunk-TYJR4GOF.js";
@@ -46,4 +46,4 @@ Icon.displayName = "Icon";
 export {
   Icon
 };
-//# sourceMappingURL=chunk-ZWIDQEJ4.js.map
+//# sourceMappingURL=chunk-HT7DWIR4.js.map

package/dist/{chunk-UVD5NFRF.js → chunk-I3PGXMVJ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-IDHZHOZW.js";
 import {
   Button
-} from "./chunk-BKAB4KZK.js";
+} from "./chunk-LKAKYP42.js";
 
 // src/components/data-display/CardKit/CardKebab.tsx
 import { jsx } from "react/jsx-runtime";
@@ -25,4 +25,4 @@ function CardKebab({
 export {
   CardKebab
 };
-//# sourceMappingURL=chunk-UVD5NFRF.js.map
+//# sourceMappingURL=chunk-I3PGXMVJ.js.map

package/dist/{chunk-Z52HVR4J.js → chunk-I4IPGIRF.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   Button
-} from "./chunk-BKAB4KZK.js";
+} from "./chunk-LKAKYP42.js";
 
 // src/components/form/total-form/SubmitButton.tsx
 import { jsx } from "react/jsx-runtime";
@@ -29,4 +29,4 @@ function SubmitButton({
 export {
   SubmitButton
 };
-//# sourceMappingURL=chunk-Z52HVR4J.js.map
+//# sourceMappingURL=chunk-I4IPGIRF.js.map

package/dist/{chunk-HR7YTBR7.js → chunk-IASDP44E.js}

@@ -1,13 +1,13 @@
 import {
   useViewMutations
 } from "./chunk-DZEC6RFM.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
 import {
   coerceViewState,
   emptyViewState
 } from "./chunk-LHHAYZ55.js";
-import {
-  useDataViewsCopy
-} from "./chunk-KHG57NAE.js";
 
 // src/components/data-display/DataViews/use-saved-views-controller.ts
 import { useRef, useState } from "react";
@@ -96,4 +96,4 @@ function useSavedViewsController(persistence, router, columnIds, views, initialV
 export {
   useSavedViewsController
 };
-//# sourceMappingURL=chunk-HR7YTBR7.js.map
+//# sourceMappingURL=chunk-IASDP44E.js.map

package/dist/chunk-IAVQXQ3V.js

@@ -0,0 +1,82 @@
+import {
+  partTestId
+} from "./chunk-Q6FUSSLK.js";
+import {
+  SETTING_CARD_OPEN_ATTR,
+  withCallerSx
+} from "./chunk-KRR6KK5J.js";
+import {
+  rem
+} from "./chunk-4HDP2PZD.js";
+import {
+  SETTING_CARD,
+  SETTING_GRID_GAP_UNITS
+} from "./chunk-IC7GHPMK.js";
+
+// src/components/layout/SettingCard/SettingGrid.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var SETTING_GRID_CONTAINER = "setting-grid";
+var tracks = (n) => `repeat(${n}, minmax(0, 1fr))`;
+var threshold = (theme, n, minColumnPx, gapUnits) => `calc(${n} * ${rem(theme, minColumnPx)} + ${n - 1} * ${theme.spacing(gapUnits)})`;
+function settingGridStyles(theme, { minColumnPx, maxColumns, gapUnits }) {
+  const styles = {
+    display: "grid",
+    gap: theme.spacing(gapUnits),
+    gridTemplateColumns: tracks(1),
+    gridAutoRows: "auto",
+    alignItems: "stretch",
+    [`& > [${SETTING_CARD_OPEN_ATTR}], & > :has([${SETTING_CARD_OPEN_ATTR}])`]: { gridColumn: "1 / -1" }
+  };
+  for (const n of [2, 3]) {
+    if (n > maxColumns) break;
+    styles[`@container ${SETTING_GRID_CONTAINER} (min-width: ${threshold(theme, n, minColumnPx, gapUnits)})`] = {
+      gridTemplateColumns: tracks(n)
+    };
+  }
+  return styles;
+}
+var SettingGrid = forwardRef(function SettingGrid2(props, ref) {
+  const {
+    children,
+    minColumnWidth = SETTING_CARD.gridMinColumnWidth,
+    maxColumns = 3,
+    gap = SETTING_GRID_GAP_UNITS,
+    "aria-label": ariaLabel,
+    dataTestId,
+    className,
+    sx
+  } = props;
+  const theme = useTheme();
+  const gridStyles = settingGridStyles(theme, { minColumnPx: minColumnWidth, maxColumns, gapUnits: gap });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      role: ariaLabel ? "region" : void 0,
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId,
+      className,
+      sx: withCallerSx({ containerType: "inline-size", containerName: SETTING_GRID_CONTAINER, minWidth: 0 }, sx),
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: gridStyles,
+          "data-max-columns": maxColumns,
+          "data-testid": partTestId(dataTestId, "grid"),
+          children
+        }
+      )
+    }
+  );
+});
+SettingGrid.displayName = "SettingGrid";
+
+export {
+  SETTING_GRID_CONTAINER,
+  settingGridStyles,
+  SettingGrid
+};
+//# sourceMappingURL=chunk-IAVQXQ3V.js.map

package/dist/chunk-IAVQXQ3V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingCard/SettingGrid.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme, type CSSObject, type Theme } from '@mui/material/styles/index.js';\nimport { forwardRef } from 'react';\n\nimport { rem } from './SettingCard.rem';\n\nimport { SETTING_CARD, SETTING_GRID_GAP_UNITS } from './SettingCard.metrics';\nimport { partTestId } from './SettingCard.parts';\nimport { SETTING_CARD_OPEN_ATTR, withCallerSx } from './SettingCard.styles';\nimport type { SettingGridColumns, SettingGridProps } from './SettingCard.types';\n\n/** The container the grid's own queries are asked of. Named, so a nested grid answers to its own. */\nexport const SETTING_GRID_CONTAINER = 'setting-grid';\n\n/** The track list for `n` equal columns. `minmax(0, …)` so a long word cannot widen its column. */\nconst tracks = (n: SettingGridColumns): string => `repeat(${n}, minmax(0, 1fr))`;\n\n/**\n * The narrowest the container can be and still fit `n` columns of\n * `minColumnWidth` with the gaps between them. A `calc()` because the gap is a\n * spacing unit and the width a type-scale length: two scales, one sum.\n */\nconst threshold = (theme: Theme, n: number, minColumnPx: number, gapUnits: number): string =>\n  `calc(${n} * ${rem(theme, minColumnPx)} + ${n - 1} * ${theme.spacing(gapUnits)})`;\n\n/**\n * The grid itself.\n *\n * - Columns come from CONTAINER queries, not viewport ones: a settings grid\n *   lives beside a rail, inside a drawer, in half a split view, and the\n *   viewport says nothing about how wide any of those are.\n * - `grid-auto-rows: auto` with `align-items: stretch` is the equal-height\n *   rule: each row is as tall as its tallest card and every card in it\n *   stretches to match. Not `1fr` rows — those would make EVERY row as tall as\n *   the tallest, so one open card would inflate the whole page.\n * - An open card spans the row. The card sets `grid-column` on itself; the\n *   `:has()` rule covers a card the host wrapped in an element of its own.\n */\nexport interface SettingGridLayout {\n  /** The narrowest column, in DESIGN px (drawn through `rem`). */\n  minColumnPx: number;\n  maxColumns: SettingGridColumns;\n  /** The gap, in theme SPACING units. */\n  gapUnits: number;\n}\n\nexport function settingGridStyles(theme: Theme, { minColumnPx, maxColumns, gapUnits }: SettingGridLayout): CSSObject {\n  const styles: CSSObject = {\n    display: 'grid',\n    gap: theme.spacing(gapUnits),\n    gridTemplateColumns: tracks(1),\n    gridAutoRows: 'auto',\n    alignItems: 'stretch',\n    [`& > [${SETTING_CARD_OPEN_ATTR}], & > :has([${SETTING_CARD_OPEN_ATTR}])`]: { gridColumn: '1 / -1' },\n  };\n  for (const n of [2, 3] as const) {\n    if (n > maxColumns) break;\n    styles[`@container ${SETTING_GRID_CONTAINER} (min-width: ${threshold(theme, n, minColumnPx, gapUnits)})`] = {\n      gridTemplateColumns: tracks(n),\n    };\n  }\n  return styles;\n}\n\n/**\n * Lays setting cards out in one, two or three columns by the width it is\n * GIVEN — see {@link settingGridStyles}. Two elements, because a container\n * query is answered by an ANCESTOR: the outer one is the container, the inner\n * one the grid.\n */\nexport const SettingGrid = forwardRef<HTMLDivElement, SettingGridProps>(function SettingGrid(props, ref) {\n  const {\n    children,\n    minColumnWidth = SETTING_CARD.gridMinColumnWidth,\n    maxColumns = 3,\n    gap = SETTING_GRID_GAP_UNITS,\n    'aria-label': ariaLabel,\n    dataTestId,\n    className,\n    sx,\n  } = props;\n  const theme = useTheme();\n  const gridStyles = settingGridStyles(theme, { minColumnPx: minColumnWidth, maxColumns, gapUnits: gap });\n\n  return (\n    <Box\n      ref={ref}\n      role={ariaLabel ? 'region' : undefined}\n      aria-label={ariaLabel}\n      data-testid={dataTestId}\n      className={className}\n      sx={withCallerSx({ containerType: 'inline-size', containerName: SETTING_GRID_CONTAINER, minWidth: 0 }, sx)}\n    >\n      <Box\n        sx={gridStyles}\n        data-max-columns={maxColumns}\n        data-testid={partTestId(dataTestId, 'grid')}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n});\n\nSettingGrid.displayName = 'SettingGrid';\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAA4C;AACrD,SAAS,kBAAkB;AA2FrB;AAjFC,IAAM,yBAAyB;AAGtC,IAAM,SAAS,CAAC,MAAkC,UAAU,CAAC;AAO7D,IAAM,YAAY,CAAC,OAAc,GAAW,aAAqB,aAC/D,QAAQ,CAAC,MAAM,IAAI,OAAO,WAAW,CAAC,MAAM,IAAI,CAAC,MAAM,MAAM,QAAQ,QAAQ,CAAC;AAuBzE,SAAS,kBAAkB,OAAc,EAAE,aAAa,YAAY,SAAS,GAAiC;AACnH,QAAM,SAAoB;AAAA,IACxB,SAAS;AAAA,IACT,KAAK,MAAM,QAAQ,QAAQ;AAAA,IAC3B,qBAAqB,OAAO,CAAC;AAAA,IAC7B,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,CAAC,QAAQ,sBAAsB,gBAAgB,sBAAsB,IAAI,GAAG,EAAE,YAAY,SAAS;AAAA,EACrG;AACA,aAAW,KAAK,CAAC,GAAG,CAAC,GAAY;AAC/B,QAAI,IAAI,WAAY;AACpB,WAAO,cAAc,sBAAsB,gBAAgB,UAAU,OAAO,GAAG,aAAa,QAAQ,CAAC,GAAG,IAAI;AAAA,MAC1G,qBAAqB,OAAO,CAAC;AAAA,IAC/B;AAAA,EACF;AACA,SAAO;AACT;AAQO,IAAM,cAAc,WAA6C,SAASA,aAAY,OAAO,KAAK;AACvG,QAAM;AAAA,IACJ;AAAA,IACA,iBAAiB,aAAa;AAAA,IAC9B,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,kBAAkB,OAAO,EAAE,aAAa,gBAAgB,YAAY,UAAU,IAAI,CAAC;AAEtG,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,YAAY,WAAW;AAAA,MAC7B,cAAY;AAAA,MACZ,eAAa;AAAA,MACb;AAAA,MACA,IAAI,aAAa,EAAE,eAAe,eAAe,eAAe,wBAAwB,UAAU,EAAE,GAAG,EAAE;AAAA,MAEzG;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,oBAAkB;AAAA,UAClB,eAAa,WAAW,YAAY,MAAM;AAAA,UAEzC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,YAAY,cAAc;","names":["SettingGrid"]}