@jxsuite/studio 4.0.0 → 5.0.0

package/src/panels/formula-workspace.ts

@@ -1,6 +1,6 @@
 /// <reference lib="dom" />
 /**
- * ⑪ · Logic — the formula workspace and the function editor, hosted by the Bottom dock.
+ * ⑪ · Logic — the flow behind the Bottom dock's Logic tab.
  *
  * **What changed, and why it is the whole point.** Both of these surfaces used to TAKE OVER the
  * canvas: `TabUi.editingFormula` (this file) and `TabUi.editingFunction` (`panels/editors.ts`) each
@@ -12,10 +12,12 @@
  * pane grid, so the page renders beside the formula and keeps rendering while you edit it.
  *
  * **A dock tab is not a reparented takeover.** The surface has to work at dock height, so the
- * header is one row, the chip pipeline and the result are single lines, the data rail is a narrow
- * column that scrolls rather than a 280px slab, and every measurement lives in `styles/panels.css`
- * instead of the inline `style=` attributes that kept seventeen `fw-*` classes on
- * `scripts/check-styles.ts`'s orphan list.
+ * header is one row, the chip pipeline and the result are single lines, and the data rail is a
+ * narrow column that scrolls rather than a 280px slab. Every one of those measurements is in
+ * `surfaces/logic-workspace.json`'s own style block now — the tab is a **Jx document over the UI
+ * kit**, and this module is its flow: it decides which surface is open, what the expression at that
+ * document position is, which sub-node the chips have selected, what the live preview says, and
+ * what a commit writes. It draws nothing.
  *
  * **One target, two surfaces, one tab.** {@link logicTarget} is the single reader of the two
  * `TabUi` fields, and the function editor wins when both are set — the precedence `tabs/tab.ts` has
@@ -23,6 +25,13 @@
  * Logic exists only while something is open in it, and `panels/bottom-dock.ts` reveals the dock on
  * that tab when a target appears.
  *
+ * **Three islands, and none of them is this module's markup** (studio-ui-guidelines.md §9.4). The
+ * document draws an empty host for each and announces it; Monaco fills `[part="code-host"]`, the
+ * still-lit expression editor fills `[part="editor-host"]`, and one mounted value-tree document
+ * fills each `[part="tree-host"]`. The rail's trees had been EMPTY since that tree became a
+ * document — the takeover rendered a host and nothing ever ran the pass that fills one — so
+ * announcing them is not a port, it is the repair.
+ *
  * **The close is real.** Both surfaces carry one, and closing is the only thing that clears the
  * target — leaving the dock, switching tabs and collapsing the dock all keep your place, because
  * the editor no longer owns a screen it would otherwise be stranded on.
@@ -32,23 +41,25 @@
  * canvas is still mounted the patch lands in a page you can watch.
  */
 
-import { html } from "lit-html";
+import { nothing } from "lit-html";
 import { getEventBinding, isExpressionDef, isJsonObject } from "@jxsuite/schema/guards";
 
-import { shallowRef } from "../reactivity";
+import { effect, effectScope, shallowRef } from "../reactivity";
 import { getNodeAtPath, updateUi } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { mutateAddDef, mutateUpdateDef, mutateUpdateProperty, transactDoc } from "../tabs/transact";
 import { setBottomTab } from "../shell";
-import { chipSummary, renderFormulaChips } from "../ui/formula-chips";
-import { renderExpressionEditor } from "../ui/expression-editor";
+import { bottomPanelRegion, REGION_ATTR } from "../ui/regions";
+import { chipSummary, formulaChipStrip } from "../ui/formula-chips";
+import { mountExpressionEditor } from "../ui/expression-editor";
 import { applyCatalogPick, formulaCatalog } from "../ui/formula-catalog";
-import { openFormulaPalette } from "../ui/formula-palette";
+import { openFormulaPalette } from "../surfaces/formula-palette";
 import { livePreviewExpression } from "../services/live-preview";
-import { closeFunctionEditor, functionEditorTemplate, syncFunctionEditor } from "./editors";
+import { closeFunctionEditor, syncFunctionEditor } from "./editors";
 import { registerPanel } from "./panel-registry";
