@jxsuite/studio 6.1.2 → 8.0.0

package/src/utils/edit-display.ts

@@ -3,10 +3,19 @@
  * Edit-mode display transforms — extracted from studio.js (Phase 4i). Pure stateless functions that
  * convert document trees for visual editing (template expressions, $map, $switch, empty
  * placeholders).
+ *
+ * @docs studio/interface/modes
  */
 
 import type { JxDocumentValue, JxMutableNode } from "@jxsuite/schema/types";
-import { displayTagName, isNodeObject, isNonNullObject, isString } from "@jxsuite/schema/guards";
+import {
+  displayTagName,
+  isNodeObject,
+  isNonNullObject,
+  isNumber,
+  isRef,
+  isString,
+} from "@jxsuite/schema/guards";
 import { isDocumentContainer } from "./strip-events";
 import type { RebuiltNode } from "./strip-events";
 
@@ -57,6 +66,37 @@ function isImageUrlKey(key: string): boolean {
   return IMAGE_KEY_RE.test(key);
 }
 
+/** A template that reads the repeater row (`item`, `index`, `$map`), which edit mode cannot supply. */
+const ROW_BINDING_RE = /(?<![\w$.])(?:item|index|\$map)\b/u;
+
+/** Whether a value is a template or `$ref` that reads the repeater row. */
+export function isRowBound(value: JxDocumentValue | undefined): boolean {
+  if (isString(value)) {
+    return value.includes("${") && ROW_BINDING_RE.test(value);
+  }
+  return isNodeObject(value) && isString(value.$ref) && /^(?:#\/)?\$map\//u.test(value.$ref);
+}
+
+/**
+ * What a row-bound value shows in the perimeter: link targets are inert, image-like keys the
+ * placeholder image, anything else its readable binding text.
+ *
+ * @param {string} key
+ * @param {JxDocumentValue | undefined} value
+ */
+function rowBoundDisplay(key: string, value: JxDocumentValue | undefined): string {
+  if (key === "href" || key === "action") {
+    return "";
+  }
+  if (isImageUrlKey(key)) {
+    return PLACEHOLDER_IMG;
+  }
+  if (isString(value)) {
+    return templateToEditDisplay(value);
+  }
+  return isNodeObject(value) && isString(value.$ref) ? refDisplayLabel(value.$ref) : "";
+}
+
 const textTags = new Set([
   "p",
   "h1",
@@ -118,6 +158,31 @@ export const EMPTY_PLACEHOLDER_CLASSES = [
   "empty-container-placeholder",
 ] as const;
 
+/** The style keys that give an element a size of its own: its box, not its content, sets it. */
+const SIZING_KEYS = ["width", "height", "inlineSize", "blockSize"] as const;
+
+/**
+ * Whether the node's own style fixes its width or height — a dot, a bar, a spacer.
+ *
+ * Such an element is drawn as a SHAPE, and an empty one is not missing anything: the jxsuite.com
+ * home's 6px status dot is an empty `<span>` sized in its style, and the text placeholder turned it
+ * into a column of letters one glyph wide over the hero. A placeholder that changes the box the
+ * author sized (the container one sets a `min-height` and a border) misdraws the page it is meant
+ * to explain, so a sized element gets none. Only the top-level declaration counts: a size set under
+ * a media query or a state is a variant of a box whose base the content still sizes.
+ */
+function fixesItsOwnSize(node: JxMutableNode): boolean {
+  const { style } = node;
+  if (!isNonNullObject(style)) {
+    return false;
+  }
+  return SIZING_KEYS.some((key) => {
+    const value = style[key];
+    const text = isNumber(value) ? String(value) : isString(value) ? value.trim() : "";
+    return text !== "" && text !== "auto";
+  });
+}
+
 /**
  * The empty-placeholder class prepareForEditMode would add for this node, or null. Used by the
  * canvas patcher to keep placeholder classes in sync when patching text without a full render.
@@ -136,6 +201,9 @@ export function computeEmptyPlaceholderClass(node: JxMutableNode): string | null
   if (Array.isArray(node.children) && node.children.length > 0) {
     return null;
   }
+  if (fixesItsOwnSize(node)) {
+    return null;
+  }
   if (textTags.has(displayTagName(node.tagName))) {
     return "empty-text-placeholder";
   }
@@ -181,15 +249,184 @@ export function restoreTemplateExpressions(el: HTMLElement) {
  * @param {JxMutableNode} arrayObj
  * @returns {JxMutableNode}
  */
-function arrayToPerimeter(arrayObj: JxMutableNode): JxMutableNode {
+function arrayToPerimeter(arrayObj: JxMutableNode, row: SampleRow): JxMutableNode {
   const template = arrayObj.map;
   return {
-    children: isNonNullObject(template) ? [prepareForEditMode(template)] : [],
+    children: isNonNullObject(template)
+      ? [prepareNode(template, sampleRowOf(arrayObj.items, row))]
+      : [],
     className: "repeater-perimeter",
     tagName: "div",
   };
 }
 
+// ─── Live component props ────────────────────────────────────────────────────
+
+/**
+ * The row a repeater's template is drawn with in edit mode, as a JavaScript expression the runtime
+ * evaluates in the template's own scope, or null outside a repeater or where the repeater's items
+ * cannot be read.
+ *
+ * It is the repeater's FIRST item. A perimeter draws one instance of the template, and a component
+ * inside it used to be handed each bound prop's display text (`❪ item.data.date ❫`) as its value.
+ * Text survives that; a component that formats the prop does not: `Intl/formatDate` and a locale
+ * tag reject it with a `RangeError` (spec.md §16.4), and the instance was not rendered at all. The
+ * first item is real data of exactly the shape the template was written for, and it is the row
+ * Preview draws first.
+ */
+export type SampleRow = string | null;
+
+/** A JSON value as a JavaScript literal: JSON is a subset of ECMAScript since ES2019. */
+function jsLiteral(value: JxDocumentValue): string {
+  return JSON.stringify(value);
+}
+
+/**
+ * A pointer the runtime resolves, as a JavaScript accessor over the template parameters, or null
+ * for a scheme a template cannot reach (`window#/`, `$defs`, an external file).
+ */
+function refAccessor(ref: string): string | null {
+  const pointer = ref.startsWith("#/") ? ref.slice(2) : ref;
+  const [head, ...rest] = pointer.split("/");
+  const base = head === "state" || head === "$map" ? head : null;
+  if (base === null) {
+    return null;
+  }
+  // JSON Pointer unescaping (RFC 6901): `~1` is `/`, `~0` is `~`, in that order.
+  const keys = rest.map((seg) => seg.replaceAll("~1", "/").replaceAll("~0", "~"));
+  return base + keys.map((key) => `?.[${jsLiteral(key)}]`).join("");
+}
+
+/** Evaluate `expr` where `item`, `index` and `$map` are the sample `row`, or as-is with no row. */
+function inRow(expr: string, row: SampleRow): string {
+  if (row === null) {
+    return `(${expr})`;
+  }
+  return `((r) => ((item, index, $map) => (${expr}))(r, 0, { index: 0, item: r }))(${row})`;
+}
+
+/** The first item of a repeater's `items`, read inside the enclosing sample `row` (if any). */
+function sampleRowOf(items: JxDocumentValue | undefined, row: SampleRow): SampleRow {
+  if (Array.isArray(items)) {
+    return `${jsLiteral(items)}[0]`;
+  }
+  if (isRef(items)) {
+    const accessor = refAccessor(items.$ref);
+    return accessor === null ? null : `${inRow(accessor, row)}?.[0]`;
+  }
+  const parts = isString(items) ? templateExpressions(items) : [];
+  if (isString(items) && parts.length === 1 && isWholeTemplate(items, parts[0]!)) {
+    return `${inRow(parts[0]!.expr, row)}?.[0]`;
+  }
+  return null;
+}
+
+/** One `${…}` of a template: where it starts and ends in the string, and its expression. */
+interface TemplatePart {
+  start: number;
+  end: number;
+  expr: string;
+}
+
+/** Whether `part` is the whole of `template`: one expression end to end, so it keeps its type. */
+function isWholeTemplate(template: string, part: TemplatePart): boolean {
+  return part.start === 0 && part.end === template.length - 1;
+}
+
+/**
+ * Each `${…}` of a template, located by brace depth rather than by pattern: an expression may hold
+ * an object literal or a nested template, which a `[^}]+` pattern cuts short.
+ */
+function templateExpressions(str: string): TemplatePart[] {
+  const found: TemplatePart[] = [];
+  let at = str.indexOf("${");
+  while (at !== -1) {
+    let depth = 0;
+    let end = -1;
+    for (let i = at + 1; i < str.length; i += 1) {
+      if (str[i] === "{") {
+        depth += 1;
+      } else if (str[i] === "}") {
+        depth -= 1;
+        if (depth === 0) {
+          end = i;
+          break;
+        }
+      }
+    }
+    if (end === -1) {
+      break;
+    }
+    found.push({ end, expr: str.slice(at + 2, end), start: at });
+    at = str.indexOf("${", end + 1);
+  }
+  return found;
+}
+
+/**
+ * A bound component prop as edit mode passes it: the binding itself, evaluated LIVE by the runtime
+ * (against the page's own state and `$page`, and inside a repeater against its sample row) and
+ * guarded, so a binding with nothing to read yet (a collection still loading, an empty one) reads
+ * as the empty string, a component prop's usual default, rather than throwing out of the binding's
+ * effect.
+ *
+ * Display text is what edit mode shows for a binding the PAGE draws, because the author edits that
+ * text in place. A component's prop is not drawn by the page: the component decides what it means,
+ * and a date, a locale, a count or a colour cannot be a label.
+ */
+export function liveEditProp(template: string, row: SampleRow = null): string {
+  const parts = templateExpressions(template);
+  if (parts.length === 0) {
+    return template;
+  }
+  let out = "";
+  let last = 0;
+  for (const { start, end, expr } of parts) {
+    out += template.slice(last, start);
+    out += `\${(() => { try { return ${inRow(expr, row)}; } catch { return ""; } })()}`;
+    last = end + 1;
+  }
+  return out + template.slice(last);
+}
+
+/**
+ * A `$ref`-bound component prop in edit mode: a scope pointer resolves live as it is, and a row
+ * pointer (`$map/item/…`) is read from the sample row, or dropped where there is none so the
+ * component keeps its own default.
+ */
+function liveEditRefProp(ref: string, row: SampleRow): JxDocumentValue | undefined {
+  const pointer = ref.startsWith("#/") ? ref.slice(2) : ref;
+  if (pointer !== "$map" && !pointer.startsWith("$map/")) {
+    return { $ref: ref };
+  }
+  const accessor = refAccessor(ref);
+  return row === null || accessor === null ? undefined : liveEditProp(`\${${accessor}}`, row);
+}
+
+/**
+ * The sample row of the repeater template at `path` in `doc` (what {@link prepareForEditMode} draws
+ * a perimeter's instance with), so a subtree re-rendered on its own (`iframe-subtree.ts`) is
+ * prepared exactly as the full render prepared it.
+ */
+export function sampleRowAt(doc: JxDocumentValue, path: readonly (string | number)[]): SampleRow {
+  let node: JxDocumentValue | undefined = doc;
+  let row: SampleRow = null;
+  for (const seg of path) {
+    if (Array.isArray(node)) {
+      node = isNumber(seg) ? node[seg] : undefined;
+      continue;
+    }
+    if (!isNodeObject(node)) {
+      return row;
+    }
+    if (seg === "map" && node.$prototype === "Array") {
+      row = sampleRowOf(node.items, row);
+    }
+    node = isString(seg) ? node[seg] : undefined;
+  }
+  return row;
+}
+
 /**
  * The text a `$ref` binding shows in edit mode: its pointer, with the `#/state/` prefix dropped.
  *
@@ -210,13 +447,33 @@ function refDisplayLabel(ref: string): string {
  * @param {JxMutableNode} node
  * @returns {JxMutableNode}
  */
-export function prepareForEditMode(node: JxMutableNode): JxMutableNode;
-export function prepareForEditMode(node: JxDocumentValue): JxDocumentValue;
-export function prepareForEditMode(node: JxDocumentValue | undefined): JxDocumentValue | undefined;
-export function prepareForEditMode(node: JxDocumentValue | undefined): JxDocumentValue | undefined {
+export function prepareForEditMode(node: JxMutableNode, row?: SampleRow): JxMutableNode;
+export function prepareForEditMode(node: JxDocumentValue, row?: SampleRow): JxDocumentValue;
+export function prepareForEditMode(
+  node: JxDocumentValue | undefined,
+  row?: SampleRow,
+): JxDocumentValue | undefined;
+export function prepareForEditMode(
+  node: JxDocumentValue | undefined,
+  row: SampleRow = null,
+): JxDocumentValue | undefined {
+  return prepareNode(node, row);
+}
+
+/** {@link prepareForEditMode} for one value, inside the sample `row` of its enclosing repeater. */
+function prepareNode(node: JxMutableNode, row: SampleRow): JxMutableNode;
+function prepareNode(node: JxDocumentValue, row: SampleRow): JxDocumentValue;
+function prepareNode(
+  node: JxDocumentValue | undefined,
+  row: SampleRow,
+): JxDocumentValue | undefined;
+function prepareNode(
+  node: JxDocumentValue | undefined,
+  row: SampleRow,
+): JxDocumentValue | undefined {
   if (Array.isArray(node)) {
     // Arrays of nodes round-trip element-wise; the array itself is not a node.
-    return node.map((n) => prepareForEditMode(n));
+    return node.map((n) => prepareNode(n, row));
   }
   if (!isNodeObject(node)) {
     return node;
@@ -225,7 +482,7 @@ export function prepareForEditMode(node: JxDocumentValue | undefined): JxDocumen
   // A mapped-array node itself → its edit-mode perimeter (e.g. when the patcher re-renders an
   // Array node directly). Members inside a children array funnel here via the children branch.
   if (node.$prototype === "Array") {
-    return arrayToPerimeter(node);
+    return arrayToPerimeter(node, row);
   }
 
   const obj = node;
@@ -252,21 +509,27 @@ export function prepareForEditMode(node: JxDocumentValue | undefined): JxDocumen
     if (k === "state" || k === "$media" || k === "$elements") {
       out[k] = v; // Preserve as-is for runtime resolution
     } else if (k === "$props" && isDocumentContainer(v)) {
-      // Process $props values: convert template strings to display format
+      /* A component's inputs render LIVE. They are its configuration, not text the author edits in
+         place (a template-valued prop is refused by inline prop editing), and showing their binding
+         text instead fed it to the component as a value: a header's `variant` became the literal
+         `❪ state.headerVariant ❫` and matched none of its styles. A prop that reads the repeater
+         row is drawn with the repeater's sample row (see liveEditProp), guarded, so a date or a
+         locale the component formats is real data rather than a label; a row-bound link target is
+         inert and a row-bound image-like key the placeholder image. */
       const propsOut: RebuiltNode = {};
       for (const [pk, pv] of Object.entries(v)) {
-        if (isString(pv) && pv.includes("${")) {
-          // Image-like prop → neutral placeholder (the component renders it as an <img src>); link
-          // Targets → inert ""; everything else → the readable ❪ expr ❫ binding text.
-          if (isImageUrlKey(pk)) {
-            propsOut[pk] = PLACEHOLDER_IMG;
-          } else if (pk === "href" || pk === "action") {
-            propsOut[pk] = "";
-          } else {
-            propsOut[pk] = templateToEditDisplay(pv);
+        if (!isRowBound(pv)) {
+          propsOut[pk] = pv;
+        } else if (isString(pv)) {
+          propsOut[pk] =
+            isImageUrlKey(pk) || pk === "href" || pk === "action"
+              ? rowBoundDisplay(pk, pv)
+              : liveEditProp(pv, row);
+        } else if (isRef(pv)) {
+          const live = liveEditRefProp(pv.$ref, row);
+          if (live !== undefined) {
+            propsOut[pk] = live;
           }
-        } else if (isNodeObject(pv) && pv.$ref) {
-          propsOut[pk] = refDisplayLabel(pv.$ref);
         } else {
           propsOut[pk] = pv;
         }
@@ -276,12 +539,12 @@ export function prepareForEditMode(node: JxDocumentValue | undefined): JxDocumen
       if (Array.isArray(v)) {
         // Each member recurses; array pseudo-elements become a single repeater-perimeter element
         // (via the top-level array case) so they stay a 1:1 DOM node among their siblings.
-        out.children = v.map((c) => prepareForEditMode(c));
+        out.children = v.map((c) => prepareNode(c, row));
       } else if (isNodeObject(v) && v.$prototype === "Array") {
         // Legacy whole-children repeater → a single perimeter as the sole child.
-        out.children = [prepareForEditMode(v)];
+        out.children = [prepareNode(v, row)];
       } else {
-        out.children = prepareForEditMode(v);
+        out.children = prepareNode(v, row);
       }
     } else if (k === "cases" && obj.$switch && isDocumentContainer(v)) {
       // Replace $switch cases with a placeholder showing the first case or a label
@@ -290,7 +553,7 @@ export function prepareForEditMode(node: JxDocumentValue | undefined): JxDocumen
         const [, firstCase] = firstEntry;
         out.children =
           isDocumentContainer(firstCase) && !(isNodeObject(firstCase) && firstCase.$ref)
-            ? [prepareForEditMode(firstCase)]
+            ? [prepareNode(firstCase, row)]
             : [
                 {
                   style: {
@@ -309,35 +572,32 @@ export function prepareForEditMode(node: JxDocumentValue | undefined): JxDocumen
               ];
       }
     } else if (k === "attributes" && isMediaElement && isDocumentContainer(v)) {
-      // Process attributes for media elements: replace src/poster with transparent pixel
+      // A media element's src/poster: live, unless it reads the repeater row or names nothing.
       const processed: RebuiltNode = {};
       for (const [ak, av] of Object.entries(v)) {
-        if (ak === "src" || ak === "poster") {
-          if (isString(av) && av !== "" && !av.includes("${")) {
-            processed[ak] = av;
-          } else {
-            needsMediaPlaceholder = true;
-            processed[ak] = TRANSPARENT_PX;
-          }
-        } else if (isString(av) && av.includes("${")) {
-          const isUrlAttr = ak === "href" || ak === "action";
-          processed[ak] = isUrlAttr ? "" : templateToEditDisplay(av);
-        } else if (isNodeObject(av) && av.$ref) {
-          processed[ak] = refDisplayLabel(av.$ref);
+        if ((ak === "src" || ak === "poster") && (av === "" || av == null || isRowBound(av))) {
+          needsMediaPlaceholder = true;
+          processed[ak] = TRANSPARENT_PX;
         } else {
-          processed[ak] = av;
+          processed[ak] = isRowBound(av) ? rowBoundDisplay(ak, av) : av;
         }
       }
       out.attributes = processed;
+    } else if (k === "attributes" && isDocumentContainer(v)) {
+      const processed: RebuiltNode = {};
+      for (const [ak, av] of Object.entries(v)) {
+        processed[ak] = isRowBound(av) ? rowBoundDisplay(ak, av) : av;
+      }
+      out.attributes = processed;
     } else if (k === "style") {
-      /* Drop template-valued style declarations. State is not live in edit mode, so the value
-         cannot be resolved; omitting the property lets the cascade answer, which is exactly what
-         the `""` this used to write meant while declarations went inline. As a RULE, `color: ` is
-         a malformed declaration instead of a no-op. Mirrored by iframe-patch's editModeStyle. */
+      /* Live, like every binding but text: state IS live on the canvas. Only a declaration that
+         reads the repeater row is omitted — the perimeter has no row — and omitted rather than
+         blanked, because `color: ` is a malformed declaration in a rule where the cascade answers
+         an absent one. Mirrored by iframe-patch's editModeStyle. */
       if (isDocumentContainer(v)) {
         const s: RebuiltNode = {};
         for (const [sk, sv] of Object.entries(v)) {
-          if (!isString(sv) || !sv.includes("${")) {
+          if (!isRowBound(sv)) {
             s[sk] = sv;
           }
         }
@@ -345,34 +605,29 @@ export function prepareForEditMode(node: JxDocumentValue | undefined): JxDocumen
       } else {
         out.style = v;
       }
-    } else if (isString(v) && v.includes("${")) {
-      // Template string in a display property → show raw expression
-      const isMediaSrc = (k === "src" || k === "poster") && isMediaElement;
-      if (isMediaSrc) {
+    } else if (k === "$switch" && isString(v) && v.includes("${")) {
+      /* Not a render input any more: `cases` is replaced by the first case above, so a live
+         expression would hand the runtime a switch with nothing to choose from. */
+      out[k] = templateToEditDisplay(v);
+    } else if (k === "textContent" && isString(v) && v.includes("${")) {
+      // The author's text: shown as its binding, so editing it in place edits the template.
+      out[k] = templateToEditDisplay(v);
+    } else if (k === "textContent" && isNodeObject(v) && v.$ref) {
+      out[k] = refDisplayLabel(v.$ref);
+    } else if (isMediaElement && (k === "src" || k === "poster")) {
+      if (v === "" || v == null || isRowBound(v)) {
         needsMediaPlaceholder = true;
         out[k] = TRANSPARENT_PX;
       } else {
-        const isUrlAttr = k === "src" || k === "href" || k === "poster" || k === "action";
-        out[k] = isUrlAttr ? "" : templateToEditDisplay(v);
-      }
-    } else if (isNodeObject(v) && v.$ref) {
-      // $ref binding → show ref path as literal text
-      const label = refDisplayLabel(v.$ref);
-      const isMediaSrc = (k === "src" || k === "poster") && isMediaElement;
-      if (isMediaSrc) {
-        needsMediaPlaceholder = true;
-        out[k] = TRANSPARENT_PX;
-      } else {
-        out[k] = label;
+        out[k] = v;
       }
+    } else if (isRowBound(v)) {
+      out[k] = rowBoundDisplay(k, v);
+    } else if (isString(v) || (isNodeObject(v) && v.$ref)) {
+      // Any other bound or literal property renders as the page will.
+      out[k] = v;
     } else {
-      // Empty src/poster on media elements → use transparent pixel placeholder
-      if ((k === "src" || k === "poster") && v === "" && isMediaElement) {
-        needsMediaPlaceholder = true;
-        out[k] = TRANSPARENT_PX;
-      } else {
-        out[k] = prepareForEditMode(v);
-      }
+      out[k] = prepareNode(v, row);
     }
   }
 

package/src/utils/local-day.ts

@@ -0,0 +1,18 @@
+/**
+ * An instant as the calendar day it is where Studio runs.
+ *
+ * A file's modification time, an upload's, "today": each is an instant, and the day a reader means
+ * by it is their own. `toISOString().slice(0, 10)` answers in UTC, so a file saved at 9 pm in
+ * Denver was listed as edited tomorrow. A date the author WROTE (`2026-06-03`) is not an instant
+ * and never goes through here: it is taken as written (`content/entry-summaries.ts` `entryDay`).
+ */
+
+/** `date` as `YYYY-MM-DD` in the local time zone, or "" for an invalid date. */
+export function localDay(date: Date): string {
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${String(date.getFullYear()).padStart(4, "0")}-${month}-${day}`;
+}

package/src/workspace/pane-derive.ts

@@ -79,10 +79,10 @@ export type DerivePreset = (typeof DERIVE_PRESETS)[number];
  * The canvas mode a preset needs the SOURCE document to DECLARE, for the presets that need one.
  *
  * `tab.capabilities.modes` is the format's own answer to "what can this document be shown as", and
- * the preset menu consulted it nowhere: over a document that declares `["settings", "stylebook",
- * "source"]` it still offered "Same page at Base" — a lens whose stage can only draw an empty
- * artboard — and "Component definition", whose rule can never resolve because nothing in a settings
- * form is a component instance. Both produced a pane the author then had to close.
+ * the preset menu consulted it nowhere: over a document that declares `["stylebook", "source"]` it
+ * still offered "Same page at Base" — a lens whose stage can only draw an empty artboard — and
+ * "Component definition", whose rule can never resolve because nothing in a configuration object is
+ * a component instance. Both produced a pane the author then had to close.
  *
  * Two presets are absent, for two different reasons. `diff` needs no mode: a comparison is two
  * texts and every document has those, and it is already gated on the file having changes. `layout`

package/src/workspace/session.ts

@@ -25,7 +25,7 @@
  * across versions. Every field is validated on the way in and a bad record restores nothing.
  */
 
-import { PRIMARY_PANE, SECONDARY_PANE, focusPane, workspace } from "./workspace";
+import { PRIMARY_PANE, SECONDARY_PANE, activateTab, focusPane, workspace } from "./workspace";
 import {
   isBoolean,
   isJsonObject,
@@ -307,8 +307,22 @@ export async function restoreSession(
       ui.showLayout = stored.showLayout;
     }
   }
-  // Each pane's active tab, then the pane that had the keyboard — in that order, because activating
-  // A tab in a pane is what makes that pane's strip meaningful and focusing comes last.
+  /*
+   * Each pane's active tab, then the pane that had the keyboard, in that order, because activating
+   * a tab in a pane is what makes that pane's strip meaningful and focusing comes last.
+   *
+   * The focused pane's tab is ACTIVATED, not merely assigned, because the restored tab is the most
+   * recently used one and the workspace switch that follows a restore asks exactly that question.
+   * Every document was reopened without moving the keyboard, so the MRU list was empty, and
+   * `focusPane` adds nothing for the pane that already has the keyboard. Entering the stored
+   * workspace then fell back to that workspace's FIRST tab in the strip: two exhibition entries
+   * restored with the English one active came back on whichever was opened first, and a Design
+   * session left on `/exhibitions` came back on `/`.
+   */
+  const focused = workspace.panes.some((pane) => pane.id === session.focusedPane)
+    ? session.focusedPane
+    : null;
+  let focusedTab: string | null = null;
   for (const stored of session.panes) {
     const pane = workspace.panes.find((p) => p.id === stored.id);
     if (!pane || !stored.activeFile) {
@@ -317,12 +331,19 @@ export async function restoreSession(
     const match = pane.tabOrder.find(
       (tabId) => workspace.tabs.get(tabId)?.documentPath === stored.activeFile,
     );
-    if (match) {
-      pane.activeTabId = match;
+    if (!match) {
+      continue;
+    }
+    if (pane.id === focused) {
+      focusedTab = match;
+    } else {
+      activateTab(match, { focus: false });
     }
   }
-  if (workspace.panes.some((pane) => pane.id === session.focusedPane)) {
-    focusPane(session.focusedPane);
+  if (focusedTab) {
+    activateTab(focusedTab);
+  } else if (focused) {
+    focusPane(focused);
   }
   return opened;
 }