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

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

@@ -14,12 +14,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * ## Why a toggle GROUP rather than N buttons
  *
  * `ToggleGroup` in `MULTIPLE` mode already answers everything a pill row needs and the framework
- * already owns it: pressed state through `data-state=on` (so every theme's `selected` recipe
- * applies — including the one that had to be made distinguishable from `hover`) and roving focus
- * with arrow keys. A hand-rolled row of `<button aria-pressed>` would be more code answering fewer
+ * already owns it: pressed state through `data-state=on` (so every theme's `selectable.chip`
+ * selected state applies, with the check mark the group draws on a chip that is on) and roving
+ * focus with arrow keys. A hand-rolled row of `<button aria-pressed>` would be more code answering fewer
  * of those questions.
  *
- * It renders with `ToggleGroupAppearance.PILLS` — separate, fully-rounded chips — and not as the
+ * It renders with `ToggleGroupAppearance.CHIPS` — separate chips — and not as the
  * group's default SEGMENTED control. The first version used the segmented look, and the row read
  * as ONE three-way choice, which is the wrong promise for narrowings meant to combine.
  *
@@ -33,8 +33,8 @@ import { FrontendComponentType, ButtonSize } from '@wildo-ai/presets-components-
 import { DisplayDirection } from '@wildo-ai/zod-decorators';
 import { useI18n } from '../../core/i18n/useI18n.js';
 import { ToggleGroup, ToggleGroupAppearance, ToggleGroupItem, ToggleGroupType } from '../../components/form/controls/enum/toggle-group.js';
-import { ToggleVariants_Variant } from '../../components/form/controls/boolean/toggle.js';
-import { isCollectionFilterPresetActive, toggleCollectionFilterPreset, } from '../../core/resources/collection-filter-presets.frontend.utils.js';
+import { isCollectionFilterPresetActive, isCollectionFilterPresetAvailable, toggleCollectionFilterPreset, } from '../../core/resources/collection-filter-presets.frontend.utils.js';
+import { useCollectionFilterPresetScope } from '../../core/resources/useCollectionFilterPresetScope.js';
 export const ResourceCollectionFilterPresets = ({ resourceType, presets, currentFilters, onFiltersChange, className, }) => {
     const { tResourceFilterPreset } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_FILTERS });
     /*
@@ -44,12 +44,19 @@ export const ResourceCollectionFilterPresets = ({ resourceType, presets, current
      * re-renders on every filter change anyway.
      */
     const now = new Date();
