@12-apps/ui 6.66.2 → 6.68.0

package/src/components/data-display/DataViews/data-views-grid-parts.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { TableFilter } from "../../layout/TableFilter";
 import { Stack } from "../../../mui/Stack";
@@ -21,15 +21,18 @@ import { ShellToolbar } from "./data-views-shell-toolbar";
 import type { DisplayPanelView } from "./data-views-display-panel";
 import type { DataViewExport } from "./data-views-export";
 import { useDataViewsCopy } from "./data-views-copy-context";
-import { DataViewsEmpty } from "./data-views-empty";
+import { ShellEmpty } from "./data-views-empty";
 import { DataViewsPagination } from "./data-views-pagination";
 import type { BoardConfig } from "./DataViewsBoard";
 import { type ScopeConfig } from "./data-views-scopes";
 import { ScopeTabsSlot } from "./data-views-scope-tabs";
+import { SHELL_PROPS, useStickyBarTop } from "./data-views-sticky-head";
 import { togglePillValues } from "./data-views-grid-helpers";
+import { toggleQuick } from "./data-views-overflow-fields";
 import type {
   DataViewCardSelection,
   FilterFieldConfig,
+  QuickFilterConfig,
   RangeFieldConfig,
   RangeValue,
   RowAction,
@@ -82,6 +85,8 @@ interface FilterSurfaceProps<T extends Record<string, unknown>> {
   onChangeRange: (fieldId: string, range: RangeValue) => void;
   onClearField: (fieldId: string) => void;
   onClearAll: () => void;
+  /** Press a quick chip (its field becomes `[value]`), or release the pressed one. */
+  onToggleQuick: (quick: QuickFilterConfig) => void;
 }
 
 /**
@@ -99,6 +104,7 @@ interface GridShellFiltersArgs<T extends Record<string, unknown>> {
   alwaysShowSearch: boolean;
   /** Is "Exportar" on the bar? Half the right cluster's cost when it is not. */
   hasExport: boolean;
+  quickFilters: QuickFilterConfig[];
 }
 
 function useGridShellFilters<T extends Record<string, unknown>>({
@@ -109,6 +115,7 @@ function useGridShellFilters<T extends Record<string, unknown>>({
   testIdPrefix,
   alwaysShowSearch,
   hasExport,
+  quickFilters,
 }: GridShellFiltersArgs<T>): {
   showInline: boolean;
   useModal: boolean;
@@ -125,7 +132,7 @@ function useGridShellFilters<T extends Record<string, unknown>>({
   // it can keep, and the TOOLBAR needs the same answer to drop its labels.
   // Measuring twice would let the two disagree at the crossover width.
   const split = useFilterOverflow(
-    toOverflowFields(fields, rangeFields),
+    toOverflowFields(fields, rangeFields, quickFilters),
     state.pills,
     c.ranges,
     openControls > 0,
@@ -144,7 +151,11 @@ function useGridShellFilters<T extends Record<string, unknown>>({
   const useModal = false;
   const inlineVisible =
     showInline &&
-    (alwaysShowSearch || fields.length > 0 || rangeFields.length > 0 || state.search !== "");
+    (alwaysShowSearch ||
+      fields.length > 0 ||
+      rangeFields.length > 0 ||
+      quickFilters.length > 0 ||
+      state.search !== "");
   const filterProps: FilterSurfaceProps<T> = {
     testIdPrefix,
     search: state.search,
@@ -159,6 +170,7 @@ function useGridShellFilters<T extends Record<string, unknown>>({
     onChangeRange: (fieldId, range) => c.patch({ ranges: { ...c.ranges, [fieldId]: range } }),
     onClearField: (fieldId) => c.patch({ pills: { ...state.pills, [fieldId]: [] } }),
     onClearAll: () => c.patch({ search: "", pills: {}, ranges: {} }),
+    onToggleQuick: (quick) => c.patch(({ pills }) => ({ pills: toggleQuick(pills, quick) })),
   };
   return {
     showInline,
@@ -237,6 +249,10 @@ interface GridShellProps<T extends Record<string, unknown>> {
    * every grid that ships filter fields already shows the row.
    */
   alwaysShowSearch?: boolean;
+  /** One-click toggle chips at the head of the bar — see `QuickFilterConfig`. */
+  quickFilters?: QuickFilterConfig[];
+  /** Pin the toolbar and the table header while the page scrolls. */
+  stickyToolbar?: boolean;
 }
 
 /** The scrollable content region: scope tabs, toolbar, filter bar, body, pager. */
@@ -250,22 +266,15 @@ function ShellStack<T extends Record<string, unknown>>({
   const copy = useDataViewsCopy();
   const { c, testIdPrefix, dataTestId, scopes = [], emptyState, inlineFilters = false } = props;
   const { showInline, useModal, inlineVisible, filterProps, split, onControlOpenChange } = filters;
-  // The grid renders the FILTERED empty state itself — it is the only party
-  // that knows a filter is applied. See {@link DataViewsEmpty}.
-  const body = (
-    <DataViewsEmpty
-      filtered={c.activeFilterCount > 0 || c.state.search !== ""}
-      onClearFilters={() => c.patch({ search: "", pills: {}, ranges: {} })}
-      emptyState={emptyState}
-      testIdPrefix={testIdPrefix}
-    />
-  );
+  const shellRef = useRef<HTMLDivElement>(null);
+  useStickyBarTop(shellRef, props.stickyToolbar === true);
+  const body = <ShellEmpty c={c} emptyState={emptyState} testIdPrefix={testIdPrefix} />;
   return (
     <TableFilter
       copy={copy.tableFilter} open={c.filterOpen} onOpenChange={c.setFilterOpen}
       hasActiveFilters={c.activeFilterCount > 0}
     >
-      <Stack spacing={0} data-testid={dataTestId ? `${dataTestId}-container` : undefined}>
+      <Stack ref={shellRef} spacing={0} data-testid={dataTestId ? `${dataTestId}-container` : undefined} {...(props.stickyToolbar ? SHELL_PROPS : {})}>
         <GridHeaderRow title={props.title} headerActions={props.headerActions} testIdPrefix={testIdPrefix} />
         <ShellToolbar
           c={c}
@@ -291,6 +300,7 @@ function ShellStack<T extends Record<string, unknown>>({
           compactControls={showInline && split.compactControls}
           counterHidden={showInline && split.counterHidden}
           showInline={showInline}
+          sticky={props.stickyToolbar === true}
         />
         <ScopeTabsSlot
           scopes={scopes} scopeFieldId={props.scopeFieldId} board={props.board}
@@ -310,6 +320,7 @@ function ShellStack<T extends Record<string, unknown>>({
               dataTestId={dataTestId}
               testIdPrefix={testIdPrefix}
               emptyState={body}
+              stickyHead={props.stickyToolbar === true}
             />
             <DataViewsPagination c={c} testIdPrefix={testIdPrefix} />
           </TableFilter.Main>
@@ -343,6 +354,7 @@ export function GridShell<T extends Record<string, unknown>>(props: GridShellPro
     testIdPrefix,
     alwaysShowSearch,
     hasExport: props.exportConfig !== undefined,
+    quickFilters: props.quickFilters ?? [],
   });
   return (
     <DataViewsLayoutProvider

package/src/components/data-display/DataViews/data-views-inline-bar.tsx

@@ -25,8 +25,10 @@ import { MoreFilters } from "./data-views-more-filters";
 import type { OverflowField, OverflowSplit } from "./data-views-overflow";
 import { CollapsedSearch, InlineKeyword } from "./data-views-search";
 import { PillControl } from "./data-views-category-pill";
+import { isQuickActive } from "./data-views-overflow";
+import { QuickChip } from "./data-views-quick-chip";
 import { RangePill } from "./data-views-range-pill";
-import type { RangeValue } from "./data-views-types";
+import type { QuickFilterConfig, RangeValue } from "./data-views-types";
 
 
 
@@ -102,10 +104,12 @@ function InlineControl<T extends Record<string, unknown>>({
   onTogglePill,
   onChangeRange,
   onClearField,
+  onToggleQuick,
   onOpenChange,
   testIdPrefix,
 }: {
   field: OverflowField<T>;
+  onToggleQuick?: (quick: QuickFilterConfig) => void;
   onOpenChange?: (open: boolean) => void;
   pills: Record<string, string[]>;
   ranges: Record<string, RangeValue>;
@@ -114,6 +118,17 @@ function InlineControl<T extends Record<string, unknown>>({
   onClearField: (fieldId: string) => void;
   testIdPrefix: string;
 }): React.JSX.Element | null {
+  if (field.group === "quick" && field.quick) {
+    const quick = field.quick;
+    return (
+      <QuickChip
+        quick={quick}
+        active={isQuickActive(quick, pills)}
+        onToggle={() => onToggleQuick?.(quick)}
+        testIdPrefix={testIdPrefix}
+      />
+    );
+  }
   if (field.group === "pill" && field.pill) {
     return (
       <PillControl
@@ -202,7 +217,10 @@ export function InlineFilterControls<T extends Record<string, unknown>>({
   onClearAll,
   activeFilterCount,
   onControlOpenChange,
+  onToggleQuick,
 }: Omit<InlineFilterBarProps<T>, "fields" | "rangeFields"> & {
+  /** Presses or releases a quick chip — see `QuickFilterConfig`. */
+  onToggleQuick?: (quick: QuickFilterConfig) => void;
   /** How many filters are applied — decides whether "Limpar" is on the bar at all. */
   activeFilterCount: number;
   /** Reports a control opening/closing so the shell can freeze the measurement. */
@@ -250,6 +268,7 @@ export function InlineFilterControls<T extends Record<string, unknown>>({
         onTogglePill={onTogglePill}
         onChangeRange={onChangeRange}
         onClearField={onClearField}
+        onToggleQuick={onToggleQuick}
         onClearAll={onClearAll}
         onControlOpenChange={onControlOpenChange}
         activeFilterCount={activeFilterCount}
@@ -276,6 +295,7 @@ function FilterSlots<T extends Record<string, unknown>>({
   onTogglePill,
   onChangeRange,
   onClearField,
+  onToggleQuick,
   onClearAll,
   onControlOpenChange,
   activeFilterCount,
@@ -283,6 +303,7 @@ function FilterSlots<T extends Record<string, unknown>>({
   clearAllHidden,
   testIdPrefix,
 }: {
+  onToggleQuick?: (quick: QuickFilterConfig) => void;
   inline: OverflowField<T>[];
   overflow: OverflowField<T>[];
   pills: Record<string, string[]>;
@@ -309,6 +330,7 @@ function FilterSlots<T extends Record<string, unknown>>({
           onTogglePill={onTogglePill}
           onChangeRange={onChangeRange}
           onClearField={onClearField}
+          onToggleQuick={onToggleQuick}
           testIdPrefix={testIdPrefix}
         />
       ))}
@@ -322,6 +344,7 @@ function FilterSlots<T extends Record<string, unknown>>({
         ranges={ranges}
         onTogglePill={onTogglePill}
         onChangeRange={onChangeRange}
+        onToggleQuick={onToggleQuick}
         testIdPrefix={testIdPrefix}
       />
       {activeFilterCount > 0 && !clearAllHidden && (

package/src/components/data-display/DataViews/data-views-more-fields.tsx

@@ -21,7 +21,9 @@ import { PillControl } from "./data-views-category-pill";
 import type { OverflowField } from "./data-views-overflow";
 import { RangeBounds } from "./data-views-range-pill";
 import { isRangeSet } from "./data-views-range-values";
-import type { RangeValue } from "./data-views-types";
+import type { QuickFilterConfig, RangeValue } from "./data-views-types";
+import { QuickRow } from "./data-views-quick-chip";
+import { isQuickActive } from "./data-views-overflow-fields";
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { fieldRadiusPx } from "../../../tokens/field-radius";
 import { fieldHeight } from "../../../tokens/field-height";
@@ -34,6 +36,8 @@ export interface MoreFieldProps {
   ranges: Record<string, RangeValue>;
   onTogglePill: (fieldId: string, value: string, checked: boolean) => void;
   onChangeRange: (fieldId: string, range: RangeValue) => void;
+  /** Presses or releases a quick chip shed into the panel. */
+  onToggleQuick?: (quick: QuickFilterConfig) => void;
   testIdPrefix: string;
 }
 
@@ -202,6 +206,11 @@ export function fieldClearing<T extends Record<string, unknown>>({
   applied: boolean;
   clear: () => void;
 } {
+  if (field.group === "quick" && field.quick) {
+    const quick = field.quick;
+    const applied = isQuickActive(quick, pills);
+    return { applied, clear: () => onTogglePill(quick.fieldId, quick.value, false) };
+  }
   if (field.group === "range") {
     return {
       applied: isRangeSet(ranges[field.id] ?? {}),
@@ -216,6 +225,30 @@ export function fieldClearing<T extends Record<string, unknown>>({
 }
 
 
+/**
+ * A quick chip shed into the panel: its own line, because label and count are
+ * already the whole control — no heading above it, no "Limpar" beside it.
+ */
+export function MoreQuick({
+  quick,
+  pills,
+  onToggleQuick,
+  testIdPrefix,
+}: {
+  quick: QuickFilterConfig;
+} & Pick<MoreFieldProps, "pills" | "onToggleQuick" | "testIdPrefix">): React.JSX.Element {
+  return (
+    <Box sx={{ mb: 1, "&:last-of-type": { mb: 0 } }}>
+      <QuickRow
+        quick={quick}
+        active={isQuickActive(quick, pills)}
+        onToggle={() => onToggleQuick?.(quick)}
+        testIdPrefix={testIdPrefix}
+      />
+    </Box>
+  );
+}
+
 /** One labelled group in the panel: the field's name, then its control. */
 export function MoreGroup<T extends Record<string, unknown>>({
   field,

package/src/components/data-display/DataViews/data-views-more-filters.tsx

@@ -16,7 +16,7 @@ import { Button } from "../../form/Button";
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
 
-import { fieldClearing, MoreGroup, type MoreFieldProps } from "./data-views-more-fields";
+import { fieldClearing, MoreGroup, MoreQuick, type MoreFieldProps } from "./data-views-more-fields";
 import type { OverflowField } from "./data-views-overflow";
 import { rem, sxRem } from "../../../tokens/relative";
 
@@ -182,6 +182,24 @@ function MoreFooter({
   );
 }
 
+/** The panel's body: a shed quick chip as a toggle row, anything else as a labelled group. */
+function MoreFields<T extends Record<string, unknown>>({
+  fields,
+  ...rest
+}: MoreFiltersProps<T>): React.JSX.Element {
+  return (
+    <>
+      {fields.map((field) =>
+        field.quick ? (
+          <MoreQuick key={field.id} quick={field.quick} {...rest} />
+        ) : (
+          <MoreGroup key={field.id} field={field} {...rest} />
+        ),
+      )}
+    </>
+  );
+}
+
 /** The overflow trigger + panel. Renders nothing when everything fits. */
 export function MoreFilters<T extends Record<string, unknown>>({
   fields,
@@ -249,9 +267,7 @@ export function MoreFilters<T extends Record<string, unknown>>({
               means something refused to, which is a bug to fix rather than a
               scrollbar to live with. */}
           <Box sx={{ maxHeight: sxRem(320), overflowY: "auto", overflowX: "hidden", p: 1.5, minWidth: 0 }}>
-            {fields.map((field) => (
-              <MoreGroup key={field.id} field={field} {...rest} />
-            ))}
+            <MoreFields fields={fields} {...rest} />
           </Box>
           {anyApplied && (
             <MoreFooter onClearAll={onClearAll} testIdPrefix={rest.testIdPrefix} />

package/src/components/data-display/DataViews/data-views-overflow-fields.ts

@@ -0,0 +1,110 @@
+/**
+ * WHICH CONTROLS THE BAR DECLARES — split from `data-views-overflow` at the
+ * file-size gate. That module decides where each control goes; this one only
+ * lists them, in the order the bar renders them.
+ */
+import type { OverflowField } from "./data-views-overflow";
+import { isRangeSet } from "./data-views-overflow-costs";
+import type { FilterFieldConfig, QuickFilterConfig, RangeFieldConfig, RangeValue } from "./data-views-types";
+
+/**
+ * Every declared control in the order the bar renders them: quick chips first,
+ * then pills, then ranges.
+ *
+ * A pill field a quick chip writes to is NOT a control of its own — the chips
+ * stand in for it (see `QuickFilterConfig`) — so it is left out here, and only
+ * here: it stays in `fields`, where the active count and saved views read it.
+ */
+export function toOverflowFields<T extends Record<string, unknown>>(
+  fields: FilterFieldConfig<T>[],
+  rangeFields: RangeFieldConfig<T>[],
+  quickFilters: QuickFilterConfig[] = [],
+): OverflowField<T>[] {
+  const chipFields = new Set(quickFilters.map((quick) => quick.fieldId));
+  return [
+    ...quickFilters.map((quick) => ({
+      id: `quick:${quick.id}`,
+      label: quick.label,
+      group: "quick" as const,
+      quick,
+    })),
+    ...fields
+      .filter((pill) => !chipFields.has(pill.id))
+      .map((pill) => ({ id: pill.id, label: pill.label, group: "pill" as const, pill, pinned: pill.inMore === true })),
+    ...rangeFields.map((range) => ({
+      id: range.id,
+      label: range.label,
+      group: "range" as const,
+      range,
+      pinned: range.inMore === true,
+    })),
+  ];
+}
+
+/**
+ * Is this quick chip pressed — its one value the field's WHOLE selection?
+ *
+ * Exactly, not "includes": a field holding two values (from a saved view, the
+ * URL or the side panel) is not what either chip applies, and reading both as
+ * pressed made pressing one clear the other.
+ */
+export function isQuickActive(quick: QuickFilterConfig, pills: Record<string, string[]>): boolean {
+  const selected = pills[quick.fieldId] ?? [];
+  return selected.length === 1 && selected[0] === quick.value;
+}
+
+/**
+ * Is any DECLARED filter applied — a pill value or a bounded range, wherever it
+ * is drawn (on the bar, in "Mais", or as a chip)? Only declared ids count: the
+ * bar draws "Limpar" on the active count, which ignores a stale key a saved view
+ * still carries for a field since removed.
+ */
+export function anyApplied<T extends Record<string, unknown>>(
+  all: OverflowField<T>[],
+  pills: Record<string, string[]>,
+  ranges: Record<string, RangeValue>,
+): boolean {
+  return all.some((field) => {
+    if (field.group === "range") return isRangeSet(ranges[field.id]);
+    const id = field.quick?.fieldId ?? field.id;
+    return (pills[id]?.length ?? 0) > 0;
+  });
+}
+
+/**
+ * Quick chips stay a PREFIX of their declared order on the bar.
+ *
+ * The keep-what-fits loop skips a control that does not fit and tries the next,
+ * which for pills is right (any narrower one is worth the room) and for chips
+ * is not: "Zerado" alone on the bar, with "Estoque baixo" in "Mais", reads as a
+ * different bar from the one declared. So the first chip that went to "Mais"
+ * takes every later chip with it. Their room is NOT re-spent here — `used`
+ * drops, and the ladder's later passes can hand it to the furniture.
+ */
+export function keepChipsInOrder<T extends Record<string, unknown>>(
+  split: { inline: OverflowField<T>[]; overflow: OverflowField<T>[]; used: number },
+  chips: OverflowField<T>[],
+  cost: (field: OverflowField<T>) => number,
+): { inline: OverflowField<T>[]; overflow: OverflowField<T>[]; used: number } {
+  const firstOut = chips.findIndex((chip) => split.overflow.includes(chip));
+  if (firstOut < 0) return split;
+  const evicted = chips.slice(firstOut).filter((chip) => split.inline.includes(chip));
+  if (evicted.length === 0) return split;
+  return {
+    inline: split.inline.filter((field) => !evicted.includes(field)),
+    overflow: [...chips.slice(firstOut), ...split.overflow.filter((field) => !chips.includes(field))],
+    used: split.used - evicted.reduce((sum, chip) => sum + cost(chip), 0),
+  };
+}
+
+
+
+/**
+ * A quick chip's press, as a pill write. Exclusive within the field: the chip's
+ * value REPLACES the selection, and pressing the pressed chip empties it.
+ */
+export function toggleQuick(pills: Record<string, string[]>, quick: QuickFilterConfig): Record<string, string[]> {
+  const pressed = isQuickActive(quick, pills);
+  return { ...pills, [quick.fieldId]: pressed ? [] : [quick.value] };
+}
+

package/src/components/data-display/DataViews/data-views-overflow.ts

@@ -15,7 +15,11 @@ import {
   rightClusterCost,
   type Prices,
 } from "./data-views-overflow-costs";
-import type { FilterFieldConfig, RangeFieldConfig, RangeValue } from "./data-views-types";
+import type { FilterFieldConfig, QuickFilterConfig, RangeFieldConfig, RangeValue } from "./data-views-types";
+import { anyApplied, isQuickActive, keepChipsInOrder } from "./data-views-overflow-fields";
+
+// Declaring the controls lives in its own module (size gate); re-exported for its callers.
+export { isQuickActive, toOverflowFields } from "./data-views-overflow-fields";
 
 /**
  * PROGRESSIVE COLLAPSE — which filter controls fit on the toolbar, measured.
@@ -44,14 +48,17 @@ import type { FilterFieldConfig, RangeFieldConfig, RangeValue } from "./data-vie
  * or changes a rendered row.
  */
 
-/** A filter control on the bar: a multi-select pill or a min/max range. */
+/** A filter control on the bar: a multi-select pill, a min/max range or a quick chip. */
 export interface OverflowField<T extends Record<string, unknown>> {
   id: string;
   label: string;
   /** Which control it is — the caller renders the right one. */
-  group: "pill" | "range";
+  group: "pill" | "range" | "quick";
   pill?: FilterFieldConfig<T>;
   range?: RangeFieldConfig<T>;
+  quick?: QuickFilterConfig;
+  /** Declared `inMore`: never on the bar, always behind "Mais". */
+  pinned?: boolean;
 }
 
 /** What the caller renders inline, and what goes behind "Mais". */
@@ -98,24 +105,13 @@ export interface OverflowSplit<T extends Record<string, unknown>> {
   barRef: React.RefObject<HTMLDivElement | null>;
 }
 
-/** Every declared control, pills first, in the order the bar renders them. */
-export function toOverflowFields<T extends Record<string, unknown>>(
-  fields: FilterFieldConfig<T>[],
-  rangeFields: RangeFieldConfig<T>[],
-): OverflowField<T>[] {
-  return [
-    ...fields.map((pill) => ({ id: pill.id, label: pill.label, group: "pill" as const, pill })),
-    ...rangeFields.map((range) => ({ id: range.id, label: range.label, group: "range" as const, range })),
-  ];
-}
-
-
 /** Is this control carrying a value the operator set? */
 function isActiveField<T extends Record<string, unknown>>(
   field: OverflowField<T>,
   pills: Record<string, string[]>,
   ranges: Record<string, RangeValue>,
 ): boolean {
+  if (field.group === "quick" && field.quick) return isQuickActive(field.quick, pills);
   return field.group === "pill"
     ? (pills[field.id]?.length ?? 0) > 0
     : isRangeSet(ranges[field.id]);
@@ -128,6 +124,8 @@ function fieldWidth<T extends Record<string, unknown>>(
   pills: Record<string, string[]>,
   ranges: Record<string, RangeValue>,
 ): number {
+  // A chip is a pill with its count beside the label and no chevron.
+  if (field.group === "quick") return estimateWidth(theme, `${field.label} ${field.quick?.count ?? ""}`, -20);
   if (field.group === "pill") return estimateWidth(theme, pillText(field, pills[field.id] ?? []), 0);
   // A bounded range renders two number inputs (100 design px) beside its label.
   return estimateWidth(theme, field.label, isRangeSet(ranges[field.id]) ? 100 : 0);
@@ -154,13 +152,25 @@ function splitFilters<T extends Record<string, unknown>>(
   /** Whose type scale every price is read at — the bar's own. */
   theme: Theme,
 ): Split<T> {
-  const active = all.filter((field) => isActiveField(field, pills, ranges));
-  const idle = all.filter((field) => !isActiveField(field, pills, ranges));
+  // `inMore` fields never compete for the bar: they are behind "Mais" from the
+  // start, so "Mais" is on the bar whatever else fits.
+  const pinned = all.filter((field) => field.pinned);
+  const candidates = all.filter((field) => !field.pinned);
+  const chips = candidates.filter((field) => field.group === "quick");
+  const rest = candidates.filter((field) => field.group !== "quick");
+  const active = rest.filter((field) => isActiveField(field, pills, ranges));
+  const idle = rest.filter((field) => !isActiveField(field, pills, ranges));
   const price = pricesFor(theme);
+  const moreCost = compact ? price.overflowButtonCompact : price.overflowButton;
   const gap = remPx(theme, RESERVED.betweenControls);
 
-  // "Limpar" rides the end of the cluster whenever anything is applied.
-  const clearCost = active.length > 0 ? price.clearAll + gap : 0;
+  // "Limpar" rides the end of the cluster whenever anything is applied —
+  // ANYTHING, a pinned field and a chip's field included, since the bar draws
+  // it on the active count, not on what it can see. Pressing a chip can
+  // therefore cost the bar room; chips rank first and stay a prefix (below),
+  // so what leaves is an idle pill, or the chips together — never one chip
+  // swapped for another.
+  const clearCost = anyApplied(all, pills, ranges) ? price.clearAll + gap : 0;
   // APPLIED FIRST, BUT NOT EXEMPT.
   //
   // Applied controls take the visible slots ahead of idle ones — that part was
@@ -174,20 +184,30 @@ function splitFilters<T extends Record<string, unknown>>(
   // are in there (see `MoreTrigger`), which is the same signal the pill itself
   // was carrying. A control you scroll off-screen carries no signal at all.
   //
-  // The keep-what-fits loop itself is `splitToFit` (`utility/Overflow`) — the
-  // one part of this that is not filter-shaped, and the part a second cluster
-  // in the design system would otherwise have had to reimplement.
-  const split = splitToFit(all, {
-    widthOf: (field) => fieldWidth(theme, field, pills, ranges),
-    keyOf: (field) => field.id,
-    gap,
-    available: width - furniture - clearCost,
-    // The overflow button at the width it will actually have, which on a phone
-    // is the icon-and-badge one.
-    overflowCost: compact ? price.overflowButtonCompact : price.overflowButton,
-    priority: [...active, ...idle],
-  });
-  return { ...split, used: split.used + clearCost };
+  // Quick chips come before all of it, in their DECLARED order whatever is
+  // pressed: they are the bar's fixed vocabulary, so their slots never move.
+  //
+  // The keep-what-fits loop is `splitToFit` (`utility/Overflow`). With pinned
+  // fields "Mais" is always drawn, so its cost is paid up front.
+  const pinnedCost = pinned.length > 0 ? moreCost + gap : 0;
+  const widthOf = (field: OverflowField<T>): number => fieldWidth(theme, field, pills, ranges);
+  const split = keepChipsInOrder(
+    splitToFit(candidates, {
+      widthOf,
+      keyOf: (field) => field.id,
+      gap,
+      available: width - furniture - clearCost - pinnedCost,
+      overflowCost: pinned.length > 0 ? 0 : moreCost,
+      priority: [...chips, ...active, ...idle],
+    }),
+    chips,
+    (field) => widthOf(field) + gap,
+  );
+  return {
+    inline: split.inline,
+    overflow: [...split.overflow, ...pinned],
+    used: split.used + clearCost + pinnedCost,
+  };
 }
 
 /**
@@ -219,8 +239,8 @@ function computeSplit<T extends Record<string, unknown>>(
   // Unmeasured (SSR, or jsdom without a ResizeObserver) ⇒ degrade nothing.
   if (width === 0) {
     return {
-      inline: all,
-      overflow: [],
+      inline: all.filter((field) => !field.pinned),
+      overflow: all.filter((field) => field.pinned),
       compactControls: false,
       counterHidden: false,
       searchCollapsed: false,
@@ -350,7 +370,9 @@ export function useFilterOverflow<T extends Record<string, unknown>>(
   // The prices follow the theme's type scale, so the answer does too.
   const theme = useTheme();
   const signature = JSON.stringify({
-    ids: all.map((field) => field.id),
+    // A chip's count and a field's `inMore` change its price or its place
+    // without changing its id, so both are part of the key.
+    ids: all.map((field) => [field.id, field.quick?.count ?? null, field.pinned === true]),
     pills,
     ranges,
     width,