@jxsuite/studio 1.0.0 → 1.1.0

package/src/grid/sources/csv-file-source.ts

@@ -0,0 +1,247 @@
+/**
+ * CSV file grid source — one `.csv` project file edited as a grid.
+ *
+ * The file loads once into a positional string matrix (csv-codec). Columns are typed by the
+ * matching content-type schema when the CSV backs a collection (same resolver as the head panel),
+ * otherwise inferred by sampling values. Commit is atomic whole-file: pending edits are applied to
+ * the matrix, the document is re-serialized, and a save-time staleness check (file text vs. the
+ * load-time text) aborts the entire commit rather than clobber an external change. Only edited
+ * cells are canonicalized — untouched cells keep their raw file text.
+ */
+import { getPlatform } from "../../platform";
+import { projectState } from "../../store";
+import { findContentTypeSchema } from "../../utils/studio-utils";
+import { isRecentLocal, markLocalMutation } from "../../files/fs-events";
+import { parseCsv, serializeCsv } from "../csv-codec";
+import {
+  cellToText,
+  coerceCellInput,
+  columnsFromSchema,
+  inferColumnsFromRows,
+} from "../schema-columns";
+import type { CsvDocument } from "../csv-codec";
+import type {
+  CommitResult,
+  GridCellValue,
+  GridColumn,
+  GridEditBatch,
+  GridRow,
+  GridRowsResult,
+  GridSource,
+} from "../grid-source";
+
+/** Candidate identity columns, in the parser extension's fallback order. */
+const ID_FIELDS = ["id", "sku", "slug", "Slug"];
+
+interface CsvModel {
+  doc: CsvDocument;
+  /** Unique field name per column position (duplicate/empty headers get positional names). */
+  fields: string[];
+  columns: GridColumn[];
+  /** Map of rowKey → matrix row index. */
+  keyToIndex: Map<string, number>;
+  /** Matrix row index → rowKey. */
+  keys: string[];
+  /** File text at load time — the whole-file staleness fingerprint. */
+  loadText: string;
+}
+
+/** Unique grid field names for CSV headers (duplicates/empties fall back to positional names). */
+export function fieldNamesForHeaders(headers: string[]): string[] {
+  const used = new Set<string>();
+  return headers.map((header, i) => {
+    let name = header.trim() === "" ? `column${i + 1}` : header;
+    if (used.has(name)) {
+      name = `${name}__${i + 1}`;
+    }
+    used.add(name);
+    return name;
+  });
+}
+
+/** Pick the identity column: first id-chain field whose values are all unique and non-empty. */
+function pickIdField(fields: string[], doc: CsvDocument): string | null {
+  for (const candidate of ID_FIELDS) {
+    const idx = fields.indexOf(candidate);
+    if (idx === -1) {
+      continue;
+    }
+    const values = doc.rows.map((row) => row[idx] ?? "");
+    if (values.every((v) => v !== "") && new Set(values).size === values.length) {
+      return candidate;
+    }
+  }
+  return null;
+}
+
+function buildModel(text: string, path: string): CsvModel {
+  const doc = parseCsv(text);
+  const fields = fieldNamesForHeaders(doc.headers);
+  const idField = pickIdField(fields, doc);
+  const idIndex = idField ? fields.indexOf(idField) : -1;
+  const keys = doc.rows.map((row, i) => (idIndex === -1 ? String(i) : row[idIndex]!));
+  const keyToIndex = new Map(keys.map((key, i) => [key, i]));
+
+  // Typed columns when this CSV is a collection source; sniffed kinds otherwise.
+  const contentType = findContentTypeSchema(path, projectState?.projectConfig);
+  const schemaProps = contentType?.schema?.properties ?? {};
+  const sampleRows = doc.rows.slice(0, 50).map((row) => {
+    const cells: Record<string, GridCellValue> = {};
+    for (const [i, field] of fields.entries()) {
+      cells[field] = row[i] ?? "";
+    }
+    return cells;
+  });
+  const inferred = new Map(inferColumnsFromRows(sampleRows).map((c) => [c.field, c]));
+  const typed = new Map(
+    columnsFromSchema(contentType?.schema, { idField: idField ?? undefined }).map((c) => [
+      c.field,
+      c,
+    ]),
+  );
+
+  const columns = fields.map((field, i): GridColumn => {
+    const fromSchema = field in schemaProps ? typed.get(field) : undefined;
+    const column = fromSchema ??
+      inferred.get(field) ?? {
+        editable: true,
+        field,
+        kind: "string" as const,
+        title: doc.headers[i] || field,
+      };
+    return { ...column, pk: field === idField, title: doc.headers[i]?.trim() || column.title };
+  });
+
+  return { columns, doc, fields, keys, keyToIndex, loadText: text };
+}
+
+/** Typed cell values for one matrix row. */
+function rowCells(model: CsvModel, rowIndex: number): Record<string, GridCellValue> {
+  const cells: Record<string, GridCellValue> = {};
+  const row = model.doc.rows[rowIndex] ?? [];
+  for (const [i, field] of model.fields.entries()) {
+    const column = model.columns[i]!;
+    const raw = row[i] ?? "";
+    cells[field] =
+      column.kind === "string" || column.kind === "text" || column.kind === "readonly"
+        ? raw
+        : coerceCellInput(raw, column);
+  }
+  return cells;
+}
+
+/** Apply a batch to a copy of the matrix (cells, then inserts, then deletes). */
+function applyBatch(model: CsvModel, batch: GridEditBatch): CsvDocument {
+  const rows = model.doc.rows.map((row) => [...row]);
+  const colFor = (field: string) => model.fields.indexOf(field);
+
+  for (const cell of batch.cells) {
+    const rowIndex = model.keyToIndex.get(cell.rowKey);
+    const colIndex = colFor(cell.field);
+    if (rowIndex === undefined || colIndex === -1) {
+      continue;
+    }
+    rows[rowIndex]![colIndex] = cellToText(cell.value);
+  }
+  for (const insert of batch.inserts) {
+    const row = model.fields.map((field) => cellToText(insert.cells[field] ?? null));
+    rows.push(row);
+  }
+  const dropIndexes = batch.deletes
+    .map((del) => model.keyToIndex.get(del.rowKey))
+    .filter((i): i is number => i !== undefined)
+    .toSorted((a, b) => b - a);
+  for (const index of dropIndexes) {
+    rows.splice(index, 1);
+  }
+  return { ...model.doc, rows };
+}
+
+/** All batch items resolved with one shared outcome (whole-file commits are atomic). */
+function uniformResult(
+  batch: GridEditBatch,
+  outcome: { ok: boolean; error?: string; stale?: boolean },
+): CommitResult {
+  return {
+    cells: batch.cells.map((c) => ({ field: c.field, rowKey: c.rowKey, ...outcome })),
+    deletes: batch.deletes.map((d) => ({ rowKey: d.rowKey, ...outcome })),
+    inserts: batch.inserts.map((i) => ({
+      error: outcome.error,
+      ok: outcome.ok,
+      tempKey: i.tempKey,
+    })),
+  };
+}
+
+/** Create the grid source for one CSV file. The tab id is the file path. */
+export function createCsvFileSource(path: string): GridSource {
+  let loadPromise: Promise<CsvModel> | null = null;
+
+  const load = (force = false): Promise<CsvModel> => {
+    if (!force && loadPromise) {
+      return loadPromise;
+    }
+    loadPromise = getPlatform()
+      .readFile(path)
+      .then((text) => buildModel(text, path));
+    return loadPromise;
+  };
+
+  return {
+    backingPaths: () => new Map([[path, "*"]]),
+    capabilities: { delete: true, insert: true, remotePaging: false, remoteSort: false },
+
+    async columns(): Promise<GridColumn[]> {
+      const current = await load();
+      return current.columns;
+    },
+
+    async commit(batch: GridEditBatch): Promise<CommitResult> {
+      const current = await load();
+      const platform = getPlatform();
+
+      // Whole-file staleness: abort if the file changed under us (and it wasn't our own write).
+      let onDisk: string | null = null;
+      try {
+        onDisk = await platform.readFile(path);
+      } catch {
+        onDisk = null; // Deleted underneath — treat as stale.
+      }
+      if (onDisk !== current.loadText && !isRecentLocal(path)) {
+        return uniformResult(batch, {
+          error: "File changed on disk — refresh to reload",
+          ok: false,
+          stale: true,
+        });
+      }
+
+      const nextDoc = applyBatch(current, batch);
+      const text = serializeCsv(nextDoc);
+      markLocalMutation(path);
+      await platform.writeFile(path, text);
+      loadPromise = Promise.resolve(buildModel(text, path));
+      return uniformResult(batch, { ok: true });
+    },
+
+    id: path,
+    label: path.split("/").pop() ?? path,
+
+    async refresh(): Promise<void> {
+      await load(true);
+    },
+
+    async rows(): Promise<GridRowsResult> {
+      const current = await load();
+      const rows: GridRow[] = current.doc.rows.map((_, i) => ({
+        cells: rowCells(current, i),
+        key: current.keys[i]!,
+      }));
+      return { rows, total: rows.length };
+    },
+
+    async serializeForSource(batch: GridEditBatch): Promise<string> {
+      const current = await load();
+      return serializeCsv(applyBatch(current, batch));
+    },
+  };
+}

