@wildo-ai/saas-frontend-lib 1.1.10 → 1.1.11

package/dist/esm/components/resources/skeleton/DisplayLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisplayLayout.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/DisplayLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React, { useMemo, type ReactNode } from 'react';\nimport type { ResponsiveMaxWidth } from '@wildo-ai/presets-components-models';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { responsiveMaxWidthToCssValue } from '../../sections/surface';\nimport { FieldScopeProvider } from './FieldScopeContext';\nimport { useOptionalDisplayTemplateContext } from '../../data-display/DisplayTemplateContext';\nimport { ContentSectionContainer } from '../../sections/ContentSectionContainer';\nimport type { ContentSectionDescriptor } from '../../sections/ContentSectionContainer';\nimport {\n  groupSectionsByAppearance,\n  buildSectionConfigFromGroup,\n} from './section-consolidation.utils';\nimport { GroupedSectionBody, type SectionProps } from './Section';\nimport { GroupedSectionHostKind } from './Section.shared';\n\n/** @wildo_source:part:start saas.frontend.display-layout.reading-measure facet:layer:frontend facet:family:layout facet:audience:app-developer */\nexport interface DisplayLayoutProps {\n  /** Additional CSS classes for the root container. */\n  className?: string;\n  /**\n   * How wide the layout root lets its content grow, named in the framework's own vocabulary.\n   *\n   * Defaults to `'measure'` — the reading-measure cap (~42rem, themeable via `--measure-max-width`)\n   * that keeps a single-column stack of label/value pairs readable instead of stretched edge to edge.\n   * That default is right for what this layout was built for and is unchanged.\n   *\n   * It is WRONG for a composed document. A template that renders tabs, quote blocks, tables or regions\n   * is not a field stack: those set their own measure internally, and a 42rem cap around them squeezes\n   * the whole composition into a column with dead space beside it. Such a template declares `'none'`.\n   *\n   * `'none'` is not \"uncapped\" in practice — the zone content boundary above has already capped the\n   * area at the page-content width (`'content'`, ~80rem) and an adjacent pane is narrower still. This\n   * prop decides only whether a SECOND, tighter cap applies inside that, and the answer depends on what\n   * the template renders, which is why the template is the one asked.\n   */\n  responsiveMaxWidth?: ResponsiveMaxWidth;\n  children?: ReactNode;\n}\n/** @wildo_source:part:end saas.frontend.display-layout.reading-measure */\n\n/**\n * Root wrapper for display (read-only) layout templates.\n *\n * Provides a root `FieldScopeContext` with empty prefix so nested\n * `<DisplayField name=\"...\">` components resolve field names correctly.\n *\n * `ResourceDisplayContext` (inline editing, RMM, file upload) is provided\n * by the parent `ResourceAutomaticDisplayer`, not by this layout component.\n *\n * @example\n * ```tsx\n * <DisplayLayout>\n *   <Section name=\"general\">\n *     <DisplayField name=\"title\" />\n *     <DisplayField name=\"status\" />\n *   </Section>\n * </DisplayLayout>\n * ```\n */\nexport function DisplayLayout({ className, children, responsiveMaxWidth = 'measure' }: DisplayLayoutProps): ReactNode {\n  const displayCtx = useOptionalDisplayTemplateContext();\n  const renderedChildren = useMemo(\n    () => renderGroupedChildren(children, displayCtx),\n    [children, displayCtx],\n  );\n\n  return (\n    <FieldScopeProvider pathPrefix=\"\">\n      {/*\n        T4c — reading-measure cap (mirrors FormLayout). A single-column\n        read/detail stack caps at `--measure-max-width` (~42rem) and aligns to\n        the LEFT of the content zone, so detail views stop stretching\n        edge-to-edge yet stay flush with the left-aligned resource header and\n        danger-zone siblings (no centred gutter between them). `max-w` only\n        engages above the measure, so a detail rendered inside a narrow\n        dialog/panel is unaffected. Retune/opt-out via the CSS var or `className`.\n      */}\n      {/*\n        `space-y-section` separates stacked SECTIONS (each titled CARD group /\n        container) with a clear gap so consecutive cards read as distinct groups\n        rather than one continuous stack. Sectionless templates whose direct\n        children are bare SETTINGS_ROW field rows must NOT inherit that section\n        gap: the row chrome is a self-delimiting list item (`py-card-sm` rhythm +\n        `border-b` hairline), so consecutive rows stack FLUSH — the same\n        content-aware rule the `ContentSection` body applies to settings rows.\n        The pairwise `:has(+ …)` selector zeroes only the margin BETWEEN two\n        adjacent settings rows, so a row followed by a real section (mixed\n        template) keeps the section gap.\n\n        ⚠ The attribute match is `^=settings` (prefix), NOT `=settings_row`:\n        Tailwind converts an unescaped `_` inside an arbitrary variant to a\n        SPACE, emitting the invalid selector `[data-chrome-mode=settings row]`\n        which the browser silently drops (this killed ContentSection's original\n        `…=settings_row]]:gap-0` spelling — verified against the served CSS).\n        Only `settings_row` starts with `settings`, so the prefix is exact.\n      */}\n      <div\n        className={cn(\n          'mr-auto w-full space-y-section',\n          '[&>[data-chrome-mode^=settings]:has(+[data-chrome-mode^=settings])]:mb-0',\n          className,\n        )}\n        style={{ maxInlineSize: responsiveMaxWidthToCssValue(responsiveMaxWidth) }}\n        data-inline-size-tier={responsiveMaxWidth}\n        data-guidance-display\n      >\n        {renderedChildren}\n      </div>\n    </FieldScopeProvider>\n  );\n}\n\n/**\n * Introspects children for `<Section>` elements with container-mode `appearance`.\n * Groups sections sharing the same container mode into a `ContentSectionContainer`.\n * Solo-mode sections and non-Section children render in place.\n */\nfunction renderGroupedChildren(\n  children: ReactNode,\n  displayCtx: ReturnType<typeof useOptionalDisplayTemplateContext>,\n): ReactNode {\n  const grouped = groupSectionsByAppearance(children, displayCtx?.defaultSectionAppearance);\n\n  return (\n    <>\n      {grouped.items.map((item, idx) => {\n        if (item.type === 'node') {\n          return <React.Fragment key={idx}>{item.node}</React.Fragment>;\n        }\n\n        const { group } = item;\n        const config = buildSectionConfigFromGroup(group);\n        const sectionLabels = displayCtx?.sectionLabels ?? {};\n        const sectionDescriptions = displayCtx?.sectionDescriptions ?? {};\n\n        const contentSections: ContentSectionDescriptor[] = group.sections.map((el) => ({\n          id: el.props.name,\n          title: sectionLabels[el.props.name],\n          description: sectionDescriptions[el.props.name],\n          content: (\n            <GroupedSectionContent\n              sectionProps={el.props}\n              providesHeading={!!sectionLabels[el.props.name]}\n            />\n          ),\n        }));\n\n        return (\n          <ContentSectionContainer\n            key={`group-${group.mode}-${idx}`}\n            sections={contentSections}\n            config={config}\n          />\n        );\n      })}\n    </>\n  );\n}\n\n/**\n * Wraps an individual grouped section's content with section-level behaviors\n * (displayChromeMode) when rendered inside a container.\n */\nfunction GroupedSectionContent({\n  sectionProps,\n  providesHeading,\n}: {\n  sectionProps: Pick<SectionProps, 'name' | 'children' | 'chromeMode' | 'className' | 'disabled'>;\n  providesHeading?: boolean;\n}): ReactNode {\n  return (\n    <GroupedSectionBody\n      hostKind={GroupedSectionHostKind.DISPLAY}\n      sectionProps={sectionProps}\n      providesHeading={providesHeading}\n    />\n  );\n}\n"]}
+{"version":3,"file":"DisplayLayout.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/DisplayLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React, { useMemo, type ReactNode } from 'react';\nimport { TypographyVariant, type ResponsiveMaxWidth } from '@wildo-ai/presets-components-models';\nimport { SectionLegendVoiceHost } from '../../sections/section-legend-voice';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { responsiveMaxWidthToCssValue } from '../../sections/surface';\nimport { FieldScopeProvider } from './FieldScopeContext';\nimport { useOptionalDisplayTemplateContext } from '../../data-display/DisplayTemplateContext';\nimport { ContentSectionContainer } from '../../sections/ContentSectionContainer';\nimport type { ContentSectionDescriptor } from '../../sections/ContentSectionContainer';\nimport {\n  groupSectionsByAppearance,\n  buildSectionConfigFromGroup,\n} from './section-consolidation.utils';\nimport { GroupedSectionBody, type SectionProps } from './Section';\nimport { GroupedSectionHostKind } from './Section.shared';\n\n/** @wildo_source:part:start saas.frontend.display-layout.reading-measure facet:layer:frontend facet:family:layout facet:audience:app-developer */\nexport interface DisplayLayoutProps {\n  /** Additional CSS classes for the root container. */\n  className?: string;\n  /**\n   * How wide the layout root lets its content grow, named in the framework's own vocabulary.\n   *\n   * Left unset, the width is DERIVED from what the layout renders: the reading-measure cap (~42rem, themeable\n   * via `--measure-max-width`) that keeps a single-column stack of label/value pairs readable instead of\n   * stretched edge to edge — lifted as soon as the layout holds a collection (see the last paragraph).\n   *\n   * It is WRONG for a composed document. A template that renders tabs, quote blocks, tables or regions\n   * is not a field stack: those set their own measure internally, and a 42rem cap around them squeezes\n   * the whole composition into a column with dead space beside it. Such a template declares `'none'`.\n   *\n   * `'none'` is not \"uncapped\" in practice — the zone content boundary above has already capped the\n   * area at the page-content width (`'content'`, ~80rem) and an adjacent pane is narrower still. This\n   * prop decides only whether a SECOND, tighter cap applies inside that, and the answer depends on what\n   * the template renders, which is why the template is the one asked.\n   *\n   * Left UNSET, the cap is derived from what the layout actually renders: the reading measure for fields,\n   * lifted as soon as the layout holds a COLLECTION (a related list, an embedded collection — any surface\n   * marked {@link COLLECTION_SURFACE_ATTRIBUTE}). A list squeezed into a 42rem column, under a header that\n   * spans the page, is what a field-only cap does to a record whose page is mostly its list. Declared, the\n   * value is the template's statement and is applied as given.\n   */\n  responsiveMaxWidth?: ResponsiveMaxWidth;\n  children?: ReactNode;\n}\n/** @wildo_source:part:end saas.frontend.display-layout.reading-measure */\n\n/**\n * The attribute that marks a COLLECTION in the rendered page, so a layout around it can tell it holds a list.\n *\n * Carried by the `ResourceLayout_List` / `ResourceLayout_Search` wrappers (around any preset or custom view, from\n * the first paint) and by a `RelatedResourceSections` block that holds a list (before its labels load, whichever\n * tab is open). Read by CSS `:has()`: by `DisplayLayout`, to lift its reading measure, and by the READ page, to give\n * the danger zone the same width as the record body (`--record-body-max-inline-size`). Being CSS, the decision\n * follows the DOM and never needs a second render.\n */\nexport const COLLECTION_SURFACE_ATTRIBUTE = 'data-collection-surface';\n\n/**\n * Root wrapper for display (read-only) layout templates.\n *\n * Provides a root `FieldScopeContext` with empty prefix so nested\n * `<DisplayField name=\"...\">` components resolve field names correctly.\n *\n * `ResourceDisplayContext` (inline editing, RMM, file upload) is provided\n * by the parent `ResourceAutomaticDisplayer`, not by this layout component.\n *\n * @example\n * ```tsx\n * <DisplayLayout>\n *   <Section name=\"general\">\n *     <DisplayField name=\"title\" />\n *     <DisplayField name=\"status\" />\n *   </Section>\n * </DisplayLayout>\n * ```\n */\nexport function DisplayLayout({ className, children, responsiveMaxWidth }: DisplayLayoutProps): ReactNode {\n  const displayCtx = useOptionalDisplayTemplateContext();\n  const renderedChildren = useMemo(\n    () => renderGroupedChildren(children, displayCtx),\n    [children, displayCtx],\n  );\n\n  return (\n    <FieldScopeProvider pathPrefix=\"\">\n      {/* A read body names its section groups in the EYEBROW voice — see `SectionLegendVoiceHost`. */}\n      <SectionLegendVoiceHost voice={TypographyVariant.EYEBROW}>\n      {/*\n        T4c — reading-measure cap (mirrors FormLayout). A single-column\n        read/detail stack caps at `--measure-max-width` (~42rem) and aligns to\n        the LEFT of the content zone, so detail views stop stretching\n        edge-to-edge yet stay flush with the left-aligned resource header and\n        danger-zone siblings (no centred gutter between them). `max-w` only\n        engages above the measure, so a detail rendered inside a narrow\n        dialog/panel is unaffected. Retune/opt-out via the CSS var or `className`.\n      */}\n      {/*\n        `space-y-section` separates stacked SECTIONS (each titled CARD group /\n        container) with a clear gap so consecutive cards read as distinct groups\n        rather than one continuous stack. Sectionless templates whose direct\n        children are bare SETTINGS_ROW field rows must NOT inherit that section\n        gap: the row chrome is a self-delimiting list item (`py-card-sm` rhythm +\n        `border-b` hairline), so consecutive rows stack FLUSH — the same\n        content-aware rule the `ContentSection` body applies to settings rows.\n        The pairwise `:has(+ …)` selector zeroes only the margin BETWEEN two\n        adjacent settings rows, so a row followed by a real section (mixed\n        template) keeps the section gap.\n\n        ⚠ The attribute match is `^=settings` (prefix), NOT `=settings_row`:\n        Tailwind converts an unescaped `_` inside an arbitrary variant to a\n        SPACE, emitting the invalid selector `[data-chrome-mode=settings row]`\n        which the browser silently drops (this killed ContentSection's original\n        `…=settings_row]]:gap-0` spelling — verified against the served CSS).\n        Only `settings_row` starts with `settings`, so the prefix is exact.\n      */}\n      <div\n        className={cn(\n          'mr-auto w-full space-y-section',\n          '[&>[data-chrome-mode^=settings]:has(+[data-chrome-mode^=settings])]:mb-0',\n          // Derived width (no declaration): the reading measure, lifted when the layout holds a collection.\n          // The selector spells the attribute literally because Tailwind reads class names statically;\n          // `display-layout-derived-width.test.tsx` holds it equal to `COLLECTION_SURFACE_ATTRIBUTE`.\n          responsiveMaxWidth === undefined\n            && '[max-inline-size:var(--measure-max-width,42rem)] has-[[data-collection-surface]]:[max-inline-size:none]',\n          className,\n        )}\n        style={responsiveMaxWidth === undefined ? undefined : { maxInlineSize: responsiveMaxWidthToCssValue(responsiveMaxWidth) }}\n        data-inline-size-tier={responsiveMaxWidth ?? 'derived'}\n        data-guidance-display\n      >\n        {renderedChildren}\n      </div>\n      </SectionLegendVoiceHost>\n    </FieldScopeProvider>\n  );\n}\n\n/**\n * Introspects children for `<Section>` elements with container-mode `appearance`.\n * Groups sections sharing the same container mode into a `ContentSectionContainer`.\n * Solo-mode sections and non-Section children render in place.\n */\nfunction renderGroupedChildren(\n  children: ReactNode,\n  displayCtx: ReturnType<typeof useOptionalDisplayTemplateContext>,\n): ReactNode {\n  const grouped = groupSectionsByAppearance(children, displayCtx?.defaultSectionAppearance);\n\n  return (\n    <>\n      {grouped.items.map((item, idx) => {\n        if (item.type === 'node') {\n          return <React.Fragment key={idx}>{item.node}</React.Fragment>;\n        }\n\n        const { group } = item;\n        const config = buildSectionConfigFromGroup(group);\n        const sectionLabels = displayCtx?.sectionLabels ?? {};\n        const sectionDescriptions = displayCtx?.sectionDescriptions ?? {};\n\n        const contentSections: ContentSectionDescriptor[] = group.sections.map((el) => ({\n          id: el.props.name,\n          title: sectionLabels[el.props.name],\n          description: sectionDescriptions[el.props.name],\n          content: (\n            <GroupedSectionContent\n              sectionProps={el.props}\n              providesHeading={!!sectionLabels[el.props.name]}\n            />\n          ),\n        }));\n\n        return (\n          <ContentSectionContainer\n            key={`group-${group.mode}-${idx}`}\n            sections={contentSections}\n            config={config}\n          />\n        );\n      })}\n    </>\n  );\n}\n\n/**\n * Wraps an individual grouped section's content with section-level behaviors\n * (displayChromeMode) when rendered inside a container.\n */\nfunction GroupedSectionContent({\n  sectionProps,\n  providesHeading,\n}: {\n  sectionProps: Pick<SectionProps, 'name' | 'children' | 'chromeMode' | 'className' | 'disabled'>;\n  providesHeading?: boolean;\n}): ReactNode {\n  return (\n    <GroupedSectionBody\n      hostKind={GroupedSectionHostKind.DISPLAY}\n      sectionProps={sectionProps}\n      providesHeading={providesHeading}\n    />\n  );\n}\n"]}

