@ng-prism/core 21.9.1 → 21.10.0

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,10 @@
 import { PrismCanvasService, type CanvasBg } from '../services/prism-canvas.service.js';
+import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import * as i0 from "@angular/core";
 export declare class PrismCanvasToolbarComponent {
     protected readonly canvas: PrismCanvasService;
+    protected readonly variantBg: PrismVariantBgService;
+    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;;AAEhF,qBAgJa,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAE7D,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;yCA1B5B,2BAA2B;2CAA3B,2BAA2B;CA6BvC"}

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

@@ -1,24 +1,35 @@
 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 * 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", 11);
+    i0.ɵɵelement(1, "path", 12);
+    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", 10);
+    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", 11);
+    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", 13);
     i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_11_Template_button_click_0_listener() { const z_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.canvas.setZoom(z_r5.value)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -31,6 +42,15 @@ function PrismCanvasToolbarComponent_For_11_Template(rf, ctx) { if (rf & 1) {
 } }
 export class PrismCanvasToolbarComponent {
     canvas = inject(PrismCanvasService);
+    variantBg = inject(PrismVariantBgService);
+    setBg(bg) {
+        if (this.variantBg.recommended() !== null) {
+            this.variantBg.setOverride(bg);
+        }
+        else {
+            this.canvas.setBg(bg);
+        }
+    }
     bgs = [
         'dots',
         'plain',
@@ -48,29 +68,29 @@ 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: 19, vars: 6, 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-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()();
         } if (rf & 2) {
@@ -86,7 +106,7 @@ 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 });
+        } }, 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    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasToolbarComponent, [{
         type: Component,
@@ -97,9 +117,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>
         }
@@ -139,6 +179,6 @@ export class PrismCanvasToolbarComponent {
         Rulers
       </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  "] }]
     }], 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: 153 }); })();

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/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"}

package/dist/app/renderer/prism-renderer.component.js

@@ -9,14 +9,16 @@ import { PrismPanelService } from '../services/prism-panel.service.js';
 import { PrismPluginService } from '../services/prism-plugin.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 { PrismCanvasRulersComponent } from '../canvas/prism-canvas-rulers.component.js';
+import { PrismCanvasBgPillComponent } from '../canvas/prism-canvas-bg-pill.component.js';
 import * as i0 from "@angular/core";
 const _c0 = ["outlet"];
