@tensor_1/react 2.23.0 → 2.24.0

package/dist/index.cjs

@@ -2932,7 +2932,7 @@ function SegmentedOption({
 }
 
 // src/components/TableControls.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/components/EditorIcons.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
@@ -2965,7 +2965,8 @@ var PATHS = {
   sourceMode: "M10 12.5 8 15l2 2.5M14 12.5l2 2.5-2 2.5M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
   richMode: "M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7ZM8 13h8M8 17h5",
   clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6v6l4 2",
-  grip: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01"
+  grip: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01",
+  more: "M5 12h.01M12 12h.01M19 12h.01"
 };
 function EditorIcon({ name, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -2985,46 +2986,374 @@ function EditorIcon({ name, ...props }) {
   );
 }
 
-// src/components/TableControls.tsx
+// src/components/Popover.tsx
+var import_react33 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
-function ViewMenu({ density, densityLabel, densityOptions, onDensityChange, zebra, freeze, columns, columnsLabel, onColumnVisibilityChange }) {
-  const densityLabelId = (0, import_react33.useId)();
-  const zebraLabelId = (0, import_react33.useId)();
-  const freezeLabelId = (0, import_react33.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uix-view-menu", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uix-view-menu__group", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { id: densityLabelId, className: "uix-view-menu__label", children: densityLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Segmented, { value: density, onChange: onDensityChange, "aria-labelledby": densityLabelId, children: densityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SegmentedOption, { value: option.value, children: option.label }, option.value)) })
+function Popover({
+  popover = "auto",
+  anchor,
+  placement = "bottom-start",
+  offset = 6,
+  className,
+  children,
+  ...props
+}) {
+  const ref = (0, import_react33.useRef)(null);
+  const [open, setOpen] = (0, import_react33.useState)(false);
+  const popoverAttr = { popover };
+  const reposition = useAnchoredPosition(anchor ?? null, ref, {
+    open: open && !!anchor,
+    placement,
+    offset
+  });
+  (0, import_react33.useEffect)(() => {
+    const el = ref.current;
+    if (!el || !anchor) return;
+    const sync = () => {
+      const isOpen = el.matches(":popover-open");
+      if (isOpen) reposition();
+      setOpen(isOpen);
+    };
+    el.addEventListener("toggle", sync);
+    return () => el.removeEventListener("toggle", sync);
+  }, [anchor, reposition]);
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref, className: cx("uix-popover", className), ...popoverAttr, ...props, children });
+}
+
+// src/components/TableControls.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var VIEW_MENU_COLUMN_LABELS = {
+  rowActions: "Column actions: {label}",
+  reorder: "Drag to reorder: {label}",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  hide: "Hide",
+  show: "Show",
+  required: "Always shown",
+  moved: "{label} moved to position {position} of {count}"
+};
+var fill = (template, values) => template.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
+var columnText = (column) => column.textLabel ?? (typeof column.label === "string" ? column.label : column.id);
+var isPopoverOpen = (el) => {
+  try {
+    return !!el?.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+function ColumnRowMenu({ label, actions, triggerRef }) {
+  const [open, setOpen] = (0, import_react34.useState)(false);
+  const menuId = (0, import_react34.useId)();
+  const button = (0, import_react34.useRef)(null);
+  const items = (0, import_react34.useRef)([]);
+  const wasOpenAtPress = (0, import_react34.useRef)(false);
+  const enabled = () => items.current.filter((el) => !!el && !el.disabled);
+  const close = (returnFocus) => {
+    const el = document.getElementById(menuId);
+    if (isPopoverOpen(el)) el.hidePopover();
+    setOpen(false);
+    if (returnFocus) button.current?.focus();
+  };
+  (0, import_react34.useEffect)(() => {
+    if (!open) return;
+    const el = document.getElementById(menuId);
+    if (el && typeof el.showPopover === "function" && !isPopoverOpen(el)) {
+      try {
+        el.showPopover();
+      } catch {
+      }
+    }
+    enabled()[0]?.focus();
+    const onToggle = (event) => {
+      if (event.newState === "closed") setOpen(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      close(true);
+    };
+    el?.addEventListener("toggle", onToggle);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      el?.removeEventListener("toggle", onToggle);
+      document.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [open, menuId]);
+  const onMenuKeyDown = (event) => {
+    const list = enabled();
+    const at = list.indexOf(document.activeElement);
+    const focus = (index) => {
+      event.preventDefault();
+      list[(index + list.length) % list.length]?.focus();
+    };
+    if (event.key === "ArrowDown") focus(at + 1);
+    else if (event.key === "ArrowUp") focus(at - 1);
+    else if (event.key === "Home") focus(0);
+    else if (event.key === "End") focus(list.length - 1);
+    else if (event.key === "Tab") close(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "uix-view-menu__actions", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      "button",
+      {
+        ref: (el) => {
+          button.current = el;
+          triggerRef(el);
+        },
+        type: "button",
+        className: "uix-btn uix-btn--ghost uix-btn--sm uix-btn--icon",
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        onPointerDown: () => {
+          wasOpenAtPress.current = isPopoverOpen(document.getElementById(menuId));
+        },
+        onClick: () => {
+          const wasOpen = wasOpenAtPress.current;
+          wasOpenAtPress.current = false;
+          if (wasOpen) return;
+          if (open) close(false);
+          else setOpen(true);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(EditorIcon, { name: "more" })
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Popover, { id: menuId, anchor: button, placement: "bottom-end", offset: 4, role: "menu", "aria-label": label, className: "uix-view-menu__row-menu", onKeyDown: onMenuKeyDown, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      "button",
+      {
+        ref: (el) => {
+          items.current[index] = el;
+        },
+        type: "button",
+        role: "menuitem",
+        tabIndex: -1,
+        className: "uix-menu__item",
+        disabled: action.disabled,
+        onClick: () => {
+          close(true);
+          action.onSelect();
+        },
+        children: action.label
+      },
+      action.id
+    )) })
+  ] });
+}
+function ViewMenu({
+  density,
+  densityLabel,
+  densityOptions,
+  onDensityChange,
+  displayLabel,
+  zebra,
+  freeze,
+  columns,
+  columnsLabel,
+  onColumnVisibilityChange,
+  onReorder,
+  columnLabels,
+  footer,
+  className
+}) {
+  const baseId = (0, import_react34.useId)();
+  const densityLabelId = `${baseId}-density`;
+  const zebraLabelId = `${baseId}-zebra`;
+  const freezeLabelId = `${baseId}-freeze`;
+  const columnsLabelId = `${baseId}-columns`;
+  const labels = { ...VIEW_MENU_COLUMN_LABELS, ...columnLabels };
+  const list = columns ?? [];
+  const [draft, setDraft] = (0, import_react34.useState)(null);
+  const [announcement, setAnnouncement] = (0, import_react34.useState)("");
+  const dragStart = (0, import_react34.useRef)(null);
+  const listRef = (0, import_react34.useRef)(null);
+  const triggers = (0, import_react34.useRef)(/* @__PURE__ */ new Map());
+  const refocus = (0, import_react34.useRef)(null);
+  const orderKey = JSON.stringify(list.map((column) => column.id));
+  (0, import_react34.useEffect)(() => setDraft(null), [orderKey]);
+  const order = draft ?? list.map((column) => column.id);
+  const byId = new Map(list.map((column) => [column.id, column]));
+  const ordered = order.map((id) => byId.get(id)).filter((column) => !!column);
+  (0, import_react34.useEffect)(() => {
+    const target = refocus.current;
+    refocus.current = null;
+    if (!target) return;
+    const el = target.part === "actions" ? triggers.current.get(target.id) : Array.from(listRef.current?.children ?? []).find((row) => row.dataset.columnId === target.id)?.querySelector(".uix-view-menu__grip");
+    if (el && document.activeElement !== el) el.focus();
+  });
+  const commit = (next, id) => {
+    setDraft(next);
+    onReorder?.([...next]);
+    const column = byId.get(id);
+    if (column) setAnnouncement(fill(labels.moved, { label: columnText(column), position: next.indexOf(id) + 1, count: next.length }));
+  };
+  const move = (id, delta, part) => {
+    const next = placeId(order, id, order.indexOf(id) + delta);
+    if (next === order) return;
+    refocus.current = { id, part };
+    commit(next, id);
+  };
+  const { dragging, start: startDrag } = useRowDrag(".uix-view-menu__col", {
+    over: (id, index) => {
+      const next = placeId(order, id, index);
+      if (next !== order) setDraft(next);
+    },
+    drop: (id) => {
+      const start = dragStart.current;
+      dragStart.current = null;
+      if (start && !sameOrder(start, order)) commit(order, id);
+    }
+  });
+  const rowActions = (column, index) => [
+    { id: "up", label: labels.moveUp, disabled: index === 0, onSelect: () => move(column.id, -1, "actions") },
+    { id: "down", label: labels.moveDown, disabled: index === ordered.length - 1, onSelect: () => move(column.id, 1, "actions") },
+    ...column.required || column.disabled ? [] : [column.visible ? { id: "hide", label: labels.hide, onSelect: () => onColumnVisibilityChange?.(column.id, false) } : { id: "show", label: labels.show, onSelect: () => onColumnVisibilityChange?.(column.id, true) }]
+  ];
+  const showDensity = !!densityOptions?.length && !!onDensityChange;
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: cx("uix-view-menu", className), "data-dragging": dragging ? "" : void 0, children: [
+    showDensity && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "uix-view-menu__group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { id: densityLabelId, className: "uix-view-menu__label", children: densityLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Segmented, { value: density ?? "", onChange: onDensityChange, "aria-labelledby": densityLabelId, children: densityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SegmentedOption, { value: option.value, children: option.label }, option.value)) })
     ] }),
-    (zebra || freeze) && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uix-view-menu__group", children: [
-      zebra && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uix-view-menu__row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { id: zebraLabelId, children: zebra.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Switch, { checked: zebra.checked, "aria-labelledby": zebraLabelId, onChange: (event) => zebra.onChange(event.currentTarget.checked) })
+    (zebra || freeze) && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "uix-view-menu__group", children: [
+      displayLabel != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "uix-view-menu__label", children: displayLabel }),
+      zebra && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "uix-view-menu__row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { id: zebraLabelId, children: zebra.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Switch, { checked: zebra.checked, "aria-labelledby": zebraLabelId, onChange: (event) => zebra.onChange(event.currentTarget.checked) })
       ] }),
