@wildo-ai/saas-frontend-lib 1.1.10 → 1.1.11

package/dist/esm/components/resources/ResourceCollectionQuickFilterTabs.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * ResourceCollectionQuickFilterTabs — promotes ONE enum filter field to a
- * prominent tab strip above the collection toolbar ("All · Delivered · Failed"
- * — the Stripe/Ignisign webhook-dashboard idiom).
+ * ResourceCollectionQuickFilterTabs — promotes ONE enum filter field to the collection
+ * toolbar's first line: a segmented control ("All · Delivered · Failed" — the
+ * Stripe/Ignisign webhook-dashboard idiom) while the toolbar is wide, and a select
+ * when it is narrow (below 32rem of toolbar width), where segments would clip.
  *
  * This is a *presentation* of the collection's existing filter state, not a
  * second filtering mechanism: the host wires `value`/`onChange` into the SAME
@@ -41,16 +42,39 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * is visual. What changed is what it TELLS assistive technology.
  */
 import { useCallback } from 'react';
-import { FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { FrontendComponentType, ButtonSize, ControlSize } from '@wildo-ai/presets-components-models';
+import { z } from 'zod';
 import { cn } from '../../core/ui/cn.js';
 import { useI18n } from '../../core/i18n/useI18n.js';
 import { ToggleGroup, ToggleGroupItem, ToggleGroupType } from '../../components/form/controls/enum/toggle-group.js';
+import { Select } from '../../components/form/controls/enum/select.js';
 /**
  * Sentinel tab value for the unset ("All") state. Enum member values are
  * author-owned strings, so the sentinel is namespaced to avoid ever colliding
  * with a real member.
  */
 const ALL_TAB_VALUE = '__wildo-quick-filter-all__';
+/** The select's schema — a standalone control outside any form, over the strip's own option values. */
+const QUICK_FILTER_SELECT_SCHEMA = z.string();
+/*
+ * Two presentations of ONE choice, switched by the collection toolbar's container width (the
+ * `@container/collection-toolbar` the toolbar declares), never by the viewport: the same list is wide
+ * on a page and narrow in a split pane.
+ *
+ * - Wide: the framework's SEGMENTED control — the toggle group's default appearance: a recessed
+ *   track that makes the options read as one control divided into parts, the selected one raised.
+ *   An earlier version had no track: the selected option got a frame and the others were bare words,
+ *   so the strip read as one boxed item followed by loose text (Wonder Todos, 2026-09-30). `SM` is the
+ *   height of the preset chips and icon triggers in the row below, so the two lines share a rhythm.
+ * - Narrow: a select. A segmented control shrinks and CLIPS its segments below its content width (it
+ *   has `max-w-full` and no ellipsis, see the toggle group preset), so five statuses in a 380px pane
+ *   would lose their words. A select keeps them.
+ *
+ * Both are in the tree; only one is displayed. `display: none` removes the other from the
+ * accessibility tree as well, so assistive technology meets one control, not two.
+ */
+const SEGMENTED_WIDE_ONLY_CLASS = '@max-[32rem]/collection-toolbar:hidden';
+const SELECT_NARROW_ONLY_CLASS = 'hidden @max-[32rem]/collection-toolbar:block';
 export const ResourceCollectionQuickFilterTabs = ({ resourceType, field, value, onChange, className, }) => {
     const { tComponent, tResourceFieldDisplay, tResourceFieldEnumValue, isReady } = useI18n({
         component: FrontendComponentType.RESOURCES_LAYOUTS_FILTERS,
@@ -78,6 +102,16 @@ export const ResourceCollectionQuickFilterTabs = ({ resourceType, field, value,
     if (enumValues.length === 0)
         return null;
     const fieldLabel = tResourceFieldDisplay(resourceType, field.fieldName, 'label');
-    return (_jsxs(ToggleGroup, { type: ToggleGroupType.SINGLE, value: value ?? ALL_TAB_VALUE, onValueChange: handleValueChange, rovingFocus: true, loop: true, className: cn('flex-wrap justify-start', className), "data-slot": "collection-quick-filter", "aria-label": tComponent(FrontendComponentType.RESOURCES_LAYOUTS_FILTERS, 'quickFilterLabel', { field: fieldLabel }), children: [_jsx(ToggleGroupItem, { value: ALL_TAB_VALUE, children: tComponent(FrontendComponentType.RESOURCES_LAYOUTS_FILTERS, 'enumAll') }), enumValues.map((enumValue) => (_jsx(ToggleGroupItem, { value: enumValue, children: tResourceFieldEnumValue(resourceType, field.fieldName, enumValue, field.schema) }, enumValue)))] }));
+    const allLabel = tComponent(FrontendComponentType.RESOURCES_LAYOUTS_FILTERS, 'enumAll');
+    const groupLabel = tComponent(FrontendComponentType.RESOURCES_LAYOUTS_FILTERS, 'quickFilterLabel', { field: fieldLabel });
+    const options = [
+        { value: ALL_TAB_VALUE, label: allLabel },
+        ...enumValues.map((enumValue) => ({
+            value: enumValue,
+            label: tResourceFieldEnumValue(resourceType, field.fieldName, enumValue, field.schema),
+        })),
+    ];
+    const current = value ?? ALL_TAB_VALUE;
+    return (_jsxs(_Fragment, { children: [_jsx(ToggleGroup, { type: ToggleGroupType.SINGLE, value: current, onValueChange: handleValueChange, size: ButtonSize.SM, rovingFocus: true, loop: true, className: cn('justify-start', SEGMENTED_WIDE_ONLY_CLASS, className), "data-slot": "collection-quick-filter", "aria-label": groupLabel, children: options.map((option) => (_jsx(ToggleGroupItem, { value: option.value, size: ButtonSize.SM, children: option.label }, option.value))) }), _jsx("div", { className: cn(SELECT_NARROW_ONLY_CLASS, className), "data-slot": "collection-quick-filter-select", children: _jsx(Select, { name: `quick-filter-${field.fieldName}`, schema: QUICK_FILTER_SELECT_SCHEMA, options: options, value: current, onChange: (next) => handleValueChange(next), "aria-label": groupLabel, size: ControlSize.SM }) })] }));
 };
 //# sourceMappingURL=ResourceCollectionQuickFilterTabs.js.map

package/dist/esm/components/resources/ResourceCollectionQuickFilterTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceCollectionQuickFilterTabs.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionQuickFilterTabs.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC;AAG/H;;;;GAIG;AACH,MAAM,aAAa,GAAG,4BAA4B,CAAC;AAcnD,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,EAChD,YAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,GAC8B,EAA4B,EAAE;IACrE,MAAM,EAAE,UAAU,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;QACtF,SAAS,EAAE,qBAAqB,CAAC,yBAAyB;KAC3D,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,IAAuB,EAAE,EAAE;QAC1B;;;;WAIG;QACH,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,EAAE;YAAE,OAAO;QACpD,QAAQ,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACtD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,iGAAiG;IACjG,mGAAmG;IACnG,oGAAoG;IACpG,iGAAiG;IACjG,+CAA+C;IAC/C,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC;IAC1C,yEAAyE;IACzE,2EAA2E;IAC3E,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzC,MAAM,UAAU,GAAG,qBAAqB,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAEjF,OAAO,CACL,MAAC,WAAW,IACV,IAAI,EAAE,eAAe,CAAC,MAAM,EAC5B,KAAK,EAAE,KAAK,IAAI,aAAa,EAC7B,aAAa,EAAE,iBAAiB,EAChC,WAAW,QACX,IAAI,QACJ,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,eACzC,yBAAyB,gBACvB,UAAU,CAAC,qBAAqB,CAAC,yBAAyB,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,aAElH,KAAC,eAAe,IAAC,KAAK,EAAE,aAAa,YAClC,UAAU,CAAC,qBAAqB,CAAC,yBAAyB,EAAE,SAAS,CAAC,GACvD,EACjB,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAC7B,KAAC,eAAe,IAAiB,KAAK,EAAE,SAAS,YAC9C,uBAAuB,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,IAD5D,SAAS,CAEb,CACnB,CAAC,IACU,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n * ResourceCollectionQuickFilterTabs — promotes ONE enum filter field to a\n * prominent tab strip above the collection toolbar (\"All · Delivered · Failed\"\n * — the Stripe/Ignisign webhook-dashboard idiom).\n *\n * This is a *presentation* of the collection's existing filter state, not a\n * second filtering mechanism: the host wires `value`/`onChange` into the SAME\n * `FilterValues` record the filters panel writes, and removes the promoted\n * field from the panel/chips so exactly one control owns it. Selecting a tab\n * therefore filters server-side, exactly like the panel select it replaces.\n *\n * Authored via `collectionDisplayConfig.quickFilterField` on the LIST/SEARCH\n * operation's ui-behavior view config (see\n * `ResourceOperationFrontendConfigSchema`). Reusable by any enum-status\n * collection: webhook deliveries, SIEM DLQ, invitations, …\n *\n * Composition: the registered `ToggleGroup` compound (LOW_LEVEL_TOGGLE_GROUP\n * slot) in SINGLE mode — one option always selected, value-controlled. The \"All\"\n * option reuses the filters vocabulary's `enumAll` label; per-value labels come\n * from the enum value i18n (`tResourceFieldEnumValue`), the same source the\n * filters panel uses — the two controls can never drift.\n *\n * ## Why a toggle group and not tabs — this was tabs, and it was a false claim\n *\n * It was built from the `Tabs` compound with no `TabsContent`, because the\n * \"content\" is the collection body below, which re-fetches on filter change.\n * But a tab is a promise that activating it REVEALS A PANEL: Radix gives every\n * trigger an `aria-controls` naming its panel, and here no panel exists. axe\n * reported it as a CRITICAL `aria-valid-attr-value` on the app home (#1411),\n * and a screen reader announced \"tab 1 of 3\" for options that switch no panel.\n *\n * Suppressing `aria-controls` would have silenced the checker and kept the lie:\n * `role=\"tab\"` still tells assistive technology there are panels. Choosing one\n * of N filters over the same list is a SINGLE-CHOICE group, which is what a\n * single toggle group is — Radix renders its items as `role=\"radio\"` with\n * `aria-checked` inside a labelled group, with roving focus, exactly as the\n * WAI-ARIA radio pattern describes.\n *\n * Name kept (`…QuickFilterTabs`): it is a public export and the idiom it names\n * is visual. What changed is what it TELLS assistive technology.\n */\n\nimport React, { useCallback } from 'react';\nimport { FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { ToggleGroup, ToggleGroupItem, ToggleGroupType } from '~wildo-frontend-lib/components/form/controls/enum/toggle-group';\nimport type { FilterFieldDefinition } from './ResourceLayout_FiltersControl';\n\n/**\n * Sentinel tab value for the unset (\"All\") state. Enum member values are\n * author-owned strings, so the sentinel is namespaced to avoid ever colliding\n * with a real member.\n */\nconst ALL_TAB_VALUE = '__wildo-quick-filter-all__';\n\nexport interface ResourceCollectionQuickFilterTabsProps {\n  /** Resource type for i18n label resolution. */\n  resourceType: string;\n  /** The promoted enum filter field (must carry `enumValues`). */\n  field: FilterFieldDefinition;\n  /** Current filter value for the field — `undefined` selects the \"All\" tab. */\n  value: string | undefined;\n  /** Set (or clear, with `undefined`) the field's filter value. */\n  onChange: (value: string | undefined) => void;\n  className?: string;\n}\n\nexport const ResourceCollectionQuickFilterTabs = ({\n  resourceType,\n  field,\n  value,\n  onChange,\n  className,\n}: ResourceCollectionQuickFilterTabsProps): React.JSX.Element | null => {\n  const { tComponent, tResourceFieldDisplay, tResourceFieldEnumValue, isReady } = useI18n({\n    component: FrontendComponentType.RESOURCES_LAYOUTS_FILTERS,\n  });\n\n  const handleValueChange = useCallback(\n    (next: string | string[]) => {\n      /*\n       * A single toggle group lets the active item be pressed OFF, which reports `''`. A filter\n       * strip always has exactly one active option — \"All\" is itself a choice — so pressing the\n       * active one is a no-op rather than a state the strip cannot represent.\n       */\n      if (typeof next !== 'string' || next === '') return;\n      onChange(next === ALL_TAB_VALUE ? undefined : next);\n    },\n    [onChange],\n  );\n\n  // Wait for the filters vocabulary. Rendered before it loads, the \"All\" tab showed its KEY PATH —\n  // `components.RESOURCES_LAYOUTS_FILTERS.enumAll`, measured on the Wonder Todos home page — because\n  // this strip is often the first user of that bundle: a collection that hides its filter panel never\n  // mounts the panel that would otherwise have loaded it first. A missing label must look missing;\n  // a label still loading must not look missing.\n  if (!isReady) return null;\n\n  const enumValues = field.enumValues ?? [];\n  // Degrade gracefully on a misauthored promotion (non-enum / empty enum):\n  // render nothing — the field stays available in the regular filters panel.\n  if (enumValues.length === 0) return null;\n\n  const fieldLabel = tResourceFieldDisplay(resourceType, field.fieldName, 'label');\n\n  return (\n    <ToggleGroup\n      type={ToggleGroupType.SINGLE}\n      value={value ?? ALL_TAB_VALUE}\n      onValueChange={handleValueChange}\n      rovingFocus\n      loop\n      className={cn('flex-wrap justify-start', className)}\n      data-slot=\"collection-quick-filter\"\n      aria-label={tComponent(FrontendComponentType.RESOURCES_LAYOUTS_FILTERS, 'quickFilterLabel', { field: fieldLabel })}\n    >\n      <ToggleGroupItem value={ALL_TAB_VALUE}>\n        {tComponent(FrontendComponentType.RESOURCES_LAYOUTS_FILTERS, 'enumAll')}\n      </ToggleGroupItem>\n      {enumValues.map((enumValue) => (\n        <ToggleGroupItem key={enumValue} value={enumValue}>\n          {tResourceFieldEnumValue(resourceType, field.fieldName, enumValue, field.schema)}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroup>\n  );\n};\n"]}
+{"version":3,"file":"ResourceCollectionQuickFilterTabs.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionQuickFilterTabs.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AACrG,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC;AAC/H,OAAO,EAAE,MAAM,EAAE,MAAM,0DAA0D,CAAC;AAGlF;;;;GAIG;AACH,MAAM,aAAa,GAAG,4BAA4B,CAAC;AAEnD,uGAAuG;AACvG,MAAM,0BAA0B,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC;AAE9C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,yBAAyB,GAAG,wCAAwC,CAAC;AAC3E,MAAM,wBAAwB,GAAG,8CAA8C,CAAC;AAchF,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,EAChD,YAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,GAC8B,EAA4B,EAAE;IACrE,MAAM,EAAE,UAAU,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;QACtF,SAAS,EAAE,qBAAqB,CAAC,yBAAyB;KAC3D,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,IAAuB,EAAE,EAAE;QAC1B;;;;WAIG;QACH,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,EAAE;YAAE,OAAO;QACpD,QAAQ,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACtD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,iGAAiG;IACjG,mGAAmG;IACnG,oGAAoG;IACpG,iGAAiG;IACjG,+CAA+C;IAC/C,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC;IAC1C,yEAAyE;IACzE,2EAA2E;IAC3E,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzC,MAAM,UAAU,GAAG,qBAAqB,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACjF,MAAM,QAAQ,GAAG,UAAU,CAAC,qBAAqB,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;IACxF,MAAM,UAAU,GAAG,UAAU,CAAC,qBAAqB,CAAC,yBAAyB,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;IAC1H,MAAM,OAAO,GAAG;QACd,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE;QACzC,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;YAChC,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,uBAAuB,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC;SACvF,CAAC,CAAC;KACJ,CAAC;IACF,MAAM,OAAO,GAAG,KAAK,IAAI,aAAa,CAAC;IAEvC,OAAO,CACL,8BACE,KAAC,WAAW,IACV,IAAI,EAAE,eAAe,CAAC,MAAM,EAC5B,KAAK,EAAE,OAAO,EACd,aAAa,EAAE,iBAAiB,EAChC,IAAI,EAAE,UAAU,CAAC,EAAE,EACnB,WAAW,QACX,IAAI,QACJ,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,yBAAyB,EAAE,SAAS,CAAC,eAC1D,yBAAyB,gBACvB,UAAU,YAErB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,eAAe,IAAoB,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,UAAU,CAAC,EAAE,YACzE,MAAM,CAAC,KAAK,IADO,MAAM,CAAC,KAAK,CAEhB,CACnB,CAAC,GACU,EACd,cAAK,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,eAAY,gCAAgC,YACjG,KAAC,MAAM,IACL,IAAI,EAAE,gBAAgB,KAAK,CAAC,SAAS,EAAE,EACvC,MAAM,EAAE,0BAA0B,EAClC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAC/B,UAAU,EACtB,IAAI,EAAE,WAAW,CAAC,EAAE,GACpB,GACE,IACL,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n * ResourceCollectionQuickFilterTabs — promotes ONE enum filter field to the collection\n * toolbar's first line: a segmented control (\"All · Delivered · Failed\" — the\n * Stripe/Ignisign webhook-dashboard idiom) while the toolbar is wide, and a select\n * when it is narrow (below 32rem of toolbar width), where segments would clip.\n *\n * This is a *presentation* of the collection's existing filter state, not a\n * second filtering mechanism: the host wires `value`/`onChange` into the SAME\n * `FilterValues` record the filters panel writes, and removes the promoted\n * field from the panel/chips so exactly one control owns it. Selecting a tab\n * therefore filters server-side, exactly like the panel select it replaces.\n *\n * Authored via `collectionDisplayConfig.quickFilterField` on the LIST/SEARCH\n * operation's ui-behavior view config (see\n * `ResourceOperationFrontendConfigSchema`). Reusable by any enum-status\n * collection: webhook deliveries, SIEM DLQ, invitations, …\n *\n * Composition: the registered `ToggleGroup` compound (LOW_LEVEL_TOGGLE_GROUP\n * slot) in SINGLE mode — one option always selected, value-controlled. The \"All\"\n * option reuses the filters vocabulary's `enumAll` label; per-value labels come\n * from the enum value i18n (`tResourceFieldEnumValue`), the same source the\n * filters panel uses — the two controls can never drift.\n *\n * ## Why a toggle group and not tabs — this was tabs, and it was a false claim\n *\n * It was built from the `Tabs` compound with no `TabsContent`, because the\n * \"content\" is the collection body below, which re-fetches on filter change.\n * But a tab is a promise that activating it REVEALS A PANEL: Radix gives every\n * trigger an `aria-controls` naming its panel, and here no panel exists. axe\n * reported it as a CRITICAL `aria-valid-attr-value` on the app home (#1411),\n * and a screen reader announced \"tab 1 of 3\" for options that switch no panel.\n *\n * Suppressing `aria-controls` would have silenced the checker and kept the lie:\n * `role=\"tab\"` still tells assistive technology there are panels. Choosing one\n * of N filters over the same list is a SINGLE-CHOICE group, which is what a\n * single toggle group is — Radix renders its items as `role=\"radio\"` with\n * `aria-checked` inside a labelled group, with roving focus, exactly as the\n * WAI-ARIA radio pattern describes.\n *\n * Name kept (`…QuickFilterTabs`): it is a public export and the idiom it names\n * is visual. What changed is what it TELLS assistive technology.\n */\n\nimport React, { useCallback } from 'react';\nimport { FrontendComponentType, ButtonSize, ControlSize } from '@wildo-ai/presets-components-models';\nimport { z } from 'zod';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { ToggleGroup, ToggleGroupItem, ToggleGroupType } from '~wildo-frontend-lib/components/form/controls/enum/toggle-group';\nimport { Select } from '~wildo-frontend-lib/components/form/controls/enum/select';\nimport type { FilterFieldDefinition } from './ResourceLayout_FiltersControl';\n\n/**\n * Sentinel tab value for the unset (\"All\") state. Enum member values are\n * author-owned strings, so the sentinel is namespaced to avoid ever colliding\n * with a real member.\n */\nconst ALL_TAB_VALUE = '__wildo-quick-filter-all__';\n\n/** The select's schema — a standalone control outside any form, over the strip's own option values. */\nconst QUICK_FILTER_SELECT_SCHEMA = z.string();\n\n/*\n * Two presentations of ONE choice, switched by the collection toolbar's container width (the\n * `@container/collection-toolbar` the toolbar declares), never by the viewport: the same list is wide\n * on a page and narrow in a split pane.\n *\n * - Wide: the framework's SEGMENTED control — the toggle group's default appearance: a recessed\n *   track that makes the options read as one control divided into parts, the selected one raised.\n *   An earlier version had no track: the selected option got a frame and the others were bare words,\n *   so the strip read as one boxed item followed by loose text (Wonder Todos, 2026-09-30). `SM` is the\n *   height of the preset chips and icon triggers in the row below, so the two lines share a rhythm.\n * - Narrow: a select. A segmented control shrinks and CLIPS its segments below its content width (it\n *   has `max-w-full` and no ellipsis, see the toggle group preset), so five statuses in a 380px pane\n *   would lose their words. A select keeps them.\n *\n * Both are in the tree; only one is displayed. `display: none` removes the other from the\n * accessibility tree as well, so assistive technology meets one control, not two.\n */\nconst SEGMENTED_WIDE_ONLY_CLASS = '@max-[32rem]/collection-toolbar:hidden';\nconst SELECT_NARROW_ONLY_CLASS = 'hidden @max-[32rem]/collection-toolbar:block';\n\nexport interface ResourceCollectionQuickFilterTabsProps {\n  /** Resource type for i18n label resolution. */\n  resourceType: string;\n  /** The promoted enum filter field (must carry `enumValues`). */\n  field: FilterFieldDefinition;\n  /** Current filter value for the field — `undefined` selects the \"All\" tab. */\n  value: string | undefined;\n  /** Set (or clear, with `undefined`) the field's filter value. */\n  onChange: (value: string | undefined) => void;\n  className?: string;\n}\n\nexport const ResourceCollectionQuickFilterTabs = ({\n  resourceType,\n  field,\n  value,\n  onChange,\n  className,\n}: ResourceCollectionQuickFilterTabsProps): React.JSX.Element | null => {\n  const { tComponent, tResourceFieldDisplay, tResourceFieldEnumValue, isReady } = useI18n({\n    component: FrontendComponentType.RESOURCES_LAYOUTS_FILTERS,\n  });\n\n  const handleValueChange = useCallback(\n    (next: string | string[]) => {\n      /*\n       * A single toggle group lets the active item be pressed OFF, which reports `''`. A filter\n       * strip always has exactly one active option — \"All\" is itself a choice — so pressing the\n       * active one is a no-op rather than a state the strip cannot represent.\n       */\n      if (typeof next !== 'string' || next === '') return;\n      onChange(next === ALL_TAB_VALUE ? undefined : next);\n    },\n    [onChange],\n  );\n\n  // Wait for the filters vocabulary. Rendered before it loads, the \"All\" tab showed its KEY PATH —\n  // `components.RESOURCES_LAYOUTS_FILTERS.enumAll`, measured on the Wonder Todos home page — because\n  // this strip is often the first user of that bundle: a collection that hides its filter panel never\n  // mounts the panel that would otherwise have loaded it first. A missing label must look missing;\n  // a label still loading must not look missing.\n  if (!isReady) return null;\n\n  const enumValues = field.enumValues ?? [];\n  // Degrade gracefully on a misauthored promotion (non-enum / empty enum):\n  // render nothing — the field stays available in the regular filters panel.\n  if (enumValues.length === 0) return null;\n\n  const fieldLabel = tResourceFieldDisplay(resourceType, field.fieldName, 'label');\n  const allLabel = tComponent(FrontendComponentType.RESOURCES_LAYOUTS_FILTERS, 'enumAll');\n  const groupLabel = tComponent(FrontendComponentType.RESOURCES_LAYOUTS_FILTERS, 'quickFilterLabel', { field: fieldLabel });\n  const options = [\n    { value: ALL_TAB_VALUE, label: allLabel },\n    ...enumValues.map((enumValue) => ({\n      value: enumValue,\n      label: tResourceFieldEnumValue(resourceType, field.fieldName, enumValue, field.schema),\n    })),\n  ];\n  const current = value ?? ALL_TAB_VALUE;\n\n  return (\n    <>\n      <ToggleGroup\n        type={ToggleGroupType.SINGLE}\n        value={current}\n        onValueChange={handleValueChange}\n        size={ButtonSize.SM}\n        rovingFocus\n        loop\n        className={cn('justify-start', SEGMENTED_WIDE_ONLY_CLASS, className)}\n        data-slot=\"collection-quick-filter\"\n        aria-label={groupLabel}\n      >\n        {options.map((option) => (\n          <ToggleGroupItem key={option.value} value={option.value} size={ButtonSize.SM}>\n            {option.label}\n          </ToggleGroupItem>\n        ))}\n      </ToggleGroup>\n      <div className={cn(SELECT_NARROW_ONLY_CLASS, className)} data-slot=\"collection-quick-filter-select\">\n        <Select\n          name={`quick-filter-${field.fieldName}`}\n          schema={QUICK_FILTER_SELECT_SCHEMA}\n          options={options}\n          value={current}\n          onChange={(next) => handleValueChange(next)}\n          aria-label={groupLabel}\n          size={ControlSize.SM}\n        />\n      </div>\n    </>\n  );\n};\n"]}

package/dist/esm/components/resources/ResourceCollectionToolbar.d.ts

@@ -2,15 +2,40 @@
  * ResourceCollectionToolbar — the shared, zoned control region for every resource
  * collection view (LIST cards, LIST table, SEARCH).
  *
- * Layout (a single responsive flex row + stacked sub-rows):
- *   [ search · filters · sort ] ───────────────── [ view-mode · primary action ]
+ * Layout — TWO lines, and the second one changes meaning with the selection:
+ *   [ status: segmented quick filter ]                                    ← which slice of the collection
+ *   [ ☐ · search · filters · sort │ preset pills ] ──── [ view-mode · collection actions · Create ]
  *   [ filters panel (when expanded, full-width) ]
- *   [ active filter chips ]
+ *   [ active filter chips — only for filters nothing above already shows ]
  *
- * "Refine" controls (search/filters/sort) cluster at the leading edge — search is
- * always first; "view + act" controls (view-mode toggle, Create) cluster at the
- * trailing edge via `ms-auto`. `flex-wrap` handles narrow widths with no media
- * queries.
+ * With rows selected, the action row BECOMES the selection bar:
+ *   [ ☑ · "2 selected" · clear ] ─────────────────────── [ collection actions · bulk actions ]
+ *
+ * ## Why this shape (2026-09-30)
+ *
+ * The toolbar used to stack up to five independent bands — status tabs, preset pills, the
+ * search/sort/actions row, chips, and a select-all band — each choosing its own control style.
+ * Measured on Wonder Todos: 172px of controls before the first of two rows, 248px once two rows
+ * were selected, and at 638px the "N selected" count and the bulk actions it drives wrapped onto
+ * different lines because they lived in two different flex zones.
+ *
+ * - The PRESET PILLS sit in the refine row because they ARE refinements: the same row that holds
+ *   search and sort, rather than a band of their own in a second visual language.
+ * - The SELECT-ALL leads the row, inset into the rows' checkbox column (`CollectionSelectAllCheckbox`).
+ * - A selection turns the row into the selection bar, and that row does NOT wrap: the count and the
+ *   actions it drives stay on one line. When they do not fit, the bulk actions are drawn denser —
+ *   icons, then the first two with the rest behind "⋯" — rather than dropping below the count
+ *   (`collection-selection-bar-density`). The row's refine controls (search, filters, sort, presets),
+ *   an open filters panel, view mode, whole-scope actions and Create step aside while it lasts: none
+ *   of them acts on the selected rows. The quick filter above and the active-filter chips below stay;
+ *   changing either redefines the rows, and the list then CLEARS the selection rather than leaving it
+ *   on rows that moved. This is the contextual action bar of Gmail, GitHub and Material's top app bar.
+ * - Every refine trigger is a bare (ghost) icon with a tooltip; labels belong to Create and to the
+ *   bulk actions, the two places a person commits to something.
+ *
+ * Below a narrow container width (`NARROW_TOOLBAR_CONTAINER`), the pills take their own line at
+ * the end of the row, and the quick filter becomes a select (see `ResourceCollectionQuickFilterTabs`).
+ * A container query, not a viewport one: the same list renders in a full page and in a split pane.
  *
  * The search is an expand-on-focus field: collapsed it reads as a search icon
  * (icon-width), and it animates open to a full field when focused — the width
@@ -28,7 +53,18 @@
 import React from 'react';
 import { type FilterFieldDefinition, type FilterValues } from './ResourceLayout_FiltersControl';
 import { type SortState } from './ResourceLayout_SortControl';
+import { type CollectionSelectAllState } from './CollectionSelectAllCheckbox';
 import { CollectionDisplayMode, CollectionFilterPanelVisibility, type CollectionFilterPreset } from '../../core/resources/resources.frontend.schemas';
+/**
+ * The two meanings of the toolbar's action row, published as `data-mode` on it. Named because tests and
+ * browser drives address the row by it, and a bare string pair has nowhere to say what each one means.
+ */
+export declare enum CollectionToolbarRowMode {
+    /** At rest: select-all, the refine controls and the pills, then view mode, collection actions and Create. */
+    REFINE = "refine",
+    /** Rows selected: select-all, the count and clear, then the bulk actions. Nothing else. */
+    SELECTION = "selection"
+}
 export interface ResourceCollectionToolbarSearch {
     query: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -61,6 +97,14 @@ export interface ResourceCollectionToolbarSelection {
     /** True once the selection IS the query rather than a set of ticked rows. */
     isMatchAllSelected?: boolean;
 }
+/**
+ * The CARDS-mode select-all, rendered first in the action row (see `CollectionSelectAllCheckbox`).
+ * Omit it in TABLE mode, where the table's own header cell is the select-all of its column.
+ */
+export interface ResourceCollectionToolbarSelectAll {
+    state: CollectionSelectAllState;
+    onToggle: () => void;
+}
 export interface ResourceCollectionToolbarQuickFilter {
     /** The promoted enum filter field (see `collectionDisplayConfig.quickFilterField`). */
     field: FilterFieldDefinition;
@@ -107,32 +151,30 @@ export interface ResourceCollectionToolbarProps {
     /** Primary action node (e.g. the Create button), placed at the trailing edge. */
     primaryAction?: React.ReactNode;
     /**
-     * Selection SUMMARY — omit for non-selectable collections. When present, an "N selected" + clear
-     * cluster renders in the leading (refine) zone beside search/filter/sort.
-     *
-     * The select-ALL checkbox is deliberately NOT here: it belongs in the column of row checkboxes it
-     * commands (the table's header cell, or `CollectionSelectionHeaderRail` above a cards list), not
-     * in a toolbar row a couple of hundred pixels to their right. See `CollectionSelectionControls`.
+     * Selection SUMMARY — omit for non-selectable collections. While a selection is active, the
+     * "N selected" + clear cluster leads the action row, which has become the selection bar.
      */
     selection?: ResourceCollectionToolbarSelection;
+    /** The cards-mode select-all, first in the action row. Omit in TABLE mode (its header cell selects). */
+    selectAll?: ResourceCollectionToolbarSelectAll;
     /**
-     * Bulk-action node (the contextual bulk `ActionBar`). When a selection is
-     * active (`selection.count > 0`), this REPLACES `primaryAction` in the
-     * trailing zone; Create returns when the selection clears. Local to this
-     * collection — there is no global/floating bulk bar.
+     * Bulk-action node (the contextual bulk `ActionBar`). While a selection is active
+     * (`selection.count > 0`) the action row is the selection bar and this is the ONLY thing in its
+     * trailing zone — Create returns when the selection clears. It reads the bar's measured density from
+     * context, so it draws itself denser rather than wrapping. Local to this collection — there is no
+     * global/floating bulk bar.
      */
     bulkActions?: React.ReactNode;
     /**
      * Collection-scoped action node (e.g. the `ResourceLayout_CollectionActions`
-     * bar for whole-scope "retry all" / "purge all"). Rendered in the trailing zone
-     * alongside the primary/bulk action. Unlike bulk (which contextually REPLACES
-     * the primary action during a selection), collection actions target the whole
-     * scope and stay visible regardless of selection. Omit when the resource has no
-     * collection-scoped operations.
+     * bar for whole-scope "export", "retry all" / "purge all"). Rendered in the trailing zone
+     * before the primary action. Collection actions target the whole scope, so they step aside
+     * while rows are selected, when the action row is the selection bar and every action on it
+     * must mean "these rows". Omit when the resource has no collection-scoped operations.
      */
     collectionActions?: React.ReactNode;
     /** Additional CSS classes for the toolbar region. */
     className?: string;
 }
-export declare const ResourceCollectionToolbar: ({ resourceType, quickFilter, presetFilters, search, filterFields, filterPanel, filterValues, onFiltersChange, sort, viewMode, primaryAction, selection, bulkActions, collectionActions, className, }: ResourceCollectionToolbarProps) => React.JSX.Element;
+export declare const ResourceCollectionToolbar: ({ resourceType, quickFilter, presetFilters, search, filterFields, filterPanel, filterValues, onFiltersChange, sort, viewMode, primaryAction, selection, selectAll, bulkActions, collectionActions, className, }: ResourceCollectionToolbarProps) => React.JSX.Element;
 //# sourceMappingURL=ResourceCollectionToolbar.d.ts.map

package/dist/esm/components/resources/ResourceCollectionToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceCollectionToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/resources/ResourceCollectionToolbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AAQrD,OAAO,EAIL,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EAClB,MAAM,iCAAiC,CAAC;AAIzC,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,EAAE,qBAAqB,EAAE,+BAA+B,EAAE,KAAK,sBAAsB,EAAE,MAAM,+DAA+D,CAAC;AAUpK,MAAM,WAAW,+BAA+B;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,6BAA6B;IAC5C,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,sEAAsE;IACtE,UAAU,EAAE,SAAS,SAAS,EAAE,CAAC;IACjC,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,iCAAiC;IAChD,QAAQ,EAAE,qBAAqB,CAAC;IAChC,gBAAgB,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACzD;AAED,MAAM,WAAW,kCAAkC;IACjD,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE;QAAE,YAAY,EAAE,MAAM,CAAC;QAAC,mBAAmB,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAC1E,6EAA6E;IAC7E,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,oCAAoC;IACnD,uFAAuF;IACvF,KAAK,EAAE,qBAAqB,CAAC;IAC7B,wEAAwE;IACxE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,8BAA8B;IAC7C,+CAA+C;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,oCAAoC,CAAC;IACnD;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAClD,yEAAyE;IACzE,MAAM,CAAC,EAAE,+BAA+B,CAAC;IACzC,iFAAiF;IACjF,YAAY,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC/C;;;;OAIG;IACH,WAAW,CAAC,EAAE,+BAA+B,CAAC;IAC9C,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,IAAI,CAAC,EAAE,6BAA6B,CAAC;IACrC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,iCAAiC,CAAC;IAC7C,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,kCAAkC,CAAC;IAC/C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,yBAAyB,GAAI,sMAgBvC,8BAA8B,KAAG,KAAK,CAAC,GAAG,CAAC,OAuK7C,CAAC"}
+{"version":3,"file":"ResourceCollectionToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionToolbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AAEH,OAAO,KAAwC,MAAM,OAAO,CAAC;AAQ7D,OAAO,EAIL,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EAClB,MAAM,iCAAiC,CAAC;AAIzC,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,EAA+B,KAAK,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAE3G,OAAO,EAAE,qBAAqB,EAAE,+BAA+B,EAAE,KAAK,sBAAsB,EAAE,MAAM,+DAA+D,CAAC;AAwBpK;;;GAGG;AACH,oBAAY,wBAAwB;IAClC,6GAA6G;IAC7G,MAAM,WAAW;IACjB,2FAA2F;IAC3F,SAAS,cAAc;CACxB;AAED,MAAM,WAAW,+BAA+B;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,6BAA6B;IAC5C,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,sEAAsE;IACtE,UAAU,EAAE,SAAS,SAAS,EAAE,CAAC;IACjC,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,iCAAiC;IAChD,QAAQ,EAAE,qBAAqB,CAAC;IAChC,gBAAgB,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACzD;AAED,MAAM,WAAW,kCAAkC;IACjD,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE;QAAE,YAAY,EAAE,MAAM,CAAC;QAAC,mBAAmB,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAC1E,6EAA6E;IAC7E,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;GAGG;AACH,MAAM,WAAW,kCAAkC;IACjD,KAAK,EAAE,wBAAwB,CAAC;IAChC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,oCAAoC;IACnD,uFAAuF;IACvF,KAAK,EAAE,qBAAqB,CAAC;IAC7B,wEAAwE;IACxE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,8BAA8B;IAC7C,+CAA+C;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,oCAAoC,CAAC;IACnD;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAClD,yEAAyE;IACzE,MAAM,CAAC,EAAE,+BAA+B,CAAC;IACzC,iFAAiF;IACjF,YAAY,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC/C;;;;OAIG;IACH,WAAW,CAAC,EAAE,+BAA+B,CAAC;IAC9C,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,IAAI,CAAC,EAAE,6BAA6B,CAAC;IACrC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,iCAAiC,CAAC;IAC7C,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,kCAAkC,CAAC;IAC/C,wGAAwG;IACxG,SAAS,CAAC,EAAE,kCAAkC,CAAC;IAC/C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,yBAAyB,GAAI,iNAiBvC,8BAA8B,KAAG,KAAK,CAAC,GAAG,CAAC,OA8M7C,CAAC"}

package/dist/esm/components/resources/ResourceCollectionToolbar.js

@@ -3,15 +3,40 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * ResourceCollectionToolbar — the shared, zoned control region for every resource
  * collection view (LIST cards, LIST table, SEARCH).
  *
- * Layout (a single responsive flex row + stacked sub-rows):
- *   [ search · filters · sort ] ───────────────── [ view-mode · primary action ]
+ * Layout — TWO lines, and the second one changes meaning with the selection:
+ *   [ status: segmented quick filter ]                                    ← which slice of the collection
+ *   [ ☐ · search · filters · sort │ preset pills ] ──── [ view-mode · collection actions · Create ]
  *   [ filters panel (when expanded, full-width) ]
- *   [ active filter chips ]
+ *   [ active filter chips — only for filters nothing above already shows ]
  *
- * "Refine" controls (search/filters/sort) cluster at the leading edge — search is
- * always first; "view + act" controls (view-mode toggle, Create) cluster at the
- * trailing edge via `ms-auto`. `flex-wrap` handles narrow widths with no media
- * queries.
+ * With rows selected, the action row BECOMES the selection bar:
+ *   [ ☑ · "2 selected" · clear ] ─────────────────────── [ collection actions · bulk actions ]
+ *
+ * ## Why this shape (2026-09-30)
+ *
+ * The toolbar used to stack up to five independent bands — status tabs, preset pills, the
+ * search/sort/actions row, chips, and a select-all band — each choosing its own control style.
+ * Measured on Wonder Todos: 172px of controls before the first of two rows, 248px once two rows
+ * were selected, and at 638px the "N selected" count and the bulk actions it drives wrapped onto
+ * different lines because they lived in two different flex zones.
+ *
+ * - The PRESET PILLS sit in the refine row because they ARE refinements: the same row that holds
+ *   search and sort, rather than a band of their own in a second visual language.
+ * - The SELECT-ALL leads the row, inset into the rows' checkbox column (`CollectionSelectAllCheckbox`).
+ * - A selection turns the row into the selection bar, and that row does NOT wrap: the count and the
+ *   actions it drives stay on one line. When they do not fit, the bulk actions are drawn denser —
+ *   icons, then the first two with the rest behind "⋯" — rather than dropping below the count
+ *   (`collection-selection-bar-density`). The row's refine controls (search, filters, sort, presets),
+ *   an open filters panel, view mode, whole-scope actions and Create step aside while it lasts: none
+ *   of them acts on the selected rows. The quick filter above and the active-filter chips below stay;
+ *   changing either redefines the rows, and the list then CLEARS the selection rather than leaving it
+ *   on rows that moved. This is the contextual action bar of Gmail, GitHub and Material's top app bar.
+ * - Every refine trigger is a bare (ghost) icon with a tooltip; labels belong to Create and to the
+ *   bulk actions, the two places a person commits to something.
+ *
+ * Below a narrow container width (`NARROW_TOOLBAR_CONTAINER`), the pills take their own line at
+ * the end of the row, and the quick filter becomes a select (see `ResourceCollectionQuickFilterTabs`).
+ * A container query, not a viewport one: the same list renders in a full page and in a split pane.
  *
  * The search is an expand-on-focus field: collapsed it reads as a search icon
  * (icon-width), and it animates open to a full field when focused — the width
@@ -26,7 +51,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * expand, filters-panel expand). All data/state/handlers are supplied by the
  * collection host, so the same toolbar serves cards, table, and search.
  */
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { cn } from '../../core/ui/cn.js';
 import { FrontendComponentType, ButtonSize } from '@wildo-ai/presets-components-models';
 import { useI18n } from '../../core/i18n/useI18n.js';
@@ -41,6 +66,8 @@ import { ResourceCollectionFilterPresets } from './ResourceCollectionFilterPrese
 import { ResourceLayout_SortControl } from './ResourceLayout_SortControl.js';
 import { ResourceViewModeToggle } from './ResourceViewModeToggle.js';
 import { CollectionSelectionControls } from './CollectionSelectionControls.js';
+import { CollectionSelectAllCheckbox } from './CollectionSelectAllCheckbox.js';
+import { CollectionSelectionBarDensityProvider, SelectionBarBackgroundRunState, useMeasuredSelectionBarDensity, useSelectionBarBulkHost } from './collection-selection-bar-density.js';
 import { CollectionFilterPanelVisibility } from '../../core/resources/resources.frontend.schemas.js';
 /**
  * Width transition for the expand-on-focus search field. Timing + curve come from
@@ -48,7 +75,31 @@ import { CollectionFilterPanelVisibility } from '../../core/resources/resources.
  * `prefers-reduced-motion` (the field still opens, just instantly).
  */
 const SEARCH_WIDTH_TRANSITION = 'motion-safe:transition-[width] motion-safe:duration-[var(--motion-duration-normal)] motion-safe:ease-[var(--motion-easing-default)] motion-reduce:transition-none';
-export const ResourceCollectionToolbar = ({ resourceType, quickFilter, presetFilters, search, filterFields, filterPanel = CollectionFilterPanelVisibility.OFFERED, filterValues, onFiltersChange, sort, viewMode, primaryAction, selection, bulkActions, collectionActions, className, }) => {
+/**
+ * The toolbar's own container, named so the narrow-width rules below answer to the TOOLBAR's width,
+ * not the viewport's: a list in a 380px split pane on a wide screen is narrow, the same list on a
+ * full page is not.
+ */
+const TOOLBAR_CONTAINER_CLASS = '@container/collection-toolbar';
+/**
+ * Below this toolbar width the preset pills leave the action row for a line of their own, and the
+ * divider that separated them from the refine icons goes with them. 32rem is where the row's usual
+ * contents (select-all, three icons, three pills, an export icon and Create) stop fitting on one line.
+ */
+const PRESETS_NARROW_CLASS = '@max-[32rem]/collection-toolbar:order-last @max-[32rem]/collection-toolbar:basis-full';
+const PRESETS_DIVIDER_NARROW_CLASS = '@max-[32rem]/collection-toolbar:hidden';
+/**
+ * The two meanings of the toolbar's action row, published as `data-mode` on it. Named because tests and
+ * browser drives address the row by it, and a bare string pair has nowhere to say what each one means.
+ */
+export var CollectionToolbarRowMode;
+(function (CollectionToolbarRowMode) {
+    /** At rest: select-all, the refine controls and the pills, then view mode, collection actions and Create. */
+    CollectionToolbarRowMode["REFINE"] = "refine";
+    /** Rows selected: select-all, the count and clear, then the bulk actions. Nothing else. */
+    CollectionToolbarRowMode["SELECTION"] = "selection";
+})(CollectionToolbarRowMode || (CollectionToolbarRowMode = {}));
+export const ResourceCollectionToolbar = ({ resourceType, quickFilter, presetFilters, search, filterFields, filterPanel = CollectionFilterPanelVisibility.OFFERED, filterValues, onFiltersChange, sort, viewMode, primaryAction, selection, selectAll, bulkActions, collectionActions, className, }) => {
     const [searchExpanded, setSearchExpanded] = useState(false);
     const [filtersExpanded, setFiltersExpanded] = useState(false);
     const { tComponent } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_LIST });
@@ -79,6 +130,18 @@ export const ResourceCollectionToolbar = ({ resourceType, quickFilter, presetFil
     // empty. Scoping to `filterFields` keeps the badge in sync with the panel.
     const activeFilterCount = countActiveFilters(filterValues, filterFields.map(f => f.fieldName));
     const isSearchOpen = !!search && (searchExpanded || !!search.query);
-    return (_jsxs("div", { className: cn('flex flex-col gap-element-sm', className), "data-slot": "collection-toolbar", children: [quickFilter && (_jsx(ResourceCollectionQuickFilterTabs, { resourceType: resourceType, field: quickFilter.field, value: quickFilter.value, onChange: quickFilter.onChange })), presetFilters && presetFilters.length > 0 && (_jsx(ResourceCollectionFilterPresets, { resourceType: resourceType, presets: presetFilters, currentFilters: filterValues, onFiltersChange: onFiltersChange })), _jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [search && !isSearchOpen && (_jsx(Button, { type: "button", variant: ButtonVariants_Variant.GHOST, size: ButtonSize.ICON, onClick: () => setSearchExpanded(true), "aria-label": searchPlaceholder, "data-slot": "collection-toolbar-search-trigger", children: renderIcon(StandardIconReference.SEARCH, { size: IconSize.SM }) })), search && isSearchOpen && (_jsx("div", { className: cn('overflow-hidden shrink-0 w-64 max-w-full', SEARCH_WIDTH_TRANSITION), "data-state": "open", children: _jsx(InlineSearchInput, { query: search.query, onChange: search.onChange, onClear: search.onClear, resourceType: resourceType, autoFocus: true, onFocus: () => setSearchExpanded(true), onBlur: handleSearchBlur, onKeyDown: handleSearchKeyDown }) })), offersFilterPanel && (_jsx(ResourceLayout_FiltersTrigger, { activeCount: activeFilterCount, isExpanded: filtersExpanded, onToggle: () => setFiltersExpanded(prev => !prev) })), hasSort && (_jsx(ResourceLayout_SortControl, { resourceType: resourceType, sortFields: sort.sortFields, currentSorts: sort.sortStates, onSortChange: sort.onSortChange })), selection && (_jsxs(_Fragment, { children: [selection.count > 0 && _jsx("div", { className: "h-5 w-px bg-border", "aria-hidden": "true" }), _jsx(CollectionSelectionControls, { count: selection.count, onClear: selection.onClear, ...(selection.matchAllOffer ? { matchAllOffer: selection.matchAllOffer } : {}), ...(selection.isMatchAllSelected ? { isMatchAllSelected: true } : {}) })] })), (viewMode || primaryAction || bulkActions || collectionActions) && (_jsxs("div", { className: "flex items-center gap-element ms-auto", children: [viewMode && (_jsx(ResourceViewModeToggle, { viewMode: viewMode.viewMode, onViewModeChange: viewMode.onViewModeChange })), collectionActions, selection && selection.count > 0 && bulkActions ? bulkActions : primaryAction] }))] }), offersFilterPanel && filtersExpanded && (_jsx(ResourceLayout_FiltersPanel, { resourceType: resourceType, filterFields: filterFields, currentFilters: filterValues, onFiltersChange: onFiltersChange })), hasFilters && (_jsx(ResourceLayout_FilterChips, { resourceType: resourceType, filterFields: filterFields, currentFilters: filterValues, onFiltersChange: onFiltersChange }))] }));
+    // The action row's two meanings. While rows are selected it is the selection bar: the row's refine
+    // controls, and an open filters panel whose trigger they include, step aside, and the bulk actions
+    // take Create's place. The panel keeps its open state and comes back when the selection ends.
+    const isSelecting = !!selection && selection.count > 0;
+    const hasPresets = !!presetFilters && presetFilters.length > 0;
+    // The selection bar never wraps: it measures, and draws the bulk actions denser until they fit
+    // beside the count (see `collection-selection-bar-density`).
+    const rowRef = useRef(null);
+    const bulkBar = useMeasuredSelectionBarDensity(rowRef, isSelecting);
+    // The bulk bar outlives the selection, because a background run it starts clears the selection and
+    // reports its progress afterwards (`useSelectionBarBulkHost`, #1461).
+    const bulkHost = useSelectionBarBulkHost(isSelecting);
+    return (_jsxs("div", { className: cn(TOOLBAR_CONTAINER_CLASS, 'flex flex-col gap-element-sm', className), "data-slot": "collection-toolbar", children: [quickFilter && (_jsx(ResourceCollectionQuickFilterTabs, { resourceType: resourceType, field: quickFilter.field, value: quickFilter.value, onChange: quickFilter.onChange })), _jsxs("div", { ref: rowRef, className: cn('flex items-center gap-element', isSelecting ? 'flex-nowrap' : 'flex-wrap'), "data-slot": "collection-toolbar-row", "data-mode": isSelecting ? CollectionToolbarRowMode.SELECTION : CollectionToolbarRowMode.REFINE, children: [selectAll && _jsx(CollectionSelectAllCheckbox, { state: selectAll.state, onToggle: selectAll.onToggle }), !isSelecting && (_jsxs(_Fragment, { children: [search && !isSearchOpen && (_jsx(Button, { type: "button", variant: ButtonVariants_Variant.GHOST, size: ButtonSize.ICON_SM, onClick: () => setSearchExpanded(true), "aria-label": searchPlaceholder, title: searchPlaceholder, "data-slot": "collection-toolbar-search-trigger", children: renderIcon(StandardIconReference.SEARCH, { size: IconSize.SM }) })), search && isSearchOpen && (_jsx("div", { className: cn('overflow-hidden shrink-0 w-64 max-w-full', SEARCH_WIDTH_TRANSITION), "data-state": "open", children: _jsx(InlineSearchInput, { query: search.query, onChange: search.onChange, onClear: search.onClear, resourceType: resourceType, autoFocus: true, onFocus: () => setSearchExpanded(true), onBlur: handleSearchBlur, onKeyDown: handleSearchKeyDown }) })), offersFilterPanel && (_jsx(ResourceLayout_FiltersTrigger, { activeCount: activeFilterCount, isExpanded: filtersExpanded, onToggle: () => setFiltersExpanded(prev => !prev) })), hasSort && (_jsx(ResourceLayout_SortControl, { resourceType: resourceType, sortFields: sort.sortFields, currentSorts: sort.sortStates, onSortChange: sort.onSortChange })), hasPresets && (_jsxs(_Fragment, { children: [_jsx("div", { className: cn('h-5 w-px bg-border', PRESETS_DIVIDER_NARROW_CLASS), "aria-hidden": "true" }), _jsx(ResourceCollectionFilterPresets, { resourceType: resourceType, presets: presetFilters, currentFilters: filterValues, onFiltersChange: onFiltersChange, className: PRESETS_NARROW_CLASS })] }))] })), selection && (_jsx(CollectionSelectionControls, { className: "shrink-0", count: selection.count, onClear: selection.onClear, ...(selection.matchAllOffer ? { matchAllOffer: selection.matchAllOffer } : {}), ...(selection.isMatchAllSelected ? { isMatchAllSelected: true } : {}) })), (viewMode || primaryAction || bulkActions || collectionActions) && (_jsxs("div", { className: "flex min-w-0 items-center gap-element ms-auto", children: [viewMode && !isSelecting && (_jsx(ResourceViewModeToggle, { viewMode: viewMode.viewMode, onViewModeChange: viewMode.onViewModeChange })), !isSelecting && collectionActions, bulkActions && bulkHost.isBulkBarMounted && (_jsx(CollectionSelectionBarDensityProvider, { density: bulkBar.density, onActionSetChange: bulkBar.reportActionSet, onBackgroundRunChange: bulkHost.onBackgroundRunChange, children: bulkActions })), !isSelecting && bulkHost.backgroundRunState !== SelectionBarBackgroundRunState.WORKING && primaryAction] }))] }), offersFilterPanel && filtersExpanded && !isSelecting && (_jsx(ResourceLayout_FiltersPanel, { resourceType: resourceType, filterFields: filterFields, currentFilters: filterValues, onFiltersChange: onFiltersChange })), hasFilters && (_jsx(ResourceLayout_FilterChips, { resourceType: resourceType, filterFields: filterFields, currentFilters: filterValues, onFiltersChange: onFiltersChange, ...(presetFilters ? { presetFilters } : {}) }))] }));
 };
 //# sourceMappingURL=ResourceCollectionToolbar.js.map

package/dist/esm/components/resources/ResourceCollectionToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceCollectionToolbar.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * ResourceCollectionToolbar — the shared, zoned control region for every resource\n * collection view (LIST cards, LIST table, SEARCH).\n *\n * Layout (a single responsive flex row + stacked sub-rows):\n *   [ search · filters · sort ] ───────────────── [ view-mode · primary action ]\n *   [ filters panel (when expanded, full-width) ]\n *   [ active filter chips ]\n *\n * \"Refine\" controls (search/filters/sort) cluster at the leading edge — search is\n * always first; \"view + act\" controls (view-mode toggle, Create) cluster at the\n * trailing edge via `ms-auto`. `flex-wrap` handles narrow widths with no media\n * queries.\n *\n * The search is an expand-on-focus field: collapsed it reads as a search icon\n * (icon-width), and it animates open to a full field when focused — the width\n * transition is driven by the theme motion tokens (`--motion-duration-*` /\n * `--motion-easing-*`) and respects `prefers-reduced-motion`, so any theme retunes\n * the speed/curve. Filters and sort sit beside it as compact icon controls.\n *\n * The total item count is intentionally NOT shown here — the pagination footer\n * owns the total (\"Showing X–Y of Z\") to keep a single source of truth.\n *\n * Presentational + slot-based: it owns only its own ephemeral UI state (search\n * expand, filters-panel expand). All data/state/handlers are supplied by the\n * collection host, so the same toolbar serves cards, table, and search.\n */\n\nimport React, { useCallback, useState } from 'react';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { FrontendComponentType, ButtonSize } from '@wildo-ai/presets-components-models';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useIconRegistry } from '~wildo-frontend-lib/core/icons/useIconRegistry';\nimport { StandardIconReference, IconSize } from '~wildo-frontend-lib/core/icons/icon-registry.frontend.schemas';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { InlineSearchInput } from './InlineSearchInput';\nimport {\n  ResourceLayout_FiltersTrigger,\n  ResourceLayout_FiltersPanel,\n  countActiveFilters,\n  type FilterFieldDefinition,\n  type FilterValues,\n} from './ResourceLayout_FiltersControl';\nimport { ResourceLayout_FilterChips } from './ResourceLayout_FilterChips';\nimport { ResourceCollectionQuickFilterTabs } from './ResourceCollectionQuickFilterTabs';\nimport { ResourceCollectionFilterPresets } from './ResourceCollectionFilterPresets';\nimport { ResourceLayout_SortControl, type SortState } from './ResourceLayout_SortControl';\nimport { ResourceViewModeToggle } from './ResourceViewModeToggle';\nimport { CollectionSelectionControls } from './CollectionSelectionControls';\nimport { CollectionDisplayMode, CollectionFilterPanelVisibility, type CollectionFilterPreset } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\n\n/**\n * Width transition for the expand-on-focus search field. Timing + curve come from\n * the theme motion tokens (so a theme retunes them); suppressed under\n * `prefers-reduced-motion` (the field still opens, just instantly).\n */\nconst SEARCH_WIDTH_TRANSITION =\n  'motion-safe:transition-[width] motion-safe:duration-[var(--motion-duration-normal)] motion-safe:ease-[var(--motion-easing-default)] motion-reduce:transition-none';\n\nexport interface ResourceCollectionToolbarSearch {\n  query: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onClear: () => void;\n}\n\nexport interface ResourceCollectionToolbarSort {\n  sortFields: readonly string[];\n  /** Active sort rules, highest priority first (empty = no sorting). */\n  sortStates: readonly SortState[];\n  onSortChange: (sorts: SortState[]) => void;\n}\n\nexport interface ResourceCollectionToolbarViewMode {\n  viewMode: CollectionDisplayMode;\n  onViewModeChange: (mode: CollectionDisplayMode) => void;\n}\n\nexport interface ResourceCollectionToolbarSelection {\n  /** Number of currently-selected items. */\n  count: number;\n  /** Clear the whole selection. */\n  onClear: () => void;\n  /**\n   * Offered by the host when every row on the page is selected and the listing matches more rows\n   * than the page holds — see `CollectionSelectionControls`, which owns the wording and the rule\n   * about when it appears.\n   */\n  matchAllOffer?: { matchedCount: number; onSelectAllMatching: () => void };\n  /** True once the selection IS the query rather than a set of ticked rows. */\n  isMatchAllSelected?: boolean;\n}\n\nexport interface ResourceCollectionToolbarQuickFilter {\n  /** The promoted enum filter field (see `collectionDisplayConfig.quickFilterField`). */\n  field: FilterFieldDefinition;\n  /** Current filter value for the field — `undefined` = the \"All\" tab. */\n  value: string | undefined;\n  /** Set (or clear, with `undefined`) the promoted field's filter value. */\n  onChange: (value: string | undefined) => void;\n}\n\nexport interface ResourceCollectionToolbarProps {\n  /** Resource type for i18n label resolution. */\n  resourceType: string;\n  /**\n   * Quick-filter tab strip (\"All · <value> · …\") rendered above the toolbar\n   * row — a promoted enum filter that shares the collection's filter state.\n   * The host must EXCLUDE the promoted field from `filterFields` so the panel\n   * and the tabs never render competing controls for the same field.\n   */\n  quickFilter?: ResourceCollectionToolbarQuickFilter;\n  /**\n   * Named one-click narrowings, rendered as toggleable pills between the quick-filter tabs and the\n   * toolbar row. They share this toolbar's `filterValues`/`onFiltersChange`, so a pill and the\n   * filters panel are two views of one state and cannot disagree.\n   */\n  presetFilters?: readonly CollectionFilterPreset[];\n  /** Inline search state — omit to hide the search affordance entirely. */\n  search?: ResourceCollectionToolbarSearch;\n  /** Filter fields + state. Trigger/panel/chips are hidden when there are none. */\n  filterFields: readonly FilterFieldDefinition[];\n  /**\n   * Whether the \"Filters\" trigger and its panel are offered (see `collectionDisplayConfig.filterPanel`).\n   * Omitted means OFFERED. HIDDEN removes only the trigger and panel — the chips stay, so an active\n   * filter is never invisible.\n   */\n  filterPanel?: CollectionFilterPanelVisibility;\n  filterValues: FilterValues;\n  onFiltersChange: (filters: FilterValues) => void;\n  /**\n   * Sort state — omit to hide the toolbar sort control (e.g. TABLE mode, where\n   * sorting lives in the column headers).\n   */\n  sort?: ResourceCollectionToolbarSort;\n  /** View-mode toggle — omit when only one display is available. */\n  viewMode?: ResourceCollectionToolbarViewMode;\n  /** Primary action node (e.g. the Create button), placed at the trailing edge. */\n  primaryAction?: React.ReactNode;\n  /**\n   * Selection SUMMARY — omit for non-selectable collections. When present, an \"N selected\" + clear\n   * cluster renders in the leading (refine) zone beside search/filter/sort.\n   *\n   * The select-ALL checkbox is deliberately NOT here: it belongs in the column of row checkboxes it\n   * commands (the table's header cell, or `CollectionSelectionHeaderRail` above a cards list), not\n   * in a toolbar row a couple of hundred pixels to their right. See `CollectionSelectionControls`.\n   */\n  selection?: ResourceCollectionToolbarSelection;\n  /**\n   * Bulk-action node (the contextual bulk `ActionBar`). When a selection is\n   * active (`selection.count > 0`), this REPLACES `primaryAction` in the\n   * trailing zone; Create returns when the selection clears. Local to this\n   * collection — there is no global/floating bulk bar.\n   */\n  bulkActions?: React.ReactNode;\n  /**\n   * Collection-scoped action node (e.g. the `ResourceLayout_CollectionActions`\n   * bar for whole-scope \"retry all\" / \"purge all\"). Rendered in the trailing zone\n   * alongside the primary/bulk action. Unlike bulk (which contextually REPLACES\n   * the primary action during a selection), collection actions target the whole\n   * scope and stay visible regardless of selection. Omit when the resource has no\n   * collection-scoped operations.\n   */\n  collectionActions?: React.ReactNode;\n  /** Additional CSS classes for the toolbar region. */\n  className?: string;\n}\n\nexport const ResourceCollectionToolbar = ({\n  resourceType,\n  quickFilter,\n  presetFilters,\n  search,\n  filterFields,\n  filterPanel = CollectionFilterPanelVisibility.OFFERED,\n  filterValues,\n  onFiltersChange,\n  sort,\n  viewMode,\n  primaryAction,\n  selection,\n  bulkActions,\n  collectionActions,\n  className,\n}: ResourceCollectionToolbarProps): React.JSX.Element => {\n  const [searchExpanded, setSearchExpanded] = useState(false);\n  const [filtersExpanded, setFiltersExpanded] = useState(false);\n  const { tComponent } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_LIST });\n  const { renderIcon } = useIconRegistry();\n  const searchPlaceholder = tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'searchPlaceholder');\n\n  const handleSearchBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n    // Collapse back to the icon only when leaving an EMPTY field — an active\n    // query keeps the field open so the filter stays obvious.\n    if (!e.currentTarget.value) setSearchExpanded(false);\n  }, []);\n\n  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Escape') {\n      search?.onClear();\n      setSearchExpanded(false);\n      e.currentTarget.blur();\n    }\n  }, [search]);\n\n  const hasFilters = filterFields.length > 0;\n  // The panel is a separate question from the chips: HIDDEN withdraws the trigger and the panel, and\n  // leaves the chips — the readout of what is narrowing the list — exactly where they were.\n  const offersFilterPanel = hasFilters && filterPanel !== CollectionFilterPanelVisibility.HIDDEN;\n  const hasSort = !!sort && sort.sortFields.length > 0;\n  // Count ONLY the panel's own fields. `filterValues` also carries the promoted\n  // quick-filter field's value (it shares this state object) but that field is\n  // rendered as the tab strip, not in the panel/chips — counting it here would\n  // show \"Filters (1)\" for a selected quick-filter tab while the opened panel is\n  // empty. Scoping to `filterFields` keeps the badge in sync with the panel.\n  const activeFilterCount = countActiveFilters(filterValues, filterFields.map(f => f.fieldName));\n  const isSearchOpen = !!search && (searchExpanded || !!search.query);\n\n  return (\n    <div className={cn('flex flex-col gap-element-sm', className)} data-slot=\"collection-toolbar\">\n      {/* ── Quick-filter tab strip (promoted enum filter) — above the toolbar row ── */}\n      {quickFilter && (\n        <ResourceCollectionQuickFilterTabs\n          resourceType={resourceType}\n          field={quickFilter.field}\n          value={quickFilter.value}\n          onChange={quickFilter.onChange}\n        />\n      )}\n\n      {/* ── Preset pills — BELOW the exclusive tab strip and ABOVE the controls ──\n          The order is the meaning: the tabs say which slice of the collection this is, the pills\n          add named narrowings within it, and the toolbar row refines whatever those two leave. */}\n      {presetFilters && presetFilters.length > 0 && (\n        <ResourceCollectionFilterPresets\n          resourceType={resourceType}\n          presets={presetFilters}\n          currentFilters={filterValues}\n          onFiltersChange={onFiltersChange}\n        />\n      )}\n\n      <div className=\"flex flex-wrap items-center gap-element\">\n        {/* ── Refine cluster: search (always first) · filters · sort ──\n            Collapsed search is a REAL icon button, not a width-clipped input:\n            clipping a bordered InputRoot to icon width leaked a sheared slice of\n            the input box behind the icon (square corners, cut border). The\n            button expands to the field on click; the field keeps the animated\n            width while open and collapses back on empty-blur / Escape. */}\n        {search && !isSearchOpen && (\n          <Button\n            type=\"button\"\n            variant={ButtonVariants_Variant.GHOST}\n            size={ButtonSize.ICON}\n            onClick={() => setSearchExpanded(true)}\n            aria-label={searchPlaceholder}\n            data-slot=\"collection-toolbar-search-trigger\"\n          >\n            {renderIcon(StandardIconReference.SEARCH, { size: IconSize.SM })}\n          </Button>\n        )}\n        {search && isSearchOpen && (\n          <div\n            className={cn('overflow-hidden shrink-0 w-64 max-w-full', SEARCH_WIDTH_TRANSITION)}\n            data-state=\"open\"\n          >\n            <InlineSearchInput\n              query={search.query}\n              onChange={search.onChange}\n              onClear={search.onClear}\n              resourceType={resourceType}\n              autoFocus\n              onFocus={() => setSearchExpanded(true)}\n              onBlur={handleSearchBlur}\n              onKeyDown={handleSearchKeyDown}\n            />\n          </div>\n        )}\n\n        {offersFilterPanel && (\n          <ResourceLayout_FiltersTrigger\n            activeCount={activeFilterCount}\n            isExpanded={filtersExpanded}\n            onToggle={() => setFiltersExpanded(prev => !prev)}\n          />\n        )}\n\n        {hasSort && (\n          <ResourceLayout_SortControl\n            resourceType={resourceType}\n            sortFields={sort!.sortFields}\n            currentSorts={sort!.sortStates}\n            onSortChange={sort!.onSortChange}\n          />\n        )}\n\n        {/* ── Selection summary (leading, beside the refine controls) ──\n            \"N selected\" + clear. Local to this list; there is no global floating selection display.\n            The CLUSTER stays mounted at count 0 — it is nothing but an sr-only live region there,\n            and that region has to pre-exist the first selection or the 0→1 announcement is lost\n            (see `CollectionSelectionControls`). Only the DIVIDER is conditional, so an empty\n            selection does not draw a separator with nothing after it. */}\n        {selection && (\n          <>\n            {selection.count > 0 && <div className=\"h-5 w-px bg-border\" aria-hidden=\"true\" />}\n            <CollectionSelectionControls\n              count={selection.count}\n              onClear={selection.onClear}\n              {...(selection.matchAllOffer ? { matchAllOffer: selection.matchAllOffer } : {})}\n              {...(selection.isMatchAllSelected ? { isMatchAllSelected: true } : {})}\n            />\n          </>\n        )}\n\n        {/* ── View + act cluster (trailing) ── the bulk actions CONTEXTUALLY\n            replace the primary (Create) action while a selection is active. */}\n        {(viewMode || primaryAction || bulkActions || collectionActions) && (\n          <div className=\"flex items-center gap-element ms-auto\">\n            {viewMode && (\n              <ResourceViewModeToggle\n                viewMode={viewMode.viewMode}\n                onViewModeChange={viewMode.onViewModeChange}\n              />\n            )}\n            {/* Whole-scope maintenance actions (retry all / purge all) sit before\n                the create/bulk slot and are not swapped out by a selection. */}\n            {collectionActions}\n            {selection && selection.count > 0 && bulkActions ? bulkActions : primaryAction}\n          </div>\n        )}\n      </div>\n\n      {offersFilterPanel && filtersExpanded && (\n        <ResourceLayout_FiltersPanel\n          resourceType={resourceType}\n          filterFields={filterFields}\n          currentFilters={filterValues}\n          onFiltersChange={onFiltersChange}\n        />\n      )}\n\n      {hasFilters && (\n        <ResourceLayout_FilterChips\n          resourceType={resourceType}\n          filterFields={filterFields}\n          currentFilters={filterValues}\n          onFiltersChange={onFiltersChange}\n        />\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ResourceCollectionToolbar.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * ResourceCollectionToolbar — the shared, zoned control region for every resource\n * collection view (LIST cards, LIST table, SEARCH).\n *\n * Layout — TWO lines, and the second one changes meaning with the selection:\n *   [ status: segmented quick filter ]                                    ← which slice of the collection\n *   [ ☐ · search · filters · sort │ preset pills ] ──── [ view-mode · collection actions · Create ]\n *   [ filters panel (when expanded, full-width) ]\n *   [ active filter chips — only for filters nothing above already shows ]\n *\n * With rows selected, the action row BECOMES the selection bar:\n *   [ ☑ · \"2 selected\" · clear ] ─────────────────────── [ collection actions · bulk actions ]\n *\n * ## Why this shape (2026-09-30)\n *\n * The toolbar used to stack up to five independent bands — status tabs, preset pills, the\n * search/sort/actions row, chips, and a select-all band — each choosing its own control style.\n * Measured on Wonder Todos: 172px of controls before the first of two rows, 248px once two rows\n * were selected, and at 638px the \"N selected\" count and the bulk actions it drives wrapped onto\n * different lines because they lived in two different flex zones.\n *\n * - The PRESET PILLS sit in the refine row because they ARE refinements: the same row that holds\n *   search and sort, rather than a band of their own in a second visual language.\n * - The SELECT-ALL leads the row, inset into the rows' checkbox column (`CollectionSelectAllCheckbox`).\n * - A selection turns the row into the selection bar, and that row does NOT wrap: the count and the\n *   actions it drives stay on one line. When they do not fit, the bulk actions are drawn denser —\n *   icons, then the first two with the rest behind \"⋯\" — rather than dropping below the count\n *   (`collection-selection-bar-density`). The row's refine controls (search, filters, sort, presets),\n *   an open filters panel, view mode, whole-scope actions and Create step aside while it lasts: none\n *   of them acts on the selected rows. The quick filter above and the active-filter chips below stay;\n *   changing either redefines the rows, and the list then CLEARS the selection rather than leaving it\n *   on rows that moved. This is the contextual action bar of Gmail, GitHub and Material's top app bar.\n * - Every refine trigger is a bare (ghost) icon with a tooltip; labels belong to Create and to the\n *   bulk actions, the two places a person commits to something.\n *\n * Below a narrow container width (`NARROW_TOOLBAR_CONTAINER`), the pills take their own line at\n * the end of the row, and the quick filter becomes a select (see `ResourceCollectionQuickFilterTabs`).\n * A container query, not a viewport one: the same list renders in a full page and in a split pane.\n *\n * The search is an expand-on-focus field: collapsed it reads as a search icon\n * (icon-width), and it animates open to a full field when focused — the width\n * transition is driven by the theme motion tokens (`--motion-duration-*` /\n * `--motion-easing-*`) and respects `prefers-reduced-motion`, so any theme retunes\n * the speed/curve. Filters and sort sit beside it as compact icon controls.\n *\n * The total item count is intentionally NOT shown here — the pagination footer\n * owns the total (\"Showing X–Y of Z\") to keep a single source of truth.\n *\n * Presentational + slot-based: it owns only its own ephemeral UI state (search\n * expand, filters-panel expand). All data/state/handlers are supplied by the\n * collection host, so the same toolbar serves cards, table, and search.\n */\n\nimport React, { useCallback, useRef, useState } from 'react';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { FrontendComponentType, ButtonSize } from '@wildo-ai/presets-components-models';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useIconRegistry } from '~wildo-frontend-lib/core/icons/useIconRegistry';\nimport { StandardIconReference, IconSize } from '~wildo-frontend-lib/core/icons/icon-registry.frontend.schemas';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { InlineSearchInput } from './InlineSearchInput';\nimport {\n  ResourceLayout_FiltersTrigger,\n  ResourceLayout_FiltersPanel,\n  countActiveFilters,\n  type FilterFieldDefinition,\n  type FilterValues,\n} from './ResourceLayout_FiltersControl';\nimport { ResourceLayout_FilterChips } from './ResourceLayout_FilterChips';\nimport { ResourceCollectionQuickFilterTabs } from './ResourceCollectionQuickFilterTabs';\nimport { ResourceCollectionFilterPresets } from './ResourceCollectionFilterPresets';\nimport { ResourceLayout_SortControl, type SortState } from './ResourceLayout_SortControl';\nimport { ResourceViewModeToggle } from './ResourceViewModeToggle';\nimport { CollectionSelectionControls } from './CollectionSelectionControls';\nimport { CollectionSelectAllCheckbox, type CollectionSelectAllState } from './CollectionSelectAllCheckbox';\nimport { CollectionSelectionBarDensityProvider, SelectionBarBackgroundRunState, useMeasuredSelectionBarDensity, useSelectionBarBulkHost } from './collection-selection-bar-density';\nimport { CollectionDisplayMode, CollectionFilterPanelVisibility, type CollectionFilterPreset } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\n\n/**\n * Width transition for the expand-on-focus search field. Timing + curve come from\n * the theme motion tokens (so a theme retunes them); suppressed under\n * `prefers-reduced-motion` (the field still opens, just instantly).\n */\nconst SEARCH_WIDTH_TRANSITION =\n  'motion-safe:transition-[width] motion-safe:duration-[var(--motion-duration-normal)] motion-safe:ease-[var(--motion-easing-default)] motion-reduce:transition-none';\n\n/**\n * The toolbar's own container, named so the narrow-width rules below answer to the TOOLBAR's width,\n * not the viewport's: a list in a 380px split pane on a wide screen is narrow, the same list on a\n * full page is not.\n */\nconst TOOLBAR_CONTAINER_CLASS = '@container/collection-toolbar';\n/**\n * Below this toolbar width the preset pills leave the action row for a line of their own, and the\n * divider that separated them from the refine icons goes with them. 32rem is where the row's usual\n * contents (select-all, three icons, three pills, an export icon and Create) stop fitting on one line.\n */\nconst PRESETS_NARROW_CLASS = '@max-[32rem]/collection-toolbar:order-last @max-[32rem]/collection-toolbar:basis-full';\nconst PRESETS_DIVIDER_NARROW_CLASS = '@max-[32rem]/collection-toolbar:hidden';\n\n/**\n * The two meanings of the toolbar's action row, published as `data-mode` on it. Named because tests and\n * browser drives address the row by it, and a bare string pair has nowhere to say what each one means.\n */\nexport enum CollectionToolbarRowMode {\n  /** At rest: select-all, the refine controls and the pills, then view mode, collection actions and Create. */\n  REFINE = 'refine',\n  /** Rows selected: select-all, the count and clear, then the bulk actions. Nothing else. */\n  SELECTION = 'selection',\n}\n\nexport interface ResourceCollectionToolbarSearch {\n  query: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onClear: () => void;\n}\n\nexport interface ResourceCollectionToolbarSort {\n  sortFields: readonly string[];\n  /** Active sort rules, highest priority first (empty = no sorting). */\n  sortStates: readonly SortState[];\n  onSortChange: (sorts: SortState[]) => void;\n}\n\nexport interface ResourceCollectionToolbarViewMode {\n  viewMode: CollectionDisplayMode;\n  onViewModeChange: (mode: CollectionDisplayMode) => void;\n}\n\nexport interface ResourceCollectionToolbarSelection {\n  /** Number of currently-selected items. */\n  count: number;\n  /** Clear the whole selection. */\n  onClear: () => void;\n  /**\n   * Offered by the host when every row on the page is selected and the listing matches more rows\n   * than the page holds — see `CollectionSelectionControls`, which owns the wording and the rule\n   * about when it appears.\n   */\n  matchAllOffer?: { matchedCount: number; onSelectAllMatching: () => void };\n  /** True once the selection IS the query rather than a set of ticked rows. */\n  isMatchAllSelected?: boolean;\n}\n\n/**\n * The CARDS-mode select-all, rendered first in the action row (see `CollectionSelectAllCheckbox`).\n * Omit it in TABLE mode, where the table's own header cell is the select-all of its column.\n */\nexport interface ResourceCollectionToolbarSelectAll {\n  state: CollectionSelectAllState;\n  onToggle: () => void;\n}\n\nexport interface ResourceCollectionToolbarQuickFilter {\n  /** The promoted enum filter field (see `collectionDisplayConfig.quickFilterField`). */\n  field: FilterFieldDefinition;\n  /** Current filter value for the field — `undefined` = the \"All\" tab. */\n  value: string | undefined;\n  /** Set (or clear, with `undefined`) the promoted field's filter value. */\n  onChange: (value: string | undefined) => void;\n}\n\nexport interface ResourceCollectionToolbarProps {\n  /** Resource type for i18n label resolution. */\n  resourceType: string;\n  /**\n   * Quick-filter tab strip (\"All · <value> · …\") rendered above the toolbar\n   * row — a promoted enum filter that shares the collection's filter state.\n   * The host must EXCLUDE the promoted field from `filterFields` so the panel\n   * and the tabs never render competing controls for the same field.\n   */\n  quickFilter?: ResourceCollectionToolbarQuickFilter;\n  /**\n   * Named one-click narrowings, rendered as toggleable pills between the quick-filter tabs and the\n   * toolbar row. They share this toolbar's `filterValues`/`onFiltersChange`, so a pill and the\n   * filters panel are two views of one state and cannot disagree.\n   */\n  presetFilters?: readonly CollectionFilterPreset[];\n  /** Inline search state — omit to hide the search affordance entirely. */\n  search?: ResourceCollectionToolbarSearch;\n  /** Filter fields + state. Trigger/panel/chips are hidden when there are none. */\n  filterFields: readonly FilterFieldDefinition[];\n  /**\n   * Whether the \"Filters\" trigger and its panel are offered (see `collectionDisplayConfig.filterPanel`).\n   * Omitted means OFFERED. HIDDEN removes only the trigger and panel — the chips stay, so an active\n   * filter is never invisible.\n   */\n  filterPanel?: CollectionFilterPanelVisibility;\n  filterValues: FilterValues;\n  onFiltersChange: (filters: FilterValues) => void;\n  /**\n   * Sort state — omit to hide the toolbar sort control (e.g. TABLE mode, where\n   * sorting lives in the column headers).\n   */\n  sort?: ResourceCollectionToolbarSort;\n  /** View-mode toggle — omit when only one display is available. */\n  viewMode?: ResourceCollectionToolbarViewMode;\n  /** Primary action node (e.g. the Create button), placed at the trailing edge. */\n  primaryAction?: React.ReactNode;\n  /**\n   * Selection SUMMARY — omit for non-selectable collections. While a selection is active, the\n   * \"N selected\" + clear cluster leads the action row, which has become the selection bar.\n   */\n  selection?: ResourceCollectionToolbarSelection;\n  /** The cards-mode select-all, first in the action row. Omit in TABLE mode (its header cell selects). */\n  selectAll?: ResourceCollectionToolbarSelectAll;\n  /**\n   * Bulk-action node (the contextual bulk `ActionBar`). While a selection is active\n   * (`selection.count > 0`) the action row is the selection bar and this is the ONLY thing in its\n   * trailing zone — Create returns when the selection clears. It reads the bar's measured density from\n   * context, so it draws itself denser rather than wrapping. Local to this collection — there is no\n   * global/floating bulk bar.\n   */\n  bulkActions?: React.ReactNode;\n  /**\n   * Collection-scoped action node (e.g. the `ResourceLayout_CollectionActions`\n   * bar for whole-scope \"export\", \"retry all\" / \"purge all\"). Rendered in the trailing zone\n   * before the primary action. Collection actions target the whole scope, so they step aside\n   * while rows are selected, when the action row is the selection bar and every action on it\n   * must mean \"these rows\". Omit when the resource has no collection-scoped operations.\n   */\n  collectionActions?: React.ReactNode;\n  /** Additional CSS classes for the toolbar region. */\n  className?: string;\n}\n\nexport const ResourceCollectionToolbar = ({\n  resourceType,\n  quickFilter,\n  presetFilters,\n  search,\n  filterFields,\n  filterPanel = CollectionFilterPanelVisibility.OFFERED,\n  filterValues,\n  onFiltersChange,\n  sort,\n  viewMode,\n  primaryAction,\n  selection,\n  selectAll,\n  bulkActions,\n  collectionActions,\n  className,\n}: ResourceCollectionToolbarProps): React.JSX.Element => {\n  const [searchExpanded, setSearchExpanded] = useState(false);\n  const [filtersExpanded, setFiltersExpanded] = useState(false);\n  const { tComponent } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_LIST });\n  const { renderIcon } = useIconRegistry();\n  const searchPlaceholder = tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'searchPlaceholder');\n\n  const handleSearchBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n    // Collapse back to the icon only when leaving an EMPTY field — an active\n    // query keeps the field open so the filter stays obvious.\n    if (!e.currentTarget.value) setSearchExpanded(false);\n  }, []);\n\n  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Escape') {\n      search?.onClear();\n      setSearchExpanded(false);\n      e.currentTarget.blur();\n    }\n  }, [search]);\n\n  const hasFilters = filterFields.length > 0;\n  // The panel is a separate question from the chips: HIDDEN withdraws the trigger and the panel, and\n  // leaves the chips — the readout of what is narrowing the list — exactly where they were.\n  const offersFilterPanel = hasFilters && filterPanel !== CollectionFilterPanelVisibility.HIDDEN;\n  const hasSort = !!sort && sort.sortFields.length > 0;\n  // Count ONLY the panel's own fields. `filterValues` also carries the promoted\n  // quick-filter field's value (it shares this state object) but that field is\n  // rendered as the tab strip, not in the panel/chips — counting it here would\n  // show \"Filters (1)\" for a selected quick-filter tab while the opened panel is\n  // empty. Scoping to `filterFields` keeps the badge in sync with the panel.\n  const activeFilterCount = countActiveFilters(filterValues, filterFields.map(f => f.fieldName));\n  const isSearchOpen = !!search && (searchExpanded || !!search.query);\n\n  // The action row's two meanings. While rows are selected it is the selection bar: the row's refine\n  // controls, and an open filters panel whose trigger they include, step aside, and the bulk actions\n  // take Create's place. The panel keeps its open state and comes back when the selection ends.\n  const isSelecting = !!selection && selection.count > 0;\n  const hasPresets = !!presetFilters && presetFilters.length > 0;\n  // The selection bar never wraps: it measures, and draws the bulk actions denser until they fit\n  // beside the count (see `collection-selection-bar-density`).\n  const rowRef = useRef<HTMLDivElement>(null);\n  const bulkBar = useMeasuredSelectionBarDensity(rowRef, isSelecting);\n  // The bulk bar outlives the selection, because a background run it starts clears the selection and\n  // reports its progress afterwards (`useSelectionBarBulkHost`, #1461).\n  const bulkHost = useSelectionBarBulkHost(isSelecting);\n\n  return (\n    <div className={cn(TOOLBAR_CONTAINER_CLASS, 'flex flex-col gap-element-sm', className)} data-slot=\"collection-toolbar\">\n      {/* ── Line 1: the quick filter — which slice of the collection this is ── */}\n      {quickFilter && (\n        <ResourceCollectionQuickFilterTabs\n          resourceType={resourceType}\n          field={quickFilter.field}\n          value={quickFilter.value}\n          onChange={quickFilter.onChange}\n        />\n      )}\n\n      {/* ── Line 2: the action row — refine and act, or, with rows selected, the selection bar ── */}\n      <div\n        ref={rowRef}\n        className={cn('flex items-center gap-element', isSelecting ? 'flex-nowrap' : 'flex-wrap')}\n        data-slot=\"collection-toolbar-row\"\n        data-mode={isSelecting ? CollectionToolbarRowMode.SELECTION : CollectionToolbarRowMode.REFINE}\n      >\n        {selectAll && <CollectionSelectAllCheckbox state={selectAll.state} onToggle={selectAll.onToggle} />}\n\n        {!isSelecting && (\n          <>\n            {/* Collapsed search is a REAL icon button, not a width-clipped input: clipping a bordered\n                InputRoot to icon width leaked a sheared slice of the input box behind the icon. The\n                button expands to the field on click; the field keeps the animated width while open and\n                collapses back on empty-blur / Escape. */}\n            {search && !isSearchOpen && (\n              <Button\n                type=\"button\"\n                variant={ButtonVariants_Variant.GHOST}\n                size={ButtonSize.ICON_SM}\n                onClick={() => setSearchExpanded(true)}\n                aria-label={searchPlaceholder}\n                title={searchPlaceholder}\n                data-slot=\"collection-toolbar-search-trigger\"\n              >\n                {renderIcon(StandardIconReference.SEARCH, { size: IconSize.SM })}\n              </Button>\n            )}\n            {search && isSearchOpen && (\n              <div\n                className={cn('overflow-hidden shrink-0 w-64 max-w-full', SEARCH_WIDTH_TRANSITION)}\n                data-state=\"open\"\n              >\n                <InlineSearchInput\n                  query={search.query}\n                  onChange={search.onChange}\n                  onClear={search.onClear}\n                  resourceType={resourceType}\n                  autoFocus\n                  onFocus={() => setSearchExpanded(true)}\n                  onBlur={handleSearchBlur}\n                  onKeyDown={handleSearchKeyDown}\n                />\n              </div>\n            )}\n\n            {offersFilterPanel && (\n              <ResourceLayout_FiltersTrigger\n                activeCount={activeFilterCount}\n                isExpanded={filtersExpanded}\n                onToggle={() => setFiltersExpanded(prev => !prev)}\n              />\n            )}\n\n            {hasSort && (\n              <ResourceLayout_SortControl\n                resourceType={resourceType}\n                sortFields={sort!.sortFields}\n                currentSorts={sort!.sortStates}\n                onSortChange={sort!.onSortChange}\n              />\n            )}\n\n            {/* ── Preset pills — refinements, so they sit with the refine controls. Their own line\n                below a narrow container, at the END of the row so Create keeps its place. ── */}\n            {hasPresets && (\n              <>\n                <div className={cn('h-5 w-px bg-border', PRESETS_DIVIDER_NARROW_CLASS)} aria-hidden=\"true\" />\n                <ResourceCollectionFilterPresets\n                  resourceType={resourceType}\n                  presets={presetFilters!}\n                  currentFilters={filterValues}\n                  onFiltersChange={onFiltersChange}\n                  className={PRESETS_NARROW_CLASS}\n                />\n              </>\n            )}\n          </>\n        )}\n\n        {/* ── Selection summary: \"N selected\" + clear, leading the selection bar ──\n            The cluster stays mounted at count 0: it is nothing but an sr-only live region there, and\n            that region has to pre-exist the first selection or the 0→1 announcement is lost (see\n            `CollectionSelectionControls`). */}\n        {selection && (\n          <CollectionSelectionControls\n            className=\"shrink-0\"\n            count={selection.count}\n            onClear={selection.onClear}\n            {...(selection.matchAllOffer ? { matchAllOffer: selection.matchAllOffer } : {})}\n            {...(selection.isMatchAllSelected ? { isMatchAllSelected: true } : {})}\n          />\n        )}\n\n        {/* ── Act cluster (trailing): view mode and Create at rest; the bulk actions while selecting ── */}\n        {(viewMode || primaryAction || bulkActions || collectionActions) && (\n          <div className=\"flex min-w-0 items-center gap-element ms-auto\">\n            {viewMode && !isSelecting && (\n              <ResourceViewModeToggle\n                viewMode={viewMode.viewMode}\n                onViewModeChange={viewMode.onViewModeChange}\n              />\n            )}\n            {/* Whole-scope actions (export the listing, retry all / purge all) sit before Create, and\n                step aside while rows are selected: beside the bulk actions a whole-scope \"export\"\n                reads as \"export these\", which it is not. Measured on Wonder Todos (2026-09-30): the\n                collection export's bare icon led the selection bar's labelled bulk actions. */}\n            {!isSelecting && collectionActions}\n            {/* While selecting, ONLY the bulk actions — never Create, which acts on no row. When no\n                bulk action applies to the selection the bar holds just the count and clear, which is\n                the true answer to \"what can I do with these?\". */}\n            {/* The bulk bar stays mounted once a selection has been made: at rest it draws nothing, and\n                while a background run it started is working it draws the progress in Create's place. */}\n            {bulkActions && bulkHost.isBulkBarMounted && (\n              <CollectionSelectionBarDensityProvider\n                density={bulkBar.density}\n                onActionSetChange={bulkBar.reportActionSet}\n                onBackgroundRunChange={bulkHost.onBackgroundRunChange}\n              >\n                {bulkActions}\n              </CollectionSelectionBarDensityProvider>\n            )}\n            {!isSelecting && bulkHost.backgroundRunState !== SelectionBarBackgroundRunState.WORKING && primaryAction}\n          </div>\n        )}\n      </div>\n\n      {offersFilterPanel && filtersExpanded && !isSelecting && (\n        <ResourceLayout_FiltersPanel\n          resourceType={resourceType}\n          filterFields={filterFields}\n          currentFilters={filterValues}\n          onFiltersChange={onFiltersChange}\n        />\n      )}\n\n      {hasFilters && (\n        <ResourceLayout_FilterChips\n          resourceType={resourceType}\n          filterFields={filterFields}\n          currentFilters={filterValues}\n          onFiltersChange={onFiltersChange}\n          {...(presetFilters ? { presetFilters } : {})}\n        />\n      )}\n    </div>\n  );\n};\n"]}

package/dist/esm/components/resources/ResourceInPlaceOperationRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceInPlaceOperationRow.d.ts","sourceRoot":"","sources":["../../../../src/components/resources/ResourceInPlaceOperationRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AAI7F,MAAM,WAAW,gCAAgC;IAC/C,cAAc,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,cAAc,EACd,SAAS,GACV,EAAE,gCAAgC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA6B7D"}
+{"version":3,"file":"ResourceInPlaceOperationRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceInPlaceOperationRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AAI7F,MAAM,WAAW,gCAAgC;IAC/C,cAAc,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,cAAc,EACd,SAAS,GACV,EAAE,gCAAgC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA6B7D"}

package/dist/esm/components/resources/ResourceLayout_Action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceLayout_Action.d.ts","sourceRoot":"","sources":["../../../../src/components/resources/ResourceLayout_Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,kFAAkF,CAAC;AASxH,OAAO,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AAI/F,MAAM,WAAW,wCAAyC,SAAQ,wBAAwB;CAAG;AAE7F;;;;;GAKG;AACH,eAAO,MAAM,mCAAmC,GAAI,2DAIjD,wCAAwC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAoBjE,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,wCAAwC,GAAG,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAU9I"}
+{"version":3,"file":"ResourceLayout_Action.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceLayout_Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,kFAAkF,CAAC;AASxH,OAAO,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AAI/F,MAAM,WAAW,wCAAyC,SAAQ,wBAAwB;CAAG;AAE7F;;;;;GAKG;AACH,eAAO,MAAM,mCAAmC,GAAI,2DAIjD,wCAAwC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAoBjE,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,wCAAwC,GAAG,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAU9I"}

package/dist/esm/components/resources/ResourceLayout_Action.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceLayout_Action.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/resources/ResourceLayout_Action.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM1I,eAAO,MAAM,4BAA4B,EAAE,mBAAmB,EAsB7D,CAAC"}
+{"version":3,"file":"ResourceLayout_Action.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceLayout_Action.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM1I,eAAO,MAAM,4BAA4B,EAAE,mBAAmB,EA2B7D,CAAC"}

package/dist/esm/components/resources/ResourceLayout_Action.labels.js

@@ -19,6 +19,11 @@ export const ResourcesLayoutsActionLabels = [
         purpose: 'In-flight status label shown while a named action is executing',
         params: [{ key: 'actionLabel', meaning: 'human-readable name of the action being executed' }],
     },
+    {
+        ref: 'operationSentForApproval',
+        kind: LabelKind.MESSAGE,
+        purpose: 'Told to someone whose action now WAITS for another person\'s approval: nothing has changed yet, and it applies only when someone allowed to approve it does. Must not read as a completed or a refused action',
+    },
     {
         ref: 'executionFailed',
         kind: LabelKind.MESSAGE,

package/dist/esm/components/resources/ResourceLayout_Action.labels.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceLayout_Action.labels.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceLayout_Action.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAA4B,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE1I,2EAA2E;AAC3E,6EAA6E;AAC7E,+EAA+E;AAE/E,MAAM,CAAC,MAAM,4BAA4B,GAA0B;IACjE;QACE,GAAG,EAAE,gBAAgB;QACrB,IAAI,EAAE,SAAS,CAAC,OAAO;QACvB,OAAO,EAAE,uFAAuF;KACjG;IACD;QACE,GAAG,EAAE,WAAW;QAChB,IAAI,EAAE,SAAS,CAAC,MAAM;QACtB,OAAO,EAAE,oEAAoE;KAC9E;IACD;QACE,GAAG,EAAE,eAAe;QACpB,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,gEAAgE;QACzE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,aAAa,EAAE,OAAO,EAAE,kDAAkD,EAAE,CAAC;KAC9F;IACD;QACE,GAAG,EAAE,iBAAiB;QACtB,IAAI,EAAE,SAAS,CAAC,OAAO;QACvB,OAAO,EAAE,gEAAgE;KAC1E;CACF,CAAC;AACF,uBAAuB,CAAC,qBAAqB,CAAC,wBAAwB,EAAE,4BAA4B,CAAC,CAAC","sourcesContent":["import { FrontendComponentType, LabelKind, type LabellingUnitaryDef, registerComponentLabels } from '@wildo-ai/presets-components-models';\n\n// Companion-only label metadata for this component: keys + params + (where\n// authored) per-key purpose / kind / variable meaning. Statically scanned by\n// the dev companion; NOT imported at runtime, so it never ships in the bundle.\n\nexport const ResourcesLayoutsActionLabels: LabellingUnitaryDef[] = [\n  {\n    ref: 'confirmMessage',\n    kind: LabelKind.MESSAGE,\n    purpose: 'Confirmation prompt shown before running an operation that carries no request payload',\n  },\n  {\n    ref: 'runAction',\n    kind: LabelKind.BUTTON,\n    purpose: 'Generic fallback trigger label for a zero-input resource operation',\n  },\n  {\n    ref: 'runningAction',\n    kind: LabelKind.LABEL,\n    purpose: 'In-flight status label shown while a named action is executing',\n    params: [{ key: 'actionLabel', meaning: 'human-readable name of the action being executed' }],\n  },\n  {\n    ref: 'executionFailed',\n    kind: LabelKind.MESSAGE,\n    purpose: 'Fallback error message when a resource action fails at runtime',\n  },\n];\nregisterComponentLabels(FrontendComponentType.RESOURCES_LAYOUTS_ACTION, ResourcesLayoutsActionLabels);\n"]}
+{"version":3,"file":"ResourceLayout_Action.labels.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceLayout_Action.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAA4B,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE1I,2EAA2E;AAC3E,6EAA6E;AAC7E,+EAA+E;AAE/E,MAAM,CAAC,MAAM,4BAA4B,GAA0B;IACjE;QACE,GAAG,EAAE,gBAAgB;QACrB,IAAI,EAAE,SAAS,CAAC,OAAO;QACvB,OAAO,EAAE,uFAAuF;KACjG;IACD;QACE,GAAG,EAAE,WAAW;QAChB,IAAI,EAAE,SAAS,CAAC,MAAM;QACtB,OAAO,EAAE,oEAAoE;KAC9E;IACD;QACE,GAAG,EAAE,eAAe;QACpB,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,gEAAgE;QACzE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,aAAa,EAAE,OAAO,EAAE,kDAAkD,EAAE,CAAC;KAC9F;IACD;QACE,GAAG,EAAE,0BAA0B;QAC/B,IAAI,EAAE,SAAS,CAAC,OAAO;QACvB,OAAO,EAAE,+MAA+M;KACzN;IACD;QACE,GAAG,EAAE,iBAAiB;QACtB,IAAI,EAAE,SAAS,CAAC,OAAO;QACvB,OAAO,EAAE,gEAAgE;KAC1E;CACF,CAAC;AACF,uBAAuB,CAAC,qBAAqB,CAAC,wBAAwB,EAAE,4BAA4B,CAAC,CAAC","sourcesContent":["import { FrontendComponentType, LabelKind, type LabellingUnitaryDef, registerComponentLabels } from '@wildo-ai/presets-components-models';\n\n// Companion-only label metadata for this component: keys + params + (where\n// authored) per-key purpose / kind / variable meaning. Statically scanned by\n// the dev companion; NOT imported at runtime, so it never ships in the bundle.\n\nexport const ResourcesLayoutsActionLabels: LabellingUnitaryDef[] = [\n  {\n    ref: 'confirmMessage',\n    kind: LabelKind.MESSAGE,\n    purpose: 'Confirmation prompt shown before running an operation that carries no request payload',\n  },\n  {\n    ref: 'runAction',\n    kind: LabelKind.BUTTON,\n    purpose: 'Generic fallback trigger label for a zero-input resource operation',\n  },\n  {\n    ref: 'runningAction',\n    kind: LabelKind.LABEL,\n    purpose: 'In-flight status label shown while a named action is executing',\n    params: [{ key: 'actionLabel', meaning: 'human-readable name of the action being executed' }],\n  },\n  {\n    ref: 'operationSentForApproval',\n    kind: LabelKind.MESSAGE,\n    purpose: 'Told to someone whose action now WAITS for another person\\'s approval: nothing has changed yet, and it applies only when someone allowed to approve it does. Must not read as a completed or a refused action',\n  },\n  {\n    ref: 'executionFailed',\n    kind: LabelKind.MESSAGE,\n    purpose: 'Fallback error message when a resource action fails at runtime',\n  },\n];\nregisterComponentLabels(FrontendComponentType.RESOURCES_LAYOUTS_ACTION, ResourcesLayoutsActionLabels);\n"]}