-    const activeRefs = useMemo(() => presets.filter((preset) => isCollectionFilterPresetActive(preset, currentFilters, now)).map((preset) => preset.ref), 
+    /*
+     * The reader's resolved zone and the resource's calendar-day fields, which decide each window (#2180), and who is
+     * looking, which decides a context value such as "assigned to me" (#2511). A preset naming one is disabled for a
+     * viewer it cannot be resolved for, never applied without that field. The chips row reads the same scope, so the
+     * two agree on whether "Mine" is on.
+     */
+    const scope = useCollectionFilterPresetScope(resourceType);
+    const activeRefs = useMemo(() => presets.filter((preset) => isCollectionFilterPresetActive(preset, currentFilters, { now, ...scope })).map((preset) => preset.ref), 
     // `now` is intentionally absent: it changes identity every render, which would defeat the memo
     // entirely. What decides activeness is the filter values and the declared presets; the instant
     // only matters at the granularity of a day, and a filter change re-runs this anyway.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [presets, currentFilters]);
+    [presets, currentFilters, scope]);
     const handleValueChange = useCallback((next) => {
         const nextRefs = Array.isArray(next) ? next : [next];
         /*
@@ -65,17 +72,17 @@ export const ResourceCollectionFilterPresets = ({ resourceType, presets, current
         const preset = presets.find((candidate) => candidate.ref === changedRef);
         if (!preset)
             return;
-        onFiltersChange(toggleCollectionFilterPreset(preset, currentFilters, new Date()));
-    }, [activeRefs, presets, currentFilters, onFiltersChange]);
+        onFiltersChange(toggleCollectionFilterPreset(preset, currentFilters, { now: new Date(), ...scope }));
+    }, [activeRefs, presets, currentFilters, onFiltersChange, scope]);
     if (presets.length === 0)
         return null;
     return (_jsx(ToggleGroup, { type: ToggleGroupType.MULTIPLE, 
-        // PILLS, not segments: presets are ADDITIVE narrowings that combine in any subset, and a
+        // CHIPS, not segments: presets are ADDITIVE narrowings that combine in any subset, and a
         // segmented bar reads as a single three-way choice — which is how the first version of this
         // row looked, and exactly the wrong promise for filters that are meant to stack.
-        appearance: ToggleGroupAppearance.PILLS, value: activeRefs, onValueChange: handleValueChange, variant: ToggleVariants_Variant.OUTLINE, size: ButtonSize.SM, orientation: DisplayDirection.HORIZONTAL, className: className, "data-slot": "collection-filter-presets", children: presets.map((preset) => {
+        appearance: ToggleGroupAppearance.CHIPS, value: activeRefs, onValueChange: handleValueChange, size: ButtonSize.SM, orientation: DisplayDirection.HORIZONTAL, className: className, "data-slot": "collection-filter-presets", children: presets.map((preset) => {
             const label = tResourceFilterPreset(resourceType, preset.ref, 'label');
-            return (_jsx(ToggleGroupItem, { value: preset.ref, variant: ToggleVariants_Variant.OUTLINE, size: ButtonSize.SM, "data-preset": preset.ref, children: label }, preset.ref));
+            return (_jsx(ToggleGroupItem, { value: preset.ref, size: ButtonSize.SM, "data-preset": preset.ref, disabled: !isCollectionFilterPresetAvailable(preset, scope.viewer), children: label }, preset.ref));
         }) }));
 };
 //# sourceMappingURL=ResourceCollectionFilterPresets.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResourceCollectionFilterPresets.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionFilterPresets.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * ResourceCollectionFilterPresets — the row of named one-click narrowings (\"Urgent\", \"Created\n * today\", \"Unassigned\") a collection offers above its list.\n *\n * ## It is a PRESENTATION of the collection's filter state, not a second filtering mechanism\n *\n * Every pill writes into the SAME `FilterValues` record the filters panel and the chips read, so a\n * preset filters server-side exactly like the panel control it stands in for, and its ON/OFF is\n * DERIVED by reading that record back rather than stored beside it. Clear a chip and the pill goes\n * off; set the same value by hand in the panel and the pill comes on. There is no state here that\n * can disagree with the list.\n *\n * ## Why a toggle GROUP rather than N buttons\n *\n * `ToggleGroup` in `MULTIPLE` mode already answers everything a pill row needs and the framework\n * already owns it: pressed state through `data-state=on` (so every theme's `selected` recipe\n * applies — including the one that had to be made distinguishable from `hover`) and roving focus\n * with arrow keys. A hand-rolled row of `<button aria-pressed>` would be more code answering fewer\n * of those questions.\n *\n * It renders with `ToggleGroupAppearance.PILLS` — separate, fully-rounded chips — and not as the\n * group's default SEGMENTED control. The first version used the segmented look, and the row read\n * as ONE three-way choice, which is the wrong promise for narrowings meant to combine.\n *\n * ## Labels\n *\n * `resources.<resourceType>.filterPresets.<ref>.label`. A preset with no authored label renders its\n * raw `ref` — a missing label must LOOK missing, or nobody ever authors it.\n */\n\nimport React, { useCallback, useMemo } from 'react';\nimport { FrontendComponentType, ButtonSize } from '@wildo-ai/presets-components-models';\nimport { DisplayDirection } from '@wildo-ai/zod-decorators';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { ToggleGroup, ToggleGroupAppearance, ToggleGroupItem, ToggleGroupType } from '~wildo-frontend-lib/components/form/controls/enum/toggle-group';\nimport { ToggleVariants_Variant } from '~wildo-frontend-lib/components/form/controls/boolean/toggle';\nimport type { CollectionFilterPreset } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\nimport {\n  isCollectionFilterPresetActive,\n  toggleCollectionFilterPreset,\n} from '~wildo-frontend-lib/core/resources/collection-filter-presets.frontend.utils';\nimport type { FilterValues } from './ResourceLayout_FiltersControl';\n\nexport interface ResourceCollectionFilterPresetsProps {\n  /** Resource type for i18n label resolution. */\n  resourceType: string;\n  /** The declared presets, in authoring order. */\n  presets: readonly CollectionFilterPreset[];\n  /** The collection's current filter values — the single source these pills read and write. */\n  currentFilters: FilterValues;\n  /** Replace the collection's filter values. */\n  onFiltersChange: (filters: FilterValues) => void;\n  className?: string;\n}\n\nexport const ResourceCollectionFilterPresets = ({\n  resourceType,\n  presets,\n  currentFilters,\n  onFiltersChange,\n  className,\n}: ResourceCollectionFilterPresetsProps): React.JSX.Element | null => {\n  const { tResourceFilterPreset } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_FILTERS });\n\n  /*\n   * ONE instant for the whole render, so two relative presets resolved in the same pass cannot\n   * straddle midnight and disagree about which day it is. Recomputed on every render rather than\n   * memoized on purpose: a memo keyed on nothing would freeze \"today\" at mount, and this component\n   * re-renders on every filter change anyway.\n   */\n  const now = new Date();\n\n  const activeRefs = useMemo(\n    () => presets.filter((preset) => isCollectionFilterPresetActive(preset, currentFilters, now)).map((preset) => preset.ref),\n    // `now` is intentionally absent: it changes identity every render, which would defeat the memo\n    // entirely. What decides activeness is the filter values and the declared presets; the instant\n    // only matters at the granularity of a day, and a filter change re-runs this anyway.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [presets, currentFilters],\n  );\n\n  const handleValueChange = useCallback((next: string | string[]) => {\n    const nextRefs = Array.isArray(next) ? next : [next];\n    /*\n     * The group reports the WHOLE pressed set, but exactly one pill changed — and applying the set\n     * wholesale would be wrong: two presets can assign the same field, so replaying both in\n     * authoring order would let the loser silently overwrite the one just clicked. Finding the\n     * single difference and toggling THAT keeps one click meaning one change.\n     */\n        const changedRef = nextRefs.find((ref) => !activeRefs.includes(ref))\n      ?? activeRefs.find((ref) => !nextRefs.includes(ref));\n    if (!changedRef) return;\n\n    const preset = presets.find((candidate) => candidate.ref === changedRef);\n    if (!preset) return;\n\n    onFiltersChange(toggleCollectionFilterPreset(preset, currentFilters, new Date()) as FilterValues);\n  }, [activeRefs, presets, currentFilters, onFiltersChange]);\n\n  if (presets.length === 0) return null;\n\n  return (\n    <ToggleGroup\n      type={ToggleGroupType.MULTIPLE}\n      // PILLS, not segments: presets are ADDITIVE narrowings that combine in any subset, and a\n      // segmented bar reads as a single three-way choice — which is how the first version of this\n      // row looked, and exactly the wrong promise for filters that are meant to stack.\n      appearance={ToggleGroupAppearance.PILLS}\n      value={activeRefs}\n      onValueChange={handleValueChange}\n      variant={ToggleVariants_Variant.OUTLINE}\n      size={ButtonSize.SM}\n      orientation={DisplayDirection.HORIZONTAL}\n      className={className}\n      data-slot=\"collection-filter-presets\"\n    >\n      {presets.map((preset) => {\n        const label = tResourceFilterPreset(resourceType, preset.ref, 'label');\n        return (\n          <ToggleGroupItem\n            key={preset.ref}\n            value={preset.ref}\n            variant={ToggleVariants_Variant.OUTLINE}\n            size={ButtonSize.SM}\n            data-preset={preset.ref}\n          >\n            {label}\n          </ToggleGroupItem>\n        );\n      })}\n    </ToggleGroup>\n  );\n};\n"]}
+{"version":3,"file":"ResourceCollectionFilterPresets.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionFilterPresets.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * ResourceCollectionFilterPresets — the row of named one-click narrowings (\"Urgent\", \"Created\n * today\", \"Unassigned\") a collection offers above its list.\n *\n * ## It is a PRESENTATION of the collection's filter state, not a second filtering mechanism\n *\n * Every pill writes into the SAME `FilterValues` record the filters panel and the chips read, so a\n * preset filters server-side exactly like the panel control it stands in for, and its ON/OFF is\n * DERIVED by reading that record back rather than stored beside it. Clear a chip and the pill goes\n * off; set the same value by hand in the panel and the pill comes on. There is no state here that\n * can disagree with the list.\n *\n * ## Why a toggle GROUP rather than N buttons\n *\n * `ToggleGroup` in `MULTIPLE` mode already answers everything a pill row needs and the framework\n * already owns it: pressed state through `data-state=on` (so every theme's `selectable.chip`\n * selected state applies, with the check mark the group draws on a chip that is on) and roving\n * focus with arrow keys. A hand-rolled row of `<button aria-pressed>` would be more code answering fewer\n * of those questions.\n *\n * It renders with `ToggleGroupAppearance.CHIPS` — separate chips — and not as the\n * group's default SEGMENTED control. The first version used the segmented look, and the row read\n * as ONE three-way choice, which is the wrong promise for narrowings meant to combine.\n *\n * ## Labels\n *\n * `resources.<resourceType>.filterPresets.<ref>.label`. A preset with no authored label renders its\n * raw `ref` — a missing label must LOOK missing, or nobody ever authors it.\n */\n\nimport React, { useCallback, useMemo } from 'react';\nimport { FrontendComponentType, ButtonSize } from '@wildo-ai/presets-components-models';\nimport { DisplayDirection } from '@wildo-ai/zod-decorators';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { ToggleGroup, ToggleGroupAppearance, ToggleGroupItem, ToggleGroupType } from '~wildo-frontend-lib/components/form/controls/enum/toggle-group';\nimport type { CollectionFilterPreset } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\nimport {\n  isCollectionFilterPresetActive,\n  isCollectionFilterPresetAvailable,\n  toggleCollectionFilterPreset,\n} from '~wildo-frontend-lib/core/resources/collection-filter-presets.frontend.utils';\nimport type { FilterValues } from './ResourceLayout_FiltersControl';\nimport { useCollectionFilterPresetScope } from '~wildo-frontend-lib/core/resources/useCollectionFilterPresetScope';\n\nexport interface ResourceCollectionFilterPresetsProps {\n  /** Resource type for i18n label resolution. */\n  resourceType: string;\n  /** The declared presets, in authoring order. */\n  presets: readonly CollectionFilterPreset[];\n  /** The collection's current filter values — the single source these pills read and write. */\n  currentFilters: FilterValues;\n  /** Replace the collection's filter values. */\n  onFiltersChange: (filters: FilterValues) => void;\n  className?: string;\n}\n\nexport const ResourceCollectionFilterPresets = ({\n  resourceType,\n  presets,\n  currentFilters,\n  onFiltersChange,\n  className,\n}: ResourceCollectionFilterPresetsProps): React.JSX.Element | null => {\n  const { tResourceFilterPreset } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_FILTERS });\n\n  /*\n   * ONE instant for the whole render, so two relative presets resolved in the same pass cannot\n   * straddle midnight and disagree about which day it is. Recomputed on every render rather than\n   * memoized on purpose: a memo keyed on nothing would freeze \"today\" at mount, and this component\n   * re-renders on every filter change anyway.\n   */\n  const now = new Date();\n\n  /*\n   * The reader's resolved zone and the resource's calendar-day fields, which decide each window (#2180), and who is\n   * looking, which decides a context value such as \"assigned to me\" (#2511). A preset naming one is disabled for a\n   * viewer it cannot be resolved for, never applied without that field. The chips row reads the same scope, so the\n   * two agree on whether \"Mine\" is on.\n   */\n  const scope = useCollectionFilterPresetScope(resourceType);\n\n  const activeRefs = useMemo(\n    () => presets.filter((preset) => isCollectionFilterPresetActive(preset, currentFilters, { now, ...scope })).map((preset) => preset.ref),\n    // `now` is intentionally absent: it changes identity every render, which would defeat the memo\n    // entirely. What decides activeness is the filter values and the declared presets; the instant\n    // only matters at the granularity of a day, and a filter change re-runs this anyway.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [presets, currentFilters, scope],\n  );\n\n  const handleValueChange = useCallback((next: string | string[]) => {\n    const nextRefs = Array.isArray(next) ? next : [next];\n    /*\n     * The group reports the WHOLE pressed set, but exactly one pill changed — and applying the set\n     * wholesale would be wrong: two presets can assign the same field, so replaying both in\n     * authoring order would let the loser silently overwrite the one just clicked. Finding the\n     * single difference and toggling THAT keeps one click meaning one change.\n     */\n        const changedRef = nextRefs.find((ref) => !activeRefs.includes(ref))\n      ?? activeRefs.find((ref) => !nextRefs.includes(ref));\n    if (!changedRef) return;\n\n    const preset = presets.find((candidate) => candidate.ref === changedRef);\n    if (!preset) return;\n\n    onFiltersChange(toggleCollectionFilterPreset(preset, currentFilters, { now: new Date(), ...scope }) as FilterValues);\n  }, [activeRefs, presets, currentFilters, onFiltersChange, scope]);\n\n  if (presets.length === 0) return null;\n\n  return (\n    <ToggleGroup\n      type={ToggleGroupType.MULTIPLE}\n      // CHIPS, not segments: presets are ADDITIVE narrowings that combine in any subset, and a\n      // segmented bar reads as a single three-way choice — which is how the first version of this\n      // row looked, and exactly the wrong promise for filters that are meant to stack.\n      appearance={ToggleGroupAppearance.CHIPS}\n      value={activeRefs}\n      onValueChange={handleValueChange}\n      size={ButtonSize.SM}\n      orientation={DisplayDirection.HORIZONTAL}\n      className={className}\n      data-slot=\"collection-filter-presets\"\n    >\n      {presets.map((preset) => {\n        const label = tResourceFilterPreset(resourceType, preset.ref, 'label');\n        return (\n          <ToggleGroupItem\n            key={preset.ref}\n            value={preset.ref}\n            size={ButtonSize.SM}\n            data-preset={preset.ref}\n            disabled={!isCollectionFilterPresetAvailable(preset, scope.viewer)}\n          >\n            {label}\n          </ToggleGroupItem>\n        );\n      })}\n    </ToggleGroup>\n  );\n};\n"]}

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

@@ -1,7 +1,8 @@
 /**
- * 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

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

@@ -1 +1 @@
-{"version":3,"file":"ResourceCollectionQuickFilterTabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionQuickFilterTabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAK3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAS7E,MAAM,WAAW,sCAAsC;IACrD,+CAA+C;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,KAAK,EAAE,qBAAqB,CAAC;IAC7B,8EAA8E;IAC9E,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,iEAAiE;IACjE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iCAAiC,GAAI,sDAM/C,sCAAsC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAqD/D,CAAC"}
+{"version":3,"file":"ResourceCollectionQuickFilterTabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionQuickFilterTabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAO3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAgC7E,MAAM,WAAW,sCAAsC;IACrD,+CAA+C;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,KAAK,EAAE,qBAAqB,CAAC;IAC7B,8EAA8E;IAC9E,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,iEAAiE;IACjE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iCAAiC,GAAI,sDAM/C,sCAAsC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IA0E/D,CAAC"}

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

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