@ai-matrx/design-system 0.42.1 → 0.44.0

package/dist/data-table/index.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { h as MatrxDataTableProps, i as TableViewSnapshot, d as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-q5ficDSo.cjs';
-export { A as AnyOfColumnSearch, k as CellEditType, l as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, m as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, n as MatrxDataTableCoverageConfig, c as MatrxDataTableDensity, o as MatrxDataTableDetailConfig, p as MatrxDataTableEditConfig, q as MatrxDataTableEmptyState, r as MatrxDataTableExpandedDetailConfig, s as MatrxDataTableFacetsConfig, t as MatrxDataTableFilterUi, u as MatrxDataTableGroupingConfig, v as MatrxDataTableHierarchyConfig, w as MatrxDataTableHierarchyMove, x as MatrxDataTableMobileCardControls, y as MatrxDataTableMultiExpandedDetailConfig, z as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, B as MatrxDataTableSelectionConfig, D as MatrxDataTableSingleExpandedDetailConfig, E as MatrxDataTableSourceProcessing, F as MatrxDataTableSpreadsheetConfig, G as MatrxDataTableStyleConfig, H as MatrxDataTableToolbar, I as MatrxDataTableUrlStateConfig, J as MatrxDataTableVirtualizeConfig, K as MatrxDataTableWindowConfig, N as MatrxTablePagination, O as SortDirection, S as SortState, P as TableRankedSearchOptions, b as TableSavedViewsProps, T as TableSearchMatchMode, Q as TableSearchRole, R as TableSearchScope, U as TableViewQuery, V as TextFilterMode, W as ToolbarFacet, X as inferTableSearchRole, Y as rankTableSearchRows, Z as resolveTableSearchScopes } from '../types-q5ficDSo.cjs';
+import { h as MatrxDataTableProps, i as TableViewSnapshot, d as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-CqU57qk8.cjs';
+export { A as AnyOfColumnSearch, k as CellEditType, l as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, m as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, n as MatrxDataTableCoverageConfig, c as MatrxDataTableDensity, o as MatrxDataTableDetailConfig, p as MatrxDataTableEditConfig, q as MatrxDataTableEmptyState, r as MatrxDataTableExpandedDetailConfig, s as MatrxDataTableFacetsConfig, t as MatrxDataTableFilterUi, u as MatrxDataTableGroupingConfig, v as MatrxDataTableHierarchyConfig, w as MatrxDataTableHierarchyMove, x as MatrxDataTableMobileCardControls, y as MatrxDataTableMultiExpandedDetailConfig, z as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, B as MatrxDataTableSelectionConfig, D as MatrxDataTableSingleExpandedDetailConfig, E as MatrxDataTableSourceProcessing, F as MatrxDataTableSpreadsheetConfig, G as MatrxDataTableStyleConfig, H as MatrxDataTableToolbar, I as MatrxDataTableUrlStateConfig, J as MatrxDataTableVirtualizeConfig, K as MatrxDataTableWindowConfig, N as MatrxTablePagination, O as SortDirection, S as SortState, P as TableRankedSearchOptions, b as TableSavedViewsProps, T as TableSearchMatchMode, Q as TableSearchRole, R as TableSearchScope, U as TableViewQuery, V as TextFilterMode, W as ToolbarFacet, X as inferTableSearchRole, Y as rankTableSearchRows, Z as resolveTableSearchScopes } from '../types-CqU57qk8.cjs';
 export { MatrxDataTableHost, MatrxDataTableProvider, MatrxTableRowAlchemy, TableContextMenuBoundaryProps, TableDoors, TableEntityRefProps, TableLinkProps, TableMenuIconProps, TablePeekProps, TableSidePanelProps, TableToolbarActionProps, TableWindowPanelProps, useMatrxDataTableHost, useMatrxTableRowAlchemy } from './host.cjs';
 import { CopyControlProps } from './copy-types.cjs';
 export { AgentPayloadInput } from './copy-types.cjs';

package/dist/data-table/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { h as MatrxDataTableProps, i as TableViewSnapshot, d as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-afUz93xo.js';
-export { A as AnyOfColumnSearch, k as CellEditType, l as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, m as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, n as MatrxDataTableCoverageConfig, c as MatrxDataTableDensity, o as MatrxDataTableDetailConfig, p as MatrxDataTableEditConfig, q as MatrxDataTableEmptyState, r as MatrxDataTableExpandedDetailConfig, s as MatrxDataTableFacetsConfig, t as MatrxDataTableFilterUi, u as MatrxDataTableGroupingConfig, v as MatrxDataTableHierarchyConfig, w as MatrxDataTableHierarchyMove, x as MatrxDataTableMobileCardControls, y as MatrxDataTableMultiExpandedDetailConfig, z as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, B as MatrxDataTableSelectionConfig, D as MatrxDataTableSingleExpandedDetailConfig, E as MatrxDataTableSourceProcessing, F as MatrxDataTableSpreadsheetConfig, G as MatrxDataTableStyleConfig, H as MatrxDataTableToolbar, I as MatrxDataTableUrlStateConfig, J as MatrxDataTableVirtualizeConfig, K as MatrxDataTableWindowConfig, N as MatrxTablePagination, O as SortDirection, S as SortState, P as TableRankedSearchOptions, b as TableSavedViewsProps, T as TableSearchMatchMode, Q as TableSearchRole, R as TableSearchScope, U as TableViewQuery, V as TextFilterMode, W as ToolbarFacet, X as inferTableSearchRole, Y as rankTableSearchRows, Z as resolveTableSearchScopes } from '../types-afUz93xo.js';
+import { h as MatrxDataTableProps, i as TableViewSnapshot, d as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-CUR8Hbt5.js';
+export { A as AnyOfColumnSearch, k as CellEditType, l as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, m as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, n as MatrxDataTableCoverageConfig, c as MatrxDataTableDensity, o as MatrxDataTableDetailConfig, p as MatrxDataTableEditConfig, q as MatrxDataTableEmptyState, r as MatrxDataTableExpandedDetailConfig, s as MatrxDataTableFacetsConfig, t as MatrxDataTableFilterUi, u as MatrxDataTableGroupingConfig, v as MatrxDataTableHierarchyConfig, w as MatrxDataTableHierarchyMove, x as MatrxDataTableMobileCardControls, y as MatrxDataTableMultiExpandedDetailConfig, z as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, B as MatrxDataTableSelectionConfig, D as MatrxDataTableSingleExpandedDetailConfig, E as MatrxDataTableSourceProcessing, F as MatrxDataTableSpreadsheetConfig, G as MatrxDataTableStyleConfig, H as MatrxDataTableToolbar, I as MatrxDataTableUrlStateConfig, J as MatrxDataTableVirtualizeConfig, K as MatrxDataTableWindowConfig, N as MatrxTablePagination, O as SortDirection, S as SortState, P as TableRankedSearchOptions, b as TableSavedViewsProps, T as TableSearchMatchMode, Q as TableSearchRole, R as TableSearchScope, U as TableViewQuery, V as TextFilterMode, W as ToolbarFacet, X as inferTableSearchRole, Y as rankTableSearchRows, Z as resolveTableSearchScopes } from '../types-CUR8Hbt5.js';
 export { MatrxDataTableHost, MatrxDataTableProvider, MatrxTableRowAlchemy, TableContextMenuBoundaryProps, TableDoors, TableEntityRefProps, TableLinkProps, TableMenuIconProps, TablePeekProps, TableSidePanelProps, TableToolbarActionProps, TableWindowPanelProps, useMatrxDataTableHost, useMatrxTableRowAlchemy } from './host.js';
 import { CopyControlProps } from './copy-types.js';
 export { AgentPayloadInput } from './copy-types.js';

package/dist/data-table/index.js

@@ -6,7 +6,7 @@ import {
   Fragment as Fragment7,
   isValidElement as isValidElement2,
   useCallback as useCallback8,
-  useEffect as useEffect16,
+  useEffect as useEffect17,
   useId as useId2,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo9,
@@ -1529,6 +1529,15 @@ function useIsMobile() {
   return isMobile;
 }
 
+// src/layer-front.ts
+var LAYER_FRONT_EVENT = "matrx:layer-front";
+function announceLayerFront(element) {
+  if (typeof document === "undefined") return;
+  document.dispatchEvent(
+    new CustomEvent(LAYER_FRONT_EVENT, { detail: { element } })
+  );
+}
+
 // src/dialog.tsx
 import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var DialogWindowedByDefaultContext = React11.createContext(false);
@@ -1599,6 +1608,8 @@ var DialogContent = React11.forwardRef(
     dismissOnOutsideClick = false,
     onInteractOutside,
     onEscapeKeyDown,
+    onPointerDownCapture,
+    onFocusCapture,
     style,
     ...props
   }, ref) => {
@@ -1611,6 +1622,24 @@ var DialogContent = React11.forwardRef(
     const [containerEl, setContainerEl] = React11.useState(
       null
     );
+    const stacks = windowed && windowedByDefault;
+    const [behind, setBehind] = React11.useState(false);
+    React11.useEffect(() => {
+      if (!stacks || !containerEl) return;
+      const onFront = (event) => {
+        const element = event.detail?.element ?? null;
+        if (element && (element === containerEl || containerEl.contains(element))) return;
+        setBehind(true);
+      };
+      document.addEventListener(LAYER_FRONT_EVENT, onFront);
+      announceLayerFront(containerEl);
+      return () => document.removeEventListener(LAYER_FRONT_EVENT, onFront);
+    }, [stacks, containerEl]);
+    const bringToFront = () => {
+      if (!stacks || !containerEl) return;
+      setBehind(false);
+      announceLayerFront(containerEl);
+    };
     const [offset, setOffset] = React11.useState({ x: 0, y: 0 });
     const dragRef = React11.useRef(null);
     const handle = React11.useMemo(() => {
@@ -1669,10 +1698,20 @@ var DialogContent = React11.forwardRef(
             // z=1000); staying below that boundary makes a newly focused window
             // usable without coupling the two systems.
             !isModal && !windowedByDefault && "z-[900]",
+            // Another layer came to the front after this window (layer-front.ts).
+            stacks && behind && "z-[999]",
             // Without an overlay the card needs its own separation from the page.
             windowed && "shadow-2xl ring-1 ring-border/60"
           ),
           style: windowed && (offset.x !== 0 || offset.y !== 0) ? { ...style, translate: `${offset.x}px ${offset.y}px` } : style,
+          onPointerDownCapture: (event) => {
+            onPointerDownCapture?.(event);
+            if (behind) bringToFront();
+          },
+          onFocusCapture: (event) => {
+            onFocusCapture?.(event);
+            if (behind) bringToFront();
+          },
           onInteractOutside: (event) => {
             onInteractOutside?.(event);
             if (windowed && !dismissOnOutsideClick) event.preventDefault();
@@ -5710,9 +5749,9 @@ function useCopySubsetVariant() {
 }
 
 // src/data-table/clipping.ts
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 function useClippedContentGuard(ref, options) {
-  useEffect6(() => {
+  useEffect7(() => {
     if (!options.enabled || !ref.current) return;
     const node = ref.current;
     const check = () => {
@@ -5726,7 +5765,7 @@ function useClippedContentGuard(ref, options) {
 }
 
 // src/data-table/url-state.ts
-import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef9, useState as useState12 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef9, useState as useState12 } from "react";
 import {
   commitUrlParams,
   useUrlSearchParams
@@ -5808,7 +5847,7 @@ function useTableUrlState(options) {
   const state = readState(searchParams);
   const lastTextWriteAt = useRef9(0);
   const [debouncedSearch, setDebouncedSearch] = useState12(state.search);
-  useEffect7(() => {
+  useEffect8(() => {
     if (state.search === debouncedSearch) return;
     const timer = window.setTimeout(
       () => setDebouncedSearch(state.search),
@@ -5916,14 +5955,14 @@ import {
 } from "@ai-matrx/kit/url-state";
 
 // src/data-table/RowAlchemyLauncher.tsx
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef10, useState as useState13 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useRef as useRef10, useState as useState13 } from "react";
 import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 function MatrxTableRowAlchemyProvider({ copy, placement, controls, children }) {
   const controller = useRef10(null);
   const { CopyControls } = useMatrxDataTableHost();
   const [active, setActive] = useState13(false);
   const [fallback, setFallback] = useState13(false);
-  useEffect8(() => {
+  useEffect9(() => {
     if (placement !== "menu" || active) return;
     const timer = window.setTimeout(() => {
       if (!active) {
@@ -5960,7 +5999,7 @@ function MatrxTableRowAlchemyProvider({ copy, placement, controls, children }) {
 // src/data-table/ColumnHeaderCell.tsx
 import {
   forwardRef as forwardRef13,
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useMemo as useMemo6,
   useRef as useRef11,
   useState as useState14
@@ -6347,7 +6386,7 @@ function ColumnHeaderCell({
   const [filterOpen, setFilterOpen] = useState14(false);
   const [pendingNegation, setPendingNegation] = useState14(false);
   const [draftFilter, setDraftFilter] = useState14(filterValue);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!filterOpen) {
       setDraftFilter(filterValue);
       setPendingNegation(filterValue?.negated ?? false);
@@ -6355,7 +6394,7 @@ function ColumnHeaderCell({
   }, [filterOpen, filterValue]);
   const notifyOpen = useRef11(onFilterOpen);
   notifyOpen.current = onFilterOpen;
-  useEffect9(() => {
+  useEffect10(() => {
     if (filterOpen) notifyOpen.current?.();
   }, [filterOpen]);
   const applyFilter = () => {
@@ -7203,7 +7242,7 @@ function parseOptionalNumber(raw) {
 // src/data-table/ColumnResizeHandle.tsx
 import {
   useCallback as useCallback6,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useRef as useRef12,
   useState as useState15
 } from "react";
@@ -7300,7 +7339,7 @@ function ColumnResizeHandle({
       handleRef.current.releasePointerCapture(active.pointerId);
     }
   }, [clearQueuedPreview, columnId2, cssVar, onResizeCancel, onResizeCommit, tableRef, writePreview]);
-  useEffect10(() => () => clearQueuedPreview(), [clearQueuedPreview]);
+  useEffect11(() => () => clearQueuedPreview(), [clearQueuedPreview]);
   const onPointerDown = (event) => {
     if (disabled || event.button !== 0 || !event.isPrimary) return;
     event.preventDefault();
@@ -7841,7 +7880,7 @@ function scrollOffsetForIndex(input) {
 }
 
 // src/data-table/useSpreadsheetGrid.ts
-import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo7, useRef as useRef13, useState as useState16 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect12, useMemo as useMemo7, useRef as useRef13, useState as useState16 } from "react";
 
 // src/data-table/grid-selection.ts
 function rangeBounds(range, rowIds, fieldNames) {
@@ -8533,8 +8572,23 @@ function canRedo(stack) {
 function targetsAnEditor(target) {
   const element = target instanceof Element ? target : null;
   if (!element) return false;
+  if (element.closest(`[${TYPE_CATCHER_ATTR}]`)) return false;
   return element.closest("input, textarea, select, [contenteditable='true']") !== null;
 }
+var TYPE_CATCHER_ATTR = "data-matrx-type-catcher";
+var TYPE_CATCHER_STYLE = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: 1,
+  height: 1,
+  padding: 0,
+  border: 0,
+  opacity: 0,
+  overflow: "hidden",
+  resize: "none",
+  pointerEvents: "none"
+};
 function camePastAPortal(target, host) {
   if (typeof Element === "undefined") return false;
   const element = target instanceof Element ? target : null;
@@ -8554,6 +8608,8 @@ function useSpreadsheetGrid(options) {
   const [fillTarget, setFillTarget] = useState16(null);
   const [stack, setStack] = useState16(() => createUndoStack(options?.undoDepth ?? 100));
   const draggingRef = useRef13(null);
+  const catcherRef = useRef13(null);
+  const composingRef = useRef13(false);
   const optionsRef = useRef13(options);
   optionsRef.current = options;
   const rowIds = options?.rowIds ?? [];
@@ -8561,7 +8617,7 @@ function useSpreadsheetGrid(options) {
     () => options ? options.columnIds.filter((id) => id !== "") : [],
     [options]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     if (!range) return;
     const rowSet = new Set(rowIds);
     const colSet = new Set(columnIds);
@@ -8932,7 +8988,9 @@ function useSpreadsheetGrid(options) {
           event.preventDefault();
           const origin = event.currentTarget;
           if (typeof HTMLElement !== "undefined" && origin instanceof HTMLElement) {
-            origin.closest('[data-matrx-table-spreadsheet="true"]')?.focus({ preventScroll: true });
+            const container = origin.closest('[data-matrx-table-spreadsheet="true"]');
+            const catcher = container?.querySelector(`[${TYPE_CATCHER_ATTR}]`);
+            (catcher ?? container)?.focus({ preventScroll: true });
           }
           setRange(
             (previous) => event.shiftKey && previous ? { anchor: previous.anchor, focus: address } : { anchor: address, focus: address }
@@ -8978,7 +9036,7 @@ function useSpreadsheetGrid(options) {
   fillTargetRef.current = fillTarget;
   const boundsRef = useRef13(null);
   boundsRef.current = bounds;
-  useEffect11(() => {
+  useEffect12(() => {
     if (!options) return;
     const commit = () => {
       const wasDragging = draggingRef.current;
@@ -9003,11 +9061,58 @@ function useSpreadsheetGrid(options) {
     window.addEventListener("mouseup", commit);
     return () => window.removeEventListener("mouseup", commit);
   }, [options, fillRequestBase, applyPatches, announceSkips, screenPatches, refuseWrite]);
+  const takeTypedText = useCallback7(
+    (text) => {
+      if (catcherRef.current) catcherRef.current.value = "";
+      const current = optionsRef.current;
+      const focused = range?.focus;
+      if (!current || !focused || current.readOnly || !current.onEditRequest) return;
+      if (text.trim() === "") return;
+      current.onEditRequest(focused, text);
+    },
+    [range]
+  );
+  const typeCatcherProps = {
+    ref: (element) => {
+      catcherRef.current = element;
+    },
+    tabIndex: -1,
+    "aria-label": "Type to edit the selected cell",
+    inputMode: "none",
+    autoComplete: "off",
+    autoCorrect: "off",
+    autoCapitalize: "off",
+    spellCheck: false,
+    rows: 1,
+    [TYPE_CATCHER_ATTR]: "",
+    style: TYPE_CATCHER_STYLE,
+    onInput: (event) => {
+      const kind = event.nativeEvent?.inputType;
+      if (typeof kind === "string" && (kind.startsWith("insertFromPaste") || kind.startsWith("insertFromDrop"))) {
+        event.currentTarget.value = "";
+        return;
+      }
+      if (composingRef.current) return;
+      takeTypedText(event.currentTarget.value);
+    },
+    onCompositionStart: () => {
+      composingRef.current = true;
+    },
+    onCompositionEnd: (event) => {
+      composingRef.current = false;
+      takeTypedText(event.data || event.currentTarget.value);
+    }
+  };
   return {
     range,
     bounds,
     enabled: options !== null,
+    typeCatcherProps,
     containerProps: {
+      onFocus: (event) => {
+        if (event.target !== event.currentTarget) return;
+        catcherRef.current?.focus({ preventScroll: true });
+      },
       tabIndex: options ? 0 : -1,
       onKeyDown,
       onCopy,
@@ -9172,7 +9277,7 @@ function rankTableSearchRows(rows, columns, query, options = {}, extraText) {
 }
 
 // src/data-table/ColumnManager.tsx
-import { useEffect as useEffect12, useMemo as useMemo8, useState as useState17 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo8, useState as useState17 } from "react";
 import { useDndMonitor, useDraggable as useDraggable2, useDroppable } from "@dnd-kit/core";
 import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 function ColumnManager({
@@ -9191,7 +9296,7 @@ function ColumnManager({
   const [draftHidden, setDraftHidden] = useState17(() => new Set(hidden));
   const [draggedColumnId, setDraggedColumnId] = useState17(null);
   const [dropTarget, setDropTarget] = useState17(null);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!open) return;
     setDraftOrder(order);
     setDraftHidden(new Set(hidden));
@@ -9724,7 +9829,7 @@ function parseTableViewSnapshot(raw) {
 
 // src/data-table/MatrxUuidCell.tsx
 import {
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   useRef as useRef14,
   useState as useState18
 } from "react";
@@ -9771,7 +9876,7 @@ function MatrxUuidCell({
   const [opening, setOpening] = useState18(false);
   const [peekOpen, setPeekOpen] = useState18(false);
   const timer = useRef14(null);
-  useEffect13(
+  useEffect14(
     () => () => {
       if (timer.current) clearTimeout(timer.current);
     },
@@ -10066,7 +10171,7 @@ function DataRowInspector({
 }
 
 // src/data-table/DataRowWindow.tsx
-import { useEffect as useEffect14, useState as useState19 } from "react";
+import { useEffect as useEffect15, useState as useState19 } from "react";
 import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 function DataRowWindow({
   isOpen,
@@ -10088,7 +10193,7 @@ function DataRowWindow({
   const hasTabs = hasEdit && children == null;
   const initialTab = defaultTab ?? (hasEdit ? "edit" : "view");
   const [tab, setTab] = useState19(initialTab);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!isOpen) return;
     setTab(defaultTab ?? (hasEdit ? "edit" : "view"));
   }, [isOpen, windowId, hasEdit, defaultTab]);
@@ -11302,7 +11407,7 @@ function DirtySavePill({
 }
 
 // src/data-table/EditableTableCell.tsx
-import { useEffect as useEffect15, useRef as useRef15, useState as useState20 } from "react";
+import { useEffect as useEffect16, useRef as useRef15, useState as useState20 } from "react";
 import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 function CellRefusal({ reason }) {
   return /* @__PURE__ */ jsx40(
@@ -11366,10 +11471,10 @@ function EditableTableCell({
 }) {
   const [open, setOpen] = useState20(false);
   const [refusal, setRefusal] = useState20(null);
-  useEffect15(() => {
+  useEffect16(() => {
     if (editRequest !== void 0) setOpen(true);
   }, [editRequest]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!open) setRefusal(null);
   }, [open]);
   const usePencil = Boolean(href) || editTrigger === "pencil";
@@ -11479,7 +11584,7 @@ function InlineStringEditor({
   const handledEditRequest = useRef15(void 0);
   const seedRef = useRef15(editSeed);
   seedRef.current = editSeed;
-  useEffect15(() => {
+  useEffect16(() => {
     if (editRequest === void 0 || handledEditRequest.current === editRequest) return;
     handledEditRequest.current = editRequest;
     setDraft(seedRef.current ?? value);
@@ -12470,7 +12575,7 @@ function MatrxDataTableWithUrlState({
     ...urlState.history === void 0 ? {} : { history: urlState.history },
     ...urlState.textHistory === void 0 ? {} : { textHistory: urlState.textHistory }
   });
-  useEffect16(() => {
+  useEffect17(() => {
     if (activeUrlTableIds.has(urlState.id)) {
       throw new Error(
         `Duplicate MatrxDataTable urlState.id "${urlState.id}" on one page. Give every table a unique stable id.`
@@ -12870,7 +12975,7 @@ function MatrxDataTableCore({
     rows: Object.entries(draft.values).map(([rowId, columns2]) => ({ rowId, columns: columns2 }))
   }));
   const selection = appendSourceChanged && selectionConfig ? { ...selectionConfig, selectedIds: [] } : selectionConfig;
-  useEffect16(() => {
+  useEffect17(() => {
     const previous = committedAppendQueryKey.current;
     committedAppendQueryKey.current = appendQueryKey;
     if (previous === null || appendQueryKey === null || previous === appendQueryKey) {
@@ -12940,7 +13045,7 @@ function MatrxDataTableCore({
       behavior: "smooth"
     });
   };
-  useEffect16(() => {
+  useEffect17(() => {
     updateScrollHint();
     window.addEventListener("resize", updateScrollHint);
     const el = scrollRef.current;
@@ -13033,7 +13138,7 @@ function MatrxDataTableCore({
     columnDragRaf.current = null;
     columnDragScrollDirection.current = 0;
   }, []);
-  useEffect16(() => () => {
+  useEffect17(() => () => {
     columnDragActive.current = false;
     stopColumnDragScroll();
   }, [stopColumnDragScroll]);
@@ -13159,7 +13264,7 @@ function MatrxDataTableCore({
     }
     setColumnWidths(normalized);
   }, [columnIds, columnState, columns, measureFixedTableGeometry, measureVisibleColumnWidths]);
-  useEffect16(() => {
+  useEffect17(() => {
     const ids = columns.map(columnId);
     if (columnState) return;
     const previousIds = knownColumnIds.current;
@@ -13390,7 +13495,7 @@ function MatrxDataTableCore({
     searchScope
   ]);
   const lastNotifiedViewRows = useRef16(null);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!onViewChange) {
       lastNotifiedViewRows.current = null;
       return;
@@ -13399,7 +13504,7 @@ function MatrxDataTableCore({
     lastNotifiedViewRows.current = processed;
     if (changed) onViewChange(processed);
   }, [processed, onViewChange]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (controlledQuery) return;
     setInternalPage(1);
   }, [
@@ -13581,7 +13686,7 @@ function MatrxDataTableCore({
     frozenRunLength
   ]);
   const metricsWanted = virtualizeActive || columnVirtualizeActive;
-  useEffect16(() => {
+  useEffect17(() => {
     recomputeWindows();
   }, [
     recomputeWindows,
@@ -13593,7 +13698,7 @@ function MatrxDataTableCore({
     columnWindowWidth,
     frozenRunLength
   ]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!metricsWanted) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -13786,12 +13891,12 @@ function MatrxDataTableCore({
       }));
     });
   }, []);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!facetsEnabled) return;
     setFacetState({});
     facetRequestRef.current = /* @__PURE__ */ new Map();
   }, [facetsEnabled, data, searchValue]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!controlledQuery || controlledQuery.state.page === safePage) return;
     emitControlledQueryChange({ page: safePage });
   }, [controlledQuery, emitControlledQueryChange, safePage]);
@@ -14002,13 +14107,17 @@ function MatrxDataTableCore({
     }));
   };
   const requestCellEdit = (address, seed) => {
-    if (!editEnabled) return false;
+    if (!editEnabled && !spreadsheet?.onEditRequest) return false;
     const row = data.find((candidate) => getRowId(candidate) === address.rowId);
     if (!row) return false;
     const column = visibleColumns.find(
       (candidate) => columnId(candidate) === address.fieldName
     );
-    if (!column?.editable || !(column.editableIf?.(row) ?? true)) return false;
+    if (!column?.editable) {
+      const own = spreadsheet?.onEditRequest;
+      return own ? own({ rowId: address.rowId, columnId: address.fieldName }, seed) : false;
+    }
+    if (!(column.editableIf?.(row) ?? true)) return false;
     const field = column.accessorKey ? String(column.accessorKey) : columnId(column);
     setEditRequest((current) => ({
       rowId: address.rowId,
@@ -14373,7 +14482,7 @@ function MatrxDataTableCore({
   );
   const resolveMenuLevelRef = useRef16(resolveMenuLevel);
   resolveMenuLevelRef.current = resolveMenuLevel;
-  useEffect16(() => {
+  useEffect17(() => {
     if (!host.rowContextRegistry) return;
     return host.rowContextRegistry.register(
       tableContextMenuInstanceId,
@@ -15137,6 +15246,7 @@ function MatrxDataTableCore({
                             onCopy: sheet.containerProps.onCopy,
                             onCut: sheet.containerProps.onCut,
                             onPaste: sheet.containerProps.onPaste,
+                            onFocus: sheet.containerProps.onFocus,
                             "data-matrx-table-spreadsheet": "true"
                           } : {},
                           "aria-busy": isLoading || isFetching,
@@ -15147,6 +15257,7 @@ function MatrxDataTableCore({
                             tableClassName
                           ),
                           children: [
+                            spreadsheetEnabled ? /* @__PURE__ */ jsx43("textarea", { ...sheet.typeCatcherProps }) : null,
                             hierarchy && draggedRow ? /* @__PURE__ */ jsx43(
                               HierarchyRootDropTarget,
                               {