@theredhead/lucid-blocks 0.1.0

package/fesm2022/theredhead-lucid-blocks.mjs

@@ -0,0 +1,3827 @@
+import * as i0 from '@angular/core';
+import { input, output, model, contentChildren, contentChild, viewChild, computed, signal, effect, untracked, ChangeDetectionStrategy, Component, inject, DestroyRef, ElementRef, Injectable, InjectionToken, Injector, afterNextRender, TemplateRef } from '@angular/core';
+import { NgTemplateOutlet, DatePipe } from '@angular/common';
+import * as i1 from '@theredhead/lucid-foundation';
+import { isTreeDatasource, FilterableArrayTreeDatasource, UISurface, LoggerFactory, UI_DEFAULT_SURFACE_TYPE, StorageService, ArrayTreeDatasource, FilterableArrayDatasource as FilterableArrayDatasource$1 } from '@theredhead/lucid-foundation';
+import { UITableViewColumn, UITableView, FilterableArrayDatasource, inferFilterFields, SelectionModel, UIIcons, toFilterExpression, toPredicate, UISplitContainer, UITreeView, UIFilter, UIIcon, UISidebarItem, UIButton, UIDrawer, UISidebarNav, UISidebarGroup, UIBreadcrumb, UIDialog, UIDialogBody, UIDialogFooter, UIDialogHeader, UIInput, UIPagination, UIDropdownList, UICheckbox, UIColorPicker, UISlider, UIAvatar, UIRichTextEditor, ModalRef, ModalService } from '@theredhead/lucid-kit';
+import { moveItemInArray, transferArrayItem, CdkDropListGroup, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
+import { firstValueFrom } from 'rxjs';
+
+/**
+ * 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>
+ * ```
+ */
+class UIMasterDetailView {
+    // ── Inputs ────────────────────────────────────────────────────────
+    /** Title displayed above the list panel. */
+    title = input("Items", ...(ngDevMode ? [{ debugName: "title" }] : []));
+    /**
+     * 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.
+     */
+    datasource = input(undefined, ...(ngDevMode ? [{ debugName: "datasource" }] : []));
+    /**
+     * Function that returns a display string for tree node data.
+     * Only used in tree mode when no `#nodeTemplate` is projected.
+     * Defaults to `String(data)`.
+     */
+    treeDisplayWith = input((data) => String(data), ...(ngDevMode ? [{ debugName: "treeDisplayWith" }] : []));
+    /** Placeholder text shown when no item is selected. */
+    placeholder = input("Select an item to view details", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /**
+     * 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.
+     */
+    showFilter = input(undefined, ...(ngDevMode ? [{ debugName: "showFilter" }] : []));
+    /** Whether the filter section starts expanded. */
+    filterExpanded = input(true, ...(ngDevMode ? [{ debugName: "filterExpanded" }] : []));
+    /**
+     * 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.
+     */
+    filterModeLocked = input(false, ...(ngDevMode ? [{ debugName: "filterModeLocked" }] : []));
+    /**
+     * Explicit filter field definitions.
+     *
+     * When provided these override the auto-inferred fields.
+     * Only relevant when no `#filter` template is projected.
+     */
+    filterFields = input(undefined, ...(ngDevMode ? [{ debugName: "filterFields" }] : []));
+    /**
+     * Initial split sizes as a `[list, detail]` percentage tuple.
+     * Must sum to 100. Defaults to `[33, 67]`.
+     */
+    splitSizes = input([33, 67], ...(ngDevMode ? [{ debugName: "splitSizes" }] : []));
+    /**
+     * Optional localStorage key for persisting the split panel sizes.
+     * When set the user's last divider position is restored on init.
+     */
+    splitName = input(undefined, ...(ngDevMode ? [{ debugName: "splitName" }] : []));
+    /**
+     * Which panel to collapse when the divider is double-clicked.
+     * Defaults to `'first'` so the list panel can be collapsed.
+     */
+    splitCollapseTarget = input("first", ...(ngDevMode ? [{ debugName: "splitCollapseTarget" }] : []));
+    /**
+     * Size constraints for the list (first) panel in pixels.
+     * Defaults to `{ min: 200 }`.
+     */
+    listConstraints = input({
+        min: 200,
+    }, ...(ngDevMode ? [{ debugName: "listConstraints" }] : []));
+    // ── Table pass-through inputs ─────────────────────────────────
+    /** Whether the embedded table view is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Page size for the embedded table view's paginator.
+     * Leave `undefined` to use the table's default.
+     */
+    pageSize = input(undefined, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    /**
+     * External page index (zero-based) for the embedded table view.
+     * Leave `undefined` to let the built-in paginator manage it.
+     */
+    pageIndex = input(undefined, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
+    /**
+     * Whether to show the table's built-in paginator.
+     * Defaults to `false`.
+     */
+    showBuiltInPaginator = input(false, ...(ngDevMode ? [{ debugName: "showBuiltInPaginator" }] : []));
+    /** Accessible caption for the embedded table. */
+    caption = input("", ...(ngDevMode ? [{ debugName: "caption" }] : []));
+    /** Whether to show row-index numbers in the table. */
+    showRowIndexIndicator = input(false, ...(ngDevMode ? [{ debugName: "showRowIndexIndicator" }] : []));
+    /** Header text for the row-index column.  Defaults to `"#"`. */
+    rowIndexHeaderText = input("#", ...(ngDevMode ? [{ debugName: "rowIndexHeaderText" }] : []));
+    /**
+     * Unique table identifier used for persisting column widths.
+     * When set, column widths are stored in localStorage.
+     */
+    tableId = input("", ...(ngDevMode ? [{ debugName: "tableId" }] : []));
+    /**
+     * Whether table columns can be resized by dragging header borders.
+     * Defaults to `true`.
+     */
+    resizable = input(true, ...(ngDevMode ? [{ debugName: "resizable" }] : []));
+    /**
+     * Row height in pixels for the internal table-view.
+     * Forwarded to `<ui-table-view [rowHeight]>`.
+     * Defaults to 36 px.
+     */
+    rowHeight = input(36, ...(ngDevMode ? [{ debugName: "rowHeight" }] : []));
+    // ── Outputs ───────────────────────────────────────────────────────
+    /** Emits whenever the selection changes. Carries the selected item or `undefined`. */
+    selectedChange = output();
+    /**
+     * 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.
+     */
+    expressionChange = output();
+    // ── Models ────────────────────────────────────────────────────────
+    /**
+     * 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.
+     */
+    filterDescriptor = model({
+        junction: "and",
+        rules: [],
+    }, ...(ngDevMode ? [{ debugName: "filterDescriptor" }] : []));
+    // ── Content queries ───────────────────────────────────────────────
+    /**
+     * Projected table-view columns.
+     * These are forwarded to the internal `<ui-table-view>`.
+     */
+    columns = contentChildren(UITableViewColumn, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    /** Detail template — rendered when an item is selected. */
+    detailTemplate = contentChild("detail", ...(ngDevMode ? [{ debugName: "detailTemplate" }] : []));
+    /** Optional filter template — shown in the collapsible filter area. */
+    filterTemplate = contentChild("filter", ...(ngDevMode ? [{ debugName: "filterTemplate" }] : []));
+    /**
+     * Optional tree-node template — forwarded to `<ui-tree-view>`.
+     * Receives {@link TreeNodeContext} as its context.
+     */
+    treeNodeTemplate = contentChild("nodeTemplate", ...(ngDevMode ? [{ debugName: "treeNodeTemplate" }] : []));
+    // ── View queries ──────────────────────────────────────────────────
+    /** @internal — the internal table view instance (table mode). */
+    tableViewChild = viewChild(UITableView, ...(ngDevMode ? [{ debugName: "tableViewChild" }] : []));
+    // ── Computed ──────────────────────────────────────────────────────
+    /**
+     * Whether the component is in tree mode.
+     * `true` when the `datasource` input is an `ITreeDatasource`. @internal
+     */
+    isTreeMode = computed(() => isTreeDatasource(this.datasource()), ...(ngDevMode ? [{ debugName: "isTreeMode" }] : []));
+    /**
+     * The tree datasource, extracted from the unified `datasource`
+     * input. Returns `undefined` when not in tree mode.
+     * @internal
+     */
+    resolvedTreeDatasource = computed(() => {
+        const ds = this.datasource();
+        return isTreeDatasource(ds) ? ds : undefined;
+    }, ...(ngDevMode ? [{ debugName: "resolvedTreeDatasource" }] : []));
+    /**
+     * The currently selected item, derived from the table selection
+     * model or the tree selection signal. @internal
+     */
+    selectedItem = computed(() => {
+        if (this.isTreeMode()) {
+            const nodes = this.selectedTreeNodes();
+            return nodes.length > 0 ? nodes[0].data : undefined;
+        }
+        const items = this.selectionModel.selected();
+        return items.length > 0 ? items[0] : undefined;
+    }, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+    /** Context for the detail template outlet. @internal */
+    detailContext = computed(() => {
+        const item = this.selectedItem();
+        if (item === undefined)
+            return undefined;
+        return { $implicit: item };
+    }, ...(ngDevMode ? [{ debugName: "detailContext" }] : []));
+    /**
+     * 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
+     */
+    resolvedTableDatasource = computed(() => {
+        const explicit = this.datasource();
+        if (explicit && !isTreeDatasource(explicit)) {
+            return explicit;
+        }
+        return new FilterableArrayDatasource([]);
+    }, ...(ngDevMode ? [{ debugName: "resolvedTableDatasource" }] : []));
+    /**
+     * 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
+     */
+    resolvedShowFilter = computed(() => {
+        const explicit = this.showFilter();
+        if (explicit !== undefined)
+            return explicit;
+        // Tree mode: auto-show when a tree datasource is provided
+        if (this.resolvedTreeDatasource() !== undefined)
+            return false;
+        // Auto-detect: show filter when the datasource supports filtering
+        const ds = this.resolvedTableDatasource();
+        return ds instanceof FilterableArrayDatasource;
+    }, ...(ngDevMode ? [{ debugName: "resolvedShowFilter" }] : []));
+    /**
+     * The filter field definitions used by the embedded `<ui-filter>`.
+     *
+     * Priority: explicit `filterFields` input → inferred from projected
+     * columns and the first data row.
+     * @internal
+     */
+    resolvedFilterFields = computed(() => {
+        const explicit = this.filterFields();
+        if (explicit)
+            return explicit;
+        // ── Tree mode: infer from tree node data ──
+        const treeDs = this.resolvedTreeDatasource();
+        if (treeDs) {
+            const flatData = this.collectTreeData(treeDs);
+            if (flatData.length === 0)
+                return [];
+            return inferFilterFields(flatData[0]);
+        }
+        // ── Table mode: infer from columns + datasource rows ──
+        // Derive column metadata from projected UITableViewColumn instances
+        const cols = this.columns();
+        const columnMeta = cols.map((c) => ({
+            key: c.key(),
+            headerText: c.headerText(),
+        }));
+        // Get a sample row from the *unfiltered* datasource to sniff
+        // types.  We must NOT use getNumberOfItems() on a filtered
+        // datasource — the filtered count drops to 0 when no rows match
+        // the current predicate and would make the filter fields (and
+        // the filter component) disappear.
+        const ds = this.resolvedTableDatasource();
+        // Prefer the full unfiltered list when available
+        const allRows = ds instanceof FilterableArrayDatasource ? ds.allRows : undefined;
+        let sample;
+        if (allRows && allRows.length > 0) {
+            sample = allRows[0];
+        }
+        else {
+            // Fallback for non-filterable datasources
+            const count = ds.getNumberOfItems();
+            if (typeof count !== "number" || count === 0)
+                return [];
+            const result = ds.getObjectAtRowIndex(0);
+            if (!result || result instanceof Promise)
+                return [];
+            sample = result;
+        }
+        if (!sample)
+            return [];
+        return inferFilterFields(sample, columnMeta.length > 0 ? columnMeta : undefined);
+    }, ...(ngDevMode ? [{ debugName: "resolvedFilterFields" }] : []));
+    /**
+     * The raw data array for the embedded filter (used to derive
+     * distinct values for autocomplete / select).
+     * @internal
+     */
+    resolvedFilterData = computed(() => {
+        // ── Tree mode: flatten all node data ──
+        const treeDs = this.resolvedTreeDatasource();
+        if (treeDs) {
+            const flatData = this.collectTreeData(treeDs);
+            return flatData.length < 1000 ? flatData : [];
+        }
+        // ── Table mode ──
+        const ds = this.resolvedTableDatasource();
+        // Use the full unfiltered dataset when available so that distinct
+        // value lists and autocomplete options don't shrink as the user
+        // narrows the filter.
+        if (ds instanceof FilterableArrayDatasource) {
+            const all = ds.allRows;
+            return all.length < 1000 ? all : [];
+        }
+        // Fallback for non-filterable datasources: gather visible rows
+        const count = ds.getNumberOfItems();
+        if (typeof count !== "number" || count === 0 || count >= 1000)
+            return [];
+        const rows = [];
+        for (let i = 0; i < count; i++) {
+            const row = ds.getObjectAtRowIndex(i);
+            if (!(row instanceof Promise))
+                rows.push(row);
+        }
+        return rows;
+    }, ...(ngDevMode ? [{ debugName: "resolvedFilterData" }] : []));
+    // ── Public fields ───────────────────────────────────────────────
+    /** Selection model for the table-view (single mode). */
+    selectionModel = new SelectionModel("single");
+    // ── Protected fields ──────────────────────────────────────────────
+    /** @internal — currently selected tree nodes (tree mode). */
+    selectedTreeNodes = signal([], ...(ngDevMode ? [{ debugName: "selectedTreeNodes" }] : []));
+    /** @internal — whether the filter section is collapsed. */
+    filterCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "filterCollapsed" }] : []));
+    /**
+     * The current filter predicate for tree mode.
+     * Forwarded to the `<ui-tree-view>` `filterPredicate` input.
+     * @internal
+     */
+    treeFilterPredicate = signal(undefined, ...(ngDevMode ? [{ debugName: "treeFilterPredicate" }] : []));
+    // ── Protected constants ───────────────────────────────────────────
+    /** @internal */
+    chevronDown = UIIcons.Lucide.Arrows.ChevronDown;
+    /** @internal */
+    chevronRight = UIIcons.Lucide.Arrows.ChevronRight;
+    // ── Constructor ───────────────────────────────────────────────────
+    constructor() {
+        // Initialise filterCollapsed from the filterExpanded input
+        effect(() => {
+            const expanded = this.filterExpanded();
+            untracked(() => this.filterCollapsed.set(!expanded));
+        });
+        // Emit selectedChange whenever selection changes
+        effect(() => {
+            const item = this.selectedItem();
+            untracked(() => this.selectedChange.emit(item));
+        });
+    }
+    // ── Public methods ────────────────────────────────────────────────
+    /**
+     * 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) {
+        this.expressionChange.emit(expression);
+        if (this.isTreeMode()) {
+            const treeDs = this.resolvedTreeDatasource();
+            // FilterableArrayTreeDatasource: compile expression and apply
+            if (treeDs instanceof FilterableArrayTreeDatasource) {
+                const fields = this.resolvedFilterFields();
+                const compiled = toFilterExpression(expression, fields);
+                treeDs.filterBy(compiled.length === 0 ? null : compiled);
+                return;
+            }
+            // Plain ITreeDatasource: fall back to tree-view filterPredicate input
+            const fields = this.resolvedFilterFields();
+            const descriptor = this.filterDescriptor();
+            this.treeFilterPredicate.set(toPredicate(descriptor, fields));
+            return;
+        }
+        // Table mode: apply expression to FilterableArrayDatasource
+        const ds = this.resolvedTableDatasource();
+        if (ds instanceof FilterableArrayDatasource) {
+            const fields = this.resolvedFilterFields();
+            const compiled = toFilterExpression(expression, fields);
+            ds.filterBy(compiled.length === 0 ? null : compiled);
+            this.tableViewChild()?.refreshDatasource();
+        }
+    }
+    // ── Protected methods ─────────────────────────────────────────────
+    /** @internal — toggle filter visibility. */
+    toggleFilter() {
+        this.filterCollapsed.update((v) => !v);
+    }
+    // ── Private helpers ───────────────────────────────────────────────
+    /**
+     * 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.
+     */
+    collectTreeData(ds) {
+        const items = [];
+        const walk = (nodes) => {
+            for (const node of nodes) {
+                items.push(node.data);
+                const children = ds.getChildren(node);
+                if (Array.isArray(children))
+                    walk(children);
+            }
+        };
+        const roots = ds.getRootNodes();
+        if (Array.isArray(roots))
+            walk(roots);
+        return items;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIMasterDetailView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIMasterDetailView, isStandalone: true, selector: "ui-master-detail-view", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, treeDisplayWith: { classPropertyName: "treeDisplayWith", publicName: "treeDisplayWith", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, filterExpanded: { classPropertyName: "filterExpanded", publicName: "filterExpanded", isSignal: true, isRequired: false, transformFunction: null }, filterModeLocked: { classPropertyName: "filterModeLocked", publicName: "filterModeLocked", isSignal: true, isRequired: false, transformFunction: null }, filterFields: { classPropertyName: "filterFields", publicName: "filterFields", isSignal: true, isRequired: false, transformFunction: null }, splitSizes: { classPropertyName: "splitSizes", publicName: "splitSizes", isSignal: true, isRequired: false, transformFunction: null }, splitName: { classPropertyName: "splitName", publicName: "splitName", isSignal: true, isRequired: false, transformFunction: null }, splitCollapseTarget: { classPropertyName: "splitCollapseTarget", publicName: "splitCollapseTarget", isSignal: true, isRequired: false, transformFunction: null }, listConstraints: { classPropertyName: "listConstraints", publicName: "listConstraints", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, showBuiltInPaginator: { classPropertyName: "showBuiltInPaginator", publicName: "showBuiltInPaginator", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, showRowIndexIndicator: { classPropertyName: "showRowIndexIndicator", publicName: "showRowIndexIndicator", isSignal: true, isRequired: false, transformFunction: null }, rowIndexHeaderText: { classPropertyName: "rowIndexHeaderText", publicName: "rowIndexHeaderText", isSignal: true, isRequired: false, transformFunction: null }, tableId: { classPropertyName: "tableId", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, filterDescriptor: { classPropertyName: "filterDescriptor", publicName: "filterDescriptor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", expressionChange: "expressionChange", filterDescriptor: "filterDescriptorChange" }, host: { classAttribute: "ui-master-detail-view" }, queries: [{ propertyName: "columns", predicate: UITableViewColumn, isSignal: true }, { propertyName: "detailTemplate", first: true, predicate: ["detail"], descendants: true, isSignal: true }, { propertyName: "filterTemplate", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "treeNodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableViewChild", first: true, predicate: UITableView, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "<!-- Hidden slot: instantiates projected columns so contentChildren can discover them. -->\r\n<div class=\"columns-slot\"><ng-content /></div>\r\n\r\n@if (resolvedShowFilter()) {\r\n  <div class=\"filter-bar\">\r\n    @if (!filterModeLocked()) {\r\n      <button\r\n        class=\"filter-toggle\"\r\n        type=\"button\"\r\n        (click)=\"toggleFilter()\"\r\n        [attr.aria-expanded]=\"!filterCollapsed()\"\r\n        aria-controls=\"mdv-filter-content\"\r\n      >\r\n        <ui-icon\r\n          [svg]=\"filterCollapsed() ? chevronRight : chevronDown\"\r\n          [size]=\"14\"\r\n        />\r\n        <span>Filter</span>\r\n      </button>\r\n    }\r\n    @if (!filterCollapsed()) {\r\n      <div class=\"filter-content\" id=\"mdv-filter-content\">\r\n        @if (filterTemplate(); as filterTpl) {\r\n          <ng-container *ngTemplateOutlet=\"filterTpl\" />\r\n        } @else {\r\n          @if (resolvedFilterFields(); as fields) {\r\n            @if (fields.length > 0) {\r\n              <ui-filter\r\n                [fields]=\"fields\"\r\n                [data]=\"resolvedFilterData()\"\r\n                [allowJunction]=\"true\"\r\n                [modeLocked]=\"filterModeLocked()\"\r\n                [(value)]=\"filterDescriptor\"\r\n                (expressionChange)=\"onFilterExpressionChange($event)\"\r\n              />\r\n            }\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<ui-split-container\r\n  class=\"split\"\r\n  [initialSizes]=\"splitSizes()\"\r\n  [name]=\"splitName()\"\r\n  [collapseTarget]=\"splitCollapseTarget()\"\r\n  [firstConstraints]=\"listConstraints()\"\r\n  ariaLabel=\"Resize list and detail panels\"\r\n>\r\n  <aside first class=\"list\">\r\n    <header class=\"ui-surface-type-panel\">\r\n      <h2 class=\"title\">{{ title() }}</h2>\r\n    </header>\r\n\r\n    @if (isTreeMode()) {\r\n      <div class=\"tree-wrapper\">\r\n        <ui-tree-view\r\n          [datasource]=\"resolvedTreeDatasource()!\"\r\n          [displayWith]=\"treeDisplayWith()\"\r\n          [filterPredicate]=\"treeFilterPredicate()\"\r\n          [(selected)]=\"selectedTreeNodes\"\r\n          ariaLabel=\"Master list\"\r\n        >\r\n          @if (treeNodeTemplate(); as nodeTpl) {\r\n            <ng-template #nodeTemplate let-node let-level=\"level\" let-expanded=\"expanded\" let-hasChildren=\"hasChildren\">\r\n              <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: node, level: level, expanded: expanded, hasChildren: hasChildren }\" />\r\n            </ng-template>\r\n          }\r\n        </ui-tree-view>\r\n      </div>\r\n    } @else {\r\n      <div class=\"table-wrapper\">\r\n        <ui-table-view\r\n          [datasource]=\"resolvedTableDatasource()\"\r\n          [externalColumns]=\"columns()\"\r\n          [disabled]=\"disabled()\"\r\n          [pageSize]=\"pageSize()\"\r\n          [pageIndex]=\"pageIndex()\"\r\n          [showBuiltInPaginator]=\"showBuiltInPaginator()\"\r\n          [caption]=\"caption()\"\r\n          [showRowIndexIndicator]=\"showRowIndexIndicator()\"\r\n          [rowIndexHeaderText]=\"rowIndexHeaderText()\"\r\n          [tableId]=\"tableId()\"\r\n          [resizable]=\"resizable()\"\r\n          [rowHeight]=\"rowHeight()\"\n          selectionMode=\"single\"\r\n          [showSelectionColumn]=\"false\"\r\n          [rowClickSelect]=\"true\"\r\n          [selectionModel]=\"selectionModel\"\r\n        />\r\n      </div>\r\n    }\r\n  </aside>\r\n\r\n  <main second class=\"detail\">\r\n    @if (detailContext(); as ctx) {\r\n      @if (detailTemplate(); as tpl) {\r\n        <section class=\"detail-content\">\r\n          <ng-container *ngTemplateOutlet=\"tpl; context: ctx\" />\r\n        </section>\r\n      }\r\n    } @else {\r\n      <div class=\"placeholder\">\r\n        <p>{{ placeholder() }}</p>\r\n      </div>\r\n    }\r\n  </main>\r\n</ui-split-container>", styles: ["@charset \"UTF-8\";:host{--ui-radius: 6px;display:flex;flex-direction:column;height:100%;font-family:Cantarell,Noto Sans,Segoe UI,sans-serif}.columns-slot{display:none}.split{flex:1;min-height:0}.list{display:flex;flex-direction:column;overflow:hidden;height:100%;min-height:0}.header{padding:.75rem 1rem;flex-shrink:0}.title{margin:0;font-size:.9rem;font-weight:600;letter-spacing:.01em}.filter-bar{flex-shrink:0}.filter-toggle{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:flex;align-items:center;gap:6px;width:100%;padding:.45rem 1rem;font-size:.78rem;font-weight:500;text-align:left}.table-wrapper{flex:1;overflow:hidden;min-height:0}.table-wrapper ::ng-deep ui-table-view{display:flex;flex-direction:column;height:100%}.table-wrapper ::ng-deep .root{display:flex;flex-direction:column;flex:1;min-height:0;border-radius:0;border:none;box-shadow:none}.table-wrapper ::ng-deep ui-table-body{flex:1;min-height:0}.table-wrapper ::ng-deep .table-body-viewport{height:100%}.tree-wrapper{flex:1;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:.25rem 0}.detail{display:flex;flex-direction:column;overflow:hidden;height:100%}.detail-content{flex:1;overflow-y:auto;padding:1.25rem}.placeholder{flex:1;display:flex;align-items:center;justify-content:center}.placeholder p{margin:0;font-size:.88rem}\n"], dependencies: [{ kind: "component", type: UISplitContainer, selector: "ui-split-container", inputs: ["disabled", "orientation", "initialSizes", "name", "firstConstraints", "secondConstraints", "dividerWidth", "collapseTarget", "ariaLabel"], outputs: ["resized", "resizing"] }, { kind: "component", type: UITableView, selector: "ui-table-view", inputs: ["renderingStrategy", "disabled", "rowHeight", "datasource", "pageSize", "pageIndex", "showBuiltInPaginator", "caption", "showRowIndexIndicator", "rowIndexHeaderText", "tableId", "resizable", "selectionMode", "rowClickSelect", "showSelectionColumn", "selectionModel", "externalColumns"], outputs: ["selectionChange"] }, { kind: "component", type: UITreeView, selector: "ui-tree-view", inputs: ["disabled", "datasource", "ariaLabel", "displayWith", "filterPredicate", "sortComparator", "selected"], outputs: ["selectedChange", "nodeExpanded", "nodeCollapsed", "nodeActivated"] }, { kind: "component", type: UIFilter, selector: "ui-filter", inputs: ["disabled", "fields", "allowJunction", "allowSimple", "allowAdvanced", "modeLocked", "showSaveButton", "data", "value"], outputs: ["valueChange", "expressionChange", "saveFilter"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["svg", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIMasterDetailView, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-master-detail-view", standalone: true, imports: [
+                        UISplitContainer,
+                        UITableView,
+                        UITreeView,
+                        UIFilter,
+                        NgTemplateOutlet,
+                        UIIcon,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }], host: {
+                        class: "ui-master-detail-view",
+                    }, template: "<!-- Hidden slot: instantiates projected columns so contentChildren can discover them. -->\r\n<div class=\"columns-slot\"><ng-content /></div>\r\n\r\n@if (resolvedShowFilter()) {\r\n  <div class=\"filter-bar\">\r\n    @if (!filterModeLocked()) {\r\n      <button\r\n        class=\"filter-toggle\"\r\n        type=\"button\"\r\n        (click)=\"toggleFilter()\"\r\n        [attr.aria-expanded]=\"!filterCollapsed()\"\r\n        aria-controls=\"mdv-filter-content\"\r\n      >\r\n        <ui-icon\r\n          [svg]=\"filterCollapsed() ? chevronRight : chevronDown\"\r\n          [size]=\"14\"\r\n        />\r\n        <span>Filter</span>\r\n      </button>\r\n    }\r\n    @if (!filterCollapsed()) {\r\n      <div class=\"filter-content\" id=\"mdv-filter-content\">\r\n        @if (filterTemplate(); as filterTpl) {\r\n          <ng-container *ngTemplateOutlet=\"filterTpl\" />\r\n        } @else {\r\n          @if (resolvedFilterFields(); as fields) {\r\n            @if (fields.length > 0) {\r\n              <ui-filter\r\n                [fields]=\"fields\"\r\n                [data]=\"resolvedFilterData()\"\r\n                [allowJunction]=\"true\"\r\n                [modeLocked]=\"filterModeLocked()\"\r\n                [(value)]=\"filterDescriptor\"\r\n                (expressionChange)=\"onFilterExpressionChange($event)\"\r\n              />\r\n            }\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<ui-split-container\r\n  class=\"split\"\r\n  [initialSizes]=\"splitSizes()\"\r\n  [name]=\"splitName()\"\r\n  [collapseTarget]=\"splitCollapseTarget()\"\r\n  [firstConstraints]=\"listConstraints()\"\r\n  ariaLabel=\"Resize list and detail panels\"\r\n>\r\n  <aside first class=\"list\">\r\n    <header class=\"ui-surface-type-panel\">\r\n      <h2 class=\"title\">{{ title() }}</h2>\r\n    </header>\r\n\r\n    @if (isTreeMode()) {\r\n      <div class=\"tree-wrapper\">\r\n        <ui-tree-view\r\n          [datasource]=\"resolvedTreeDatasource()!\"\r\n          [displayWith]=\"treeDisplayWith()\"\r\n          [filterPredicate]=\"treeFilterPredicate()\"\r\n          [(selected)]=\"selectedTreeNodes\"\r\n          ariaLabel=\"Master list\"\r\n        >\r\n          @if (treeNodeTemplate(); as nodeTpl) {\r\n            <ng-template #nodeTemplate let-node let-level=\"level\" let-expanded=\"expanded\" let-hasChildren=\"hasChildren\">\r\n              <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: node, level: level, expanded: expanded, hasChildren: hasChildren }\" />\r\n            </ng-template>\r\n          }\r\n        </ui-tree-view>\r\n      </div>\r\n    } @else {\r\n      <div class=\"table-wrapper\">\r\n        <ui-table-view\r\n          [datasource]=\"resolvedTableDatasource()\"\r\n          [externalColumns]=\"columns()\"\r\n          [disabled]=\"disabled()\"\r\n          [pageSize]=\"pageSize()\"\r\n          [pageIndex]=\"pageIndex()\"\r\n          [showBuiltInPaginator]=\"showBuiltInPaginator()\"\r\n          [caption]=\"caption()\"\r\n          [showRowIndexIndicator]=\"showRowIndexIndicator()\"\r\n          [rowIndexHeaderText]=\"rowIndexHeaderText()\"\r\n          [tableId]=\"tableId()\"\r\n          [resizable]=\"resizable()\"\r\n          [rowHeight]=\"rowHeight()\"\n          selectionMode=\"single\"\r\n          [showSelectionColumn]=\"false\"\r\n          [rowClickSelect]=\"true\"\r\n          [selectionModel]=\"selectionModel\"\r\n        />\r\n      </div>\r\n    }\r\n  </aside>\r\n\r\n  <main second class=\"detail\">\r\n    @if (detailContext(); as ctx) {\r\n      @if (detailTemplate(); as tpl) {\r\n        <section class=\"detail-content\">\r\n          <ng-container *ngTemplateOutlet=\"tpl; context: ctx\" />\r\n        </section>\r\n      }\r\n    } @else {\r\n      <div class=\"placeholder\">\r\n        <p>{{ placeholder() }}</p>\r\n      </div>\r\n    }\r\n  </main>\r\n</ui-split-container>", styles: ["@charset \"UTF-8\";:host{--ui-radius: 6px;display:flex;flex-direction:column;height:100%;font-family:Cantarell,Noto Sans,Segoe UI,sans-serif}.columns-slot{display:none}.split{flex:1;min-height:0}.list{display:flex;flex-direction:column;overflow:hidden;height:100%;min-height:0}.header{padding:.75rem 1rem;flex-shrink:0}.title{margin:0;font-size:.9rem;font-weight:600;letter-spacing:.01em}.filter-bar{flex-shrink:0}.filter-toggle{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:flex;align-items:center;gap:6px;width:100%;padding:.45rem 1rem;font-size:.78rem;font-weight:500;text-align:left}.table-wrapper{flex:1;overflow:hidden;min-height:0}.table-wrapper ::ng-deep ui-table-view{display:flex;flex-direction:column;height:100%}.table-wrapper ::ng-deep .root{display:flex;flex-direction:column;flex:1;min-height:0;border-radius:0;border:none;box-shadow:none}.table-wrapper ::ng-deep ui-table-body{flex:1;min-height:0}.table-wrapper ::ng-deep .table-body-viewport{height:100%}.tree-wrapper{flex:1;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:.25rem 0}.detail{display:flex;flex-direction:column;overflow:hidden;height:100%}.detail-content{flex:1;overflow-y:auto;padding:1.25rem}.placeholder{flex:1;display:flex;align-items:center;justify-content:center}.placeholder p{margin:0;font-size:.88rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: false }] }], treeDisplayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeDisplayWith", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], filterExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterExpanded", required: false }] }], filterModeLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModeLocked", required: false }] }], filterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFields", required: false }] }], splitSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "splitSizes", required: false }] }], splitName: [{ type: i0.Input, args: [{ isSignal: true, alias: "splitName", required: false }] }], splitCollapseTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "splitCollapseTarget", required: false }] }], listConstraints: [{ type: i0.Input, args: [{ isSignal: true, alias: "listConstraints", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], showBuiltInPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBuiltInPaginator", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], showRowIndexIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowIndexIndicator", required: false }] }], rowIndexHeaderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndexHeaderText", required: false }] }], tableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableId", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], expressionChange: [{ type: i0.Output, args: ["expressionChange"] }], filterDescriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterDescriptor", required: false }] }, { type: i0.Output, args: ["filterDescriptorChange"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UITableViewColumn), { isSignal: true }] }], detailTemplate: [{ type: i0.ContentChild, args: ["detail", { isSignal: true }] }], filterTemplate: [{ type: i0.ContentChild, args: ["filter", { isSignal: true }] }], treeNodeTemplate: [{ type: i0.ContentChild, args: ["nodeTemplate", { isSignal: true }] }], tableViewChild: [{ type: i0.ViewChild, args: [i0.forwardRef(() => UITableView), { isSignal: true }] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class UIDashboardPanel {
+    // ── Inputs ──────────────────────────────────────────────────────
+    /** Panel configuration (id, title, grid placement, flags). */
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    // ── Outputs ─────────────────────────────────────────────────────
+    /** Emitted when the user removes (hides) this panel. */
+    panelRemoved = output();
+    /** Emitted when the collapsed state changes. */
+    collapsedChange = output();
+    // ── Computed ────────────────────────────────────────────────────
+    /** CSS `grid-column` value derived from placement config. */
+    gridColumn = computed(() => {
+        const span = this.config().placement?.colSpan ?? 1;
+        return span > 1 ? `span ${span}` : undefined;
+    }, ...(ngDevMode ? [{ debugName: "gridColumn" }] : []));
+    /** CSS `grid-row` value derived from placement config. */
+    gridRow = computed(() => {
+        const span = this.config().placement?.rowSpan ?? 1;
+        return span > 1 ? `span ${span}` : undefined;
+    }, ...(ngDevMode ? [{ debugName: "gridRow" }] : []));
+    /** Whether the panel header shows a collapse toggle. */
+    isCollapsible = computed(() => this.config().collapsible === true, ...(ngDevMode ? [{ debugName: "isCollapsible" }] : []));
+    /** Whether the panel header shows a remove button. */
+    isRemovable = computed(() => this.config().removable === true, ...(ngDevMode ? [{ debugName: "isRemovable" }] : []));
+    /** SVG icon for the collapse toggle button. */
+    collapseIcon = computed(() => this.collapsed()
+        ? UIIcons.Lucide.Arrows.ChevronRight
+        : UIIcons.Lucide.Arrows.ChevronDown, ...(ngDevMode ? [{ debugName: "collapseIcon" }] : []));
+    /** SVG icon for the remove button. */
+    removeIcon = UIIcons.Lucide.Math.X;
+    // ── Public fields ───────────────────────────────────────────────
+    /** Whether the panel body is currently collapsed. */
+    collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    /** Whether the panel has been removed (hidden) by the user. */
+    removed = signal(false, ...(ngDevMode ? [{ debugName: "removed" }] : []));
+    /** Whether the panel currently has an active notification. */
+    notified = signal(false, ...(ngDevMode ? [{ debugName: "notified" }] : []));
+    // ── Private fields ──────────────────────────────────────────────
+    log = inject(LoggerFactory).createLogger("UIDashboardPanel");
+    destroyRef = inject(DestroyRef);
+    notificationTimer = null;
+    // ── Public methods ──────────────────────────────────────────────
+    constructor() {
+        this.destroyRef.onDestroy(() => this.clearNotificationTimer());
+    }
+    // ── Public methods ──────────────────────────────────────────────
+    /**
+     * 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 = 0) {
+        this.clearNotificationTimer();
+        this.notified.set(true);
+        this.log.debug("Panel notified", [this.config().id, timeoutMs]);
+        if (timeoutMs > 0) {
+            this.notificationTimer = setTimeout(() => {
+                this.clearNotification();
+            }, timeoutMs);
+        }
+    }
+    /** Clear the active notification. */
+    clearNotification() {
+        this.clearNotificationTimer();
+        this.notified.set(false);
+    }
+    /** Toggle the collapsed state. */
+    toggleCollapse() {
+        if (!this.isCollapsible())
+            return;
+        this.collapsed.update((v) => !v);
+        this.collapsedChange.emit(this.collapsed());
+        // Expanding a panel clears its notification
+        if (!this.collapsed()) {
+            this.clearNotification();
+        }
+        this.log.debug("Panel collapse toggled", [
+            this.config().id,
+            this.collapsed(),
+        ]);
+    }
+    /** Remove (hide) the panel. */
+    remove() {
+        if (!this.isRemovable())
+            return;
+        this.removed.set(true);
+        this.panelRemoved.emit(this.config().id);
+        this.log.debug("Panel removed", [this.config().id]);
+    }
+    /** Restore a previously removed panel. */
+    restore() {
+        this.removed.set(false);
+        this.log.debug("Panel restored", [this.config().id]);
+    }
+    // ── Private methods ─────────────────────────────────────────────
+    clearNotificationTimer() {
+        if (this.notificationTimer !== null) {
+            clearTimeout(this.notificationTimer);
+            this.notificationTimer = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIDashboardPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIDashboardPanel, isStandalone: true, selector: "ui-dashboard-panel", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { panelRemoved: "panelRemoved", collapsedChange: "collapsedChange" }, host: { properties: { "class.collapsed": "collapsed()", "class.removed": "removed()", "class.notified": "notified()", "style.grid-column": "gridColumn()", "style.grid-row": "gridRow()", "attr.data-panel-id": "config().id" }, classAttribute: "ui-dashboard-panel" }, providers: [{ provide: UI_DEFAULT_SURFACE_TYPE, useValue: "panel" }], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "<header class=\"header\">\n  <div class=\"heading\">\n    @if (config().icon) {\n      <ui-icon [svg]=\"config().icon!\" [size]=\"14\" class=\"icon\" />\n    }\n    <h3 class=\"title\">{{ config().title }}</h3>\n  </div>\n\n  <div class=\"actions\">\n    @if (isCollapsible()) {\n      <button\n        type=\"button\"\n        class=\"action\"\n        [attr.aria-label]=\"collapsed() ? 'Expand panel' : 'Collapse panel'\"\n        [attr.aria-expanded]=\"!collapsed()\"\n        (click)=\"toggleCollapse()\"\n      >\n        <ui-icon [svg]=\"collapseIcon()\" [size]=\"14\" />\n      </button>\n    }\n    @if (isRemovable()) {\n      <button\n        type=\"button\"\n        class=\"action action--remove\"\n        aria-label=\"Remove panel\"\n        (click)=\"remove()\"\n      >\n        <ui-icon [svg]=\"removeIcon\" [size]=\"14\" />\n      </button>\n    }\n  </div>\n</header>\n\n@if (!collapsed()) {\n  <div class=\"body\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{--ui-panel-radius: 8px;--ui-panel-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .06);display:flex;flex-direction:column;border-radius:var(--ui-panel-radius);overflow:hidden;min-width:0;min-height:0}:host.removed{display:none}:host-context(html.dark-theme){--ui-panel-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2)}@media(prefers-color-scheme:dark){:host-context(html:not(.light-theme):not(.dark-theme)){--ui-panel-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2)}}.header{display:flex;align-items:center;justify-content:space-between;padding:.625rem .875rem;flex-shrink:0}.heading{display:flex;align-items:center;gap:6px;min-width:0}.icon{flex-shrink:0}.title{margin:0;font-size:.82rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.actions{display:flex;align-items:center;gap:2px;flex-shrink:0;margin-left:.5rem}.action{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:4px;font-size:.7rem;transition:background-color .15s,color .15s}.body{flex:1;overflow:auto;padding:.875rem;min-height:0}:host(.collapsed){display:none}:host(.notified){animation:ui-panel-pulse 2s ease-in-out infinite}:host(.notified) .icon{animation:ui-icon-pulse 2s ease-in-out infinite}@keyframes ui-icon-pulse{0%,to{opacity:1}50%{opacity:.5}}\n"], dependencies: [{ kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["svg", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIDashboardPanel, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-dashboard-panel", standalone: true, imports: [UIIcon], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }], providers: [{ provide: UI_DEFAULT_SURFACE_TYPE, useValue: "panel" }], host: {
+                        class: "ui-dashboard-panel",
+                        "[class.collapsed]": "collapsed()",
+                        "[class.removed]": "removed()",
+                        "[class.notified]": "notified()",
+                        "[style.grid-column]": "gridColumn()",
+                        "[style.grid-row]": "gridRow()",
+                        "[attr.data-panel-id]": "config().id",
+                    }, template: "<header class=\"header\">\n  <div class=\"heading\">\n    @if (config().icon) {\n      <ui-icon [svg]=\"config().icon!\" [size]=\"14\" class=\"icon\" />\n    }\n    <h3 class=\"title\">{{ config().title }}</h3>\n  </div>\n\n  <div class=\"actions\">\n    @if (isCollapsible()) {\n      <button\n        type=\"button\"\n        class=\"action\"\n        [attr.aria-label]=\"collapsed() ? 'Expand panel' : 'Collapse panel'\"\n        [attr.aria-expanded]=\"!collapsed()\"\n        (click)=\"toggleCollapse()\"\n      >\n        <ui-icon [svg]=\"collapseIcon()\" [size]=\"14\" />\n      </button>\n    }\n    @if (isRemovable()) {\n      <button\n        type=\"button\"\n        class=\"action action--remove\"\n        aria-label=\"Remove panel\"\n        (click)=\"remove()\"\n      >\n        <ui-icon [svg]=\"removeIcon\" [size]=\"14\" />\n      </button>\n    }\n  </div>\n</header>\n\n@if (!collapsed()) {\n  <div class=\"body\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{--ui-panel-radius: 8px;--ui-panel-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .06);display:flex;flex-direction:column;border-radius:var(--ui-panel-radius);overflow:hidden;min-width:0;min-height:0}:host.removed{display:none}:host-context(html.dark-theme){--ui-panel-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2)}@media(prefers-color-scheme:dark){:host-context(html:not(.light-theme):not(.dark-theme)){--ui-panel-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2)}}.header{display:flex;align-items:center;justify-content:space-between;padding:.625rem .875rem;flex-shrink:0}.heading{display:flex;align-items:center;gap:6px;min-width:0}.icon{flex-shrink:0}.title{margin:0;font-size:.82rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.actions{display:flex;align-items:center;gap:2px;flex-shrink:0;margin-left:.5rem}.action{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:4px;font-size:.7rem;transition:background-color .15s,color .15s}.body{flex:1;overflow:auto;padding:.875rem;min-height:0}:host(.collapsed){display:none}:host(.notified){animation:ui-panel-pulse 2s ease-in-out infinite}:host(.notified) .icon{animation:ui-icon-pulse 2s ease-in-out infinite}@keyframes ui-icon-pulse{0%,to{opacity:1}50%{opacity:.5}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], panelRemoved: [{ type: i0.Output, args: ["panelRemoved"] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class UIDashboard {
+    // ── Inputs ──────────────────────────────────────────────────────
+    /**
+     * 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'`.
+     */
+    columns = input("auto", ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    /**
+     * Gap between grid cells in pixels.
+     * Defaults to `16`.
+     */
+    gap = input(16, ...(ngDevMode ? [{ debugName: "gap" }] : []));
+    /**
+     * Minimum column width in pixels (only used when `columns` is `'auto'`).
+     * Defaults to `280`.
+     */
+    minColumnWidth = input(280, ...(ngDevMode ? [{ debugName: "minColumnWidth" }] : []));
+    /** Accessible label for the dashboard region. */
+    ariaLabel = input("Dashboard", ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * Where the collapsed-panel dock is rendered.
+     * Defaults to `'bottom'`.
+     */
+    dockPosition = input("bottom", ...(ngDevMode ? [{ debugName: "dockPosition" }] : []));
+    /**
+     * Whether dock chips show the panel title alongside the icon.
+     * Defaults to `false` (icon-only with title in tooltip).
+     */
+    dockShowTitles = input(false, ...(ngDevMode ? [{ debugName: "dockShowTitles" }] : []));
+    /**
+     * Default SVG icon for panels that don't declare their own `icon`.
+     * Defaults to the Lucide `LayoutDashboard` icon.
+     */
+    defaultDockIcon = input(UIIcons.Lucide.Layout.LayoutDashboard, ...(ngDevMode ? [{ debugName: "defaultDockIcon" }] : []));
+    /**
+     * 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.
+     */
+    dockMenuIcon = input(undefined, ...(ngDevMode ? [{ debugName: "dockMenuIcon" }] : []));
+    // ── Outputs ─────────────────────────────────────────────────────
+    /** Emitted when any panel is removed by the user. */
+    panelRemoved = output();
+    /** Emitted when the dock menu button is clicked. */
+    dockMenuClicked = output();
+    // ── Content queries ─────────────────────────────────────────────
+    /** All projected dashboard panels. */
+    panels = contentChildren(UIDashboardPanel, ...(ngDevMode ? [{ debugName: "panels" }] : []));
+    // ── Computed ────────────────────────────────────────────────────
+    /** CSS value for `grid-template-columns`. */
+    gridTemplateColumns = computed(() => {
+        const cols = this.columns();
+        if (cols === "auto") {
+            return `repeat(auto-fill, minmax(${this.minColumnWidth()}px, 1fr))`;
+        }
+        return `repeat(${cols}, 1fr)`;
+    }, ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : []));
+    /** CSS value for `gap`. */
+    gridGap = computed(() => `${this.gap()}px`, ...(ngDevMode ? [{ debugName: "gridGap" }] : []));
+    /** Panels that have been removed by the user. */
+    removedPanelIds = computed(() => this.panels()
+        .filter((p) => p.removed())
+        .map((p) => p.config().id), ...(ngDevMode ? [{ debugName: "removedPanelIds" }] : []));
+    /** Panels that are currently collapsed (shown in the dock). */
+    collapsedPanels = computed(() => this.panels().filter((p) => p.collapsed() && !p.removed()), ...(ngDevMode ? [{ debugName: "collapsedPanels" }] : []));
+    // ── Public fields ───────────────────────────────────────────────
+    /** Whether the dock panel-picker menu is open. */
+    dockMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "dockMenuOpen" }] : []));
+    // ── Protected fields ────────────────────────────────────────────
+    // ── Private fields ──────────────────────────────────────────────
+    log = inject(LoggerFactory).createLogger("UIDashboard");
+    destroyRef = inject(DestroyRef);
+    elRef = inject((ElementRef));
+    /** Subscriptions to panel `panelRemoved` outputs. */
+    panelSubs = [];
+    // ── Constructor ─────────────────────────────────────────────────
+    constructor() {
+        // Close dock menu on outside click
+        const onDocClick = (e) => {
+            if (this.dockMenuOpen() &&
+                !this.elRef.nativeElement
+                    .querySelector(".dock-menu-anchor")
+                    ?.contains(e.target)) {
+                this.dockMenuOpen.set(false);
+            }
+        };
+        document.addEventListener("pointerdown", onDocClick);
+        this.destroyRef.onDestroy(() => document.removeEventListener("pointerdown", onDocClick));
+        // Whenever the projected panels change, subscribe to their
+        // panelRemoved outputs so the host can re-emit them.
+        effect(() => {
+            const panels = this.panels();
+            untracked(() => {
+                // Tear down previous subscriptions
+                for (const unsub of this.panelSubs) {
+                    unsub();
+                }
+                this.panelSubs = [];
+                for (const panel of panels) {
+                    const sub = panel.panelRemoved.subscribe((id) => {
+                        this.panelRemoved.emit(id);
+                    });
+                    this.panelSubs.push(() => sub.unsubscribe());
+                }
+            });
+        });
+        // Clean up on destroy
+        this.destroyRef.onDestroy(() => {
+            for (const unsub of this.panelSubs) {
+                unsub();
+            }
+            this.panelSubs = [];
+        });
+    }
+    // ── Public methods ──────────────────────────────────────────────
+    /**
+     * 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) {
+        const panel = this.panels().find((p) => p.config().id === panelId);
+        if (panel) {
+            panel.restore();
+            this.log.debug("Panel restored via host", [panelId]);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Restore all removed panels.
+     */
+    restoreAll() {
+        for (const panel of this.panels()) {
+            if (panel.removed()) {
+                panel.restore();
+            }
+        }
+        this.log.debug("All panels restored");
+    }
+    /**
+     * 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.
+     */
+    resolveIcon(panelIcon) {
+        return panelIcon ?? this.defaultDockIcon();
+    }
+    /** Toggle the dock panel-picker menu. */
+    toggleDockMenu() {
+        this.dockMenuOpen.update((v) => !v);
+        this.dockMenuClicked.emit();
+    }
+    /** Close the dock panel-picker menu. */
+    closeDockMenu() {
+        this.dockMenuOpen.set(false);
+    }
+    /**
+     * Toggle a panel's collapsed state from the menu.
+     * If removed, restore it first.
+     */
+    menuTogglePanel(panel) {
+        if (panel.removed()) {
+            panel.restore();
+        }
+        else if (panel.collapsed()) {
+            panel.toggleCollapse();
+        }
+        else if (panel.config().collapsible) {
+            panel.toggleCollapse();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIDashboard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIDashboard, isStandalone: true, selector: "ui-dashboard", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dockPosition: { classPropertyName: "dockPosition", publicName: "dockPosition", isSignal: true, isRequired: false, transformFunction: null }, dockShowTitles: { classPropertyName: "dockShowTitles", publicName: "dockShowTitles", isSignal: true, isRequired: false, transformFunction: null }, defaultDockIcon: { classPropertyName: "defaultDockIcon", publicName: "defaultDockIcon", isSignal: true, isRequired: false, transformFunction: null }, dockMenuIcon: { classPropertyName: "dockMenuIcon", publicName: "dockMenuIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelRemoved: "panelRemoved", dockMenuClicked: "dockMenuClicked" }, host: { classAttribute: "ui-dashboard" }, queries: [{ propertyName: "panels", predicate: UIDashboardPanel, isSignal: true }], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "@if (dockPosition() === 'top') {\n  <div class=\"dock\" role=\"toolbar\" aria-label=\"Dashboard dock\">\n    @if (dockMenuIcon()) {\n      <div class=\"anchor\">\n        <button\n          type=\"button\"\n          class=\"menu-btn\"\n          [class.menu-btn--active]=\"dockMenuOpen()\"\n          aria-label=\"Dashboard menu\"\n          [attr.aria-expanded]=\"dockMenuOpen()\"\n          aria-haspopup=\"menu\"\n          (click)=\"toggleDockMenu()\"\n        >\n          <ui-icon [svg]=\"dockMenuIcon()!\" [size]=\"16\" />\n        </button>\n        @if (dockMenuOpen()) {\n          <div class=\"menu\" role=\"menu\" aria-label=\"Panel picker\">\n            @for (panel of panels(); track panel.config().id) {\n              <button\n                type=\"button\"\n                class=\"item\"\n                [class.item--hidden]=\"panel.collapsed() || panel.removed()\"\n                role=\"menuitem\"\n                (click)=\"menuTogglePanel(panel)\"\n              >\n                <ui-icon\n                  [svg]=\"resolveIcon(panel.config().icon)\"\n                  [size]=\"14\"\n                  class=\"item-icon\"\n                />\n                <span class=\"item-label\">{{ panel.config().title }}</span>\n                @if (panel.collapsed() || panel.removed()) {\n                  <span class=\"item-badge\">hidden</span>\n                }\n              </button>\n            }\n            <ng-content select=\"[dockMenuItem]\" />\n          </div>\n        }\n      </div>\n      @if (collapsedPanels().length > 0) {\n        <span class=\"separator\" aria-hidden=\"true\"></span>\n      }\n    }\n    @for (panel of collapsedPanels(); track panel.config().id) {\n      <button\n        type=\"button\"\n        class=\"chip\"\n        [class.chip--notified]=\"panel.notified()\"\n        [attr.title]=\"panel.config().title\"\n        [attr.aria-label]=\"'Restore ' + panel.config().title\"\n        (click)=\"panel.toggleCollapse()\"\n      >\n        <ui-icon [svg]=\"resolveIcon(panel.config().icon)\" [size]=\"16\" />\n        @if (dockShowTitles()) {\n          <span class=\"chip-label\">{{ panel.config().title }}</span>\n        }\n      </button>\n    }\n  </div>\n}\n\n<div\n  class=\"grid\"\n  [style.grid-template-columns]=\"gridTemplateColumns()\"\n  [style.gap]=\"gridGap()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"region\"\n>\n  <ng-content />\n</div>\n\n@if (dockPosition() === 'bottom') {\n  <div class=\"dock\" role=\"toolbar\" aria-label=\"Dashboard dock\">\n    @if (dockMenuIcon()) {\n      <div class=\"anchor\">\n        <button\n          type=\"button\"\n          class=\"menu-btn\"\n          [class.menu-btn--active]=\"dockMenuOpen()\"\n          aria-label=\"Dashboard menu\"\n          [attr.aria-expanded]=\"dockMenuOpen()\"\n          aria-haspopup=\"menu\"\n          (click)=\"toggleDockMenu()\"\n        >\n          <ui-icon [svg]=\"dockMenuIcon()!\" [size]=\"16\" />\n        </button>\n        @if (dockMenuOpen()) {\n          <div class=\"menu menu--above\" role=\"menu\" aria-label=\"Panel picker\">\n            @for (panel of panels(); track panel.config().id) {\n              <button\n                type=\"button\"\n                class=\"item\"\n                [class.item--hidden]=\"panel.collapsed() || panel.removed()\"\n                role=\"menuitem\"\n                (click)=\"menuTogglePanel(panel)\"\n              >\n                <ui-icon\n                  [svg]=\"resolveIcon(panel.config().icon)\"\n                  [size]=\"14\"\n                  class=\"item-icon\"\n                />\n                <span class=\"item-label\">{{ panel.config().title }}</span>\n                @if (panel.collapsed() || panel.removed()) {\n                  <span class=\"item-badge\">hidden</span>\n                }\n              </button>\n            }\n            <ng-content select=\"[dockMenuItem]\" />\n          </div>\n        }\n      </div>\n      @if (collapsedPanels().length > 0) {\n        <span class=\"separator\" aria-hidden=\"true\"></span>\n      }\n    }\n    @for (panel of collapsedPanels(); track panel.config().id) {\n      <button\n        type=\"button\"\n        class=\"chip\"\n        [class.chip--notified]=\"panel.notified()\"\n        [attr.title]=\"panel.config().title\"\n        [attr.aria-label]=\"'Restore ' + panel.config().title\"\n        (click)=\"panel.toggleCollapse()\"\n      >\n        <ui-icon [svg]=\"resolveIcon(panel.config().icon)\" [size]=\"16\" />\n        @if (dockShowTitles()) {\n          <span class=\"chip-label\">{{ panel.config().title }}</span>\n        }\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:system-ui,-apple-system,sans-serif}.grid{display:grid;grid-auto-rows:minmax(120px,auto)}.dock{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;margin-top:12px}.dock:first-child{margin-top:0;margin-bottom:12px}.chip{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;font-size:.78rem;font-weight:500;white-space:nowrap;transition:background-color .15s,box-shadow .15s}.chip-label{line-height:1}.chip--notified{animation:ui-dock-chip-pulse 2s ease-in-out infinite}.chip--notified ui-icon{animation:ui-dock-icon-pulse 2s ease-in-out infinite}@keyframes ui-dock-icon-pulse{0%,to{opacity:1}50%{opacity:.5}}.menu-btn{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:inline-flex;align-items:center;justify-content:center;padding:6px;border-radius:6px;transition:background-color .15s,color .15s}.separator{width:1px;height:20px;flex-shrink:0}.anchor{position:relative}.menu{position:absolute;top:calc(100% + 6px);left:0;z-index:100;min-width:200px;padding:4px;border-radius:8px}.menu--above{top:auto;bottom:calc(100% + 6px)}.menu hr{border:none;height:1px;margin:4px 0}.item{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:6px;font-size:.8rem;font-weight:500;white-space:nowrap;text-align:left;transition:background-color .15s}.item--hidden{opacity:.5}.item--disabled{opacity:.4;pointer-events:none}.item-icon{flex-shrink:0}.item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.item-badge{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:4px;opacity:.7}\n"], dependencies: [{ kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["svg", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIDashboard, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-dashboard", standalone: true, imports: [UIIcon], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ['surfaceType'] }], host: {
+                        class: "ui-dashboard",
+                    }, template: "@if (dockPosition() === 'top') {\n  <div class=\"dock\" role=\"toolbar\" aria-label=\"Dashboard dock\">\n    @if (dockMenuIcon()) {\n      <div class=\"anchor\">\n        <button\n          type=\"button\"\n          class=\"menu-btn\"\n          [class.menu-btn--active]=\"dockMenuOpen()\"\n          aria-label=\"Dashboard menu\"\n          [attr.aria-expanded]=\"dockMenuOpen()\"\n          aria-haspopup=\"menu\"\n          (click)=\"toggleDockMenu()\"\n        >\n          <ui-icon [svg]=\"dockMenuIcon()!\" [size]=\"16\" />\n        </button>\n        @if (dockMenuOpen()) {\n          <div class=\"menu\" role=\"menu\" aria-label=\"Panel picker\">\n            @for (panel of panels(); track panel.config().id) {\n              <button\n                type=\"button\"\n                class=\"item\"\n                [class.item--hidden]=\"panel.collapsed() || panel.removed()\"\n                role=\"menuitem\"\n                (click)=\"menuTogglePanel(panel)\"\n              >\n                <ui-icon\n                  [svg]=\"resolveIcon(panel.config().icon)\"\n                  [size]=\"14\"\n                  class=\"item-icon\"\n                />\n                <span class=\"item-label\">{{ panel.config().title }}</span>\n                @if (panel.collapsed() || panel.removed()) {\n                  <span class=\"item-badge\">hidden</span>\n                }\n              </button>\n            }\n            <ng-content select=\"[dockMenuItem]\" />\n          </div>\n        }\n      </div>\n      @if (collapsedPanels().length > 0) {\n        <span class=\"separator\" aria-hidden=\"true\"></span>\n      }\n    }\n    @for (panel of collapsedPanels(); track panel.config().id) {\n      <button\n        type=\"button\"\n        class=\"chip\"\n        [class.chip--notified]=\"panel.notified()\"\n        [attr.title]=\"panel.config().title\"\n        [attr.aria-label]=\"'Restore ' + panel.config().title\"\n        (click)=\"panel.toggleCollapse()\"\n      >\n        <ui-icon [svg]=\"resolveIcon(panel.config().icon)\" [size]=\"16\" />\n        @if (dockShowTitles()) {\n          <span class=\"chip-label\">{{ panel.config().title }}</span>\n        }\n      </button>\n    }\n  </div>\n}\n\n<div\n  class=\"grid\"\n  [style.grid-template-columns]=\"gridTemplateColumns()\"\n  [style.gap]=\"gridGap()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"region\"\n>\n  <ng-content />\n</div>\n\n@if (dockPosition() === 'bottom') {\n  <div class=\"dock\" role=\"toolbar\" aria-label=\"Dashboard dock\">\n    @if (dockMenuIcon()) {\n      <div class=\"anchor\">\n        <button\n          type=\"button\"\n          class=\"menu-btn\"\n          [class.menu-btn--active]=\"dockMenuOpen()\"\n          aria-label=\"Dashboard menu\"\n          [attr.aria-expanded]=\"dockMenuOpen()\"\n          aria-haspopup=\"menu\"\n          (click)=\"toggleDockMenu()\"\n        >\n          <ui-icon [svg]=\"dockMenuIcon()!\" [size]=\"16\" />\n        </button>\n        @if (dockMenuOpen()) {\n          <div class=\"menu menu--above\" role=\"menu\" aria-label=\"Panel picker\">\n            @for (panel of panels(); track panel.config().id) {\n              <button\n                type=\"button\"\n                class=\"item\"\n                [class.item--hidden]=\"panel.collapsed() || panel.removed()\"\n                role=\"menuitem\"\n                (click)=\"menuTogglePanel(panel)\"\n              >\n                <ui-icon\n                  [svg]=\"resolveIcon(panel.config().icon)\"\n                  [size]=\"14\"\n                  class=\"item-icon\"\n                />\n                <span class=\"item-label\">{{ panel.config().title }}</span>\n                @if (panel.collapsed() || panel.removed()) {\n                  <span class=\"item-badge\">hidden</span>\n                }\n              </button>\n            }\n            <ng-content select=\"[dockMenuItem]\" />\n          </div>\n        }\n      </div>\n      @if (collapsedPanels().length > 0) {\n        <span class=\"separator\" aria-hidden=\"true\"></span>\n      }\n    }\n    @for (panel of collapsedPanels(); track panel.config().id) {\n      <button\n        type=\"button\"\n        class=\"chip\"\n        [class.chip--notified]=\"panel.notified()\"\n        [attr.title]=\"panel.config().title\"\n        [attr.aria-label]=\"'Restore ' + panel.config().title\"\n        (click)=\"panel.toggleCollapse()\"\n      >\n        <ui-icon [svg]=\"resolveIcon(panel.config().icon)\" [size]=\"16\" />\n        @if (dockShowTitles()) {\n          <span class=\"chip-label\">{{ panel.config().title }}</span>\n        }\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:system-ui,-apple-system,sans-serif}.grid{display:grid;grid-auto-rows:minmax(120px,auto)}.dock{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;margin-top:12px}.dock:first-child{margin-top:0;margin-bottom:12px}.chip{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;font-size:.78rem;font-weight:500;white-space:nowrap;transition:background-color .15s,box-shadow .15s}.chip-label{line-height:1}.chip--notified{animation:ui-dock-chip-pulse 2s ease-in-out infinite}.chip--notified ui-icon{animation:ui-dock-icon-pulse 2s ease-in-out infinite}@keyframes ui-dock-icon-pulse{0%,to{opacity:1}50%{opacity:.5}}.menu-btn{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:inline-flex;align-items:center;justify-content:center;padding:6px;border-radius:6px;transition:background-color .15s,color .15s}.separator{width:1px;height:20px;flex-shrink:0}.anchor{position:relative}.menu{position:absolute;top:calc(100% + 6px);left:0;z-index:100;min-width:200px;padding:4px;border-radius:8px}.menu--above{top:auto;bottom:calc(100% + 6px)}.menu hr{border:none;height:1px;margin:4px 0}.item{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:6px;font-size:.8rem;font-weight:500;white-space:nowrap;text-align:left;transition:background-color .15s}.item--hidden{opacity:.5}.item--disabled{opacity:.4;pointer-events:none}.item-icon{flex-shrink:0}.item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.item-badge{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:4px;opacity:.7}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dockPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dockPosition", required: false }] }], dockShowTitles: [{ type: i0.Input, args: [{ isSignal: true, alias: "dockShowTitles", required: false }] }], defaultDockIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultDockIcon", required: false }] }], dockMenuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dockMenuIcon", required: false }] }], panelRemoved: [{ type: i0.Output, args: ["panelRemoved"] }], dockMenuClicked: [{ type: i0.Output, args: ["dockMenuClicked"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UIDashboardPanel), { isSignal: true }] }] } });
+
+// ── Component ────────────────────────────────────────────────────────
+/**
+ * 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>
+ * ```
+ */
+class UINavigationPage {
+    // ── Inputs ──────────────────────────────────────────────────────────
+    /**
+     * 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.
+     */
+    datasource = input(undefined, ...(ngDevMode ? [{ debugName: "datasource" }] : []));
+    /**
+     * 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.
+     */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /**
+     * Root breadcrumb label displayed as the first item in the trail.
+     * Clicking it navigates to the first leaf node.
+     */
+    rootLabel = input("Home", ...(ngDevMode ? [{ debugName: "rootLabel" }] : []));
+    /** Side the drawer slides in from. */
+    drawerPosition = input("left", ...(ngDevMode ? [{ debugName: "drawerPosition" }] : []));
+    /** Width of the drawer panel. */
+    drawerWidth = input("medium", ...(ngDevMode ? [{ debugName: "drawerWidth" }] : []));
+    /** Visual style for the breadcrumb trail. */
+    breadcrumbVariant = input("button", ...(ngDevMode ? [{ debugName: "breadcrumbVariant" }] : []));
+    /** Accessible label for the navigation landmark. */
+    ariaLabel = input("Page navigation", ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Whether the drawer should always be visible (desktop layout). */
+    sidebarPinned = input(true, ...(ngDevMode ? [{ debugName: "sidebarPinned" }] : []));
+    /** Whether to show the sidebar toggle button before the breadcrumb. */
+    showSidebarToggle = input(true, ...(ngDevMode ? [{ debugName: "showSidebarToggle" }] : []));
+    /**
+     * 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.
+     */
+    storageKey = input("", ...(ngDevMode ? [{ debugName: "storageKey" }] : []));
+    // ── Models ──────────────────────────────────────────────────────────
+    /** The currently active node id. Supports two-way binding. */
+    activePage = model("", ...(ngDevMode ? [{ debugName: "activePage" }] : []));
+    /** Whether the drawer is open (when not pinned). Supports two-way binding. */
+    drawerOpen = model(false, ...(ngDevMode ? [{ debugName: "drawerOpen" }] : []));
+    /** Whether the sidebar panel is visible. Supports two-way binding. Defaults to shown. */
+    sidebarVisible = model(true, ...(ngDevMode ? [{ debugName: "sidebarVisible" }] : []));
+    // ── Outputs ─────────────────────────────────────────────────────────
+    /** Emitted when the user navigates to a node. */
+    navigated = output();
+    // ── Content queries ─────────────────────────────────────────────────
+    /**
+     * 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>
+     * ```
+     */
+    contentTemplate = contentChild("content", ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
+    /** Projected sidebar items for custom content above the generated items. */
+    projectedItems = contentChildren(UISidebarItem, ...(ngDevMode ? [{ debugName: "projectedItems" }] : []));
+    // ── Computed ────────────────────────────────────────────────────────
+    /** Icon for the sidebar toggle button. @internal */
+    sidebarToggleIcon = computed(() => this.sidebarVisible()
+        ? UIIcons.Lucide.Arrows.PanelLeftClose
+        : UIIcons.Lucide.Arrows.PanelLeftOpen, ...(ngDevMode ? [{ debugName: "sidebarToggleIcon" }] : []));
+    // ── Private fields ──────────────────────────────────────────────────
+    storage = inject(StorageService);
+    // ── Lifecycle ───────────────────────────────────────────────────────
+    ngOnInit() {
+        const key = this.storageKey();
+        if (key) {
+            const stored = this.storage.getItem(key);
+            if (stored !== null) {
+                this.sidebarVisible.set(stored === "true");
+            }
+        }
+    }
+    // ── Public methods ──────────────────────────────────────────────────
+    /** Toggle the sidebar and persist the new state to storage. */
+    toggleSidebar() {
+        const next = !this.sidebarVisible();
+        this.sidebarVisible.set(next);
+        const key = this.storageKey();
+        if (key) {
+            this.storage.setItem(key, String(next));
+        }
+    }
+    /** Resolved datasource — from the input or auto-created from items. */
+    resolvedDatasource = computed(() => {
+        const ds = this.datasource();
+        if (ds) {
+            return ds;
+        }
+        return new ArrayTreeDatasource(this.items());
+    }, ...(ngDevMode ? [{ debugName: "resolvedDatasource" }] : []));
+    /** Root nodes from the resolved datasource. */
+    rootNodes = computed(() => {
+        const ds = this.resolvedDatasource();
+        const roots = ds.getRootNodes();
+        // Support only synchronous datasources for now
+        return Array.isArray(roots) ? roots : [];
+    }, ...(ngDevMode ? [{ debugName: "rootNodes" }] : []));
+    /** The currently active navigation node. */
+    currentPage = computed(() => {
+        const id = this.activePage();
+        return this.findNodeById(id, this.rootNodes()) ?? this.firstLeaf();
+    }, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    /** Breadcrumb trail derived from the active node and its ancestors. */
+    breadcrumbItems = computed(() => {
+        const current = this.currentPage();
+        if (!current) {
+            return [{ label: this.rootLabel() }];
+        }
+        const items = [{ label: this.rootLabel(), url: "/" }];
+        // If the node is a child of a group, add the group crumb
+        const parent = this.findParent(current.id, this.rootNodes());
+        if (parent) {
+            items.push({ label: parent.data.label });
+        }
+        items.push({ label: current.data.label });
+        return items;
+    }, ...(ngDevMode ? [{ debugName: "breadcrumbItems" }] : []));
+    // ── Public methods ──────────────────────────────────────────────────
+    /** Navigate to a node by its tree-node reference. */
+    navigate(node) {
+        if (node.disabled) {
+            return;
+        }
+        this.activePage.set(node.id);
+        this.navigated.emit(node);
+        // Auto-close drawer on navigation when not pinned
+        if (!this.sidebarPinned()) {
+            this.drawerOpen.set(false);
+        }
+    }
+    /** Navigate to the first leaf node (root breadcrumb click handler). */
+    navigateToRoot() {
+        const first = this.firstLeaf();
+        if (first) {
+            this.navigate(first);
+        }
+    }
+    /** @internal Handle breadcrumb item clicks. */
+    onBreadcrumbClick(item) {
+        if (item.url === "/") {
+            this.navigateToRoot();
+            return;
+        }
+        // Try to find a node matching the breadcrumb label
+        const node = this.findNodeByLabel(item.label, this.rootNodes());
+        if (node) {
+            this.navigate(node);
+        }
+    }
+    // ── Private helpers ─────────────────────────────────────────────────
+    /**
+     * Finds a node by `id` anywhere in the tree (depth-first).
+     * @internal
+     */
+    findNodeById(id, nodes) {
+        for (const node of nodes) {
+            if (node.id === id) {
+                return node;
+            }
+            if (node.children?.length) {
+                const found = this.findNodeById(id, node.children);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Finds a node by `data.label` anywhere in the tree (depth-first).
+     * @internal
+     */
+    findNodeByLabel(label, nodes) {
+        for (const node of nodes) {
+            if (node.data.label === label) {
+                return node;
+            }
+            if (node.children?.length) {
+                const found = this.findNodeByLabel(label, node.children);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Finds the parent node of a given child `id`.
+     * @internal
+     */
+    findParent(childId, nodes) {
+        for (const node of nodes) {
+            if (node.children?.some((c) => c.id === childId)) {
+                return node;
+            }
+            if (node.children?.length) {
+                const found = this.findParent(childId, node.children);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Returns the first leaf node (no children) in the tree.
+     * @internal
+     */
+    firstLeaf() {
+        const roots = this.rootNodes();
+        for (const node of roots) {
+            if (!node.children?.length) {
+                return node;
+            }
+            // First child of a group
+            const leaf = node.children.find((c) => !c.children?.length);
+            if (leaf) {
+                return leaf;
+            }
+        }
+        return roots[0];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UINavigationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UINavigationPage, isStandalone: true, selector: "ui-navigation-page", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, rootLabel: { classPropertyName: "rootLabel", publicName: "rootLabel", isSignal: true, isRequired: false, transformFunction: null }, drawerPosition: { classPropertyName: "drawerPosition", publicName: "drawerPosition", isSignal: true, isRequired: false, transformFunction: null }, drawerWidth: { classPropertyName: "drawerWidth", publicName: "drawerWidth", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbVariant: { classPropertyName: "breadcrumbVariant", publicName: "breadcrumbVariant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, sidebarPinned: { classPropertyName: "sidebarPinned", publicName: "sidebarPinned", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, activePage: { classPropertyName: "activePage", publicName: "activePage", isSignal: true, isRequired: false, transformFunction: null }, drawerOpen: { classPropertyName: "drawerOpen", publicName: "drawerOpen", isSignal: true, isRequired: false, transformFunction: null }, sidebarVisible: { classPropertyName: "sidebarVisible", publicName: "sidebarVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activePage: "activePageChange", drawerOpen: "drawerOpenChange", sidebarVisible: "sidebarVisibleChange", navigated: "navigated" }, host: { properties: { "class.drawer-open": "drawerOpen()", "class.sidebar-hidden": "!sidebarVisible()" }, classAttribute: "ui-navigation-page" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "projectedItems", predicate: UISidebarItem, isSignal: true }], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "<div class=\"layout\">\n  <!-- Sidebar (pinned or inside drawer) -->\n  @if (sidebarPinned()) {\n    <aside class=\"sidebar\" [class.sidebar--collapsed]=\"!sidebarVisible()\">\n      <ng-content select=\"[uiSidebarHeader]\" />\n      <ui-sidebar-nav [ariaLabel]=\"ariaLabel()\">\n        <ng-content select=\"ui-sidebar-item\" />\n\n        @for (node of rootNodes(); track node.id) {\n          @if (node.children?.length) {\n            <ui-sidebar-group\n              [label]=\"node.data.label\"\n              [icon]=\"node.icon ?? ''\"\n              [expanded]=\"node.expanded ?? true\"\n            >\n              @for (child of node.children; track child.id) {\n                <ui-sidebar-item\n                  [label]=\"child.data.label\"\n                  [icon]=\"child.icon ?? ''\"\n                  [badge]=\"child.data.badge ?? ''\"\n                  [active]=\"currentPage()?.id === child.id\"\n                  [disabled]=\"child.disabled ?? false\"\n                  (activated)=\"navigate(child)\"\n                />\n              }\n            </ui-sidebar-group>\n          } @else {\n            <ui-sidebar-item\n              [label]=\"node.data.label\"\n              [icon]=\"node.icon ?? ''\"\n              [badge]=\"node.data.badge ?? ''\"\n              [active]=\"currentPage()?.id === node.id\"\n              [disabled]=\"node.disabled ?? false\"\n              (activated)=\"navigate(node)\"\n            />\n          }\n        }\n      </ui-sidebar-nav>\n      <ng-content select=\"[uiSidebarFooter]\" />\n    </aside>\n  } @else {\n    <ui-drawer\n      [(open)]=\"drawerOpen\"\n      [position]=\"drawerPosition()\"\n      [width]=\"drawerWidth()\"\n      [ariaLabel]=\"ariaLabel()\"\n    >\n      <ng-content select=\"[uiSidebarHeader]\" />\n      <ui-sidebar-nav [ariaLabel]=\"ariaLabel()\">\n        <ng-content select=\"ui-sidebar-item\" />\n\n        @for (node of rootNodes(); track node.id) {\n          @if (node.children?.length) {\n            <ui-sidebar-group\n              [label]=\"node.data.label\"\n              [icon]=\"node.icon ?? ''\"\n              [expanded]=\"node.expanded ?? true\"\n            >\n              @for (child of node.children; track child.id) {\n                <ui-sidebar-item\n                  [label]=\"child.data.label\"\n                  [icon]=\"child.icon ?? ''\"\n                  [badge]=\"child.data.badge ?? ''\"\n                  [active]=\"currentPage()?.id === child.id\"\n                  [disabled]=\"child.disabled ?? false\"\n                  (activated)=\"navigate(child)\"\n                />\n              }\n            </ui-sidebar-group>\n          } @else {\n            <ui-sidebar-item\n              [label]=\"node.data.label\"\n              [icon]=\"node.icon ?? ''\"\n              [badge]=\"node.data.badge ?? ''\"\n              [active]=\"currentPage()?.id === node.id\"\n              [disabled]=\"node.disabled ?? false\"\n              (activated)=\"navigate(node)\"\n            />\n          }\n        }\n      </ui-sidebar-nav>\n      <ng-content select=\"[uiSidebarFooter]\" />\n    </ui-drawer>\n  }\n\n  <!-- Main content area -->\n  <main class=\"main\">\n    <header class=\"breadcrumb\">\n      @if (showSidebarToggle()) {\n        <ui-button\n          class=\"sidebar-toggle\"\n          variant=\"ghost\"\n          ariaLabel=\"Toggle sidebar\"\n          (click)=\"toggleSidebar()\"\n        >\n          <ui-icon [svg]=\"sidebarToggleIcon()\" [size]=\"18\" />\n        </ui-button>\n      }\n      <ui-breadcrumb\n        surfaceType=\"panel\"\n        [items]=\"breadcrumbItems()\"\n        [variant]=\"breadcrumbVariant()\"\n        ariaLabel=\"Page breadcrumb\"\n        (itemClicked)=\"onBreadcrumbClick($event)\"\n      />\n    </header>\n\n    <div class=\"content\">\n      @if (contentTemplate(); as tpl) {\n        <ng-container\n          *ngTemplateOutlet=\"tpl; context: { $implicit: currentPage(), page: currentPage() }\"\n        />\n      } @else {\n        <ng-content />\n      }\n    </div>\n  </main>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--ui-sidebar-width: 16rem;display:block;height:100%;width:100%}.layout{display:flex;height:100%;width:100%}.sidebar{display:flex;flex-direction:column;flex-shrink:0;width:var(--ui-sidebar-width);transition:width .25s ease,opacity .2s ease;opacity:1;overflow-y:auto;overscroll-behavior:contain;min-height:0;overflow-x:hidden}.sidebar ui-sidebar-nav{flex:1;min-height:0;height:auto}.sidebar--collapsed{width:0;opacity:0;overflow:hidden}.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.breadcrumb{display:flex;align-items:center;gap:.25rem;flex-shrink:0;padding:.75rem 1.25rem}.sidebar-toggle{flex-shrink:0}.content{flex:1;padding:1.5rem;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UIButton, selector: "ui-button", inputs: ["type", "variant", "color", "size", "pill", "disabled", "ariaLabel"] }, { kind: "component", type: UIDrawer, selector: "ui-drawer", inputs: ["open", "position", "width", "closeOnBackdropClick", "closeOnEscape", "ariaLabel"], outputs: ["openChange", "closed"] }, { kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["svg", "size", "ariaLabel"] }, { kind: "component", type: UISidebarNav, selector: "ui-sidebar-nav", inputs: ["ariaLabel", "collapsed"] }, { kind: "component", type: UISidebarItem, selector: "ui-sidebar-item", inputs: ["label", "icon", "badge", "active", "disabled"], outputs: ["activated"] }, { kind: "component", type: UISidebarGroup, selector: "ui-sidebar-group", inputs: ["label", "icon", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: UIBreadcrumb, selector: "ui-breadcrumb", inputs: ["disabled", "items", "variant", "separator", "ariaLabel"], outputs: ["itemClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UINavigationPage, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-navigation-page", standalone: true, imports: [
+                        NgTemplateOutlet,
+                        UIButton,
+                        UIDrawer,
+                        UIIcon,
+                        UISidebarNav,
+                        UISidebarItem,
+                        UISidebarGroup,
+                        UIBreadcrumb,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }], host: {
+                        class: "ui-navigation-page",
+                        "[class.drawer-open]": "drawerOpen()",
+                        "[class.sidebar-hidden]": "!sidebarVisible()",
+                    }, template: "<div class=\"layout\">\n  <!-- Sidebar (pinned or inside drawer) -->\n  @if (sidebarPinned()) {\n    <aside class=\"sidebar\" [class.sidebar--collapsed]=\"!sidebarVisible()\">\n      <ng-content select=\"[uiSidebarHeader]\" />\n      <ui-sidebar-nav [ariaLabel]=\"ariaLabel()\">\n        <ng-content select=\"ui-sidebar-item\" />\n\n        @for (node of rootNodes(); track node.id) {\n          @if (node.children?.length) {\n            <ui-sidebar-group\n              [label]=\"node.data.label\"\n              [icon]=\"node.icon ?? ''\"\n              [expanded]=\"node.expanded ?? true\"\n            >\n              @for (child of node.children; track child.id) {\n                <ui-sidebar-item\n                  [label]=\"child.data.label\"\n                  [icon]=\"child.icon ?? ''\"\n                  [badge]=\"child.data.badge ?? ''\"\n                  [active]=\"currentPage()?.id === child.id\"\n                  [disabled]=\"child.disabled ?? false\"\n                  (activated)=\"navigate(child)\"\n                />\n              }\n            </ui-sidebar-group>\n          } @else {\n            <ui-sidebar-item\n              [label]=\"node.data.label\"\n              [icon]=\"node.icon ?? ''\"\n              [badge]=\"node.data.badge ?? ''\"\n              [active]=\"currentPage()?.id === node.id\"\n              [disabled]=\"node.disabled ?? false\"\n              (activated)=\"navigate(node)\"\n            />\n          }\n        }\n      </ui-sidebar-nav>\n      <ng-content select=\"[uiSidebarFooter]\" />\n    </aside>\n  } @else {\n    <ui-drawer\n      [(open)]=\"drawerOpen\"\n      [position]=\"drawerPosition()\"\n      [width]=\"drawerWidth()\"\n      [ariaLabel]=\"ariaLabel()\"\n    >\n      <ng-content select=\"[uiSidebarHeader]\" />\n      <ui-sidebar-nav [ariaLabel]=\"ariaLabel()\">\n        <ng-content select=\"ui-sidebar-item\" />\n\n        @for (node of rootNodes(); track node.id) {\n          @if (node.children?.length) {\n            <ui-sidebar-group\n              [label]=\"node.data.label\"\n              [icon]=\"node.icon ?? ''\"\n              [expanded]=\"node.expanded ?? true\"\n            >\n              @for (child of node.children; track child.id) {\n                <ui-sidebar-item\n                  [label]=\"child.data.label\"\n                  [icon]=\"child.icon ?? ''\"\n                  [badge]=\"child.data.badge ?? ''\"\n                  [active]=\"currentPage()?.id === child.id\"\n                  [disabled]=\"child.disabled ?? false\"\n                  (activated)=\"navigate(child)\"\n                />\n              }\n            </ui-sidebar-group>\n          } @else {\n            <ui-sidebar-item\n              [label]=\"node.data.label\"\n              [icon]=\"node.icon ?? ''\"\n              [badge]=\"node.data.badge ?? ''\"\n              [active]=\"currentPage()?.id === node.id\"\n              [disabled]=\"node.disabled ?? false\"\n              (activated)=\"navigate(node)\"\n            />\n          }\n        }\n      </ui-sidebar-nav>\n      <ng-content select=\"[uiSidebarFooter]\" />\n    </ui-drawer>\n  }\n\n  <!-- Main content area -->\n  <main class=\"main\">\n    <header class=\"breadcrumb\">\n      @if (showSidebarToggle()) {\n        <ui-button\n          class=\"sidebar-toggle\"\n          variant=\"ghost\"\n          ariaLabel=\"Toggle sidebar\"\n          (click)=\"toggleSidebar()\"\n        >\n          <ui-icon [svg]=\"sidebarToggleIcon()\" [size]=\"18\" />\n        </ui-button>\n      }\n      <ui-breadcrumb\n        surfaceType=\"panel\"\n        [items]=\"breadcrumbItems()\"\n        [variant]=\"breadcrumbVariant()\"\n        ariaLabel=\"Page breadcrumb\"\n        (itemClicked)=\"onBreadcrumbClick($event)\"\n      />\n    </header>\n\n    <div class=\"content\">\n      @if (contentTemplate(); as tpl) {\n        <ng-container\n          *ngTemplateOutlet=\"tpl; context: { $implicit: currentPage(), page: currentPage() }\"\n        />\n      } @else {\n        <ng-content />\n      }\n    </div>\n  </main>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--ui-sidebar-width: 16rem;display:block;height:100%;width:100%}.layout{display:flex;height:100%;width:100%}.sidebar{display:flex;flex-direction:column;flex-shrink:0;width:var(--ui-sidebar-width);transition:width .25s ease,opacity .2s ease;opacity:1;overflow-y:auto;overscroll-behavior:contain;min-height:0;overflow-x:hidden}.sidebar ui-sidebar-nav{flex:1;min-height:0;height:auto}.sidebar--collapsed{width:0;opacity:0;overflow:hidden}.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.breadcrumb{display:flex;align-items:center;gap:.25rem;flex-shrink:0;padding:.75rem 1.25rem}.sidebar-toggle{flex-shrink:0}.content{flex:1;padding:1.5rem;overflow-y:auto}\n"] }]
+        }], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], rootLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootLabel", required: false }] }], drawerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerPosition", required: false }] }], drawerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerWidth", required: false }] }], breadcrumbVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbVariant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], sidebarPinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarPinned", required: false }] }], showSidebarToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSidebarToggle", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], activePage: [{ type: i0.Input, args: [{ isSignal: true, alias: "activePage", required: false }] }, { type: i0.Output, args: ["activePageChange"] }], drawerOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerOpen", required: false }] }, { type: i0.Output, args: ["drawerOpenChange"] }], sidebarVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarVisible", required: false }] }, { type: i0.Output, args: ["sidebarVisibleChange"] }], navigated: [{ type: i0.Output, args: ["navigated"] }], contentTemplate: [{ type: i0.ContentChild, args: ["content", { isSignal: true }] }], projectedItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UISidebarItem), { isSignal: true }] }] } });
+
+// ── Factory helpers ──────────────────────────────────────────────────
+/**
+ * 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',
+ * })
+ * ```
+ */
+function navItem(id, label, options) {
+    return {
+        id,
+        data: {
+            label,
+            badge: options?.badge,
+            route: options?.route,
+        },
+        icon: options?.icon,
+        disabled: options?.disabled,
+    };
+}
+/**
+ * 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 })
+ * ```
+ */
+function navGroup(id, label, children, options) {
+    return {
+        id,
+        data: { label },
+        icon: options?.icon,
+        expanded: options?.expanded ?? true,
+        children: [...children],
+    };
+}
+/**
+ * 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);
+ * ```
+ */
+function routesToNavigation(routes, parentPath = "") {
+    const nodes = [];
+    for (const route of routes) {
+        const data = route.data;
+        if (!data?.["navLabel"]) {
+            // Skip routes without navigation metadata, but recurse into children
+            if (route.children?.length) {
+                const childPath = joinPath(parentPath, route.path);
+                nodes.push(...routesToNavigation(route.children, childPath));
+            }
+            continue;
+        }
+        const fullPath = joinPath(parentPath, route.path);
+        const children = route.children
+            ? routesToNavigation(route.children, fullPath)
+            : undefined;
+        nodes.push({
+            id: fullPath || "/",
+            data: {
+                label: data["navLabel"],
+                badge: data["navBadge"] ?? undefined,
+                route: fullPath || "/",
+            },
+            icon: data["navIcon"] ?? undefined,
+            disabled: data["navDisabled"] ?? false,
+            expanded: data["navExpanded"] ?? true,
+            children: children?.length ? children : undefined,
+        });
+    }
+    return nodes;
+}
+/** @internal Join two path segments, avoiding double slashes. */
+function joinPath(parent, segment) {
+    if (!segment) {
+        return parent;
+    }
+    if (!parent) {
+        return segment;
+    }
+    return `${parent}/${segment}`.replace(/\/+/g, "/");
+}
+
+/**
+ * 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 },
+ * ]
+ * ```
+ */
+class SavedSearchService {
+    storage = inject(StorageService);
+    /**
+     * 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) {
+        const raw = this.storage.getItem(this.prefixedKey(storageKey));
+        if (!raw)
+            return [];
+        try {
+            const parsed = JSON.parse(raw);
+            if (!Array.isArray(parsed))
+                return [];
+            return parsed;
+        }
+        catch {
+            return [];
+        }
+    }
+    /**
+     * Persist a saved search. If a search with the same `id` already
+     * exists it is replaced; otherwise the new search is appended.
+     */
+    save(storageKey, search) {
+        const list = this.list(storageKey);
+        const index = list.findIndex((s) => s.id === search.id);
+        if (index >= 0) {
+            list[index] = search;
+        }
+        else {
+            list.push(search);
+        }
+        this.persist(storageKey, list);
+    }
+    /**
+     * Remove a saved search by its `id`.
+     *
+     * No-op if the id does not exist.
+     */
+    remove(storageKey, searchId) {
+        const list = this.list(storageKey);
+        const filtered = list.filter((s) => s.id !== searchId);
+        this.persist(storageKey, filtered);
+    }
+    /**
+     * 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, orderedIds) {
+        const list = this.list(storageKey);
+        const map = new Map(list.map((s) => [s.id, s]));
+        const reordered = orderedIds
+            .map((id) => map.get(id))
+            .filter((s) => s !== undefined);
+        this.persist(storageKey, reordered);
+    }
+    /**
+     * Remove all saved searches for a given storage key.
+     */
+    clear(storageKey) {
+        this.storage.removeItem(this.prefixedKey(storageKey));
+    }
+    // ── Private helpers ─────────────────────────────────────────────
+    prefixedKey(storageKey) {
+        return `ui-saved-searches:${storageKey}`;
+    }
+    persist(storageKey, list) {
+        this.storage.setItem(this.prefixedKey(storageKey), JSON.stringify(list));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SavedSearchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SavedSearchService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SavedSearchService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+/**
+ * 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>
+ * ```
+ */
+class UISearchView {
+    // ── Inputs ────────────────────────────────────────────────────────
+    /** Title displayed in the header area. */
+    title = input("Results", ...(ngDevMode ? [{ debugName: "title" }] : []));
+    /**
+     * 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.
+     */
+    datasource = input(undefined, ...(ngDevMode ? [{ debugName: "datasource" }] : []));
+    /**
+     * Results layout mode.
+     *
+     * - `'table'` (default) — uses `<ui-table-view>` with projected columns.
+     * - `'custom'` — renders the projected `#results` template.
+     */
+    layout = input("table", ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /**
+     * Explicit filter field definitions.
+     *
+     * When provided these override the auto-inferred fields derived
+     * from projected columns and sample data.
+     */
+    filterFields = input(undefined, ...(ngDevMode ? [{ debugName: "filterFields" }] : []));
+    /**
+     * 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}.
+     */
+    showFilter = input(undefined, ...(ngDevMode ? [{ debugName: "showFilter" }] : []));
+    /** Whether the filter section starts expanded. */
+    filterExpanded = input(true, ...(ngDevMode ? [{ debugName: "filterExpanded" }] : []));
+    /** Whether the filter toggle button is hidden. */
+    filterModeLocked = input(false, ...(ngDevMode ? [{ debugName: "filterModeLocked" }] : []));
+    /** Whether to show the pagination footer. */
+    showPagination = input(true, ...(ngDevMode ? [{ debugName: "showPagination" }] : []));
+    /** Items per page. */
+    pageSize = input(25, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    /** Available page-size options in the pagination selector. */
+    pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
+    /** Placeholder text shown when there are no results. */
+    placeholder = input("No results found", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Accessible label for the component. */
+    ariaLabel = input("Search view", ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * 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.
+     */
+    storageKey = input(undefined, ...(ngDevMode ? [{ debugName: "storageKey" }] : []));
+    // ── Outputs ───────────────────────────────────────────────────────
+    /**
+     * Emits the {@link FilterExpression} every time the filter rules change.
+     */
+    expressionChange = output();
+    /** Emits when the page changes. */
+    pageChange = output();
+    /** Emits when a saved search is loaded, saved, or deleted. */
+    savedSearchChange = output();
+    // ── Models ────────────────────────────────────────────────────────
+    /** The filter descriptor state (two-way bindable). */
+    filterDescriptor = model({
+        junction: "and",
+        rules: [],
+    }, ...(ngDevMode ? [{ debugName: "filterDescriptor" }] : []));
+    /** Current page index (two-way bindable, zero-based). */
+    pageIndex = model(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
+    // ── Content queries ───────────────────────────────────────────────
+    /** Projected table-view columns (used in table layout mode). */
+    columns = contentChildren(UITableViewColumn, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    /** Optional custom results template (used in custom layout mode). */
+    resultsTemplate = contentChild("results", ...(ngDevMode ? [{ debugName: "resultsTemplate" }] : []));
+    /** Optional custom filter template. */
+    filterTemplate = contentChild("filter", ...(ngDevMode ? [{ debugName: "filterTemplate" }] : []));
+    /** Optional empty-state template. */
+    emptyTemplate = contentChild("empty", ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : []));
+    // ── View queries ──────────────────────────────────────────────────
+    /** @internal — reference to the embedded table-view (when in table layout). */
+    tableView = viewChild(UITableView, ...(ngDevMode ? [{ debugName: "tableView" }] : []));
+    // ── Computed ──────────────────────────────────────────────────────
+    /** @internal */
+    chevronRight = UIIcons.Lucide.Arrows.ChevronRight;
+    /** @internal */
+    chevronDown = UIIcons.Lucide.Arrows.ChevronDown;
+    /** @internal — whether the filter panel is collapsed. */
+    filterCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "filterCollapsed" }] : []));
+    /** @internal — total item count from the datasource. */
+    totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    /** @internal */
+    resolvedShowFilter = computed(() => {
+        const explicit = this.showFilter();
+        if (explicit !== undefined)
+            return explicit;
+        return this.datasource() instanceof FilterableArrayDatasource$1;
+    }, ...(ngDevMode ? [{ debugName: "resolvedShowFilter" }] : []));
+    /** @internal — auto-inferred or explicit filter fields. */
+    resolvedFilterFields = computed(() => {
+        const explicit = this.filterFields();
+        if (explicit)
+            return explicit;
+        const ds = this.datasource();
+        if (!ds)
+            return [];
+        const cols = this.columns();
+        const columnMeta = cols.map((c) => ({
+            key: c.key(),
+            headerText: c.headerText(),
+        }));
+        // Prefer the full unfiltered list when available
+        const allRows = ds instanceof FilterableArrayDatasource$1 ? ds.allRows : undefined;
+        let sample;
+        if (allRows && allRows.length > 0) {
+            sample = allRows[0];
+        }
+        else {
+            const count = ds.getNumberOfItems();
+            if (typeof count !== "number" || count === 0)
+                return [];
+            const result = ds.getObjectAtRowIndex(0);
+            if (!result || result instanceof Promise)
+                return [];
+            sample = result;
+        }
+        if (!sample)
+            return [];
+        return inferFilterFields(sample, columnMeta.length > 0 ? columnMeta : undefined);
+    }, ...(ngDevMode ? [{ debugName: "resolvedFilterFields" }] : []));
+    /** @internal — sample data for filter value suggestions. */
+    resolvedFilterData = computed(() => {
+        const ds = this.datasource();
+        if (!ds)
+            return [];
+        if (ds instanceof FilterableArrayDatasource$1) {
+            const all = ds.allRows;
+            return all.length < 1000 ? all : [];
+        }
+        const count = ds.getNumberOfItems();
+        if (typeof count !== "number" || count === 0 || count >= 1000)
+            return [];
+        const rows = [];
+        for (let i = 0; i < count; i++) {
+            const row = ds.getObjectAtRowIndex(i);
+            if (!(row instanceof Promise))
+                rows.push(row);
+        }
+        return rows;
+    }, ...(ngDevMode ? [{ debugName: "resolvedFilterData" }] : []));
+    // ── Saved-search state ──────────────────────────────────────────
+    /** @internal — whether the saved-searches feature is enabled. */
+    savedSearchesEnabled = computed(() => this.storageKey() !== undefined, ...(ngDevMode ? [{ debugName: "savedSearchesEnabled" }] : []));
+    /** @internal — list of persisted saved searches. */
+    savedSearches = signal([], ...(ngDevMode ? [{ debugName: "savedSearches" }] : []));
+    /** @internal — ID of the currently selected saved search (empty = none). */
+    selectedSearchId = signal("", ...(ngDevMode ? [{ debugName: "selectedSearchId" }] : []));
+    /** @internal — name input value when saving a filter. */
+    searchName = signal("", ...(ngDevMode ? [{ debugName: "searchName" }] : []));
+    /** @internal — whether the save-filter dialog is open. */
+    saveDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "saveDialogOpen" }] : []));
+    /** @internal — index of the chip being dragged (−1 = none). */
+    dragSourceIndex = -1;
+    /**
+     * @internal — bumped after every `filterBy` call so computeds
+     * that depend on the datasource's filtered state re-evaluate.
+     */
+    _filterVersion = signal(0, ...(ngDevMode ? [{ debugName: "_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.
+     */
+    pagedRows = computed(() => {
+        this._filterVersion();
+        const ds = this.datasource();
+        if (!ds)
+            return [];
+        const total = ds.getNumberOfItems();
+        if (typeof total !== "number" || total === 0)
+            return [];
+        if (!this.showPagination()) {
+            const rows = [];
+            for (let i = 0; i < total; i++) {
+                const row = ds.getObjectAtRowIndex(i);
+                if (!(row instanceof Promise))
+                    rows.push(row);
+            }
+            return rows;
+        }
+        const size = this.pageSize();
+        const start = this.pageIndex() * size;
+        const end = Math.min(start + size, total);
+        const rows = [];
+        for (let i = start; i < end; i++) {
+            const row = ds.getObjectAtRowIndex(i);
+            if (!(row instanceof Promise))
+                rows.push(row);
+        }
+        return rows;
+    }, ...(ngDevMode ? [{ debugName: "pagedRows" }] : []));
+    savedSearchService = inject(SavedSearchService);
+    // ── Constructor ───────────────────────────────────────────────────
+    constructor() {
+        this.filterCollapsed.set(!this.filterExpanded());
+        effect(() => {
+            this.filterCollapsed.set(!this.filterExpanded());
+        });
+        effect(() => {
+            const ds = this.datasource();
+            if (!ds) {
+                this.totalItems.set(0);
+                return;
+            }
+            const count = ds.getNumberOfItems();
+            if (typeof count === "number") {
+                this.totalItems.set(count);
+            }
+        });
+        // Reload persisted saved searches whenever the storage key changes.
+        effect(() => {
+            const key = this.storageKey();
+            if (key) {
+                this.savedSearches.set(this.savedSearchService.list(key));
+            }
+            else {
+                this.savedSearches.set([]);
+            }
+            this.selectedSearchId.set("");
+            this.saveDialogOpen.set(false);
+        });
+    }
+    // ── Public methods ────────────────────────────────────────────────
+    /** Toggle the filter panel open/closed. */
+    toggleFilter() {
+        this.filterCollapsed.update((c) => !c);
+    }
+    /**
+     * Load a saved search by its ID, applying its filter descriptor
+     * to the search view.
+     */
+    loadSavedSearch(searchId) {
+        if (!searchId) {
+            this.selectedSearchId.set("");
+            return;
+        }
+        const search = this.savedSearches().find((s) => s.id === searchId);
+        if (search) {
+            this.filterDescriptor.set(structuredClone(search.descriptor));
+            this.selectedSearchId.set(search.id);
+            this.savedSearchChange.emit(search);
+        }
+    }
+    /**
+     * Save the current filter state as a new named search.
+     */
+    saveNewSearch(name) {
+        const key = this.storageKey();
+        if (!key || !name.trim())
+            return;
+        const search = {
+            id: crypto.randomUUID(),
+            name: name.trim(),
+            descriptor: structuredClone(this.filterDescriptor()),
+            savedAt: new Date().toISOString(),
+        };
+        this.savedSearchService.save(key, search);
+        this.savedSearches.set(this.savedSearchService.list(key));
+        this.selectedSearchId.set(search.id);
+        this.saveDialogOpen.set(false);
+        this.searchName.set("");
+        this.savedSearchChange.emit(search);
+    }
+    /**
+     * Delete a saved search by its ID.
+     */
+    deleteSavedSearch(searchId) {
+        const key = this.storageKey();
+        if (!key)
+            return;
+        this.savedSearchService.remove(key, searchId);
+        this.savedSearches.set(this.savedSearchService.list(key));
+        if (this.selectedSearchId() === searchId) {
+            this.selectedSearchId.set("");
+        }
+        this.savedSearchChange.emit(null);
+    }
+    // ── Protected methods ─────────────────────────────────────────────
+    /** @internal */
+    saveIcon = UIIcons.Lucide.Files.Save;
+    /** @internal */
+    xIcon = UIIcons.Lucide.Math.X;
+    /** @internal */
+    onLoadSearch(searchId) {
+        this.loadSavedSearch(searchId);
+    }
+    /** @internal */
+    onDeleteSearch(event, searchId) {
+        event.stopPropagation();
+        this.deleteSavedSearch(searchId);
+    }
+    /** @internal — opens the save-filter dialog. */
+    onSaveFilterClick() {
+        this.searchName.set("");
+        this.saveDialogOpen.set(true);
+    }
+    /** @internal */
+    onConfirmSave() {
+        this.saveNewSearch(this.searchName());
+    }
+    /** @internal */
+    onCancelSave() {
+        this.saveDialogOpen.set(false);
+        this.searchName.set("");
+    }
+    // ── Chip drag-and-drop reorder ────────────────────────────────────
+    /** @internal */
+    onChipDragStart(event, index) {
+        this.dragSourceIndex = index;
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = "move";
+        }
+    }
+    /** @internal */
+    onChipDragOver(event) {
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = "move";
+        }
+    }
+    /** @internal */
+    onChipDrop(event, targetIndex) {
+        event.preventDefault();
+        const from = this.dragSourceIndex;
+        if (from < 0 || from === targetIndex)
+            return;
+        const key = this.storageKey();
+        if (!key)
+            return;
+        const list = [...this.savedSearches()];
+        const [moved] = list.splice(from, 1);
+        list.splice(targetIndex, 0, moved);
+        const orderedIds = list.map((s) => s.id);
+        this.savedSearchService.reorder(key, orderedIds);
+        this.savedSearches.set(this.savedSearchService.list(key));
+        this.dragSourceIndex = -1;
+    }
+    /** @internal */
+    onChipDragEnd() {
+        this.dragSourceIndex = -1;
+    }
+    /** @internal */
+    onFilterExpressionChange(expression) {
+        this.expressionChange.emit(expression);
+        const ds = this.datasource();
+        if (ds instanceof FilterableArrayDatasource$1) {
+            const compiled = toFilterExpression(expression, this.resolvedFilterFields());
+            ds.filterBy(compiled.length === 0 ? null : compiled);
+            const count = ds.getNumberOfItems();
+            this.totalItems.set(typeof count === "number" ? count : 0);
+            this.pageIndex.set(0);
+            // Tell the table to rebuild its adapter so it picks up the
+            // newly filtered datasource content.
+            this.tableView()?.refreshDatasource();
+        }
+        this._filterVersion.update((v) => v + 1);
+    }
+    /** @internal */
+    onPageChange(event) {
+        this.pageChange.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UISearchView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UISearchView, isStandalone: true, selector: "ui-search-view", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, filterFields: { classPropertyName: "filterFields", publicName: "filterFields", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, filterExpanded: { classPropertyName: "filterExpanded", publicName: "filterExpanded", isSignal: true, isRequired: false, transformFunction: null }, filterModeLocked: { classPropertyName: "filterModeLocked", publicName: "filterModeLocked", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, filterDescriptor: { classPropertyName: "filterDescriptor", publicName: "filterDescriptor", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expressionChange: "expressionChange", pageChange: "pageChange", savedSearchChange: "savedSearchChange", filterDescriptor: "filterDescriptorChange", pageIndex: "pageIndexChange" }, host: { classAttribute: "ui-search-view" }, queries: [{ propertyName: "columns", predicate: UITableViewColumn, isSignal: true }, { propertyName: "resultsTemplate", first: true, predicate: ["results"], descendants: true, isSignal: true }, { propertyName: "filterTemplate", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableView", first: true, predicate: UITableView, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "<!-- Hidden slot: instantiates projected columns for contentChildren discovery. -->\n<div class=\"columns-slot\"><ng-content /></div>\n\n<header class=\"sv-header\">\n  <h2 class=\"sv-title\">{{ title() }}</h2>\n  <span class=\"sv-count\">{{ totalItems() }} items</span>\n</header>\n\n@if (resolvedShowFilter()) {\n  <div class=\"sv-filter-bar\">\n    @if (!filterModeLocked()) {\n      <button\n        class=\"sv-filter-toggle\"\n        type=\"button\"\n        (click)=\"toggleFilter()\"\n        [attr.aria-expanded]=\"!filterCollapsed()\"\n        aria-controls=\"sv-filter-content\"\n      >\n        <ui-icon\n          [svg]=\"filterCollapsed() ? chevronRight : chevronDown\"\n          [size]=\"14\"\n        />\n        <span>Filter</span>\n      </button>\n    }\n    @if (!filterCollapsed()) {\n      <div class=\"sv-filter-content\" id=\"sv-filter-content\">\n        @if (filterTemplate(); as filterTpl) {\n          <ng-container *ngTemplateOutlet=\"filterTpl\" />\n        } @else {\n          @if (resolvedFilterFields(); as fields) {\n            @if (fields.length > 0) {\n              <ui-filter\n                [fields]=\"fields\"\n                [data]=\"resolvedFilterData()\"\n                [allowJunction]=\"true\"\n                [modeLocked]=\"filterModeLocked()\"\n                [showSaveButton]=\"savedSearchesEnabled()\"\n                [(value)]=\"filterDescriptor\"\n                (expressionChange)=\"onFilterExpressionChange($event)\"\n                (saveFilter)=\"onSaveFilterClick()\"\n              />\n            }\n          }\n        }\n      </div>\n    }\n  </div>\n}\n\n@if (savedSearchesEnabled() && savedSearches().length > 0) {\n  <div\n    class=\"sv-chip-strip\"\n    role=\"listbox\"\n    aria-label=\"Saved searches\"\n  >\n    @for (search of savedSearches(); track search.id; let idx = $index) {\n      <button\n        class=\"sv-chip\"\n        type=\"button\"\n        role=\"option\"\n        [attr.aria-selected]=\"selectedSearchId() === search.id\"\n        [class.sv-chip--active]=\"selectedSearchId() === search.id\"\n        draggable=\"true\"\n        (click)=\"onLoadSearch(search.id)\"\n        (dragstart)=\"onChipDragStart($event, idx)\"\n        (dragover)=\"onChipDragOver($event)\"\n        (drop)=\"onChipDrop($event, idx)\"\n        (dragend)=\"onChipDragEnd()\"\n      >\n        <span class=\"sv-chip-label\">{{ search.name }}</span>\n        <span\n          class=\"sv-chip-remove\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"'Delete ' + search.name\"\n          (click)=\"onDeleteSearch($event, search.id)\"\n          (keydown.enter)=\"onDeleteSearch($event, search.id)\"\n          (keydown.space)=\"onDeleteSearch($event, search.id)\"\n        >\n          <ui-icon [svg]=\"xIcon\" [size]=\"10\" />\n        </span>\n      </button>\n    }\n  </div>\n}\n\n<div class=\"sv-results\" role=\"region\" [attr.aria-label]=\"ariaLabel()\">\n  @if (layout() === 'table') {\n    <div class=\"sv-table-wrapper\">\n      <ui-table-view\n        [datasource]=\"datasource()!\"\n        [externalColumns]=\"columns()\"\n        [showBuiltInPaginator]=\"false\"\n        [showRowIndexIndicator]=\"false\"\n        [pageSize]=\"pageSize()\"\n        [pageIndex]=\"pageIndex()\"\n      />\n      @if (totalItems() === 0) {\n        @if (emptyTemplate(); as emptyTpl) {\n          <ng-container *ngTemplateOutlet=\"emptyTpl\" />\n        } @else {\n          <div class=\"sv-empty\">\n            <p>{{ placeholder() }}</p>\n          </div>\n        }\n      }\n    </div>\n  } @else if (totalItems() === 0) {\n    @if (emptyTemplate(); as emptyTpl) {\n      <ng-container *ngTemplateOutlet=\"emptyTpl\" />\n    } @else {\n      <div class=\"sv-empty\">\n        <p>{{ placeholder() }}</p>\n      </div>\n    }\n  } @else if (resultsTemplate(); as resultsTpl) {\n    <div class=\"sv-custom-results\">\n      <ng-container\n        *ngTemplateOutlet=\"resultsTpl; context: { $implicit: pagedRows() }\"\n      />\n    </div>\n  }\n</div>\n\n@if (showPagination() && totalItems() > 0) {\n  <footer class=\"sv-footer\">\n    <ui-pagination\n      [totalItems]=\"totalItems()\"\n      [pageSize]=\"pageSize()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      [(pageIndex)]=\"pageIndex\"\n      (pageChange)=\"onPageChange($event)\"\n    />\n  </footer>\n}\n\n<ui-dialog [(open)]=\"saveDialogOpen\" ariaLabel=\"Save filter\">\n  <ui-dialog-header>Save Filter</ui-dialog-header>\n  <ui-dialog-body>\n    <ui-input\n      [(value)]=\"searchName\"\n      placeholder=\"Filter name\"\n      ariaLabel=\"Filter name\"\n    />\n  </ui-dialog-body>\n  <ui-dialog-footer>\n    <ui-button variant=\"ghost\" (click)=\"onCancelSave()\">Cancel</ui-button>\n    <ui-button variant=\"filled\" (click)=\"onConfirmSave()\" [disabled]=\"!searchName().trim()\">Save</ui-button>\n  </ui-dialog-footer>\n</ui-dialog>\n", styles: ["@charset \"UTF-8\";:host{--ui-radius: 6px;display:flex;flex-direction:column;height:100%;font-family:Cantarell,Noto Sans,Segoe UI,sans-serif}.columns-slot{display:none}.sv-header{display:flex;align-items:baseline;gap:.75rem;padding:.75rem 1rem;flex-shrink:0}.sv-title{margin:0;font-size:.9rem;font-weight:600;letter-spacing:.01em}.sv-count{font-size:.75rem}.sv-filter-bar{flex-shrink:0}.sv-chip-strip{display:flex;align-items:center;gap:.35rem;padding:.35rem 1rem;flex-shrink:0;overflow-x:auto;scrollbar-width:thin}.sv-chip{appearance:none;border:none;background:none;font-family:var(--ui-font, inherit);display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:999px;font-size:.75rem;font-weight:500;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s}.sv-chip[draggable=true]{cursor:grab}.sv-chip[draggable=true]:active{cursor:grabbing;opacity:.6}.sv-chip-label{pointer-events:none}.sv-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;opacity:.6;transition:opacity .15s}.sv-chip-remove:hover{opacity:1}.sv-filter-toggle{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:flex;align-items:center;gap:6px;width:100%;padding:.45rem 1rem;font-size:.78rem;font-weight:500;text-align:left}.sv-filter-content ::ng-deep ui-filter{border:none;padding:.75rem 1rem}.sv-results{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.sv-table-wrapper{position:relative;flex:1;overflow:hidden;min-height:0}.sv-table-wrapper ::ng-deep ui-table-view{display:flex;flex-direction:column;height:100%}.sv-table-wrapper ::ng-deep .root{display:flex;flex-direction:column;flex:1;min-height:0;border-radius:0;border:none;box-shadow:none}.sv-table-wrapper ::ng-deep ui-table-body{flex:1;min-height:0}.sv-table-wrapper ::ng-deep .table-body-viewport{height:100%}.sv-custom-results{flex:1;overflow-y:auto;padding:1rem}.sv-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.sv-empty p{margin:0;font-size:.88rem}.sv-footer{flex-shrink:0;padding:.25rem .5rem}\n"], dependencies: [{ kind: "component", type: UIButton, selector: "ui-button", inputs: ["type", "variant", "color", "size", "pill", "disabled", "ariaLabel"] }, { kind: "component", type: UIDialog, selector: "ui-dialog", inputs: ["open", "closeOnBackdropClick", "closeOnEscape", "ariaLabel"], outputs: ["openChange", "closed"] }, { kind: "component", type: UIDialogBody, selector: "ui-dialog-body" }, { kind: "component", type: UIDialogFooter, selector: "ui-dialog-footer" }, { kind: "component", type: UIDialogHeader, selector: "ui-dialog-header" }, { kind: "component", type: UIFilter, selector: "ui-filter", inputs: ["disabled", "fields", "allowJunction", "allowSimple", "allowAdvanced", "modeLocked", "showSaveButton", "data", "value"], outputs: ["valueChange", "expressionChange", "saveFilter"] }, { kind: "component", type: UIInput, selector: "ui-input", inputs: ["type", "text", "value", "adapter", "placeholder", "disabled", "multiline", "rows", "heightAdjustable", "ariaLabel"], outputs: ["textChange", "valueChange"] }, { kind: "component", type: UITableView, selector: "ui-table-view", inputs: ["renderingStrategy", "disabled", "rowHeight", "datasource", "pageSize", "pageIndex", "showBuiltInPaginator", "caption", "showRowIndexIndicator", "rowIndexHeaderText", "tableId", "resizable", "selectionMode", "rowClickSelect", "showSelectionColumn", "selectionModel", "externalColumns"], outputs: ["selectionChange"] }, { kind: "component", type: UIPagination, selector: "ui-pagination", inputs: ["totalItems", "pageSize", "pageSizeOptions", "pageIndex", "disabled", "ariaLabel"], outputs: ["pageIndexChange", "pageChange"] }, { kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["svg", "size", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UISearchView, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-search-view", standalone: true, imports: [
+                        UIButton,
+                        UIDialog,
+                        UIDialogBody,
+                        UIDialogFooter,
+                        UIDialogHeader,
+                        UIFilter,
+                        UIInput,
+                        UITableView,
+                        UIPagination,
+                        UIIcon,
+                        NgTemplateOutlet,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }], host: {
+                        class: "ui-search-view",
+                    }, template: "<!-- Hidden slot: instantiates projected columns for contentChildren discovery. -->\n<div class=\"columns-slot\"><ng-content /></div>\n\n<header class=\"sv-header\">\n  <h2 class=\"sv-title\">{{ title() }}</h2>\n  <span class=\"sv-count\">{{ totalItems() }} items</span>\n</header>\n\n@if (resolvedShowFilter()) {\n  <div class=\"sv-filter-bar\">\n    @if (!filterModeLocked()) {\n      <button\n        class=\"sv-filter-toggle\"\n        type=\"button\"\n        (click)=\"toggleFilter()\"\n        [attr.aria-expanded]=\"!filterCollapsed()\"\n        aria-controls=\"sv-filter-content\"\n      >\n        <ui-icon\n          [svg]=\"filterCollapsed() ? chevronRight : chevronDown\"\n          [size]=\"14\"\n        />\n        <span>Filter</span>\n      </button>\n    }\n    @if (!filterCollapsed()) {\n      <div class=\"sv-filter-content\" id=\"sv-filter-content\">\n        @if (filterTemplate(); as filterTpl) {\n          <ng-container *ngTemplateOutlet=\"filterTpl\" />\n        } @else {\n          @if (resolvedFilterFields(); as fields) {\n            @if (fields.length > 0) {\n              <ui-filter\n                [fields]=\"fields\"\n                [data]=\"resolvedFilterData()\"\n                [allowJunction]=\"true\"\n                [modeLocked]=\"filterModeLocked()\"\n                [showSaveButton]=\"savedSearchesEnabled()\"\n                [(value)]=\"filterDescriptor\"\n                (expressionChange)=\"onFilterExpressionChange($event)\"\n                (saveFilter)=\"onSaveFilterClick()\"\n              />\n            }\n          }\n        }\n      </div>\n    }\n  </div>\n}\n\n@if (savedSearchesEnabled() && savedSearches().length > 0) {\n  <div\n    class=\"sv-chip-strip\"\n    role=\"listbox\"\n    aria-label=\"Saved searches\"\n  >\n    @for (search of savedSearches(); track search.id; let idx = $index) {\n      <button\n        class=\"sv-chip\"\n        type=\"button\"\n        role=\"option\"\n        [attr.aria-selected]=\"selectedSearchId() === search.id\"\n        [class.sv-chip--active]=\"selectedSearchId() === search.id\"\n        draggable=\"true\"\n        (click)=\"onLoadSearch(search.id)\"\n        (dragstart)=\"onChipDragStart($event, idx)\"\n        (dragover)=\"onChipDragOver($event)\"\n        (drop)=\"onChipDrop($event, idx)\"\n        (dragend)=\"onChipDragEnd()\"\n      >\n        <span class=\"sv-chip-label\">{{ search.name }}</span>\n        <span\n          class=\"sv-chip-remove\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"'Delete ' + search.name\"\n          (click)=\"onDeleteSearch($event, search.id)\"\n          (keydown.enter)=\"onDeleteSearch($event, search.id)\"\n          (keydown.space)=\"onDeleteSearch($event, search.id)\"\n        >\n          <ui-icon [svg]=\"xIcon\" [size]=\"10\" />\n        </span>\n      </button>\n    }\n  </div>\n}\n\n<div class=\"sv-results\" role=\"region\" [attr.aria-label]=\"ariaLabel()\">\n  @if (layout() === 'table') {\n    <div class=\"sv-table-wrapper\">\n      <ui-table-view\n        [datasource]=\"datasource()!\"\n        [externalColumns]=\"columns()\"\n        [showBuiltInPaginator]=\"false\"\n        [showRowIndexIndicator]=\"false\"\n        [pageSize]=\"pageSize()\"\n        [pageIndex]=\"pageIndex()\"\n      />\n      @if (totalItems() === 0) {\n        @if (emptyTemplate(); as emptyTpl) {\n          <ng-container *ngTemplateOutlet=\"emptyTpl\" />\n        } @else {\n          <div class=\"sv-empty\">\n            <p>{{ placeholder() }}</p>\n          </div>\n        }\n      }\n    </div>\n  } @else if (totalItems() === 0) {\n    @if (emptyTemplate(); as emptyTpl) {\n      <ng-container *ngTemplateOutlet=\"emptyTpl\" />\n    } @else {\n      <div class=\"sv-empty\">\n        <p>{{ placeholder() }}</p>\n      </div>\n    }\n  } @else if (resultsTemplate(); as resultsTpl) {\n    <div class=\"sv-custom-results\">\n      <ng-container\n        *ngTemplateOutlet=\"resultsTpl; context: { $implicit: pagedRows() }\"\n      />\n    </div>\n  }\n</div>\n\n@if (showPagination() && totalItems() > 0) {\n  <footer class=\"sv-footer\">\n    <ui-pagination\n      [totalItems]=\"totalItems()\"\n      [pageSize]=\"pageSize()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      [(pageIndex)]=\"pageIndex\"\n      (pageChange)=\"onPageChange($event)\"\n    />\n  </footer>\n}\n\n<ui-dialog [(open)]=\"saveDialogOpen\" ariaLabel=\"Save filter\">\n  <ui-dialog-header>Save Filter</ui-dialog-header>\n  <ui-dialog-body>\n    <ui-input\n      [(value)]=\"searchName\"\n      placeholder=\"Filter name\"\n      ariaLabel=\"Filter name\"\n    />\n  </ui-dialog-body>\n  <ui-dialog-footer>\n    <ui-button variant=\"ghost\" (click)=\"onCancelSave()\">Cancel</ui-button>\n    <ui-button variant=\"filled\" (click)=\"onConfirmSave()\" [disabled]=\"!searchName().trim()\">Save</ui-button>\n  </ui-dialog-footer>\n</ui-dialog>\n", styles: ["@charset \"UTF-8\";:host{--ui-radius: 6px;display:flex;flex-direction:column;height:100%;font-family:Cantarell,Noto Sans,Segoe UI,sans-serif}.columns-slot{display:none}.sv-header{display:flex;align-items:baseline;gap:.75rem;padding:.75rem 1rem;flex-shrink:0}.sv-title{margin:0;font-size:.9rem;font-weight:600;letter-spacing:.01em}.sv-count{font-size:.75rem}.sv-filter-bar{flex-shrink:0}.sv-chip-strip{display:flex;align-items:center;gap:.35rem;padding:.35rem 1rem;flex-shrink:0;overflow-x:auto;scrollbar-width:thin}.sv-chip{appearance:none;border:none;background:none;font-family:var(--ui-font, inherit);display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:999px;font-size:.75rem;font-weight:500;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s}.sv-chip[draggable=true]{cursor:grab}.sv-chip[draggable=true]:active{cursor:grabbing;opacity:.6}.sv-chip-label{pointer-events:none}.sv-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;opacity:.6;transition:opacity .15s}.sv-chip-remove:hover{opacity:1}.sv-filter-toggle{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:flex;align-items:center;gap:6px;width:100%;padding:.45rem 1rem;font-size:.78rem;font-weight:500;text-align:left}.sv-filter-content ::ng-deep ui-filter{border:none;padding:.75rem 1rem}.sv-results{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.sv-table-wrapper{position:relative;flex:1;overflow:hidden;min-height:0}.sv-table-wrapper ::ng-deep ui-table-view{display:flex;flex-direction:column;height:100%}.sv-table-wrapper ::ng-deep .root{display:flex;flex-direction:column;flex:1;min-height:0;border-radius:0;border:none;box-shadow:none}.sv-table-wrapper ::ng-deep ui-table-body{flex:1;min-height:0}.sv-table-wrapper ::ng-deep .table-body-viewport{height:100%}.sv-custom-results{flex:1;overflow-y:auto;padding:1rem}.sv-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.sv-empty p{margin:0;font-size:.88rem}.sv-footer{flex-shrink:0;padding:.25rem .5rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], filterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFields", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], filterExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterExpanded", required: false }] }], filterModeLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModeLocked", required: false }] }], showPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPagination", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], expressionChange: [{ type: i0.Output, args: ["expressionChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], savedSearchChange: [{ type: i0.Output, args: ["savedSearchChange"] }], filterDescriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterDescriptor", required: false }] }, { type: i0.Output, args: ["filterDescriptorChange"] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UITableViewColumn), { isSignal: true }] }], resultsTemplate: [{ type: i0.ContentChild, args: ["results", { isSignal: true }] }], filterTemplate: [{ type: i0.ContentChild, args: ["filter", { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: ["empty", { isSignal: true }] }], tableView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => UITableView), { isSignal: true }] }] } });
+
+/**
+ * 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' },
+ * ];
+ * ```
+ */
+class UIPropertySheet {
+    // ── Inputs ────────────────────────────────────────────────────────
+    /** Field definitions describing the properties to edit. */
+    fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : []));
+    /** Accessible label for the sheet. */
+    ariaLabel = input("Property sheet", ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    // ── Models ────────────────────────────────────────────────────────
+    /** The data object being inspected/edited (two-way bindable). */
+    data = model({}, ...(ngDevMode ? [{ debugName: "data" }] : []));
+    // ── Outputs ───────────────────────────────────────────────────────
+    /** Emits when any property value changes. */
+    propertyChange = output();
+    // ── Computed ──────────────────────────────────────────────────────
+    /** @internal — fields organised into named groups. */
+    groups = computed(() => {
+        const defs = this.fields();
+        const map = new Map();
+        for (const field of defs) {
+            const group = field.group ?? "";
+            let list = map.get(group);
+            if (!list) {
+                list = [];
+                map.set(group, list);
+            }
+            list.push(field);
+        }
+        const result = [];
+        for (const [name, fields] of map) {
+            result.push({ name, fields });
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+    // ── Protected methods ─────────────────────────────────────────────
+    /** @internal — read a field value from the data object. */
+    getValue(key) {
+        return this.data()[key];
+    }
+    /** @internal — update a field and emit. */
+    onValueChange(key, value) {
+        const updated = { ...this.data(), [key]: value };
+        this.data.set(updated);
+        this.propertyChange.emit({ key, value, data: updated });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIPropertySheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIPropertySheet, isStandalone: true, selector: "ui-property-sheet", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", propertyChange: "propertyChange" }, host: { classAttribute: "ui-property-sheet" }, providers: [{ provide: UI_DEFAULT_SURFACE_TYPE, useValue: "panel" }], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "<div class=\"ps-sheet\" role=\"form\" [attr.aria-label]=\"ariaLabel()\">\n  @for (group of groups(); track group.name) {\n    @if (group.name) {\n      <h3 class=\"ps-group-heading\">{{ group.name }}</h3>\n    }\n    @for (field of group.fields; track field.key) {\n      <div class=\"ps-row\" [class.ps-row--readonly]=\"field.readonly\">\n        <label class=\"ps-label\" [attr.for]=\"'ps-' + field.key\">\n          {{ field.label }}\n        </label>\n        <div class=\"ps-editor\">\n          @switch (field.type) {\n            @case ('string') {\n              <ui-input\n                [attr.id]=\"'ps-' + field.key\"\n                [value]=\"'' + (getValue(field.key) ?? '')\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.readonly ?? false\"\n                [ariaLabel]=\"field.label\"\n                (valueChange)=\"onValueChange(field.key, $event)\"\n              />\n            }\n            @case ('number') {\n              <ui-input\n                [attr.id]=\"'ps-' + field.key\"\n                type=\"number\"\n                [value]=\"'' + (getValue(field.key) ?? '')\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.readonly ?? false\"\n                [ariaLabel]=\"field.label\"\n                (valueChange)=\"onValueChange(field.key, +$event)\"\n              />\n            }\n            @case ('boolean') {\n              <ui-checkbox\n                [checked]=\"!!getValue(field.key)\"\n                [disabled]=\"field.readonly ?? false\"\n                [ariaLabel]=\"field.label\"\n                (checkedChange)=\"onValueChange(field.key, $event)\"\n              />\n            }\n            @case ('select') {\n              <ui-dropdown-list\n                [options]=\"field.options ?? []\"\n                [value]=\"'' + (getValue(field.key) ?? '')\"\n                [disabled]=\"field.readonly ?? false\"\n                [ariaLabel]=\"field.label\"\n                (valueChange)=\"onValueChange(field.key, $event)\"\n              />\n            }\n            @case ('color') {\n              <ui-color-picker\n                [value]=\"'' + (getValue(field.key) ?? '#000000')\"\n                (valueChange)=\"onValueChange(field.key, $event)\"\n              />\n            }\n            @case ('slider') {\n              <ui-slider\n                [value]=\"+(getValue(field.key) ?? 0)\"\n                [min]=\"field.min ?? 0\"\n                [max]=\"field.max ?? 100\"\n                [step]=\"field.step ?? 1\"\n                [disabled]=\"field.readonly ?? false\"\n                [showValue]=\"true\"\n                (valueChange)=\"onValueChange(field.key, $event)\"\n              />\n            }\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Cantarell,Noto Sans,Segoe UI,sans-serif;font-size:.8125rem}.ps-sheet{display:flex;flex-direction:column}.ps-group-heading{margin:0;padding:.5rem .75rem .25rem;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ps-group-heading:first-child{border-top:none}.ps-row{display:flex;align-items:center;gap:.5rem;padding:.3rem .75rem;min-height:2rem}.ps-row:last-child{border-bottom:none}.ps-row--readonly{opacity:.65}.ps-label{flex:0 0 38%;max-width:38%;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ps-editor{flex:1;min-width:0}.ps-editor ui-input,.ps-editor ui-select,.ps-editor ui-slider{width:100%}\n"], dependencies: [{ kind: "component", type: UIInput, selector: "ui-input", inputs: ["type", "text", "value", "adapter", "placeholder", "disabled", "multiline", "rows", "heightAdjustable", "ariaLabel"], outputs: ["textChange", "valueChange"] }, { kind: "component", type: UIDropdownList, selector: "ui-dropdown-list", inputs: ["options", "placeholder", "disabled", "ariaLabel", "value"], outputs: ["valueChange"] }, { kind: "component", type: UICheckbox, selector: "ui-checkbox", inputs: ["variant", "checked", "disabled", "indeterminate", "ariaLabel"], outputs: ["checkedChange"] }, { kind: "component", type: UIColorPicker, selector: "ui-color-picker", inputs: ["value", "initialMode", "availableModes", "disabled", "ariaLabel"], outputs: ["valueChange", "colorChange"] }, { kind: "component", type: UISlider, selector: "ui-slider", inputs: ["mode", "value", "min", "max", "step", "disabled", "showValue", "showMinMax", "ariaLabel", "showTicks", "ticks"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIPropertySheet, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-property-sheet", standalone: true, imports: [UIInput, UIDropdownList, UICheckbox, UIColorPicker, UISlider], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }], providers: [{ provide: UI_DEFAULT_SURFACE_TYPE, useValue: "panel" }], host: {
+                        class: "ui-property-sheet",
+                    }, template: "<div class=\"ps-sheet\" role=\"form\" [attr.aria-label]=\"ariaLabel()\">\n  @for (group of groups(); track group.name) {\n    @if (group.name) {\n      <h3 class=\"ps-group-heading\">{{ group.name }}</h3>\n    }\n    @for (field of group.fields; track field.key) {\n      <div class=\"ps-row\" [class.ps-row--readonly]=\"field.readonly\">\n        <label class=\"ps-label\" [attr.for]=\"'ps-' + field.key\">\n          {{ field.label }}\n        </label>\n        <div class=\"ps-editor\">\n          @switch (field.type) {\n            @case ('string') {\n              <ui-input\n                [attr.id]=\"'ps-' + field.key\"\n                [value]=\"'' + (getValue(field.key) ?? '')\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.readonly ?? false\"\n                [ariaLabel]=\"field.label\"\n                (valueChange)=\"onValueChange(field.key, $event)\"\n              />\n            }\n            @case ('number') {\n              <ui-input\n                [attr.id]=\"'ps-' + field.key\"\n                type=\"number\"\n                [value]=\"'' + (getValue(field.key) ?? '')\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.readonly ?? false\"\n                [ariaLabel]=\"field.label\"\n                (valueChange)=\"onValueChange(field.key, +$event)\"\n              />\n            }\n            @case ('boolean') {\n              <ui-checkbox\n                [checked]=\"!!getValue(field.key)\"\n                [disabled]=\"field.readonly ?? false\"\n                [ariaLabel]=\"field.label\"\n                (checkedChange)=\"onValueChange(field.key, $event)\"\n              />\n            }\n            @case ('select') {\n              <ui-dropdown-list\n                [options]=\"field.options ?? []\"\n                [value]=\"'' + (getValue(field.key) ?? '')\"\n                [disabled]=\"field.readonly ?? false\"\n                [ariaLabel]=\"field.label\"\n                (valueChange)=\"onValueChange(field.key, $event)\"\n              />\n            }\n            @case ('color') {\n              <ui-color-picker\n                [value]=\"'' + (getValue(field.key) ?? '#000000')\"\n                (valueChange)=\"onValueChange(field.key, $event)\"\n              />\n            }\n            @case ('slider') {\n              <ui-slider\n                [value]=\"+(getValue(field.key) ?? 0)\"\n                [min]=\"field.min ?? 0\"\n                [max]=\"field.max ?? 100\"\n                [step]=\"field.step ?? 1\"\n                [disabled]=\"field.readonly ?? false\"\n                [showValue]=\"true\"\n                (valueChange)=\"onValueChange(field.key, $event)\"\n              />\n            }\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Cantarell,Noto Sans,Segoe UI,sans-serif;font-size:.8125rem}.ps-sheet{display:flex;flex-direction:column}.ps-group-heading{margin:0;padding:.5rem .75rem .25rem;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ps-group-heading:first-child{border-top:none}.ps-row{display:flex;align-items:center;gap:.5rem;padding:.3rem .75rem;min-height:2rem}.ps-row:last-child{border-bottom:none}.ps-row--readonly{opacity:.65}.ps-label{flex:0 0 38%;max-width:38%;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ps-editor{flex:1;min-width:0}.ps-editor ui-input,.ps-editor ui-select,.ps-editor ui-slider{width:100%}\n"] }]
+        }], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }, { type: i0.Output, args: ["dataChange"] }], propertyChange: [{ type: i0.Output, args: ["propertyChange"] }] } });
+
+/**
+ * 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)"
+ * />
+ * ```
+ */
+class UICommandPalette {
+    // ── Inputs ────────────────────────────────────────────────────────
+    /** The full list of available commands. */
+    commands = input.required(...(ngDevMode ? [{ debugName: "commands" }] : []));
+    /** Placeholder text for the search input. */
+    placeholder = input("Type a command…", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Accessible label for the palette. */
+    ariaLabel = input("Command palette", ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * Whether the global `Cmd+K` / `Ctrl+K` keyboard shortcut is
+     * active. Defaults to `true`.
+     */
+    globalShortcut = input(true, ...(ngDevMode ? [{ debugName: "globalShortcut" }] : []));
+    /**
+     * Maximum number of recent commands to track. Set to `0` to
+     * disable the recent-items section. Defaults to `5`.
+     */
+    maxRecent = input(5, ...(ngDevMode ? [{ debugName: "maxRecent" }] : []));
+    // ── Models ────────────────────────────────────────────────────────
+    /** Whether the palette is open (two-way bindable). */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    // ── Outputs ───────────────────────────────────────────────────────
+    /** Emitted when a command is executed. */
+    execute = output();
+    // ── View queries ──────────────────────────────────────────────────
+    /** @internal */
+    searchInputRef = viewChild("searchInput", ...(ngDevMode ? [{ debugName: "searchInputRef" }] : []));
+    // ── Internal state ────────────────────────────────────────────────
+    /** @internal — current search query. */
+    query = signal("", ...(ngDevMode ? [{ debugName: "query" }] : []));
+    /** @internal — index of the active (highlighted) item. */
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    /** @internal — IDs of recently executed commands (most recent first). */
+    recentIds = signal([], ...(ngDevMode ? [{ debugName: "recentIds" }] : []));
+    // ── Icons ─────────────────────────────────────────────────────────
+    /** @internal */
+    searchIcon = UIIcons.Lucide.Social.Search;
+    /** @internal */
+    returnIcon = UIIcons.Lucide.Arrows.CornerDownLeft;
+    /** @internal */
+    arrowUpIcon = UIIcons.Lucide.Arrows.ArrowUp;
+    /** @internal */
+    arrowDownIcon = UIIcons.Lucide.Arrows.ArrowDown;
+    // ── Computed ──────────────────────────────────────────────────────
+    /** @internal — filtered and grouped commands based on the query. */
+    filteredGroups = computed(() => {
+        const q = this.query().toLowerCase().trim();
+        const all = this.commands();
+        const matching = q
+            ? all.filter((cmd) => cmd.label.toLowerCase().includes(q) ||
+                (cmd.keywords ?? []).some((k) => k.toLowerCase().includes(q)) ||
+                (cmd.group ?? "").toLowerCase().includes(q))
+            : all;
+        return this.groupCommands(matching);
+    }, ...(ngDevMode ? [{ debugName: "filteredGroups" }] : []));
+    /** @internal — recent commands that are still in the full commands list. */
+    recentCommands = computed(() => {
+        const ids = this.recentIds();
+        const max = this.maxRecent();
+        if (max === 0 || ids.length === 0)
+            return [];
+        const all = this.commands();
+        const lookup = new Map(all.map((c) => [c.id, c]));
+        return ids
+            .map((id) => lookup.get(id))
+            .filter((c) => c !== undefined)
+            .slice(0, max);
+    }, ...(ngDevMode ? [{ debugName: "recentCommands" }] : []));
+    /** @internal — whether to show the recent section. */
+    showRecent = computed(() => this.maxRecent() > 0 &&
+        this.recentCommands().length > 0 &&
+        !this.query().trim(), ...(ngDevMode ? [{ debugName: "showRecent" }] : []));
+    /** @internal — flat list of all currently visible items for keyboard nav. */
+    flatItems = computed(() => {
+        const items = [];
+        if (this.showRecent()) {
+            items.push(...this.recentCommands());
+        }
+        for (const group of this.filteredGroups()) {
+            items.push(...group.items);
+        }
+        return items;
+    }, ...(ngDevMode ? [{ debugName: "flatItems" }] : []));
+    // ── Constructor ───────────────────────────────────────────────────
+    constructor() {
+        // Register global keyboard shortcut
+        const onKeydown = (e) => {
+            if (!this.globalShortcut())
+                return;
+            if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+                e.preventDefault();
+                this.open.update((v) => !v);
+            }
+        };
+        if (typeof document !== "undefined") {
+            document.addEventListener("keydown", onKeydown);
+        }
+        // Focus the search input when the palette opens
+        effect(() => {
+            if (this.open()) {
+                this.query.set("");
+                this.activeIndex.set(0);
+                // Allow DOM to render before focusing
+                queueMicrotask(() => {
+                    this.searchInputRef()?.nativeElement.focus();
+                });
+            }
+        });
+        // Reset active index when query changes
+        effect(() => {
+            this.query();
+            this.activeIndex.set(0);
+        });
+    }
+    // ── Public methods ────────────────────────────────────────────────
+    /** Programmatically open the palette. */
+    show() {
+        this.open.set(true);
+    }
+    /** Programmatically close the palette. */
+    close() {
+        this.open.set(false);
+    }
+    // ── Protected methods ─────────────────────────────────────────────
+    /** @internal */
+    onSearchInput(event) {
+        const input = event.target;
+        this.query.set(input.value);
+    }
+    /** @internal */
+    onKeydown(event) {
+        const items = this.flatItems();
+        const len = items.length;
+        if (len === 0)
+            return;
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                this.activeIndex.update((i) => (i + 1) % len);
+                this.scrollActiveIntoView();
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                this.activeIndex.update((i) => (i - 1 + len) % len);
+                this.scrollActiveIntoView();
+                break;
+            case "Enter": {
+                event.preventDefault();
+                const item = items[this.activeIndex()];
+                if (item && !item.disabled) {
+                    this.executeCommand(item);
+                }
+                break;
+            }
+            case "Escape":
+                event.preventDefault();
+                this.close();
+                break;
+        }
+    }
+    /** @internal */
+    onItemClick(item) {
+        if (item.disabled)
+            return;
+        this.executeCommand(item);
+    }
+    /** @internal */
+    onBackdropClick() {
+        this.close();
+    }
+    /** @internal — compute the flat index for a group item. */
+    getFlatIndex(groupIndex, itemIndex) {
+        const groups = this.filteredGroups();
+        let offset = this.showRecent() ? this.recentCommands().length : 0;
+        for (let g = 0; g < groupIndex; g++) {
+            offset += groups[g].items.length;
+        }
+        return offset + itemIndex;
+    }
+    /** @internal — compute the flat index for a recent item. */
+    getRecentFlatIndex(index) {
+        return index;
+    }
+    // ── Private methods ───────────────────────────────────────────────
+    executeCommand(item) {
+        this.execute.emit({
+            command: item,
+            executedAt: new Date().toISOString(),
+        });
+        this.addToRecent(item.id);
+        this.close();
+    }
+    addToRecent(id) {
+        const max = this.maxRecent();
+        if (max === 0)
+            return;
+        this.recentIds.update((ids) => {
+            const filtered = ids.filter((i) => i !== id);
+            return [id, ...filtered].slice(0, max);
+        });
+    }
+    groupCommands(items) {
+        const map = new Map();
+        for (const item of items) {
+            const group = item.group ?? "";
+            let list = map.get(group);
+            if (!list) {
+                list = [];
+                map.set(group, list);
+            }
+            list.push(item);
+        }
+        const result = [];
+        for (const [name, groupItems] of map) {
+            result.push({ name, items: groupItems });
+        }
+        return result;
+    }
+    scrollActiveIntoView() {
+        queueMicrotask(() => {
+            const active = this.searchInputRef()
+                ?.nativeElement.closest(".cp-dialog")
+                ?.querySelector(".cp-item--active");
+            active?.scrollIntoView?.({ block: "nearest" });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UICommandPalette, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UICommandPalette, isStandalone: true, selector: "ui-command-palette", inputs: { commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, globalShortcut: { classPropertyName: "globalShortcut", publicName: "globalShortcut", isSignal: true, isRequired: false, transformFunction: null }, maxRecent: { classPropertyName: "maxRecent", publicName: "maxRecent", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", execute: "execute" }, host: { classAttribute: "ui-command-palette" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "@if (open()) {\n  <div class=\"cp-backdrop\" (click)=\"onBackdropClick()\" (keydown)=\"onKeydown($event)\" tabindex=\"-1\"></div>\n  <div\n    class=\"cp-dialog\"\n    role=\"dialog\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    <!-- Search bar -->\n    <div class=\"cp-search\">\n      <ui-icon class=\"cp-search-icon\" [svg]=\"searchIcon\" [size]=\"18\" />\n      <input\n        #searchInput\n        class=\"cp-search-input\"\n        type=\"text\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"query()\"\n        (input)=\"onSearchInput($event)\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        aria-controls=\"cp-results\"\n        [attr.aria-activedescendant]=\"\n          flatItems().length\n            ? 'cp-item-' + activeIndex()\n            : null\n        \"\n      />\n      <kbd class=\"cp-kbd\">esc</kbd>\n    </div>\n\n    <!-- Results List -->\n    <div\n      id=\"cp-results\"\n      class=\"cp-results\"\n      role=\"listbox\"\n      [attr.aria-label]=\"'Search results'\"\n    >\n      @if (flatItems().length === 0) {\n        <div class=\"cp-empty\">No matching commands</div>\n      } @else {\n        <!-- Recent Commands -->\n        @if (showRecent()) {\n          <div class=\"cp-group\">\n            <div class=\"cp-group-heading\">Recent</div>\n            @for (item of recentCommands(); track item.id; let i = $index) {\n              <div\n                class=\"cp-item\"\n                role=\"option\"\n                tabindex=\"-1\"\n                [id]=\"'cp-item-' + getRecentFlatIndex(i)\"\n                [class.cp-item--active]=\"activeIndex() === getRecentFlatIndex(i)\"\n                [class.cp-item--disabled]=\"item.disabled\"\n                [attr.aria-selected]=\"activeIndex() === getRecentFlatIndex(i)\"\n                [attr.aria-disabled]=\"item.disabled ?? false\"\n                (click)=\"onItemClick(item)\"\n                (keydown)=\"onKeydown($event)\"\n                (pointerenter)=\"activeIndex.set(getRecentFlatIndex(i))\"\n              >\n                @if (item.icon) {\n                  <ui-icon class=\"cp-item-icon\" [svg]=\"item.icon\" [size]=\"16\" />\n                }\n                <span class=\"cp-item-label\">{{ item.label }}</span>\n                @if (item.shortcut) {\n                  <kbd class=\"cp-item-shortcut\">{{ item.shortcut }}</kbd>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Grouped commands -->\n        @for (group of filteredGroups(); track group.name; let gi = $index) {\n          <div class=\"cp-group\">\n            @if (group.name) {\n              <div class=\"cp-group-heading\">{{ group.name }}</div>\n            }\n            @for (item of group.items; track item.id; let ii = $index) {\n              <div\n                class=\"cp-item\"\n                role=\"option\"\n                tabindex=\"-1\"\n                [id]=\"'cp-item-' + getFlatIndex(gi, ii)\"\n                [class.cp-item--active]=\"activeIndex() === getFlatIndex(gi, ii)\"\n                [class.cp-item--disabled]=\"item.disabled\"\n                [attr.aria-selected]=\"activeIndex() === getFlatIndex(gi, ii)\"\n                [attr.aria-disabled]=\"item.disabled ?? false\"\n                (click)=\"onItemClick(item)\"\n                (keydown)=\"onKeydown($event)\"\n                (pointerenter)=\"activeIndex.set(getFlatIndex(gi, ii))\"\n              >\n                @if (item.icon) {\n                  <ui-icon class=\"cp-item-icon\" [svg]=\"item.icon\" [size]=\"16\" />\n                }\n                <span class=\"cp-item-label\">{{ item.label }}</span>\n                @if (item.shortcut) {\n                  <kbd class=\"cp-item-shortcut\">{{ item.shortcut }}</kbd>\n                }\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer hints -->\n    <div class=\"cp-footer\">\n      <span class=\"cp-hint\">\n        <ui-icon [svg]=\"returnIcon\" [size]=\"12\" />\n        <span>to select</span>\n      </span>\n      <span class=\"cp-hint\">\n        <ui-icon [svg]=\"arrowUpIcon\" [size]=\"12\" />\n        <ui-icon [svg]=\"arrowDownIcon\" [size]=\"12\" />\n        <span>to navigate</span>\n      </span>\n      <span class=\"cp-hint\">\n        <kbd>esc</kbd>\n        <span>to close</span>\n      </span>\n    </div>\n  </div>\n}\n", styles: [":host{--cp-disabled-opacity: .4;display:contents}.cp-backdrop{position:fixed;inset:0;z-index:999;animation:cp-fade-in .12s ease-out}.cp-dialog{position:fixed;top:20%;left:50%;transform:translate(-50%);z-index:1000;width:min(560px,100vw - 32px);max-height:420px;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;animation:cp-slide-in .14s ease-out}.cp-search{display:flex;align-items:center;gap:8px;padding:12px 16px}.cp-search-icon{flex-shrink:0}.cp-search-input{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);flex:1;font:inherit;font-size:15px}.cp-results{flex:1;overflow-y:auto;padding:6px 0}.cp-empty{padding:24px 16px;text-align:center;font-size:14px}.cp-group+.cp-group{margin-top:4px}.cp-group-heading{padding:6px 16px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.cp-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;font-size:14px;border-radius:6px;margin:0 6px;transition:background 60ms ease}.cp-item.cp-item--disabled{opacity:var(--cp-disabled-opacity);cursor:not-allowed}.cp-item-icon{flex-shrink:0}.cp-item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-item-shortcut{flex-shrink:0;font-size:11px;font-family:inherit;padding:2px 6px;border-radius:4px}.cp-footer{display:flex;align-items:center;gap:16px;padding:8px 16px;font-size:12px}.cp-hint{display:inline-flex;align-items:center;gap:4px}.cp-hint kbd{font-size:10px;font-family:inherit;padding:1px 5px;border-radius:3px}@keyframes cp-fade-in{0%{opacity:0}to{opacity:1}}@keyframes cp-slide-in{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}\n"], dependencies: [{ kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["svg", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UICommandPalette, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-command-palette", standalone: true, imports: [UIIcon], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }], host: {
+                        class: "ui-command-palette",
+                    }, template: "@if (open()) {\n  <div class=\"cp-backdrop\" (click)=\"onBackdropClick()\" (keydown)=\"onKeydown($event)\" tabindex=\"-1\"></div>\n  <div\n    class=\"cp-dialog\"\n    role=\"dialog\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    <!-- Search bar -->\n    <div class=\"cp-search\">\n      <ui-icon class=\"cp-search-icon\" [svg]=\"searchIcon\" [size]=\"18\" />\n      <input\n        #searchInput\n        class=\"cp-search-input\"\n        type=\"text\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"query()\"\n        (input)=\"onSearchInput($event)\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        aria-controls=\"cp-results\"\n        [attr.aria-activedescendant]=\"\n          flatItems().length\n            ? 'cp-item-' + activeIndex()\n            : null\n        \"\n      />\n      <kbd class=\"cp-kbd\">esc</kbd>\n    </div>\n\n    <!-- Results List -->\n    <div\n      id=\"cp-results\"\n      class=\"cp-results\"\n      role=\"listbox\"\n      [attr.aria-label]=\"'Search results'\"\n    >\n      @if (flatItems().length === 0) {\n        <div class=\"cp-empty\">No matching commands</div>\n      } @else {\n        <!-- Recent Commands -->\n        @if (showRecent()) {\n          <div class=\"cp-group\">\n            <div class=\"cp-group-heading\">Recent</div>\n            @for (item of recentCommands(); track item.id; let i = $index) {\n              <div\n                class=\"cp-item\"\n                role=\"option\"\n                tabindex=\"-1\"\n                [id]=\"'cp-item-' + getRecentFlatIndex(i)\"\n                [class.cp-item--active]=\"activeIndex() === getRecentFlatIndex(i)\"\n                [class.cp-item--disabled]=\"item.disabled\"\n                [attr.aria-selected]=\"activeIndex() === getRecentFlatIndex(i)\"\n                [attr.aria-disabled]=\"item.disabled ?? false\"\n                (click)=\"onItemClick(item)\"\n                (keydown)=\"onKeydown($event)\"\n                (pointerenter)=\"activeIndex.set(getRecentFlatIndex(i))\"\n              >\n                @if (item.icon) {\n                  <ui-icon class=\"cp-item-icon\" [svg]=\"item.icon\" [size]=\"16\" />\n                }\n                <span class=\"cp-item-label\">{{ item.label }}</span>\n                @if (item.shortcut) {\n                  <kbd class=\"cp-item-shortcut\">{{ item.shortcut }}</kbd>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Grouped commands -->\n        @for (group of filteredGroups(); track group.name; let gi = $index) {\n          <div class=\"cp-group\">\n            @if (group.name) {\n              <div class=\"cp-group-heading\">{{ group.name }}</div>\n            }\n            @for (item of group.items; track item.id; let ii = $index) {\n              <div\n                class=\"cp-item\"\n                role=\"option\"\n                tabindex=\"-1\"\n                [id]=\"'cp-item-' + getFlatIndex(gi, ii)\"\n                [class.cp-item--active]=\"activeIndex() === getFlatIndex(gi, ii)\"\n                [class.cp-item--disabled]=\"item.disabled\"\n                [attr.aria-selected]=\"activeIndex() === getFlatIndex(gi, ii)\"\n                [attr.aria-disabled]=\"item.disabled ?? false\"\n                (click)=\"onItemClick(item)\"\n                (keydown)=\"onKeydown($event)\"\n                (pointerenter)=\"activeIndex.set(getFlatIndex(gi, ii))\"\n              >\n                @if (item.icon) {\n                  <ui-icon class=\"cp-item-icon\" [svg]=\"item.icon\" [size]=\"16\" />\n                }\n                <span class=\"cp-item-label\">{{ item.label }}</span>\n                @if (item.shortcut) {\n                  <kbd class=\"cp-item-shortcut\">{{ item.shortcut }}</kbd>\n                }\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer hints -->\n    <div class=\"cp-footer\">\n      <span class=\"cp-hint\">\n        <ui-icon [svg]=\"returnIcon\" [size]=\"12\" />\n        <span>to select</span>\n      </span>\n      <span class=\"cp-hint\">\n        <ui-icon [svg]=\"arrowUpIcon\" [size]=\"12\" />\n        <ui-icon [svg]=\"arrowDownIcon\" [size]=\"12\" />\n        <span>to navigate</span>\n      </span>\n      <span class=\"cp-hint\">\n        <kbd>esc</kbd>\n        <span>to close</span>\n      </span>\n    </div>\n  </div>\n}\n", styles: [":host{--cp-disabled-opacity: .4;display:contents}.cp-backdrop{position:fixed;inset:0;z-index:999;animation:cp-fade-in .12s ease-out}.cp-dialog{position:fixed;top:20%;left:50%;transform:translate(-50%);z-index:1000;width:min(560px,100vw - 32px);max-height:420px;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;animation:cp-slide-in .14s ease-out}.cp-search{display:flex;align-items:center;gap:8px;padding:12px 16px}.cp-search-icon{flex-shrink:0}.cp-search-input{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);flex:1;font:inherit;font-size:15px}.cp-results{flex:1;overflow-y:auto;padding:6px 0}.cp-empty{padding:24px 16px;text-align:center;font-size:14px}.cp-group+.cp-group{margin-top:4px}.cp-group-heading{padding:6px 16px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.cp-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;font-size:14px;border-radius:6px;margin:0 6px;transition:background 60ms ease}.cp-item.cp-item--disabled{opacity:var(--cp-disabled-opacity);cursor:not-allowed}.cp-item-icon{flex-shrink:0}.cp-item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-item-shortcut{flex-shrink:0;font-size:11px;font-family:inherit;padding:2px 6px;border-radius:4px}.cp-footer{display:flex;align-items:center;gap:16px;padding:8px 16px;font-size:12px}.cp-hint{display:inline-flex;align-items:center;gap:4px}.cp-hint kbd{font-size:10px;font-family:inherit;padding:1px 5px;border-radius:3px}@keyframes cp-fade-in{0%{opacity:0}to{opacity:1}}@keyframes cp-slide-in{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { commands: [{ type: i0.Input, args: [{ isSignal: true, alias: "commands", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], globalShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalShortcut", required: false }] }], maxRecent: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRecent", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], execute: [{ type: i0.Output, args: ["execute"] }], searchInputRef: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }] } });
+
+/**
+ * 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.
+ */
+const FILE_ICON_REGISTRY = new InjectionToken("FILE_ICON_REGISTRY");
+/**
+ * Adapter that converts {@link FileBrowserEntry} items to
+ * {@link TreeNode} items for the tree-view sidebar.
+ *
+ * @internal
+ */
+function entryToTreeNode(entry, children) {
+    return {
+        id: entry.id,
+        data: entry,
+        children,
+        icon: entry.icon,
+    };
+}
+
+/**
+ * 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>
+ * ```
+ */
+class UIFileBrowser {
+    // ── Inputs ────────────────────────────────────────────────────────
+    /** The datasource providing the file/directory structure. */
+    datasource = input.required(...(ngDevMode ? [{ debugName: "datasource" }] : []));
+    /** Accessible label for the file browser. */
+    ariaLabel = input("File browser", ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Whether to show the sidebar tree panel. */
+    showSidebar = input(true, ...(ngDevMode ? [{ debugName: "showSidebar" }] : []));
+    /** Label for the root breadcrumb item. */
+    rootLabel = input("Root", ...(ngDevMode ? [{ debugName: "rootLabel" }] : []));
+    /** Active view mode for the contents panel. */
+    viewMode = input("list", ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+    /** Whether to show the details pane for the selected entry. */
+    showDetails = input(false, ...(ngDevMode ? [{ debugName: "showDetails" }] : []));
+    /**
+     * Optional persistence key. When set, sidebar and details panel widths
+     * are saved to and restored from storage.
+     */
+    name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    /**
+     * Callback that extracts metadata fields from a selected entry.
+     * Required for the details pane to display meaningful data.
+     */
+    metadataProvider = input(null, ...(ngDevMode ? [{ debugName: "metadataProvider" }] : []));
+    // ── Models ────────────────────────────────────────────────────────
+    /** The currently selected entry (two-way bindable). */
+    selectedEntry = model(null, ...(ngDevMode ? [{ debugName: "selectedEntry" }] : []));
+    // ── Outputs ───────────────────────────────────────────────────────
+    /** Emitted when a file (non-directory) is activated (double-click / Enter). */
+    fileActivated = output();
+    /** Emitted when the current directory changes. */
+    directoryChange = output();
+    // ── Content projection ────────────────────────────────────────────
+    /** Optional custom template for rendering each entry in the contents panel. */
+    entryTemplate = contentChild("entryTemplate", ...(ngDevMode ? [{ debugName: "entryTemplate" }] : []));
+    // ── View queries ──────────────────────────────────────────────────
+    /** @internal */
+    treeViewRef = viewChild("treeView", ...(ngDevMode ? [{ debugName: "treeViewRef" }] : []));
+    // ── Internal state ────────────────────────────────────────────────
+    /** @internal — the breadcrumb path from root to the current directory. */
+    path = signal([], ...(ngDevMode ? [{ debugName: "path" }] : []));
+    /** @internal — the current directory (`null` = root). */
+    currentDirectory = signal(null, ...(ngDevMode ? [{ debugName: "currentDirectory" }] : []));
+    /** @internal — contents of the current directory. */
+    contents = signal([], ...(ngDevMode ? [{ debugName: "contents" }] : []));
+    /** @internal — tree selection for one-way binding. */
+    treeSelected = signal([], ...(ngDevMode ? [{ debugName: "treeSelected" }] : []));
+    /** @internal — tree datasource adapter. */
+    treeDatasource = computed(() => {
+        const ds = this.datasource();
+        return this.createTreeDatasource(ds);
+    }, ...(ngDevMode ? [{ debugName: "treeDatasource" }] : []));
+    /** @internal — display function for tree nodes. */
+    displayNodeLabel = (entry) => entry.name;
+    // ── Icons ─────────────────────────────────────────────────────────
+    /** @internal */
+    icons = {
+        folder: UIIcons.Lucide.Files.Folder,
+        folderOpen: UIIcons.Lucide.Files.FolderOpen,
+        file: UIIcons.Lucide.Files.File,
+        fileText: UIIcons.Lucide.Files.FileText,
+        chevronRight: UIIcons.Lucide.Arrows.ChevronRight,
+    };
+    // ── DI ────────────────────────────────────────────────────────────
+    /** @internal — optional icon registry supplied via DI. */
+    iconRegistry = inject(FILE_ICON_REGISTRY, {
+        optional: true,
+    });
+    /** @internal */
+    elRef = inject(ElementRef);
+    /** @internal */
+    injector = inject(Injector);
+    /** @internal */
+    storage = inject(StorageService);
+    // ── Resize state ──────────────────────────────────────────────────
+    /** @internal — current sidebar width in pixels. */
+    sidebarWidthPx = signal(240, ...(ngDevMode ? [{ debugName: "sidebarWidthPx" }] : []));
+    /** @internal — current details panel width in pixels. */
+    detailsWidthPx = signal(220, ...(ngDevMode ? [{ debugName: "detailsWidthPx" }] : []));
+    /** @internal — which panel divider is actively being dragged. */
+    draggingPanel = signal(null, ...(ngDevMode ? [{ debugName: "draggingPanel" }] : []));
+    /** @internal — collapsed state for sidebar. */
+    sidebarCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "sidebarCollapsed" }] : []));
+    /** @internal — collapsed state for details panel. */
+    detailsCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "detailsCollapsed" }] : []));
+    /** @internal — width before sidebar collapse for restore. */
+    preSidebarCollapseWidth = null;
+    /** @internal — width before details collapse for restore. */
+    preDetailsCollapseWidth = null;
+    // ── Column-view state ─────────────────────────────────────────────
+    /**
+     * @internal — each element represents one column in the column view.
+     * Index 0 = root, subsequent = each directory navigated into.
+     */
+    columnPanes = signal([], ...(ngDevMode ? [{ debugName: "columnPanes" }] : []));
+    /**
+     * @internal — the entry selected in each column pane (by pane index).
+     */
+    columnSelections = signal([], ...(ngDevMode ? [{ debugName: "columnSelections" }] : []));
+    // ── Computed ──────────────────────────────────────────────────────
+    /** @internal — breadcrumb items built from the current path. */
+    breadcrumbItems = computed(() => {
+        const items = [{ label: this.rootLabel() }];
+        for (const entry of this.path()) {
+            items.push({ label: entry.name });
+        }
+        return items;
+    }, ...(ngDevMode ? [{ debugName: "breadcrumbItems" }] : []));
+    /** @internal — whether an entry is selected in the contents panel. */
+    hasSelection = computed(() => this.selectedEntry() !== null, ...(ngDevMode ? [{ debugName: "hasSelection" }] : []));
+    /** @internal — metadata fields for the selected entry (details pane). */
+    detailFields = computed(() => {
+        const entry = this.selectedEntry();
+        const provider = this.metadataProvider();
+        if (!entry || !provider)
+            return [];
+        return provider(entry);
+    }, ...(ngDevMode ? [{ debugName: "detailFields" }] : []));
+    // ── Constructor ───────────────────────────────────────────────────
+    constructor() {
+        // Load root contents on init
+        effect(() => {
+            const ds = this.datasource();
+            this.loadContents(ds, null);
+        });
+        // Initialise column-view root pane when datasource is ready
+        effect(() => {
+            const ds = this.datasource();
+            const mode = this.viewMode();
+            if (mode === "column") {
+                this.initColumnView(ds);
+            }
+        });
+    }
+    // ── Lifecycle ─────────────────────────────────────────────────────
+    ngAfterViewInit() {
+        const saved = this.loadPanelWidths();
+        if (saved) {
+            this.sidebarWidthPx.set(saved.sidebar);
+            this.detailsWidthPx.set(saved.details);
+            this.sidebarCollapsed.set(saved.sidebarCollapsed);
+            this.detailsCollapsed.set(saved.detailsCollapsed);
+        }
+    }
+    // ── Public methods ────────────────────────────────────────────────
+    /** Navigate to the root directory. */
+    navigateToRoot() {
+        this.navigateTo(null, []);
+    }
+    /** Navigate to a specific directory entry. */
+    navigateToDirectory(entry) {
+        if (!entry.isDirectory)
+            return;
+        const newPath = [...this.path(), entry];
+        this.navigateTo(entry, newPath);
+    }
+    // ── Protected methods ─────────────────────────────────────────────
+    /** @internal — starts pointer-based divider dragging for a panel. */
+    onDividerPointerDown(event, panel) {
+        event.preventDefault();
+        const divider = event.currentTarget;
+        divider.setPointerCapture(event.pointerId);
+        this.draggingPanel.set(panel);
+        const body = this.elRef.nativeElement.querySelector(".fb-body");
+        if (!body)
+            return;
+        const bodyRect = body.getBoundingClientRect();
+        const onMove = (e) => {
+            const cursor = e.clientX - bodyRect.left;
+            const bodyWidth = bodyRect.width;
+            if (panel === "sidebar") {
+                const clampedPx = Math.max(80, Math.min(cursor, bodyWidth * 0.5));
+                this.sidebarWidthPx.set(Math.round(clampedPx));
+                this.sidebarCollapsed.set(false);
+            }
+            else {
+                // Details panel: measure from the right edge
+                const fromRight = bodyRect.right - e.clientX;
+                const clampedPx = Math.max(120, Math.min(fromRight, bodyWidth * 0.5));
+                this.detailsWidthPx.set(Math.round(clampedPx));
+                this.detailsCollapsed.set(false);
+            }
+        };
+        const onUp = () => {
+            this.draggingPanel.set(null);
+            divider.removeEventListener("pointermove", onMove);
+            divider.removeEventListener("pointerup", onUp);
+            divider.removeEventListener("pointercancel", onUp);
+            this.savePanelWidths();
+        };
+        divider.addEventListener("pointermove", onMove);
+        divider.addEventListener("pointerup", onUp);
+        divider.addEventListener("pointercancel", onUp);
+    }
+    /** @internal — double-click on a divider toggles panel collapse. */
+    onDividerDblClick(panel) {
+        if (panel === "sidebar") {
+            if (this.sidebarCollapsed()) {
+                this.sidebarCollapsed.set(false);
+                if (this.preSidebarCollapseWidth) {
+                    this.sidebarWidthPx.set(this.preSidebarCollapseWidth);
+                    this.preSidebarCollapseWidth = null;
+                }
+            }
+            else {
+                this.preSidebarCollapseWidth = this.sidebarWidthPx();
+                this.sidebarCollapsed.set(true);
+            }
+        }
+        else {
+            if (this.detailsCollapsed()) {
+                this.detailsCollapsed.set(false);
+                if (this.preDetailsCollapseWidth) {
+                    this.detailsWidthPx.set(this.preDetailsCollapseWidth);
+                    this.preDetailsCollapseWidth = null;
+                }
+            }
+            else {
+                this.preDetailsCollapseWidth = this.detailsWidthPx();
+                this.detailsCollapsed.set(true);
+            }
+        }
+        this.savePanelWidths();
+    }
+    /** @internal */
+    onBreadcrumbClick(item) {
+        const items = this.breadcrumbItems();
+        const idx = items.indexOf(item);
+        if (idx === 0) {
+            // Root
+            this.navigateTo(null, []);
+        }
+        else {
+            // Navigate to that ancestor
+            const newPath = this.path().slice(0, idx);
+            const target = newPath[newPath.length - 1] ?? null;
+            this.navigateTo(target, [...newPath]);
+        }
+    }
+    /** @internal */
+    onTreeNodeSelected(selected) {
+        if (selected.length === 0)
+            return;
+        const node = selected[0];
+        const entry = node.data;
+        if (entry.isDirectory) {
+            const newPath = this.buildPathToNode(node);
+            this.navigateTo(entry, newPath);
+        }
+    }
+    /** @internal */
+    onTreeNodeActivated(node) {
+        const entry = node.data;
+        if (entry.isDirectory) {
+            const newPath = this.buildPathToNode(node);
+            this.navigateTo(entry, newPath);
+        }
+    }
+    /** @internal */
+    onEntryClick(entry) {
+        this.selectedEntry.set(entry);
+    }
+    /** @internal */
+    onEntryDblClick(entry) {
+        if (entry.isDirectory) {
+            this.navigateToDirectory(entry);
+        }
+        else {
+            this.fileActivated.emit({
+                entry,
+                activatedAt: new Date().toISOString(),
+            });
+        }
+    }
+    /** @internal */
+    onEntryKeydown(event, entry) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            this.onEntryDblClick(entry);
+        }
+    }
+    /** @internal */
+    getEntryIcon(entry) {
+        if (entry.icon)
+            return entry.icon;
+        if (entry.isDirectory)
+            return this.icons.folder;
+        // Check DI icon registry by file extension
+        if (this.iconRegistry) {
+            const ext = this.extractExtension(entry.name);
+            if (ext && ext in this.iconRegistry) {
+                return this.iconRegistry[ext];
+            }
+        }
+        return this.icons.file;
+    }
+    /** @internal */
+    isEntrySelected(entry) {
+        return this.selectedEntry()?.id === entry.id;
+    }
+    // ── Private methods ───────────────────────────────────────────────
+    navigateTo(directory, path) {
+        this.currentDirectory.set(directory);
+        this.path.set(path);
+        this.selectedEntry.set(null);
+        this.loadContents(this.datasource(), directory);
+        this.directoryChange.emit({ directory, path });
+        // Expand the tree to the selected folder
+        this.expandTreeToPath(path);
+    }
+    async loadContents(ds, parent) {
+        const result = await Promise.resolve(ds.getChildren(parent));
+        this.contents.set(result);
+    }
+    createTreeDatasource(ds) {
+        return {
+            getRootNodes: () => {
+                const children = ds.getChildren(null);
+                if (children instanceof Promise) {
+                    return children.then((items) => items.filter((e) => e.isDirectory).map((e) => entryToTreeNode(e)));
+                }
+                return children
+                    .filter((e) => e.isDirectory)
+                    .map((e) => entryToTreeNode(e));
+            },
+            getChildren: (node) => {
+                const children = ds.getChildren(node.data);
+                if (children instanceof Promise) {
+                    return children.then((items) => items.filter((e) => e.isDirectory).map((e) => entryToTreeNode(e)));
+                }
+                return children
+                    .filter((e) => e.isDirectory)
+                    .map((e) => entryToTreeNode(e));
+            },
+            hasChildren: (node) => ds.isDirectory(node.data),
+        };
+    }
+    buildPathToNode(node) {
+        // Walk the tree from roots to find the path to this node
+        const ds = this.treeDatasource();
+        const roots = ds.getRootNodes();
+        if (!Array.isArray(roots))
+            return [node.data];
+        const path = [];
+        const found = this.findNodePath(roots, node.id, path, ds);
+        return found ? path : [node.data];
+    }
+    findNodePath(nodes, targetId, path, ds) {
+        for (const n of nodes) {
+            path.push(n.data);
+            if (n.id === targetId)
+                return true;
+            if (ds.hasChildren(n)) {
+                const children = ds.getChildren(n);
+                if (Array.isArray(children) &&
+                    this.findNodePath(children, targetId, path, ds)) {
+                    return true;
+                }
+            }
+            path.pop();
+        }
+        return false;
+    }
+    expandTreeToPath(path) {
+        const tree = this.treeViewRef();
+        if (!tree)
+            return;
+        for (const entry of path) {
+            const node = entryToTreeNode(entry);
+            tree.expand(node);
+        }
+    }
+    // ── Column-view helpers ───────────────────────────────────────────
+    /** @internal — handle click on an entry inside a column pane. */
+    async onColumnEntryClick(paneIndex, entry) {
+        // Update selection in this pane
+        const sels = [...this.columnSelections()];
+        sels[paneIndex] = entry;
+        // Clear selections in deeper panes
+        this.columnSelections.set(sels.slice(0, paneIndex + 1));
+        this.selectedEntry.set(entry);
+        // If directory, open a new pane to the right (truncate deeper panes first)
+        if (entry.isDirectory) {
+            const ds = this.datasource();
+            const children = await Promise.resolve(ds.getChildren(entry));
+            const panes = this.columnPanes().slice(0, paneIndex + 1);
+            this.columnPanes.set([...panes, { directory: entry, entries: children }]);
+            this.scrollLastColumnPaneIntoView();
+        }
+        else {
+            // Truncate deeper panes for file selection
+            this.columnPanes.set(this.columnPanes().slice(0, paneIndex + 1));
+        }
+    }
+    /** @internal — double-click in column view activates a file. */
+    onColumnEntryDblClick(entry) {
+        if (!entry.isDirectory) {
+            this.fileActivated.emit({
+                entry,
+                activatedAt: new Date().toISOString(),
+            });
+        }
+    }
+    /** @internal — check if entry is selected in a column pane. */
+    isColumnEntrySelected(paneIndex, entry) {
+        return this.columnSelections()[paneIndex]?.id === entry.id;
+    }
+    async initColumnView(ds) {
+        const rootEntries = await Promise.resolve(ds.getChildren(null));
+        this.columnPanes.set([{ directory: null, entries: rootEntries }]);
+        this.columnSelections.set([]);
+    }
+    extractExtension(filename) {
+        const dot = filename.lastIndexOf(".");
+        if (dot < 1)
+            return null;
+        return filename.slice(dot + 1).toLowerCase();
+    }
+    /** @internal — scroll the rightmost column pane into view after DOM update. */
+    scrollLastColumnPaneIntoView() {
+        afterNextRender(() => {
+            const container = this.elRef.nativeElement.querySelector(".fb-contents--column");
+            if (container) {
+                const lastPane = container.querySelector(".fb-column-pane:last-child");
+                lastPane?.scrollIntoView?.({
+                    behavior: "smooth",
+                    block: "nearest",
+                    inline: "end",
+                });
+            }
+        }, { injector: this.injector });
+    }
+    // ── Panel width persistence ───────────────────────────────────────
+    static STORAGE_PREFIX = "ui-file-browser:";
+    savePanelWidths() {
+        const key = this.name();
+        if (!key)
+            return;
+        const data = JSON.stringify({
+            sidebar: this.sidebarWidthPx(),
+            details: this.detailsWidthPx(),
+            sidebarCollapsed: this.sidebarCollapsed(),
+            detailsCollapsed: this.detailsCollapsed(),
+        });
+        this.storage.setItem(UIFileBrowser.STORAGE_PREFIX + key, data);
+    }
+    loadPanelWidths() {
+        const key = this.name();
+        if (!key)
+            return null;
+        try {
+            const raw = this.storage.getItem(UIFileBrowser.STORAGE_PREFIX + key);
+            if (!raw)
+                return null;
+            const parsed = JSON.parse(raw);
+            if (typeof parsed === "object" &&
+                parsed !== null &&
+                typeof parsed.sidebar === "number" &&
+                typeof parsed.details === "number") {
+                return {
+                    sidebar: parsed.sidebar,
+                    details: parsed.details,
+                    sidebarCollapsed: !!parsed.sidebarCollapsed,
+                    detailsCollapsed: !!parsed.detailsCollapsed,
+                };
+            }
+        }
+        catch {
+            // Corrupt data — ignore.
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIFileBrowser, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIFileBrowser, isStandalone: true, selector: "ui-file-browser", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showSidebar: { classPropertyName: "showSidebar", publicName: "showSidebar", isSignal: true, isRequired: false, transformFunction: null }, rootLabel: { classPropertyName: "rootLabel", publicName: "rootLabel", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, showDetails: { classPropertyName: "showDetails", publicName: "showDetails", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, metadataProvider: { classPropertyName: "metadataProvider", publicName: "metadataProvider", isSignal: true, isRequired: false, transformFunction: null }, selectedEntry: { classPropertyName: "selectedEntry", publicName: "selectedEntry", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedEntry: "selectedEntryChange", fileActivated: "fileActivated", directoryChange: "directoryChange" }, host: { properties: { "class.dragging": "draggingPanel()", "style.--fb-sidebar-width": "sidebarWidthPx() + 'px'", "style.--fb-details-width": "detailsWidthPx() + 'px'" }, classAttribute: "ui-file-browser" }, queries: [{ propertyName: "entryTemplate", first: true, predicate: ["entryTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "treeViewRef", first: true, predicate: ["treeView"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "<div class=\"fb-header\">\n  <ui-breadcrumb\n    [items]=\"breadcrumbItems()\"\n    variant=\"button\"\n    ariaLabel=\"File path\"\n    (itemClicked)=\"onBreadcrumbClick($event)\"\n  />\n</div>\n\n<div class=\"fb-body\">\n  <!-- Sidebar: Folder tree -->\n  @if (showSidebar()) {\n    <div class=\"fb-sidebar\" [class.fb-sidebar--collapsed]=\"sidebarCollapsed()\">\n      @if (!sidebarCollapsed()) {\n        <ui-tree-view\n          #treeView\n          [datasource]=\"treeDatasource()\"\n          [displayWith]=\"displayNodeLabel\"\n          ariaLabel=\"Folder tree\"\n          [selected]=\"treeSelected()\"\n          (selectedChange)=\"onTreeNodeSelected($event)\"\n          (nodeActivated)=\"onTreeNodeActivated($event)\"\n        >\n          <ng-template #nodeTemplate let-node>\n            <ui-icon\n              [svg]=\"node.data.icon ?? icons.folder\"\n              [size]=\"16\"\n            />\n            <span class=\"fb-node-label\">{{ node.data.name }}</span>\n          </ng-template>\n        </ui-tree-view>\n      }\n    </div>\n\n    <!-- Sidebar resize divider -->\n    <div\n      class=\"fb-divider fb-divider--sidebar ui-surface-type-raised\"\n      role=\"separator\"\n      tabindex=\"0\"\n      aria-label=\"Resize sidebar\"\n      aria-orientation=\"horizontal\"\n      (pointerdown)=\"onDividerPointerDown($event, 'sidebar')\"\n      (dblclick)=\"onDividerDblClick('sidebar')\"\n    >\n      <div class=\"fb-divider-handle\"></div>\n    </div>\n  }\n\n  <!-- \u2550\u2550\u2550 Contents panel \u2014 switches on viewMode \u2550\u2550\u2550 -->\n\n  @switch (viewMode()) {\n\n    <!-- \u2500\u2500 List view (default) \u2500\u2500 -->\n    @case ('list') {\n      <div class=\"fb-contents fb-contents--list\" role=\"list\" [attr.aria-label]=\"ariaLabel()\">\n        @if (contents().length === 0) {\n          <div class=\"fb-empty\">Empty folder</div>\n        } @else {\n          @for (entry of contents(); track entry.id) {\n            <div\n              class=\"fb-entry\"\n              role=\"listitem\"\n              tabindex=\"0\"\n              [class.fb-entry--selected]=\"isEntrySelected(entry)\"\n              [class.fb-entry--directory]=\"entry.isDirectory\"\n              (click)=\"onEntryClick(entry)\"\n              (dblclick)=\"onEntryDblClick(entry)\"\n              (keydown)=\"onEntryKeydown($event, entry)\"\n            >\n              @if (entryTemplate(); as tpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entry }\"\n                />\n              } @else {\n                <ui-icon class=\"fb-entry-icon\" [svg]=\"getEntryIcon(entry)\" [size]=\"18\" />\n                <span class=\"fb-entry-name\">{{ entry.name }}</span>\n                @if (entry.isDirectory) {\n                  <ui-icon class=\"fb-entry-chevron\" [svg]=\"icons.chevronRight\" [size]=\"14\" />\n                }\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n\n    <!-- \u2500\u2500 Icon view \u2500\u2500 -->\n    @case ('icons') {\n      <div class=\"fb-contents fb-contents--icons\" role=\"list\" [attr.aria-label]=\"ariaLabel()\">\n        @if (contents().length === 0) {\n          <div class=\"fb-empty\">Empty folder</div>\n        } @else {\n          @for (entry of contents(); track entry.id) {\n            <div\n              class=\"fb-icon-tile\"\n              role=\"listitem\"\n              tabindex=\"0\"\n              [class.fb-icon-tile--selected]=\"isEntrySelected(entry)\"\n              (click)=\"onEntryClick(entry)\"\n              (dblclick)=\"onEntryDblClick(entry)\"\n              (keydown)=\"onEntryKeydown($event, entry)\"\n            >\n              <ui-icon class=\"fb-icon-tile-icon\" [svg]=\"getEntryIcon(entry)\" [size]=\"40\" />\n              <span class=\"fb-icon-tile-name\">{{ entry.name }}</span>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    <!-- \u2500\u2500 Detail view (table-like) \u2500\u2500 -->\n    @case ('detail') {\n      <div class=\"fb-contents fb-contents--detail\" role=\"table\" [attr.aria-label]=\"ariaLabel()\">\n        <div class=\"fb-detail-header\" role=\"row\">\n          <span class=\"fb-detail-cell fb-detail-cell--icon\" role=\"columnheader\"></span>\n          <span class=\"fb-detail-cell fb-detail-cell--name\" role=\"columnheader\">Name</span>\n          <span class=\"fb-detail-cell fb-detail-cell--meta\" role=\"columnheader\">Size</span>\n          <span class=\"fb-detail-cell fb-detail-cell--meta\" role=\"columnheader\">Type</span>\n          <span class=\"fb-detail-cell fb-detail-cell--meta\" role=\"columnheader\">Modified</span>\n        </div>\n        @if (contents().length === 0) {\n          <div class=\"fb-empty\">Empty folder</div>\n        } @else {\n          @for (entry of contents(); track entry.id) {\n            <div\n              class=\"fb-detail-row\"\n              role=\"row\"\n              tabindex=\"0\"\n              [class.fb-detail-row--selected]=\"isEntrySelected(entry)\"\n              [class.fb-detail-row--directory]=\"entry.isDirectory\"\n              (click)=\"onEntryClick(entry)\"\n              (dblclick)=\"onEntryDblClick(entry)\"\n              (keydown)=\"onEntryKeydown($event, entry)\"\n            >\n              <span class=\"fb-detail-cell fb-detail-cell--icon\" role=\"cell\">\n                <ui-icon [svg]=\"getEntryIcon(entry)\" [size]=\"16\" />\n              </span>\n              <span class=\"fb-detail-cell fb-detail-cell--name\" role=\"cell\">{{ entry.name }}</span>\n              <span class=\"fb-detail-cell fb-detail-cell--meta\" role=\"cell\">{{ $any(entry.meta)?.size ?? '\u2014' }}</span>\n              <span class=\"fb-detail-cell fb-detail-cell--meta\" role=\"cell\">{{ $any(entry.meta)?.type ?? '\u2014' }}</span>\n              <span class=\"fb-detail-cell fb-detail-cell--meta\" role=\"cell\">{{ $any(entry.meta)?.modified ?? '\u2014' }}</span>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    <!-- \u2500\u2500 Tree view \u2500\u2500 -->\n    @case ('tree') {\n      <div class=\"fb-contents fb-contents--tree\" [attr.aria-label]=\"ariaLabel()\">\n        <ui-tree-view\n          [datasource]=\"treeDatasource()\"\n          [displayWith]=\"displayNodeLabel\"\n          ariaLabel=\"File tree\"\n          (nodeActivated)=\"onTreeNodeActivated($event)\"\n        >\n          <ng-template #nodeTemplate let-node>\n            <ui-icon [svg]=\"getEntryIcon(node.data)\" [size]=\"16\" />\n            <span class=\"fb-node-label\">{{ node.data.name }}</span>\n          </ng-template>\n        </ui-tree-view>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Column view (NeXTSTEP / macOS Finder) \u2500\u2500 -->\n    @case ('column') {\n      <div class=\"fb-contents fb-contents--column\" [attr.aria-label]=\"ariaLabel()\">\n        @for (pane of columnPanes(); track $index; let i = $index) {\n          <div class=\"fb-column-pane\" role=\"list\">\n            @for (entry of pane.entries; track entry.id) {\n              <div\n                class=\"fb-column-entry\"\n                role=\"listitem\"\n                tabindex=\"0\"\n                [class.fb-column-entry--selected]=\"isColumnEntrySelected(i, entry)\"\n                [class.fb-column-entry--directory]=\"entry.isDirectory\"\n                (click)=\"onColumnEntryClick(i, entry)\"\n                (dblclick)=\"onColumnEntryDblClick(entry)\"\n                (keydown)=\"onEntryKeydown($event, entry)\"\n              >\n                <ui-icon [svg]=\"getEntryIcon(entry)\" [size]=\"16\" />\n                <span class=\"fb-column-entry-name\">{{ entry.name }}</span>\n                @if (entry.isDirectory) {\n                  <ui-icon class=\"fb-entry-chevron\" [svg]=\"icons.chevronRight\" [size]=\"12\" />\n                }\n              </div>\n            } @empty {\n              <div class=\"fb-empty\">Empty</div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n\n  <!-- \u2550\u2550\u2550 Details pane \u2550\u2550\u2550 -->\n  @if (showDetails() && hasSelection()) {\n    <!-- Details resize divider -->\n    <div\n      class=\"fb-divider fb-divider--details ui-surface-type-raised\"\n      role=\"separator\"\n      tabindex=\"0\"\n      aria-label=\"Resize details\"\n      aria-orientation=\"horizontal\"\n      (pointerdown)=\"onDividerPointerDown($event, 'details')\"\n      (dblclick)=\"onDividerDblClick('details')\"\n    >\n      <div class=\"fb-divider-handle\"></div>\n    </div>\n\n    <aside class=\"fb-details\" [class.fb-details--collapsed]=\"detailsCollapsed()\" aria-label=\"File details\">\n      @if (!detailsCollapsed()) {\n        <div class=\"fb-details-header\">\n          <ui-icon [svg]=\"getEntryIcon(selectedEntry()!)\" [size]=\"32\" />\n          <span class=\"fb-details-name\">{{ selectedEntry()!.name }}</span>\n          <span class=\"fb-details-kind\">\n            {{ selectedEntry()!.isDirectory ? 'Folder' : 'File' }}\n          </span>\n        </div>\n\n        @if (detailFields().length > 0) {\n          <dl class=\"fb-details-meta\">\n            @for (field of detailFields(); track field.label) {\n              <dt class=\"fb-details-label\">{{ field.label }}</dt>\n              <dd class=\"fb-details-value\">{{ field.value }}</dd>\n            }\n          </dl>\n        }\n      }\n    </aside>\n  }\n</div>\n", styles: [":host{--fb-sidebar-width: 240px;--fb-details-width: 220px;--fb-column-width: 220px;display:flex;flex-direction:column;height:100%;border-radius:8px;overflow:hidden}.fb-header{display:flex;align-items:center;padding:8px 12px;min-height:40px}.fb-body{display:flex;flex:1;min-height:0}.fb-sidebar{width:var(--fb-sidebar-width);min-width:var(--fb-sidebar-width);border-right:none;overflow-y:auto;padding:4px 0;transition:width .15s ease,min-width .15s ease}.fb-sidebar ui-tree-view{font-size:13px}.fb-sidebar--collapsed{width:0;min-width:0;overflow:hidden;padding:0}.fb-node-label{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-divider{flex:0 0 5px;display:flex;align-items:center;justify-content:center;border:none;outline:none;-webkit-user-select:none;user-select:none;touch-action:none;cursor:col-resize;background:transparent;transition:background-color .15s ease;position:relative;z-index:2}.fb-divider:hover{background:var(--ui-hover-bg, rgba(0, 0, 0, .06))}.fb-divider:hover .fb-divider-handle{background:var(--ui-accent, #3584e4)}.fb-divider:focus-visible{outline-offset:-2px}.fb-divider-handle{width:2px;height:24px;border-radius:2px;background:var(--ui-border-strong, #505d6d);transition:background-color .15s ease}:host(.dragging){cursor:col-resize}:host(.dragging) .fb-contents,:host(.dragging) .fb-sidebar,:host(.dragging) .fb-details{pointer-events:none;-webkit-user-select:none;user-select:none}.fb-contents{flex:1;overflow-y:auto;padding:4px 0;min-width:0}.fb-empty{padding:32px 16px;text-align:center;font-size:14px}.fb-entry{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:14px;border-radius:4px;margin:1px 6px;transition:background 60ms ease;outline:none}.fb-entry-icon{flex-shrink:0}.fb-entry-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.fb-entry-chevron{flex-shrink:0;opacity:.5}.fb-entry--directory{font-weight:500}.fb-contents--icons{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;padding:12px}.fb-icon-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;width:88px;padding:10px 4px;border-radius:6px;cursor:pointer;text-align:center;outline:none;transition:background 60ms ease}.fb-icon-tile-icon{flex-shrink:0}.fb-icon-tile-name{font-size:11px;line-height:1.3;max-width:80px;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.fb-contents--detail{padding:0}.fb-detail-header{display:flex;align-items:center;padding:6px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;z-index:1}.fb-detail-row{display:flex;align-items:center;padding:5px 12px;font-size:13px;cursor:pointer;outline:none;transition:background 60ms ease}.fb-detail-row.fb-detail-row--directory{font-weight:500}.fb-detail-cell{padding:0 6px}.fb-detail-cell--icon{flex:0 0 28px;display:flex;align-items:center;justify-content:center}.fb-detail-cell--name{flex:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.fb-detail-cell--meta{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:12px}.fb-detail-row--selected .fb-detail-cell--meta{opacity:.8}.fb-contents--tree ui-tree-view{font-size:13px}.fb-contents--column{display:flex;overflow-x:auto;overflow-y:hidden;padding:0}.fb-column-pane{flex:0 0 var(--fb-column-width);min-width:var(--fb-column-width);overflow-y:auto;padding:2px 0}.fb-column-pane:last-child{border-right:none}.fb-column-entry{display:flex;align-items:center;gap:6px;padding:5px 10px;font-size:13px;cursor:pointer;outline:none;transition:background 60ms ease}.fb-column-entry.fb-column-entry--directory{font-weight:500}.fb-column-entry-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.fb-details{width:var(--fb-details-width);min-width:var(--fb-details-width);border-left:none;overflow-y:auto;padding:16px 12px;display:flex;flex-direction:column;gap:16px;transition:width .15s ease,min-width .15s ease}.fb-details--collapsed{width:0;min-width:0;overflow:hidden;padding:0}.fb-details-header{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.fb-details-name{font-weight:600;font-size:14px;word-break:break-word}.fb-details-kind{font-size:12px}.fb-details-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:12px;margin:0}.fb-details-label{font-weight:600}.fb-details-value{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}\n"], dependencies: [{ kind: "component", type: UITreeView, selector: "ui-tree-view", inputs: ["disabled", "datasource", "ariaLabel", "displayWith", "filterPredicate", "sortComparator", "selected"], outputs: ["selectedChange", "nodeExpanded", "nodeCollapsed", "nodeActivated"] }, { kind: "component", type: UIBreadcrumb, selector: "ui-breadcrumb", inputs: ["disabled", "items", "variant", "separator", "ariaLabel"], outputs: ["itemClicked"] }, { kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["svg", "size", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIFileBrowser, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-file-browser", standalone: true, imports: [UITreeView, UIBreadcrumb, UIIcon, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }], host: {
+                        class: "ui-file-browser",
+                        "[class.dragging]": "draggingPanel()",
+                        "[style.--fb-sidebar-width]": "sidebarWidthPx() + 'px'",
+                        "[style.--fb-details-width]": "detailsWidthPx() + 'px'",
+                    }, template: "<div class=\"fb-header\">\n  <ui-breadcrumb\n    [items]=\"breadcrumbItems()\"\n    variant=\"button\"\n    ariaLabel=\"File path\"\n    (itemClicked)=\"onBreadcrumbClick($event)\"\n  />\n</div>\n\n<div class=\"fb-body\">\n  <!-- Sidebar: Folder tree -->\n  @if (showSidebar()) {\n    <div class=\"fb-sidebar\" [class.fb-sidebar--collapsed]=\"sidebarCollapsed()\">\n      @if (!sidebarCollapsed()) {\n        <ui-tree-view\n          #treeView\n          [datasource]=\"treeDatasource()\"\n          [displayWith]=\"displayNodeLabel\"\n          ariaLabel=\"Folder tree\"\n          [selected]=\"treeSelected()\"\n          (selectedChange)=\"onTreeNodeSelected($event)\"\n          (nodeActivated)=\"onTreeNodeActivated($event)\"\n        >\n          <ng-template #nodeTemplate let-node>\n            <ui-icon\n              [svg]=\"node.data.icon ?? icons.folder\"\n              [size]=\"16\"\n            />\n            <span class=\"fb-node-label\">{{ node.data.name }}</span>\n          </ng-template>\n        </ui-tree-view>\n      }\n    </div>\n\n    <!-- Sidebar resize divider -->\n    <div\n      class=\"fb-divider fb-divider--sidebar ui-surface-type-raised\"\n      role=\"separator\"\n      tabindex=\"0\"\n      aria-label=\"Resize sidebar\"\n      aria-orientation=\"horizontal\"\n      (pointerdown)=\"onDividerPointerDown($event, 'sidebar')\"\n      (dblclick)=\"onDividerDblClick('sidebar')\"\n    >\n      <div class=\"fb-divider-handle\"></div>\n    </div>\n  }\n\n  <!-- \u2550\u2550\u2550 Contents panel \u2014 switches on viewMode \u2550\u2550\u2550 -->\n\n  @switch (viewMode()) {\n\n    <!-- \u2500\u2500 List view (default) \u2500\u2500 -->\n    @case ('list') {\n      <div class=\"fb-contents fb-contents--list\" role=\"list\" [attr.aria-label]=\"ariaLabel()\">\n        @if (contents().length === 0) {\n          <div class=\"fb-empty\">Empty folder</div>\n        } @else {\n          @for (entry of contents(); track entry.id) {\n            <div\n              class=\"fb-entry\"\n              role=\"listitem\"\n              tabindex=\"0\"\n              [class.fb-entry--selected]=\"isEntrySelected(entry)\"\n              [class.fb-entry--directory]=\"entry.isDirectory\"\n              (click)=\"onEntryClick(entry)\"\n              (dblclick)=\"onEntryDblClick(entry)\"\n              (keydown)=\"onEntryKeydown($event, entry)\"\n            >\n              @if (entryTemplate(); as tpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entry }\"\n                />\n              } @else {\n                <ui-icon class=\"fb-entry-icon\" [svg]=\"getEntryIcon(entry)\" [size]=\"18\" />\n                <span class=\"fb-entry-name\">{{ entry.name }}</span>\n                @if (entry.isDirectory) {\n                  <ui-icon class=\"fb-entry-chevron\" [svg]=\"icons.chevronRight\" [size]=\"14\" />\n                }\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n\n    <!-- \u2500\u2500 Icon view \u2500\u2500 -->\n    @case ('icons') {\n      <div class=\"fb-contents fb-contents--icons\" role=\"list\" [attr.aria-label]=\"ariaLabel()\">\n        @if (contents().length === 0) {\n          <div class=\"fb-empty\">Empty folder</div>\n        } @else {\n          @for (entry of contents(); track entry.id) {\n            <div\n              class=\"fb-icon-tile\"\n              role=\"listitem\"\n              tabindex=\"0\"\n              [class.fb-icon-tile--selected]=\"isEntrySelected(entry)\"\n              (click)=\"onEntryClick(entry)\"\n              (dblclick)=\"onEntryDblClick(entry)\"\n              (keydown)=\"onEntryKeydown($event, entry)\"\n            >\n              <ui-icon class=\"fb-icon-tile-icon\" [svg]=\"getEntryIcon(entry)\" [size]=\"40\" />\n              <span class=\"fb-icon-tile-name\">{{ entry.name }}</span>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    <!-- \u2500\u2500 Detail view (table-like) \u2500\u2500 -->\n    @case ('detail') {\n      <div class=\"fb-contents fb-contents--detail\" role=\"table\" [attr.aria-label]=\"ariaLabel()\">\n        <div class=\"fb-detail-header\" role=\"row\">\n          <span class=\"fb-detail-cell fb-detail-cell--icon\" role=\"columnheader\"></span>\n          <span class=\"fb-detail-cell fb-detail-cell--name\" role=\"columnheader\">Name</span>\n          <span class=\"fb-detail-cell fb-detail-cell--meta\" role=\"columnheader\">Size</span>\n          <span class=\"fb-detail-cell fb-detail-cell--meta\" role=\"columnheader\">Type</span>\n          <span class=\"fb-detail-cell fb-detail-cell--meta\" role=\"columnheader\">Modified</span>\n        </div>\n        @if (contents().length === 0) {\n          <div class=\"fb-empty\">Empty folder</div>\n        } @else {\n          @for (entry of contents(); track entry.id) {\n            <div\n              class=\"fb-detail-row\"\n              role=\"row\"\n              tabindex=\"0\"\n              [class.fb-detail-row--selected]=\"isEntrySelected(entry)\"\n              [class.fb-detail-row--directory]=\"entry.isDirectory\"\n              (click)=\"onEntryClick(entry)\"\n              (dblclick)=\"onEntryDblClick(entry)\"\n              (keydown)=\"onEntryKeydown($event, entry)\"\n            >\n              <span class=\"fb-detail-cell fb-detail-cell--icon\" role=\"cell\">\n                <ui-icon [svg]=\"getEntryIcon(entry)\" [size]=\"16\" />\n              </span>\n              <span class=\"fb-detail-cell fb-detail-cell--name\" role=\"cell\">{{ entry.name }}</span>\n              <span class=\"fb-detail-cell fb-detail-cell--meta\" role=\"cell\">{{ $any(entry.meta)?.size ?? '\u2014' }}</span>\n              <span class=\"fb-detail-cell fb-detail-cell--meta\" role=\"cell\">{{ $any(entry.meta)?.type ?? '\u2014' }}</span>\n              <span class=\"fb-detail-cell fb-detail-cell--meta\" role=\"cell\">{{ $any(entry.meta)?.modified ?? '\u2014' }}</span>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    <!-- \u2500\u2500 Tree view \u2500\u2500 -->\n    @case ('tree') {\n      <div class=\"fb-contents fb-contents--tree\" [attr.aria-label]=\"ariaLabel()\">\n        <ui-tree-view\n          [datasource]=\"treeDatasource()\"\n          [displayWith]=\"displayNodeLabel\"\n          ariaLabel=\"File tree\"\n          (nodeActivated)=\"onTreeNodeActivated($event)\"\n        >\n          <ng-template #nodeTemplate let-node>\n            <ui-icon [svg]=\"getEntryIcon(node.data)\" [size]=\"16\" />\n            <span class=\"fb-node-label\">{{ node.data.name }}</span>\n          </ng-template>\n        </ui-tree-view>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Column view (NeXTSTEP / macOS Finder) \u2500\u2500 -->\n    @case ('column') {\n      <div class=\"fb-contents fb-contents--column\" [attr.aria-label]=\"ariaLabel()\">\n        @for (pane of columnPanes(); track $index; let i = $index) {\n          <div class=\"fb-column-pane\" role=\"list\">\n            @for (entry of pane.entries; track entry.id) {\n              <div\n                class=\"fb-column-entry\"\n                role=\"listitem\"\n                tabindex=\"0\"\n                [class.fb-column-entry--selected]=\"isColumnEntrySelected(i, entry)\"\n                [class.fb-column-entry--directory]=\"entry.isDirectory\"\n                (click)=\"onColumnEntryClick(i, entry)\"\n                (dblclick)=\"onColumnEntryDblClick(entry)\"\n                (keydown)=\"onEntryKeydown($event, entry)\"\n              >\n                <ui-icon [svg]=\"getEntryIcon(entry)\" [size]=\"16\" />\n                <span class=\"fb-column-entry-name\">{{ entry.name }}</span>\n                @if (entry.isDirectory) {\n                  <ui-icon class=\"fb-entry-chevron\" [svg]=\"icons.chevronRight\" [size]=\"12\" />\n                }\n              </div>\n            } @empty {\n              <div class=\"fb-empty\">Empty</div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n\n  <!-- \u2550\u2550\u2550 Details pane \u2550\u2550\u2550 -->\n  @if (showDetails() && hasSelection()) {\n    <!-- Details resize divider -->\n    <div\n      class=\"fb-divider fb-divider--details ui-surface-type-raised\"\n      role=\"separator\"\n      tabindex=\"0\"\n      aria-label=\"Resize details\"\n      aria-orientation=\"horizontal\"\n      (pointerdown)=\"onDividerPointerDown($event, 'details')\"\n      (dblclick)=\"onDividerDblClick('details')\"\n    >\n      <div class=\"fb-divider-handle\"></div>\n    </div>\n\n    <aside class=\"fb-details\" [class.fb-details--collapsed]=\"detailsCollapsed()\" aria-label=\"File details\">\n      @if (!detailsCollapsed()) {\n        <div class=\"fb-details-header\">\n          <ui-icon [svg]=\"getEntryIcon(selectedEntry()!)\" [size]=\"32\" />\n          <span class=\"fb-details-name\">{{ selectedEntry()!.name }}</span>\n          <span class=\"fb-details-kind\">\n            {{ selectedEntry()!.isDirectory ? 'Folder' : 'File' }}\n          </span>\n        </div>\n\n        @if (detailFields().length > 0) {\n          <dl class=\"fb-details-meta\">\n            @for (field of detailFields(); track field.label) {\n              <dt class=\"fb-details-label\">{{ field.label }}</dt>\n              <dd class=\"fb-details-value\">{{ field.value }}</dd>\n            }\n          </dl>\n        }\n      }\n    </aside>\n  }\n</div>\n", styles: [":host{--fb-sidebar-width: 240px;--fb-details-width: 220px;--fb-column-width: 220px;display:flex;flex-direction:column;height:100%;border-radius:8px;overflow:hidden}.fb-header{display:flex;align-items:center;padding:8px 12px;min-height:40px}.fb-body{display:flex;flex:1;min-height:0}.fb-sidebar{width:var(--fb-sidebar-width);min-width:var(--fb-sidebar-width);border-right:none;overflow-y:auto;padding:4px 0;transition:width .15s ease,min-width .15s ease}.fb-sidebar ui-tree-view{font-size:13px}.fb-sidebar--collapsed{width:0;min-width:0;overflow:hidden;padding:0}.fb-node-label{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-divider{flex:0 0 5px;display:flex;align-items:center;justify-content:center;border:none;outline:none;-webkit-user-select:none;user-select:none;touch-action:none;cursor:col-resize;background:transparent;transition:background-color .15s ease;position:relative;z-index:2}.fb-divider:hover{background:var(--ui-hover-bg, rgba(0, 0, 0, .06))}.fb-divider:hover .fb-divider-handle{background:var(--ui-accent, #3584e4)}.fb-divider:focus-visible{outline-offset:-2px}.fb-divider-handle{width:2px;height:24px;border-radius:2px;background:var(--ui-border-strong, #505d6d);transition:background-color .15s ease}:host(.dragging){cursor:col-resize}:host(.dragging) .fb-contents,:host(.dragging) .fb-sidebar,:host(.dragging) .fb-details{pointer-events:none;-webkit-user-select:none;user-select:none}.fb-contents{flex:1;overflow-y:auto;padding:4px 0;min-width:0}.fb-empty{padding:32px 16px;text-align:center;font-size:14px}.fb-entry{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:14px;border-radius:4px;margin:1px 6px;transition:background 60ms ease;outline:none}.fb-entry-icon{flex-shrink:0}.fb-entry-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.fb-entry-chevron{flex-shrink:0;opacity:.5}.fb-entry--directory{font-weight:500}.fb-contents--icons{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;padding:12px}.fb-icon-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;width:88px;padding:10px 4px;border-radius:6px;cursor:pointer;text-align:center;outline:none;transition:background 60ms ease}.fb-icon-tile-icon{flex-shrink:0}.fb-icon-tile-name{font-size:11px;line-height:1.3;max-width:80px;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.fb-contents--detail{padding:0}.fb-detail-header{display:flex;align-items:center;padding:6px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;z-index:1}.fb-detail-row{display:flex;align-items:center;padding:5px 12px;font-size:13px;cursor:pointer;outline:none;transition:background 60ms ease}.fb-detail-row.fb-detail-row--directory{font-weight:500}.fb-detail-cell{padding:0 6px}.fb-detail-cell--icon{flex:0 0 28px;display:flex;align-items:center;justify-content:center}.fb-detail-cell--name{flex:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.fb-detail-cell--meta{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:12px}.fb-detail-row--selected .fb-detail-cell--meta{opacity:.8}.fb-contents--tree ui-tree-view{font-size:13px}.fb-contents--column{display:flex;overflow-x:auto;overflow-y:hidden;padding:0}.fb-column-pane{flex:0 0 var(--fb-column-width);min-width:var(--fb-column-width);overflow-y:auto;padding:2px 0}.fb-column-pane:last-child{border-right:none}.fb-column-entry{display:flex;align-items:center;gap:6px;padding:5px 10px;font-size:13px;cursor:pointer;outline:none;transition:background 60ms ease}.fb-column-entry.fb-column-entry--directory{font-weight:500}.fb-column-entry-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.fb-details{width:var(--fb-details-width);min-width:var(--fb-details-width);border-left:none;overflow-y:auto;padding:16px 12px;display:flex;flex-direction:column;gap:16px;transition:width .15s ease,min-width .15s ease}.fb-details--collapsed{width:0;min-width:0;overflow:hidden;padding:0}.fb-details-header{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.fb-details-name{font-weight:600;font-size:14px;word-break:break-word}.fb-details-kind{font-size:12px}.fb-details-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:12px;margin:0}.fb-details-label{font-weight:600}.fb-details-value{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSidebar", required: false }] }], rootLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootLabel", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], showDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDetails", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], metadataProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadataProvider", required: false }] }], selectedEntry: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedEntry", required: false }] }, { type: i0.Output, args: ["selectedEntryChange"] }], fileActivated: [{ type: i0.Output, args: ["fileActivated"] }], directoryChange: [{ type: i0.Output, args: ["directoryChange"] }], entryTemplate: [{ type: i0.ContentChild, args: ["entryTemplate", { isSignal: true }] }], treeViewRef: [{ type: i0.ViewChild, args: ["treeView", { isSignal: true }] }] } });
+
+/**
+ * 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" />
+ * ```
+ */
+class UIMessageBubble {
+    // ── Inputs ────────────────────────────────────────────────────────
+    /** The message to render. */
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
+    /** Whether this message belongs to the current user. */
+    isMine = input(false, ...(ngDevMode ? [{ debugName: "isMine" }] : []));
+    // ── Computed ──────────────────────────────────────────────────────
+    /** @internal — whether content should be rendered as HTML. */
+    isRichText = computed(() => (this.message().type ?? "text") === "rich-text", ...(ngDevMode ? [{ debugName: "isRichText" }] : []));
+    /** @internal — formatted short time string. */
+    timeString = computed(() => {
+        const ts = this.message().timestamp;
+        return ts.toLocaleTimeString(undefined, {
+            hour: "numeric",
+            minute: "2-digit",
+        });
+    }, ...(ngDevMode ? [{ debugName: "timeString" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIMessageBubble, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIMessageBubble, isStandalone: true, selector: "ui-message-bubble", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, isMine: { classPropertyName: "isMine", publicName: "isMine", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mine": "isMine()" }, classAttribute: "ui-message-bubble" }, ngImport: i0, template: "@if (!isMine()) {\n  <ui-avatar\n    [name]=\"message().sender.name\"\n    [src]=\"message().sender.avatarSrc\"\n    [email]=\"message().sender.avatarEmail\"\n    size=\"small\"\n  />\n}\n\n<div class=\"bubble-body\">\n  @if (!isMine()) {\n    <span class=\"bubble-sender\">{{ message().sender.name }}</span>\n  }\n\n  @if (isRichText()) {\n    <div class=\"bubble-content\" [innerHTML]=\"message().content\"></div>\n  } @else {\n    <div class=\"bubble-content\">{{ message().content }}</div>\n  }\n\n  <time class=\"bubble-timestamp\">{{ timeString() }}</time>\n</div>\n", styles: [":host{display:flex;align-items:flex-end;gap:8px;max-width:80%;margin-bottom:2px}:host(.mine){align-self:flex-end;flex-direction:row-reverse}:host(.mine) .bubble-body{align-items:flex-end}:host(.mine) .bubble-content{color:var(--ui-accent-contrast, #ffffff);background:var(--ui-accent, #3584e4);border-radius:16px 16px 4px}:host(.mine) .bubble-timestamp{text-align:right}.bubble-body{display:flex;flex-direction:column;gap:2px;min-width:0}.bubble-sender{font-size:.75rem;font-weight:600;padding-left:4px;color:var(--ui-text-muted, #5a6470)}.bubble-content{padding:8px 14px;border-radius:16px 16px 16px 4px;font-size:.875rem;line-height:1.45;word-wrap:break-word;overflow-wrap:break-word;color:var(--ui-text, #1d232b);background:var(--ui-surface-2, #f0f2f5)}.bubble-timestamp{font-size:.6875rem;padding:0 4px;color:var(--ui-text-muted, #5a6470)}\n"], dependencies: [{ kind: "component", type: UIAvatar, selector: "ui-avatar", inputs: ["src", "email", "name", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIMessageBubble, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-message-bubble", standalone: true, imports: [UIAvatar], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "ui-message-bubble",
+                        "[class.mine]": "isMine()",
+                    }, template: "@if (!isMine()) {\n  <ui-avatar\n    [name]=\"message().sender.name\"\n    [src]=\"message().sender.avatarSrc\"\n    [email]=\"message().sender.avatarEmail\"\n    size=\"small\"\n  />\n}\n\n<div class=\"bubble-body\">\n  @if (!isMine()) {\n    <span class=\"bubble-sender\">{{ message().sender.name }}</span>\n  }\n\n  @if (isRichText()) {\n    <div class=\"bubble-content\" [innerHTML]=\"message().content\"></div>\n  } @else {\n    <div class=\"bubble-content\">{{ message().content }}</div>\n  }\n\n  <time class=\"bubble-timestamp\">{{ timeString() }}</time>\n</div>\n", styles: [":host{display:flex;align-items:flex-end;gap:8px;max-width:80%;margin-bottom:2px}:host(.mine){align-self:flex-end;flex-direction:row-reverse}:host(.mine) .bubble-body{align-items:flex-end}:host(.mine) .bubble-content{color:var(--ui-accent-contrast, #ffffff);background:var(--ui-accent, #3584e4);border-radius:16px 16px 4px}:host(.mine) .bubble-timestamp{text-align:right}.bubble-body{display:flex;flex-direction:column;gap:2px;min-width:0}.bubble-sender{font-size:.75rem;font-weight:600;padding-left:4px;color:var(--ui-text-muted, #5a6470)}.bubble-content{padding:8px 14px;border-radius:16px 16px 16px 4px;font-size:.875rem;line-height:1.45;word-wrap:break-word;overflow-wrap:break-word;color:var(--ui-text, #1d232b);background:var(--ui-surface-2, #f0f2f5)}.bubble-timestamp{font-size:.6875rem;padding:0 4px;color:var(--ui-text-muted, #5a6470)}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], isMine: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMine", required: false }] }] } });
+
+/**
+ * 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)"
+ * />
+ * ```
+ */
+class UIChatView {
+    // ── Inputs ────────────────────────────────────────────────────────
+    /** The list of messages to display. */
+    messages = input([], ...(ngDevMode ? [{ debugName: "messages" }] : []));
+    /** The current user (their messages are right-aligned). */
+    currentUser = input.required(...(ngDevMode ? [{ debugName: "currentUser" }] : []));
+    /** Composer input mode. */
+    composerMode = input("text", ...(ngDevMode ? [{ debugName: "composerMode" }] : []));
+    /** Placeholder text for the composer. */
+    placeholder = input("Type a message…", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Accessible label for the chat view. */
+    ariaLabel = input("Chat", ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    // ── Content children ──────────────────────────────────────────────
+    /**
+     * Optional custom template for rendering individual messages.
+     * Receives a {@link MessageTemplateContext}.
+     */
+    messageTemplate = contentChild(TemplateRef, ...(ngDevMode ? [{ debugName: "messageTemplate" }] : []));
+    // ── Outputs ───────────────────────────────────────────────────────
+    /** Emitted when the user sends a message. */
+    messageSend = output();
+    // ── View queries ──────────────────────────────────────────────────
+    /** @internal */
+    messageListRef = viewChild("messageList", ...(ngDevMode ? [{ debugName: "messageListRef" }] : []));
+    /** @internal */
+    composerInputRef = viewChild("composerInput", ...(ngDevMode ? [{ debugName: "composerInputRef" }] : []));
+    // ── Internal state ────────────────────────────────────────────────
+    /** @internal — current text in the composer. */
+    composerValue = signal("", ...(ngDevMode ? [{ debugName: "composerValue" }] : []));
+    // ── Icons ─────────────────────────────────────────────────────────
+    /** @internal */
+    sendIcon = UIIcons.Lucide.Communication.SendHorizontal;
+    // ── Computed ──────────────────────────────────────────────────────
+    /** @internal — messages grouped by date. */
+    groupedMessages = computed(() => this.groupByDate(this.messages()), ...(ngDevMode ? [{ debugName: "groupedMessages" }] : []));
+    /** @internal — whether the send button should be enabled. */
+    canSend = computed(() => this.composerValue().trim().length > 0, ...(ngDevMode ? [{ debugName: "canSend" }] : []));
+    // ── Constructor ───────────────────────────────────────────────────
+    constructor() {
+        // Auto-scroll to bottom when messages change
+        effect(() => {
+            this.messages(); // track
+            this.scrollToBottom();
+        });
+    }
+    // ── Lifecycle ─────────────────────────────────────────────────────
+    ngAfterViewInit() {
+        this.scrollToBottom();
+    }
+    // ── Public methods ────────────────────────────────────────────────
+    /** Scroll the message list to the bottom. */
+    scrollToBottom() {
+        requestAnimationFrame(() => {
+            const el = this.messageListRef()?.nativeElement;
+            if (el) {
+                el.scrollTop = el.scrollHeight;
+            }
+        });
+    }
+    // ── Protected methods ─────────────────────────────────────────────
+    /** @internal — determine if a message was sent by the current user. */
+    isMine(message) {
+        return message.sender.id === this.currentUser().id;
+    }
+    /** @internal — send the composed message. */
+    send() {
+        const content = this.composerValue().trim();
+        if (!content)
+            return;
+        this.messageSend.emit({ content });
+        this.composerValue.set("");
+        // Re-focus the plain-text composer
+        const textarea = this.composerInputRef()?.nativeElement;
+        if (textarea) {
+            textarea.focus();
+        }
+    }
+    /** @internal — handle Enter key in the text composer. */
+    onComposerKeydown(event) {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            this.send();
+        }
+    }
+    /** @internal — handle input events on the textarea. */
+    onComposerInput(event) {
+        const target = event.target;
+        this.composerValue.set(target.value);
+    }
+    // ── Private methods ───────────────────────────────────────────────
+    /** Group messages by date, producing human-readable labels. */
+    groupByDate(messages) {
+        const groups = new Map();
+        for (const msg of messages) {
+            const key = this.toDateKey(msg.timestamp);
+            const list = groups.get(key);
+            if (list) {
+                list.push(msg);
+            }
+            else {
+                groups.set(key, [msg]);
+            }
+        }
+        const today = this.toDateKey(new Date());
+        const yesterday = this.toDateKey(new Date(Date.now() - 86_400_000));
+        const result = [];
+        for (const [date, msgs] of groups) {
+            let label;
+            if (date === today) {
+                label = "Today";
+            }
+            else if (date === yesterday) {
+                label = "Yesterday";
+            }
+            else {
+                label = new Date(date).toLocaleDateString(undefined, {
+                    weekday: "long",
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                });
+            }
+            result.push({ date, label, messages: msgs });
+        }
+        return result;
+    }
+    /** Convert a Date to a YYYY-MM-DD key. */
+    toDateKey(d) {
+        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIChatView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIChatView, isStandalone: true, selector: "ui-chat-view", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, currentUser: { classPropertyName: "currentUser", publicName: "currentUser", isSignal: true, isRequired: true, transformFunction: null }, composerMode: { classPropertyName: "composerMode", publicName: "composerMode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSend: "messageSend" }, host: { classAttribute: "ui-chat-view" }, queries: [{ propertyName: "messageTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "messageListRef", first: true, predicate: ["messageList"], descendants: true, isSignal: true }, { propertyName: "composerInputRef", first: true, predicate: ["composerInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "<div class=\"chat-messages\" #messageList role=\"log\" [attr.aria-label]=\"ariaLabel()\">\n  @for (group of groupedMessages(); track group.date) {\n    <div class=\"chat-date-divider\" role=\"separator\">\n      <span class=\"chat-date-label\">{{ group.label }}</span>\n    </div>\n\n    @for (message of group.messages; track message.id) {\n      @if (messageTemplate(); as tpl) {\n        <ng-container\n          *ngTemplateOutlet=\"tpl; context: { $implicit: message, message: message, isMine: isMine(message) }\"\n        />\n      } @else {\n        @if ((message.type ?? 'text') === 'system') {\n          <div class=\"chat-system-message\">\n            {{ message.content }}\n          </div>\n        } @else {\n          <ui-message-bubble\n            [message]=\"message\"\n            [isMine]=\"isMine(message)\"\n          />\n        }\n      }\n    }\n  }\n\n  @if (groupedMessages().length === 0) {\n    <div class=\"chat-empty\">No messages yet</div>\n  }\n</div>\n\n<div class=\"chat-composer\">\n  @if (composerMode() === 'rich-text') {\n    <ui-rich-text-editor\n      [(value)]=\"composerValue\"\n      [placeholder]=\"placeholder()\"\n      ariaLabel=\"Message composer\"\n    />\n  } @else {\n    <textarea\n      #composerInput\n      class=\"chat-composer-input\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"composerValue()\"\n      (input)=\"onComposerInput($event)\"\n      (keydown)=\"onComposerKeydown($event)\"\n      rows=\"1\"\n      aria-label=\"Message composer\"\n    ></textarea>\n  }\n\n  <button\n    type=\"button\"\n    class=\"chat-send-button\"\n    [disabled]=\"!canSend()\"\n    [attr.aria-label]=\"'Send message'\"\n    (click)=\"send()\"\n  >\n    <ui-icon [svg]=\"sendIcon\" [size]=\"18\" />\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;border-radius:8px;overflow:hidden}.chat-messages{flex:1;padding:16px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain;min-height:0}.chat-date-divider{display:flex;align-items:center;gap:12px;margin:16px 0 8px}.chat-date-divider:before,.chat-date-divider:after{content:\"\";flex:1;height:1px;background:var(--ui-border, #d4d8dd)}.chat-date-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;color:var(--ui-text-muted, #5a6470)}.chat-system-message{text-align:center;font-size:.8125rem;font-style:italic;padding:4px 0;color:var(--ui-text-muted, #5a6470)}.chat-empty{flex:1;display:flex;align-items:center;justify-content:center;font-size:.875rem;color:var(--ui-text-muted, #5a6470)}.chat-composer{display:flex;align-items:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--ui-border, #d4d8dd)}.chat-composer ui-rich-text-editor{flex:1;min-width:0}.chat-composer-input{flex:1;min-width:0;resize:none;border-radius:20px;padding:8px 16px;font-size:.875rem;line-height:1.4;font-family:inherit;outline:none;max-height:120px;color:var(--ui-text, #1d232b);background:var(--ui-surface-2, #f0f2f5);border:1px solid var(--ui-border, #d4d8dd)}.chat-composer-input:focus{border-color:var(--ui-accent, #3584e4)}.chat-send-button{appearance:none;border:none;background:none;font-family:var(--ui-font, inherit);display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;flex-shrink:0;cursor:pointer;transition:opacity .15s;color:var(--ui-accent-contrast, #ffffff);background:var(--ui-accent, #3584e4)}.chat-send-button:disabled{cursor:default;opacity:.4}.chat-send-button:not(:disabled):hover{opacity:.85}.chat-send-button:focus-visible{outline:2px solid var(--ui-focus-ring, var(--ui-brand, var(--ui-accent, #3584e4)));outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["svg", "size", "ariaLabel"] }, { kind: "component", type: UIMessageBubble, selector: "ui-message-bubble", inputs: ["message", "isMine"] }, { kind: "component", type: UIRichTextEditor, selector: "ui-rich-text-editor", inputs: ["mode", "disabled", "readonly", "ariaLabel", "placeholder", "toolbarActions", "placeholders", "sanitise", "maxLength", "imageHandler", "emojiCategories", "value"], outputs: ["valueChange", "placeholderInserted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIChatView, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-chat-view", standalone: true, imports: [
+                        NgTemplateOutlet,
+                        DatePipe,
+                        UIAvatar,
+                        UIButton,
+                        UIIcon,
+                        UIMessageBubble,
+                        UIRichTextEditor,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }], host: {
+                        class: "ui-chat-view",
+                    }, template: "<div class=\"chat-messages\" #messageList role=\"log\" [attr.aria-label]=\"ariaLabel()\">\n  @for (group of groupedMessages(); track group.date) {\n    <div class=\"chat-date-divider\" role=\"separator\">\n      <span class=\"chat-date-label\">{{ group.label }}</span>\n    </div>\n\n    @for (message of group.messages; track message.id) {\n      @if (messageTemplate(); as tpl) {\n        <ng-container\n          *ngTemplateOutlet=\"tpl; context: { $implicit: message, message: message, isMine: isMine(message) }\"\n        />\n      } @else {\n        @if ((message.type ?? 'text') === 'system') {\n          <div class=\"chat-system-message\">\n            {{ message.content }}\n          </div>\n        } @else {\n          <ui-message-bubble\n            [message]=\"message\"\n            [isMine]=\"isMine(message)\"\n          />\n        }\n      }\n    }\n  }\n\n  @if (groupedMessages().length === 0) {\n    <div class=\"chat-empty\">No messages yet</div>\n  }\n</div>\n\n<div class=\"chat-composer\">\n  @if (composerMode() === 'rich-text') {\n    <ui-rich-text-editor\n      [(value)]=\"composerValue\"\n      [placeholder]=\"placeholder()\"\n      ariaLabel=\"Message composer\"\n    />\n  } @else {\n    <textarea\n      #composerInput\n      class=\"chat-composer-input\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"composerValue()\"\n      (input)=\"onComposerInput($event)\"\n      (keydown)=\"onComposerKeydown($event)\"\n      rows=\"1\"\n      aria-label=\"Message composer\"\n    ></textarea>\n  }\n\n  <button\n    type=\"button\"\n    class=\"chat-send-button\"\n    [disabled]=\"!canSend()\"\n    [attr.aria-label]=\"'Send message'\"\n    (click)=\"send()\"\n  >\n    <ui-icon [svg]=\"sendIcon\" [size]=\"18\" />\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;border-radius:8px;overflow:hidden}.chat-messages{flex:1;padding:16px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain;min-height:0}.chat-date-divider{display:flex;align-items:center;gap:12px;margin:16px 0 8px}.chat-date-divider:before,.chat-date-divider:after{content:\"\";flex:1;height:1px;background:var(--ui-border, #d4d8dd)}.chat-date-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;color:var(--ui-text-muted, #5a6470)}.chat-system-message{text-align:center;font-size:.8125rem;font-style:italic;padding:4px 0;color:var(--ui-text-muted, #5a6470)}.chat-empty{flex:1;display:flex;align-items:center;justify-content:center;font-size:.875rem;color:var(--ui-text-muted, #5a6470)}.chat-composer{display:flex;align-items:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--ui-border, #d4d8dd)}.chat-composer ui-rich-text-editor{flex:1;min-width:0}.chat-composer-input{flex:1;min-width:0;resize:none;border-radius:20px;padding:8px 16px;font-size:.875rem;line-height:1.4;font-family:inherit;outline:none;max-height:120px;color:var(--ui-text, #1d232b);background:var(--ui-surface-2, #f0f2f5);border:1px solid var(--ui-border, #d4d8dd)}.chat-composer-input:focus{border-color:var(--ui-accent, #3584e4)}.chat-send-button{appearance:none;border:none;background:none;font-family:var(--ui-font, inherit);display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;flex-shrink:0;cursor:pointer;transition:opacity .15s;color:var(--ui-accent-contrast, #ffffff);background:var(--ui-accent, #3584e4)}.chat-send-button:disabled{cursor:default;opacity:.4}.chat-send-button:not(:disabled):hover{opacity:.85}.chat-send-button:focus-visible{outline:2px solid var(--ui-focus-ring, var(--ui-brand, var(--ui-accent, #3584e4)));outline-offset:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], currentUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUser", required: true }] }], composerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "composerMode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], messageTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], messageSend: [{ type: i0.Output, args: ["messageSend"] }], messageListRef: [{ type: i0.ViewChild, args: ["messageList", { isSignal: true }] }], composerInputRef: [{ type: i0.ViewChild, args: ["composerInput", { isSignal: true }] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class UIWizardStep {
+    // ── Inputs ────────────────────────────────────────────────────────
+    /** Label shown in the step indicator. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Whether this step is optional (shown as hint text). */
+    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : []));
+    /**
+     * Whether the user can advance past this step. Bind a
+     * signal expression to create a validation gate.
+     *
+     * @default true
+     */
+    canAdvance = input(true, ...(ngDevMode ? [{ debugName: "canAdvance" }] : []));
+    // ── View queries ──────────────────────────────────────────────────
+    /** @internal — template holding the step's projected content. */
+    contentTemplate = viewChild.required("stepContent");
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIWizardStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: UIWizardStep, isStandalone: true, selector: "ui-wizard-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, canAdvance: { classPropertyName: "canAdvance", publicName: "canAdvance", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"none\"" }, classAttribute: "ui-wizard-step" }, providers: [{ provide: UI_DEFAULT_SURFACE_TYPE, useValue: "panel" }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["stepContent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "<ng-template #stepContent><ng-content /></ng-template>", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIWizardStep, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ui-wizard-step",
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }],
+                    providers: [{ provide: UI_DEFAULT_SURFACE_TYPE, useValue: "panel" }],
+                    template: "<ng-template #stepContent><ng-content /></ng-template>",
+                    host: {
+                        class: "ui-wizard-step",
+                        "[style.display]": '"none"',
+                    },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], canAdvance: [{ type: i0.Input, args: [{ isSignal: true, alias: "canAdvance", required: false }] }], contentTemplate: [{ type: i0.ViewChild, args: ["stepContent", { isSignal: true }] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class UIWizard {
+    // ── Inputs ────────────────────────────────────────────────────────
+    /**
+     * When `true`, the user must complete steps in order and
+     * cannot click ahead on the step indicator.
+     */
+    linear = input(false, ...(ngDevMode ? [{ debugName: "linear" }] : []));
+    /** Whether to show the step indicator bar. */
+    showStepIndicator = input(true, ...(ngDevMode ? [{ debugName: "showStepIndicator" }] : []));
+    /** Label for the Back button. */
+    backLabel = input("Back", ...(ngDevMode ? [{ debugName: "backLabel" }] : []));
+    /** Label for the Next button. */
+    nextLabel = input("Next", ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    /** Label for the Finish button (shown on the last step). */
+    finishLabel = input("Finish", ...(ngDevMode ? [{ debugName: "finishLabel" }] : []));
+    /** Accessible label for the wizard. */
+    ariaLabel = input("Wizard", ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    // ── Models ────────────────────────────────────────────────────────
+    /** Zero-based index of the active step (two-way bindable). */
+    activeIndex = model(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    // ── Content children ──────────────────────────────────────────────
+    /** @internal — discovered wizard steps. */
+    steps = contentChildren(UIWizardStep, ...(ngDevMode ? [{ debugName: "steps" }] : []));
+    // ── Outputs ───────────────────────────────────────────────────────
+    /** Emitted when the active step changes. */
+    stepChange = output();
+    /** Emitted when the user clicks Finish on the last step. */
+    complete = output();
+    // ── Icons ─────────────────────────────────────────────────────────
+    /** @internal */
+    checkIcon = UIIcons.Lucide.Notifications.Check;
+    // ── Computed ──────────────────────────────────────────────────────
+    /** @internal — the currently active step. */
+    activeStep = computed(() => {
+        const all = this.steps();
+        const idx = this.activeIndex();
+        return idx >= 0 && idx < all.length ? all[idx] : undefined;
+    }, ...(ngDevMode ? [{ debugName: "activeStep" }] : []));
+    /** @internal */
+    isFirstStep = computed(() => this.activeIndex() === 0, ...(ngDevMode ? [{ debugName: "isFirstStep" }] : []));
+    /** @internal */
+    isLastStep = computed(() => this.activeIndex() === this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLastStep" }] : []));
+    /** @internal — whether the current step allows advancing. */
+    canGoNext = computed(() => {
+        const step = this.activeStep();
+        return step ? step.canAdvance() : false;
+    }, ...(ngDevMode ? [{ debugName: "canGoNext" }] : []));
+    // ── Public methods ────────────────────────────────────────────────
+    /** Advance to the next step (respects validation). */
+    next() {
+        if (this.isLastStep() || !this.canGoNext())
+            return;
+        this.goToStep(this.activeIndex() + 1);
+    }
+    /** Go back to the previous step. */
+    previous() {
+        if (this.isFirstStep())
+            return;
+        this.goToStep(this.activeIndex() - 1);
+    }
+    /** Navigate to a specific step by index. */
+    goToStep(index) {
+        const all = this.steps();
+        if (index < 0 || index >= all.length)
+            return;
+        // In linear mode, prevent skipping ahead beyond validated steps
+        if (this.linear() && index > this.activeIndex()) {
+            // Check all steps between current and target are valid
+            for (let i = this.activeIndex(); i < index; i++) {
+                if (!all[i].canAdvance())
+                    return;
+            }
+        }
+        const previous = this.activeIndex();
+        if (previous === index)
+            return;
+        this.activeIndex.set(index);
+        this.stepChange.emit({ previousIndex: previous, currentIndex: index });
+    }
+    /** Complete the wizard (only works on the last step). */
+    finish() {
+        if (!this.isLastStep() || !this.canGoNext())
+            return;
+        this.complete.emit();
+    }
+    // ── Protected methods ─────────────────────────────────────────────
+    /** @internal — handle step indicator click. */
+    onStepClick(index) {
+        if (this.linear() && index > this.activeIndex()) {
+            // In linear mode, only allow clicking completed steps or current
+            return;
+        }
+        this.goToStep(index);
+    }
+    /** @internal — whether a step indicator is clickable. */
+    isStepClickable(index) {
+        if (!this.linear())
+            return true;
+        return index <= this.activeIndex();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIWizard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIWizard, isStandalone: true, selector: "ui-wizard", inputs: { linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, showStepIndicator: { classPropertyName: "showStepIndicator", publicName: "showStepIndicator", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", stepChange: "stepChange", complete: "complete" }, host: { classAttribute: "ui-wizard" }, providers: [{ provide: UI_DEFAULT_SURFACE_TYPE, useValue: "panel" }], queries: [{ propertyName: "steps", predicate: UIWizardStep, isSignal: true }], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "@if (showStepIndicator()) {\n  <nav class=\"wizard-indicator\" [attr.aria-label]=\"ariaLabel() + ' steps'\" role=\"tablist\">\n    @for (step of steps(); track $index; let i = $index) {\n      @if (i > 0) {\n        <div\n          class=\"wizard-connector\"\n          [class.wizard-connector--completed]=\"i <= activeIndex()\"\n        ></div>\n      }\n\n      <button\n        type=\"button\"\n        class=\"wizard-step-indicator\"\n        [class.wizard-step-indicator--active]=\"i === activeIndex()\"\n        [class.wizard-step-indicator--completed]=\"i < activeIndex()\"\n        [class.wizard-step-indicator--clickable]=\"isStepClickable(i)\"\n        [disabled]=\"!isStepClickable(i)\"\n        role=\"tab\"\n        [attr.aria-selected]=\"i === activeIndex()\"\n        [attr.aria-label]=\"step.label()\"\n        (click)=\"onStepClick(i)\"\n      >\n        <span class=\"wizard-step-number\">\n          @if (i < activeIndex()) {\n            <ui-icon [svg]=\"checkIcon\" [size]=\"14\" />\n          } @else {\n            {{ i + 1 }}\n          }\n        </span>\n        <span class=\"wizard-step-label\">\n          {{ step.label() }}\n          @if (step.optional()) {\n            <span class=\"wizard-step-optional\">Optional</span>\n          }\n        </span>\n      </button>\n    }\n  </nav>\n}\n\n<div class=\"wizard-content\" role=\"tabpanel\">\n  @if (activeStep(); as step) {\n    <ng-container *ngTemplateOutlet=\"step.contentTemplate()\" />\n  }\n</div>\n\n<div class=\"wizard-navigation\">\n  @if (!isFirstStep()) {\n    <button\n      type=\"button\"\n      class=\"wizard-nav-button wizard-nav-button--back\"\n      (click)=\"previous()\"\n    >\n      {{ backLabel() }}\n    </button>\n  }\n\n  <div class=\"wizard-nav-spacer\"></div>\n\n  @if (isLastStep()) {\n    <button\n      type=\"button\"\n      class=\"wizard-nav-button wizard-nav-button--finish\"\n      [disabled]=\"!canGoNext()\"\n      (click)=\"finish()\"\n    >\n      {{ finishLabel() }}\n    </button>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"wizard-nav-button wizard-nav-button--next\"\n      [disabled]=\"!canGoNext()\"\n      (click)=\"next()\"\n    >\n      {{ nextLabel() }}\n    </button>\n  }\n</div>\n", styles: [":host{color:var(--ui-text, #1d232b);display:flex;flex-direction:column;border-radius:8px;overflow:hidden}.wizard-indicator{display:flex;align-items:center;padding:20px 24px;gap:0;border-bottom:1px solid var(--ui-border, #dde1e6)}.wizard-connector{flex:1;height:2px;margin:0 4px;background:var(--ui-border, #dde1e6);transition:background .2s}.wizard-connector--completed{background:var(--ui-accent, #3b82f6)}.wizard-step-indicator{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;cursor:default;flex-shrink:0;color:var(--ui-text-muted, #697077)}.wizard-step-indicator--active,.wizard-step-indicator--completed{color:var(--ui-accent, #3b82f6)}.wizard-step-indicator--clickable{cursor:pointer}.wizard-step-indicator--clickable:hover{background:var(--ui-hover-bg, rgba(0, 0, 0, .04))}.wizard-step-indicator:disabled{opacity:.5;cursor:default}.wizard-step-indicator:focus-visible{outline:2px solid var(--ui-focus-ring, var(--ui-brand, var(--ui-accent, #3584e4)));outline-offset:2px}.wizard-step-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:.8125rem;font-weight:600;transition:background .2s,color .2s;flex-shrink:0;color:var(--ui-text-muted, #697077);background:var(--ui-surface-2, #f2f4f8);border:2px solid var(--ui-border, #dde1e6)}.wizard-step-indicator--active .wizard-step-number,.wizard-step-indicator--completed .wizard-step-number{color:var(--ui-accent-contrast, #ffffff);background:var(--ui-accent, #3b82f6);border-color:var(--ui-accent, #3b82f6)}.wizard-step-label{display:flex;flex-direction:column;font-size:.8125rem;font-weight:500;line-height:1.3}.wizard-step-indicator--active .wizard-step-label{font-weight:600}.wizard-step-optional{font-size:.6875rem;font-weight:400;color:var(--ui-text-muted, #697077)}.wizard-content{flex:1;padding:24px;overflow-y:auto;overscroll-behavior:contain;min-height:0}.wizard-navigation{display:flex;align-items:center;gap:12px;padding:16px 24px;border-top:1px solid var(--ui-border, #dde1e6)}.wizard-nav-spacer{flex:1}.wizard-nav-button{appearance:none;border:none;background:none;font-family:var(--ui-font, inherit);display:inline-flex;align-items:center;justify-content:center;padding:8px 20px;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .15s,opacity .15s}.wizard-nav-button--back{color:var(--ui-text, #1d232b);background:transparent;border:1px solid var(--ui-border, #dde1e6)}.wizard-nav-button--back:hover{background:var(--ui-hover-bg, rgba(0, 0, 0, .04))}.wizard-nav-button--next,.wizard-nav-button--finish{color:var(--ui-accent-contrast, #ffffff);background:var(--ui-accent, #3b82f6)}.wizard-nav-button--next:not(:disabled):hover,.wizard-nav-button--finish:not(:disabled):hover{opacity:.85}.wizard-nav-button--next:disabled,.wizard-nav-button--finish:disabled{cursor:default;opacity:.6}.wizard-nav-button:focus-visible{outline:2px solid var(--ui-focus-ring, var(--ui-brand, var(--ui-accent, #3584e4)));outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["svg", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIWizard, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-wizard", standalone: true, imports: [NgTemplateOutlet, UIIcon], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }], providers: [{ provide: UI_DEFAULT_SURFACE_TYPE, useValue: "panel" }], host: {
+                        class: "ui-wizard",
+                    }, template: "@if (showStepIndicator()) {\n  <nav class=\"wizard-indicator\" [attr.aria-label]=\"ariaLabel() + ' steps'\" role=\"tablist\">\n    @for (step of steps(); track $index; let i = $index) {\n      @if (i > 0) {\n        <div\n          class=\"wizard-connector\"\n          [class.wizard-connector--completed]=\"i <= activeIndex()\"\n        ></div>\n      }\n\n      <button\n        type=\"button\"\n        class=\"wizard-step-indicator\"\n        [class.wizard-step-indicator--active]=\"i === activeIndex()\"\n        [class.wizard-step-indicator--completed]=\"i < activeIndex()\"\n        [class.wizard-step-indicator--clickable]=\"isStepClickable(i)\"\n        [disabled]=\"!isStepClickable(i)\"\n        role=\"tab\"\n        [attr.aria-selected]=\"i === activeIndex()\"\n        [attr.aria-label]=\"step.label()\"\n        (click)=\"onStepClick(i)\"\n      >\n        <span class=\"wizard-step-number\">\n          @if (i < activeIndex()) {\n            <ui-icon [svg]=\"checkIcon\" [size]=\"14\" />\n          } @else {\n            {{ i + 1 }}\n          }\n        </span>\n        <span class=\"wizard-step-label\">\n          {{ step.label() }}\n          @if (step.optional()) {\n            <span class=\"wizard-step-optional\">Optional</span>\n          }\n        </span>\n      </button>\n    }\n  </nav>\n}\n\n<div class=\"wizard-content\" role=\"tabpanel\">\n  @if (activeStep(); as step) {\n    <ng-container *ngTemplateOutlet=\"step.contentTemplate()\" />\n  }\n</div>\n\n<div class=\"wizard-navigation\">\n  @if (!isFirstStep()) {\n    <button\n      type=\"button\"\n      class=\"wizard-nav-button wizard-nav-button--back\"\n      (click)=\"previous()\"\n    >\n      {{ backLabel() }}\n    </button>\n  }\n\n  <div class=\"wizard-nav-spacer\"></div>\n\n  @if (isLastStep()) {\n    <button\n      type=\"button\"\n      class=\"wizard-nav-button wizard-nav-button--finish\"\n      [disabled]=\"!canGoNext()\"\n      (click)=\"finish()\"\n    >\n      {{ finishLabel() }}\n    </button>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"wizard-nav-button wizard-nav-button--next\"\n      [disabled]=\"!canGoNext()\"\n      (click)=\"next()\"\n    >\n      {{ nextLabel() }}\n    </button>\n  }\n</div>\n", styles: [":host{color:var(--ui-text, #1d232b);display:flex;flex-direction:column;border-radius:8px;overflow:hidden}.wizard-indicator{display:flex;align-items:center;padding:20px 24px;gap:0;border-bottom:1px solid var(--ui-border, #dde1e6)}.wizard-connector{flex:1;height:2px;margin:0 4px;background:var(--ui-border, #dde1e6);transition:background .2s}.wizard-connector--completed{background:var(--ui-accent, #3b82f6)}.wizard-step-indicator{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--ui-font, inherit);display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;cursor:default;flex-shrink:0;color:var(--ui-text-muted, #697077)}.wizard-step-indicator--active,.wizard-step-indicator--completed{color:var(--ui-accent, #3b82f6)}.wizard-step-indicator--clickable{cursor:pointer}.wizard-step-indicator--clickable:hover{background:var(--ui-hover-bg, rgba(0, 0, 0, .04))}.wizard-step-indicator:disabled{opacity:.5;cursor:default}.wizard-step-indicator:focus-visible{outline:2px solid var(--ui-focus-ring, var(--ui-brand, var(--ui-accent, #3584e4)));outline-offset:2px}.wizard-step-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:.8125rem;font-weight:600;transition:background .2s,color .2s;flex-shrink:0;color:var(--ui-text-muted, #697077);background:var(--ui-surface-2, #f2f4f8);border:2px solid var(--ui-border, #dde1e6)}.wizard-step-indicator--active .wizard-step-number,.wizard-step-indicator--completed .wizard-step-number{color:var(--ui-accent-contrast, #ffffff);background:var(--ui-accent, #3b82f6);border-color:var(--ui-accent, #3b82f6)}.wizard-step-label{display:flex;flex-direction:column;font-size:.8125rem;font-weight:500;line-height:1.3}.wizard-step-indicator--active .wizard-step-label{font-weight:600}.wizard-step-optional{font-size:.6875rem;font-weight:400;color:var(--ui-text-muted, #697077)}.wizard-content{flex:1;padding:24px;overflow-y:auto;overscroll-behavior:contain;min-height:0}.wizard-navigation{display:flex;align-items:center;gap:12px;padding:16px 24px;border-top:1px solid var(--ui-border, #dde1e6)}.wizard-nav-spacer{flex:1}.wizard-nav-button{appearance:none;border:none;background:none;font-family:var(--ui-font, inherit);display:inline-flex;align-items:center;justify-content:center;padding:8px 20px;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .15s,opacity .15s}.wizard-nav-button--back{color:var(--ui-text, #1d232b);background:transparent;border:1px solid var(--ui-border, #dde1e6)}.wizard-nav-button--back:hover{background:var(--ui-hover-bg, rgba(0, 0, 0, .04))}.wizard-nav-button--next,.wizard-nav-button--finish{color:var(--ui-accent-contrast, #ffffff);background:var(--ui-accent, #3b82f6)}.wizard-nav-button--next:not(:disabled):hover,.wizard-nav-button--finish:not(:disabled):hover{opacity:.85}.wizard-nav-button--next:disabled,.wizard-nav-button--finish:disabled{cursor:default;opacity:.6}.wizard-nav-button:focus-visible{outline:2px solid var(--ui-focus-ring, var(--ui-brand, var(--ui-accent, #3584e4)));outline-offset:2px}\n"] }]
+        }], propDecorators: { linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], showStepIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStepIndicator", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UIWizardStep), { isSignal: true }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], complete: [{ type: i0.Output, args: ["complete"] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class UIKanbanBoard {
+    // ── Models ────────────────────────────────────────────────────────
+    /** Column data (two-way bindable). Mutated in-place during drag operations. */
+    columns = model.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+    // ── Inputs ────────────────────────────────────────────────────────
+    /** Accessible label for the board region. */
+    ariaLabel = input("Kanban board", ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    // ── Content children ──────────────────────────────────────────────
+    /** Optional projected template for card rendering. */
+    cardTemplate = contentChild(TemplateRef, ...(ngDevMode ? [{ debugName: "cardTemplate" }] : []));
+    // ── Outputs ───────────────────────────────────────────────────────
+    /** Emitted after a card is moved (reorder or transfer). */
+    cardMoved = output();
+    /** Emitted when a card is clicked. */
+    cardClicked = output();
+    // ── Protected methods ─────────────────────────────────────────────
+    /** @internal — handle CDK drop event. */
+    onDrop(event) {
+        const card = event.item.data;
+        const previousColumnId = event.previousContainer.id;
+        const currentColumnId = event.container.id;
+        const previousIndex = event.previousIndex;
+        const currentIndex = event.currentIndex;
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, previousIndex, currentIndex);
+        }
+        else {
+            transferArrayItem(event.previousContainer.data, event.container.data, previousIndex, currentIndex);
+        }
+        // Trigger signal update with new array reference
+        this.columns.set([...this.columns()]);
+        this.cardMoved.emit({
+            card,
+            previousColumnId,
+            currentColumnId,
+            previousIndex,
+            currentIndex,
+        });
+    }
+    /** @internal — handle card click. */
+    onCardClick(card) {
+        this.cardClicked.emit(card);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIKanbanBoard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIKanbanBoard, isStandalone: true, selector: "ui-kanban-board", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange", cardMoved: "cardMoved", cardClicked: "cardClicked" }, host: { classAttribute: "ui-kanban-board" }, queries: [{ propertyName: "cardTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "<div class=\"kanban-columns\" cdkDropListGroup role=\"region\" [attr.aria-label]=\"ariaLabel()\">\n  @for (column of columns(); track column.id) {\n    <div class=\"kanban-column\" [style.border-top-color]=\"column.color ?? null\">\n      <div class=\"kanban-column-header\">\n        <span class=\"kanban-column-title\">{{ column.title }}</span>\n        <span class=\"kanban-column-count\" [attr.aria-label]=\"column.cards.length + ' cards'\">\n          {{ column.cards.length }}\n        </span>\n      </div>\n\n      <div\n        class=\"kanban-column-body\"\n        cdkDropList\n        [cdkDropListData]=\"column.cards\"\n        [id]=\"column.id\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        @for (card of column.cards; track card.id) {\n          <div\n            class=\"kanban-card-wrapper\"\n            cdkDrag\n            [cdkDragData]=\"card\"\n            tabindex=\"0\"\n            role=\"listitem\"\n            (click)=\"onCardClick(card)\"\n            (keydown.enter)=\"onCardClick(card)\"\n          >\n            <div cdkDragPlaceholder class=\"kanban-card-placeholder\"></div>\n\n            @if (cardTemplate(); as tpl) {\n              <ng-container\n                *ngTemplateOutlet=\"tpl; context: { $implicit: card, column: column }\"\n              />\n            } @else {\n              <div class=\"kanban-card-fallback\">{{ card.id }}</div>\n            }\n          </div>\n        } @empty {\n          <div class=\"kanban-column-empty\">No cards</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--kb-column-width: 280px;--kb-column-gap: 16px;--kb-card-gap: 8px;--kb-column-radius: 8px;--kb-card-radius: 6px;display:flex;flex-direction:column;width:100%;height:100%;min-height:0}.kanban-columns{display:flex;flex:1;gap:var(--kb-column-gap);overflow-x:auto;overscroll-behavior:contain;padding:4px;min-height:0}.kanban-column{flex:1 0 var(--kb-column-width);display:flex;flex-direction:column;border-radius:var(--kb-column-radius);min-height:0;max-height:100%;color:var(--ui-text, #1d232b);background:var(--ui-surface-2, #f0f2f5);border:1px solid var(--ui-border, #d4d8dd);border-top:3px solid var(--ui-border, #d4d8dd)}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}.kanban-column-title{font-weight:600;font-size:.875rem}.kanban-column-count{font-size:.75rem;border-radius:10px;padding:2px 8px;min-width:1.5em;text-align:center;color:var(--ui-text-muted, #5a6470);background:var(--ui-surface, #ffffff)}.kanban-column-body{flex:1;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:8px;display:flex;flex-direction:column;gap:var(--kb-card-gap);min-height:60px}.kanban-card-wrapper{border-radius:var(--kb-card-radius);cursor:grab;color:var(--ui-text, #1d232b);background:var(--ui-surface, #ffffff);border:1px solid var(--ui-border, #d4d8dd);box-shadow:0 1px 3px #0000000f;transition:box-shadow .15s ease,border-color .15s ease}.kanban-card-wrapper:hover{border-color:var(--ui-border-strong, #505d6d);box-shadow:0 2px 6px #0000001a}.kanban-card-wrapper:active{cursor:grabbing}.kanban-card-fallback{padding:8px 12px;font-size:.875rem}.kanban-column-empty{padding:16px;text-align:center;font-size:.813rem;font-style:italic;color:var(--ui-text-muted, #5a6470)}.cdk-drag-preview{border-radius:var(--kb-card-radius);box-shadow:0 4px 16px #00000029}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.kanban-card-placeholder{display:none;opacity:.12;border-radius:var(--kb-card-radius);min-height:48px;background:var(--ui-accent, #3584e4)}.cdk-drag-placeholder .kanban-card-placeholder{display:block}.kanban-column-body.cdk-drop-list-dragging .kanban-card-wrapper:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIKanbanBoard, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-kanban-board", standalone: true, imports: [
+                        NgTemplateOutlet,
+                        CdkDropListGroup,
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragPlaceholder,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ['surfaceType'] }], host: {
+                        class: "ui-kanban-board",
+                    }, template: "<div class=\"kanban-columns\" cdkDropListGroup role=\"region\" [attr.aria-label]=\"ariaLabel()\">\n  @for (column of columns(); track column.id) {\n    <div class=\"kanban-column\" [style.border-top-color]=\"column.color ?? null\">\n      <div class=\"kanban-column-header\">\n        <span class=\"kanban-column-title\">{{ column.title }}</span>\n        <span class=\"kanban-column-count\" [attr.aria-label]=\"column.cards.length + ' cards'\">\n          {{ column.cards.length }}\n        </span>\n      </div>\n\n      <div\n        class=\"kanban-column-body\"\n        cdkDropList\n        [cdkDropListData]=\"column.cards\"\n        [id]=\"column.id\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        @for (card of column.cards; track card.id) {\n          <div\n            class=\"kanban-card-wrapper\"\n            cdkDrag\n            [cdkDragData]=\"card\"\n            tabindex=\"0\"\n            role=\"listitem\"\n            (click)=\"onCardClick(card)\"\n            (keydown.enter)=\"onCardClick(card)\"\n          >\n            <div cdkDragPlaceholder class=\"kanban-card-placeholder\"></div>\n\n            @if (cardTemplate(); as tpl) {\n              <ng-container\n                *ngTemplateOutlet=\"tpl; context: { $implicit: card, column: column }\"\n              />\n            } @else {\n              <div class=\"kanban-card-fallback\">{{ card.id }}</div>\n            }\n          </div>\n        } @empty {\n          <div class=\"kanban-column-empty\">No cards</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--kb-column-width: 280px;--kb-column-gap: 16px;--kb-card-gap: 8px;--kb-column-radius: 8px;--kb-card-radius: 6px;display:flex;flex-direction:column;width:100%;height:100%;min-height:0}.kanban-columns{display:flex;flex:1;gap:var(--kb-column-gap);overflow-x:auto;overscroll-behavior:contain;padding:4px;min-height:0}.kanban-column{flex:1 0 var(--kb-column-width);display:flex;flex-direction:column;border-radius:var(--kb-column-radius);min-height:0;max-height:100%;color:var(--ui-text, #1d232b);background:var(--ui-surface-2, #f0f2f5);border:1px solid var(--ui-border, #d4d8dd);border-top:3px solid var(--ui-border, #d4d8dd)}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}.kanban-column-title{font-weight:600;font-size:.875rem}.kanban-column-count{font-size:.75rem;border-radius:10px;padding:2px 8px;min-width:1.5em;text-align:center;color:var(--ui-text-muted, #5a6470);background:var(--ui-surface, #ffffff)}.kanban-column-body{flex:1;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:8px;display:flex;flex-direction:column;gap:var(--kb-card-gap);min-height:60px}.kanban-card-wrapper{border-radius:var(--kb-card-radius);cursor:grab;color:var(--ui-text, #1d232b);background:var(--ui-surface, #ffffff);border:1px solid var(--ui-border, #d4d8dd);box-shadow:0 1px 3px #0000000f;transition:box-shadow .15s ease,border-color .15s ease}.kanban-card-wrapper:hover{border-color:var(--ui-border-strong, #505d6d);box-shadow:0 2px 6px #0000001a}.kanban-card-wrapper:active{cursor:grabbing}.kanban-card-fallback{padding:8px 12px;font-size:.875rem}.kanban-column-empty{padding:16px;text-align:center;font-size:.813rem;font-style:italic;color:var(--ui-text-muted, #5a6470)}.cdk-drag-preview{border-radius:var(--kb-card-radius);box-shadow:0 4px 16px #00000029}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.kanban-card-placeholder{display:none;opacity:.12;border-radius:var(--kb-card-radius);min-height:48px;background:var(--ui-accent, #3584e4)}.cdk-drag-placeholder .kanban-card-placeholder{display:block}.kanban-column-body.cdk-drop-list-dragging .kanban-card-wrapper:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }, { type: i0.Output, args: ["columnsChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], cardTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], cardMoved: [{ type: i0.Output, args: ["cardMoved"] }], cardClicked: [{ type: i0.Output, args: ["cardClicked"] }] } });
+
+/**
+ * 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.
+ */
+class UIAlertDialog {
+    title = input("Alert", ...(ngDevMode ? [{ debugName: "title" }] : []));
+    message = input("", ...(ngDevMode ? [{ debugName: "message" }] : []));
+    buttonLabel = input("OK", ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
+    modalRef = inject((ModalRef));
+    dismiss() {
+        this.modalRef.close(undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIAlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: UIAlertDialog, isStandalone: true, selector: "ui-alert-dialog", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ui-alert-dialog" }, hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: `
+    <ui-dialog-header>{{ title() }}</ui-dialog-header>
+    <ui-dialog-body>
+      <p class="cd-message">{{ message() }}</p>
+    </ui-dialog-body>
+    <ui-dialog-footer>
+      <ui-button
+        variant="filled"
+        [ariaLabel]="buttonLabel()"
+        (click)="dismiss()"
+      >
+        {{ buttonLabel() }}
+      </ui-button>
+    </ui-dialog-footer>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;min-width:20rem}.cd-message{margin:0;line-height:1.55;white-space:pre-wrap}\n"], dependencies: [{ kind: "component", type: UIButton, selector: "ui-button", inputs: ["type", "variant", "color", "size", "pill", "disabled", "ariaLabel"] }, { kind: "component", type: UIDialogHeader, selector: "ui-dialog-header" }, { kind: "component", type: UIDialogBody, selector: "ui-dialog-body" }, { kind: "component", type: UIDialogFooter, selector: "ui-dialog-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIAlertDialog, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-alert-dialog", standalone: true, imports: [UIButton, UIDialogHeader, UIDialogBody, UIDialogFooter], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ['surfaceType'] }], host: { class: "ui-alert-dialog" }, template: `
+    <ui-dialog-header>{{ title() }}</ui-dialog-header>
+    <ui-dialog-body>
+      <p class="cd-message">{{ message() }}</p>
+    </ui-dialog-body>
+    <ui-dialog-footer>
+      <ui-button
+        variant="filled"
+        [ariaLabel]="buttonLabel()"
+        (click)="dismiss()"
+      >
+        {{ buttonLabel() }}
+      </ui-button>
+    </ui-dialog-footer>
+  `, styles: [":host{display:flex;flex-direction:column;min-width:20rem}.cd-message{margin:0;line-height:1.55;white-space:pre-wrap}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }] } });
+
+/**
+ * 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.
+ */
+class UIConfirmDialog {
+    title = input("Confirm", ...(ngDevMode ? [{ debugName: "title" }] : []));
+    message = input("", ...(ngDevMode ? [{ debugName: "message" }] : []));
+    confirmLabel = input("OK", ...(ngDevMode ? [{ debugName: "confirmLabel" }] : []));
+    cancelLabel = input("Cancel", ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
+    variant = input("primary", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    modalRef = inject((ModalRef));
+    confirm() {
+        this.modalRef.close(true);
+    }
+    cancel() {
+        this.modalRef.close(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: UIConfirmDialog, isStandalone: true, selector: "ui-confirm-dialog", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.danger": "variant() === 'danger'", "class.warning": "variant() === 'warning'" }, classAttribute: "ui-confirm-dialog" }, hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: `
+    <ui-dialog-header>{{ title() }}</ui-dialog-header>
+    <ui-dialog-body>
+      <p class="cd-message">{{ message() }}</p>
+    </ui-dialog-body>
+    <ui-dialog-footer>
+      <ui-button
+        variant="outlined"
+        [ariaLabel]="cancelLabel()"
+        (click)="cancel()"
+      >
+        {{ cancelLabel() }}
+      </ui-button>
+      <ui-button
+        variant="filled"
+        [ariaLabel]="confirmLabel()"
+        (click)="confirm()"
+      >
+        {{ confirmLabel() }}
+      </ui-button>
+    </ui-dialog-footer>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;min-width:20rem}.cd-message{margin:0;line-height:1.55;white-space:pre-wrap}:host(.danger){--ui-accent: #d93025}:host(.warning){--ui-accent: #e5a50a}\n"], dependencies: [{ kind: "component", type: UIButton, selector: "ui-button", inputs: ["type", "variant", "color", "size", "pill", "disabled", "ariaLabel"] }, { kind: "component", type: UIDialogHeader, selector: "ui-dialog-header" }, { kind: "component", type: UIDialogBody, selector: "ui-dialog-body" }, { kind: "component", type: UIDialogFooter, selector: "ui-dialog-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIConfirmDialog, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-confirm-dialog", standalone: true, imports: [UIButton, UIDialogHeader, UIDialogBody, UIDialogFooter], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }], host: {
+                        class: "ui-confirm-dialog",
+                        "[class.danger]": "variant() === 'danger'",
+                        "[class.warning]": "variant() === 'warning'",
+                    }, template: `
+    <ui-dialog-header>{{ title() }}</ui-dialog-header>
+    <ui-dialog-body>
+      <p class="cd-message">{{ message() }}</p>
+    </ui-dialog-body>
+    <ui-dialog-footer>
+      <ui-button
+        variant="outlined"
+        [ariaLabel]="cancelLabel()"
+        (click)="cancel()"
+      >
+        {{ cancelLabel() }}
+      </ui-button>
+      <ui-button
+        variant="filled"
+        [ariaLabel]="confirmLabel()"
+        (click)="confirm()"
+      >
+        {{ confirmLabel() }}
+      </ui-button>
+    </ui-dialog-footer>
+  `, styles: [":host{display:flex;flex-direction:column;min-width:20rem}.cd-message{margin:0;line-height:1.55;white-space:pre-wrap}:host(.danger){--ui-accent: #d93025}:host(.warning){--ui-accent: #e5a50a}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+/**
+ * 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.
+ */
+class UIPromptDialog {
+    title = input("Prompt", ...(ngDevMode ? [{ debugName: "title" }] : []));
+    message = input("", ...(ngDevMode ? [{ debugName: "message" }] : []));
+    defaultValue = input("", ...(ngDevMode ? [{ debugName: "defaultValue" }] : []));
+    placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    okLabel = input("OK", ...(ngDevMode ? [{ debugName: "okLabel" }] : []));
+    cancelLabel = input("Cancel", ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
+    inputValue = signal("", ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    modalRef = inject((ModalRef));
+    ngOnInit() {
+        this.inputValue.set(this.defaultValue());
+    }
+    ok() {
+        this.modalRef.close(this.inputValue());
+    }
+    cancel() {
+        this.modalRef.close(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIPromptDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: UIPromptDialog, isStandalone: true, selector: "ui-prompt-dialog", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, okLabel: { classPropertyName: "okLabel", publicName: "okLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ui-prompt-dialog" }, hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: `
+    <ui-dialog-header>{{ title() }}</ui-dialog-header>
+    <ui-dialog-body>
+      <p class="cd-message">{{ message() }}</p>
+      <ui-input
+        [(value)]="inputValue"
+        [placeholder]="placeholder()"
+        ariaLabel="Prompt input"
+      />
+    </ui-dialog-body>
+    <ui-dialog-footer>
+      <ui-button
+        variant="outlined"
+        [ariaLabel]="cancelLabel()"
+        (click)="cancel()"
+      >
+        {{ cancelLabel() }}
+      </ui-button>
+      <ui-button variant="filled" [ariaLabel]="okLabel()" (click)="ok()">
+        {{ okLabel() }}
+      </ui-button>
+    </ui-dialog-footer>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;min-width:24rem}.cd-message{margin:0 0 .75rem;line-height:1.55;white-space:pre-wrap}\n"], dependencies: [{ kind: "component", type: UIButton, selector: "ui-button", inputs: ["type", "variant", "color", "size", "pill", "disabled", "ariaLabel"] }, { kind: "component", type: UIInput, selector: "ui-input", inputs: ["type", "text", "value", "adapter", "placeholder", "disabled", "multiline", "rows", "heightAdjustable", "ariaLabel"], outputs: ["textChange", "valueChange"] }, { kind: "component", type: UIDialogHeader, selector: "ui-dialog-header" }, { kind: "component", type: UIDialogBody, selector: "ui-dialog-body" }, { kind: "component", type: UIDialogFooter, selector: "ui-dialog-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIPromptDialog, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-prompt-dialog", standalone: true, imports: [UIButton, UIInput, UIDialogHeader, UIDialogBody, UIDialogFooter], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ['surfaceType'] }], host: { class: "ui-prompt-dialog" }, template: `
+    <ui-dialog-header>{{ title() }}</ui-dialog-header>
+    <ui-dialog-body>
+      <p class="cd-message">{{ message() }}</p>
+      <ui-input
+        [(value)]="inputValue"
+        [placeholder]="placeholder()"
+        ariaLabel="Prompt input"
+      />
+    </ui-dialog-body>
+    <ui-dialog-footer>
+      <ui-button
+        variant="outlined"
+        [ariaLabel]="cancelLabel()"
+        (click)="cancel()"
+      >
+        {{ cancelLabel() }}
+      </ui-button>
+      <ui-button variant="filled" [ariaLabel]="okLabel()" (click)="ok()">
+        {{ okLabel() }}
+      </ui-button>
+    </ui-dialog-footer>
+  `, styles: [":host{display:flex;flex-direction:column;min-width:24rem}.cd-message{margin:0 0 .75rem;line-height:1.55;white-space:pre-wrap}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], okLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "okLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }] } });
+
+/**
+ * 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.
+ */
+class UIOpenFileDialog {
+    title = input("Open File", ...(ngDevMode ? [{ debugName: "title" }] : []));
+    openLabel = input("Open", ...(ngDevMode ? [{ debugName: "openLabel" }] : []));
+    datasource = input.required(...(ngDevMode ? [{ debugName: "datasource" }] : []));
+    selectedFile = signal(null, ...(ngDevMode ? [{ debugName: "selectedFile" }] : []));
+    modalRef = inject((ModalRef));
+    onFileActivated(_event) {
+        const entry = this.selectedFile();
+        if (entry && !entry.isDirectory) {
+            this.modalRef.close({ files: [entry] });
+        }
+    }
+    open() {
+        const entry = this.selectedFile();
+        if (entry && !entry.isDirectory) {
+            this.modalRef.close({ files: [entry] });
+        }
+    }
+    cancel() {
+        this.modalRef.close(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIOpenFileDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: UIOpenFileDialog, isStandalone: true, selector: "ui-open-file-dialog", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ui-open-file-dialog" }, hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: `
+    <ui-dialog-header>{{ title() }}</ui-dialog-header>
+    <ui-dialog-body>
+      <ui-file-browser
+        [datasource]="datasource()"
+        [(selectedEntry)]="selectedFile"
+        (fileActivated)="onFileActivated($event)"
+        ariaLabel="Browse files"
+      />
+    </ui-dialog-body>
+    <ui-dialog-footer>
+      <ui-button variant="outlined" ariaLabel="Cancel" (click)="cancel()">
+        Cancel
+      </ui-button>
+      <ui-button
+        variant="filled"
+        [ariaLabel]="openLabel()"
+        [disabled]="!selectedFile() || selectedFile()!.isDirectory"
+        (click)="open()"
+      >
+        {{ openLabel() }}
+      </ui-button>
+    </ui-dialog-footer>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;min-width:36rem}:host ::ng-deep ui-dialog-body{height:24rem;overflow:hidden}:host ::ng-deep ui-dialog-body ui-file-browser{height:100%}\n"], dependencies: [{ kind: "component", type: UIButton, selector: "ui-button", inputs: ["type", "variant", "color", "size", "pill", "disabled", "ariaLabel"] }, { kind: "component", type: UIDialogHeader, selector: "ui-dialog-header" }, { kind: "component", type: UIDialogBody, selector: "ui-dialog-body" }, { kind: "component", type: UIDialogFooter, selector: "ui-dialog-footer" }, { kind: "component", type: UIFileBrowser, selector: "ui-file-browser", inputs: ["datasource", "ariaLabel", "showSidebar", "rootLabel", "viewMode", "showDetails", "name", "metadataProvider", "selectedEntry"], outputs: ["selectedEntryChange", "fileActivated", "directoryChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIOpenFileDialog, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-open-file-dialog", standalone: true, imports: [
+                        UIButton,
+                        UIDialogHeader,
+                        UIDialogBody,
+                        UIDialogFooter,
+                        UIFileBrowser,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ['surfaceType'] }], host: { class: "ui-open-file-dialog" }, template: `
+    <ui-dialog-header>{{ title() }}</ui-dialog-header>
+    <ui-dialog-body>
+      <ui-file-browser
+        [datasource]="datasource()"
+        [(selectedEntry)]="selectedFile"
+        (fileActivated)="onFileActivated($event)"
+        ariaLabel="Browse files"
+      />
+    </ui-dialog-body>
+    <ui-dialog-footer>
+      <ui-button variant="outlined" ariaLabel="Cancel" (click)="cancel()">
+        Cancel
+      </ui-button>
+      <ui-button
+        variant="filled"
+        [ariaLabel]="openLabel()"
+        [disabled]="!selectedFile() || selectedFile()!.isDirectory"
+        (click)="open()"
+      >
+        {{ openLabel() }}
+      </ui-button>
+    </ui-dialog-footer>
+  `, styles: [":host{display:flex;flex-direction:column;min-width:36rem}:host ::ng-deep ui-dialog-body{height:24rem;overflow:hidden}:host ::ng-deep ui-dialog-body ui-file-browser{height:100%}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], openLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openLabel", required: false }] }], datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }] } });
+
+/**
+ * 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.
+ */
+class UISaveFileDialog {
+    title = input("Save File", ...(ngDevMode ? [{ debugName: "title" }] : []));
+    saveLabel = input("Save", ...(ngDevMode ? [{ debugName: "saveLabel" }] : []));
+    defaultName = input("", ...(ngDevMode ? [{ debugName: "defaultName" }] : []));
+    datasource = input.required(...(ngDevMode ? [{ debugName: "datasource" }] : []));
+    fileName = signal("", ...(ngDevMode ? [{ debugName: "fileName" }] : []));
+    currentDir = signal(null, ...(ngDevMode ? [{ debugName: "currentDir" }] : []));
+    modalRef = inject((ModalRef));
+    ngOnInit() {
+        this.fileName.set(this.defaultName());
+    }
+    onDirectoryChange(event) {
+        this.currentDir.set(event.directory);
+    }
+    save() {
+        const name = this.fileName().trim();
+        if (name) {
+            this.modalRef.close({ directory: this.currentDir(), name });
+        }
+    }
+    cancel() {
+        this.modalRef.close(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UISaveFileDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: UISaveFileDialog, isStandalone: true, selector: "ui-save-file-dialog", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, saveLabel: { classPropertyName: "saveLabel", publicName: "saveLabel", isSignal: true, isRequired: false, transformFunction: null }, defaultName: { classPropertyName: "defaultName", publicName: "defaultName", isSignal: true, isRequired: false, transformFunction: null }, datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ui-save-file-dialog" }, hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: `
+    <ui-dialog-header>{{ title() }}</ui-dialog-header>
+    <ui-dialog-body>
+      <ui-file-browser
+        [datasource]="datasource()"
+        (directoryChange)="onDirectoryChange($event)"
+        ariaLabel="Browse directories"
+      />
+      <div class="cd-filename-row">
+        <span class="cd-filename-label">File name:</span>
+        <ui-input
+          [(value)]="fileName"
+          placeholder="Enter file name"
+          ariaLabel="File name"
+        />
+      </div>
+    </ui-dialog-body>
+    <ui-dialog-footer>
+      <ui-button variant="outlined" ariaLabel="Cancel" (click)="cancel()">
+        Cancel
+      </ui-button>
+      <ui-button
+        variant="filled"
+        [ariaLabel]="saveLabel()"
+        [disabled]="!fileName().trim()"
+        (click)="save()"
+      >
+        {{ saveLabel() }}
+      </ui-button>
+    </ui-dialog-footer>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;min-width:36rem}:host ::ng-deep ui-dialog-body{display:flex;flex-direction:column;gap:.75rem;height:26rem;overflow:hidden}:host ::ng-deep ui-dialog-body ui-file-browser{flex:1;min-height:0}.cd-filename-row{display:flex;align-items:center;gap:.75rem}.cd-filename-label{font-weight:600;font-size:.88rem;white-space:nowrap}.cd-filename-row ui-input{flex:1}\n"], dependencies: [{ kind: "component", type: UIButton, selector: "ui-button", inputs: ["type", "variant", "color", "size", "pill", "disabled", "ariaLabel"] }, { kind: "component", type: UIInput, selector: "ui-input", inputs: ["type", "text", "value", "adapter", "placeholder", "disabled", "multiline", "rows", "heightAdjustable", "ariaLabel"], outputs: ["textChange", "valueChange"] }, { kind: "component", type: UIDialogHeader, selector: "ui-dialog-header" }, { kind: "component", type: UIDialogBody, selector: "ui-dialog-body" }, { kind: "component", type: UIDialogFooter, selector: "ui-dialog-footer" }, { kind: "component", type: UIFileBrowser, selector: "ui-file-browser", inputs: ["datasource", "ariaLabel", "showSidebar", "rootLabel", "viewMode", "showDetails", "name", "metadataProvider", "selectedEntry"], outputs: ["selectedEntryChange", "fileActivated", "directoryChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UISaveFileDialog, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-save-file-dialog", standalone: true, imports: [
+                        UIButton,
+                        UIInput,
+                        UIDialogHeader,
+                        UIDialogBody,
+                        UIDialogFooter,
+                        UIFileBrowser,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ['surfaceType'] }], host: { class: "ui-save-file-dialog" }, template: `
+    <ui-dialog-header>{{ title() }}</ui-dialog-header>
+    <ui-dialog-body>
+      <ui-file-browser
+        [datasource]="datasource()"
+        (directoryChange)="onDirectoryChange($event)"
+        ariaLabel="Browse directories"
+      />
+      <div class="cd-filename-row">
+        <span class="cd-filename-label">File name:</span>
+        <ui-input
+          [(value)]="fileName"
+          placeholder="Enter file name"
+          ariaLabel="File name"
+        />
+      </div>
+    </ui-dialog-body>
+    <ui-dialog-footer>
+      <ui-button variant="outlined" ariaLabel="Cancel" (click)="cancel()">
+        Cancel
+      </ui-button>
+      <ui-button
+        variant="filled"
+        [ariaLabel]="saveLabel()"
+        [disabled]="!fileName().trim()"
+        (click)="save()"
+      >
+        {{ saveLabel() }}
+      </ui-button>
+    </ui-dialog-footer>
+  `, styles: [":host{display:flex;flex-direction:column;min-width:36rem}:host ::ng-deep ui-dialog-body{display:flex;flex-direction:column;gap:.75rem;height:26rem;overflow:hidden}:host ::ng-deep ui-dialog-body ui-file-browser{flex:1;min-height:0}.cd-filename-row{display:flex;align-items:center;gap:.75rem}.cd-filename-label{font-weight:600;font-size:.88rem;white-space:nowrap}.cd-filename-row ui-input{flex:1}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], saveLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveLabel", required: false }] }], defaultName: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultName", required: false }] }], datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }] } });
+
+/**
+ * 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.
+ */
+class UIAboutDialog {
+    appName = input("Application", ...(ngDevMode ? [{ debugName: "appName" }] : []));
+    version = input("", ...(ngDevMode ? [{ debugName: "version" }] : []));
+    description = input("", ...(ngDevMode ? [{ debugName: "description" }] : []));
+    logoUrl = input("", ...(ngDevMode ? [{ debugName: "logoUrl" }] : []));
+    copyright = input("", ...(ngDevMode ? [{ debugName: "copyright" }] : []));
+    credits = input([], ...(ngDevMode ? [{ debugName: "credits" }] : []));
+    modalRef = inject((ModalRef));
+    dismiss() {
+        this.modalRef.close(undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIAboutDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIAboutDialog, isStandalone: true, selector: "ui-about-dialog", inputs: { appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null }, credits: { classPropertyName: "credits", publicName: "credits", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ui-about-dialog" }, hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: `
+    <ui-dialog-header>About {{ appName() }}</ui-dialog-header>
+    <ui-dialog-body>
+      <div class="cd-about-content">
+        @if (logoUrl()) {
+          <img
+            class="cd-about-logo"
+            [src]="logoUrl()"
+            [alt]="appName() + ' logo'"
+          />
+        }
+        <h2 class="cd-about-name">{{ appName() }}</h2>
+        @if (version()) {
+          <span class="cd-about-version">Version {{ version() }}</span>
+        }
+        @if (description()) {
+          <p class="cd-about-desc">{{ description() }}</p>
+        }
+        @if (credits().length > 0) {
+          <div class="cd-about-credits">
+            <h4 class="cd-about-credits-title">Credits</h4>
+            <ul class="cd-about-credits-list">
+              @for (credit of credits(); track credit) {
+                <li>{{ credit }}</li>
+              }
+            </ul>
+          </div>
+        }
+        @if (copyright()) {
+          <p class="cd-about-copyright">{{ copyright() }}</p>
+        }
+      </div>
+    </ui-dialog-body>
+    <ui-dialog-footer>
+      <ui-button variant="filled" ariaLabel="Close" (click)="dismiss()">
+        Close
+      </ui-button>
+    </ui-dialog-footer>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;min-width:22rem;max-width:28rem}.cd-about-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem}.cd-about-logo{width:64px;height:64px;object-fit:contain;margin-bottom:.5rem}.cd-about-name{margin:0;font-size:1.25rem;font-weight:700}.cd-about-version{font-size:.82rem;color:var(--ui-text-muted, #5a6470)}.cd-about-desc{margin:.5rem 0 0;line-height:1.55;font-size:.92rem}.cd-about-credits{margin-top:.75rem;width:100%;text-align:left}.cd-about-credits-title{margin:0 0 .35rem;font-size:.85rem;font-weight:600}.cd-about-credits-list{margin:0;padding-left:1.25rem;font-size:.85rem;line-height:1.6;color:var(--ui-text-muted, #5a6470)}.cd-about-copyright{margin:.75rem 0 0;font-size:.78rem;color:var(--ui-text-muted, #5a6470)}\n"], dependencies: [{ kind: "component", type: UIButton, selector: "ui-button", inputs: ["type", "variant", "color", "size", "pill", "disabled", "ariaLabel"] }, { kind: "component", type: UIDialogHeader, selector: "ui-dialog-header" }, { kind: "component", type: UIDialogBody, selector: "ui-dialog-body" }, { kind: "component", type: UIDialogFooter, selector: "ui-dialog-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIAboutDialog, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-about-dialog", standalone: true, imports: [UIButton, UIDialogHeader, UIDialogBody, UIDialogFooter], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ['surfaceType'] }], host: { class: "ui-about-dialog" }, template: `
+    <ui-dialog-header>About {{ appName() }}</ui-dialog-header>
+    <ui-dialog-body>
+      <div class="cd-about-content">
+        @if (logoUrl()) {
+          <img
+            class="cd-about-logo"
+            [src]="logoUrl()"
+            [alt]="appName() + ' logo'"
+          />
+        }
+        <h2 class="cd-about-name">{{ appName() }}</h2>
+        @if (version()) {
+          <span class="cd-about-version">Version {{ version() }}</span>
+        }
+        @if (description()) {
+          <p class="cd-about-desc">{{ description() }}</p>
+        }
+        @if (credits().length > 0) {
+          <div class="cd-about-credits">
+            <h4 class="cd-about-credits-title">Credits</h4>
+            <ul class="cd-about-credits-list">
+              @for (credit of credits(); track credit) {
+                <li>{{ credit }}</li>
+              }
+            </ul>
+          </div>
+        }
+        @if (copyright()) {
+          <p class="cd-about-copyright">{{ copyright() }}</p>
+        }
+      </div>
+    </ui-dialog-body>
+    <ui-dialog-footer>
+      <ui-button variant="filled" ariaLabel="Close" (click)="dismiss()">
+        Close
+      </ui-button>
+    </ui-dialog-footer>
+  `, styles: [":host{display:flex;flex-direction:column;min-width:22rem;max-width:28rem}.cd-about-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem}.cd-about-logo{width:64px;height:64px;object-fit:contain;margin-bottom:.5rem}.cd-about-name{margin:0;font-size:1.25rem;font-weight:700}.cd-about-version{font-size:.82rem;color:var(--ui-text-muted, #5a6470)}.cd-about-desc{margin:.5rem 0 0;line-height:1.55;font-size:.92rem}.cd-about-credits{margin-top:.75rem;width:100%;text-align:left}.cd-about-credits-title{margin:0 0 .35rem;font-size:.85rem;font-weight:600}.cd-about-credits-list{margin:0;padding-left:1.25rem;font-size:.85rem;line-height:1.6;color:var(--ui-text-muted, #5a6470)}.cd-about-copyright{margin:.75rem 0 0;font-size:.78rem;color:var(--ui-text-muted, #5a6470)}\n"] }]
+        }], propDecorators: { appName: [{ type: i0.Input, args: [{ isSignal: true, alias: "appName", required: false }] }], version: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], logoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoUrl", required: false }] }], copyright: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyright", required: false }] }], credits: [{ type: i0.Input, args: [{ isSignal: true, alias: "credits", required: false }] }] } });
+
+/**
+ * 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) { ... }
+ * ```
+ */
+class CommonDialogService {
+    modal = inject(ModalService);
+    /**
+     * Show a simple informational alert with a dismiss button.
+     *
+     * @returns Resolves when the user dismisses the dialog.
+     */
+    async alert(options) {
+        const ref = this.modal.openModal({
+            component: UIAlertDialog,
+            inputs: {
+                title: options.title,
+                message: options.message,
+                buttonLabel: options.buttonLabel ?? "OK",
+            },
+            ariaLabel: options.ariaLabel ?? options.title,
+        });
+        await firstValueFrom(ref.closed);
+    }
+    /**
+     * Show a confirmation dialog with confirm and cancel buttons.
+     *
+     * @returns `true` if the user confirmed, `false` otherwise.
+     */
+    async confirm(options) {
+        const ref = this.modal.openModal({
+            component: UIConfirmDialog,
+            inputs: {
+                title: options.title,
+                message: options.message,
+                confirmLabel: options.confirmLabel ?? "OK",
+                cancelLabel: options.cancelLabel ?? "Cancel",
+                variant: options.variant ?? "primary",
+            },
+            ariaLabel: options.ariaLabel ?? options.title,
+        });
+        const result = await firstValueFrom(ref.closed);
+        return result ?? false;
+    }
+    /**
+     * Show a prompt dialog with a text input.
+     *
+     * @returns The entered string, or `null` if cancelled.
+     */
+    async prompt(options) {
+        const ref = this.modal.openModal({
+            component: UIPromptDialog,
+            inputs: {
+                title: options.title,
+                message: options.message,
+                defaultValue: options.defaultValue ?? "",
+                placeholder: options.placeholder ?? "",
+                okLabel: options.okLabel ?? "OK",
+                cancelLabel: options.cancelLabel ?? "Cancel",
+            },
+            ariaLabel: options.ariaLabel ?? options.title,
+        });
+        const result = await firstValueFrom(ref.closed);
+        return result ?? null;
+    }
+    /**
+     * Show an open-file dialog powered by {@link UIFileBrowser}.
+     *
+     * @returns The selected file(s), or `null` if cancelled.
+     */
+    async openFile(options) {
+        const ref = this.modal.openModal({
+            component: UIOpenFileDialog,
+            inputs: {
+                title: options.title ?? "Open File",
+                openLabel: options.openLabel ?? "Open",
+                datasource: options.datasource,
+            },
+            ariaLabel: options.ariaLabel ?? options.title ?? "Open File",
+        });
+        const result = await firstValueFrom(ref.closed);
+        return result ?? 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.
+     */
+    async saveFile(options) {
+        const ref = this.modal.openModal({
+            component: UISaveFileDialog,
+            inputs: {
+                title: options.title ?? "Save File",
+                saveLabel: options.saveLabel ?? "Save",
+                defaultName: options.defaultName ?? "",
+                datasource: options.datasource,
+            },
+            ariaLabel: options.ariaLabel ?? options.title ?? "Save File",
+        });
+        const result = await firstValueFrom(ref.closed);
+        return result ?? null;
+    }
+    /**
+     * Show an "About" dialog with application information.
+     *
+     * @returns Resolves when the user closes the dialog.
+     */
+    async about(options) {
+        const ref = this.modal.openModal({
+            component: UIAboutDialog,
+            inputs: {
+                appName: options.appName,
+                version: options.version ?? "",
+                description: options.description ?? "",
+                logoUrl: options.logoUrl ?? "",
+                copyright: options.copyright ?? "",
+                credits: options.credits ?? [],
+            },
+            ariaLabel: options.ariaLabel ?? `About ${options.appName}`,
+        });
+        await firstValueFrom(ref.closed);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CommonDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CommonDialogService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CommonDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+/*
+ * Public API Surface of @theredhead/lucid-blocks
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+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 };
+//# sourceMappingURL=theredhead-lucid-blocks.mjs.map