@wildo-ai/presets-components 1.1.4 → 1.1.6

package/dist/esm/components/sections/content-section.js

@@ -3,6 +3,27 @@ import * as React from "react";
 import { cn, useUI, useIconRegistry, StandardIconReference, IconSize, Surface, Heading, Text, Collapsible, CollapsibleTrigger, CollapsibleContent, } from '@wildo-ai/saas-frontend-lib';
 import { SectionMode } from "@wildo-ai/zod-decorators";
 import { SurfaceVariant, UIBehavior, TextVariant, TextSize } from "@wildo-ai/presets-components-models";
+/**
+ * Every section branch that renders a native `<fieldset>` carries this.
+ *
+ * The browser's UA stylesheet gives `fieldset` `min-width: min-content` — the
+ * ONE element with that default — so a fieldset refuses to shrink below the
+ * widest thing inside it, whatever its container says. A flex/grid child's
+ * `min-width: auto` has the same effect, and `min-w-0` answers both.
+ *
+ * Measured 2026-09-22 on the Wonder Todos todo READ overlay: the dialog is
+ * `width: 672px; max-width: 672px; overflow-x: auto`, and the fieldset inside it
+ * measured **747px** — its `md:grid-cols-2 xl:grid-cols-3` body reported a
+ * min-content width larger than the dialog, so the dialog scrolled sideways and
+ * the overlay's right edge (its actions) was clipped out of reach. Everything
+ * between the two inherited the 747.
+ *
+ * Do not "simplify" this away: nothing else in the chain resets it, and the
+ * symptom only appears once a section's content is wider than its container —
+ * a dialog, a narrow panel, a small viewport — never in the page-width case a
+ * component is usually authored against.
+ */
+const FIELDSET_SHRINK_RESET = 'min-w-0';
 /**
  * ContentSectionLegend preset — section heading. DOM-identical to the legacy
  * FieldLegend preset (`data-slot="field-legend"` + classes) so existing CSS and
@@ -72,14 +93,23 @@ function ContentSection({ className, appearance = SectionMode.DEFAULT, legend, d
     // compile on hot-reload (only on a full restart / production build). To stay
     // reliable on every reload we instead detect the settings-row children at
     // runtime and toggle between ALREADY-EMITTED utilities (`p-0`/`p-card`). The
-    // effect runs each commit with a change-guard (no re-render loop); `bodyRef`
-    // is null for the non-CARD branches, so this is inert there.
+    // effect runs each commit but sets state only when the detection CHANGES,
+    // compared against the rendered value; `bodyRef` is null for the non-CARD
+    // branches, so this is inert there.
+    //
+    // Do not turn the guard back into a functional updater. `setState(prev => …)`
+    // still enqueues an update on every commit whenever React cannot bail out
+    // eagerly, which made every section — including the form-wide DEFAULT one —
+    // a participant in any other component's update loop and the component React
+    // blamed for it ("Maximum update depth exceeded" at ContentSection when an
+    // avatar crop was applied, 2026-09-15; the loop was in the file field).
     const cardBodyRef = React.useRef(null);
     const [cardBodyIsSettingsList, setCardBodyIsSettingsList] = React.useState(false);
     React.useLayoutEffect(() => {
         const el = cardBodyRef.current;
         const next = !!el && !!el.querySelector(':scope > [data-chrome-mode="settings_row"]');
-        setCardBodyIsSettingsList((prev) => (prev === next ? prev : next));
+        if (next !== cardBodyIsSettingsList)
+            setCardBodyIsSettingsList(next);
     });
     // Explicit CARD sections — solo AND container-panel `card-each` — ALWAYS paint
     // their themed card chrome (elevated fill + border). The `when-orphan` frame
@@ -116,7 +146,7 @@ function ContentSection({ className, appearance = SectionMode.DEFAULT, legend, d
                 // (a bordered card panel in every theme) on the element itself — the
                 // wrapper is kept for the policy context only. See the solo DEFAULT
                 // branch below for the full account of this trap.
-                className: cn(isCardEach ? cardRecipe.base : 'space-y-field rounded-none border-0 bg-transparent p-0 shadow-none', className), ...props, style: isCardEach
+                className: cn(FIELDSET_SHRINK_RESET, isCardEach ? cardRecipe.base : 'space-y-field rounded-none border-0 bg-transparent p-0 shadow-none', className), ...props, style: isCardEach
                     ? props.style
                     : { borderWidth: 0, background: 'transparent', boxShadow: 'none', borderRadius: 0, padding: 0, ...props.style }, children: [hasHeading && (_jsxs("div", { className: isCardEach ? 'p-card border-b' : 'space-y-item-xs', children: [(legend != null || icon != null) && (_jsxs(Heading, { level: headingLevel, className: "text-base font-semibold", children: [icon != null && _jsx("span", { className: "me-element inline-flex items-center", children: icon }), legend] })), description != null && _jsx(Text, { variant: TextVariant.MUTED, size: TextSize.SM, children: description })] })), _jsx("div", { className: isCardEach ? 'p-card' : undefined, children: children })] }) }));
     }
@@ -162,7 +192,7 @@ function ContentSection({ className, appearance = SectionMode.DEFAULT, legend, d
     // beat `shadow-none`), while an inline declaration always wins; caller-passed
     // style still overrides via the trailing spread.
     if (!isCard) {
-        return (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.BASE, policyOverride: { nesting: { framingMode: 'never' } }, children: _jsxs("fieldset", { "data-slot": "field-set", "data-appearance": appearance, "data-section-frame": "suppressed", disabled: disabled, className: cn(baseStyles, 'rounded-none border-0 bg-transparent p-0 shadow-none', className), ...props, style: { borderWidth: 0, background: 'transparent', boxShadow: 'none', borderRadius: 0, padding: 0, ...props.style }, children: [structuredLegend, structuredDescription, children] }) }));
+        return (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.BASE, policyOverride: { nesting: { framingMode: 'never' } }, children: _jsxs("fieldset", { "data-slot": "field-set", "data-appearance": appearance, "data-section-frame": "suppressed", disabled: disabled, className: cn(FIELDSET_SHRINK_RESET, baseStyles, 'rounded-none border-0 bg-transparent p-0 shadow-none', className), ...props, style: { borderWidth: 0, background: 'transparent', boxShadow: 'none', borderRadius: 0, padding: 0, ...props.style }, children: [structuredLegend, structuredDescription, children] }) }));
     }
     // CARD — the section title + description sit ABOVE the card as a group heading
     // (the macOS/iOS/Linear "settings group" pattern), and the themed card chrome
@@ -183,7 +213,7 @@ function ContentSection({ className, appearance = SectionMode.DEFAULT, legend, d
     // `p-card`.
     const headingId = `${reactId}-legend`;
     const hasHeading = legend != null && legend !== false;
-    return (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.CARD, policyOverride: { nesting: { framingMode: 'always' } }, children: _jsxs("fieldset", { "data-slot": "field-set", "data-appearance": appearance, "data-section-frame": "rendered", disabled: disabled, "aria-labelledby": hasHeading ? headingId : undefined, className: cn("flex flex-col gap-field-sm border-0 bg-transparent p-0", className), ...props, children: [hasHeading && (_jsxs("div", { className: "space-y-item-xs", children: [_jsx(Heading, { level: 3, id: headingId, "data-slot": "field-legend", "data-variant": "legend", className: "text-base font-medium leading-tight", children: legend }), structuredDescription] })), _jsx("div", { ref: cardBodyRef, "data-slot": "section-card-body", "data-settings-list": cardBodyIsSettingsList || undefined, className: cn(cardRecipe.base, "flex flex-col", 
+    return (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.CARD, policyOverride: { nesting: { framingMode: 'always' } }, children: _jsxs("fieldset", { "data-slot": "field-set", "data-appearance": appearance, "data-section-frame": "rendered", disabled: disabled, "aria-labelledby": hasHeading ? headingId : undefined, className: cn(FIELDSET_SHRINK_RESET, "flex flex-col gap-field-sm border-0 bg-transparent p-0", className), ...props, children: [hasHeading && (_jsxs("div", { className: "space-y-item-xs", children: [_jsx(Heading, { level: 3, id: headingId, "data-slot": "field-legend", "data-variant": "legend", className: "text-base font-medium leading-tight", children: legend }), structuredDescription] })), _jsx("div", { ref: cardBodyRef, "data-slot": "section-card-body", "data-settings-list": cardBodyIsSettingsList || undefined, className: cn(cardRecipe.base, "flex flex-col", 
                     // Settings-row list → zero body padding + clip so each row's
                     // `border-b` runs full-bleed to the rounded card edge (rows re-inset
                     // with their own `px-card`, owned by the SETTINGS_ROW chrome).

package/dist/esm/components/sections/content-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-section.js","sourceRoot":"","sources":["../../../../../src/components/sections/content-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\"\n\nimport {\n  cn,\n  useUI,\n  useIconRegistry,\n  StandardIconReference,\n  IconSize,\n  Surface,\n  Heading,\n  Text,\n  Collapsible,\n  CollapsibleTrigger,\n  CollapsibleContent,\n  type ContentSectionProps,\n  type ContentSectionGroupProps,\n  type ContentSectionLegendProps,\n} from '@wildo-ai/saas-frontend-lib';\n\nimport { SectionMode } from \"@wildo-ai/zod-decorators\"\nimport { SurfaceVariant, UIBehavior, TextVariant, TextSize } from \"@wildo-ai/presets-components-models\"\n\n/**\n * ContentSectionLegend preset — section heading. DOM-identical to the legacy\n * FieldLegend preset (`data-slot=\"field-legend\"` + classes) so existing CSS and\n * the `FieldDescription` legend-adjacency rule keep working unchanged.\n */\nfunction ContentSectionLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: ContentSectionLegendProps): React.JSX.Element {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-field-sm font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * ContentSectionGroup preset — child-grouping container. DOM-identical to the\n * legacy FieldGroup preset (`data-slot=\"field-group\"`, `@container/field-group`,\n * `group/field-group`) so the responsive `Field` orientation + `FieldSeparator`\n * selectors keyed off those container/group names keep resolving.\n */\nfunction ContentSectionGroup({ className, ...props }: ContentSectionGroupProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-section-lg data-[slot=checkbox-group]:gap-field-sm [&>[data-slot=field-group]]:gap-field\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Collapsible heading chevron — rendered through the icon registry\n * (`StandardIconReference.CHEVRON_DOWN`) instead of a hand-drawn `<svg>`, so it\n * tracks the app's icon set. The `[[data-state=open]_&]` selector rotates it\n * when the ancestor `CollapsibleTrigger` is open (Radix sets `data-state=open`).\n */\nfunction CollapsibleChevron(): React.ReactNode {\n  const { renderIcon } = useIconRegistry();\n  return renderIcon(StandardIconReference.CHEVRON_DOWN, {\n    size: IconSize.SM,\n    className:\n      \"shrink-0 text-muted-foreground transition-transform duration-200 [[data-state=open]_&]:rotate-180\",\n  });\n}\n\n/**\n * ContentSection preset — the section chrome workhorse.\n *\n * DEFAULT / CARD: ported verbatim from the FieldSet preset — a `<Surface>`-wrapped\n * native `<fieldset>` (the `disabled` cascade carrier) with the `when-orphan`\n * frame de-duplication, the inter-field `gap-field` ownership + checkbox/radio +\n * settings-row flush exceptions, and truthful SurfacePolicy publication\n * (`framingMode` = `when-orphan` for framed modes, `never` for flat). DOM is\n * byte-identical to the old FieldSet (`data-slot=\"field-set\"`), so there is no\n * CSS / visual / test regression by construction.\n *\n * GHOST: a flat `<div>` (no fieldset/frame), and COLLAPSIBLE: a `Collapsible`\n * toggle with the legend as the clickable trigger — both ported from the\n * hand-branched solo-mode logic that used to live in `Section.tsx`, so all four\n * solo appearances now flow through this one primitive.\n *\n * `legend` / `description` are structured props (rendered in the mode-appropriate\n * position). When omitted, the imperative composite/record/array sites pass\n * `<ContentSectionLegend>` / `<ContentSectionGroup>` as children instead — both\n * shapes produce the same fieldset DOM for DEFAULT.\n */\nfunction ContentSection({\n  className,\n  appearance = SectionMode.DEFAULT,\n  legend,\n  description,\n  defaultOpen = true,\n  disabled,\n  panel = false,\n  icon,\n  headingTag,\n  children,\n  ...props\n}: ContentSectionProps): React.JSX.Element {\n  const { getRecipe } = useUI();\n  // CARD sections paint the active theme's CARD recipe — an elevated\n  // `surface-raised` fill + border (or a translucent liquid-glass tile under the\n  // glass theme). Resolved once per render.\n  const cardRecipe = getRecipe(UIBehavior.SURFACE, SurfaceVariant.CARD);\n  // Stable id for the CARD group heading ↔ fieldset `aria-labelledby` wiring.\n  // Called unconditionally (hooks rule) even though only the CARD branch uses it.\n  const reactId = React.useId();\n\n  // CARD body full-bleed detection. A CARD whose body hosts SETTINGS_ROW\n  // list-items drops its inline padding so each row's `border-b` divider runs\n  // corner-to-corner; free-form content keeps `p-card`. The natural expression\n  // is a CSS `has-[>[data-chrome-mode=settings_row]]:p-0` variant, but that is a\n  // NET-NEW arbitrary-variant class string, and Tailwind v4 only scans engine\n  // `@source` dirs at dev-server STARTUP — so a new variant class does not\n  // compile on hot-reload (only on a full restart / production build). To stay\n  // reliable on every reload we instead detect the settings-row children at\n  // runtime and toggle between ALREADY-EMITTED utilities (`p-0`/`p-card`). The\n  // effect runs each commit with a change-guard (no re-render loop); `bodyRef`\n  // is null for the non-CARD branches, so this is inert there.\n  const cardBodyRef = React.useRef<HTMLDivElement>(null);\n  const [cardBodyIsSettingsList, setCardBodyIsSettingsList] = React.useState(false);\n  React.useLayoutEffect(() => {\n    const el = cardBodyRef.current;\n    const next = !!el && !!el.querySelector(':scope > [data-chrome-mode=\"settings_row\"]');\n    setCardBodyIsSettingsList((prev) => (prev === next ? prev : next));\n  });\n\n  // Explicit CARD sections — solo AND container-panel `card-each` — ALWAYS paint\n  // their themed card chrome (elevated fill + border). The `when-orphan` frame\n  // de-dup is intentionally NOT applied to an authored card: the author chose a\n  // card, so it stays a card in every context (dialog, page, nested). DEFAULT /\n  // GHOST stay flat; COLLAPSIBLE is its own toggle.\n\n  // GHOST / COLLAPSIBLE render a <div>, not a <fieldset>. `props` is typed for a\n  // fieldset (ref/form/name); the only passthrough the section render sites use\n  // on these modes is data-*/aria-*/className, all valid on a div — so narrow the\n  // type for the div branches. (The <fieldset> branch keeps the full fieldset props.)\n  const divPassthrough = props as unknown as React.HTMLAttributes<HTMLDivElement>;\n\n  const structuredLegend =\n    legend != null && legend !== false ? <ContentSectionLegend>{legend}</ContentSectionLegend> : null;\n  const structuredDescription =\n    description != null && description !== false ? (\n      <Text variant={TextVariant.MUTED} size={TextSize.SM}>{description}</Text>\n    ) : null;\n\n  // CONTAINER-PANEL chrome (ContentSectionContainer's tabs/grid/accordion/… panels).\n  // Renders a heading element (not a <legend>) with a header-bar/divider layout.\n  // Per appearance: CARD = card-each, which paints the SAME themed card chrome as\n  // a solo CARD section (the elevated `surface-raised` fill + border + radius from\n  // the active theme's CARD recipe), ALWAYS — so a grid/columns of cards reads as\n  // distinct cards in every context; DEFAULT = flat. Stays a <fieldset> so the\n  // disabled cascade applies — the consolidation that lets container panels share\n  // the section primitive. Heading omitted entirely when there is no title/icon/\n  // description (content-only panels, e.g. tab bodies whose heading is the tab).\n  if (panel) {\n    // Semantic heading level (h3 default; h4 when nested under a collapsible-all\n    // <h3>), rendered via the Heading primitive. `text-base` pins the size to the\n    // prior inherited size — the heading recipe's default h3 size would be larger.\n    const headingLevel = headingTag === 'h4' ? 4 : 3;\n    const isCardEach = appearance === SectionMode.CARD;\n    const hasHeading = legend != null || icon != null || description != null;\n    return (\n      <Surface\n        asChild\n        emitPolicyVars={false}\n        variant={isCardEach ? SurfaceVariant.CARD : SurfaceVariant.BASE}\n        policyOverride={{\n          nesting: { framingMode: isCardEach ? ('always' as const) : ('never' as const) },\n        }}\n      >\n        <fieldset\n          data-slot=\"field-set\"\n          data-appearance={appearance}\n          data-section-frame={isCardEach ? 'rendered' : 'suppressed'}\n          disabled={disabled}\n          // Non-card panels are FLAT: neutralize the Surface-painted BASE recipe\n          // (a bordered card panel in every theme) on the element itself — the\n          // wrapper is kept for the policy context only. See the solo DEFAULT\n          // branch below for the full account of this trap.\n          className={cn(\n            isCardEach ? cardRecipe.base : 'space-y-field rounded-none border-0 bg-transparent p-0 shadow-none',\n            className,\n          )}\n          {...props}\n          style={\n            isCardEach\n              ? props.style\n              : { borderWidth: 0, background: 'transparent', boxShadow: 'none', borderRadius: 0, padding: 0, ...props.style }\n          }\n        >\n          {hasHeading && (\n            <div className={isCardEach ? 'p-card border-b' : 'space-y-item-xs'}>\n              {(legend != null || icon != null) && (\n                <Heading level={headingLevel} className=\"text-base font-semibold\">\n                  {icon != null && <span className=\"me-element inline-flex items-center\">{icon}</span>}\n                  {legend}\n                </Heading>\n              )}\n              {description != null && <Text variant={TextVariant.MUTED} size={TextSize.SM}>{description}</Text>}\n            </div>\n          )}\n          <div className={isCardEach ? 'p-card' : undefined}>{children}</div>\n        </fieldset>\n      </Surface>\n    );\n  }\n\n  // COLLAPSIBLE — toggle with the legend as the clickable trigger, framed as a CARD\n  // (decided 2026-08-31; it was a flat div first). A fold needs a boundary: the closed\n  // header must read as an affordance with an extent, and an open one must say where its\n  // content ends — a frameless collapsed row was indistinguishable from a plain heading.\n  // Item-level content inside stays UNframed (the display pipeline's entry items draw a\n  // left accent line, not a card), so the frame stays the SECTION's alone.\n  if (appearance === SectionMode.COLLAPSIBLE) {\n    return (\n      <Collapsible defaultOpen={defaultOpen}>\n        <Surface\n          asChild\n          emitPolicyVars={false}\n          variant={SurfaceVariant.CARD}\n          policyOverride={{ nesting: { framingMode: 'always' as const } }}\n        >\n          <div className={cn(cardRecipe.base, className)} {...divPassthrough}>\n            {structuredLegend && (\n              // No `asChild` + raw <button>: Radix's CollapsibleTrigger renders its\n              // own <button data-slot=\"collapsible-trigger\"> — the framework element,\n              // no bespoke button chrome to add.\n              <CollapsibleTrigger className=\"flex w-full items-center justify-between p-card text-left\">\n                {structuredLegend}\n                <CollapsibleChevron />\n              </CollapsibleTrigger>\n            )}\n            {structuredDescription && <div className=\"px-card pb-card-sm\">{structuredDescription}</div>}\n            <CollapsibleContent className=\"space-y-field p-card pt-0\">{children}</CollapsibleContent>\n          </div>\n        </Surface>\n      </Collapsible>\n    );\n  }\n\n  // GHOST — flat div, no fieldset/frame. The form-level <fieldset> (Form.tsx)\n  // already owns the disabled cascade, so a flat section loses nothing.\n  if (appearance === SectionMode.GHOST) {\n    return (\n      <div className={cn('space-y-field', className)} {...divPassthrough}>\n        {structuredLegend}\n        {structuredDescription}\n        {children}\n      </div>\n    );\n  }\n\n  const isCard = appearance === SectionMode.CARD;\n  // ⚠ The settings-row match is `^=settings` (prefix), NOT `=settings_row`:\n  // Tailwind converts an unescaped `_` inside an arbitrary variant to a SPACE,\n  // so the original `…=settings_row]]:gap-0` spelling emitted the invalid\n  // selector `[data-chrome-mode=settings row]` and was silently DEAD CSS\n  // (verified against the served stylesheet, 2026-08-19). Only `settings_row`\n  // starts with `settings`, so the prefix match is exact.\n  const baseStyles =\n    \"flex flex-col gap-field has-[>[data-slot=checkbox-group]]:gap-field-sm has-[>[data-slot=radio-group]]:gap-field-sm has-[>[data-chrome-mode^=settings]]:gap-0\";\n\n  // DEFAULT — a flat fieldset that owns only inter-field spacing (no frame). The\n  // form-level <fieldset> already owns the disabled cascade; the legend renders\n  // in place at the top. Truthfully publishes `framingMode: 'never'` to descendants.\n  //\n  // The Surface wrapper exists for the POLICY context only, but `Surface` always\n  // paints its variant recipe (policy and appearance are separate axes), and\n  // every theme paints `SurfaceVariant.BASE` as a bordered card panel (it is the\n  // anchor card surface). Without the frame neutralizers below, this \"flat\"\n  // section rendered a card frame whose native <legend> straddled the top border\n  // (the todo-lists READ \"header section glitch\", 2026-08-19). Same idiom as the\n  // CARD branch's transparent fieldset: neutralize the paint on the element, keep\n  // the policy context. The inline style is the deterministic half: recipe vs\n  // neutralizer utility classes race on STYLESHEET order (measured: `shadow-sm`\n  // beat `shadow-none`), while an inline declaration always wins; caller-passed\n  // style still overrides via the trailing spread.\n  if (!isCard) {\n    return (\n      <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.BASE} policyOverride={{ nesting: { framingMode: 'never' as const } }}>\n        <fieldset\n          data-slot=\"field-set\"\n          data-appearance={appearance}\n          data-section-frame=\"suppressed\"\n          disabled={disabled}\n          className={cn(baseStyles, 'rounded-none border-0 bg-transparent p-0 shadow-none', className)}\n          {...props}\n          style={{ borderWidth: 0, background: 'transparent', boxShadow: 'none', borderRadius: 0, padding: 0, ...props.style }}\n        >\n          {structuredLegend}\n          {structuredDescription}\n          {children}\n        </fieldset>\n      </Surface>\n    );\n  }\n\n  // CARD — the section title + description sit ABOVE the card as a group heading\n  // (the macOS/iOS/Linear \"settings group\" pattern), and the themed card chrome\n  // (elevated fill + border + radius from the active theme's CARD recipe) wraps\n  // ONLY the body. The <fieldset> stays the outer element so its `disabled`\n  // cascade still reaches every control, and it is `aria-labelledby` the heading\n  // so the group keeps its accessible name.\n  //\n  // An explicit CARD ALWAYS paints its themed chrome (the `when-orphan` de-dup\n  // does NOT apply — the author chose a card, so it stays a card in every\n  // context, truthfully publishing `framingMode: 'always'` to descendants).\n  //\n  // Body padding is CONTENT-AWARE (see `cardBodyIsSettingsList` above): a body\n  // hosting SETTINGS_ROW list-items drops its inline padding and clips, so each\n  // row's hairline `border-b` divider runs corner-to-corner (full-bleed) instead\n  // of floating inset; the rows then re-inset their own content with `px-card`\n  // (owned by the SETTINGS_ROW chrome). Free-form content keeps a comfortable\n  // `p-card`.\n  const headingId = `${reactId}-legend`;\n  const hasHeading = legend != null && legend !== false;\n  return (\n    <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.CARD} policyOverride={{ nesting: { framingMode: 'always' as const } }}>\n      <fieldset\n        data-slot=\"field-set\"\n        data-appearance={appearance}\n        data-section-frame=\"rendered\"\n        disabled={disabled}\n        aria-labelledby={hasHeading ? headingId : undefined}\n        className={cn(\"flex flex-col gap-field-sm border-0 bg-transparent p-0\", className)}\n        {...props}\n      >\n        {hasHeading && (\n          <div className=\"space-y-item-xs\">\n            {/*\n              Group heading ABOVE the card body. Rendered via the Heading primitive\n              at semantic level 3; `id` (the fieldset's aria-labelledby target),\n              `data-slot=\"field-legend\"` + `data-variant=\"legend\"` (CSS hooks) are\n              forwarded, and `text-base font-medium` pins the size (the heading\n              recipe's default h3 size would be larger).\n            */}\n            <Heading\n              level={3}\n              id={headingId}\n              data-slot=\"field-legend\"\n              data-variant=\"legend\"\n              className=\"text-base font-medium leading-tight\"\n            >\n              {legend}\n            </Heading>\n            {structuredDescription}\n          </div>\n        )}\n        <div\n          ref={cardBodyRef}\n          data-slot=\"section-card-body\"\n          data-settings-list={cardBodyIsSettingsList || undefined}\n          className={cn(\n            cardRecipe.base,\n            \"flex flex-col\",\n            // Settings-row list → zero body padding + clip so each row's\n            // `border-b` runs full-bleed to the rounded card edge (rows re-inset\n            // with their own `px-card`, owned by the SETTINGS_ROW chrome).\n            // Free-form content → comfortable `p-card`. All utilities here are\n            // already-emitted (no new arbitrary-variant strings), so the toggle\n            // works on hot-reload — see `cardBodyIsSettingsList` above.\n            cardBodyIsSettingsList\n              ? \"gap-0 p-0 overflow-hidden\"\n              : \"gap-field p-card has-[>[data-slot=checkbox-group]]:gap-field-sm has-[>[data-slot=radio-group]]:gap-field-sm\",\n          )}\n        >\n          {children}\n        </div>\n      </fieldset>\n    </Surface>\n  );\n}\n\nexport { ContentSection, ContentSectionGroup, ContentSectionLegend }\n"]}
+{"version":3,"file":"content-section.js","sourceRoot":"","sources":["../../../../../src/components/sections/content-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\"\n\nimport {\n  cn,\n  useUI,\n  useIconRegistry,\n  StandardIconReference,\n  IconSize,\n  Surface,\n  Heading,\n  Text,\n  Collapsible,\n  CollapsibleTrigger,\n  CollapsibleContent,\n  type ContentSectionProps,\n  type ContentSectionGroupProps,\n  type ContentSectionLegendProps,\n} from '@wildo-ai/saas-frontend-lib';\n\nimport { SectionMode } from \"@wildo-ai/zod-decorators\"\nimport { SurfaceVariant, UIBehavior, TextVariant, TextSize } from \"@wildo-ai/presets-components-models\"\n\n/**\n * Every section branch that renders a native `<fieldset>` carries this.\n *\n * The browser's UA stylesheet gives `fieldset` `min-width: min-content` — the\n * ONE element with that default — so a fieldset refuses to shrink below the\n * widest thing inside it, whatever its container says. A flex/grid child's\n * `min-width: auto` has the same effect, and `min-w-0` answers both.\n *\n * Measured 2026-09-22 on the Wonder Todos todo READ overlay: the dialog is\n * `width: 672px; max-width: 672px; overflow-x: auto`, and the fieldset inside it\n * measured **747px** — its `md:grid-cols-2 xl:grid-cols-3` body reported a\n * min-content width larger than the dialog, so the dialog scrolled sideways and\n * the overlay's right edge (its actions) was clipped out of reach. Everything\n * between the two inherited the 747.\n *\n * Do not \"simplify\" this away: nothing else in the chain resets it, and the\n * symptom only appears once a section's content is wider than its container —\n * a dialog, a narrow panel, a small viewport — never in the page-width case a\n * component is usually authored against.\n */\nconst FIELDSET_SHRINK_RESET = 'min-w-0';\n\n/**\n * ContentSectionLegend preset — section heading. DOM-identical to the legacy\n * FieldLegend preset (`data-slot=\"field-legend\"` + classes) so existing CSS and\n * the `FieldDescription` legend-adjacency rule keep working unchanged.\n */\nfunction ContentSectionLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: ContentSectionLegendProps): React.JSX.Element {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-field-sm font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * ContentSectionGroup preset — child-grouping container. DOM-identical to the\n * legacy FieldGroup preset (`data-slot=\"field-group\"`, `@container/field-group`,\n * `group/field-group`) so the responsive `Field` orientation + `FieldSeparator`\n * selectors keyed off those container/group names keep resolving.\n */\nfunction ContentSectionGroup({ className, ...props }: ContentSectionGroupProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-section-lg data-[slot=checkbox-group]:gap-field-sm [&>[data-slot=field-group]]:gap-field\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Collapsible heading chevron — rendered through the icon registry\n * (`StandardIconReference.CHEVRON_DOWN`) instead of a hand-drawn `<svg>`, so it\n * tracks the app's icon set. The `[[data-state=open]_&]` selector rotates it\n * when the ancestor `CollapsibleTrigger` is open (Radix sets `data-state=open`).\n */\nfunction CollapsibleChevron(): React.ReactNode {\n  const { renderIcon } = useIconRegistry();\n  return renderIcon(StandardIconReference.CHEVRON_DOWN, {\n    size: IconSize.SM,\n    className:\n      \"shrink-0 text-muted-foreground transition-transform duration-200 [[data-state=open]_&]:rotate-180\",\n  });\n}\n\n/**\n * ContentSection preset — the section chrome workhorse.\n *\n * DEFAULT / CARD: ported verbatim from the FieldSet preset — a `<Surface>`-wrapped\n * native `<fieldset>` (the `disabled` cascade carrier) with the `when-orphan`\n * frame de-duplication, the inter-field `gap-field` ownership + checkbox/radio +\n * settings-row flush exceptions, and truthful SurfacePolicy publication\n * (`framingMode` = `when-orphan` for framed modes, `never` for flat). DOM is\n * byte-identical to the old FieldSet (`data-slot=\"field-set\"`), so there is no\n * CSS / visual / test regression by construction.\n *\n * GHOST: a flat `<div>` (no fieldset/frame), and COLLAPSIBLE: a `Collapsible`\n * toggle with the legend as the clickable trigger — both ported from the\n * hand-branched solo-mode logic that used to live in `Section.tsx`, so all four\n * solo appearances now flow through this one primitive.\n *\n * `legend` / `description` are structured props (rendered in the mode-appropriate\n * position). When omitted, the imperative composite/record/array sites pass\n * `<ContentSectionLegend>` / `<ContentSectionGroup>` as children instead — both\n * shapes produce the same fieldset DOM for DEFAULT.\n */\nfunction ContentSection({\n  className,\n  appearance = SectionMode.DEFAULT,\n  legend,\n  description,\n  defaultOpen = true,\n  disabled,\n  panel = false,\n  icon,\n  headingTag,\n  children,\n  ...props\n}: ContentSectionProps): React.JSX.Element {\n  const { getRecipe } = useUI();\n  // CARD sections paint the active theme's CARD recipe — an elevated\n  // `surface-raised` fill + border (or a translucent liquid-glass tile under the\n  // glass theme). Resolved once per render.\n  const cardRecipe = getRecipe(UIBehavior.SURFACE, SurfaceVariant.CARD);\n  // Stable id for the CARD group heading ↔ fieldset `aria-labelledby` wiring.\n  // Called unconditionally (hooks rule) even though only the CARD branch uses it.\n  const reactId = React.useId();\n\n  // CARD body full-bleed detection. A CARD whose body hosts SETTINGS_ROW\n  // list-items drops its inline padding so each row's `border-b` divider runs\n  // corner-to-corner; free-form content keeps `p-card`. The natural expression\n  // is a CSS `has-[>[data-chrome-mode=settings_row]]:p-0` variant, but that is a\n  // NET-NEW arbitrary-variant class string, and Tailwind v4 only scans engine\n  // `@source` dirs at dev-server STARTUP — so a new variant class does not\n  // compile on hot-reload (only on a full restart / production build). To stay\n  // reliable on every reload we instead detect the settings-row children at\n  // runtime and toggle between ALREADY-EMITTED utilities (`p-0`/`p-card`). The\n  // effect runs each commit but sets state only when the detection CHANGES,\n  // compared against the rendered value; `bodyRef` is null for the non-CARD\n  // branches, so this is inert there.\n  //\n  // Do not turn the guard back into a functional updater. `setState(prev => …)`\n  // still enqueues an update on every commit whenever React cannot bail out\n  // eagerly, which made every section — including the form-wide DEFAULT one —\n  // a participant in any other component's update loop and the component React\n  // blamed for it (\"Maximum update depth exceeded\" at ContentSection when an\n  // avatar crop was applied, 2026-09-15; the loop was in the file field).\n  const cardBodyRef = React.useRef<HTMLDivElement>(null);\n  const [cardBodyIsSettingsList, setCardBodyIsSettingsList] = React.useState(false);\n  React.useLayoutEffect(() => {\n    const el = cardBodyRef.current;\n    const next = !!el && !!el.querySelector(':scope > [data-chrome-mode=\"settings_row\"]');\n    if (next !== cardBodyIsSettingsList) setCardBodyIsSettingsList(next);\n  });\n\n  // Explicit CARD sections — solo AND container-panel `card-each` — ALWAYS paint\n  // their themed card chrome (elevated fill + border). The `when-orphan` frame\n  // de-dup is intentionally NOT applied to an authored card: the author chose a\n  // card, so it stays a card in every context (dialog, page, nested). DEFAULT /\n  // GHOST stay flat; COLLAPSIBLE is its own toggle.\n\n  // GHOST / COLLAPSIBLE render a <div>, not a <fieldset>. `props` is typed for a\n  // fieldset (ref/form/name); the only passthrough the section render sites use\n  // on these modes is data-*/aria-*/className, all valid on a div — so narrow the\n  // type for the div branches. (The <fieldset> branch keeps the full fieldset props.)\n  const divPassthrough = props as unknown as React.HTMLAttributes<HTMLDivElement>;\n\n  const structuredLegend =\n    legend != null && legend !== false ? <ContentSectionLegend>{legend}</ContentSectionLegend> : null;\n  const structuredDescription =\n    description != null && description !== false ? (\n      <Text variant={TextVariant.MUTED} size={TextSize.SM}>{description}</Text>\n    ) : null;\n\n  // CONTAINER-PANEL chrome (ContentSectionContainer's tabs/grid/accordion/… panels).\n  // Renders a heading element (not a <legend>) with a header-bar/divider layout.\n  // Per appearance: CARD = card-each, which paints the SAME themed card chrome as\n  // a solo CARD section (the elevated `surface-raised` fill + border + radius from\n  // the active theme's CARD recipe), ALWAYS — so a grid/columns of cards reads as\n  // distinct cards in every context; DEFAULT = flat. Stays a <fieldset> so the\n  // disabled cascade applies — the consolidation that lets container panels share\n  // the section primitive. Heading omitted entirely when there is no title/icon/\n  // description (content-only panels, e.g. tab bodies whose heading is the tab).\n  if (panel) {\n    // Semantic heading level (h3 default; h4 when nested under a collapsible-all\n    // <h3>), rendered via the Heading primitive. `text-base` pins the size to the\n    // prior inherited size — the heading recipe's default h3 size would be larger.\n    const headingLevel = headingTag === 'h4' ? 4 : 3;\n    const isCardEach = appearance === SectionMode.CARD;\n    const hasHeading = legend != null || icon != null || description != null;\n    return (\n      <Surface\n        asChild\n        emitPolicyVars={false}\n        variant={isCardEach ? SurfaceVariant.CARD : SurfaceVariant.BASE}\n        policyOverride={{\n          nesting: { framingMode: isCardEach ? ('always' as const) : ('never' as const) },\n        }}\n      >\n        <fieldset\n          data-slot=\"field-set\"\n          data-appearance={appearance}\n          data-section-frame={isCardEach ? 'rendered' : 'suppressed'}\n          disabled={disabled}\n          // Non-card panels are FLAT: neutralize the Surface-painted BASE recipe\n          // (a bordered card panel in every theme) on the element itself — the\n          // wrapper is kept for the policy context only. See the solo DEFAULT\n          // branch below for the full account of this trap.\n          className={cn(\n            FIELDSET_SHRINK_RESET,\n            isCardEach ? cardRecipe.base : 'space-y-field rounded-none border-0 bg-transparent p-0 shadow-none',\n            className,\n          )}\n          {...props}\n          style={\n            isCardEach\n              ? props.style\n              : { borderWidth: 0, background: 'transparent', boxShadow: 'none', borderRadius: 0, padding: 0, ...props.style }\n          }\n        >\n          {hasHeading && (\n            <div className={isCardEach ? 'p-card border-b' : 'space-y-item-xs'}>\n              {(legend != null || icon != null) && (\n                <Heading level={headingLevel} className=\"text-base font-semibold\">\n                  {icon != null && <span className=\"me-element inline-flex items-center\">{icon}</span>}\n                  {legend}\n                </Heading>\n              )}\n              {description != null && <Text variant={TextVariant.MUTED} size={TextSize.SM}>{description}</Text>}\n            </div>\n          )}\n          <div className={isCardEach ? 'p-card' : undefined}>{children}</div>\n        </fieldset>\n      </Surface>\n    );\n  }\n\n  // COLLAPSIBLE — toggle with the legend as the clickable trigger, framed as a CARD\n  // (decided 2026-08-31; it was a flat div first). A fold needs a boundary: the closed\n  // header must read as an affordance with an extent, and an open one must say where its\n  // content ends — a frameless collapsed row was indistinguishable from a plain heading.\n  // Item-level content inside stays UNframed (the display pipeline's entry items draw a\n  // left accent line, not a card), so the frame stays the SECTION's alone.\n  if (appearance === SectionMode.COLLAPSIBLE) {\n    return (\n      <Collapsible defaultOpen={defaultOpen}>\n        <Surface\n          asChild\n          emitPolicyVars={false}\n          variant={SurfaceVariant.CARD}\n          policyOverride={{ nesting: { framingMode: 'always' as const } }}\n        >\n          <div className={cn(cardRecipe.base, className)} {...divPassthrough}>\n            {structuredLegend && (\n              // No `asChild` + raw <button>: Radix's CollapsibleTrigger renders its\n              // own <button data-slot=\"collapsible-trigger\"> — the framework element,\n              // no bespoke button chrome to add.\n              <CollapsibleTrigger className=\"flex w-full items-center justify-between p-card text-left\">\n                {structuredLegend}\n                <CollapsibleChevron />\n              </CollapsibleTrigger>\n            )}\n            {structuredDescription && <div className=\"px-card pb-card-sm\">{structuredDescription}</div>}\n            <CollapsibleContent className=\"space-y-field p-card pt-0\">{children}</CollapsibleContent>\n          </div>\n        </Surface>\n      </Collapsible>\n    );\n  }\n\n  // GHOST — flat div, no fieldset/frame. The form-level <fieldset> (Form.tsx)\n  // already owns the disabled cascade, so a flat section loses nothing.\n  if (appearance === SectionMode.GHOST) {\n    return (\n      <div className={cn('space-y-field', className)} {...divPassthrough}>\n        {structuredLegend}\n        {structuredDescription}\n        {children}\n      </div>\n    );\n  }\n\n  const isCard = appearance === SectionMode.CARD;\n  // ⚠ The settings-row match is `^=settings` (prefix), NOT `=settings_row`:\n  // Tailwind converts an unescaped `_` inside an arbitrary variant to a SPACE,\n  // so the original `…=settings_row]]:gap-0` spelling emitted the invalid\n  // selector `[data-chrome-mode=settings row]` and was silently DEAD CSS\n  // (verified against the served stylesheet, 2026-08-19). Only `settings_row`\n  // starts with `settings`, so the prefix match is exact.\n  const baseStyles =\n    \"flex flex-col gap-field has-[>[data-slot=checkbox-group]]:gap-field-sm has-[>[data-slot=radio-group]]:gap-field-sm has-[>[data-chrome-mode^=settings]]:gap-0\";\n\n  // DEFAULT — a flat fieldset that owns only inter-field spacing (no frame). The\n  // form-level <fieldset> already owns the disabled cascade; the legend renders\n  // in place at the top. Truthfully publishes `framingMode: 'never'` to descendants.\n  //\n  // The Surface wrapper exists for the POLICY context only, but `Surface` always\n  // paints its variant recipe (policy and appearance are separate axes), and\n  // every theme paints `SurfaceVariant.BASE` as a bordered card panel (it is the\n  // anchor card surface). Without the frame neutralizers below, this \"flat\"\n  // section rendered a card frame whose native <legend> straddled the top border\n  // (the todo-lists READ \"header section glitch\", 2026-08-19). Same idiom as the\n  // CARD branch's transparent fieldset: neutralize the paint on the element, keep\n  // the policy context. The inline style is the deterministic half: recipe vs\n  // neutralizer utility classes race on STYLESHEET order (measured: `shadow-sm`\n  // beat `shadow-none`), while an inline declaration always wins; caller-passed\n  // style still overrides via the trailing spread.\n  if (!isCard) {\n    return (\n      <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.BASE} policyOverride={{ nesting: { framingMode: 'never' as const } }}>\n        <fieldset\n          data-slot=\"field-set\"\n          data-appearance={appearance}\n          data-section-frame=\"suppressed\"\n          disabled={disabled}\n          className={cn(FIELDSET_SHRINK_RESET, baseStyles, 'rounded-none border-0 bg-transparent p-0 shadow-none', className)}\n          {...props}\n          style={{ borderWidth: 0, background: 'transparent', boxShadow: 'none', borderRadius: 0, padding: 0, ...props.style }}\n        >\n          {structuredLegend}\n          {structuredDescription}\n          {children}\n        </fieldset>\n      </Surface>\n    );\n  }\n\n  // CARD — the section title + description sit ABOVE the card as a group heading\n  // (the macOS/iOS/Linear \"settings group\" pattern), and the themed card chrome\n  // (elevated fill + border + radius from the active theme's CARD recipe) wraps\n  // ONLY the body. The <fieldset> stays the outer element so its `disabled`\n  // cascade still reaches every control, and it is `aria-labelledby` the heading\n  // so the group keeps its accessible name.\n  //\n  // An explicit CARD ALWAYS paints its themed chrome (the `when-orphan` de-dup\n  // does NOT apply — the author chose a card, so it stays a card in every\n  // context, truthfully publishing `framingMode: 'always'` to descendants).\n  //\n  // Body padding is CONTENT-AWARE (see `cardBodyIsSettingsList` above): a body\n  // hosting SETTINGS_ROW list-items drops its inline padding and clips, so each\n  // row's hairline `border-b` divider runs corner-to-corner (full-bleed) instead\n  // of floating inset; the rows then re-inset their own content with `px-card`\n  // (owned by the SETTINGS_ROW chrome). Free-form content keeps a comfortable\n  // `p-card`.\n  const headingId = `${reactId}-legend`;\n  const hasHeading = legend != null && legend !== false;\n  return (\n    <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.CARD} policyOverride={{ nesting: { framingMode: 'always' as const } }}>\n      <fieldset\n        data-slot=\"field-set\"\n        data-appearance={appearance}\n        data-section-frame=\"rendered\"\n        disabled={disabled}\n        aria-labelledby={hasHeading ? headingId : undefined}\n        className={cn(FIELDSET_SHRINK_RESET, \"flex flex-col gap-field-sm border-0 bg-transparent p-0\", className)}\n        {...props}\n      >\n        {hasHeading && (\n          <div className=\"space-y-item-xs\">\n            {/*\n              Group heading ABOVE the card body. Rendered via the Heading primitive\n              at semantic level 3; `id` (the fieldset's aria-labelledby target),\n              `data-slot=\"field-legend\"` + `data-variant=\"legend\"` (CSS hooks) are\n              forwarded, and `text-base font-medium` pins the size (the heading\n              recipe's default h3 size would be larger).\n            */}\n            <Heading\n              level={3}\n              id={headingId}\n              data-slot=\"field-legend\"\n              data-variant=\"legend\"\n              className=\"text-base font-medium leading-tight\"\n            >\n              {legend}\n            </Heading>\n            {structuredDescription}\n          </div>\n        )}\n        <div\n          ref={cardBodyRef}\n          data-slot=\"section-card-body\"\n          data-settings-list={cardBodyIsSettingsList || undefined}\n          className={cn(\n            cardRecipe.base,\n            \"flex flex-col\",\n            // Settings-row list → zero body padding + clip so each row's\n            // `border-b` runs full-bleed to the rounded card edge (rows re-inset\n            // with their own `px-card`, owned by the SETTINGS_ROW chrome).\n            // Free-form content → comfortable `p-card`. All utilities here are\n            // already-emitted (no new arbitrary-variant strings), so the toggle\n            // works on hot-reload — see `cardBodyIsSettingsList` above.\n            cardBodyIsSettingsList\n              ? \"gap-0 p-0 overflow-hidden\"\n              : \"gap-field p-card has-[>[data-slot=checkbox-group]]:gap-field-sm has-[>[data-slot=radio-group]]:gap-field-sm\",\n          )}\n        >\n          {children}\n        </div>\n      </fieldset>\n    </Surface>\n  );\n}\n\nexport { ContentSection, ContentSectionGroup, ContentSectionLegend }\n"]}

package/dist/esm/components/sections/disclosure-nesting.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"disclosure-nesting.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/disclosure-nesting.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,wBAAwB,wBAA6B,CAAA"}
+{"version":3,"file":"disclosure-nesting.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/disclosure-nesting.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,wBAAwB,wBAA6B,CAAA"}

package/dist/esm/components/sections/option-gesture.d.ts

@@ -0,0 +1,15 @@
+import type * as React from "react";
+/**
+ * Whether a gesture started on a CONTROL inside the option — that control's gesture, never the
+ * row's. A Revert button inside a write record must not also open the record.
+ */
+export declare function startsInsideControl(event: {
+    target: EventTarget | null;
+    currentTarget: EventTarget | null;
+}): boolean;
+/** The click and key handlers of one option row, given what selecting it does. */
+export declare function optionGestureHandlers<TElement extends HTMLElement>(onSelect: () => void): {
+    readonly onClick: (event: React.MouseEvent<TElement>) => void;
+    readonly onKeyDown: (event: React.KeyboardEvent<TElement>) => void;
+};
+//# sourceMappingURL=option-gesture.d.ts.map

package/dist/esm/components/sections/option-gesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-gesture.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/option-gesture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAYnC;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,GAAG,OAAO,CAMrH;AAsBD,kFAAkF;AAClF,wBAAgB,qBAAqB,CAAC,QAAQ,SAAS,WAAW,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAG;IACzF,QAAQ,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAA;IAC7D,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAA;CACnE,CAsBA"}

package/dist/esm/components/sections/option-gesture.js

@@ -0,0 +1,66 @@
+/**
+ * The gesture layer every pickable item shares — a listbox card (`Card option`), a grid-row card and
+ * a timeline entry all select on click, Enter and Space, move focus to the sibling item on the arrow
+ * keys, and leave a gesture that started on a CONTROL inside the item to that control.
+ *
+ * One implementation, because the second pickable list on a surface is exactly where the first one's
+ * rules get re-typed with one difference (#1317, #1318).
+ */
+const INTERACTIVE_ANCESTOR = 'button, a, input, textarea, select, [role="button"], [role="link"], [contenteditable="true"]';
+/**
+ * Whether a gesture started on a CONTROL inside the option — that control's gesture, never the
+ * row's. A Revert button inside a write record must not also open the record.
+ */
+export function startsInsideControl(event) {
+    const target = event.target instanceof Element ? event.target : null;
+    const row = event.currentTarget instanceof Element ? event.currentTarget : null;
+    if (target === null || row === null)
+        return false;
+    const control = target.closest(INTERACTIVE_ANCESTOR);
+    return control !== null && control !== row && row.contains(control);
+}
+/**
+ * The next or previous pickable item, in either shape (`SelectableItemSemantics`).
+ *
+ * An OPTION is a direct child of its listbox, so its sibling is the next element. A ROW's focusable
+ * element is the `gridcell` INSIDE a `row` wrapper, so its sibling is one level up and one level
+ * back down. Anything that is not the same kind of item ends the walk: focus never jumps into an
+ * unrelated neighbour.
+ */
+function siblingItem(item, forward) {
+    const step = (element) => element === null ? null : forward ? element.nextElementSibling : element.previousElementSibling;
+    if (item.getAttribute('role') === 'gridcell') {
+        const row = step(item.parentElement);
+        const cell = row?.getAttribute('role') === 'row' ? row.querySelector(':scope > [role="gridcell"]') : null;
+        return cell instanceof HTMLElement ? cell : null;
+    }
+    const sibling = step(item);
+    return sibling instanceof HTMLElement && sibling.getAttribute('role') === 'option' ? sibling : null;
+}
+/** The click and key handlers of one option row, given what selecting it does. */
+export function optionGestureHandlers(onSelect) {
+    return {
+        onClick: (event) => {
+            if (startsInsideControl(event))
+                return;
+            onSelect();
+        },
+        onKeyDown: (event) => {
+            if (startsInsideControl(event))
+                return;
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onSelect();
+                return;
+            }
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                const sibling = siblingItem(event.currentTarget, event.key === 'ArrowDown');
+                if (sibling !== null) {
+                    event.preventDefault();
+                    sibling.focus();
+                }
+            }
+        },
+    };
+}
+//# sourceMappingURL=option-gesture.js.map

