@ng-prism/core 22.2.0-beta.5 → 22.2.1

package/dist/app/canvas/canvas-bg.styles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * What each `CanvasBg` value paints, shared by the Playground stage
+ * (`prism-renderer`) and the Overview cells (`prism-overview-cell`).
+ *
+ * Append this as the **last** entry of a component's `styles` array. The
+ * selectors are bare attribute selectors, so after Angular's encapsulation
+ * rewrite they carry the same specificity as the `.some-stage` class rule they
+ * have to override — source order is what decides, and only last place gets it
+ * right.
+ *
+ * The consuming element supplies its own `background-color`; `light` and `dark`
+ * override it, the rest leave it alone.
+ *
+ * Capture mode is unaffected by where these rules live: `CAPTURE_STYLES` in
+ * `prism-capture.service.ts` is a global stylesheet using `!important`, which
+ * beats any component-scoped rule regardless.
+ */
+export declare const CANVAS_BG_STYLES = "\n  [data-bg=\"dots\"] {\n    background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"] {\n    background-image: none;\n  }\n\n  /* Flat, not dotted. \"light\" and \"dark\" name a surface a component was\n     designed against \u2014 and they are the two backgrounds whose colour is\n     absolute rather than a theme token, which is what makes them the values\n     to declare for a screenshot baseline. \"dots\" already exists for anyone\n     who wants the grid. */\n  [data-bg=\"light\"] {\n    background-color: var(--prism-void-light, #f7f5fc);\n    background-image: none;\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n  }\n\n  /* \"transparent\" shares the checkerboard on purpose. The two say the same\n     thing in the two media the canvas has: while browsing, the checkerboard\n     is already the UI's word for \"no surface here\"; in a capture it becomes\n     literal transparency. A stage that were really see-through in the app\n     would just show the shell through the canvas, which means nothing. The\n     split between the two lives entirely in CAPTURE_STYLES. */\n  [data-bg=\"checker\"],\n  [data-bg=\"transparent\"] {\n    background-image:\n      linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n      linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n      linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n    background-size: 16px 16px;\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  }\n";
+//# sourceMappingURL=canvas-bg.styles.d.ts.map

package/dist/app/canvas/canvas-bg.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-bg.styles.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/canvas-bg.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,qrDAwC5B,CAAC"}

package/dist/app/canvas/canvas-bg.styles.js

@@ -0,0 +1,58 @@
+/**
+ * What each `CanvasBg` value paints, shared by the Playground stage
+ * (`prism-renderer`) and the Overview cells (`prism-overview-cell`).
+ *
+ * Append this as the **last** entry of a component's `styles` array. The
+ * selectors are bare attribute selectors, so after Angular's encapsulation
+ * rewrite they carry the same specificity as the `.some-stage` class rule they
+ * have to override — source order is what decides, and only last place gets it
+ * right.
+ *
+ * The consuming element supplies its own `background-color`; `light` and `dark`
+ * override it, the rest leave it alone.
+ *
+ * Capture mode is unaffected by where these rules live: `CAPTURE_STYLES` in
+ * `prism-capture.service.ts` is a global stylesheet using `!important`, which
+ * beats any component-scoped rule regardless.
+ */
+export const CANVAS_BG_STYLES = `
+  [data-bg="dots"] {
+    background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);
+    background-size: 20px 20px;
+  }
+
+  [data-bg="plain"] {
+    background-image: none;
+  }
+
+  /* Flat, not dotted. "light" and "dark" name a surface a component was
+     designed against — and they are the two backgrounds whose colour is
+     absolute rather than a theme token, which is what makes them the values
+     to declare for a screenshot baseline. "dots" already exists for anyone
+     who wants the grid. */
+  [data-bg="light"] {
+    background-color: var(--prism-void-light, #f7f5fc);
+    background-image: none;
+  }
+  [data-bg="dark"] {
+    background-color: var(--prism-void-dark, #07050f);
+    background-image: none;
+  }
+
+  /* "transparent" shares the checkerboard on purpose. The two say the same
+     thing in the two media the canvas has: while browsing, the checkerboard
+     is already the UI's word for "no surface here"; in a capture it becomes
+     literal transparency. A stage that were really see-through in the app
+     would just show the shell through the canvas, which means nothing. The
+     split between the two lives entirely in CAPTURE_STYLES. */
+  [data-bg="checker"],
+  [data-bg="transparent"] {
+    background-image:
+      linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);
+    background-size: 16px 16px;
+    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+  }
+`;

package/dist/app/canvas/prism-canvas-bg-pill.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas-bg-pill.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-bg-pill.component.ts"],"names":[],"mappings":";AAGA,qBAmEa,0BAA0B;IACrC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAE3D,SAAS,CAAC,QAAQ,CAAC,WAAW,gGAA8B;IAC5D,SAAS,CAAC,QAAQ,CAAC,OAAO,0CAA8B;IAExD,SAAS,CAAC,KAAK,IAAI,IAAI;yCANZ,0BAA0B;2CAA1B,0BAA0B;CAStC"}
+{"version":3,"file":"prism-canvas-bg-pill.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-bg-pill.component.ts"],"names":[],"mappings":";AAGA,qBAyEa,0BAA0B;IACrC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAE3D,SAAS,CAAC,QAAQ,CAAC,WAAW,gGAA8B;IAC5D,SAAS,CAAC,QAAQ,CAAC,OAAO,0CAA8B;IAExD,SAAS,CAAC,KAAK,IAAI,IAAI;yCANZ,0BAA0B;2CAA1B,0BAA0B;CAStC"}

