@jxsuite/studio 0.37.1 → 1.1.0

package/src/editor/shortcuts.ts

@@ -16,9 +16,11 @@ import {
   undo as tabUndo,
   transactDoc,
 } from "../tabs/transact";
+import { applyEditZoom, requestEditZoom, setEditZoom } from "../canvas/canvas-utils";
 import { isEditing, stopEditing } from "./inline-edit";
 import { copyNode, cutNode, pasteNode } from "./context-menu";
 import { openQuickSearch } from "../panels/quick-search";
+import { shouldWarnOnClose } from "../panels/tab-strip";
 import { showConfirmDialog } from "../ui/layers";
 import { rectOf } from "../utils/geometry";
 
@@ -33,7 +35,6 @@ import type { JxPath } from "../state";
  *   panY: number;
  *   setPan: (x: number, y: number) => void;
  *   applyTransform: () => void;
- *   positionZoomIndicator: () => void;
  *   saveFile: () => void;
  *   openProject: () => void;
  * }} getContext
@@ -45,7 +46,6 @@ export function initShortcuts(
     panY: number;
     setPan: (x: number, y: number) => void;
     applyTransform: () => void;
-    positionZoomIndicator: () => void;
     saveFile: () => void;
     openProject: () => void;
   },
@@ -55,10 +55,18 @@ export function initShortcuts(
     "wheel",
     (e: WheelEvent) => {
       const { canvasMode, panX, panY, setPan, applyTransform } = getContext();
-      // Edit (content) mode: scroll the edit-mode container ourselves. The canvas iframe is sized to
-      // Its content (no internal scroll) and a cross-origin OOPIF doesn't bubble wheel to the parent,
-      // So the wheel reaches us forwarded (or over the canvas chrome) but never triggers native scroll.
+      // Edit (content) mode: ctrl/cmd+wheel drives the content zoom (browser-page-zoom semantics —
+      // The footprint stays fixed, content reflows); plain wheel scrolls the edit-mode container
+      // Ourselves. The canvas iframe is sized to its content (no internal scroll) and a cross-origin
+      // OOPIF doesn't bubble wheel to the parent, so the wheel reaches us forwarded (or over the
+      // Canvas chrome) but never triggers native scroll.
       if (canvasMode === "edit") {
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          const editZoom = activeTab.value?.session.ui.editZoom ?? 1;
+          requestEditZoom(editZoom * (1 + -e.deltaY * 0.005));
+          return;
+        }
         const sc = canvasWrap.querySelector<HTMLElement>(".content-edit-canvas");
         if (sc) {
           e.preventDefault();
@@ -125,8 +133,13 @@ export function initShortcuts(
     canvasWrap.addEventListener("pointerup", onUp);
   });
 
-  // Reposition zoom indicator on resize
-  window.addEventListener("resize", () => getContext().positionZoomIndicator());
+  // Re-fit the edit-mode content zoom on resize: its layout width derives from the LIVE column
+  // Width, which tracks the studio window.
+  window.addEventListener("resize", () => {
+    if (getContext().canvasMode === "edit") {
+      applyEditZoom();
+    }
+  });
 
   document.addEventListener("keydown", (e) => {
     const { canvasMode, setPan, applyTransform, saveFile, openProject } = getContext();
@@ -161,12 +174,17 @@ export function initShortcuts(
       return;
     }
     if (mod) {
+      // Grid mode: copy/paste/duplicate/zoom belong to the grid engine (Tabulator clipboard
+      // Needs the native events); only tab/app-level chords pass through.
+      if (canvasMode === "grid" && !["o", "p", "s", "w", "z", "Z"].includes(e.key)) {
+        return;
+      }
       switch (e.key) {
         case "w": {
           e.preventDefault();
           if (workspace.activeTabId && workspace.tabOrder.length > 1) {
             const tabToClose = workspace.tabs.get(workspace.activeTabId);
-            if (tabToClose?.doc.dirty) {
+            if (tabToClose && shouldWarnOnClose(tabToClose)) {
               const name = tabToClose.documentPath?.split("/").pop() || "Untitled";
               void showConfirmDialog(
                 "Unsaved Changes",
@@ -198,7 +216,9 @@ export function initShortcuts(
           saveFile();
           break;
         }
-        case "z": {
+        // With Shift held e.key is "Z", so redo needs the uppercase case too.
+        case "z":
+        case "Z": {
           e.preventDefault();
           if (e.shiftKey) {
             tabRedo(activeTab.value!);
@@ -231,10 +251,11 @@ export function initShortcuts(
           break;
         }
         case "0": {
+          e.preventDefault();
           if (canvasMode === "edit") {
+            setEditZoom(1);
             break;
           }
-          e.preventDefault();
           activeTab.value!.session.ui.zoom = 1;
           setPan(16, 16);
           applyTransform();
@@ -242,19 +263,21 @@ export function initShortcuts(
         }
         case "=":
         case "+": {
+          e.preventDefault();
           if (canvasMode === "edit") {
+            setEditZoom((tab?.session.ui.editZoom ?? 1) * 1.2);
             break;
           }
-          e.preventDefault();
           activeTab.value!.session.ui.zoom = Math.min(5, (tab?.session.ui.zoom ?? 1) * 1.2);
           applyTransform();
           break;
         }
         case "-": {
+          e.preventDefault();
           if (canvasMode === "edit") {
+            setEditZoom((tab?.session.ui.editZoom ?? 1) / 1.2);
             break;
           }
-          e.preventDefault();
           activeTab.value!.session.ui.zoom = Math.max(0.05, (tab?.session.ui.zoom ?? 1) / 1.2);
           applyTransform();
           break;
@@ -266,6 +289,12 @@ export function initShortcuts(
       return;
     }
 
+    // Grid mode: Delete/Escape/Enter/arrows drive the grid's own range clearing and cell
+    // Navigation — never the canvas document.
+    if (canvasMode === "grid") {
+      return;
+    }
+
     switch (e.key) {
       case "Delete":
       case "Backspace": {

package/src/files/file-ops.ts

@@ -12,6 +12,7 @@ import { errorMessage } from "@jxsuite/schema/parse";
 import { statusMessage } from "../panels/statusbar";
 import { validateComponentSlots } from "../services/cem-export";
 import { getPlatform } from "../platform";
+import { getGridController } from "../grid/grid-controller";
 import { activeTab, openTab } from "../workspace/workspace";
 import { collabSave } from "../collab/collab-session";
 import { isEditing, stopEditing } from "../editor/inline-edit";
@@ -162,6 +163,12 @@ export async function saveFile() {
   if (!tab) {
     return;
   }
+  // Grid tabs batch-save through their controller (per-source commit semantics, not a doc write).
+  const grid = getGridController(tab);
+  if (grid) {
+    await grid.save();
+    return;
+  }
   try {
     // A co-edited tab persists through its provider (a direct file write would reset the room).
     if (await collabSave(tab)) {
@@ -264,6 +271,13 @@ export async function exportFile() {
  * @returns {Promise<string>}
  */
 export async function serializeDocument(tab: Tab): Promise<string> {
+  // Grid tabs serialize through their source (pending edits included) — e.g. the Monaco source
+  // View of a CSV grid tab shows the live file text.
+  const grid = getGridController(tab);
+  const gridText = grid?.serializeForSource();
+  if (gridText) {
+    return gridText;
+  }
   await loadFormats();
   const sourceFormat = formatByName(tab.doc.sourceFormat);
   if (sourceFormat?.capabilities.serialize) {

package/src/files/files.ts

@@ -27,13 +27,23 @@ import {
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { activateTab, openTab, renameTab, replaceAllTabs, workspace } from "../workspace/workspace";
+import {
+  activateTab,
+  openTab,
+  renameTab,
+  replaceAllTabs,
+  setWorkspaceProject,
+  workspace,
+} from "../workspace/workspace";
+import { openCollectionGrid, openCsvGridTab, openPagesGrid } from "../grid/grid-open";
+import { collectionDirs } from "../grid/sources/content-source";
 import { parseSourceForPath, serializeDocument } from "./file-ops";
 import {
   documentExtensions,
   formatForPath,
   loadFormats,
   noFormatError,
+  refreshExtensionUi,
   refreshFormats,
 } from "../format/format-host";
 import { view } from "../view";
@@ -83,6 +93,7 @@ export async function loadProject() {
 
     refreshFormats();
     void loadFormats();
+    refreshExtensionUi(platform);
 
     setProjectState({
       dirs: new Map(),
@@ -96,6 +107,11 @@ export async function loadProject() {
       searchQuery: "",
       selectedPath: null,
     });
+    // Only a site project counts as an open project for the workspace (a bare monorepo root keeps
+    // The assistant in bootstrap mode).
+    if (info.isSiteProject) {
+      setWorkspaceProject(meta.root || ".", info.projectConfig || null);
+    }
 
     if (info.isSiteProject) {
       addRecentProject(requireProjectState().name, meta.root);
@@ -145,6 +161,7 @@ export async function openProject({
 
     refreshFormats();
     void loadFormats();
+    refreshExtensionUi(platform);
 
     setProjectState({
       .../** @type {ProjectState} */ projectState,
@@ -157,6 +174,7 @@ export async function openProject({
       searchQuery: "",
       selectedPath: null,
     });
+    setWorkspaceProject(handle.root, config);
 
     await autoSyncProjectOnOpen();
     await ensureDependenciesInstalled();
@@ -716,6 +734,26 @@ function showFileContextMenu(
       action: () => createNewFile(entry.path, ctx.renderLeftPanel),
       label: "New File\u2026",
     });
+    // Directories backing a content collection get a bulk-edit affordance.
+    const collection = collectionDirs().find(
+      ({ dir }) => entry.path === dir || entry.path.endsWith(`/${dir}`),
+    );
+    if (collection) {
+      items.push({
+        action: () => {
+          openCollectionGrid(collection.name);
+        },
+        label: "Edit Collection in Grid",
+      });
+    }
+    if (entry.path === "pages" || entry.path.endsWith("/pages")) {
+      items.push({
+        action: () => {
+          openPagesGrid();
+        },
+        label: "Edit Pages in Grid",
+      });
+    }
   }
   items.push(
     { label: "\u2014" },
@@ -1029,6 +1067,23 @@ export async function openFileInTab(path: string) {
     }
   }
 
+  // CSV files open in the grid editor (source mode remains as the raw-text alternate).
+  if (path.toLowerCase().endsWith(".csv")) {
+    try {
+      await openCsvGridTab(path);
+      requireProjectState().selectedPath = path;
+      trackRecentFile({
+        name: path.split("/").pop() || path,
+        path,
+        root: requireProjectState().projectRoot,
+      });
+      statusMessage(`Opened ${path.split("/").pop()}`);
+    } catch (error) {
+      statusMessage(`Error: ${errorMessage(error)}`);
+    }
+    return;
+  }
+
   const platform = getPlatform();
   try {
     const content = await platform.readFile(path);

package/src/format/format-host.ts

@@ -8,6 +8,7 @@
  */
 
 import { getPlatform } from "../platform";
+import type { ExtensionsInfo } from "../types";
 import type { JxMutableNode } from "@jxsuite/schema/types";
 
 export interface StudioFormatHints {
@@ -68,10 +69,12 @@ export function loadFormats(): Promise<StudioFormat[]> {
   return _loaded;
 }
 
-/** Invalidate the cached registry (call on project switch). */
+/** Invalidate the cached registry and extensions payload (call on project switch). */
 export function refreshFormats() {
   _loaded = null;
   _formats = [];
+  _extensionsLoaded = null;
+  _extensions = [];
 }
 
 /** Seed the registry directly (tests and hosts that preload format metadata). */
@@ -80,6 +83,65 @@ export function setFormats(formats: StudioFormat[]) {
   _loaded = Promise.resolve(formats);
 }
 
+// ─── Extensions payload (specs/extensions.md §9/§9.1) ────────────────────────
+
+let _extensions: ExtensionsInfo[] = [];
+let _extensionsLoaded: Promise<ExtensionsInfo[]> | null = null;
+
+/**
+ * Load (and cache) the project's enabled extensions with their project-section contributions.
+ * Backed by the platform's optional `listExtensions` member; platforms without it (or failures)
+ * degrade to an empty list, hiding descriptor-contributed settings sections.
+ */
+export function loadExtensions(): Promise<ExtensionsInfo[]> {
+  if (!_extensionsLoaded) {
+    _extensionsLoaded = (async () => {
+      try {
+        const platform = getPlatform() as {
+          listExtensions?: () => Promise<ExtensionsInfo[]>;
+        };
+        _extensions = (await platform.listExtensions?.()) ?? [];
+      } catch {
+        _extensions = [];
+      }
+      return _extensions;
+    })();
+  }
+  return _extensionsLoaded;
+}
+
+/** The last-loaded extensions payload (synchronous access for render paths). */
+export function getExtensions(): ExtensionsInfo[] {
+  return _extensions;
+}
+
+/** Seed the extensions payload directly (tests and hosts that preload it). */
+export function setExtensions(extensions: ExtensionsInfo[]) {
+  _extensions = extensions;
+  _extensionsLoaded = Promise.resolve(extensions);
+}
+
+/**
+ * Fire-and-forget refresh of the extension-facing editor surface after project (re)activation or an
+ * `extensions` change: Monaco's per-project schemas and the descriptor-contributed settings
+ * sections. Both modules load lazily — monaco is heavy and the settings registry pulls DOM
+ * templates — and both degrade silently (bundled core schemas, built-in sections only).
+ *
+ * @param {object} platform - The studio platform (only `fetchProjectSchemas` is consulted here)
+ */
+export function refreshExtensionUi(platform: {
+  fetchProjectSchemas?: () => Promise<{ project?: unknown; document?: unknown }>;
+}): void {
+  void import("../services/monaco-setup")
+    .then(({ refreshProjectSchemas }) => refreshProjectSchemas(platform))
+    .catch(() => false);
+  void import("../settings/extension-sections")
+    .then(({ syncExtensionSettingsSections }) => syncExtensionSettingsSections())
+    .catch(() => {
+      // Contributed sections also refresh on the next settings-modal open.
+    });
+}
+
 /** The last-loaded registry (synchronous access for render paths). */
 export function getFormats(): StudioFormat[] {
   return _formats;

package/src/grid/cell-editors.ts

@@ -0,0 +1,288 @@
+/**
+ * Grid cell editors and formatters — the lit → Tabulator bridge.
+ *
+ * Tabulator's editor contract is `(cell, onRendered, success, cancel) => element`: it parents the
+ * returned element into the cell and expects `success(value)`/`cancel()` calls. Each factory here
+ * lit-renders a control into a host element supplied by grid-view's single sanctioned element
+ * factory — this module itself never creates DOM imperatively. Formatters likewise return a
+ * rendered element (never an HTML string, which Tabulator would inject as innerHTML).
+ *
+ * Native inputs (the data-grid precedent) rather than Spectrum controls: cells are 24px
+ * micro-controls where SWC shadow focus handling fights Tabulator's editor lifecycle. Rich popover
+ * editors (media, relationship pickers) layer on in a later phase.
+ */
+import { html, render } from "lit-html";
+import { cellToText, coerceCellInput } from "./schema-columns";
+import type { GridCellValue, GridColumn } from "./grid-source";
+
+/** The subset of Tabulator's CellComponent the editors/formatters touch. */
+export interface CellLike {
+  getValue: () => unknown;
+}
+
+export type CellEditorFn = (
+  cell: CellLike,
+  onRendered: (fn: () => void) => void,
+  success: (value: unknown) => void,
+  cancel: () => void,
+) => HTMLElement;
+
+export type CellFormatterFn = (cell: CellLike) => HTMLElement;
+
+/** Detached-host factory — grid-view owns the one sanctioned document.createElement. */
+export type HostFactory = (className: string) => HTMLElement;
+
+/** Commit/cancel wiring shared by every text-ish editor. */
+function inputEditor(makeHost: HostFactory, column: GridColumn, inputType: string): CellEditorFn {
+  return (cell, onRendered, success, cancel) => {
+    const host = makeHost("jx-grid-editor");
+    let done = false;
+    const commit = (raw: string) => {
+      if (!done) {
+        done = true;
+        success(coerceCellInput(raw, column));
+      }
+    };
+    const abort = () => {
+      if (!done) {
+        done = true;
+        cancel();
+      }
+    };
+    const initial =
+      column.kind === "date"
+        ? cellToText(cell.getValue() as GridCellValue).slice(0, 10)
+        : cellToText(cell.getValue() as GridCellValue);
+    render(
+      html`<input
+        class="jx-grid-input"
+        type=${inputType}
+        .value=${initial}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === "Enter") {
+            commit((e.target as HTMLInputElement).value);
+          } else if (e.key === "Escape") {
+            abort();
+          }
+        }}
+        @blur=${(e: Event) => commit((e.target as HTMLInputElement).value)}
+      />`,
+      host,
+    );
+    onRendered(() => {
+      const input = host.querySelector("input");
+      input?.focus();
+      input?.select();
+    });
+    return host;
+  };
+}
+
+function checkboxEditor(makeHost: HostFactory): CellEditorFn {
+  return (cell, onRendered, success, cancel) => {
+    const host = makeHost("jx-grid-editor");
+    let done = false;
+    render(
+      html`<input
+        class="jx-grid-checkbox"
+        type="checkbox"
+        .checked=${cell.getValue() === true}
+        @change=${(e: Event) => {
+          if (!done) {
+            done = true;
+            success((e.target as HTMLInputElement).checked);
+          }
+        }}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === "Escape" && !done) {
+            done = true;
+            cancel();
+          } else if (e.key === "Enter" && !done) {
+            done = true;
+            success((e.target as HTMLInputElement).checked);
+          }
+        }}
+        @blur=${(e: Event) => {
+          if (!done) {
+            done = true;
+            success((e.target as HTMLInputElement).checked);
+          }
+        }}
+      />`,
+      host,
+    );
+    onRendered(() => host.querySelector("input")?.focus());
+    return host;
+  };
+}
+
+function selectEditor(makeHost: HostFactory, column: GridColumn): CellEditorFn {
+  const options = Array.isArray(column.schema?.enum)
+    ? (column.schema.enum as unknown[]).map(String)
+    : [];
+  return (cell, onRendered, success, cancel) => {
+    const host = makeHost("jx-grid-editor");
+    let done = false;
+    const current = cellToText(cell.getValue() as GridCellValue);
+    render(
+      html`<select
+        class="jx-grid-select"
+        @change=${(e: Event) => {
+          if (!done) {
+            done = true;
+            const { value } = e.target as HTMLSelectElement;
+            success(value === "" ? null : value);
+          }
+        }}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === "Escape" && !done) {
+            done = true;
+            cancel();
+          }
+        }}
+        @blur=${() => {
+          if (!done) {
+            done = true;
+            cancel();
+          }
+        }}
+      >
+        <option value="" ?selected=${current === ""}>—</option>
+        ${options.map(
+          (option) =>
+            html`<option value=${option} ?selected=${option === current}>${option}</option>`,
+        )}
+      </select>`,
+      host,
+    );
+    onRendered(() => host.querySelector("select")?.focus());
+    return host;
+  };
+}
+
+/** Pill/chip editor for string arrays: Enter/comma adds, Backspace pops, × removes. */
+function pillEditor(makeHost: HostFactory, column: GridColumn): CellEditorFn {
+  return (cell, onRendered, success, cancel) => {
+    const host = makeHost("jx-grid-editor jx-grid-pill-editor");
+    const initial = coerceCellInput(cell.getValue(), column);
+    const chips: string[] = Array.isArray(initial) ? [...initial] : [];
+    let done = false;
+    const finish = (committed: string[] | null) => {
+      if (done) {
+        return;
+      }
+      done = true;
+      if (committed) {
+        success(committed);
+      } else {
+        cancel();
+      }
+    };
+    const inputEl = () => host.querySelector("input");
+    const addFromInput = (input: HTMLInputElement): boolean => {
+      const text = input.value.trim();
+      if (text === "") {
+        return false;
+      }
+      chips.push(text);
+      input.value = "";
+      return true;
+    };
+    const doRender = () => {
+      render(
+        html`<span class="jx-grid-pills">
+          ${chips.map(
+            (chip, i) => html`<span class="jx-grid-chip"
+              >${chip}<button
+                class="jx-grid-chip-x"
+                title="Remove"
+                @mousedown=${(e: Event) => e.preventDefault()}
+                @click=${() => {
+                  chips.splice(i, 1);
+                  doRender();
+                  inputEl()?.focus();
+                }}
+              >
+                ×
+              </button></span
+            >`,
+          )}
+          <input
+            class="jx-grid-pill-input"
+            placeholder=${chips.length === 0 ? "add…" : ""}
+            @keydown=${(e: KeyboardEvent) => {
+              const input = e.target as HTMLInputElement;
+              if (e.key === "Enter" || e.key === ",") {
+                e.preventDefault();
+                if (addFromInput(input)) {
+                  doRender();
+                  inputEl()?.focus();
+                } else if (e.key === "Enter") {
+                  finish([...chips]);
+                }
+              } else if (e.key === "Backspace" && input.value === "" && chips.length > 0) {
+                chips.pop();
+                doRender();
+                inputEl()?.focus();
+              } else if (e.key === "Escape") {
+                finish(null);
+              }
+            }}
+            @blur=${(e: Event) => {
+              addFromInput(e.target as HTMLInputElement);
+              finish([...chips]);
+            }}
+          />
+        </span>`,
+        host,
+      );
+    };
+    doRender();
+    onRendered(() => inputEl()?.focus());
+    return host;
+  };
+}
+
+/** Editor factory for a column; undefined means the column is not editable in place. */
+export function editorForColumn(
+  column: GridColumn,
+  makeHost: HostFactory,
+): CellEditorFn | undefined {
+  if (column.kind === "readonly" || (!column.editable && !column.insertOnly)) {
+    return undefined;
+  }
+  switch (column.kind) {
+    case "boolean": {
+      return checkboxEditor(makeHost);
+    }
+    case "enum": {
+      return selectEditor(makeHost, column);
+    }
+    case "date": {
+      return inputEditor(makeHost, column, "date");
+    }
+    case "array": {
+      return pillEditor(makeHost, column);
+    }
+    default: {
+      // String/text/number/image/reference — text input + column-typed coercion.
+      return inputEditor(makeHost, column, "text");
+    }
+  }
+}
+
+/** Formatter factory — plain-text projection rendered as a real element (innerHTML-safe). */
+export function formatterForColumn(column: GridColumn, makeHost: HostFactory): CellFormatterFn {
+  return (cell) => {
+    const value = cell.getValue() as GridCellValue;
+    const host = makeHost(`jx-grid-cell-content jx-grid-kind-${column.kind}`);
+    if (column.kind === "boolean") {
+      render(html`${value === true ? "✓" : ""}`, host);
+    } else if (column.kind === "array" && Array.isArray(value)) {
+      render(html`${value.map((item) => html`<span class="jx-grid-chip">${item}</span>`)}`, host);
+    } else {
+      render(html`${cellToText(value)}`, host);
+    }
+    return host;
+  };
+}