@leavepulse/ui 0.74.2 → 0.76.0

package/dist/composables/useOverlayHistory.js

@@ -0,0 +1,84 @@
+import { inject, computed, toValue, watch, onBeforeUnmount, provide, nextTick } from "vue";
+import { isLive, pushEntry, dropEntry, setHistoryRouter } from "./overlayHistory.js";
+const MODE = /* @__PURE__ */ Symbol("lp-overlay-history");
+const SCOPE = /* @__PURE__ */ Symbol("lp-overlay-history-scope");
+function provideOverlayHistory(mode = true, options = {}) {
+  provide(MODE, mode);
+  if (options.router) setHistoryRouter(options.router);
+}
+function useOverlayHistory(options) {
+  const inherited = inject(MODE, false);
+  const mode = computed(() => options.mode() ?? toValue(inherited));
+  const entry = {
+    alive: true,
+    back: () => {
+      void options.close().then(
+        () => nextTick(() => {
+          if (entry.alive && options.open() && !isLive(entry)) pushEntry(entry);
+        })
+      );
+    },
+    forward: () => {
+      if (mode.value !== "reopen") return false;
+      options.reopen();
+      void nextTick(() => {
+        if (!options.open() && isLive(entry)) dropEntry(entry);
+      });
+      return true;
+    },
+    navigated: () => {
+      if (options.open()) options.navigated();
+    }
+  };
+  watch(
+    () => [options.open(), mode.value !== false],
+    ([open, enabled]) => {
+      if (open && enabled) {
+        if (!isLive(entry)) pushEntry(entry);
+      } else if (isLive(entry)) {
+        dropEntry(entry);
+      }
+    },
+    { immediate: true }
+  );
+  onBeforeUnmount(() => {
+    entry.alive = false;
+    if (isLive(entry)) dropEntry(entry);
+  });
+  provide(SCOPE, { active: () => mode.value !== false && options.open() && isLive(entry) });
+}
+function useStepHistory(options) {
+  const scope = inject(SCOPE, null);
+  const enabled = () => {
+    const own = options.mode();
+    if (own === false) return false;
+    if (scope) return scope.active();
+    return own === true;
+  };
+  const entries = [];
+  function record(from, to) {
+    if (from === to || !enabled()) return;
+    const entry = {
+      alive: true,
+      back: () => options.set(from),
+      forward: () => {
+        if (!enabled() || !options.has(to)) return false;
+        options.set(to);
+        return true;
+      }
+    };
+    entries.splice(0, entries.length, ...entries.filter(isLive), entry);
+    pushEntry(entry);
+  }
+  onBeforeUnmount(() => {
+    for (const entry of entries) entry.alive = false;
+    const first = entries.find(isLive);
+    if (first) dropEntry(first);
+  });
+  return { record };
+}
+export {
+  provideOverlayHistory,
+  useOverlayHistory,
+  useStepHistory
+};

package/dist/composables/useTableFilterChoice.d.ts

@@ -0,0 +1,16 @@
+import { type MaybeRefOrGetter, type Ref, type WritableComputedRef } from "vue";
+import { type TableFilters } from "../components/tableFilter";
+/**
+ * One column of LpTable's header filters as a single choice, for a control
+ * above the table (LpSegmented, LpSelect, a row of stat tiles) that filters
+ * the same thing as the column's funnel. Both then read and write one state:
+ * picking a choice sets the funnel, and narrowing the funnel to a choice's
+ * values lights that choice up.
+ *
+ * `choices` maps each choice to the values it shows; `null` is the choice
+ * that shows everything. `values` is the column's vocabulary, by default every
+ * value the choices name. The ref reads `undefined` while the funnel holds a
+ * mix no choice describes, so the control shows nothing picked rather than a
+ * choice that is not what the table shows.
+ */
+export declare function useTableFilterChoice<C extends string>(filters: Ref<TableFilters>, column: string, choices: Record<C, readonly unknown[] | null>, values?: MaybeRefOrGetter<readonly unknown[]>): WritableComputedRef<C | undefined>;

package/dist/composables/useTableFilterChoice.js