-import { renderEmptyState } from "./empty-state";
-import { dataTypeLabel, renderDataTreeTemplate, unwrapSignal } from "./data-explorer";
+import { dataTypeLabel, paintDataTree, unwrapSignal } from "./data-explorer";
+import { disposeDetachedDataTrees } from "../surfaces/panel-data";
+import { emptyLogicWorkspaceView, mountLogicWorkspace } from "../surfaces/logic-workspace";
 
 import {
   argsSchema,
@@ -65,7 +76,15 @@ import type { ExpressionPreview } from "../services/preview-eval";
 import type { FormulaEditDef, FunctionEditDef, JsonValue } from "../types";
 import type { Tab } from "../tabs/tab";
 import type { JxStateDefinition } from "@jxsuite/schema/types";
-import type { TemplateResult } from "lit-html";
+import type { EffectScope } from "@vue/reactivity";
+import type {
+  LogicChipView,
+  LogicScopeEntryView,
+  LogicWorkspaceActions,
+  LogicWorkspaceIslands,
+  LogicWorkspaceSurface,
+  LogicWorkspaceView,
+} from "../surfaces/logic-workspace";
 
 type NodePath = (string | number)[];
 
@@ -74,6 +93,18 @@ export type LogicTarget =
   | { surface: "function"; editing: FunctionEditDef }
   | { surface: "formula"; editing: FormulaEditDef };
 
+/** The sentence the tab shows with nothing open in it — what the region is FOR (§11.1). */
+const NOTHING_OPEN = "Open a formula or a function to edit it here, beside the page it computes.";
+
+/** The target names a document position that holds no expression: say so, keep the header. */
+const NO_EXPRESSION = "No expression found at this document position.";
+
+/** The rail with no canvas snapshot behind it. */
+const NO_SNAPSHOT = "The values this formula can read appear here once the canvas has rendered.";
+
+/** The result line with nothing to report yet — an absence of data, not an absence of value. */
+const NO_PREVIEW = "Preview unavailable — the canvas has not posted a data snapshot yet";
+
 /**
  * The Logic tab's target, or `null` when nothing is open in it.
  *
@@ -222,7 +253,7 @@ export function closeFormulaWorkspace() {
   updateUi(activeTab.value, "editingFormula", null);
 }
 
-// ─── The Logic tab ───────────────────────────────────────────────────────────
+// ─── The chip selection ──────────────────────────────────────────────────────
 
 /**
  * The chip selection, keyed by the target it belongs to.
@@ -247,131 +278,158 @@ function selectionKey(editing: FormulaEditDef): string {
   return JSON.stringify(editing);
 }
 
+// ─── What the last projection resolved ───────────────────────────────────────
+
 /**
- * Register the Bottom dock's Logic tab.
+ * Everything an ACTION needs that the view does not carry.
  *
- * Defined here and registered from `panels/bottom-dock.ts`, the same way Problems is defined beside
- * its notification store: the dock owns the strip, the surface owns the record.
+ * The document reports a chip by its key and a button by nothing at all, so the objects behind them
+ * — the tab, the target, the root node, the sub-node a commit replaces — live here, rewritten by
+ * every projection. Held rather than recomputed at click time for the reason `panels/git-panel.ts`
+ * states about its own seat: a callback captured at mount would reach the FIRST projection's
+ * document for the rest of the window.
  */
-export function registerLogicPanel(): void {
-  registerPanel({
-    id: "logic",
-    title: "Logic",
-    level: "document",
-    dock: "bottom",
-    icon: "sp-icon-event",
-    // No rail button: Logic has no steady state to badge. It exists while a formula or a function
-    // Is open and leaves the strip when you close it, which is what `when` says below.
-    rail: false,
-    when: () => logicTarget() !== null,
-    render: (ctx) => logicPanelBody(ctx.rerender),
-    afterRender: (_ctx, host) => syncFunctionEditor(host),
-  });
+interface Resolved {
+  tab: Tab;
+  editing: FormulaEditDef;
+  root: Record<string, unknown>;
+  selected: Record<string, unknown>;
+  selectedPath: NodePath;
+  stateEntries: Record<string, JxStateDefinition>;
+  preview: ExpressionPreview | null;
+  allowEventRef: boolean;
+  /** Chip key → node path, so a chip click needs no path parsing (a `switch` case may hold "/"). */
+  chipPaths: Map<string, NodePath>;
+  /** Rail entry name → the value its tree draws. */
+  scopeValues: Map<string, unknown>;
 }
 
-/**
- * What the Logic tab draws.
- *
- * @param {() => void} rerender The dock's repaint, handed to the live-preview refresh.
- * @returns {PanelBody}
- */
-export function logicPanelBody(rerender: () => void): PanelBody {
-  const tab = activeTab.value;
-  const target = logicTarget(tab);
-  if (!tab || !target) {
-    return renderEmptyState({
-      message: "Open a formula or a function to edit it here, beside the page it computes.",
-    });
+let _resolved: Resolved | null = null;
+
+/** Replace the selected sub-node inside the root and write the whole root back. */
+function writeSelected(next: unknown): void {
+  const held = _resolved;
+  if (!held) {
+    return;
   }
-  return target.surface === "function"
-    ? functionPaneTemplate(target.editing)
-    : workspaceTemplate(tab, target.editing, rerender);
+  writeRoot(held.tab, held.editing, replaceAtPath(held.root, held.selectedPath, next));
 }
 
-/** The one header both surfaces wear: what is open, what kind it is, its verbs, and the close. */
-function logicHeaderTemplate(
+// ─── The projection ──────────────────────────────────────────────────────────
+
+/** The header fields both surfaces wear: what is open, what kind it is, and where it lives. */
+function headerOf(
   glyph: string,
   name: string,
   kind: string,
-  title: string,
-  verbs: TemplateResult | null,
-  close: () => void,
-): TemplateResult {
-  return html`
-    <div class="fw-header">
-      <span class="fw-title" title=${title}>${glyph} ${name}</span>
-      <span class="fw-kind">${kind}</span>
-      <div class="fw-header-gap"></div>
-      ${verbs}
-      <sp-action-button
-        quiet
-        size="s"
-        class="fw-close"
-        title="Close"
-        @click=${() => {
-          close();
-        }}
-      >
-        <sp-icon-close slot="icon"></sp-icon-close>
-        Close
-      </sp-action-button>
-    </div>
-  `;
+  titleHint: string,
+): Pick<LogicWorkspaceView, "glyph" | "kind" | "name" | "titleHint"> {
+  return { glyph, kind, name, titleHint };
+}
+
+/** The result line: the evaluation error, the root value, or the honest "nothing has run this". */
+function resultOf(
+  preview: ExpressionPreview | null,
+): Pick<LogicWorkspaceView, "hasResultNote" | "resultNote" | "resultText" | "resultTone"> {
+  if (preview?.error) {
+    return {
+      hasResultNote: false,
+      resultNote: "",
+      resultText: preview.error,
+      resultTone: "error",
+    };
+  }
+  if (preview) {
+    return {
+      hasResultNote: preview.mutating,
+      resultNote: preview.mutating ? "(mutates target)" : "",
+      resultText: `= ${preview.values.get("") ?? "undefined"}`,
+      resultTone: "value",
+    };
+  }
+  return { hasResultNote: false, resultNote: "", resultText: NO_PREVIEW, resultTone: "pending" };
+}
+
+/** The live data context — a SECOND opinion now that the page itself is on screen, not the only one. */
+function railOf(scope: Record<string, unknown> | null | undefined): {
+  entries: LogicScopeEntryView[];
+  values: Map<string, unknown>;
+} {
+  const entries: LogicScopeEntryView[] = [];
+  const values = new Map<string, unknown>();
+  for (const [name, value] of Object.entries(scope ?? {})) {
+    entries.push({ key: name, name, type: dataTypeLabel(value) });
+    values.set(name, unwrapSignal(value));
+  }
+  return { entries, values };
 }
 
-/** The Monaco function body, at dock height. The editor itself is mounted by `afterRender`. */
-function functionPaneTemplate(editing: FunctionEditDef): TemplateResult {
-  const name = editing.defName ?? editing.eventKey ?? "?";
-  return html`
-    <div class="formula-workspace formula-workspace--code">
-      ${logicHeaderTemplate(
+/**
+ * What the Logic tab shows, and what every action it offers acts on.
+ *
+ * Writes {@link _resolved} as its one side effect: the projection is the only place that knows
+ * which document position, which sub-node and which values the surface is currently drawing, and an
+ * action that recomputed any of them would be a second answer to the same question.
+ *
+ * @returns {LogicWorkspaceView}
+ */
+export function workspaceView(): LogicWorkspaceView {
+  const empty = emptyLogicWorkspaceView();
+  const tab = activeTab.value;
+  const target = logicTarget(tab);
+  if (!tab || !target) {
+    _resolved = null;
+    return { ...empty, emptyMessage: NOTHING_OPEN, state: "empty" };
+  }
+
+  if (target.surface === "function") {
+    _resolved = null;
+    const { editing } = target;
+    const name = editing.defName ?? editing.eventKey ?? "?";
+    return {
+      ...empty,
+      ...headerOf(
         "ƒ",
         name,
         editing.type === "def" ? "function body" : "event handler",
         editing.type === "def" ? `state/${name}` : name,
-        null,
-        () => {
-          void closeFunctionEditor();
-        },
-      )}
-      ${functionEditorTemplate()}
-    </div>
-  `;
-}
+      ),
+      state: "ready",
+      surface: "code",
+    };
+  }
 
-function workspaceTemplate(
-  tab: Tab,
-  editing: FormulaEditDef,
-  rerender: () => void,
-): TemplateResult {
-  const stateEntries = (tab.doc.document?.state ?? {}) as Record<string, JxStateDefinition>;
+  const { editing } = target;
   const name = (editing.type === "def" ? editing.defName : editing.eventKey) ?? "?";
+  const header = headerOf(
+    "fx",
+    name,
+    editing.type === "def" ? "state expression" : "event expression",
+    editing.type === "def" ? `state/${name}` : name,
+  );
   const root = formulaRoot(tab, editing);
-  const kind = editing.type === "def" ? "state expression" : "event expression";
-  const title = editing.type === "def" ? `state/${name}` : name;
-
   if (!root) {
-    return html`
-      <div class="formula-workspace">
-        ${logicHeaderTemplate("fx", name, kind, title, null, closeFormulaWorkspace)}
-        <div class="fw-body">
-          ${renderEmptyState({ message: "No expression found at this document position." })}
-        </div>
-      </div>
-    `;
+    _resolved = null;
+    return {
+      ...empty,
+      ...header,
+      missingMessage: NO_EXPRESSION,
+      state: "ready",
+      surface: "missing",
+    };
   }
 
-  const { scope } = tab.session.canvas;
-  // Live-context evaluation in the canvas iframe with snapshot fallback (M6). The canvas is no
-  // Longer unmounted while this surface is open — that is the entire point of the move — so the
-  // Live path is the ORDINARY case now rather than the one that never happened. An event target's
-  // Element path is the context, so repeater-template formulas bind the first item's $map scope.
+  const stateEntries = (tab.doc.document?.state ?? {}) as Record<string, JxStateDefinition>;
+  /* Live-context evaluation in the canvas iframe with snapshot fallback (M6). The canvas is no
+     longer unmounted while this surface is open — that is the entire point of the move — so the
+     live path is the ORDINARY case now rather than the one that never happened. An event target's
+     element path is the context, so repeater-template formulas bind the first item's $map scope. */
   const preview = livePreviewExpression(
     tab,
     `formula:${JSON.stringify(editing)}`,
     root,
     editing.type === "event" ? (editing.path ?? null) : null,
-    rerender,
+    syncLogicView,
   );
   const stored = _selection.value;
   const key = selectionKey(editing);
@@ -379,109 +437,278 @@ function workspaceTemplate(
     root,
     stored.tab === tab && stored.key === key ? stored.path : [],
   );
-  const write = (next: unknown) => writeRoot(tab, editing, next);
-  const writeSelected = (next: unknown) => write(replaceAtPath(root, selectedPath, next));
-  const onChipSelect = (path: NodePath) => {
-    _selection.value = { key, path, tab };
+  const strip = formulaChipStrip(root, { preview });
+  const chips: LogicChipView[] = strip.map((chip) => ({
+    badge: chip.badge,
+    hasBadge: chip.hasBadge,
+    key: chip.key,
+    label: chip.label,
+  }));
+  const chipPaths = new Map(strip.map((chip) => [chip.key, chip.path] as const));
+  const rail = railOf(tab.session.canvas.scope);
+
+  _resolved = {
+    allowEventRef: editing.type === "event",
+    chipPaths,
+    editing,
+    preview,
+    root,
+    scopeValues: rail.values,
+    selected,
+    selectedPath,
+    stateEntries,
+    tab,
   };
 
-  const catalogButton = html`
-    <sp-action-button
-      quiet
-      size="s"
-      class="fw-browse-catalog"
-      title="Browse catalog"
-      @click=${(e: Event) =>
-        openFormulaPalette({
-          anchor: e.currentTarget as HTMLElement,
-          entries: formulaCatalog(stateEntries),
-          onPick: (entry) =>
-            applyCatalogPick(entry, writeSelected, {
-              onInsertDef: (defName, def) =>
-                transactDoc(activeTab.value, (t) =>
-                  mutateAddDef(t, defName, def as Record<string, JsonValue>),
-                ),
-              stateEntries,
-            }),
-        })}
-    >
-      <sp-icon-brackets slot="icon"></sp-icon-brackets>
-      Catalog
-    </sp-action-button>
-  `;
-
-  return html`
-    <div class="formula-workspace">
-      ${logicHeaderTemplate("fx", name, kind, title, catalogButton, closeFormulaWorkspace)}
-      <div class="fw-chips">${renderFormulaChips(root, onChipSelect, { preview })}</div>
-      <div class="fw-body">
-        <div class="fw-editor">
-          <div class="fw-selected">
-            Selected:
-            <span class="fw-selected-node"
-              >${selectedPath.length === 0 ? "root" : chipSummary(selected)}</span
-            >
-          </div>
-          ${renderExpressionEditor(selected, writeSelected, {
-            allowEventRef: editing.type === "event",
-            depth: 1,
-            path: selectedPath,
-            preview,
-            stateDefs: Object.keys(stateEntries),
-            stateEntries,
-          })}
-        </div>
-        ${dataRailTemplate(scope)}
-      </div>
-      ${resultTemplate(preview)}
-    </div>
-  `;
+  return {
+    ...empty,
+    ...header,
+    ...resultOf(preview),
+    chips,
+    hasCatalog: true,
+    hasScope: rail.entries.length > 0,
+    scopeEmptyMessage: NO_SNAPSHOT,
+    scopeEntries: rail.entries,
+    selectedSummary: selectedPath.length === 0 ? "root" : chipSummary(selected),
+    state: "ready",
+    surface: "formula",
+  };
 }
 
-/** The live data context — a SECOND opinion now that the page itself is on screen, not the only one. */
-function dataRailTemplate(scope: Record<string, unknown> | null | undefined): TemplateResult {
-  const scopeEntries = scope ? Object.entries(scope) : [];
-  return html`
-    <div class="fw-context">
-      <div class="fw-context-title">Data</div>
-      ${
-        scopeEntries.length === 0
-          ? html`<div class="empty-state">No canvas data snapshot yet</div>`
-          : scopeEntries.map(([name, value]) => {
-              const unwrapped = unwrapSignal(value);
-              return html`
-                <div class="fw-context-entry">
-                  <div class="fw-context-head">
-                    <span class="fw-context-name">${name}</span>
-                    <span class="fw-context-type">${dataTypeLabel(value)}</span>
-                  </div>
-                  <div class="data-tree">${renderDataTreeTemplate(unwrapped, 0, 4)}</div>
-                </div>
-              `;
-            })
-      }
-    </div>
-  `;
+// ─── The islands ─────────────────────────────────────────────────────────────
+
+let _editorHost: HTMLElement | null = null;
+const _treeHosts = new Map<string, HTMLElement>();
+
+/**
+ * Draw the expression editor into the host the document made for it.
+ *
+ * The editor is a MOUNTED DOCUMENT of its own now (`ui/expression-editor.ts` is its flow), so this
+ * is one document's surface standing inside a node another document owns — the same hand-over the
+ * statement editor makes at `[part="control-host"]`. Calling it again ASSIGNS to the standing
+ * mount, which is what keeps a picker the reader has open from being taken away by a projection.
+ *
+ * Nothing resolved means nothing to edit: the host is emptied, which also takes down the mount on
+ * the next sweep because the document it held is no longer in the page.
+ */
+function paintEditor(): void {
+  const host = _editorHost;
+  if (!host) {
+    return;
+  }
+  const held = _resolved;
+  if (!held) {
+    host.textContent = "";
+    return;
+  }
+  mountExpressionEditor(host, held.selected, writeSelected, {
+    allowEventRef: held.allowEventRef,
+    depth: 1,
+    onInsertDef: insertDef,
+    path: held.selectedPath,
+    preview: held.preview,
+    stateDefs: Object.keys(held.stateEntries),
+    stateEntries: held.stateEntries,
+  });
 }
 
-/** The root result, the evaluation error, or the honest "nothing has evaluated this yet". */
-function resultTemplate(preview: ExpressionPreview | null): TemplateResult {
-  if (preview?.error) {
-    return html`<div class="fw-result fw-result--error">${preview.error}</div>`;
+/** Draw one rail entry's value tree. Idempotent: a host that holds its document is assigned to. */
+function paintTree(key: string, host: HTMLElement): void {
+  const value = _resolved?.scopeValues.get(key);
+  paintDataTree(host, value, key, syncLogicView, 4);
+}
+
+/** Repaint every rail tree the current projection still has an entry for, and drop the rest. */
+function paintTrees(): void {
+  const held = _resolved;
+  // Deleting the current entry mid-iteration is defined for a Map, so no copy is taken.
+  for (const [key, host] of _treeHosts) {
+    if (!held?.scopeValues.has(key)) {
+      _treeHosts.delete(key);
+      continue;
+    }
+    paintTree(key, host);
   }
-  if (preview) {
-    return html`
-      <div class="fw-result">
-        = ${preview.values.get("") ?? "undefined"}
-        ${preview.mutating ? html`<span class="fw-result-note">(mutates target)</span>` : ""}
-      </div>
-    `;
+  disposeDetachedDataTrees();
+}
+
+// ─── The standing mount ──────────────────────────────────────────────────────
+
+interface Standing {
+  host: HTMLElement;
+  handle: LogicWorkspaceSurface;
+  scope: EffectScope;
+}
+
+let _standing: Standing | null = null;
+
+/**
+ * Push a fresh projection at the standing document, now.
+ *
+ * The effect covers every reactive input; this covers the two that are not — a live preview landing
+ * from the canvas iframe, and a raised limit inside a value tree — each of which is a callback
+ * rather than a signal.
+ */
+export function syncLogicView(): void {
+  if (!_standing) {
+    return;
+  }
+  _standing.handle.update(workspaceView());
+  paintEditor();
+  paintTrees();
+}
+
+const ACTIONS: LogicWorkspaceActions = {
+  browseCatalog(anchor) {
+    const held = _resolved;
+    if (!held) {
+      return;
+    }
+    openFormulaPalette({
+      anchor,
+      entries: formulaCatalog(held.stateEntries),
+      onPick: (entry) =>
+        applyCatalogPick(entry, writeSelected, {
+          onInsertDef: insertDef,
+          stateEntries: held.stateEntries,
+        }),
+    });
+  },
+  close() {
+    if (logicTarget()?.surface === "function") {
+      void closeFunctionEditor();
+      return;
+    }
+    closeFormulaWorkspace();
+  },
+  selectChip(key) {
+    const held = _resolved;
+    const path = held?.chipPaths.get(key);
+    if (!held || !path) {
+      return;
+    }
+    _selection.value = { key: selectionKey(held.editing), path, tab: held.tab };
+  },
+};
+
+/** Vendor a packaged formula's state entry into the document, as one undo step. */
+function insertDef(defName: string, def: unknown): void {
+  transactDoc(activeTab.value, (t) => mutateAddDef(t, defName, def as Record<string, JsonValue>));
+}
+
+const ISLANDS: LogicWorkspaceIslands = {
+  codeSlot(_host) {
+    /* The host is announced but not USED, and that is the point. Monaco MEASURES its container, so
+       it may not be mounted into a node that is one reconcile step short of being in the page —
+       which is exactly what an announced node is. So the announcement is only a signal that the
+       code surface now exists; a microtask puts the mount after the append, and
+       `syncFunctionEditor` finds the container in the dock body for itself. Idempotent either way:
+       it asks whether the editor it holds is still inside the container it was just handed, and
+       rebuilds only when the answer is no. */
+    queueMicrotask(() => {
+      if (_standing) {
+        syncFunctionEditor(_standing.host);
+      }
+    });
+  },
+  editorSlot(host) {
+    _editorHost = host;
+    paintEditor();
+  },
+  treeSlot(key, host) {
+    _treeHosts.set(key, host);
+    paintTree(key, host);
+  },
+};
+
+/** Drop the standing document, its effect and everything it was holding. */
+function unmountStanding(): void {
+  if (!_standing) {
+    return;
+  }
+  _standing.scope.stop();
+  _standing.handle.dispose();
+  _standing = null;
+  _editorHost = null;
+  _treeHosts.clear();
+  _resolved = null;
+  disposeDetachedDataTrees();
+}
+
+/** Mount the document into the dock body and arm the effect that keeps it current. */
+function mountStanding(host: HTMLElement): void {
+  _editorHost = null;
+  _treeHosts.clear();
+  const handle = mountLogicWorkspace(host, workspaceView(), ACTIONS, ISLANDS);
+  const scope = effectScope();
+  _standing = { handle, host, scope };
+  scope.run(() => {
+    effect(() => {
+      handle.update(workspaceView());
+      /* After the projection, never before: the hosts that survived it are showing the PREVIOUS
+         node until they are repainted, and a host created BY it announces itself and paints
+         itself. Both orders end in the same place, which is what makes the pair idempotent. */
+      paintEditor();
+      paintTrees();
+    });
+  });
+}
+
+/**
+ * Draw the Logic tab against whatever the Bottom dock has just painted.
+ *
+ * The dock runs EVERY tab's `afterRender` with the same element, showing or not, because Logic is
+ * the one tab that owns something outliving its own markup (a live Monaco instance). So the first
+ * question is whose body this is: the dock stamps the active tab's region on it, and a collapsed
+ * dock stamps nothing at all — which is what makes "is this mine?" answerable without asking the
+ * dock, and therefore without an import cycle back through it.
+ *
+ * The mount does NOT clear the host. `render` returns `nothing`, so what is in there is lit's own
+ * comment markers, and taking them away would break the dock's next paint of another tab.
+ *
+ * @param {HTMLElement} host The dock body (or, collapsed, the dock host itself).
+ */
+export function syncLogicPanel(host: HTMLElement): void {
+  if (host.getAttribute(REGION_ATTR) === bottomPanelRegion("logic")) {
+    if (_standing && (_standing.host !== host || !_standing.handle.connected())) {
+      unmountStanding();
+    }
+    if (!_standing) {
+      mountStanding(host);
+    }
+  } else {
+    unmountStanding();
   }
-  return html`
-    <div class="fw-result fw-result--pending">
-      Preview unavailable — the canvas has not posted a data snapshot yet
-    </div>
-  `;
+  /* Unconditional, and it is the teardown as much as the mount: with another tab showing there is
+     no `[part="code-host"]` under this element, which is how a Monaco instance left attached to
+     DOM nobody can see is disposed. */
+  syncFunctionEditor(host);
+}
+
+/**
+ * Register the Bottom dock's Logic tab.
+ *
+ * Defined here and registered from `panels/bottom-dock.ts`, the same way Problems is defined beside
+ * its notification store: the dock owns the strip, the surface owns the record.
+ */
+export function registerLogicPanel(): void {
+  registerPanel({
+    id: "logic",
+    title: "Logic",
+    level: "document",
+    dock: "bottom",
+    icon: "lightning",
+    // No rail button: Logic has no steady state to badge. It exists while a formula or a function
+    // Is open and leaves the strip when you close it, which is what `when` says below.
+    rail: false,
+    when: () => logicTarget() !== null,
+    // The body is a document, so lit draws nothing and the mount happens against the painted DOM.
+    // `afterRender` runs on every repaint of the dock; {@link syncLogicPanel} is idempotent.
+    render: (): PanelBody => nothing,
+    afterRender: (_ctx, host) => {
+      syncLogicPanel(host);
+    },
+  });
 }
 
 // ─── Commands ─────────────────────────────────────────────────────────────────