@jxsuite/studio 1.0.0 → 1.1.0

package/src/component-props.ts

@@ -0,0 +1,104 @@
+/**
+ * Component test props (M6) — the previewParams mirror for component docs. A non-instantiated
+ * component definition renders on the canvas with its state defaults; "test values" let the author
+ * pick per-prop values that the canvas render seeds into the definition's state, so templates,
+ * dataScope snapshots, and live/snapshot expression previews all see real data.
+ *
+ * Pure and DOM-free: {@link componentPropEntries} derives the editable prop rows from the doc's
+ * state (the same plain-data entries the CEM export publishes as fields), and
+ * {@link substitutePreviewProps} rebuilds a render doc with chosen values seeded — never mutating
+ * the source document (the substitutePreviewParams contract).
+ */
+
+import type { JsonValue } from "./types";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+/** One editable prop row: the state key and its current default value (undefined = none). */
+export interface ComponentPropEntry {
+  name: string;
+  value: JsonValue | undefined;
+}
+
+/** Whether the doc is a component definition (a custom-element root) rather than a page. */
+export function isComponentDoc(doc: JxMutableNode | null | undefined): boolean {
+  return typeof doc?.tagName === "string" && doc.tagName.includes("-");
+}
+
+/**
+ * Classify a state entry as a prop (plain data the CEM export publishes as a field): naked
+ * literals/arrays/objects and expanded/typed signal defs — never expressions, computeds, functions,
+ * templates, or $prototype data sources (overriding those would clobber behavior, the boundPropKey
+ * rule).
+ */
+function propShape(def: unknown): "literal" | "signal" | null {
+  if (def === null || typeof def === "number" || typeof def === "boolean") {
+    return "literal";
+  }
+  if (typeof def === "string") {
+    return def.includes("${") ? null : "literal"; // Template strings render computed values.
+  }
+  if (Array.isArray(def)) {
+    return "literal";
+  }
+  if (typeof def === "object") {
+    const d = def as Record<string, unknown>;
+    if (d.$expression || d.$compute || d.$prototype || d.$handler) {
+      return null;
+    }
+    // An expanded signal ({default}) or a typed prop def ({type}/schema keywords) seeds through
+    // Its `default`; any other plain object is a Shape-1 naked value.
+    return "default" in d || "type" in d ? "signal" : "literal";
+  }
+  return null;
+}
+
+/**
+ * The component's editable prop entries, derived from the doc's state — non-private plain-data
+ * entries with their current default values (the CEM-export "field" subset).
+ */
+export function componentPropEntries(doc: JxMutableNode | null | undefined): ComponentPropEntry[] {
+  const state = (doc?.state ?? {}) as Record<string, unknown>;
+  const out: ComponentPropEntry[] = [];
+  for (const [name, def] of Object.entries(state)) {
+    if (name.startsWith("#")) {
+      continue; // Private entries are not props (the CEM-export rule).
+    }
+    const shape = propShape(def);
+    if (!shape) {
+      continue;
+    }
+    const value =
+      shape === "signal"
+        ? ((def as { default?: JsonValue }).default as JsonValue | undefined)
+        : (def as JsonValue);
+    out.push({ name, value });
+  }
+  return out;
+}
+
+/**
+ * Rebuild `renderDoc` with the chosen test-prop values seeded into its state: a literal entry is
+ * replaced by the value; a signal/typed entry keeps its metadata and gets the value as `default`
+ * (exactly what buildScope reads). Pure — returns a shallow rebuild; the render doc shares node
+ * references with the tab's source document, so in-place mutation would corrupt the edited doc.
+ */
+export function substitutePreviewProps(
+  renderDoc: JxMutableNode,
+  props: Record<string, JsonValue>,
+): JxMutableNode {
+  const state = { ...((renderDoc.state ?? {}) as Record<string, unknown>) };
+  let seeded = false;
+  for (const [name, value] of Object.entries(props)) {
+    const shape = propShape(state[name]);
+    if (!shape) {
+      continue; // Unknown/behavioral entries are never overridden by a stale test value.
+    }
+    state[name] =
+      shape === "signal" ? { ...(state[name] as Record<string, unknown>), default: value } : value;
+    seeded = true;
+  }
+  if (!seeded) {
+    return renderDoc;
+  }
+  return { ...renderDoc, state } as JxMutableNode;
+}

package/src/editor/inline-edit-apply.ts

@@ -9,7 +9,12 @@
 
 import { childIndex, getNodeAtPath, parentElementPath } from "../store";
 import { isTabActive } from "../workspace/workspace";
-import { mutateInsertNode, mutateUpdateProperty, transactDoc } from "../tabs/transact";
+import {
+  mutateInsertNode,
+  mutateUpdateProp,
+  mutateUpdateProperty,
+  transactDoc,
+} from "../tabs/transact";
 import { defaultDef } from "../panels/shared";
 
 import type { JxContentResult, SlashCommand } from "./inline-edit";
@@ -83,6 +88,36 @@ export function applyInlineCommit(
   }
 }
 
