@jxsuite/studio 0.37.1 → 1.1.0

package/src/grid/grid-controller.ts

@@ -0,0 +1,417 @@
+/**
+ * Per-tab grid orchestration — no DOM, no grid engine.
+ *
+ * Owns the source, the reactive load state, and the edit buffer for one grid tab. Created inside
+ * the tab's effectScope so everything (dirty mirroring, history delegate, fs subscription, the
+ * registry entry) tears down when the tab closes. The buffer's dirtiness mirrors onto
+ * `tab.doc.dirty`, which makes the existing tab-strip dot and close-confirm flows work unchanged;
+ * undo/redo registers as the tab's HistoryDelegate, so Cmd-Z and the toolbar buttons route here
+ * without any shortcut edits.
+ *
+ * Save is explicit and batched: validate required cells → confirm deletes → commit through the
+ * source → clear/re-baseline what succeeded, keep failures dirty with errors, mark stale rows.
+ */
+import { effect, onScopeDispose, reactive, toRaw } from "../reactivity";
+import { getPlatform } from "../platform";
+import { setHistoryDelegate } from "../tabs/transact";
+import { isRecentLocal } from "../files/fs-events";
+import { statusMessage } from "../panels/statusbar";
+import { showConfirmDialog } from "../ui/layers";
+import { showProgressModal } from "../ui/progress-modal";
+import { errorMessage } from "@jxsuite/schema/parse";
+import { createEditBuffer } from "./edit-buffer";
+import type { EditBuffer } from "./edit-buffer";
+import type {
+  CommitResult,
+  GridCellValue,
+  GridColumn,
+  GridEditBatch,
+  GridQuery,
+  GridRow,
+  GridSource,
+} from "./grid-source";
+import type { Tab } from "../tabs/tab";
+
+export interface GridControllerState {
+  columns: GridColumn[];
+  /** Committed rows as last loaded/saved — baselines live here. */
+  rows: GridRow[];
+  total: number;
+  loading: boolean;
+  saving: boolean;
+  error: string | null;
+  query: GridQuery;
+}
+
+/** What the engine wrapper exposes back to the controller for out-of-band data changes. */
+export interface GridViewBinding {
+  /** Re-pull effectiveRows() into the table (undo/redo, save, refresh, row add/delete). */
+  refreshData: () => void;
+}
+
+export interface GridController {
+  tab: Tab;
+  source: GridSource;
+  state: GridControllerState;
+  buffer: EditBuffer;
+  load: () => Promise<void>;
+  /** Reload from the source; asks before discarding pending edits. */
+  refresh: () => Promise<void>;
+  save: () => Promise<void>;
+  /** Query change (connector paging/sorting) — reloads rows. */
+  setQuery: (query: GridQuery) => Promise<void>;
+  /** Plain row objects (committed + pending overlay + pending inserts) for the grid engine. */
+  effectiveRows: () => Record<string, GridCellValue>[];
+  /** Current file text including pending edits, for source-mode display (file grids only). */
+  serializeForSource: () => Promise<string> | null;
+  /** Attach/detach the engine wrapper. Edits flowing FROM the table never round-trip back. */
+  bindView: (view: GridViewBinding | null) => void;
+  /** Buffer a new row (pending insert) and sync the view. Returns its temp key. */
+  addRow: (cells?: Record<string, GridCellValue>) => string;
+  /** Buffer row deletions as one undo group and sync the view. */
+  deleteRows: (rowKeys: string[]) => void;
+  /** Drop one row's pending edits (not undoable) and sync the view. */
+  discardRow: (rowKey: string) => void;
+  /** Replace text across editable string/text cells (one undo group). Returns cells changed. */
+  replaceAll: (find: string, replace: string) => number;
+}
+
+/** Row-object key carrying the grid row identity through the engine. */
+export const ROW_KEY_FIELD = "__key";
+
+const _controllers = new WeakMap<object, GridController>();
+
+/** The grid controller for a tab, if it is a grid tab. */
+export function getGridController(tab: Tab | null): GridController | null {
+  return tab ? (_controllers.get(toRaw(tab as unknown as object)) ?? null) : null;
+}
+
+/** Create and register the controller for a grid tab. One per tab; lives in the tab's scope. */
+export function createGridController(tab: Tab, source: GridSource): GridController {
+  const state: GridControllerState = reactive({
+    columns: [] as GridColumn[],
+    error: null as string | null,
+    loading: false,
+    query: {} as GridQuery,
+    rows: [] as GridRow[],
+    saving: false,
+    total: 0,
+  }) as GridControllerState;
+
+  let rowByKey = new Map<string, GridRow>();
+  const indexRows = (rows: GridRow[]) => {
+    rowByKey = new Map(rows.map((row) => [row.key, row]));
+  };
+
+  const buffer = createEditBuffer({
+    resolveBaseline: (rowKey, field) => rowByKey.get(rowKey)?.cells[field] ?? null,
+  });
+
+  const reloadRows = async () => {
+    const result = await source.rows(state.query);
+    state.rows = result.rows;
+    state.total = result.total;
+    indexRows(result.rows);
+  };
+
+  /** Missing required cells block the save (marked as row/cell errors, like a failed commit). */
+  const requiredViolations = (batch: GridEditBatch): CommitResult | null => {
+    const required = state.columns.filter((c) => c.required && c.editable);
+    if (required.length === 0) {
+      return null;
+    }
+    const cells = batch.cells
+      .filter((cell) => cell.value === null && required.some((c) => c.field === cell.field))
+      .map((cell) => ({ error: "Required", field: cell.field, ok: false, rowKey: cell.rowKey }));
+    const inserts = batch.inserts
+      .filter((insert) =>
+        required.some((c) => insert.cells[c.field] === null || insert.cells[c.field] === undefined),
+      )
+      .map((insert) => {
+        const missing = required
+          .filter((c) => insert.cells[c.field] === null || insert.cells[c.field] === undefined)
+          .map((c) => c.field)
+          .join(", ");
+        return { error: `Missing required: ${missing}`, ok: false, tempKey: insert.tempKey };
+      });
+    if (cells.length === 0 && inserts.length === 0) {
+      return null;
+    }
+    return { cells, deletes: [], inserts };
+  };
+
+  let viewBinding: GridViewBinding | null = null;
+  const syncView = () => viewBinding?.refreshData();
+
+  const controller: GridController = {
+    addRow(cells = {}) {
+      const tempKey = buffer.insertRow(cells);
+      syncView();
+      return tempKey;
+    },
+
+    bindView(view) {
+      viewBinding = view;
+    },
+
+    buffer,
+
+    deleteRows(rowKeys) {
+      if (rowKeys.length === 0) {
+        return;
+      }
+      buffer.group(() => {
+        for (const rowKey of rowKeys) {
+          buffer.deleteRow(rowKey);
+        }
+      });
+      syncView();
+    },
+
+    discardRow(rowKey) {
+      buffer.discardRow(rowKey);
+      syncView();
+    },
+
+    replaceAll(find, replace) {
+      if (find === "") {
+        return 0;
+      }
+      const textColumns = state.columns.filter(
+        (column) => column.editable && (column.kind === "string" || column.kind === "text"),
+      );
+      const rowKeys = [...state.rows.map((row) => row.key), ...buffer.state.inserts.keys()];
+      let changed = 0;
+      buffer.group(() => {
+        for (const rowKey of rowKeys) {
+          if (buffer.rowState(rowKey) === "pending-delete") {
+            continue;
+          }
+          for (const column of textColumns) {
+            const value = buffer.effectiveValue(rowKey, column.field);
+            if (typeof value === "string" && value.includes(find)) {
+              buffer.setCell(rowKey, column.field, value.replaceAll(find, replace));
+              changed += 1;
+            }
+          }
+        }
+      });
+      if (changed > 0) {
+        syncView();
+      }
+      return changed;
+    },
+
+    effectiveRows() {
+      // Detach values from reactive proxies — the grid engine must never hold live proxies.
+      const plain = (value: GridCellValue): GridCellValue =>
+        Array.isArray(value)
+          ? [...value]
+          : value !== null && typeof value === "object"
+            ? { $ref: value.$ref }
+            : value;
+      const rowObject = (key: string) => {
+        const cells: Record<string, GridCellValue> = { [ROW_KEY_FIELD]: key };
+        for (const column of state.columns) {
+          cells[column.field] = plain(buffer.effectiveValue(key, column.field));
+        }
+        return cells;
+      };
+      const rows = state.rows.map((row) => rowObject(row.key));
+      for (const [tempKey] of buffer.state.inserts) {
+        rows.push(rowObject(tempKey));
+      }
+      return rows;
+    },
+
+    async load() {
+      state.loading = true;
+      state.error = null;
+      try {
+        state.columns = await source.columns();
+        await reloadRows();
+      } catch (error) {
+        state.error = errorMessage(error);
+      } finally {
+        state.loading = false;
+      }
+      syncView();
+    },
+
+    async refresh() {
+      if (buffer.isDirty()) {
+        const confirmed = await showConfirmDialog(
+          "Refresh Grid",
+          `Discard ${buffer.dirtyCount()} pending change(s) and reload?`,
+          { confirmLabel: "Discard & Reload", destructive: true },
+        );
+        if (!confirmed) {
+          return;
+        }
+      }
+      buffer.reset();
+      await source.refresh?.();
+      await this.load();
+    },
+
+    async save() {
+      if (state.saving) {
+        return;
+      }
+      const batch = buffer.buildBatch();
+      const changeCount = batch.cells.length + batch.inserts.length + batch.deletes.length;
+      if (changeCount === 0) {
+        statusMessage("No grid changes to save");
+        return;
+      }
+      const violations = requiredViolations(batch);
+      if (violations) {
+        buffer.applyCommitResult(violations);
+        statusMessage("Required cells are empty — fix the marked rows and save again", 5000);
+        return;
+      }
+      if (batch.deletes.length > 0) {
+        const confirmed = await showConfirmDialog(
+          "Delete Rows",
+          `Save will permanently delete ${batch.deletes.length} row(s). Continue?`,
+          { confirmLabel: "Delete & Save", destructive: true },
+        );
+        if (!confirmed) {
+          return;
+        }
+      }
+
+      const affectedRows =
+        new Set(batch.cells.map((c) => c.rowKey)).size +
+        batch.inserts.length +
+        batch.deletes.length;
+      const progress = affectedRows > 5 ? showProgressModal({ title: "Saving grid" }) : null;
+      state.saving = true;
+      try {
+        const result = await source.commit(batch);
+
+        // Move baselines for saved cells before the buffer clears their pending entries.
+        const cellKey = (rowKey: string, field: string) => `${rowKey}${field}`;
+        const batchCells = new Map(batch.cells.map((c) => [cellKey(c.rowKey, c.field), c]));
+        for (const outcome of result.cells) {
+          const cell = batchCells.get(cellKey(outcome.rowKey, outcome.field));
+          if (outcome.ok && cell) {
+            const row = rowByKey.get(outcome.rowKey);
+            if (row) {
+              row.cells[outcome.field] = cell.value;
+            }
+          }
+        }
+        buffer.applyCommitResult(result);
+
+        const structural = result.inserts.some((r) => r.ok) || result.deletes.some((r) => r.ok);
+        if (structural) {
+          await reloadRows();
+        }
+
+        const okCount =
+          result.cells.filter((r) => r.ok).length +
+          result.inserts.filter((r) => r.ok).length +
+          result.deletes.filter((r) => r.ok).length;
+        const failed = changeCount - okCount;
+        const staleCount =
+          result.cells.filter((r) => r.stale).length + result.deletes.filter((r) => r.stale).length;
+        statusMessage(
+          failed === 0
+            ? `Saved ${okCount} change(s)`
+            : `Saved ${okCount} · ${failed} failed${staleCount ? ` (${staleCount} stale)` : ""} — kept pending`,
+          failed === 0 ? 3000 : 6000,
+        );
+      } catch (error) {
+        statusMessage(`Save error: ${errorMessage(error)}`, 6000);
+      } finally {
+        state.saving = false;
+        progress?.done();
+        syncView();
+      }
+    },
+
+    serializeForSource() {
+      if (!source.serializeForSource) {
+        return null;
+      }
+      return source.serializeForSource(buffer.buildBatch());
+    },
+
+    async setQuery(query: GridQuery) {
+      state.query = query;
+      state.loading = true;
+      try {
+        await reloadRows();
+      } catch (error) {
+        state.error = errorMessage(error);
+      } finally {
+        state.loading = false;
+      }
+      syncView();
+    },
+
+    source,
+    state,
+    tab,
+  };
+
+  tab.scope.run(() => {
+    // Buffer dirtiness IS the tab's dirty flag — tab-strip dot and close-confirm come for free.
+    effect(() => {
+      tab.doc.dirty = buffer.isDirty();
+    });
+
+    setHistoryDelegate(tab, {
+      canRedo: () => buffer.canRedo(),
+      canUndo: () => buffer.canUndo(),
+      redo: () => {
+        buffer.redo();
+        syncView();
+      },
+      undo: () => {
+        buffer.undo();
+        syncView();
+      },
+    });
+
+    const platform = getPlatform();
+    if (platform.subscribeFileEvents && source.backingPaths) {
+      const unsubscribe = platform.subscribeFileEvents((events) => {
+        const backing = source.backingPaths!();
+        const hitKeys = new Set<string>();
+        for (const event of events) {
+          if (event.isDir) {
+            continue;
+          }
+          const path = event.path.replaceAll("\\", "/");
+          const rowKey = backing.get(path);
+          if (rowKey !== undefined && !isRecentLocal(path)) {
+            hitKeys.add(rowKey);
+          }
+        }
+        if (hitKeys.size === 0) {
+          return;
+        }
+        if (buffer.isDirty()) {
+          const keys = hitKeys.has("*") ? state.rows.map((row) => row.key) : [...hitKeys];
+          buffer.markStale(keys);
+          statusMessage("Grid rows changed on disk — marked stale (refresh to reload)", 5000);
+          syncView();
+        } else {
+          void controller.refresh();
+        }
+      });
+      onScopeDispose(unsubscribe);
+    }
+
+    onScopeDispose(() => {
+      setHistoryDelegate(tab, null);
+      _controllers.delete(toRaw(tab as unknown as object));
+      source.dispose?.();
+    });
+  });
+
+  _controllers.set(toRaw(tab as unknown as object), controller);
+  return controller;
+}