-      freeze && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uix-view-menu__row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { id: freezeLabelId, children: freeze.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Switch, { checked: freeze.checked, "aria-labelledby": freezeLabelId, onChange: (event) => freeze.onChange(event.currentTarget.checked) })
+      freeze && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "uix-view-menu__row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { id: freezeLabelId, children: freeze.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Switch, { checked: freeze.checked, "aria-labelledby": freezeLabelId, onChange: (event) => freeze.onChange(event.currentTarget.checked) })
       ] })
     ] }),
-    columns && columns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uix-view-menu__group", children: [
-      columnsLabel != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uix-view-menu__label", children: columnsLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uix-view-menu__cols", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Checkbox, { label: column.label, checked: column.visible, disabled: column.disabled, onChange: (event) => onColumnVisibilityChange?.(column.id, event.currentTarget.checked) }, column.id)) })
-    ] })
+    ordered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "uix-view-menu__group", children: [
+      columnsLabel != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { id: columnsLabelId, className: "uix-view-menu__label", children: columnsLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("ul", { ref: listRef, className: "uix-view-menu__cols", "aria-labelledby": columnsLabel != null ? columnsLabelId : void 0, children: ordered.map((column, index) => {
+        const text = columnText(column);
+        return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+          "li",
+          {
+            className: "uix-view-menu__col",
+            "data-column-id": column.id,
+            "data-visible": String(column.visible),
+            "data-required": column.required ? "true" : void 0,
+            "data-dragging": dragging === column.id || void 0,
+            children: [
+              onReorder && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "uix-view-menu__grip",
+                  tabIndex: -1,
+                  "aria-label": fill(labels.reorder, { label: text }),
+                  onPointerDown: (event) => {
+                    if (event.button !== 0) return;
+                    event.preventDefault();
+                    event.currentTarget.focus({ preventScroll: true });
+                    dragStart.current = order;
+                    startDrag(event, column.id);
+                  },
+                  onKeyDown: (event) => {
+                    if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+                    event.preventDefault();
+                    move(column.id, event.key === "ArrowUp" ? -1 : 1, "grip");
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(EditorIcon, { name: "grip" })
+                }
+              ),
+              column.required ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "uix-view-menu__col-toggle", title: labels.required, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "uix-view-menu__col-box", "aria-hidden": "true" }),
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "uix-view-menu__col-name", children: column.label })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                Checkbox,
+                {
+                  className: "uix-view-menu__col-toggle",
+                  label: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "uix-view-menu__col-name", children: column.label }),
+                  checked: column.visible,
+                  disabled: column.disabled,
+                  onChange: (event) => onColumnVisibilityChange?.(column.id, event.currentTarget.checked)
+                }
+              ),
+              onReorder && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                ColumnRowMenu,
+                {
+                  label: fill(labels.rowActions, { label: text }),
+                  actions: rowActions(column, index),
+                  triggerRef: (el) => {
+                    if (el) triggers.current.set(column.id, el);
+                    else triggers.current.delete(column.id);
+                  }
+                }
+              )
+            ]
+          },
+          column.id
+        );
+      }) })
+    ] }),
+    footer != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "uix-view-menu__footer", children: footer }),
+    onReorder && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { role: "status", className: "uix-visually-hidden", children: announcement })
   ] });
 }
 function FilterPopover({ label, type = "text", value, onValueChange, options, applyLabel, clearLabel, onApply, onClear, placeholder }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uix-filter-popover", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("label", { className: "uix-label", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: label }),
-      type === "select" || type === "enum" || type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("select", { className: "uix-select", value, onChange: (event) => onValueChange(event.currentTarget.value), children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("option", { value: option.value, children: option.label }, option.value)) }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Input, { type, value, placeholder, onChange: (event) => onValueChange(event.currentTarget.value) })
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "uix-filter-popover", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "uix-label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: label }),
+      type === "select" || type === "enum" || type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("select", { className: "uix-select", value, onChange: (event) => onValueChange(event.currentTarget.value), children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("option", { value: option.value, children: option.label }, option.value)) }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Input, { type, value, placeholder, onChange: (event) => onValueChange(event.currentTarget.value) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uix-filter-popover__actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, { type: "button", onClick: onClear, children: clearLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, { type: "button", variant: "primary", onClick: onApply, children: applyLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "uix-filter-popover__actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { type: "button", onClick: onClear, children: clearLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { type: "button", variant: "primary", onClick: onApply, children: applyLabel })
     ] })
   ] });
 }
 var sameOrder = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+function dropIndex(rows, dragged, clientY) {
+  let index = 0;
+  for (const row of rows) {
+    if (row === dragged) continue;
+    const box = row.getBoundingClientRect();
+    if (clientY > box.top + box.height / 2) index++;
+  }
+  return index;
+}
+function useRowDrag(rowSelector, handlers) {
+  const [dragging, setDragging] = (0, import_react34.useState)(null);
+  const drag = (0, import_react34.useRef)(null);
+  const latest = (0, import_react34.useRef)(handlers);
+  latest.current = handlers;
+  (0, import_react34.useEffect)(() => {
+    if (!dragging) return;
+    const move = (event) => {
+      const current = drag.current;
+      if (!current) return;
+      latest.current.over(current.id, dropIndex(Array.from(current.list.querySelectorAll(`:scope > ${rowSelector}`)), current.row, event.clientY));
+    };
+    const end = () => {
+      const current = drag.current;
+      drag.current = null;
+      setDragging(null);
+      if (current) latest.current.drop(current.id);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", end);
+    window.addEventListener("pointercancel", end);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", end);
+      window.removeEventListener("pointercancel", end);
+    };
+  }, [dragging, rowSelector]);
+  const start = (event, id) => {
+    const row = event.currentTarget.closest("li");
+    if (!row?.parentElement) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    drag.current = { id, list: row.parentElement, row };
+    setDragging(id);
+  };
+  return { dragging, start };
+}
 function placeId(ids, id, index) {
   const from = ids.indexOf(id);
   const to = Math.max(0, Math.min(index, ids.length - 1));
@@ -3034,13 +3363,13 @@ function placeId(ids, id, index) {
   return next;
 }
 function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpinLabel, onReorder, reorderLabel, emptyLabel, actions, footer }) {
-  const baseId = (0, import_react33.useId)();
+  const baseId = (0, import_react34.useId)();
   const groups = sections ?? [{ id: void 0, items: items ?? [] }];
-  const [draft, setDraft] = (0, import_react33.useState)(null);
-  const [dragging, setDragging] = (0, import_react33.useState)(null);
-  const dragStart = (0, import_react33.useRef)(null);
+  const [draft, setDraft] = (0, import_react34.useState)(null);
+  const dragStart = (0, import_react34.useRef)(null);
+  const dragGroup = (0, import_react34.useRef)(void 0);
   const orderKey = JSON.stringify(groups.map((group) => [group.id, group.items.map((item) => item.id)]));
-  (0, import_react33.useEffect)(() => setDraft(null), [orderKey]);
+  (0, import_react34.useEffect)(() => setDraft(null), [orderKey]);
   const orderOf = (group) => draft && draft.group === group.id ? draft.ids : group.items.map((item) => item.id);
   const move = (group, id, delta) => {
     const current = orderOf(group);
@@ -3049,29 +3378,23 @@ function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpin
     setDraft({ group: group.id, ids: next });
     onReorder?.([...next], group.id);
   };
-  const dragOver = (event, group, id) => {
-    if (dragging !== id) return;
-    const rows = Array.from(event.currentTarget.closest("ul")?.querySelectorAll(":scope > .uix-saved-views__row") ?? []);
-    let index = rows.length - 1;
-    for (let i = 0; i < rows.length; i++) {
-      const box = rows[i].getBoundingClientRect();
-      if (event.clientY < box.top + box.height / 2) {
-        index = i;
-        break;
-      }
+  const { dragging, start: startDrag } = useRowDrag(".uix-saved-views__row", {
+    over: (id, index) => {
+      const group = groups.find((candidate) => candidate.id === dragGroup.current);
+      if (!group) return;
+      const current = orderOf(group);
+      const next = placeId(current, id, index);
+      if (next !== current) setDraft({ group: group.id, ids: next });
+    },
+    drop: () => {
+      const group = groups.find((candidate) => candidate.id === dragGroup.current);
+      const start = dragStart.current;
+      dragStart.current = null;
+      if (!group) return;
+      const end = orderOf(group);
+      if (start && !sameOrder(start, end)) onReorder?.([...end], group.id);
     }
-    const current = orderOf(group);
-    const next = placeId(current, id, index);
-    if (next !== current) setDraft({ group: group.id, ids: next });
-  };
-  const drop = (group, id) => {
-    if (dragging !== id) return;
-    setDragging(null);
-    const start = dragStart.current;
-    dragStart.current = null;
-    const end = orderOf(group);
-    if (start && !sameOrder(start, end)) onReorder?.([...end], group.id);
-  };
+  });
   const visible = groups.filter((group) => group.items.length > 0);
   const renderRows = (group, groupIndex) => {
     const byId = new Map(group.items.map((item) => [item.id, item]));
@@ -3080,8 +3403,8 @@ function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpin
       if (!item) return null;
       const nameId = `${baseId}-${groupIndex}-${index}`;
       const extra = actions?.(item);
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("li", { className: "uix-saved-views__row", "data-active": item.active || void 0, "data-dragging": dragging === item.id || void 0, children: [
-        onReorder && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("li", { className: "uix-saved-views__row", "data-active": item.active || void 0, "data-dragging": dragging === item.id || void 0, children: [
+        onReorder && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "button",
           {
             type: "button",
@@ -3091,64 +3414,61 @@ function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpin
             onPointerDown: (event) => {
               if (event.button !== 0) return;
               event.preventDefault();
-              event.currentTarget.setPointerCapture?.(event.pointerId);
               dragStart.current = orderOf(group);
-              setDragging(item.id);
+              dragGroup.current = group.id;
+              startDrag(event, item.id);
             },
-            onPointerMove: (event) => dragOver(event, group, item.id),
-            onPointerUp: () => drop(group, item.id),
-            onPointerCancel: () => drop(group, item.id),
             onKeyDown: (event) => {
               if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
               event.preventDefault();
               move(group, item.id, event.key === "ArrowUp" ? -1 : 1);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(EditorIcon, { name: "grip" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(EditorIcon, { name: "grip" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { type: "button", id: nameId, className: "uix-menu__item", "data-active": item.active || void 0, "aria-current": item.active || void 0, title: typeof item.label === "string" ? item.label : void 0, onClick: () => onSelect(item.id), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "uix-saved-views__name", children: item.label }) }),
-        onPinChange && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { type: "button", className: "uix-saved-views__pin", "aria-label": item.pinned ? unpinLabel : pinLabel, "data-on": item.pinned || void 0, onClick: () => onPinChange(item.id, !item.pinned), children: "\u2605" }),
-        extra != null && extra !== false && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "uix-saved-views__actions", children: extra })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("button", { type: "button", id: nameId, className: "uix-menu__item", "data-active": item.active || void 0, "aria-current": item.active || void 0, title: typeof item.label === "string" ? item.label : void 0, onClick: () => onSelect(item.id), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "uix-saved-views__name", children: item.label }) }),
+        onPinChange && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("button", { type: "button", className: "uix-saved-views__pin", "aria-label": item.pinned ? unpinLabel : pinLabel, "data-on": item.pinned || void 0, onClick: () => onPinChange(item.id, !item.pinned), children: "\u2605" }),
+        extra != null && extra !== false && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "uix-saved-views__actions", children: extra })
       ] }, item.id);
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("ul", { className: "uix-menu uix-saved-views", "data-dragging": dragging ? "" : void 0, children: [
-    visible.length === 0 && emptyLabel != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { className: "uix-menu__label", children: emptyLabel }),
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("ul", { className: "uix-menu uix-saved-views", "data-dragging": dragging ? "" : void 0, children: [
+    visible.length === 0 && emptyLabel != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("li", { className: "uix-menu__label", children: emptyLabel }),
     sections ? visible.map((group, groupIndex) => {
       const labelId = `${baseId}-section-${groupIndex}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("li", { className: "uix-saved-views__section", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { id: labelId, className: "uix-menu__label uix-saved-views__section-label", children: group.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { className: "uix-saved-views__group", "aria-labelledby": labelId, children: renderRows(group, groupIndex) })
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("li", { className: "uix-saved-views__section", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { id: labelId, className: "uix-menu__label uix-saved-views__section-label", children: group.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("ul", { className: "uix-saved-views__group", "aria-labelledby": labelId, children: renderRows(group, groupIndex) })
       ] }, group.id);
     }) : visible[0] && renderRows(visible[0], 0),
-    footer != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { className: "uix-saved-views__footer", children: footer })
+    footer != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("li", { className: "uix-saved-views__footer", children: footer })
   ] });
 }
 
 // src/components/Timeline.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function Timeline({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("ol", { className: cx("uix-timeline", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("ol", { className: cx("uix-timeline", className), ...props, children });
 }
 function TimelineItem({ node, meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("li", { className: cx("uix-timeline__item", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "uix-timeline__rail", "aria-hidden": "true", children: [
-      node ?? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "uix-timeline__node" }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "uix-timeline__line" })
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("li", { className: cx("uix-timeline__item", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uix-timeline__rail", "aria-hidden": "true", children: [
+      node ?? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "uix-timeline__node" }),
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "uix-timeline__line" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "uix-timeline__body", children: [
-      meta != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "uix-timeline__meta", children: meta }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uix-timeline__body", children: [
+      meta != null && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uix-timeline__meta", children: meta }),
       children
     ] })
   ] });
 }
 
 // src/components/Pipeline.tsx
-var import_react34 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_react35 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function Pipeline({ detailed = false, children, className, tabIndex, ...props }) {
-  const stages = detailed ? import_react34.Children.map(children, (child) => (0, import_react34.isValidElement)(child) && child.type === PipelineStage ? (0, import_react34.cloneElement)(child, { detailed: child.props.detailed ?? true }) : child) : children;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  const stages = detailed ? import_react35.Children.map(children, (child) => (0, import_react35.isValidElement)(child) && child.type === PipelineStage ? (0, import_react35.cloneElement)(child, { detailed: child.props.detailed ?? true }) : child) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "ol",
     {
       className: cx("uix-pipeline", detailed && "uix-pipeline--detailed", className),
@@ -3185,20 +3505,20 @@ function PipelineStage({
   const current = currentProp ?? (state === "active" || state === "current" || state === "running");
   const resolvedStateLabel = stateLabel ?? DEFAULT_STATE_LABELS[state];
   const showDetails = detailed || description != null || meta != null || marker != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "li",
     {
       className: cx("uix-pipeline__stage", className),
       "data-state": state,
       "aria-current": current ? "step" : void 0,
       ...props,
-      children: showDetails ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "uix-pipeline__marker", "aria-hidden": "true", children: marker }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uix-pipeline__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uix-pipeline__eyebrow", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "uix-pipeline__state", children: resolvedStateLabel }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uix-pipeline__title", children: label }),
-          description != null && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uix-pipeline__description", children: description }),
-          meta != null && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uix-pipeline__meta", children: meta })
+      children: showDetails ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uix-pipeline__marker", "aria-hidden": "true", children: marker }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uix-pipeline__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-pipeline__eyebrow", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uix-pipeline__state", children: resolvedStateLabel }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-pipeline__title", children: label }),
+          description != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-pipeline__description", children: description }),
+          meta != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-pipeline__meta", children: meta })
         ] })
       ] }) : label
     }
@@ -3206,9 +3526,9 @@ function PipelineStage({
 }
 
 // src/components/Flow.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Flow({ variant = "linear", panel = false, children, className, role = "group", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "div",
     {
       className: cx("uix-flow", `uix-flow--${variant}`, panel && "uix-flow--panel", className),
@@ -3238,64 +3558,30 @@ function FlowNode({
   ...props
 }) {
   const resolvedStateLabel = stateLabel ?? FLOW_STATE_LABELS[state];
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cx("uix-node", `uix-node--${state}`, icon == null && "uix-node--no-icon", wide && "uix-node--wide", className), ...props, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uix-node__icon", "aria-hidden": "true", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uix-node__body", children: [
-      eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-node__eyebrow", children: eyebrow }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-node__title", children: title }),
-      meta != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-node__meta", children: meta }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-node__status", children: resolvedStateLabel })
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cx("uix-node", `uix-node--${state}`, icon == null && "uix-node--no-icon", wide && "uix-node--wide", className), ...props, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uix-node__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uix-node__body", children: [
+      eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uix-node__eyebrow", children: eyebrow }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uix-node__title", children: title }),
+      meta != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uix-node__meta", children: meta }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uix-node__status", children: resolvedStateLabel })
     ] }),
-    footer != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-node__footer", children: footer })
+    footer != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uix-node__footer", children: footer })
   ] });
 }
 
 // src/components/Prose.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function Prose({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cx("uix-prose", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cx("uix-prose", className), ...props, children });
 }
 function Note({ tone, icon, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uix-note__icon", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uix-note__body", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-note__icon", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-note__body", children })
   ] });
 }
 
-// src/components/Popover.tsx
-var import_react35 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
-function Popover({
-  popover = "auto",
-  anchor,
-  placement = "bottom-start",
-  offset = 6,
-  className,
-  children,
-  ...props
-}) {
-  const ref = (0, import_react35.useRef)(null);
-  const [open, setOpen] = (0, import_react35.useState)(false);
-  const popoverAttr = { popover };
-  const reposition = useAnchoredPosition(anchor ?? null, ref, {
-    open: open && !!anchor,
-    placement,
-    offset
-  });
-  (0, import_react35.useEffect)(() => {
-    const el = ref.current;
-    if (!el || !anchor) return;
-    const sync = () => {
-      const isOpen = el.matches(":popover-open");
-      if (isOpen) reposition();
-      setOpen(isOpen);
-    };
-    el.addEventListener("toggle", sync);
-    return () => el.removeEventListener("toggle", sync);
-  }, [anchor, reposition]);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ref, className: cx("uix-popover", className), ...popoverAttr, ...props, children });
-}
-
 // src/components/CommandPalette.tsx
 var import_react36 = require("react");
 var import_jsx_runtime56 = require("react/jsx-runtime");
@@ -6760,6 +7046,9 @@ var DEFAULT_DIFF_VIEWER_LABELS = {
   acceptIncoming: "Accept incoming",
   keepCurrent: "Keep current",
   markPending: "Mark pending",
+  acceptIncomingFor: "Accept incoming for {path}",
+  keepCurrentFor: "Keep current for {path}",
+  markPendingFor: "Mark pending for {path}",
   resolutionAccept: "accepted",
   resolutionSkip: "kept",
   resolutionPending: "pending",
@@ -6776,10 +7065,12 @@ function DiffViewer({
   resolutions: controlledResolutions,
   onResolutionChange,
   labels: labelOverrides,
+  controlSize = "sm",
   className
 }) {
   const labels = { ...DEFAULT_DIFF_VIEWER_LABELS, ...labelOverrides };
   const resolutionLabel = { accept: labels.resolutionAccept, skip: labels.resolutionSkip, pending: labels.resolutionPending };
+  const buttonSize = controlSize === "md" ? void 0 : `uix-btn--${controlSize}`;
   const id = (0, import_react49.useId)();
   const entries = (0, import_react49.useMemo)(() => providedEntries ?? buildThreeWayDiff(base, current, incoming), [providedEntries, base, current, incoming]);
   const [internalResolutions, setInternalResolutions] = (0, import_react49.useState)({});
@@ -6793,8 +7084,8 @@ function DiffViewer({
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("h3", { children: labels.noDifferences }),
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("p", { children: labels.noDifferencesDetail })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("section", { className: cx("uix-diff-viewer", className), "aria-label": labels.region, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uix-diff-viewer__summary", "aria-label": labels.summary, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("section", { className: cx("uix-diff-viewer", className), "aria-label": labels.region, "data-control-size": controlSize, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uix-diff-viewer__summary", role: "group", "aria-label": labels.summary, children: [
       GROUPS.map((kind) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("b", { children: summary[kind] }),
         " ",
@@ -6831,10 +7122,10 @@ function DiffViewer({
               /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("strong", { children: labels[version] }),
               /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("pre", { children: renderValue(entry[version], labels.notPresent) })
             ] }, version)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uix-diff-viewer__actions", "aria-label": fillLabel(labels.resolve, { path: entry.path }), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", "aria-pressed": resolution === "accept", onClick: () => resolve2(entry.path, "accept"), children: labels.acceptIncoming }),
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", "aria-pressed": resolution === "skip", onClick: () => resolve2(entry.path, "skip"), children: labels.keepCurrent }),
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", "aria-pressed": resolution === "pending", onClick: () => resolve2(entry.path, "pending"), children: labels.markPending })
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uix-diff-viewer__actions", role: "group", "aria-label": fillLabel(labels.resolve, { path: entry.path }), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--primary", buttonSize), "aria-label": fillLabel(labels.acceptIncomingFor, { path: entry.path }), "aria-pressed": resolution === "accept", onClick: () => resolve2(entry.path, "accept"), children: labels.acceptIncoming }),
+              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--secondary", buttonSize), "aria-label": fillLabel(labels.keepCurrentFor, { path: entry.path }), "aria-pressed": resolution === "skip", onClick: () => resolve2(entry.path, "skip"), children: labels.keepCurrent }),
+              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--ghost", buttonSize), "aria-label": fillLabel(labels.markPendingFor, { path: entry.path }), "aria-pressed": resolution === "pending", onClick: () => resolve2(entry.path, "pending"), children: labels.markPending })
             ] })
           ] }, entry.path);
         })