@jxsuite/studio 1.0.0 → 1.1.0

package/src/panels/data-grid.ts

@@ -1,84 +1,28 @@
 /// <reference lib="dom" />
 /**
- * Data grid — the owner console over the platform's data surface (plan Part 4a).
+ * Data section actions — the owner console entry points over the platform's data surface.
  *
  * Integration: the settings modal's contributed sections stay fully generic — extension-sections
  * passes this module's {@link dataSectionActions} into the ContributedSectionOptions.actions slot
  * for the data-domain sections ("connections"/"data") whenever the platform implements the
  * protocol's data routes. Those actions surface Test Connection, Push Schema (dry-run plan
- * confirmation before apply), and Open Data Grid; the grid itself is a full-surface modal
- * (settings-modal pattern) gated on `platform.dataRows`.
- *
- * The grid is v1-minimal by design: connection + table picker (declared tables plus system tables
- * discovered from backend introspection), 50-row pagination, inline cell edit committed via
- * dataUpdateRow keyed on the introspected primary key, an add-row footer, and two-step per-row
- * delete. No filter/sort UI.
+ * confirmation before apply), and Open Data Grid — which opens the grid-tab source picker; table
+ * editing itself lives in the spreadsheet grid tabs (src/grid/), which replaced the old modal grid
+ * at feature parity (paging, cell edit, add/delete row) and added batch save with undo.
  */
 
 import { html, nothing } from "lit-html";
-import { live } from "lit-html/directives/live.js";
 import { openModal } from "../ui/layers";
-import {
-  dataSurfaceAvailable,
-  deleteRow,
-  fetchConnections,
-  fetchRows,
-  insertRow,
-  pushSchema,
-  testConnection,
-  updateRow,
-} from "../services/data-service";
+import { dataSurfaceAvailable, pushSchema, testConnection } from "../services/data-service";
+import { openGridSourcePicker } from "../grid/grid-open";
 import type { TemplateResult } from "lit-html";
-import type {
-  DataColumnMeta,
-  DataConnectionInfo,
-  DataConnectionTestResult,
-  DataPushResult,
-} from "../types";
+import type { DataConnectionTestResult, DataPushResult } from "../types";
 import type { SectionActionsContext } from "../settings/contributed-section";
 
-export const DATA_GRID_PAGE_SIZE = 50;
-
-// ─── Grid state ───────────────────────────────────────────────────────────────
-
-interface GridState {
-  connections: DataConnectionInfo[];
-  connection: string | null;
-  table: string | null;
-  columns: DataColumnMeta[];
-  rows: Record<string, unknown>[];
-  total: number;
-  offset: number;
-  loading: boolean;
-  error: string | null;
-  /** Pk value armed for the two-step delete confirm. */
-  pendingDelete: string | null;
-  /** Add-row footer draft, keyed by column name. */
-  draft: Record<string, string>;
-}
-
-const blankGrid = (): GridState => ({
-  columns: [],
-  connection: null,
-  connections: [],
-  draft: {},
-  error: null,
-  loading: false,
-  offset: 0,
-  pendingDelete: null,
-  rows: [],
-  table: null,
-  total: 0,
-});
-
-let grid: GridState = blankGrid();
-let gridHandle: ReturnType<typeof openModal> | null = null;
+// ─── Grid opening (delegates to the grid-tab source picker) ──────────────────
 
 /** Reset all module UI state and close any open surfaces (test hook / project switch). */
 export function resetDataGridState(): void {
-  grid = blankGrid();
-  gridHandle?.close();
-  gridHandle = null;
   actionsState = { pushing: false, testResult: null, testing: null };
   closePushDialog();
 }
@@ -88,325 +32,6 @@ export function isDataGridAvailable(): boolean {
   return dataSurfaceAvailable();
 }
 
