@camstack/ui-library 0.1.56 → 0.1.58

package/dist/composites/device-list/columns.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Device-mode column model: a fixed catalog, a per-context subset matrix,
+ * a responsive priority, and a priority-derived breakpoint mapping. Each
+ * consumer declares its `TableContext`; the table renders only the columns
+ * that context enables, in catalog order, hiding the optional ones as the
+ * viewport narrows.
+ *
+ * The catalog is intentionally device-mode only. Generic-mode (integration
+ * rows) keeps its own `DeviceListColumn[]` defs — reconciled in a later phase.
+ *
+ * ── Responsive convention (single source of truth) ────────────────────────
+ *   LOWER priority number = MORE important = hidden at a NARROWER width (kept
+ *   longest). So as the viewport shrinks the HIGHEST-priority-number column
+ *   drops first.
+ *
+ *     name           (0) — never hidden; sticky left, always visible
+ *     previewActions (1) — never hidden; carries the live control + status dot
+ *     icon           (2) — integration badge; rendered INSIDE the name cell,
+ *                          not a standalone column, so it has no breakpoint
+ *     features       (3) — optional; hidden below `md` (kept longer)
+ *     type           (4) — optional; hidden below `lg`
+ *     manufacturer   (5) — optional; hidden below `xl` (drops FIRST,
+ *                          wide-screen-only hardware/identity column)
+ *
+ *   `COLUMN_BREAKPOINT_CLASS` derives ONE Tailwind visibility class per id and
+ *   is the single source used by BOTH the `<th>` and the `<td>`, so a hidden
+ *   column folds header + cell in lock-step. The drop order is therefore:
+ *   `manufacturer` first (below `xl`), then `type` (below `lg`), then
+ *   `features` (below `md`) — matching the priority numbers above.
+ */
+/** Fixed device-mode column catalog, in render order. `name` is always first.
+ *  `manufacturer` sits after `type` — a wide-screen-only hardware/identity
+ *  column (manufacturer · model, full metadata in a tooltip). */
+export declare const DEVICE_COLUMNS: readonly ["name", "icon", "type", "manufacturer", "features", "previewActions"];
+export type DeviceColumnId = (typeof DEVICE_COLUMNS)[number];
+/**
+ * The places a device table is rendered; each declares its column subset.
+ *
+ * Device-detail CHILDREN are deliberately NOT a table context: they render as
+ * a stack of `<DeviceItem variant="minimal">` cards (see `ChildrenList`), not
+ * through this table, so no `device-children` context exists.
+ */
+export type TableContext = 'devices' | 'integration-detail';
+export declare function columnsForContext(ctx: TableContext): readonly DeviceColumnId[];
+/**
+ * Lower number = higher priority (kept longest as width shrinks). `name` = 0
+ * (sticky, never dropped); `previewActions` = 1 (always visible). The optional
+ * columns drop in REVERSE priority order as width shrinks — highest number
+ * (`type`) hides first, then `features`. `icon` is a name-cell badge, not a
+ * standalone column. See `COLUMN_BREAKPOINT_CLASS` for the derived classes.
+ */
+export declare const COLUMN_PRIORITY: Record<DeviceColumnId, number>;
+/**
+ * Priority-derived Tailwind visibility class per column. Used by BOTH the
+ * `<th>` and the `<td>` (single source → header + cell stay in lock-step).
+ *
+ *   - `name` / `previewActions`: empty string — never hidden (always visible).
+ *   - `icon`: empty string — rendered inside the name cell, no standalone cell.
+ *   - `features`: `hidden md:table-cell` — visible from `md` up (kept longer).
+ *   - `type`: `hidden lg:table-cell` — visible only from `lg` up.
+ *   - `manufacturer`: `hidden xl:table-cell` — visible only from `xl` up (drops
+ *     first).
+ *
+ * Drop order as the viewport narrows therefore follows the priority numbers:
+ * `manufacturer` (5) disappears below `xl`, then `type` (4) below `lg`, then
+ * `features` (3) below `md`.
+ */
+export declare const COLUMN_BREAKPOINT_CLASS: Record<DeviceColumnId, string>;

package/dist/composites/device-list/device-mode.d.ts

