@pipelex/mthds-form 0.32.0 → 0.33.0

package/dist/generative/index.js

@@ -1,7 +1,7 @@
 "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, ResultRoot, ResultField, FieldRenderer, enumLabeler, useFieldPresentation, ToggleGroup, ToggleGroupItem, selectedFillStrongClass, Switch, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, selectedBorderClass, selectedFillClass, isThenable } from '../chunk-UKTYADY3.js';
+import { baseCatalog, catalog, frameComponents, shareAmount, resultFieldAtPath, segmentsUnder, RESULT_ROOT, inputFieldAtPath, definitionChain, unwrapped } from '../chunk-4SRSGZWM.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-4SRSGZWM.js';
 import '../chunk-4VAO6BDE.js';
 export { seedInputs } from '../chunk-VH5CDQDR.js';
 import '../chunk-L23R3JNQ.js';
@@ -20,14 +20,15 @@ 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 * as React6 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 { resolveRepeatStatePath, getByPath, evaluateVisibility, resolveElementProps } 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 = React6.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 = React6.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(() => {
+  React6.useEffect(() => {
     if (!provider || !family) return;
     const key = `${provider}:${family}`;
     if (document.head.querySelector(`link[data-brand-webfont="${CSS.escape(key)}"]`)) return;
@@ -67,40 +68,238 @@ function useWebfont(webfont) {
     document.head.appendChild(link);
   }, [provider, family]);
 }
-var ReportingContext = React5.createContext(false);
-var ElementBoundary = class extends React5.Component {
+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();
+    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;
+    if (first) for (const path of this.byPath.keys()) this.publish(path);
+  }
+  /** Enters one mounted field's checks; what it returns leaves them again. */
+  enter(path, config) {
+    const configs = this.byPath.get(path) ?? /* @__PURE__ */ new Set();
+    this.byPath.set(path, configs);
+    const entry = { config };
+    configs.add(entry);
+    this.publish(path);
+    return () => {
+      configs.delete(entry);
+      if (configs.size === 0) this.byPath.delete(path);
+      this.publish(path);
+    };
+  }
+  /** The checks of every field mounted at `path`, combined, or none when no field is. */
+  configFor(path) {
+    const configs = this.byPath.get(path);
+    if (!configs || configs.size === 0) return void 0;
+    const [first] = configs;
+    return {
+      checks: [...configs].flatMap(({ config }) => config.checks ?? []),
+      ...first?.config.validateOn ? { validateOn: first.config.validateOn } : {}
+    };
+  }
+  /**
+   * Runs the checks of every path a mounted field carries, as the record
+   * holds them now, and answers whether they all pass; every path is checked,
+   * so each failing field shows its message. 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 when a field has just mounted.
+   */
+  check(validation) {
+    let pass = true;
+    for (const path of this.byPath.keys()) {
+      const combined = this.configFor(path);
+      if (combined && !validation.validate(path, combined).valid) pass = false;
+    }
+    return pass;
+  }
+  publish(path) {
+    this.validation?.registerField(path, this.configFor(path) ?? { checks: [] });
+  }
+};
+var CheckedFieldsContext = React6.createContext(null);
+function useCheckedField(path, config) {
+  const fields = React6.useContext(CheckedFieldsContext);
+  const field = useFieldValidation(path, fields ? void 0 : config);
+  const validation = useOptionalValidation();
+  const signature = config ? JSON.stringify(config) : "";
+  const latest = React6.useRef(config);
+  React6.useInsertionEffect(() => {
+    latest.current = config;
+  });
+  React6.useEffect(() => {
+    const entered = latest.current;
+    if (!fields || !path || !entered) return void 0;
+    return fields.enter(path, entered);
+  }, [fields, path, signature]);
+  const fallback = field.validate;
+  const validate = React6.useCallback(() => {
+    const combined = fields?.configFor(path);
+    return validation && combined ? validation.validate(path, combined) : fallback();
+  }, [fields, path, validation, fallback]);
+  return { ...field, validate };
+}
+var ReportingContext = React6.createContext(false);
+function said(error) {
+  try {
+    return String(error);
+  } catch {
+    return "an error that cannot be written out";
+  }
+}
+function contentOf(value) {
+  const open = /* @__PURE__ */ new WeakSet();
+  try {
+    return JSON.stringify(value, function(_key, entry) {
+      if (typeof entry === "bigint") return `${entry}n`;
+      if (typeof entry === "object" && entry !== null) {
+        if (open.has(entry)) return "[cycle]";
+        open.add(entry);
+      }
+      return entry;
+    }) ?? "undefined";
+  } catch {
+    return "an input that cannot be written out";
+  }
+}
+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 React6.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
+      );
+    }
   }
