@eifi1/ui-kit 0.4.0

package/dist/components/use-mobile-reveal.js

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+function useMobileReveal({
+  rows,
+  slice,
+  isServer,
+  isMdUp,
+  defaultPageSize
+}) {
+  const [mobileLimit, setMobileLimit] = useState(defaultPageSize);
+  const mobileSlice = isServer ? slice : rows.slice(0, mobileLimit);
+  const canRevealMoreMobile = !isServer && !isMdUp && mobileLimit < rows.length;
+  const loadMoreRef = useRef(null);
+  useEffect(() => {
+    if (!canRevealMoreMobile) return;
+    const el = loadMoreRef.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          setMobileLimit((n) => n + (defaultPageSize || 25));
+        }
+      },
+      { rootMargin: "300px" }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [canRevealMoreMobile, mobileLimit, defaultPageSize]);
+  return { mobileSlice, canRevealMoreMobile, loadMoreRef };
+}
+export {
+  useMobileReveal
+};
+//# sourceMappingURL=use-mobile-reveal.js.map

package/dist/components/use-mobile-reveal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/use-mobile-reveal.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/**\n * The phone's endless scroll, in place of the desktop pager (feedback #232).\n *\n * A client-side table already holds every row, so there is nothing to fetch — it simply\n * reveals more of the sorted list as a sentinel scrolls into view. A SERVER-paginated\n * table keeps its pager instead, because the rest of the rows genuinely are not here.\n *\n * The reveal count only ever grows and self-caps at the (re-filtered) list length, which\n * is why nothing resets it: narrowing a filter cannot leave the limit pointing past the\n * end, and widening one does not have to re-reveal what the user already scrolled past.\n *\n * Lifted out of `DataTable` with the rest of its state; the sentinel ref belongs to the\n * caller's `<li>`.\n */\nexport function useMobileReveal<T>({\n  rows,\n  slice,\n  isServer,\n  isMdUp,\n  defaultPageSize,\n}: {\n  /** The whole sorted list — what there is to reveal. */\n  rows: T[];\n  /** What a server-paginated table shows instead. */\n  slice: T[];\n  isServer: boolean;\n  isMdUp: boolean;\n  defaultPageSize: number;\n}) {\n  const [mobileLimit, setMobileLimit] = useState(defaultPageSize);\n  const mobileSlice = isServer ? slice : rows.slice(0, mobileLimit);\n  const canRevealMoreMobile = !isServer && !isMdUp && mobileLimit < rows.length;\n  const loadMoreRef = useRef<HTMLLIElement | null>(null);\n\n  useEffect(() => {\n    if (!canRevealMoreMobile) return;\n    const el = loadMoreRef.current;\n    if (!el || typeof IntersectionObserver === \"undefined\") return;\n    const io = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((e) => e.isIntersecting)) {\n          setMobileLimit((n) => n + (defaultPageSize || 25));\n        }\n      },\n      { rootMargin: \"300px\" },\n    );\n    io.observe(el);\n    return () => io.disconnect();\n  }, [canRevealMoreMobile, mobileLimit, defaultPageSize]);\n\n  return { mobileSlice, canRevealMoreMobile, loadMoreRef };\n}\n"],"mappings":"AAAA,SAAS,WAAW,QAAQ,gBAAgB;AAgBrC,SAAS,gBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,eAAe;AAC9D,QAAM,cAAc,WAAW,QAAQ,KAAK,MAAM,GAAG,WAAW;AAChE,QAAM,sBAAsB,CAAC,YAAY,CAAC,UAAU,cAAc,KAAK;AACvE,QAAM,cAAc,OAA6B,IAAI;AAErD,YAAU,MAAM;AACd,QAAI,CAAC,oBAAqB;AAC1B,UAAM,KAAK,YAAY;AACvB,QAAI,CAAC,MAAM,OAAO,yBAAyB,YAAa;AACxD,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,YAAY;AACX,YAAI,QAAQ,KAAK,CAAC,MAAM,EAAE,cAAc,GAAG;AACzC,yBAAe,CAAC,MAAM,KAAK,mBAAmB,GAAG;AAAA,QACnD;AAAA,MACF;AAAA,MACA,EAAE,YAAY,QAAQ;AAAA,IACxB;AACA,OAAG,QAAQ,EAAE;AACb,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,qBAAqB,aAAa,eAAe,CAAC;AAEtD,SAAO,EAAE,aAAa,qBAAqB,YAAY;AACzD;","names":[]}

package/dist/components/use-table-state.d.ts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { useSearchParams } from 'react-router';
+import { SortState } from './data-table-sort.js';
+import { a as DataTableColumn, F as FilterState } from '../data-table-filters-aXyf0Xub.js';
+import './swipeable-row.js';
+import './data-table-labels.js';
+
+declare const DEFAULT_PERSIST_PREFIX = "hbui-table:";
+/**
+ * Where a table's view lives: what it is sorted and filtered by, which page, how wide
+ * the columns are and which are hidden — plus the two places that outlives a render.
+ *
+ * Lifted out of `DataTable`, which was 984 lines and twenty hooks in one function. This
+ * is the part that is genuinely about STATE rather than about drawing, and the three
+ * rules it encodes are easy to lose among the markup:
+ *
+ * * **The URL is read once, on mount.** A shared or deep link populates the initial view;
+ *   after that the state is local, or the browser's own history would fight the user's
+ *   next click.
+ * * **Sorting and filtering are optionally CONTROLLED.** A server-driven table passes
+ *   state and a callback and owns them; everything else is self-owned. That is the
+ *   `sortsProp ?? internalSorts` pair, and it is why the setters are exposed separately.
+ * * **Persistence writes on every change, the URL only when asked.** `storageKey` is the
+ *   per-table identity; `urlSync` is opt-in because only some tables want their view in
+ *   a shareable address.
+ */
+declare function useTableState<T>({ columns, storageKey, storageKeyPrefix, urlSync, setSearchParams, defaultPageSize, sortsProp, filtersProp, }: {
+    columns: DataTableColumn<T>[];
+    storageKey?: string;
+    storageKeyPrefix: string;
+    urlSync?: boolean;
+    setSearchParams: ReturnType<typeof useSearchParams>[1];
+    defaultPageSize: number;
+    sortsProp?: SortState[];
+    filtersProp?: FilterState;
+}): {
+    sorts: SortState[];
+    filters: FilterState;
+    setInternalSorts: react.Dispatch<react.SetStateAction<SortState[]>>;
+    setInternalFilters: react.Dispatch<react.SetStateAction<FilterState>>;
+    page: number;
+    setPage: react.Dispatch<react.SetStateAction<number>>;
+    pageSize: number;
+    setPageSize: react.Dispatch<react.SetStateAction<number>>;
+    widths: Record<string, number>;
+    setWidths: react.Dispatch<react.SetStateAction<Record<string, number>>>;
+    hiddenCols: Set<string>;
+    setHiddenCols: react.Dispatch<react.SetStateAction<Set<string>>>;
+    showSettings: boolean;
+    setShowSettings: react.Dispatch<react.SetStateAction<boolean>>;
+    headRefs: Map<string, HTMLTableCellElement>;
+};
+
+export { DEFAULT_PERSIST_PREFIX, useTableState };

package/dist/components/use-table-state.js

@@ -0,0 +1,153 @@
+import { useEffect, useMemo, useState } from "react";
+import { readStored, writeStored } from "../lib/safe-storage.js";
+import {
+  decodeFilterValue,
+  encodeFilterValue,
+  isFilterActive,
+  resolveFilter
+} from "./data-table-filters.js";
+import { decodeSorts, encodeSorts, normalizeSorts } from "./data-table-sort.js";
+const DEFAULT_PERSIST_PREFIX = "hbui-table:";
+function loadPersisted(storageKey, prefix) {
+  if (!storageKey) return {};
+  const raw = readStored(prefix + storageKey);
+  if (!raw) return {};
+  try {
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function savePersisted(storageKey, state, prefix) {
+  if (!storageKey) return;
+  writeStored(prefix + storageKey, JSON.stringify(state));
+}
+const URL_FILTER_PREFIX = "f.";
+const URL_SORT_KEY = "sort";
+const URL_PAGE_KEY = "p";
+const URL_PAGE_SIZE_KEY = "ps";
+function readUrlState(columns) {
+  if (typeof window === "undefined") return {};
+  const sp = new URLSearchParams(window.location.search);
+  const out = {};
+  const filters = {};
+  for (const col of columns) {
+    const filter = resolveFilter(col);
+    if (!filter) continue;
+    const raw = sp.get(URL_FILTER_PREFIX + col.key);
+    if (raw == null) continue;
+    filters[col.key] = decodeFilterValue(filter, raw);
+  }
+  if (Object.keys(filters).length) out.filters = filters;
+  const sortRaw = sp.get(URL_SORT_KEY);
+  if (sortRaw) {
+    const decoded = decodeSorts(sortRaw, new Set(columns.map((c) => c.key)));
+    if (decoded.length) out.sorts = decoded;
+  }
+  const psRaw = sp.get(URL_PAGE_SIZE_KEY);
+  if (psRaw === "all") out.pageSize = Infinity;
+  else if (psRaw && Number(psRaw) > 0) out.pageSize = Number(psRaw);
+  const pRaw = sp.get(URL_PAGE_KEY);
+  if (pRaw && Number(pRaw) >= 1) out.page = Number(pRaw) - 1;
+  return out;
+}
+function writeUrlState(setSearchParams, columns, sorts, filters, pageSize, page, defaultPageSize) {
+  setSearchParams(
+    (prev) => {
+      const next = new URLSearchParams(prev);
+      for (const col of columns) next.delete(URL_FILTER_PREFIX + col.key);
+      next.delete(URL_SORT_KEY);
+      next.delete(URL_PAGE_KEY);
+      next.delete(URL_PAGE_SIZE_KEY);
+      for (const col of columns) {
+        const state = filters[col.key];
+        if (!state || !isFilterActive(state)) continue;
+        const enc = encodeFilterValue(state);
+        if (enc != null) next.set(URL_FILTER_PREFIX + col.key, enc);
+      }
+      const sortEnc = encodeSorts(sorts);
+      if (sortEnc) next.set(URL_SORT_KEY, sortEnc);
+      if (pageSize === Infinity) next.set(URL_PAGE_SIZE_KEY, "all");
+      else if (pageSize !== defaultPageSize) next.set(URL_PAGE_SIZE_KEY, String(pageSize));
+      if (page > 0) next.set(URL_PAGE_KEY, String(page + 1));
+      return next;
+    },
+    { replace: true }
+  );
+}
+function useTableState({
+  columns,
+  storageKey,
+  storageKeyPrefix,
+  urlSync,
+  setSearchParams,
+  defaultPageSize,
+  sortsProp,
+  filtersProp
+}) {
+  const [urlInitial] = useState(() => urlSync ? readUrlState(columns) : {});
+  const initial = useMemo(
+    () => loadPersisted(storageKey, storageKeyPrefix),
+    [storageKey, storageKeyPrefix]
+  );
+  const [internalSorts, setInternalSorts] = useState(
+    () => urlInitial.sorts !== void 0 ? urlInitial.sorts : normalizeSorts(initial.sort)
+  );
+  const [internalFilters, setInternalFilters] = useState(
+    () => urlInitial.filters ?? initial.filters ?? {}
+  );
+  const sorts = sortsProp ?? internalSorts;
+  const filters = filtersProp ?? internalFilters;
+  const [page, setPage] = useState(() => urlInitial.page ?? 0);
+  const [pageSize, setPageSize] = useState(() => {
+    if (urlInitial.pageSize !== void 0) return urlInitial.pageSize;
+    if (initial.pageSize === "all") return Infinity;
+    if (typeof initial.pageSize === "number" && initial.pageSize > 0) return initial.pageSize;
+    return defaultPageSize;
+  });
+  const [widths, setWidths] = useState(() => initial.widths ?? {});
+  const [hiddenCols, setHiddenCols] = useState(() => new Set(initial.hidden ?? []));
+  const [showSettings, setShowSettings] = useState(false);
+  const headRefs = useMemo(() => /* @__PURE__ */ new Map(), []);
+  useEffect(() => {
+    if (!storageKey) return;
+    savePersisted(
+      storageKey,
+      {
+        sort: sorts,
+        filters,
+        pageSize: pageSize === Infinity ? "all" : pageSize,
+        widths,
+        hidden: Array.from(hiddenCols)
+      },
+      storageKeyPrefix
+    );
+  }, [storageKey, storageKeyPrefix, sorts, filters, pageSize, widths, hiddenCols]);
+  useEffect(() => {
+    if (!urlSync) return;
+    writeUrlState(setSearchParams, columns, sorts, filters, pageSize, page, defaultPageSize);
+  }, [urlSync, sorts, filters, pageSize, page, defaultPageSize]);
+  return {
+    sorts,
+    filters,
+    setInternalSorts,
+    setInternalFilters,
+    page,
+    setPage,
+    pageSize,
+    setPageSize,
+    widths,
+    setWidths,
+    hiddenCols,
+    setHiddenCols,
+    showSettings,
+    setShowSettings,
+    headRefs
+  };
+}
+export {
+  DEFAULT_PERSIST_PREFIX,
+  useTableState
+};
+//# sourceMappingURL=use-table-state.js.map

package/dist/components/use-table-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/use-table-state.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport type { useSearchParams } from \"react-router\";\nimport { readStored, writeStored } from \"../lib/safe-storage\";\nimport {\n  decodeFilterValue,\n  encodeFilterValue,\n  isFilterActive,\n  resolveFilter,\n} from \"./data-table-filters\";\nimport { decodeSorts, encodeSorts, normalizeSorts, type SortState } from \"./data-table-sort\";\nimport type { DataTableColumn, FilterState } from \"./data-table\";\n\n// ---------- Persisted + URL-encoded view state ----------\n//\n// Moved here with `useTableState` when `DataTable` was split: these are what the hook\n// reads and writes, and nothing else in the table ever called them.\n\ninterface PersistedState {\n  // Multi-sort array; blobs from before the upgrade hold a single {key, dir}\n  // object (or null) — read back through normalizeSorts.\n  sort: SortState[] | { key: string; dir: string } | null;\n  filters: FilterState;\n  pageSize: number | \"all\";\n  widths?: Record<string, number>;\n  hidden?: string[];\n}\n\nexport const DEFAULT_PERSIST_PREFIX = \"hbui-table:\";\n\nfunction loadPersisted(storageKey: string | undefined, prefix: string): Partial<PersistedState> {\n  if (!storageKey) return {};\n  const raw = readStored(prefix + storageKey);\n  if (!raw) return {};\n  try {\n    const parsed = JSON.parse(raw) as Partial<PersistedState>;\n    return parsed && typeof parsed === \"object\" ? parsed : {};\n  } catch {\n    return {}; // corrupt JSON — the storage access itself is guarded by readStored\n  }\n}\n\nfunction savePersisted(storageKey: string | undefined, state: PersistedState, prefix: string): void {\n  if (!storageKey) return;\n  writeStored(prefix + storageKey, JSON.stringify(state));\n}\n\n// ---------- URL sync helpers ----------\n\nconst URL_FILTER_PREFIX = \"f.\";\nconst URL_SORT_KEY = \"sort\";\nconst URL_PAGE_KEY = \"p\";\nconst URL_PAGE_SIZE_KEY = \"ps\";\n\ninterface UrlState {\n  sorts?: SortState[];\n  filters?: FilterState;\n  pageSize?: number; // Infinity for \"all\"\n  page?: number; // 0-based\n}\n\nfunction readUrlState<T>(columns: DataTableColumn<T>[]): UrlState {\n  if (typeof window === \"undefined\") return {};\n  const sp = new URLSearchParams(window.location.search);\n  const out: UrlState = {};\n\n  const filters: FilterState = {};\n  for (const col of columns) {\n    const filter = resolveFilter(col);\n    if (!filter) continue;\n    const raw = sp.get(URL_FILTER_PREFIX + col.key);\n    if (raw == null) continue;\n    filters[col.key] = decodeFilterValue(filter, raw);\n  }\n  if (Object.keys(filters).length) out.filters = filters;\n\n  const sortRaw = sp.get(URL_SORT_KEY);\n  if (sortRaw) {\n    const decoded = decodeSorts(sortRaw, new Set(columns.map((c) => c.key)));\n    if (decoded.length) out.sorts = decoded;\n  }\n\n  const psRaw = sp.get(URL_PAGE_SIZE_KEY);\n  if (psRaw === \"all\") out.pageSize = Infinity;\n  else if (psRaw && Number(psRaw) > 0) out.pageSize = Number(psRaw);\n\n  const pRaw = sp.get(URL_PAGE_KEY);\n  if (pRaw && Number(pRaw) >= 1) out.page = Number(pRaw) - 1;\n\n  return out;\n}\n\nfunction writeUrlState<T>(\n  setSearchParams: ReturnType<typeof useSearchParams>[1],\n  columns: DataTableColumn<T>[],\n  sorts: SortState[],\n  filters: FilterState,\n  pageSize: number,\n  page: number,\n  defaultPageSize: number,\n): void {\n  setSearchParams(\n    (prev) => {\n      const next = new URLSearchParams(prev);\n      // clear managed keys\n      for (const col of columns) next.delete(URL_FILTER_PREFIX + col.key);\n      next.delete(URL_SORT_KEY);\n      next.delete(URL_PAGE_KEY);\n      next.delete(URL_PAGE_SIZE_KEY);\n      // write filters\n      for (const col of columns) {\n        const state = filters[col.key];\n        if (!state || !isFilterActive(state)) continue;\n        const enc = encodeFilterValue(state);\n        if (enc != null) next.set(URL_FILTER_PREFIX + col.key, enc);\n      }\n      // write sort\n      const sortEnc = encodeSorts(sorts);\n      if (sortEnc) next.set(URL_SORT_KEY, sortEnc);\n      // write page size if non-default\n      if (pageSize === Infinity) next.set(URL_PAGE_SIZE_KEY, \"all\");\n      else if (pageSize !== defaultPageSize) next.set(URL_PAGE_SIZE_KEY, String(pageSize));\n      // write page if not first\n      if (page > 0) next.set(URL_PAGE_KEY, String(page + 1));\n      return next;\n    },\n    { replace: true },\n  );\n}\n\n/**\n * Where a table's view lives: what it is sorted and filtered by, which page, how wide\n * the columns are and which are hidden — plus the two places that outlives a render.\n *\n * Lifted out of `DataTable`, which was 984 lines and twenty hooks in one function. This\n * is the part that is genuinely about STATE rather than about drawing, and the three\n * rules it encodes are easy to lose among the markup:\n *\n * * **The URL is read once, on mount.** A shared or deep link populates the initial view;\n *   after that the state is local, or the browser's own history would fight the user's\n *   next click.\n * * **Sorting and filtering are optionally CONTROLLED.** A server-driven table passes\n *   state and a callback and owns them; everything else is self-owned. That is the\n *   `sortsProp ?? internalSorts` pair, and it is why the setters are exposed separately.\n * * **Persistence writes on every change, the URL only when asked.** `storageKey` is the\n *   per-table identity; `urlSync` is opt-in because only some tables want their view in\n *   a shareable address.\n */\nexport function useTableState<T>({\n  columns,\n  storageKey,\n  storageKeyPrefix,\n  urlSync,\n  setSearchParams,\n  defaultPageSize,\n  sortsProp,\n  filtersProp,\n}: {\n  columns: DataTableColumn<T>[];\n  storageKey?: string;\n  storageKeyPrefix: string;\n  urlSync?: boolean;\n  setSearchParams: ReturnType<typeof useSearchParams>[1];\n  defaultPageSize: number;\n  sortsProp?: SortState[];\n  filtersProp?: FilterState;\n}) {\n  // Read URL once on mount so URL-encoded views (e.g. shared links, deep links from\n  // other pages) populate initial state. After mount, state is local.\n  const [urlInitial] = useState<UrlState>(() => (urlSync ? readUrlState(columns) : {}));\n  const initial = useMemo(\n    () => loadPersisted(storageKey, storageKeyPrefix),\n    [storageKey, storageKeyPrefix],\n  );\n  const [internalSorts, setInternalSorts] = useState<SortState[]>(() =>\n    urlInitial.sorts !== undefined ? urlInitial.sorts : normalizeSorts(initial.sort),\n  );\n  const [internalFilters, setInternalFilters] = useState<FilterState>(\n    () => urlInitial.filters ?? initial.filters ?? {},\n  );\n  // Controlled when the owner passes state + callback (server-driven tables);\n  // self-owned otherwise.\n  const sorts = sortsProp ?? internalSorts;\n  const filters = filtersProp ?? internalFilters;\n  const [page, setPage] = useState(() => urlInitial.page ?? 0);\n  const [pageSize, setPageSize] = useState<number>(() => {\n    if (urlInitial.pageSize !== undefined) return urlInitial.pageSize;\n    if (initial.pageSize === \"all\") return Infinity;\n    if (typeof initial.pageSize === \"number\" && initial.pageSize > 0) return initial.pageSize;\n    return defaultPageSize;\n  });\n  const [widths, setWidths] = useState<Record<string, number>>(() => initial.widths ?? {});\n  const [hiddenCols, setHiddenCols] = useState<Set<string>>(() => new Set(initial.hidden ?? []));\n  const [showSettings, setShowSettings] = useState(false);\n  const headRefs = useMemo(() => new Map<string, HTMLTableCellElement>(), []);\n\n  useEffect(() => {\n    if (!storageKey) return;\n    savePersisted(\n      storageKey,\n      {\n        sort: sorts,\n        filters,\n        pageSize: pageSize === Infinity ? \"all\" : pageSize,\n        widths,\n        hidden: Array.from(hiddenCols),\n      },\n      storageKeyPrefix,\n    );\n  }, [storageKey, storageKeyPrefix, sorts, filters, pageSize, widths, hiddenCols]);\n\n  useEffect(() => {\n    if (!urlSync) return;\n    writeUrlState(setSearchParams, columns, sorts, filters, pageSize, page, defaultPageSize);\n    // columns identity changes per render but URL output only depends on column keys;\n    // including columns would re-run on every render. We rely on data state only.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [urlSync, sorts, filters, pageSize, page, defaultPageSize]);\n\n  return {\n    sorts,\n    filters,\n    setInternalSorts,\n    setInternalFilters,\n    page,\n    setPage,\n    pageSize,\n    setPageSize,\n    widths,\n    setWidths,\n    hiddenCols,\n    setHiddenCols,\n    showSettings,\n    setShowSettings,\n    headRefs,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/components/user-avatar.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+
+/** Initials from a display name (first + last) or, failing that, an email —
+ *  e.g. "Marcel Eifert" → "ME", "marcel@x.com" → "MA". App-agnostic. */
+declare function avatarInitials(name?: string | null, email?: string | null): string;
+declare const AVATAR_SIZES: {
+    readonly sm: "size-7 text-[11px]";
+    readonly md: "size-8 text-xs";
+    readonly lg: "size-12 text-base";
+};
+interface UserAvatarProps {
+    name?: string | null;
+    email?: string | null;
+    size?: keyof typeof AVATAR_SIZES;
+    className?: string;
+}
+/**
+ * A round initials avatar — the common user chip shared across apps (feedback
+ * #333). Purely presentational; wrap it in a button for the account menu trigger.
+ */
+declare function UserAvatar({ name, email, size, className }: UserAvatarProps): react.JSX.Element;
+
+export { UserAvatar, type UserAvatarProps, avatarInitials };

package/dist/components/user-avatar.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+function avatarInitials(name, email) {
+  const source = (name ?? email ?? "?").trim();
+  if (!source) return "?";
+  const parts = source.split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+  return source.slice(0, 2).toUpperCase();
+}
+const AVATAR_SIZES = {
+  sm: "size-7 text-[11px]",
+  md: "size-8 text-xs",
+  lg: "size-12 text-base"
+};
+function UserAvatar({ name, email, size = "md", className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full bg-slate-900 font-semibold text-white dark:bg-slate-100 dark:text-slate-900",
+        AVATAR_SIZES[size],
+        className
+      ),
+      children: avatarInitials(name, email)
+    }
+  );
+}
+export {
+  UserAvatar,
+  avatarInitials
+};
+//# sourceMappingURL=user-avatar.js.map

package/dist/components/user-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/user-avatar.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\n\n/** Initials from a display name (first + last) or, failing that, an email —\n *  e.g. \"Marcel Eifert\" → \"ME\", \"marcel@x.com\" → \"MA\". App-agnostic. */\nexport function avatarInitials(name?: string | null, email?: string | null): string {\n  const source = (name ?? email ?? \"?\").trim();\n  if (!source) return \"?\";\n  const parts = source.split(/\\s+/).filter(Boolean);\n  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();\n  return source.slice(0, 2).toUpperCase();\n}\n\nconst AVATAR_SIZES = {\n  sm: \"size-7 text-[11px]\",\n  md: \"size-8 text-xs\",\n  lg: \"size-12 text-base\",\n} as const;\n\nexport interface UserAvatarProps {\n  name?: string | null;\n  email?: string | null;\n  size?: keyof typeof AVATAR_SIZES;\n  className?: string;\n}\n\n/**\n * A round initials avatar — the common user chip shared across apps (feedback\n * #333). Purely presentational; wrap it in a button for the account menu trigger.\n */\nexport function UserAvatar({ name, email, size = \"md\", className }: UserAvatarProps) {\n  return (\n    <span\n      aria-hidden\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center rounded-full bg-slate-900 font-semibold text-white dark:bg-slate-100 dark:text-slate-900\",\n        AVATAR_SIZES[size],\n        className,\n      )}\n    >\n      {avatarInitials(name, email)}\n    </span>\n  );\n}\n"],"mappings":"AA+BI;AA/BJ,SAAS,UAAU;AAIZ,SAAS,eAAe,MAAsB,OAA+B;AAClF,QAAM,UAAU,QAAQ,SAAS,KAAK,KAAK;AAC3C,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,QAAQ,OAAO,MAAM,KAAK,EAAE,OAAO,OAAO;AAChD,MAAI,MAAM,UAAU,EAAG,SAAQ,MAAM,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,EAAE,CAAC,GAAG,YAAY;AACtE,SAAO,OAAO,MAAM,GAAG,CAAC,EAAE,YAAY;AACxC;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAaO,SAAS,WAAW,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,GAAoB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA,aAAa,IAAI;AAAA,QACjB;AAAA,MACF;AAAA,MAEC,yBAAe,MAAM,KAAK;AAAA;AAAA,EAC7B;AAEJ;","names":[]}

package/dist/components/wizard-stepper.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+
+/** Compact step indicator for the import wizards. Past steps are plain, the
+ * current one is highlighted, future ones muted. */
+declare function WizardStepper({ steps, current, ariaLabel, }: {
+    steps: {
+        key: string;
+        label: string;
+    }[];
+    current: string;
+    ariaLabel?: string;
+}): react.JSX.Element;
+
+export { WizardStepper };

package/dist/components/wizard-stepper.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+function WizardStepper({
+  steps,
+  current,
+  ariaLabel
+}) {
+  const currentIndex = steps.findIndex((s) => s.key === current);
+  return /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1 text-xs", "aria-label": ariaLabel, children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+    i > 0 && /* @__PURE__ */ jsx("span", { className: "w-4 border-t border-slate-300 dark:border-slate-600" }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-current": step.key === current ? "step" : void 0,
+        className: cn(
+          "rounded-full px-2 py-0.5",
+          i === currentIndex ? "bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 font-medium" : i < currentIndex ? "text-slate-700 dark:text-slate-200" : "text-slate-400 dark:text-slate-500"
+        ),
+        children: step.label
+      }
+    )
+  ] }, step.key)) });
+}
+export {
+  WizardStepper
+};
+//# sourceMappingURL=wizard-stepper.js.map

