@jxsuite/studio 10.4.0 → 10.6.0

package/src/surfaces/panel-elements.ts

@@ -2,11 +2,12 @@
 /**
  * The Insert surface: the Navigator's element palette, as a Jx document over the kit.
  *
- * This is the adapter. `panels/elements-panel.ts` keeps the panel — what the palette contains,
- * which npm components the open document has enabled, what the filter matches, and what a click
- * inserts where — and hands this module a projection with no decisions left in it: a section per
- * category that already knows whether it is open, a card per thing that can be inserted, and the
- * one of three empty states the palette is in.
+ * This is the adapter. `panels/elements-panel.ts` keeps the panel — what the palette contains, what
+ * each element is called, which npm components the open document has enabled, what the filter
+ * matches, and what a click inserts where — and hands this module a projection with no decisions
+ * left in it: the tab that is showing, a section per category that already knows whether it is
+ * open, a named card per thing that can be inserted, and the one of three empty states each tab is
+ * in.
  *
  * The flattening is here rather than in the document for the reason `surfaces/settings-overview.ts`
  * gives: `$switch` over a value is the only conditional a document has, and "is there anything to
@@ -36,13 +37,18 @@ import type { SurfaceHandle } from "../ui/surface";
 
 registerSurface("panel-elements", elementsDoc);
 
-/** One insertable HTML element: the tag is its identity, its caption and what a click inserts. */
+/** One insertable HTML element: the tag is its identity and what a click inserts. */
 export interface ElementCardView {
   tag: string;
+  /** What the card is captioned, in the reader's language. */
+  name: string;
+  /** What the element is for, in one line: the card's tooltip. */
+  description: string;
 }
 