package/dist/esm/components/sections/option-gesture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-gesture.js","sourceRoot":"","sources":["../../../../../src/components/sections/option-gesture.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,oBAAoB,GAAG,8FAA8F,CAAA;AAE3H;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAwE;IAC1G,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,YAAY,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;IACpE,MAAM,GAAG,GAAG,KAAK,CAAC,aAAa,YAAY,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA;IAC/E,IAAI,MAAM,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI;QAAE,OAAO,KAAK,CAAA;IACjD,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAA;IACpD,OAAO,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;AACrE,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,WAAW,CAAC,IAAiB,EAAE,OAAgB;IACtD,MAAM,IAAI,GAAG,CAAC,OAAuB,EAAkB,EAAE,CACvD,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,sBAAsB,CAAA;IACjG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,UAAU,EAAE,CAAC;QAC7C,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QACpC,MAAM,IAAI,GAAG,GAAG,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;QACzG,OAAO,IAAI,YAAY,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAClD,CAAC;IACD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAA;IAC1B,OAAO,OAAO,YAAY,WAAW,IAAI,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;AACrG,CAAC;AAED,kFAAkF;AAClF,MAAM,UAAU,qBAAqB,CAA+B,QAAoB;IAItF,OAAO;QACL,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,IAAI,mBAAmB,CAAC,KAAK,CAAC;gBAAE,OAAM;YACtC,QAAQ,EAAE,CAAA;QACZ,CAAC;QACD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,IAAI,mBAAmB,CAAC,KAAK,CAAC;gBAAE,OAAM;YACtC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC/C,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,QAAQ,EAAE,CAAA;gBACV,OAAM;YACR,CAAC;YACD,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;gBACzD,MAAM,OAAO,GAAG,WAAW,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,CAAA;gBAC3E,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;oBACrB,KAAK,CAAC,cAAc,EAAE,CAAA;oBACtB,OAAO,CAAC,KAAK,EAAE,CAAA;gBACjB,CAAC;YACH,CAAC;QACH,CAAC;KACF,CAAA;AACH,CAAC","sourcesContent":["import type * as React from \"react\"\n\n/**\n * The gesture layer every pickable item shares — a listbox card (`Card option`), a grid-row card and\n * a timeline entry all select on click, Enter and Space, move focus to the sibling item on the arrow\n * keys, and leave a gesture that started on a CONTROL inside the item to that control.\n *\n * One implementation, because the second pickable list on a surface is exactly where the first one's\n * rules get re-typed with one difference (#1317, #1318).\n */\nconst INTERACTIVE_ANCESTOR = 'button, a, input, textarea, select, [role=\"button\"], [role=\"link\"], [contenteditable=\"true\"]'\n\n/**\n * Whether a gesture started on a CONTROL inside the option — that control's gesture, never the\n * row's. A Revert button inside a write record must not also open the record.\n */\nexport function startsInsideControl(event: { target: EventTarget | null; currentTarget: EventTarget | null }): boolean {\n  const target = event.target instanceof Element ? event.target : null\n  const row = event.currentTarget instanceof Element ? event.currentTarget : null\n  if (target === null || row === null) return false\n  const control = target.closest(INTERACTIVE_ANCESTOR)\n  return control !== null && control !== row && row.contains(control)\n}\n\n/**\n * The next or previous pickable item, in either shape (`SelectableItemSemantics`).\n *\n * An OPTION is a direct child of its listbox, so its sibling is the next element. A ROW's focusable\n * element is the `gridcell` INSIDE a `row` wrapper, so its sibling is one level up and one level\n * back down. Anything that is not the same kind of item ends the walk: focus never jumps into an\n * unrelated neighbour.\n */\nfunction siblingItem(item: HTMLElement, forward: boolean): HTMLElement | null {\n  const step = (element: Element | null): Element | null =>\n    element === null ? null : forward ? element.nextElementSibling : element.previousElementSibling\n  if (item.getAttribute('role') === 'gridcell') {\n    const row = step(item.parentElement)\n    const cell = row?.getAttribute('role') === 'row' ? row.querySelector(':scope > [role=\"gridcell\"]') : null\n    return cell instanceof HTMLElement ? cell : null\n  }\n  const sibling = step(item)\n  return sibling instanceof HTMLElement && sibling.getAttribute('role') === 'option' ? sibling : null\n}\n\n/** The click and key handlers of one option row, given what selecting it does. */\nexport function optionGestureHandlers<TElement extends HTMLElement>(onSelect: () => void): {\n  readonly onClick: (event: React.MouseEvent<TElement>) => void\n  readonly onKeyDown: (event: React.KeyboardEvent<TElement>) => void\n} {\n  return {\n    onClick: (event) => {\n      if (startsInsideControl(event)) return\n      onSelect()\n    },\n    onKeyDown: (event) => {\n      if (startsInsideControl(event)) return\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault()\n        onSelect()\n        return\n      }\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        const sibling = siblingItem(event.currentTarget, event.key === 'ArrowDown')\n        if (sibling !== null) {\n          event.preventDefault()\n          sibling.focus()\n        }\n      }\n    },\n  }\n}\n"]}

