@jxsuite/studio 2.0.1 → 2.1.0

package/src/panels/data-explorer.ts

@@ -2,11 +2,93 @@
 // ─── Data Explorer ──────────────────────────────────────────────────────────
 
 import { html, nothing } from "lit-html";
-import { classMap } from "lit-html/directives/class-map.js";
 import type { TemplateResult } from "lit-html";
+import { activeTab } from "../workspace/workspace";
+import { renderOnly } from "../store";
+import { booleanArg, stringArg, stringProperty } from "../commands/command-args";
+import { registerPanel } from "./panel-registry";
+import type { AnyCommand, CommandRegistry } from "../commands/registry";
 
-/** Expanded data entries set — persists across renders. */
-const expandedDataKeys = new Set();
+/**
+ * The focused tab's expansion record, created on first write.
+ *
+ * `ui.dataRows` rather than a module Set: expansion is a property of the document you are reading,
+ * and a module-global one followed you to the next tab and showed rows open that that document does
+ * not define.
+ */
+function rowsUi(): Record<string, boolean> | null {
+  const ui = activeTab.value?.session.ui;
+  if (!ui) {
+    return null;
+  }
+  return (ui.dataRows ??= {});
+}
+
+/*
+ * ── The truncation markers, which are now BUTTONS ────────────────────────────
+ *
+ * The tree caps arrays at 20, objects at 30 and depth at 5, and printed "… 5 more" as inert text.
+ * That is the panel telling you it has the answer and will not show it — the exact case a user
+ * opens this panel for is the fetch that returned something unexpected at item 40. Plan §11.2:
+ * "truncation markers gain real expand actions."
+ *
+ * Raising a limit is remembered per marker rather than globally, so opening one long array does not
+ * re-render every other one at full length, and it never lowers: a step is a step.
+ */
+const MORE_STEP = 50;
+
+/** The focused tab's raised-limit record, created on first write. */
+function limitsUi(): Record<string, number> | null {
+  const ui = activeTab.value?.session.ui;
+  if (!ui) {
+    return null;
+  }
+  return (ui.dataLimits ??= {});
+}
+
+/** The cap for one marker: the default, plus whatever the reader has asked for. */
+function capFor(path: string, kind: "items" | "keys" | "depth", base: number): number {
+  return base + (limitsUi()?.[`${path}\u0000${kind}`] ?? 0);
+}
+
+/** Raise one marker's limit by a step. Exported for the tests. */
+export function raiseDataLimit(path: string, kind: "items" | "keys" | "depth"): void {
+  const limits = limitsUi();
+  if (!limits) {
+    return;
+  }
+  const key = `${path}\u0000${kind}`;
+  limits[key] = (limits[key] ?? 0) + MORE_STEP;
+}
+
+/**
+ * One truncation marker: a button that shows more of what is already in hand.
+ *
+ * It repaints through `renderOnly("leftPanel")` rather than a callback, because this renderer is
+ * called from three places and threading a repaint through all of them to reach one `<button>`
+ * would put a required callback on a pure formatter.
+ */
+function moreTemplate(
+  path: string,
+  kind: "items" | "keys" | "depth",
+  indent: string,
+  label: string,
+  after?: () => string,
+) {
+  return html`<button
+    type="button"
+    class="data-leaf data-ellipsis data-more"
+    style="padding-left:${indent}"
+    title=${after?.() ?? `Show ${MORE_STEP} more`}
+    @click=${(e: Event) => {
+      e.stopPropagation();
+      raiseDataLimit(path, kind);
+      renderOnly("leftPanel");
+    }}
+  >
+    ${label}
+  </button>`;
+}
 
 /** Unwrap a Vue ref (has .value and .__v_isRef) to get the underlying value. */
 export function unwrapSignal(value: unknown) {
@@ -34,101 +116,13 @@ export function dataTypeLabel(value: unknown) {
   return typeof v;
 }
 
-/**
- * Render the data explorer tab showing live resolved values.
- *
- * @param {Record<string, unknown>} state - S.document.state (the $defs definitions)
- * @param {Record<string, unknown> | null} liveScope - Cached live scope from runtime rendering
- * @param {{
- *   renderCanvas: () => void;
- *   refreshData: () => void;
- *   renderLeftPanel: () => void;
- *   defCategory: (def: unknown) => string;
- *   defBadgeLabel: (def: unknown) => string;
- * }} callbacks
- * @returns {import("lit-html").TemplateResult}
- */
-export function renderDataExplorerTemplate(
-  state: Record<string, unknown>,
-  liveScope: Record<string, unknown> | null,
-  callbacks: {
-    renderCanvas: () => void;
-    /** Re-render the canvas AND let automatic `Request` entries fetch (the Refresh button). */
-    refreshData: () => void;
-    renderLeftPanel: () => void;
-    defCategory: (def: unknown) => string;
-    defBadgeLabel: (def: unknown) => string;
-  },
-) {
-  const { refreshData, renderLeftPanel, defCategory, defBadgeLabel } = callbacks;
-
-  const defs = state || {};
-  const entries = Object.entries(defs);
-  const scope = liveScope || {};
-
-  return html`
-    <div class="data-explorer-toolbar">
-      <sp-action-button
-        quiet
-        size="s"
-        class="data-refresh-btn"
-        @click=${() => {
-          // Edit/design suppress automatic `Request` fetches (a full render re-resolves every state
-          // Entry, so authoring would refetch constantly). Re-firing them on demand is exactly what
-          // This button is for, which is why it goes through refreshData rather than renderCanvas.
-          refreshData();
-          setTimeout(() => renderLeftPanel(), 200);
-        }}
-      >
-        <sp-icon-refresh slot="icon"></sp-icon-refresh>
-        Refresh
-      </sp-action-button>
-    </div>
-    ${
-      entries.length === 0
-        ? html`<div class="empty-state">No state defined</div>`
-        : entries.map(([name, def]) => {
-            const value = scope[name];
-            const unwrapped = unwrapSignal(value);
-            const isExpanded = expandedDataKeys.has(name);
-            return html`
-              <div class="data-row">
-                <div
-                  class=${classMap({
-                    "data-row-header": true,
-                    expanded: isExpanded,
-                  })}
-                  @click=${() => {
-                    if (expandedDataKeys.has(name)) {
-                      expandedDataKeys.delete(name);
-                    } else {
-                      expandedDataKeys.add(name);
-                    }
-                    renderLeftPanel();
-                  }}
-                >
-                  <span class="signal-badge ${defCategory(def)}">${defBadgeLabel(def)}</span>
-                  <span class="data-name">${name}</span>
-                  <span
-                    class=${classMap({
-                      "data-pending": unwrapped === null,
-                      "data-type": true,
-                    })}
-                    >${dataTypeLabel(value)}</span
-                  >
-                </div>
-                ${
-                  isExpanded
-                    ? html`<div class="data-tree">${renderDataTreeTemplate(unwrapped, 0)}</div>`
-                    : nothing
-                }
-              </div>
-            `;
-          })
-    }
-  `;
-}
-
+/* THE VALUE LIST IS GONE, AND ITS ROWS ARE THE DEFINITION ROWS — `panels/signals-panel.ts`.
+   It listed every state entry with its badge and what it resolved to, one rail tab away from a
+   panel listing every state entry with its badge and how it is defined: the same names twice, and
+   you read one to understand the other. Plan §11.2 asks for "definitions + live values in one row",
+   so the definition row now carries the resolved type and expands to the value tree, and what is
+   left here is the tree renderer, the type label and the row-expansion record the merged rows read.
+   `renderDataTreeTemplate` is unchanged — it was never the redundant half. */
 /**
  * Recursively render a JSON value as a tree view (Lit template).
  *
@@ -138,11 +132,12 @@ export function renderDataTreeTemplate(
   value: unknown,
   depth: number,
   maxDepth = 5,
+  path = "",
 ): TemplateResult {
   const indent = `${(depth + 1) * 12}px`;
 
-  if (depth > maxDepth) {
-    return html`<div class="data-leaf data-ellipsis" style="padding-left:${indent}">…</div>`;
+  if (depth > capFor(path, "depth", maxDepth)) {
+    return moreTemplate(path, "depth", indent, "…", () => `Show ${MORE_STEP} more levels`);
   }
 
   if (value === null || value === undefined) {
@@ -162,7 +157,7 @@ export function renderDataTreeTemplate(
   }
 
   if (Array.isArray(value)) {
-    const cap = 20;
+    const cap = capFor(path, "items", 20);
     const items: TemplateResult[] = value.slice(0, cap).map((item, i) => {
       if (item === null || item === undefined || typeof item !== "object") {
         const valText =
@@ -182,14 +177,12 @@ export function renderDataTreeTemplate(
           <span class="data-key">[${i}] </span
           ><span class="data-value data-object-label">${label}</span>
         </div>
-        ${renderDataTreeTemplate(item, depth + 1, maxDepth)}
+        ${renderDataTreeTemplate(item, depth + 1, maxDepth, `${path}/${i}`)}
       `;
     });
     return html`${items}${
       value.length > cap
-        ? html`<div class="data-leaf data-ellipsis" style="padding-left:${indent}">
-            … ${value.length - cap} more
-          </div>`
+        ? moreTemplate(path, "items", indent, `… ${value.length - cap} more`)
         : nothing
     }`;
   }
@@ -197,7 +190,7 @@ export function renderDataTreeTemplate(
   // Object
   const obj = value as Record<string, unknown>;
   const keys = Object.keys(obj);
-  const cap = 30;
+  const cap = capFor(path, "keys", 30);
   const items: TemplateResult[] = keys.slice(0, cap).map((key) => {
     const v = obj[key];
     if (v === null || v === undefined || typeof v !== "object") {
@@ -214,14 +207,163 @@ export function renderDataTreeTemplate(
         <span class="data-key">${key}: </span
         ><span class="data-value data-object-label">${label}</span>
       </div>
-      ${renderDataTreeTemplate(v, depth + 1, maxDepth)}
+      ${renderDataTreeTemplate(v, depth + 1, maxDepth, `${path}/${key}`)}
     `;
   });
   return html`${items}${
-    keys.length > cap
-      ? html`<div class="data-leaf data-ellipsis" style="padding-left:${indent}">
-          … ${keys.length - cap} more
-        </div>`
-      : nothing
+    keys.length > cap ? moreTemplate(path, "keys", indent, `… ${keys.length - cap} more`) : nothing
   }`;
 }
+
+// ─── Commands ─────────────────────────────────────────────────────────────────
+
+/** Expand (or collapse) one data row's value tree. Idempotent — expanding twice is expanding once. */
+export function setDataRowExpanded(name: string, expanded: boolean): void {
+  const rows = rowsUi();
+  if (!rows) {
+    return;
+  }
+  if (expanded) {
+    rows[name] = true;
+  } else {
+    delete rows[name];
+  }
+}
+
+/** Whether a data row is currently expanded. Exported for the tests and the command's idempotence. */
+export function isDataRowExpanded(name: string): boolean {
+  return rowsUi()?.[name] === true;
+}
+
+/** The expanded rows, in no particular order — `formula.openWorkspace` asks when it has no target. */
+export function expandedDataRows(): string[] {
+  return Object.keys(rowsUi() ?? {});
+}
+
+/** Drop every expansion AND every raised limit on the focused tab — a fresh document, and tests. */
+export function resetDataRowExpansion(): void {
+  const ui = activeTab.value?.session.ui;
+  if (ui) {
+    ui.dataRows = {};
+    ui.dataLimits = {};
+  }
+}
+
+/** The state entry names the open document defines — what a row can be named by. */
+function definedDataNames(): string[] {
+  return Object.keys(activeTab.value?.doc.document?.state ?? {});
+}
+
+/** What the data verb needs that this module does not own. */
+export interface DataExplorerCommandDeps {
+  /** Repaint the Navigator so the expanded row's tree appears — `left-panel.ts`'s `render`. */
+  renderLeftPanel: () => void;
+}
+
+/**
+ * The Data panel's row verb.
+ *
+ * `expandRow` reads as a delta but is not one: it names the state it ends in, which is why it
+ * survives `__jxAutomation`'s `/\.toggle[A-Z]/` refusal and why running it twice photographs the
+ * same picture. The collapse direction is `{ expanded: false }` on the same record rather than a
+ * second id.
+ *
+ * REFUSES a name the open document does not define. The predecessor matched the row by its rendered
+ * label through an XPath, so a document without that entry silently pressed nothing and the shot
+ * recorded a collapsed panel as if it were the feature.
+ *
+ * @param {DataExplorerCommandDeps} deps
+ * @returns {AnyCommand[]}
+ */
+export function dataExplorerCommands(deps: DataExplorerCommandDeps): AnyCommand[] {
+  return [
+    {
+      args: {
+        additionalProperties: false,
+        properties: {
+          expanded: {
+            default: true,
+            description: "True to expand the row's value tree, false to collapse it.",
+            type: "boolean",
+          },
+          name: stringProperty("The state entry's name, as the document defines it."),
+        },
+        required: ["name"],
+        type: "object",
+      },
+      category: "Document",
+      id: "data.expandRow",
+      level: "document",
+      menus: ["palette"],
+      group: "5_data",
+      requires: "an open document that defines data",
+      when: (ctx) => ctx.document.open,
+      run: (_commandCtx, args) => {
+        const name = stringArg("data.expandRow", args, "name");
+        const defined = definedDataNames();
+        if (!defined.includes(name)) {
+          throw new RangeError(
+            `command "data.expandRow" argument "name": "${name}" is not defined by this ` +
+              `document — it defines: ${defined.length > 0 ? defined.join(", ") : "nothing"}`,
+          );
+        }
+        const { expanded } = args as { expanded?: unknown };
+        // `expanded` defaults to true but is never COERCED: `{ expanded: "no" }` would otherwise
+        // Read as a collapse, which is the class of silent wrong answer this whole record exists
+        // To stop.
+        setDataRowExpanded(
+          name,
+          expanded === undefined || booleanArg("data.expandRow", args, "expanded"),
+        );
+        deps.renderLeftPanel();
+      },
+      title: "Expand Data Row",
+    },
+  ];
+}
+
+/**
+ * Register the Data panel's row verb.
+ *
+ * @param {CommandRegistry} registry
+ * @param {DataExplorerCommandDeps} deps
+ */
+export function registerDataExplorerCommands(
+  registry: CommandRegistry,
+  deps: DataExplorerCommandDeps,
+): void {
+  registry.registerAll(dataExplorerCommands(deps));
+}
+
+/**
+ * Contribute the Data panel — the DEFINITIONS and the values they resolve to, in one place.
+ *
+ * `level: "document"`, because both belong to the open document.
+ *
+ * **This is where the State editor lives now.** Plan §11.2 always said so ("State panel + inline
+ * editor → Navigator › Data"), but the two halves shipped apart: the rail button was taken away to
+ * keep the DOCUMENT group at four, the merge was deferred, and the editor was left reachable only
+ * by typing its name into the palette. So the one surface for declaring a state variable — or a
+ * component property, which is a state entry with a default — became unfindable, which is a
+ * capability lost rather than a control moved.
+ *
+ * Defining and watching are the same task interrupted: you add an entry, then look at what it
+ * resolved to. Two panels made that two panels.
+ */
+export function registerDataPanel(): void {
+  registerPanel({
+    id: "data",
+    title: "Data",
+    level: "document",
+    dock: "navigator",
+    icon: "sp-icon-data",
+    requiresDocument: "Open a page to give it data — values it can read, compute or fetch.",
+    render: (ctx) =>
+      // `ctx.doc!` — `requiresDocument` means the registry renders the empty state instead of
+      // Calling this, the same assertion `head-panel.ts` makes for the same reason.
+      ctx.deps.renderSignalsTemplate(ctx.doc!, {
+        refreshData: ctx.deps.refreshData,
+        renderLeftPanel: ctx.rerender,
+      }),
+  });
+}

package/src/panels/data-grid.ts

@@ -56,7 +56,7 @@ export async function startPush(connection: string | undefined, onDone: () => vo
   if (pushDialog) {
     return;
   }
-  const handle = openModal(html``);
+  const handle = openModal(html``, { label: "Push Schema", onDismiss: closePushDialog });
   pushDialog = { connection, handle, onDone, phase: "loading", plan: null, result: null };
   renderPushDialog();
   const plan = await pushSchema({
@@ -148,7 +148,9 @@ function renderPushDialog(): void {
                 size="s"
                 emphasized
                 class="push-apply"
-                @click=${() => void applyPush()}
+                @click=${() => {
+                  void applyPush();
+                }}
                 >Apply</sp-action-button
               >`
             : nothing
@@ -224,14 +226,18 @@ function renderSectionActions(sectionKey: string, ctx: SectionActionsContext): T
       <sp-action-button
         size="s"
         class="data-action-push"
-        @click=${() => void startPush(pushTarget, rerender)}
+        @click=${() => {
+          void startPush(pushTarget, rerender);
+        }}
       >
         Push Schema
       </sp-action-button>
       <sp-action-button
         size="s"
         class="data-action-grid"
-        @click=${() => void openGridSourcePicker()}
+        @click=${() => {
+          void openGridSourcePicker();
+        }}
       >
         Open Data Grid
       </sp-action-button>

package/src/panels/dnd.ts

@@ -10,6 +10,7 @@ import {
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { displayTagName } from "@jxsuite/schema/guards";
 import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
 import {
   attachInstruction,
@@ -26,19 +27,18 @@ import {
   renderOnly,
 } from "../store";
 import { mutateInsertNode, mutateMoveNode, transact, transactDoc } from "../tabs/transact";
+import { primarySelection } from "../tabs/selection";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
-import {
-  buildComponentInstance,
-  componentRegistry,
-  computeRelativePath,
-} from "../files/components";
+import { buildComponentInstance, componentRegistry } from "../files/components";
+import { enableElement } from "../files/elements";
+import type { ElementsEntry } from "../files/elements";
 import { renderComponentPreview } from "./component-preview";
 import { defaultDef, unsafeTags } from "./shared";
 import { elementAtPoint } from "../utils/geometry";
 import type { JxPath } from "../state";
 import type { Tab } from "../tabs/tab";
-import type { JxMutableNode } from "@jxsuite/schema/types";
+import type { JxElement, JxMutableNode } from "@jxsuite/schema/types";
 import type { ComponentEntry } from "../files/components.js";
 
 interface DragCanDragArgs {
@@ -180,9 +180,10 @@ export function registerLayersDnD() {
 
         if (wasExpanded) {
           const tab = activeTab.value;
-          const newPath = tab?.session.selection;
+          const newPath = primarySelection(tab?.session.selection);
           if (newPath) {
-            const collapsed = (view._layersCollapsed ||= new Set());
+            view._layersCollapsed ||= new Set();
+            const collapsed = view._layersCollapsed;
             collapsed.add(newPath.join("/"));
           }
         }
@@ -349,9 +350,10 @@ export function clearLayerDropGap(container: HTMLElement) {
   for (const r of rows) {
     (r as HTMLElement).style.transform = "";
     // Also clear `display:none` left by hideDescendantRows. The `.layer-row` div has no `style`
-    // Lit binding and rows aren't keyed, so lit reuses these DOM nodes positionally on the
-    // Post-drop re-render — a stale `display:none` would otherwise hide whichever row lands on the
-    // Reused node (e.g. a sibling of the moved subtree).
+    // Lit binding, so an imperative style set during the drag survives the post-drop re-render on
+    // Whichever row keeps that key — and a move is exactly the edit that hands a key to a different
+    // Node. (The rows ARE keyed, by `pathKey`; the earlier form of this note said they were not,
+    // Which made the wrong thing sound load-bearing. What is load-bearing is the missing binding.)
     (r as HTMLElement).style.display = "";
   }
 }
@@ -448,49 +450,24 @@ export function applyDropInstruction(
       }
     }
 
-    // Auto-import to $elements if the dropped block is a custom component
+    /* Auto-import to `$elements` if the dropped block is a custom component.
+       Through the ONE service (`files/elements.ts`), which is the whole point of it: this call site
+       had its own duplicate rule and matched a local component by `ref.endsWith(basename)`, so
+       dropping `./components/card.json` into a page that already imported `./vendor/card.json`
+       counted as already imported and produced an element the page could not resolve. */
     const fragment = srcData.fragment as JxMutableNode | undefined;
     const tag = fragment?.tagName;
-    if (tag && tag.includes("-")) {
+    if (displayTagName(tag).includes("-")) {
       const comp = componentRegistry.find((c: ComponentEntry) => c.tagName === tag);
-      if (comp) {
-        const elements = tab.doc.document?.$elements || [];
-        if (comp.source === "npm") {
-          const specifier = comp.modulePath ? `${comp.package}/${comp.modulePath}` : comp.package;
-          if (!specifier) {
-            return;
-          }
-          const alreadyImported = elements.some(
-            (e: JxMutableNode | string | { $ref: string }) => e === specifier || e === comp.package,
-          );
-          if (!alreadyImported) {
-            transact(tab, (d: JxMutableNode) => {
-              if (!d.$elements) {
-                d.$elements = [];
-              }
-              d.$elements.push(specifier);
-            });
-          }
-        } else {
-          const alreadyImported = elements.some((e: JxMutableNode | string | { $ref: string }) => {
-            const ref = typeof e === "object" && e !== null ? e.$ref : undefined;
-            const compPath = comp.path;
-            return (
-              ref &&
-              compPath &&
-              (ref === `./${compPath}` || ref.endsWith(compPath.split("/").pop() as string))
-            );
-          });
-          if (!alreadyImported && comp.path) {
-            const relPath = computeRelativePath(tab?.documentPath ?? null, comp.path);
-            transact(tab, (d: JxMutableNode) => {
-              if (!d.$elements) {
-                d.$elements = [];
-              }
-              d.$elements.push({ $ref: relPath });
-            });
-          }
-        }
+      const before = (tab.doc.document?.$elements ?? []) as ElementsEntry[];
+      const after = comp ? enableElement(before, comp, tab.documentPath ?? null) : before;
+      // Only when the list actually GREW. A component the registry cannot name — an npm entry with
+      // No package, a local one with no path — returns the list unchanged, and writing that back
+      // Would put an empty `$elements: []` on a document that had none.
+      if (after.length !== before.length) {
+        transact(tab, (d: JxMutableNode) => {
+          d.$elements = after as (string | JxElement)[];
+        });
       }
     }
   }