@franzzemen/brokenstock-shell 0.4.5 → 0.4.7

package/fesm2022/franzzemen-brokenstock-shell.mjs

@@ -2224,38 +2224,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-const STORAGE_KEY = 'shell.commandTerminalVisible';
+/**
+ * The choice a NEW window starts with. Shared by the whole browser.
+ * Written on every toggle, read only at construction.
+ */
+const DEFAULT_KEY = 'shell.commandTerminalVisible';
+/**
+ * THIS window's current choice. Per-window by definition, so two windows cannot
+ * fight over it.
+ */
+const WINDOW_KEY = 'shell.commandTerminalVisible.window';
 /**
  * Controls visibility of the command terminal at the bottom of the shell.
  *
- * State is a single signal, persisted to localStorage so the user's choice
- * survives reloads. The side-menu toggles it; the shell layout reads it to
- * collapse the terminal (and its resize handle) rows.
+ * ⚠ TWO KEYS, AND THE SPLIT IS THE POINT (multiple-windows F6).
+ *
+ * This used to be one `localStorage` value, read once at construction and
+ * written on every change, with nothing listening for another window. That was
+ * correct while the app could only be open once. It is not now: two windows
+ * would each write the shared value on every toggle, so whichever you touched
+ * last decided what BOTH windows got on their next start — a setting that
+ * quietly refuses to stay put, which reads as a bug in the shell rather than in
+ * storage.
+ *
+ * The resolution is not "make them agree". You genuinely may want the terminal
+ * up on the scanner window and out of the way on the other, so forcing them into
+ * step would be the wrong fix as well as a harder one. Instead:
+ *
+ *   - the LIVE state is per-window (`sessionStorage`), so the two never collide
+ *     and a reload still restores what this window had;
+ *   - the DEFAULT for a brand-new window is shared (`localStorage`), so your
+ *     last choice anywhere still carries into the next window and across a
+ *     browser restart, which is the behaviour the single key was providing.
+ *
+ * Both writes are best-effort: losing a remembered layout must never break the
+ * screen trying to remember it.
+ *
+ * ⚠ `visible` is READ-ONLY to the outside and `toggle()` is the only mutator.
+ * It used to be a writable signal persisted by an `effect`, which meant any
+ * caller could `set()` it — and whether that got remembered depended on an
+ * effect firing somewhere else. Persisting inside the one mutator makes it
+ * impossible to change this without persisting it.
  */
 class TerminalVisibilityService {
     constructor() {
-        this.visible = signal(this.#readInitial(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            const isVisible = this.visible();
-            try {
-                localStorage.setItem(STORAGE_KEY, isVisible ? '1' : '0');
-            }
-            catch {
-                // localStorage unavailable (private mode / SSR) — non-fatal.
-            }
-        });
+        this.#visible = signal(this.#readInitial(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#visible" }] : /* istanbul ignore next */ []));
+        /** Read-only on purpose — see the header. */
+        this.visible = this.#visible.asReadonly();
     }
+    #visible;
     toggle() {
-        this.visible.update(v => !v);
+        const next = !this.#visible();
+        this.#visible.set(next);
+        this.#write(sessionStorage, WINDOW_KEY, next);
+        this.#write(localStorage, DEFAULT_KEY, next);
     }
+    /**
+     * This window's own choice wins; otherwise the last choice made anywhere;
+     * otherwise visible.
+     *
+     * The order matters on a reload: a window that had hidden the terminal must
+     * not have it reappear because another window showed one since.
+     */
     #readInitial() {