-/** One category of the palette — an accordion section, keyed and labelled by its name. */
+/** One category of the palette: an accordion section, keyed by a stable id, labelled by name. */
 export interface ElementCategoryView {
+  key: string;
   name: string;
   open: boolean;
   elements: ElementCardView[];
@@ -54,32 +60,44 @@ export interface ComponentCardView {
   title: string;
 }
 
+/** The palette's two tabs (§5.3). */
+export type InsertTab = "elements" | "components";
+
 /**
- * Which body the palette is showing under its filter.
+ * Which body a tab is showing under the filter.
  *
- * `"filtered"` and `"empty"` are different answers rather than one with a flag: a palette nothing
- * matches offers to clear the filter, and a palette with nothing in it teaches what the region is
- * for, because there is no filter to clear.
+ * `"filtered"` and `"empty"` are different answers rather than one with a flag: a tab nothing
+ * matches offers to clear the filter, and a tab with nothing in it teaches what it is for, because
+ * there is no filter to clear.
  */
 export type ElementsEmptyState = "none" | "filtered" | "empty";
 
 /** What the panel says the surface should be showing right now. */
 export interface ElementsValues {
+  /** The tab that is showing. */
+  tab: InsertTab;
   /** What the filter field holds — the reader's own text, never a normalised form of it. */
   filter: string;
+  /** The filter's accessible name and placeholder, which says what it narrows. */
+  filterLabel: string;
   categories: ElementCategoryView[];
   components: ComponentCardView[];
-  componentsOpen: boolean;
-  hasComponents: boolean;
-  emptyState: ElementsEmptyState;
+  elementsEmpty: ElementsEmptyState;
+  componentsEmpty: ElementsEmptyState;
+  /**
+   * The other tab's offer when the filter empties this one but not that one ("Show 2 matching
+   * components"), or `""`.
+   */
+  otherMatches: string;
 }
 
 /** What a control can ask the panel to do. Every one of them is a decision the panel owns. */
 export interface ElementsActions {
+  selectTab: (tab: string) => void;
+  showOtherTab: () => void;
   setFilter: (value: string) => void;
   clearFilter: () => void;
-  setSectionOpen: (name: string, open: boolean) => void;
-  setComponentsOpen: (open: boolean) => void;
+  setSectionOpen: (key: string, open: boolean) => void;
   insertElement: (tag: string) => void;
   insertComponent: (tagName: string) => void;
 }
@@ -101,17 +119,29 @@ export interface ElementsSurfaceHandle {
   dispose: () => void;
 }
 
-/** The scope the document reads: {@link ElementsValues} plus the actions its controls call. */
-interface ElementsScope extends ElementsValues, ElementsActions {}
+/**
+ * The scope the document reads: {@link ElementsValues}, the flags a `$switch` and a tab panel's
+ * `active` need as their own values, and the actions its controls call.
+ */
+interface ElementsScope extends ElementsValues, ElementsActions {
+  elementsShowing: boolean;
+  componentsShowing: boolean;
+  hasOtherMatches: boolean;
+}
 
 /** Write a projection into the scope. */
 function project(scope: ElementsScope, values: ElementsValues): void {
+  scope.tab = values.tab;
+  scope.elementsShowing = values.tab === "elements";
+  scope.componentsShowing = values.tab === "components";
   scope.filter = values.filter;
+  scope.filterLabel = values.filterLabel;
   scope.categories = values.categories;
   scope.components = values.components;
-  scope.componentsOpen = values.componentsOpen;
-  scope.hasComponents = values.hasComponents;
-  scope.emptyState = values.emptyState;
+  scope.elementsEmpty = values.elementsEmpty;
+  scope.componentsEmpty = values.componentsEmpty;
+  scope.otherMatches = values.otherMatches;
+  scope.hasOtherMatches = values.otherMatches !== "";
 }
 
 /**
@@ -131,15 +161,21 @@ export function mountElementsSurface(
     categories: [],
     clearFilter: actions.clearFilter,
     components: [],
-    componentsOpen: true,
-    emptyState: "none",
+    componentsEmpty: "none",
+    componentsShowing: false,
+    elementsEmpty: "none",
+    elementsShowing: true,
     filter: "",
-    hasComponents: false,
+    filterLabel: "",
+    hasOtherMatches: false,
     insertComponent: actions.insertComponent,
     insertElement: actions.insertElement,
-    setComponentsOpen: actions.setComponentsOpen,
+    otherMatches: "",
+    selectTab: actions.selectTab,
     setFilter: actions.setFilter,
     setSectionOpen: actions.setSectionOpen,
+    showOtherTab: actions.showOtherTab,
+    tab: "elements",
   });
   project(scope, values);
 

package/src/surfaces/tab-strip.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioTabStrip",
-  "$description": "One pane's tab strip, as a Jx document over the kit: a real `tablist` of `jx-tab`s, or — for a pane that owns no document — the derivation chip naming what it is a projection of, and in both cases one trailing button. `panels/tab-strip.ts` keeps every decision: which pane a host is drawing, what each tab is called (the shortest unique suffix, and a page's ROUTE), what its tooltip says, whether closing it needs a prompt, what the overflow chevron lists and what the context menu offers. This document owns the markup, the ARIA, the keyboard and the style, and it holds THREE things the old chip drew by hand and the kit now draws: the tab's own selected state (`aria-selected`, not an `.active` class), its close button, and its dirty dot. The three that are Studio's alone go in `jx-tab`'s slots — the drill-in marker in `icon`, the draft pill in `status`, the pin toggle in `actions` (ui.md §5.4) — which is the gap that kept this strip out of the tab pattern until now. **Drag is `@atlaskit/pragmatic-drag-and-drop`, not native HTML5 DnD**: a chip carries no `draggable` attribute and no `ondrag*` handler, because `panels/tab-strip.ts` registers every chip and every strip as a pragmatic source/target through `onNodeCreated` and resolves a completed drag in `panels/tab-drop.ts`. What is left here is three SCOPE comparisons, exactly as `files-panel.json` marks a row under drag: `data-dragging` on the chip being carried, `data-drop` on the chip a drop would land beside, `data-drop-tail` on the strip when the drop is its empty tail.",
+  "$description": "One pane's tab strip, as a Jx document over the kit: a real `tablist` of `jx-tab`s, or — for a pane that owns no document — the derivation chip naming what it is a projection of, and in both cases one trailing button. `panels/tab-strip.ts` keeps every decision: which pane a host is drawing, what each tab is called (the shortest unique suffix, and a page's ROUTE), what its tooltip says, whether closing it needs a prompt, what the overflow chevron lists and what the context menu offers. This document owns the markup, the ARIA, the keyboard and the style, and it holds THREE things the old chip drew by hand and the kit now draws: the tab's own selected state (`aria-selected`, not an `.active` class), its close button, and its dirty dot. The three that are Studio's alone go in `jx-tab`'s slots — the drill-in marker in `icon`, the hold pill in `status`, the pin toggle in `actions` (ui.md §5.4) — which is the gap that kept this strip out of the tab pattern until now. **Drag is `@atlaskit/pragmatic-drag-and-drop`, not native HTML5 DnD**: a chip carries no `draggable` attribute and no `ondrag*` handler, because `panels/tab-strip.ts` registers every chip and every strip as a pragmatic source/target through `onNodeCreated` and resolves a completed drag in `panels/tab-drop.ts`. What is left here is three SCOPE comparisons, exactly as `files-panel.json` marks a row under drag: `data-dragging` on the chip being carried, `data-drop` on the chip a drop would land beside, `data-drop-tail` on the strip when the drop is its empty tail.",
   "tagName": "div",
   "attributes": {
     "part": "strip-row",
@@ -101,7 +101,7 @@
       "lineHeight": "1"
     },
     "& [part=\"pill\"]": {
-      "$description": "`.entry-pill` — the draft pill (site-architecture.md §7.6), in `jx-tab`'s status slot. It is ON THE CHIP and not only inside the entry editor because the mistake it prevents, publishing something you believed was private, is made while glancing at a row of tabs. \"Published\" is deliberately as visible as \"Draft\": a state you can only see one half of is a state you cannot check. The two Spectrum colours it used to name are `--jx-signal` against `--jx-bg`, which flips with the theme where a fixed yellow and a fixed black did not.",
+      "$description": "`.entry-pill` — the hold pill (site-architecture.md §7.6), in `jx-tab`'s status slot. It is ON THE CHIP and not only inside the entry editor because the mistake it prevents, publishing something you believed was private, is made while glancing at a row of tabs. \"Published\" is deliberately as visible as \"Draft\": a state you can only see one half of is a state you cannot check. The two Spectrum colours it used to name are `--jx-signal` against `--jx-bg`, which flips with the theme where a fixed yellow and a fixed black did not.",
       "padding": "0 5px",
       "borderRadius": "var(--radius)",
       "background": "var(--bg)",
@@ -110,7 +110,7 @@
       "lineHeight": "15px",
       "whiteSpace": "nowrap"
     },
-    "& [part=\"pill\"][data-draft]": {
+    "& [part=\"pill\"][data-held]": {
       "background": "var(--jx-signal)",
       "color": "var(--jx-bg)"
     },
@@ -322,13 +322,13 @@
                     "textContent": "↳"
                   },
                   {
-                    "$description": "The draft pill. It is a `<span>` in the status slot rather than a mounted document of its own, which is what kept it a lit fragment inside `content/entry-editor.ts` until the strip converted: a document mounted per chip would be an async mount inside a synchronous rebuild. `entryDraftPill` states the two facts; this draws them.",
+                    "$description": "The hold pill. It is a `<span>` in the status slot rather than a mounted document of its own, which is what kept it a lit fragment inside `content/entry-editor.ts` until the strip converted: a document mounted per chip would be an async mount inside a synchronous rebuild. `entryHoldPill` states the two facts; this draws them.",
                     "tagName": "span",
                     "attributes": {
                       "slot": "status",
                       "part": "pill",
                       "title": "${$map.item.pillTitle}",
-                      "data-draft": "${$map.item.draft ? '' : null}",
+                      "data-held": "${$map.item.held ? '' : null}",
                       "hidden": "${$map.item.pill ? null : ''}"
                     },
                     "textContent": "${$map.item.pill}"

package/src/surfaces/tab-strip.ts

@@ -57,10 +57,10 @@ export interface TabChipView {
   /** "Pin" or "Unpin" — the pin button's whole accessible name. */
   pinTitle: string;
   pinGlyph: string;
-  /** The draft pill's word, or the empty string when this document has no draft axis. */
+  /** The hold pill's word, or the empty string when this document's collection has no rules. */
   pill: string;
   pillTitle: string;
-  draft: boolean;
+  held: boolean;
   /** "0" while this is the pane's current tab, "-1" otherwise. The pin's roving stop. */
   tabindex: string;
   /** This chip's slot in the pane's order, which is the drop target index. */

package/src/tabs/project-config.ts

@@ -65,7 +65,7 @@ import { getPlatform } from "../platform";
 import { notify } from "../services/notify";
 import { projectState, requireProjectState, setProjectState } from "../state";
 import { setWorkspaceProject, workspace } from "../workspace/workspace";
-import { PROJECT_CONFIG_PATH, createTab, disposeTab } from "./tab";
+import { projectConfigPath, createTab, disposeTab } from "./tab";
 import { transactDoc } from "./transact";
 import { deriveJsonLayout, parseJsonDocument, serializeJson } from "@jxsuite/schema/json-layout";
 import type { JsonLayout } from "@jxsuite/schema/json-layout";
@@ -73,7 +73,7 @@ import type { JsonLayout } from "@jxsuite/schema/json-layout";
 import type { Tab } from "./tab";
 import type { JxMutableNode, ProjectConfig } from "@jxsuite/schema/types";
 
-export { PROJECT_CONFIG_PATH } from "./tab";
+export { isProjectConfigPath, projectConfigPath } from "./tab";
 
 /**
  * The project configuration, as a file.
@@ -146,7 +146,7 @@ let _seeding: Promise<void> | null = null;
  * structure in Studio uses (`collab-session.ts`'s `rawTab` for the same reason).
  */
 function openConfigTab(): Tab | null {
-  const tab = workspace.tabs.get(PROJECT_CONFIG_PATH);
+  const tab = workspace.tabs.get(projectConfigPath());
   return tab ? toRaw(tab) : null;
 }
 
@@ -166,7 +166,7 @@ function unbind(): void {
 function seedCommitted(): Promise<void> {
   _seeding ??= (async () => {
     try {
-      const text = await getPlatform().readFile(PROJECT_CONFIG_PATH);
+      const text = await getPlatform().readFile(projectConfigPath());
       const { document, layout } = parseJsonDocument(text);
       _layout = layout;
       // {@link serializeProjectConfig}'s serialisation, over the file's parse rather than a config.
@@ -332,8 +332,8 @@ export function projectConfigDocument(): Tab {
   }
   _detached = createTab({
     document: state.projectConfig ?? {},
-    documentPath: PROJECT_CONFIG_PATH,
-    id: PROJECT_CONFIG_PATH,
+    documentPath: projectConfigPath(),
+    id: projectConfigPath(),
   });
   return bind(_detached);
 }
@@ -409,11 +409,11 @@ export async function commitProjectConfig(
        never seen. Applying either one discards the other, so neither is applied: §16 files the
        write that cannot be applied, which is the one outcome silence is not allowed to be.
        `ai-project-tools.ts`'s `write_file` refuses a dirty tab on exactly these grounds. */
-    const error = new Error(`${PROJECT_CONFIG_PATH} has unsaved changes in its editor tab`);
+    const error = new Error(`${projectConfigPath()} has unsaved changes in its editor tab`);
     notify.error(
-      `Could not save ${PROJECT_CONFIG_PATH} — the file is open with unsaved changes. Save or ` +
+      `Could not save ${projectConfigPath()} — the file is open with unsaved changes. Save or ` +
         `revert that tab, then make the settings change again.`,
-      { key: `save:${PROJECT_CONFIG_PATH}`, path: PROJECT_CONFIG_PATH, source: "Settings" },
+      { key: `save:${projectConfigPath()}`, path: projectConfigPath(), source: "Settings" },
     );
     return { error, ok: false };
   }
@@ -447,11 +447,11 @@ export async function commitProjectConfig(
   const config = configOf(tab.doc.document);
   const output = serializeProjectConfig(config);
   try {
-    await getPlatform().writeFile(PROJECT_CONFIG_PATH, output);
+    await getPlatform().writeFile(projectConfigPath(), output);
   } catch (error) {
-    notify.error(`Could not save ${PROJECT_CONFIG_PATH} — ${errorMessage(error)}`, {
-      key: `save:${PROJECT_CONFIG_PATH}`,
-      path: PROJECT_CONFIG_PATH,
+    notify.error(`Could not save ${projectConfigPath()} — ${errorMessage(error)}`, {
+      key: `save:${projectConfigPath()}`,
+      path: projectConfigPath(),
       source: "Settings",
     });
     return { error, ok: false };

package/src/tabs/tab.ts

@@ -11,6 +11,7 @@ import type { EditorKind } from "../commands/context";
 import type { JsonObject, JxMutableNode } from "@jxsuite/schema/types";
 import type { JxDocOp, JxFmOp } from "./patch-ops";
 import type { JsonLayout } from "@jxsuite/schema/json-layout";
+import { PROJECT_FILE_NAME, isProjectConfigPath } from "@jxsuite/schema/project-file";
 
 /**
  * The project's configuration file, project-relative.
@@ -20,7 +21,11 @@ import type { JsonLayout } from "@jxsuite/schema/json-layout";
  * Variables and Code views; editor kind `config`), and `tabs/project-config.ts` binds the tab at
  * this path as the configuration document.
  */
-export const PROJECT_CONFIG_PATH = "project.json";
+export function projectConfigPath(): string {
+  return PROJECT_FILE_NAME;
+}
+
+export { isProjectConfigPath } from "@jxsuite/schema/project-file";
 
 export interface TabUi {
   /** The Inspector leaf showing (`shell.ts`'s `INSPECTOR_TAB_IDS`); Page on a fresh tab (§6). */
@@ -448,7 +453,7 @@ export function createTab({
  * @returns {string[]}
  */
 function inferModes(documentPath: string | null | undefined, sourceFormat: string | null) {
-  if (documentPath === PROJECT_CONFIG_PATH) {
+  if (isProjectConfigPath(documentPath)) {
     /* Elements, Variables and Code: the Styles workspace's three views. Spelled here rather than
        imported from `style/project-styles` (`STYLES_TAB_MODES`), whose imports reach `store`,
        which imports this module; `tests/project-config.test.ts` holds the two lists equal. */

package/src/types.ts

@@ -717,7 +717,7 @@ export interface StudioPlatform {
    * announcing the intent — "opened in a new window" is a lie when the project was already open
    * somewhere and that window merely came to the front.
    */
-  openProjectInNewWindow?: (root: string) => Promise<{ focused: boolean }>;
+  openProjectInNewWindow?: (root: string) => Promise<{ declined?: true; focused: boolean }>;
   /**
    * Pick a project WITHOUT binding this window to it — the answer to "which project", separated
    * from the act of opening it here. Backs the New Window branch of Open Project: `openProject()`
@@ -733,7 +733,16 @@ export interface StudioPlatform {
    * Point THIS window's backend at a project and return its config. If the project is already open
    * in another window, that window is focused and `deduped` is true (no project is loaded here).
    */
-  setWindowProject?: (root: string) => Promise<{ deduped: boolean; config: ProjectConfig | null }>;
+  setWindowProject?: (
+    root: string,
+  ) => Promise<{ declined?: true; deduped: boolean; config: ProjectConfig | null }>;
+  /**
+   * Be told when the operating system asks this window to show a document, by its project-relative
+   * path. Includes anything asked before this was called, so a window that was opened for a
+   * document shows it once it has booted. Returns the unsubscribe. A platform with no operating
+   * system to hand it files omits it.
+   */
+  subscribeOpenDocument?: (handler: (path: string) => void) => () => void;
   /** The project root this window's backend is currently bound to. */
   getProjectRoot?: () => Promise<{ root: string | null }>;
   // ─── Recent projects (backend-persisted; undefined on dev-server) ───────────
@@ -904,6 +913,8 @@ export interface ContentSectionEntry {
   /** The field a file-backed collection's records are identified by (the loader's `idField`). */
   idField?: string;
   $elements?: unknown[];
+  /** What keeps an entry back from production (site-architecture.md §7.6), read by `hold-state`. */
+  hold?: unknown;
 }
 
 export interface CanvasPanel {

package/src/ui/expression-editor.ts

@@ -444,6 +444,8 @@ export function expressionHint(node: ExpressionValue | undefined) {
 export interface ExpressionEditorOpts {
   stateDefs: string[];
   allowEventRef: boolean;
+  /** Pointers beyond the document's own signals: inside a repeater, its item and that item's fields. */
+  extraRefs?: readonly SurfaceOption[] | null | undefined;
   depth?: number;
   preview?: ExpressionPreview | null;
   path?: (string | number)[];
@@ -608,7 +610,7 @@ function walkOperand(
   commit: (next: ExpressionValue) => void,
   slot: OperandSlot,
 ): void {
-  const { allowEventRef, stateDefs } = walk.opts;
+  const { allowEventRef, extraRefs, stateDefs } = walk.opts;
   const stateRefs = stateDefs.map((k) => `#/state/${k}`);
   // Shown as written: a malformed (non-string) pointer is coerced the way the picker would show it.
   const refValue = String(fieldsOf(operand)?.$ref ?? "");
@@ -631,9 +633,12 @@ function walkOperand(
     leadValue: slot.leadValue ?? "",
     nested: slot.depth > 0 ? "true" : "false",
     prop: slot.prop,
-    refGroups: allowEventRef
-      ? [{ id: "event", label: "Event", rows: EVENT_REFS.map((r) => ({ label: r, value: r })) }]
-      : [],
+    refGroups: [
+      ...(extraRefs?.length ? [{ id: "item", label: "List item", rows: [...extraRefs] }] : []),
+      ...(allowEventRef
+        ? [{ id: "event", label: "Event", rows: EVENT_REFS.map((r) => ({ label: r, value: r })) }]
+        : []),
+    ],
     refOptions: stateRefs.map((r) => ({ label: r.replace("#/state/", ""), value: r })),
     removable: Boolean(slot.removable),
     title: slot.title ?? "",
@@ -642,7 +647,7 @@ function walkOperand(
 
   /* Nothing to pick and nothing already picked: a picker whose only entry is a disabled "No state
      defined" is a dead end. Say what a binding IS instead, in the shell's one empty-state voice. */
-  const nothingToBind = stateRefs.length === 0 && !allowEventRef && !refValue;
+  const nothingToBind = stateRefs.length === 0 && !extraRefs?.length && !allowEventRef && !refValue;
 
   if (slot.mustBeRef) {
     walk.plans.set(slot.key, plan);

package/src/ui/schema-form.ts

@@ -708,7 +708,12 @@ function createController(): FormController {
        are all serialized), where an undefined member is simply omitted. */
     rows[idx] = {
       ...target,
-      [cell]: coerceCell(cellSchema, next, plan.refCells?.has(`${field}/${row}/${cell}`) ?? false),
+      [cell]: coerceCell(
+        cellSchema,
+        next,
+        plan.refCells?.has(`${field}/${row}/${cell}`) ?? false,
+        target[cell],
+      ),
     } as JsonObject;
     patchRows(plan, rows);
   }
@@ -718,6 +723,7 @@ function createController(): FormController {
     cellSchema: JsonSchema | undefined,
     next: JsonValue | undefined,
     isPointer: boolean,
+    previous: JsonValue | undefined,
   ): JsonValue | undefined {
     if (isBoolean(next)) {
       return next;
@@ -734,6 +740,17 @@ function createController(): FormController {
     if (raw === NONE || raw === "") {
       return undefined;
     }
+    if (cellSchema?.type === "object" || cellSchema?.type === "array") {
+      /* The rule a whole JSON field follows: a half-typed object is not a refusal, the last parsable
+         value is what the document keeps. Stored as text, it would be a string where the schema asks
+         for an object, and the row would be invalid however it read. */
+      try {
+        // SAFETY: `JSON.parse` with no reviver yields only JSON values, which is all a JsonValue is.
+        return JSON.parse(raw) as JsonValue;
+      } catch {
+        return previous;
+      }
+    }
     return raw;
   }
 

package/src/utils/edit-display.ts

@@ -15,6 +15,7 @@ import {
   isNumber,
   isRef,
   isString,
+  isTemplateString,
 } from "@jxsuite/schema/guards";
 import { isDocumentContainer } from "./strip-events";
 import type { RebuiltNode } from "./strip-events";
@@ -201,6 +202,10 @@ export function computeEmptyPlaceholderClass(node: JxMutableNode): string | null
   if (Array.isArray(node.children) && node.children.length > 0) {
     return null;
   }
+  // Computed children: not empty, only not known until the page runs. The canvas names the binding.
+  if (isTemplateString(node.children)) {
+    return null;
+  }
   if (fixesItsOwnSize(node)) {
     return null;
   }
@@ -223,6 +228,16 @@ export function templateToEditDisplay(str: string) {
   return str.replaceAll(/\$\{([^}]+)\}/g, "\u276A $1 \u276B");
 }
 
+/**
+ * The binding a node's computed children show in edit mode. An `?? []` fallback is plumbing, so it
+ * reads as the field it guards: `❪ item.$children ❫`.
+ *
+ * @param {string} template
+ */
+function computedChildrenDisplay(template: string): string {
+  return templateToEditDisplay(template.replaceAll(/\s*\?\?\s*\[\s*\]\s*(?=\})/gu, ""));
+}
+
 /**
  * Reverse templateToEditDisplay: walk all text nodes in `el` and replace ❪ expr ❫ back to ${expr}
  * so the user edits raw template syntax.
@@ -543,7 +558,7 @@ function prepareNode(
       } else if (isNodeObject(v) && v.$prototype === "Array") {
         // Legacy whole-children repeater → a single perimeter as the sole child.
         out.children = [prepareNode(v, row)];
-      } else {
+      } else if (!isTemplateString(v)) {
         out.children = prepareNode(v, row);
       }
     } else if (k === "cases" && obj.$switch && isDocumentContainer(v)) {
@@ -631,6 +646,17 @@ function prepareNode(
     }
   }
 
+  /* Computed children (spec.md §8.4) are shown as their binding, like text is, but they are not
+     text: the words here are a label of what the page draws, and a caret placed in them would
+     commit that label as the element's `textContent`. So the label is closed to the caret. */
+  if (isTemplateString(obj.children)) {
+    out.textContent = computedChildrenDisplay(obj.children);
+    const { attributes } = out;
+    out.attributes = isDocumentContainer(attributes)
+      ? { ...attributes, contenteditable: "false" }
+      : { contenteditable: "false" };
+  }
+
   // Mark empty elements with placeholder classes for design-mode visibility
   const placeholderClass = computeEmptyPlaceholderClass(out);
   if (placeholderClass) {

package/src/view.ts

@@ -97,7 +97,13 @@ interface ViewState {
   blockActionBarEl: HTMLElement | null;
   selDragCleanup: (() => void) | null;
   dndCleanups: (() => void)[];
-  elementsCollapsed: Set<string>;
+  /** The Insert palette's tab (§5.3). */
+  insertTab: "elements" | "components";
+  /**
+   * The Insert palette's sections the reader has opened or closed, by category key. A key not here
+   * takes its default: open, except the categories that start closed.
+   */
+  elementsOpen: Map<string, boolean>;
   elementsFilter: string;
   _currentDropTargetRow: HTMLElement | null;
   layerDragSourceHeight: number;
@@ -119,7 +125,8 @@ export const view: ViewState = {
   dndCleanups: [],
 
   // Left panel / elements UI
-  elementsCollapsed: new Set(),
+  insertTab: "elements",
+  elementsOpen: new Map(),
   elementsFilter: "",
 
   // Drag interaction

package/src/workspace/tab-workspace.ts

@@ -29,7 +29,7 @@ import { workspace } from "./workspace";
 import { homeWorkspaceOfTabId } from "./workspace-ids";
 import { parseGridTabId } from "../grid/grid-source";
 import { collectionForFile } from "../content/collection-match";
-import { PROJECT_CONFIG_PATH } from "../tabs/tab";
+import { isProjectConfigPath } from "../tabs/tab";
 import type { Pane } from "./workspace";
 import type { WorkspaceId } from "./workspace-ids";
 import type { Tab } from "../tabs/tab";
@@ -59,7 +59,7 @@ export function workspaceOfTab(tab: Tab): WorkspaceId {
     // A data-table grid is the Data panel's, which is Design's; every other grid is content.
     return grid.kind === "data" ? "design" : "content";
   }
-  if (tab.documentPath === PROJECT_CONFIG_PATH) {
+  if (isProjectConfigPath(tab.documentPath)) {
     return "styles";
   }
   /* A file-backed collection's file too: its grid is where its records are written, and the

package/src/workspace/workspace-back.ts

@@ -22,7 +22,7 @@
  */
 
 import { shell, workspaceDrawsTabStrip } from "../shell";
-import { PROJECT_CONFIG_PATH } from "../tabs/tab";
+import { isProjectConfigPath } from "../tabs/tab";
 import { tabOfPane } from "../canvas/canvas-surface";
 import { workspace } from "./workspace";
 import { workspaceOfTab } from "./tab-workspace";
@@ -72,7 +72,7 @@ export function backTargetOf(
     return null;
   }
   if (id === "styles") {
-    if (tab.documentPath !== PROJECT_CONFIG_PATH || tab.session.ui.canvasMode !== SOURCE_MODE) {
+    if (!isProjectConfigPath(tab.documentPath) || tab.session.ui.canvasMode !== SOURCE_MODE) {
       return null;
     }
     const mode = shell.stylebook.view;

package/dist/chunks/2020-906vx2dq.js

@@ -1,4 +0,0 @@
-import{Bt,yn,Rc,Yg,By,Zg,k_,Pk,Fk,jk,Hk,Bk,zk,Wk,Vk,Uk}from"./studio-q80fg1d6.js";import{pe}from"./studio-0939t1q1.js";var b=pe(function(M){Object.defineProperty(M,"__esModule",{value:!0});M.dynamicAnchor=void 0;var _=Bt(),ge=Rc(),A=k_(),_e=Fk(),be={keyword:"$dynamicAnchor",schemaType:"string",code:(e)=>O(e,e.schema)};function O(e,t){let{gen:r,it:o}=e;o.schemaEnv.root.dynamicAnchors[t]=!0;let n=_._`${ge.default.dynamicAnchors}${_.getProperty(t)}`,s=o.errSchemaPath==="#"?o.validateName:ve(e);r.if(_._`!${n}`,()=>r.assign(n,s))}M.dynamicAnchor=O;function ve(e){let{schemaEnv:t,schema:r,self:o}=e.it,{root:n,baseId:s,localRefs:m,meta:c}=t.root,{schemaId:a}=o.opts,u=new A.SchemaEnv({schema:r,schemaId:a,root:n,baseId:s,localRefs:m,meta:c});return A.compileSchema.call(o,u),_e.getValidate(e,u)}M.default=be});var v=pe(function(N){Object.defineProperty(N,"__esModule",{value:!0});N.dynamicRef=void 0;var I=Bt(),qe=Rc(),x=Fk(),Pe={keyword:"$dynamicRef",schemaType:"string",code:(e)=>w(e,e.schema)};function w(e,t){let{gen:r,keyword:o,it:n}=e;if(t[0]!=="#")throw Error(`"${o}" only supports hash fragment reference`);let s=t.slice(1);if(n.allErrors)m();else{let a=r.let("valid",!1);m(a),e.ok(a)}function m(a){if(n.schemaEnv.root.dynamicAnchors[s]){let u=r.let("_v",I._`${qe.default.dynamicAnchors}${I.getProperty(s)}`);r.if(u,c(u,a),c(n.validateName,a))}else c(n.validateName,a)()}function c(a,u){return u?()=>r.block(()=>{x.callRef(e,a),r.let(u,!0)}):()=>x.callRef(e,a)}}N.dynamicRef=w;N.default=Pe});var E=pe(function(k){Object.defineProperty(k,"__esModule",{value:!0});var Ae=b(),Oe=yn(),Me={keyword:"$recursiveAnchor",schemaType:"boolean",code(e){if(e.schema)Ae.dynamicAnchor(e,"");else Oe.checkStrictMode(e.it,"$recursiveAnchor: false is ignored")}};k.default=Me});var V=pe(function(C){Object.defineProperty(C,"__esModule",{value:!0});var xe=v(),Ie={keyword:"$recursiveRef",schemaType:"string",code:(e)=>xe.dynamicRef(e,e.schema)};C.default=Ie});var K=pe(function(D){Object.defineProperty(D,"__esModule",{value:!0});var Ne=b(),Te=v(),ke=E(),Ee=V(),Ce=[Ne.default,Te.default,ke.default,Ee.default];D.default=Ce});var L=pe(function(z){Object.defineProperty(z,"__esModule",{value:!0});var G=Bk(),De={keyword:"dependentRequired",type:"object",schemaType:"object",error:G.error,code:(e)=>G.validatePropertyDeps(e)};z.default=De});var Z=pe(function(U){Object.defineProperty(U,"__esModule",{value:!0});var Ge=Bk(),ze={keyword:"dependentSchemas",type:"object",schemaType:"object",code:(e)=>Ge.validateSchemaDeps(e)};U.default=ze});var H=pe(function(F){Object.defineProperty(F,"__esModule",{value:!0});var Ue=yn(),Ze={keyword:["maxContains","minContains"],type:"array",schemaType:"number",code({keyword:e,parentSchema:t,it:r}){if(t.contains===void 0)Ue.checkStrictMode(r,`"${e}" without "contains" is ignored`)}};F.default=Ze});var J=pe(function(B){Object.defineProperty(B,"__esModule",{value:!0});var He=L(),Be=Z(),Je=H(),Qe=[He.default,Be.default,Je.default];B.default=Qe});var X=pe(function(W){Object.defineProperty(W,"__esModule",{value:!0});var f=Bt(),Q=yn(),Xe=Rc(),Ye={message:"must NOT have unevaluated properties",params:({params:e})=>f._`{unevaluatedProperty: ${e.unevaluatedProperty}}`},et={keyword:"unevaluatedProperties",type:"object",schemaType:["boolean","object"],trackErrors:!0,error:Ye,code(e){let{gen:t,schema:r,data:o,errsCount:n,it:s}=e;if(!n)throw Error("ajv implementation error");let{allErrors:m,props:c}=s;if(c instanceof f.Name)t.if(f._`${c} !== true`,()=>t.forIn("key",o,(i)=>t.if(u(c,i),()=>a(i))));else if(c!==!0)t.forIn("key",o,(i)=>c===void 0?a(i):t.if(g(c,i),()=>a(i)));s.props=!0,e.ok(f._`${n} === ${Xe.default.errors}`);function a(i){if(r===!1){if(e.setParams({unevaluatedProperty:i}),e.error(),!m)t.break();return}if(!Q.alwaysValidSchema(s,r)){let p=t.name("valid");if(e.subschema({keyword:"unevaluatedProperties",dataProp:i,dataPropType:Q.Type.Str},p),!m)t.if(f.not(p),()=>t.break())}}function u(i,p){return f._`!${i} || !${i}[${p}]`}function g(i,p){let P=[];for(let R in i)if(i[R]===!0)P.push(f._`${p} !== ${R}`);return f.and(...P)}}};W.default=et});var te=pe(function(ee){Object.defineProperty(ee,"__esModule",{value:!0});var l=Bt(),Y=yn(),rt={message:({params:{len:e}})=>l.str`must NOT have more than ${e} items`,params:({params:{len:e}})=>l._`{limit: ${e}}`},at={keyword:"unevaluatedItems",type:"array",schemaType:["boolean","object"],error:rt,code(e){let{gen:t,schema:r,data:o,it:n}=e,s=n.items||0;if(s===!0)return;let m=t.const("len",l._`${o}.length`);if(r===!1)e.setParams({len:s}),e.fail(l._`${m} > ${s}`);else if(typeof r=="object"&&!Y.alwaysValidSchema(n,r)){let a=t.var("valid",l._`${m} <= ${s}`);t.if(l.not(a),()=>c(a,s)),e.ok(a)}n.items=!0;function c(a,u){t.forRange("i",u,m,(g)=>{if(e.subschema({keyword:"unevaluatedItems",dataProp:g,dataPropType:Y.Type.Num},a),!n.allErrors)t.if(l.not(a),()=>t.break())})}}};ee.default=at});var ae=pe(function(re){Object.defineProperty(re,"__esModule",{value:!0});var ot=X(),st=te(),it=[ot.default,st.default];re.default=it});var se=pe(function(oe){Object.defineProperty(oe,"__esModule",{value:!0});var dt=jk(),ut=Hk(),mt=zk(),ft=K(),lt=J(),pt=ae(),yt=Wk(),ne=Vk(),ht=[ft.default,dt.default,ut.default,(0,mt.default)(!0),yt.default,ne.metadataVocabulary,ne.contentVocabulary,lt.default,pt.default];oe.default=ht});var ie=pe(function(ir,gt){gt.exports={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://json-schema.org/draft/2020-12/schema",$vocabulary:{"https://json-schema.org/draft/2020-12/vocab/core":!0,"https://json-schema.org/draft/2020-12/vocab/applicator":!0,"https://json-schema.org/draft/2020-12/vocab/unevaluated":!0,"https://json-schema.org/draft/2020-12/vocab/validation":!0,"https://json-schema.org/draft/2020-12/vocab/meta-data":!0,"https://json-schema.org/draft/2020-12/vocab/format-annotation":!0,"https://json-schema.org/draft/2020-12/vocab/content":!0},$dynamicAnchor:"meta",title:"Core and Validation specifications meta-schema",allOf:[{$ref:"meta/core"},{$ref:"meta/applicator"},{$ref:"meta/unevaluated"},{$ref:"meta/validation"},{$ref:"meta/meta-data"},{$ref:"meta/format-annotation"},{$ref:"meta/content"}],type:["object","boolean"],$comment:"This meta-schema also defines keywords that have appeared in previous drafts in order to prevent incompatible extensions as they remain in common use.",properties:{definitions:{$comment:'"definitions" has been replaced by "$defs".',type:"object",additionalProperties:{$dynamicRef:"#meta"},deprecated:!0,default:{}},dependencies:{$comment:'"dependencies" has been split and replaced by "dependentSchemas" and "dependentRequired" in order to serve their differing semantics.',type:"object",additionalProperties:{anyOf:[{$dynamicRef:"#meta"},{$ref:"meta/validation#/$defs/stringArray"}]},deprecated:!0,default:{}},$recursiveAnchor:{$comment:'"$recursiveAnchor" has been replaced by "$dynamicAnchor".',$ref:"meta/core#/$defs/anchorString",deprecated:!0},$recursiveRef:{$comment:'"$recursiveRef" has been replaced by "$dynamicRef".',$ref:"meta/core#/$defs/uriReferenceString",deprecated:!0}}}});var ce=pe(function(cr,_t){_t.exports={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://json-schema.org/draft/2020-12/meta/applicator",$vocabulary:{"https://json-schema.org/draft/2020-12/vocab/applicator":!0},$dynamicAnchor:"meta",title:"Applicator vocabulary meta-schema",type:["object","boolean"],properties:{prefixItems:{$ref:"#/$defs/schemaArray"},items:{$dynamicRef:"#meta"},contains:{$dynamicRef:"#meta"},additionalProperties:{$dynamicRef:"#meta"},properties:{type:"object",additionalProperties:{$dynamicRef:"#meta"},default:{}},patternProperties:{type:"object",additionalProperties:{$dynamicRef:"#meta"},propertyNames:{format:"regex"},default:{}},dependentSchemas:{type:"object",additionalProperties:{$dynamicRef:"#meta"},default:{}},propertyNames:{$dynamicRef:"#meta"},if:{$dynamicRef:"#meta"},then:{$dynamicRef:"#meta"},else:{$dynamicRef:"#meta"},allOf:{$ref:"#/$defs/schemaArray"},anyOf:{$ref:"#/$defs/schemaArray"},oneOf:{$ref:"#/$defs/schemaArray"},not:{$dynamicRef:"#meta"}},$defs:{schemaArray:{type:"array",minItems:1,items:{$dynamicRef:"#meta"}}}}});var de=pe(function(dr,bt){bt.exports={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://json-schema.org/draft/2020-12/meta/unevaluated",$vocabulary:{"https://json-schema.org/draft/2020-12/vocab/unevaluated":!0},$dynamicAnchor:"meta",title:"Unevaluated applicator vocabulary meta-schema",type:["object","boolean"],properties:{unevaluatedItems:{$dynamicRef:"#meta"},unevaluatedProperties:{$dynamicRef:"#meta"}}}});var ue=pe(function(ur,vt){vt.exports={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://json-schema.org/draft/2020-12/meta/content",$vocabulary:{"https://json-schema.org/draft/2020-12/vocab/content":!0},$dynamicAnchor:"meta",title:"Content vocabulary meta-schema",type:["object","boolean"],properties:{contentEncoding:{type:"string"},contentMediaType:{type:"string"},contentSchema:{$dynamicRef:"#meta"}}}});var me=pe(function(mr,jt){jt.exports={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://json-schema.org/draft/2020-12/meta/core",$vocabulary:{"https://json-schema.org/draft/2020-12/vocab/core":!0},$dynamicAnchor:"meta",title:"Core vocabulary meta-schema",type:["object","boolean"],properties:{$id:{$ref:"#/$defs/uriReferenceString",$comment:"Non-empty fragments not allowed.",pattern:"^[^#]*#?$"},$schema:{$ref:"#/$defs/uriString"},$ref:{$ref:"#/$defs/uriReferenceString"},$anchor:{$ref:"#/$defs/anchorString"},$dynamicRef:{$ref:"#/$defs/uriReferenceString"},$dynamicAnchor:{$ref:"#/$defs/anchorString"},$vocabulary:{type:"object",propertyNames:{$ref:"#/$defs/uriString"},additionalProperties:{type:"boolean"}},$comment:{type:"string"},$defs:{type:"object",additionalProperties:{$dynamicRef:"#meta"}}},$defs:{anchorString:{type:"string",pattern:"^[A-Za-z_][-A-Za-z0-9._]*$"},uriString:{type:"string",format:"uri"},uriReferenceString:{type:"string",format:"uri-reference"}}}});var fe=pe(function(fr,qt){qt.exports={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://json-schema.org/draft/2020-12/meta/format-annotation",$vocabulary:{"https://json-schema.org/draft/2020-12/vocab/format-annotation":!0},$dynamicAnchor:"meta",title:"Format vocabulary meta-schema for annotation results",type:["object","boolean"],properties:{format:{type:"string"}}}});var le=pe(function(lr,Pt){Pt.exports={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://json-schema.org/draft/2020-12/meta/meta-data",$vocabulary:{"https://json-schema.org/draft/2020-12/vocab/meta-data":!0},$dynamicAnchor:"meta",title:"Meta-data vocabulary meta-schema",type:["object","boolean"],properties:{title:{type:"string"},description:{type:"string"},default:!0,deprecated:{type:"boolean",default:!1},readOnly:{type:"boolean",default:!1},writeOnly:{type:"boolean",default:!1},examples:{type:"array",items:!0}}}});var ye=pe(function(pr,Rt){Rt.exports={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://json-schema.org/draft/2020-12/meta/validation",$vocabulary:{"https://json-schema.org/draft/2020-12/vocab/validation":!0},$dynamicAnchor:"meta",title:"Validation vocabulary meta-schema",type:["object","boolean"],properties:{type:{anyOf:[{$ref:"#/$defs/simpleTypes"},{type:"array",items:{$ref:"#/$defs/simpleTypes"},minItems:1,uniqueItems:!0}]},const:!0,enum:{type:"array",items:!0},multipleOf:{type:"number",exclusiveMinimum:0},maximum:{type:"number"},exclusiveMaximum:{type:"number"},minimum:{type:"number"},exclusiveMinimum:{type:"number"},maxLength:{$ref:"#/$defs/nonNegativeInteger"},minLength:{$ref:"#/$defs/nonNegativeIntegerDefault0"},pattern:{type:"string",format:"regex"},maxItems:{$ref:"#/$defs/nonNegativeInteger"},minItems:{$ref:"#/$defs/nonNegativeIntegerDefault0"},uniqueItems:{type:"boolean",default:!1},maxContains:{$ref:"#/$defs/nonNegativeInteger"},minContains:{$ref:"#/$defs/nonNegativeInteger",default:1},maxProperties:{$ref:"#/$defs/nonNegativeInteger"},minProperties:{$ref:"#/$defs/nonNegativeIntegerDefault0"},required:{$ref:"#/$defs/stringArray"},dependentRequired:{type:"object",additionalProperties:{$ref:"#/$defs/stringArray"}}},$defs:{nonNegativeInteger:{type:"integer",minimum:0},nonNegativeIntegerDefault0:{$ref:"#/$defs/nonNegativeInteger",default:0},simpleTypes:{enum:["array","boolean","integer","null","number","object","string"]},stringArray:{type:"array",items:{type:"string"},uniqueItems:!0,default:[]}}}});var $e=pe(function(he){Object.defineProperty(he,"__esModule",{value:!0});var At=ie(),Ot=ce(),Mt=de(),St=ue(),xt=me(),It=fe(),wt=le(),Nt=ye(),Tt=["/properties"];function kt(e){return[At,Ot,Mt,St,xt,t(this,It),wt,t(this,Nt)].forEach((r)=>this.addMetaSchema(r,void 0,!1)),this;function t(r,o){return e?r.$dataMetaSchema(o,Tt):o}}he.default=kt});var Ft=pe(function(d,q){Object.defineProperty(d,"__esModule",{value:!0});d.MissingRefError=d.ValidationError=d.CodeGen=d.Name=d.nil=d.stringify=d.str=d._=d.KeywordCxt=d.Ajv2020=void 0;var Ct=Pk(),Vt=se(),Dt=Uk(),Kt=$e(),j="https://json-schema.org/draft/2020-12/schema";class h extends Ct.default{constructor(e={}){super({...e,dynamicRef:!0,next:!0,unevaluated:!0})}_addVocabularies(){if(super._addVocabularies(),Vt.default.forEach((e)=>this.addVocabulary(e)),this.opts.discriminator)this.addKeyword(Dt.default)}_addDefaultMetaSchema(){super._addDefaultMetaSchema();let{$data:e,meta:t}=this.opts;if(!t)return;Kt.default.call(this,e),this.refs["http://json-schema.org/schema"]=j}defaultMeta(){return this.opts.defaultMeta=super.defaultMeta()||(this.getSchema(j)?j:void 0)}}d.Ajv2020=h;q.exports=d=h;q.exports.Ajv2020=h;Object.defineProperty(d,"__esModule",{value:!0});d.default=h;var Gt=Yg();Object.defineProperty(d,"KeywordCxt",{enumerable:!0,get:function(){return Gt.KeywordCxt}});var y=Bt();Object.defineProperty(d,"_",{enumerable:!0,get:function(){return y._}});Object.defineProperty(d,"str",{enumerable:!0,get:function(){return y.str}});Object.defineProperty(d,"stringify",{enumerable:!0,get:function(){return y.stringify}});Object.defineProperty(d,"nil",{enumerable:!0,get:function(){return y.nil}});Object.defineProperty(d,"Name",{enumerable:!0,get:function(){return y.Name}});Object.defineProperty(d,"CodeGen",{enumerable:!0,get:function(){return y.CodeGen}});var zt=By();Object.defineProperty(d,"ValidationError",{enumerable:!0,get:function(){return zt.default}});var Lt=Zg();Object.defineProperty(d,"MissingRefError",{enumerable:!0,get:function(){return Lt.default}})});export default Ft();
-
-//# debugId=1694415B4E0D0BE564756E2164756E21
-//# sourceMappingURL=2020-906vx2dq.js.map

package/dist/chunks/adapter-hnvad61x.js

@@ -1,4 +0,0 @@
-import{Ks,Js,zr}from"./studio-90zkgne5.js";export{zr as draggable,Ks as dropTargetForElements,Js as monitorForElements};
-
-//# debugId=55377EFB712CCBE264756E2164756E21
-//# sourceMappingURL=adapter-hnvad61x.js.map