@theredhead/lucid-blocks 0.1.0

package/types/theredhead-lucid-blocks.d.ts

@@ -0,0 +1,2393 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, OnInit, InjectionToken, AfterViewInit } from '@angular/core';
+import * as i1 from '@theredhead/lucid-foundation';
+import { IDatasource, Predicate } from '@theredhead/lucid-foundation';
+import { ITreeDatasource, FilterFieldDefinition, SplitCollapseTarget, SplitPanelConstraints, FilterDescriptor, UITableViewColumn, TreeNodeContext, SelectionModel, TreeNode, FilterExpression, DrawerPosition, BreadcrumbVariant, UISidebarItem, BreadcrumbItem, PageChangeEvent, SelectOption } from '@theredhead/lucid-kit';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+
+/**
+ * Context provided to the detail template.
+ *
+ * @typeParam T - The row object type.
+ */
+interface MasterDetailContext<T> {
+    /** The selected item (also available as `let-object`). */
+    $implicit: T;
+}
+/**
+ * A master-detail layout that shows a list of items in a
+ * {@link UITableView} and renders a detail template for the
+ * currently selected item.
+ *
+ * ### Basic usage (table mode)
+ * ```html
+ * <ui-master-detail-view [datasource]="adapter" title="People">
+ *   <ui-text-column key="name" headerText="Name" />
+ *   <ui-text-column key="email" headerText="Email" />
+ *
+ *   <ng-template #detail let-object>
+ *     <h3>{{ object.name }}</h3>
+ *     <p>{{ object.email }}</p>
+ *   </ng-template>
+ * </ui-master-detail-view>
+ * ```
+ *
+ * ### Tree mode
+ * ```html
+ * <ui-master-detail-view [datasource]="treeDs" [treeDisplayWith]="labelFn">
+ *   <ng-template #detail let-object>
+ *     <h3>{{ object.name }}</h3>
+ *   </ng-template>
+ * </ui-master-detail-view>
+ * ```
+ *
+ * ### With filter
+ * ```html
+ * <!-- Auto-inferred fields from columns + data types -->
+ * <ui-master-detail-view [datasource]="adapter" [showFilter]="true">
+ *   <ui-text-column key="name" headerText="Name" />
+ *   <ui-text-column key="email" headerText="Email" />
+ *   <ng-template #detail let-object>…</ng-template>
+ * </ui-master-detail-view>
+ * ```
+ *
+ * ### With custom filter template (override)
+ * ```html
+ * <ui-master-detail-view [datasource]="adapter" [showFilter]="true">
+ *   <ng-template #filter>
+ *     <ui-filter [fields]="fields" [(value)]="descriptor"
+ *                (expressionChange)="ds.filterBy($event)" />
+ *   </ng-template>
+ *   <!-- columns and detail template -->
+ * </ui-master-detail-view>
+ * ```
+ */
+declare class UIMasterDetailView<T = unknown> {
+    /** Title displayed above the list panel. */
+    readonly title: _angular_core.InputSignal<string>;
+    /**
+     * The datasource powering the master list.
+     *
+     * Accepts any {@link IDatasource} (for flat table mode)
+     * or an {@link ITreeDatasource} (for hierarchical tree mode).
+     * The component detects the type at runtime and renders the
+     * appropriate view.
+     */
+    readonly datasource: _angular_core.InputSignal<IDatasource<T> | ITreeDatasource<T> | undefined>;
+    /**
+     * Function that returns a display string for tree node data.
+     * Only used in tree mode when no `#nodeTemplate` is projected.
+     * Defaults to `String(data)`.
+     */
+    readonly treeDisplayWith: _angular_core.InputSignal<(data: T) => string>;
+    /** Placeholder text shown when no item is selected. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Whether the filter section is visible.
+     *
+     * - `true` — always show the filter.
+     * - `false` — never show the filter.
+     * - `undefined` (default) — auto-detect: show the filter when the
+     *   resolved datasource is a {@link FilterableArrayDatasource}.
+     *
+     * When shown without a projected `#filter` template, the component
+     * embeds a `<ui-filter>` internally using auto-inferred field
+     * definitions.
+     */
+    readonly showFilter: _angular_core.InputSignal<boolean | undefined>;
+    /** Whether the filter section starts expanded. */
+    readonly filterExpanded: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the filter toggle button is hidden.
+     *
+     * When `true`, the toggle is removed and the filter section stays
+     * permanently in whatever state `filterExpanded` dictates:
+     * - `filterExpanded: true` + `filterModeLocked: true` → filter is
+     *   always visible, cannot be collapsed.
+     * - `filterExpanded: false` + `filterModeLocked: true` → filter bar
+     *   is completely hidden (equivalent to `showFilter: false`).
+     *
+     * This value is also forwarded to the embedded `<ui-filter>` as
+     * `[modeLocked]`, preventing the user from toggling between
+     * simple and advanced filter modes.
+     */
+    readonly filterModeLocked: _angular_core.InputSignal<boolean>;
+    /**
+     * Explicit filter field definitions.
+     *
+     * When provided these override the auto-inferred fields.
+     * Only relevant when no `#filter` template is projected.
+     */
+    readonly filterFields: _angular_core.InputSignal<FilterFieldDefinition<T>[] | undefined>;
+    /**
+     * Initial split sizes as a `[list, detail]` percentage tuple.
+     * Must sum to 100. Defaults to `[33, 67]`.
+     */
+    readonly splitSizes: _angular_core.InputSignal<readonly [number, number]>;
+    /**
+     * Optional localStorage key for persisting the split panel sizes.
+     * When set the user's last divider position is restored on init.
+     */
+    readonly splitName: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Which panel to collapse when the divider is double-clicked.
+     * Defaults to `'first'` so the list panel can be collapsed.
+     */
+    readonly splitCollapseTarget: _angular_core.InputSignal<SplitCollapseTarget>;
+    /**
+     * Size constraints for the list (first) panel in pixels.
+     * Defaults to `{ min: 200 }`.
+     */
+    readonly listConstraints: _angular_core.InputSignal<SplitPanelConstraints>;
+    /** Whether the embedded table view is disabled. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Page size for the embedded table view's paginator.
+     * Leave `undefined` to use the table's default.
+     */
+    readonly pageSize: _angular_core.InputSignal<number | undefined>;
+    /**
+     * External page index (zero-based) for the embedded table view.
+     * Leave `undefined` to let the built-in paginator manage it.
+     */
+    readonly pageIndex: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Whether to show the table's built-in paginator.
+     * Defaults to `false`.
+     */
+    readonly showBuiltInPaginator: _angular_core.InputSignal<boolean>;
+    /** Accessible caption for the embedded table. */
+    readonly caption: _angular_core.InputSignal<string>;
+    /** Whether to show row-index numbers in the table. */
+    readonly showRowIndexIndicator: _angular_core.InputSignal<boolean>;
+    /** Header text for the row-index column.  Defaults to `"#"`. */
+    readonly rowIndexHeaderText: _angular_core.InputSignal<string>;
+    /**
+     * Unique table identifier used for persisting column widths.
+     * When set, column widths are stored in localStorage.
+     */
+    readonly tableId: _angular_core.InputSignal<string>;
+    /**
+     * Whether table columns can be resized by dragging header borders.
+     * Defaults to `true`.
+     */
+    readonly resizable: _angular_core.InputSignal<boolean>;
+    /**
+     * Row height in pixels for the internal table-view.
+     * Forwarded to `<ui-table-view [rowHeight]>`.
+     * Defaults to 36 px.
+     */
+    readonly rowHeight: _angular_core.InputSignal<number>;
+    /** Emits whenever the selection changes. Carries the selected item or `undefined`. */
+    readonly selectedChange: _angular_core.OutputEmitterRef<T | undefined>;
+    /**
+     * Emits the {@link FilterExpression} every time the filter rules
+     * change. Emits an empty array when no valid rules remain.
+     *
+     * For {@link FilterableArrayDatasource} instances the expression is
+     * applied automatically — this output is for consumers who use a
+     * custom datasource and need to handle filtering manually.
+     */
+    readonly expressionChange: _angular_core.OutputEmitterRef<FilterDescriptor<T>>;
+    /**
+     * The filter descriptor state (two-way bindable).
+     *
+     * Provides full read/write access to the filter's rule set and
+     * junction mode. Defaults to an empty AND descriptor.
+     */
+    readonly filterDescriptor: _angular_core.ModelSignal<FilterDescriptor<T>>;
+    /**
+     * Projected table-view columns.
+     * These are forwarded to the internal `<ui-table-view>`.
+     */
+    readonly columns: _angular_core.Signal<readonly UITableViewColumn[]>;
+    /** Detail template — rendered when an item is selected. */
+    readonly detailTemplate: _angular_core.Signal<TemplateRef<MasterDetailContext<T>> | undefined>;
+    /** Optional filter template — shown in the collapsible filter area. */
+    readonly filterTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    /**
+     * Optional tree-node template — forwarded to `<ui-tree-view>`.
+     * Receives {@link TreeNodeContext} as its context.
+     */
+    readonly treeNodeTemplate: _angular_core.Signal<TemplateRef<TreeNodeContext<T>> | undefined>;
+    /** @internal — the internal table view instance (table mode). */
+    private readonly tableViewChild;
+    /**
+     * Whether the component is in tree mode.
+     * `true` when the `datasource` input is an `ITreeDatasource`. @internal
+     */
+    protected readonly isTreeMode: _angular_core.Signal<boolean>;
+    /**
+     * The tree datasource, extracted from the unified `datasource`
+     * input. Returns `undefined` when not in tree mode.
+     * @internal
+     */
+    protected readonly resolvedTreeDatasource: _angular_core.Signal<ITreeDatasource<T> | undefined>;
+    /**
+     * The currently selected item, derived from the table selection
+     * model or the tree selection signal. @internal
+     */
+    protected readonly selectedItem: _angular_core.Signal<T | undefined>;
+    /** Context for the detail template outlet. @internal */
+    protected readonly detailContext: _angular_core.Signal<MasterDetailContext<T> | undefined>;
+    /**
+     * The resolved flat-table datasource.
+     *
+     * Returns the `datasource` input when it is a flat
+     * {@link IDatasource} (not a tree). Falls back to an empty
+     * {@link FilterableArrayDatasource} when no datasource is set or
+     * when the input is a tree datasource.
+     * @internal
+     */
+    protected readonly resolvedTableDatasource: _angular_core.Signal<IDatasource<T>>;
+    /**
+     * Whether the filter section should be displayed.
+     *
+     * - Explicit `showFilter` input wins when not `undefined`.
+     * - Otherwise auto-detects: `true` when the underlying raw
+     *   datasource is a {@link FilterableArrayDatasource}.
+     * @internal
+     */
+    protected readonly resolvedShowFilter: _angular_core.Signal<boolean>;
+    /**
+     * The filter field definitions used by the embedded `<ui-filter>`.
+     *
+     * Priority: explicit `filterFields` input → inferred from projected
+     * columns and the first data row.
+     * @internal
+     */
+    protected readonly resolvedFilterFields: _angular_core.Signal<FilterFieldDefinition<T>[]>;
+    /**
+     * The raw data array for the embedded filter (used to derive
+     * distinct values for autocomplete / select).
+     * @internal
+     */
+    protected readonly resolvedFilterData: _angular_core.Signal<readonly T[]>;
+    /** Selection model for the table-view (single mode). */
+    readonly selectionModel: SelectionModel<T>;
+    /** @internal — currently selected tree nodes (tree mode). */
+    protected readonly selectedTreeNodes: _angular_core.WritableSignal<readonly TreeNode<T>[]>;
+    /** @internal — whether the filter section is collapsed. */
+    protected readonly filterCollapsed: _angular_core.WritableSignal<boolean>;
+    /**
+     * The current filter predicate for tree mode.
+     * Forwarded to the `<ui-tree-view>` `filterPredicate` input.
+     * @internal
+     */
+    protected readonly treeFilterPredicate: _angular_core.WritableSignal<Predicate<T> | undefined>;
+    /** @internal */
+    protected readonly chevronDown: "<path d=\"m6 9 6 6 6-6\" />";
+    /** @internal */
+    protected readonly chevronRight: "<path d=\"m9 18 6-6-6-6\" />";
+    constructor();
+    /**
+     * Called by the embedded `<ui-filter>` when the expression changes.
+     *
+     * - For {@link FilterableArrayDatasource} the expression is applied
+     *   via `filterBy()` and the adapter is refreshed.
+     * - For tree mode the expression is compiled into a predicate for
+     *   the tree-view's `filterPredicate` input.
+     * - Always emits via {@link expressionChange} so consumers with
+     *   custom datasources can react.
+     */
+    onFilterExpressionChange(expression: FilterExpression<T>): void;
+    /** @internal — toggle filter visibility. */
+    protected toggleFilter(): void;
+    /**
+     * Recursively collects the `data` payloads from every node in the
+     * tree datasource into a flat array. Used to infer filter fields
+     * and provide distinct values in tree mode.
+     */
+    private collectTreeData;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIMasterDetailView<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIMasterDetailView<any>, "ui-master-detail-view", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "datasource": { "alias": "datasource"; "required": false; "isSignal": true; }; "treeDisplayWith": { "alias": "treeDisplayWith"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "showFilter": { "alias": "showFilter"; "required": false; "isSignal": true; }; "filterExpanded": { "alias": "filterExpanded"; "required": false; "isSignal": true; }; "filterModeLocked": { "alias": "filterModeLocked"; "required": false; "isSignal": true; }; "filterFields": { "alias": "filterFields"; "required": false; "isSignal": true; }; "splitSizes": { "alias": "splitSizes"; "required": false; "isSignal": true; }; "splitName": { "alias": "splitName"; "required": false; "isSignal": true; }; "splitCollapseTarget": { "alias": "splitCollapseTarget"; "required": false; "isSignal": true; }; "listConstraints": { "alias": "listConstraints"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "showBuiltInPaginator": { "alias": "showBuiltInPaginator"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "showRowIndexIndicator": { "alias": "showRowIndexIndicator"; "required": false; "isSignal": true; }; "rowIndexHeaderText": { "alias": "rowIndexHeaderText"; "required": false; "isSignal": true; }; "tableId": { "alias": "tableId"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "filterDescriptor": { "alias": "filterDescriptor"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "expressionChange": "expressionChange"; "filterDescriptor": "filterDescriptorChange"; }, ["columns", "detailTemplate", "filterTemplate", "treeNodeTemplate"], ["*"], true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * Types and interfaces for the dashboard host component.
+ *
+ * A dashboard lays out a set of **panels** on a CSS grid.
+ * Each panel declares its grid placement (column/row span)
+ * and optional metadata (title, collapsible, removable).
+ */
+/**
+ * Grid placement descriptor for a single dashboard panel.
+ *
+ * Values map directly to CSS `grid-column` / `grid-row` span units.
+ * All values default to `1` when omitted.
+ */
+interface DashboardGridPlacement {
+    /** Number of columns the panel spans. */
+    readonly colSpan?: number;
+    /** Number of rows the panel spans. */
+    readonly rowSpan?: number;
+}
+/**
+ * Static configuration for a single dashboard panel.
+ *
+ * Passed as the `[config]` input to `<ui-dashboard-panel>`.
+ */
+interface DashboardPanelConfig {
+    /** Unique identifier for this panel. */
+    readonly id: string;
+    /** Display title rendered in the panel header. */
+    readonly title: string;
+    /**
+     * SVG icon content for the panel header and dock chip.
+     * Pass an SVG inner-content string (e.g. from `UIIcons.Lucide.*`).
+     * Falls back to the dashboard's `defaultDockIcon` when omitted.
+     */
+    readonly icon?: string;
+    /** Grid placement (column / row span). */
+    readonly placement?: DashboardGridPlacement;
+    /**
+     * Whether the panel body can be collapsed by the user.
+     * Defaults to `false`.
+     */
+    readonly collapsible?: boolean;
+    /**
+     * Whether the panel can be removed (hidden) by the user.
+     * Defaults to `false`.
+     */
+    readonly removable?: boolean;
+}
+/**
+ * Predefined column count aliases for common dashboard layouts.
+ *
+ * - `'auto'` — responsive auto-fill with `minmax(280px, 1fr)`
+ * - A number — explicit fixed column count
+ */
+type DashboardColumns = "auto" | number;
+/**
+ * Where the collapsed-panel dock is rendered relative to the grid.
+ *
+ * - `'top'` — above the grid
+ * - `'bottom'` — below the grid (default)
+ */
+type DashboardDockPosition = "top" | "bottom";
+
+/**
+ * A single panel inside a {@link UIDashboard}.
+ *
+ * The panel renders a header bar (title + optional collapse / remove
+ * controls) and projects arbitrary content via `<ng-content>`.
+ *
+ * @example
+ * ```html
+ * <ui-dashboard-panel [config]="{ id: 'sales', title: 'Sales KPI', collapsible: true }">
+ *   <p>Revenue chart goes here</p>
+ * </ui-dashboard-panel>
+ * ```
+ */
+declare class UIDashboardPanel {
+    /** Panel configuration (id, title, grid placement, flags). */
+    readonly config: _angular_core.InputSignal<DashboardPanelConfig>;
+    /** Emitted when the user removes (hides) this panel. */
+    readonly panelRemoved: _angular_core.OutputEmitterRef<string>;
+    /** Emitted when the collapsed state changes. */
+    readonly collapsedChange: _angular_core.OutputEmitterRef<boolean>;
+    /** CSS `grid-column` value derived from placement config. */
+    protected readonly gridColumn: _angular_core.Signal<string | undefined>;
+    /** CSS `grid-row` value derived from placement config. */
+    protected readonly gridRow: _angular_core.Signal<string | undefined>;
+    /** Whether the panel header shows a collapse toggle. */
+    protected readonly isCollapsible: _angular_core.Signal<boolean>;
+    /** Whether the panel header shows a remove button. */
+    protected readonly isRemovable: _angular_core.Signal<boolean>;
+    /** SVG icon for the collapse toggle button. */
+    protected readonly collapseIcon: _angular_core.Signal<"<path d=\"m6 9 6 6 6-6\" />" | "<path d=\"m9 18 6-6-6-6\" />">;
+    /** SVG icon for the remove button. */
+    protected readonly removeIcon: "<path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" />";
+    /** Whether the panel body is currently collapsed. */
+    readonly collapsed: _angular_core.WritableSignal<boolean>;
+    /** Whether the panel has been removed (hidden) by the user. */
+    readonly removed: _angular_core.WritableSignal<boolean>;
+    /** Whether the panel currently has an active notification. */
+    readonly notified: _angular_core.WritableSignal<boolean>;
+    private readonly log;
+    private readonly destroyRef;
+    private notificationTimer;
+    constructor();
+    /**
+     * Activate a notification on this panel.
+     *
+     * The notification accent remains visible until the panel is
+     * focused (expanded) or the optional `timeoutMs` elapses.
+     *
+     * @param timeoutMs - Auto-clear delay in milliseconds. When `0`
+     *   or omitted the notification persists until manually cleared.
+     */
+    notify(timeoutMs?: number): void;
+    /** Clear the active notification. */
+    clearNotification(): void;
+    /** Toggle the collapsed state. */
+    toggleCollapse(): void;
+    /** Remove (hide) the panel. */
+    remove(): void;
+    /** Restore a previously removed panel. */
+    restore(): void;
+    private clearNotificationTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIDashboardPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIDashboardPanel, "ui-dashboard-panel", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; }, { "panelRemoved": "panelRemoved"; "collapsedChange": "collapsedChange"; }, never, ["*"], true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * Dashboard host component.
+ *
+ * Lays out projected {@link UIDashboardPanel} children on a CSS grid.
+ * The grid column count is configurable via the `columns` input — either
+ * a fixed number or `'auto'` for responsive auto-fill.
+ *
+ * Panels declare their own grid span via their `config.placement`
+ * property. The host is intentionally *content-agnostic*: it provides
+ * the grid shell and panel management (collapse, remove, restore)
+ * while consumers project whatever widgets they need.
+ *
+ * @example
+ * ```html
+ * <ui-dashboard [columns]="3" [gap]="16">
+ *   <ui-dashboard-panel [config]="{ id: 'kpi', title: 'KPI', placement: { colSpan: 2 } }">
+ *     <my-kpi-widget />
+ *   </ui-dashboard-panel>
+ *
+ *   <ui-dashboard-panel [config]="{ id: 'chart', title: 'Revenue' }">
+ *     <my-chart />
+ *   </ui-dashboard-panel>
+ *
+ *   <ui-dashboard-panel [config]="{ id: 'feed', title: 'Activity', placement: { colSpan: 3 } }">
+ *     <my-activity-feed />
+ *   </ui-dashboard-panel>
+ * </ui-dashboard>
+ * ```
+ */
+declare class UIDashboard {
+    /**
+     * Number of grid columns.
+     *
+     * - A number (e.g. `3`) creates a fixed column layout.
+     * - `'auto'` uses responsive `auto-fill` with `minmax(280px, 1fr)`.
+     *
+     * Defaults to `'auto'`.
+     */
+    readonly columns: _angular_core.InputSignal<DashboardColumns>;
+    /**
+     * Gap between grid cells in pixels.
+     * Defaults to `16`.
+     */
+    readonly gap: _angular_core.InputSignal<number>;
+    /**
+     * Minimum column width in pixels (only used when `columns` is `'auto'`).
+     * Defaults to `280`.
+     */
+    readonly minColumnWidth: _angular_core.InputSignal<number>;
+    /** Accessible label for the dashboard region. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Where the collapsed-panel dock is rendered.
+     * Defaults to `'bottom'`.
+     */
+    readonly dockPosition: _angular_core.InputSignal<DashboardDockPosition>;
+    /**
+     * Whether dock chips show the panel title alongside the icon.
+     * Defaults to `false` (icon-only with title in tooltip).
+     */
+    readonly dockShowTitles: _angular_core.InputSignal<boolean>;
+    /**
+     * Default SVG icon for panels that don't declare their own `icon`.
+     * Defaults to the Lucide `LayoutDashboard` icon.
+     */
+    readonly defaultDockIcon: _angular_core.InputSignal<string>;
+    /**
+     * SVG icon for the optional dock menu button.
+     * When set, a menu button is rendered at the leading edge of the dock.
+     * When omitted (`undefined`), no menu button is shown.
+     */
+    readonly dockMenuIcon: _angular_core.InputSignal<string | undefined>;
+    /** Emitted when any panel is removed by the user. */
+    readonly panelRemoved: _angular_core.OutputEmitterRef<string>;
+    /** Emitted when the dock menu button is clicked. */
+    readonly dockMenuClicked: _angular_core.OutputEmitterRef<void>;
+    /** All projected dashboard panels. */
+    readonly panels: _angular_core.Signal<readonly UIDashboardPanel[]>;
+    /** CSS value for `grid-template-columns`. */
+    protected readonly gridTemplateColumns: _angular_core.Signal<string>;
+    /** CSS value for `gap`. */
+    protected readonly gridGap: _angular_core.Signal<string>;
+    /** Panels that have been removed by the user. */
+    readonly removedPanelIds: _angular_core.Signal<string[]>;
+    /** Panels that are currently collapsed (shown in the dock). */
+    readonly collapsedPanels: _angular_core.Signal<UIDashboardPanel[]>;
+    /** Whether the dock panel-picker menu is open. */
+    readonly dockMenuOpen: _angular_core.WritableSignal<boolean>;
+    private readonly log;
+    private readonly destroyRef;
+    private readonly elRef;
+    /** Subscriptions to panel `panelRemoved` outputs. */
+    private panelSubs;
+    constructor();
+    /**
+     * Restore a previously removed panel by its id.
+     *
+     * @param panelId - The `config.id` of the panel to restore.
+     * @returns `true` if the panel was found and restored.
+     */
+    restorePanel(panelId: string): boolean;
+    /**
+     * Restore all removed panels.
+     */
+    restoreAll(): void;
+    /**
+     * Resolve the icon SVG for a panel, falling back to the default.
+     *
+     * @param panelIcon - The panel's own icon, if any.
+     * @returns SVG inner-content string.
+     */
+    protected resolveIcon(panelIcon: string | undefined): string;
+    /** Toggle the dock panel-picker menu. */
+    toggleDockMenu(): void;
+    /** Close the dock panel-picker menu. */
+    closeDockMenu(): void;
+    /**
+     * Toggle a panel's collapsed state from the menu.
+     * If removed, restore it first.
+     */
+    protected menuTogglePanel(panel: UIDashboardPanel): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIDashboard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIDashboard, "ui-dashboard", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "minColumnWidth": { "alias": "minColumnWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "dockPosition": { "alias": "dockPosition"; "required": false; "isSignal": true; }; "dockShowTitles": { "alias": "dockShowTitles"; "required": false; "isSignal": true; }; "defaultDockIcon": { "alias": "defaultDockIcon"; "required": false; "isSignal": true; }; "dockMenuIcon": { "alias": "dockMenuIcon"; "required": false; "isSignal": true; }; }, { "panelRemoved": "panelRemoved"; "dockMenuClicked": "dockMenuClicked"; }, ["panels"], ["[dockMenuItem]", "*", "[dockMenuItem]"], true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * Convenience type alias for a navigation tree node.
+ *
+ * A `NavigationNode` is a {@link TreeNode} whose data payload is
+ * {@link NavigationNodeData}. Leaf nodes render as sidebar items;
+ * nodes with `children` render as collapsible sidebar groups.
+ */
+type NavigationNode = TreeNode<NavigationNodeData>;
+/**
+ * Creates a leaf navigation node (sidebar item).
+ *
+ * @param id    - Unique identifier (also used as the active-page key).
+ * @param label - Display text in the sidebar and breadcrumb.
+ * @param options - Optional icon, badge, route, and disabled state.
+ * @returns A {@link NavigationNode} without children.
+ *
+ * @example
+ * ```ts
+ * navItem('dashboard', 'Dashboard', {
+ *   icon: UIIcons.Lucide.Layout.LayoutDashboard,
+ *   badge: '3',
+ * })
+ * ```
+ */
+declare function navItem(id: string, label: string, options?: {
+    readonly icon?: string;
+    readonly badge?: string;
+    readonly route?: string;
+    readonly disabled?: boolean;
+}): NavigationNode;
+/**
+ * Creates a group navigation node (collapsible sidebar group).
+ *
+ * @param id       - Unique identifier for the group.
+ * @param label    - Display text for the group header.
+ * @param children - Child navigation nodes rendered inside the group.
+ * @param options  - Optional icon and expanded state.
+ * @returns A {@link NavigationNode} with children.
+ *
+ * @example
+ * ```ts
+ * navGroup('settings', 'Settings', [
+ *   navItem('general', 'General'),
+ *   navItem('security', 'Security'),
+ * ], { icon: UIIcons.Lucide.Account.Settings })
+ * ```
+ */
+declare function navGroup(id: string, label: string, children: readonly NavigationNode[], options?: {
+    readonly icon?: string;
+    readonly expanded?: boolean;
+}): NavigationNode;
+/**
+ * Shape of a route entry compatible with Angular's `Route` type.
+ *
+ * This is intentionally a structural type so consumers can pass
+ * `inject(Router).config` directly without the library depending
+ * on `@angular/router`.
+ *
+ * Routes are only included in the output when they carry
+ * `data.navLabel`. Additional metadata keys:
+ *
+ * | Key             | Type      | Maps to                      |
+ * |-----------------|-----------|------------------------------|
+ * | `navLabel`      | `string`  | `data.label`                 |
+ * | `navIcon`       | `string`  | `node.icon`                  |
+ * | `navBadge`      | `string`  | `data.badge`                 |
+ * | `navDisabled`   | `boolean` | `node.disabled`              |
+ * | `navExpanded`   | `boolean` | `node.expanded` (for groups) |
+ */
+interface NavigationRouteConfig {
+    readonly path?: string;
+    readonly data?: Readonly<Record<string, unknown>>;
+    readonly children?: readonly NavigationRouteConfig[];
+}
+/**
+ * Converts an Angular-Router-compatible route config array into
+ * {@link NavigationNode NavigationNode[]} for use with
+ * {@link UINavigationPage}.
+ *
+ * Only routes that include `data: { navLabel: '…' }` are emitted.
+ * Child routes are recursively processed, producing group nodes
+ * when a parent has navigable children.
+ *
+ * @param routes     - The route configuration (e.g. `inject(Router).config`).
+ * @param parentPath - Internal: accumulated path prefix for nested routes.
+ * @returns An array of navigation tree nodes.
+ *
+ * @example
+ * ```ts
+ * // In your app component:
+ * private readonly router = inject(Router);
+ * readonly navItems = routesToNavigation(this.router.config);
+ * ```
+ */
+declare function routesToNavigation(routes: readonly NavigationRouteConfig[], parentPath?: string): NavigationNode[];
+
+/**
+ * Data payload carried by each node in the navigation tree.
+ *
+ * The structural properties (`id`, `icon`, `disabled`, `expanded`,
+ * `children`) live on the {@link TreeNode} wrapper; this interface
+ * holds the domain-specific fields.
+ */
+interface NavigationNodeData {
+    /** Display label shown in the sidebar and breadcrumb trail. */
+    readonly label: string;
+    /**
+     * Optional trailing badge text (e.g. an unread count).
+     * Forwarded to the sidebar item's `[badge]` input.
+     */
+    readonly badge?: string;
+    /**
+     * Optional route path for Angular Router integration.
+     *
+     * When items are produced by `routesToNavigation()`, this is set
+     * to the full resolved path segment. Consumers can use it in the
+     * `(navigated)` handler to call `router.navigate()`.
+     */
+    readonly route?: string;
+}
+/** Template context for the projected content template. */
+interface NavigationPageContext {
+    /** The currently active navigation node. */
+    readonly $implicit: NavigationNode;
+    /** The currently active navigation node (named binding). */
+    readonly page: NavigationNode;
+}
+/**
+ * A full-page navigation layout that combines a {@link UIDrawer},
+ * a {@link UISidebarNav} with configurable items, a {@link UIBreadcrumb}
+ * path, and a main content area.
+ *
+ * Navigation items are provided as a tree — either via an
+ * {@link ITreeDatasource} for dynamic data, or via a convenience
+ * `items` input accepting `NavigationNode[]`.
+ *
+ * Tree nodes with **children** are rendered as collapsible
+ * `<ui-sidebar-group>` elements; leaf nodes render as
+ * `<ui-sidebar-item>` entries. The breadcrumb trail is built
+ * automatically from the node hierarchy.
+ *
+ * ### Data sources
+ *
+ * | Input        | Type                                     | Use case                     |
+ * |--------------|------------------------------------------|------------------------------|
+ * | `datasource` | `ITreeDatasource<NavigationNodeData>`     | Dynamic / async data         |
+ * | `items`      | `NavigationNode[]`                       | Static in-memory tree        |
+ *
+ * When both are set, `datasource` takes precedence.
+ *
+ * Use the `navItem()` and `navGroup()` factory functions (or
+ * `routesToNavigation()` for Angular Router integration) to build
+ * the node array ergonomically.
+ *
+ * @example
+ * ```html
+ * <ui-navigation-page
+ *   [items]="navItems"
+ *   [(activePage)]="currentPage"
+ *   (navigated)="onNavigate($event)"
+ * >
+ *   <ng-template #content let-node>
+ *     <h2>{{ node.data.label }}</h2>
+ *   </ng-template>
+ * </ui-navigation-page>
+ * ```
+ */
+declare class UINavigationPage implements OnInit {
+    /**
+     * Tree datasource providing navigation nodes.
+     *
+     * Accepts any {@link ITreeDatasource} whose data payload is
+     * {@link NavigationNodeData}. Root nodes with `children` render as
+     * collapsible groups; leaf nodes render as sidebar items.
+     *
+     * Takes precedence over the `items` convenience input.
+     */
+    readonly datasource: _angular_core.InputSignal<ITreeDatasource<NavigationNodeData> | undefined>;
+    /**
+     * Convenience: static array of navigation tree nodes.
+     *
+     * When set (and no `datasource` is provided), an internal
+     * `ArrayTreeDatasource` is created automatically.
+     *
+     * Build nodes with the `navItem()` / `navGroup()` factories
+     * or the `routesToNavigation()` utility.
+     */
+    readonly items: _angular_core.InputSignal<readonly NavigationNode[]>;
+    /**
+     * Root breadcrumb label displayed as the first item in the trail.
+     * Clicking it navigates to the first leaf node.
+     */
+    readonly rootLabel: _angular_core.InputSignal<string>;
+    /** Side the drawer slides in from. */
+    readonly drawerPosition: _angular_core.InputSignal<DrawerPosition>;
+    /** Width of the drawer panel. */
+    readonly drawerWidth: _angular_core.InputSignal<string>;
+    /** Visual style for the breadcrumb trail. */
+    readonly breadcrumbVariant: _angular_core.InputSignal<BreadcrumbVariant>;
+    /** Accessible label for the navigation landmark. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Whether the drawer should always be visible (desktop layout). */
+    readonly sidebarPinned: _angular_core.InputSignal<boolean>;
+    /** Whether to show the sidebar toggle button before the breadcrumb. */
+    readonly showSidebarToggle: _angular_core.InputSignal<boolean>;
+    /**
+     * Optional localStorage key for persisting the sidebar open/closed state.
+     *
+     * When set, the component reads the stored value on creation and
+     * writes back whenever `sidebarVisible` changes. Leave empty
+     * (the default) to disable persistence.
+     */
+    readonly storageKey: _angular_core.InputSignal<string>;
+    /** The currently active node id. Supports two-way binding. */
+    readonly activePage: _angular_core.ModelSignal<string>;
+    /** Whether the drawer is open (when not pinned). Supports two-way binding. */
+    readonly drawerOpen: _angular_core.ModelSignal<boolean>;
+    /** Whether the sidebar panel is visible. Supports two-way binding. Defaults to shown. */
+    readonly sidebarVisible: _angular_core.ModelSignal<boolean>;
+    /** Emitted when the user navigates to a node. */
+    readonly navigated: _angular_core.OutputEmitterRef<NavigationNode>;
+    /**
+     * Projected template for the main content area.
+     * Receives the current {@link NavigationNode} as the implicit context.
+     *
+     * ```html
+     * <ng-template #content let-node>
+     *   <h2>{{ node.data.label }}</h2>
+     * </ng-template>
+     * ```
+     */
+    readonly contentTemplate: _angular_core.Signal<TemplateRef<NavigationPageContext> | undefined>;
+    /** Projected sidebar items for custom content above the generated items. */
+    readonly projectedItems: _angular_core.Signal<readonly UISidebarItem[]>;
+    /** Icon for the sidebar toggle button. @internal */
+    protected readonly sidebarToggleIcon: _angular_core.Signal<"<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" /><path d=\"M9 3v18\" /><path d=\"m16 15-3-3 3-3\" />" | "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" /><path d=\"M9 3v18\" /><path d=\"m14 9 3 3-3 3\" />">;
+    private readonly storage;
+    ngOnInit(): void;
+    /** Toggle the sidebar and persist the new state to storage. */
+    toggleSidebar(): void;
+    /** Resolved datasource — from the input or auto-created from items. */
+    protected readonly resolvedDatasource: _angular_core.Signal<ITreeDatasource<NavigationNodeData>>;
+    /** Root nodes from the resolved datasource. */
+    protected readonly rootNodes: _angular_core.Signal<readonly NavigationNode[]>;
+    /** The currently active navigation node. */
+    readonly currentPage: _angular_core.Signal<NavigationNode | undefined>;
+    /** Breadcrumb trail derived from the active node and its ancestors. */
+    protected readonly breadcrumbItems: _angular_core.Signal<readonly BreadcrumbItem[]>;
+    /** Navigate to a node by its tree-node reference. */
+    navigate(node: NavigationNode): void;
+    /** Navigate to the first leaf node (root breadcrumb click handler). */
+    navigateToRoot(): void;
+    /** @internal Handle breadcrumb item clicks. */
+    protected onBreadcrumbClick(item: BreadcrumbItem): void;
+    /**
+     * Finds a node by `id` anywhere in the tree (depth-first).
+     * @internal
+     */
+    private findNodeById;
+    /**
+     * Finds a node by `data.label` anywhere in the tree (depth-first).
+     * @internal
+     */
+    private findNodeByLabel;
+    /**
+     * Finds the parent node of a given child `id`.
+     * @internal
+     */
+    private findParent;
+    /**
+     * Returns the first leaf node (no children) in the tree.
+     * @internal
+     */
+    private firstLeaf;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UINavigationPage, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UINavigationPage, "ui-navigation-page", never, { "datasource": { "alias": "datasource"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "rootLabel": { "alias": "rootLabel"; "required": false; "isSignal": true; }; "drawerPosition": { "alias": "drawerPosition"; "required": false; "isSignal": true; }; "drawerWidth": { "alias": "drawerWidth"; "required": false; "isSignal": true; }; "breadcrumbVariant": { "alias": "breadcrumbVariant"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "sidebarPinned": { "alias": "sidebarPinned"; "required": false; "isSignal": true; }; "showSidebarToggle": { "alias": "showSidebarToggle"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; "activePage": { "alias": "activePage"; "required": false; "isSignal": true; }; "drawerOpen": { "alias": "drawerOpen"; "required": false; "isSignal": true; }; "sidebarVisible": { "alias": "sidebarVisible"; "required": false; "isSignal": true; }; }, { "activePage": "activePageChange"; "drawerOpen": "drawerOpenChange"; "sidebarVisible": "sidebarVisibleChange"; "navigated": "navigated"; }, ["contentTemplate", "projectedItems"], ["[uiSidebarHeader]", "ui-sidebar-item", "[uiSidebarFooter]", "[uiSidebarHeader]", "ui-sidebar-item", "[uiSidebarFooter]", "*"], true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * A named, serialisable saved search — stores the filter state so it
+ * can be recalled later.
+ *
+ * @typeParam T - The row object type (carried through for
+ *   {@link FilterDescriptor} typing).
+ */
+interface SavedSearch<T = unknown> {
+    /** Unique identifier (UUID). */
+    readonly id: string;
+    /** Human-readable display name chosen by the user. */
+    readonly name: string;
+    /** The persisted filter descriptor (junction + rules). */
+    readonly descriptor: FilterDescriptor<T>;
+    /** ISO-8601 timestamp of when the search was saved. */
+    readonly savedAt: string;
+}
+
+/**
+ * Layout mode for the search-view results area.
+ *
+ * - `'table'` — renders an internal `<ui-table-view>` using projected columns.
+ * - `'custom'` — renders the projected `#results` template, giving the
+ *   consumer full control over the results layout.
+ */
+type SearchViewLayout = "table" | "custom";
+/**
+ * Context object provided to the projected `#results` template.
+ *
+ * @typeParam T - The row object type.
+ */
+interface SearchViewResultsContext<T> {
+    /** The current slice of items (also available as `let-items`). */
+    $implicit: readonly T[];
+}
+/**
+ * Context object provided to the projected `#empty` template.
+ */
+interface SearchViewEmptyContext {
+    /** The current search/filter state produced zero results. */
+    $implicit: true;
+}
+
+/**
+ * A unified browse-and-filter layout that composes {@link UIFilter},
+ * {@link UITableView} (or a custom results template), and
+ * {@link UIPagination} into a single search screen.
+ *
+ * ### Table mode (default)
+ * ```html
+ * <ui-search-view [datasource]="ds" title="Users">
+ *   <ui-text-column key="name" headerText="Name" />
+ *   <ui-text-column key="email" headerText="Email" />
+ * </ui-search-view>
+ * ```
+ *
+ * ### Custom results template
+ * ```html
+ * <ui-search-view [datasource]="ds" layout="custom" [filterFields]="fields">
+ *   <ng-template #results let-items>
+ *     @for (item of items; track item.id) {
+ *       <app-card [data]="item" />
+ *     }
+ *   </ng-template>
+ * </ui-search-view>
+ * ```
+ *
+ * ### With custom filter template
+ * ```html
+ * <ui-search-view [datasource]="ds">
+ *   <ng-template #filter>
+ *     <my-custom-filter (change)="applyFilter($event)" />
+ *   </ng-template>
+ *   <ui-text-column key="name" headerText="Name" />
+ * </ui-search-view>
+ * ```
+ */
+declare class UISearchView<T = unknown> {
+    /** Title displayed in the header area. */
+    readonly title: _angular_core.InputSignal<string>;
+    /**
+     * The datasource powering the search results.
+     *
+     * Accepts any {@link IDatasource}. When the datasource is a
+     * {@link FilterableArrayDatasource} the component automatically
+     * applies filter expressions from the embedded filter.
+     */
+    readonly datasource: _angular_core.InputSignal<IDatasource<T> | undefined>;
+    /**
+     * Results layout mode.
+     *
+     * - `'table'` (default) — uses `<ui-table-view>` with projected columns.
+     * - `'custom'` — renders the projected `#results` template.
+     */
+    readonly layout: _angular_core.InputSignal<SearchViewLayout>;
+    /**
+     * Explicit filter field definitions.
+     *
+     * When provided these override the auto-inferred fields derived
+     * from projected columns and sample data.
+     */
+    readonly filterFields: _angular_core.InputSignal<FilterFieldDefinition<T>[] | undefined>;
+    /**
+     * Whether the filter section is visible.
+     *
+     * - `true` — always show the filter.
+     * - `false` — never show the filter.
+     * - `undefined` (default) — auto-detect: show when the datasource
+     *   is a {@link FilterableArrayDatasource}.
+     */
+    readonly showFilter: _angular_core.InputSignal<boolean | undefined>;
+    /** Whether the filter section starts expanded. */
+    readonly filterExpanded: _angular_core.InputSignal<boolean>;
+    /** Whether the filter toggle button is hidden. */
+    readonly filterModeLocked: _angular_core.InputSignal<boolean>;
+    /** Whether to show the pagination footer. */
+    readonly showPagination: _angular_core.InputSignal<boolean>;
+    /** Items per page. */
+    readonly pageSize: _angular_core.InputSignal<number>;
+    /** Available page-size options in the pagination selector. */
+    readonly pageSizeOptions: _angular_core.InputSignal<readonly number[]>;
+    /** Placeholder text shown when there are no results. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Accessible label for the component. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Storage key that enables the saved-searches feature.
+     *
+     * When set, a toolbar strip is shown allowing users to save, load,
+     * and delete named filter states. The key is used to namespace the
+     * persisted data in the underlying {@link StorageService}.
+     *
+     * Leave `undefined` (default) to disable saved searches.
+     */
+    readonly storageKey: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emits the {@link FilterExpression} every time the filter rules change.
+     */
+    readonly expressionChange: _angular_core.OutputEmitterRef<FilterDescriptor<T>>;
+    /** Emits when the page changes. */
+    readonly pageChange: _angular_core.OutputEmitterRef<PageChangeEvent>;
+    /** Emits when a saved search is loaded, saved, or deleted. */
+    readonly savedSearchChange: _angular_core.OutputEmitterRef<SavedSearch<unknown> | null>;
+    /** The filter descriptor state (two-way bindable). */
+    readonly filterDescriptor: _angular_core.ModelSignal<FilterDescriptor<T>>;
+    /** Current page index (two-way bindable, zero-based). */
+    readonly pageIndex: _angular_core.ModelSignal<number>;
+    /** Projected table-view columns (used in table layout mode). */
+    readonly columns: _angular_core.Signal<readonly UITableViewColumn[]>;
+    /** Optional custom results template (used in custom layout mode). */
+    readonly resultsTemplate: _angular_core.Signal<TemplateRef<SearchViewResultsContext<T>> | undefined>;
+    /** Optional custom filter template. */
+    readonly filterTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    /** Optional empty-state template. */
+    readonly emptyTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    /** @internal — reference to the embedded table-view (when in table layout). */
+    private readonly tableView;
+    /** @internal */
+    protected readonly chevronRight: "<path d=\"m9 18 6-6-6-6\" />";
+    /** @internal */
+    protected readonly chevronDown: "<path d=\"m6 9 6 6 6-6\" />";
+    /** @internal — whether the filter panel is collapsed. */
+    protected readonly filterCollapsed: _angular_core.WritableSignal<boolean>;
+    /** @internal — total item count from the datasource. */
+    protected readonly totalItems: _angular_core.WritableSignal<number>;
+    /** @internal */
+    protected readonly resolvedShowFilter: _angular_core.Signal<boolean>;
+    /** @internal — auto-inferred or explicit filter fields. */
+    protected readonly resolvedFilterFields: _angular_core.Signal<FilterFieldDefinition<T>[]>;
+    /** @internal — sample data for filter value suggestions. */
+    protected readonly resolvedFilterData: _angular_core.Signal<readonly T[]>;
+    /** @internal — whether the saved-searches feature is enabled. */
+    protected readonly savedSearchesEnabled: _angular_core.Signal<boolean>;
+    /** @internal — list of persisted saved searches. */
+    protected readonly savedSearches: _angular_core.WritableSignal<readonly SavedSearch<unknown>[]>;
+    /** @internal — ID of the currently selected saved search (empty = none). */
+    protected readonly selectedSearchId: _angular_core.WritableSignal<string>;
+    /** @internal — name input value when saving a filter. */
+    protected readonly searchName: _angular_core.WritableSignal<string>;
+    /** @internal — whether the save-filter dialog is open. */
+    protected readonly saveDialogOpen: _angular_core.WritableSignal<boolean>;
+    /** @internal — index of the chip being dragged (−1 = none). */
+    private dragSourceIndex;
+    /**
+     * @internal — bumped after every `filterBy` call so computeds
+     * that depend on the datasource's filtered state re-evaluate.
+     */
+    private readonly _filterVersion;
+    /**
+     * @internal — the rows for the current page (filtered + paged).
+     * Used only for custom layout mode where the table is not
+     * available to handle paging internally.
+     */
+    protected readonly pagedRows: _angular_core.Signal<readonly T[]>;
+    private readonly savedSearchService;
+    constructor();
+    /** Toggle the filter panel open/closed. */
+    toggleFilter(): void;
+    /**
+     * Load a saved search by its ID, applying its filter descriptor
+     * to the search view.
+     */
+    loadSavedSearch(searchId: string): void;
+    /**
+     * Save the current filter state as a new named search.
+     */
+    saveNewSearch(name: string): void;
+    /**
+     * Delete a saved search by its ID.
+     */
+    deleteSavedSearch(searchId: string): void;
+    /** @internal */
+    protected readonly saveIcon: "<path d=\"M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z\" /><path d=\"M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7\" /><path d=\"M7 3v4a1 1 0 0 0 1 1h7\" />";
+    /** @internal */
+    protected readonly xIcon: "<path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" />";
+    /** @internal */
+    protected onLoadSearch(searchId: string): void;
+    /** @internal */
+    protected onDeleteSearch(event: Event, searchId: string): void;
+    /** @internal — opens the save-filter dialog. */
+    protected onSaveFilterClick(): void;
+    /** @internal */
+    protected onConfirmSave(): void;
+    /** @internal */
+    protected onCancelSave(): void;
+    /** @internal */
+    protected onChipDragStart(event: DragEvent, index: number): void;
+    /** @internal */
+    protected onChipDragOver(event: DragEvent): void;
+    /** @internal */
+    protected onChipDrop(event: DragEvent, targetIndex: number): void;
+    /** @internal */
+    protected onChipDragEnd(): void;
+    /** @internal */
+    protected onFilterExpressionChange(expression: FilterExpression<T>): void;
+    /** @internal */
+    protected onPageChange(event: PageChangeEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UISearchView<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UISearchView<any>, "ui-search-view", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "datasource": { "alias": "datasource"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "filterFields": { "alias": "filterFields"; "required": false; "isSignal": true; }; "showFilter": { "alias": "showFilter"; "required": false; "isSignal": true; }; "filterExpanded": { "alias": "filterExpanded"; "required": false; "isSignal": true; }; "filterModeLocked": { "alias": "filterModeLocked"; "required": false; "isSignal": true; }; "showPagination": { "alias": "showPagination"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; "filterDescriptor": { "alias": "filterDescriptor"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; }, { "expressionChange": "expressionChange"; "pageChange": "pageChange"; "savedSearchChange": "savedSearchChange"; "filterDescriptor": "filterDescriptorChange"; "pageIndex": "pageIndexChange"; }, ["columns", "resultsTemplate", "filterTemplate", "emptyTemplate"], ["*"], true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * Manages persisted saved searches through the application-wide
+ * {@link StorageService} (which defaults to `localStorage` via
+ * the `STORAGE_STRATEGY` injection token).
+ *
+ * Searches are stored as a JSON array under a key derived from the
+ * caller-supplied `storageKey`. Multiple independent search views can
+ * coexist by using different storage keys.
+ *
+ * ### Usage
+ *
+ * ```ts
+ * private readonly savedSearchService = inject(SavedSearchService);
+ *
+ * // list
+ * const searches = this.savedSearchService.list('my-view');
+ *
+ * // save
+ * this.savedSearchService.save('my-view', {
+ *   id: crypto.randomUUID(),
+ *   name: 'Active users',
+ *   descriptor: { junction: 'and', rules: [...] },
+ *   savedAt: new Date().toISOString(),
+ * });
+ *
+ * // delete
+ * this.savedSearchService.remove('my-view', searchId);
+ * ```
+ *
+ * ### Swapping the storage backend
+ *
+ * Override the `STORAGE_STRATEGY` token from `@theredhead/lucid-foundation`:
+ *
+ * ```ts
+ * providers: [
+ *   { provide: STORAGE_STRATEGY, useClass: MyIndexedDbStrategy },
+ * ]
+ * ```
+ */
+declare class SavedSearchService {
+    private readonly storage;
+    /**
+     * Retrieve all saved searches for the given storage key.
+     *
+     * Returns an empty array when nothing is stored or when the stored
+     * value cannot be parsed.
+     */
+    list(storageKey: string): SavedSearch[];
+    /**
+     * Persist a saved search. If a search with the same `id` already
+     * exists it is replaced; otherwise the new search is appended.
+     */
+    save(storageKey: string, search: SavedSearch): void;
+    /**
+     * Remove a saved search by its `id`.
+     *
+     * No-op if the id does not exist.
+     */
+    remove(storageKey: string, searchId: string): void;
+    /**
+     * Persist a new ordering of saved searches.
+     *
+     * Accepts an array of IDs in the desired order. Searches whose
+     * IDs are not in the list are dropped.
+     */
+    reorder(storageKey: string, orderedIds: readonly string[]): void;
+    /**
+     * Remove all saved searches for a given storage key.
+     */
+    clear(storageKey: string): void;
+    private prefixedKey;
+    private persist;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SavedSearchService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SavedSearchService>;
+}
+
+/**
+ * Supported field types for a property sheet row.
+ *
+ * Each type maps to a specific editor widget:
+ * - `'string'` → `<ui-input type="text">`
+ * - `'number'` → `<ui-input type="number">`
+ * - `'boolean'` → `<ui-checkbox>`
+ * - `'select'` → `<ui-select>`
+ * - `'color'` → `<ui-color-picker>`
+ * - `'slider'` → `<ui-slider>`
+ */
+type PropertyFieldType = "string" | "number" | "boolean" | "select" | "color" | "slider";
+/**
+ * Definition for a single property field in a {@link UIPropertySheet}.
+ *
+ * @typeParam T - The data object type.
+ */
+interface PropertyFieldDefinition<T = Record<string, unknown>> {
+    /** The key on the data object this field reads/writes. */
+    readonly key: string & keyof T;
+    /** Human-readable label. */
+    readonly label: string;
+    /** Editor type. */
+    readonly type: PropertyFieldType;
+    /**
+     * Category/group name. Fields with the same group are rendered
+     * together under a shared heading.
+     */
+    readonly group?: string;
+    /** Placeholder text (string / number fields). */
+    readonly placeholder?: string;
+    /** Whether this field is read-only. */
+    readonly readonly?: boolean;
+    /** Options for `'select'` fields. */
+    readonly options?: readonly SelectOption[];
+    /** Minimum value for `'number'` / `'slider'` fields. */
+    readonly min?: number;
+    /** Maximum value for `'number'` / `'slider'` fields. */
+    readonly max?: number;
+    /** Step for `'number'` / `'slider'` fields. */
+    readonly step?: number;
+}
+/**
+ * Event emitted when a property value changes.
+ *
+ * @typeParam T - The data object type.
+ */
+interface PropertyChangeEvent<T = Record<string, unknown>> {
+    /** The field key that changed. */
+    readonly key: string & keyof T;
+    /** The new value. */
+    readonly value: unknown;
+    /** The complete, updated data object. */
+    readonly data: T;
+}
+
+/**
+ * Grouped field set used internally to organise fields by group.
+ * @internal
+ */
+interface FieldGroup<T> {
+    readonly name: string;
+    readonly fields: readonly PropertyFieldDefinition<T>[];
+}
+/**
+ * A key-value inspector panel that renders a schema of typed fields
+ * against a data object.
+ *
+ * Each field definition maps to an appropriate editor widget
+ * (`UIInput`, `UISelect`, `UICheckbox`, `UIColorPicker`, or
+ * `UISlider`). Changes are emitted per-field via
+ * {@link propertyChange} and the data model is updated in-place.
+ *
+ * ### Basic usage
+ * ```html
+ * <ui-property-sheet
+ *   [fields]="fields"
+ *   [(data)]="config"
+ *   (propertyChange)="onChanged($event)"
+ * />
+ * ```
+ *
+ * ### Grouped fields
+ * ```ts
+ * const fields: PropertyFieldDefinition<Config>[] = [
+ *   { key: 'name',  label: 'Name',  type: 'string', group: 'General' },
+ *   { key: 'color', label: 'Color', type: 'color',  group: 'Appearance' },
+ * ];
+ * ```
+ */
+declare class UIPropertySheet<T extends Record<string, unknown> = Record<string, unknown>> {
+    /** Field definitions describing the properties to edit. */
+    readonly fields: _angular_core.InputSignal<readonly PropertyFieldDefinition<T>[]>;
+    /** Accessible label for the sheet. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** The data object being inspected/edited (two-way bindable). */
+    readonly data: _angular_core.ModelSignal<T>;
+    /** Emits when any property value changes. */
+    readonly propertyChange: _angular_core.OutputEmitterRef<PropertyChangeEvent<T>>;
+    /** @internal — fields organised into named groups. */
+    protected readonly groups: _angular_core.Signal<readonly FieldGroup<T>[]>;
+    /** @internal — read a field value from the data object. */
+    protected getValue(key: string): unknown;
+    /** @internal — update a field and emit. */
+    protected onValueChange(key: string & keyof T, value: unknown): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIPropertySheet<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIPropertySheet<any>, "ui-property-sheet", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; }, { "data": "dataChange"; "propertyChange": "propertyChange"; }, never, never, true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * A single action that can be executed from the command palette.
+ *
+ * @typeParam C - Optional context type carried on the command.
+ */
+interface CommandPaletteItem<C = unknown> {
+    /** Unique identifier for this command. */
+    readonly id: string;
+    /** Display label shown in the palette list. */
+    readonly label: string;
+    /**
+     * Optional group name. Commands with the same group are rendered
+     * under a shared heading.
+     */
+    readonly group?: string;
+    /**
+     * Optional keyboard shortcut hint displayed on the right side
+     * (e.g. `"Cmd+S"`, `"Ctrl+Shift+P"`). Purely cosmetic — the
+     * palette does not bind these shortcuts.
+     */
+    readonly shortcut?: string;
+    /** Optional SVG icon content (inner `<path>` string for a 24×24 grid). */
+    readonly icon?: string;
+    /** Whether this command is currently disabled. */
+    readonly disabled?: boolean;
+    /**
+     * Optional keywords that improve search matching beyond the
+     * label text.
+     */
+    readonly keywords?: readonly string[];
+    /** Optional arbitrary context payload. */
+    readonly context?: C;
+}
+/**
+ * Event emitted when a command is executed from the palette.
+ *
+ * @typeParam C - Optional context type carried on the command.
+ */
+interface CommandExecuteEvent<C = unknown> {
+    /** The command that was executed. */
+    readonly command: CommandPaletteItem<C>;
+    /** ISO-8601 timestamp of when the command was executed. */
+    readonly executedAt: string;
+}
+/**
+ * Grouped commands used internally to organise items by group.
+ * @internal
+ */
+interface CommandGroup<C = unknown> {
+    readonly name: string;
+    readonly items: readonly CommandPaletteItem<C>[];
+}
+
+/**
+ * A keyboard-triggered command palette that provides quick access
+ * to application actions through a searchable, grouped list.
+ *
+ * Open with `Cmd+K` / `Ctrl+K` (when {@link globalShortcut} is
+ * enabled) or by setting the `open` model to `true`.
+ *
+ * ### Basic usage
+ * ```html
+ * <ui-command-palette
+ *   [commands]="commands"
+ *   [(open)]="paletteOpen"
+ *   (execute)="onExecute($event)"
+ * />
+ * ```
+ *
+ * ### With recent items
+ * ```html
+ * <ui-command-palette
+ *   [commands]="commands"
+ *   [maxRecent]="5"
+ *   [(open)]="paletteOpen"
+ *   (execute)="onExecute($event)"
+ * />
+ * ```
+ */
+declare class UICommandPalette<C = unknown> {
+    /** The full list of available commands. */
+    readonly commands: _angular_core.InputSignal<readonly CommandPaletteItem<C>[]>;
+    /** Placeholder text for the search input. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Accessible label for the palette. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Whether the global `Cmd+K` / `Ctrl+K` keyboard shortcut is
+     * active. Defaults to `true`.
+     */
+    readonly globalShortcut: _angular_core.InputSignal<boolean>;
+    /**
+     * Maximum number of recent commands to track. Set to `0` to
+     * disable the recent-items section. Defaults to `5`.
+     */
+    readonly maxRecent: _angular_core.InputSignal<number>;
+    /** Whether the palette is open (two-way bindable). */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Emitted when a command is executed. */
+    readonly execute: _angular_core.OutputEmitterRef<CommandExecuteEvent<C>>;
+    /** @internal */
+    private readonly searchInputRef;
+    /** @internal — current search query. */
+    protected readonly query: _angular_core.WritableSignal<string>;
+    /** @internal — index of the active (highlighted) item. */
+    protected readonly activeIndex: _angular_core.WritableSignal<number>;
+    /** @internal — IDs of recently executed commands (most recent first). */
+    protected readonly recentIds: _angular_core.WritableSignal<readonly string[]>;
+    /** @internal */
+    protected readonly searchIcon: "<path d=\"m21 21-4.34-4.34\" /><circle cx=\"11\" cy=\"11\" r=\"8\" />";
+    /** @internal */
+    protected readonly returnIcon: "<path d=\"M20 4v7a4 4 0 0 1-4 4H4\" /><path d=\"m9 10-5 5 5 5\" />";
+    /** @internal */
+    protected readonly arrowUpIcon: "<path d=\"m5 12 7-7 7 7\" /><path d=\"M12 19V5\" />";
+    /** @internal */
+    protected readonly arrowDownIcon: "<path d=\"M12 5v14\" /><path d=\"m19 12-7 7-7-7\" />";
+    /** @internal — filtered and grouped commands based on the query. */
+    protected readonly filteredGroups: _angular_core.Signal<readonly CommandGroup<C>[]>;
+    /** @internal — recent commands that are still in the full commands list. */
+    protected readonly recentCommands: _angular_core.Signal<readonly CommandPaletteItem<C>[]>;
+    /** @internal — whether to show the recent section. */
+    protected readonly showRecent: _angular_core.Signal<boolean>;
+    /** @internal — flat list of all currently visible items for keyboard nav. */
+    protected readonly flatItems: _angular_core.Signal<readonly CommandPaletteItem<C>[]>;
+    constructor();
+    /** Programmatically open the palette. */
+    show(): void;
+    /** Programmatically close the palette. */
+    close(): void;
+    /** @internal */
+    protected onSearchInput(event: Event): void;
+    /** @internal */
+    protected onKeydown(event: KeyboardEvent): void;
+    /** @internal */
+    protected onItemClick(item: CommandPaletteItem<C>): void;
+    /** @internal */
+    protected onBackdropClick(): void;
+    /** @internal — compute the flat index for a group item. */
+    protected getFlatIndex(groupIndex: number, itemIndex: number): number;
+    /** @internal — compute the flat index for a recent item. */
+    protected getRecentFlatIndex(index: number): number;
+    private executeCommand;
+    private addToRecent;
+    private groupCommands;
+    private scrollActiveIntoView;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UICommandPalette<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UICommandPalette<any>, "ui-command-palette", never, { "commands": { "alias": "commands"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "globalShortcut": { "alias": "globalShortcut"; "required": false; "isSignal": true; }; "maxRecent": { "alias": "maxRecent"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "execute": "execute"; }, never, never, true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * View modes supported by the file browser contents panel.
+ *
+ * - `list`   — Default row-per-entry list (original behaviour).
+ * - `icons`  — Grid of large icons with name labels.
+ * - `detail` — Table with sortable columns (name, size, date, type).
+ * - `tree`   — Flat tree view showing nested hierarchy inline.
+ * - `column` — NeXTSTEP / macOS Finder column view: one column per
+ *              traversed directory level with horizontal scrolling.
+ */
+type FileBrowserViewMode = "list" | "icons" | "detail" | "tree" | "column";
+/**
+ * Maps file extensions (without leading dot, lower-case) to SVG icon
+ * strings. Consumers provide this via DI to customise the icon view.
+ *
+ * @example
+ * ```ts
+ * const MY_ICONS: FileIconRegistry = {
+ *   ts:   UIIcons.Lucide.Files.FileCode,
+ *   json: UIIcons.Lucide.Files.FileJson,
+ *   md:   UIIcons.Lucide.Files.FileText,
+ * };
+ *
+ * providers: [{ provide: FILE_ICON_REGISTRY, useValue: MY_ICONS }]
+ * ```
+ */
+type FileIconRegistry = Record<string, string>;
+/**
+ * DI token for the customisable file-icon registry.
+ *
+ * When provided, the icon view resolves icons by looking up the
+ * file's extension (lower-case, without the leading dot) in the
+ * registry. Falls back to the default file/folder icon.
+ */
+declare const FILE_ICON_REGISTRY: InjectionToken<FileIconRegistry>;
+/**
+ * A key-value metadata pair displayed in the details pane.
+ */
+interface MetadataField {
+    /** Human-readable label for the field. */
+    readonly label: string;
+    /** Displayable value. */
+    readonly value: string | number | boolean;
+}
+/**
+ * Callback that extracts displayable metadata fields from an entry.
+ * Provided via the `[metadataProvider]` input on the file browser.
+ */
+type MetadataProvider<M = unknown> = (entry: FileBrowserEntry<M>) => MetadataField[];
+/**
+ * A single entry in a file browser — either a file or a directory.
+ *
+ * @typeParam M - Optional metadata type for extra fields
+ *               (size, modified date, permissions, etc.).
+ */
+interface FileBrowserEntry<M = unknown> {
+    /** Unique identifier for the entry. */
+    readonly id: string;
+    /** Display name of the file or directory. */
+    readonly name: string;
+    /** Whether this entry is a directory (`true`) or a file (`false`). */
+    readonly isDirectory: boolean;
+    /**
+     * Optional SVG icon override. When omitted, the file browser
+     * uses default folder/file icons.
+     */
+    readonly icon?: string;
+    /** Optional arbitrary metadata (size, date, MIME type, etc.). */
+    readonly meta?: M;
+}
+/**
+ * Datasource contract for the file browser.
+ *
+ * Implementations may back this with an in-memory tree, a REST API,
+ * IndexedDB, or any other storage mechanism. All methods may return
+ * either a synchronous value or a `Promise`.
+ *
+ * @typeParam M - Optional metadata type carried on each entry.
+ */
+interface FileBrowserDatasource<M = unknown> {
+    /**
+     * Returns the entries (files and directories) inside the given
+     * directory node. For the root directory, `parent` is `null`.
+     */
+    getChildren(parent: FileBrowserEntry<M> | null): FileBrowserEntry<M>[] | Promise<FileBrowserEntry<M>[]>;
+    /**
+     * Returns `true` if the given entry is a directory that can
+     * contain children (even if currently empty).
+     */
+    isDirectory(entry: FileBrowserEntry<M>): boolean;
+}
+/**
+ * Event emitted when a file (non-directory) entry is activated
+ * (double-clicked or pressed Enter).
+ *
+ * @typeParam M - Optional metadata type.
+ */
+interface FileActivateEvent<M = unknown> {
+    /** The activated file entry. */
+    readonly entry: FileBrowserEntry<M>;
+    /** ISO-8601 timestamp of the activation. */
+    readonly activatedAt: string;
+}
+/**
+ * Event emitted when the current directory changes (user navigates
+ * into a folder).
+ *
+ * @typeParam M - Optional metadata type.
+ */
+interface DirectoryChangeEvent<M = unknown> {
+    /** The directory the user navigated to (`null` for root). */
+    readonly directory: FileBrowserEntry<M> | null;
+    /** The breadcrumb path from root to the current directory. */
+    readonly path: readonly FileBrowserEntry<M>[];
+}
+
+/**
+ * Context provided to a custom entry template.
+ *
+ * @typeParam M - Metadata type carried on each entry.
+ */
+interface EntryTemplateContext<M = unknown> {
+    /** The entry (also available as the implicit `let-entry`). */
+    $implicit: FileBrowserEntry<M>;
+}
+/**
+ * A two-panel file browser block composing {@link UITreeView},
+ * {@link UIBreadcrumb}, and a contents list.
+ *
+ * The tree sidebar shows the folder hierarchy. Selecting a folder
+ * displays its contents (files and sub-folders) in the main panel.
+ * A breadcrumb bar shows the current path and allows quick
+ * navigation to ancestor folders.
+ *
+ * ### Basic usage
+ * ```html
+ * <ui-file-browser [datasource]="ds" (fileActivated)="open($event)" />
+ * ```
+ *
+ * ### With custom entry template
+ * ```html
+ * <ui-file-browser [datasource]="ds">
+ *   <ng-template #entryTemplate let-entry>
+ *     <span>{{ entry.name }} — {{ entry.meta?.size }}</span>
+ *   </ng-template>
+ * </ui-file-browser>
+ * ```
+ */
+declare class UIFileBrowser<M = unknown> implements AfterViewInit {
+    /** The datasource providing the file/directory structure. */
+    readonly datasource: _angular_core.InputSignal<FileBrowserDatasource<M>>;
+    /** Accessible label for the file browser. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Whether to show the sidebar tree panel. */
+    readonly showSidebar: _angular_core.InputSignal<boolean>;
+    /** Label for the root breadcrumb item. */
+    readonly rootLabel: _angular_core.InputSignal<string>;
+    /** Active view mode for the contents panel. */
+    readonly viewMode: _angular_core.InputSignal<FileBrowserViewMode>;
+    /** Whether to show the details pane for the selected entry. */
+    readonly showDetails: _angular_core.InputSignal<boolean>;
+    /**
+     * Optional persistence key. When set, sidebar and details panel widths
+     * are saved to and restored from storage.
+     */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Callback that extracts metadata fields from a selected entry.
+     * Required for the details pane to display meaningful data.
+     */
+    readonly metadataProvider: _angular_core.InputSignal<MetadataProvider<M> | null>;
+    /** The currently selected entry (two-way bindable). */
+    readonly selectedEntry: _angular_core.ModelSignal<FileBrowserEntry<M> | null>;
+    /** Emitted when a file (non-directory) is activated (double-click / Enter). */
+    readonly fileActivated: _angular_core.OutputEmitterRef<FileActivateEvent<M>>;
+    /** Emitted when the current directory changes. */
+    readonly directoryChange: _angular_core.OutputEmitterRef<DirectoryChangeEvent<M>>;
+    /** Optional custom template for rendering each entry in the contents panel. */
+    readonly entryTemplate: _angular_core.Signal<TemplateRef<EntryTemplateContext<M>> | undefined>;
+    /** @internal */
+    private readonly treeViewRef;
+    /** @internal — the breadcrumb path from root to the current directory. */
+    protected readonly path: _angular_core.WritableSignal<readonly FileBrowserEntry<M>[]>;
+    /** @internal — the current directory (`null` = root). */
+    protected readonly currentDirectory: _angular_core.WritableSignal<FileBrowserEntry<M> | null>;
+    /** @internal — contents of the current directory. */
+    protected readonly contents: _angular_core.WritableSignal<readonly FileBrowserEntry<M>[]>;
+    /** @internal — tree selection for one-way binding. */
+    protected readonly treeSelected: _angular_core.WritableSignal<readonly TreeNode<FileBrowserEntry<M>>[]>;
+    /** @internal — tree datasource adapter. */
+    protected readonly treeDatasource: _angular_core.Signal<ITreeDatasource<FileBrowserEntry<M>>>;
+    /** @internal — display function for tree nodes. */
+    protected readonly displayNodeLabel: (entry: FileBrowserEntry<M>) => string;
+    /** @internal */
+    protected readonly icons: {
+        readonly folder: "<path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\" />";
+        readonly folderOpen: "<path d=\"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2\" />";
+        readonly file: "<path d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\" /><path d=\"M14 2v5a1 1 0 0 0 1 1h5\" />";
+        readonly fileText: "<path d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\" /><path d=\"M14 2v5a1 1 0 0 0 1 1h5\" /><path d=\"M10 9H8\" /><path d=\"M16 13H8\" /><path d=\"M16 17H8\" />";
+        readonly chevronRight: "<path d=\"m9 18 6-6-6-6\" />";
+    };
+    /** @internal — optional icon registry supplied via DI. */
+    private readonly iconRegistry;
+    /** @internal */
+    private readonly elRef;
+    /** @internal */
+    private readonly injector;
+    /** @internal */
+    private readonly storage;
+    /** @internal — current sidebar width in pixels. */
+    protected readonly sidebarWidthPx: _angular_core.WritableSignal<number>;
+    /** @internal — current details panel width in pixels. */
+    protected readonly detailsWidthPx: _angular_core.WritableSignal<number>;
+    /** @internal — which panel divider is actively being dragged. */
+    protected readonly draggingPanel: _angular_core.WritableSignal<"details" | "sidebar" | null>;
+    /** @internal — collapsed state for sidebar. */
+    protected readonly sidebarCollapsed: _angular_core.WritableSignal<boolean>;
+    /** @internal — collapsed state for details panel. */
+    protected readonly detailsCollapsed: _angular_core.WritableSignal<boolean>;
+    /** @internal — width before sidebar collapse for restore. */
+    private preSidebarCollapseWidth;
+    /** @internal — width before details collapse for restore. */
+    private preDetailsCollapseWidth;
+    /**
+     * @internal — each element represents one column in the column view.
+     * Index 0 = root, subsequent = each directory navigated into.
+     */
+    protected readonly columnPanes: _angular_core.WritableSignal<readonly {
+        directory: FileBrowserEntry<M> | null;
+        entries: readonly FileBrowserEntry<M>[];
+    }[]>;
+    /**
+     * @internal — the entry selected in each column pane (by pane index).
+     */
+    protected readonly columnSelections: _angular_core.WritableSignal<readonly (FileBrowserEntry<M> | null)[]>;
+    /** @internal — breadcrumb items built from the current path. */
+    protected readonly breadcrumbItems: _angular_core.Signal<readonly BreadcrumbItem[]>;
+    /** @internal — whether an entry is selected in the contents panel. */
+    protected readonly hasSelection: _angular_core.Signal<boolean>;
+    /** @internal — metadata fields for the selected entry (details pane). */
+    protected readonly detailFields: _angular_core.Signal<readonly MetadataField[]>;
+    constructor();
+    ngAfterViewInit(): void;
+    /** Navigate to the root directory. */
+    navigateToRoot(): void;
+    /** Navigate to a specific directory entry. */
+    navigateToDirectory(entry: FileBrowserEntry<M>): void;
+    /** @internal — starts pointer-based divider dragging for a panel. */
+    protected onDividerPointerDown(event: PointerEvent, panel: "sidebar" | "details"): void;
+    /** @internal — double-click on a divider toggles panel collapse. */
+    protected onDividerDblClick(panel: "sidebar" | "details"): void;
+    /** @internal */
+    protected onBreadcrumbClick(item: BreadcrumbItem): void;
+    /** @internal */
+    protected onTreeNodeSelected(selected: readonly TreeNode<FileBrowserEntry<M>>[]): void;
+    /** @internal */
+    protected onTreeNodeActivated(node: TreeNode<FileBrowserEntry<M>>): void;
+    /** @internal */
+    protected onEntryClick(entry: FileBrowserEntry<M>): void;
+    /** @internal */
+    protected onEntryDblClick(entry: FileBrowserEntry<M>): void;
+    /** @internal */
+    protected onEntryKeydown(event: KeyboardEvent, entry: FileBrowserEntry<M>): void;
+    /** @internal */
+    protected getEntryIcon(entry: FileBrowserEntry<M>): string;
+    /** @internal */
+    protected isEntrySelected(entry: FileBrowserEntry<M>): boolean;
+    private navigateTo;
+    private loadContents;
+    private createTreeDatasource;
+    private buildPathToNode;
+    private findNodePath;
+    private expandTreeToPath;
+    /** @internal — handle click on an entry inside a column pane. */
+    protected onColumnEntryClick(paneIndex: number, entry: FileBrowserEntry<M>): Promise<void>;
+    /** @internal — double-click in column view activates a file. */
+    protected onColumnEntryDblClick(entry: FileBrowserEntry<M>): void;
+    /** @internal — check if entry is selected in a column pane. */
+    protected isColumnEntrySelected(paneIndex: number, entry: FileBrowserEntry<M>): boolean;
+    private initColumnView;
+    private extractExtension;
+    /** @internal — scroll the rightmost column pane into view after DOM update. */
+    private scrollLastColumnPaneIntoView;
+    private static readonly STORAGE_PREFIX;
+    private savePanelWidths;
+    private loadPanelWidths;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIFileBrowser<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIFileBrowser<any>, "ui-file-browser", never, { "datasource": { "alias": "datasource"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showSidebar": { "alias": "showSidebar"; "required": false; "isSignal": true; }; "rootLabel": { "alias": "rootLabel"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "showDetails": { "alias": "showDetails"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "metadataProvider": { "alias": "metadataProvider"; "required": false; "isSignal": true; }; "selectedEntry": { "alias": "selectedEntry"; "required": false; "isSignal": true; }; }, { "selectedEntry": "selectedEntryChange"; "fileActivated": "fileActivated"; "directoryChange": "directoryChange"; }, ["entryTemplate"], never, true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/** Visual style of a chat message. */
+type ChatMessageType = "text" | "rich-text" | "system";
+/** Mode for the message composer. */
+type ChatComposerMode = "text" | "rich-text";
+/**
+ * A chat participant (user, bot, or system).
+ */
+interface ChatParticipant {
+    /** Unique identifier for this participant. */
+    readonly id: string;
+    /** Display name. */
+    readonly name: string;
+    /** Optional avatar image URL. */
+    readonly avatarSrc?: string;
+    /** Optional email for Gravatar lookup. */
+    readonly avatarEmail?: string;
+}
+/**
+ * A single chat message.
+ *
+ * @typeParam M — Extra metadata attached to each message.
+ */
+interface ChatMessage<M = unknown> {
+    /** Unique message identifier. */
+    readonly id: string;
+    /** Message content (plain text or HTML depending on {@link type}). */
+    readonly content: string;
+    /** When the message was sent. */
+    readonly timestamp: Date;
+    /** Who sent the message. */
+    readonly sender: ChatParticipant;
+    /** Content interpretation. Defaults to `'text'`. */
+    readonly type?: ChatMessageType;
+    /** Optional metadata. */
+    readonly meta?: M;
+}
+/**
+ * Emitted when the user sends a message via the composer.
+ */
+interface MessageSendEvent {
+    /** The composed message content. */
+    readonly content: string;
+}
+/**
+ * A group of messages under a date label.
+ * @internal
+ */
+interface MessageDateGroup<M = unknown> {
+    /** ISO date string key. */
+    readonly date: string;
+    /** Human-readable label (e.g. "Today", "Yesterday", or a date). */
+    readonly label: string;
+    /** Messages in chronological order. */
+    readonly messages: readonly ChatMessage<M>[];
+}
+/**
+ * Template context for custom message rendering via
+ * `#messageTemplate`.
+ *
+ * @typeParam M — Extra metadata type.
+ */
+interface MessageTemplateContext<M = unknown> {
+    /** The message (also available as `$implicit`). */
+    readonly $implicit: ChatMessage<M>;
+    /** The message. */
+    readonly message: ChatMessage<M>;
+    /** Whether this message was sent by the current user. */
+    readonly isMine: boolean;
+}
+
+/**
+ * A chat / messaging view composing UIAvatar, UIRichTextEditor,
+ * and a scrollable message list with a composer bar.
+ *
+ * Messages are supplied via the `messages` input. The component
+ * groups them by date and renders each with sender avatar, bubble,
+ * and timestamp. The current user's messages are right-aligned.
+ *
+ * The composer bar supports both plain-text (`textarea`) and
+ * rich-text (`UIRichTextEditor`) modes via the `composerMode`
+ * input.
+ *
+ * Custom message templates can be projected using a
+ * `#messageTemplate` content child.
+ *
+ * ### Basic usage
+ * ```html
+ * <ui-chat-view
+ *   [messages]="messages"
+ *   [currentUser]="me"
+ *   (messageSend)="onSend($event)"
+ * />
+ * ```
+ *
+ * ### Rich-text composer
+ * ```html
+ * <ui-chat-view
+ *   [messages]="messages"
+ *   [currentUser]="me"
+ *   composerMode="rich-text"
+ *   (messageSend)="onSend($event)"
+ * />
+ * ```
+ */
+declare class UIChatView<M = unknown> implements AfterViewInit {
+    /** The list of messages to display. */
+    readonly messages: _angular_core.InputSignal<readonly ChatMessage<M>[]>;
+    /** The current user (their messages are right-aligned). */
+    readonly currentUser: _angular_core.InputSignal<ChatParticipant>;
+    /** Composer input mode. */
+    readonly composerMode: _angular_core.InputSignal<ChatComposerMode>;
+    /** Placeholder text for the composer. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Accessible label for the chat view. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Optional custom template for rendering individual messages.
+     * Receives a {@link MessageTemplateContext}.
+     */
+    readonly messageTemplate: _angular_core.Signal<TemplateRef<MessageTemplateContext<M>> | undefined>;
+    /** Emitted when the user sends a message. */
+    readonly messageSend: _angular_core.OutputEmitterRef<MessageSendEvent>;
+    /** @internal */
+    private readonly messageListRef;
+    /** @internal */
+    private readonly composerInputRef;
+    /** @internal — current text in the composer. */
+    protected readonly composerValue: _angular_core.WritableSignal<string>;
+    /** @internal */
+    protected readonly sendIcon: "<path d=\"M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z\" /><path d=\"M6 12h16\" />";
+    /** @internal — messages grouped by date. */
+    protected readonly groupedMessages: _angular_core.Signal<readonly MessageDateGroup<M>[]>;
+    /** @internal — whether the send button should be enabled. */
+    protected readonly canSend: _angular_core.Signal<boolean>;
+    constructor();
+    ngAfterViewInit(): void;
+    /** Scroll the message list to the bottom. */
+    scrollToBottom(): void;
+    /** @internal — determine if a message was sent by the current user. */
+    protected isMine(message: ChatMessage<M>): boolean;
+    /** @internal — send the composed message. */
+    protected send(): void;
+    /** @internal — handle Enter key in the text composer. */
+    protected onComposerKeydown(event: KeyboardEvent): void;
+    /** @internal — handle input events on the textarea. */
+    protected onComposerInput(event: Event): void;
+    /** Group messages by date, producing human-readable labels. */
+    private groupByDate;
+    /** Convert a Date to a YYYY-MM-DD key. */
+    private toDateKey;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIChatView<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIChatView<any>, "ui-chat-view", never, { "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "currentUser": { "alias": "currentUser"; "required": true; "isSignal": true; }; "composerMode": { "alias": "composerMode"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "messageSend": "messageSend"; }, ["messageTemplate"], never, true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * A single chat message bubble with optional avatar, sender name,
+ * content, and timestamp.
+ *
+ * The bubble adjusts its visual alignment and styling based on the
+ * `isMine` input — right-aligned with accent colour for the
+ * current user, left-aligned with a neutral surface for others.
+ *
+ * ### Usage
+ * ```html
+ * <ui-message-bubble [message]="msg" [isMine]="false" />
+ * ```
+ */
+declare class UIMessageBubble<M = unknown> {
+    /** The message to render. */
+    readonly message: _angular_core.InputSignal<ChatMessage<M>>;
+    /** Whether this message belongs to the current user. */
+    readonly isMine: _angular_core.InputSignal<boolean>;
+    /** @internal — whether content should be rendered as HTML. */
+    protected readonly isRichText: _angular_core.Signal<boolean>;
+    /** @internal — formatted short time string. */
+    protected readonly timeString: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIMessageBubble<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIMessageBubble<any>, "ui-message-bubble", never, { "message": { "alias": "message"; "required": true; "isSignal": true; }; "isMine": { "alias": "isMine"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * A single step inside a {@link UIWizard}.
+ *
+ * Wrap each piece of wizard content in this component and project
+ * it into `<ui-wizard>`.
+ *
+ * ### Usage
+ * ```html
+ * <ui-wizard>
+ *   <ui-wizard-step label="Account">…</ui-wizard-step>
+ *   <ui-wizard-step label="Profile">…</ui-wizard-step>
+ *   <ui-wizard-step label="Confirm">…</ui-wizard-step>
+ * </ui-wizard>
+ * ```
+ */
+declare class UIWizardStep {
+    /** Label shown in the step indicator. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Whether this step is optional (shown as hint text). */
+    readonly optional: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the user can advance past this step. Bind a
+     * signal expression to create a validation gate.
+     *
+     * @default true
+     */
+    readonly canAdvance: _angular_core.InputSignal<boolean>;
+    /** @internal — template holding the step's projected content. */
+    readonly contentTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIWizardStep, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIWizardStep, "ui-wizard-step", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "canAdvance": { "alias": "canAdvance"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * Emitted when the active step changes.
+ */
+interface StepChangeEvent {
+    /** Index of the step being left. */
+    readonly previousIndex: number;
+    /** Index of the step being entered. */
+    readonly currentIndex: number;
+}
+
+/**
+ * A multi-step workflow shell with a step indicator, navigation
+ * buttons, and optional validation gates.
+ *
+ * Steps are defined by projecting `<ui-wizard-step>` children.
+ * The wizard discovers them via content queries and renders only
+ * the active step.
+ *
+ * ### Basic usage
+ * ```html
+ * <ui-wizard (complete)="onFinish()">
+ *   <ui-wizard-step label="Account">…</ui-wizard-step>
+ *   <ui-wizard-step label="Profile">…</ui-wizard-step>
+ *   <ui-wizard-step label="Confirm">…</ui-wizard-step>
+ * </ui-wizard>
+ * ```
+ *
+ * ### With validation gates
+ * ```html
+ * <ui-wizard linear>
+ *   <ui-wizard-step label="Details" [canAdvance]="formValid()">
+ *     …
+ *   </ui-wizard-step>
+ *   <ui-wizard-step label="Review">…</ui-wizard-step>
+ * </ui-wizard>
+ * ```
+ */
+declare class UIWizard {
+    /**
+     * When `true`, the user must complete steps in order and
+     * cannot click ahead on the step indicator.
+     */
+    readonly linear: _angular_core.InputSignal<boolean>;
+    /** Whether to show the step indicator bar. */
+    readonly showStepIndicator: _angular_core.InputSignal<boolean>;
+    /** Label for the Back button. */
+    readonly backLabel: _angular_core.InputSignal<string>;
+    /** Label for the Next button. */
+    readonly nextLabel: _angular_core.InputSignal<string>;
+    /** Label for the Finish button (shown on the last step). */
+    readonly finishLabel: _angular_core.InputSignal<string>;
+    /** Accessible label for the wizard. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Zero-based index of the active step (two-way bindable). */
+    readonly activeIndex: _angular_core.ModelSignal<number>;
+    /** @internal — discovered wizard steps. */
+    readonly steps: _angular_core.Signal<readonly UIWizardStep[]>;
+    /** Emitted when the active step changes. */
+    readonly stepChange: _angular_core.OutputEmitterRef<StepChangeEvent>;
+    /** Emitted when the user clicks Finish on the last step. */
+    readonly complete: _angular_core.OutputEmitterRef<void>;
+    /** @internal */
+    protected readonly checkIcon: "<path d=\"M20 6 9 17l-5-5\" />";
+    /** @internal — the currently active step. */
+    protected readonly activeStep: _angular_core.Signal<UIWizardStep | undefined>;
+    /** @internal */
+    protected readonly isFirstStep: _angular_core.Signal<boolean>;
+    /** @internal */
+    protected readonly isLastStep: _angular_core.Signal<boolean>;
+    /** @internal — whether the current step allows advancing. */
+    protected readonly canGoNext: _angular_core.Signal<boolean>;
+    /** Advance to the next step (respects validation). */
+    next(): void;
+    /** Go back to the previous step. */
+    previous(): void;
+    /** Navigate to a specific step by index. */
+    goToStep(index: number): void;
+    /** Complete the wizard (only works on the last step). */
+    finish(): void;
+    /** @internal — handle step indicator click. */
+    protected onStepClick(index: number): void;
+    /** @internal — whether a step indicator is clickable. */
+    protected isStepClickable(index: number): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIWizard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIWizard, "ui-wizard", never, { "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "showStepIndicator": { "alias": "showStepIndicator"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "finishLabel": { "alias": "finishLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; }, { "activeIndex": "activeIndexChange"; "stepChange": "stepChange"; "complete": "complete"; }, ["steps"], never, true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * Represents a column (lane) in the kanban board.
+ *
+ * @template T  The shape of the card payload.
+ */
+interface KanbanColumn<T = unknown> {
+    /** Unique column identifier. */
+    readonly id: string;
+    /** Display title for the column header. */
+    readonly title: string;
+    /** Ordered list of cards in this column (mutated during drag operations). */
+    cards: KanbanCard<T>[];
+    /** Optional accent colour rendered as a top-border stripe. */
+    readonly color?: string;
+}
+/**
+ * Represents a single card on the kanban board.
+ *
+ * @template T  The shape of the card payload.
+ */
+interface KanbanCard<T = unknown> {
+    /** Unique card identifier. */
+    readonly id: string;
+    /** Consumer-supplied payload rendered via the card template. */
+    readonly data: T;
+}
+/**
+ * Emitted when a card is moved between columns or reordered
+ * within the same column.
+ *
+ * @template T  The shape of the card payload.
+ */
+interface KanbanCardMoveEvent<T = unknown> {
+    /** The card that was moved. */
+    readonly card: KanbanCard<T>;
+    /** Column the card came from. */
+    readonly previousColumnId: string;
+    /** Column the card was dropped into. */
+    readonly currentColumnId: string;
+    /** Previous index within the source column. */
+    readonly previousIndex: number;
+    /** New index within the target column. */
+    readonly currentIndex: number;
+}
+/**
+ * Template context exposed to the projected card template.
+ *
+ * @template T  The shape of the card payload.
+ */
+interface KanbanCardContext<T = unknown> {
+    /** The card instance (also available via `let-card`). */
+    readonly $implicit: KanbanCard<T>;
+    /** The column the card belongs to. */
+    readonly column: KanbanColumn<T>;
+}
+
+/**
+ * Column-based kanban board with drag-and-drop card reordering.
+ *
+ * Cards can be moved within a column (reorder) or across columns
+ * (transfer). Columns and cards are provided via a two-way `columns`
+ * model. Project an `<ng-template>` to customise card rendering.
+ *
+ * ### Basic usage
+ * ```html
+ * <ui-kanban-board [(columns)]="columns">
+ *   <ng-template let-card let-column="column">
+ *     <h4>{{ card.data.title }}</h4>
+ *     <p>{{ card.data.description }}</p>
+ *   </ng-template>
+ * </ui-kanban-board>
+ * ```
+ */
+declare class UIKanbanBoard<T = unknown> {
+    /** Column data (two-way bindable). Mutated in-place during drag operations. */
+    readonly columns: _angular_core.ModelSignal<KanbanColumn<T>[]>;
+    /** Accessible label for the board region. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Optional projected template for card rendering. */
+    readonly cardTemplate: _angular_core.Signal<TemplateRef<KanbanCardContext<T>> | undefined>;
+    /** Emitted after a card is moved (reorder or transfer). */
+    readonly cardMoved: _angular_core.OutputEmitterRef<KanbanCardMoveEvent<T>>;
+    /** Emitted when a card is clicked. */
+    readonly cardClicked: _angular_core.OutputEmitterRef<KanbanCard<T>>;
+    /** @internal — handle CDK drop event. */
+    protected onDrop(event: CdkDragDrop<KanbanCard<T>[]>): void;
+    /** @internal — handle card click. */
+    protected onCardClick(card: KanbanCard<T>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIKanbanBoard<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIKanbanBoard<any>, "ui-kanban-board", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "columns": "columnsChange"; "cardMoved": "cardMoved"; "cardClicked": "cardClicked"; }, ["cardTemplate"], never, true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/** Variant for the confirm dialog's primary action button. */
+type ConfirmVariant = "primary" | "danger" | "warning";
+/** Options for {@link CommonDialogService.alert}. */
+interface AlertOptions {
+    /** Dialog title. */
+    readonly title: string;
+    /** Message body (plain text or a single paragraph). */
+    readonly message: string;
+    /** Label for the dismiss button. Defaults to `"OK"`. */
+    readonly buttonLabel?: string;
+    /** Accessible label for the dialog element. */
+    readonly ariaLabel?: string;
+}
+/** Options for {@link CommonDialogService.confirm}. */
+interface ConfirmOptions {
+    /** Dialog title. */
+    readonly title: string;
+    /** Message body. */
+    readonly message: string;
+    /** Label for the confirm button. Defaults to `"OK"`. */
+    readonly confirmLabel?: string;
+    /** Label for the cancel button. Defaults to `"Cancel"`. */
+    readonly cancelLabel?: string;
+    /** Visual variant of the confirm button. Defaults to `"primary"`. */
+    readonly variant?: ConfirmVariant;
+    /** Accessible label for the dialog element. */
+    readonly ariaLabel?: string;
+}
+/** Options for {@link CommonDialogService.prompt}. */
+interface PromptOptions {
+    /** Dialog title. */
+    readonly title: string;
+    /** Message body displayed above the input. */
+    readonly message: string;
+    /** Default value pre-filled in the input. */
+    readonly defaultValue?: string;
+    /** Placeholder text for the input. */
+    readonly placeholder?: string;
+    /** Label for the OK button. Defaults to `"OK"`. */
+    readonly okLabel?: string;
+    /** Label for the cancel button. Defaults to `"Cancel"`. */
+    readonly cancelLabel?: string;
+    /** Accessible label for the dialog element. */
+    readonly ariaLabel?: string;
+}
+/** Options for {@link CommonDialogService.openFile}. */
+interface OpenFileOptions<M = unknown> {
+    /** Datasource powering the file browser. */
+    readonly datasource: FileBrowserDatasource<M>;
+    /** Dialog title. Defaults to `"Open File"`. */
+    readonly title?: string;
+    /** Whether the user may select multiple files. */
+    readonly allowMultiple?: boolean;
+    /** Label for the open button. Defaults to `"Open"`. */
+    readonly openLabel?: string;
+    /** Accessible label for the dialog element. */
+    readonly ariaLabel?: string;
+}
+/** Result returned by {@link CommonDialogService.openFile}. */
+interface OpenFileResult<M = unknown> {
+    /** The selected file(s). */
+    readonly files: readonly FileBrowserEntry<M>[];
+}
+/** Options for {@link CommonDialogService.saveFile}. */
+interface SaveFileOptions<M = unknown> {
+    /** Datasource powering the file browser. */
+    readonly datasource: FileBrowserDatasource<M>;
+    /** Dialog title. Defaults to `"Save File"`. */
+    readonly title?: string;
+    /** Pre-filled file name. */
+    readonly defaultName?: string;
+    /** Label for the save button. Defaults to `"Save"`. */
+    readonly saveLabel?: string;
+    /** Accessible label for the dialog element. */
+    readonly ariaLabel?: string;
+}
+/** Result returned by {@link CommonDialogService.saveFile}. */
+interface SaveFileResult<M = unknown> {
+    /** The directory path the user is currently browsing. */
+    readonly directory: FileBrowserEntry<M> | null;
+    /** The file name entered by the user. */
+    readonly name: string;
+}
+/** Options for {@link CommonDialogService.about}. */
+interface AboutOptions {
+    /** Application name. */
+    readonly appName: string;
+    /** Version string (e.g. `"1.2.3"`). */
+    readonly version?: string;
+    /** Short description or tagline. */
+    readonly description?: string;
+    /** URL or data-URI for a logo image. */
+    readonly logoUrl?: string;
+    /** Copyright notice (e.g. `"© 2026 Acme Corp"`). */
+    readonly copyright?: string;
+    /** Credits / acknowledgements — rendered as a list. */
+    readonly credits?: readonly string[];
+    /** Accessible label for the dialog element. */
+    readonly ariaLabel?: string;
+}
+
+/**
+ * Service for showing common application dialogs — alert, confirm,
+ * prompt, open-file, save-file, and about.
+ *
+ * Each method opens a modal dialog and returns a `Promise` that
+ * resolves when the user closes it. The service delegates to
+ * {@link ModalService} for the underlying dialog lifecycle.
+ *
+ * @example
+ * ```ts
+ * const confirmed = await this.dialogs.confirm({
+ *   title: 'Delete item?',
+ *   message: 'This action cannot be undone.',
+ *   variant: 'danger',
+ * });
+ *
+ * if (confirmed) { ... }
+ * ```
+ */
+declare class CommonDialogService {
+    private readonly modal;
+    /**
+     * Show a simple informational alert with a dismiss button.
+     *
+     * @returns Resolves when the user dismisses the dialog.
+     */
+    alert(options: AlertOptions): Promise<void>;
+    /**
+     * Show a confirmation dialog with confirm and cancel buttons.
+     *
+     * @returns `true` if the user confirmed, `false` otherwise.
+     */
+    confirm(options: ConfirmOptions): Promise<boolean>;
+    /**
+     * Show a prompt dialog with a text input.
+     *
+     * @returns The entered string, or `null` if cancelled.
+     */
+    prompt(options: PromptOptions): Promise<string | null>;
+    /**
+     * Show an open-file dialog powered by {@link UIFileBrowser}.
+     *
+     * @returns The selected file(s), or `null` if cancelled.
+     */
+    openFile<M = unknown>(options: OpenFileOptions<M>): Promise<OpenFileResult<M> | null>;
+    /**
+     * Show a save-file dialog powered by {@link UIFileBrowser} with a
+     * file-name input.
+     *
+     * @returns The directory and file name, or `null` if cancelled.
+     */
+    saveFile<M = unknown>(options: SaveFileOptions<M>): Promise<SaveFileResult<M> | null>;
+    /**
+     * Show an "About" dialog with application information.
+     *
+     * @returns Resolves when the user closes the dialog.
+     */
+    about(options: AboutOptions): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommonDialogService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<CommonDialogService>;
+}
+
+/**
+ * Content component for a simple alert dialog.
+ *
+ * Displayed by {@link CommonDialogService.alert}. Shows a title,
+ * message, and a single dismiss button.
+ *
+ * @internal — not intended for direct use; use the service instead.
+ */
+declare class UIAlertDialog {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly message: _angular_core.InputSignal<string>;
+    readonly buttonLabel: _angular_core.InputSignal<string>;
+    private readonly modalRef;
+    dismiss(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIAlertDialog, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIAlertDialog, "ui-alert-dialog", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * Content component for a confirm dialog.
+ *
+ * Displayed by {@link CommonDialogService.confirm}. Shows a title,
+ * message, and confirm / cancel buttons. Resolves to `true` (confirm)
+ * or `false` (cancel / dismiss).
+ *
+ * @internal — not intended for direct use; use the service instead.
+ */
+declare class UIConfirmDialog {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly message: _angular_core.InputSignal<string>;
+    readonly confirmLabel: _angular_core.InputSignal<string>;
+    readonly cancelLabel: _angular_core.InputSignal<string>;
+    readonly variant: _angular_core.InputSignal<ConfirmVariant>;
+    private readonly modalRef;
+    confirm(): void;
+    cancel(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIConfirmDialog, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIConfirmDialog, "ui-confirm-dialog", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "confirmLabel": { "alias": "confirmLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * Content component for a prompt dialog.
+ *
+ * Displayed by {@link CommonDialogService.prompt}. Shows a title,
+ * message, a text input, and OK / Cancel buttons. Resolves to the
+ * entered string or `null` if cancelled.
+ *
+ * @internal — not intended for direct use; use the service instead.
+ */
+declare class UIPromptDialog implements OnInit {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly message: _angular_core.InputSignal<string>;
+    readonly defaultValue: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly okLabel: _angular_core.InputSignal<string>;
+    readonly cancelLabel: _angular_core.InputSignal<string>;
+    protected readonly inputValue: _angular_core.WritableSignal<string>;
+    private readonly modalRef;
+    ngOnInit(): void;
+    ok(): void;
+    cancel(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIPromptDialog, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIPromptDialog, "ui-prompt-dialog", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "okLabel": { "alias": "okLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * Content component for an open-file dialog.
+ *
+ * Displayed by {@link CommonDialogService.openFile}. Embeds a
+ * {@link UIFileBrowser} and resolves to the selected file(s) or
+ * `null` if cancelled.
+ *
+ * @internal — not intended for direct use; use the service instead.
+ */
+declare class UIOpenFileDialog<M = unknown> {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly openLabel: _angular_core.InputSignal<string>;
+    readonly datasource: _angular_core.InputSignal<FileBrowserDatasource<M>>;
+    protected readonly selectedFile: _angular_core.WritableSignal<FileBrowserEntry<M> | null>;
+    private readonly modalRef;
+    protected onFileActivated(_event: FileActivateEvent<M>): void;
+    open(): void;
+    cancel(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIOpenFileDialog<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIOpenFileDialog<any>, "ui-open-file-dialog", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "openLabel": { "alias": "openLabel"; "required": false; "isSignal": true; }; "datasource": { "alias": "datasource"; "required": true; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * Content component for a save-file dialog.
+ *
+ * Displayed by {@link CommonDialogService.saveFile}. Embeds a
+ * {@link UIFileBrowser} for directory navigation plus a file-name
+ * input. Resolves to a directory + file name, or `null` if cancelled.
+ *
+ * @internal — not intended for direct use; use the service instead.
+ */
+declare class UISaveFileDialog<M = unknown> implements OnInit {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly saveLabel: _angular_core.InputSignal<string>;
+    readonly defaultName: _angular_core.InputSignal<string>;
+    readonly datasource: _angular_core.InputSignal<FileBrowserDatasource<M>>;
+    protected readonly fileName: _angular_core.WritableSignal<string>;
+    protected readonly currentDir: _angular_core.WritableSignal<FileBrowserEntry<M> | null>;
+    private readonly modalRef;
+    ngOnInit(): void;
+    protected onDirectoryChange(event: DirectoryChangeEvent<M>): void;
+    save(): void;
+    cancel(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UISaveFileDialog<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UISaveFileDialog<any>, "ui-save-file-dialog", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "saveLabel": { "alias": "saveLabel"; "required": false; "isSignal": true; }; "defaultName": { "alias": "defaultName"; "required": false; "isSignal": true; }; "datasource": { "alias": "datasource"; "required": true; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+/**
+ * Content component for an "About" dialog.
+ *
+ * Displayed by {@link CommonDialogService.about}. Shows the
+ * application name, version, description, optional logo, copyright
+ * notice, and credits.
+ *
+ * @internal — not intended for direct use; use the service instead.
+ */
+declare class UIAboutDialog {
+    readonly appName: _angular_core.InputSignal<string>;
+    readonly version: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly logoUrl: _angular_core.InputSignal<string>;
+    readonly copyright: _angular_core.InputSignal<string>;
+    readonly credits: _angular_core.InputSignal<readonly string[]>;
+    private readonly modalRef;
+    dismiss(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIAboutDialog, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UIAboutDialog, "ui-about-dialog", never, { "appName": { "alias": "appName"; "required": false; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "logoUrl": { "alias": "logoUrl"; "required": false; "isSignal": true; }; "copyright": { "alias": "copyright"; "required": false; "isSignal": true; }; "credits": { "alias": "credits"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.UISurface; inputs: { "surfaceType": "surfaceType"; }; outputs: {}; }]>;
+}
+
+export { CommonDialogService, FILE_ICON_REGISTRY, SavedSearchService, UIAboutDialog, UIAlertDialog, UIChatView, UICommandPalette, UIConfirmDialog, UIDashboard, UIDashboardPanel, UIFileBrowser, UIKanbanBoard, UIMasterDetailView, UIMessageBubble, UINavigationPage, UIOpenFileDialog, UIPromptDialog, UIPropertySheet, UISaveFileDialog, UISearchView, UIWizard, UIWizardStep, navGroup, navItem, routesToNavigation };
+export type { AboutOptions, AlertOptions, ChatComposerMode, ChatMessage, ChatMessageType, ChatParticipant, CommandExecuteEvent, CommandPaletteItem, ConfirmOptions, ConfirmVariant, DashboardColumns, DashboardDockPosition, DashboardGridPlacement, DashboardPanelConfig, DirectoryChangeEvent, EntryTemplateContext, FileActivateEvent, FileBrowserDatasource, FileBrowserEntry, FileBrowserViewMode, FileIconRegistry, KanbanCard, KanbanCardContext, KanbanCardMoveEvent, KanbanColumn, MasterDetailContext, MessageDateGroup, MessageSendEvent, MessageTemplateContext, MetadataField, MetadataProvider, NavigationNode, NavigationNodeData, NavigationPageContext, NavigationRouteConfig, OpenFileOptions, OpenFileResult, PromptOptions, PropertyChangeEvent, PropertyFieldDefinition, PropertyFieldType, SaveFileOptions, SaveFileResult, SavedSearch, SearchViewEmptyContext, SearchViewLayout, SearchViewResultsContext, StepChangeEvent };
+//# sourceMappingURL=theredhead-lucid-blocks.d.ts.map