+        const own = this.#read(sessionStorage, WINDOW_KEY);
+        if (own !== undefined)
+            return own;
+        const shared = this.#read(localStorage, DEFAULT_KEY);
+        return shared ?? true;
+    }
+    #read(store, key) {
         try {
-            const raw = localStorage.getItem(STORAGE_KEY);
-            return raw === null ? true : raw === '1';
+            const raw = store.getItem(key);
+            return raw === null ? undefined : raw === '1';
         }
         catch {
-            return true;
+            // Storage unavailable (private mode / prerender) — fall through.
+            return undefined;
+        }
+    }
+    #write(store, key, value) {
+        try {
+            store.setItem(key, value ? '1' : '0');
+        }
+        catch {
+            // Non-fatal by policy: a lost layout preference must not break the screen.
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TerminalVisibilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -2264,7 +2318,7 @@ class TerminalVisibilityService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TerminalVisibilityService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * Elements that mean "the user is typing", where an unmodified shortcut must not fire.
@@ -2777,12 +2831,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/** Roomy enough for the scanner beside a chart, small enough for a laptop. */
+const POP_OUT_WIDTH = 1280;
+const POP_OUT_HEIGHT = 900;
 class StatusBar {
     constructor() {
         this.#authService = inject(AuthenticationService);
         this.#focusService = inject(TerminalFocusService);
         this.#commandService = inject(CommandService);
+        this.#sharedSession = inject(SHELL_SHARED_SESSION, { optional: true }) ?? false;
         this.isAuthenticated = this.#authService.authenticated;
+        /**
+         * Whether a second window is offered at all (multiple-windows PRD D14).
+         *
+         * ⚠ GATED ON SHARED SESSIONS, and this is a correctness gate rather than a
+         * tidiness one. Without a session shared across windows, the new window starts
+         * with no token, goes to the login screen, and signing in there ends the
+         * session THIS window is using. A pop-out button in an app without sharing is
+         * a button that signs you out — the exact failure the multiple-windows work
+         * exists to remove.
+         */
+        this.canPopOut = computed(() => this.#sharedSession && this.isAuthenticated(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canPopOut" }] : /* istanbul ignore next */ []));
         this.loginStatus = computed(() => this.#authService.authenticating()
             ? 'Authenticating...'
             : this.#authService.authenticated()
@@ -2793,21 +2863,41 @@ class StatusBar {
     #authService;
     #focusService;
     #commandService;
+    #sharedSession;
     logout() {
         this.#authService.logout();
         this.#commandService.echoCommand('logout');
         this.#focusService.requestFocus();
     }
+    /**
+     * Open the screen you are on in a second, sized window.
+     *
+     * There is no mechanism by which this differs from the browser's own
+     * "Duplicate tab": every window is a separate copy of the app started at some
+     * address. It exists for the sizing and because it is discoverable — Ctrl+T,
+     * a bookmark and dragging a tab out all work equally well once the session is
+     * shared.
+     *
+     * `noopener` is deliberate. The new window needs nothing from this one — it
+     * reads the session from storage — and leaving the opener reachable would give
+     * two windows script access to each other for no purpose.
+     */
+    popOut() {
+        if (typeof window === 'undefined')
+            return;
+        window.open(window.location.href, '_blank', `noopener,noreferrer,width=${POP_OUT_WIDTH},height=${POP_OUT_HEIGHT}`);
+        this.#focusService.requestFocus();
+    }
     openFaq() {
         this.#commandService.execute('faq');
         this.#focusService.requestFocus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: StatusBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: StatusBar, isStandalone: true, selector: "shell-status-bar", ngImport: i0, template: "<div class=\"status-bar\">\n  <div class=\"status-item\">\n    <span class=\"status-label text-secondary-info\">Status:</span>\n    @if (isAuthenticated()) {\n      <a class=\"status-value text-interactive logout-link\" (click)=\"logout()\">Log Out</a>\n    } @else {\n      <span class=\"status-value text-loss\">{{ loginStatus() }}</span>\n    }\n  </div>\n  @if (isAuthenticated()) {\n    <ng-content />\n  }\n  <button\n    type=\"button\"\n    class=\"faq-button text-interactive\"\n    (click)=\"openFaq()\"\n    title=\"Open FAQ (or type `faq`)\"\n    aria-label=\"Open FAQ\"\n  >?</button>\n</div>\n", styles: [".status-bar{display:flex;align-items:center;gap:24px;padding:0 16px;height:100%;background-color:var(--color-surface);border-bottom:1px solid var(--color-surface-border);font-size:.8rem}.status-item{display:flex;align-items:baseline;gap:6px}.status-label{font-weight:500;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}.logout-link{cursor:pointer;text-decoration:underline}.logout-link:hover{opacity:.8}.faq-button{margin-left:auto;background:none;border:1px solid var(--color-surface-border);border-radius:50%;width:22px;height:22px;font-size:.85rem;font-weight:600;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.faq-button:hover{opacity:.8}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: StatusBar, isStandalone: true, selector: "shell-status-bar", ngImport: i0, template: "<div class=\"status-bar\">\n  <div class=\"status-item\">\n    <span class=\"status-label text-secondary-info\">Status:</span>\n    @if (isAuthenticated()) {\n      <a class=\"status-value text-interactive logout-link\" (click)=\"logout()\">Log Out</a>\n    } @else {\n      <span class=\"status-value text-loss\">{{ loginStatus() }}</span>\n    }\n  </div>\n  @if (isAuthenticated()) {\n    <ng-content />\n  }\n  @if (canPopOut()) {\n    <button\n      type=\"button\"\n      class=\"faq-button text-interactive\"\n      (click)=\"popOut()\"\n      title=\"Open this screen in a second window\"\n      aria-label=\"Open this screen in a second window\"\n    >\u29C9</button>\n  }\n  <button\n    type=\"button\"\n    class=\"faq-button text-interactive\"\n    (click)=\"openFaq()\"\n    title=\"Open FAQ (or type `faq`)\"\n    aria-label=\"Open FAQ\"\n  >?</button>\n</div>\n", styles: [".status-bar{display:flex;align-items:center;gap:24px;padding:0 16px;height:100%;background-color:var(--color-surface);border-bottom:1px solid var(--color-surface-border);font-size:.8rem}.status-item{display:flex;align-items:baseline;gap:6px}.status-label{font-weight:500;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}.logout-link{cursor:pointer;text-decoration:underline}.logout-link:hover{opacity:.8}.faq-button{margin-left:auto;background:none;border:1px solid var(--color-surface-border);border-radius:50%;width:22px;height:22px;font-size:.85rem;font-weight:600;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.faq-button:hover{opacity:.8}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: StatusBar, decorators: [{
             type: Component,
-            args: [{ selector: 'shell-status-bar', changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"status-bar\">\n  <div class=\"status-item\">\n    <span class=\"status-label text-secondary-info\">Status:</span>\n    @if (isAuthenticated()) {\n      <a class=\"status-value text-interactive logout-link\" (click)=\"logout()\">Log Out</a>\n    } @else {\n      <span class=\"status-value text-loss\">{{ loginStatus() }}</span>\n    }\n  </div>\n  @if (isAuthenticated()) {\n    <ng-content />\n  }\n  <button\n    type=\"button\"\n    class=\"faq-button text-interactive\"\n    (click)=\"openFaq()\"\n    title=\"Open FAQ (or type `faq`)\"\n    aria-label=\"Open FAQ\"\n  >?</button>\n</div>\n", styles: [".status-bar{display:flex;align-items:center;gap:24px;padding:0 16px;height:100%;background-color:var(--color-surface);border-bottom:1px solid var(--color-surface-border);font-size:.8rem}.status-item{display:flex;align-items:baseline;gap:6px}.status-label{font-weight:500;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}.logout-link{cursor:pointer;text-decoration:underline}.logout-link:hover{opacity:.8}.faq-button{margin-left:auto;background:none;border:1px solid var(--color-surface-border);border-radius:50%;width:22px;height:22px;font-size:.85rem;font-weight:600;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.faq-button:hover{opacity:.8}\n"] }]
+            args: [{ selector: 'shell-status-bar', changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"status-bar\">\n  <div class=\"status-item\">\n    <span class=\"status-label text-secondary-info\">Status:</span>\n    @if (isAuthenticated()) {\n      <a class=\"status-value text-interactive logout-link\" (click)=\"logout()\">Log Out</a>\n    } @else {\n      <span class=\"status-value text-loss\">{{ loginStatus() }}</span>\n    }\n  </div>\n  @if (isAuthenticated()) {\n    <ng-content />\n  }\n  @if (canPopOut()) {\n    <button\n      type=\"button\"\n      class=\"faq-button text-interactive\"\n      (click)=\"popOut()\"\n      title=\"Open this screen in a second window\"\n      aria-label=\"Open this screen in a second window\"\n    >\u29C9</button>\n  }\n  <button\n    type=\"button\"\n    class=\"faq-button text-interactive\"\n    (click)=\"openFaq()\"\n    title=\"Open FAQ (or type `faq`)\"\n    aria-label=\"Open FAQ\"\n  >?</button>\n</div>\n", styles: [".status-bar{display:flex;align-items:center;gap:24px;padding:0 16px;height:100%;background-color:var(--color-surface);border-bottom:1px solid var(--color-surface-border);font-size:.8rem}.status-item{display:flex;align-items:baseline;gap:6px}.status-label{font-weight:500;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}.logout-link{cursor:pointer;text-decoration:underline}.logout-link:hover{opacity:.8}.faq-button{margin-left:auto;background:none;border:1px solid var(--color-surface-border);border-radius:50%;width:22px;height:22px;font-size:.85rem;font-weight:600;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.faq-button:hover{opacity:.8}\n"] }]
         }] });
 
 class SideMenu {