@pipelex/mthds-form 0.31.0 → 0.32.0

package/dist/generative/index.js

@@ -1,2083 +1,33 @@
 "use client";
-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 { cn, headingClass, checkedAccentClass, focusOutlineClass, useResolveUrl, panelSurfaceClass, panelFlatShadowClass, linkTextClass, actionShadowClass, panelRaisedShadowClass, fieldControlClass, ResultRoot, ResultField, FieldRenderer, enumLabeler, useFieldPresentation, ToggleGroup, ToggleGroupItem, selectedFillStrongClass, Switch, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, selectedBorderClass, selectedFillClass, isThenable } from '../chunk-PCNFELNT.js';
+import { baseCatalog, catalog, frameComponents, resultFieldAtPath, segmentsUnder, RESULT_ROOT, inputFieldAtPath } from '../chunk-VBXFGUCG.js';
+export { COMPONENT_NAMES, COMPONENT_RENDERINGS, COMPOSER_COMPONENTS, CUSTOM_COMPONENTS, DESIGNER_BRIEF_CONCEPT, DESIGNER_CATALOG_CONCEPT, FRAMES, FRAME_COMPONENTS, ICON_NAMES, INPUTS_ROOT, METRIC_FORMATS, PICKED_SHADCN, PRODUCT_COMPONENTS, PROMPT_HASH, REPAIR_ATTEMPTS, RESULT_COMPONENTS, RESULT_ROOT, absoluteHatchPath, catalog, componentNamesFor, designerCatalog, fieldAtSegments, findFixture, fixtureId, fixtureLabel, formatProblems, frameCatalog, inputBrief, inputFieldAtPath, isDelegatedInput, isDelegatedResult, joinPath, jsonlLines, layoutCheckProblems, layoutFits, layoutProblems, payloadToState, promptHashSubject, repeatBasePathOf, resultBrief, resultFieldAtPath, seedLine, segmentsUnder, specFromJsonl, specToJsonl, validateAgainstCatalog } from '../chunk-VBXFGUCG.js';
 import '../chunk-4VAO6BDE.js';
 export { seedInputs } from '../chunk-VH5CDQDR.js';
 import '../chunk-L23R3JNQ.js';
 import '../chunk-56WECFBD.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 React4 from 'react';
