@broadpaper/editor 0.2.1 → 0.4.0

package/dist/index.js

@@ -300,6 +300,11 @@ var EditorSession = class {
       if (seq !== this.layoutSeq || this.disposed) return;
       this.layout.set(result);
       this.layoutVersion.set((v) => v + 1);
+      if (m.settled) {
+        void m.settled().then((arrived) => {
+          if (arrived && seq === this.layoutSeq && !this.disposed) this.requestLayout();
+        });
+      }
     } catch (e) {
       console.error("[broadpaper] layout failed", e);
     }
@@ -389,7 +394,7 @@ function loadTemplate(input) {
 }
 
 // src/ReportDesigner.tsx
-import { useEffect as useEffect7, useMemo as useMemo8, useRef as useRef9, useState as useState17 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo9, useRef as useRef10, useState as useState19 } from "react";
 
 // src/state/context.tsx
 import { createContext, useContext, useSyncExternalStore as useSyncExternalStore2, useMemo } from "react";
@@ -892,6 +897,28 @@ function createActions(session) {
       session.reveal(node.id);
       return node.id;
     },
+    /**
+     * Puts a data field on the page.
+     *
+     * Shared with the drop handler on purpose: clicking a field in the data
+     * panel and dragging it onto the page have to produce the same block, and
+     * they did not when each built its own props. The block itself decides what
+     * to build, through its `fromField` hook, so a list becomes a finished
+     * table and a custom block can answer for itself.
+     */
+    insertField(field, at) {
+      const type = field.type === "array" ? "table" : "field";
+      const def = session.registry.get(type);
+      const props = def?.fromField?.({
+        expr: field.expr,
+        formatted: field.bound ?? field.expr,
+        schema: field.schema ?? { type: field.type ?? "string" },
+        label: field.label
+      });
+      const leaf = field.label.split(" \u203A ").pop() ?? field.label;
+      const fallback = type === "table" ? { source: field.expr } : { label: leaf, value: field.bound ?? field.expr };
+      return this.insertBlock(type, at, props ?? fallback);
+    },
     insertRow(layout, at) {
       const row = createRow(layout);
       store.transaction("Add columns", () => store.dispatch({ type: "insertNode", node: row, at: at ?? insertionPoint() }));
@@ -1677,7 +1704,7 @@ function IssueGroup({ title, blurb, emptyTitle, emptyBody, issues, close, sessio
 
 // src/panels/LeftPanel.tsx
 import { useMemo as useMemo2, useState as useState5 } from "react";
-import { ROW_LAYOUTS } from "@broadpaper/core";
+import { ROW_LAYOUTS, withDefaultPipe } from "@broadpaper/core";
 
 // src/dnd/drag-manager.ts
 var handlers = /* @__PURE__ */ new WeakMap();
@@ -1902,7 +1929,7 @@ function buildNodes(fields, prefix, labels) {
     const expr = prefix + "." + key;
     const label = [...labels, name].join(" \u203A ");
     if (f.type === "object" && f.fields) {
-      return { key, label, name, type: f.type, kind: "group", children: buildNodes(f.fields, expr, [...labels, name]) };
+      return { key, label, name, type: f.type, schema: f, kind: "group", children: buildNodes(f.fields, expr, [...labels, name]) };
     }
     if (f.type === "array" && f.itemSchema?.type === "object" && f.itemSchema.fields) {
       const children = Object.entries(f.itemSchema.fields).map(([k2, f2]) => ({
@@ -1910,13 +1937,14 @@ function buildNodes(fields, prefix, labels) {
         label: [...labels, name, f2.label ?? k2].join(" \u203A "),
         name: f2.label ?? k2,
         type: f2.type,
+        schema: f2,
         itemOf: name,
         kind: "field",
         children: []
       }));
-      return { key, label, name, type: f.type, expr, kind: "list", children };
+      return { key, label, name, type: f.type, schema: f, expr, kind: "list", children };
     }
-    return { key, label, name, type: f.type, expr, kind: "field", children: [] };
+    return { key, label, name, type: f.type, schema: f, expr, kind: "field", children: [] };
   });
 }
 function filterNodes(nodes, q) {
@@ -1987,6 +2015,7 @@ function FieldList({ nodes, actions, depth = 0 }) {
     }
     const expr = n.expr;
     const isList = n.kind === "list";
+    const bound = isList ? expr : withDefaultPipe(expr, n.schema);
     return /* @__PURE__ */ jsxs5("div", { children: [
       /* @__PURE__ */ jsxs5(
         "button",
@@ -1994,8 +2023,8 @@ function FieldList({ nodes, actions, depth = 0 }) {
           type: "button",
           className: "bpe-data-field",
           title: n.label + "\n" + expr + "\nClick to insert, or drag onto the page.",
-          onPointerDown: (e) => beginDrag(session, e, { kind: "field", payload: { expr, label: n.label, type: n.type }, label: n.name, icon: FIELD_TYPE_ICONS[n.type] }),
-          onClick: () => isList ? actions.insertBlock("table", void 0, { source: expr }) : actions.insertBlock("field", void 0, { label: n.name, value: expr }),
+          onPointerDown: (e) => beginDrag(session, e, { kind: "field", payload: { expr, bound, label: n.label, type: n.type, schema: n.schema }, label: n.name, icon: FIELD_TYPE_ICONS[n.type] }),
+          onClick: () => actions.insertField({ expr, bound, label: n.label, type: n.type, schema: n.schema }),
           children: [
             /* @__PURE__ */ jsx6(Icon, { name: FIELD_TYPE_ICONS[n.type] ?? "box", className: "bpe-data-field__icon" }),
             /* @__PURE__ */ jsx6("span", { className: "bpe-truncate", children: n.name }),
@@ -2698,7 +2727,7 @@ import { useEffect as useEffect3, useImperativeHandle, useMemo as useMemo4, useR
 
 // src/inspector/DataPicker.tsx
 import { useMemo as useMemo3, useState as useState7 } from "react";
-import { GLOBAL_SCHEMAS, PIPES, checkExpressionSyntax } from "@broadpaper/core";
+import { GLOBAL_SCHEMAS, PIPES, checkExpressionSyntax, humanizeKey } from "@broadpaper/core";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function flattenSchemas(dataSources, extra = {}, opts = {}) {
   const out = [];
@@ -2721,6 +2750,19 @@ function flattenSchemas(dataSources, extra = {}, opts = {}) {
       if (name === "theme") continue;
       visit(name, schema, [schema.label ?? name], 0, "Document");
     }
+    for (const key of Object.keys(opts.themeMeta ?? {})) {
+      const value = (opts.themeMeta ?? {})[key];
+      if (value !== null && typeof value === "object") continue;
+      out.push({
+        expr: `theme.meta.${key}`,
+        label: humanizeKey(key),
+        path: ["Your brand", humanizeKey(key)],
+        type: "string",
+        schema: { type: "string", label: humanizeKey(key) },
+        depth: 1,
+        group: "Your brand"
+      });
+    }
   }
   return out;
 }
@@ -2738,7 +2780,11 @@ function DataPicker({ dataSources, scopeVars, arraysOnly, types, value, onPick,
   const [q, setQ] = useState7("");
   const [expr, setExpr] = useState7(value ?? "");
   const [pending, setPending] = useState7(null);
-  const entries = useMemo3(() => flattenSchemas(dataSources, scopeVars, { arraysOnly, types }), [dataSources, scopeVars, arraysOnly, types]);
+  const themeMeta = useSession().activeTheme.meta;
+  const entries = useMemo3(
+    () => flattenSchemas(dataSources, scopeVars, { arraysOnly, types, ...themeMeta ? { themeMeta } : {} }),
+    [dataSources, scopeVars, arraysOnly, types, themeMeta]
+  );
   const filtered = useMemo3(() => {
     const needle = q.trim().toLowerCase();
     if (!needle) return entries;
@@ -2767,10 +2813,10 @@ function DataPicker({ dataSources, scopeVars, arraysOnly, types, value, onPick,
           /* @__PURE__ */ jsx9(Icon, { name: "wand", className: "bpe-data-field__icon" }),
           " ",
           s.label,
-          /* @__PURE__ */ jsxs8("span", { className: "bpe-data-field__type bpe-mono", style: { textTransform: "none" }, children: [
+          allowExpression ? /* @__PURE__ */ jsxs8("span", { className: "bpe-data-field__type bpe-mono", style: { textTransform: "none" }, children: [
             "| ",
             s.pipe
-          ] })
+          ] }) : null
         ] }, s.pipe)),
         pending.type !== "array" && /* @__PURE__ */ jsxs8("button", { type: "button", className: "bpe-data-field", onClick: () => onPick(`${pending.expr} | default:"\u2014"`, pending.label, pending), children: [
           /* @__PURE__ */ jsx9(Icon, { name: "eraser", className: "bpe-data-field__icon" }),
@@ -2785,7 +2831,7 @@ function DataPicker({ dataSources, scopeVars, arraysOnly, types, value, onPick,
       groups.length === 0 ? /* @__PURE__ */ jsx9("div", { className: "bpe-empty", children: "No matching fields" }) : null,
       groups.map(([group, items]) => /* @__PURE__ */ jsxs8("div", { children: [
         /* @__PURE__ */ jsx9("div", { className: "bpe-picker__group", children: group }),
-        items.map((e) => /* @__PURE__ */ jsxs8("button", { type: "button", role: "option", "aria-selected": value === e.expr, className: "bpe-data-field", style: { paddingLeft: 6 + Math.max(0, e.depth - 1) * 10 }, title: e.expr, onClick: () => arraysOnly || e.type === "array" || e.type === "object" ? onPick(e.expr, e.label, e) : setPending(e), children: [
+        items.map((e) => /* @__PURE__ */ jsxs8("button", { type: "button", role: "option", "aria-selected": value === e.expr, className: "bpe-data-field", style: { paddingLeft: 6 + Math.max(0, e.depth - 1) * 10 }, title: allowExpression ? e.expr : e.label, onClick: () => arraysOnly || e.type === "array" || e.type === "object" ? onPick(e.expr, e.label, e) : setPending(e), children: [
           /* @__PURE__ */ jsx9(Icon, { name: FIELD_TYPE_ICONS[e.type] ?? "box", className: "bpe-data-field__icon" }),
           /* @__PURE__ */ jsx9("span", { className: "bpe-truncate", children: e.path[e.path.length - 1] }),
           /* @__PURE__ */ jsx9("span", { className: "bpe-data-field__type", children: e.type })
@@ -3257,9 +3303,11 @@ function nodeForDrop(drag, ctx) {
       return ctx.cloneLibrary(String(drag.payload));
     case "field": {
       const p = drag.payload;
-      const isList = p.type === "array";
-      if (isList) return ctx.createNode("table", { source: p.expr });
-      return ctx.createNode("field", { label: p.label.split(" \u203A ").pop() ?? p.label, value: p.expr });
+      const type = p.type === "array" ? "table" : "field";
+      const props = ctx.registry.get(type)?.fromField?.({ expr: p.expr, formatted: p.bound ?? p.expr, schema: p.schema ?? { type: p.type ?? "string" }, label: p.label });
+      if (props) return ctx.createNode(type, props);
+      if (type === "table") return ctx.createNode("table", { source: p.expr });
+      return ctx.createNode("field", { label: p.label.split(" \u203A ").pop() ?? p.label, value: p.bound ?? p.expr });
     }
     default:
       return void 0;
@@ -3629,18 +3677,19 @@ function Canvas({ actions }) {
       drop: (target, d) => {
         if (target.textTargetId && d.kind === "field") {
           const p = d.payload;
+          const expr = p.bound ?? p.expr;
           const node2 = session.store.getNode(target.textTargetId);
           if (!node2) return;
           if (node2.type === "heading") {
             const text = String(node2.props.text ?? "");
-            session.store.dispatch({ type: "setProp", id: node2.id, path: "text", value: `${text}${text && !text.endsWith(" ") ? " " : ""}{{ ${p.expr} }}` }, { label: "Insert field" });
+            session.store.dispatch({ type: "setProp", id: node2.id, path: "text", value: `${text}${text && !text.endsWith(" ") ? " " : ""}{{ ${expr} }}` }, { label: "Insert field" });
           } else {
             const doc = isRichTextDoc2(node2.props.content) ? structuredClone(node2.props.content) : richTextFromTemplate2("");
             const last = doc.content[doc.content.length - 1];
             if (last && last.type === "paragraph") {
               if (last.content.length) last.content.push({ type: "text", text: " " });
-              last.content.push({ type: "token", expr: p.expr });
-            } else doc.content.push({ type: "paragraph", content: [{ type: "token", expr: p.expr }] });
+              last.content.push({ type: "token", expr });
+            } else doc.content.push({ type: "paragraph", content: [{ type: "token", expr }] });
             session.store.dispatch({ type: "setProp", id: node2.id, path: "content", value: doc }, { label: "Insert field" });
           }
           session.store.select([node2.id]);
@@ -3735,75 +3784,385 @@ function Canvas({ actions }) {
 }
 
 // src/inspector/NodeInspector.tsx
-import { useMemo as useMemo7 } from "react";
-import { ROW_LAYOUTS as ROW_LAYOUTS2, itemSchemaOf, createSchemaScope as createSchemaScope5, ancestors as ancestors2 } from "@broadpaper/core";
+import { useMemo as useMemo8 } from "react";
+import { ROW_LAYOUTS as ROW_LAYOUTS2, itemSchemaOf, createSchemaScope as createSchemaScope7, ancestors as ancestors2 } from "@broadpaper/core";
 
 // src/inspector/fields/FieldRenderer.tsx
-import { useEffect as useEffect6, useRef as useRef7, useState as useState15 } from "react";
-import { checkExpressionSyntax as checkExpressionSyntax3, createSchemaScope as createSchemaScope4, textStyleLabel, richTextToPlain as richTextToPlain2, richTextFromTemplate as richTextFromTemplate3, isRichTextDoc as isRichTextDoc3 } from "@broadpaper/core";
+import { useEffect as useEffect7, useRef as useRef8, useState as useState17 } from "react";
+import { checkExpressionSyntax as checkExpressionSyntax3, createSchemaScope as createSchemaScope6, textStyleLabel, richTextToPlain as richTextToPlain2, richTextFromTemplate as richTextFromTemplate3, isRichTextDoc as isRichTextDoc3 } from "@broadpaper/core";
 
 // src/inspector/fields/BindingField.tsx
-import { useMemo as useMemo6 } from "react";
-import { createSchemaScope as createSchemaScope3, typeCheck, parseExpression as parseExpression2, labelForPath as labelForPath2 } from "@broadpaper/core";
+import { useMemo as useMemo7, useState as useState13 } from "react";
+import {
+  createSchemaScope as createSchemaScope4,
+  describeExpression,
+  fromExpression as fromExpression2,
+  humaniseLabel as humaniseLabel2,
+  parseExpression as parseExpression2,
+  typeCheck
+} from "@broadpaper/core";
+
+// src/inspector/fields/CalculationBuilder.tsx
+import { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef6, useState as useState12 } from "react";
+import {
+  createSchemaScope as createSchemaScope3,
+  fromExpression,
+  labelForPath as labelForPath2,
+  toExpression
+} from "@broadpaper/core";
 import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+var NUMERIC = ["number", "currency", "percent"];
+var OPS = [
+  { value: "add", label: "add" },
+  { value: "subtract", label: "subtract" },
+  { value: "multiply", label: "multiply by" },
+  { value: "divide", label: "divide by" },
+  { value: "addPercent", label: "add, as a percentage" },
+  { value: "subtractPercent", label: "subtract, as a percentage" }
+];
+var AGGREGATES = [
+  { value: "sum", label: "Total of", of: "added up across every row" },
+  { value: "avg", label: "Average of", of: "the mean across every row" },
+  { value: "count", label: "How many", of: "how many rows there are" },
+  { value: "max", label: "Highest", of: "the largest in any row" },
+  { value: "min", label: "Lowest", of: "the smallest in any row" }
+];
+var EMPTY = { start: { kind: "field", path: "" }, steps: [] };
+function complete(calc) {
+  const ok = (term) => term.kind === "number" || term.path.trim() !== "";
+  return ok(calc.start) && calc.steps.every((s) => ok(s.term));
+}
+function CalculationBuilder({ value, onChange, dataSources, scopeVars, formats = [] }) {
+  const entries = useMemo6(() => flattenSchemas(dataSources, scopeVars), [dataSources, scopeVars]);
+  const scope = useMemo6(() => createSchemaScope3(dataSources).child(scopeVars ?? {}), [dataSources, scopeVars]);
+  const [calc, setCalc] = useState12(() => fromExpression(value) ?? EMPTY);
+  const mine = useRef6(null);
+  useEffect6(() => {
+    if (value !== mine.current) setCalc(fromExpression(value) ?? EMPTY);
+  }, [value]);
+  const commit = (next) => {
+    setCalc(next);
+    if (!complete(next)) return;
+    const expr = toExpression(next);
+    mine.current = expr;
+    onChange(expr);
+  };
+  const naming = (term) => termLabel(term, entries, scope);
+  return /* @__PURE__ */ jsxs15("div", { className: "bpe-calc", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "bpe-calc__step", children: [
+      /* @__PURE__ */ jsx16("span", { className: "bpe-calc__lead", children: "Start with" }),
+      /* @__PURE__ */ jsx16(TermField, { term: calc.start, entries, scope, onChange: (start) => commit({ ...calc, start }) })
+    ] }),
+    calc.steps.map((step, i) => /* @__PURE__ */ jsxs15("div", { className: "bpe-calc__step", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "bpe-calc__row", children: [
+        /* @__PURE__ */ jsx16("span", { className: "bpe-calc__lead", children: "then" }),
+        /* @__PURE__ */ jsx16("div", { className: "bpe-grow" }),
+        /* @__PURE__ */ jsx16(
+          Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            icon: "x",
+            tooltip: "Remove this step",
+            onClick: () => commit({ ...calc, steps: calc.steps.filter((_, j) => j !== i) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx16(
+        Select,
+        {
+          value: step.op,
+          onChange: (op) => commit({ ...calc, steps: calc.steps.map((s, j) => i === j ? { ...s, op } : s) }),
+          options: OPS
+        }
+      ),
+      /* @__PURE__ */ jsx16(
+        TermField,
+        {
+          term: step.term,
+          entries,
+          scope,
+          onChange: (term) => commit({ ...calc, steps: calc.steps.map((s, j) => i === j ? { ...s, term } : s) })
+        }
+      )
+    ] }, i)),
+    /* @__PURE__ */ jsx16("div", { className: "bpe-calc__row", children: /* @__PURE__ */ jsx16(
+      Button,
+      {
+        size: "sm",
+        icon: "plus",
+        onClick: () => commit({ ...calc, steps: [...calc.steps, { op: "add", term: { kind: "field", path: "" } }] }),
+        children: "Add a step"
+      }
+    ) }),
+    formats.length ? /* @__PURE__ */ jsxs15("div", { className: "bpe-calc__row", children: [
+      /* @__PURE__ */ jsx16("span", { className: "bpe-calc__lead", children: "Shown as" }),
+      /* @__PURE__ */ jsx16(
+        Select,
+        {
+          value: calc.format ?? "",
+          onChange: (pipe) => commit({ ...calc, ...pipe ? { format: pipe } : { format: void 0 } }),
+          options: [{ value: "", label: "As it comes" }, ...formats.map((f) => ({ value: f.pipe, label: f.label }))]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs15("p", { className: "bpe-calc__reads", children: [
+      naming(calc.start),
+      calc.steps.map((step, i) => /* @__PURE__ */ jsxs15("span", { children: [
+        ", ",
+        OPS.find((o) => o.value === step.op)?.label,
+        " ",
+        naming(step.term)
+      ] }, i))
+    ] })
+  ] });
+}
+function TermField({
+  term,
+  entries,
+  scope,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs15("div", { className: "bpe-calc__term", children: [
+    /* @__PURE__ */ jsx16(
+      Select,
+      {
+        value: term.kind,
+        onChange: (kind) => onChange(blankTerm(kind, term)),
+        options: [
+          { value: "field", label: "a field" },
+          { value: "aggregate", label: "a total" },
+          { value: "number", label: "a number" }
+        ]
+      }
+    ),
+    term.kind === "number" ? /* @__PURE__ */ jsx16(NumberInput, { value: term.value, onChange: (v) => onChange({ kind: "number", value: v ?? 0 }), placeholder: "0" }) : null,
+    term.kind === "aggregate" ? /* @__PURE__ */ jsx16(
+      Select,
+      {
+        value: term.fn,
+        onChange: (fn) => onChange({ ...term, fn }),
+        options: AGGREGATES.map((a) => ({ value: a.value, label: a.label }))
+      }
+    ) : null,
+    term.kind !== "number" ? /* @__PURE__ */ jsx16(
+      Popover,
+      {
+        className: "bpe-picker",
+        trigger: /* @__PURE__ */ jsxs15("button", { type: "button", className: `bpe-binding__btn ${term.path ? "" : "bpe-binding__btn--empty"}`, children: [
+          /* @__PURE__ */ jsx16(Icon, { name: term.kind === "aggregate" ? "sigma" : "braces" }),
+          /* @__PURE__ */ jsx16("span", { className: "bpe-truncate", children: term.path ? pathLabel(term.path, scope) : term.kind === "aggregate" ? "Choose a column" : "Choose a field" })
+        ] }),
+        children: (close) => /* @__PURE__ */ jsx16(
+          TermPicker,
+          {
+            entries,
+            wants: term.kind,
+            numericOnly: term.kind === "aggregate" ? term.fn !== "count" : true,
+            onPick: (path) => {
+              onChange({ ...term, path });
+              close();
+            }
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function blankTerm(kind, from) {
+  const path = from.kind === "number" ? "" : from.path;
+  if (kind === "number") return { kind: "number", value: 0 };
+  if (kind === "aggregate") return { kind: "aggregate", fn: "sum", path };
+  return { kind: "field", path };
+}
+function termOptions(entries, wants, numericOnly) {
+  return entries.filter((e) => {
+    if (wants === "aggregate") {
+      if (e.type !== "array") return false;
+      const item = e.schema.itemSchema;
+      return numericOnly ? Boolean(item && NUMERIC.includes(item.type)) : true;
+    }
+    return numericOnly ? NUMERIC.includes(e.type) : e.type !== "array" && e.type !== "object";
+  });
+}
+function TermPicker({
+  entries,
+  wants,
+  numericOnly,
+  onPick
+}) {
+  const shown = termOptions(entries, wants, numericOnly);
+  const groups = /* @__PURE__ */ new Map();
+  for (const e of shown) groups.set(e.group, [...groups.get(e.group) ?? [], e]);
+  return /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsxs15("div", { className: "bpe-picker__list", role: "listbox", children: [
+    !shown.length ? /* @__PURE__ */ jsx16("div", { className: "bpe-empty", children: wants === "aggregate" ? "No lists of numbers in your data to total up." : "No numbers in your data to use here." }) : null,
+    [...groups].map(([group, items]) => /* @__PURE__ */ jsxs15("div", { children: [
+      /* @__PURE__ */ jsx16("div", { className: "bpe-picker__group", children: group }),
+      items.map((e) => /* @__PURE__ */ jsxs15("button", { type: "button", role: "option", className: "bpe-data-field", onClick: () => onPick(e.expr), children: [
+        /* @__PURE__ */ jsx16(Icon, { name: wants === "aggregate" ? "list-tree" : "hash", className: "bpe-data-field__icon" }),
+        /* @__PURE__ */ jsx16("span", { className: "bpe-truncate", children: e.label })
+      ] }, e.expr))
+    ] }, group))
+  ] }) });
+}
+function pathLabel(path, scope) {
+  return labelForPath2(
+    path.split(".").map((name) => ({ kind: "prop", name })),
+    scope
+  );
+}
+function termLabel(term, entries, scope) {
+  if (term.kind === "number") return String(term.value);
+  if (!term.path) return "\u2026";
+  const named = entries.find((e) => e.expr === term.path)?.label ?? pathLabel(term.path, scope);
+  if (term.kind === "field") return named;
+  return `${AGGREGATES.find((a) => a.value === term.fn)?.label ?? "Total of"} ${named}`;
+}
+function canCalculate(types) {
+  return !types || types.some((t) => NUMERIC.includes(t));
+}
+
+// src/inspector/fields/BindingField.tsx
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 function useExpressionLabel(dataSources, scopeVars) {
-  return useMemo6(() => {
-    const scope = createSchemaScope3(dataSources).child(scopeVars ?? {});
+  return useMemo7(() => {
+    const scope = createSchemaScope4(dataSources).child(scopeVars ?? {});
     return (expr) => {
-      if (!expr.trim()) return { label: "", error: null };
-      const r = typeCheck(expr, scope);
-      const error = r.issues[0]?.message ?? null;
+      if (!expr.trim()) return { label: "", error: null, computed: false };
+      const error = typeCheck(expr, scope).issues[0]?.message ?? null;
+      let computed = true;
       try {
         const ast = parseExpression2(expr);
-        if (ast.kind === "path") return { label: labelForPath2(ast.segments, scope), error };
-        if (ast.kind === "pipe" && ast.input.kind === "path") return { label: `${labelForPath2(ast.input.segments, scope)} \xB7 ${ast.name}`, error };
+        computed = !(ast.kind === "path" || ast.kind === "pipe" && ast.input.kind === "path");
       } catch {
+        computed = false;
       }
-      return { label: expr, error };
+      return { label: describeExpression(expr, scope).label, error, computed };
     };
   }, [dataSources, scopeVars]);
 }
-function BindingField({ value, onChange, dataSources, scopeVars, arraysOnly, types, placeholder, allowExpression = true }) {
+function useTokenText(dataSources, scopeVars) {
+  return useMemo7(() => {
+    const scope = createSchemaScope4(dataSources).child(scopeVars ?? {});
+    return (text) => humaniseLabel2(text, scope);
+  }, [dataSources, scopeVars]);
+}
+function BindingField({ value, onChange, dataSources, scopeVars, arraysOnly, types, placeholder, allowExpression = true, allowCalculation = true }) {
   const describe = useExpressionLabel(dataSources, scopeVars);
-  const { label, error } = describe(value);
-  return /* @__PURE__ */ jsxs15("div", { className: "bpe-binding", children: [
-    /* @__PURE__ */ jsx16(
+  const { label, error, computed } = describe(value);
+  const editable = allowCalculation && !arraysOnly && canCalculate(types) && (value.trim() === "" || fromExpression2(value) !== null);
+  if (value && computed && !allowExpression && !editable) {
+    return /* @__PURE__ */ jsx17("div", { className: "bpe-binding", children: /* @__PURE__ */ jsxs16("span", { className: "bpe-binding__btn bpe-binding__btn--locked", title: `Worked out for you, from ${label.replace(/^ƒ\s*/, "")}. Change those and this changes with them.`, children: [
+      /* @__PURE__ */ jsx17(Icon, { name: "sigma" }),
+      /* @__PURE__ */ jsx17("span", { className: "bpe-truncate", children: label.replace(/^ƒ\s*/, "") || "Worked out for you" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs16("div", { className: "bpe-binding", children: [
+    /* @__PURE__ */ jsx17(
       Popover,
       {
-        className: "bpe-picker",
-        trigger: /* @__PURE__ */ jsxs15("button", { type: "button", className: `bpe-binding__btn ${value ? "" : "bpe-binding__btn--empty"} ${error ? "bpe-input--invalid" : ""}`, title: error ?? value, children: [
-          /* @__PURE__ */ jsx16(Icon, { name: error ? "alert-triangle" : arraysOnly ? "list-tree" : "braces", style: error ? { color: "var(--bpe-danger)" } : void 0 }),
-          /* @__PURE__ */ jsx16("span", { className: "bpe-truncate", children: value ? label : placeholder ?? (arraysOnly ? "Choose a list" : "Choose a field") })
-        ] }),
-        children: (close) => /* @__PURE__ */ jsx16(
-          DataPicker,
+        className: `bpe-picker${editable ? " bpe-picker--wide" : ""}`,
+        trigger: /* @__PURE__ */ jsxs16(
+          "button",
+          {
+            type: "button",
+            className: `bpe-binding__btn ${value ? "" : "bpe-binding__btn--empty"} ${error ? "bpe-input--invalid" : ""}`,
+            title: error ?? (allowExpression ? value : label),
+            children: [
+              /* @__PURE__ */ jsx17(Icon, { name: error ? "alert-triangle" : computed ? "sigma" : arraysOnly ? "list-tree" : "braces", style: error ? { color: "var(--bpe-danger)" } : void 0 }),
+              /* @__PURE__ */ jsx17("span", { className: "bpe-truncate", children: value ? label.replace(/^ƒ\s*/, "") : placeholder ?? (arraysOnly ? "Choose a list" : "Choose a field") })
+            ]
+          }
+        ),
+        children: (close) => /* @__PURE__ */ jsx17(
+          ValuePanel,
           {
+            value,
+            onChange,
             dataSources,
             scopeVars,
             arraysOnly,
             types,
-            value,
             allowExpression,
-            onPick: (expr) => {
-              onChange(expr);
-              close();
-            },
-            onClear: () => {
-              onChange("");
-              close();
-            }
+            offerCalculation: editable,
+            startOnCalculation: computed && editable,
+            close
           }
         )
       }
     ),
-    value ? /* @__PURE__ */ jsx16(Button, { size: "sm", variant: "ghost", icon: "x", tooltip: "Clear", onClick: () => onChange("") }) : null
+    value ? /* @__PURE__ */ jsx17(Button, { size: "sm", variant: "ghost", icon: "x", tooltip: "Clear", onClick: () => onChange("") }) : null
+  ] });
+}
+function ValuePanel({
+  value,
+  onChange,
+  dataSources,
+  scopeVars,
+  arraysOnly,
+  types,
+  allowExpression,
+  offerCalculation,
+  startOnCalculation,
+  close
+}) {
+  const [tab, setTab] = useState13(startOnCalculation ? "calc" : "field");
+  const formats = useMemo7(() => {
+    const wanted = types?.length ? types : ["currency", "number", "percent"];
+    const seen = /* @__PURE__ */ new Set();
+    return wanted.flatMap((t) => FORMAT_SUGGESTIONS[t] ?? []).filter((f) => !seen.has(f.pipe) && seen.add(f.pipe));
+  }, [types]);
+  if (!offerCalculation) {
+    return /* @__PURE__ */ jsx17(
+      DataPicker,
+      {
+        dataSources,
+        scopeVars,
+        arraysOnly,
+        types,
+        value,
+        allowExpression,
+        onPick: (expr) => {
+          onChange(expr);
+          close();
+        },
+        onClear: () => {
+          onChange("");
+          close();
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs16("div", { children: [
+    /* @__PURE__ */ jsxs16("div", { className: "bpe-picker__tabs", role: "tablist", children: [
+      /* @__PURE__ */ jsx17("button", { type: "button", role: "tab", "aria-selected": tab === "field", className: "bpe-tab", onClick: () => setTab("field"), children: "A field" }),
+      /* @__PURE__ */ jsx17("button", { type: "button", role: "tab", "aria-selected": tab === "calc", className: "bpe-tab", onClick: () => setTab("calc"), children: "Worked out" })
+    ] }),
+    tab === "field" ? /* @__PURE__ */ jsx17(
+      DataPicker,
+      {
+        dataSources,
+        scopeVars,
+        types,
+        value,
+        allowExpression,
+        onPick: (expr) => {
+          onChange(expr);
+          close();
+        },
+        onClear: () => {
+          onChange("");
+          close();
+        }
+      }
+    ) : /* @__PURE__ */ jsx17(CalculationBuilder, { value, onChange, dataSources, scopeVars, formats })
   ] });
 }
 
 // src/inspector/fields/ImageField.tsx
-import { useRef as useRef6, useState as useState12 } from "react";
+import { useRef as useRef7, useState as useState14 } from "react";
 import { isSafeUrl } from "@broadpaper/core";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var MAX_INLINE_IMAGE_BYTES = 1e6;
 var ACCEPT = "image/png,image/jpeg,image/gif,image/webp,image/svg+xml";
 var BINDABLE = ["image", "url", "string"];
@@ -3827,8 +4186,8 @@ function ImageField({
   onError
 }) {
   const options = useOptions();
-  const fileRef = useRef6(null);
-  const [busy, setBusy] = useState12(false);
+  const fileRef = useRef7(null);
+  const [busy, setBusy] = useState14(false);
   const bound = /^\{\{[\s\S]*\}\}$/.test(value.trim());
   async function accept(file) {
     onError(null);
@@ -3859,8 +4218,8 @@ function ImageField({
       if (fileRef.current) fileRef.current.value = "";
     }
   }
-  return /* @__PURE__ */ jsxs16("div", { className: "bpe-binding bpe-image", children: [
-    bound ? /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs17("div", { className: "bpe-binding bpe-image", children: [
+    bound ? /* @__PURE__ */ jsx18(
       BindingField,
       {
         value: value.replace(/^\{\{\s*|\s*\}\}$/g, ""),
@@ -3869,8 +4228,8 @@ function ImageField({
         scopeVars,
         types: BINDABLE
       }
-    ) : /* @__PURE__ */ jsx17(TextInput, { value, onChange, lazy: true, placeholder: "https://\u2026 or upload" }),
-    /* @__PURE__ */ jsx17(
+    ) : /* @__PURE__ */ jsx18(TextInput, { value, onChange, lazy: true, placeholder: "https://\u2026 or upload" }),
+    /* @__PURE__ */ jsx18(
       "input",
       {
         ref: fileRef,
@@ -3885,7 +4244,7 @@ function ImageField({
         }
       }
     ),
-    !bound ? /* @__PURE__ */ jsx17(
+    !bound ? /* @__PURE__ */ jsx18(
       Button,
       {
         size: "sm",
@@ -3896,7 +4255,7 @@ function ImageField({
         onClick: () => fileRef.current?.click()
       }
     ) : null,
-    allowBinding ? /* @__PURE__ */ jsx17(Popover, { className: "bpe-picker", trigger: /* @__PURE__ */ jsx17(Button, { size: "sm", variant: "ghost", icon: "braces", tooltip: "Bind to a field" }), children: (close) => /* @__PURE__ */ jsx17(
+    allowBinding ? /* @__PURE__ */ jsx18(Popover, { className: "bpe-picker", trigger: /* @__PURE__ */ jsx18(Button, { size: "sm", variant: "ghost", icon: "braces", tooltip: "Bind to a field" }), children: (close) => /* @__PURE__ */ jsx18(
       DataPicker,
       {
         dataSources,
@@ -3912,64 +4271,64 @@ function ImageField({
 }
 
 // src/inspector/fields/ConditionBuilder.tsx
-import { CONDITION_OPERATORS, compileCondition, checkExpressionSyntax as checkExpressionSyntax2 } from "@broadpaper/core";
-import { useState as useState13 } from "react";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { CONDITION_OPERATORS, compileCondition, checkExpressionSyntax as checkExpressionSyntax2, createSchemaScope as createSchemaScope5, humaniseLabel as humaniseLabel3 } from "@broadpaper/core";
+import { useState as useState15 } from "react";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function isGroup(v) {
   return !!v && typeof v === "object" && "op" in v;
 }
 function ConditionBuilder({ value, onChange, dataSources, scopeVars, allowExpression = true }) {
-  const [advanced, setAdvanced] = useState13(typeof value === "string" && value.trim() !== "");
+  const [advanced, setAdvanced] = useState15(typeof value === "string" && value.trim() !== "");
   const group = isGroup(value) ? value : { op: "and", rules: [] };
   const compiled = compileCondition(value);
   if (advanced) {
     const src = typeof value === "string" ? value : compiled ?? "";
     const err = src.trim() ? checkExpressionSyntax2(src) : null;
-    return /* @__PURE__ */ jsxs17("div", { className: "bpe-cond", children: [
-      /* @__PURE__ */ jsx18(TextInput, { value: src, onChange: (v) => onChange(v.trim() ? v : void 0), mono: true, lazy: true, placeholder: "e.g. client.riskScore > 7 and client.isRetired", invalid: !!err }),
-      err ? /* @__PURE__ */ jsx18("div", { className: "bpe-field__error", children: err.message }) : null,
-      /* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: 6 }, children: [
-        /* @__PURE__ */ jsx18(Button, { size: "sm", onClick: () => {
+    return /* @__PURE__ */ jsxs18("div", { className: "bpe-cond", children: [
+      /* @__PURE__ */ jsx19(TextInput, { value: src, onChange: (v) => onChange(v.trim() ? v : void 0), mono: true, lazy: true, placeholder: "e.g. client.riskScore > 7 and client.isRetired", invalid: !!err }),
+      err ? /* @__PURE__ */ jsx19("div", { className: "bpe-field__error", children: err.message }) : null,
+      /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: 6 }, children: [
+        /* @__PURE__ */ jsx19(Button, { size: "sm", onClick: () => {
           setAdvanced(false);
           onChange({ op: "and", rules: [] });
         }, children: "Use rule builder" }),
-        value ? /* @__PURE__ */ jsx18(Button, { size: "sm", variant: "ghost", icon: "x", onClick: () => onChange(void 0), children: "Clear" }) : null
+        value ? /* @__PURE__ */ jsx19(Button, { size: "sm", variant: "ghost", icon: "x", onClick: () => onChange(void 0), children: "Clear" }) : null
       ] })
     ] });
   }
   const update = (g) => onChange(g.rules.length ? g : void 0);
-  return /* @__PURE__ */ jsxs17("div", { className: "bpe-cond", children: [
-    /* @__PURE__ */ jsx18(GroupEditor, { group, onChange: update, dataSources, scopeVars, depth: 0 }),
-    /* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsx18(Button, { size: "sm", icon: "plus", onClick: () => update({ ...group, rules: [...group.rules, { left: "", operator: "eq", right: "" }] }), children: "Rule" }),
-      /* @__PURE__ */ jsx18(Button, { size: "sm", icon: "plus", onClick: () => update({ ...group, rules: [...group.rules, { op: "or", rules: [{ left: "", operator: "eq", right: "" }] }] }), children: "Group" }),
-      allowExpression ? /* @__PURE__ */ jsx18(Button, { size: "sm", variant: "ghost", icon: "braces", onClick: () => setAdvanced(true), children: "Expression" }) : null
+  return /* @__PURE__ */ jsxs18("div", { className: "bpe-cond", children: [
+    /* @__PURE__ */ jsx19(GroupEditor, { group, onChange: update, dataSources, scopeVars, depth: 0 }),
+    /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx19(Button, { size: "sm", icon: "plus", onClick: () => update({ ...group, rules: [...group.rules, { left: "", operator: "eq", right: "" }] }), children: "Rule" }),
+      /* @__PURE__ */ jsx19(Button, { size: "sm", icon: "plus", onClick: () => update({ ...group, rules: [...group.rules, { op: "or", rules: [{ left: "", operator: "eq", right: "" }] }] }), children: "Group" }),
+      allowExpression ? /* @__PURE__ */ jsx19(Button, { size: "sm", variant: "ghost", icon: "braces", onClick: () => setAdvanced(true), children: "Expression" }) : null
     ] }),
-    compiled ? /* @__PURE__ */ jsx18("div", { className: "bpe-field__hint bpe-mono", title: compiled, children: compiled }) : /* @__PURE__ */ jsx18("div", { className: "bpe-field__hint", children: "Always shown" })
+    compiled ? allowExpression ? /* @__PURE__ */ jsx19("div", { className: "bpe-field__hint bpe-mono", title: compiled, children: compiled }) : /* @__PURE__ */ jsx19("div", { className: "bpe-field__hint", children: humaniseLabel3(compiled, createSchemaScope5(dataSources).child(scopeVars ?? {})) }) : /* @__PURE__ */ jsx19("div", { className: "bpe-field__hint", children: "Always shown" })
   ] });
 }
 function GroupEditor({ group, onChange, dataSources, scopeVars, depth }) {
   const setRule = (i, r) => onChange({ ...group, rules: group.rules.map((x, j) => j === i ? r : x) });
   const remove = (i) => onChange({ ...group, rules: group.rules.filter((_, j) => j !== i) });
-  return /* @__PURE__ */ jsxs17("div", { className: depth > 0 ? "bpe-cond__group" : void 0, children: [
-    group.rules.length > 1 ? /* @__PURE__ */ jsxs17("div", { className: "bpe-cond__op", style: { marginBottom: 6 }, children: [
-      /* @__PURE__ */ jsx18("span", { className: "bpe-muted", style: { fontSize: "var(--bpe-text-xs)" }, children: "Match" }),
-      /* @__PURE__ */ jsx18(Segmented, { value: group.op, onChange: (op) => onChange({ ...group, op }), options: [{ value: "and", label: "All (AND)" }, { value: "or", label: "Any (OR)" }], className: "bpe-mode" })
+  return /* @__PURE__ */ jsxs18("div", { className: depth > 0 ? "bpe-cond__group" : void 0, children: [
+    group.rules.length > 1 ? /* @__PURE__ */ jsxs18("div", { className: "bpe-cond__op", style: { marginBottom: 6 }, children: [
+      /* @__PURE__ */ jsx19("span", { className: "bpe-muted", style: { fontSize: "var(--bpe-text-xs)" }, children: "Match" }),
+      /* @__PURE__ */ jsx19(Segmented, { value: group.op, onChange: (op) => onChange({ ...group, op }), options: [{ value: "and", label: "All (AND)" }, { value: "or", label: "Any (OR)" }], className: "bpe-mode" })
     ] }) : null,
-    group.rules.map((r, i) => /* @__PURE__ */ jsxs17("div", { className: "bpe-cond__rule", style: { marginBottom: 6 }, children: [
-      "op" in r ? /* @__PURE__ */ jsx18(GroupEditor, { group: r, onChange: (g) => setRule(i, g), dataSources, scopeVars, depth: depth + 1 }) : /* @__PURE__ */ jsx18(RuleEditor, { rule: r, onChange: (x) => setRule(i, x), dataSources, scopeVars }),
-      /* @__PURE__ */ jsx18(Button, { size: "sm", variant: "ghost", icon: "x", tooltip: "Remove", onClick: () => remove(i) })
+    group.rules.map((r, i) => /* @__PURE__ */ jsxs18("div", { className: "bpe-cond__rule", style: { marginBottom: 6 }, children: [
+      "op" in r ? /* @__PURE__ */ jsx19(GroupEditor, { group: r, onChange: (g) => setRule(i, g), dataSources, scopeVars, depth: depth + 1 }) : /* @__PURE__ */ jsx19(RuleEditor, { rule: r, onChange: (x) => setRule(i, x), dataSources, scopeVars }),
+      /* @__PURE__ */ jsx19(Button, { size: "sm", variant: "ghost", icon: "x", tooltip: "Remove", onClick: () => remove(i) })
     ] }, i)),
-    depth > 0 ? /* @__PURE__ */ jsx18(Button, { size: "sm", icon: "plus", onClick: () => onChange({ ...group, rules: [...group.rules, { left: "", operator: "eq", right: "" }] }), children: "Rule" }) : null
+    depth > 0 ? /* @__PURE__ */ jsx19(Button, { size: "sm", icon: "plus", onClick: () => onChange({ ...group, rules: [...group.rules, { left: "", operator: "eq", right: "" }] }), children: "Rule" }) : null
   ] });
 }
 function RuleEditor({ rule, onChange, dataSources, scopeVars }) {
   const op = CONDITION_OPERATORS.find((o) => o.value === rule.operator) ?? CONDITION_OPERATORS[0];
   const rightStr = rule.right === void 0 || rule.right === null ? "" : String(rule.right);
-  return /* @__PURE__ */ jsxs17("div", { className: "bpe-cond__row", children: [
-    /* @__PURE__ */ jsx18(BindingField, { value: rule.left, onChange: (left) => onChange({ ...rule, left }), dataSources, scopeVars, placeholder: "Choose a field" }),
-    /* @__PURE__ */ jsx18(Select, { value: rule.operator, onChange: (v) => onChange({ ...rule, operator: v }), options: CONDITION_OPERATORS.map((o) => ({ value: o.value, label: o.label })) }),
-    op.needsValue ? /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs18("div", { className: "bpe-cond__row", children: [
+    /* @__PURE__ */ jsx19(BindingField, { value: rule.left, onChange: (left) => onChange({ ...rule, left }), dataSources, scopeVars, placeholder: "Choose a field" }),
+    /* @__PURE__ */ jsx19(Select, { value: rule.operator, onChange: (v) => onChange({ ...rule, operator: v }), options: CONDITION_OPERATORS.map((o) => ({ value: o.value, label: o.label })) }),
+    op.needsValue ? /* @__PURE__ */ jsx19(
       TextInput,
       {
         value: rightStr,
@@ -3989,11 +4348,11 @@ function RuleEditor({ rule, onChange, dataSources, scopeVars }) {
 }
 
 // src/inspector/fields/ListEditors.tsx
-import { useState as useState14 } from "react";
+import { useState as useState16 } from "react";
 import { createId as createId2 } from "@broadpaper/core";
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 function ListEditor({ items, onChange, renderItem, label, itemLabel = "Item", create, summary }) {
-  const [open, setOpen] = useState14(null);
+  const [open, setOpen] = useState16(null);
   const update = (i, patch) => onChange(items.map((it, j) => j === i ? { ...it, ...patch } : it));
   const noun = itemLabel.toLowerCase();
   const name = (item, i) => summary?.(item, i) || `${itemLabel} ${i + 1}`;
@@ -4005,18 +4364,18 @@ function ListEditor({ items, onChange, renderItem, label, itemLabel = "Item", cr
     onChange(next);
     setOpen(j);
   };
-  return /* @__PURE__ */ jsxs18("div", { className: "bpe-list-editor", children: [
-    items.map((it, i) => /* @__PURE__ */ jsxs18("div", { className: "bpe-list-editor__item", children: [
-      /* @__PURE__ */ jsxs18("div", { className: "bpe-list-editor__head", children: [
-        /* @__PURE__ */ jsx19("button", { type: "button", className: "bpe-layer__toggle", "aria-expanded": open === i, "aria-label": `${open === i ? "Collapse" : "Expand"} ${name(it, i)}`, onClick: () => setOpen(open === i ? null : i), children: /* @__PURE__ */ jsx19(Icon, { name: "chevron-down" }) }),
-        /* @__PURE__ */ jsx19("span", { className: "bpe-truncate", title: summary?.(it, i), children: name(it, i) }),
-        /* @__PURE__ */ jsx19(Button, { size: "sm", variant: "ghost", icon: "arrow-up", tooltip: `Move ${noun} up`, disabled: i === 0, onClick: () => move(i, -1) }),
-        /* @__PURE__ */ jsx19(Button, { size: "sm", variant: "ghost", icon: "arrow-down", tooltip: `Move ${noun} down`, disabled: i === items.length - 1, onClick: () => move(i, 1) }),
-        /* @__PURE__ */ jsx19(Button, { size: "sm", variant: "ghost", icon: "trash", tooltip: `Remove ${noun}`, onClick: () => onChange(items.filter((_, j) => j !== i)) })
+  return /* @__PURE__ */ jsxs19("div", { className: "bpe-list-editor", children: [
+    items.map((it, i) => /* @__PURE__ */ jsxs19("div", { className: "bpe-list-editor__item", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "bpe-list-editor__head", children: [
+        /* @__PURE__ */ jsx20("button", { type: "button", className: "bpe-layer__toggle", "aria-expanded": open === i, "aria-label": `${open === i ? "Collapse" : "Expand"} ${name(it, i)}`, onClick: () => setOpen(open === i ? null : i), children: /* @__PURE__ */ jsx20(Icon, { name: "chevron-down" }) }),
+        /* @__PURE__ */ jsx20("span", { className: "bpe-truncate", title: summary?.(it, i), children: name(it, i) }),
+        /* @__PURE__ */ jsx20(Button, { size: "sm", variant: "ghost", icon: "arrow-up", tooltip: `Move ${noun} up`, disabled: i === 0, onClick: () => move(i, -1) }),
+        /* @__PURE__ */ jsx20(Button, { size: "sm", variant: "ghost", icon: "arrow-down", tooltip: `Move ${noun} down`, disabled: i === items.length - 1, onClick: () => move(i, 1) }),
+        /* @__PURE__ */ jsx20(Button, { size: "sm", variant: "ghost", icon: "trash", tooltip: `Remove ${noun}`, onClick: () => onChange(items.filter((_, j) => j !== i)) })
       ] }),
-      open === i ? /* @__PURE__ */ jsx19("div", { className: "bpe-list-editor__body", children: renderItem(it, (patch) => update(i, patch), i) }) : null
+      open === i ? /* @__PURE__ */ jsx20("div", { className: "bpe-list-editor__body", children: renderItem(it, (patch) => update(i, patch), i) }) : null
     ] }, it.id ?? i)),
-    /* @__PURE__ */ jsxs18(Button, { size: "sm", icon: "plus", onClick: () => {
+    /* @__PURE__ */ jsxs19(Button, { size: "sm", icon: "plus", onClick: () => {
       onChange([...items, create()]);
       setOpen(items.length);
     }, children: [
@@ -4025,8 +4384,9 @@ function ListEditor({ items, onChange, renderItem, label, itemLabel = "Item", cr
     ] })
   ] });
 }
+var TOTAL_FORMATS = [...FORMAT_SUGGESTIONS.currency ?? [], ...FORMAT_SUGGESTIONS.number ?? [], ...FORMAT_SUGGESTIONS.percent ?? []];
 function ColumnsEditor({ value, onChange, dataSources, scopeVars }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     ListEditor,
     {
       items: value,
@@ -4034,21 +4394,28 @@ function ColumnsEditor({ value, onChange, dataSources, scopeVars }) {
       itemLabel: "Column",
       summary: (c) => c.header || c.value || "Column",
       create: () => ({ id: createId2("c"), header: "New column", value: "", align: "left", width: null }),
-      renderItem: (c, update) => /* @__PURE__ */ jsxs18(Fragment3, { children: [
-        /* @__PURE__ */ jsx19(Field, { label: "Heading", stacked: true, children: /* @__PURE__ */ jsx19(TextInput, { value: c.header, onChange: (header) => update({ header }), lazy: true }) }),
-        /* @__PURE__ */ jsx19(Field, { label: "Value", stacked: true, children: /* @__PURE__ */ jsx19(BindingField, { value: c.value, onChange: (v) => update({ value: v }), dataSources, scopeVars, placeholder: "Field per row" }) }),
-        /* @__PURE__ */ jsx19(Field, { label: "Align", children: /* @__PURE__ */ jsx19(Select, { value: c.align ?? "left", onChange: (v) => update({ align: v }), options: [{ value: "left", label: "Left" }, { value: "center", label: "Centre" }, { value: "right", label: "Right" }] }) }),
-        /* @__PURE__ */ jsx19(Field, { label: "Width", children: /* @__PURE__ */ jsx19(NumberInput, { value: c.width ?? null, onChange: (w) => update({ width: w }), min: 3, max: 100, unit: "%", placeholder: "auto" }) }),
-        /* @__PURE__ */ jsx19(Field, { label: "Total", children: /* @__PURE__ */ jsx19(Select, { value: c.total ?? "none", onChange: (v) => update({ total: v }), options: [{ value: "none", label: "None" }, { value: "sum", label: "Sum" }, { value: "avg", label: "Average" }, { value: "count", label: "Count" }, { value: "min", label: "Minimum" }, { value: "max", label: "Maximum" }] }) }),
-        c.total && c.total !== "none" ? /* @__PURE__ */ jsx19(Field, { label: "Total format", children: /* @__PURE__ */ jsx19(TextInput, { value: c.totalFormat ?? "", onChange: (totalFormat) => update({ totalFormat }), mono: true, lazy: true, placeholder: 'e.g. currency:"GBP":0' }) }) : null,
-        /* @__PURE__ */ jsx19(Field, { label: "Bold", children: /* @__PURE__ */ jsx19(Switch, { checked: !!c.bold, onChange: (bold) => update({ bold }) }) }),
-        /* @__PURE__ */ jsx19(Field, { label: "Wrap text", children: /* @__PURE__ */ jsx19(Switch, { checked: c.wrap !== false, onChange: (wrap) => update({ wrap }) }) })
+      renderItem: (c, update) => /* @__PURE__ */ jsxs19(Fragment3, { children: [
+        /* @__PURE__ */ jsx20(Field, { label: "Heading", stacked: true, children: /* @__PURE__ */ jsx20(TextInput, { value: c.header, onChange: (header) => update({ header }), lazy: true }) }),
+        /* @__PURE__ */ jsx20(Field, { label: "Value", stacked: true, children: /* @__PURE__ */ jsx20(BindingField, { value: c.value, onChange: (v) => update({ value: v }), dataSources, scopeVars, placeholder: "Field per row" }) }),
+        /* @__PURE__ */ jsx20(Field, { label: "Align", children: /* @__PURE__ */ jsx20(Select, { value: c.align ?? "left", onChange: (v) => update({ align: v }), options: [{ value: "left", label: "Left" }, { value: "center", label: "Centre" }, { value: "right", label: "Right" }] }) }),
+        /* @__PURE__ */ jsx20(Field, { label: "Width", children: /* @__PURE__ */ jsx20(NumberInput, { value: c.width ?? null, onChange: (w) => update({ width: w }), min: 3, max: 100, unit: "%", placeholder: "auto" }) }),
+        /* @__PURE__ */ jsx20(Field, { label: "Total", children: /* @__PURE__ */ jsx20(Select, { value: c.total ?? "none", onChange: (v) => update({ total: v }), options: [{ value: "none", label: "None" }, { value: "sum", label: "Sum" }, { value: "avg", label: "Average" }, { value: "count", label: "Count" }, { value: "min", label: "Minimum" }, { value: "max", label: "Maximum" }] }) }),
+        c.total && c.total !== "none" ? /* @__PURE__ */ jsx20(Field, { label: "Total shown as", children: /* @__PURE__ */ jsx20(
+          Select,
+          {
+            value: c.totalFormat ?? "",
+            onChange: (totalFormat) => update({ totalFormat: totalFormat || void 0 }),
+            options: [{ value: "", label: "As it comes" }, ...TOTAL_FORMATS.map((f) => ({ value: f.pipe, label: f.label }))]
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsx20(Field, { label: "Bold", children: /* @__PURE__ */ jsx20(Switch, { checked: !!c.bold, onChange: (bold) => update({ bold }) }) }),
+        /* @__PURE__ */ jsx20(Field, { label: "Wrap text", children: /* @__PURE__ */ jsx20(Switch, { checked: c.wrap !== false, onChange: (wrap) => update({ wrap }) }) })
       ] })
     }
   );
 }
 function SeriesEditor({ value, onChange, dataSources, scopeVars, renderColor }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     ListEditor,
     {
       items: value,
@@ -4056,33 +4423,98 @@ function SeriesEditor({ value, onChange, dataSources, scopeVars, renderColor })
       itemLabel: "Series",
       summary: (s) => s.label || s.value || "Series",
       create: () => ({ id: createId2("s"), label: `Series ${value.length + 1}`, value: "" }),
-      renderItem: (s, update) => /* @__PURE__ */ jsxs18(Fragment3, { children: [
-        /* @__PURE__ */ jsx19(Field, { label: "Label", children: /* @__PURE__ */ jsx19(TextInput, { value: s.label, onChange: (label) => update({ label }), lazy: true }) }),
-        /* @__PURE__ */ jsx19(Field, { label: "Value", stacked: true, children: /* @__PURE__ */ jsx19(BindingField, { value: s.value, onChange: (v) => update({ value: v }), dataSources, scopeVars, placeholder: "Numeric field per item" }) }),
-        /* @__PURE__ */ jsx19(Field, { label: "Colour", children: renderColor(s.color, (color) => update({ color })) })
+      renderItem: (s, update) => /* @__PURE__ */ jsxs19(Fragment3, { children: [
+        /* @__PURE__ */ jsx20(Field, { label: "Label", children: /* @__PURE__ */ jsx20(TextInput, { value: s.label, onChange: (label) => update({ label }), lazy: true }) }),
+        /* @__PURE__ */ jsx20(Field, { label: "Value", stacked: true, children: /* @__PURE__ */ jsx20(BindingField, { value: s.value, onChange: (v) => update({ value: v }), dataSources, scopeVars, placeholder: "Numeric field per item" }) }),
+        /* @__PURE__ */ jsx20(Field, { label: "Colour", children: renderColor(s.color, (color) => update({ color })) })
       ] })
     }
   );
 }
-function KeyValuesEditor({ value, onChange, dataSources, scopeVars }) {
-  return /* @__PURE__ */ jsx19(
+function KeyValuesEditor({
+  value,
+  onChange,
+  dataSources,
+  scopeVars,
+  allowExpressions = true
+}) {
+  const humanise = useTokenText(dataSources, scopeVars);
+  const summarise = (text) => allowExpressions ? text : humanise(text);
+  return /* @__PURE__ */ jsx20(
     ListEditor,
     {
       items: value,
       onChange,
       itemLabel: "Item",
-      summary: (k) => k.label || "Item",
+      summary: (k) => summarise(k.label) || "Item",
       create: () => ({ id: createId2("k"), label: "Label", value: "" }),
-      renderItem: (k, update) => /* @__PURE__ */ jsxs18(Fragment3, { children: [
-        /* @__PURE__ */ jsx19(Field, { label: "Label", children: /* @__PURE__ */ jsx19(TextInput, { value: k.label, onChange: (label) => update({ label }), lazy: true }) }),
-        /* @__PURE__ */ jsx19(Field, { label: "Value", stacked: true, children: /* @__PURE__ */ jsx19(BindingField, { value: k.value.replace(/^\{\{\s*|\s*\}\}$/g, ""), onChange: (v) => update({ value: v ? `{{ ${v} }}` : "" }), dataSources, scopeVars, placeholder: "Field or text" }) }),
-        /* @__PURE__ */ jsx19(Field, { label: "Text", stacked: true, children: /* @__PURE__ */ jsx19(TextInput, { value: k.value, onChange: (value2) => update({ value: value2 }), lazy: true, placeholder: "Static text or {{ field }}" }) })
-      ] })
+      renderItem: (k, update) => {
+        const bound = /^\{\{[^}]*\}\}$/.test(k.value.trim());
+        return /* @__PURE__ */ jsxs19(Fragment3, { children: [
+          /* @__PURE__ */ jsx20(Field, { label: "Label", children: /* @__PURE__ */ jsx20(
+            TextOrTokens,
+            {
+              value: k.label,
+              onChange: (label) => update({ label }),
+              dataSources,
+              scopeVars,
+              allowExpressions
+            }
+          ) }),
+          /* @__PURE__ */ jsx20(Field, { label: "Shows", stacked: true, children: /* @__PURE__ */ jsx20(
+            Segmented,
+            {
+              value: bound ? "field" : "text",
+              ariaLabel: "What this row shows",
+              onChange: (mode) => update({ value: mode === "field" ? "" : k.value.replace(/\{\{|\}\}/g, "").trim() }),
+              options: [
+                { value: "field", label: "A field" },
+                { value: "text", label: "Some text" }
+              ]
+            }
+          ) }),
+          bound ? /* @__PURE__ */ jsx20(Field, { label: "Field", stacked: true, children: /* @__PURE__ */ jsx20(
+            BindingField,
+            {
+              value: k.value.replace(/^\{\{\s*|\s*\}\}$/g, ""),
+              onChange: (v) => update({ value: v ? `{{ ${v} }}` : "" }),
+              dataSources,
+              scopeVars,
+              placeholder: "Choose a field",
+              allowExpression: allowExpressions
+            }
+          ) }) : /* @__PURE__ */ jsx20(Field, { label: "Text", stacked: true, children: /* @__PURE__ */ jsx20(
+            TextOrTokens,
+            {
+              value: k.value,
+              onChange: (value2) => update({ value: value2 }),
+              dataSources,
+              scopeVars,
+              allowExpressions,
+              placeholder: "Type what this row should say"
+            }
+          ) })
+        ] });
+      }
     }
   );
 }
+function TextOrTokens({
+  value,
+  onChange,
+  dataSources,
+  scopeVars,
+  allowExpressions,
+  placeholder
+}) {
+  const humanise = useTokenText(dataSources, scopeVars);
+  if (!allowExpressions && value.includes("{{")) {
+    return /* @__PURE__ */ jsx20(TextInput, { value: humanise(value), onChange: () => void 0, readOnly: true, title: "This line fills itself in from your data." });
+  }
+  return /* @__PURE__ */ jsx20(TextInput, { value, onChange, lazy: true, ...placeholder ? { placeholder } : {} });
+}
 function SubFormList({ value, onChange, fields, itemLabel, summary, renderField }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     ListEditor,
     {
       items: value,
@@ -4090,13 +4522,30 @@ function SubFormList({ value, onChange, fields, itemLabel, summary, renderField
       itemLabel: itemLabel ?? "Item",
       summary: (it, i) => summary?.(it, i) || String(it.label ?? it.header ?? `${itemLabel ?? "Item"} ${i + 1}`),
       create: () => ({ id: createId2("i") }),
-      renderItem: (it, update) => /* @__PURE__ */ jsx19(Fragment3, { children: fields.map((f) => /* @__PURE__ */ jsx19("div", { children: renderField(f, it[f.prop], (v) => update({ [f.prop]: v })) }, f.prop)) })
+      renderItem: (it, update) => /* @__PURE__ */ jsx20(Fragment3, { children: fields.map((f) => /* @__PURE__ */ jsx20("div", { children: renderField(f, it[f.prop], (v) => update({ [f.prop]: v })) }, f.prop)) })
     }
   );
 }
 
+// src/inspector/font-options.ts
+function fontOptions(theme, current) {
+  const first = (stack) => stack.split(",")[0].trim().replace(/^['"]|['"]$/g, "");
+  const options = [
+    { value: "$typography.headingFont", label: `Heading font (${first(theme.typography.headingFont)})` },
+    { value: "$typography.bodyFont", label: `Body font (${first(theme.typography.bodyFont)})` },
+    ...theme.typography.monoFont ? [{ value: "$typography.monoFont", label: `Mono font (${first(theme.typography.monoFont)})` }] : []
+  ];
+  for (const face of theme.fonts ?? []) {
+    if (!options.some((o) => o.value === face.family)) options.push({ value: face.family, label: face.family });
+  }
+  if (current && !options.some((o) => o.value === current)) {
+    options.push({ value: current, label: `${current.startsWith("$typography.") ? current.slice("$typography.".length) : current} (not in this theme)` });
+  }
+  return options;
+}
+
 // src/inspector/fields/FieldRenderer.tsx
-import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 function getPath(obj, path) {
   let cur = obj;
   for (const p of path.split(".")) {
@@ -4105,18 +4554,24 @@ function getPath(obj, path) {
   }
   return cur;
 }
-var COMMON_FONTS = ["Inter", "Roboto", "Open Sans", "Lato", "Source Sans 3", "Helvetica Neue", "Arial", "Georgia", "Times New Roman", "Merriweather", "Playfair Display", "Courier New", "JetBrains Mono"];
 function FieldRenderer({ field, value, onChange, ctx }) {
   const description = typeof field.description === "function" ? field.description(ctx.props) : field.description;
-  const wrap = (control, opts = {}) => /* @__PURE__ */ jsx20(Field, { label: field.label, stacked: opts.stacked ?? field.fullWidth, hint: opts.hint ?? description, error: opts.error, children: control });
+  const humanise = useTokenText(ctx.dataSources, ctx.scopeVars);
+  const wrap = (control, opts = {}) => /* @__PURE__ */ jsx21(Field, { label: field.label, stacked: opts.stacked ?? field.fullWidth, hint: opts.hint ?? description, error: opts.error, children: control });
   const str = typeof value === "string" ? value : value === void 0 || value === null ? "" : String(value);
   switch (field.kind) {
     case "text": {
       const tokens = field.allowTokens !== false && ctx.allowExpressions;
+      if (!tokens && str.includes("{{")) {
+        return wrap(
+          /* @__PURE__ */ jsx21("div", { className: "bpe-binding", children: /* @__PURE__ */ jsx21(TextInput, { value: humanise(str), onChange: () => void 0, readOnly: true, title: "This line fills itself in from your data." }) }),
+          { hint: description ?? "Fills itself in from your data." }
+        );
+      }
       return wrap(
-        /* @__PURE__ */ jsxs19("div", { className: "bpe-binding", children: [
-          /* @__PURE__ */ jsx20(TextInput, { value: str, onChange: (v) => onChange(v), lazy: true, placeholder: field.placeholder }),
-          tokens ? /* @__PURE__ */ jsx20(Popover, { className: "bpe-picker", trigger: /* @__PURE__ */ jsx20(Button, { size: "sm", variant: "ghost", icon: "braces", tooltip: "Insert field" }), children: (close) => /* @__PURE__ */ jsx20(DataPicker, { dataSources: ctx.dataSources, scopeVars: ctx.scopeVars, onPick: (expr) => {
+        /* @__PURE__ */ jsxs20("div", { className: "bpe-binding", children: [
+          /* @__PURE__ */ jsx21(TextInput, { value: str, onChange: (v) => onChange(v), lazy: true, placeholder: field.placeholder }),
+          tokens ? /* @__PURE__ */ jsx21(Popover, { className: "bpe-picker", trigger: /* @__PURE__ */ jsx21(Button, { size: "sm", variant: "ghost", icon: "braces", tooltip: "Insert field" }), children: (close) => /* @__PURE__ */ jsx21(DataPicker, { dataSources: ctx.dataSources, scopeVars: ctx.scopeVars, onPick: (expr) => {
             onChange(`${str}${str && !str.endsWith(" ") ? " " : ""}{{ ${expr} }}`);
             close();
           } }) }) : null
@@ -4124,41 +4579,46 @@ function FieldRenderer({ field, value, onChange, ctx }) {
       );
     }
     case "textarea":
-      return wrap(/* @__PURE__ */ jsx20(TextArea, { value: str, rows: field.rows ?? 3, placeholder: field.placeholder, onChange: (e) => onChange(e.target.value) }), { stacked: true });
+      return wrap(/* @__PURE__ */ jsx21(TextArea, { value: str, rows: field.rows ?? 3, placeholder: field.placeholder, onChange: (e) => onChange(e.target.value) }), { stacked: true });
     case "richtext": {
       const doc = isRichTextDoc3(value) ? value : richTextFromTemplate3(str);
       const plain = richTextToPlain2(doc);
       return wrap(
-        /* @__PURE__ */ jsx20(TextArea, { value: plain, rows: 4, onChange: (e) => onChange(richTextFromTemplate3(e.target.value)), placeholder: "Type text, use {{ field }} for data. Double-click the block on the canvas for rich formatting." }),
+        /* @__PURE__ */ jsx21(TextArea, { value: plain, rows: 4, onChange: (e) => onChange(richTextFromTemplate3(e.target.value)), placeholder: "Type text, use {{ field }} for data. Double-click the block on the canvas for rich formatting." }),
         { stacked: true, hint: "Double-click the block on the canvas for formatting, lists and links." }
       );
     }
     case "number":
-      return wrap(/* @__PURE__ */ jsx20(NumberInput, { value: typeof value === "number" ? value : null, onChange: (v) => onChange(v), min: field.min, max: field.max, step: field.step, unit: field.unit, placeholder: "auto" }));
+      return wrap(/* @__PURE__ */ jsx21(NumberInput, { value: typeof value === "number" ? value : null, onChange: (v) => onChange(v), min: field.min, max: field.max, step: field.step, unit: field.unit, placeholder: "auto" }));
     case "toggle":
-      return wrap(/* @__PURE__ */ jsx20(Switch, { checked: !!value, onChange: (v) => onChange(v), label: field.label }));
+      return wrap(/* @__PURE__ */ jsx21(Switch, { checked: !!value, onChange: (v) => onChange(v), label: field.label }));
     case "select": {
       const options = field.optionsFrom ? field.optionsFrom(ctx.props) : field.options ?? [];
-      return wrap(/* @__PURE__ */ jsx20(Select, { value: str, onChange: (v) => onChange(coerce(v, options)), options: options.map((o) => ({ value: String(o.value), label: o.label })) }));
+      return wrap(/* @__PURE__ */ jsx21(Select, { value: str, onChange: (v) => onChange(coerce(v, options)), options: options.map((o) => ({ value: String(o.value), label: o.label })) }));
     }
     case "segmented":
-      return wrap(/* @__PURE__ */ jsx20(Segmented, { value: str, onChange: (v) => onChange(coerce(v, field.options)), options: field.options.map((o) => ({ value: String(o.value), label: o.label, icon: o.icon })), iconOnly: field.options.every((o) => !!o.icon) && field.options.length > 3, ariaLabel: field.label }));
+      return wrap(/* @__PURE__ */ jsx21(Segmented, { value: str, onChange: (v) => onChange(coerce(v, field.options)), options: field.options.map((o) => ({ value: String(o.value), label: o.label, icon: o.icon })), iconOnly: field.options.every((o) => !!o.icon) && field.options.length > 3, ariaLabel: field.label }));
     case "color":
-      return wrap(/* @__PURE__ */ jsx20(ColorField, { value: str || void 0, onChange: (v) => onChange(v ?? ""), theme: ctx.theme, allowTransparent: field.allowTransparent }));
+      return wrap(/* @__PURE__ */ jsx21(ColorField, { value: str || void 0, onChange: (v) => onChange(v ?? ""), theme: ctx.theme, allowTransparent: field.allowTransparent }));
     case "font":
-      return wrap(/* @__PURE__ */ jsx20(FontSelect, { value: str, onChange, theme: ctx.theme }));
+      return wrap(/* @__PURE__ */ jsx21(FontSelect, { value: str, onChange, theme: ctx.theme }));
     case "textStyle":
-      return wrap(/* @__PURE__ */ jsx20(Select, { value: str, onChange: (v) => onChange(v || void 0), placeholder: "Default", options: ctx.textStyles.map((s) => ({ value: s, label: textStyleLabel(s) })) }));
+      return wrap(/* @__PURE__ */ jsx21(Select, { value: str, onChange: (v) => onChange(v || void 0), placeholder: "Default", options: ctx.textStyles.map((s) => ({ value: s, label: textStyleLabel(s) })) }));
     case "binding":
-      return wrap(/* @__PURE__ */ jsx20(BindingField, { value: str, onChange: (v) => onChange(v), dataSources: ctx.dataSources, scopeVars: ctx.scopeVars, types: field.valueType ? Array.isArray(field.valueType) ? field.valueType : [field.valueType] : void 0, placeholder: field.placeholder, allowExpression: ctx.allowExpressions }));
+      return wrap(/* @__PURE__ */ jsx21(BindingField, { value: str, onChange: (v) => onChange(v), dataSources: ctx.dataSources, scopeVars: ctx.scopeVars, types: field.valueType ? Array.isArray(field.valueType) ? field.valueType : [field.valueType] : void 0, placeholder: field.placeholder, allowExpression: ctx.allowExpressions }));
     case "collection":
-      return wrap(/* @__PURE__ */ jsx20(BindingField, { value: str, onChange: (v) => onChange(v), dataSources: ctx.dataSources, scopeVars: ctx.scopeVars, arraysOnly: true, placeholder: field.placeholder, allowExpression: ctx.allowExpressions }));
+      return wrap(/* @__PURE__ */ jsx21(BindingField, { value: str, onChange: (v) => onChange(v), dataSources: ctx.dataSources, scopeVars: ctx.scopeVars, arraysOnly: true, placeholder: field.placeholder, allowExpression: ctx.allowExpressions }));
     case "expression": {
+      if (!ctx.allowExpressions) {
+        return wrap(
+          /* @__PURE__ */ jsx21(BindingField, { value: str, onChange: (v) => onChange(v), dataSources: ctx.dataSources, scopeVars: ctx.scopeVars, placeholder: field.placeholder, allowExpression: false, allowCalculation: false })
+        );
+      }
       const err = str.trim() ? checkExpressionSyntax3(str) : null;
       return wrap(
-        /* @__PURE__ */ jsxs19("div", { className: "bpe-binding", children: [
-          /* @__PURE__ */ jsx20(TextInput, { value: str, onChange: (v) => onChange(v), lazy: true, mono: true, placeholder: field.placeholder, invalid: !!err }),
-          /* @__PURE__ */ jsx20(Popover, { className: "bpe-picker", trigger: /* @__PURE__ */ jsx20(Button, { size: "sm", variant: "ghost", icon: "braces", tooltip: "Pick field" }), children: (close) => /* @__PURE__ */ jsx20(DataPicker, { dataSources: ctx.dataSources, scopeVars: ctx.scopeVars, value: str, onPick: (expr) => {
+        /* @__PURE__ */ jsxs20("div", { className: "bpe-binding", children: [
+          /* @__PURE__ */ jsx21(TextInput, { value: str, onChange: (v) => onChange(v), lazy: true, mono: true, placeholder: field.placeholder, invalid: !!err }),
+          /* @__PURE__ */ jsx21(Popover, { className: "bpe-picker", trigger: /* @__PURE__ */ jsx21(Button, { size: "sm", variant: "ghost", icon: "braces", tooltip: "Pick field" }), children: (close) => /* @__PURE__ */ jsx21(DataPicker, { dataSources: ctx.dataSources, scopeVars: ctx.scopeVars, value: str, onPick: (expr) => {
             onChange(expr);
             close();
           } }) })
@@ -4167,7 +4627,7 @@ function FieldRenderer({ field, value, onChange, ctx }) {
       );
     }
     case "image":
-      return /* @__PURE__ */ jsx20(
+      return /* @__PURE__ */ jsx21(
         ImageFieldRow,
         {
           field,
@@ -4178,16 +4638,28 @@ function FieldRenderer({ field, value, onChange, ctx }) {
         }
       );
     case "condition":
-      return wrap(/* @__PURE__ */ jsx20(ConditionBuilder, { value, onChange: (v) => onChange(v ?? ""), dataSources: ctx.dataSources, scopeVars: ctx.scopeVars, allowExpression: ctx.allowExpressions }), { stacked: true });
+      return wrap(/* @__PURE__ */ jsx21(ConditionBuilder, { value, onChange: (v) => onChange(v ?? ""), dataSources: ctx.dataSources, scopeVars: ctx.scopeVars, allowExpression: ctx.allowExpressions }), { stacked: true });
     case "columns":
-      return wrap(/* @__PURE__ */ jsx20(ColumnsEditor, { value: Array.isArray(value) ? value : [], onChange, dataSources: ctx.dataSources, scopeVars: ctx.scopeVars }), { stacked: true });
+      return wrap(/* @__PURE__ */ jsx21(ColumnsEditor, { value: Array.isArray(value) ? value : [], onChange, dataSources: ctx.dataSources, scopeVars: ctx.scopeVars }), { stacked: true });
     case "series":
-      return wrap(/* @__PURE__ */ jsx20(SeriesEditor, { value: Array.isArray(value) ? value : [], onChange, dataSources: ctx.dataSources, scopeVars: ctx.scopeVars, renderColor: (v, set) => /* @__PURE__ */ jsx20(ColorField, { value: v, onChange: set, theme: ctx.theme, placeholder: "Palette" }) }), { stacked: true });
+      return wrap(/* @__PURE__ */ jsx21(SeriesEditor, { value: Array.isArray(value) ? value : [], onChange, dataSources: ctx.dataSources, scopeVars: ctx.scopeVars, renderColor: (v, set) => /* @__PURE__ */ jsx21(ColorField, { value: v, onChange: set, theme: ctx.theme, placeholder: "Palette" }) }), { stacked: true });
     case "keyValues":
-      return wrap(/* @__PURE__ */ jsx20(KeyValuesEditor, { value: Array.isArray(value) ? value : [], onChange, dataSources: ctx.dataSources, scopeVars: ctx.scopeVars }), { stacked: true });
+      return wrap(
+        /* @__PURE__ */ jsx21(
+          KeyValuesEditor,
+          {
+            value: Array.isArray(value) ? value : [],
+            onChange,
+            dataSources: ctx.dataSources,
+            scopeVars: ctx.scopeVars,
+            allowExpressions: ctx.allowExpressions
+          }
+        ),
+        { stacked: true }
+      );
     case "list":
       return wrap(
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           SubFormList,
           {
             value: Array.isArray(value) ? value : [],
@@ -4195,13 +4667,13 @@ function FieldRenderer({ field, value, onChange, ctx }) {
             fields: field.fields,
             itemLabel: field.itemLabel,
             summary: field.itemSummary ? (item, i) => field.itemSummary(item, i, ctx.props) : void 0,
-            renderField: (f, v, set) => /* @__PURE__ */ jsx20(FieldRenderer, { field: f, value: v, onChange: set, ctx })
+            renderField: (f, v, set) => /* @__PURE__ */ jsx21(FieldRenderer, { field: f, value: v, onChange: set, ctx })
           }
         ),
         { stacked: true }
       );
     case "custom":
-      return wrap(/* @__PURE__ */ jsx20(CustomFieldHost, { field, value, onChange, ctx }), { stacked: true });
+      return wrap(/* @__PURE__ */ jsx21(CustomFieldHost, { field, value, onChange, ctx }), { stacked: true });
   }
 }
 function coerce(v, options) {
@@ -4209,18 +4681,12 @@ function coerce(v, options) {
   return match ? match.value : v;
 }
 function FontSelect({ value, onChange, theme }) {
-  const themeFonts = [
-    { value: "$typography.headingFont", label: `Heading font (${theme.typography.headingFont.split(",")[0]})` },
-    { value: "$typography.bodyFont", label: `Body font (${theme.typography.bodyFont.split(",")[0]})` },
-    ...theme.typography.monoFont ? [{ value: "$typography.monoFont", label: "Mono font" }] : []
-  ];
-  const fonts = [...(theme.fonts ?? []).map((f) => f.family), ...COMMON_FONTS].filter((f, i, a) => a.indexOf(f) === i);
-  return /* @__PURE__ */ jsx20(Select, { value, onChange, placeholder: "Default", options: [...themeFonts, ...fonts.map((f) => ({ value: f, label: f }))] });
+  return /* @__PURE__ */ jsx21(Select, { value, onChange, placeholder: "Default", options: fontOptions(theme, value) });
 }
 function CustomFieldHost({ field, value, onChange, ctx }) {
   const session = useSession();
-  const ref = useRef7(null);
-  const mounted = useRef7(false);
+  const ref = useRef8(null);
+  const mounted = useRef8(false);
   const api = () => ({
     value,
     props: ctx.props,
@@ -4228,10 +4694,10 @@ function CustomFieldHost({ field, value, onChange, ctx }) {
     setValue: onChange,
     setProps: ctx.setProps,
     dataSources: ctx.dataSources,
-    schemaScope: createSchemaScope4(ctx.dataSources).child(ctx.scopeVars ?? {}),
+    schemaScope: createSchemaScope6(ctx.dataSources).child(ctx.scopeVars ?? {}),
     theme: ctx.theme
   });
-  useEffect6(() => {
+  useEffect7(() => {
     const el = ref.current;
     if (!el) return;
     if (!mounted.current) {
@@ -4239,14 +4705,14 @@ function CustomFieldHost({ field, value, onChange, ctx }) {
       mounted.current = true;
     } else field.component.update?.(api());
   });
-  useEffect6(() => {
+  useEffect7(() => {
     const el = ref.current;
     return () => {
       if (el && mounted.current) field.component.unmount?.(el);
       mounted.current = false;
     };
   }, [field.component, session]);
-  return /* @__PURE__ */ jsx20("div", { ref, style: { width: "100%" } });
+  return /* @__PURE__ */ jsx21("div", { ref, style: { width: "100%" } });
 }
 function ImageFieldRow({
   field,
@@ -4255,9 +4721,9 @@ function ImageFieldRow({
   ctx,
   render
 }) {
-  const [error, setError] = useState15(null);
+  const [error, setError] = useState17(null);
   return render(
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(
       ImageField,
       {
         value,
@@ -4277,13 +4743,13 @@ function ImageFieldRow({
 
 // src/inspector/StyleGroups.tsx
 import { textStyleLabel as textStyleLabel2 } from "@broadpaper/core";
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 var SIDES = ["top", "right", "bottom", "left"];
 function SpacingGrid({ value, onChange }) {
   const v = value ?? {};
-  return /* @__PURE__ */ jsxs20("div", { children: [
-    /* @__PURE__ */ jsx21("div", { className: "bpe-spacing-grid", children: SIDES.map((s) => /* @__PURE__ */ jsx21(NumberInput, { value: v[s] ?? null, onChange: (n) => onChange({ ...v, [s]: n ?? void 0 }), min: -200, max: 400, placeholder: "0", "aria-label": s }, s)) }),
-    /* @__PURE__ */ jsx21("div", { className: "bpe-spacing-grid", children: SIDES.map((s) => /* @__PURE__ */ jsx21("div", { className: "bpe-spacing-grid__lbl", children: s }, s)) })
+  return /* @__PURE__ */ jsxs21("div", { children: [
+    /* @__PURE__ */ jsx22("div", { className: "bpe-spacing-grid", children: SIDES.map((s) => /* @__PURE__ */ jsx22(NumberInput, { value: v[s] ?? null, onChange: (n) => onChange({ ...v, [s]: n ?? void 0 }), min: -200, max: 400, placeholder: "0", "aria-label": s }, s)) }),
+    /* @__PURE__ */ jsx22("div", { className: "bpe-spacing-grid", children: SIDES.map((s) => /* @__PURE__ */ jsx22("div", { className: "bpe-spacing-grid__lbl", children: s }, s)) })
   ] });
 }
 function StyleGroups({ node, groups, theme, textStyles, setStyle, setFlow, allowOverrides }) {
@@ -4291,62 +4757,62 @@ function StyleGroups({ node, groups, theme, textStyles, setStyle, setFlow, allow
   const f = node.flow ?? {};
   const has = (g) => groups.includes(g);
   const hasOverrides = Object.keys(s).length > 0;
-  return /* @__PURE__ */ jsxs20(Fragment4, { children: [
-    allowOverrides && (has("textStyle") || has("typography") || has("alignment")) ? /* @__PURE__ */ jsx21(Section, { title: "Typography", actions: hasOverrides ? /* @__PURE__ */ jsx21(Button, { size: "sm", variant: "ghost", icon: "rotate-ccw", tooltip: "Reset style overrides", onClick: () => setStyle(null) }) : null, children: /* @__PURE__ */ jsxs20("div", { className: "bpe-prop-grid", children: [
-      has("textStyle") ? /* @__PURE__ */ jsx21(Field, { label: "Text style", children: /* @__PURE__ */ jsx21(Select, { value: s.textStyle ?? "", onChange: (v) => setStyle({ textStyle: v || void 0 }), placeholder: "Block default", options: textStyles.map((t) => ({ value: t, label: textStyleLabel2(t) })) }) }) : null,
-      has("typography") ? /* @__PURE__ */ jsxs20(Fragment4, { children: [
-        /* @__PURE__ */ jsx21(Field, { label: "Font", children: /* @__PURE__ */ jsx21(Select, { value: s.fontFamily ?? "", onChange: (v) => setStyle({ fontFamily: v || void 0 }), placeholder: "Inherit", options: [{ value: "$typography.headingFont", label: "Heading font" }, { value: "$typography.bodyFont", label: "Body font" }, ...(theme.fonts ?? []).map((x) => ({ value: x.family, label: x.family })), ...["Inter", "Roboto", "Georgia", "Arial", "Times New Roman"].map((x) => ({ value: x, label: x }))] }) }),
-        /* @__PURE__ */ jsx21(Field, { label: "Size", children: /* @__PURE__ */ jsx21(NumberInput, { value: s.fontSize ?? null, onChange: (v) => setStyle({ fontSize: v ?? void 0 }), min: 4, max: 200, unit: "px", placeholder: "inherit" }) }),
-        /* @__PURE__ */ jsx21(Field, { label: "Weight", children: /* @__PURE__ */ jsx21(Select, { value: s.fontWeight === void 0 ? "" : String(s.fontWeight), onChange: (v) => setStyle({ fontWeight: v ? Number(v) : void 0 }), placeholder: "Inherit", options: [300, 400, 500, 600, 700, 800].map((w) => ({ value: String(w), label: w === 400 ? "Regular" : w === 700 ? "Bold" : String(w) })) }) }),
-        /* @__PURE__ */ jsx21(Field, { label: "Line height", children: /* @__PURE__ */ jsx21(NumberInput, { value: s.lineHeight ?? null, onChange: (v) => setStyle({ lineHeight: v ?? void 0 }), min: 0.6, max: 4, step: 0.05, placeholder: "inherit" }) }),
-        /* @__PURE__ */ jsx21(Field, { label: "Spacing", children: /* @__PURE__ */ jsx21(NumberInput, { value: s.letterSpacing ?? null, onChange: (v) => setStyle({ letterSpacing: v ?? void 0 }), min: -0.2, max: 1, step: 0.01, unit: "em", placeholder: "0" }) }),
-        /* @__PURE__ */ jsx21(Field, { label: "Case", children: /* @__PURE__ */ jsx21(Segmented, { value: s.textTransform ?? "none", onChange: (v) => setStyle({ textTransform: v === "none" ? void 0 : v }), options: [{ value: "none", label: "Aa" }, { value: "uppercase", label: "AA" }, { value: "lowercase", label: "aa" }, { value: "capitalize", label: "Aa Bb" }] }) }),
-        /* @__PURE__ */ jsx21(Field, { label: "Style", children: /* @__PURE__ */ jsx21(Segmented, { value: s.fontStyle ?? "normal", onChange: (v) => setStyle({ fontStyle: v === "normal" ? void 0 : "italic" }), options: [{ value: "normal", label: "Normal" }, { value: "italic", label: "Italic" }] }) }),
-        /* @__PURE__ */ jsx21(Field, { label: "Colour", children: /* @__PURE__ */ jsx21(ColorField, { value: s.color, onChange: (v) => setStyle({ color: v }), theme, allowTransparent: false, placeholder: "Inherit" }) })
+  return /* @__PURE__ */ jsxs21(Fragment4, { children: [
+    allowOverrides && (has("textStyle") || has("typography") || has("alignment")) ? /* @__PURE__ */ jsx22(Section, { title: "Typography", actions: hasOverrides ? /* @__PURE__ */ jsx22(Button, { size: "sm", variant: "ghost", icon: "rotate-ccw", tooltip: "Reset style overrides", onClick: () => setStyle(null) }) : null, children: /* @__PURE__ */ jsxs21("div", { className: "bpe-prop-grid", children: [
+      has("textStyle") ? /* @__PURE__ */ jsx22(Field, { label: "Text style", children: /* @__PURE__ */ jsx22(Select, { value: s.textStyle ?? "", onChange: (v) => setStyle({ textStyle: v || void 0 }), placeholder: "Block default", options: textStyles.map((t) => ({ value: t, label: textStyleLabel2(t) })) }) }) : null,
+      has("typography") ? /* @__PURE__ */ jsxs21(Fragment4, { children: [
+        /* @__PURE__ */ jsx22(Field, { label: "Font", children: /* @__PURE__ */ jsx22(Select, { value: s.fontFamily ?? "", onChange: (v) => setStyle({ fontFamily: v || void 0 }), placeholder: "Inherit", options: fontOptions(theme, s.fontFamily) }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Size", children: /* @__PURE__ */ jsx22(NumberInput, { value: s.fontSize ?? null, onChange: (v) => setStyle({ fontSize: v ?? void 0 }), min: 4, max: 200, unit: "px", placeholder: "inherit" }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Weight", children: /* @__PURE__ */ jsx22(Select, { value: s.fontWeight === void 0 ? "" : String(s.fontWeight), onChange: (v) => setStyle({ fontWeight: v ? Number(v) : void 0 }), placeholder: "Inherit", options: [300, 400, 500, 600, 700, 800].map((w) => ({ value: String(w), label: w === 400 ? "Regular" : w === 700 ? "Bold" : String(w) })) }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Line height", children: /* @__PURE__ */ jsx22(NumberInput, { value: s.lineHeight ?? null, onChange: (v) => setStyle({ lineHeight: v ?? void 0 }), min: 0.6, max: 4, step: 0.05, placeholder: "inherit" }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Spacing", children: /* @__PURE__ */ jsx22(NumberInput, { value: s.letterSpacing ?? null, onChange: (v) => setStyle({ letterSpacing: v ?? void 0 }), min: -0.2, max: 1, step: 0.01, unit: "em", placeholder: "0" }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Case", children: /* @__PURE__ */ jsx22(Segmented, { value: s.textTransform ?? "none", onChange: (v) => setStyle({ textTransform: v === "none" ? void 0 : v }), options: [{ value: "none", label: "Aa" }, { value: "uppercase", label: "AA" }, { value: "lowercase", label: "aa" }, { value: "capitalize", label: "Aa Bb" }] }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Style", children: /* @__PURE__ */ jsx22(Segmented, { value: s.fontStyle ?? "normal", onChange: (v) => setStyle({ fontStyle: v === "normal" ? void 0 : "italic" }), options: [{ value: "normal", label: "Normal" }, { value: "italic", label: "Italic" }] }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Colour", children: /* @__PURE__ */ jsx22(ColorField, { value: s.color, onChange: (v) => setStyle({ color: v }), theme, allowTransparent: false, placeholder: "Inherit" }) })
       ] }) : null,
-      has("alignment") ? /* @__PURE__ */ jsx21(Field, { label: "Align", children: /* @__PURE__ */ jsx21(Segmented, { value: s.textAlign ?? "left", onChange: (v) => setStyle({ textAlign: v === "left" ? void 0 : v }), iconOnly: true, ariaLabel: "Text alignment", options: [{ value: "left", label: "Left", icon: "align-left" }, { value: "center", label: "Centre", icon: "align-center" }, { value: "right", label: "Right", icon: "align-right" }, { value: "justify", label: "Justify", icon: "align-justify" }] }) }) : null
+      has("alignment") ? /* @__PURE__ */ jsx22(Field, { label: "Align", children: /* @__PURE__ */ jsx22(Segmented, { value: s.textAlign ?? "left", onChange: (v) => setStyle({ textAlign: v === "left" ? void 0 : v }), iconOnly: true, ariaLabel: "Text alignment", options: [{ value: "left", label: "Left", icon: "align-left" }, { value: "center", label: "Centre", icon: "align-center" }, { value: "right", label: "Right", icon: "align-right" }, { value: "justify", label: "Justify", icon: "align-justify" }] }) }) : null
     ] }) }) : null,
-    allowOverrides && (has("spacing") || has("size")) ? /* @__PURE__ */ jsx21(Section, { title: "Spacing & size", defaultOpen: false, children: /* @__PURE__ */ jsxs20("div", { className: "bpe-prop-grid", children: [
-      has("spacing") ? /* @__PURE__ */ jsxs20(Fragment4, { children: [
-        /* @__PURE__ */ jsx21(Field, { label: "Margin", stacked: true, children: /* @__PURE__ */ jsx21(SpacingGrid, { value: s.margin, onChange: (v) => setStyle({ margin: v }) }) }),
-        /* @__PURE__ */ jsx21(Field, { label: "Padding", stacked: true, children: /* @__PURE__ */ jsx21(SpacingGrid, { value: s.padding, onChange: (v) => setStyle({ padding: v }) }) })
+    allowOverrides && (has("spacing") || has("size")) ? /* @__PURE__ */ jsx22(Section, { title: "Spacing & size", defaultOpen: false, children: /* @__PURE__ */ jsxs21("div", { className: "bpe-prop-grid", children: [
+      has("spacing") ? /* @__PURE__ */ jsxs21(Fragment4, { children: [
+        /* @__PURE__ */ jsx22(Field, { label: "Margin", stacked: true, children: /* @__PURE__ */ jsx22(SpacingGrid, { value: s.margin, onChange: (v) => setStyle({ margin: v }) }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Padding", stacked: true, children: /* @__PURE__ */ jsx22(SpacingGrid, { value: s.padding, onChange: (v) => setStyle({ padding: v }) }) })
       ] }) : null,
-      has("size") ? /* @__PURE__ */ jsxs20(Fragment4, { children: [
-        /* @__PURE__ */ jsx21(Field, { label: "Width", children: /* @__PURE__ */ jsx21(NumberInput, { value: typeof s.width === "number" ? s.width : null, onChange: (v) => setStyle({ width: v ?? void 0 }), min: 8, max: 2e3, unit: "px", placeholder: "auto" }) }),
-        /* @__PURE__ */ jsx21(Field, { label: "Placement", children: /* @__PURE__ */ jsx21(Segmented, { value: s.align ?? "left", onChange: (v) => setStyle({ align: v === "left" ? void 0 : v }), options: [{ value: "left", label: "Left" }, { value: "center", label: "Centre" }, { value: "right", label: "Right" }] }) })
+      has("size") ? /* @__PURE__ */ jsxs21(Fragment4, { children: [
+        /* @__PURE__ */ jsx22(Field, { label: "Width", children: /* @__PURE__ */ jsx22(NumberInput, { value: typeof s.width === "number" ? s.width : null, onChange: (v) => setStyle({ width: v ?? void 0 }), min: 8, max: 2e3, unit: "px", placeholder: "auto" }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Placement", children: /* @__PURE__ */ jsx22(Segmented, { value: s.align ?? "left", onChange: (v) => setStyle({ align: v === "left" ? void 0 : v }), options: [{ value: "left", label: "Left" }, { value: "center", label: "Centre" }, { value: "right", label: "Right" }] }) })
       ] }) : null
     ] }) }) : null,
-    allowOverrides && (has("background") || has("border")) ? /* @__PURE__ */ jsx21(Section, { title: "Background & border", defaultOpen: false, children: /* @__PURE__ */ jsxs20("div", { className: "bpe-prop-grid", children: [
-      has("background") ? /* @__PURE__ */ jsx21(Field, { label: "Background", children: /* @__PURE__ */ jsx21(ColorField, { value: s.background, onChange: (v) => setStyle({ background: v }), theme, placeholder: "None" }) }) : null,
-      has("border") ? /* @__PURE__ */ jsxs20(Fragment4, { children: [
-        /* @__PURE__ */ jsx21(Field, { label: "Border", children: /* @__PURE__ */ jsx21(NumberInput, { value: s.border?.width ?? null, onChange: (v) => setStyle({ border: { ...s.border ?? {}, width: v ?? void 0 } }), min: 0, max: 20, unit: "px", placeholder: "0" }) }),
-        /* @__PURE__ */ jsx21(Field, { label: "Border colour", children: /* @__PURE__ */ jsx21(ColorField, { value: s.border?.color, onChange: (v) => setStyle({ border: { ...s.border ?? {}, color: v } }), theme, placeholder: "Theme border" }) }),
-        /* @__PURE__ */ jsx21(Field, { label: "Line", children: /* @__PURE__ */ jsx21(Segmented, { value: s.border?.style ?? "solid", onChange: (v) => setStyle({ border: { ...s.border ?? {}, style: v } }), options: [{ value: "solid", label: "Solid" }, { value: "dashed", label: "Dashed" }, { value: "dotted", label: "Dotted" }] }) }),
-        /* @__PURE__ */ jsx21(Field, { label: "Radius", children: /* @__PURE__ */ jsx21(NumberInput, { value: s.border?.radius ?? null, onChange: (v) => setStyle({ border: { ...s.border ?? {}, radius: v ?? void 0 } }), min: 0, max: 100, unit: "px", placeholder: "0" }) }),
-        /* @__PURE__ */ jsx21(Field, { label: "Sides", children: /* @__PURE__ */ jsx21("div", { style: { display: "flex", gap: 4 }, children: SIDES.map((side) => {
+    allowOverrides && (has("background") || has("border")) ? /* @__PURE__ */ jsx22(Section, { title: "Background & border", defaultOpen: false, children: /* @__PURE__ */ jsxs21("div", { className: "bpe-prop-grid", children: [
+      has("background") ? /* @__PURE__ */ jsx22(Field, { label: "Background", children: /* @__PURE__ */ jsx22(ColorField, { value: s.background, onChange: (v) => setStyle({ background: v }), theme, placeholder: "None" }) }) : null,
+      has("border") ? /* @__PURE__ */ jsxs21(Fragment4, { children: [
+        /* @__PURE__ */ jsx22(Field, { label: "Border", children: /* @__PURE__ */ jsx22(NumberInput, { value: s.border?.width ?? null, onChange: (v) => setStyle({ border: { ...s.border ?? {}, width: v ?? void 0 } }), min: 0, max: 20, unit: "px", placeholder: "0" }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Border colour", children: /* @__PURE__ */ jsx22(ColorField, { value: s.border?.color, onChange: (v) => setStyle({ border: { ...s.border ?? {}, color: v } }), theme, placeholder: "Theme border" }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Line", children: /* @__PURE__ */ jsx22(Segmented, { value: s.border?.style ?? "solid", onChange: (v) => setStyle({ border: { ...s.border ?? {}, style: v } }), options: [{ value: "solid", label: "Solid" }, { value: "dashed", label: "Dashed" }, { value: "dotted", label: "Dotted" }] }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Radius", children: /* @__PURE__ */ jsx22(NumberInput, { value: s.border?.radius ?? null, onChange: (v) => setStyle({ border: { ...s.border ?? {}, radius: v ?? void 0 } }), min: 0, max: 100, unit: "px", placeholder: "0" }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Sides", children: /* @__PURE__ */ jsx22("div", { style: { display: "flex", gap: 4 }, children: SIDES.map((side) => {
           const sides = s.border?.sides ?? [...SIDES];
           const on = sides.includes(side);
-          return /* @__PURE__ */ jsx21(Button, { size: "sm", active: on, onClick: () => setStyle({ border: { ...s.border ?? {}, sides: on ? sides.filter((x) => x !== side) : [...sides, side] } }), style: { flex: 1, textTransform: "capitalize" }, children: side[0].toUpperCase() }, side);
+          return /* @__PURE__ */ jsx22(Button, { size: "sm", active: on, onClick: () => setStyle({ border: { ...s.border ?? {}, sides: on ? sides.filter((x) => x !== side) : [...sides, side] } }), style: { flex: 1, textTransform: "capitalize" }, children: side[0].toUpperCase() }, side);
         }) }) })
       ] }) : null,
-      /* @__PURE__ */ jsx21(Field, { label: "Opacity", children: /* @__PURE__ */ jsx21(NumberInput, { value: s.opacity ?? null, onChange: (v) => setStyle({ opacity: v ?? void 0 }), min: 0, max: 1, step: 0.05, placeholder: "1" }) })
+      /* @__PURE__ */ jsx22(Field, { label: "Opacity", children: /* @__PURE__ */ jsx22(NumberInput, { value: s.opacity ?? null, onChange: (v) => setStyle({ opacity: v ?? void 0 }), min: 0, max: 1, step: 0.05, placeholder: "1" }) })
     ] }) }) : null,
-    has("flow") ? /* @__PURE__ */ jsx21(Section, { title: "Page flow", defaultOpen: false, icon: "file-output", children: /* @__PURE__ */ jsxs20("div", { className: "bpe-prop-grid", children: [
-      /* @__PURE__ */ jsx21(Field, { label: "Keep together", hint: "Never split this block across pages (unless it is taller than a page).", children: /* @__PURE__ */ jsx21(Switch, { checked: !!f.keepTogether, onChange: (v) => setFlow({ keepTogether: v || void 0 }) }) }),
-      /* @__PURE__ */ jsx21(Field, { label: "Keep with next", hint: "Stay on the same page as the start of the next block.", children: /* @__PURE__ */ jsx21(Switch, { checked: !!f.keepWithNext, onChange: (v) => setFlow({ keepWithNext: v || void 0 }) }) }),
-      /* @__PURE__ */ jsx21(Field, { label: "Break before", children: /* @__PURE__ */ jsx21(Segmented, { value: f.breakBefore ?? "auto", onChange: (v) => setFlow({ breakBefore: v === "auto" ? void 0 : "page" }), options: [{ value: "auto", label: "Auto" }, { value: "page", label: "New page" }] }) }),
-      /* @__PURE__ */ jsx21(Field, { label: "Break after", children: /* @__PURE__ */ jsx21(Segmented, { value: f.breakAfter ?? "auto", onChange: (v) => setFlow({ breakAfter: v === "auto" ? void 0 : "page" }), options: [{ value: "auto", label: "Auto" }, { value: "page", label: "New page" }] }) }),
-      /* @__PURE__ */ jsx21(Field, { label: "Min. lines before", children: /* @__PURE__ */ jsx21(NumberInput, { value: f.minOrphans ?? null, onChange: (v) => setFlow({ minOrphans: v ?? void 0 }), min: 1, max: 10, placeholder: "2" }) }),
-      /* @__PURE__ */ jsx21(Field, { label: "Min. lines after", children: /* @__PURE__ */ jsx21(NumberInput, { value: f.minWidows ?? null, onChange: (v) => setFlow({ minWidows: v ?? void 0 }), min: 1, max: 10, placeholder: "2" }) })
+    has("flow") ? /* @__PURE__ */ jsx22(Section, { title: "Page flow", defaultOpen: false, icon: "file-output", children: /* @__PURE__ */ jsxs21("div", { className: "bpe-prop-grid", children: [
+      /* @__PURE__ */ jsx22(Field, { label: "Keep together", hint: "Never split this block across pages (unless it is taller than a page).", children: /* @__PURE__ */ jsx22(Switch, { checked: !!f.keepTogether, onChange: (v) => setFlow({ keepTogether: v || void 0 }) }) }),
+      /* @__PURE__ */ jsx22(Field, { label: "Keep with next", hint: "Stay on the same page as the start of the next block.", children: /* @__PURE__ */ jsx22(Switch, { checked: !!f.keepWithNext, onChange: (v) => setFlow({ keepWithNext: v || void 0 }) }) }),
+      /* @__PURE__ */ jsx22(Field, { label: "Break before", children: /* @__PURE__ */ jsx22(Segmented, { value: f.breakBefore ?? "auto", onChange: (v) => setFlow({ breakBefore: v === "auto" ? void 0 : "page" }), options: [{ value: "auto", label: "Auto" }, { value: "page", label: "New page" }] }) }),
+      /* @__PURE__ */ jsx22(Field, { label: "Break after", children: /* @__PURE__ */ jsx22(Segmented, { value: f.breakAfter ?? "auto", onChange: (v) => setFlow({ breakAfter: v === "auto" ? void 0 : "page" }), options: [{ value: "auto", label: "Auto" }, { value: "page", label: "New page" }] }) }),
+      /* @__PURE__ */ jsx22(Field, { label: "Min. lines before", children: /* @__PURE__ */ jsx22(NumberInput, { value: f.minOrphans ?? null, onChange: (v) => setFlow({ minOrphans: v ?? void 0 }), min: 1, max: 10, placeholder: "2" }) }),
+      /* @__PURE__ */ jsx22(Field, { label: "Min. lines after", children: /* @__PURE__ */ jsx22(NumberInput, { value: f.minWidows ?? null, onChange: (v) => setFlow({ minWidows: v ?? void 0 }), min: 1, max: 10, placeholder: "2" }) })
     ] }) }) : null
   ] });
 }
 
 // src/inspector/NodeInspector.tsx
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 function scopeVarsFor(entry, session) {
   const chain = ancestors2(session.store.index(), entry.node.id);
-  const root = createSchemaScope5(session.dataSources);
+  const root = createSchemaScope7(session.dataSources);
   let vars = {};
   let scope = root;
   for (const e of chain) {
@@ -4376,8 +4842,8 @@ function NodeInspector({ entry, actions }) {
   const def = session.registry.get(node.type);
   const theme = session.activeTheme;
   const textStyles = Object.keys(session.store.template.styles.text);
-  const scopeVars = useMemo7(() => scopeVarsFor(entry, session), [entry, session]);
-  const props = useMemo7(() => ({ ...def ? typeof def.defaultProps === "function" ? def.defaultProps() : def.defaultProps : {}, ...node.props }), [def, node.props]);
+  const scopeVars = useMemo8(() => scopeVarsFor(entry, session), [entry, session]);
+  const props = useMemo8(() => ({ ...def ? typeof def.defaultProps === "function" ? def.defaultProps() : def.defaultProps : {}, ...node.props }), [def, node.props]);
   const setProp = (path, value, label2 = "Edit properties") => session.store.dispatch({ type: "setProp", id: node.id, path, value }, { label: label2, mergeKey: `prop:${node.id}:${path}` });
   const ctx = {
     dataSources: session.dataSources,
@@ -4391,53 +4857,53 @@ function NodeInspector({ entry, actions }) {
   };
   const label = nodeLabel(session, node);
   const issues = session.ui.get().issues.filter((i) => i.nodeId === node.id);
-  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
-    /* @__PURE__ */ jsxs21("div", { className: "bpe-inspector__header", children: [
-      /* @__PURE__ */ jsx22("span", { className: "bpe-inspector__icon", children: /* @__PURE__ */ jsx22(Icon, { name: def?.icon ?? "box" }) }),
-      /* @__PURE__ */ jsxs21("div", { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx22("div", { className: "bpe-inspector__title", title: label, children: label }),
-        /* @__PURE__ */ jsxs21("div", { className: "bpe-inspector__subtitle", children: [
+  return /* @__PURE__ */ jsxs22(Fragment5, { children: [
+    /* @__PURE__ */ jsxs22("div", { className: "bpe-inspector__header", children: [
+      /* @__PURE__ */ jsx23("span", { className: "bpe-inspector__icon", children: /* @__PURE__ */ jsx23(Icon, { name: def?.icon ?? "box" }) }),
+      /* @__PURE__ */ jsxs22("div", { style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx23("div", { className: "bpe-inspector__title", title: label, children: label }),
+        /* @__PURE__ */ jsxs22("div", { className: "bpe-inspector__subtitle", children: [
           def?.name ?? node.type,
           def?.license && def.license !== "community" ? ` \xB7 ${def.license}` : ""
         ] })
       ] }),
-      /* @__PURE__ */ jsxs21("div", { className: "bpe-inspector__actions", children: [
-        /* @__PURE__ */ jsx22(Button, { size: "sm", variant: "ghost", icon: node.locked ? "lock" : "unlock", tooltip: node.locked ? "Unlock" : "Lock", onClick: () => actions.toggleLock() }),
-        node.type !== "column" ? /* @__PURE__ */ jsx22(Button, { size: "sm", variant: "ghost", icon: "trash", tooltip: "Delete", onClick: () => actions.deleteSelection(), disabled: !!node.locked }) : null
+      /* @__PURE__ */ jsxs22("div", { className: "bpe-inspector__actions", children: [
+        /* @__PURE__ */ jsx23(Button, { size: "sm", variant: "ghost", icon: node.locked ? "lock" : "unlock", tooltip: node.locked ? "Unlock" : "Lock", onClick: () => actions.toggleLock() }),
+        node.type !== "column" ? /* @__PURE__ */ jsx23(Button, { size: "sm", variant: "ghost", icon: "trash", tooltip: "Delete", onClick: () => actions.deleteSelection(), disabled: !!node.locked }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsxs21("div", { className: "bpe-inspector__body", children: [
-      issues.length ? /* @__PURE__ */ jsx22("div", { style: { padding: "8px 12px 0" }, children: issues.map((i, k) => /* @__PURE__ */ jsxs21("div", { className: `bpe-issue bpe-issue--${i.severity}`, style: { padding: "4px 0" }, children: [
-        /* @__PURE__ */ jsx22(Icon, { name: i.severity === "error" ? "alert-circle" : i.severity === "warning" ? "alert-triangle" : "info" }),
-        /* @__PURE__ */ jsx22("span", { children: i.message })
+    /* @__PURE__ */ jsxs22("div", { className: "bpe-inspector__body", children: [
+      issues.length ? /* @__PURE__ */ jsx23("div", { style: { padding: "8px 12px 0" }, children: issues.map((i, k) => /* @__PURE__ */ jsxs22("div", { className: `bpe-issue bpe-issue--${i.severity}`, style: { padding: "4px 0" }, children: [
+        /* @__PURE__ */ jsx23(Icon, { name: i.severity === "error" ? "alert-circle" : i.severity === "warning" ? "alert-triangle" : "info" }),
+        /* @__PURE__ */ jsx23("span", { children: i.message })
       ] }, k)) }) : null,
-      !def ? /* @__PURE__ */ jsxs21("div", { className: "bpe-empty", children: [
-        /* @__PURE__ */ jsx22(Icon, { name: "alert-triangle" }),
-        /* @__PURE__ */ jsxs21("div", { className: "bpe-empty__title", children: [
+      !def ? /* @__PURE__ */ jsxs22("div", { className: "bpe-empty", children: [
+        /* @__PURE__ */ jsx23(Icon, { name: "alert-triangle" }),
+        /* @__PURE__ */ jsxs22("div", { className: "bpe-empty__title", children: [
           "Unknown block \u201C",
           node.type,
           "\u201D"
         ] }),
         "This block is not registered in this editor. Its settings are preserved."
       ] }) : null,
-      node.type === "row" ? /* @__PURE__ */ jsx22(Section, { title: "Layout", children: /* @__PURE__ */ jsx22("div", { className: "bpe-prop-grid", children: /* @__PURE__ */ jsx22(Field, { label: "Columns", stacked: true, children: /* @__PURE__ */ jsx22("div", { className: "bpe-layouts__grid", style: { width: "100%" }, children: ROW_LAYOUTS2.map((l) => /* @__PURE__ */ jsxs21("button", { type: "button", className: "bpe-layout-item", "aria-pressed": JSON.stringify(l.layout) === JSON.stringify(node.props.layout), style: JSON.stringify(l.layout) === JSON.stringify(node.props.layout) ? { borderColor: "var(--bpe-accent)", background: "var(--bpe-accent-soft)" } : void 0, onClick: () => session.store.dispatch({ type: "setRowLayout", id: node.id, layout: l.layout }), children: [
-        /* @__PURE__ */ jsx22("div", { className: "bpe-layout-item__cols", style: { gridTemplateColumns: l.layout.map((c) => `${c}fr`).join(" ") }, children: l.layout.map((_, i) => /* @__PURE__ */ jsx22("div", { className: "bpe-layout-item__col" }, i)) }),
-        /* @__PURE__ */ jsx22("span", { className: "bpe-layout-item__name", children: l.label })
+      node.type === "row" ? /* @__PURE__ */ jsx23(Section, { title: "Layout", children: /* @__PURE__ */ jsx23("div", { className: "bpe-prop-grid", children: /* @__PURE__ */ jsx23(Field, { label: "Columns", stacked: true, children: /* @__PURE__ */ jsx23("div", { className: "bpe-layouts__grid", style: { width: "100%" }, children: ROW_LAYOUTS2.map((l) => /* @__PURE__ */ jsxs22("button", { type: "button", className: "bpe-layout-item", "aria-pressed": JSON.stringify(l.layout) === JSON.stringify(node.props.layout), style: JSON.stringify(l.layout) === JSON.stringify(node.props.layout) ? { borderColor: "var(--bpe-accent)", background: "var(--bpe-accent-soft)" } : void 0, onClick: () => session.store.dispatch({ type: "setRowLayout", id: node.id, layout: l.layout }), children: [
+        /* @__PURE__ */ jsx23("div", { className: "bpe-layout-item__cols", style: { gridTemplateColumns: l.layout.map((c) => `${c}fr`).join(" ") }, children: l.layout.map((_, i) => /* @__PURE__ */ jsx23("div", { className: "bpe-layout-item__col" }, i)) }),
+        /* @__PURE__ */ jsx23("span", { className: "bpe-layout-item__name", children: l.label })
       ] }, l.id)) }) }) }) }) : null,
-      node.type === "column" ? /* @__PURE__ */ jsx22(Section, { title: "Column", children: /* @__PURE__ */ jsxs21("div", { className: "bpe-prop-grid", children: [
-        /* @__PURE__ */ jsx22(Field, { label: "Width", hint: "Twelfths of the row. Change the row layout to resize columns.", children: /* @__PURE__ */ jsxs21(Badge, { children: [
+      node.type === "column" ? /* @__PURE__ */ jsx23(Section, { title: "Column", children: /* @__PURE__ */ jsxs22("div", { className: "bpe-prop-grid", children: [
+        /* @__PURE__ */ jsx23(Field, { label: "Width", hint: "Twelfths of the row. Change the row layout to resize columns.", children: /* @__PURE__ */ jsxs22(Badge, { children: [
           String(node.props.span),
           " / 12"
         ] }) }),
-        /* @__PURE__ */ jsx22(Field, { label: "Row", children: /* @__PURE__ */ jsx22(Button, { size: "sm", onClick: () => actions.selectParent(), children: "Select row" }) })
+        /* @__PURE__ */ jsx23(Field, { label: "Row", children: /* @__PURE__ */ jsx23(Button, { size: "sm", onClick: () => actions.selectParent(), children: "Select row" }) })
       ] }) }) : null,
       (def?.inspector ?? []).map((section, si) => {
         if (section.when && !section.when(props)) return null;
         const fields = section.fields.filter((f) => !f.when || f.when(props));
         if (!fields.length) return null;
-        return /* @__PURE__ */ jsx22(Section, { title: section.title, defaultOpen: !section.collapsed, children: /* @__PURE__ */ jsx22("div", { className: "bpe-prop-grid", children: fields.map((f) => /* @__PURE__ */ jsx22(FieldRenderer, { field: f, value: getPath(props, f.prop), onChange: (v) => setProp(f.prop, v), ctx }, f.prop)) }) }, si);
+        return /* @__PURE__ */ jsx23(Section, { title: section.title, defaultOpen: !section.collapsed, children: /* @__PURE__ */ jsx23("div", { className: "bpe-prop-grid", children: fields.map((f) => /* @__PURE__ */ jsx23(FieldRenderer, { field: f, value: getPath(props, f.prop), onChange: (v) => setProp(f.prop, v), ctx }, f.prop)) }) }, si);
       }),
-      def ? /* @__PURE__ */ jsx22(
+      def ? /* @__PURE__ */ jsx23(
         StyleGroups,
         {
           node,
@@ -4449,22 +4915,22 @@ function NodeInspector({ entry, actions }) {
           setFlow: (patch) => session.store.dispatch({ type: "setFlow", id: node.id, patch }, { label: "Edit page flow" })
         }
       ) : null,
-      node.type !== "column" ? /* @__PURE__ */ jsx22(Section, { title: "Visibility", defaultOpen: !!node.visibleWhen, icon: "eye", children: /* @__PURE__ */ jsx22("div", { className: "bpe-prop-grid", children: /* @__PURE__ */ jsx22(Field, { label: "Show when", stacked: true, hint: "Leave empty to always show this block.", children: /* @__PURE__ */ jsx22(ConditionBuilder, { value: node.visibleWhen, onChange: (v) => session.store.dispatch({ type: "setVisibleWhen", id: node.id, condition: v }, { label: "Edit visibility" }), dataSources: session.dataSources, scopeVars, allowExpression: features.expressions }) }) }) }) : null,
-      /* @__PURE__ */ jsx22(Section, { title: "Advanced", defaultOpen: false, icon: "settings", children: /* @__PURE__ */ jsxs21("div", { className: "bpe-prop-grid", children: [
-        /* @__PURE__ */ jsx22(Field, { label: "Name", hint: "Shown in the layers panel and breadcrumb.", children: /* @__PURE__ */ jsx22(TextInput, { value: node.name ?? "", onChange: (v) => session.store.dispatch({ type: "setName", id: node.id, name: v || void 0 }), lazy: true, placeholder: def?.name }) }),
-        /* @__PURE__ */ jsx22(Field, { label: "Locked", children: /* @__PURE__ */ jsx22(Switch, { checked: !!node.locked, onChange: (v) => session.store.dispatch({ type: "setLocked", id: node.id, locked: v }) }) }),
-        /* @__PURE__ */ jsx22(Field, { label: "ID", children: /* @__PURE__ */ jsx22("code", { className: "bpe-mono bpe-muted", style: { fontSize: 10 }, children: node.id }) }),
-        /* @__PURE__ */ jsx22(Field, { label: "Type", children: /* @__PURE__ */ jsx22("code", { className: "bpe-mono bpe-muted", style: { fontSize: 10 }, children: node.type }) }),
-        node.type !== "section" && node.type !== "column" ? /* @__PURE__ */ jsx22(Field, { label: "Wrap in", children: /* @__PURE__ */ jsx22(Segmented, { value: "", onChange: (v) => actions.wrapSelectionIn(v), options: [{ value: "card", label: "Card" }, { value: "keepTogether", label: "Keep" }, { value: "conditional", label: "If" }] }) }) : null
+      node.type !== "column" ? /* @__PURE__ */ jsx23(Section, { title: "Visibility", defaultOpen: !!node.visibleWhen, icon: "eye", children: /* @__PURE__ */ jsx23("div", { className: "bpe-prop-grid", children: /* @__PURE__ */ jsx23(Field, { label: "Show when", stacked: true, hint: "Leave empty to always show this block.", children: /* @__PURE__ */ jsx23(ConditionBuilder, { value: node.visibleWhen, onChange: (v) => session.store.dispatch({ type: "setVisibleWhen", id: node.id, condition: v }, { label: "Edit visibility" }), dataSources: session.dataSources, scopeVars, allowExpression: features.expressions }) }) }) }) : null,
+      /* @__PURE__ */ jsx23(Section, { title: "Advanced", defaultOpen: false, icon: "settings", children: /* @__PURE__ */ jsxs22("div", { className: "bpe-prop-grid", children: [
+        /* @__PURE__ */ jsx23(Field, { label: "Name", hint: "Shown in the layers panel and breadcrumb.", children: /* @__PURE__ */ jsx23(TextInput, { value: node.name ?? "", onChange: (v) => session.store.dispatch({ type: "setName", id: node.id, name: v || void 0 }), lazy: true, placeholder: def?.name }) }),
+        /* @__PURE__ */ jsx23(Field, { label: "Locked", children: /* @__PURE__ */ jsx23(Switch, { checked: !!node.locked, onChange: (v) => session.store.dispatch({ type: "setLocked", id: node.id, locked: v }) }) }),
+        /* @__PURE__ */ jsx23(Field, { label: "ID", children: /* @__PURE__ */ jsx23("code", { className: "bpe-mono bpe-muted", style: { fontSize: 10 }, children: node.id }) }),
+        /* @__PURE__ */ jsx23(Field, { label: "Type", children: /* @__PURE__ */ jsx23("code", { className: "bpe-mono bpe-muted", style: { fontSize: 10 }, children: node.type }) }),
+        node.type !== "section" && node.type !== "column" ? /* @__PURE__ */ jsx23(Field, { label: "Wrap in", children: /* @__PURE__ */ jsx23(Segmented, { value: "", onChange: (v) => actions.wrapSelectionIn(v), options: [{ value: "card", label: "Card" }, { value: "keepTogether", label: "Keep" }, { value: "conditional", label: "If" }] }) }) : null
       ] }) })
     ] })
   ] });
 }
 
 // src/inspector/DocumentInspector.tsx
-import { useState as useState16 } from "react";
+import { useState as useState18 } from "react";
 import { PAGE_SIZES_MM, textStyleLabel as textStyleLabel3 } from "@broadpaper/core";
-import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 var SIZE_OPTIONS = [...Object.keys(PAGE_SIZES_MM).map((k) => ({ value: k, label: `${k} (${PAGE_SIZES_MM[k].width} \xD7 ${PAGE_SIZES_MM[k].height} mm)` })), { value: "custom", label: "Custom" }];
 function DocumentInspector() {
   const session = useSession();
@@ -4474,67 +4940,67 @@ function DocumentInspector() {
   const page = template.page;
   const setPage = (patch, label = "Page settings") => session.store.dispatch({ type: "setPage", patch }, { label, mergeKey: "page" });
   const sizeName = typeof page.size === "string" ? page.size : "custom";
-  const [editingStyle, setEditingStyle] = useState16(null);
-  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
-    /* @__PURE__ */ jsxs22("div", { className: "bpe-inspector__header", children: [
-      /* @__PURE__ */ jsx23("span", { className: "bpe-inspector__icon", children: /* @__PURE__ */ jsx23(Icon, { name: "file-text" }) }),
-      /* @__PURE__ */ jsxs22("div", { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx23("div", { className: "bpe-inspector__title", children: "Document" }),
-        /* @__PURE__ */ jsx23("div", { className: "bpe-inspector__subtitle", children: "Page, styles and settings" })
+  const [editingStyle, setEditingStyle] = useState18(null);
+  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
+    /* @__PURE__ */ jsxs23("div", { className: "bpe-inspector__header", children: [
+      /* @__PURE__ */ jsx24("span", { className: "bpe-inspector__icon", children: /* @__PURE__ */ jsx24(Icon, { name: "file-text" }) }),
+      /* @__PURE__ */ jsxs23("div", { style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx24("div", { className: "bpe-inspector__title", children: "Document" }),
+        /* @__PURE__ */ jsx24("div", { className: "bpe-inspector__subtitle", children: "Page, styles and settings" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs22("div", { className: "bpe-inspector__body", children: [
-      features.pageSettings ? /* @__PURE__ */ jsx23(Section, { title: "Page", icon: "layout", children: /* @__PURE__ */ jsxs22("div", { className: "bpe-prop-grid", children: [
-        /* @__PURE__ */ jsx23(Field, { label: "Size", children: /* @__PURE__ */ jsx23(Select, { value: sizeName, onChange: (v) => setPage({ size: v === "custom" ? { width: 210, height: 297 } : v }), options: SIZE_OPTIONS }) }),
-        sizeName === "custom" && typeof page.size === "object" ? /* @__PURE__ */ jsxs22(Fragment6, { children: [
-          /* @__PURE__ */ jsx23(Field, { label: "Width", children: /* @__PURE__ */ jsx23(NumberInput, { value: page.size.width, onChange: (v) => setPage({ size: { width: v ?? 210, height: page.size.height } }), min: 50, max: 2e3, unit: "mm" }) }),
-          /* @__PURE__ */ jsx23(Field, { label: "Height", children: /* @__PURE__ */ jsx23(NumberInput, { value: page.size.height, onChange: (v) => setPage({ size: { width: page.size.width, height: v ?? 297 } }), min: 50, max: 2e3, unit: "mm" }) })
+    /* @__PURE__ */ jsxs23("div", { className: "bpe-inspector__body", children: [
+      features.pageSettings ? /* @__PURE__ */ jsx24(Section, { title: "Page", icon: "layout", children: /* @__PURE__ */ jsxs23("div", { className: "bpe-prop-grid", children: [
+        /* @__PURE__ */ jsx24(Field, { label: "Size", children: /* @__PURE__ */ jsx24(Select, { value: sizeName, onChange: (v) => setPage({ size: v === "custom" ? { width: 210, height: 297 } : v }), options: SIZE_OPTIONS }) }),
+        sizeName === "custom" && typeof page.size === "object" ? /* @__PURE__ */ jsxs23(Fragment6, { children: [
+          /* @__PURE__ */ jsx24(Field, { label: "Width", children: /* @__PURE__ */ jsx24(NumberInput, { value: page.size.width, onChange: (v) => setPage({ size: { width: v ?? 210, height: page.size.height } }), min: 50, max: 2e3, unit: "mm" }) }),
+          /* @__PURE__ */ jsx24(Field, { label: "Height", children: /* @__PURE__ */ jsx24(NumberInput, { value: page.size.height, onChange: (v) => setPage({ size: { width: page.size.width, height: v ?? 297 } }), min: 50, max: 2e3, unit: "mm" }) })
         ] }) : null,
-        /* @__PURE__ */ jsx23(Field, { label: "Orientation", children: /* @__PURE__ */ jsx23(Segmented, { value: page.orientation, onChange: (v) => setPage({ orientation: v }), options: [{ value: "portrait", label: "Portrait", icon: "rectangle-vertical" }, { value: "landscape", label: "Landscape", icon: "rectangle-horizontal" }] }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Margins", stacked: true, children: /* @__PURE__ */ jsxs22("div", { style: { width: "100%" }, children: [
-          /* @__PURE__ */ jsx23("div", { className: "bpe-spacing-grid", children: ["top", "right", "bottom", "left"].map((s) => /* @__PURE__ */ jsx23(NumberInput, { value: page.margins[s], onChange: (v) => setPage({ margins: { ...page.margins, [s]: v ?? 0 } }), min: 0, max: 80, "aria-label": `${s} margin` }, s)) }),
-          /* @__PURE__ */ jsx23("div", { className: "bpe-spacing-grid", children: ["top", "right", "bottom", "left"].map((s) => /* @__PURE__ */ jsx23("div", { className: "bpe-spacing-grid__lbl", children: s }, s)) }),
-          /* @__PURE__ */ jsx23("div", { className: "bpe-field__hint", children: "Millimetres" })
+        /* @__PURE__ */ jsx24(Field, { label: "Orientation", children: /* @__PURE__ */ jsx24(Segmented, { value: page.orientation, onChange: (v) => setPage({ orientation: v }), options: [{ value: "portrait", label: "Portrait", icon: "rectangle-vertical" }, { value: "landscape", label: "Landscape", icon: "rectangle-horizontal" }] }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Margins", stacked: true, children: /* @__PURE__ */ jsxs23("div", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx24("div", { className: "bpe-spacing-grid", children: ["top", "right", "bottom", "left"].map((s) => /* @__PURE__ */ jsx24(NumberInput, { value: page.margins[s], onChange: (v) => setPage({ margins: { ...page.margins, [s]: v ?? 0 } }), min: 0, max: 80, "aria-label": `${s} margin` }, s)) }),
+          /* @__PURE__ */ jsx24("div", { className: "bpe-spacing-grid", children: ["top", "right", "bottom", "left"].map((s) => /* @__PURE__ */ jsx24("div", { className: "bpe-spacing-grid__lbl", children: s }, s)) }),
+          /* @__PURE__ */ jsx24("div", { className: "bpe-field__hint", children: "Millimetres" })
         ] }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Background", children: /* @__PURE__ */ jsx23(ColorField, { value: page.background, onChange: (v) => setPage({ background: v }), theme, placeholder: "White" }) })
+        /* @__PURE__ */ jsx24(Field, { label: "Background", children: /* @__PURE__ */ jsx24(ColorField, { value: page.background, onChange: (v) => setPage({ background: v }), theme, placeholder: "White" }) })
       ] }) }) : null,
-      features.headerFooter ? /* @__PURE__ */ jsx23(Section, { title: "Header & footer", icon: "panel-top", children: /* @__PURE__ */ jsxs22("div", { className: "bpe-prop-grid", children: [
-        /* @__PURE__ */ jsx23(Field, { label: "Header height", children: /* @__PURE__ */ jsx23(NumberInput, { value: page.header.height, onChange: (v) => setPage({ header: { ...page.header, height: v ?? 0 } }), min: 0, max: 100, unit: "mm" }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Footer height", children: /* @__PURE__ */ jsx23(NumberInput, { value: page.footer.height, onChange: (v) => setPage({ footer: { ...page.footer, height: v ?? 0 } }), min: 0, max: 100, unit: "mm" }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "First page header", hint: "Use a different header on page 1 (e.g. a cover).", children: /* @__PURE__ */ jsx23(Switch, { checked: page.header.differentFirstPage, onChange: (v) => session.store.dispatch({ type: "setRegionFirstPage", region: "header", enabled: v }) }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "First page footer", children: /* @__PURE__ */ jsx23(Switch, { checked: page.footer.differentFirstPage, onChange: (v) => session.store.dispatch({ type: "setRegionFirstPage", region: "footer", enabled: v }) }) }),
-        /* @__PURE__ */ jsx23("div", { className: "bpe-field__hint", children: "Click inside the header or footer area on the canvas to edit its content. Use the \u201CPage number\u201D block for numbering." })
+      features.headerFooter ? /* @__PURE__ */ jsx24(Section, { title: "Header & footer", icon: "panel-top", children: /* @__PURE__ */ jsxs23("div", { className: "bpe-prop-grid", children: [
+        /* @__PURE__ */ jsx24(Field, { label: "Header height", children: /* @__PURE__ */ jsx24(NumberInput, { value: page.header.height, onChange: (v) => setPage({ header: { ...page.header, height: v ?? 0 } }), min: 0, max: 100, unit: "mm" }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Footer height", children: /* @__PURE__ */ jsx24(NumberInput, { value: page.footer.height, onChange: (v) => setPage({ footer: { ...page.footer, height: v ?? 0 } }), min: 0, max: 100, unit: "mm" }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "First page header", hint: "Use a different header on page 1 (e.g. a cover).", children: /* @__PURE__ */ jsx24(Switch, { checked: page.header.differentFirstPage, onChange: (v) => session.store.dispatch({ type: "setRegionFirstPage", region: "header", enabled: v }) }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "First page footer", children: /* @__PURE__ */ jsx24(Switch, { checked: page.footer.differentFirstPage, onChange: (v) => session.store.dispatch({ type: "setRegionFirstPage", region: "footer", enabled: v }) }) }),
+        /* @__PURE__ */ jsx24("div", { className: "bpe-field__hint", children: "Click inside the header or footer area on the canvas to edit its content. Use the \u201CPage number\u201D block for numbering." })
       ] }) }) : null,
-      features.documentStyles ? /* @__PURE__ */ jsx23(Section, { title: "Text styles", icon: "type", children: editingStyle ? /* @__PURE__ */ jsx23(TextStyleEditor, { id: editingStyle, style: template.styles.text[editingStyle] ?? {}, onBack: () => setEditingStyle(null), onChange: (patch) => session.store.dispatch({ type: "setTextStyle", id: editingStyle, patch }, { label: "Document styles", mergeKey: `textstyle:${editingStyle}` }) }) : /* @__PURE__ */ jsxs22("div", { children: [
-        Object.entries(template.styles.text).map(([id, s]) => /* @__PURE__ */ jsxs22("button", { type: "button", className: "bpe-doc-styles__item", onClick: () => setEditingStyle(id), children: [
-          /* @__PURE__ */ jsx23("span", { className: "bpe-doc-styles__sample", style: { fontWeight: s.fontWeight, fontSize: Math.min(16, Math.max(10, (s.fontSize ?? 11) * 0.7)), textTransform: s.textTransform }, children: textStyleLabel3(id) }),
-          /* @__PURE__ */ jsxs22("span", { className: "bpe-doc-styles__id", children: [
+      features.documentStyles ? /* @__PURE__ */ jsx24(Section, { title: "Text styles", icon: "type", children: editingStyle ? /* @__PURE__ */ jsx24(TextStyleEditor, { id: editingStyle, style: template.styles.text[editingStyle] ?? {}, onBack: () => setEditingStyle(null), onChange: (patch) => session.store.dispatch({ type: "setTextStyle", id: editingStyle, patch }, { label: "Document styles", mergeKey: `textstyle:${editingStyle}` }) }) : /* @__PURE__ */ jsxs23("div", { children: [
+        Object.entries(template.styles.text).map(([id, s]) => /* @__PURE__ */ jsxs23("button", { type: "button", className: "bpe-doc-styles__item", onClick: () => setEditingStyle(id), children: [
+          /* @__PURE__ */ jsx24("span", { className: "bpe-doc-styles__sample", style: { fontWeight: s.fontWeight, fontSize: Math.min(16, Math.max(10, (s.fontSize ?? 11) * 0.7)), textTransform: s.textTransform }, children: textStyleLabel3(id) }),
+          /* @__PURE__ */ jsxs23("span", { className: "bpe-doc-styles__id", children: [
             id,
             " \xB7 ",
             s.fontSize ?? "\u2013",
             "px"
           ] }),
-          /* @__PURE__ */ jsx23(Icon, { name: "chevron-right", size: 12 })
+          /* @__PURE__ */ jsx24(Icon, { name: "chevron-right", size: 12 })
         ] }, id)),
-        /* @__PURE__ */ jsx23("div", { className: "bpe-field__hint", style: { padding: "4px 12px 8px" }, children: "Changing a style updates every block that uses it." })
+        /* @__PURE__ */ jsx24("div", { className: "bpe-field__hint", style: { padding: "4px 12px 8px" }, children: "Changing a style updates every block that uses it." })
       ] }) }) : null,
-      features.documentStyles ? /* @__PURE__ */ jsx23(Section, { title: "Tables & cards", icon: "table", defaultOpen: false, children: /* @__PURE__ */ jsxs22("div", { className: "bpe-prop-grid", children: [
-        /* @__PURE__ */ jsx23(Field, { label: "Table lines", children: /* @__PURE__ */ jsx23(Select, { value: template.styles.table.borders ?? "horizontal", onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { table: { borders: v } } }), options: [{ value: "horizontal", label: "Horizontal" }, { value: "all", label: "Grid" }, { value: "outer", label: "Outer" }, { value: "none", label: "None" }] }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Header fill", children: /* @__PURE__ */ jsx23(ColorField, { value: template.styles.table.headerBackground, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { table: { headerBackground: v } } }), theme }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Zebra fill", children: /* @__PURE__ */ jsx23(ColorField, { value: template.styles.table.zebraBackground, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { table: { zebraBackground: v } } }), theme }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Table font", children: /* @__PURE__ */ jsx23(NumberInput, { value: template.styles.table.fontSize ?? null, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { table: { fontSize: v ?? void 0 } } }), min: 6, max: 20, unit: "px" }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Cell padding", children: /* @__PURE__ */ jsx23(NumberInput, { value: template.styles.table.cellPaddingY ?? null, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { table: { cellPaddingY: v ?? void 0 } } }), min: 0, max: 30, unit: "px" }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Card radius", children: /* @__PURE__ */ jsx23(NumberInput, { value: template.styles.card.borderRadius ?? null, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { card: { borderRadius: v ?? void 0 } } }), min: 0, max: 40, unit: "px" }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Card padding", children: /* @__PURE__ */ jsx23(NumberInput, { value: template.styles.card.padding ?? null, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { card: { padding: v ?? void 0 } } }), min: 0, max: 60, unit: "px" }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Card shadow", children: /* @__PURE__ */ jsx23(Switch, { checked: !!template.styles.card.shadow, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { card: { shadow: v } } }) }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Block gap", children: /* @__PURE__ */ jsx23(NumberInput, { value: template.styles.spacing.blockGap, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { spacing: { ...template.styles.spacing, blockGap: v ?? 8 } } }), min: 0, max: 60, unit: "px" }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Column gap", children: /* @__PURE__ */ jsx23(NumberInput, { value: template.styles.spacing.columnGap, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { spacing: { ...template.styles.spacing, columnGap: v ?? 16 } } }), min: 0, max: 80, unit: "px" }) })
+      features.documentStyles ? /* @__PURE__ */ jsx24(Section, { title: "Tables & cards", icon: "table", defaultOpen: false, children: /* @__PURE__ */ jsxs23("div", { className: "bpe-prop-grid", children: [
+        /* @__PURE__ */ jsx24(Field, { label: "Table lines", children: /* @__PURE__ */ jsx24(Select, { value: template.styles.table.borders ?? "horizontal", onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { table: { borders: v } } }), options: [{ value: "horizontal", label: "Horizontal" }, { value: "all", label: "Grid" }, { value: "outer", label: "Outer" }, { value: "none", label: "None" }] }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Header fill", children: /* @__PURE__ */ jsx24(ColorField, { value: template.styles.table.headerBackground, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { table: { headerBackground: v } } }), theme }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Zebra fill", children: /* @__PURE__ */ jsx24(ColorField, { value: template.styles.table.zebraBackground, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { table: { zebraBackground: v } } }), theme }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Table font", children: /* @__PURE__ */ jsx24(NumberInput, { value: template.styles.table.fontSize ?? null, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { table: { fontSize: v ?? void 0 } } }), min: 6, max: 20, unit: "px" }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Cell padding", children: /* @__PURE__ */ jsx24(NumberInput, { value: template.styles.table.cellPaddingY ?? null, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { table: { cellPaddingY: v ?? void 0 } } }), min: 0, max: 30, unit: "px" }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Card radius", children: /* @__PURE__ */ jsx24(NumberInput, { value: template.styles.card.borderRadius ?? null, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { card: { borderRadius: v ?? void 0 } } }), min: 0, max: 40, unit: "px" }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Card padding", children: /* @__PURE__ */ jsx24(NumberInput, { value: template.styles.card.padding ?? null, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { card: { padding: v ?? void 0 } } }), min: 0, max: 60, unit: "px" }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Card shadow", children: /* @__PURE__ */ jsx24(Switch, { checked: !!template.styles.card.shadow, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { card: { shadow: v } } }) }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Block gap", children: /* @__PURE__ */ jsx24(NumberInput, { value: template.styles.spacing.blockGap, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { spacing: { ...template.styles.spacing, blockGap: v ?? 8 } } }), min: 0, max: 60, unit: "px" }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Column gap", children: /* @__PURE__ */ jsx24(NumberInput, { value: template.styles.spacing.columnGap, onChange: (v) => session.store.dispatch({ type: "setDocumentStyles", patch: { spacing: { ...template.styles.spacing, columnGap: v ?? 16 } } }), min: 0, max: 80, unit: "px" }) })
       ] }) }) : null,
-      /* @__PURE__ */ jsx23(Section, { title: "Settings", icon: "settings", defaultOpen: false, children: /* @__PURE__ */ jsxs22("div", { className: "bpe-prop-grid", children: [
-        /* @__PURE__ */ jsx23(Field, { label: "Locale", hint: "Number and date formatting, e.g. en-GB, en-US, de-DE.", children: /* @__PURE__ */ jsx23(TextInput, { value: template.settings?.locale ?? "", onChange: (v) => session.store.dispatch({ type: "setSettings", patch: { locale: v || void 0 } }), lazy: true, placeholder: "en-GB" }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Currency", children: /* @__PURE__ */ jsx23(TextInput, { value: template.settings?.currency ?? "", onChange: (v) => session.store.dispatch({ type: "setSettings", patch: { currency: v.toUpperCase() || void 0 } }), lazy: true, placeholder: "GBP" }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Time zone", children: /* @__PURE__ */ jsx23(TextInput, { value: template.settings?.timeZone ?? "", onChange: (v) => session.store.dispatch({ type: "setSettings", patch: { timeZone: v || void 0 } }), lazy: true, placeholder: "Europe/London" }) }),
-        /* @__PURE__ */ jsx23(Field, { label: "Template ID", children: /* @__PURE__ */ jsx23("code", { className: "bpe-mono bpe-muted", style: { fontSize: 10 }, children: template.id }) })
+      /* @__PURE__ */ jsx24(Section, { title: "Settings", icon: "settings", defaultOpen: false, children: /* @__PURE__ */ jsxs23("div", { className: "bpe-prop-grid", children: [
+        /* @__PURE__ */ jsx24(Field, { label: "Locale", hint: "Number and date formatting, e.g. en-GB, en-US, de-DE.", children: /* @__PURE__ */ jsx24(TextInput, { value: template.settings?.locale ?? "", onChange: (v) => session.store.dispatch({ type: "setSettings", patch: { locale: v || void 0 } }), lazy: true, placeholder: "en-GB" }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Currency", children: /* @__PURE__ */ jsx24(TextInput, { value: template.settings?.currency ?? "", onChange: (v) => session.store.dispatch({ type: "setSettings", patch: { currency: v.toUpperCase() || void 0 } }), lazy: true, placeholder: "GBP" }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Time zone", children: /* @__PURE__ */ jsx24(TextInput, { value: template.settings?.timeZone ?? "", onChange: (v) => session.store.dispatch({ type: "setSettings", patch: { timeZone: v || void 0 } }), lazy: true, placeholder: "Europe/London" }) }),
+        /* @__PURE__ */ jsx24(Field, { label: "Template ID", children: /* @__PURE__ */ jsx24("code", { className: "bpe-mono bpe-muted", style: { fontSize: 10 }, children: template.id }) })
       ] }) })
     ] })
   ] });
@@ -4542,69 +5008,69 @@ function DocumentInspector() {
 function TextStyleEditor({ id, style, onChange, onBack }) {
   const session = useSession();
   const theme = session.activeTheme;
-  return /* @__PURE__ */ jsxs22("div", { className: "bpe-prop-grid", children: [
-    /* @__PURE__ */ jsxs22("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-      /* @__PURE__ */ jsx23(Button, { size: "sm", variant: "ghost", icon: "chevron-right", style: { transform: "rotate(180deg)" }, onClick: onBack, tooltip: "Back" }),
-      /* @__PURE__ */ jsx23("strong", { children: id })
+  return /* @__PURE__ */ jsxs23("div", { className: "bpe-prop-grid", children: [
+    /* @__PURE__ */ jsxs23("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+      /* @__PURE__ */ jsx24(Button, { size: "sm", variant: "ghost", icon: "chevron-right", style: { transform: "rotate(180deg)" }, onClick: onBack, tooltip: "Back" }),
+      /* @__PURE__ */ jsx24("strong", { children: id })
     ] }),
-    /* @__PURE__ */ jsx23(Field, { label: "Font", children: /* @__PURE__ */ jsx23(Select, { value: style.fontFamily ?? "", onChange: (v) => onChange({ fontFamily: v || void 0 }), placeholder: "Theme body font", options: [{ value: "$typography.headingFont", label: "Theme heading font" }, { value: "$typography.bodyFont", label: "Theme body font" }, ...(theme.fonts ?? []).map((f) => ({ value: f.family, label: f.family }))] }) }),
-    /* @__PURE__ */ jsx23(Field, { label: "Size", children: /* @__PURE__ */ jsx23(NumberInput, { value: style.fontSize ?? null, onChange: (v) => onChange({ fontSize: v ?? void 0 }), min: 4, max: 120, unit: "px" }) }),
-    /* @__PURE__ */ jsx23(Field, { label: "Weight", children: /* @__PURE__ */ jsx23(Select, { value: style.fontWeight === void 0 ? "" : String(style.fontWeight), onChange: (v) => onChange({ fontWeight: v ? Number(v) : void 0 }), placeholder: "Regular", options: [300, 400, 500, 600, 700, 800].map((w) => ({ value: String(w), label: String(w) })) }) }),
-    /* @__PURE__ */ jsx23(Field, { label: "Line height", children: /* @__PURE__ */ jsx23(NumberInput, { value: style.lineHeight ?? null, onChange: (v) => onChange({ lineHeight: v ?? void 0 }), min: 0.8, max: 3, step: 0.05 }) }),
-    /* @__PURE__ */ jsx23(Field, { label: "Letter spacing", children: /* @__PURE__ */ jsx23(NumberInput, { value: style.letterSpacing ?? null, onChange: (v) => onChange({ letterSpacing: v ?? void 0 }), min: -0.1, max: 0.5, step: 0.01, unit: "em" }) }),
-    /* @__PURE__ */ jsx23(Field, { label: "Case", children: /* @__PURE__ */ jsx23(Segmented, { value: style.textTransform ?? "none", onChange: (v) => onChange({ textTransform: v === "none" ? void 0 : v }), options: [{ value: "none", label: "Aa" }, { value: "uppercase", label: "AA" }, { value: "capitalize", label: "Aa Bb" }] }) }),
-    /* @__PURE__ */ jsx23(Field, { label: "Colour", children: /* @__PURE__ */ jsx23(ColorField, { value: style.color, onChange: (v) => onChange({ color: v }), theme, allowTransparent: false, placeholder: "Theme text" }) }),
-    /* @__PURE__ */ jsx23(Field, { label: "Space above", children: /* @__PURE__ */ jsx23(NumberInput, { value: style.marginTop ?? null, onChange: (v) => onChange({ marginTop: v ?? void 0 }), min: 0, max: 100, unit: "px" }) }),
-    /* @__PURE__ */ jsx23(Field, { label: "Space below", children: /* @__PURE__ */ jsx23(NumberInput, { value: style.marginBottom ?? null, onChange: (v) => onChange({ marginBottom: v ?? void 0 }), min: 0, max: 100, unit: "px" }) }),
-    /* @__PURE__ */ jsx23(Field, { label: "Keep with next", children: /* @__PURE__ */ jsx23(Switch, { checked: !!style.keepWithNext, onChange: (v) => onChange({ keepWithNext: v || void 0 }) }) })
+    /* @__PURE__ */ jsx24(Field, { label: "Font", children: /* @__PURE__ */ jsx24(Select, { value: style.fontFamily ?? "", onChange: (v) => onChange({ fontFamily: v || void 0 }), placeholder: "Theme body font", options: fontOptions(theme, style.fontFamily) }) }),
+    /* @__PURE__ */ jsx24(Field, { label: "Size", children: /* @__PURE__ */ jsx24(NumberInput, { value: style.fontSize ?? null, onChange: (v) => onChange({ fontSize: v ?? void 0 }), min: 4, max: 120, unit: "px" }) }),
+    /* @__PURE__ */ jsx24(Field, { label: "Weight", children: /* @__PURE__ */ jsx24(Select, { value: style.fontWeight === void 0 ? "" : String(style.fontWeight), onChange: (v) => onChange({ fontWeight: v ? Number(v) : void 0 }), placeholder: "Regular", options: [300, 400, 500, 600, 700, 800].map((w) => ({ value: String(w), label: String(w) })) }) }),
+    /* @__PURE__ */ jsx24(Field, { label: "Line height", children: /* @__PURE__ */ jsx24(NumberInput, { value: style.lineHeight ?? null, onChange: (v) => onChange({ lineHeight: v ?? void 0 }), min: 0.8, max: 3, step: 0.05 }) }),
+    /* @__PURE__ */ jsx24(Field, { label: "Letter spacing", children: /* @__PURE__ */ jsx24(NumberInput, { value: style.letterSpacing ?? null, onChange: (v) => onChange({ letterSpacing: v ?? void 0 }), min: -0.1, max: 0.5, step: 0.01, unit: "em" }) }),
+    /* @__PURE__ */ jsx24(Field, { label: "Case", children: /* @__PURE__ */ jsx24(Segmented, { value: style.textTransform ?? "none", onChange: (v) => onChange({ textTransform: v === "none" ? void 0 : v }), options: [{ value: "none", label: "Aa" }, { value: "uppercase", label: "AA" }, { value: "capitalize", label: "Aa Bb" }] }) }),
+    /* @__PURE__ */ jsx24(Field, { label: "Colour", children: /* @__PURE__ */ jsx24(ColorField, { value: style.color, onChange: (v) => onChange({ color: v }), theme, allowTransparent: false, placeholder: "Theme text" }) }),
+    /* @__PURE__ */ jsx24(Field, { label: "Space above", children: /* @__PURE__ */ jsx24(NumberInput, { value: style.marginTop ?? null, onChange: (v) => onChange({ marginTop: v ?? void 0 }), min: 0, max: 100, unit: "px" }) }),
+    /* @__PURE__ */ jsx24(Field, { label: "Space below", children: /* @__PURE__ */ jsx24(NumberInput, { value: style.marginBottom ?? null, onChange: (v) => onChange({ marginBottom: v ?? void 0 }), min: 0, max: 100, unit: "px" }) }),
+    /* @__PURE__ */ jsx24(Field, { label: "Keep with next", children: /* @__PURE__ */ jsx24(Switch, { checked: !!style.keepWithNext, onChange: (v) => onChange({ keepWithNext: v || void 0 }) }) })
   ] });
 }
 
 // src/inspector/Inspector.tsx
-import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 function Inspector({ actions }) {
   const session = useSession();
   const selection = useEditorState((s) => s.selection);
   const mode = useEditorState((s) => s.mode);
   const entry = useNode(selection[0] ?? null);
   if (mode === "preview") {
-    return /* @__PURE__ */ jsx24("aside", { className: "bpe-inspector", "aria-label": "Properties", children: /* @__PURE__ */ jsxs23("div", { className: "bpe-empty", style: { marginTop: 40 }, children: [
-      /* @__PURE__ */ jsx24(Icon, { name: "eye" }),
-      /* @__PURE__ */ jsx24("div", { className: "bpe-empty__title", children: "Preview mode" }),
+    return /* @__PURE__ */ jsx25("aside", { className: "bpe-inspector", "aria-label": "Properties", children: /* @__PURE__ */ jsxs24("div", { className: "bpe-empty", style: { marginTop: 40 }, children: [
+      /* @__PURE__ */ jsx25(Icon, { name: "eye" }),
+      /* @__PURE__ */ jsx25("div", { className: "bpe-empty__title", children: "Preview mode" }),
       "Properties are hidden while previewing. Switch back to Design to edit.",
-      /* @__PURE__ */ jsx24(Button, { size: "sm", onClick: () => session.setMode("design"), style: { marginTop: 8 }, children: "Back to design" })
+      /* @__PURE__ */ jsx25(Button, { size: "sm", onClick: () => session.setMode("design"), style: { marginTop: 8 }, children: "Back to design" })
     ] }) });
   }
   if (selection.length > 1) {
-    return /* @__PURE__ */ jsxs23("aside", { className: "bpe-inspector", "aria-label": "Properties", children: [
-      /* @__PURE__ */ jsxs23("div", { className: "bpe-inspector__header", children: [
-        /* @__PURE__ */ jsx24("span", { className: "bpe-inspector__icon", children: /* @__PURE__ */ jsx24(Icon, { name: "square-stack" }) }),
-        /* @__PURE__ */ jsxs23("div", { children: [
-          /* @__PURE__ */ jsxs23("div", { className: "bpe-inspector__title", children: [
+    return /* @__PURE__ */ jsxs24("aside", { className: "bpe-inspector", "aria-label": "Properties", children: [
+      /* @__PURE__ */ jsxs24("div", { className: "bpe-inspector__header", children: [
+        /* @__PURE__ */ jsx25("span", { className: "bpe-inspector__icon", children: /* @__PURE__ */ jsx25(Icon, { name: "square-stack" }) }),
+        /* @__PURE__ */ jsxs24("div", { children: [
+          /* @__PURE__ */ jsxs24("div", { className: "bpe-inspector__title", children: [
             selection.length,
             " blocks selected"
           ] }),
-          /* @__PURE__ */ jsx24("div", { className: "bpe-inspector__subtitle", children: "Actions apply to all" })
+          /* @__PURE__ */ jsx25("div", { className: "bpe-inspector__subtitle", children: "Actions apply to all" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs23("div", { className: "bpe-prop-grid", children: [
-        /* @__PURE__ */ jsx24(Button, { icon: "copy", onClick: () => actions.duplicateSelection(), children: "Duplicate all" }),
-        /* @__PURE__ */ jsx24(Button, { icon: "panel-top", onClick: () => actions.wrapSelectionIn("card"), children: "Wrap in card" }),
-        /* @__PURE__ */ jsx24(Button, { icon: "link", onClick: () => actions.wrapSelectionIn("keepTogether"), children: "Keep together" }),
-        /* @__PURE__ */ jsx24(Button, { icon: "trash", variant: "danger", onClick: () => actions.deleteSelection(), children: "Delete all" })
+      /* @__PURE__ */ jsxs24("div", { className: "bpe-prop-grid", children: [
+        /* @__PURE__ */ jsx25(Button, { icon: "copy", onClick: () => actions.duplicateSelection(), children: "Duplicate all" }),
+        /* @__PURE__ */ jsx25(Button, { icon: "panel-top", onClick: () => actions.wrapSelectionIn("card"), children: "Wrap in card" }),
+        /* @__PURE__ */ jsx25(Button, { icon: "link", onClick: () => actions.wrapSelectionIn("keepTogether"), children: "Keep together" }),
+        /* @__PURE__ */ jsx25(Button, { icon: "trash", variant: "danger", onClick: () => actions.deleteSelection(), children: "Delete all" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsx24("aside", { className: "bpe-inspector", "aria-label": "Properties", children: entry ? /* @__PURE__ */ jsx24(NodeInspector, { entry, actions }, entry.node.id) : /* @__PURE__ */ jsx24(DocumentInspector, {}) });
+  return /* @__PURE__ */ jsx25("aside", { className: "bpe-inspector", "aria-label": "Properties", children: entry ? /* @__PURE__ */ jsx25(NodeInspector, { entry, actions }, entry.node.id) : /* @__PURE__ */ jsx25(DocumentInspector, {}) });
 }
 
 // src/ui/PanelResizer.tsx
-import { useRef as useRef8 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { useRef as useRef9 } from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function PanelResizer({ side, width, min, max, onChange, label }) {
-  const start = useRef8(null);
+  const start = useRef9(null);
   const clamp = (w) => Math.round(Math.min(max, Math.max(min, w)));
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: `bpe-resizer bpe-resizer--${side}`,
@@ -4642,7 +5108,7 @@ function PanelResizer({ side, width, min, max, onChange, label }) {
 
 // src/ui/Boundary.tsx
 import { Component } from "react";
-import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
 var Boundary = class extends Component {
   state = { error: null };
   static getDerivedStateFromError(error) {
@@ -4654,48 +5120,48 @@ var Boundary = class extends Component {
   render() {
     const { error } = this.state;
     if (!error) return this.props.children;
-    return /* @__PURE__ */ jsxs24("div", { className: "bpe-boundary", role: "alert", style: this.props.slot ? { gridArea: this.props.slot } : void 0, children: [
-      /* @__PURE__ */ jsx26(Icon, { name: "alert-triangle", size: 16 }),
-      /* @__PURE__ */ jsxs24("div", { className: "bpe-boundary__body", children: [
-        /* @__PURE__ */ jsxs24("div", { className: "bpe-boundary__title", children: [
+    return /* @__PURE__ */ jsxs25("div", { className: "bpe-boundary", role: "alert", style: this.props.slot ? { gridArea: this.props.slot } : void 0, children: [
+      /* @__PURE__ */ jsx27(Icon, { name: "alert-triangle", size: 16 }),
+      /* @__PURE__ */ jsxs25("div", { className: "bpe-boundary__body", children: [
+        /* @__PURE__ */ jsxs25("div", { className: "bpe-boundary__title", children: [
           this.props.area,
           " stopped"
         ] }),
-        /* @__PURE__ */ jsxs24("div", { className: "bpe-boundary__detail", children: [
+        /* @__PURE__ */ jsxs25("div", { className: "bpe-boundary__detail", children: [
           error.message || "Something went wrong.",
           " The rest of the designer, and your document, are unaffected."
         ] })
       ] }),
-      /* @__PURE__ */ jsx26(Button, { size: "sm", icon: "rotate-ccw", onClick: () => this.setState({ error: null }), children: "Try again" })
+      /* @__PURE__ */ jsx27(Button, { size: "sm", icon: "rotate-ccw", onClick: () => this.setState({ error: null }), children: "Try again" })
     ] });
   }
 };
 
 // src/ReportDesigner.tsx
-import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 var NARROW_BELOW = 820;
 function ReportDesignerRoot({ session }) {
-  const actions = useMemo8(() => createActions(session), [session]);
-  return /* @__PURE__ */ jsx27(SessionContext.Provider, { value: session, children: /* @__PURE__ */ jsx27(Shell, { actions }) });
+  const actions = useMemo9(() => createActions(session), [session]);
+  return /* @__PURE__ */ jsx28(SessionContext.Provider, { value: session, children: /* @__PURE__ */ jsx28(Shell, { actions }) });
 }
 function Shell({ actions }) {
   const options = useOptions();
-  const [portal, setPortal] = useState17(null);
+  const [portal, setPortal] = useState19(null);
   const session = useSession();
   const leftOpen = useUi((u) => u.leftOpen);
   const rightOpen = useUi((u) => u.rightOpen);
   const leftWidth = useUi((u) => u.leftWidth);
   const rightWidth = useUi((u) => u.rightWidth);
   const narrow = useUi((u) => u.narrow);
-  const rootRef = useRef9(null);
+  const rootRef = useRef10(null);
   const width = useElementWidth(rootRef);
   const isNarrow = width > 0 && width < NARROW_BELOW;
-  useEffect7(() => {
+  useEffect8(() => {
     if (isNarrow === narrow) return;
     session.ui.patch(isNarrow ? { narrow: true, leftOpen: false, rightOpen: false } : { narrow: false });
   }, [isNarrow, narrow, session]);
   const appearance = options.appearance === "system" ? typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : options.appearance ?? "light";
-  useEffect7(() => {
+  useEffect8(() => {
     const onKey = (e) => {
       const mod = e.metaKey || e.ctrlKey;
       const target = e.target;
@@ -4725,18 +5191,18 @@ function Shell({ actions }) {
     options.className
   ].filter(Boolean).join(" ");
   const scrim = narrow && (leftOpen || rightOpen);
-  return /* @__PURE__ */ jsx27(PortalContext.Provider, { value: portal, children: /* @__PURE__ */ jsxs25("div", { ref: rootRef, className: cls, "data-appearance": appearance, style: { "--bpe-panel-w": `${leftWidth}px`, "--bpe-inspector-w": `${rightWidth}px` }, children: [
-    /* @__PURE__ */ jsx27(Boundary, { area: "The toolbar", slot: "toolbar", children: /* @__PURE__ */ jsx27(Toolbar, { actions }) }),
-    leftOpen ? /* @__PURE__ */ jsxs25(Fragment7, { children: [
-      /* @__PURE__ */ jsx27(Boundary, { area: "The insert panel", slot: "left", children: /* @__PURE__ */ jsx27(LeftPanel, { actions }) }),
-      !narrow ? /* @__PURE__ */ jsx27(PanelResizer, { side: "left", width: leftWidth, min: 200, max: 420, label: "Resize the insert panel", onChange: (leftWidth2) => session.ui.patch({ leftWidth: leftWidth2 }) }) : null
-    ] }) : /* @__PURE__ */ jsx27("div", {}),
-    /* @__PURE__ */ jsx27(Boundary, { area: "The canvas", slot: "canvas", children: /* @__PURE__ */ jsx27(Canvas, { actions }) }),
-    rightOpen ? /* @__PURE__ */ jsxs25(Fragment7, { children: [
-      !narrow ? /* @__PURE__ */ jsx27(PanelResizer, { side: "right", width: rightWidth, min: 260, max: 560, label: "Resize the properties panel", onChange: (rightWidth2) => session.ui.patch({ rightWidth: rightWidth2 }) }) : null,
-      /* @__PURE__ */ jsx27(Boundary, { area: "The properties panel", slot: "right", children: /* @__PURE__ */ jsx27(Inspector, { actions }) })
-    ] }) : /* @__PURE__ */ jsx27("div", {}),
-    scrim ? /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(PortalContext.Provider, { value: portal, children: /* @__PURE__ */ jsxs26("div", { ref: rootRef, className: cls, "data-appearance": appearance, style: { "--bpe-panel-w": `${leftWidth}px`, "--bpe-inspector-w": `${rightWidth}px` }, children: [
+    /* @__PURE__ */ jsx28(Boundary, { area: "The toolbar", slot: "toolbar", children: /* @__PURE__ */ jsx28(Toolbar, { actions }) }),
+    leftOpen ? /* @__PURE__ */ jsxs26(Fragment7, { children: [
+      /* @__PURE__ */ jsx28(Boundary, { area: "The insert panel", slot: "left", children: /* @__PURE__ */ jsx28(LeftPanel, { actions }) }),
+      !narrow ? /* @__PURE__ */ jsx28(PanelResizer, { side: "left", width: leftWidth, min: 200, max: 420, label: "Resize the insert panel", onChange: (leftWidth2) => session.ui.patch({ leftWidth: leftWidth2 }) }) : null
+    ] }) : /* @__PURE__ */ jsx28("div", {}),
+    /* @__PURE__ */ jsx28(Boundary, { area: "The canvas", slot: "canvas", children: /* @__PURE__ */ jsx28(Canvas, { actions }) }),
+    rightOpen ? /* @__PURE__ */ jsxs26(Fragment7, { children: [
+      !narrow ? /* @__PURE__ */ jsx28(PanelResizer, { side: "right", width: rightWidth, min: 260, max: 560, label: "Resize the properties panel", onChange: (rightWidth2) => session.ui.patch({ rightWidth: rightWidth2 }) }) : null,
+      /* @__PURE__ */ jsx28(Boundary, { area: "The properties panel", slot: "right", children: /* @__PURE__ */ jsx28(Inspector, { actions }) })
+    ] }) : /* @__PURE__ */ jsx28("div", {}),
+    scrim ? /* @__PURE__ */ jsx28(
       "button",
       {
         type: "button",
@@ -4745,7 +5211,7 @@ function Shell({ actions }) {
         onClick: () => session.ui.patch({ leftOpen: false, rightOpen: false })
       }
     ) : null,
-    /* @__PURE__ */ jsx27("div", { className: "bpe-portal bpe-scope", "data-appearance": appearance, ref: setPortal })
+    /* @__PURE__ */ jsx28("div", { className: "bpe-portal bpe-scope", "data-appearance": appearance, ref: setPortal })
   ] }) });
 }
 
@@ -4940,7 +5406,11 @@ var EDITOR_CSS = `/* BroadPaper editor design tokens.
 .bpe-input--invalid { border-color: var(--bpe-danger) !important; }
 .bpe-textarea { height: auto; min-height: 56px; padding: 6px 8px; resize: vertical; line-height: 1.45; }
 .bpe-select { appearance: none; padding-right: 24px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; }
-.bpe-input-group { position: relative; display: flex; align-items: center; }
+/* \`width: 100%\`, because a flex container sizes to its content and this one holds
+   an input. Without it every field with a unit or a suffix \u2014 a width in \`%\`, a
+   size in \`px\` \u2014 shrank to about twenty characters and left the rest of the row
+   blank, while the plain inputs beside it filled. */
+.bpe-input-group { position: relative; display: flex; align-items: center; width: 100%; }
 .bpe-input-group .bpe-input { padding-right: 28px; }
 .bpe-input-group__suffix { position: absolute; right: 8px; font-size: var(--bpe-text-xs); color: var(--bpe-fg-faint); pointer-events: none; }
 .bpe-input-group__btn { position: absolute; right: 2px; top: 2px; }
@@ -5288,14 +5758,49 @@ var EDITOR_CSS = `/* BroadPaper editor design tokens.
 .bpe-binding__btn { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; height: var(--bpe-control-h); padding: 0 8px; border: 1px solid var(--bpe-border); border-radius: var(--bpe-radius); background: var(--bpe-bg); text-align: left; font-size: var(--bpe-text-sm); }
 .bpe-binding__btn:hover { border-color: var(--bpe-border-strong); }
 .bpe-binding__btn--empty { color: var(--bpe-fg-faint); }
+/* A value the document works out. Shown, named after the fields it reads, and not
+   editable where there is no expression editor to edit it with. */
+.bpe-binding__btn--locked { background: var(--bpe-bg-subtle); color: var(--bpe-fg-muted); cursor: default; }
+.bpe-binding__btn--locked:hover { border-color: var(--bpe-border); }
 .bpe-binding__btn svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--bpe-fg-muted); }
 .bpe-expr { font-family: var(--bpe-font-mono); font-size: 11px; }
 .bpe-picker { width: 300px; max-height: 380px; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
+/* Wider when it is holding the calculation builder, which is three controls on a
+   row plus a field name. At 300px every one of them truncated \u2014 "a total",
+   "Total of", "In\u2026" \u2014 so the panel read as an interface that had been broken
+   rather than one that was cramped. The field list on the other tab is a single
+   column and does not need it, but one width for the panel is better than a
+   popover that changes size when you change tab. */
+.bpe-picker--wide { width: 420px; max-height: 460px; }
 .bpe-picker__search { padding: 8px; border-bottom: 1px solid var(--bpe-border); }
 .bpe-picker__list { flex: 1; overflow-y: auto; padding: 4px; }
 .bpe-picker__foot { display: flex; gap: 6px; align-items: center; padding: 8px; border-top: 1px solid var(--bpe-border); }
 .bpe-picker__foot .bpe-input { flex: 1; }
 .bpe-picker__group { padding: 6px 6px 2px; font-size: var(--bpe-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bpe-fg-faint); }
+/* The value panel's two answers: a field, or a value worked out. Shorter than the
+   inspector's own tabs because these carry a word rather than a word and an icon. */
+.bpe-picker__tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--bpe-border); }
+.bpe-picker__tabs .bpe-tab { height: 28px; }
+
+/* The calculation builder. A column of rows, each reading as part of a sentence,
+   and every control allowed to shrink \u2014 the properties panel is resizable, so
+   anything in it can be squeezed and \`min-width: 0\` is what keeps the remove
+   button inside the panel rather than out through its \`overflow: hidden\`. */
+.bpe-calc { display: flex; flex-direction: column; gap: 10px; padding: 10px; min-width: 0; }
+/* A step is a labelled block, not a line of controls.
+   Three selects and a field name across one row is what made this unreadable:
+   every control shrank to its truncation point and the sentence the builder is
+   supposed to read as was unrecoverable from the abbreviations. */
+.bpe-calc__step { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; border: 1px solid var(--bpe-border); border-radius: var(--bpe-radius); background: var(--bpe-bg-subtle); }
+.bpe-calc__row { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.bpe-grow { flex: 1 1 auto; }
+.bpe-calc__lead { flex: 0 0 auto; font-size: var(--bpe-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bpe-fg-faint); }
+.bpe-calc__row .bpe-select { flex: 1 1 auto; min-width: 0; }
+.bpe-calc__term { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.bpe-calc__term .bpe-binding { width: 100%; }
+.bpe-calc__term .bpe-binding__btn { flex: 1 1 auto; min-width: 0; }
+.bpe-calc__term .bpe-input { width: 100%; }
+.bpe-calc__reads { margin: 2px 0 0; padding-top: 8px; border-top: 1px solid var(--bpe-border); font-size: var(--bpe-text-xs); color: var(--bpe-fg-muted); line-height: 1.5; }
 .bpe-cond { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
 .bpe-cond__rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; min-width: 0; padding: 6px; border: 1px solid var(--bpe-border); border-radius: var(--bpe-radius); background: var(--bpe-bg-subtle); }
 .bpe-cond__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
@@ -5307,6 +5812,17 @@ var EDITOR_CSS = `/* BroadPaper editor design tokens.
 .bpe-list-editor__head .bpe-truncate { flex: 1 1 0; min-width: 0; }
 .bpe-list-editor__item { min-width: 0; }
 .bpe-list-editor__body { padding: 6px 8px 8px; border-top: 1px solid var(--bpe-border); display: flex; flex-direction: column; gap: 6px; }
+/*
+ * Inside a list item, every field is stacked.
+ *
+ * The two-column field \u2014 a 96px label and the control beside it \u2014 is right in the
+ * panel and wrong one level in: the item is already indented and bordered, so the
+ * label column eats a third of what is left and the control ends in the middle of
+ * the row with the rest blank. Stacked gives the control the whole width, and it
+ * matches the fields in there that were already stacked because they needed it.
+ */
+.bpe-list-editor__body .bpe-field { grid-template-columns: 1fr; gap: 4px; }
+.bpe-list-editor__body .bpe-field__label { white-space: normal; overflow: visible; }
 .bpe-list-editor__drag { cursor: grab; color: var(--bpe-fg-faint); display: inline-flex; }
 .bpe-issue { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--bpe-radius-sm); background: transparent; text-align: left; font-size: var(--bpe-text-sm); color: var(--bpe-fg); }
 .bpe-issue:hover { background: var(--bpe-bg-muted); }