@jxsuite/studio 1.0.0 → 1.1.0

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;
+  };
+}

package/src/grid/cell-popovers.ts

@@ -0,0 +1,108 @@
+/**
+ * Popover cell editors — media paths and relationship pickers.
+ *
+ * These kinds bypass Tabulator's in-cell editor session entirely: their pickers render Spectrum
+ * overlays OUTSIDE the cell, which Tabulator's range module treats as an outside interaction and
+ * blur-cancels. Instead, a dblclick on the cell opens an anchored layer popover that writes
+ * straight through the edit buffer via `commit`.
+ */
+import { html, nothing } from "lit-html";
+import { renderPopover } from "../ui/layers";
+import { renderMediaPicker } from "../ui/media-picker";
+import { listCollectionEntryIds } from "./sources/content-source";
+import { cellToText } from "./schema-columns";
+import type { GridCellValue, GridColumn } from "./grid-source";
+
+/** Whether this column edits through an anchored popover instead of an in-cell editor. */
+export function hasPopoverEditor(column: GridColumn): boolean {
+  return column.kind === "image" || column.kind === "reference";
+}
+
+/** Target content-type name of a relationship column (`#/content/<name>` on the schema). */
+export function referenceTargetType(column: GridColumn): string | null {
+  const ref = (column.schema as { $ref?: string } | undefined)?.$ref;
+  if (typeof ref !== "string" || !ref.startsWith("#/content/")) {
+    return null;
+  }
+  return ref.slice("#/content/".length);
+}
+
+export interface CellPopoverArgs {
+  /** Viewport rect of the cell the popover anchors to. */
+  anchor: { left: number; bottom: number };
+  column: GridColumn;
+  value: GridCellValue;
+  /** Write the new value through the edit buffer (called on every pick/commit). */
+  commit: (value: GridCellValue) => void;
+}
+
+function popoverShell(
+  column: GridColumn,
+  anchor: CellPopoverArgs["anchor"],
+  body: unknown,
+  dismiss: () => void,
+) {
+  const left = Math.max(4, Math.min(anchor.left, window.innerWidth - 340));
+  const top = Math.max(4, Math.min(anchor.bottom + 2, window.innerHeight - 200));
+  return html`<sp-popover
+    open
+    class="jx-grid-cell-popover"
+    style="position:fixed;z-index:10000;left:${left}px;top:${top}px"
+  >
+    <div class="jx-grid-cell-popover-body">
+      <div class="jx-grid-cell-popover-title">${column.title}</div>
+      ${body}
+      <div class="jx-grid-cell-popover-actions">
+        <sp-button size="s" variant="secondary" @click=${dismiss}>Done</sp-button>
+      </div>
+    </div>
+  </sp-popover>`;
+}
+
+/**
+ * Open the popover editor for an image or reference cell. Resolves target-entry ids up front for
+ * relationship columns so the picker renders complete.
+ */
+export async function openCellValuePopover(args: CellPopoverArgs): Promise<void> {
+  const { anchor, column, commit, value } = args;
+  const current = cellToText(value);
+
+  let body;
+  if (column.kind === "reference") {
+    const targetType = referenceTargetType(column);
+    const ids = targetType ? await listCollectionEntryIds(targetType) : [];
+    body = html`
+      ${targetType
+        ? html`<div class="jx-grid-cell-popover-hint">Entries of “${targetType}”</div>`
+        : nothing}
+      <select
+        class="jx-grid-select"
+        @change=${(e: Event) => {
+          const picked = (e.target as HTMLSelectElement).value;
+          commit(picked === "" ? null : picked);
+        }}
+      >
+        <option value="" ?selected=${current === ""}>—</option>
+        ${ids.map((id) => html`<option value=${id} ?selected=${id === current}>${id}</option>`)}
+      </select>
+      <input
+        class="jx-grid-input"
+        placeholder="Custom id…"
+        .value=${ids.includes(current) ? "" : current}
+        @change=${(e: Event) => {
+          const text = (e.target as HTMLInputElement).value.trim();
+          commit(text === "" ? null : text);
+        }}
+      />
+    `;
+  } else {
+    body = renderMediaPicker(column.field, current, (val) => {
+      commit(val === "" ? null : val);
+    });
+  }
+
+  const handle = renderPopover(
+    popoverShell(column, anchor, body, () => handle.dismiss()),
+    { dismissOnOutsideClick: true },
+  );
+}

