@wildo-ai/saas-frontend-lib 1.0.1

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

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { FieldScopeProvider } from './FieldScopeContext.js';
+import { useOptionalDisplayTemplateContext } from '../../data-display/DisplayTemplateContext.js';
+import { ContentSectionContainer } from '../../sections/ContentSectionContainer.js';
+import { groupSectionsByAppearance, buildSectionConfigFromGroup, } from './section-consolidation.utils.js';
+import { GroupedSectionBody } from './Section.js';
+import { GroupedSectionHostKind } from './Section.shared.js';
+/**
+ * Root wrapper for display (read-only) layout templates.
+ *
+ * Provides a root `FieldScopeContext` with empty prefix so nested
+ * `<DisplayField name="...">` components resolve field names correctly.
+ *
+ * `ResourceDisplayContext` (inline editing, RMM, file upload) is provided
+ * by the parent `ResourceAutomaticDisplayer`, not by this layout component.
+ *
+ * @example
+ * ```tsx
+ * <DisplayLayout>
+ *   <Section name="general">
+ *     <DisplayField name="title" />
+ *     <DisplayField name="status" />
+ *   </Section>
+ * </DisplayLayout>
+ * ```
+ */
+export function DisplayLayout({ className, children }) {
+    const displayCtx = useOptionalDisplayTemplateContext();
+    const renderedChildren = useMemo(() => renderGroupedChildren(children, displayCtx), [children, displayCtx]);
+    return (_jsx(FieldScopeProvider, { pathPrefix: "", children: _jsx("div", { className: className, "data-guidance-display": true, children: renderedChildren }) }));
+}
+/**
+ * Introspects children for `<Section>` elements with container-mode `appearance`.
+ * Groups sections sharing the same container mode into a `ContentSectionContainer`.
+ * Solo-mode sections and non-Section children render in place.
+ */
+function renderGroupedChildren(children, displayCtx) {
+    const grouped = groupSectionsByAppearance(children);
+    return (_jsx(_Fragment, { children: grouped.items.map((item, idx) => {
+            if (item.type === 'node') {
+                return _jsx(React.Fragment, { children: item.node }, idx);
+            }
+            const { group } = item;
+            const config = buildSectionConfigFromGroup(group);
+            const sectionLabels = displayCtx?.sectionLabels ?? {};
+            const sectionDescriptions = displayCtx?.sectionDescriptions ?? {};
+            const contentSections = group.sections.map((el) => ({
+                id: el.props.name,
+                title: sectionLabels[el.props.name] ?? el.props.name,
+                description: sectionDescriptions[el.props.name],
+                content: (_jsx(GroupedSectionContent, { sectionProps: el.props })),
+            }));
+            return (_jsx(ContentSectionContainer, { sections: contentSections, config: config }, `group-${group.mode}-${idx}`));
+        }) }));
+}
+/**
+ * Wraps an individual grouped section's content with section-level behaviors
+ * (displayChromeMode) when rendered inside a container.
+ */
+function GroupedSectionContent({ sectionProps, }) {
+    return (_jsx(GroupedSectionBody, { hostKind: GroupedSectionHostKind.DISPLAY, sectionProps: sectionProps }));
+}
+//# sourceMappingURL=DisplayLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DisplayLayout.js","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/DisplayLayout.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,iCAAiC,EAAE,MAAM,2CAA2C,CAAC;AAC9F,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAEjF,OAAO,EACL,yBAAyB,EACzB,2BAA2B,GAC5B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAqB,MAAM,WAAW,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAQ1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAsB;IACvE,MAAM,UAAU,GAAG,iCAAiC,EAAE,CAAC;IACvD,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,qBAAqB,CAAC,QAAQ,EAAE,UAAU,CAAC,EACjD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACvB,CAAC;IAEF,OAAO,CACL,KAAC,kBAAkB,IAAC,UAAU,EAAC,EAAE,YAC/B,cAAK,SAAS,EAAE,SAAS,2CACtB,gBAAgB,GACb,GACa,CACtB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAS,qBAAqB,CAC5B,QAAmB,EACnB,UAAgE;IAEhE,MAAM,OAAO,GAAG,yBAAyB,CAAC,QAAQ,CAAC,CAAC;IAEpD,OAAO,CACL,4BACG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;YAC/B,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;gBACzB,OAAO,KAAC,KAAK,CAAC,QAAQ,cAAY,IAAI,CAAC,IAAI,IAAf,GAAG,CAA8B,CAAC;YAChE,CAAC;YAED,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;YACvB,MAAM,MAAM,GAAG,2BAA2B,CAAC,KAAK,CAAC,CAAC;YAClD,MAAM,aAAa,GAAG,UAAU,EAAE,aAAa,IAAI,EAAE,CAAC;YACtD,MAAM,mBAAmB,GAAG,UAAU,EAAE,mBAAmB,IAAI,EAAE,CAAC;YAElE,MAAM,eAAe,GAAqB,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;gBACpE,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;gBACjB,KAAK,EAAE,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,IAAI;gBACpD,WAAW,EAAE,mBAAmB,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC;gBAC/C,OAAO,EAAE,CACP,KAAC,qBAAqB,IAAC,YAAY,EAAE,EAAE,CAAC,KAAK,GAAI,CAClD;aACF,CAAC,CAAC,CAAC;YAEJ,OAAO,CACL,KAAC,uBAAuB,IAEtB,QAAQ,EAAE,eAAe,EACzB,MAAM,EAAE,MAAM,IAFT,SAAS,KAAK,CAAC,IAAI,IAAI,GAAG,EAAE,CAGjC,CACH,CAAC;QACJ,CAAC,CAAC,GACD,CACJ,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,SAAS,qBAAqB,CAAC,EAC7B,YAAY,GAGb;IACC,OAAO,CACL,KAAC,kBAAkB,IACjB,QAAQ,EAAE,sBAAsB,CAAC,OAAO,EACxC,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export interface LayoutDividerProps {
+    /** Additional CSS classes for the divider element. */
+    className?: string;
+}
+/**
+ * Visual separator for layout templates.
+ *
+ * Named `LayoutDivider` to avoid collision with the low-level
+ * `Divider` UI component from `@wildo-ai/saas-frontend-lib`.
+ *
+ * @example
+ * ```tsx
+ * <Section name="general">
+ *   <FormField name="title" />
+ *   <LayoutDivider className="my-4" />
+ *   <FormField name="description" />
+ * </Section>
+ * ```
+ */
+export declare function LayoutDivider({ className }: LayoutDividerProps): ReactNode;
+//# sourceMappingURL=Divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/Divider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE,kBAAkB,GAAG,SAAS,CAE1E"}

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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Visual separator for layout templates.
+ *
+ * Named `LayoutDivider` to avoid collision with the low-level
+ * `Divider` UI component from `@wildo-ai/saas-frontend-lib`.
+ *
+ * @example
+ * ```tsx
+ * <Section name="general">
+ *   <FormField name="title" />
+ *   <LayoutDivider className="my-4" />
+ *   <FormField name="description" />
+ * </Section>
+ * ```
+ */
+export function LayoutDivider({ className }) {
+    return _jsx("hr", { className: className });
+}
+//# sourceMappingURL=Divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/Divider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AASb;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,SAAS,EAAsB;IAC7D,OAAO,aAAI,SAAS,EAAE,SAAS,GAAI,CAAC;AACtC,CAAC"}

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

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+/**
+ * Tracks the current field path prefix for nested scoping.
+ * Nested `ObjectScope` and `ArrayField` components compose prefixes:
+ *
+ *   `""` → `"address"` → `"address.street"`
+ *   `""` → `"items[0]"` → `"items[0].name"`
+ */
+export interface FieldScopeContextValue {
+    /** Current path prefix, e.g. `"address"` or `"addresses[2]"`. Empty string at root. */
+    pathPrefix: string;
+}
+export interface FieldScopeProviderProps {
+    pathPrefix: string;
+    children: ReactNode;
+}
+export declare function FieldScopeProvider({ pathPrefix, children }: FieldScopeProviderProps): ReactNode;
+/** Returns the current `FieldScopeContextValue`. */
+export declare function useFieldScope(): FieldScopeContextValue;
+/**
+ * Resolves a relative field name against the current scope prefix.
+ *
+ * - Root scope (`""`) + `"street"` → `"street"`
+ * - Object scope (`"address"`) + `"street"` → `"address.street"`
+ * - Array scope (`"items[0]"`) + `"name"` → `"items[0].name"`
+ */
+export declare function useResolvedFieldName(name: string): string;
+//# sourceMappingURL=FieldScopeContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldScopeContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/FieldScopeContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE;;;;;;GAMG;AACH,MAAM,WAAW,sBAAsB;IACrC,uFAAuF;IACvF,UAAU,EAAE,MAAM,CAAC;CACpB;AAID,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,uBAAuB,GAAG,SAAS,CAE/F;AAED,oDAAoD;AACpD,wBAAgB,aAAa,IAAI,sBAAsB,CAEtD;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAIzD"}

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

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const FieldScopeContext = createContext({ pathPrefix: '' });
+export function FieldScopeProvider({ pathPrefix, children }) {
+    return _jsx(FieldScopeContext.Provider, { value: { pathPrefix }, children: children });
+}
+/** Returns the current `FieldScopeContextValue`. */
+export function useFieldScope() {
+    return useContext(FieldScopeContext);
+}
+/**
+ * Resolves a relative field name against the current scope prefix.
+ *
+ * - Root scope (`""`) + `"street"` → `"street"`
+ * - Object scope (`"address"`) + `"street"` → `"address.street"`
+ * - Array scope (`"items[0]"`) + `"name"` → `"items[0].name"`
+ */
+export function useResolvedFieldName(name) {
+    const { pathPrefix } = useFieldScope();
+    if (!pathPrefix)
+        return name;
+    return `${pathPrefix}.${name}`;
+}
+//# sourceMappingURL=FieldScopeContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldScopeContext.js","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/FieldScopeContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAclE,MAAM,iBAAiB,GAAG,aAAa,CAAyB,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;AAOpF,MAAM,UAAU,kBAAkB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAA2B;IAClF,OAAO,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,YAAG,QAAQ,GAA8B,CAAC;AACpG,CAAC;AAED,oDAAoD;AACpD,MAAM,UAAU,aAAa;IAC3B,OAAO,UAAU,CAAC,iBAAiB,CAAC,CAAC;AACvC,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,oBAAoB,CAAC,IAAY;IAC/C,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAC;IACvC,IAAI,CAAC,UAAU;QAAE,OAAO,IAAI,CAAC;IAC7B,OAAO,GAAG,UAAU,IAAI,IAAI,EAAE,CAAC;AACjC,CAAC"}

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+export interface FormErrorSummarySlotProps {
+    /** Additional CSS classes for the error summary container. */
+    className?: string;
+}
+/**
+ * Error summary placement slot.
+ *
+ * Renders the form's error summary (list of validation errors).
+ * If omitted from the template, FormLayout can auto-inject one at the top.
+ *
+ * @example
+ * ```tsx
+ * <FormLayout>
+ *   <FormErrorSummarySlot className="mb-4" />
+ *   <Section name="general">
+ *     <FormField name="title" />
+ *   </Section>
+ *   <SubmitButton />
+ * </FormLayout>
+ * ```
+ */
+export declare function FormErrorSummarySlot({ className }: FormErrorSummarySlotProps): ReactNode;
+//# sourceMappingURL=FormErrorSummarySlot.d.ts.map

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

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

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormErrorSummary } from '../../form/validation-errors/FormErrorSummary.js';
+import { useSlotRegistration } from './FormLayoutSlotContext.js';
+/**
+ * Error summary placement slot.
+ *
+ * Renders the form's error summary (list of validation errors).
+ * If omitted from the template, FormLayout can auto-inject one at the top.
+ *
+ * @example
+ * ```tsx
+ * <FormLayout>
+ *   <FormErrorSummarySlot className="mb-4" />
+ *   <Section name="general">
+ *     <FormField name="title" />
+ *   </Section>
+ *   <SubmitButton />
+ * </FormLayout>
+ * ```
+ */
+export function FormErrorSummarySlot({ className }) {
+    useSlotRegistration('errorSummary');
+    return _jsx(FormErrorSummary, { className: className });
+}
+//# sourceMappingURL=FormErrorSummarySlot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormErrorSummarySlot.js","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/FormErrorSummarySlot.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AACjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAO9D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,oBAAoB,CAAC,EAAE,SAAS,EAA6B;IAC3E,mBAAmB,CAAC,cAAc,CAAC,CAAC;IAEpC,OAAO,KAAC,gBAAgB,IAAC,SAAS,EAAE,SAAS,GAAI,CAAC;AACpD,CAAC"}

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

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+export interface FormLayoutProps {
+    /** Additional CSS classes for the root container. */
+    className?: string;
+    /**
+     * Context field values to inject into form state.
+     * Fields present here are hidden from rendering but populate
+     * the form state for validation and submission (e.g., parent IDs).
+     */
+    contextFieldValues?: Record<string, unknown>;
+    /**
+     * When `false`, suppresses automatic `<SubmitButton>` injection even if no
+     * submit slot is registered by children. Used by `ResourceAutomatedForm`
+     * which renders its own operation-specific submit button outside the
+     * generated template via `ResourceFormActionsContext`.
+     * @default true
+     */
+    autoInjectSubmitButton?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Root wrapper for edit layout templates.
+ *
+ * Renders inside `<Form>` (RHF provider). Handles:
+ * - Root `FieldScopeContext` with empty prefix
+ * - Slot auto-detection: default error summary / submit when omitted (DT-6); no default submit under wizard
+ * - Guidance marker for automated testing (DT-9)
+ *
+ * TODO(F-10): AutoFocus resolution — scan children for first focusable FormField and call focus().
+ * Note: `contextFieldValues` are injected upstream by `AutomatedForm`; generated
+ * templates hide those fields before rendering, while handwritten templates can
+ * still opt into custom treatment when needed.
+ *
+ * @example
+ * ```tsx
+ * <FormLayout>
+ *   <Section name="general">
+ *     <FormField name="title" />
+ *   </Section>
+ *   <SubmitButton />
+ * </FormLayout>
+ * ```
+ */
+export declare function FormLayout({ className, children, contextFieldValues: _contextFieldValues, autoInjectSubmitButton, }: FormLayoutProps): ReactNode;
+//# sourceMappingURL=FormLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/FormLayout.tsx"],"names":[],"mappings":"AAEA,OAAc,EAA2D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBvG,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7C;;;;;;OAMG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,kBAAkB,EAAE,mBAAmB,EACvC,sBAA6B,GAC9B,EAAE,eAAe,GAAG,SAAS,CAyD7B"}

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

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { ErrorBoundary } from '../../../core/errors/ErrorBoundary.js';
+import { FieldScopeProvider } from './FieldScopeContext.js';
+import { FormLayoutSlotContext, } from './FormLayoutSlotContext.js';
+import { FormErrorSummarySlot } from './FormErrorSummarySlot.js';
+import { SubmitButton } from './SubmitButton.js';
+import { useOptionalFormTemplateContext } from '../../form/automated/FormTemplateContext.js';
+import { ContentSectionContainer } from '../../sections/ContentSectionContainer.js';
+import { groupSectionsByAppearance, buildSectionConfigFromGroup, } from './section-consolidation.utils.js';
+import { GroupedSectionBody } from './Section.js';
+import { GroupedSectionHostKind } from './Section.shared.js';
+/**
+ * Root wrapper for edit layout templates.
+ *
+ * Renders inside `<Form>` (RHF provider). Handles:
+ * - Root `FieldScopeContext` with empty prefix
+ * - Slot auto-detection: default error summary / submit when omitted (DT-6); no default submit under wizard
+ * - Guidance marker for automated testing (DT-9)
+ *
+ * TODO(F-10): AutoFocus resolution — scan children for first focusable FormField and call focus().
+ * Note: `contextFieldValues` are injected upstream by `AutomatedForm`; generated
+ * templates hide those fields before rendering, while handwritten templates can
+ * still opt into custom treatment when needed.
+ *
+ * @example
+ * ```tsx
+ * <FormLayout>
+ *   <Section name="general">
+ *     <FormField name="title" />
+ *   </Section>
+ *   <SubmitButton />
+ * </FormLayout>
+ * ```
+ */
+export function FormLayout({ className, children, contextFieldValues: _contextFieldValues, autoInjectSubmitButton = true, }) {
+    const registeredSlots = useRef(new Set());
+    const wizardRootRegistered = useRef(false);
+    const [autoSlots, setAutoSlots] = useState({
+        errorSummary: false,
+        submitButton: false,
+    });
+    const registerSlot = useCallback((slot) => {
+        registeredSlots.current.add(slot);
+    }, []);
+    const registerWizardRoot = useCallback(() => {
+        wizardRootRegistered.current = true;
+    }, []);
+    const slotContextValue = useMemo(() => ({ registerSlot, registerWizardRoot }), [registerSlot, registerWizardRoot]);
+    // After children mount and register their slots, detect missing ones (next frame so layout effects have run).
+    useLayoutEffect(() => {
+        const frame = requestAnimationFrame(() => {
+            const missing = {
+                errorSummary: !registeredSlots.current.has('errorSummary'),
+                submitButton: autoInjectSubmitButton &&
+                    !wizardRootRegistered.current &&
+                    !registeredSlots.current.has('submitButton'),
+            };
+            if (missing.errorSummary || missing.submitButton) {
+                setAutoSlots(missing);
+            }
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [autoInjectSubmitButton]);
+    const formCtx = useOptionalFormTemplateContext();
+    const renderedChildren = useMemo(() => renderGroupedChildren(children, formCtx), [children, formCtx]);
+    return (_jsx(FormLayoutSlotContext.Provider, { value: slotContextValue, children: _jsx(FieldScopeProvider, { pathPrefix: "", children: _jsx("div", { className: className, "data-guidance-form": "", children: _jsxs(ErrorBoundary, { children: [autoSlots.errorSummary ? _jsx(FormErrorSummarySlot, { className: "mb-4" }) : null, renderedChildren, autoSlots.submitButton ? _jsx(SubmitButton, { className: "mt-6" }) : null] }) }) }) }));
+}
+/**
+ * Introspects children for `<Section>` elements with container-mode `appearance`.
+ * Groups sections sharing the same container mode into a `ContentSectionContainer`.
+ * Solo-mode sections and non-Section children render in place.
+ */
+function renderGroupedChildren(children, formCtx) {
+    const grouped = groupSectionsByAppearance(children);
+    return (_jsx(_Fragment, { children: grouped.items.map((item, idx) => {
+            if (item.type === 'node') {
+                return _jsx(React.Fragment, { children: item.node }, idx);
+            }
+            const { group } = item;
+            const config = buildSectionConfigFromGroup(group);
+            const sectionLabels = formCtx?.sectionLabels ?? {};
+            const sectionDescriptions = formCtx?.sectionDescriptions ?? {};
+            const contentSections = group.sections.map((el) => ({
+                id: el.props.name,
+                title: sectionLabels[el.props.name] ?? el.props.name,
+                description: sectionDescriptions[el.props.name],
+                content: (_jsx(GroupedSectionContent, { sectionProps: el.props })),
+            }));
+            return (_jsx(ContentSectionContainer, { sections: contentSections, config: config }, `group-${group.mode}-${idx}`));
+        }) }));
+}
+/**
+ * Wraps an individual grouped section's content with section-level behaviors
+ * (chromeMode, saveable) when rendered inside a container.
+ */
+function GroupedSectionContent({ sectionProps, }) {
+    return (_jsx(GroupedSectionBody, { hostKind: GroupedSectionHostKind.FORM, sectionProps: sectionProps }));
+}
+//# sourceMappingURL=FormLayout.js.map

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

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

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

@@ -0,0 +1,18 @@
+export type FormLayoutSlotType = 'errorSummary' | 'submitButton';
+export interface FormLayoutSlotContextValue {
+    registerSlot: (slot: FormLayoutSlotType) => void;
+    /** Set when `WizardLayout` mounts; suppresses auto-injected `SubmitButton`. */
+    registerWizardRoot: () => void;
+}
+export declare const FormLayoutSlotContext: import("react").Context<FormLayoutSlotContextValue>;
+/**
+ * Hook for slot components (`FormErrorSummarySlot`, `SubmitButton`) to register their presence.
+ * `FormLayout` uses this to know which slots are manually placed by the template author,
+ * and auto-injects defaults for any missing slots.
+ */
+export declare function useSlotRegistration(slot: FormLayoutSlotType): void;
+/**
+ * Called by `WizardLayout` on mount so `FormLayout` does not append a default `SubmitButton`.
+ */
+export declare function useWizardRootRegistration(): void;
+//# sourceMappingURL=FormLayoutSlotContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayoutSlotContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/FormLayoutSlotContext.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG,cAAc,CAAC;AAEjE,MAAM,WAAW,0BAA0B;IACzC,YAAY,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,+EAA+E;IAC/E,kBAAkB,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,qBAAqB,qDAAyD,CAAC;AAE5F;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAKlE;AAED;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,IAAI,CAKhD"}

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

@@ -0,0 +1,24 @@
+'use client';
+import { createContext, useContext, useLayoutEffect } from 'react';
+export const FormLayoutSlotContext = createContext(null);
+/**
+ * Hook for slot components (`FormErrorSummarySlot`, `SubmitButton`) to register their presence.
+ * `FormLayout` uses this to know which slots are manually placed by the template author,
+ * and auto-injects defaults for any missing slots.
+ */
+export function useSlotRegistration(slot) {
+    const ctx = useContext(FormLayoutSlotContext);
+    useLayoutEffect(() => {
+        ctx?.registerSlot(slot);
+    }, [slot, ctx]);
+}
+/**
+ * Called by `WizardLayout` on mount so `FormLayout` does not append a default `SubmitButton`.
+ */
+export function useWizardRootRegistration() {
+    const ctx = useContext(FormLayoutSlotContext);
+    useLayoutEffect(() => {
+        ctx?.registerWizardRoot();
+    }, [ctx]);
+}
+//# sourceMappingURL=FormLayoutSlotContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayoutSlotContext.js","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/FormLayoutSlotContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAUnE,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAoC,IAAI,CAAC,CAAC;AAE5F;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAAwB;IAC1D,MAAM,GAAG,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAC9C,eAAe,CAAC,GAAG,EAAE;QACnB,GAAG,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;AAClB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,yBAAyB;IACvC,MAAM,GAAG,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAC9C,eAAe,CAAC,GAAG,EAAE;QACnB,GAAG,EAAE,kBAAkB,EAAE,CAAC;IAC5B,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AACZ,CAAC"}

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

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+export interface GroupProps {
+    /**
+     * Structural ref — maps to i18n keys for title:
+     * - `resources.{type}.groups.{name}.title`
+     *
+     * Must match an entry in `layout.refs.groups`.
+     */
+    name: string;
+    /** Additional CSS classes for the group container. */
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Visual grouping for form and display templates.
+ *
+ * Groups fields with an optional i18n title resolved from:
+ *   formCtx.groupLabels → displayCtx.groupLabels
+ *
+ * Groups and sections are distinct concepts with separate i18n namespaces
+ * (`resources.{type}.groups.{ref}.title` vs `resources.{type}.sections.{ref}.title`).
+ * No cross-pollination between the two.
+ *
+ * @example
+ * ```tsx
+ * <DisplayLayout>
+ *   <Group name="contact" className="hidden md:block">
+ *     <DisplayField name="email" />
+ *     <DisplayField name="phone" />
+ *   </Group>
+ * </DisplayLayout>
+ * ```
+ */
+export declare function Group({ name, className, children }: GroupProps): ReactNode;
+export declare namespace Group {
+    var displayName: string;
+}
+//# sourceMappingURL=Group.d.ts.map

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

@@ -0,0 +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,CAc1E;yBAde,KAAK"}

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

@@ -0,0 +1,34 @@
+'use client';
+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';
+/**
+ * Visual grouping for form and display templates.
+ *
+ * Groups fields with an optional i18n title resolved from:
+ *   formCtx.groupLabels → displayCtx.groupLabels
+ *
+ * Groups and sections are distinct concepts with separate i18n namespaces
+ * (`resources.{type}.groups.{ref}.title` vs `resources.{type}.sections.{ref}.title`).
+ * No cross-pollination between the two.
+ *
+ * @example
+ * ```tsx
+ * <DisplayLayout>
+ *   <Group name="contact" className="hidden md:block">
+ *     <DisplayField name="email" />
+ *     <DisplayField name="phone" />
+ *   </Group>
+ * </DisplayLayout>
+ * ```
+ */
+export function Group({ name, className, children }) {
+    const formCtx = useOptionalFormTemplateContext();
+    const displayCtx = useOptionalDisplayTemplateContext();
+    const title = formCtx?.groupLabels?.[name] ??
+        displayCtx?.groupLabels?.[name];
+    return (_jsxs("div", { className: className, "data-guidance-group": name, children: [title && _jsx(Subheading, { level: 3, className: "mb-element", children: title }), children] }));
+}
+Group.displayName = 'Group';
+//# sourceMappingURL=Group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/Group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,8BAA8B,EAAE,MAAM,0CAA0C,CAAC;AAC1F,OAAO,EAAE,iCAAiC,EAAE,MAAM,2CAA2C,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAetD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAc;IAC7D,MAAM,OAAO,GAAG,8BAA8B,EAAE,CAAC;IACjD,MAAM,UAAU,GAAG,iCAAiC,EAAE,CAAC;IAEvD,MAAM,KAAK,GACT,OAAO,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC;QAC5B,UAAU,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC;IAElC,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,yBAAuB,IAAI,aACjD,KAAK,IAAI,KAAC,UAAU,IAAC,KAAK,EAAE,CAAC,EAAE,SAAS,EAAC,YAAY,YAAE,KAAK,GAAc,EAC1E,QAAQ,IACL,CACP,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

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

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+export interface ObjectScopeProps {
+    /**
+     * Name of the nested object field in the parent schema.
+     * Children use relative field names that resolve against this scope.
+     */
+    name: string;
+    /** Additional CSS classes for the scope container (rendered only when provided). */
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Establishes a `FieldScopeContext` for nested object fields.
+ *
+ * Children use **relative** field names that compose with the scope:
+ * `<ObjectScope name="address">` + `<FormField name="street" />` → `"address.street"`
+ *
+ * Scopes compose naturally for deep nesting:
+ * ```
+ * <ObjectScope name="company">
+ *   <ObjectScope name="address">
+ *     <FormField name="street" />  → "company.address.street"
+ *   </ObjectScope>
+ * </ObjectScope>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Section name="shipping">
+ *   <ObjectScope name="address">
+ *     <div className="grid grid-cols-2 gap-4">
+ *       <FormField name="street" className="col-span-2" />
+ *       <FormField name="city" />
+ *       <FormField name="zipCode" />
+ *     </div>
+ *     <FormField name="country" />
+ *   </ObjectScope>
+ * </Section>
+ * ```
+ */
+export declare function ObjectScope({ name, className, children }: ObjectScopeProps): ReactNode;
+//# sourceMappingURL=ObjectScope.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectScope.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/ObjectScope.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,gBAAgB,GAAG,SAAS,CActF"}

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

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldScopeProvider, useFieldScope } from './FieldScopeContext.js';
+/**
+ * Establishes a `FieldScopeContext` for nested object fields.
+ *
+ * Children use **relative** field names that compose with the scope:
+ * `<ObjectScope name="address">` + `<FormField name="street" />` → `"address.street"`
+ *
+ * Scopes compose naturally for deep nesting:
+ * ```
+ * <ObjectScope name="company">
+ *   <ObjectScope name="address">
+ *     <FormField name="street" />  → "company.address.street"
+ *   </ObjectScope>
+ * </ObjectScope>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Section name="shipping">
+ *   <ObjectScope name="address">
+ *     <div className="grid grid-cols-2 gap-4">
+ *       <FormField name="street" className="col-span-2" />
+ *       <FormField name="city" />
+ *       <FormField name="zipCode" />
+ *     </div>
+ *     <FormField name="country" />
+ *   </ObjectScope>
+ * </Section>
+ * ```
+ */
+export function ObjectScope({ name, className, children }) {
+    const { pathPrefix } = useFieldScope();
+    const composedPrefix = pathPrefix ? `${pathPrefix}.${name}` : name;
+    const content = (_jsx(FieldScopeProvider, { pathPrefix: composedPrefix, children: children }));
+    if (className) {
+        return _jsx("div", { className: className, children: content });
+    }
+    return content;
+}
+//# sourceMappingURL=ObjectScope.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectScope.js","sourceRoot":"","sources":["../../../../../src/components/resources/skeleton/ObjectScope.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAaxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAoB;IACzE,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAC;IACvC,MAAM,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAEnE,MAAM,OAAO,GAAG,CACd,KAAC,kBAAkB,IAAC,UAAU,EAAE,cAAc,YAC3C,QAAQ,GACU,CACtB,CAAC;IAEF,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,cAAK,SAAS,EAAE,SAAS,YAAG,OAAO,GAAO,CAAC;IACpD,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC"}