@dxos/react-ui-table 0.9.1-staging.ee54ba693a → 0.11.0

package/dist/lib/browser/index.mjs

@@ -1,1416 +0,0 @@
-import {
-  BUTTON_IDENTIFIERS,
-  CONTROL_IDENTIFIERS,
-  CheckboxStory,
-  FieldSortSchema,
-  SwitchStory,
-  TableModel,
-  TablePresentation,
-  cellClassesForRowSelection,
-  compareValues,
-  createDirectChangeCallback,
-  createEchoChangeCallback,
-  extractOrder,
-  getSortValue,
-  tableButtons,
-  tableControls,
-  tableSortAspect,
-  useAddRow,
-  useProjectionModel,
-  useTableModel
-} from "./chunk-K4J2CKTZ.mjs";
-import {
-  Table_exports
-} from "./chunk-VV3P3ADH.mjs";
-import "./chunk-J5LGTIGS.mjs";
-
-// src/components/Table/Table.tsx
-import { Atom as Atom4 } from "@effect-atom/atom-react";
-import { createContext } from "@radix-ui/react-context";
-import React9, { forwardRef, useImperativeHandle, useRef as useRef3 } from "react";
-
-// src/components/Table/TableContent.tsx
-import { Atom as Atom2, RegistryContext, useAtomValue as useAtomValue4 } from "@effect-atom/atom-react";
-import * as String2 from "effect/String";
-import React7, { useCallback as useCallback4, useContext, useEffect as useEffect3, useMemo as useMemo4, useState as useState4 } from "react";
-import { log } from "@dxos/log";
-import { composable, composableProps } from "@dxos/react-ui";
-import { useAttention } from "@dxos/react-ui-attention";
-import { Grid, closestCell, gridSeparatorBlockEnd, gridSeparatorInlineEnd } from "@dxos/react-ui-grid";
-import { DxEditRequest } from "@dxos/react-ui-grid";
-import { mx } from "@dxos/ui-theme";
-
-// src/util/dynamic-table.ts
-import { Filter, Obj, Order, Query, Ref, Type } from "@dxos/echo";
-import { ProjectionModel, ViewModel, createEchoChangeCallback as createEchoChangeCallback2, getSchemaFromJsonSchema, getSchemaFromPropertyDefinitions } from "@dxos/schema";
-var getBaseSchema = ({ type, typename, properties, jsonSchema }) => {
-  const resolved = typename && properties ? getSchemaFromPropertyDefinitions(typename, properties) : type ?? (jsonSchema ? getSchemaFromJsonSchema(jsonSchema, typename) : void 0);
-  if (!resolved) {
-    throw new Error("invalid properties");
-  }
-  return {
-    typename: Type.getTypename(resolved),
-    type: resolved
-  };
-};
-var makeDynamicTable = ({ registry, type, properties }) => {
-  const jsonSchema = type.jsonSchema;
-  const view = ViewModel.make({
-    query: Query.select(Filter.everything()),
-    jsonSchema,
-    type,
-    ...properties && {
-      fields: properties.map((property) => property.name)
-    }
-  });
-  const object = Obj.make(Table_exports.Table, {
-    view: Ref.make(view),
-    sizes: {}
-  });
-  const projection = new ProjectionModel({
-    registry,
-    view,
-    baseSchema: jsonSchema,
-    change: createEchoChangeCallback2(view, type)
-  });
-  projection.normalizeView();
-  if (properties && projection.getFields()) {
-    setProperties(view, projection, object, properties);
-  }
-  return {
-    projection,
-    object
-  };
-};
-var setProperties = (view, projection, table, properties) => {
-  for (const property of properties) {
-    const field = projection.getFields().find((field2) => field2.path === property.name);
-    if (field) {
-      if (property.size !== void 0) {
-        Obj.update(table, (table2) => {
-          table2.sizes[field.path] = property.size;
-        });
-      }
-      if (property.title !== void 0) {
-        const fieldProjection = projection.getFieldProjection(field.id);
-        projection.setFieldProjection({
-          ...fieldProjection,
-          props: {
-            ...fieldProjection.props,
-            title: property.title
-          }
-        });
-      }
-      if (property.sort) {
-        const currentQuery = Query.fromAst(Obj.getSnapshot(view).query.ast);
-        const newQuery = currentQuery.orderBy(Order.property(field.path, property.sort));
-        Obj.update(view, (view2) => {
-          view2.query.ast = newQuery.ast;
-        });
-      }
-    }
-  }
-};
-
-// src/util/signals.ts
-var touch = (value) => value;
-
-// src/util/schema.ts
-import * as Schema from "effect/Schema";
-import * as SchemaAST from "effect/SchemaAST";
-var narrowSchema = (schema, paths) => {
-  const ast = schema?.ast;
-  if (SchemaAST.isTypeLiteral(ast)) {
-    const propertySignatures = ast.propertySignatures.filter((signature) => paths.includes(signature.name.toString()));
-    if (propertySignatures.length > 0) {
-      const narrowType = new SchemaAST.TypeLiteral(propertySignatures, []);
-      return Schema.make(narrowType);
-    }
-  }
-  return void 0;
-};
-
-// src/model/modal-controller.ts
-import { Atom } from "@effect-atom/atom-react";
-var ModalController = class {
-  _registry;
-  _state;
-  _triggerRef = {
-    current: null
-  };
-  constructor(registry) {
-    this._registry = registry;
-    this._state = Atom.make({
-      type: "closed"
-    });
-  }
-  get state() {
-    return this._state;
-  }
-  get stateValue() {
-    return this._registry.get(this._state);
-  }
-  get trigger() {
-    return this._triggerRef;
-  }
-  setTrigger = (trigger) => {
-    this._triggerRef.current = trigger;
-  };
-  showRowMenu = (rowIndex) => {
-    this._registry.set(this._state, {
-      type: "row",
-      rowIndex
-    });
-  };
-  showColumnMenu = (fieldId) => {
-    this._registry.set(this._state, {
-      type: "column",
-      fieldId
-    });
-  };
-  showColumnCreator = () => {
-    this._registry.set(this._state, {
-      type: "columnSettings",
-      mode: {
-        type: "create"
-      }
-    });
-  };
-  showReferencePanel = (targetId, schemaId) => {
-    this._registry.set(this._state, {
-      type: "refPanel",
-      targetId,
-      typename: schemaId
-    });
-  };
-  openColumnSettings = () => {
-    const currentState = this._registry.get(this._state);
-    if (currentState.type === "column") {
-      const fieldId = currentState.fieldId;
-      requestAnimationFrame(() => {
-        this._registry.set(this._state, {
-          type: "columnSettings",
-          mode: {
-            type: "edit",
-            fieldId
-          }
-        });
-      });
-    }
-  };
-  close = () => {
-    this._registry.set(this._state, {
-      type: "closed"
-    });
-  };
-};
-
-// src/components/TableCellEditor/TableCellEditor.tsx
-import { EditorView } from "@codemirror/view";
-import React3, { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
-import { debounce } from "@dxos/async";
-import { Format, TypeEnum } from "@dxos/echo/Format";
-import { invariant as invariant2 } from "@dxos/invariant";
-import { GridCellEditor, editorKeys, parseCellIndex as parseCellIndex2, useGridContext as useGridContext3 } from "@dxos/react-ui-grid";
-
-// src/components/TableCellEditor/CellValidationMessage.tsx
-import React from "react";
-import { useGridContext } from "@dxos/react-ui-grid";
-var CellValidationMessage = ({ __gridScope, validationError, variant = "error" }) => {
-  const { editing, editBox: box } = useGridContext("GridSheetCellEditor", __gridScope);
-  if (!editing || !validationError) {
-    return null;
-  }
-  const bgClass = variant === "error" ? "bg-error-surface" : "bg-warning-surface";
-  const textClass = variant === "error" ? "text-error-fg" : "text-warning-fg";
-  return /* @__PURE__ */ React.createElement("div", {
-    className: `absolute ${bgClass} ${textClass} rounded-h-sm text-xs p-1`,
-    style: {
-      ...{
-        "--dx-grid-cell-width": `${box?.inlineSize ?? 200}px`
-      },
-      zIndex: 10,
-      insetBlockEnd: `calc(100% - ${box.insetBlockStart}px)`,
-      insetInlineStart: box.insetInlineStart,
-      inlineSize: box.inlineSize
-    }
-  }, validationError);
-};
-
-// src/components/TableCellEditor/FormCellEditor.tsx
-import React2, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Entity, Ref as Ref2, Type as Type2 } from "@dxos/echo";
-import { SchemaEx } from "@dxos/effect";
-import { invariant } from "@dxos/invariant";
-import { Popover } from "@dxos/react-ui";
-import { Form } from "@dxos/react-ui-form";
-import { parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
-import { getDeep, isTruthy, setDeep } from "@dxos/util";
-import { translationKey } from "#translations";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx";
-var createOptionLabel = [
-  "create-new-object.label",
-  {
-    ns: translationKey
-  }
-];
-var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onCreate, ...formProps }) => {
-  const anchorRef = useRef(null);
-  const { id: _gridId, editing: contextEditing, setEditing } = useGridContext2("ArrayEditor", __gridScope);
-  const [editing, setLocalEditing] = useState(false);
-  useEffect(() => {
-    if (contextEditing && contextEditing.cellElement) {
-      anchorRef.current = contextEditing.cellElement.querySelector(".dx-grid__cell__content");
-      setLocalEditing(true);
-    } else {
-      anchorRef.current = null;
-      setLocalEditing(false);
-    }
-  }, [
-    contextEditing
-  ]);
-  const narrowedSchema = useMemo(() => {
-    if (!schema) {
-      return void 0;
-    }
-    return narrowSchema(Type2.getSchema(schema), [
-      fieldProjection.field.path
-    ]);
-  }, [
-    JSON.stringify(schema),
-    fieldProjection.field.path
-  ]);
-  const originalRow = useMemo(() => {
-    if (model && contextEditing) {
-      const cell = parseCellIndex(contextEditing.index);
-      if (model.isDraftCell(cell)) {
-        const draftRow = model.getDraftRows()[cell.row];
-        invariant(draftRow, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 52, S: void 0, A: ["draftRow", ""] });
-        return draftRow.data;
-      } else {
-        const row = model.getRowAt(cell.row);
-        invariant(row, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 56, S: void 0, A: ["row", ""] });
-        return row;
-      }
-    }
-    return void 0;
-  }, [
-    model,
-    contextEditing
-  ]);
-  const initialFormValues = useMemo(() => originalRow ? JSON.parse(JSON.stringify(originalRow)) : {}, [
-    originalRow
-  ]);
-  const [formValues, setFormValues] = useState(initialFormValues);
-  const handleValuesChanged = useCallback((values) => {
-    setFormValues(values);
-  }, []);
-  const handleOpenChange = useCallback((nextOpen) => {
-    if (nextOpen === false) {
-      setEditing(null);
-      onSave?.();
-    }
-    setLocalEditing(nextOpen);
-  }, []);
-  const handleSave = useCallback((values) => {
-    if (!originalRow) {
-      return;
-    }
-    const path = fieldProjection.field.path;
-    const value = getDeep(values, [
-      path
-    ]);
-    if (model) {
-      model.changeRow(originalRow, (mutableRow) => {
-        setDeep(mutableRow, [
-          path
-        ], value);
-      });
-    } else {
-      setDeep(originalRow, [
-        path
-      ], value);
-    }
-    contextEditing?.cellElement?.focus();
-    setEditing(null);
-    setLocalEditing(false);
-    onSave?.();
-  }, [
-    fieldProjection.field.path,
-    onSave,
-    contextEditing,
-    originalRow,
-    model
-  ]);
-  const handleCreate = useCallback((schema2, values) => {
-    const objectWithId = onCreate?.(schema2, values);
-    if (objectWithId && originalRow) {
-      const ref = Ref2.make(objectWithId);
-      const path = fieldProjection.field.path;
-      if (model) {
-        model.changeRow(originalRow, (mutableRow) => {
-          setDeep(mutableRow, [
-            path
-          ], ref);
-        });
-      } else {
-        setDeep(originalRow, [
-          path
-        ], ref);
-      }
-    }
-    contextEditing?.cellElement?.focus();
-    setEditing(null);
-    setLocalEditing(false);
-    onSave?.();
-  }, [
-    fieldProjection.field.path,
-    onSave,
-    contextEditing,
-    originalRow,
-    onCreate,
-    model
-  ]);
-  const getOptions = useCallback((results) => results.map((obj) => {
-    return {
-      id: Entity.getURI(obj),
-      label: SchemaEx.getValue(obj, fieldProjection.field.referencePath) || obj.id.toString()
-    };
-  }).filter(isTruthy), [
-    fieldProjection
-  ]);
-  if (!editing) {
-    return null;
-  }
-  return /* @__PURE__ */ React2.createElement(Popover.Root, {
-    open: editing,
-    onOpenChange: handleOpenChange
-  }, /* @__PURE__ */ React2.createElement(Popover.VirtualTrigger, {
-    virtualRef: anchorRef
-  }), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
-    tabIndex: -1,
-    classNames: "dx-card-popover-width dx-density-md"
-  }, /* @__PURE__ */ React2.createElement(Popover.Arrow, null), /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(Form.Root, {
-    ...formProps,
-    autoFocus: true,
-    schema: narrowedSchema,
-    values: formValues,
-    onValuesChanged: handleValuesChanged,
-    projection: model?.projection,
-    createInitialValuePath: fieldProjection.field.referencePath,
-    createOptionIcon: "ph--plus--regular",
-    createOptionLabel,
-    db: model?.db,
-    getOptions,
-    onCreate: handleCreate,
-    onSave: handleSave
-  }, /* @__PURE__ */ React2.createElement(Form.Viewport, null, /* @__PURE__ */ React2.createElement(Form.Content, null, /* @__PURE__ */ React2.createElement(Form.FieldSet, null), /* @__PURE__ */ React2.createElement(Form.Actions, null))))))));
-};
-
-// src/components/TableCellEditor/TableCellEditor.tsx
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
-var TableValueEditor = ({ __gridScope, schema, model, modals, onFocus, onSave, onCreate }) => {
-  const { editing } = useGridContext3("TableValueEditor", __gridScope);
-  const fieldProjection = useMemo2(() => {
-    if (!model || !editing) {
-      return;
-    }
-    const { col } = parseCellIndex2(editing.index);
-    const field = model.projection.getFields()[col];
-    const fieldProjection2 = model.projection.getFieldProjection(field.id);
-    invariant2(fieldProjection2, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 21, S: void 0, A: ["fieldProjection", ""] });
-    return fieldProjection2;
-  }, [
-    model,
-    editing
-  ]);
-  if (fieldProjection?.props.type === TypeEnum.Array || fieldProjection?.props.format === Format.TypeFormat.SingleSelect || fieldProjection?.props.format === Format.TypeFormat.Ref) {
-    return /* @__PURE__ */ React3.createElement(FormCellEditor, {
-      __gridScope,
-      schema,
-      model,
-      fieldProjection,
-      modals,
-      onSave,
-      onCreate
-    });
-  }
-  return /* @__PURE__ */ React3.createElement(TableCellEditor, {
-    model,
-    modals,
-    onFocus,
-    onSave,
-    __gridScope
-  });
-};
-var cellEditorSlots = {
-  content: {
-    className: "!py-(--dx-grid-cell-editor-padding-block)"
-  }
-};
-var TableCellEditor = ({ __gridScope, model, modals, onFocus, onSave }) => {
-  const { editing, setEditing } = useGridContext3("TableCellEditor", __gridScope);
-  const suppressNextBlur = useRef2(false);
-  const [validationError, setValidationError] = useState2(null);
-  const [validationVariant, setValidationVariant] = useState2("error");
-  const fieldProjection = useMemo2(() => {
-    if (!model || !editing) {
-      return;
-    }
-    const { col } = parseCellIndex2(editing.index);
-    const field = model.projection.getFields()[col];
-    const fieldProjection2 = model.projection.getFieldProjection(field.id);
-    invariant2(fieldProjection2, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 64, S: void 0, A: ["fieldProjection", ""] });
-    return fieldProjection2;
-  }, [
-    model,
-    editing
-  ]);
-  const handleEnter = useCallback2(async (value) => {
-    if (!model || !editing) {
-      return;
-    }
-    const cell = parseCellIndex2(editing.index);
-    const validationResult = await model.validateCellData(cell, value);
-    if (validationResult.valid) {
-      setValidationError(null);
-      model.setCellData(cell, value);
-      onFocus?.();
-      setEditing(null);
-      onSave?.();
-    } else {
-      setValidationError(validationResult.error);
-      setValidationVariant("error");
-    }
-  }, [
-    model,
-    editing,
-    onFocus,
-    setEditing
-  ]);
-  const handleBlur = useCallback2(async (value) => {
-    if (suppressNextBlur.current) {
-      suppressNextBlur.current = false;
-    } else if (model && editing) {
-      const cell = parseCellIndex2(editing.index);
-      if (value !== void 0) {
-        const result = await model.validateCellData(cell, value);
-        if (result.valid) {
-          setValidationError(null);
-          model.setCellData(cell, value);
-          setEditing(null);
-          onSave?.();
-        }
-      }
-    }
-  }, [
-    model,
-    editing
-  ]);
-  const handleClose = useCallback2(async (value, event) => {
-    if (!model || !editing || !fieldProjection) {
-      return;
-    }
-    const cell = parseCellIndex2(editing.index);
-    if (value !== void 0) {
-      const result = await model.validateCellData(cell, value);
-      if (result.valid) {
-        suppressNextBlur.current = true;
-        setValidationError(null);
-        model.setCellData(cell, value);
-        setEditing(null);
-        onSave?.();
-        if (event && onFocus) {
-          onFocus(determineNavigationAxis(event), determineNavigationDelta(event), cell);
-        }
-      } else {
-        setValidationError(result.error);
-        setValidationVariant("error");
-      }
-    } else {
-      suppressNextBlur.current = true;
-      setValidationError(null);
-      setEditing(null);
-      onSave?.();
-      if (event && onFocus) {
-        onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
-      }
-    }
-  }, [
-    model,
-    editing,
-    onFocus,
-    fieldProjection,
-    setEditing,
-    onSave
-  ]);
-  const extensions = useMemo2(() => {
-    if (!fieldProjection) {
-      return [];
-    }
-    const extensions2 = [
-      editorKeys({
-        onClose: handleClose,
-        ...editing?.initialContent && {
-          onNav: handleClose
-        }
-      })
-    ];
-    if (model && editing) {
-      extensions2.push(EditorView.updateListener.of(debounce((update) => {
-        const content = update.state.doc.toString();
-        const cell = parseCellIndex2(editing.index);
-        void model.validateCellData(cell, content).then((result) => {
-          if (result.valid) {
-            setValidationError(null);
-          } else {
-            setValidationError(result.error);
-            setValidationVariant("error");
-          }
-        });
-      }, 10)));
-    }
-    return extensions2;
-  }, [
-    model,
-    modals,
-    editing,
-    fieldProjection,
-    handleClose
-  ]);
-  const getCellContent = useCallback2(() => {
-    if (model && editing) {
-      const cell = parseCellIndex2(editing.index);
-      const value = model.getCellData(cell);
-      return value !== void 0 ? String(value) : "";
-    }
-  }, [
-    model,
-    editing
-  ]);
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(CellValidationMessage, {
-    validationError,
-    variant: validationVariant,
-    __gridScope
-  }), /* @__PURE__ */ React3.createElement(GridCellEditor, {
-    extensions,
-    slots: cellEditorSlots,
-    getCellContent,
-    onBlur: handleBlur
-  }));
-};
-var determineNavigationAxis = ({ key }) => {
-  switch (key) {
-    case "ArrowUp":
-    case "ArrowDown":
-    case "Enter": {
-      return "row";
-    }
-    case "ArrowLeft":
-    case "ArrowRight":
-    case "Tab":
-      return "col";
-  }
-};
-var determineNavigationDelta = ({ key, shift }) => {
-  switch (key) {
-    case "ArrowUp":
-    case "ArrowLeft":
-      return -1;
-    case "ArrowDown":
-    case "ArrowRight":
-      return 1;
-  }
-  return shift ? -1 : 1;
-};
-
-// src/components/Table/ColumnActionsMenu.tsx
-import { useAtomValue } from "@effect-atom/atom-react";
-import React4 from "react";
-import { DropdownMenu, useTranslation } from "@dxos/react-ui";
-import { translationKey as translationKey2 } from "#translations";
-var ColumnActionsMenu = ({ model, modals }) => {
-  const { t } = useTranslation(translationKey2);
-  const state = useAtomValue(modals.state);
-  if (state?.type !== "column") {
-    return null;
-  }
-  const currentSort = model.getSorting();
-  const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
-  return /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
-    modal: false,
-    open: true,
-    onOpenChange: modals.close
-  }, /* @__PURE__ */ React4.createElement(DropdownMenu.VirtualTrigger, {
-    virtualRef: modals.trigger
-  }), /* @__PURE__ */ React4.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    "data-testid": "column-sort-descending",
-    onClick: () => model.setSort(state.fieldId, "desc")
-  }, t("column-action-sort-descending.menu")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    "data-testid": "column-sort-ascending",
-    onClick: () => model.setSort(state.fieldId, "asc")
-  }, t("column-action-sort-ascending.menu")), isCurrentColumnSorted && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    "data-testid": "column-clear-sort",
-    onClick: () => model.clearSort()
-  }, t("column-action-clear-sorting.menu")), model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    "data-testid": "column-delete",
-    onClick: () => model.deleteColumn(state.fieldId)
-  }, t("column-action-delete.menu")), model.features.schemaEditable && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    "data-testid": "column-settings",
-    onClick: () => modals.openColumnSettings()
-  }, t("column-action-settings.menu"))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))));
-};
-
-// src/components/Table/ColumnSettings.tsx
-import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
-import React5, { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useState as useState3 } from "react";
-import { Popover as Popover2 } from "@dxos/react-ui";
-import { FieldEditor } from "@dxos/react-ui-form";
-var ColumnSettings = ({ registry, model, modals, onNewColumn }) => {
-  const [newField, setNewField] = useState3();
-  const state = useAtomValue2(modals.state);
-  useEffect2(() => {
-    if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
-      setNewField(model.projection.createFieldProjection());
-      requestAnimationFrame(() => {
-        onNewColumn();
-      });
-    } else {
-      setNewField(void 0);
-    }
-  }, [
-    model?.projection,
-    state
-  ]);
-  const existingField = useMemo3(() => {
-    if (state?.type === "columnSettings") {
-      const { mode } = state;
-      if (mode.type === "edit") {
-        return model?.projection?.getFields().find((f) => f.id === mode.fieldId);
-      }
-    }
-    return void 0;
-  }, [
-    model?.projection,
-    state
-  ]);
-  const field = existingField ?? newField;
-  const handleSave = useCallback3(() => {
-    modals.close();
-  }, [
-    modals
-  ]);
-  const handleCancel = useCallback3(() => {
-    if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
-      model?.projection.deleteFieldProjection(newField.id);
-    }
-  }, [
-    model?.projection,
-    state,
-    newField
-  ]);
-  if (!model?.projection || !field) {
-    return null;
-  }
-  return /* @__PURE__ */ React5.createElement(Popover2.Root, {
-    modal: false,
-    open: state?.type === "columnSettings"
-  }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
-    virtualRef: modals.trigger
-  }), /* @__PURE__ */ React5.createElement(Popover2.Portal, null, /* @__PURE__ */ React5.createElement(Popover2.Content, {
-    classNames: "md:w-64"
-  }, /* @__PURE__ */ React5.createElement(Popover2.Viewport, null, /* @__PURE__ */ React5.createElement(FieldEditor, {
-    projection: model.projection,
-    field,
-    registry,
-    onSave: handleSave,
-    onCancel: handleCancel
-  })), /* @__PURE__ */ React5.createElement(Popover2.Arrow, null))));
-};
-
-// src/components/Table/RowActionsMenu.tsx
-import { useAtomValue as useAtomValue3 } from "@effect-atom/atom-react";
-import React6 from "react";
-import { DropdownMenu as DropdownMenu2, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { translationKey as translationKey3 } from "#translations";
-var RowActionsMenu = ({ model, modals }) => {
-  const { t } = useTranslation2(translationKey3);
-  const hasSelection = model.selection.hasSelection;
-  const state = useAtomValue3(modals.state);
-  if (state?.type !== "row") {
-    return null;
-  }
-  return /* @__PURE__ */ React6.createElement(DropdownMenu2.Root, {
-    modal: false,
-    open: true,
-    onOpenChange: modals.close
-  }, /* @__PURE__ */ React6.createElement(DropdownMenu2.VirtualTrigger, {
-    virtualRef: modals.trigger
-  }), /* @__PURE__ */ React6.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React6.createElement(DropdownMenu2.Viewport, null, model.rowActions?.length > 0 && /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(DropdownMenu2.Group, null, model.rowActions?.map((action) => /* @__PURE__ */ React6.createElement(DropdownMenu2.Item, {
-    key: action.id,
-    "data-testid": `row-action-${action.id}`,
-    onClick: () => {
-      modals.close();
-      model.handleRowAction(action.id, state.rowIndex);
-    }
-  }, toLocalizedString(action.label, t)))), /* @__PURE__ */ React6.createElement(DropdownMenu2.Separator, null)), model.features.dataEditable !== false && /* @__PURE__ */ React6.createElement(DropdownMenu2.Item, {
-    "data-testid": "row-menu-delete",
-    onClick: () => model.deleteRow(state.rowIndex)
-  }, t(hasSelection ? "bulk-delete-row.label" : "delete-row.label"))), /* @__PURE__ */ React6.createElement(DropdownMenu2.Arrow, null)));
-};
-
-// src/components/Table/TableContent.tsx
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/Table/TableContent.tsx";
-var columnDefault = {
-  grid: {
-    minSize: 80,
-    maxSize: 640
-  }
-};
-var rowDefault = {
-  frozenRowsStart: {
-    readonly: true,
-    focusUnfurl: false
-  }
-};
-var emptyColumnMeta = Atom2.make({
-  grid: {}
-});
-var emptyRowsAtom = Atom2.make([]);
-var emptyCellUpdateAtom = Atom2.make(0);
-var TABLE_CONTENT_NAME = "Table.Content";
-var TableContent = composable(({ schema, model, presentation, ignoreAttention, attendableId, onCreate, onRowClick, testId, ...props }, forwardedRef) => {
-  const registry = useContext(RegistryContext);
-  const [dxGrid, setDxGrid] = useState4(null);
-  const { hasAttention } = useAttention(attendableId ?? model?.id ?? "table");
-  const modals = useMemo4(() => new ModalController(registry), [
-    registry
-  ]);
-  const columnMeta = useAtomValue4(model?.columnMeta ?? emptyColumnMeta);
-  const rows = useAtomValue4(model?.rows ?? emptyRowsAtom);
-  const cellUpdateCounter = useAtomValue4(model?.cellUpdate ?? emptyCellUpdateAtom);
-  const columnCount = Object.keys(columnMeta.grid).length || model?.projection.getFields().length || 0;
-  const draftRowCount = model?.getDraftRowCount() ?? 0;
-  const frozen = useMemo4(() => {
-    const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
-    return {
-      frozenRowsStart: 1,
-      frozenRowsEnd: Math.max(1, draftRowCount),
-      frozenColsStart: model?.features.selection.enabled ? 1 : 0,
-      frozenColsEnd: noActionColumn ? 0 : 1
-    };
-  }, [
-    model,
-    draftRowCount
-  ]);
-  const getCells = useCallback4((range, plane) => presentation?.getCells(range, plane) ?? {}, [
-    presentation
-  ]);
-  useEffect3(() => {
-    if (!dxGrid || !presentation) {
-      return;
-    }
-    dxGrid.getCells = getCells;
-  }, [
-    dxGrid,
-    presentation,
-    getCells
-  ]);
-  useEffect3(() => {
-    if (!dxGrid) {
-      return;
-    }
-    dxGrid.updateCells(true);
-    dxGrid.requestUpdate();
-  }, [
-    dxGrid,
-    rows,
-    cellUpdateCounter
-  ]);
-  const handleInsertRowResult = useCallback4((insertResult) => {
-    if (insertResult === "draft") {
-      requestAnimationFrame(() => {
-        dxGrid?.setFocus({
-          plane: "frozenRowsEnd",
-          col: 0,
-          row: 0
-        });
-        dxGrid?.refocus();
-      });
-    } else {
-      requestAnimationFrame(() => {
-        dxGrid?.setFocus({
-          plane: "grid",
-          col: 0,
-          row: model ? model.getRowCount() - 1 : 0
-        });
-        dxGrid?.refocus();
-      });
-    }
-  }, [
-    model,
-    dxGrid
-  ]);
-  const handleSave = useCallback4(() => {
-    dxGrid?.updateCells(true);
-    dxGrid?.requestUpdate();
-  }, [
-    dxGrid
-  ]);
-  const handleSaveDraftRow = useCallback4((rowIndex = 0) => {
-    if (model && dxGrid) {
-      const didCommitSuccessfully = model.commitDraftRow(rowIndex);
-      if (didCommitSuccessfully) {
-        requestAnimationFrame(() => {
-          dxGrid.scrollToEndRow();
-        });
-      }
-    }
-  }, [
-    model,
-    dxGrid
-  ]);
-  const handleGridClick = useCallback4((event) => {
-    const cell = closestCell(event.target);
-    if (cell) {
-      const { row: rowIndex, plane } = cell;
-      if (onRowClick) {
-        if (plane === "grid") {
-          const row = model?.getRowAt(rowIndex);
-          row && onRowClick(row);
-        } else {
-          onRowClick(cell);
-        }
-      }
-      if (model?.features.selection.enabled && model?.selection.selectionMode === "single") {
-        model.selection.toggleSelectionForRowIndex(rowIndex);
-      }
-    }
-    if (!modals) {
-      return;
-    }
-    const buttonSelector = Object.values(tableButtons).map((button) => `button[${button.attr}]`).join(",");
-    const tableButtonElement = event.target.closest(buttonSelector);
-    if (tableButtonElement) {
-      const button = Object.values(tableButtons).find((btn) => tableButtonElement.hasAttribute(btn.attr));
-      if (!button) {
-        return;
-      }
-      modals.setTrigger(tableButtonElement);
-      const data = button.getData(tableButtonElement);
-      switch (data.type) {
-        case "rowMenu": {
-          modals.showRowMenu(data.rowIndex);
-          break;
-        }
-        case "columnSettings": {
-          modals.showColumnMenu(data.fieldId);
-          break;
-        }
-        case "newColumn": {
-          modals.showColumnCreator();
-          break;
-        }
-        case "sort": {
-          model?.toggleSort(data.fieldId);
-          break;
-        }
-        case "saveDraftRow": {
-          handleSaveDraftRow();
-          break;
-        }
-      }
-      return;
-    }
-    const controlSelector = Object.values(tableControls).map((control) => `input[${control.attr}]`).join(",");
-    const controlElement = event.target.closest(controlSelector);
-    if (controlElement) {
-      const control = Object.values(tableControls).find((ctrl) => controlElement.hasAttribute(ctrl.attr));
-      if (!control) {
-        return;
-      }
-      const data = control.getData(controlElement);
-      switch (data.type) {
-        case "checkbox": {
-          if (data.header) {
-            model?.selection.setSelection(model.selection.allRowsSelected ? "none" : "all");
-          } else {
-            model?.selection.toggleSelectionForRowIndex(data.rowIndex);
-          }
-          break;
-        }
-        case "switch": {
-          if (model) {
-            model.updateCellData({
-              row: data.rowIndex,
-              col: data.colIndex
-            }, (value) => !value);
-          }
-          break;
-        }
-      }
-    }
-  }, [
-    model,
-    modals,
-    dxGrid
-  ]);
-  const handleFocus = useCallback4((increment, delta, cell) => {
-    if (dxGrid && model) {
-      if (cell?.plane === "grid" && cell?.row >= model.getRowCount() - 1 && increment !== "col") {
-        handleInsertRowResult(draftRowCount < 1 ? model.insertRow() : "final");
-      } else if (cell?.plane === "frozenRowsEnd" && increment === "row") {
-        handleSaveDraftRow(cell.row);
-        handleInsertRowResult(model.insertRow());
-      } else {
-        dxGrid.refocus(increment, delta);
-      }
-    }
-  }, [
-    dxGrid,
-    model
-  ]);
-  const handleKeyDown = useCallback4((event) => {
-    if (!model?.features.dataEditable) {
-      return;
-    }
-    const cell = closestCell(event.target);
-    if (!model || !cell) {
-      return;
-    }
-    if (event.metaKey || event.ctrlKey) {
-      switch (event.key) {
-        case "c": {
-          try {
-            const cellData = model.getCellData(cell);
-            const textContent = cellData?.toString() ?? "";
-            void navigator.clipboard.writeText(textContent);
-            event.preventDefault();
-          } catch (error) {
-            log.catch(error, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 263, S: void 0 });
-          }
-          break;
-        }
-        case "v": {
-          event.preventDefault();
-          void navigator.clipboard.readText().then((clipboardText) => {
-            try {
-              model.setCellData(cell, String2.trim(clipboardText).replace(/[\n\r]+/, " "));
-              handleSave();
-            } catch {
-              const cellElement = event.target.closest('[data-dx-grid-action="cell"]');
-              if (cellElement) {
-                const rect = cellElement.getBoundingClientRect();
-                const editRequest = new DxEditRequest({
-                  cellIndex: `${cell.plane},${cell.col},${cell.row}`,
-                  cellBox: {
-                    insetInlineStart: rect.left,
-                    insetBlockStart: rect.top,
-                    inlineSize: rect.width,
-                    blockSize: rect.height
-                  },
-                  cellElement,
-                  initialContent: clipboardText
-                });
-                cellElement.dispatchEvent(editRequest);
-              }
-            }
-          });
-          break;
-        }
-      }
-    }
-    switch (event.key) {
-      case "Backspace":
-      case "Delete": {
-        try {
-          model.setCellData(cell, void 0);
-          event.preventDefault();
-          handleSave();
-        } catch {
-        }
-        break;
-      }
-    }
-  }, [
-    model,
-    dxGrid,
-    handleSave
-  ]);
-  const handleAxisResize = useCallback4((event) => {
-    if (event.axis === "col") {
-      const columnIndex = parseInt(event.index, 10);
-      model?.setColumnWidth(columnIndex, event.size);
-    }
-  }, [
-    model
-  ]);
-  const handleWheel = useCallback4((event) => {
-    if (!ignoreAttention && !hasAttention) {
-      event.stopPropagation();
-    }
-  }, [
-    hasAttention,
-    ignoreAttention
-  ]);
-  const handleNewColumn = useCallback4(() => {
-    const columns = model?.getColumnCount();
-    if (dxGrid && columns) {
-      dxGrid.scrollToColumn(columns - 1);
-    }
-  }, [
-    model,
-    dxGrid
-  ]);
-  const { controllerRef } = useTableContext(TABLE_CONTENT_NAME);
-  controllerRef.current = useMemo4(() => {
-    if (!dxGrid || !presentation) {
-      return {};
-    }
-    return {
-      update: (cell) => {
-        if (cell) {
-          dxGrid.updateIfWithinBounds(cell, true);
-        } else {
-          dxGrid.updateCells(true);
-          dxGrid.requestUpdate();
-        }
-      },
-      handleInsertRowResult
-    };
-  }, [
-    dxGrid,
-    model,
-    presentation
-  ]);
-  if (!model || !modals) {
-    return /* @__PURE__ */ React7.createElement("span", {
-      className: "dx-attention-surface"
-    });
-  }
-  return /* @__PURE__ */ React7.createElement("div", {
-    ...composableProps(props, {
-      classNames: "dx-container relative"
-    }),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React7.createElement(Grid.Root, {
-    id: model.id ?? "table-grid"
-  }, /* @__PURE__ */ React7.createElement(TableValueEditor, {
-    model,
-    modals,
-    schema,
-    onFocus: handleFocus,
-    onSave: handleSave,
-    onCreate
-  }), /* @__PURE__ */ React7.createElement(Grid.Content, {
-    className: mx("[--dx-grid-base:var(--base-surface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
-    frozen,
-    columns: columnMeta,
-    columnDefault,
-    rowDefault,
-    limitRows: rows.length,
-    limitColumns: columnCount,
-    overscroll: "trap",
-    onAxisResize: handleAxisResize,
-    onClick: handleGridClick,
-    onKeyDownCapture: handleKeyDown,
-    onWheelCapture: handleWheel,
-    ...testId && {
-      "data-testid": testId
-    },
-    ref: setDxGrid
-  }), /* @__PURE__ */ React7.createElement(RowActionsMenu, {
-    model,
-    modals
-  }), /* @__PURE__ */ React7.createElement(ColumnActionsMenu, {
-    model,
-    modals
-  }), /* @__PURE__ */ React7.createElement(ColumnSettings, {
-    model,
-    modals,
-    onNewColumn: handleNewColumn
-  })));
-});
-TableContent.displayName = TABLE_CONTENT_NAME;
-
-// src/components/Table/TableToolbar.tsx
-import { Atom as Atom3, RegistryContext as RegistryContext2 } from "@effect-atom/atom-react";
-import React8, { useContext as useContext2, useEffect as useEffect4, useMemo as useMemo5 } from "react";
-import { composable as composable2, composableProps as composableProps2 } from "@dxos/react-ui";
-import { Menu, createGapSeparator, createMenuAction, createMenuItemGroup, useMenuActions } from "@dxos/react-ui-menu";
-import { translationKey as translationKey4 } from "#translations";
-var createTableToolbarActions = ({ stateAtom, onAdd, onSave, onExport, customActions }) => Atom3.make((get) => {
-  const nodes = [];
-  const edges = [];
-  if (onAdd) {
-    const add = createMenuAction("add-row", onAdd, {
-      type: "add-row",
-      icon: "ph--plus--regular",
-      label: [
-        "add-row.label",
-        {
-          ns: translationKey4
-        }
-      ],
-      testId: "table.toolbar.add-row"
-    });
-    nodes.push(add);
-    edges.push({
-      source: "root",
-      target: add.id,
-      relation: "child"
-    });
-  }
-  if (onSave) {
-    const state = get(stateAtom);
-    const save = createMenuAction("save-view", onSave, {
-      type: "save-view",
-      icon: "ph--floppy-disk--regular",
-      label: [
-        "save-view.label",
-        {
-          ns: translationKey4
-        }
-      ],
-      testId: "table.toolbar.save-view",
-      iconOnly: false,
-      hidden: !state.viewDirty
-    });
-    nodes.push(save);
-    edges.push({
-      source: "root",
-      target: save.id,
-      relation: "child"
-    });
-  }
-  if (onExport) {
-    const exportGroup = createMenuItemGroup("export-rows", {
-      label: [
-        "export-rows.menu",
-        {
-          ns: translationKey4
-        }
-      ],
-      icon: "ph--export--regular",
-      iconOnly: true,
-      variant: "dropdownMenu"
-    });
-    nodes.push(exportGroup);
-    edges.push({
-      source: "root",
-      target: exportGroup.id,
-      relation: "child"
-    });
-    const formats = [
-      {
-        format: "csv",
-        type: "export-csv",
-        label: "export-rows-csv.menu"
-      },
-      {
-        format: "json",
-        type: "export-json",
-        label: "export-rows-json.menu"
-      },
-      {
-        format: "xml",
-        type: "export-xml",
-        label: "export-rows-xml.menu"
-      }
-    ];
-    for (const { format, type, label } of formats) {
-      const action = createMenuAction(type, () => onExport(format), {
-        type,
-        label: [
-          label,
-          {
-            ns: translationKey4
-          }
-        ]
-      });
-      nodes.push(action);
-      edges.push({
-        source: exportGroup.id,
-        target: action.id,
-        relation: "child"
-      });
-    }
-  }
-  const gap = createGapSeparator();
-  nodes.push(...gap.nodes);
-  edges.push(...gap.edges);
-  if (customActions) {
-    const custom = get(customActions);
-    nodes.push(...custom.nodes);
-    edges.push(...custom.edges);
-  }
-  return {
-    nodes,
-    edges
-  };
-});
-var TableToolbar = composable2(({ attendableId, viewDirty, onAdd, onSave, onExport, customActions, ...props }, forwardedRef) => {
-  const registry = useContext2(RegistryContext2);
-  const stateAtom = useMemo5(() => Atom3.make({
-    viewDirty
-  }), []);
-  useEffect4(() => {
-    registry.set(stateAtom, {
-      viewDirty
-    });
-  }, [
-    registry,
-    stateAtom,
-    viewDirty
-  ]);
-  const actionsCreator = useMemo5(() => createTableToolbarActions({
-    stateAtom,
-    onAdd,
-    onSave,
-    onExport,
-    customActions
-  }), [
-    stateAtom,
-    onAdd,
-    onSave,
-    onExport,
-    customActions
-  ]);
-  const menuActions = useMenuActions(actionsCreator);
-  return /* @__PURE__ */ React8.createElement(Menu.Root, {
-    ...menuActions,
-    attendableId
-  }, /* @__PURE__ */ React8.createElement(Menu.Toolbar, {
-    ...composableProps2(props),
-    ref: forwardedRef
-  }));
-});
-TableToolbar.displayName = "TableToolbar";
-
-// src/components/Table/Table.tsx
-var emptyColumnMeta2 = Atom4.make({
-  grid: {}
-});
-var [TableContextProvider, useTableContext] = createContext("Table");
-var TABLE_ROOT_NAME = "Table.Root";
-var TableRoot = /* @__PURE__ */ forwardRef(({ children }, forwardedRef) => {
-  const controllerRef = useRef3({});
-  useImperativeHandle(forwardedRef, () => ({
-    update: (cell) => controllerRef.current?.update?.(cell),
-    handleInsertRowResult: (result) => controllerRef.current?.handleInsertRowResult?.(result)
-  }), []);
-  return /* @__PURE__ */ React9.createElement(TableContextProvider, {
-    controllerRef
-  }, children);
-});
-TableRoot.displayName = TABLE_ROOT_NAME;
-var Table = {
-  Root: TableRoot,
-  Toolbar: TableToolbar,
-  Content: TableContent
-};
-
-// src/components/Table/DynamicTable.tsx
-import { RegistryContext as RegistryContext3 } from "@effect-atom/atom-react";
-import React10, { useCallback as useCallback5, useContext as useContext3, useEffect as useEffect5, useMemo as useMemo6, useRef as useRef4, useState as useState5 } from "react";
-import { useDefaultValue } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/ui-theme";
-var DynamicTable = ({ classNames, type: typeProp, name = "com.example.dynamicTable", rows, properties, jsonSchema: jsonSchemaProp, rowActions, onRowClick, onRowAction, ...props }) => {
-  const registry = useContext3(RegistryContext3);
-  const [dynamicTable, setDynamicTable] = useState5();
-  const { type } = useMemo6(() => getBaseSchema({
-    typename: name,
-    properties,
-    jsonSchema: jsonSchemaProp,
-    type: typeProp
-  }), [
-    name,
-    properties,
-    jsonSchemaProp,
-    typeProp
-  ]);
-  useEffect5(() => {
-    setDynamicTable(makeDynamicTable({
-      registry,
-      type,
-      properties
-    }));
-  }, [
-    registry,
-    type,
-    properties
-  ]);
-  const tableRef = useRef4(null);
-  const handleCellUpdate = useCallback5((cell) => {
-    tableRef.current?.update?.(cell);
-  }, []);
-  const handleRowOrderChange = useCallback5(() => {
-    tableRef.current?.update?.();
-  }, []);
-  const features = useDefaultValue(props.features, () => ({
-    selection: {
-      enabled: false
-    },
-    dataEditable: false
-  }));
-  const model = useTableModel({
-    rows,
-    object: dynamicTable?.object,
-    projection: dynamicTable?.projection,
-    features,
-    rowActions,
-    onCellUpdate: handleCellUpdate,
-    onRowOrderChange: handleRowOrderChange,
-    onRowAction
-  });
-  const presentation = useMemo6(() => {
-    if (model) {
-      return new TablePresentation(registry, model);
-    }
-  }, [
-    registry,
-    model
-  ]);
-  return /* @__PURE__ */ React10.createElement("div", {
-    className: mx2("dx-expander grid", classNames)
-  }, /* @__PURE__ */ React10.createElement("div", {
-    className: "grid min-h-0 overflow-hidden"
-  }, /* @__PURE__ */ React10.createElement(Table.Root, {
-    ref: tableRef
-  }, /* @__PURE__ */ React10.createElement(Table.Content, {
-    model,
-    presentation,
-    ignoreAttention: true,
-    onRowClick
-  }))));
-};
-export {
-  BUTTON_IDENTIFIERS,
-  CONTROL_IDENTIFIERS,
-  CheckboxStory,
-  DynamicTable,
-  FieldSortSchema,
-  ModalController,
-  SwitchStory,
-  Table,
-  TableModel,
-  TablePresentation,
-  cellClassesForRowSelection,
-  compareValues,
-  createDirectChangeCallback,
-  createEchoChangeCallback,
-  extractOrder,
-  getBaseSchema,
-  getSortValue,
-  makeDynamicTable,
-  narrowSchema,
-  tableButtons,
-  tableControls,
-  tableSortAspect,
-  touch,
-  useAddRow,
-  useProjectionModel,
-  useTableContext,
-  useTableModel
-};
-//# sourceMappingURL=index.mjs.map