-  // 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.
+  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 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 (!React6.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 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;
+  if (statePath !== void 0) {
+    try {
+      const path = resolveRepeatStatePath(statePath, scope?.basePath);
+      list = path === void 0 ? void 0 : getByPath(state, path);
+    } catch (error) {
+      list = `throws: ${said(error)}`;
+    }
+  }
+  const under = (nodes) => React6.Children.toArray(nodes).map((node) => {
+    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,7 +309,23 @@ 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 = React6.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;
@@ -169,39 +384,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);
-  }
-  if (schema.safeParse(value).success) return value;
-  const def = unwrapped(schema);
-  if (def?.type === "string" && (typeof value === "number" || typeof value === "boolean")) {
-    return String(value);
+  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 (def?.type === "array" && def.element && Array.isArray(value)) {
-    const element = def.element;
-    return value.filter((entry) => element.safeParse(entry).success);
+  let byValue = conformedBySchema.get(schema);
+  if (!byValue) {
+    byValue = /* @__PURE__ */ new WeakMap();
+    conformedBySchema.set(schema, byValue);
   }
-  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 +477,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 = React6.createContext({});
 function FrameHostProvider({
   host,
   children
@@ -248,15 +491,15 @@ function FrameHostProvider({
   return /* @__PURE__ */ jsx(FrameHostContext.Provider, { value: host, children });
 }
 function useFrameHost() {
-  return React5.useContext(FrameHostContext);
+  return React6.useContext(FrameHostContext);
 }
 function useBoundField(literal, binding, empty, { checks, validateOn }) {
   const [boundValue, setBoundValue] = useBoundProp(literal ?? void 0, binding);
-  const [localValue, setLocalValue] = React5.useState(literal ?? empty);
+  const [localValue, setLocalValue] = React6.useState(literal ?? empty);
   const isBound = Boolean(binding);
   const hasValidation = Boolean(binding && checks?.length);
   const when = validateOn ?? "change";
-  const { errors, validate } = useFieldValidation(
+  const { errors, validate } = useCheckedField(
     binding ?? "",
     hasValidation ? { checks: checks ?? [], validateOn: when } : void 0
   );
@@ -524,7 +767,7 @@ function Progress({
   ] });
 }
 function useControlId(name) {
-  return `jr-${name}-${React5.useId()}`;
+  return `jr-${name}-${React6.useId()}`;
 }
 function Input({
   props,
@@ -703,9 +946,9 @@ function Button({
     }
   );
 }
-var DescriptorContext = React5.createContext({});
+var DescriptorContext = React6.createContext({});
 function useDescriptorScope() {
-  return React5.useContext(DescriptorContext);
+  return React6.useContext(DescriptorContext);
 }
 function DescriptorProvider({
   scope,
@@ -721,8 +964,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) })
       ]
     }
   );
@@ -749,6 +993,7 @@ function pathFromDomId(prefix, id) {
 }
 function useAbsolutePath(path) {
   const repeat = useRepeatScope();
+  if (typeof path !== "string") return void 0;
   if (path.startsWith("/")) return path;
   return repeat ? `${repeat.basePath}/${path}` : void 0;
 }
@@ -758,10 +1003,10 @@ function withoutOptionalMark(label) {
 function MthdsField({
   props
 }) {
-  const scope = React5.useContext(DescriptorContext);
+  const scope = React6.useContext(DescriptorContext);
   const path = useAbsolutePath(props.path) ?? "";
   const found = scope.inputs && path ? inputFieldAtPath(scope.inputs, path) : void 0;
-  const field = React5.useMemo(
+  const field = React6.useMemo(
     () => found && (props.label || props.hint) ? {
       ...found,
       // The control marks an optional field itself, so a label that
@@ -773,7 +1018,7 @@ function MthdsField({
   );
   const value = useStateValue(path);
   const { set } = useStateStore();
-  const onChange = React5.useCallback((next) => set(path, next), [set, path]);
+  const onChange = React6.useCallback((next) => set(path, next), [set, path]);
   if (!field) return /* @__PURE__ */ jsx(Unresolved, { path: props.path, side: "input" });
   return /* @__PURE__ */ jsx(
     FieldRenderer,
@@ -787,7 +1032,7 @@ function MthdsField({
   );
 }
 function MthdsResult({ props }) {
-  const scope = React5.useContext(DescriptorContext);
+  const scope = React6.useContext(DescriptorContext);
   const path = useAbsolutePath(props.path) ?? "";
   const field = scope.result && path ? resultFieldAtPath(scope.result, path) : void 0;
   const value = useStateValue(path);
@@ -800,13 +1045,13 @@ function AccessibleSelect({ props, bindings, emit }) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React5.useState("");
+  const [localValue, setLocalValue] = React6.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 } = useCheckedField(
     bindings?.value ?? "",
     hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
   );
@@ -897,7 +1142,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" : textOf(value);
+  const text = typeof value === "number" ? numberFormat(props.format ?? "plain").format(value) : 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,29 +1175,49 @@ 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 = React6.Children.toArray(children);
+  const [chosen, setChosen] = React6.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
       },
-      tab.value
+      index
     ))
   ] });
 }
+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 = "inline-flex min-h-11 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50";
 var PRIMARY_BUTTON = cn(BUTTON_BASE, "bg-primary text-primary-foreground hover:bg-primary/90");
 var SECONDARY_BUTTON = cn(
@@ -961,9 +1226,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 = React6.Children.toArray(children);
+  const [chosen, setIndex] = React6.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,7 +1255,7 @@ function Steps({ props, children }) {
       },
       `${position}-${label}`
     )) }),
