@akcelik/strct 0.1.1 → 0.3.0

package/fesm2022/akcelik-strct.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, booleanAttribute, output, HostListener, model, contentChildren, effect, forwardRef, TemplateRef, contentChild, Renderer2 } from '@angular/core';
+import { inject, DOCUMENT, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, booleanAttribute, output, HostListener, model, contentChildren, effect, DestroyRef, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, TemplateRef, contentChild, Renderer2 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgTemplateOutlet } from '@angular/common';
 
 /** All palettes the token system ships with, in display order. */
 const STRCT_PALETTES = [
@@ -124,6 +124,9 @@ const STRCT_ICONS = {
     code: '<path d="M5.5 5L2.5 8l3 3M10.5 5l3 3-3 3M9 3.5l-2 9"/>',
     book: '<path d="M3 3.2h6a1.5 1.5 0 0 1 1.5 1.5v8.1H4.5A1.5 1.5 0 0 1 3 11.3z"/><path d="M13 3.2H9.5A1.5 1.5 0 0 0 8 4.7v8.1h5z"/>',
     terminal: '<rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M4.8 6.5L7 8.2 4.8 9.9M8.2 10.2h3"/>',
+    folder: '<path d="M2 4.6a1 1 0 0 1 1-1h3.1l1.3 1.6H13a1 1 0 0 1 1 1V12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>',
+    template: '<path d="M4.3 2.5h4.6l3.1 3.1V13a.5.5 0 0 1-.5.5H4.3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5z"/><path d="M8.7 2.6v3.1h3.1"/><path d="M5.8 9h4.2M5.8 11h2.6"/>',
+    tag: '<path d="M2.6 7.7V3.2a.6.6 0 0 1 .6-.6h4.5l5.6 5.6a1 1 0 0 1 0 1.4l-3.5 3.5a1 1 0 0 1-1.4 0z"/><circle cx="5.4" cy="5.4" r=".9" fill="currentColor" stroke="none"/>',
     // ── Datacenter / infrastructure ─────────────────────────────
     datacenter: '<rect x="2.5" y="2.5" width="11" height="11" rx="1"/><path d="M5 5h6M5 7.3h6M5 9.6h3.5"/><circle cx="11" cy="9.7" r=".5" fill="currentColor" stroke="none"/>',
     rack: '<rect x="3.5" y="2" width="9" height="12" rx="1"/><path d="M3.5 5.2h9M3.5 8.4h9M3.5 11.6h9"/><circle cx="5.4" cy="3.6" r=".4" fill="currentColor" stroke="none"/><circle cx="5.4" cy="6.8" r=".4" fill="currentColor" stroke="none"/><circle cx="5.4" cy="10" r=".4" fill="currentColor" stroke="none"/>',
@@ -144,6 +147,10 @@ const STRCT_ICONS = {
     hba: '<rect x="2.3" y="3.4" width="11.4" height="6.4" rx="1"/><circle cx="5.1" cy="6.6" r="1.2"/><circle cx="8.1" cy="6.6" r="1.2"/><path d="M10.6 5.6h1.6M10.6 7.6h1.6M5 9.8v2.6M11 9.8v2.6"/>',
     // RJ45 ethernet port (switch / server) — keyed jack with contact pins.
     ethernet: '<rect x="2.5" y="4" width="11" height="7.4" rx="1"/><path d="M6 4V2.6h4V4"/><path d="M5.3 7.6v2M7.1 7.6v2M8.9 7.6v2M10.7 7.6v2"/>',
+    // Resource pool — a proportional allocation (pie with two radii).
+    resourcePool: '<circle cx="8" cy="8" r="5.6"/><path d="M8 8V2.4M8 8l4.9 2.7"/>',
+    // Port group — a grouped set of switch ports under a shared rail.
+    portGroup: '<path d="M1.8 4.4h12.4"/><rect x="2.2" y="6.2" width="3.4" height="4" rx=".5"/><rect x="6.3" y="6.2" width="3.4" height="4" rx=".5"/><rect x="10.4" y="6.2" width="3.4" height="4" rx=".5"/><path d="M3.9 10.2v1.6M8 10.2v1.6M12.1 10.2v1.6"/>',
     // ── Accessibility (original glyphs for generic concepts) ─────
     universalAccess: '<circle cx="8" cy="8" r="6"/><circle cx="8" cy="4.9" r=".9" fill="currentColor" stroke="none"/><path d="M4.9 6.3c2 .8 4.2 .8 6.2 0M8 6.4v3.1M6.3 11.9 8 9.4l1.7 2.5"/>',
     wheelchair: '<circle cx="6.5" cy="3.1" r="1.3"/><path d="M6.5 4.5v3.3h3.1l1.7 3.4"/><circle cx="6.7" cy="11.3" r="2.6"/><path d="M9.3 11.3h2.1l-.5 1.6"/>',
@@ -181,7 +188,7 @@ const STRCT_ICON_GROUPS = [
             'hexagon', 'search', 'menu', 'ellipsis', 'dots', 'close', 'check', 'calendar',
             'eye', 'eyeOff', 'upload', 'download', 'sun', 'moon', 'bell', 'heart', 'layers',
             'grid', 'form', 'chart', 'bars', 'gauge', 'palette', 'sidebar', 'compass',
-            'copy', 'code', 'book', 'terminal',
+            'copy', 'code', 'book', 'terminal', 'folder', 'template', 'tag',
         ],
     },
     {
@@ -201,6 +208,7 @@ const STRCT_ICON_GROUPS = [
         names: [
             'datacenter', 'rack', 'cluster', 'host', 'vm', 'switch', 'storage',
             'network', 'cpu', 'memory', 'disk', 'port', 'nic', 'hba', 'ethernet', 'power',
+            'resourcePool', 'portGroup',
         ],
     },
     {
@@ -436,10 +444,16 @@ class StrctOverlay {
         let left;
         if (p === 'right') {
             left = a.right + gap;
+            // Flip to the left of the anchor if it would overflow the right edge.
+            if (left + w > vw - margin && a.left - gap - w > margin)
+                left = a.left - gap - w;
             top = a.top;
         }
         else if (p === 'left') {
             left = a.left - gap - w;
+            // Flip to the right of the anchor if it would overflow the left edge.
+            if (left < margin && a.right + gap + w < vw - margin)
+                left = a.right + gap;
             top = a.top;
         }
         else {
@@ -1116,45 +1130,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: { class: 'strct-tabs' }, styles: [".strct-tabs{display:block}.strct-tabs__bar{display:flex;gap:2px;border-bottom:1px solid var(--b2)}.strct-tabs__btn{appearance:none;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t2);padding:9px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .14s ease,border-color .14s ease}.strct-tabs__btn:hover{color:var(--t1)}.strct-tabs__btn--active{color:var(--acc);border-bottom-color:var(--acc)}.strct-tabs__btn:disabled{color:var(--t4);cursor:not-allowed}.strct-tabs__panels{padding-top:16px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTab), { isSignal: true }] }] } });
 
-/** Root container for a tree of `<strct-tree-node>` items. */
-class StrctTree {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctTree, isStandalone: true, selector: "strct-tree", host: { attributes: { "role": "tree" }, classAttribute: "strct-tree" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-tree{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTree, decorators: [{
-            type: Component,
-            args: [{ selector: 'strct-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: { class: 'strct-tree', role: 'tree' }, styles: [".strct-tree{display:block}\n"] }]
-        }] });
 /**
- * Tree node. Nest `<strct-tree-node>` children to build hierarchy:
- *   <strct-tree-node label="Group" [(expanded)]="open">
- *     <strct-tree-node label="Leaf" icon="grid" [active]="true" />
+ * Tree node. Two modes:
+ *  - **Content:** nest `<strct-tree-node>` children manually.
+ *  - **Data:** pass a `[node]` object that recurses over its `children` —
+ *    used internally by `<strct-tree [nodes]>`.
+ *
+ *   <strct-tree-node label="Group" icon="layers" badge="ok" [(expanded)]="open">
+ *     <strct-tree-node label="Leaf" icon="vm" [active]="true" />
  *   </strct-tree-node>
  */
 class StrctTreeNode {
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Data-driven node; when set, label/icon/children come from it. */
+    node = input(null, ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    badge = input('none', ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
     active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** Content-mode click. */
     activated = output();
+    /** Data-mode click — carries the activated node (bubbles to the tree). */
+    nodeActivated = output();
     childNodes = contentChildren(StrctTreeNode, ...(ngDevMode ? [{ debugName: "childNodes" }] : /* istanbul ignore next */ []));
-    hasChildren = computed(() => this.childNodes().length > 0, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+    /** Data-mode expansion (seeded from node.expanded on first toggle). */
+    dataExpanded = signal(null, ...(ngDevMode ? [{ debugName: "dataExpanded" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => this.node()?.label ?? this.label(), ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    displayIcon = computed(() => this.node()?.icon ?? this.icon(), ...(ngDevMode ? [{ debugName: "displayIcon" }] : /* istanbul ignore next */ []));
+    displayBadge = computed(() => this.node()?.badge ?? this.badge(), ...(ngDevMode ? [{ debugName: "displayBadge" }] : /* istanbul ignore next */ []));
+    displayActive = computed(() => this.node()?.active ?? this.active(), ...(ngDevMode ? [{ debugName: "displayActive" }] : /* istanbul ignore next */ []));
+    hasChildren = computed(() => {
+        const n = this.node();
+        return n ? (n.children?.length ?? 0) > 0 : this.childNodes().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+    isOpen = computed(() => {
+        if (this.node())
+            return this.dataExpanded() ?? this.node().expanded ?? false;
+        return this.expanded();
+    }, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     toggle() {
-        this.expanded.update((v) => !v);
+        if (this.node()) {
+            this.dataExpanded.set(!this.isOpen());
+        }
+        else {
+            this.expanded.update((v) => !v);
+        }
+    }
+    onActivate() {
+        const n = this.node();
+        if (n)
+            this.nodeActivated.emit(n);
+        else
+            this.activated.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTreeNode, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTreeNode, isStandalone: true, selector: "strct-tree-node", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", activated: "activated" }, host: { classAttribute: "strct-tnode" }, queries: [{ propertyName: "childNodes", predicate: StrctTreeNode, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTreeNode, isStandalone: true, selector: "strct-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", activated: "activated", nodeActivated: "nodeActivated" }, host: { classAttribute: "strct-tnode" }, queries: [{ propertyName: "childNodes", predicate: StrctTreeNode, isSignal: true }], ngImport: i0, template: `
     <div
       class="strct-tnode__row"
-      [class.strct-tnode__row--active]="active()"
+      [class.strct-tnode__row--active]="displayActive()"
       role="treeitem"
-      [attr.aria-expanded]="hasChildren() ? expanded() : null"
-      (click)="activated.emit()"
+      [attr.aria-expanded]="hasChildren() ? isOpen() : null"
+      (click)="onActivate()"
     >
       @if (hasChildren()) {
         <span
           class="strct-tnode__chevron"
-          [class.strct-tnode__chevron--open]="expanded()"
+          [class.strct-tnode__chevron--open]="isOpen()"
           (click)="$event.stopPropagation(); toggle()"
         >
           <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
@@ -1162,33 +1203,45 @@ class StrctTreeNode {
       } @else {
         <span class="strct-tnode__spacer"></span>
       }
-      @if (icon()) {
-        <strct-icon class="strct-tnode__icon" [name]="icon()!" [size]="14" [strokeWidth]="1.3" />
+      @if (displayIcon()) {
+        <strct-icon
+          class="strct-tnode__icon"
+          [name]="displayIcon()!"
+          [size]="14"
+          [strokeWidth]="1.3"
+          [badge]="displayBadge()"
+        />
       }
-      <span class="strct-tnode__label">{{ label() }}</span>
+      <span class="strct-tnode__label">{{ displayLabel() }}</span>
       <ng-content select="[strctTreeTrailing]" />
     </div>
-    @if (hasChildren() && expanded()) {
+    @if (hasChildren() && isOpen()) {
       <div class="strct-tnode__children" role="group">
-        <ng-content />
+        @if (node()) {
+          @for (child of node()!.children ?? []; track $index) {
+            <strct-tree-node [node]="child" (nodeActivated)="nodeActivated.emit($event)" />
+          }
+        } @else {
+          <ng-content />
+        }
       </div>
     }
-  `, isInline: true, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;color:var(--t3);transition:transform .15s ease;width:14px;justify-content:center}.strct-tnode__chevron--open{transform:rotate(90deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-left:16px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;color:var(--t3);transition:transform .15s ease;width:14px;justify-content:center}.strct-tnode__chevron--open{transform:rotate(90deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-left:16px}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded"], outputs: ["expandedChange", "activated", "nodeActivated"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTreeNode, decorators: [{
             type: Component,
             args: [{ selector: 'strct-tree-node', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
     <div
       class="strct-tnode__row"
-      [class.strct-tnode__row--active]="active()"
+      [class.strct-tnode__row--active]="displayActive()"
       role="treeitem"
-      [attr.aria-expanded]="hasChildren() ? expanded() : null"
-      (click)="activated.emit()"
+      [attr.aria-expanded]="hasChildren() ? isOpen() : null"
+      (click)="onActivate()"
     >
       @if (hasChildren()) {
         <span
           class="strct-tnode__chevron"
-          [class.strct-tnode__chevron--open]="expanded()"
+          [class.strct-tnode__chevron--open]="isOpen()"
           (click)="$event.stopPropagation(); toggle()"
         >
           <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
@@ -1196,21 +1249,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       } @else {
         <span class="strct-tnode__spacer"></span>
       }
-      @if (icon()) {
-        <strct-icon class="strct-tnode__icon" [name]="icon()!" [size]="14" [strokeWidth]="1.3" />
+      @if (displayIcon()) {
+        <strct-icon
+          class="strct-tnode__icon"
+          [name]="displayIcon()!"
+          [size]="14"
+          [strokeWidth]="1.3"
+          [badge]="displayBadge()"
+        />
       }
-      <span class="strct-tnode__label">{{ label() }}</span>
+      <span class="strct-tnode__label">{{ displayLabel() }}</span>
       <ng-content select="[strctTreeTrailing]" />
     </div>
-    @if (hasChildren() && expanded()) {
+    @if (hasChildren() && isOpen()) {
       <div class="strct-tnode__children" role="group">
-        <ng-content />
+        @if (node()) {
+          @for (child of node()!.children ?? []; track $index) {
+            <strct-tree-node [node]="child" (nodeActivated)="nodeActivated.emit($event)" />
+          }
+        } @else {
+          <ng-content />
+        }
       </div>
     }
   `, host: { class: 'strct-tnode' }, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;color:var(--t3);transition:transform .15s ease;width:14px;justify-content:center}.strct-tnode__chevron--open{transform:rotate(90deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-left:16px}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], activated: [{ type: i0.Output, args: ["activated"] }], childNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { isSignal: true }] }] } });
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], activated: [{ type: i0.Output, args: ["activated"] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }], childNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { isSignal: true }] }] } });
+/**
+ * Root container for a tree. Either project `<strct-tree-node>` children, or
+ * pass `[nodes]` for a fully data-driven, self-recursing tree:
+ *   <strct-tree [nodes]="roots" (nodeActivated)="select($event)" />
+ */
+class StrctTree {
+    /** Data-driven node list; when set, projected content is ignored. */
+    nodes = input(null, ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /** Emitted when any data-driven node is clicked. */
+    nodeActivated = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTree, isStandalone: true, selector: "strct-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeActivated: "nodeActivated" }, host: { attributes: { "role": "tree" }, classAttribute: "strct-tree" }, ngImport: i0, template: `
+    @if (nodes(); as ns) {
+      @for (n of ns; track $index) {
+        <strct-tree-node [node]="n" (nodeActivated)="nodeActivated.emit($event)" />
+      }
+    } @else {
+      <ng-content />
+    }
+  `, isInline: true, styles: [".strct-tree{display:block}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded"], outputs: ["expandedChange", "activated", "nodeActivated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTree, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctTreeNode], template: `
+    @if (nodes(); as ns) {
+      @for (n of ns; track $index) {
+        <strct-tree-node [node]="n" (nodeActivated)="nodeActivated.emit($event)" />
+      }
+    } @else {
+      <ng-content />
+    }
+  `, host: { class: 'strct-tree', role: 'tree' }, styles: [".strct-tree{display:block}\n"] }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }] } });
 
 let modalCounter = 0;
+// Body scroll-lock shared across any number of simultaneously open modals.
+let scrollLockCount = 0;
+let savedBodyOverflow = '';
+function lockBodyScroll(doc) {
+    if (scrollLockCount === 0) {
+        savedBodyOverflow = doc.body.style.overflow;
+        doc.body.style.overflow = 'hidden';
+    }
+    scrollLockCount++;
+}
+function unlockBodyScroll(doc) {
+    scrollLockCount = Math.max(0, scrollLockCount - 1);
+    if (scrollLockCount === 0)
+        doc.body.style.overflow = savedBodyOverflow;
+}
 /**
  * Overlay dialog with two-way `open`:
  *   <strct-modal [(open)]="show" title="Confirm">
@@ -1233,16 +1346,32 @@ class StrctModal {
     titleId = `strct-modal-${++modalCounter}`;
     /** Element that had focus before the dialog opened, restored on close. */
     previousActive = null;
+    /** Whether this instance currently holds a scroll lock. */
+    locked = false;
     constructor() {
         effect(() => {
-            if (this.open()) {
+            const open = this.open();
+            if (open && !this.locked) {
+                this.locked = true;
+                lockBodyScroll(this.doc);
                 this.previousActive = this.doc.activeElement;
                 // Move focus into the dialog once it has rendered.
                 setTimeout(() => this.focusInitial());
             }
-            else if (this.previousActive) {
-                this.previousActive.focus?.();
-                this.previousActive = null;
+            else if (!open && this.locked) {
+                this.locked = false;
+                unlockBodyScroll(this.doc);
+                if (this.previousActive) {
+                    this.previousActive.focus?.();
+                    this.previousActive = null;
+                }
+            }
+        });
+        // Release the lock if the modal is destroyed while still open.
+        inject(DestroyRef).onDestroy(() => {
+            if (this.locked) {
+                this.locked = false;
+                unlockBodyScroll(this.doc);
             }
         });
     }
@@ -1543,28 +1672,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             }] } });
 
 /**
- * A nested fly-out inside a `strct-context-menu` or `strct-dropdown`. Reuse
- * `strct-dropdown-item` for the nested entries.
+ * A nested fly-out inside a `strct-context-menu` or `strct-dropdown`. Opens on
+ * hover, click/tap, or the keyboard (Enter / Space / →), and flips to the left
+ * near the right edge of the viewport. Reuse `strct-dropdown-item` for entries.
  *   <strct-submenu label="Power">
  *     <strct-dropdown-item>Power on</strct-dropdown-item>
  *     <strct-dropdown-item>Power off</strct-dropdown-item>
  *   </strct-submenu>
  */
 class StrctSubmenu {
+    host = inject(ElementRef);
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /** Optional leading icon; when omitted the icon column is still reserved so
      *  the label stays aligned with sibling items that do have icons. */
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Open to the left when the fly-out would overflow the right edge. */
+    flip = signal(false, ...(ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []));
+    setOpen(value) {
+        if (value) {
+            const rect = this.host.nativeElement.getBoundingClientRect();
+            this.flip.set(rect.right + 190 > window.innerWidth);
+        }
+        this.open.set(value);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSubmenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctSubmenu, isStandalone: true, selector: "strct-submenu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-submenu-host" }, ngImport: i0, template: `
-    <div class="strct-submenu" (mouseenter)="open.set(true)" (mouseleave)="open.set(false)">
+    <div class="strct-submenu" (mouseenter)="setOpen(true)" (mouseleave)="open.set(false)">
       <div
         class="strct-submenu__trigger"
         role="menuitem"
+        tabindex="0"
         aria-haspopup="menu"
         [attr.aria-expanded]="open()"
-        (click)="$event.stopPropagation()"
+        (click)="$event.stopPropagation(); setOpen(!open())"
+        (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.space)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.arrowright)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.arrowleft)="$event.stopPropagation(); open.set(false)"
+        (keydown.escape)="$event.stopPropagation(); open.set(false)"
       >
         @if (icon()) {
           <strct-icon class="strct-submenu__icon" [name]="icon()" [size]="14" [strokeWidth]="1.3" />
@@ -1575,21 +1721,29 @@ class StrctSubmenu {
         <strct-icon class="strct-submenu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
       </div>
       @if (open()) {
-        <div class="strct-submenu__panel" role="menu"><ng-content /></div>
+        <div class="strct-submenu__panel" [class.strct-submenu__panel--flip]="flip()" role="menu">
+          <ng-content />
+        </div>
       }
     </div>
-  `, isInline: true, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__trigger:focus-visible{outline:none;background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}.strct-submenu__panel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSubmenu, decorators: [{
             type: Component,
             args: [{ selector: 'strct-submenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
-    <div class="strct-submenu" (mouseenter)="open.set(true)" (mouseleave)="open.set(false)">
+    <div class="strct-submenu" (mouseenter)="setOpen(true)" (mouseleave)="open.set(false)">
       <div
         class="strct-submenu__trigger"
         role="menuitem"
+        tabindex="0"
         aria-haspopup="menu"
         [attr.aria-expanded]="open()"
-        (click)="$event.stopPropagation()"
+        (click)="$event.stopPropagation(); setOpen(!open())"
+        (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.space)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.arrowright)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.arrowleft)="$event.stopPropagation(); open.set(false)"
+        (keydown.escape)="$event.stopPropagation(); open.set(false)"
       >
         @if (icon()) {
           <strct-icon class="strct-submenu__icon" [name]="icon()" [size]="14" [strokeWidth]="1.3" />
@@ -1600,15 +1754,349 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         <strct-icon class="strct-submenu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
       </div>
       @if (open()) {
-        <div class="strct-submenu__panel" role="menu"><ng-content /></div>
+        <div class="strct-submenu__panel" [class.strct-submenu__panel--flip]="flip()" role="menu">
+          <ng-content />
+        </div>
       }
     </div>
-  `, host: { class: 'strct-submenu-host' }, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"] }]
+  `, host: { class: 'strct-submenu-host' }, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__trigger:focus-visible{outline:none;background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}.strct-submenu__panel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
+/**
+ * Floating menu panel — portaled into `<body>` (so it escapes overflow /
+ * transform clipping), positioned by its real measured size, with full keyboard
+ * navigation and recursive submenus. Usually created by `[strctContextMenu]`,
+ * but can be embedded directly with `submenu`.
+ */
+class StrctMenuPanel {
+    host = inject(ElementRef);
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    x = input(0, ...(ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []));
+    y = input(0, ...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
+    submenu = input(false, { ...(ngDevMode ? { debugName: "submenu" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    select = output();
+    close = output();
+    /** ArrowLeft inside a submenu — asks the parent to close it. */
+    back = output();
+    posX = signal(0, ...(ngDevMode ? [{ debugName: "posX" }] : /* istanbul ignore next */ []));
+    posY = signal(0, ...(ngDevMode ? [{ debugName: "posY" }] : /* istanbul ignore next */ []));
+    flipLeft = signal(false, ...(ngDevMode ? [{ debugName: "flipLeft" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    openSubIndex = signal(null, ...(ngDevMode ? [{ debugName: "openSubIndex" }] : /* istanbul ignore next */ []));
+    navIndices = computed(() => this.items()
+        .map((it, i) => (it.divider ? -1 : i))
+        .filter((i) => i >= 0), ...(ngDevMode ? [{ debugName: "navIndices" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.posX.set(this.x());
+        this.posY.set(this.y());
+        afterNextRender(() => {
+            this.activeIndex.set(this.navIndices()[0] ?? 0);
+            if (!this.submenu())
+                this.clampToViewport();
+            this.focusItem(this.activeIndex());
+        });
+    }
+    clampToViewport() {
+        const host = this.host.nativeElement;
+        const w = host.offsetWidth;
+        const h = host.offsetHeight;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const m = 6;
+        let nx = this.x();
+        let ny = this.y();
+        if (nx + w > vw - m)
+            nx = Math.max(m, Math.min(this.x() - w, vw - w - m));
+        if (ny + h > vh - m)
+            ny = Math.max(m, vh - h - m);
+        this.posX.set(nx);
+        this.posY.set(ny);
+        // Submenus of a panel near the right edge open to the left.
+        this.flipLeft.set(nx + w > vw - 220);
+    }
+    focusItem(i) {
+        this.activeIndex.set(i);
+        this.host.nativeElement
+            .querySelector(`.strct-menu__item[data-idx="${i}"]`)
+            ?.focus();
+    }
+    move(dir) {
+        const nav = this.navIndices();
+        if (!nav.length)
+            return;
+        const pos = nav.indexOf(this.activeIndex());
+        const next = nav[(pos + dir + nav.length) % nav.length];
+        this.openSubIndex.set(null);
+        this.focusItem(next);
+    }
+    onHover(i) {
+        this.activeIndex.set(i);
+        const it = this.items()[i];
+        this.openSubIndex.set(it?.children?.length ? i : null);
+    }
+    onLeave(i) {
+        if (this.openSubIndex() === i)
+            this.openSubIndex.set(null);
+    }
+    onItemClick(item, i, event) {
+        event.stopPropagation();
+        if (item.disabled)
+            return;
+        if (item.children?.length) {
+            this.openSubIndex.set(this.openSubIndex() === i ? null : i);
+            this.focusItem(i);
+        }
+        else {
+            this.select.emit(item);
+        }
+    }
+    closeSub() {
+        this.openSubIndex.set(null);
+    }
+    onKeydown(event) {
+        const key = event.key;
+        const item = this.items()[this.activeIndex()];
+        switch (key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                event.stopPropagation();
+                this.move(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                event.stopPropagation();
+                this.move(-1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusItem(this.navIndices()[0] ?? 0);
+                break;
+            case 'End':
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusItem(this.navIndices().at(-1) ?? 0);
+                break;
+            case 'ArrowRight':
+                if (item?.children?.length) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.openSubIndex.set(this.activeIndex());
+                }
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.openSubIndex() != null)
+                    this.closeSub();
+                else if (this.submenu())
+                    this.back.emit();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                event.stopPropagation();
+                if (item && !item.disabled) {
+                    if (item.children?.length)
+                        this.openSubIndex.set(this.activeIndex());
+                    else
+                        this.select.emit(item);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                this.close.emit();
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctMenuPanel, isStandalone: true, selector: "strct-menu-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: false, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: false, transformFunction: null }, submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select", close: "close", back: "back" }, host: { properties: { "style.position": "submenu() ? null : 'fixed'", "style.left.px": "submenu() ? null : posX()", "style.top.px": "submenu() ? null : posY()", "style.zIndex": "submenu() ? null : 1100" }, classAttribute: "strct-menu-host" }, ngImport: i0, template: `
+    <div class="strct-menu" role="menu" tabindex="-1" (keydown)="onKeydown($event)">
+      @for (item of items(); track $index; let i = $index) {
+        @if (item.divider) {
+          <div class="strct-menu__sep" role="separator"></div>
+        } @else {
+          <div class="strct-menu__wrap" (mouseenter)="onHover(i)" (mouseleave)="onLeave(i)">
+            <button
+              type="button"
+              class="strct-menu__item"
+              [attr.data-idx]="i"
+              [class.strct-menu__item--danger]="item.danger"
+              [class.strct-menu__item--active]="i === activeIndex()"
+              [disabled]="item.disabled"
+              role="menuitem"
+              [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
+              [attr.aria-expanded]="item.children?.length ? openSubIndex() === i : null"
+              [attr.tabindex]="i === activeIndex() ? 0 : -1"
+              (click)="onItemClick(item, i, $event)"
+            >
+              @if (item.icon) {
+                <strct-icon class="strct-menu__icon" [name]="item.icon" [size]="14" [strokeWidth]="1.3" />
+              } @else {
+                <span class="strct-menu__icon-spacer" aria-hidden="true"></span>
+              }
+              <span class="strct-menu__label">{{ item.label }}</span>
+              @if (item.children?.length) {
+                <strct-icon class="strct-menu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
+              }
+            </button>
+            @if (openSubIndex() === i && item.children?.length) {
+              <strct-menu-panel
+                submenu
+                class="strct-menu__subpanel"
+                [class.strct-menu__subpanel--flip]="flipLeft()"
+                [items]="item.children!"
+                [data]="data()"
+                (select)="select.emit($event)"
+                (close)="close.emit()"
+                (back)="closeSub(); focusItem(i)"
+              />
+            }
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:left}.strct-menu__item:hover:not(:disabled),.strct-menu__item--active:not(:disabled){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--danger{color:var(--crt)}.strct-menu__item--danger:hover:not(:disabled),.strct-menu__item--danger.strct-menu__item--active:not(:disabled){background:var(--crt-bg)}.strct-menu__item:disabled{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--danger .strct-menu__icon{color:var(--crt)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;left:100%;margin-left:2px;z-index:1}.strct-menu__subpanel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"], dependencies: [{ kind: "component", type: StrctMenuPanel, selector: "strct-menu-panel", inputs: ["items", "data", "x", "y", "submenu"], outputs: ["select", "close", "back"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctMenuPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-menu-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    <div class="strct-menu" role="menu" tabindex="-1" (keydown)="onKeydown($event)">
+      @for (item of items(); track $index; let i = $index) {
+        @if (item.divider) {
+          <div class="strct-menu__sep" role="separator"></div>
+        } @else {
+          <div class="strct-menu__wrap" (mouseenter)="onHover(i)" (mouseleave)="onLeave(i)">
+            <button
+              type="button"
+              class="strct-menu__item"
+              [attr.data-idx]="i"
+              [class.strct-menu__item--danger]="item.danger"
+              [class.strct-menu__item--active]="i === activeIndex()"
+              [disabled]="item.disabled"
+              role="menuitem"
+              [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
+              [attr.aria-expanded]="item.children?.length ? openSubIndex() === i : null"
+              [attr.tabindex]="i === activeIndex() ? 0 : -1"
+              (click)="onItemClick(item, i, $event)"
+            >
+              @if (item.icon) {
+                <strct-icon class="strct-menu__icon" [name]="item.icon" [size]="14" [strokeWidth]="1.3" />
+              } @else {
+                <span class="strct-menu__icon-spacer" aria-hidden="true"></span>
+              }
+              <span class="strct-menu__label">{{ item.label }}</span>
+              @if (item.children?.length) {
+                <strct-icon class="strct-menu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
+              }
+            </button>
+            @if (openSubIndex() === i && item.children?.length) {
+              <strct-menu-panel
+                submenu
+                class="strct-menu__subpanel"
+                [class.strct-menu__subpanel--flip]="flipLeft()"
+                [items]="item.children!"
+                [data]="data()"
+                (select)="select.emit($event)"
+                (close)="close.emit()"
+                (back)="closeSub(); focusItem(i)"
+              />
+            }
+          </div>
+        }
+      }
+    </div>
+  `, host: {
+                        class: 'strct-menu-host',
+                        '[style.position]': "submenu() ? null : 'fixed'",
+                        '[style.left.px]': 'submenu() ? null : posX()',
+                        '[style.top.px]': 'submenu() ? null : posY()',
+                        '[style.zIndex]': 'submenu() ? null : 1100',
+                    }, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:left}.strct-menu__item:hover:not(:disabled),.strct-menu__item--active:not(:disabled){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--danger{color:var(--crt)}.strct-menu__item--danger:hover:not(:disabled),.strct-menu__item--danger.strct-menu__item--active:not(:disabled){background:var(--crt-bg)}.strct-menu__item:disabled{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--danger .strct-menu__icon{color:var(--crt)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;left:100%;margin-left:2px;z-index:1}.strct-menu__subpanel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: false }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: false }] }], submenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenu", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], close: [{ type: i0.Output, args: ["close"] }], back: [{ type: i0.Output, args: ["back"] }] } });
+/**
+ * Right-click (context) menu driven by a data array. Attach to any trigger; the
+ * menu portals into `<body>` and runs each item's `action` on selection.
+ *   <div [strctContextMenu]="menuFor(host)" [strctContextMenuData]="host"
+ *        (menuSelect)="onPick($event)">…</div>
+ */
+class StrctContextMenuTrigger {
+    appRef = inject(ApplicationRef);
+    envInjector = inject(EnvironmentInjector);
+    zone = inject(NgZone);
+    doc = inject(DOCUMENT$1);
+    items = input.required({ ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), alias: 'strctContextMenu' });
+    data = input(undefined, { ...(ngDevMode ? { debugName: "data" } : /* istanbul ignore next */ {}), alias: 'strctContextMenuData' });
+    menuSelect = output();
+    ref = null;
+    onClose = () => this.zone.run(() => this.closeMenu());
+    onContextMenu(event) {
+        if (!this.items()?.length)
+            return;
+        event.preventDefault();
+        this.openAt(event.clientX, event.clientY);
+    }
+    openAt(x, y) {
+        this.closeMenu();
+        const ref = createComponent(StrctMenuPanel, { environmentInjector: this.envInjector });
+        ref.setInput('items', this.items());
+        ref.setInput('data', this.data());
+        ref.setInput('x', x);
+        ref.setInput('y', y);
+        ref.instance.select.subscribe((item) => {
+            item.action?.(this.data());
+            this.menuSelect.emit(item);
+            this.closeMenu();
+        });
+        ref.instance.close.subscribe(() => this.closeMenu());
+        this.appRef.attachView(ref.hostView);
+        this.doc.body.appendChild(ref.location.nativeElement);
+        this.ref = ref;
+        // Defer global listeners so the opening right-click doesn't immediately close.
+        setTimeout(() => {
+            this.zone.runOutsideAngular(() => {
+                this.doc.addEventListener('mousedown', this.onOutside, true);
+                window.addEventListener('scroll', this.onClose, true);
+                window.addEventListener('resize', this.onClose);
+            });
+        });
+    }
+    onOutside = (event) => {
+        if (this.ref && !this.ref.location.nativeElement.contains(event.target)) {
+            this.onClose();
+        }
+    };
+    closeMenu() {
+        if (!this.ref)
+            return;
+        this.doc.removeEventListener('mousedown', this.onOutside, true);
+        window.removeEventListener('scroll', this.onClose, true);
+        window.removeEventListener('resize', this.onClose);
+        this.appRef.detachView(this.ref.hostView);
+        this.ref.destroy();
+        this.ref = null;
+    }
+    ngOnDestroy() {
+        this.closeMenu();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctContextMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: StrctContextMenuTrigger, isStandalone: true, selector: "[strctContextMenu]", inputs: { items: { classPropertyName: "items", publicName: "strctContextMenu", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "strctContextMenuData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuSelect: "menuSelect" }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctContextMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctContextMenu]' }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctContextMenu", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctContextMenuData", required: false }] }], menuSelect: [{ type: i0.Output, args: ["menuSelect"] }], onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }] } });
+
 /** A single wizard step. `label` names it in the step header. */
 class StrctStep {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** When false, the wizard's Next / Finish is disabled on this step. */
+    canAdvance = input(true, { ...(ngDevMode ? { debugName: "canAdvance" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     _active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
     active = this._active.asReadonly();
     /** @internal */
@@ -1616,7 +2104,7 @@ class StrctStep {
         this._active.set(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctStep, isStandalone: true, selector: "strct-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "hidden": "!active()" }, classAttribute: "strct-step" }, ngImport: i0, template: `@if (active()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctStep, isStandalone: true, selector: "strct-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, canAdvance: { classPropertyName: "canAdvance", publicName: "canAdvance", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "hidden": "!active()" }, classAttribute: "strct-step" }, ngImport: i0, template: `@if (active()) {
     <ng-content />
   }`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1630,13 +2118,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   }`,
                     host: { class: 'strct-step', '[hidden]': '!active()' },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], canAdvance: [{ type: i0.Input, args: [{ isSignal: true, alias: "canAdvance", required: false }] }] } });
 /** Multi-step flow with a numbered header and Back / Next / Finish controls. */
 class StrctWizard {
     steps = contentChildren(StrctStep, ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
     current = signal(0, ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** Label for the final-step button (default "Finish"). */
+    finishLabel = input('Finish', ...(ngDevMode ? [{ debugName: "finishLabel" }] : /* istanbul ignore next */ []));
+    /** Disable Finish and show a busy label while an async submit is in flight. */
+    submitting = input(false, { ...(ngDevMode ? { debugName: "submitting" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show a Cancel button on the left. */
+    cancelable = input(false, { ...(ngDevMode ? { debugName: "cancelable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     finished = output();
+    cancelled = output();
+    /** Emits the new step index after a Back / Next move. */
+    stepChange = output();
     isLast = computed(() => this.current() >= this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+    /** Whether the current step permits advancing (its `canAdvance`). */
+    canAdvance = computed(() => this.steps()[this.current()]?.canAdvance() ?? true, ...(ngDevMode ? [{ debugName: "canAdvance" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const idx = this.current();
@@ -1644,18 +2143,23 @@ class StrctWizard {
         });
     }
     next() {
-        if (!this.isLast())
+        if (!this.isLast() && this.canAdvance()) {
             this.current.update((i) => i + 1);
+            this.stepChange.emit(this.current());
+        }
     }
     back() {
-        if (this.current() > 0)
+        if (this.current() > 0) {
             this.current.update((i) => i - 1);
+            this.stepChange.emit(this.current());
+        }
     }
     finish() {
-        this.finished.emit();
+        if (this.canAdvance() && !this.submitting())
+            this.finished.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctWizard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctWizard, isStandalone: true, selector: "strct-wizard", outputs: { finished: "finished" }, host: { classAttribute: "strct-wiz" }, queries: [{ propertyName: "steps", predicate: StrctStep, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctWizard, isStandalone: true, selector: "strct-wizard", inputs: { finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null }, submitting: { classPropertyName: "submitting", publicName: "submitting", isSignal: true, isRequired: false, transformFunction: null }, cancelable: { classPropertyName: "cancelable", publicName: "cancelable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { finished: "finished", cancelled: "cancelled", stepChange: "stepChange" }, host: { classAttribute: "strct-wiz" }, queries: [{ propertyName: "steps", predicate: StrctStep, isSignal: true }], ngImport: i0, template: `
     <div class="strct-wiz__steps">
       @for (step of steps(); track step; let i = $index; let last = $last) {
         <div
@@ -1675,14 +2179,26 @@ class StrctWizard {
     <div class="strct-wiz__content"><ng-content /></div>
 
     <div class="strct-wiz__foot">
+      @if (cancelable()) {
+        <button strct-button variant="flat" class="strct-wiz__cancel" (click)="cancelled.emit()">
+          Cancel
+        </button>
+      }
       <button strct-button variant="flat" [disabled]="current() === 0" (click)="back()">Back</button>
       @if (isLast()) {
-        <button strct-button variant="primary" (click)="finish()">Finish</button>
+        <button
+          strct-button
+          variant="primary"
+          [disabled]="submitting() || !canAdvance()"
+          (click)="finish()"
+        >
+          {{ submitting() ? 'Submitting…' : finishLabel() }}
+        </button>
       } @else {
-        <button strct-button variant="primary" (click)="next()">Next</button>
+        <button strct-button variant="primary" [disabled]="!canAdvance()" (click)="next()">Next</button>
       }
     </div>
-  `, isInline: true, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}\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 });
+  `, isInline: true, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-right:auto}\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: StrctWizard, decorators: [{
             type: Component,
@@ -1706,15 +2222,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
     <div class="strct-wiz__content"><ng-content /></div>
 
     <div class="strct-wiz__foot">
+      @if (cancelable()) {
+        <button strct-button variant="flat" class="strct-wiz__cancel" (click)="cancelled.emit()">
+          Cancel
+        </button>
+      }
       <button strct-button variant="flat" [disabled]="current() === 0" (click)="back()">Back</button>
       @if (isLast()) {
-        <button strct-button variant="primary" (click)="finish()">Finish</button>
+        <button
+          strct-button
+          variant="primary"
+          [disabled]="submitting() || !canAdvance()"
+          (click)="finish()"
+        >
+          {{ submitting() ? 'Submitting…' : finishLabel() }}
+        </button>
       } @else {
-        <button strct-button variant="primary" (click)="next()">Next</button>
+        <button strct-button variant="primary" [disabled]="!canAdvance()" (click)="next()">Next</button>
       }
     </div>
-  `, host: { class: 'strct-wiz' }, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctStep), { isSignal: true }] }], finished: [{ type: i0.Output, args: ["finished"] }] } });
+  `, host: { class: 'strct-wiz' }, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-right:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctStep), { isSignal: true }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], submitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitting", required: false }] }], cancelable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelable", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
 
 /**
  * Separator rule. Horizontal by default; pass `vertical` for an inline rule.
@@ -1873,6 +2401,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: { class: 'strct-pg', role: 'navigation', 'aria-label': 'Pagination' }, styles: [".strct-pg{display:inline-flex;align-items:center;gap:4px}.strct-pg__btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 7px;border-radius:6px;font-family:var(--font);font-size:13px;cursor:pointer;color:var(--t1);background:transparent;border:1px solid transparent;transition:background .14s ease,border-color .14s ease,color .14s ease}.strct-pg__btn:hover{background:var(--bg-3)}.strct-pg__btn--active{color:var(--acc);border-color:var(--acc30);background:var(--acc-m)}.strct-pg__btn:disabled{color:var(--t4);cursor:not-allowed;background:transparent}.strct-pg__nav{color:var(--t2)}.strct-pg__dots{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:30px;color:var(--t3)}\n"] }]
         }], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }] } });
 
+let fieldCounter = 0;
+/**
+ * Form-field wrapper: a label (with optional required marker), the projected
+ * control, and a hint or error message. It auto-links the control via
+ * `aria-describedby` and sets `aria-invalid` when an error is present.
+ *
+ *   <strct-field label="Email" required hint="We never share it." [error]="emailError()">
+ *     <input strctInput type="email" [(ngModel)]="email" />
+ *   </strct-field>
+ */
+class StrctField {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Error message (string or first-of array); falsy clears the error state. */
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    n = ++fieldCounter;
+    hintId = `strct-field-hint-${this.n}`;
+    errorId = `strct-field-err-${this.n}`;
+    controlId = signal('', ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    errorText = computed(() => {
+        const e = this.error();
+        return (Array.isArray(e) ? e[0] : e) ?? '';
+    }, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.link());
+        // Keep aria in sync as the error / hint change.
+        effect(() => {
+            this.errorText();
+            this.hint();
+            this.applyAria();
+        });
+    }
+    control() {
+        return this.host.nativeElement.querySelector('input, select, textarea, [strctInput], [strctField]');
+    }
+    link() {
+        const el = this.control();
+        if (!el)
+            return;
+        if (!el.id)
+            el.id = `strct-field-ctrl-${this.n}`;
+        this.controlId.set(el.id);
+        this.applyAria();
+    }
+    applyAria() {
+        const el = this.control();
+        if (!el)
+            return;
+        const describedBy = this.errorText() ? this.errorId : this.hint() ? this.hintId : '';
+        if (describedBy)
+            el.setAttribute('aria-describedby', describedBy);
+        else
+            el.removeAttribute('aria-describedby');
+        if (this.errorText())
+            el.setAttribute('aria-invalid', 'true');
+        else
+            el.removeAttribute('aria-invalid');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctField, isStandalone: true, selector: "strct-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-field--invalid": "!!errorText()" }, classAttribute: "strct-field" }, ngImport: i0, template: `
+    @if (label()) {
+      <label class="strct-field__label" [attr.for]="controlId() || null">
+        {{ label() }}@if (required()) {<span class="strct-field__req" aria-hidden="true">*</span>}
+      </label>
+    }
+    <div class="strct-field__control"><ng-content /></div>
+    @if (errorText()) {
+      <div class="strct-field__msg strct-field__msg--error" [id]="errorId" role="alert">
+        {{ errorText() }}
+      </div>
+    } @else if (hint()) {
+      <div class="strct-field__msg strct-field__msg--hint" [id]="hintId">{{ hint() }}</div>
+    }
+  `, isInline: true, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--crt);margin-left:2px}.strct-field__control{display:flex;flex-direction:column}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint{color:var(--t3)}.strct-field__msg--error{color:var(--crt)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctField, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    @if (label()) {
+      <label class="strct-field__label" [attr.for]="controlId() || null">
+        {{ label() }}@if (required()) {<span class="strct-field__req" aria-hidden="true">*</span>}
+      </label>
+    }
+    <div class="strct-field__control"><ng-content /></div>
+    @if (errorText()) {
+      <div class="strct-field__msg strct-field__msg--error" [id]="errorId" role="alert">
+        {{ errorText() }}
+      </div>
+    } @else if (hint()) {
+      <div class="strct-field__msg strct-field__msg--hint" [id]="hintId">{{ hint() }}</div>
+    }
+  `, host: {
+                        class: 'strct-field',
+                        '[class.strct-field--invalid]': '!!errorText()',
+                    }, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--crt);margin-left:2px}.strct-field__control{display:flex;flex-direction:column}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint{color:var(--t3)}.strct-field__msg--error{color:var(--crt)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
+
 /**
  * Applies the shared `.strct-control` look to a native input / textarea / select.
  *   <input strctInput placeholder="Name" />
@@ -4014,7 +4641,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             }] } });
 
 /**
- * Declarative data table.
+ * Per-column cell template for `strct-table` / `strct-datagrid`. The column key
+ * is the directive value; the row, value and column are the template context:
+ *
+ *   <ng-template strctCell="status" let-row let-value="value">
+ *     <strct-badge [status]="row['ok'] ? 'success' : 'danger'">{{ value }}</strct-badge>
+ *   </ng-template>
+ */
+class StrctCellDef {
+    key = input.required({ ...(ngDevMode ? { debugName: "key" } : /* istanbul ignore next */ {}), alias: 'strctCell' });
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCellDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: StrctCellDef, isStandalone: true, selector: "[strctCell]", inputs: { key: { classPropertyName: "key", publicName: "strctCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCellDef, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctCell]' }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctCell", required: true }] }] } });
+/**
+ * Declarative data table. Cells render `row[col.key]` as text by default; supply
+ * a `*strctCell` template per column for custom content.
  *   <strct-table [columns]="cols" [rows]="data" hover />
  */
 class StrctTable {
@@ -4023,8 +4669,18 @@ class StrctTable {
     striped = input(false, { ...(ngDevMode ? { debugName: "striped" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     hover = input(false, { ...(ngDevMode ? { debugName: "hover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     emptyText = input('No data', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    cellDefs = contentChildren(StrctCellDef, ...(ngDevMode ? [{ debugName: "cellDefs" }] : /* istanbul ignore next */ []));
+    cellMap = computed(() => {
+        const m = new Map();
+        for (const d of this.cellDefs())
+            m.set(d.key(), d.template);
+        return m;
+    }, ...(ngDevMode ? [{ debugName: "cellMap" }] : /* istanbul ignore next */ []));
+    cellTemplate(key) {
+        return this.cellMap().get(key) ?? null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTable, isStandalone: true, selector: "strct-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-table-host--striped": "striped()", "class.strct-table-host--hover": "hover()" }, classAttribute: "strct-table-host" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTable, isStandalone: true, selector: "strct-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-table-host--striped": "striped()", "class.strct-table-host--hover": "hover()" }, classAttribute: "strct-table-host" }, queries: [{ propertyName: "cellDefs", predicate: StrctCellDef, isSignal: true }], ngImport: i0, template: `
     <table class="strct-table">
       <thead>
         <tr>
@@ -4037,7 +4693,16 @@ class StrctTable {
         @for (row of rows(); track $index) {
           <tr>
             @for (col of columns(); track col.key) {
-              <td [style.text-align]="col.align ?? 'start'">{{ row[col.key] }}</td>
+              <td [style.text-align]="col.align ?? 'start'">
+                @if (cellTemplate(col.key); as tpl) {
+                  <ng-container
+                    [ngTemplateOutlet]="tpl"
+                    [ngTemplateOutletContext]="{ $implicit: row, value: row[col.key], column: col }"
+                  />
+                } @else {
+                  {{ row[col.key] }}
+                }
+              </td>
             }
           </tr>
         } @empty {
@@ -4047,11 +4712,11 @@ class StrctTable {
         }
       </tbody>
     </table>
-  `, isInline: true, styles: [".strct-table-host{display:block;overflow-x:auto}.strct-table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--b2);border-radius:8px;overflow:hidden}.strct-table th,.strct-table td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--b1)}.strct-table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2)}.strct-table td{color:var(--t1)}.strct-table tbody tr:last-child td{border-bottom:0}.strct-table-host--striped tbody tr:nth-child(2n) td{background:var(--bg-2)}.strct-table-host--hover tbody tr:hover td{background:var(--acc-s)}.strct-table__empty{text-align:center;color:var(--t3);padding:22px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".strct-table-host{display:block;overflow-x:auto}.strct-table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--b2);border-radius:8px;overflow:hidden}.strct-table th,.strct-table td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--b1)}.strct-table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2)}.strct-table td{color:var(--t1)}.strct-table tbody tr:last-child td{border-bottom:0}.strct-table-host--striped tbody tr:nth-child(2n) td{background:var(--bg-2)}.strct-table-host--hover tbody tr:hover td{background:var(--acc-s)}.strct-table__empty{text-align:center;color:var(--t3);padding:22px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTable, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-table', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'strct-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: `
     <table class="strct-table">
       <thead>
         <tr>
@@ -4064,7 +4729,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         @for (row of rows(); track $index) {
           <tr>
             @for (col of columns(); track col.key) {
-              <td [style.text-align]="col.align ?? 'start'">{{ row[col.key] }}</td>
+              <td [style.text-align]="col.align ?? 'start'">
+                @if (cellTemplate(col.key); as tpl) {
+                  <ng-container
+                    [ngTemplateOutlet]="tpl"
+                    [ngTemplateOutletContext]="{ $implicit: row, value: row[col.key], column: col }"
+                  />
+                } @else {
+                  {{ row[col.key] }}
+                }
+              </td>
             }
           </tr>
         } @empty {
@@ -4079,7 +4753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[class.strct-table-host--striped]': 'striped()',
                         '[class.strct-table-host--hover]': 'hover()',
                     }, styles: [".strct-table-host{display:block;overflow-x:auto}.strct-table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--b2);border-radius:8px;overflow:hidden}.strct-table th,.strct-table td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--b1)}.strct-table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2)}.strct-table td{color:var(--t1)}.strct-table tbody tr:last-child td{border-bottom:0}.strct-table-host--striped tbody tr:nth-child(2n) td{background:var(--bg-2)}.strct-table-host--hover tbody tr:hover td{background:var(--acc-s)}.strct-table__empty{text-align:center;color:var(--t3);padding:22px}\n"] }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }] } });
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctCellDef), { isSignal: true }] }] } });
 
 /**
  * Marks the expandable-row detail template. The row is the template's implicit
@@ -4123,14 +4797,34 @@ class StrctDatagrid {
     detailPane = input(false, { ...(ngDevMode ? { debugName: "detailPane" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     emptyText = input('No data', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    /**
+     * Stable row identity (property key or function). Set this for live-refreshing
+     * data so selection, expansion and the active detail row survive re-fetches
+     * that replace the row objects. Defaults to object identity.
+     */
+    rowId = input(null, ...(ngDevMode ? [{ debugName: "rowId" }] : /* istanbul ignore next */ []));
     selectionChange = output();
     detailDef = contentChild(StrctRowDetailDef, ...(ngDevMode ? [{ debugName: "detailDef" }] : /* istanbul ignore next */ []));
     actionBarDef = contentChild(StrctDatagridActionBar, ...(ngDevMode ? [{ debugName: "actionBarDef" }] : /* istanbul ignore next */ []));
+    cellDefs = contentChildren(StrctCellDef, ...(ngDevMode ? [{ debugName: "cellDefs" }] : /* istanbul ignore next */ []));
+    cellMap = computed(() => {
+        const m = new Map();
+        for (const d of this.cellDefs())
+            m.set(d.key(), d.template);
+        return m;
+    }, ...(ngDevMode ? [{ debugName: "cellMap" }] : /* istanbul ignore next */ []));
     page = signal(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
     sort = signal({ key: null, dir: 'asc' }, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    /** Selection / expansion are tracked by row id (see {@link rowId}). */
     selected = signal(new Set(), ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     expandedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedRows" }] : /* istanbul ignore next */ []));
-    activeRow = signal(null, ...(ngDevMode ? [{ debugName: "activeRow" }] : /* istanbul ignore next */ []));
+    activeId = signal(null, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    activeRow = computed(() => {
+        const id = this.activeId();
+        if (id == null)
+            return null;
+        return this.rows().find((r) => this.idOf(r) === id) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "activeRow" }] : /* istanbul ignore next */ []));
     canExpand = computed(() => this.expandable() && !this.detailPane() && !!this.detailDef(), ...(ngDevMode ? [{ debugName: "canExpand" }] : /* istanbul ignore next */ []));
     canDetail = computed(() => this.detailPane() && !!this.detailDef(), ...(ngDevMode ? [{ debugName: "canDetail" }] : /* istanbul ignore next */ []));
     paneOpen = computed(() => this.detailPane() && !!this.detailDef() && !!this.activeRow(), ...(ngDevMode ? [{ debugName: "paneOpen" }] : /* istanbul ignore next */ []));
@@ -4154,9 +4848,22 @@ class StrctDatagrid {
     selectedCount = computed(() => this.selected().size, ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
     allPageSelected = computed(() => {
         const rows = this.paged();
-        return rows.length > 0 && rows.every((r) => this.selected().has(r));
+        return rows.length > 0 && rows.every((r) => this.selected().has(this.idOf(r)));
     }, ...(ngDevMode ? [{ debugName: "allPageSelected" }] : /* istanbul ignore next */ []));
-    somePageSelected = computed(() => !this.allPageSelected() && this.paged().some((r) => this.selected().has(r)), ...(ngDevMode ? [{ debugName: "somePageSelected" }] : /* istanbul ignore next */ []));
+    somePageSelected = computed(() => !this.allPageSelected() && this.paged().some((r) => this.selected().has(this.idOf(r))), ...(ngDevMode ? [{ debugName: "somePageSelected" }] : /* istanbul ignore next */ []));
+    /** Resolve a row's stable identity (defaults to the row object itself). */
+    idOf(row) {
+        const id = this.rowId();
+        if (id == null)
+            return row;
+        return typeof id === 'function' ? id(row) : row[id];
+    }
+    rowKey(row) {
+        return this.idOf(row);
+    }
+    cellTemplate(key) {
+        return this.cellMap().get(key) ?? null;
+    }
     constructor() {
         // Keep the page in range when the data set shrinks.
         effect(() => {
@@ -4177,10 +4884,11 @@ class StrctDatagrid {
     /** Toggle the detail pane for a row (triggered by its »  button, not the row,
      *  so row cells remain selectable for copy). */
     openDetail(row) {
-        this.activeRow.set(this.activeRow() === row ? null : row);
+        const id = this.idOf(row);
+        this.activeId.set(this.activeId() === id ? null : id);
     }
     closePane() {
-        this.activeRow.set(null);
+        this.activeId.set(null);
     }
     sortBy(key) {
         const current = this.sort();
@@ -4211,38 +4919,42 @@ class StrctDatagrid {
         this.sortBy(key);
     }
     isSelected(row) {
-        return this.selected().has(row);
+        return this.selected().has(this.idOf(row));
     }
     isExpanded(row) {
-        return this.expandedRows().has(row);
+        return this.expandedRows().has(this.idOf(row));
     }
     toggleExpand(row) {
+        const id = this.idOf(row);
         const next = new Set(this.expandedRows());
-        next.has(row) ? next.delete(row) : next.add(row);
+        next.has(id) ? next.delete(id) : next.add(id);
         this.expandedRows.set(next);
     }
     toggleRow(row) {
+        const id = this.idOf(row);
         const next = new Set(this.selected());
-        next.has(row) ? next.delete(row) : next.add(row);
+        next.has(id) ? next.delete(id) : next.add(id);
         this.commitSelection(next);
     }
     toggleAll() {
         const next = new Set(this.selected());
         const rows = this.paged();
         if (this.allPageSelected()) {
-            rows.forEach((r) => next.delete(r));
+            rows.forEach((r) => next.delete(this.idOf(r)));
         }
         else {
-            rows.forEach((r) => next.add(r));
+            rows.forEach((r) => next.add(this.idOf(r)));
         }
         this.commitSelection(next);
     }
     clearSelection() {
         this.commitSelection(new Set());
     }
+    /** Emit the current row objects whose id is selected (resolved against the
+     *  latest data, so consumers always get fresh references). */
     commitSelection(next) {
         this.selected.set(next);
-        this.selectionChange.emit([...next]);
+        this.selectionChange.emit(this.rows().filter((r) => next.has(this.idOf(r))));
     }
     compare(a, b) {
         if (typeof a === 'number' && typeof b === 'number')
@@ -4250,7 +4962,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 }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class.strct-dg-host--compact": "compact()" }, 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 }], 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 }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class.strct-dg-host--compact": "compact()" }, 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>
     }
@@ -4306,7 +5018,7 @@ class StrctDatagrid {
         </tr>
       </thead>
       <tbody>
-        @for (row of paged(); track $index) {
+        @for (row of paged(); track rowKey(row)) {
           <tr
             [class.strct-dg__row--selected]="isSelected(row)"
             [class.strct-dg__row--active]="paneOpen() && row === activeRow()"
@@ -4350,7 +5062,16 @@ class StrctDatagrid {
               </td>
             }
             @for (col of visibleColumns(); track col.key) {
-              <td [style.text-align]="col.align ?? 'start'">{{ row[col.key] }}</td>
+              <td [style.text-align]="col.align ?? 'start'">
+                @if (cellTemplate(col.key); as tpl) {
+                  <ng-container
+                    [ngTemplateOutlet]="tpl"
+                    [ngTemplateOutletContext]="{ $implicit: row, value: row[col.key], column: col }"
+                  />
+                } @else {
+                  {{ row[col.key] }}
+                }
+              </td>
             }
           </tr>
           @if (canExpand() && isExpanded(row)) {
@@ -4462,7 +5183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         </tr>
       </thead>
       <tbody>
-        @for (row of paged(); track $index) {
+        @for (row of paged(); track rowKey(row)) {
           <tr
             [class.strct-dg__row--selected]="isSelected(row)"
             [class.strct-dg__row--active]="paneOpen() && row === activeRow()"
@@ -4506,7 +5227,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
               </td>
             }
             @for (col of visibleColumns(); track col.key) {
-              <td [style.text-align]="col.align ?? 'start'">{{ row[col.key] }}</td>
+              <td [style.text-align]="col.align ?? 'start'">
+                @if (cellTemplate(col.key); as tpl) {
+                  <ng-container
+                    [ngTemplateOutlet]="tpl"
+                    [ngTemplateOutletContext]="{ $implicit: row, value: row[col.key], column: col }"
+                  />
+                } @else {
+                  {{ row[col.key] }}
+                }
+              </td>
             }
           </tr>
           @if (canExpand() && isExpanded(row)) {
@@ -4562,7 +5292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'strct-dg-host',
                         '[class.strct-dg-host--compact]': 'compact()',
                     }, styles: [".strct-dg-host{display:block}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--b2);border-radius:8px;overflow:hidden}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--b1)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg th{font-size:11px;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 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__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;gap:14px;align-items:flex-start}.strct-dg__layout--paned .strct-dg{width:auto;min-width:180px;max-width:260px;flex-shrink: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-right: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-right: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-left:2px solid var(--acc);border-radius:8px;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)}}.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:8px 10px;margin-bottom:10px;background:var(--bg-2);border:1px solid var(--b2);border-radius:8px}.strct-dg__actionbar{display:flex;align-items:center;gap:14px;padding:8px 12px;margin-bottom:10px;background:var(--acc-m);border:1px solid var(--acc30);border-radius:7px;font-size:13px;animation:strct-dg-bar-in .12s ease}.strct-dg__actionbar-count{color:var(--acc);font-weight:600}.strct-dg__actionbar-clear{border:0;background:transparent;color:var(--t2);cursor:pointer;font-size:12px;padding:2px 4px}.strct-dg__actionbar-clear:hover{color:var(--t1)}.strct-dg__actionbar-actions{display:flex;gap:8px;margin-left:auto}@keyframes strct-dg-bar-in{0%{opacity:0;transform:translateY(-4px)}}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}.strct-dg__count{font-size:12px;color:var(--t2)}\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 }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], detailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctRowDetailDef), { isSignal: true }] }], actionBarDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDatagridActionBar), { isSignal: true }] }] } });
+        }], 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 }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], 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 }] }] } });
 
 /** Vertical timeline container. Wraps `<strct-timeline-item>` children. */
 class StrctTimeline {
@@ -5371,5 +6101,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_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRange, StrctRating, StrctRowDetailDef, StrctShell, 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 };
+export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctField, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRange, StrctRating, StrctRowDetailDef, StrctShell, 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 };
 //# sourceMappingURL=akcelik-strct.mjs.map