@@ -0,0 +1,115 @@
+import { ReactNode } from 'react';
+import { UseDeviceProxyTrpc } from '../../hooks/use-device-proxy';
+import { DeviceItemDevice, DeviceItemParent } from '../device-item/helpers';
+import { DeviceListView } from './url-state';
+import { TableContext } from './columns';
+import { MultiSelectOption } from './multi-select';
+export interface DeviceListAddonOption {
+    readonly id: string;
+    readonly name: string;
+    readonly icon?: ReactNode;
+}
+export interface DeviceListDeviceProps {
+    /** Discriminant — omit (or 'devices') for the default registry-device list. */
+    readonly mode?: 'devices';
+    /**
+     * Where this table is rendered — selects the visible column subset (table
+     * view only). Defaults to `'devices'` (all columns) so every existing
+     * call site renders unchanged.
+     */
+    readonly context?: TableContext;
+    readonly devices: readonly DeviceItemDevice[];
+    readonly trpc: UseDeviceProxyTrpc;
+    readonly defaultView?: DeviceListView;
+    /**
+     * Integration filter options + an optional TYPE-filter override.
+     *
+     * The type filter defaults to the EXHAUSTIVE device-type set
+     * (`allDeviceTypeFilterOptions`), so a newly added `DeviceType` appears
+     * automatically on every general list and nothing is ever missing. A
+     * surface that lists only a known subset (e.g. the export panel restricts
+     * to an exporter's supported kinds) may pass `typeOptions` to narrow the
+     * dropdown to that subset — built from the same shared meta so labels +
+     * icons stay identical.
+     */
+    readonly filters?: {
+        readonly addons?: readonly DeviceListAddonOption[];
+        readonly typeOptions?: readonly MultiSelectOption[];
+    };
+    /** Pre-applied addon filter — hides the addon-chip group. */
+    readonly forceAddon?: string;
+    readonly resolveIntegrationIcon?: (addonId: string) => ReactNode | null;
+    readonly resolveParent?: (parentId: number) => DeviceItemParent | null;
+    readonly onNavigate?: (deviceId: number) => void;
+    readonly pageSize?: {
+        readonly cards: number;
+        readonly table: number;
+    };
+    readonly urlScope?: 'root' | 'nested';
+    /** LocalStorage key prefix. Default 'devices' for root scope, 'integrations:nested' for nested. */
+    readonly lsKey?: string;
+    /**
+     * Optional trailing per-row control rendered beside each row's
+     * built-in actions (both card + table views, top-level rows only —
+     * accessory sub-rows are excluded). Threaded straight through to
+     * `<DeviceItem renderRowAction>`. Omitted ⇒ every current call site
+     * (Devices, IntegrationDetail, Integrations nested) renders unchanged.
+     * Used by `<DeviceExportPanel>` to surface a per-device Expose toggle.
+     */
+    readonly renderRowAction?: (device: DeviceItemDevice) => ReactNode;
+    /**
+     * Built-in confirmed per-row DELETE — a first-class TABLE feature. When
+     * provided, every top-level table row renders a red trash button in the
+     * merged actions cell; clicking it opens the shared centered confirm
+     * dialog ("Delete device?") and calls `onDeleteDevice(device)` only on
+     * confirm. Accessory sub-rows are excluded (same gate as `renderRowAction`).
+     * Context gating is "consumer passes the handler or not" — omit it (default)
+     * and no trash renders, so existing call sites are unchanged. Cap-agnostic:
+     * delete is generic and never branches on the device's capabilities. The
+     * confirm is built in, so consumers must NOT add their own. Table-only for
+     * now (card delete is a follow-up).
+     */
+    readonly onDeleteDevice?: (device: DeviceItemDevice) => void;
+    /**
+     * When `true`, renders a leading checkbox on each top-level row
+     * (accessory sub-rows are excluded — same gate as `renderRowAction`).
+     * Selection state may be controlled via `selectedIds`; when omitted
+     * the list maintains internal state.
+     */
+    readonly selectable?: boolean;
+    /**
+     * Controlled set of selected device ids. Provide together with
+     * `onSelectionChange` for a fully controlled selection surface.
+     * Omit to let `<DeviceList>` manage internal state.
+     */
+    readonly selectedIds?: ReadonlySet<number>;
+    /**
+     * Called on every toggle with the NEW full selection set.
+     * Invoked for both controlled and uncontrolled usage.
+     */
+    readonly onSelectionChange?: (ids: ReadonlySet<number>) => void;
+    /**
+     * Opt into self-managed BATCH MODE. When provided, the list renders an
+     * "Select" activation button; batch mode is OFF by default (no
+     * checkboxes, no bulk toolbar). Activating it reveals the leading
+     * row checkboxes plus a responsive bulk-actions bar wired to these
+     * callbacks (full toolbar at `sm+`, a compact menu at L1). Selection
+     * state is managed internally for the duration of the activated
+     * session and cleared on exit. Mutually independent from the
+     * lower-level `selectable`/`selectedIds` controlled API.
+     */
+    readonly batchActions?: DeviceListBatchActions;
+}
+/** Self-managed batch-mode bulk-action callbacks (see `batchActions`). */
+export interface DeviceListBatchActions {
+    readonly remove: (input: {
+        deviceId: number;
+    }) => void;
+    readonly disable: (input: {
+        deviceId: number;
+    }) => void;
+    readonly enable: (input: {
+        deviceId: number;
+    }) => void;
+}
+export declare function DeviceModeList(props: DeviceListDeviceProps): ReactNode;