@@ -0,0 +1,34 @@
+import { computed, toValue } from "vue";
+import { showOnly, shownValues } from "../components/tableFilter.js";
+function useTableFilterChoice(filters, column, choices, values) {
+  const entries = Object.entries(choices);
+  const vocabulary = computed(() => {
+    const own = values === void 0 ? void 0 : toValue(values);
+    return own ?? [...new Set(entries.flatMap(([, shown]) => shown ?? []))];
+  });
+  return computed({
+    get: () => {
+      const all = vocabulary.value;
+      const shown = new Set(shownValues(all, filters.value[column]));
+      for (const [choice, keep] of entries) {
+        if (keep === null) {
+          if (shown.size === all.length) return choice;
+          continue;
+        }
+        if (keep.length === shown.size && keep.every((v) => shown.has(v))) return choice;
+      }
+      return void 0;
+    },
+    set: (choice) => {
+      const keep = choice === void 0 ? null : choices[choice];
+      const hidden = keep === null ? [] : showOnly(vocabulary.value, keep);
+      const next = { ...filters.value };
+      delete next[column];
+      if (hidden.length) next[column] = hidden;
+      filters.value = next;
+    }
+  });
+}
+export {
+  useTableFilterChoice
+};

package/dist/index.d.ts

@@ -155,6 +155,9 @@ export type { SortState, TableColumn, TablePage, TableQuery } from "./components
 export type { TableLabels } from "./components/LpTable.vue";
 export type { TableExportOptions } from "./components/LpTable.vue";
 export { compareValues } from "./components/tableSort";
+export { filterRows, showOnly, shownValues } from "./components/tableFilter";
+export type { TableFilters } from "./components/tableFilter";
+export { useTableFilterChoice } from "./composables/useTableFilterChoice";
 export { resolveRowMenu } from "./components/tableRowMenu";
 export type { TableRowMenu, TableRowMenuResult } from "./components/tableRowMenu";
 export { default as LpTableOfContents } from "./components/LpTableOfContents.vue";
@@ -216,6 +219,9 @@ export type { UseGamepadNavOptions } from "./composables/useGamepadNav";
 export { focusableIn, nextInDirection } from "./composables/spatialNav";
 export type { Box, Direction } from "./composables/spatialNav";
 export { provideGlass, useGlass } from "./composables/useGlass";
+export { provideOverlayHistory, useOverlayHistory, useStepHistory } from "./composables/useOverlayHistory";
+export type { OverlayHistoryMode, OverlayHistoryOptions, ProvideOverlayHistoryOptions, StepHistoryOptions } from "./composables/useOverlayHistory";
+export type { HistoryRouter } from "./composables/overlayHistory";
 export { LP_CONFIG, lpConfig, mergeConfig, provideLpConfig, useLabels, useLinkComponent, useLpConfig } from "./composables/useLpConfig";
 export type { KitStorage, LabelScope, LpConfig } from "./composables/useLpConfig";
 export { browserStorage, useKitStorage, usePersisted } from "./composables/usePersisted";

package/dist/index.js

@@ -1,10 +1,10 @@
 import { _ } from "./chunks/LayoutCanvas-CNOAUk7D.js";
-import { _ as _2 } from "./chunks/LpAddressInput-Al3HT5ey.js";
+import { _ as _2 } from "./chunks/LpAddressInput-De_LTYM7.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DRGgh89B.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BP1ld7-S.js";
 import { _ as _5 } from "./chunks/LpAlert-n5XPAZfv.js";
-import { _ as _6 } from "./chunks/LpAppShell-CpSSm5WT.js";
+import { _ as _6 } from "./chunks/LpAppShell-Cpy_t1U_.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DOu7FN5P.js";
 import { _ as _8 } from "./chunks/LpAvatar-Cg6Az3wz.js";
 import { _ as _9 } from "./chunks/LpBadge-wUYLN4U9.js";
@@ -30,8 +30,8 @@ import { default as default6 } from "./components/LpPaletteStats.vue.js";
 import { default as default7 } from "./components/LpPaletteSwatches.vue.js";
 import { default as default8 } from "./components/LpKeys.vue.js";
 import { comboKeys, comboSteps } from "./components/keys.js";
