@wildo-ai/saas-frontend-lib 1.1.5 → 1.1.6

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { DisplayDirection } from '@wildo-ai/zod-decorators';
 import { FrontendComponentType } from '@wildo-ai/presets-components-models';
@@ -9,6 +9,7 @@ import { Stepper, StepperItem, StepperIndicator, StepperSeparator, StepperTitle,
 import { ErrorBoundary } from '../../../core/errors/ErrorBoundary.js';
 import { useI18n } from '../../../core/i18n/useI18n.js';
 import { useOptionalFormTemplateContext } from '../../../components/form/automated/FormTemplateContext.js';
+import { useOptionalResourceFormActions } from '../../../components/form/automated/ResourceFormActionsContext.js';
 import { scrollAndFocusFirstErroredField } from '../../../components/form/validation-errors/scroll-to-first-error.utils.js';
 import { useWizardRootRegistration } from './FormLayoutSlotContext.js';
 import { WizardLayoutContext } from './WizardLayoutContext.js';
@@ -23,6 +24,12 @@ import { WizardStep } from './WizardStep.js';
  * Children must be `<WizardStep>` components. Non-WizardStep children are
  * silently filtered out.
  *
+ * Under a resource form (a create or edit dialog or page) the wizard OWNS the form's footer: it claims it
+ * (`claimFooter`) and renders the host's Cancel, draft-save and operation-named submit inside its own
+ * navigation row — the submit on the last step only. Otherwise the host appended its own Cancel/Create row
+ * under the wizard's Previous/Next, so "Create" on step 1 submitted without the later steps ever being seen,
+ * and the last step offered two submit buttons.
+ *
  * @example
  * ```tsx
  * <FormLayout>
@@ -46,6 +53,10 @@ export function WizardLayout({ className, initialStep = 0, validateOnStepChange
     const wizardTopRef = useRef(null);
     const form = useFormContext();
     const templateCtx = useOptionalFormTemplateContext();
+    const hostActions = useOptionalResourceFormActions();
+    const claimFooter = hostActions?.claimFooter;
+    // Layout effect: the claim lands before paint, so the host's footer never flashes under the wizard.
+    useLayoutEffect(() => claimFooter?.(), [claimFooter]);
     const { tComponent, isReady } = useI18n({
         component: FrontendComponentType.LOW_LEVEL_FORM_MESSAGE,
     });
@@ -127,7 +138,7 @@ export function WizardLayout({ className, initialStep = 0, validateOnStepChange
         return null;
     const previousLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardPrevious');
     const nextLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardNext');
-    return (_jsx(WizardLayoutContext.Provider, { value: wizardContextValue, children: _jsxs("div", { className: className, "data-guidance-wizard": "", children: [_jsx("div", { ref: wizardTopRef, children: _jsx(Stepper, { currentStep: currentStep, totalSteps: totalSteps, orientation: DisplayDirection.HORIZONTAL, className: "mb-region", children: wizardSteps.map((step, index) => (_jsxs(React.Fragment, { children: [_jsxs(StepperItem, { step: index, children: [_jsx(StepperIndicator, { step: index }), _jsx("div", { className: "flex flex-col items-center text-center", children: _jsx(StepperTitle, { step: index, children: _jsx("span", { id: `wizard-tab-${step.name}`, children: getStepLabel(step.name, index) }) }) })] }), index < totalSteps - 1 && _jsx(StepperSeparator, { step: index })] }, step.name))) }) }), wizardSteps.map((step, index) => (_jsx("div", { style: { display: index === currentStep ? undefined : 'none' }, "aria-hidden": index !== currentStep, children: _jsx(ErrorBoundary, { children: step.element }) }, step.name))), _jsxs("div", { className: "flex justify-between gap-field pt-field", children: [_jsx(Button, { type: "button", variant: ButtonVariants_Variant.OUTLINE, onClick: handlePrevious, disabled: isFirstStep || templateCtx?.disabled, children: previousLabel }), _jsx("div", { className: "flex gap-element", children: isLastStep ? (submitButton ?? (_jsx(Button, { type: "submit", disabled: templateCtx?.disabled, children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardSubmit') }))) : (_jsx(Button, { type: "button", onClick: handleNext, disabled: templateCtx?.disabled, children: nextLabel })) })] })] }) }));
+    return (_jsx(WizardLayoutContext.Provider, { value: wizardContextValue, children: _jsxs("div", { className: className, "data-guidance-wizard": "", children: [_jsx("div", { ref: wizardTopRef, children: _jsx(Stepper, { currentStep: currentStep, totalSteps: totalSteps, orientation: DisplayDirection.HORIZONTAL, className: "mb-region", children: wizardSteps.map((step, index) => (_jsxs(React.Fragment, { children: [_jsxs(StepperItem, { step: index, children: [_jsx(StepperIndicator, { step: index }), _jsx("div", { className: "flex flex-col items-center text-center", children: _jsx(StepperTitle, { step: index, children: _jsx("span", { id: `wizard-tab-${step.name}`, children: getStepLabel(step.name, index) }) }) })] }), index < totalSteps - 1 && _jsx(StepperSeparator, { step: index })] }, step.name))) }) }), wizardSteps.map((step, index) => (_jsx("div", { style: { display: index === currentStep ? undefined : 'none' }, "aria-hidden": index !== currentStep, children: _jsx(ErrorBoundary, { children: step.element }) }, step.name))), hostActions?.submissionNotice, _jsxs("div", { className: "flex justify-between gap-field pt-field", children: [_jsx(Button, { type: "button", variant: ButtonVariants_Variant.OUTLINE, onClick: handlePrevious, disabled: isFirstStep || templateCtx?.disabled, children: previousLabel }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-element", children: [hostActions?.cancelButton, hostActions?.draftSaveButton, isLastStep ? (submitButton ?? hostActions?.submitButton ?? (_jsx(Button, { type: "submit", disabled: templateCtx?.disabled, children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardSubmit') }))) : (_jsx(Button, { type: "button", onClick: handleNext, disabled: templateCtx?.disabled, children: nextLabel }))] })] })] }) }));
 }
 /**
  * Scroll to the first field with a validation error.

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

@@ -1 +1 @@
-{"version":3,"file":"WizardLayout.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/WizardLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React, { useCallback, useMemo, useRef, useState, type ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { DisplayDirection } from '@wildo-ai/zod-decorators';\nimport { FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport {\n  Stepper,\n  StepperItem,\n  StepperIndicator,\n  StepperSeparator,\n  StepperTitle,\n} from '~wildo-frontend-lib/components/sections/stepper';\nimport { ErrorBoundary } from '~wildo-frontend-lib/core/errors/ErrorBoundary';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useOptionalFormTemplateContext } from '~wildo-frontend-lib/components/form/automated/FormTemplateContext';\nimport { scrollAndFocusFirstErroredField } from '~wildo-frontend-lib/components/form/validation-errors/scroll-to-first-error.utils';\nimport { useWizardRootRegistration } from './FormLayoutSlotContext';\nimport { WizardLayoutContext } from './WizardLayoutContext';\nimport { WizardStep } from './WizardStep';\n\nexport interface WizardLayoutProps {\n  /** Additional CSS classes for the wizard container. */\n  className?: string;\n  /** 0-based index of the initially active step. @default 0 */\n  initialStep?: number;\n  /** When `true`, validates current step fields before allowing navigation forward. @default true */\n  validateOnStepChange?: boolean;\n  /** Callback fired when step changes (after validation, if enabled). */\n  onStepChange?: (from: number, to: number) => void;\n  /** Custom submit button to render on the last step instead of the default. */\n  submitButton?: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * Wizard container for multi-step form templates.\n *\n * Manages step state, renders a Stepper UI, navigation buttons (prev/next/submit),\n * and per-step validation. All steps remain mounted (hidden with `display: none`)\n * so that RHF retains field state across steps.\n *\n * Children must be `<WizardStep>` components. Non-WizardStep children are\n * silently filtered out.\n *\n * @example\n * ```tsx\n * <FormLayout>\n *   <WizardLayout>\n *     <WizardStep name=\"basics\">\n *       <FormField name=\"title\" />\n *       <FormField name=\"description\" />\n *     </WizardStep>\n *     <WizardStep name=\"settings\">\n *       <FormField name=\"priority\" />\n *       <FormField name=\"dueDate\" />\n *     </WizardStep>\n *   </WizardLayout>\n * </FormLayout>\n * ```\n */\nexport function WizardLayout({\n  className,\n  initialStep = 0,\n  validateOnStepChange = true,\n  onStepChange,\n  submitButton,\n  children,\n}: WizardLayoutProps): ReactNode {\n  useWizardRootRegistration();\n\n  const [currentStep, setCurrentStep] = useState(initialStep);\n  const stepFieldsRef = useRef<Map<string, Set<string>>>(new Map());\n  const wizardTopRef = useRef<HTMLDivElement>(null);\n\n  const form = useFormContext();\n  const templateCtx = useOptionalFormTemplateContext();\n  const { tComponent, isReady } = useI18n({\n    component: FrontendComponentType.LOW_LEVEL_FORM_MESSAGE,\n  });\n\n  const wizardSteps = useMemo(() => {\n    const steps: Array<{ name: string; element: React.ReactElement }> = [];\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement(child) && child.type === WizardStep) {\n        steps.push({\n          name: (child.props as { name: string }).name,\n          element: child,\n        });\n      }\n    });\n    return steps;\n  }, [children]);\n\n  const totalSteps = wizardSteps.length;\n\n  const registerStep = useCallback((name: string, fields: Set<string>) => {\n    stepFieldsRef.current.set(name, fields);\n  }, []);\n\n  const getCurrentStepFieldNames = useCallback(() => {\n    const currentStepName = wizardSteps[currentStep]?.name;\n    if (!currentStepName) return undefined;\n    const stepFields = stepFieldsRef.current.get(currentStepName);\n    return stepFields ? Array.from(stepFields) : undefined;\n  }, [currentStep, wizardSteps]);\n\n  const wizardContextValue = useMemo<React.ContextType<typeof WizardLayoutContext>>(\n    () => ({ registerStep, getCurrentStepFieldNames, currentStep, totalSteps }),\n    [registerStep, getCurrentStepFieldNames, currentStep, totalSteps],\n  );\n\n  /*\n   * A DECLARED step always has an entry: its generated title, or — since #1450 — that title's key\n   * path once the bundle has settled, so an unlabelled declared step reads as missing rather than\n   * as \"Step 2\". The numbered default below is what remains for a step the layout does not declare\n   * (no ref in `layoutRefs.wizardSteps`, so no label could be planned for it) and for the loading\n   * window, when the title is still ''.\n   */\n  const getStepLabel = (stepName: string, index: number): string => {\n    if (templateCtx?.wizardStepLabels?.[stepName]) {\n      return templateCtx.wizardStepLabels[stepName];\n    }\n    return tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardStepDefault', {\n      index: String(index + 1),\n    });\n  };\n\n  const scrollToTop = () => {\n    wizardTopRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n  };\n\n  const goToStep = (to: number) => {\n    const from = currentStep;\n    setCurrentStep(to);\n    onStepChange?.(from, to);\n    scrollToTop();\n  };\n\n  const handlePrevious = () => {\n    if (currentStep > 0) {\n      goToStep(currentStep - 1);\n    }\n  };\n\n  const handleNext = async () => {\n    if (validateOnStepChange && form) {\n      const currentStepName = wizardSteps[currentStep]?.name;\n      const stepFields = currentStepName\n        ? stepFieldsRef.current.get(currentStepName)\n        : undefined;\n\n      const fieldNames = stepFields ? Array.from(stepFields) : [];\n      const isValid = fieldNames.length\n        ? await form.trigger(fieldNames)\n        : await form.trigger();\n\n      if (!isValid) {\n        scrollToFirstError(form, fieldNames);\n        return;\n      }\n    }\n    if (currentStep < totalSteps - 1) {\n      goToStep(currentStep + 1);\n    }\n  };\n\n  const isFirstStep = currentStep === 0;\n  const isLastStep = currentStep === totalSteps - 1;\n\n  if (!isReady) return null;\n\n  const previousLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardPrevious');\n  const nextLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardNext');\n\n  return (\n    <WizardLayoutContext.Provider value={wizardContextValue}>\n      <div className={className} data-guidance-wizard=\"\">\n        <div ref={wizardTopRef}>\n          <Stepper\n            currentStep={currentStep}\n            totalSteps={totalSteps}\n            orientation={DisplayDirection.HORIZONTAL}\n            className=\"mb-region\"\n          >\n            {wizardSteps.map((step, index) => (\n              <React.Fragment key={step.name}>\n                <StepperItem step={index}>\n                  <StepperIndicator step={index} />\n                  <div className=\"flex flex-col items-center text-center\">\n                    <StepperTitle step={index}>\n                      <span id={`wizard-tab-${step.name}`}>\n                        {getStepLabel(step.name, index)}\n                      </span>\n                    </StepperTitle>\n                  </div>\n                </StepperItem>\n                {index < totalSteps - 1 && <StepperSeparator step={index} />}\n              </React.Fragment>\n            ))}\n          </Stepper>\n        </div>\n\n        {wizardSteps.map((step, index) => (\n          <div\n            key={step.name}\n            style={{ display: index === currentStep ? undefined : 'none' }}\n            aria-hidden={index !== currentStep}\n          >\n            <ErrorBoundary>\n              {step.element}\n            </ErrorBoundary>\n          </div>\n        ))}\n\n        <div className=\"flex justify-between gap-field pt-field\">\n          <Button\n            type=\"button\"\n            variant={ButtonVariants_Variant.OUTLINE}\n            onClick={handlePrevious}\n            disabled={isFirstStep || templateCtx?.disabled}\n          >\n            {previousLabel}\n          </Button>\n\n          <div className=\"flex gap-element\">\n            {isLastStep ? (\n              submitButton ?? (\n                <Button type=\"submit\" disabled={templateCtx?.disabled}>\n                  {tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardSubmit')}\n                </Button>\n              )\n            ) : (\n              <Button\n                type=\"button\"\n                onClick={handleNext}\n                disabled={templateCtx?.disabled}\n              >\n                {nextLabel}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </WizardLayoutContext.Provider>\n  );\n}\n\n/**\n * Scroll to the first field with a validation error.\n * Uses `data-field` or `name` attributes to locate the DOM element.\n */\nfunction scrollToFirstError(\n  form: ReturnType<typeof useFormContext>,\n  fieldNames?: string[],\n): void {\n  const errors = form.formState.errors;\n  let firstErrorField: string | null = null;\n\n  if (fieldNames?.length) {\n    for (const fieldName of fieldNames) {\n      const parts = fieldName.split('.');\n      let errorObj: unknown = errors;\n      for (const part of parts) {\n        if (errorObj && typeof errorObj === 'object' && part in errorObj) {\n          errorObj = (errorObj as Record<string, unknown>)[part];\n        } else {\n          errorObj = undefined;\n          break;\n        }\n      }\n      if (errorObj) {\n        firstErrorField = fieldName;\n        break;\n      }\n    }\n  }\n\n  if (!firstErrorField) return;\n\n  // Shared scroll+focus mechanics (see scroll-to-first-error.utils, audit D4) —\n  // this wizard keeps its own STEP-SCOPED first-error selection above, but the\n  // DOM lookup / scroll / focus behavior is the same contract the whole-form\n  // submit path uses.\n  scrollAndFocusFirstErroredField([firstErrorField]);\n}\n"]}
+{"version":3,"file":"WizardLayout.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/WizardLayout.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACvG,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC;AAC/F,OAAO,EACL,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,GACb,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAC;AAChE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mEAAmE,CAAC;AACnH,OAAO,EAAE,8BAA8B,EAAE,MAAM,0EAA0E,CAAC;AAC1H,OAAO,EAAE,+BAA+B,EAAE,MAAM,mFAAmF,CAAC;AACpI,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgB1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,GAAG,CAAC,EACf,oBAAoB,GAAG,IAAI,EAC3B,YAAY,EACZ,YAAY,EACZ,QAAQ,GACU;IAClB,yBAAyB,EAAE,CAAC;IAE5B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC5D,MAAM,aAAa,GAAG,MAAM,CAA2B,IAAI,GAAG,EAAE,CAAC,CAAC;IAClE,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;IAC9B,MAAM,WAAW,GAAG,8BAA8B,EAAE,CAAC;IACrD,MAAM,WAAW,GAAG,8BAA8B,EAAE,CAAC;IACrD,MAAM,WAAW,GAAG,WAAW,EAAE,WAAW,CAAC;IAC7C,oGAAoG;IACpG,eAAe,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IACtD,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;QACtC,SAAS,EAAE,qBAAqB,CAAC,sBAAsB;KACxD,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,KAAK,GAAyD,EAAE,CAAC;QACvE,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;gBAC7D,KAAK,CAAC,IAAI,CAAC;oBACT,IAAI,EAAG,KAAK,CAAC,KAA0B,CAAC,IAAI;oBAC5C,OAAO,EAAE,KAAK;iBACf,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;QACH,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC;IAEtC,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,IAAY,EAAE,MAAmB,EAAE,EAAE;QACrE,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,wBAAwB,GAAG,WAAW,CAAC,GAAG,EAAE;QAChD,MAAM,eAAe,GAAG,WAAW,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC;QACvD,IAAI,CAAC,eAAe;YAAE,OAAO,SAAS,CAAC;QACvC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QAC9D,OAAO,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAE/B,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,wBAAwB,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC,EAC3E,CAAC,YAAY,EAAE,wBAAwB,EAAE,WAAW,EAAE,UAAU,CAAC,CAClE,CAAC;IAEF;;;;;;OAMG;IACH,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,KAAa,EAAU,EAAE;QAC/D,IAAI,WAAW,EAAE,gBAAgB,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,OAAO,WAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;QACD,OAAO,UAAU,CAAC,qBAAqB,CAAC,sBAAsB,EAAE,mBAAmB,EAAE;YACnF,KAAK,EAAE,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;SACzB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,YAAY,CAAC,OAAO,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/E,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,EAAU,EAAE,EAAE;QAC9B,MAAM,IAAI,GAAG,WAAW,CAAC;QACzB,cAAc,CAAC,EAAE,CAAC,CAAC;QACnB,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACzB,WAAW,EAAE,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;YACpB,QAAQ,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,IAAI,EAAE;QAC5B,IAAI,oBAAoB,IAAI,IAAI,EAAE,CAAC;YACjC,MAAM,eAAe,GAAG,WAAW,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC;YACvD,MAAM,UAAU,GAAG,eAAe;gBAChC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC;gBAC5C,CAAC,CAAC,SAAS,CAAC;YAEd,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC5D,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM;gBAC/B,CAAC,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;gBAChC,CAAC,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;YAEzB,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,kBAAkB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;gBACrC,OAAO;YACT,CAAC;QACH,CAAC;QACD,IAAI,WAAW,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC;YACjC,QAAQ,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,KAAK,CAAC,CAAC;IACtC,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,GAAG,CAAC,CAAC;IAElD,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,aAAa,GAAG,UAAU,CAAC,qBAAqB,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,CAAC;IACjG,MAAM,SAAS,GAAG,UAAU,CAAC,qBAAqB,CAAC,sBAAsB,EAAE,YAAY,CAAC,CAAC;IAEzF,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB,YACrD,eAAK,SAAS,EAAE,SAAS,0BAAuB,EAAE,aAChD,cAAK,GAAG,EAAE,YAAY,YACpB,KAAC,OAAO,IACN,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,gBAAgB,CAAC,UAAU,EACxC,SAAS,EAAC,WAAW,YAEpB,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,MAAC,KAAK,CAAC,QAAQ,eACb,MAAC,WAAW,IAAC,IAAI,EAAE,KAAK,aACtB,KAAC,gBAAgB,IAAC,IAAI,EAAE,KAAK,GAAI,EACjC,cAAK,SAAS,EAAC,wCAAwC,YACrD,KAAC,YAAY,IAAC,IAAI,EAAE,KAAK,YACvB,eAAM,EAAE,EAAE,cAAc,IAAI,CAAC,IAAI,EAAE,YAChC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,GAC1B,GACM,GACX,IACM,EACb,KAAK,GAAG,UAAU,GAAG,CAAC,IAAI,KAAC,gBAAgB,IAAC,IAAI,EAAE,KAAK,GAAI,KAXzC,IAAI,CAAC,IAAI,CAYb,CAClB,CAAC,GACM,GACN,EAEL,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,cAEE,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAAE,iBACjD,KAAK,KAAK,WAAW,YAElC,KAAC,aAAa,cACX,IAAI,CAAC,OAAO,GACC,IANX,IAAI,CAAC,IAAI,CAOV,CACP,CAAC,EAED,WAAW,EAAE,gBAAgB,EAC9B,eAAK,SAAS,EAAC,yCAAyC,aACtD,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,sBAAsB,CAAC,OAAO,EACvC,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,WAAW,IAAI,WAAW,EAAE,QAAQ,YAE7C,aAAa,GACP,EAET,eAAK,SAAS,EAAC,qDAAqD,aACjE,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,eAAe,EAC5B,UAAU,CAAC,CAAC,CAAC,CACZ,YAAY,IAAI,WAAW,EAAE,YAAY,IAAI,CAC3C,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,YAClD,UAAU,CAAC,qBAAqB,CAAC,sBAAsB,EAAE,cAAc,CAAC,GAClE,CACV,CACF,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,WAAW,EAAE,QAAQ,YAE9B,SAAS,GACH,CACV,IACG,IACF,IACF,GACuB,CAChC,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,SAAS,kBAAkB,CACzB,IAAuC,EACvC,UAAqB;IAErB,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IACrC,IAAI,eAAe,GAAkB,IAAI,CAAC;IAE1C,IAAI,UAAU,EAAE,MAAM,EAAE,CAAC;QACvB,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;YACnC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACnC,IAAI,QAAQ,GAAY,MAAM,CAAC;YAC/B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;gBACzB,IAAI,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,IAAI,IAAI,QAAQ,EAAE,CAAC;oBACjE,QAAQ,GAAI,QAAoC,CAAC,IAAI,CAAC,CAAC;gBACzD,CAAC;qBAAM,CAAC;oBACN,QAAQ,GAAG,SAAS,CAAC;oBACrB,MAAM;gBACR,CAAC;YACH,CAAC;YACD,IAAI,QAAQ,EAAE,CAAC;gBACb,eAAe,GAAG,SAAS,CAAC;gBAC5B,MAAM;YACR,CAAC;QACH,CAAC;IACH,CAAC;IAED,IAAI,CAAC,eAAe;QAAE,OAAO;IAE7B,8EAA8E;IAC9E,6EAA6E;IAC7E,2EAA2E;IAC3E,oBAAoB;IACpB,+BAA+B,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC;AACrD,CAAC","sourcesContent":["'use client';\n\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { DisplayDirection } from '@wildo-ai/zod-decorators';\nimport { FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport {\n  Stepper,\n  StepperItem,\n  StepperIndicator,\n  StepperSeparator,\n  StepperTitle,\n} from '~wildo-frontend-lib/components/sections/stepper';\nimport { ErrorBoundary } from '~wildo-frontend-lib/core/errors/ErrorBoundary';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useOptionalFormTemplateContext } from '~wildo-frontend-lib/components/form/automated/FormTemplateContext';\nimport { useOptionalResourceFormActions } from '~wildo-frontend-lib/components/form/automated/ResourceFormActionsContext';\nimport { scrollAndFocusFirstErroredField } from '~wildo-frontend-lib/components/form/validation-errors/scroll-to-first-error.utils';\nimport { useWizardRootRegistration } from './FormLayoutSlotContext';\nimport { WizardLayoutContext } from './WizardLayoutContext';\nimport { WizardStep } from './WizardStep';\n\nexport interface WizardLayoutProps {\n  /** Additional CSS classes for the wizard container. */\n  className?: string;\n  /** 0-based index of the initially active step. @default 0 */\n  initialStep?: number;\n  /** When `true`, validates current step fields before allowing navigation forward. @default true */\n  validateOnStepChange?: boolean;\n  /** Callback fired when step changes (after validation, if enabled). */\n  onStepChange?: (from: number, to: number) => void;\n  /** Custom submit button to render on the last step instead of the default. */\n  submitButton?: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * Wizard container for multi-step form templates.\n *\n * Manages step state, renders a Stepper UI, navigation buttons (prev/next/submit),\n * and per-step validation. All steps remain mounted (hidden with `display: none`)\n * so that RHF retains field state across steps.\n *\n * Children must be `<WizardStep>` components. Non-WizardStep children are\n * silently filtered out.\n *\n * Under a resource form (a create or edit dialog or page) the wizard OWNS the form's footer: it claims it\n * (`claimFooter`) and renders the host's Cancel, draft-save and operation-named submit inside its own\n * navigation row — the submit on the last step only. Otherwise the host appended its own Cancel/Create row\n * under the wizard's Previous/Next, so \"Create\" on step 1 submitted without the later steps ever being seen,\n * and the last step offered two submit buttons.\n *\n * @example\n * ```tsx\n * <FormLayout>\n *   <WizardLayout>\n *     <WizardStep name=\"basics\">\n *       <FormField name=\"title\" />\n *       <FormField name=\"description\" />\n *     </WizardStep>\n *     <WizardStep name=\"settings\">\n *       <FormField name=\"priority\" />\n *       <FormField name=\"dueDate\" />\n *     </WizardStep>\n *   </WizardLayout>\n * </FormLayout>\n * ```\n */\nexport function WizardLayout({\n  className,\n  initialStep = 0,\n  validateOnStepChange = true,\n  onStepChange,\n  submitButton,\n  children,\n}: WizardLayoutProps): ReactNode {\n  useWizardRootRegistration();\n\n  const [currentStep, setCurrentStep] = useState(initialStep);\n  const stepFieldsRef = useRef<Map<string, Set<string>>>(new Map());\n  const wizardTopRef = useRef<HTMLDivElement>(null);\n\n  const form = useFormContext();\n  const templateCtx = useOptionalFormTemplateContext();\n  const hostActions = useOptionalResourceFormActions();\n  const claimFooter = hostActions?.claimFooter;\n  // Layout effect: the claim lands before paint, so the host's footer never flashes under the wizard.\n  useLayoutEffect(() => claimFooter?.(), [claimFooter]);\n  const { tComponent, isReady } = useI18n({\n    component: FrontendComponentType.LOW_LEVEL_FORM_MESSAGE,\n  });\n\n  const wizardSteps = useMemo(() => {\n    const steps: Array<{ name: string; element: React.ReactElement }> = [];\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement(child) && child.type === WizardStep) {\n        steps.push({\n          name: (child.props as { name: string }).name,\n          element: child,\n        });\n      }\n    });\n    return steps;\n  }, [children]);\n\n  const totalSteps = wizardSteps.length;\n\n  const registerStep = useCallback((name: string, fields: Set<string>) => {\n    stepFieldsRef.current.set(name, fields);\n  }, []);\n\n  const getCurrentStepFieldNames = useCallback(() => {\n    const currentStepName = wizardSteps[currentStep]?.name;\n    if (!currentStepName) return undefined;\n    const stepFields = stepFieldsRef.current.get(currentStepName);\n    return stepFields ? Array.from(stepFields) : undefined;\n  }, [currentStep, wizardSteps]);\n\n  const wizardContextValue = useMemo<React.ContextType<typeof WizardLayoutContext>>(\n    () => ({ registerStep, getCurrentStepFieldNames, currentStep, totalSteps }),\n    [registerStep, getCurrentStepFieldNames, currentStep, totalSteps],\n  );\n\n  /*\n   * A DECLARED step always has an entry: its generated title, or — since #1450 — that title's key\n   * path once the bundle has settled, so an unlabelled declared step reads as missing rather than\n   * as \"Step 2\". The numbered default below is what remains for a step the layout does not declare\n   * (no ref in `layoutRefs.wizardSteps`, so no label could be planned for it) and for the loading\n   * window, when the title is still ''.\n   */\n  const getStepLabel = (stepName: string, index: number): string => {\n    if (templateCtx?.wizardStepLabels?.[stepName]) {\n      return templateCtx.wizardStepLabels[stepName];\n    }\n    return tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardStepDefault', {\n      index: String(index + 1),\n    });\n  };\n\n  const scrollToTop = () => {\n    wizardTopRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n  };\n\n  const goToStep = (to: number) => {\n    const from = currentStep;\n    setCurrentStep(to);\n    onStepChange?.(from, to);\n    scrollToTop();\n  };\n\n  const handlePrevious = () => {\n    if (currentStep > 0) {\n      goToStep(currentStep - 1);\n    }\n  };\n\n  const handleNext = async () => {\n    if (validateOnStepChange && form) {\n      const currentStepName = wizardSteps[currentStep]?.name;\n      const stepFields = currentStepName\n        ? stepFieldsRef.current.get(currentStepName)\n        : undefined;\n\n      const fieldNames = stepFields ? Array.from(stepFields) : [];\n      const isValid = fieldNames.length\n        ? await form.trigger(fieldNames)\n        : await form.trigger();\n\n      if (!isValid) {\n        scrollToFirstError(form, fieldNames);\n        return;\n      }\n    }\n    if (currentStep < totalSteps - 1) {\n      goToStep(currentStep + 1);\n    }\n  };\n\n  const isFirstStep = currentStep === 0;\n  const isLastStep = currentStep === totalSteps - 1;\n\n  if (!isReady) return null;\n\n  const previousLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardPrevious');\n  const nextLabel = tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardNext');\n\n  return (\n    <WizardLayoutContext.Provider value={wizardContextValue}>\n      <div className={className} data-guidance-wizard=\"\">\n        <div ref={wizardTopRef}>\n          <Stepper\n            currentStep={currentStep}\n            totalSteps={totalSteps}\n            orientation={DisplayDirection.HORIZONTAL}\n            className=\"mb-region\"\n          >\n            {wizardSteps.map((step, index) => (\n              <React.Fragment key={step.name}>\n                <StepperItem step={index}>\n                  <StepperIndicator step={index} />\n                  <div className=\"flex flex-col items-center text-center\">\n                    <StepperTitle step={index}>\n                      <span id={`wizard-tab-${step.name}`}>\n                        {getStepLabel(step.name, index)}\n                      </span>\n                    </StepperTitle>\n                  </div>\n                </StepperItem>\n                {index < totalSteps - 1 && <StepperSeparator step={index} />}\n              </React.Fragment>\n            ))}\n          </Stepper>\n        </div>\n\n        {wizardSteps.map((step, index) => (\n          <div\n            key={step.name}\n            style={{ display: index === currentStep ? undefined : 'none' }}\n            aria-hidden={index !== currentStep}\n          >\n            <ErrorBoundary>\n              {step.element}\n            </ErrorBoundary>\n          </div>\n        ))}\n\n        {hostActions?.submissionNotice}\n        <div className=\"flex justify-between gap-field pt-field\">\n          <Button\n            type=\"button\"\n            variant={ButtonVariants_Variant.OUTLINE}\n            onClick={handlePrevious}\n            disabled={isFirstStep || templateCtx?.disabled}\n          >\n            {previousLabel}\n          </Button>\n\n          <div className=\"flex flex-wrap items-center justify-end gap-element\">\n            {hostActions?.cancelButton}\n            {hostActions?.draftSaveButton}\n            {isLastStep ? (\n              submitButton ?? hostActions?.submitButton ?? (\n                <Button type=\"submit\" disabled={templateCtx?.disabled}>\n                  {tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'wizardSubmit')}\n                </Button>\n              )\n            ) : (\n              <Button\n                type=\"button\"\n                onClick={handleNext}\n                disabled={templateCtx?.disabled}\n              >\n                {nextLabel}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </WizardLayoutContext.Provider>\n  );\n}\n\n/**\n * Scroll to the first field with a validation error.\n * Uses `data-field` or `name` attributes to locate the DOM element.\n */\nfunction scrollToFirstError(\n  form: ReturnType<typeof useFormContext>,\n  fieldNames?: string[],\n): void {\n  const errors = form.formState.errors;\n  let firstErrorField: string | null = null;\n\n  if (fieldNames?.length) {\n    for (const fieldName of fieldNames) {\n      const parts = fieldName.split('.');\n      let errorObj: unknown = errors;\n      for (const part of parts) {\n        if (errorObj && typeof errorObj === 'object' && part in errorObj) {\n          errorObj = (errorObj as Record<string, unknown>)[part];\n        } else {\n          errorObj = undefined;\n          break;\n        }\n      }\n      if (errorObj) {\n        firstErrorField = fieldName;\n        break;\n      }\n    }\n  }\n\n  if (!firstErrorField) return;\n\n  // Shared scroll+focus mechanics (see scroll-to-first-error.utils, audit D4) —\n  // this wizard keeps its own STEP-SCOPED first-error selection above, but the\n  // DOM lookup / scroll / focus behavior is the same contract the whole-form\n  // submit path uses.\n  scrollAndFocusFirstErroredField([firstErrorField]);\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"WizardStep.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/WizardStep.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAqD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjG,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,SAAS,CAiDpF"}
+{"version":3,"file":"WizardStep.d.ts","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/WizardStep.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAqD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMjG,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,SAAS,CAsDpF"}

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

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { WizardStepFieldsContext } from './WizardStepFieldsContext.js';
 import { useWizardLayoutContext } from './WizardLayoutContext.js';
+import { cn } from '../../../core/ui/cn.js';
 /**
  * Single wizard step within a `<WizardLayout>`.
  *
@@ -50,6 +51,6 @@ export function WizardStep({ name, className, children }) {
         }
     }, [wizardCtx, name, fields]);
     const stepId = `wizard-step-${name}`;
-    return (_jsx(WizardStepFieldsContext.Provider, { value: fieldsContextValue, children: _jsx("div", { className: className, id: stepId, "data-guidance-wizard-step": name, role: "tabpanel", "aria-labelledby": `wizard-tab-${name}`, children: children }) }));
+    return (_jsx(WizardStepFieldsContext.Provider, { value: fieldsContextValue, children: _jsx("div", { className: cn('flex flex-col gap-field', className), id: stepId, "data-guidance-wizard-step": name, role: "tabpanel", "aria-labelledby": `wizard-tab-${name}`, children: children }) }));
 }
 //# sourceMappingURL=WizardStep.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"WizardStep.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/WizardStep.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAEjG,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAgB/D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAmB;IACvE,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAc,GAAG,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;IAC3C,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpC,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QACtD,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QACtB,SAAS,EAAE,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9B,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QACxD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QACzB,SAAS,EAAE,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9B,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC,EAAE,aAAa,EAAE,eAAe,EAAE,CAAC,EAC1C,CAAC,aAAa,EAAE,eAAe,CAAC,CACjC,CAAC;IAEF;;;OAGG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;YACxC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;YAC7B,MAAM,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACvC,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9B,MAAM,MAAM,GAAG,eAAe,IAAI,EAAE,CAAC;IAErC,OAAO,CACL,KAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB,YACzD,cACE,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,MAAM,+BACiB,IAAI,EAC/B,IAAI,EAAC,UAAU,qBACE,cAAc,IAAI,EAAE,YAEpC,QAAQ,GACL,GAC2B,CACpC,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';\nimport type { WizardStepFieldsContextValue } from './WizardStepFieldsContext';\nimport { WizardStepFieldsContext } from './WizardStepFieldsContext';\nimport { useWizardLayoutContext } from './WizardLayoutContext';\n\nexport interface WizardStepProps {\n  /**\n   * Structural ref — maps to i18n keys for title/description:\n   * - `resources.{type}.wizardSteps.{name}.title`\n   * - `resources.{type}.wizardSteps.{name}.description`\n   *\n   * Must match an entry in `layout.refs.wizardSteps`.\n   */\n  name: string;\n  /** Additional CSS classes for the step container. */\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Single wizard step within a `<WizardLayout>`.\n *\n * Provides a `WizardStepFieldsContext` so child `<FormField>` components\n * auto-register their names. On mount, reports its collected fields to the\n * parent `WizardLayout` via `WizardLayoutContext.registerStep` — this\n * enables per-step validation (the wizard only triggers fields belonging\n * to the active step).\n *\n * Step title is resolved from i18n by `name`. The wizard hides inactive\n * steps with `display: none` so that RHF keeps all fields mounted.\n *\n * @example\n * ```tsx\n * <WizardStep name=\"contact-info\">\n *   <FormField name=\"email\" />\n *   <FormField name=\"phone\" />\n * </WizardStep>\n * ```\n */\nexport function WizardStep({ name, className, children }: WizardStepProps): ReactNode {\n  const [fields] = useState<Set<string>>(() => new Set());\n  const wizardCtx = useWizardLayoutContext();\n  const registeredRef = useRef(false);\n\n  const registerField = useCallback((fieldName: string) => {\n    fields.add(fieldName);\n    wizardCtx?.registerStep(name, fields);\n  }, [fields, name, wizardCtx]);\n\n  const unregisterField = useCallback((fieldName: string) => {\n    fields.delete(fieldName);\n    wizardCtx?.registerStep(name, fields);\n  }, [fields, name, wizardCtx]);\n\n  const fieldsContextValue = useMemo<WizardStepFieldsContextValue>(\n    () => ({ registerField, unregisterField }),\n    [registerField, unregisterField],\n  );\n\n  /**\n   * After initial render, report our field set to the parent WizardLayout.\n   * Registration is by name — WizardLayout resolves the index from children order.\n   */\n  useEffect(() => {\n    if (wizardCtx && !registeredRef.current) {\n      registeredRef.current = true;\n      const frame = requestAnimationFrame(() => {\n        wizardCtx.registerStep(name, fields);\n      });\n      return () => cancelAnimationFrame(frame);\n    }\n  }, [wizardCtx, name, fields]);\n\n  const stepId = `wizard-step-${name}`;\n\n  return (\n    <WizardStepFieldsContext.Provider value={fieldsContextValue}>\n      <div\n        className={className}\n        id={stepId}\n        data-guidance-wizard-step={name}\n        role=\"tabpanel\"\n        aria-labelledby={`wizard-tab-${name}`}\n      >\n        {children}\n      </div>\n    </WizardStepFieldsContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"WizardStep.js","sourceRoot":"","sources":["../../../../../../src/components/resources/skeleton/WizardStep.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAEjG,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AAgBpD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAmB;IACvE,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAc,GAAG,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;IAC3C,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpC,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QACtD,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QACtB,SAAS,EAAE,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9B,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QACxD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QACzB,SAAS,EAAE,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9B,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC,EAAE,aAAa,EAAE,eAAe,EAAE,CAAC,EAC1C,CAAC,aAAa,EAAE,eAAe,CAAC,CACjC,CAAC;IAEF;;;OAGG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;YACxC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;YAC7B,MAAM,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACvC,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9B,MAAM,MAAM,GAAG,eAAe,IAAI,EAAE,CAAC;IAErC,OAAO,CACL,KAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB,YAMzD,cACE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,EACnD,EAAE,EAAE,MAAM,+BACiB,IAAI,EAC/B,IAAI,EAAC,UAAU,qBACE,cAAc,IAAI,EAAE,YAEpC,QAAQ,GACL,GAC2B,CACpC,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';\nimport type { WizardStepFieldsContextValue } from './WizardStepFieldsContext';\nimport { WizardStepFieldsContext } from './WizardStepFieldsContext';\nimport { useWizardLayoutContext } from './WizardLayoutContext';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\n\nexport interface WizardStepProps {\n  /**\n   * Structural ref — maps to i18n keys for title/description:\n   * - `resources.{type}.wizardSteps.{name}.title`\n   * - `resources.{type}.wizardSteps.{name}.description`\n   *\n   * Must match an entry in `layout.refs.wizardSteps`.\n   */\n  name: string;\n  /** Additional CSS classes for the step container. */\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Single wizard step within a `<WizardLayout>`.\n *\n * Provides a `WizardStepFieldsContext` so child `<FormField>` components\n * auto-register their names. On mount, reports its collected fields to the\n * parent `WizardLayout` via `WizardLayoutContext.registerStep` — this\n * enables per-step validation (the wizard only triggers fields belonging\n * to the active step).\n *\n * Step title is resolved from i18n by `name`. The wizard hides inactive\n * steps with `display: none` so that RHF keeps all fields mounted.\n *\n * @example\n * ```tsx\n * <WizardStep name=\"contact-info\">\n *   <FormField name=\"email\" />\n *   <FormField name=\"phone\" />\n * </WizardStep>\n * ```\n */\nexport function WizardStep({ name, className, children }: WizardStepProps): ReactNode {\n  const [fields] = useState<Set<string>>(() => new Set());\n  const wizardCtx = useWizardLayoutContext();\n  const registeredRef = useRef(false);\n\n  const registerField = useCallback((fieldName: string) => {\n    fields.add(fieldName);\n    wizardCtx?.registerStep(name, fields);\n  }, [fields, name, wizardCtx]);\n\n  const unregisterField = useCallback((fieldName: string) => {\n    fields.delete(fieldName);\n    wizardCtx?.registerStep(name, fields);\n  }, [fields, name, wizardCtx]);\n\n  const fieldsContextValue = useMemo<WizardStepFieldsContextValue>(\n    () => ({ registerField, unregisterField }),\n    [registerField, unregisterField],\n  );\n\n  /**\n   * After initial render, report our field set to the parent WizardLayout.\n   * Registration is by name — WizardLayout resolves the index from children order.\n   */\n  useEffect(() => {\n    if (wizardCtx && !registeredRef.current) {\n      registeredRef.current = true;\n      const frame = requestAnimationFrame(() => {\n        wizardCtx.registerStep(name, fields);\n      });\n      return () => cancelAnimationFrame(frame);\n    }\n  }, [wizardCtx, name, fields]);\n\n  const stepId = `wizard-step-${name}`;\n\n  return (\n    <WizardStepFieldsContext.Provider value={fieldsContextValue}>\n      {/*\n        * A column with the field gap: `FormLayout` spaces its DIRECT children, and a wizard's fields are one level\n        * down, inside this step — so they sat flush, a label touching the input above it (measured on Wonder Todos'\n        * announcement dialog, Title over Message).\n        */}\n      <div\n        className={cn('flex flex-col gap-field', className)}\n        id={stepId}\n        data-guidance-wizard-step={name}\n        role=\"tabpanel\"\n        aria-labelledby={`wizard-tab-${name}`}\n      >\n        {children}\n      </div>\n    </WizardStepFieldsContext.Provider>\n  );\n}\n"]}

package/dist/esm/components/resources-fields/_presets/resource-reference/ResourceFieldDisplayPreset_ResourceReference_Default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceFieldDisplayPreset_ResourceReference_Default.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/resources-fields/_presets/resource-reference/ResourceFieldDisplayPreset_ResourceReference_Default.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAqBjF,OAAO,KAAK,EAAE,yDAAyD,EAAE,MAAM,2GAA2G,CAAC;AAuC3L,eAAO,MAAM,oDAAoD,GAAI,gIASlE,yDAAyD,KAAG,KAAK,CAAC,GAAG,CAAC,OA4pBxE,CAAC"}
+{"version":3,"file":"ResourceFieldDisplayPreset_ResourceReference_Default.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/resources-fields/_presets/resource-reference/ResourceFieldDisplayPreset_ResourceReference_Default.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAsBjF,OAAO,KAAK,EAAE,yDAAyD,EAAE,MAAM,2GAA2G,CAAC;AAwD3L,eAAO,MAAM,oDAAoD,GAAI,gIASlE,yDAAyD,KAAG,KAAK,CAAC,GAAG,CAAC,OAyrBxE,CAAC"}

package/dist/esm/components/resources-fields/_presets/resource-reference/ResourceFieldDisplayPreset_ResourceReference_Default.js

@@ -13,11 +13,12 @@ import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react'
 import { Link } from 'react-router-dom';
 import { Skeleton } from '../../../../components/feedback/skeleton.js';
 import { Badge } from '../../../../components/data-display/badge.js';
+import { Text } from '../../../../components/typography/text.js';
 import { useEventBus } from '../../../../core/events/useEventBus.js';
 import { FrontendEvents } from '../../../../core/events/events.frontend.schemas.js';
 import { useResourceRegistry } from '../../../../core/resources/useResourceRegistry.js';
 import { DEFAULT_FOREIGN_KEY_DISPLAY_MODE, ForeignKeyDisplayMode, getForeignKeyParams } from '@wildo-ai/zod-decorators';
-import { FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { FrontendComponentType, TextVariant } from '@wildo-ai/presets-components-models';
 import { useI18n } from '../../../../core/i18n/useI18n.js';
 import { cn } from '../../../../core/ui/cn.js';
 import { FrontendResourceUtils, frontendResourceUtils } from '../../../../core/resources/frontend-resource.utils.js';
@@ -42,6 +43,22 @@ function resolvePrePopulatedRecordIdentifier(params) {
 // =============================================================================
 // COMPONENT IMPLEMENTATION
 // =============================================================================
+/**
+ * A reference's resolved LABEL, set in the body text recipe.
+ *
+ * It was a bare `<span>`, which takes its size from whatever encloses the value: every other display
+ * value is a `Text` (the string formatter's own output), so a reference printed at the page's root
+ * size while the facts around it printed at the body size — measured on the workbench's Build plan
+ * and Roadmap pages, where each linked requirement read a size larger than the text it sat among.
+ * `as="span"` because the label sits inside a link or a button, where a block `<p>` is not allowed.
+ *
+ * `TextVariant.INHERIT` because the COLOUR is the wrapper's: the link or button around the label
+ * carries `text-primary`, and the default variant would paint the label in the foreground colour —
+ * every linkable reference in every application would stop looking like a link.
+ */
+function ReferenceLabel({ label }) {
+    return _jsx(Text, { as: "span", variant: TextVariant.INHERIT, children: label });
+}
 export const ResourceFieldDisplayPreset_ResourceReference_Default = ({ fieldName, value, resourceType: resourceTypeProp, data: prePopulatedData, displayParams, labelFallback, schema, className, }) => {
     const { registry, doOperation } = useResourceRegistry();
     const { emit } = useEventBus();
@@ -57,7 +74,7 @@ export const ResourceFieldDisplayPreset_ResourceReference_Default = ({ fieldName
     const resourceType = resourceTypeProp
         || declaredReferencedType
         || FrontendResourceUtils.resolveResourceTypeForForeignKey(fieldName, schema, registry);
-    const { t, isReady } = useI18n({ component: FrontendComponentType.RESOURCES_FIELDS_RESOURCE_REFERENCE, resource: resourceType });
+    const { t, formatDate, formatDateTime, isReady } = useI18n({ component: FrontendComponentType.RESOURCES_FIELDS_RESOURCE_REFERENCE, resource: resourceType });
     const toUserFacingErrorMessage = useUserFacingErrorMessage();
     // Resolve contextual parameters for scoped FK READ calls.
     // Display path: AutomaticDisplayer already built contextualParameters from contextResourceIdentifiers.
@@ -162,8 +179,10 @@ export const ResourceFieldDisplayPreset_ResourceReference_Default = ({ fieldName
             registry,
             currentObject: prePopulatedData,
             t,
+            formatDate,
+            formatDateTime,
         });
-    }, [prePopulatedData, resourceType, value, registry, t]);
+    }, [prePopulatedData, resourceType, value, registry, t, formatDate, formatDateTime]);
     // ── B1 (P4-03): FK link URL infrastructure ───────────────────────────
     // Memoize route path selection for the referenced resource type when linkable.
     const fkLinkUrlInfo = useMemo(() => {
@@ -311,6 +330,8 @@ export const ResourceFieldDisplayPreset_ResourceReference_Default = ({ fieldName
                 doOperation,
                 contextualParameters: scopedContextualParameters,
                 t,
+                formatDate,
+                formatDateTime,
             });
             trackResolvedFK(id, { id, label, data: fetchedRecord, error: null, isLoading: false });
         }
@@ -319,7 +340,7 @@ export const ResourceFieldDisplayPreset_ResourceReference_Default = ({ fieldName
             // backend's i18n REFERENCE (#1160).
             trackResolvedFK(id, { id, label: null, error: toUserFacingErrorMessage(err), isLoading: false });
         }
-    }, [resourceType, registry, doOperation, trackResolvedFK, t, scopedContextualParameters, fkLinkUrlInfo, toUserFacingErrorMessage]);
+    }, [resourceType, registry, doOperation, trackResolvedFK, t, formatDate, formatDateTime, scopedContextualParameters, fkLinkUrlInfo, toUserFacingErrorMessage]);
     // Resolve all FK values on mount/change — skip API when pre-populated data is available
     useEffect(() => {
         if (!resourceType || values.length === 0)
@@ -495,7 +516,21 @@ export const ResourceFieldDisplayPreset_ResourceReference_Default = ({ fieldName
         // The id is the LAST resort, not the first. A record carrying a readable copy of the reference
         // (`labelFallbackField`) shows that instead — which is what keeps a member directory readable
         // for people who have no profile for a label to be built from.
-        const label = resolved.label || labelFallback || id;
+        /*
+         * Named from the fetched record with the CURRENT `t`, not the label frozen at fetch time (#1851 review). A
+         * record whose name reads another label section (a product named by `billing_products.<key>.name`) could be
+         * fetched before those words arrived, and the stored label then kept its key for the life of the component.
+         * The stored label is used only when there is no stored record (`data`) or the resource declares no label
+         * strategy: such a name cannot change with the words, and the resolver would log its configuration gap on every
+         * render. A strategy that returns an empty name for some record also logs on each render; accepted, since
+         * that is a labelling defect in the strategy and the log names it.
+         */
+        const hasLabelStrategy = !!resourceType
+            && !!registry.resourceConfigurations?.[resourceType]?.frontendConfiguration?.getFrontendResourceLabel;
+        const currentLabel = resolved.data && resourceType && hasLabelStrategy
+            ? FrontendResourceUtils.computeFrontendResourceLabel({ resourceType, registry, currentObject: resolved.data, t, formatDate, formatDateTime })
+            : null;
+        const label = currentLabel || resolved.label || labelFallback || id;
         if (effectiveDisplayMode === ParentDisplay.BADGE) {
             const handleBadgeClick = isLinkable && parentRefConfig?.onNavigateToParent
                 ? () => parentRefConfig.onNavigateToParent(id)
@@ -519,19 +554,25 @@ export const ResourceFieldDisplayPreset_ResourceReference_Default = ({ fieldName
                 const refConfig = registry.resourceConfigurations[resourceType];
                 const summarySchema = refConfig?.mainSchema;
                 if (summarySchema) {
-                    const summaryContent = (_jsx(ResourceSummaryDisplayer, { resourceType: resourceType, schema: summarySchema, data: resolved.data }));
+                    const summaryContent = (_jsx(ResourceSummaryDisplayer, { resourceType: resourceType, schema: summarySchema, data: resolved.data, 
+                        // The referenced record's NAME. The field's own label names the FIELD ("Target todo"),
+                        // never the record, and this card REPLACES the one-line label — so without it nothing on
+                        // screen says which record is referenced. Measured on Wonder Todos: a relationship row
+                        // read "Blocks → Pending –", the blocked todo's badges with no title. The edit picker
+                        // passes its option label for the same reason.
+                        primaryLabel: label }));
                     return isLinkable ? wrapWithLink(id, summaryContent) : summaryContent;
                 }
             }
-            return wrapWithLink(id, _jsx("span", { children: label }));
+            return wrapWithLink(id, _jsx(ReferenceLabel, { label: label }));
         }
         // ForeignKeyDisplayMode.LABEL — resolved label, optionally linkable
         if (effectiveDisplayMode === ForeignKeyDisplayMode.LABEL) {
-            return wrapWithLink(id, _jsx("span", { children: label }));
+            return wrapWithLink(id, _jsx(ReferenceLabel, { label: label }));
         }
         // Fallback — render as label
-        return wrapWithLink(id, _jsx("span", { children: label }));
-    }, [effectiveDisplayMode, resolvedFKs, resourceType, isParentReference, parentRefConfig, wrapWithLink, registry, isLinkable]);
+        return wrapWithLink(id, _jsx(ReferenceLabel, { label: label }));
+    }, [effectiveDisplayMode, resolvedFKs, resourceType, isParentReference, parentRefConfig, wrapWithLink, registry, isLinkable, t, formatDate, formatDateTime, labelFallback]);
     // Handle empty values
     if (values.length === 0) {
         return _jsx("span", { className: "text-muted-foreground", children: "-" });
@@ -542,7 +583,7 @@ export const ResourceFieldDisplayPreset_ResourceReference_Default = ({ fieldName
     // Unknown resource type warning
     if (!resourceType && effectiveDisplayMode !== ForeignKeyDisplayMode.ID) {
         // Fall back to showing IDs with a warning
-        return (_jsx("div", { className: className, title: "Unknown resource type - showing IDs", children: values.length === 1 ? (_jsx("span", { className: "font-mono text-sm", children: values[0] })) : (_jsx("ul", { className: "list-disc ms-4 space-y-item-xs", children: values.map(id => (_jsx("li", { className: "font-mono text-sm", children: id }, id))) })) }));
+        return (_jsx("div", { className: className, title: "Unknown resource type - showing IDs", children: values.length === 1 ? (_jsx("span", { className: "font-mono text-sm", children: values[0] })) : (_jsx("ul", { className: "list-disc ps-4 space-y-item-xs", children: values.map(id => (_jsx("li", { className: "font-mono text-sm", children: id }, id))) })) }));
     }
     // Single value
     if (values.length === 1) {
@@ -550,7 +591,7 @@ export const ResourceFieldDisplayPreset_ResourceReference_Default = ({ fieldName
     }
     // Multiple values - render as list
     /*
-     * `list-outside` (the default) with a margin, NOT `list-inside`.
+     * `list-outside` (the default) with a start PADDING, NOT `list-inside`.
      *
      * `list-inside` puts the marker into the item's INLINE FLOW, where it has to share the first line
      * with the item's content — and the content here is a reference button, which is `inline-block`. An
@@ -561,9 +602,14 @@ export const ResourceFieldDisplayPreset_ResourceReference_Default = ({ fieldName
      * value — the single-value branch above renders no list at all, and a short label happened to fit.
      *
      * Outside markers sit in the margin and take no part in the inline flow, so the content may wrap
-     * freely and the marker stays on the first line. `ms-4` matches the marker inset the array
-     * renderer already uses for its own bulleted lists.
+     * freely and the marker stays on the first line.
+     *
+     * PADDING rather than the `ms-4` margin this used until 2026-09-25, because the list is the value's
+     * ROOT and a vertical field chrome stretches its children to `w-full`: a margin then pushes a
+     * full-width box 1rem past its column, measured on the workbench's Build plan page where every
+     * "Serves functional requirements" link ran to the pane's edge. An outside marker is drawn in the
+     * list's padding box, so `ps-4` keeps the same inset inside the width instead of beyond it.
      */
-    return (_jsx("ul", { className: cn('list-disc ms-4 space-y-item-xs', className), children: values.map(id => (_jsx("li", { children: renderValue(id) }, id))) }));
+    return (_jsx("ul", { className: cn('list-disc ps-4 space-y-item-xs', className), children: values.map(id => (_jsx("li", { children: renderValue(id) }, id))) }));
 };
 //# sourceMappingURL=ResourceFieldDisplayPreset_ResourceReference_Default.js.map