prime-ui-kit 0.18.0 → 0.19.0

package/dist/chunks/{chunk-MB4CXSLL.js → chunk-WYCTXD63.js}

@@ -180,7 +180,7 @@ import {
   useTextParts,
   visuallyHiddenClass,
   zonedParts
-} from "./chunk-OAXJWF3L.js";
+} from "./chunk-RZNGLELR.js";
 import {
   COMPACT_QUERY,
   ControlSizeProvider,
@@ -367,16 +367,23 @@ function useLeaveGuard({ busy, dirty }, ask) {
     entry.dirty = dirty;
     entry.released = false;
   }, [entry, busy, dirty]);
+  useUnloadGuard(busy || dirty, () => entry.released);
+}
+function useUnloadGuard(hold, released) {
+  const releasedRef = React2.useRef(released);
+  React2.useLayoutEffect(() => {
+    releasedRef.current = released;
+  });
   React2.useEffect(() => {
-    if (!busy && !dirty) return;
+    if (!hold) return;
     const onBeforeUnload = (event) => {
-      if (entry.released) return;
+      if (releasedRef.current?.()) return;
       event.preventDefault();
       event.returnValue = true;
     };
     window.addEventListener("beforeunload", onBeforeUnload);
     return () => window.removeEventListener("beforeunload", onBeforeUnload);
-  }, [entry, busy, dirty]);
+  }, [hold]);
 }
 
 // src/internal/SwitcherScroller.module.css