-import { defineRegistry, useStateValue, useStateStore, useBoundProp, useFieldValidation, useRepeatScope, JSONUIProvider, Renderer } from '@json-render/react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-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(
-  (s) => ({
-    spec: s.object({
-      root: s.string(),
-      elements: s.record(
-        s.object({
-          type: s.ref("catalog.components"),
-          props: s.propsOf("catalog.components"),
-          children: s.array(s.string()),
-          slots: { ...s.record(s.array(s.string())), ...s.optional() },
-          visible: { ...s.any(), ...s.optional() },
-          repeat: { ...s.any(), ...s.optional() }
-        })
-      )
-    }),
-    catalog: s.object({
-      components: s.map({
-        props: s.zod(),
-        slots: s.array(s.string()),
-        description: s.string(),
-        example: s.any()
-      }),
-      actions: s.map({
-        params: s.zod(),
-        description: s.string()
-      })
-    })
-  }),
-  {
-    // The runtime handles these four without a registry handler; the names and
-    // the wording are the React schema's, so a model that has seen json-render
-    // before recognises them. The validator reads them to know which actions
-    // need no handler, and `designerCatalog()` lists them first, marked
-    // built-in, so the method's prompt names them beside the catalog's own.
-    builtInActions: [
-      {
-        name: "setState",
-        description: "Update a value in the state model at the given statePath. Params: { statePath: string, value: any }"
-      },
-      {
-        name: "pushState",
-        description: "Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }."
-      },
-      {
-        name: "removeState",
-        description: "Remove an item from an array in state by index. Params: { statePath: string, index: number }"
-      },
-      {
-        name: "validateForm",
-        description: "Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation."
-      }
-    ]
-  }
-);
-var validationCheckSchema = z.array(
-  z.object({
-    type: z.string(),
-    message: z.string(),
-    args: z.record(z.string(), z.unknown()).optional()
-  })
-).nullable();
-var validateOnSchema = z.enum(["change", "blur", "submit"]).nullable();
-var shadcnComponentDefinitions = {
-  // ── Layout ────────────────────────────────────────────────────────────────
-  Card: {
-    props: z.object({
-      title: z.string().nullable(),
-      description: z.string().nullable(),
-      maxWidth: z.enum(["sm", "md", "lg", "full"]).nullable(),
-      centered: z.boolean().nullable(),
-      className: z.string().nullable().describe("Additional CSS classes")
-    }),
-    slots: ["default"],
-    description: "Container card for content sections. Use for forms/content boxes, NOT for page headers.",
-    example: { title: "Overview", description: "Your account summary" }
-  },
-  Stack: {
-    props: z.object({
-      direction: z.enum(["horizontal", "vertical"]).nullable(),
-      gap: z.enum(["none", "sm", "md", "lg", "xl"]).nullable(),
-      align: z.enum(["start", "center", "end", "stretch"]).nullable(),
-      justify: z.enum(["start", "center", "end", "between", "around"]).nullable(),
-      className: z.string().nullable().describe("Additional CSS classes")
-    }),
-    slots: ["default"],
-    description: "Flex container for layouts",
-    example: { direction: "vertical", gap: "md" }
-  },
-  Grid: {
-    props: z.object({
-      columns: z.number().nullable(),
-      gap: z.enum(["sm", "md", "lg", "xl"]).nullable(),
-      className: z.string().nullable().describe("Additional CSS classes")
-    }),
-    slots: ["default"],
-    description: "Grid layout (1-6 columns)",
-    example: { columns: 3, gap: "md" }
-  },
-  Separator: {
-    props: z.object({
-      orientation: z.enum(["horizontal", "vertical"]).nullable()
-    }),
-    description: "Visual separator line"
-  },
-  Collapsible: {
-    props: z.object({
-      title: z.string(),
-      defaultOpen: z.boolean().nullable()
-    }),
-    slots: ["default"],
-    description: "Collapsible section with trigger. Children render inside."
-  },
-  // ── Content ───────────────────────────────────────────────────────────────
-  Heading: {
-    props: z.object({
-      text: z.string(),
-      level: z.enum(["h1", "h2", "h3", "h4"]).nullable()
-    }),
-    description: "Heading text (h1-h4)",
-    example: { text: "Welcome", level: "h1" }
-  },
-  Text: {
-    props: z.object({
-      text: z.string(),
-      variant: z.enum(["body", "caption", "muted", "lead", "code"]).nullable()
-    }),
-    description: "Paragraph text",
-    example: { text: "Hello, world!" }
-  },
-  Avatar: {
-    props: z.object({
-      src: z.string().nullable(),
-      name: z.string(),
-      size: z.enum(["sm", "md", "lg"]).nullable()
-    }),
-    description: "User avatar with fallback initials",
-    example: { name: "Jane Doe", size: "md" }
-  },
-  Badge: {
-    props: z.object({
-      text: z.string(),
-      variant: z.enum(["default", "secondary", "destructive", "outline"]).nullable()
-    }),
-    description: "Status badge",
-    example: { text: "Active", variant: "default" }
-  },
-  Alert: {
-    props: z.object({
-      title: z.string(),
-      message: z.string().nullable(),
-      type: z.enum(["info", "success", "warning", "error"]).nullable()
-    }),
-    description: "Alert banner",
-    example: {
-      title: "Note",
-      message: "Your changes have been saved.",
-      type: "success"
-    }
-  },
-  Progress: {
-    props: z.object({
-      value: z.number(),
-      max: z.number().nullable(),
-      label: z.string().nullable()
-    }),
-    description: "Progress bar (value 0-100)",
-    example: { value: 65, max: 100, label: "Upload progress" }
-  },
-  // ── Inputs ────────────────────────────────────────────────────────────────
-  Input: {
-    props: z.object({
-      label: z.string(),
-      name: z.string(),
-      type: z.enum(["text", "email", "password", "number"]).nullable(),
-      placeholder: z.string().nullable(),
-      value: z.string().nullable(),
-      checks: validationCheckSchema,
-      validateOn: validateOnSchema
-    }),
-    events: ["submit", "focus", "blur"],
-    description: "Text input field. Use { $bindState } on value for two-way binding. Use checks for validation (e.g. required, email, minLength). validateOn controls timing (default: blur).",
-    example: {
-      label: "Email",
-      name: "email",
-      type: "email",
-      placeholder: "you@example.com"
-    }
-  },
-  Textarea: {
-    props: z.object({
-      label: z.string(),
-      name: z.string(),
-      placeholder: z.string().nullable(),
-      rows: z.number().nullable(),
-      value: z.string().nullable(),
-      checks: validationCheckSchema,
-      validateOn: validateOnSchema
-    }),
-    description: "Multi-line text input. Use { $bindState } on value for binding. Use checks for validation. validateOn controls timing (default: blur)."
-  },
-  Select: {
-    props: z.object({
-      label: z.string(),
-      name: z.string(),
-      options: z.array(z.string().min(1)),
-      placeholder: z.string().nullable(),
-      value: z.string().nullable(),
-      checks: validationCheckSchema,
-      validateOn: validateOnSchema
-    }),
-    events: ["change"],
-    description: "Dropdown select input. Use { $bindState } on value for binding. Use checks for validation. validateOn controls timing (default: change)."
-  },
-  Radio: {
-    props: z.object({
-      label: z.string(),
-      name: z.string(),
-      options: z.array(z.string().min(1)),
-      value: z.string().nullable(),
-      checks: validationCheckSchema,
-      validateOn: validateOnSchema
-    }),
-    events: ["change"],
-    description: "Radio button group. Use { $bindState } on value for binding. Use checks for validation. validateOn controls timing (default: change)."
-  },
-  Checkbox: {
-    props: z.object({
-      label: z.string(),
-      name: z.string(),
-      checked: z.boolean().nullable(),
-      checks: validationCheckSchema,
-      validateOn: validateOnSchema
-    }),
-    events: ["change"],
-    description: "Checkbox input. Use { $bindState } on checked for binding. Use checks for validation. validateOn controls timing (default: change)."
-  },
-  Switch: {
-    props: z.object({
-      label: z.string(),
-      name: z.string(),
-      checked: z.boolean().nullable(),
-      checks: validationCheckSchema,
-      validateOn: validateOnSchema
-    }),
-    events: ["change"],
-    description: "Toggle switch. Use { $bindState } on checked for binding. Use checks for validation. validateOn controls timing (default: change)."
-  },
-  // ── Actions ───────────────────────────────────────────────────────────────
-  Button: {
-    props: z.object({
-      label: z.string(),
-      variant: z.enum(["primary", "secondary", "danger"]).nullable(),
-      disabled: z.boolean().nullable()
-    }),
-    events: ["press"],
-    description: "Clickable button. Bind on.press for handler.",
-    example: { label: "Submit", variant: "primary" }
-  }
-};
-
-// src/generative/components.ts
-var shadcn = shadcnComponentDefinitions;
-var PICKED_SHADCN = [
-  "Card",
-  "Stack",
-  "Grid",
-  "Separator",
-  "Heading",
-  "Text",
-  "Badge",
-  "Alert",
-  "Collapsible",
-  "Progress",
-  "Avatar",
-  "Input",
-  "Textarea",
-  "Select",
-  "Radio",
-  "Checkbox",
-  "Switch",
-  "Button"
-];
-var CUSTOM_COMPONENTS = [
-  "Split",
-  "Tabs",
-  "Steps",
-  "Icon",
-  "Segmented",
-  "NumberInput",
-  "MthdsField",
-  "MthdsResult",
-  "DataTable",
-  "Metric"
-];
-var METRIC_FORMATS = ["plain", "integer", "decimal", "compact"];
-var ICON_NAMES = [
-  "Sparkles",
-  "Rocket",
-  "Compass",
-  "Map",
-  "MapPin",
-  "Route",
-  "Plane",
-  "Train",
-  "Car",
-  "Ship",
-  "Hotel",
-  "Home",
-  "Building2",
-  "Landmark",
-  "Globe",
-  "Mountain",
-  "Leaf",
-  "Sun",
-  "Moon",
-  "Calendar",
-  "Clock",
-  "Hourglass",
-  "Users",
-  "User",
-  "Baby",
-  "Accessibility",
-  "Heart",
-  "Star",
-  "Utensils",
-  "Coffee",
-  "Music",
-  "Camera",
-  "Image",
-  "Ticket",
-  "Gift",
-  "Wallet",
-  "Banknote",
-  "Coins",
-  "Receipt",
-  "Percent",
-  "Hash",
-  "TrendingUp",
-  "BarChart3",
-  "FileText",
-  "Upload",
-  "Paperclip",
-  "Mail",
-  "Phone",
-  "Tag",
-  "Layers",
-  "ListChecks",
-  "CheckCircle2",
-  "AlertCircle",
-  "Info",
-  "Shield",
-  "Flag",
-  "Bookmark",
-  "Briefcase",
-  "Package",
-  "Truck",
-  "Lightbulb",
-  "Zap",
-  "Pencil",
-  "Send"
-];
-var components = {
-  // ── Layout (shadcn) ────────────────────────────────────────────────────
-  Card: {
-    ...shadcn.Card,
-    props: shadcn.Card.props.omit({ className: true, maxWidth: true, centered: true }),
-    description: 'Container card for content sections. Use for forms/content boxes, NOT for page headers. Its optional "title" renders as an h3, so a titled Card sits under an h2.'
-  },
-  Stack: { ...shadcn.Stack, props: shadcn.Stack.props.omit({ className: true }) },
-  Grid: { ...shadcn.Grid, props: shadcn.Grid.props.omit({ className: true }) },
-  Separator: shadcn.Separator,
-  Collapsible: shadcn.Collapsible,
-  // ── Content (shadcn) ───────────────────────────────────────────────────
-  Heading: shadcn.Heading,
-  Text: shadcn.Text,
-  Badge: shadcn.Badge,
-  Alert: shadcn.Alert,
-  Progress: shadcn.Progress,
-  Avatar: {
-    ...shadcn.Avatar,
-    description: `A round avatar showing the initials of "name" - bind it to a person's name in the state ({ "$state" } or { "$item" }); never set "src".`
-  },
-  // ── Inputs (shadcn) ────────────────────────────────────────────────────
-  Input: shadcn.Input,
-  Textarea: shadcn.Textarea,
-  Select: shadcn.Select,
-  Radio: shadcn.Radio,
-  Checkbox: shadcn.Checkbox,
-  Switch: shadcn.Switch,
-  Button: shadcn.Button,
-  // ── Layout (ours) ──────────────────────────────────────────────────────
-  Split: {
-    props: z.object({
-      ratio: z.enum(["1:1", "1:2", "2:1"]).nullable(),
-      gap: z.enum(["md", "lg", "xl"]).nullable()
-    }),
-    slots: ["default"],
-    description: 'Two columns side by side, from exactly two children: the first is the left column. "1:2" puts a narrow rail (a summary, the essentials, the run) beside the work; "2:1" the reverse; "1:1" two halves. Columns stack on a narrow screen.',
-    example: { ratio: "1:2", gap: "lg" }
-  },
-  Tabs: {
-    props: z.object({
-      tabs: z.array(z.object({ label: z.string(), value: z.string() })).min(2)
-    }),
-    slots: ["default"],
-    description: "Concerns of equal weight, one visible at a time. Exactly one child per tab, in the same order - each child is that tab's panel (usually a Stack). The first tab opens. The active tab is the component's own state, never /state.",
-    example: {
-      tabs: [
-        { label: "The trip", value: "trip" },
-        { label: "Who is going", value: "people" }
-      ]
-    }
-  },
-  Steps: {
-    props: z.object({
-      steps: z.array(z.string()).min(2),
-      nextLabel: z.string().nullable(),
-      backLabel: z.string().nullable()
-    }),
-    slots: ["default"],
-    description: "A journey with a natural order: a numbered indicator, one panel at a time, and its own Back and Next. Exactly one child per step, in order - each child is that step's panel. Put the Button that runs inside the LAST panel; Next disappears there. The current step is the component's own state, never /state.",
-    example: { steps: ["Where", "Who", "How"], nextLabel: "Continue" }
-  },
-  Icon: {
-    props: z.object({
-      name: z.enum(ICON_NAMES),
-      size: z.enum(["sm", "md", "lg"]).nullable()
-    }),
-    slots: [],
-    description: "A decorative icon, one of the listed lucide names, to give a section or a figure a face: put it in a horizontal Stack beside a Heading or a Metric. It carries no meaning on its own and no text.",
-    example: { name: "Plane", size: "md" }
-  },
-  // ── Inputs (ours) ──────────────────────────────────────────────────────
-  Segmented: {
-    props: z.object({
-      label: z.string(),
-      name: z.string(),
-      options: z.array(z.string().min(1)).min(2).max(6),
-      value: z.string().nullable()
-    }),
-    slots: [],
-    description: `A choice of two to six options as a row of pills, one selected - the app's answer to a short Select. "options" are EXACTLY the brief's choices, spelled exactly; bind "value" with { "$bindState": "/inputs/..." }.`,
-    example: {
-      label: "Pace",
-      name: "pace",
-      options: ["slow", "balanced", "packed"],
-      value: { $bindState: "/inputs/request/pace" }
-    }
-  },
-  NumberInput: {
-    props: z.object({
-      label: z.string(),
-      name: z.string(),
-      value: z.number().nullable(),
-      placeholder: z.string().nullable(),
-      unit: z.string().nullable(),
-      min: z.number().nullable(),
-      max: z.number().nullable(),
-      step: z.number().nullable()
-    }),
-    slots: [],
-    description: 'A figure the person types: writes a NUMBER to the bound path, which Input type "number" does not (it writes text). Bind "value" with { "$bindState": "/inputs/..." }. "unit" is a short suffix ONLY when the brief states one; "min", "max" and "step" only when the brief states them.',
-    example: {
-      label: "Budget",
-      name: "budget",
-      value: { $bindState: "/inputs/request/budget" },
-      placeholder: "2500"
-    }
-  },
-  // ── The escape hatches and the bound equivalents (ours) ────────────────
-  MthdsField: {
-    props: z.object({
-      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 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: {
-    props: z.object({
-      path: z.string(),
-      hideLabel: z.boolean().nullable()
-    }),
-    slots: [],
-    description: `The kernel's own read-only rendering of ONE result subtree at "path" (a /result path from the brief). Use it for every path the brief marks as delegated - a file, a date, a document, prose, markup - and for any structure you choose not to lay out. It renders its own label unless hideLabel is true. Inside a repeat, "path" is the item's field name relative to the item ("teams"), never an $item expression - the way to delegate one subtree of every item.`,
-    example: { path: "/result/issued_on" }
-  },
-  DataTable: {
-    props: z.object({
-      rows: z.any(),
-      // 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"), 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: [
-        { path: "label", label: "Item" },
-        { path: "quantity", label: "Qty" }
-      ]
-    }
-  },
-  Metric: {
-    props: z.object({
-      label: z.string(),
-      value: z.any(),
-      unit: z.string().nullable(),
-      format: z.enum(METRIC_FORMATS).nullable()
-    }),
-    slots: [],
-    description: 'A labelled figure - the one number a reader looks for first. "value" is bound with { "$state": "/path" } (never inline); "unit" is a short suffix and ONLY one the brief states (a currency the structure carries, "%" for a rate, "M" when the brief says "in millions") - never invent a currency the state does not carry; "format" is plain, integer, decimal (two places) or compact.',
-    example: { label: "Total", value: { $state: "/result/total" }, unit: "EUR", format: "decimal" }
-  }
-};
-var actions = {
-  run: {
-    params: z.object({}),
-    description: "Start the run with the current /inputs. The host handles it; an input page binds it to its one Button after validateForm."
-  }
-};
-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 = [
-  "AppBar",
-  "Hero",
-  "Workspace",
-  "Section",
-  "Rail",
-  "SummaryRow",
-  "Cta",
-  "Footer"
-];
-var product = {
-  AppBar: {
-    props: z.object({
-      app: z.string(),
-      links: z.array(z.string()).nullable(),
-      tag: z.string().nullable()
-    }),
-    slots: [],
-    description: "A bar across the top of the page: the brand's logo, the name of this app beside it, a few muted links, and a small mono tag at the right (the method behind the page). It renders as the page's banner, so at most one.",
-    example: { app: "Trip planner", links: ["Methods", "Runs"], tag: "plan_trip" }
-  },
-  Hero: {
-    props: z.object({
-      headline: z.string(),
-      lede: z.string().nullable(),
-      eyebrow: z.string().nullable()
-    }),
-    slots: [],
-    description: "An opening: one bold headline that says what happens here, one muted line under it at most, and an optional small eyebrow in the accent colour above. The headline renders as an h1, so at most one on a page.",
-    example: { headline: "Plan a trip worth taking.", lede: "Tell us where and who is coming." }
-  },
-  Workspace: {
-    props: z.object({ rail: z.enum(["right", "left"]).nullable() }),
-    slots: ["default"],
-    description: 'Two children side by side on a wide screen and stacked on a narrow one: the work, and beside it a narrower panel that stays sticky while the work scrolls. Exactly two children; "rail" says which side the panel takes, right by default.',
-    example: { rail: "right" }
-  },
-  Section: {
-    props: z.object({
-      number: z.string().nullable(),
-      title: z.string(),
-      lede: z.string().nullable()
-    }),
-    slots: ["default"],
-    description: "A titled stage of the work: an optional small mono number in the accent colour, an h2 title, an optional muted line, then its children - flat, spaced, separated from the next Section by a hairline, never boxed.",
-    example: { number: "01", title: "Where and when" }
-  },
-  Rail: {
-    props: z.object({ title: z.string() }),
-    slots: ["default"],
-    description: "A raised, boxed panel: a small uppercase h2 title, then its children in a column. Made to stand beside the work as the panel of a Workspace, and the one boxed surface in this vocabulary.",
-    example: { title: "Your trip" }
-  },
-  SummaryRow: {
-    props: z.object({
-      label: z.string(),
-      value: z.any().nullable(),
-      detail: z.any().nullable(),
-      separator: z.string().nullable(),
-      placeholder: z.string().nullable()
-    }),
-    slots: [],
-    description: 'A line that restates a value: a muted label at the left, a bound value at the right. "value" and the optional "detail" are read with { "$state": "/inputs/..." } and joined by "separator" (a space by default); each is a scalar path - text, number, boolean, date or choice - never a structure, a list or a file. While both are empty the row shows "placeholder", or a dash.',
-    example: {
-      label: "Budget",
-      value: { $state: "/inputs/request/budget" },
-      detail: { $state: "/inputs/request/currency" }
-    }
-  },
-  Cta: {
-    props: z.object({ label: z.string(), hint: z.string().nullable() }),
-    slots: [],
-    events: ["press"],
-    description: "A call to action: a full-width button in the accent colour that runs the method, with an optional one-line hint under it. Bind on.press to validateForm then run.",
-    example: { label: "Plan my trip", hint: "Nothing runs until the request is complete." }
-  },
-  Footer: {
-    props: z.object({ text: z.string(), tag: z.string().nullable() }),
-    slots: [],
-    description: "A closing line, muted, with an optional mono tag at the right. It renders as the page's contentinfo, so at most one.",
-    example: { text: "Runs on Pipelex.", tag: "MTHDS" }
-  }
-};
-var COMPONENT_RENDERINGS = {
-  Hero: { heading: { level: 1 } },
-  Section: { heading: { level: 2 } },
-  Rail: { heading: { level: 2 } },
-  Card: { heading: { level: 3, when: "title" } },
-  AppBar: { once: "the page's banner" },
-  Footer: { once: "the page's contentinfo" },
-  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" } },
-  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, ...frameComponents },
-    actions: generativeActions
-  }),
-  { renders: COMPONENT_RENDERINGS }
-);
-var COMPONENT_NAMES = [
-  ...PICKED_SHADCN,
-  ...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) {
-  return schema._zod.def;
-}
-function propsSignature(schema) {
-  const def = definitionOf(schema);
-  switch (def.type) {
-    case "string":
-      return "string";
-    case "number":
-      return "number";
-    case "boolean":
-      return "boolean";
-    case "literal":
-      return JSON.stringify(def.values?.[0]);
-    case "enum":
-      return Object.values(def.entries ?? {}).map((value) => `"${String(value)}"`).join(" | ");
-    case "array":
-      return `Array<${def.element ? propsSignature(def.element) : "unknown"}>`;
-    case "object": {
-      const props = Object.entries(def.shape ?? {}).map(([key, value]) => {
-        const inner = definitionOf(value).type;
-        const optional = inner === "optional" || inner === "nullable";
-        return `${key}${optional ? "?" : ""}: ${propsSignature(value)}`;
-      });
-      return `{ ${props.join(", ")} }`;
-    }
-    case "optional":
-    case "nullable":
-    case "default":
-      return def.innerType ? propsSignature(def.innerType) : "unknown";
-    case "union":
-      return def.options ? def.options.map((option) => propsSignature(option)).join(" | ") : "unknown";
-    case "record": {
-      const key = def.keyType ? propsSignature(def.keyType) : "string";
-      const value = def.valueType ? propsSignature(def.valueType) : "unknown";
-      return `Record<${key}, ${value}>`;
-    }
-    default:
-      return "unknown";
-  }
-}
-
-// src/generative/designer-catalog.ts
-var DESIGNER_CATALOG_CONCEPT = "generative.Catalog";
-function designerCatalog({ frame = "page" } = {}) {
-  const definitions = catalog.data.components;
-  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 ?? [];
-    return {
-      name,
-      props: propsSignature(definition.props),
-      description: definition.description,
-      accepts_children: slots.includes("default"),
-      slots: slots.filter((slot) => slot !== "default"),
-      events: [...definition.events ?? []]
-    };
-  });
-  const builtIn = (generativeSchema.builtInActions ?? []).map((action) => ({
-    name: action.name,
-    description: action.description,
-    built_in: true
-  }));
-  const own = Object.entries(catalog.data.actions).map(
-    ([name, action]) => ({
-      name,
-      description: action.description,
-      built_in: false
-    })
-  );
-  return { components: components3, actions: [...builtIn, ...own] };
-}
-
-// src/generative/prompt-hash.ts
-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";
-var RESULT_ROOT = "/result";
-function joinPath(root, ...segments) {
-  return segments.reduce((path, segment) => `${path}/${escapeSegment(segment)}`, root);
-}
-function escapeSegment(segment) {
-  return segment.replace(/~/g, "~0").replace(/\//g, "~1");
-}
-function unescapeSegment(segment) {
-  return segment.replace(/~1/g, "/").replace(/~0/g, "~");
-}
-function segmentsUnder(root, path) {
-  if (path === root) return [];
-  if (!path.startsWith(`${root}/`)) return void 0;
-  return path.slice(root.length + 1).split("/").map(unescapeSegment);
-}
-function fieldAtSegments(fields, segments) {
-  const [head, ...rest] = segments;
-  if (head === void 0) return void 0;
-  const field = fields.find((candidate) => candidate.name === head);
-  if (!field) return void 0;
-  return rest.length === 0 ? field : descend(field, rest);
-}
-function descend(field, segments) {
-  const [head, ...rest] = segments;
-  if (head === void 0) return field;
-  if (field.kind === "object") return fieldAtSegments(field.fields, segments);
-  if (field.kind === "list" && /^\d+$/.test(head)) return descend(field.item, rest);
-  return void 0;
-}
-function inputFieldAtPath(fields, path) {
-  const segments = segmentsUnder(INPUTS_ROOT, path);
-  return segments && segments.length > 0 ? fieldAtSegments(fields, segments) : void 0;
-}
-function resultFieldAtPath(field, path) {
-  const segments = segmentsUnder(RESULT_ROOT, path);
-  if (!segments) return void 0;
-  return segments.length === 0 ? field : descend(field, segments);
-}
-function parentMapOf(spec) {
-  const parents = /* @__PURE__ */ new Map();
-  for (const [parentKey, element] of Object.entries(spec.elements)) {
-    for (const child of element.children ?? []) parents.set(child, parentKey);
-  }
-  return parents;
-}
-function repeatBasePathOf(spec, key, parents = parentMapOf(spec)) {
-  const chain = [];
-  const seen = /* @__PURE__ */ new Set();
-  let current = key;
-  while (current !== void 0 && !seen.has(current)) {
-    seen.add(current);
-    chain.unshift(current);
-    current = parents.get(current);
-  }
-  let base;
-  for (const elementKey of chain) {
-    const repeat = spec.elements[elementKey]?.repeat;
-    if (!repeat) continue;
-    const statePath = repeat.statePath;
-    if (typeof statePath === "string") {
-      base = `${statePath}/0`;
-      continue;
-    }
-    const item = statePath?.$item;
-    if (base === void 0 || typeof item !== "string") return void 0;
-    base = `${joinPath(base, item)}/0`;
-  }
-  return base;
-}
-function absoluteHatchPath(spec, key, path, parents) {
-  if (path.startsWith("/")) return path;
-  const base = repeatBasePathOf(spec, key, parents);
-  return base ? `${base}/${path}` : void 0;
-}
-function repeatListPathOf(spec, key, parents = parentMapOf(spec)) {
-  const statePath = spec.elements[key]?.repeat?.statePath;
-  if (typeof statePath === "string") return statePath;
-  const item = statePath?.$item;
-  const parent = parents.get(key);
-  const outer = parent === void 0 ? void 0 : repeatBasePathOf(spec, parent, parents);
-  return outer !== void 0 && typeof item === "string" ? joinPath(outer, item) : void 0;
-}
-
-// 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}`;
-  };
-}
-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;
-}
-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;
-}
-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 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`);
-      }
-    }
-  }
-  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",
-  "$item",
-  "$index",
-  "$bindState",
-  "$bindItem",
-  "$cond",
-  "$computed",
-  "$template"
-];
-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) {
-    const def = current.def;
-    if (!def) return false;
-    if (def.type === "enum" || def.type === "literal") return true;
-    if (def.innerType === void 0) return false;
-    current = def.innerType;
-  }
-  return false;
-}
-function definitionOf2(catalog2, type) {
-  const components3 = catalog2.data.components;
-  return hasOwnProp(components3, type) ? components3[type] : void 0;
-}
-function propsSchemaOf(catalog2, type) {
-  const props = definitionOf2(catalog2, type)?.props;
-  return props && typeof props === "object" && "shape" in props ? props : void 0;
-}
-function eventsOf(catalog2, type) {
-  const definition = definitionOf2(catalog2, type);
-  if (!definition) return void 0;
-  return Array.isArray(definition.events) ? definition.events.filter((event) => typeof event === "string") : [];
-}
-var MAX_ELEMENT_DEPTH = 512;
-function childKeysOf(spec, key) {
-  const element = spec.elements[key];
-  if (!element) return [];
-  const children = Array.isArray(element.children) ? element.children : [];
-  const slots = typeof element.slots === "object" && element.slots !== null ? Object.values(element.slots).flatMap(
-    (slot) => Array.isArray(slot) ? slot : []
-  ) : [];
-  return [...children, ...slots].filter((child) => typeof child === "string");
-}
-function deepestChain(spec) {
-  const below = /* @__PURE__ */ new Map();
-  const onPath = /* @__PURE__ */ new Set();
-  let deepest = 0;
-  for (const start of Object.keys(spec.elements)) {
-    if (below.has(start)) continue;
-    const stack = [start];
-    while (stack.length > 0) {
-      const key = stack[stack.length - 1];
-      if (below.has(key)) {
-        onPath.delete(key);
-        stack.pop();
-        continue;
-      }
-      const children = childKeysOf(spec, key).filter((child) => !onPath.has(child));
-      const pending = children.filter((child) => !below.has(child));
-      if (pending.length > 0) {
-        onPath.add(key);
-        stack.push(...pending);
-        continue;
-      }
-      below.set(
-        key,
-        children.reduce((tallest, child) => Math.max(tallest, below.get(child) ?? 0), 0) + 1
-      );
-      onPath.delete(key);
-      stack.pop();
-    }
-    deepest = Math.max(deepest, below.get(start) ?? 0);
-  }
-  return deepest;
-}
-function validateAgainstCatalog(spec, catalog2 = frameCatalog("page")) {
-  try {
-    return checkAgainstCatalog(spec, catalog2);
-  } catch (error) {
-    return {
-      ok: false,
-      problems: [{ message: `the layout is not a well-formed spec: ${String(error)}` }]
-    };
-  }
-}
-function checkAgainstCatalog(spec, catalog2) {
-  const problems = [];
-  const depth = deepestChain(spec);
-  if (depth > MAX_ELEMENT_DEPTH) {
-    return {
-      ok: false,
-      problems: [
-        {
-          message: `the element tree is ${depth} deep; this entry renders at most ${MAX_ELEMENT_DEPTH}.`
-        }
-      ]
-    };
-  }
-  const structure = validateSpec(spec, { checkOrphans: true });
-  for (const issue of structure.issues) {
-    if (issue.severity === "error" || issue.code === "orphaned_element") {
-      problems.push({ elementKey: issue.elementKey, message: issue.message });
-    }
-  }
-  const cyclic = /* @__PURE__ */ new Set();
-  const state = /* @__PURE__ */ new Map();
-  const descend2 = (key) => {
-    const mark = state.get(key);
-    if (mark === "done") return;
-    if (mark === "open") {
-      cyclic.add(key);
-      return;
-    }
-    state.set(key, "open");
-    const element = spec.elements[key];
-    for (const child of element?.children ?? []) descend2(child);
-    for (const slot of Object.values(element?.slots ?? {}))
-      for (const child of slot) descend2(child);
-    state.set(key, "done");
-  };
-  for (const key of Object.keys(spec.elements)) descend2(key);
-  for (const key of cyclic) {
-    problems.push({
-      elementKey: key,
-      message: `"${key}" is its own descendant: an element tree may not contain a cycle.`
-    });
-  }
-  const known = new Set(catalog2.componentNames);
-  for (const [key, element] of Object.entries(spec.elements)) {
-    if (!known.has(element.type)) {
-      problems.push({ elementKey: key, message: `unknown component type "${element.type}"` });
-    }
-  }
-  for (const [key, element] of Object.entries(spec.elements)) {
-    const schema = propsSchemaOf(catalog2, element.type);
-    if (!schema) continue;
-    const shape = schema.shape;
-    const props = element.props ?? {};
-    for (const [name, value] of Object.entries(props)) {
-      const propSchema = shape[name];
-      if (!propSchema) {
-        problems.push({
-          elementKey: key,
-          message: `${element.type} has no prop "${name}" (known: ${Object.keys(shape).join(", ")})`
-        });
-        continue;
-      }
-      if (isExpression(value)) {
-        if (HATCHES.has(element.type) && name === "path") {
-          problems.push({
-            elementKey: key,
-            message: `${element.type}.path must be a literal string - absolute, or the item's field name inside a repeat - never an expression.`
-          });
-        } else if (isClosedVocabulary(propSchema)) {
-          problems.push({
-            elementKey: key,
-            message: `${element.type}.${name} is one of a fixed set of names, so it must be written as a literal, never as an expression.`
-          });
-        }
-        continue;
-      }
-      const parsed = propSchema.safeParse(value);
-      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}: ${issues.map((issue) => issue.message).join("; ")}`
-        });
-      }
-    }
-    for (const [name, propSchema] of Object.entries(shape)) {
-      if (name in props) continue;
-      if (propSchema.safeParse(void 0).success || propSchema.safeParse(null).success) continue;
-      problems.push({
-        elementKey: key,
-        message: `${element.type} is missing required prop "${name}"`
-      });
-    }
-  }
-  const renders = catalog2.renders ?? {};
-  const renderingOf = (type) => hasOwnProp(renders, type) ? renders[type] : void 0;
-  for (const [key, element] of Object.entries(spec.elements)) {
-    const panelled = renderingOf(element.type)?.panels;
-    if (!panelled) continue;
-    const props = element.props ?? {};
-    const listed = props[panelled.prop];
-    if (!Array.isArray(listed)) continue;
-    const panels = listed.length;
-    const children = element.children?.length ?? 0;
-    if (children !== panels) {
-      problems.push({
-        elementKey: key,
-        message: `${element.type} declares ${panels} panel${panels === 1 ? "" : "s"} but has ${children} child${children === 1 ? "" : "ren"}: exactly one child per ${panelled.noun}, in order.`
-      });
-    }
-    const runs = (element.children ?? []).filter(
-      (child) => spec.elements[child]?.type === "Button"
-    );
-    if (runs.length > 0) {
-      problems.push({
-        elementKey: key,
-        message: `${element.type} has a Button as a direct child; a panel is a container (a Stack), and the Button belongs inside the last one.`
-      });
-    }
-  }
-  const present3 = (value) => value !== void 0 && value !== null && value !== "";
-  const levels = [];
-  const onlyOnce = /* @__PURE__ */ new Map();
-  const seen = /* @__PURE__ */ new Set();
-  const walk = (key) => {
-    if (seen.has(key)) return;
-    seen.add(key);
-    const element = spec.elements[key];
-    if (!element) return;
-    const props = element.props ?? {};
-    const rendering = renderingOf(element.type);
-    if (element.type === "Heading") {
-      const level = String(props.level ?? "h2");
-      const match = /^h([1-4])$/.exec(level);
-      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 || present3(props[rendered.when]);
-      if (has) levels.push({ key, type: element.type, level: rendered.level });
-    }
-    if (rendering?.once !== void 0) {
-      const entry = onlyOnce.get(element.type) ?? { reason: rendering.once, keys: [] };
-      entry.keys.push(key);
-      onlyOnce.set(element.type, entry);
-    }
-    for (const child of element.children ?? []) walk(child);
-    for (const slot of Object.values(element.slots ?? {})) for (const child of slot) walk(child);
-  };
-  if (spec.root) walk(spec.root);
-  const describe2 = (heading) => heading.type === "Heading" ? `h${heading.level}` : `${heading.type}'s h${heading.level}`;
-  let previous;
-  for (const heading of levels) {
-    if (previous !== void 0 && heading.level > previous.level + 1) {
-      problems.push({
-        elementKey: heading.key,
-        message: `${describe2(heading)} jumps after ${describe2(previous)}: heading levels increase by one, never by more.`
-      });
-    }
-    previous = heading;
-  }
-  const firsts = levels.filter((heading) => heading.level === 1);
-  const h1Ways = [
-    ...known.has("Heading") ? ["as a Heading at level h1"] : [],
-    ...Object.entries(renders).filter(([, rendering]) => rendering.heading?.level === 1).map(([type]) => `as the heading a ${type} renders`)
-  ];
-  if (firsts.length === 0 && spec.root && h1Ways.length > 0) {
-    problems.push({
-      elementKey: spec.root,
-      message: `the page has no h1: exactly one, ${h1Ways.join(" or ")}.`
-    });
-  }
-  for (const extra of firsts.slice(1)) {
-    problems.push({
-      elementKey: extra.key,
-      message: `a second h1 (${describe2(extra)}, after ${describe2(firsts[0])} at [${firsts[0].key}]): exactly one on a page.`
-    });
-  }
-  for (const [type, { reason, keys }] of onlyOnce) {
-    for (const extra of keys.slice(1)) {
-      problems.push({
-        elementKey: extra,
-        message: `a second ${type} (after [${keys[0]}]): at most one on a page, since it renders as ${reason}.`
-      });
-    }
-  }
-  for (const [key, element] of Object.entries(spec.elements)) {
-    const rule = renderingOf(element.type)?.children;
-    if (!rule) continue;
-    const children = element.children?.length ?? 0;
-    if (children !== rule.count) {
-      problems.push({
-        elementKey: key,
-        message: `${element.type} takes exactly ${rule.count} children (${rule.roles}); this one has ${children}.`
-      });
-    }
-  }
-  const declared = [
-    ...catalog2.actionNames ?? [],
-    ...(catalog2.schema?.builtInActions ?? []).map((action) => action.name)
-  ];
-  const knownActions = declared.length > 0 ? new Set(declared) : void 0;
-  const STATE_WRITES = {
-    setState: [{ param: "statePath" }],
-    pushState: [{ param: "statePath" }, { param: "clearStatePath", optional: true }],
-    removeState: [{ param: "statePath" }],
-    validateForm: [{ param: "statePath", optional: true }]
-  };
-  const OWNED_ROOTS = [INPUTS_ROOT, RESULT_ROOT];
-  const ownedRootOf = (written) => {
-    const statePath = written.startsWith("/") ? written : `/${written}`;
-    return OWNED_ROOTS.find((root) => statePath === root || statePath.startsWith(`${root}/`));
-  };
-  const bindingsOf = (binding) => Array.isArray(binding) ? binding : [binding];
-  const refusal = (owned, statePath) => `a layout may not write into ${owned}, which the host fills. Bind the value with { "$bindState": "${statePath}" } or delegate it with MthdsField instead.`;
-  const checkBinding = (key, site, entry) => {
-    const action = entry?.action;
-    if (typeof action !== "string") {
-      problems.push({ elementKey: key, message: `${site} has an entry with no "action" name.` });
-      return;
-    }
-    if (knownActions && !knownActions.has(action)) {
-      problems.push({
-        elementKey: key,
-        message: `${site} names the unknown action "${action}" (known: ${[...knownActions].join(", ")}); nothing would handle it.`
-      });
-      return;
-    }
-    const writes = hasOwnProp(STATE_WRITES, action) ? STATE_WRITES[action] : void 0;
-    if (writes) {
-      const params = entry.params;
-      for (const { param, optional } of writes) {
-        const written = typeof params === "object" && params !== null ? params[param] : void 0;
-        if (written === void 0 || written === null) {
-          if (!optional) {
-            problems.push({
-              elementKey: key,
-              message: `${site} calls ${action} without a literal "${param}".`
-            });
-          }
-          continue;
-        }
-        if (typeof written !== "string") {
-          problems.push({
-            elementKey: key,
-            message: `${site} calls ${action} with a "${param}" that is not a literal string; where an action writes must be named, never computed.`
-          });
-          continue;
-        }
-        const owned = ownedRootOf(written);
-        if (owned) {
-          const where = param === "statePath" ? `on "${written}"` : `with ${param} "${written}"`;
-          problems.push({
-            elementKey: key,
-            message: `${site} calls ${action} ${where}: ${refusal(owned, written.startsWith("/") ? written : `/${written}`)}`
-          });
-        }
-      }
-    }
-    for (const hook of ["onSuccess", "onError"]) {
-      const follow = entry[hook];
-      if (follow === void 0 || follow === null) continue;
-      const hookSite = `${site}.${hook}`;
-      if (typeof follow !== "object" || Array.isArray(follow)) {
-        problems.push({
-          elementKey: key,
-          message: `${hookSite} must be an object: a { "set" } of state paths to values, or an { "action" } binding.`
-        });
-        continue;
-      }
-      const record = follow;
-      if (record.set !== void 0 && record.set !== null) {
-        if (typeof record.set !== "object" || Array.isArray(record.set)) {
-          problems.push({
-            elementKey: key,
-            message: `${hookSite}.set must be an object mapping a state path to its value.`
-          });
-        } else {
-          for (const written of Object.keys(record.set)) {
-            const owned = ownedRootOf(written);
-            if (owned) {
-              problems.push({
-                elementKey: key,
-                message: `${hookSite} sets "${written}": ${refusal(owned, written.startsWith("/") ? written : `/${written}`)}`
-              });
-            }
-          }
-        }
-      }
-      if (record.action !== void 0) checkBinding(key, hookSite, record);
-    }
-  };
-  for (const [key, element] of Object.entries(spec.elements)) {
-    const on = element.on;
-    if (on !== void 0 && on !== null) {
-      if (typeof on !== "object" || Array.isArray(on)) {
-        problems.push({
-          elementKey: key,
-          message: '"on" must be an object mapping an event name to its actions.'
-        });
-      } else {
-        const emitted = eventsOf(catalog2, element.type);
-        for (const [event, binding] of Object.entries(on)) {
-          if (emitted && !emitted.includes(event)) {
-            problems.push({
-              elementKey: key,
-              message: emitted.length > 0 ? `on.${event}: ${element.type} never emits "${event}" (it emits: ${emitted.join(", ")}), so nothing bound there would ever fire.` : `on.${event}: ${element.type} emits no events, so nothing bound there would ever fire.`
-            });
-          }
-          for (const entry of bindingsOf(binding)) checkBinding(key, `on.${event}`, entry);
-        }
-      }
-    }
-    const watch = element.watch;
-    if (watch !== void 0 && watch !== null) {
-      if (typeof watch !== "object" || Array.isArray(watch)) {
-        problems.push({
-          elementKey: key,
-          message: '"watch" must be an object mapping a state path to the actions its change fires.'
-        });
-      } else {
-        for (const [path, binding] of Object.entries(watch)) {
-          for (const entry of bindingsOf(binding)) checkBinding(key, `watch.${path}`, entry);
-        }
-      }
-    }
-  }
-  return { ok: problems.length === 0, problems };
-}
-function formatProblems(problems) {
-  return problems.map(
-    (problem) => problem.elementKey ? `[${problem.elementKey}] ${problem.message}` : problem.message
-  ).join("\n");
-}
-
-// 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)
-    );
-  });
-}
+import '../chunk-ZX52CQJ4.js';
+import '../chunk-GHVVULHY.js';
+import { readImageContent, viewableUrl, readDateContent } from '../chunk-QQK6Y55E.js';
+export { brandManifestSchema } from '../chunk-QGFR57OH.js';
+import '../chunk-3GO65HWP.js';
+import '../chunk-ZB4RYUKV.js';
+import '../chunk-FABY3DEY.js';
+import '../chunk-XCO6GTEC.js';
+import '../chunk-E6BIXJ6C.js';
+import '../chunk-XO5OENNF.js';
+import '../chunk-OD3VYXUY.js';
+import '../chunk-WYH56SOZ.js';
+import { hasOwnProp } from '../chunk-V3OV2XQT.js';
+import '../chunk-GKV77RAS.js';
+import * as React5 from 'react';
+import { defineRegistry, useStateValue, useRepeatScope, useStateStore, useBoundProp, useFieldValidation, JSONUIProvider, Renderer } from '@json-render/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+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';
+export { createStateStore } from '@json-render/core';
 
