@pipelex/mthds-form 0.32.0 → 0.34.0

package/dist/generative/index.js

@@ -1,33 +1,34 @@
 "use client";
-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 { cn, headingClass, checkedAccentClass, focusOutlineClass, useResolveUrl, panelSurfaceClass, panelFlatShadowClass, linkTextClass, actionShadowClass, panelRaisedShadowClass, fieldControlClass, useFieldPresentation, useFieldStrings, fieldLabel, ResultRoot, ResultField, FieldRenderer, enumLabeler, ToggleGroup, ToggleGroupItem, selectedFillStrongClass, Switch, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, selectedBorderClass, selectedFillClass, isThenable } from '../chunk-5RV3ASMO.js';
+import { baseCatalog, catalog, frameComponents, shareAmount, INPUTS_ROOT, joinPath, resultFieldAtPath, segmentsUnder, RESULT_ROOT, inputFieldAtPath, definitionChain, unwrapped } from '../chunk-XYS5KCXB.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, layoutCheck, layoutCheckProblems, layoutFits, layoutProblems, payloadToState, promptHashSubject, repeatBasePathOf, resultBrief, resultFieldAtPath, seedLine, segmentsUnder, specFromJsonl, specToJsonl, validateAgainstCatalog } from '../chunk-XYS5KCXB.js';
 import '../chunk-4VAO6BDE.js';
-export { seedInputs } from '../chunk-VH5CDQDR.js';
+export { seedInputs } from '../chunk-AURDKAIC.js';
 import '../chunk-L23R3JNQ.js';
 import '../chunk-56WECFBD.js';
-import '../chunk-ZX52CQJ4.js';
+import '../chunk-CFBK7NO7.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-PNNWNRPG.js';
 import '../chunk-ZB4RYUKV.js';
 import '../chunk-FABY3DEY.js';
 import '../chunk-XCO6GTEC.js';
 import '../chunk-E6BIXJ6C.js';
-import '../chunk-XO5OENNF.js';
+import { waitingFields } from '../chunk-TF4RTKLH.js';
 import '../chunk-OD3VYXUY.js';
 import '../chunk-WYH56SOZ.js';
-import { hasOwnProp } from '../chunk-V3OV2XQT.js';
+import { hasOwnProp, ownProp } 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 * as React2 from 'react';
+import { defineRegistry, useStateValue, useRepeatScope, useStateStore, useBoundProp, useFieldValidation, useOptionalValidation, JSONUIProvider, Renderer, useVisibility } from '@json-render/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { builtInValidationFunctions, resolveRepeatStatePath, getByPath, evaluateVisibility, resolveElementProps, resolveRepeatItemStatePath } from '@json-render/core';
+export { createStateStore } from '@json-render/core';
 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';
 
