@jxsuite/studio 4.0.0 → 5.0.0

package/src/panels/style-utils.ts

@@ -2,9 +2,8 @@
 
 import type { JxMutableNode } from "@jxsuite/schema/types";
 
-import { getNodeAtPath } from "../store";
 import { activeTab } from "../workspace/workspace";
-import { primarySelection } from "../tabs/selection";
+import { getEffectiveStyle } from "../site-context";
 import cssMeta from "../../data/css-meta.json";
 
 let cssInitialMap = new Map<string, string>();
@@ -48,7 +47,19 @@ export function allConditionsPass(
 
 // ─── Auto-open sections ─────────────────────────────────────────────────────
 
-/** @param {JxMutableNode} node @param {Record<string, boolean>} currentSections */
+/**
+ * Open every section that has a value in it — and leave alone every section somebody has DECIDED
+ * about.
+ *
+ * The distinction is `undefined` versus `false`, and it is what makes the Style tab's accordion
+ * obey a click. It used to test `!result[section]`, which cannot tell "never opened" from "the
+ * reader just closed it": with the tab drawn once per interaction that was invisible, because the
+ * close and the re-open happened on either side of a render nobody looked between. The tab is a
+ * document now and re-projects the moment the section record moves, so closing an auto-opened
+ * section re-opened it in the same frame.
+ *
+ * @param {JxMutableNode} node @param {Record<string, boolean>} currentSections
+ */
 export function autoOpenSections(node: JxMutableNode, currentSections: Record<string, boolean>) {
   const style = node.style || {};
   const result = { ...currentSections };
@@ -58,7 +69,7 @@ export function autoOpenSections(node: JxMutableNode, currentSections: Record<st
     }
     const entry = (cssMeta.$defs as Record<string, Record<string, unknown>>)[prop];
     const section = (entry?.$section as string) ?? "other";
-    if (!result[section]) {
+    if (result[section] === undefined) {
       result[section] = true;
     }
   }
@@ -213,10 +224,12 @@ export function compressBorderSide(vals: string[]) {
 
 /** Extract --font-* CSS custom properties from the document root style. */
 export function getFontVars() {
-  const style = activeTab.value?.doc.document?.style;
-  if (!style) {
-    return [];
-  }
+  /* The EFFECTIVE style — the site's `project.json` block under the document's own — for the same
+     reason `colorTokens()` reads it: a project's fonts are declared once, in the site, and a list
+     that read only the document offered a component none of its project's fonts. The value is what
+     the token's OWN declaration says; a token that aliases another (`--font-ui: var(--font-body)`)
+     is followed by whoever draws it. Only scalars are taken: an object is a nested rule. */
+  const style = getEffectiveStyle(activeTab.value?.doc.document?.style);
   const vars = [];
   for (const [k, v] of Object.entries(style)) {
     if (k.startsWith("--font") && (typeof v === "string" || typeof v === "number")) {
@@ -226,29 +239,20 @@ export function getFontVars() {
   return vars;
 }
 
-/** Typography CSS properties that should preview their values in-menu */
-export const TYPO_PREVIEW_PROPS = new Set([
-  "fontStyle",
-  "fontVariant",
-  "textTransform",
-  "textDecoration",
-]);
-
-/** Resolve the current font family for typography preview (handles var() references) */
-export function currentFontFamily() {
-  const tab = activeTab.value;
-  const selected = primarySelection(tab?.session.selection);
-  const node = selected ? getNodeAtPath(tab!.doc.document, selected) : null;
-  const raw = node?.style?.fontFamily;
-  if (!raw) {
-    return "";
-  }
-  const m = typeof raw === "string" && raw.match(/^var\((--[^)]+)\)$/);
-  if (m) {
-    return tab?.doc.document?.style?.[m[1]!] || "";
-  }
-  return raw;
-}
+/**
+ * The typography properties whose keyword rows draw each value AS that value, and the `jx-option`
+ * channel each one reaches the row through (ui.md §5.3): a weight row's `700` is set in 700, an
+ * italic row's `Italic` leans, a transform row's `Uppercase` is capitalised without changing the
+ * word a reader hears. `fontFamily` is not here because its rows are their own preview through
+ * `face`, which is the channel every one of these rows ALSO carries, so a weight is shown in the
+ * element's own typeface rather than in the panel's.
+ */
+export const TYPO_PREVIEW_CHANNELS: Readonly<Record<string, string>> = {
+  fontStyle: "slant",
+  fontVariant: "variant",
+  fontWeight: "weight",
+  textDecoration: "decoration",
+  textTransform: "transform",
+};
 
 export { default as cssMeta } from "../../data/css-meta.json";
-export { camelToKebab } from "../utils/studio-utils";

package/src/panels/stylebook-doc.ts

@@ -5,17 +5,19 @@
  * a width-sized iframe, so `@media` blocks evaluate for real — this replaces the legacy parent-side
  * inline-style flatten (`buildStylebookElement`/`refreshStylebookStyles`).
  *
- * Two runtime facts shape {@link transposeStylebookStyle}:
+ * One runtime fact shapes {@link transposeStylebookStyle}: tag-keyed rules on the generated root
+ * would restyle the card chrome (`div` rules hit chrome divs), so every tag rule `T` is re-keyed to
+ * `` `& .element-card-preview ${T}` `` — applyStyle resolves `&` to the root's `[data-jx=uid]`
+ * scope, confining the cascade to specimens.
  *
- * 1. The runtime's `applyStyle` emits `@media.selector` nesting but DROPS `selector.@media`
- *    (`emitNested` skips `@` keys) — the legacy flatten honored both orders, so tag rules' embedded
- *    `@name` blocks are HOISTED into the corresponding top-level `@name` block here.
- * 2. Tag-keyed rules on the generated root would restyle the card chrome (`div` rules hit chrome
- *    divs), so every tag rule `T` is re-keyed to `` `& .element-card-preview ${T}` `` — applyStyle
- *    resolves `&` to the root's `[data-jx=uid]` scope, confining the cascade to specimens.
+ * There used to be a second, and it was a workaround rather than a fact: `applyStyle` emitted
+ * `@media → selector` but DROPPED `selector → @media`, so a tag rule's embedded `@name` block was
+ * HOISTED into the corresponding top-level one here. The runtime composes both orders now, so the
+ * hoist is gone and a nested `@name` block stays where the author wrote it.
  */
 
 import { serializeJxPath } from "../canvas/path-mapping";
+import { isKeyframesAtRule } from "@jxsuite/runtime/css";
 import type { StylebookEntry } from "./stylebook-panel";
 import type { ComponentEntry } from "../files/components";
 import type { JxPath } from "../state";
@@ -46,74 +48,26 @@ function isPlainObject(v: unknown): v is Record<string, unknown> {
   return v !== null && typeof v === "object" && !Array.isArray(v);
 }
 
-/** The specimen-scoping selector prefix (see module doc, runtime fact 2). */
+/** The specimen-scoping selector prefix (see the module doc). */
 const SPECIMEN_SCOPE = "& .element-card-preview";
 
-/** Deep-merge `add` into `base` (objects merge, scalars overwrite; add wins). */
-function mergeRules(
-  base: Record<string, unknown> | undefined,
-  add: Record<string, unknown>,
-): Record<string, unknown> {
-  const out: Record<string, unknown> = { ...base };
-  for (const [k, v] of Object.entries(add)) {
-    out[k] = isPlainObject(v) && isPlainObject(out[k]) ? mergeRules(out[k], v) : v;
-  }
-  return out;
-}
-
-/** Drop nested `@` keys from a rule object (already-hoisted media can't nest deeper). */
-function stripAtKeys(rule: Record<string, unknown>): Record<string, unknown> {
-  const out: Record<string, unknown> = {};
-  for (const [k, v] of Object.entries(rule)) {
-    if (isPlainObject(v) && k.startsWith("@")) {
-      continue;
-    }
-    out[k] = isPlainObject(v) ? stripAtKeys(v) : v;
-  }
-  return out;
-}
-
 /**
  * Transform the merged effective document style into the generated root's style block: flat scalars
- * and `--` custom props stay at the top (inheritance into specimens), tag rules are re-keyed under
- * {@link SPECIMEN_SCOPE}, and `selector.@media` nesting is hoisted into top-level `@name` blocks
- * (both per the module doc). Shared by the doc generator and the live `styleUpdate` fast path so an
- * edit round-trips through the exact same transform.
+ * and `--` custom props stay at the top (inheritance into specimens) and tag rules are re-keyed
+ * under {@link SPECIMEN_SCOPE}, per the module doc. Shared by the doc generator and the live
+ * `styleUpdate` fast path so an edit round-trips through the exact same transform.
  */
 export function transposeStylebookStyle(effectiveStyle: JxStyle): JxStyle {
   const style = effectiveStyle as Record<string, unknown>;
   const out: Record<string, unknown> = {};
-  const mediaOut: Record<string, Record<string, unknown>> = {};
 
-  /** Re-key + hoist one tag rule subtree; returns the cleaned (media-free) rule. */
-  const processTagRule = (
-    rule: Record<string, unknown>,
-    tagPath: string,
-  ): Record<string, unknown> => {
+  /** Drop the base-width marker, which is not a query and would resolve to `@media --`. */
+  const withoutBaseWidth = (rule: Record<string, unknown>): Record<string, unknown> => {
     const cleaned: Record<string, unknown> = {};
     for (const [k, v] of Object.entries(rule)) {
-      if (!isPlainObject(v)) {
+      if (k !== "@--") {
         cleaned[k] = v;
-        continue;
       }
-      if (k.startsWith("@")) {
-        if (k === "@--") {
-          continue; // Base canvas width marker, not a real query.
-        }
-        mediaOut[k] ??= {};
-        const bucket = mediaOut[k];
-        const sel = `${SPECIMEN_SCOPE} ${tagPath}`;
-        bucket[sel] = mergeRules(
-          bucket[sel] as Record<string, unknown> | undefined,
-          stripAtKeys(v),
-        );
-        continue;
-      }
-      if (isTagPath(k)) {
-        cleaned[k] = processTagRule(v, `${tagPath} ${k}`);
-        continue;
-      }
-      cleaned[k] = v; // Pseudo/class/& sub-rules ride along under the re-keyed parent.
     }
     return cleaned;
   };
@@ -123,33 +77,36 @@ export function transposeStylebookStyle(effectiveStyle: JxStyle): JxStyle {
       out[k] = v; // Flat scalars + -- custom props.
       continue;
     }
+    if (k === "@--") {
+      continue; // Base canvas width marker, not a real query.
+    }
+    if (isKeyframesAtRule(k)) {
+      /* A keyframes body holds keyframe selectors — `from`, `to`, `50%` — which `isTagPath`
+         accepts and which re-keying would turn into `& .element-card-preview from`, a stop the
+         browser discards along with the rest of the animation. It has no selectors to confine. */
+      out[k] = v;
+      continue;
+    }
     if (k.startsWith("@")) {
-      if (k === "@--") {
-        continue;
-      }
       // Media block: re-key tag rules inside; non-tag keys (scalars/pseudo) apply to the root.
-      mediaOut[k] ??= {};
-      const bucket = mediaOut[k];
+      const bucket: Record<string, unknown> = {};
       for (const [mk, mv] of Object.entries(v)) {
         if (isPlainObject(mv) && isTagPath(mk)) {
-          const sel = `${SPECIMEN_SCOPE} ${mk}`;
-          bucket[sel] = mergeRules(bucket[sel] as Record<string, unknown> | undefined, mv);
+          bucket[`${SPECIMEN_SCOPE} ${mk}`] = withoutBaseWidth(mv);
         } else {
           bucket[mk] = mv;
         }
       }
+      out[k] = bucket;
       continue;
     }
     if (isTagPath(k)) {
-      out[`${SPECIMEN_SCOPE} ${k}`] = processTagRule(v, k);
+      out[`${SPECIMEN_SCOPE} ${k}`] = withoutBaseWidth(v);
       continue;
     }
     out[k] = v;
   }
 
-  for (const [mk, mv] of Object.entries(mediaOut)) {
-    out[mk] = isPlainObject(out[mk]) ? mergeRules(out[mk] as Record<string, unknown>, mv) : mv;
-  }
   return out as JxStyle;
 }
 

package/src/panels/stylebook-layers-panel.ts

@@ -1,135 +1,228 @@
 /// <reference lib="dom" />
-/** Stylebook layers panel — shows element/variable tree when in stylebook (settings) mode. */
+/**
+ * The Outline panel while the pane is showing Project Styles — the element catalogue and the
+ * document's own custom properties.
+ *
+ * **The body is a Jx document** (`surfaces/panel-stylebook-layers.json`, mounted by
+ * `surfaces/panel-stylebook-layers.ts`), so this module renders nothing and projects everything.
+ * What stays here is what is a DECISION: how the catalogue's recursive `$sections` flatten into a
+ * list, how a child's compound path is spelled, which children are duplicates of each other, which
+ * tags the open file has already styled, and which row the current selection marks. The surface
+ * reads values.
+ *
+ * The panel does not own the panel RECORD — `panels/layers-panel.ts` does, because the Outline is
+ * one panel with two bodies and only the record can know which the pane is asking for. That module
+ * calls {@link mountStylebookLayersPanel} on the stylebook side and {@link detachStylebookLayers}
+ * on the other, which is what takes this document back out again: lit paints its own branch into
+ * the same `.panel-content` and would otherwise leave the catalogue standing underneath the tree.
+ *
+ * @docs studio/design/stylebook
+ */
 
-import { html, nothing } from "lit-html";
-import { classMap } from "lit-html/directives/class-map.js";
 import { activeTab } from "../workspace/workspace";
 import { shell } from "../shell";
 import { componentRegistry } from "../files/components";
+import { mountStylebookLayersSurface } from "../surfaces/panel-stylebook-layers";
 
 import type { StylebookEntry } from "./stylebook-panel";
+import type {
+  StylebookLayersSurfaceHandle,
+  StylebookLayersValues,
+  StylebookRowView,
+  StylebookVariableView,
+} from "../surfaces/panel-stylebook-layers";
 import type { JxStyle } from "@jxsuite/schema/types";
-import type { TemplateResult } from "lit-html";
 import type { ComponentEntry } from "../files/components.js";
 
+/** What the panel is drawn from: the catalogue, and what selecting a row does. */
+export interface StylebookLayersCtx {
+  selectStylebookTag: (tag: string, media?: string | null, opts?: { panCanvas?: boolean }) => void;
+  stylebookMeta: { $sections: { label: string; elements: StylebookEntry[] }[] };
+}
+
+/** The row's own padding at depth 0, and what each level of nesting adds. */
+const INDENT_BASE = 8;
+const INDENT_STEP = 16;
+
 /**
+ * Whether the open file has already written a `& <tag>` block with something in it.
+ *
  * @param {JxStyle} rootStyle
  * @param {string} tag
  */
 function hasTagStyle(rootStyle: JxStyle, tag: string) {
   const s = rootStyle[`& ${tag}`];
-  return s && typeof s === "object" && Object.keys(s).length > 0;
+  return Boolean(s) && typeof s === "object" && Object.keys(s as object).length > 0;
 }
 
 /**
- * @param {{
- *   selectStylebookTag: (
- *     tag: string,
- *     media?: string | null,
- *     opts?: { panCanvas?: boolean },
- *   ) => void;
- *   stylebookMeta: { $sections: { label: string; elements: StylebookEntry[] }[] };
- * }} ctx
- * @returns {import("lit-html").TemplateResult}
+ * The leaf of the current selection.
+ *
+ * A selection is a compound path (`"ul li"`) and the catalogue draws one row per TAG, so the row
+ * that is marked is the one whose tag is the path's last segment. That is what the tree has always
+ * done; it is written down here because "selected" meaning something other than "equal" is exactly
+ * the kind of thing a reader assumes is a bug.
  */
-export function renderStylebookLayersTemplate(ctx: {
-  selectStylebookTag: (tag: string, media?: string | null, opts?: { panCanvas?: boolean }) => void;
-  stylebookMeta: { $sections: { label: string; elements: StylebookEntry[] }[] };
-}) {
-  const tab = activeTab.value;
-  const rootStyle = tab?.doc.document?.style || {};
-  const selectedTag = shell.stylebook.selection;
-  const selectedLeaf = selectedTag?.includes(" ") ? selectedTag.split(" ").pop() : selectedTag;
+function selectedLeaf(selection: string | null): string | null {
+  if (!selection) {
+    return null;
+  }
+  return selection.includes(" ") ? (selection.split(" ").pop() ?? null) : selection;
+}
 
-  if (shell.stylebook.tab === "elements") {
-    /**
-     * @param {StylebookEntry} entry
-     * @param {number} depth
-     * @param {string} parentPath
-     * @returns {import("lit-html").TemplateResult}
-     */
-    const renderEntryRow = (entry: StylebookEntry, depth = 0, parentPath = ""): TemplateResult => {
-      const { tag } = entry;
-      const fullPath = parentPath ? `${parentPath} ${tag}` : tag;
-      const uniqueChildren = entry.children
-        ? [...new Map(entry.children.map((c: StylebookEntry) => [c.tag, c])).values()]
-        : [];
-      return html`
-        <div
-          class=${classMap({
-            "layer-row": true,
-            selected: tag === selectedLeaf,
-          })}
-          style="padding-left:${8 + depth * 16}px"
-          @click=${(e: MouseEvent) => {
-            e.stopPropagation();
-            ctx.selectStylebookTag(fullPath, undefined, { panCanvas: true });
-          }}
-        >
-          <span class="layer-tag">${tag}</span>
-          <span
-            class="layer-label"
-            style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1"
-            >${entry.text || `<${tag}>`}</span
-          >
-          ${
-            hasTagStyle(rootStyle, tag)
-              ? html`<span
-                  style="width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0"
-                ></span>`
-              : nothing
-          }
-        </div>
-        ${uniqueChildren.map((child: StylebookEntry) => renderEntryRow(child, depth + 1, fullPath))}
-      `;
-    };
+/**
+ * Flatten one catalogue entry and everything under it into rows.
+ *
+ * Children are deduplicated by tag — a `<ul>` specimen carries two `<li>`s and they are one row,
+ * because the row selects a TAG and there is only one `& li` to write.
+ */
+function elementRows(
+  entry: StylebookEntry,
+  rootStyle: JxStyle,
+  leaf: string | null,
+  depth: number,
+  parentPath: string,
+  out: StylebookRowView[],
+): void {
+  const { tag } = entry;
+  const fullPath = parentPath ? `${parentPath} ${tag}` : tag;
+  out.push({
+    customized: hasTagStyle(rootStyle, tag),
+    indent: `${INDENT_BASE + depth * INDENT_STEP}px`,
+    key: fullPath,
+    kind: "element",
+    label: entry.text || `<${tag}>`,
+    selected: tag === leaf,
+    tag,
+  });
+  const children = entry.children
+    ? [...new Map(entry.children.map((c: StylebookEntry) => [c.tag, c])).values()]
+    : [];
+  for (const child of children) {
+    elementRows(child, rootStyle, leaf, depth + 1, fullPath, out);
+  }
+}
+
+/** The custom properties the open file declares, in the order it declares them. */
+function variableRows(rootStyle: JxStyle): StylebookVariableView[] {
+  return Object.entries(rootStyle)
+    .filter(([k]) => k.startsWith("--"))
+    .map(([name, value]) => ({ key: name, name, value: String(value) }));
+}
+
+/**
+ * What the surface should be showing right now.
+ *
+ * Exported because it is the whole of this module that is worth testing on its own: it is a pure
+ * function of the open document, the shell's stylebook state and the component registry.
+ *
+ * @param {StylebookLayersCtx} ctx
+ * @returns {StylebookLayersValues}
+ */
+export function stylebookLayersValues(ctx: StylebookLayersCtx): StylebookLayersValues {
+  const tab = activeTab.value;
+  const rootStyle = (tab?.doc.document?.style || {}) as JxStyle;
+  const { selection } = shell.stylebook;
+  const leaf = selectedLeaf(selection);
 
-    const elementRows: TemplateResult[] = [];
-    for (const section of ctx.stylebookMeta.$sections) {
-      for (const entry of section.elements) {
-        elementRows.push(renderEntryRow(entry, 0));
-      }
+  const rows: StylebookRowView[] = [];
+  for (const section of ctx.stylebookMeta.$sections) {
+    for (const entry of section.elements) {
+      elementRows(entry, rootStyle, leaf, 0, "", rows);
     }
-    const compRows = componentRegistry.map(
-      /** @param {import("../files/components.js").ComponentEntry} comp */ (
-        comp: ComponentEntry,
-      ) => html`
-        <div
-          class=${classMap({
-            "layer-row": true,
-            selected: comp.tagName === selectedTag,
-          })}
-          @click=${() =>
-            ctx.selectStylebookTag(comp.tagName, undefined, {
-              panCanvas: true,
-            })}
-        >
-          <span class="layer-tag component-tag" style="background:var(--accent)">⬡</span>
-          <span class="layer-label">${comp.tagName}</span>
-        </div>
-      `,
-    );
-    return html`${elementRows}${compRows}`;
   }
-  const style = rootStyle;
-  const vars = Object.entries(style).filter(([k]) => k.startsWith("--"));
-  if (vars.length === 0) {
-    return html`<div
-      style="padding:16px;text-align:center;color:var(--fg-dim);font-size:var(--spectrum-font-size-75, 12px)"
-    >
-      No variables defined
-    </div>`;
+  for (const comp of componentRegistry as ComponentEntry[]) {
+    rows.push({
+      customized: false,
+      indent: `${INDENT_BASE}px`,
+      key: comp.tagName,
+      kind: "component",
+      label: comp.tagName,
+      selected: comp.tagName === selection,
+      /* The glyph, not the tag: a component's tag IS its label here, and a badge repeating it
+         would be the same word twice on one 24px row. */
+      tag: "⬡",
+    });
   }
-  return html`${vars.map(
-    ([k, v]) => html`
-      <div class="layer-row">
-        <span class="layer-tag" style="font-size:10px;font-family:var(--font-mono)">var</span>
-        <span class="layer-label">${k}</span>
-        <span
-          style="font-size:var(--spectrum-font-size-50, 11px);color:var(--fg-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80px"
-          >${String(v)}</span
-        >
-      </div>
-    `,
-  )}`;
+
+  const variables = variableRows(rootStyle);
+  return {
+    hasVariables: variables.length > 0,
+    rows,
+    tab: shell.stylebook.tab,
+    variables,
+  };
+}
+
+/**
+ * The surface standing in the Navigator, and the node it was mounted into.
+ *
+ * One slot rather than a per-host map, for the reason `panels/elements-panel.ts` gives: there is
+ * one Navigator, so a mount into a DIFFERENT node is the old one being replaced, and holding both
+ * would leave the first one's effects running against a scope nobody writes any more.
+ */
+let standing: { host: HTMLElement; handle: StylebookLayersSurfaceHandle } | null = null;
+
+/**
+ * Keep the selected row on screen after a repaint.
+ *
+ * On a microtask, because the document is what draws the row: a scope written on this tick is a
+ * binding that runs on the next one, so a query made here and now would find the row the PREVIOUS
+ * projection marked (or, on the first paint, no rows at all).
+ */
+function revealSelectedRow(host: HTMLElement): void {
+  queueMicrotask(() => {
+    host
+      .querySelector('[part="row"][aria-current="true"]')
+      ?.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
+  });
+}
+
+/**
+ * Draw the catalogue — mounting the document the first time, updating it every time after.
+ *
+ * The document goes into `.panel-content`, not into the `.panel-body` this is handed, for the
+ * reason `panels/elements-panel.ts` states: only one of them is the node lit renders this panel's
+ * body into, and appending to the other would leave the catalogue drawn under whatever the
+ * Navigator paints next.
+ *
+ * The second parameter is `host` rather than `container` deliberately — see
+ * `scripts/check-pane-singletons.ts`'s {@link PANE_PARAM_NAMES}. This is the NAVIGATOR's node, not
+ * a pane's stage, and "which document is open" is the whole question the projection answers.
+ *
+ * @param {StylebookLayersCtx} ctx
+ * @param {HTMLElement} host - The painted `.panel-body`
+ */
+export function mountStylebookLayersPanel(ctx: StylebookLayersCtx, host: HTMLElement): void {
+  const target = host.querySelector<HTMLElement>(".panel-content") ?? host;
+  if (standing && (standing.host !== target || !standing.handle.connected())) {
+    standing.handle.dispose();
+    standing = null;
+  }
+  const values = stylebookLayersValues(ctx);
+  if (standing) {
+    standing.handle.update(values);
+  } else {
+    standing = {
+      handle: mountStylebookLayersSurface(target, values, {
+        selectRow: (path) => {
+          ctx.selectStylebookTag(path, undefined, { panCanvas: true });
+        },
+      }),
+      host: target,
+    };
+  }
+  revealSelectedRow(target);
+}
+
+/**
+ * Take the catalogue down.
+ *
+ * Called by the Outline's record when the pane is no longer showing Project Styles. Without it the
+ * document survives its own irrelevance: lit's branch renders into the range it owns inside
+ * `.panel-content` and leaves everything appended after it exactly where it was.
+ */
+export function detachStylebookLayers(): void {
+  standing?.handle.dispose();
+  standing = null;
 }