@jxsuite/studio 10.4.0 → 10.6.0

package/src/panels/elements-panel.ts

@@ -1,6 +1,9 @@
 /// <reference lib="dom" />
 /**
- * Elements panel — the Insert palette: the blocks and components a page is built out of.
+ * Elements panel — the Insert palette: the blocks and components a page is built out of, on two
+ * tabs, Elements and Components (§5.3). Each element card is named in the reader's language
+ * (`locale/element-names.ts`), with its tag beside the name, and the categories lead with what a
+ * first page is made of: text, lists, media and layout before forms, tables and inline formatting.
  *
  * **The body is a Jx document** (`surfaces/panel-elements.json`, mounted by
  * `surfaces/panel-elements.ts`), so `render` draws nothing and `afterRender` mounts. What stays
@@ -30,6 +33,7 @@ import { mountElementsSurface } from "../surfaces/panel-elements";
 import { mutateInsertNode, transactDoc } from "../tabs/transact";
 import { primarySelection } from "../tabs/selection";
 import { registerPanel } from "./panel-registry";
+import { categoryName, elementDescription, elementName } from "../locale/element-names";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
 
@@ -38,8 +42,10 @@ import type {
   ComponentCardView,
   ElementCategoryView,
   ElementsActions,
+  ElementsEmptyState,
   ElementsSurfaceHandle,
   ElementsValues,
+  InsertTab,
 } from "../surfaces/panel-elements";
 import type { JxElement, JxMutableNode } from "@jxsuite/schema/types";
 import type { NavigatorPanelContext, NavigatorPanelDeps, PanelBody } from "./panel-registry";
@@ -49,8 +55,13 @@ interface ElementsWebdata {
   elements?: Record<string, { tag: string }[]>;
 }
 
-/** The Components section's name — its accordion label AND its key in `view.elementsCollapsed`. */
-const COMPONENTS = "Components";
+/**
+ * The categories that start closed: inline formatting and the advanced remainder (§5.3). Both are
+ * long, and neither is where somebody building their first page looks, so a newcomer sees the
+ * everyday blocks first and opens these when they want them. A filter opens them too, unless the
+ * reader has closed one by hand.
+ */
+const CLOSED_AT_FIRST: ReadonlySet<string> = new Set(["inline", "advanced"]);
 
 /**
  * What the palette is built from, held at module scope rather than closed over at mount.
@@ -76,18 +87,37 @@ function needle(): string {
   return view.elementsFilter.toLowerCase();
 }
 
-/** The categories that still have something in them, with the filter applied. */
+/** Whether a section is drawn open: the reader's own choice, else its default. */
+function sectionOpen(key: string, filter: string): boolean {
+  return view.elementsOpen.get(key) ?? (filter !== "" || !CLOSED_AT_FIRST.has(key));
+}
+
+/**
+ * The categories that still have something in them, with the filter applied, in the order
+ * `webdata.elements` declares them (§5.3). A card matches on its name in the reader's language or
+ * on its tag, so "image" and "img" both find the same card.
+ */
 function categoryViews(webdata: ElementsWebdata, filter: string): ElementCategoryView[] {
   const sections: ElementCategoryView[] = [];
-  for (const [name, elements] of Object.entries(webdata.elements ?? {})) {
-    const matched = filter ? elements.filter((entry) => entry.tag.includes(filter)) : elements;
+  for (const [key, elements] of Object.entries(webdata.elements ?? {})) {
+    const cards = elements.map(({ tag }) => ({
+      description: elementDescription(tag),
+      name: elementName(tag),
+      tag,
+    }));
+    const matched = filter
+      ? cards.filter(
+          (card) => card.tag.includes(filter) || card.name.toLowerCase().includes(filter),
+        )
+      : cards;
     if (matched.length === 0) {
       continue;
     }
     sections.push({
-      elements: matched.map(({ tag }) => ({ tag })),
-      name,
-      open: !view.elementsCollapsed.has(name),
+      elements: matched,
+      key,
+      name: categoryName(key),
+      open: sectionOpen(key, filter),
     });
   }
   return sections;
@@ -145,23 +175,51 @@ function componentViews(filter: string): ComponentCardView[] {
     }));
 }
 
