@pipelex/mthds-form 0.29.0 → 0.31.0

package/dist/generative/index.js

@@ -1,28 +1,30 @@
 "use client";
-import { cn, checkedAccentClass, focusOutlineClass, linkTextClass, selectedBorderClass, selectedFillClass, fieldControlClass, ResultRoot, ResultField, FieldRenderer, enumLabeler, useFieldPresentation, ToggleGroup, ToggleGroupItem, selectedFillStrongClass, Switch, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../chunk-RHX7LQRL.js';
+import { cn, headingClass, checkedAccentClass, focusOutlineClass, actionShadowClass, panelSurfaceClass, panelRaisedShadowClass, linkTextClass, selectedBorderClass, selectedFillClass, fieldControlClass, useResolveUrl, panelFlatShadowClass, ResultRoot, ResultField, FieldRenderer, enumLabeler, useFieldPresentation, ToggleGroup, ToggleGroupItem, selectedFillStrongClass, Switch, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, isThenable } from '../chunk-ENK5QTUK.js';
+import '../chunk-2UCH4AAO.js';
 import '../chunk-4VAO6BDE.js';
 export { seedInputs } from '../chunk-VH5CDQDR.js';
 import '../chunk-L23R3JNQ.js';
 import '../chunk-56WECFBD.js';
-import '../chunk-ZX52CQJ4.js';
-import '../chunk-GHVVULHY.js';
-import { isNativeValueNode, readDateContent, formatDateContent, isNativeHtmlNode, isNativeDateNode, isNativeCompositeNode } from '../chunk-QQK6Y55E.js';
-export { brandManifestSchema } from '../chunk-QFX332LE.js';
-import '../chunk-ZB4RYUKV.js';
-import '../chunk-FABY3DEY.js';
-import '../chunk-XCO6GTEC.js';
 import '../chunk-E6BIXJ6C.js';
 import '../chunk-XO5OENNF.js';
+import '../chunk-GHVVULHY.js';
+import { readImageContent, viewableUrl, readDateContent, isNativeValueNode, formatDateContent, isNativeHtmlNode, isNativeDateNode, isNativeCompositeNode } from '../chunk-QQK6Y55E.js';
+import { APP_STYLES } from '../chunk-UZNRJWN5.js';
+export { brandManifestSchema } from '../chunk-UZNRJWN5.js';
+import '../chunk-HVWE3TTC.js';
 import '../chunk-OD3VYXUY.js';
 import '../chunk-WYH56SOZ.js';
 import { hasOwnProp } from '../chunk-V3OV2XQT.js';
+import '../chunk-FABY3DEY.js';
+import '../chunk-XCO6GTEC.js';
 import '../chunk-GKV77RAS.js';
 import { defineSchema, defineCatalog, validateSpec, compileSpecStream } from '@json-render/core';
+export { createStateStore } from '@json-render/core';
 import { z } from 'zod';
-import * as React3 from 'react';
+import * as React4 from 'react';
 import { defineRegistry, useStateValue, useStateStore, useBoundProp, useFieldValidation, useRepeatScope, JSONUIProvider, Renderer } from '@json-render/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Send, Pencil, Zap, Lightbulb, Truck, Package, Briefcase, Bookmark, Flag, Shield, Info, AlertCircle, CheckCircle2, ListChecks, Layers, Tag, Phone, Mail, Paperclip, Upload, FileText, BarChart3, TrendingUp, Hash, Percent, Receipt, Coins, Banknote, Wallet, Gift, Ticket, Image, Camera, Music, Coffee, Utensils, Star, Heart, Accessibility, Baby, User, Users, Hourglass, Clock, Calendar, Moon, Sun, Leaf, Mountain, Globe, Landmark, Building2, Home, Hotel, Ship, Car, Train, Plane, Route, MapPin, Map as Map$1, Compass, Rocket, Sparkles } from 'lucide-react';
+import { Clock, ArrowRight, Send, Pencil, Zap, Lightbulb, Truck, Package, Briefcase, Bookmark, Flag, Shield, Info, AlertCircle, CheckCircle2, ListChecks, Layers, Tag, Phone, Mail, Paperclip, Upload, FileText, BarChart3, TrendingUp, Hash, Percent, Receipt, Coins, Banknote, Wallet, Gift, Ticket, Image, Camera, Music, Coffee, Utensils, Star, Heart, Accessibility, Baby, User, Users, Hourglass, Calendar, Moon, Sun, Leaf, Mountain, Globe, Landmark, Building2, Home, Hotel, Ship, Car, Train, Plane, Route, MapPin, Map as Map$1, Compass, Rocket, Sparkles, ChevronDown } from 'lucide-react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 var generativeSchema = defineSchema(
@@ -497,10 +499,13 @@ var components = {
   // ── The escape hatches and the bound equivalents (ours) ────────────────
   MthdsField: {
     props: z.object({
-      path: z.string()
+      path: z.string(),
+      // The page words the label and the line under it, as it words every other control.
+      label: z.string().nullable(),
+      hint: z.string().nullable()
     }),
     slots: [],
-    description: `The kernel's own control for ONE input, bound two-way at "path" (a /inputs path from the brief). Use it for every path the brief marks as delegated - a file, a date, a list, a structure you would rather not lay out - and for any scalar you would rather not style. It renders its own label and description. Inside a repeat, "path" is the item's field name relative to the item ("lines"), never an $item expression.`,
+    description: `The kernel's own control for ONE input, bound two-way at "path" (a /inputs path from the brief). Use it for every path the brief marks as delegated - a file, a date, a list, a structure you would rather not lay out - and for any scalar you would rather not style. It renders the descriptor's label and description unless the page words them: "label" replaces the label, "hint" the line under it. Inside a repeat, "path" is the item's field name relative to the item ("lines"), never an $item expression.`,
     example: { path: "/inputs/source" }
   },
   MthdsResult: {
@@ -515,11 +520,18 @@ var components = {
   DataTable: {
     props: z.object({
       rows: z.any(),
-      columns: z.array(z.object({ path: z.string(), label: z.string() })),
+      // A column says how its cells read, from the kind the brief states.
+      columns: z.array(
+        z.object({
+          path: z.string(),
+          label: z.string(),
+          format: z.enum(["text", "date", "number"]).nullable().optional()
+        })
+      ),
       caption: z.string().nullable()
     }),
     slots: [],
-    description: 'A table over a list of structures. "rows" MUST be { "$state": "/path/to/the/list" } (never inline rows); each column names a field of one item by its relative path ("label", "unit_price") and the header to show for it.',
+    description: 'A table over a list of structures. "rows" MUST be { "$state": "/path/to/the/list" } (never inline rows); each column names a field of one item by its relative path ("label", "unit_price"), the header to show for it, and how its cells read: "date" for a date path (written "9 Mar 2025"), "number" for a number path (digits grouped), "text" otherwise.',
     example: {
       rows: { $state: "/result/lines" },
       columns: [
@@ -549,6 +561,134 @@ var actions = {
 defineCatalog(generativeSchema, { components, actions });
 var generativeComponents = components;
 var generativeActions = actions;
+var FRAMES = ["page", "composer", "result"];
+var COMPOSER_COMPONENTS = ["Composer", "FieldGroup"];
+var RESULT_COMPONENTS = [
+  "ResultHeader",
+  "ProportionBar",
+  "Swatches",
+  "Picture",
+  "Fact",
+  "Detail",
+  "DateText",
+  "TextList"
+];
+var FRAME_COMPONENTS = [...COMPOSER_COMPONENTS, ...RESULT_COMPONENTS];
+var frameComponents = {
+  Composer: {
+    props: z.object({
+      headline: z.string(),
+      lede: z.string().nullable(),
+      runLabel: z.string(),
+      columns: z.enum(["1", "2"]).nullable(),
+      notes: z.array(z.string()).nullable()
+    }),
+    slots: ["default"],
+    events: ["press"],
+    description: `The composer: the page's headline (rendered as the h1) and one muted line under it, then a single raised panel holding its children - the inputs - in one column, or two columns side by side when "columns" is "2", and at the panel's foot the host's action row: how long a run takes, as the host knows it, and the one button that runs the method, worded by "runLabel". The action row stays on screen while a long panel scrolls. It is the control that runs the method: bind on.press to validateForm then run. "notes" are a few short lines set under the panel, each after a check mark, in two columns: what one run gives back, in a person's words.`,
+    example: {
+      headline: "A day-by-day plan for your trip",
+      lede: "Tell us who is going, where and when.",
+      runLabel: "Plan my trip",
+      columns: "2"
+    }
+  },
+  FieldGroup: {
+    props: z.object({ title: z.string().nullable() }),
+    slots: ["default"],
+    description: "A quiet group of inputs inside a panel: an optional small h2 title, then its children stacked with even spacing. No box, no rule: the panel around it is the surface.",
+    example: { title: "Where and when" }
+  },
+  ResultHeader: {
+    props: z.object({
+      eyebrow: z.string().nullable(),
+      title: z.string(),
+      subtitle: z.string().nullable()
+    }),
+    slots: [],
+    description: `The result's heading: a small eyebrow in the accent colour, the title (rendered as the h1) and one muted line under it, with the host's actions on the result (download, share) at the right. Text props may be read from the state with { "$state" } or { "$template" }.`,
+    example: {
+      eyebrow: "Your plan",
+      title: { $state: "/result/title" },
+      subtitle: { $template: "${/result/currency} ${/result/estimated_total} estimated" }
+    }
+  },
+  ProportionBar: {
+    props: z.object({
+      label: z.string(),
+      total: z.number().nullable(),
+      of: z.number().nullable(),
+      unit: z.string().nullable(),
+      items: z.array(z.any()).nullable(),
+      labelKey: z.string(),
+      valueKey: z.string()
+    }),
+    slots: [],
+    description: 'A labelled total over its parts, in a raised panel: the label and the total in large figures ("of" a ceiling when there is one), then one bar split in proportion to each part, and a legend naming each part with its amount. "items" is { "$state": ... } on a list of structures; "labelKey" and "valueKey" name the member of one item that labels it and the number that sizes it. "unit" is a currency or unit the state carries, read with { "$state" }.',
+    example: {
+      label: "Estimated cost",
+      total: { $state: "/result/estimated_total" },
+      unit: { $state: "/result/currency" },
+      items: { $state: "/result/costs" },
+      labelKey: "category",
+      valueKey: "amount"
+    }
+  },
+  Swatches: {
+    props: z.object({ colors: z.array(z.string()) }),
+    slots: [],
+    description: 'A row of colour swatches, each a small tile filled with the colour and its value written under it in mono. "colors" is a list of colour values, each read from a text path ({ "$state" }, or { "$item" } inside a repeat).',
+    example: { colors: [{ $item: "colors/primary" }, { $item: "colors/accent" }] }
+  },
+  Picture: {
+    props: z.object({
+      path: z.string(),
+      alt: z.string().nullable(),
+      aspect: z.enum(["16:9", "4:3", "1:1", "auto"]).nullable()
+    }),
+    slots: [],
+    description: 'A picture the run produced, shown whole and edge to edge in its column with a hairline border, cropped to "aspect" when one is set. "path" is an image path of the brief, literally ("/result/cover"), or relative to the item inside a repeat ("" for the item itself, when the repeat is over a list of images).',
+    example: { path: "/result/cover", alt: "The cover", aspect: "16:9" }
+  },
+  Fact: {
+    props: z.object({
+      label: z.string(),
+      value: z.any(),
+      detail: z.string().nullable()
+    }),
+    slots: [],
+    description: 'One fact as a small boxed tile: a muted label, the value under it, and an optional muted detail. Several in a Grid make a band of facts. "value" is a scalar read with { "$state" } or { "$template" }.',
+    example: { label: "Order number", value: { $state: "/result/number" } }
+  },
+  DateText: {
+    props: z.object({
+      value: z.string().nullable(),
+      style: z.enum(["long", "short", "weekday"]).nullable(),
+      tone: z.enum(["default", "muted", "accent"]).nullable()
+    }),
+    slots: [],
+    description: 'A date written in words: "long" is "Wednesday 14 April 2027", "short" is "14 Apr 2027", "weekday" is "Wed 14 April". "value" is a date path read with { "$state" } or { "$item" }; "tone" colours it muted or in the accent colour, as an eyebrow over a title.',
+    example: { value: { $item: "day" }, style: "weekday", tone: "accent" }
+  },
+  TextList: {
+    props: z.object({
+      items: z.array(z.string()).nullable(),
+      marker: z.enum(["bullet", "number", "check"]).nullable()
+    }),
+    slots: [],
+    description: 'A list of short texts as one list, each entry a line with a small marker before it: a dot, its number or a check. "items" reads a list of text path with { "$state" }, or { "$item" } inside a repeat - the whole list at once, so it needs no repeat of its own.',
+    example: { items: { $state: "/result/notes" }, marker: "bullet" }
+  },
+  Detail: {
+    props: z.object({
+      label: z.string(),
+      value: z.any()
+    }),
+    slots: [],
+    description: 'A labelled line of text: the label muted in a narrow column at the left, the value wrapping beside it, a hairline under the line. Several in a column read as a list of details. "value" is a scalar read with { "$state" }, { "$item" } or { "$template" }; the line hides itself while the value is empty.',
+    example: { label: "Morning", value: { $item: "morning" } }
+  }
+};
 
 // src/generative/catalog.ts
 var PRODUCT_COMPONENTS = [
@@ -644,11 +784,14 @@ var COMPONENT_RENDERINGS = {
   Split: { children: { count: 2, roles: "left, right" } },
   Workspace: { children: { count: 2, roles: "work, rail" } },
   Tabs: { panels: { prop: "tabs", noun: "tab" } },
-  Steps: { panels: { prop: "steps", noun: "step" } }
+  Steps: { panels: { prop: "steps", noun: "step" } },
+  Composer: { heading: { level: 1 }, once: "the composer" },
+  ResultHeader: { heading: { level: 1 }, once: "the result's header" },
+  FieldGroup: { heading: { level: 2, when: "title" } }
 };
 var catalog = Object.assign(
   defineCatalog(generativeSchema, {
-    components: { ...generativeComponents, ...product },
+    components: { ...generativeComponents, ...product, ...frameComponents },
     actions: generativeActions
   }),
   { renders: COMPONENT_RENDERINGS }
@@ -658,6 +801,60 @@ var COMPONENT_NAMES = [
   ...CUSTOM_COMPONENTS,
   ...PRODUCT_COMPONENTS
 ];
+var FRAME_EXCLUDED = {
+  page: [...FRAME_COMPONENTS],
+  composer: [
+    "AppBar",
+    "Footer",
+    "Workspace",
+    "Rail",
+    "Cta",
+    "Button",
+    "Hero",
+    "SummaryRow",
+    "MthdsResult",
+    "DataTable",
+    "Metric",
+    "Progress",
+    // `TextList` stays: a composer may list short texts too, such as what a
+    // run gives back.
+    ...RESULT_COMPONENTS.filter((name) => name !== "TextList")
+  ],
+  result: [
+    "AppBar",
+    "Footer",
+    "Workspace",
+    "Rail",
+    "Cta",
+    "Button",
+    "Hero",
+    "MthdsField",
+    "Input",
+    "Textarea",
+    "Select",
+    "Radio",
+    "Checkbox",
+    "Switch",
+    "Segmented",
+    "NumberInput",
+    "Steps",
+    ...COMPOSER_COMPONENTS
+  ]
+};
+function componentNamesFor(frame) {
+  const excluded = new Set(FRAME_EXCLUDED[frame]);
+  const own = frame === "page" ? [] : [...FRAME_COMPONENTS];
+  return [...COMPONENT_NAMES, ...own].filter((name) => !excluded.has(name));
+}
+function frameCatalog(frame) {
+  return {
+    componentNames: componentNamesFor(frame),
+    actionNames: catalog.actionNames,
+    data: catalog.data,
+    schema: catalog.schema,
+    renders: COMPONENT_RENDERINGS
+  };
+}
 
 // src/generative/props-signature.ts
 function definitionOf(schema) {
@@ -704,9 +901,9 @@ function propsSignature(schema) {
 
 // src/generative/designer-catalog.ts
 var DESIGNER_CATALOG_CONCEPT = "generative.Catalog";
-function designerCatalog() {
+function designerCatalog({ frame = "page" } = {}) {
   const definitions = catalog.data.components;
-  const components3 = COMPONENT_NAMES.map((name) => {
+  const components3 = componentNamesFor(frame).map((name) => {
     const definition = definitions[name];
     if (!definition) throw new Error(`the catalog defines no component named '${name}'`);
     const slots = definition.slots ?? [];
@@ -735,7 +932,12 @@ function designerCatalog() {
 }
 
 // src/generative/prompt-hash.ts
-var PROMPT_HASH = "2b2325fd1231";
+var PROMPT_HASH = "30cf9bc059f6";
+function promptHashSubject(method) {
+  const catalogs = FRAMES.map((frame) => designerCatalog({ frame }));
+  return `${method}
+${JSON.stringify(catalogs)}`;
+}
 
 // src/generative/paths.ts
 var INPUTS_ROOT = "/inputs";
@@ -822,169 +1024,351 @@ function repeatListPathOf(spec, key, parents = parentMapOf(spec)) {
   return outer !== void 0 && typeof item === "string" ? joinPath(outer, item) : void 0;
 }
 
-// src/generative/brief.ts
-var DESIGNER_BRIEF_CONCEPT = "generative.Brief";
-var RUN_COMPONENT = "Cta";
-function isDelegatedInput(field) {
-  return field.kind === "document" || field.kind === "image" || field.kind === "date" || field.kind === "list" || field.kind === "unknown" || field.kind === "enum" && field.options.includes("");
+// src/generative/layout-fits.ts
+function isUnder(root, path) {
+  return path === root || path.startsWith(`${root}/`);
 }
-function isDelegatedResult(field) {
-  if (isNativeValueNode(field)) return true;
-  if (field.kind === "list" && isNativeValueNode(field.item)) return true;
-  return field.kind === "document" || field.kind === "image" || field.kind === "date" || field.kind === "prose" || field.kind === "unknown";
+function itemPathResolver(spec, key, parents) {
+  let base;
+  let resolvedBase = false;
+  return (field) => {
+    if (!resolvedBase) {
+      base = repeatBasePathOf(spec, key, parents);
+      resolvedBase = true;
+    }
+    if (base === void 0) return void 0;
+    const under = field.startsWith("/") ? field.slice(1) : field;
+    return under === "" ? base : `${base}/${under}`;
+  };
 }
-function kindLabel(field) {
-  if (isNativeHtmlNode(field)) return "markup (native.Html)";
-  if (isNativeDateNode(field)) return "date (native.Date)";
-  if (isNativeCompositeNode(field)) return "composite (native.Composite)";
-  switch (field.kind) {
-    case "text":
-      return "text";
-    case "prose":
-      return "prose (markdown)";
-    case "number":
-      return field.integer ? "integer" : "number";
-    case "boolean":
-      return "boolean";
-    case "enum":
-      return `choice of ${field.options.map((option) => JSON.stringify(option)).join(" | ")}`;
-    case "date":
-      return field.datetime ? "date with time" : "date";
-    case "document":
-      return "document (a file)";
-    case "image":
-      return "image (a file)";
-    case "object":
-      return `structure${field.conceptRef ? ` ${field.conceptRef}` : ""}`;
-    case "list":
-      return `list of ${kindLabel(field.item)}`;
-    case "unknown":
-      return "unknown";
-    default:
-      return field;
-  }
+function interpolatedPaths(template, itemPath) {
+  return [...template.matchAll(/\$\{([^}]+)\}/g)].flatMap((match) => {
+    const raw = match[1];
+    if (raw === void 0) return [];
+    if (raw.startsWith("/")) return [raw];
+    return [itemPath(raw) ?? `/${raw}`];
+  });
 }
-function constraints(field) {
-  const notes = [];
-  if (field.kind === "number") {
-    if (field.min !== void 0) notes.push(`min ${field.min}`);
-    if (field.max !== void 0) notes.push(`max ${field.max}`);
-  }
-  if (field.kind === "text" || field.kind === "prose") {
-    if (field.minLength !== void 0) notes.push(`at least ${field.minLength} characters`);
-    if (field.maxLength !== void 0) notes.push(`at most ${field.maxLength} characters`);
-    if (field.format) notes.push(`format ${field.format}`);
-  }
-  if (field.kind === "list") {
-    if (field.itemCount !== void 0) notes.push(`at least ${field.itemCount} items`);
-    if (field.maxItemCount !== void 0) notes.push(`at most ${field.maxItemCount} items`);
-  }
-  if (field.defaultValue !== void 0) notes.push(`default ${JSON.stringify(field.defaultValue)}`);
-  if (field.examples && field.examples.length > 0) {
-    notes.push(`examples ${field.examples.map((example) => JSON.stringify(example)).join(", ")}`);
-  }
-  if (field.hints && Object.keys(field.hints).length > 0) {
-    notes.push(
-      `hints ${Object.entries(field.hints).map(([key, value]) => `${key}=${value}`).join(", ")}`
-    );
+function mentionedPaths(spec, parents) {
+  const found = { bound: [], read: [], adrift: [] };
+  for (const [key, element] of Object.entries(spec.elements)) {
+    const itemPath = itemPathResolver(spec, key, parents);
+    const walk = (value) => {
+      if (Array.isArray(value)) {
+        value.forEach(walk);
+        return;
+      }
+      if (typeof value !== "object" || value === null) return;
+      const record = value;
+      if (typeof record.$bindState === "string") found.bound.push(record.$bindState);
+      if (typeof record.$state === "string") found.read.push(record.$state);
+      if (typeof record.$template === "string") {
+        found.read.push(...interpolatedPaths(record.$template, itemPath));
+      }
+      if (typeof record.$bindItem === "string") {
+        const path = itemPath(record.$bindItem);
+        if (path === void 0) found.adrift.push(key);
+        else found.bound.push(path);
+      }
+      if (typeof record.$item === "string") {
+        const path = itemPath(record.$item);
+        if (path === void 0) found.adrift.push(key);
+        else found.read.push(path);
+      }
+      Object.values(record).forEach(walk);
+    };
+    walk(element.props);
+    walk(element.visible);
   }
-  return notes;
+  return found;
 }
-function entryOf(field, path, depth, side, relative, seeded) {
-  const notes = constraints(field);
-  return {
-    depth,
-    path,
-    kind: kindLabel(field),
-    name: field.name,
-    title: field.title && field.title !== field.name ? field.title : void 0,
-    description: field.description,
-    required: side === "input" ? field.required : void 0,
-    gating: side === "input" && field.gating ? true : void 0,
-    notes: notes.length > 0 ? notes : void 0,
-    default: seeded || field.defaultValue === void 0 ? void 0 : JSON.stringify(field.defaultValue),
-    delegated: side === "input" ? isDelegatedInput(field) : isDelegatedResult(field),
-    relative: relative ? true : void 0
-  };
+function staleReads(read, root, resolves) {
+  const under = read.filter((path) => isUnder(root, path));
+  return [...new Set(under)].filter((path) => !resolves(path));
 }
-function describe(field, path, depth, side, entries, seeded = false) {
-  const entry = entryOf(field, path, depth, side, false, seeded);
-  entries.push(entry);
-  if (entry.delegated) return;
-  if (field.kind === "object") {
-    const seededBelow = seeded || field.defaultValue !== void 0 || side === "input" && !field.required;
-    for (const child of field.fields) {
-      describe(child, joinPath(path, child.name), depth + 1, side, entries, seededBelow);
-    }
-  }
-  if (field.kind === "list" && side === "result") {
-    const item = field.item;
-    entry.item_kind = kindLabel(item);
-    entry.item_description = item.description;
-    if (item.kind === "object" && !isDelegatedResult(item)) {
-      entry.item_laid_out = true;
-      for (const child of item.fields) {
-        describeRelative(child, child.name, depth + 2, entries);
-      }
+function staleRepeats(spec, parents, root, resolves, side) {
+  const problems = [];
+  for (const [key, element] of Object.entries(spec.elements)) {
+    if (!element.repeat) continue;
+    const listPath = repeatListPathOf(spec, key, parents);
+    if (listPath === void 0 || !isUnder(root, listPath)) continue;
+    if (!resolves(listPath)) {
+      problems.push(`${key}: repeats over ${listPath}, which no ${side} has`);
     }
   }
+  return problems;
 }
-function describeRelative(field, relativePath, depth, entries) {
-  const entry = entryOf(field, relativePath, depth, "result", true, false);
-  entries.push(entry);
-  if (entry.delegated) return;
-  if (field.kind === "object") {
-    for (const child of field.fields) {
-      describeRelative(child, joinPath(relativePath, child.name), depth + 1, entries);
+var NOT_A_VALUE = {
+  object: { what: "a structure", instead: "a structure is shown through its members" },
+  list: { what: "a list", instead: "a list is laid out as a repeat or a DataTable" },
+  document: { what: "a file", instead: "a file is delegated to the kernel's own control" },
+  image: { what: "a file", instead: "a file is delegated to the kernel's own control" }
+};
+var NOT_VALUES = {
+  object: "structures",
+  list: "lists",
+  document: "files",
+  image: "files"
+};
+var listPropsCache;
+function listProps() {
+  if (listPropsCache) return listPropsCache;
+  const found = /* @__PURE__ */ new Map([
+    ["DataTable", /* @__PURE__ */ new Map([["rows", "anything"]])]
+  ]);
+  const components3 = catalog.data.components;
+  for (const [type, definition] of Object.entries(components3)) {
+    const shape = definition.props?.shape;
+    for (const [prop, schema] of Object.entries(shape ?? {})) {
+      const items = listItemsOf(schema);
+      if (items === void 0) continue;
+      if (!found.has(type)) found.set(type, /* @__PURE__ */ new Map());
+      found.get(type).set(prop, items);
     }
   }
-  if (field.kind === "list") {
-    const item = field.item;
-    entry.item_kind = kindLabel(item);
-    entry.item_description = item.description;
-    if (item.kind === "object" && !isDelegatedResult(item)) {
-      entry.item_laid_out = true;
-      for (const child of item.fields) {
-        describeRelative(child, joinPath(relativePath, "<i>", child.name), depth + 2, entries);
+  listPropsCache = found;
+  return found;
+}
+var VALUE_SCHEMAS = /* @__PURE__ */ new Set(["string", "number", "boolean", "enum", "literal"]);
+function unwrapped(schema) {
+  let current = schema;
+  for (let depth = 0; depth < 8; depth += 1) {
+    const def = current.def;
+    if (!def) return void 0;
+    if (def.innerType === void 0) return def;
+    current = def.innerType;
+  }
+  return void 0;
+}
+function listItemsOf(schema) {
+  const def = unwrapped(schema);
+  if (def?.type !== "array") return void 0;
+  const element = unwrapped(def.element);
+  return element?.type !== void 0 && VALUE_SCHEMAS.has(element.type) ? "values" : "anything";
+}
+function nonScalarReads(spec, parents, root, fieldAt) {
+  const problems = [];
+  const lists = listProps();
+  for (const [key, element] of Object.entries(spec.elements)) {
+    const itemPath = itemPathResolver(spec, key, parents);
+    const listy = lists.get(element.type);
+    const check = (prop, path) => {
+      if (!isUnder(root, path)) return;
+      const field = fieldAt(path);
+      if (!field) return;
+      const wrong = hasOwnProp(NOT_A_VALUE, field.kind) ? NOT_A_VALUE[field.kind] : void 0;
+      if (!wrong) return;
+      problems.push(
+        `${key}: ${prop} shows ${path}, which is ${wrong.what} and not a value; a prop that shows a value takes a scalar path, and ${wrong.instead}`
+      );
+    };
+    const checkList = (prop, path, items) => {
+      if (!isUnder(root, path)) return;
+      const field = fieldAt(path);
+      if (!field || field.kind === "unknown") return;
+      if (field.kind !== "list") {
+        const what = hasOwnProp(NOT_A_VALUE, field.kind) ? NOT_A_VALUE[field.kind].what : "a value";
+        problems.push(
+          `${key}: ${prop} takes a list, and ${path} is ${what}; a prop that takes a list reads a list path`
+        );
+        return;
+      }
+      if (items !== "values") return;
+      const of = hasOwnProp(NOT_VALUES, field.item.kind) ? NOT_VALUES[field.item.kind] : void 0;
+      if (!of) return;
+      problems.push(
+        `${key}: ${prop} takes a list of values, and ${path} is a list of ${of}; a list of ${of} is laid out as a repeat or a DataTable`
+      );
+    };
+    const checkShares = (path) => {
+      if (element.type !== "ProportionBar" || !isUnder(root, path)) return;
+      const field = fieldAt(path);
+      if (field?.kind !== "list") return;
+      if (field.item.kind !== "object") {
+        problems.push(
+          `${key}: ProportionBar reads ${path}, a list of ${field.item.kind} values; its parts are structures, each with a label member and a number member`
+        );
+        return;
+      }
+      const members = field.item.fields;
+      const { labelKey, valueKey } = element.props ?? {};
+      const member = (name) => typeof name === "string" ? members.find((m) => m.name === name) : void 0;
+      if (!member(labelKey)) {
+        problems.push(
+          `${key}: ProportionBar's labelKey ${JSON.stringify(labelKey)} is no member of ${path}'s items`
+        );
+      }
+      const value = member(valueKey);
+      if (!value) {
+        problems.push(
+          `${key}: ProportionBar's valueKey ${JSON.stringify(valueKey)} is no member of ${path}'s items`
+        );
+      } else if (value.kind !== "number") {
+        problems.push(
+          `${key}: ProportionBar's valueKey ${JSON.stringify(valueKey)} holds a ${value.kind}, not a number`
+        );
+      }
+    };
+    const walk = (prop, value) => {
+      if (Array.isArray(value)) {
+        value.forEach((entry) => walk(prop, entry));
+        return;
+      }
+      if (typeof value !== "object" || value === null) return;
+      const record = value;
+      if (typeof record.$state === "string") check(prop, record.$state);
+      if (typeof record.$item === "string") {
+        const path = itemPath(record.$item);
+        if (path !== void 0) check(prop, path);
+      }
+      if (typeof record.$template === "string") {
+        for (const path of interpolatedPaths(record.$template, itemPath)) check(prop, path);
+      }
+      for (const [name, entry] of Object.entries(record)) {
+        if (name !== "$cond") walk(prop, entry);
+      }
+    };
+    for (const [prop, value] of Object.entries(element.props ?? {})) {
+      const items = listy?.get(prop);
+      if (items === void 0 || Array.isArray(value)) {
+        walk(prop, value);
+        continue;
+      }
+      if (typeof value !== "object" || value === null) continue;
+      const record = value;
+      const listPath = typeof record.$state === "string" ? record.$state : typeof record.$item === "string" ? itemPath(record.$item) : void 0;
+      if (listPath !== void 0) {
+        checkList(prop, listPath, items);
+        if (prop === "items") checkShares(listPath);
       }
     }
   }
+  return problems;
 }
-function inputBrief(subject, fields) {
-  const paths = [];
-  for (const field of fields) describe(field, joinPath(INPUTS_ROOT, field.name), 0, "input", paths);
-  return {
-    side: "input",
-    pipe_ref: subject.pipeRef,
-    description: subject.description,
-    name: subject.name,
-    paths,
-    run_control: RUN_COMPONENT
-  };
-}
-function resultBrief(subject, field, state) {
-  const paths = [];
-  if (field.kind === "object" && !isDelegatedResult(field)) {
-    paths.push({
-      depth: 0,
-      path: RESULT_ROOT,
-      kind: kindLabel(field),
-      description: field.description,
-      delegated: false
-    });
-    for (const child of field.fields) {
-      describe(child, joinPath(RESULT_ROOT, child.name), 1, "result", paths);
+function boundProblems(bound, inputs) {
+  const problems = [];
+  const underInputs = bound.filter((path) => isUnder(INPUTS_ROOT, path));
+  if (!inputs) {
+    if (underInputs.length > 0) {
+      problems.push(`a result page binds ${underInputs.join(", ")}; a result page writes nothing`);
     }
   } else {
-    describe(field, RESULT_ROOT, 0, "result", paths);
+    for (const path of underInputs) {
+      if (!inputFieldAtPath(inputs, path)) {
+        problems.push(`${path} is bound, and no input has it`);
+      }
+    }
   }
-  return {
-    side: "result",
-    pipe_ref: subject.pipeRef,
-    description: subject.description,
-    paths,
-    sample_state: JSON.stringify(state, null, 2)
+  for (const path of bound) {
+    if (isUnder(RESULT_ROOT, path)) {
+      problems.push(
+        `${path} is bound; a layout may not write into ${RESULT_ROOT}, which the run fills`
+      );
+    }
+  }
+  return problems;
+}
+function repeatPaths(spec) {
+  const found = [];
+  for (const element of Object.values(spec.elements)) {
+    const statePath = element.repeat?.statePath;
+    if (typeof statePath === "string") found.push(statePath);
+  }
+  return found;
+}
+function isOffered(path, offered) {
+  if (offered.bound.has(path) || offered.repeated.has(path)) return true;
+  return offered.delegated.some((at) => path === at || path.startsWith(`${at}/`));
+}
+function uncoveredUnder(field, path, offered) {
+  if (isOffered(path, offered)) return [];
+  if (field.kind === "object") {
+    return field.fields.filter((child) => child.required).flatMap((child) => uncoveredUnder(child, joinPath(path, child.name), offered));
+  }
+  return [path];
+}
+function layoutProblems(descriptor, spec) {
+  try {
+    return collectLayoutProblems(descriptor, spec);
+  } catch (error) {
+    return [`the layout is not a well-formed spec: ${String(error)}`];
+  }
+}
+function collectLayoutProblems(descriptor, spec) {
+  const problems = [];
+  const delegated = [];
+  const parents = parentMapOf(spec);
+  for (const [key, element] of Object.entries(spec.elements)) {
+    const written = element.props?.path;
+    const path = typeof written === "string" ? absoluteHatchPath(spec, key, written, parents) : void 0;
+    if (element.type === "MthdsField") {
+      if (!path || !inputFieldAtPath(descriptor.inputs ?? [], path)) {
+        problems.push(`${key}: MthdsField delegates ${String(written)}, which no input has`);
+      } else {
+        delegated.push(path);
+      }
+    }
+    if (element.type === "MthdsResult") {
+      if (!path || !descriptor.result || !resultFieldAtPath(descriptor.result, path)) {
+        problems.push(`${key}: MthdsResult delegates ${String(written)}, which no result has`);
+      }
+    }
+    const [onlyKey] = element.children?.length === 1 ? element.children : [];
+    const only = onlyKey === void 0 ? void 0 : spec.elements[onlyKey];
+    if (element.type === "Grid" && element.repeat === void 0 && only?.repeat !== void 0) {
+      problems.push(
+        `${key}: Grid's only child ${onlyKey} carries the repeat, so every item lands in one cell; put the repeat on ${key} itself, with the item's element as its child`
+      );
+    }
+    if (element.type === "Picture") {
+      const shown = written === "" ? repeatBasePathOf(spec, key, parents) : path ?? void 0;
+      const field = shown && descriptor.result ? resultFieldAtPath(descriptor.result, shown) : void 0;
+      if (!field) {
+        problems.push(`${key}: Picture shows ${JSON.stringify(written)}, which no result has`);
+      } else if (field.kind !== "image") {
+        problems.push(`${key}: Picture shows ${shown}, which holds a ${field.kind}, not an image`);
+      }
+    }
+  }
+  const { bound, read, adrift } = mentionedPaths(spec, parents);
+  for (const key of new Set(adrift)) {
+    problems.push(`${key}: reads the current item, and no repeat above it has one`);
+  }
+  problems.push(...boundProblems(bound, descriptor.inputs));
+  if (!descriptor.inputs) {
+    const result = descriptor.result;
+    const fieldAt2 = (path) => result ? resultFieldAtPath(result, path) : void 0;
+    const resolves2 = (path) => fieldAt2(path) !== void 0;
+    problems.push(...staleRepeats(spec, parents, RESULT_ROOT, resolves2, "result"));
+    for (const path of staleReads(read, RESULT_ROOT, resolves2)) {
+      problems.push(`${path} is read, and no result has it`);
+    }
+    problems.push(...nonScalarReads(spec, parents, RESULT_ROOT, fieldAt2));
+    return problems;
+  }
+  const inputs = descriptor.inputs;
+  const fieldAt = (path) => inputFieldAtPath(inputs, path);
+  const resolves = (path) => fieldAt(path) !== void 0;
+  problems.push(...staleRepeats(spec, parents, INPUTS_ROOT, resolves, "input"));
+  for (const path of staleReads(read, INPUTS_ROOT, resolves)) {
+    problems.push(`${path} is read, and no input has it`);
+  }
+  problems.push(...nonScalarReads(spec, parents, INPUTS_ROOT, fieldAt));
+  const offered = {
+    bound: new Set(bound),
+    repeated: new Set(repeatPaths(spec)),
+    delegated
   };
+  for (const field of inputs) {
+    if (!field.required) continue;
+    for (const path of uncoveredUnder(field, joinPath(INPUTS_ROOT, field.name), offered)) {
+      problems.push(`${path} is required, and the layout offers nowhere to enter it`);
+    }
+  }
+  return problems;
+}
+function layoutFits(descriptor, spec) {
+  return layoutProblems(descriptor, spec).length === 0;
 }
 var EXPRESSION_KEYS = [
   "$state",
@@ -1000,6 +1384,14 @@ var HATCHES = /* @__PURE__ */ new Set(["MthdsField", "MthdsResult"]);
 function isExpression(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value) && Object.keys(value).some((key) => EXPRESSION_KEYS.includes(key));
 }
+function valueAt(value, path) {
+  let at = value;
+  for (const step of path) {
+    if (typeof at !== "object" || at === null) return void 0;
+    at = at[step];
+  }
+  return at;
+}
 function isClosedVocabulary(schema) {
   let current = schema;
   for (let depth = 0; depth < 8; depth += 1) {
@@ -1066,7 +1458,7 @@ function deepestChain(spec) {
   }
   return deepest;
 }
-function validateAgainstCatalog(spec, catalog2 = catalog) {
+function validateAgainstCatalog(spec, catalog2 = frameCatalog("page")) {
   try {
     return checkAgainstCatalog(spec, catalog2);
   } catch (error) {
@@ -1153,10 +1545,13 @@ function checkAgainstCatalog(spec, catalog2) {
         continue;
       }
       const parsed = propSchema.safeParse(value);
-      if (!parsed.success) {
+      const issues = parsed.success ? [] : parsed.error.issues.filter(
+        (issue) => !issue.path.some((_, n) => isExpression(valueAt(value, issue.path.slice(0, n + 1))))
+      );
+      if (issues.length > 0) {
         problems.push({
           elementKey: key,
-          message: `${element.type}.${name}: ${parsed.error.issues.map((issue) => issue.message).join("; ")}`
+          message: `${element.type}.${name}: ${issues.map((issue) => issue.message).join("; ")}`
         });
       }
     }
@@ -1195,7 +1590,7 @@ function checkAgainstCatalog(spec, catalog2) {
       });
     }
   }
-  const present2 = (value) => value !== void 0 && value !== null && value !== "";
+  const present3 = (value) => value !== void 0 && value !== null && value !== "";
   const levels = [];
   const onlyOnce = /* @__PURE__ */ new Map();
   const seen = /* @__PURE__ */ new Set();
@@ -1212,7 +1607,7 @@ function checkAgainstCatalog(spec, catalog2) {
       if (match) levels.push({ key, type: "Heading", level: Number(match[1]) });
     } else if (rendering?.heading) {
       const rendered = rendering.heading;
-      const has = rendered.when === void 0 || present2(props[rendered.when]);
+      const has = rendered.when === void 0 || present3(props[rendered.when]);
       if (has) levels.push({ key, type: element.type, level: rendered.level });
     }
     if (rendering?.once !== void 0) {
@@ -1409,306 +1804,224 @@ function formatProblems(problems) {
   ).join("\n");
 }
 
-// src/generative/layout-fits.ts
-function isUnder(root, path) {
-  return path === root || path.startsWith(`${root}/`);
-}
-function itemPathResolver(spec, key, parents) {
-  let base;
-  let resolvedBase = false;
-  return (field) => {
-    if (!resolvedBase) {
-      base = repeatBasePathOf(spec, key, parents);
-      resolvedBase = true;
-    }
-    if (base === void 0) return void 0;
-    const under = field.startsWith("/") ? field.slice(1) : field;
-    return under === "" ? base : `${base}/${under}`;
-  };
+// src/generative/designer-run.ts
+function seedLine(seed) {
+  return `CREATIVE SEED (derive your direction from it; never reveal it): ${seed}`;
+}
+var REPAIR_ATTEMPTS = 2;
+function layoutCheckProblems(spec, { frame, descriptor }) {
+  const verdict = validateAgainstCatalog(spec, frameCatalog(frame));
+  const invalid = verdict.ok ? [] : formatProblems(verdict.problems).split("\n");
+  const runless = frame !== "result" && descriptor.inputs && !bindsRun(spec) ? ["the layout has no control that runs the method: bind `run` under a control's `on`"] : [];
+  return [...invalid, ...runless, ...layoutProblems(descriptor, spec)];
+}
+function bindsRun(spec) {
+  const isRun = (binding) => typeof binding === "object" && binding !== null && binding.action === "run";
+  const elements = spec.elements;
+  if (typeof elements !== "object" || elements === null) return false;
+  return Object.values(elements).some((element) => {
+    if (typeof element !== "object" || element === null) return false;
+    const on = element.on;
+    if (typeof on !== "object" || on === null) return false;
+    return Object.values(on).some(
+      (binding) => Array.isArray(binding) ? binding.some(isRun) : isRun(binding)
+    );
+  });
 }
-function interpolatedPaths(template, itemPath) {
-  return [...template.matchAll(/\$\{([^}]+)\}/g)].flatMap((match) => {
-    const raw = match[1];
-    if (raw === void 0) return [];
-    if (raw.startsWith("/")) return [raw];
-    return [itemPath(raw) ?? `/${raw}`];
-  });
-}
-function mentionedPaths(spec, parents) {
-  const found = { bound: [], read: [], adrift: [] };
-  for (const [key, element] of Object.entries(spec.elements)) {
-    const itemPath = itemPathResolver(spec, key, parents);
-    const walk = (value) => {
-      if (Array.isArray(value)) {
-        value.forEach(walk);
-        return;
-      }
-      if (typeof value !== "object" || value === null) return;
-      const record = value;
-      if (typeof record.$bindState === "string") found.bound.push(record.$bindState);
-      if (typeof record.$state === "string") found.read.push(record.$state);
-      if (typeof record.$template === "string") {
-        found.read.push(...interpolatedPaths(record.$template, itemPath));
-      }
-      if (typeof record.$bindItem === "string") {
-        const path = itemPath(record.$bindItem);
-        if (path === void 0) found.adrift.push(key);
-        else found.bound.push(path);
-      }
-      if (typeof record.$item === "string") {
-        const path = itemPath(record.$item);
-        if (path === void 0) found.adrift.push(key);
-        else found.read.push(path);
-      }
-      Object.values(record).forEach(walk);
-    };
-    walk(element.props);
-    walk(element.visible);
-  }
-  return found;
-}
-function staleReads(read, root, resolves) {
-  const under = read.filter((path) => isUnder(root, path));
-  return [...new Set(under)].filter((path) => !resolves(path));
-}
-function staleRepeats(spec, parents, root, resolves, side) {
-  const problems = [];
-  for (const [key, element] of Object.entries(spec.elements)) {
-    if (!element.repeat) continue;
-    const listPath = repeatListPathOf(spec, key, parents);
-    if (listPath === void 0 || !isUnder(root, listPath)) continue;
-    if (!resolves(listPath)) {
-      problems.push(`${key}: repeats over ${listPath}, which no ${side} has`);
-    }
-  }
-  return problems;
+
+// src/generative/brief.ts
+var DESIGNER_BRIEF_CONCEPT = "generative.Brief";
+var RUN_COMPONENT = "Cta";
+var COMPOSER_RUN_COMPONENT = "Composer";
+function isDelegatedInput(field) {
+  return field.kind === "document" || field.kind === "image" || field.kind === "date" || field.kind === "list" || field.kind === "unknown" || field.kind === "enum" && field.options.includes("");
 }
-var NOT_A_VALUE = {
-  object: { what: "a structure", instead: "a structure is shown through its members" },
-  list: { what: "a list", instead: "a list is laid out as a repeat or a DataTable" },
-  document: { what: "a file", instead: "a file is delegated to the kernel's own control" },
-  image: { what: "a file", instead: "a file is delegated to the kernel's own control" }
-};
-var NOT_VALUES = {
-  object: "structures",
-  list: "lists",
-  document: "files",
-  image: "files"
-};
-var listPropsCache;
-function listProps() {
-  if (listPropsCache) return listPropsCache;
-  const found = /* @__PURE__ */ new Map([
-    ["DataTable", /* @__PURE__ */ new Map([["rows", "anything"]])]
-  ]);
-  const components3 = catalog.data.components;
-  for (const [type, definition] of Object.entries(components3)) {
-    const shape = definition.props?.shape;
-    for (const [prop, schema] of Object.entries(shape ?? {})) {
-      const items = listItemsOf(schema);
-      if (items === void 0) continue;
-      if (!found.has(type)) found.set(type, /* @__PURE__ */ new Map());
-      found.get(type).set(prop, items);
-    }
-  }
-  listPropsCache = found;
-  return found;
+function isDelegatedResult(field, frame = "page") {
+  if (isNativeValueNode(field)) return true;
+  if (frame === "result" && (field.kind === "image" || field.kind === "date" && !field.datetime))
+    return false;
+  if (field.kind === "list" && isNativeValueNode(field.item)) return true;
+  return field.kind === "document" || field.kind === "image" || field.kind === "date" || field.kind === "prose" || field.kind === "unknown";
 }
-var VALUE_SCHEMAS = /* @__PURE__ */ new Set(["string", "number", "boolean", "enum", "literal"]);
-function unwrapped(schema) {
-  let current = schema;
-  for (let depth = 0; depth < 8; depth += 1) {
-    const def = current.def;
-    if (!def) return void 0;
-    if (def.innerType === void 0) return def;
-    current = def.innerType;
+function kindLabel(field) {
+  if (isNativeHtmlNode(field)) return "markup (native.Html)";
+  if (isNativeDateNode(field)) return "date (native.Date)";
+  if (isNativeCompositeNode(field)) return "composite (native.Composite)";
+  switch (field.kind) {
+    case "text":
+      return "text";
+    case "prose":
+      return "prose (markdown)";
+    case "number":
+      return field.integer ? "integer" : "number";
+    case "boolean":
+      return "boolean";
+    case "enum":
+      return `choice of ${field.options.map((option) => JSON.stringify(option)).join(" | ")}`;
+    case "date":
+      return field.datetime ? "date with time" : "date";
+    case "document":
+      return "document (a file)";
+    case "image":
+      return "image (a file)";
+    case "object":
+      return `structure${field.conceptRef ? ` ${field.conceptRef}` : ""}`;
+    case "list":
+      return `list of ${kindLabel(field.item)}`;
+    case "unknown":
+      return "unknown";
+    default:
+      return field;
   }
-  return void 0;
-}
-function listItemsOf(schema) {
-  const def = unwrapped(schema);
-  if (def?.type !== "array") return void 0;
-  const element = unwrapped(def.element);
-  return element?.type !== void 0 && VALUE_SCHEMAS.has(element.type) ? "values" : "anything";
 }
-function nonScalarReads(spec, parents, root, fieldAt) {
-  const problems = [];
-  const lists = listProps();
-  for (const [key, element] of Object.entries(spec.elements)) {
-    const itemPath = itemPathResolver(spec, key, parents);
-    const listy = lists.get(element.type);
-    const check = (prop, path) => {
-      if (!isUnder(root, path)) return;
-      const field = fieldAt(path);
-      if (!field) return;
-      const wrong = hasOwnProp(NOT_A_VALUE, field.kind) ? NOT_A_VALUE[field.kind] : void 0;
-      if (!wrong) return;
-      problems.push(
-        `${key}: ${prop} shows ${path}, which is ${wrong.what} and not a value; a prop that shows a value takes a scalar path, and ${wrong.instead}`
-      );
-    };
-    const checkList = (prop, path, items) => {
-      if (!isUnder(root, path)) return;
-      const field = fieldAt(path);
-      if (!field || field.kind === "unknown") return;
-      if (field.kind !== "list") {
-        const what = hasOwnProp(NOT_A_VALUE, field.kind) ? NOT_A_VALUE[field.kind].what : "a value";
-        problems.push(
-          `${key}: ${prop} takes a list, and ${path} is ${what}; a prop that takes a list reads a list path`
-        );
-        return;
-      }
-      if (items !== "values") return;
-      const of = hasOwnProp(NOT_VALUES, field.item.kind) ? NOT_VALUES[field.item.kind] : void 0;
-      if (!of) return;
-      problems.push(
-        `${key}: ${prop} takes a list of values, and ${path} is a list of ${of}; a list of ${of} is laid out as a repeat or a DataTable`
-      );
-    };
-    const walk = (prop, value) => {
-      if (Array.isArray(value)) {
-        value.forEach((entry) => walk(prop, entry));
-        return;
-      }
-      if (typeof value !== "object" || value === null) return;
-      const record = value;
-      if (typeof record.$state === "string") check(prop, record.$state);
-      if (typeof record.$item === "string") {
-        const path = itemPath(record.$item);
-        if (path !== void 0) check(prop, path);
-      }
-      if (typeof record.$template === "string") {
-        for (const path of interpolatedPaths(record.$template, itemPath)) check(prop, path);
-      }
-      for (const [name, entry] of Object.entries(record)) {
-        if (name !== "$cond") walk(prop, entry);
-      }
-    };
-    for (const [prop, value] of Object.entries(element.props ?? {})) {
-      const items = listy?.get(prop);
-      if (items === void 0 || Array.isArray(value)) {
-        walk(prop, value);
-        continue;
-      }
-      if (typeof value !== "object" || value === null) continue;
-      const record = value;
-      if (typeof record.$state === "string") checkList(prop, record.$state, items);
-      if (typeof record.$item === "string") {
-        const path = itemPath(record.$item);
-        if (path !== void 0) checkList(prop, path, items);
-      }
-    }
+function constraints(field) {
+  const notes = [];
+  if (field.kind === "number") {
+    if (field.min !== void 0) notes.push(`min ${field.min}`);
+    if (field.max !== void 0) notes.push(`max ${field.max}`);
   }
-  return problems;
-}
-function boundProblems(bound, inputs) {
-  const problems = [];
-  const underInputs = bound.filter((path) => isUnder(INPUTS_ROOT, path));
-  if (!inputs) {
-    if (underInputs.length > 0) {
-      problems.push(`a result page binds ${underInputs.join(", ")}; a result page writes nothing`);
-    }
-  } else {
-    for (const path of underInputs) {
-      if (!inputFieldAtPath(inputs, path)) {
-        problems.push(`${path} is bound, and no input has it`);
-      }
-    }
+  if (field.kind === "text" || field.kind === "prose") {
+    if (field.minLength !== void 0) notes.push(`at least ${field.minLength} characters`);
+    if (field.maxLength !== void 0) notes.push(`at most ${field.maxLength} characters`);
+    if (field.format) notes.push(`format ${field.format}`);
   }
-  for (const path of bound) {
-    if (isUnder(RESULT_ROOT, path)) {
-      problems.push(
-        `${path} is bound; a layout may not write into ${RESULT_ROOT}, which the run fills`
-      );
-    }
+  if (field.kind === "list") {
+    if (field.itemCount !== void 0) notes.push(`at least ${field.itemCount} items`);
+    if (field.maxItemCount !== void 0) notes.push(`at most ${field.maxItemCount} items`);
   }
-  return problems;
-}
-function repeatPaths(spec) {
-  const found = [];
-  for (const element of Object.values(spec.elements)) {
-    const statePath = element.repeat?.statePath;
-    if (typeof statePath === "string") found.push(statePath);
+  if (field.defaultValue !== void 0) notes.push(`default ${JSON.stringify(field.defaultValue)}`);
+  if (field.examples && field.examples.length > 0) {
+    notes.push(`examples ${field.examples.map((example) => JSON.stringify(example)).join(", ")}`);
   }
-  return found;
-}
-function isOffered(path, offered) {
-  if (offered.bound.has(path) || offered.repeated.has(path)) return true;
-  return offered.delegated.some((at) => path === at || path.startsWith(`${at}/`));
-}
-function uncoveredUnder(field, path, offered) {
-  if (isOffered(path, offered)) return [];
-  if (field.kind === "object") {
-    return field.fields.filter((child) => child.required).flatMap((child) => uncoveredUnder(child, joinPath(path, child.name), offered));
+  if (field.hints && Object.keys(field.hints).length > 0) {
+    notes.push(
+      `hints ${Object.entries(field.hints).map(([key, value]) => `${key}=${value}`).join(", ")}`
+    );
   }
-  return [path];
+  return notes;
 }
-function layoutProblems(descriptor, spec) {
-  try {
-    return collectLayoutProblems(descriptor, spec);
-  } catch (error) {
-    return [`the layout is not a well-formed spec: ${String(error)}`];
-  }
+function entryOf(field, path, depth, side, relative, seeded, frame = "page") {
+  const notes = constraints(field);
+  return {
+    depth,
+    path,
+    kind: kindLabel(field),
+    name: field.name,
+    title: field.title && field.title !== field.name ? field.title : void 0,
+    description: field.description,
+    required: side === "input" ? field.required : void 0,
+    gating: side === "input" && field.gating ? true : void 0,
+    notes: notes.length > 0 ? notes : void 0,
+    default: seeded || field.defaultValue === void 0 ? void 0 : JSON.stringify(field.defaultValue),
+    delegated: side === "input" ? isDelegatedInput(field) : isDelegatedResult(field, frame),
+    relative: relative ? true : void 0
+  };
 }
-function collectLayoutProblems(descriptor, spec) {
-  const problems = [];
-  const delegated = [];
-  const parents = parentMapOf(spec);
-  for (const [key, element] of Object.entries(spec.elements)) {
-    const written = element.props?.path;
-    const path = typeof written === "string" ? absoluteHatchPath(spec, key, written, parents) : void 0;
-    if (element.type === "MthdsField") {
-      if (!path || !inputFieldAtPath(descriptor.inputs ?? [], path)) {
-        problems.push(`${key}: MthdsField delegates ${String(written)}, which no input has`);
-      } else {
-        delegated.push(path);
-      }
+function describe(field, path, depth, side, entries, seeded = false, frame = "page") {
+  const entry = entryOf(field, path, depth, side, false, seeded, frame);
+  entries.push(entry);
+  if (entry.delegated) return;
+  if (field.kind === "object") {
+    const seededBelow = seeded || field.defaultValue !== void 0 || side === "input" && !field.required;
+    for (const child of field.fields) {
+      describe(child, joinPath(path, child.name), depth + 1, side, entries, seededBelow, frame);
     }
-    if (element.type === "MthdsResult") {
-      if (!path || !descriptor.result || !resultFieldAtPath(descriptor.result, path)) {
-        problems.push(`${key}: MthdsResult delegates ${String(written)}, which no result has`);
+  }
+  if (field.kind === "list" && side === "result") {
+    const item = field.item;
+    entry.item_kind = kindLabel(item);
+    entry.item_description = item.description;
+    if (item.kind === "object" && !isDelegatedResult(item, frame)) {
+      entry.item_laid_out = true;
+      for (const child of item.fields) {
+        describeRelative(child, child.name, depth + 2, entries, side, frame);
       }
     }
   }
-  const { bound, read, adrift } = mentionedPaths(spec, parents);
-  for (const key of new Set(adrift)) {
-    problems.push(`${key}: reads the current item, and no repeat above it has one`);
+}
+function describeRelative(field, relativePath, depth, entries, side = "result", frame = "page") {
+  const entry = entryOf(field, relativePath, depth, side, true, false, frame);
+  entries.push(entry);
+  if (entry.delegated) return;
+  if (field.kind === "object") {
+    for (const child of field.fields) {
+      describeRelative(child, joinPath(relativePath, child.name), depth + 1, entries, side, frame);
+    }
   }
-  problems.push(...boundProblems(bound, descriptor.inputs));
-  if (!descriptor.inputs) {
-    const result = descriptor.result;
-    const fieldAt2 = (path) => result ? resultFieldAtPath(result, path) : void 0;
-    const resolves2 = (path) => fieldAt2(path) !== void 0;
-    problems.push(...staleRepeats(spec, parents, RESULT_ROOT, resolves2, "result"));
-    for (const path of staleReads(read, RESULT_ROOT, resolves2)) {
-      problems.push(`${path} is read, and no result has it`);
+  if (field.kind === "list" && side === "result") {
+    const item = field.item;
+    entry.item_kind = kindLabel(item);
+    entry.item_description = item.description;
+    if (item.kind === "object" && !isDelegatedResult(item, frame)) {
+      entry.item_laid_out = true;
+      for (const child of item.fields) {
+        describeRelative(
+          child,
+          joinPath(relativePath, "<i>", child.name),
+          depth + 2,
+          entries,
+          side,
+          frame
+        );
+      }
     }
-    problems.push(...nonScalarReads(spec, parents, RESULT_ROOT, fieldAt2));
-    return problems;
   }
-  const inputs = descriptor.inputs;
-  const fieldAt = (path) => inputFieldAtPath(inputs, path);
-  const resolves = (path) => fieldAt(path) !== void 0;
-  problems.push(...staleRepeats(spec, parents, INPUTS_ROOT, resolves, "input"));
-  for (const path of staleReads(read, INPUTS_ROOT, resolves)) {
-    problems.push(`${path} is read, and no input has it`);
+}
+function returnsOf(result) {
+  const shape = result.kind === "list" ? result.item : result;
+  const members = shape.kind === "object" ? shape.fields : [shape];
+  return members.map((member) => {
+    const title = member.title ?? member.name.replace(/_/g, " ");
+    return member.description && member.description !== title ? `${title}: ${member.description}` : title;
+  });
+}
+function styleOf(style) {
+  if (!style) return void 0;
+  const { name, direction } = APP_STYLES[style];
+  return { name, direction };
+}
+function inputBrief(subject, fields, { frame = "page", style, result } = {}) {
+  const paths = [];
+  for (const field of fields) {
+    describe(field, joinPath(INPUTS_ROOT, field.name), 0, "input", paths, false, frame);
   }
-  problems.push(...nonScalarReads(spec, parents, INPUTS_ROOT, fieldAt));
-  const offered = {
-    bound: new Set(bound),
-    repeated: new Set(repeatPaths(spec)),
-    delegated
+  return {
+    side: "input",
+    frame,
+    pipe_ref: subject.pipeRef,
+    description: subject.description,
+    name: subject.name,
+    paths,
+    run_control: frame === "composer" ? COMPOSER_RUN_COMPONENT : RUN_COMPONENT,
+    ...frame === "composer" && result ? { returns: returnsOf(result) } : {},
+    ...style ? { style: styleOf(style) } : {}
   };
-  for (const field of inputs) {
-    if (!field.required) continue;
-    for (const path of uncoveredUnder(field, joinPath(INPUTS_ROOT, field.name), offered)) {
-      problems.push(`${path} is required, and the layout offers nowhere to enter it`);
+}
+function resultBrief(subject, field, state, { frame = "page", style } = {}) {
+  const paths = [];
+  if (field.kind === "object" && !isDelegatedResult(field, frame)) {
+    paths.push({
+      depth: 0,
+      path: RESULT_ROOT,
+      kind: kindLabel(field),
+      description: field.description,
+      delegated: false
+    });
+    for (const child of field.fields) {
+      describe(child, joinPath(RESULT_ROOT, child.name), 1, "result", paths, false, frame);
     }
+  } else {
+    describe(field, RESULT_ROOT, 0, "result", paths, false, frame);
   }
-  return problems;
-}
-function layoutFits(descriptor, spec) {
-  return layoutProblems(descriptor, spec).length === 0;
+  return {
+    side: "result",
+    frame,
+    pipe_ref: subject.pipeRef,
+    description: subject.description,
+    paths,
+    ...style ? { style: styleOf(style) } : {},
+    sample_state: JSON.stringify(state, null, 2)
+  };
 }
 function specToJsonl(spec) {
   const lines = [];
@@ -1764,7 +2077,7 @@ function specFromJsonl(jsonl) {
 function jsonlLines(jsonl) {
   return jsonl.split("\n").filter((line) => line.trim().length > 0);
 }
-var BrandContext = React3.createContext(null);
+var BrandContext = React4.createContext(null);
 function BrandProvider({
   manifest,
   children
@@ -1773,7 +2086,7 @@ function BrandProvider({
   return /* @__PURE__ */ jsx(BrandContext.Provider, { value: manifest, children });
 }
 function useBrand() {
-  const manifest = React3.useContext(BrandContext);
+  const manifest = React4.useContext(BrandContext);
   if (!manifest)
     throw new Error(
       "useBrand: no brand in scope. Pass `brand` to GenerativePage, or wrap the tree in BrandProvider."
@@ -1784,7 +2097,7 @@ var WEIGHTS = "400;500;600;700";
 function useWebfont(webfont) {
   const provider = webfont?.provider;
   const family = webfont?.family;
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!provider || !family) return;
     const key = `${provider}:${family}`;
     if (document.head.querySelector(`link[data-brand-webfont="${CSS.escape(key)}"]`)) return;
@@ -1804,9 +2117,19 @@ function useWebfont(webfont) {
     document.head.appendChild(link);
   }, [provider, family]);
 }
+var FrameHostContext = React4.createContext({});
+function FrameHostProvider({
+  host,
+  children
+}) {
+  return /* @__PURE__ */ jsx(FrameHostContext.Provider, { value: host, children });
+}
+function useFrameHost() {
+  return React4.useContext(FrameHostContext);
+}
 function useBoundField(literal, binding, empty, { checks, validateOn }) {
   const [boundValue, setBoundValue] = useBoundProp(literal ?? void 0, binding);
-  const [localValue, setLocalValue] = React3.useState(literal ?? empty);
+  const [localValue, setLocalValue] = React4.useState(literal ?? empty);
   const isBound = Boolean(binding);
   const hasValidation = Boolean(binding && checks?.length);
   const when = validateOn ?? "change";
@@ -1843,13 +2166,29 @@ function Card({
   props,
   children
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-card p-6 text-card-foreground", children: [
-    props.title || props.description ? /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
-      props.title ? /* @__PURE__ */ jsx("h3", { className: "text-lg leading-none font-semibold", children: props.title }) : null,
-      props.description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: props.description }) : null
-    ] }) : null,
-    children
-  ] });
+  return (
+    // A style's panel: a host writes the style's field fill onto `--input`
+    // here, as on its own panel, so the fields inside do not sink into it.
+    // A panel's corner is one and a half times a control's, as the rail's is.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-style-panel": "",
+        className: cn(
+          "rounded-[calc(var(--radius,0.5rem)*1.5)] p-6 text-card-foreground",
+          panelSurfaceClass,
+          panelFlatShadowClass
+        ),
+        children: [
+          props.title || props.description ? /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+            props.title ? /* @__PURE__ */ jsx("h3", { className: cn("text-lg leading-none", headingClass(600)), children: props.title }) : null,
+            props.description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: props.description }) : null
+          ] }) : null,
+          children
+        ]
+      }
+    )
+  );
 }
 var GAP = {
   none: "gap-0",
@@ -1929,17 +2268,26 @@ function Collapsible({
       open: props.defaultOpen ?? false,
       "data-slot": "collapsible",
       children: [
-        /* @__PURE__ */ jsx("summary", { className: "cursor-pointer list-none rounded-md px-4 py-3 text-sm font-medium select-none focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: props.title }),
+        /* @__PURE__ */ jsxs("summary", { className: "flex min-h-11 cursor-pointer list-none items-center justify-between gap-3 rounded-md px-4 py-3 text-sm font-medium select-none focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset [&::-webkit-details-marker]:hidden", children: [
+          /* @__PURE__ */ jsx("span", { children: props.title }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              "aria-hidden": "true",
+              className: "size-4 shrink-0 text-muted-foreground transition-transform [details[open]>summary_&]:rotate-180"
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 py-3", children })
       ]
     }
   );
 }
 var HEADING = {
-  h1: "text-3xl font-bold tracking-tight",
-  h2: "text-2xl font-semibold tracking-tight",
-  h3: "text-lg font-semibold",
-  h4: "text-base font-semibold"
+  h1: cn("text-3xl", headingClass(700, true)),
+  h2: cn("text-2xl", headingClass(600, true)),
+  h3: cn("text-lg", headingClass(600)),
+  h4: cn("text-base", headingClass(600))
 };
 function Heading({
   props
@@ -2053,7 +2401,7 @@ function Progress({
   ] });
 }
 function useControlId(name) {
-  return `jr-${name}-${React3.useId()}`;
+  return `jr-${name}-${React4.useId()}`;
 }
 function Input({
   props,
@@ -2116,7 +2464,8 @@ function Textarea({
     /* @__PURE__ */ jsx(FieldError, { message: field.error })
   ] });
 }
-var NATIVE_CHECK = cn("size-4", checkedAccentClass, focusOutlineClass);
+var NATIVE_CHECK = cn("size-4 shrink-0", checkedAccentClass, focusOutlineClass);
+var NATIVE_CHECK_ROW = "flex items-center gap-2 text-sm max-sm:min-h-11";
 function Radio({
   props,
   bindings,
@@ -2127,7 +2476,7 @@ function Radio({
   const labelOf = enumLabeler(props.options ?? [], useFieldPresentation());
   return /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", "aria-invalid": field.error ? true : void 0, children: [
     /* @__PURE__ */ jsx("legend", { className: LABEL, children: props.label }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: (props.options ?? []).map((option, index) => /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-2 max-sm:space-y-0", children: (props.options ?? []).map((option, index) => /* @__PURE__ */ jsxs("label", { className: NATIVE_CHECK_ROW, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2156,7 +2505,7 @@ function Checkbox({
   const id = useControlId(props.name);
   const field = useBoundField(props.checked, bindings?.checked, false, props);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "flex items-center gap-2 text-sm", children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, className: NATIVE_CHECK_ROW, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2231,9 +2580,9 @@ function Button({
     }
   );
 }
-var DescriptorContext = React3.createContext({});
+var DescriptorContext = React4.createContext({});
 function useDescriptorScope() {
-  return React3.useContext(DescriptorContext);
+  return React4.useContext(DescriptorContext);
 }
 function DescriptorProvider({
   scope,
@@ -2280,13 +2629,28 @@ function useAbsolutePath(path) {
   if (path.startsWith("/")) return path;
   return repeat ? `${repeat.basePath}/${path}` : void 0;
 }
-function MthdsField({ props }) {
-  const scope = React3.useContext(DescriptorContext);
+function withoutOptionalMark(label) {
+  return label.replace(/\s*\(optional\)\s*$/i, "") || label;
+}
+function MthdsField({
+  props
+}) {
+  const scope = React4.useContext(DescriptorContext);
   const path = useAbsolutePath(props.path) ?? "";
-  const field = scope.inputs && path ? inputFieldAtPath(scope.inputs, path) : void 0;
+  const found = scope.inputs && path ? inputFieldAtPath(scope.inputs, path) : void 0;
+  const field = React4.useMemo(
+    () => found && (props.label || props.hint) ? {
+      ...found,
+      // The control marks an optional field itself, so a label that
+      // says "(optional)" too would say it twice.
+      title: props.label ? withoutOptionalMark(props.label) : found.title,
+      description: props.hint || found.description
+    } : found,
+    [found, props.label, props.hint]
+  );
   const value = useStateValue(path);
   const { set } = useStateStore();
-  const onChange = React3.useCallback((next) => set(path, next), [set, path]);
+  const onChange = React4.useCallback((next) => set(path, next), [set, path]);
   if (!field) return /* @__PURE__ */ jsx(Unresolved, { path: props.path, side: "input" });
   return /* @__PURE__ */ jsx(
     FieldRenderer,
@@ -2300,7 +2664,7 @@ function MthdsField({ props }) {
   );
 }
 function MthdsResult({ props }) {
-  const scope = React3.useContext(DescriptorContext);
+  const scope = React4.useContext(DescriptorContext);
   const path = useAbsolutePath(props.path) ?? "";
   const field = scope.result && path ? resultFieldAtPath(scope.result, path) : void 0;
   const value = useStateValue(path);
@@ -2313,7 +2677,7 @@ function AccessibleSelect({ props, bindings, emit }) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React3.useState("");
+  const [localValue, setLocalValue] = React4.useState("");
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue ?? "" : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
@@ -2337,7 +2701,7 @@ function AccessibleSelect({ props, bindings, emit }) {
           emit("change");
         },
         children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { id, className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: props.placeholder ?? "Select..." }) }),
+          /* @__PURE__ */ jsx(SelectTrigger, { id, className: "h-11 w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: props.placeholder ?? "Select..." }) }),
           /* @__PURE__ */ jsx(SelectContent, { children: (props.options ?? []).map((option, index) => /* @__PURE__ */ jsx(SelectItem, { value: option, children: labelOf(option) }, `${index}-${option}`)) })
         ]
       }
@@ -2345,7 +2709,7 @@ function AccessibleSelect({ props, bindings, emit }) {
     errors.length > 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: errors[0] }) : null
   ] });
 }
-function valueAt(row, relativePath) {
+function valueAt2(row, relativePath) {
   let current = row;
   for (const segment of relativePath.split("/").filter((part) => part.length > 0)) {
     if (typeof current !== "object" || current === null) return void 0;
@@ -2362,6 +2726,21 @@ function formatCell(value) {
   if (Array.isArray(value)) return value.map(formatCell).join(", ");
   return JSON.stringify(value);
 }
+function formatColumnCell(value, format) {
+  const written = format === "date" ? readDateContent(value)?.date : void 0;
+  const day = written === void 0 ? null : /^\d{4}-\d{2}-\d{2}/.exec(written);
+  if (day) {
+    const date = /* @__PURE__ */ new Date(`${day[0]}T12:00:00Z`);
+    if (!Number.isNaN(date.getTime()))
+      return date.toLocaleDateString("en-GB", {
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+        timeZone: "UTC"
+      });
+  }
+  return formatCell(value);
+}
 function DataTable({ props }) {
   const rows = Array.isArray(props.rows) ? props.rows : [];
   const columns = props.columns ?? [];
@@ -2376,7 +2755,7 @@ function DataTable({ props }) {
       },
       column.path
     )) }) }),
-    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx("tr", { className: "border-b border-border/60 last:border-b-0", children: columns.map((column) => /* @__PURE__ */ jsx("td", { className: "px-2.5 py-1.5 align-top text-foreground", children: formatCell(valueAt(row, column.path)) }, column.path)) }, index)) })
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx("tr", { className: "border-b border-border/60 last:border-b-0", children: columns.map((column) => /* @__PURE__ */ jsx("td", { className: "px-2.5 py-1.5 align-top text-foreground", children: formatColumnCell(valueAt2(row, column.path), column.format) }, column.path)) }, index)) })
   ] }) });
 }
 function numberFormat(format) {
@@ -2428,14 +2807,14 @@ function Split({
 }
 function Tabs({ props, children }) {
   const tabs = props.tabs ?? [];
-  const panels = React3.Children.toArray(children);
-  const [value, setValue] = React3.useState(tabs[0]?.value ?? "");
+  const panels = React4.Children.toArray(children);
+  const [value, setValue] = React4.useState(tabs[0]?.value ?? "");
   return /* @__PURE__ */ jsxs(TabsPrimitive.Root, { value, onValueChange: setValue, className: "w-full", children: [
-    /* @__PURE__ */ jsx(TabsPrimitive.List, { className: "inline-flex h-10 items-center justify-start rounded-md bg-muted p-1 text-muted-foreground", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TabsPrimitive.List, { className: "inline-flex h-10 items-center justify-start rounded-md bg-muted p-1 text-muted-foreground max-sm:h-auto max-sm:flex-wrap", children: tabs.map((tab) => /* @__PURE__ */ jsx(
       TabsPrimitive.Trigger,
       {
         value: tab.value,
-        className: "inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        className: "inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm max-sm:min-h-11 max-sm:min-w-11",
         children: tab.label
       },
       tab.value
@@ -2451,7 +2830,7 @@ function Tabs({ props, children }) {
     ))
   ] });
 }
-var BUTTON_BASE = "inline-flex h-10 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50";
+var BUTTON_BASE = "inline-flex min-h-11 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50";
 var PRIMARY_BUTTON = cn(BUTTON_BASE, "bg-primary text-primary-foreground hover:bg-primary/90");
 var SECONDARY_BUTTON = cn(
   BUTTON_BASE,
@@ -2459,8 +2838,8 @@ var SECONDARY_BUTTON = cn(
 );
 function Steps({ props, children }) {
   const steps = props.steps ?? [];
-  const panels = React3.Children.toArray(children);
-  const [index, setIndex] = React3.useState(0);
+  const panels = React4.Children.toArray(children);
+  const [index, setIndex] = React4.useState(0);
   const last = steps.length - 1;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
     /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-x-5 gap-y-2", children: steps.map((label, position) => /* @__PURE__ */ jsxs(
@@ -2589,7 +2968,7 @@ function Segmented({ props, bindings, emit }) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React3.useState("");
+  const [localValue, setLocalValue] = React4.useState("");
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue ?? "" : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
@@ -2615,7 +2994,7 @@ function Segmented({ props, bindings, emit }) {
             value: option,
             variant: "outline",
             size: "sm",
-            className: "rounded-full px-3.5 data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+            className: "rounded-full px-3.5 data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground max-sm:h-11 max-sm:min-w-11",
             children: labelOf(option)
           },
           option
@@ -2629,7 +3008,7 @@ function NumberInput({ props, bindings, emit }) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React3.useState(void 0);
+  const [localValue, setLocalValue] = React4.useState(void 0);
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
@@ -2655,7 +3034,7 @@ function NumberInput({ props, bindings, emit }) {
           },
           className: cn(
             fieldControlClass,
-            "h-10 px-3 tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+            "h-11 px-3 tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
           )
         }
       ),
@@ -2703,7 +3082,330 @@ var components2 = {
   Metric: (ctx) => /* @__PURE__ */ jsx(Metric, { ...ctx })
 };
 var generativeRenderers = components2;
-var ResultSlotContext = React3.createContext(null);
+var RADIUS = "rounded-[calc(var(--radius,0.5rem)*1.5)]";
+function useAbsolute(path) {
+  const repeat = useRepeatScope();
+  if (path.startsWith("/")) return path;
+  if (!repeat) return path;
+  return path === "" ? repeat.basePath : `${repeat.basePath}/${path}`;
+}
+function asDate(value) {
+  if (typeof value !== "string" || !/^\d{4}-\d{2}-\d{2}/.test(value)) return void 0;
+  const date = /* @__PURE__ */ new Date(`${value.slice(0, 10)}T12:00:00Z`);
+  return Number.isNaN(date.getTime()) ? void 0 : date;
+}
+function Composer({ props, children, emit }) {
+  const host = useFrameHost();
+  const busy = useDescriptorScope().env?.disabled ?? false;
+  const two = props.columns === "2";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("mx-auto flex w-full flex-col gap-7", two ? "max-w-[980px]" : "max-w-[740px]"),
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-[32px] leading-[1.1] text-balance text-foreground sm:text-[38px] sm:leading-[1.08]",
+                headingClass(700, true)
+              ),
+              children: props.headline
+            }
+          ),
+          props.lede ? /* @__PURE__ */ jsx("p", { className: "mt-3.5 max-w-[62ch] text-[17px] leading-relaxed text-muted-foreground", children: props.lede }) : null
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-style-panel": "",
+            className: cn(RADIUS, panelSurfaceClass, panelFlatShadowClass, "p-7 max-sm:p-5"),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "grid gap-8",
+                    two && "md:block md:columns-2 md:gap-x-10 md:[&>*+*]:mt-8 md:[&>*>h2]:break-after-avoid md:[&>*>*:not(h2)]:break-inside-avoid"
+                  ),
+                  children
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 z-[2] -mx-7 -mb-7 mt-7 flex items-center justify-between gap-4 rounded-b-[calc(var(--radius,0.5rem)*1.5)] border-t border-border [background-color:var(--panel-fill,var(--card,hsl(0_0%_100%)))] px-7 pt-[18px] pb-7 max-sm:-mx-5 max-sm:-mb-5 max-sm:flex-col-reverse max-sm:items-stretch max-sm:px-5 max-sm:pb-5", children: [
+                host.eta ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 text-sm text-muted-foreground max-sm:justify-center", children: [
+                  /* @__PURE__ */ jsx(Clock, { className: "size-4", "aria-hidden": "true" }),
+                  " ",
+                  host.eta
+                ] }) : /* @__PURE__ */ jsx("span", {}),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: busy,
+                    onClick: () => emit("press"),
+                    className: cn(
+                      "inline-flex min-h-11 items-center justify-center gap-2 rounded-[var(--radius,0.5rem)] bg-primary px-[22px] text-[15px] font-semibold text-primary-foreground transition-all hover:bg-primary/90",
+                      actionShadowClass,
+                      focusOutlineClass,
+                      "disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:bg-primary"
+                    ),
+                    children: [
+                      props.runLabel,
+                      " ",
+                      /* @__PURE__ */ jsx(ArrowRight, { className: "size-4", "aria-hidden": "true" })
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        props.notes && props.notes.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "grid gap-x-8 gap-y-2.5 px-1 sm:grid-cols-2", children: props.notes.map((note, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2.5 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: linkTextClass, children: "\u2713" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0", children: note })
+        ] }, index)) }) : null
+      ]
+    }
+  );
+}
+function FieldGroup({ props, children }) {
+  return /* @__PURE__ */ jsxs("section", { className: "flex min-w-0 flex-col gap-5", children: [
+    props.title ? /* @__PURE__ */ jsx("h2", { className: cn("text-[17px] leading-snug text-foreground", headingClass(600)), children: props.title }) : null,
+    children
+  ] });
+}
+function ResultHeader({ props }) {
+  const host = useFrameHost();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-6 max-sm:flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      props.eyebrow ? /* @__PURE__ */ jsx("p", { className: cn("mb-1.5 text-[13px] font-semibold", linkTextClass), children: props.eyebrow }) : null,
+      /* @__PURE__ */ jsx(
+        "h1",
+        {
+          className: cn(
+            "text-[28px] leading-[1.12] text-balance text-foreground sm:text-[32px]",
+            headingClass(700, true)
+          ),
+          children: props.title
+        }
+      ),
+      props.subtitle ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-[15px] text-muted-foreground", children: props.subtitle }) : null
+    ] }),
+    host.actions && host.actions.length > 0 && host.onAction ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 gap-2", children: host.actions.map((label, i) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => host.onAction?.(label),
+        className: cn(
+          "inline-flex min-h-11 items-center rounded-[var(--radius,0.5rem)] px-4 text-sm font-semibold sm:min-h-9",
+          focusOutlineClass,
+          i === 0 ? "bg-primary text-primary-foreground" : "border border-border bg-background text-foreground"
+        ),
+        children: label
+      },
+      `${i}-${label}`
+    )) }) : null
+  ] });
+}
+function segmentMix(index, count) {
+  return count <= 1 ? 100 : Math.round(100 - index * 75 / (count - 1));
+}
+function segmentColor(index, count) {
+  return `color-mix(in oklab, var(--link, var(--primary, hsl(240 5.9% 10%))) ${segmentMix(index, count)}%, var(--muted, hsl(240 4.8% 95.9%)))`;
+}
+function amount(value, unit) {
+  if (unit && /^[A-Z]{3}$/.test(unit)) {
+    try {
+      return new Intl.NumberFormat("en-GB", {
+        style: "currency",
+        currency: unit,
+        maximumFractionDigits: 0
+      }).format(value);
+    } catch {
+    }
+  }
+  const n = new Intl.NumberFormat("en-GB", { maximumFractionDigits: 2 }).format(value);
+  return unit ? `${n} ${unit}` : n;
+}
+function ProportionBar({ props }) {
+  const rows = Array.isArray(props.items) ? props.items : [];
+  const parts = rows.map((row) => ({
+    label: String(row[props.labelKey] ?? ""),
+    value: Number(row[props.valueKey] ?? 0)
+  })).filter((p) => Number.isFinite(p.value) && p.value > 0);
+  const sum = parts.reduce((s, p) => s + p.value, 0);
+  const total = typeof props.total === "number" ? props.total : sum;
+  const scale = Math.max(sum, total, typeof props.of === "number" ? props.of : 0) || 1;
+  const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-style-panel": "",
+      className: cn(
+        RADIUS,
+        panelSurfaceClass,
+        panelFlatShadowClass,
+        "flex flex-col gap-3.5 px-6 py-5"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[15px] text-muted-foreground", children: props.label }),
+          /* @__PURE__ */ jsx("strong", { className: "text-2xl font-semibold tabular-nums text-foreground", children: amount(total, props.unit) }),
+          typeof props.of === "number" ? /* @__PURE__ */ jsxs("span", { className: "text-[15px] text-muted-foreground", children: [
+            "of ",
+            amount(props.of, props.unit)
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex h-2 gap-0.5 overflow-hidden rounded-full bg-muted", "aria-hidden": "true", children: parts.map((p, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              width: `${p.value / scale * 100}%`,
+              background: segmentColor(i, parts.length)
+            }
+          },
+          `${i}-${p.label}`
+        )) }),
+        /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-x-5 gap-y-1", children: parts.map((p, i) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "inline-flex items-center gap-2 text-sm text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "size-2 rounded-[2px]",
+                  style: {
+                    background: segmentColor(i, parts.length)
+                  },
+                  "aria-hidden": "true"
+                }
+              ),
+              cap(p.label),
+              " ",
+              amount(p.value, props.unit)
+            ]
+          },
+          `${i}-${p.label}`
+        )) })
+      ]
+    }
+  );
+}
+var COLOR_VALUE = /^(?:#[0-9a-f]{3,8}|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch)\([\w\s.,%/+-]*\)|[a-z]+)$/i;
+function Swatches({ props }) {
+  const colors = (props.colors ?? []).filter(
+    (c) => typeof c === "string" && COLOR_VALUE.test(c.trim())
+  );
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: colors.map((color, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "h-7 w-11 rounded-[3px] border border-border",
+        style: { backgroundColor: color.trim() }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px] text-muted-foreground", children: color })
+  ] }, `${color}-${i}`)) });
+}
+var ASPECT = {
+  "16:9": "aspect-video",
+  "4:3": "aspect-[4/3]",
+  "1:1": "aspect-square"
+};
+function Picture({
+  props
+}) {
+  const path = useAbsolute(props.path);
+  const value = useStateValue(path);
+  const resolve = useResolveUrl();
+  const content = readImageContent(value);
+  const src = content ? viewableUrl(resolve?.(content.url)) ?? viewableUrl(content.publicUrl) ?? viewableUrl(content.url) : void 0;
+  const aspect = props.aspect && props.aspect !== "auto" ? ASPECT[props.aspect] : void 0;
+  if (!src) return null;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: props.alt ?? content?.caption ?? "",
+      referrerPolicy: "no-referrer",
+      className: cn(
+        "block w-full rounded-[var(--radius,0.5rem)] border border-border bg-muted object-cover",
+        aspect
+      )
+    }
+  );
+}
+function present(value) {
+  return value !== void 0 && value !== null && value !== "";
+}
+function Fact({
+  props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 rounded-[var(--radius,0.5rem)] border border-border bg-background px-4 py-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[13px] text-muted-foreground", children: props.label }),
+    /* @__PURE__ */ jsx("span", { className: "text-[16px] font-medium text-foreground tabular-nums", children: present(props.value) ? String(props.value) : "\u2014" }),
+    props.detail ? /* @__PURE__ */ jsx("span", { className: "text-[13px] text-muted-foreground", children: props.detail }) : null
+  ] });
+}
+function Detail({ props }) {
+  if (!present(props.value)) return null;
+  return (
+    // A rule between the rows of a list of details, never under one set in a
+    // row: there it read as an underline on every detail but the last.
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(0,8.5rem)_minmax(0,1fr)] gap-3 border-b border-border py-2.5 text-[14px] last:border-b-0 [.flex-row>&]:border-b-0 [.flex-row>&]:grid-cols-[auto_minmax(0,1fr)]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: props.label }),
+      /* @__PURE__ */ jsx("span", { className: "text-foreground", children: String(props.value) })
+    ] })
+  );
+}
+var DATE_STYLES = {
+  long: { weekday: "long", day: "numeric", month: "long", year: "numeric", timeZone: "UTC" },
+  short: { day: "numeric", month: "short", year: "numeric", timeZone: "UTC" },
+  weekday: { weekday: "short", day: "numeric", month: "long", timeZone: "UTC" }
+};
+function DateText({ props }) {
+  const date = asDate(props.value);
+  if (!date) return null;
+  const tone = props.tone === "accent" ? cn("text-[13px] font-semibold", linkTextClass) : props.tone === "muted" ? "text-sm text-muted-foreground" : "text-[15px] text-foreground";
+  return /* @__PURE__ */ jsx("span", { className: cn("block", tone), children: date.toLocaleDateString("en-GB", DATE_STYLES[props.style ?? "long"]) });
+}
+function TextList({ props }) {
+  const items = Array.isArray(props.items) ? props.items.filter((x) => typeof x === "string" && x.trim()) : [];
+  if (items.length === 0) return null;
+  const marker = props.marker ?? "bullet";
+  const List2 = marker === "number" ? "ol" : "ul";
+  return /* @__PURE__ */ jsx(List2, { className: "flex flex-col gap-2.5", children: items.map((text, index) => /* @__PURE__ */ jsxs("li", { className: "flex gap-3 text-[15px] leading-relaxed text-foreground", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "mt-[0.55em] shrink-0",
+          marker === "bullet" && "size-1.5 rounded-full bg-[color:var(--link,var(--primary,hsl(240_5.9%_10%)))]",
+          marker === "number" && cn("mt-0 min-w-5 text-sm font-semibold tabular-nums", linkTextClass),
+          marker === "check" && cn("mt-0", linkTextClass)
+        ),
+        children: marker === "number" ? `${index + 1}.` : marker === "check" ? "\u2713" : null
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0", children: String(text) })
+  ] }, index)) });
+}
+var frameRenderers = {
+  TextList: (ctx) => /* @__PURE__ */ jsx(TextList, { ...ctx }),
+  DateText: (ctx) => /* @__PURE__ */ jsx(DateText, { ...ctx }),
+  Composer: (ctx) => /* @__PURE__ */ jsx(Composer, { ...ctx }),
+  FieldGroup: (ctx) => /* @__PURE__ */ jsx(FieldGroup, { ...ctx }),
+  ResultHeader: (ctx) => /* @__PURE__ */ jsx(ResultHeader, { ...ctx }),
+  ProportionBar: (ctx) => /* @__PURE__ */ jsx(ProportionBar, { ...ctx }),
+  Swatches: (ctx) => /* @__PURE__ */ jsx(Swatches, { ...ctx }),
+  Picture: (ctx) => /* @__PURE__ */ jsx(Picture, { ...ctx }),
+  Fact: (ctx) => /* @__PURE__ */ jsx(Fact, { ...ctx }),
+  Detail: (ctx) => /* @__PURE__ */ jsx(Detail, { ...ctx })
+};
+var ResultSlotContext = React4.createContext(null);
 function ResultSlotProvider({
   slot,
   children
@@ -2711,7 +3413,7 @@ function ResultSlotProvider({
   return /* @__PURE__ */ jsx(ResultSlotContext.Provider, { value: slot, children });
 }
 function useResultSlot() {
-  return React3.useContext(ResultSlotContext);
+  return React4.useContext(ResultSlotContext);
 }
 var CONTAINER = "mx-auto w-full max-w-6xl px-6 sm:px-8";
 var LABEL2 = "block text-[13.5px] leading-none font-medium text-foreground";
@@ -2773,12 +3475,21 @@ function Hero({ props }) {
         children: props.eyebrow
       }
     ) : null,
-    /* @__PURE__ */ jsx("h1", { className: "max-w-2xl text-4xl font-bold tracking-tight text-foreground sm:text-[44px] sm:leading-[1.15]", children: props.headline }),
+    /* @__PURE__ */ jsx(
+      "h1",
+      {
+        className: cn(
+          "max-w-2xl text-4xl text-foreground sm:text-[44px] sm:leading-[1.15]",
+          headingClass(700, true)
+        ),
+        children: props.headline
+      }
+    ),
     props.lede ? /* @__PURE__ */ jsx("p", { className: "mt-4 max-w-2xl text-[17px] leading-relaxed text-muted-foreground", children: props.lede }) : null
   ] });
 }
 function Workspace({ props, children }) {
-  const [work, rail] = React3.Children.toArray(children);
+  const [work, rail] = React4.Children.toArray(children);
   const railLeft = props.rail === "left";
   return /* @__PURE__ */ jsxs(
     "div",
@@ -2811,7 +3522,7 @@ function ResultPanel() {
   const slot = useResultSlot();
   if (!slot?.content) return null;
   return /* @__PURE__ */ jsxs("section", { className: "border-t border-border py-9", "data-testid": "result-panel", "aria-live": "polite", children: [
-    /* @__PURE__ */ jsx("h2", { className: "mb-6 text-xl font-semibold tracking-tight text-foreground", children: slot.title ?? "Result" }),
+    /* @__PURE__ */ jsx("h2", { className: cn("mb-6 text-xl text-foreground", headingClass(600, true)), children: slot.title ?? "Result" }),
     slot.content
   ] });
 }
@@ -2820,7 +3531,7 @@ function Section({ props, children }) {
     /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-3", children: [
         props.number ? /* @__PURE__ */ jsx("span", { className: cn("font-mono text-[12px]", linkTextClass), children: props.number }) : null,
-        /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold tracking-tight text-foreground", children: props.title })
+        /* @__PURE__ */ jsx("h2", { className: cn("text-xl text-foreground", headingClass(600, true)), children: props.title })
       ] }),
       props.lede ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground", children: props.lede }) : null
     ] }),