-    /* @__PURE__ */ jsx("div", { children: panels[index] ?? null }),
+    steps.map((_step, position) => /* @__PURE__ */ jsx("div", { hidden: position !== index, 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",
@@ -1091,7 +1357,7 @@ function Segmented({ props, bindings, emit }) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React5.useState("");
+  const [localValue, setLocalValue] = React6.useState("");
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue ?? "" : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
@@ -1111,7 +1377,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 +1386,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 +1397,7 @@ function NumberInput({ props, bindings, emit }) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React5.useState(void 0);
+  const [localValue, setLocalValue] = React6.useState(void 0);
   const isBound = Boolean(bindings?.value);
   const value = isBound ? boundValue : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
@@ -1206,7 +1472,10 @@ 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) {
@@ -1358,10 +1627,9 @@ 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;
@@ -1467,26 +1735,25 @@ 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 })
     ] })
   );
 }
@@ -1541,7 +1808,7 @@ var frameRenderers = withDeclaredProps(
   // empty text, is the item itself inside a repeat.
   { Picture: ["path"] }
 );
-var ResultSlotContext = React5.createContext(null);
+var ResultSlotContext = React6.createContext(null);
 function ResultSlotProvider({
   slot,
   children
@@ -1549,7 +1816,7 @@ function ResultSlotProvider({
   return /* @__PURE__ */ jsx(ResultSlotContext.Provider, { value: slot, children });
 }
 function useResultSlot() {
-  return React5.useContext(ResultSlotContext);
+  return React6.useContext(ResultSlotContext);
 }
 var LABEL2 = "block text-[13.5px] leading-none font-medium text-foreground";
 function AppBar({ props }) {
@@ -1578,7 +1845,7 @@ function Hero({ props }) {
   ] });
 }
 function Workspace({ props, children }) {
-  const [work, rail] = React5.Children.toArray(children);
+  const [work, rail] = React6.Children.toArray(children);
   const railLeft = props.rail === "left";
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1650,11 +1917,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 +1971,13 @@ function useTextField(props, bindings) {
     props.value ?? void 0,
     bindings?.value
   );
-  const [localValue, setLocalValue] = React5.useState("");
+  const [localValue, setLocalValue] = React6.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 } = useCheckedField(
     bindings?.value ?? "",
     hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
   );
@@ -1815,28 +2079,29 @@ function GenerativePage({
   onElementError
 }) {
   const { inputs, result, env, idPrefix } = scope;
-  const stableScope = React5.useMemo(
+  const stableScope = React6.useMemo(
     () => ({ inputs, result, env, idPrefix }),
     [inputs, result, env, idPrefix]
   );
-  const latest = React5.useRef({ onRun, store });
-  React5.useEffect(() => {
+  const latest = React6.useRef({ onRun, store });
+  React6.useEffect(() => {
     latest.current = { onRun, store };
   });
-  const report = React5.useRef(onElementError);
-  React5.useInsertionEffect(() => {
+  const report = React6.useRef(onElementError);
+  React6.useInsertionEffect(() => {
     report.current = onElementError;
   });
-  const [made] = React5.useState(() => /* @__PURE__ */ new Map());
-  const pageRegistry = React5.useMemo(
+  const [made] = React6.useState(() => /* @__PURE__ */ new Map());
+  const pageRegistry = React6.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 = React6.useRef(null);
+  const [checkedFields] = React6.useState(() => new CheckedFields());
+  const running = React6.useRef(false);
+  const [handlers] = React6.useState(() => {
     const release = () => {
       setTimeout(() => {
         running.current = false;
@@ -1845,6 +2110,12 @@ function GenerativePage({
     return {
       run: () => {
         if (running.current) return void 0;
+        const checks = validation.current;
+        if (checks) {
+          const registered = checks.validateAll();
+          const mounted = checkedFields.check(checks);
+          if (!registered || !mounted) return void 0;
+        }
         running.current = true;
         let pending;
         try {
@@ -1863,33 +2134,41 @@ 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,
-    {
-      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: pageRegistry, store, handlers, 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();
+  React6.useInsertionEffect(() => {
+    into.current = validation;
+    fields.attach(validation);
+  });
+  return null;
 }
 function useStoreSnapshot(store) {
-  return React5.useSyncExternalStore(
+  return React6.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, domIdFor, generativeRegistry, generativeRenderers, pathFromDomId, useBrand, useCheckedField, useDescriptorScope, useFrameHost, useResultSlot, useStoreSnapshot };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map