@akcelik/strct 4.3.0 → 4.4.1

package/fesm2022/akcelik-strct.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, booleanAttribute, afterNextRender, Directive, model, output, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, TemplateRef, contentChild, viewChild, InjectionToken, untracked, Injector, viewChildren, Renderer2, Pipe, PLATFORM_ID, afterRenderEffect } from '@angular/core';
+import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, booleanAttribute, afterNextRender, Directive, model, output, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID, forwardRef, DestroyRef, TemplateRef, contentChild, viewChild, InjectionToken, untracked, Injector, viewChildren, Renderer2, Pipe, afterRenderEffect } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
@@ -1756,7 +1756,7 @@ class StrctProgress {
     >
       <div class="strct-progress__fill" [style.width.%]="clamped()"></div>
     </div>
-  `, isInline: true, styles: [".strct-progress{display:block}.strct-progress__track{height:6px;border-radius:var(--radius-sm);background:var(--bg-3);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-progress{display:block}.strct-progress__track{height:6px;border-radius:var(--radius-sm);background:var(--strct-progress-track, color-mix(in srgb, var(--t1) 12%, transparent));box-shadow:inset 0 0 0 1px var(--b2);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctProgress, decorators: [{
             type: Component,
@@ -1776,7 +1776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-progress--success]': "resolvedStatus() === 'success'",
                         '[class.strct-progress--warning]': "resolvedStatus() === 'warning'",
                         '[class.strct-progress--critical]': "resolvedStatus() === 'critical'",
-                    }, styles: [".strct-progress{display:block}.strct-progress__track{height:6px;border-radius:var(--radius-sm);background:var(--bg-3);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}\n"] }]
+                    }, styles: [".strct-progress{display:block}.strct-progress__track{height:6px;border-radius:var(--radius-sm);background:var(--strct-progress-track, color-mix(in srgb, var(--t1) 12%, transparent));box-shadow:inset 0 0 0 1px var(--b2);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }] } });
 
 /** Indeterminate loading ring. `<strct-spinner size="sm" />`. */
@@ -2791,6 +2791,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 args: ['contextmenu', ['$event']]
             }] } });
 
+/**
+ * Screen-reader announcements for state changes that have no visible text —
+ * "12 rows loaded", "Snapshot created" (Material's LiveAnnouncer, strct-sized):
+ *
+ *   private announcer = inject(StrctAnnouncer);
+ *   this.announcer.announce('12 rows loaded');
+ *
+ * Maintains one visually-hidden live region per politeness level; repeated
+ * identical messages are re-announced (the region is cleared first).
+ */
+class StrctAnnouncer {
+    regions = new Map();
+    clearTimers = new Map();
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    announce(message, politeness = 'polite') {
+        if (!this.isBrowser)
+            return;
+        const region = this.regionFor(politeness);
+        // Clear first so identical consecutive messages still fire.
+        region.textContent = '';
+        setTimeout(() => (region.textContent = message));
+        clearTimeout(this.clearTimers.get(politeness));
+        // Stale announcements should not linger for the next SR user to stumble on.
+        this.clearTimers.set(politeness, setTimeout(() => (region.textContent = ''), 10_000));
+    }
+    regionFor(politeness) {
+        let region = this.regions.get(politeness);
+        if (!region) {
+            region = document.createElement('div');
+            region.setAttribute('aria-live', politeness);
+            region.setAttribute('aria-atomic', 'true');
+            region.className = 'strct-announcer';
+            region.style.cssText =
+                'position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;';
+            document.body.appendChild(region);
+            this.regions.set(politeness, region);
+        }
+        return region;
+    }
+    ngOnDestroy() {
+        for (const timer of this.clearTimers.values())
+            clearTimeout(timer);
+        this.clearTimers.clear();
+        for (const region of this.regions.values())
+            region.remove();
+        this.regions.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAnnouncer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAnnouncer, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAnnouncer, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /** Default chevron aria-label factory — mirrors the `chevronAriaLabel` input default. */
 const defaultChevronAriaLabel = (expanded, label) => `${expanded ? 'Collapse' : 'Expand'} ${label}`;
 let treeNodeCounter = 0;
@@ -2831,6 +2886,67 @@ class StrctTreeNode {
     nodeActivated = output();
     /** Data-mode right-click menu selection (bubbles to the tree). */
     nodeMenuSelect = output();
+    /** Whether this row can be picked up — the tree asks the consumer's `canDrag`.
+     *  Reads `nodes()` too, so a refresh that makes a node movable is honoured. */
+    isDraggable = computed(() => {
+        const n = this.node();
+        this.tree?.nodes();
+        return !!n && !!this.tree?.canDragNode(n);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDraggable" }] : /* istanbul ignore next */ []));
+    isDragSource = computed(() => {
+        const n = this.node();
+        return !!n && !!this.tree?.isDragSource(n);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragSource" }] : /* istanbul ignore next */ []));
+    isDropTarget = computed(() => {
+        const n = this.node();
+        return !!n && !!this.tree?.isDropTarget(n);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDropTarget" }] : /* istanbul ignore next */ []));
+    onDragStart(event) {
+        const n = this.node();
+        if (!n || !this.tree || !this.isDraggable())
+            return;
+        event.stopPropagation();
+        // Firefox starts no drag without data on the transfer.
+        event.dataTransfer?.setData('text/plain', n.label);
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'move';
+        this.tree.beginDrag(n);
+    }
+    onDragEnd() {
+        this.tree?.endDrag();
+    }
+    onDragOver(event) {
+        const n = this.node();
+        if (!n || !this.tree)
+            return;
+        event.stopPropagation();
+        this.tree.dragOver(n, event.clientY);
+        if (!this.tree.acceptsDrop(n)) {
+            // No preventDefault: the pointer keeps the browser's "not allowed" cursor.
+            if (event.dataTransfer)
+                event.dataTransfer.dropEffect = 'none';
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'move';
+    }
+    onDragLeave() {
+        const n = this.node();
+        if (n)
+            this.tree?.dragLeave(n);
+    }
+    onDrop(event) {
+        const n = this.node();
+        if (!n || !this.tree)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.tree.dropOn(n);
+    }
     /** Right-click menu items for this node ([] when no resolver / not data mode). */
     menuItems = computed(() => {
         const fn = this.nodeMenu();
@@ -2992,9 +3108,17 @@ class StrctTreeNode {
       [attr.aria-selected]="displayActive()"
       [attr.aria-expanded]="hasChildren() ? isOpen() : null"
       [attr.aria-owns]="hasChildren() && isOpen() ? groupId : null"
+      [attr.draggable]="isDraggable() ? 'true' : null"
+      [class.strct-tnode__row--dragging]="isDragSource()"
+      [class.strct-tnode__row--droptarget]="isDropTarget()"
       [strctContextMenu]="menuItems()"
       [strctContextMenuData]="node()"
       (menuSelect)="onMenuSelect($event)"
+      (dragstart)="onDragStart($event)"
+      (dragend)="onDragEnd()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave()"
+      (drop)="onDrop($event)"
       (click)="onActivate()"
       (focus)="onRowFocus()"
       (keydown)="onRowKeydown($event)"
@@ -3045,7 +3169,7 @@ class StrctTreeNode {
         }
       </div>
     }
-  `, isInline: true, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:6px;padding:4px 9px;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:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.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;align-items:center;justify-content:center;color:var(--t3);transition:transform .15s ease;width:24px;height:24px;margin:-5px;margin-inline-end:-10px;flex-shrink:0}.strct-tnode__chevron--open{transform:rotate(90deg)}[dir=rtl] .strct-tnode__chevron:not(.strct-tnode__chevron--open){transform:rotate(180deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}@media(prefers-reduced-motion:reduce){.strct-tnode__chevron{transition:none}}.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-inline-start:16px}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded", "nodeMenu"], outputs: ["expandedChange", "activated", "nodeActivated", "nodeMenuSelect"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctContextMenuTrigger, selector: "[strctContextMenu]", inputs: ["strctContextMenu", "strctContextMenuData"], outputs: ["menuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:6px;padding:4px 9px;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--dragging{opacity:.45}.strct-tnode__row--droptarget,.strct-tnode__row--droptarget:hover{background:var(--acc-s);outline:1px solid var(--acc);outline-offset:-1px}.strct-tnode__row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.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;align-items:center;justify-content:center;color:var(--t3);transition:transform .15s ease;width:24px;height:24px;margin:-5px;margin-inline-end:-10px;flex-shrink:0}.strct-tnode__chevron--open{transform:rotate(90deg)}[dir=rtl] .strct-tnode__chevron:not(.strct-tnode__chevron--open){transform:rotate(180deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}@media(prefers-reduced-motion:reduce){.strct-tnode__chevron{transition:none}}.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-inline-start:16px}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded", "nodeMenu"], outputs: ["expandedChange", "activated", "nodeActivated", "nodeMenuSelect"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctContextMenuTrigger, selector: "[strctContextMenu]", inputs: ["strctContextMenu", "strctContextMenuData"], outputs: ["menuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTreeNode, decorators: [{
             type: Component,
@@ -3061,9 +3185,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       [attr.aria-selected]="displayActive()"
       [attr.aria-expanded]="hasChildren() ? isOpen() : null"
       [attr.aria-owns]="hasChildren() && isOpen() ? groupId : null"
+      [attr.draggable]="isDraggable() ? 'true' : null"
+      [class.strct-tnode__row--dragging]="isDragSource()"
+      [class.strct-tnode__row--droptarget]="isDropTarget()"
       [strctContextMenu]="menuItems()"
       [strctContextMenuData]="node()"
       (menuSelect)="onMenuSelect($event)"
+      (dragstart)="onDragStart($event)"
+      (dragend)="onDragEnd()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave()"
+      (drop)="onDrop($event)"
       (click)="onActivate()"
       (focus)="onRowFocus()"
       (keydown)="onRowKeydown($event)"
@@ -3120,7 +3252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         // siblings in the DOM, so the host must not appear in the a11y tree.
                         role: 'none',
                         '[attr.data-node-id]': 'node()?.id ?? null',
-                    }, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:6px;padding:4px 9px;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:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.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;align-items:center;justify-content:center;color:var(--t3);transition:transform .15s ease;width:24px;height:24px;margin:-5px;margin-inline-end:-10px;flex-shrink:0}.strct-tnode__chevron--open{transform:rotate(90deg)}[dir=rtl] .strct-tnode__chevron:not(.strct-tnode__chevron--open){transform:rotate(180deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}@media(prefers-reduced-motion:reduce){.strct-tnode__chevron{transition:none}}.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-inline-start:16px}\n"] }]
+                    }, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:6px;padding:4px 9px;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--dragging{opacity:.45}.strct-tnode__row--droptarget,.strct-tnode__row--droptarget:hover{background:var(--acc-s);outline:1px solid var(--acc);outline-offset:-1px}.strct-tnode__row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.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;align-items:center;justify-content:center;color:var(--t3);transition:transform .15s ease;width:24px;height:24px;margin:-5px;margin-inline-end:-10px;flex-shrink:0}.strct-tnode__chevron--open{transform:rotate(90deg)}[dir=rtl] .strct-tnode__chevron:not(.strct-tnode__chevron--open){transform:rotate(180deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}@media(prefers-reduced-motion:reduce){.strct-tnode__chevron{transition:none}}.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-inline-start:16px}\n"] }]
         }], ctorParameters: () => [], 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"] }], nodeMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeMenu", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }], nodeMenuSelect: [{ type: i0.Output, args: ["nodeMenuSelect"] }], childNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { isSignal: true }] }], directChildNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { ...{ descendants: false }, isSignal: true }] }] } });
 /**
  * Root container for a tree. Either project `<strct-tree-node>` children, or
@@ -3141,6 +3273,29 @@ class StrctTree {
     /** Per-node right-click menu resolver. */
     nodeMenu = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nodeMenu" }] : /* istanbul ignore next */ []));