package/src/grid/tabulator-tables.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Minimal ambient types for tabulator-tables 6.x — the package ships no declarations. Only the
+ * surface grid-view.ts touches is typed; extend here as usage grows.
+ */
+declare module "tabulator-tables" {
+  export interface CellComponent {
+    getValue: () => unknown;
+    getField: () => string;
+    getElement: () => HTMLElement;
+    getRow: () => RowComponent;
+    setValue: (value: unknown, mutate?: boolean) => void;
+  }
+
+  export interface RowComponent {
+    getData: () => Record<string, unknown>;
+    getElement: () => HTMLElement;
+    getCells: () => CellComponent[];
+    reformat: () => void;
+  }
+
+  export interface RangeComponent {
+    getRows: () => RowComponent[];
+    getCells: () => CellComponent[][];
+  }
+
+  export interface ColumnComponent {
+    getField: () => string;
+    getWidth: () => number;
+  }
+
+  export type CellEditor = (
+    cell: CellComponent,
+    onRendered: (fn: () => void) => void,
+    success: (value: unknown) => void,
+    cancel: () => void,
+  ) => HTMLElement | false;
+
+  export type CellFormatter = (
+    cell: CellComponent,
+    formatterParams: Record<string, unknown>,
+    onRendered: (fn: () => void) => void,
+  ) => HTMLElement | string;
+
+  export interface ColumnDefinition {
+    title: string;
+    field?: string | undefined;
+    width?: number | undefined;
+    frozen?: boolean | undefined;
+    editor?: CellEditor | undefined;
+    editable?: boolean | ((cell: CellComponent) => boolean) | undefined;
+    formatter?: CellFormatter | undefined;
+    sorter?: string | ((a: unknown, b: unknown) => number) | undefined;
+    headerSort?: boolean | undefined;
+    headerFilter?: string | undefined;
+    cssClass?: string | undefined;
+    resizable?: boolean | string | undefined;
+    headerSortTristate?: boolean | undefined;
+  }
+
+  export interface Options {
+    data?: Record<string, unknown>[];
+    columns?: ColumnDefinition[];
+    index?: string;
+    layout?: string;
+    height?: string | number;
+    renderVertical?: string;
+    renderHorizontal?: string;
+    history?: boolean;
+    reactiveData?: boolean;
+    editTriggerEvent?: string;
+    headerSortClickElement?: string;
+    selectableRange?: number | boolean;
+    selectableRangeColumns?: boolean;
+    selectableRangeRows?: boolean;
+    selectableRangeClearCells?: boolean;
+    selectableRangeClearCellsValue?: unknown;
+    clipboard?: boolean;
+    clipboardCopyStyled?: boolean;
+    clipboardCopyConfig?: Record<string, unknown>;
+    clipboardCopyRowRange?: string;
+    clipboardPasteParser?: string;
+    clipboardPasteAction?: string;
+    movableColumns?: boolean;
+    columnDefaults?: Partial<ColumnDefinition>;
+    rowFormatter?: (row: RowComponent) => void;
+    placeholder?: string;
+  }
+
+  export class Tabulator {
+    constructor(host: HTMLElement, options: Options);
+    static registerModule(modules: unknown[]): void;
+    on(event: string, callback: (...args: never[]) => void): void;
+    replaceData(data: Record<string, unknown>[]): Promise<void>;
+    getRows(activeOnly?: string): RowComponent[];
+    getRanges(): RangeComponent[];
+    setFilter(filter: (data: Record<string, unknown>) => boolean): void;
+    clearFilter(includeHeaderFilters?: boolean): void;
+    redraw(force?: boolean): void;
+    destroy(): void;
+  }
+
+  export const EditModule: unknown;
+  export const FormatModule: unknown;
+  export const SortModule: unknown;
+  export const FilterModule: unknown;
+  export const ResizeColumnsModule: unknown;
+  export const MoveColumnsModule: unknown;
+  export const FrozenColumnsModule: unknown;
+  export const SelectRangeModule: unknown;
+  export const ClipboardModule: unknown;
+  export const ExportModule: unknown;
+  export const KeybindingsModule: unknown;
+  export const InteractionModule: unknown;
+  export const TooltipModule: unknown;
+}
+
+declare module "tabulator-tables/dist/css/tabulator.min.css" {
+  const css: unknown;
+  export default css;
+}