-var BrandContext = React5.createContext(null);
+var BrandContext = React2.createContext(null);
 function BrandProvider({
   manifest,
   children
@@ -36,7 +37,7 @@ function BrandProvider({
   return /* @__PURE__ */ jsx(BrandContext.Provider, { value: manifest, children });
 }
 function useBrand() {
-  const manifest = React5.useContext(BrandContext);
+  const manifest = React2.useContext(BrandContext);
   if (!manifest)
     throw new Error(
       "useBrand: no brand in scope. Pass `brand` to GenerativePage, or wrap the tree in BrandProvider."
@@ -47,7 +48,7 @@ var WEIGHTS = "400;500;600;700";
 function useWebfont(webfont) {
   const provider = webfont?.provider;
   const family = webfont?.family;
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (!provider || !family) return;
     const key = `${provider}:${family}`;
     if (document.head.querySelector(`link[data-brand-webfont="${CSS.escape(key)}"]`)) return;
@@ -67,40 +68,414 @@ function useWebfont(webfont) {
     document.head.appendChild(link);
   }, [provider, family]);
 }
-var ReportingContext = React5.createContext(false);
-var ElementBoundary = class extends React5.Component {
+var CHECK_WHEN = "checkedFieldWhen";
+var WHEN_ENABLED = "checkedFieldEnabled";
+var WHEN_TYPE = "checkedFieldType";
+var CHECKED_FIELD_FUNCTIONS = {
+  [CHECK_WHEN]: (value, args) => {
+    if (args?.[WHEN_ENABLED] !== true) return true;
+    const type = args[WHEN_TYPE];
+    if (typeof type !== "string" || !hasOwnProp(builtInValidationFunctions, type)) return true;
+    return builtInValidationFunctions[type](value, args);
+  }
+};
+function heldTo(check, enabled) {
+  return {
+    type: CHECK_WHEN,
+    message: check.message,
+    args: {
+      ...check.args,
+      [WHEN_ENABLED]: { $cond: enabled, $then: true, $else: false },
+      [WHEN_TYPE]: check.type
+    }
+  };
+}
+var CheckedFields = class {
+  constructor() {
+    // One entry per mounted field, so two fields handed one config object are
+    // two entries, and one leaving does not take the other's checks with it.
+    this.byPath = /* @__PURE__ */ new Map();
+    // Every path the record speaks for: those it carries now, and those it has
+    // just emptied, whose old checks json-render may still read until it has
+    // drawn once with the emptied ones. The verdict on these is the record's.
+    this.told = /* @__PURE__ */ new Set();
+    // The emptied paths, each with the validation json-render handed over when
+    // the record emptied it. A later one has drawn with the emptied checks, so
+    // the path goes back to json-render: a host's control that registers its
+    // checks there directly is then judged by them.
+    this.emptied = /* @__PURE__ */ new Map();
+    this.validation = null;
+  }
+  /** Hands the record json-render's validation, and tells it what is already mounted. */
+  attach(validation) {
+    if (validation === this.validation) return;
+    const first = this.validation === null;
+    this.validation = validation;
+    for (const [path, at] of this.emptied) {
+      if (at === validation) continue;
+      this.emptied.delete(path);
+      this.told.delete(path);
+    }
+    if (first) for (const path of this.byPath.keys()) this.publish(path);
+  }
+  /** Enters one mounted field; what it returns leaves it again. */
+  enter(path, config, field = {}) {
+    const entries = this.byPath.get(path) ?? /* @__PURE__ */ new Set();
+    this.byPath.set(path, entries);
+    const entry = {
+      config,
+      reveal: field.reveal ?? (() => {
+      }),
+      focus: field.focus ?? (() => {
+      }),
+      element: field.element ?? (() => null)
+    };
+    entries.add(entry);
+    this.publish(path);
+    return () => {
+      entries.delete(entry);
+      if (entries.size === 0) this.byPath.delete(path);
+      this.publish(path);
+    };
+  }
+  /**
+   * The checks of every field mounted at `path`, combined, or none when no
+   * field is. A field's `enabled` condition holds its own checks and no
+   * other field's: json-render reads `enabled` once for a whole config, and
+   * compares two configs without it, so each check of a conditional config
+   * carries its condition itself (`CHECK_WHEN`).
+   */
+  configFor(path) {
+    const entries = this.byPath.get(path);
+    if (!entries || entries.size === 0) return void 0;
+    const [first] = entries;
+    return {
+      checks: [...entries].flatMap(({ config }) => {
+        const checks = config.checks ?? [];
+        return config.enabled === void 0 ? checks : checks.map((check) => heldTo(check, config.enabled));
+      }),
+      ...first?.config.validateOn ? { validateOn: first.config.validateOn } : {}
+    };
+  }
+  /**
+   * Runs the checks of the page and answers whether they all pass; every
+   * check runs, so each failing field shows its message. When one fails, the
+   * person is taken to the first failing field in the page's order: the
+   * panels around it opened and the focus put on it, since a tab, a step or a
+   * section that is not open keeps its fields mounted and hidden.
+   *
+   * Each path is judged once, by one side. A path the record has carried is
+   * judged by the record's checks as it holds them now: json-render's own
+   * `validateAll` reads what it was told as of its provider's last render,
+   * which a press can beat by one task, so a field hidden or mounted the
+   * task before would be judged by checks it no longer carries, or not yet
+   * by those it does. A path the record does not carry, and has not just
+   * emptied, is a host's control that registered its checks with json-render
+   * directly (`useFieldValidation`), and json-render's verdict on it stands,
+   * a path the record once carried included.
+   */
+  check(validation) {
+    const before = validation.fieldStates;
+    validation.validateAll();
+    const after = validation.fieldStates;
+    let pass = true;
+    for (const [path, state] of Object.entries(after)) {
+      if (state === before[path] || this.told.has(path)) continue;
+      if (state.result?.valid === false) pass = false;
+    }
+    const failing = [];
+    for (const path of this.told) {
+      const combined = this.configFor(path);
+      if (combined) {
+        if (!validation.validate(path, combined).valid) {
+          pass = false;
+          failing.push(...this.byPath.get(path) ?? []);
+        }
+      } else if (after[path] !== before[path]) {
+        validation.clear(path);
+      }
+    }
+    const first = firstInPage(failing);
+    if (first) {
+      first.reveal();
+      first.focus();
+    }
+    return pass;
+  }
+  publish(path) {
+    if (!this.validation) return;
+    const config = this.configFor(path);
+    this.told.add(path);
+    if (config) this.emptied.delete(path);
+    else this.emptied.set(path, this.validation);
+    this.validation.registerField(path, config ?? { checks: [] });
+  }
+};
+var FOLLOWING = 4;
+function firstInPage(entries) {
+  let first;
+  let firstElement = null;
+  for (const entry of entries) {
+    const element = entry.element();
+    if (!first) {
+      first = entry;
+      firstElement = element;
+      continue;
+    }
+    if (!element) continue;
+    if (!firstElement || element.compareDocumentPosition(firstElement) & FOLLOWING) {
+      first = entry;
+      firstElement = element;
+    }
+  }
+  return first;
+}
+var CheckedFieldsContext = React2.createContext(null);
+var RevealContext = React2.createContext(null);
+function RevealPanel({ open, children }) {
+  const outer = React2.useContext(RevealContext);
+  const latest = React2.useRef({ open, outer });
+  React2.useInsertionEffect(() => {
+    latest.current = { open, outer };
+  });
+  const reveal = React2.useCallback(() => {
+    latest.current.outer?.();
+    latest.current.open();
+  }, []);
+  return /* @__PURE__ */ jsx(RevealContext.Provider, { value: reveal, children });
+}
+function useCheckedField(path, config) {
+  const fields = React2.useContext(CheckedFieldsContext);
+  const field = useFieldValidation(path, fields ? void 0 : config);
+  const validation = useOptionalValidation();
+  const reveal = React2.useContext(RevealContext);
+  const element = React2.useRef(null);
+  const focusRef = React2.useCallback((node) => {
+    element.current = node;
+  }, []);
+  const [focusAsked, askFocus] = React2.useState(0);
+  React2.useEffect(() => {
+    if (focusAsked === 0) return;
+    const target = element.current;
+    if (!target) return;
+    target.focus({ preventScroll: true });
+    target.scrollIntoView?.({ block: "center" });
+  }, [focusAsked]);
+  const signature = config ? JSON.stringify(config) : "";
+  const latest = React2.useRef({ config, reveal });
+  React2.useInsertionEffect(() => {
+    latest.current = { config, reveal };
+  });
+  React2.useEffect(() => {
+    const entered = latest.current.config;
+    if (!fields || !path || !entered) return void 0;
+    return fields.enter(path, entered, {
+      reveal: () => latest.current.reveal?.(),
+      focus: () => askFocus((asked) => asked + 1),
+      element: () => element.current
+    });
+  }, [fields, path, signature]);
+  const fallback = field.validate;
+  const validate = React2.useCallback(() => {
+    const combined = fields?.configFor(path);
+    return validation && combined ? validation.validate(path, combined) : fallback();
+  }, [fields, path, validation, fallback]);
+  return { ...field, validate, focusRef };
+}
+var ReportingContext = React2.createContext(false);
+function said(error) {
+  try {
+    return String(error);
+  } catch {
+    return "an error that cannot be written out";
+  }
+}
+function contentOf(value) {
+  const open = [];
+  let entries = 0;
+  try {
+    return JSON.stringify(value, function(_key, entry) {
+      if (++entries > MAX_CONTENT_ENTRIES) throw new RangeError("too large to compare");
+      while (open.length > 0 && open[open.length - 1] !== this) open.pop();
+      if (typeof entry === "bigint") return `${entry}n`;
+      if (typeof entry === "object" && entry !== null) {
+        if (open.includes(entry)) return "[cycle]";
+        open.push(entry);
+      }
+      return entry;
+    }) ?? "undefined";
+  } catch {
+    return "an input that cannot be written out";
+  }
+}
+var MAX_CONTENT_ENTRIES = 5e6;
+function sameCue(a, b) {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((entry, index) => Object.is(entry, b[index]));
+  }
+  return Object.is(a, b);
+}
+var ElementBoundary = class extends React2.Component {
   constructor(props) {
     super(props);
-    this.state = { failed: false, error: void 0, resetOn: props.resetOn };
+    this.state = { failed: false, error: void 0 };
   }
   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 };
+  /** What the element renders from, as text; total, since it reads a model's layout and the store. */
+  input() {
+    try {
+      return contentOf(this.props.inputOf ? this.props.inputOf() : this.props.resetOn);
+    } catch (error) {
+      return `the input could not be read: ${said(error)}`;
+    }
   }
   componentDidCatch(error, info) {
-    if (!this.props.reporting) return;
+    if (this.props.loading) {
+      this.failedOn = void 0;
+      return;
+    }
+    this.failedOn = this.input();
     const componentStack = info.componentStack ?? void 0;
-    this.props.report.current?.(error, {
-      type: this.props.type,
-      ...componentStack ? { componentStack } : {}
-    });
+    if (this.props.reporting) {
+      this.props.report.current?.(error, {
+        type: this.props.type,
+        ...componentStack ? { componentStack } : {}
+      });
+      return;
+    }
+    if (!this.props.root) {
+      console.error(
+        `[json-render] Rendering error in <${this.props.type}>:`,
+        error,
+        componentStack
+      );
+    }
+  }
+  componentDidUpdate(previous, previousState) {
+    if (!this.state.failed || !previousState.failed) return;
+    const streamEnded = previous.loading === true && !this.props.loading;
+    if (streamEnded || this.inputChanged(previous)) {
+      this.failedOn = void 0;
+      this.setState({ failed: false, error: void 0 });
+    }
+  }
+  /** Whether what the element renders from is no longer what it failed on. */
+  inputChanged(previous) {
+    if (sameCue(this.props.resetOn, previous.resetOn)) return false;
+    if (this.props.loading || this.failedOn === void 0) return true;
+    return !Object.is(this.input(), this.failedOn);
   }
-  // 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.
+  // Whether the root throws the error on is decided as it 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 root's error goes on, in the same render, to the
+  // host's boundary around the page, which records it once.
   render() {
     if (!this.state.failed) return this.props.children;
-    if (!this.props.reporting) throw this.state.error;
+    if (this.props.root && !this.props.reporting && !this.props.loading) throw this.state.error;
     return null;
   }
 };
+function resolvedOf(element, ctx) {
+  if (!element) return void 0;
+  try {
+    return {
+      props: resolveElementProps(element.props ?? {}, ctx),
+      visible: element.visible === void 0 ? true : evaluateVisibility(element.visible, ctx)
+    };
+  } catch (error) {
+    return `throws: ${said(error)}`;
+  }
+}
+function childElementOf(node) {
+  if (!React2.isValidElement(node)) return void 0;
+  const { element, elementKey } = node.props;
+  if (typeof elementKey !== "string") return void 0;
+  return typeof element === "object" && element !== null ? element : void 0;
+}
+function repeatOf(node) {
+  if (!React2.isValidElement(node)) return void 0;
+  const { element, spec, elementKey, itemFilter } = node.props;
+  if (elementKey !== void 0 || element?.repeat === void 0) return void 0;
+  const elements = spec?.elements;
+  if (typeof elements !== "object" || elements === null || !Array.isArray(element.children)) {
+    return void 0;
+  }
+  return { keys: element.children, elements, itemFilter };
+}
+function inputOfElement(props, visibility, scope) {
+  const element = props.element;
+  const state = visibility.stateModel;
+  const ctx = {
+    ...visibility,
+    ...scope ? { repeatItem: scope.item, repeatIndex: scope.index, repeatBasePath: scope.basePath } : {}
+  };
+  const statePath = element?.repeat?.statePath;
+  let list;
+  let listPath;
+  if (statePath !== void 0) {
+    try {
+      listPath = resolveRepeatStatePath(statePath, scope?.basePath);
+      list = listPath === void 0 ? void 0 : getByPath(state, listPath);
+    } catch (error) {
+      list = `throws: ${said(error)}`;
+    }
+  }
+  const repeated = (repeat) => {
+    if (listPath === void 0 || !Array.isArray(list)) return null;
+    const path = listPath;
+    return list.map((item, index) => {
+      const itemCtx = {
+        ...visibility,
+        repeatItem: item,
+        repeatIndex: index,
+        repeatBasePath: resolveRepeatItemStatePath(path, index)
+      };
+      if (repeat.itemFilter !== void 0) {
+        try {
+          if (!evaluateVisibility(repeat.itemFilter, itemCtx)) return null;
+        } catch (error) {
+          return `throws: ${said(error)}`;
+        }
+      }
+      return repeat.keys.map((key) => {
+        const child = typeof key === "string" ? ownProp(repeat.elements, key) : void 0;
+        return child ? { element: child, resolved: resolvedOf(child, itemCtx) } : null;
+      });
+    });
+  };
+  const under = (nodes) => React2.Children.toArray(nodes).map((node) => {
+    const repeat = repeatOf(node);
+    if (repeat) return { repeated: repeated(repeat) };
+    const child = childElementOf(node);
+    return child ? { element: child, resolved: resolvedOf(child, ctx) } : null;
+  });
+  const slots = typeof props.slots === "object" && props.slots !== null ? Object.fromEntries(Object.entries(props.slots).map(([name, nodes]) => [name, under(nodes)])) : void 0;
+  return { props: element?.props, list, children: under(props.children), slots };
+}
+function inputOfRoot(spec, visibility) {
+  const root = spec?.elements?.[spec.root];
+  return { spec, root: resolvedOf(root, visibility) };
+}
+function RootBoundary(props) {
+  const { ctx } = useVisibility();
+  return /* @__PURE__ */ jsx(
+    ElementBoundary,
+    {
+      type: props.type,
+      report: props.report,
+      reporting: props.reporting,
+      loading: props.loading,
+      resetOn: [props.spec, ctx],
+      inputOf: () => inputOfRoot(props.spec, ctx),
+      root: true,
+      children: props.children
+    }
+  );
+}
 function reportingRegistry(registry, report, made) {
   const wrapped = {};
   for (const [type, Renderer2] of Object.entries(registry)) {
@@ -110,13 +485,90 @@ function reportingRegistry(registry, report, made) {
       continue;
     }
     const Component2 = Renderer2;
-    const Reported = (props) => /* @__PURE__ */ jsx(ElementBoundary, { type, report, reporting: React5.useContext(ReportingContext), children: /* @__PURE__ */ jsx(Component2, { ...props }) });
+    const Reported = (props) => {
+      const reporting = React2.useContext(ReportingContext);
+      const { ctx } = useVisibility();
+      const scope = useRepeatScope();
+      return /* @__PURE__ */ jsx(
+        ElementBoundary,
+        {
+          type,
+          report,
+          reporting,
+          loading: props.loading === true,
+          resetOn: [props.element, props.children, props.slots, ctx, scope],
+          inputOf: () => inputOfElement(props, ctx, scope),
+          children: /* @__PURE__ */ jsx(Component2, { ...props })
+        }
+      );
+    };
     Reported.displayName = `Reported(${type})`;
     made.set(type, { renderer: Renderer2, wrapper: Reported });
     wrapped[type] = Reported;
   }
   return wrapped;
 }
+function placedInputs(spec) {
+  const placed = /* @__PURE__ */ new Map();
+  const elements = spec?.elements;
+  if (!isRecord(elements) || typeof spec?.root !== "string") return placed;
+  const seen = /* @__PURE__ */ new Set();
+  const pending = [spec.root];
+  while (pending.length > 0) {
+    const key = pending.pop();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    const element = ownProp(elements, key);
+    if (!isRecord(element)) continue;
+    const props = isRecord(element.props) ? element.props : {};
+    place(placed, [...repeatedList(element.repeat), ...inputPathsOf(element.type, props)], props);
+    pending.push(...[...keysOf(element.children), ...slotKeys(element.slots)].reverse());
+  }
+  return placed;
+}
+function place(placed, paths, props) {
+  const label = typeof props.label === "string" ? props.label.trim() : "";
+  for (const path of paths) {
+    const known = placed.get(path);
+    if (!known) placed.set(path, { order: placed.size, ...label ? { label } : {} });
+    else if (known.label === void 0 && label) known.label = label;
+  }
+}
+function inputPathsOf(type, props) {
+  const paths = [];
+  if (type === "MthdsField" && typeof props.path === "string") paths.push(props.path);
+  for (const value of Object.values(props)) {
+    if (isRecord(value) && typeof value.$bindState === "string") paths.push(value.$bindState);
+  }
+  return paths.flatMap(inputPath);
+}
+function repeatedList(repeat) {
+  return isRecord(repeat) && typeof repeat.statePath === "string" ? inputPath(repeat.statePath) : [];
+}
+function inputPath(path) {
+  const segments = segmentsUnder(INPUTS_ROOT, path);
+  return segments && segments.length > 0 ? [joinPath(INPUTS_ROOT, ...segments)] : [];
+}
+function keysOf(value) {
+  return Array.isArray(value) ? value.filter((key) => typeof key === "string") : [];
+}
+function slotKeys(slots) {
+  return isRecord(slots) ? Object.values(slots).flatMap(keysOf) : [];
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+var PlacedInputsContext = React2.createContext(/* @__PURE__ */ new Map());
+function PlacedInputsProvider({
+  spec,
+  children
+}) {
+  const placed = React2.useMemo(() => placedInputs(spec), [spec]);
+  return /* @__PURE__ */ jsx(PlacedInputsContext.Provider, { value: placed, children });
+}
+function usePlacedInputs() {
+  return React2.useContext(PlacedInputsContext);
+}
 var CONTAINER = "mx-auto w-full max-w-6xl px-6 sm:px-8";
 function BrandBar({ app, links, tag }) {
   const brand = useBrand();
@@ -147,7 +599,10 @@ function BrandBar({ app, links, tag }) {
         {
           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",
+          className: cn(
+            "rounded-sm text-sm text-muted-foreground transition-colors hover:text-foreground",
+            focusOutlineClass
+          ),
           children: link
         },
         `${index}-${link}`
@@ -169,39 +624,72 @@ function BrandBar({ app, links, tag }) {
 }
 
 // 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;
+var factsBySchema = /* @__PURE__ */ new WeakMap();
+function factsOf(schema) {
+  const known = factsBySchema.get(schema);
+  if (known) return known;
+  const chain = definitionChain(schema);
+  const def = chain[chain.length - 1];
+  const acceptsNull = schema.safeParse(null).success;
+  const acceptsUndefined = schema.safeParse(void 0).success;
+  const absent = acceptsNull ? null : acceptsUndefined ? void 0 : def?.type === "string" ? "" : def?.type === "array" ? [] : void 0;
+  const facts = { def, plain: plainType(chain), acceptsNull, acceptsUndefined, absent };
+  factsBySchema.set(schema, facts);
+  return facts;
+}
+var PASSING_WRAPPERS = /* @__PURE__ */ new Set([
+  "optional",
+  "nullable",
+  "default",
+  "prefault",
+  "readonly",
+  "catch",
+  "nonoptional"
+]);
+function plainType(chain) {
+  const def = chain[chain.length - 1];
+  if (!def || def.format !== void 0) return void 0;
+  if (chain.some((link) => link.checks !== void 0 && link.checks.length > 0)) return void 0;
+  if (!chain.slice(0, -1).every((link) => PASSING_WRAPPERS.has(link.type))) return void 0;
+  return def.type === "string" || def.type === "boolean" || def.type === "number" ? def.type : void 0;
+}
+function plainlyConforms(plain, value) {
+  if (plain === "number") return typeof value === "number" && Number.isFinite(value);
+  return plain !== void 0 && typeof value === plain;
+}
+function writtenOut(schema, value) {
+  if (typeof value !== "number" && typeof value !== "boolean") return void 0;
+  const text = String(value);
+  return schema.safeParse(text).success ? text : void 0;
+}
+function keptEntries(schema, element, entries, absent) {
+  const textItems = unwrapped(element)?.type === "string";
+  const kept = entries.flatMap((entry) => {
+    if (element.safeParse(entry).success) return [entry];
+    const text = textItems ? writtenOut(element, entry) : void 0;
+    return text === void 0 ? [] : [text];
+  });
+  return schema.safeParse(kept).success ? kept : absent;
 }
+var conformedBySchema = /* @__PURE__ */ new WeakMap();
 function conformValue(schema, value) {
-  if (value === void 0 || value === null) {
-    return schema.safeParse(value).success ? value : absentValueOf(schema);
+  const facts = factsOf(schema);
+  if (value === void 0) return facts.acceptsUndefined ? value : facts.absent;
+  if (value === null) return facts.acceptsNull ? value : facts.absent;
+  if (typeof value !== "object") {
+    if (plainlyConforms(facts.plain, value) || schema.safeParse(value).success) return value;
+    if (facts.def?.type === "string") return writtenOut(schema, value) ?? facts.absent;
+    return facts.absent;
   }
-  if (schema.safeParse(value).success) return value;
-  const def = unwrapped(schema);
-  if (def?.type === "string" && (typeof value === "number" || typeof value === "boolean")) {
-    return String(value);
+  let byValue = conformedBySchema.get(schema);
+  if (!byValue) {
+    byValue = /* @__PURE__ */ new WeakMap();
+    conformedBySchema.set(schema, byValue);
   }
-  if (def?.type === "array" && def.element && Array.isArray(value)) {
-    const element = def.element;
-    return value.filter((entry) => element.safeParse(entry).success);
-  }
-  return absentValueOf(schema);
+  if (byValue.has(value)) return byValue.get(value);
+  const held = schema.safeParse(value).success ? value : facts.def?.type === "array" && facts.def.element && Array.isArray(value) ? keptEntries(schema, facts.def.element, value, facts.absent) : facts.absent;
+  byValue.set(value, held);
+  return held;
 }
 function conformProps(shape, props, asWritten = []) {
   let conformed;
@@ -229,18 +717,13 @@ function withDeclaredProps(definitions, renderers, asWritten = {}) {
 }
 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 "";
-    }
+  if (Array.isArray(value)) {
+    return value.map(textOf).filter((text) => text !== "").join(", ");
   }
+  if (typeof value === "object") return "";
+  return String(value);
 }
-var FrameHostContext = React5.createContext({});
+var FrameHostContext = React2.createContext({});
 function FrameHostProvider({
   host,
   children
@@ -248,25 +731,115 @@ function FrameHostProvider({
   return /* @__PURE__ */ jsx(FrameHostContext.Provider, { value: host, children });
 }
 function useFrameHost() {
-  return React5.useContext(FrameHostContext);
+  return React2.useContext(FrameHostContext);
 }
-function useBoundField(literal, binding, empty, { checks, validateOn }) {
+
+// src/generative/format.ts
+var LAYOUT_LOCALE = "en-GB";
+var NUMBER_OPTIONS = {
+  // Grouped, with the places it has up to two, never padded.
+  grouped: { maximumFractionDigits: 2 },
+  integer: { maximumFractionDigits: 0 },
+  decimal: { minimumFractionDigits: 2, maximumFractionDigits: 2 },
+  compact: { notation: "compact", maximumFractionDigits: 1 },
+  // As written: every place, and no grouping, so a year or an id reads as itself.
+  plain: { maximumFractionDigits: 20, useGrouping: false }
+};
+var numbers = /* @__PURE__ */ new Map();
+function formatNumber(value, style = "grouped") {
+  let format = numbers.get(style);
+  if (!format) {
+    format = new Intl.NumberFormat(LAYOUT_LOCALE, NUMBER_OPTIONS[style]);
+    numbers.set(style, format);
+  }
+  return format.format(value);
+}
+var currencies = /* @__PURE__ */ new Map();
+var KNOWN_CURRENCIES = (() => {
+  try {
+    return typeof Intl.supportedValuesOf === "function" ? new Set(Intl.supportedValuesOf("currency")) : null;
+  } catch {
+    return null;
+  }
+})();
+function currencyFormat(code) {
+  if (!currencies.has(code)) {
+    if (KNOWN_CURRENCIES && !KNOWN_CURRENCIES.has(code)) {
+      currencies.set(code, null);
+      return null;
+    }
+    let money;
+    try {
+      money = {
+        whole: new Intl.NumberFormat(LAYOUT_LOCALE, {
+          style: "currency",
+          currency: code,
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0
+        }),
+        fractional: new Intl.NumberFormat(LAYOUT_LOCALE, { style: "currency", currency: code })
+      };
+    } catch {
+      money = null;
+    }
+    currencies.set(code, money);
+  }
+  return currencies.get(code);
+}
+function formatAmount(value, unit) {
+  if (unit && /^[A-Z]{3}$/.test(unit)) {
+    const money = currencyFormat(unit);
+    if (money) {
+      const fraction = money.fractional.formatToParts(value).find((p) => p.type === "fraction");
+      const whole = fraction === void 0 || /^0+$/.test(fraction.value);
+      return (whole ? money.whole : money.fractional).format(value);
+    }
+  }
+  const written = formatNumber(value);
+  return unit ? `${written} ${unit}` : written;
+}
+var DAY_OPTIONS = {
+  long: { weekday: "long", day: "numeric", month: "long", year: "numeric", timeZone: "UTC" },
+  short: { day: "numeric", month: "short", year: "numeric", timeZone: "UTC" },
+  weekday: { weekday: "short", day: "numeric", month: "long", timeZone: "UTC" }
+};
+var days = /* @__PURE__ */ new Map();
+function formatDay(value, style = "long") {
+  const written = readDateContent(value)?.date;
+  const day = written === void 0 ? null : /^\d{4}-\d{2}-\d{2}/.exec(written);
+  if (!day) return void 0;
+  const date = /* @__PURE__ */ new Date(`${day[0]}T12:00:00Z`);
+  if (Number.isNaN(date.getTime()) || date.toISOString().slice(0, 10) !== day[0]) {
+    return void 0;
+  }
+  let format = days.get(style);
+  if (!format) {
+    format = new Intl.DateTimeFormat(LAYOUT_LOCALE, DAY_OPTIONS[style]);
+    days.set(style, format);
+  }
+  return format.format(date);
+}
+function useBoundField(literal, binding, empty, { checks, validateOn }, id) {
   const [boundValue, setBoundValue] = useBoundProp(literal ?? void 0, binding);
-  const [localValue, setLocalValue] = React5.useState(literal ?? empty);
+  const [localValue, setLocalValue] = React2.useState(literal ?? empty);
   const isBound = Boolean(binding);
   const hasValidation = Boolean(binding && checks?.length);
   const when = validateOn ?? "change";
-  const { errors, validate } = useFieldValidation(
+  const { errors, validate, focusRef } = useCheckedField(
     binding ?? "",
     hasValidation ? { checks: checks ?? [], validateOn: when } : void 0
   );
+  const error = errors[0];
   return {
     value: isBound ? boundValue ?? empty : localValue,
     setValue: (next) => {
       if (isBound) setBoundValue(next);
       else setLocalValue(next);
     },
-    error: errors[0],
+    error,
+    errorId: `${id}-error`,
+    describedBy: error ? `${id}-error` : void 0,
+    focusRef,
     validateOnChange: () => {
       if (hasValidation && when === "change") validate();
     },
@@ -276,8 +849,8 @@ function useBoundField(literal, binding, empty, { checks, validateOn }) {
   };
 }
 var LABEL = "block text-sm leading-none font-medium";
-function FieldError({ message }) {
-  return message ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: message }) : null;
+function FieldError({ id, message }) {
+  return message ? /* @__PURE__ */ jsx("p", { id, className: "text-sm text-destructive", children: message }) : null;
 }
 function pickKey(table, key, fallback) {
   return key != null && hasOwnProp(table, key) ? key : fallback;
@@ -338,19 +911,21 @@ function Stack({
   children
 }) {
   const horizontal = props.direction === "horizontal";
-  return /* @__PURE__ */ jsx(
+  const column = !horizontal && props.align === "center";
+  const stack = /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
         "flex",
         horizontal ? "flex-row" : "flex-col",
         pick(GAP, props.gap, "md"),
-        pick(ALIGN, props.align, horizontal ? "start" : "stretch"),
+        column ? "w-fit max-w-full grow items-stretch" : pick(ALIGN, props.align, horizontal ? "start" : "stretch"),
         props.justify ? pick(JUSTIFY, props.justify, "start") : void 0
       ),
       children
     }
   );
+  return column ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center", children: stack }) : stack;
 }
 var COLUMNS = {
   1: "grid-cols-1",
@@ -384,9 +959,14 @@ function Collapsible({
   props,
   children
 }) {
+  const details = React2.useRef(null);
+  const open = React2.useCallback(() => {
+    if (details.current) details.current.open = true;
+  }, []);
   return /* @__PURE__ */ jsxs(
     "details",
     {
+      ref: details,
       className: "rounded-md border border-border",
       open: props.defaultOpen ?? false,
       "data-slot": "collapsible",
@@ -401,7 +981,7 @@ function Collapsible({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 py-3", children })
+        /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 py-3", children: /* @__PURE__ */ jsx(RevealPanel, { open, children }) })
       ]
     }
   );
@@ -524,7 +1104,7 @@ function Progress({
   ] });
 }
 function useControlId(name) {
-  return `jr-${name}-${React5.useId()}`;
+  return `jr-${name}-${React2.useId()}`;
 }
 function Input({
   props,
@@ -532,7 +1112,7 @@ function Input({
   emit
 }) {
   const id = useControlId(props.name);
-  const field = useBoundField(props.value, bindings?.value, "", props);
+  const field = useBoundField(props.value, bindings?.value, "", props, id);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsx("label", { htmlFor: id, className: LABEL, children: props.label }),
     /* @__PURE__ */ jsx(
@@ -544,7 +1124,9 @@ function Input({
         className: cn(fieldControlClass, "min-h-11 px-3 py-2"),
         placeholder: props.placeholder ?? void 0,
         value: field.value,
+        ref: field.focusRef,
         "aria-invalid": field.error ? true : void 0,
+        "aria-describedby": field.describedBy,
         onChange: (event) => {
           field.setValue(event.target.value);
           field.validateOnChange();
@@ -556,7 +1138,7 @@ function Input({
         }
       }
     ),
-    /* @__PURE__ */ jsx(FieldError, { message: field.error })
+    /* @__PURE__ */ jsx(FieldError, { id: field.errorId, message: field.error })
   ] });
 }
 function Textarea({
@@ -564,7 +1146,7 @@ function Textarea({
   bindings
 }) {
   const id = useControlId(props.name);
-  const field = useBoundField(props.value, bindings?.value, "", props);
+  const field = useBoundField(props.value, bindings?.value, "", props, id);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsx("label", { htmlFor: id, className: LABEL, children: props.label }),
     /* @__PURE__ */ jsx(
@@ -576,7 +1158,9 @@ function Textarea({
         className: cn(fieldControlClass, "px-3 py-2"),
         placeholder: props.placeholder ?? void 0,
         value: field.value,
+        ref: field.focusRef,
         "aria-invalid": field.error ? true : void 0,
+        "aria-describedby": field.describedBy,
         onChange: (event) => {
           field.setValue(event.target.value);
           field.validateOnChange();
@@ -584,7 +1168,7 @@ function Textarea({
         onBlur: field.validateOnBlur
       }
     ),
-    /* @__PURE__ */ jsx(FieldError, { message: field.error })
+    /* @__PURE__ */ jsx(FieldError, { id: field.errorId, message: field.error })
   ] });
 }
 var NATIVE_CHECK = cn("size-4 shrink-0", checkedAccentClass, focusOutlineClass);
@@ -595,30 +1179,39 @@ function Radio({
   emit
 }) {
   const id = useControlId(props.name);
-  const field = useBoundField(props.value, bindings?.value, "", props);
+  const field = useBoundField(props.value, bindings?.value, "", props, id);
   const labelOf = enumLabeler(props.options ?? [], useFieldPresentation());
-  return /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", "aria-invalid": field.error ? true : void 0, children: [
-    /* @__PURE__ */ jsx("legend", { className: LABEL, children: props.label }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-2 max-sm:space-y-0", children: (props.options ?? []).map((option, index) => /* @__PURE__ */ jsxs("label", { className: NATIVE_CHECK_ROW, children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "radio",
-          name: id,
-          value: option,
-          checked: field.value === option,
-          className: NATIVE_CHECK,
-          onChange: () => {
-            field.setValue(option);
-            field.validateOnChange();
-            emit("change");
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { children: labelOf(option) })
-    ] }, `${index}-${option}`)) }),
-    /* @__PURE__ */ jsx(FieldError, { message: field.error })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: "space-y-2",
+      "aria-invalid": field.error ? true : void 0,
+      "aria-describedby": field.describedBy,
+      children: [
+        /* @__PURE__ */ jsx("legend", { className: LABEL, children: props.label }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2 max-sm:space-y-0", children: (props.options ?? []).map((option, index, options) => /* @__PURE__ */ jsxs("label", { className: NATIVE_CHECK_ROW, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name: id,
+              value: option,
+              checked: field.value === option,
+              ref: field.value === option || index === 0 && !options.some((other) => other === field.value) ? field.focusRef : void 0,
+              className: NATIVE_CHECK,
+              onChange: () => {
+                field.setValue(option);
+                field.validateOnChange();
+                emit("change");
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: labelOf(option) })
+        ] }, `${index}-${option}`)) }),
+        /* @__PURE__ */ jsx(FieldError, { id: field.errorId, message: field.error })
+      ]
+    }
+  );
 }
 function Checkbox({
   props,
@@ -626,7 +1219,7 @@ function Checkbox({
   emit
 }) {
   const id = useControlId(props.name);
-  const field = useBoundField(props.checked, bindings?.checked, false, props);
+  const field = useBoundField(props.checked, bindings?.checked, false, props, id);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs("label", { htmlFor: id, className: NATIVE_CHECK_ROW, children: [
       /* @__PURE__ */ jsx(
@@ -637,7 +1230,9 @@ function Checkbox({
           type: "checkbox",
           className: NATIVE_CHECK,
           checked: field.value,
+          ref: field.focusRef,
           "aria-invalid": field.error ? true : void 0,
+          "aria-describedby": field.describedBy,
           onChange: (event) => {
             field.setValue(event.target.checked);
             field.validateOnChange();
@@ -647,7 +1242,7 @@ function Checkbox({
       ),
       /* @__PURE__ */ jsx("span", { children: props.label })
     ] }),
-    /* @__PURE__ */ jsx(FieldError, { message: field.error })
+    /* @__PURE__ */ jsx(FieldError, { id: field.errorId, message: field.error })
   ] });
 }
 function Switch2({
@@ -656,7 +1251,7 @@ function Switch2({
   emit
 }) {
   const id = useControlId(props.name);
-  const field = useBoundField(props.checked, bindings?.checked, false, props);
+  const field = useBoundField(props.checked, bindings?.checked, false, props, id);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 max-sm:py-2.5", children: [
       /* @__PURE__ */ jsx(
@@ -665,7 +1260,9 @@ function Switch2({
           id,
           name: props.name,
           checked: field.value,
+          ref: field.focusRef,
           "aria-invalid": field.error ? true : void 0,
+          "aria-describedby": field.describedBy,
           onCheckedChange: (next) => {
             field.setValue(next);
             field.validateOnChange();
@@ -675,7 +1272,7 @@ function Switch2({
       ),
       /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm", children: props.label })
     ] }),
-    /* @__PURE__ */ jsx(FieldError, { message: field.error })
+    /* @__PURE__ */ jsx(FieldError, { id: field.errorId, message: field.error })
   ] });
 }
 var BUTTON = {
@@ -694,7 +1291,7 @@ function Button({
       disabled: props.disabled ?? false,
       className: cn(
         "inline-flex min-h-11 w-fit items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors",
-        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        focusOutlineClass,
         "disabled:pointer-events-none disabled:opacity-50",
         pick(BUTTON, props.variant, "primary")
       ),
@@ -703,9 +1300,9 @@ function Button({
     }
   );
 }
-var DescriptorContext = React5.createContext({});
+var DescriptorContext = React2.createContext({});
 function useDescriptorScope() {
-  return React5.useContext(DescriptorContext);
+  return React2.useContext(DescriptorContext);
 }
 function DescriptorProvider({
   scope,
@@ -721,8 +1318,9 @@ function Unresolved({ path, side }) {
       className: "rounded-md border border-destructive/50 px-2.5 py-1.5 text-[12px] text-destructive",
       children: [
         side === "input" ? "No input" : "No result",
-        " at ",
-        /* @__PURE__ */ jsx("span", { className: "font-mono", children: path })
+        " at",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: typeof path === "string" ? path : JSON.stringify(path) ?? String(path) })
       ]
     }
   );
@@ -747,10 +1345,12 @@ function pathFromDomId(prefix, id) {
   const path = own.split("-").map(decodeSegment).join("/");
   return `${path}${children.map((child) => `/${child}`).join("")}`;
 }
-function useAbsolutePath(path) {
+function useAbsolutePath(path, emptyIsItem = false) {
   const repeat = useRepeatScope();
+  if (typeof path !== "string") return void 0;
   if (path.startsWith("/")) return path;
-  return repeat ? `${repeat.basePath}/${path}` : void 0;
+  if (!repeat) return void 0;
+  return path === "" && emptyIsItem ? repeat.basePath : `${repeat.basePath}/${path}`;
 }
 function withoutOptionalMark(label) {
   return label.replace(/\s*\(optional\)\s*$/i, "") || label;
@@ -758,10 +1358,10 @@ function withoutOptionalMark(label) {
 function MthdsField({
   props
 }) {
-  const scope = React5.useContext(DescriptorContext);
+  const scope = React2.useContext(DescriptorContext);
   const path = useAbsolutePath(props.path) ?? "";
   const found = scope.inputs && path ? inputFieldAtPath(scope.inputs, path) : void 0;
-  const field = React5.useMemo(
+  const field = React2.useMemo(
     () => found && (props.label || props.hint) ? {
       ...found,
       // The control marks an optional field itself, so a label that
@@ -773,7 +1373,7 @@ function MthdsField({
   );
   const value = useStateValue(path);
   const { set } = useStateStore();
-  const onChange = React5.useCallback((next) => set(path, next), [set, path]);
+  const onChange = React2.useCallback((next) => set(path, next), [set, path]);
   if (!field) return /* @__PURE__ */ jsx(Unresolved, { path: props.path, side: "input" });
   return /* @__PURE__ */ jsx(
     FieldRenderer,
@@ -787,30 +1387,32 @@ function MthdsField({
   );
 }
 function MthdsResult({ props }) {
-  const scope = React5.useContext(DescriptorContext);
+  const scope = React2.useContext(DescriptorContext);
   const path = useAbsolutePath(props.path) ?? "";
   const field = scope.result && path ? resultFieldAtPath(scope.result, path) : void 0;
   const value = useStateValue(path);
   if (!field || !scope.result) return /* @__PURE__ */ jsx(Unresolved, { path: props.path, side: "result" });
-  const place = [scope.result.name, ...segmentsUnder(RESULT_ROOT, path) ?? []];
-  return /* @__PURE__ */ jsx(ResultRoot, { baseName: scope.result.name, path: place, children: /* @__PURE__ */ jsx(ResultField, { field, value, hideLabel: props.hideLabel ?? false }) });
+  const place2 = [scope.result.name, ...segmentsUnder(RESULT_ROOT, path) ?? []];
+  return /* @__PURE__ */ jsx(ResultRoot, { baseName: scope.result.name, path: place2, children: /* @__PURE__ */ jsx(ResultField, { field, value, hideLabel: props.hideLabel ?? false }) });
 }
 function AccessibleSelect({ props, bindings, emit }) {
   const [boundValue, setBoundValue] = useBoundProp(
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React5.useState("");
+  const [localValue, setLocalValue] = React2.useState("");
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue ?? "" : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
   const validateOn = props.validateOn ?? "change";
   const hasValidation = Boolean(bindings?.value && props.checks?.length);
-  const { errors, validate } = useFieldValidation(
+  const { errors, validate, focusRef } = useCheckedField(
     bindings?.value ?? "",
     hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
   );
   const id = useControlId(props.name);
+  const errorId = `${id}-error`;
+  const error = errors[0];
   const labelOf = enumLabeler(props.options ?? [], useFieldPresentation());
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsx("label", { htmlFor: id, className: "block text-sm leading-none font-medium", children: props.label }),
@@ -824,12 +1426,22 @@ function AccessibleSelect({ props, bindings, emit }) {
           emit("change");
         },
         children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { id, className: "h-11 w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: props.placeholder ?? "Select..." }) }),
+          /* @__PURE__ */ jsx(
+            SelectTrigger,
+            {
+              id,
+              ref: focusRef,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": error ? errorId : void 0,
+              className: "h-11 w-full",
+              children: /* @__PURE__ */ jsx(SelectValue, { placeholder: props.placeholder ?? "Select..." })
+            }
+          ),
           /* @__PURE__ */ jsx(SelectContent, { children: (props.options ?? []).map((option, index) => /* @__PURE__ */ jsx(SelectItem, { value: option, children: labelOf(option) }, `${index}-${option}`)) })
         ]
       }
     ),
-    errors.length > 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: errors[0] }) : null
+    error ? /* @__PURE__ */ jsx("p", { id: errorId, className: "text-sm text-destructive", children: error }) : null
   ] });
 }
 function valueAt(row, relativePath) {
@@ -840,27 +1452,20 @@ function valueAt(row, relativePath) {
   }
   return current;
 }
-var CELL_NUMBER = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
 function formatCell(value) {
   if (value === null || value === void 0 || value === "") return "\u2014";
   if (typeof value === "boolean") return value ? "yes" : "no";
-  if (typeof value === "number") return CELL_NUMBER.format(value);
+  if (typeof value === "number") return formatNumber(value);
   if (typeof value === "string") return value;
   if (Array.isArray(value)) return value.map(formatCell).join(", ");
   return JSON.stringify(value);
 }
 function formatColumnCell(value, format) {
-  const written = format === "date" ? readDateContent(value)?.date : void 0;
-  const day = written === void 0 ? null : /^\d{4}-\d{2}-\d{2}/.exec(written);
-  if (day) {
-    const date = /* @__PURE__ */ new Date(`${day[0]}T12:00:00Z`);
-    if (!Number.isNaN(date.getTime()))
-      return date.toLocaleDateString("en-GB", {
-        day: "numeric",
-        month: "short",
-        year: "numeric",
-        timeZone: "UTC"
-      });
+  if (format === "date") return formatDay(value, "short") ?? formatCell(value);
+  if (format === "text" && typeof value === "number") return formatNumber(value, "plain");
+  if (format === "number") {
+    const amount = shareAmount(value);
+    if (Number.isFinite(amount)) return formatNumber(amount);
   }
   return formatCell(value);
 }
@@ -881,23 +1486,9 @@ function DataTable({ props }) {
     /* @__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) {
-  switch (format) {
-    case "integer":
-      return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
-    case "decimal":
-      return new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-    case "compact":
-      return new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
-    case "plain":
-      return new Intl.NumberFormat("en-US", { maximumFractionDigits: 20, useGrouping: false });
-    default:
-      return 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" : textOf(value);
+  const text = typeof value === "number" ? formatNumber(value, props.format ?? "plain") : textOf(value) || "\u2014";
   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: [
@@ -930,30 +1521,53 @@ function Split({
 }
 function Tabs({ props, children }) {
   const tabs = props.tabs ?? [];
-  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(
+  const panels = React2.Children.toArray(children);
+  const [chosen, setChosen] = React2.useState(null);
+  const open = chosen ? openIndex(tabs, chosen) : 0;
+  const value = String(open);
+  const choose = (next) => {
+    const index = Number(next);
+    const tab = tabs[index];
+    if (!tab) return;
+    const occurrence = tabs.slice(0, index).filter((t) => t.value === tab.value).length;
+    setChosen({ value: tab.value, occurrence });
+  };
+  return /* @__PURE__ */ jsxs(TabsPrimitive.Root, { value, onValueChange: choose, 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, index) => /* @__PURE__ */ jsx(
       TabsPrimitive.Trigger,
       {
-        value: tab.value,
+        value: String(index),
         className: "inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm max-sm:min-h-11 max-sm:min-w-11",
         children: tab.label
       },
-      tab.value
+      index
     )) }),
-    tabs.map((tab, index) => /* @__PURE__ */ jsx(
+    tabs.map((_tab, index) => /* @__PURE__ */ jsx(
       TabsPrimitive.Content,
       {
-        value: tab.value,
+        value: String(index),
+        forceMount: true,
+        hidden: index !== open,
         className: "mt-4 focus-visible:outline-hidden",
-        children: panels[index] ?? null
+        children: /* @__PURE__ */ jsx(RevealPanel, { open: () => choose(String(index)), children: panels[index] ?? null })
       },
-      tab.value
+      index
     ))
   ] });
 }
-var BUTTON_BASE = "inline-flex min-h-11 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50";
+function openIndex(tabs, { value, occurrence }) {
+  let seen = 0;
+  for (const [index, tab] of tabs.entries()) {
+    if (tab.value !== value) continue;
+    if (seen === occurrence) return index;
+    seen += 1;
+  }
+  return 0;
+}
+var BUTTON_BASE = cn(
+  "inline-flex min-h-11 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50",
+  focusOutlineClass
+);
 var PRIMARY_BUTTON = cn(BUTTON_BASE, "bg-primary text-primary-foreground hover:bg-primary/90");
 var SECONDARY_BUTTON = cn(
   BUTTON_BASE,
@@ -961,9 +1575,10 @@ var SECONDARY_BUTTON = cn(
 );
 function Steps({ props, children }) {
   const steps = props.steps ?? [];
-  const panels = React5.Children.toArray(children);
-  const [index, setIndex] = React5.useState(0);
+  const panels = React2.Children.toArray(children);
+  const [chosen, setIndex] = React2.useState(0);
   const last = steps.length - 1;
+  const index = Math.max(0, Math.min(chosen, last));
   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(
       "li",
@@ -989,14 +1604,14 @@ function Steps({ props, children }) {
       },
       `${position}-${label}`
     )) }),
-    /* @__PURE__ */ jsx("div", { children: panels[index] ?? null }),
+    steps.map((_step, position) => /* @__PURE__ */ jsx("div", { hidden: position !== index, children: /* @__PURE__ */ jsx(RevealPanel, { open: () => setIndex(position), children: panels[position] ?? null }) }, position)),
     index > 0 || index < last ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
       index > 0 ? /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           "data-testid": "steps-back",
-          onClick: () => setIndex((current) => Math.max(0, current - 1)),
+          onClick: () => setIndex(Math.max(0, index - 1)),
           className: SECONDARY_BUTTON,
           children: props.backLabel ?? "Back"
         }
@@ -1006,7 +1621,7 @@ function Steps({ props, children }) {
         {
           type: "button",
           "data-testid": "steps-next",
-          onClick: () => setIndex((current) => Math.min(last, current + 1)),
+          onClick: () => setIndex(Math.min(last, index + 1)),
           className: PRIMARY_BUTTON,
           children: props.nextLabel ?? "Next"
         }
@@ -1091,7 +1706,7 @@ function Segmented({ props, bindings, emit }) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React5.useState("");
+  const [localValue, setLocalValue] = React2.useState("");
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue ?? "" : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
@@ -1111,7 +1726,7 @@ function Segmented({ props, bindings, emit }) {
           emit("change");
         },
         className: "flex-wrap justify-start gap-1.5",
-        children: (props.options ?? []).map((option) => /* @__PURE__ */ jsx(
+        children: (props.options ?? []).map((option, index) => /* @__PURE__ */ jsx(
           ToggleGroupItem,
           {
             value: option,
@@ -1120,7 +1735,7 @@ function Segmented({ props, bindings, emit }) {
             className: "rounded-full px-3.5 data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground max-sm:h-11 max-sm:min-w-11",
             children: labelOf(option)
           },
-          option
+          `${index}-${option}`
         ))
       }
     )
@@ -1131,7 +1746,7 @@ function NumberInput({ props, bindings, emit }) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React5.useState(void 0);
+  const [localValue, setLocalValue] = React2.useState(void 0);
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
@@ -1206,23 +1821,62 @@ var components = {
 };
 var generativeRenderers = withDeclaredProps(
   baseCatalog.data.components,
-  components
+  components,
+  // A hatch resolves its `path` as written, relative inside a repeat, so a
+  // refused one reaches it as refused rather than written out as text.
+  { MthdsField: ["path"], MthdsResult: ["path"] }
 );
 var RADIUS = "rounded-[calc(var(--radius,0.5rem)*1.5)]";
-function useAbsolute(path) {
-  const repeat = useRepeatScope();
-  if (path.startsWith("/")) return path;
-  if (!repeat) return path;
-  return path === "" ? repeat.basePath : `${repeat.basePath}/${path}`;
+var NAMED_WAITING = 3;
+function useRunWaitsFor() {
+  const { inputs } = useDescriptorScope();
+  const values = useStateValue(INPUTS_ROOT);
+  const placed = usePlacedInputs();
+  const presentation = useFieldPresentation();
+  const strings = useFieldStrings();
+  const waiting = waitingFields(inputs ?? [], isRecord2(values) ? values : void 0).map(({ field, path }) => {
+    const at = joinPath(INPUTS_ROOT, ...path);
+    return { field, path, on: placed.get(at), rank: rankOf(placed, at) };
+  }).sort((a, b) => a.rank - b.rank);
+  if (waiting.length === 0) return void 0;
+  const labelAt = (path) => {
+    const field = inputFieldAtPath(inputs ?? [], joinPath(INPUTS_ROOT, ...path));
+    if (!field) return void 0;
+    return placed.get(joinPath(INPUTS_ROOT, ...path))?.label ?? fieldLabel(field.title, field.name, presentation);
+  };
+  const named = waiting.slice(0, NAMED_WAITING);
+  const labels = named.map(
+    ({ field, on }) => on?.label ?? fieldLabel(field.title, field.name, presentation)
+  );
+  const names = labels.map((label, index) => {
+    const parent = named[index].path.slice(0, -1);
+    const shared = labels.filter((other) => other === label).length > 1;
+    const around = shared && parent.length > 0 ? labelAt(parent) : void 0;
+    return around ? `${label} (${around})` : label;
+  });
+  return strings.runWaitsFor(names, waiting.length - names.length);
+}
+function rankOf(placed, path) {
+  const own = placed.get(path);
+  if (own) return own.order;
+  for (let at = path.lastIndexOf("/"); at > INPUTS_ROOT.length; at = path.lastIndexOf("/", at - 1)) {
+    const around = placed.get(path.slice(0, at));
+    if (around) return around.order;
+  }
+  let first = Number.MAX_SAFE_INTEGER;
+  for (const [inside, { order }] of placed) {
+    if (inside.startsWith(`${path}/`)) first = Math.min(first, order);
+  }
+  return first;
 }
-function asDate(value) {
-  if (typeof value !== "string" || !/^\d{4}-\d{2}-\d{2}/.test(value)) return void 0;
-  const date = /* @__PURE__ */ new Date(`${value.slice(0, 10)}T12:00:00Z`);
-  return Number.isNaN(date.getTime()) ? void 0 : date;
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function Composer({ props, children, emit }) {
   const host = useFrameHost();
   const busy = useDescriptorScope().env?.disabled ?? false;
+  const waitsFor = useRunWaitsFor();
+  const waitsForId = React2.useId();
   const two = props.columns === "2";
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1259,16 +1913,20 @@ function Composer({ props, children, emit }) {
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 z-[2] -mx-7 -mb-7 mt-7 flex items-center justify-between gap-4 rounded-b-[calc(var(--radius,0.5rem)*1.5)] border-t border-border [background-color:var(--panel-fill,var(--card,hsl(0_0%_100%)))] px-7 pt-[18px] pb-7 max-sm:-mx-5 max-sm:-mb-5 max-sm:flex-col-reverse max-sm:items-stretch max-sm:px-5 max-sm:pb-5", children: [
-                host.eta ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 text-sm text-muted-foreground max-sm:justify-center", children: [
-                  /* @__PURE__ */ jsx(Clock, { className: "size-4", "aria-hidden": "true" }),
-                  " ",
-                  host.eta
-                ] }) : /* @__PURE__ */ jsx("span", {}),
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1 text-sm text-muted-foreground max-sm:items-center max-sm:text-center", children: [
+                  waitsFor ? /* @__PURE__ */ jsx("p", { id: waitsForId, children: waitsFor }) : null,
+                  host.eta ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(Clock, { className: "size-4", "aria-hidden": "true" }),
+                    " ",
+                    host.eta
+                  ] }) : null
+                ] }),
                 /* @__PURE__ */ jsxs(
                   "button",
                   {
                     type: "button",
                     disabled: busy,
+                    "aria-describedby": waitsFor ? waitsForId : void 0,
                     onClick: () => emit("press"),
                     className: cn(
                       "inline-flex min-h-11 items-center justify-center gap-2 rounded-[var(--radius,0.5rem)] bg-primary px-[22px] text-[15px] font-semibold text-primary-foreground transition-all hover:bg-primary/90",
@@ -1340,32 +1998,24 @@ function segmentMix(index, count) {
 function segmentColor(index, count) {
   return `color-mix(in oklab, var(--link, var(--primary, hsl(240 5.9% 10%))) ${segmentMix(index, count)}%, var(--muted, hsl(240 4.8% 95.9%)))`;
 }
-function amount(value, unit) {
-  if (unit && /^[A-Z]{3}$/.test(unit)) {
-    try {
-      return new Intl.NumberFormat("en-GB", {
-        style: "currency",
-        currency: unit,
-        maximumFractionDigits: 0
-      }).format(value);
-    } catch {
-    }
-  }
-  const n = new Intl.NumberFormat("en-GB", { maximumFractionDigits: 2 }).format(value);
-  return unit ? `${n} ${unit}` : n;
+function statedAmount(raw) {
+  if (raw === null || raw === void 0) return null;
+  const amount = shareAmount(raw);
+  return Number.isFinite(amount) ? amount : void 0;
 }
 function ProportionBar({ props }) {
   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: textOf(row[props.labelKey]),
-    value: amountOf(row[props.valueKey])
+    value: shareAmount(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;
-  const scale = Math.max(sum, total, typeof props.of === "number" ? props.of : 0) || 1;
+  const stated = statedAmount(props.total);
+  const total = stated === null ? sum : stated;
+  const ceiling = statedAmount(props.of) ?? void 0;
+  const scale = Math.max(sum, total ?? 0, ceiling ?? 0) || 1;
   const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1380,10 +2030,10 @@ function ProportionBar({ props }) {
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2.5", children: [
           /* @__PURE__ */ jsx("span", { className: "text-[15px] text-muted-foreground", children: props.label }),
-          /* @__PURE__ */ jsx("strong", { className: "text-2xl font-semibold tabular-nums text-foreground", children: amount(total, props.unit) }),
-          typeof props.of === "number" ? /* @__PURE__ */ jsxs("span", { className: "text-[15px] text-muted-foreground", children: [
+          total !== void 0 ? /* @__PURE__ */ jsx("strong", { className: "text-2xl font-semibold tabular-nums text-foreground", children: formatAmount(total, props.unit) }) : null,
+          ceiling !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "text-[15px] text-muted-foreground", children: [
             "of ",
-            amount(props.of, props.unit)
+            formatAmount(ceiling, props.unit)
           ] }) : null
         ] }),
         /* @__PURE__ */ jsx("div", { className: "flex h-2 gap-0.5 overflow-hidden rounded-full bg-muted", "aria-hidden": "true", children: parts.map((p, i) => /* @__PURE__ */ jsx(
@@ -1413,7 +2063,7 @@ function ProportionBar({ props }) {
               ),
               cap(p.label),
               " ",
-              amount(p.value, props.unit)
+              formatAmount(p.value, props.unit)
             ]
           },
           `${i}-${p.label}`
@@ -1446,11 +2096,10 @@ var ASPECT = {
 function Picture({
   props
 }) {
-  const written = typeof props.path === "string" ? props.path : void 0;
-  const path = useAbsolute(written ?? "");
-  const value = useStateValue(path);
+  const path = useAbsolutePath(props.path, true);
+  const value = useStateValue(path ?? "");
   const resolve = useResolveUrl();
-  const content = written === void 0 ? void 0 : readImageContent(value);
+  const content = path === 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;
@@ -1467,39 +2116,33 @@ function Picture({
     }
   );
 }
-function present(value) {
-  return value !== void 0 && value !== null && value !== "";
-}
 function Fact({
   props
 }) {
+  const text = textOf(props.value);
   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) ? textOf(props.value) : "\u2014" }),
+    /* @__PURE__ */ jsx("span", { className: "text-[16px] font-medium text-foreground tabular-nums", children: text !== "" ? text : "\u2014" }),
     props.detail ? /* @__PURE__ */ jsx("span", { className: "text-[13px] text-muted-foreground", children: props.detail }) : null
   ] });
 }
 function Detail({ props }) {
-  if (!present(props.value)) return null;
+  const text = textOf(props.value);
+  if (text === "") return null;
   return (
     // A rule between the rows of a list of details, never under one set in a
     // row: there it read as an underline on every detail but the last.
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(0,8.5rem)_minmax(0,1fr)] gap-3 border-b border-border py-2.5 text-[14px] last:border-b-0 [.flex-row>&]:border-b-0 [.flex-row>&]:grid-cols-[auto_minmax(0,1fr)]", children: [
       /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: props.label }),
-      /* @__PURE__ */ jsx("span", { className: "text-foreground", children: textOf(props.value) })
+      /* @__PURE__ */ jsx("span", { className: "text-foreground", children: text })
     ] })
   );
 }
-var DATE_STYLES = {
-  long: { weekday: "long", day: "numeric", month: "long", year: "numeric", timeZone: "UTC" },
-  short: { day: "numeric", month: "short", year: "numeric", timeZone: "UTC" },
-  weekday: { weekday: "short", day: "numeric", month: "long", timeZone: "UTC" }
-};
 function DateText({ props }) {
-  const date = asDate(props.value);
-  if (!date) return null;
+  const day = formatDay(props.value, props.style ?? "long");
+  if (day === void 0) return null;
   const tone = props.tone === "accent" ? cn("text-[13px] font-semibold", linkTextClass) : props.tone === "muted" ? "text-sm text-muted-foreground" : "text-[15px] text-foreground";
-  return /* @__PURE__ */ jsx("span", { className: cn("block", tone), children: date.toLocaleDateString("en-GB", DATE_STYLES[props.style ?? "long"]) });
+  return /* @__PURE__ */ jsx("span", { className: cn("block", tone), children: day });
 }
 function TextList({ props }) {
   const items = Array.isArray(props.items) ? props.items.filter((x) => typeof x === "string" && x.trim()) : [];
@@ -1538,10 +2181,13 @@ var frameRenderers = withDeclaredProps(
     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"] }
+  // empty text, is the item itself inside a repeat. A share's total and its
+  // ceiling are read as written too: a decimal a payload carries as text is
+  // a number the bar can draw, where its nearest value, nothing, would put
+  // the parts' sum in its place.
+  { Picture: ["path"], ProportionBar: ["total", "of"] }
 );
-var ResultSlotContext = React5.createContext(null);
+var ResultSlotContext = React2.createContext(null);
 function ResultSlotProvider({
   slot,
   children
@@ -1549,7 +2195,7 @@ function ResultSlotProvider({
   return /* @__PURE__ */ jsx(ResultSlotContext.Provider, { value: slot, children });
 }
 function useResultSlot() {
-  return React5.useContext(ResultSlotContext);
+  return React2.useContext(ResultSlotContext);
 }
 var LABEL2 = "block text-[13.5px] leading-none font-medium text-foreground";
 function AppBar({ props }) {
@@ -1578,7 +2224,7 @@ function Hero({ props }) {
   ] });
 }
 function Workspace({ props, children }) {
-  const [work, rail] = React5.Children.toArray(children);
+  const [work, rail] = React2.Children.toArray(children);
   const railLeft = props.rail === "left";
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1650,11 +2296,8 @@ function Rail({ props, children }) {
     )
   );
 }
-function present2(value) {
-  return value !== void 0 && value !== null && value !== "";
-}
 function SummaryRow({ props }) {
-  const text = [props.value, props.detail].filter(present2).map(textOf).join(props.separator ?? " ");
+  const text = [props.value, props.detail].map(textOf).filter((half) => half !== "").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" })
@@ -1707,13 +2350,13 @@ function useTextField(props, bindings) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React5.useState("");
+  const [localValue, setLocalValue] = React2.useState("");
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue ?? "" : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
   const validateOn = props.validateOn ?? "blur";
   const hasValidation = Boolean(bindings?.value && props.checks?.length);
-  const { errors, validate } = useFieldValidation(
+  const { errors, validate, focusRef } = useCheckedField(
     bindings?.value ?? "",
     hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
   );
@@ -1724,7 +2367,7 @@ function useTextField(props, bindings) {
   const onBlur = () => {
     if (hasValidation && validateOn === "blur") validate();
   };
-  return { value, errors, onChange, onBlur };
+  return { value, errors, onChange, onBlur, focusRef };
 }
 function BrandInput({
   props,
@@ -1743,7 +2386,9 @@ function BrandInput({
         type: props.type ?? "text",
         value: field.value,
         placeholder: props.placeholder ?? "",
+        ref: field.focusRef,
         "aria-invalid": field.errors.length > 0 || void 0,
+        "aria-describedby": field.errors[0] ? `${id}-error` : void 0,
         onChange: (event) => field.onChange(event.target.value),
         onBlur: () => {
           field.onBlur();
@@ -1756,7 +2401,7 @@ function BrandInput({
         className: cn(fieldControlClass, "h-11 px-3.5")
       }
     ),
-    field.errors[0] ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-[11px] text-destructive", children: field.errors[0] }) : null
+    field.errors[0] ? /* @__PURE__ */ jsx("p", { id: `${id}-error`, role: "alert", className: "text-[11px] text-destructive", children: field.errors[0] }) : null
   ] });
 }
 function BrandTextarea({
@@ -1775,13 +2420,15 @@ function BrandTextarea({
         rows: props.rows ?? 3,
         value: field.value,
         placeholder: props.placeholder ?? "",
+        ref: field.focusRef,
         "aria-invalid": field.errors.length > 0 || void 0,
+        "aria-describedby": field.errors[0] ? `${id}-error` : void 0,
         onChange: (event) => field.onChange(event.target.value),
         onBlur: field.onBlur,
         className: cn(fieldControlClass, "px-3.5 py-2.5 leading-relaxed")
       }
     ),
-    field.errors[0] ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-[11px] text-destructive", children: field.errors[0] }) : null
+    field.errors[0] ? /* @__PURE__ */ jsx("p", { id: `${id}-error`, role: "alert", className: "text-[11px] text-destructive", children: field.errors[0] }) : null
   ] });
 }
 var { registry: generativeRegistry } = defineRegistry(catalog, {
@@ -1815,28 +2462,29 @@ function GenerativePage({
   onElementError
 }) {
   const { inputs, result, env, idPrefix } = scope;
-  const stableScope = React5.useMemo(
+  const stableScope = React2.useMemo(
     () => ({ inputs, result, env, idPrefix }),
     [inputs, result, env, idPrefix]
   );
-  const latest = React5.useRef({ onRun, store });
-  React5.useEffect(() => {
+  const latest = React2.useRef({ onRun, store });
+  React2.useEffect(() => {
     latest.current = { onRun, store };
   });
-  const report = React5.useRef(onElementError);
-  React5.useInsertionEffect(() => {
+  const report = React2.useRef(onElementError);
+  React2.useInsertionEffect(() => {
     report.current = onElementError;
   });
-  const [made] = React5.useState(() => /* @__PURE__ */ new Map());
-  const pageRegistry = React5.useMemo(
+  const [made] = React2.useState(() => /* @__PURE__ */ new Map());
+  const pageRegistry = React2.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 validation = React2.useRef(null);
+  const [checkedFields] = React2.useState(() => new CheckedFields());
+  const running = React2.useRef(false);
+  const [handlers] = React2.useState(() => {
     const release = () => {
       setTimeout(() => {
         running.current = false;
@@ -1845,6 +2493,8 @@ function GenerativePage({
     return {
       run: () => {
         if (running.current) return void 0;
+        const checks = validation.current;
+        if (checks && !checkedFields.check(checks)) return void 0;
         running.current = true;
         let pending;
         try {
@@ -1863,33 +2513,50 @@ function GenerativePage({
       }
     };
   });
-  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,
+  const page = /* @__PURE__ */ jsx(DescriptorProvider, { scope: stableScope, children: /* @__PURE__ */ jsx(PlacedInputsProvider, { spec, children: /* @__PURE__ */ jsx(
+    JSONUIProvider,
     {
-      type: rootType,
-      report,
-      reporting,
-      resetOn: specContent,
-      children: /* @__PURE__ */ jsx(Renderer, { spec, registry: pageRegistry, loading })
+      registry: pageRegistry,
+      store,
+      handlers,
+      validationFunctions: CHECKED_FIELD_FUNCTIONS,
+      children: /* @__PURE__ */ jsx(ReportingContext.Provider, { value: reporting, children: /* @__PURE__ */ jsxs(CheckedFieldsContext.Provider, { value: checkedFields, children: [
+        /* @__PURE__ */ jsx(ValidationBridge, { into: validation, fields: checkedFields }),
+        /* @__PURE__ */ jsx(
+          RootBoundary,
+          {
+            type: rootType,
+            report,
+            reporting,
+            loading: loading === true,
+            spec,
+            children: /* @__PURE__ */ jsx(Renderer, { spec, registry: pageRegistry, loading })
+          }
+        )
+      ] }) })
     }
-  ) }) }) });
+  ) }) });
   return brand ? /* @__PURE__ */ jsx(BrandProvider, { manifest: brand, children: page }) : page;
 }
-function contentOf(spec) {
-  try {
-    return JSON.stringify(spec);
-  } catch {
-    return spec;
-  }
+function ValidationBridge({
+  into,
+  fields
+}) {
+  const validation = useOptionalValidation();
+  React2.useInsertionEffect(() => {
+    into.current = validation;
+    fields.attach(validation);
+  });
+  return null;
 }
 function useStoreSnapshot(store) {
-  return React5.useSyncExternalStore(
+  return React2.useSyncExternalStore(
     store.subscribe,
     store.getSnapshot,
     store.getServerSnapshot ?? store.getSnapshot
   );
 }
 
-export { BrandBar, BrandProvider, DescriptorProvider, FrameHostProvider, GenerativePage, ResultSlotProvider, domIdFor, generativeRegistry, generativeRenderers, pathFromDomId, useBrand, useDescriptorScope, useFrameHost, useResultSlot, useStoreSnapshot };
+export { BrandBar, BrandProvider, DescriptorProvider, FrameHostProvider, GenerativePage, ResultSlotProvider, RevealPanel, domIdFor, generativeRegistry, generativeRenderers, pathFromDomId, useBrand, useCheckedField, useDescriptorScope, useFrameHost, useResultSlot, useStoreSnapshot };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map