package/dist/composites/device-list/filter-chips.d.ts

@@ -1,19 +1,30 @@
 import { ReactNode } from 'react';
 import { DeviceListView } from './url-state';
+import { MultiSelectOption } from './multi-select';
+export interface FilterChipsAddonOption {
+    readonly id: string;
+    readonly name: string;
+    readonly icon?: ReactNode;
+}
 export interface FilterChipsProps {
-    readonly view: DeviceListView;
-    readonly onViewChange: (view: DeviceListView) => void;
-    readonly types?: readonly string[];
-    readonly currentType: string | null;
-    readonly onTypeChange: (type: string | null) => void;
-    readonly addons?: readonly {
-        readonly id: string;
-        readonly name: string;
-        readonly icon?: ReactNode;
-    }[];
-    readonly currentAddon: string | null;
-    readonly onAddonChange: (addon: string | null) => void;
+    readonly view?: DeviceListView;
+    readonly onViewChange?: (view: DeviceListView) => void;
+    /** Hide the cards/table view toggle (generic lists have a single view). */
+    readonly hideView?: boolean;
+    /**
+     * Ready-made options for the shared multi-select type filter. Built once by
+     * the caller from the exhaustive device-type meta (`allDeviceTypeFilterOptions`)
+     * so the option set is complete + identical everywhere. Omit to hide the
+     * type filter entirely.
+     */
+    readonly typeOptions?: readonly MultiSelectOption[];
+    readonly selectedTypes: readonly string[];
+    readonly onTypesChange: (types: readonly string[]) => void;
+    readonly addons?: readonly FilterChipsAddonOption[];
+    /** Currently-selected integration ids (multi-select). */
+    readonly selectedAddons: readonly string[];
+    readonly onAddonsChange: (addons: readonly string[]) => void;
     /** When true, the addon group is hidden (used by Integrations expand-row inner DeviceList). */
     readonly hideAddons?: boolean;
 }
-export declare function FilterChips({ view, onViewChange, types, currentType, onTypeChange, addons, currentAddon, onAddonChange, hideAddons, }: FilterChipsProps): ReactNode;
+export declare function FilterChips({ view, onViewChange, hideView, typeOptions, selectedTypes, onTypesChange, addons, selectedAddons, onAddonsChange, hideAddons, }: FilterChipsProps): ReactNode;

package/dist/composites/device-list/fuzzy-match.d.ts