@@ -2833,34 +3544,50 @@ function Rail({ props, children }) {
     // the `@theme inline` mapping and does not inherit its fallback - it has to
     // carry its own, or a host that defines no tokens loses the declaration
     // outright. See src/styles/tailwind-entry.css.
-    /* @__PURE__ */ jsxs("div", { className: "rounded-[calc(var(--radius,0.5rem)*1.5)] border border-border bg-card p-7 text-card-foreground shadow-xl", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-[11px] font-semibold tracking-[0.15em] text-muted-foreground uppercase", children: props.title }),
-      /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col", children })
-    ] })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-style-panel": "",
+        className: cn(
+          "rounded-[calc(var(--radius,0.5rem)*1.5)] p-7 text-card-foreground",
+          panelSurfaceClass,
+          panelRaisedShadowClass
+        ),
+        children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-[11px] font-semibold tracking-[0.15em] text-muted-foreground uppercase", children: props.title }),
+          /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col", children })
+        ]
+      }
+    )
   );
 }
-function present(value) {
+function present2(value) {
   return value !== void 0 && value !== null && value !== "";
 }
 function SummaryRow({ props }) {
-  const text = [props.value, props.detail].filter(present).map(String).join(props.separator ?? " ");
+  const text = [props.value, props.detail].filter(present2).map(String).join(props.separator ?? " ");
   return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-4 border-b border-border/60 py-3 first:pt-0 last:border-b-0", children: [
     /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[13px] text-muted-foreground", children: props.label }),
     text ? /* @__PURE__ */ jsx("span", { className: "text-right text-[13px] font-medium text-foreground", children: text }) : /* @__PURE__ */ jsx("span", { className: "text-[13px] text-muted-foreground/50", children: props.placeholder ?? "\u2014" })
   ] });
 }
 function Cta({ props, emit }) {
+  const busy = useDescriptorScope().env?.disabled ?? false;
   return /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
+        disabled: busy,
         onClick: () => emit("press"),
         className: cn(
-          "inline-flex h-12 w-full items-center justify-center rounded-lg bg-primary px-6 text-sm font-semibold text-primary-foreground",
-          // The fallback is not decoration here either - see Rail above.
-          "shadow-[0_0_28px_color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_35%,transparent)] transition-all hover:bg-primary/90 hover:shadow-[0_0_44px_color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_50%,transparent)]",
-          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
+          "inline-flex h-12 w-full items-center justify-center rounded-lg bg-primary px-6 text-sm font-semibold text-primary-foreground transition-all hover:bg-primary/90",
+          // The page's call-to-action shadow, or the glow in the button colour
+          // it had. Focus is an outline, which no shadow a style sets can
+          // replace or hide.
+          actionShadowClass,
+          focusOutlineClass,
+          "disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:bg-primary"
         ),
         children: props.label
       }