+    /**
+     * Which nodes can be picked up. Default: none, so a tree without this input
+     * behaves exactly as before. Asked again whenever `nodes` changes, because
+     * a refresh can make a node movable.
+     */
+    canDrag = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canDrag" }] : /* istanbul ignore next */ []));
+    /**
+     * Where the dragged node may land, asked during `dragover`. A browser does
+     * not let `dragover` read the drag's data, so the tree keeps the source node
+     * and hands it to you here. Without this input nothing accepts a drop — the
+     * gesture belongs to the tree, the rule belongs to you.
+     *
+     * Two rules are built in whatever this returns: a node is never dropped on
+     * itself, and never into its own subtree (that would be a cycle).
+     */
+    canDrop = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canDrop" }] : /* istanbul ignore next */ []));
+    /** How long a collapsed node must be hovered mid-drag before it expands (ms). */
+    dragExpandDelay = input(700, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragExpandDelay" }] : /* istanbul ignore next */ []));
+    /** Emitted for an accepted drop only. */
+    nodeDrop = output();
     /** Accessible label of each node's chevron toggle; receives the expanded state and the node label. */
     chevronAriaLabel = input(defaultChevronAriaLabel, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "chevronAriaLabel" }] : /* istanbul ignore next */ []));
@@ -3324,6 +3479,144 @@ class StrctTree {
             }
         }
     }
