@wildo-ai/presets-components 1.1.3 → 1.1.5

package/dist/esm/components/overlays/floating/dropdown-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/overlays/floating/dropdown-menu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/overlays/floating/dropdown-menu.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/overlays/floating/dropdown-menu.labels.d.ts.map

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

package/dist/esm/components/overlays/floating/hover-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../../../src/components/overlays/floating/hover-card.tsx"],"names":[],"mappings":"AAOA,OAAO,EAIL,iBAAiB,EAOlB,MAAM,6BAA6B,CAAC;AA8DrC,eAAO,MAAM,SAAS,mBAAmH,CAAA"}
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../../../../src/components/overlays/floating/hover-card.tsx"],"names":[],"mappings":"AAOA,OAAO,EAIL,iBAAiB,EAOlB,MAAM,6BAA6B,CAAC;AA8DrC,eAAO,MAAM,SAAS,mBAAmH,CAAA"}

package/dist/esm/components/overlays/floating/hover-card.labels.d.ts.map

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

package/dist/esm/components/overlays/floating/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../../src/components/overlays/floating/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAE3D,OAAO,EAAyB,aAAa,EAA2D,MAAM,qCAAqC,CAAA;AACnJ,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAML,KAAK,eAAe,EAGrB,MAAM,6BAA6B,CAAC;AAUrC,QAAA,MAAM,cAAc,sKAKlB,CAAA;AAGF,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;wCA0ClB,CAAA;AAGF,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAE1E;AAID,QAAA,MAAM,OAAO,iBAIX,CAAA;AAEF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../../../src/components/overlays/floating/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAE3D,OAAO,EAAyB,aAAa,EAA2D,MAAM,qCAAqC,CAAA;AACnJ,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAML,KAAK,eAAe,EAGrB,MAAM,6BAA6B,CAAC;AAUrC,QAAA,MAAM,cAAc,sKAKlB,CAAA;AAGF,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;wCA0ClB,CAAA;AAGF,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAE1E;AAID,QAAA,MAAM,OAAO,iBAIX,CAAA;AAEF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA"}

package/dist/esm/components/overlays/floating/popover.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/overlays/floating/popover.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":"popover.labels.d.ts","sourceRoot":"","sources":["../../../../../../src/components/overlays/floating/popover.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/overlays/floating/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/overlays/floating/tooltip.tsx"],"names":[],"mappings":"AAMA,OAAO,EAKL,eAAe,EAOhB,MAAM,6BAA6B,CAAC;AAwHrC,eAAO,MAAM,OAAO,iBAAsI,CAAA"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/overlays/floating/tooltip.tsx"],"names":[],"mappings":"AAMA,OAAO,EAKL,eAAe,EAOhB,MAAM,6BAA6B,CAAC;AAwHrC,eAAO,MAAM,OAAO,iBAAsI,CAAA"}

package/dist/esm/components/overlays/floating/tooltip.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/overlays/floating/tooltip.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":"tooltip.labels.d.ts","sourceRoot":"","sources":["../../../../../../src/components/overlays/floating/tooltip.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/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/accordion.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,iBAAiB,EAQlB,MAAM,6BAA6B,CAAC;AAoIrC,eAAO,MAAM,SAAS,mBAAwI,CAAA"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/accordion.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,iBAAiB,EAQlB,MAAM,6BAA6B,CAAC;AAoIrC,eAAO,MAAM,SAAS,mBAAwI,CAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/card.tsx"],"names":[],"mappings":"AAIA,OAAO,EAKL,YAAY,EACb,MAAM,6BAA6B,CAAC;AAwHrC,eAAO,MAAM,IAAI,cAOf,CAAA"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/card.tsx"],"names":[],"mappings":"AAKA,OAAO,EAKL,YAAY,EAEb,MAAM,6BAA6B,CAAC;AA2OrC,eAAO,MAAM,IAAI,cAQf,CAAA"}

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

@@ -1,17 +1,81 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { optionGestureHandlers } from "../../components/sections/option-gesture.js";
 import { motion } from "motion/react";