@@ -0,0 +1,27 @@
+/**
+ * fuzzy-match — case and separator-insensitive text search helper.
+ *
+ * Normalization rule: lowercase + strip all runs of hyphens, underscores and
+ * whitespace entirely.  This makes `Tapparella cucina` and `tapparella-cucina`
+ * both normalize to `tapparellacucina`, so a substring match succeeds in
+ * either direction.
+ */
+/**
+ * Strips hyphens, underscores and whitespace runs from `s` and lowercases it.
+ *
+ * @example
+ * normalizeForSearch('Tapparella cucina') // 'tapparellacucina'
+ * normalizeForSearch('tapparella-cucina') // 'tapparellacucina'
+ * normalizeForSearch('tapparella_cucina') // 'tapparellacucina'
+ */
+export declare function normalizeForSearch(s: string): string;
+/**
+ * Returns `true` when the normalized form of `target` contains the normalized
+ * form of `query`.  An empty query always matches.
+ *
+ * @example
+ * fuzzyMatch('Tapparella cucina', 'tapparella-cucina') // true
+ * fuzzyMatch('tapparella cucina', 'Tapparella-Cucina') // true
+ * fuzzyMatch('xyz', 'tapparella-cucina')               // false
+ */
+export declare function fuzzyMatch(query: string, target: string): boolean;

package/dist/composites/device-list/generic-mode.d.ts

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { MultiSelectOption } from './multi-select';
+/**
+ * Generic-mode props — a paginated, searchable, render-prop list that reuses
+ * the same chrome (search box + <Pagination>) as the device list but over an
+ * arbitrary item type. Used by the HA adoption modal for discovered-device
+ * candidates; selection + per-row controls live in the caller's `renderItem`.
+ */
+/** One column of the generic-mode TABLE rendering. */
+export interface DeviceListColumn<T> {
+    readonly key: string;
+    readonly header: ReactNode;
+    readonly cell: (item: T) => ReactNode;
+    /** Extra classes on the `<th>` (width, responsive hiding, alignment). */
+    readonly headerClassName?: string;
+    /** Extra classes on the `<td>`. */
+    readonly cellClassName?: string;
+}
+export interface DeviceListGenericProps<T> {
+    readonly mode: 'generic';
+    readonly items: readonly T[];
+    readonly getKey: (item: T) => string;
+    readonly getSearchText: (item: T) => string;
+    /**
+     * Row body. Provide EITHER `columns` (renders a table matching the device
+     * list's table styling) OR `renderItem` (a free-form row list). `columns`
+     * wins when both are set.
+     */
+    readonly renderItem?: (item: T) => ReactNode;
+    /** Table columns — when set, the list renders as a bordered table. */
+    readonly columns?: readonly DeviceListColumn<T>[];
+    /** Full-width expansion row rendered under an item when `isExpanded` is true. */
+    readonly renderExpanded?: (item: T) => ReactNode;
+    readonly isExpanded?: (item: T) => boolean;
+    /** Per-row class (table `<tr>` or list wrapper) — e.g. selected/adopted state. */
+    readonly rowClassName?: (item: T) => string;
+    /** Click handler for a whole table row — when set, the `<tr>` becomes a
+     *  clickable button (cursor + keyboard) that navigates/opens the item.
+     *  Per-cell interactive controls must `stopPropagation` to avoid double-firing. */
+    readonly onRowClick?: (item: T) => void;
+    /**
+     * Optional type-filter projection. When provided, the list renders a compact
+     * MULTI-SELECT dropdown over the DISTINCT values present in `items` and keeps
+     * items matching ANY selected value (empty selection = no filter). Return
+     * `null` for items that carry no type. Omit to hide the filter entirely.
+     */
+    readonly getFilterType?: (item: T) => string | null;
+    /**
+     * Enrich a raw filter value into a display `{ label, icon }` for the
+     * multi-select (e.g. via the device-type meta map). Defaults to the raw
+     * value as label, no icon. Ignored when `filterOptions` is supplied.
+     */
+    readonly mapFilterOption?: (value: string) => {
+        readonly label: string;
+        readonly icon?: LucideIcon;
+    };
+    /**
+     * Ready-made, COMPLETE option set for the type filter. When supplied, it
+     * overrides the present-values-only set the list would otherwise derive from
+     * `items` — so e.g. the adoption modal shows every `DeviceType` (via
+     * `allDeviceTypeFilterOptions`), not just the types of the current
+     * candidates. `getFilterType` still selects each item's value for matching.
+     */
+    readonly filterOptions?: readonly MultiSelectOption[];
+    /** Label for the type multi-select trigger. Default 'Type'. */
+    readonly filterLabel?: string;
+    readonly isLoading?: boolean;
+    readonly searchPlaceholder?: string;
+    readonly emptyLabel?: string;
+    readonly pageSize?: number;
+    /** Optional control rendered next to the search box (e.g. a Refresh button). */
+    readonly toolbar?: ReactNode;
+}
+/**
+ * Generic render-prop list: search + pagination chrome shared with the device
+ * list, over an arbitrary item type. Local (non-URL) state — intended for
+ * modal/ephemeral surfaces. Selection + per-row controls are the caller's, via
+ * `renderItem`.
+ */
+export declare function GenericModeList<T>(props: DeviceListGenericProps<T>): ReactNode;