+    // ── Drag and drop ──────────────────────────────────────────────
+    announcer = inject(StrctAnnouncer);
+    hostEl = inject(ElementRef);
+    dragSourceNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragSourceNode" }] : /* istanbul ignore next */ []));
+    dropTargetNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropTargetNode" }] : /* istanbul ignore next */ []));
+    /** Pending hover-expand for a collapsed target. */
+    expandTimer = null;
+    expandTimerKey = null;
+    /** Edge auto-scroll while a drag is in flight. */
+    scrollFrame = null;
+    scrollStep = 0;
+    canDragNode(node) {
+        return this.canDrag()?.(node) ?? false;
+    }
+    isDragSource(node) {
+        const src = this.dragSourceNode();
+        return !!src && this.keyOf(src) === this.keyOf(node);
+    }
+    isDropTarget(node) {
+        const t = this.dropTargetNode();
+        return !!t && this.keyOf(t) === this.keyOf(node);
+    }
+    /** Whether the current drag may land on `target`: the built-in guards first,
+     *  then the consumer's rule. */
+    acceptsDrop(target) {
+        const source = this.dragSourceNode();
+        if (!source)
+            return false;
+        if (this.keyOf(source) === this.keyOf(target))
+            return false;
+        if (this.containsNode(source, target))
+            return false;
+        return this.canDrop()?.(source, target) ?? false;
+    }
+    /** Whether `node` is somewhere inside `root`'s subtree. */
+    containsNode(root, node) {
+        const key = this.keyOf(node);
+        const walk = (list) => (list ?? []).some((n) => this.keyOf(n) === key || walk(n.children));
+        return walk(root.children);
+    }
+    beginDrag(node) {
+        this.dragSourceNode.set(node);
+        this.announcer.announce(`Dragging ${node.label}`);
+    }
+    /** Called from every `dragover` on a row: highlight, hover-expand, scroll. */
+    dragOver(target, clientY) {
+        if (!this.dragSourceNode())
+            return;
+        const accepts = this.acceptsDrop(target);
+        this.dropTargetNode.set(accepts ? target : null);
+        this.scheduleHoverExpand(target);
+        this.edgeScroll(clientY);
+    }
+    dragLeave(target) {
+        if (this.isDropTarget(target))
+            this.dropTargetNode.set(null);
+        if (this.expandTimerKey === this.keyOf(target))
+            this.clearExpandTimer();
+        this.stopEdgeScroll();
+    }
+    dropOn(target) {
+        const source = this.dragSourceNode();
+        const accepted = !!source && this.acceptsDrop(target);
+        if (source && accepted) {
+            this.nodeDrop.emit({ source, target, position: 'into' });
+            this.announcer.announce(`Dropped ${source.label} on ${target.label}`);
+        }
+        this.endDrag();
+    }
+    /** Always runs, including when the drop lands outside the tree (dragend). */
+    endDrag() {
+        this.dragSourceNode.set(null);
+        this.dropTargetNode.set(null);
+        this.clearExpandTimer();
+        this.stopEdgeScroll();
+    }
+    /** A collapsed node hovered long enough opens, so a target that is not yet
+     *  visible can be reached at all — the normal case in a big inventory. */
+    scheduleHoverExpand(target) {
+        const key = this.keyOf(target);
+        if (this.expandTimerKey === key)
+            return;
+        this.clearExpandTimer();
+        if (!target.children?.length || this.currentSet().has(key))
+            return;
+        this.expandTimerKey = key;
+        this.expandTimer = setTimeout(() => {
+            this.expandTimer = null;
+            this.expandTimerKey = null;
+            if (this.dragSourceNode() && !this.currentSet().has(key))
+                this.toggleNode(target);
+        }, this.dragExpandDelay());
+    }
+    clearExpandTimer() {
+        if (this.expandTimer != null)
+            clearTimeout(this.expandTimer);
+        this.expandTimer = null;
+        this.expandTimerKey = null;
+    }
+    /** Nearest scrolling ancestor, so a long tree can be traversed mid-drag. */
+    scrollParent() {
+        let el = this.hostEl.nativeElement;
+        while (el) {
+            const canScroll = el.scrollHeight > el.clientHeight + 1;
+            if (canScroll && /auto|scroll|overlay/.test(getComputedStyle(el).overflowY))
+                return el;
+            el = el.parentElement;
+        }
+        return null;
+    }
+    edgeScroll(clientY) {
+        const box = this.scrollParent();
+        if (!box)
+            return;
+        const r = box.getBoundingClientRect();
+        const zone = 36;
+        const step = clientY < r.top + zone ? -12 : clientY > r.bottom - zone ? 12 : 0;
+        this.scrollStep = step;
+        if (!step)
+            return this.stopEdgeScroll();
+        if (this.scrollFrame != null)
+            return;
+        const tick = () => {
+            if (!this.scrollStep || !this.dragSourceNode())
+                return this.stopEdgeScroll();
+            box.scrollTop += this.scrollStep;
+            this.scrollFrame = requestAnimationFrame(tick);
+        };
+        this.scrollFrame = requestAnimationFrame(tick);
+    }
+    stopEdgeScroll() {
+        if (this.scrollFrame != null)
+            cancelAnimationFrame(this.scrollFrame);
+        this.scrollFrame = null;
+        this.scrollStep = 0;
+    }
     /** Toggle a node's expansion, updating state and emitting outputs. */
     toggleNode(node) {
         const key = this.keyOf(node);
@@ -3345,7 +3638,7 @@ class StrctTree {
         this.expandedChange.emit([...this.currentSet()]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctTree, isStandalone: true, selector: "strct-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, nodeMenu: { classPropertyName: "nodeMenu", publicName: "nodeMenu", isSignal: true, isRequired: false, transformFunction: null }, chevronAriaLabel: { classPropertyName: "chevronAriaLabel", publicName: "chevronAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeActivated: "nodeActivated", nodeMenuSelect: "nodeMenuSelect", expandedIds: "expandedIdsChange", expandedChange: "expandedChange", nodeToggled: "nodeToggled" }, host: { attributes: { "role": "tree" }, properties: { "class.strct-tree--comfortable": "density() === 'comfortable'" }, classAttribute: "strct-tree" }, queries: [{ propertyName: "projectedNodes", predicate: StrctTreeNode, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctTree, isStandalone: true, selector: "strct-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, nodeMenu: { classPropertyName: "nodeMenu", publicName: "nodeMenu", isSignal: true, isRequired: false, transformFunction: null }, canDrag: { classPropertyName: "canDrag", publicName: "canDrag", isSignal: true, isRequired: false, transformFunction: null }, canDrop: { classPropertyName: "canDrop", publicName: "canDrop", isSignal: true, isRequired: false, transformFunction: null }, dragExpandDelay: { classPropertyName: "dragExpandDelay", publicName: "dragExpandDelay", isSignal: true, isRequired: false, transformFunction: null }, chevronAriaLabel: { classPropertyName: "chevronAriaLabel", publicName: "chevronAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeDrop: "nodeDrop", nodeActivated: "nodeActivated", nodeMenuSelect: "nodeMenuSelect", expandedIds: "expandedIdsChange", expandedChange: "expandedChange", nodeToggled: "nodeToggled" }, host: { attributes: { "role": "tree" }, properties: { "class.strct-tree--comfortable": "density() === 'comfortable'" }, classAttribute: "strct-tree" }, queries: [{ propertyName: "projectedNodes", predicate: StrctTreeNode, isSignal: true }], ngImport: i0, template: `
     @if (nodes(); as ns) {
       @for (n of ns; track n.id ?? n.label) {
         <strct-tree-node
@@ -3380,7 +3673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         role: 'tree',
                         '[class.strct-tree--comfortable]': "density() === 'comfortable'",
                     }, styles: [".strct-tree{display:block}.strct-tree--comfortable .strct-tnode__row{gap:7px;padding:6px 10px;border-radius:6px;font-size:14px}.strct-tree--comfortable .strct-tnode__chevron{margin:-4px;margin-inline-end:-9px}.strct-tree--comfortable .strct-tnode__spacer{width:16px}.strct-tree--comfortable .strct-tnode__children{margin-inline-start:19px}\n"] }]
-        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], nodeMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeMenu", required: false }] }], chevronAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronAriaLabel", required: false }] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }], nodeMenuSelect: [{ type: i0.Output, args: ["nodeMenuSelect"] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], nodeToggled: [{ type: i0.Output, args: ["nodeToggled"] }], projectedNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { ...{ descendants: false }, isSignal: true }] }] } });
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], nodeMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeMenu", required: false }] }], canDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDrag", required: false }] }], canDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDrop", required: false }] }], dragExpandDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragExpandDelay", required: false }] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }], chevronAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronAriaLabel", required: false }] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }], nodeMenuSelect: [{ type: i0.Output, args: ["nodeMenuSelect"] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], nodeToggled: [{ type: i0.Output, args: ["nodeToggled"] }], projectedNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { ...{ descendants: false }, isSignal: true }] }] } });
 
 /**
  * Dev-mode diagnostics for combinations a component accepts but cannot honour.
@@ -19254,61 +19547,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 args: ['document:keydown.escape', ['$event']]
             }] } });
 
-/**
- * Screen-reader announcements for state changes that have no visible text —
- * "12 rows loaded", "Snapshot created" (Material's LiveAnnouncer, strct-sized):
- *
- *   private announcer = inject(StrctAnnouncer);
- *   this.announcer.announce('12 rows loaded');
- *
- * Maintains one visually-hidden live region per politeness level; repeated
- * identical messages are re-announced (the region is cleared first).
- */
-class StrctAnnouncer {
-    regions = new Map();
-    clearTimers = new Map();
-    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    announce(message, politeness = 'polite') {
-        if (!this.isBrowser)
-            return;
-        const region = this.regionFor(politeness);
-        // Clear first so identical consecutive messages still fire.
-        region.textContent = '';
-        setTimeout(() => (region.textContent = message));
-        clearTimeout(this.clearTimers.get(politeness));
-        // Stale announcements should not linger for the next SR user to stumble on.
-        this.clearTimers.set(politeness, setTimeout(() => (region.textContent = ''), 10_000));
-    }
-    regionFor(politeness) {
-        let region = this.regions.get(politeness);
-        if (!region) {
-            region = document.createElement('div');
-            region.setAttribute('aria-live', politeness);
-            region.setAttribute('aria-atomic', 'true');
-            region.className = 'strct-announcer';
-            region.style.cssText =
-                'position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;';
-            document.body.appendChild(region);
-            this.regions.set(politeness, region);
-        }
-        return region;
-    }
-    ngOnDestroy() {
-        for (const timer of this.clearTimers.values())
-            clearTimeout(timer);
-        this.clearTimers.clear();
-        for (const region of this.regions.values())
-            region.remove();
-        this.regions.clear();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAnnouncer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAnnouncer, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAnnouncer, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 function normalize(combo) {
     return combo
         .toLowerCase()
@@ -20678,7 +20916,7 @@ class StrctTreeSelect {
         }
       </div>
     }
-  `, isInline: true, styles: [".strct-tsel{position:relative;display:block;width:100%}.strct-tsel__field{position:relative}.strct-tsel__trigger{display:flex;align-items:center;gap:8px;padding-inline-end:30px;text-align:start;cursor:pointer}.strct-tsel__trigger--clearable{padding-inline-end:48px}.strct-tsel__trigger:disabled{cursor:not-allowed}.strct-tsel__value{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tsel__value--empty{color:var(--t3)}.strct-tsel__caret{position:absolute;inset-inline-end:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-tsel__clear{position:absolute;inset-inline-end:26px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding:2px;color:var(--t3);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer}.strct-tsel__clear:hover{color:var(--t1)}.strct-tsel__panel{z-index:var(--z-dropdown);max-height:260px;overflow-y:auto;padding:var(--space-1);background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--shh)}.strct-tsel__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }, { kind: "component", type: StrctTree, selector: "strct-tree", inputs: ["nodes", "density", "nodeMenu", "chevronAriaLabel", "expandedIds"], outputs: ["nodeActivated", "nodeMenuSelect", "expandedIdsChange", "expandedChange", "nodeToggled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-tsel{position:relative;display:block;width:100%}.strct-tsel__field{position:relative}.strct-tsel__trigger{display:flex;align-items:center;gap:8px;padding-inline-end:30px;text-align:start;cursor:pointer}.strct-tsel__trigger--clearable{padding-inline-end:48px}.strct-tsel__trigger:disabled{cursor:not-allowed}.strct-tsel__value{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tsel__value--empty{color:var(--t3)}.strct-tsel__caret{position:absolute;inset-inline-end:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-tsel__clear{position:absolute;inset-inline-end:26px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding:2px;color:var(--t3);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer}.strct-tsel__clear:hover{color:var(--t1)}.strct-tsel__panel{z-index:var(--z-dropdown);max-height:260px;overflow-y:auto;padding:var(--space-1);background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--shh)}.strct-tsel__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }, { kind: "component", type: StrctTree, selector: "strct-tree", inputs: ["nodes", "density", "nodeMenu", "canDrag", "canDrop", "dragExpandDelay", "chevronAriaLabel", "expandedIds"], outputs: ["nodeDrop", "nodeActivated", "nodeMenuSelect", "expandedIdsChange", "expandedChange", "nodeToggled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTreeSelect, decorators: [{
             type: Component,
@@ -21806,27 +22044,47 @@ class StrctHeatmap {
         const maxV = this.maxVal();
         const t = this.thresholds();
         if (t) {
-            const { color, from, to } = this.bandFor(value, t, maxV);
+            const { color, from, to, floor, ceilingPct } = this.bandFor(value, t, maxV);
             const span = to - from;
             const pos = span > 0 ? Math.min(Math.max((value - from) / span, 0), 1) : 1;
-            const pct = 45 + Math.round(pos * 55);
+            const pct = floor + Math.round(pos * (ceilingPct - floor));
             return `color-mix(in srgb, ${color} ${pct}%, var(--bg-1))`;
         }
         const ratio = maxV > 0 ? Math.min(value / maxV, 1) : 0;
         const pct = 8 + Math.round(ratio * 92);
         return `color-mix(in srgb, ${this.color()} ${pct}%, var(--bg-1))`;
     }
-    /** The band a value falls in: its hue and the range intensity scales over. */
+    /**
+     * The band a value falls in: its hue, the value range intensity scales over,
+     * and the intensity range itself.
+     *
+     * FR-44-02: the bands' intensity ranges ASCEND and do not overlap, so
+     * intensity never falls as the value rises. Restarting every band at one
+     * floor (4.3.0) made a cell just past a threshold paler than the cell just
+     * below it — an 86% warning cell read quieter than an 84% accent one, which
+     * is backwards for the hours that matter most. The accent band still starts
+     * near-empty; warning and critical start where accent ends, so neither can
+     * be mistaken for no-data either.
+     */
     bandFor(value, t, maxV) {
         const ceiling = Math.max(maxV, value);
         if (t.critical != null && value >= t.critical) {
-            return { color: COLOR.critical, from: t.critical, to: ceiling };
+            return { color: COLOR.critical, from: t.critical, to: ceiling, floor: 92, ceilingPct: 100 };
         }
         if (t.warning != null && value >= t.warning) {
-            return { color: COLOR.warning, from: t.warning, to: t.critical ?? ceiling };
+            const to = t.critical ?? ceiling;
+            // With a critical bound above it the warning band stops short of it;
+            // without one it owns the top of the ramp.
+            return {
+                color: COLOR.warning,
+                from: t.warning,
+                to,
+                floor: 80,
+                ceilingPct: t.critical != null ? 92 : 100,
+            };
         }
         const upper = t.warning ?? t.critical ?? ceiling;
-        return { color: this.color(), from: 0, to: upper };
+        return { color: this.color(), from: 0, to: upper, floor: 8, ceilingPct: 80 };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHeatmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctHeatmap, isStandalone: true, selector: "strct-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, colLabelEvery: { classPropertyName: "colLabelEvery", publicName: "colLabelEvery", isSignal: true, isRequired: false, transformFunction: null }, colLabel: { classPropertyName: "colLabel", publicName: "colLabel", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, thresholds: { classPropertyName: "thresholds", publicName: "thresholds", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summaryFormat: { classPropertyName: "summaryFormat", publicName: "summaryFormat", isSignal: true, isRequired: false, transformFunction: null }, cellHeight: { classPropertyName: "cellHeight", publicName: "cellHeight", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, rowLabelWidth: { classPropertyName: "rowLabelWidth", publicName: "rowLabelWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-heatmap" }, ngImport: i0, template: `