@umodeapporg/ui 0.1.0

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 { useSearchParams } from "react-router-dom";
+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] = useSearchParams();
+  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';\nimport { useSearchParams } from 'react-router-dom';\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] = useSearchParams();\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/UI/AccordionIcon.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'react';
+interface IIconProps {
+    id: number;
+    open: number;
+    slot?: JSX.Element;
+    size?: number;
+    iconClassName?: string;
+}
+export declare function AccordionIcon({ id, open, slot, size, iconClassName }: IIconProps): JSX.Element;
+export {};

package/dist/components/UI/AccordionIcon.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ControlledTooltip from "./ControlledTooltip.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+function AccordionIcon({ id, open, slot, size = 20, iconClassName }) {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-x-2", children: [
+    slot,
+    /* @__PURE__ */ jsx(ControlledTooltip, { content: open === id ? t("accordion.hide") : t("accordion.expand"), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      MaterialSymbol,
+      {
+        icon: open === id ? "keyboard_arrow_up" : "keyboard_arrow_down",
+        size,
+        className: iconClassName
+      }
+    ) }) })
+  ] });
+}
+export {
+  AccordionIcon
+};
+//# sourceMappingURL=AccordionIcon.js.map

package/dist/components/UI/AccordionIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionIcon.js","sources":["../../../src/components/UI/AccordionIcon.tsx"],"sourcesContent":["import { JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\ninterface IIconProps {\n  id: number;\n  open: number;\n  slot?: JSX.Element;\n  size?: number;\n  iconClassName?: string;\n}\n\nexport function AccordionIcon({ id, open, slot, size = 20, iconClassName }: IIconProps) {\n  const { t } = useTranslation('ui');\n\n  return (\n    <div className=\"flex flex-row gap-x-2\">\n      {slot}\n\n      <ControlledTooltip content={open === id ? t('accordion.hide') : t('accordion.expand')}>\n        <div>\n          <MaterialSymbol\n            icon={open === id ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\n            size={size}\n            className={iconClassName}\n          />\n        </div>\n      </ControlledTooltip>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAcO,SAAS,cAAc,EAAE,IAAI,MAAM,MAAM,OAAO,IAAI,iBAA6B;AACtF,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,SACE,qBAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,IAAA;AAAA,IAED,oBAAC,mBAAA,EAAkB,SAAS,SAAS,KAAK,EAAE,gBAAgB,IAAI,EAAE,kBAAkB,GAClF,UAAA,oBAAC,OAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,SAAS,KAAK,sBAAsB;AAAA,QAC1C;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IAAA,GAEf,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/UI/AlertInfo/dismissedAlertsStore.d.ts

@@ -0,0 +1,2 @@
+export declare const isAlertDismissed: (dismissKey: string) => boolean;
+export declare const markAlertDismissed: (dismissKey: string) => void;

package/dist/components/UI/AlertInfo/dismissedAlertsStore.js

@@ -0,0 +1,22 @@
+import { readUiPreference, resolveUiPreferenceScopeId, writeUiPreference } from "../../../helpers/uiPreferences.js";
+const DISMISSED_ALERTS_KEY = "dismissed_alerts";
+const scopedKey = (dismissKey) => {
+  const scopeId = resolveUiPreferenceScopeId();
+  return scopeId ? `${scopeId}:${dismissKey}` : null;
+};
+const readStore = () => readUiPreference(DISMISSED_ALERTS_KEY) ?? {};
+const isAlertDismissed = (dismissKey) => {
+  const key = scopedKey(dismissKey);
+  return key ? readStore()[key] === true : false;
+};
+const markAlertDismissed = (dismissKey) => {
+  const key = scopedKey(dismissKey);
+  if (!key) return;
+  const store = readStore();
+  writeUiPreference(DISMISSED_ALERTS_KEY, { ...store, [key]: true });
+};
+export {
+  isAlertDismissed,
+  markAlertDismissed
+};
+//# sourceMappingURL=dismissedAlertsStore.js.map

package/dist/components/UI/AlertInfo/dismissedAlertsStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dismissedAlertsStore.js","sources":["../../../../src/components/UI/AlertInfo/dismissedAlertsStore.ts"],"sourcesContent":["import { readUiPreference, resolveUiPreferenceScopeId, writeUiPreference } from '@/helpers/uiPreferences';\n\n// Single consolidated entry for every dismissible alert, mirroring the DataTable\n// columns store. Each dismissal is keyed by `${scopeId}:${dismissKey}` so the\n// preference is scoped per user and per alert on a shared browser profile.\nconst DISMISSED_ALERTS_KEY = 'dismissed_alerts';\n\ntype TDismissedAlertsStore = Record<string, boolean>;\n\n// Returns null when there is no scope (no authenticated user), so the preference is\n// never written to (or read from) a shared bucket that would collide across accounts.\nconst scopedKey = (dismissKey: string): string | null => {\n  const scopeId = resolveUiPreferenceScopeId();\n  return scopeId ? `${scopeId}:${dismissKey}` : null;\n};\n\nconst readStore = (): TDismissedAlertsStore => readUiPreference<TDismissedAlertsStore>(DISMISSED_ALERTS_KEY) ?? {};\n\nexport const isAlertDismissed = (dismissKey: string): boolean => {\n  const key = scopedKey(dismissKey);\n  return key ? readStore()[key] === true : false;\n};\n\nexport const markAlertDismissed = (dismissKey: string): void => {\n  const key = scopedKey(dismissKey);\n  if (!key) return;\n\n  const store = readStore();\n  writeUiPreference(DISMISSED_ALERTS_KEY, { ...store, [key]: true });\n};\n"],"names":[],"mappings":";AAKA,MAAM,uBAAuB;AAM7B,MAAM,YAAY,CAAC,eAAsC;AACvD,QAAM,UAAU,2BAAA;AAChB,SAAO,UAAU,GAAG,OAAO,IAAI,UAAU,KAAK;AAChD;AAEA,MAAM,YAAY,MAA6B,iBAAwC,oBAAoB,KAAK,CAAA;AAEzG,MAAM,mBAAmB,CAAC,eAAgC;AAC/D,QAAM,MAAM,UAAU,UAAU;AAChC,SAAO,MAAM,UAAA,EAAY,GAAG,MAAM,OAAO;AAC3C;AAEO,MAAM,qBAAqB,CAAC,eAA6B;AAC9D,QAAM,MAAM,UAAU,UAAU;AAChC,MAAI,CAAC,IAAK;AAEV,QAAM,QAAQ,UAAA;AACd,oBAAkB,sBAAsB,EAAE,GAAG,OAAO,CAAC,GAAG,GAAG,MAAM;AACnE;"}

package/dist/components/UI/AlertInfo/index.d.ts

@@ -0,0 +1,30 @@
+import { TChipTone } from '../Chips/chipTones';
+import { SymbolCodepoints } from '../MaterialSymbol';
+/** A chip is either a plain label (soft purple) or carries its own tone and icon. */
+export type TAlertInfoField = string | {
+    label: string;
+    tone?: TChipTone;
+    icon?: SymbolCodepoints;
+};
+interface IAlertInfoProps {
+    title: string;
+    description?: string;
+    /** System/native labels rendered as chips. Strings default to the purple tone. */
+    fields?: Array<TAlertInfoField>;
+    /** Default leading icon for every chip that does not set its own (e.g. a lock for immutable values). */
+    fieldsIcon?: SymbolCodepoints;
+    /** Caption rendered inline right after the chips. The consumer composes it from `t()`. */
+    fieldsNote?: React.ReactNode;
+    /** Closing line rendered below the chips. The consumer composes it from `t()`. */
+    footnote?: React.ReactNode;
+    /**
+     * When set, the alert renders a dismiss button and persists the dismissal per
+     * user under this key, so dismissing one alert never affects the others.
+     */
+    dismissKey?: string;
+    /** Accessible name for the dismiss button, always from `t()`. */
+    dismissLabel?: string;
+    className?: string;
+}
+declare const AlertInfo: React.FC<IAlertInfoProps>;
+export default AlertInfo;

package/dist/components/UI/AlertInfo/index.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import classNames from "classnames";
+import ControlledButton from "../../Form/ControlledButton.js";
+import OutlinedChip from "../Chips/OutlinedChip.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { isAlertDismissed, markAlertDismissed } from "./dismissedAlertsStore.js";
+const AlertInfo = ({
+  title,
+  description,
+  fields,
+  fieldsIcon,
+  fieldsNote,
+  footnote,
+  dismissKey,
+  dismissLabel,
+  className
+}) => {
+  const [visible, setVisible] = useState(() => !(dismissKey && isAlertDismissed(dismissKey)));
+  const handleDismiss = useCallback(() => {
+    if (dismissKey) markAlertDismissed(dismissKey);
+    setVisible(false);
+  }, [dismissKey]);
+  if (!visible) return null;
+  const safeFields = (fields ?? []).map(
+    (field) => typeof field === "string" ? { label: field, tone: "purple", icon: fieldsIcon } : field
+  );
+  const dismissButton = dismissKey && dismissLabel ? /* @__PURE__ */ jsx(
+    ControlledButton,
+    {
+      defaultHtmlButton: true,
+      onClick: handleDismiss,
+      "aria-label": dismissLabel,
+      className: "interactive flex size-7 shrink-0 items-center justify-center rounded-lg text-brand-emphasis hover:bg-brand-soft",
+      children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close", size: 18 })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: classNames(
+        "flex items-start gap-3 rounded-xl border border-l-[3px] border-brand-border border-l-brand bg-brand-soft/50 p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-brand text-brand-fg", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "info", size: 20 }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-y-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground-muted", children: description }),
+          safeFields.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1.5", children: [
+            safeFields.map((field) => /* @__PURE__ */ jsx(
+              OutlinedChip,
+              {
+                label: field.label,
+                tone: field.tone ?? "purple",
+                variant: "outlined",
+                size: "sm",
+                preserveLabelCase: true,
+                chipIcon: field.icon ?? fieldsIcon
+              },
+              field.label
+            )),
+            fieldsNote && /* @__PURE__ */ jsx("span", { className: "text-xs italic text-foreground-subtle", children: fieldsNote })
+          ] }),
+          footnote && /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground-muted", children: footnote })
+        ] }),
+        dismissButton && dismissLabel && /* @__PURE__ */ jsx(ControlledTooltip, { content: dismissLabel, children: dismissButton })
+      ]
+    }
+  );
+};
+export {
+  AlertInfo as default
+};
+//# sourceMappingURL=index.js.map