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

package/dist/esm/components/resources/resourceLayout.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"resourceLayout.utils.js","sourceRoot":"","sources":["../../../../../src/components/resources/resourceLayout.utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { z } from 'zod';\nimport {\n  getSchemaType,\n  FieldSchemaType,\n  getEnumValues,\n  unwrapSchema,\n} from '@wildo-ai/zod-decorators';\nimport {\n  PRIMARY_SCOPE_TO_FIELD_IDENTIFIER,\n  type ResourceConfiguration_Operation_UrlInitiatorInfo,\n  type ResourceType,\n  isResourcesFilterNumberRangeSchema,\n} from '@wildo-ai/saas-models';\nimport type {\n  AnyFrontendResourceConfiguration,\n  FrontendResourceConfiguration_Operation,\n  FrontendResourcesRegistry,\n} from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\nimport type { FrontendResource_ParentResourceRequirement } from '~wildo-frontend-lib/core/resources/resource-path.frontend.schemas';\nimport type { FilterFieldDefinition } from './ResourceLayout_FiltersControl';\nimport { FrontendResourceUtils } from '~wildo-frontend-lib/core/resources/frontend-resource.utils';\n\n/**\n * Transport context for filter-field parsing.\n *\n * When provided, `parseFilterFieldDefinitions` derives two transport truths\n * that a bare `filterFields` record cannot express:\n *\n * 1. **Pinned fields** — fields whose value the transport already fixes for\n *    this operation in the current context. A user-facing filter on a pinned\n *    field is meaningless (the constraint applies before any filter could),\n *    so pinned fields are excluded from the returned definitions. The pinned\n *    set is the union of:\n *      - parameters consumed by the URL route the transport will select\n *        (computed via `FrontendResourceUtils.selectOperationUrlInitiatorInfo`\n *        — the same deterministic selection the HTTP client performs), and\n *      - the resource's primary-scope field identifier (backend authorization\n *        scope-filters the collection by it regardless of route shape, so a\n *        user-supplied value could never widen the result set).\n *\n * 2. **Reference fields** — string-typed filter fields whose name resolves to\n *    a resource type through the registry's relationship-enriched\n *    `fieldIdentifierToResourceType` map are foreign keys. They carry\n *    `fieldType: 'reference'` plus the resolved target so the filter UI can\n *    render a resource-reference selector instead of a raw ID text input.\n */\nexport interface FilterFieldTransportContext {\n  registry: FrontendResourcesRegistry;\n  resourceConfig: AnyFrontendResourceConfiguration;\n  operation: FrontendResourceConfiguration_Operation;\n  contextualParameters: Record<string, string | number | string[] | undefined>;\n  parentResourcesRequirements?: FrontendResource_ParentResourceRequirement[];\n}\n\n/**\n * Static utility class for ResourceLayout non-component logic.\n * Centralises filter field parsing and summary field extraction used across\n * ResourceLayout_Search, ResourceLayout_List, ResourceLayout_List_Table, etc.\n */\nexport class ResourceLayoutUtils {\n  private constructor() {}\n\n  /**\n   * Detect summary fields from resource configuration via `isSummaryField()` decorator scan.\n   * Returns only explicitly annotated fields — no config overrides, no heuristic fallbacks.\n   *\n   * MOVED to {@link FrontendResourceUtils.detectSummaryFields} and delegated to from here.\n   * The scan is no longer a layout concern alone: the record-label fallback\n   * (`getResourceLabel`) needs the same answer, and it lives one layer down in\n   * `frontend-resource.utils`, which this module already imports. Defining it there and\n   * delegating up keeps ONE definition without an import cycle; a second copy would have\n   * drifted the moment either set of exclusions changed.\n   *\n   * Kept as a member of this class because three layout call sites and a test address it by\n   * this name, and the name is right for them.\n   */\n  static detectSummaryFields(\n    resourceConfig: AnyFrontendResourceConfiguration | undefined,\n  ): string[] {\n    return FrontendResourceUtils.detectSummaryFields(resourceConfig);\n  }\n\n  /**\n   * The filter fields a READER may set, given the host's pins (#1630): a field the host pinned through\n   * `FrontendResourceOperationContext.pinnedFilters` is fixed on every fetch, so offering it in the panel would\n   * offer a choice that changes nothing. The one definition both collection layouts (LIST, SEARCH) use.\n   */\n  static withoutPinnedFilterFields<T extends { fieldName: string }>(\n    fields: readonly T[],\n    pinnedFilters: Readonly<Record<string, string>> | undefined,\n  ): T[] {\n    if (!pinnedFilters) return [...fields];\n    return fields.filter((field) => !Object.prototype.hasOwnProperty.call(pinnedFilters, field.fieldName));\n  }\n\n  /**\n   * The filters a collection fetch sends: the reader's, then the host's pins on top (#1630). A pin wins over a\n   * reader's value for the same key, so an embed pinned to one record can never be widened to another. The one\n   * definition both collection layouts use, for SEARCH filters and LIST query parameters alike.\n   */\n  static withPinnedFilters<V>(\n    readerFilters: Readonly<Record<string, V>>,\n    pinnedFilters: Readonly<Record<string, string>> | undefined,\n  ): Record<string, V | string> {\n    return { ...readerFilters, ...(pinnedFilters ?? {}) };\n  }\n\n  /**\n   * Compute the set of filter-field names that the transport already pins for\n   * the given operation in the current context. See\n   * {@link FilterFieldTransportContext} for the semantics of each component.\n   *\n   * Returns an empty set when the operation carries no URL surface (e.g.\n   * non-URL variants) — primary-scope pinning still applies because backend\n   * authorization enforces it independently of routing.\n   */\n  private static computeTransportPinnedFieldNames(\n    context: FilterFieldTransportContext,\n  ): Set<string> {\n    const pinned = new Set<string>();\n\n    // Primary-scope FK: always pinned. The backend injects the scope filter\n    // from the authenticated execution context — a user-supplied filter value\n    // either duplicates it or gets rejected; neither is a real filter.\n    const primaryScope = context.resourceConfig.resourcePrimaryScope;\n    const primaryScopeFieldIdentifier = primaryScope\n      ? PRIMARY_SCOPE_TO_FIELD_IDENTIFIER[primaryScope]\n      : undefined;\n    if (primaryScopeFieldIdentifier) {\n      pinned.add(primaryScopeFieldIdentifier);\n    }\n\n    // URL-route parameters: pinned when the deterministically selected route\n    // consumes them. Mirrors the HTTP client's selection exactly — both call\n    // FrontendResourceUtils.selectOperationUrlInitiatorInfo.\n    const initiatorInfos = ('initiatorInfos' in context.operation\n      ? (context.operation as { initiatorInfos?: ResourceConfiguration_Operation_UrlInitiatorInfo[] }).initiatorInfos\n      : undefined) ?? [];\n\n    if (initiatorInfos.length > 0) {\n      const selected = FrontendResourceUtils.selectOperationUrlInitiatorInfo({\n        initiatorInfos,\n        contextualParameters: context.contextualParameters,\n        targetResourceType: context.resourceConfig.resourceIdentifier as ResourceType,\n        targetDefaultFieldIdentifier: String(context.resourceConfig.resourceFieldIdentifier ?? ''),\n        parentResourcesRequirements: context.parentResourcesRequirements,\n      });\n\n      for (const parameter of selected?.parameters ?? []) {\n        pinned.add(parameter.fieldIdentifier);\n      }\n    }\n\n    return pinned;\n  }\n\n  /**\n   * Parse raw filterFields (Record) into FilterFieldDefinition[].\n   * Used when reading directly from an operation object (LIST or SEARCH).\n   * Skips function-typed entries (filter references) and maps each field's\n   * Zod schema to a UI-friendly type.\n   *\n   * When `transportContext` is provided, the definitions are additionally:\n   * - reduced to fields the user can actually act on (transport-pinned\n   *   fields are excluded — see {@link FilterFieldTransportContext}), and\n   * - enriched with foreign-key classification (`fieldType: 'reference'` +\n   *   `referenceTargetResourceType`) so the filter UI renders reference\n   *   selectors for FK fields instead of raw ID inputs.\n   *\n   * Without `transportContext` the parse is purely structural (schema-type\n   * mapping only) — callers that have no operation/registry at hand keep the\n   * legacy behavior.\n   */\n  static parseFilterFieldDefinitions(\n    rawFilterFields: Record<string, unknown> | undefined,\n    transportContext?: FilterFieldTransportContext,\n  ): readonly FilterFieldDefinition[] {\n    if (!rawFilterFields || typeof rawFilterFields !== 'object') return [];\n\n    const pinnedFieldNames = transportContext\n      ? ResourceLayoutUtils.computeTransportPinnedFieldNames(transportContext)\n      : undefined;\n\n    const definitions: FilterFieldDefinition[] = [];\n\n    for (const [fieldName, rawSchema] of Object.entries(rawFilterFields)) {\n      if (typeof rawSchema === 'function') continue;\n      if (!rawSchema || typeof rawSchema !== 'object') continue;\n      if (pinnedFieldNames?.has(fieldName)) continue;\n      // A raw primary key is a MACHINE filter — how the framework resolves one referenced record's\n      // label through a scoped search (#1661) — never something a person narrows a list by.\n      if (fieldName === '_id') continue;\n\n      const schema = rawSchema as z.ZodTypeAny;\n      const schemaType = getSchemaType(schema);\n      let fieldType: FilterFieldDefinition['fieldType'] = 'unknown';\n\n      // The NUMERIC RANGE is recognised before the type switch, because `getSchemaType` sees an\n      // object and answers with whatever it answers for objects. It is not a shape the switch\n      // could classify anyway: the vocabulary is what identifies it, not the type of its members.\n      if (isResourcesFilterNumberRangeSchema(schema)) {\n        definitions.push({ fieldName, schema, fieldType: 'numberRange', enumValues: undefined, referenceTargetResourceType: undefined });\n        continue;\n      }\n      let enumValues: readonly string[] | undefined;\n      let referenceTargetResourceType: string | undefined;\n\n      switch (schemaType) {\n        case FieldSchemaType.STRING:\n          fieldType = 'string';\n          break;\n        case FieldSchemaType.NUMBER:\n        case FieldSchemaType.BIGDECIMAL:\n          fieldType = 'number';\n          break;\n        case FieldSchemaType.BOOLEAN:\n          fieldType = 'boolean';\n          break;\n        case FieldSchemaType.ENUM:\n          fieldType = 'enum';\n          try {\n            enumValues = getEnumValues(unwrapSchema(schema));\n          } catch {\n            enumValues = [];\n          }\n          break;\n        case FieldSchemaType.DATE:\n        case FieldSchemaType.DATETIME:\n          fieldType = 'date';\n          break;\n        default:\n          fieldType = 'string';\n      }\n\n      // FK classification: a string filter whose field name resolves through\n      // the relationship-enriched registry map IS a reference filter — the\n      // value space is \"ids of the target resource\", not free text.\n      if (fieldType === 'string' && transportContext) {\n        const targetResourceType =\n          transportContext.registry.fieldIdentifierToResourceType?.[fieldName];\n        if (targetResourceType) {\n          // A string filter whose field name resolves through the\n          // relationship-enriched registry map IS a reference filter — the value\n          // space is \"ids of the target resource\", not free text. The picker\n          // searches the target (scope-required scoping is inferred at fetch time\n          // from `registry.manyToManyScopeJunctions`; no surface declaration).\n          fieldType = 'reference';\n          referenceTargetResourceType = targetResourceType as string;\n        }\n      }\n\n      definitions.push({ fieldName, schema, fieldType, enumValues, referenceTargetResourceType });\n    }\n\n    return definitions;\n  }\n\n}\n"]}
+{"version":3,"file":"resourceLayout.utils.js","sourceRoot":"","sources":["../../../../../src/components/resources/resourceLayout.utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { z } from 'zod';\nimport {\n  getSchemaType,\n  FieldSchemaType,\n  getEnumValues,\n  unwrapSchema,\n} from '@wildo-ai/zod-decorators';\nimport {\n  CoreResourceOperation,\n  PRIMARY_SCOPE_TO_FIELD_IDENTIFIER,\n  type ResourceConfiguration_Operation_UrlInitiatorInfo,\n  type Resources_BulkOperationMatchListing,\n  type ResourceType,\n  isResourcesFilterNumberRangeSchema,\n} from '@wildo-ai/saas-models';\nimport type {\n  AnyFrontendResourceConfiguration,\n  FrontendResourceConfiguration_Operation,\n  FrontendResourcesRegistry,\n} from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\nimport type { FrontendResource_ParentResourceRequirement } from '~wildo-frontend-lib/core/resources/resource-path.frontend.schemas';\nimport type { FilterFieldDefinition } from './ResourceLayout_FiltersControl';\nimport { FilterFieldType } from './resource-filter-field-type.frontend.schemas';\nimport { FrontendResourceUtils } from '~wildo-frontend-lib/core/resources/frontend-resource.utils';\n\n/**\n * Transport context for filter-field parsing.\n *\n * When provided, `parseFilterFieldDefinitions` derives two transport truths\n * that a bare `filterFields` record cannot express:\n *\n * 1. **Pinned fields** — fields whose value the transport already fixes for\n *    this operation in the current context. A user-facing filter on a pinned\n *    field is meaningless (the constraint applies before any filter could),\n *    so pinned fields are excluded from the returned definitions. The pinned\n *    set is the union of:\n *      - parameters consumed by the URL route the transport will select\n *        (computed via `FrontendResourceUtils.selectOperationUrlInitiatorInfo`\n *        — the same deterministic selection the HTTP client performs), and\n *      - the resource's primary-scope field identifier (backend authorization\n *        scope-filters the collection by it regardless of route shape, so a\n *        user-supplied value could never widen the result set).\n *\n * 2. **Reference fields** — string-typed filter fields whose name resolves to\n *    a resource type through the registry's relationship-enriched\n *    `fieldIdentifierToResourceType` map are foreign keys. They carry\n *    `fieldType: FilterFieldType.REFERENCE` plus the resolved target so the filter UI can\n *    render a resource-reference selector instead of a raw ID text input.\n */\nexport interface FilterFieldTransportContext {\n  registry: FrontendResourcesRegistry;\n  resourceConfig: AnyFrontendResourceConfiguration;\n  operation: FrontendResourceConfiguration_Operation;\n  contextualParameters: Record<string, string | number | string[] | undefined>;\n  parentResourcesRequirements?: FrontendResource_ParentResourceRequirement[];\n}\n\n/**\n * Static utility class for ResourceLayout non-component logic.\n * Centralises filter field parsing and summary field extraction used across\n * ResourceLayout_Search, ResourceLayout_List, ResourceLayout_List_Table, etc.\n */\nexport class ResourceLayoutUtils {\n  private constructor() {}\n\n  /**\n   * Detect summary fields from resource configuration via `isSummaryField()` decorator scan.\n   * Returns only explicitly annotated fields — no config overrides, no heuristic fallbacks.\n   *\n   * MOVED to {@link FrontendResourceUtils.detectSummaryFields} and delegated to from here.\n   * The scan is no longer a layout concern alone: the record-label fallback\n   * (`getResourceLabel`) needs the same answer, and it lives one layer down in\n   * `frontend-resource.utils`, which this module already imports. Defining it there and\n   * delegating up keeps ONE definition without an import cycle; a second copy would have\n   * drifted the moment either set of exclusions changed.\n   *\n   * Kept as a member of this class because three layout call sites and a test address it by\n   * this name, and the name is right for them.\n   */\n  static detectSummaryFields(\n    resourceConfig: AnyFrontendResourceConfiguration | undefined,\n  ): string[] {\n    return FrontendResourceUtils.detectSummaryFields(resourceConfig);\n  }\n\n  /**\n   * The filter fields a READER may set, given the host's pins (#1630): a field the host pinned through\n   * `FrontendResourceOperationContext.pinnedFilters` is fixed on every fetch, so offering it in the panel would\n   * offer a choice that changes nothing. The one definition both collection layouts (LIST, SEARCH) use.\n   */\n  static withoutPinnedFilterFields<T extends { fieldName: string }>(\n    fields: readonly T[],\n    pinnedFilters: Readonly<Record<string, string>> | undefined,\n  ): T[] {\n    if (!pinnedFilters) return [...fields];\n    return fields.filter((field) => !Object.prototype.hasOwnProperty.call(pinnedFilters, field.fieldName));\n  }\n\n  /**\n   * The filters a collection fetch sends: the reader's, then the host's pins on top (#1630). A pin wins over a\n   * reader's value for the same key, so an embed pinned to one record can never be widened to another. The one\n   * definition both collection layouts use, for SEARCH filters and LIST query parameters alike.\n   */\n  static withPinnedFilters<V>(\n    readerFilters: Readonly<Record<string, V>>,\n    pinnedFilters: Readonly<Record<string, string>> | undefined,\n  ): Record<string, V | string> {\n    return { ...readerFilters, ...(pinnedFilters ?? {}) };\n  }\n\n  /**\n   * The variant key of an operation a layout shows, or `null` for its unkeyed variant. ONE reading, shared by the export\n   * filter (#2705) and the listing a match selection names (#2718).\n   */\n  static variantKeyOf(shown: unknown): string | null {\n    const key = (shown as { variantKey?: unknown } | null | undefined)?.variantKey;\n    return typeof key === 'string' && key.length > 0 ? key : null;\n  }\n\n  /**\n   * The operation a LIST layout's rows came from: its inline SEARCH while a term is typed (and it has one), else its list.\n   * The same choice its fetch makes, so a list view with no term never claims to be a search.\n   */\n  static listingOperationShown<T>(params: { inlineSearchTerm: string | undefined; listOperation: T; searchOperation: T | null }): T {\n    return params.inlineSearchTerm && params.searchOperation ? params.searchOperation : params.listOperation;\n  }\n\n  /**\n   * The listing a \"select all matching\" selection came from (#2718): the collection operation the layout ran and the\n   * variant of it, read from the SAME operation object its request is keyed by. The server re-runs exactly that one, so\n   * a keyed listing (`directory`) and a search view with no term are re-run as what the person saw, never as the default\n   * list.\n   *\n   * `undefined` for a listing run by a CUSTOM operation that only acts like a list or a search (`listMyRequests`): the\n   * wire can name only LIST and SEARCH, and the server would re-run the default list in its place, a different and\n   * usually wider population. A layout offers no \"select all matching\" then (fail closed).\n   */\n  static matchListingOf(shown: unknown): Resources_BulkOperationMatchListing | undefined {\n    const identifier = (shown as { operationIdentifier?: unknown } | null | undefined)?.operationIdentifier;\n    if (identifier !== CoreResourceOperation.LIST && identifier !== CoreResourceOperation.SEARCH) return undefined;\n    const variantKey = ResourceLayoutUtils.variantKeyOf(shown);\n    return { operation: identifier, ...(variantKey ? { variantKey } : {}) };\n  }\n\n  /**\n   * Compute the set of filter-field names that the transport already pins for\n   * the given operation in the current context. See\n   * {@link FilterFieldTransportContext} for the semantics of each component.\n   *\n   * Returns an empty set when the operation carries no URL surface (e.g.\n   * non-URL variants) — primary-scope pinning still applies because backend\n   * authorization enforces it independently of routing.\n   */\n  private static computeTransportPinnedFieldNames(\n    context: FilterFieldTransportContext,\n  ): Set<string> {\n    const pinned = new Set<string>();\n\n    // Primary-scope FK: always pinned. The backend injects the scope filter\n    // from the authenticated execution context — a user-supplied filter value\n    // either duplicates it or gets rejected; neither is a real filter.\n    const primaryScope = context.resourceConfig.resourcePrimaryScope;\n    const primaryScopeFieldIdentifier = primaryScope\n      ? PRIMARY_SCOPE_TO_FIELD_IDENTIFIER[primaryScope]\n      : undefined;\n    if (primaryScopeFieldIdentifier) {\n      pinned.add(primaryScopeFieldIdentifier);\n    }\n\n    // URL-route parameters: pinned when the deterministically selected route\n    // consumes them. Mirrors the HTTP client's selection exactly — both call\n    // FrontendResourceUtils.selectOperationUrlInitiatorInfo.\n    const initiatorInfos = ('initiatorInfos' in context.operation\n      ? (context.operation as { initiatorInfos?: ResourceConfiguration_Operation_UrlInitiatorInfo[] }).initiatorInfos\n      : undefined) ?? [];\n\n    if (initiatorInfos.length > 0) {\n      const selected = FrontendResourceUtils.selectOperationUrlInitiatorInfo({\n        initiatorInfos,\n        contextualParameters: context.contextualParameters,\n        targetResourceType: context.resourceConfig.resourceIdentifier as ResourceType,\n        targetDefaultFieldIdentifier: String(context.resourceConfig.resourceFieldIdentifier ?? ''),\n        parentResourcesRequirements: context.parentResourcesRequirements,\n      });\n\n      for (const parameter of selected?.parameters ?? []) {\n        pinned.add(parameter.fieldIdentifier);\n      }\n    }\n\n    return pinned;\n  }\n\n  /**\n   * Parse raw filterFields (Record) into FilterFieldDefinition[].\n   * Used when reading directly from an operation object (LIST or SEARCH).\n   * Skips function-typed entries (filter references) and maps each field's\n   * Zod schema to a UI-friendly type.\n   *\n   * When `transportContext` is provided, the definitions are additionally:\n   * - reduced to fields the user can actually act on (transport-pinned\n   *   fields are excluded — see {@link FilterFieldTransportContext}), and\n   * - enriched with foreign-key classification (`fieldType: FilterFieldType.REFERENCE` +\n   *   `referenceTargetResourceType`) so the filter UI renders reference\n   *   selectors for FK fields instead of raw ID inputs.\n   *\n   * Without `transportContext` the parse is purely structural (schema-type\n   * mapping only) — callers that have no operation/registry at hand keep the\n   * legacy behavior.\n   */\n  static parseFilterFieldDefinitions(\n    rawFilterFields: Record<string, unknown> | undefined,\n    transportContext?: FilterFieldTransportContext,\n  ): readonly FilterFieldDefinition[] {\n    if (!rawFilterFields || typeof rawFilterFields !== 'object') return [];\n\n    const pinnedFieldNames = transportContext\n      ? ResourceLayoutUtils.computeTransportPinnedFieldNames(transportContext)\n      : undefined;\n\n    const definitions: FilterFieldDefinition[] = [];\n\n    for (const [fieldName, rawSchema] of Object.entries(rawFilterFields)) {\n      if (typeof rawSchema === 'function') continue;\n      if (!rawSchema || typeof rawSchema !== 'object') continue;\n      if (pinnedFieldNames?.has(fieldName)) continue;\n      // A raw primary key is a MACHINE filter — how the framework resolves one referenced record's\n      // label through a scoped search (#1661) — never something a person narrows a list by.\n      if (fieldName === '_id') continue;\n\n      const schema = rawSchema as z.ZodTypeAny;\n      const schemaType = getSchemaType(schema);\n      let fieldType: FilterFieldType = FilterFieldType.UNKNOWN;\n\n      // The NUMERIC RANGE is recognised before the type switch, because `getSchemaType` sees an\n      // object and answers with whatever it answers for objects. It is not a shape the switch\n      // could classify anyway: the vocabulary is what identifies it, not the type of its members.\n      if (isResourcesFilterNumberRangeSchema(schema)) {\n        definitions.push({ fieldName, schema, fieldType: FilterFieldType.NUMBER_RANGE, enumValues: undefined, referenceTargetResourceType: undefined });\n        continue;\n      }\n      let enumValues: readonly string[] | undefined;\n      let referenceTargetResourceType: string | undefined;\n\n      switch (schemaType) {\n        case FieldSchemaType.STRING:\n          fieldType = FilterFieldType.STRING;\n          break;\n        case FieldSchemaType.NUMBER:\n        case FieldSchemaType.BIGDECIMAL:\n          fieldType = FilterFieldType.NUMBER;\n          break;\n        case FieldSchemaType.BOOLEAN:\n          fieldType = FilterFieldType.BOOLEAN;\n          break;\n        case FieldSchemaType.ENUM:\n          fieldType = FilterFieldType.ENUM;\n          try {\n            enumValues = getEnumValues(unwrapSchema(schema));\n          } catch {\n            enumValues = [];\n          }\n          break;\n        case FieldSchemaType.DATE:\n        case FieldSchemaType.DATETIME:\n          fieldType = FilterFieldType.DATE;\n          break;\n        default:\n          fieldType = FilterFieldType.STRING;\n      }\n\n      // FK classification: a string filter whose field name resolves through\n      // the relationship-enriched registry map IS a reference filter — the\n      // value space is \"ids of the target resource\", not free text.\n      if (fieldType === FilterFieldType.STRING && transportContext) {\n        const targetResourceType =\n          transportContext.registry.fieldIdentifierToResourceType?.[fieldName];\n        if (targetResourceType) {\n          // A string filter whose field name resolves through the\n          // relationship-enriched registry map IS a reference filter — the value\n          // space is \"ids of the target resource\", not free text. The picker\n          // searches the target (scope-required scoping is inferred at fetch time\n          // from `registry.manyToManyScopeJunctions`; no surface declaration).\n          fieldType = FilterFieldType.REFERENCE;\n          referenceTargetResourceType = targetResourceType as string;\n        }\n      }\n\n      definitions.push({ fieldName, schema, fieldType, enumValues, referenceTargetResourceType });\n    }\n\n    return definitions;\n  }\n\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ArrayField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/ArrayField.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9C,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,GAAG,SAAS,CAyD7B"}
+{"version":3,"file":"ArrayField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/ArrayField.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAW9C,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,GAAG,SAAS,CAiE7B"}

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

@@ -8,6 +8,8 @@ import { useI18n } from '../../../core/i18n/useI18n.js';
 import { FieldScopeProvider, useResolvedFieldName } from './FieldScopeContext.js';
 import { ArrayItemTemplate } from './ArrayItemTemplate.js';
 import { declarePlacesNamedField } from '../../form/automated/TemplatePlacedFieldsContext.js';
+import { useSectionFieldRegistration } from './SectionFieldsContext.js';
+import { useWizardFieldRegistration } from './WizardStepFieldsContext.js';
 /**
  * Array container for array-of-object fields.
  *
@@ -36,6 +38,14 @@ export function ArrayField({ name, className, addLabel, removeLabel, minItems, m
     const resolvedName = useResolvedFieldName(name);
     const { control } = useFormContext();
     const { fields, append, remove } = useFieldArray({ control, name: resolvedName });
+    /*
+     * The ARRAY is one of the section's (and the wizard step's) fields, not only its items' leaves. Registered by its
+     * leaves alone (`steps[0].title`), a section save wrote those leaves onto the STORED array: an item the person had
+     * removed came back, and reordered items mixed their values. An array is written whole, as every other array
+     * editor writes it; registering the root is what tells the save so, and what lets the wizard check it.
+     */
+    useSectionFieldRegistration(resolvedName);
+    useWizardFieldRegistration(resolvedName);
     const { tComponent, isReady } = useI18n({
         component: FrontendComponentType.LOW_LEVEL_FORM_MESSAGE,
     });

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

@@ -1 +1 @@
-{"version":3,"file":"ArrayField.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/ArrayField.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React, { type ReactNode } from 'react';\nimport { useFieldArray, useFormContext } from 'react-hook-form';\nimport { FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { FieldScopeProvider, useResolvedFieldName } from './FieldScopeContext';\nimport { ArrayItemTemplate } from './ArrayItemTemplate';\nimport { declarePlacesNamedField } from '../../form/automated/TemplatePlacedFieldsContext';\n\nexport interface ArrayFieldProps {\n  /**\n   * Name of the array field in the parent schema.\n   * The component iterates over items and renders `<ArrayItemTemplate>`\n   * children for each item, with scoped field names.\n   */\n  name: string;\n  /** Additional CSS classes for the array container. */\n  className?: string;\n  /** Label for the \"Add\" button. Falls back to i18n default. */\n  addLabel?: string;\n  /** Label for each \"Remove\" button. Falls back to i18n default. */\n  removeLabel?: string;\n  /** Minimum number of items (disables remove when at minimum). */\n  minItems?: number;\n  /** Maximum number of items (disables add when at maximum). */\n  maxItems?: number;\n  children: ReactNode;\n}\n\n/**\n * Array container for array-of-object fields.\n *\n * Iterates over current items (from RHF field array state),\n * rendering `<ArrayItemTemplate>` children for each item with\n * a scoped `FieldScopeContext` (`\"{name}.{index}\"`).\n *\n * Provides add/remove infrastructure. For arrays of primitives\n * (e.g., `z.array(z.string())`), use `<FormField name=\"tags\" />`\n * directly — no `<ArrayField>` needed.\n *\n * @example\n * ```tsx\n * <ArrayField name=\"addresses\" className=\"space-y-4\">\n *   <ArrayItemTemplate>\n *     <div className=\"grid grid-cols-2 gap-4\">\n *       <FormField name=\"street\" className=\"col-span-2\" />\n *       <FormField name=\"city\" />\n *       <FormField name=\"zipCode\" />\n *     </div>\n *   </ArrayItemTemplate>\n * </ArrayField>\n * ```\n */\nexport function ArrayField({\n  name,\n  className,\n  addLabel,\n  removeLabel,\n  minItems,\n  maxItems,\n  children,\n}: ArrayFieldProps): ReactNode {\n  const resolvedName = useResolvedFieldName(name);\n  const { control } = useFormContext();\n  const { fields, append, remove } = useFieldArray({ control, name: resolvedName });\n\n  const { tComponent, isReady } = useI18n({\n    component: FrontendComponentType.LOW_LEVEL_FORM_MESSAGE,\n  });\n\n  if (!isReady) return null;\n\n  const itemTemplate = findItemTemplate(children);\n\n  const canAdd = maxItems === undefined || fields.length < maxItems;\n  const canRemove = minItems === undefined || fields.length > minItems;\n\n  // Shared LOW_LEVEL_FORM_MESSAGE vocabulary with the automated AutomatedArrayField —\n  // one key per concept (arrayAddItem / arrayItemLabel / arrayRemoveItem), so\n  // handwritten and generated array UIs stay wording-consistent.\n  const effectiveAddLabel = addLabel ?? tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'arrayAddItem');\n  const itemBaseLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'arrayItemLabel');\n\n  return (\n    <div className={className} data-guidance-array={name}>\n      {fields.map((field, index) => (\n        <div key={field.id} className=\"relative\" data-guidance-array-item={index}>\n          <FieldScopeProvider pathPrefix={`${resolvedName}[${index}]`}>\n            {itemTemplate ? React.cloneElement(itemTemplate) : null}\n          </FieldScopeProvider>\n          {canRemove && (\n            <Button\n              type=\"button\"\n              variant={ButtonVariants_Variant.GHOST}\n              onClick={() => remove(index)}\n              className=\"mt-1\"\n            >\n              {removeLabel\n                ?? tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'arrayRemoveItem', {\n                  label: `${itemBaseLabel} ${index + 1}`,\n                })}\n            </Button>\n          )}\n        </div>\n      ))}\n\n      {canAdd && (\n        <Button\n          type=\"button\"\n          variant={ButtonVariants_Variant.OUTLINE}\n          onClick={() => append({})}\n          className=\"mt-2\"\n        >\n          {effectiveAddLabel}\n        </Button>\n      )}\n    </div>\n  );\n}\n\n/**\n * Extracts the first `<ArrayItemTemplate>` from children.\n * This is the template that gets cloned for each array item.\n */\nfunction findItemTemplate(children: ReactNode): React.ReactElement | null {\n  let template: React.ReactElement | null = null;\n  React.Children.forEach(children, (child) => {\n    if (!template && React.isValidElement(child) && child.type === ArrayItemTemplate) {\n      template = child;\n    }\n  });\n  return template;\n}\n\n// Edits the field named by `name` without being a `FormField` slot, and has no item slots while empty.\ndeclarePlacesNamedField(ArrayField);\n"]}
+{"version":3,"file":"ArrayField.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/ArrayField.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React, { type ReactNode } from 'react';\nimport { useFieldArray, useFormContext } from 'react-hook-form';\nimport { FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { FieldScopeProvider, useResolvedFieldName } from './FieldScopeContext';\nimport { ArrayItemTemplate } from './ArrayItemTemplate';\nimport { declarePlacesNamedField } from '../../form/automated/TemplatePlacedFieldsContext';\nimport { useSectionFieldRegistration } from './SectionFieldsContext';\nimport { useWizardFieldRegistration } from './WizardStepFieldsContext';\n\nexport interface ArrayFieldProps {\n  /**\n   * Name of the array field in the parent schema.\n   * The component iterates over items and renders `<ArrayItemTemplate>`\n   * children for each item, with scoped field names.\n   */\n  name: string;\n  /** Additional CSS classes for the array container. */\n  className?: string;\n  /** Label for the \"Add\" button. Falls back to i18n default. */\n  addLabel?: string;\n  /** Label for each \"Remove\" button. Falls back to i18n default. */\n  removeLabel?: string;\n  /** Minimum number of items (disables remove when at minimum). */\n  minItems?: number;\n  /** Maximum number of items (disables add when at maximum). */\n  maxItems?: number;\n  children: ReactNode;\n}\n\n/**\n * Array container for array-of-object fields.\n *\n * Iterates over current items (from RHF field array state),\n * rendering `<ArrayItemTemplate>` children for each item with\n * a scoped `FieldScopeContext` (`\"{name}.{index}\"`).\n *\n * Provides add/remove infrastructure. For arrays of primitives\n * (e.g., `z.array(z.string())`), use `<FormField name=\"tags\" />`\n * directly — no `<ArrayField>` needed.\n *\n * @example\n * ```tsx\n * <ArrayField name=\"addresses\" className=\"space-y-4\">\n *   <ArrayItemTemplate>\n *     <div className=\"grid grid-cols-2 gap-4\">\n *       <FormField name=\"street\" className=\"col-span-2\" />\n *       <FormField name=\"city\" />\n *       <FormField name=\"zipCode\" />\n *     </div>\n *   </ArrayItemTemplate>\n * </ArrayField>\n * ```\n */\nexport function ArrayField({\n  name,\n  className,\n  addLabel,\n  removeLabel,\n  minItems,\n  maxItems,\n  children,\n}: ArrayFieldProps): ReactNode {\n  const resolvedName = useResolvedFieldName(name);\n  const { control } = useFormContext();\n  const { fields, append, remove } = useFieldArray({ control, name: resolvedName });\n  /*\n   * The ARRAY is one of the section's (and the wizard step's) fields, not only its items' leaves. Registered by its\n   * leaves alone (`steps[0].title`), a section save wrote those leaves onto the STORED array: an item the person had\n   * removed came back, and reordered items mixed their values. An array is written whole, as every other array\n   * editor writes it; registering the root is what tells the save so, and what lets the wizard check it.\n   */\n  useSectionFieldRegistration(resolvedName);\n  useWizardFieldRegistration(resolvedName);\n\n  const { tComponent, isReady } = useI18n({\n    component: FrontendComponentType.LOW_LEVEL_FORM_MESSAGE,\n  });\n\n  if (!isReady) return null;\n\n  const itemTemplate = findItemTemplate(children);\n\n  const canAdd = maxItems === undefined || fields.length < maxItems;\n  const canRemove = minItems === undefined || fields.length > minItems;\n\n  // Shared LOW_LEVEL_FORM_MESSAGE vocabulary with the automated AutomatedArrayField —\n  // one key per concept (arrayAddItem / arrayItemLabel / arrayRemoveItem), so\n  // handwritten and generated array UIs stay wording-consistent.\n  const effectiveAddLabel = addLabel ?? tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'arrayAddItem');\n  const itemBaseLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'arrayItemLabel');\n\n  return (\n    <div className={className} data-guidance-array={name}>\n      {fields.map((field, index) => (\n        <div key={field.id} className=\"relative\" data-guidance-array-item={index}>\n          <FieldScopeProvider pathPrefix={`${resolvedName}[${index}]`}>\n            {itemTemplate ? React.cloneElement(itemTemplate) : null}\n          </FieldScopeProvider>\n          {canRemove && (\n            <Button\n              type=\"button\"\n              variant={ButtonVariants_Variant.GHOST}\n              onClick={() => remove(index)}\n              className=\"mt-1\"\n            >\n              {removeLabel\n                ?? tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'arrayRemoveItem', {\n                  label: `${itemBaseLabel} ${index + 1}`,\n                })}\n            </Button>\n          )}\n        </div>\n      ))}\n\n      {canAdd && (\n        <Button\n          type=\"button\"\n          variant={ButtonVariants_Variant.OUTLINE}\n          onClick={() => append({})}\n          className=\"mt-2\"\n        >\n          {effectiveAddLabel}\n        </Button>\n      )}\n    </div>\n  );\n}\n\n/**\n * Extracts the first `<ArrayItemTemplate>` from children.\n * This is the template that gets cloned for each array item.\n */\nfunction findItemTemplate(children: ReactNode): React.ReactElement | null {\n  let template: React.ReactElement | null = null;\n  React.Children.forEach(children, (child) => {\n    if (!template && React.isValidElement(child) && child.type === ArrayItemTemplate) {\n      template = child;\n    }\n  });\n  return template;\n}\n\n// Edits the field named by `name` without being a `FormField` slot, and has no item slots while empty.\ndeclarePlacesNamedField(ArrayField);\n"]}

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { ResponsiveMaxWidth } from '@wildo-ai/presets-components-models';
+import { type ResponsiveMaxWidth } from '@wildo-ai/presets-components-models';
 /** @wildo_source:part:start saas.frontend.display-layout.reading-measure facet:layer:frontend facet:family:layout facet:audience:app-developer */
 export interface DisplayLayoutProps {
     /** Additional CSS classes for the root container. */
@@ -7,9 +7,9 @@ export interface DisplayLayoutProps {
     /**
      * How wide the layout root lets its content grow, named in the framework's own vocabulary.
      *
-     * Defaults to `'measure'` — the reading-measure cap (~42rem, themeable via `--measure-max-width`)
-     * that keeps a single-column stack of label/value pairs readable instead of stretched edge to edge.
-     * That default is right for what this layout was built for and is unchanged.
+     * Left unset, the width is DERIVED from what the layout renders: the reading-measure cap (~42rem, themeable
+     * via `--measure-max-width`) that keeps a single-column stack of label/value pairs readable instead of
+     * stretched edge to edge — lifted as soon as the layout holds a collection (see the last paragraph).
      *
      * It is WRONG for a composed document. A template that renders tabs, quote blocks, tables or regions
      * is not a field stack: those set their own measure internally, and a 42rem cap around them squeezes
@@ -19,11 +19,27 @@ export interface DisplayLayoutProps {
      * area at the page-content width (`'content'`, ~80rem) and an adjacent pane is narrower still. This
      * prop decides only whether a SECOND, tighter cap applies inside that, and the answer depends on what
      * the template renders, which is why the template is the one asked.
+     *
+     * Left UNSET, the cap is derived from what the layout actually renders: the reading measure for fields,
+     * lifted as soon as the layout holds a COLLECTION (a related list, an embedded collection — any surface
+     * marked {@link COLLECTION_SURFACE_ATTRIBUTE}). A list squeezed into a 42rem column, under a header that
+     * spans the page, is what a field-only cap does to a record whose page is mostly its list. Declared, the
+     * value is the template's statement and is applied as given.
      */
     responsiveMaxWidth?: ResponsiveMaxWidth;
     children?: ReactNode;
 }
 /** @wildo_source:part:end saas.frontend.display-layout.reading-measure */
+/**
+ * The attribute that marks a COLLECTION in the rendered page, so a layout around it can tell it holds a list.
+ *
+ * Carried by the `ResourceLayout_List` / `ResourceLayout_Search` wrappers (around any preset or custom view, from
+ * the first paint) and by a `RelatedResourceSections` block that holds a list (before its labels load, whichever
+ * tab is open). Read by CSS `:has()`: by `DisplayLayout`, to lift its reading measure, and by the READ page, to give
+ * the danger zone the same width as the record body (`--record-body-max-inline-size`). Being CSS, the decision
+ * follows the DOM and never needs a second render.
+ */
+export declare const COLLECTION_SURFACE_ATTRIBUTE = "data-collection-surface";
 /**
  * Root wrapper for display (read-only) layout templates.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"DisplayLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/DisplayLayout.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAc9E,kJAAkJ;AAClJ,MAAM,WAAW,kBAAkB;IACjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;;;;;OAeG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AACD,0EAA0E;AAE1E;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAA8B,EAAE,EAAE,kBAAkB,GAAG,SAAS,CAmDpH"}
+{"version":3,"file":"DisplayLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/DisplayLayout.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAqB,KAAK,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAejG,kJAAkJ;AAClJ,MAAM,WAAW,kBAAkB;IACjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AACD,0EAA0E;AAE1E;;;;;;;;GAQG;AACH,eAAO,MAAM,4BAA4B,4BAA4B,CAAC;AAEtE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,kBAAkB,GAAG,SAAS,CA2DxG"}

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

@@ -1,6 +1,8 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
+import { TypographyVariant } from '@wildo-ai/presets-components-models';
+import { SectionLegendVoiceHost } from '../../sections/section-legend-voice.js';
 import { cn } from '../../../core/ui/cn.js';
 import { responsiveMaxWidthToCssValue } from '../../sections/surface.js';
 import { FieldScopeProvider } from './FieldScopeContext.js';
@@ -10,6 +12,16 @@ import { groupSectionsByAppearance, buildSectionConfigFromGroup, } from './secti
 import { GroupedSectionBody } from './Section.js';
 import { GroupedSectionHostKind } from './Section.shared.js';
 /** @wildo_source:part:end saas.frontend.display-layout.reading-measure */
+/**
+ * The attribute that marks a COLLECTION in the rendered page, so a layout around it can tell it holds a list.
+ *
+ * Carried by the `ResourceLayout_List` / `ResourceLayout_Search` wrappers (around any preset or custom view, from
+ * the first paint) and by a `RelatedResourceSections` block that holds a list (before its labels load, whichever
+ * tab is open). Read by CSS `:has()`: by `DisplayLayout`, to lift its reading measure, and by the READ page, to give
+ * the danger zone the same width as the record body (`--record-body-max-inline-size`). Being CSS, the decision
+ * follows the DOM and never needs a second render.
+ */
+export const COLLECTION_SURFACE_ATTRIBUTE = 'data-collection-surface';
 /**
  * Root wrapper for display (read-only) layout templates.
  *
@@ -29,10 +41,15 @@ import { GroupedSectionHostKind } from './Section.shared.js';
  * </DisplayLayout>
  * ```
  */
-export function DisplayLayout({ className, children, responsiveMaxWidth = 'measure' }) {
+export function DisplayLayout({ className, children, responsiveMaxWidth }) {
     const displayCtx = useOptionalDisplayTemplateContext();
     const renderedChildren = useMemo(() => renderGroupedChildren(children, displayCtx), [children, displayCtx]);
-    return (_jsx(FieldScopeProvider, { pathPrefix: "", children: _jsx("div", { className: cn('mr-auto w-full space-y-section', '[&>[data-chrome-mode^=settings]:has(+[data-chrome-mode^=settings])]:mb-0', className), style: { maxInlineSize: responsiveMaxWidthToCssValue(responsiveMaxWidth) }, "data-inline-size-tier": responsiveMaxWidth, "data-guidance-display": true, children: renderedChildren }) }));
+    return (_jsx(FieldScopeProvider, { pathPrefix: "", children: _jsx(SectionLegendVoiceHost, { voice: TypographyVariant.EYEBROW, children: _jsx("div", { className: cn('mr-auto w-full space-y-section', '[&>[data-chrome-mode^=settings]:has(+[data-chrome-mode^=settings])]:mb-0', 
+                // Derived width (no declaration): the reading measure, lifted when the layout holds a collection.
+                // The selector spells the attribute literally because Tailwind reads class names statically;
+                // `display-layout-derived-width.test.tsx` holds it equal to `COLLECTION_SURFACE_ATTRIBUTE`.
+                responsiveMaxWidth === undefined
+                    && '[max-inline-size:var(--measure-max-width,42rem)] has-[[data-collection-surface]]:[max-inline-size:none]', className), style: responsiveMaxWidth === undefined ? undefined : { maxInlineSize: responsiveMaxWidthToCssValue(responsiveMaxWidth) }, "data-inline-size-tier": responsiveMaxWidth ?? 'derived', "data-guidance-display": true, children: renderedChildren }) }) }));
 }
 /**
  * Introspects children for `<Section>` elements with container-mode `appearance`.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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