-import { _ as _18 } from "./chunks/LpConfirmDialog-DY2VjDji.js";
-import { _ as _19 } from "./chunks/LpConfirmHost-DvSZTJ4N.js";
+import { _ as _18 } from "./chunks/LpConfirmDialog-CphJR6Q9.js";
+import { _ as _19 } from "./chunks/LpConfirmHost-QSJ0zl63.js";
 import { confirm, useConfirm } from "./components/confirm.js";
 import { _ as _20 } from "./chunks/LpContextMenu-rx2tCjwk.js";
 import { _ as _21 } from "./chunks/LpDatePicker-CA0QTfBC.js";
@@ -40,7 +40,7 @@ import { _ as _23 } from "./chunks/LpRangeCalendar-CYYUYqJ7.js";
 import { clampRange, dayAllowed, defaultDatePresets, defaultRangePresets, formatRange, normalizeRange, sameRange } from "./components/dateRange.js";
 import { _ as _24 } from "./chunks/LpDisclosure-Cpa7Hc5T.js";
 import { _ as _25 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _26 } from "./chunks/LpDrawer-RRamxbLV.js";
+import { _ as _26 } from "./chunks/LpDrawer-DQZixOqJ.js";
 import { _ as _27 } from "./chunks/LpDropdownMenu-Dl7Z4ZhS.js";
 import { default as default9 } from "./components/LpDropzone.vue.js";
 import { _ as _28 } from "./chunks/LpEmptyState-EQHiRYhG.js";
@@ -59,8 +59,8 @@ import { _ as _36 } from "./chunks/LpLink-Krkjhe_y.js";
 import { _ as _37 } from "./chunks/LpLogViewer-D25jM2_I.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
 import { _ as _38 } from "./chunks/LpMediaGallery-Bkram-MO.js";
-import { _ as _39 } from "./chunks/LpModal-BnjZ2iem.js";
-import { _ as _40 } from "./chunks/LpModalNav-DQpV2kdn.js";
+import { _ as _39 } from "./chunks/LpModal-C0tGg_D_.js";
+import { _ as _40 } from "./chunks/LpModalNav-iDDtT9c1.js";
 import { _ as _41 } from "./chunks/LpNotificationBell-3244LUVc.js";
 import { _ as _42 } from "./chunks/LpNumberField-e0IBkWU1.js";
 import { _ as _43 } from "./chunks/LpTimeField-BawSVsmt.js";
@@ -86,7 +86,7 @@ import { _ as _60 } from "./chunks/LpShift-CCq7dofl.js";
 import { _ as _61 } from "./chunks/LpSwap-C96c0LWh.js";
 import { _ as _62 } from "./chunks/LpHintExample-9Py0wc-L.js";
 import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _63 } from "./chunks/LpSidebar-BoNLKgh-.js";
+import { _ as _63 } from "./chunks/LpSidebar-D6zO8vLm.js";
 import { _ as _64 } from "./chunks/LpContextSwitcher-Dwh6dyID.js";
 import { _ as _65 } from "./chunks/LpSkeleton-BB6XIV-w.js";
 import { _ as _66 } from "./chunks/LpSlider-DxYoCJJO.js";
