@janusui/janus-ui-library 0.0.1

package/fesm2022/janusui-janus-ui-library.mjs

@@ -0,0 +1,1010 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, signal, inject, input, computed, Directive, makeEnvironmentProviders, output, ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+
+/** All available color groups for iterating in dropdowns / pickers. */
+const COLOR_GROUPS = [
+    'red',
+    'green',
+    'blue',
+    'yellow',
+    'orange',
+    'purple',
+    'cyan',
+    'magenta',
+    'lime',
+    'pink',
+];
+/** CSS-friendly hex values for each color group. */
+const COLOR_GROUP_HEX = {
+    red: '#ff1744',
+    green: '#00c853',
+    blue: '#2979ff',
+    yellow: '#ffd600',
+    orange: '#ff9100',
+    purple: '#d500f9',
+    cyan: '#00e5ff',
+    magenta: '#f50057',
+    lime: '#76ff03',
+    pink: '#ff80ab',
+};
+
+/** Injection token for the ScreenWidgetApi. Provided by ScreenWidgetComponent. */
+const SCREEN_WIDGET_API = new InjectionToken('SCREEN_WIDGET_API');
+
+/**
+ * Multi-provider token. Each widget module provides its metadata via this token.
+ * WorkspaceService collects all provided values to populate the widget registry.
+ */
+const WIDGET_META = new InjectionToken('WIDGET_META');
+
+/**
+ * Pure grid math engine. No DOM manipulation — just calculations.
+ * Angular owns all rendering via templates.
+ */
+class LayoutEngine {
+    TARGET_CELL_WIDTH = 90;
+    MIN_COLUMNS = 6;
+    MAX_COLUMNS = 36;
+    CELL_HEIGHT = 20;
+    GAP = 4;
+    observers = new WeakMap();
+    /** Compute column count for a given container width. */
+    computeColumns(containerWidth) {
+        if (containerWidth <= 0)
+            return this.MIN_COLUMNS;
+        return Math.max(this.MIN_COLUMNS, Math.min(this.MAX_COLUMNS, Math.round(containerWidth / this.TARGET_CELL_WIDTH)));
+    }
+    /** Build full grid config from container width. */
+    getConfig(containerWidth) {
+        const columns = this.computeColumns(containerWidth);
+        const cellWidth = (containerWidth - this.GAP * (columns + 1)) / columns;
+        return {
+            columns,
+            cellWidth,
+            cellHeight: this.CELL_HEIGHT,
+            gap: this.GAP,
+            containerWidth,
+        };
+    }
+    /** Convert grid units to pixel rectangle. All units share the same uniform step. */
+    rectToPixel(cfg, col, row, w, h) {
+        const step = cfg.cellHeight + cfg.gap;
+        return {
+            left: col * step + cfg.gap,
+            top: row * step + cfg.gap,
+            width: Math.max(1, w * step - cfg.gap),
+            height: Math.max(1, h * step - cfg.gap),
+        };
+    }
+    /** Snap pixel position to nearest uniform grid cell. */
+    snapToGrid(cfg, px, py) {
+        const step = cfg.cellHeight + cfg.gap;
+        return {
+            col: Math.max(0, Math.round((px - cfg.gap) / step)),
+            row: Math.max(0, Math.round((py - cfg.gap) / step)),
+        };
+    }
+    /** Snap pixel size to nearest uniform grid size. */
+    snapSize(cfg, pw, ph, minCols, minRows) {
+        const step = cfg.cellHeight + cfg.gap;
+        const w = Math.max(minCols, Math.round((pw + cfg.gap) / step));
+        const h = Math.max(minRows, Math.round((ph + cfg.gap) / step));
+        return { w, h };
+    }
+    /** Observe container resizes and call back with new config. */
+    observe(container, onResize) {
+        const callback = () => onResize(this.getConfig(container.clientWidth));
+        const observer = new ResizeObserver(() => callback());
+        observer.observe(container);
+        this.observers.set(container, () => observer.disconnect());
+        // Fire initial.
+        callback();
+    }
+    /** Stop observing a container. */
+    unobserve(container) {
+        this.observers.get(container)?.();
+        this.observers.delete(container);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LayoutEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LayoutEngine, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LayoutEngine, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Central singleton that tracks arbitrary JSON payloads per color group.
+ *
+ * Widgets assigned to the same color group all see the same accumulated
+ * data. Each widget publishes partial JSON — the service shallow-merges
+ * it into the group state. Keys a widget doesn't touch are left intact.
+ *
+ * To remove a key you previously set, publish it as `null`.
+ *
+ * Persistence is handled by WorkspaceService via {@link getAllData} /
+ * {@link setAllData}. This service does not touch localStorage directly.
+ */
+class WidgetLinkService {
+    state = new Map();
+    constructor() {
+        for (const color of COLOR_GROUPS) {
+            this.state.set(color, signal({}));
+        }
+    }
+    // ---- readers --------------------------------------------------------------
+    /** Get the reactive data signal for a color group. */
+    getData(color) {
+        return this.state.get(color);
+    }
+    /** Read the current data value (non-reactive snapshot). */
+    getDataSnapshot(color) {
+        return this.state.get(color)();
+    }
+    // ---- writers --------------------------------------------------------------
+    /**
+     * Publish a partial JSON payload to a color group.
+     *
+     * Shallow-merged with the existing state:
+     * - New keys are added.
+     * - Existing keys the caller provides are overwritten.
+     * - Keys the caller does NOT provide survive untouched.
+     * - Keys with `null` or `undefined` values are removed.
+     */
+    publishData(color, partial) {
+        const current = this.state.get(color)();
+        const merged = { ...current };
+        for (const [key, value] of Object.entries(partial)) {
+            if (value === null || value === undefined) {
+                delete merged[key];
+            }
+            else {
+                merged[key] = value;
+            }
+        }
+        this.state.get(color).set(merged);
+    }
+    // ---- bulk -----------------------------------------------------------------
+    /** Reset all color groups to empty state. */
+    resetAll() {
+        for (const [, data] of this.state) {
+            data.set({});
+        }
+    }
+    // ---- persistence helpers (called by WorkspaceService) ---------------------
+    /**
+     * Return a snapshot of all color group data for serialization.
+     * Called by WorkspaceService during save.
+     */
+    getAllData() {
+        const snapshot = {};
+        for (const [color, sig] of this.state) {
+            snapshot[color] = sig();
+        }
+        return snapshot;
+    }
+    /**
+     * Restore color group data from a previously saved snapshot.
+     * Called by WorkspaceService during load.
+     */
+    setAllData(data) {
+        for (const color of COLOR_GROUPS) {
+            this.state.get(color).set(data[color] ?? {});
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WidgetLinkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WidgetLinkService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WidgetLinkService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+const STORAGE_KEY = 'janus-workspace';
+const HB_PREFIX$1 = 'janus-hb-';
+/** Seconds before a window's heartbeat is considered stale. */
+const HB_STALE_MS = 10_000;
+/** Generates a short unique ID. */
+function uid() {
+    return crypto.randomUUID();
+}
+/** Default bounds for a newly created window. */
+function defaultBounds() {
+    return { x: 100, y: 100, width: 1200, height: 800 };
+}
+/**
+ * Central singleton that owns the full workspace state:
+ * an array of WidgetWindows, each containing a grid of widget panels.
+ *
+ * All mutations flow through this service so that persistence and
+ * cross-window sync (BroadcastChannel) stay consistent.
+ */
+class WorkspaceService {
+    // ---- state ----------------------------------------------------------------
+    /** All windows in the workspace. */
+    windows = signal([], ...(ngDevMode ? [{ debugName: "windows" }] : /* istanbul ignore next */ []));
+    /** Reactive list of registered widget type strings (for dropdowns). */
+    widgetTypes = signal([], ...(ngDevMode ? [{ debugName: "widgetTypes" }] : /* istanbul ignore next */ []));
+    /** Reactive list of widget labels (for dropdown display). */
+    widgetLabels = signal([], ...(ngDevMode ? [{ debugName: "widgetLabels" }] : /* istanbul ignore next */ []));
+    /** Registry mapping widget type strings to their metadata + component class. */
+    widgetRegistry = new Map();
+    #widgetLink = inject(WidgetLinkService);
+    constructor() {
+        const snapshot = this.#load();
+        // Sweep orphaned heartbeat keys that don't match any existing window.
+        this.#cleanupHeartbeats(snapshot.windows);
+        // Restore color-linked data before widget windows so widgets see it on init.
+        this.#widgetLink.setAllData(snapshot.colorData);
+        // main-window must always be open — guard against stale / tampered data.
+        snapshot.windows = snapshot.windows.map((w) => w.id === 'main-window' ? { ...w, state: 'open' } : w);
+        this.windows.set(snapshot.windows);
+        // Collect all widget metadata provided via DI (multi-provider injection token).
+        const metas = inject(WIDGET_META, { optional: true });
+        if (metas) {
+            for (const meta of [metas].flat()) {
+                this.#register(meta);
+            }
+        }
+        // Cross-window sync: listen for localStorage changes from other tabs/popups.
+        window.addEventListener('storage', (event) => {
+            if (event.key === STORAGE_KEY && event.newValue) {
+                try {
+                    const parsed = JSON.parse(event.newValue);
+                    if (parsed &&
+                        typeof parsed === 'object' &&
+                        Array.isArray(parsed.windows)) {
+                        this.windows.set(parsed.windows);
+                        if (parsed.colorData) {
+                            this.#widgetLink.setAllData(parsed.colorData);
+                        }
+                    }
+                }
+                catch {
+                    // Corrupt data — ignore.
+                }
+            }
+        });
+        // Detect stale popup heartbeats — only in the main window (not popups).
+        // Popups have their own sessionStorage, so their checker would lack the
+        // "janus-closed-*" flags and incorrectly process other windows.
+        if (!window.opener) {
+            setInterval(() => {
+                const now = Date.now();
+                const current = this.windows();
+                let changed = false;
+                const toRemove = new Set();
+                const staleHbIds = [];
+                const updated = current.map((win) => {
+                    // Only process popup windows (not main-window).
+                    if (win.id === 'main-window')
+                        return win;
+                    const hbKey = HB_PREFIX$1 + win.id;
+                    const hb = localStorage.getItem(hbKey);
+                    if (!hb || now - parseInt(hb, 10) > HB_STALE_MS) {
+                        staleHbIds.push(win.id);
+                        if (win.widgets.length === 0) {
+                            changed = true;
+                            toRemove.add(win.id);
+                            return win; // will be filtered out below
+                        }
+                        // If the user intentionally closed this popup (state === 'closed'),
+                        // leave it as-is — it appears in the reopen dropdown.
+                        if (win.state === 'closed') {
+                            return win;
+                        }
+                        // Still 'open' with a stale heartbeat — either closePopupWindow
+                        // hasn't run yet (rare race) or this is after a refresh. Set
+                        // state to 'closed' so it appears in the reopen dropdown.
+                        changed = true;
+                        return { ...win, state: 'closed' };
+                    }
+                    return win;
+                });
+                if (changed) {
+                    this.windows.set(toRemove.size > 0
+                        ? updated.filter((w) => !toRemove.has(w.id))
+                        : updated);
+                    this.#save();
+                }
+                // Clean up heartbeat keys we've already processed.
+                for (const id of staleHbIds) {
+                    localStorage.removeItem(HB_PREFIX$1 + id);
+                }
+            }, 5_000);
+        }
+    }
+    // ---- public API -----------------------------------------------------------
+    /** Get metadata for a widget type. */
+    getWidgetMeta(type) {
+        return this.widgetRegistry.get(type);
+    }
+    // ---- window operations ----------------------------------------------------
+    /** Create a new empty WidgetWindow and add it to the workspace. */
+    addWindow(title = 'My Window') {
+        const win = {
+            id: uid(),
+            title,
+            bounds: defaultBounds(),
+            minimized: false,
+            state: 'open',
+            widgets: [],
+        };
+        this.windows.update((w) => [...w, win]);
+        this.#save();
+        return win;
+    }
+    /** Remove a window by ID. The last remaining window cannot be removed. */
+    removeWindow(windowId) {
+        const current = this.windows();
+        if (current.length <= 1)
+            return;
+        this.windows.set(current.filter((win) => win.id !== windowId));
+        this.#save();
+    }
+    /** Update a window's screen bounds (position / size). */
+    updateWindowBounds(windowId, bounds) {
+        this.windows.update((w) => w.map((win) => (win.id === windowId ? { ...win, bounds } : win)));
+        this.#save();
+    }
+    /** Toggle minimized state. */
+    toggleMinimize(windowId) {
+        this.windows.update((w) => w.map((win) => win.id === windowId ? { ...win, minimized: !win.minimized } : win));
+        this.#save();
+    }
+    /** Set a window's lifecycle state ('open' or 'closed'). */
+    setWindowState(windowId, state) {
+        // main-window can never be closed.
+        if (windowId === 'main-window' && state === 'closed')
+            return;
+        this.windows.update((w) => w.map((win) => (win.id === windowId ? { ...win, state } : win)));
+        this.#save();
+    }
+    /** Set a window's display title. Empty / blank titles default to 'My Window'. */
+    setWindowTitle(windowId, title) {
+        const safe = title.trim() || 'My Window';
+        this.windows.update((w) => w.map((win) => (win.id === windowId ? { ...win, title: safe } : win)));
+        this.#save();
+    }
+    // ---- widget operations ----------------------------------------------------
+    /**
+     * Add a widget panel to a specific window.
+     * Uses the widget's registered metadata for default sizing.
+     */
+    addWidget(windowId, type) {
+        const meta = this.widgetRegistry.get(type);
+        const panel = {
+            id: uid(),
+            type,
+            gridX: 0,
+            gridY: 0,
+            gridCols: meta?.defaultCols ?? 16,
+            gridRows: meta?.defaultRows ?? 3,
+        };
+        let created;
+        this.windows.update((wins) => wins.map((win) => {
+            if (win.id !== windowId)
+                return win;
+            created = panel;
+            return { ...win, widgets: [...win.widgets, panel] };
+        }));
+        this.#save();
+        return created;
+    }
+    /** Remove a widget panel by its ID. */
+    removeWidget(windowId, widgetId) {
+        this.windows.update((wins) => wins.map((win) => {
+            if (win.id !== windowId)
+                return win;
+            return {
+                ...win,
+                widgets: win.widgets.filter((w) => w.id !== widgetId),
+            };
+        }));
+        this.#save();
+    }
+    /** Update a widget's grid position and/or size. */
+    updateWidgetLayout(windowId, widgetId, patch) {
+        this.windows.update((wins) => wins.map((win) => {
+            if (win.id !== windowId)
+                return win;
+            return {
+                ...win,
+                widgets: win.widgets.map((w) => w.id === widgetId ? { ...w, ...patch } : w),
+            };
+        }));
+        this.#save();
+    }
+    /** Set the color group for a widget panel. */
+    setWidgetColorGroup(windowId, widgetId, colorGroup) {
+        this.windows.update((wins) => wins.map((win) => {
+            if (win.id !== windowId)
+                return win;
+            return {
+                ...win,
+                widgets: win.widgets.map((w) => w.id === widgetId ? { ...w, colorGroup } : w),
+            };
+        }));
+        this.#save();
+    }
+    // ---- persistence ----------------------------------------------------------
+    /** Serialize the entire workspace to localStorage. */
+    save() {
+        this.#save();
+    }
+    /** Replace all windows with a previously saved snapshot. */
+    restore(snapshot) {
+        this.windows.set(snapshot);
+        this.#save();
+    }
+    // ---- private helpers ------------------------------------------------------
+    #register(meta) {
+        this.widgetRegistry.set(meta.type, meta);
+        this.widgetTypes.set(Array.from(this.widgetRegistry.keys()));
+        this.widgetLabels.set(Array.from(this.widgetRegistry.values()).map((m) => m.label));
+    }
+    #save() {
+        try {
+            const snapshot = {
+                windows: this.windows(),
+                colorData: this.#widgetLink.getAllData(),
+            };
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot));
+        }
+        catch {
+            // localStorage unavailable — workspace still works in memory.
+        }
+    }
+    /** Remove heartbeat keys that don't belong to any existing window. */
+    #cleanupHeartbeats(windows) {
+        const knownIds = new Set(windows.map((w) => w.id));
+        for (let i = localStorage.length - 1; i >= 0; i--) {
+            const key = localStorage.key(i);
+            if (key?.startsWith(HB_PREFIX$1)) {
+                const id = key.slice(HB_PREFIX$1.length);
+                if (!knownIds.has(id)) {
+                    localStorage.removeItem(key);
+                }
+            }
+        }
+    }
+    #load() {
+        try {
+            const raw = localStorage.getItem(STORAGE_KEY);
+            if (raw) {
+                const parsed = JSON.parse(raw);
+                // Handle legacy format (plain array of windows).
+                if (Array.isArray(parsed) && parsed.length > 0) {
+                    const windows = parsed.map(({ detached: _, ...rest }) => ({ ...rest, state: rest['state'] ?? 'open', title: rest['title'] || 'My Window' }));
+                    return { windows, colorData: {} };
+                }
+                // Handle new unified format.
+                if (parsed && typeof parsed === 'object' && Array.isArray(parsed.windows)) {
+                    // Strip legacy `detached` field, default missing `state` / `title`.
+                    const windows = parsed.windows.map(({ detached: _, ...rest }) => ({ ...rest, state: rest['state'] ?? 'open', title: rest['title'] || 'My Window' }));
+                    return {
+                        windows,
+                        colorData: parsed.colorData ?? {},
+                    };
+                }
+            }
+        }
+        catch {
+            // Corrupt data or localStorage unavailable — start fresh.
+        }
+        // Default workspace: one empty window, no color data.
+        return {
+            windows: [
+                {
+                    id: 'main-window',
+                    title: 'Main',
+                    bounds: defaultBounds(),
+                    minimized: false,
+                    state: 'open',
+                    widgets: [],
+                },
+            ],
+            colorData: {},
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WorkspaceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WorkspaceService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WorkspaceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Format a number to a fixed number of decimal places.
+ */
+function fmt(value, decimals = 2) {
+    return value.toFixed(decimals);
+}
+
+/**
+ * Abstract base class for all screen widgets.
+ *
+ * Provides the shared state and logic that every widget needs:
+ * - Inputs: widgetId, windowId, meta
+ * - Reactive signals: title, colorGroup, data
+ * - Action methods: setTitle, publishData, onColorGroupChange, onRemove
+ * - Color picker data: colors, colorHex
+ *
+ * Concrete widgets extend this class and use {@link WidgetChromeComponent}
+ * in their template to render the common chrome (titlebar, color picker,
+ * remove button) while projecting their own content into the body slot.
+ *
+ * All members are `protected` so inheriting widgets can access them
+ * directly — no dependency injection token needed.
+ */
+class ScreenWidgetBase {
+    // ---- inputs ------------------------------------------------------------
+    /** Unique widget instance ID — provided by WidgetWindow. */
+    widgetId = input.required(...(ngDevMode ? [{ debugName: "widgetId" }] : /* istanbul ignore next */ []));
+    /** ID of the parent window — provided by WidgetWindow. */
+    windowId = input.required(...(ngDevMode ? [{ debugName: "windowId" }] : /* istanbul ignore next */ []));
+    /** Widget metadata (type, label, default sizing, etc.). */
+    meta = input.required(...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
+    // ---- services ----------------------------------------------------------
+    workspace = inject(WorkspaceService);
+    widgetLink = inject(WidgetLinkService);
+    // ---- reactive state ----------------------------------------------------
+    /** Overridable title — starts from meta().label, settable via setTitle(). */
+    title = computed(() => this.#overriddenTitle() || this.meta().label, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    #overriddenTitle = signal('', ...(ngDevMode ? [{ debugName: "#overriddenTitle" }] : /* istanbul ignore next */ []));
+    /** The color group for this widget, read from the workspace state. */
+    colorGroup = computed(() => {
+        const win = this.workspace
+            .windows()
+            .find((w) => w.id === this.windowId());
+        return win?.widgets.find((p) => p.id === this.widgetId())?.colorGroup;
+    }, ...(ngDevMode ? [{ debugName: "colorGroup" }] : /* istanbul ignore next */ []));
+    /**
+     * The accumulated JSON data for this widget's color group.
+     * Automatically tracks the WidgetLinkService signal for whatever
+     * color group is currently assigned.
+     */
+    data = computed(() => {
+        const cg = this.colorGroup();
+        return cg ? this.widgetLink.getData(cg)() : {};
+    }, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    // ---- color picker data -------------------------------------------------
+    colors = COLOR_GROUPS;
+    colorHex = COLOR_GROUP_HEX;
+    // ---- action methods ----------------------------------------------------
+    /** Allow the widget to override the header title at runtime. */
+    setTitle(title) {
+        this.#overriddenTitle.set(title);
+    }
+    /**
+     * Publish partial JSON data to all widgets sharing this widget's color group.
+     * Shallow-merged: keys you provide overwrite, keys you omit survive.
+     * Pass `null` as a value to remove a key. No-op if no color group assigned.
+     *
+     * @example
+     * this.publishData({ symbol: 'AAPL' });
+     * this.publishData({ resistance: 543.21 });
+     */
+    publishData(partial) {
+        const cg = this.colorGroup();
+        if (cg) {
+            this.widgetLink.publishData(cg, partial);
+            this.workspace.save();
+        }
+    }
+    /** Update the color group for this widget in the workspace. */
+    onColorGroupChange(cg) {
+        this.workspace.setWidgetColorGroup(this.windowId(), this.widgetId(), cg);
+    }
+    /** Remove this widget from its parent window. */
+    onRemove() {
+        this.workspace.removeWidget(this.windowId(), this.widgetId());
+    }
+    /** Convenience alias for the color picker dropdown. */
+    selectColor(color) {
+        this.onColorGroupChange(color);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ScreenWidgetBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", type: ScreenWidgetBase, isStandalone: true, inputs: { widgetId: { classPropertyName: "widgetId", publicName: "widgetId", isSignal: true, isRequired: true, transformFunction: null }, windowId: { classPropertyName: "windowId", publicName: "windowId", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ScreenWidgetBase, decorators: [{
+            type: Directive
+        }], propDecorators: { widgetId: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetId", required: true }] }], windowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "windowId", required: true }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: true }] }] } });
+
+/**
+ * Register a widget via the WIDGET_META multi-provider token.
+ * Call this from a root-level provider factory to make the widget
+ * discoverable by WorkspaceService.
+ *
+ * The `component` field should point to the full widget component
+ * (the one that extends {@link ScreenWidgetBase} and includes
+ * the {@link WidgetChromeComponent} in its template).
+ *
+ * @example
+ * export function provideWatchlistWidget(): EnvironmentProviders {
+ *   return provideWidget({
+ *     type: 'watchlist',
+ *     component: Watchlist,
+ *     label: 'Watchlist',
+ *     defaultCols: 16,
+ *     defaultRows: 6,
+ *     minCols: 8,
+ *     minRows: 3,
+ *   });
+ * }
+ */
+function provideWidget(meta) {
+    return makeEnvironmentProviders([
+        { provide: WIDGET_META, useValue: meta, multi: true },
+    ]);
+}
+
+/**
+ * Reusable widget chrome component that renders the common titlebar:
+ * color-group picker, dynamic title, and remove button.
+ *
+ * Uses `<ng-content>` to project the widget-specific body content.
+ *
+ * This component is **purely presentational** — all business logic
+ * (workspace mutations, symbol linking) lives in {@link ScreenWidgetBase}
+ * and is wired up by the concrete widget's template.
+ */
+class WidgetChromeComponent {
+    /** The current title text to display in the header. */
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** The current color group, or undefined if unlinked. */
+    colorGroup = input(...(ngDevMode ? [undefined, { debugName: "colorGroup" }] : /* istanbul ignore next */ []));
+    /** Emitted when the user selects a different color group (or "No link"). */
+    colorChange = output();
+    /** Emitted when the user clicks the remove (×) button. */
+    remove = output();
+    // ---- color picker data -------------------------------------------------
+    colors = COLOR_GROUPS;
+    colorHex = COLOR_GROUP_HEX;
+    // ---- template helpers --------------------------------------------------
+    selectColor(color) {
+        this.colorChange.emit(color);
+    }
+    onRemove() {
+        this.remove.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WidgetChromeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: WidgetChromeComponent, isStandalone: true, selector: "janus-widget-chrome", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, colorGroup: { classPropertyName: "colorGroup", publicName: "colorGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange", remove: "remove" }, ngImport: i0, template: "<div class=\"widget-chrome\">\n  <header class=\"widget-header\">\n    <div class=\"widget-left\">\n      <div class=\"dropdown color-picker\">\n        <i\n          class=\"bi bi-list color-burger dropdown-toggle\"\n          [style.color]=\"colorGroup() ? colorHex[colorGroup()!] : 'var(--bs-secondary-color)'\"\n          [title]=\"colorGroup() ? 'Linked to ' + colorGroup() : 'Link to color group'\"\n          data-bs-toggle=\"dropdown\"\n          aria-expanded=\"false\"\n          role=\"button\"\n          tabindex=\"0\"\n        ></i>\n        <div class=\"dropdown-menu\">\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            (click)=\"selectColor(undefined)\"\n          >\n            <span class=\"color-swatch color-swatch--none\"></span>\n            <span class=\"color-label\">No link</span>\n          </button>\n          @for (c of colors; track c) {\n            <button\n              class=\"dropdown-item\"\n              [class.active]=\"colorGroup() === c\"\n              type=\"button\"\n              (click)=\"selectColor(c)\"\n            >\n              <span\n                class=\"color-swatch\"\n                [style.background-color]=\"colorHex[c]\"\n              ></span>\n              <span class=\"color-label\">{{ c }}</span>\n            </button>\n          }\n        </div>\n      </div>\n\n      <span class=\"widget-title\">{{ title() }}</span>\n    </div>\n\n    <div class=\"widget-controls\">\n      <button\n        class=\"header-btn header-btn--remove\"\n        title=\"Remove widget\"\n        (click)=\"onRemove()\"\n      >\n        &times;\n      </button>\n    </div>\n  </header>\n\n  <div class=\"widget-chrome-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".widget-chrome{display:flex;flex-direction:column;height:100%;background-color:var(--bs-body-bg)}.widget-chrome-body{flex:1;overflow:auto}.widget-header{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 8px;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);-webkit-user-select:none;user-select:none;cursor:grab}.widget-title{font-size:12px;font-weight:600;color:var(--bs-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-left{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.widget-controls{display:flex;align-items:center;gap:4px;flex-shrink:0}.header-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:3px;background:transparent;color:var(--bs-secondary-color);font-size:14px;line-height:1;cursor:pointer}.header-btn:hover{background-color:var(--bs-secondary-bg);color:var(--bs-body-color)}.header-btn--remove{font-size:18px}.header-btn--remove:hover{color:var(--bs-danger)}.color-picker{flex-shrink:0}.color-burger{font-size:16px;cursor:pointer;transition:color .2s ease;line-height:1;padding:2px 4px;border-radius:3px}.color-burger:hover{background-color:var(--bs-secondary-bg)}.color-burger:after{display:none!important}.dropdown-menu{font-size:12px;min-width:130px}.color-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;flex-shrink:0;border:1px solid rgba(127,127,127,.3)}.color-swatch--none{background:repeating-linear-gradient(-45deg,transparent,transparent 2px,var(--bs-secondary-color) 2px,var(--bs-secondary-color) 3px)}.color-label{text-transform:capitalize;margin-left:6px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WidgetChromeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'janus-widget-chrome', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"widget-chrome\">\n  <header class=\"widget-header\">\n    <div class=\"widget-left\">\n      <div class=\"dropdown color-picker\">\n        <i\n          class=\"bi bi-list color-burger dropdown-toggle\"\n          [style.color]=\"colorGroup() ? colorHex[colorGroup()!] : 'var(--bs-secondary-color)'\"\n          [title]=\"colorGroup() ? 'Linked to ' + colorGroup() : 'Link to color group'\"\n          data-bs-toggle=\"dropdown\"\n          aria-expanded=\"false\"\n          role=\"button\"\n          tabindex=\"0\"\n        ></i>\n        <div class=\"dropdown-menu\">\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            (click)=\"selectColor(undefined)\"\n          >\n            <span class=\"color-swatch color-swatch--none\"></span>\n            <span class=\"color-label\">No link</span>\n          </button>\n          @for (c of colors; track c) {\n            <button\n              class=\"dropdown-item\"\n              [class.active]=\"colorGroup() === c\"\n              type=\"button\"\n              (click)=\"selectColor(c)\"\n            >\n              <span\n                class=\"color-swatch\"\n                [style.background-color]=\"colorHex[c]\"\n              ></span>\n              <span class=\"color-label\">{{ c }}</span>\n            </button>\n          }\n        </div>\n      </div>\n\n      <span class=\"widget-title\">{{ title() }}</span>\n    </div>\n\n    <div class=\"widget-controls\">\n      <button\n        class=\"header-btn header-btn--remove\"\n        title=\"Remove widget\"\n        (click)=\"onRemove()\"\n      >\n        &times;\n      </button>\n    </div>\n  </header>\n\n  <div class=\"widget-chrome-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".widget-chrome{display:flex;flex-direction:column;height:100%;background-color:var(--bs-body-bg)}.widget-chrome-body{flex:1;overflow:auto}.widget-header{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 8px;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);-webkit-user-select:none;user-select:none;cursor:grab}.widget-title{font-size:12px;font-weight:600;color:var(--bs-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-left{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.widget-controls{display:flex;align-items:center;gap:4px;flex-shrink:0}.header-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:3px;background:transparent;color:var(--bs-secondary-color);font-size:14px;line-height:1;cursor:pointer}.header-btn:hover{background-color:var(--bs-secondary-bg);color:var(--bs-body-color)}.header-btn--remove{font-size:18px}.header-btn--remove:hover{color:var(--bs-danger)}.color-picker{flex-shrink:0}.color-burger{font-size:16px;cursor:pointer;transition:color .2s ease;line-height:1;padding:2px 4px;border-radius:3px}.color-burger:hover{background-color:var(--bs-secondary-bg)}.color-burger:after{display:none!important}.dropdown-menu{font-size:12px;min-width:130px}.color-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;flex-shrink:0;border:1px solid rgba(127,127,127,.3)}.color-swatch--none{background:repeating-linear-gradient(-45deg,transparent,transparent 2px,var(--bs-secondary-color) 2px,var(--bs-secondary-color) 3px)}.color-label{text-transform:capitalize;margin-left:6px}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], colorGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorGroup", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
+
+class WidgetWindow {
+    windowId = input.required(...(ngDevMode ? [{ debugName: "windowId" }] : /* istanbul ignore next */ []));
+    workspace = inject(WorkspaceService);
+    engine = inject(LayoutEngine);
+    bodyEl = viewChild.required('windowBody');
+    availableTypes = signal([], ...(ngDevMode ? [{ debugName: "availableTypes" }] : /* istanbul ignore next */ []));
+    availableLabels = signal([], ...(ngDevMode ? [{ debugName: "availableLabels" }] : /* istanbul ignore next */ []));
+    cfg = signal({ columns: 12, cellWidth: 90, cellHeight: 20, gap: 4, containerWidth: 0 }, ...(ngDevMode ? [{ debugName: "cfg" }] : /* istanbul ignore next */ []));
+    /** Active intervals for polling popup closure. */
+    popupIntervals = new Set();
+    /** Dynamic background grid that matches our uniform layout step. */
+    gridBgSize = computed(() => {
+        const c = this.cfg();
+        const step = c.cellHeight + c.gap;
+        return `${step}px ${step}px`;
+    }, ...(ngDevMode ? [{ debugName: "gridBgSize" }] : /* istanbul ignore next */ []));
+    /** Offset the background so dots land at the center of gap intersections. */
+    gridBgPosition = computed(() => {
+        const c = this.cfg();
+        return `${c.gap / 2}px ${c.gap / 2}px`;
+    }, ...(ngDevMode ? [{ debugName: "gridBgPosition" }] : /* istanbul ignore next */ []));
+    widgets = computed(() => this.workspace.windows().find((w) => w.id === this.windowId())?.widgets ?? [], ...(ngDevMode ? [{ debugName: "widgets" }] : /* istanbul ignore next */ []));
+    widgetRects = computed(() => {
+        const c = this.cfg();
+        const map = new Map();
+        for (const w of this.widgets()) {
+            map.set(w.id, this.engine.rectToPixel(c, w.gridX, w.gridY, w.gridCols, w.gridRows));
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "widgetRects" }] : /* istanbul ignore next */ []));
+    /** All popup windows (open or closed), for the window dropdown. */
+    popupWindows = computed(() => this.workspace.windows().filter((w) => w.id !== 'main-window'), ...(ngDevMode ? [{ debugName: "popupWindows" }] : /* istanbul ignore next */ []));
+    /** Popup windows the user has intentionally closed. */
+    closedWindows = computed(() => this.popupWindows().filter((w) => w.state === 'closed'), ...(ngDevMode ? [{ debugName: "closedWindows" }] : /* istanbul ignore next */ []));
+    /** Title of the current window (reactive). */
+    windowTitle = computed(() => this.workspace.windows().find((w) => w.id === this.windowId())?.title ?? '', ...(ngDevMode ? [{ debugName: "windowTitle" }] : /* istanbul ignore next */ []));
+    /** Title text width estimate (14px font, ~8.4px avg char width, + 12px padding). */
+    titleWidth = computed(() => Math.max(this.windowTitle().length * 8.4 + 12, 200), ...(ngDevMode ? [{ debugName: "titleWidth" }] : /* istanbul ignore next */ []));
+    editingTitle = signal(false, ...(ngDevMode ? [{ debugName: "editingTitle" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const types = this.workspace.widgetTypes;
+        const labels = this.workspace.widgetLabels;
+        queueMicrotask(() => {
+            this.availableTypes.set(types());
+            this.availableLabels.set(labels());
+        });
+    }
+    ngAfterViewInit() {
+        this.engine.observe(this.bodyEl().nativeElement, (c) => this.cfg.set(c));
+    }
+    ngOnDestroy() {
+        this.engine.unobserve(this.bodyEl().nativeElement);
+        for (const id of this.popupIntervals) {
+            clearInterval(id);
+        }
+        this.popupIntervals.clear();
+    }
+    addWidget(type) {
+        this.workspace.addWidget(this.windowId(), type);
+    }
+    /** Create a new chromeless popup window containing a fresh WidgetWindow. */
+    openNewWindow(existingId) {
+        let winId;
+        if (existingId) {
+            // Reopening a previously closed window — set state back to 'open'.
+            this.workspace.setWindowState(existingId, 'open');
+            winId = existingId;
+        }
+        else {
+            const win = this.workspace.addWindow();
+            winId = win.id;
+        }
+        const win = this.workspace.windows().find((w) => w.id === winId);
+        const bounds = win?.bounds ?? { x: 100, y: 100, width: 1200, height: 800 };
+        const url = `${window.location.origin}/window/${winId}`;
+        const popup = window.open(url, `janus-win-${winId}`, `width=${bounds.width},height=${bounds.height},left=${bounds.x},top=${bounds.y}`);
+        if (!popup) {
+            // Popup blocked — remove the window since it can never be shown.
+            this.workspace.removeWindow(winId);
+            return;
+        }
+        // Poll for popup closure.
+        const interval = setInterval(() => {
+            if (popup.closed) {
+                this.closePopupWindow(winId);
+                clearInterval(interval);
+                this.popupIntervals.delete(interval);
+            }
+        }, 1000);
+        this.popupIntervals.add(interval);
+    }
+    /** Reopen a previously closed popup window. */
+    reopenWindow(windowId) {
+        this.openNewWindow(windowId);
+    }
+    /** Permanently discard a closed window and all its widgets. */
+    discardWindow(windowId) {
+        localStorage.removeItem(`janus-hb-${windowId}`);
+        this.workspace.removeWindow(windowId);
+    }
+    /** Reopen all previously closed popup windows at once. */
+    reopenAllClosed() {
+        for (const cw of this.closedWindows()) {
+            this.reopenWindow(cw.id);
+        }
+    }
+    /**
+     * Handle popup closure: discard empty windows, keep windows with content
+     * saved in localStorage (hidden from the main workspace).
+     */
+    closePopupWindow(windowId) {
+        const win = this.workspace.windows().find((w) => w.id === windowId);
+        if (!win)
+            return;
+        if (win.widgets.length === 0) {
+            this.workspace.removeWindow(windowId);
+        }
+        else {
+            this.workspace.setWindowState(windowId, 'closed');
+        }
+    }
+    // ---- title editing -------------------------------------------------------
+    onTitleFocus(event) {
+        this.editingTitle.set(true);
+        event.target.select();
+    }
+    onTitleEnter(event) {
+        event.target.blur();
+    }
+    onTitleBlur(event) {
+        this.editingTitle.set(false);
+        const input = event.target;
+        this.workspace.setWindowTitle(this.windowId(), input.value);
+    }
+    getMeta(type) {
+        return this.workspace.getWidgetMeta(type);
+    }
+    getRect(widgetId) {
+        return this.widgetRects().get(widgetId) ?? { left: 0, top: 0, width: 100, height: 100 };
+    }
+    onDragStart(event, w) {
+        // Only start drag from the widget's title bar, not from content or interactive children
+        const target = event.target;
+        if (!target?.closest('.widget-header') || target?.closest('button, input, select, a')) {
+            return;
+        }
+        event.preventDefault();
+        document.body.classList.add('gs-dragging');
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const startCol = w.gridX;
+        const startRow = w.gridY;
+        const id = w.id;
+        const winId = this.windowId();
+        const workspace = this.workspace;
+        const engine = this.engine;
+        const el = document.querySelector(`[data-wid="${id}"]`);
+        // Compute start position from grid coords, NOT from the DOM.
+        // DOM offsetLeft can be mid-transition (CSS transition: left 0.15s)
+        // and would give wrong values for a new drag started during animation.
+        const c0 = this.cfg();
+        const startRect = engine.rectToPixel(c0, startCol, startRow, w.gridCols, w.gridRows);
+        const startOffsetX = startRect.left;
+        const startOffsetY = startRect.top;
+        const onMove = (e) => {
+            // Track pixel-for-pixel during drag, snap only on release
+            const px = startOffsetX + (e.clientX - startX);
+            const py = startOffsetY + (e.clientY - startY);
+            if (el) {
+                el.style.left = `${px}px`;
+                el.style.top = `${py}px`;
+                el.style.zIndex = '1000';
+            }
+        };
+        const onUp = (e) => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            document.body.classList.remove('gs-dragging');
+            const c = this.cfg();
+            const px = startOffsetX + (e.clientX - startX);
+            const py = startOffsetY + (e.clientY - startY);
+            let { col, row } = engine.snapToGrid(c, px, py);
+            // Collision avoidance: push down past any overlapping widgets
+            const others = workspace.windows().find((win) => win.id === winId)?.widgets.filter((ow) => ow.id !== id) ?? [];
+            for (const ow of others) {
+                const colOverlap = col < ow.gridX + ow.gridCols && col + w.gridCols > ow.gridX;
+                const rowOverlap = row < ow.gridY + ow.gridRows && row + w.gridRows > ow.gridY;
+                if (colOverlap && rowOverlap) {
+                    row = Math.max(row, ow.gridY + ow.gridRows);
+                }
+            }
+            if (col !== startCol || row !== startRow) {
+                workspace.updateWidgetLayout(winId, id, { gridX: col, gridY: row });
+            }
+            // Set inline styles to the final snapped position so there's no
+            // visual gap before Angular re-renders. Angular bindings will
+            // confirm the same values on the next CD cycle.
+            const finalRect = engine.rectToPixel(c, col, row, w.gridCols, w.gridRows);
+            if (el) {
+                el.style.left = `${finalRect.left}px`;
+                el.style.top = `${finalRect.top}px`;
+                el.style.zIndex = '';
+            }
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }
+    onResizeStart(event, w) {
+        event.preventDefault();
+        event.stopPropagation();
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const startW = w.gridCols;
+        const startH = w.gridRows;
+        const id = w.id;
+        const winId = this.windowId();
+        const workspace = this.workspace;
+        const engine = this.engine;
+        const meta = workspace.getWidgetMeta(w.type) ?? { minCols: 2, minRows: 2 };
+        const onMove = (e) => {
+            const c = this.cfg();
+            const step = c.cellHeight + c.gap;
+            const dx = e.clientX - startX;
+            const dy = e.clientY - startY;
+            const pw = startW * step - c.gap + dx;
+            const ph = startH * step - c.gap + dy;
+            const { w: nw, h: nh } = engine.snapSize(c, pw, ph, meta.minCols, meta.minRows);
+            const rect = engine.rectToPixel(c, w.gridX, w.gridY, nw, nh);
+            const el = document.querySelector(`[data-wid="${id}"]`);
+            if (el) {
+                el.style.width = `${rect.width}px`;
+                el.style.height = `${rect.height}px`;
+            }
+        };
+        const onUp = (e) => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            const c = this.cfg();
+            const step = c.cellHeight + c.gap;
+            const dx = e.clientX - startX;
+            const dy = e.clientY - startY;
+            const pw = startW * step - c.gap + dx;
+            const ph = startH * step - c.gap + dy;
+            const { w: nw, h: nh } = engine.snapSize(c, pw, ph, meta.minCols, meta.minRows);
+            workspace.updateWidgetLayout(winId, id, { gridCols: nw, gridRows: nh });
+            // Set inline styles to the final snapped size so there's no visual gap
+            // before Angular re-renders.
+            const finalRect = engine.rectToPixel(c, w.gridX, w.gridY, nw, nh);
+            const el = document.querySelector(`[data-wid="${id}"]`);
+            if (el) {
+                el.style.width = `${finalRect.width}px`;
+                el.style.height = `${finalRect.height}px`;
+            }
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WidgetWindow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: WidgetWindow, isStandalone: true, selector: "janus-widget-window", inputs: { windowId: { classPropertyName: "windowId", publicName: "windowId", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "bodyEl", first: true, predicate: ["windowBody"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"widget-window\">\n  <header class=\"window-header\">\n    <input\n      class=\"window-title-input\"\n      type=\"text\"\n      [value]=\"windowTitle()\"\n      [style.width.px]=\"titleWidth()\"\n      (focus)=\"onTitleFocus($event)\"\n      (blur)=\"onTitleBlur($event)\"\n      (keydown.enter)=\"onTitleEnter($event)\"\n      spellcheck=\"false\"\n    />\n    <div class=\"window-controls\">\n      <div class=\"dropdown\">\n        <i\n          class=\"bi bi-display-fill window-action-icon dropdown-toggle\"\n          title=\"Windows\"\n          data-bs-toggle=\"dropdown\"\n          aria-expanded=\"false\"\n          role=\"button\"\n          tabindex=\"0\"\n        ></i>\n        <div class=\"dropdown-menu\">\n          <button class=\"dropdown-item\" type=\"button\" (click)=\"openNewWindow()\">\n            <i class=\"bi bi-plus-lg me-1\"></i> New empty window\n          </button>\n          @if (popupWindows().length) {\n            <div class=\"dropdown-divider\"></div>\n            @for (pw of popupWindows(); track pw.id) {\n              <div class=\"dropdown-item-row\">\n                @if (pw.state === 'open') {\n                  <span class=\"dropdown-item dropdown-item-grow disabled-text\">\n                    <i class=\"bi bi-circle-fill me-1 open-indicator\"></i>\n                    {{ pw.title }}\n                  </span>\n                } @else {\n                  <button\n                    class=\"dropdown-item dropdown-item-grow\"\n                    type=\"button\"\n                    (click)=\"reopenWindow(pw.id)\"\n                  >\n                    <i class=\"bi bi-arrow-clockwise me-1\"></i>\n                    {{ pw.title }}\n                  </button>\n                  <button\n                    class=\"dropdown-item-delete\"\n                    type=\"button\"\n                    title=\"Discard window permanently\"\n                    (click)=\"discardWindow(pw.id)\"\n                  >\n                    <i class=\"bi bi-trash3\"></i>\n                  </button>\n                }\n              </div>\n            }\n            @if (closedWindows().length > 1) {\n              <div class=\"dropdown-divider\"></div>\n              <button class=\"dropdown-item\" type=\"button\" (click)=\"reopenAllClosed()\">\n                <i class=\"bi bi-arrow-repeat me-1\"></i> Reopen all closed\n              </button>\n            }\n          }\n        </div>\n      </div>\n      <div class=\"dropdown\">\n\n\n        <i\n          class=\"bi bi-grid-1x2-fill window-action-icon dropdown-toggle\"\n          title=\"Add Widget\"\n          data-bs-toggle=\"dropdown\"\n          aria-expanded=\"false\"\n          role=\"button\"\n          tabindex=\"0\"\n        ></i>\n        <div class=\"dropdown-menu\">\n          @for (type of availableTypes(); track type; let i = $index) {\n            <button\n              class=\"dropdown-item\"\n              type=\"button\"\n              (click)=\"addWidget(type)\"\n            >\n              {{ availableLabels()[i] }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </header>\n\n  <div #windowBody class=\"window-body\"\n       [style.background-size]=\"gridBgSize()\"\n       [style.background-position]=\"gridBgPosition()\">\n    @for (w of widgets(); track w.id) {\n      <div\n        class=\"grid-item\"\n        [attr.data-wid]=\"w.id\"\n        [style.left.px]=\"getRect(w.id).left\"\n        [style.top.px]=\"getRect(w.id).top\"\n        [style.width.px]=\"getRect(w.id).width\"\n        [style.height.px]=\"getRect(w.id).height\"\n      >\n        <!-- Drag handle: mousedown triggers native drag -->\n        <div class=\"drag-handle\" (mousedown)=\"onDragStart($event, w)\">\n          <div class=\"grid-item-content\">\n            @if (getMeta(w.type); as meta) {\n              <ng-container\n                *ngComponentOutlet=\"\n                  meta.component;\n                  inputs: { widgetId: w.id, windowId: windowId(), meta: meta }\n                \"\n              />\n            }\n          </div>\n          <!-- Resize handle -->\n          <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, w)\"></div>\n        </div>\n      </div>\n    } @empty {\n      <div class=\"empty-state\">\n        <span class=\"empty-state-text\">\n          No widgets added. Click the\n          <i class=\"bi bi-grid-1x2-fill empty-state-icon\"></i>\n          &ldquo;Add Widget&rdquo; button to add widgets to this screen.\n        </span>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0}.widget-window{display:flex;flex-direction:column;height:100%;overflow:hidden;background-color:var(--bs-body-bg)}.window-header{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 8px;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color)}.window-title-input{display:inline-block;max-width:calc(100% - 80px);height:26px;padding:0 6px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--bs-body-color);font-size:14px;font-weight:500;line-height:26px;outline:none}.window-title-input:hover{border-color:var(--bs-border-color)}.window-title-input:focus{border-color:var(--bs-primary);background-color:var(--bs-body-bg)}.window-controls{display:flex;align-items:center;gap:4px}.window-action-icon{font-size:16px;cursor:pointer;color:var(--bs-secondary-color);line-height:1;padding:2px 4px;border-radius:3px;transition:color .2s ease}.window-action-icon:hover{color:var(--bs-body-color);background-color:var(--bs-secondary-bg)}.window-action-icon:after{display:none!important}.dropdown-menu{font-size:12px;min-width:220px}.dropdown-item-row{display:flex;align-items:stretch}.dropdown-item-grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item-delete{display:flex;align-items:center;justify-content:center;width:32px;padding:4px;border:none;background:none;color:var(--bs-secondary-color);cursor:pointer;font-size:13px;border-radius:0}.dropdown-item-delete:hover{color:var(--bs-danger);background-color:var(--bs-tertiary-bg)}.open-indicator{font-size:6px;color:var(--bs-success);vertical-align:middle}.dropdown-item-row .disabled-text{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bs-secondary-color);cursor:default;pointer-events:none}.window-body{flex:1;overflow:auto;position:relative;background-image:radial-gradient(circle at 0 0,rgba(128,128,128,.35) 1.2px,transparent 1.2px)}.empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.empty-state-text{font-size:14px;color:var(--bs-secondary-color);text-align:center;max-width:360px;line-height:1.5}.empty-state-icon{font-size:14px;vertical-align:-1px}.grid-item{position:absolute;transition:width .15s,height .15s}:host-context(body.gs-dragging) .grid-item{transition:none}.drag-handle{width:100%;height:100%}.drag-handle.dragging{z-index:1000;opacity:.9;box-shadow:0 4px 12px #0000004d}.grid-item-content{height:100%;background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:4px;overflow:auto}.resize-handle{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:se-resize;background:linear-gradient(135deg,transparent 50%,var(--bs-border-color) 50%);border-radius:0 0 4px;opacity:0;transition:opacity .15s}.grid-item:hover .resize-handle{opacity:1}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WidgetWindow, decorators: [{
+            type: Component,
+            args: [{ selector: 'janus-widget-window', imports: [NgComponentOutlet], template: "<div class=\"widget-window\">\n  <header class=\"window-header\">\n    <input\n      class=\"window-title-input\"\n      type=\"text\"\n      [value]=\"windowTitle()\"\n      [style.width.px]=\"titleWidth()\"\n      (focus)=\"onTitleFocus($event)\"\n      (blur)=\"onTitleBlur($event)\"\n      (keydown.enter)=\"onTitleEnter($event)\"\n      spellcheck=\"false\"\n    />\n    <div class=\"window-controls\">\n      <div class=\"dropdown\">\n        <i\n          class=\"bi bi-display-fill window-action-icon dropdown-toggle\"\n          title=\"Windows\"\n          data-bs-toggle=\"dropdown\"\n          aria-expanded=\"false\"\n          role=\"button\"\n          tabindex=\"0\"\n        ></i>\n        <div class=\"dropdown-menu\">\n          <button class=\"dropdown-item\" type=\"button\" (click)=\"openNewWindow()\">\n            <i class=\"bi bi-plus-lg me-1\"></i> New empty window\n          </button>\n          @if (popupWindows().length) {\n            <div class=\"dropdown-divider\"></div>\n            @for (pw of popupWindows(); track pw.id) {\n              <div class=\"dropdown-item-row\">\n                @if (pw.state === 'open') {\n                  <span class=\"dropdown-item dropdown-item-grow disabled-text\">\n                    <i class=\"bi bi-circle-fill me-1 open-indicator\"></i>\n                    {{ pw.title }}\n                  </span>\n                } @else {\n                  <button\n                    class=\"dropdown-item dropdown-item-grow\"\n                    type=\"button\"\n                    (click)=\"reopenWindow(pw.id)\"\n                  >\n                    <i class=\"bi bi-arrow-clockwise me-1\"></i>\n                    {{ pw.title }}\n                  </button>\n                  <button\n                    class=\"dropdown-item-delete\"\n                    type=\"button\"\n                    title=\"Discard window permanently\"\n                    (click)=\"discardWindow(pw.id)\"\n                  >\n                    <i class=\"bi bi-trash3\"></i>\n                  </button>\n                }\n              </div>\n            }\n            @if (closedWindows().length > 1) {\n              <div class=\"dropdown-divider\"></div>\n              <button class=\"dropdown-item\" type=\"button\" (click)=\"reopenAllClosed()\">\n                <i class=\"bi bi-arrow-repeat me-1\"></i> Reopen all closed\n              </button>\n            }\n          }\n        </div>\n      </div>\n      <div class=\"dropdown\">\n\n\n        <i\n          class=\"bi bi-grid-1x2-fill window-action-icon dropdown-toggle\"\n          title=\"Add Widget\"\n          data-bs-toggle=\"dropdown\"\n          aria-expanded=\"false\"\n          role=\"button\"\n          tabindex=\"0\"\n        ></i>\n        <div class=\"dropdown-menu\">\n          @for (type of availableTypes(); track type; let i = $index) {\n            <button\n              class=\"dropdown-item\"\n              type=\"button\"\n              (click)=\"addWidget(type)\"\n            >\n              {{ availableLabels()[i] }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </header>\n\n  <div #windowBody class=\"window-body\"\n       [style.background-size]=\"gridBgSize()\"\n       [style.background-position]=\"gridBgPosition()\">\n    @for (w of widgets(); track w.id) {\n      <div\n        class=\"grid-item\"\n        [attr.data-wid]=\"w.id\"\n        [style.left.px]=\"getRect(w.id).left\"\n        [style.top.px]=\"getRect(w.id).top\"\n        [style.width.px]=\"getRect(w.id).width\"\n        [style.height.px]=\"getRect(w.id).height\"\n      >\n        <!-- Drag handle: mousedown triggers native drag -->\n        <div class=\"drag-handle\" (mousedown)=\"onDragStart($event, w)\">\n          <div class=\"grid-item-content\">\n            @if (getMeta(w.type); as meta) {\n              <ng-container\n                *ngComponentOutlet=\"\n                  meta.component;\n                  inputs: { widgetId: w.id, windowId: windowId(), meta: meta }\n                \"\n              />\n            }\n          </div>\n          <!-- Resize handle -->\n          <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, w)\"></div>\n        </div>\n      </div>\n    } @empty {\n      <div class=\"empty-state\">\n        <span class=\"empty-state-text\">\n          No widgets added. Click the\n          <i class=\"bi bi-grid-1x2-fill empty-state-icon\"></i>\n          &ldquo;Add Widget&rdquo; button to add widgets to this screen.\n        </span>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0}.widget-window{display:flex;flex-direction:column;height:100%;overflow:hidden;background-color:var(--bs-body-bg)}.window-header{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 8px;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color)}.window-title-input{display:inline-block;max-width:calc(100% - 80px);height:26px;padding:0 6px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--bs-body-color);font-size:14px;font-weight:500;line-height:26px;outline:none}.window-title-input:hover{border-color:var(--bs-border-color)}.window-title-input:focus{border-color:var(--bs-primary);background-color:var(--bs-body-bg)}.window-controls{display:flex;align-items:center;gap:4px}.window-action-icon{font-size:16px;cursor:pointer;color:var(--bs-secondary-color);line-height:1;padding:2px 4px;border-radius:3px;transition:color .2s ease}.window-action-icon:hover{color:var(--bs-body-color);background-color:var(--bs-secondary-bg)}.window-action-icon:after{display:none!important}.dropdown-menu{font-size:12px;min-width:220px}.dropdown-item-row{display:flex;align-items:stretch}.dropdown-item-grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item-delete{display:flex;align-items:center;justify-content:center;width:32px;padding:4px;border:none;background:none;color:var(--bs-secondary-color);cursor:pointer;font-size:13px;border-radius:0}.dropdown-item-delete:hover{color:var(--bs-danger);background-color:var(--bs-tertiary-bg)}.open-indicator{font-size:6px;color:var(--bs-success);vertical-align:middle}.dropdown-item-row .disabled-text{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bs-secondary-color);cursor:default;pointer-events:none}.window-body{flex:1;overflow:auto;position:relative;background-image:radial-gradient(circle at 0 0,rgba(128,128,128,.35) 1.2px,transparent 1.2px)}.empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.empty-state-text{font-size:14px;color:var(--bs-secondary-color);text-align:center;max-width:360px;line-height:1.5}.empty-state-icon{font-size:14px;vertical-align:-1px}.grid-item{position:absolute;transition:width .15s,height .15s}:host-context(body.gs-dragging) .grid-item{transition:none}.drag-handle{width:100%;height:100%}.drag-handle.dragging{z-index:1000;opacity:.9;box-shadow:0 4px 12px #0000004d}.grid-item-content{height:100%;background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:4px;overflow:auto}.resize-handle{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:se-resize;background:linear-gradient(135deg,transparent 50%,var(--bs-border-color) 50%);border-radius:0 0 4px;opacity:0;transition:opacity .15s}.grid-item:hover .resize-handle{opacity:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { windowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "windowId", required: true }] }], bodyEl: [{ type: i0.ViewChild, args: ['windowBody', { isSignal: true }] }] } });
+
+const HB_PREFIX = 'janus-hb-';
+class WindowOutlet {
+    route = inject(ActivatedRoute);
+    windowId = '';
+    heartbeatInterval;
+    ngOnInit() {
+        this.windowId = this.route.snapshot.paramMap.get('windowId') ?? '';
+        // Heartbeat: write a timestamp to localStorage every 3 seconds.
+        // The main WorkspaceService detects stale heartbeats to know when
+        // this popup has truly closed (vs. just being refreshed).
+        const hbKey = HB_PREFIX + this.windowId;
+        localStorage.setItem(hbKey, Date.now().toString());
+        this.heartbeatInterval = setInterval(() => {
+            localStorage.setItem(hbKey, Date.now().toString());
+        }, 3000);
+    }
+    ngOnDestroy() {
+        if (this.heartbeatInterval) {
+            clearInterval(this.heartbeatInterval);
+        }
+        // Do NOT remove the heartbeat key — let it expire naturally (10 s).
+        // Removing it here races with closePopupWindow which sets the
+        // sessionStorage flag; the heartbeat checker could run in between
+        // and incorrectly undetach the window.
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WindowOutlet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: WindowOutlet, isStandalone: true, selector: "app-window-outlet", ngImport: i0, template: "@if (windowId) {\n  <janus-widget-window\n    class=\"full-window\"\n    [windowId]=\"windowId\"\n  />\n}\n", styles: [":host{display:block;width:100vw;height:100vh;overflow:hidden}.full-window{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: WidgetWindow, selector: "janus-widget-window", inputs: ["windowId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WindowOutlet, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-window-outlet', imports: [WidgetWindow], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (windowId) {\n  <janus-widget-window\n    class=\"full-window\"\n    [windowId]=\"windowId\"\n  />\n}\n", styles: [":host{display:block;width:100vw;height:100vh;overflow:hidden}.full-window{width:100%;height:100%}\n"] }]
+        }] });
+
+class Janusui {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: Janusui, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: Janusui, isStandalone: true, selector: "lib-janusui", ngImport: i0, template: `
+    <p>
+      janusui works!
+    </p>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: Janusui, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-janusui', imports: [], template: `
+    <p>
+      janusui works!
+    </p>
+  ` }]
+        }] });
+
+/*
+ * Public API Surface of janusui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COLOR_GROUPS, COLOR_GROUP_HEX, Janusui, LayoutEngine, SCREEN_WIDGET_API, ScreenWidgetBase, WIDGET_META, WidgetChromeComponent, WidgetLinkService, WidgetWindow, WindowOutlet, WorkspaceService, fmt, provideWidget };
+//# sourceMappingURL=janusui-janus-ui-library.mjs.map