package/src/grid/grid-layout.ts

@@ -0,0 +1,83 @@
+/**
+ * Grid column-layout persistence — widths and order, per grid id, in localStorage.
+ *
+ * Pure besides the storage read/write: applyGridLayout reorders/undoes nothing destructive, it just
+ * returns a new column-def array with saved widths applied and saved order first (columns unknown
+ * to the saved layout keep their relative position at the end; saved fields that no longer exist
+ * are ignored — schemas drift).
+ */
+
+export interface GridLayout {
+  /** Column order as field names, leftmost first. */
+  order?: string[];
+  /** Field → width in px. */
+  widths?: Record<string, number>;
+}
+
+const STORAGE_PREFIX = "jx-grid-layout:";
+
+function storage(): Storage | null {
+  try {
+    return globalThis.localStorage ?? null;
+  } catch {
+    return null; // Storage disabled (privacy mode) — layouts just don't persist.
+  }
+}
+
+/** The saved layout for a grid id, or null. */
+export function loadGridLayout(gridId: string): GridLayout | null {
+  const raw = storage()?.getItem(STORAGE_PREFIX + gridId);
+  if (!raw) {
+    return null;
+  }
+  try {
+    const parsed = JSON.parse(raw) as GridLayout;
+    return typeof parsed === "object" && parsed !== null ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Merge a partial layout change into the saved layout for a grid id. */
+export function saveGridLayout(gridId: string, change: GridLayout): void {
+  const store = storage();
+  if (!store) {
+    return;
+  }
+  const current = loadGridLayout(gridId) ?? {};
+  const next: GridLayout = {
+    ...((change.order ?? current.order) ? { order: change.order ?? current.order } : {}),
+    widths: { ...current.widths, ...change.widths },
+  };
+  store.setItem(STORAGE_PREFIX + gridId, JSON.stringify(next));
+}
+
+/** Drop the saved layout for a grid id. */
+export function clearGridLayout(gridId: string): void {
+  storage()?.removeItem(STORAGE_PREFIX + gridId);
+}
+
+/** Apply a saved layout to column defs: saved widths win; saved order leads, unknowns follow. */
+export function applyGridLayout<
+  T extends { field?: string | undefined; width?: number | undefined },
+>(defs: T[], layout: GridLayout | null): T[] {
+  if (!layout) {
+    return defs;
+  }
+  const widened = defs.map((def) => {
+    const width = def.field ? layout.widths?.[def.field] : undefined;
+    return width ? { ...def, width } : def;
+  });
+  if (!layout.order?.length) {
+    return widened;
+  }
+  const rank = new Map(layout.order.map((field, i) => [field, i]));
+  return widened
+    .map((def, index) => ({ def, index }))
+    .toSorted((a, b) => {
+      const ra = rank.get(a.def.field ?? "") ?? layout.order!.length + a.index;
+      const rb = rank.get(b.def.field ?? "") ?? layout.order!.length + b.index;
+      return ra - rb;
+    })
+    .map(({ def }) => def);
+}

package/src/grid/grid-open.ts

@@ -0,0 +1,167 @@
+/**
+ * Grid tab openers — create (or activate) the tab + controller pair for a grid surface.
+ *
+ * CSV files open as REAL file tabs (id = path) whose default canvas mode is "grid" with a Monaco
+ * "source" alternate; collection/pages/connector grids (later phases) open as virtual tabs with
+ * `grid://` ids. All openers dedupe by tab id.
+ */
+import { html } from "lit-html";
+import { activateTab, openTab, workspace } from "../workspace/workspace";
+import { formatForPath, loadFormats } from "../format/format-host";
+import { openModal } from "../ui/layers";
+import { dataSurfaceAvailable, fetchConnections } from "../services/data-service";
+import { createGridController } from "./grid-controller";
+import { createCsvFileSource } from "./sources/csv-file-source";
+import {
+  collectionDirs,
+  createCollectionSource,
+  createPagesSource,
+} from "./sources/content-source";
+import { createConnectorSource } from "./sources/connector-source";
+import { makeGridTabId } from "./grid-source";
+import type { GridSource } from "./grid-source";
+import type { Tab } from "../tabs/tab";
+
+/** Placeholder document for grid tabs — the grid never reads it; save routes to the controller. */
+const GRID_STUB_DOCUMENT = { children: [], tagName: "div" };
+
+/** Open (or activate) a `.csv` file as a grid tab. */
+export async function openCsvGridTab(path: string): Promise<Tab> {
+  const existing = workspace.tabs.get(path);
+  if (existing) {
+    activateTab(path);
+    return existing;
+  }
+
+  // Best effort: the format name labels the tab's source mode; the grid works without it.
+  try {
+    await loadFormats();
+  } catch {
+    // Format registry unavailable (e.g. no dev server) — grid mode still works.
+  }
+
+  const source = createCsvFileSource(path);
+  const tab = openTab({
+    capabilities: { modes: ["grid", "source"] },
+    document: structuredClone(GRID_STUB_DOCUMENT),
+    documentPath: path,
+    id: path,
+    sourceFormat: formatForPath(path)?.name ?? null,
+  });
+  const controller = createGridController(tab, source);
+  void controller.load();
+  return tab;
+}
+
+/**
+ * Open a virtual grid tab for a source (collections now; more kinds later). Callers dedupe by the
+ * same `makeGridTabId` id before constructing the source.
+ */
+function openVirtualGridTab(source: GridSource): Tab {
+  const tab = openTab({
+    capabilities: { modes: ["grid"] },
+    document: structuredClone(GRID_STUB_DOCUMENT),
+    documentPath: null,
+    id: source.id,
+  });
+  const controller = createGridController(tab, source);
+  void controller.load();
+  return tab;
+}
+
+/** Open (or activate) the grid tab for a content collection. */
+export function openCollectionGrid(typeName: string): Tab {
+  const id = makeGridTabId({ kind: "collection", name: typeName });
+  const existing = workspace.tabs.get(id);
+  if (existing) {
+    activateTab(id);
+    return existing;
+  }
+  return openVirtualGridTab(createCollectionSource(typeName));
+}
+
+/** Open (or activate) the pages metadata grid. */
+export function openPagesGrid(): Tab {
+  const id = makeGridTabId({ kind: "pages" });
+  const existing = workspace.tabs.get(id);
+  if (existing) {
+    activateTab(id);
+    return existing;
+  }
+  return openVirtualGridTab(createPagesSource());
+}
+
+/** Open (or activate) the grid tab for a connector table. */
+export function openConnectorGrid(connection: string | undefined, table: string): Tab {
+  const id = makeGridTabId({ connection: connection ?? "default", kind: "data", table });
+  const existing = workspace.tabs.get(id);
+  if (existing) {
+    activateTab(id);
+    return existing;
+  }
+  return openVirtualGridTab(createConnectorSource(connection, table));
+}
+
+/**
+ * Source picker — one dialog listing every grid-able source: pages, content collections, and (when
+ * the platform serves the data surface) each connection's tables.
+ */
+export async function openGridSourcePicker(): Promise<void> {
+  const collections = collectionDirs();
+  let connections: { name: string; tables: string[] }[] = [];
+  if (dataSurfaceAvailable()) {
+    const response = await fetchConnections().catch(() => null);
+    connections = response?.connections ?? [];
+  }
+
+  const handle = openModal(
+    html`<sp-dialog-wrapper
+      open
+      dismissable
+      underlay
+      headline="Open Grid"
+      @close=${() => handle.close()}
+    >
+      <sp-menu class="jx-grid-picker">
+        <sp-menu-group>
+          <span slot="header">Project</span>
+          <sp-menu-item
+            @click=${() => {
+              handle.close();
+              openPagesGrid();
+            }}
+            >Pages</sp-menu-item
+          >
+          ${collections.map(
+            ({ name }) =>
+              html`<sp-menu-item
+                @click=${() => {
+                  handle.close();
+                  openCollectionGrid(name);
+                }}
+                >Collection: ${name}</sp-menu-item
+              >`,
+          )}
+        </sp-menu-group>
+        ${connections.map(
+          (conn) =>
+            html`<sp-menu-group>
+              <span slot="header">Data · ${conn.name}</span>
+              ${conn.tables.length === 0
+                ? html`<sp-menu-item disabled>No tables — push a schema first</sp-menu-item>`
+                : conn.tables.map(
+                    (table) =>
+                      html`<sp-menu-item
+                        @click=${() => {
+                          handle.close();
+                          openConnectorGrid(conn.name, table);
+                        }}
+                        >${table}</sp-menu-item
+                      >`,
+                  )}
+            </sp-menu-group>`,
+        )}
+      </sp-menu>
+    </sp-dialog-wrapper>`,
+  );
+}