@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/Search/filters/filterValues.js

@@ -0,0 +1,91 @@
+const emptyValueForKind = (kind) => {
+  switch (kind) {
+    case "multiselect":
+    case "checkbox-group":
+    case "tags":
+      return [];
+    case "boolean":
+      return false;
+    case "date-range":
+    case "range":
+      return {};
+    default:
+      return "";
+  }
+};
+const isDateRangeEmpty = (value) => !value.from && !value.to;
+const isRangeEmpty = (value) => (value.min === void 0 || value.min === null) && (value.max === void 0 || value.max === null);
+const isFilterValueEmpty = (field, value) => {
+  if (field.kind === "custom" && field.isActive) return !field.isActive(value);
+  if (value === null || value === void 0) return true;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === "string") return value.trim().length === 0;
+  if (typeof value === "boolean") return !value;
+  if (typeof value === "number") return Number.isNaN(value);
+  if (field.kind === "date-range") return isDateRangeEmpty(value);
+  if (field.kind === "range") return isRangeEmpty(value);
+  if (typeof value === "object") return Object.keys(value).length === 0;
+  return false;
+};
+const getActiveFilterFields = (fields, values) => (fields ?? []).filter((field) => !isFilterValueEmpty(field, values?.[field.key]));
+const countActiveFilters = (fields, values) => getActiveFilterFields(fields, values).length;
+const buildEmptyFilterValues = (fields) => {
+  const empty = {};
+  (fields ?? []).forEach((field) => {
+    empty[field.key] = emptyValueForKind(field.kind);
+  });
+  return empty;
+};
+const optionLabel = (options, value) => (options ?? []).find((option) => option.value === value)?.label ?? value;
+const fieldOptions = (field) => {
+  if (field.kind === "select" || field.kind === "multiselect" || field.kind === "checkbox-group" || field.kind === "radio" || field.kind === "tags") {
+    return field.options;
+  }
+  if (field.kind === "async-select") return field.initialOptions;
+  return void 0;
+};
+const formatFilterValue = (field, value) => {
+  if (field.formatChip) return field.formatChip(value);
+  if (isFilterValueEmpty(field, value)) return "";
+  if (Array.isArray(value)) {
+    return value.map((entry) => optionLabel(fieldOptions(field), String(entry))).join(", ");
+  }
+  if (field.kind === "boolean") return field.label ?? field.title;
+  if (field.kind === "date-range") {
+    const range = value;
+    if (range.from && range.to) return `${range.from} / ${range.to}`;
+    return range.from ?? range.to ?? "";
+  }
+  if (field.kind === "range") {
+    const range = value;
+    const unit = "unit" in field && field.unit ? ` ${field.unit}` : "";
+    if (range.min !== void 0 && range.max !== void 0) return `${range.min}${unit} - ${range.max}${unit}`;
+    if (range.min !== void 0) return `>= ${range.min}${unit}`;
+    if (range.max !== void 0) return `<= ${range.max}${unit}`;
+    return "";
+  }
+  return optionLabel(fieldOptions(field), String(value));
+};
+const getVisibleFilterFields = (fields, values) => (fields ?? []).filter((field) => field.visibleWhen ? field.visibleWhen(values) : true);
+const clearDependentValues = (fields, changedKey, values) => {
+  const dependents = (fields ?? []).filter((field) => (field.dependsOn ?? []).includes(changedKey));
+  if (dependents.length === 0) return values;
+  const next = { ...values };
+  dependents.forEach((field) => {
+    next[field.key] = emptyValueForKind(field.kind);
+  });
+  return next;
+};
+const areFilterValuesEqual = (a, b) => JSON.stringify(a ?? {}) === JSON.stringify(b ?? {});
+export {
+  areFilterValuesEqual,
+  buildEmptyFilterValues,
+  clearDependentValues,
+  countActiveFilters,
+  emptyValueForKind,
+  formatFilterValue,
+  getActiveFilterFields,
+  getVisibleFilterFields,
+  isFilterValueEmpty
+};
+//# sourceMappingURL=filterValues.js.map