+/**
+ * Commit a prop-bound inline edit: persist `value` into `$props[prop]` of the component instance at
+ * `path`. The unchanged-value no-op is LOAD-BEARING, not cosmetic: Escape-cancel and
+ * patch-disturbed sessions post unchanged values, and without the equality check a commit→patch→
+ * disturb→re-commit cycle loops (and pollutes undo history). An empty value deletes the prop
+ * (mutateUpdateProp), reverting the instance to the definition default — same as clearing the
+ * sidebar field.
+ */
+export function applyInlinePropCommit(
+  tab: Tab | null,
+  path: JxPath,
+  prop: string,
+  value: string,
+): void {
+  if (!tab) {
+    return;
+  }
+  const node = getNodeAtPath(tab.doc.document, path);
+  if (!node) {
+    return;
+  }
+  const current = (node.$props as Record<string, unknown> | undefined)?.[prop];
+  if (`${current ?? ""}` === value) {
+    return;
+  }
+  transactDoc(tab, (t) => {
+    mutateUpdateProp(t, path, prop, value);
+  });
+}
+
 /**
  * Apply a paragraph split to `tab`'s document: keep `before` in the node, insert a new `<p>` with
  * `after`. Returns its path (unchanged when `tab` is gone — the caller may still use it for

package/src/editor/inline-edit.ts

@@ -193,6 +193,15 @@ let endFn: (() => void) | null = null; // Function() called when editing stops
  */
 let _blurCloseSuspended = false;
 
+/**
+ * Plain (plaintext-only) session state — used for prop-bound text, where the committed value is a
+ * plain string (a directive attribute), so rich formatting, Enter-split, and the slash menu are all
+ * disabled: Enter commits, Escape restores `_plainOriginal` and commits unchanged (the host no-ops
+ * an unchanged prop value).
+ */
+let _plainMode = false;
+let _plainOriginal = "";
+
 /** Suspend blur-driven `stopEditing` (call while the parent toolbar/popover may steal focus). */
 export function suspendBlurClose() {
   _blurCloseSuspended = true;
@@ -252,6 +261,8 @@ export function isInlineElement(node: JxMutableNode, parentNode?: JxMutableNode)
  *   onInsert: (path: JxPath, elementDef: SlashCommand, commitData?: JxContentResult) => void;
  *   onEnd: () => void;
  * }} callbacks
+ * @param {{ plainText?: boolean }} [opts] - `plainText` runs a plaintext-only session (prop-bound
+ *   text: no rich formatting/split/slash; Enter commits, Escape cancels)
  */
 export function startEditing(
   el: HTMLElement,
@@ -270,6 +281,7 @@ export function startEditing(
     onInsert: (path: JxPath, elementDef: SlashCommand, commitData?: JxContentResult) => void;
     onEnd: () => void;
   },
+  opts?: { plainText?: boolean },
 ) {
   if (activeEl) {
     // Re-enter (e.g. after a split/insert re-render): tear the old session down WITHOUT firing the
@@ -283,9 +295,21 @@ export function startEditing(
   splitFn = callbacks.onSplit;
   insertFn = callbacks.onInsert;
   endFn = callbacks.onEnd;
+  _plainMode = opts?.plainText === true;
+  _plainOriginal = _plainMode ? (el.textContent ?? "") : "";
 
   // Enable editing
-  el.contentEditable = "true";
+  if (_plainMode) {
+    try {
+      el.contentEditable = "plaintext-only";
+    } catch {
+      // Engines without plaintext-only support throw on assignment; paste is already plain via
+      // HandlePaste, and the keydown plain branch inertifies the format shortcuts.
+      el.contentEditable = "true";
+    }
+  } else {
+    el.contentEditable = "true";
+  }
   el.style.pointerEvents = "auto";
   el.style.outline = "2px solid var(--accent, #4a9eff)";
   el.style.outlineOffset = "1px";
@@ -338,6 +362,8 @@ export function stopEditing(silent = false) {
   commitFn = null;
   splitFn = null;
   insertFn = null;
+  _plainMode = false;
+  _plainOriginal = "";
 
   if (silent) {
     endFn = null;
@@ -389,6 +415,30 @@ export function isSlashActive() {
 
 /** @param {KeyboardEvent} e */
 function handleKeydown(e: KeyboardEvent) {
+  if (_plainMode) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (activeEl) {
+        // Cancel: restore the original text; the commit posts the unchanged value (host no-ops).
+        activeEl.textContent = _plainOriginal;
+      }
+      stopEditing();
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      stopEditing();
+      return;
+    }
+    // Inertify the browser's native rich shortcuts for the contentEditable="true" fallback.
+    if ((e.ctrlKey || e.metaKey) && ["b", "i", "u", "`"].includes(e.key)) {
+      e.preventDefault();
+    }
+    return;
+  }
+
   if (e.key === "Escape") {
     e.preventDefault();
     e.stopPropagation();
@@ -551,6 +601,13 @@ function commitChanges() {
     return;
   }
 
+  if (_plainMode) {
+    // A prop value is a plain single-line string (a directive attribute) — flatten any newline
+    // That survived plaintext editing and skip the rich DOM→Jx serialization entirely.
+    commitFn(activePath, null, (activeEl.textContent ?? "").replaceAll("\n", " "));
+    return;
+  }
+
   normalizeInlineContent(activeEl);
   const result = elementToJx(activeEl);
   commitFn(activePath, result.children ?? null, result.textContent ?? null);

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,7 +27,16 @@ 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,
@@ -98,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);
@@ -160,6 +174,7 @@ export async function openProject({
       searchQuery: "",
       selectedPath: null,
     });
+    setWorkspaceProject(handle.root, config);
 
     await autoSyncProjectOnOpen();
     await ensureDependenciesInstalled();
@@ -719,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" },
@@ -1032,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);