-/** Close the grid modal. */
-export function closeDataGrid(): void {
-  gridHandle?.close();
-  gridHandle = null;
-}
-
-/**
- * Open the data grid modal, loading connections and the first page.
- *
- * @param {{ connection?: string; table?: string }} [preselect]
- */
-export async function openDataGrid(preselect: { connection?: string; table?: string } = {}) {
-  if (!isDataGridAvailable() || gridHandle) {
-    return;
-  }
-  grid = blankGrid();
-  grid.loading = true;
-  renderGrid();
-  const res = await fetchConnections().catch(() => null);
-  grid.connections = res?.connections ?? [];
-  grid.connection =
-    (preselect.connection &&
-      grid.connections.some((c) => c.name === preselect.connection) &&
-      preselect.connection) ||
-    grid.connections.find((c) => c.isDefault)?.name ||
-    grid.connections[0]?.name ||
-    null;
-  const tables = currentTables();
-  grid.table =
-    preselect.table && tables.includes(preselect.table) ? preselect.table : (tables[0] ?? null);
-  await loadRows();
-}
-
-/** Table names of the selected connection (declared + backend-introspected system tables). */
-function currentTables(): string[] {
-  return grid.connections.find((c) => c.name === grid.connection)?.tables ?? [];
-}
-
-/** The primary-key column name (backend convention: "id" when nothing is flagged). */
-function pkColumn(): string {
-  return grid.columns.find((c) => c.pk)?.name ?? "id";
-}
-
-/** Load the current page. */
-async function loadRows(): Promise<void> {
-  if (!grid.table) {
-    grid.rows = [];
-    grid.columns = [];
-    grid.total = 0;
-    grid.loading = false;
-    renderGrid();
-    return;
-  }
-  grid.loading = true;
-  renderGrid();
-  try {
-    const result = await fetchRows({
-      limit: DATA_GRID_PAGE_SIZE,
-      offset: grid.offset,
-      table: grid.table,
-      ...(grid.connection === null ? {} : { connection: grid.connection }),
-    });
-    grid.rows = result.rows;
-    grid.columns = result.columns;
-    grid.total = result.total;
-    grid.error = null;
-  } catch (error) {
-    grid.rows = [];
-    grid.columns = [];
-    grid.total = 0;
-    grid.error = error instanceof Error ? error.message : String(error);
-  }
-  grid.loading = false;
-  grid.pendingDelete = null;
-  renderGrid();
-}
-
-/** Commit one edited cell via dataUpdateRow, keyed on the row's pk. */
-async function commitCell(
-  row: Record<string, unknown>,
-  column: DataColumnMeta,
-  raw: string,
-): Promise<void> {
-  const current = row[column.name];
-  const currentText = current == null ? "" : String(current);
-  if (raw === currentText || !grid.table) {
-    return;
-  }
-  try {
-    const updated = await updateRow({
-      pk: row[pkColumn()] as string | number,
-      set: { [column.name]: raw === "" ? null : raw },
-      table: grid.table,
-      ...(grid.connection === null ? {} : { connection: grid.connection }),
-    });
-    const index = grid.rows.indexOf(row);
-    if (index !== -1) {
-      grid.rows[index] = updated.row;
-    }
-    grid.error = null;
-  } catch (error) {
-    grid.error = error instanceof Error ? error.message : String(error);
-  }
-  renderGrid();
-}
-
-/** Two-step delete: first click arms the row, second click deletes. */
-async function requestDelete(pk: string): Promise<void> {
-  if (grid.pendingDelete !== pk) {
-    grid.pendingDelete = pk;
-    renderGrid();
-    return;
-  }
-  if (!grid.table) {
-    return;
-  }
-  try {
-    await deleteRow({
-      pk,
-      table: grid.table,
-      ...(grid.connection === null ? {} : { connection: grid.connection }),
-    });
-    await loadRows();
-  } catch (error) {
-    grid.error = error instanceof Error ? error.message : String(error);
-    grid.pendingDelete = null;
-    renderGrid();
-  }
-}
-
-/** Insert the add-row footer draft. */
-async function commitDraft(): Promise<void> {
-  if (!grid.table) {
-    return;
-  }
-  const values: Record<string, unknown> = {};
-  for (const [name, raw] of Object.entries(grid.draft)) {
-    if (raw !== "") {
-      values[name] = raw;
-    }
-  }
-  try {
-    await insertRow({
-      table: grid.table,
-      values,
-      ...(grid.connection === null ? {} : { connection: grid.connection }),
-    });
-    grid.draft = {};
-    await loadRows();
-  } catch (error) {
-    grid.error = error instanceof Error ? error.message : String(error);
-    renderGrid();
-  }
-}
-
-/** Columns editable in the grid (system-managed columns are display-only). */
-function editableColumn(column: DataColumnMeta): boolean {
-  return !column.pk && column.name !== "created_at" && column.name !== "updated_at";
-}
-
-function gridBody(): TemplateResult {
-  if (grid.loading) {
-    return html`<div class="data-grid-empty">Loading…</div>`;
-  }
-  if (grid.error) {
-    return html`<div class="data-grid-error">${grid.error}</div>`;
-  }
-  if (!grid.table) {
-    return html`<div class="data-grid-empty">
-      No tables on this connection — push a schema first.
-    </div>`;
-  }
-  const pk = pkColumn();
-  return html`
-    <table class="data-grid-table">
-      <thead>
-        <tr>
-          ${grid.columns.map(
-            (c) =>
-              html`<th title=${c.type}>
-                ${c.name}${c.pk ? html` <span class="data-grid-pk">pk</span>` : nothing}
-              </th>`,
-          )}
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        ${grid.rows.map((row) => {
-          const pkValue = String(row[pk] ?? "");
-          return html`<tr>
-            ${grid.columns.map((c) =>
-              editableColumn(c)
-                ? html`<td>
-                    <input
-                      class="data-grid-cell"
-                      .value=${live(row[c.name] == null ? "" : String(row[c.name]))}
-                      @change=${(e: Event) =>
-                        void commitCell(row, c, (e.target as HTMLInputElement).value)}
-                    />
-                  </td>`
-                : html`<td class="data-grid-readonly">
-                    ${row[c.name] == null ? "" : String(row[c.name])}
-                  </td>`,
-            )}
-            <td>
-              <sp-action-button
-                quiet
-                size="s"
-                class="data-grid-delete"
-                @click=${() => void requestDelete(pkValue)}
-              >
-                ${grid.pendingDelete === pkValue ? "Confirm?" : "Delete"}
-              </sp-action-button>
-            </td>
-          </tr>`;
-        })}
-      </tbody>
-      <tfoot>
-        <tr class="data-grid-add-row">
-          ${grid.columns.map((c) =>
-            editableColumn(c)
-              ? html`<td>
-                  <input
-                    class="data-grid-draft"
-                    placeholder=${c.name}
-                    .value=${live(grid.draft[c.name] ?? "")}
-                    @input=${(e: Event) => {
-                      grid.draft[c.name] = (e.target as HTMLInputElement).value;
-                    }}
-                  />
-                </td>`
-              : html`<td></td>`,
-          )}
-          <td>
-            <sp-action-button size="s" class="data-grid-add" @click=${() => void commitDraft()}>
-              Add
-            </sp-action-button>
-          </td>
-        </tr>
-      </tfoot>
-    </table>
-  `;
-}
-
-function renderGrid(): void {
-  const first = grid.total === 0 ? 0 : grid.offset + 1;
-  const last = grid.offset + grid.rows.length;
-  const tpl = html`
-    <sp-underlay open @close=${closeDataGrid}></sp-underlay>
-    <div class="settings-modal data-grid-modal">
-      <div class="settings-modal-header">
-        <h2 class="settings-modal-title">Data</h2>
-        <sp-picker
-          size="s"
-          class="data-grid-connection"
-          value=${grid.connection ?? ""}
-          @change=${(e: Event) => {
-            grid.connection = (e.target as HTMLInputElement).value || null;
-            grid.offset = 0;
-            grid.table = currentTables()[0] ?? null;
-            void loadRows();
-          }}
-        >
-          ${grid.connections.map(
-            (c) => html`<sp-menu-item value=${c.name}>${c.name}</sp-menu-item>`,
-          )}
-        </sp-picker>
-        <sp-picker
-          size="s"
-          class="data-grid-tables"
-          value=${grid.table ?? ""}
-          @change=${(e: Event) => {
-            grid.table = (e.target as HTMLInputElement).value || null;
-            grid.offset = 0;
-            grid.draft = {};
-            void loadRows();
-          }}
-        >
-          ${currentTables().map(
-            (table) => html`<sp-menu-item value=${table}>${table}</sp-menu-item>`,
-          )}
-        </sp-picker>
-        <sp-action-button quiet size="s" title="Close" @click=${closeDataGrid}>
-          <sp-icon-close slot="icon"></sp-icon-close>
-        </sp-action-button>
-      </div>
-      <div class="settings-modal-body data-grid-body">${gridBody()}</div>
-      <div class="data-grid-footer">
-        <sp-action-button
-          size="s"
-          class="data-grid-prev"
-          ?disabled=${grid.offset === 0}
-          @click=${() => {
-            grid.offset = Math.max(0, grid.offset - DATA_GRID_PAGE_SIZE);
-            void loadRows();
-          }}
-          >Prev</sp-action-button
-        >
-        <span class="data-grid-range">${first}–${last} of ${grid.total}</span>
-        <sp-action-button
-          size="s"
-          class="data-grid-next"
-          ?disabled=${grid.offset + DATA_GRID_PAGE_SIZE >= grid.total}
-          @click=${() => {
-            grid.offset += DATA_GRID_PAGE_SIZE;
-            void loadRows();
-          }}
-          >Next</sp-action-button
-        >
-      </div>
-    </div>
-  `;
-  if (gridHandle) {
-    gridHandle.update(tpl);
-  } else {
-    gridHandle = openModal(tpl);
-  }
-}
-
 // ─── Push dialog (dry-run plan confirmation before apply) ─────────────────────
 
 interface PushDialogState {
@@ -598,10 +223,7 @@ function renderSectionActions(sectionKey: string, ctx: SectionActionsContext): T
       <sp-action-button
         size="s"
         class="data-action-grid"
-        @click=${() =>
-          void openDataGrid(
-            sectionKey === "connections" && selected ? { connection: selected } : {},
-          )}
+        @click=${() => void openGridSourcePicker()}
       >
         Open Data Grid
       </sp-action-button>

package/src/panels/editors.ts

@@ -14,6 +14,7 @@ import { activeTab } from "../workspace/workspace";
 import { mutateUpdateDef, mutateUpdateProperty, transactDoc } from "../tabs/transact";
 import { view } from "../view";
 import { codeService, getFunctionArgs, setLintMarkers } from "../services/code-services";
+import { globalEntries, namedFormulaEntries } from "../ui/formula-catalog";
 
 import type { OxLintDiagnostic } from "../services/code-services";
 import type { JxMutableNode, JxPrototypeDef } from "@jxsuite/schema/types";
@@ -185,7 +186,10 @@ export function registerFunctionCompletions() {
   view._completionRegistered = true;
   monaco.languages.registerCompletionItemProvider("javascript", {
     provideCompletionItems(model, position) {
-      const defs = activeTab.value?.doc.document?.state || {};
+      if (!activeTab.value) {
+        return { suggestions: [] };
+      }
+      const defs = activeTab.value.doc.document?.state || {};
       const word = model.getWordUntilPosition(position);
       const range = {
         endColumn: word.endColumn,
@@ -194,23 +198,45 @@ export function registerFunctionCompletions() {
         startLineNumber: position.lineNumber,
       };
 
-      const suggestions = Object.entries(defs).map(([key, def]) => {
-        let kind = monaco.languages.CompletionItemKind.Variable;
-        if (
-          (def as JxPrototypeDef)?.$prototype === "Function" ||
-          (def as Record<string, unknown>)?.$handler
-        ) {
-          kind = monaco.languages.CompletionItemKind.Function;
-        } else if ((def as JxPrototypeDef)?.$prototype) {
-          kind = monaco.languages.CompletionItemKind.Property;
-        }
-        return {
-          insertText: `state.${key}`,
-          kind,
-          label: `state.${key}`,
+      // Named-formula catalog metadata enriches their completions with documentation.
+      const formulaDocs = new Map(namedFormulaEntries(defs).map((e) => [e.name, e.description]));
+
+      const suggestions: monaco.languages.CompletionItem[] = Object.entries(defs).map(
+        ([key, def]) => {
+          let kind = monaco.languages.CompletionItemKind.Variable;
+          if (
+            (def as JxPrototypeDef)?.$prototype === "Function" ||
+            (def as Record<string, unknown>)?.$handler ||
+            formulaDocs.has(key)
+          ) {
+            kind = monaco.languages.CompletionItemKind.Function;
+          } else if ((def as JxPrototypeDef)?.$prototype) {
+            kind = monaco.languages.CompletionItemKind.Property;
+          }
+          const item: monaco.languages.CompletionItem = {
+            insertText: `state.${key}`,
+            kind,
+            label: `state.${key}`,
+            range,
+          };
+          const documentation = formulaDocs.get(key);
+          if (documentation) {
+            item.documentation = documentation;
+          }
+          return item;
+        },
+      );
+
+      // Blessed pure globals from the formula catalog (Math.*, JSON.*, Object.*, …).
+      for (const entry of globalEntries()) {
+        suggestions.push({
+          documentation: entry.description,
+          insertText: `window.${entry.label}`,
+          kind: monaco.languages.CompletionItemKind.Function,
+          label: entry.label,
           range,
-        };
-      });
+        });
+      }
       return { suggestions };
     },
     triggerCharacters: ["."],