@pipelex/mthds-form 0.34.0 → 0.35.1

package/dist/{field-renderer-BYN6YrU-.d.ts → field-presentation-D5BkBSjX.d.ts}

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as react from 'react';
 import { ReactNode, RefObject, Ref } from 'react';
 import { FileRunField, RunField } from './core/descriptor.js';
 import { FileFormat } from './core/file-formats.js';
@@ -51,7 +51,7 @@ interface FilePickerEntryProps {
  * "Choose from your team's files": a full-width row with a folder icon, under
  * the field's own controls.
  */
-declare function FilePickerEntry({ onOpen, label, disabled, ref, id }: FilePickerEntryProps): React.JSX.Element;
+declare function FilePickerEntry({ onOpen, label, disabled, ref, id }: FilePickerEntryProps): react.JSX.Element;
 interface FilePickerProps {
     /** The host's list, and how its rows draw. */
     source: FilePickerSource;
@@ -106,7 +106,7 @@ interface FilePickerProps {
  * the field as it was: only Use writes. The sheet's state lives in its body,
  * which mounts when it opens, so it always opens on a fresh choice.
  */
-declare function FilePicker({ open, onOpenChange, returnFocusTo, onCloseAutoFocus, disabled, ...props }: FilePickerProps): React.JSX.Element;
+declare function FilePicker({ open, onOpenChange, returnFocusTo, onCloseAutoFocus, disabled, ...props }: FilePickerProps): react.JSX.Element;
 
 /** The serializable value of a file field. URL is what the runner sends. */
 interface FileValue {
@@ -138,7 +138,7 @@ interface FileFieldProps {
     onDropFile?: (file: File) => void | PromiseLike<UploadedFile | void>;
     /**
      * Whether the link input is offered, `true` when absent. `false` removes the
-     * "paste a URL instead" toggle and the input behind it, and says nothing about
+     * "Paste a link instead" toggle and the input behind it, and says nothing about
      * which values are valid. With no `onDropFile` either, the control throws.
      */
     allowUrl?: boolean;
@@ -167,9 +167,9 @@ interface FileFieldProps {
     disabled?: boolean;
 }
 /** Document variant: a file shown as a PDF preview (or chip for other docs). */
-declare function DocumentField(props: FileFieldProps): React.JSX.Element;
+declare function DocumentField(props: FileFieldProps): react.JSX.Element;
 /** Image variant: a file shown as a real image preview. */
-declare function ImageField(props: FileFieldProps): React.JSX.Element;
+declare function ImageField(props: FileFieldProps): react.JSX.Element;
 
 /**
  * The moves a host makes to a list's rows, and what a move does to an id.
@@ -227,7 +227,7 @@ interface FieldEnv {
     onDropFile?: (id: string, file: File) => void | PromiseLike<UploadedFile | void>;
     /**
      * Whether a file field offers a link input, the way in that needs no upload.
-     * `true` when absent; `false` hides the "paste a URL instead" toggle and the
+     * `true` when absent; `false` hides the "Paste a link instead" toggle and the
      * input behind it on every file field.
      *
      * It governs that input and nothing else. A file value is a URL whichever way
@@ -317,6 +317,46 @@ interface FieldRendererProps {
  * Object and list fields recurse back through here, so the whole form is one
  * data-driven tree with no per-type branching anywhere else.
  */
-declare function FieldRenderer({ field, value, onChange, id, error, env }: FieldRendererProps): React.JSX.Element;
+declare function FieldRenderer({ field, value, onChange, id, error, env }: FieldRendererProps): react.JSX.Element;
 
-export { DocumentField as D, type FieldEnv as F, ImageField as I, type RowMove as R, type UploadedFile as U, type FilePickerSource as a, FieldRenderer as b, type FieldRendererProps as c, FilePicker as d, FilePickerEntry as e, type FilePickerEntryProps as f, type FilePickerProps as g, type FileValue as h };
+/**
+ * How a field's LABEL chrome, and the enum values a person reads, should read.
+ * What a control stores never changes.
+ *
+ * - `studio` (default): the field's name verbatim in mono, with its concept
+ *   pill. The name IS the identifier a builder writes in the `.mthds` file, so
+ *   showing it exactly - and typed - is the point. An enum value is shown as its
+ *   code for the same reason: it has to match the bundle and the JSON the
+ *   builder reads next.
+ * - `app`: the field's name as a human question in sans, no concept pill. Inside
+ *   a method app, `full_name` and `native.Text` are implementation detail; the
+ *   person filling the form has never seen the method's source. An enum value
+ *   follows the label and reads as words, worded by the kernel's rule
+ *   (`enumValueLabeler` in the core entry).
+ *
+ * An enum value is the only value the two presentations show differently. A
+ * number, a text, a date and every other value render the same in both.
+ *
+ * The chrome around a value follows it too: in `app` the optional mark, a
+ * list's count and a file's formats are set in the page's face rather than in
+ * mono, an empty list is its Add button, and a description that restates its
+ * label is left out (`shownDescription`). See docs/architecture.md, "The
+ * chrome in `app`".
+ *
+ * Deliberately a context rather than a prop or a `FieldEnv` flag: only the
+ * components that own label chrome or an enum value's wording read it -
+ * `FieldShell`, `ObjectField`, `BooleanField`, `ListField`, `EnumField`, the
+ * result view and the generative layer's choice controls (`Select`, `Radio`,
+ * `Segmented`) - plus the controls whose own chrome follows it: the file
+ * control, whose card hides a storage reference in `app`, the date and number
+ * inputs, and a list's drop area. Threading a prop would have meant editing
+ * every field control and both recursive containers.
+ */
+type FieldPresentation = 'studio' | 'app';
+declare function FieldPresentationProvider({ presentation, children, }: {
+    presentation: FieldPresentation;
+    children: ReactNode;
+}): react.JSX.Element;
+declare function useFieldPresentation(): FieldPresentation;
+
+export { DocumentField as D, type FieldEnv as F, ImageField as I, type RowMove as R, type UploadedFile as U, type FieldPresentation as a, type FilePickerSource as b, FieldPresentationProvider as c, FieldRenderer as d, type FieldRendererProps as e, FilePicker as f, FilePickerEntry as g, type FilePickerEntryProps as h, type FilePickerProps as i, type FileValue as j, useFieldPresentation as u };

package/dist/generative/headless/index.d.ts

@@ -1547,7 +1547,12 @@ interface ResultBriefOptions {
 }
 /** The brief for an INPUT page: the form a run is started from. */
 declare function inputBrief(subject: BriefSubject, fields: readonly RunField[], { frame, style, result }?: InputBriefOptions): DesignerBrief;
-/** The brief for a RESULT page: what one run produced, laid out. */
+/**
+ * The brief for a RESULT page: what one run produced, laid out. With no run to
+ * read, `state` is left `undefined` and the brief carries no sample: it is then
+ * for the method's `layout_sample.design_from_written_sample` entry, which
+ * writes one itself.
+ */
 declare function resultBrief(subject: BriefSubject, field: RunField, state: unknown, { frame, style }?: ResultBriefOptions): DesignerBrief;
 
 /**
@@ -1655,6 +1660,35 @@ declare function absoluteHatchPath(spec: Spec, key: string, path: string, parent
  */
 declare function payloadToState(field: RunField, payload: unknown): unknown;
 
+/**
+ * What a designer's written sample holds, read against the descriptor.
+ *
+ * When a result page is designed with no run to read, the method's second
+ * entry (`layout_sample.design_from_written_sample`) has a model invent one
+ * state of the result and designs from that. The text comes out of the run's
+ * working memory under `written_sample`, and this is the check of it: what it
+ * parses to, and everything it holds that the method's own description of its
+ * result does not allow. Nothing here blocks a layout, which the two checks
+ * judge on its own terms. A host reads the problems to decide whether the
+ * sample is good enough to store beside the layout and to draw a page from.
+ */
+/** What a written sample parsed to and what is wrong with it; no problems means it may be used. */
+interface WrittenSample {
+    /** The sample as parsed, whatever it holds; absent when the text is no JSON at all. */
+    state: unknown;
+    /** Every disagreement with the descriptor, one a line. */
+    problems: string[];
+}
+/**
+ * Parse a written sample, a code fence around it tolerated, and compare it
+ * with the descriptor of the result: known members only, kinds that match
+ * within the limits the method states, and what a sample must leave out
+ * absent. It never throws, and it asks for no
+ * member to be present: a sample that says less than the method can is still
+ * one a page draws from.
+ */
+declare function writtenSampleOf(field: RunField, text: string): WrittenSample;
+
 /**
  * A spec with its provenance - the shape every fixture takes, whoever produced
  * it, so a story renders any of them without knowing which it holds.
@@ -1736,4 +1770,4 @@ declare function fixtureLabel(fixture: Provenance & Pick<SpecFixture, 'repairs'>
 /** The fixture a story asks for, or a loud failure: a story must never render a page it did not name. */
 declare function findFixture(fixtures: readonly SpecFixture[], pipeRef: string, id: string): SpecFixture;
 
-export { type BriefSubject, COMPONENT_NAMES, COMPONENT_RENDERINGS, COMPOSER_COMPONENTS, CUSTOM_COMPONENTS, type ComponentRendering, type CriticLoop, DESIGNER_BRIEF_CONCEPT, DESIGNER_CATALOG_CONCEPT, type DesignerAction, type DesignerBrief, type DesignerCatalog, type DesignerCatalogOptions, type DesignerComponent, type DesignerPathEntry, type DesignerStyle, FRAMES, FRAME_COMPONENTS, type Frame, type GenerativeSpec, ICON_NAMES, INPUTS_ROOT, type InputBriefOptions, type LayoutCheck, type LayoutDescriptor, type LayoutVerdict, METRIC_FORMATS, PICKED_SHADCN, PRODUCT_COMPONENTS, PROMPT_HASH, type Producer, type ProductComponentName, REPAIR_ATTEMPTS, RESULT_COMPONENTS, RESULT_ROOT, type ResultBriefOptions, type SpecFixture, type SpecProblem, type SpecVerdict, type ValidationCatalog, 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 };
+export { type BriefSubject, COMPONENT_NAMES, COMPONENT_RENDERINGS, COMPOSER_COMPONENTS, CUSTOM_COMPONENTS, type ComponentRendering, type CriticLoop, DESIGNER_BRIEF_CONCEPT, DESIGNER_CATALOG_CONCEPT, type DesignerAction, type DesignerBrief, type DesignerCatalog, type DesignerCatalogOptions, type DesignerComponent, type DesignerPathEntry, type DesignerStyle, FRAMES, FRAME_COMPONENTS, type Frame, type GenerativeSpec, ICON_NAMES, INPUTS_ROOT, type InputBriefOptions, type LayoutCheck, type LayoutDescriptor, type LayoutVerdict, METRIC_FORMATS, PICKED_SHADCN, PRODUCT_COMPONENTS, PROMPT_HASH, type Producer, type ProductComponentName, REPAIR_ATTEMPTS, RESULT_COMPONENTS, RESULT_ROOT, type ResultBriefOptions, type SpecFixture, type SpecProblem, type SpecVerdict, type ValidationCatalog, type WrittenSample, 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, writtenSampleOf };

package/dist/generative/headless/index.js

@@ -1,7 +1,8 @@
-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';
+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, writtenSampleOf } from '../../chunk-XLTYIIUY.js';
 import '../../chunk-QQK6Y55E.js';
 import '../../chunk-PNNWNRPG.js';
 import '../../chunk-TF4RTKLH.js';
 import '../../chunk-V3OV2XQT.js';
+import '../../chunk-GKV77RAS.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/generative/index.d.ts

@@ -1,22 +1,22 @@
-export { BriefSubject, COMPONENT_NAMES, COMPONENT_RENDERINGS, COMPOSER_COMPONENTS, CUSTOM_COMPONENTS, ComponentRendering, CriticLoop, DESIGNER_BRIEF_CONCEPT, DESIGNER_CATALOG_CONCEPT, DesignerAction, DesignerBrief, DesignerCatalog, DesignerCatalogOptions, DesignerComponent, DesignerPathEntry, DesignerStyle, FRAMES, FRAME_COMPONENTS, Frame, GenerativeSpec, ICON_NAMES, INPUTS_ROOT, InputBriefOptions, LayoutCheck, LayoutDescriptor, LayoutVerdict, METRIC_FORMATS, PICKED_SHADCN, PRODUCT_COMPONENTS, PROMPT_HASH, Producer, ProductComponentName, REPAIR_ATTEMPTS, RESULT_COMPONENTS, RESULT_ROOT, ResultBriefOptions, SpecFixture, SpecProblem, SpecVerdict, ValidationCatalog, 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 './headless/index.js';
+export { BriefSubject, COMPONENT_NAMES, COMPONENT_RENDERINGS, COMPOSER_COMPONENTS, CUSTOM_COMPONENTS, ComponentRendering, CriticLoop, DESIGNER_BRIEF_CONCEPT, DESIGNER_CATALOG_CONCEPT, DesignerAction, DesignerBrief, DesignerCatalog, DesignerCatalogOptions, DesignerComponent, DesignerPathEntry, DesignerStyle, FRAMES, FRAME_COMPONENTS, Frame, GenerativeSpec, ICON_NAMES, INPUTS_ROOT, InputBriefOptions, LayoutCheck, LayoutDescriptor, LayoutVerdict, METRIC_FORMATS, PICKED_SHADCN, PRODUCT_COMPONENTS, PROMPT_HASH, Producer, ProductComponentName, REPAIR_ATTEMPTS, RESULT_COMPONENTS, RESULT_ROOT, ResultBriefOptions, SpecFixture, SpecProblem, SpecVerdict, ValidationCatalog, WrittenSample, 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, writtenSampleOf } from './headless/index.js';
 import * as _json_render_core from '@json-render/core';
 import { Spec, StateStore, StateModel, ValidationConfig } from '@json-render/core';
 export { Spec, StateModel, StateStore, createStateStore } from '@json-render/core';
-import * as React from 'react';
+import * as react from 'react';
 import * as _json_render_react from '@json-render/react';
 import { Components, Renderer, useFieldValidation } from '@json-render/react';
+import { F as FieldEnv, a as FieldPresentation } from '../field-presentation-D5BkBSjX.js';
 import { B as BrandManifest } from '../manifest-D3DLyNEv.js';
 export { b as brandManifestSchema } from '../manifest-D3DLyNEv.js';
 import * as zod_v4_core from 'zod/v4/core';
 import * as zod from 'zod';
 import { RunField } from '../core/descriptor.js';
-import { F as FieldEnv } from '../field-renderer-BYN6YrU-.js';
 export { seedInputs } from '../core/seed.js';
 import '../styles-Bn8byNdo.js';
-import '../core/contracts.js';
-import 'mthds/protocol';
 import '../core/file-formats.js';
 import '../core/sources.js';
+import '../core/contracts.js';
+import 'mthds/protocol';
 
 /**
  * How a page tells its host that one of its elements failed to render.
@@ -98,8 +98,8 @@ interface DescriptorScope {
 declare function useDescriptorScope(): DescriptorScope;
 declare function DescriptorProvider({ scope, children, }: {
     scope: DescriptorScope;
-    children: React.ReactNode;
-}): React.JSX.Element;
+    children: react.ReactNode;
+}): react.JSX.Element;
 /**
  * Exported for the round-trip test only, not from the entry's index: the pair
  * is only correct together, so a test that could see just one half of it would
@@ -736,7 +736,7 @@ declare const generativeRenderers: Components<_json_render_core.Catalog<{
 }>>;
 
 /** What a page renders through: this entry's registry unless a host brings its own. */
-type PageRegistry = React.ComponentProps<typeof Renderer>['registry'];
+type PageRegistry = react.ComponentProps<typeof Renderer>['registry'];
 interface GenerativePageProps {
     /** The layout to render; `null` while a stream has produced nothing yet. */
     spec: Spec | null;
@@ -763,6 +763,14 @@ interface GenerativePageProps {
      * brand components may omit it.
      */
     brand?: BrandManifest;
+    /**
+     * How the kernel's own controls and results on the page read: `app` unless
+     * a host says otherwise. A produced page is a product page, its own fields
+     * already wear the app's labels, and the kernel's under the studio's mono
+     * names and concept pills read as a builder's form dropped into it. A host
+     * previewing a layout for a builder may pass `studio`.
+     */
+    presentation?: FieldPresentation;
     /**
      * Called once for each element that throws while rendering, with the error
      * and the element's component type. json-render drops such an element from
@@ -784,7 +792,7 @@ interface GenerativePageProps {
  * kernel's readiness is computed from, and generation is nowhere in the
  * request path: a layout is a data file, and this renders it.
  */
-declare function GenerativePage({ spec, store, scope, onRun, loading, registry, brand, onElementError, }: GenerativePageProps): React.JSX.Element;
+declare function GenerativePage({ spec, store, scope, onRun, loading, registry, brand, presentation, onElementError, }: GenerativePageProps): react.JSX.Element;
 /** The store's current state, re-rendering on every change. For a receipt beside a page. */
 declare function useStoreSnapshot(store: StateStore): StateModel;
 
@@ -810,8 +818,8 @@ declare const generativeRegistry: _json_render_react.ComponentRegistry;
  */
 declare function RevealPanel({ open, children }: {
     open: () => void;
-    children: React.ReactNode;
-}): React.JSX.Element;
+    children: react.ReactNode;
+}): react.JSX.Element;
 /** What `useCheckedField` gives a control: json-render's field validation, and where the focus goes. */
 type CheckedField = ReturnType<typeof useFieldValidation> & {
     /**
@@ -851,21 +859,21 @@ declare function useCheckedField(path: string, config: ValidationConfig | undefi
  */
 interface ResultSlot {
     /** What to paint. Nothing is painted at all while this is absent or `null`. */
-    content: React.ReactNode;
+    content: react.ReactNode;
     /** The heading above it. "Result" unless the host names it. */
     title?: string;
 }
 declare function ResultSlotProvider({ slot, children, }: {
     slot: ResultSlot | null;
-    children: React.ReactNode;
-}): React.JSX.Element;
+    children: react.ReactNode;
+}): react.JSX.Element;
 /** The slot the nearest page provides, or `null` on a page with no result yet. */
 declare function useResultSlot(): ResultSlot | null;
 
 declare function BrandProvider({ manifest, children, }: {
     manifest: BrandManifest;
-    children: React.ReactNode;
-}): React.JSX.Element;
+    children: react.ReactNode;
+}): react.JSX.Element;
 declare function useBrand(): BrandManifest;
 
 interface BrandBarProps {
@@ -876,7 +884,7 @@ interface BrandBarProps {
     /** A short code at the end of the bar, such as the pipe's. */
     tag?: string | null;
 }
-declare function BrandBar({ app, links, tag }: BrandBarProps): React.JSX.Element;
+declare function BrandBar({ app, links, tag }: BrandBarProps): react.JSX.Element;
 
 /**
  * What a host's compose-then-result frame tells the frame components of a
@@ -899,8 +907,8 @@ interface FrameHost {
 }
 declare function FrameHostProvider({ host, children, }: {
     host: FrameHost;
-    children: React.ReactNode;
-}): React.JSX.Element;
+    children: react.ReactNode;
+}): react.JSX.Element;
 declare function useFrameHost(): FrameHost;
 
 export { BrandBar, type BrandBarProps, BrandManifest, BrandProvider, type CheckedField, DescriptorProvider, type DescriptorScope, type ElementErrorHandler, type ElementErrorInfo, type FrameHost, FrameHostProvider, GenerativePage, type GenerativePageProps, type PageRegistry, type ResultSlot, ResultSlotProvider, RevealPanel, domIdFor, generativeRegistry, generativeRenderers, pathFromDomId, useBrand, useCheckedField, useDescriptorScope, useFrameHost, useResultSlot, useStoreSnapshot };

package/dist/generative/index.js

@@ -1,7 +1,7 @@
 "use client";
-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 { 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, FieldPresentationProvider } from '../chunk-TD62R3P6.js';
+import { baseCatalog, catalog, frameComponents, shareAmount, INPUTS_ROOT, joinPath, resultFieldAtPath, segmentsUnder, RESULT_ROOT, inputFieldAtPath, definitionChain, unwrapped } from '../chunk-XLTYIIUY.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, writtenSampleOf } from '../chunk-XLTYIIUY.js';
 import '../chunk-4VAO6BDE.js';
 export { seedInputs } from '../chunk-AURDKAIC.js';
 import '../chunk-L23R3JNQ.js';
@@ -929,11 +929,11 @@ function Stack({
 }
 var COLUMNS = {
   1: "grid-cols-1",
-  2: "sm:grid-cols-2",
-  3: "sm:grid-cols-2 lg:grid-cols-3",
-  4: "sm:grid-cols-2 lg:grid-cols-4",
-  5: "sm:grid-cols-2 lg:grid-cols-5",
-  6: "sm:grid-cols-2 lg:grid-cols-6"
+  2: "@lg:grid-cols-2",
+  3: "@lg:grid-cols-2 @5xl:grid-cols-3",
+  4: "@lg:grid-cols-2 @5xl:grid-cols-4",
+  5: "@lg:grid-cols-2 @5xl:grid-cols-5",
+  6: "@lg:grid-cols-2 @5xl:grid-cols-6"
 };
 function Grid({
   props,
@@ -1172,7 +1172,7 @@ function Textarea({
   ] });
 }
 var NATIVE_CHECK = cn("size-4 shrink-0", checkedAccentClass, focusOutlineClass);
-var NATIVE_CHECK_ROW = "flex items-center gap-2 text-sm max-sm:min-h-11";
+var NATIVE_CHECK_ROW = "flex items-center gap-2 text-sm @max-lg:min-h-11";
 function Radio({
   props,
   bindings,
@@ -1189,7 +1189,7 @@ function Radio({
       "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("div", { className: "space-y-2 @max-lg:space-y-0", children: (props.options ?? []).map((option, index, options) => /* @__PURE__ */ jsxs("label", { className: NATIVE_CHECK_ROW, children: [
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -1253,7 +1253,7 @@ function Switch2({
   const id = useControlId(props.name);
   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__ */ jsxs("div", { className: "flex items-center gap-3 @max-lg:py-2.5", children: [
       /* @__PURE__ */ jsx(
         Switch,
         {
@@ -1498,9 +1498,9 @@ function Metric({ props }) {
   ] });
 }
 var SPLIT_COLUMNS = {
-  "1:1": "sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]",
-  "1:2": "sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]",
-  "2:1": "sm:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]"
+  "1:1": "@lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]",
+  "1:2": "@lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]",
+  "2:1": "@lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]"
 };
 var SPLIT_GAP = { md: "gap-4", lg: "gap-6", xl: "gap-8" };
 function Split({
@@ -1533,11 +1533,11 @@ function Tabs({ props, children }) {
     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(
+    /* @__PURE__ */ jsx(TabsPrimitive.List, { className: "inline-flex h-10 items-center justify-start rounded-md bg-muted p-1 text-muted-foreground @max-lg:h-auto @max-lg:flex-wrap", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
       TabsPrimitive.Trigger,
       {
         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",
+        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-lg:min-h-11 @max-lg:min-w-11",
         children: tab.label
       },
       index
@@ -1732,7 +1732,7 @@ function Segmented({ props, bindings, emit }) {
             value: option,
             variant: "outline",
             size: "sm",
-            className: "rounded-full px-3.5 data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground max-sm:h-11 max-sm:min-w-11",
+            className: "rounded-full px-3.5 data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground @max-lg:h-11 @max-lg:min-w-11",
             children: labelOf(option)
           },
           `${index}-${option}`
@@ -1888,7 +1888,7 @@ function Composer({ props, children, emit }) {
             "h1",
             {
               className: cn(
-                "text-[32px] leading-[1.1] text-balance text-foreground sm:text-[38px] sm:leading-[1.08]",
+                "text-[32px] leading-[1.1] text-balance text-foreground @lg:text-[38px] @lg:leading-[1.08]",
                 headingClass(700, true)
               ),
               children: props.headline
@@ -1900,20 +1900,20 @@ function Composer({ props, children, emit }) {
           "div",
           {
             "data-style-panel": "",
-            className: cn(RADIUS, panelSurfaceClass, panelFlatShadowClass, "p-7 max-sm:p-5"),
+            className: cn(RADIUS, panelSurfaceClass, panelFlatShadowClass, "p-7 @max-lg:p-5"),
             children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: cn(
                     "grid gap-8",
-                    two && "md:block md:columns-2 md:gap-x-10 md:[&>*+*]:mt-8 md:[&>*>h2]:break-after-avoid md:[&>*>*:not(h2)]:break-inside-avoid"
+                    two && "@lg:block @lg:columns-2 @lg:gap-x-10 @lg:[&>*+*]:mt-8 @lg:[&>*>h2]:break-after-avoid @lg:[&>*>*:not(h2)]:break-inside-avoid"
                   ),
                   children
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 z-[2] -mx-7 -mb-7 mt-7 flex items-center justify-between gap-4 rounded-b-[calc(var(--radius,0.5rem)*1.5)] border-t border-border [background-color:var(--panel-fill,var(--card,hsl(0_0%_100%)))] px-7 pt-[18px] pb-7 max-sm:-mx-5 max-sm:-mb-5 max-sm:flex-col-reverse max-sm:items-stretch max-sm:px-5 max-sm:pb-5", children: [
-                /* @__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: [
+              /* @__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-lg:-mx-5 @max-lg:-mb-5 @max-lg:flex-col-reverse @max-lg:items-stretch @max-lg:px-5 @max-lg:pb-5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1 text-sm text-muted-foreground @max-lg:items-center @max-lg: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" }),
@@ -1945,7 +1945,7 @@ function Composer({ props, children, emit }) {
             ]
           }
         ),
-        props.notes && props.notes.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "grid gap-x-8 gap-y-2.5 px-1 sm:grid-cols-2", children: props.notes.map((note, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2.5 text-sm text-muted-foreground", children: [
+        props.notes && props.notes.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "grid gap-x-8 gap-y-2.5 px-1 @lg:grid-cols-2", children: props.notes.map((note, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2.5 text-sm text-muted-foreground", children: [
           /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: linkTextClass, children: "\u2713" }),
           /* @__PURE__ */ jsx("span", { className: "min-w-0", children: note })
         ] }, index)) }) : null
@@ -1961,14 +1961,14 @@ function FieldGroup({ props, children }) {
 }
 function ResultHeader({ props }) {
   const host = useFrameHost();
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-6 max-sm:flex-col", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-6 @max-lg:flex-col", children: [
     /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
       props.eyebrow ? /* @__PURE__ */ jsx("p", { className: cn("mb-1.5 text-[13px] font-semibold", linkTextClass), children: props.eyebrow }) : null,
       /* @__PURE__ */ jsx(
         "h1",
         {
           className: cn(
-            "text-[28px] leading-[1.12] text-balance text-foreground sm:text-[32px]",
+            "text-[28px] leading-[1.12] text-balance text-foreground @lg:text-[32px]",
             headingClass(700, true)
           ),
           children: props.title
@@ -1982,7 +1982,7 @@ function ResultHeader({ props }) {
         type: "button",
         onClick: () => host.onAction?.(label),
         className: cn(
-          "inline-flex min-h-11 items-center rounded-[var(--radius,0.5rem)] px-4 text-sm font-semibold sm:min-h-9",
+          "inline-flex min-h-11 items-center rounded-[var(--radius,0.5rem)] px-4 text-sm font-semibold @lg:min-h-9",
           focusOutlineClass,
           i === 0 ? "bg-primary text-primary-foreground" : "border border-border bg-background text-foreground"
         ),
@@ -2459,6 +2459,7 @@ function GenerativePage({
   loading,
   registry = generativeRegistry,
   brand,
+  presentation = "app",
   onElementError
 }) {
   const { inputs, result, env, idPrefix } = scope;
@@ -2513,7 +2514,7 @@ function GenerativePage({
       }
     };
   });
-  const page = /* @__PURE__ */ jsx(DescriptorProvider, { scope: stableScope, children: /* @__PURE__ */ jsx(PlacedInputsProvider, { spec, children: /* @__PURE__ */ jsx(
+  const page = /* @__PURE__ */ jsx(FieldPresentationProvider, { presentation, children: /* @__PURE__ */ jsx(DescriptorProvider, { scope: stableScope, children: /* @__PURE__ */ jsx(PlacedInputsProvider, { spec, children: /* @__PURE__ */ jsx(
     JSONUIProvider,
     {
       registry: pageRegistry,
@@ -2522,7 +2523,7 @@ function GenerativePage({
       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(
+        /* @__PURE__ */ jsx("div", { className: "@container w-full", children: /* @__PURE__ */ jsx(
           RootBoundary,
           {
             type: rootType,
@@ -2532,10 +2533,10 @@ function GenerativePage({
             spec,
             children: /* @__PURE__ */ jsx(Renderer, { spec, registry: pageRegistry, loading })
           }
-        )
+        ) })
       ] }) })
     }
-  ) }) });
+  ) }) }) });
   return brand ? /* @__PURE__ */ jsx(BrandProvider, { manifest: brand, children: page }) : page;
 }
 function ValidationBridge({