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

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"}

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

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * ResourceHeaderTitle — the record's page TITLE as a first-class, composable
  * element of an authored `layout.header` template.
@@ -23,18 +23,32 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * ## 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.
  */
 import { createContext, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { TypographyVariant, UIBehavior } from '@wildo-ai/presets-components-models';
 import { Skeleton } from '../../../components/feedback/skeleton.js';
 import { cn } from '../../../core/ui/cn.js';
+import { UIContext } from '../../../core/ui/UIContext.js';
+import { defaultTheme } from '../../../core/ui/themes/default.theme.js';
 const ResourceHeaderContext = createContext(null);
 /** Provides the resolved record title to an authored header template tree. */
 export function ResourceHeaderContextProvider({ value, children, }) {
@@ -48,21 +62,53 @@ export function useOptionalResourceHeaderContext() {
     return useContext(ResourceHeaderContext);
 }
 /**
- * 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 function ResourceHeaderTitleHeading({ title, hostProvidesHeading, className, }) {
+    // `min-w-0` + truncate so a long record name shrinks rather than pushing the actions off its line.
+    const classes = cn('min-w-0 truncate', useResourceTitleVoice(), className);
+    return hostProvidesHeading
+        ? _jsx("h2", { className: classes, children: title })
+        : _jsx("h1", { className: classes, children: title });
+}
+/**
+ * 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 function ResourceHeaderTitlePlaceholder({ className }) {
+    return (_jsx("div", { className: cn('min-w-0', useResourceTitleVoice(), className), "aria-hidden": "true", "data-resource-header-title-pending": "true", children: _jsx(Skeleton, { className: "h-[1lh] w-48 max-w-full" }) }));
+}
+/**
+ * The theme's resource-title typography classes. Read defensively: a header template can be previewed
+ * outside the app's `UIProvider`, and a title must not throw there. Without a theme it takes the default
+ * theme's voice.
+ */
+function useResourceTitleVoice() {
+    const ui = useContext(UIContext);
+    const recipe = ui
+        ? ui.getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.RESOURCE_TITLE)
+        : defaultTheme.typography?.[TypographyVariant.RESOURCE_TITLE];
+    return recipe?.base;
+}
+/**
+ * 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 function ResourceHeaderTitle({ className }) {
     const header = useOptionalResourceHeaderContext();
@@ -72,19 +118,46 @@ export function ResourceHeaderTitle({ className }) {
     if (header?.titleMountTracker)
         header.titleMountTracker.titleMounted = true;
     const title = header?.title;
-    if (!title) {
+    const element = title
+        ? _jsx(ResourceHeaderTitleHeading, { title: title, hostProvidesHeading: header?.hostProvidesHeading, className: className })
         // A name that is on its way reserves its line, so its arrival moves nothing beneath the header;
-        // a surface with no name at all still renders nothing. `h-7` is `text-xl`'s own line box.
-        return header?.titlePending
-            ? _jsx(Skeleton, { className: "h-7 w-48 max-w-full", "aria-hidden": "true", "data-resource-header-title-pending": "true" })
+        // a surface with no name at all still renders nothing.
+        : header?.titlePending
+            ? _jsx(ResourceHeaderTitlePlaceholder, {})
             : null;
+    if (!element)
+        return null;
+    // Inside a header: onto its title line. `null` = the line is attaching; render nothing for that pass.
+    if (header?.titleTarget !== undefined) {
+        return header.titleTarget ? createPortal(element, header.titleTarget) : null;
+    }
+    return element;
+}
+/**
+ * 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 function ResourceHeaderLeading({ children }) {
+    const header = useOptionalResourceHeaderContext();
+    if (header?.leadingTarget !== undefined) {
+        return header.leadingTarget ? createPortal(children, header.leadingTarget) : null;
     }
-    return (
-    // `min-w-0` + truncate so a long record name shrinks instead of pushing the
-    // template's trailing badges out of the band. No `flex-1`: the title claims
-    // only the space it needs, which is what keeps an authored badge HUGGING the
-    // name rather than being flung to the far end of the row (the same
-    // composition lesson recorded on `SummaryTitle`).
-    header?.hostProvidesHeading ? (_jsx("h2", { className: cn('min-w-0 truncate text-xl font-semibold text-foreground', className), children: title })) : (_jsx("h1", { className: cn('min-w-0 truncate text-xl font-semibold text-foreground', className), children: title })));
+    return _jsx(_Fragment, { children: children });
 }
 //# sourceMappingURL=ResourceHeaderTitle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResourceHeaderTitle.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/ResourceHeaderTitle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,kDAAkD,CAAC;AAC5E,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AAgDpD,MAAM,qBAAqB,GAAG,aAAa,CAAoC,IAAI,CAAC,CAAC;AAOrF,8EAA8E;AAC9E,MAAM,UAAU,6BAA6B,CAAC,EAC5C,KAAK,EACL,QAAQ,GAC2B;IACnC,OAAO,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAkC,CAAC;AACnG,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,gCAAgC;IAC9C,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAC3C,CAAC;AAYD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAAE,SAAS,EAA4B;IACzE,MAAM,MAAM,GAAG,gCAAgC,EAAE,CAAC;IAClD,0EAA0E;IAC1E,4EAA4E;IAC5E,gFAAgF;IAChF,IAAI,MAAM,EAAE,iBAAiB;QAAE,MAAM,CAAC,iBAAiB,CAAC,YAAY,GAAG,IAAI,CAAC;IAE5E,MAAM,KAAK,GAAG,MAAM,EAAE,KAAK,CAAC;IAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,gGAAgG;QAChG,0FAA0F;QAC1F,OAAO,MAAM,EAAE,YAAY;YACzB,CAAC,CAAC,KAAC,QAAQ,IAAC,SAAS,EAAC,qBAAqB,iBAAa,MAAM,wCAAoC,MAAM,GAAG;YAC3G,CAAC,CAAC,IAAI,CAAC;IACX,CAAC;IAED,OAAO;IACL,4EAA4E;IAC5E,4EAA4E;IAC5E,6EAA6E;IAC7E,mEAAmE;IACnE,kDAAkD;IAClD,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAC5B,aAAI,SAAS,EAAE,EAAE,CAAC,wDAAwD,EAAE,SAAS,CAAC,YACnF,KAAK,GACH,CACN,CAAC,CAAC,CAAC,CACF,aAAI,SAAS,EAAE,EAAE,CAAC,wDAAwD,EAAE,SAAS,CAAC,YACnF,KAAK,GACH,CACN,CACF,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\n/**\n * ResourceHeaderTitle — the record's page TITLE as a first-class, composable\n * element of an authored `layout.header` template.\n *\n * ## Why the header needs a template flow at all\n *\n * The READ page header owns a fixed band: back button, breadcrumb, resource\n * icon, the record's name, and the operation action cluster. Everything a\n * resource wanted to show ABOUT the record (a status badge, a visibility\n * marker, an accent colour) could previously only render in the `layout.display`\n * body BELOW that band — so the identity line said the record's name and nothing\n * else, while \"is this archived? is it public?\" sat in a separate labelled strip\n * underneath.\n *\n * `layout.header` closes that by letting the resource compose the middle of the\n * band itself. It is the same shape the SUMMARY surface already uses\n * (`SummaryLayout` / `SummaryTitle`), for the same reason recorded there: a\n * host-owned title plus a bolt-on accessory slot cannot express \"badge AFTER the\n * name\" or \"swatch BEFORE it\", whereas a template that places the title element\n * itself can express any of them with no extra config axis.\n *\n * ## Contract\n *\n * The header cedes the middle region to the template the moment `layout.header`\n * exists, so a template that never mounts `<ResourceHeaderTitle />` renders a\n * page with NO record name. That is loud in development (see the diagnostic in\n * `ResourceLayout_Header`) rather than silent.\n *\n * Renders nothing when the host resolved no label (a surface that shows a\n * generic operation title rather than one record's name) — the presence of a\n * label is the single data-driven signal that there is a title to place.\n */\n\nimport React, { createContext, useContext } from 'react';\n\nimport { Skeleton } from '~wildo-frontend-lib/components/feedback/skeleton';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\n\n// =============================================================================\n// CONTEXT\n// =============================================================================\n\nexport interface ResourceHeaderContextValue {\n  /** Resource type key of the record whose header is rendering. */\n  resourceType: string;\n\n  /**\n   * Resolved record title (the `getFrontendResourceLabel` result, or the\n   * operation/resource title fallback), or `null` when this surface has no\n   * record-specific name to show — `<ResourceHeaderTitle />` then renders nothing.\n   */\n  title: string | null;\n\n  /**\n   * `true` while the record's name is still being fetched and nothing else stands in for it.\n   * `<ResourceHeaderTitle />` then RESERVES the title's line with a skeleton instead of rendering\n   * nothing.\n   *\n   * An empty band is a defect, not a flicker. The header withholds the label during the first fetch\n   * on purpose (it would otherwise flash `#id` and then the real name), and the title element used to\n   * render nothing meanwhile — so the band had no height and the name's arrival pushed everything\n   * beneath it down by a line. Measured 2026-09-21 in the creation workbench's actor-task modal:\n   * `mousedown` landed on a tab, the record arrived, `mouseup` one millisecond later landed on the\n   * heading, and the browser dispatched the click to their common ancestor. The tab never changed\n   * and nothing reported why.\n   */\n  titlePending?: boolean;\n\n  /**\n   * Dev-diagnostic seam: `<ResourceHeaderTitle />` flips `titleMounted` when it\n   * renders, letting the header detect an authored template that never places\n   * the title. Mutable-ref shape (not state) on purpose — the flag is read only\n   * after render and must never schedule a re-render.\n   */\n  titleMountTracker?: { titleMounted: boolean };\n\n  /**\n   * `true` when an enclosing section already renders the heading for this region (an embedded READ inside\n   * a host section). The record's name is then not the PAGE title, so `<ResourceHeaderTitle />` renders an\n   * `h2` beneath the host's heading instead of a second `h1` — the same rule the default header applies.\n   */\n  hostProvidesHeading?: boolean;\n}\n\nconst ResourceHeaderContext = createContext<ResourceHeaderContextValue | null>(null);\n\nexport interface ResourceHeaderContextProviderProps {\n  value: ResourceHeaderContextValue;\n  children: React.ReactNode;\n}\n\n/** Provides the resolved record title to an authored header template tree. */\nexport function ResourceHeaderContextProvider({\n  value,\n  children,\n}: ResourceHeaderContextProviderProps): React.JSX.Element {\n  return <ResourceHeaderContext.Provider value={value}>{children}</ResourceHeaderContext.Provider>;\n}\n\n/**\n * Read the header context, or `null` when a header template is rendered outside\n * `ResourceLayout_Header` (e.g. previewed in isolation).\n */\nexport function useOptionalResourceHeaderContext(): ResourceHeaderContextValue | null {\n  return useContext(ResourceHeaderContext);\n}\n\n// =============================================================================\n// TITLE ELEMENT\n// =============================================================================\n\n/** @wildo_source:part:start saas.frontend.resource-header-title facet:layer:frontend facet:family:resource-ui */\nexport interface ResourceHeaderTitleProps {\n  /** Extra classes merged over the default page-title styling. */\n  className?: string;\n}\n\n/**\n * The record's name, rendered with the page-header typography the default\n * (template-less) header uses — so authoring a header template is visually\n * neutral for the title itself and only adds what the template places around it.\n *\n * ## It is an `h1`, and the level is not cosmetic\n *\n * This IS the page's title — the record's name on a record page, the collection's on a listing — and\n * there is exactly one per surface, so it owns the top of the document outline. It was an `h2` until\n * 2026-09-09, which left generated screens with NO level-one heading at all: the first accessibility\n * audit ever run against a live stack reported `page-has-heading-one` on the collection listing,\n * where this element was the only heading on the page (#533).\n *\n * The classes are unchanged, so nothing moves visually — `text-xl` still sets the size. A heading\n * level is the document's structure, not its appearance, and the two are deliberately decoupled here\n * exactly as the design system does elsewhere.\n */\nexport function ResourceHeaderTitle({ className }: ResourceHeaderTitleProps): React.JSX.Element | null {\n  const header = useOptionalResourceHeaderContext();\n  // Register with the missing-title diagnostic BEFORE the empty-title early\n  // return: mounting the element discharges the template's contract even when\n  // this particular record resolves no label (data-driven, not an authoring bug).\n  if (header?.titleMountTracker) header.titleMountTracker.titleMounted = true;\n\n  const title = header?.title;\n  if (!title) {\n    // A name that is on its way reserves its line, so its arrival moves nothing beneath the header;\n    // a surface with no name at all still renders nothing. `h-7` is `text-xl`'s own line box.\n    return header?.titlePending\n      ? <Skeleton className=\"h-7 w-48 max-w-full\" aria-hidden=\"true\" data-resource-header-title-pending=\"true\" />\n      : null;\n  }\n\n  return (\n    // `min-w-0` + truncate so a long record name shrinks instead of pushing the\n    // template's trailing badges out of the band. No `flex-1`: the title claims\n    // only the space it needs, which is what keeps an authored badge HUGGING the\n    // name rather than being flung to the far end of the row (the same\n    // composition lesson recorded on `SummaryTitle`).\n    header?.hostProvidesHeading ? (\n      <h2 className={cn('min-w-0 truncate text-xl font-semibold text-foreground', className)}>\n        {title}\n      </h2>\n    ) : (\n      <h1 className={cn('min-w-0 truncate text-xl font-semibold text-foreground', className)}>\n        {title}\n      </h1>\n    )\n  );\n}\n/** @wildo_source:part:end saas.frontend.resource-header-title */\n"]}
+{"version":3,"file":"ResourceHeaderTitle.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/ResourceHeaderTitle.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\n/**\n * ResourceHeaderTitle — the record's page TITLE as a first-class, composable\n * element of an authored `layout.header` template.\n *\n * ## Why the header needs a template flow at all\n *\n * The READ page header owns a fixed band: back button, breadcrumb, resource\n * icon, the record's name, and the operation action cluster. Everything a\n * resource wanted to show ABOUT the record (a status badge, a visibility\n * marker, an accent colour) could previously only render in the `layout.display`\n * body BELOW that band — so the identity line said the record's name and nothing\n * else, while \"is this archived? is it public?\" sat in a separate labelled strip\n * underneath.\n *\n * `layout.header` closes that by letting the resource compose the middle of the\n * band itself. It is the same shape the SUMMARY surface already uses\n * (`SummaryLayout` / `SummaryTitle`), for the same reason recorded there: a\n * host-owned title plus a bolt-on accessory slot cannot express \"badge AFTER the\n * name\" or \"swatch BEFORE it\", whereas a template that places the title element\n * itself can express any of them with no extra config axis.\n *\n * ## Contract\n *\n * The header cedes the record's identity to the template the moment `layout.header`\n * exists, so a template that never mounts `<ResourceHeaderTitle />` renders a\n * page with NO record name. That is loud in development (see the diagnostic in\n * `ResourceLayout_Header`) rather than silent.\n *\n * ## Where the title lands (2026-09-30)\n *\n * The header is three lines: a bar (back, breadcrumb, a pane's own controls), the TITLE LINE (the\n * name and the record's actions), and the FACTS line (the rest of the template: status, priority,\n * the parent chip). A template places `<ResourceHeaderTitle />` among its facts as it always did; the\n * header renders the title on the title line and the rest of the template on the facts line. So the\n * name always sits beside the actions it is the subject of, and the facts never push the actions off\n * the name's line, which is what a single wrapping row did: measured on Wonder Todos, a todo in the\n * split pane had its title 41px above its own back arrow and actions.\n *\n * Renders nothing when the host resolved no label (a surface that shows a\n * generic operation title rather than one record's name) — the presence of a\n * label is the single data-driven signal that there is a title to place.\n */\n\nimport React, { createContext, useContext } from 'react';\nimport { createPortal } from 'react-dom';\nimport { TypographyVariant, UIBehavior } from '@wildo-ai/presets-components-models';\n\nimport { Skeleton } from '~wildo-frontend-lib/components/feedback/skeleton';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { UIContext } from '~wildo-frontend-lib/core/ui/UIContext';\nimport { defaultTheme } from '~wildo-frontend-lib/core/ui/themes/default.theme';\n\n// =============================================================================\n// CONTEXT\n// =============================================================================\n\nexport interface ResourceHeaderContextValue {\n  /** Resource type key of the record whose header is rendering. */\n  resourceType: string;\n\n  /**\n   * Resolved record title (the `getFrontendResourceLabel` result, or the\n   * operation/resource title fallback), or `null` when this surface has no\n   * record-specific name to show — `<ResourceHeaderTitle />` then renders nothing.\n   */\n  title: string | null;\n\n  /**\n   * `true` while the record's name is still being fetched and nothing else stands in for it.\n   * `<ResourceHeaderTitle />` then RESERVES the title's line with a skeleton instead of rendering\n   * nothing.\n   *\n   * An empty band is a defect, not a flicker. The header withholds the label during the first fetch\n   * on purpose (it would otherwise flash `#id` and then the real name), and the title element used to\n   * render nothing meanwhile — so the band had no height and the name's arrival pushed everything\n   * beneath it down by a line. Measured 2026-09-21 in the creation workbench's actor-task modal:\n   * `mousedown` landed on a tab, the record arrived, `mouseup` one millisecond later landed on the\n   * heading, and the browser dispatched the click to their common ancestor. The tab never changed\n   * and nothing reported why.\n   */\n  titlePending?: boolean;\n\n  /**\n   * Dev-diagnostic seam: `<ResourceHeaderTitle />` flips `titleMounted` when it\n   * renders, letting the header detect an authored template that never places\n   * the title. Mutable-ref shape (not state) on purpose — the flag is read only\n   * after render and must never schedule a re-render.\n   */\n  titleMountTracker?: { titleMounted: boolean };\n\n  /**\n   * `true` when an enclosing section already renders the heading for this region (an embedded READ inside\n   * a host section). The record's name is then not the PAGE title, so `<ResourceHeaderTitle />` renders an\n   * `h2` beneath the host's heading instead of a second `h1` — the same rule the default header applies.\n   */\n  hostProvidesHeading?: boolean;\n\n  /**\n   * The header's TITLE LINE, when the header has one: `<ResourceHeaderTitle />` renders the name THERE,\n   * beside the record's actions, instead of in the template's own flow (the facts line). `undefined`\n   * means the template's own flow (a template previewed outside a header); `null` means the line is\n   * not attached yet — the title then renders nothing for the one layout pass it takes to attach.\n   */\n  titleTarget?: HTMLElement | null;\n\n  /**\n   * The header's LEADING slot on the title line, just before the name: `<ResourceHeaderLeading>` renders\n   * there. Same `undefined` / `null` reading as {@link titleTarget}.\n   */\n  leadingTarget?: HTMLElement | null;\n}\n\nconst ResourceHeaderContext = createContext<ResourceHeaderContextValue | null>(null);\n\nexport interface ResourceHeaderContextProviderProps {\n  value: ResourceHeaderContextValue;\n  children: React.ReactNode;\n}\n\n/** Provides the resolved record title to an authored header template tree. */\nexport function ResourceHeaderContextProvider({\n  value,\n  children,\n}: ResourceHeaderContextProviderProps): React.JSX.Element {\n  return <ResourceHeaderContext.Provider value={value}>{children}</ResourceHeaderContext.Provider>;\n}\n\n/**\n * Read the header context, or `null` when a header template is rendered outside\n * `ResourceLayout_Header` (e.g. previewed in isolation).\n */\nexport function useOptionalResourceHeaderContext(): ResourceHeaderContextValue | null {\n  return useContext(ResourceHeaderContext);\n}\n\n// =============================================================================\n// TITLE ELEMENT\n// =============================================================================\n\n/** @wildo_source:part:start saas.frontend.resource-header-title facet:layer:frontend facet:family:resource-ui */\nexport interface ResourceHeaderTitleProps {\n  /** Extra classes merged over the theme's resource-title typography. */\n  className?: string;\n}\n\n/**\n * The name a resource page is about, set in the theme's `TypographyVariant.RESOURCE_TITLE` voice —\n * quieter than a document heading, because it shares its line with the record's actions. Used by the\n * header's default title and by `<ResourceHeaderTitle />`, so authoring a header template never\n * changes how the title looks.\n *\n * ## It is a real heading, and the level is not cosmetic\n *\n * `h1` on a page: this IS the page's title — the record's name on a record page, the collection's on a\n * listing — and there is exactly one, so it owns the top of the document outline (an `h2` there once\n * left generated screens with no level-one heading at all, #533). `h2` under a host section that owns\n * the heading. The level is structure; the recipe is appearance, and the two are decoupled.\n */\nexport function ResourceHeaderTitleHeading({\n  title,\n  hostProvidesHeading,\n  className,\n}: {\n  title: string;\n  hostProvidesHeading?: boolean;\n  className?: string;\n}): React.JSX.Element {\n  // `min-w-0` + truncate so a long record name shrinks rather than pushing the actions off its line.\n  const classes = cn('min-w-0 truncate', useResourceTitleVoice(), className);\n  return hostProvidesHeading\n    ? <h2 className={classes}>{title}</h2>\n    : <h1 className={classes}>{title}</h1>;\n}\n\n/**\n * The line a resource title holds while the name is on its way: one skeleton exactly one line box of\n * the theme's `RESOURCE_TITLE` voice tall. It is set in that voice and sized in `lh`, so it matches the\n * real title's line in every theme (text-lg by default, text-xl in cozy and editorial, text-base in\n * dense) and the name's arrival moves nothing beneath it. A fixed height could match only one theme.\n *\n * For a custom header preset: render it where the title will land while the name is on its way.\n * `<ResourceHeaderTitle />` already uses it, so a header TEMPLATE never needs to.\n */\nexport function ResourceHeaderTitlePlaceholder({ className }: { className?: string }): React.JSX.Element {\n  return (\n    <div className={cn('min-w-0', useResourceTitleVoice(), className)} aria-hidden=\"true\" data-resource-header-title-pending=\"true\">\n      <Skeleton className=\"h-[1lh] w-48 max-w-full\" />\n    </div>\n  );\n}\n\n/**\n * The theme's resource-title typography classes. Read defensively: a header template can be previewed\n * outside the app's `UIProvider`, and a title must not throw there. Without a theme it takes the default\n * theme's voice.\n */\nfunction useResourceTitleVoice(): string | undefined {\n  const ui = useContext(UIContext);\n  const recipe = ui\n    ? ui.getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.RESOURCE_TITLE)\n    : defaultTheme.typography?.[TypographyVariant.RESOURCE_TITLE];\n  return recipe?.base;\n}\n\n/**\n * The record's name, placed by an authored `layout.header` template. Inside a resource header it\n * renders on the header's title line, beside the record's actions (see \"Where the title lands\"\n * above); the rest of the template stays on the facts line below.\n */\nexport function ResourceHeaderTitle({ className }: ResourceHeaderTitleProps): React.JSX.Element | null {\n  const header = useOptionalResourceHeaderContext();\n  // Register with the missing-title diagnostic BEFORE the empty-title early\n  // return: mounting the element discharges the template's contract even when\n  // this particular record resolves no label (data-driven, not an authoring bug).\n  if (header?.titleMountTracker) header.titleMountTracker.titleMounted = true;\n\n  const title = header?.title;\n  const element = title\n    ? <ResourceHeaderTitleHeading title={title} hostProvidesHeading={header?.hostProvidesHeading} className={className} />\n    // A name that is on its way reserves its line, so its arrival moves nothing beneath the header;\n    // a surface with no name at all still renders nothing.\n    : header?.titlePending\n      ? <ResourceHeaderTitlePlaceholder />\n      : null;\n  if (!element) return null;\n\n  // Inside a header: onto its title line. `null` = the line is attaching; render nothing for that pass.\n  if (header?.titleTarget !== undefined) {\n    return header.titleTarget ? createPortal(element, header.titleTarget) : null;\n  }\n  return element;\n}\n/**\n * Something that belongs BEFORE the record's name on the title line — an accent swatch, a family glyph —\n * placed by an authored `layout.header` template:\n *\n * ```tsx\n * header: () => (\n *   <div className=\"flex min-w-0 flex-wrap items-center gap-field\">\n *     <ResourceHeaderLeading><span className=\"size-3 rounded-full\" style={{ background: color }} /></ResourceHeaderLeading>\n *     <ResourceHeaderTitle />\n *     <DisplayField name=\"status\" hideLabel hideDescription className=\"w-auto\" />\n *   </div>\n * ),\n * ```\n *\n * The header lifts the title onto its title line and leaves the rest of the template on the facts line\n * below, so an element a template puts before the title stays with the facts unless it says it leads the\n * name. That is this: inside a header it renders just before the name; outside one (a template previewed\n * in isolation) it renders where it is written. A resource whose glyph replaces the resource icon\n * (`HeaderIconPlacement.TEMPLATE_OWNED`) places it here, so the title line keeps a glyph.\n */\nexport function ResourceHeaderLeading({ children }: { children: React.ReactNode }): React.JSX.Element | null {\n  const header = useOptionalResourceHeaderContext();\n  if (header?.leadingTarget !== undefined) {\n    return header.leadingTarget ? createPortal(children, header.leadingTarget) : null;\n  }\n  return <>{children}</>;\n}\n/** @wildo_source:part:end saas.frontend.resource-header-title */\n"]}

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