package/dist/app/canvas/prism-canvas-bg-pill.component.js

@@ -27,7 +27,7 @@ export class PrismCanvasBgPillComponent {
             i0.ɵɵconditionalCreate(0, PrismCanvasBgPillComponent_Conditional_0_Template, 5, 1, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.visible() ? 0 : -1);
-        } }, styles: ["[_nghost-%COMP%] {\n      position: absolute;\n      top: var(--%NS%prism-canvas-overlay-top, 12px);\n      right: var(--%NS%prism-canvas-overlay-inline, 20px);\n      pointer-events: none;\n      z-index: 2;\n      transition: top var(--%NS%dur-base), right var(--%NS%dur-base);\n    }\n    .prism-bg-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 4px 4px 4px 10px;\n      border-radius: 999px;\n      font-size: var(--%NS%fs-xs);\n      font-family: var(--%NS%font-sans);\n      background: color-mix(in srgb, var(--%NS%prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--%NS%prism-border);\n      color: var(--%NS%prism-text-muted);\n      backdrop-filter: blur(8px);\n      pointer-events: auto;\n      animation: _ngcontent-%COMP%_fadeIn var(--%NS%dur-base) ease-out;\n    }\n    .label[_ngcontent-%COMP%] { letter-spacing: 0.02em; }\n    .reset[_ngcontent-%COMP%] {\n      height: 22px;\n      padding: 0 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n      color: var(--%NS%prism-text);\n      border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background var(--%NS%dur-fast);\n    }\n    .reset[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n    }\n    @keyframes _ngcontent-%COMP%_fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }"] });
+        } }, styles: ["\n\n\n\n\n\n    [_nghost-%COMP%] {\n      position: absolute;\n      top: var(--%NS%prism-canvas-overlay-top, 12px);\n      left: var(--%NS%prism-canvas-overlay-inline, 20px);\n      pointer-events: none;\n      z-index: 2;\n      transition: top var(--%NS%dur-base), left var(--%NS%dur-base);\n    }\n    .prism-bg-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 4px 4px 4px 10px;\n      border-radius: 999px;\n      font-size: var(--%NS%fs-xs);\n      font-family: var(--%NS%font-sans);\n      background: color-mix(in srgb, var(--%NS%prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--%NS%prism-border);\n      color: var(--%NS%prism-text-muted);\n      backdrop-filter: blur(8px);\n      pointer-events: auto;\n      animation: _ngcontent-%COMP%_fadeIn var(--%NS%dur-base) ease-out;\n    }\n    .label[_ngcontent-%COMP%] { letter-spacing: 0.02em; }\n    .reset[_ngcontent-%COMP%] {\n      height: 22px;\n      padding: 0 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n      color: var(--%NS%prism-text);\n      border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background var(--%NS%dur-fast);\n    }\n    .reset[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n    }\n    @keyframes _ngcontent-%COMP%_fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasBgPillComponent, [{
         type: Component,
@@ -46,6 +46,6 @@ export class PrismCanvasBgPillComponent {
       </button>
     </div>
     }
-  `, styles: ["\n    :host {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top, 12px);\n      right: var(--prism-canvas-overlay-inline, 20px);\n      pointer-events: none;\n      z-index: 2;\n      transition: top var(--dur-base), right var(--dur-base);\n    }\n    .prism-bg-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 4px 4px 4px 10px;\n      border-radius: 999px;\n      font-size: var(--fs-xs);\n      font-family: var(--font-sans);\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n      pointer-events: auto;\n      animation: fadeIn var(--dur-base) ease-out;\n    }\n    .label { letter-spacing: 0.02em; }\n    .reset {\n      height: 22px;\n      padding: 0 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background var(--dur-fast);\n    }\n    .reset:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n  "] }]
+  `, styles: ["\n    /* Top left, opposite the tool rail. Both used to claim the right corner and\n       the rail won, hiding a notice whose whole job is to be noticed. The rail\n       is permanent and the notice is not, so the permanent thing keeps the\n       corner it sits in and this moves. Nothing else occupies the left corner:\n       the zoom badge that used to live here was a duplicate of the readout the\n       rail carries. */\n    :host {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top, 12px);\n      left: var(--prism-canvas-overlay-inline, 20px);\n      pointer-events: none;\n      z-index: 2;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .prism-bg-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 4px 4px 4px 10px;\n      border-radius: 999px;\n      font-size: var(--fs-xs);\n      font-family: var(--font-sans);\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n      pointer-events: auto;\n      animation: fadeIn var(--dur-base) ease-out;\n    }\n    .label { letter-spacing: 0.02em; }\n    .reset {\n      height: 22px;\n      padding: 0 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background var(--dur-fast);\n    }\n    .reset:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasBgPillComponent, { className: "PrismCanvasBgPillComponent", filePath: "app/canvas/prism-canvas-bg-pill.component.ts", lineNumber: 71 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasBgPillComponent, { className: "PrismCanvasBgPillComponent", filePath: "app/canvas/prism-canvas-bg-pill.component.ts", lineNumber: 77 }); })();

package/dist/app/canvas/prism-canvas-toolbar.component.d.ts

@@ -1,22 +1,40 @@
 import { type CanvasBg } from '../../shared/canvas-bg.type.js';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
-import { PrismLayoutService } from '../services/prism-layout.service.js';
 import * as i0 from "@angular/core";
+/**
+ * The canvas tools, as a rail floating over the canvas instead of a band above
+ * it.
+ *
+ * The five entries were never one kind of control, and the split follows that
+ * rather than the topic: guides and rulers are toggles you flip constantly
+ * while measuring, so they toggle at their own button; canvas background and
+ * zoom are choosers you set once, so they move behind a menu; the template is a
+ * view rather than a setting and keeps its own button. The zoom *value* stays
+ * on the rail as a readout — it is the one number here you read far more often
+ * than you set.
+ *
+ * The host deliberately generates no box. The rail has to be a direct child of
+ * `.prism-canvas-wrap` that does not contain the stage, because that is exactly
+ * what capture mode's structural rule in `prism-capture.service.ts` suppresses;
+ * a rail nested inside the renderer or the stage would survive into every
+ * screenshot and silently corrupt visual-regression baselines.
+ */
 export declare class PrismCanvasToolbarComponent {
     protected readonly canvas: PrismCanvasService;
     protected readonly variantBg: PrismVariantBgService;
-    protected readonly layout: PrismLayoutService;
+    /** Angular templates resolve names against the component, not the global scope. */
+    protected readonly Math: Math;
     protected setBg(bg: CanvasBg): void;
     /**
      * Every {@link CanvasBg}, and the canonical list rather than a copy of it.
      *
      * This group is a readout as much as a control: the active button is
-     * `effective()` and the starred one is `recommended()`. A value missing here
-     * therefore cannot be *shown* either — a variant declaring it leaves the
-     * whole group with nothing active and the star with nowhere to sit. That is
-     * what a shorter list bought when `transparent` was left out of it, so the
-     * list is now the type's own.
+     * `effective()` and the recommended one carries the `is-rec` edge. A value
+     * missing here therefore cannot be *shown* either — a variant declaring it
+     * leaves the whole group with nothing active and the recommendation with
+     * nowhere to sit. That is what a shorter list bought when `transparent` was
+     * left out of it, so the list is now the type's own.
      *
      * `checker` and `transparent` do paint the same checkerboard here, which is
      * why they carry titles: the difference between them is what a capture does,

package/dist/app/canvas/prism-canvas-toolbar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAEzE,qBA2Ka,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IAEvD,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC;;;;;;;;;;;;;;;OAeG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,sBAAc;IAEpC,4EAA4E;IAC5E;;;;;OAKG;IACH,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI;IAY9C,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCAzD5B,2BAA2B;2CAA3B,2BAA2B;CA4DvC"}
+{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAEhF;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAkOa,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAE7D,mFAAmF;IACnF,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAE/B,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC;;;;;;;;;;;;;;;OAeG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,sBAAc;IAEpC,4EAA4E;IAC5E;;;;;OAKG;IACH,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI;IAY9C,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCA3D5B,2BAA2B;2CAA3B,2BAA2B;CA8DvC"}

package/dist/app/canvas/prism-canvas-toolbar.component.js

@@ -3,49 +3,58 @@ import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import { CANVAS_BGS } from '../../shared/canvas-bg.type.js';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
-import { PrismLayoutService } from '../services/prism-layout.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.value;
-function PrismCanvasToolbarComponent_For_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 14);
-    i0.ɵɵelement(1, "path", 15);
-    i0.ɵɵelementEnd();
-} }
-function PrismCanvasToolbarComponent_For_5_Template(rf, ctx) { if (rf & 1) {
+function PrismCanvasToolbarComponent_For_17_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 13);
-    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_5_Template_button_click_0_listener() { const bg_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setBg(bg_r2)); });
-    i0.ɵɵconditionalCreate(1, PrismCanvasToolbarComponent_For_5_Conditional_1_Template, 2, 0, ":svg:svg", 14);
-    i0.ɵɵtext(2);
+    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_17_Template_button_click_0_listener() { const bg_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setBg(bg_r2)); });
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const bg_r2 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("tool-btn--active", ctx_r2.variantBg.effective() === bg_r2)("tool-btn--recommended", ctx_r2.variantBg.recommended() === bg_r2);
+    i0.ɵɵclassProp("is-on", ctx_r2.variantBg.effective() === bg_r2)("is-rec", ctx_r2.variantBg.recommended() === bg_r2);
     i0.ɵɵattribute("title", ctx_r2.bgTitle(bg_r2));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.variantBg.recommended() === bg_r2 ? 1 : -1);
-    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.capitalize(bg_r2), " ");
 } }
-function PrismCanvasToolbarComponent_For_11_Template(rf, ctx) { if (rf & 1) {
+function PrismCanvasToolbarComponent_For_22_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 13);
-    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_11_Template_button_click_0_listener() { const z_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.canvas.setZoom(z_r5.value)); });
+    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_22_Template_button_click_0_listener() { const z_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.canvas.setZoom(z_r5.value)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const z_r5 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("tool-btn--active", ctx_r2.canvas.zoom() === z_r5.value);
+    i0.ɵɵclassProp("is-on", ctx_r2.canvas.zoom() === z_r5.value);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", z_r5.label, " ");
 } }
+/**
+ * The canvas tools, as a rail floating over the canvas instead of a band above
+ * it.
+ *
+ * The five entries were never one kind of control, and the split follows that
+ * rather than the topic: guides and rulers are toggles you flip constantly
+ * while measuring, so they toggle at their own button; canvas background and
+ * zoom are choosers you set once, so they move behind a menu; the template is a
+ * view rather than a setting and keeps its own button. The zoom *value* stays
+ * on the rail as a readout — it is the one number here you read far more often
+ * than you set.
+ *
+ * The host deliberately generates no box. The rail has to be a direct child of
+ * `.prism-canvas-wrap` that does not contain the stage, because that is exactly
+ * what capture mode's structural rule in `prism-capture.service.ts` suppresses;
+ * a rail nested inside the renderer or the stage would survive into every
+ * screenshot and silently corrupt visual-regression baselines.
+ */
 export class PrismCanvasToolbarComponent {
     canvas = inject(PrismCanvasService);
     variantBg = inject(PrismVariantBgService);
-    layout = inject(PrismLayoutService);
+    /** Angular templates resolve names against the component, not the global scope. */
+    Math = Math;
     setBg(bg) {
         if (this.variantBg.recommended() !== null) {
             this.variantBg.setOverride(bg);
@@ -58,11 +67,11 @@ export class PrismCanvasToolbarComponent {
      * Every {@link CanvasBg}, and the canonical list rather than a copy of it.
      *
      * This group is a readout as much as a control: the active button is
-     * `effective()` and the starred one is `recommended()`. A value missing here
-     * therefore cannot be *shown* either — a variant declaring it leaves the
-     * whole group with nothing active and the star with nowhere to sit. That is
-     * what a shorter list bought when `transparent` was left out of it, so the
-     * list is now the type's own.
+     * `effective()` and the recommended one carries the `is-rec` edge. A value
+     * missing here therefore cannot be *shown* either — a variant declaring it
+     * leaves the whole group with nothing active and the recommendation with
+     * nowhere to sit. That is what a shorter list bought when `transparent` was
+     * left out of it, so the list is now the type's own.
      *
      * `checker` and `transparent` do paint the same checkerboard here, which is
      * why they carry titles: the difference between them is what a capture does,
@@ -100,136 +109,158 @@ export class PrismCanvasToolbarComponent {
         return s.charAt(0).toUpperCase() + s.slice(1);
     }
     static ɵfac = function PrismCanvasToolbarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismCanvasToolbarComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasToolbarComponent, selectors: [["prism-canvas-toolbar"]], decls: 23, vars: 9, consts: [[1, "canvas-toolbar"], [1, "tool-label"], [1, "tool-group"], [1, "tool-btn", 3, "tool-btn--active", "tool-btn--recommended"], [1, "tool-sep"], [1, "tool-btn", 3, "tool-btn--active"], ["title", "Toggle guides", "aria-label", "Toggle guides", 1, "tool-btn", 3, "click"], ["name", "crosshair", 3, "size"], ["title", "Toggle rulers", "aria-label", "Toggle rulers", 1, "tool-btn", 3, "click"], ["name", "move", 3, "size"], [1, "tool-spacer"], ["title", "Toggle Angular template", "aria-label", "Toggle Angular template", 1, "tool-btn", "tool-btn--tpl", 3, "click"], ["name", "code", 3, "size"], [1, "tool-btn", 3, "click"], ["width", "11", "height", "11", "viewBox", "0 0 24 24", "fill", "#facc15", "aria-label", "Recommended", 1, "bg-star"], ["d", "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"]], template: function PrismCanvasToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasToolbarComponent, selectors: [["prism-canvas-toolbar"]], decls: 23, vars: 13, consts: [[1, "prism-toolrail"], [1, "prism-toolrail__zoom"], ["type", "button", "title", "Toggle guides", "aria-label", "Toggle guides", 1, "prism-toolrail__btn", 3, "click"], ["name", "crosshair", 3, "size"], ["type", "button", "title", "Toggle rulers", "aria-label", "Toggle rulers", 1, "prism-toolrail__btn", 3, "click"], ["name", "move", 3, "size"], ["type", "button", "popovertarget", "prism-tools", "title", "Canvas and zoom", "aria-label", "Canvas and zoom", 1, "prism-toolrail__btn"], ["name", "sliders-horizontal", 3, "size"], [1, "prism-toolrail__sep"], ["type", "button", "popovertarget", "prism-template", "title", "Toggle Angular template", "aria-label", "Toggle Angular template", 1, "prism-toolrail__btn"], ["name", "code", 3, "size"], ["popover", "", "id", "prism-tools", "role", "dialog", "aria-label", "Canvas and zoom", 1, "prism-toolmenu"], [1, "prism-toolmenu__lbl"], [1, "prism-toolmenu__row"], ["type", "button", 3, "is-on", "is-rec"], ["type", "button", 3, "is-on"], ["type", "button", 3, "click"]], template: function PrismCanvasToolbarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
-            i0.ɵɵtext(2, "Canvas");
+            i0.ɵɵtext(2);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "div", 2);
-            i0.ɵɵrepeaterCreate(4, PrismCanvasToolbarComponent_For_5_Template, 3, 7, "button", 3, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementStart(3, "button", 2);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_3_listener() { return ctx.canvas.toggleGuides(); });
+            i0.ɵɵelement(4, "prism-icon", 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(6, "div", 4);
-            i0.ɵɵelementStart(7, "span", 1);
-            i0.ɵɵtext(8, "Zoom");
+            i0.ɵɵelementStart(5, "button", 4);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_5_listener() { return ctx.canvas.toggleRulers(); });
+            i0.ɵɵelement(6, "prism-icon", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "div", 2);
-            i0.ɵɵrepeaterCreate(10, PrismCanvasToolbarComponent_For_11_Template, 2, 3, "button", 5, _forTrack0);
+            i0.ɵɵelementStart(7, "button", 6);
+            i0.ɵɵelement(8, "prism-icon", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(12, "div", 4);
-            i0.ɵɵelementStart(13, "button", 6);
-            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_13_listener() { return ctx.canvas.toggleGuides(); });
-            i0.ɵɵelement(14, "prism-icon", 7);
-            i0.ɵɵtext(15, " Guides ");
+            i0.ɵɵelement(9, "span", 8);
+            i0.ɵɵelementStart(10, "button", 9);
+            i0.ɵɵelement(11, "prism-icon", 10);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(12, "div", 11)(13, "span", 12);
+            i0.ɵɵtext(14, "Canvas");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(15, "div", 13);
+            i0.ɵɵrepeaterCreate(16, PrismCanvasToolbarComponent_For_17_Template, 2, 6, "button", 14, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "button", 8);
-            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_16_listener() { return ctx.canvas.toggleRulers(); });
-            i0.ɵɵelement(17, "prism-icon", 9);
-            i0.ɵɵtext(18, " Rulers ");
+            i0.ɵɵelementStart(18, "span", 12);
+            i0.ɵɵtext(19, "Zoom");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(19, "div", 10);
-            i0.ɵɵelementStart(20, "button", 11);
-            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_20_listener() { return ctx.layout.toggleTemplatePopover(); });
-            i0.ɵɵelement(21, "prism-icon", 12);
-            i0.ɵɵtext(22, " Template ");
+            i0.ɵɵelementStart(20, "div", 13);
+            i0.ɵɵrepeaterCreate(21, PrismCanvasToolbarComponent_For_22_Template, 2, 3, "button", 15, _forTrack0);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(4);
-            i0.ɵɵrepeater(ctx.bgs);
-            i0.ɵɵadvance(6);
-            i0.ɵɵrepeater(ctx.zooms);
-            i0.ɵɵadvance(3);
-            i0.ɵɵclassProp("tool-btn--active", ctx.canvas.guides());
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("size", 13);
+            i0.ɵɵclassProp("has-rulers", ctx.canvas.rulers());
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("tool-btn--active", ctx.canvas.rulers());
+            i0.ɵɵtextInterpolate1("", ctx.Math.round(ctx.canvas.zoom() * 100), "%");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("size", 13);
-            i0.ɵɵadvance(3);
-            i0.ɵɵclassProp("tool-btn--tpl-active", ctx.layout.templatePopoverVisible());
+            i0.ɵɵclassProp("is-on", ctx.canvas.guides());
+            i0.ɵɵattribute("aria-pressed", ctx.canvas.guides());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("size", 14);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("size", 13);
-        } }, dependencies: [PrismIconComponent], styles: [".canvas-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 20px;\n      border-bottom: 1px solid var(--%NS%prism-border);\n      background: var(--%NS%prism-bg);\n      min-height: 44px;\n    }\n\n    .tool-group[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 1px;\n      padding: 2px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: var(--%NS%radius-md);\n    }\n\n    .tool-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      padding: 0 9px;\n      border-radius: var(--%NS%radius-sm);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      font-size: var(--%NS%fs-sm);\n      color: var(--%NS%prism-text-muted);\n      transition: all var(--%NS%dur-fast);\n      font-weight: 500;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--%NS%font-sans);\n    }\n    .tool-btn[_ngcontent-%COMP%]:hover {\n      color: var(--%NS%prism-text);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n    }\n    .tool-btn--active[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 15%, transparent);\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n    }\n    .bg-star[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.4));\n    }\n\n    .tool-sep[_ngcontent-%COMP%] {\n      width: 1px;\n      height: 18px;\n      background: var(--%NS%prism-border);\n      margin: 0 4px;\n    }\n\n    .tool-label[_ngcontent-%COMP%] {\n      font-size: var(--%NS%fs-xs);\n      color: var(--%NS%prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n      margin-right: 2px;\n    }\n\n    .tool-spacer[_ngcontent-%COMP%] { flex: 1; }\n\n    .tool-btn--tpl[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-primary);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 10%, transparent);\n      border: 1px solid\n        color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n      font-family: var(--%NS%font-mono);\n    }\n    .tool-btn--%NS%tpl[_ngcontent-%COMP%]:hover {\n      color: var(--%NS%prism-primary);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 18%, transparent);\n    }\n    .tool-btn--tpl.tool-btn--tpl-active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 22%, transparent);\n      box-shadow: inset 0 0 0 1px\n        color-mix(in srgb, var(--%NS%prism-primary) 35%, transparent);\n    }"] });
+            i0.ɵɵclassProp("is-on", ctx.canvas.rulers());
+            i0.ɵɵattribute("aria-pressed", ctx.canvas.rulers());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("size", 14);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("size", 14);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("size", 14);
+            i0.ɵɵadvance(5);
+            i0.ɵɵrepeater(ctx.bgs);
+            i0.ɵɵadvance(5);
+            i0.ɵɵrepeater(ctx.zooms);
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: contents; }\n\n    \n\n\n\n\n\n\n\n\n\n\n\n    .prism-toolrail[_ngcontent-%COMP%] {\n      position: absolute;\n      top: var(--%NS%prism-canvas-overlay-top, 12px);\n      right: var(--%NS%prism-canvas-overlay-inline, 20px);\n      z-index: 5;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--%NS%sp-1);\n      padding: var(--%NS%sp-2);\n      border: 1px solid var(--%NS%prism-border-strong);\n      border-radius: var(--%NS%radius-md);\n      background: var(--%NS%prism-bg-elevated);\n      box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.4);\n      anchor-name: --prism-toolrail;\n    }\n    .prism-toolrail.has-rulers[_ngcontent-%COMP%] {\n      --%NS%prism-canvas-overlay-top: 28px;\n      --%NS%prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-toolrail__zoom[_ngcontent-%COMP%] {\n      width: 100%;\n      padding-bottom: var(--%NS%sp-1);\n      border-bottom: 1px solid var(--%NS%prism-border);\n      font-family: var(--%NS%font-mono);\n      font-size: 9px;\n      color: var(--%NS%prism-text-ghost);\n      text-align: center;\n    }\n\n    .prism-toolrail__btn[_ngcontent-%COMP%] {\n      display: grid;\n      place-items: center;\n      width: 26px;\n      height: 26px;\n      padding: 0;\n      border: 0;\n      border-radius: var(--%NS%radius-xs);\n      background: transparent;\n      color: var(--%NS%prism-text-muted);\n      cursor: pointer;\n    }\n    .prism-toolrail__btn[_ngcontent-%COMP%]:hover { color: var(--%NS%prism-text); }\n    .prism-toolrail__btn[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 1px;\n    }\n    .prism-toolrail__btn.is-on[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 18%, transparent);\n      color: var(--%NS%prism-text);\n    }\n    .prism-toolrail__sep[_ngcontent-%COMP%] {\n      width: 14px;\n      height: 1px;\n      background: var(--%NS%prism-border);\n      margin: var(--%NS%sp-1) 0;\n    }\n\n    .prism-toolmenu[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: var(--%NS%sp-3);\n      border: 1px solid var(--%NS%prism-border-strong);\n      border-radius: var(--%NS%radius-md);\n      background: var(--%NS%prism-bg-elevated);\n      box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);\n      gap: var(--%NS%sp-2);\n      position-anchor: --prism-toolrail;\n      position-area: inline-start;\n      position-try-fallbacks: flip-inline;\n      inset: auto;\n      margin-inline-end: var(--%NS%sp-2);\n    }\n\n    \n\n\n\n    .prism-toolmenu[_ngcontent-%COMP%]:popover-open {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .prism-toolmenu__lbl[_ngcontent-%COMP%] {\n      font-size: var(--%NS%fs-xs);\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--%NS%prism-text-ghost);\n    }\n    .prism-toolmenu__row[_ngcontent-%COMP%] { display: flex; flex-wrap: wrap; gap: var(--%NS%sp-1); }\n    .prism-toolmenu__row[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n      padding: 2px var(--%NS%sp-3);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: var(--%NS%radius-xs);\n      background: transparent;\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-text-2);\n      cursor: pointer;\n      white-space: nowrap;\n    }\n    .prism-toolmenu__row[_ngcontent-%COMP%]   button.is-on[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 16%, transparent);\n      border-color: color-mix(in srgb, var(--%NS%prism-primary) 38%, transparent);\n      color: var(--%NS%prism-text);\n    }\n    .prism-toolmenu__row[_ngcontent-%COMP%]   button.is-rec[_ngcontent-%COMP%] {\n      border-color: color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasToolbarComponent, [{
         type: Component,
         args: [{ selector: 'prism-canvas-toolbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
-    <div class="canvas-toolbar">
-      <span class="tool-label">Canvas</span>
-      <div class="tool-group">
-        @for (bg of bgs; track bg) {
-        <button
-          class="tool-btn"
-          [class.tool-btn--active]="variantBg.effective() === bg"
-          [class.tool-btn--recommended]="variantBg.recommended() === bg"
-          [attr.title]="bgTitle(bg)"
-          (click)="setBg(bg)"
-        >
-          @if (variantBg.recommended() === bg) {
-          <svg
-            class="bg-star"
-            width="11"
-            height="11"
-            viewBox="0 0 24 24"
-            fill="#facc15"
-            aria-label="Recommended"
-          >
-            <path
-              d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"
-            />
-          </svg>
-          }
-          {{ capitalize(bg) }}
-        </button>
-        }
-      </div>
-      <div class="tool-sep"></div>
-      <span class="tool-label">Zoom</span>
-      <div class="tool-group">
-        @for (z of zooms; track z.value) {
-        <button
-          class="tool-btn"
-          [class.tool-btn--active]="canvas.zoom() === z.value"
-          (click)="canvas.setZoom(z.value)"
-        >
-          {{ z.label }}
-        </button>
-        }
-      </div>
-      <div class="tool-sep"></div>
+    <!-- Anchored in .prism-canvas-wrap, deliberately absolute and not fixed:
+         a viewport-fixed rail would float over the sidebar and the panel, stay
+         put while those are resized, and sit on top of running text in the API
+         view where it has no business being. -->
+    <div class="prism-toolrail" [class.has-rulers]="canvas.rulers()">
+      <span class="prism-toolrail__zoom"
+        >{{ Math.round(canvas.zoom() * 100) }}%</span
+      >
+
       <button
-        class="tool-btn"
-        [class.tool-btn--active]="canvas.guides()"
+        type="button"
+        class="prism-toolrail__btn"
+        [class.is-on]="canvas.guides()"
         (click)="canvas.toggleGuides()"
         title="Toggle guides"
         aria-label="Toggle guides"
+        [attr.aria-pressed]="canvas.guides()"
       >
-        <prism-icon name="crosshair" [size]="13" />
-        Guides
+        <prism-icon name="crosshair" [size]="14" />
       </button>
+
       <button
-        class="tool-btn"
-        [class.tool-btn--active]="canvas.rulers()"
+        type="button"
+        class="prism-toolrail__btn"
+        [class.is-on]="canvas.rulers()"
         (click)="canvas.toggleRulers()"
         title="Toggle rulers"
         aria-label="Toggle rulers"
+        [attr.aria-pressed]="canvas.rulers()"
       >
-        <prism-icon name="move" [size]="13" />
-        Rulers
+        <prism-icon name="move" [size]="14" />
       </button>
 
-      <div class="tool-spacer"></div>
+      <button
+        type="button"
+        class="prism-toolrail__btn"
+        popovertarget="prism-tools"
+        title="Canvas and zoom"
+        aria-label="Canvas and zoom"
+      >
+        <prism-icon name="sliders-horizontal" [size]="14" />
+      </button>
+
+      <span class="prism-toolrail__sep"></span>
 
       <button
-        class="tool-btn tool-btn--tpl"
-        [class.tool-btn--tpl-active]="layout.templatePopoverVisible()"
-        (click)="layout.toggleTemplatePopover()"
+        type="button"
+        class="prism-toolrail__btn"
+        popovertarget="prism-template"
         title="Toggle Angular template"
         aria-label="Toggle Angular template"
       >
-        <prism-icon name="code" [size]="13" />
-        Template
+        <prism-icon name="code" [size]="14" />
       </button>
     </div>
-  `, styles: ["\n    .canvas-toolbar {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 20px;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg);\n      min-height: 44px;\n    }\n\n    .tool-group {\n      display: flex;\n      align-items: center;\n      gap: 1px;\n      padding: 2px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-md);\n    }\n\n    .tool-btn {\n      height: 24px;\n      padding: 0 9px;\n      border-radius: var(--radius-sm);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n      transition: all var(--dur-fast);\n      font-weight: 500;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .tool-btn:hover {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn--active {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n    .bg-star {\n      flex-shrink: 0;\n      filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.4));\n    }\n\n    .tool-sep {\n      width: 1px;\n      height: 18px;\n      background: var(--prism-border);\n      margin: 0 4px;\n    }\n\n    .tool-label {\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n      margin-right: 2px;\n    }\n\n    .tool-spacer { flex: 1; }\n\n    .tool-btn--tpl {\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: 1px solid\n        color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      font-family: var(--font-mono);\n    }\n    .tool-btn--tpl:hover {\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n    }\n    .tool-btn--tpl.tool-btn--tpl-active {\n      background: color-mix(in srgb, var(--prism-primary) 22%, transparent);\n      box-shadow: inset 0 0 0 1px\n        color-mix(in srgb, var(--prism-primary) 35%, transparent);\n    }\n  "] }]
+
+    <!-- Only the two choosers. The toggles stay outside: you flip guides and
+         rulers constantly while measuring, and a toggle two clicks deep is the
+         classic mistake. What you only ever set may live in a menu. -->
+    <div
+      popover
+      id="prism-tools"
+      class="prism-toolmenu"
+      role="dialog"
+      aria-label="Canvas and zoom"
+    >
+      <span class="prism-toolmenu__lbl">Canvas</span>
+      <div class="prism-toolmenu__row">
+        @for (bg of bgs; track bg) {
+        <button
+          type="button"
+          [class.is-on]="variantBg.effective() === bg"
+          [class.is-rec]="variantBg.recommended() === bg"
+          [attr.title]="bgTitle(bg)"
+          (click)="setBg(bg)"
+        >
+          {{ capitalize(bg) }}
+        </button>
+        }
+      </div>
+
+      <span class="prism-toolmenu__lbl">Zoom</span>
+      <div class="prism-toolmenu__row">
+        @for (z of zooms; track z.value) {
+        <button
+          type="button"
+          [class.is-on]="canvas.zoom() === z.value"
+          (click)="canvas.setZoom(z.value)"
+        >
+          {{ z.label }}
+        </button>
+        }
+      </div>
+    </div>
+  `, styles: ["\n    :host { display: contents; }\n\n    /* Canvas overlays sit at --prism-canvas-overlay-*, which the stage grows\n       when the rulers claim its top and left edges (see the\n       .prism-canvas-stage[data-rulers] rule in prism-renderer.component.ts).\n       prism-canvas-bg-pill simply inherits those; this rail cannot, because\n       capture mode requires it to be a direct child of .prism-canvas-wrap\n       outside the stage. So it mirrors the same values off canvas.rulers()\n       instead \u2014 keep the two in step.\n\n       z-index outranks the rulers' 4 rather than matching it: the rail is a\n       control and they are chrome, and the toolbar renders before the\n       renderer in the shell, so an equal z-index let the rulers paint over\n       the buttons. */\n    .prism-toolrail {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top, 12px);\n      right: var(--prism-canvas-overlay-inline, 20px);\n      z-index: 5;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--sp-1);\n      padding: var(--sp-2);\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--radius-md);\n      background: var(--prism-bg-elevated);\n      box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.4);\n      anchor-name: --prism-toolrail;\n    }\n    .prism-toolrail.has-rulers {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-toolrail__zoom {\n      width: 100%;\n      padding-bottom: var(--sp-1);\n      border-bottom: 1px solid var(--prism-border);\n      font-family: var(--font-mono);\n      font-size: 9px;\n      color: var(--prism-text-ghost);\n      text-align: center;\n    }\n\n    .prism-toolrail__btn {\n      display: grid;\n      place-items: center;\n      width: 26px;\n      height: 26px;\n      padding: 0;\n      border: 0;\n      border-radius: var(--radius-xs);\n      background: transparent;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n    }\n    .prism-toolrail__btn:hover { color: var(--prism-text); }\n    .prism-toolrail__btn:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 1px;\n    }\n    .prism-toolrail__btn.is-on {\n      background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n      color: var(--prism-text);\n    }\n    .prism-toolrail__sep {\n      width: 14px;\n      height: 1px;\n      background: var(--prism-border);\n      margin: var(--sp-1) 0;\n    }\n\n    .prism-toolmenu {\n      margin: 0;\n      padding: var(--sp-3);\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--radius-md);\n      background: var(--prism-bg-elevated);\n      box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);\n      gap: var(--sp-2);\n      position-anchor: --prism-toolrail;\n      position-area: inline-start;\n      position-try-fallbacks: flip-inline;\n      inset: auto;\n      margin-inline-end: var(--sp-2);\n    }\n\n    /* display belongs on :popover-open and nowhere else \u2014 see the note in\n       prism-template-popover.component.ts. An author display on the base\n       rule outranks the UA's [popover]:not(:popover-open) { display: none }\n       and pins the menu open. */\n    .prism-toolmenu:popover-open {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .prism-toolmenu__lbl {\n      font-size: var(--fs-xs);\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n    }\n    .prism-toolmenu__row { display: flex; flex-wrap: wrap; gap: var(--sp-1); }\n    .prism-toolmenu__row button {\n      padding: 2px var(--sp-3);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-xs);\n      background: transparent;\n      font-size: var(--fs-md);\n      color: var(--prism-text-2);\n      cursor: pointer;\n      white-space: nowrap;\n    }\n    .prism-toolmenu__row button.is-on {\n      background: color-mix(in srgb, var(--prism-primary) 16%, transparent);\n      border-color: color-mix(in srgb, var(--prism-primary) 38%, transparent);\n      color: var(--prism-text);\n    }\n    .prism-toolmenu__row button.is-rec {\n      border-color: color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 179 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 251 }); })();

package/dist/app/canvas/prism-template-popover.component.d.ts

@@ -1,15 +1,12 @@
-import { PrismLayoutService } from '../services/prism-layout.service.js';
 import * as i0 from "@angular/core";
 export declare class PrismTemplatePopoverComponent {
     private readonly navigationService;
     private readonly rendererService;
-    protected readonly layoutService: PrismLayoutService;
     protected readonly copied: import("@angular/core").WritableSignal<boolean>;
     private copiedResetTimer;
     protected readonly snippet: import("@angular/core").Signal<string>;
     protected readonly highlighted: import("@angular/core").Signal<string>;
     protected copy(): void;
-    protected onEscape(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismTemplatePopoverComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismTemplatePopoverComponent, "prism-template-popover", never, {}, {}, never, never, true, never>;
 }

package/dist/app/canvas/prism-template-popover.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-template-popover.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-template-popover.component.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAkCzE,qBAkKa,6BAA6B;IACxC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAE9D,SAAS,CAAC,QAAQ,CAAC,MAAM,kDAAiB;IAC1C,OAAO,CAAC,gBAAgB,CAA8C;IAEtE,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAqBvB;IAEH,SAAS,CAAC,QAAQ,CAAC,WAAW,yCAI3B;IAEH,SAAS,CAAC,IAAI,IAAI,IAAI;IAUtB,SAAS,CAAC,QAAQ,IAAI,IAAI;yCA/Cf,6BAA6B;2CAA7B,6BAA6B;CAoDzC"}
+{"version":3,"file":"prism-template-popover.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-template-popover.component.ts"],"names":[],"mappings":";AAyCA,qBAwLa,6BAA6B;IACxC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,SAAS,CAAC,QAAQ,CAAC,MAAM,kDAAiB;IAC1C,OAAO,CAAC,gBAAgB,CAA8C;IAEtE,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAqBvB;IAEH,SAAS,CAAC,QAAQ,CAAC,WAAW,yCAI3B;IAEH,SAAS,CAAC,IAAI,IAAI,IAAI;yCApCX,6BAA6B;2CAA7B,6BAA6B;CA4CzC"}