-import { SurfaceVariant, TypographyVariant, UIBehavior } from "@wildo-ai/presets-components-models";
-import { cn, useUI, createCompoundPreset, Surface, } from '@wildo-ai/saas-frontend-lib';
-function CardRoot({ className, policyOverride, ...props }) {
+import { IndicatorVariant, SelectableItemSemantics, SelectableVariant, SurfaceVariant, TypographyVariant, UIBehavior } from "@wildo-ai/presets-components-models";
+import { cn, useUI, createCompoundPreset, Surface, CardStatusEdge, } from '@wildo-ai/saas-frontend-lib';
+/**
+ * The START edge per tone — the status hue the INDICATOR tokens name, at the strength the mock
+ * drew it (a 4px bar, not the badge's 25% tint). TOTAL over `IndicatorVariant` by type, so a sixth
+ * tone is a compile error here rather than an edgeless card.
+ */
+const STATUS_EDGE_CLASS = {
+    [IndicatorVariant.SUCCESS]: "border-s-4 border-s-success",
+    [IndicatorVariant.WARNING]: "border-s-4 border-s-warning",
+    [IndicatorVariant.ERROR]: "border-s-4 border-s-destructive",
+    [IndicatorVariant.INFO]: "border-s-4 border-s-info",
+    [IndicatorVariant.NEUTRAL]: "border-s-4 border-s-muted-foreground/60",
+};
+/** ABSENT: the card stands for something not there — dashed, no fill on the edge. */
+const ABSENT_EDGE_CLASS = "border-dashed";
+function CardRoot({ className, policyOverride, statusEdge, selected = false, option, ...props }) {
     const { getRecipe } = useUI();
     const recipe = getRecipe(UIBehavior.SURFACE, SurfaceVariant.BASE);
-    const classes = cn(recipe.base, recipe.motion.transition, className);
+    /*
+     * SELECTED wears the theme's FILLED selectable recipe (the same "you are here" tint the sidebar's
+     * active item and the vertical tab rail use) plus a ring — the ring is what still reads when the
+     * card's own fill is close to the sunken accent.
+     */
+    const selectable = getRecipe(UIBehavior.SELECTABLE, SelectableVariant.FILLED);
+    const classes = cn(recipe.base, recipe.motion.transition, statusEdge !== undefined && (statusEdge === CardStatusEdge.ABSENT ? ABSENT_EDGE_CLASS : STATUS_EDGE_CLASS[statusEdge]), option !== undefined && cn("cursor-pointer outline-none", selectable.states.focus, selectable.motion.transition), selected && cn(selectable.states.selected, "ring-2 ring-ring"), className);
+    const stateProps = {
+        "data-slot": "card",
+        ...(statusEdge !== undefined ? { "data-status-edge": statusEdge } : {}),
+        ...(selected ? { "data-state": "active", "data-selected": "true" } : {}),
+    };
+    /*
+     * A ROW renders as a grid row: a `row` wrapper owning ONE `gridcell`, and the gridcell is the card
+     * — the focusable, selectable, visible element — because a `row` must own a cell and a card that
+     * holds a Run button may not be an `option` (see `SelectableItemSemantics`). The wrapper is a plain
+     * block the listbox's flex column lays out; it draws nothing.
+     */
+    if (option !== undefined && option.semantics === SelectableItemSemantics.ROW) {
+        const { onClick, onKeyDown } = optionGestureHandlers(option.onSelect);
+        const { onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...cellProps } = props;
+        return (_jsx("div", { role: "row", className: "min-w-0", children: _jsx(Surface, { asChild: true, variant: SurfaceVariant.BASE, policyOverride: policyOverride, children: _jsx("div", { ...stateProps, role: "gridcell", "aria-selected": selected, tabIndex: 0, className: classes, onClick: onClick, onKeyDown: onKeyDown, ...cellProps }) }) }));
+    }
+    /*
+     * An OPTION renders as the list item it is: `role="option"` inside the `CardListbox`, focusable,
+     * selecting on click / Enter / Space, arrows moving focus to sibling options. The gesture layer
+     * and `asChild` policy carrier are unchanged — the Surface wraps an `li` as readily as a `div`.
+     */
+    if (option !== undefined) {
+        /* The gesture layer is shared with every other option row (`option-gesture.ts`). */
+        const { onClick, onKeyDown } = optionGestureHandlers(option.onSelect);
+        const { onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...liProps } = props;
+        return (_jsx(Surface, { asChild: true, variant: SurfaceVariant.BASE, policyOverride: policyOverride, children: _jsx("li", { ...stateProps, role: "option", "aria-selected": selected, tabIndex: 0, className: cn("list-none", classes), onClick: onClick, onKeyDown: onKeyDown, ...liProps }) }));
+    }
     // Gesture layer: if theme provides gesture config (e.g. glass hover lift)
     if (recipe.gesture) {
         const { onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...motionSafeProps } = props;
-        return (_jsx(Surface, { asChild: true, variant: SurfaceVariant.BASE, policyOverride: policyOverride, children: _jsx(motion.div, { "data-slot": "card", className: classes, whileHover: recipe.gesture.whileHover, transition: recipe.gesture.transition, ...motionSafeProps }) }));
+        return (_jsx(Surface, { asChild: true, variant: SurfaceVariant.BASE, policyOverride: policyOverride, children: _jsx(motion.div, { ...stateProps, className: classes, whileHover: recipe.gesture.whileHover, transition: recipe.gesture.transition, ...motionSafeProps }) }));
+    }
+    return (_jsx(Surface, { asChild: true, variant: SurfaceVariant.BASE, policyOverride: policyOverride, children: _jsx("div", { ...stateProps, className: classes, ...props }) }));
+}
+/**
+ * The `listbox` a set of option cards sits in — a plain list; the options draw themselves.
+ *
+ * The gap is the `element` role. It was `item-xs`, which is a QUARTER of the space between menu rows:
+ * one pixel in the default theme and half a pixel in the dense one, so a list of BORDERED cards drew
+ * its borders against each other and read as one striped block. A menu row has no edge of its own and
+ * can sit that close; a card has one, and needs room for it. The framework's other consumer (the enum
+ * card grid) was already overriding this to `gap-element`, which is the measurement that settled it.
+ */
+function CardListbox({ className, semantics = SelectableItemSemantics.OPTION, ...props }) {
+    /* A `grid` is a `div`: `ul` does not admit the role, and its `row`s are not list items. */
+    if (semantics === SelectableItemSemantics.ROW) {
+        return (_jsx("div", { "data-slot": "card-listbox", role: "grid", className: cn("flex flex-col gap-element", className), ...props }));
     }
-    return (_jsx(Surface, { asChild: true, variant: SurfaceVariant.BASE, policyOverride: policyOverride, children: _jsx("div", { "data-slot": "card", className: classes, ...props }) }));
+    return (_jsx("ul", { "data-slot": "card-listbox", role: "listbox", className: cn("flex flex-col gap-element", className), ...props }));
 }
 function CardHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-header", className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-element-sm px-card has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-card", className), ...props }));