@@ -101,8 +101,15 @@ type SectionProps_Accordion = SectionBaseProps & {
     appearance: SectionMode.ACCORDION;
     allowMultiple?: boolean;
 };
+/**
+ * Truncation over a GROUP of consecutive EXPANDABLE sections: the first `initialVisibleCount` show and
+ * one "Show more" button reveals the rest. Not a toggle — one section, or any group no larger than
+ * `initialVisibleCount`, renders fully open with no button. A single aside revealed on request is
+ * {@link SectionMode.COLLAPSIBLE} with `defaultFocus={false}` (#2197).
+ */
 type SectionProps_Expandable = SectionBaseProps & {
     appearance: SectionMode.EXPANDABLE;
+    /** Sections shown before "Show more". Read from the group's first section. @default 3 */
     initialVisibleCount?: number;
 };
 type SectionProps_Stepper = SectionBaseProps & {

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

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/Section.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/Section.tsx"],"names":[],"mappings":"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"}

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

@@ -6,6 +6,7 @@ import { ErrorCustomMessageReference } from '@wildo-ai/saas-models';
 import { SectionMode } from '@wildo-ai/zod-decorators';
 import { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';
 import { useOptionalFormTemplateContext } from '../../form/automated/FormTemplateContext.js';
+import { validateFieldsAndShowErrors } from '../../form/validation-errors/validate-fields-and-show-errors.js';
 import { useOptionalDisplayTemplateContext } from '../../data-display/DisplayTemplateContext.js';
 import { FormChromeProvider } from '../../form/chromes/FormChromeContext.js';
 import { DisplayChromeProvider } from '../../data-display/chromes/DisplayChromeContext.js';
@@ -152,7 +153,7 @@ export function Section(props) {
     const content = (_jsx(SectionHostHeadingContext.Provider, { value: !!resolvedLegend, children: _jsxs(SectionFieldsContext.Provider, { value: sectionFieldsContextValue, children: [_jsx(SectionContentWithHostChrome, { hostKind: sectionHostKind, chromeMode: chromeMode, children: children }), isSaveable && _jsx(SectionSaveButton, { sectionName: name, disabled: disabled })] }) }));
     // All four solo modes (DEFAULT / CARD / GHOST / COLLAPSIBLE) are rendered by
     // the ContentSection primitive, which owns the per-mode chrome: a native
-    // <fieldset> (DEFAULT/CARD — the disabled cascade + when-orphan framing), a
+    // <fieldset> (DEFAULT/CARD — the disabled cascade carrier; a card always paints its frame), a
     // flat <div> (GHOST), or a Collapsible toggle (COLLAPSIBLE). The legend and
     // description are passed as structured props so the primitive can place the
     // legend as a fieldset <legend> or a collapsible trigger as the mode requires.
@@ -218,8 +219,8 @@ export function SectionSaveButton({ sectionName, disabled }) {
         if (registeredFieldNames.length === 0) {
             return;
         }
-        const isValid = await form.trigger(registeredFieldNames);
-        if (!isValid) {
+        // An invalid section shows its errors and brings the first on screen; it used to stop with nothing visible.
+        if (!(await validateFieldsAndShowErrors(form, registeredFieldNames))) {
             return;
         }
         setIsSaving(true);
@@ -227,6 +228,11 @@ export function SectionSaveButton({ sectionName, disabled }) {
             const formValues = form.getValues();
             await onSectionSave(sectionName, registeredFieldNames, formValues);
         }
+        catch (error) {
+            // The form's own handler reports its failures and never throws; a caller-supplied one may. Logged rather than
+            // left to escape the click handler as an unhandled rejection.
+            logger.error('[SectionSaveButton] The section save handler threw.', { sectionName, error });
+        }
         finally {
             setIsSaving(false);
         }