package/dist/components/Search/filters/filterValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterValues.js","sources":["../../../../src/components/Search/filters/filterValues.ts"],"sourcesContent":["import { IFilterOption } from '@/interfaces/IFilterOption';\n\nimport { IFilterDateRangeValue, IFilterRangeValue, TFilterField, TFilterFieldKind, TFilterValues } from './filterTypes';\n\n/** Value a field holds when it is not filtering anything. */\nexport const emptyValueForKind = (kind: TFilterFieldKind): unknown => {\n  switch (kind) {\n    case 'multiselect':\n    case 'checkbox-group':\n    case 'tags':\n      return [];\n    case 'boolean':\n      return false;\n    case 'date-range':\n    case 'range':\n      return {};\n    default:\n      return '';\n  }\n};\n\nconst isDateRangeEmpty = (value: IFilterDateRangeValue): boolean => !value.from && !value.to;\n\nconst isRangeEmpty = (value: IFilterRangeValue): boolean =>\n  (value.min === undefined || value.min === null) && (value.max === undefined || value.max === null);\n\n/**\n * The single definition of \"this field is filtering something\". Booleans,\n * numbers and interval objects count, which the previous string/array-only\n * check silently dropped.\n */\nexport const isFilterValueEmpty = (field: TFilterField, value: unknown): boolean => {\n  if (field.kind === 'custom' && field.isActive) return !field.isActive(value);\n  if (value === null || value === undefined) return true;\n  if (Array.isArray(value)) return value.length === 0;\n  if (typeof value === 'string') return value.trim().length === 0;\n  if (typeof value === 'boolean') return !value;\n  if (typeof value === 'number') return Number.isNaN(value);\n  if (field.kind === 'date-range') return isDateRangeEmpty(value as IFilterDateRangeValue);\n  if (field.kind === 'range') return isRangeEmpty(value as IFilterRangeValue);\n  if (typeof value === 'object') return Object.keys(value as object).length === 0;\n\n  return false;\n};\n\nexport const getActiveFilterFields = (fields: Array<TFilterField>, values: TFilterValues): Array<TFilterField> =>\n  (fields ?? []).filter((field) => !isFilterValueEmpty(field, values?.[field.key]));\n\nexport const countActiveFilters = (fields: Array<TFilterField>, values: TFilterValues): number =>\n  getActiveFilterFields(fields, values).length;\n\nexport const buildEmptyFilterValues = (fields: Array<TFilterField>): TFilterValues => {\n  const empty: TFilterValues = {};\n  (fields ?? []).forEach((field) => {\n    empty[field.key] = emptyValueForKind(field.kind);\n  });\n\n  return empty;\n};\n\nconst optionLabel = (options: Array<IFilterOption> | undefined, value: string): string =>\n  (options ?? []).find((option) => option.value === value)?.label ?? value;\n\nconst fieldOptions = (field: TFilterField): Array<IFilterOption> | undefined => {\n  if (\n    field.kind === 'select' ||\n    field.kind === 'multiselect' ||\n    field.kind === 'checkbox-group' ||\n    field.kind === 'radio' ||\n    field.kind === 'tags'\n  ) {\n    return field.options;\n  }\n  if (field.kind === 'async-select') return field.initialOptions;\n\n  return undefined;\n};\n\n/** Human-readable value used by the active-filter chips and the trigger tooltip. */\nexport const formatFilterValue = (field: TFilterField, value: unknown): string => {\n  if (field.formatChip) return field.formatChip(value);\n  if (isFilterValueEmpty(field, value)) return '';\n\n  if (Array.isArray(value)) {\n    return value.map((entry) => optionLabel(fieldOptions(field), String(entry))).join(', ');\n  }\n\n  if (field.kind === 'boolean') return field.label ?? field.title;\n\n  if (field.kind === 'date-range') {\n    const range = value as IFilterDateRangeValue;\n    if (range.from && range.to) return `${range.from} / ${range.to}`;\n    return range.from ?? range.to ?? '';\n  }\n\n  if (field.kind === 'range') {\n    const range = value as IFilterRangeValue;\n    const unit = 'unit' in field && field.unit ? ` ${field.unit}` : '';\n    if (range.min !== undefined && range.max !== undefined) return `${range.min}${unit} - ${range.max}${unit}`;\n    if (range.min !== undefined) return `>= ${range.min}${unit}`;\n    if (range.max !== undefined) return `<= ${range.max}${unit}`;\n    return '';\n  }\n\n  return optionLabel(fieldOptions(field), String(value));\n};\n\n/**\n * Fields the user can actually see right now. `visibleWhen` reads the whole\n * draft, so a field hidden by a dependency never contributes a stale value.\n */\nexport const getVisibleFilterFields = (fields: Array<TFilterField>, values: TFilterValues): Array<TFilterField> =>\n  (fields ?? []).filter((field) => (field.visibleWhen ? field.visibleWhen(values) : true));\n\n/** Clears every field that declared `dependsOn` pointing at the changed key. */\nexport const clearDependentValues = (\n  fields: Array<TFilterField>,\n  changedKey: string,\n  values: TFilterValues,\n): TFilterValues => {\n  const dependents = (fields ?? []).filter((field) => (field.dependsOn ?? []).includes(changedKey));\n  if (dependents.length === 0) return values;\n\n  const next = { ...values };\n  dependents.forEach((field) => {\n    next[field.key] = emptyValueForKind(field.kind);\n  });\n\n  return next;\n};\n\nexport const areFilterValuesEqual = (a: TFilterValues, b: TFilterValues): boolean =>\n  JSON.stringify(a ?? {}) === JSON.stringify(b ?? {});\n"],"names":[],"mappings":"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"}

package/dist/components/Search/filters/filtersLayout.d.ts

@@ -0,0 +1,4 @@
+export type TFiltersVariant = 'drawer' | 'popover' | 'inline' | 'chips';
+export type TFiltersSize = 'sm' | 'md' | 'lg';
+export declare const getFiltersPanelWidth: (size: TFiltersSize) => number;
+export declare const FILTERS_POPOVER_WIDTH_REM = 20;

package/dist/components/Search/filters/filtersLayout.js