@@ -1439,11 +1446,12 @@ var DialogParts_default = {
   shell: "DialogParts_shell",
   "prime-dialog": "DialogParts_prime-dialog",
   header: "DialogParts_header",
-  icon: "DialogParts_icon",
   actions: "DialogParts_actions",
+  icon: "DialogParts_icon",
   close: "DialogParts_close",
   title: "DialogParts_title",
   description: "DialogParts_description",
+  descriptionSkeleton: "DialogParts_descriptionSkeleton",
   body: "DialogParts_body",
   section: "DialogParts_section",
   sectionHeader: "DialogParts_sectionHeader",
@@ -1457,6 +1465,7 @@ var DialogParts_default = {
 
 // src/internal/overlay/DialogParts.tsx
 import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { createElement } from "react";
 var DIALOG_LABELS = {
   close: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C",
   discardTitle: "\u041D\u0435 \u0441\u043E\u0445\u0440\u0430\u043D\u044F\u0442\u044C \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F?",
@@ -1725,25 +1734,55 @@ function DialogTitle({ className, ...rest }) {
   return /* @__PURE__ */ jsx9("h2", { id: titleId, className: cx(textRole_default.titleM, DialogParts_default.title, className), ...rest });
 }
 DialogTitle.displayName = "Dialog.Title";
-function DialogDescription({ className, ...rest }) {
+function DialogDescription({
+  loading = false,
+  className,
+  children,
+  ...rest
+}) {
   const { descriptionId, registerDescription } = useDialogShell("Description");
+  const swap = useSwapIn(loading ? "loading" : "data");
   React9.useLayoutEffect(() => {
     registerDescription(true);
     return () => registerDescription(false);
   }, [registerDescription]);
-  return /* @__PURE__ */ jsx9("p", { id: descriptionId, className: cx(textRole_default.bodyS, DialogParts_default.description, className), ...rest });
+  return /* @__PURE__ */ createElement(
+    "p",
+    {
+      ...rest,
+      key: swap.key,
+      id: descriptionId,
+      "aria-busy": loading || void 0,
+      className: cx(textRole_default.bodyS, DialogParts_default.description, swap.className, className)
+    },
+    loading ? /* @__PURE__ */ jsx9(Skeleton, { size: "xs", className: DialogParts_default.descriptionSkeleton }) : children
+  );
 }
 DialogDescription.displayName = "Dialog.Description";
+function placeHeaderActions(header) {
+  header.removeAttribute("data-actions-below");
+  if (!header.querySelector(`:scope > .${DialogParts_default.actions}`)) return;
+  if (header.scrollWidth > header.clientWidth + 1) header.setAttribute("data-actions-below", "");
+}
 function DialogHeader({
   showClose = true,
   className,
   children,
+  ref,
   ...rest
 }) {
   const { onClose, closeLabel, busy, hasDescription } = useDialogShell("Header");
+  const headerRef = React9.useRef(null);
+  const mergedRef = useMergedRefs(headerRef, ref);
+  const place = React9.useCallback(() => {
+    if (headerRef.current) placeHeaderActions(headerRef.current);
+  }, []);
+  React9.useLayoutEffect(place);
+  useResizeEffect(headerRef, place, { children: true });
   return /* @__PURE__ */ jsxs6(
     "header",
     {
+      ref: mergedRef,
       className: cx(hairline_default.bottom, DialogParts_default.header, className),
       "data-has-description": hasDescription ? "true" : void 0,
       ...rest,
@@ -1777,26 +1816,47 @@ function DialogBody({ className, ...rest }) {
   return /* @__PURE__ */ jsx9(ScrollContainer, { className: cx(DialogParts_default.body, className), ...rest });
 }
 DialogBody.displayName = "Dialog.Body";
+function flowOf(parent) {
+  const { display, rowGap } = getComputedStyle(parent);
+  const gapped = /flex|grid/.test(display) && Number.parseFloat(rowGap) > 0;
+  return gapped ? "gap" : "block";
+}
 function DialogSection({
   label,
   description,
   className,
   children,
+  ref,
   ...rest
 }) {
   useDialogShell("Section");
   const headingId = React9.useId();
+  const sectionRef = React9.useRef(null);
+  const mergedRef = useMergedRefs(sectionRef, ref);
+  React9.useLayoutEffect(() => {
+    const section = sectionRef.current;
+    if (section?.parentElement) section.dataset.flow = flowOf(section.parentElement);
+  });
   const { parts: actions, rest: content } = splitParts(children, DialogActions);
-  return /* @__PURE__ */ jsxs6("section", { "aria-labelledby": headingId, ...rest, className: cx(DialogParts_default.section, className), children: [
-    /* @__PURE__ */ jsxs6("div", { className: DialogParts_default.sectionHeader, children: [
-      /* @__PURE__ */ jsxs6("div", { className: DialogParts_default.sectionHeading, children: [
-        /* @__PURE__ */ jsx9("h3", { id: headingId, className: cx(textRole_default.titleS, DialogParts_default.sectionTitle), children: label }),
-        description ? /* @__PURE__ */ jsx9("p", { className: cx(textRole_default.bodyS, DialogParts_default.sectionDescription), children: description }) : null
-      ] }),
-      actions
-    ] }),
-    content
-  ] });
+  return /* @__PURE__ */ jsxs6(
+    "section",
+    {
+      "aria-labelledby": headingId,
+      ...rest,
+      ref: mergedRef,
+      className: cx(DialogParts_default.section, className),
+      children: [
+        /* @__PURE__ */ jsxs6("div", { className: DialogParts_default.sectionHeader, children: [
+          /* @__PURE__ */ jsxs6("div", { className: DialogParts_default.sectionHeading, children: [
+            /* @__PURE__ */ jsx9("h3", { id: headingId, className: cx(textRole_default.titleS, DialogParts_default.sectionTitle), children: label }),
+            description ? /* @__PURE__ */ jsx9("p", { className: cx(textRole_default.bodyS, DialogParts_default.sectionDescription), children: description }) : null
+          ] }),
+          actions
+        ] }),
+        content
+      ]
+    }
+  );
 }
 DialogSection.displayName = "Dialog.Section";
 function DialogFooter({ layout, className, children, ...rest }) {
@@ -3002,11 +3062,14 @@ function syncThumbColor(thumb, active) {
   else delete thumb.dataset.color;
 }
 function fitCollapse(viewport2, list) {
-  list.dataset.collapse = "full";
-  const fits = list.scrollWidth <= viewport2.clientWidth + 0.5;
+  const fits = (level2) => {
+    list.dataset.collapse = level2;
+    return list.scrollWidth <= viewport2.clientWidth + 0.5;
+  };
+  if (fits("full") || fits("compact")) return list.dataset.collapse;
   const items = list.querySelectorAll('[role="radio"]');
   const icons = list.querySelectorAll(`[role="radio"] > .${SegmentedControl_default.icon}`);
-  const level = fits || items.length === 0 || icons.length < items.length ? "full" : "icon";
+  const level = items.length > 0 && icons.length === items.length ? "icon" : "compact";
   list.dataset.collapse = level;
   return level;
 }
@@ -4118,7 +4181,7 @@ var Page_default = {
 
 // src/layout/page/Page.tsx
 import { Fragment as Fragment10, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
-import { createElement } from "react";
+import { createElement as createElement2 } from "react";
 var PAGE_LABELS = {
   menu: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043C\u0435\u043D\u044E",
   more: "\u0415\u0449\u0451 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F",
@@ -4499,7 +4562,7 @@ function PageDescription({ loading = false, className, children, ...rest }) {
     store?.set({ description: loading ? null : children });
   });
   React15.useLayoutEffect(() => () => store?.set({ description: null }), [store]);
-  return /* @__PURE__ */ createElement(
+  return /* @__PURE__ */ createElement2(
     "p",
     {
       ...rest,
@@ -4670,42 +4733,26 @@ function PageBody({ className, ...rest }) {
   return /* @__PURE__ */ jsx18("div", { ...rest, className: cx(Page_default.body, className) });
 }
 PageBody.displayName = "Page.Body";
-function PageSection({
-  label,
-  description,
-  layout = "stack",
-  className,
-  children,
-  ...rest
-}) {
+function PageSection({ label, description, className, children, ...rest }) {
   const headingId = React15.useId();
   const { parts: actions, rest: content } = splitParts(children, PageActions);
-  return /* @__PURE__ */ jsxs12(
-    "section",
-    {
-      "aria-labelledby": headingId,
-      ...rest,
-      className: cx(Page_default.section, className),
-      ...toDataAttributes({ layout: layout === "aside" ? "aside" : void 0 }),
-      children: [
-        /* @__PURE__ */ jsxs12(
-          "div",
-          {
-            className: Page_default.sectionHeader,
-            "data-has-actions": actions.length > 0 ? "true" : void 0,
-            children: [
-              /* @__PURE__ */ jsxs12("div", { className: Page_default.sectionHeading, children: [
-                /* @__PURE__ */ jsx18("h2", { id: headingId, className: cx(textRole_default.titleM, Page_default.sectionTitle), children: label }),
-                description ? /* @__PURE__ */ jsx18("p", { className: cx(textRole_default.bodyS, Page_default.sectionDescription), children: description }) : null
-              ] }),
-              actions
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx18("div", { className: Page_default.sectionContent, children: content })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs12("section", { "aria-labelledby": headingId, ...rest, className: cx(Page_default.section, className), children: [
+    /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        className: Page_default.sectionHeader,
+        "data-has-actions": actions.length > 0 ? "true" : void 0,
+        children: [
+          /* @__PURE__ */ jsxs12("div", { className: Page_default.sectionHeading, children: [
+            /* @__PURE__ */ jsx18("h2", { id: headingId, className: cx(textRole_default.titleM, Page_default.sectionTitle), children: label }),
+            description ? /* @__PURE__ */ jsx18("p", { className: cx(textRole_default.bodyS, Page_default.sectionDescription), children: description }) : null
+          ] }),
+          actions
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx18("div", { className: Page_default.sectionContent, children: content })
+  ] });
 }
 PageSection.displayName = "Page.Section";
 var pairRole = (node) => {
@@ -17833,9 +17880,9 @@ function ListItemCount({ color = "gray", className, ...rest }) {
   return /* @__PURE__ */ jsx49(Badge.Root, { ...rest, color, className: cx(List_default.count, className) });
 }
 ListItemCount.displayName = "List.ItemCount";
-function ListItemActions({ className, ...rest }) {
+function ListItemActions({ side = "end", className, ...rest }) {
   const size = useControlSize(void 0);
-  return /* @__PURE__ */ jsx49(ControlSizeProvider, { value: stepDown(size), children: /* @__PURE__ */ jsx49("div", { ...rest, className: cx(List_default.actions, className) }) });
+  return /* @__PURE__ */ jsx49(ControlSizeProvider, { value: stepDown(size), children: /* @__PURE__ */ jsx49("div", { ...rest, className: cx(List_default.actions, className), "data-side": side }) });
 }
 ListItemActions.displayName = "List.ItemActions";
 function spaced(nodes) {
@@ -17942,9 +17989,12 @@ function ListItem({
     element = /* @__PURE__ */ jsx49(InteractiveElement, { ...shared, element: "button", type: type ?? "button", children: splitItemChildren3(content) });
   }
   if (actions.length > 0) {
+    const leading = actions.filter((part) => part.props.side === "start");
+    const trailing = actions.filter((part) => part.props.side !== "start");
     element = /* @__PURE__ */ jsxs37("div", { className: List_default.frame, children: [
+      leading,
       element,
-      actions
+      trailing
     ] });
   }
   const rowClass = cx(List_default.row, entered && enterMotion_default.enter);
@@ -17960,8 +18010,8 @@ function ListItem({
       disabled,
       className: cx(rowClass, List_default.sortableRow),
       children: [
-        /* @__PURE__ */ jsx49("span", { className: cx(fieldTierClass, List_default.grip), "data-size": "xs", children: /* @__PURE__ */ jsx49(Dnd.Handle, { "aria-label": label.trim(), disabled }) }),
-        element
+        element,
+        /* @__PURE__ */ jsx49("span", { className: cx(fieldTierClass, List_default.grip), "data-size": "xs", children: /* @__PURE__ */ jsx49(Dnd.Handle, { "aria-label": label.trim(), disabled }) })
       ]
     }
   );
@@ -19108,6 +19158,7 @@ function DialogGuard({ busy = false, dirty = false }) {
     busy,
     dirty
   });
+  useUnloadGuard(busy || dirty);
   return /* @__PURE__ */ jsx53(
     ConfirmDialog.Root,
     {
@@ -21113,7 +21164,8 @@ function TextareaRoot({
   );
   const hasCommit = onCommit !== void 0;
   const commit = useFieldCommit(innerRef, onCommit);
-  const hasEdge = hasCommit || React64.Children.count(children) > 0;
+  const cellAction = useFieldCell()?.action;
+  const hasEdge = hasCommit || React64.Children.count(children) > 0 || Boolean(cellAction);
   const format5 = useTextFormatting({
     textareaRef: innerRef,
     enabled: formatting,
@@ -21221,7 +21273,8 @@ function TextareaRoot({
           /* @__PURE__ */ jsx58("div", { className: Textarea_default.body, children: body }),
           /* @__PURE__ */ jsxs44("div", { className: Textarea_default.edge, children: [
             hasCommit ? /* @__PURE__ */ jsx58(FieldCommitStatus, { state: commit.state, labels }) : null,
-            children
+            children,
+            cellAction
           ] })
         ] }) : body
       }
@@ -22616,39 +22669,26 @@ var Composer = {
 };
 
 // src/components/data-table/DataTable.tsx
-import * as React76 from "react";
-
-// src/components/data-table/ColumnsMenu.tsx
-import * as React68 from "react";
-
-// src/components/data-table/context.ts
-import * as React67 from "react";
-var DataTableColumnsContext = React67.createContext(
-  null
-);
+import * as React74 from "react";
 
 // src/components/data-table/ColumnsMenu.tsx
 import { jsx as jsx60, jsxs as jsxs46 } from "react/jsx-runtime";
-function DataTableColumnsMenu({ side, align, ...rest }) {
-  const context = React68.useContext(DataTableColumnsContext);
-  if (context === null) {
-    throw new Error("DataTable.ColumnsMenu must be rendered inside the DataTable toolbar");
-  }
-  const { columns, hidden, setHidden, labels, size } = context;
+function ColumnsMenu({ columns, hidden, setHidden, labels, size }) {
   const isShown = (column) => column.hideable === false || !hidden.has(column.id);
   const shown = columns.filter(isShown).length;
   const hiddenIds = columns.filter((column) => !isShown(column)).map((column) => column.id);
   const tier = stepDown(size);
+  const name = formatLabel(labels.columns, { shown, total: columns.length });
   const setShown = (id, visible) => {
     const next = [...hidden].filter((item) => item !== id);
     setHidden(visible ? next : [...next, id]);
   };
   return /* @__PURE__ */ jsxs46(Dropdown.Root, { children: [
-    /* @__PURE__ */ jsx60(Dropdown.Trigger, { children: /* @__PURE__ */ jsxs46(Button.Root, { ...rest, variant: "outline", tone: "neutral", size: tier, children: [
-      /* @__PURE__ */ jsx60(Button.Icon, { children: /* @__PURE__ */ jsx60(Icon, { name: "view.columns" }) }),
-      formatLabel(labels.columns, { shown, total: columns.length })
-    ] }) }),
-    /* @__PURE__ */ jsxs46(Dropdown.Content, { side, align, size: tier, children: [
+    /* @__PURE__ */ jsxs46(Tooltip.Root, { children: [
+      /* @__PURE__ */ jsx60(Tooltip.Trigger, { children: /* @__PURE__ */ jsx60(Dropdown.Trigger, { children: /* @__PURE__ */ jsx60(Button.Root, { variant: "ghost", tone: "neutral", size: tier, "aria-label": name, children: /* @__PURE__ */ jsx60(Button.Icon, { children: /* @__PURE__ */ jsx60(Icon, { name: "view.columns" }) }) }) }) }),
+      /* @__PURE__ */ jsx60(Tooltip.Content, { children: name })
+    ] }),
+    /* @__PURE__ */ jsxs46(Dropdown.Content, { side: "bottom", align: "end", size: tier, children: [
       columns.map((column) => {
         const visible = isShown(column);
         return /* @__PURE__ */ jsx60(
@@ -22667,7 +22707,6 @@ function DataTableColumnsMenu({ side, align, ...rest }) {
     ] })
   ] });
 }
-DataTableColumnsMenu.displayName = "DataTable.ColumnsMenu";
 
 // src/components/data-table/DataTable.module.css
 var DataTable_default = {
@@ -22697,6 +22736,8 @@ var DataTable_default = {
   detailContent: "DataTable_detailContent",
   detailRow: "DataTable_detailRow",
   firstColumnSticky: "DataTable_firstColumnSticky",
+  lastColumnSticky: "DataTable_lastColumnSticky",
+  menuCellSticky: "DataTable_menuCellSticky",
   stickyLead: "DataTable_stickyLead",
   rowLink: "DataTable_rowLink",
   cellLink: "DataTable_cellLink",
@@ -22704,6 +22745,8 @@ var DataTable_default = {
   groupRow: "DataTable_groupRow",
   groupContent: "DataTable_groupContent",
   groupLabel: "DataTable_groupLabel",
+  headMenu: "DataTable_headMenu",
+  menuCell: "DataTable_menuCell",
   cornerCellSticky: "DataTable_cornerCellSticky",
   skeletonRow: "DataTable_skeletonRow",
   skeleton: "DataTable_skeleton",
@@ -22858,10 +22901,10 @@ function Footer({ range, pagination, status }) {
 }
 
 // src/components/data-table/Head.tsx
-import * as React71 from "react";
+import * as React69 from "react";
 
 // src/components/data-table/Row.tsx
-import * as React70 from "react";
+import * as React68 from "react";
 
 // src/internal/rowLink.ts
 var ROW_CONTROLS = [
@@ -22914,19 +22957,19 @@ var rowLink_default = {
 };
 
 // src/components/data-table/reorder.tsx
-import * as React69 from "react";
+import * as React67 from "react";
 import { jsx as jsx63, jsxs as jsxs49 } from "react/jsx-runtime";
 function useRowReorder(options) {
   const { onReorder, expandEnabled, sorted, rows: rows2, orderedRows, offset, getRowKey, getRowGroup } = options;
   const enabled = onReorder !== void 0 && !expandEnabled;
-  const movedFrom = React69.useRef(null);
-  const keyOf2 = React69.useCallback(
+  const movedFrom = React67.useRef(null);
+  const keyOf2 = React67.useCallback(
     (row, index) => getRowKey ? getRowKey(row, index) : index,
     [getRowKey]
   );
-  const latest = React69.useRef({ onReorder, rows: rows2, orderedRows, offset, getRowGroup, keyOf: keyOf2 });
+  const latest = React67.useRef({ onReorder, rows: rows2, orderedRows, offset, getRowGroup, keyOf: keyOf2 });
   latest.current = { onReorder, rows: rows2, orderedRows, offset, getRowGroup, keyOf: keyOf2 };
-  const reorderIn = React69.useCallback((entries) => {
+  const reorderIn = React67.useCallback((entries) => {
     const keys = new Map(entries.map((entry) => [String(entry.item.key), entry.item.key]));
     return (id, beforeId) => {
       const current = latest.current;
@@ -22953,7 +22996,7 @@ function useRowReorder(options) {
       return outcome;
     };
   }, []);
-  const isOwnMove = React69.useCallback(
+  const isOwnMove = React67.useCallback(
     (previousRows, previous, next) => {
       if (movedFrom.current !== previousRows || previous.length !== next.length) return false;
       const set = new Set(previous);
@@ -22961,7 +23004,7 @@ function useRowReorder(options) {
     },
     []
   );
-  const shared = React69.useMemo(
+  const shared = React67.useMemo(
     () => enabled ? {
       locked: sorted,
       handleLabel: options.handleLabel,
@@ -22982,7 +23025,7 @@ function ReorderBody({
   header,
   className
 }) {
-  const getLabel = React69.useCallback(
+  const getLabel = React67.useCallback(
     (entry) => getRowLabel?.(entry.item.row) ?? String(entry.item.key),
     [getRowLabel]
   );
@@ -23320,12 +23363,14 @@ function DataTableRowImpl({
           ) }) : null,
           columns.map((column, columnIndex) => {
             const isFirstColumn = columnIndex === 0;
+            const isLastColumn = columnIndex === columns.length - 1;
             return /* @__PURE__ */ jsx64(
               "td",
               {
                 className: cx(
                   DataTable_default.cell,
                   shared.stickyFirstColumn && isFirstColumn && DataTable_default.firstColumnSticky,
+                  shared.stickyLastColumn && isLastColumn && DataTable_default.lastColumnSticky,
                   enter
                 ),
                 style: columnSizeStyle(column),
@@ -23355,7 +23400,31 @@ function DataTableRowImpl({
               },
               column.id
             );
-          })
+          }),
+          shared.menuCell ? /* @__PURE__ */ jsx64(
+            "td",
+            {
+              className: cx(
+                DataTable_default.cell,
+                DataTable_default.menuCell,
+                shared.stickyLastColumn && DataTable_default.menuCellSticky,
+                enter
+              ),
+              children: href === void 0 ? null : (
+                // biome-ignore lint/a11y/useAnchorContent: a pointer-only duplicate of the key cell's named link, hidden from AT and Tab
+                /* @__PURE__ */ jsx64(
+                  "a",
+                  {
+                    href,
+                    tabIndex: -1,
+                    "aria-hidden": "true",
+                    className: DataTable_default.cellLink,
+                    "data-row-link": ""
+                  }
+                )
+              )
+            }
+          ) : null
         ]
       }
     ),
@@ -23379,7 +23448,7 @@ function DataTableRowImpl({
     ) : null
   ] });
 }
-var DataTableRow = React70.memo(DataTableRowImpl);
+var DataTableRow = React68.memo(DataTableRowImpl);
 function GroupRow({ totalColumns, sticky, size, toggle, children }) {
   return /* @__PURE__ */ jsx64("tr", { className: DataTable_default.groupRow, "data-collapsed": toggle?.collapsed ? "true" : void 0, children: /* @__PURE__ */ jsx64(
     "th",
@@ -23412,7 +23481,8 @@ function MeasureBody({
   columns,
   selectable,
   expandEnabled,
-  reorderable
+  reorderable,
+  menuCell
 }) {
   return /* @__PURE__ */ jsx64("tbody", { className: DataTable_default.measureBody, "aria-hidden": "true", inert: true, children: rows2.map(({ row, key, depth }) => /* @__PURE__ */ jsxs50(
     "tr",
@@ -23435,7 +23505,8 @@ function MeasureBody({
             children: renderCell(row, column, false)
           },
           column.id
-        ))
+        )),
+        menuCell ? /* @__PURE__ */ jsx64("td", { className: cx(DataTable_default.cell, DataTable_default.menuCell) }) : null
       ]
     },
     String(key)
@@ -23443,7 +23514,7 @@ function MeasureBody({
 }
 
 // src/components/data-table/Head.tsx
-import { jsx as jsx65, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx65, jsxs as jsxs51 } from "react/jsx-runtime";
 var ARIA_SORT = { asc: "ascending", desc: "descending" };
 var SORT_ICON = { asc: "sort.ascending", desc: "sort.descending" };
 function Head({
@@ -23452,14 +23523,17 @@ function Head({
   sort,
   onSort,
   stickyFirstColumn,
+  stickyLastColumn,
   stickyHeader,
   stickyCorner,
   expandEnabled,
   infoLabel,
   reorderable = false,
+  columnsMenu,
+  menuCell,
   selectAll
 }) {
-  const idPrefix = React71.useId();
+  const idPrefix = React69.useId();
   const lead = cx(
     DataTable_default.headCell,
     stickyHeader && stickySurfaceClass,
@@ -23483,9 +23557,11 @@ function Head({
     columns.map((column, columnIndex) => {
       const order = column.sortable && sort?.columnId === column.id ? sort.order : null;
       const isFirstColumn = columnIndex === 0;
+      const isLastColumn = columnIndex === columns.length - 1;
       const described = column.description !== void 0 && !column.hideHeader;
       const descriptionId = `${idPrefix}-${columnIndex}-description`;
-      const labelId = described && !column.sortable ? `${idPrefix}-${columnIndex}-label` : void 0;
+      const menuHere = columnsMenu != null && !menuCell && isLastColumn && column.hideHeader === true;
+      const labelId = described && !column.sortable || menuHere ? `${idPrefix}-${columnIndex}-label` : void 0;
       const info = described ? /* @__PURE__ */ jsx65(
         Icon,
         {
@@ -23502,7 +23578,9 @@ function Head({
             DataTable_default.headCell,
             stickyHeader && stickySurfaceClass,
             stickyFirstColumn && isFirstColumn && DataTable_default.firstColumnSticky,
-            stickyCorner && isFirstColumn && DataTable_default.cornerCellSticky
+            stickyCorner && isFirstColumn && DataTable_default.cornerCellSticky,
+            stickyLastColumn && isLastColumn && DataTable_default.lastColumnSticky,
+            stickyHeader && stickyLastColumn && isLastColumn && DataTable_default.cornerCellSticky
           ),
           style: columnSizeStyle(column),
           "data-align": column.headerAlign ?? "start",
@@ -23527,7 +23605,10 @@ function Head({
                   strokeWidth: 2
                 }
               )
-            ] }) }) : column.hideHeader ? /* @__PURE__ */ jsx65(VisuallyHidden, { children: column.header }) : /* @__PURE__ */ jsxs51("span", { className: DataTable_default.headTitle, children: [
+            ] }) }) : column.hideHeader ? /* @__PURE__ */ jsxs51(Fragment33, { children: [
+              /* @__PURE__ */ jsx65(VisuallyHidden, { id: labelId, children: column.header }),
+              menuHere ? /* @__PURE__ */ jsx65("span", { className: DataTable_default.headMenu, children: columnsMenu }) : null
+            ] }) : /* @__PURE__ */ jsxs51("span", { className: DataTable_default.headTitle, children: [
               /* @__PURE__ */ jsx65("span", { id: labelId, className: DataTable_default.headLabel, children: column.header }),
               info ? /* @__PURE__ */ jsx65(WithDescription, { description: column.description, children: info }) : null
             ] }),
@@ -23536,7 +23617,20 @@ function Head({
         },
         column.id
       );
-    })
+    }),
+    menuCell && columnsMenu != null ? /* @__PURE__ */ jsx65(
+      "td",
+      {
+        className: cx(
+          DataTable_default.headCell,
+          DataTable_default.menuCell,
+          stickyHeader && stickySurfaceClass,
+          stickyLastColumn && DataTable_default.menuCellSticky,
+          stickyHeader && stickyLastColumn && DataTable_default.cornerCellSticky
+        ),
+        children: /* @__PURE__ */ jsx65("span", { className: DataTable_default.headMenu, children: columnsMenu })
+      }
+    ) : null
   ] }) });
 }
 function WithDescription({
@@ -23560,6 +23654,7 @@ function StateRows({
   selectable,
   expandEnabled,
   reorderable = false,
+  menuCell,
   loadError,
   empty,
   emptyLabel,
@@ -23586,7 +23681,8 @@ function StateRows({
           children: /* @__PURE__ */ jsx66(Skeleton, { className: DataTable_default.skeleton })
         },
         column.id
-      ))
+      )),
+      menuCell ? /* @__PURE__ */ jsx66("td", { className: cx(DataTable_default.cell, DataTable_default.menuCell) }) : null
     ] }, rowIndex)
   ));
 }
@@ -23602,9 +23698,9 @@ function rowsChange(previous, next) {
 }
 
 // src/components/data-table/useColumnHover.ts
-import * as React72 from "react";
+import * as React70 from "react";
 function useColumnHover(enabled) {
-  return React72.useMemo(() => {
+  return React70.useMemo(() => {
     if (!enabled) return void 0;
     let current = null;
     let painted = [];
@@ -23630,7 +23726,7 @@ function useColumnHover(enabled) {
 }
 
 // src/components/data-table/useFrozenColumns.ts
-import * as React73 from "react";
+import * as React71 from "react";
 var RESIZE_SETTLE_MS = 120;
 var colsOf = (table) => [
   ...table.querySelectorAll(":scope > colgroup > col")
@@ -23698,12 +23794,12 @@ function apply(table, frozen, { cols, measured, minimums }) {
   frozen.widths = next;
 }
 function useFrozenColumns(tableRef, rootRef, columnsKey, rowsKey, ready) {
-  const frozen = React73.useRef({
+  const frozen = React71.useRef({
     widths: null,
     columnsKey,
     rowsKey: void 0
   });
-  React73.useEffect(() => {
+  React71.useEffect(() => {
     const root = rootRef.current;
     if (!root || typeof ResizeObserver === "undefined") return;
     let lastWidth = root.getBoundingClientRect().width;
@@ -23724,7 +23820,7 @@ function useFrozenColumns(tableRef, rootRef, columnsKey, rowsKey, ready) {
       observer2.disconnect();
     };
   }, [rootRef, tableRef]);
-  React73.useLayoutEffect(() => {
+  React71.useLayoutEffect(() => {
     const table = tableRef.current;
     if (!table) return;
     if (frozen.current.columnsKey !== columnsKey) {
@@ -23749,7 +23845,7 @@ function useFrozenColumns(tableRef, rootRef, columnsKey, rowsKey, ready) {
 }
 
 // src/components/data-table/useInfiniteRows.ts
-import * as React74 from "react";
+import * as React72 from "react";
 var INFINITE_ROOT_MARGIN = "0px 0px 120px 0px";
 function useInfiniteRows({
   enabled,
@@ -23761,9 +23857,9 @@ function useInfiniteRows({
   onLoadMore,
   scrollRef
 }) {
-  const [revealed, setRevealed] = React74.useState(pageSize);
-  const [pending, setPending] = React74.useState(false);
-  const [failedAt, setFailedAt] = React74.useState(null);
+  const [revealed, setRevealed] = React72.useState(pageSize);
+  const [pending, setPending] = React72.useState(false);
+  const [failedAt, setFailedAt] = React72.useState(null);
   const visibleCount = Math.min(Math.max(revealed, pageSize), Math.max(pageSize, totalRows));
   const hasInternalMore = enabled && visibleCount < totalRows;
   const canRequestMore = enabled && Boolean(onLoadMore) && hasMore && !loadingMore && !pending && failedAt !== totalRows;
@@ -23800,7 +23896,7 @@ function useInfiniteRows({
 }
 
 // src/components/data-table/useRowSelection.ts
-import * as React75 from "react";
+import * as React73 from "react";
 var hitCell = (element) => {
   const cell = element.closest("[data-select-index]");
   if (!cell) return null;
@@ -23821,9 +23917,9 @@ function useRowSelection({
     defaultValue: defaultSelected,
     onChange: onSelectedChange
   });
-  const selectedSet = React75.useMemo(() => new Set(selectedKeys), [selectedKeys]);
-  const [announcement, setAnnouncement] = React75.useState("");
-  const current = React75.useRef(selectedSet);
+  const selectedSet = React73.useMemo(() => new Set(selectedKeys), [selectedKeys]);
+  const [announcement, setAnnouncement] = React73.useState("");
+  const current = React73.useRef(selectedSet);
   current.current = selectedSet;
   const commit = (next) => {
     current.current = next;
@@ -23845,7 +23941,7 @@ function useRowSelection({
     hit: hitCell,
     autoScroll: true
   });
-  const handlers = React75.useMemo(
+  const handlers = React73.useMemo(
     () => ({
       onPointerDown(index, event) {
         if (event.button !== 0 || event.pointerType === "touch") return;
@@ -23914,7 +24010,7 @@ var VIRTUAL_FROM2 = 100;
 var ONE_GROUP2 = () => 0;
 var domIdPart = (key) => String(key).replace(/[^A-Za-z0-9_-]/g, "_");
 function useSameRows(flat) {
-  const ref = React76.useRef(flat);
+  const ref = React74.useRef(flat);
   const previous = ref.current;
   if (previous !== flat && (previous.rows.length !== flat.rows.length || previous.measure.length !== flat.measure.length || flat.rows.some((item, index) => {
     const before = previous.rows[index];
@@ -23929,6 +24025,7 @@ function DataTable({
   hiddenColumns,
   defaultHiddenColumns = EMPTY_IDS2,
   onHiddenColumnsChange,
+  columnsMenu = false,
   rows: rows2,
   source = "client",
   rowCount,
@@ -23937,6 +24034,7 @@ function DataTable({
   showHeader = true,
   stickyHeader = false,
   stickyFirstColumn = false,
+  stickyLastColumn = false,
   getRowKey,
   getRowHref,
   onRowClick,
@@ -23994,9 +24092,9 @@ function DataTable({
   const paged = paging === "pages";
   const server = source === "server";
   const safePageSize = Math.max(1, pageSize);
-  const scrollRef = React76.useRef(null);
-  const tableRef = React76.useRef(null);
-  const rootRef = React76.useRef(null);
+  const scrollRef = React74.useRef(null);
+  const tableRef = React74.useRef(null);
+  const rootRef = React74.useRef(null);
   const mergedRootRef = useMergedRefs(rootRef, ref);
   const depth = useNestedSurfaceDepth();
   const [hiddenIds, setHiddenIds] = useControllableState({
@@ -24004,8 +24102,8 @@ function DataTable({
     defaultValue: defaultHiddenColumns,
     onChange: onHiddenColumnsChange
   });
-  const hiddenSet = React76.useMemo(() => new Set(hiddenIds), [hiddenIds]);
-  const columns = React76.useMemo(() => {
+  const hiddenSet = React74.useMemo(() => new Set(hiddenIds), [hiddenIds]);
+  const columns = React74.useMemo(() => {
     if (hiddenSet.size === 0) return allColumns;
     return allColumns.filter((column) => column.hideable === false || !hiddenSet.has(column.id));
   }, [allColumns, hiddenSet]);
@@ -24023,7 +24121,7 @@ function DataTable({
   const sortColumn = sortState ? allColumns.find((column) => column.sortable && column.id === sortState.columnId) : void 0;
   const sortOrder = sortColumn ? sortState?.order : void 0;
   const localSort = server ? void 0 : sortColumn;
-  const { sortedRows, groups } = React76.useMemo(() => {
+  const { sortedRows, groups } = React74.useMemo(() => {
     const sorted = localSort && sortOrder ? sortRows(rows2, localSort, sortOrder) : rows2;
     if (!getRowGroup) return { sortedRows: sorted, groups: null };
     const grouped = groupRows(rows2, sorted, getRowGroup);
@@ -24066,7 +24164,7 @@ function DataTable({
     handleLabel: labels.reorderRow,
     lockedHint: labels.reorderSorted
   });
-  const [rowArrival, setRowArrival] = React76.useState(() => ({ rows: rows2, added: /* @__PURE__ */ new Set(), batch: 0 }));
+  const [rowArrival, setRowArrival] = React74.useState(() => ({ rows: rows2, added: /* @__PURE__ */ new Set(), batch: 0 }));
   if (rowArrival.rows !== rows2) {
     let added = rowArrival.added;
     let batch = rowArrival.batch;
@@ -24087,7 +24185,7 @@ function DataTable({
     }
     setRowArrival({ rows: rows2, added, batch });
   }
-  React76.useEffect(() => {
+  React74.useEffect(() => {
     if (rowArrival.batch > 0 && scrollRef.current) scrollRef.current.scrollTop = 0;
   }, [rowArrival.batch]);
   const expandEnabled = Boolean(getRowChildren || renderExpanded);
@@ -24096,12 +24194,12 @@ function DataTable({
     defaultValue: defaultExpanded,
     onChange: onExpandedChange
   });
-  const expandedSet = React76.useMemo(() => new Set(expandedKeys), [expandedKeys]);
-  const [lastExpandedKey, setLastExpandedKey] = React76.useState(null);
-  const expansion = React76.useRef({ expandedKeys, setExpandedKeys });
+  const expandedSet = React74.useMemo(() => new Set(expandedKeys), [expandedKeys]);
+  const [lastExpandedKey, setLastExpandedKey] = React74.useState(null);
+  const expansion = React74.useRef({ expandedKeys, setExpandedKeys });
   expansion.current = { expandedKeys, setExpandedKeys };
-  const [closingKeys, setClosingKeys] = React76.useState(NO_KEYS);
-  const toggleExpanded = React76.useCallback((key) => {
+  const [closingKeys, setClosingKeys] = React74.useState(NO_KEYS);
+  const toggleExpanded = React74.useCallback((key) => {
     const { expandedKeys: keys, setExpandedKeys: setKeys } = expansion.current;
     const isOpen = keys.includes(key);
     setLastExpandedKey(isOpen ? null : key);
@@ -24130,11 +24228,11 @@ function DataTable({
     defaultValue: defaultCollapsedGroups ?? EMPTY_GROUPS,
     onChange: onCollapsedGroupsChange
   });
-  const collapsedSet = React76.useMemo(
+  const collapsedSet = React74.useMemo(
     () => foldGroups ? new Set(collapsedKeys) : NO_GROUPS,
     [foldGroups, collapsedKeys]
   );
-  const [groupFold, setGroupFold] = React76.useState(() => ({
+  const [groupFold, setGroupFold] = React74.useState(() => ({
     collapsed: collapsedSet,
     closing: NO_GROUPS,
     opened: null
@@ -24150,7 +24248,7 @@ function DataTable({
     }
     setGroupFold({ collapsed: collapsedSet, closing: closing.size ? closing : NO_GROUPS, opened });
   }
-  React76.useEffect(() => {
+  React74.useEffect(() => {
     if (groupFold.closing.size === 0 && groupFold.opened === null) return;
     const timer = window.setTimeout(
       () => setGroupFold((state) => ({ ...state, closing: NO_GROUPS, opened: null })),
@@ -24158,13 +24256,13 @@ function DataTable({
     );
     return () => window.clearTimeout(timer);
   }, [groupFold.closing, groupFold.opened]);
-  const toggleGroup = React76.useCallback(
+  const toggleGroup = React74.useCallback(
     (key) => setCollapsedKeys(
       (keys) => keys.includes(key) ? keys.filter((k) => k !== key) : [...keys, key]
     ),
     [setCollapsedKeys]
   );
-  const flat = React76.useMemo(
+  const flat = React74.useMemo(
     () => flatten(sortedRows, {
       start: pageOffset2,
       end,
@@ -24209,7 +24307,7 @@ function DataTable({
       selectable
     ]
   );
-  const visibleKeys = React76.useMemo(() => flat.rows.map((item) => item.key), [flat]);
+  const visibleKeys = React74.useMemo(() => flat.rows.map((item) => item.key), [flat]);
   const selection = useRowSelection({
     selected,
     defaultSelected,
@@ -24224,29 +24322,31 @@ function DataTable({
   const showEmpty = !hasError && !loading && displayedCount === 0;
   const bodyState = hasError ? "error" : showSkeleton ? "loading" : showEmpty ? "empty" : "rows";
   const { key: bodyKey, className: swapClass } = useSwapIn(`${bodyState}-${rowArrival.batch}`);
-  const totalColumns = columns.length + (reorder.enabled ? 1 : 0) + (selectable ? 1 : 0) + (expandEnabled ? 1 : 0);
+  const menuInHead = columnsMenu && showHeader;
+  const menuCell = menuInHead && columns.at(-1)?.hideHeader !== true;
+  const totalColumns = columns.length + (reorder.enabled ? 1 : 0) + (selectable ? 1 : 0) + (expandEnabled ? 1 : 0) + (menuCell ? 1 : 0);
   const fillHeight = scrollHeight === "fill";
   const maxHeight = fillHeight ? void 0 : scrollHeight ?? (infinite ? INFINITE_SCROLL_HEIGHT : void 0);
   const columnHover = useColumnHover(highlightColumnOnHover);
   const flatRows = flat.rows;
   const virtualized = bodyState === "rows" && flatRows.length > VIRTUAL_FROM2 && (fillHeight || maxHeight !== void 0) && !groups && !reorder.enabled && !renderExpanded;
   const headRows = showHeader ? 1 : 0;
-  const [focusedKey, setFocusedKey] = React76.useState(null);
-  const pinnedRows = React76.useMemo(() => {
+  const [focusedKey, setFocusedKey] = React74.useState(null);
+  const pinnedRows = React74.useMemo(() => {
     if (focusedKey === null) return void 0;
     const index = flatRows.findIndex((item) => item.key === focusedKey);
     return index >= 0 ? [index] : void 0;
   }, [flatRows, focusedKey]);
-  const getVirtualKey = React76.useCallback(
+  const getVirtualKey = React74.useCallback(
     (index) => flatRows[index]?.key ?? index,
     [flatRows]
   );
-  const rowEstimate = React76.useMemo(
+  const rowEstimate = React74.useMemo(
     () => readCssLengthPx(`--prime-table-row-height-${size}`, 44),
     [size]
   );
-  const estimateRow = React76.useCallback(() => rowEstimate, [rowEstimate]);
-  const headOffset = React76.useCallback(() => tableRef.current?.tHead?.offsetHeight ?? 0, []);
+  const estimateRow = React74.useCallback(() => rowEstimate, [rowEstimate]);
+  const headOffset = React74.useCallback(() => tableRef.current?.tHead?.offsetHeight ?? 0, []);
   const virtual = useVirtualRows({
     count: virtualized ? flatRows.length : 0,
     scrollRef,
@@ -24269,7 +24369,7 @@ function DataTable({
   const sameRows = useSameRows(flat);
   const firstRendered = virtual.rows[0]?.index;
   const lastRendered = virtual.rows.at(-1)?.index;
-  const renderedRows = React76.useMemo(
+  const renderedRows = React74.useMemo(
     () => ({ rows: sameRows, first: firstRendered, last: lastRendered }),
     [sameRows, firstRendered, lastRendered]
   );
@@ -24280,24 +24380,24 @@ function DataTable({
     renderedRows,
     bodyState === "rows"
   );
-  const baseId = React76.useId();
-  const rowDomId = React76.useCallback(
+  const baseId = React74.useId();
+  const rowDomId = React74.useCallback(
     (key) => `${baseId}-row-${domIdPart(key)}`,
     [baseId]
   );
-  const detailDomId = React76.useCallback(
+  const detailDomId = React74.useCallback(
     (key) => `${baseId}-detail-${domIdPart(key)}`,
     [baseId]
   );
-  const domains = React76.useMemo(() => scaleDomains(rows2, columns), [rows2, columns]);
-  const rowClickRef = React76.useRef(onRowClick);
+  const domains = React74.useMemo(() => scaleDomains(rows2, columns), [rows2, columns]);
+  const rowClickRef = React74.useRef(onRowClick);
   rowClickRef.current = onRowClick;
   const hasRowClick = onRowClick !== void 0;
-  const openRow = React76.useMemo(
+  const openRow = React74.useMemo(
     () => hasRowClick ? (row, index, event) => rowClickRef.current?.(row, index, event) : null,
     [hasRowClick]
   );
-  const shared = React76.useMemo(
+  const shared = React74.useMemo(
     () => ({
       columns,
       size,
@@ -24305,6 +24405,8 @@ function DataTable({
       selectable,
       expandEnabled,
       stickyFirstColumn,
+      stickyLastColumn,
+      menuCell,
       striped,
       totalColumns,
       openRow,
@@ -24325,6 +24427,8 @@ function DataTable({
       selectable,
       expandEnabled,
       stickyFirstColumn,
+      stickyLastColumn,
+      menuCell,
       striped,
       totalColumns,
       openRow,
@@ -24337,16 +24441,16 @@ function DataTable({
   );
   const showRange = bodyState === "rows" && (infinite || paged && totalPages > 1);
   const showInfiniteStatus = !hasError && infinite && (infiniteRows.hasInternalMore || infiniteRows.loading || infiniteRows.canRequestMore);
-  const columnsMenu = React76.useMemo(
-    () => ({
+  const columnsMenuTrigger = menuInHead ? /* @__PURE__ */ jsx67(
+    ColumnsMenu,
+    {
       columns: allColumns,
       hidden: hiddenSet,
       setHidden: setHiddenIds,
       labels,
       size
-    }),
-    [allColumns, hiddenSet, setHiddenIds, labels, size]
-  );
+    }
+  ) : null;
   const rowOpens = Boolean(getRowHref || onRowClick);
   const renderRow = (item, index, inWindow = false) => {
     const opens = rowOpens && (isRowClickable?.(item.row) ?? true);
@@ -24430,6 +24534,8 @@ function DataTable({
           "column-dividers": columnDividers ? void 0 : "false",
           "sticky-header": stickyHeader,
           "sticky-first-column": stickyFirstColumn,
+          "sticky-last-column": stickyLastColumn,
+          "menu-cell": menuCell || void 0,
           "table-width": columns.some((c) => c.grow) ? "grow" : fullWidth ? "fill" : "auto",
           "highlight-row": highlightRowOnHover,
           "highlight-column": highlightColumnOnHover,
@@ -24444,7 +24550,7 @@ function DataTable({
           "scroll-height": fillHeight ? "fill" : void 0
         }),
         children: [
-          toolbar != null ? /* @__PURE__ */ jsx67(DataTableColumnsContext, { value: columnsMenu, children: /* @__PURE__ */ jsx67("div", { className: DataTable_default.toolbar, children: toolbar }) }) : null,
+          toolbar != null ? /* @__PURE__ */ jsx67("div", { className: DataTable_default.toolbar, children: toolbar }) : null,
           /* @__PURE__ */ jsx67("div", { className: cx(fieldTierClass, DataTable_default.frame), "data-size": compactTier(size), children: /* @__PURE__ */ jsxs53(
             ScrollContainer,
             {
@@ -24470,7 +24576,8 @@ function DataTable({
                         reorder.enabled ? /* @__PURE__ */ jsx67("col", {}) : null,
                         selectable ? /* @__PURE__ */ jsx67("col", {}) : null,
                         expandEnabled ? /* @__PURE__ */ jsx67("col", {}) : null,
-                        columns.map((column) => /* @__PURE__ */ jsx67("col", { "data-grow": column.grow ? "true" : void 0 }, column.id))
+                        columns.map((column) => /* @__PURE__ */ jsx67("col", { "data-grow": column.grow ? "true" : void 0 }, column.id)),
+                        menuCell ? /* @__PURE__ */ jsx67("col", {}) : null
                       ] }),
                       showHeader ? /* @__PURE__ */ jsx67(
                         Head,
@@ -24480,11 +24587,14 @@ function DataTable({
                           sort: sortState,
                           onSort: handleSort,
                           stickyFirstColumn,
+                          stickyLastColumn,
                           stickyHeader,
                           stickyCorner: stickyHeader && stickyFirstColumn,
                           expandEnabled,
                           infoLabel: labels.columnInfo,
                           reorderable: reorder.enabled,
+                          columnsMenu: columnsMenuTrigger,
+                          menuCell,
                           selectAll: selectable ? {
                             checked: selection.allSelected,
                             indeterminate: selection.someSelected,
@@ -24494,7 +24604,7 @@ function DataTable({
                           } : void 0
                         }
                       ) : null,
-                      reorder.enabled && bodyState === "rows" ? /* @__PURE__ */ jsx67(React76.Fragment, { children: segments.map((segment) => /* @__PURE__ */ jsx67(
+                      reorder.enabled && bodyState === "rows" ? /* @__PURE__ */ jsx67(React74.Fragment, { children: segments.map((segment) => /* @__PURE__ */ jsx67(
                         ReorderBody,
                         {
                           entries: segment.rows,
@@ -24507,7 +24617,7 @@ function DataTable({
                           className: swapClass
                         },
                         `group-${String(segment.key)}`
-                      )) }, bodyKey) : groups && bodyState === "rows" ? /* @__PURE__ */ jsx67(React76.Fragment, { children: segments.map((segment) => /* @__PURE__ */ jsxs53("tbody", { className: swapClass, children: [
+                      )) }, bodyKey) : groups && bodyState === "rows" ? /* @__PURE__ */ jsx67(React74.Fragment, { children: segments.map((segment) => /* @__PURE__ */ jsxs53("tbody", { className: swapClass, children: [
                         groupHeader(segment),
                         segment.rows.map(({ item, index }) => renderRow(item, index))
                       ] }, `group-${String(segment.key)}`)) }, bodyKey) : /* @__PURE__ */ jsx67("tbody", { className: swapClass, ...trackFocus, children: bodyState === "rows" ? virtualized ? renderWindow() : flat.rows.map((item, index) => renderRow(item, index)) : /* @__PURE__ */ jsx67(
@@ -24520,6 +24630,7 @@ function DataTable({
                           selectable,
                           expandEnabled,
                           reorderable: reorder.enabled,
+                          menuCell,
                           loadError,
                           empty,
                           emptyLabel: labels.empty,
@@ -24536,7 +24647,8 @@ function DataTable({
                           columns,
                           selectable,
                           expandEnabled,
-                          reorderable: reorder.enabled
+                          reorderable: reorder.enabled,
+                          menuCell
                         }
                       ) : null
                     ]
@@ -24572,10 +24684,9 @@ function DataTable({
     )
   ) }) });
 }
-DataTable.ColumnsMenu = DataTableColumnsMenu;
 
 // src/components/description-list/DescriptionList.tsx
-import * as React77 from "react";
+import * as React75 from "react";
 
 // src/components/description-list/DescriptionList.module.css
 var DescriptionList_default = {
@@ -24588,12 +24699,12 @@ var DescriptionList_default = {
 };
 
 // src/components/description-list/DescriptionList.tsx
-import { Fragment as Fragment34, jsx as jsx68, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment35, jsx as jsx68, jsxs as jsxs54 } from "react/jsx-runtime";
 var DESCRIPTION_LIST_LABELS = {
   empty: "\u2014",
   emptyText: "\u041D\u0435 \u0443\u043A\u0430\u0437\u0430\u043D\u043E"
 };
-var DescriptionListContext = React77.createContext({
+var DescriptionListContext = React75.createContext({
   size: "m",
   labels: DESCRIPTION_LIST_LABELS
 });
@@ -24621,17 +24732,17 @@ function DescriptionListRoot({
 DescriptionListRoot.displayName = "DescriptionList.Root";
 var isEmptyValue = (node) => node === null || node === void 0 || node === false || node === "";
 function DescriptionListItem({ label, children, className, ...rest }) {
-  const { labels } = React77.useContext(DescriptionListContext);
-  const parts = React77.Children.toArray(children);
+  const { labels } = React75.useContext(DescriptionListContext);
+  const parts = React75.Children.toArray(children);
   const action = parts.find(
-    (child) => React77.isValidElement(child) && child.type === DescriptionListItemAction
+    (child) => React75.isValidElement(child) && child.type === DescriptionListItemAction
   );
   const value = parts.filter((child) => child !== action);
   const empty = value.length === 0 || value.every(isEmptyValue);
   return /* @__PURE__ */ jsxs54("div", { ...rest, className: cx(DescriptionList_default.item, className), children: [
     /* @__PURE__ */ jsx68("dt", { className: DescriptionList_default.label, children: label }),
     /* @__PURE__ */ jsxs54("dd", { className: DescriptionList_default.value, "data-empty": empty || void 0, children: [
-      /* @__PURE__ */ jsx68("span", { className: DescriptionList_default.text, children: empty ? /* @__PURE__ */ jsxs54(Fragment34, { children: [
+      /* @__PURE__ */ jsx68("span", { className: DescriptionList_default.text, children: empty ? /* @__PURE__ */ jsxs54(Fragment35, { children: [
         /* @__PURE__ */ jsx68("span", { "aria-hidden": "true", children: labels.empty }),
         /* @__PURE__ */ jsx68(VisuallyHidden, { children: labels.emptyText })
       ] }) : value }),
@@ -24641,7 +24752,7 @@ function DescriptionListItem({ label, children, className, ...rest }) {
 }
 DescriptionListItem.displayName = "DescriptionList.Item";
 function DescriptionListItemAction({ label, children, ...rest }) {
-  const { size } = React77.useContext(DescriptionListContext);
+  const { size } = React75.useContext(DescriptionListContext);
   return /* @__PURE__ */ jsx68(RowAction, { ...rest, label, size, children });
 }
 DescriptionListItemAction.displayName = "DescriptionList.ItemAction";
@@ -24652,7 +24763,7 @@ var DescriptionList = {
 };
 
 // src/components/digit-input/DigitInput.tsx
-import * as React78 from "react";
+import * as React76 from "react";
 
 // src/components/digit-input/DigitInput.module.css
 var DigitInput_default = {
@@ -24707,8 +24818,8 @@ function DigitInput({
   const size = tier.size;
   const disabled = useInheritedDisabled(disabledProp);
   const labels = useLabels(DIGIT_INPUT_LABELS, labelsProp);
-  const [verification, setVerification] = React78.useState(null);
-  const attemptRef = React78.useRef(0);
+  const [verification, setVerification] = React76.useState(null);
+  const attemptRef = React76.useRef(0);
   const verifying = verification?.state === "pending";
   const shownError = error ?? (verification?.state === "refused" ? verification.reason : void 0);
   const shownSuccess = success || verification?.state === "accepted";
@@ -24748,18 +24859,18 @@ function DigitInput({
     if (next.length === length && !wasComplete) check(next);
   };
   const cells = Array.from({ length }, (_, index) => value[index] ?? "");
-  const inputRefs = React78.useRef([]);
-  const pendingFocusRef = React78.useRef(null);
-  React78.useLayoutEffect(() => {
+  const inputRefs = React76.useRef([]);
+  const pendingFocusRef = React76.useRef(null);
+  React76.useLayoutEffect(() => {
     const index = pendingFocusRef.current;
     if (index === null) return;
     pendingFocusRef.current = null;
     inputRefs.current[index]?.focus();
   });
-  const [focusIndex, setFocusIndex] = React78.useState(null);
-  const ringRef = React78.useRef(null);
-  const ringShown = React78.useRef(false);
-  React78.useLayoutEffect(() => {
+  const [focusIndex, setFocusIndex] = React76.useState(null);
+  const ringRef = React76.useRef(null);
+  const ringShown = React76.useRef(false);
+  React76.useLayoutEffect(() => {
     const ring = ringRef.current;
     const cell = focusIndex === null ? null : inputRefs.current[focusIndex];
     if (!ring) return;
@@ -24980,7 +25091,7 @@ var Drawer = {
 };
 
 // src/components/example-frame/ExampleFrame.tsx
-import * as React79 from "react";
+import * as React77 from "react";
 
 // src/theme/applyTheme.ts
 var THEME_SWITCHING_ATTRIBUTE = "data-theme-switching";
@@ -25036,8 +25147,8 @@ var stretchOf = (child) => {
   return holdsStretch(child) ? "full" : null;
 };
 function usePreviewFacts(stageRef, layout, active) {
-  const gridWidth = React79.useRef(0);
-  const fitMatrix = React79.useCallback(
+  const gridWidth = React77.useRef(0);
+  const fitMatrix = React77.useCallback(
     (stage, remeasure) => {
       if (layout !== "matrix") {
         stage.removeAttribute("data-matrix-wrap");
@@ -25061,7 +25172,7 @@ function usePreviewFacts(stageRef, layout, active) {
     },
     { enabled: active && layout === "matrix" }
   );
-  React79.useLayoutEffect(() => {
+  React77.useLayoutEffect(() => {
     const stage = stageRef.current;
     if (!active || !stage) return;
     const read = () => {
@@ -25123,7 +25234,7 @@ function ExampleFrame({
   ...rest
 }) {
   const labels = useLabels(EXAMPLE_FRAME_LABELS, labelsProp);
-  const [pane, setPane] = React79.useState("preview");
+  const [pane, setPane] = React77.useState("preview");
   const [colorScheme, setColorScheme] = useControllableState({
     value: colorSchemeProp,
     defaultValue: defaultColorScheme,
@@ -25134,14 +25245,14 @@ function ExampleFrame({
     defaultValue: defaultViewport,
     onChange: onViewportChange
   });
-  const rootRef = React79.useRef(null);
+  const rootRef = React77.useRef(null);
   const mergedRef = useMergedRefs(rootRef, ref);
   const depth = useNestedSurfaceDepth();
   const stageDepth = useStageDepth();
-  const stageRef = React79.useRef(null);
+  const stageRef = React77.useRef(null);
   usePreviewFacts(stageRef, previewLayout, pane === "preview");
-  const previousScheme = React79.useRef(colorScheme);
-  React79.useLayoutEffect(() => {
+  const previousScheme = React77.useRef(colorScheme);
+  React77.useLayoutEffect(() => {
     if (previousScheme.current === colorScheme) return;
     previousScheme.current = colorScheme;
     if (rootRef.current) suspendTransitions(rootRef.current);
@@ -25204,11 +25315,11 @@ function ExampleFrameToolbar({
   onColorSchemeChange,
   onCopy
 }) {
-  const [copyState, setCopyState] = React79.useState("idle");
-  const toolbarRef = React79.useRef(null);
+  const [copyState, setCopyState] = React77.useState("idle");
+  const toolbarRef = React77.useRef(null);
   const toolbarSize = useElementSize(toolbarRef);
   const narrow = toolbarSize !== null && toolbarSize.width > 0 && toolbarSize.width < NARROW_STEPS * readCssLengthPx("--prime-space-20", TOKEN_DEFAULTS["--prime-space-20"]);
-  React79.useEffect(() => {
+  React77.useEffect(() => {
     if (copyState === "idle") return;
     const timer = window.setTimeout(() => setCopyState("idle"), COPY_FEEDBACK_MS);
     return () => window.clearTimeout(timer);
@@ -25295,7 +25406,7 @@ function ExampleFrameToolbar({
 ExampleFrameToolbar.displayName = "ExampleFrame.Toolbar";
 
 // src/components/field-list/FieldList.tsx
-import * as React80 from "react";
+import * as React78 from "react";
 
 // src/components/field-list/FieldList.module.css
 var FieldList_default = {
@@ -25307,7 +25418,8 @@ var FieldList_default = {
   head: "FieldList_head",
   cells: "FieldList_cells",
   cell: "FieldList_cell",
-  lead: "FieldList_lead",
+  heading: "FieldList_heading",
+  grip: "FieldList_grip",
   end: "FieldList_end",
   totals: "FieldList_totals",
   total: "FieldList_total",
@@ -25315,51 +25427,57 @@ var FieldList_default = {
   totalsLabel: "FieldList_totalsLabel",
   totalValue: "FieldList_totalValue",
   add: "FieldList_add",
-  addIndented: "FieldList_addIndented",
   limit: "FieldList_limit",
   totalName: "FieldList_totalName"
 };
 
 // src/components/field-list/FieldList.tsx
-import { Fragment as Fragment36, jsx as jsx72, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment37, jsx as jsx72, jsxs as jsxs57 } from "react/jsx-runtime";
 var FIELD_LIST_LABELS = {
   remove: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C {row}",
   reorder: "\u041F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u044C {row}",
   row: "\u0441\u0442\u0440\u043E\u043A\u0443 {index}",
   namedRow: "\xAB{label}\xBB",
-  locked: "\u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0435\u043D\u0430",
+  lockedReason: "\u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u0443\u044E \u0441\u0442\u0440\u043E\u043A\u0443 \u043D\u0435\u043B\u044C\u0437\u044F \u0443\u0434\u0430\u043B\u0438\u0442\u044C",
   maxReached: "\u041D\u0435 \u0431\u043E\u043B\u044C\u0448\u0435 {max}",
   totals: "\u0418\u0442\u043E\u0433\u043E"
 };
 var track = (name) => `var(${name})`;
 var TRACKS = {
   fill: "minmax(0, 1fr)",
-  compact: track("--fl-compact"),
   xs: track("--fl-xs"),
   s: track("--fl-s"),
   m: track("--fl-m")
 };
+var compactTrack = (column) => `var(--fl-compact-${column}, max-content)`;
 function cellsOf(node) {
-  return React80.Children.toArray(node).flatMap(
-    (child) => React80.isValidElement(child) && child.type === React80.Fragment ? cellsOf(child.props.children) : [child]
+  return React78.Children.toArray(node).flatMap(
+    (child) => React78.isValidElement(child) && child.type === React78.Fragment ? cellsOf(child.props.children) : [child]
   );
 }
 function totalsOf(node) {
   const out = [];
-  React80.Children.forEach(node, (child) => {
-    if (React80.isValidElement(child) && child.type === React80.Fragment)
+  React78.Children.forEach(node, (child) => {
+    if (React78.isValidElement(child) && child.type === React78.Fragment)
       out.push(...totalsOf(child.props.children));
     else out.push(child);
   });
   return out;
 }
+var TEXT_BOX = "input:not([type='checkbox'], [type='radio'], [type='hidden']), textarea";
+function endsText(cell) {
+  const box = cell?.querySelector(TEXT_BOX);
+  if (!box) return false;
+  const { textAlign, direction } = getComputedStyle(box);
+  return textAlign === "end" || textAlign === (direction === "rtl" ? "left" : "right");
+}
 function takeNext(_current, next) {
   return next;
 }
 var FOCUSABLE = "input, textarea, select, button, [tabindex]:not([tabindex='-1'])";
-var LEAD_TIER = "xs";
-function LeadBox({ children }) {
-  return /* @__PURE__ */ jsx72("span", { className: cx(fieldTierClass, FieldList_default.lead), "data-size": LEAD_TIER, children });
+var GRIP_TIER = "xs";
+function GripBox({ children }) {
+  return /* @__PURE__ */ jsx72("span", { className: cx(fieldTierClass, FieldList_default.grip), "data-size": GRIP_TIER, children });
 }
 function FieldList({
   value: valueProp,
@@ -25400,7 +25518,7 @@ function FieldList({
   const changes = usePendingChanges(stored, takeNext);
   const items = changes.shown;
   const busy = changes.pending.length > 0;
-  const latest = React80.useRef(items);
+  const latest = React78.useRef(items);
   latest.current = items;
   const setItems = (edit) => {
     const next = edit(latest.current);
@@ -25419,17 +25537,26 @@ function FieldList({
     "aria-describedby": ids.describedBy,
     "aria-busy": busy || void 0
   };
-  const addRef = React80.useRef(null);
-  const rows2 = React80.useRef(/* @__PURE__ */ new Map());
+  const addRef = React78.useRef(null);
+  const rows2 = React78.useRef(/* @__PURE__ */ new Map());
   const presence = useListPresence(items.map(getId));
-  const focusNext = React80.useRef(null);
-  const lead = reorderable || getLocked !== void 0 && items.some(getLocked);
+  const focusNext = React78.useRef(null);
+  const grip = reorderable;
+  const single = columns.length === 1;
+  const [removeOutside, setRemoveOutside] = React78.useState(false);
+  const removeInField = single && !removeOutside;
   const template = [
-    lead ? "auto" : null,
-    ...columns.map((column) => TRACKS[column.width ?? "fill"]),
-    track("--fl-end")
+    ...columns.map(
+      (column, index) => column.width === "compact" ? compactTrack(index) : TRACKS[column.width ?? "fill"]
+    ),
+    removeInField ? null : track("--fl-end"),
+    grip ? "auto" : null
   ].filter(Boolean).join(" ");
-  const single = columns.length === 1;
+  const stackedTemplate = ["minmax(0, 1fr)", removeInField ? null : "auto", grip ? "auto" : null].filter(Boolean).join(" ");
+  const trackStyle = {
+    "--fl-columns": template,
+    "--fl-stacked": stackedTemplate
+  };
   const hasHead = items.length > 0 && !single;
   const head = usePartPresence({ present: hasHead, axis: "block" });
   const totalCells = renderTotals && items.length > 0 ? totalsOf(renderTotals(items)) : null;
@@ -25438,9 +25565,42 @@ function FieldList({
       `FieldList: renderTotals returns ${totalCells.length} cells for ${columns.length} columns`
     );
   const totals = usePartPresence({ present: totalCells !== null, axis: "block" });
+  const bodyRef = React78.useRef(null);
+  const [endColumns, setEndColumns] = React78.useState("");
+  React78.useLayoutEffect(() => {
+    if (!totalCells) return;
+    const cells = bodyRef.current?.querySelector("[data-fl-cells]")?.children;
+    setEndColumns(columns.map((_, column) => endsText(cells?.[column]) ? "1" : "0").join(""));
+  });
   const atMax = max !== void 0 && items.length >= max;
   const atMin = items.length <= min;
-  React80.useLayoutEffect(() => {
+  const compactColumns = columns.flatMap(
+    (column, index) => column.width === "compact" ? [index] : []
+  );
+  const measureCompact = () => {
+    const body = bodyRef.current;
+    if (!body) return;
+    const rowsOfCells = body.querySelectorAll(`.${FieldList_default.cells}`);
+    for (const column of compactColumns) {
+      let width = 0;
+      for (const cells of rowsOfCells) {
+        const cell = cells.children[column];
+        if (cell) width = Math.max(width, cell.getBoundingClientRect().width);
+      }
+      body.style.setProperty(`--fl-compact-${column}`, width > 0 ? `${width}px` : null);
+    }
+  };
+  React78.useLayoutEffect(measureCompact);
+  useResizeEffect(bodyRef, measureCompact, { enabled: compactColumns.length > 0 });
+  React78.useLayoutEffect(() => {
+    if (!removeInField) return;
+    for (const row of rows2.current.values())
+      if (!row.querySelector("[data-fl-cells] [data-fl-remove]")) {
+        setRemoveOutside(true);
+        return;
+      }
+  });
+  React78.useLayoutEffect(() => {
     const target = focusNext.current;
     if (!target) return;
     focusNext.current = null;
@@ -25487,37 +25647,66 @@ function FieldList({
       throw new Error(
         `FieldList: row "${id}" renders ${cells.length} cells for ${columns.length} columns`
       );
-    const content = /* @__PURE__ */ jsxs57(Fragment36, { children: [
-      lead ? /* @__PURE__ */ jsx72(LeadBox, { children: reorderable ? /* @__PURE__ */ jsx72(
-        Dnd.Handle,
+    const removeName = formatLabel(labels.remove, { row: name });
+    const reason = locked && !disabled ? labels.lockedReason : null;
+    const removeOff = disabled || atMin || locked;
+    const removeButton = removeInField ? (
+      // A segment at the field's end. A pinned row's stays a focusable `aria-disabled` segment, so
+      // its reason tooltip has a trigger and the segment stays the box's last child.
+      /* @__PURE__ */ jsx72(
+        FieldActionButton,
         {
-          "aria-label": formatLabel(labels.reorder, { row: name }),
-          disabled
+          label: removeName,
+          tooltip: reason === null,
+          disabled: removeOff && !reason,
+          "aria-disabled": reason ? true : void 0,
+          onClick: reason ? void 0 : () => remove(id),
+          "data-fl-remove": "",
+          children: /* @__PURE__ */ jsx72(Icon, { name: "action.remove" })
         }
-      ) : locked ? /* @__PURE__ */ jsx72(DndLock, { "aria-label": labels.locked }) : null }) : null,
+      )
+    ) : /* @__PURE__ */ jsx72(
+      Button.Root,
+      {
+        variant: "ghost",
+        tone: "neutral",
+        "aria-label": removeName,
+        disabled: removeOff,
+        onClick: () => remove(id),
+        "data-fl-remove": "",
+        children: /* @__PURE__ */ jsx72(Button.Icon, { children: /* @__PURE__ */ jsx72(Icon, { name: "action.remove" }) })
+      }
+    );
+    const removeControl = reason ? /* @__PURE__ */ jsxs57(Tooltip.Root, { children: [
+      /* @__PURE__ */ jsx72(Tooltip.Trigger, { children: removeButton }),
+      /* @__PURE__ */ jsx72(Tooltip.Content, { children: reason })
+    ] }) : removeButton;
+    const content = /* @__PURE__ */ jsxs57(Fragment37, { children: [
       /* @__PURE__ */ jsx72("div", { className: FieldList_default.cells, "data-fl-cells": "", children: cells.map((cell, column) => {
         const heading = columns[column];
+        const required = Boolean(heading?.required);
         return /* @__PURE__ */ jsx72(
           FieldCellContext,
           {
-            value: cellValue(heading?.label ?? "", single, Boolean(heading?.required)),
+            value: removeInField ? {
+              label: heading?.label ?? "",
+              hidden: "always",
+              required,
+              action: removeControl
+            } : cellValue(heading?.label ?? "", single, required),
             children: /* @__PURE__ */ jsx72("div", { className: FieldList_default.cell, "data-width": heading?.width ?? "fill", children: cell })
           },
           column
         );
       }) }),
-      /* @__PURE__ */ jsx72("span", { className: FieldList_default.end, children: locked ? null : /* @__PURE__ */ jsx72(
-        Button.Root,
+      removeInField ? null : /* @__PURE__ */ jsx72("span", { className: FieldList_default.end, children: removeControl }),
+      grip ? /* @__PURE__ */ jsx72(GripBox, { children: /* @__PURE__ */ jsx72(
+        Dnd.Handle,
         {
-          variant: "ghost",
-          tone: "neutral",
-          "aria-label": formatLabel(labels.remove, { row: name }),
-          disabled: disabled || atMin,
-          onClick: () => remove(id),
-          "data-fl-remove": "",
-          children: /* @__PURE__ */ jsx72(Button.Icon, { children: /* @__PURE__ */ jsx72(Icon, { name: "action.remove" }) })
+          "aria-label": formatLabel(labels.reorder, { row: name }),
+          disabled
         }
-      ) })
+      ) }) : null
     ] });
     const rowProps = {
       // Registers the row (focus after an add or a remove); a removed row leaves in place and the
@@ -25532,9 +25721,10 @@ function FieldList({
       },
       // An added row rises in once: the class stays until the list changes again.
       className: cx(fieldTierClass, FieldList_default.row, presence.entering.has(id) && enterMotion_default.enter),
-      style: { "--fl-columns": template },
+      style: trackStyle,
       "data-size": size,
-      "data-locked": locked || void 0
+      "data-locked": locked || void 0,
+      "data-single": single || void 0
     };
     return reorderable ? /* @__PURE__ */ jsx72(Dnd.SortableItem, { id, locked, ...rowProps, children: content }, id) : /* @__PURE__ */ jsx72("li", { ...rowProps, children: content }, id);
   };
@@ -25555,17 +25745,16 @@ function FieldList({
         group: true,
         className: cx(FieldList_default.root, className),
         ...toDataAttributes({ disabled: disabled || void 0 }),
-        children: /* @__PURE__ */ jsxs57("div", { className: FieldList_default.body, children: [
+        children: /* @__PURE__ */ jsxs57("div", { ref: bodyRef, className: FieldList_default.body, children: [
           hasHead ? /* @__PURE__ */ jsxs57(
             "div",
             {
               ref: head.ref,
               className: cx(fieldTierClass, FieldList_default.row, FieldList_default.head, head.className),
-              style: { "--fl-columns": template },
+              style: trackStyle,
               "data-size": size,
               "aria-hidden": "true",
               children: [
-                lead ? /* @__PURE__ */ jsx72(LeadBox, {}) : null,
                 /* @__PURE__ */ jsx72("div", { className: FieldList_default.cells, children: columns.map((column, index) => /* @__PURE__ */ jsx72(
                   Label.Root,
                   {
@@ -25573,11 +25762,14 @@ function FieldList({
                     required: column.required,
                     disabled,
                     secondary: true,
+                    className: FieldList_default.heading,
+                    "data-width": column.width ?? "fill",
                     children: column.label
                   },
                   index
                 )) }),
-                /* @__PURE__ */ jsx72("span", {})
+                /* @__PURE__ */ jsx72("span", {}),
+                grip ? /* @__PURE__ */ jsx72(GripBox, {}) : null
               ]
             }
           ) : null,
@@ -25620,10 +25812,9 @@ function FieldList({
                   hairline_default.top,
                   totals.className
                 ),
-                style: { "--fl-columns": template },
+                style: trackStyle,
                 "data-size": size,
                 children: [
-                  lead ? /* @__PURE__ */ jsx72(LeadBox, {}) : null,
                   /* @__PURE__ */ jsx72("div", { className: FieldList_default.cells, children: totalCells.map((total, column) => {
                     const heading = columns[column];
                     const shown = hasContent(total);
@@ -25633,7 +25824,8 @@ function FieldList({
                         className: cx(FieldList_default.cell, FieldList_default.total),
                         "data-width": heading?.width ?? "fill",
                         "data-empty": !shown && column > 0 || void 0,
-                        children: shown ? /* @__PURE__ */ jsxs57(Fragment36, { children: [
+                        "data-align": endColumns[column] === "1" ? "end" : void 0,
+                        children: shown ? /* @__PURE__ */ jsxs57(Fragment37, { children: [
                           /* @__PURE__ */ jsx72("span", { className: cx(visuallyHiddenClass, FieldList_default.totalName), children: heading?.label }),
                           /* @__PURE__ */ jsx72("span", { className: FieldList_default.totalValue, children: total })
                         ] }) : column === 0 ? (
@@ -25644,35 +25836,29 @@ function FieldList({
                       column
                     );
                   }) }),
-                  /* @__PURE__ */ jsx72("span", { className: cx(FieldList_default.end, FieldList_default.totalsEnd) })
+                  removeInField ? null : /* @__PURE__ */ jsx72("span", { className: cx(FieldList_default.end, FieldList_default.totalsEnd) }),
+                  grip ? /* @__PURE__ */ jsx72(GripBox, {}) : null
                 ]
               }
             )
           ) : null,
-          createItem ? /* @__PURE__ */ jsxs57(
-            "div",
-            {
-              className: cx(FieldList_default.add, lead && cx(fieldTierClass, FieldList_default.addIndented)),
-              "data-size": lead ? LEAD_TIER : void 0,
-              children: [
-                /* @__PURE__ */ jsxs57(
-                  Button.Root,
-                  {
-                    ref: addRef,
-                    variant: "soft",
-                    tone: "neutral",
-                    disabled: disabled || atMax,
-                    onClick: add,
-                    children: [
-                      /* @__PURE__ */ jsx72(Button.Icon, { children: /* @__PURE__ */ jsx72(Icon, { name: "action.add" }) }),
-                      addLabel
-                    ]
-                  }
-                ),
-                atMax && max !== void 0 ? /* @__PURE__ */ jsx72("span", { className: cx(textRole_default.caption, FieldList_default.limit), children: formatLabel(labels.maxReached, { max }) }) : null
-              ]
-            }
-          ) : null
+          createItem ? /* @__PURE__ */ jsxs57("div", { className: FieldList_default.add, children: [
+            /* @__PURE__ */ jsxs57(
+              Button.Root,
+              {
+                ref: addRef,
+                variant: "soft",
+                tone: "neutral",
+                disabled: disabled || atMax,
+                onClick: add,
+                children: [
+                  /* @__PURE__ */ jsx72(Button.Icon, { children: /* @__PURE__ */ jsx72(Icon, { name: "action.add" }) }),
+                  addLabel
+                ]
+              }
+            ),
+            atMax && max !== void 0 ? /* @__PURE__ */ jsx72("span", { className: cx(textRole_default.caption, FieldList_default.limit), children: formatLabel(labels.maxReached, { max }) }) : null
+          ] }) : null
         ] })
       }
     ) })
@@ -25691,7 +25877,7 @@ function cellValue(label, single, required) {
 }
 
 // src/components/fieldset/Fieldset.tsx
-import * as React81 from "react";
+import * as React79 from "react";
 
 // src/components/fieldset/Fieldset.module.css
 var Fieldset_default = {
@@ -25714,7 +25900,7 @@ function Fieldset({
   ...rest
 }) {
   const disabled = useInheritedDisabled(disabledProp);
-  const descriptionId = React81.useId();
+  const descriptionId = React79.useId();
   const hasDescription = hasContent(description);
   const describedBy = [ariaDescribedBy, hasDescription ? descriptionId : void 0].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ jsxs58(
@@ -25740,7 +25926,7 @@ Fieldset.displayName = "Fieldset";
 // src/components/gantt/Gantt.tsx
 import { addDays as addDays3, startOfDay as startOfDay7 } from "date-fns";
 import { ru as ru3 } from "date-fns/locale";
-import * as React84 from "react";
+import * as React82 from "react";
 
 // src/components/gantt/Gantt.module.css
 var Gantt_default = {
@@ -25791,10 +25977,10 @@ var Gantt_default = {
 };
 
 // src/components/gantt/GanttRow.tsx
-import * as React83 from "react";
+import * as React81 from "react";
 
 // src/components/gantt/GanttBar.tsx
-import * as React82 from "react";
+import * as React80 from "react";
 
 // src/components/gantt/ganttModel.ts
 import {
@@ -26024,7 +26210,7 @@ function visibleSegment(rect, viewport2) {
 }
 
 // src/components/gantt/GanttBar.tsx
-import { Fragment as Fragment37, jsx as jsx74, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment38, jsx as jsx74, jsxs as jsxs59 } from "react/jsx-runtime";
 var EDIT_SHORTCUTS = [
   "Shift+ArrowLeft",
   "Shift+ArrowRight",
@@ -26061,17 +26247,17 @@ function GanttBarView({
   onDragChange,
   barRef
 }) {
-  const [tipOpen, setTipOpen] = React82.useState(false);
-  React82.useEffect(() => {
+  const [tipOpen, setTipOpen] = React80.useState(false);
+  React80.useEffect(() => {
     if (!tipOpen) return;
     onTipChange(bar.id, () => setTipOpen(false));
     return () => onTipChange(bar.id, null);
   }, [tipOpen, bar.id, onTipChange]);
-  const [drag, setDrag] = React82.useState(null);
-  const [tipMounted, setTipMounted] = React82.useState(false);
+  const [drag, setDrag] = React80.useState(null);
+  const [tipMounted, setTipMounted] = React80.useState(false);
   if (!tipMounted && (tipOpen || drag !== null)) setTipMounted(true);
-  const gesture = React82.useRef(null);
-  const swallowClick = React82.useRef(false);
+  const gesture = React80.useRef(null);
+  const swallowClick = React80.useRef(false);
   const shown = drag ? applyEdit(dates, drag.edit, drag.steps, drag.unit) : dates;
   const milestone = isMilestone(shown);
   const baseSpan = isMilestone(dates) ? 0 : daysBetween2(dates.start, dates.end);
@@ -26172,8 +26358,8 @@ function GanttBarView({
     setDrag(null);
     if (current.steps !== 0) onCommit(applyEdit(dates, current.edit, current.steps, current.unit));
   };
-  const nodeRef = React82.useRef(null);
-  React82.useEffect(() => {
+  const nodeRef = React80.useRef(null);
+  React80.useEffect(() => {
     const node = nodeRef.current;
     if (!node) return;
     const hold2 = (event) => {
@@ -26183,14 +26369,14 @@ function GanttBarView({
     node.addEventListener("touchmove", hold2, { passive: false });
     return () => node.removeEventListener("touchmove", hold2);
   }, []);
-  const setNode = React82.useCallback(
+  const setNode = React80.useCallback(
     (node) => {
       nodeRef.current = node;
       barRef(node);
     },
     [barRef]
   );
-  return /* @__PURE__ */ jsxs59(Fragment37, { children: [
+  return /* @__PURE__ */ jsxs59(Fragment38, { children: [
     guide !== null ? /* @__PURE__ */ jsx74(
       "span",
       {
@@ -26265,7 +26451,7 @@ function GanttBarView({
                 milestone ? /* @__PURE__ */ jsx74("span", { className: Gantt_default.diamond, "aria-hidden": "true" }) : null,
                 pending ? /* @__PURE__ */ jsx74(Spinner, { size: "xs", className: Gantt_default.spinner, "aria-hidden": "true" }) : null,
                 /* @__PURE__ */ jsx74("span", { className: Gantt_default.label, "data-gantt-label": "", "aria-hidden": "true", children: bar.label }),
-                editable && !milestone ? /* @__PURE__ */ jsxs59(Fragment37, { children: [
+                editable && !milestone ? /* @__PURE__ */ jsxs59(Fragment38, { children: [
                   /* @__PURE__ */ jsx74("span", { className: Gantt_default.handle, "data-handle": "start", "aria-hidden": "true" }),
                   /* @__PURE__ */ jsx74("span", { className: Gantt_default.handle, "data-handle": "end", "aria-hidden": "true" })
                 ] }) : null
@@ -26288,7 +26474,7 @@ function GanttBarView({
 }
 
 // src/components/gantt/GanttRow.tsx
-import { Fragment as Fragment38, jsx as jsx75, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment39, jsx as jsx75, jsxs as jsxs60 } from "react/jsx-runtime";
 function GanttRowView({
   ctx,
   index,
@@ -26326,7 +26512,7 @@ function GanttRowView({
   const start = new Date(rangeStart);
   const windowed = windowFrom <= windowTo;
   const on = (event) => (native) => ctx.track(event, index, native);
-  const content = /* @__PURE__ */ jsxs60(Fragment38, { children: [
+  const content = /* @__PURE__ */ jsxs60(Fragment39, { children: [
     renderRowAvatar ? /* @__PURE__ */ jsx75("span", { className: Gantt_default.rowAvatar, children: renderRowAvatar(row) }) : null,
     /* @__PURE__ */ jsx75("span", { className: Gantt_default.rowLabel, children: renderRow ? renderRow(row) : label })
   ] });
@@ -26485,10 +26671,10 @@ function GanttRowView({
     }
   );
 }
-var GanttRow = React83.memo(GanttRowView);
+var GanttRow = React81.memo(GanttRowView);
 
 // src/components/gantt/Gantt.tsx
-import { Fragment as Fragment39, jsx as jsx76, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment40, jsx as jsx76, jsxs as jsxs61 } from "react/jsx-runtime";
 var GANTT_LABELS = {
   rowsHeader: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435",
   timeline: "\u0428\u043A\u0430\u043B\u0430 \u0432\u0440\u0435\u043C\u0435\u043D\u0438",
@@ -26561,17 +26747,17 @@ function Gantt({
   const size = tier.size;
   const labels = useLabels(GANTT_LABELS, labelsProp);
   const depth = useNestedSurfaceDepth();
-  const rootRef = React84.useRef(null);
+  const rootRef = React82.useRef(null);
   const mergedRootRef = useMergedRefs(rootRef, ref);
-  const scrollRef = React84.useRef(null);
-  const axisRef = React84.useRef(null);
-  const cornerRef = React84.useRef(null);
-  const headRef = React84.useRef(null);
-  const cellNodes = React84.useRef(/* @__PURE__ */ new Map());
-  const hintId = React84.useId();
-  const createHintId = React84.useId();
+  const scrollRef = React82.useRef(null);
+  const axisRef = React82.useRef(null);
+  const cornerRef = React82.useRef(null);
+  const headRef = React82.useRef(null);
+  const cellNodes = React82.useRef(/* @__PURE__ */ new Map());
+  const hintId = React82.useId();
+  const createHintId = React82.useId();
   const todayTime = todayProp?.getTime();
-  const today = React84.useMemo(
+  const today = React82.useMemo(
     () => startOfDay7(todayTime === void 0 ? /* @__PURE__ */ new Date() : new Date(todayTime)),
     [todayTime]
   );
@@ -26580,7 +26766,7 @@ function Gantt({
     defaultValue: defaultScale,
     onChange: onScaleChange
   });
-  const model = React84.useMemo(
+  const model = React82.useMemo(
     () => rows2.map((row) => {
       const bars = getRowBars(row);
       const { lanes, count } = assignLanes(bars);
@@ -26588,7 +26774,7 @@ function Gantt({
     }),
     [rows2, getRowBars, getRowKey, getRowLabel]
   );
-  const barsKey = React84.useMemo(() => {
+  const barsKey = React82.useMemo(() => {
     let min = Number.POSITIVE_INFINITY;
     let max = Number.NEGATIVE_INFINITY;
     for (const item of model) {
@@ -26601,7 +26787,7 @@ function Gantt({
   }, [model]);
   const rangeStartTime = rangeProp?.start.getTime();
   const rangeEndTime = rangeProp?.end.getTime();
-  const range = React84.useMemo(() => {
+  const range = React82.useMemo(() => {
     const [min, max] = barsKey ? barsKey.split("-").map(Number) : [];
     const extent = min === void 0 ? [] : [{ start: new Date(min), end: new Date(max) }];
     return resolveRange(
@@ -26612,17 +26798,17 @@ function Gantt({
     );
   }, [barsKey, today, scale, rangeStartTime, rangeEndTime]);
   const totalDays = daysBetween2(range.start, range.end);
-  const tiers = React84.useMemo(
+  const tiers = React82.useMemo(
     () => headerTiers(scale, range, today, locale),
     [scale, range, today, locale]
   );
   const todayX = daysBetween2(range.start, today);
   const todayInRange = todayX >= 0 && todayX < totalDays;
-  const [pending, setPending] = React84.useState(/* @__PURE__ */ new Map());
-  const [announcement, setAnnouncement] = React84.useState("");
+  const [pending, setPending] = React82.useState(/* @__PURE__ */ new Map());
+  const [announcement, setAnnouncement] = React82.useState("");
   const editableAtAll = !readOnly && !loading && onBarChange !== void 0;
   const creatable = !readOnly && !loading && onBarCreate !== void 0;
-  const nameFor = React84.useCallback(
+  const nameFor = React82.useCallback(
     (bar, dates) => {
       const name = isMilestone(dates) ? formatLabel(labels.milestone, { label: bar.label, date: formatDay(dates.start, locale) }) : formatLabel(labels.bar, {
         label: bar.label,
@@ -26651,9 +26837,9 @@ function Gantt({
   };
   const shownDates = (bar) => pending.get(bar.id) ?? bar;
   const isEditable = (bar) => editableAtAll && !bar.readOnly && !pending.has(bar.id);
-  const [ghosts, setGhosts] = React84.useState(/* @__PURE__ */ new Map());
-  const ghostSeq = React84.useRef(0);
-  const setGhost = React84.useCallback((rowKey2, ghost) => {
+  const [ghosts, setGhosts] = React82.useState(/* @__PURE__ */ new Map());
+  const ghostSeq = React82.useRef(0);
+  const setGhost = React82.useCallback((rowKey2, ghost) => {
     setGhosts((prev) => {
       const next = new Map(prev);
       if (ghost) next.set(rowKey2, ghost);
@@ -26690,14 +26876,14 @@ function Gantt({
       }
     );
   };
-  const geometryCache = React84.useRef({
+  const geometryCache = React82.useRef({
     px: null,
     dir: null
   });
-  React84.useLayoutEffect(() => {
+  React82.useLayoutEffect(() => {
     geometryCache.current = { px: null, dir: null };
   });
-  const dayPx = React84.useCallback(() => {
+  const dayPx = React82.useCallback(() => {
     const cache2 = geometryCache.current;
     if (cache2.px === null) {
       const axis = axisRef.current;
@@ -26705,23 +26891,23 @@ function Gantt({
     }
     return cache2.px;
   }, [totalDays]);
-  const direction = React84.useCallback(() => {
+  const direction = React82.useCallback(() => {
     const cache2 = geometryCache.current;
     cache2.dir ??= rootRef.current && getComputedStyle(rootRef.current).direction === "rtl" ? -1 : 1;
     return cache2.dir;
   }, []);
-  const labelWidth = React84.useCallback(
+  const labelWidth = React82.useCallback(
     () => cornerRef.current?.getBoundingClientRect().width ?? 0,
     []
   );
-  const scrollLeft = React84.useCallback(() => scrollRef.current?.scrollLeft ?? 0, []);
-  const dayPxRef = React84.useRef(dayPx);
+  const scrollLeft = React82.useCallback(() => scrollRef.current?.scrollLeft ?? 0, []);
+  const dayPxRef = React82.useRef(dayPx);
   dayPxRef.current = dayPx;
-  const directionRef = React84.useRef(direction);
+  const directionRef = React82.useRef(direction);
   directionRef.current = direction;
-  const onAutoScrolled = React84.useRef(() => {
+  const onAutoScrolled = React82.useRef(() => {
   });
-  const [edgeScroll] = React84.useState(
+  const [edgeScroll] = React82.useState(
     () => createEdgeAutoScroll({
       scrollers: [],
       axes: { x: true, y: false },
@@ -26729,8 +26915,8 @@ function Gantt({
       onScrolled: () => onAutoScrolled.current()
     })
   );
-  React84.useEffect(() => () => edgeScroll.stop(), [edgeScroll]);
-  const autoScroll = React84.useMemo(
+  React82.useEffect(() => () => edgeScroll.stop(), [edgeScroll]);
+  const autoScroll = React82.useMemo(
     () => ({
       follow: (clientX, onScrolled) => {
         const viewport2 = scrollRef.current;
@@ -26743,9 +26929,9 @@ function Gantt({
     }),
     [edgeScroll]
   );
-  const [geometry, setGeometry] = React84.useState(FALLBACK_GEOMETRY);
-  const geometryTier = React84.useRef(null);
-  React84.useLayoutEffect(() => {
+  const [geometry, setGeometry] = React82.useState(FALLBACK_GEOMETRY);
+  const geometryTier = React82.useRef(null);
+  React82.useLayoutEffect(() => {
     const root = rootRef.current;
     if (!root || geometryTier.current === size) return;
     geometryTier.current = size;
@@ -26759,8 +26945,8 @@ function Gantt({
       (prev) => prev.padY === next.padY && prev.barH === next.barH && prev.laneGap === next.laneGap && prev.border === next.border ? prev : next
     );
   });
-  const [headHeight, setHeadHeight] = React84.useState(0);
-  React84.useLayoutEffect(() => {
+  const [headHeight, setHeadHeight] = React82.useState(0);
+  React82.useLayoutEffect(() => {
     const height = headRef.current?.getBoundingClientRect().height ?? 0;
     setHeadHeight((prev) => prev === height ? prev : height);
   });
@@ -26773,7 +26959,7 @@ function Gantt({
     ]);
     return { lanes, count, ghostLane: lanes.get(ghost.id) ?? 0 };
   };
-  const scrollToDay = React84.useCallback(
+  const scrollToDay = React82.useCallback(
     (day, align, smooth2) => {
       const viewport2 = scrollRef.current;
       if (!viewport2) return;
@@ -26788,7 +26974,7 @@ function Gantt({
     },
     [dayPx, direction, labelWidth]
   );
-  const centerDate = React84.useRef(null);
+  const centerDate = React82.useRef(null);
   const rememberCenter = () => {
     const viewport2 = scrollRef.current;
     const px3 = dayPx();
@@ -26796,8 +26982,8 @@ function Gantt({
     const center = Math.abs(viewport2.scrollLeft) + (viewport2.clientWidth - labelWidth()) / 2;
     centerDate.current = addDays3(range.start, Math.floor(center / px3));
   };
-  const shownView = React84.useRef(null);
-  React84.useLayoutEffect(() => {
+  const shownView = React82.useRef(null);
+  React82.useLayoutEffect(() => {
     const previous = shownView.current;
     shownView.current = { scale, start: range.start.getTime() };
     if (!previous) {
@@ -26811,8 +26997,8 @@ function Gantt({
       scrollRef.current.scrollLeft += grown * dayPx() * direction();
     }
   }, [scale, range, todayInRange, todayX, scrollToDay, dayPx, direction]);
-  const [timeWindow, setTimeWindow] = React84.useState(null);
-  const updateTimeWindow = React84.useCallback(() => {
+  const [timeWindow, setTimeWindow] = React82.useState(null);
+  const updateTimeWindow = React82.useCallback(() => {
     const viewport2 = scrollRef.current;
     const px3 = dayPx();
     if (!viewport2 || px3 <= 0 || viewport2.clientWidth === 0) {
@@ -26826,14 +27012,14 @@ function Gantt({
     const to = Math.ceil((left + 2 * visible) / step2) * step2;
     setTimeWindow((prev) => prev && prev[0] === from && prev[1] === to ? prev : [from, to]);
   }, [dayPx, labelWidth]);
-  const windowAxis = React84.useRef(null);
-  React84.useLayoutEffect(() => {
+  const windowAxis = React82.useRef(null);
+  React82.useLayoutEffect(() => {
     const axis = `${scale}:${range.start.getTime()}:${range.end.getTime()}`;
     if (windowAxis.current === axis) return;
     windowAxis.current = axis;
     updateTimeWindow();
   });
-  React84.useEffect(() => {
+  React82.useEffect(() => {
     const viewport2 = scrollRef.current;
     if (!viewport2 || typeof ResizeObserver === "undefined") return;
     const observer2 = new ResizeObserver(() => {
@@ -26844,7 +27030,7 @@ function Gantt({
     return () => observer2.disconnect();
   }, [updateTimeWindow]);
   const inWindow = (x, span) => !timeWindow || x + Math.max(span, 1) >= timeWindow[0] && x <= timeWindow[1];
-  const navItems = React84.useMemo(() => {
+  const navItems = React82.useMemo(() => {
     const items = [];
     model.forEach((item, rowIndex) => {
       items.push({ id: rowNavId(item.key), row: rowIndex, center: -1e9, kind: "row" });
@@ -26864,14 +27050,14 @@ function Gantt({
     });
     return items;
   }, [model, pending, range.start]);
-  const navIndex = React84.useMemo(
+  const navIndex = React82.useMemo(
     () => new Map(navItems.map((item) => [item.id, item])),
     [navItems]
   );
-  const [activeId, setActiveId] = React84.useState(null);
+  const [activeId, setActiveId] = React82.useState(null);
   const tabStop = activeId && navIndex.has(activeId) ? activeId : navItems.find((item) => item.kind === "bar")?.id ?? navItems[0]?.id ?? null;
-  const [dragging, setDragging] = React84.useState(/* @__PURE__ */ new Set());
-  const onDragChange = React84.useCallback((id, isDragging) => {
+  const [dragging, setDragging] = React82.useState(/* @__PURE__ */ new Set());
+  const onDragChange = React82.useCallback((id, isDragging) => {
     setDragging((prev) => {
       const next = new Set(prev);
       if (isDragging) next.add(id);
@@ -26879,7 +27065,7 @@ function Gantt({
       return next;
     });
   }, []);
-  const keyIndex = React84.useMemo(
+  const keyIndex = React82.useMemo(
     () => new Map(model.map((item, index) => [item.key, index])),
     [model]
   );
@@ -26898,12 +27084,12 @@ function Gantt({
     const index = keyIndex.get(key);
     if (index !== void 0) pinnedRows.push(index);
   }
-  const rowHeightOf = React84.useCallback(
+  const rowHeightOf = React82.useCallback(
     (lanes) => 2 * geometry.padY + lanes * geometry.barH + (lanes - 1) * geometry.laneGap + geometry.border,
     [geometry]
   );
-  const getKey = React84.useCallback((index) => model[index]?.key ?? index, [model]);
-  const ghostLanes = React84.useMemo(() => {
+  const getKey = React82.useCallback((index) => model[index]?.key ?? index, [model]);
+  const ghostLanes = React82.useMemo(() => {
     const result = /* @__PURE__ */ new Map();
     for (const [key, ghost] of ghosts) {
       const index = keyIndex.get(key);
@@ -26916,18 +27102,18 @@ function Gantt({
     }
     return result;
   }, [ghosts, keyIndex, model]);
-  const lanesAt = React84.useCallback(
+  const lanesAt = React82.useCallback(
     (index) => {
       const item = model[index];
       return item ? ghostLanes.get(item.key) ?? item.laneCount : 1;
     },
     [model, ghostLanes]
   );
-  const estimateSize = React84.useCallback(
+  const estimateSize = React82.useCallback(
     (index) => rowHeightOf(lanesAt(index)),
     [rowHeightOf, lanesAt]
   );
-  const getGroup = React84.useCallback((index) => lanesAt(index), [lanesAt]);
+  const getGroup = React82.useCallback((index) => lanesAt(index), [lanesAt]);
   const virtual = useVirtualRows({
     count: model.length,
     scrollRef,
@@ -26954,9 +27140,9 @@ function Gantt({
     if (rect.top < top) viewport2.scrollTop -= top - rect.top + margin;
     else if (rect.bottom > view.bottom) viewport2.scrollTop += rect.bottom - view.bottom + margin;
   };
-  const openTips = React84.useRef(/* @__PURE__ */ new Map());
-  const revealing = React84.useRef(false);
-  const registerTip = React84.useCallback((id, close) => {
+  const openTips = React82.useRef(/* @__PURE__ */ new Map());
+  const revealing = React82.useRef(false);
+  const registerTip = React82.useCallback((id, close) => {
     if (close) openTips.current.set(id, close);
     else openTips.current.delete(id);
   }, []);
@@ -26976,7 +27162,7 @@ function Gantt({
       close();
     }
   };
-  const focusTarget = React84.useRef(null);
+  const focusTarget = React82.useRef(null);
   const focusNow = (id) => {
     const node = cellNodes.current.get(id);
     if (!node) return false;
@@ -26991,7 +27177,7 @@ function Gantt({
     setActiveId(id);
     if (!focusNow(id)) focusTarget.current = id;
   };
-  React84.useLayoutEffect(() => {
+  React82.useLayoutEffect(() => {
     const id = focusTarget.current;
     if (id && focusNow(id)) focusTarget.current = null;
   });
@@ -27062,7 +27248,7 @@ function Gantt({
     start: addDays3(range.start, cell.x),
     end: addDays3(range.start, cell.x + cell.span)
   });
-  const [hoverCell, setHoverCell] = React84.useState(null);
+  const [hoverCell, setHoverCell] = React82.useState(null);
   const dayAt = (track2, clientX) => {
     const px3 = dayPx();
     if (px3 <= 0) return null;
@@ -27070,8 +27256,8 @@ function Gantt({
     const offset = direction() === 1 ? clientX - rect.left : rect.right - clientX;
     return Math.min(Math.max(offset / px3, 0), totalDays - 1e-3);
   };
-  const drawing = React84.useRef(null);
-  const pressStart = React84.useRef(null);
+  const drawing = React82.useRef(null);
+  const pressStart = React82.useRef(null);
   const longPress = useLongPress({
     enabled: creatable,
     onLongPress: () => {
@@ -27119,7 +27305,7 @@ function Gantt({
     if (commitIt && ghost && ghost.id === current.id) create(current.item, ghost.dates);
     else setGhost(current.item.key, null);
   };
-  React84.useEffect(() => {
+  React82.useEffect(() => {
     const viewport2 = scrollRef.current;
     if (!viewport2) return;
     const hold = (event) => {
@@ -27129,9 +27315,9 @@ function Gantt({
     return () => viewport2.removeEventListener("touchmove", hold);
   }, []);
   const isDrawing = [...ghosts.values()].some((ghost) => ghost.status === "drawing");
-  const stopDrawingRef = React84.useRef(stopDrawing);
+  const stopDrawingRef = React82.useRef(stopDrawing);
   stopDrawingRef.current = stopDrawing;
-  React84.useEffect(() => {
+  React82.useEffect(() => {
     if (!isDrawing) return;
     const onKey = (event) => {
       if (event.key !== "Escape") return;
@@ -27221,7 +27407,7 @@ function Gantt({
       if (cell) create(item, datesOf(cell));
     }
   } : {};
-  const textCache = React84.useRef({ tier: size, widths: /* @__PURE__ */ new Map(), pad: null });
+  const textCache = React82.useRef({ tier: size, widths: /* @__PURE__ */ new Map(), pad: null });
   const measureBars = () => {
     if (textCache.current.tier !== size) {
       textCache.current = { tier: size, widths: /* @__PURE__ */ new Map(), pad: null };
@@ -27245,7 +27431,7 @@ function Gantt({
     }
     return bars;
   };
-  React84.useLayoutEffect(() => {
+  React82.useLayoutEffect(() => {
     const px3 = dayPx();
     const gap = readCssLengthPx("--prime-space-2", 8);
     const milestoneSize = geometry.barH;
@@ -27281,7 +27467,7 @@ function Gantt({
     }
     shiftLabels(true);
   });
-  const shiftedAt = React84.useRef(null);
+  const shiftedAt = React82.useRef(null);
   const shiftLabels = (force = false) => {
     const viewport2 = scrollRef.current;
     if (!viewport2) return;
@@ -27316,13 +27502,13 @@ function Gantt({
     rememberCenter();
     setScale(next);
   };
-  const toolbarLatest = React84.useRef({ changeScale, today: () => {
+  const toolbarLatest = React82.useRef({ changeScale, today: () => {
   } });
   toolbarLatest.current = {
     changeScale,
     today: () => scrollToDay(todayX + 0.5, 1 / 3, true)
   };
-  const toolbarActions = React84.useMemo(
+  const toolbarActions = React82.useMemo(
     () => ({
       today: () => toolbarLatest.current.today(),
       scale: (next) => toolbarLatest.current.changeScale(next)
@@ -27336,7 +27522,7 @@ function Gantt({
   const lineCells = tiers.bottom.filter(
     (cell) => (scale === "month" || cell.boundary) && inWindow(cell.x, 0)
   );
-  const backdrop = /* @__PURE__ */ jsxs61(Fragment39, { children: [
+  const backdrop = /* @__PURE__ */ jsxs61(Fragment40, { children: [
     /* @__PURE__ */ jsx76("div", { className: Gantt_default.backdropWash, "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs61("div", { className: Gantt_default.backdropLines, "aria-hidden": "true", children: [
       lineCells.map((cell) => /* @__PURE__ */ jsx76(
@@ -27357,7 +27543,7 @@ function Gantt({
       ) : null
     ] })
   ] });
-  const timelineRect = React84.useCallback(() => {
+  const timelineRect = React82.useCallback(() => {
     const viewport2 = scrollRef.current;
     if (!viewport2) return null;
     const view = viewport2.getBoundingClientRect();
@@ -27368,17 +27554,17 @@ function Gantt({
       bottom: view.top + viewport2.clientHeight
     };
   }, [labelWidth]);
-  const timelineRectRef = React84.useRef(timelineRect);
+  const timelineRectRef = React82.useRef(timelineRect);
   timelineRectRef.current = timelineRect;
-  const anchorToVisible = React84.useCallback((_anchor, rect) => {
+  const anchorToVisible = React82.useCallback((_anchor, rect) => {
     const viewport2 = timelineRectRef.current();
     return viewport2 && visibleSegment(rect, viewport2) || rect;
   }, []);
-  const timelineBoundary = React84.useCallback(
+  const timelineBoundary = React82.useCallback(
     () => timelineRectRef.current(),
     []
   );
-  const latest = React84.useRef({
+  const latest = React82.useRef({
     trackHandlers,
     focusCell: setActiveId,
     model,
@@ -27398,8 +27584,8 @@ function Gantt({
     nameFor,
     labels
   };
-  const cellRefs = React84.useRef(/* @__PURE__ */ new Map());
-  const rowContext = React84.useMemo(
+  const cellRefs = React82.useRef(/* @__PURE__ */ new Map());
+  const rowContext = React82.useMemo(
     () => ({
       register: (id) => {
         let ref2 = cellRefs.current.get(id);
@@ -27684,7 +27870,7 @@ function Gantt({
     )
   ) });
 }
-var GanttToolbar = React84.memo(function GanttToolbar2({
+var GanttToolbar = React82.memo(function GanttToolbar2({
   toolbar,
   labels,
   scale,
@@ -27702,13 +27888,14 @@ var GanttToolbar = React84.memo(function GanttToolbar2({
 });
 
 // src/components/kanban/Kanban.tsx
-import * as React85 from "react";
+import * as React83 from "react";
 
 // src/components/kanban/Kanban.module.css
 var Kanban_default = {
   root: "Kanban_root",
   scroller: "Kanban_scroller",
   columns: "Kanban_columns",
+  placeholders: "Kanban_placeholders",
   column: "Kanban_column",
   header: "Kanban_header",
   actions: "Kanban_actions",
@@ -27730,11 +27917,12 @@ var Kanban_default = {
   footer: "Kanban_footer",
   count: "Kanban_count",
   skeleton: "Kanban_skeleton",
+  skeletonTitle: "Kanban_skeletonTitle",
   skeletonBadge: "Kanban_skeletonBadge"
 };
 
 // src/components/kanban/Kanban.tsx
-import { Fragment as Fragment40, jsx as jsx77, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment41, jsx as jsx77, jsxs as jsxs62 } from "react/jsx-runtime";
 var KANBAN_LABELS = {
   count: "\u041A\u0430\u0440\u0442\u043E\u0447\u0435\u043A: {count}",
   countLimit: "\u041A\u0430\u0440\u0442\u043E\u0447\u0435\u043A: {count} \u0438\u0437 {limit}",
@@ -27747,8 +27935,8 @@ var KANBAN_LABELS = {
   columnMoveFailed: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u044C \u043A\u043E\u043B\u043E\u043D\u043A\u0443 \xAB{column}\xBB, \u043E\u043D\u0430 \u0432\u0435\u0440\u043D\u0443\u043B\u0430\u0441\u044C \u043D\u0430 \u043C\u0435\u0441\u0442\u043E"
 };
 var SKELETON_CARDS = [3, 2, 1];
-var BoardContext = React85.createContext(null);
-var ItemIdContext = React85.createContext(null);
+var BoardContext = React83.createContext(null);
+var ItemIdContext = React83.createContext(null);
 var NARROW_REM = 40;
 var rootFontSize = () => typeof document === "undefined" ? 16 : Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
 function KanbanRoot(props) {
@@ -27799,6 +27987,7 @@ function KanbanBoard({
   canDrop,
   variant = "plain",
   loading = false,
+  loadingColumns = 3,
   disabled = false,
   labels: labelsProp,
   className,
@@ -27806,11 +27995,11 @@ function KanbanBoard({
   ...rest
 }) {
   const labels = { ...KANBAN_LABELS, ...labelsProp };
-  const kind = `kanban-${React85.useId()}`;
+  const kind = `kanban-${React83.useId()}`;
   const announce = useDragAnnouncer();
-  const [board, setBoard] = React85.useState(null);
+  const [board, setBoard] = React83.useState(null);
   const rootRef = useMergedRefs(setBoard, ref);
-  const boardRef = React85.useMemo(() => ({ current: board }), [board]);
+  const boardRef = React83.useMemo(() => ({ current: board }), [board]);
   const boardSize = useElementSize(boardRef);
   const narrow = boardSize !== null && boardSize.width < NARROW_REM * rootFontSize();
   const { capture: glideCards } = useFlipList({
@@ -27832,7 +28021,7 @@ function KanbanBoard({
   });
   const columnChanges = usePendingChanges(storedOrder, placeColumn);
   const order = columnChanges.shown;
-  const ordered = React85.useMemo(() => {
+  const ordered = React83.useMemo(() => {
     const known = new Map(columns.map((column) => [column.id, column]));
     const placed2 = order.flatMap((id) => {
       const column = known.get(id);
@@ -27840,7 +28029,7 @@ function KanbanBoard({
     });
     return [...placed2, ...columns.filter((column) => !order.includes(column.id))];
   }, [columns, order]);
-  const byId = React85.useMemo(
+  const byId = React83.useMemo(
     () => new Map(items.map((item) => [getId(item), item])),
     [items, getId]
   );
@@ -27899,11 +28088,14 @@ function KanbanBoard({
     return outcome;
   };
   const locked = disabled || loading;
-  const latest = React85.useRef({ byId, getItemHref, onItemOpen, getLabel });
+  const placeholders = loading && columns.length === 0;
+  const [placeholdersShown, setPlaceholdersShown] = React83.useState(placeholders);
+  if (placeholders && !placeholdersShown) setPlaceholdersShown(true);
+  const latest = React83.useRef({ byId, getItemHref, onItemOpen, getLabel });
   latest.current = { byId, getItemHref, onItemOpen, getLabel };
   const links = getItemHref !== void 0;
   const opens = onItemOpen !== void 0;
-  const context = React85.useMemo(
+  const context = React83.useMemo(
     () => ({
       disabled: locked,
       hrefOf: (id) => {
@@ -27942,13 +28134,28 @@ function KanbanBoard({
           snap: narrow ? "mandatory" : false,
           className: Kanban_default.scroller,
           "data-full-width": "true",
-          children: /* @__PURE__ */ jsx77(
+          children: placeholders ? (
+            // Before the columns arrive: placeholder columns in the column geometry.
+            /* @__PURE__ */ jsx77("div", { className: Kanban_default.placeholders, "aria-hidden": "true", children: Array.from({ length: loadingColumns }, (_, columnIndex) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: identical placeholder columns
+              /* @__PURE__ */ jsxs62("div", { className: Kanban_default.column, children: [
+                /* @__PURE__ */ jsx77("div", { className: cx(Kanban_default.header, hairline_default.bottom), children: /* @__PURE__ */ jsx77(Skeleton, { shape: "block", className: Kanban_default.skeletonTitle }) }),
+                /* @__PURE__ */ jsx77("div", { className: Kanban_default.body, children: /* @__PURE__ */ jsx77(
+                  SkeletonCards,
+                  {
+                    count: SKELETON_CARDS[columnIndex % SKELETON_CARDS.length] ?? 1,
+                    cardDepth
+                  }
+                ) })
+              ] }, columnIndex)
+            )) })
+          ) : /* @__PURE__ */ jsx77(
             Dnd.Sortable,
             {
               as: "ul",
               axis: "x",
               handle: true,
-              className: Kanban_default.columns,
+              className: cx(Kanban_default.columns, placeholdersShown && enterMotion_default.enterFade),
               items: ordered,
               getId: getColumnId,
               getLabel: (column) => formatLabel(labels.column, { column: column.title }),
@@ -27986,6 +28193,28 @@ function KanbanBoard({
     }
   ) });
 }
+function SkeletonCards({
+  count,
+  cardDepth
+}) {
+  return /* @__PURE__ */ jsx77("div", { className: Kanban_default.list, children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsxs62(
+    "div",
+    {
+      className: cx(Kanban_default.item, Kanban_default.skeleton),
+      "data-depth": cardDepth,
+      "data-surface": cardDepth !== void 0 || void 0,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx77(Skeleton, { lines: 2 }),
+        /* @__PURE__ */ jsxs62("div", { className: Kanban_default.footer, children: [
+          /* @__PURE__ */ jsx77(Skeleton, { shape: "block", className: Kanban_default.skeletonBadge }),
+          /* @__PURE__ */ jsx77(Skeleton, { shape: "circle", size: "s" })
+        ] })
+      ]
+    },
+    index
+  )) });
+}
 function KanbanColumnView({
   column,
   titleAs: Title,
@@ -28005,9 +28234,9 @@ function KanbanColumnView({
   disabled,
   labels
 }) {
-  const headingId = React85.useId();
-  const descriptionId = React85.useId();
-  const metaId = React85.useId();
+  const headingId = React83.useId();
+  const descriptionId = React83.useId();
+  const metaId = React83.useId();
   const count = cards.length;
   const full = column.limit !== void 0 && count >= column.limit;
   const countText = column.limit === void 0 ? formatLabel(labels.count, { count }) : formatLabel(labels.countLimit, { count, limit: column.limit });
@@ -28032,7 +28261,7 @@ function KanbanColumnView({
             "data-reorderable": reorderable || void 0,
             children: [
               /* @__PURE__ */ jsx77(Title, { id: headingId, className: cx(textRole_default.titleM, Kanban_default.title), children: column.title }),
-              loading ? null : /* @__PURE__ */ jsxs62(Fragment40, { children: [
+              loading ? null : /* @__PURE__ */ jsxs62(Fragment41, { children: [
                 /* @__PURE__ */ jsx77(Badge.Root, { color: full ? "orange" : column.color ?? "gray", "aria-hidden": "true", children: column.limit === void 0 ? count : `${count} / ${column.limit}` }),
                 /* @__PURE__ */ jsx77(VisuallyHidden, { children: countText })
               ] }),
@@ -28053,23 +28282,7 @@ function KanbanColumnView({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx77(ScrollContainer, { className: Kanban_default.body, children: /* @__PURE__ */ jsx77(Crossfade, { state: loading ? "loading" : "ready", className: Kanban_default.swap, children: loading ? /* @__PURE__ */ jsx77("div", { className: Kanban_default.list, children: Array.from({ length: skeletons }, (_, index) => /* @__PURE__ */ jsxs62(
-          "div",
-          {
-            className: cx(Kanban_default.item, Kanban_default.skeleton),
-            "data-depth": cardDepth,
-            "data-surface": cardDepth !== void 0 || void 0,
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ jsx77(Skeleton, { lines: 2 }),
-              /* @__PURE__ */ jsxs62("div", { className: Kanban_default.footer, children: [
-                /* @__PURE__ */ jsx77(Skeleton, { shape: "block", className: Kanban_default.skeletonBadge }),
-                /* @__PURE__ */ jsx77(Skeleton, { shape: "circle", size: "s" })
-              ] })
-            ]
-          },
-          index
-        )) }) : /* @__PURE__ */ jsx77("div", { className: Kanban_default.drop, children: /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsx77(ScrollContainer, { className: Kanban_default.body, children: /* @__PURE__ */ jsx77(Crossfade, { state: loading ? "loading" : "ready", className: Kanban_default.swap, children: loading ? /* @__PURE__ */ jsx77(SkeletonCards, { count: skeletons, cardDepth }) : /* @__PURE__ */ jsx77("div", { className: Kanban_default.drop, children: /* @__PURE__ */ jsx77(
           Dnd.Sortable,
           {
             as: "ul",
@@ -28102,9 +28315,9 @@ function KanbanItem({
   onKeyDown,
   ...rest
 }) {
-  const id = React85.useContext(ItemIdContext);
-  const board = React85.useContext(BoardContext);
-  const linkRef = React85.useRef(null);
+  const id = React83.useContext(ItemIdContext);
+  const board = React83.useContext(BoardContext);
+  const linkRef = React83.useRef(null);
   if (id === null || board === null) {
     throw new Error("Kanban.Item must be returned from Kanban.Root renderItem");
   }
@@ -28227,7 +28440,7 @@ var Kanban = {
 };
 
 // src/components/login-form/LoginForm.tsx
-import * as React86 from "react";
+import * as React84 from "react";
 
 // src/components/login-form/LoginForm.module.css
 var LoginForm_default = {
@@ -28267,7 +28480,7 @@ var FOOTER_ROLE = {
   xl: "body-m"
 };
 var useLoginFormSize = () => useOptionalControlSize() ?? "m";
-var AlignContext = React86.createContext("start");
+var AlignContext = React84.createContext("start");
 function LoginFormRoot({
   size: sizeProp,
   align = "start",
@@ -28295,7 +28508,7 @@ function LoginFormHeader({ className, children, ...rest }) {
 }
 LoginFormHeader.displayName = "LoginForm.Header";
 function LoginFormLogo({ className, children, ...rest }) {
-  const align = React86.useContext(AlignContext);
+  const align = React84.useContext(AlignContext);
   return /* @__PURE__ */ jsx78(
     "div",
     {
@@ -28468,7 +28681,7 @@ function NativeSelect({
 NativeSelect.displayName = "NativeSelect";
 
 // src/components/notification/Notification.tsx
-import * as React87 from "react";
+import * as React85 from "react";
 
 // src/components/notification/Notification.module.css
 var Notification_default = {
@@ -28513,7 +28726,7 @@ var REGION_LABEL_KEY = {
   "bottom-center": "regionBottomCenter",
   "bottom-right": "regionBottomRight"
 };
-var NotificationLabelsContext = React87.createContext(NOTIFICATION_LABELS);
+var NotificationLabelsContext = React85.createContext(NOTIFICATION_LABELS);
 var TONE_ICON = {
   info: "status.info",
   success: "status.success",
@@ -28536,7 +28749,7 @@ function CardView({
   stackExpanded = false,
   ...rest
 }) {
-  const labels = React87.useContext(NotificationLabelsContext);
+  const labels = React85.useContext(NotificationLabelsContext);
   const tier = useHostTier(sizeProp);
   const size = tier.size;
   const liveRole = tone === "danger" || tone === "warning" ? "alert" : "status";
@@ -28596,13 +28809,13 @@ function CardView({
   );
 }
 function CountdownLine({ duration, paused, onEnd }) {
-  const lineRef = React87.useRef(null);
-  const clockRef = React87.useRef(null);
-  const latest = React87.useRef({ paused, onEnd });
-  React87.useLayoutEffect(() => {
+  const lineRef = React85.useRef(null);
+  const clockRef = React85.useRef(null);
+  const latest = React85.useRef({ paused, onEnd });
+  React85.useLayoutEffect(() => {
     latest.current = { paused, onEnd };
   });
-  React87.useLayoutEffect(() => {
+  React85.useLayoutEffect(() => {
     const line = lineRef.current;
     if (!line || typeof line.animate !== "function") return;
     const clock = line.animate([{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], {
@@ -28618,7 +28831,7 @@ function CountdownLine({ duration, paused, onEnd }) {
       clock.cancel();
     };
   }, [duration]);
-  React87.useLayoutEffect(() => {
+  React85.useLayoutEffect(() => {
     const clock = clockRef.current;
     if (!clock) return;
     if (paused) clock.pause();
@@ -28634,7 +28847,7 @@ function subscribeVisibility(listener) {
   return () => document.removeEventListener("visibilitychange", listener);
 }
 function useDocumentHidden() {
-  return React87.useSyncExternalStore(
+  return React85.useSyncExternalStore(
     subscribeVisibility,
     () => document.visibilityState === "hidden",
     () => false
@@ -28667,7 +28880,7 @@ function ToastCard({ item, paused, onDismiss, stackDepth, stackExpanded }) {
 }
 
 // src/components/notification/NotificationStore.tsx
-import * as React88 from "react";
+import * as React86 from "react";
 import { jsx as jsx81, jsxs as jsxs65 } from "react/jsx-runtime";
 var DEFAULT_DURATION = 5e3;
 var PEEK_VISIBLE = 3;
@@ -28716,18 +28929,18 @@ function NotificationStack({
   onDismiss,
   onExited
 }) {
-  const labels = React88.useContext(NotificationLabelsContext);
-  const [expanded, setExpanded] = React88.useState(false);
-  const [heights, setHeights] = React88.useState({});
-  const collapseTimerRef = React88.useRef(null);
-  const lastLayoutRef = React88.useRef(/* @__PURE__ */ new Map());
-  const listRef = React88.useRef(null);
-  const hoveredRef = React88.useRef(false);
-  const focusedRef = React88.useRef(false);
-  const returnRef = React88.useRef(null);
+  const labels = React86.useContext(NotificationLabelsContext);
+  const [expanded, setExpanded] = React86.useState(false);
+  const [heights, setHeights] = React86.useState({});
+  const collapseTimerRef = React86.useRef(null);
+  const lastLayoutRef = React86.useRef(/* @__PURE__ */ new Map());
+  const listRef = React86.useRef(null);
+  const hoveredRef = React86.useRef(false);
+  const focusedRef = React86.useRef(false);
+  const returnRef = React86.useRef(null);
   const top = isTop(position);
-  const step2 = React88.useMemo(space2Px, []);
-  const syncExpanded = React88.useCallback(() => {
+  const step2 = React86.useMemo(space2Px, []);
+  const syncExpanded = React86.useCallback(() => {
     if (collapseTimerRef.current !== null) {
       clearTimeout(collapseTimerRef.current);
       collapseTimerRef.current = null;
@@ -28738,29 +28951,29 @@ function NotificationStack({
       collapseTimerRef.current = window.setTimeout(() => setExpanded(false), COLLAPSE_DELAY_MS);
     }
   }, []);
-  const handleHover = React88.useCallback(
+  const handleHover = React86.useCallback(
     (hovered) => {
       hoveredRef.current = hovered;
       syncExpanded();
     },
     [syncExpanded]
   );
-  React88.useLayoutEffect(() => {
+  React86.useLayoutEffect(() => {
     if (!focusedRef.current) return;
     if (listRef.current?.contains(document.activeElement)) return;
     focusedRef.current = false;
     syncExpanded();
   });
-  React88.useEffect(
+  React86.useEffect(
     () => () => {
       if (collapseTimerRef.current !== null) clearTimeout(collapseTimerRef.current);
     },
     []
   );
-  const reportHeight = React88.useCallback((id, height) => {
+  const reportHeight = React86.useCallback((id, height) => {
     setHeights((prev) => prev[id] === height ? prev : { ...prev, [id]: height });
   }, []);
-  React88.useEffect(() => {
+  React86.useEffect(() => {
     setHeights((prev) => {
       const ids = new Set(items.map((n) => n.id));
       const stale = Object.keys(prev).filter((id) => !ids.has(id));
@@ -28787,12 +29000,12 @@ function NotificationStack({
   });
   const frontHeight = active.length > 0 ? heights[active[0].id] ?? 0 : 0;
   const stackHeight = active.length === 0 ? 0 : expanded ? flowHeight - step2 : frontHeight + Math.min(active.length - 1, PEEK_VISIBLE - 1) * step2;
-  const nextFocus = React88.useCallback((leaving) => {
+  const nextFocus = React86.useCallback((leaving) => {
     const cards = Array.from(listRef.current?.children ?? []);
     const open = cards.find((card) => card !== leaving && card.dataset.state === "open");
     return open ?? returnRef.current;
   }, []);
-  React88.useLayoutEffect(() => {
+  React86.useLayoutEffect(() => {
     for (const [id, layout] of layouts) lastLayoutRef.current.set(id, layout);
     const ids = new Set(items.map((n) => n.id));
     for (const id of lastLayoutRef.current.keys()) {
@@ -28849,7 +29062,7 @@ function NotificationStack({
     }
   );
 }
-var NotificationStackItem = React88.memo(function NotificationStackItem2({
+var NotificationStackItem = React86.memo(function NotificationStackItem2({
   item,
   position,
   index,
@@ -28864,19 +29077,19 @@ var NotificationStackItem = React88.memo(function NotificationStackItem2({
   onHeight,
   nextFocus
 }) {
-  const ref = React88.useRef(null);
+  const ref = React86.useRef(null);
   const { id } = item;
-  React88.useLayoutEffect(() => {
+  React86.useLayoutEffect(() => {
     const node = ref.current;
     if (closing && node) handoffFocus(node, nextFocus(node));
   }, [closing, nextFocus]);
-  React88.useLayoutEffect(() => {
+  React86.useLayoutEffect(() => {
     const node = ref.current;
     return () => {
       if (node) handoffFocus(node, nextFocus(node));
     };
   }, [nextFocus]);
-  React88.useLayoutEffect(() => {
+  React86.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     onHeight(id, el.offsetHeight);
@@ -28887,10 +29100,10 @@ var NotificationStackItem = React88.memo(function NotificationStackItem2({
   }, [id, onHeight]);
   const state = closing ? "closed" : "open";
   const { axis, sign } = swipeDirection(position);
-  const dragRef = React88.useRef(
+  const dragRef = React86.useRef(
     null
   );
-  const [swiping, setSwiping] = React88.useState(false);
+  const [swiping, setSwiping] = React86.useState(false);
   const swipeAmount = (client, origin) => {
     const toward = (client - origin) * sign;
     if (toward >= 0) return toward;
@@ -28992,7 +29205,7 @@ function NotificationToaster({
   onDismiss,
   onExited
 }) {
-  const grouped = React88.useMemo(() => {
+  const grouped = React86.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const entry of entries) {
       if (!map.has(entry.position)) map.set(entry.position, /* @__PURE__ */ new Map());
@@ -29041,25 +29254,25 @@ function NotificationProvider({
   labels: labelsProp
 }) {
   const labels = useLabels(NOTIFICATION_LABELS, labelsProp);
-  const [entries, setEntries] = React88.useState([]);
-  const entriesRef = React88.useRef(entries);
-  const update2 = React88.useCallback(
+  const [entries, setEntries] = React86.useState([]);
+  const entriesRef = React86.useRef(entries);
+  const update2 = React86.useCallback(
     (change) => {
       entriesRef.current = change(entriesRef.current);
       setEntries(entriesRef.current);
     },
     []
   );
-  const announcedRef = React88.useRef(/* @__PURE__ */ new Set());
-  const exitTimersRef = React88.useRef(/* @__PURE__ */ new Map());
-  React88.useEffect(() => {
+  const announcedRef = React86.useRef(/* @__PURE__ */ new Set());
+  const exitTimersRef = React86.useRef(/* @__PURE__ */ new Map());
+  React86.useEffect(() => {
     const timers = exitTimersRef.current;
     return () => {
       for (const timer of timers.values()) clearTimeout(timer);
       timers.clear();
     };
   }, []);
-  const remove = React88.useCallback(
+  const remove = React86.useCallback(
     (ids) => {
       const target = new Set(ids);
       for (const id of ids) {
@@ -29072,7 +29285,7 @@ function NotificationProvider({
     },
     [update2]
   );
-  const startExit = React88.useCallback(
+  const startExit = React86.useCallback(
     (ids, reason) => {
       const leaving = entriesRef.current.filter(
         (n) => ids.includes(n.id) && !announcedRef.current.has(n.id)
@@ -29096,20 +29309,20 @@ function NotificationProvider({
     },
     [remove, update2]
   );
-  const dismiss = React88.useCallback((id) => startExit([id], "dismiss"), [startExit]);
-  const leave = React88.useCallback(
+  const dismiss = React86.useCallback((id) => startExit([id], "dismiss"), [startExit]);
+  const leave = React86.useCallback(
     (id, reason) => startExit([id], reason),
     [startExit]
   );
-  const exited = React88.useCallback((id) => remove([id]), [remove]);
-  const dismissAll = React88.useCallback(
+  const exited = React86.useCallback((id) => remove([id]), [remove]);
+  const dismissAll = React86.useCallback(
     () => startExit(
       entriesRef.current.filter((n) => !n.dismissing).map((n) => n.id),
       "dismiss"
     ),
     [startExit]
   );
-  const notify = React88.useCallback(
+  const notify = React86.useCallback(
     (options) => {
       const id = newId();
       const record = {
@@ -29135,8 +29348,8 @@ function NotificationProvider({
     },
     [position, max, update2, startExit]
   );
-  const publicItems = React88.useMemo(() => entries.filter((n) => !n.dismissing), [entries]);
-  const value = React88.useMemo(
+  const publicItems = React86.useMemo(() => entries.filter((n) => !n.dismissing), [entries]);
+  const value = React86.useMemo(
     () => ({ items: publicItems, notify, dismiss, dismissAll }),
     [publicItems, notify, dismiss, dismissAll]
   );
@@ -29150,7 +29363,7 @@ function useNotifications() {
 }
 
 // src/components/progress-circle/ProgressCircle.tsx
-import * as React89 from "react";
+import * as React87 from "react";
 
 // src/components/progress-circle/ProgressCircle.module.css
 var ProgressCircle_default = {
@@ -29168,7 +29381,7 @@ var ProgressCircle_default = {
 };
 
 // src/components/progress-circle/ProgressCircle.tsx
-import { Fragment as Fragment41, jsx as jsx82, jsxs as jsxs66 } from "react/jsx-runtime";
+import { Fragment as Fragment42, jsx as jsx82, jsxs as jsxs66 } from "react/jsx-runtime";
 var HAIRLINE_GAP = RING_DATA_STROKE * 0.75;
 var LOADING_ROWS3 = 3;
 function arcStyle(start, length) {
@@ -29190,7 +29403,7 @@ function SegmentArcs({
 }) {
   if (gap === "hairline" && arcs.length > 1) {
     const inset = (RING_DATA_STROKE + HAIRLINE_GAP) / 2;
-    return /* @__PURE__ */ jsx82(Fragment41, { children: arcs.map((a, i) => {
+    return /* @__PURE__ */ jsx82(Fragment42, { children: arcs.map((a, i) => {
       const own = a.rest ? { className: void 0 } : fillProps(a.fill);
       return /* @__PURE__ */ jsx82(
         RingCircle,
@@ -29206,7 +29419,7 @@ function SegmentArcs({
   const parts = arcs.filter((a) => !a.rest);
   const first = parts[0];
   const last = parts[parts.length - 1];
-  return /* @__PURE__ */ jsxs66(Fragment41, { children: [
+  return /* @__PURE__ */ jsxs66(Fragment42, { children: [
     parts.map((a, i) => {
       const own = fillProps(a.fill);
       return /* @__PURE__ */ jsx82(
@@ -29219,7 +29432,7 @@ function SegmentArcs({
         i
       );
     }),
-    first && last && !closed ? /* @__PURE__ */ jsxs66(Fragment41, { children: [
+    first && last && !closed ? /* @__PURE__ */ jsxs66(Fragment42, { children: [
       /* @__PURE__ */ jsx82(Cap, { position: first.start, fill: first.fill }),
       /* @__PURE__ */ jsx82(Cap, { position: last.start + last.length, fill: last.fill })
     ] }) : null
@@ -29247,7 +29460,7 @@ function ProgressCircle(props) {
     labels,
     ...rest
   } = props;
-  const descriptionId = React89.useId();
+  const descriptionId = React87.useId();
   const { size, provide } = useHostTier(sizeProp);
   const segmentLabels = useLabels(PROGRESS_SEGMENTS_LABELS, labels);
   const isText2 = typeof children === "string" || typeof children === "number";
@@ -29324,7 +29537,7 @@ function ProgressCircle(props) {
       }
     );
   }
-  const body = /* @__PURE__ */ jsxs66(Fragment41, { children: [
+  const body = /* @__PURE__ */ jsxs66(Fragment42, { children: [
     /* @__PURE__ */ jsx82(RegionSwap, { state: loading ? "loading" : "data", fill: true, children: loading ? /* @__PURE__ */ jsx82(Skeleton, { shape: "block", className: ProgressCircle_default.ringSkeleton }) : ring }),
     loading ? null : description,
     showInner ? /* @__PURE__ */ jsx82(
@@ -29355,7 +29568,7 @@ function ProgressCircle(props) {
 }
 
 // src/components/radio/Radio.tsx
-import * as React90 from "react";
+import * as React88 from "react";
 
 // src/components/radio/Radio.module.css
 var Radio_default = {
@@ -29366,7 +29579,7 @@ var Radio_default = {
 };
 
 // src/components/radio/Radio.tsx
-import { Fragment as Fragment42, jsx as jsx83, jsxs as jsxs67 } from "react/jsx-runtime";
+import { Fragment as Fragment43, jsx as jsx83, jsxs as jsxs67 } from "react/jsx-runtime";
 var RADIO_GROUP_LABELS = { optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E" };
 var [RadioGroupProvider, useRadioGroupContext] = createComponentContext("Radio.Group");
 function RadioGroup({
@@ -29399,7 +29612,7 @@ function RadioGroup({
   const disabled = useInheritedDisabled(disabledProp);
   const ids = useFieldFrame(id, { label, hint, error, invalid }, ariaDescribedBy);
   const name = nameProp ?? ids.controlId;
-  const reportChange = React90.useCallback(
+  const reportChange = React88.useCallback(
     (next) => {
       if (next !== void 0) onValueChange?.(next);
     },
@@ -29410,7 +29623,7 @@ function RadioGroup({
     defaultValue,
     onChange: reportChange
   });
-  const ctxValue = React90.useMemo(
+  const ctxValue = React88.useMemo(
     () => ({ name, value, setValue, size, disabled, invalid: ids.invalid, required }),
     [name, value, setValue, size, disabled, ids.invalid, required]
   );
@@ -29479,7 +29692,7 @@ function RadioRoot({
       hint,
       hintTone,
       className: cx(Radio_default.root, className),
-      control: /* @__PURE__ */ jsxs67(Fragment42, { children: [
+      control: /* @__PURE__ */ jsxs67(Fragment43, { children: [
         /* @__PURE__ */ jsx83(
           "input",
           {
@@ -29579,7 +29792,7 @@ var Sheet = {
 };
 
 // src/components/sparkline/Sparkline.tsx
-import * as React91 from "react";
+import * as React89 from "react";
 
 // src/components/sparkline/geometry.ts
 var r = (n) => Math.round(n * 100) / 100;
@@ -29697,7 +29910,7 @@ var Sparkline_default = {
 };
 
 // src/components/sparkline/Sparkline.tsx
-import { Fragment as Fragment43, jsx as jsx86, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment44, jsx as jsx86, jsxs as jsxs68 } from "react/jsx-runtime";
 var SPARKLINE_LABELS = {
   point: "{label}: {value}",
   period: "{first} \u2013 {last}",
@@ -29747,19 +29960,19 @@ function Sparkline({
   const bars = variant === "bars";
   const compact = layout === "compact";
   const restIndex = highlight !== void 0 && highlight >= 0 && highlight <= last ? Math.floor(highlight) : latestPresent(data);
-  const [active, setActive] = React91.useState(null);
+  const [active, setActive] = React89.useState(null);
   const index = active === null ? restIndex : Math.min(active, last);
   const atRest = active === null;
   const point = data[index];
-  const plotRef = React91.useRef(null);
-  const [pointer, setPointer] = React91.useState(null);
-  const referenceId = React91.useId();
+  const plotRef = React89.useRef(null);
+  const [pointer, setPointer] = React89.useState(null);
+  const referenceId = React89.useId();
   const gradientId = `sparkline-${referenceId.replace(/[^\w-]/g, "")}`;
-  const [series, setSeries] = React91.useState({ data, version: 0 });
+  const [series, setSeries] = React89.useState({ data, version: 0 });
   if (series.data !== data) setSeries({ data, version: series.version + 1 });
   const version = series.data === data ? series.version : series.version + 1;
   const stateKey = loading ? "loading" : "data";
-  const geometry = React91.useMemo(() => {
+  const geometry = React89.useMemo(() => {
     const values = data.map((p) => p.value);
     const scale = scaleOf(values, [min, max, reference, bars ? 0 : void 0]);
     const count = Math.max(data.length, 1);
@@ -29780,7 +29993,7 @@ function Sparkline({
     };
   }, [data, bars, curve, min, max, reference]);
   const { x, y } = geometry;
-  const drawing = React91.useMemo(() => {
+  const drawing = React89.useMemo(() => {
     const { paths } = geometry;
     if (!paths) return null;
     return /* @__PURE__ */ jsxs68("div", { className: Sparkline_default.drawing, "aria-hidden": "true", children: [
@@ -29792,7 +30005,7 @@ function Sparkline({
           preserveAspectRatio: "none",
           "aria-hidden": "true",
           children: [
-            variant === "area" && paths.area ? /* @__PURE__ */ jsxs68(Fragment43, { children: [
+            variant === "area" && paths.area ? /* @__PURE__ */ jsxs68(Fragment44, { children: [
               /* @__PURE__ */ jsx86("defs", { children: /* @__PURE__ */ jsxs68("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
                 /* @__PURE__ */ jsx86("stop", { offset: "0", className: Sparkline_default.fadeTop }),
                 /* @__PURE__ */ jsx86("stop", { offset: "1", className: Sparkline_default.fadeBottom })
@@ -29846,7 +30059,7 @@ function Sparkline({
       "data-size": compact ? "xs" : void 0,
       "aria-busy": loading || void 0,
       children: [
-        compact ? null : /* @__PURE__ */ jsxs68(Fragment43, { children: [
+        compact ? null : /* @__PURE__ */ jsxs68(Fragment44, { children: [
           /* @__PURE__ */ jsxs68("div", { className: Sparkline_default.head, children: [
             /* @__PURE__ */ jsx86("span", { className: Sparkline_default.label, children: label }),
             /* @__PURE__ */ jsx86(RegionSwap, { state: stateKey, className: Sparkline_default.date, children: loading ? /* @__PURE__ */ jsx86(Skeleton, { shape: "text", size: "s", className: Sparkline_default.dateSkeleton }) : headDate })
@@ -29974,7 +30187,7 @@ function Sparkline({
 }
 
 // src/components/stepper/Stepper.tsx
-import * as React92 from "react";
+import * as React90 from "react";
 
 // src/components/stepper/Stepper.module.css
 var Stepper_default = {
@@ -29997,7 +30210,7 @@ var STEPPER_LABELS = {
 };
 var [StepperRootProvider, useStepperRootContext] = createComponentContext("Stepper");
 var [StepperItemProvider, useStepperItemContext] = createComponentContext("Stepper.Item");
-var StepperIndexContext = React92.createContext(null);
+var StepperIndexContext = React90.createContext(null);
 function deriveStatus(index, current) {
   if (index < current) return "completed";
   if (index === current) return "current";
@@ -30022,14 +30235,14 @@ function StepperRoot({
   });
   const labels = useLabels(STEPPER_LABELS, labelsProp);
   const tier = useHostTier(sizeProp);
-  const contextValue = React92.useMemo(
+  const contextValue = React90.useMemo(
     () => ({ value, select: setValue, orientation, arrows, labels }),
     [value, setValue, orientation, arrows, labels]
   );
   let nextIndex = 0;
   const items = [];
-  for (const child of React92.Children.toArray(children)) {
-    if (!React92.isValidElement(child) || child.type !== StepperItem) {
+  for (const child of React90.Children.toArray(children)) {
+    if (!React90.isValidElement(child) || child.type !== StepperItem) {
       items.push(child);
       continue;
     }
@@ -30062,12 +30275,12 @@ function StepperItem({
   ...rest
 }) {
   const { value, select, orientation, arrows, labels } = useStepperRootContext();
-  const index = React92.useContext(StepperIndexContext);
+  const index = React90.useContext(StepperIndexContext);
   if (index === null) {
     throw new Error("Stepper.Item must be a direct child of Stepper.Root");
   }
   const status = statusProp ?? deriveStatus(index, value);
-  const itemContext = React92.useMemo(() => ({ index, status }), [index, status]);
+  const itemContext = React90.useMemo(() => ({ index, status }), [index, status]);
   const spokenStatus = status === "completed" ? labels.completed : status === "danger" ? labels.danger : null;
   return /* @__PURE__ */ jsx87(StepperItemProvider, { value: itemContext, children: /* @__PURE__ */ jsxs69("li", { className: Stepper_default.item, children: [
     /* @__PURE__ */ jsx87("span", { className: Stepper_default.separator, "aria-hidden": "true", children: /* @__PURE__ */ jsx87(Icon, { name: "nav.chevronRight", strokeWidth: 2 }) }),
@@ -30147,7 +30360,7 @@ var Switch_default = {
 };
 
 // src/components/switch/Switch.tsx
-import { Fragment as Fragment44, jsx as jsx88, jsxs as jsxs70 } from "react/jsx-runtime";
+import { Fragment as Fragment45, jsx as jsx88, jsxs as jsxs70 } from "react/jsx-runtime";
 var SWITCH_LABELS = { optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E" };
 function SwitchRoot({
   id,
@@ -30205,7 +30418,7 @@ function SwitchRoot({
       hintTone,
       error,
       className: cx(Switch_default.root, className),
-      control: /* @__PURE__ */ jsxs70(Fragment44, { children: [
+      control: /* @__PURE__ */ jsxs70(Fragment45, { children: [
         /* @__PURE__ */ jsx88(
           "input",
           {
@@ -30252,7 +30465,7 @@ var Switch = {
 };
 
 // src/components/tabs/Tabs.tsx
-import * as React93 from "react";
+import * as React91 from "react";
 
 // src/components/tabs/Tabs.module.css
 var Tabs_default = {
@@ -30276,12 +30489,12 @@ var Tabs_default = {
 };
 
 // src/components/tabs/Tabs.tsx
-import { Fragment as Fragment45, jsx as jsx89, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment46, jsx as jsx89, jsxs as jsxs71 } from "react/jsx-runtime";
 var TABS_LABELS = {
   remove: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u0432\u043A\u043B\u0430\u0434\u043A\u0443 \xAB{label}\xBB"
 };
 var [TabsProvider, useTabsContext] = createComponentContext("Tabs");
-var CollapseContext2 = React93.createContext("full");
+var CollapseContext2 = React91.createContext("full");
 var idPart = (value) => value.replace(/[^A-Za-z0-9_-]/g, "_");
 var tabId = (rootId, value) => `prime-ui-kit-tab-${rootId}-${idPart(value)}`;
 var panelId = (rootId, value) => `prime-ui-kit-panel-${rootId}-${idPart(value)}`;
@@ -30302,11 +30515,11 @@ function TabsRoot({
   style,
   ...rest
 }) {
-  const rootId = React93.useId();
+  const rootId = React91.useId();
   const tier = useHostTier(sizeProp);
   const size = tier.size;
-  const [panels, setPanels] = React93.useState(() => /* @__PURE__ */ new Set());
-  const registerPanel = React93.useCallback((panel) => {
+  const [panels, setPanels] = React91.useState(() => /* @__PURE__ */ new Set());
+  const registerPanel = React91.useCallback((panel) => {
     setPanels((prev) => new Set(prev).add(panel));
     return () => setPanels((prev) => {
       const next = new Set(prev);
@@ -30320,8 +30533,8 @@ function TabsRoot({
     onChange: onValueChange
   });
   const resolvedLabels = useLabels(TABS_LABELS, labels);
-  const userChangeRef = React93.useRef(false);
-  const select = React93.useCallback(
+  const userChangeRef = React91.useRef(false);
+  const select = React91.useCallback(
     (next) => {
       if (next === activeValue) return;
       userChangeRef.current = true;
@@ -30329,7 +30542,7 @@ function TabsRoot({
     },
     [activeValue, setActiveValue]
   );
-  const context = React93.useMemo(
+  const context = React91.useMemo(
     () => ({
       activeValue,
       select,
@@ -30442,9 +30655,9 @@ function placeFolder(list, folder, activeValue, animate) {
   return column;
 }
 function useListLayout(listRef, folderRef, userChangeRef, activeValue, horizontal) {
-  const [collapse, setCollapse] = React93.useState("full");
-  const [column, setColumn] = React93.useState(!horizontal);
-  const layout = React93.useCallback(
+  const [collapse, setCollapse] = React91.useState("full");
+  const [column, setColumn] = React91.useState(!horizontal);
+  const layout = React91.useCallback(
     (animate) => {
       const list = listRef.current;
       const folder = folderRef.current;
@@ -30458,7 +30671,7 @@ function useListLayout(listRef, folderRef, userChangeRef, activeValue, horizonta
     },
     [listRef, folderRef, activeValue, horizontal]
   );
-  React93.useLayoutEffect(() => {
+  React91.useLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
     const userChange = userChangeRef.current && !prefersReducedMotion();
@@ -30476,15 +30689,15 @@ function useListLayout(listRef, folderRef, userChangeRef, activeValue, horizonta
     return () => mutations.disconnect();
   }, [listRef, userChangeRef, activeValue, layout]);
   useResizeEffect(listRef, () => layout(false), { children: true });
-  React93.useLayoutEffect(() => {
+  React91.useLayoutEffect(() => {
     userChangeRef.current = false;
   });
   return { collapse, column };
 }
 function TabsList({ children, className, ref, ...rest }) {
   const { orientation, activeValue, select, userChangeRef } = useTabsContext();
-  const listRef = React93.useRef(null);
-  const folderRef = React93.useRef(null);
+  const listRef = React91.useRef(null);
+  const folderRef = React91.useRef(null);
   const mergedRef = useMergedRefs(listRef, ref);
   const horizontal = orientation === "horizontal";
   const { collapse, column } = useListLayout(
@@ -30541,14 +30754,14 @@ function TabsList({ children, className, ref, ...rest }) {
 }
 TabsList.displayName = "Tabs.List";
 function hasChildOfType2(children, type) {
-  return React93.Children.toArray(children).some(
-    (child) => React93.isValidElement(child) && child.type === type
+  return React91.Children.toArray(children).some(
+    (child) => React91.isValidElement(child) && child.type === type
   );
 }
 function labelOf2(children) {
-  for (const child of React93.Children.toArray(children)) {
+  for (const child of React91.Children.toArray(children)) {
     if (typeof child === "string" || typeof child === "number") return child;
-    if (React93.isValidElement(child) && child.type === TabsLabel) {
+    if (React91.isValidElement(child) && child.type === TabsLabel) {
       return child.props.children;
     }
   }
@@ -30567,10 +30780,10 @@ function TabsItem({
   ...rest
 }) {
   const { activeValue, select, size, rootId, labels, panels } = useTabsContext();
-  const collapse = React93.useContext(CollapseContext2);
-  const [tooltipOpen, setTooltipOpen] = React93.useState(false);
-  const [removing, setRemoving] = React93.useState(false);
-  const tabRef = React93.useRef(null);
+  const collapse = React91.useContext(CollapseContext2);
+  const [tooltipOpen, setTooltipOpen] = React91.useState(false);
+  const [removing, setRemoving] = React91.useState(false);
+  const tabRef = React91.useRef(null);
   const mergedRef = useMergedRefs(tabRef, ref);
   const isActive = activeValue === value;
   const id = tabId(rootId, value);
@@ -30698,9 +30911,9 @@ function TabsIcon({ children, className, ...rest }) {
 TabsIcon.displayName = "Tabs.Icon";
 function TabsLabel({ children, className, ...rest }) {
   const id = useTextPartId("label");
-  const iconOnly = React93.useContext(CollapseContext2) === "icon";
+  const iconOnly = React91.useContext(CollapseContext2) === "icon";
   const text = typeof children === "string" || typeof children === "number" ? String(children) : "";
-  return /* @__PURE__ */ jsxs71(Fragment45, { children: [
+  return /* @__PURE__ */ jsxs71(Fragment46, { children: [
     /* @__PURE__ */ jsx89(
       "span",
       {
@@ -30748,7 +30961,7 @@ function TabsPanel({ value, ...rest }) {
 TabsPanel.displayName = "Tabs.Panel";
 function TabsPanelContent({ value, children, className, ...rest }) {
   const { rootId, registerPanel } = useTabsContext();
-  React93.useLayoutEffect(() => registerPanel(value), [registerPanel, value]);
+  React91.useLayoutEffect(() => registerPanel(value), [registerPanel, value]);
   return /* @__PURE__ */ jsx89(
     "div",
     {
@@ -30775,10 +30988,10 @@ var Tabs = {
 };
 
 // src/components/tag-select/TagSelect.tsx
-import * as React97 from "react";
+import * as React95 from "react";
 
 // src/components/tag-select/TagOptionMenu.tsx
-import * as React94 from "react";
+import * as React92 from "react";
 
 // src/components/tag-select/TagSelect.module.css
 var TagSelect_default = {
@@ -30809,7 +31022,7 @@ var TagSelect_default = {
 };
 
 // src/components/tag-select/TagOptionMenu.tsx
-import { Fragment as Fragment46, jsx as jsx90, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment47, jsx as jsx90, jsxs as jsxs72 } from "react/jsx-runtime";
 var TAG_COLORS = [
   "gray",
   "red",
@@ -30835,8 +31048,8 @@ function TagOptionMenu({
   pending,
   saving
 }) {
-  const [draft, setDraft] = React94.useState(label);
-  React94.useEffect(() => {
+  const [draft, setDraft] = React92.useState(label);
+  React92.useEffect(() => {
     if (open) setDraft(label);
   }, [open, label]);
   const commitLabel = () => {
@@ -30893,7 +31106,7 @@ function TagOptionMenu({
           ]
         }
       ) : null,
-      onUpdate ? /* @__PURE__ */ jsxs72(Fragment46, { children: [
+      onUpdate ? /* @__PURE__ */ jsxs72(Fragment47, { children: [
         /* @__PURE__ */ jsx90(Divider, { className: menu_default.separator }),
         /* @__PURE__ */ jsx90("div", { className: cx(textRole_default.caption, menu_default.groupLabel), children: labels.colors }),
         /* @__PURE__ */ jsx90("div", { className: cx(fieldTierClass, menu_default.tier), "data-size": "s", children: TAG_COLORS.map((hue) => /* @__PURE__ */ jsxs72(
@@ -30916,7 +31129,7 @@ function TagOptionMenu({
 }
 
 // src/components/tag-select/useChipOverflow.ts
-import * as React95 from "react";
+import * as React93 from "react";
 function useChipOverflow({
   rowRef,
   measureRef,
@@ -30925,8 +31138,8 @@ function useChipOverflow({
   inputCollapsed
 }) {
   const count = chips.length;
-  const [visible, setVisible] = React95.useState(count);
-  const recompute = React95.useCallback(() => {
+  const [visible, setVisible] = React93.useState(count);
+  const recompute = React93.useCallback(() => {
     const row = rowRef.current;
     const measure3 = measureRef.current;
     if (!row || !measure3) return;
@@ -30953,7 +31166,7 @@ function useChipOverflow({
     }
     setVisible((prev) => prev === next ? prev : next);
   }, [rowRef, measureRef, inputRef, inputCollapsed, chips]);
-  React95.useLayoutEffect(() => {
+  React93.useLayoutEffect(() => {
     recompute();
   }, [recompute]);
   useResizeEffect(rowRef, recompute);
@@ -30962,8 +31175,8 @@ function useChipOverflow({
 }
 
 // src/components/tag-select/VirtualOptions.tsx
-import * as React96 from "react";
-import { Fragment as Fragment48, jsx as jsx91, jsxs as jsxs73 } from "react/jsx-runtime";
+import * as React94 from "react";
+import { Fragment as Fragment49, jsx as jsx91, jsxs as jsxs73 } from "react/jsx-runtime";
 var ONE_GROUP3 = () => 0;
 function VirtualOptions({
   count,
@@ -30974,18 +31187,18 @@ function VirtualOptions({
   renderOption,
   ref
 }) {
-  const startRef = React96.useRef(null);
-  const offset = React96.useCallback(() => {
+  const startRef = React94.useRef(null);
+  const offset = React94.useCallback(() => {
     const scroller = scrollRef.current;
     const start = startRef.current;
     if (!scroller || !start) return 0;
     return start.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
   }, [scrollRef]);
-  const estimate = React96.useMemo(
+  const estimate = React94.useMemo(
     () => readCssLengthPx(`--prime-control-${size}-height`, 36),
     [size]
   );
-  const estimateSize = React96.useCallback(() => estimate, [estimate]);
+  const estimateSize = React94.useCallback(() => estimate, [estimate]);
   const virtual = useVirtualRows({
     count,
     scrollRef,
@@ -30996,7 +31209,7 @@ function VirtualOptions({
     pinned
   });
   const { startOf } = virtual;
-  React96.useImperativeHandle(
+  React94.useImperativeHandle(
     ref,
     () => ({
       reveal(index) {
@@ -31014,9 +31227,9 @@ function VirtualOptions({
   );
   const laid = rowGaps(virtual);
   const spacer = (key, height) => height > 0 ? /* @__PURE__ */ jsx91("div", { className: TagSelect_default.spacer, style: { height }, "aria-hidden": "true" }, key) : null;
-  return /* @__PURE__ */ jsxs73(Fragment48, { children: [
+  return /* @__PURE__ */ jsxs73(Fragment49, { children: [
     /* @__PURE__ */ jsx91("div", { ref: startRef, "aria-hidden": "true" }),
-    laid.rows.map(({ index, gap }) => /* @__PURE__ */ jsxs73(React96.Fragment, { children: [
+    laid.rows.map(({ index, gap }) => /* @__PURE__ */ jsxs73(React94.Fragment, { children: [
       spacer("gap", gap),
       renderOption(index, virtual.measure(index))
     ] }, getKey(index))),
@@ -31025,7 +31238,7 @@ function VirtualOptions({
 }
 
 // src/components/tag-select/TagSelect.tsx
-import { Fragment as Fragment49, jsx as jsx92, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment50, jsx as jsx92, jsxs as jsxs74 } from "react/jsx-runtime";
 var TAG_SELECT_LABELS = {
   panelHint: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0430\u0440\u0438\u0430\u043D\u0442 \u0438\u043B\u0438 \u0441\u043E\u0437\u0434\u0430\u0439\u0442\u0435 \u043D\u043E\u0432\u044B\u0439",
   create: "\u0421\u043E\u0437\u0434\u0430\u0442\u044C",
@@ -31109,7 +31322,7 @@ function TagSelect({
   const { size } = tier;
   const disabled = useInheritedDisabled(disabledProp);
   const merged = useLabels(TAG_SELECT_LABELS, labelsProp);
-  const labels = React97.useMemo(
+  const labels = React95.useMemo(
     () => ({
       ...merged,
       colorNames: { ...TAG_SELECT_LABELS.colorNames, ...labelsProp?.colorNames }
@@ -31130,32 +31343,32 @@ function TagSelect({
     onOpenChange,
     disabled
   });
-  const [inputValue, setInputValue] = React97.useState("");
-  const [focusWithin, setFocusWithin] = React97.useState(false);
-  const [announcement, setAnnouncement] = React97.useState("");
+  const [inputValue, setInputValue] = React95.useState("");
+  const [focusWithin, setFocusWithin] = React95.useState(false);
+  const [announcement, setAnnouncement] = React95.useState("");
   const highlight = useCreateStore(void 0);
   const registry = useListboxRegistry();
-  const [menuValue, setMenuValue] = React97.useState(null);
-  const [created, setCreated] = React97.useState([]);
+  const [menuValue, setMenuValue] = React95.useState(null);
+  const [created, setCreated] = React95.useState([]);
   const { pending: deleting, track: trackDelete } = usePendingKeys();
   const { pending: creating, track: trackCreate } = usePendingKeys();
-  const pendingChipFocus = React97.useRef(null);
-  const triggerRef = React97.useRef(null);
-  const chipsRef = React97.useRef(null);
-  const measureRef = React97.useRef(null);
-  const inputRef = React97.useRef(null);
-  const knownOptions = React97.useMemo(() => {
+  const pendingChipFocus = React95.useRef(null);
+  const triggerRef = React95.useRef(null);
+  const chipsRef = React95.useRef(null);
+  const measureRef = React95.useRef(null);
+  const inputRef = React95.useRef(null);
+  const knownOptions = React95.useMemo(() => {
     const extra = created.filter((c) => !options.some((o) => o.value === c.value));
     return extra.length ? [...options, ...extra] : options;
   }, [options, created]);
   const optionChanges = usePendingChanges(knownOptions, updateOption);
   const allOptions = optionChanges.shown;
-  const updating = React97.useMemo(
+  const updating = React95.useMemo(
     () => new Set(optionChanges.pending.map((change) => change.value)),
     [optionChanges.pending]
   );
   const inputTrim = inputValue.trim();
-  const listed = React97.useMemo(
+  const listed = React95.useMemo(
     () => listOptions(allOptions, inputValue, selected),
     [allOptions, inputValue, selected]
   );
@@ -31163,14 +31376,14 @@ function TagSelect({
   const hasPanelContent = listed.length > 0 || showCreate;
   const manageable = Boolean(onOptionUpdate || onOptionDelete);
   const shown = open && hasPanelContent;
-  const navigable = React97.useMemo(
+  const navigable = React95.useMemo(
     () => [
       ...showCreate ? [CREATE_VALUE] : [],
       ...listed.filter((o) => !o.disabled).map((o) => o.value)
     ],
     [listed, showCreate]
   );
-  React97.useLayoutEffect(() => {
+  React95.useLayoutEffect(() => {
     const current = highlight.get();
     if (!shown || navigable.length === 0) highlight.set(void 0);
     else if (current === void 0 || !navigable.includes(current)) highlight.set(navigable[0]);
@@ -31185,17 +31398,17 @@ function TagSelect({
     matchAnchorWidth: true
   });
   const listboxRef = floating.contentRef;
-  const scrollerRef = React97.useRef(null);
-  const virtualRef = React97.useRef(null);
+  const scrollerRef = React95.useRef(null);
+  const virtualRef = React95.useRef(null);
   const virtualized = listed.length > VIRTUAL_FROM3;
   const pinnedHighlight = useStoreSlice(highlight, (value) => virtualized ? value : void 0);
-  const pinnedOptions = React97.useMemo(() => {
+  const pinnedOptions = React95.useMemo(() => {
     if (!virtualized) return [];
     return listed.flatMap(
       (option, index) => option.value === pinnedHighlight || option.value === menuValue ? [index] : []
     );
   }, [virtualized, listed, pinnedHighlight, menuValue]);
-  const getOptionKey = React97.useCallback((index) => listed[index]?.value ?? "", [listed]);
+  const getOptionKey = React95.useCallback((index) => listed[index]?.value ?? "", [listed]);
   const revealOption = (value) => {
     const index = virtualized ? listed.findIndex((option) => option.value === value) : -1;
     if (index >= 0) virtualRef.current?.reveal(index);
@@ -31275,7 +31488,7 @@ function TagSelect({
     }
     setInputValue("");
   };
-  const chips = React97.useMemo(() => {
+  const chips = React95.useMemo(() => {
     const byValue = new Map(allOptions.map((o) => [o.value, o]));
     return selected.map((v) => {
       const option = byValue.get(v);
@@ -31291,7 +31504,7 @@ function TagSelect({
     // A chip on its way out (`data-leaving`) is a copy that only closes up.
     chipsRef.current?.querySelectorAll("[data-chip-value]:not([data-leaving])") ?? []
   );
-  React97.useLayoutEffect(() => {
+  React95.useLayoutEffect(() => {
     const target = pendingChipFocus.current;
     if (target === null) return;
     pendingChipFocus.current = null;
@@ -31310,7 +31523,7 @@ function TagSelect({
   });
   const visibleChips = expanded ? chips : chips.slice(0, visibleCount);
   const hiddenChips = expanded ? [] : chips.slice(visibleCount);
-  React97.useEffect(() => {
+  React95.useEffect(() => {
     const row = chipsRef.current;
     if (expanded && row) row.scrollTop = row.scrollHeight;
   }, [expanded]);
@@ -31397,7 +31610,7 @@ function TagSelect({
     const pickOption = () => {
       if (!option.disabled) pick(option.value);
     };
-    const content = /* @__PURE__ */ jsxs74(Fragment49, { children: [
+    const content = /* @__PURE__ */ jsxs74(Fragment50, { children: [
       /* @__PURE__ */ jsx92(Checkbox.Indicator, { checked: isSelected, disabled: option.disabled, size: stepDown(size) }),
       /* @__PURE__ */ jsx92(
         Badge.Root,
@@ -31425,7 +31638,7 @@ function TagSelect({
         ref: windowed?.measure,
         posInSet: windowed ? windowed.index + 1 + (showCreate ? 1 : 0) : void 0,
         setSize: windowed ? setSize : void 0,
-        children: manageable ? /* @__PURE__ */ jsxs74(Fragment49, { children: [
+        children: manageable ? /* @__PURE__ */ jsxs74(Fragment50, { children: [
           /* @__PURE__ */ jsx92(
             "button",
             {
@@ -31688,7 +31901,7 @@ function OptionRow({
   children
 }) {
   const highlighted = useStoreSlice(highlight, (current) => current === value);
-  const nodeRef = React97.useRef(null);
+  const nodeRef = React95.useRef(null);
   const setRefs = useMergedRefs(nodeRef, ref);
   useListboxItem(
     registry,
@@ -31741,7 +31954,7 @@ function OptionRow({
     }
   );
 }
-var MeasureRow = React97.memo(function MeasureRow2({
+var MeasureRow = React95.memo(function MeasureRow2({
   chips,
   disabled,
   removeLabel,
@@ -31774,7 +31987,7 @@ function noop() {
 }
 
 // src/components/timeline/Timeline.tsx
-import * as React98 from "react";
+import * as React96 from "react";
 
 // src/components/timeline/Timeline.module.css
 var Timeline_default = {
@@ -31798,7 +32011,7 @@ var Timeline_default = {
 };
 
 // src/components/timeline/Timeline.tsx
-import { Fragment as Fragment50, jsx as jsx93, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment51, jsx as jsx93, jsxs as jsxs75 } from "react/jsx-runtime";
 function TimelineRoot({ size: sizeProp, children, className, ...rest }) {
   const tier = useHostTier(sizeProp);
   return tier.provide(
@@ -31821,13 +32034,13 @@ var GROUP_LABEL_ROLE = {
   l: textRole_default.titleM,
   xl: textRole_default.titleM
 };
-var EdgeContext = React98.createContext({ first: false, last: false });
-var isGap = (child) => React98.isValidElement(child) && child.type === TimelineGap;
+var EdgeContext = React96.createContext({ first: false, last: false });
+var isGap = (child) => React96.isValidElement(child) && child.type === TimelineGap;
 function TimelineGroup({ label, children, className, ...rest }) {
   const size = useControlSize(void 0);
-  const labelId = React98.useId();
+  const labelId = React96.useId();
   const hasLabel = hasContent(label);
-  const events = React98.Children.toArray(children);
+  const events = React96.Children.toArray(children);
   const items = events.map((child, index) => /* @__PURE__ */ jsx93(
     EdgeContext.Provider,
     {
@@ -31839,7 +32052,7 @@ function TimelineGroup({ label, children, className, ...rest }) {
       },
       children: child
     },
-    React98.isValidElement(child) ? child.key : index
+    React96.isValidElement(child) ? child.key : index
   ));
   return /* @__PURE__ */ jsxs75("div", { className: Timeline_default.group, children: [
     hasLabel ? /* @__PURE__ */ jsx93("div", { id: labelId, className: cx(GROUP_LABEL_ROLE[size], Timeline_default.groupLabel), children: label }) : null,
@@ -31877,7 +32090,7 @@ function TimelineItem({
   download,
   ...rest
 }) {
-  const edge = React98.useContext(EdgeContext);
+  const edge = React96.useContext(EdgeContext);
   const interactive = Boolean(asChild || href || onClick);
   const rowProps = {
     ...rest,
@@ -31898,7 +32111,7 @@ function TimelineItem({
   const dot = /* @__PURE__ */ jsx93("span", { className: Timeline_default.dot, "aria-hidden": "true" });
   const content = (parts) => {
     const { parts: value, rest: text } = splitParts(parts, TimelineItemValue);
-    return /* @__PURE__ */ jsxs75(Fragment50, { children: [
+    return /* @__PURE__ */ jsxs75(Fragment51, { children: [
       dot,
       /* @__PURE__ */ jsx93("span", { className: Timeline_default.text, children: text }),
       value
@@ -31907,7 +32120,7 @@ function TimelineItem({
   let row;
   if (asChild) {
     const child = slotChild(children, "Timeline.Item");
-    row = /* @__PURE__ */ jsx93(InteractiveElement, { ...rowProps, element: "slot", onClick, children: React98.cloneElement(child, void 0, content(child.props.children)) });
+    row = /* @__PURE__ */ jsx93(InteractiveElement, { ...rowProps, element: "slot", onClick, children: React96.cloneElement(child, void 0, content(child.props.children)) });
   } else if (href) {
     row = /* @__PURE__ */ jsx93(
       InteractiveElement,
@@ -31934,9 +32147,9 @@ function TimelineItemTitle({ children, className, ...rest }) {
   return /* @__PURE__ */ jsx93("span", { ...rest, className: cx(Timeline_default.title, className), children });
 }
 TimelineItemTitle.displayName = "Timeline.ItemTitle";
-var ValueContext = React98.createContext(false);
+var ValueContext = React96.createContext(false);
 function TimelineItemMeta({ children, className, ...rest }) {
-  const inValue = React98.useContext(ValueContext);
+  const inValue = React96.useContext(ValueContext);
   return /* @__PURE__ */ jsx93("span", { ...rest, className: cx(inValue ? Timeline_default.valueMeta : Timeline_default.meta, className), children });
 }
 TimelineItemMeta.displayName = "Timeline.ItemMeta";
@@ -31962,11 +32175,11 @@ function TimelineDescription({ className, ...rest }) {
 }
 TimelineDescription.displayName = "Timeline.Description";
 function TimelineGap({ tone = "neutral", children, className, ...rest }) {
-  const parts = React98.Children.toArray(children);
+  const parts = React96.Children.toArray(children);
   const isDescription = (child) => isPart(child, TimelineDescription);
   const caption = parts.filter((child) => !isDescription(child));
   const description = parts.filter(isDescription);
-  const edge = React98.useContext(EdgeContext);
+  const edge = React96.useContext(EdgeContext);
   return /* @__PURE__ */ jsx93("li", { className: cx(Timeline_default.item, Timeline_default.gapItem), ...toDataAttributes(edgeAttributes(edge)), children: /* @__PURE__ */ jsxs75("div", { ...rest, className: cx(Timeline_default.gapRow, className), ...toDataAttributes({ tone }), children: [
     /* @__PURE__ */ jsx93("span", { className: Timeline_default.gapDot, "aria-hidden": "true" }),
     /* @__PURE__ */ jsx93("span", { className: Timeline_default.gapCaption, children: caption }),
@@ -31986,7 +32199,7 @@ var Timeline = {
 };
 
 // src/components/video-note/VideoNote.tsx
-import * as React99 from "react";
+import * as React97 from "react";
 
 // src/components/video-note/VideoNote.module.css
 var VideoNote_default = {
@@ -32020,10 +32233,10 @@ function VideoNoteInner(props) {
   const { overlay } = useMessagePart();
   const around = useSurfaceDepth();
   const blockDepth = useInMessage() ? void 0 : nextSurfaceDepth(around);
-  const videoRef = React99.useRef(null);
-  const ringRef = React99.useRef(null);
-  const descriptionId = React99.useId();
-  const [frame, setFrame] = React99.useState("loading");
+  const videoRef = React97.useRef(null);
+  const ringRef = React97.useRef(null);
+  const descriptionId = React97.useId();
+  const [frame, setFrame] = React97.useState("loading");
   const placeholder = usePresence(frame === "loading", { exitDuration: "base" });
   const player = useMediaPlayer(videoRef, mediaProps, labels, { progressRef: ringRef });
   const { state, duration, transcript, disabled, covered, inactive } = player;
@@ -32140,7 +32353,7 @@ defineMessagePart(VideoNote, {
 });
 
 // src/components/voice-player/VoicePlayer.tsx
-import * as React100 from "react";
+import * as React98 from "react";
 
 // src/components/voice-player/VoicePlayer.module.css
 var VoicePlayer_default = {
@@ -32265,9 +32478,9 @@ function VoicePlayer(props) {
     defaultValue: defaultRate,
     onChange: onRateChange
   });
-  const audioRef = React100.useRef(null);
-  const waveRef = React100.useRef(null);
-  const playedRef = React100.useRef(null);
+  const audioRef = React98.useRef(null);
+  const waveRef = React98.useRef(null);
+  const playedRef = React98.useRef(null);
   const player = useMediaPlayer(audioRef, mediaProps, labels, {
     rate,
     progressRef: playedRef,
@@ -32279,7 +32492,7 @@ function VoicePlayer(props) {
   const total = Math.max(0, player.duration ?? 0);
   const playing = state === "playing";
   const showElapsed = playing || seeking || position > 0;
-  const bars = React100.useMemo(() => resample(waveform, barCount), [waveform, barCount]);
+  const bars = React98.useMemo(() => resample(waveform, barCount), [waveform, barCount]);
   const fractionAt = (clientX) => {
     const wave = waveRef.current;
     if (!wave) return 0;
@@ -32408,10 +32621,10 @@ defineMessagePart(VoicePlayer, {
 });
 
 // src/hooks/useTokenValue.ts
-import * as React101 from "react";
+import * as React99 from "react";
 function useTokenValue(token, fallbackPx = 0) {
-  const [value, setValue] = React101.useState(() => readCssLengthPx(token, fallbackPx));
-  React101.useLayoutEffect(() => {
+  const [value, setValue] = React99.useState(() => readCssLengthPx(token, fallbackPx));
+  React99.useLayoutEffect(() => {
     const update2 = () => setValue(readCssLengthPx(token, fallbackPx));
     update2();
     const observer2 = new MutationObserver(update2);
@@ -32430,7 +32643,7 @@ function useTokenValue(token, fallbackPx = 0) {
 }
 
 // src/hooks/useUploadQueue.ts
-import * as React102 from "react";
+import * as React100 from "react";
 var DEFAULT_CONCURRENCY = 3;
 var sequence = 0;
 function reasonOf3(error) {
@@ -32449,16 +32662,16 @@ function withPreview(item, previews) {
   return preview === void 0 ? item : { ...item, preview };
 }
 function useUploadQueue(options) {
-  const [entries, setItems] = React102.useState([]);
-  const optionsRef = React102.useRef(options);
-  React102.useLayoutEffect(() => {
+  const [entries, setItems] = React100.useState([]);
+  const optionsRef = React100.useRef(options);
+  React100.useLayoutEffect(() => {
     optionsRef.current = options;
   });
-  const running = React102.useRef(/* @__PURE__ */ new Map());
-  const previews = React102.useRef(/* @__PURE__ */ new Map());
-  const [shown, setShown] = React102.useState(() => /* @__PURE__ */ new Map());
-  const prefix = React102.useId();
-  React102.useLayoutEffect(() => {
+  const running = React100.useRef(/* @__PURE__ */ new Map());
+  const previews = React100.useRef(/* @__PURE__ */ new Map());
+  const [shown, setShown] = React100.useState(() => /* @__PURE__ */ new Map());
+  const prefix = React100.useId();
+  React100.useLayoutEffect(() => {
     const map = previews.current;
     const ids = new Set(entries.map((item) => item.id));
     let changed = false;
@@ -32477,10 +32690,10 @@ function useUploadQueue(options) {
     }
     if (changed) setShown(new Map(map));
   }, [entries]);
-  const update2 = React102.useCallback((id, patch) => {
+  const update2 = React100.useCallback((id, patch) => {
     setItems((current) => current.map((item) => item.id === id ? { ...item, ...patch } : item));
   }, []);
-  const start = React102.useCallback(
+  const start = React100.useCallback(
     (item) => {
       const controller = new AbortController();
       running.current.set(item.id, controller);
@@ -32510,7 +32723,7 @@ function useUploadQueue(options) {
     },
     [update2]
   );
-  React102.useEffect(() => {
+  React100.useEffect(() => {
     const limit = Math.max(1, optionsRef.current.concurrency ?? DEFAULT_CONCURRENCY);
     let free = limit - running.current.size;
     if (free <= 0) return;
@@ -32524,7 +32737,7 @@ function useUploadQueue(options) {
       free -= 1;
     }
   });
-  React102.useEffect(() => {
+  React100.useEffect(() => {
     const uploads = running.current;
     const urls = previews.current;
     return () => {
@@ -32534,7 +32747,7 @@ function useUploadQueue(options) {
       urls.clear();
     };
   }, []);
-  const add = React102.useCallback(
+  const add = React100.useCallback(
     (files) => {
       const added = files.map((file) => {
         const id = `${prefix}upload-${++sequence}`;
@@ -32550,24 +32763,24 @@ function useUploadQueue(options) {
     },
     [prefix]
   );
-  const retry = React102.useCallback((id) => {
+  const retry = React100.useCallback((id) => {
     setItems(
       (current) => current.map(
         (item) => item.id === id && item.status === "failed" ? { ...item, status: "queued", progress: 0, error: void 0 } : item
       )
     );
   }, []);
-  const remove = React102.useCallback((id) => {
+  const remove = React100.useCallback((id) => {
     running.current.get(id)?.abort();
     running.current.delete(id);
     setItems((current) => current.filter((entry) => entry.id !== id));
   }, []);
-  const clear = React102.useCallback(() => {
+  const clear = React100.useCallback(() => {
     for (const controller of running.current.values()) controller.abort();
     running.current.clear();
     setItems([]);
   }, []);
-  const move = React102.useCallback((id, beforeId) => {
+  const move = React100.useCallback((id, beforeId) => {
     setItems((current) => {
       const item = current.find((entry) => entry.id === id);
       if (!item || id === beforeId) return current;
@@ -32577,11 +32790,11 @@ function useUploadQueue(options) {
       return next.every((entry, index) => entry === current[index]) ? current : next;
     });
   }, []);
-  const items = React102.useMemo(
+  const items = React100.useMemo(
     () => entries.map((item) => withPreview(item, shown)),
     [entries, shown]
   );
-  return React102.useMemo(
+  return React100.useMemo(
     () => ({ items, add, retry, remove, clear, move }),
     [items, add, retry, remove, clear, move]
   );