@akcelik/strct 1.6.0 → 1.10.2

package/fesm2022/akcelik-strct.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, model, output, booleanAttribute, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, contentChild, viewChild, viewChildren, untracked, TemplateRef, Renderer2 } from '@angular/core';
+import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, model, output, booleanAttribute, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, contentChild, viewChild, viewChildren, untracked, TemplateRef, Renderer2, Pipe } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
@@ -256,6 +256,7 @@ const STRCT_ICON_DEFS = {
     megaphone: '<path d="M3 7.3v1.6l7 3V4.3zM10 5.7 12.5 4.2v7.6L10 10.3M4 9.6l.9 3.1h1.6l-.7-2.9"/>',
     flag: '<path d="M4 13.5V3M4 3.6h7.4L9.8 6.2l1.6 2.6H4"/>',
     shieldAlert: '<path d="M8 2.3l5.2 1.9v3.3c0 3.1-2.3 5.1-5.2 6.4C5.1 12.6 2.8 10.6 2.8 7.5V4.2z"/><path d="M8 5.5v3.1M8 10.6v.2"/>',
+    rocket: '<path d="M8 1.8c1.9 1.3 2.9 3.1 2.9 5.3 0 1.5-.4 2.9-1 4.1H6.1c-.6-1.2-1-2.6-1-4.1 0-2.2 1-4 2.9-5.3z"/><circle cx="8" cy="6.3" r="1.1"/><path d="M5.1 8.9 3.5 11l2-.2M10.9 8.9l1.6 2.1-2-.2M6.9 11.2 8 14.1l1.1-2.9"/>',
     shieldCheck: '<path d="M8 2.3l5.2 1.9v3.3c0 3.1-2.3 5.1-5.2 6.4C5.1 12.6 2.8 10.6 2.8 7.5V4.2z"/><path d="M5.9 7.9l1.5 1.5 2.8-2.9"/>',
     // ── State / action (also usable as badges via the icon `badge` input) ─
     running: '<path d="M5.5 4l6 4-6 4z"/>',
@@ -539,6 +540,7 @@ const STRCT_ICON_GROUPS = [
             'api',
             'bolt',
             'queue',
+            'rocket',
         ],
     },
     {
@@ -3381,6 +3383,13 @@ class StrctDropdown {
     /** Accessible name of the popover dialog (localizable). */
     popoverLabel = input('Filters', ...(ngDevMode ? [{ debugName: "popoverLabel" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // The static `popover` attribute collides with the native HTML Popover
+        // API: the UA styles [popover] hosts (Canvas background, medium border,
+        // fixed positioning) — a white frame around the trigger in dark themes.
+        // Angular has already read the input by now; the DOM attribute must go.
+        this.host.nativeElement.removeAttribute('popover');
+    }
     toggle() {
         this.open.update((v) => !v);
     }
@@ -3402,17 +3411,13 @@ class StrctDropdown {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctDropdown, isStandalone: true, selector: "strct-dropdown", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, popover: { classPropertyName: "popover", publicName: "popover", isSignal: true, isRequired: false, transformFunction: null }, popoverLabel: { classPropertyName: "popoverLabel", publicName: "popoverLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape()" }, classAttribute: "strct-dd" }, ngImport: i0, template: `
-    <div
-      #trigger
-      class="strct-dd__trigger"
-      role="button"
-      tabindex="0"
-      [attr.aria-haspopup]="popover() ? 'dialog' : 'menu'"
-      [attr.aria-expanded]="open()"
-      (click)="toggle()"
-      (keydown.enter)="toggle()"
-      (keydown.space)="toggle()"
-    >
+    <!--
+      The wrapper is intentionally inert: the projected trigger should be a
+      real button (nesting interactives fails axe). Its native click —
+      pointer or Enter/Space — bubbles here; the strctDropdownTrigger
+      directive puts aria-haspopup/aria-expanded on the button itself.
+    -->
+    <div #trigger class="strct-dd__trigger" (click)="toggle()">
       <ng-content select="[strctDropdownTrigger]" />
     </div>
     <!--
@@ -3440,17 +3445,13 @@ class StrctDropdown {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdown, decorators: [{
             type: Component,
             args: [{ selector: 'strct-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctOverlay], template: `
-    <div
-      #trigger
-      class="strct-dd__trigger"
-      role="button"
-      tabindex="0"
-      [attr.aria-haspopup]="popover() ? 'dialog' : 'menu'"
-      [attr.aria-expanded]="open()"
-      (click)="toggle()"
-      (keydown.enter)="toggle()"
-      (keydown.space)="toggle()"
-    >
+    <!--
+      The wrapper is intentionally inert: the projected trigger should be a
+      real button (nesting interactives fails axe). Its native click —
+      pointer or Enter/Space — bubbles here; the strctDropdownTrigger
+      directive puts aria-haspopup/aria-expanded on the button itself.
+    -->
+    <div #trigger class="strct-dd__trigger" (click)="toggle()">
       <ng-content select="[strctDropdownTrigger]" />
     </div>
     <!--
@@ -3474,13 +3475,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       </div>
     }
   `, host: { class: 'strct-dd' }, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:200;min-width:170px;max-width:calc(100vw - 24px);padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}.strct-dd__menu--popover{min-width:240px;padding:12px 14px}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"] }]
-        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }], popoverLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverLabel", required: false }] }], onDocClick: [{
+        }], ctorParameters: () => [], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }], popoverLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverLabel", required: false }] }], onDocClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
             }] } });
+/**
+ * Marks (and upgrades) the dropdown's trigger element. The attribute alone is
+ * enough for content projection; importing the directive additionally wires
+ * `aria-haspopup` / `aria-expanded` onto the real button.
+ */
+class StrctDropdownTrigger {
+    dd = inject(StrctDropdown, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdownTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: StrctDropdownTrigger, isStandalone: true, selector: "[strctDropdownTrigger]", host: { properties: { "attr.aria-haspopup": "dd ? (dd.popover() ? 'dialog' : 'menu') : null", "attr.aria-expanded": "dd ? dd.open() : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdownTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[strctDropdownTrigger]',
+                    host: {
+                        '[attr.aria-haspopup]': "dd ? (dd.popover() ? 'dialog' : 'menu') : null",
+                        '[attr.aria-expanded]': 'dd ? dd.open() : null',
+                    },
+                }]
+        }] });
 /** A selectable row inside a `<strct-dropdown>`. */
 class StrctDropdownItem {
     /** Danger. */
@@ -8262,6 +8283,11 @@ const DG_LABELS = {
     chooseColumns: 'Choose columns',
     refresh: 'Refresh data',
     actions: 'Actions',
+    filterColumn: 'Filter',
+    filterPlaceholder: 'Filter…',
+    clearFilter: 'Clear filter',
+    editCell: 'Edit',
+    toggleChildren: 'Toggle children',
 };
 /** Utility-column widths used when sticky columns are active (px). */
 const UTIL_W = { detail: 36, expand: 36, sel: 40 };
@@ -8389,6 +8415,19 @@ class StrctDatagrid {
      * groups. Paging is bypassed while grouped; not combinable with `virtual`.
      */
     groupBy = input(null, ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way per-column filter state: `key → contains-text` (text filter) or
+     * `key → unknown[]` (checked value set). Applied client-side; in `lazy`
+     * mode it is passed through on `lazyLoad` instead.
+     */
+    filters = model({}, ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    /**
+     * Tree-grid: the row property holding a row's children array. Rows render
+     * hierarchically with indent + carets; sorting applies per sibling level;
+     * an active filter shows matches with their ancestors, force-expanded.
+     * Not combinable with `groupBy` or `lazy`.
+     */
+    childrenKey = input(null, ...(ngDevMode ? [{ debugName: "childrenKey" }] : /* istanbul ignore next */ []));
     /** Emitted when the selection changes. */
     selectionChange = output();
     /** Emitted when the refresh button is clicked. */
@@ -8397,6 +8436,9 @@ class StrctDatagrid {
     rowAction = output();
     /** Server-side data request (lazy mode): load this page / sort and set `rows`. */
     lazyLoad = output();
+    /** An editable cell was committed (Enter / blur). The grid does not mutate
+     *  rows — apply `value` to your data and pass the updated array back in. */
+    cellEdit = output();
     menu = inject(StrctMenuService);
     detailDef = contentChild(StrctRowDetailDef, ...(ngDevMode ? [{ debugName: "detailDef" }] : /* istanbul ignore next */ []));
     actionBarDef = contentChild(StrctDatagridActionBar, ...(ngDevMode ? [{ debugName: "actionBarDef" }] : /* istanbul ignore next */ []));
@@ -8493,6 +8535,11 @@ class StrctDatagrid {
     dragKey = signal(null, ...(ngDevMode ? [{ debugName: "dragKey" }] : /* istanbul ignore next */ []));
     dropKey = signal(null, ...(ngDevMode ? [{ debugName: "dropKey" }] : /* istanbul ignore next */ []));
     onColDragStart(key, event) {
+        // Text selection inside the filter panel must not start a column drag.
+        if (event.target?.closest?.('.strct-dg__filterpanel')) {
+            event.preventDefault();
+            return;
+        }
         if (!this.reorderable())
             return;
         this.dragKey.set(key);
@@ -8562,12 +8609,154 @@ class StrctDatagrid {
     itemKey(it) {
         return it.group ? `strct-group:${String(it.group.key)}` : this.rowKey(it.row);
     }
+    // ── Column filter popover ──────────────────────────────────────
+    filterOpenKey = signal(null, ...(ngDevMode ? [{ debugName: "filterOpenKey" }] : /* istanbul ignore next */ []));
+    toggleFilterPanel(key, event) {
+        event.stopPropagation();
+        this.filterOpenKey.set(this.filterOpenKey() === key ? null : key);
+    }
+    hasFilter(key) {
+        const v = this.filters()[key];
+        return Array.isArray(v) ? v.length > 0 : v != null && String(v).trim() !== '';
+    }
+    textFilter(key) {
+        const v = this.filters()[key];
+        return typeof v === 'string' ? v : '';
+    }
+    setTextFilter(key, value) {
+        this.filters.update((f) => ({ ...f, [key]: value }));
+    }
+    optionChecked(key, opt) {
+        const v = this.filters()[key];
+        return Array.isArray(v) && v.includes(opt);
+    }
+    toggleFilterOption(key, opt) {
+        this.filters.update((f) => {
+            const cur = Array.isArray(f[key]) ? [...f[key]] : [];
+            const i = cur.indexOf(opt);
+            if (i >= 0)
+                cur.splice(i, 1);
+            else
+                cur.push(opt);
+            return { ...f, [key]: cur };
+        });
+    }
+    clearFilter(key) {
+        this.filters.update((f) => {
+            const next = { ...f };
+            delete next[key];
+            return next;
+        });
+    }
+    onDocClickFilter(event) {
+        if (!this.filterOpenKey())
+            return;
+        const t = event.target;
+        if (t.closest('.strct-dg__filterpanel') || t.closest('.strct-dg__filterbtn'))
+            return;
+        this.filterOpenKey.set(null);
+    }
+    onEscapeFilter() {
+        this.filterOpenKey.set(null);
+    }
+    // ── Tree-grid state ────────────────────────────────────────────
+    expandedTree = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedTree" }] : /* istanbul ignore next */ []));
+    treeDepth(row) {
+        return this.treeFlat().meta.get(this.rowKey(row))?.depth ?? 0;
+    }
+    treeHasChildren(row) {
+        return this.treeFlat().meta.get(this.rowKey(row))?.hasChildren ?? false;
+    }
+    treeExpanded(row) {
+        return this.treeFlat().meta.get(this.rowKey(row))?.expanded ?? false;
+    }
+    /** Expand / collapse one tree row. */
+    toggleTreeRow(row) {
+        const key = this.rowKey(row);
+        const next = new Set(this.expandedTree());
+        if (next.has(key))
+            next.delete(key);
+        else
+            next.add(key);
+        this.expandedTree.set(next);
+    }
+    // ── Inline cell editing ────────────────────────────────────────
+    hostRef = inject(ElementRef);
+    editing = signal(null, ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+    isEditingCell(row, col) {
+        const e = this.editing();
+        return !!e && e.rowKey === this.rowKey(row) && e.colKey === col.key;
+    }
+    startEdit(row, col) {
+        this.editing.set({ rowKey: this.rowKey(row), colKey: col.key });
+        setTimeout(() => this.hostRef.nativeElement.querySelector('.strct-dg__editinput')?.focus());
+    }
+    commitEdit(row, col, event) {
+        if (!this.isEditingCell(row, col))
+            return; // Escape/Enter already closed it
+        const value = event.target.value;
+        this.editing.set(null);
+        const previous = row[col.key];
+        if (String(previous ?? '') !== value)
+            this.cellEdit.emit({ row, column: col, value, previous });
+    }
+    cancelEdit(event) {
+        event?.stopPropagation();
+        this.editing.set(null);
+    }
+    /** Active (non-empty) filter entries. */
+    activeFilters = computed(() => Object.entries(this.filters()).filter(([, v]) => Array.isArray(v) ? v.length > 0 : String(v).trim() !== ''), ...(ngDevMode ? [{ debugName: "activeFilters" }] : /* istanbul ignore next */ []));
+    matchesFilters(row) {
+        return this.activeFilters().every(([key, v]) => Array.isArray(v)
+            ? v.some((opt) => opt === row[key])
+            : String(row[key] ?? '')
+                .toLowerCase()
+                .includes(String(v).trim().toLowerCase()));
+    }
+    /** Rows surviving the per-column filters (client-side modes only). */
+    filteredRows = computed(() => {
+        if (this.lazy() || !this.activeFilters().length)
+            return this.rows();
+        return this.rows().filter((r) => this.matchesFilters(r));
+    }, ...(ngDevMode ? [{ debugName: "filteredRows" }] : /* istanbul ignore next */ []));
+    /** Tree mode: flattened visible rows + per-row depth/children/expanded meta. */
+    treeFlat = computed(() => {
+        const ck = this.childrenKey();
+        const { key, dir } = this.sort();
+        const sign = dir === 'asc' ? 1 : -1;
+        const sortRows = (rs) => {
+            const c = [...rs];
+            if (key)
+                c.sort((a, b) => sign * this.compare(a[key], b[key]));
+            return c;
+        };
+        const filtering = this.activeFilters().length > 0;
+        const kidsOf = (r) => r[ck] ?? [];
+        const survives = (r) => this.matchesFilters(r) || kidsOf(r).some(survives);
+        const meta = new Map();
+        const rowsOut = [];
+        const walk = (rs, depth) => {
+            for (const r of sortRows(rs)) {
+                const kids = filtering ? kidsOf(r).filter(survives) : kidsOf(r);
+                // Filtering force-expands so matches are never hidden under a fold.
+                const expanded = filtering ? true : this.expandedTree().has(this.rowKey(r));
+                meta.set(this.rowKey(r), { depth, hasChildren: kids.length > 0, expanded });
+                rowsOut.push(r);
+                if (kids.length && expanded)
+                    walk(kids, depth + 1);
+            }
+        };
+        walk(filtering ? this.rows().filter(survives) : this.rows(), 0);
+        return { rows: rowsOut, meta };
+    }, ...(ngDevMode ? [{ debugName: "treeFlat" }] : /* istanbul ignore next */ []));
     sorted = computed(() => {
         // Server-side mode: rows arrive already ordered / sliced — never touch them.
         if (this.lazy())
             return this.rows();
+        if (this.childrenKey())
+            return this.treeFlat().rows;
         const { key, dir } = this.sort();
-        const data = [...this.rows()];
+        const data = [...this.filteredRows()];
         if (!key)
             return data;
         const sign = dir === 'asc' ? 1 : -1;
@@ -8689,6 +8878,11 @@ class StrctDatagrid {
             if (this.page() > pageCount)
                 this.page.set(pageCount);
         });
+        // A changed filter always restarts from page 1.
+        effect(() => {
+            this.filters();
+            untracked(() => this.page.set(1));
+        });
         // Seed the selection from initialSelection (re-runs only when the input changes,
         // so a user's own toggles afterward are untouched).
         effect(() => {
@@ -8707,6 +8901,7 @@ class StrctDatagrid {
                 pageSize: this.pageSize(),
                 sortKey: this.sort().key,
                 sortDir: this.sort().dir,
+                filters: this.filters(),
             };
             const key = JSON.stringify(state);
             untracked(() => {
@@ -8953,7 +9148,7 @@ class StrctDatagrid {
         return String(a ?? '').localeCompare(String(b ?? ''), undefined, { numeric: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDatagrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctDatagrid, isStandalone: true, selector: "strct-datagrid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, detailPane: { classPropertyName: "detailPane", publicName: "detailPane", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, singleLine: { classPropertyName: "singleLine", publicName: "singleLine", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, columnChooser: { classPropertyName: "columnChooser", publicName: "columnChooser", isSignal: true, isRequired: false, transformFunction: null }, sync: { classPropertyName: "sync", publicName: "sync", isSignal: true, isRequired: false, transformFunction: null }, footerActionsDisabled: { classPropertyName: "footerActionsDisabled", publicName: "footerActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, columnState: { classPropertyName: "columnState", publicName: "columnState", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnState: "columnStateChange", selectionChange: "selectionChange", syncChange: "syncChange", rowAction: "rowAction", lazyLoad: "lazyLoad" }, host: { properties: { "class.strct-dg-host--compact": "compact()", "class.strct-dg-host--singleline": "singleLine()", "class.strct-dg-host--virtual": "virtual()", "class.strct-dg-host--sticky": "stickyActive()" }, classAttribute: "strct-dg-host" }, queries: [{ propertyName: "detailDef", first: true, predicate: StrctRowDetailDef, descendants: true, isSignal: true }, { propertyName: "actionBarDef", first: true, predicate: StrctDatagridActionBar, descendants: true, isSignal: true }, { propertyName: "cellDefs", predicate: StrctCellDef, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctDatagrid, isStandalone: true, selector: "strct-datagrid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, detailPane: { classPropertyName: "detailPane", publicName: "detailPane", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, singleLine: { classPropertyName: "singleLine", publicName: "singleLine", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, columnChooser: { classPropertyName: "columnChooser", publicName: "columnChooser", isSignal: true, isRequired: false, transformFunction: null }, sync: { classPropertyName: "sync", publicName: "sync", isSignal: true, isRequired: false, transformFunction: null }, footerActionsDisabled: { classPropertyName: "footerActionsDisabled", publicName: "footerActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, columnState: { classPropertyName: "columnState", publicName: "columnState", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnState: "columnStateChange", filters: "filtersChange", selectionChange: "selectionChange", syncChange: "syncChange", rowAction: "rowAction", lazyLoad: "lazyLoad", cellEdit: "cellEdit" }, host: { listeners: { "document:click": "onDocClickFilter($event)", "document:keydown.escape": "onEscapeFilter()" }, properties: { "class.strct-dg-host--compact": "compact()", "class.strct-dg-host--singleline": "singleLine()", "class.strct-dg-host--virtual": "virtual()", "class.strct-dg-host--sticky": "stickyActive()" }, classAttribute: "strct-dg-host" }, queries: [{ propertyName: "detailDef", first: true, predicate: StrctRowDetailDef, descendants: true, isSignal: true }, { propertyName: "actionBarDef", first: true, predicate: StrctDatagridActionBar, descendants: true, isSignal: true }, { propertyName: "cellDefs", predicate: StrctCellDef, isSignal: true }], ngImport: i0, template: `
     @if (actionBarDef()) {
       <div class="strct-dg__toolbar"><ng-content select="[strctDatagridActionBar]" /></div>
     }
@@ -8967,7 +9162,7 @@ class StrctDatagrid {
         [style.max-height.px]="virtual() ? viewportHeight() : null"
         (scroll)="virtual() && onScroll($event)"
       >
-        <table class="strct-dg">
+        <table class="strct-dg" [attr.role]="childrenKey() ? 'treegrid' : null">
           <thead>
             <tr>
               @if (canDetail()) {
@@ -9027,6 +9222,62 @@ class StrctDatagrid {
                         [size]="13"
                       />
                     }
+                    @if (col.filterable || col.filterOptions) {
+                      <button
+                        #fbtn
+                        type="button"
+                        class="strct-dg__filterbtn"
+                        [class.strct-dg__filterbtn--active]="hasFilter(col.key)"
+                        [attr.aria-expanded]="filterOpenKey() === col.key"
+                        [attr.aria-label]="L().filterColumn + ': ' + col.label"
+                        (click)="toggleFilterPanel(col.key, $event)"
+                        (keydown.enter)="$event.stopPropagation()"
+                        (keydown.space)="$event.stopPropagation()"
+                      >
+                        <strct-icon name="filter" [size]="12" />
+                      </button>
+                      @if (filterOpenKey() === col.key) {
+                        <div
+                          class="strct-dg__filterpanel"
+                          role="dialog"
+                          [attr.aria-label]="L().filterColumn + ': ' + col.label"
+                          [strctOverlay]="fbtn"
+                          strctOverlayPlacement="bottom-start"
+                          (click)="$event.stopPropagation()"
+                          (keydown.enter)="$event.stopPropagation()"
+                          (keydown.space)="$event.stopPropagation()"
+                        >
+                          @if (col.filterOptions; as opts) {
+                            @for (opt of opts; track $index) {
+                              <label class="strct-dg__filteropt">
+                                <input
+                                  type="checkbox"
+                                  [checked]="optionChecked(col.key, opt)"
+                                  (change)="toggleFilterOption(col.key, opt)"
+                                />
+                                <span>{{ opt }}</span>
+                              </label>
+                            }
+                          } @else {
+                            <input
+                              class="strct-dg__filterinput"
+                              type="text"
+                              [attr.placeholder]="L().filterPlaceholder"
+                              [value]="textFilter(col.key)"
+                              (input)="setTextFilter(col.key, $any($event.target).value)"
+                            />
+                          }
+                          <button
+                            type="button"
+                            class="strct-dg__filterclear"
+                            [disabled]="!hasFilter(col.key)"
+                            (click)="clearFilter(col.key)"
+                          >
+                            {{ L().clearFilter }}
+                          </button>
+                        </div>
+                      }
+                    }
                   </span>
                   @if (resizable() && col.resizable !== false) {
                     <div
@@ -9097,6 +9348,10 @@ class StrctDatagrid {
                   <tr
                     [class.strct-dg__row--selected]="isSelected(row)"
                     [class.strct-dg__row--active]="paneOpen() && row === activeRow()"
+                    [attr.aria-level]="childrenKey() ? treeDepth(row) + 1 : null"
+                    [attr.aria-expanded]="
+                      childrenKey() && treeHasChildren(row) ? treeExpanded(row) : null
+                    "
                   >
                     @if (canDetail()) {
                       <td
@@ -9147,14 +9402,51 @@ class StrctDatagrid {
                         />
                       </td>
                     }
-                    @for (col of visibleColumns(); track col.key) {
+                    @for (col of visibleColumns(); track col.key; let colIdx = $index) {
                       <td
                         [style.text-align]="col.align ?? 'start'"
                         [class.strct-dg__cell--sticky]="isSticky(col)"
                         [class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
+                        [class.strct-dg__cell--editable]="col.editable"
                         [style.insetInlineStart.px]="stickyLeft(col.key)"
+                        (dblclick)="col.editable && startEdit(row, col)"
                       >
-                        @if (cellTemplate(col.key); as tpl) {
+                        @if (childrenKey() && colIdx === 0) {
+                          <span
+                            class="strct-dg__treepad"
+                            [style.width.px]="treeDepth(row) * 18"
+                            aria-hidden="true"
+                          ></span>
+                          @if (treeHasChildren(row)) {
+                            <button
+                              type="button"
+                              class="strct-dg__treebtn"
+                              [class.strct-dg__treebtn--open]="treeExpanded(row)"
+                              [attr.aria-expanded]="treeExpanded(row)"
+                              [attr.aria-label]="L().toggleChildren"
+                              (click)="toggleTreeRow(row)"
+                            >
+                              <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
+                            </button>
+                          } @else {
+                            <span
+                              class="strct-dg__treebtn strct-dg__treebtn--leaf"
+                              aria-hidden="true"
+                            ></span>
+                          }
+                        }
+                        @if (isEditingCell(row, col)) {
+                          <input
+                            class="strct-dg__editinput"
+                            type="text"
+                            [value]="row[col.key] ?? ''"
+                            [attr.aria-label]="L().editCell + ': ' + col.label"
+                            (keydown.enter)="commitEdit(row, col, $event)"
+                            (keydown.escape)="cancelEdit($event)"
+                            (blur)="commitEdit(row, col, $event)"
+                            (click)="$event.stopPropagation()"
+                          />
+                        } @else if (cellTemplate(col.key); as tpl) {
                           <ng-container
                             [ngTemplateOutlet]="tpl"
                             [ngTemplateOutletContext]="{
@@ -9292,7 +9584,7 @@ class StrctDatagrid {
         </div>
       </div>
     }
-  `, isInline: true, styles: [".strct-dg-host{display:block;border:1px solid var(--b2);border-radius:10px;background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th{position:sticky;top:0;z-index:5}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:9px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:3}.strct-dg thead th.strct-dg__cell--sticky{z-index:6}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:2}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned .strct-dg__scroll{flex:0 0 auto;width:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-top-right-radius:0;border-bottom-right-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;right:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:0 8px 8px 0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);left:0;z-index:10;min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["prevLabel", "nextLabel", "regionLabel", "total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "isDisabled", "disabled", "indeterminate", "ariaLabel"], outputs: ["checkedChange", "isDisabledChange"] }, { kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctButtonGroup, selector: "strct-button-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-dg-host{display:block;border:1px solid var(--b2);border-radius:10px;background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th{position:sticky;top:0;z-index:5}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:9px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:3}.strct-dg thead th.strct-dg__cell--sticky{z-index:6}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:2}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned .strct-dg__scroll{flex:0 0 auto;width:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-top-right-radius:0;border-bottom-right-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;right:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:0 8px 8px 0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);left:0;z-index:10;min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:210;display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:11.5px;cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["prevLabel", "nextLabel", "regionLabel", "total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "isDisabled", "disabled", "indeterminate", "ariaLabel"], outputs: ["checkedChange", "isDisabledChange"] }, { kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctButtonGroup, selector: "strct-button-group" }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDatagrid, decorators: [{
             type: Component,
@@ -9303,6 +9595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         StrctCheckbox,
                         StrctButton,
                         StrctButtonGroup,
+                        StrctOverlay,
                     ], template: `
     @if (actionBarDef()) {
       <div class="strct-dg__toolbar"><ng-content select="[strctDatagridActionBar]" /></div>
@@ -9317,7 +9610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         [style.max-height.px]="virtual() ? viewportHeight() : null"
         (scroll)="virtual() && onScroll($event)"
       >
-        <table class="strct-dg">
+        <table class="strct-dg" [attr.role]="childrenKey() ? 'treegrid' : null">
           <thead>
             <tr>
               @if (canDetail()) {
@@ -9377,6 +9670,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         [size]="13"
                       />
                     }
+                    @if (col.filterable || col.filterOptions) {
+                      <button
+                        #fbtn
+                        type="button"
+                        class="strct-dg__filterbtn"
+                        [class.strct-dg__filterbtn--active]="hasFilter(col.key)"
+                        [attr.aria-expanded]="filterOpenKey() === col.key"
+                        [attr.aria-label]="L().filterColumn + ': ' + col.label"
+                        (click)="toggleFilterPanel(col.key, $event)"
+                        (keydown.enter)="$event.stopPropagation()"
+                        (keydown.space)="$event.stopPropagation()"
+                      >
+                        <strct-icon name="filter" [size]="12" />
+                      </button>
+                      @if (filterOpenKey() === col.key) {
+                        <div
+                          class="strct-dg__filterpanel"
+                          role="dialog"
+                          [attr.aria-label]="L().filterColumn + ': ' + col.label"
+                          [strctOverlay]="fbtn"
+                          strctOverlayPlacement="bottom-start"
+                          (click)="$event.stopPropagation()"
+                          (keydown.enter)="$event.stopPropagation()"
+                          (keydown.space)="$event.stopPropagation()"
+                        >
+                          @if (col.filterOptions; as opts) {
+                            @for (opt of opts; track $index) {
+                              <label class="strct-dg__filteropt">
+                                <input
+                                  type="checkbox"
+                                  [checked]="optionChecked(col.key, opt)"
+                                  (change)="toggleFilterOption(col.key, opt)"
+                                />
+                                <span>{{ opt }}</span>
+                              </label>
+                            }
+                          } @else {
+                            <input
+                              class="strct-dg__filterinput"
+                              type="text"
+                              [attr.placeholder]="L().filterPlaceholder"
+                              [value]="textFilter(col.key)"
+                              (input)="setTextFilter(col.key, $any($event.target).value)"
+                            />
+                          }
+                          <button
+                            type="button"
+                            class="strct-dg__filterclear"
+                            [disabled]="!hasFilter(col.key)"
+                            (click)="clearFilter(col.key)"
+                          >
+                            {{ L().clearFilter }}
+                          </button>
+                        </div>
+                      }
+                    }
                   </span>
                   @if (resizable() && col.resizable !== false) {
                     <div
@@ -9447,6 +9796,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                   <tr
                     [class.strct-dg__row--selected]="isSelected(row)"
                     [class.strct-dg__row--active]="paneOpen() && row === activeRow()"
+                    [attr.aria-level]="childrenKey() ? treeDepth(row) + 1 : null"
+                    [attr.aria-expanded]="
+                      childrenKey() && treeHasChildren(row) ? treeExpanded(row) : null
+                    "
                   >
                     @if (canDetail()) {
                       <td
@@ -9497,14 +9850,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         />
                       </td>
                     }
-                    @for (col of visibleColumns(); track col.key) {
+                    @for (col of visibleColumns(); track col.key; let colIdx = $index) {
                       <td
                         [style.text-align]="col.align ?? 'start'"
                         [class.strct-dg__cell--sticky]="isSticky(col)"
                         [class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
+                        [class.strct-dg__cell--editable]="col.editable"
                         [style.insetInlineStart.px]="stickyLeft(col.key)"
+                        (dblclick)="col.editable && startEdit(row, col)"
                       >
-                        @if (cellTemplate(col.key); as tpl) {
+                        @if (childrenKey() && colIdx === 0) {
+                          <span
+                            class="strct-dg__treepad"
+                            [style.width.px]="treeDepth(row) * 18"
+                            aria-hidden="true"
+                          ></span>
+                          @if (treeHasChildren(row)) {
+                            <button
+                              type="button"
+                              class="strct-dg__treebtn"
+                              [class.strct-dg__treebtn--open]="treeExpanded(row)"
+                              [attr.aria-expanded]="treeExpanded(row)"
+                              [attr.aria-label]="L().toggleChildren"
+                              (click)="toggleTreeRow(row)"
+                            >
+                              <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
+                            </button>
+                          } @else {
+                            <span
+                              class="strct-dg__treebtn strct-dg__treebtn--leaf"
+                              aria-hidden="true"
+                            ></span>
+                          }
+                        }
+                        @if (isEditingCell(row, col)) {
+                          <input
+                            class="strct-dg__editinput"
+                            type="text"
+                            [value]="row[col.key] ?? ''"
+                            [attr.aria-label]="L().editCell + ': ' + col.label"
+                            (keydown.enter)="commitEdit(row, col, $event)"
+                            (keydown.escape)="cancelEdit($event)"
+                            (blur)="commitEdit(row, col, $event)"
+                            (click)="$event.stopPropagation()"
+                          />
+                        } @else if (cellTemplate(col.key); as tpl) {
                           <ng-container
                             [ngTemplateOutlet]="tpl"
                             [ngTemplateOutletContext]="{
@@ -9648,8 +10038,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[class.strct-dg-host--singleline]': 'singleLine()',
                         '[class.strct-dg-host--virtual]': 'virtual()',
                         '[class.strct-dg-host--sticky]': 'stickyActive()',
-                    }, styles: [".strct-dg-host{display:block;border:1px solid var(--b2);border-radius:10px;background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th{position:sticky;top:0;z-index:5}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:9px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:3}.strct-dg thead th.strct-dg__cell--sticky{z-index:6}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:2}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned .strct-dg__scroll{flex:0 0 auto;width:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-top-right-radius:0;border-bottom-right-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;right:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:0 8px 8px 0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);left:0;z-index:10;min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], detailPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailPane", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], singleLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleLine", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], columnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnChooser", required: false }] }], sync: [{ type: i0.Input, args: [{ isSignal: true, alias: "sync", required: false }] }], footerActionsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerActionsDisabled", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], initialSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelection", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", required: false }] }, { type: i0.Output, args: ["columnStateChange"] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], syncChange: [{ type: i0.Output, args: ["syncChange"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], detailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctRowDetailDef), { isSignal: true }] }], actionBarDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDatagridActionBar), { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctCellDef), { isSignal: true }] }] } });
+                    }, styles: [".strct-dg-host{display:block;border:1px solid var(--b2);border-radius:10px;background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th{position:sticky;top:0;z-index:5}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:9px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:3}.strct-dg thead th.strct-dg__cell--sticky{z-index:6}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:2}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned .strct-dg__scroll{flex:0 0 auto;width:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-top-right-radius:0;border-bottom-right-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;right:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:0 8px 8px 0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);left:0;z-index:10;min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:210;display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:11.5px;cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], detailPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailPane", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], singleLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleLine", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], columnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnChooser", required: false }] }], sync: [{ type: i0.Input, args: [{ isSignal: true, alias: "sync", required: false }] }], footerActionsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerActionsDisabled", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], initialSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelection", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", required: false }] }, { type: i0.Output, args: ["columnStateChange"] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], syncChange: [{ type: i0.Output, args: ["syncChange"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], detailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctRowDetailDef), { isSignal: true }] }], actionBarDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDatagridActionBar), { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctCellDef), { isSignal: true }] }], onDocClickFilter: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscapeFilter: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
 
 /** Vertical timeline container. Wraps `<strct-timeline-item>` children. */
 class StrctTimeline {
@@ -12759,6 +13155,2326 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: { class: 'strct-empty' }, styles: [".strct-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px}.strct-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;margin-bottom:2px}.strct-empty__icon--neutral{background:var(--bg-3);color:var(--t2)}.strct-empty__icon--warning{background:var(--warning-bg);color:var(--warning)}.strct-empty__icon--critical{background:var(--critical-bg);color:var(--critical)}.strct-empty__icon--accent{background:var(--acc-m);color:var(--acc)}.strct-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--t1)}.strct-empty__desc{margin:0;max-width:360px;font-size:13px;line-height:1.5;color:var(--t3)}.strct-empty__actions{display:flex;align-items:center;gap:8px;margin-top:6px}.strct-empty__actions:empty{display:none}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
 
+/**
+ * Unit formatting for infrastructure consoles — bytes, rates, durations and
+ * SI magnitudes, as pure functions plus template pipes. The functions are the
+ * API charts / grids can call from TS; the pipes are the template sugar:
+ *
+ *   {{ vm.memBytes | strctBytes }}          → 1.5 GiB
+ *   {{ nic.rxBps | strctRate }}             → 2.4 Gbit/s
+ *   {{ task.elapsedMs | strctDuration }}    → 2h 14m
+ *   {{ cluster.iops | strctSi : 'IOPS' }}   → 12.4k IOPS
+ */
+const BINARY_UNITS = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB'];
+const DECIMAL_UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB'];
+const SI_SUFFIXES = ['', 'k', 'M', 'G', 'T', 'P'];
+function trimZeros(v) {
+    return v.includes('.') ? v.replace(/\.?0+$/, '') : v;
+}
+/**
+ * Format a byte count. Binary (KiB, 1024) by default — the storage/memory
+ * convention consoles actually mean; pass `binary: false` for decimal (kB).
+ */
+function strctFormatBytes(bytes, options = {}) {
+    if (!Number.isFinite(bytes))
+        return '—';
+    const { binary = true, digits = 1 } = options;
+    const base = binary ? 1024 : 1000;
+    const units = binary ? BINARY_UNITS : DECIMAL_UNITS;
+    const neg = bytes < 0 ? '-' : '';
+    let v = Math.abs(bytes);
+    let i = 0;
+    while (v >= base && i < units.length - 1) {
+        v /= base;
+        i++;
+    }
+    return `${neg}${trimZeros(v.toFixed(i === 0 ? 0 : digits))} ${units[i]}`;
+}
+/**
+ * Format a data rate from bits per second (network convention). Pass bytes/s
+ * through `strctFormatBytes(...) + '/s'` instead if you mean throughput.
+ */
+function strctFormatRate(bitsPerSecond, options = {}) {
+    if (!Number.isFinite(bitsPerSecond))
+        return '—';
+    const { digits = 1 } = options;
+    const units = ['bit/s', 'kbit/s', 'Mbit/s', 'Gbit/s', 'Tbit/s'];
+    const neg = bitsPerSecond < 0 ? '-' : '';
+    let v = Math.abs(bitsPerSecond);
+    let i = 0;
+    while (v >= 1000 && i < units.length - 1) {
+        v /= 1000;
+        i++;
+    }
+    return `${neg}${trimZeros(v.toFixed(i === 0 ? 0 : digits))} ${units[i]}`;
+}
+/**
+ * Format a duration in ms as the two most significant units: "2h 14m",
+ * "3d 6h", "45s", "820ms". Sub-second stays in ms; `maxUnits` widens it.
+ */
+function strctFormatDuration(ms, options = {}) {
+    if (!Number.isFinite(ms))
+        return '—';
+    const { maxUnits = 2 } = options;
+    const neg = ms < 0 ? '-' : '';
+    let v = Math.abs(ms);
+    if (v < 1000)
+        return `${neg}${Math.round(v)}ms`;
+    const units = [
+        ['d', 86_400_000],
+        ['h', 3_600_000],
+        ['m', 60_000],
+        ['s', 1000],
+    ];
+    const parts = [];
+    for (const [label, size] of units) {
+        if (parts.length >= maxUnits)
+            break;
+        const n = Math.floor(v / size);
+        if (n > 0 || parts.length > 0) {
+            if (n > 0)
+                parts.push(`${n}${label}`);
+            v -= n * size;
+        }
+    }
+    return neg + (parts.length ? parts.join(' ') : '0s');
+}
+/** Format a count with SI magnitude suffixes: 12400 → "12.4k". */
+function strctFormatSi(value, options = {}) {
+    if (!Number.isFinite(value))
+        return '—';
+    const { digits = 1, unit = '' } = options;
+    const neg = value < 0 ? '-' : '';
+    let v = Math.abs(value);
+    let i = 0;
+    while (v >= 1000 && i < SI_SUFFIXES.length - 1) {
+        v /= 1000;
+        i++;
+    }
+    const num = `${neg}${trimZeros(v.toFixed(i === 0 ? 0 : digits))}${SI_SUFFIXES[i]}`;
+    return unit ? `${num} ${unit}` : num;
+}
+/** `{{ bytes | strctBytes }}` / `{{ bytes | strctBytes : false }}` (decimal). */
+class StrctBytesPipe {
+    transform(value, binary = true, digits = 1) {
+        return strctFormatBytes(value, { binary, digits });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctBytesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: StrctBytesPipe, isStandalone: true, name: "strctBytes" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctBytesPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'strctBytes' }]
+        }] });
+/** `{{ bps | strctRate }}` — bits per second with kbit/Mbit/Gbit steps. */
+class StrctRatePipe {
+    transform(value, digits = 1) {
+        return strctFormatRate(value, { digits });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctRatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: StrctRatePipe, isStandalone: true, name: "strctRate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctRatePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'strctRate' }]
+        }] });
+/** `{{ ms | strctDuration }}` — "2h 14m"; optional max unit count. */
+class StrctDurationPipe {
+    transform(value, maxUnits = 2) {
+        return strctFormatDuration(value, { maxUnits });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: StrctDurationPipe, isStandalone: true, name: "strctDuration" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDurationPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'strctDuration' }]
+        }] });
+/** `{{ n | strctSi : 'IOPS' }}` — SI magnitude with an optional unit label. */
+class StrctSiPipe {
+    transform(value, unit = '', digits = 1) {
+        return strctFormatSi(value, { unit, digits });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSiPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: StrctSiPipe, isStandalone: true, name: "strctSi" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSiPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'strctSi' }]
+        }] });
+
+/** The Grafana-conventional quick ranges consoles expect. */
+const STRCT_TIME_RANGE_PRESETS = [
+    { id: '15m', label: 'Last 15 minutes', ms: 15 * 60_000 },
+    { id: '1h', label: 'Last 1 hour', ms: 3_600_000 },
+    { id: '6h', label: 'Last 6 hours', ms: 6 * 3_600_000 },
+    { id: '24h', label: 'Last 24 hours', ms: 24 * 3_600_000 },
+    { id: '7d', label: 'Last 7 days', ms: 7 * 86_400_000 },
+    { id: '30d', label: 'Last 30 days', ms: 30 * 86_400_000 },
+];
+/**
+ * Monitoring time-range picker — the "Last 1 hour ▾" control charts hang off:
+ * quick relative ranges plus an absolute from/to editor, in one popover.
+ *
+ *   <strct-time-range [(range)]="range" />
+ *
+ * Picking a preset resolves it against "now" immediately and stamps
+ * `presetId`, so a consumer can re-resolve the same preset on its own refresh
+ * tick. The popover reuses `strct-dropdown`'s dialog semantics: inner clicks
+ * keep it open, outside click / Escape dismiss.
+ */
+class StrctTimeRangePicker {
+    /** The selected window, two-way. Null until the user (or you) picks one. */
+    range = model(null, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /** Quick ranges shown in the left column. */
+    presets = input(STRCT_TIME_RANGE_PRESETS, ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    /** Popover alignment, as in strct-dropdown. */
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Localizable strings. */
+    dialogLabel = input('Time range', ...(ngDevMode ? [{ debugName: "dialogLabel" }] : /* istanbul ignore next */ []));
+    quickLabel = input('Quick ranges', ...(ngDevMode ? [{ debugName: "quickLabel" }] : /* istanbul ignore next */ []));
+    absoluteLabel = input('Absolute range', ...(ngDevMode ? [{ debugName: "absoluteLabel" }] : /* istanbul ignore next */ []));
+    fromLabel = input('From', ...(ngDevMode ? [{ debugName: "fromLabel" }] : /* istanbul ignore next */ []));
+    toLabel = input('To', ...(ngDevMode ? [{ debugName: "toLabel" }] : /* istanbul ignore next */ []));
+    applyLabel = input('Apply', ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
+    invalidLabel = input('"From" must be before "To".', ...(ngDevMode ? [{ debugName: "invalidLabel" }] : /* istanbul ignore next */ []));
+    placeholderLabel = input('Select time range', ...(ngDevMode ? [{ debugName: "placeholderLabel" }] : /* istanbul ignore next */ []));
+    /** Fires on every commit (preset pick or absolute apply). */
+    applied = output();
+    dd = viewChild.required(StrctDropdown);
+    // Absolute-editor draft (datetime-local strings), seeded from the range.
+    draftFrom = signal('', ...(ngDevMode ? [{ debugName: "draftFrom" }] : /* istanbul ignore next */ []));
+    draftTo = signal('', ...(ngDevMode ? [{ debugName: "draftTo" }] : /* istanbul ignore next */ []));
+    draftError = computed(() => {
+        const f = this.draftFrom();
+        const t = this.draftTo();
+        if (!f || !t)
+            return false;
+        return new Date(f).getTime() >= new Date(t).getTime();
+    }, ...(ngDevMode ? [{ debugName: "draftError" }] : /* istanbul ignore next */ []));
+    triggerLabel = computed(() => {
+        const r = this.range();
+        if (!r)
+            return this.placeholderLabel();
+        const preset = this.presets().find((p) => p.id === r.presetId);
+        if (preset)
+            return preset.label;
+        return `${this.formatStamp(r.from)} → ${this.formatStamp(r.to)}`;
+    }, ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    pickPreset(p) {
+        const to = new Date();
+        const next = { from: new Date(to.getTime() - p.ms), to, presetId: p.id };
+        this.range.set(next);
+        this.applied.emit(next);
+        this.seedDraft(next);
+    }
+    applyAbsolute() {
+        const f = this.draftFrom();
+        const t = this.draftTo();
+        if (!f || !t || this.draftError())
+            return false;
+        const next = { from: new Date(f), to: new Date(t) };
+        this.range.set(next);
+        this.applied.emit(next);
+        return true;
+    }
+    /** Re-resolve a preset range against "now" — call from your refresh tick. */
+    refresh() {
+        const r = this.range();
+        const preset = r && this.presets().find((p) => p.id === r.presetId);
+        if (!preset)
+            return;
+        this.pickPreset(preset);
+    }
+    seedDraft(r) {
+        this.draftFrom.set(this.toLocal(r.from));
+        this.draftTo.set(this.toLocal(r.to));
+    }
+    toLocal(d) {
+        const pad = (n) => String(n).padStart(2, '0');
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    }
+    formatStamp(d) {
+        const pad = (n) => String(n).padStart(2, '0');
+        return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTimeRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTimeRangePicker, isStandalone: true, selector: "strct-time-range", inputs: { range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, quickLabel: { classPropertyName: "quickLabel", publicName: "quickLabel", isSignal: true, isRequired: false, transformFunction: null }, absoluteLabel: { classPropertyName: "absoluteLabel", publicName: "absoluteLabel", isSignal: true, isRequired: false, transformFunction: null }, fromLabel: { classPropertyName: "fromLabel", publicName: "fromLabel", isSignal: true, isRequired: false, transformFunction: null }, toLabel: { classPropertyName: "toLabel", publicName: "toLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, invalidLabel: { classPropertyName: "invalidLabel", publicName: "invalidLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholderLabel: { classPropertyName: "placeholderLabel", publicName: "placeholderLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { range: "rangeChange", applied: "applied" }, host: { classAttribute: "strct-tr" }, viewQueries: [{ propertyName: "dd", first: true, predicate: StrctDropdown, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <strct-dropdown #dd popover [popoverLabel]="dialogLabel()" [align]="align()">
+      <button strct-button variant="neutral" strctDropdownTrigger class="strct-tr__trigger">
+        <strct-icon name="clock" [size]="13" />
+        <span class="strct-tr__label">{{ triggerLabel() }}</span>
+        <strct-icon name="chevronDown" [size]="12" />
+      </button>
+
+      <div class="strct-tr__panel">
+        <div class="strct-tr__group" role="group" [attr.aria-label]="quickLabel()">
+          <div class="strct-tr__head">{{ quickLabel() }}</div>
+          @for (p of presets(); track p.id) {
+            <button
+              type="button"
+              class="strct-tr__preset"
+              [class.strct-tr__preset--active]="range()?.presetId === p.id"
+              [attr.aria-pressed]="range()?.presetId === p.id"
+              (click)="pickPreset(p); dd.close()"
+            >
+              {{ p.label }}
+            </button>
+          }
+        </div>
+
+        <div class="strct-tr__group" role="group" [attr.aria-label]="absoluteLabel()">
+          <div class="strct-tr__head">{{ absoluteLabel() }}</div>
+          <label class="strct-tr__field">
+            <span>{{ fromLabel() }}</span>
+            <input
+              type="datetime-local"
+              class="strct-tr__input"
+              [value]="draftFrom()"
+              (input)="draftFrom.set($any($event.target).value)"
+            />
+          </label>
+          <label class="strct-tr__field">
+            <span>{{ toLabel() }}</span>
+            <input
+              type="datetime-local"
+              class="strct-tr__input"
+              [value]="draftTo()"
+              (input)="draftTo.set($any($event.target).value)"
+            />
+          </label>
+          @if (draftError()) {
+            <div class="strct-tr__error" role="alert">{{ invalidLabel() }}</div>
+          }
+          <button
+            strct-button
+            variant="primary"
+            size="sm"
+            class="strct-tr__apply"
+            [disabled]="draftError()"
+            (click)="applyAbsolute() && dd.close()"
+          >
+            {{ applyLabel() }}
+          </button>
+        </div>
+      </div>
+    </strct-dropdown>
+  `, isInline: true, styles: [".strct-tr{display:inline-block}.strct-tr__trigger .strct-tr__label{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-tr__panel{display:flex;gap:16px}.strct-tr__group{display:flex;flex-direction:column;gap:2px;min-width:150px}.strct-tr__head{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);margin-bottom:5px}.strct-tr__preset{text-align:start;padding:6px 9px;border:0;border-radius:var(--radius-sm);background:transparent;font-family:var(--font);font-size:12.5px;color:var(--t1);cursor:pointer}.strct-tr__preset:hover{background:var(--bg-3)}.strct-tr__preset--active{background:var(--acc18);color:var(--acc);font-weight:600}.strct-tr__preset:focus-visible,.strct-tr__input:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-tr__field{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--t2);margin-bottom:7px}.strct-tr__input{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-tr__error{font-size:11.5px;color:var(--critical);margin-bottom:6px}.strct-tr__apply{align-self:flex-start}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctDropdown, selector: "strct-dropdown", inputs: ["align", "popover", "popoverLabel"] }, { kind: "directive", type: StrctDropdownTrigger, selector: "[strctDropdownTrigger]" }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTimeRangePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-time-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctButton, StrctDropdown, StrctDropdownTrigger, StrctIcon], template: `
+    <strct-dropdown #dd popover [popoverLabel]="dialogLabel()" [align]="align()">
+      <button strct-button variant="neutral" strctDropdownTrigger class="strct-tr__trigger">
+        <strct-icon name="clock" [size]="13" />
+        <span class="strct-tr__label">{{ triggerLabel() }}</span>
+        <strct-icon name="chevronDown" [size]="12" />
+      </button>
+
+      <div class="strct-tr__panel">
+        <div class="strct-tr__group" role="group" [attr.aria-label]="quickLabel()">
+          <div class="strct-tr__head">{{ quickLabel() }}</div>
+          @for (p of presets(); track p.id) {
+            <button
+              type="button"
+              class="strct-tr__preset"
+              [class.strct-tr__preset--active]="range()?.presetId === p.id"
+              [attr.aria-pressed]="range()?.presetId === p.id"
+              (click)="pickPreset(p); dd.close()"
+            >
+              {{ p.label }}
+            </button>
+          }
+        </div>
+
+        <div class="strct-tr__group" role="group" [attr.aria-label]="absoluteLabel()">
+          <div class="strct-tr__head">{{ absoluteLabel() }}</div>
+          <label class="strct-tr__field">
+            <span>{{ fromLabel() }}</span>
+            <input
+              type="datetime-local"
+              class="strct-tr__input"
+              [value]="draftFrom()"
+              (input)="draftFrom.set($any($event.target).value)"
+            />
+          </label>
+          <label class="strct-tr__field">
+            <span>{{ toLabel() }}</span>
+            <input
+              type="datetime-local"
+              class="strct-tr__input"
+              [value]="draftTo()"
+              (input)="draftTo.set($any($event.target).value)"
+            />
+          </label>
+          @if (draftError()) {
+            <div class="strct-tr__error" role="alert">{{ invalidLabel() }}</div>
+          }
+          <button
+            strct-button
+            variant="primary"
+            size="sm"
+            class="strct-tr__apply"
+            [disabled]="draftError()"
+            (click)="applyAbsolute() && dd.close()"
+          >
+            {{ applyLabel() }}
+          </button>
+        </div>
+      </div>
+    </strct-dropdown>
+  `, host: { class: 'strct-tr' }, styles: [".strct-tr{display:inline-block}.strct-tr__trigger .strct-tr__label{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-tr__panel{display:flex;gap:16px}.strct-tr__group{display:flex;flex-direction:column;gap:2px;min-width:150px}.strct-tr__head{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);margin-bottom:5px}.strct-tr__preset{text-align:start;padding:6px 9px;border:0;border-radius:var(--radius-sm);background:transparent;font-family:var(--font);font-size:12.5px;color:var(--t1);cursor:pointer}.strct-tr__preset:hover{background:var(--bg-3)}.strct-tr__preset--active{background:var(--acc18);color:var(--acc);font-weight:600}.strct-tr__preset:focus-visible,.strct-tr__input:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-tr__field{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--t2);margin-bottom:7px}.strct-tr__input{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-tr__error{font-size:11.5px;color:var(--critical);margin-bottom:6px}.strct-tr__apply{align-self:flex-start}\n"] }]
+        }], propDecorators: { range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], quickLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickLabel", required: false }] }], absoluteLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "absoluteLabel", required: false }] }], fromLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromLabel", required: false }] }], toLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], invalidLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidLabel", required: false }] }], placeholderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderLabel", required: false }] }], applied: [{ type: i0.Output, args: ["applied"] }], dd: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrctDropdown), { isSignal: true }] }] } });
+
+// SGR code → segment class. Colors map onto chart/status tokens, not raw hues.
+const ANSI_CLASSES = {
+    1: 'b',
+    30: 'c30',
+    31: 'c31',
+    32: 'c32',
+    33: 'c33',
+    34: 'c34',
+    35: 'c35',
+    36: 'c36',
+    37: 'c37',
+    90: 'c90',
+    91: 'c31',
+    92: 'c32',
+    93: 'c33',
+    94: 'c34',
+    95: 'c35',
+    96: 'c36',
+    97: 'c37',
+};
+const LEVEL_RE = /\b(ERROR|ERR|FATAL|WARN(?:ING)?|INFO|DEBUG|TRACE)\b/;
+/**
+ * Virtualized log tail — the `kubectl logs -f` surface as a component:
+ *
+ *   <strct-log-viewer [lines]="lines()" [(follow)]="follow" [height]="360" />
+ *
+ * - **Virtualized**: only the visible window plus overscan is in the DOM, so
+ *   100k lines scroll flat.
+ * - **Follow mode** (two-way): sticks to the tail as lines stream in;
+ *   scrolling up pauses it, the button (or scrolling back to the bottom)
+ *   resumes it — the Grafana/Loki convention.
+ * - **ANSI SGR colors** (16-color + bold) parsed into safe spans — no
+ *   innerHTML — and severity tinting from `StrctLogLine.level` or, for plain
+ *   strings, auto-detected ERROR/WARN/INFO/DEBUG tokens.
+ */
+class StrctLogViewer {
+    /** Log lines — plain strings or `{ text, level }` objects. */
+    lines = input([], ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    /** Viewport height in px. */
+    height = input(320, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Follow the tail as new lines arrive (two-way; pauses on scroll-up). */
+    follow = model(true, ...(ngDevMode ? [{ debugName: "follow" }] : /* istanbul ignore next */ []));
+    /** Soft-wrap long lines instead of horizontal scrolling (two-way). */
+    wrapMode = model(false, ...(ngDevMode ? [{ debugName: "wrapMode" }] : /* istanbul ignore next */ []));
+    /** Auto-detect ERROR/WARN/INFO/DEBUG tokens on plain-string lines. */
+    autoLevel = input(true, { ...(ngDevMode ? { debugName: "autoLevel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Localizable strings. */
+    title = input('Logs', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    followLabel = input('Follow', ...(ngDevMode ? [{ debugName: "followLabel" }] : /* istanbul ignore next */ []));
+    wrapLabel = input('Wrap', ...(ngDevMode ? [{ debugName: "wrapLabel" }] : /* istanbul ignore next */ []));
+    linesLabel = input('lines', ...(ngDevMode ? [{ debugName: "linesLabel" }] : /* istanbul ignore next */ []));
+    emptyLabel = input('No log lines.', ...(ngDevMode ? [{ debugName: "emptyLabel" }] : /* istanbul ignore next */ []));
+    scroller = viewChild.required('scroller');
+    scrollTop = signal(0, ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+    suppressScrollEvent = false;
+    static LINE_H = 20;
+    static OVERSCAN = 10;
+    normalized = computed(() => this.lines().map((l) => (typeof l === 'string' ? { text: l } : l)), ...(ngDevMode ? [{ debugName: "normalized" }] : /* istanbul ignore next */ []));
+    totalHeight = computed(() => this.normalized().length * StrctLogViewer.LINE_H || StrctLogViewer.LINE_H, ...(ngDevMode ? [{ debugName: "totalHeight" }] : /* istanbul ignore next */ []));
+    windowStart = computed(() => {
+        const start = Math.floor(this.scrollTop() / StrctLogViewer.LINE_H) - StrctLogViewer.OVERSCAN;
+        return Math.max(0, start);
+    }, ...(ngDevMode ? [{ debugName: "windowStart" }] : /* istanbul ignore next */ []));
+    offsetY = computed(() => this.windowStart() * StrctLogViewer.LINE_H, ...(ngDevMode ? [{ debugName: "offsetY" }] : /* istanbul ignore next */ []));
+    window = computed(() => {
+        const all = this.normalized();
+        const start = this.windowStart();
+        const visible = Math.ceil(this.height() / StrctLogViewer.LINE_H) + StrctLogViewer.OVERSCAN * 2;
+        return all.slice(start, start + visible).map((line, i) => ({
+            index: start + i,
+            level: line.level ?? (this.autoLevel() ? detectLevel(line.text) : 'none'),
+            segments: parseAnsi(line.text),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "window" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Stick to the tail whenever content grows while following.
+        effect(() => {
+            this.totalHeight();
+            if (!this.follow())
+                return;
+            const el = this.scroller().nativeElement;
+            // After the DOM height settles.
+            requestAnimationFrame(() => {
+                this.suppressScrollEvent = true;
+                el.scrollTop = el.scrollHeight;
+                this.scrollTop.set(el.scrollTop);
+            });
+        });
+    }
+    onScroll() {
+        const el = this.scroller().nativeElement;
+        this.scrollTop.set(el.scrollTop);
+        if (this.suppressScrollEvent) {
+            this.suppressScrollEvent = false;
+            return;
+        }
+        const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - StrctLogViewer.LINE_H;
+        // Manual scroll: leaving the tail pauses follow, reaching it resumes.
+        if (this.follow() && !atBottom)
+            this.follow.set(false);
+        else if (!this.follow() && atBottom)
+            this.follow.set(true);
+    }
+    toggleFollow() {
+        const next = !this.follow();
+        this.follow.set(next);
+        if (next) {
+            const el = this.scroller().nativeElement;
+            this.suppressScrollEvent = true;
+            el.scrollTop = el.scrollHeight;
+            this.scrollTop.set(el.scrollTop);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctLogViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctLogViewer, isStandalone: true, selector: "strct-log-viewer", inputs: { lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, follow: { classPropertyName: "follow", publicName: "follow", isSignal: true, isRequired: false, transformFunction: null }, wrapMode: { classPropertyName: "wrapMode", publicName: "wrapMode", isSignal: true, isRequired: false, transformFunction: null }, autoLevel: { classPropertyName: "autoLevel", publicName: "autoLevel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, followLabel: { classPropertyName: "followLabel", publicName: "followLabel", isSignal: true, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: true, isRequired: false, transformFunction: null }, linesLabel: { classPropertyName: "linesLabel", publicName: "linesLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { follow: "followChange", wrapMode: "wrapModeChange" }, host: { classAttribute: "strct-lv" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="strct-lv__bar">
+      <span class="strct-lv__title">{{ title() }}</span>
+      <span class="strct-lv__count">{{ normalized().length }} {{ linesLabel() }}</span>
+      <span class="strct-lv__grow"></span>
+      <button
+        strct-button
+        size="sm"
+        [variant]="wrapMode() ? 'primary' : 'flat'"
+        [attr.aria-pressed]="wrapMode()"
+        (click)="wrapMode.set(!wrapMode())"
+      >
+        {{ wrapLabel() }}
+      </button>
+      <button
+        strct-button
+        size="sm"
+        [variant]="follow() ? 'primary' : 'flat'"
+        [attr.aria-pressed]="follow()"
+        (click)="toggleFollow()"
+      >
+        <strct-icon name="chevronDoubleDown" [size]="12" />
+        {{ followLabel() }}
+      </button>
+    </div>
+    <div
+      #scroller
+      class="strct-lv__scroll"
+      role="log"
+      tabindex="0"
+      [attr.aria-label]="title()"
+      [style.height.px]="height()"
+      (scroll)="onScroll()"
+    >
+      <div class="strct-lv__spacer" [style.height.px]="totalHeight()">
+        <div
+          class="strct-lv__window"
+          [class.strct-lv__window--wrap]="wrapMode()"
+          [style.transform]="'translateY(' + offsetY() + 'px)'"
+        >
+          @for (line of window(); track line.index) {
+            <div class="strct-lv__line strct-lv__line--{{ line.level }}">
+              <span class="strct-lv__no" aria-hidden="true">{{ line.index + 1 }}</span>
+              <span class="strct-lv__text">
+                @for (seg of line.segments; track $index) {
+                  <span class="strct-lv__seg-{{ seg.cls }}">{{ seg.text }}</span>
+                }
+              </span>
+            </div>
+          } @empty {
+            <div class="strct-lv__empty">{{ emptyLabel() }}</div>
+          }
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".strct-lv{display:block;border:1px solid var(--b2);border-radius:9px;background:var(--bg-2);overflow:hidden}.strct-lv__bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--b1)}.strct-lv__title{font-size:12.5px;font-weight:600;color:var(--t1)}.strct-lv__count{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-lv__grow{flex:1}.strct-lv__scroll{overflow:auto;overscroll-behavior:contain}.strct-lv__scroll:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-lv__spacer{position:relative}.strct-lv__window{position:absolute;inset-inline:0;top:0}.strct-lv__line{display:flex;gap:10px;height:var(--strct-lv-line-height, 20px);line-height:var(--strct-lv-line-height, 20px);padding-inline:10px;font-family:var(--mono);font-size:12px;color:var(--t1);white-space:pre}.strct-lv__window--wrap .strct-lv__line{height:auto;min-height:var(--strct-lv-line-height, 20px)}.strct-lv__window--wrap .strct-lv__text{white-space:pre-wrap;overflow-wrap:anywhere}.strct-lv__no{flex-shrink:0;min-width:4ch;text-align:end;color:var(--t4);-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}.strct-lv__line--error{background:var(--critical-bg)}.strct-lv__line--error .strct-lv__text{color:var(--critical)}.strct-lv__line--warn{background:var(--warning-bg)}.strct-lv__line--warn .strct-lv__text{color:var(--warning)}.strct-lv__line--debug .strct-lv__text{color:var(--t3)}.strct-lv__empty{padding:14px 12px;font-size:12.5px;color:var(--t3)}.strct-lv__seg-b{font-weight:700}.strct-lv__seg-c31{color:var(--critical)}.strct-lv__seg-c32{color:var(--success)}.strct-lv__seg-c33{color:var(--warning)}.strct-lv__seg-c34{color:var(--chart-1, var(--acc))}.strct-lv__seg-c35{color:var(--chart-4, var(--acc))}.strct-lv__seg-c36{color:var(--chart-5, var(--acc))}.strct-lv__seg-c37{color:var(--t1)}.strct-lv__seg-c30,.strct-lv__seg-c90{color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctLogViewer, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-log-viewer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctButton, StrctIcon], template: `
+    <div class="strct-lv__bar">
+      <span class="strct-lv__title">{{ title() }}</span>
+      <span class="strct-lv__count">{{ normalized().length }} {{ linesLabel() }}</span>
+      <span class="strct-lv__grow"></span>
+      <button
+        strct-button
+        size="sm"
+        [variant]="wrapMode() ? 'primary' : 'flat'"
+        [attr.aria-pressed]="wrapMode()"
+        (click)="wrapMode.set(!wrapMode())"
+      >
+        {{ wrapLabel() }}
+      </button>
+      <button
+        strct-button
+        size="sm"
+        [variant]="follow() ? 'primary' : 'flat'"
+        [attr.aria-pressed]="follow()"
+        (click)="toggleFollow()"
+      >
+        <strct-icon name="chevronDoubleDown" [size]="12" />
+        {{ followLabel() }}
+      </button>
+    </div>
+    <div
+      #scroller
+      class="strct-lv__scroll"
+      role="log"
+      tabindex="0"
+      [attr.aria-label]="title()"
+      [style.height.px]="height()"
+      (scroll)="onScroll()"
+    >
+      <div class="strct-lv__spacer" [style.height.px]="totalHeight()">
+        <div
+          class="strct-lv__window"
+          [class.strct-lv__window--wrap]="wrapMode()"
+          [style.transform]="'translateY(' + offsetY() + 'px)'"
+        >
+          @for (line of window(); track line.index) {
+            <div class="strct-lv__line strct-lv__line--{{ line.level }}">
+              <span class="strct-lv__no" aria-hidden="true">{{ line.index + 1 }}</span>
+              <span class="strct-lv__text">
+                @for (seg of line.segments; track $index) {
+                  <span class="strct-lv__seg-{{ seg.cls }}">{{ seg.text }}</span>
+                }
+              </span>
+            </div>
+          } @empty {
+            <div class="strct-lv__empty">{{ emptyLabel() }}</div>
+          }
+        </div>
+      </div>
+    </div>
+  `, host: { class: 'strct-lv' }, styles: [".strct-lv{display:block;border:1px solid var(--b2);border-radius:9px;background:var(--bg-2);overflow:hidden}.strct-lv__bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--b1)}.strct-lv__title{font-size:12.5px;font-weight:600;color:var(--t1)}.strct-lv__count{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-lv__grow{flex:1}.strct-lv__scroll{overflow:auto;overscroll-behavior:contain}.strct-lv__scroll:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-lv__spacer{position:relative}.strct-lv__window{position:absolute;inset-inline:0;top:0}.strct-lv__line{display:flex;gap:10px;height:var(--strct-lv-line-height, 20px);line-height:var(--strct-lv-line-height, 20px);padding-inline:10px;font-family:var(--mono);font-size:12px;color:var(--t1);white-space:pre}.strct-lv__window--wrap .strct-lv__line{height:auto;min-height:var(--strct-lv-line-height, 20px)}.strct-lv__window--wrap .strct-lv__text{white-space:pre-wrap;overflow-wrap:anywhere}.strct-lv__no{flex-shrink:0;min-width:4ch;text-align:end;color:var(--t4);-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}.strct-lv__line--error{background:var(--critical-bg)}.strct-lv__line--error .strct-lv__text{color:var(--critical)}.strct-lv__line--warn{background:var(--warning-bg)}.strct-lv__line--warn .strct-lv__text{color:var(--warning)}.strct-lv__line--debug .strct-lv__text{color:var(--t3)}.strct-lv__empty{padding:14px 12px;font-size:12.5px;color:var(--t3)}.strct-lv__seg-b{font-weight:700}.strct-lv__seg-c31{color:var(--critical)}.strct-lv__seg-c32{color:var(--success)}.strct-lv__seg-c33{color:var(--warning)}.strct-lv__seg-c34{color:var(--chart-1, var(--acc))}.strct-lv__seg-c35{color:var(--chart-4, var(--acc))}.strct-lv__seg-c36{color:var(--chart-5, var(--acc))}.strct-lv__seg-c37{color:var(--t1)}.strct-lv__seg-c30,.strct-lv__seg-c90{color:var(--t3)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], follow: [{ type: i0.Input, args: [{ isSignal: true, alias: "follow", required: false }] }, { type: i0.Output, args: ["followChange"] }], wrapMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapMode", required: false }] }, { type: i0.Output, args: ["wrapModeChange"] }], autoLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoLevel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], followLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "followLabel", required: false }] }], wrapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapLabel", required: false }] }], linesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "linesLabel", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }] } });
+function detectLevel(text) {
+    const m = LEVEL_RE.exec(text);
+    if (!m)
+        return 'none';
+    const tok = m[1];
+    if (tok.startsWith('ERR') || tok === 'FATAL')
+        return 'error';
+    if (tok.startsWith('WARN'))
+        return 'warn';
+    if (tok === 'DEBUG' || tok === 'TRACE')
+        return 'debug';
+    return 'info';
+}
+/** Parse ANSI SGR sequences into class-tagged segments (16-color + bold). */
+function parseAnsi(text) {
+    if (!text.includes('\u001b['))
+        return [{ text, cls: 'c37' }];
+    const segments = [];
+    const re = /\u001b\[([0-9;]*)m/g;
+    let last = 0;
+    let current = new Set();
+    let m;
+    while ((m = re.exec(text))) {
+        if (m.index > last) {
+            segments.push({ text: text.slice(last, m.index), cls: clsOf(current) });
+        }
+        for (const raw of (m[1] || '0').split(';')) {
+            const code = Number(raw || '0');
+            if (code === 0)
+                current = new Set();
+            else if (ANSI_CLASSES[code]) {
+                // A new foreground color replaces the previous one; bold stacks.
+                if (code !== 1)
+                    for (const c of [...current])
+                        if (c !== 'b')
+                            current.delete(c);
+                current.add(ANSI_CLASSES[code]);
+            }
+        }
+        last = re.lastIndex;
+    }
+    if (last < text.length)
+        segments.push({ text: text.slice(last), cls: clsOf(current) });
+    return segments.length ? segments : [{ text: '', cls: 'c37' }];
+}
+function clsOf(set) {
+    return set.size ? [...set].join(' strct-lv__seg-') : 'c37';
+}
+
+/**
+ * Compute a line diff (LCS-based). Exported for programmatic use — change
+ * counts, gating "anything changed?" logic, custom renderings.
+ */
+function strctComputeDiff(before, after) {
+    const a = before.split('\n');
+    const b = after.split('\n');
+    // Trim common prefix/suffix first — configs mostly match, keeping DP small.
+    let start = 0;
+    while (start < a.length && start < b.length && a[start] === b[start])
+        start++;
+    let endA = a.length;
+    let endB = b.length;
+    while (endA > start && endB > start && a[endA - 1] === b[endB - 1]) {
+        endA--;
+        endB--;
+    }
+    const midA = a.slice(start, endA);
+    const midB = b.slice(start, endB);
+    const rows = [];
+    for (let i = 0; i < start; i++)
+        rows.push({ type: 'ctx', oldNo: i + 1, newNo: i + 1, text: a[i] });
+    // LCS DP on the changed middle; fall back to replace-all when it is huge.
+    if (midA.length * midB.length <= 4_000_000) {
+        const n = midA.length;
+        const m = midB.length;
+        const dp = new Uint32Array((n + 1) * (m + 1));
+        for (let i = n - 1; i >= 0; i--) {
+            for (let j = m - 1; j >= 0; j--) {
+                dp[i * (m + 1) + j] =
+                    midA[i] === midB[j]
+                        ? dp[(i + 1) * (m + 1) + j + 1] + 1
+                        : Math.max(dp[(i + 1) * (m + 1) + j], dp[i * (m + 1) + j + 1]);
+            }
+        }
+        let i = 0;
+        let j = 0;
+        while (i < n && j < m) {
+            if (midA[i] === midB[j]) {
+                rows.push({ type: 'ctx', oldNo: start + i + 1, newNo: start + j + 1, text: midA[i] });
+                i++;
+                j++;
+            }
+            else if (dp[(i + 1) * (m + 1) + j] >= dp[i * (m + 1) + j + 1]) {
+                rows.push({ type: 'del', oldNo: start + i + 1, newNo: null, text: midA[i] });
+                i++;
+            }
+            else {
+                rows.push({ type: 'add', oldNo: null, newNo: start + j + 1, text: midB[j] });
+                j++;
+            }
+        }
+        while (i < n) {
+            rows.push({ type: 'del', oldNo: start + i + 1, newNo: null, text: midA[i] });
+            i++;
+        }
+        while (j < m) {
+            rows.push({ type: 'add', oldNo: null, newNo: start + j + 1, text: midB[j] });
+            j++;
+        }
+    }
+    else {
+        for (let i = 0; i < midA.length; i++)
+            rows.push({ type: 'del', oldNo: start + i + 1, newNo: null, text: midA[i] });
+        for (let j = 0; j < midB.length; j++)
+            rows.push({ type: 'add', oldNo: null, newNo: start + j + 1, text: midB[j] });
+    }
+    for (let i = endA, j = endB; i < a.length; i++, j++) {
+        rows.push({ type: 'ctx', oldNo: i + 1, newNo: j + 1, text: a[i] });
+    }
+    return rows;
+}
+/**
+ * Config / YAML diff viewer — change-approval screens without a hand-rolled
+ * diff. Unified by default, `split` for side-by-side; long unchanged runs
+ * collapse to an expandable "· N unchanged lines ·" row.
+ *
+ *   <strct-diff [before]="saved" [after]="draft" beforeLabel="Running" afterLabel="Draft" />
+ *
+ * Rows are marked by symbol (+/−) as well as tint, so the diff reads without
+ * color — the same CVD rule the icon badges follow.
+ */
+class StrctDiff {
+    /** The two texts to compare. */
+    before = input.required(...(ngDevMode ? [{ debugName: "before" }] : /* istanbul ignore next */ []));
+    after = input.required(...(ngDevMode ? [{ debugName: "after" }] : /* istanbul ignore next */ []));
+    /** Unified (default) or side-by-side split view. */
+    mode = input('unified', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Context lines kept around changes before collapsing (0 disables collapsing). */
+    context = input(3, ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+    /** Header bits. */
+    title = input('Diff', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    language = input('', ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    beforeLabel = input('Before', ...(ngDevMode ? [{ debugName: "beforeLabel" }] : /* istanbul ignore next */ []));
+    afterLabel = input('After', ...(ngDevMode ? [{ debugName: "afterLabel" }] : /* istanbul ignore next */ []));
+    copyable = input(true, { ...(ngDevMode ? { debugName: "copyable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    copyAfterLabel = input('Copy new version', ...(ngDevMode ? [{ debugName: "copyAfterLabel" }] : /* istanbul ignore next */ []));
+    unchangedLabel = input('unchanged lines', ...(ngDevMode ? [{ debugName: "unchangedLabel" }] : /* istanbul ignore next */ []));
+    /** Scroll the body past this height (px); null grows freely. */
+    maxHeight = input(null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    // Indices of collapsed runs the user has expanded.
+    expanded = signal(new Set(), ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    rows = computed(() => strctComputeDiff(this.before(), this.after()), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    addCount = computed(() => this.rows().filter((r) => r.type === 'add').length, ...(ngDevMode ? [{ debugName: "addCount" }] : /* istanbul ignore next */ []));
+    delCount = computed(() => this.rows().filter((r) => r.type === 'del').length, ...(ngDevMode ? [{ debugName: "delCount" }] : /* istanbul ignore next */ []));
+    unifiedRows = computed(() => {
+        const out = [];
+        for (const chunk of this.chunks()) {
+            if (chunk.skip)
+                out.push({ kind: 'skip', count: chunk.rows.length, startIndex: chunk.start });
+            else
+                for (const r of chunk.rows)
+                    out.push({ kind: 'row', ...r });
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "unifiedRows" }] : /* istanbul ignore next */ []));
+    splitRows = computed(() => {
+        const out = [];
+        for (const chunk of this.chunks()) {
+            if (chunk.skip) {
+                out.push({ kind: 'skip', count: chunk.rows.length, startIndex: chunk.start });
+                continue;
+            }
+            // Pair del-runs with the add-run that follows them (classic split view).
+            let i = 0;
+            const rows = chunk.rows;
+            while (i < rows.length) {
+                const r = rows[i];
+                if (r.type === 'ctx') {
+                    out.push({
+                        kind: 'row',
+                        left: { type: 'ctx', no: r.oldNo, text: r.text },
+                        right: { type: 'ctx', no: r.newNo, text: r.text },
+                    });
+                    i++;
+                    continue;
+                }
+                const dels = [];
+                const adds = [];
+                while (i < rows.length && rows[i].type === 'del')
+                    dels.push(rows[i++]);
+                while (i < rows.length && rows[i].type === 'add')
+                    adds.push(rows[i++]);
+                const len = Math.max(dels.length, adds.length);
+                for (let k = 0; k < len; k++) {
+                    const d = dels[k];
+                    const a = adds[k];
+                    out.push({
+                        kind: 'row',
+                        left: d
+                            ? { type: 'del', no: d.oldNo, text: d.text }
+                            : { type: 'empty', no: null, text: '' },
+                        right: a
+                            ? { type: 'add', no: a.newNo, text: a.text }
+                            : { type: 'empty', no: null, text: '' },
+                    });
+                }
+            }
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "splitRows" }] : /* istanbul ignore next */ []));
+    /** Group rows into visible chunks and collapsible unchanged runs. */
+    chunks = computed(() => {
+        const rows = this.rows();
+        const ctx = this.context();
+        const expanded = this.expanded();
+        if (ctx <= 0)
+            return [{ skip: false, start: 0, rows }];
+        // Mark rows within `ctx` of any change as visible.
+        const visible = new Array(rows.length).fill(false);
+        rows.forEach((r, i) => {
+            if (r.type !== 'ctx') {
+                for (let k = Math.max(0, i - ctx); k <= Math.min(rows.length - 1, i + ctx); k++) {
+                    visible[k] = true;
+                }
+            }
+        });
+        const out = [];
+        let i = 0;
+        while (i < rows.length) {
+            const vis = visible[i] || expanded.has(startOfRun(visible, i));
+            const start = i;
+            while (i < rows.length && (visible[i] || expanded.has(startOfRun(visible, i))) === vis)
+                i++;
+            const slice = rows.slice(start, i);
+            // Tiny hidden runs are not worth a fold row.
+            if (!vis && slice.length <= 2)
+                out.push({ skip: false, start, rows: slice });
+            else
+                out.push({ skip: !vis, start, rows: slice });
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "chunks" }] : /* istanbul ignore next */ []));
+    expand(startIndex) {
+        const next = new Set(this.expanded());
+        next.add(startIndex);
+        this.expanded.set(next);
+    }
+    sign(type) {
+        return type === 'add' ? '+' : type === 'del' ? '−' : '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDiff, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctDiff, isStandalone: true, selector: "strct-diff", inputs: { before: { classPropertyName: "before", publicName: "before", isSignal: true, isRequired: true, transformFunction: null }, after: { classPropertyName: "after", publicName: "after", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, beforeLabel: { classPropertyName: "beforeLabel", publicName: "beforeLabel", isSignal: true, isRequired: false, transformFunction: null }, afterLabel: { classPropertyName: "afterLabel", publicName: "afterLabel", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, copyAfterLabel: { classPropertyName: "copyAfterLabel", publicName: "copyAfterLabel", isSignal: true, isRequired: false, transformFunction: null }, unchangedLabel: { classPropertyName: "unchangedLabel", publicName: "unchangedLabel", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-diff" }, ngImport: i0, template: `
+    <div class="strct-diff__head">
+      <span class="strct-diff__title">{{ title() }}</span>
+      @if (language()) {
+        <span class="strct-diff__lang">{{ language() }}</span>
+      }
+      <span class="strct-diff__stat strct-diff__stat--add">+{{ addCount() }}</span>
+      <span class="strct-diff__stat strct-diff__stat--del">−{{ delCount() }}</span>
+      <span class="strct-diff__grow"></span>
+      @if (copyable()) {
+        <strct-copy [text]="after()" [copyLabel]="copyAfterLabel()" />
+      }
+    </div>
+    @if (mode() === 'split') {
+      <div class="strct-diff__cols" aria-hidden="true">
+        <span>{{ beforeLabel() }}</span>
+        <span>{{ afterLabel() }}</span>
+      </div>
+    }
+    <div
+      class="strct-diff__scroll"
+      tabindex="0"
+      role="region"
+      [attr.aria-label]="title()"
+      [style.max-height.px]="maxHeight()"
+    >
+      @if (mode() === 'unified') {
+        <table class="strct-diff__table">
+          <tbody>
+            @for (row of unifiedRows(); track $index) {
+              @if (row.kind === 'skip') {
+                <tr class="strct-diff__skip-row">
+                  <td colspan="4">
+                    <button type="button" class="strct-diff__skip" (click)="expand(row.startIndex)">
+                      · {{ row.count }} {{ unchangedLabel() }} ·
+                    </button>
+                  </td>
+                </tr>
+              } @else {
+                <tr class="strct-diff__row strct-diff__row--{{ row.type }}">
+                  <td class="strct-diff__no">{{ row.oldNo ?? '' }}</td>
+                  <td class="strct-diff__no">{{ row.newNo ?? '' }}</td>
+                  <td class="strct-diff__sign">{{ sign(row.type) }}</td>
+                  <td class="strct-diff__text" [textContent]="row.text"></td>
+                </tr>
+              }
+            }
+          </tbody>
+        </table>
+      } @else {
+        <table class="strct-diff__table strct-diff__table--split">
+          <tbody>
+            @for (row of splitRows(); track $index) {
+              @if (row.kind === 'skip') {
+                <tr class="strct-diff__skip-row">
+                  <td colspan="6">
+                    <button type="button" class="strct-diff__skip" (click)="expand(row.startIndex)">
+                      · {{ row.count }} {{ unchangedLabel() }} ·
+                    </button>
+                  </td>
+                </tr>
+              } @else {
+                <tr>
+                  <td class="strct-diff__no strct-diff__cell--{{ row.left.type }}">
+                    {{ row.left.no ?? '' }}
+                  </td>
+                  <td class="strct-diff__sign strct-diff__cell--{{ row.left.type }}">
+                    {{ sign(row.left.type) }}
+                  </td>
+                  <td
+                    class="strct-diff__text strct-diff__cell--{{ row.left.type }}"
+                    [textContent]="row.left.text"
+                  ></td>
+                  <td class="strct-diff__no strct-diff__cell--{{ row.right.type }}">
+                    {{ row.right.no ?? '' }}
+                  </td>
+                  <td class="strct-diff__sign strct-diff__cell--{{ row.right.type }}">
+                    {{ sign(row.right.type) }}
+                  </td>
+                  <td
+                    class="strct-diff__text strct-diff__cell--{{ row.right.type }}"
+                    [textContent]="row.right.text"
+                  ></td>
+                </tr>
+              }
+            }
+          </tbody>
+        </table>
+      }
+    </div>
+  `, isInline: true, styles: [".strct-diff{display:block;border:1px solid var(--b2);border-radius:9px;background:var(--bg-2);overflow:hidden}.strct-diff__head{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--b1)}.strct-diff__title{font-size:12.5px;font-weight:600;color:var(--t1)}.strct-diff__lang{font-family:var(--mono);font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--t3);border:1px solid var(--b2);border-radius:4px;padding:2px 6px}.strct-diff__stat{font-family:var(--mono);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}.strct-diff__stat--add{color:var(--success)}.strct-diff__stat--del{color:var(--critical)}.strct-diff__grow{flex:1}.strct-diff__cols{display:grid;grid-template-columns:1fr 1fr;padding:4px 10px;border-bottom:1px solid var(--b1);font-size:11px;font-weight:600;color:var(--t3)}.strct-diff__scroll{overflow:auto}.strct-diff__scroll:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-diff__table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;line-height:1.55}.strct-diff__no{width:1%;min-width:3.5ch;padding:0 6px;text-align:end;color:var(--t4);-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;vertical-align:top}.strct-diff__sign{width:1%;padding:0 2px;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:top}.strct-diff__text{padding:0 10px 0 4px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--t1)}.strct-diff__row--add,.strct-diff__cell--add{background:var(--success-bg)}.strct-diff__row--add .strct-diff__sign,.strct-diff__cell--add.strct-diff__sign{color:var(--success);font-weight:700}.strct-diff__row--del,.strct-diff__cell--del{background:var(--critical-bg)}.strct-diff__row--del .strct-diff__sign,.strct-diff__cell--del.strct-diff__sign{color:var(--critical);font-weight:700}.strct-diff__table--split .strct-diff__text{width:50%}.strct-diff__skip-row td{padding:0}.strct-diff__skip{display:block;width:100%;padding:3px 10px;border:0;border-block:1px dashed var(--b2);background:var(--bg-3);color:var(--t3);font-family:var(--mono);font-size:11px;cursor:pointer}.strct-diff__skip:hover{color:var(--t1)}.strct-diff__skip:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}\n"], dependencies: [{ kind: "component", type: StrctCopy, selector: "strct-copy", inputs: ["text", "label", "ariaLabel", "copyLabel", "copiedLabel"], outputs: ["copied"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDiff, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-diff', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctCopy], template: `
+    <div class="strct-diff__head">
+      <span class="strct-diff__title">{{ title() }}</span>
+      @if (language()) {
+        <span class="strct-diff__lang">{{ language() }}</span>
+      }
+      <span class="strct-diff__stat strct-diff__stat--add">+{{ addCount() }}</span>
+      <span class="strct-diff__stat strct-diff__stat--del">−{{ delCount() }}</span>
+      <span class="strct-diff__grow"></span>
+      @if (copyable()) {
+        <strct-copy [text]="after()" [copyLabel]="copyAfterLabel()" />
+      }
+    </div>
+    @if (mode() === 'split') {
+      <div class="strct-diff__cols" aria-hidden="true">
+        <span>{{ beforeLabel() }}</span>
+        <span>{{ afterLabel() }}</span>
+      </div>
+    }
+    <div
+      class="strct-diff__scroll"
+      tabindex="0"
+      role="region"
+      [attr.aria-label]="title()"
+      [style.max-height.px]="maxHeight()"
+    >
+      @if (mode() === 'unified') {
+        <table class="strct-diff__table">
+          <tbody>
+            @for (row of unifiedRows(); track $index) {
+              @if (row.kind === 'skip') {
+                <tr class="strct-diff__skip-row">
+                  <td colspan="4">
+                    <button type="button" class="strct-diff__skip" (click)="expand(row.startIndex)">
+                      · {{ row.count }} {{ unchangedLabel() }} ·
+                    </button>
+                  </td>
+                </tr>
+              } @else {
+                <tr class="strct-diff__row strct-diff__row--{{ row.type }}">
+                  <td class="strct-diff__no">{{ row.oldNo ?? '' }}</td>
+                  <td class="strct-diff__no">{{ row.newNo ?? '' }}</td>
+                  <td class="strct-diff__sign">{{ sign(row.type) }}</td>
+                  <td class="strct-diff__text" [textContent]="row.text"></td>
+                </tr>
+              }
+            }
+          </tbody>
+        </table>
+      } @else {
+        <table class="strct-diff__table strct-diff__table--split">
+          <tbody>
+            @for (row of splitRows(); track $index) {
+              @if (row.kind === 'skip') {
+                <tr class="strct-diff__skip-row">
+                  <td colspan="6">
+                    <button type="button" class="strct-diff__skip" (click)="expand(row.startIndex)">
+                      · {{ row.count }} {{ unchangedLabel() }} ·
+                    </button>
+                  </td>
+                </tr>
+              } @else {
+                <tr>
+                  <td class="strct-diff__no strct-diff__cell--{{ row.left.type }}">
+                    {{ row.left.no ?? '' }}
+                  </td>
+                  <td class="strct-diff__sign strct-diff__cell--{{ row.left.type }}">
+                    {{ sign(row.left.type) }}
+                  </td>
+                  <td
+                    class="strct-diff__text strct-diff__cell--{{ row.left.type }}"
+                    [textContent]="row.left.text"
+                  ></td>
+                  <td class="strct-diff__no strct-diff__cell--{{ row.right.type }}">
+                    {{ row.right.no ?? '' }}
+                  </td>
+                  <td class="strct-diff__sign strct-diff__cell--{{ row.right.type }}">
+                    {{ sign(row.right.type) }}
+                  </td>
+                  <td
+                    class="strct-diff__text strct-diff__cell--{{ row.right.type }}"
+                    [textContent]="row.right.text"
+                  ></td>
+                </tr>
+              }
+            }
+          </tbody>
+        </table>
+      }
+    </div>
+  `, host: { class: 'strct-diff' }, styles: [".strct-diff{display:block;border:1px solid var(--b2);border-radius:9px;background:var(--bg-2);overflow:hidden}.strct-diff__head{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--b1)}.strct-diff__title{font-size:12.5px;font-weight:600;color:var(--t1)}.strct-diff__lang{font-family:var(--mono);font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--t3);border:1px solid var(--b2);border-radius:4px;padding:2px 6px}.strct-diff__stat{font-family:var(--mono);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}.strct-diff__stat--add{color:var(--success)}.strct-diff__stat--del{color:var(--critical)}.strct-diff__grow{flex:1}.strct-diff__cols{display:grid;grid-template-columns:1fr 1fr;padding:4px 10px;border-bottom:1px solid var(--b1);font-size:11px;font-weight:600;color:var(--t3)}.strct-diff__scroll{overflow:auto}.strct-diff__scroll:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-diff__table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;line-height:1.55}.strct-diff__no{width:1%;min-width:3.5ch;padding:0 6px;text-align:end;color:var(--t4);-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;vertical-align:top}.strct-diff__sign{width:1%;padding:0 2px;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:top}.strct-diff__text{padding:0 10px 0 4px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--t1)}.strct-diff__row--add,.strct-diff__cell--add{background:var(--success-bg)}.strct-diff__row--add .strct-diff__sign,.strct-diff__cell--add.strct-diff__sign{color:var(--success);font-weight:700}.strct-diff__row--del,.strct-diff__cell--del{background:var(--critical-bg)}.strct-diff__row--del .strct-diff__sign,.strct-diff__cell--del.strct-diff__sign{color:var(--critical);font-weight:700}.strct-diff__table--split .strct-diff__text{width:50%}.strct-diff__skip-row td{padding:0}.strct-diff__skip{display:block;width:100%;padding:3px 10px;border:0;border-block:1px dashed var(--b2);background:var(--bg-3);color:var(--t3);font-family:var(--mono);font-size:11px;cursor:pointer}.strct-diff__skip:hover{color:var(--t1)}.strct-diff__skip:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}\n"] }]
+        }], propDecorators: { before: [{ type: i0.Input, args: [{ isSignal: true, alias: "before", required: true }] }], after: [{ type: i0.Input, args: [{ isSignal: true, alias: "after", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], beforeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "beforeLabel", required: false }] }], afterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "afterLabel", required: false }] }], copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], copyAfterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyAfterLabel", required: false }] }], unchangedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unchangedLabel", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }] } });
+function startOfRun(visible, i) {
+    let s = i;
+    while (s > 0 && visible[s - 1] === visible[i])
+        s--;
+    return s;
+}
+
+/**
+ * Two resizable panes with a draggable gutter — master/detail layouts where
+ * the split is the user's to own:
+ *
+ *   <strct-splitter [(split)]="pct" [min]="20" [max]="80">
+ *     <div strctPaneStart>…list…</div>
+ *     <div strctPaneEnd>…detail…</div>
+ *   </strct-splitter>
+ *
+ * `split` is the start pane's share in percent (two-way, persistable).
+ * The gutter is a keyboard separator: arrows nudge, Home/End jump to min/max.
+ */
+class StrctSplitter {
+    host = inject(ElementRef);
+    /** Start pane share in percent (two-way). */
+    split = model(50, ...(ngDevMode ? [{ debugName: "split" }] : /* istanbul ignore next */ []));
+    /** Clamp bounds for the split (percent). */
+    min = input(15, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(85, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Stack panes vertically (gutter drags up/down). */
+    vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the separator (localizable). */
+    gutterLabel = input('Resize panes', ...(ngDevMode ? [{ debugName: "gutterLabel" }] : /* istanbul ignore next */ []));
+    /** Keyboard nudge step in percent. */
+    step = input(3, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    clamped = computed(() => Math.min(this.max(), Math.max(this.min(), this.split())), ...(ngDevMode ? [{ debugName: "clamped" }] : /* istanbul ignore next */ []));
+    dragging = false;
+    moveHandler = (e) => this.onDragMove(e);
+    upHandler = () => this.onDragEnd();
+    onDragStart(event) {
+        event.preventDefault();
+        this.dragging = true;
+        document.addEventListener('mousemove', this.moveHandler);
+        document.addEventListener('mouseup', this.upHandler);
+    }
+    onDragMove(event) {
+        const rect = this.host.nativeElement.getBoundingClientRect();
+        const ratio = this.vertical()
+            ? (event.clientY - rect.top) / rect.height
+            : (event.clientX - rect.left) / rect.width;
+        this.split.set(Math.min(this.max(), Math.max(this.min(), Math.round(ratio * 100))));
+    }
+    onDragEnd() {
+        this.dragging = false;
+        document.removeEventListener('mousemove', this.moveHandler);
+        document.removeEventListener('mouseup', this.upHandler);
+    }
+    onKeydown(event) {
+        const dec = this.vertical() ? 'ArrowUp' : 'ArrowLeft';
+        const inc = this.vertical() ? 'ArrowDown' : 'ArrowRight';
+        let next = null;
+        if (event.key === dec)
+            next = this.clamped() - this.step();
+        else if (event.key === inc)
+            next = this.clamped() + this.step();
+        else if (event.key === 'Home')
+            next = this.min();
+        else if (event.key === 'End')
+            next = this.max();
+        if (next == null)
+            return;
+        event.preventDefault();
+        this.split.set(Math.min(this.max(), Math.max(this.min(), next)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSplitter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctSplitter, isStandalone: true, selector: "strct-splitter", inputs: { split: { classPropertyName: "split", publicName: "split", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, gutterLabel: { classPropertyName: "gutterLabel", publicName: "gutterLabel", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { split: "splitChange" }, host: { properties: { "class.strct-split--vertical": "vertical()", "class.strct-split--dragging": "dragging" }, classAttribute: "strct-split" }, ngImport: i0, template: `
+    <div class="strct-split__pane" [style.flex-basis.%]="clamped()">
+      <ng-content select="[strctPaneStart]" />
+    </div>
+    <div
+      class="strct-split__gutter"
+      role="separator"
+      tabindex="0"
+      [attr.aria-label]="gutterLabel()"
+      [attr.aria-orientation]="vertical() ? 'horizontal' : 'vertical'"
+      [attr.aria-valuenow]="clamped()"
+      [attr.aria-valuemin]="min()"
+      [attr.aria-valuemax]="max()"
+      (mousedown)="onDragStart($event)"
+      (keydown)="onKeydown($event)"
+    >
+      <span class="strct-split__grip" aria-hidden="true"></span>
+    </div>
+    <div class="strct-split__pane strct-split__pane--end">
+      <ng-content select="[strctPaneEnd]" />
+    </div>
+  `, isInline: true, styles: [".strct-split{display:flex;width:100%;min-height:0}.strct-split--vertical{flex-direction:column}.strct-split__pane{flex-grow:0;flex-shrink:0;overflow:auto;min-width:0;min-height:0}.strct-split__pane--end{flex:1 1 0}.strct-split__gutter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:7px;cursor:col-resize;background:transparent;touch-action:none}.strct-split--vertical>.strct-split__gutter{width:auto;height:7px;cursor:row-resize}.strct-split__gutter:hover,.strct-split--dragging>.strct-split__gutter{background:var(--acc18)}.strct-split__gutter:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-split__grip{width:1.5px;height:26px;border-radius:1px;background:var(--b2)}.strct-split--vertical .strct-split__grip{width:26px;height:1.5px}.strct-split--dragging{-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSplitter, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-splitter', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <div class="strct-split__pane" [style.flex-basis.%]="clamped()">
+      <ng-content select="[strctPaneStart]" />
+    </div>
+    <div
+      class="strct-split__gutter"
+      role="separator"
+      tabindex="0"
+      [attr.aria-label]="gutterLabel()"
+      [attr.aria-orientation]="vertical() ? 'horizontal' : 'vertical'"
+      [attr.aria-valuenow]="clamped()"
+      [attr.aria-valuemin]="min()"
+      [attr.aria-valuemax]="max()"
+      (mousedown)="onDragStart($event)"
+      (keydown)="onKeydown($event)"
+    >
+      <span class="strct-split__grip" aria-hidden="true"></span>
+    </div>
+    <div class="strct-split__pane strct-split__pane--end">
+      <ng-content select="[strctPaneEnd]" />
+    </div>
+  `, host: {
+                        class: 'strct-split',
+                        '[class.strct-split--vertical]': 'vertical()',
+                        '[class.strct-split--dragging]': 'dragging',
+                    }, styles: [".strct-split{display:flex;width:100%;min-height:0}.strct-split--vertical{flex-direction:column}.strct-split__pane{flex-grow:0;flex-shrink:0;overflow:auto;min-width:0;min-height:0}.strct-split__pane--end{flex:1 1 0}.strct-split__gutter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:7px;cursor:col-resize;background:transparent;touch-action:none}.strct-split--vertical>.strct-split__gutter{width:auto;height:7px;cursor:row-resize}.strct-split__gutter:hover,.strct-split--dragging>.strct-split__gutter{background:var(--acc18)}.strct-split__gutter:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-split__grip{width:1.5px;height:26px;border-radius:1px;background:var(--b2)}.strct-split--vertical .strct-split__grip{width:26px;height:1.5px}.strct-split--dragging{-webkit-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { split: [{ type: i0.Input, args: [{ isSignal: true, alias: "split", required: false }] }, { type: i0.Output, args: ["splitChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], gutterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterLabel", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
+
+/**
+ * Dual-list transfer (picklist) — "assign hosts to the cluster": all items on
+ * the left, the chosen set on the right, checkbox multi-select and move
+ * buttons in between, with a searchbox per side.
+ *
+ *   <strct-transfer [items]="hosts" [(assigned)]="clusterHosts" />
+ *
+ * `assigned` is the two-way id set (string[]); `items` stays the single
+ * source-of-truth list.
+ */
+class StrctTransfer {
+    /** The full item universe. */
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Assigned item ids (two-way). */
+    assigned = model([], ...(ngDevMode ? [{ debugName: "assigned" }] : /* istanbul ignore next */ []));
+    /** Localizable strings. */
+    sourceLabel = input('Available', ...(ngDevMode ? [{ debugName: "sourceLabel" }] : /* istanbul ignore next */ []));
+    targetLabel = input('Assigned', ...(ngDevMode ? [{ debugName: "targetLabel" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('Search', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    emptyLabel = input('No items', ...(ngDevMode ? [{ debugName: "emptyLabel" }] : /* istanbul ignore next */ []));
+    assignLabel = input('Assign selected', ...(ngDevMode ? [{ debugName: "assignLabel" }] : /* istanbul ignore next */ []));
+    unassignLabel = input('Unassign selected', ...(ngDevMode ? [{ debugName: "unassignLabel" }] : /* istanbul ignore next */ []));
+    /** A move happened (either direction) with the moved ids. */
+    moved = output();
+    sourceQuery = signal('', ...(ngDevMode ? [{ debugName: "sourceQuery" }] : /* istanbul ignore next */ []));
+    targetQuery = signal('', ...(ngDevMode ? [{ debugName: "targetQuery" }] : /* istanbul ignore next */ []));
+    sourceChecked = signal(new Set(), ...(ngDevMode ? [{ debugName: "sourceChecked" }] : /* istanbul ignore next */ []));
+    targetChecked = signal(new Set(), ...(ngDevMode ? [{ debugName: "targetChecked" }] : /* istanbul ignore next */ []));
+    assignedSet = computed(() => new Set(this.assigned()), ...(ngDevMode ? [{ debugName: "assignedSet" }] : /* istanbul ignore next */ []));
+    sourceItems = computed(() => this.items().filter((i) => !this.assignedSet().has(i.id) && this.matches(i, this.sourceQuery())), ...(ngDevMode ? [{ debugName: "sourceItems" }] : /* istanbul ignore next */ []));
+    targetItems = computed(() => this.items().filter((i) => this.assignedSet().has(i.id) && this.matches(i, this.targetQuery())), ...(ngDevMode ? [{ debugName: "targetItems" }] : /* istanbul ignore next */ []));
+    matches(item, q) {
+        return !q.trim() || item.label.toLowerCase().includes(q.trim().toLowerCase());
+    }
+    toggle(which, id) {
+        const next = new Set(which());
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        which.set(next);
+    }
+    assign() {
+        const ids = [...this.sourceChecked()];
+        if (!ids.length)
+            return;
+        this.assigned.set([...this.assigned(), ...ids]);
+        this.sourceChecked.set(new Set());
+        this.moved.emit({ direction: 'assign', ids });
+    }
+    unassign() {
+        const ids = new Set(this.targetChecked());
+        if (!ids.size)
+            return;
+        this.assigned.set(this.assigned().filter((id) => !ids.has(id)));
+        this.targetChecked.set(new Set());
+        this.moved.emit({ direction: 'unassign', ids: [...ids] });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTransfer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTransfer, isStandalone: true, selector: "strct-transfer", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, assigned: { classPropertyName: "assigned", publicName: "assigned", isSignal: true, isRequired: false, transformFunction: null }, sourceLabel: { classPropertyName: "sourceLabel", publicName: "sourceLabel", isSignal: true, isRequired: false, transformFunction: null }, targetLabel: { classPropertyName: "targetLabel", publicName: "targetLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, assignLabel: { classPropertyName: "assignLabel", publicName: "assignLabel", isSignal: true, isRequired: false, transformFunction: null }, unassignLabel: { classPropertyName: "unassignLabel", publicName: "unassignLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { assigned: "assignedChange", moved: "moved" }, host: { classAttribute: "strct-tf" }, ngImport: i0, template: `
+    <div class="strct-tf__col">
+      <div class="strct-tf__head">
+        <span class="strct-tf__title">{{ sourceLabel() }}</span>
+        <span class="strct-tf__count">{{ sourceItems().length }}</span>
+      </div>
+      <strct-searchbox
+        class="strct-tf__search"
+        [placeholder]="searchPlaceholder()"
+        [value]="sourceQuery()"
+        (valueChange)="sourceQuery.set($event)"
+      />
+      <ul class="strct-tf__list" role="listbox" [attr.aria-label]="sourceLabel()">
+        @for (item of sourceItems(); track item.id) {
+          <li class="strct-tf__item" [class.strct-tf__item--disabled]="item.disabled">
+            <strct-checkbox
+              [checked]="sourceChecked().has(item.id)"
+              [disabled]="item.disabled ?? false"
+              (checkedChange)="toggle(sourceChecked, item.id)"
+            >
+              @if (item.icon) {
+                <strct-icon [name]="item.icon" [size]="14" />
+              }
+              <span class="strct-tf__label">{{ item.label }}</span>
+            </strct-checkbox>
+          </li>
+        } @empty {
+          <li class="strct-tf__empty">{{ emptyLabel() }}</li>
+        }
+      </ul>
+    </div>
+
+    <div class="strct-tf__mid">
+      <button
+        strct-button
+        size="sm"
+        variant="neutral"
+        [disabled]="!sourceChecked().size"
+        [attr.aria-label]="assignLabel()"
+        (click)="assign()"
+      >
+        <strct-icon name="chevronRight" [size]="14" />
+      </button>
+      <button
+        strct-button
+        size="sm"
+        variant="neutral"
+        [disabled]="!targetChecked().size"
+        [attr.aria-label]="unassignLabel()"
+        (click)="unassign()"
+      >
+        <strct-icon name="chevronLeft" [size]="14" />
+      </button>
+    </div>
+
+    <div class="strct-tf__col">
+      <div class="strct-tf__head">
+        <span class="strct-tf__title">{{ targetLabel() }}</span>
+        <span class="strct-tf__count">{{ targetItems().length }}</span>
+      </div>
+      <strct-searchbox
+        class="strct-tf__search"
+        [placeholder]="searchPlaceholder()"
+        [value]="targetQuery()"
+        (valueChange)="targetQuery.set($event)"
+      />
+      <ul class="strct-tf__list" role="listbox" [attr.aria-label]="targetLabel()">
+        @for (item of targetItems(); track item.id) {
+          <li class="strct-tf__item" [class.strct-tf__item--disabled]="item.disabled">
+            <strct-checkbox
+              [checked]="targetChecked().has(item.id)"
+              [disabled]="item.disabled ?? false"
+              (checkedChange)="toggle(targetChecked, item.id)"
+            >
+              @if (item.icon) {
+                <strct-icon [name]="item.icon" [size]="14" />
+              }
+              <span class="strct-tf__label">{{ item.label }}</span>
+            </strct-checkbox>
+          </li>
+        } @empty {
+          <li class="strct-tf__empty">{{ emptyLabel() }}</li>
+        }
+      </ul>
+    </div>
+  `, isInline: true, styles: [".strct-tf{display:flex;align-items:stretch;gap:10px;width:100%}.strct-tf__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--bg-2);border:1px solid var(--b2);border-radius:9px}.strct-tf__head{display:flex;align-items:baseline;gap:8px}.strct-tf__title{font-size:12.5px;font-weight:600;color:var(--t1)}.strct-tf__count{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-tf__search{width:100%}.strct-tf__list{list-style:none;margin:0;padding:0;min-height:120px;max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:1px}.strct-tf__item{display:flex;align-items:center;padding:2px 4px;border-radius:5px;color:var(--t1);font-size:12.5px}.strct-tf__item strct-icon{margin-inline-end:6px}.strct-tf__item:hover{background:var(--bg-3)}.strct-tf__item--disabled{color:var(--t4);cursor:default}.strct-tf__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-tf__empty{padding:12px 8px;font-size:12px;color:var(--t3)}.strct-tf__mid{display:flex;flex-direction:column;justify-content:center;gap:8px}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "isDisabled", "disabled", "indeterminate", "ariaLabel"], outputs: ["checkedChange", "isDisabledChange"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctSearchbox, selector: "strct-searchbox", inputs: ["placeholder", "hint", "trigger", "clearable", "ariaLabel", "clearLabel", "value"], outputs: ["valueChange", "search", "activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTransfer, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-transfer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctButton, StrctCheckbox, StrctIcon, StrctSearchbox], template: `
+    <div class="strct-tf__col">
+      <div class="strct-tf__head">
+        <span class="strct-tf__title">{{ sourceLabel() }}</span>
+        <span class="strct-tf__count">{{ sourceItems().length }}</span>
+      </div>
+      <strct-searchbox
+        class="strct-tf__search"
+        [placeholder]="searchPlaceholder()"
+        [value]="sourceQuery()"
+        (valueChange)="sourceQuery.set($event)"
+      />
+      <ul class="strct-tf__list" role="listbox" [attr.aria-label]="sourceLabel()">
+        @for (item of sourceItems(); track item.id) {
+          <li class="strct-tf__item" [class.strct-tf__item--disabled]="item.disabled">
+            <strct-checkbox
+              [checked]="sourceChecked().has(item.id)"
+              [disabled]="item.disabled ?? false"
+              (checkedChange)="toggle(sourceChecked, item.id)"
+            >
+              @if (item.icon) {
+                <strct-icon [name]="item.icon" [size]="14" />
+              }
+              <span class="strct-tf__label">{{ item.label }}</span>
+            </strct-checkbox>
+          </li>
+        } @empty {
+          <li class="strct-tf__empty">{{ emptyLabel() }}</li>
+        }
+      </ul>
+    </div>
+
+    <div class="strct-tf__mid">
+      <button
+        strct-button
+        size="sm"
+        variant="neutral"
+        [disabled]="!sourceChecked().size"
+        [attr.aria-label]="assignLabel()"
+        (click)="assign()"
+      >
+        <strct-icon name="chevronRight" [size]="14" />
+      </button>
+      <button
+        strct-button
+        size="sm"
+        variant="neutral"
+        [disabled]="!targetChecked().size"
+        [attr.aria-label]="unassignLabel()"
+        (click)="unassign()"
+      >
+        <strct-icon name="chevronLeft" [size]="14" />
+      </button>
+    </div>
+
+    <div class="strct-tf__col">
+      <div class="strct-tf__head">
+        <span class="strct-tf__title">{{ targetLabel() }}</span>
+        <span class="strct-tf__count">{{ targetItems().length }}</span>
+      </div>
+      <strct-searchbox
+        class="strct-tf__search"
+        [placeholder]="searchPlaceholder()"
+        [value]="targetQuery()"
+        (valueChange)="targetQuery.set($event)"
+      />
+      <ul class="strct-tf__list" role="listbox" [attr.aria-label]="targetLabel()">
+        @for (item of targetItems(); track item.id) {
+          <li class="strct-tf__item" [class.strct-tf__item--disabled]="item.disabled">
+            <strct-checkbox
+              [checked]="targetChecked().has(item.id)"
+              [disabled]="item.disabled ?? false"
+              (checkedChange)="toggle(targetChecked, item.id)"
+            >
+              @if (item.icon) {
+                <strct-icon [name]="item.icon" [size]="14" />
+              }
+              <span class="strct-tf__label">{{ item.label }}</span>
+            </strct-checkbox>
+          </li>
+        } @empty {
+          <li class="strct-tf__empty">{{ emptyLabel() }}</li>
+        }
+      </ul>
+    </div>
+  `, host: { class: 'strct-tf' }, styles: [".strct-tf{display:flex;align-items:stretch;gap:10px;width:100%}.strct-tf__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--bg-2);border:1px solid var(--b2);border-radius:9px}.strct-tf__head{display:flex;align-items:baseline;gap:8px}.strct-tf__title{font-size:12.5px;font-weight:600;color:var(--t1)}.strct-tf__count{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-tf__search{width:100%}.strct-tf__list{list-style:none;margin:0;padding:0;min-height:120px;max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:1px}.strct-tf__item{display:flex;align-items:center;padding:2px 4px;border-radius:5px;color:var(--t1);font-size:12.5px}.strct-tf__item strct-icon{margin-inline-end:6px}.strct-tf__item:hover{background:var(--bg-3)}.strct-tf__item--disabled{color:var(--t4);cursor:default}.strct-tf__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-tf__empty{padding:12px 8px;font-size:12px;color:var(--t3)}.strct-tf__mid{display:flex;flex-direction:column;justify-content:center;gap:8px}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], assigned: [{ type: i0.Input, args: [{ isSignal: true, alias: "assigned", required: false }] }, { type: i0.Output, args: ["assignedChange"] }], sourceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceLabel", required: false }] }], targetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], assignLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignLabel", required: false }] }], unassignLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unassignLabel", required: false }] }], moved: [{ type: i0.Output, args: ["moved"] }] } });
+
+/**
+ * Split button — a primary action plus a chevron opening its variants
+ * (Fluent's pattern): "Deploy ▾ → Deploy with snapshot / Deploy paused".
+ *
+ *   <strct-split-button label="Deploy" [items]="variants"
+ *                       (action)="deploy()" (picked)="run($event)" />
+ *
+ * The main segment fires `(action)`; menu entries fire `(picked)`.
+ */
+class StrctSplitButton {
+    /** Main action label. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Menu entries (StrctMenuItem: id, label, icon?, critical?, disabled?). */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Optional leading icon of the main segment. */
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Filled (solid accent) look. */
+    solid = input(false, { ...(ngDevMode ? { debugName: "solid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Disable both segments. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name of the chevron (localizable). */
+    menuLabel = input('More actions', ...(ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []));
+    /** The main segment was clicked. */
+    action = output();
+    /** A menu entry was chosen. */
+    picked = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctSplitButton, isStandalone: true, selector: "strct-split-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", picked: "picked" }, ngImport: i0, template: `
+    <div class="strct-sbt" [class.strct-sbt--solid]="solid()">
+      <button
+        type="button"
+        class="strct-sbt__main"
+        [disabled]="disabled() || null"
+        (click)="action.emit()"
+      >
+        @if (icon()) {
+          <strct-icon [name]="icon()" [size]="13" />
+        }
+        {{ label() }}
+      </button>
+      <strct-dropdown align="end">
+        <button
+          type="button"
+          class="strct-sbt__chev"
+          strctDropdownTrigger
+          [disabled]="disabled() || null"
+          [attr.aria-label]="menuLabel() + ': ' + label()"
+        >
+          <strct-icon name="chevronDown" [size]="12" />
+        </button>
+        @for (item of items(); track $index) {
+          @if (item.divider) {
+            <strct-dropdown-divider />
+          } @else {
+            <strct-dropdown-item
+              [critical]="item.critical ?? false"
+              [disabled]="item.disabled ?? false"
+              (click)="!item.disabled && picked.emit(item)"
+            >
+              @if (item.icon) {
+                <strct-icon [name]="item.icon" [size]="13" />
+              }
+              {{ item.label }}
+            </strct-dropdown-item>
+          }
+        }
+      </strct-dropdown>
+    </div>
+  `, isInline: true, styles: [".strct-sbt{display:inline-flex;align-items:stretch}.strct-sbt .strct-dd{display:inline-flex;align-self:stretch}.strct-sbt .strct-dd__trigger{display:inline-flex;align-items:stretch}.strct-sbt__chev{align-self:stretch;height:100%}.strct-sbt__main,.strct-sbt__chev{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--acc);background:transparent;color:var(--acc);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;padding:5px 12px}.strct-sbt__main{border-start-start-radius:7px;border-end-start-radius:7px;border-inline-end:0}.strct-sbt__chev{padding:5px 6px;border-start-end-radius:7px;border-end-end-radius:7px;border-inline-start:1px solid var(--acc50)}.strct-sbt--solid .strct-sbt__main,.strct-sbt--solid .strct-sbt__chev{background:var(--acc);color:var(--inv)}.strct-sbt--solid .strct-sbt__chev{border-inline-start-color:color-mix(in srgb,var(--inv) 30%,var(--acc))}.strct-sbt__main:hover:not(:disabled),.strct-sbt__chev:hover:not(:disabled){background:var(--acc18)}.strct-sbt--solid .strct-sbt__main:hover:not(:disabled),.strct-sbt--solid .strct-sbt__chev:hover:not(:disabled){filter:brightness(1.08);background:var(--acc)}.strct-sbt__main:disabled,.strct-sbt__chev:disabled{opacity:.5;cursor:default}.strct-sbt__main:focus-visible,.strct-sbt__chev:focus-visible{outline:2px solid var(--acc50);outline-offset:1px;position:relative;z-index:1}\n"], dependencies: [{ kind: "component", type: StrctDropdown, selector: "strct-dropdown", inputs: ["align", "popover", "popoverLabel"] }, { kind: "component", type: StrctDropdownDivider, selector: "strct-dropdown-divider" }, { kind: "component", type: StrctDropdownItem, selector: "strct-dropdown-item", inputs: ["critical", "disabled"] }, { kind: "directive", type: StrctDropdownTrigger, selector: "[strctDropdownTrigger]" }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSplitButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-split-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        StrctDropdown,
+                        StrctDropdownDivider,
+                        StrctDropdownItem,
+                        StrctDropdownTrigger,
+                        StrctIcon,
+                    ], template: `
+    <div class="strct-sbt" [class.strct-sbt--solid]="solid()">
+      <button
+        type="button"
+        class="strct-sbt__main"
+        [disabled]="disabled() || null"
+        (click)="action.emit()"
+      >
+        @if (icon()) {
+          <strct-icon [name]="icon()" [size]="13" />
+        }
+        {{ label() }}
+      </button>
+      <strct-dropdown align="end">
+        <button
+          type="button"
+          class="strct-sbt__chev"
+          strctDropdownTrigger
+          [disabled]="disabled() || null"
+          [attr.aria-label]="menuLabel() + ': ' + label()"
+        >
+          <strct-icon name="chevronDown" [size]="12" />
+        </button>
+        @for (item of items(); track $index) {
+          @if (item.divider) {
+            <strct-dropdown-divider />
+          } @else {
+            <strct-dropdown-item
+              [critical]="item.critical ?? false"
+              [disabled]="item.disabled ?? false"
+              (click)="!item.disabled && picked.emit(item)"
+            >
+              @if (item.icon) {
+                <strct-icon [name]="item.icon" [size]="13" />
+              }
+              {{ item.label }}
+            </strct-dropdown-item>
+          }
+        }
+      </strct-dropdown>
+    </div>
+  `, styles: [".strct-sbt{display:inline-flex;align-items:stretch}.strct-sbt .strct-dd{display:inline-flex;align-self:stretch}.strct-sbt .strct-dd__trigger{display:inline-flex;align-items:stretch}.strct-sbt__chev{align-self:stretch;height:100%}.strct-sbt__main,.strct-sbt__chev{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--acc);background:transparent;color:var(--acc);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;padding:5px 12px}.strct-sbt__main{border-start-start-radius:7px;border-end-start-radius:7px;border-inline-end:0}.strct-sbt__chev{padding:5px 6px;border-start-end-radius:7px;border-end-end-radius:7px;border-inline-start:1px solid var(--acc50)}.strct-sbt--solid .strct-sbt__main,.strct-sbt--solid .strct-sbt__chev{background:var(--acc);color:var(--inv)}.strct-sbt--solid .strct-sbt__chev{border-inline-start-color:color-mix(in srgb,var(--inv) 30%,var(--acc))}.strct-sbt__main:hover:not(:disabled),.strct-sbt__chev:hover:not(:disabled){background:var(--acc18)}.strct-sbt--solid .strct-sbt__main:hover:not(:disabled),.strct-sbt--solid .strct-sbt__chev:hover:not(:disabled){filter:brightness(1.08);background:var(--acc)}.strct-sbt__main:disabled,.strct-sbt__chev:disabled{opacity:.5;cursor:default}.strct-sbt__main:focus-visible,.strct-sbt__chev:focus-visible{outline:2px solid var(--acc50);outline-offset:1px;position:relative;z-index:1}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], picked: [{ type: i0.Output, args: ["picked"] }] } });
+
+/**
+ * Repeating diagonal text watermark over its content — compliance overlays
+ * for classified/internal consoles ("CONFIDENTIAL", "user@corp · 2026-07-21"):
+ *
+ *   <strct-watermark text="CONFIDENTIAL">…page…</strct-watermark>
+ *
+ * Rendered as a pointer-transparent tiled SVG layer, so the content below
+ * stays fully interactive and selectable. Purely visual — `aria-hidden`.
+ */
+class StrctWatermark {
+    sanitizer = inject(DomSanitizer);
+    /** The repeated watermark text. */
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Layer opacity (0–1). */
+    opacity = input(0.06, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
+    /** Rotation in degrees (negative = up-slope). */
+    angle = input(-24, ...(ngDevMode ? [{ debugName: "angle" }] : /* istanbul ignore next */ []));
+    /** Tile size in px — larger spreads the marks out. */
+    gap = input(220, ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    /** Font size in px. */
+    fontSize = input(15, ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
+    tile = computed(() => {
+        const size = this.gap();
+        const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">` +
+            `<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" ` +
+            `transform="rotate(${this.angle()} ${size / 2} ${size / 2})" ` +
+            `font-family="sans-serif" font-size="${this.fontSize()}" font-weight="600" ` +
+            `fill="currentColor" fill-opacity="${this.opacity()}">${escapeXml(this.text())}</text></svg>`;
+        return this.sanitizer.bypassSecurityTrustStyle(`url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`);
+    }, ...(ngDevMode ? [{ debugName: "tile" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctWatermark, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctWatermark, isStandalone: true, selector: "strct-watermark", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, angle: { classPropertyName: "angle", publicName: "angle", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-wm" }, ngImport: i0, template: `
+    <ng-content />
+    <div class="strct-wm__layer" aria-hidden="true" [style.background-image]="tile()"></div>
+  `, isInline: true, styles: [".strct-wm{position:relative;display:block}.strct-wm__layer{position:absolute;inset:0;pointer-events:none;background-repeat:repeat;z-index:5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctWatermark, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-watermark', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <ng-content />
+    <div class="strct-wm__layer" aria-hidden="true" [style.background-image]="tile()"></div>
+  `, host: { class: 'strct-wm' }, styles: [".strct-wm{position:relative;display:block}.strct-wm__layer{position:absolute;inset:0;pointer-events:none;background-repeat:repeat;z-index:5}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], angle: [{ type: i0.Input, args: [{ isSignal: true, alias: "angle", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], fontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSize", required: false }] }] } });
+function escapeXml(s) {
+    return s
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+/**
+ * Feature tour (coach marks) — "what's new" onboarding over live UI:
+ *
+ *   <strct-tour [(open)]="tourOpen" [steps]="steps" (finished)="done()" />
+ *
+ * Each step spotlights its `target` selector with a ring cut out of a dimmed
+ * backdrop and anchors a card next to it. Arrows / buttons step, Escape
+ * closes, and the card is a labeled dialog. Purely DOM-driven: targets are
+ * looked up when the step shows, so it works over any page.
+ */
+class StrctTour {
+    /** Whether the tour is showing (two-way). */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** The steps, in order. */
+    steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    /** Localizable strings. */
+    nextLabel = input('Next', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
+    backLabel = input('Back', ...(ngDevMode ? [{ debugName: "backLabel" }] : /* istanbul ignore next */ []));
+    skipLabel = input('Skip', ...(ngDevMode ? [{ debugName: "skipLabel" }] : /* istanbul ignore next */ []));
+    doneLabel = input('Done', ...(ngDevMode ? [{ debugName: "doneLabel" }] : /* istanbul ignore next */ []));
+    /** The last step's Done was clicked (Escape / Skip emit `dismissed`). */
+    finished = output();
+    dismissed = output();
+    index = signal(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    /** Bumped on open/step/resize to re-measure the target. */
+    measureTick = signal(0, ...(ngDevMode ? [{ debugName: "measureTick" }] : /* istanbul ignore next */ []));
+    current = computed(() => this.steps()[this.index()] ?? null, ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    spot = computed(() => {
+        this.measureTick();
+        const step = this.current();
+        if (!this.open() || !step?.target)
+            return null;
+        const el = document.querySelector(step.target);
+        if (!el)
+            return null;
+        const r = el.getBoundingClientRect();
+        return { top: r.top, left: r.left, width: r.width, height: r.height };
+    }, ...(ngDevMode ? [{ debugName: "spot" }] : /* istanbul ignore next */ []));
+    cardPos = computed(() => {
+        const r = this.spot();
+        const w = 300;
+        const h = 170;
+        if (!r) {
+            return {
+                top: Math.max(20, window.innerHeight / 2 - h / 2),
+                left: Math.max(20, window.innerWidth / 2 - w / 2),
+            };
+        }
+        // Below the target if it fits, else above; clamped into the viewport.
+        let top = r.top + r.height + 14;
+        if (top + h > window.innerHeight - 12)
+            top = Math.max(12, r.top - h - 14);
+        const left = Math.min(Math.max(12, r.left), window.innerWidth - w - 12);
+        return { top, left };
+    }, ...(ngDevMode ? [{ debugName: "cardPos" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Restart from step 0 on open; scroll the first target into view.
+        effect(() => {
+            if (this.open()) {
+                this.index.set(0);
+                this.scrollToTarget();
+            }
+        });
+    }
+    next() {
+        if (this.index() >= this.steps().length - 1) {
+            this.open.set(false);
+            this.finished.emit();
+            return;
+        }
+        this.index.update((i) => i + 1);
+        this.scrollToTarget();
+    }
+    prev() {
+        this.index.update((i) => Math.max(0, i - 1));
+        this.scrollToTarget();
+    }
+    close() {
+        this.open.set(false);
+        this.dismissed.emit();
+    }
+    scrollToTarget() {
+        setTimeout(() => {
+            const sel = this.steps()[this.index()]?.target;
+            if (sel)
+                document.querySelector(sel)?.scrollIntoView?.({ block: 'center' });
+            this.measureTick.update((n) => n + 1);
+        });
+    }
+    onEscape() {
+        if (this.open())
+            this.close();
+    }
+    onReflow() {
+        if (this.open())
+            this.measureTick.update((n) => n + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTour, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTour, isStandalone: true, selector: "strct-tour", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLabel: { classPropertyName: "skipLabel", publicName: "skipLabel", isSignal: true, isRequired: false, transformFunction: null }, doneLabel: { classPropertyName: "doneLabel", publicName: "doneLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", finished: "finished", dismissed: "dismissed" }, host: { listeners: { "document:keydown.escape": "onEscape()", "window:resize": "onReflow()", "window:scroll": "onReflow()" } }, ngImport: i0, template: `
+    @if (open() && current(); as step) {
+      <!-- Always the click-catcher; dims only when no ring (its shadow dims). -->
+      <div
+        class="strct-tour__backdrop"
+        [class.strct-tour__backdrop--dim]="!spot()"
+        (click)="close()"
+      ></div>
+      @if (spot(); as r) {
+        <div
+          class="strct-tour__ring"
+          [style.top.px]="r.top - 6"
+          [style.left.px]="r.left - 6"
+          [style.width.px]="r.width + 12"
+          [style.height.px]="r.height + 12"
+        ></div>
+      }
+      <div
+        class="strct-tour__card"
+        role="dialog"
+        [attr.aria-label]="step.title"
+        [style.top.px]="cardPos().top"
+        [style.left.px]="cardPos().left"
+      >
+        <div class="strct-tour__step">{{ index() + 1 }} / {{ steps().length }}</div>
+        <div class="strct-tour__title">{{ step.title }}</div>
+        <div class="strct-tour__body">{{ step.body }}</div>
+        <div class="strct-tour__nav">
+          <button strct-button size="sm" variant="flat" (click)="close()">
+            {{ skipLabel() }}
+          </button>
+          <span class="strct-tour__grow"></span>
+          @if (index() > 0) {
+            <button strct-button size="sm" variant="neutral" (click)="prev()">
+              {{ backLabel() }}
+            </button>
+          }
+          <button strct-button size="sm" variant="primary" solid (click)="next()">
+            {{ index() === steps().length - 1 ? doneLabel() : nextLabel() }}
+          </button>
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [".strct-tour__backdrop{position:fixed;inset:0;z-index:400;background:transparent}.strct-tour__backdrop--dim{background:#00000073}.strct-tour__ring{position:fixed;z-index:401;border:2px solid var(--acc);border-radius:9px;box-shadow:0 0 0 4px var(--acc30),0 0 0 9999px #00000073;pointer-events:none}.strct-tour__card{position:fixed;z-index:402;width:300px;padding:14px 16px;background:var(--bg-1);border:1px solid var(--b2);border-radius:9px;box-shadow:var(--shh)}.strct-tour__step{font-size:10.5px;font-weight:600;letter-spacing:.6px;color:var(--t3);margin-bottom:4px;font-variant-numeric:tabular-nums}.strct-tour__title{font-size:13.5px;font-weight:650;color:var(--t1);margin-bottom:6px}.strct-tour__body{font-size:12.5px;line-height:1.5;color:var(--t2);margin-bottom:12px}.strct-tour__nav{display:flex;align-items:center;gap:8px}.strct-tour__grow{flex:1}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTour, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-tour', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctButton], template: `
+    @if (open() && current(); as step) {
+      <!-- Always the click-catcher; dims only when no ring (its shadow dims). -->
+      <div
+        class="strct-tour__backdrop"
+        [class.strct-tour__backdrop--dim]="!spot()"
+        (click)="close()"
+      ></div>
+      @if (spot(); as r) {
+        <div
+          class="strct-tour__ring"
+          [style.top.px]="r.top - 6"
+          [style.left.px]="r.left - 6"
+          [style.width.px]="r.width + 12"
+          [style.height.px]="r.height + 12"
+        ></div>
+      }
+      <div
+        class="strct-tour__card"
+        role="dialog"
+        [attr.aria-label]="step.title"
+        [style.top.px]="cardPos().top"
+        [style.left.px]="cardPos().left"
+      >
+        <div class="strct-tour__step">{{ index() + 1 }} / {{ steps().length }}</div>
+        <div class="strct-tour__title">{{ step.title }}</div>
+        <div class="strct-tour__body">{{ step.body }}</div>
+        <div class="strct-tour__nav">
+          <button strct-button size="sm" variant="flat" (click)="close()">
+            {{ skipLabel() }}
+          </button>
+          <span class="strct-tour__grow"></span>
+          @if (index() > 0) {
+            <button strct-button size="sm" variant="neutral" (click)="prev()">
+              {{ backLabel() }}
+            </button>
+          }
+          <button strct-button size="sm" variant="primary" solid (click)="next()">
+            {{ index() === steps().length - 1 ? doneLabel() : nextLabel() }}
+          </button>
+        </div>
+      </div>
+    }
+  `, styles: [".strct-tour__backdrop{position:fixed;inset:0;z-index:400;background:transparent}.strct-tour__backdrop--dim{background:#00000073}.strct-tour__ring{position:fixed;z-index:401;border:2px solid var(--acc);border-radius:9px;box-shadow:0 0 0 4px var(--acc30),0 0 0 9999px #00000073;pointer-events:none}.strct-tour__card{position:fixed;z-index:402;width:300px;padding:14px 16px;background:var(--bg-1);border:1px solid var(--b2);border-radius:9px;box-shadow:var(--shh)}.strct-tour__step{font-size:10.5px;font-weight:600;letter-spacing:.6px;color:var(--t3);margin-bottom:4px;font-variant-numeric:tabular-nums}.strct-tour__title{font-size:13.5px;font-weight:650;color:var(--t1);margin-bottom:6px}.strct-tour__body{font-size:12.5px;line-height:1.5;color:var(--t2);margin-bottom:12px}.strct-tour__nav{display:flex;align-items:center;gap:8px}.strct-tour__grow{flex:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], skipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onReflow: [{
+                type: HostListener,
+                args: ['window:resize']
+            }, {
+                type: HostListener,
+                args: ['window:scroll']
+            }] } });
+
+/**
+ * Horizontal menubar — the application-menu strip ("File · Edit · View") for
+ * dense tool-style consoles:
+ *
+ *   <strct-menubar [menus]="menus" (picked)="run($event)" />
+ *
+ * Click (or Enter/Down) opens a menu; Left/Right move across the bar and,
+ * while open, switch the open menu (the APG menubar convention). Escape and
+ * outside click close. `(picked)` carries `{ menu, item }`.
+ */
+class StrctMenubar {
+    host = inject(ElementRef);
+    /** Top-level menus. */
+    menus = input.required(...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the bar (localizable). */
+    ariaLabel = input('Application menu', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** A menu entry was chosen. */
+    picked = output();
+    openId = signal(null, ...(ngDevMode ? [{ debugName: "openId" }] : /* istanbul ignore next */ []));
+    focusIdx = signal(0, ...(ngDevMode ? [{ debugName: "focusIdx" }] : /* istanbul ignore next */ []));
+    toggleMenu(id, i) {
+        this.focusIdx.set(i);
+        this.openId.set(this.openId() === id ? null : id);
+    }
+    pick(menu, item) {
+        if (item.disabled)
+            return;
+        this.openId.set(null);
+        this.picked.emit({ menu, item });
+    }
+    onTopKey(event, i) {
+        const menus = this.menus();
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            const dir = event.key === 'ArrowRight' ? 1 : -1;
+            const next = (i + dir + menus.length) % menus.length;
+            this.focusIdx.set(next);
+            // While a menu is open, moving across the bar switches the open menu.
+            if (this.openId())
+                this.openId.set(menus[next].id);
+            setTimeout(() => {
+                const tops = this.host.nativeElement.querySelectorAll('.strct-mb__top');
+                tops[next]?.focus();
+            });
+        }
+        else if (event.key === 'ArrowDown' || event.key === 'Enter') {
+            event.preventDefault();
+            this.openId.set(menus[i].id);
+        }
+    }
+    onDocClick(event) {
+        if (this.openId() && !this.host.nativeElement.contains(event.target)) {
+            this.openId.set(null);
+        }
+    }
+    onEscape() {
+        this.openId.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctMenubar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctMenubar, isStandalone: true, selector: "strct-menubar", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked" }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `
+    <div class="strct-mb" role="menubar" [attr.aria-label]="ariaLabel()">
+      @for (menu of menus(); track menu.id; let i = $index) {
+        <div class="strct-mb__wrap">
+          <button
+            type="button"
+            class="strct-mb__top"
+            role="menuitem"
+            [class.strct-mb__top--open]="openId() === menu.id"
+            [attr.aria-haspopup]="'menu'"
+            [attr.aria-expanded]="openId() === menu.id"
+            [attr.tabindex]="i === focusIdx() ? 0 : -1"
+            (click)="toggleMenu(menu.id, i)"
+            (keydown)="onTopKey($event, i)"
+          >
+            {{ menu.label }}
+          </button>
+          @if (openId() === menu.id) {
+            <div class="strct-mb__menu" role="menu" [attr.aria-label]="menu.label">
+              @for (item of menu.items; track $index) {
+                @if (item.divider) {
+                  <div class="strct-mb__divider" role="separator"></div>
+                } @else {
+                  <button
+                    type="button"
+                    class="strct-mb__item"
+                    role="menuitem"
+                    [class.strct-mb__item--critical]="item.critical"
+                    [disabled]="item.disabled || null"
+                    (click)="pick(menu, item)"
+                  >
+                    @if (item.icon) {
+                      <strct-icon [name]="item.icon" [size]="13" />
+                    }
+                    {{ item.label }}
+                  </button>
+                }
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".strct-mb{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b1);border-radius:7px}.strct-mb__wrap{position:relative}.strct-mb__top{padding:4px 11px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;cursor:pointer;white-space:nowrap}.strct-mb__top:hover,.strct-mb__top--open{background:var(--bg-3)}.strct-mb__top:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-mb__menu{position:absolute;top:calc(100% + 4px);inset-inline-start:0;z-index:200;min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);display:flex;flex-direction:column}.strct-mb__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;text-align:start;cursor:pointer;white-space:nowrap}.strct-mb__item:hover:not(:disabled){background:var(--bg-3)}.strct-mb__item--critical{color:var(--critical)}.strct-mb__item--critical:hover:not(:disabled){background:var(--critical-bg)}.strct-mb__item:disabled{color:var(--t4);cursor:default}.strct-mb__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-mb__divider{height:1px;margin:4px 6px;background:var(--b2)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctMenubar, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-menubar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    <div class="strct-mb" role="menubar" [attr.aria-label]="ariaLabel()">
+      @for (menu of menus(); track menu.id; let i = $index) {
+        <div class="strct-mb__wrap">
+          <button
+            type="button"
+            class="strct-mb__top"
+            role="menuitem"
+            [class.strct-mb__top--open]="openId() === menu.id"
+            [attr.aria-haspopup]="'menu'"
+            [attr.aria-expanded]="openId() === menu.id"
+            [attr.tabindex]="i === focusIdx() ? 0 : -1"
+            (click)="toggleMenu(menu.id, i)"
+            (keydown)="onTopKey($event, i)"
+          >
+            {{ menu.label }}
+          </button>
+          @if (openId() === menu.id) {
+            <div class="strct-mb__menu" role="menu" [attr.aria-label]="menu.label">
+              @for (item of menu.items; track $index) {
+                @if (item.divider) {
+                  <div class="strct-mb__divider" role="separator"></div>
+                } @else {
+                  <button
+                    type="button"
+                    class="strct-mb__item"
+                    role="menuitem"
+                    [class.strct-mb__item--critical]="item.critical"
+                    [disabled]="item.disabled || null"
+                    (click)="pick(menu, item)"
+                  >
+                    @if (item.icon) {
+                      <strct-icon [name]="item.icon" [size]="13" />
+                    }
+                    {{ item.label }}
+                  </button>
+                }
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [".strct-mb{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b1);border-radius:7px}.strct-mb__wrap{position:relative}.strct-mb__top{padding:4px 11px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;cursor:pointer;white-space:nowrap}.strct-mb__top:hover,.strct-mb__top--open{background:var(--bg-3)}.strct-mb__top:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-mb__menu{position:absolute;top:calc(100% + 4px);inset-inline-start:0;z-index:200;min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);display:flex;flex-direction:column}.strct-mb__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;text-align:start;cursor:pointer;white-space:nowrap}.strct-mb__item:hover:not(:disabled){background:var(--bg-3)}.strct-mb__item--critical{color:var(--critical)}.strct-mb__item--critical:hover:not(:disabled){background:var(--critical-bg)}.strct-mb__item:disabled{color:var(--t4);cursor:default}.strct-mb__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-mb__divider{height:1px;margin:4px 6px;background:var(--b2)}\n"] }]
+        }], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }], onDocClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * Screen-reader announcements for state changes that have no visible text —
+ * "12 rows loaded", "Snapshot created" (Material's LiveAnnouncer, strct-sized):
+ *
+ *   private announcer = inject(StrctAnnouncer);
+ *   this.announcer.announce('12 rows loaded');
+ *
+ * Maintains one visually-hidden live region per politeness level; repeated
+ * identical messages are re-announced (the region is cleared first).
+ */
+class StrctAnnouncer {
+    regions = new Map();
+    clearTimer;
+    announce(message, politeness = 'polite') {
+        const region = this.regionFor(politeness);
+        // Clear first so identical consecutive messages still fire.
+        region.textContent = '';
+        setTimeout(() => (region.textContent = message));
+        clearTimeout(this.clearTimer);
+        // Stale announcements should not linger for the next SR user to stumble on.
+        this.clearTimer = setTimeout(() => (region.textContent = ''), 10_000);
+    }
+    regionFor(politeness) {
+        let region = this.regions.get(politeness);
+        if (!region) {
+            region = document.createElement('div');
+            region.setAttribute('aria-live', politeness);
+            region.setAttribute('aria-atomic', 'true');
+            region.className = 'strct-announcer';
+            region.style.cssText =
+                'position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;';
+            document.body.appendChild(region);
+            this.regions.set(politeness, region);
+        }
+        return region;
+    }
+    ngOnDestroy() {
+        clearTimeout(this.clearTimer);
+        for (const region of this.regions.values())
+            region.remove();
+        this.regions.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctAnnouncer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctAnnouncer, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctAnnouncer, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+function normalize(combo) {
+    return combo
+        .toLowerCase()
+        .split('+')
+        .map((p) => p.trim())
+        .sort()
+        .join('+');
+}
+function comboOf(event) {
+    const parts = [];
+    if (event.ctrlKey)
+        parts.push('ctrl');
+    if (event.metaKey)
+        parts.push('meta');
+    if (event.altKey)
+        parts.push('alt');
+    if (event.shiftKey && event.key.length > 1)
+        parts.push('shift');
+    parts.push(event.key.toLowerCase());
+    return parts.sort().join('+');
+}
+/** `mod` matches Ctrl (and ⌘ on mac keyboards) — expand to both. */
+function expand(combo) {
+    const n = combo.toLowerCase();
+    if (!n.includes('mod'))
+        return [normalize(n)];
+    return [normalize(n.replace('mod', 'ctrl')), normalize(n.replace('mod', 'meta'))];
+}
+/**
+ * Application hotkeys, centrally registered so they are discoverable — the
+ * Blueprint pattern:
+ *
+ *   private hotkeys = inject(StrctHotkeysService);
+ *   ngOnInit() { this.dispose = this.hotkeys.register(
+ *     { combo: 'mod+k', description: 'Open command palette', group: 'Global',
+ *       handler: () => this.palette.open() }); }
+ *
+ * Combos: `'a'`, `'?'`, `'ctrl+k'`, `'meta+shift+p'`, `'mod+k'` (mod = Ctrl/⌘).
+ * Plain-key combos are suppressed while typing in inputs / textareas /
+ * contenteditable; modifier combos always fire. Pair with
+ * `<strct-hotkeys-help/>` for the ⌘/ ("?") cheatsheet overlay.
+ */
+class StrctHotkeysService {
+    registry = signal([], ...(ngDevMode ? [{ debugName: "registry" }] : /* istanbul ignore next */ []));
+    /** All registered hotkeys (for the help overlay). */
+    hotkeys = this.registry.asReadonly();
+    listener = (event) => this.onKeydown(event);
+    constructor() {
+        document.addEventListener('keydown', this.listener);
+    }
+    /** Register a hotkey; the returned function unregisters it. */
+    register(hotkey) {
+        this.registry.update((list) => [...list, hotkey]);
+        return () => this.registry.update((list) => list.filter((h) => h !== hotkey));
+    }
+    onKeydown(event) {
+        const combo = comboOf(event);
+        const typing = isTyping(event);
+        for (const hk of this.registry()) {
+            if (!expand(hk.combo).includes(combo))
+                continue;
+            // While typing, only modifier combos may fire.
+            if (typing && !(event.ctrlKey || event.metaKey || event.altKey))
+                continue;
+            event.preventDefault();
+            hk.handler(event);
+            return;
+        }
+    }
+    ngOnDestroy() {
+        document.removeEventListener('keydown', this.listener);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctHotkeysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctHotkeysService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctHotkeysService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+function isTyping(event) {
+    const el = event.target;
+    if (!el)
+        return false;
+    return (el.tagName === 'INPUT' ||
+        el.tagName === 'TEXTAREA' ||
+        el.tagName === 'SELECT' ||
+        el.isContentEditable);
+}
+/**
+ * The hotkey cheatsheet overlay. Mount once near the app root; it registers
+ * `?` itself and lists everything in the service, grouped:
+ *
+ *   <strct-hotkeys-help />
+ */
+class StrctHotkeysHelp {
+    service = inject(StrctHotkeysService);
+    /** Overlay visibility (two-way; `?` toggles it too). */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Localizable strings. */
+    title = input('Keyboard shortcuts', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    emptyText = input('No shortcuts registered.', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    grouped = computed(() => {
+        const groups = new Map();
+        for (const hk of this.service.hotkeys()) {
+            const name = hk.group ?? 'General';
+            const list = groups.get(name);
+            if (list)
+                list.push(hk);
+            else
+                groups.set(name, [hk]);
+        }
+        return [...groups.entries()].map(([name, keys]) => ({ name, keys }));
+    }, ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const dispose = this.service.register({
+            combo: '?',
+            description: 'Show this help',
+            group: 'General',
+            handler: () => this.open.update((v) => !v),
+        });
+        inject(DestroyRef).onDestroy(dispose);
+    }
+    // Escape is handled locally — registering it in the service would swallow
+    // every Escape in the app (the service preventDefaults on match).
+    onEscape() {
+        if (this.open())
+            this.open.set(false);
+    }
+    parts(combo) {
+        return combo.split('+').map((p) => {
+            const map = {
+                mod: '⌘/Ctrl',
+                meta: '⌘',
+                ctrl: 'Ctrl',
+                alt: 'Alt',
+                shift: 'Shift',
+                escape: 'Esc',
+            };
+            return map[p.trim().toLowerCase()] ?? p.trim().toUpperCase();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctHotkeysHelp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctHotkeysHelp, isStandalone: true, selector: "strct-hotkeys-help", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `
+    @if (open()) {
+      <div class="strct-hkh__backdrop" (click)="open.set(false)"></div>
+      <div class="strct-hkh" role="dialog" [attr.aria-label]="title()">
+        <div class="strct-hkh__head">
+          <span class="strct-hkh__title">{{ title() }}</span>
+          <strct-kbd>?</strct-kbd>
+        </div>
+        @for (group of grouped(); track group.name) {
+          <div class="strct-hkh__group">
+            <div class="strct-hkh__groupname">{{ group.name }}</div>
+            @for (hk of group.keys; track hk.combo + hk.description) {
+              <div class="strct-hkh__row">
+                <span class="strct-hkh__desc">{{ hk.description }}</span>
+                <span class="strct-hkh__keys">
+                  @for (part of parts(hk.combo); track $index) {
+                    <strct-kbd>{{ part }}</strct-kbd>
+                  }
+                </span>
+              </div>
+            }
+          </div>
+        } @empty {
+          <p class="strct-hkh__empty">{{ emptyText() }}</p>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [".strct-hkh__backdrop{position:fixed;inset:0;z-index:400;background:#00000073}.strct-hkh{position:fixed;z-index:401;top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 32px));max-height:min(70vh,520px);overflow:auto;padding:16px 18px;background:var(--bg-1);border:1px solid var(--b2);border-radius:10px;box-shadow:var(--shh)}.strct-hkh__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.strct-hkh__title{font-size:13.5px;font-weight:650;color:var(--t1)}.strct-hkh__group{margin-bottom:12px}.strct-hkh__groupname{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);margin-bottom:5px}.strct-hkh__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}.strct-hkh__desc{font-size:12.5px;color:var(--t1)}.strct-hkh__keys{display:inline-flex;gap:4px}.strct-hkh__empty{font-size:12.5px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctKbd, selector: "strct-kbd" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctHotkeysHelp, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-hotkeys-help', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctKbd], template: `
+    @if (open()) {
+      <div class="strct-hkh__backdrop" (click)="open.set(false)"></div>
+      <div class="strct-hkh" role="dialog" [attr.aria-label]="title()">
+        <div class="strct-hkh__head">
+          <span class="strct-hkh__title">{{ title() }}</span>
+          <strct-kbd>?</strct-kbd>
+        </div>
+        @for (group of grouped(); track group.name) {
+          <div class="strct-hkh__group">
+            <div class="strct-hkh__groupname">{{ group.name }}</div>
+            @for (hk of group.keys; track hk.combo + hk.description) {
+              <div class="strct-hkh__row">
+                <span class="strct-hkh__desc">{{ hk.description }}</span>
+                <span class="strct-hkh__keys">
+                  @for (part of parts(hk.combo); track $index) {
+                    <strct-kbd>{{ part }}</strct-kbd>
+                  }
+                </span>
+              </div>
+            }
+          </div>
+        } @empty {
+          <p class="strct-hkh__empty">{{ emptyText() }}</p>
+        }
+      </div>
+    }
+  `, styles: [".strct-hkh__backdrop{position:fixed;inset:0;z-index:400;background:#00000073}.strct-hkh{position:fixed;z-index:401;top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 32px));max-height:min(70vh,520px);overflow:auto;padding:16px 18px;background:var(--bg-1);border:1px solid var(--b2);border-radius:10px;box-shadow:var(--shh)}.strct-hkh__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.strct-hkh__title{font-size:13.5px;font-weight:650;color:var(--t1)}.strct-hkh__group{margin-bottom:12px}.strct-hkh__groupname{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);margin-bottom:5px}.strct-hkh__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}.strct-hkh__desc{font-size:12.5px;color:var(--t1)}.strct-hkh__keys{display:inline-flex;gap:4px}.strct-hkh__empty{font-size:12.5px;color:var(--t3)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * List drag-reorder primitive — the consumer owns the array:
+ *
+ *   <ul strctReorder (reordered)="move($event)">
+ *     @for (s of steps(); track s.id) {
+ *       <li strctReorderItem>{{ s.label }}</li>
+ *     }
+ *   </ul>
+ *
+ *   move({ from, to }: StrctReorderEvent) {
+ *     this.steps.update((s) => { const c = [...s]; c.splice(to, 0, ...c.splice(from, 1)); return c; });
+ *   }
+ *
+ * Items are HTML5-draggable; keyboard reorder is Alt+ArrowUp / Alt+ArrowDown
+ * on the focused item (items get `tabindex="0"` unless they already manage
+ * focus). Indexes are positions among the `strctReorderItem` siblings.
+ */
+class StrctReorder {
+    host = inject(ElementRef);
+    /** Emits when a drag or keyboard move completes. */
+    reordered = output();
+    /** Disable all reordering (display-only mode). */
+    reorderDisabled = input(false, ...(ngDevMode ? [{ debugName: "reorderDisabled" }] : /* istanbul ignore next */ []));
+    dragIndex = signal(null, ...(ngDevMode ? [{ debugName: "dragIndex" }] : /* istanbul ignore next */ []));
+    overIndex = signal(null, ...(ngDevMode ? [{ debugName: "overIndex" }] : /* istanbul ignore next */ []));
+    items() {
+        return [...this.host.nativeElement.querySelectorAll('[strctReorderItem]')];
+    }
+    indexOf(el) {
+        return this.items().indexOf(el);
+    }
+    commit(from, to) {
+        this.dragIndex.set(null);
+        this.overIndex.set(null);
+        if (from < 0 || to < 0 || from === to)
+            return;
+        this.reordered.emit({ from, to });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctReorder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: StrctReorder, isStandalone: true, selector: "[strctReorder]", inputs: { reorderDisabled: { classPropertyName: "reorderDisabled", publicName: "reorderDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reordered: "reordered" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctReorder, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctReorder]' }]
+        }], propDecorators: { reordered: [{ type: i0.Output, args: ["reordered"] }], reorderDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderDisabled", required: false }] }] } });
+/** One draggable row inside a `[strctReorder]` container. */
+class StrctReorderItem {
+    list = inject(StrctReorder);
+    el = inject(ElementRef);
+    // Captured before our own binding ever writes tabindex, so it never flips.
+    hadOwnTabindex = this.el.nativeElement.hasAttribute('tabindex');
+    hostTabindex() {
+        return this.hadOwnTabindex ? null : 0;
+    }
+    isDragging() {
+        return this.list.dragIndex() === this.index();
+    }
+    isOver() {
+        return this.list.overIndex() === this.index() && this.list.dragIndex() !== this.index();
+    }
+    index() {
+        return this.list.indexOf(this.el.nativeElement);
+    }
+    onDragStart(event) {
+        if (this.list.reorderDisabled())
+            return;
+        this.list.dragIndex.set(this.index());
+        event.dataTransfer?.setData('text/plain', String(this.index()));
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'move';
+    }
+    onDragOver(event) {
+        if (this.list.dragIndex() == null)
+            return;
+        event.preventDefault();
+        this.list.overIndex.set(this.index());
+    }
+    onDrop(event) {
+        event.preventDefault();
+        const from = this.list.dragIndex();
+        if (from == null)
+            return;
+        this.list.commit(from, this.index());
+    }
+    onDragEnd() {
+        this.list.dragIndex.set(null);
+        this.list.overIndex.set(null);
+    }
+    onKeydown(event) {
+        if (this.list.reorderDisabled() || !event.altKey)
+            return;
+        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')
+            return;
+        event.preventDefault();
+        const from = this.index();
+        const to = event.key === 'ArrowUp' ? from - 1 : from + 1;
+        if (to < 0 || to >= this.list.items().length)
+            return;
+        this.list.commit(from, to);
+        // Keep focus on the moved item after the consumer re-renders.
+        setTimeout(() => this.list.items()[to]?.focus());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctReorderItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: StrctReorderItem, isStandalone: true, selector: "[strctReorderItem]", host: { listeners: { "dragstart": "onDragStart($event)", "dragover": "onDragOver($event)", "drop": "onDrop($event)", "dragend": "onDragEnd()", "keydown": "onKeydown($event)" }, properties: { "attr.draggable": "!list.reorderDisabled()", "attr.tabindex": "hostTabindex()", "class.strct-reorder--dragging": "isDragging()", "class.strct-reorder--over": "isOver()", "attr.aria-roledescription": "'sortable'" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctReorderItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[strctReorderItem]',
+                    host: {
+                        '[attr.draggable]': '!list.reorderDisabled()',
+                        '[attr.tabindex]': 'hostTabindex()',
+                        '[class.strct-reorder--dragging]': 'isDragging()',
+                        '[class.strct-reorder--over]': 'isOver()',
+                        '[attr.aria-roledescription]': "'sortable'",
+                    },
+                }]
+        }], propDecorators: { onDragStart: [{
+                type: HostListener,
+                args: ['dragstart', ['$event']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }], onDragEnd: [{
+                type: HostListener,
+                args: ['dragend']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
 /**
  * Public API surface of the strct UI library.
  */
@@ -12768,5 +15484,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDesc, StrctDescriptionList, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctEmptyState, StrctField, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHero, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRating, StrctRowDetailDef, StrctSearchbox, StrctSectionMenu, StrctSegmented, StrctShell, StrctShellService, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon, strctValidationIcon, strctValidationTone };
+export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionMenu, StrctSegmented, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWatermark, StrctWizard, parseAnsi, registerStrctIcon, strctComputeDiff, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone };
 //# sourceMappingURL=akcelik-strct.mjs.map