@arbidocs/blocks 0.3.185 → 0.4.0

package/dist/chunk-DVLEQURC.js

@@ -0,0 +1,672 @@
+"use client";
+import { testIdOr } from './chunk-7F6CBP3Z.js';
+import { useRef, useSyncExternalStore, useMemo, useCallback, useEffect, useState } from 'react';
+import { AgGridReact } from 'ag-grid-react';
+import { themeQuartz, AllCommunityModule } from 'ag-grid-community';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FileImage, Table2, BookOpen, Search } from 'lucide-react';
+import { ToggleGroup, cn, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, ToggleGroupItem, Tooltip, TooltipTrigger, TooltipContent } from '@arbidocs/react/ui';
+
+// src/files/grid-test-ids.ts
+function applyGridTestIds(root, itemsById, { getRowTestId, getCellTestId }) {
+  if (!getRowTestId && !getCellTestId) return;
+  root.querySelectorAll(".ag-center-cols-container .ag-row[row-id]").forEach((row) => {
+    const item = itemsById.get(row.getAttribute("row-id") ?? "");
+    if (item === void 0) return;
+    if (getRowTestId) row.setAttribute("data-testid", getRowTestId(item));
+    if (getCellTestId) {
+      row.querySelectorAll(".ag-cell[col-id]").forEach((cell) => {
+        cell.setAttribute("data-testid", getCellTestId(cell.getAttribute("col-id") ?? "", item));
+      });
+    }
+  });
+}
+function watchGridTestIds(root, getItemsById, options) {
+  if (!options.getRowTestId && !options.getCellTestId) return () => {
+  };
+  const run = () => applyGridTestIds(root, getItemsById(), options);
+  run();
+  if (typeof MutationObserver === "undefined") return () => {
+  };
+  const observer = new MutationObserver(run);
+  observer.observe(root, { childList: true, subtree: true });
+  return () => observer.disconnect();
+}
+var cssVar = (name, alpha) => alpha === void 0 ? `hsl(var(--${name}))` : `hsl(var(--${name}) / ${alpha})`;
+var arbiTheme = themeQuartz.withParams({
+  // Variant B palette: white canvas, quiet header, muted hover nudge, accent-tint selection.
+  // Every colour is a host CSS variable, so light/dark follow the app with no .dark overrides.
+  backgroundColor: cssVar("background"),
+  foregroundColor: cssVar("foreground"),
+  borderColor: cssVar("border"),
+  headerBackgroundColor: cssVar("background"),
+  headerTextColor: cssVar("muted-foreground"),
+  oddRowBackgroundColor: cssVar("background"),
+  rowHoverColor: cssVar("muted", 0.6),
+  // Checkbox-selected rows: a light accent tint. A row opened elsewhere (e.g. the viewer) may take
+  // the full accent, so the two states stay distinguishable.
+  selectedRowBackgroundColor: cssVar("accent", 0.6),
+  rangeSelectionBackgroundColor: cssVar("accent"),
+  accentColor: cssVar("primary"),
+  inputFocusBorder: { color: cssVar("primary") },
+  headerColumnBorder: false,
+  headerColumnResizeHandleColor: "transparent",
+  // still draggable, no visible divider
+  // Font settings — inherit the host app's font. A googleFont here never
+  // loaded under the apps' CSP, so every grid silently fell back to the
+  // browser's default SERIF and read as unstyled.
+  fontFamily: "inherit",
+  fontSize: 14,
+  headerFontSize: 12.5,
+  headerFontWeight: 500,
+  // Sizing
+  headerHeight: 44,
+  rowHeight: 40,
+  cellHorizontalPadding: 16,
+  // Borders - structural settings only.
+  // Row border is a real hairline in the theme border colour (not hardcoded
+  // white, which was invisible on the light-mode background and wrong in dark
+  // mode) so adjacent rows are clearly separated — important now that rows can
+  // be tall and multi-line (e.g. the Abstract column).
+  rowBorder: { style: "solid", width: 1, color: "hsl(var(--border))" },
+  columnBorder: false,
+  // Row hairlines only
+  wrapperBorder: false,
+  // No rounded corners for clean look (except checkboxes)
+  borderRadius: 0,
+  wrapperBorderRadius: 0,
+  checkboxBorderRadius: 2
+  // Keep checkboxes square
+});
+var TOUCH_ROW_HEIGHT = 52;
+var COARSE_QUERY = "(pointer: coarse)";
+var queryCoarsePointer = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(COARSE_QUERY) ?? void 0 : void 0;
+var getCoarsePointer = () => queryCoarsePointer()?.matches ?? false;
+function subscribeCoarsePointer(onChange) {
+  const mq = queryCoarsePointer();
+  mq?.addEventListener?.("change", onChange);
+  return () => mq?.removeEventListener?.("change", onChange);
+}
+function GridView({
+  items,
+  columnDefs,
+  getItemId,
+  selection,
+  emptyState,
+  isLoading = false,
+  loadingMessage = "Loading...",
+  gridOptions,
+  onGridReady,
+  onCellValueChanged,
+  onRowClick,
+  persistState = false,
+  gridState,
+  onGridStateChange,
+  initialVisibleColumns,
+  className = "w-full",
+  height = 500,
+  rowHeight: rowHeightProp,
+  testId = "grid-view",
+  pinnedBottomRowData,
+  pinnedTopRowData,
+  pagination = false,
+  paginationPageSizeSelector,
+  getRowTestId,
+  getCellTestId,
+  showEmpty
+}) {
+  const gridApiRef = useRef(null);
+  const isCoarsePointer = useSyncExternalStore(
+    subscribeCoarsePointer,
+    getCoarsePointer,
+    () => false
+  );
+  const rowHeight = isCoarsePointer ? Math.max(rowHeightProp ?? gridOptions?.rowHeight ?? 40, TOUCH_ROW_HEIGHT) : rowHeightProp;
+  const initialRowHeightRef = useRef(rowHeight);
+  const initialGridStateRef = useRef(gridState);
+  const initialState = useMemo(() => {
+    if (!persistState) return void 0;
+    return initialGridStateRef.current;
+  }, [persistState]);
+  const saveGridState = useCallback(() => {
+    if (!persistState || !onGridStateChange || !gridApiRef.current) return;
+    const state = gridApiRef.current.getState();
+    onGridStateChange(state);
+  }, [persistState, onGridStateChange]);
+  const ensureSelectionColumnVisible = useCallback(() => {
+    if (!gridApiRef.current || !selection?.mode) return;
+    const currentState = gridApiRef.current.getColumnState();
+    const selectionColumn = currentState.find((col) => col.colId === "ag-Grid-SelectionColumn");
+    const selectionColumnIndex = currentState.findIndex(
+      (col) => col.colId === "ag-Grid-SelectionColumn"
+    );
+    if (!selectionColumn || selectionColumn.hide || selectionColumnIndex !== 0) {
+      gridApiRef.current.setColumnsVisible(["ag-Grid-SelectionColumn"], true);
+      gridApiRef.current.applyColumnState({
+        state: [
+          {
+            colId: "ag-Grid-SelectionColumn",
+            hide: false,
+            width: selectionColumn?.width || 48,
+            pinned: null
+            // Ensure not pinned in wrong position
+          }
+        ],
+        defaultState: { hide: void 0 },
+        applyOrder: false
+      });
+      if (selectionColumnIndex !== 0) {
+        gridApiRef.current.moveColumns(["ag-Grid-SelectionColumn"], 0);
+      }
+    }
+  }, [selection?.mode]);
+  const containerRef = useRef(null);
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const getItemIdRef = useRef(getItemId);
+  getItemIdRef.current = getItemId;
+  const hasTestIdHooks = Boolean(getRowTestId || getCellTestId);
+  useEffect(() => {
+    const root = containerRef.current;
+    if (!root || !hasTestIdHooks) return;
+    return watchGridTestIds(
+      root,
+      () => new Map(itemsRef.current.map((item) => [getItemIdRef.current(item), item])),
+      { getRowTestId, getCellTestId }
+    );
+  }, [hasTestIdHooks, getRowTestId, getCellTestId, isLoading]);
+  const getRowId = useCallback(
+    (params) => {
+      return getItemId(params.data);
+    },
+    [getItemId]
+  );
+  const selectionRef = useRef(selection);
+  selectionRef.current = selection;
+  const onSelectionChangeRef = useRef(selection?.onSelectionChange);
+  onSelectionChangeRef.current = selection?.onSelectionChange;
+  const handleSelectionChanged = useCallback(() => {
+    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 handleRowClicked = useCallback(
+    (event) => {
+      if (!onRowClick || !event.data) return;
+      const target = event.event?.target;
+      if (target?.closest('button, input, a, select, textarea, [role="button"]')) return;
+      onRowClick(event.data);
+    },
+    [onRowClick]
+  );
+  const desiredHiddenRef = useRef(null);
+  const snapshotDesiredHidden = useCallback(() => {
+    const api = gridApiRef.current;
+    if (!api) return;
+    desiredHiddenRef.current = new Map(api.getColumnState().map((c) => [c.colId, !!c.hide]));
+  }, []);
+  const handleGridReady = useCallback(
+    (event) => {
+      gridApiRef.current = event.api;
+      if (!initialState && initialVisibleColumns?.length) {
+        const currentState = event.api.getColumnState();
+        const stateMap = new Map(currentState.map((col) => [col.colId, col]));
+        const visibleSet = new Set(initialVisibleColumns);
+        const selectionCol = stateMap.get("ag-Grid-SelectionColumn");
+        const orderedState = [
+          // Selection column first - ALWAYS visible, create if not in state
+          selectionCol ? { ...selectionCol, hide: false } : { colId: "ag-Grid-SelectionColumn", hide: false, width: 48 },
+          // Visible columns in specified order
+          ...initialVisibleColumns.filter((colId) => colId !== "ag-Grid-SelectionColumn").map((colId) => {
+            const col = stateMap.get(colId);
+            return col ? { ...col, hide: false } : void 0;
+          }),
+          // Hidden columns (everything else)
+          ...currentState.filter((col) => col.colId !== "ag-Grid-SelectionColumn" && !visibleSet.has(col.colId)).map((col) => ({ ...col, hide: true }))
+        ].filter((col) => col !== void 0);
+        event.api.applyColumnState({ state: orderedState, applyOrder: true });
+      }
+      if (initialState && initialVisibleColumns?.length) {
+        const currentState = event.api.getColumnState();
+        const savedColIds = new Set(
+          initialState.columnOrder?.orderedColIds ?? currentState.map((c) => c.colId)
+        );
+        const newCols = currentState.filter(
+          (col) => !savedColIds.has(col.colId) && col.colId !== "ag-Grid-SelectionColumn"
+        );
+        if (newCols.length > 0) {
+          const defaultVisible = new Set(initialVisibleColumns);
+          event.api.applyColumnState({
+            state: newCols.map((col) => ({
+              ...col,
+              hide: !defaultVisible.has(col.colId)
+            }))
+          });
+        }
+      }
+      ensureSelectionColumnVisible();
+      snapshotDesiredHidden();
+      if (onGridReady) {
+        onGridReady({ api: event.api });
+      }
+      const sel = selectionRef.current;
+      if (sel && sel.selected.length > 0) {
+        const selectedIds = new Set(sel.selected.map(getItemId));
+        event.api.forEachNode((node) => {
+          if (node.data && selectedIds.has(getItemId(node.data))) {
+            node.setSelected(true);
+          }
+        });
+      }
+    },
+    [
+      onGridReady,
+      getItemId,
+      ensureSelectionColumnVisible,
+      snapshotDesiredHidden,
+      initialState,
+      initialVisibleColumns
+    ]
+  );
+  const handleColumnVisible = useCallback(
+    (event) => {
+      const api = gridApiRef.current;
+      if (!api) return;
+      if (event.source === "gridOptionsChanged") {
+        const desired = desiredHiddenRef.current;
+        if (!desired) return;
+        const fixes = api.getColumnState().filter(
+          (c) => c.colId !== "ag-Grid-SelectionColumn" && desired.has(c.colId) && desired.get(c.colId) !== !!c.hide
+        ).map((c) => ({ colId: c.colId, hide: desired.get(c.colId) }));
+        if (fixes.length) api.applyColumnState({ state: fixes });
+      } else {
+        snapshotDesiredHidden();
+      }
+    },
+    [snapshotDesiredHidden]
+  );
+  const handleFirstDataRendered = useCallback(() => {
+    ensureSelectionColumnVisible();
+    snapshotDesiredHidden();
+  }, [ensureSelectionColumnVisible, snapshotDesiredHidden]);
+  const handleModelUpdated = useCallback(() => {
+  }, []);
+  const prevItemsRef = useRef([]);
+  useEffect(() => {
+    prevItemsRef.current = items;
+  }, [items]);
+  const handleStateUpdated = useCallback(() => {
+    saveGridState();
+  }, [saveGridState]);
+  const defaultOptions = useMemo(() => {
+    return {
+      // Initial row height (stable — captured once). Live changes go through the
+      // imperative effect, not this option, to avoid column-state churn.
+      rowHeight: initialRowHeightRef.current,
+      suppressMenuHide: true,
+      // Prevent hiding columns since we don't have enterprise sidebar
+      maintainColumnOrder: true,
+      // Preserve column order when columns are added/removed
+      // Row virtualization: Render rows as needed for performance
+      // rowBuffer renders extra rows above/below viewport for smoother scrolling
+      rowBuffer: 10,
+      // Render 10 extra rows above/below viewport for smooth scrolling
+      suppressColumnVirtualisation: false,
+      // Keep column virtualization enabled
+      suppressRowVirtualisation: false,
+      // ENABLE row virtualization - only render visible rows
+      animateRows: false,
+      // Disable row animations
+      suppressColumnMoveAnimation: true,
+      // Disable column move/resize animations
+      // Efficient updates with React Query cache
+      // getRowId enables change detection - grid only re-renders changed rows
+      // Works perfectly with React Query's cache updates
+      getRowId,
+      rowSelection: selection?.mode ? {
+        mode: selection.mode === "single" ? "singleRow" : "multiRow",
+        selectAll: "filtered",
+        // Header checkbox selects all filtered rows (across all pages)
+        // In multi-row mode, only checkboxes should toggle selection (clicking row body would replace selection)
+        enableClickSelection: selection.mode === "single",
+        checkboxes: true,
+        headerCheckbox: selection.mode === "multiple"
+      } : void 0,
+      selectionColumnDef: selection?.mode ? {
+        sortable: selection.mode === "multiple",
+        width: 48,
+        lockVisible: true,
+        // Cannot be hidden
+        suppressMovable: true
+        // Cannot be moved
+      } : void 0,
+      // Use normal layout for better performance - autoHeight causes forced reflows
+      domLayout: "normal",
+      // Stop editing when clicking outside the cell/grid
+      stopEditingWhenCellsLoseFocus: true,
+      // Additional performance optimizations
+      suppressCellFocus: true,
+      // Don't focus cells on click (faster)
+      suppressRowHoverHighlight: true,
+      // Disable hover highlight - reduces DOM manipulation during scroll
+      suppressScrollOnNewData: true,
+      // Don't scroll when data updates
+      suppressAggFuncInHeader: true,
+      // Don't show aggregation functions (faster)
+      // Tooltip UX: the AG Grid default show-delay is 2 s which hurts
+      // discoverability for cells where tooltips carry the "reveal full
+      // content" affordance for non-editable users. 300 ms is snappy
+      // without being accidental. tooltipInteraction lets users hover
+      // onto the tooltip itself (e.g. to select / copy long text).
+      // These are AG Grid's native tooltip controls — no React / Radix
+      // provider involved, zero per-row cost; tooltip DOM is created on
+      // demand when hover-delay elapses and destroyed on mouseout.
+      tooltipShowDelay: 300,
+      tooltipHideDelay: 4e3,
+      tooltipInteraction: true,
+      // Pagination (disabled by default)
+      pagination,
+      paginationPageSizeSelector,
+      defaultColDef: {
+        sortable: true,
+        resizable: true,
+        unSortIcon: false,
+        // Sort glyph only on the sorted column (every header carrying one was noise)
+        sortingOrder: ["asc", "desc", null],
+        // 3-way sorting: asc → desc → unsorted (AG Grid default)
+        wrapText: false,
+        // Disable text wrapping for cleaner display
+        autoHeight: false,
+        // Use fixed row height from theme
+        wrapHeaderText: false,
+        // Disable header text wrapping for cleaner look
+        autoHeaderHeight: false,
+        // Fixed header height
+        filterParams: {
+          maxNumConditions: 1,
+          buttons: ["reset"]
+        }
+      }
+    };
+  }, [selection?.mode, getRowId, pagination, paginationPageSizeSelector]);
+  const combinedOptions = useMemo(
+    () => ({ ...defaultOptions, ...gridOptions }),
+    [defaultOptions, gridOptions]
+  );
+  const containerStyle = useMemo(() => {
+    const style = { height };
+    if (rowHeight) {
+      const LINE_PX = 14 * 1.35;
+      const BORDER = 2;
+      const PREFERRED_PAD = 16;
+      const padTotal = Math.max(0, Math.min(PREFERRED_PAD, rowHeight - BORDER - LINE_PX));
+      const lines = Math.max(1, Math.floor((rowHeight - BORDER - padTotal) / LINE_PX));
+      const vars = style;
+      vars["--multiline-line-clamp"] = `${lines}`;
+      vars["--multiline-pad-y"] = `${padTotal / 2}px`;
+      vars["--multiline-max-h"] = `${lines * LINE_PX + padTotal / 2 + BORDER}px`;
+    }
+    return style;
+  }, [height, rowHeight]);
+  useEffect(() => {
+    const api = gridApiRef.current;
+    if (!api || api.isDestroyed() || !rowHeight) return;
+    api.setGridOption("rowHeight", rowHeight);
+    api.resetRowHeights();
+  }, [rowHeight]);
+  const containerClassName = useMemo(() => {
+    const baseClass = className || "";
+    const shadowClass = "shadow-sm";
+    const alignClass = rowHeight ? "ag-cells-centered" : "";
+    return [baseClass, shadowClass, alignClass].filter(Boolean).join(" ");
+  }, [className, rowHeight]);
+  if (isLoading) {
+    const skeletonRowCount = 12;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": `${testId}-loading`,
+        className: containerClassName,
+        style: containerStyle,
+        "aria-busy": "true",
+        "aria-label": loadingMessage,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex h-11 items-center gap-4 border-b border-border/40 px-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-3 w-6 rounded bg-muted animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 w-32 rounded bg-muted animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 w-24 rounded bg-muted animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 w-20 rounded bg-muted animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 w-28 rounded bg-muted animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 w-16 rounded bg-muted animate-pulse ml-auto" })
+          ] }),
+          Array.from({ length: skeletonRowCount }).map((_, rowIdx) => /* @__PURE__ */ jsxs("div", { className: "flex h-10 items-center gap-4 border-b border-border/20 px-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded-sm bg-muted/70 animate-pulse" }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-3 rounded bg-muted/70 animate-pulse",
+                style: { width: `${20 + rowIdx * 17 % 40}%` }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-3 rounded bg-muted/60 animate-pulse",
+                style: { width: `${8 + rowIdx * 11 % 12}%` }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-3 rounded bg-muted/60 animate-pulse",
+                style: { width: `${6 + rowIdx * 7 % 10}%` }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-3 rounded bg-muted/50 animate-pulse ml-auto",
+                style: { width: `${5 + rowIdx * 5 % 8}%` }
+              }
+            )
+          ] }, rowIdx))
+        ]
+      }
+    );
+  }
+  if ((showEmpty ?? items.length === 0) && emptyState) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": `${testId}-empty`,
+        className: "flex h-96 max-h-full flex-col items-center overflow-y-auto p-6 text-center",
+        children: /* @__PURE__ */ jsxs("div", { className: "my-auto flex flex-col items-center", children: [
+          emptyState.icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/60 mb-4", children: emptyState.icon }),
+          emptyState.title && /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium mb-2", children: emptyState.title }),
+          emptyState.message && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6 max-w-md", children: emptyState.message }),
+          emptyState.action
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: containerClassName,
+      style: containerStyle,
+      "data-testid": testId,
+      children: /* @__PURE__ */ jsx(
+        AgGridReact,
+        {
+          theme: arbiTheme,
+          modules: [AllCommunityModule],
+          columnDefs,
+          rowData: items,
+          pinnedBottomRowData,
+          pinnedTopRowData,
+          getRowId,
+          initialState,
+          onGridReady: handleGridReady,
+          onFirstDataRendered: handleFirstDataRendered,
+          onModelUpdated: handleModelUpdated,
+          onSelectionChanged: handleSelectionChanged,
+          onCellValueChanged,
+          onRowClicked: handleRowClicked,
+          onStateUpdated: handleStateUpdated,
+          onColumnVisible: handleColumnVisible,
+          ...combinedOptions
+        }
+      )
+    }
+  );
+}
+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": `${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,
+  compactTestIds
+}) {
+  const options = documentViewOptions({ ...DEFAULT_DOCUMENT_VIEW_TOGGLE_LABELS, ...labels });
+  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, GridView, ViewToggle };
+//# sourceMappingURL=chunk-DVLEQURC.js.map
+//# sourceMappingURL=chunk-DVLEQURC.js.map