@arbidocs/blocks 0.4.16 → 0.4.18

package/dist/chunk-IC2VHFWR.js

@@ -0,0 +1,158 @@
+"use client";
+import { testIdOr } from './chunk-7F6CBP3Z.js';
+import { useRef, useState } from 'react';
+import { FileImage, Table2, BookOpen, Search } from 'lucide-react';
+import { ToggleGroup, cn, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, ToggleGroupItem, Tooltip, TooltipTrigger, TooltipContent } from '@arbidocs/react/ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_DOCUMENT_VIEW_TOGGLE_LABELS = {
+  gallery: "Gallery",
+  table: "Table",
+  review: "Review",
+  smartSearch: "Smart Search"
+};
+function ViewToggleItem({
+  option,
+  size,
+  testIdPrefix,
+  showLabel,
+  labelClassName,
+  hideTooltip
+}) {
+  const labelRef = useRef(null);
+  const [isTipNeeded, setIsTipNeeded] = useState(true);
+  const isLabelShown = () => !!labelRef.current && labelRef.current.offsetParent !== null;
+  const content = /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "flex items-center gap-1.5",
+      onPointerEnter: () => setIsTipNeeded(!isLabelShown()),
+      onFocus: () => setIsTipNeeded(!isLabelShown()),
+      children: [
+        option.icon,
+        showLabel && /* @__PURE__ */ jsx("span", { ref: labelRef, className: labelClassName, children: option.label })
+      ]
+    }
+  );
+  return (
+    // The tooltip lives INSIDE the item: wrapping the ToggleGroupItem would make Radix
+    // Tooltip's data-state collide with the toggle's on/off state.
+    /* @__PURE__ */ jsx(
+      ToggleGroupItem,
+      {
+        value: option.value,
+        "aria-label": option.label,
+        size,
+        className: "rounded-[5px] border-0 bg-transparent text-muted-foreground pointer-coarse:min-h-11 data-[state=off]:hover:bg-background/60 data-[state=off]:hover:text-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:hover:bg-accent data-[state=on]:hover:text-accent-foreground",
+        "data-testid": option.testId ?? `${testIdPrefix}-${option.value}-button`,
+        children: hideTooltip ? content : /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: content }),
+          isTipNeeded && /* @__PURE__ */ jsx(TooltipContent, { children: option.label })
+        ] })
+      }
+    )
+  );
+}
+function ViewToggle({
+  options,
+  value,
+  onChange,
+  testIdPrefix = "view",
+  showLabels = false,
+  hideTooltips = false,
+  size = "default",
+  containerCollapse = false,
+  className
+}) {
+  const labelClassName = containerCollapse ? "hidden @lg:inline text-sm" : "hidden md:inline text-sm";
+  return /* @__PURE__ */ jsx(
+    ToggleGroup,
+    {
+      variant: "default",
+      type: "single",
+      value,
+      onValueChange: (next) => next && onChange(next),
+      className: cn("gap-0.5 rounded-md bg-muted p-0.5", className),
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        ViewToggleItem,
+        {
+          option,
+          size,
+          testIdPrefix,
+          showLabel: showLabels,
+          labelClassName,
+          hideTooltip: hideTooltips
+        },
+        option.value
+      ))
+    }
+  );
+}
+function documentViewOptions(l) {
+  return [
+    // "Gallery" (page-preview grid) reads more conventionally than "Tiles".
+    { value: "explorer", icon: /* @__PURE__ */ jsx(FileImage, { className: "size-3.5" }), label: l.gallery },
+    { value: "grid", icon: /* @__PURE__ */ jsx(Table2, { className: "size-3.5" }), label: l.table },
+    { value: "navigator", icon: /* @__PURE__ */ jsx(BookOpen, { className: "size-3.5" }), label: l.review },
+    { value: "search", icon: /* @__PURE__ */ jsx(Search, { className: "size-3.5" }), label: l.smartSearch }
+  ];
+}
+function DocumentViewToggle({
+  viewMode,
+  onChange,
+  compact,
+  labels,
+  testIdPrefix,
+  testIds,
+  compactTestIds
+}) {
+  const options = documentViewOptions({ ...DEFAULT_DOCUMENT_VIEW_TOGGLE_LABELS, ...labels }).map(
+    (o) => ({ ...o, testId: testIds?.[o.value] })
+  );
+  if (compact) {
+    const current = options.find((o) => o.value === viewMode) ?? options[0];
+    return /* @__PURE__ */ jsxs(Select, { value: viewMode, onValueChange: (v) => onChange(v), children: [
+      /* @__PURE__ */ jsx(
+        SelectTrigger,
+        {
+          className: "h-7 w-10 justify-center gap-0 border-input p-0 pointer-coarse:h-11! pointer-coarse:w-11! shrink-0 [&>svg]:hidden",
+          "aria-label": current.label,
+          "data-testid": testIdOr(compactTestIds?.select, {
+            testId: "documents-layout-compact-select"
+          }),
+          children: /* @__PURE__ */ jsx(SelectValue, { children: current.icon })
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectContent, { align: "center", children: options.map((option) => /* @__PURE__ */ jsx(
+        SelectItem,
+        {
+          value: option.value,
+          "data-testid": testIdOr(compactTestIds?.option?.(option.value), {
+            testId: `documents-layout-compact-${option.value}-option`
+          }),
+          children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+            option.icon,
+            option.label
+          ] })
+        },
+        option.value
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    ViewToggle,
+    {
+      options,
+      value: viewMode,
+      onChange: (v) => onChange(v),
+      testIdPrefix: testIdPrefix ?? "documents-layout",
+      showLabels: true,
+      containerCollapse: true,
+      size: "sm"
+    }
+  );
+}
+
+export { DEFAULT_DOCUMENT_VIEW_TOGGLE_LABELS, DocumentViewToggle, ViewToggle };
+//# sourceMappingURL=chunk-IC2VHFWR.js.map
+//# sourceMappingURL=chunk-IC2VHFWR.js.map

package/dist/chunk-IC2VHFWR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/files/ViewToggle.tsx"],"names":[],"mappings":"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","file":"chunk-IC2VHFWR.js","sourcesContent":["import { useRef, useState, type ReactNode } from 'react'\nimport { BookOpen, FileImage, Search, Table2 } from 'lucide-react'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  ToggleGroup,\n  ToggleGroupItem,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n  cn,\n} from '@arbidocs/react/ui'\nimport { testIdOr } from '../chat/test-id'\n\n/** Names of the four document view modes. Pass a partial `labels` to translate or reword. */\nexport interface DocumentViewToggleLabels {\n  gallery: string\n  table: string\n  review: string\n  smartSearch: string\n}\n\nexport const DEFAULT_DOCUMENT_VIEW_TOGGLE_LABELS: DocumentViewToggleLabels = {\n  gallery: 'Gallery',\n  table: 'Table',\n  review: 'Review',\n  smartSearch: 'Smart Search',\n}\n\nexport interface ViewToggleOption {\n  value: string\n  icon: ReactNode\n  label: string\n  /** Overrides this item's test id (default `${testIdPrefix}-${value}-button`). */\n  testId?: string\n}\n\nexport interface ViewToggleProps {\n  options: ViewToggleOption[]\n  value: string\n  onChange: (value: string) => void\n  /** Item test ids are `${testIdPrefix}-${value}-button` unless an option sets its own `testId`. */\n  testIdPrefix?: string\n  showLabels?: boolean\n  hideTooltips?: boolean\n  size?: 'default' | 'sm'\n  /**\n   * Collapse labels to icons by the width of the nearest `@container` ancestor instead of the\n   * viewport. The consumer must mark that region `@container`.\n   */\n  containerCollapse?: boolean\n  className?: string\n}\n\ninterface ViewToggleItemProps {\n  option: ViewToggleOption\n  size: 'default' | 'sm'\n  testIdPrefix: string\n  showLabel: boolean\n  labelClassName: string\n  hideTooltip: boolean\n}\n\nfunction ViewToggleItem({\n  option,\n  size,\n  testIdPrefix,\n  showLabel,\n  labelClassName,\n  hideTooltip,\n}: ViewToggleItemProps) {\n  const labelRef = useRef<HTMLSpanElement>(null)\n  const [isTipNeeded, setIsTipNeeded] = useState(true)\n  // A control that shows its own text needs no tooltip repeating it; when the container is too\n  // narrow and the label collapses to the icon, the tooltip is the label.\n  const isLabelShown = () => !!labelRef.current && labelRef.current.offsetParent !== null\n  const content = (\n    <span\n      className=\"flex items-center gap-1.5\"\n      onPointerEnter={() => setIsTipNeeded(!isLabelShown())}\n      onFocus={() => setIsTipNeeded(!isLabelShown())}\n    >\n      {option.icon}\n      {showLabel && (\n        <span ref={labelRef} className={labelClassName}>\n          {option.label}\n        </span>\n      )}\n    </span>\n  )\n  return (\n    // The tooltip lives INSIDE the item: wrapping the ToggleGroupItem would make Radix\n    // Tooltip's data-state collide with the toggle's on/off state.\n    <ToggleGroupItem\n      value={option.value}\n      aria-label={option.label}\n      size={size}\n      className=\"rounded-[5px] border-0 bg-transparent text-muted-foreground pointer-coarse:min-h-11 data-[state=off]:hover:bg-background/60 data-[state=off]:hover:text-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:hover:bg-accent data-[state=on]:hover:text-accent-foreground\"\n      data-testid={option.testId ?? `${testIdPrefix}-${option.value}-button`}\n    >\n      {hideTooltip ? (\n        content\n      ) : (\n        <Tooltip>\n          <TooltipTrigger asChild>{content}</TooltipTrigger>\n          {isTipNeeded && <TooltipContent>{option.label}</TooltipContent>}\n        </Tooltip>\n      )}\n    </ToggleGroupItem>\n  )\n}\n\n/** Segmented view switch: selected = accent tint, tone-only hover, 44px targets on touch. */\nexport function ViewToggle({\n  options,\n  value,\n  onChange,\n  testIdPrefix = 'view',\n  showLabels = false,\n  hideTooltips = false,\n  size = 'default',\n  containerCollapse = false,\n  className,\n}: ViewToggleProps) {\n  const labelClassName = containerCollapse\n    ? 'hidden @lg:inline text-sm'\n    : 'hidden md:inline text-sm'\n  return (\n    <ToggleGroup\n      variant=\"default\"\n      type=\"single\"\n      value={value}\n      onValueChange={(next) => next && onChange(next)}\n      className={cn('gap-0.5 rounded-md bg-muted p-0.5', className)}\n    >\n      {options.map((option) => (\n        <ViewToggleItem\n          key={option.value}\n          option={option}\n          size={size}\n          testIdPrefix={testIdPrefix}\n          showLabel={showLabels}\n          labelClassName={labelClassName}\n          hideTooltip={hideTooltips}\n        />\n      ))}\n    </ToggleGroup>\n  )\n}\n\nexport type DocumentViewMode = 'grid' | 'explorer' | 'navigator' | 'search'\n\nfunction documentViewOptions(l: DocumentViewToggleLabels): ViewToggleOption[] {\n  return [\n    // \"Gallery\" (page-preview grid) reads more conventionally than \"Tiles\".\n    { value: 'explorer', icon: <FileImage className=\"size-3.5\" />, label: l.gallery },\n    { value: 'grid', icon: <Table2 className=\"size-3.5\" />, label: l.table },\n    { value: 'navigator', icon: <BookOpen className=\"size-3.5\" />, label: l.review },\n    { value: 'search', icon: <Search className=\"size-3.5\" />, label: l.smartSearch },\n  ]\n}\n\nexport interface DocumentViewToggleProps {\n  viewMode: DocumentViewMode\n  onChange: (mode: DocumentViewMode) => void\n  /** Collapse the four modes into one select trigger (narrow viewports). */\n  compact?: boolean\n  labels?: Partial<DocumentViewToggleLabels>\n  /** Overrides the segmented items' prefix (default `documents-layout`: `<prefix>-<mode>-button`). */\n  testIdPrefix?: string\n  /** Per-mode item ids, for hosts that keep their own (e.g. `documents-view-gallery`). */\n  testIds?: Partial<Record<DocumentViewMode, string>>\n  /** Overrides the compact select test ids (defaults keep the current ids). */\n  compactTestIds?: Partial<{ select: string; option: (mode: DocumentViewMode) => string }>\n}\n\n/** The Documents page's Gallery / Table / Review / Smart Search switch. */\nexport function DocumentViewToggle({\n  viewMode,\n  onChange,\n  compact,\n  labels,\n  testIdPrefix,\n  testIds,\n  compactTestIds,\n}: DocumentViewToggleProps) {\n  const options = documentViewOptions({ ...DEFAULT_DOCUMENT_VIEW_TOGGLE_LABELS, ...labels }).map(\n    (o) => ({ ...o, testId: testIds?.[o.value as DocumentViewMode] })\n  )\n  if (compact) {\n    const current = options.find((o) => o.value === viewMode) ?? options[0]\n    return (\n      <Select value={viewMode} onValueChange={(v) => onChange(v as DocumentViewMode)}>\n        <SelectTrigger\n          className=\"h-7 w-10 justify-center gap-0 border-input p-0 pointer-coarse:h-11! pointer-coarse:w-11! shrink-0 [&>svg]:hidden\"\n          aria-label={current.label}\n          data-testid={testIdOr(compactTestIds?.select, {\n            testId: 'documents-layout-compact-select',\n          })}\n        >\n          <SelectValue>{current.icon}</SelectValue>\n        </SelectTrigger>\n        <SelectContent align=\"center\">\n          {options.map((option) => (\n            <SelectItem\n              key={option.value}\n              value={option.value}\n              data-testid={testIdOr(compactTestIds?.option?.(option.value as DocumentViewMode), {\n                testId: `documents-layout-compact-${option.value}-option`,\n              })}\n            >\n              <span className=\"flex items-center gap-2\">\n                {option.icon}\n                {option.label}\n              </span>\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    )\n  }\n  return (\n    <ViewToggle\n      options={options}\n      value={viewMode}\n      onChange={(v) => onChange(v as DocumentViewMode)}\n      testIdPrefix={testIdPrefix ?? 'documents-layout'}\n      showLabels\n      containerCollapse\n      size=\"sm\"\n    />\n  )\n}\n"]}

package/dist/{chunk-D6XY3C4O.cjs → chunk-JGZTRLKL.cjs}

@@ -2,6 +2,7 @@
 'use strict';
 
 var chunkFX3K6LNZ_cjs = require('./chunk-FX3K6LNZ.cjs');
+var chunkPPCATBOY_cjs = require('./chunk-PPCATBOY.cjs');
 var chunkMHVNT4J3_cjs = require('./chunk-MHVNT4J3.cjs');
 var react = require('react');
 var agGridReact = require('ag-grid-react');
@@ -176,12 +177,35 @@ function GridView({
   selectionRef.current = selection;
   const onSelectionChangeRef = react.useRef(selection?.onSelectionChange);
   onSelectionChangeRef.current = selection?.onSelectionChange;
+  const syncingSelectionRef = react.useRef(false);
   const handleSelectionChanged = react.useCallback(() => {
+    if (syncingSelectionRef.current) return;
     if (!onSelectionChangeRef.current || !gridApiRef.current) return;
     const selectedNodes = gridApiRef.current.getSelectedNodes();
     const selectedData = selectedNodes.map((node) => node.data).filter((item) => item !== void 0);
     onSelectionChangeRef.current(selectedData);
   }, []);
+  const controlledSelected = selection?.controlled ? selection.selected : void 0;
+  react.useEffect(() => {
+    const api = gridApiRef.current;
+    if (!api || api.isDestroyed() || !controlledSelected) return;
+    const wanted = new Set(controlledSelected.map(getItemId));
+    const tick = [];
+    const untick = [];
+    api.forEachNode((node) => {
+      if (!node.data) return;
+      const want = wanted.has(getItemId(node.data));
+      if (want && !node.isSelected()) tick.push(node);
+      else if (!want && node.isSelected()) untick.push(node);
+    });
+    syncingSelectionRef.current = true;
+    try {
+      if (tick.length) api.setNodesSelected({ nodes: tick, newValue: true, source: "api" });
+      if (untick.length) api.setNodesSelected({ nodes: untick, newValue: false, source: "api" });
+    } finally {
+      syncingSelectionRef.current = false;
+    }
+  }, [controlledSelected, getItemId]);
   const handleRowClicked = react.useCallback(
     (event) => {
       if (!onRowClick || !event.data) return;
@@ -513,157 +537,201 @@ function GridView({
     }
   );
 }
-var DEFAULT_DOCUMENT_VIEW_TOGGLE_LABELS = {
-  gallery: "Gallery",
-  table: "Table",
+var NARROW_BELOW_PX = 480;
+var DEFAULT_SELECTION_BAR_LABELS = {
+  selected: "selected",
+  clearSelection: "Clear selection",
   review: "Review",
-  smartSearch: "Smart Search"
+  selectionActions: "Selection actions"
 };
-function ViewToggleItem({
-  option,
-  size,
-  testIdPrefix,
-  showLabel,
-  labelClassName,
-  hideTooltip
-}) {
-  const labelRef = react.useRef(null);
-  const [isTipNeeded, setIsTipNeeded] = react.useState(true);
-  const isLabelShown = () => !!labelRef.current && labelRef.current.offsetParent !== null;
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      className: "flex items-center gap-1.5",
-      onPointerEnter: () => setIsTipNeeded(!isLabelShown()),
-      onFocus: () => setIsTipNeeded(!isLabelShown()),
-      children: [
-        option.icon,
-        showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { ref: labelRef, className: labelClassName, children: option.label })
-      ]
-    }
-  );
-  return (
-    // The tooltip lives INSIDE the item: wrapping the ToggleGroupItem would make Radix
-    // Tooltip's data-state collide with the toggle's on/off state.
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.ToggleGroupItem,
-      {
-        value: option.value,
-        "aria-label": option.label,
-        size,
-        className: "rounded-[5px] border-0 bg-transparent text-muted-foreground pointer-coarse:min-h-11 data-[state=off]:hover:bg-background/60 data-[state=off]:hover:text-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:hover:bg-accent data-[state=on]:hover:text-accent-foreground",
-        "data-testid": option.testId ?? `${testIdPrefix}-${option.value}-button`,
-        children: hideTooltip ? content : /* @__PURE__ */ jsxRuntime.jsxs(ui.Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipTrigger, { asChild: true, children: content }),
-          isTipNeeded && /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipContent, { children: option.label })
-        ] })
-      }
-    )
-  );
+function SelectionBar(props) {
+  if (props.count === 0 && !props.status) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectionBarInner, { ...props });
 }
-function ViewToggle({
-  options,
-  value,
-  onChange,
-  testIdPrefix = "view",
-  showLabels = false,
-  hideTooltips = false,
-  size = "default",
-  containerCollapse = false,
+function SelectionBarInner({
+  count,
+  onClear,
+  onReview,
+  actions,
+  children,
+  status,
+  selectedLabel,
+  labels,
+  testIds,
   className
 }) {
-  const labelClassName = containerCollapse ? "hidden @lg:inline text-sm" : "hidden md:inline text-sm";
+  const l = { ...DEFAULT_SELECTION_BAR_LABELS, ...labels };
+  const hasSelection = count > 0;
+  const rootRef = react.useRef(null);
+  const actionsRef = react.useRef(null);
+  const [isCompact, setIsCompact] = react.useState(false);
+  const [isNarrow, setIsNarrow] = react.useState(false);
+  const overflowRootWidthRef = react.useRef(Number.POSITIVE_INFINITY);
+  const measureRef = react.useRef(() => {
+  });
+  measureRef.current = () => {
+    const root = rootRef.current;
+    const el = actionsRef.current;
+    if (!root || !el) return;
+    const available = root.parentElement?.clientWidth ?? 0;
+    setIsNarrow(available > 0 && available < NARROW_BELOW_PX);
+    if (!isCompact) {
+      if (el.scrollWidth > el.clientWidth + 1) {
+        overflowRootWidthRef.current = root.clientWidth;
+        setIsCompact(true);
+      }
+    } else if (root.clientWidth > overflowRootWidthRef.current + 64) {
+      setIsCompact(false);
+    }
+  };
+  react.useLayoutEffect(() => {
+    measureRef.current();
+    const root = rootRef.current;
+    if (!root) return;
+    return chunkPPCATBOY_cjs.observeResize(root, () => measureRef.current());
+  }, []);
+  react.useLayoutEffect(() => {
+    measureRef.current();
+    const inner = actionsRef.current;
+    if (!inner || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => measureRef.current());
+    inner.querySelectorAll("button").forEach((button) => observer.observe(button));
+    return () => observer.disconnect();
+  });
+  react.useLayoutEffect(() => {
+    let isCancelled = false;
+    void document.fonts?.ready.then(() => {
+      if (!isCancelled) measureRef.current();
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.ToggleGroup,
+    "div",
     {
-      variant: "default",
-      type: "single",
-      value,
-      onValueChange: (next) => next && onChange(next),
-      className: ui.cn("gap-0.5 rounded-md bg-muted p-0.5", className),
-      children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-        ViewToggleItem,
+      "data-slot": "selection-bar",
+      className: ui.cn("pointer-events-none sticky bottom-0 z-30 h-0", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-4 flex justify-center px-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          option,
-          size,
-          testIdPrefix,
-          showLabel: showLabels,
-          labelClassName,
-          hideTooltip: hideTooltips
-        },
-        option.value
-      ))
+          ref: rootRef,
+          role: "toolbar",
+          "aria-label": l.selectionActions,
+          "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.toolbar, { testId: "bulk-actions-toolbar" }),
+          "data-narrow": isNarrow || void 0,
+          className: "pointer-events-auto flex min-h-12 max-w-full items-center rounded-lg border border-border bg-popover px-2 py-1.5 shadow-xl",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 px-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.count, { testId: "bulk-selected-count" }),
+                "aria-live": "polite",
+                className: ui.cn(
+                  "flex shrink-0 items-center rounded-full bg-accent text-sm font-semibold tabular-nums text-accent-foreground",
+                  isCompact ? "gap-1 px-2.5 py-1" : "gap-2 px-3 py-1"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    count,
+                    !isCompact && ` ${selectedLabel ?? l.selected}`
+                  ] }),
+                  hasSelection && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClear,
+                      "aria-label": l.clearSelection,
+                      "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.clear, { testId: "bulk-clear-selection-button" }),
+                      className: "rounded-full p-0.5 transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:p-[15px]",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5" })
+                    }
+                  )
+                ]
+              }
+            ),
+            onReview && /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onReview,
+                "aria-label": isNarrow ? l.review : void 0,
+                "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.review, { testId: "bulk-review-button" }),
+                className: "flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-accent px-2.5 text-sm font-medium text-accent-foreground transition-colors hover:bg-accent/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:h-11",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, { className: "size-3.5" }),
+                  !isNarrow && l.review
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-px shrink-0 bg-border" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                ref: actionsRef,
+                className: "flex min-w-0 flex-1 items-center gap-2 overflow-x-auto overscroll-x-contain [scrollbar-width:none]",
+                children: [
+                  status && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: status }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: ui.cn(
+                        "flex min-w-0 items-center gap-2",
+                        !hasSelection && "pointer-events-none opacity-40"
+                      ),
+                      children: [
+                        actions?.map((a) => /* @__PURE__ */ jsxRuntime.jsx(SelectionBarAction, { ...a, isCompact }, a.id)),
+                        typeof children === "function" ? children(isCompact, isNarrow) : children
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        }
+      ) })
     }
   );
 }