@@ -2891,7 +3618,7 @@ function useTextField(props, bindings) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React3.useState("");
+  const [localValue, setLocalValue] = React4.useState("");
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue ?? "" : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
@@ -2980,7 +3707,8 @@ var { registry: generativeRegistry } = defineRegistry(catalog, {
     Rail: (ctx) => /* @__PURE__ */ jsx(Rail, { ...ctx }),
     SummaryRow: (ctx) => /* @__PURE__ */ jsx(SummaryRow, { ...ctx }),
     Cta: (ctx) => /* @__PURE__ */ jsx(Cta, { ...ctx }),
-    Footer: (ctx) => /* @__PURE__ */ jsx(Footer, { ...ctx })
+    Footer: (ctx) => /* @__PURE__ */ jsx(Footer, { ...ctx }),
+    ...frameRenderers
   }
 });
 function GenerativePage({
@@ -2993,24 +3721,40 @@ function GenerativePage({
   brand
 }) {
   const { inputs, result, env, idPrefix } = scope;
-  const stableScope = React3.useMemo(
+  const stableScope = React4.useMemo(
     () => ({ inputs, result, env, idPrefix }),
     [inputs, result, env, idPrefix]
   );
-  const latest = React3.useRef({ onRun, store });
-  React3.useEffect(() => {
+  const latest = React4.useRef({ onRun, store });
+  React4.useEffect(() => {
     latest.current = { onRun, store };
   });
-  const [handlers] = React3.useState(() => ({
+  const running = React4.useRef(false);
+  const [handlers] = React4.useState(() => ({
     run: () => {
-      latest.current.onRun?.(latest.current.store.getSnapshot());
+      if (running.current) return void 0;
+      running.current = true;
+      let pending;
+      try {
+        pending = latest.current.onRun?.(latest.current.store.getSnapshot());
+      } catch (error) {
+        running.current = false;
+        throw error;
+      }
+      if (isThenable(pending)) {
+        return Promise.resolve(pending).finally(() => {
+          running.current = false;
+        });
+      }
+      running.current = false;
+      return void 0;
     }
   }));
   const page = /* @__PURE__ */ jsx(DescriptorProvider, { scope: stableScope, children: /* @__PURE__ */ jsx(JSONUIProvider, { registry, store, handlers, children: /* @__PURE__ */ jsx(Renderer, { spec, registry, loading }) }) });
   return brand ? /* @__PURE__ */ jsx(BrandProvider, { manifest: brand, children: page }) : page;
 }
 function useStoreSnapshot(store) {
-  return React3.useSyncExternalStore(
+  return React4.useSyncExternalStore(
     store.subscribe,
     store.getSnapshot,
     store.getServerSnapshot ?? store.getSnapshot
@@ -3063,6 +3807,8 @@ function fixtureId(fixture) {
   return [
     fixture.producer,
     fixture.model,
+    fixture.frame ?? null,
+    fixture.style ?? null,
     fixture.seed ? "seeded" : null,
     fixture.critic ? "critic" : null
   ].filter((part) => part !== null).join("--");
@@ -3074,7 +3820,10 @@ var PRODUCER_LABEL = {
 };
 function fixtureLabel(fixture) {
   const parts = [PRODUCER_LABEL[fixture.producer], fixture.model];
+  if (fixture.frame) parts.push(`${fixture.frame} frame`);
+  if (fixture.style) parts.push(`${fixture.style} style`);
   if (fixture.seed) parts.push("with a seed");
+  if (fixture.repairs) parts.push(`repaired \xD7 ${fixture.repairs}`);
   if (fixture.critic) {
     parts.push(
       `${fixture.critic.model} critic \xD7 ${fixture.critic.rounds} round${fixture.critic.rounds === 1 ? "" : "s"}`
@@ -3093,6 +3842,6 @@ function findFixture(fixtures, pipeRef, id) {
   return found;
 }
 
-export { BrandProvider, COMPONENT_NAMES, COMPONENT_RENDERINGS, CUSTOM_COMPONENTS, DESIGNER_BRIEF_CONCEPT, DESIGNER_CATALOG_CONCEPT, DescriptorProvider, GenerativePage, ICON_NAMES, INPUTS_ROOT, METRIC_FORMATS, PICKED_SHADCN, PRODUCT_COMPONENTS, PROMPT_HASH, RESULT_ROOT, ResultSlotProvider, absoluteHatchPath, catalog, designerCatalog, fieldAtSegments, findFixture, fixtureId, fixtureLabel, formatProblems, generativeRegistry, generativeRenderers, inputBrief, inputFieldAtPath, isDelegatedInput, isDelegatedResult, joinPath, jsonlLines, layoutFits, layoutProblems, pathFromDomId, payloadToState, repeatBasePathOf, resultBrief, resultFieldAtPath, segmentsUnder, specFromJsonl, specToJsonl, useBrand, useDescriptorScope, useResultSlot, useStoreSnapshot, validateAgainstCatalog };
+export { BrandProvider, COMPONENT_NAMES, COMPONENT_RENDERINGS, COMPOSER_COMPONENTS, CUSTOM_COMPONENTS, DESIGNER_BRIEF_CONCEPT, DESIGNER_CATALOG_CONCEPT, DescriptorProvider, FRAMES, FRAME_COMPONENTS, FrameHostProvider, GenerativePage, ICON_NAMES, INPUTS_ROOT, METRIC_FORMATS, PICKED_SHADCN, PRODUCT_COMPONENTS, PROMPT_HASH, REPAIR_ATTEMPTS, RESULT_COMPONENTS, RESULT_ROOT, ResultSlotProvider, absoluteHatchPath, catalog, componentNamesFor, designerCatalog, domIdFor, fieldAtSegments, findFixture, fixtureId, fixtureLabel, formatProblems, frameCatalog, generativeRegistry, generativeRenderers, inputBrief, inputFieldAtPath, isDelegatedInput, isDelegatedResult, joinPath, jsonlLines, layoutCheckProblems, layoutFits, layoutProblems, pathFromDomId, payloadToState, promptHashSubject, repeatBasePathOf, resultBrief, resultFieldAtPath, seedLine, segmentsUnder, specFromJsonl, specToJsonl, useBrand, useDescriptorScope, useFrameHost, useResultSlot, useStoreSnapshot, validateAgainstCatalog };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map