package/dist/esm/components/sections/pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/pagination.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AA+HrE,eAAO,MAAM,UAAU,oBAOrB,CAAA"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/pagination.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AA+HrE,eAAO,MAAM,UAAU,oBAOrB,CAAA"}

package/dist/esm/components/sections/pagination.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/pagination.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM1I,eAAO,MAAM,wBAAwB,EAAE,mBAAmB,EAKzD,CAAC"}
+{"version":3,"file":"pagination.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/pagination.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM1I,eAAO,MAAM,wBAAwB,EAAE,mBAAmB,EAKzD,CAAC"}

package/dist/esm/components/sections/stacked-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stacked-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/stacked-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EASL,qBAAqB,EACtB,MAAM,6BAA6B,CAAC;AAgOrC,eAAO,MAAM,aAAa,uBAUxB,CAAA"}
+{"version":3,"file":"stacked-layout.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/stacked-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EASL,qBAAqB,EACtB,MAAM,6BAA6B,CAAC;AAgOrC,eAAO,MAAM,aAAa,uBAUxB,CAAA"}

package/dist/esm/components/sections/stacked-layout.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stacked-layout.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/stacked-layout.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,2BAA2B,EAAE,mBAAmB,EAAO,CAAC"}
+{"version":3,"file":"stacked-layout.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/stacked-layout.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,2BAA2B,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/sections/stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAOV,eAAe,EAChB,MAAM,6BAA6B,CAAA;AA6NpC,eAAO,MAAM,OAAO,iBAA4L,CAAA"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAOV,eAAe,EAChB,MAAM,6BAA6B,CAAA;AA8NpC,eAAO,MAAM,OAAO,iBAA4L,CAAA"}

package/dist/esm/components/sections/stepper.js

@@ -37,7 +37,9 @@ function StepperIndicator({ step, className, ...props }) {
     const { renderIcon } = useIconRegistry();
     const completed = isCompleted(step);
     const current = isCurrent(step);
-    return (_jsx("div", { "data-slot": "stepper-indicator", "data-step": step, "data-state": completed ? "completed" : current ? "current" : "pending", className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all", completed && "border-primary bg-primary text-primary-foreground", current && "border-primary bg-background text-primary", !completed && !current && "border-muted-foreground/30 bg-background text-muted-foreground", className), ...props, children: completed ? (renderIcon(StandardIconReference.CHECK, { size: IconSize.SM })) : (_jsx("span", { className: "text-sm font-semibold", children: step })) }));
+    return (_jsx("div", { "data-slot": "stepper-indicator", "data-step": step, "data-state": completed ? "completed" : current ? "current" : "pending", className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all", completed && "border-primary bg-primary text-primary-foreground", current && "border-primary bg-background text-primary", !completed && !current && "border-muted-foreground/30 bg-background text-muted-foreground", className), ...props, children: completed ? (renderIcon(StandardIconReference.CHECK, { size: IconSize.SM })) : (
+        // `step` is a 0-based POSITION (the same base as `currentStep`); a person counts from 1.
+        _jsx("span", { className: "text-sm font-semibold", children: step + 1 })) }));
 }
 // ============================================================================
 // StepperSeparator
@@ -45,8 +47,8 @@ function StepperIndicator({ step, className, ...props }) {
 function StepperSeparator({ step, className, ...props }) {
     const { isCompleted, orientation, totalSteps } = useStepperContext();
     const completed = isCompleted(step);
-    // Don't render separator after the last step
-    if (step >= totalSteps)
+    // Don't render a separator after the last step (0-based: the last position is `totalSteps - 1`).
+    if (step >= totalSteps - 1)
         return null;
     return (_jsx("div", { "data-slot": "stepper-separator", "data-step": step, "data-state": completed ? "completed" : "pending", className: cn("transition-all", orientation === DisplayDirection.VERTICAL && "w-0.5 h-12 mt-item", orientation === DisplayDirection.HORIZONTAL && "h-0.5 flex-1 mx-field", completed ? "bg-primary" : "bg-muted-foreground/30", className), ...props }));
 }

package/dist/esm/components/sections/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../../src/components/sections/stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport type {\n  StepperProps,\n  StepperItemProps,\n  StepperIndicatorProps,\n  StepperSeparatorProps,\n  StepperTitleProps,\n  StepperDescriptionProps,\n  StepperCompound,\n} from \"@wildo-ai/saas-frontend-lib\"\nimport { createCompoundPreset, cn, useIconRegistry, StandardIconReference, IconSize, useUI } from \"@wildo-ai/saas-frontend-lib\"\nimport { FrontendComponentType, TypographyVariant, UIBehavior } from \"@wildo-ai/presets-components-models\"\nimport { DisplayDirection } from \"@wildo-ai/zod-decorators\"\n\n// ============================================================================\n// Context\n// ============================================================================\n\ninterface StepperContextType {\n  currentStep: number\n  totalSteps: number\n  orientation: DisplayDirection\n  isCompleted: (step: number) => boolean\n  isCurrent: (step: number) => boolean\n  completedSteps?: Set<number>\n}\n\nconst StepperContext = React.createContext<StepperContextType | undefined>(undefined)\n\nfunction useStepperContext(): StepperContextType | undefined {\n  const context = React.useContext(StepperContext)\n  if (!context) {\n    throw new Error(\"Stepper components must be used within a Stepper\")\n  }\n  return context\n}\n\n// ============================================================================\n// Stepper (Root)\n// ============================================================================\n\nfunction StepperRoot({\n  currentStep,\n  totalSteps,\n  orientation = DisplayDirection.VERTICAL,\n  completedSteps,\n  className,\n  children,\n  ...props\n}: StepperProps): React.JSX.Element {\n  const isCompleted = (step: number) => completedSteps?.has(step) || step < currentStep\n  const isCurrent = (step: number) => step === currentStep\n\n  return (\n    <StepperContext.Provider value={{ currentStep, totalSteps, orientation, isCompleted, isCurrent, completedSteps }}>\n      <div\n        data-slot=\"stepper\"\n        data-orientation={orientation}\n        className={cn(\n          \"w-full\",\n          orientation === DisplayDirection.HORIZONTAL && \"flex items-center justify-between\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </StepperContext.Provider>\n  )\n}\n\n// ============================================================================\n// StepperItem\n// ============================================================================\n\nfunction StepperItem({\n  step,\n  className,\n  children,\n  ...props\n}: StepperItemProps): React.JSX.Element {\n  const { isCompleted, isCurrent, orientation, totalSteps } = useStepperContext()\n  const completed = isCompleted(step)\n  const current = isCurrent(step)\n\n  return (\n    <div\n      data-slot=\"stepper-item\"\n      data-step={step}\n      data-state={completed ? \"completed\" : current ? \"current\" : \"pending\"}\n      className={cn(\n        orientation === DisplayDirection.VERTICAL && \"flex items-start gap-field\",\n        orientation === DisplayDirection.HORIZONTAL && \"flex flex-col items-center gap-element\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n// ============================================================================\n// StepperIndicator\n// ============================================================================\n\nfunction StepperIndicator({\n  step,\n  className,\n  ...props\n}: StepperIndicatorProps): React.JSX.Element {\n  const { isCompleted, isCurrent } = useStepperContext()\n  const { renderIcon } = useIconRegistry()\n  const completed = isCompleted(step)\n  const current = isCurrent(step)\n\n  return (\n    <div\n      data-slot=\"stepper-indicator\"\n      data-step={step}\n      data-state={completed ? \"completed\" : current ? \"current\" : \"pending\"}\n      className={cn(\n        \"flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all\",\n        completed && \"border-primary bg-primary text-primary-foreground\",\n        current && \"border-primary bg-background text-primary\",\n        !completed && !current && \"border-muted-foreground/30 bg-background text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {completed ? (\n        renderIcon(StandardIconReference.CHECK, { size: IconSize.SM })\n      ) : (\n        <span className=\"text-sm font-semibold\">{step}</span>\n      )}\n    </div>\n  )\n}\n\n// ============================================================================\n// StepperSeparator\n// ============================================================================\n\nfunction StepperSeparator({\n  step,\n  className,\n  ...props\n}: StepperSeparatorProps): React.JSX.Element {\n  const { isCompleted, orientation, totalSteps } = useStepperContext()\n  const completed = isCompleted(step)\n\n  // Don't render separator after the last step\n  if (step >= totalSteps) return null\n\n  return (\n    <div\n      data-slot=\"stepper-separator\"\n      data-step={step}\n      data-state={completed ? \"completed\" : \"pending\"}\n      className={cn(\n        \"transition-all\",\n        orientation === DisplayDirection.VERTICAL && \"w-0.5 h-12 mt-item\",\n        orientation === DisplayDirection.HORIZONTAL && \"h-0.5 flex-1 mx-field\",\n        completed ? \"bg-primary\" : \"bg-muted-foreground/30\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// ============================================================================\n// StepperTitle\n// ============================================================================\n\nfunction StepperTitle({\n  step,\n  className,\n  children,\n  ...props\n}: StepperTitleProps): React.JSX.Element {\n  const { isCurrent } = useStepperContext()\n  const current = isCurrent(step)\n\n  return (\n    <h4\n      data-slot=\"stepper-title\"\n      data-step={step}\n      data-state={current ? \"current\" : \"inactive\"}\n      className={cn(\n        \"text-sm font-medium transition-colors\",\n        current ? \"text-foreground\" : \"text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </h4>\n  )\n}\n\n// ============================================================================\n// StepperDescription\n// ============================================================================\n\nfunction StepperDescription({\n  step,\n  className,\n  children,\n  ...props\n}: StepperDescriptionProps): React.JSX.Element {\n  const { getRecipe } = useUI()\n  const recipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION)\n\n  return (\n    <p\n      data-slot=\"stepper-description\"\n      data-step={step}\n      className={cn(\n        \"text-xs mt-item-xs\",\n        recipe.base,\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </p>\n  )\n}\n\nexport const Stepper = createCompoundPreset<StepperCompound>(StepperRoot, { Item: StepperItem, Indicator: StepperIndicator, Separator: StepperSeparator, Title: StepperTitle, Description: StepperDescription })\n\n"]}
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../../src/components/sections/stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport type {\n  StepperProps,\n  StepperItemProps,\n  StepperIndicatorProps,\n  StepperSeparatorProps,\n  StepperTitleProps,\n  StepperDescriptionProps,\n  StepperCompound,\n} from \"@wildo-ai/saas-frontend-lib\"\nimport { createCompoundPreset, cn, useIconRegistry, StandardIconReference, IconSize, useUI } from \"@wildo-ai/saas-frontend-lib\"\nimport { FrontendComponentType, TypographyVariant, UIBehavior } from \"@wildo-ai/presets-components-models\"\nimport { DisplayDirection } from \"@wildo-ai/zod-decorators\"\n\n// ============================================================================\n// Context\n// ============================================================================\n\ninterface StepperContextType {\n  currentStep: number\n  totalSteps: number\n  orientation: DisplayDirection\n  isCompleted: (step: number) => boolean\n  isCurrent: (step: number) => boolean\n  completedSteps?: Set<number>\n}\n\nconst StepperContext = React.createContext<StepperContextType | undefined>(undefined)\n\nfunction useStepperContext(): StepperContextType | undefined {\n  const context = React.useContext(StepperContext)\n  if (!context) {\n    throw new Error(\"Stepper components must be used within a Stepper\")\n  }\n  return context\n}\n\n// ============================================================================\n// Stepper (Root)\n// ============================================================================\n\nfunction StepperRoot({\n  currentStep,\n  totalSteps,\n  orientation = DisplayDirection.VERTICAL,\n  completedSteps,\n  className,\n  children,\n  ...props\n}: StepperProps): React.JSX.Element {\n  const isCompleted = (step: number) => completedSteps?.has(step) || step < currentStep\n  const isCurrent = (step: number) => step === currentStep\n\n  return (\n    <StepperContext.Provider value={{ currentStep, totalSteps, orientation, isCompleted, isCurrent, completedSteps }}>\n      <div\n        data-slot=\"stepper\"\n        data-orientation={orientation}\n        className={cn(\n          \"w-full\",\n          orientation === DisplayDirection.HORIZONTAL && \"flex items-center justify-between\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </StepperContext.Provider>\n  )\n}\n\n// ============================================================================\n// StepperItem\n// ============================================================================\n\nfunction StepperItem({\n  step,\n  className,\n  children,\n  ...props\n}: StepperItemProps): React.JSX.Element {\n  const { isCompleted, isCurrent, orientation, totalSteps } = useStepperContext()\n  const completed = isCompleted(step)\n  const current = isCurrent(step)\n\n  return (\n    <div\n      data-slot=\"stepper-item\"\n      data-step={step}\n      data-state={completed ? \"completed\" : current ? \"current\" : \"pending\"}\n      className={cn(\n        orientation === DisplayDirection.VERTICAL && \"flex items-start gap-field\",\n        orientation === DisplayDirection.HORIZONTAL && \"flex flex-col items-center gap-element\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n// ============================================================================\n// StepperIndicator\n// ============================================================================\n\nfunction StepperIndicator({\n  step,\n  className,\n  ...props\n}: StepperIndicatorProps): React.JSX.Element {\n  const { isCompleted, isCurrent } = useStepperContext()\n  const { renderIcon } = useIconRegistry()\n  const completed = isCompleted(step)\n  const current = isCurrent(step)\n\n  return (\n    <div\n      data-slot=\"stepper-indicator\"\n      data-step={step}\n      data-state={completed ? \"completed\" : current ? \"current\" : \"pending\"}\n      className={cn(\n        \"flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all\",\n        completed && \"border-primary bg-primary text-primary-foreground\",\n        current && \"border-primary bg-background text-primary\",\n        !completed && !current && \"border-muted-foreground/30 bg-background text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {completed ? (\n        renderIcon(StandardIconReference.CHECK, { size: IconSize.SM })\n      ) : (\n        // `step` is a 0-based POSITION (the same base as `currentStep`); a person counts from 1.\n        <span className=\"text-sm font-semibold\">{step + 1}</span>\n      )}\n    </div>\n  )\n}\n\n// ============================================================================\n// StepperSeparator\n// ============================================================================\n\nfunction StepperSeparator({\n  step,\n  className,\n  ...props\n}: StepperSeparatorProps): React.JSX.Element {\n  const { isCompleted, orientation, totalSteps } = useStepperContext()\n  const completed = isCompleted(step)\n\n  // Don't render a separator after the last step (0-based: the last position is `totalSteps - 1`).\n  if (step >= totalSteps - 1) return null\n\n  return (\n    <div\n      data-slot=\"stepper-separator\"\n      data-step={step}\n      data-state={completed ? \"completed\" : \"pending\"}\n      className={cn(\n        \"transition-all\",\n        orientation === DisplayDirection.VERTICAL && \"w-0.5 h-12 mt-item\",\n        orientation === DisplayDirection.HORIZONTAL && \"h-0.5 flex-1 mx-field\",\n        completed ? \"bg-primary\" : \"bg-muted-foreground/30\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// ============================================================================\n// StepperTitle\n// ============================================================================\n\nfunction StepperTitle({\n  step,\n  className,\n  children,\n  ...props\n}: StepperTitleProps): React.JSX.Element {\n  const { isCurrent } = useStepperContext()\n  const current = isCurrent(step)\n\n  return (\n    <h4\n      data-slot=\"stepper-title\"\n      data-step={step}\n      data-state={current ? \"current\" : \"inactive\"}\n      className={cn(\n        \"text-sm font-medium transition-colors\",\n        current ? \"text-foreground\" : \"text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </h4>\n  )\n}\n\n// ============================================================================\n// StepperDescription\n// ============================================================================\n\nfunction StepperDescription({\n  step,\n  className,\n  children,\n  ...props\n}: StepperDescriptionProps): React.JSX.Element {\n  const { getRecipe } = useUI()\n  const recipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION)\n\n  return (\n    <p\n      data-slot=\"stepper-description\"\n      data-step={step}\n      className={cn(\n        \"text-xs mt-item-xs\",\n        recipe.base,\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </p>\n  )\n}\n\nexport const Stepper = createCompoundPreset<StepperCompound>(StepperRoot, { Item: StepperItem, Indicator: StepperIndicator, Separator: StepperSeparator, Title: StepperTitle, Description: StepperDescription })\n\n"]}