@@ -37,6 +101,7 @@ function CardFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center px-card [.border-t]:pt-card", className), ...props }));
 }
 export const Card = createCompoundPreset(CardRoot, {
+    Listbox: CardListbox,
     Header: CardHeader,
     Footer: CardFooter,
     Title: CardTitle,

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../../src/components/sections/card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAyB,cAAc,EAAE,iBAAiB,EAAE,UAAU,EAAiC,MAAM,qCAAqC,CAAA;AAEzJ,OAAO,EACL,EAAE,EACF,KAAK,EACL,oBAAoB,EACpB,OAAO,GAER,MAAM,6BAA6B,CAAC;AAMrC,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,KAAK,EAAiB;IACtE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;IAEjE,MAAM,OAAO,GAAG,EAAE,CAChB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,MAAM,CAAC,UAAU,EACxB,SAAS,CACV,CAAA;IAED,0EAA0E;IAC1E,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;QACnB,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,CAAA;QACtG,OAAO,CACL,KAAC,OAAO,IAAC,OAAO,QAAC,OAAO,EAAE,cAAc,CAAC,IAAI,EAAE,cAAc,EAAE,cAAc,YAC3E,KAAC,MAAM,CAAC,GAAG,iBACC,MAAM,EAChB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,MAAM,CAAC,OAAO,CAAC,UAAU,EACrC,UAAU,EAAE,MAAM,CAAC,OAAO,CAAC,UAAU,KACjC,eAAe,GACnB,GACM,CACX,CAAA;IACH,CAAC;IAED,OAAO,CACL,KAAC,OAAO,IAAC,OAAO,QAAC,OAAO,EAAE,cAAc,CAAC,IAAI,EAAE,cAAc,EAAE,cAAc,YAC3E,2BACY,MAAM,EAChB,SAAS,EAAE,OAAO,KACd,KAAK,GACT,GACM,CACX,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,yKAAyK,EACzK,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACrE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAA;IAE1E,OAAO,CACL,2BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,cAAc,EAAG,YAAY;QAC7B,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,KAAK,EAAE,EAAE,EAChB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IAC3E,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAE9E,OAAO,CACL,2BACY,kBAAkB,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,KACjC,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,gEAAgE,EAChE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACvE,OAAO,CACL,2BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,KAC/B,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CAAC,+CAA+C,EAAE,SAAS,CAAC,KACrE,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,oBAAoB,CAAe,QAAQ,EAAE;IAC/D,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,UAAU;IAClB,WAAW,EAAE,eAAe;IAC5B,OAAO,EAAE,WAAW;CACrB,CAAC,CAAA","sourcesContent":["import * as React from \"react\"\nimport { motion } from \"motion/react\"\nimport { FrontendComponentType, SurfaceVariant, TypographyVariant, UIBehavior, type DeepPartialSurfacePolicy } from \"@wildo-ai/presets-components-models\"\n\nimport {\n  cn,\n  useUI,\n  createCompoundPreset,\n  Surface,\n  CardCompound,\n} from '@wildo-ai/saas-frontend-lib';\n\ntype CardRootProps = React.ComponentProps<\"div\"> & {\n  policyOverride?: DeepPartialSurfacePolicy;\n}\n\nfunction CardRoot({ className, policyOverride, ...props }: CardRootProps): React.JSX.Element {\n  const { getRecipe } = useUI()\n  const recipe = getRecipe(UIBehavior.SURFACE, SurfaceVariant.BASE)\n\n  const classes = cn(\n    recipe.base,\n    recipe.motion.transition,\n    className\n  )\n\n  // Gesture layer: if theme provides gesture config (e.g. glass hover lift)\n  if (recipe.gesture) {\n    const { onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...motionSafeProps } = props\n    return (\n      <Surface asChild variant={SurfaceVariant.BASE} policyOverride={policyOverride}>\n        <motion.div\n          data-slot=\"card\"\n          className={classes}\n          whileHover={recipe.gesture.whileHover}\n          transition={recipe.gesture.transition}\n          {...motionSafeProps}\n        />\n      </Surface>\n    )\n  }\n\n  return (\n    <Surface asChild variant={SurfaceVariant.BASE} policyOverride={policyOverride}>\n      <div\n        data-slot=\"card\"\n        className={classes}\n        {...props}\n      />\n    </Surface>\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-element-sm px-card has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-card\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">): React.JSX.Element {\n  const { getRecipe } = useUI()\n  const recipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.HEADING)\n\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"leading-none\",  // Structure\n        recipe.base,\n        recipe.sizes?.h4,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">): React.JSX.Element {\n  const { getRecipe } = useUI()\n  const recipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION)\n\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(recipe.base, className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-card\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-card [.border-t]:pt-card\", className)}\n      {...props}\n    />\n  )\n}\n\nexport const Card = createCompoundPreset<CardCompound>(CardRoot, {\n  Header: CardHeader,\n  Footer: CardFooter,\n  Title: CardTitle,\n  Action: CardAction,\n  Description: CardDescription,\n  Content: CardContent,\n})\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../../src/components/sections/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\"\nimport { optionGestureHandlers } from \"~wildo-presets/components/sections/option-gesture\"\nimport { motion } from \"motion/react\"\nimport { IndicatorVariant, SelectableItemSemantics, SelectableVariant, SurfaceVariant, TypographyVariant, UIBehavior } from \"@wildo-ai/presets-components-models\"\n\nimport {\n  cn,\n  useUI,\n  createCompoundPreset,\n  Surface,\n  CardCompound,\n  CardStatusEdge,\n} from '@wildo-ai/saas-frontend-lib';\nimport type { CardListboxProps, CardProps } from '@wildo-ai/saas-frontend-lib';\n\n/**\n * The START edge per tone — the status hue the INDICATOR tokens name, at the strength the mock\n * drew it (a 4px bar, not the badge's 25% tint). TOTAL over `IndicatorVariant` by type, so a sixth\n * tone is a compile error here rather than an edgeless card.\n */\nconst STATUS_EDGE_CLASS: Record<IndicatorVariant, string> = {\n  [IndicatorVariant.SUCCESS]: \"border-s-4 border-s-success\",\n  [IndicatorVariant.WARNING]: \"border-s-4 border-s-warning\",\n  [IndicatorVariant.ERROR]: \"border-s-4 border-s-destructive\",\n  [IndicatorVariant.INFO]: \"border-s-4 border-s-info\",\n  [IndicatorVariant.NEUTRAL]: \"border-s-4 border-s-muted-foreground/60\",\n}\n\n/** ABSENT: the card stands for something not there — dashed, no fill on the edge. */\nconst ABSENT_EDGE_CLASS = \"border-dashed\"\n\n\n\ntype CardRootProps = CardProps\n\nfunction CardRoot({ className, policyOverride, statusEdge, selected = false, option, ...props }: CardRootProps): React.JSX.Element {\n  const { getRecipe } = useUI()\n  const recipe = getRecipe(UIBehavior.SURFACE, SurfaceVariant.BASE)\n  /*\n   * SELECTED wears the theme's FILLED selectable recipe (the same \"you are here\" tint the sidebar's\n   * active item and the vertical tab rail use) plus a ring — the ring is what still reads when the\n   * card's own fill is close to the sunken accent.\n   */\n  const selectable = getRecipe(UIBehavior.SELECTABLE, SelectableVariant.FILLED)\n\n  const classes = cn(\n    recipe.base,\n    recipe.motion.transition,\n    statusEdge !== undefined && (statusEdge === CardStatusEdge.ABSENT ? ABSENT_EDGE_CLASS : STATUS_EDGE_CLASS[statusEdge]),\n    option !== undefined && cn(\"cursor-pointer outline-none\", selectable.states.focus, selectable.motion.transition),\n    selected && cn(selectable.states.selected, \"ring-2 ring-ring\"),\n    className\n  )\n\n  const stateProps = {\n    \"data-slot\": \"card\",\n    ...(statusEdge !== undefined ? { \"data-status-edge\": statusEdge } : {}),\n    ...(selected ? { \"data-state\": \"active\", \"data-selected\": \"true\" } : {}),\n  }\n\n  /*\n   * A ROW renders as a grid row: a `row` wrapper owning ONE `gridcell`, and the gridcell is the card\n   * — the focusable, selectable, visible element — because a `row` must own a cell and a card that\n   * holds a Run button may not be an `option` (see `SelectableItemSemantics`). The wrapper is a plain\n   * block the listbox's flex column lays out; it draws nothing.\n   */\n  if (option !== undefined && option.semantics === SelectableItemSemantics.ROW) {\n    const { onClick, onKeyDown } = optionGestureHandlers<HTMLDivElement>(option.onSelect)\n    const { onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...cellProps } = props\n    return (\n      <div role=\"row\" className=\"min-w-0\">\n        <Surface asChild variant={SurfaceVariant.BASE} policyOverride={policyOverride}>\n          <div\n            {...stateProps}\n            role=\"gridcell\"\n            aria-selected={selected}\n            tabIndex={0}\n            className={classes}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            {...cellProps}\n          />\n        </Surface>\n      </div>\n    )\n  }\n\n  /*\n   * An OPTION renders as the list item it is: `role=\"option\"` inside the `CardListbox`, focusable,\n   * selecting on click / Enter / Space, arrows moving focus to sibling options. The gesture layer\n   * and `asChild` policy carrier are unchanged — the Surface wraps an `li` as readily as a `div`.\n   */\n  if (option !== undefined) {\n    /* The gesture layer is shared with every other option row (`option-gesture.ts`). */\n    const { onClick, onKeyDown } = optionGestureHandlers<HTMLLIElement>(option.onSelect)\n    const { onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...liProps } = props as unknown as React.ComponentProps<\"li\">\n    return (\n      <Surface asChild variant={SurfaceVariant.BASE} policyOverride={policyOverride}>\n        <li\n          {...stateProps}\n          role=\"option\"\n          aria-selected={selected}\n          tabIndex={0}\n          className={cn(\"list-none\", classes)}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          {...liProps}\n        />\n      </Surface>\n    )\n  }\n\n  // Gesture layer: if theme provides gesture config (e.g. glass hover lift)\n  if (recipe.gesture) {\n    const { onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...motionSafeProps } = props\n    return (\n      <Surface asChild variant={SurfaceVariant.BASE} policyOverride={policyOverride}>\n        <motion.div\n          {...stateProps}\n          className={classes}\n          whileHover={recipe.gesture.whileHover}\n          transition={recipe.gesture.transition}\n          {...motionSafeProps}\n        />\n      </Surface>\n    )\n  }\n\n  return (\n    <Surface asChild variant={SurfaceVariant.BASE} policyOverride={policyOverride}>\n      <div\n        {...stateProps}\n        className={classes}\n        {...props}\n      />\n    </Surface>\n  )\n}\n\n/**\n * The `listbox` a set of option cards sits in — a plain list; the options draw themselves.\n *\n * The gap is the `element` role. It was `item-xs`, which is a QUARTER of the space between menu rows:\n * one pixel in the default theme and half a pixel in the dense one, so a list of BORDERED cards drew\n * its borders against each other and read as one striped block. A menu row has no edge of its own and\n * can sit that close; a card has one, and needs room for it. The framework's other consumer (the enum\n * card grid) was already overriding this to `gap-element`, which is the measurement that settled it.\n */\nfunction CardListbox({ className, semantics = SelectableItemSemantics.OPTION, ...props }: CardListboxProps): React.JSX.Element {\n  /* A `grid` is a `div`: `ul` does not admit the role, and its `row`s are not list items. */\n  if (semantics === SelectableItemSemantics.ROW) {\n    return (\n      <div\n        data-slot=\"card-listbox\"\n        role=\"grid\"\n        className={cn(\"flex flex-col gap-element\", className)}\n        {...(props as unknown as React.ComponentProps<\"div\">)}\n      />\n    )\n  }\n  return (\n    <ul\n      data-slot=\"card-listbox\"\n      role=\"listbox\"\n      className={cn(\"flex flex-col gap-element\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-element-sm px-card has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-card\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">): React.JSX.Element {\n  const { getRecipe } = useUI()\n  const recipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.HEADING)\n\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"leading-none\",  // Structure\n        recipe.base,\n        recipe.sizes?.h4,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">): React.JSX.Element {\n  const { getRecipe } = useUI()\n  const recipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION)\n\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(recipe.base, className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-card\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-card [.border-t]:pt-card\", className)}\n      {...props}\n    />\n  )\n}\n\nexport const Card = createCompoundPreset<CardCompound>(CardRoot, {\n  Listbox: CardListbox,\n  Header: CardHeader,\n  Footer: CardFooter,\n  Title: CardTitle,\n  Action: CardAction,\n  Description: CardDescription,\n  Content: CardContent,\n})\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAoEtE,eAAO,MAAM,WAAW,qBAA2H,CAAA"}
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAoEtE,eAAO,MAAM,WAAW,qBAA2H,CAAA"}

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

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

package/dist/esm/components/sections/content-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-section.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/content-section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAYL,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC7B,KAAK,yBAAyB,EAC/B,MAAM,6BAA6B,CAAC;AAKrC;;;;GAIG;AACH,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAc/C;AAED;;;;;GAKG;AACH,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAWjG;AAiBD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAgC,EAChC,MAAM,EACN,WAAW,EACX,WAAkB,EAClB,QAAQ,EACR,KAAa,EACb,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkRzC;AAED,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,CAAA"}
+{"version":3,"file":"content-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/sections/content-section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAYL,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC7B,KAAK,yBAAyB,EAC/B,MAAM,6BAA6B,CAAC;AA2BrC;;;;GAIG;AACH,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAc/C;AAED;;;;;GAKG;AACH,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAWjG;AAiBD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAgC,EAChC,MAAM,EACN,WAAW,EACX,WAAkB,EAClB,QAAQ,EACR,KAAa,EACb,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2RzC;AAED,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,CAAA"}

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"}