package/dist/components/wizard-stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/wizard-stepper.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\n\n/** Compact step indicator for the import wizards. Past steps are plain, the\n * current one is highlighted, future ones muted. */\nexport function WizardStepper({\n  steps,\n  current,\n  ariaLabel,\n}: {\n  steps: { key: string; label: string }[];\n  current: string;\n  ariaLabel?: string;\n}) {\n  const currentIndex = steps.findIndex((s) => s.key === current);\n  return (\n    <ol className=\"flex items-center gap-1 text-xs\" aria-label={ariaLabel}>\n      {steps.map((step, i) => (\n        <li key={step.key} className=\"flex items-center gap-1\">\n          {i > 0 && <span className=\"w-4 border-t border-slate-300 dark:border-slate-600\" />}\n          <span\n            aria-current={step.key === current ? \"step\" : undefined}\n            className={cn(\n              \"rounded-full px-2 py-0.5\",\n              i === currentIndex\n                ? \"bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 font-medium\"\n                : i < currentIndex\n                  ? \"text-slate-700 dark:text-slate-200\"\n                  : \"text-slate-400 dark:text-slate-500\",\n            )}\n          >\n            {step.label}\n          </span>\n        </li>\n      ))}\n    </ol>\n  );\n}\n"],"mappings":"AAiBQ,SACY,KADZ;AAjBR,SAAS,UAAU;AAIZ,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,eAAe,MAAM,UAAU,CAAC,MAAM,EAAE,QAAQ,OAAO;AAC7D,SACE,oBAAC,QAAG,WAAU,mCAAkC,cAAY,WACzD,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,QAAkB,WAAU,2BAC1B;AAAA,QAAI,KAAK,oBAAC,UAAK,WAAU,uDAAsD;AAAA,IAChF;AAAA,MAAC;AAAA;AAAA,QACC,gBAAc,KAAK,QAAQ,UAAU,SAAS;AAAA,QAC9C,WAAW;AAAA,UACT;AAAA,UACA,MAAM,eACF,8EACA,IAAI,eACF,uCACA;AAAA,QACR;AAAA,QAEC,eAAK;AAAA;AAAA,IACR;AAAA,OAdO,KAAK,GAed,CACD,GACH;AAEJ;","names":[]}

