@franzzemen/brokenstock-shell 0.4.5 → 0.4.6

package/fesm2022/franzzemen-brokenstock-shell.mjs

@@ -2777,12 +2777,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 +2809,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 {