+/** Which body a tab shows: its cards, or why it has none. */
+function emptyState(count: number, filter: string): ElementsEmptyState {
+  if (count > 0) {
+    return "none";
+  }
+  return filter ? "filtered" : "empty";
+}
+
+/** The other tab, which a filtered-out tab offers to switch to. */
+function otherTab(tab: InsertTab): InsertTab {
+  return tab === "elements" ? "components" : "elements";
+}
+
+/** "Show 1 matching component", "Show 3 matching elements": the other tab's offer. */
+function otherMatchesLabel(tab: InsertTab, count: number): string {
+  const noun = tab === "elements" ? "element" : "component";
+  return `Show ${count} matching ${noun}${count === 1 ? "" : "s"}`;
+}
+
 /** Everything the document draws, as one value. */
 function panelValues(source: NavigatorPanelDeps): ElementsValues {
   const filter = needle();
+  const tab = view.insertTab;
   /* SAFETY: `webdata` is wired in studio.ts from the bundled data/webdata.json, whose `elements`
-     maps each category name to an array of `{ tag }` entries. */
+     maps each category key to an array of `{ tag }` entries. */
   const categories = categoryViews(source.webdata as ElementsWebdata, filter);
   const components = componentViews(filter);
-  const bare = categories.length === 0 && components.length === 0;
+  const elementCount = categories.reduce((sum, section) => sum + section.elements.length, 0);
+  const counts: Record<InsertTab, number> = {
+    components: components.length,
+    elements: elementCount,
+  };
+  const other = otherTab(tab);
+  const showOffer = filter !== "" && counts[tab] === 0 && counts[other] > 0;
   return {
     categories,
     components,
-    componentsOpen: !view.elementsCollapsed.has(COMPONENTS),
-    emptyState: bare ? (filter ? "filtered" : "empty") : "none",
+    componentsEmpty: emptyState(components.length, filter),
+    elementsEmpty: emptyState(elementCount, filter),
     /* The reader's own text, not `filter`: the field is bound to this, and a scope holding the
        lower-cased form would rewrite what was typed on every keystroke. */
     filter: view.elementsFilter,
-    hasComponents: components.length > 0,
+    filterLabel: tab === "elements" ? "Filter elements" : "Filter components",
+    otherMatches: showOffer ? otherMatchesLabel(other, counts[other]) : "",
+    tab,
   };
 }
 
