@jxsuite/studio 6.1.2 → 8.0.1

package/src/canvas/iframe-patch.ts

@@ -23,6 +23,7 @@ import { disposeSubtree, renderSubtreeIframe } from "./iframe-subtree";
 import {
   computeEmptyPlaceholderClass,
   EMPTY_PLACEHOLDER_CLASSES,
+  isRowBound,
   templateToEditDisplay,
 } from "../utils/edit-display";
 import type { IframeRenderCtx } from "./iframe-render";
@@ -342,7 +343,7 @@ function patchStyle(
   /* SAFETY: buildScope writes `$media` only from the document's own `$media` map or the runtime's
    * root media map, both Record<string, string>, and the host scope may not supply the key. */
   const mediaQueries = (ctx?.defs["$media"] as Record<string, string> | undefined) ?? {};
-  reapplyStyle(el, editModeStyle(node?.style), mediaQueries);
+  reapplyStyle(el, editModeStyle(node?.style), mediaQueries, ctx?.defs ?? {});
 }
 
 /** Write the node's display text, syncing the empty-placeholder class like the full render. */
@@ -371,8 +372,9 @@ function findElement(container: HTMLElement, path: (string | number)[]): HTMLEle
 }
 
 /**
- * Edit-mode style transform — mirrors prepareForEditMode (and the legacy patcher's editModeStyle):
- * top-level template-string values are blanked so no reactive bindings are created for them.
+ * Edit-mode style transform — mirrors prepareForEditMode: bindings are live and resolve against the
+ * render's scope, except a declaration that reads the repeater row, which the perimeter cannot
+ * supply and so is omitted.
  */
 function editModeStyle(style: JxStyle | undefined): JxStyle | undefined {
   if (!style || !isNonNullObject(style)) {
@@ -380,10 +382,9 @@ function editModeStyle(style: JxStyle | undefined): JxStyle | undefined {
   }
   const out: JxStyle = {};
   for (const [k, v] of Object.entries(style)) {
-    /* OMITTED, not blanked. It used to be written as `""`, which was a silent no-op while a
-       declaration went to `el.style` and is a malformed declaration now that it goes into a rule.
-       Dropping the key is what blanking always meant: the property falls back to the cascade. */
-    if (isString(v) && v.includes("${")) {
+    /* OMITTED, not blanked: `color: ` is a malformed declaration in a rule, and an absent one lets
+       the cascade answer, which is what blanking always meant. */
+    if (isRowBound(v)) {
       continue;
     }
     out[k] = v;

package/src/canvas/iframe-protocol.ts

@@ -77,6 +77,12 @@ export interface WireDiffMark {
 /** An artboard's whole mark set. Each side receives only its own; `[]` clears. */
 export type WireDiffMarks = readonly WireDiffMark[];
 
+/** A language as the frame applies it: the BCP 47 tag for `lang`, and its direction for `dir`. */
+export interface WireLocale {
+  locale: string;
+  dir: "ltr" | "rtl";
+}
+
 /** Messages the editor (parent) sends into the canvas iframe. */
 export type ParentToIframe =
   | { kind: "init"; gen: number }
@@ -135,6 +141,13 @@ export type ParentToIframe =
        * every re-render would close the panel the author is editing.
        */
       popoverOpen?: (string | number)[] | null;
+      /**
+       * The language the artboard is drawn in, carried on `render` for `colorScheme`'s reason: a
+       * frame that boots after the pane's locale was posted (a new host, a reload) would otherwise
+       * draw an Arabic document left to right until the locale next CHANGED. Absent or null clears
+       * `lang` and `dir`.
+       */
+      locale?: WireLocale | null;
       /** The dialog to draw open after this render, for the same reason. */
       dialogOpen?: (string | number)[] | null;
       gen: number;
@@ -188,8 +201,10 @@ export type ParentToIframe =
    * the frame — `localeDirection` is CLDR's answer via `Intl.Locale`, and the frame has no reason
    * to hold a second copy of the RTL script list.
    *
-   * `null` is "the document's own language": both attributes come off, and the frame falls back to
-   * whatever the rendered document declares.
+   * The host posts the language the pane DRAWS, not only an override: the preview choice, else the
+   * file's own, else the site default (`canvasLocaleOf`). `null` is a project that declares no
+   * locales: both attributes come off, and the frame falls back to whatever the rendered document
+   * declares.
    */
   | { kind: "setLocale"; locale: string | null; dir: "ltr" | "rtl" }
   /**
@@ -377,10 +392,14 @@ export type DropInstructionType = "reorder-above" | "reorder-below" | "make-chil
 
 /**
  * The kind of thing being dragged. `tree-node` carries the source's existing document path (a
- * move); `block` carries nothing on the wire — its full `fragment` (a {@link JxMutableNode}) is
- * retained PARENT-SIDE keyed by `dragSeq` and never crosses the boundary.
+ * move); `block` carries only its fragment's tag on the wire — its full `fragment` (a
+ * {@link JxMutableNode}) is retained PARENT-SIDE keyed by `dragSeq` and never crosses the boundary.
+ * The tag is what lets the iframe keep a block out of a paragraph (`iframe-drop.ts`); an OS file
+ * drag has none, and is placed as a block.
  */
-export type DragSrcKind = { type: "tree-node"; path: (string | number)[] } | { type: "block" };
+export type DragSrcKind =
+  | { type: "tree-node"; path: (string | number)[] }
+  | { type: "block"; tag?: string };
 
 /**
  * A display-only drop preview the iframe posts on `dragOver`: where the drop indicator should draw

package/src/canvas/iframe-render.ts

@@ -37,7 +37,7 @@ import { classifyRenderNode, jxPathSelector, serializeJxPath } from "./path-mapp
 import { elementForPath } from "./iframe-position";
 import type { AssetContext } from "./asset-resolve";
 import { SITE_STYLE_ID, buildSiteStyleCSS } from "@jxsuite/site/site-style";
-import type { CanvasMode, WireDiffMarks } from "./iframe-protocol";
+import type { CanvasMode, WireDiffMarks, WireLocale } from "./iframe-protocol";
 import { isNonNullObject, isString } from "@jxsuite/schema/guards";
 import type { JxDocument, JxElement, JxStyle } from "@jxsuite/schema/types";
 import type { PathMapCtx } from "./path-mapping";
@@ -631,6 +631,10 @@ export const STYLEBOOK_CSS = `
 .element-card-preview > * {
   max-width: 100%;
   margin: 0;
+}
+/* A list keeps its inline-start padding: its markers are drawn in it, and with none they are
+   clipped by the card ("1." shows as "."). Every other specimen sits flush in its card. */
+.element-card-preview > :not(ol, ul, menu) {
   padding: 0;
 }
 .element-card-preview > hr {
@@ -728,6 +732,49 @@ export function applyPreviewColorScheme(doc: Document, scheme: "light" | "dark"
   }
 }
 
+/** The `lang` and `dir` a frame's root booted with, which a frame with no language goes back to. */
+export interface LocaleBaseline {
+  lang: string | null;
+  dir: string | null;
+}
+
+/** Read the root's `lang` and `dir` as the frame booted them (`canvas.html` is `lang="en"`). */
+export function captureLocaleBaseline(doc: Document): LocaleBaseline {
+  const root = doc.documentElement;
+  return { dir: root.getAttribute("dir"), lang: root.getAttribute("lang") };
+}
+
+/** Write one root attribute, or remove it for null. */
+function setRootAttribute(root: Element, name: string, value: string | null): void {
+  if (value === null) {
+    root.removeAttribute(name);
+  } else {
+    root.setAttribute(name, value);
+  }
+}
+
+/**
+ * Set the artboard's language (studio.md §20.2): `lang` and `dir` on the frame's root, the only
+ * writer of either. `dir` is what makes an RTL document actually mirror, and `lang` is what CSS's
+ * `:lang()` and the font stack select on. The root survives a render, which replaces only the
+ * container's children, so the value holds until the next one arrives.
+ *
+ * `null`, a project that declares no locales, restores the language the frame booted with rather
+ * than removing it, so applying the value on every render does not strip `canvas.html`'s
+ * `lang="en"` from every canvas of a monolingual project. A left-to-right language writes no
+ * `dir="ltr"`, as the built page never does (`site-architecture.md` §13.4): it restores the booted
+ * `dir`.
+ */
+export function applyPreviewLocale(
+  doc: Document,
+  locale: WireLocale | null,
+  baseline: LocaleBaseline,
+): void {
+  const root = doc.documentElement;
+  setRootAttribute(root, "lang", locale?.locale ?? baseline.lang);
+  setRootAttribute(root, "dir", locale?.dir === "rtl" ? "rtl" : baseline.dir);
+}
+
 /**
  * Draw the popover at `path` open, and every other one closed.
  *

package/src/canvas/iframe-subtree.ts

@@ -15,7 +15,7 @@ import { releaseElementStyles, renderNode, runScoped } from "@jxsuite/runtime";
 import { isNumber, isString } from "@jxsuite/schema/guards";
 import { getNodeAtPath } from "../state";
 import { makeStamper } from "./iframe-render";
-import { prepareForEditMode } from "../utils/edit-display";
+import { prepareForEditMode, sampleRowAt } from "../utils/edit-display";
 import { stripEventHandlers } from "../utils/strip-events";
 import type { IframeRenderCtx } from "./iframe-render";
 import type { JxPath } from "../state";
@@ -47,7 +47,10 @@ export function renderSubtreeIframe(
   if (node === undefined) {
     throw new Error(`iframe-patch-node-not-found:${docPath.join("/")}`);
   }
-  const def = isString(node) ? node : prepareForEditMode(stripEventHandlers(node));
+  // Inside a repeater, the template is drawn with the sample row the full render used.
+  const def = isString(node)
+    ? node
+    : prepareForEditMode(stripEventHandlers(node), sampleRowAt(shadowDoc, docPath));
   const { result: rendered, stop } = runScoped(() =>
     renderNode(def, ctx.defs, {
       _path: docPathToRenderPath(docPath, ctx),

package/src/canvas/npm-modules.ts

@@ -0,0 +1,22 @@
+/**
+ * Where a live render imports an `npm:` package from (spec.md §5.3, 4c).
+ *
+ * The dev server answers `/node_modules/<package>/<subpath>` by resolving the package's `exports`
+ * and bundling the entry on demand (`@jxsuite/server`), the same URL space a bare `$elements`
+ * specifier and a bare `$head` asset are already fetched from. Both realms that render a project
+ * live install it into the runtime (`setNpmModuleResolver`): the canvas frame against its own
+ * address, and the editor window, which draws the Site panel's and the Content home's previews,
+ * against the project's asset origin.
+ *
+ * Dependency-free so it rides in the slim canvas bundle.
+ */
+
+/**
+ * The URL a package specifier is imported from, under `base`.
+ *
+ * @param specifier - `@scope/pkg/subpath`, as the document wrote it after `npm:`
+ * @param base - The origin (or any URL on it) that serves the project
+ */
+export function npmModuleUrl(specifier: string, base: string): string {
+  return new URL(`/node_modules/${specifier}`, base).href;
+}

package/src/canvas/preview-navigate.ts

@@ -24,3 +24,19 @@ export function setPreviewNavigateHandler(next: PreviewNavigateHandler | null):
 export function getPreviewNavigateHandler(): PreviewNavigateHandler | null {
   return handler;
 }
+
+/**
+ * Hand a URL to the user's real browser.
+ *
+ * Reuses the seam the desktop launchers already register for Preview link clicks, which routes
+ * through the OS rather than navigating a webview with no address bar; the browser build falls back
+ * to a new tab. One function, because Open in Browser and the Publish workspace's Visit site and
+ * deployment links all mean the same thing by "open this outside Studio".
+ */
+export function openUrlExternally(url: string): void {
+  if (handler) {
+    handler(url);
+    return;
+  }
+  window.open(url, "_blank", "noopener,noreferrer");
+}

package/src/canvas/repeater-sources.ts

@@ -0,0 +1,200 @@
+/**
+ * The data a repeater is drawn from in Edit and Design, resolved before the canvas renders.
+ *
+ * Edit mode draws a repeater as one instance of its row template, with the repeater's first item as
+ * that instance's sample row (`utils/edit-display.ts`). A collection is a class-backed state entry
+ * (`ContentCollection`) the canvas runtime resolves through the dev proxy AFTER its first render,
+ * so the instance connected with an empty row: a component that formats a date or a locale threw,
+ * was reported as not rendered, and drew itself only when the data arrived. Resolving the entry
+ * here, the way `page-params.ts` bakes a param-bound entry for Preview, puts the row in the state
+ * the canvas builds its scope from, so the first render is a render of the data.
+ *
+ * The same resolution serves every mode for an entry that names an enabled extension's class by a
+ * bare `$prototype` ({@link extensionClassKeys}), which the build also resolves before rendering.
+ *
+ * Only an entry whose configuration holds no template is baked: one that does is re-resolved by the
+ * runtime whenever what it reads changes, and a baked copy would freeze it. Answers are cached by
+ * the entry's configuration until the project's content changes ({@link
+ * invalidateRepeaterSources}).
+ *
+ * @docs studio/interface/canvas
+ */
+
+import { isJsonObject, isNodeObject, isRef, isString } from "@jxsuite/schema/guards";
+import { getPlatform } from "../platform";
+import type {
+  JsonObject,
+  JsonValue,
+  JxDocumentValue,
+  JxMutableNode,
+  JxStateDefinition,
+} from "@jxsuite/schema/types";
+
+/** What the backend answered for one entry, or `null` when it could not resolve it. */
+type Resolved = JsonValue | null;
+
+/** Resolved entries by their request body, so a re-render does not ask the backend again. */
+let _cache = new Map<string, Promise<Resolved>>();
+
+/** Forget every resolved entry; the next render asks the backend again. */
+export function invalidateRepeaterSources(): void {
+  _cache = new Map();
+}
+
+/** The top-level state key a `#/state/<key>/…` pointer reads, or null for any other pointer. */
+function stateKeyOf(ref: string): string | null {
+  if (!ref.startsWith("#/state/")) {
+    return null;
+  }
+  const [key] = ref.slice("#/state/".length).split("/");
+  return key ? key.replaceAll("~1", "/").replaceAll("~0", "~") : null;
+}
+
+/** Whether a configuration value holds a `${…}` template anywhere inside it. */
+function holdsTemplate(value: JsonValue | undefined): boolean {
+  if (isString(value)) {
+    return value.includes("${");
+  }
+  if (Array.isArray(value)) {
+    return value.some((member) => holdsTemplate(member));
+  }
+  return isJsonObject(value) && Object.values(value).some((member) => holdsTemplate(member));
+}
+
+/** Extension class names to their descriptor paths, as `getEffectiveImports` merges them. */
+export type ClassPaths = Readonly<Record<string, string>>;
+
+/**
+ * The `$src` a class-backed state entry resolves from: its own, else the enabled extension class
+ * its bare `$prototype` names (spec.md §12.5), else null.
+ */
+function classSourceOf(entry: JsonObject, classes: ClassPaths): string | null {
+  if (isString(entry.$src)) {
+    return entry.$src;
+  }
+  return isString(entry.$prototype) && Object.hasOwn(classes, entry.$prototype)
+    ? (classes[entry.$prototype] ?? null)
+    : null;
+}
+
+/** Whether a state entry is a class-backed source the backend can resolve once, for good. */
+function isStaticClassEntry(
+  entry: JxStateDefinition | undefined,
+  classes: ClassPaths = {},
+): entry is JsonObject {
+  return (
+    isJsonObject(entry) &&
+    isString(entry.$prototype) &&
+    classSourceOf(entry, classes) !== null &&
+    !holdsTemplate(entry)
+  );
+}
+
+/**
+ * The state keys of `doc` that name an enabled extension's class by a bare `$prototype` (a layout's
+ * `{ "$prototype": "ContentEntry", ... }`) and can be resolved once.
+ *
+ * The build resolves these before any template runs (`compiler/src/site/prototype-resolver.ts`).
+ * Left to the canvas runtime, the class's descriptor path, a file on disk, was first fetched as a
+ * URL of the canvas, answered 404, and only then asked of the dev proxy: one failed request per
+ * entry per render, on every page of a site whose layout reads its navigation this way.
+ */
+export function extensionClassKeys(doc: JxMutableNode, classes: ClassPaths): string[] {
+  return Object.entries(doc.state ?? {})
+    .filter(
+      ([, entry]) =>
+        isJsonObject(entry) && !isString(entry.$src) && isStaticClassEntry(entry, classes),
+    )
+    .map(([key]) => key);
+}
+
+/**
+ * The state keys `doc`'s repeaters read their items from, among them only the class-backed entries
+ * {@link bakeRepeaterSources} can resolve.
+ */
+export function repeaterSourceKeys(doc: JxMutableNode): string[] {
+  const keys = new Set<string>();
+  const walk = (value: JxDocumentValue | undefined): void => {
+    if (Array.isArray(value)) {
+      for (const member of value) {
+        walk(member);
+      }
+      return;
+    }
+    if (!isNodeObject(value)) {
+      return;
+    }
+    if (value.$prototype === "Array" && isRef(value.items)) {
+      const key = stateKeyOf(value.items.$ref);
+      if (key) {
+        keys.add(key);
+      }
+    }
+    walk(value.map);
+    walk(value.children);
+    for (const branch of Object.values(value.cases ?? {})) {
+      walk(branch);
+    }
+  };
+  walk(doc.children);
+  const state = doc.state ?? {};
+  return [...keys].filter((key) => isStaticClassEntry(state[key]));
+}
+
+/** Say why an entry could not be resolved, and answer that it was not. */
+function unresolved(key: string, error: Error | string): Resolved {
+  console.warn(`canvas: could not resolve state.${key} before the render:`, error);
+  return null;
+}
+
+/**
+ * `renderDoc` with each of `keys` replaced by its resolved value, or `renderDoc` itself when there
+ * is nothing to resolve. A rebuild, never a write: the render document shares its `state` with the
+ * tab's source document. An entry the backend cannot resolve is left as written, and the runtime's
+ * own resolution remains the fallback.
+ */
+export async function bakeRepeaterSources(
+  renderDoc: JxMutableNode,
+  keys: readonly string[],
+  docBase?: string,
+  classes: ClassPaths = {},
+): Promise<JxMutableNode> {
+  const platform = getPlatform();
+  const { resolveClass } = platform;
+  const source = renderDoc.state;
+  if (keys.length === 0 || !resolveClass || !source) {
+    return renderDoc;
+  }
+  const state = { ...source };
+  await Promise.all(
+    keys.map(async (key) => {
+      const entry = state[key];
+      if (!isStaticClassEntry(entry, classes)) {
+        return;
+      }
+      const body: JsonObject = { ...entry, $src: classSourceOf(entry, classes) };
+      if (docBase) {
+        body.$base = docBase;
+      }
+      const id = JSON.stringify(body);
+      let pending = _cache.get(id);
+      if (!pending) {
+        pending = resolveClass.call(platform, body).then(
+          (value): Resolved => value ?? null,
+          (error: Error | string) => {
+            _cache.delete(id);
+            return unresolved(key, error);
+          },
+        );
+        _cache.set(id, pending);
+      }
+      const value = await pending;
+      if (value !== null) {
+        /* SAFETY: the backend answers with the class's resolved JSON value (no `$prototype`), which
+           the runtime reads as a naked-value state entry, so it is a JxStateDefinition. */
+        state[key] = value as JxStateDefinition;
+      }
+    }),
+  );
+  return { ...renderDoc, state };
+}

package/src/canvas/stage-scrollbar.ts

@@ -92,10 +92,14 @@ export function trackStageScrollbar(surface: CanvasSurface, scroller: HTMLElemen
   const write = () => {
     cell.style.setProperty(STAGE_SCROLLBAR_VAR, `${scrollbarWidthOf(scroller)}px`);
   };
+  /* No measurement here: observing an element delivers its first notification after the frame's
+     layout, so the observer's own first call is the initial write. Reading `offsetWidth` here, on a
+     stage the render has just rebuilt, forced a style recalculation of the whole document (24 ms on
+     each return to Design in the perf trace); the cell keeps the `0px` the release wrote until
+     then, which is what a stage with no scrollbar yet has. */
   const observer = new ResizeObserver(write);
   observer.observe(scroller);
   surface.stageScrollbar = { observer, scroller };
-  write();
 }
 
 /**

package/src/canvas/surface-registry.ts

@@ -101,6 +101,12 @@ export interface CanvasSurface {
    */
   prevStylebookFilter: string | null;
   prevStylebookCustomizedOnly: boolean | null;
+  /**
+   * The breakpoint this stage's catalogue was drawn at. The sheet is ONE artboard at the active
+   * breakpoint, so a size switch changes which board exists and must rebuild it, exactly as a
+   * filter change does. `undefined` is "never drawn"; `null` is the base.
+   */
+  prevStylebookMedia?: string | null | undefined;
   /** Teardown for this stage's source-mode collab binding (unbind + release the lock). */
   sourceCollabCleanup: (() => void) | null;
   /**

package/src/commands/app-commands.ts

@@ -54,12 +54,14 @@ import { collabCommands } from "../collab/collab-commands";
 import { assistantCommands } from "../panels/ai-panel";
 import { preferencesCommands } from "../settings/preferences-dialog";
 import { aboutCommands } from "../about/about-modal";
-import { libraryCommands } from "../browse/library-commands";
-import { sourceControlCommands } from "../panels/git-panel";
+import { contentViewCommands } from "../browse/library-commands";
+import { sourceControlCommands } from "../publish/source-control";
 import { publishCommands } from "../publish/publish-commands";
 import { gridViewCommands } from "../grid/grid-panel";
 import { redirectsCommands } from "../grid/redirects-grid";
 import { contentCommands } from "../content/entry-commands";
+import { addNewCommands } from "../create/add-new-commands";
+import { mediaCommands } from "../media/media-commands";
 import { i18nCommands } from "../i18n/i18n-commands";
 import { newProjectCommands } from "../new-project/new-project-modal";
 import { canvasCommands } from "../editor/shortcuts";
@@ -67,6 +69,7 @@ import { formatCommands, registerSelectionCommands } from "../panels/block-actio
 import { fileFormatCommands } from "../format/convert-file";
 import { registerTabCommands } from "../workspace/workspace";
 import { derivationCommands, noopDerivationDeps } from "../workspace/pane-derive";
+import { workspaceBackCommands } from "../workspace/workspace-back";
 import type { AnyCommand } from "./registry";
 
 /** A verb set that does nothing — the checks read declarations, never behaviour. */
@@ -111,13 +114,15 @@ function viaRegistration(): AnyCommand[] {
  */
 export function appCommandSet(): AnyCommand[] {
   return [
-    // The panel roster is the one dependency the checks must supply for real: the ⌘1–8 records are
-    // Generated from it, so an empty one would hide eight commands (and their chords) from the
-    // Level check, the chrome budget and the generated keyboard sheet alike.
+    // The panel roster is the one dependency the checks must supply for real: the `panel.focus.*`
+    // Records are generated from it, so an empty one would hide a command per panel from the level
+    // Check, the chrome budget and the generated command sheet alike.
     ...defaultCommands({ ...noopCommandDeps(), panelRoster: panelFocusRoster() }),
     ...viaRegistration(),
     ...derivationCommands(noopDerivationDeps()),
     ...shellViewCommands({ inspectorTab: () => DEFAULT_INSPECTOR_TAB, setInspectorTab: NO_OP }),
+    // Back to a strip-less workspace's home: the pane context bar's Back control, and Escape.
+    ...workspaceBackCommands({ closeTab: NO_OP, setCanvasMode: NO_OP }),
     ...canvasViewCommands({
       getCanvasMode: () => "design",
       renderPane: NO_OP,
@@ -150,8 +155,13 @@ export function appCommandSet(): AnyCommand[] {
     ...assistantCommands(),
     ...preferencesCommands(),
     ...aboutCommands(),
-    ...libraryCommands(),
+    // The Content home's verbs: which collection it shows, and that collection's own view.
+    ...contentViewCommands(),
     ...contentCommands(),
+    // Add new (`file.new`): the one creation dialog, and its no-dialog form for a named kind.
+    ...addNewCommands(),
+    // The Media workspace's four verbs: browse, upload, replace and delete (studio.md §22.6).
+    ...mediaCommands(),
     // The four translation verbs. `i18n.switchLocale` is deliberately not among them: it is a
     // Rendering context, defined in `canvas/canvas-utils.ts` beside the per-tab UI state it writes.
     ...i18nCommands(),

package/src/commands/budget.ts

@@ -15,8 +15,8 @@
  * region table, because `registerPanel()` did not exist. It does now, so the two `rail/*` rows are
  * a QUERY over `railDeclarations()` ({@link dockTabs}) and adding a ninth rail panel fails this
  * check without anyone remembering to update a list. The two rows that remain declared are the two
- * docks whose tab sets this module cannot see from a bare Bun process: the Inspector's four come
- * from `commands/defaults.ts`'s `INSPECTOR_TABS` (a query in all but name), and the Bottom dock's
+ * docks whose tab sets this module cannot see from a bare Bun process: the Inspector's three come
+ * from `commands/defaults.ts`'s `INSPECTOR_STRIP` (a query in all but name), and the Bottom dock's
  * four are records in `panels/bottom-dock.ts`, which renders lit templates and therefore cannot be
  * imported here. `tests/bottom-dock.test.ts` asserts the declared row and the registered set are
  * the same four titles, so the copy cannot drift — the same bargain `tests/right-panel.test.ts`
@@ -24,7 +24,7 @@
  * joins them the way it already joins the rail.
  */
 
-import { INSPECTOR_TABS } from "./defaults";
+import { INSPECTOR_STRIP } from "./defaults";
 
 /** The caps. Raising either one is a design decision, so it happens here, in one place. */
 export const CHROME_BUDGET = {
@@ -65,10 +65,12 @@ export interface DockDeclaration {
 /**
  * The tabbed regions that are still WRITTEN DOWN rather than observed.
  *
- * The Inspector's row is a query in all but name — `INSPECTOR_TABS` is the list `right-panel.ts`
- * renders and `⌘⇧1–4` address, so a fifth inspector tab fails this check in the commit that adds
- * it. The Bottom dock's row is the same shape: the four ids live in `shell.ts`'s `BOTTOM_TAB_IDS`
- * (so `view.setBottomTab`'s enum can be read in a bare Bun process) and the four RECORDS live in
+ * The Inspector's row is a query in all but name — `INSPECTOR_STRIP` is the strip `right-panel.ts`
+ * renders (Page · Element · Assistant), so a fifth strip tab fails this check in the commit that
+ * adds it. Element's Content · Style · Logic sub-switch lives inside a tab's body and is not
+ * counted: it is three views of one target, not three places (`studio-ui-guidelines.md` §12.2). The
+ * Bottom dock's row is the same shape: the four ids live in `shell.ts`'s `BOTTOM_TAB_IDS` (so
+ * `view.setBottomTab`'s enum can be read in a bare Bun process) and the four RECORDS live in
  * `panels/bottom-dock.ts`. It inherited this cap before it existed, which is why Deploy folded into
  * Activity rather than becoming a fifth tab.
  *
@@ -78,7 +80,7 @@ export interface DockDeclaration {
  * those could disagree.
  */
 export const DECLARED_DOCK_TABS: readonly DockDeclaration[] = [
-  { dock: "inspector", tabs: INSPECTOR_TABS.map((tab) => tab.title) },
+  { dock: "inspector", tabs: INSPECTOR_STRIP.map((tab) => tab.title) },
   { dock: "bottom", tabs: ["Problems", "Logic", "Activity"] },
 ];