-// 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("");
-}
-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";
-}
-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 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(", ")}`
-    );
-  }
-  return notes;
-}
-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 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 (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);
-      }
-    }
-  }
-}
-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);
-    }
-  }
-  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
-        );
-      }
-    }
-  }
-}
-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);
-  }
-  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) } : {}
-  };
-}
-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 {
-    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 = [];
-  const push = (op, path, value) => lines.push(JSON.stringify({ op, path, value }));
-  push("add", "/root", spec.root);
-  const emitted = /* @__PURE__ */ new Set();
-  const queue = [spec.root];
-  while (queue.length > 0) {
-    const key = queue.shift();
-    if (emitted.has(key)) continue;
-    const element = spec.elements[key];
-    if (!element) continue;
-    emitted.add(key);
-    push("add", `/elements/${escapeSegment(key)}`, element);
-    for (const child of element.children ?? []) queue.push(child);
-    for (const slotChildren of Object.values(element.slots ?? {})) queue.push(...slotChildren);
-  }
-  for (const key of Object.keys(spec.elements)) {
-    if (!emitted.has(key)) push("add", `/elements/${escapeSegment(key)}`, spec.elements[key]);
-  }
-  for (const [key, value] of Object.entries(spec.state ?? {})) {
-    push("add", `/state/${escapeSegment(key)}`, value);
-  }
-  return `${lines.join("\n")}
-`;
-}
-var FORBIDDEN_SEGMENTS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
-function pointerReachesPrototype(pointer) {
-  return typeof pointer === "string" && pointer.split("/").some((segment) => FORBIDDEN_SEGMENTS.has(unescapeSegment(segment)));
-}
-function reachesPrototype(line) {
-  let parsed;
-  try {
-    parsed = JSON.parse(line);
-  } catch {
-    return false;
-  }
-  const patch = parsed;
-  return pointerReachesPrototype(patch?.path) || pointerReachesPrototype(patch?.from);
-}
-function specFromJsonl(jsonl) {
-  let spec = { root: "", elements: {} };
-  for (const line of jsonl.split("\n")) {
-    if (reachesPrototype(line)) continue;
-    try {
-      spec = compileSpecStream(line, spec);
-    } catch {
-      continue;
-    }
-  }
-  return spec;
-}
-function jsonlLines(jsonl) {
-  return jsonl.split("\n").filter((line) => line.trim().length > 0);
-}
-var BrandContext = React4.createContext(null);
+var BrandContext = React5.createContext(null);
 function BrandProvider({
   manifest,
   children
@@ -2086,7 +36,7 @@ function BrandProvider({
   return /* @__PURE__ */ jsx(BrandContext.Provider, { value: manifest, children });
 }
 function useBrand() {
-  const manifest = React4.useContext(BrandContext);
+  const manifest = React5.useContext(BrandContext);
   if (!manifest)
     throw new Error(
       "useBrand: no brand in scope. Pass `brand` to GenerativePage, or wrap the tree in BrandProvider."
@@ -2097,7 +47,7 @@ var WEIGHTS = "400;500;600;700";
 function useWebfont(webfont) {
   const provider = webfont?.provider;
   const family = webfont?.family;
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!provider || !family) return;
     const key = `${provider}:${family}`;
     if (document.head.querySelector(`link[data-brand-webfont="${CSS.escape(key)}"]`)) return;
@@ -2117,7 +67,180 @@ function useWebfont(webfont) {
     document.head.appendChild(link);
   }, [provider, family]);
 }
-var FrameHostContext = React4.createContext({});
+var ReportingContext = React5.createContext(false);
+var ElementBoundary = class extends React5.Component {
+  constructor(props) {
+    super(props);
+    this.state = { failed: false, error: void 0, resetOn: props.resetOn };
+  }
+  static getDerivedStateFromError(error) {
+    return { failed: true, error };
+  }
+  static getDerivedStateFromProps(props, state) {
+    if (Object.is(props.resetOn, state.resetOn)) return null;
+    return { failed: false, error: void 0, resetOn: props.resetOn };
+  }
+  componentDidCatch(error, info) {
+    if (!this.props.reporting) return;
+    const componentStack = info.componentStack ?? void 0;
+    this.props.report.current?.(error, {
+      type: this.props.type,
+      ...componentStack ? { componentStack } : {}
+    });
+  }
+  // Whether to report or to throw the error on is decided as the boundary
+  // renders its failure, from whether the host passes a handler in this very
+  // render: decided later, it cost a blank commit and a second record of the
+  // same error, and decided from the ref, it read the previous render's
+  // callback. No host to tell: the error goes on, in the same render, to
+  // json-render's boundary or the host's around the page, which record it
+  // once, as if this one were not here.
+  render() {
+    if (!this.state.failed) return this.props.children;
+    if (!this.props.reporting) throw this.state.error;
+    return null;
+  }
+};
+function reportingRegistry(registry, report, made) {
+  const wrapped = {};
+  for (const [type, Renderer2] of Object.entries(registry)) {
+    const kept = made.get(type);
+    if (kept && kept.renderer === Renderer2) {
+      wrapped[type] = kept.wrapper;
+      continue;
+    }
+    const Component2 = Renderer2;
+    const Reported = (props) => /* @__PURE__ */ jsx(ElementBoundary, { type, report, reporting: React5.useContext(ReportingContext), children: /* @__PURE__ */ jsx(Component2, { ...props }) });
+    Reported.displayName = `Reported(${type})`;
+    made.set(type, { renderer: Renderer2, wrapper: Reported });
+    wrapped[type] = Reported;
+  }
+  return wrapped;
+}
+var CONTAINER = "mx-auto w-full max-w-6xl px-6 sm:px-8";
+function BrandBar({ app, links, tag }) {
+  const brand = useBrand();
+  return /* @__PURE__ */ jsx("header", { className: "border-b border-border", children: /* @__PURE__ */ jsxs("div", { className: cn(CONTAINER, "flex h-16 items-center gap-5"), children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: brand.logo.onLight,
+        alt: brand.name,
+        referrerPolicy: "no-referrer",
+        className: "h-7 w-auto dark:hidden"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: brand.logo.onDark,
+        alt: brand.name,
+        referrerPolicy: "no-referrer",
+        className: "hidden h-7 w-auto dark:block"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "h-5 w-px bg-border" }),
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground/80", children: app }),
+    /* @__PURE__ */ jsxs("div", { className: "ml-auto flex min-w-0 items-center gap-6", children: [
+      links && links.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Site", className: "hidden items-center gap-6 sm:flex", children: links.map((link, index) => /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "#",
+          onClick: (event) => event.preventDefault(),
+          className: "rounded-sm text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden",
+          children: link
+        },
+        `${index}-${link}`
+      )) }) : null,
+      tag ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "min-w-0 truncate rounded-lg border px-2.5 py-1 font-mono text-[11px]",
+            selectedBorderClass,
+            selectedFillClass,
+            linkTextClass
+          ),
+          children: tag
+        }
+      ) : null
+    ] })
+  ] }) });
+}
+
+// src/generative/declared-props.ts
+function definitionOf(schema) {
+  return schema._zod?.def;
+}
+function unwrapped(schema) {
+  let def = definitionOf(schema);
+  for (let depth = 0; depth < 8 && def; depth += 1) {
+    if (def.type !== "nullable" && def.type !== "optional" && def.type !== "default") return def;
+    def = def.innerType ? definitionOf(def.innerType) : void 0;
+  }
+  return def;
+}
+function absentValueOf(schema) {
+  if (schema.safeParse(null).success) return null;
+  if (schema.safeParse(void 0).success) return void 0;
+  const type = unwrapped(schema)?.type;
+  if (type === "string") return "";
+  if (type === "array") return [];
+  return void 0;
+}
+function conformValue(schema, value) {
+  if (value === void 0 || value === null) {
+    return schema.safeParse(value).success ? value : absentValueOf(schema);
+  }
+  if (schema.safeParse(value).success) return value;
+  const def = unwrapped(schema);
+  if (def?.type === "string" && (typeof value === "number" || typeof value === "boolean")) {
+    return String(value);
+  }
+  if (def?.type === "array" && def.element && Array.isArray(value)) {
+    const element = def.element;
+    return value.filter((entry) => element.safeParse(entry).success);
+  }
+  return absentValueOf(schema);
+}
+function conformProps(shape, props, asWritten = []) {
+  let conformed;
+  for (const [name, schema] of Object.entries(shape)) {
+    if (asWritten.includes(name)) continue;
+    const value = props[name];
+    const held = conformValue(schema, value);
+    if (held === value) continue;
+    conformed ?? (conformed = { ...props });
+    conformed[name] = held;
+  }
+  return conformed ?? props;
+}
+function withDeclaredProps(definitions, renderers, asWritten = {}) {
+  const wrapped = {};
+  for (const [name, render] of Object.entries(renderers)) {
+    const schema = definitions[name]?.props;
+    const shape = schema?.shape;
+    wrapped[name] = shape ? (ctx) => render({
+      ...ctx,
+      props: conformProps(shape, ctx.props, asWritten[name])
+    }) : render;
+  }
+  return wrapped;
+}
+function textOf(value) {
+  if (value === void 0 || value === null) return "";
+  if (typeof value !== "object") return String(value);
+  try {
+    return String(value);
+  } catch {
+    try {
+      return JSON.stringify(value) ?? "";
+    } catch {
+      return "";
+    }
+  }
+}
+var FrameHostContext = React5.createContext({});
 function FrameHostProvider({
   host,
   children
@@ -2125,11 +248,11 @@ function FrameHostProvider({
   return /* @__PURE__ */ jsx(FrameHostContext.Provider, { value: host, children });
 }
 function useFrameHost() {
-  return React4.useContext(FrameHostContext);
+  return React5.useContext(FrameHostContext);
 }
 function useBoundField(literal, binding, empty, { checks, validateOn }) {
   const [boundValue, setBoundValue] = useBoundProp(literal ?? void 0, binding);
-  const [localValue, setLocalValue] = React4.useState(literal ?? empty);
+  const [localValue, setLocalValue] = React5.useState(literal ?? empty);
   const isBound = Boolean(binding);
   const hasValidation = Boolean(binding && checks?.length);
   const when = validateOn ?? "change";
@@ -2401,7 +524,7 @@ function Progress({
   ] });
 }
 function useControlId(name) {
-  return `jr-${name}-${React4.useId()}`;
+  return `jr-${name}-${React5.useId()}`;
 }
 function Input({
   props,
@@ -2580,9 +703,9 @@ function Button({
     }
   );
 }
-var DescriptorContext = React4.createContext({});
+var DescriptorContext = React5.createContext({});
 function useDescriptorScope() {
-  return React4.useContext(DescriptorContext);
+  return React5.useContext(DescriptorContext);
 }
 function DescriptorProvider({
   scope,
@@ -2635,10 +758,10 @@ function withoutOptionalMark(label) {
 function MthdsField({
   props
 }) {
-  const scope = React4.useContext(DescriptorContext);
+  const scope = React5.useContext(DescriptorContext);
   const path = useAbsolutePath(props.path) ?? "";
   const found = scope.inputs && path ? inputFieldAtPath(scope.inputs, path) : void 0;
-  const field = React4.useMemo(
+  const field = React5.useMemo(
     () => found && (props.label || props.hint) ? {
       ...found,
       // The control marks an optional field itself, so a label that
@@ -2650,7 +773,7 @@ function MthdsField({
   );
   const value = useStateValue(path);
   const { set } = useStateStore();
-  const onChange = React4.useCallback((next) => set(path, next), [set, path]);
+  const onChange = React5.useCallback((next) => set(path, next), [set, path]);
   if (!field) return /* @__PURE__ */ jsx(Unresolved, { path: props.path, side: "input" });
   return /* @__PURE__ */ jsx(
     FieldRenderer,
@@ -2664,7 +787,7 @@ function MthdsField({
   );
 }
 function MthdsResult({ props }) {
-  const scope = React4.useContext(DescriptorContext);
+  const scope = React5.useContext(DescriptorContext);
   const path = useAbsolutePath(props.path) ?? "";
   const field = scope.result && path ? resultFieldAtPath(scope.result, path) : void 0;
   const value = useStateValue(path);
@@ -2677,7 +800,7 @@ function AccessibleSelect({ props, bindings, emit }) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React4.useState("");
+  const [localValue, setLocalValue] = React5.useState("");
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue ?? "" : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
@@ -2709,7 +832,7 @@ function AccessibleSelect({ props, bindings, emit }) {
     errors.length > 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: errors[0] }) : null
   ] });
 }
-function valueAt2(row, relativePath) {
+function valueAt(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;
@@ -2755,7 +878,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: formatColumnCell(valueAt2(row, column.path), column.format) }, 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(valueAt(row, column.path), column.format) }, column.path)) }, index)) })
   ] }) });
 }
 function numberFormat(format) {
@@ -2774,7 +897,7 @@ function numberFormat(format) {
 }
 function Metric({ props }) {
   const value = props.value;
-  const text = typeof value === "number" ? numberFormat(props.format ?? "plain").format(value) : value === null || value === void 0 || value === "" ? "\u2014" : String(value);
+  const text = typeof value === "number" ? numberFormat(props.format ?? "plain").format(value) : value === null || value === void 0 || value === "" ? "\u2014" : textOf(value);
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
     /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: props.label }),
     /* @__PURE__ */ jsxs("span", { className: "text-2xl font-semibold tabular-nums text-foreground", children: [
@@ -2807,8 +930,8 @@ function Split({
 }
 function Tabs({ props, children }) {
   const tabs = props.tabs ?? [];
-  const panels = React4.Children.toArray(children);
-  const [value, setValue] = React4.useState(tabs[0]?.value ?? "");
+  const panels = React5.Children.toArray(children);
+  const [value, setValue] = React5.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 max-sm:h-auto max-sm:flex-wrap", children: tabs.map((tab) => /* @__PURE__ */ jsx(
       TabsPrimitive.Trigger,
@@ -2838,8 +961,8 @@ var SECONDARY_BUTTON = cn(
 );
 function Steps({ props, children }) {
   const steps = props.steps ?? [];
-  const panels = React4.Children.toArray(children);
-  const [index, setIndex] = React4.useState(0);
+  const panels = React5.Children.toArray(children);
+  const [index, setIndex] = React5.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(
@@ -2968,7 +1091,7 @@ function Segmented({ props, bindings, emit }) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React4.useState("");
+  const [localValue, setLocalValue] = React5.useState("");
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue ?? "" : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
@@ -3008,7 +1131,7 @@ function NumberInput({ props, bindings, emit }) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React4.useState(void 0);
+  const [localValue, setLocalValue] = React5.useState(void 0);
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
@@ -3042,7 +1165,7 @@ function NumberInput({ props, bindings, emit }) {
     ] })
   ] });
 }
-var components2 = {
+var components = {
   Card: (ctx) => /* @__PURE__ */ jsx(Card, { ...ctx }),
   // A vertical Stack stretches its children unless the spec says otherwise:
   // hugging the content is the one layout a result page never wants, since a
@@ -3081,7 +1204,10 @@ var components2 = {
   DataTable: (ctx) => /* @__PURE__ */ jsx(DataTable, { ...ctx }),
   Metric: (ctx) => /* @__PURE__ */ jsx(Metric, { ...ctx })
 };
-var generativeRenderers = components2;
+var generativeRenderers = withDeclaredProps(
+  baseCatalog.data.components,
+  components
+);
 var RADIUS = "rounded-[calc(var(--radius,0.5rem)*1.5)]";
 function useAbsolute(path) {
   const repeat = useRepeatScope();
@@ -3229,10 +1355,13 @@ function amount(value, unit) {
   return unit ? `${n} ${unit}` : n;
 }
 function ProportionBar({ props }) {
-  const rows = Array.isArray(props.items) ? props.items : [];
+  const rows = (Array.isArray(props.items) ? props.items : []).filter(
+    (row) => typeof row === "object" && row !== null && !Array.isArray(row)
+  );
+  const amountOf = (raw) => typeof raw === "object" && raw !== null ? Number.NaN : Number(raw ?? 0);
   const parts = rows.map((row) => ({
-    label: String(row[props.labelKey] ?? ""),
-    value: Number(row[props.valueKey] ?? 0)
+    label: textOf(row[props.labelKey]),
+    value: amountOf(row[props.valueKey])
   })).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;
@@ -3317,10 +1446,11 @@ var ASPECT = {
 function Picture({
   props
 }) {
-  const path = useAbsolute(props.path);
+  const written = typeof props.path === "string" ? props.path : void 0;
+  const path = useAbsolute(written ?? "");
   const value = useStateValue(path);
   const resolve = useResolveUrl();
-  const content = readImageContent(value);
+  const content = written === void 0 ? void 0 : 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;
@@ -3345,7 +1475,7 @@ function Fact({
 }) {
   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" }),
+    /* @__PURE__ */ jsx("span", { className: "text-[16px] font-medium text-foreground tabular-nums", children: present(props.value) ? textOf(props.value) : "\u2014" }),
     props.detail ? /* @__PURE__ */ jsx("span", { className: "text-[13px] text-muted-foreground", children: props.detail }) : null
   ] });
 }
@@ -3356,7 +1486,7 @@ function Detail({ props }) {
     // 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) })
+      /* @__PURE__ */ jsx("span", { className: "text-foreground", children: textOf(props.value) })
     ] })
   );
 }
@@ -3393,19 +1523,25 @@ function TextList({ props }) {
     /* @__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);
+var frameRenderers = withDeclaredProps(
+  frameComponents,
+  {
+    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 })
+  },
+  // A refused `path` reaches the renderer as refused: its nearest value, the
+  // empty text, is the item itself inside a repeat.
+  { Picture: ["path"] }
+);
+var ResultSlotContext = React5.createContext(null);
 function ResultSlotProvider({
   slot,
   children
@@ -3413,58 +1549,11 @@ function ResultSlotProvider({
   return /* @__PURE__ */ jsx(ResultSlotContext.Provider, { value: slot, children });
 }
 function useResultSlot() {
-  return React4.useContext(ResultSlotContext);
+  return React5.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";
 function AppBar({ props }) {
-  const brand = useBrand();
-  return /* @__PURE__ */ jsx("header", { className: "border-b border-border", children: /* @__PURE__ */ jsxs("div", { className: cn(CONTAINER, "flex h-16 items-center gap-5"), children: [
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: brand.logo.onLight,
-        alt: brand.name,
-        referrerPolicy: "no-referrer",
-        className: "h-7 w-auto dark:hidden"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: brand.logo.onDark,
-        alt: brand.name,
-        referrerPolicy: "no-referrer",
-        className: "hidden h-7 w-auto dark:block"
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "h-5 w-px bg-border" }),
-    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground/80", children: props.app }),
-    /* @__PURE__ */ jsxs("div", { className: "ml-auto flex min-w-0 items-center gap-6", children: [
-      props.links && props.links.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Site", className: "hidden items-center gap-6 sm:flex", children: props.links.map((link) => /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: "#",
-          onClick: (event) => event.preventDefault(),
-          className: "rounded-sm text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden",
-          children: link
-        },
-        link
-      )) }) : null,
-      props.tag ? /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "min-w-0 truncate rounded-lg border px-2.5 py-1 font-mono text-[11px]",
-            selectedBorderClass,
-            selectedFillClass,
-            linkTextClass
-          ),
-          children: props.tag
-        }
-      ) : null
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsx(BrandBar, { app: props.app, links: props.links, tag: props.tag });
 }
 function Hero({ props }) {
   return /* @__PURE__ */ jsxs("section", { className: "pt-12 pb-10 sm:pt-14 sm:pb-12", children: [
@@ -3489,7 +1578,7 @@ function Hero({ props }) {
   ] });
 }
 function Workspace({ props, children }) {
-  const [work, rail] = React4.Children.toArray(children);
+  const [work, rail] = React5.Children.toArray(children);
   const railLeft = props.rail === "left";
   return /* @__PURE__ */ jsxs(
     "div",
@@ -3565,7 +1654,7 @@ function present2(value) {
   return value !== void 0 && value !== null && value !== "";
 }
 function SummaryRow({ props }) {
-  const text = [props.value, props.detail].filter(present2).map(String).join(props.separator ?? " ");
+  const text = [props.value, props.detail].filter(present2).map(textOf).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" })
@@ -3618,7 +1707,7 @@ function useTextField(props, bindings) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React4.useState("");
+  const [localValue, setLocalValue] = React5.useState("");
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue ?? "" : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
@@ -3698,16 +1787,20 @@ function BrandTextarea({
 var { registry: generativeRegistry } = defineRegistry(catalog, {
   components: {
     ...generativeRenderers,
-    Input: (ctx) => /* @__PURE__ */ jsx(BrandInput, { ...ctx }),
-    Textarea: (ctx) => /* @__PURE__ */ jsx(BrandTextarea, { ...ctx }),
-    AppBar: (ctx) => /* @__PURE__ */ jsx(AppBar, { ...ctx }),
-    Hero: (ctx) => /* @__PURE__ */ jsx(Hero, { ...ctx }),
-    Workspace: (ctx) => /* @__PURE__ */ jsx(Workspace, { ...ctx }),
-    Section: (ctx) => /* @__PURE__ */ jsx(Section, { ...ctx }),
-    Rail: (ctx) => /* @__PURE__ */ jsx(Rail, { ...ctx }),
-    SummaryRow: (ctx) => /* @__PURE__ */ jsx(SummaryRow, { ...ctx }),
-    Cta: (ctx) => /* @__PURE__ */ jsx(Cta, { ...ctx }),
-    Footer: (ctx) => /* @__PURE__ */ jsx(Footer, { ...ctx }),
+    // Held to their definitions as the base and frame renderers are
+    // (`declared-props.ts`).
+    ...withDeclaredProps(catalog.data.components, {
+      Input: (ctx) => /* @__PURE__ */ jsx(BrandInput, { ...ctx }),
+      Textarea: (ctx) => /* @__PURE__ */ jsx(BrandTextarea, { ...ctx }),
+      AppBar: (ctx) => /* @__PURE__ */ jsx(AppBar, { ...ctx }),
+      Hero: (ctx) => /* @__PURE__ */ jsx(Hero, { ...ctx }),
+      Workspace: (ctx) => /* @__PURE__ */ jsx(Workspace, { ...ctx }),
+      Section: (ctx) => /* @__PURE__ */ jsx(Section, { ...ctx }),
+      Rail: (ctx) => /* @__PURE__ */ jsx(Rail, { ...ctx }),
+      SummaryRow: (ctx) => /* @__PURE__ */ jsx(SummaryRow, { ...ctx }),
+      Cta: (ctx) => /* @__PURE__ */ jsx(Cta, { ...ctx }),
+      Footer: (ctx) => /* @__PURE__ */ jsx(Footer, { ...ctx })
+    }),
     ...frameRenderers
   }
 });
@@ -3718,130 +1811,85 @@ function GenerativePage({
   onRun,
   loading,
   registry = generativeRegistry,
-  brand
+  brand,
+  onElementError
 }) {
   const { inputs, result, env, idPrefix } = scope;
-  const stableScope = React4.useMemo(
+  const stableScope = React5.useMemo(
     () => ({ inputs, result, env, idPrefix }),
     [inputs, result, env, idPrefix]
   );
-  const latest = React4.useRef({ onRun, store });
-  React4.useEffect(() => {
+  const latest = React5.useRef({ onRun, store });
+  React5.useEffect(() => {
     latest.current = { onRun, store };
   });
-  const running = React4.useRef(false);
-  const [handlers] = React4.useState(() => ({
-    run: () => {
-      if (running.current) return void 0;
-      running.current = true;
-      let pending;
-      try {
-        pending = latest.current.onRun?.(latest.current.store.getSnapshot());
-      } catch (error) {
+  const report = React5.useRef(onElementError);
+  React5.useInsertionEffect(() => {
+    report.current = onElementError;
+  });
+  const [made] = React5.useState(() => /* @__PURE__ */ new Map());
+  const pageRegistry = React5.useMemo(
+    () => reportingRegistry(registry, report, made),
+    [registry, made]
+  );
+  const rootType = spec?.elements?.[spec.root]?.type ?? "root";
+  const specContent = React5.useMemo(() => contentOf(spec), [spec]);
+  const reporting = onElementError !== void 0;
+  const running = React5.useRef(false);
+  const [handlers] = React5.useState(() => {
+    const release = () => {
+      setTimeout(() => {
         running.current = false;
-        throw error;
-      }
-      if (isThenable(pending)) {
-        return Promise.resolve(pending).finally(() => {
-          running.current = false;
-        });
+      }, 0);
+    };
+    return {
+      run: () => {
+        if (running.current) return void 0;
+        running.current = true;
+        let pending;
+        try {
+          pending = latest.current.onRun?.(latest.current.store.getSnapshot());
+        } catch (error) {
+          release();
+          throw error;
+        }
+        if (isThenable(pending)) {
+          const settled = Promise.resolve(pending);
+          settled.then(release, release);
+          return settled;
+        }
+        release();
+        return void 0;
       }
-      running.current = false;
-      return void 0;
+    };
+  });
+  const page = /* @__PURE__ */ jsx(DescriptorProvider, { scope: stableScope, children: /* @__PURE__ */ jsx(JSONUIProvider, { registry: pageRegistry, store, handlers, children: /* @__PURE__ */ jsx(ReportingContext.Provider, { value: reporting, children: /* @__PURE__ */ jsx(
+    ElementBoundary,
+    {
+      type: rootType,
+      report,
+      reporting,
+      resetOn: specContent,
+      children: /* @__PURE__ */ jsx(Renderer, { spec, registry: pageRegistry, loading })
     }
-  }));
-  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 contentOf(spec) {
+  try {
+    return JSON.stringify(spec);
+  } catch {
+    return spec;
+  }
+}
 function useStoreSnapshot(store) {
-  return React4.useSyncExternalStore(
+  return React5.useSyncExternalStore(
     store.subscribe,
     store.getSnapshot,
     store.getServerSnapshot ?? store.getSnapshot
   );
 }
 
-// src/generative/state.ts
-function isRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function payloadToState(field, payload) {
-  if (payload === void 0 || payload === null) return payload;
-  if (isNativeValueNode(field)) return payload;
-  switch (field.kind) {
-    case "date": {
-      const content = readDateContent(payload);
-      return content ? formatDateContent(content) : payload;
-    }
-    case "list": {
-      const items = Array.isArray(payload) ? payload : isRecord(payload) && Array.isArray(payload.items) ? payload.items : void 0;
-      if (!items) return payload;
-      return items.map((item) => payloadToState(field.item, item));
-    }
-    case "object": {
-      if (!isRecord(payload)) return payload;
-      const out = { ...payload };
-      for (const child of field.fields) {
-        if (hasOwnProp(payload, child.name)) {
-          out[child.name] = payloadToState(child, payload[child.name]);
-        }
-      }
-      return out;
-    }
-    case "document":
-    case "image":
-    case "text":
-    case "prose":
-    case "number":
-    case "boolean":
-    case "enum":
-    case "unknown":
-      return payload;
-    default:
-      return field;
-  }
-}
-
-// src/generative/fixture.ts
-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("--");
-}
-var PRODUCER_LABEL = {
-  "pipelex-method": "Pipelex method",
-  "claude-code-subagent": "Claude Code subagent",
-  "claude-code-session": "Claude Code session, by hand"
-};
-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"}`
-    );
-  }
-  return parts.join(" \xB7 ");
-}
-function findFixture(fixtures, pipeRef, id) {
-  const found = fixtures.find(
-    (fixture) => fixture.pipeRef === pipeRef && fixtureId(fixture) === id
-  );
-  if (!found) {
-    const known = fixtures.filter((fixture) => fixture.pipeRef === pipeRef).map(fixtureId).join(", ");
-    throw new Error(`No spec fixture ${id} for ${pipeRef}. Known: ${known || "none"}.`);
-  }
-  return found;
-}
-
-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 };
+export { BrandBar, BrandProvider, DescriptorProvider, FrameHostProvider, GenerativePage, ResultSlotProvider, domIdFor, generativeRegistry, generativeRenderers, pathFromDomId, useBrand, useDescriptorScope, useFrameHost, useResultSlot, useStoreSnapshot };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map