@entifix/react-controls 0.1.0-0

package/dist/ui/organisms/wizard/wizard.js

@@ -0,0 +1,260 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useT } from '../../../i18n/index.js';
+import { Button } from '../../atoms/button/index.js';
+import { Skeleton } from '../../atoms/skeleton/index.js';
+import { Text } from '../../atoms/text/index.js';
+import { Cluster } from '../../layout/cluster/index.js';
+import { Card } from '../../molecules/card/index.js';
+import { Stack } from '../../molecules/stack/index.js';
+import { cn } from '../../utils/cn.js';
+/** How many placeholder steps stand in when the caller has none yet. */ const SKELETON_STEP_COUNT = 4;
+/**
+ * The status catalog keys, written out rather than composed.
+ *
+ * `t(\`wizard.status.${status}\`)` would work and would be untyped — the
+ * augmentation cannot see a template literal, so the only thing left checking
+ * it would be `@r10c/i18n-check`, which does not read `.tsx`. Four literals
+ * cost nothing and stay compile-checked.
+ */ const STATUS_KEY = {
+    pending: 'wizard.status.pending',
+    active: 'wizard.status.active',
+    complete: 'wizard.status.complete',
+    error: 'wizard.status.error'
+};
+const MARKER_CLASS = {
+    pending: 'border-border bg-surface text-content-muted',
+    active: 'border-accent bg-accent text-primary-content',
+    complete: 'border-accent bg-surface text-accent',
+    error: 'border-danger bg-danger-subtle text-danger'
+};
+const LABEL_CLASS = {
+    pending: 'text-content-muted',
+    active: 'font-medium text-content',
+    complete: 'text-content',
+    error: 'font-medium text-danger'
+};
+/**
+ * A guided multi-step flow: the stepper, the active step's body, and the
+ * controls that move between them.
+ *
+ * **Presentational, and controlled from above.** It holds no step state, no
+ * draft and no router — `activeStep` is a prop and `onStepChange` reports a
+ * click, the same rule that made `hrefFor` a prop, so URL synchronisation stays
+ * the shell's job and this control can be told to render step four by a route,
+ * a workspace tab, or a Storybook arg without knowing which
+ * ([ADR 0045](../../../../../../../docs/adr/0045-the-wizard-a-step-graph-and-a-submit-that-hands-off.md)).
+ *
+ * ⚠️ **The stepper is an ordered list, not a tablist.** `TabStrip` is the
+ * nearest-looking thing in this package and is the wrong precedent: a
+ * `role="tablist"` tells assistive technology that the panels are siblings the
+ * user may choose between, and a wizard's steps are ordered and gated. So this
+ * is `<ol>`/`<li>` with `aria-current="step"`, and each step's status is
+ * announced rather than carried by colour alone.
+ */ export function Wizard({ steps, activeStep, title, children, onNext, onFinish, onPrevious, onStepChange, canFinish = false, canAdvance = true, isSubmitting = false, recap, onDismissRecap, isLoading = false, skeleton = true, className }) {
+    const t = useT();
+    const heading = useRef(null);
+    const focused = useRef(activeStep);
+    // Focus moves to the new step's heading, and **only on a change**: doing it on
+    // mount would take focus from whatever opened the wizard, which on a route is
+    // the link the operator just used.
+    useEffect(()=>{
+        var _heading_current;
+        if (focused.current === activeStep) return;
+        focused.current = activeStep;
+        (_heading_current = heading.current) == null ? void 0 : _heading_current.focus();
+    }, [
+        activeStep
+    ]);
+    if (isLoading && skeleton !== false) {
+        return /*#__PURE__*/ _jsx(WizardSkeleton, {
+            stepCount: steps.length > 0 ? steps.length : SKELETON_STEP_COUNT,
+            placeholder: skeleton === true ? undefined : skeleton,
+            className: className
+        });
+    }
+    const position = steps.findIndex((step)=>step.id === activeStep) + 1;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        gap: "m",
+        className: className,
+        children: [
+            /*#__PURE__*/ _jsx(Stepper, {
+                steps: steps,
+                activeStep: activeStep,
+                onStepChange: onStepChange
+            }),
+            recap && /*#__PURE__*/ _jsx(Card, {
+                "data-testid": "wizard-recap",
+                className: "border-l-4 border-l-accent",
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "2xs",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            as: "h3",
+                            step: 0,
+                            weight: "semibold",
+                            children: t('wizard.resume.title')
+                        }),
+                        recap,
+                        onDismissRecap && /*#__PURE__*/ _jsx(Cluster, {
+                            justify: "end",
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "ghost",
+                                size: "sm",
+                                onClick: onDismissRecap,
+                                children: t('wizard.resume.dismiss')
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                gap: "s",
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "3xs",
+                        children: [
+                            /*#__PURE__*/ _jsx("h2", {
+                                ref: heading,
+                                tabIndex: -1,
+                                className: "rounded-sm text-step-1 font-semibold text-content focus-ring outline-none",
+                                children: title
+                            }),
+                            position > 0 && /*#__PURE__*/ _jsx(Text, {
+                                step: -1,
+                                tone: "muted",
+                                children: t('wizard.stepOf', {
+                                    current: position,
+                                    total: steps.length
+                                })
+                            })
+                        ]
+                    }),
+                    children
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Cluster, {
+                justify: "between",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        children: onPrevious && /*#__PURE__*/ _jsx(Button, {
+                            type: "button",
+                            variant: "secondary",
+                            "data-testid": "wizard-previous",
+                            onClick: onPrevious,
+                            disabled: isSubmitting,
+                            children: t('wizard.previous')
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(Button, {
+                        type: "button",
+                        "data-testid": "wizard-next",
+                        onClick: canFinish ? onFinish : onNext,
+                        disabled: isSubmitting || !canAdvance,
+                        children: [
+                            isSubmitting && t('wizard.submitting'),
+                            !isSubmitting && canFinish && t('wizard.finish'),
+                            !isSubmitting && !canFinish && t('wizard.next')
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+function Stepper({ steps, activeStep, onStepChange }) {
+    const t = useT();
+    return /*#__PURE__*/ _jsx("ol", {
+        "aria-label": t('wizard.steps'),
+        className: "flex flex-wrap items-center gap-x-s gap-y-2xs",
+        children: steps.map((step, index)=>/*#__PURE__*/ _jsxs("li", {
+                "aria-current": step.id === activeStep ? 'step' : undefined,
+                className: "flex items-center gap-2xs",
+                children: [
+                    /*#__PURE__*/ _jsx(StepMarker, {
+                        step: step,
+                        index: index,
+                        onStepChange: onStepChange
+                    }),
+                    index < steps.length - 1 && /*#__PURE__*/ _jsx("span", {
+                        "aria-hidden": "true",
+                        className: "h-px w-s shrink-0 bg-border"
+                    })
+                ]
+            }, step.id))
+    });
+}
+/**
+ * One step's dot and label.
+ *
+ * A completed step is a `<button>` and every other step is not, rather than a
+ * disabled button throughout: a disabled control is still announced as a
+ * control, so a pending step would read as something the operator may activate
+ * and cannot, when in truth there is nothing there to activate yet.
+ */ function StepMarker({ step, index, onStepChange }) {
+    const t = useT();
+    const clickable = onStepChange !== undefined && step.status === 'complete';
+    const body = /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": "true",
+                className: cn('size-6 flex shrink-0 items-center justify-center rounded-full border', 'text-step-xs font-medium transition duration-200 ease-smooth', MARKER_CLASS[step.status]),
+                children: index + 1
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: cn('text-step-sm', LABEL_CLASS[step.status]),
+                children: step.label
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "sr-only",
+                children: t(STATUS_KEY[step.status])
+            })
+        ]
+    });
+    if (!clickable) {
+        return /*#__PURE__*/ _jsx("span", {
+            className: "flex items-center gap-3xs",
+            children: body
+        });
+    }
+    return /*#__PURE__*/ _jsx("button", {
+        type: "button",
+        onClick: ()=>onStepChange(step.id),
+        "aria-label": t('wizard.goToStep', {
+            label: step.label
+        }),
+        className: "flex items-center gap-3xs rounded-md p-3xs focus-ring hover:bg-surface-elevated",
+        children: body
+    });
+}
+/**
+ * The wizard's shape while it is in flight.
+ *
+ * Sized from the step count it was handed, so the swap to the real stepper
+ * shifts nothing — the geometry rule every skeleton in this package follows.
+ */ function WizardSkeleton({ stepCount, placeholder, className }) {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        gap: "m",
+        className: className,
+        role: "status",
+        "aria-busy": "true",
+        "data-testid": "wizard-skeleton",
+        children: [
+            /*#__PURE__*/ _jsx(Cluster, {
+                gap: "s",
+                children: Array.from({
+                    length: stepCount
+                }, (_, index)=>/*#__PURE__*/ _jsx(Skeleton, {
+                        shape: "line",
+                        className: "h-6 w-24"
+                    }, index))
+            }),
+            placeholder != null ? placeholder : /*#__PURE__*/ _jsx(Skeleton, {
+                className: "h-40 w-full"
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=wizard.js.map

package/dist/ui/organisms/wizard/wizard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/organisms/wizard/wizard.tsx"],"sourcesContent":["'use client';\n\nimport type { WizardStepStatus } from '@entifix/core';\nimport { type ReactNode, useEffect, useRef } from 'react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { Skeleton } from '../../atoms/skeleton/index.js';\nimport { Text } from '../../atoms/text/index.js';\nimport { Cluster } from '../../layout/cluster/index.js';\nimport { Card } from '../../molecules/card/index.js';\nimport { Stack } from '../../molecules/stack/index.js';\nimport { cn } from '../../utils/cn.js';\nimport type { WizardProps, WizardStepView } from './wizard.types.js';\n\n/** How many placeholder steps stand in when the caller has none yet. */\nconst SKELETON_STEP_COUNT = 4;\n\n/**\n * The status catalog keys, written out rather than composed.\n *\n * `t(\\`wizard.status.${status}\\`)` would work and would be untyped — the\n * augmentation cannot see a template literal, so the only thing left checking\n * it would be `@r10c/i18n-check`, which does not read `.tsx`. Four literals\n * cost nothing and stay compile-checked.\n */\nconst STATUS_KEY = {\n  pending: 'wizard.status.pending',\n  active: 'wizard.status.active',\n  complete: 'wizard.status.complete',\n  error: 'wizard.status.error',\n} as const satisfies Record<WizardStepStatus, string>;\n\nconst MARKER_CLASS: Record<WizardStepStatus, string> = {\n  pending: 'border-border bg-surface text-content-muted',\n  active: 'border-accent bg-accent text-primary-content',\n  complete: 'border-accent bg-surface text-accent',\n  error: 'border-danger bg-danger-subtle text-danger',\n};\n\nconst LABEL_CLASS: Record<WizardStepStatus, string> = {\n  pending: 'text-content-muted',\n  active: 'font-medium text-content',\n  complete: 'text-content',\n  error: 'font-medium text-danger',\n};\n\n/**\n * A guided multi-step flow: the stepper, the active step's body, and the\n * controls that move between them.\n *\n * **Presentational, and controlled from above.** It holds no step state, no\n * draft and no router — `activeStep` is a prop and `onStepChange` reports a\n * click, the same rule that made `hrefFor` a prop, so URL synchronisation stays\n * the shell's job and this control can be told to render step four by a route,\n * a workspace tab, or a Storybook arg without knowing which\n * ([ADR 0045](../../../../../../../docs/adr/0045-the-wizard-a-step-graph-and-a-submit-that-hands-off.md)).\n *\n * ⚠️ **The stepper is an ordered list, not a tablist.** `TabStrip` is the\n * nearest-looking thing in this package and is the wrong precedent: a\n * `role=\"tablist\"` tells assistive technology that the panels are siblings the\n * user may choose between, and a wizard's steps are ordered and gated. So this\n * is `<ol>`/`<li>` with `aria-current=\"step\"`, and each step's status is\n * announced rather than carried by colour alone.\n */\nexport function Wizard({\n  steps,\n  activeStep,\n  title,\n  children,\n  onNext,\n  onFinish,\n  onPrevious,\n  onStepChange,\n  canFinish = false,\n  canAdvance = true,\n  isSubmitting = false,\n  recap,\n  onDismissRecap,\n  isLoading = false,\n  skeleton = true,\n  className,\n}: WizardProps) {\n  const t = useT();\n  const heading = useRef<HTMLHeadingElement>(null);\n  const focused = useRef(activeStep);\n\n  // Focus moves to the new step's heading, and **only on a change**: doing it on\n  // mount would take focus from whatever opened the wizard, which on a route is\n  // the link the operator just used.\n  useEffect(() => {\n    if (focused.current === activeStep) return;\n    focused.current = activeStep;\n    heading.current?.focus();\n  }, [activeStep]);\n\n  if (isLoading && skeleton !== false) {\n    return (\n      <WizardSkeleton\n        stepCount={steps.length > 0 ? steps.length : SKELETON_STEP_COUNT}\n        placeholder={skeleton === true ? undefined : skeleton}\n        className={className}\n      />\n    );\n  }\n\n  const position = steps.findIndex(step => step.id === activeStep) + 1;\n\n  return (\n    <Stack gap=\"m\" className={className}>\n      <Stepper\n        steps={steps}\n        activeStep={activeStep}\n        onStepChange={onStepChange}\n      />\n\n      {recap && (\n        <Card data-testid=\"wizard-recap\" className=\"border-l-4 border-l-accent\">\n          <Stack gap=\"2xs\">\n            <Text as=\"h3\" step={0} weight=\"semibold\">\n              {t('wizard.resume.title')}\n            </Text>\n            {recap}\n            {onDismissRecap && (\n              <Cluster justify=\"end\">\n                <Button variant=\"ghost\" size=\"sm\" onClick={onDismissRecap}>\n                  {t('wizard.resume.dismiss')}\n                </Button>\n              </Cluster>\n            )}\n          </Stack>\n        </Card>\n      )}\n\n      {/* No `Card` around the body: a step brings its own surface — an embedded\n          `EntityForm` is already a card — and nesting one inside another reads\n          as two panels for one step. */}\n      <Stack gap=\"s\">\n        <Stack gap=\"3xs\">\n          {/*\n              A plain heading with a real ref, and `tabIndex={-1}` so script can\n              focus it without putting it in the tab order — the target of the\n              advance above.\n            */}\n          <h2\n            ref={heading}\n            tabIndex={-1}\n            className=\"rounded-sm text-step-1 font-semibold text-content focus-ring outline-none\"\n          >\n            {title}\n          </h2>\n          {position > 0 && (\n            <Text step={-1} tone=\"muted\">\n              {t('wizard.stepOf', {\n                current: position,\n                total: steps.length,\n              })}\n            </Text>\n          )}\n        </Stack>\n\n        {children}\n      </Stack>\n\n      <Cluster justify=\"between\">\n        <div>\n          {onPrevious && (\n            <Button\n              type=\"button\"\n              variant=\"secondary\"\n              data-testid=\"wizard-previous\"\n              onClick={onPrevious}\n              disabled={isSubmitting}\n            >\n              {t('wizard.previous')}\n            </Button>\n          )}\n        </div>\n        {/* Named for the tests and the e2e, because a step may bring controls\n            of its own — a table step's pager sits in the same view. */}\n        <Button\n          type=\"button\"\n          data-testid=\"wizard-next\"\n          onClick={canFinish ? onFinish : onNext}\n          disabled={isSubmitting || !canAdvance}\n        >\n          {isSubmitting && t('wizard.submitting')}\n          {!isSubmitting && canFinish && t('wizard.finish')}\n          {!isSubmitting && !canFinish && t('wizard.next')}\n        </Button>\n      </Cluster>\n    </Stack>\n  );\n}\n\ninterface StepperProps {\n  steps: readonly WizardStepView[];\n  activeStep: string;\n  onStepChange?: (stepId: string) => void;\n}\n\nfunction Stepper({ steps, activeStep, onStepChange }: StepperProps) {\n  const t = useT();\n\n  return (\n    <ol\n      aria-label={t('wizard.steps')}\n      className=\"flex flex-wrap items-center gap-x-s gap-y-2xs\"\n    >\n      {steps.map((step, index) => (\n        <li\n          key={step.id}\n          aria-current={step.id === activeStep ? 'step' : undefined}\n          className=\"flex items-center gap-2xs\"\n        >\n          <StepMarker step={step} index={index} onStepChange={onStepChange} />\n          {index < steps.length - 1 && (\n            <span aria-hidden=\"true\" className=\"h-px w-s shrink-0 bg-border\" />\n          )}\n        </li>\n      ))}\n    </ol>\n  );\n}\n\ninterface StepMarkerProps {\n  step: WizardStepView;\n  index: number;\n  onStepChange?: (stepId: string) => void;\n}\n\n/**\n * One step's dot and label.\n *\n * A completed step is a `<button>` and every other step is not, rather than a\n * disabled button throughout: a disabled control is still announced as a\n * control, so a pending step would read as something the operator may activate\n * and cannot, when in truth there is nothing there to activate yet.\n */\nfunction StepMarker({ step, index, onStepChange }: StepMarkerProps) {\n  const t = useT();\n  const clickable = onStepChange !== undefined && step.status === 'complete';\n\n  const body = (\n    <>\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'size-6 flex shrink-0 items-center justify-center rounded-full border',\n          'text-step-xs font-medium transition duration-200 ease-smooth',\n          MARKER_CLASS[step.status],\n        )}\n      >\n        {index + 1}\n      </span>\n      <span className={cn('text-step-sm', LABEL_CLASS[step.status])}>\n        {step.label}\n      </span>\n      {/*\n        Status is announced as well as coloured. A screen reader walks this list\n        without seeing the ring, and \"completed\" is the whole point of a stepper.\n      */}\n      <span className=\"sr-only\">{t(STATUS_KEY[step.status])}</span>\n    </>\n  );\n\n  if (!clickable) {\n    return <span className=\"flex items-center gap-3xs\">{body}</span>;\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onStepChange(step.id)}\n      aria-label={t('wizard.goToStep', { label: step.label })}\n      className=\"flex items-center gap-3xs rounded-md p-3xs focus-ring hover:bg-surface-elevated\"\n    >\n      {body}\n    </button>\n  );\n}\n\ninterface WizardSkeletonProps {\n  stepCount: number;\n  placeholder?: ReactNode;\n  className?: string;\n}\n\n/**\n * The wizard's shape while it is in flight.\n *\n * Sized from the step count it was handed, so the swap to the real stepper\n * shifts nothing — the geometry rule every skeleton in this package follows.\n */\nfunction WizardSkeleton({\n  stepCount,\n  placeholder,\n  className,\n}: WizardSkeletonProps) {\n  return (\n    <Stack\n      gap=\"m\"\n      className={className}\n      role=\"status\"\n      aria-busy=\"true\"\n      data-testid=\"wizard-skeleton\"\n    >\n      <Cluster gap=\"s\">\n        {Array.from({ length: stepCount }, (_, index) => (\n          <Skeleton key={index} shape=\"line\" className=\"h-6 w-24\" />\n        ))}\n      </Cluster>\n      {placeholder ?? <Skeleton className=\"h-40 w-full\" />}\n    </Stack>\n  );\n}\n"],"names":["useEffect","useRef","useT","Button","Skeleton","Text","Cluster","Card","Stack","cn","SKELETON_STEP_COUNT","STATUS_KEY","pending","active","complete","error","MARKER_CLASS","LABEL_CLASS","Wizard","steps","activeStep","title","children","onNext","onFinish","onPrevious","onStepChange","canFinish","canAdvance","isSubmitting","recap","onDismissRecap","isLoading","skeleton","className","t","heading","focused","current","focus","WizardSkeleton","stepCount","length","placeholder","undefined","position","findIndex","step","id","gap","Stepper","data-testid","as","weight","justify","variant","size","onClick","h2","ref","tabIndex","tone","total","div","type","disabled","ol","aria-label","map","index","li","aria-current","StepMarker","span","aria-hidden","clickable","status","body","label","button","role","aria-busy","Array","from","_","shape"],"mappings":"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"}

package/dist/ui/organisms/wizard/wizard.types.d.ts

@@ -0,0 +1,83 @@
+import type { WizardStepStatus } from '@entifix/core';
+import type { ReactNode } from 'react';
+/**
+ * One step as the stepper shows it.
+ *
+ * `label` is **already-resolved copy**, not a catalog key, which is the rule
+ * `ConfirmDialog`'s `title`/`message` already follow: a step's name belongs to
+ * the domain that declared the wizard, so its copy is `shell:`-namespaced and
+ * this package cannot type-check the key.
+ */
+export interface WizardStepView {
+    readonly id: string;
+    readonly label: string;
+    readonly status: WizardStepStatus;
+}
+export interface WizardProps {
+    /**
+     * The steps on the path this flow is taking, in order — the projection
+     * `stepStatuses` returns, not the definition's whole step list.
+     *
+     * A graph's declared steps include branches not taken, so rendering all of
+     * them promises an operator who chose to start blank a step they will never
+     * see.
+     */
+    steps: readonly WizardStepView[];
+    /** Which step's body `children` is. Controlled; the shell owns the URL. */
+    activeStep: string;
+    /**
+     * The active step's heading.
+     *
+     * It is also the **focus target on advance**: moving focus to the top of the
+     * new step is what makes a keyboard or screen-reader user land somewhere
+     * meaningful instead of wherever the previous step's Next button was.
+     */
+    title: string;
+    /** The active step's body. */
+    children: ReactNode;
+    onNext: () => void;
+    onFinish: () => void;
+    /** Absent at the entry step, where there is nowhere to go back to. */
+    onPrevious?: () => void;
+    /**
+     * A completed step was clicked. Omit and the stepper is read-only.
+     *
+     * Only `complete` steps are clickable; a `pending` one would skip the per-step
+     * submit that validates everything in between.
+     */
+    onStepChange?: (stepId: string) => void;
+    /** The active step ends the flow, so the primary button reads Finalizar. */
+    canFinish?: boolean;
+    /** Advancing is blocked — a required answer is missing on this step. */
+    canAdvance?: boolean;
+    /**
+     * The submit is in flight.
+     *
+     * It stays in flight: `onFinish` hands off and returns before the write is
+     * terminal ([ADR 0043](../../../../../../../docs/adr/0043-the-optimistic-mutation-contract.md)),
+     * so what this disables is a second submit — it is not a spinner waiting for
+     * a resolution the caller never gets.
+     */
+    isSubmitting?: boolean;
+    /**
+     * What was already decided, shown when a half-finished wizard is resumed.
+     *
+     * Persistence gives "continue" for free; what it does not give is remembering
+     * what you had answered, which is the known failure of a long flow restored
+     * mid-way ([#111](https://github.com/r10c-technologies/r10c/issues/111)).
+     */
+    recap?: ReactNode;
+    /** Dismiss the recap. Omit and it has no dismiss control. */
+    onDismissRecap?: () => void;
+    isLoading?: boolean;
+    /**
+     * What holds the wizard's shape while it is in flight.
+     *
+     * `true` (the default) renders the built-in placeholder, sized from the step
+     * count it was given so the swap to the real stepper shifts nothing. A node
+     * replaces that default; `false` renders no placeholder at all.
+     */
+    skeleton?: boolean | ReactNode;
+    className?: string;
+}
+//# sourceMappingURL=wizard.types.d.ts.map

package/dist/ui/organisms/wizard/wizard.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.types.d.ts","sourceRoot":"","sources":["../../../../src/ui/organisms/wizard/wizard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;GAOG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;CACnC;AAED,MAAM,WAAW,WAAW;IAC1B;;;;;;;OAOG;IACH,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IAEjC,2EAA2E;IAC3E,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,8BAA8B;IAC9B,QAAQ,EAAE,SAAS,CAAC;IAEpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAE/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/ui/organisms/wizard/wizard.types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=wizard.types.js.map

package/dist/ui/organisms/wizard/wizard.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/organisms/wizard/wizard.types.ts"],"sourcesContent":["import type { WizardStepStatus } from '@entifix/core';\nimport type { ReactNode } from 'react';\n\n/**\n * One step as the stepper shows it.\n *\n * `label` is **already-resolved copy**, not a catalog key, which is the rule\n * `ConfirmDialog`'s `title`/`message` already follow: a step's name belongs to\n * the domain that declared the wizard, so its copy is `shell:`-namespaced and\n * this package cannot type-check the key.\n */\nexport interface WizardStepView {\n  readonly id: string;\n  readonly label: string;\n  readonly status: WizardStepStatus;\n}\n\nexport interface WizardProps {\n  /**\n   * The steps on the path this flow is taking, in order — the projection\n   * `stepStatuses` returns, not the definition's whole step list.\n   *\n   * A graph's declared steps include branches not taken, so rendering all of\n   * them promises an operator who chose to start blank a step they will never\n   * see.\n   */\n  steps: readonly WizardStepView[];\n\n  /** Which step's body `children` is. Controlled; the shell owns the URL. */\n  activeStep: string;\n\n  /**\n   * The active step's heading.\n   *\n   * It is also the **focus target on advance**: moving focus to the top of the\n   * new step is what makes a keyboard or screen-reader user land somewhere\n   * meaningful instead of wherever the previous step's Next button was.\n   */\n  title: string;\n\n  /** The active step's body. */\n  children: ReactNode;\n\n  onNext: () => void;\n  onFinish: () => void;\n  /** Absent at the entry step, where there is nowhere to go back to. */\n  onPrevious?: () => void;\n  /**\n   * A completed step was clicked. Omit and the stepper is read-only.\n   *\n   * Only `complete` steps are clickable; a `pending` one would skip the per-step\n   * submit that validates everything in between.\n   */\n  onStepChange?: (stepId: string) => void;\n\n  /** The active step ends the flow, so the primary button reads Finalizar. */\n  canFinish?: boolean;\n  /** Advancing is blocked — a required answer is missing on this step. */\n  canAdvance?: boolean;\n\n  /**\n   * The submit is in flight.\n   *\n   * It stays in flight: `onFinish` hands off and returns before the write is\n   * terminal ([ADR 0043](../../../../../../../docs/adr/0043-the-optimistic-mutation-contract.md)),\n   * so what this disables is a second submit — it is not a spinner waiting for\n   * a resolution the caller never gets.\n   */\n  isSubmitting?: boolean;\n\n  /**\n   * What was already decided, shown when a half-finished wizard is resumed.\n   *\n   * Persistence gives \"continue\" for free; what it does not give is remembering\n   * what you had answered, which is the known failure of a long flow restored\n   * mid-way ([#111](https://github.com/r10c-technologies/r10c/issues/111)).\n   */\n  recap?: ReactNode;\n  /** Dismiss the recap. Omit and it has no dismiss control. */\n  onDismissRecap?: () => void;\n\n  isLoading?: boolean;\n  /**\n   * What holds the wizard's shape while it is in flight.\n   *\n   * `true` (the default) renders the built-in placeholder, sized from the step\n   * count it was given so the swap to the real stepper shifts nothing. A node\n   * replaces that default; `false` renders no placeholder at all.\n   */\n  skeleton?: boolean | ReactNode;\n\n  className?: string;\n}\n"],"names":[],"mappings":"AAiBA,WA2EC"}

package/dist/ui/utils/cn.d.ts

@@ -0,0 +1,4 @@
+/** Tiny class-name joiner. Filters falsy values; no external dependency. */
+export type ClassValue = string | false | null | undefined;
+export declare function cn(...values: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/ui/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../../src/ui/utils/cn.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;AAE3D,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}

package/dist/ui/utils/cn.js

@@ -0,0 +1,5 @@
+/** Tiny class-name joiner. Filters falsy values; no external dependency. */ export function cn(...values) {
+    return values.filter(Boolean).join(' ');
+}
+
+//# sourceMappingURL=cn.js.map

package/dist/ui/utils/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/utils/cn.ts"],"sourcesContent":["/** Tiny class-name joiner. Filters falsy values; no external dependency. */\nexport type ClassValue = string | false | null | undefined;\n\nexport function cn(...values: ClassValue[]): string {\n  return values.filter(Boolean).join(' ');\n}\n"],"names":["cn","values","filter","Boolean","join"],"mappings":"AAAA,0EAA0E,GAG1E,OAAO,SAASA,GAAG,GAAGC,MAAoB;IACxC,OAAOA,OAAOC,MAAM,CAACC,SAASC,IAAI,CAAC;AACrC"}

package/dist/ui/utils/use-hotkey.d.ts

@@ -0,0 +1,31 @@
+/** One chord, described the way a person would say it. */
+export interface Hotkey {
+    /** The `KeyboardEvent.key`, compared case-insensitively. */
+    readonly key: string;
+    /** ⌘ on a Mac, Ctrl elsewhere. Either satisfies it. */
+    readonly mod?: boolean;
+    readonly shift?: boolean;
+}
+/**
+ * Fire `handler` when any of `hotkeys` is pressed, anywhere on the page.
+ *
+ * The repo's first global shortcut, so two things are decided here rather than
+ * at each future call site.
+ *
+ * **It skips while focus is in an editable element**, because a page-wide
+ * listener that does not would eat the chord a person meant for the field they
+ * are typing in. The palette's own input is exempt in practice: the palette
+ * unmounts its trigger's listener behaviour by simply not being open.
+ *
+ * **It calls `preventDefault`**, which is what stops the browser acting on a
+ * chord it also claims. ⚠️ That is not guaranteed to work: Chrome, Safari and
+ * Edge dispatch these to the page and honour it, Firefox reserves some chords
+ * and ignores `defaultPrevented` for them. So no single binding may be
+ * load-bearing — bind more than one, and always leave a visible control that
+ * does the same thing.
+ *
+ * `handler` is held in a ref so a caller may pass an inline closure without
+ * re-subscribing the listener on every render.
+ */
+export declare function useHotkey(hotkeys: readonly Hotkey[], handler: (event: KeyboardEvent) => void): void;
+//# sourceMappingURL=use-hotkey.d.ts.map

package/dist/ui/utils/use-hotkey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hotkey.d.ts","sourceRoot":"","sources":["../../../src/ui/utils/use-hotkey.ts"],"names":[],"mappings":"AAIA,0DAA0D;AAC1D,MAAM,WAAW,MAAM;IACrB,4DAA4D;IAC5D,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;CAC1B;AA2BD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,SAAS,CACvB,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,OAAO,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GACtC,IAAI,CAwBN"}

package/dist/ui/utils/use-hotkey.js

@@ -0,0 +1,69 @@
+'use client';
+import { useEffect, useRef } from 'react';
+const isEditable = (target)=>{
+    if (!(target instanceof HTMLElement)) return false;
+    const tag = target.tagName;
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
+    // `closest`, not `isContentEditable`: the property is true for a *descendant*
+    // of an editable host but is not implemented in jsdom, so the branch that
+    // matters most for a rich editor would be the one no test could reach. The
+    // selector covers the host and everything inside it, and the `:not` arm is
+    // what keeps `contenteditable="false"` — the way a widget opts a subtree back
+    // out — from reading as editable.
+    return target.closest('[contenteditable]:not([contenteditable="false"])') !== null;
+};
+const matches = (event, hotkey)=>{
+    var _hotkey_mod, _hotkey_shift;
+    if (event.key.toLowerCase() !== hotkey.key.toLowerCase()) return false;
+    // ⌘ and Ctrl are the same intent on different platforms, so either satisfies
+    // `mod` rather than the hook asking the caller to sniff the platform. Nothing
+    // in the fleet binds a chord that means one thing with ⌘ and another with Ctrl.
+    const mod = event.metaKey || event.ctrlKey;
+    if (((_hotkey_mod = hotkey.mod) != null ? _hotkey_mod : false) !== mod) return false;
+    return ((_hotkey_shift = hotkey.shift) != null ? _hotkey_shift : false) === event.shiftKey;
+};
+/**
+ * Fire `handler` when any of `hotkeys` is pressed, anywhere on the page.
+ *
+ * The repo's first global shortcut, so two things are decided here rather than
+ * at each future call site.
+ *
+ * **It skips while focus is in an editable element**, because a page-wide
+ * listener that does not would eat the chord a person meant for the field they
+ * are typing in. The palette's own input is exempt in practice: the palette
+ * unmounts its trigger's listener behaviour by simply not being open.
+ *
+ * **It calls `preventDefault`**, which is what stops the browser acting on a
+ * chord it also claims. ⚠️ That is not guaranteed to work: Chrome, Safari and
+ * Edge dispatch these to the page and honour it, Firefox reserves some chords
+ * and ignores `defaultPrevented` for them. So no single binding may be
+ * load-bearing — bind more than one, and always leave a visible control that
+ * does the same thing.
+ *
+ * `handler` is held in a ref so a caller may pass an inline closure without
+ * re-subscribing the listener on every render.
+ */ export function useHotkey(hotkeys, handler) {
+    const handlerRef = useRef(handler);
+    useEffect(()=>{
+        handlerRef.current = handler;
+    });
+    // Serialized rather than passed by identity: callers build the array inline,
+    // so the array itself is a new object every render and would re-subscribe the
+    // listener on each one.
+    const signature = JSON.stringify(hotkeys);
+    useEffect(()=>{
+        const bindings = JSON.parse(signature);
+        const onKeyDown = (event)=>{
+            if (isEditable(event.target)) return;
+            if (!bindings.some((hotkey)=>matches(event, hotkey))) return;
+            event.preventDefault();
+            handlerRef.current(event);
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return ()=>document.removeEventListener('keydown', onKeyDown);
+    }, [
+        signature
+    ]);
+}
+
+//# sourceMappingURL=use-hotkey.js.map

package/dist/ui/utils/use-hotkey.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/utils/use-hotkey.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\n\n/** One chord, described the way a person would say it. */\nexport interface Hotkey {\n  /** The `KeyboardEvent.key`, compared case-insensitively. */\n  readonly key: string;\n  /** ⌘ on a Mac, Ctrl elsewhere. Either satisfies it. */\n  readonly mod?: boolean;\n  readonly shift?: boolean;\n}\n\nconst isEditable = (target: EventTarget | null): boolean => {\n  if (!(target instanceof HTMLElement)) return false;\n  const tag = target.tagName;\n  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;\n  // `closest`, not `isContentEditable`: the property is true for a *descendant*\n  // of an editable host but is not implemented in jsdom, so the branch that\n  // matters most for a rich editor would be the one no test could reach. The\n  // selector covers the host and everything inside it, and the `:not` arm is\n  // what keeps `contenteditable=\"false\"` — the way a widget opts a subtree back\n  // out — from reading as editable.\n  return (\n    target.closest('[contenteditable]:not([contenteditable=\"false\"])') !== null\n  );\n};\n\nconst matches = (event: KeyboardEvent, hotkey: Hotkey): boolean => {\n  if (event.key.toLowerCase() !== hotkey.key.toLowerCase()) return false;\n  // ⌘ and Ctrl are the same intent on different platforms, so either satisfies\n  // `mod` rather than the hook asking the caller to sniff the platform. Nothing\n  // in the fleet binds a chord that means one thing with ⌘ and another with Ctrl.\n  const mod = event.metaKey || event.ctrlKey;\n  if ((hotkey.mod ?? false) !== mod) return false;\n  return (hotkey.shift ?? false) === event.shiftKey;\n};\n\n/**\n * Fire `handler` when any of `hotkeys` is pressed, anywhere on the page.\n *\n * The repo's first global shortcut, so two things are decided here rather than\n * at each future call site.\n *\n * **It skips while focus is in an editable element**, because a page-wide\n * listener that does not would eat the chord a person meant for the field they\n * are typing in. The palette's own input is exempt in practice: the palette\n * unmounts its trigger's listener behaviour by simply not being open.\n *\n * **It calls `preventDefault`**, which is what stops the browser acting on a\n * chord it also claims. ⚠️ That is not guaranteed to work: Chrome, Safari and\n * Edge dispatch these to the page and honour it, Firefox reserves some chords\n * and ignores `defaultPrevented` for them. So no single binding may be\n * load-bearing — bind more than one, and always leave a visible control that\n * does the same thing.\n *\n * `handler` is held in a ref so a caller may pass an inline closure without\n * re-subscribing the listener on every render.\n */\nexport function useHotkey(\n  hotkeys: readonly Hotkey[],\n  handler: (event: KeyboardEvent) => void,\n): void {\n  const handlerRef = useRef(handler);\n  useEffect(() => {\n    handlerRef.current = handler;\n  });\n\n  // Serialized rather than passed by identity: callers build the array inline,\n  // so the array itself is a new object every render and would re-subscribe the\n  // listener on each one.\n  const signature = JSON.stringify(hotkeys);\n\n  useEffect(() => {\n    const bindings = JSON.parse(signature) as Hotkey[];\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (isEditable(event.target)) return;\n      if (!bindings.some(hotkey => matches(event, hotkey))) return;\n      event.preventDefault();\n      handlerRef.current(event);\n    };\n\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [signature]);\n}\n"],"names":["useEffect","useRef","isEditable","target","HTMLElement","tag","tagName","closest","matches","event","hotkey","key","toLowerCase","mod","metaKey","ctrlKey","shift","shiftKey","useHotkey","hotkeys","handler","handlerRef","current","signature","JSON","stringify","bindings","parse","onKeyDown","some","preventDefault","document","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAW1C,MAAMC,aAAa,CAACC;IAClB,IAAI,CAAEA,CAAAA,kBAAkBC,WAAU,GAAI,OAAO;IAC7C,MAAMC,MAAMF,OAAOG,OAAO;IAC1B,IAAID,QAAQ,WAAWA,QAAQ,cAAcA,QAAQ,UAAU,OAAO;IACtE,8EAA8E;IAC9E,0EAA0E;IAC1E,2EAA2E;IAC3E,2EAA2E;IAC3E,8EAA8E;IAC9E,kCAAkC;IAClC,OACEF,OAAOI,OAAO,CAAC,wDAAwD;AAE3E;AAEA,MAAMC,UAAU,CAACC,OAAsBC;QAMhCA,aACGA;IANR,IAAID,MAAME,GAAG,CAACC,WAAW,OAAOF,OAAOC,GAAG,CAACC,WAAW,IAAI,OAAO;IACjE,6EAA6E;IAC7E,8EAA8E;IAC9E,gFAAgF;IAChF,MAAMC,MAAMJ,MAAMK,OAAO,IAAIL,MAAMM,OAAO;IAC1C,IAAI,EAACL,cAAAA,OAAOG,GAAG,YAAVH,cAAc,WAAWG,KAAK,OAAO;IAC1C,OAAO,EAACH,gBAAAA,OAAOM,KAAK,YAAZN,gBAAgB,WAAWD,MAAMQ,QAAQ;AACnD;AAEA;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,SAASC,UACdC,OAA0B,EAC1BC,OAAuC;IAEvC,MAAMC,aAAapB,OAAOmB;IAC1BpB,UAAU;QACRqB,WAAWC,OAAO,GAAGF;IACvB;IAEA,6EAA6E;IAC7E,8EAA8E;IAC9E,wBAAwB;IACxB,MAAMG,YAAYC,KAAKC,SAAS,CAACN;IAEjCnB,UAAU;QACR,MAAM0B,WAAWF,KAAKG,KAAK,CAACJ;QAE5B,MAAMK,YAAY,CAACnB;YACjB,IAAIP,WAAWO,MAAMN,MAAM,GAAG;YAC9B,IAAI,CAACuB,SAASG,IAAI,CAACnB,CAAAA,SAAUF,QAAQC,OAAOC,UAAU;YACtDD,MAAMqB,cAAc;YACpBT,WAAWC,OAAO,CAACb;QACrB;QAEAsB,SAASC,gBAAgB,CAAC,WAAWJ;QACrC,OAAO,IAAMG,SAASE,mBAAmB,CAAC,WAAWL;IACvD,GAAG;QAACL;KAAU;AAChB"}