package/src/grid/csv-codec.ts

@@ -0,0 +1,122 @@
+/**
+ * Positional CSV codec for the grid editor.
+ *
+ * RFC 4180 parse/serialize that keeps what the parser extension's object-row loader discards:
+ * column order, duplicate/empty headers, untrimmed whitespace, the file's dominant EOL, and whether
+ * it ended with a newline. Values stay raw strings — typing lives in schema-columns. Serialization
+ * is canonical (quotes only where required), so an edited file is re-emitted minimally quoted;
+ * untouched files are never rewritten.
+ */
+
+export interface CsvDocument {
+  headers: string[];
+  rows: string[][];
+  eol: "\n" | "\r\n";
+  trailingNewline: boolean;
+}
+
+/** Split CSV text into records of raw fields, honoring quotes across commas and newlines. */
+function splitRecords(text: string): string[][] {
+  const records: string[][] = [];
+  let fields: string[] = [];
+  let field = "";
+  let inQuotes = false;
+  let fieldStarted = false;
+
+  const endField = () => {
+    fields.push(field);
+    field = "";
+    fieldStarted = false;
+  };
+  const endRecord = () => {
+    endField();
+    // A completely empty line is structure, not data — skip it (common trailing-blank case).
+    if (fields.length === 1 && fields[0] === "") {
+      fields = [];
+      return;
+    }
+    records.push(fields);
+    fields = [];
+  };
+
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (inQuotes) {
+      if (ch === '"') {
+        if (text[i + 1] === '"') {
+          field += '"';
+          i += 1;
+        } else {
+          inQuotes = false;
+        }
+      } else {
+        field += ch;
+      }
+      continue;
+    }
+    if (ch === '"' && !fieldStarted) {
+      inQuotes = true;
+      fieldStarted = true;
+    } else if (ch === '"') {
+      // Quote inside an unquoted field — keep it literal (lenient, matches common parsers).
+      field += ch;
+    } else if (ch === ",") {
+      endField();
+    } else if (ch === "\n") {
+      endRecord();
+    } else if (ch === "\r") {
+      if (text[i + 1] === "\n") {
+        i += 1;
+      }
+      endRecord();
+    } else {
+      field += ch;
+      fieldStarted = true;
+    }
+  }
+  if (field !== "" || fields.length > 0) {
+    endRecord();
+  }
+  return records;
+}
+
+/**
+ * Parse CSV text into headers + positional rows. Rows are padded to the header width; when a data
+ * row is wider than the header row, headers are padded with "" so no column is lost.
+ */
+export function parseCsv(text: string): CsvDocument {
+  const crlf = (text.match(/\r\n/g) ?? []).length;
+  const bareLf = (text.match(/(?<!\r)\n/g) ?? []).length;
+  const eol: CsvDocument["eol"] = crlf > bareLf ? "\r\n" : "\n";
+  const trailingNewline = text.endsWith("\n");
+
+  const records = splitRecords(text);
+  const headers = records[0] ?? [];
+  const rows = records.slice(1);
+  const width = Math.max(headers.length, ...rows.map((r) => r.length), 0);
+  while (headers.length < width) {
+    headers.push("");
+  }
+  for (const row of rows) {
+    while (row.length < width) {
+      row.push("");
+    }
+  }
+  return { eol, headers, rows, trailingNewline };
+}
+
+/** Quote a field iff it contains a delimiter, quote, or newline; double embedded quotes. */
+function encodeField(value: string): string {
+  if (/[",\n\r]/.test(value)) {
+    return `"${value.replaceAll('"', '""')}"`;
+  }
+  return value;
+}
+
+/** Serialize back to CSV text, preserving the document's EOL flavor and trailing-newline flag. */
+export function serializeCsv(doc: CsvDocument): string {
+  const lines = [doc.headers, ...doc.rows].map((fields) =>
+    fields.map((field) => encodeField(field)).join(","),
+  );
+  return lines.join(doc.eol) + (doc.trailingNewline ? doc.eol : "");
+}