@ng-prism/core 21.9.1 → 21.10.1

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class PrismCanvasBgPillComponent {
+    private readonly variantBg;
+    protected readonly recommended: import("@angular/core").Signal<import("../services/prism-canvas.service.js").CanvasBg | null>;
+    protected readonly visible: import("@angular/core").Signal<boolean>;
+    protected reset(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismCanvasBgPillComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismCanvasBgPillComponent, "prism-canvas-bg-pill", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-canvas-bg-pill.component.d.ts.map

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

@@ -0,0 +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,qBAkEa,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

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
+import * as i0 from "@angular/core";
+function PrismCanvasBgPillComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 0)(1, "span", 1);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "button", 2);
+    i0.ɵɵdomListener("click", function PrismCanvasBgPillComponent_Conditional_0_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.reset()); });
+    i0.ɵɵtext(4, " Reset ");
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Recommended: ", ctx_r1.recommended());
+} }
+export class PrismCanvasBgPillComponent {
+    variantBg = inject(PrismVariantBgService);
+    recommended = this.variantBg.recommended;
+    visible = this.variantBg.isDeviating;
+    reset() {
+        this.variantBg.clearOverride();
+    }
+    static ɵfac = function PrismCanvasBgPillComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismCanvasBgPillComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasBgPillComponent, selectors: [["prism-canvas-bg-pill"]], decls: 1, vars: 1, consts: [[1, "prism-bg-pill"], [1, "label"], ["type", "button", "title", "Reset to recommended background", "aria-label", "Reset to recommended background", 1, "reset", 3, "click"]], template: function PrismCanvasBgPillComponent_Template(rf, ctx) { if (rf & 1) {
+            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: 12px;\n      right: 20px;\n      pointer-events: none;\n      z-index: 2;\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(--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: _ngcontent-%COMP%_fadeIn var(--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(--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[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--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    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasBgPillComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-canvas-bg-pill', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (visible()) {
+    <div class="prism-bg-pill">
+      <span class="label">Recommended: {{ recommended() }}</span>
+      <button
+        type="button"
+        class="reset"
+        title="Reset to recommended background"
+        aria-label="Reset to recommended background"
+        (click)="reset()"
+      >
+        Reset
+      </button>
+    </div>
+    }
+  `, styles: ["\n    :host {\n      position: absolute;\n      top: 12px;\n      right: 20px;\n      pointer-events: none;\n      z-index: 2;\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: 70 }); })();

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

@@ -1,7 +1,12 @@
 import { PrismCanvasService, type CanvasBg } 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";
 export declare class PrismCanvasToolbarComponent {
     protected readonly canvas: PrismCanvasService;
+    protected readonly variantBg: PrismVariantBgService;
+    protected readonly layout: PrismLayoutService;
+    protected setBg(bg: CanvasBg): void;
     protected readonly bgs: CanvasBg[];
     protected readonly zooms: {
         value: number;

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,EACL,kBAAkB,EAClB,KAAK,QAAQ,EACd,MAAM,qCAAqC,CAAC;;AAE7C,qBAwHa,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IAEvD,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,CAMhC;IACF,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCAjB5B,2BAA2B;2CAA3B,2BAA2B;CAoBvC"}
+{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,kBAAkB,EAClB,KAAK,QAAQ,EACd,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAEzE,qBA+Ka,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,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,CAMhC;IACF,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCA3B5B,2BAA2B;2CAA3B,2BAA2B;CA8BvC"}

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

@@ -1,24 +1,36 @@
 import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 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 { 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) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 9);
-    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.canvas.setBg(bg_r2)); });
-    i0.ɵɵtext(1);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
     const bg_r2 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("tool-btn--active", ctx_r2.canvas.bg() === bg_r2);
+    i0.ɵɵclassProp("tool-btn--active", ctx_r2.variantBg.effective() === bg_r2)("tool-btn--recommended", ctx_r2.variantBg.recommended() === bg_r2);
+    i0.ɵɵproperty("title", ctx_r2.variantBg.recommended() === bg_r2 ? "Recommended background for this variant" : null);
+    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) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 9);
+    i0.ɵɵelementStart(0, "button", 16);
     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.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -31,6 +43,16 @@ function PrismCanvasToolbarComponent_For_11_Template(rf, ctx) { if (rf & 1) {
 } }
 export class PrismCanvasToolbarComponent {
     canvas = inject(PrismCanvasService);
+    variantBg = inject(PrismVariantBgService);
+    layout = inject(PrismLayoutService);
+    setBg(bg) {
+        if (this.variantBg.recommended() !== null) {
+            this.variantBg.setOverride(bg);
+        }
+        else {
+            this.canvas.setBg(bg);
+        }
+    }
     bgs = [
         'dots',
         'plain',
@@ -48,30 +70,36 @@ 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: 19, vars: 6, consts: [[1, "canvas-toolbar"], [1, "tool-label"], [1, "tool-group"], [1, "tool-btn", 3, "tool-btn--active"], [1, "tool-sep"], ["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-btn", 3, "click"]], template: function PrismCanvasToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+    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", "title"], [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", "title"], ["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"], [1, "tool-btn", 3, "click"]], template: function PrismCanvasToolbarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
             i0.ɵɵtext(2, "Canvas");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(3, "div", 2);
-            i0.ɵɵrepeaterCreate(4, PrismCanvasToolbarComponent_For_5_Template, 2, 3, "button", 3, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵrepeaterCreate(4, PrismCanvasToolbarComponent_For_5_Template, 3, 7, "button", 3, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd();
             i0.ɵɵelement(6, "div", 4);
             i0.ɵɵelementStart(7, "span", 1);
             i0.ɵɵtext(8, "Zoom");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(9, "div", 2);
-            i0.ɵɵrepeaterCreate(10, PrismCanvasToolbarComponent_For_11_Template, 2, 3, "button", 3, _forTrack0);
+            i0.ɵɵrepeaterCreate(10, PrismCanvasToolbarComponent_For_11_Template, 2, 3, "button", 5, _forTrack0);
             i0.ɵɵelementEnd();
             i0.ɵɵelement(12, "div", 4);
-            i0.ɵɵelementStart(13, "button", 5);
+            i0.ɵɵelementStart(13, "button", 6);
             i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_13_listener() { return ctx.canvas.toggleGuides(); });
-            i0.ɵɵelement(14, "prism-icon", 6);
+            i0.ɵɵelement(14, "prism-icon", 7);
             i0.ɵɵtext(15, " Guides ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "button", 7);
+            i0.ɵɵelementStart(16, "button", 8);
             i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_16_listener() { return ctx.canvas.toggleRulers(); });
-            i0.ɵɵelement(17, "prism-icon", 8);
+            i0.ɵɵelement(17, "prism-icon", 9);
             i0.ɵɵtext(18, " Rulers ");
+            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.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(4);
@@ -86,7 +114,11 @@ export class PrismCanvasToolbarComponent {
             i0.ɵɵclassProp("tool-btn--active", ctx.canvas.rulers());
             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(--prism-border);\n      background: var(--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(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-md);\n    }\n\n    .tool-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn--active[_ngcontent-%COMP%] {\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\n    .tool-sep[_ngcontent-%COMP%] {\n      width: 1px;\n      height: 18px;\n      background: var(--prism-border);\n      margin: 0 4px;\n    }\n\n    .tool-label[_ngcontent-%COMP%] {\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    }"], changeDetection: 0 });
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("tool-btn--tpl-active", ctx.layout.templatePopoverVisible());
+            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(--prism-border);\n      background: var(--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(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-md);\n    }\n\n    .tool-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn--active[_ngcontent-%COMP%] {\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[_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(--prism-border);\n      margin: 0 4px;\n    }\n\n    .tool-label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] { flex: 1; }\n\n    .tool-btn--tpl[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasToolbarComponent, [{
         type: Component,
@@ -97,9 +129,29 @@ export class PrismCanvasToolbarComponent {
         @for (bg of bgs; track bg) {
         <button
           class="tool-btn"
-          [class.tool-btn--active]="canvas.bg() === bg"
-          (click)="canvas.setBg(bg)"
+          [class.tool-btn--active]="variantBg.effective() === bg"
+          [class.tool-btn--recommended]="variantBg.recommended() === bg"
+          [title]="
+            variantBg.recommended() === bg
+              ? 'Recommended background for this variant'
+              : null
+          "
+          (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>
         }
@@ -138,7 +190,20 @@ export class PrismCanvasToolbarComponent {
         <prism-icon name="move" [size]="13" />
         Rulers
       </button>
+
+      <div class="tool-spacer"></div>
+
+      <button
+        class="tool-btn tool-btn--tpl"
+        [class.tool-btn--tpl-active]="layout.templatePopoverVisible()"
+        (click)="layout.toggleTemplatePopover()"
+        title="Toggle Angular template"
+        aria-label="Toggle Angular template"
+      >
+        <prism-icon name="code" [size]="13" />
+        Template
+      </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\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  "] }]
+  `, 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  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 128 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 185 }); })();

package/dist/app/canvas/prism-code-drawer.component.d.ts

@@ -1,7 +1,9 @@
+import { PrismLayoutService } from '../services/prism-layout.service.js';
 import * as i0 from "@angular/core";
 export declare class PrismCodeDrawerComponent {
     private readonly navigationService;
     private readonly rendererService;
+    protected readonly layoutService: PrismLayoutService;
     protected readonly collapsed: import("@angular/core").WritableSignal<boolean>;
     protected readonly snippet: import("@angular/core").Signal<string>;
     protected readonly highlighted: import("@angular/core").Signal<string>;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-code-drawer.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-code-drawer.component.ts"],"names":[],"mappings":";AAyCA,qBAuGa,wBAAwB;IACnC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,SAAS,CAAC,QAAQ,CAAC,SAAS,kDAAiB;IAE7C,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAqBvB;IAEH,SAAS,CAAC,QAAQ,CAAC,WAAW,yCAI3B;IAEH,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;yCAnCxB,wBAAwB;2CAAxB,wBAAwB;CAwCpC"}
+{"version":3,"file":"prism-code-drawer.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-code-drawer.component.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAkCzE,qBAuGa,wBAAwB;IACnC,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,SAAS,kDAA0C;IAEtE,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAqBvB;IAEH,SAAS,CAAC,QAAQ,CAAC,WAAW,yCAI3B;IAEH,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;yCApCxB,wBAAwB;2CAAxB,wBAAwB;CAyCpC"}

package/dist/app/canvas/prism-code-drawer.component.js

@@ -1,5 +1,6 @@
-import { Component, inject, computed, signal, ChangeDetectionStrategy, } from '@angular/core';
+import { Component, inject, computed, ChangeDetectionStrategy, } from '@angular/core';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
+import { PrismLayoutService } from '../services/prism-layout.service.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismRendererService } from '../services/prism-renderer.service.js';
 import { generateSnippet } from '../renderer/snippet-generator.js';
@@ -39,7 +40,8 @@ function tokenizeXml(code) {
 export class PrismCodeDrawerComponent {
     navigationService = inject(PrismNavigationService);
     rendererService = inject(PrismRendererService);
-    collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    layoutService = inject(PrismLayoutService);
+    collapsed = this.layoutService.codeDrawerCollapsed;
     snippet = computed(() => {
         const comp = this.navigationService.activeComponent();
         if (!comp)
@@ -68,7 +70,7 @@ export class PrismCodeDrawerComponent {
     static ɵfac = function PrismCodeDrawerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismCodeDrawerComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCodeDrawerComponent, selectors: [["prism-code-drawer"]], decls: 11, vars: 6, consts: [[1, "code-drawer"], [1, "code-head", 3, "click"], ["name", "chevron-down", 1, "chev", 3, "size"], ["name", "copy", 3, "size"], [1, "code-head-actions"], ["title", "Copy to clipboard", 1, "mini", 3, "click"], [1, "code-body", 3, "innerHTML"]], template: function PrismCodeDrawerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵlistener("click", function PrismCodeDrawerComponent_Template_div_click_1_listener() { return ctx.collapsed.update(v => !v); });
+            i0.ɵɵlistener("click", function PrismCodeDrawerComponent_Template_div_click_1_listener() { return ctx.layoutService.toggleCodeDrawer(); });
             i0.ɵɵelement(2, "prism-icon", 2)(3, "prism-icon", 3);
             i0.ɵɵelementStart(4, "span");
             i0.ɵɵtext(5, "Angular Template");
@@ -96,7 +98,7 @@ export class PrismCodeDrawerComponent {
         type: Component,
         args: [{ selector: 'prism-code-drawer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
     <div class="code-drawer" [class.is-collapsed]="collapsed()">
-      <div class="code-head" (click)="collapsed.update(v => !v)">
+      <div class="code-head" (click)="layoutService.toggleCodeDrawer()">
         <prism-icon name="chevron-down" [size]="12" class="chev" />
         <prism-icon name="copy" [size]="12" />
         <span>Angular Template</span>

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

@@ -0,0 +1,16 @@
+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>;
+}
+//# sourceMappingURL=prism-template-popover.component.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,162 @@
+import { Component, inject, computed, signal, ChangeDetectionStrategy, HostListener, } from '@angular/core';
+import { PrismIconComponent } from '../icons/prism-icon.component.js';
+import { PrismLayoutService } from '../services/prism-layout.service.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 PrismTemplatePopoverComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵlistener("click", function PrismTemplatePopoverComponent_Conditional_0_Template_div_click_0_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelementStart(1, "div", 2);
+    i0.ɵɵelement(2, "prism-icon", 3);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Angular Template");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 4);
+    i0.ɵɵlistener("click", function PrismTemplatePopoverComponent_Conditional_0_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copy()); });
+    i0.ɵɵelement(6, "prism-icon", 5);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 6);
+    i0.ɵɵlistener("click", function PrismTemplatePopoverComponent_Conditional_0_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.layoutService.closeTemplatePopover()); });
+    i0.ɵɵelement(9, "prism-icon", 7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(10, "pre", 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("size", 13);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("title", ctx_r1.copied() ? "Copied!" : "Copy to clipboard");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", ctx_r1.copied() ? "shield-check" : "copy")("size", 12);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.copied() ? "Copied" : "Copy", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("size", 13);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.highlighted(), i0.ɵɵsanitizeHtml);
+} }
+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;
+    let out = '';
+    let m;
+    while ((m = re.exec(code)) !== null) {
+        if (m[1] != null) {
+            out += `<span class="tok-com">${esc(m[1])}</span>`;
+        }
+        else if (m[2] != null) {
+            out += `<span class="tok-tag">${esc(m[2])}</span>`;
+        }
+        else if (m[3] != null) {
+            out += `<span class="tok-attr">${esc(m[3])}</span>=`;
+        }
+        else if (m[4] != null) {
+            out += `"<span class="tok-str">${esc(m[4])}</span>"`;
+        }
+        else if (m[5] != null) {
+            out += `<span class="tok-tag">${esc(m[5])}</span>`;
+        }
+        else if (m[6] != null) {
+            out += '\n';
+        }
+        else {
+            out += esc(m[0]);
+        }
+    }
+    return out;
+}
+export class PrismTemplatePopoverComponent {
+    navigationService = inject(PrismNavigationService);
+    rendererService = inject(PrismRendererService);
+    layoutService = inject(PrismLayoutService);
+    copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : []));
+    copiedResetTimer = null;
+    snippet = computed(() => {
+        const comp = this.navigationService.activeComponent();
+        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;
+        return generateSnippet(comp.meta.componentMeta.selector, comp.meta.inputs, this.rendererService.inputValues(), explicitKeys, this.rendererService.activeContent(), directiveOptions);
+    }, ...(ngDevMode ? [{ debugName: "snippet" }] : []));
+    highlighted = computed(() => {
+        const code = this.snippet();
+        if (!code)
+            return '';
+        return tokenizeXml(code);
+    }, ...(ngDevMode ? [{ debugName: "highlighted" }] : []));
+    copy() {
+        const code = this.snippet();
+        if (!code)
+            return;
+        navigator.clipboard?.writeText(code);
+        this.copied.set(true);
+        if (this.copiedResetTimer)
+            clearTimeout(this.copiedResetTimer);
+        this.copiedResetTimer = setTimeout(() => this.copied.set(false), 1500);
+    }
+    onEscape() {
+        if (this.layoutService.templatePopoverVisible()) {
+            this.layoutService.closeTemplatePopover();
+        }
+    }
+    static ɵfac = function PrismTemplatePopoverComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismTemplatePopoverComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismTemplatePopoverComponent, selectors: [["prism-template-popover"]], hostBindings: function PrismTemplatePopoverComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown.escape", function PrismTemplatePopoverComponent_keydown_escape_HostBindingHandler() { return ctx.onEscape(); }, i0.ɵɵresolveDocument);
+        } }, decls: 1, vars: 1, consts: [["role", "dialog", "aria-label", "Angular template", 1, "tpl-popover"], ["role", "dialog", "aria-label", "Angular template", 1, "tpl-popover", 3, "click"], [1, "tpl-popover-head"], ["name", "code", 3, "size"], [1, "tpl-popover-copy", 3, "click", "title"], [3, "name", "size"], ["aria-label", "Close", "title", "Close (Esc)", 1, "tpl-popover-close", 3, "click"], ["name", "x", 3, "size"], [1, "tpl-popover-body", 3, "innerHTML"]], template: function PrismTemplatePopoverComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismTemplatePopoverComponent_Conditional_0_Template, 11, 7, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.layoutService.templatePopoverVisible() ? 0 : -1);
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: contents; }\n\n    .tpl-popover[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 20px;\n      top: 8px;\n      width: 520px;\n      max-width: calc(100% - 40px);\n      max-height: min(420px, calc(100% - 16px));\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      display: flex;\n      flex-direction: column;\n      z-index: 30;\n      overflow: hidden;\n      animation: _ngcontent-%COMP%_tpl-fade-in var(--dur-fast, 0.15s) var(--ease-default, ease-out);\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(--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[_ngcontent-%COMP%]    > prism-icon[_ngcontent-%COMP%] {\n      color: var(--prism-text-muted);\n    }\n    .tpl-popover-head[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--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(--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[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      background: var(--prism-input-bg);\n    }\n\n    .tpl-popover-body[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n    .tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n      background: var(--prism-border-strong);\n      border-radius: 3px;\n    }\n\n    [_nghost-%COMP%]     .tok-tag { color: var(--prism-code-tag); }\n    [_nghost-%COMP%]     .tok-attr { color: var(--prism-code-attr); }\n    [_nghost-%COMP%]     .tok-str { color: var(--prism-code-str); }\n    [_nghost-%COMP%]     .tok-com { color: var(--prism-code-com); font-style: italic; }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismTemplatePopoverComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-template-popover', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
+    @if (layoutService.templatePopoverVisible()) {
+    <div
+      class="tpl-popover"
+      role="dialog"
+      aria-label="Angular template"
+      (click)="$event.stopPropagation()"
+    >
+      <div class="tpl-popover-head">
+        <prism-icon name="code" [size]="13" />
+        <span>Angular Template</span>
+        <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
+          class="tpl-popover-close"
+          (click)="layoutService.closeTemplatePopover()"
+          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    .tpl-popover {\n      position: absolute;\n      right: 20px;\n      top: 8px;\n      width: 520px;\n      max-width: calc(100% - 40px);\n      max-height: min(420px, calc(100% - 16px));\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      display: flex;\n      flex-direction: column;\n      z-index: 30;\n      overflow: hidden;\n      animation: tpl-fade-in var(--dur-fast, 0.15s) var(--ease-default, ease-out);\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  "] }]
+    }], null, { onEscape: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismTemplatePopoverComponent, { className: "PrismTemplatePopoverComponent", filePath: "app/canvas/prism-template-popover.component.ts", lineNumber: 206 }); })();

package/dist/app/icons/prism-icon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-icon.component.d.ts","sourceRoot":"","sources":["../../../src/app/icons/prism-icon.component.ts"],"names":[],"mappings":";AAgDA,qBAOa,kBAAkB;IAC7B,QAAQ,CAAC,IAAI,8CAA4B;IACzC,QAAQ,CAAC,IAAI,8CAAa;IAE1B,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;;yCAJ3C,kBAAkB;2CAAlB,kBAAkB;CAkC9B"}
+{"version":3,"file":"prism-icon.component.d.ts","sourceRoot":"","sources":["../../../src/app/icons/prism-icon.component.ts"],"names":[],"mappings":";AAkDA,qBAOa,kBAAkB;IAC7B,QAAQ,CAAC,IAAI,8CAA4B;IACzC,QAAQ,CAAC,IAAI,8CAAa;IAE1B,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;;yCAJ3C,kBAAkB;2CAAlB,kBAAkB;CAkC9B"}

package/dist/app/icons/prism-icon.component.js

@@ -24,6 +24,8 @@ const ICONS = {
     copy: '<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>',
     'maximize-2': '<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3"/>',
     eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
+    code: '<path d="m18 16 4-4-4-4M6 8l-4 4 4 4m8.5-12-5 16"/>',
+    x: '<path d="M18 6 6 18M6 6l12 12"/>',
 };
 const SVG_NS = 'http://www.w3.org/2000/svg';
 export class PrismIconComponent {
@@ -61,4 +63,4 @@ export class PrismIconComponent {
         type: Component,
         args: [{ selector: 'prism-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: ``, styles: [":host { display: inline-flex; align-items: center; justify-content: center; }"] }]
     }], () => [], { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismIconComponent, { className: "PrismIconComponent", filePath: "app/icons/prism-icon.component.ts", lineNumber: 56 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismIconComponent, { className: "PrismIconComponent", filePath: "app/icons/prism-icon.component.ts", lineNumber: 58 }); })();

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

@@ -2,12 +2,14 @@ import { Injector, type Type } from '@angular/core';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismRendererService } from '../services/prism-renderer.service.js';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
+import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import * as i0 from "@angular/core";
 export declare class PrismRendererComponent {
     protected readonly Math: Math;
     protected readonly navigationService: PrismNavigationService;
     protected readonly rendererService: PrismRendererService;
     protected readonly canvasService: PrismCanvasService;
+    protected readonly variantBg: PrismVariantBgService;
     private readonly eventLogService;
     private readonly manifestService;
     private readonly injector;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAGzE,qBAyHa,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAC/B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IA0FH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAvNJ,sBAAsB;2CAAtB,sBAAsB;CAqOlC"}
+{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAIhF,qBA8Ha,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAC/B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IA0FH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAxNJ,sBAAsB;2CAAtB,sBAAsB;CAsOlC"}