-function PrismRendererComponent_Conditional_9_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function PrismRendererComponent_Conditional_10_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function PrismRendererComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PrismRendererComponent_Conditional_9_ng_container_0_Template, 1, 0, "ng-container", 6);
+function PrismRendererComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PrismRendererComponent_Conditional_10_ng_container_0_Template, 1, 0, "ng-container", 6);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngComponentOutlet", ctx_r0.activeOverlay())("ngComponentOutletInputs", ctx_r0.overlayInputs)("ngComponentOutletInjector", ctx_r0.overlayInjector());
@@ -26,6 +28,7 @@ export class PrismRendererComponent {
     navigationService = inject(PrismNavigationService);
     rendererService = inject(PrismRendererService);
     canvasService = inject(PrismCanvasService);
+    variantBg = inject(PrismVariantBgService);
     eventLogService = inject(PrismEventLogService);
     manifestService = inject(PrismManifestService);
     injector = inject(Injector);
@@ -204,31 +207,37 @@ export class PrismRendererComponent {
             i0.ɵɵviewQuerySignal(ctx.outlet, _c0, 5, ViewContainerRef);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, decls: 10, vars: 7, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "canvas-badges"], [1, "c-badge"], [1, "stage-crosshair"], [1, "demo-wrap"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 11, vars: 7, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "canvas-badges"], [1, "c-badge"], [1, "stage-crosshair"], [1, "demo-wrap"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "span", 3);
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelement(4, "div", 4)(5, "prism-canvas-rulers");
-            i0.ɵɵelementStart(6, "div", 5);
-            i0.ɵɵelementContainer(7, null, 0);
-            i0.ɵɵconditionalCreate(9, PrismRendererComponent_Conditional_9_Template, 1, 3, "ng-container");
+            i0.ɵɵelement(4, "div", 4)(5, "prism-canvas-rulers")(6, "prism-canvas-bg-pill");
+            i0.ɵɵelementStart(7, "div", 5);
+            i0.ɵɵelementContainer(8, null, 0);
+            i0.ɵɵconditionalCreate(10, PrismRendererComponent_Conditional_10_Template, 1, 3, "ng-container");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵattribute("data-bg", ctx.canvasService.bg());
+            i0.ɵɵattribute("data-bg", ctx.variantBg.effective());
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate1("", ctx.Math.round(ctx.canvasService.zoom() * 100), "%");
             i0.ɵɵadvance();
             i0.ɵɵclassProp("visible", ctx.canvasService.guides());
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance(3);
             i0.ɵɵstyleProp("--zoom", ctx.canvasService.zoom());
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.activeOverlay() ? 9 : -1);
-        } }, dependencies: [PrismCanvasRulersComponent, NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage[_ngcontent-%COMP%] {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"][_ngcontent-%COMP%] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible[_ngcontent-%COMP%] { opacity: 1; }\n    .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair[_ngcontent-%COMP%]::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair[_ngcontent-%COMP%]::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 12px;\n      left: 20px;\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n    }\n    .c-badge[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\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    }\n\n    .demo-wrap[_ngcontent-%COMP%] {\n      position: relative;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      max-width: 600px;\n    }"], changeDetection: 0 });
+            i0.ɵɵconditional(ctx.activeOverlay() ? 10 : -1);
+        } }, dependencies: [PrismCanvasRulersComponent,
+            PrismCanvasBgPillComponent,
+            NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage[_ngcontent-%COMP%] {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"][_ngcontent-%COMP%] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible[_ngcontent-%COMP%] { opacity: 1; }\n    .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair[_ngcontent-%COMP%]::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair[_ngcontent-%COMP%]::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 12px;\n      left: 20px;\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n    }\n    .c-badge[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\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    }\n\n    .demo-wrap[_ngcontent-%COMP%] {\n      position: relative;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      max-width: 600px;\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismRendererComponent, [{
         type: Component,
-        args: [{ selector: 'prism-renderer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismCanvasRulersComponent, NgComponentOutlet], template: `
-    <div class="prism-canvas-stage" [attr.data-bg]="canvasService.bg()">
+        args: [{ selector: 'prism-renderer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                    PrismCanvasRulersComponent,
+                    PrismCanvasBgPillComponent,
+                    NgComponentOutlet,
+                ], template: `
+    <div class="prism-canvas-stage" [attr.data-bg]="variantBg.effective()">
       <div class="canvas-badges">
         <span class="c-badge"
           >{{ Math.round(canvasService.zoom() * 100) }}%</span
@@ -239,6 +248,7 @@ export class PrismRendererComponent {
         [class.visible]="canvasService.guides()"
       ></div>
       <prism-canvas-rulers />
+      <prism-canvas-bg-pill />
 
       <div class="demo-wrap" [style.--zoom]="canvasService.zoom()">
         <ng-container #outlet />
@@ -257,7 +267,7 @@ export class PrismRendererComponent {
     }], () => [], { outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
                         read: ViewContainerRef,
                     }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 156 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 163 }); })();
 function parseContentToNodes(content) {
     if (typeof content === 'string') {
         return [htmlToNodes(content)];

package/dist/app/services/prism-canvas.service.d.ts

@@ -1,5 +1,6 @@
+import { type CanvasBg } from '../../shared/canvas-bg.type.js';
 import * as i0 from "@angular/core";
-export type CanvasBg = 'dots' | 'plain' | 'light' | 'dark' | 'checker';
+export type { CanvasBg };
 export declare class PrismCanvasService {
     readonly bg: import("@angular/core").WritableSignal<CanvasBg>;
     readonly zoom: import("@angular/core").WritableSignal<number>;

package/dist/app/services/prism-canvas.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-canvas.service.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAIvE,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,EAAE,mDAA4B;IACvC,QAAQ,CAAC,IAAI,iDAAa;IAC1B,QAAQ,CAAC,MAAM,kDAAiB;IAChC,QAAQ,CAAC,MAAM,kDAAiB;;IAMhC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAKzB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAKxB,YAAY,IAAI,IAAI;IAKpB,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,IAAI;yCAhDD,kBAAkB;6CAAlB,kBAAkB;CA6D9B"}
+{"version":3,"file":"prism-canvas.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-canvas.service.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;;AAE3E,YAAY,EAAE,QAAQ,EAAE,CAAC;AAIzB,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,EAAE,mDAA4B;IACvC,QAAQ,CAAC,IAAI,iDAAa;IAC1B,QAAQ,CAAC,MAAM,kDAAiB;IAChC,QAAQ,CAAC,MAAM,kDAAiB;;IAMhC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAKzB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAKxB,YAAY,IAAI,IAAI;IAKpB,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,IAAI;yCA5CD,kBAAkB;6CAAlB,kBAAkB;CAyD9B"}

package/dist/app/services/prism-canvas.service.js

@@ -1,4 +1,5 @@
 import { Injectable, signal } from '@angular/core';
+import { CANVAS_BGS } from '../../shared/canvas-bg.type.js';
 import * as i0 from "@angular/core";
 const STORAGE_KEY = 'ng-prism-canvas';
 export class PrismCanvasService {
@@ -31,7 +32,7 @@ export class PrismCanvasService {
             if (!raw)
                 return;
             const d = JSON.parse(raw);
-            if (['dots', 'plain', 'light', 'dark', 'checker'].includes(d['bg'])) {
+            if (CANVAS_BGS.includes(d['bg'])) {
                 this.bg.set(d['bg']);
             }
             if (typeof d['zoom'] === 'number')

package/dist/app/services/prism-layout.service.d.ts

@@ -7,11 +7,13 @@ export declare class PrismLayoutService {
     readonly sidebarWidth: import("@angular/core").WritableSignal<number>;
     readonly panelHeight: import("@angular/core").WritableSignal<number>;
     readonly panelWidth: import("@angular/core").WritableSignal<number>;
+    readonly codeDrawerCollapsed: import("@angular/core").WritableSignal<boolean>;
     constructor();
     toggleSidebar(): void;
     toggleAddons(): void;
     toggleToolbar(): void;
     toggleOrientation(): void;
+    toggleCodeDrawer(): void;
     setSidebarWidth(px: number): void;
     setPanelHeight(px: number): void;
     setPanelWidth(px: number): void;

package/dist/app/services/prism-layout.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-layout.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-layout.service.ts"],"names":[],"mappings":";AAIA,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,aAAa,kDAAgB;IACtC,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,iBAAiB,6DAAwC;IAClE,QAAQ,CAAC,YAAY,iDAAe;IACpC,QAAQ,CAAC,WAAW,iDAAe;IACnC,QAAQ,CAAC,UAAU,iDAAe;;IAMlC,aAAa,IAAI,IAAI;IAKrB,YAAY,IAAI,IAAI;IAKpB,aAAa,IAAI,IAAI;IAKrB,iBAAiB,IAAI,IAAI;IAKzB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKjC,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKhC,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,aAAa;yCAjEV,kBAAkB;6CAAlB,kBAAkB;CA6E9B"}
+{"version":3,"file":"prism-layout.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-layout.service.ts"],"names":[],"mappings":";AAIA,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,aAAa,kDAAgB;IACtC,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,iBAAiB,6DAAwC;IAClE,QAAQ,CAAC,YAAY,iDAAe;IACpC,QAAQ,CAAC,WAAW,iDAAe;IACnC,QAAQ,CAAC,UAAU,iDAAe;IAClC,QAAQ,CAAC,mBAAmB,kDAAiB;;IAM7C,aAAa,IAAI,IAAI;IAKrB,YAAY,IAAI,IAAI;IAKpB,aAAa,IAAI,IAAI;IAKrB,iBAAiB,IAAI,IAAI;IAKzB,gBAAgB,IAAI,IAAI;IAKxB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKjC,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKhC,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,aAAa;yCAlFV,kBAAkB;6CAAlB,kBAAkB;CA+F9B"}

package/dist/app/services/prism-layout.service.js

@@ -9,23 +9,28 @@ export class PrismLayoutService {
     sidebarWidth = signal(280, ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : []));
     panelHeight = signal(300, ...(ngDevMode ? [{ debugName: "panelHeight" }] : []));
     panelWidth = signal(320, ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+    codeDrawerCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "codeDrawerCollapsed" }] : []));
     constructor() {
         this.loadFromStorage();
     }
     toggleSidebar() {
-        this.sidebarVisible.update(v => !v);
+        this.sidebarVisible.update((v) => !v);
         this.saveToStorage();
     }
     toggleAddons() {
-        this.addonsVisible.update(v => !v);
+        this.addonsVisible.update((v) => !v);
         this.saveToStorage();
     }
     toggleToolbar() {
-        this.toolbarVisible.update(v => !v);
+        this.toolbarVisible.update((v) => !v);
         this.saveToStorage();
     }
     toggleOrientation() {
-        this.addonsOrientation.update(v => (v === 'bottom' ? 'right' : 'bottom'));
+        this.addonsOrientation.update((v) => (v === 'bottom' ? 'right' : 'bottom'));
+        this.saveToStorage();
+    }
+    toggleCodeDrawer() {
+        this.codeDrawerCollapsed.update((v) => !v);
         this.saveToStorage();
     }
     setSidebarWidth(px) {
@@ -52,7 +57,8 @@ export class PrismLayoutService {
                 this.addonsVisible.set(d['addonsVisible']);
             if (typeof d['toolbarVisible'] === 'boolean')
                 this.toolbarVisible.set(d['toolbarVisible']);
-            if (d['addonsOrientation'] === 'bottom' || d['addonsOrientation'] === 'right') {
+            if (d['addonsOrientation'] === 'bottom' ||
+                d['addonsOrientation'] === 'right') {
                 this.addonsOrientation.set(d['addonsOrientation']);
             }
             if (typeof d['sidebarWidth'] === 'number')
@@ -61,6 +67,8 @@ export class PrismLayoutService {
                 this.panelHeight.set(Math.max(100, Math.min(600, d['panelHeight'])));
             if (typeof d['panelWidth'] === 'number')
                 this.panelWidth.set(Math.max(200, Math.min(600, d['panelWidth'])));
+            if (typeof d['codeDrawerCollapsed'] === 'boolean')
+                this.codeDrawerCollapsed.set(d['codeDrawerCollapsed']);
         }
         catch { }
     }
@@ -73,6 +81,7 @@ export class PrismLayoutService {
             sidebarWidth: this.sidebarWidth(),
             panelHeight: this.panelHeight(),
             panelWidth: this.panelWidth(),
+            codeDrawerCollapsed: this.codeDrawerCollapsed(),
         };
         localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
     }

package/dist/app/services/prism-theme.service.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class PrismThemeService {
-    readonly theme: import("@angular/core").WritableSignal<"dark" | "light">;
+    readonly theme: import("@angular/core").WritableSignal<"light" | "dark">;
     readonly isDark: import("@angular/core").Signal<boolean>;
     private configOverrides;
     private darkOverrides;

package/dist/app/services/prism-variant-bg.service.d.ts

@@ -0,0 +1,19 @@
+import type { CanvasBg } from '../../shared/canvas-bg.type.js';
+import * as i0 from "@angular/core";
+export declare class PrismVariantBgService {
+    private readonly canvas;
+    private readonly navigation;
+    private readonly renderer;
+    readonly recommended: import("@angular/core").Signal<CanvasBg | null>;
+    private readonly _override;
+    readonly override: import("@angular/core").Signal<CanvasBg | null>;
+    readonly effective: import("@angular/core").Signal<CanvasBg>;
+    /** True when the user's override differs from the (non-null) recommended bg. */
+    readonly isDeviating: import("@angular/core").Signal<boolean>;
+    constructor();
+    setOverride(bg: CanvasBg): void;
+    clearOverride(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismVariantBgService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PrismVariantBgService>;
+}
+//# sourceMappingURL=prism-variant-bg.service.d.ts.map

package/dist/app/services/prism-variant-bg.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-variant-bg.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-variant-bg.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;;AAK/D,qBACa,qBAAqB;IAChC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IACrD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkC;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IAEzD,QAAQ,CAAC,WAAW,kDAMjB;IAEH,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAC3D,QAAQ,CAAC,QAAQ,kDAA+B;IAEhD,QAAQ,CAAC,SAAS,2CAEhB;IAEF,gFAAgF;IAChF,QAAQ,CAAC,WAAW,0CAMjB;;IAUH,WAAW,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAI/B,aAAa,IAAI,IAAI;yCAzCV,qBAAqB;6CAArB,qBAAqB;CA4CjC"}

package/dist/app/services/prism-variant-bg.service.js

@@ -0,0 +1,45 @@
+import { computed, effect, inject, Injectable, signal } from '@angular/core';
+import { PrismCanvasService } from './prism-canvas.service.js';
+import { PrismNavigationService } from './prism-navigation.service.js';
+import { PrismRendererService } from './prism-renderer.service.js';
+import * as i0 from "@angular/core";
+export class PrismVariantBgService {
+    canvas = inject(PrismCanvasService);
+    navigation = inject(PrismNavigationService);
+    renderer = inject(PrismRendererService);
+    recommended = computed(() => {
+        const comp = this.navigation.activeComponent();
+        if (!comp)
+            return null;
+        const variant = comp.meta.showcaseConfig.variants?.[this.renderer.activeVariantIndex()];
+        return variant?.bg ?? comp.meta.showcaseConfig.bg ?? null;
+    }, ...(ngDevMode ? [{ debugName: "recommended" }] : []));
+    _override = signal(null, ...(ngDevMode ? [{ debugName: "_override" }] : []));
+    override = this._override.asReadonly();
+    effective = computed(() => this._override() ?? this.recommended() ?? this.canvas.bg(), ...(ngDevMode ? [{ debugName: "effective" }] : []));
+    /** True when the user's override differs from the (non-null) recommended bg. */
+    isDeviating = computed(() => {
+        const override = this._override();
+        const recommended = this.recommended();
+        return (override !== null && recommended !== null && override !== recommended);
+    }, ...(ngDevMode ? [{ debugName: "isDeviating" }] : []));
+    constructor() {
+        effect(() => {
+            this.navigation.activeComponent();
+            this.renderer.activeVariantIndex();
+            this._override.set(null);
+        });
+    }
+    setOverride(bg) {
+        this._override.set(bg);
+    }
+    clearOverride() {
+        this._override.set(null);
+    }
+    static ɵfac = function PrismVariantBgService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismVariantBgService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PrismVariantBgService, factory: PrismVariantBgService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismVariantBgService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], () => [], null); })();

package/dist/builder/scanner/component.scanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.scanner.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/component.scanner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAKrE;;GAEG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,EAAE,CAAC,MAAM,EAAE,EACpB,OAAO,EAAE,EAAE,CAAC,WAAW,GACtB,gBAAgB,EAAE,CA0CpB"}
+{"version":3,"file":"component.scanner.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/component.scanner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAiBrE;;GAEG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,EAAE,CAAC,MAAM,EAAE,EACpB,OAAO,EAAE,EAAE,CAAC,WAAW,GACtB,gBAAgB,EAAE,CAyCpB"}

package/dist/builder/scanner/component.scanner.js

@@ -1,15 +1,18 @@
 import ts from 'typescript';
-import { evaluateExpression, findDecorator, getDecoratorArgument } from './ast-utils.js';
+import { CANVAS_BGS } from '../../shared/canvas-bg.type.js';
+import { evaluateExpression, findDecorator, getDecoratorArgument, } from './ast-utils.js';
 import { extractInputs, extractOutputs } from './input.extractor.js';
+function isCanvasBg(value) {
+    return (typeof value === 'string' &&
+        CANVAS_BGS.includes(value));
+}
 /**
  * Scan exported symbols for Angular components annotated with @Showcase.
  */
 export function scanComponents(exports, checker) {
     const components = [];
     for (const sym of exports) {
-        const resolved = sym.flags & ts.SymbolFlags.Alias
-            ? checker.getAliasedSymbol(sym)
-            : sym;
+        const resolved = sym.flags & ts.SymbolFlags.Alias ? checker.getAliasedSymbol(sym) : sym;
         const classDecl = resolved.declarations?.find(ts.isClassDeclaration);
         if (!classDecl)
             continue;
@@ -76,8 +79,25 @@ function extractShowcaseConfig(decorator, className) {
         config.host = obj['host'];
     if (obj['renderPage'])
         config.renderPage = obj['renderPage'];
+    if (obj['bg'] !== undefined) {
+        if (isCanvasBg(obj['bg'])) {
+            config.bg = obj['bg'];
+        }
+        else {
+            console.warn(`⚠ ng-prism: ${className} declares invalid bg "${String(obj['bg'])}" — ` +
+                `expected one of: dots, plain, light, dark, checker. Skipping.`);
+        }
+    }
     if (Array.isArray(obj['variants'])) {
-        config.variants = obj['variants'];
+        config.variants = obj['variants'].map((variant) => {
+            const cleaned = { ...variant };
+            if (variant['bg'] !== undefined && !isCanvasBg(variant['bg'])) {
+                console.warn(`⚠ ng-prism: ${className} variant "${String(variant['name'])}" declares ` +
+                    `invalid bg "${String(variant['bg'])}" — expected one of: dots, plain, light, dark, checker. Skipping.`);
+                delete cleaned['bg'];
+            }
+            return cleaned;
+        });
     }
     return config;
 }

package/dist/decorator/showcase.types.d.ts

@@ -1,4 +1,5 @@
 import type { Provider } from '@angular/core';
+import type { CanvasBg } from '../shared/canvas-bg.type.js';
 export interface DirectiveHost {
     selector: string;
     import: {
@@ -30,6 +31,13 @@ export interface ShowcaseConfig {
     providers?: Provider[];
     /** Arbitrary metadata for plugins (e.g. { figma: 'https://...' }) */
     meta?: Record<string, unknown>;
+    /**
+     * Recommended canvas background for this component. Applied when the user
+     * opens the component, unless a variant defines its own `bg`. The user
+     * can override via the canvas toolbar; the override is transient and
+     * resets when switching variants or components.
+     */
+    bg?: CanvasBg;
     /** Host element for directive showcases. String = HTML element (e.g. '<button class="btn">'), object = Angular component. */
     host?: string | DirectiveHost;
     /** Title of a registered ComponentPage to render instead of the component itself. Use for complex components that need template projections or mock data. The page component can inject PrismRendererService to react to control panel changes. */
@@ -50,5 +58,7 @@ export interface Variant {
     description?: string;
     /** Arbitrary metadata for plugins (e.g. { figma: 'https://...?node-id=12-34' }) */
     meta?: Record<string, unknown>;
+    /** Recommended canvas background for this variant. Overrides `ShowcaseConfig.bg`. */
+    bg?: CanvasBg;
 }
 //# sourceMappingURL=showcase.types.d.ts.map

package/dist/decorator/showcase.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"showcase.types.d.ts","sourceRoot":"","sources":["../../src/decorator/showcase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2IAA2I;IAC3I,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iJAAiJ;IACjJ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,6HAA6H;IAC7H,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAC9B,mPAAmP;IACnP,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,OAAO;IACtB,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC"}
+{"version":3,"file":"showcase.types.d.ts","sourceRoot":"","sources":["../../src/decorator/showcase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2IAA2I;IAC3I,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iJAAiJ;IACjJ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B;;;;;OAKG;IACH,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,6HAA6H;IAC7H,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAC9B,mPAAmP;IACnP,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,OAAO;IACtB,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,qFAAqF;IACrF,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf"}

package/dist/shared/canvas-bg.type.d.ts

@@ -0,0 +1,3 @@
+export type CanvasBg = 'dots' | 'plain' | 'light' | 'dark' | 'checker';
+export declare const CANVAS_BGS: readonly CanvasBg[];
+//# sourceMappingURL=canvas-bg.type.d.ts.map

package/dist/shared/canvas-bg.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-bg.type.d.ts","sourceRoot":"","sources":["../../src/shared/canvas-bg.type.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvE,eAAO,MAAM,UAAU,EAAE,SAAS,QAAQ,EAMhC,CAAC"}

package/dist/shared/canvas-bg.type.js

@@ -0,0 +1,7 @@
+export const CANVAS_BGS = [
+    'dots',
+    'plain',
+    'light',
+    'dark',
+    'checker',
+];

package/dist/transformer/showcase-strip.transformer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"showcase-strip.transformer.d.ts","sourceRoot":"","sources":["../../src/transformer/showcase-strip.transformer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAmK5B,wBAAgB,8BAA8B,IAAI,EAAE,CAAC,kBAAkB,CAAC,EAAE,CAAC,UAAU,CAAC,CAuCrF;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAY,GAAG,MAAM,CAWpF"}
+{"version":3,"file":"showcase-strip.transformer.d.ts","sourceRoot":"","sources":["../../src/transformer/showcase-strip.transformer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAoN5B,wBAAgB,8BAA8B,IAAI,EAAE,CAAC,kBAAkB,CAAC,EAAE,CAAC,UAAU,CAAC,CA8CrF;AA6BD,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,MAAM,EACd,QAAQ,SAAY,GACnB,MAAM,CAgCR"}

package/dist/transformer/showcase-strip.transformer.js

@@ -4,9 +4,9 @@ function isShowcaseModule(specifier) {
     return SHOWCASE_MODULE_PREFIXES.some((prefix) => specifier === prefix || specifier.startsWith(prefix + '/'));
 }
 function isShowcaseCall(expr, names) {
-    return ts.isCallExpression(expr)
-        && ts.isIdentifier(expr.expression)
-        && names.has(expr.expression.text);
+    return (ts.isCallExpression(expr) &&
+        ts.isIdentifier(expr.expression) &&
+        names.has(expr.expression.text));
 }
 function isLoweredShowcaseCall(expr, names) {
     if (!ts.isCallExpression(expr))
@@ -15,11 +15,21 @@ function isLoweredShowcaseCall(expr, names) {
 }
 function tryHandleDecorateStatement(stmt, names, factory) {
     const expr = stmt.expression;
-    if (!ts.isBinaryExpression(expr) || expr.operatorToken.kind !== ts.SyntaxKind.EqualsToken) {
+    if (!ts.isBinaryExpression(expr) ||
+        expr.operatorToken.kind !== ts.SyntaxKind.EqualsToken) {
         return undefined;
     }
-    const rhs = expr.right;
-    if (!ts.isCallExpression(rhs) || !ts.isIdentifier(rhs.expression) || rhs.expression.text !== '__decorate') {
+    const chain = [];
+    let current = expr;
+    while (ts.isBinaryExpression(current) &&
+        current.operatorToken.kind === ts.SyntaxKind.EqualsToken) {
+        chain.push(current);
+        current = current.right;
+    }
+    const rhs = current;
+    if (!ts.isCallExpression(rhs) ||
+        !ts.isIdentifier(rhs.expression) ||
+        rhs.expression.text !== '__decorate') {
         return undefined;
     }
     const args = rhs.arguments;
@@ -36,14 +46,18 @@ function tryHandleDecorateStatement(stmt, names, factory) {
     }
     const newArray = factory.updateArrayLiteralExpression(decoratorArray, remaining);
     const newCall = factory.updateCallExpression(rhs, rhs.expression, rhs.typeArguments, [newArray, ...args.slice(1)]);
-    const newBinary = factory.updateBinaryExpression(expr, expr.left, expr.operatorToken, newCall);
-    const newStmt = factory.updateExpressionStatement(stmt, newBinary);
+    let newRhs = newCall;
+    for (let i = chain.length - 1; i >= 0; i--) {
+        const link = chain[i];
+        newRhs = factory.updateBinaryExpression(link, link.left, link.operatorToken, newRhs);
+    }
+    const newStmt = factory.updateExpressionStatement(stmt, newRhs);
     return { action: 'replace', statement: newStmt };
 }
 function isShowcaseDecorator(d, names) {
-    return ts.isCallExpression(d.expression)
-        && ts.isIdentifier(d.expression.expression)
-        && names.has(d.expression.expression.text);
+    return (ts.isCallExpression(d.expression) &&
+        ts.isIdentifier(d.expression.expression) &&
+        names.has(d.expression.expression.text));
 }
 function stripNativeDecorators(node, names, factory) {
     const decorators = ts.getDecorators(node);
@@ -114,7 +128,8 @@ export function createShowcaseStripTransformer() {
                         continue;
                     const decorateResult = tryHandleDecorateStatement(stmt, names, factory);
                     if (decorateResult) {
-                        if (decorateResult.action === 'replace' && decorateResult.statement) {
+                        if (decorateResult.action === 'replace' &&
+                            decorateResult.statement) {
                             filtered.push(decorateResult.statement);
                         }
                         continue;
@@ -134,6 +149,21 @@ export function createShowcaseStripTransformer() {
         };
     };
 }
+function findShowcaseLeak(sourceFile, names) {
+    let leak;
+    function visit(node) {
+        if (leak)
+            return;
+        if (ts.isIdentifier(node) && names.has(node.text)) {
+            const { line } = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile));
+            leak = { name: node.text, line: line + 1 };
+            return;
+        }
+        ts.forEachChild(node, visit);
+    }
+    visit(sourceFile);
+    return leak;
+}
 export function stripShowcaseDecorators(source, fileName = 'file.ts') {
     const sourceFile = ts.createSourceFile(fileName, source, ts.ScriptTarget.Latest, true);
     const importInfo = findShowcaseImports(sourceFile);
@@ -143,5 +173,12 @@ export function stripShowcaseDecorators(source, fileName = 'file.ts') {
     const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
     const output = printer.printFile(result.transformed[0]);
     result.dispose();
+    const audited = ts.createSourceFile(fileName, output, ts.ScriptTarget.Latest, true);
+    const leak = findShowcaseLeak(audited, importInfo.localNames);
+    if (leak) {
+        throw new Error(`[ng-prism] Showcase reference '${leak.name}' left in output after stripping at ${fileName}:${leak.line}. ` +
+            `The Showcase import was removed but a reference remains — this would cause a ReferenceError at runtime. ` +
+            `This is a transformer bug; please report the input source.`);
+    }
     return output;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/core",
-  "version": "21.9.1",
+  "version": "21.10.0",
   "description": "ng-prism — the Angular-native Storybook alternative. Lightweight component showcase with @Showcase decorator, no story files needed.",
   "keywords": [
     "ng-prism",