@@ -0,0 +1,18 @@
+import { remToPx } from "../../../helpers/utilityHelpers.js";
+const FILTERS_WIDTH_REM = {
+  sm: 22,
+  md: 26,
+  lg: 32
+};
+const VIEWPORT_RATIO = 0.92;
+const getFiltersPanelWidth = (size) => {
+  const desired = remToPx(FILTERS_WIDTH_REM[size]);
+  const viewportCap = typeof window === "undefined" ? desired : Math.round(window.innerWidth * VIEWPORT_RATIO);
+  return Math.min(desired, viewportCap);
+};
+const FILTERS_POPOVER_WIDTH_REM = 20;
+export {
+  FILTERS_POPOVER_WIDTH_REM,
+  getFiltersPanelWidth
+};
+//# sourceMappingURL=filtersLayout.js.map

package/dist/components/Search/filters/filtersLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filtersLayout.js","sources":["../../../../src/components/Search/filters/filtersLayout.ts"],"sourcesContent":["import { remToPx } from '@/helpers/utilityHelpers';\n\nexport type TFiltersVariant = 'drawer' | 'popover' | 'inline' | 'chips';\nexport type TFiltersSize = 'sm' | 'md' | 'lg';\n\n/**\n * Widths live in rem so the panel follows the fluid density scale\n * (`html { font-size: clamp(...) }`), instead of the old hardcoded 400px.\n */\nconst FILTERS_WIDTH_REM: Record<TFiltersSize, number> = {\n  sm: 22,\n  md: 26,\n  lg: 32,\n};\n\nconst VIEWPORT_RATIO = 0.92;\n\nexport const getFiltersPanelWidth = (size: TFiltersSize): number => {\n  const desired = remToPx(FILTERS_WIDTH_REM[size]);\n  const viewportCap = typeof window === 'undefined' ? desired : Math.round(window.innerWidth * VIEWPORT_RATIO);\n\n  return Math.min(desired, viewportCap);\n};\n\nexport const FILTERS_POPOVER_WIDTH_REM = 20;\n"],"names":[],"mappings":";AASA,MAAM,oBAAkD;AAAA,EACtD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,iBAAiB;AAEhB,MAAM,uBAAuB,CAAC,SAA+B;AAClE,QAAM,UAAU,QAAQ,kBAAkB,IAAI,CAAC;AAC/C,QAAM,cAAc,OAAO,WAAW,cAAc,UAAU,KAAK,MAAM,OAAO,aAAa,cAAc;AAE3G,SAAO,KAAK,IAAI,SAAS,WAAW;AACtC;AAEO,MAAM,4BAA4B;"}

package/dist/components/Search/filters/index.d.ts

@@ -0,0 +1,11 @@
+export { default as ActiveFiltersBar } from './ActiveFiltersBar';
+export { default as FilterChipsRow } from './FilterChipsRow';
+export { default as FilterFieldControl } from './FilterFieldControl';
+export { default as FiltersButton } from './FiltersButton';
+export { default as FiltersForm } from './FiltersForm';
+export * from './filtersLayout';
+export { default as FiltersPanel } from './FiltersPanel';
+export { default as FiltersSummaryTooltip } from './FiltersSummaryTooltip';
+export * from './filterTypes';
+export * from './filterValues';
+export { useFilters } from './useFilters';

package/dist/components/Search/filters/index.js