package/dist/composites/device-list/group.d.ts

@@ -1,4 +1,23 @@
 import { DeviceItemDevice } from '../device-item/helpers';
+/**
+ * countableDevices — the subset of `devices` that should be counted in
+ * the device-list footer "Showing N of **M** devices".
+ *
+ * A device is countable when:
+ *   - it has no parent (`parentDeviceId === null`), OR
+ *   - its parent's type is a hub-like owner (`hub` / `nvr`) — an NVR's
+ *     cameras and a hub's children are real, individually-operable devices.
+ *
+ * Excluded:
+ *   - devices whose parent has type `container` — a Container is a grouping
+ *     shell for entity-children (e.g. a HA device's entities); the children
+ *     are represented by the parent row and must NOT inflate the total.
+ *   - orphan devices (parent id present but not in the input list) are
+ *     treated as countable — better to over-count by one than hide them.
+ *
+ * Pure: builds a `Map<id, device>` once and then filters in a single pass.
+ */
+export declare function countableDevices(devices: readonly DeviceItemDevice[]): readonly DeviceItemDevice[];
 export interface GroupedDevices {
     readonly topLevel: readonly DeviceItemDevice[];
     readonly accessoriesByParent: ReadonlyMap<number, readonly DeviceItemDevice[]>;

package/dist/composites/device-list/hardware-cell.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { DeviceItemDevice } from '../device-item/helpers';
+interface HardwareCellProps {
+    readonly device: DeviceItemDevice;
+}
+export declare function HardwareCell({ device }: HardwareCellProps): ReactNode;
+export {};

package/dist/composites/device-list/hardware.d.ts

@@ -0,0 +1,26 @@
+import { DeviceItemDevice } from '../device-item/helpers';
+/** Coerce a single metadata value to a trimmed, non-empty display string.
+ *  Strings pass through (trimmed); finite numbers + booleans coerce; every
+ *  other shape (object, array, null, undefined, NaN) yields `null` so callers
+ *  skip it rather than render a useless `[object Object]`. */
+export declare function metadataValueString(value: unknown): string | null;
+/** Read one metadata key as a safe display string (null when absent/empty). */
+export declare function metadataString(metadata: Readonly<Record<string, unknown>> | null | undefined, key: string): string | null;
+/** Compact cell text: `manufacturer · model`, or whichever is present, or
+ *  `null` when neither is a usable string (caller renders the empty state). */
+export declare function hardwareLabel(device: DeviceItemDevice): string | null;
+/** A single key/value pair for the metadata tooltip dump. */
+export interface MetadataEntry {
+    readonly key: string;
+    readonly value: string;
+}
+/** All string-coercible, non-empty metadata entries in insertion order — the
+ *  full identity blob for the tooltip. Empty array when there's nothing to show. */
+export declare function metadataEntries(metadata: Readonly<Record<string, unknown>> | null | undefined): readonly MetadataEntry[];
+/** True when the device advertises a non-empty `manufacturer`. Drives the
+ *  direction-independent "missing sorts last" rule in `sortRows`. */
+export declare function hasManufacturer(device: DeviceItemDevice): boolean;
+/** Ascending, case-insensitive comparator on `manufacturer` then `model`. The
+ *  "missing manufacturer sorts last" rule is applied direction-independently by
+ *  the caller (`sortRows`); this comparator only orders the values themselves. */
+export declare function compareHardware(a: DeviceItemDevice, b: DeviceItemDevice): number;

package/dist/composites/device-list/icon-action.d.ts

@@ -0,0 +1,17 @@
+import { ComponentType, ReactNode } from 'react';
+export interface IconActionProps {
+    /** Lucide icon component (or any component accepting `className?: string`). */
+    readonly icon: ComponentType<{
+        className?: string;
+    }>;
+    /** Human-readable label — exposed via aria-label + title, NOT as visible text. */
+    readonly label: string;
+    /** Click handler. */
+    readonly onClick: () => void;
+    /**
+     * When true, applies a red/destructive accent to the button. Use for Delete
+     * and other irreversible actions — Delete keeps red even icon-only.
+     */
+    readonly danger?: boolean;
+}
+export declare function IconAction({ icon: Icon, label, onClick, danger }: IconActionProps): ReactNode;

package/dist/composites/device-list/index.d.ts

@@ -1,31 +1,24 @@
 import { ReactNode } from 'react';
-import { UseDeviceProxyTrpc } from '../../hooks/use-device-proxy';
-import { DeviceItemDevice, DeviceItemParent } from '../device-item/helpers';
-import { DeviceListView } from './url-state';
-export interface DeviceListAddonOption {
-    readonly id: string;
-    readonly name: string;
-    readonly icon?: ReactNode;
-}
-export interface DeviceListProps {
-    readonly devices: readonly DeviceItemDevice[];
-    readonly trpc: UseDeviceProxyTrpc;
-    readonly defaultView?: DeviceListView;
-    readonly filters?: {
-        readonly types?: readonly string[];
-        readonly addons?: readonly DeviceListAddonOption[];
-    };
-    /** Pre-applied addon filter — hides the addon-chip group. */
-    readonly forceAddon?: string;
-    readonly resolveIntegrationIcon?: (addonId: string) => ReactNode | null;
-    readonly resolveParent?: (parentId: number) => DeviceItemParent | null;
-    readonly onNavigate?: (deviceId: number) => void;
-    readonly pageSize?: {
-        readonly cards: number;
-        readonly table: number;
-    };
-    readonly urlScope?: 'root' | 'nested';
-    /** LocalStorage key prefix. Default 'devices' for root scope, 'integrations:nested' for nested. */
-    readonly lsKey?: string;
-}
-export declare function DeviceList(props: DeviceListProps): ReactNode;
+import { DeviceListDeviceProps } from './device-mode';
+import { DeviceListGenericProps } from './generic-mode';
+export { countableDevices } from './group';
+export { fuzzyMatch, normalizeForSearch } from './fuzzy-match';
+export { DEVICE_COLUMNS, columnsForContext, COLUMN_PRIORITY, COLUMN_BREAKPOINT_CLASS } from './columns';
+export type { DeviceColumnId, TableContext } from './columns';
+export { nextSort, sortRows } from './sort';
+export type { DeviceSort, SortDirection, SortableColumnId } from './sort';
+export { hardwareLabel, metadataEntries, metadataString } from './hardware';
+export { IconAction, type IconActionProps } from './icon-action';
+export type { DeviceListAddonOption, DeviceListDeviceProps, DeviceListBatchActions } from './device-mode';
+export type { DeviceListColumn, DeviceListGenericProps } from './generic-mode';
+/**
+ * Default registry-device list, or a generic render-prop list (`mode:'generic'`).
+ * Existing call sites pass no `mode` and resolve to the device variant unchanged.
+ */
+export type DeviceListProps<T = unknown> = DeviceListDeviceProps | DeviceListGenericProps<T>;
+/**
+ * Dispatcher: default registry-device list, or a generic render-prop list when
+ * `mode:'generic'`. The two paths are separate component instances so their
+ * hooks never interleave (a given call site's mode is stable).
+ */
+export declare function DeviceList<T = unknown>(props: DeviceListProps<T>): ReactNode;

package/dist/composites/device-list/multi-select.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+export interface MultiSelectOption {
+    readonly id: string;
+    readonly label: string;
+    readonly icon?: LucideIcon;
+}
+export interface MultiSelectDropdownProps {
+    /** Trigger label, e.g. "Type". A count badge is appended when items are selected. */
+    readonly label: string;
+    readonly options: readonly MultiSelectOption[];
+    readonly selected: readonly string[];
+    readonly onChange: (selected: readonly string[]) => void;
+}
+/**
+ * Compact multi-select dropdown — a single chip-sized trigger ("Label · N")
+ * that opens a checklist. Self-contained (outside-click / Escape dismiss), so
+ * it stays compressed regardless of how many options exist or how little
+ * horizontal room the container has. Shared by the device list's generic-mode
+ * type filter and any other multi-select needs.
+ */
+export declare function MultiSelectDropdown({ label, options, selected, onChange }: MultiSelectDropdownProps): ReactNode;

package/dist/composites/device-list/sort.d.ts

@@ -0,0 +1,18 @@
+import { DeviceItemDevice } from '../device-item/helpers';
+/** Columns that expose a clickable sort header. */
+export type SortableColumnId = 'name' | 'type' | 'manufacturer';
+export type SortDirection = 'asc' | 'desc';
+export interface DeviceSort {
+    readonly columnId: SortableColumnId;
+    readonly dir: SortDirection;
+}
+/**
+ * Toggle a column's sort on header click: none → asc → desc → none.
+ * Clicking a DIFFERENT column starts it fresh at `asc`.
+ */
+export declare function nextSort(current: DeviceSort | null, columnId: SortableColumnId): DeviceSort | null;
+/**
+ * Return a NEW array of the top-level rows in sorted order. `null` ⇒ a fresh
+ * copy in the original order. Stable + immutable; the input is never mutated.
+ */
+export declare function sortRows(rows: readonly DeviceItemDevice[], sort: DeviceSort | null): readonly DeviceItemDevice[];

package/dist/composites/device-list/sortable-header.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { DeviceSort, SortableColumnId } from './sort';
+interface SortableHeaderButtonProps {
+    readonly columnId: SortableColumnId;
+    readonly label: string;
+    readonly sort: DeviceSort | null;
+    readonly onSort: (columnId: SortableColumnId) => void;
+}
+export declare function SortableHeaderButton({ columnId, label, sort, onSort, }: SortableHeaderButtonProps): ReactNode;
+export {};

package/dist/composites/device-list/table-layout.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { DeviceItemDevice } from '../device-item/helpers';
+import { CardsLayoutProps } from './cards-layout';
+import { DeviceColumnId } from './columns';
+import { DeviceSort, SortableColumnId } from './sort';
+interface TableLayoutProps extends CardsLayoutProps {
+    /** Built-in confirmed delete (table feature). Null ⇒ no trash. Only
+     *  top-level rows carry it (accessory sub-rows are excluded — same gate
+     *  as `renderRowAction`). */
+    readonly onDeleteDevice: ((device: DeviceItemDevice) => void) | null;
+    readonly autoExpandedParents: ReadonlySet<number>;
+    /** Full unfiltered device list — used to resolve parent.type for the
+     *  adopted-row indent. We can't rely on `resolveParent` returning the
+     *  parent's type (callers historically only project id+name). */
+    readonly devices: readonly DeviceItemDevice[];
+    /** Context-selected columns to render (header + cells). `name` always on. */
+    readonly visibleColumns: readonly DeviceColumnId[];
+    /** Active sort (top-level rows), or `null` for the default incoming order.
+     *  Owned by the device-mode wrapper so the sort applies before pagination. */
+    readonly sort: DeviceSort | null;
+    /** Header-click handler — toggles the column's sort (asc→desc→none). */
+    readonly onSort: (columnId: SortableColumnId) => void;
+}
+export declare function TableLayout({ rows, accessoriesByParent, autoExpandedParents, devices, visibleColumns, trpc, resolveIntegrationIcon, resolveParent, onNavigate, renderRowAction, onDeleteDevice, selectable, rowClickSelects, activeSelected, onToggleSelection, sort, onSort, }: TableLayoutProps): ReactNode;
+export {};

package/dist/composites/device-list/type-filter.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { MultiSelectOption } from './multi-select';
+export interface ResponsiveTypeFilterProps {
+    readonly label: string;
+    readonly options: readonly MultiSelectOption[];
+    readonly selected: readonly string[];
+    readonly onChange: (selected: readonly string[]) => void;
+}
+/**
+ * Shared, multi-select type filter that adapts to its OWN available width
+ * (measured via ResizeObserver, NOT the viewport — the adoption modal and the
+ * Devices page differ at the same screen size):
+ *   - wide enough  → inline toggle chips (Devices page stays chips)
+ *   - too narrow   → the compact <MultiSelectDropdown> (adoption modal collapses)
+ *
+ * One component for every list consumer, so the filter looks and behaves the
+ * same everywhere and only the FORM changes with available room.
+ */
+export declare function ResponsiveTypeFilter({ label, options, selected, onChange }: ResponsiveTypeFilterProps): ReactNode;

package/dist/composites/device-list/url-state.d.ts

@@ -2,8 +2,18 @@ export type DeviceListView = 'cards' | 'table';
 export interface DeviceListUrlState {
     readonly view: DeviceListView;
     readonly page: number;
-    readonly addon: string | null;
-    readonly type: string | null;
+    /**
+     * Selected integration ids. Multi-select: empty array = no integration
+     * filter (show all). Serialised in the URL / localStorage as a single
+     * comma-joined `addon` value so existing single-value links keep working.
+     */
+    readonly addons: readonly string[];
+    /**
+     * Selected device types. Multi-select: empty array = no type filter.
+     * Serialised in the URL / localStorage as a single comma-joined `type`
+     * value so existing single-value links keep working.
+     */
+    readonly types: readonly string[];
     readonly q: string;
 }
 export interface UseDeviceListUrlStateOptions {
@@ -16,8 +26,8 @@ export interface UseDeviceListUrlStateResult {
     readonly state: DeviceListUrlState;
     readonly setView: (view: DeviceListView) => void;
     readonly setPage: (page: number) => void;
-    readonly setAddon: (addon: string | null) => void;
-    readonly setType: (type: string | null) => void;
+    readonly setAddons: (addons: readonly string[]) => void;
+    readonly setTypes: (types: readonly string[]) => void;
     readonly setQ: (q: string) => void;
     readonly clearFilters: () => void;
 }

package/dist/composites/device-meta.d.ts

@@ -0,0 +1,38 @@
+import { LucideIcon } from 'lucide-react';
+import { DeviceType, DeviceRole } from '@camstack/types';
+import { MultiSelectOption } from './device-list/multi-select';
+/**
+ * Single source of truth for rendering a device TYPE or ROLE: its icon + label.
+ *
+ * Both maps are `Record<DeviceType | DeviceRole, …>`, so adding a new enum
+ * member makes the object literal incomplete and the build FAILS until the new
+ * type/role is given an icon + label here. That is the whole point — UI never
+ * silently falls back to a generic glyph for a freshly-added type/role.
+ *
+ * Lives in `@camstack/ui-library` because the icons are `lucide-react`
+ * components; the labels are the user-facing defaults (wire i18n at the call
+ * site if a translation is needed).
+ */
+export interface DeviceTypeMeta {
+    readonly icon: LucideIcon;
+    readonly label: string;
+}
+export interface DeviceRoleMeta {
+    readonly icon: LucideIcon;
+    readonly label: string;
+}
+export declare const DEVICE_TYPE_META: Record<DeviceType, DeviceTypeMeta>;
+export declare const DEVICE_ROLE_META: Record<DeviceRole, DeviceRoleMeta>;
+/** Meta for a known `DeviceType`. */
+export declare function deviceTypeMeta(type: DeviceType): DeviceTypeMeta;
+/** Meta for a known `DeviceRole`. */
+export declare function deviceRoleMeta(role: DeviceRole): DeviceRoleMeta;
+/**
+ * Runtime-string-safe lookup: device data crosses process / network boundaries
+ * as plain strings, so an unrecognised value falls back to the `Generic` meta
+ * instead of throwing.
+ */
+export declare function deviceTypeMetaOf(type: string): DeviceTypeMeta;
+/** Runtime-string-safe role lookup; unknown roles fall back to `GenericSensor`. */
+export declare function deviceRoleMetaOf(role: string): DeviceRoleMeta;
+export declare function allDeviceTypeFilterOptions(): readonly MultiSelectOption[];