@ng-prism/core 22.2.0 → 22.3.0

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

@@ -1,48 +1,81 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import { PrismIconComponent } from '../icons/prism-icon.component.js';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { CANVAS_BGS } from '../../shared/canvas-bg.type.js';
+import { VIEWPORT_SNAPS } from '../../shared/viewport.type.js';
+import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.value;
-function PrismCanvasToolbarComponent_For_17_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    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)); });
+function PrismCanvasToolbarComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r0.canvas.viewportWidth(), "px");
+} }
+function PrismCanvasToolbarComponent_For_20_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_20_Template_button_click_0_listener() { const bg_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setBg(bg_r3)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const bg_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    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));
+    const bg_r3 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("is-on", ctx_r0.variantBg.effective() === bg_r3)("is-rec", ctx_r0.variantBg.recommended() === bg_r3);
+    i0.ɵɵattribute("title", ctx_r0.bgTitle(bg_r3));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.capitalize(bg_r2), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.capitalize(bg_r3), " ");
 } }
-function PrismCanvasToolbarComponent_For_22_Template(rf, ctx) { if (rf & 1) {
+function PrismCanvasToolbarComponent_For_25_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    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.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_25_Template_button_click_0_listener() { const z_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.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("is-on", ctx_r2.canvas.zoom() === z_r5.value);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("is-on", ctx_r0.canvas.zoom() === z_r5.value);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", z_r5.label, " ");
 } }
+function PrismCanvasToolbarComponent_For_32_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_32_Template_button_click_0_listener() { const w_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.canvas.setViewportWidth(w_r7)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const w_r7 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("is-on", ctx_r0.canvas.viewportWidth() === w_r7);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", w_r7, " ");
+} }
 /**
  * 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
+ * The six 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.
+ * while working, 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 viewport is the sixth
+ * entry, and like zoom it does not stay on one side of that split — zoom
+ * already surfaces as a chooser in the menu and a readout on the rail, and the
+ * viewport surfaces the same way, as a toggle on the rail because switching the
+ * constraint on and off is something you do constantly, and a width chooser in
+ * the menu because the specific width is something you set once you have
+ * decided to constrain at all.
+ *
+ * Two numbers live on the rail as readouts, not one: the zoom percentage and
+ * the active viewport width are both things you read far more often than you
+ * set. They differ in permanence, not in kind — the zoom percentage never
+ * leaves, but the width is only there once the toggle above has switched the
+ * constraint on, so it takes a second line rather than a fixed one.
  *
  * 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
@@ -103,47 +136,70 @@ export class PrismCanvasToolbarComponent {
         { value: 0.75, label: '75%' },
         { value: 1, label: '100%' },
         { value: 1.5, label: '150%' },
-        { value: 2, label: '200%' },
+        { value: 2, label: '200%' }
     ];
+    /**
+     * The named widths, offered exactly the way the zoom chooser is.
+     *
+     * Plain numbers and no device names: this tool narrows a box and simulates
+     * nothing, so calling 390 "iPhone" would promise a fidelity it does not have.
+     */
+    viewports = VIEWPORT_SNAPS;
     capitalize(s) {
         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: 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) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasToolbarComponent, selectors: [["prism-canvas-toolbar"]], decls: 33, vars: 20, consts: [[1, "prism-toolrail"], [1, "prism-toolrail__zoom"], [1, "prism-toolrail__vp"], ["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", "title", "Toggle viewport width", "aria-label", "Toggle viewport width", 1, "prism-toolrail__btn", 3, "click"], ["name", "ruler-dimension", 3, "size"], ["type", "button", "popovertarget", "prism-tools", "title", "Canvas, zoom and width", "aria-label", "Canvas, zoom and width", 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, zoom and width", 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);
+            i0.ɵɵconditionalCreate(3, PrismCanvasToolbarComponent_Conditional_3_Template, 2, 1, "span", 2);
             i0.ɵɵelementEnd();
-            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.ɵɵelementStart(4, "button", 3);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_4_listener() { return ctx.canvas.toggleGuides(); });
+            i0.ɵɵelement(5, "prism-icon", 4);
             i0.ɵɵelementEnd();
-            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.ɵɵelementStart(6, "button", 5);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_6_listener() { return ctx.canvas.toggleRulers(); });
+            i0.ɵɵelement(7, "prism-icon", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "button", 6);
-            i0.ɵɵelement(8, "prism-icon", 7);
+            i0.ɵɵelementStart(8, "button", 7);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_8_listener() { return ctx.canvas.toggleViewport(); });
+            i0.ɵɵelement(9, "prism-icon", 8);
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(9, "span", 8);
             i0.ɵɵelementStart(10, "button", 9);
             i0.ɵɵelement(11, "prism-icon", 10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(12, "span", 11);
+            i0.ɵɵelementStart(13, "button", 12);
+            i0.ɵɵelement(14, "prism-icon", 13);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(12, "div", 11)(13, "span", 12);
-            i0.ɵɵtext(14, "Canvas");
+            i0.ɵɵelementStart(15, "div", 14)(16, "span", 15);
+            i0.ɵɵtext(17, "Canvas");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "div", 16);
+            i0.ɵɵrepeaterCreate(19, PrismCanvasToolbarComponent_For_20_Template, 2, 6, "button", 17, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "div", 13);
-            i0.ɵɵrepeaterCreate(16, PrismCanvasToolbarComponent_For_17_Template, 2, 6, "button", 14, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementStart(21, "span", 15);
+            i0.ɵɵtext(22, "Zoom");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "span", 12);
-            i0.ɵɵtext(19, "Zoom");
+            i0.ɵɵelementStart(23, "div", 16);
+            i0.ɵɵrepeaterCreate(24, PrismCanvasToolbarComponent_For_25_Template, 2, 3, "button", 18, _forTrack0);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(20, "div", 13);
-            i0.ɵɵrepeaterCreate(21, PrismCanvasToolbarComponent_For_22_Template, 2, 3, "button", 15, _forTrack0);
+            i0.ɵɵelementStart(26, "span", 15);
+            i0.ɵɵtext(27, "Width");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(28, "div", 16)(29, "button", 19);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_29_listener() { return ctx.canvas.setViewportWidth(null); });
+            i0.ɵɵtext(30, " Auto ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(31, PrismCanvasToolbarComponent_For_32_Template, 2, 3, "button", 18, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵclassProp("has-rulers", ctx.canvas.rulers());
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1("", ctx.Math.round(ctx.canvas.zoom() * 100), "%");
+            i0.ɵɵtextInterpolate1(" ", ctx.Math.round(ctx.canvas.zoom() * 100), "% ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.canvas.viewportWidth() !== null ? 3 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("is-on", ctx.canvas.guides());
             i0.ɵɵattribute("aria-pressed", ctx.canvas.guides());
@@ -154,6 +210,11 @@ export class PrismCanvasToolbarComponent {
             i0.ɵɵattribute("aria-pressed", ctx.canvas.rulers());
             i0.ɵɵadvance();
             i0.ɵɵproperty("size", 14);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("is-on", ctx.canvas.viewportWidth() !== null);
+            i0.ɵɵattribute("aria-pressed", ctx.canvas.viewportWidth() !== null);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("size", 14);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("size", 14);
             i0.ɵɵadvance(3);
@@ -162,105 +223,14 @@ export class PrismCanvasToolbarComponent {
             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    }"] });
+            i0.ɵɵadvance(5);
+            i0.ɵɵclassProp("is-on", ctx.canvas.viewportWidth() === null);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.viewports);
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: contents;\n}\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    gap: var(--%NS%sp-1);\n    align-items: center;\n    padding: var(--%NS%sp-2);\n    anchor-name: --prism-toolrail;\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: 0 4px 16px -6px rgb(0 0 0 / 40%);\n}\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    font-family: var(--%NS%font-mono);\n    font-size: 9px;\n    color: var(--%NS%prism-text-ghost);\n    text-align: center;\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n\n\n\n.prism-toolrail__vp[_ngcontent-%COMP%] {\n    display: block;\n    color: var(--%NS%prism-measure);\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    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--%NS%radius-xs);\n}\n\n.prism-toolrail__btn[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n}\n\n.prism-toolrail__btn[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.prism-toolrail__btn.is-on[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 18%, transparent);\n}\n\n.prism-toolrail__sep[_ngcontent-%COMP%] {\n    width: 14px;\n    height: 1px;\n    margin: var(--%NS%sp-1) 0;\n    background: var(--%NS%prism-border);\n}\n\n.prism-toolmenu[_ngcontent-%COMP%] {\n    inset: auto;\n    gap: var(--%NS%sp-2);\n    padding: var(--%NS%sp-3);\n    margin: 0;\n    margin-inline-end: var(--%NS%sp-2);\n    position-area: inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-inline;\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\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    color: var(--%NS%prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.prism-toolmenu__row[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--%NS%sp-1);\n}\n\n.prism-toolmenu__row[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    padding: 2px var(--%NS%sp-3);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text-2);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.prism-toolmenu__row[_ngcontent-%COMP%]   button.is-on[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\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}\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: `
-    <!-- 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
-        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]="14" />
-      </button>
-
-      <button
-        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]="14" />
-      </button>
-
-      <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
-        type="button"
-        class="prism-toolrail__btn"
-        popovertarget="prism-template"
-        title="Toggle Angular template"
-        aria-label="Toggle Angular template"
-      >
-        <prism-icon name="code" [size]="14" />
-      </button>
-    </div>
-
-    <!-- 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  "] }]
+        args: [{ selector: 'prism-canvas-toolbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<!-- Anchored in .prism-canvas-wrap, deliberately absolute and not fixed:\n     a viewport-fixed rail would float over the sidebar and the panel, stay\n     put while those are resized, and sit on top of running text in the API\n     view where it has no business being. -->\n<div\n    class=\"prism-toolrail\"\n    [class.has-rulers]=\"canvas.rulers()\">\n    <span class=\"prism-toolrail__zoom\">\n        {{ Math.round(canvas.zoom() * 100) }}%\n        @if (canvas.viewportWidth() !== null) {\n            <span class=\"prism-toolrail__vp\">{{ canvas.viewportWidth() }}px</span>\n        }\n    </span>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.guides()\"\n        (click)=\"canvas.toggleGuides()\"\n        title=\"Toggle guides\"\n        aria-label=\"Toggle guides\"\n        [attr.aria-pressed]=\"canvas.guides()\">\n        <prism-icon\n            name=\"crosshair\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.rulers()\"\n        (click)=\"canvas.toggleRulers()\"\n        title=\"Toggle rulers\"\n        aria-label=\"Toggle rulers\"\n        [attr.aria-pressed]=\"canvas.rulers()\">\n        <prism-icon\n            name=\"move\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        [class.is-on]=\"canvas.viewportWidth() !== null\"\n        (click)=\"canvas.toggleViewport()\"\n        title=\"Toggle viewport width\"\n        aria-label=\"Toggle viewport width\"\n        [attr.aria-pressed]=\"canvas.viewportWidth() !== null\">\n        <prism-icon\n            name=\"ruler-dimension\"\n            [size]=\"14\" />\n    </button>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        popovertarget=\"prism-tools\"\n        title=\"Canvas, zoom and width\"\n        aria-label=\"Canvas, zoom and width\">\n        <prism-icon\n            name=\"sliders-horizontal\"\n            [size]=\"14\" />\n    </button>\n\n    <span class=\"prism-toolrail__sep\"></span>\n\n    <button\n        type=\"button\"\n        class=\"prism-toolrail__btn\"\n        popovertarget=\"prism-template\"\n        title=\"Toggle Angular template\"\n        aria-label=\"Toggle Angular template\">\n        <prism-icon\n            name=\"code\"\n            [size]=\"14\" />\n    </button>\n</div>\n\n<!-- Only the three choosers. The toggles stay outside: you flip guides,\n     rulers and the viewport constraint constantly while working, and a\n     toggle two clicks deep is the classic mistake. What you only ever\n     set may live in a menu. -->\n<div\n    popover\n    id=\"prism-tools\"\n    class=\"prism-toolmenu\"\n    role=\"dialog\"\n    aria-label=\"Canvas, zoom and width\">\n    <span class=\"prism-toolmenu__lbl\">Canvas</span>\n    <div class=\"prism-toolmenu__row\">\n        @for (bg of bgs; track bg) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"variantBg.effective() === bg\"\n                [class.is-rec]=\"variantBg.recommended() === bg\"\n                [attr.title]=\"bgTitle(bg)\"\n                (click)=\"setBg(bg)\">\n                {{ capitalize(bg) }}\n            </button>\n        }\n    </div>\n\n    <span class=\"prism-toolmenu__lbl\">Zoom</span>\n    <div class=\"prism-toolmenu__row\">\n        @for (z of zooms; track z.value) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"canvas.zoom() === z.value\"\n                (click)=\"canvas.setZoom(z.value)\">\n                {{ z.label }}\n            </button>\n        }\n    </div>\n\n    <span class=\"prism-toolmenu__lbl\">Width</span>\n    <div class=\"prism-toolmenu__row\">\n        <button\n            type=\"button\"\n            [class.is-on]=\"canvas.viewportWidth() === null\"\n            (click)=\"canvas.setViewportWidth(null)\">\n            Auto\n        </button>\n        @for (w of viewports; track w) {\n            <button\n                type=\"button\"\n                [class.is-on]=\"canvas.viewportWidth() === w\"\n                (click)=\"canvas.setViewportWidth(w)\">\n                {{ w }}\n            </button>\n        }\n    </div>\n</div>\n", styles: [":host {\n    display: contents;\n}\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    gap: var(--sp-1);\n    align-items: center;\n    padding: var(--sp-2);\n    anchor-name: --prism-toolrail;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 4px 16px -6px rgb(0 0 0 / 40%);\n}\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    font-family: var(--font-mono);\n    font-size: 9px;\n    color: var(--prism-text-ghost);\n    text-align: center;\n    border-bottom: 1px solid var(--prism-border);\n}\n\n/* The one number on this rail that is not a percentage, so it takes the\n   measurement colour the theme already reserves for rulers and guides\n   rather than a second neutral that would read as a second zoom. */\n.prism-toolrail__vp {\n    display: block;\n    color: var(--prism-measure);\n}\n\n.prism-toolrail__btn {\n    display: grid;\n    place-items: center;\n    width: 26px;\n    height: 26px;\n    padding: 0;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--radius-xs);\n}\n\n.prism-toolrail__btn:hover {\n    color: var(--prism-text);\n}\n\n.prism-toolrail__btn:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.prism-toolrail__btn.is-on {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n}\n\n.prism-toolrail__sep {\n    width: 14px;\n    height: 1px;\n    margin: var(--sp-1) 0;\n    background: var(--prism-border);\n}\n\n.prism-toolmenu {\n    inset: auto;\n    gap: var(--sp-2);\n    padding: var(--sp-3);\n    margin: 0;\n    margin-inline-end: var(--sp-2);\n    position-area: inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-inline;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\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    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.prism-toolmenu__row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sp-1);\n}\n\n.prism-toolmenu__row button {\n    padding: 2px var(--sp-3);\n    font-size: var(--fs-md);\n    color: var(--prism-text-2);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n\n.prism-toolmenu__row button.is-on {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 16%, transparent);\n    border-color: color-mix(in srgb, var(--prism-primary) 38%, transparent);\n}\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: 251 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 44 }); })();

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":";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"}
+{"version":3,"file":"prism-template-popover.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-template-popover.component.ts"],"names":[],"mappings":";AAmCA,qBAQa,6BAA6B;IACtC,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,yCAgBvB;IAEH,SAAS,CAAC,QAAQ,CAAC,WAAW,yCAK3B;IAEH,SAAS,CAAC,IAAI,IAAI,IAAI;yCAhCb,6BAA6B;2CAA7B,6BAA6B;CAyCzC"}

package/dist/app/canvas/prism-template-popover.component.js

@@ -1,14 +1,14 @@
-import { Component, inject, computed, signal, ChangeDetectionStrategy, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
+import { generateSnippet } from '../renderer/snippet-generator.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismRendererService } from '../services/prism-renderer.service.js';
-import { generateSnippet } from '../renderer/snippet-generator.js';
 import * as i0 from "@angular/core";
 function esc(s) {
     return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 function tokenizeXml(code) {
-    const re = /(\/\/[^\n]*)|(<\/?[\w-]+)|(\[[\w.]+\]|[\w-]+)=|"([^"]*)"|(\/>|>)|(\n)|([^<\["\n/>=]+|[/=])/g;
+    const re = /(\/\/[^\n]*)|(<\/?[\w-]+)|(\[[\w.]+\]|[\w-]+)=|"([^"]*)"|(\/>|>)|(\n)|([^<["\n/>=]+|[/=])/g;
     let out = '';
     let m;
     while ((m = re.exec(code)) !== null) {
@@ -47,12 +47,8 @@ export class PrismTemplatePopoverComponent {
         if (!comp)
             return '';
         const variant = comp.meta.showcaseConfig.variants?.[this.rendererService.activeVariantIndex()];
-        const explicitKeys = variant?.inputs
-            ? new Set(Object.keys(variant.inputs))
-            : undefined;
-        const directiveOptions = comp.meta.componentMeta.isDirective
-            ? { host: comp.meta.showcaseConfig.host }
-            : undefined;
+        const explicitKeys = variant?.inputs ? new Set(Object.keys(variant.inputs)) : undefined;
+        const directiveOptions = comp.meta.componentMeta.isDirective ? { host: comp.meta.showcaseConfig.host } : undefined;
         return generateSnippet(comp.meta.componentMeta.selector, comp.meta.inputs, this.rendererService.inputValues(), explicitKeys, this.rendererService.activeContent(), directiveOptions);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "snippet" }] : /* istanbul ignore next */ []));
@@ -103,47 +99,10 @@ export class PrismTemplatePopoverComponent {
             i0.ɵɵproperty("size", 13);
             i0.ɵɵadvance();
             i0.ɵɵproperty("innerHTML", ctx.highlighted(), i0.ɵɵsanitizeHtml);
-        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: contents; }\n\n    \n\n\n\n\n\n    .tpl-popover[_ngcontent-%COMP%] {\n      width: 520px;\n      max-width: calc(100vw - var(--%NS%sp-6));\n      max-height: min(420px, calc(100vh - var(--%NS%sp-7)));\n      position-anchor: --prism-toolrail;\n      position-area: block-end span-inline-start;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n      margin: var(--%NS%sp-2) 0 0 0;\n      background: var(--%NS%prism-bg-elevated);\n      border: 1px solid var(--%NS%prism-border-strong);\n      border-radius: var(--%NS%radius-lg, 10px);\n      box-shadow:\n        0 20px 60px rgba(0, 0, 0, 0.45),\n        0 0 0 1px color-mix(in srgb, var(--%NS%prism-primary) 10%, transparent);\n      overflow: hidden;\n      animation: _ngcontent-%COMP%_tpl-fade-in var(--%NS%dur-fast, 0.15s) var(--%NS%ease-default, ease-out);\n    }\n\n    \n\n\n\n\n\n    .tpl-popover[_ngcontent-%COMP%]:popover-open {\n      display: flex;\n      flex-direction: column;\n    }\n\n    @keyframes _ngcontent-%COMP%_tpl-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(-8px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    .tpl-popover-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 12px 0 16px;\n      height: 40px;\n      border-bottom: 1px solid var(--%NS%prism-border);\n      background: linear-gradient(\n        180deg,\n        var(--%NS%prism-bg-surface),\n        var(--%NS%prism-bg-elevated)\n      );\n      flex-shrink: 0;\n    }\n    .tpl-popover-head[_ngcontent-%COMP%]    > prism-icon[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n    }\n    .tpl-popover-head[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n      flex: 1;\n      font-size: var(--%NS%fs-xs);\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--%NS%prism-text-2);\n    }\n\n    .tpl-popover-copy[_ngcontent-%COMP%] {\n      height: 26px;\n      padding: 0 10px;\n      font-size: var(--%NS%fs-sm);\n      font-family: var(--%NS%font-sans);\n      font-weight: 500;\n      color: var(--%NS%prism-primary);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n      border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n      border-radius: var(--%NS%radius-sm, 5px);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      cursor: pointer;\n      transition: background var(--%NS%dur-fast);\n    }\n    .tpl-popover-copy[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n    }\n\n    .tpl-popover-close[_ngcontent-%COMP%] {\n      width: 26px;\n      height: 26px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--%NS%radius-sm, 5px);\n      color: var(--%NS%prism-text-muted);\n      background: transparent;\n      border: 0;\n      cursor: pointer;\n      transition: background var(--%NS%dur-fast), color var(--%NS%dur-fast);\n    }\n    .tpl-popover-close[_ngcontent-%COMP%]:hover {\n      color: var(--%NS%prism-text);\n      background: var(--%NS%prism-input-bg);\n    }\n\n    .tpl-popover-body[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 14px 18px;\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-md);\n      line-height: 1.7;\n      color: var(--%NS%prism-text-2);\n      overflow: auto;\n      background: var(--%NS%prism-bg);\n      flex: 1;\n      min-height: 0;\n      white-space: pre;\n    }\n    .tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n    .tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n      background: var(--%NS%prism-border-strong);\n      border-radius: 3px;\n    }\n\n    [_nghost-%COMP%]     .tok-tag { color: var(--%NS%prism-code-tag); }\n    [_nghost-%COMP%]     .tok-attr { color: var(--%NS%prism-code-attr); }\n    [_nghost-%COMP%]     .tok-str { color: var(--%NS%prism-code-str); }\n    [_nghost-%COMP%]     .tok-com { color: var(--%NS%prism-code-com); font-style: italic; }"] });
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: contents;\n}\n\n\n\n\n\n\n\n.tpl-popover[_ngcontent-%COMP%] {\n    inset: auto;\n    width: 520px;\n    max-width: calc(100vw - var(--%NS%sp-6));\n    max-height: min(420px, calc(100vh - var(--%NS%sp-7)));\n    margin: var(--%NS%sp-2) 0 0 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-block, flip-inline;\n    overflow: hidden;\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-lg, 10px);\n    box-shadow:\n        0 20px 60px rgb(0 0 0 / 45%),\n        0 0 0 1px color-mix(in srgb, var(--%NS%prism-primary) 10%, transparent);\n    animation: _ngcontent-%COMP%_tpl-fade-in var(--%NS%dur-fast, 0.15s) var(--%NS%ease-default, ease-out);\n}\n\n\n\n\n\n\n\n.tpl-popover[_ngcontent-%COMP%]:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n@keyframes _ngcontent-%COMP%_tpl-fade-in {\n    from {\n        opacity: 0;\n        transform: translateY(-8px);\n    }\n\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.tpl-popover-head[_ngcontent-%COMP%] {\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    height: 40px;\n    padding: 0 12px 0 16px;\n    background: linear-gradient(180deg, var(--%NS%prism-bg-surface), var(--%NS%prism-bg-elevated));\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.tpl-popover-head[_ngcontent-%COMP%]    > prism-icon[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}\n\n.tpl-popover-head[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: var(--%NS%fs-xs);\n    font-weight: 700;\n    color: var(--%NS%prism-text-2);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.tpl-popover-copy[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 5px;\n    align-items: center;\n    height: 26px;\n    padding: 0 10px;\n    font-family: var(--%NS%font-sans);\n    font-size: var(--%NS%fs-sm);\n    font-weight: 500;\n    color: var(--%NS%prism-primary);\n    cursor: pointer;\n    background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n    border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n    border-radius: var(--%NS%radius-sm, 5px);\n    transition: background var(--%NS%dur-fast);\n}\n\n.tpl-popover-copy[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n}\n\n.tpl-popover-close[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    width: 26px;\n    height: 26px;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--%NS%radius-sm, 5px);\n    transition:\n        background var(--%NS%dur-fast),\n        color var(--%NS%dur-fast);\n}\n\n.tpl-popover-close[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-input-bg);\n}\n\n.tpl-popover-body[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    padding: 14px 18px;\n    margin: 0;\n    overflow: auto;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-md);\n    line-height: 1.7;\n    color: var(--%NS%prism-text-2);\n    white-space: pre;\n    background: var(--%NS%prism-bg);\n}\n\n.tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n}\n\n.tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--%NS%prism-border-strong);\n    border-radius: 3px;\n}\n\n[_nghost-%COMP%]     .tok-tag {\n    color: var(--%NS%prism-code-tag);\n}\n\n[_nghost-%COMP%]     .tok-attr {\n    color: var(--%NS%prism-code-attr);\n}\n\n[_nghost-%COMP%]     .tok-str {\n    color: var(--%NS%prism-code-str);\n}\n\n[_nghost-%COMP%]     .tok-com {\n    font-style: italic;\n    color: var(--%NS%prism-code-com);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismTemplatePopoverComponent, [{
         type: Component,
-        args: [{ selector: 'prism-template-popover', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
-    <!-- A native popover: the platform owns open, light-dismiss and Escape, so
-         there is no visibility signal, no document click listener and no key
-         handler here. The id is what the rail's button names in its
-         popovertarget. -->
-    <div
-      popover
-      id="prism-template"
-      class="tpl-popover"
-      role="dialog"
-      aria-label="Angular template"
-    >
-      <div class="tpl-popover-head">
-        <prism-icon name="code" [size]="13" />
-        <span>Angular Template</span>
-        <button
-          type="button"
-          class="tpl-popover-copy"
-          (click)="copy()"
-          [title]="copied() ? 'Copied!' : 'Copy to clipboard'"
-        >
-          <prism-icon [name]="copied() ? 'shield-check' : 'copy'" [size]="12" />
-          {{ copied() ? 'Copied' : 'Copy' }}
-        </button>
-        <button
-          type="button"
-          class="tpl-popover-close"
-          popovertarget="prism-template"
-          popovertargetaction="hide"
-          aria-label="Close"
-          title="Close (Esc)"
-        >
-          <prism-icon name="x" [size]="13" />
-        </button>
-      </div>
-      <pre class="tpl-popover-body" [innerHTML]="highlighted()"></pre>
-    </div>
-  `, styles: ["\n    :host { display: contents; }\n\n    /* No position of its own: a popover is in the top layer, where the\n       containing block is the viewport, so the old right/top pair against the\n       canvas would have parked this in the corner of the *window* and over the\n       header. It hangs off the rail instead, the same way the head popovers\n       hang off their triggers. Viewport units, not percentages \u2014 a percentage\n       here resolves against the position area, not the canvas. */\n    .tpl-popover {\n      width: 520px;\n      max-width: calc(100vw - var(--sp-6));\n      max-height: min(420px, calc(100vh - var(--sp-7)));\n      position-anchor: --prism-toolrail;\n      position-area: block-end span-inline-start;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n      margin: var(--sp-2) 0 0 0;\n      background: var(--prism-bg-elevated);\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--radius-lg, 10px);\n      box-shadow:\n        0 20px 60px rgba(0, 0, 0, 0.45),\n        0 0 0 1px color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      overflow: hidden;\n      animation: tpl-fade-in var(--dur-fast, 0.15s) var(--ease-default, ease-out);\n    }\n\n    /* display belongs on :popover-open and nowhere else. The UA stylesheet\n       hides a closed popover with [popover]:not(:popover-open) { display: none },\n       and any author display on the base rule outranks it \u2014 the panel then\n       shows permanently and neither Escape nor light-dismiss can hide it,\n       because closing only drops :popover-open and leaves the author rule\n       standing. */\n    .tpl-popover:popover-open {\n      display: flex;\n      flex-direction: column;\n    }\n\n    @keyframes tpl-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(-8px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    .tpl-popover-head {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 12px 0 16px;\n      height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n      background: linear-gradient(\n        180deg,\n        var(--prism-bg-surface),\n        var(--prism-bg-elevated)\n      );\n      flex-shrink: 0;\n    }\n    .tpl-popover-head > prism-icon {\n      color: var(--prism-text-muted);\n    }\n    .tpl-popover-head > span {\n      flex: 1;\n      font-size: var(--fs-xs);\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--prism-text-2);\n    }\n\n    .tpl-popover-copy {\n      height: 26px;\n      padding: 0 10px;\n      font-size: var(--fs-sm);\n      font-family: var(--font-sans);\n      font-weight: 500;\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      border-radius: var(--radius-sm, 5px);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      cursor: pointer;\n      transition: background var(--dur-fast);\n    }\n    .tpl-popover-copy:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .tpl-popover-close {\n      width: 26px;\n      height: 26px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--radius-sm, 5px);\n      color: var(--prism-text-muted);\n      background: transparent;\n      border: 0;\n      cursor: pointer;\n      transition: background var(--dur-fast), color var(--dur-fast);\n    }\n    .tpl-popover-close:hover {\n      color: var(--prism-text);\n      background: var(--prism-input-bg);\n    }\n\n    .tpl-popover-body {\n      margin: 0;\n      padding: 14px 18px;\n      font-family: var(--font-mono);\n      font-size: var(--fs-md);\n      line-height: 1.7;\n      color: var(--prism-text-2);\n      overflow: auto;\n      background: var(--prism-bg);\n      flex: 1;\n      min-height: 0;\n      white-space: pre;\n    }\n    .tpl-popover-body::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n    .tpl-popover-body::-webkit-scrollbar-thumb {\n      background: var(--prism-border-strong);\n      border-radius: 3px;\n    }\n\n    :host ::ng-deep .tok-tag { color: var(--prism-code-tag); }\n    :host ::ng-deep .tok-attr { color: var(--prism-code-attr); }\n    :host ::ng-deep .tok-str { color: var(--prism-code-str); }\n    :host ::ng-deep .tok-com { color: var(--prism-code-com); font-style: italic; }\n  "] }]
+        args: [{ selector: 'prism-template-popover', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<!-- A native popover: the platform owns open, light-dismiss and Escape, so\n     there is no visibility signal, no document click listener and no key\n     handler here. The id is what the rail's button names in its\n     popovertarget. -->\n<div\n    popover\n    id=\"prism-template\"\n    class=\"tpl-popover\"\n    role=\"dialog\"\n    aria-label=\"Angular template\">\n    <div class=\"tpl-popover-head\">\n        <prism-icon\n            name=\"code\"\n            [size]=\"13\" />\n        <span>Angular Template</span>\n        <button\n            type=\"button\"\n            class=\"tpl-popover-copy\"\n            (click)=\"copy()\"\n            [title]=\"copied() ? 'Copied!' : 'Copy to clipboard'\">\n            <prism-icon\n                [name]=\"copied() ? 'shield-check' : 'copy'\"\n                [size]=\"12\" />\n            {{ copied() ? 'Copied' : 'Copy' }}\n        </button>\n        <button\n            type=\"button\"\n            class=\"tpl-popover-close\"\n            popovertarget=\"prism-template\"\n            popovertargetaction=\"hide\"\n            aria-label=\"Close\"\n            title=\"Close (Esc)\">\n            <prism-icon\n                name=\"x\"\n                [size]=\"13\" />\n        </button>\n    </div>\n    <pre\n        class=\"tpl-popover-body\"\n        [innerHTML]=\"highlighted()\"></pre>\n</div>\n", styles: [":host {\n    display: contents;\n}\n\n/* No position of its own: a popover is in the top layer, where the\n   containing block is the viewport, so the old right/top pair against the\n   canvas would have parked this in the corner of the *window* and over the\n   header. It hangs off the rail instead, the same way the head popovers\n   hang off their triggers. Viewport units, not percentages \u2014 a percentage\n   here resolves against the position area, not the canvas. */\n.tpl-popover {\n    inset: auto;\n    width: 520px;\n    max-width: calc(100vw - var(--sp-6));\n    max-height: min(420px, calc(100vh - var(--sp-7)));\n    margin: var(--sp-2) 0 0 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-toolrail;\n    position-try-fallbacks: flip-block, flip-inline;\n    overflow: hidden;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-lg, 10px);\n    box-shadow:\n        0 20px 60px rgb(0 0 0 / 45%),\n        0 0 0 1px color-mix(in srgb, var(--prism-primary) 10%, transparent);\n    animation: tpl-fade-in var(--dur-fast, 0.15s) var(--ease-default, ease-out);\n}\n\n/* display belongs on :popover-open and nowhere else. The UA stylesheet\n   hides a closed popover with [popover]:not(:popover-open) { display: none },\n   and any author display on the base rule outranks it \u2014 the panel then\n   shows permanently and neither Escape nor light-dismiss can hide it,\n   because closing only drops :popover-open and leaves the author rule\n   standing. */\n.tpl-popover:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n\n@keyframes tpl-fade-in {\n    from {\n        opacity: 0;\n        transform: translateY(-8px);\n    }\n\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.tpl-popover-head {\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    height: 40px;\n    padding: 0 12px 0 16px;\n    background: linear-gradient(180deg, var(--prism-bg-surface), var(--prism-bg-elevated));\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.tpl-popover-head > prism-icon {\n    color: var(--prism-text-muted);\n}\n\n.tpl-popover-head > span {\n    flex: 1;\n    font-size: var(--fs-xs);\n    font-weight: 700;\n    color: var(--prism-text-2);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.tpl-popover-copy {\n    display: flex;\n    gap: 5px;\n    align-items: center;\n    height: 26px;\n    padding: 0 10px;\n    font-family: var(--font-sans);\n    font-size: var(--fs-sm);\n    font-weight: 500;\n    color: var(--prism-primary);\n    cursor: pointer;\n    background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n    border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n    border-radius: var(--radius-sm, 5px);\n    transition: background var(--dur-fast);\n}\n\n.tpl-popover-copy:hover {\n    background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n}\n\n.tpl-popover-close {\n    display: grid;\n    place-items: center;\n    width: 26px;\n    height: 26px;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--radius-sm, 5px);\n    transition:\n        background var(--dur-fast),\n        color var(--dur-fast);\n}\n\n.tpl-popover-close:hover {\n    color: var(--prism-text);\n    background: var(--prism-input-bg);\n}\n\n.tpl-popover-body {\n    flex: 1;\n    min-height: 0;\n    padding: 14px 18px;\n    margin: 0;\n    overflow: auto;\n    font-family: var(--font-mono);\n    font-size: var(--fs-md);\n    line-height: 1.7;\n    color: var(--prism-text-2);\n    white-space: pre;\n    background: var(--prism-bg);\n}\n\n.tpl-popover-body::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n}\n\n.tpl-popover-body::-webkit-scrollbar-thumb {\n    background: var(--prism-border-strong);\n    border-radius: 3px;\n}\n\n:host ::ng-deep .tok-tag {\n    color: var(--prism-code-tag);\n}\n\n:host ::ng-deep .tok-attr {\n    color: var(--prism-code-attr);\n}\n\n:host ::ng-deep .tok-str {\n    color: var(--prism-code-str);\n}\n\n:host ::ng-deep .tok-com {\n    font-style: italic;\n    color: var(--prism-code-com);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismTemplatePopoverComponent, { className: "PrismTemplatePopoverComponent", filePath: "app/canvas/prism-template-popover.component.ts", lineNumber: 226 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismTemplatePopoverComponent, { className: "PrismTemplatePopoverComponent", filePath: "app/canvas/prism-template-popover.component.ts", lineNumber: 44 }); })();

package/dist/app/canvas/viewport-snap.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `width`, pulled onto the nearest preset it comes within `tolerance` of.
+ *
+ * The tolerance is what makes a drag land on 390 instead of 388: without it,
+ * hitting a named width by hand is a game of pixels, and the presets in the
+ * menu would be the only way to reach them exactly. Outside the tolerance the
+ * width is returned untouched — searching for a breakpoint between the presets
+ * is the other half of what this tool is for, and a grid that always snapped
+ * would make that impossible.
+ */
+export declare function snapViewportWidth(width: number, snaps?: readonly number[], tolerance?: number): number;
+//# sourceMappingURL=viewport-snap.d.ts.map

package/dist/app/canvas/viewport-snap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport-snap.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/viewport-snap.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,GAAE,SAAS,MAAM,EAAmB,EAAE,SAAS,GAAE,MAAgC,GAAG,MAAM,CAc/I"}

package/dist/app/canvas/viewport-snap.js

@@ -0,0 +1,23 @@
+import { VIEWPORT_SNAP_TOLERANCE, VIEWPORT_SNAPS } from '../../shared/viewport.type.js';
+/**
+ * `width`, pulled onto the nearest preset it comes within `tolerance` of.
+ *
+ * The tolerance is what makes a drag land on 390 instead of 388: without it,
+ * hitting a named width by hand is a game of pixels, and the presets in the
+ * menu would be the only way to reach them exactly. Outside the tolerance the
+ * width is returned untouched — searching for a breakpoint between the presets
+ * is the other half of what this tool is for, and a grid that always snapped
+ * would make that impossible.
+ */
+export function snapViewportWidth(width, snaps = VIEWPORT_SNAPS, tolerance = VIEWPORT_SNAP_TOLERANCE) {
+    let best = null;
+    let bestDistance = Infinity;
+    for (const snap of snaps) {
+        const distance = Math.abs(snap - width);
+        if (distance <= tolerance && distance < bestDistance) {
+            best = snap;
+            bestDistance = distance;
+        }
+    }
+    return best ?? width;
+}

package/dist/app/component-head/head-metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"head-metrics.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/head-metrics.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,yDAAyD;AACzD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,sEAAsE;AACtE,MAAM,WAAW,YAAY;IAC3B,+DAA+D;IAC/D,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,wDAAwD;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;CACnC;AASD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,GAAG,YAAY,CAoB7E"}
+{"version":3,"file":"head-metrics.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/head-metrics.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,yDAAyD;AACzD,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC;CAC1B;AAED,sEAAsE;AACtE,MAAM,WAAW,YAAY;IACzB,+DAA+D;IAC/D,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,wDAAwD;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;CACrC;AASD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,GAAG,YAAY,CAoB7E"}

package/dist/app/component-head/head-metrics.js

@@ -2,7 +2,7 @@ const SEVERITY = {
     none: 0,
     ok: 0,
     warn: 1,
-    danger: 2,
+    danger: 2
 };
 /**
  * Folds the head's metrics into what one chip can say.
@@ -34,6 +34,6 @@ export function summarizeMetrics(metrics) {
         measured,
         worst,
         others: deviating > 0 ? deviating - 1 : 0,
-        variant: worst === null ? 'ok' : worst.variant,
+        variant: worst === null ? 'ok' : worst.variant
     };
 }

package/dist/app/component-head/prism-component-head.component.d.ts

@@ -1,5 +1,5 @@
-import type { HeadMetric } from './head-metrics.js';
 import type { ComponentStatus } from '../../decorator/showcase.types.js';
+import type { HeadMetric } from './head-metrics.js';
 import * as i0 from "@angular/core";
 interface StatusBadge {
     label: string;

package/dist/app/component-head/prism-component-head.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-component-head.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-component-head.component.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;;AAEzE,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAqBD,qBA6Ia,2BAA2B;IACtC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,mFAErB;IAEF,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAGxB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAG5B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8DAEvB;IAEF,SAAS,CAAC,QAAQ,CAAC,WAAW,qDAG3B;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,gDAM/B;IAkBH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAEzB;IAEH;;;;;;;OAOG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO;eACjB,MAAM;iBACJ,IAAI,GAAG,MAAM,GAAG,QAAQ;cAUhC;IAEH;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,+CAyBvB;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAM3B;yCArHQ,2BAA2B;2CAA3B,2BAA2B;CAsHvC"}
+{"version":3,"file":"prism-component-head.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-component-head.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;;AAIpD,UAAU,WAAW;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACnB;AAqBD,qBAQa,2BAA2B;IACpC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,mFAA4D;IAEnF,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAIxB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAI5B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8DAAwF;IAEjH,SAAS,CAAC,QAAQ,CAAC,WAAW,qDAI3B;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,gDAM/B;IAkBH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAEzB;IAEH;;;;;;;OAOG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO;eACf,MAAM;iBACJ,IAAI,GAAG,MAAM,GAAG,QAAQ;cAQlC;IAEH;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,+CAyBvB;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK3B;yCAjHM,2BAA2B;2CAA3B,2BAA2B;CAkHvC"}