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

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

@@ -1 +1 @@
-{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/Section.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React, { useState, type ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { ErrorCustomMessageReference } from '@wildo-ai/saas-models';\nimport { SectionMode, DisplayDirection } from '@wildo-ai/zod-decorators';\nimport type { ResponsiveChromeMode, SoloSectionMode } from '@wildo-ai/zod-decorators';\nimport type { GapSize } from '@wildo-ai/presets-components-models';\nimport { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { useOptionalFormTemplateContext } from '../../form/automated/FormTemplateContext';\nimport { useOptionalDisplayTemplateContext } from '../../data-display/DisplayTemplateContext';\nimport { FormChromeProvider } from '../../form/chromes/FormChromeContext';\nimport { DisplayChromeProvider } from '../../data-display/chromes/DisplayChromeContext';\nimport { ContentSection } from '../../sections/content-section';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { FrontendResourceUtils } from '~wildo-frontend-lib/core/resources/frontend-resource.utils';\nimport { LoggerFrontendService } from '~wildo-frontend-lib/core/monitoring/logger.frontend.service';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { GroupedSectionHostKind } from './Section.shared';\nimport { toDisplayChromeMode, isSoloMode } from './section-consolidation.shared';\nimport {\n  SectionFieldsContext,\n  useRegisteredSectionFields,\n  useSectionFieldsRegistry,\n  holdsOnlyFieldSlots,\n  useSectionShowsNoField,\n} from './SectionFieldsContext';\nimport { useFieldScope } from './FieldScopeContext';\nimport { useTemplatePlacedFieldsOf } from '../../form/automated/TemplatePlacedFieldsContext';\nimport { useOptionalSectionPresentationContext } from './SectionPresentationContext';\nimport { SectionHostHeadingContext } from './SectionHostHeadingContext';\n\nconst logger = LoggerFrontendService.getLogger();\n\n/**\n * Tracks `${name}:${appearance}` keys already warned about an ungrouped\n * container-mode section, so the dev footgun warning fires once per section\n * instead of on every render.\n */\nconst warnedUngroupedContainerSections = new Set<string>();\n\n// =============================================================================\n// SECTION PROPS — Discriminated Union\n// =============================================================================\n\n/**\n * Shared properties across all `SectionProps` variants.\n */\ntype SectionBaseProps = {\n  /**\n   * Structural ref — maps to i18n keys for title/description:\n   * - `resources.{type}.sections.{name}.title`\n   * - `resources.{type}.sections.{name}.description`\n   */\n  name: string;\n  /** Additional CSS classes for the section container. */\n  className?: string;\n  /**\n   * When `true`, renders a section-level save button (form context only).\n   */\n  saveable?: boolean;\n  /**\n   * Override chrome mode for all fields within this section.\n   * Cascade: field decorator → section chromeMode → form/display chromeMode\n   * → surface policy → STACKED.\n   */\n  chromeMode?: ResponsiveChromeMode;\n  /** Whether this section is disabled. */\n  disabled?: boolean;\n  /**\n   * Suppress the section's resolved TITLE (legend) while keeping the rest of the\n   * section intact. Independent from {@link SectionBaseProps.hideDescription} —\n   * the two are separate concerns.\n   *\n   * Honored for the **solo** modes (DEFAULT / CARD / GHOST / COLLAPSIBLE), i.e.\n   * the modes a `<Section>` renders itself. Container/grouped modes (GRID / TABS\n   * / …) take their heading from the layout host and ignore this flag.\n   *\n   * Hiding the title also releases the heading-dedup signal\n   * ({@link SectionHostHeadingContext}), so an embedded resource surface is free\n   * to render its own heading again.\n   */\n  hideTitle?: boolean;\n  /**\n   * Suppress the section's resolved DESCRIPTION, independently of the title.\n   *\n   * NB: the CARD renderer nests the description inside the title heading block,\n   * so on a CARD hiding the title also hides the description; on DEFAULT / GHOST\n   * / COLLAPSIBLE the two render independently.\n   */\n  hideDescription?: boolean;\n  children: ReactNode;\n  /**\n   * Universal behavioral prop — initial focus state.\n   * - COLLAPSIBLE: whether the section starts expanded (default: true)\n   * - TABS/PILLS/VERTICAL_TABS: whether this section is the default active tab\n   * - ACCORDION: whether this section starts expanded\n   * - STEPPER: no effect (always sequential)\n   * @default true for COLLAPSIBLE, false for others\n   */\n  defaultFocus?: boolean;\n};\n\n// ─── Solo modes ───\n\ntype SectionProps_Default = SectionBaseProps & {\n  appearance?: SectionMode.DEFAULT;\n};\n\ntype SectionProps_Card = SectionBaseProps & {\n  appearance: SectionMode.CARD;\n};\n\ntype SectionProps_Ghost = SectionBaseProps & {\n  appearance: SectionMode.GHOST;\n};\n\ntype SectionProps_Collapsible = SectionBaseProps & {\n  appearance: SectionMode.COLLAPSIBLE;\n};\n\n// ─── Layout container modes ───\n\ntype SectionProps_Inline = SectionBaseProps & {\n  appearance: SectionMode.INLINE;\n  gap?: GapSize;\n};\n\ntype SectionProps_Grid = SectionBaseProps & {\n  appearance: SectionMode.GRID;\n  columns?: number | 'auto';\n  gap?: GapSize;\n  minColumnWidth?: string;\n};\n\ntype SectionProps_Columns = SectionBaseProps & {\n  appearance: SectionMode.COLUMNS;\n  columns?: number | 'auto';\n  gap?: GapSize;\n};\n\n// ─── Navigation container modes ───\n\ntype SectionProps_Tabs = SectionBaseProps & {\n  appearance: SectionMode.TABS;\n};\n\ntype SectionProps_VerticalTabs = SectionBaseProps & {\n  appearance: SectionMode.VERTICAL_TABS;\n  navWidth?: string;\n};\n\ntype SectionProps_Pills = SectionBaseProps & {\n  appearance: SectionMode.PILLS;\n};\n\n// ─── Expandable container modes ───\n\ntype SectionProps_Accordion = SectionBaseProps & {\n  appearance: SectionMode.ACCORDION;\n  allowMultiple?: boolean;\n};\n\ntype SectionProps_Expandable = SectionBaseProps & {\n  appearance: SectionMode.EXPANDABLE;\n  initialVisibleCount?: number;\n};\n\n// ─── Guided container modes ───\n\ntype SectionProps_Stepper = SectionBaseProps & {\n  appearance: SectionMode.STEPPER;\n  allowSkip?: boolean;\n  showProgress?: boolean;\n  orientation?: DisplayDirection;\n};\n\ntype SectionProps_Timeline = SectionBaseProps & {\n  appearance: SectionMode.TIMELINE;\n};\n\n/**\n * Discriminated union of all Section props.\n * TypeScript narrows mode-specific parameters based on `appearance`.\n *\n * Solo modes (DEFAULT, CARD, GHOST, COLLAPSIBLE) render the section in place.\n * Container modes (TABS, GRID, etc.) are grouped by the parent layout\n * (`FormLayout`, `DisplayLayout`, or another section-aware host such as\n * `CompositeLayout`) into a `ContentSectionContainer`.\n */\nexport type SectionProps =\n  | SectionProps_Default\n  | SectionProps_Card\n  | SectionProps_Ghost\n  | SectionProps_Collapsible\n  | SectionProps_Inline\n  | SectionProps_Grid\n  | SectionProps_Columns\n  | SectionProps_Tabs\n  | SectionProps_VerticalTabs\n  | SectionProps_Pills\n  | SectionProps_Accordion\n  | SectionProps_Expandable\n  | SectionProps_Stepper\n  | SectionProps_Timeline;\n\nexport interface GroupedSectionBodyProps {\n  hostKind: GroupedSectionHostKind;\n  sectionProps: Pick<SectionProps, 'name' | 'children' | 'chromeMode' | 'saveable' | 'className' | 'disabled'>;\n  /**\n   * Whether the grouping container renders a visible heading for this section\n   * (the `ContentSectionDescriptor.title` the layout host resolved). When true,\n   * descendants get {@link SectionHostHeadingContext} so an embedded resource\n   * surface suppresses its own generic heading/breadcrumb — mirroring what solo\n   * `<Section>` rendering does with its legend. Hosts pass `!!title`.\n   */\n  providesHeading?: boolean;\n}\n\n/**\n * Named section for form and display templates.\n *\n * The `appearance` prop determines rendering behavior:\n *\n * **Solo modes** (DEFAULT, CARD, GHOST, COLLAPSIBLE) render in place with\n * appropriate chrome (fieldset, card, collapsible wrapper).\n *\n * **Container modes** (TABS, GRID, ACCORDION, etc.) are NOT rendered directly\n * by this component — the parent layout (`FormLayout`, `DisplayLayout`, or\n * another section-aware host) introspects its children, groups sections sharing\n * the same container appearance, and renders them via\n * `ContentSectionContainer`.\n *\n * **A solo form section with nothing to show hides.** One template serves several operations, and a\n * `FormField` whose field the operation's schema lacks (or whose condition hides it) renders nothing.\n * When a section holds only field slots (`FormField`, `FormFieldArray`, fields inside `ObjectScope` or\n * inside a plain layout element such as a grid `div`) and none of them renders, the section hides its\n * frame rather than showing a heading over nothing; its children stay mounted, so a field that starts\n * rendering brings it back. A section holding anything else — text, a custom control or wrapper\n * component (the engine's `Group` included), a nested section, a custom element, or a plain element\n * with no field slot inside at that moment (a spacer `div`, an `hr`, a `div` whose only slot sits in a\n * false branch) — is never hidden this way. A GROUPED section (grid, tabs, …) is decided by its host\n * instead, from the operation's schema, because its container draws it and a tab's panel is not mounted:\n * see `groupedSectionShowsNoField` in `FormLayout`.\n *\n * Supports:\n * - **Saveable sections** (form-only, section-level partial save)\n * - **Section-level chromeMode override** (cascaded to child fields)\n * - **defaultFocus** — initial active/expanded state\n *\n * @example Solo mode (renders in place):\n * ```tsx\n * <Section name=\"billing\" appearance={SectionMode.CARD}>\n *   <DisplayField name=\"plan\" />\n * </Section>\n * ```\n *\n * @example Container mode (grouped by parent layout):\n * ```tsx\n * <FormLayout>\n *   <Section name=\"general\" appearance={SectionMode.TABS} defaultFocus>\n *     <FormField name=\"name\" />\n *   </Section>\n *   <Section name=\"advanced\" appearance={SectionMode.TABS}>\n *     <FormField name=\"config\" />\n *   </Section>\n * </FormLayout>\n * ```\n */\nexport function Section(props: SectionProps): ReactNode {\n  const {\n    name,\n    className,\n    saveable,\n    chromeMode,\n    children,\n    defaultFocus = true,\n    hideTitle = false,\n    hideDescription = false,\n  } = props;\n\n  const appearance: SectionMode = props.appearance ?? SectionMode.DEFAULT;\n\n  const formCtx = useOptionalFormTemplateContext();\n  const displayCtx = useOptionalDisplayTemplateContext();\n  const sectionPresentation = useOptionalSectionPresentationContext();\n\n  const presentationEntry = sectionPresentation?.sectionEntries?.[name];\n  const presentationTitle = presentationEntry?.icon\n    ? (\n      <>\n        <span className=\"me-element inline-flex items-center\">{presentationEntry.icon}</span>\n        {presentationEntry.title ?? ''}\n      </>\n    )\n    : presentationEntry?.title;\n\n  const legend = formCtx?.sectionLabels?.[name]\n    ?? displayCtx?.sectionLabels?.[name]\n    ?? presentationTitle;\n  const description = formCtx?.sectionDescriptions?.[name]\n    ?? displayCtx?.sectionDescriptions?.[name]\n    ?? presentationEntry?.description;\n  // Two independent hide concerns. Resolving to `undefined` flows through the\n  // whole solo-render chrome contract: no legend/description on the\n  // ContentSection primitive AND (for the title) no heading-dedup signal.\n  const resolvedLegend = hideTitle ? undefined : legend;\n  const resolvedDescription = hideDescription ? undefined : description;\n  const disabled = props.disabled ?? formCtx?.disabled;\n  const onSectionSave = formCtx?.onSectionSave;\n  const isSaveable = !!(saveable && onSectionSave);\n  const sectionHostKind = formCtx\n    ? GroupedSectionHostKind.FORM\n    : displayCtx\n      ? GroupedSectionHostKind.DISPLAY\n      : sectionPresentation\n        ? GroupedSectionHostKind.COMPOSITE\n        : GroupedSectionHostKind.DISPLAY;\n  if (sectionHostKind === GroupedSectionHostKind.COMPOSITE && chromeMode) {\n    throw FrontendResourceUtils.buildConfigurationError(\n      ErrorCustomMessageReference.CONFIGURATION,\n      {\n        component: 'Section',\n        message: 'Section chromeMode is only supported inside form/display section hosts. Composite-hosted sections must not declare chromeMode until a dedicated composite chrome contract exists.',\n        sectionName: name,\n      },\n    );\n  }\n  const sectionFieldsContextValue = useSectionFieldsRegistry();\n  const showsNoField = useSectionShowsNoField(sectionFieldsContextValue);\n  // Every slot this section holds, read from its elements: a collapsed section's fields, or an unchosen\n  // variant's, are not mounted, so they cannot report themselves (see `TemplatePlacedFieldsContext`).\n  const { pathPrefix } = useFieldScope();\n  useTemplatePlacedFieldsOf(children, pathPrefix);\n  // Only a section of nothing but field slots may hide for its fields' absence; anything else beside\n  // them (text, a custom control, a nested section) is content of its own that presence cannot see.\n  const isEmptyForThisOperation = showsNoField && holdsOnlyFieldSlots(children);\n\n  // Container modes: render children as-is. The parent layout handles grouping.\n  if (!isSoloMode(appearance)) {\n    // Footgun guard: a container-mode section (GRID/TABS/COLUMNS/…) only receives\n    // chrome (card, padding, title) when a layout HOST groups it into a\n    // ContentSectionContainer. Reaching this branch means the section escaped\n    // grouping — almost always because it was wrapped in a custom component\n    // (hiding it from the host's `groupSectionsByAppearance` scan) or rendered\n    // standalone — so it renders BARE (raw children only, no chrome). Warn so the\n    // silent \"no chrome\" outcome is visible; for a single self-contained section\n    // use a solo appearance (DEFAULT / CARD / GHOST) instead.\n    if (process.env.NODE_ENV !== 'production') {\n      const warnKey = `${name}:${appearance}`;\n      if (!warnedUngroupedContainerSections.has(warnKey)) {\n        warnedUngroupedContainerSections.add(warnKey);\n        logger.warn(\n          `[Section] container-mode section \"${name}\" (appearance=\"${appearance}\") is rendering ungrouped — no section chrome (card / padding / title), only its raw children. Container modes must be DIRECT <Section> children of a layout host (FormLayout / DisplayLayout / CompositeLayout) to be grouped. This usually means the <Section> is wrapped in a custom component or rendered standalone. Use a solo appearance (DEFAULT / CARD / GHOST) for a single self-contained section.`,\n          { sectionName: name, appearance },\n        );\n      }\n    }\n    return <>{children}</>;\n  }\n\n  // When this section renders its own heading (legend), tell descendant resource\n  // operation surfaces so an embedded list/etc. doesn't ALSO render its generic\n  // resource heading right under ours (the \"To-Do Lists\" + \"Todo Lists\" double\n  // heading). Record-specific headings (a READ view's displayLabel) are NOT\n  // suppressed — the consumer gates on the absence of a displayLabel.\n  const content = (\n    <SectionHostHeadingContext.Provider value={!!resolvedLegend}>\n      <SectionFieldsContext.Provider value={sectionFieldsContextValue}>\n        <SectionContentWithHostChrome\n          hostKind={sectionHostKind}\n          chromeMode={chromeMode}\n        >\n          {children}\n        </SectionContentWithHostChrome>\n        {isSaveable && <SectionSaveButton sectionName={name} disabled={disabled} />}\n      </SectionFieldsContext.Provider>\n    </SectionHostHeadingContext.Provider>\n  );\n\n  // All four solo modes (DEFAULT / CARD / GHOST / COLLAPSIBLE) are rendered by\n  // the ContentSection primitive, which owns the per-mode chrome: a native\n  // <fieldset> (DEFAULT/CARD — the disabled cascade + when-orphan framing), a\n  // flat <div> (GHOST), or a Collapsible toggle (COLLAPSIBLE). The legend and\n  // description are passed as structured props so the primitive can place the\n  // legend as a fieldset <legend> or a collapsible trigger as the mode requires.\n  return (\n    <ContentSection\n      appearance={appearance as SoloSectionMode}\n      legend={resolvedLegend}\n      description={resolvedDescription}\n      disabled={disabled}\n      defaultOpen={defaultFocus}\n      className={className}\n      data-guidance-section={name}\n      data-composite-section={sectionHostKind === GroupedSectionHostKind.COMPOSITE ? name : undefined}\n      // It holds only field slots and none renders for this operation (a template serves several\n      // operations, and this one posts none of these fields): a heading over nothing. The children stay\n      // mounted, so a field whose condition turns true reports and brings the section back.\n      hidden={isEmptyForThisOperation || undefined}\n    >\n      {content}\n    </ContentSection>\n  );\n}\n\nSection.displayName = 'Section';\n\nexport function GroupedSectionBody({\n  hostKind,\n  sectionProps,\n  providesHeading = false,\n}: GroupedSectionBodyProps): ReactNode {\n  const { children, chromeMode, saveable, name, className, disabled } = sectionProps;\n  const sectionFieldsContextValue = useSectionFieldsRegistry();\n\n  let content: ReactNode = children;\n  if (hostKind === GroupedSectionHostKind.FORM) {\n    content = (\n      <SectionFieldsContext.Provider value={sectionFieldsContextValue}>\n        <SectionContentWithHostChrome hostKind={hostKind} chromeMode={chromeMode}>\n          {children}\n        </SectionContentWithHostChrome>\n        {saveable && <SectionSaveButton sectionName={name} disabled={disabled} />}\n      </SectionFieldsContext.Provider>\n    );\n  } else {\n    content = (\n      <SectionContentWithHostChrome hostKind={hostKind} chromeMode={chromeMode}>\n        {children}\n      </SectionContentWithHostChrome>\n    );\n  }\n\n  return (\n    // Same de-duplication contract as the solo-section path (see the provider\n    // around `content` in Section above): when the grouping container renders\n    // this section's title, an embedded resource surface must not stack its\n    // own generic heading + breadcrumb under it.\n    <SectionHostHeadingContext.Provider value={providesHeading}>\n      <div\n        className={className ? `space-y-field ${className}` : 'space-y-field'}\n        data-guidance-section={name}\n        data-composite-section={hostKind === GroupedSectionHostKind.COMPOSITE ? name : undefined}\n      >\n        {content}\n      </div>\n    </SectionHostHeadingContext.Provider>\n  );\n}\n\nfunction SectionContentWithHostChrome({\n  hostKind,\n  chromeMode,\n  children,\n}: {\n  hostKind: GroupedSectionHostKind;\n  chromeMode?: SectionProps['chromeMode'];\n  children: ReactNode;\n}): ReactNode {\n  if (!chromeMode) {\n    return children;\n  }\n\n  if (hostKind === GroupedSectionHostKind.FORM) {\n    return <FormChromeProvider sectionChromeMode={chromeMode}>{children}</FormChromeProvider>;\n  }\n\n  if (hostKind === GroupedSectionHostKind.DISPLAY) {\n    return <DisplayChromeProvider sectionChromeMode={toDisplayChromeMode(chromeMode)}>{children}</DisplayChromeProvider>;\n  }\n\n  return children;\n}\n\n\n// =============================================================================\n// SectionSaveButton (extracted to avoid useFormContext crash in display templates)\n// =============================================================================\n\nexport interface SectionSaveButtonProps {\n  sectionName: string;\n  disabled?: boolean;\n}\n\n/**\n * Section-level save button — only rendered inside form contexts.\n * Extracted from Section to isolate the useFormContext() call, preventing\n * crashes when Section is used inside display templates.\n *\n * Also rendered by `GroupedSectionBody` for grouped (tabbed/accordion)\n * container section panels mounted via `GroupedSectionContent` in\n * `FormLayout.tsx`.\n */\nexport function SectionSaveButton({ sectionName, disabled }: SectionSaveButtonProps): ReactNode {\n  const form = useFormContext();\n  const ctx = useOptionalFormTemplateContext();\n  const registeredFieldNames = useRegisteredSectionFields();\n  const [isSaving, setIsSaving] = useState(false);\n  const { tComponent, isReady } = useI18n({\n    component: FrontendComponentType.LOW_LEVEL_FORM_MESSAGE,\n  });\n\n  const onSectionSave = ctx?.onSectionSave;\n  if (!onSectionSave) return null;\n  if (!isReady) return null;\n\n  const handleSave = async () => {\n    if (registeredFieldNames.length === 0) {\n      return;\n    }\n\n    const isValid = await form.trigger(registeredFieldNames);\n\n    if (!isValid) {\n      return;\n    }\n\n    setIsSaving(true);\n    try {\n      const formValues = form.getValues();\n      await onSectionSave(sectionName, registeredFieldNames, formValues as Record<string, unknown>);\n    } finally {\n      setIsSaving(false);\n    }\n  };\n\n  const savingLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'sectionSaving');\n  const saveLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'sectionSave');\n\n  return (\n    <div className=\"flex justify-end pt-item\">\n      <Button\n        type=\"button\"\n        variant={ButtonVariants_Variant.SECONDARY}\n        size={ButtonSize.SM}\n        onClick={handleSave}\n        disabled={disabled || isSaving || registeredFieldNames.length === 0}\n      >\n        {isSaving ? savingLabel : saveLabel}\n      </Button>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/Section.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React, { useState, type ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { ErrorCustomMessageReference } from '@wildo-ai/saas-models';\nimport { SectionMode, DisplayDirection } from '@wildo-ai/zod-decorators';\nimport type { ResponsiveChromeMode, SoloSectionMode } from '@wildo-ai/zod-decorators';\nimport type { GapSize } from '@wildo-ai/presets-components-models';\nimport { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { useOptionalFormTemplateContext } from '../../form/automated/FormTemplateContext';\nimport { validateFieldsAndShowErrors } from '../../form/validation-errors/validate-fields-and-show-errors';\nimport { useOptionalDisplayTemplateContext } from '../../data-display/DisplayTemplateContext';\nimport { FormChromeProvider } from '../../form/chromes/FormChromeContext';\nimport { DisplayChromeProvider } from '../../data-display/chromes/DisplayChromeContext';\nimport { ContentSection } from '../../sections/content-section';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { FrontendResourceUtils } from '~wildo-frontend-lib/core/resources/frontend-resource.utils';\nimport { LoggerFrontendService } from '~wildo-frontend-lib/core/monitoring/logger.frontend.service';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { GroupedSectionHostKind } from './Section.shared';\nimport { toDisplayChromeMode, isSoloMode } from './section-consolidation.shared';\nimport {\n  SectionFieldsContext,\n  useRegisteredSectionFields,\n  useSectionFieldsRegistry,\n  holdsOnlyFieldSlots,\n  useSectionShowsNoField,\n} from './SectionFieldsContext';\nimport { useFieldScope } from './FieldScopeContext';\nimport { useTemplatePlacedFieldsOf } from '../../form/automated/TemplatePlacedFieldsContext';\nimport { useOptionalSectionPresentationContext } from './SectionPresentationContext';\nimport { SectionHostHeadingContext } from './SectionHostHeadingContext';\n\nconst logger = LoggerFrontendService.getLogger();\n\n/**\n * Tracks `${name}:${appearance}` keys already warned about an ungrouped\n * container-mode section, so the dev footgun warning fires once per section\n * instead of on every render.\n */\nconst warnedUngroupedContainerSections = new Set<string>();\n\n// =============================================================================\n// SECTION PROPS — Discriminated Union\n// =============================================================================\n\n/**\n * Shared properties across all `SectionProps` variants.\n */\ntype SectionBaseProps = {\n  /**\n   * Structural ref — maps to i18n keys for title/description:\n   * - `resources.{type}.sections.{name}.title`\n   * - `resources.{type}.sections.{name}.description`\n   */\n  name: string;\n  /** Additional CSS classes for the section container. */\n  className?: string;\n  /**\n   * When `true`, renders a section-level save button (form context only).\n   */\n  saveable?: boolean;\n  /**\n   * Override chrome mode for all fields within this section.\n   * Cascade: field decorator → section chromeMode → form/display chromeMode\n   * → surface policy → STACKED.\n   */\n  chromeMode?: ResponsiveChromeMode;\n  /** Whether this section is disabled. */\n  disabled?: boolean;\n  /**\n   * Suppress the section's resolved TITLE (legend) while keeping the rest of the\n   * section intact. Independent from {@link SectionBaseProps.hideDescription} —\n   * the two are separate concerns.\n   *\n   * Honored for the **solo** modes (DEFAULT / CARD / GHOST / COLLAPSIBLE), i.e.\n   * the modes a `<Section>` renders itself. Container/grouped modes (GRID / TABS\n   * / …) take their heading from the layout host and ignore this flag.\n   *\n   * Hiding the title also releases the heading-dedup signal\n   * ({@link SectionHostHeadingContext}), so an embedded resource surface is free\n   * to render its own heading again.\n   */\n  hideTitle?: boolean;\n  /**\n   * Suppress the section's resolved DESCRIPTION, independently of the title.\n   *\n   * NB: the CARD renderer nests the description inside the title heading block,\n   * so on a CARD hiding the title also hides the description; on DEFAULT / GHOST\n   * / COLLAPSIBLE the two render independently.\n   */\n  hideDescription?: boolean;\n  children: ReactNode;\n  /**\n   * Universal behavioral prop — initial focus state.\n   * - COLLAPSIBLE: whether the section starts expanded (default: true)\n   * - TABS/PILLS/VERTICAL_TABS: whether this section is the default active tab\n   * - ACCORDION: whether this section starts expanded\n   * - STEPPER: no effect (always sequential)\n   * @default true for COLLAPSIBLE, false for others\n   */\n  defaultFocus?: boolean;\n};\n\n// ─── Solo modes ───\n\ntype SectionProps_Default = SectionBaseProps & {\n  appearance?: SectionMode.DEFAULT;\n};\n\ntype SectionProps_Card = SectionBaseProps & {\n  appearance: SectionMode.CARD;\n};\n\ntype SectionProps_Ghost = SectionBaseProps & {\n  appearance: SectionMode.GHOST;\n};\n\ntype SectionProps_Collapsible = SectionBaseProps & {\n  appearance: SectionMode.COLLAPSIBLE;\n};\n\n// ─── Layout container modes ───\n\ntype SectionProps_Inline = SectionBaseProps & {\n  appearance: SectionMode.INLINE;\n  gap?: GapSize;\n};\n\ntype SectionProps_Grid = SectionBaseProps & {\n  appearance: SectionMode.GRID;\n  columns?: number | 'auto';\n  gap?: GapSize;\n  minColumnWidth?: string;\n};\n\ntype SectionProps_Columns = SectionBaseProps & {\n  appearance: SectionMode.COLUMNS;\n  columns?: number | 'auto';\n  gap?: GapSize;\n};\n\n// ─── Navigation container modes ───\n\ntype SectionProps_Tabs = SectionBaseProps & {\n  appearance: SectionMode.TABS;\n};\n\ntype SectionProps_VerticalTabs = SectionBaseProps & {\n  appearance: SectionMode.VERTICAL_TABS;\n  navWidth?: string;\n};\n\ntype SectionProps_Pills = SectionBaseProps & {\n  appearance: SectionMode.PILLS;\n};\n\n// ─── Expandable container modes ───\n\ntype SectionProps_Accordion = SectionBaseProps & {\n  appearance: SectionMode.ACCORDION;\n  allowMultiple?: boolean;\n};\n\n/**\n * Truncation over a GROUP of consecutive EXPANDABLE sections: the first `initialVisibleCount` show and\n * one \"Show more\" button reveals the rest. Not a toggle — one section, or any group no larger than\n * `initialVisibleCount`, renders fully open with no button. A single aside revealed on request is\n * {@link SectionMode.COLLAPSIBLE} with `defaultFocus={false}` (#2197).\n */\ntype SectionProps_Expandable = SectionBaseProps & {\n  appearance: SectionMode.EXPANDABLE;\n  /** Sections shown before \"Show more\". Read from the group's first section. @default 3 */\n  initialVisibleCount?: number;\n};\n\n// ─── Guided container modes ───\n\ntype SectionProps_Stepper = SectionBaseProps & {\n  appearance: SectionMode.STEPPER;\n  allowSkip?: boolean;\n  showProgress?: boolean;\n  orientation?: DisplayDirection;\n};\n\ntype SectionProps_Timeline = SectionBaseProps & {\n  appearance: SectionMode.TIMELINE;\n};\n\n/**\n * Discriminated union of all Section props.\n * TypeScript narrows mode-specific parameters based on `appearance`.\n *\n * Solo modes (DEFAULT, CARD, GHOST, COLLAPSIBLE) render the section in place.\n * Container modes (TABS, GRID, etc.) are grouped by the parent layout\n * (`FormLayout`, `DisplayLayout`, or another section-aware host such as\n * `CompositeLayout`) into a `ContentSectionContainer`.\n */\nexport type SectionProps =\n  | SectionProps_Default\n  | SectionProps_Card\n  | SectionProps_Ghost\n  | SectionProps_Collapsible\n  | SectionProps_Inline\n  | SectionProps_Grid\n  | SectionProps_Columns\n  | SectionProps_Tabs\n  | SectionProps_VerticalTabs\n  | SectionProps_Pills\n  | SectionProps_Accordion\n  | SectionProps_Expandable\n  | SectionProps_Stepper\n  | SectionProps_Timeline;\n\nexport interface GroupedSectionBodyProps {\n  hostKind: GroupedSectionHostKind;\n  sectionProps: Pick<SectionProps, 'name' | 'children' | 'chromeMode' | 'saveable' | 'className' | 'disabled'>;\n  /**\n   * Whether the grouping container renders a visible heading for this section\n   * (the `ContentSectionDescriptor.title` the layout host resolved). When true,\n   * descendants get {@link SectionHostHeadingContext} so an embedded resource\n   * surface suppresses its own generic heading/breadcrumb — mirroring what solo\n   * `<Section>` rendering does with its legend. Hosts pass `!!title`.\n   */\n  providesHeading?: boolean;\n}\n\n/**\n * Named section for form and display templates.\n *\n * The `appearance` prop determines rendering behavior:\n *\n * **Solo modes** (DEFAULT, CARD, GHOST, COLLAPSIBLE) render in place with\n * appropriate chrome (fieldset, card, collapsible wrapper).\n *\n * **Container modes** (TABS, GRID, ACCORDION, etc.) are NOT rendered directly\n * by this component — the parent layout (`FormLayout`, `DisplayLayout`, or\n * another section-aware host) introspects its children, groups sections sharing\n * the same container appearance, and renders them via\n * `ContentSectionContainer`.\n *\n * **A solo form section with nothing to show hides.** One template serves several operations, and a\n * `FormField` whose field the operation's schema lacks (or whose condition hides it) renders nothing.\n * When a section holds only field slots (`FormField`, `FormFieldArray`, fields inside `ObjectScope` or\n * inside a plain layout element such as a grid `div`) and none of them renders, the section hides its\n * frame rather than showing a heading over nothing; its children stay mounted, so a field that starts\n * rendering brings it back. A section holding anything else — text, a custom control or wrapper\n * component (the engine's `Group` included), a nested section, a custom element, or a plain element\n * with no field slot inside at that moment (a spacer `div`, an `hr`, a `div` whose only slot sits in a\n * false branch) — is never hidden this way. A GROUPED section (grid, tabs, …) is decided by its host\n * instead, from the operation's schema, because its container draws it and a tab's panel is not mounted:\n * see `groupedSectionShowsNoField` in `FormLayout`.\n *\n * Supports:\n * - **Saveable sections** (form-only, section-level partial save)\n * - **Section-level chromeMode override** (cascaded to child fields)\n * - **defaultFocus** — initial active/expanded state\n *\n * @example Solo mode (renders in place):\n * ```tsx\n * <Section name=\"billing\" appearance={SectionMode.CARD}>\n *   <DisplayField name=\"plan\" />\n * </Section>\n * ```\n *\n * @example Container mode (grouped by parent layout):\n * ```tsx\n * <FormLayout>\n *   <Section name=\"general\" appearance={SectionMode.TABS} defaultFocus>\n *     <FormField name=\"name\" />\n *   </Section>\n *   <Section name=\"advanced\" appearance={SectionMode.TABS}>\n *     <FormField name=\"config\" />\n *   </Section>\n * </FormLayout>\n * ```\n */\nexport function Section(props: SectionProps): ReactNode {\n  const {\n    name,\n    className,\n    saveable,\n    chromeMode,\n    children,\n    defaultFocus = true,\n    hideTitle = false,\n    hideDescription = false,\n  } = props;\n\n  const appearance: SectionMode = props.appearance ?? SectionMode.DEFAULT;\n\n  const formCtx = useOptionalFormTemplateContext();\n  const displayCtx = useOptionalDisplayTemplateContext();\n  const sectionPresentation = useOptionalSectionPresentationContext();\n\n  const presentationEntry = sectionPresentation?.sectionEntries?.[name];\n  const presentationTitle = presentationEntry?.icon\n    ? (\n      <>\n        <span className=\"me-element inline-flex items-center\">{presentationEntry.icon}</span>\n        {presentationEntry.title ?? ''}\n      </>\n    )\n    : presentationEntry?.title;\n\n  const legend = formCtx?.sectionLabels?.[name]\n    ?? displayCtx?.sectionLabels?.[name]\n    ?? presentationTitle;\n  const description = formCtx?.sectionDescriptions?.[name]\n    ?? displayCtx?.sectionDescriptions?.[name]\n    ?? presentationEntry?.description;\n  // Two independent hide concerns. Resolving to `undefined` flows through the\n  // whole solo-render chrome contract: no legend/description on the\n  // ContentSection primitive AND (for the title) no heading-dedup signal.\n  const resolvedLegend = hideTitle ? undefined : legend;\n  const resolvedDescription = hideDescription ? undefined : description;\n  const disabled = props.disabled ?? formCtx?.disabled;\n  const onSectionSave = formCtx?.onSectionSave;\n  const isSaveable = !!(saveable && onSectionSave);\n  const sectionHostKind = formCtx\n    ? GroupedSectionHostKind.FORM\n    : displayCtx\n      ? GroupedSectionHostKind.DISPLAY\n      : sectionPresentation\n        ? GroupedSectionHostKind.COMPOSITE\n        : GroupedSectionHostKind.DISPLAY;\n  if (sectionHostKind === GroupedSectionHostKind.COMPOSITE && chromeMode) {\n    throw FrontendResourceUtils.buildConfigurationError(\n      ErrorCustomMessageReference.CONFIGURATION,\n      {\n        component: 'Section',\n        message: 'Section chromeMode is only supported inside form/display section hosts. Composite-hosted sections must not declare chromeMode until a dedicated composite chrome contract exists.',\n        sectionName: name,\n      },\n    );\n  }\n  const sectionFieldsContextValue = useSectionFieldsRegistry();\n  const showsNoField = useSectionShowsNoField(sectionFieldsContextValue);\n  // Every slot this section holds, read from its elements: a collapsed section's fields, or an unchosen\n  // variant's, are not mounted, so they cannot report themselves (see `TemplatePlacedFieldsContext`).\n  const { pathPrefix } = useFieldScope();\n  useTemplatePlacedFieldsOf(children, pathPrefix);\n  // Only a section of nothing but field slots may hide for its fields' absence; anything else beside\n  // them (text, a custom control, a nested section) is content of its own that presence cannot see.\n  const isEmptyForThisOperation = showsNoField && holdsOnlyFieldSlots(children);\n\n  // Container modes: render children as-is. The parent layout handles grouping.\n  if (!isSoloMode(appearance)) {\n    // Footgun guard: a container-mode section (GRID/TABS/COLUMNS/…) only receives\n    // chrome (card, padding, title) when a layout HOST groups it into a\n    // ContentSectionContainer. Reaching this branch means the section escaped\n    // grouping — almost always because it was wrapped in a custom component\n    // (hiding it from the host's `groupSectionsByAppearance` scan) or rendered\n    // standalone — so it renders BARE (raw children only, no chrome). Warn so the\n    // silent \"no chrome\" outcome is visible; for a single self-contained section\n    // use a solo appearance (DEFAULT / CARD / GHOST) instead.\n    if (process.env.NODE_ENV !== 'production') {\n      const warnKey = `${name}:${appearance}`;\n      if (!warnedUngroupedContainerSections.has(warnKey)) {\n        warnedUngroupedContainerSections.add(warnKey);\n        logger.warn(\n          `[Section] container-mode section \"${name}\" (appearance=\"${appearance}\") is rendering ungrouped — no section chrome (card / padding / title), only its raw children. Container modes must be DIRECT <Section> children of a layout host (FormLayout / DisplayLayout / CompositeLayout) to be grouped. This usually means the <Section> is wrapped in a custom component or rendered standalone. Use a solo appearance (DEFAULT / CARD / GHOST) for a single self-contained section.`,\n          { sectionName: name, appearance },\n        );\n      }\n    }\n    return <>{children}</>;\n  }\n\n  // When this section renders its own heading (legend), tell descendant resource\n  // operation surfaces so an embedded list/etc. doesn't ALSO render its generic\n  // resource heading right under ours (the \"To-Do Lists\" + \"Todo Lists\" double\n  // heading). Record-specific headings (a READ view's displayLabel) are NOT\n  // suppressed — the consumer gates on the absence of a displayLabel.\n  const content = (\n    <SectionHostHeadingContext.Provider value={!!resolvedLegend}>\n      <SectionFieldsContext.Provider value={sectionFieldsContextValue}>\n        <SectionContentWithHostChrome\n          hostKind={sectionHostKind}\n          chromeMode={chromeMode}\n        >\n          {children}\n        </SectionContentWithHostChrome>\n        {isSaveable && <SectionSaveButton sectionName={name} disabled={disabled} />}\n      </SectionFieldsContext.Provider>\n    </SectionHostHeadingContext.Provider>\n  );\n\n  // All four solo modes (DEFAULT / CARD / GHOST / COLLAPSIBLE) are rendered by\n  // the ContentSection primitive, which owns the per-mode chrome: a native\n  // <fieldset> (DEFAULT/CARD — the disabled cascade carrier; a card always paints its frame), a\n  // flat <div> (GHOST), or a Collapsible toggle (COLLAPSIBLE). The legend and\n  // description are passed as structured props so the primitive can place the\n  // legend as a fieldset <legend> or a collapsible trigger as the mode requires.\n  return (\n    <ContentSection\n      appearance={appearance as SoloSectionMode}\n      legend={resolvedLegend}\n      description={resolvedDescription}\n      disabled={disabled}\n      defaultOpen={defaultFocus}\n      className={className}\n      data-guidance-section={name}\n      data-composite-section={sectionHostKind === GroupedSectionHostKind.COMPOSITE ? name : undefined}\n      // It holds only field slots and none renders for this operation (a template serves several\n      // operations, and this one posts none of these fields): a heading over nothing. The children stay\n      // mounted, so a field whose condition turns true reports and brings the section back.\n      hidden={isEmptyForThisOperation || undefined}\n    >\n      {content}\n    </ContentSection>\n  );\n}\n\nSection.displayName = 'Section';\n\nexport function GroupedSectionBody({\n  hostKind,\n  sectionProps,\n  providesHeading = false,\n}: GroupedSectionBodyProps): ReactNode {\n  const { children, chromeMode, saveable, name, className, disabled } = sectionProps;\n  const sectionFieldsContextValue = useSectionFieldsRegistry();\n\n  let content: ReactNode = children;\n  if (hostKind === GroupedSectionHostKind.FORM) {\n    content = (\n      <SectionFieldsContext.Provider value={sectionFieldsContextValue}>\n        <SectionContentWithHostChrome hostKind={hostKind} chromeMode={chromeMode}>\n          {children}\n        </SectionContentWithHostChrome>\n        {saveable && <SectionSaveButton sectionName={name} disabled={disabled} />}\n      </SectionFieldsContext.Provider>\n    );\n  } else {\n    content = (\n      <SectionContentWithHostChrome hostKind={hostKind} chromeMode={chromeMode}>\n        {children}\n      </SectionContentWithHostChrome>\n    );\n  }\n\n  return (\n    // Same de-duplication contract as the solo-section path (see the provider\n    // around `content` in Section above): when the grouping container renders\n    // this section's title, an embedded resource surface must not stack its\n    // own generic heading + breadcrumb under it.\n    <SectionHostHeadingContext.Provider value={providesHeading}>\n      <div\n        className={className ? `space-y-field ${className}` : 'space-y-field'}\n        data-guidance-section={name}\n        data-composite-section={hostKind === GroupedSectionHostKind.COMPOSITE ? name : undefined}\n      >\n        {content}\n      </div>\n    </SectionHostHeadingContext.Provider>\n  );\n}\n\nfunction SectionContentWithHostChrome({\n  hostKind,\n  chromeMode,\n  children,\n}: {\n  hostKind: GroupedSectionHostKind;\n  chromeMode?: SectionProps['chromeMode'];\n  children: ReactNode;\n}): ReactNode {\n  if (!chromeMode) {\n    return children;\n  }\n\n  if (hostKind === GroupedSectionHostKind.FORM) {\n    return <FormChromeProvider sectionChromeMode={chromeMode}>{children}</FormChromeProvider>;\n  }\n\n  if (hostKind === GroupedSectionHostKind.DISPLAY) {\n    return <DisplayChromeProvider sectionChromeMode={toDisplayChromeMode(chromeMode)}>{children}</DisplayChromeProvider>;\n  }\n\n  return children;\n}\n\n\n// =============================================================================\n// SectionSaveButton (extracted to avoid useFormContext crash in display templates)\n// =============================================================================\n\nexport interface SectionSaveButtonProps {\n  sectionName: string;\n  disabled?: boolean;\n}\n\n/**\n * Section-level save button — only rendered inside form contexts.\n * Extracted from Section to isolate the useFormContext() call, preventing\n * crashes when Section is used inside display templates.\n *\n * Also rendered by `GroupedSectionBody` for grouped (tabbed/accordion)\n * container section panels mounted via `GroupedSectionContent` in\n * `FormLayout.tsx`.\n */\nexport function SectionSaveButton({ sectionName, disabled }: SectionSaveButtonProps): ReactNode {\n  const form = useFormContext();\n  const ctx = useOptionalFormTemplateContext();\n  const registeredFieldNames = useRegisteredSectionFields();\n  const [isSaving, setIsSaving] = useState(false);\n  const { tComponent, isReady } = useI18n({\n    component: FrontendComponentType.LOW_LEVEL_FORM_MESSAGE,\n  });\n\n  const onSectionSave = ctx?.onSectionSave;\n  if (!onSectionSave) return null;\n  if (!isReady) return null;\n\n  const handleSave = async () => {\n    if (registeredFieldNames.length === 0) {\n      return;\n    }\n\n    // An invalid section shows its errors and brings the first on screen; it used to stop with nothing visible.\n    if (!(await validateFieldsAndShowErrors(form, registeredFieldNames))) {\n      return;\n    }\n\n    setIsSaving(true);\n    try {\n      const formValues = form.getValues();\n      await onSectionSave(sectionName, registeredFieldNames, formValues as Record<string, unknown>);\n    } catch (error) {\n      // The form's own handler reports its failures and never throws; a caller-supplied one may. Logged rather than\n      // left to escape the click handler as an unhandled rejection.\n      logger.error('[SectionSaveButton] The section save handler threw.', { sectionName, error });\n    } finally {\n      setIsSaving(false);\n    }\n  };\n\n  const savingLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'sectionSaving');\n  const saveLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'sectionSave');\n\n  return (\n    <div className=\"flex justify-end pt-item\">\n      <Button\n        type=\"button\"\n        variant={ButtonVariants_Variant.SECONDARY}\n        size={ButtonSize.SM}\n        onClick={handleSave}\n        disabled={disabled || isSaving || registeredFieldNames.length === 0}\n      >\n        {isSaving ? savingLabel : saveLabel}\n      </Button>\n    </div>\n  );\n}\n"]}

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

@@ -54,9 +54,9 @@ export interface SummaryLayoutProps {
  * `<SummaryTitle />` into the flow (see {@link SummaryHeader}).
  *
  * The title resolves its text from `SummaryContext` (provided by
- * `ResourceSummaryDisplayer`); on body-only surfaces with no title (inline
- * FK-field references) `<SummaryTitle />` renders nothing, so `AUTO` shows no
- * empty title slot.
+ * `ResourceSummaryDisplayer`); a host that draws the record's name itself passes
+ * none (the no-template list card, the read summary's fallback), and then
+ * `<SummaryTitle />` renders nothing, so `AUTO` shows no empty title slot.
  *
  * ## It owns its own root chrome, and the FLOW is declared rather than drawn
  *

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

@@ -81,9 +81,9 @@ function templatePlacesItsOwnTitle(children) {
  * `<SummaryTitle />` into the flow (see {@link SummaryHeader}).
  *
  * The title resolves its text from `SummaryContext` (provided by
- * `ResourceSummaryDisplayer`); on body-only surfaces with no title (inline
- * FK-field references) `<SummaryTitle />` renders nothing, so `AUTO` shows no
- * empty title slot.
+ * `ResourceSummaryDisplayer`); a host that draws the record's name itself passes
+ * none (the no-template list card, the read summary's fallback), and then
+ * `<SummaryTitle />` renders nothing, so `AUTO` shows no empty title slot.
  *
  * ## It owns its own root chrome, and the FLOW is declared rather than drawn
  *

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryLayout.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/SummaryLayout.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAN,IAAY,qBAcX;AAdD,WAAY,qBAAqB;IAC/B;;;;OAIG;IACH,sCAAa,CAAA;IACb;;;;;OAKG;IACH,0DAAiC,CAAA;AACnC,CAAC,EAdW,qBAAqB,KAArB,qBAAqB,QAchC;AAED;;;;;GAKG;AACH,MAAM,CAAN,IAAY,WAKX;AALD,WAAY,WAAW;IACrB,kFAAkF;IAClF,8BAAe,CAAA;IACf,gGAAgG;IAChG,0BAAW,CAAA;AACb,CAAC,EALW,WAAW,KAAX,WAAW,QAKtB;AAED,2FAA2F;AAC3F,MAAM,oBAAoB,GAAgC;IACxD,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,mCAAmC;IACxD,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,4DAA4D;CAChF,CAAC;AAgBF;;;;;;;;;;;;GAYG;AACH,SAAS,yBAAyB,CAAC,QAAmB;IACpD,IAAI,KAAK,GAAG,KAAK,CAAC;IAClB,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnC,IAAI,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;YAAE,OAAO;QAC5C,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;YAChC,KAAK,GAAG,IAAI,CAAC;YACb,OAAO;QACT,CAAC;QACD,MAAM,MAAM,GAAI,KAAK,CAAC,KAA8C,EAAE,QAAQ,CAAC;QAC/E,IAAI,MAAM,KAAK,SAAS,IAAI,yBAAyB,CAAC,MAAM,CAAC;YAAE,KAAK,GAAG,IAAI,CAAC;IAC9E,CAAC,CAAC,CAAC;IACH,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,GAAG,WAAW,CAAC,KAAK,EACxB,SAAS,EACT,cAAc,GAAG,qBAAqB,CAAC,IAAI,EAC3C,QAAQ,GACW;IACnB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,MAAM,SAAS,GAAG,cAAc,KAAK,qBAAqB,CAAC,IAAI;WAC1D,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,kBAAkB,IAAC,UAAU,EAAC,EAAE,YAC/B,eAAK,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,aACtD,SAAS,IAAI,KAAC,YAAY,KAAG,EAC7B,QAAQ,IACL,GACa,CACtB,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { Children, isValidElement } from 'react';\nimport type { ReactNode } from 'react';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { FieldScopeProvider } from './FieldScopeContext';\nimport { SummaryTitle } from './SummaryTitle';\n\n/**\n * Where the primary title (`<SummaryTitle />`) is placed within a summary\n * template. The placement decision lives HERE, in the template markup that\n * governs it — not in a parallel `layout.*` config field.\n */\nexport enum SummaryTitlePlacement {\n  /**\n   * Framework places the title automatically at the top of the template, above\n   * the authored children. The zero-boilerplate, title-above-body default —\n   * matches the classic list/card summary look.\n   */\n  AUTO = 'auto',\n  /**\n   * The author owns title placement: `SummaryLayout` renders only its children,\n   * and the author drops `<SummaryTitle />` wherever it belongs (e.g. inside a\n   * `<SummaryHeader>` beside a status badge). Required whenever the title must\n   * share a line with other content.\n   */\n  TEMPLATE_OWNED = 'template-owned',\n}\n\n/**\n * How a summary's own children are arranged.\n *\n * A behavior, not a style: the caller says which of the two summaries this is, and the classes each\n * resolves to stay here where a theme can reach them.\n */\nexport enum SummaryFlow {\n  /** Title above a short body — the ordinary card, list-row and popover summary. */\n  STACK = 'stack',\n  /** One wrapping line of values — for a summary that IS its meta row, with no title above it. */\n  ROW = 'row',\n}\n\n/** The geometry each flow resolves to. Tokens, not raw steps: `gap-element` IS `gap-2`. */\nconst SUMMARY_FLOW_CLASSES: Record<SummaryFlow, string> = {\n  [SummaryFlow.STACK]: 'flex flex-col gap-element text-sm',\n  [SummaryFlow.ROW]: 'flex flex-wrap items-center gap-x-group gap-y-item text-sm',\n};\n\nexport interface SummaryLayoutProps {\n  /** How the children are arranged. Defaults to {@link SummaryFlow.STACK}. */\n  flow?: SummaryFlow;\n  /** Additional CSS classes for the root container. */\n  className?: string;\n  /**\n   * Title placement. Defaults to {@link SummaryTitlePlacement.AUTO} (title\n   * rendered at the top). Switch to `TEMPLATE_OWNED` to place `<SummaryTitle />`\n   * yourself within the flow.\n   */\n  titlePlacement?: SummaryTitlePlacement;\n  children?: ReactNode;\n}\n\n/**\n * Does this template place its OWN title?\n *\n * Walks the statically-composed children for a `<SummaryTitle>` element, at any depth — the\n * documented inline-title shape nests it inside `<SummaryHeader>`, so a shallow check would miss\n * exactly the arrangement `TEMPLATE_OWNED` exists for.\n *\n * RESIDUAL, stated rather than hidden: a title rendered by a nested COMPONENT of the author's own\n * (rather than as JSX in the template) is invisible here, and that template would still double its\n * title. Every summary template in the repository composes its children inline, so the population\n * this cannot see is currently empty; a `React.Children` walk is the honest limit of what a parent\n * can know before its children render.\n */\nfunction templatePlacesItsOwnTitle(children: ReactNode): boolean {\n  let found = false;\n  Children.forEach(children, (child) => {\n    if (found || !isValidElement(child)) return;\n    if (child.type === SummaryTitle) {\n      found = true;\n      return;\n    }\n    const nested = (child.props as { children?: ReactNode } | undefined)?.children;\n    if (nested !== undefined && templatePlacesItsOwnTitle(nested)) found = true;\n  });\n  return found;\n}\n\n/**\n * Root wrapper for summary layout templates (cards, list items, FK references).\n *\n * Owns TITLE PLACEMENT for the template: under `AUTO` (default) it renders\n * `<SummaryTitle />` at the top, then the children body — so an author who just\n * wants \"title above a couple of fields\" writes nothing about the title. Under\n * `TEMPLATE_OWNED` it renders only the children, and the author composes\n * `<SummaryTitle />` into the flow (see {@link SummaryHeader}).\n *\n * The title resolves its text from `SummaryContext` (provided by\n * `ResourceSummaryDisplayer`); on body-only surfaces with no title (inline\n * FK-field references) `<SummaryTitle />` renders nothing, so `AUTO` shows no\n * empty title slot.\n *\n * ## It owns its own root chrome, and the FLOW is declared rather than drawn\n *\n * The geometry used to be passed in by every caller, and enumerating those callers is what settled\n * the shape of this prop. Across the engine's own resource presets there are exactly two summaries:\n *\n * - **39 stacked** — `className=\"flex flex-col gap-2 text-sm\"` (22) or a bare `text-sm` (4), plus\n *   the workbench's own; a title with a short body beneath it.\n * - **13 in a single wrapping row** — `className=\"flex flex-wrap items-center gap-x-3 gap-y-1\n *   text-sm\"`; a summary that IS its meta line, with no title above it.\n *\n * So the honest default is not one geometry but a CHOICE of two, and shipping only the stack would\n * have been actively wrong: `flex-wrap` and `flex-col` are different conflict groups, so a caller\n * passing the row geometry over a `flex-col` default gets a wrapping COLUMN — thirteen surfaces\n * silently rearranged. Naming the two lets a caller say which one it is and lets the theme own what\n * each looks like.\n *\n * `SummaryFlow.ROW` is deliberately the same geometry as {@link SummaryMeta}: a summary that is only\n * a meta line and a meta line inside a stacked summary are the same thing at different levels, and\n * they should not be able to drift apart.\n *\n * Provides a root `FieldScopeContext` with empty prefix.\n *\n * @example\n * ```tsx\n * // AUTO — title rendered above the body automatically:\n * <SummaryLayout>\n *   <DisplayField name=\"createdAt\" />\n * </SummaryLayout>\n *\n * // TEMPLATE_OWNED — badge on the same line as the title:\n * <SummaryLayout titlePlacement={SummaryTitlePlacement.TEMPLATE_OWNED}>\n *   <SummaryHeader>\n *     <SummaryTitle />\n *     <DisplayField name=\"status\" hideLabel />\n *   </SummaryHeader>\n *   <DisplayField name=\"createdAt\" />\n * </SummaryLayout>\n * ```\n */\nexport function SummaryLayout({\n  flow = SummaryFlow.STACK,\n  className,\n  titlePlacement = SummaryTitlePlacement.AUTO,\n  children,\n}: SummaryLayoutProps): ReactNode {\n  /*\n   * AUTO means \"the framework places the title\". A template that places one ITSELF has already\n   * discharged that, whatever it declared — so placing a second is not a stricter reading of the\n   * contract, it is the contract contradicting itself on screen.\n   *\n   * Measured 2026-09-20 across every summary template in `engine/presets-components`, `platform/`\n   * and `examples/`: of 72 `<SummaryLayout>` blocks, **20 mount their own `<SummaryTitle>` while\n   * leaving `titlePlacement` at AUTO** — organizations, billing, identity, security, application and\n   * a Wonder app's pipeline stage. Every one of them rendered two titles. The audit trail's is the\n   * clearest to read, showing `eventType — <ISO timestamp>` and then `eventType` again on the line\n   * below; `pipeline-stage.ui-behavior.tsx` is the purest, mounting the LABEL form under AUTO so the\n   * same string printed twice verbatim.\n   *\n   * Twenty of seventy-two is not twenty authoring slips. It is a default that asks to be\n   * countermanded by a declaration nobody has a reason to remember, and the framework is the only\n   * party that can see both halves — so it is the one that should reconcile them.\n   *\n   * The author's title WINS, deliberately. `<SummaryTitle name=\"x\" />` is a statement about what the\n   * title of this card IS; the framework's automatic one is a default standing in for the absence of\n   * such a statement. When both are present, only one of them was chosen.\n   */\n  const autoTitle = titlePlacement === SummaryTitlePlacement.AUTO\n    && !templatePlacesItsOwnTitle(children);\n\n  return (\n    <FieldScopeProvider pathPrefix=\"\">\n      <div className={cn(SUMMARY_FLOW_CLASSES[flow], className)}>\n        {autoTitle && <SummaryTitle />}\n        {children}\n      </div>\n    </FieldScopeProvider>\n  );\n}\n"]}
+{"version":3,"file":"SummaryLayout.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/SummaryLayout.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAN,IAAY,qBAcX;AAdD,WAAY,qBAAqB;IAC/B;;;;OAIG;IACH,sCAAa,CAAA;IACb;;;;;OAKG;IACH,0DAAiC,CAAA;AACnC,CAAC,EAdW,qBAAqB,KAArB,qBAAqB,QAchC;AAED;;;;;GAKG;AACH,MAAM,CAAN,IAAY,WAKX;AALD,WAAY,WAAW;IACrB,kFAAkF;IAClF,8BAAe,CAAA;IACf,gGAAgG;IAChG,0BAAW,CAAA;AACb,CAAC,EALW,WAAW,KAAX,WAAW,QAKtB;AAED,2FAA2F;AAC3F,MAAM,oBAAoB,GAAgC;IACxD,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,mCAAmC;IACxD,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,4DAA4D;CAChF,CAAC;AAgBF;;;;;;;;;;;;GAYG;AACH,SAAS,yBAAyB,CAAC,QAAmB;IACpD,IAAI,KAAK,GAAG,KAAK,CAAC;IAClB,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnC,IAAI,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;YAAE,OAAO;QAC5C,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;YAChC,KAAK,GAAG,IAAI,CAAC;YACb,OAAO;QACT,CAAC;QACD,MAAM,MAAM,GAAI,KAAK,CAAC,KAA8C,EAAE,QAAQ,CAAC;QAC/E,IAAI,MAAM,KAAK,SAAS,IAAI,yBAAyB,CAAC,MAAM,CAAC;YAAE,KAAK,GAAG,IAAI,CAAC;IAC9E,CAAC,CAAC,CAAC;IACH,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,GAAG,WAAW,CAAC,KAAK,EACxB,SAAS,EACT,cAAc,GAAG,qBAAqB,CAAC,IAAI,EAC3C,QAAQ,GACW;IACnB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,MAAM,SAAS,GAAG,cAAc,KAAK,qBAAqB,CAAC,IAAI;WAC1D,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,kBAAkB,IAAC,UAAU,EAAC,EAAE,YAC/B,eAAK,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,aACtD,SAAS,IAAI,KAAC,YAAY,KAAG,EAC7B,QAAQ,IACL,GACa,CACtB,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { Children, isValidElement } from 'react';\nimport type { ReactNode } from 'react';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { FieldScopeProvider } from './FieldScopeContext';\nimport { SummaryTitle } from './SummaryTitle';\n\n/**\n * Where the primary title (`<SummaryTitle />`) is placed within a summary\n * template. The placement decision lives HERE, in the template markup that\n * governs it — not in a parallel `layout.*` config field.\n */\nexport enum SummaryTitlePlacement {\n  /**\n   * Framework places the title automatically at the top of the template, above\n   * the authored children. The zero-boilerplate, title-above-body default —\n   * matches the classic list/card summary look.\n   */\n  AUTO = 'auto',\n  /**\n   * The author owns title placement: `SummaryLayout` renders only its children,\n   * and the author drops `<SummaryTitle />` wherever it belongs (e.g. inside a\n   * `<SummaryHeader>` beside a status badge). Required whenever the title must\n   * share a line with other content.\n   */\n  TEMPLATE_OWNED = 'template-owned',\n}\n\n/**\n * How a summary's own children are arranged.\n *\n * A behavior, not a style: the caller says which of the two summaries this is, and the classes each\n * resolves to stay here where a theme can reach them.\n */\nexport enum SummaryFlow {\n  /** Title above a short body — the ordinary card, list-row and popover summary. */\n  STACK = 'stack',\n  /** One wrapping line of values — for a summary that IS its meta row, with no title above it. */\n  ROW = 'row',\n}\n\n/** The geometry each flow resolves to. Tokens, not raw steps: `gap-element` IS `gap-2`. */\nconst SUMMARY_FLOW_CLASSES: Record<SummaryFlow, string> = {\n  [SummaryFlow.STACK]: 'flex flex-col gap-element text-sm',\n  [SummaryFlow.ROW]: 'flex flex-wrap items-center gap-x-group gap-y-item text-sm',\n};\n\nexport interface SummaryLayoutProps {\n  /** How the children are arranged. Defaults to {@link SummaryFlow.STACK}. */\n  flow?: SummaryFlow;\n  /** Additional CSS classes for the root container. */\n  className?: string;\n  /**\n   * Title placement. Defaults to {@link SummaryTitlePlacement.AUTO} (title\n   * rendered at the top). Switch to `TEMPLATE_OWNED` to place `<SummaryTitle />`\n   * yourself within the flow.\n   */\n  titlePlacement?: SummaryTitlePlacement;\n  children?: ReactNode;\n}\n\n/**\n * Does this template place its OWN title?\n *\n * Walks the statically-composed children for a `<SummaryTitle>` element, at any depth — the\n * documented inline-title shape nests it inside `<SummaryHeader>`, so a shallow check would miss\n * exactly the arrangement `TEMPLATE_OWNED` exists for.\n *\n * RESIDUAL, stated rather than hidden: a title rendered by a nested COMPONENT of the author's own\n * (rather than as JSX in the template) is invisible here, and that template would still double its\n * title. Every summary template in the repository composes its children inline, so the population\n * this cannot see is currently empty; a `React.Children` walk is the honest limit of what a parent\n * can know before its children render.\n */\nfunction templatePlacesItsOwnTitle(children: ReactNode): boolean {\n  let found = false;\n  Children.forEach(children, (child) => {\n    if (found || !isValidElement(child)) return;\n    if (child.type === SummaryTitle) {\n      found = true;\n      return;\n    }\n    const nested = (child.props as { children?: ReactNode } | undefined)?.children;\n    if (nested !== undefined && templatePlacesItsOwnTitle(nested)) found = true;\n  });\n  return found;\n}\n\n/**\n * Root wrapper for summary layout templates (cards, list items, FK references).\n *\n * Owns TITLE PLACEMENT for the template: under `AUTO` (default) it renders\n * `<SummaryTitle />` at the top, then the children body — so an author who just\n * wants \"title above a couple of fields\" writes nothing about the title. Under\n * `TEMPLATE_OWNED` it renders only the children, and the author composes\n * `<SummaryTitle />` into the flow (see {@link SummaryHeader}).\n *\n * The title resolves its text from `SummaryContext` (provided by\n * `ResourceSummaryDisplayer`); a host that draws the record's name itself passes\n * none (the no-template list card, the read summary's fallback), and then\n * `<SummaryTitle />` renders nothing, so `AUTO` shows no empty title slot.\n *\n * ## It owns its own root chrome, and the FLOW is declared rather than drawn\n *\n * The geometry used to be passed in by every caller, and enumerating those callers is what settled\n * the shape of this prop. Across the engine's own resource presets there are exactly two summaries:\n *\n * - **39 stacked** — `className=\"flex flex-col gap-2 text-sm\"` (22) or a bare `text-sm` (4), plus\n *   the workbench's own; a title with a short body beneath it.\n * - **13 in a single wrapping row** — `className=\"flex flex-wrap items-center gap-x-3 gap-y-1\n *   text-sm\"`; a summary that IS its meta line, with no title above it.\n *\n * So the honest default is not one geometry but a CHOICE of two, and shipping only the stack would\n * have been actively wrong: `flex-wrap` and `flex-col` are different conflict groups, so a caller\n * passing the row geometry over a `flex-col` default gets a wrapping COLUMN — thirteen surfaces\n * silently rearranged. Naming the two lets a caller say which one it is and lets the theme own what\n * each looks like.\n *\n * `SummaryFlow.ROW` is deliberately the same geometry as {@link SummaryMeta}: a summary that is only\n * a meta line and a meta line inside a stacked summary are the same thing at different levels, and\n * they should not be able to drift apart.\n *\n * Provides a root `FieldScopeContext` with empty prefix.\n *\n * @example\n * ```tsx\n * // AUTO — title rendered above the body automatically:\n * <SummaryLayout>\n *   <DisplayField name=\"createdAt\" />\n * </SummaryLayout>\n *\n * // TEMPLATE_OWNED — badge on the same line as the title:\n * <SummaryLayout titlePlacement={SummaryTitlePlacement.TEMPLATE_OWNED}>\n *   <SummaryHeader>\n *     <SummaryTitle />\n *     <DisplayField name=\"status\" hideLabel />\n *   </SummaryHeader>\n *   <DisplayField name=\"createdAt\" />\n * </SummaryLayout>\n * ```\n */\nexport function SummaryLayout({\n  flow = SummaryFlow.STACK,\n  className,\n  titlePlacement = SummaryTitlePlacement.AUTO,\n  children,\n}: SummaryLayoutProps): ReactNode {\n  /*\n   * AUTO means \"the framework places the title\". A template that places one ITSELF has already\n   * discharged that, whatever it declared — so placing a second is not a stricter reading of the\n   * contract, it is the contract contradicting itself on screen.\n   *\n   * Measured 2026-09-20 across every summary template in `engine/presets-components`, `platform/`\n   * and `examples/`: of 72 `<SummaryLayout>` blocks, **20 mount their own `<SummaryTitle>` while\n   * leaving `titlePlacement` at AUTO** — organizations, billing, identity, security, application and\n   * a Wonder app's pipeline stage. Every one of them rendered two titles. The audit trail's is the\n   * clearest to read, showing `eventType — <ISO timestamp>` and then `eventType` again on the line\n   * below; `pipeline-stage.ui-behavior.tsx` is the purest, mounting the LABEL form under AUTO so the\n   * same string printed twice verbatim.\n   *\n   * Twenty of seventy-two is not twenty authoring slips. It is a default that asks to be\n   * countermanded by a declaration nobody has a reason to remember, and the framework is the only\n   * party that can see both halves — so it is the one that should reconcile them.\n   *\n   * The author's title WINS, deliberately. `<SummaryTitle name=\"x\" />` is a statement about what the\n   * title of this card IS; the framework's automatic one is a default standing in for the absence of\n   * such a statement. When both are present, only one of them was chosen.\n   */\n  const autoTitle = titlePlacement === SummaryTitlePlacement.AUTO\n    && !templatePlacesItsOwnTitle(children);\n\n  return (\n    <FieldScopeProvider pathPrefix=\"\">\n      <div className={cn(SUMMARY_FLOW_CLASSES[flow], className)}>\n        {autoTitle && <SummaryTitle />}\n        {children}\n      </div>\n    </FieldScopeProvider>\n  );\n}\n"]}

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

@@ -16,15 +16,17 @@ export interface WizardLayoutProps {
  * Wizard container for multi-step form templates.
  *
  * Manages step state, renders a Stepper UI, navigation buttons (prev/next/submit),
- * and per-step validation. All steps remain mounted (hidden with `display: none`)
- * so that RHF retains field state across steps.
+ * and per-step validation. All steps remain mounted (the inactive ones `hidden`)
+ * so that RHF retains field state across steps; a field on a hidden step is shown
+ * on request by the error scroll (`field-reveal.ts`).
  *
- * Children must be `<WizardStep>` components. Non-WizardStep children are
- * silently filtered out.
+ * Children must be `<WizardStep>` components, directly or inside a Fragment. Other
+ * children are filtered out.
  *
  * Under a resource form (a create or edit dialog or page) the wizard OWNS the form's footer: it claims it
  * (`claimFooter`) and renders the host's Cancel, draft-save and operation-named submit inside its own
- * navigation row — the submit on the last step only. Otherwise the host appended its own Cancel/Create row
+ * navigation row: the submit on the last step when the form creates a record, and on every step when it edits one
+ * that exists (`submitOnEveryStep`). Otherwise the host appended its own Cancel/Create row
  * under the wizard's Previous/Next, so "Create" on step 1 submitted without the later steps ever being seen,
  * and the last step offered two submit buttons.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"WizardLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/WizardLayout.tsx"],"names":[],"mappings":"AAEA,OAAc,EAA2D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBvG,MAAM,WAAW,iBAAiB;IAChC,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mGAAmG;IACnG,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,uEAAuE;IACvE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,8EAA8E;IAC9E,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAe,EACf,oBAA2B,EAC3B,YAAY,EACZ,YAAY,EACZ,QAAQ,GACT,EAAE,iBAAiB,GAAG,SAAS,CAyL/B"}
+{"version":3,"file":"WizardLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/WizardLayout.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAkF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgC9H,MAAM,WAAW,iBAAiB;IAChC,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mGAAmG;IACnG,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,uEAAuE;IACvE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,8EAA8E;IAC9E,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAmCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAe,EACf,oBAA2B,EAC3B,YAAY,EACZ,YAAY,EACZ,QAAQ,GACT,EAAE,iBAAiB,GAAG,SAAS,CAmS/B"}

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { get, useFormContext } from 'react-hook-form';
 import { DisplayDirection } from '@wildo-ai/zod-decorators';
 import { FrontendComponentType } from '@wildo-ai/presets-components-models';
 import { Button, ButtonVariants_Variant } from '../../../components/actions/button.js';
@@ -10,23 +10,65 @@ import { ErrorBoundary } from '../../../core/errors/ErrorBoundary.js';
 import { useI18n } from '../../../core/i18n/useI18n.js';
 import { useOptionalFormTemplateContext } from '../../../components/form/automated/FormTemplateContext.js';
 import { useOptionalResourceFormActions } from '../../../components/form/automated/ResourceFormActionsContext.js';
-import { scrollAndFocusFirstErroredField } from '../../../components/form/validation-errors/scroll-to-first-error.utils.js';
+import { UnplacedRequestFieldsContext } from '../../../components/form/automated/unplaced-request-fields.context.js';
+import { validateFieldsAndShowErrors } from '../../../components/form/validation-errors/validate-fields-and-show-errors.js';
+import { fieldRevealPanelAttributes, useFieldRevealRequests } from '../../../components/form/validation-errors/field-reveal.js';
+import { LoggerFrontendService } from '../../../core/monitoring/logger.frontend.service.js';
 import { useWizardRootRegistration } from './FormLayoutSlotContext.js';
-import { WizardLayoutContext } from './WizardLayoutContext.js';
+import { WizardLayoutContext, WizardStepTrailingContentContext } from './WizardLayoutContext.js';
 import { WizardStep } from './WizardStep.js';
+const logger = LoggerFrontendService.getLogger();
+const NO_ERROR_STEPS = new Set();
+function sameSteps(a, b) {
+    return a.size === b.size && [...a].every((step) => b.has(step));
+}
+/**
+ * Input types in which Enter submits the enclosing form (HTML implicit submission). Enter in a checkbox, a radio, a
+ * button or a file picker does not, and a textarea takes Enter as a new line.
+ */
+const NON_SUBMITTING_INPUT_TYPES = new Set(['checkbox', 'radio', 'button', 'submit', 'reset', 'file', 'image', 'range', 'color', 'hidden']);
+/** Within this long after reaching the last step, the second click of a double-click is not a submit. */
+const DOUBLE_CLICK_THROUGH_WINDOW_MS = 600;
+/**
+ * The `<WizardStep>` children, in order, including steps an author wrapped in a Fragment (a conditional group of
+ * steps reads naturally as `{advanced && (<>…</>)}`, and `React.Children` does not look inside Fragments, so those
+ * steps were silently dropped). A step name used twice is reported: the name keys the step's fields, its panel id and
+ * its labels, so the second step would read and validate the first one's.
+ */
+function collectWizardSteps(children, steps = []) {
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child))
+            return;
+        if (child.type === React.Fragment) {
+            collectWizardSteps(child.props.children, steps);
+            return;
+        }
+        if (child.type !== WizardStep)
+            return;
+        const name = child.props.name;
+        if (steps.some((step) => step.name === name)) {
+            logger.error(`[WizardLayout] Two steps are named "${name}"; a step name must be unique. The second is ignored.`);
+            return;
+        }
+        steps.push({ name, element: child });
+    });
+    return steps;
+}
 /**
  * Wizard container for multi-step form templates.
  *
  * Manages step state, renders a Stepper UI, navigation buttons (prev/next/submit),
- * and per-step validation. All steps remain mounted (hidden with `display: none`)
- * so that RHF retains field state across steps.
+ * and per-step validation. All steps remain mounted (the inactive ones `hidden`)
+ * so that RHF retains field state across steps; a field on a hidden step is shown
+ * on request by the error scroll (`field-reveal.ts`).
  *
- * Children must be `<WizardStep>` components. Non-WizardStep children are
- * silently filtered out.
+ * Children must be `<WizardStep>` components, directly or inside a Fragment. Other
+ * children are filtered out.
  *
  * Under a resource form (a create or edit dialog or page) the wizard OWNS the form's footer: it claims it
  * (`claimFooter`) and renders the host's Cancel, draft-save and operation-named submit inside its own
- * navigation row — the submit on the last step only. Otherwise the host appended its own Cancel/Create row
+ * navigation row: the submit on the last step when the form creates a record, and on every step when it edits one
+ * that exists (`submitOnEveryStep`). Otherwise the host appended its own Cancel/Create row
  * under the wizard's Previous/Next, so "Create" on step 1 submitted without the later steps ever being seen,
  * and the last step offered two submit buttons.
  *
@@ -48,31 +90,33 @@ import { WizardStep } from './WizardStep.js';
  */
 export function WizardLayout({ className, initialStep = 0, validateOnStepChange = true, onStepChange, submitButton, children, }) {
     useWizardRootRegistration();
-    const [currentStep, setCurrentStep] = useState(initialStep);
+    const [requestedStep, setRequestedStep] = useState(initialStep);
     const stepFieldsRef = useRef(new Map());
     const wizardTopRef = useRef(null);
+    /** Set when a step change should move focus to the new step (Next, Previous), not when a field is being revealed. */
+    const focusStepOnChangeRef = useRef(false);
+    const arrivedAtStepRef = useRef(0);
+    /** The furthest step reached: every step up to it can be gone back to by clicking it. */
+    const [furthestStep, setFurthestStep] = useState(initialStep);
+    const [errorSteps, setErrorSteps] = useState(NO_ERROR_STEPS);
     const form = useFormContext();
     const templateCtx = useOptionalFormTemplateContext();
     const hostActions = useOptionalResourceFormActions();
     const claimFooter = hostActions?.claimFooter;
+    // A custom operation's request fields its template does not place belong to the record the last step submits, so
+    // they are shown there, not below the navigation, outside every step (`unplaced-request-fields.context.ts`).
+    const unplacedRequestFields = useContext(UnplacedRequestFieldsContext);
+    const claimUnplacedRequestFields = unplacedRequestFields?.claim;
+    useLayoutEffect(() => claimUnplacedRequestFields?.(), [claimUnplacedRequestFields]);
     // Layout effect: the claim lands before paint, so the host's footer never flashes under the wizard.
     useLayoutEffect(() => claimFooter?.(), [claimFooter]);
     const { tComponent, isReady } = useI18n({
         component: FrontendComponentType.LOW_LEVEL_FORM_MESSAGE,
     });
-    const wizardSteps = useMemo(() => {
-        const steps = [];
-        React.Children.forEach(children, (child) => {
-            if (React.isValidElement(child) && child.type === WizardStep) {
-                steps.push({
-                    name: child.props.name,
-                    element: child,
-                });
-            }
-        });
-        return steps;
-    }, [children]);
+    const wizardSteps = useMemo(() => collectWizardSteps(children), [children]);
     const totalSteps = wizardSteps.length;
+    // A step can disappear (a conditional step): the wizard then stays on the last step that remains.
+    const currentStep = Math.min(requestedStep, Math.max(totalSteps - 1, 0));
     const registerStep = useCallback((name, fields) => {
         stepFieldsRef.current.set(name, fields);
     }, []);
@@ -102,29 +146,94 @@ export function WizardLayout({ className, initialStep = 0, validateOnStepChange
     const scrollToTop = () => {
         wizardTopRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
     };
-    const goToStep = (to) => {
+    const showStep = (to) => {
         const from = currentStep;
-        setCurrentStep(to);
+        arrivedAtStepRef.current = Date.now();
+        setRequestedStep(to);
+        setFurthestStep((furthest) => Math.max(furthest, to));
         onStepChange?.(from, to);
+    };
+    /*
+     * The steps whose fields hold an error, so the stepper marks them: after a failed submit every step used to look
+     * done, and a person had to page through the wizard to find the one in error. Derived from the form's errors and
+     * each step's registered fields, on every change of the errors.
+     */
+    useEffect(() => {
+        if (!form)
+            return undefined;
+        const compute = (errors) => {
+            const next = new Set();
+            wizardSteps.forEach((step, index) => {
+                const fields = stepFieldsRef.current.get(step.name);
+                if (fields && Array.from(fields).some((field) => get(errors, field) !== undefined))
+                    next.add(index);
+            });
+            setErrorSteps((previous) => (sameSteps(previous, next) ? previous : next));
+        };
+        compute(form.formState.errors);
+        return form.subscribe({ formState: { errors: true }, callback: ({ errors }) => compute(errors ?? {}) });
+    }, [form, wizardSteps]);
+    const goToStep = (to) => {
+        focusStepOnChangeRef.current = true;
+        showStep(to);
         scrollToTop();
     };
+    /*
+     * The steps not shown stay mounted (React Hook Form keeps their values), so after a failed submit the field holding
+     * the first error can be on a hidden step. The error scroll asks for it to be shown (`field-reveal.ts`), and the
+     * wizard goes to that step: scrolling to a field on a hidden step moved nothing, and the submit read as doing
+     * nothing. Focus is left to the scroll, which focuses the field itself.
+     */
+    const revealContainerId = useFieldRevealRequests((stepName) => {
+        const index = wizardSteps.findIndex((step) => step.name === stepName);
+        if (index < 0 || index === currentStep)
+            return false;
+        showStep(index);
+        return true;
+    });
+    // After Next or Previous, focus moves to the new step, which is named by its title: a keyboard or screen-reader user
+    // otherwise stays on a button whose step has gone, with nothing saying that anything changed.
+    useEffect(() => {
+        if (!focusStepOnChangeRef.current)
+            return;
+        focusStepOnChangeRef.current = false;
+        const stepName = wizardSteps[currentStep]?.name;
+        if (stepName)
+            document.getElementById(`wizard-step-${stepName}`)?.focus({ preventScroll: true });
+    }, [currentStep, wizardSteps]);
     const handlePrevious = () => {
         if (currentStep > 0) {
             goToStep(currentStep - 1);
         }
     };
+    /**
+     * Clicking a step. Back to any step reached so far, freely; FORWARD only past valid steps, so clicking a later step
+     * is never a way around Next's check. Editing a record that exists, every step is reachable, so a forward click can
+     * pass over several steps: EVERY step it passes is checked, not only the current one, which let a click from the
+     * first step to the last skip the ones between. When one fails, the error scroll shows its step (`field-reveal.ts`).
+     */
+    const handleStepSelect = async (to) => {
+        if (to > currentStep && !(await stepsAreValid(currentStep, to)))
+            return;
+        goToStep(to);
+    };
+    /** Whether the steps from `from` up to (not including) `to` are valid, showing what is wrong when they are not. */
+    const stepsAreValid = async (from, to) => {
+        if (!validateOnStepChange || !form)
+            return true;
+        const fieldNames = wizardSteps.slice(from, to).flatMap((step) => Array.from(stepFieldsRef.current.get(step.name) ?? []));
+        return validateFieldsAndShowErrors(form, fieldNames);
+    };
     const handleNext = async () => {
         if (validateOnStepChange && form) {
             const currentStepName = wizardSteps[currentStep]?.name;
             const stepFields = currentStepName
                 ? stepFieldsRef.current.get(currentStepName)
                 : undefined;
-            const fieldNames = stepFields ? Array.from(stepFields) : [];
-            const isValid = fieldNames.length
-                ? await form.trigger(fieldNames)
-                : await form.trigger();
-            if (!isValid) {
-                scrollToFirstError(form, fieldNames);
+            // Only the step's own fields. A step with none has nothing to check (`trigger()` with no names validated the
+            // WHOLE form, so a field-less step failed on later steps and could not be left), the errors become visible and
+            // the first is brought on screen, and a server error on the step still stops it.
+            if (!(await validateFieldsAndShowErrors(form, stepFields ? Array.from(stepFields) : []))) {
                 return;
             }
         }
@@ -134,44 +243,46 @@ export function WizardLayout({ className, initialStep = 0, validateOnStepChange
     };
     const isFirstStep = currentStep === 0;
     const isLastStep = currentStep === totalSteps - 1;
+    /*
+     * Enter in a text input submits the form (HTML implicit submission). Before the last step that sent the record with
+     * the later steps never seen: measured on the announcement wizard, whose first step holds one text input. Before the
+     * last step, Enter means Next. A control that handles Enter itself (a combobox choosing an option) has already
+     * called `preventDefault`, and is left alone; so is a composition still in progress (an IME).
+     */
+    const handleKeyDown = (event) => {
+        if (event.key !== 'Enter' || isLastStep || event.defaultPrevented || event.nativeEvent.isComposing)
+            return;
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement) || NON_SUBMITTING_INPUT_TYPES.has(target.type))
+            return;
+        event.preventDefault();
+        void handleNext();
+    };
+    /*
+     * The last step's submit sits where Next was. A double-click on Next went to the last step on its first click and
+     * SUBMITTED on its second. A click that is the second of a double-click, landing within a moment of arriving, is
+     * not taken as a submit.
+     */
+    const handleActionsClickCapture = (event) => {
+        if (event.detail > 1 && Date.now() - arrivedAtStepRef.current < DOUBLE_CLICK_THROUGH_WINDOW_MS) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
     if (!isReady)
         return null;
     const previousLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardPrevious');
     const nextLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardNext');
-    return (_jsx(WizardLayoutContext.Provider, { value: wizardContextValue, children: _jsxs("div", { className: className, "data-guidance-wizard": "", children: [_jsx("div", { ref: wizardTopRef, children: _jsx(Stepper, { currentStep: currentStep, totalSteps: totalSteps, orientation: DisplayDirection.HORIZONTAL, className: "mb-region", children: wizardSteps.map((step, index) => (_jsxs(React.Fragment, { children: [_jsxs(StepperItem, { step: index, children: [_jsx(StepperIndicator, { step: index }), _jsx("div", { className: "flex flex-col items-center text-center", children: _jsx(StepperTitle, { step: index, children: _jsx("span", { id: `wizard-tab-${step.name}`, children: getStepLabel(step.name, index) }) }) })] }), index < totalSteps - 1 && _jsx(StepperSeparator, { step: index })] }, step.name))) }) }), wizardSteps.map((step, index) => (_jsx("div", { style: { display: index === currentStep ? undefined : 'none' }, "aria-hidden": index !== currentStep, children: _jsx(ErrorBoundary, { children: step.element }) }, step.name))), hostActions?.submissionNotice, _jsxs("div", { className: "flex justify-between gap-field pt-field", children: [_jsx(Button, { type: "button", variant: ButtonVariants_Variant.OUTLINE, onClick: handlePrevious, disabled: isFirstStep || templateCtx?.disabled, children: previousLabel }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-element", children: [hostActions?.cancelButton, hostActions?.draftSaveButton, isLastStep ? (submitButton ?? hostActions?.submitButton ?? (_jsx(Button, { type: "submit", disabled: templateCtx?.disabled, children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardSubmit') }))) : (_jsx(Button, { type: "button", onClick: handleNext, disabled: templateCtx?.disabled, children: nextLabel }))] })] })] }) }));
-}
-/**
- * Scroll to the first field with a validation error.
- * Uses `data-field` or `name` attributes to locate the DOM element.
- */
-function scrollToFirstError(form, fieldNames) {
-    const errors = form.formState.errors;
-    let firstErrorField = null;
-    if (fieldNames?.length) {
-        for (const fieldName of fieldNames) {
-            const parts = fieldName.split('.');
-            let errorObj = errors;
-            for (const part of parts) {
-                if (errorObj && typeof errorObj === 'object' && part in errorObj) {
-                    errorObj = errorObj[part];
-                }
-                else {
-                    errorObj = undefined;
-                    break;
-                }
-            }
-            if (errorObj) {
-                firstErrorField = fieldName;
-                break;
-            }
-        }
-    }
-    if (!firstErrorField)
-        return;
-    // Shared scroll+focus mechanics (see scroll-to-first-error.utils, audit D4) —
-    // this wizard keeps its own STEP-SCOPED first-error selection above, but the
-    // DOM lookup / scroll / focus behavior is the same contract the whole-form
-    // submit path uses.
-    scrollAndFocusFirstErroredField([firstErrorField]);
+    const submit = submitButton ?? hostActions?.submitButton ?? (_jsx(Button, { type: "submit", disabled: templateCtx?.disabled, children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardSubmit') }, "submit"));
+    /*
+     * Editing a record that exists, every step can be saved: its fields all hold values already, and making a person
+     * click through every step to change one field is what a wizard is not for. Creating, the submit waits for the last
+     * step, because the steps collect what the record needs.
+     */
+    const submitOnEveryStep = templateCtx?.isExisting === true;
+    return (_jsx(WizardLayoutContext.Provider, { value: wizardContextValue, children: _jsxs("div", { className: className, "data-guidance-wizard": "", onKeyDown: handleKeyDown, children: [_jsx("div", { ref: wizardTopRef, children: _jsx(Stepper, { currentStep: currentStep, totalSteps: totalSteps, orientation: DisplayDirection.HORIZONTAL, className: "mb-region", role: "list", errorSteps: errorSteps, onStepSelect: (step) => { void handleStepSelect(step); }, isStepSelectable: (step) => step !== currentStep && (templateCtx?.isExisting === true || step <= furthestStep), children: wizardSteps.map((step, index) => (_jsxs(React.Fragment, { children: [_jsxs(StepperItem, { step: index, role: "listitem", "aria-current": index === currentStep ? 'step' : undefined, children: [_jsx(StepperIndicator, { step: index, "aria-hidden": "true" }), _jsx("span", { className: "flex flex-col items-center text-center", children: _jsx(StepperTitle, { step: index, children: _jsx("span", { id: `wizard-tab-${step.name}`, children: getStepLabel(step.name, index) }) }) })] }), index < totalSteps - 1 && _jsx(StepperSeparator, { step: index, "aria-hidden": "true" })] }, step.name))) }) }), wizardSteps.map((step, index) => {
+                    const description = templateCtx?.wizardStepDescriptions?.[step.name];
+                    return (_jsxs("div", { hidden: index !== currentStep, ...fieldRevealPanelAttributes(revealContainerId, step.name), children: [description ? _jsx("p", { className: "mb-field text-sm text-muted-foreground", children: description }) : null, _jsx(ErrorBoundary, { children: _jsx(WizardStepTrailingContentContext.Provider, { value: index === totalSteps - 1 ? unplacedRequestFields?.content ?? null : null, children: step.element }) })] }, step.name));
+                }), hostActions?.submissionNotice, _jsxs("div", { className: "flex justify-between gap-field pt-field", onClickCapture: handleActionsClickCapture, children: [_jsx(Button, { type: "button", variant: ButtonVariants_Variant.OUTLINE, onClick: handlePrevious, disabled: isFirstStep || templateCtx?.disabled, children: previousLabel }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-element", children: [hostActions?.cancelButton, hostActions?.draftSaveButton, (isLastStep || submitOnEveryStep) && _jsx(React.Fragment, { children: submit }, "submit"), !isLastStep && (_jsx(Button, { type: "button", variant: submitOnEveryStep ? ButtonVariants_Variant.OUTLINE : undefined, onClick: handleNext, disabled: templateCtx?.disabled, children: nextLabel }, "next"))] })] })] }) }));
 }
 //# sourceMappingURL=WizardLayout.js.map