package/dist/esm/components/resources/skeleton/FieldTiles.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+/** @wildo_source:part:start saas.frontend.field-tiles facet:layer:frontend facet:family:layout facet:audience:app-developer */
+export interface FieldTilesProps {
+    /** Additional CSS classes for the grid (placement only — the tiles' look is the theme's). */
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Lays a record's FACTS out as a grid of tiles — each field's name small above its value, one tile
+ * per fact — the shape a record is read in: scanned by name, compared by value.
+ *
+ * Every `DisplayField` inside takes `DisplayChromeMode.TILE` unless its own decorator declares a
+ * chrome; a field that does keeps it and takes a whole row of the grid in that chrome (a description
+ * declaring HIDDEN reads as a line of content, a fact declaring INLINE as one "Name: value" row). The
+ * grid is `auto-fill` over a minimum tile width, so it is as many columns as the CONTAINER allows — a
+ * narrow pane gets one column, a full page four — with no breakpoint to author. Wide values (lists,
+ * objects, files, long text, a reference shown as its record's summary card) take a whole row by
+ * themselves, decided from the value's shape (`isWideDisplayValue`). An EMPTY fact
+ * drops out by default here — a tile saying "—" is clutter on a record — and the grid closes the gap;
+ * a field whose emptiness is worth seeing declares `display.hideWhenEmpty: false`, and a field the
+ * reader can edit in place keeps its empty tile so it can still be filled there. The host reaches only
+ * the fields placed IN it: a tile's own value — a list's items, an object's members — is content, and
+ * neither tiles nor hides by default.
+ *
+ * Renders a `<dl>`: the tiles are term/description pairs, so the children should be `DisplayField`s
+ * that render as tiles. Place prose, checklists and related records OUTSIDE the host.
+ *
+ * @example
+ * ```tsx
+ * display: () => (
+ *   <DisplayLayout>
+ *     <DisplayField name="description" />
+ *     <FieldTiles>
+ *       <DisplayField name="dueDate" />
+ *       <DisplayField name="assignedToUserId" />
+ *       <DisplayField name="progressPercent" />
+ *       <DisplayField name="tags" />
+ *     </FieldTiles>
+ *   </DisplayLayout>
+ * ),
+ * ```
+ */
+export declare function FieldTiles({ className, children }: FieldTilesProps): ReactNode;
+export declare namespace FieldTiles {
+    var displayName: string;
+}
+/** @wildo_source:part:end saas.frontend.field-tiles */
+//# sourceMappingURL=FieldTiles.d.ts.map

package/dist/esm/components/resources/skeleton/FieldTiles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldTiles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/FieldTiles.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,+HAA+H;AAC/H,MAAM,WAAW,eAAe;IAC9B,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,SAAS,CAoB9E;yBApBe,UAAU;;;AAuB1B,uDAAuD"}

package/dist/esm/components/resources/skeleton/FieldTiles.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DisplayChromeMode } from '@wildo-ai/zod-decorators';
+import { cn } from '../../../core/ui/cn.js';
+import { DisplayChromeProvider, useDisplayChromeContext } from '../../data-display/chromes/DisplayChromeContext.js';
+import { FieldTilesContext } from '../../data-display/chromes/field-tiles.utils.js';
+/**
+ * Lays a record's FACTS out as a grid of tiles — each field's name small above its value, one tile
+ * per fact — the shape a record is read in: scanned by name, compared by value.
+ *
+ * Every `DisplayField` inside takes `DisplayChromeMode.TILE` unless its own decorator declares a
+ * chrome; a field that does keeps it and takes a whole row of the grid in that chrome (a description
+ * declaring HIDDEN reads as a line of content, a fact declaring INLINE as one "Name: value" row). The
+ * grid is `auto-fill` over a minimum tile width, so it is as many columns as the CONTAINER allows — a
+ * narrow pane gets one column, a full page four — with no breakpoint to author. Wide values (lists,
+ * objects, files, long text, a reference shown as its record's summary card) take a whole row by
+ * themselves, decided from the value's shape (`isWideDisplayValue`). An EMPTY fact
+ * drops out by default here — a tile saying "—" is clutter on a record — and the grid closes the gap;
+ * a field whose emptiness is worth seeing declares `display.hideWhenEmpty: false`, and a field the
+ * reader can edit in place keeps its empty tile so it can still be filled there. The host reaches only
+ * the fields placed IN it: a tile's own value — a list's items, an object's members — is content, and
+ * neither tiles nor hides by default.
+ *
+ * Renders a `<dl>`: the tiles are term/description pairs, so the children should be `DisplayField`s
+ * that render as tiles. Place prose, checklists and related records OUTSIDE the host.
+ *
+ * @example
+ * ```tsx
+ * display: () => (
+ *   <DisplayLayout>
+ *     <DisplayField name="description" />
+ *     <FieldTiles>
+ *       <DisplayField name="dueDate" />
+ *       <DisplayField name="assignedToUserId" />
+ *       <DisplayField name="progressPercent" />
+ *       <DisplayField name="tags" />
+ *     </FieldTiles>
+ *   </DisplayLayout>
+ * ),
+ * ```
+ */
+export function FieldTiles({ className, children }) {
+    const { displayChromeMode } = useDisplayChromeContext();
+    return (_jsx(FieldTilesContext.Provider, { value: true, children: _jsx(DisplayChromeProvider, { displayChromeMode: displayChromeMode, sectionChromeMode: DisplayChromeMode.TILE, children: _jsx("dl", { "data-slot": "field-tiles", className: cn(
+                // `min(100%, 9rem)`: a pane narrower than one tile still gets one full-width column instead of overflowing.
+                // `empty:hidden`: when every fact is empty (each drops out), the grid takes no space either — a
+                // part with nothing in it is absent, not an empty frame.
+                'm-0 grid gap-field-sm grid-cols-[repeat(auto-fill,minmax(min(100%,9rem),1fr))] [&>[data-tile-span=full]]:col-span-full empty:hidden', className), children: children }) }) }));
+}
+FieldTiles.displayName = 'FieldTiles';
+//# sourceMappingURL=FieldTiles.js.map

package/dist/esm/components/resources/skeleton/FieldTiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldTiles.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/FieldTiles.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,iDAAiD,CAAC;AACjH,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AASjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAmB;IACjE,MAAM,EAAE,iBAAiB,EAAE,GAAG,uBAAuB,EAAE,CAAC;IACxD,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,YACrC,KAAC,qBAAqB,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,IAAI,YACpG,0BACY,aAAa,EACvB,SAAS,EAAE,EAAE;gBACX,4GAA4G;gBAC5G,gGAAgG;gBAChG,yDAAyD;gBACzD,qIAAqI,EACrI,SAAS,CACV,YAEA,QAAQ,GACN,GACiB,GACG,CAC9B,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { DisplayChromeMode } from '@wildo-ai/zod-decorators';\nimport { cn } from '../../../core/ui/cn';\nimport { DisplayChromeProvider, useDisplayChromeContext } from '../../data-display/chromes/DisplayChromeContext';\nimport { FieldTilesContext } from '../../data-display/chromes/field-tiles.utils';\n\n/** @wildo_source:part:start saas.frontend.field-tiles facet:layer:frontend facet:family:layout facet:audience:app-developer */\nexport interface FieldTilesProps {\n  /** Additional CSS classes for the grid (placement only — the tiles' look is the theme's). */\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Lays a record's FACTS out as a grid of tiles — each field's name small above its value, one tile\n * per fact — the shape a record is read in: scanned by name, compared by value.\n *\n * Every `DisplayField` inside takes `DisplayChromeMode.TILE` unless its own decorator declares a\n * chrome; a field that does keeps it and takes a whole row of the grid in that chrome (a description\n * declaring HIDDEN reads as a line of content, a fact declaring INLINE as one \"Name: value\" row). The\n * grid is `auto-fill` over a minimum tile width, so it is as many columns as the CONTAINER allows — a\n * narrow pane gets one column, a full page four — with no breakpoint to author. Wide values (lists,\n * objects, files, long text, a reference shown as its record's summary card) take a whole row by\n * themselves, decided from the value's shape (`isWideDisplayValue`). An EMPTY fact\n * drops out by default here — a tile saying \"—\" is clutter on a record — and the grid closes the gap;\n * a field whose emptiness is worth seeing declares `display.hideWhenEmpty: false`, and a field the\n * reader can edit in place keeps its empty tile so it can still be filled there. The host reaches only\n * the fields placed IN it: a tile's own value — a list's items, an object's members — is content, and\n * neither tiles nor hides by default.\n *\n * Renders a `<dl>`: the tiles are term/description pairs, so the children should be `DisplayField`s\n * that render as tiles. Place prose, checklists and related records OUTSIDE the host.\n *\n * @example\n * ```tsx\n * display: () => (\n *   <DisplayLayout>\n *     <DisplayField name=\"description\" />\n *     <FieldTiles>\n *       <DisplayField name=\"dueDate\" />\n *       <DisplayField name=\"assignedToUserId\" />\n *       <DisplayField name=\"progressPercent\" />\n *       <DisplayField name=\"tags\" />\n *     </FieldTiles>\n *   </DisplayLayout>\n * ),\n * ```\n */\nexport function FieldTiles({ className, children }: FieldTilesProps): ReactNode {\n  const { displayChromeMode } = useDisplayChromeContext();\n  return (\n    <FieldTilesContext.Provider value={true}>\n      <DisplayChromeProvider displayChromeMode={displayChromeMode} sectionChromeMode={DisplayChromeMode.TILE}>\n        <dl\n          data-slot=\"field-tiles\"\n          className={cn(\n            // `min(100%, 9rem)`: a pane narrower than one tile still gets one full-width column instead of overflowing.\n            // `empty:hidden`: when every fact is empty (each drops out), the grid takes no space either — a\n            // part with nothing in it is absent, not an empty frame.\n            'm-0 grid gap-field-sm grid-cols-[repeat(auto-fill,minmax(min(100%,9rem),1fr))] [&>[data-tile-span=full]]:col-span-full empty:hidden',\n            className,\n          )}\n        >\n          {children}\n        </dl>\n      </DisplayChromeProvider>\n    </FieldTilesContext.Provider>\n  );\n}\n\nFieldTiles.displayName = 'FieldTiles';\n/** @wildo_source:part:end saas.frontend.field-tiles */\n"]}

package/dist/esm/components/resources/skeleton/FormErrorSummarySlot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormErrorSummarySlot.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/FormErrorSummarySlot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,yBAAyB;IACxC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE,yBAAyB,GAAG,SAAS,CAUxF"}
+{"version":3,"file":"FormErrorSummarySlot.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/FormErrorSummarySlot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,yBAAyB;IACxC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE,yBAAyB,GAAG,SAAS,CAUxF"}

package/dist/esm/components/resources/skeleton/FormLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/FormLayout.tsx"],"names":[],"mappings":"AAGA,OAAc,EAA2D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAyB9E,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7C;;;;;;;;;;;;OAYG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,kBAAkB,EAAE,mBAAmB,EACvC,sBAA6B,EAC7B,kBAA8B,GAC/B,EAAE,eAAe,GAAG,SAAS,CA2F7B"}
+{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/FormLayout.tsx"],"names":[],"mappings":"AAGA,OAAc,EAA2D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AA0B9E,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7C;;;;;;;;;;;;OAYG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,kBAAkB,EAAE,mBAAmB,EACvC,sBAA6B,EAC7B,kBAA8B,GAC/B,EAAE,eAAe,GAAG,SAAS,CAiG7B"}

package/dist/esm/components/resources/skeleton/FormLayout.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { responsiveMaxWidthToCssValue } from '../../sections/surface.js';
+import { SectionLegendVoiceHost } from '../../sections/section-legend-voice.js';
 import { cn } from '../../../core/ui/cn.js';
 import { ErrorBoundary } from '../../../core/errors/ErrorBoundary.js';
 import { FieldScopeProvider } from './FieldScopeContext.js';
@@ -84,7 +85,7 @@ export function FormLayout({ className, children, contextFieldValues: _contextFi
     // `TemplatePlacedFieldsContext`). From an empty prefix: this layout resets its children's scope to "".
     useTemplatePlacedFieldsOf(children, '');
     const renderedChildren = useMemo(() => renderGroupedChildren(children, formCtx), [children, formCtx]);
-    return (_jsx(FormLayoutSlotContext.Provider, { value: slotContextValue, children: _jsx(FieldScopeProvider, { pathPrefix: "", children: _jsx("div", { className: cn('mr-auto w-full', className), style: { maxInlineSize: responsiveMaxWidthToCssValue(responsiveMaxWidth) }, "data-inline-size-tier": responsiveMaxWidth, "data-guidance-form": "", children: _jsxs(ErrorBoundary, { children: [autoSlots.errorSummary ? _jsx(FormErrorSummarySlot, { className: "mb-4" }) : null, _jsx("div", { className: "space-y-section [&>[data-chrome-mode^=settings]:has(+[data-chrome-mode^=settings])]:mb-0", children: renderedChildren }), autoSlots.submitButton ? _jsx(SubmitButton, { className: "mt-6" }) : null] }) }) }) }));
+    return (_jsx(FormLayoutSlotContext.Provider, { value: slotContextValue, children: _jsx(SectionLegendVoiceHost, { voice: undefined, children: _jsx(FieldScopeProvider, { pathPrefix: "", children: _jsx("div", { className: cn('mr-auto w-full', className), style: { maxInlineSize: responsiveMaxWidthToCssValue(responsiveMaxWidth) }, "data-inline-size-tier": responsiveMaxWidth, "data-guidance-form": "", "data-slot": "form-layout", children: _jsxs(ErrorBoundary, { children: [autoSlots.errorSummary ? _jsx(FormErrorSummarySlot, { className: "mb-4" }) : null, _jsx("div", { className: "space-y-section [&>[data-chrome-mode^=settings]:has(+[data-chrome-mode^=settings])]:mb-0", children: renderedChildren }), autoSlots.submitButton ? _jsx(SubmitButton, { className: "mt-6" }) : null] }) }) }) }) }));
 }
 /**
  * Whether a GROUPED section (grid, tabs, accordion, …) has nothing to show for this form's operation.

package/dist/esm/components/resources/skeleton/FormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/FormLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type { z } from 'zod';\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react';\nimport type { ResponsiveMaxWidth } from '@wildo-ai/presets-components-models';\nimport { responsiveMaxWidthToCssValue } from '../../sections/surface';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { ErrorBoundary } from '~wildo-frontend-lib/core/errors/ErrorBoundary';\nimport { FieldScopeProvider } from './FieldScopeContext';\nimport {\n  FormLayoutSlotContext,\n  type FormLayoutSlotType,\n} from './FormLayoutSlotContext';\nimport { FormErrorSummarySlot } from './FormErrorSummarySlot';\nimport { SubmitButton } from './SubmitButton';\nimport { useOptionalFormTemplateContext } from '../../form/automated/FormTemplateContext';\nimport { useOptionalResourceFormActions } from '../../form/automated/ResourceFormActionsContext';\nimport { ContentSectionContainer } from '../../sections/ContentSectionContainer';\nimport type { ContentSectionDescriptor } from '../../sections/ContentSectionContainer';\nimport {\n  groupSectionsByAppearance,\n  buildSectionConfigFromGroup,\n} from './section-consolidation.utils';\nimport { GroupedSectionBody, type SectionProps } from './Section';\nimport { listPlacedFieldSlots } from './SectionFieldsContext';\nimport { useTemplatePlacedFieldsOf } from '../../form/automated/TemplatePlacedFieldsContext';\nimport { AutomatedLayoutFrontendUtils } from '~wildo-frontend-lib/core/automated-layout/automated-layout.frontend.utils';\nimport { GroupedSectionHostKind } from './Section.shared';\n\nexport interface FormLayoutProps {\n  /** Additional CSS classes for the root container. */\n  className?: string;\n  /**\n   * How wide the form column lets its content grow, named in the framework's own vocabulary.\n   *\n   * Defaults to `'measure'` — the reading-measure cap (~42rem, themeable via `--measure-max-width`)\n   * that keeps a single-column form readable rather than stretched edge to edge. That default is the\n   * long-standing behaviour and is what almost every form wants.\n   *\n   * The prop exists so the tier is REACHABLE. It was previously a literal Tailwind class spelling the\n   * same value the `'measure'` tier already names, which meant a host could not select a different one\n   * — see {@link DisplayLayout}'s twin, where a composed template needed `'none'` and had no way to\n   * ask for it.\n   */\n  responsiveMaxWidth?: ResponsiveMaxWidth;\n  /**\n   * Context field values to inject into form state.\n   * Fields present here are hidden from rendering but populate\n   * the form state for validation and submission (e.g., parent IDs).\n   */\n  contextFieldValues?: Record<string, unknown>;\n  /**\n   * When `false`, suppresses automatic `<SubmitButton>` injection even if no\n   * submit slot is registered by children. The generated-template path sets\n   * this via `generateDefaultFormTemplate({ includeSubmitButton: false })`.\n   *\n   * Note: under `ResourceAutomatedForm`, suppression is automatic regardless\n   * of this prop — the host provides `ResourceFormActionsContext` and renders\n   * its own operation-aware submit row after the template, so developer-\n   * authored templates can use a bare `<FormLayout>` without ending up with\n   * two submit buttons. This prop only matters for standalone usage\n   * (direct `AutomatedForm` callers outside a resource form host).\n   * @default true\n   */\n  autoInjectSubmitButton?: boolean;\n  children?: ReactNode;\n}\n\ninterface AutoSlotsState {\n  errorSummary: boolean;\n  submitButton: boolean;\n}\n\n/**\n * Root wrapper for edit layout templates.\n *\n * Renders inside `<Form>` (RHF provider). Handles:\n * - Root `FieldScopeContext` with empty prefix\n * - Slot auto-detection: default error summary / submit when omitted (DT-6); no default submit under wizard,\n *   nor when a resource-form host owns the submit row (`ResourceFormActionsContext` present —\n *   `ResourceAutomatedForm` appends its operation-aware buttons after the template)\n * - Guidance marker for automated testing (DT-9)\n *\n * TODO(F-10): AutoFocus resolution — scan children for first focusable FormField and call focus().\n * Note: `contextFieldValues` are injected upstream by `AutomatedForm`; generated\n * templates hide those fields before rendering, while handwritten templates can\n * still opt into custom treatment when needed.\n *\n * @example\n * ```tsx\n * <FormLayout>\n *   <Section name=\"general\">\n *     <FormField name=\"title\" />\n *   </Section>\n *   <SubmitButton />\n * </FormLayout>\n * ```\n */\nexport function FormLayout({\n  className,\n  children,\n  contextFieldValues: _contextFieldValues,\n  autoInjectSubmitButton = true,\n  responsiveMaxWidth = 'measure',\n}: FormLayoutProps): ReactNode {\n  const registeredSlots = useRef(new Set<FormLayoutSlotType>());\n  const wizardRootRegistered = useRef(false);\n  const [autoSlots, setAutoSlots] = useState<AutoSlotsState>({\n    errorSummary: false,\n    submitButton: false,\n  });\n\n  // A non-null ResourceFormActionsContext means a resource-form host\n  // (ResourceAutomatedForm) renders its own operation-aware submit row after\n  // the template — auto-injecting a generic SubmitButton here would produce a\n  // second submit button. Explicit templates authored app-side use a bare\n  // <FormLayout>, so this suppression cannot be a prop on the call site.\n  const hostOwnsSubmitRow = useOptionalResourceFormActions() !== null;\n\n  const registerSlot = useCallback((slot: FormLayoutSlotType) => {\n    registeredSlots.current.add(slot);\n  }, []);\n\n  const registerWizardRoot = useCallback(() => {\n    wizardRootRegistered.current = true;\n  }, []);\n\n  const slotContextValue = useMemo(\n    () => ({ registerSlot, registerWizardRoot }),\n    [registerSlot, registerWizardRoot],\n  );\n\n  // After children mount and register their slots, detect missing ones (next frame so layout effects have run).\n  useLayoutEffect(() => {\n    const frame = requestAnimationFrame(() => {\n      const missing: AutoSlotsState = {\n        errorSummary: !registeredSlots.current.has('errorSummary'),\n        submitButton:\n          autoInjectSubmitButton &&\n          !hostOwnsSubmitRow &&\n          !wizardRootRegistered.current &&\n          !registeredSlots.current.has('submitButton'),\n      };\n      if (missing.errorSummary || missing.submitButton) {\n        setAutoSlots(missing);\n      }\n    });\n    return () => cancelAnimationFrame(frame);\n  }, [autoInjectSubmitButton, hostOwnsSubmitRow]);\n\n  const formCtx = useOptionalFormTemplateContext();\n  // Every slot among this layout's children, read from the elements: a tab's panel, a later wizard step\n  // or an unchosen variant is not mounted, so its fields cannot report themselves (see\n  // `TemplatePlacedFieldsContext`). From an empty prefix: this layout resets its children's scope to \"\".\n  useTemplatePlacedFieldsOf(children, '');\n  const renderedChildren = useMemo(\n    () => renderGroupedChildren(children, formCtx),\n    [children, formCtx],\n  );\n\n  return (\n    <FormLayoutSlotContext.Provider value={slotContextValue}>\n      <FieldScopeProvider pathPrefix=\"\">\n        {/*\n          T4c — reading-measure cap. A single-column form column caps at\n          `--measure-max-width` (~42rem) and aligns to the LEFT of the content\n          zone, so detail/settings forms stop stretching edge-to-edge while\n          staying flush with the left-aligned resource header (no centred\n          gutter). `max-w` only engages when the container is wider than the\n          measure, so a form inside a narrow dialog / panel is unaffected.\n          Retune/opt-out via the CSS var or by overriding `className`.\n        */}\n        <div\n          className={cn('mr-auto w-full', className)}\n          style={{ maxInlineSize: responsiveMaxWidthToCssValue(responsiveMaxWidth) }}\n          data-inline-size-tier={responsiveMaxWidth}\n          data-guidance-form=\"\"\n        >\n          <ErrorBoundary>\n            {autoSlots.errorSummary ? <FormErrorSummarySlot className=\"mb-4\" /> : null}\n            {/* `space-y-section` separates stacked SECTIONS with a clear gap (see\n                DisplayLayout for the rationale). Wrapped separately from the\n                error-summary / submit slots so it never compounds their own\n                margins. Bare SETTINGS_ROW field rows are self-delimiting list\n                items (`py-card-sm` + `border-b`), so consecutive rows stack\n                FLUSH — same pairwise rule as DisplayLayout (see its comment for\n                why the attribute match must be `^=settings`, never the\n                underscore-carrying `=settings_row`). */}\n            <div className=\"space-y-section [&>[data-chrome-mode^=settings]:has(+[data-chrome-mode^=settings])]:mb-0\">{renderedChildren}</div>\n            {autoSlots.submitButton ? <SubmitButton className=\"mt-6\" /> : null}\n          </ErrorBoundary>\n        </div>\n      </FieldScopeProvider>\n    </FormLayoutSlotContext.Provider>\n  );\n}\n\n/**\n * Whether a GROUPED section (grid, tabs, accordion, …) has nothing to show for this form's operation.\n *\n * One template serves several operations, and a `FormField` whose field the operation's schema lacks\n * renders nothing. A solo `Section` hides itself from what its fields report once mounted; a grouped\n * section cannot, because its container draws its title and panel and a tab's panel is not even mounted\n * until it is chosen. So the host decides from the section's elements: when they are only field slots\n * (`listPlacedFieldSlots`) and none of their paths resolves in the form's schema, the section is dropped.\n *\n * This reads the SCHEMA, not visibility: a field hidden by a condition is still in the schema, so its\n * section stays. Dropping a section there would take it out of its container on a value change.\n */\nfunction groupedSectionShowsNoField(children: ReactNode, schema: z.ZodTypeAny | undefined): boolean {\n  if (!schema) return false;\n  const placed = listPlacedFieldSlots(children);\n  return placed !== null\n    && placed.length > 0\n    && placed.every((slot) => !slot.hasOwnSchema && AutomatedLayoutFrontendUtils.resolveFieldSchemaPath(schema, slot.path) === undefined);\n}\n\n/**\n * Introspects children for `<Section>` elements with container-mode `appearance`.\n * Groups sections sharing the same container mode into a `ContentSectionContainer`.\n * Solo-mode sections and non-Section children render in place.\n */\nfunction renderGroupedChildren(\n  children: ReactNode,\n  formCtx: ReturnType<typeof useOptionalFormTemplateContext>,\n): ReactNode {\n  const grouped = groupSectionsByAppearance(children);\n\n  return (\n    <>\n      {grouped.items.map((item, idx) => {\n        if (item.type === 'node') {\n          return <React.Fragment key={idx}>{item.node}</React.Fragment>;\n        }\n\n        // A grouped section none of whose fields this operation has is dropped from its container, and a\n        // container left with no section renders nothing (see `groupedSectionShowsNoField`).\n        const shownSections = item.group.sections.filter((el) => !groupedSectionShowsNoField(el.props.children, formCtx?.schema));\n        if (shownSections.length === 0) return null;\n        const group = { ...item.group, sections: shownSections };\n        const config = buildSectionConfigFromGroup(group);\n        const sectionLabels = formCtx?.sectionLabels ?? {};\n        const sectionDescriptions = formCtx?.sectionDescriptions ?? {};\n\n        const contentSections: ContentSectionDescriptor[] = group.sections.map((el) => ({\n          id: el.props.name,\n          title: sectionLabels[el.props.name],\n          description: sectionDescriptions[el.props.name],\n          content: (\n            <GroupedSectionContent\n              sectionProps={el.props}\n              providesHeading={!!sectionLabels[el.props.name]}\n            />\n          ),\n        }));\n\n        return (\n          <ContentSectionContainer\n            key={`group-${group.mode}-${idx}`}\n            sections={contentSections}\n            config={config}\n          />\n        );\n      })}\n    </>\n  );\n}\n\n/**\n * Wraps an individual grouped section's content with section-level behaviors\n * (chromeMode, saveable) when rendered inside a container.\n */\nfunction GroupedSectionContent({\n  sectionProps,\n  providesHeading,\n}: {\n  sectionProps: Pick<SectionProps, 'name' | 'children' | 'chromeMode' | 'saveable' | 'className' | 'disabled'>;\n  providesHeading?: boolean;\n}): ReactNode {\n  return (\n    <GroupedSectionBody\n      hostKind={GroupedSectionHostKind.FORM}\n      sectionProps={sectionProps}\n      providesHeading={providesHeading}\n    />\n  );\n}\n"]}
+{"version":3,"file":"FormLayout.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/FormLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type { z } from 'zod';\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react';\nimport type { ResponsiveMaxWidth } from '@wildo-ai/presets-components-models';\nimport { responsiveMaxWidthToCssValue } from '../../sections/surface';\nimport { SectionLegendVoiceHost } from '../../sections/section-legend-voice';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { ErrorBoundary } from '~wildo-frontend-lib/core/errors/ErrorBoundary';\nimport { FieldScopeProvider } from './FieldScopeContext';\nimport {\n  FormLayoutSlotContext,\n  type FormLayoutSlotType,\n} from './FormLayoutSlotContext';\nimport { FormErrorSummarySlot } from './FormErrorSummarySlot';\nimport { SubmitButton } from './SubmitButton';\nimport { useOptionalFormTemplateContext } from '../../form/automated/FormTemplateContext';\nimport { useOptionalResourceFormActions } from '../../form/automated/ResourceFormActionsContext';\nimport { ContentSectionContainer } from '../../sections/ContentSectionContainer';\nimport type { ContentSectionDescriptor } from '../../sections/ContentSectionContainer';\nimport {\n  groupSectionsByAppearance,\n  buildSectionConfigFromGroup,\n} from './section-consolidation.utils';\nimport { GroupedSectionBody, type SectionProps } from './Section';\nimport { listPlacedFieldSlots } from './SectionFieldsContext';\nimport { useTemplatePlacedFieldsOf } from '../../form/automated/TemplatePlacedFieldsContext';\nimport { AutomatedLayoutFrontendUtils } from '~wildo-frontend-lib/core/automated-layout/automated-layout.frontend.utils';\nimport { GroupedSectionHostKind } from './Section.shared';\n\nexport interface FormLayoutProps {\n  /** Additional CSS classes for the root container. */\n  className?: string;\n  /**\n   * How wide the form column lets its content grow, named in the framework's own vocabulary.\n   *\n   * Defaults to `'measure'` — the reading-measure cap (~42rem, themeable via `--measure-max-width`)\n   * that keeps a single-column form readable rather than stretched edge to edge. That default is the\n   * long-standing behaviour and is what almost every form wants.\n   *\n   * The prop exists so the tier is REACHABLE. It was previously a literal Tailwind class spelling the\n   * same value the `'measure'` tier already names, which meant a host could not select a different one\n   * — see {@link DisplayLayout}'s twin, where a composed template needed `'none'` and had no way to\n   * ask for it.\n   */\n  responsiveMaxWidth?: ResponsiveMaxWidth;\n  /**\n   * Context field values to inject into form state.\n   * Fields present here are hidden from rendering but populate\n   * the form state for validation and submission (e.g., parent IDs).\n   */\n  contextFieldValues?: Record<string, unknown>;\n  /**\n   * When `false`, suppresses automatic `<SubmitButton>` injection even if no\n   * submit slot is registered by children. The generated-template path sets\n   * this via `generateDefaultFormTemplate({ includeSubmitButton: false })`.\n   *\n   * Note: under `ResourceAutomatedForm`, suppression is automatic regardless\n   * of this prop — the host provides `ResourceFormActionsContext` and renders\n   * its own operation-aware submit row after the template, so developer-\n   * authored templates can use a bare `<FormLayout>` without ending up with\n   * two submit buttons. This prop only matters for standalone usage\n   * (direct `AutomatedForm` callers outside a resource form host).\n   * @default true\n   */\n  autoInjectSubmitButton?: boolean;\n  children?: ReactNode;\n}\n\ninterface AutoSlotsState {\n  errorSummary: boolean;\n  submitButton: boolean;\n}\n\n/**\n * Root wrapper for edit layout templates.\n *\n * Renders inside `<Form>` (RHF provider). Handles:\n * - Root `FieldScopeContext` with empty prefix\n * - Slot auto-detection: default error summary / submit when omitted (DT-6); no default submit under wizard,\n *   nor when a resource-form host owns the submit row (`ResourceFormActionsContext` present —\n *   `ResourceAutomatedForm` appends its operation-aware buttons after the template)\n * - Guidance marker for automated testing (DT-9)\n *\n * TODO(F-10): AutoFocus resolution — scan children for first focusable FormField and call focus().\n * Note: `contextFieldValues` are injected upstream by `AutomatedForm`; generated\n * templates hide those fields before rendering, while handwritten templates can\n * still opt into custom treatment when needed.\n *\n * @example\n * ```tsx\n * <FormLayout>\n *   <Section name=\"general\">\n *     <FormField name=\"title\" />\n *   </Section>\n *   <SubmitButton />\n * </FormLayout>\n * ```\n */\nexport function FormLayout({\n  className,\n  children,\n  contextFieldValues: _contextFieldValues,\n  autoInjectSubmitButton = true,\n  responsiveMaxWidth = 'measure',\n}: FormLayoutProps): ReactNode {\n  const registeredSlots = useRef(new Set<FormLayoutSlotType>());\n  const wizardRootRegistered = useRef(false);\n  const [autoSlots, setAutoSlots] = useState<AutoSlotsState>({\n    errorSummary: false,\n    submitButton: false,\n  });\n\n  // A non-null ResourceFormActionsContext means a resource-form host\n  // (ResourceAutomatedForm) renders its own operation-aware submit row after\n  // the template — auto-injecting a generic SubmitButton here would produce a\n  // second submit button. Explicit templates authored app-side use a bare\n  // <FormLayout>, so this suppression cannot be a prop on the call site.\n  const hostOwnsSubmitRow = useOptionalResourceFormActions() !== null;\n\n  const registerSlot = useCallback((slot: FormLayoutSlotType) => {\n    registeredSlots.current.add(slot);\n  }, []);\n\n  const registerWizardRoot = useCallback(() => {\n    wizardRootRegistered.current = true;\n  }, []);\n\n  const slotContextValue = useMemo(\n    () => ({ registerSlot, registerWizardRoot }),\n    [registerSlot, registerWizardRoot],\n  );\n\n  // After children mount and register their slots, detect missing ones (next frame so layout effects have run).\n  useLayoutEffect(() => {\n    const frame = requestAnimationFrame(() => {\n      const missing: AutoSlotsState = {\n        errorSummary: !registeredSlots.current.has('errorSummary'),\n        submitButton:\n          autoInjectSubmitButton &&\n          !hostOwnsSubmitRow &&\n          !wizardRootRegistered.current &&\n          !registeredSlots.current.has('submitButton'),\n      };\n      if (missing.errorSummary || missing.submitButton) {\n        setAutoSlots(missing);\n      }\n    });\n    return () => cancelAnimationFrame(frame);\n  }, [autoInjectSubmitButton, hostOwnsSubmitRow]);\n\n  const formCtx = useOptionalFormTemplateContext();\n  // Every slot among this layout's children, read from the elements: a tab's panel, a later wizard step\n  // or an unchosen variant is not mounted, so its fields cannot report themselves (see\n  // `TemplatePlacedFieldsContext`). From an empty prefix: this layout resets its children's scope to \"\".\n  useTemplatePlacedFieldsOf(children, '');\n  const renderedChildren = useMemo(\n    () => renderGroupedChildren(children, formCtx),\n    [children, formCtx],\n  );\n\n  return (\n    <FormLayoutSlotContext.Provider value={slotContextValue}>\n      {/* A form keeps the heading voice for its sections even inside a read body (an inline editor) — see `SectionLegendVoiceHost`. */}\n      <SectionLegendVoiceHost voice={undefined}>\n      <FieldScopeProvider pathPrefix=\"\">\n        {/*\n          T4c — reading-measure cap. A single-column form column caps at\n          `--measure-max-width` (~42rem) and aligns to the LEFT of the content\n          zone, so detail/settings forms stop stretching edge-to-edge while\n          staying flush with the left-aligned resource header (no centred\n          gutter). `max-w` only engages when the container is wider than the\n          measure, so a form inside a narrow dialog / panel is unaffected.\n          Retune/opt-out via the CSS var or by overriding `className`.\n        */}\n        <div\n          className={cn('mr-auto w-full', className)}\n          style={{ maxInlineSize: responsiveMaxWidthToCssValue(responsiveMaxWidth) }}\n          data-inline-size-tier={responsiveMaxWidth}\n          data-guidance-form=\"\"\n          // A RESOURCE form, as opposed to any other form on the page (a listing's search box, a chat\n          // composer): what automation waits on when it opens a record for editing.\n          data-slot=\"form-layout\"\n        >\n          <ErrorBoundary>\n            {autoSlots.errorSummary ? <FormErrorSummarySlot className=\"mb-4\" /> : null}\n            {/* `space-y-section` separates stacked SECTIONS with a clear gap (see\n                DisplayLayout for the rationale). Wrapped separately from the\n                error-summary / submit slots so it never compounds their own\n                margins. Bare SETTINGS_ROW field rows are self-delimiting list\n                items (`py-card-sm` + `border-b`), so consecutive rows stack\n                FLUSH — same pairwise rule as DisplayLayout (see its comment for\n                why the attribute match must be `^=settings`, never the\n                underscore-carrying `=settings_row`). */}\n            <div className=\"space-y-section [&>[data-chrome-mode^=settings]:has(+[data-chrome-mode^=settings])]:mb-0\">{renderedChildren}</div>\n            {autoSlots.submitButton ? <SubmitButton className=\"mt-6\" /> : null}\n          </ErrorBoundary>\n        </div>\n      </FieldScopeProvider>\n      </SectionLegendVoiceHost>\n    </FormLayoutSlotContext.Provider>\n  );\n}\n\n/**\n * Whether a GROUPED section (grid, tabs, accordion, …) has nothing to show for this form's operation.\n *\n * One template serves several operations, and a `FormField` whose field the operation's schema lacks\n * renders nothing. A solo `Section` hides itself from what its fields report once mounted; a grouped\n * section cannot, because its container draws its title and panel and a tab's panel is not even mounted\n * until it is chosen. So the host decides from the section's elements: when they are only field slots\n * (`listPlacedFieldSlots`) and none of their paths resolves in the form's schema, the section is dropped.\n *\n * This reads the SCHEMA, not visibility: a field hidden by a condition is still in the schema, so its\n * section stays. Dropping a section there would take it out of its container on a value change.\n */\nfunction groupedSectionShowsNoField(children: ReactNode, schema: z.ZodTypeAny | undefined): boolean {\n  if (!schema) return false;\n  const placed = listPlacedFieldSlots(children);\n  return placed !== null\n    && placed.length > 0\n    && placed.every((slot) => !slot.hasOwnSchema && AutomatedLayoutFrontendUtils.resolveFieldSchemaPath(schema, slot.path) === undefined);\n}\n\n/**\n * Introspects children for `<Section>` elements with container-mode `appearance`.\n * Groups sections sharing the same container mode into a `ContentSectionContainer`.\n * Solo-mode sections and non-Section children render in place.\n */\nfunction renderGroupedChildren(\n  children: ReactNode,\n  formCtx: ReturnType<typeof useOptionalFormTemplateContext>,\n): ReactNode {\n  const grouped = groupSectionsByAppearance(children);\n\n  return (\n    <>\n      {grouped.items.map((item, idx) => {\n        if (item.type === 'node') {\n          return <React.Fragment key={idx}>{item.node}</React.Fragment>;\n        }\n\n        // A grouped section none of whose fields this operation has is dropped from its container, and a\n        // container left with no section renders nothing (see `groupedSectionShowsNoField`).\n        const shownSections = item.group.sections.filter((el) => !groupedSectionShowsNoField(el.props.children, formCtx?.schema));\n        if (shownSections.length === 0) return null;\n        const group = { ...item.group, sections: shownSections };\n        const config = buildSectionConfigFromGroup(group);\n        const sectionLabels = formCtx?.sectionLabels ?? {};\n        const sectionDescriptions = formCtx?.sectionDescriptions ?? {};\n\n        const contentSections: ContentSectionDescriptor[] = group.sections.map((el) => ({\n          id: el.props.name,\n          title: sectionLabels[el.props.name],\n          description: sectionDescriptions[el.props.name],\n          content: (\n            <GroupedSectionContent\n              sectionProps={el.props}\n              providesHeading={!!sectionLabels[el.props.name]}\n            />\n          ),\n        }));\n\n        return (\n          <ContentSectionContainer\n            key={`group-${group.mode}-${idx}`}\n            sections={contentSections}\n            config={config}\n          />\n        );\n      })}\n    </>\n  );\n}\n\n/**\n * Wraps an individual grouped section's content with section-level behaviors\n * (chromeMode, saveable) when rendered inside a container.\n */\nfunction GroupedSectionContent({\n  sectionProps,\n  providesHeading,\n}: {\n  sectionProps: Pick<SectionProps, 'name' | 'children' | 'chromeMode' | 'saveable' | 'className' | 'disabled'>;\n  providesHeading?: boolean;\n}): ReactNode {\n  return (\n    <GroupedSectionBody\n      hostKind={GroupedSectionHostKind.FORM}\n      sectionProps={sectionProps}\n      providesHeading={providesHeading}\n    />\n  );\n}\n"]}

package/dist/esm/components/resources/skeleton/Group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/Group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,UAAU;IACzB;;;;;OAKG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,UAAU,GAAG,SAAS,CA0B1E;yBA1Be,KAAK"}
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/Group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,UAAU;IACzB;;;;;OAKG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,UAAU,GAAG,SAAS,CAiC1E;yBAjCe,KAAK"}

package/dist/esm/components/resources/skeleton/Group.js

@@ -2,7 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useOptionalFormTemplateContext } from '../../form/automated/FormTemplateContext.js';
 import { useOptionalDisplayTemplateContext } from '../../data-display/DisplayTemplateContext.js';
-import { Subheading } from '../../typography/heading.js';
+import { TypographyVariant, UIBehavior } from '@wildo-ai/presets-components-models';
+import { cn } from '../../../core/ui/cn.js';
+import { useUI } from '../../../core/ui/useUI.js';
 /**
  * Visual grouping for form and display templates.
  *
@@ -26,9 +28,10 @@ import { Subheading } from '../../typography/heading.js';
 export function Group({ name, className, children }) {
     const formCtx = useOptionalFormTemplateContext();
     const displayCtx = useOptionalDisplayTemplateContext();
+    const { getRecipe } = useUI();
     const title = formCtx?.groupLabels?.[name] ??
         displayCtx?.groupLabels?.[name];
-    return (_jsxs("div", { className: className, "data-guidance-group": name, children: [title && _jsx(Subheading, { level: 3, className: "col-span-full mb-element", children: title }), children] }));
+    return (_jsxs("div", { className: className, "data-guidance-group": name, children: [title && _jsx("h3", { className: cn('col-span-full mb-element', getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.EYEBROW).base), children: title }), children] }));
 }
 Group.displayName = 'Group';
 //# sourceMappingURL=Group.js.map

package/dist/esm/components/resources/skeleton/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/Group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,8BAA8B,EAAE,MAAM,0CAA0C,CAAC;AAC1F,OAAO,EAAE,iCAAiC,EAAE,MAAM,2CAA2C,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAetD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAc;IAC7D,MAAM,OAAO,GAAG,8BAA8B,EAAE,CAAC;IACjD,MAAM,UAAU,GAAG,iCAAiC,EAAE,CAAC;IAEvD,MAAM,KAAK,GACT,OAAO,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC;QAC5B,UAAU,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC;IAElC,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,yBAAuB,IAAI,aAajD,KAAK,IAAI,KAAC,UAAU,IAAC,KAAK,EAAE,CAAC,EAAE,SAAS,EAAC,0BAA0B,YAAE,KAAK,GAAc,EACxF,QAAQ,IACL,CACP,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { useOptionalFormTemplateContext } from '../../form/automated/FormTemplateContext';\nimport { useOptionalDisplayTemplateContext } from '../../data-display/DisplayTemplateContext';\nimport { Subheading } from '../../typography/heading';\n\nexport interface GroupProps {\n  /**\n   * Structural ref — maps to i18n keys for title:\n   * - `resources.{type}.groups.{name}.title`\n   *\n   * Must match an entry in `layout.refs.groups`.\n   */\n  name: string;\n  /** Additional CSS classes for the group container. */\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Visual grouping for form and display templates.\n *\n * Groups fields with an optional i18n title resolved from:\n *   formCtx.groupLabels → displayCtx.groupLabels\n *\n * Groups and sections are distinct concepts with separate i18n namespaces\n * (`resources.{type}.groups.{ref}.title` vs `resources.{type}.sections.{ref}.title`).\n * No cross-pollination between the two.\n *\n * @example\n * ```tsx\n * <DisplayLayout>\n *   <Group name=\"contact\" className=\"hidden md:block\">\n *     <DisplayField name=\"email\" />\n *     <DisplayField name=\"phone\" />\n *   </Group>\n * </DisplayLayout>\n * ```\n */\nexport function Group({ name, className, children }: GroupProps): ReactNode {\n  const formCtx = useOptionalFormTemplateContext();\n  const displayCtx = useOptionalDisplayTemplateContext();\n\n  const title =\n    formCtx?.groupLabels?.[name] ??\n    displayCtx?.groupLabels?.[name];\n\n  return (\n    <div className={className} data-guidance-group={name}>\n      {/*\n        * `col-span-full` because `className` is where callers put the group's LAYOUT, and the heading\n        * shares that element with the fields. Under `grid grid-cols-2` the heading took the first\n        * cell and pushed every field one cell over — measured on the Wonder Todos edit template,\n        * where \"Workflow\" sat BESIDE Status instead of above it, and each field after it landed in\n        * the other column from the one its neighbours implied. Spanning the full row gives the\n        * heading its own line in any grid and does nothing at all in a flex or block layout.\n        *\n        * Not solved by moving `className` onto an inner wrapper around the fields: the documented\n        * use `className=\"hidden md:block\"` means \"hide this GROUP\", heading included, and that\n        * would start hiding the fields while leaving an orphaned heading on screen.\n        */}\n      {title && <Subheading level={3} className=\"col-span-full mb-element\">{title}</Subheading>}\n      {children}\n    </div>\n  );\n}\n\nGroup.displayName = 'Group';\n"]}
+{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/Group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,8BAA8B,EAAE,MAAM,0CAA0C,CAAC;AAC1F,OAAO,EAAE,iCAAiC,EAAE,MAAM,2CAA2C,CAAC;AAC9F,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAe1D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAc;IAC7D,MAAM,OAAO,GAAG,8BAA8B,EAAE,CAAC;IACjD,MAAM,UAAU,GAAG,iCAAiC,EAAE,CAAC;IACvD,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAC;IAE9B,MAAM,KAAK,GACT,OAAO,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC;QAC5B,UAAU,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC;IAElC,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,yBAAuB,IAAI,aAmBjD,KAAK,IAAI,aAAI,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,YAAG,KAAK,GAAM,EACtI,QAAQ,IACL,CACP,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { useOptionalFormTemplateContext } from '../../form/automated/FormTemplateContext';\nimport { useOptionalDisplayTemplateContext } from '../../data-display/DisplayTemplateContext';\nimport { TypographyVariant, UIBehavior } from '@wildo-ai/presets-components-models';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { useUI } from '~wildo-frontend-lib/core/ui/useUI';\n\nexport interface GroupProps {\n  /**\n   * Structural ref — maps to i18n keys for title:\n   * - `resources.{type}.groups.{name}.title`\n   *\n   * Must match an entry in `layout.refs.groups`.\n   */\n  name: string;\n  /** Additional CSS classes for the group container. */\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Visual grouping for form and display templates.\n *\n * Groups fields with an optional i18n title resolved from:\n *   formCtx.groupLabels → displayCtx.groupLabels\n *\n * Groups and sections are distinct concepts with separate i18n namespaces\n * (`resources.{type}.groups.{ref}.title` vs `resources.{type}.sections.{ref}.title`).\n * No cross-pollination between the two.\n *\n * @example\n * ```tsx\n * <DisplayLayout>\n *   <Group name=\"contact\" className=\"hidden md:block\">\n *     <DisplayField name=\"email\" />\n *     <DisplayField name=\"phone\" />\n *   </Group>\n * </DisplayLayout>\n * ```\n */\nexport function Group({ name, className, children }: GroupProps): ReactNode {\n  const formCtx = useOptionalFormTemplateContext();\n  const displayCtx = useOptionalDisplayTemplateContext();\n  const { getRecipe } = useUI();\n\n  const title =\n    formCtx?.groupLabels?.[name] ??\n    displayCtx?.groupLabels?.[name];\n\n  return (\n    <div className={className} data-guidance-group={name}>\n      {/*\n        * `col-span-full` because `className` is where callers put the group's LAYOUT, and the heading\n        * shares that element with the fields. Under `grid grid-cols-2` the heading took the first\n        * cell and pushed every field one cell over — measured on the Wonder Todos edit template,\n        * where \"Workflow\" sat BESIDE Status instead of above it, and each field after it landed in\n        * the other column from the one its neighbours implied. Spanning the full row gives the\n        * heading its own line in any grid and does nothing at all in a flex or block layout.\n        *\n        * Not solved by moving `className` onto an inner wrapper around the fields: the documented\n        * use `className=\"hidden md:block\"` means \"hide this GROUP\", heading included, and that\n        * would start hiding the fields while leaving an orphaned heading on screen.\n        */}\n      {/*\n        * The EYEBROW voice, in forms and read bodies alike: a group names a handful of fields that belong\n        * together (\"Workflow\"), which is a label for the cluster, not a heading that orders the page. As a\n        * `Subheading` it was 16px/500 in the foreground, as loud as the inputs it introduced (measured on the\n        * Wonder Todos todo edit form, 2026-09-30). Still a real `h3` for the document outline.\n        */}\n      {title && <h3 className={cn('col-span-full mb-element', getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.EYEBROW).base)}>{title}</h3>}\n      {children}\n    </div>\n  );\n}\n\nGroup.displayName = 'Group';\n"]}

package/dist/esm/components/resources/skeleton/ResourceHeaderTitle.d.ts

@@ -21,11 +21,21 @@
  *
  * ## Contract
  *
- * The header cedes the middle region to the template the moment `layout.header`
+ * The header cedes the record's identity to the template the moment `layout.header`
  * exists, so a template that never mounts `<ResourceHeaderTitle />` renders a
  * page with NO record name. That is loud in development (see the diagnostic in
  * `ResourceLayout_Header`) rather than silent.
  *
+ * ## Where the title lands (2026-09-30)
+ *
+ * The header is three lines: a bar (back, breadcrumb, a pane's own controls), the TITLE LINE (the
+ * name and the record's actions), and the FACTS line (the rest of the template: status, priority,
+ * the parent chip). A template places `<ResourceHeaderTitle />` among its facts as it always did; the
+ * header renders the title on the title line and the rest of the template on the facts line. So the
+ * name always sits beside the actions it is the subject of, and the facts never push the actions off
+ * the name's line, which is what a single wrapping row did: measured on Wonder Todos, a todo in the
+ * split pane had its title 41px above its own back arrow and actions.
+ *
  * Renders nothing when the host resolved no label (a surface that shows a
  * generic operation title rather than one record's name) — the presence of a
  * label is the single data-driven signal that there is a title to place.
@@ -69,6 +79,18 @@ export interface ResourceHeaderContextValue {
      * `h2` beneath the host's heading instead of a second `h1` — the same rule the default header applies.
      */
     hostProvidesHeading?: boolean;
+    /**
+     * The header's TITLE LINE, when the header has one: `<ResourceHeaderTitle />` renders the name THERE,
+     * beside the record's actions, instead of in the template's own flow (the facts line). `undefined`
+     * means the template's own flow (a template previewed outside a header); `null` means the line is
+     * not attached yet — the title then renders nothing for the one layout pass it takes to attach.
+     */
+    titleTarget?: HTMLElement | null;
+    /**
+     * The header's LEADING slot on the title line, just before the name: `<ResourceHeaderLeading>` renders
+     * there. Same `undefined` / `null` reading as {@link titleTarget}.
+     */
+    leadingTarget?: HTMLElement | null;
 }
 export interface ResourceHeaderContextProviderProps {
     value: ResourceHeaderContextValue;
@@ -83,26 +105,67 @@ export declare function ResourceHeaderContextProvider({ value, children, }: Reso
 export declare function useOptionalResourceHeaderContext(): ResourceHeaderContextValue | null;
 /** @wildo_source:part:start saas.frontend.resource-header-title facet:layer:frontend facet:family:resource-ui */
 export interface ResourceHeaderTitleProps {
-    /** Extra classes merged over the default page-title styling. */
+    /** Extra classes merged over the theme's resource-title typography. */
     className?: string;
 }
 /**
- * The record's name, rendered with the page-header typography the default
- * (template-less) header uses — so authoring a header template is visually
- * neutral for the title itself and only adds what the template places around it.
+ * The name a resource page is about, set in the theme's `TypographyVariant.RESOURCE_TITLE` voice —
+ * quieter than a document heading, because it shares its line with the record's actions. Used by the
+ * header's default title and by `<ResourceHeaderTitle />`, so authoring a header template never
+ * changes how the title looks.
  *
- * ## It is an `h1`, and the level is not cosmetic
+ * ## It is a real heading, and the level is not cosmetic
  *
- * This IS the page's title — the record's name on a record page, the collection's on a listing — and
- * there is exactly one per surface, so it owns the top of the document outline. It was an `h2` until
- * 2026-09-09, which left generated screens with NO level-one heading at all: the first accessibility
- * audit ever run against a live stack reported `page-has-heading-one` on the collection listing,
- * where this element was the only heading on the page (#533).
+ * `h1` on a page: this IS the page's title — the record's name on a record page, the collection's on a
+ * listing — and there is exactly one, so it owns the top of the document outline (an `h2` there once
+ * left generated screens with no level-one heading at all, #533). `h2` under a host section that owns
+ * the heading. The level is structure; the recipe is appearance, and the two are decoupled.
+ */
+export declare function ResourceHeaderTitleHeading({ title, hostProvidesHeading, className, }: {
+    title: string;
+    hostProvidesHeading?: boolean;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * The line a resource title holds while the name is on its way: one skeleton exactly one line box of
+ * the theme's `RESOURCE_TITLE` voice tall. It is set in that voice and sized in `lh`, so it matches the
+ * real title's line in every theme (text-lg by default, text-xl in cozy and editorial, text-base in
+ * dense) and the name's arrival moves nothing beneath it. A fixed height could match only one theme.
  *
- * The classes are unchanged, so nothing moves visually — `text-xl` still sets the size. A heading
- * level is the document's structure, not its appearance, and the two are deliberately decoupled here
- * exactly as the design system does elsewhere.
+ * For a custom header preset: render it where the title will land while the name is on its way.
+ * `<ResourceHeaderTitle />` already uses it, so a header TEMPLATE never needs to.
+ */
+export declare function ResourceHeaderTitlePlaceholder({ className }: {
+    className?: string;
+}): React.JSX.Element;
+/**
+ * The record's name, placed by an authored `layout.header` template. Inside a resource header it
+ * renders on the header's title line, beside the record's actions (see "Where the title lands"
+ * above); the rest of the template stays on the facts line below.
  */
 export declare function ResourceHeaderTitle({ className }: ResourceHeaderTitleProps): React.JSX.Element | null;
+/**
+ * Something that belongs BEFORE the record's name on the title line — an accent swatch, a family glyph —
+ * placed by an authored `layout.header` template:
+ *
+ * ```tsx
+ * header: () => (
+ *   <div className="flex min-w-0 flex-wrap items-center gap-field">
+ *     <ResourceHeaderLeading><span className="size-3 rounded-full" style={{ background: color }} /></ResourceHeaderLeading>
+ *     <ResourceHeaderTitle />
+ *     <DisplayField name="status" hideLabel hideDescription className="w-auto" />
+ *   </div>
+ * ),
+ * ```
+ *
+ * The header lifts the title onto its title line and leaves the rest of the template on the facts line
+ * below, so an element a template puts before the title stays with the facts unless it says it leads the
+ * name. That is this: inside a header it renders just before the name; outside one (a template previewed
+ * in isolation) it renders where it is written. A resource whose glyph replaces the resource icon
+ * (`HeaderIconPlacement.TEMPLATE_OWNED`) places it here, so the title line keeps a glyph.
+ */
+export declare function ResourceHeaderLeading({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element | null;
 /** @wildo_source:part:end saas.frontend.resource-header-title */
 //# sourceMappingURL=ResourceHeaderTitle.d.ts.map

package/dist/esm/components/resources/skeleton/ResourceHeaderTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceHeaderTitle.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/ResourceHeaderTitle.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAC;AASzD,MAAM,WAAW,0BAA0B;IACzC,iEAAiE;IACjE,YAAY,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE;QAAE,YAAY,EAAE,OAAO,CAAA;KAAE,CAAC;IAE9C;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAID,MAAM,WAAW,kCAAkC;IACjD,KAAK,EAAE,0BAA0B,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,8EAA8E;AAC9E,wBAAgB,6BAA6B,CAAC,EAC5C,KAAK,EACL,QAAQ,GACT,EAAE,kCAAkC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAExD;AAED;;;GAGG;AACH,wBAAgB,gCAAgC,IAAI,0BAA0B,GAAG,IAAI,CAEpF;AAMD,iHAAiH;AACjH,MAAM,WAAW,wBAAwB;IACvC,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE,wBAAwB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAgCrG;AACD,iEAAiE"}
+{"version":3,"file":"ResourceHeaderTitle.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/ResourceHeaderTitle.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAC;AAazD,MAAM,WAAW,0BAA0B;IACzC,iEAAiE;IACjE,YAAY,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE;QAAE,YAAY,EAAE,OAAO,CAAA;KAAE,CAAC;IAE9C;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACpC;AAID,MAAM,WAAW,kCAAkC;IACjD,KAAK,EAAE,0BAA0B,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,8EAA8E;AAC9E,wBAAgB,6BAA6B,CAAC,EAC5C,KAAK,EACL,QAAQ,GACT,EAAE,kCAAkC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAExD;AAED;;;GAGG;AACH,wBAAgB,gCAAgC,IAAI,0BAA0B,GAAG,IAAI,CAEpF;AAMD,iHAAiH;AACjH,MAAM,WAAW,wBAAwB;IACvC,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,KAAK,EACL,mBAAmB,EACnB,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAMpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,8BAA8B,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAMvG;AAeD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE,wBAAwB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAsBrG;AACD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAM3G;AACD,iEAAiE"}