@@ -99,6 +99,8 @@ import { _ as _71 } from "./chunks/LpStepper-DpsocBNJ.js";
 import { _ as _72 } from "./chunks/LpSwitch-BnXd1llc.js";
 import { default as default12 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
+import { filterRows, showOnly, shownValues } from "./components/tableFilter.js";
+import { useTableFilterChoice } from "./composables/useTableFilterChoice.js";
 import { resolveRowMenu } from "./components/tableRowMenu.js";
 import { _ as _73 } from "./chunks/LpTableOfContents-BN5zvpnx.js";
 import { default as default13 } from "./components/LpTabs.vue.js";
@@ -132,6 +134,7 @@ import { anyModalOpen, topModalElement, useModalLayer } from "./components/modal
 import { useGamepadNav } from "./composables/useGamepadNav.js";
 import { focusableIn, nextInDirection } from "./composables/spatialNav.js";
 import { provideGlass, useGlass } from "./composables/useGlass.js";
+import { provideOverlayHistory, useOverlayHistory, useStepHistory } from "./composables/useOverlayHistory.js";
 import { LP_CONFIG, lpConfig, mergeConfig, provideLpConfig, useLabels, useLinkComponent, useLpConfig } from "./composables/useLpConfig.js";
 import { browserStorage, useKitStorage, usePersisted } from "./composables/usePersisted.js";
 import { useCloseGuard } from "./composables/useCloseGuard.js";
@@ -469,6 +472,7 @@ export {
   fileNameOf,
   fileStem,
   filterCountries,
+  filterRows,
   findHotkeyConflicts,
   fitChips,
   flagEmoji,
@@ -568,6 +572,7 @@ export {
   provideGlass,
   provideHintSystem,
   provideLpConfig,
+  provideOverlayHistory,
   pseudoLocalize,
   pushRecent,
   quotaSegments,
@@ -609,6 +614,8 @@ export {
   setActiveTab,
   s as setGlassBackdrop,
   settledCells,
+  showOnly,
+  shownValues,
   sortNodes,
   splitTags,
   splitTime,
@@ -665,6 +672,7 @@ export {
   useModalLayer,
   useNow,
   useOptimisticToggle,
+  useOverlayHistory,
   usePaintSelect,
   usePaletteCommands,
   u3 as usePaletteTheme,
@@ -680,6 +688,8 @@ export {
   useSettled,
   useShift,
   useSpotlight,
+  useStepHistory,
+  useTableFilterChoice,
   u as useTheme,
   u2 as useThemeStudio,
   useTilt,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.74.2",
+  "version": "0.76.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -101,6 +101,7 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vue": "3.5.31",
     "vue-component-meta": "3.3.5",
+    "vue-router": "4.6.4",
     "vue-tsc": "^3.0.0"
   },
   "dependencies": {

package/src/components/LpConfirmDialog.vue

@@ -5,6 +5,7 @@ import { useLabels } from "../composables/useLpConfig"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
 import LpModal from "./LpModal.vue"
+import type { OverlayHistoryMode } from "../composables/useOverlayHistory"
 
 export type ConfirmLabels = {
   confirm: string
@@ -54,9 +55,11 @@ const props = withDefaults(
     action?: () => unknown
     /** Frosted glass panel, passed to LpModal. Follows `provideGlass` when unset. */
     glass?: boolean
+    /** Browser history for the dialog, passed to LpModal. Follows `provideOverlayHistory` when unset. */
+    history?: OverlayHistoryMode
     labels?: Partial<ConfirmLabels>
   }>(),
-  { glass: undefined },
+  { glass: undefined, history: undefined },
 )
 
 const emit = defineEmits<{
@@ -128,6 +131,7 @@ function dismiss(open: boolean) {
 <template>
   <LpModal
     :glass="glass"
+    :history="history"
     :open="open"
     :title="title"
     :description="description"

package/src/components/LpDrawer.vue

@@ -37,6 +37,7 @@ import { CLOSE_ICON } from "./dropdown"
 import { prefersReducedMotion } from "../composables/easing"
 import { useCloseGuard, type CloseGuard } from "../composables/useCloseGuard"
 import { useGlass } from "../composables/useGlass"
+import { useOverlayHistory, type OverlayHistoryMode } from "../composables/useOverlayHistory"
 import { useLabels } from "../composables/useLpConfig"
 import { usePersisted } from "../composables/usePersisted"
 import LpIcon from "./LpIcon.vue"
@@ -132,9 +133,17 @@ const props = withDefaults(
     glass?: boolean
     /** Accessible name for a drawer without a visible `title`. */
     ariaLabel?: string
+    /**
+     * Browser Back closes it, and opening it adds a history entry. Unset
+     * follows `provideOverlayHistory` (off without one); `"reopen"` also
+     * opens it again on Forward; `false` keeps it out of history, for an
+     * overlay the app already drives from its route.
+     */
+    history?: OverlayHistoryMode
     labels?: Partial<{ close: string }>
   }>(),
   {
+    history: undefined,
     side: "right",
     size: "sm",
     dismissible: true,
@@ -214,6 +223,18 @@ async function requestClose() {
 // ways out do. Handed to the body and footer slots, and exposed.
 defineExpose({ close: requestClose })
 
+useOverlayHistory({
+  mode: () => props.history,
+  open: () => !!props.open,
+  close: async () => {
+    if (!(await allowClose())) return false
+    emit("update:open", false)
+    return true
+  },
+  reopen: () => emit("update:open", true),
+  navigated: () => emit("update:open", false),
+})
+
 // The header's close button is vaul's own and would slide the panel away at
 // once; with a guard it asks first and closes through the same path as above.
 function guardClose(event: MouseEvent) {

package/src/components/LpModal.vue

@@ -11,6 +11,7 @@ import {
 import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { useCloseGuard, type CloseGuard } from "../composables/useCloseGuard"
 import { useGlass } from "../composables/useGlass"
+import { useOverlayHistory, type OverlayHistoryMode } from "../composables/useOverlayHistory"
 import { useLabels } from "../composables/useLpConfig"
 import { useShift } from "../composables/useShift"
 import { useModalLayer } from "./modalDepth"
@@ -93,9 +94,16 @@ const props = withDefaults(
      * form's state, `:guard="form.dirty"`. See `useCloseGuard`.
      */
     guard?: CloseGuard
+    /**
+     * Browser Back closes it, and opening it adds a history entry. Unset
+     * follows `provideOverlayHistory` (off without one); `"reopen"` also
+     * opens it again on Forward; `false` keeps it out of history, for an
+     * overlay the app already drives from its route.
+     */
+    history?: OverlayHistoryMode
     labels?: Partial<{ close: string }>
   }>(),
-  { size: "md", autoFocus: "auto", glass: undefined, dismissible: true, guard: undefined },
+  { size: "md", autoFocus: "auto", glass: undefined, dismissible: true, guard: undefined, history: undefined },
 )
 
 const text = useLabels("modal", { close: "Close" }, () => props.labels)
@@ -120,6 +128,18 @@ async function onOpenChange(next: boolean) {
 function close() {
   void onOpenChange(false)
 }
+
+useOverlayHistory({
+  mode: () => props.history,
+  open: () => !!props.open,
+  close: async () => {
+    if (!(await allowClose())) return false
+    emit("update:open", false)
+    return true
+  },
+  reopen: () => emit("update:open", true),
+  navigated: () => emit("update:open", false),
+})
 defineExpose({ close })
 
 function onEscape(event: KeyboardEvent) {

package/src/components/LpShortcutsDialog.vue

@@ -18,6 +18,7 @@
 import { computed } from "vue"
 import LpKeys from "./LpKeys.vue"
 import LpModal from "./LpModal.vue"
+import type { OverlayHistoryMode } from "../composables/useOverlayHistory"
 import {
   activeShortcuts,
   mergeShortcutGroups,
@@ -36,6 +37,8 @@ const props = withDefaults(
     description?: string
     /** Frosted glass panel, passed to LpModal. Follows `provideGlass` when unset. */
     glass?: boolean
+    /** Browser history for the dialog, passed to LpModal. Follows `provideOverlayHistory` when unset. */
+    history?: OverlayHistoryMode
     /**
      * A key that toggles the reference, e.g. "F1". Bound only while the dialog
      * is mounted, also inside inputs and over other overlays, and the browser's
@@ -43,7 +46,7 @@ const props = withDefaults(
      */
     hotkey?: string
   }>(),
-  { open: false, groups: () => [], live: false, title: undefined, glass: undefined },
+  { open: false, groups: () => [], live: false, title: undefined, glass: undefined, history: undefined },
 )
 
 const text = useLabels("shortcuts", {
@@ -75,6 +78,7 @@ useHotkeys(() =>
 <template>
   <LpModal
     :glass="props.glass"
+    :history="props.history"
     :open="props.open"
     size="lg"
     :title="props.title ?? text.title"

package/src/components/LpTable.vue

@@ -32,7 +32,16 @@ import { useResizeObserver } from "../composables/useResizeObserver"
 import { compareValues } from "./tableSort"
 import LpButton from "./LpButton.vue"
 import { downloadFile, fileStem, toCsv, type CsvOptions } from "./exportData"
-import { parseTableState, serializeTableState, summarizeShown } from "./tableFilter"
+import {
+  fromHiddenSets,
+  mergeRestored,
+  parseTableState,
+  sameHidden,
+  serializeTableState,
+  summarizeShown,
+  toHiddenSets,
+  type TableFilters,
+} from "./tableFilter"
 import { resolveRowMenu, type TableRowMenuResult } from "./tableRowMenu"
 
 export interface TableColumn<Row> {
@@ -64,6 +73,21 @@ export interface TableColumn<Row> {
    * vocabulary; the menu should say what the column itself says.
    */
   valueLabel?: (value: unknown) => string
+  /**
+   * The column's whole vocabulary, when it is known apart from the rows. The
+   * funnel lists these first and then anything else the rows hold, so a value
+   * is offered even while nothing on the page has it: the rows may already be
+   * narrowed by the same column upstream (a control above the table, a server
+   * query), and a funnel built only from what arrived could not widen it again.
+   */
+  filterValues?: readonly unknown[]
+  /**
+   * Show how many rows hold each value in the funnel (the default). Turn off
+   * when the rows are already narrowed by this column before they reach the
+   * table: the counts would then claim that the values filtered out upstream
+   * hold no rows at all.
+   */
+  filterCounts?: boolean
   /** The value a CSV export writes for this column; the raw cell by default. */
   exportValue?: (row: Row) => unknown
   /** Keep this column out of the show/hide list — an actions column has no
@@ -209,6 +233,23 @@ const props = withDefaults(
     /** Active sort (v-model:sort). When set, the parent owns ordering (server
      *  side); otherwise the table sorts its own rows client-side. */
     sort?: SortState | null
+    /**
+     * The header filters (v-model:filters): per column key, the values hidden.
+     * When set, the parent owns them, so a control above the table that
+     * filters the same column (see `useTableFilterChoice`) and the column's
+     * funnel are one state: each shows what the other picked, and the table's
+     * resets clear both. Left unset, the table keeps them itself. With
+     * `persist`, remembered filters fill only the columns the parent leaves
+     * unfiltered, and arrive through `update:filters`.
+     */
+    filters?: TableFilters
+    /**
+     * The rows are narrowed by filters outside the table (a search, a period).
+     * An empty table then says nothing matches rather than that there is
+     * nothing at all, and its reset button also emits `resetFilters`, for the
+     * parent to clear its own.
+     */
+    filtered?: boolean
     /** Pin the header while the body scrolls. Pair with a height on the wrapper. */
     stickyHeader?: boolean
     /** Per-row right-click menu. Return [] (or omit the prop) to disable it for
@@ -264,6 +305,8 @@ const props = withDefaults(
     // undefined, not null: null is a parent saying "unsorted", undefined is no
     // parent at all, and only the latter lets the table keep its own sort.
     sort: undefined,
+    filters: undefined,
+    filtered: false,
   },
 )
 
@@ -337,6 +380,9 @@ const scrollAttrs = computed(() => {
 const emit = defineEmits<{
   (e: "update:selected", value: RowKey[]): void
   (e: "update:sort", value: SortState | null): void
+  (e: "update:filters", value: TableFilters): void
+  /** The empty table's reset was pressed: clear the filters kept outside it. */
+  (e: "resetFilters"): void
   (e: "update:allMatching", value: boolean): void
   (e: "rowClick", row: T): void
 }>()
@@ -474,7 +520,25 @@ async function holdHeight() {
  * being invisible until someone notices the list has an unticked entry they
  * never saw.
  */
-const hiddenValues = ref<Record<string, Set<unknown>>>({})
+const ownHidden = ref<Record<string, Set<unknown>>>({})
+let lastHidden: Record<string, Set<unknown>> = {}
+/*
+ * The parent's lists become sets once per real change: a parent handing back
+ * an equal state as a new object (its v-model echo, a computed that rebuilt)
+ * must not refetch a server page or replay the rows' motion.
+ */
+const hiddenValues = computed<Record<string, Set<unknown>>>(() => {
+  const next = props.filters !== undefined ? toHiddenSets(props.filters) : ownHidden.value
+  if (sameHidden(next, lastHidden)) return lastHidden
+  lastHidden = next
+  return next
+})
+
+function writeHidden(next: Record<string, Set<unknown>>) {
+  if (sameHidden(next, hiddenValues.value)) return
+  ownHidden.value = next
+  emit("update:filters", fromHiddenSets(next))
+}
 
 /*
  * Rows animate only when the table itself reshuffles them — a header filter or
@@ -520,33 +584,28 @@ const localFacets = useTableFacets({
 })
 
 function valuesOf(col: TableColumn<T>): unknown[] {
-  if (props.load) return facets.value[col.key] ?? [...new Set(sourceRows.value.map((row) => row[col.key]))]
-  return localFacets.distinct(col.key)
+  const found = props.load
+    ? facets.value[col.key] ?? [...new Set(sourceRows.value.map((row) => row[col.key]))]
+    : localFacets.distinct(col.key)
+  return col.filterValues ? [...new Set([...col.filterValues, ...found])] : found
 }
 
 function isValueHidden(key: string, value: unknown): boolean {
   return hiddenValues.value[key]?.has(value) ?? false
 }
 
-function toggleValue(key: string, value: unknown) {
-  withMotion(() => applyToggle(key, value))
-}
-
-function applyToggle(key: string, value: unknown) {
-  const next = new Set(hiddenValues.value[key] ?? [])
-  if (next.has(value)) next.delete(value)
-  else next.add(value)
-  hiddenValues.value = { ...hiddenValues.value, [key]: next }
-}
-
 function showAllValues(key: string) {
-  withMotion(() => (hiddenValues.value = { ...hiddenValues.value, [key]: new Set() }))
+  writeHidden({ ...hiddenValues.value, [key]: new Set() })
 }
 
 function setHidden(key: string, next: Set<unknown>) {
-  withMotion(() => (hiddenValues.value = { ...hiddenValues.value, [key]: next }))
+  writeHidden({ ...hiddenValues.value, [key]: next })
 }
 
+// Whoever changed the filters, the funnel or a control of the parent's, the
+// rows they hide and reveal move the same way.
+watch(hiddenValues, () => withMotion(() => {}))
+
 function labelOf(col: TableColumn<T>, value: unknown): string {
   return col.valueLabel?.(value) ?? String(value ?? "—")
 }
@@ -558,7 +617,7 @@ function labelOf(col: TableColumn<T>, value: unknown): string {
  */
 const facetOptions = computed(() => new Map(props.columns.filter((col) => col.filterable).map((col) => {
   return [col.key, computed(() => {
-    const counts = props.load ? undefined : localFacets.counts(col.key)
+    const counts = props.load || col.filterCounts === false ? undefined : localFacets.counts(col.key)
     return valuesOf(col).map((value) => ({
       value,
       label: labelOf(col, value),
@@ -579,7 +638,12 @@ const activeFilters = computed(() =>
 )
 
 function clearAllFilters() {
-  withMotion(() => (hiddenValues.value = {}))
+  writeHidden({})
+}
+
+function resetFilters() {
+  clearAllFilters()
+  emit("resetFilters")
 }
 
 function filterLabels() {
@@ -816,9 +880,7 @@ onMounted(() => {
         ownSort.value = state.sort
         emit("update:sort", state.sort)
       }
-      if (state.hidden) {
-        hiddenValues.value = Object.fromEntries(Object.entries(state.hidden).map(([k, v]) => [k, new Set(v)]))
-      }
+      if (state.hidden) writeHidden(mergeRestored(hiddenValues.value, state.hidden))
       if (state.columns) hiddenColumns.value = new Set(state.columns)
     }
   }
@@ -991,6 +1053,7 @@ const showBar = computed(
 )
 const filteredOut = computed(() => {
   if (busy.value || failed.value || displayRows.value.length) return false
+  if (props.filtered) return true
   if (props.load) return Object.values(hiddenValues.value).some((set) => set.size)
   return props.rows.length > 0
 })
@@ -1364,7 +1427,7 @@ usePaletteCommands(() => {
               :icon="failed ? 'lucide:circle-alert' : filteredOut ? 'lucide:filter-x' : emptyIcon"
               :title="failed ? text.error : filteredOut ? text.noMatches : text.empty"
             >
-              <LpButton v-if="filteredOut" variant="outline" size="sm" @click="clearAllFilters">
+              <LpButton v-if="filteredOut" variant="outline" size="sm" @click="resetFilters">
                 {{ text.resetFilters }}
               </LpButton>
             </LpEmptyState>