@akcelik/strct 4.21.0 → 4.23.0

package/fesm2022/akcelik-strct.mjs

@@ -23261,6 +23261,795 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     }, styles: [".strct-mf{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-3);min-width:0}.strct-mf>img,.strct-mf>video,.strct-mf>canvas{width:100%;height:100%;object-fit:cover;display:block}.strct-mf[data-state=off]{background:#000}.strct-mf__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--space-2);color:var(--t3);text-align:center}.strct-mf[data-state=off] .strct-mf__placeholder{color:#fff9}.strct-mf[data-state=error] .strct-mf__placeholder{color:var(--critical)}.strct-mf__msg{font-size:var(--text-sm);line-height:1.35}.strct-mf__hit{position:absolute;inset:-1px;padding:0;border:0;background:none;cursor:pointer}.strct-mf__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-mf--interactive:hover{border-color:var(--b3)}\n"] }]
         }], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], activateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "activateLabel", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 
+const WINDOW_LABELS = {
+    minimize: 'Minimize',
+    maximize: 'Maximize',
+    restore: 'Restore',
+    close: 'Close',
+    dock: 'Minimized windows',
+};
+let windowCounter = 0;
+/**
+ * Knows which windows exist, which is on top, and which are minimised — so the
+ * dock can list them and a click can raise one.
+ */
+class StrctWindowService {
+    topZ = 0;
+    windows = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "windows" }] : /* istanbul ignore next */ []));
+    /** The minimised ones, in the order they were opened. */
+    minimized = computed(() => this.windows().filter((w) => w.minimized()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimized" }] : /* istanbul ignore next */ []));
+    register(w) {
+        this.windows.update((ws) => [...ws, w]);
+    }
+    unregister(w) {
+        this.windows.update((ws) => ws.filter((x) => x !== w));
+    }
+    /** Raise a window above the others; returns its new stacking offset. */
+    raise() {
+        return ++this.topZ;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Some work lives in a window beside the page: a VM console stays open while
+ * the operator browses. It can be moved, resized and minimised, and it comes
+ * back from the dock. A modal blocks the page and a drawer is pinned to an
+ * edge — neither is a window.
+ *
+ *   <strct-window [(open)]="open" [(minimized)]="min" heading="APP01" palette="dark">
+ *     <ng-container strctWindowTitleMeta><strct-badge status="success">Running</strct-badge></ng-container>
+ *     <ng-container strctWindowActions>…</ng-container>
+ *     …content…
+ *     <ng-container strctWindowStatus>…</ng-container>
+ *   </strct-window>
+ *   <strct-window-dock />
+ */
+class StrctWindow {
+    /** Whether the window exists on screen (two-way). */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Minimised to the dock (two-way). */
+    minimized = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimized" }] : /* istanbul ignore next */ []));
+    /** Filling the viewport — not browser fullscreen (two-way). */
+    maximized = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximized" }] : /* istanbul ignore next */ []));
+    /** Position and size in px (two-way); null lets the window place itself. */
+    bounds = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []));
+    /** The title-bar heading, and the window's accessible name. */
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** Corner resize grips. */
+    resizable = input(true, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    minWidth = input(480, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    minHeight = input(320, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    /** `dark` / `light` force that scheme inside the window (a console is dark). */
+    palette = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "palette" }] : /* istanbul ignore next */ []));
+    /** What a click outside does. A window is not dismissed like a modal. */
+    closeOnOutside = input('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnOutside" }] : /* istanbul ignore next */ []));
+    /** The window's own strings. */
+    labels = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    /** The accessible name of each resize grip. */
+    resizeLabel = input((corner) => `Resize (${corner})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeLabel" }] : /* istanbul ignore next */ []));
+    /** The window was closed. */
+    closed = output();
+    CORNERS = ['nw', 'ne', 'sw', 'se'];
+    titleId = `strct-window-${++windowCounter}`;
+    L = computed(() => ({
+        ...WINDOW_LABELS,
+        ...this.labels(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "L" }] : /* istanbul ignore next */ []));
+    service = inject(StrctWindowService);
+    doc = inject(DOCUMENT$1);
+    host = inject(ElementRef);
+    zOffset = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zOffset" }] : /* istanbul ignore next */ []));
+    zIndex = computed(() => `calc(var(--z-window) + ${this.zOffset()})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    /** The palette in force outside, so `palette` only swaps the scheme. */
+    hostPalette = computed(() => this.doc.documentElement.getAttribute('data-palette') ?? 'arctic', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostPalette" }] : /* istanbul ignore next */ []));
+    /** Where the window is. Defaults to a slightly offset, comfortable box. */
+    fallback = signal({ x: 80, y: 80, width: 720, height: 460 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+    rect = computed(() => this.bounds() ?? this.fallback(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rect" }] : /* istanbul ignore next */ []));
+    restoreTo = null;
+    constructor() {
+        this.service.register(this);
+        effect(() => {
+            if (this.open() && !this.minimized()) {
+                this.restoreTo ??= saveFocusedElement();
+                this.zOffset.set(this.service.raise());
+                queueMicrotask(() => this.focusTitle());
+            }
+        });
+    }
+    /** Raise this window above the others when it is clicked. */
+    focusWindow() {
+        this.zOffset.set(this.service.raise());
+    }
+    focusTitle() {
+        this.host.nativeElement.querySelector('.strct-window__title')?.focus();
+    }
+    minimize() {
+        if (!this.open())
+            return;
+        this.minimized.set(true);
+        restoreFocus(this.restoreTo);
+    }
+    /** Bring a minimised window back and raise it. */
+    restore() {
+        this.minimized.set(false);
+        this.open.set(true);
+    }
+    close() {
+        this.open.set(false);
+        this.minimized.set(false);
+        this.closed.emit();
+        restoreFocus(this.restoreTo);
+        this.restoreTo = null;
+    }
+    // ── Moving ───────────────────────────────────────────────────────────────
+    dragFrom = null;
+    onMove = (e) => this.dragMove(e);
+    onUp = () => this.dragEnd();
+    onDragStart(event) {
+        if (event.target.closest('button'))
+            return;
+        if (this.maximized())
+            return;
+        event.preventDefault();
+        this.dragFrom = { x: event.clientX, y: event.clientY, rect: this.rect() };
+        this.doc.addEventListener('pointermove', this.onMove);
+        this.doc.addEventListener('pointerup', this.onUp);
+        this.doc.addEventListener('pointercancel', this.onUp);
+    }
+    dragMove(event) {
+        const from = this.dragFrom;
+        if (!from)
+            return;
+        this.setRect({
+            ...from.rect,
+            x: from.rect.x + (event.clientX - from.x),
+            y: from.rect.y + (event.clientY - from.y),
+        });
+    }
+    dragEnd() {
+        this.dragFrom = null;
+        this.doc.removeEventListener('pointermove', this.onMove);
+        this.doc.removeEventListener('pointerup', this.onUp);
+        this.doc.removeEventListener('pointercancel', this.onUp);
+    }
+    /** Alt+arrows move the window; Escape minimises it. */
+    onTitleKeydown(event) {
+        if (!event.altKey)
+            return;
+        const step = event.shiftKey ? 64 : 16;
+        const r = this.rect();
+        const moves = {
+            ArrowLeft: { x: r.x - step },
+            ArrowRight: { x: r.x + step },
+            ArrowUp: { y: r.y - step },
+            ArrowDown: { y: r.y + step },
+        };
+        const move = moves[event.key];
+        if (!move)
+            return;
+        event.preventDefault();
+        this.setRect({ ...r, ...move });
+    }
+    // ── Resizing ─────────────────────────────────────────────────────────────
+    resizeFrom = null;
+    onResizeMove = (e) => this.resizeMove(e);
+    onResizeUp = () => this.resizeEnd();
+    onResizeStart(event, corner) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.resizeFrom = { x: event.clientX, y: event.clientY, rect: this.rect(), corner };
+        this.doc.addEventListener('pointermove', this.onResizeMove);
+        this.doc.addEventListener('pointerup', this.onResizeUp);
+        this.doc.addEventListener('pointercancel', this.onResizeUp);
+    }
+    resizeMove(event) {
+        const from = this.resizeFrom;
+        if (!from)
+            return;
+        this.setRect(this.resized(from.rect, from.corner, event.clientX - from.x, event.clientY - from.y));
+    }
+    resizeEnd() {
+        this.resizeFrom = null;
+        this.doc.removeEventListener('pointermove', this.onResizeMove);
+        this.doc.removeEventListener('pointerup', this.onResizeUp);
+        this.doc.removeEventListener('pointercancel', this.onResizeUp);
+    }
+    /** Arrows resize by 16px, Shift+arrows by 64px. */
+    onResizeKeydown(event, corner) {
+        const step = event.shiftKey ? 64 : 16;
+        const deltas = {
+            ArrowLeft: [-step, 0],
+            ArrowRight: [step, 0],
+            ArrowUp: [0, -step],
+            ArrowDown: [0, step],
+        };
+        const delta = deltas[event.key];
+        if (!delta)
+            return;
+        event.preventDefault();
+        this.setRect(this.resized(this.rect(), corner, delta[0], delta[1]));
+    }
+    /**
+     * A corner drag moves the two edges it touches: the west and north edges move
+     * the window's origin as well as its size, so the opposite corner stays put.
+     */
+    resized(rect, corner, dx, dy) {
+        const west = corner.includes('w');
+        const north = corner.includes('n');
+        const width = Math.max(this.minWidth(), rect.width + (west ? -dx : dx));
+        const height = Math.max(this.minHeight(), rect.height + (north ? -dy : dy));
+        return {
+            x: west ? rect.x + (rect.width - width) : rect.x,
+            y: north ? rect.y + (rect.height - height) : rect.y,
+            width,
+            height,
+        };
+    }
+    setRect(next) {
+        if (this.bounds())
+            this.bounds.set(next);
+        else
+            this.fallback.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctWindow, isStandalone: true, selector: "strct-window", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, minimized: { classPropertyName: "minimized", publicName: "minimized", isSignal: true, isRequired: false, transformFunction: null }, maximized: { classPropertyName: "maximized", publicName: "maximized", isSignal: true, isRequired: false, transformFunction: null }, bounds: { classPropertyName: "bounds", publicName: "bounds", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutside: { classPropertyName: "closeOnOutside", publicName: "closeOnOutside", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, resizeLabel: { classPropertyName: "resizeLabel", publicName: "resizeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", minimized: "minimizedChange", maximized: "maximizedChange", bounds: "boundsChange", closed: "closed" }, host: { classAttribute: "strct-window" }, ngImport: i0, template: `
+    @if (open() && !minimized()) {
+      <div
+        class="strct-window__frame"
+        role="dialog"
+        aria-modal="false"
+        [attr.aria-labelledby]="titleId"
+        [attr.data-palette]="palette() === 'inherit' ? null : hostPalette()"
+        [attr.data-theme]="palette() === 'inherit' ? null : palette()"
+        [style.z-index]="zIndex()"
+        [style.left.px]="maximized() ? null : rect().x"
+        [style.top.px]="maximized() ? null : rect().y"
+        [style.width.px]="maximized() ? null : rect().width"
+        [style.height.px]="maximized() ? null : rect().height"
+        [class.strct-window__frame--max]="maximized()"
+        (pointerdown)="focusWindow()"
+        (keydown.escape)="minimize()"
+      >
+        <!-- The title bar moves the window: by pointer, or with Alt+arrows. -->
+        <div
+          class="strct-window__title"
+          tabindex="0"
+          [attr.aria-label]="heading()"
+          (pointerdown)="onDragStart($event)"
+          (keydown)="onTitleKeydown($event)"
+          (dblclick)="maximized.set(!maximized())"
+        >
+          <span class="strct-window__heading" [id]="titleId">{{ heading() }}</span>
+          <span class="strct-window__meta"><ng-content select="[strctWindowTitleMeta]" /></span>
+          <span class="strct-window__actions"><ng-content select="[strctWindowActions]" /></span>
+          <span class="strct-window__controls">
+            <button
+              type="button"
+              class="strct-window__btn"
+              [attr.aria-label]="L().minimize"
+              (click)="minimize()"
+            >
+              <strct-icon strictName="minus" [size]="14" />
+            </button>
+            <button
+              type="button"
+              class="strct-window__btn"
+              [attr.aria-label]="maximized() ? L().restore : L().maximize"
+              (click)="maximized.set(!maximized())"
+            >
+              <strct-icon
+                [strictName]="maximized() ? 'exitFullscreen' : 'fullscreen'"
+                [size]="13"
+              />
+            </button>
+            <button
+              type="button"
+              class="strct-window__btn strct-window__btn--close"
+              [attr.aria-label]="L().close"
+              (click)="close()"
+            >
+              <strct-icon strictName="close" [size]="14" />
+            </button>
+          </span>
+        </div>
+
+        <div class="strct-window__body"><ng-content /></div>
+        <div class="strct-window__status"><ng-content select="[strctWindowStatus]" /></div>
+
+        @if (resizable() && !maximized()) {
+          <!-- Focusable, so a window can be resized without a pointer. -->
+          @for (corner of CORNERS; track corner) {
+            <button
+              type="button"
+              class="strct-window__rz strct-window__rz--{{ corner }}"
+              [attr.aria-label]="resizeLabel()(corner)"
+              (pointerdown)="onResizeStart($event, corner)"
+              (keydown)="onResizeKeydown($event, corner)"
+            ></button>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, styles: [".strct-window{display:contents}.strct-window__frame{position:fixed;display:flex;flex-direction:column;min-width:0;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-1);color:var(--t1);box-shadow:var(--shadow-overlay, 0 12px 40px rgba(0, 0, 0, .32));overflow:hidden}.strct-window__frame--max{inset:var(--space-3);width:auto;height:auto}.strct-window__title{display:flex;align-items:center;gap:var(--space-2);padding:6px 6px 6px var(--space-3);border-block-end:1px solid var(--b1);background:var(--bg-2);cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-window__title:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__heading{font-size:var(--text-sm);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-window__meta,.strct-window__actions{display:inline-flex;align-items:center;gap:6px}.strct-window__actions{margin-inline-start:auto}.strct-window__controls{display:inline-flex;align-items:center;gap:2px;flex:none}.strct-window__btn{display:inline-flex;padding:4px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t2);cursor:pointer}.strct-window__btn:hover{background:var(--bg-3);color:var(--t1)}.strct-window__btn--close:hover{background:var(--critical-bg);color:var(--critical)}.strct-window__body{flex:1;min-height:0;overflow:auto}.strct-window__status:empty{display:none}.strct-window__status{border-block-start:1px solid var(--b1);padding:4px var(--space-3);font-size:var(--text-sm);color:var(--t3);background:var(--bg-2)}.strct-window__rz{position:absolute;width:14px;height:14px;padding:0;border:0;background:transparent}.strct-window__rz:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__rz--nw{inset-block-start:0;inset-inline-start:0;cursor:nwse-resize}.strct-window__rz--ne{inset-block-start:0;inset-inline-end:0;cursor:nesw-resize}.strct-window__rz--sw{inset-block-end:0;inset-inline-start:0;cursor:nesw-resize}.strct-window__rz--se{inset-block-end:0;inset-inline-end:0;cursor:nwse-resize}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindow, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-window', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    @if (open() && !minimized()) {
+      <div
+        class="strct-window__frame"
+        role="dialog"
+        aria-modal="false"
+        [attr.aria-labelledby]="titleId"
+        [attr.data-palette]="palette() === 'inherit' ? null : hostPalette()"
+        [attr.data-theme]="palette() === 'inherit' ? null : palette()"
+        [style.z-index]="zIndex()"
+        [style.left.px]="maximized() ? null : rect().x"
+        [style.top.px]="maximized() ? null : rect().y"
+        [style.width.px]="maximized() ? null : rect().width"
+        [style.height.px]="maximized() ? null : rect().height"
+        [class.strct-window__frame--max]="maximized()"
+        (pointerdown)="focusWindow()"
+        (keydown.escape)="minimize()"
+      >
+        <!-- The title bar moves the window: by pointer, or with Alt+arrows. -->
+        <div
+          class="strct-window__title"
+          tabindex="0"
+          [attr.aria-label]="heading()"
+          (pointerdown)="onDragStart($event)"
+          (keydown)="onTitleKeydown($event)"
+          (dblclick)="maximized.set(!maximized())"
+        >
+          <span class="strct-window__heading" [id]="titleId">{{ heading() }}</span>
+          <span class="strct-window__meta"><ng-content select="[strctWindowTitleMeta]" /></span>
+          <span class="strct-window__actions"><ng-content select="[strctWindowActions]" /></span>
+          <span class="strct-window__controls">
+            <button
+              type="button"
+              class="strct-window__btn"
+              [attr.aria-label]="L().minimize"
+              (click)="minimize()"
+            >
+              <strct-icon strictName="minus" [size]="14" />
+            </button>
+            <button
+              type="button"
+              class="strct-window__btn"
+              [attr.aria-label]="maximized() ? L().restore : L().maximize"
+              (click)="maximized.set(!maximized())"
+            >
+              <strct-icon
+                [strictName]="maximized() ? 'exitFullscreen' : 'fullscreen'"
+                [size]="13"
+              />
+            </button>
+            <button
+              type="button"
+              class="strct-window__btn strct-window__btn--close"
+              [attr.aria-label]="L().close"
+              (click)="close()"
+            >
+              <strct-icon strictName="close" [size]="14" />
+            </button>
+          </span>
+        </div>
+
+        <div class="strct-window__body"><ng-content /></div>
+        <div class="strct-window__status"><ng-content select="[strctWindowStatus]" /></div>
+
+        @if (resizable() && !maximized()) {
+          <!-- Focusable, so a window can be resized without a pointer. -->
+          @for (corner of CORNERS; track corner) {
+            <button
+              type="button"
+              class="strct-window__rz strct-window__rz--{{ corner }}"
+              [attr.aria-label]="resizeLabel()(corner)"
+              (pointerdown)="onResizeStart($event, corner)"
+              (keydown)="onResizeKeydown($event, corner)"
+            ></button>
+          }
+        }
+      </div>
+    }
+  `, host: { class: 'strct-window' }, styles: [".strct-window{display:contents}.strct-window__frame{position:fixed;display:flex;flex-direction:column;min-width:0;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-1);color:var(--t1);box-shadow:var(--shadow-overlay, 0 12px 40px rgba(0, 0, 0, .32));overflow:hidden}.strct-window__frame--max{inset:var(--space-3);width:auto;height:auto}.strct-window__title{display:flex;align-items:center;gap:var(--space-2);padding:6px 6px 6px var(--space-3);border-block-end:1px solid var(--b1);background:var(--bg-2);cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-window__title:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__heading{font-size:var(--text-sm);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-window__meta,.strct-window__actions{display:inline-flex;align-items:center;gap:6px}.strct-window__actions{margin-inline-start:auto}.strct-window__controls{display:inline-flex;align-items:center;gap:2px;flex:none}.strct-window__btn{display:inline-flex;padding:4px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t2);cursor:pointer}.strct-window__btn:hover{background:var(--bg-3);color:var(--t1)}.strct-window__btn--close:hover{background:var(--critical-bg);color:var(--critical)}.strct-window__body{flex:1;min-height:0;overflow:auto}.strct-window__status:empty{display:none}.strct-window__status{border-block-start:1px solid var(--b1);padding:4px var(--space-3);font-size:var(--text-sm);color:var(--t3);background:var(--bg-2)}.strct-window__rz{position:absolute;width:14px;height:14px;padding:0;border:0;background:transparent}.strct-window__rz:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__rz--nw{inset-block-start:0;inset-inline-start:0;cursor:nwse-resize}.strct-window__rz--ne{inset-block-start:0;inset-inline-end:0;cursor:nesw-resize}.strct-window__rz--sw{inset-block-end:0;inset-inline-start:0;cursor:nesw-resize}.strct-window__rz--se{inset-block-end:0;inset-inline-end:0;cursor:nwse-resize}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }, { type: i0.Output, args: ["minimizedChange"] }], maximized: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximized", required: false }] }, { type: i0.Output, args: ["maximizedChange"] }], bounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "bounds", required: false }] }, { type: i0.Output, args: ["boundsChange"] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], closeOnOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutside", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], resizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+/**
+ * Where minimised windows wait. Put it in a toolbar or a status bar; each entry
+ * restores its window, and its × closes it.
+ */
+class StrctWindowDock {
+    service = inject(StrctWindowService);
+    /** The dock's accessible name. */
+    label = input('Minimized windows', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** The name of each chip's close button. */
+    closeLabel = input((heading) => `Close ${heading}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowDock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctWindowDock, isStandalone: true, selector: "strct-window-dock", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label()" }, classAttribute: "strct-windock" }, ngImport: i0, template: `
+    @for (w of service.minimized(); track w) {
+      <span class="strct-windock__chip">
+        <button type="button" class="strct-windock__open" (click)="w.restore()">
+          {{ w.heading() }}
+        </button>
+        <button
+          type="button"
+          class="strct-windock__close"
+          [attr.aria-label]="closeLabel()(w.heading())"
+          (click)="w.close()"
+        >
+          <strct-icon strictName="close" [size]="11" />
+        </button>
+      </span>
+    }
+  `, isInline: true, styles: [".strct-windock{display:inline-flex;align-items:center;gap:6px}.strct-windock__chip{display:inline-flex;align-items:center;gap:2px;padding-inline:8px 4px;border:1px solid var(--b2);border-radius:var(--radius-full, 999px);background:var(--bg-1);font-size:12px}.strct-windock__open,.strct-windock__close{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:3px 2px;border-radius:var(--radius-sm)}.strct-windock__open:hover{color:var(--acc)}.strct-windock__close{display:inline-flex;color:var(--t3)}.strct-windock__close:hover{color:var(--critical)}.strct-windock__open:focus-visible,.strct-windock__close:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowDock, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-window-dock', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    @for (w of service.minimized(); track w) {
+      <span class="strct-windock__chip">
+        <button type="button" class="strct-windock__open" (click)="w.restore()">
+          {{ w.heading() }}
+        </button>
+        <button
+          type="button"
+          class="strct-windock__close"
+          [attr.aria-label]="closeLabel()(w.heading())"
+          (click)="w.close()"
+        >
+          <strct-icon strictName="close" [size]="11" />
+        </button>
+      </span>
+    }
+  `, host: {
+                        class: 'strct-windock',
+                        role: 'group',
+                        '[attr.aria-label]': 'label()',
+                    }, styles: [".strct-windock{display:inline-flex;align-items:center;gap:6px}.strct-windock__chip{display:inline-flex;align-items:center;gap:2px;padding-inline:8px 4px;border:1px solid var(--b2);border-radius:var(--radius-full, 999px);background:var(--bg-1);font-size:12px}.strct-windock__open,.strct-windock__close{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:3px 2px;border-radius:var(--radius-sm)}.strct-windock__open:hover{color:var(--acc)}.strct-windock__close{display:inline-flex;color:var(--t3)}.strct-windock__close:hover{color:var(--critical)}.strct-windock__open:focus-visible,.strct-windock__close:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }] } });
+
+/** A card the message carries — an action to approve, a result to read. */
+class StrctChatAttachment {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatAttachment, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctChatAttachment, isStandalone: true, selector: "[strctChatAttachment]", host: { classAttribute: "strct-chat__attachment" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatAttachment, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctChatAttachment]', host: { class: 'strct-chat__attachment' } }]
+        }] });
+/**
+ * A conversation is a thread of messages from two or more authors, and an
+ * assistant panel is built from the library like every other panel.
+ *
+ *   <strct-chat-thread [busy]="thinking()" label="Assistant conversation">
+ *     …<strct-chat-message author="user">…</strct-chat-message>…
+ *   </strct-chat-thread>
+ *
+ * The thread is a `role="log"` with `aria-live="polite"`: a streaming reply is
+ * announced once, when it finishes, rather than token by token.
+ */
+class StrctChatThread {
+    /** The assistant is composing: shows the typing indicator after the last message. */
+    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The thread's accessible name. */
+    label = input('Conversation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** What the typing indicator says to assistive tech. */
+    typingLabel = input('Assistant is typing', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typingLabel" }] : /* istanbul ignore next */ []));
+    /** Keep the latest message in view — unless the reader scrolled up. */
+    autoScroll = input(true, { ...(ngDevMode ? { debugName: "autoScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    host = inject(ElementRef);
+    /** False once the reader scrolls away from the end; true again at the end. */
+    atEnd = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atEnd" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.scrollToEnd());
+        effect(() => {
+            this.busy();
+            if (this.autoScroll() && this.atEnd())
+                queueMicrotask(() => this.scrollToEnd());
+        });
+    }
+    onScroll() {
+        const el = this.host.nativeElement;
+        this.atEnd.set(el.scrollHeight - el.scrollTop - el.clientHeight < 24);
+    }
+    /** Jump to the newest message. */
+    scrollToEnd() {
+        const el = this.host.nativeElement;
+        el.scrollTop = el.scrollHeight;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatThread, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctChatThread, isStandalone: true, selector: "strct-chat-thread", inputs: { busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, typingLabel: { classPropertyName: "typingLabel", publicName: "typingLabel", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "log", "aria-live": "polite", "aria-relevant": "additions" }, listeners: { "scroll": "onScroll()" }, properties: { "attr.aria-label": "label()", "attr.aria-busy": "busy() ? \"true\" : null" }, classAttribute: "strct-chat" }, ngImport: i0, template: `
+    <div class="strct-chat__list" #list><ng-content /></div>
+    @if (busy()) {
+      <div class="strct-chat__typing" [attr.aria-label]="typingLabel()" role="status">
+        <span class="strct-chat__dot"></span>
+        <span class="strct-chat__dot"></span>
+        <span class="strct-chat__dot"></span>
+      </div>
+    }
+  `, isInline: true, styles: [".strct-chat{display:flex;flex-direction:column;gap:var(--space-3);min-height:0;overflow:auto;padding:var(--space-3)}.strct-chat__list{display:flex;flex-direction:column;gap:var(--space-3)}.strct-chat__typing{display:inline-flex;align-items:center;gap:4px;padding-inline-start:38px}.strct-chat__dot{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:strct-chat-bounce 1.1s ease-in-out infinite}.strct-chat__dot:nth-child(2){animation-delay:.15s}.strct-chat__dot:nth-child(3){animation-delay:.3s}@keyframes strct-chat-bounce{0%,70%,to{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}@media(prefers-reduced-motion:reduce){.strct-chat__dot{animation:none;opacity:.55}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatThread, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-chat-thread', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <div class="strct-chat__list" #list><ng-content /></div>
+    @if (busy()) {
+      <div class="strct-chat__typing" [attr.aria-label]="typingLabel()" role="status">
+        <span class="strct-chat__dot"></span>
+        <span class="strct-chat__dot"></span>
+        <span class="strct-chat__dot"></span>
+      </div>
+    }
+  `, host: {
+                        class: 'strct-chat',
+                        role: 'log',
+                        'aria-live': 'polite',
+                        'aria-relevant': 'additions',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.aria-busy]': 'busy() ? "true" : null',
+                        '(scroll)': 'onScroll()',
+                    }, styles: [".strct-chat{display:flex;flex-direction:column;gap:var(--space-3);min-height:0;overflow:auto;padding:var(--space-3)}.strct-chat__list{display:flex;flex-direction:column;gap:var(--space-3)}.strct-chat__typing{display:inline-flex;align-items:center;gap:4px;padding-inline-start:38px}.strct-chat__dot{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:strct-chat-bounce 1.1s ease-in-out infinite}.strct-chat__dot:nth-child(2){animation-delay:.15s}.strct-chat__dot:nth-child(3){animation-delay:.3s}@keyframes strct-chat-bounce{0%,70%,to{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}@media(prefers-reduced-motion:reduce){.strct-chat__dot{animation:none;opacity:.55}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "typingLabel", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }] } });
+/**
+ * One message in a {@link StrctChatThread}: an `article` labelled by its
+ * author, with the author's avatar, its content, and any attachment card.
+ */
+class StrctChatMessage {
+    /** Who wrote it. */
+    author = input('assistant', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "author" }] : /* istanbul ignore next */ []));
+    /** The author's name, shown above the bubble. */
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** An icon avatar instead of initials — an assistant is an icon. */
+    avatarIcon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "avatarIcon" }] : /* istanbul ignore next */ []));
+    /** The reply is still arriving: a caret follows the content. */
+    streaming = input(false, { ...(ngDevMode ? { debugName: "streaming" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When it was sent. */
+    time = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []));
+    /** How the time reads (localisable). */
+    timeFormat = input((d) => d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    /** Default names per author, overridable with `name` (and localisable). */
+    authorNames = input({
+        user: 'You',
+        assistant: 'Assistant',
+        system: 'System',
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "authorNames" }] : /* istanbul ignore next */ []));
+    displayName = computed(() => this.name() || this.authorNames()[this.author()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayName" }] : /* istanbul ignore next */ []));
+    shortTime = computed(() => {
+        const t = this.time();
+        return t ? this.timeFormat()(t) : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shortTime" }] : /* istanbul ignore next */ []));
+    isoTime = computed(() => this.time()?.toISOString() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isoTime" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctChatMessage, isStandalone: true, selector: "strct-chat-message", inputs: { author: { classPropertyName: "author", publicName: "author", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatarIcon: { classPropertyName: "avatarIcon", publicName: "avatarIcon", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, authorNames: { classPropertyName: "authorNames", publicName: "authorNames", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "article" }, properties: { "attr.data-author": "author()", "attr.aria-label": "displayName()", "attr.aria-busy": "streaming() ? \"true\" : null" }, classAttribute: "strct-msg" }, ngImport: i0, template: `
+    @if (author() !== 'system') {
+      <strct-avatar
+        class="strct-msg__avatar"
+        size="sm"
+        [name]="displayName()"
+        [icon]="avatarIcon()"
+        [tone]="author() === 'user' ? 'neutral' : 'accent-soft'"
+      />
+    }
+    <div class="strct-msg__body">
+      @if (author() !== 'system' && (name() || time())) {
+        <div class="strct-msg__meta">
+          @if (name()) {
+            <span class="strct-msg__name">{{ name() }}</span>
+          }
+          @if (time()) {
+            <time class="strct-msg__time" [attr.datetime]="isoTime()">{{ shortTime() }}</time>
+          }
+        </div>
+      }
+      <div class="strct-msg__bubble">
+        <ng-content />
+        @if (streaming()) {
+          <span class="strct-msg__caret" aria-hidden="true"></span>
+        }
+      </div>
+      <ng-content select="[strctChatAttachment]" />
+    </div>
+  `, isInline: true, styles: [".strct-msg{display:flex;align-items:flex-start;gap:var(--space-2);min-width:0}.strct-msg[data-author=user]{flex-direction:row-reverse}.strct-msg[data-author=system]{justify-content:center}.strct-msg__avatar{flex:none}.strct-msg__body{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:80%}.strct-msg[data-author=user] .strct-msg__body{align-items:flex-end}.strct-msg__meta{display:flex;align-items:baseline;gap:6px;font-size:var(--text-sm);color:var(--t3)}.strct-msg__name{font-weight:600}.strct-msg__bubble{padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);color:var(--t1);font-size:13px;line-height:1.5;min-width:0;overflow-wrap:anywhere}.strct-msg[data-author=user] .strct-msg__bubble{background:var(--acc-s);border-color:var(--acc30)}.strct-msg[data-author=system] .strct-msg__bubble{border:0;background:none;color:var(--t3);font-size:var(--text-sm);text-align:center}.strct-msg__caret{display:inline-block;width:2px;height:1em;margin-inline-start:2px;vertical-align:text-bottom;background:var(--acc);animation:strct-chat-caret 1s steps(2,start) infinite}@keyframes strct-chat-caret{to{opacity:0}}@media(prefers-reduced-motion:reduce){.strct-msg__caret{animation:none}}.strct-chat__attachment{display:block;margin-block-start:4px}\n"], dependencies: [{ kind: "component", type: StrctAvatar, selector: "strct-avatar", inputs: ["icon", "shape", "tone", "src", "name", "size", "status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatMessage, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-chat-message', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctAvatar], template: `
+    @if (author() !== 'system') {
+      <strct-avatar
+        class="strct-msg__avatar"
+        size="sm"
+        [name]="displayName()"
+        [icon]="avatarIcon()"
+        [tone]="author() === 'user' ? 'neutral' : 'accent-soft'"
+      />
+    }
+    <div class="strct-msg__body">
+      @if (author() !== 'system' && (name() || time())) {
+        <div class="strct-msg__meta">
+          @if (name()) {
+            <span class="strct-msg__name">{{ name() }}</span>
+          }
+          @if (time()) {
+            <time class="strct-msg__time" [attr.datetime]="isoTime()">{{ shortTime() }}</time>
+          }
+        </div>
+      }
+      <div class="strct-msg__bubble">
+        <ng-content />
+        @if (streaming()) {
+          <span class="strct-msg__caret" aria-hidden="true"></span>
+        }
+      </div>
+      <ng-content select="[strctChatAttachment]" />
+    </div>
+  `, host: {
+                        class: 'strct-msg',
+                        role: 'article',
+                        '[attr.data-author]': 'author()',
+                        '[attr.aria-label]': 'displayName()',
+                        // A streaming reply is announced when it finishes, not token by token.
+                        '[attr.aria-busy]': 'streaming() ? "true" : null',
+                    }, styles: [".strct-msg{display:flex;align-items:flex-start;gap:var(--space-2);min-width:0}.strct-msg[data-author=user]{flex-direction:row-reverse}.strct-msg[data-author=system]{justify-content:center}.strct-msg__avatar{flex:none}.strct-msg__body{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:80%}.strct-msg[data-author=user] .strct-msg__body{align-items:flex-end}.strct-msg__meta{display:flex;align-items:baseline;gap:6px;font-size:var(--text-sm);color:var(--t3)}.strct-msg__name{font-weight:600}.strct-msg__bubble{padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);color:var(--t1);font-size:13px;line-height:1.5;min-width:0;overflow-wrap:anywhere}.strct-msg[data-author=user] .strct-msg__bubble{background:var(--acc-s);border-color:var(--acc30)}.strct-msg[data-author=system] .strct-msg__bubble{border:0;background:none;color:var(--t3);font-size:var(--text-sm);text-align:center}.strct-msg__caret{display:inline-block;width:2px;height:1em;margin-inline-start:2px;vertical-align:text-bottom;background:var(--acc);animation:strct-chat-caret 1s steps(2,start) infinite}@keyframes strct-chat-caret{to{opacity:0}}@media(prefers-reduced-motion:reduce){.strct-msg__caret{animation:none}}.strct-chat__attachment{display:block;margin-block-start:4px}\n"] }]
+        }], propDecorators: { author: [{ type: i0.Input, args: [{ isSignal: true, alias: "author", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], avatarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarIcon", required: false }] }], streaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "streaming", required: false }] }], time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], authorNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "authorNames", required: false }] }] } });
+/**
+ * The box the user writes in: it grows with the text up to `maxRows`, sends on
+ * Enter and breaks a line on Shift+Enter — and never sends mid-composition, so
+ * an IME's Enter commits the candidate instead of the message.
+ */
+class StrctChatComposer {
+    /** The draft (two-way). */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Placeholder text. */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** The field's accessible name (visually hidden). */
+    label = input('Message', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Disabled while the assistant is busy, say. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** How tall the box grows before it scrolls. */
+    maxRows = input(8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
+    /** The send button's accessible name. */
+    sendLabel = input('Send', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sendLabel" }] : /* istanbul ignore next */ []));
+    /** The user sent the draft. */
+    send = output();
+    inputId = `strct-composer-${++composerCounter}`;
+    /** True while an IME is composing — Enter must commit, not send. */
+    composing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "composing" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    onInput(event) {
+        const el = event.target;
+        this.value.set(el.value);
+        this.grow(el);
+    }
+    /** Grow with the text: reset first, so deleting a line shrinks it again. */
+    grow(el) {
+        el.style.height = 'auto';
+        el.style.height = `${el.scrollHeight}px`;
+    }
+    onEnter(event) {
+        const e = event;
+        if (e.shiftKey || this.composing() || e.isComposing)
+            return;
+        e.preventDefault();
+        this.submit();
+    }
+    submit() {
+        const text = this.value().trim();
+        if (!text || this.disabled())
+            return;
+        this.send.emit(text);
+        this.value.set('');
+        const el = this.host.nativeElement.querySelector('textarea');
+        if (el) {
+            el.value = '';
+            this.grow(el);
+            el.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatComposer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctChatComposer, isStandalone: true, selector: "strct-chat-composer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, sendLabel: { classPropertyName: "sendLabel", publicName: "sendLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", send: "send" }, host: { classAttribute: "strct-composer" }, ngImport: i0, template: `
+    <label class="strct-composer__label" [attr.for]="inputId">{{ label() }}</label>
+    <div class="strct-composer__box">
+      <textarea
+        class="strct-composer__input"
+        [id]="inputId"
+        rows="1"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [value]="value()"
+        [style.max-height.px]="maxRows() * 20"
+        (input)="onInput($event)"
+        (compositionstart)="composing.set(true)"
+        (compositionend)="composing.set(false)"
+        (keydown.enter)="onEnter($event)"
+      ></textarea>
+      <button
+        type="button"
+        class="strct-composer__send"
+        [attr.aria-label]="sendLabel()"
+        [disabled]="disabled() || !value().trim()"
+        (click)="submit()"
+      >
+        <strct-icon strictName="arrowUp" [size]="15" [strokeWidth]="1.8" />
+      </button>
+    </div>
+  `, isInline: true, styles: [".strct-composer{display:block}.strct-composer__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-composer__box{display:flex;align-items:flex-end;gap:4px;padding:4px 4px 4px var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);transition:border-color .14s ease,box-shadow .14s ease}.strct-composer__box:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-composer__input{flex:1;min-width:0;border:0;background:none;resize:none;padding:6px 0;font-family:var(--font);font-size:13px;line-height:20px;color:var(--t1);overflow-y:auto}.strct-composer__input:focus{outline:none}.strct-composer__input::placeholder{color:var(--t3)}.strct-composer__send{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border:0;border-radius:var(--radius-md);background:var(--acc);color:var(--inv);cursor:pointer}.strct-composer__send:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.strct-composer__send:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatComposer, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-chat-composer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    <label class="strct-composer__label" [attr.for]="inputId">{{ label() }}</label>
+    <div class="strct-composer__box">
+      <textarea
+        class="strct-composer__input"
+        [id]="inputId"
+        rows="1"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [value]="value()"
+        [style.max-height.px]="maxRows() * 20"
+        (input)="onInput($event)"
+        (compositionstart)="composing.set(true)"
+        (compositionend)="composing.set(false)"
+        (keydown.enter)="onEnter($event)"
+      ></textarea>
+      <button
+        type="button"
+        class="strct-composer__send"
+        [attr.aria-label]="sendLabel()"
+        [disabled]="disabled() || !value().trim()"
+        (click)="submit()"
+      >
+        <strct-icon strictName="arrowUp" [size]="15" [strokeWidth]="1.8" />
+      </button>
+    </div>
+  `, host: { class: 'strct-composer' }, styles: [".strct-composer{display:block}.strct-composer__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-composer__box{display:flex;align-items:flex-end;gap:4px;padding:4px 4px 4px var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);transition:border-color .14s ease,box-shadow .14s ease}.strct-composer__box:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-composer__input{flex:1;min-width:0;border:0;background:none;resize:none;padding:6px 0;font-family:var(--font);font-size:13px;line-height:20px;color:var(--t1);overflow-y:auto}.strct-composer__input:focus{outline:none}.strct-composer__input::placeholder{color:var(--t3)}.strct-composer__send{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border:0;border-radius:var(--radius-md);background:var(--acc);color:var(--inv);cursor:pointer}.strct-composer__send:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.strct-composer__send:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], sendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendLabel", required: false }] }], send: [{ type: i0.Output, args: ["send"] }] } });
+let composerCounter = 0;
+
 /**
  * A value change, as one phrase: "v10.27 → v10.28". The old value is muted, the
  * arrow is the library's, the new one is emphasised — and assistive tech hears
@@ -25177,5 +25966,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowService, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map