package/src/panels/block-action-bar.ts

@@ -606,10 +606,12 @@ export function renderBlockActionBar() {
   const tag = (node.tagName ?? "div").toLowerCase();
 
   // Inline format state, sourced from the iframe's selection snapshot.
-  const { editing, snapshot } = getEditSnapshot();
+  const { editing, editingProp, snapshot } = getEditSnapshot();
   const inlineEditing = editing;
   const actions = getInlineActions(tag) || [];
-  const showFormat = inlineEditing && actions.length > 0;
+  // A prop-bound plain session edits a single plain string — never show the format group (belt and
+  // Braces: component tags have no $inlineActions, so `actions` is empty there anyway).
+  const showFormat = inlineEditing && !editingProp && actions.length > 0;
   const activeValues =
     showFormat && snapshot
       ? actions.filter((a) => snapshot.activeTags.includes(a.tag)).map((a) => a.tag)
@@ -646,7 +648,10 @@ export function renderBlockActionBar() {
           @click=${badgeInteractive
             ? (e: MouseEvent) => onTagBadgeClick(e, convertTargets, selection)
             : nothing}
-          >${isRepeater ? nodeLabel(node) : node.$id || (node.tagName ?? "div")}</span
+          >${isRepeater ? nodeLabel(node) : node.$id || (node.tagName ?? "div")}${inlineEditing &&
+          editingProp
+            ? ` · ${editingProp}`
+            : ""}</span
         >
 
         ${selection.length >= 2

package/src/panels/chat-panel.ts

@@ -0,0 +1,98 @@
+/// <reference lib="dom" />
+/**
+ * Chat-panel.ts — the persistent AI chat sidebar (`#chat-panel` shell region).
+ *
+ * Hosts the assistant UI from ai-panel.ts unconditionally: with no project (welcome screen), with a
+ * project but no open document, and with a document open. The panel is mounted once at studio boot
+ * and never tears down on tab switches — the assistant's module state and DOM (composer draft,
+ * scroll position) persist.
+ *
+ * Deliberately NOT built on createPanelScheduler: ai-panel owns a focus-guard-free rAF render loop
+ * (streaming must repaint while the composer is focused). This module only provides the host
+ * container, the initial paint, and the pending-agent-prompt handoff; ai-panel's watcher drives all
+ * chat-state repaints through the same lit part cache.
+ *
+ * @license MIT
+ */
+
+import { render as litRender } from "lit-html";
+import { effect, effectScope } from "../reactivity";
+import { applyPanelCollapse, view } from "../view";
+import { workspace } from "../workspace/workspace";
+import { consumePendingAgentPrompt, hasPendingAgentPrompt } from "../services/agent-seed";
+import {
+  bindAiPanelHost,
+  mountAiPanel,
+  renderAiPanelTemplate,
+  seedAssistantPrompt,
+} from "./ai-panel";
+
+import type { EffectScope } from "@vue/reactivity";
+
+let _host: HTMLElement | null = null;
+let _container: HTMLElement | null = null;
+let _scope: EffectScope | null = null;
+
+/**
+ * Mount the chat sidebar into its shell region. Idempotent per host: the persistent `.panel-body`
+ * container is created once and bound as the ai-panel render host (lit needs a single render target
+ * for its part cache). A missing host (shell without a #chat-panel region, e.g. reduced test
+ * fixtures) is a no-op.
+ *
+ * @param {HTMLElement | null} host
+ */
+export function mount(host: HTMLElement | null) {
+  if (!host || (_host === host && _container)) {
+    return;
+  }
+  _host = host;
+  _container = document.createElement("div");
+  _container.className = "panel-body";
+  host.textContent = "";
+  host.append(_container);
+
+  mountAiPanel();
+  // The AI panel owns a focus-guard-free rAF render loop into this container so
+  // Streaming repaints while the composer is focused (see ai-panel.ts).
+  bindAiPanelHost(_container);
+  render();
+
+  _scope?.stop();
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      // A pending agent prompt (stored by the New Project flow, possibly from another window) is
+      // Keyed by the absolute project root — consume it as soon as this window adopts that root.
+      const root = workspace.projectRoot;
+      if (!root || !hasPendingAgentPrompt(root)) {
+        return;
+      }
+      if (view.chatPanelCollapsed) {
+        view.chatPanelCollapsed = false;
+        applyPanelCollapse();
+      }
+      const prompt = consumePendingAgentPrompt(root);
+      if (prompt) {
+        // Defer past the current render so the assistant machinery is in place before the send.
+        requestAnimationFrame(() => void seedAssistantPrompt(prompt));
+      }
+    });
+  });
+}
+
+export function unmount() {
+  _scope?.stop();
+  _scope = null;
+  if (_host) {
+    _host.textContent = "";
+  }
+  _host = null;
+  _container = null;
+}
+
+/** Repaint the assistant template into the persistent container (no-op before mount). */
+export function render() {
+  if (_container) {
+    litRender(renderAiPanelTemplate(), _container);
+  }
+}