package/dist/esm/components/sections/stepper.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/stepper.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,qBAAqB,EAAE,mBAAmB,EAAO,CAAC"}
+{"version":3,"file":"stepper.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/stepper.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,qBAAqB,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/sections/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/table.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AA0LhE,eAAO,MAAM,KAAK,eAQhB,CAAA"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/table.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AA0LhE,eAAO,MAAM,KAAK,eAQhB,CAAA"}

package/dist/esm/components/sections/table.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/table.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,EAAO,CAAC"}
+{"version":3,"file":"table.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/table.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/sections/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,YAAY,EAKb,MAAM,6BAA6B,CAAC;AAoRrC,eAAO,MAAM,IAAI,cAA+G,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,YAAY,EAOb,MAAM,6BAA6B,CAAC;AAuWrC,eAAO,MAAM,IAAI,cAA+G,CAAA"}

package/dist/esm/components/sections/tabs.js

@@ -1,10 +1,10 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { createCompoundPreset, cn, useUI, Surface, } from '@wildo-ai/saas-frontend-lib';
-import { SelectableVariant, SurfaceVariant, UIBehavior } from "@wildo-ai/presets-components-models";
+import { TabsLevel, TabsLevelContext, createCompoundPreset, cn, useUI, Surface, } from '@wildo-ai/saas-frontend-lib';
+import { IndicatorVariant, SelectableVariant, SurfaceVariant, UIBehavior } from "@wildo-ai/presets-components-models";
 /**
  * Orientation shared from TabsRoot down to List/Trigger so each sub-component can
  * choose the right `SELECTABLE` recipe. Radix exposes orientation only as a
@@ -18,9 +18,29 @@ import { SelectableVariant, SurfaceVariant, UIBehavior } from "@wildo-ai/presets
  * the selected rail item).
  */
 const TabsOrientationContext = React.createContext('horizontal');
-function TabsRoot({ className, orientation = 'horizontal', ...props }) {
+function TabsRoot({ className, orientation = 'horizontal', level, ...props }) {
     const resolved = orientation === 'vertical' ? 'vertical' : 'horizontal';
-    return (_jsx(TabsOrientationContext.Provider, { value: resolved, children: _jsx(TabsPrimitive.Root, { "data-slot": "tabs", orientation: orientation, className: cn("flex flex-col gap-element data-[orientation=vertical]:flex-row data-[orientation=vertical]:gap-card", className), ...props }) }));
+    /*
+     * The LEVEL defaults from nesting (`TabsLevel`): inside another tab set this one is SECONDARY
+     * unless the caller says otherwise. Read from the contract's own context so every preset —
+     * and the section pipeline, which never names a level — takes part in the same rule.
+     */
+    const enclosing = React.useContext(TabsLevelContext);
+    const resolvedLevel = level ?? (enclosing === null ? TabsLevel.PRIMARY : TabsLevel.SECONDARY);
+    return (_jsx(TabsOrientationContext.Provider, { value: resolved, children: _jsx(TabsLevelContext.Provider, { value: resolvedLevel, children: _jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-level": resolvedLevel, orientation: orientation, className: cn("flex flex-col gap-element data-[orientation=vertical]:flex-row data-[orientation=vertical]:gap-card", className), ...props }) }) }));
+}
+/**
+ * The COUNT on a trigger — how many things are behind the tab — through the theme's INDICATOR
+ * recipe so its tone is the same tone a badge of that kind wears anywhere else. Nothing renders for
+ * zero: an empty count is not information (see the contract). `tabular-nums` so `2` and `14` sit
+ * on the same baseline as the strip re-counts.
+ */
+function TabsTriggerCount({ count, tone }) {
+    const { getRecipe } = useUI();
+    const recipe = getRecipe(UIBehavior.INDICATOR, tone);
+    return (_jsx("span", { "data-slot": "tabs-trigger-count", "data-tone": tone, className: cn("inline-flex min-w-5 items-center justify-center font-semibold leading-4 tabular-nums", recipe.base, 
+        // The recipe's chip geometry is for a badge; a count in a tab is a smaller, rounder thing.
+        "rounded-full px-1.5 py-0 text-2xs"), children: count }));
 }
 /**
  * Overflow state of the horizontal scrollport — which edges have more content.
@@ -99,6 +119,7 @@ function TabsListSlideAffordance({ side, onSlide }) {
 }
 function TabsList({ className, ...props }) {
     const isVertical = React.useContext(TabsOrientationContext) === 'vertical';
+    const isSecondary = React.useContext(TabsLevelContext) === TabsLevel.SECONDARY;
     const listRef = React.useRef(null);
     const overflow = useHorizontalOverflow(listRef);
     /*
@@ -136,6 +157,14 @@ function TabsList({ className, ...props }) {
             // Vertical: clean nav rail (column of items, no boxed container).
             className: cn("flex flex-col items-stretch justify-start gap-item-xs", className), ...props }));
     }
+    /*
+     * SECONDARY: a wrapping row of pills with NO rule beneath it. The rule is what makes a strip read
+     * as the page's navigation; a nested set must not claim that, and pills wrap rather than scroll
+     * because a record's seven tabs on a narrow pane are better on two lines than behind a fade.
+     */
+    if (isSecondary) {
+        return (_jsx(TabsPrimitive.List, { ref: listRef, "data-slot": "tabs-list", className: cn("flex w-full flex-wrap items-center gap-item-xs", className), ...props }));
+    }
     /*
      * Horizontal: underline tab bar that SCROLLS when it overflows, instead of
      * widening the page (measured on the workbench artifact list, whose concern
@@ -161,27 +190,43 @@ function TabsList({ className, ...props }) {
      */
     return (_jsxs("div", { "data-slot": "tabs-list-scrollport", className: "relative w-full", children: [_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 bottom-0 h-px bg-border" }), _jsx(TabsPrimitive.List, { ref: listRef, "data-slot": "tabs-list", style: { maskImage: fadeMask, WebkitMaskImage: fadeMask }, className: cn("relative flex w-full items-center gap-card overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", className), ...props }), overflow.start && _jsx(TabsListSlideAffordance, { side: "start", onSlide: () => slideBy(-1) }), overflow.end && _jsx(TabsListSlideAffordance, { side: "end", onSlide: () => slideBy(1) })] }));
 }
-function TabsTrigger({ className, ...props }) {
+function TabsTrigger({ className, count, countTone = IndicatorVariant.NEUTRAL, children, ...props }) {
     const isVertical = React.useContext(TabsOrientationContext) === 'vertical';
+    const isSecondary = React.useContext(TabsLevelContext) === TabsLevel.SECONDARY;
     const { getRecipe } = useUI();
-    // Vertical rail → FILLED (soft fill on select); horizontal → UNDERLINE.
-    const recipe = getRecipe(UIBehavior.SELECTABLE, isVertical ? SelectableVariant.FILLED : SelectableVariant.UNDERLINE);
-    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn(
+    // Vertical rail → FILLED (soft fill on select); horizontal → UNDERLINE; a nested set → PILL.
+    const variant = isVertical
+        ? SelectableVariant.FILLED
+        : isSecondary ? SelectableVariant.PILL : SelectableVariant.UNDERLINE;
+    const recipe = getRecipe(UIBehavior.SELECTABLE, variant);
+    return (_jsxs(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn(
         // `cursor-pointer` sits here rather than in the recipe, matching the
         // accordion trigger: an element that switches the visible panel must
         // read as clickable whatever the theme dresses it in.
         "inline-flex cursor-pointer items-center gap-1.5 text-sm font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", isVertical
             // Vertical: full-width, left-aligned rail item (FILLED recipe fills it).
             ? "w-full justify-start rounded-md px-card-sm py-item"
-            // Horizontal: content-width underline tab (UNDERLINE recipe draws the
-            // bottom border). No `-mb-px` overlap here: the list is a scrollport
-            // (which would clip it) and the 1px rule is the wrapper's own layer,
-            // sharing the wrapper's last pixel row with this indicator.
-            : "justify-center px-card-sm py-item", 
+            : isSecondary
+                // Nested: a small pill (the PILL recipe's `sm` size draws the shape).
+                ? cn("justify-center", recipe.sizes?.sm)
+                // Horizontal: content-width underline tab (UNDERLINE recipe draws the
+                // bottom border). No `-mb-px` overlap here: the list is a scrollport
+                // (which would clip it) and the 1px rule is the wrapper's own layer,
+                // sharing the wrapper's last pixel row with this indicator.
+                : "justify-center px-card-sm py-item", 
         // Style from the orientation-appropriate SELECTABLE recipe.
-        recipe.base, recipe.states.focus, recipe.states.selected, recipe.states.disabled, recipe.motion.transition, className), ...props }));
+        recipe.base, recipe.states.focus, recipe.states.selected, recipe.states.disabled, recipe.motion.transition, className), ...props, children: [children, count !== undefined && count > 0 && _jsxs(_Fragment, { children: [' ', _jsx(TabsTriggerCount, { count: count, tone: countTone })] })] }));
 }
 function TabsContent({ className, ...props }) {
+    const isSecondary = React.useContext(TabsLevelContext) === TabsLevel.SECONDARY;
+    /*
+     * A nested set draws NO panel surface: the enclosing panel already frames it, and a `TAB_PANEL`
+     * inside a `TAB_PANEL` is the frame-in-a-frame the level exists to remove. Plain content, and
+     * a little air under the pills.
+     */
+    if (isSecondary) {
+        return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 pt-item outline-none", className), ...props }));
+    }
     return (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.TAB_PANEL, children: _jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 outline-none", className), ...props }) }));
 }
 export const Tabs = createCompoundPreset(TabsRoot, { List: TabsList, Trigger: TabsTrigger, Content: TabsContent });