-function documentViewOptions(l) {
-  return [
-    // "Gallery" (page-preview grid) reads more conventionally than "Tiles".
-    { value: "explorer", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileImage, { className: "size-3.5" }), label: l.gallery },
-    { value: "grid", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table2, { className: "size-3.5" }), label: l.table },
-    { value: "navigator", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, { className: "size-3.5" }), label: l.review },
-    { value: "search", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-3.5" }), label: l.smartSearch }
-  ];
-}
-function DocumentViewToggle({
-  viewMode,
-  onChange,
-  compact,
-  labels,
-  testIdPrefix,
-  testIds,
-  compactTestIds
+function SelectionBarAction({
+  icon: Icon,
+  label,
+  onClick,
+  disabled = false,
+  variant = "ghost",
+  tooltip,
+  testId,
+  className,
+  isCompact = false
 }) {
-  const options = documentViewOptions({ ...DEFAULT_DOCUMENT_VIEW_TOGGLE_LABELS, ...labels }).map(
-    (o) => ({ ...o, testId: testIds?.[o.value] })
-  );
-  if (compact) {
-    const current = options.find((o) => o.value === viewMode) ?? options[0];
-    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { value: viewMode, onValueChange: (v) => onChange(v), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.SelectTrigger,
-        {
-          className: "h-7 w-10 justify-center gap-0 border-input p-0 pointer-coarse:h-11! pointer-coarse:w-11! shrink-0 [&>svg]:hidden",
-          "aria-label": current.label,
-          "data-testid": chunkMHVNT4J3_cjs.testIdOr(compactTestIds?.select, {
-            testId: "documents-layout-compact-select"
-          }),
-          children: /* @__PURE__ */ jsxRuntime.jsx(ui.SelectValue, { children: current.icon })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.SelectContent, { align: "center", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-        ui.SelectItem,
-        {
-          value: option.value,
-          "data-testid": chunkMHVNT4J3_cjs.testIdOr(compactTestIds?.option?.(option.value), {
-            testId: `documents-layout-compact-${option.value}-option`
-          }),
-          children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
-            option.icon,
-            option.label
-          ] })
-        },
-        option.value
-      )) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ViewToggle,
-    {
-      options,
-      value: viewMode,
-      onChange: (v) => onChange(v),
-      testIdPrefix: testIdPrefix ?? "documents-layout",
-      showLabels: true,
-      containerCollapse: true,
-      size: "sm"
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Button,
+      {
+        variant,
+        size: "sm",
+        onClick,
+        disabled,
+        "aria-label": isCompact ? label : void 0,
+        "data-testid": testId,
+        className: ui.cn(
+          "h-8 shrink-0 gap-1.5 whitespace-nowrap px-2 disabled:opacity-50 pointer-coarse:h-11",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4" }),
+          !isCompact && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: label })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: tooltip ?? label }) })
+  ] });
 }
 
-exports.DEFAULT_DOCUMENT_VIEW_TOGGLE_LABELS = DEFAULT_DOCUMENT_VIEW_TOGGLE_LABELS;
-exports.DocumentViewToggle = DocumentViewToggle;
+exports.DEFAULT_SELECTION_BAR_LABELS = DEFAULT_SELECTION_BAR_LABELS;
 exports.GridView = GridView;
-exports.ViewToggle = ViewToggle;
-//# sourceMappingURL=chunk-D6XY3C4O.cjs.map
-//# sourceMappingURL=chunk-D6XY3C4O.cjs.map
+exports.SelectionBar = SelectionBar;
+exports.SelectionBarAction = SelectionBarAction;
+//# sourceMappingURL=chunk-JGZTRLKL.cjs.map
+//# sourceMappingURL=chunk-JGZTRLKL.cjs.map