@@ -0,0 +1,32 @@
+import { default as default2 } from "./ActiveFiltersBar.js";
+import { default as default3 } from "./FilterChipsRow.js";
+import { default as default4 } from "./FilterFieldControl.js";
+import { default as default5 } from "./FiltersButton.js";
+import { default as default6 } from "./FiltersForm.js";
+import { FILTERS_POPOVER_WIDTH_REM, getFiltersPanelWidth } from "./filtersLayout.js";
+import { default as default7 } from "./FiltersPanel.js";
+import { default as default8 } from "./FiltersSummaryTooltip.js";
+import { areFilterValuesEqual, buildEmptyFilterValues, clearDependentValues, countActiveFilters, emptyValueForKind, formatFilterValue, getActiveFilterFields, getVisibleFilterFields, isFilterValueEmpty } from "./filterValues.js";
+import { useFilters } from "./useFilters.js";
+export {
+  default2 as ActiveFiltersBar,
+  FILTERS_POPOVER_WIDTH_REM,
+  default3 as FilterChipsRow,
+  default4 as FilterFieldControl,
+  default5 as FiltersButton,
+  default6 as FiltersForm,
+  default7 as FiltersPanel,
+  default8 as FiltersSummaryTooltip,
+  areFilterValuesEqual,
+  buildEmptyFilterValues,
+  clearDependentValues,
+  countActiveFilters,
+  emptyValueForKind,
+  formatFilterValue,
+  getActiveFilterFields,
+  getFiltersPanelWidth,
+  getVisibleFilterFields,
+  isFilterValueEmpty,
+  useFilters
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Search/filters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/Search/filters/useFilters.d.ts

@@ -0,0 +1,33 @@
+import { TFilterField, TFilterValues } from './filterTypes';
+export interface IUseFiltersParams {
+    fields: Array<TFilterField>;
+    /** Values owned by the host. When given, the hook is controlled. */
+    value?: TFilterValues;
+    onChange?: (values: TFilterValues) => void;
+    initialValues?: TFilterValues;
+    /**
+     * Namespace for URL persistence. Without it, filters live only in memory
+     * (current behaviour everywhere in the app).
+     */
+    urlKey?: string;
+}
+export interface IUseFiltersResult {
+    /** Values currently in effect on the list. */
+    applied: TFilterValues;
+    /** Values being edited inside the drawer. */
+    draft: TFilterValues;
+    isDirty: boolean;
+    activeCount: number;
+    activeFields: Array<TFilterField>;
+    setDraftValue: (key: string, value: unknown) => void;
+    setDraft: (values: TFilterValues) => void;
+    resetDraft: () => void;
+    apply: () => TFilterValues;
+    clear: () => TFilterValues;
+    removeApplied: (key: string) => TFilterValues;
+}
+/**
+ * Single owner of filter state: draft while the panel is open, applied once
+ * confirmed. Every consumer used to rebuild this by hand, each one differently.
+ */
+export declare const useFilters: ({ fields, value, onChange, initialValues, urlKey, }: IUseFiltersParams) => IUseFiltersResult;

package/dist/components/Search/filters/useFilters.js

@@ -0,0 +1,162 @@
+import { useMemo, useCallback, useState, useRef, useEffect } from "react";
+import { useUiNavigation } from "../../Navigation/UiNavigationContext.js";
+import { buildEmptyFilterValues, clearDependentValues, emptyValueForKind, getActiveFilterFields, areFilterValuesEqual, countActiveFilters } from "./filterValues.js";
+const URL_PREFIX = "f.";
+const serializeValue = (value) => {
+  if (value === null || value === void 0) return null;
+  if (Array.isArray(value)) return value.length > 0 ? value.map(String).join(",") : null;
+  if (typeof value === "boolean") return value ? "1" : null;
+  if (typeof value === "object") {
+    const entries = Object.entries(value).filter(
+      ([, entry]) => entry !== void 0 && entry !== null && entry !== ""
+    );
+    return entries.length > 0 ? JSON.stringify(Object.fromEntries(entries)) : null;
+  }
+  const asString = String(value);
+  return asString.trim().length > 0 ? asString : null;
+};
+const deserializeValue = (field, raw) => {
+  switch (field.kind) {
+    case "multiselect":
+    case "checkbox-group":
+    case "tags":
+      return raw.split(",").filter(Boolean);
+    case "boolean":
+      return raw === "1" || raw === "true";
+    case "number":
+      return raw;
+    case "date-range":
+    case "range":
+      try {
+        return JSON.parse(raw);
+      } catch {
+        return emptyValueForKind(field.kind);
+      }
+    case "async-select":
+      return field.multiple ? raw.split(",").filter(Boolean) : raw;
+    default:
+      return raw;
+  }
+};
+const useFilters = ({
+  fields,
+  value,
+  onChange,
+  initialValues,
+  urlKey
+}) => {
+  const safeFields = useMemo(() => Array.isArray(fields) ? fields : [], [fields]);
+  const { searchParams, setSearchParams } = useUiNavigation();
+  const readFromUrl = useCallback(() => {
+    if (!urlKey) return null;
+    const fromUrl = {};
+    let found = false;
+    safeFields.forEach((field) => {
+      const raw = searchParams.get(`${URL_PREFIX}${urlKey}.${field.key}`);
+      if (raw === null) return;
+      found = true;
+      fromUrl[field.key] = deserializeValue(field, raw);
+    });
+    return found ? fromUrl : null;
+  }, [urlKey, safeFields, searchParams]);
+  const buildInitial = useCallback(
+    () => ({
+      ...buildEmptyFilterValues(safeFields),
+      ...initialValues ?? {},
+      ...readFromUrl() ?? {}
+    }),
+    // `readFromUrl` is only meant to seed the first render; re-reading it on
+    // every change would fight the user typing in the drawer.
+    [safeFields]
+  );
+  const [internalApplied, setInternalApplied] = useState(buildInitial);
+  const applied = value ?? internalApplied;
+  const [draft, setDraftState] = useState(applied);
+  const draftRef = useRef(draft);
+  const commitDraft = useCallback((next) => {
+    draftRef.current = next;
+    setDraftState(next);
+  }, []);
+  const appliedKey = JSON.stringify(applied);
+  useEffect(() => {
+    commitDraft(applied);
+  }, [appliedKey, commitDraft]);
+  const writeToUrl = useCallback(
+    (next) => {
+      if (!urlKey) return;
+      setSearchParams(
+        (current) => {
+          const params = new URLSearchParams(current);
+          safeFields.forEach((field) => {
+            const paramKey = `${URL_PREFIX}${urlKey}.${field.key}`;
+            const serialized = serializeValue(next[field.key]);
+            if (serialized === null) {
+              params.delete(paramKey);
+            } else {
+              params.set(paramKey, serialized);
+            }
+          });
+          return params;
+        },
+        { replace: true }
+      );
+    },
+    [urlKey, safeFields, setSearchParams]
+  );
+  const publish = useCallback(
+    (next) => {
+      if (value === void 0) setInternalApplied(next);
+      writeToUrl(next);
+      onChange?.(next);
+      return next;
+    },
+    [value, writeToUrl, onChange]
+  );
+  const setDraftValue = useCallback(
+    (key, nextValue) => {
+      const withValue = { ...draftRef.current, [key]: nextValue };
+      commitDraft(clearDependentValues(safeFields, key, withValue));
+    },
+    [safeFields, commitDraft]
+  );
+  const setDraft = useCallback((values) => commitDraft(values), [commitDraft]);
+  const resetDraft = useCallback(() => commitDraft(applied), [applied, commitDraft]);
+  const apply = useCallback(() => publish({ ...draftRef.current }), [publish]);
+  const clear = useCallback(() => {
+    const empty = buildEmptyFilterValues(safeFields);
+    commitDraft(empty);
+    return publish(empty);
+  }, [safeFields, commitDraft, publish]);
+  const removeApplied = useCallback(
+    (key) => {
+      const field = safeFields.find((item) => item.key === key);
+      if (!field) return applied;
+      const next = clearDependentValues(safeFields, key, {
+        ...applied,
+        [key]: emptyValueForKind(field.kind)
+      });
+      commitDraft(next);
+      return publish(next);
+    },
+    [safeFields, applied, commitDraft, publish]
+  );
+  const activeFields = useMemo(() => getActiveFilterFields(safeFields, applied), [safeFields, applied]);
+  const isDirty = useMemo(() => !areFilterValuesEqual(draft, applied), [draft, applied]);
+  return {
+    applied,
+    draft,
+    isDirty,
+    activeCount: countActiveFilters(safeFields, applied),
+    activeFields,
+    setDraftValue,
+    setDraft,
+    resetDraft,
+    apply,
+    clear,
+    removeApplied
+  };
+};
+export {
+  useFilters
+};
+//# sourceMappingURL=useFilters.js.map

package/dist/components/Search/filters/useFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilters.js","sources":["../../../../src/components/Search/filters/useFilters.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\n\nimport { TFilterField, TFilterValues } from './filterTypes';\nimport {\n  areFilterValuesEqual,\n  buildEmptyFilterValues,\n  clearDependentValues,\n  countActiveFilters,\n  emptyValueForKind,\n  getActiveFilterFields,\n} from './filterValues';\n\nconst URL_PREFIX = 'f.';\n\nconst serializeValue = (value: unknown): string | null => {\n  if (value === null || value === undefined) return null;\n  if (Array.isArray(value)) return value.length > 0 ? value.map(String).join(',') : null;\n  if (typeof value === 'boolean') return value ? '1' : null;\n  if (typeof value === 'object') {\n    const entries = Object.entries(value as Record<string, unknown>).filter(\n      ([, entry]) => entry !== undefined && entry !== null && entry !== '',\n    );\n    return entries.length > 0 ? JSON.stringify(Object.fromEntries(entries)) : null;\n  }\n  const asString = String(value);\n\n  return asString.trim().length > 0 ? asString : null;\n};\n\nconst deserializeValue = (field: TFilterField, raw: string): unknown => {\n  switch (field.kind) {\n    case 'multiselect':\n    case 'checkbox-group':\n    case 'tags':\n      return raw.split(',').filter(Boolean);\n    case 'boolean':\n      return raw === '1' || raw === 'true';\n    case 'number':\n      return raw;\n    case 'date-range':\n    case 'range':\n      try {\n        return JSON.parse(raw);\n      } catch {\n        return emptyValueForKind(field.kind);\n      }\n    case 'async-select':\n      return field.multiple ? raw.split(',').filter(Boolean) : raw;\n    default:\n      return raw;\n  }\n};\n\nexport interface IUseFiltersParams {\n  fields: Array<TFilterField>;\n  /** Values owned by the host. When given, the hook is controlled. */\n  value?: TFilterValues;\n  onChange?: (values: TFilterValues) => void;\n  initialValues?: TFilterValues;\n  /**\n   * Namespace for URL persistence. Without it, filters live only in memory\n   * (current behaviour everywhere in the app).\n   */\n  urlKey?: string;\n}\n\nexport interface IUseFiltersResult {\n  /** Values currently in effect on the list. */\n  applied: TFilterValues;\n  /** Values being edited inside the drawer. */\n  draft: TFilterValues;\n  isDirty: boolean;\n  activeCount: number;\n  activeFields: Array<TFilterField>;\n  setDraftValue: (key: string, value: unknown) => void;\n  setDraft: (values: TFilterValues) => void;\n  resetDraft: () => void;\n  apply: () => TFilterValues;\n  clear: () => TFilterValues;\n  removeApplied: (key: string) => TFilterValues;\n}\n\n/**\n * Single owner of filter state: draft while the panel is open, applied once\n * confirmed. Every consumer used to rebuild this by hand, each one differently.\n */\nexport const useFilters = ({\n  fields,\n  value,\n  onChange,\n  initialValues,\n  urlKey,\n}: IUseFiltersParams): IUseFiltersResult => {\n  const safeFields = useMemo(() => (Array.isArray(fields) ? fields : []), [fields]);\n  const { searchParams, setSearchParams } = useUiNavigation();\n\n  const readFromUrl = useCallback((): TFilterValues | null => {\n    if (!urlKey) return null;\n    const fromUrl: TFilterValues = {};\n    let found = false;\n    safeFields.forEach((field) => {\n      const raw = searchParams.get(`${URL_PREFIX}${urlKey}.${field.key}`);\n      if (raw === null) return;\n      found = true;\n      fromUrl[field.key] = deserializeValue(field, raw);\n    });\n\n    return found ? fromUrl : null;\n  }, [urlKey, safeFields, searchParams]);\n\n  const buildInitial = useCallback(\n    (): TFilterValues => ({\n      ...buildEmptyFilterValues(safeFields),\n      ...(initialValues ?? {}),\n      ...(readFromUrl() ?? {}),\n    }),\n    // `readFromUrl` is only meant to seed the first render; re-reading it on\n    // every change would fight the user typing in the drawer.\n    [safeFields],\n  );\n\n  const [internalApplied, setInternalApplied] = useState<TFilterValues>(buildInitial);\n  const applied = value ?? internalApplied;\n\n  const [draft, setDraftState] = useState<TFilterValues>(applied);\n  const draftRef = useRef<TFilterValues>(draft);\n\n  const commitDraft = useCallback((next: TFilterValues) => {\n    draftRef.current = next;\n    setDraftState(next);\n  }, []);\n\n  const appliedKey = JSON.stringify(applied);\n\n  // The host can apply values from outside (deep link, a freshly created\n  // record, a preset). The draft must follow, or the panel would reopen\n  // showing stale values.\n  useEffect(() => {\n    commitDraft(applied);\n  }, [appliedKey, commitDraft]);\n\n  const writeToUrl = useCallback(\n    (next: TFilterValues) => {\n      if (!urlKey) return;\n      setSearchParams(\n        (current) => {\n          const params = new URLSearchParams(current);\n          safeFields.forEach((field) => {\n            const paramKey = `${URL_PREFIX}${urlKey}.${field.key}`;\n            const serialized = serializeValue(next[field.key]);\n            if (serialized === null) {\n              params.delete(paramKey);\n            } else {\n              params.set(paramKey, serialized);\n            }\n          });\n\n          return params;\n        },\n        { replace: true },\n      );\n    },\n    [urlKey, safeFields, setSearchParams],\n  );\n\n  const publish = useCallback(\n    (next: TFilterValues) => {\n      if (value === undefined) setInternalApplied(next);\n      writeToUrl(next);\n      onChange?.(next);\n\n      return next;\n    },\n    [value, writeToUrl, onChange],\n  );\n\n  const setDraftValue = useCallback(\n    (key: string, nextValue: unknown) => {\n      const withValue = { ...draftRef.current, [key]: nextValue };\n      commitDraft(clearDependentValues(safeFields, key, withValue));\n    },\n    [safeFields, commitDraft],\n  );\n\n  const setDraft = useCallback((values: TFilterValues) => commitDraft(values), [commitDraft]);\n\n  const resetDraft = useCallback(() => commitDraft(applied), [applied, commitDraft]);\n\n  const apply = useCallback(() => publish({ ...draftRef.current }), [publish]);\n\n  const clear = useCallback(() => {\n    const empty = buildEmptyFilterValues(safeFields);\n    commitDraft(empty);\n\n    return publish(empty);\n  }, [safeFields, commitDraft, publish]);\n\n  const removeApplied = useCallback(\n    (key: string) => {\n      const field = safeFields.find((item) => item.key === key);\n      if (!field) return applied;\n      const next = clearDependentValues(safeFields, key, {\n        ...applied,\n        [key]: emptyValueForKind(field.kind),\n      });\n      commitDraft(next);\n\n      return publish(next);\n    },\n    [safeFields, applied, commitDraft, publish],\n  );\n\n  const activeFields = useMemo(() => getActiveFilterFields(safeFields, applied), [safeFields, applied]);\n\n  const isDirty = useMemo(() => !areFilterValuesEqual(draft, applied), [draft, applied]);\n\n  return {\n    applied,\n    draft,\n    isDirty,\n    activeCount: countActiveFilters(safeFields, applied),\n    activeFields,\n    setDraftValue,\n    setDraft,\n    resetDraft,\n    apply,\n    clear,\n    removeApplied,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Search/index.d.ts

@@ -0,0 +1,2 @@
+export * from './filters';
+export { default as UnifiedSearchBar } from './UnifiedSearchBar';

package/dist/components/Search/index.js

@@ -0,0 +1,34 @@
+import { default as default2 } from "./filters/ActiveFiltersBar.js";
+import { default as default3 } from "./filters/FilterChipsRow.js";
+import { default as default4 } from "./filters/FilterFieldControl.js";
+import { default as default5 } from "./filters/FiltersButton.js";
+import { default as default6 } from "./filters/FiltersForm.js";
+import { FILTERS_POPOVER_WIDTH_REM, getFiltersPanelWidth } from "./filters/filtersLayout.js";
+import { default as default7 } from "./filters/FiltersPanel.js";
+import { default as default8 } from "./filters/FiltersSummaryTooltip.js";
+import { areFilterValuesEqual, buildEmptyFilterValues, clearDependentValues, countActiveFilters, emptyValueForKind, formatFilterValue, getActiveFilterFields, getVisibleFilterFields, isFilterValueEmpty } from "./filters/filterValues.js";
+import { useFilters } from "./filters/useFilters.js";
+import { default as default9 } from "./UnifiedSearchBar.js";
+export {
+  default2 as ActiveFiltersBar,
+  FILTERS_POPOVER_WIDTH_REM,
+  default3 as FilterChipsRow,
+  default4 as FilterFieldControl,
+  default5 as FiltersButton,
+  default6 as FiltersForm,
+  default7 as FiltersPanel,
+  default8 as FiltersSummaryTooltip,
+  default9 as UnifiedSearchBar,
+  areFilterValuesEqual,
+  buildEmptyFilterValues,
+  clearDependentValues,
+  countActiveFilters,
+  emptyValueForKind,
+  formatFilterValue,
+  getActiveFilterFields,
+  getFiltersPanelWidth,
+  getVisibleFilterFields,
+  isFilterValueEmpty,
+  useFilters
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Search/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/components/Shell/AppHeader.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode, Ref } from 'react';
+interface IAppHeaderProps {
+    toggleSidebar: () => void;
+    isSidebarOpen: boolean;
+    toggleLabelKey: string;
+    toggleRef?: Ref<HTMLElement>;
+    /** Mobile drawer only: drives `aria-expanded` / `aria-controls` on the toggle. */
+    mobileSidebar?: {
+        id: string;
+        open: boolean;
+    };
+    homePath: string;
+    /** Replaces the uMode logo; the header stays the same. */
+    logo?: ReactNode;
+    /** App tools rendered inside the pill shell (workspace, notifications...). */
+    toolsSlot?: ReactNode;
+    /** Theme/language knobs (usually the lib's ThemeToggle + LanguageToggle wired by the host). */
+    controlsSlot?: ReactNode;
+    /** The account surface (usually the lib's UserMenu wired by the host). */
+    userMenuSlot?: ReactNode;
+    onHoverEnter: () => void;
+    onHoverLeave: () => void;
+}
+declare const AppHeader: React.FC<IAppHeaderProps>;
+export default AppHeader;

package/dist/components/Shell/AppHeader.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { useUiNavigation } from "../Navigation/UiNavigationContext.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import UmodeLogo from "../UI/UmodeLogo.js";
+import { HEADER_CONTROL_SHELL_CLASS } from "./headerControlStyles.js";
+const AppHeader = ({
+  toggleSidebar,
+  isSidebarOpen,
+  toggleLabelKey,
+  toggleRef,
+  mobileSidebar,
+  homePath,
+  logo,
+  toolsSlot,
+  controlsSlot,
+  userMenuSlot,
+  onHoverEnter,
+  onHoverLeave
+}) => {
+  const { t } = useTranslation("ui");
+  const { Link: NavigationLink } = useUiNavigation();
+  return /* @__PURE__ */ jsxs("header", { className: "fixed top-0 z-50 flex h-16 w-full select-none items-center justify-between border-x-0 border-t-0 py-2 pr-4 glass-subtle", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "sidebar-rail-slot flex shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(
+        MaterialSymbol,
+        {
+          icon: isSidebarOpen ? "menu_open" : "menu",
+          size: 22,
+          weight: 400,
+          ref: toggleRef,
+          onClick: toggleSidebar,
+          "aria-controls": mobileSidebar?.id,
+          "aria-expanded": mobileSidebar?.open,
+          onMouseEnter: onHoverEnter,
+          onMouseLeave: onHoverLeave,
+          "aria-label": t(toggleLabelKey),
+          className: classNames(
+            "rounded-lg p-1 transition-colors duration-base",
+            isSidebarOpen ? "text-brand-emphasis hover:bg-brand-soft" : "text-foreground-muted hover:bg-muted-hover hover:text-foreground"
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: t("sidebar.home"), children: /* @__PURE__ */ jsx(
+        NavigationLink,
+        {
+          to: homePath,
+          "aria-label": t("sidebar.home"),
+          className: "interactive hidden shrink-0 rounded-lg px-1 text-foreground hover:opacity-70 tablet:block",
+          children: logo ?? /* @__PURE__ */ jsx(UmodeLogo, { className: "h-5 w-auto" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      toolsSlot && /* @__PURE__ */ jsx("div", { className: HEADER_CONTROL_SHELL_CLASS, children: toolsSlot }),
+      controlsSlot,
+      userMenuSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px shrink-0 bg-border", "aria-hidden": true }),
+        userMenuSlot
+      ] })
+    ] })
+  ] });
+};
+export {
+  AppHeader as default
+};
+//# sourceMappingURL=AppHeader.js.map

package/dist/components/Shell/AppHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.js","sources":["../../../src/components/Shell/AppHeader.tsx"],"sourcesContent":["import { ReactNode, Ref } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport UmodeLogo from '@/components/UI/UmodeLogo';\n\nimport { HEADER_CONTROL_SHELL_CLASS } from './headerControlStyles';\n\ninterface IAppHeaderProps {\n  toggleSidebar: () => void;\n  isSidebarOpen: boolean;\n  toggleLabelKey: string;\n  toggleRef?: Ref<HTMLElement>;\n  /** Mobile drawer only: drives `aria-expanded` / `aria-controls` on the toggle. */\n  mobileSidebar?: { id: string; open: boolean };\n  homePath: string;\n  /** Replaces the uMode logo; the header stays the same. */\n  logo?: ReactNode;\n  /** App tools rendered inside the pill shell (workspace, notifications...). */\n  toolsSlot?: ReactNode;\n  /** Theme/language knobs (usually the lib's ThemeToggle + LanguageToggle wired by the host). */\n  controlsSlot?: ReactNode;\n  /** The account surface (usually the lib's UserMenu wired by the host). */\n  userMenuSlot?: ReactNode;\n  onHoverEnter: () => void;\n  onHoverLeave: () => void;\n}\n\nconst AppHeader: React.FC<IAppHeaderProps> = ({\n  toggleSidebar,\n  isSidebarOpen,\n  toggleLabelKey,\n  toggleRef,\n  mobileSidebar,\n  homePath,\n  logo,\n  toolsSlot,\n  controlsSlot,\n  userMenuSlot,\n  onHoverEnter,\n  onHoverLeave,\n}) => {\n  const { t } = useTranslation('ui');\n  const { Link: NavigationLink } = useUiNavigation();\n\n  return (\n    <header className=\"fixed top-0 z-50 flex h-16 w-full select-none items-center justify-between border-x-0 border-t-0 py-2 pr-4 glass-subtle\">\n      <div className=\"flex cursor-pointer items-center gap-x-2\">\n        <div className=\"sidebar-rail-slot flex shrink-0 items-center justify-center\">\n          <MaterialSymbol\n            icon={isSidebarOpen ? 'menu_open' : 'menu'}\n            size={22}\n            weight={400}\n            ref={toggleRef}\n            onClick={toggleSidebar}\n            aria-controls={mobileSidebar?.id}\n            aria-expanded={mobileSidebar?.open}\n            onMouseEnter={onHoverEnter}\n            onMouseLeave={onHoverLeave}\n            aria-label={t(toggleLabelKey)}\n            className={classNames(\n              'rounded-lg p-1 transition-colors duration-base',\n              isSidebarOpen\n                ? 'text-brand-emphasis hover:bg-brand-soft'\n                : 'text-foreground-muted hover:bg-muted-hover hover:text-foreground',\n            )}\n          />\n        </div>\n\n        <ControlledTooltip content={t('sidebar.home')}>\n          <NavigationLink\n            to={homePath}\n            aria-label={t('sidebar.home')}\n            className=\"interactive hidden shrink-0 rounded-lg px-1 text-foreground hover:opacity-70 tablet:block\"\n          >\n            {logo ?? <UmodeLogo className=\"h-5 w-auto\" />}\n          </NavigationLink>\n        </ControlledTooltip>\n      </div>\n\n      <div className=\"flex items-center gap-x-2\">\n        {toolsSlot && <div className={HEADER_CONTROL_SHELL_CLASS}>{toolsSlot}</div>}\n        {controlsSlot}\n\n        {userMenuSlot && (\n          <>\n            <div className=\"mx-1 h-6 w-px shrink-0 bg-border\" aria-hidden />\n            {userMenuSlot}\n          </>\n        )}\n      </div>\n    </header>\n  );\n};\n\nexport default AppHeader;\n"],"names":[],"mappings":";;;;;;;;AA+BA,MAAM,YAAuC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,EAAE,MAAM,eAAA,IAAmB,gBAAA;AAEjC,SACE,qBAAC,UAAA,EAAO,WAAU,2HAChB,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,+DACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,gBAAgB,cAAc;AAAA,UACpC,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,KAAK;AAAA,UACL,SAAS;AAAA,UACT,iBAAe,eAAe;AAAA,UAC9B,iBAAe,eAAe;AAAA,UAC9B,cAAc;AAAA,UACd,cAAc;AAAA,UACd,cAAY,EAAE,cAAc;AAAA,UAC5B,WAAW;AAAA,YACT;AAAA,YACA,gBACI,4CACA;AAAA,UAAA;AAAA,QACN;AAAA,MAAA,GAEJ;AAAA,MAEA,oBAAC,mBAAA,EAAkB,SAAS,EAAE,cAAc,GAC1C,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,cAAY,EAAE,cAAc;AAAA,UAC5B,WAAU;AAAA,UAET,UAAA,QAAQ,oBAAC,WAAA,EAAU,WAAU,aAAA,CAAa;AAAA,QAAA;AAAA,MAAA,EAC7C,CACF;AAAA,IAAA,GACF;AAAA,IAEA,qBAAC,OAAA,EAAI,WAAU,6BACZ,UAAA;AAAA,MAAA,aAAa,oBAAC,OAAA,EAAI,WAAW,4BAA6B,UAAA,WAAU;AAAA,MACpE;AAAA,MAEA,gBACC,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,oCAAmC,eAAW,MAAC;AAAA,QAC7D;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/Shell/AppShell.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { ISidebarMenuItem } from './SidebarMenu';
+interface IAppShellProps {
+    items: Array<ISidebarMenuItem>;
+    homePath: string;
+    logo?: ReactNode;
+    toolsSlot?: ReactNode;
+    controlsSlot?: ReactNode;
+    userMenuSlot?: ReactNode;
+    /** Sidebar rows pinned to the foot, above the sign-out row (profile, settings, help). */
+    footerItems?: Array<ISidebarMenuItem>;
+    /** Sidebar footer sign-out row; hidden when absent. */
+    onLogout?: () => void;
+    children: ReactNode;
+}
+/**
+ * The uMode application chrome: fixed glass header, rail/dock/hover sidebar (pin persisted
+ * through uiPreferences, Ctrl+\ shortcut) and the scroll container every page renders into.
+ * Everything app-shaped (menu items, tools, account surface, logout) arrives as props/slots.
+ */
+declare const AppShell: React.FC<IAppShellProps>;
+export default AppShell;