package/dist/data-table-filters-aXyf0Xub.d.ts

@@ -0,0 +1,261 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { SortState } from './components/data-table-sort.js';
+import { SwipeAction } from './components/swipeable-row.js';
+import { DataTableLabels } from './components/data-table-labels.js';
+
+interface DataTableColumn<T> {
+    key: string;
+    header: ReactNode;
+    cell: (row: T) => ReactNode;
+    sortBy?: (row: T) => string | number | null | undefined;
+    filter?: ColumnFilter<T>;
+    filterBy?: (row: T) => string;
+    className?: string;
+    headClassName?: string;
+    mobilePrimary?: boolean;
+    mobileHidden?: boolean;
+    /**
+     * Set on a column whose cell renders its own `<a>` (or anything else that must
+     * keep its own click): the row anchor of `rowHref` then skips it and lands on
+     * the next column that allows wrapping (Keksdose feedback #451). Without it the
+     * fallback can wrap such a cell the moment the headline column is hidden from
+     * the settings panel — `<a>` inside `<a>`, which React warns about and which
+     * kills the inner link outright, since RowLink cancels the click on the capture
+     * phase and the cell's own `stopPropagation` then blocks the row handler too.
+     * The rejected alternative was sniffing the rendered output for an anchor: a
+     * cell that renders a link is a fact its author knows and the renderer cannot
+     * see without reaching into React elements it deliberately treats as opaque.
+     */
+    noRowLink?: boolean;
+}
+interface ServerPagination {
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    isLoading?: boolean;
+}
+interface DataTableProps<T> {
+    rows: T[];
+    columns: DataTableColumn<T>[];
+    rowKey: (row: T) => string | number;
+    defaultPageSize?: number;
+    onRowClick?: (row: T) => void;
+    /**
+     * The URL that shows this row, when one exists — the table then renders a REAL
+     * anchor for it (Keksdose feedback #451, "to be able to middle click with the
+     * mouse and open in a new tab"). A row that opens through `onRowClick` alone is
+     * invisible to the browser: no middle click, no ⌘/Ctrl-click, no "copy link
+     * address", no status-bar preview, no long-press menu on a phone. The
+     * alternative was an `onAuxClick` that calls `window.open` — it buys back only
+     * the middle click and loses the other four, none of which JavaScript can fake.
+     *
+     * Return `undefined` for a row that has no address of its own. Only wire this up
+     * where the OPEN row is genuinely in the URL (a `?row=` param, a detail route);
+     * a row whose expansion lives in local component state has no link to hand out,
+     * and a link the target page cannot honour is worse than no link.
+     *
+     * The anchor covers the row's primary cell, not the whole `<tr>`: an `<a>` may
+     * not wrap table cells, and the absolutely-positioned row overlay that is the
+     * usual workaround would sit on top of the per-cell controls these rows carry
+     * (status toggles, the selection checkbox, nested links) and swallow them.
+     */
+    rowHref?: (row: T) => string | undefined;
+    expandedRow?: (row: T) => ReactNode | null;
+    isExpanded?: (row: T) => boolean;
+    rowClassName?: (row: T) => string | undefined;
+    /**
+     * Extra DOM attributes for a row's container — the `<tr>` on desktop, the
+     * `<li>` on mobile. For hooks that have to sit on the row itself rather than
+     * inside a cell: guided-tour anchors, analytics ids, e2e selectors. Undefined
+     * values are dropped, so a per-row conditional needs no filtering at the call
+     * site. Not a styling escape hatch — that is `rowClassName`.
+     */
+    rowAttributes?: (row: T) => Record<string, string | undefined> | undefined;
+    /**
+     * Set false for a table that is short by construction — an invoice's line
+     * items, a wizard's picks — where the pager is chrome around a list that can
+     * never need one. Renders every row and drops the footer entirely. Ignored in
+     * `serverPagination` mode, where the pager is the only way to reach the rest
+     * of the data.
+     */
+    paginated?: boolean;
+    empty?: ReactNode;
+    /**
+     * If set, the table persists filter / sort / page-size state to localStorage under this key.
+     * Use a stable, unique key per table (e.g. "transactions-table").
+     */
+    storageKey?: string;
+    /**
+     * When true, mirror filter/sort/page state into URL search params so views are
+     * shareable and bookmarkable. URL params used: `f.<column>`, `sort`, `p`, `ps`.
+     * URL state takes precedence over localStorage on initial load. Requires the
+     * consuming app to render inside a react-router Router.
+     */
+    urlSync?: boolean;
+    /**
+     * When true (desktop only), the table fills its parent's height and scrolls
+     * INTERNALLY, with the header pinned — so the page itself doesn't add a second,
+     * outer scrollbar. The parent must give it a bounded height (e.g. a flex
+     * column inside the viewport-locked app shell). See feedback #207.
+     */
+    fillHeight?: boolean;
+    /** How tall the scrolling body may get before it scrolls, as a CSS length.
+     *
+     *  Default `calc(100dvh - 12rem)`, which is what every caller had before this
+     *  existed: a bound is what makes the sticky header work, because a header
+     *  can only stick to a wrapper that actually scrolls. The cap assumes the
+     *  table has page chrome above and below it, and a table that is the last
+     *  thing on its page can afford more — ASPICE Atlas report #12, "for the 25
+     *  elements there should in best case be no scrolling necessary".
+     *
+     *  Ignored under `fillHeight`, which bounds the body by its flex parent
+     *  instead and is the stronger statement of the same intent. */
+    maxBodyHeight?: string;
+    /**
+     * When provided, the table renders the supplied rows as-is (no client-side
+     * filtering/sorting/slicing) and the pagination footer is driven by these
+     * server-controlled values. Column-level filters and sorting are hidden
+     * UNLESS the caller takes them over via `onFiltersChange`/`onSortsChange` —
+     * the caller is then expected to translate the state into the server query
+     * that produces `rows`.
+     */
+    serverPagination?: ServerPagination;
+    /**
+     * Controlled filter/sort state. When the `on*Change` callback is provided
+     * the table stops owning that piece of state: it renders `filters`/`sorts`
+     * as given and reports user interactions through the callback (including
+     * in serverPagination mode, where the UI is otherwise disabled). The owner
+     * is responsible for any page reset on change.
+     */
+    filters?: FilterState;
+    onFiltersChange?: (next: FilterState) => void;
+    sorts?: SortState[];
+    onSortsChange?: (next: SortState[]) => void;
+    /**
+     * Opt-in multi-row selection (desktop table only). When provided, a leading
+     * checkbox column is rendered with a select-all box in the header; the owner
+     * holds the selected set and reacts via the callbacks. Rows for which
+     * `isSelectable` returns false render no checkbox and are excluded from
+     * select-all. See feedback #285 (bulk edit).
+     */
+    selection?: {
+        isSelectable?: (row: T) => boolean;
+        isSelected: (row: T) => boolean;
+        onToggle: (row: T, checked: boolean) => void;
+        allSelected: boolean;
+        someSelected: boolean;
+        onToggleAll: (checked: boolean) => void;
+    };
+    /** User-facing strings (English defaults); pass translated overrides. */
+    labels?: Partial<DataTableLabels>;
+    /** BCP-47 locale for the date-filter picker. Defaults to "en". */
+    locale?: string;
+    /** localStorage namespace prefix for `storageKey` persistence. Defaults to
+     *  "hbui-table:"; pass your app's own prefix to keep a stable namespace. */
+    storageKeyPrefix?: string;
+    /**
+     * On phones, surface the expanded row's detail in a full-screen dialog instead
+     * of unfolding it inline (feedback #204). Desktop always uses inline expansion.
+     */
+    mobileExpandAsDialog?: boolean;
+    /**
+     * Group the mobile card list into sections, each with a sticky header — the
+     * "assistance"-style list (like the transactions list grouped by date, but by
+     * whatever key you return, e.g. a name's first letter). The returned string is
+     * the section a row belongs to; rows must already be ordered so equal keys are
+     * contiguous (pair with a matching default sort). `mobileGroupLabel` formats
+     * the header. Desktop is unaffected. Feedback #317.
+     */
+    mobileGroupBy?: (row: T) => string;
+    mobileGroupLabel?: (key: string) => ReactNode;
+    /**
+     * Fully replace the default mobile card body (bold primary + labelled
+     * key/value rows) with a compact custom layout, while keeping the shared
+     * clickable/expandable row wrapper. Use when the stacked label/value grid
+     * wastes space (feedback #317). Desktop is unaffected.
+     */
+    mobileCard?: (row: T) => ReactNode;
+    /**
+     * Swipe actions for a mobile row, revealed by dragging it horizontally. Return
+     * `null` (or empty sides) for rows that should not move — a locked row, one whose
+     * mutation is in flight, one the user has expanded.
+     *
+     * Mobile only, and deliberately so: the desktop table already has room for an
+     * actions column, and a drag gesture on a pointer device is a worse version of a
+     * button. Wraps only the row body, so an expansion panel below stays put while the
+     * row above it slides.
+     */
+    mobileSwipeActions?: (row: T) => {
+        left?: SwipeAction[];
+        right?: SwipeAction[];
+    } | null;
+    /**
+     * Renders as a full-width row above the data rows in the desktop table
+     * (mobile has no equivalent list-row slot, so it's desktop-only). For a
+     * toggle that shows/hides a slice of rows, style it as an expand/collapse
+     * disclosure (chevron + label) so it reads as part of the table rather
+     * than a floating control above it. See feedback #10/#11 (transactions'
+     * "hide upcoming/scheduled" toggle).
+     */
+    leadingRow?: ReactNode;
+}
+type FilterState = Record<string, FilterValue>;
+
+declare function DataTable<T>({ rows, columns, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, selection, labels: labelsProp, locale, storageKeyPrefix, mobileExpandAsDialog, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSwipeActions, leadingRow, }: DataTableProps<T>): react.JSX.Element;
+
+/** How a column is filtered. `text`/`select`/`date`/`number` each read a value
+ *  off the row and compare it against the user's {@link FilterValue}. */
+type ColumnFilter<T> = {
+    type: "text";
+    getValue: (row: T) => string;
+} | {
+    type: "select";
+    getValue: (row: T) => string;
+    options?: {
+        value: string;
+        label?: string;
+    }[];
+} | {
+    type: "date";
+    getValue: (row: T) => string | null | undefined;
+} | {
+    type: "number";
+    getValue: (row: T) => number | null | undefined;
+};
+/** The current state of a column's filter (what the user has entered). */
+type FilterValue = {
+    type: "text";
+    q: string;
+} | {
+    type: "select";
+    values: string[];
+} | {
+    type: "date";
+    from: string;
+    to: string;
+} | {
+    type: "number";
+    min: string;
+    max: string;
+    abs: boolean;
+};
+/** A column's filter config, falling back to a plain text filter over `filterBy`. */
+declare function resolveFilter<T>(col: DataTableColumn<T>): ColumnFilter<T> | null;
+/** Whether a filter value is actually narrowing anything (vs its empty default). */
+declare function isFilterActive(v: FilterValue | undefined): boolean;
+/** Whether `row` passes column `col`'s filter given the user's `state`. */
+declare function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValue): boolean;
+/** The empty filter state for a column's filter type. */
+declare function defaultFilterState<T>(filter: ColumnFilter<T>): FilterValue;
+/** URL-safe encoding of a filter value (`f.<column>` param), null when empty. */
+declare function encodeFilterValue(v: FilterValue): string | null;
+/** Inverse of {@link encodeFilterValue} given just the filter type — for
+ *  callers that know a column's type without holding its full config. */
+declare function decodeFilterValueOfType(type: FilterValue["type"], raw: string): FilterValue;
+/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. */
+declare function decodeFilterValue<T>(filter: ColumnFilter<T>, raw: string): FilterValue;
+
+export { type ColumnFilter as C, DataTable as D, type FilterState as F, type ServerPagination as S, type DataTableColumn as a, type DataTableProps as b, type FilterValue as c, decodeFilterValue as d, decodeFilterValueOfType as e, defaultFilterState as f, encodeFilterValue as g, rowMatches as h, isFilterActive as i, resolveFilter as r };