@@ -207,6 +265,17 @@ function refresh(): void {
 
 /** What the document's controls do. Every one of them is a decision this module owns. */
 const ACTIONS: ElementsActions = {
+  /* The strip announces any value its tabs carry; only the two this panel draws are taken. */
+  selectTab: (tab) => {
+    if (tab === "elements" || tab === "components") {
+      view.insertTab = tab;
+      refresh();
+    }
+  },
+  showOtherTab: () => {
+    view.insertTab = otherTab(view.insertTab);
+    refresh();
+  },
   clearFilter: () => {
     view.elementsFilter = "";
     refresh();
@@ -223,31 +292,20 @@ const ACTIONS: ElementsActions = {
       insertAtSelection(panelDeps.defaultDef(tag) as JxMutableNode);
     }
   },
-  setComponentsOpen: (open) => {
-    setCollapsed(COMPONENTS, !open);
-    refresh();
-  },
   /* The echo: what the field now holds goes into the state the palette is filtered by, before
      anything is decided about it. */
   setFilter: (value) => {
     view.elementsFilter = value;
     refresh();
   },
-  setSectionOpen: (name, open) => {
-    setCollapsed(name, !open);
+  /* Remembered across repaints and panel switches, and from then on it outranks the section's
+     default, the filter's included. */
+  setSectionOpen: (key, open) => {
+    view.elementsOpen.set(key, open);
     refresh();
   },
 };
 
-/** Remember a section's disclosure across repaints and across panel switches. */
-function setCollapsed(name: string, collapsed: boolean): void {
-  if (collapsed) {
-    view.elementsCollapsed.add(name);
-  } else {
-    view.elementsCollapsed.delete(name);
-  }
-}
-
 /**
  * Draw the panel body — mounting the document the first time, updating it every time after.
  *
@@ -277,13 +335,13 @@ export function mountElementsPanel(ctx: NavigatorPanelContext, host: HTMLElement
 }
 
 /**
- * Contribute the Insert panel — **off the rail** (`rail: false`).
+ * Contribute the Insert panel — the first button of the rail's DOCUMENT group (§5.1).
  *
- * §5.1 keeps Insert off the Navigator rail because it is not a view of anything: it is an insert
- * palette, and a palette belongs at the caret (slash menu), on the canvas (`+`) and behind ⌘⇧A, all
- * of which are the Insert command family. The record survives so the surface stays reachable —
- * `view.setActivity {tab:"insert"}`, the palette, and the screenshot pipeline all still address it
- * — and giving up its rail slot is what keeps the DOCUMENT group at four.
+ * It is the place an author picks an element or component from and drags it onto the canvas, so it
+ * stays on screen while they work: a card is a choice to look at, compare and drag, and a palette
+ * that has to be summoned by name before it can be seen is one only a reader of the command list
+ * finds. The slash menu and the canvas `+` stay the inserts at the caret; this is the one an author
+ * browses.
  *
  * `level: "document"`, per §13.2's own worked example: it READS the project's component registry
  * and WRITES the document tree.
@@ -295,7 +353,6 @@ export function registerInsertPanel(): void {
     level: "document",
     dock: "navigator",
     icon: "grid-four",
-    rail: false,
     // The body is a document, so lit draws nothing and the mount happens against the painted DOM.
     // `afterRender` runs on every repaint; {@link mountElementsPanel} is idempotent.
     render: (): PanelBody => nothing,

package/src/panels/events-panel.ts

@@ -76,6 +76,7 @@ import {
   bindableSignalNames,
   defaultAsString,
   isInspectorSectionOpen,
+  mapListSignalsFor,
   mapSignalsFor,
   setInspectorSection,
 } from "./properties-panel";
@@ -348,6 +349,7 @@ function addField(
         (next) => spec.onChange({ $expression: next } as JsonValue),
         {
           allowEventRef: false,
+          extraRefs: spec.extraSignals,
           stateDefs: [...spec.stateDefs],
           stateEntries: null,
         },
@@ -452,7 +454,7 @@ export function projectLogicPanel(): LogicView {
     view.repeaterFields = [
       addField(fields, `prop|${key}|items`, "items", {
         caps: "repeaterItems",
-        extraSignals: null,
+        extraSignals: mapListSignalsFor(doc, selection),
         label: "Items",
         literalDefault: literalDefaultOf(node.items),
         onChange: (v?: JsonValue) =>
@@ -475,7 +477,7 @@ export function projectLogicPanel(): LogicView {
         // `SwitchDef` is a $ref and nothing else, so From data… is the only rung — a $switch is
         // Inherently dynamic, and de-escalating it would delete the key and demote the node.
         caps: "switchDiscriminant",
-        extraSignals: mapSignalsFor(selection),
+        extraSignals: mapSignalsFor(doc, selection),
         label: "Expression",
         literalDefault: literalDefaultOf(node.$switch),
         onChange: (v?: JsonValue) =>
@@ -620,6 +622,7 @@ function bindingView(
         {
           allowEventRef: true,
           emits: fn.emits ?? [],
+          extraRefs: mapSignalsFor(tab.doc.document, selection),
           /* The Inspector's copy, named by the handler it edits. It answered to
              `navigator/statements` until the docks were split, and then to a bare
              `inspector/statements` — which the binding list stamps once per structured handler, so
@@ -657,6 +660,7 @@ function bindingView(
     plan.paint = (host) =>
       mountExpressionEditor(host, expression, commitExpression, {
         allowEventRef: true,
+        extraRefs: mapSignalsFor(tab.doc.document, selection),
         onInsertDef: insertDef,
         preview,
         stateDefs: Object.keys(defs),

package/src/panels/formula-workspace.ts

@@ -59,6 +59,7 @@ import { livePreviewExpression } from "../services/live-preview";
 import { closeFunctionEditor, syncFunctionEditor } from "./editors";
 import { registerPanel } from "./panel-registry";
 import { dataTypeLabel, paintDataTree, unwrapSignal } from "./data-explorer";
+import { mapSignalsFor } from "./properties-panel";
 import { disposeDetachedDataTrees } from "../surfaces/panel-data";
 import { emptyLogicWorkspaceView, mountLogicWorkspace } from "../surfaces/logic-workspace";
 
@@ -72,6 +73,7 @@ import {
 
 import type { AnyCommand, CommandRegistry } from "../commands/registry";
 import type { PanelBody } from "./panel-registry";
+import type { SurfaceOption } from "../ui/surface";
 import type { ExpressionPreview } from "../services/preview-eval";
 import type { FormulaEditDef, FunctionEditDef } from "../types";
 import type { Tab } from "../tabs/tab";
@@ -314,6 +316,8 @@ interface Resolved {
   stateEntries: Record<string, JxStateDefinition>;
   preview: ExpressionPreview | null;
   allowEventRef: boolean;
+  /** The repeater item's fields, for an event handler inside a template. */
+  extraRefs: SurfaceOption[] | null;
   /** Chip key → node path, so a chip click needs no path parsing (a `switch` case may hold "/"). */
   chipPaths: Map<string, NodePath>;
   /** Rail entry name → the value its tree draws. */
@@ -475,6 +479,10 @@ export function workspaceView(): LogicWorkspaceView {
     allowEventRef: editing.type === "event",
     chipPaths,
     editing,
+    extraRefs:
+      editing.type === "event" && editing.path
+        ? mapSignalsFor(tab.doc.document, editing.path)
+        : null,
     preview,
     root,
     scopeValues: rail.values,
@@ -528,6 +536,7 @@ function paintEditor(): void {
   mountExpressionEditor(host, held.selected, writeSelected, {
     allowEventRef: held.allowEventRef,
     depth: 1,
+    extraRefs: held.extraRefs,
     onInsertDef: insertDef,
     path: held.selectedPath,
     preview: held.preview,

package/src/panels/imports-panel.ts

@@ -50,6 +50,7 @@ import type {
 } from "../surfaces/panel-imports";
 import type { JxMutableNode } from "@jxsuite/schema/types";
 import type { SurfaceOption } from "../ui/surface";
+import { isProjectConfigPath } from "@jxsuite/schema/project-file";
 
 /** What the panel is drawn against. `left-panel.ts`'s context, reduced to what this reads. */
 export interface ImportsContext {
@@ -204,7 +205,7 @@ function documentView(ctx: ImportsContext): ImportsView {
 
 /** What the panel shows right now. `project.json` is the one document with the other mood. */
 function view(ctx: ImportsContext): ImportsView {
-  return ctx.documentPath?.endsWith("project.json") ? siteView() : documentView(ctx);
+  return isProjectConfigPath(ctx.documentPath) ? siteView() : documentView(ctx);
 }
 
 /** Push the current projection into the standing surface, in this turn. */
@@ -295,7 +296,7 @@ async function onToggleComponent(id: string, checked: boolean): Promise<void> {
   if (!ctx || !comp) {
     return;
   }
-  if (ctx.documentPath?.endsWith("project.json")) {
+  if (isProjectConfigPath(ctx.documentPath)) {
     const before = siteElements();
     const updated = checked
       ? enableElement(before, comp, null)

package/src/panels/navigator-panels.ts

@@ -8,9 +8,9 @@
  * the second definition site the registry exists to prevent.
  *
  * **Registration order is rail order** within a level group: PROJECT (Site, then Files with the
- * developer panels on) above the divider, DOCUMENT (Outline · Data, then Packages with the
- * developer panels on) below it (§5.1). Search, Languages and Insert are registered rail-less:
- * reachable by `view.setActivity` and the palette, with no button.
+ * developer panels on) above the divider, DOCUMENT (Insert · Outline · Data, then Packages with the
+ * developer panels on) below it (§5.1). Search and Languages are registered rail-less: reachable by
+ * `view.setActivity` and the palette, with no button.
  *
  * **Every rail button opens the Navigator.** Problems used to hold the fourth PROJECT slot while
  * its body was drawn in the Bottom dock, and paying for that took a per-dock branch in three
@@ -84,13 +84,13 @@ export function registerNavigatorPanels(): void {
   registerI18nPanel();
 
   // ── DOCUMENT group ──────────────────────────────────────────────────────────
+  /* Insert leads the group: it is where a page's elements and components are picked from and
+     dragged onto the canvas, the verb a Design session is mostly made of (§5.1, §5.3). */
+  registerInsertPanel();
   registerLayersPanel();
   registerDataPanel();
   registerPackagesPanel();
 
-  // ── Off-rail: reachable by command and palette, no rail button ──────────────
-  registerInsertPanel();
-
   // ── The Bottom dock's tabs (§16.3): Problems · Logic · Activity ──────────────
   // Composed here, in the one place panel records are gathered, so the shell has ONE composition
   // Site rather than one per dock. Importing the module is also what attaches the dock to the
@@ -122,10 +122,10 @@ export function navigatorPanelSet(): readonly PanelRecord[] {
  * The roster `panel.focus.*` is generated from: rail order first, then the rail-less Navigator
  * panels.
  *
- * Not `railPanelSet()`: Insert and Languages have no rail button and no chord, and they still need
- * a `Show …` command and a palette row, which is the whole point of `rail: false` (a surface
- * reachable by name, not by number). State used to be the third of them and is gone: its editor is
- * the Data panel's now, so there is no second record to roster.
+ * Not `railPanelSet()`: Languages has no rail button and no chord, and it still needs a `Show …`
+ * command and a palette row, which is the whole point of `rail: false` (a surface reachable by
+ * name, not by number). State and Insert were rail-less beside it once: State's editor is the Data
+ * panel's now, and Insert is back on the rail (§5.1).
  *
  * The Bottom dock's three tabs are deliberately absent — Problems as of this change, and Logic and
  * Activity all along. Each is `rail: false` AND hosted there, so each is addressed by

package/src/panels/panel-registry.ts

@@ -153,9 +153,9 @@ export interface PanelRecord {
    *
    * Not a hiding mechanism — a rail-less panel is still reachable by `view.setActivity`, by the
    * palette and by another surface linking to it. It is how a record survives the interval between
-   * losing its rail slot and gaining its real home (Insert, reachable from the canvas and palette;
-   * State, folded into Data — §5.1). Declaring it `false` also removes the panel's `rail/<level>`
-   * placement, which is what keeps the rail inside its four-per-group budget.
+   * losing its rail slot and gaining its real home (State, folded into Data — §5.1). Declaring it
+   * `false` also removes the panel's `rail/<level>` placement, which is what keeps the rail inside
+   * its four-per-group budget.
    *
    * `"developer"` is a rail button only while **Show developer panels** is on (§5.1,
    * `settings/developer-panels.ts`): Files and Packages, which a site author does not need on the

package/src/panels/properties-panel.ts

@@ -41,7 +41,7 @@
  * @docs studio/design/properties
  */
 
-import { getNodeAtPath } from "../store";
+import { getNodeAtPath, projectState } from "../store";
 import { effect, effectScope, reactive } from "../reactivity";
 import {
   displayTagName,
@@ -50,6 +50,7 @@ import {
   isRef,
   isString,
   isTagExpression,
+  isTemplateString,
 } from "@jxsuite/schema/guards";
 import type { JsonValue } from "../types";
 import {
@@ -114,6 +115,13 @@ import type { LinkKind } from "../utils/link-target";
 import { clickAnythingTo, openPageAction, staleSelectionMessage } from "./empty-state";
 import { mountMediaPicker, unmountMediaPicker } from "../ui/media-picker";
 import { colorTokens, resolvedColor } from "../ui/color-selector";
+import {
+  childrenTemplate,
+  fieldOfChildrenTemplate,
+  mapRefLabel,
+  repeaterItemFields,
+} from "../editor/repeater-scope";
+import type { RepeaterField } from "../editor/repeater-scope";
 import { mountExpressionEditor } from "../ui/expression-editor";
 import type { ExpressionEditorOpts } from "../ui/expression-editor";
 import {
@@ -182,20 +190,45 @@ function nodeAtPath(doc: JxMutableNode, path: JxPath): JxMutableNode | undefined
 // ─── The binding vocabulary, shared with the Logic tab ───────────────────────
 
 /**
- * The two extra signals a position inside a repeater template can bind to, or `null` outside one.
+ * The extra signals a position inside a repeater template can bind to, or `null` outside one: the
+ * item, every field of the item the document and project declare, and its index.
  *
  * A "map" segment addresses a repeater template (`[…, "children", i, "map", …]`, or the legacy `[…,
  * "children", "map", …]`), so anything at or below it is inside one.
  *
  * Exported because Content and Logic both offer them and there is one right answer: a `$switch`
- * inside a `$map` can read `$map/item`, and so can the `alt` attribute two nodes below it.
+ * inside a `$map` can read `$map/item/data/title`, and so can the `alt` attribute two nodes below
+ * it. `$map/item` stays first, because a fresh binding lands on the first signal offered.
+ *
+ * `withNodes` adds the fields holding child nodes, for the one position that can draw them.
+ */
+export function mapSignalsFor(
+  doc: JxMutableNode,
+  path: JxPath,
+  options: { withNodes?: boolean } = {},
+): SurfaceOption[] | null {
+  if (!path.includes("map")) {
+    return null;
+  }
+  const fields = repeaterItemFields(doc, path, projectState?.projectConfig, options);
+  return [
+    { label: "item", value: "$map/item" },
+    ...fields.map((field) => ({ label: field.token, value: field.pointer })),
+    { label: "index", value: "$map/index" },
+  ];
+}
+
+/**
+ * What a repeater's own Items can read from the repeater around it: the lists on the outer item.
+ * Only those, because an Items position takes a list, and the index or a text field would render
+ * nothing.
  */
-export function mapSignalsFor(path: JxPath): SurfaceOption[] | null {
-  return path.includes("map")
-    ? [
-        { label: "$map/item", value: "$map/item" },
-        { label: "$map/index", value: "$map/index" },
-      ]
+export function mapListSignalsFor(doc: JxMutableNode, path: JxPath): SurfaceOption[] | null {
+  const lists = repeaterItemFields(doc, path, projectState?.projectConfig).filter(
+    (field) => field.isArray,
+  );
+  return lists.length > 0
+    ? lists.map((field) => ({ label: field.token, value: field.pointer }))
     : null;
 }
 
@@ -228,7 +261,7 @@ export function defaultAsString(def: JxStateDefinition | undefined) {
 function bindingDonor(value: JxDocumentValue | undefined): string {
   if (isRef(value)) {
     const ref = value.$ref;
-    return ref.startsWith("#/state/") ? ref.slice(8) : ref || "nothing yet";
+    return ref.startsWith("#/state/") ? ref.slice(8) : mapRefLabel(ref) || ref || "nothing yet";
   }
   return isString(value) ? "a template" : "a formula";
 }
@@ -1098,6 +1131,7 @@ function applyLadder(row: ContentRowView, plan: RowPlan, opts: LadderOpts): void
     plan.draft = undefined;
     const editorOpts: ExpressionEditorOpts = {
       allowEventRef: false,
+      extraRefs: opts.extraSignals,
       preview: null,
       stateDefs: opts.stateDefs,
       stateEntries: null,
@@ -1230,7 +1264,7 @@ function sectionsFor(node: JxMutableNode, path: JxPath): ContentSectionView[] {
   const tagName = displayTagName(node.tagName) || "div";
   const isCustomInstance = displayTagName(node.tagName).includes("-");
   const attrs = node.attributes || {};
-  const mapSignals = mapSignalsFor(path);
+  const mapSignals = mapSignalsFor(doc, path);
   const bindableSignals = bindableSignalNames(doc);
 
   // ── Which attributes this tag has, by section ──
@@ -1276,7 +1310,7 @@ function sectionsFor(node: JxMutableNode, path: JxPath): ContentSectionView[] {
   const sections: ContentSectionView[] = [
     sectionView("__element", "Element", isInspectorSectionOpen("__element", false), [], 0),
   ];
-  sections[0]!.rows = elementRows(node, path, tagName, mapSignals, bindableSignals);
+  sections[0]!.rows = elementRows(node, path, tagName, bindableSignals);
 
   if (isCustomInstance) {
     const definitionOfThis = isComponentDefinitionOpen(node);
@@ -1366,11 +1400,90 @@ function draftKey(path: JxPath, name: string): string {
   return `prop:${path.join("/")}:${name}`;
 }
 
+/**
+ * What a write to the content row leaves in `children`: the template to hold, or `null` for none.
+ *
+ * `$children` is a list of nodes, so it cannot be held in `textContent`, which would draw it as
+ * `[object Object]`. Picking it, or typing a template that reads it, moves the binding to the
+ * computed-children form the compiler already expands (spec.md §8.4). A template the row already
+ * held there that names no such field (`${state.entry.$children}`) stays there as it is edited.
+ */
+function computedChildrenFrom(
+  value: JsonValue | undefined,
+  nodeFields: readonly RepeaterField[],
+  keepsTemplate: boolean,
+): string | null {
+  if (isRef(value)) {
+    const field = nodeFields.find((f) => f.pointer === value.$ref);
+    return field ? childrenTemplate(field) : null;
+  }
+  if (!isTemplateString(value)) {
+    return null;
+  }
+  return keepsTemplate || fieldOfChildrenTemplate(value, nodeFields) ? value : null;
+}
+
+/**
+ * The Text Content row, which is also where an element's child nodes are bound.
+ *
+ * One row for two properties, because they are one question: what fills this element. A node with
+ * computed children has no text to show, and it used to draw this row empty and on Fixed value, so
+ * the binding could not be seen and typing here wrote text the compiled page never drew.
+ */
+function contentRow(
+  node: JxMutableNode,
+  path: JxPath,
+  bindableSignals: string[],
+  propertyChip: (name: string, human: string) => FieldProvenance,
+): ContentRowView {
+  const doc = activeTab.value!.doc.document;
+  const nodeFields = repeaterItemFields(doc, path, projectState?.projectConfig, {
+    withNodes: true,
+  }).filter((field) => field.holdsNodes);
+  const computed = isTemplateString(node.children) ? node.children : null;
+  const bound = computed === null ? undefined : fieldOfChildrenTemplate(computed, nodeFields);
+  const value = bound ? { $ref: bound.pointer } : (computed ?? node.textContent);
+  const write = (next?: JsonValue): void => {
+    const template = computedChildrenFrom(next, nodeFields, computed !== null && !bound);
+    transactDoc(activeTab.value, (t) => {
+      if (template === null || node.textContent !== undefined) {
+        mutateUpdateProperty(t, path, "textContent", template === null ? next : undefined);
+      }
+      if (template !== computed) {
+        mutateUpdateProperty(t, path, "children", template ?? undefined);
+      }
+    });
+  };
+
+  const textDraft = draft(draftKey(path, "textContent"));
+  const text = blankRow(
+    "prop|textContent",
+    "textContent",
+    computed === null ? "Text Content" : "Content",
+  );
+  text.kind = "textarea";
+  text.value = getFieldValue(textDraft, isString(value) ? value : "");
+  const plan: RowPlan = { commit: write, debounceMs: LIVE_PREVIEW, draft: textDraft };
+  applyLadder(text, plan, {
+    caps: "textProperty",
+    extraSignals: mapSignalsFor(doc, path, { withNodes: true }),
+    fieldKey: `prop|${path.join("/")}|textContent`,
+    onChange: write,
+    stateDefs: bindableSignals,
+    value,
+  });
+  if (computed !== null) {
+    applyChip(text, plan, "textContent", propertyChip("children", "content"));
+  } else if (node.textContent !== undefined) {
+    applyChip(text, plan, "textContent", propertyChip("textContent", "text"));
+  }
+  return withPlan(text, plan);
+}
+
 function elementRows(
   node: JxMutableNode,
   path: JxPath,
   tagName: string,
-  mapSignals: SurfaceOption[] | null,
   bindableSignals: string[],
 ): ContentRowView[] {
   const chosenTag = isTagExpression(node.tagName) ? node.tagName.$expression : null;
@@ -1459,28 +1572,7 @@ function elementRows(
   rows.push(withPlan(cls.row, cls.plan));
 
   if (!Array.isArray(node.children) || node.children.length === 0) {
-    const textDraft = draft(draftKey(path, "textContent"));
-    const text = blankRow("prop|textContent", "textContent", "Text Content");
-    text.kind = "textarea";
-    text.value = getFieldValue(textDraft, isString(node.textContent) ? node.textContent : "");
-    const plan: RowPlan = {
-      commit: writeProperty("textContent"),
-      debounceMs: LIVE_PREVIEW,
-      draft: textDraft,
-    };
-    applyLadder(text, plan, {
-      caps: "textProperty",
-      extraSignals: mapSignals,
-      fieldKey: `prop|${path.join("/")}|textContent`,
-      onChange: (v) =>
-        transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, "textContent", v)),
-      stateDefs: bindableSignals,
-      value: node.textContent,
-    });
-    if (node.textContent !== undefined) {
-      applyChip(text, plan, "textContent", propertyChip("textContent", "text"));
-    }
-    rows.push(withPlan(text, plan));
+    rows.push(contentRow(node, path, bindableSignals, propertyChip));
   }
 
   const hidden = blankRow("prop|hidden", "hidden", "Hidden");

package/src/panels/site-panel.ts

@@ -71,6 +71,7 @@ import type {
   SiteSectionState,
 } from "../surfaces/site-panel";
 import type { SiteComponentRow, SiteMediaRow, SitePageFact } from "./site-model";
+import { isProjectConfigPath } from "@jxsuite/schema/project-file";
 
 // ─── The project index ───────────────────────────────────────────────────────
 
@@ -213,7 +214,7 @@ export function mayDefineComponent(path: string): boolean {
   }
   return (
     path.endsWith(".json") &&
-    path !== "project.json" &&
+    !isProjectConfigPath(path) &&
     !NON_COMPONENT_DIRS.some((dir) => path.startsWith(dir))
   );
 }