@ng-prism/core 21.9.1 → 21.10.1

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,14 @@ 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 templatePopoverVisible: import("@angular/core").WritableSignal<boolean>;
     constructor();
     toggleSidebar(): void;
     toggleAddons(): void;
     toggleToolbar(): void;
     toggleOrientation(): void;
+    toggleTemplatePopover(): void;
+    closeTemplatePopover(): 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,sBAAsB,kDAAiB;;IAMhD,aAAa,IAAI,IAAI;IAKrB,YAAY,IAAI,IAAI;IAKpB,aAAa,IAAI,IAAI;IAKrB,iBAAiB,IAAI,IAAI;IAKzB,qBAAqB,IAAI,IAAI;IAI7B,oBAAoB,IAAI,IAAI;IAI5B,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;IA0BvB,OAAO,CAAC,aAAa;yCAnFV,kBAAkB;6CAAlB,kBAAkB;CA+F9B"}

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

@@ -9,25 +9,32 @@ export class PrismLayoutService {
     sidebarWidth = signal(280, ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : []));
     panelHeight = signal(300, ...(ngDevMode ? [{ debugName: "panelHeight" }] : []));
     panelWidth = signal(320, ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+    templatePopoverVisible = signal(false, ...(ngDevMode ? [{ debugName: "templatePopoverVisible" }] : []));
     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();
     }
+    toggleTemplatePopover() {
+        this.templatePopoverVisible.update((v) => !v);
+    }
+    closeTemplatePopover() {
+        this.templatePopoverVisible.set(false);
+    }
     setSidebarWidth(px) {
         this.sidebarWidth.set(Math.max(160, Math.min(600, px)));
         this.saveToStorage();
@@ -52,7 +59,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')

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/app/shell/prism-shell.component.js

@@ -19,7 +19,7 @@ import { PrismViewTabBarComponent } from '../view-tab-bar/prism-view-tab-bar.com
 import { PrismViewPanelHostComponent } from '../view-tab-bar/prism-view-panel-host.component.js';
 import { PrismResizerDirective } from '../directives/prism-resizer.directive.js';
 import { PrismCanvasToolbarComponent } from '../canvas/prism-canvas-toolbar.component.js';
-import { PrismCodeDrawerComponent } from '../canvas/prism-code-drawer.component.js';
+import { PrismTemplatePopoverComponent } from '../canvas/prism-template-popover.component.js';
 import * as i0 from "@angular/core";
 function PrismShellComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -47,9 +47,8 @@ function PrismShellComponent_Conditional_5_Conditional_1_Conditional_0_Template(
 function PrismShellComponent_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, PrismShellComponent_Conditional_5_Conditional_1_Conditional_0_Template, 2, 0);
     i0.ɵɵelementStart(1, "div", 12);
-    i0.ɵɵelement(2, "prism-canvas-toolbar")(3, "prism-renderer");
+    i0.ɵɵelement(2, "prism-canvas-toolbar")(3, "prism-renderer")(4, "prism-template-popover");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "prism-code-drawer", 13);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r1.layout.toolbarVisible() ? 0 : -1);
@@ -59,10 +58,10 @@ function PrismShellComponent_Conditional_5_Conditional_2_Template(rf, ctx) { if
 } }
 function PrismShellComponent_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵelementStart(0, "div", 13);
     i0.ɵɵlistener("valueChange", function PrismShellComponent_Conditional_5_Conditional_3_Template_div_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.layout.setPanelHeight($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 15);
+    i0.ɵɵelementStart(1, "div", 14);
     i0.ɵɵelement(2, "prism-panel-host");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -87,14 +86,14 @@ function PrismShellComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
 function PrismShellComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 16);
-    i0.ɵɵelement(2, "path", 17)(3, "path", 18);
+    i0.ɵɵelementStart(1, "svg", 15);
+    i0.ɵɵelement(2, "path", 16)(3, "path", 17);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(4, "p", 19);
+    i0.ɵɵelementStart(4, "p", 18);
     i0.ɵɵtext(5, "Select a component");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 20);
+    i0.ɵɵelementStart(6, "p", 19);
     i0.ɵɵtext(7, " from the sidebar to preview it here ");
     i0.ɵɵelementEnd()();
 } }
@@ -166,7 +165,7 @@ export class PrismShellComponent {
     static ɵfac = function PrismShellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismShellComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismShellComponent, selectors: [["prism-shell"]], hostBindings: function PrismShellComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function PrismShellComponent_keydown_HostBindingHandler($event) { return ctx.onKeyDown($event); }, i0.ɵɵresolveDocument);
-        } }, decls: 8, vars: 8, consts: [[1, "prism-shell"], [1, "prism-shell__header"], [1, "prism-body"], [1, "prism-main"], [1, "prism-main__canvas"], [1, "prism-shell__empty"], [1, "prism-sidebar-wrap"], [1, "prism-sidebar-foot"], ["alt", "ng-prism logo", "src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAMAAAA0hKKwAAAC7lBMVEUAAADFkfu6Dn9fLlcmNclKI0WFKFAnRr9XJ09tUI3jTZDxU5vxUJvIQ30wYuRNIMFoF7qBEq61g7y0N2+SL1ljQnL8vO5dUqqhNGPps/coVdQ4K8iUEKCkEJm1O3GKaL2JXpzTmePcS4zCitkoQdeVgfK4ie7hqeGde9p7bNTRR4PQRYRqYMawjPe/SHyBX7D4WJ75WaD6W6H4Vp37XKL9y/UlMtbDEoR90f39uvndn/v5U5rYm/vMlPsrTPJLI8z/YbNWH8f6tfr+0PjxrPvqqPu8jPs1K9QxY/zko/tFJc5RIcnTmfuuifv/1PkmNdz0r/olM9hoGcDopPurh/swXPotUfVzF7rCj/ukhvv9zfb9wv+XgvvuqfovVvgrRO7/5/60i/zhofunhvv6WJ6B0f2ghPvQlvttGL2/Eoa3i/soPeYnOuA8KdJfHMNjG8F8FbX/4P6yiPuSgfsxYPv3sfq2EYpAJ9BaHcX8Vpy7EYf+x/R3FbiIFLD/X62YE6W5jPychPz+tvb7Yab4Qo/+2P/IkvsvLtaCFLOPE6vIk/v9W6C4BH2Vzv2/jvv+XqOtEY/JEYWH0P28xf2fEpb//f//7v81af+myf2Mf/ykE6P6SpWmEJIkYP3/ZaP/zf+N0P1my/2dyv3/Wqf6uP8UM/D9ZaixD4vBDoGwxv3Mv/v6rvYIIOv/aLiVEZnN9f/+vP9y2P6bj/0bVvun3//1tP+ymv/I2v54zP16gvssRvZTIcSKFaTTn/+ml/9p4P7bzP7ilvvNhPtqcvn9qNqNFJ652/7AfPzYjPvy3fr8gsL6crPRJoq7/v+A3f7GmP6oi/6grv3ZtfxTbfskOvE3NeY0Ltn9l8xNDamAGKfmQJOTAISlAIGh9P+P7P/Fof/uzf6Kx/3e2/xGTvHjvud1HK6Nuf5Dav1lILi0MZvbM5B9AI+W2v62iNaPcdLXk824YLmbRbUxB7RqHq9mBJ9zAJjMHIWLjP9HRO0lFtDFY56wAAAAMHRSTlMA/qAgpAY5rxNM3e/9sqKhoZ+bgFYq/Htp+Kihnp6TkV3W08Oh7enSxsO/t6X2nnNWmYchAAAJcElEQVRo3rTSv4vaYBwG8IDc0btrF1uP3nLVOhRaKEnMonEQTQbhECFbQyBIwNnBwcXBmsnBqS4OGS44eAhZ3BW63HVz6Xp/Sr/PmwRxbHzfB3+MH573+0j/nVxOEp/rL5LwXL74BUl0rhuB8CofG/OJW5SE5uLtbFUNbi8kkfm+0VeTaJCXBCY3Xo20iW0HbyRxebeZjX5O7KovsMplY66OVoTYgbgZf26oc9akKm7GHzYzbc6aVKPBlSQkFzdjVYubUJU7MTO+pyKaliBCbo/5ztUjQrfPcScwX09LEVFVMF9trmneKkEi7jPGfFmRI9IMSpwJzJcuQh+dngtEsxn6mDHf+aLI8SZQbM4zvsfVTxGKnxcwXyR9LsowtHnO+NvGA5LcJCIAxrAblLnOV1aYoii69mTHBiFDu8BvvmNPVeMqKiFRanQdu8RvviMgbMIqPVdIBoiuYRh2kdt8ZYW9lsqQpzDuAcMJOc34vuF5DKEyCkNAwHAcxwrynOarUNCEjATpUmCYpjHkMeOvjQoMIFCAdOO3gmG1ozKP+c5wEQpDsK4tesQGKWZ0xWG+spcguIlCTYCgCAjLaoels+fLrh7v9xRhjwWkHZ0745txRSEFDIuiq4QYSREQvZ7RO894T0VAHDP96zvxepkBpBZ9Om++MzlF6Bd3X3Z+GU76WChCiLUtnD1fpihpkcUisFgREMyo1bblc+brebIMAwj+p3/cwevCthzz+FhImH3G1+MKMwAQI8vy8nYxuHteWNapUTdK2ec7Sg18KdOXRWvwenDt/alRr4fFrPN9rMishBJH1fWWC2TnGiSkRh0x+1nnq1c8GCoo6kRXdzudwe5wePb3MEAkSN/IZ5rv44yKKACSLFe+3+q4u/V67W73MFLi4aFfNwtZ5jumIkDSyNPf7o9OiyE7v9c7EkjfLGeZ77/K7DwoxjCOA7h1TJpxjiPn8AeGwShr1Vht0+wgmrbJlA47uxal5NpqXIvaoRS5YlNRQ83qmKamQ3dRKbkqFEVE5L5v//n9nufZ991VVvud7PCPz/ye3/d9vGoXVosptL5qmVQmVV8+mZV1smt1A2cgAVlibXl904SmiNhWEymSymRrik9iri1ZbGw4OjqunWF5fcVgYJiBWxf5ESQTjMziJ9UcAQZmyVTL64uDIEIflTP7pTIDkglIQtfFBmowIiqqUmB5fW1ZGHJFLfLz8wOkPiETU9hVDQI3x6GoqKi1Ft3GgxccFsIkfHDrIhFMAu2qT03ApNaPbzA2Dh2KcqwcbAEyFAbhDHwOhWfGqjU8QpgjxdWOeFbUgAh81s606Pblto4fMMh1HIQhT1Np3l2udqQETAGEj8BnubUlt6/Qjg5heNalMhwEFx9f+PQIzbnCOzXEgAgEAh9IZZ9rPA6eQyGbgyrwrIPBFg8IS2NCAzkpNJA4enTponkW1Zc3Fpy5ESklp0WOq7DkHEtcY1YDEFECzljaJBhkUX3tGIJbj9QYI3FxcUDAp8O7DTUwBQQNRCIqp/SpvuuPEYO7U2Dra0CgiFQaX1ji7x/HkpfQYCSAEeHTNKCP9bWjCI3YThNpgpz35+LQ2FnDE4ioKmf2ob77cOuosDtrwYH7ajwsVmFR/CNAHAxK3lNAeCJi48aISus+1Zd/CgHBrXOGn0wXn/v4fIm/gyGXbtdQYuPSiI0QVUjTjD7U19b0WRfDs84MkSZel/Xs2UlgOCQvr6gGh0ABDVWIqtLmv/Vlly+rMGydOyyNWtf14cvvbH1o8a1Gjrn0ogYI3nBzi5g76H/1ZTPQC2W+eL4okiOufWj7Ul7uFJzdml98Kw8YqlRdRUMFCQkBw82zc4r52zdNuB5HIV/Gz7pGprv2/lVbW7mza/mK1pbsXzyT5w8LQQPHQMNTpTJX49nkOWQIxLB1jUine9/d1vZqi7Ozq5OrU6tSn/3sdu6j8yV091cRYGNA1jXNNPvywNpLzwtfUNQaPw3s+/nnb9++ft2609nV1dXJaUVrGTC10ABk8hwirlICDUSaO63N1BcN/toiN7xGswaI79/bu7tfbdkJk4CxYkerUqnM1lPG/9ILRNwwIEB8VdPN3b4EIAwe1gKpbKxa9/zT27cV7e3dgVsNyI7Nm+8pkWkprYei4e7JPnAKggR0/qPGg2zh9qUEYYSwdTXs+1PO27q6ior2wJVbt2zhkGWgUCYXGlACg3giggKmuXmQmduXzkGkAxfW6OI/nnqYk1NXV9fuvRIQbpJlyw66KyVKpaSFNAAOzJPsAw1MQNGUXusL777C9QSgg+D/3D6+fvjwFCIV3oGBiOzkkYUeyjJQJPrsu8Dkh7B1ECIgoLlogPmXByH5OHPlORKnAMkBgyLORsjChcESEr2+NjXXJwAVFDBabdGsXm9fzhDC17GUIa87Os6eBQQNb++eiAcoZRIlKKv0+tKiJpUvIoTAVFn3Ul86CPwC43DKkJvpHenHAYFU7PHe4x1oupODMAlkExCoSPSK0iKBm68BkcvlVdN71hcMAJABQvhme0d6+nGKVGzbsweQnseFs7gDAMgqYLxKm5d6IiGnKbL5a+vCNDDYKCm2b4I6tm8nCCRm2zZQjCZZwRASWD9TFJKCsFpfFY5BEqrNH/zXN87EaOAYKSkP7GN3794NCkHCo6OjjZBy452gwSkKhaKgIKxU5aYlBKRqTo/6GvZ9MzY2iCEQMMwjHh7uoCAC8SoouJvoto4h8vwxf9WXLgOJjCAeCd+7d280HJc3j5geFxju7sGrMIh4eRUkA6MNxSRWzTK9fSF2KXZvMmIz7O2DQNkOSSeGKeLaC7IJFAUqiISFARO6To5IIqkxX19YxjFYBhBGSHhMTAxD/r14d4OiYEhYcoFLrdYXjMT86Ub1FeO+f8TGgsAQVJJiEIk2N4kHRTZtAoVDXFySk1+WarWo2HA/NBYfPkaWYU+DBihJ4eHhxpNs7Q0hxwUBxQsQplAmQJ4YGjrYUN8UISN4JAgNRMwunkeCg0HhEWSgAQGJ+XPoy8OFww9g32DwCDBJSX2YxINHIBLOoIHVyLX5A8hP3egyTBD73Wc5xGy7TBClhDfYMKdr8TYenXYzNuOEaexP2B9PwjAkmkOcAaH/+t67584Cf3tLsLIMo1S4uJw2istpWM1Pm36j+veWyZhJmJE0I2iG00zEDORjNW2glZXVtGnTBg6cYGU1YRgE/gy/mWA1bMIwmz/QGVRJ3BG6bAAAAABJRU5ErkJggg==", 1, "prism-sidebar-foot__logo"], ["href", "https://dyingangel666.github.io/ng-prism/#/", "target", "_blank", "rel", "noopener", 1, "prism-sidebar-foot__link"], ["prismResizer", "", "axis", "x", 1, "prism-resizer-col", 3, "valueChange", "min", "max", "value"], [1, "prism-main__view-bar"], [1, "prism-canvas-wrap"], [1, "prism-main__code-drawer"], ["prismResizer", "", "axis", "y", 1, "prism-resizer-row", 3, "valueChange", "min", "max", "value"], [1, "prism-main__panel"], ["viewBox", "0 0 24 24", "fill", "none", "stroke", "currentColor", "stroke-width", "1.5", "stroke-linecap", "round", "stroke-linejoin", "round", 1, "prism-shell__empty-icon"], ["d", "M12 2L4 14h16L12 2z"], ["d", "M4 14l4 8h8l4-8"], [1, "prism-shell__empty-text"], [1, "prism-shell__empty-hint"]], template: function PrismShellComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 8, vars: 8, consts: [[1, "prism-shell"], [1, "prism-shell__header"], [1, "prism-body"], [1, "prism-main"], [1, "prism-main__canvas"], [1, "prism-shell__empty"], [1, "prism-sidebar-wrap"], [1, "prism-sidebar-foot"], ["alt", "ng-prism logo", "src", "data:image/png;base64,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", 1, "prism-sidebar-foot__logo"], ["href", "https://dyingangel666.github.io/ng-prism/#/", "target", "_blank", "rel", "noopener", 1, "prism-sidebar-foot__link"], ["prismResizer", "", "axis", "x", 1, "prism-resizer-col", 3, "valueChange", "min", "max", "value"], [1, "prism-main__view-bar"], [1, "prism-canvas-wrap"], ["prismResizer", "", "axis", "y", 1, "prism-resizer-row", 3, "valueChange", "min", "max", "value"], [1, "prism-main__panel"], ["viewBox", "0 0 24 24", "fill", "none", "stroke", "currentColor", "stroke-width", "1.5", "stroke-linecap", "round", "stroke-linejoin", "round", 1, "prism-shell__empty-icon"], ["d", "M12 2L4 14h16L12 2z"], ["d", "M4 14l4 8h8l4-8"], [1, "prism-shell__empty-text"], [1, "prism-shell__empty-hint"]], template: function PrismShellComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "prism-header", 1);
             i0.ɵɵelementStart(2, "div", 2);
@@ -195,7 +194,7 @@ export class PrismShellComponent {
             PrismViewPanelHostComponent,
             PrismResizerDirective,
             PrismCanvasToolbarComponent,
-            PrismCodeDrawerComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n    .prism-shell[_ngcontent-%COMP%] {\n      height: 100vh;\n      display: grid;\n      grid-template-rows: 52px 1fr;\n      background: var(--prism-void);\n      font-family: var(--font-sans, var(--prism-font-sans));\n      color: var(--prism-text);\n      overflow: hidden;\n    }\n\n    .prism-body[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: var(--sw, 264px) 4px 1fr;\n      min-height: 0;\n    }\n    .prism-body--no-sidebar[_ngcontent-%COMP%] {\n      grid-template-columns: 1fr;\n    }\n\n    .prism-sidebar-wrap[_ngcontent-%COMP%] {\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .prism-sidebar-wrap[_ngcontent-%COMP%]   prism-sidebar[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n    }\n\n    .prism-sidebar-foot[_ngcontent-%COMP%] {\n      border-top: 1px solid var(--prism-border);\n      padding: 10px 14px;\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .prism-sidebar-foot__logo[_ngcontent-%COMP%] {\n      width: 16px;\n      flex-shrink: 0;\n    }\n    .prism-sidebar-foot__link[_ngcontent-%COMP%] {\n      color: var(--prism-text-ghost);\n      text-decoration: none;\n      transition: color var(--dur-fast);\n    }\n    .prism-sidebar-foot__link[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text-2);\n    }\n\n    .prism-resizer-col[_ngcontent-%COMP%] {\n      width: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-col[_ngcontent-%COMP%]:hover, \n   .prism-resizer-col.active[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n    }\n\n    .prism-main[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      background: var(--prism-void);\n      overflow: hidden;\n    }\n\n    .prism-resizer-row[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      height: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-row[_ngcontent-%COMP%]:hover, \n   .prism-resizer-row.active[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n    }\n\n    .prism-canvas-wrap[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-rows: auto minmax(0, 1fr);\n      background: var(--prism-bg-surface);\n      overflow: hidden;\n    }\n    .prism-main__code-drawer[_ngcontent-%COMP%] { flex-shrink: 0; }\n    .prism-main__view-bar[_ngcontent-%COMP%] { flex-shrink: 0; }\n    .prism-main__canvas[_ngcontent-%COMP%] { flex: 1; min-height: 0; overflow: auto; }\n\n    .prism-main__panel[_ngcontent-%COMP%] {\n      height: var(--ph, 260px);\n      flex-shrink: 0;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .prism-shell__empty[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      grid-row: 1 / -1;\n    }\n    .prism-shell__empty-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      color: var(--prism-text-ghost);\n      margin-bottom: 8px;\n    }\n    .prism-shell__empty-text[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--fs-xl);\n      font-weight: 500;\n      color: var(--prism-text-muted);\n    }\n    .prism-shell__empty-hint[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-ghost);\n    }"], changeDetection: 0 });
+            PrismTemplatePopoverComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n    .prism-shell[_ngcontent-%COMP%] {\n      height: 100vh;\n      display: grid;\n      grid-template-rows: 52px 1fr;\n      background: var(--prism-void);\n      font-family: var(--font-sans, var(--prism-font-sans));\n      color: var(--prism-text);\n      overflow: hidden;\n    }\n\n    .prism-body[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: var(--sw, 264px) 4px 1fr;\n      min-height: 0;\n    }\n    .prism-body--no-sidebar[_ngcontent-%COMP%] {\n      grid-template-columns: 1fr;\n    }\n\n    .prism-sidebar-wrap[_ngcontent-%COMP%] {\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .prism-sidebar-wrap[_ngcontent-%COMP%]   prism-sidebar[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n    }\n\n    .prism-sidebar-foot[_ngcontent-%COMP%] {\n      border-top: 1px solid var(--prism-border);\n      padding: 10px 14px;\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .prism-sidebar-foot__logo[_ngcontent-%COMP%] {\n      width: 16px;\n      flex-shrink: 0;\n    }\n    .prism-sidebar-foot__link[_ngcontent-%COMP%] {\n      color: var(--prism-text-ghost);\n      text-decoration: none;\n      transition: color var(--dur-fast);\n    }\n    .prism-sidebar-foot__link[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text-2);\n    }\n\n    .prism-resizer-col[_ngcontent-%COMP%] {\n      width: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-col[_ngcontent-%COMP%]:hover, \n   .prism-resizer-col.active[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n    }\n\n    .prism-main[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      background: var(--prism-void);\n      overflow: hidden;\n    }\n\n    .prism-resizer-row[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      height: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-row[_ngcontent-%COMP%]:hover, \n   .prism-resizer-row.active[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n    }\n\n    .prism-canvas-wrap[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-rows: auto minmax(0, 1fr);\n      background: var(--prism-bg-surface);\n      overflow: hidden;\n      position: relative;\n    }\n    .prism-main__view-bar[_ngcontent-%COMP%] { flex-shrink: 0; }\n    .prism-main__canvas[_ngcontent-%COMP%] { flex: 1; min-height: 0; overflow: auto; }\n\n    .prism-main__panel[_ngcontent-%COMP%] {\n      height: var(--ph, 260px);\n      flex-shrink: 0;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .prism-shell__empty[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      grid-row: 1 / -1;\n    }\n    .prism-shell__empty-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      color: var(--prism-text-ghost);\n      margin-bottom: 8px;\n    }\n    .prism-shell__empty-text[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--fs-xl);\n      font-weight: 500;\n      color: var(--prism-text-muted);\n    }\n    .prism-shell__empty-hint[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-ghost);\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismShellComponent, [{
         type: Component,
@@ -211,7 +210,7 @@ export class PrismShellComponent {
                     PrismViewPanelHostComponent,
                     PrismResizerDirective,
                     PrismCanvasToolbarComponent,
-                    PrismCodeDrawerComponent,
+                    PrismTemplatePopoverComponent,
                 ], template: `
     <div class="prism-shell" [style]="shellStyle()">
       <prism-header class="prism-shell__header" />
@@ -265,8 +264,8 @@ export class PrismShellComponent {
           <div class="prism-canvas-wrap">
             <prism-canvas-toolbar />
             <prism-renderer />
+            <prism-template-popover />
           </div>
-          <prism-code-drawer class="prism-main__code-drawer" />
           } @else {
           <prism-view-panel-host class="prism-main__canvas" />
           } @if (showPanel()) {
@@ -307,7 +306,7 @@ export class PrismShellComponent {
         </main>
       </div>
     </div>
-  `, styles: ["\n    :host { display: block; height: 100%; }\n\n    .prism-shell {\n      height: 100vh;\n      display: grid;\n      grid-template-rows: 52px 1fr;\n      background: var(--prism-void);\n      font-family: var(--font-sans, var(--prism-font-sans));\n      color: var(--prism-text);\n      overflow: hidden;\n    }\n\n    .prism-body {\n      display: grid;\n      grid-template-columns: var(--sw, 264px) 4px 1fr;\n      min-height: 0;\n    }\n    .prism-body--no-sidebar {\n      grid-template-columns: 1fr;\n    }\n\n    .prism-sidebar-wrap {\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .prism-sidebar-wrap prism-sidebar {\n      flex: 1;\n      min-height: 0;\n    }\n\n    .prism-sidebar-foot {\n      border-top: 1px solid var(--prism-border);\n      padding: 10px 14px;\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .prism-sidebar-foot__logo {\n      width: 16px;\n      flex-shrink: 0;\n    }\n    .prism-sidebar-foot__link {\n      color: var(--prism-text-ghost);\n      text-decoration: none;\n      transition: color var(--dur-fast);\n    }\n    .prism-sidebar-foot__link:hover {\n      color: var(--prism-text-2);\n    }\n\n    .prism-resizer-col {\n      width: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-col:hover,\n    .prism-resizer-col.active {\n      background: var(--prism-primary);\n    }\n\n    .prism-main {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      background: var(--prism-void);\n      overflow: hidden;\n    }\n\n    .prism-resizer-row {\n      flex-shrink: 0;\n      height: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-row:hover,\n    .prism-resizer-row.active {\n      background: var(--prism-primary);\n    }\n\n    .prism-canvas-wrap {\n      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-rows: auto minmax(0, 1fr);\n      background: var(--prism-bg-surface);\n      overflow: hidden;\n    }\n    .prism-main__code-drawer { flex-shrink: 0; }\n    .prism-main__view-bar { flex-shrink: 0; }\n    .prism-main__canvas { flex: 1; min-height: 0; overflow: auto; }\n\n    .prism-main__panel {\n      height: var(--ph, 260px);\n      flex-shrink: 0;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .prism-shell__empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      grid-row: 1 / -1;\n    }\n    .prism-shell__empty-icon {\n      width: 48px;\n      height: 48px;\n      color: var(--prism-text-ghost);\n      margin-bottom: 8px;\n    }\n    .prism-shell__empty-text {\n      margin: 0;\n      font-size: var(--fs-xl);\n      font-weight: 500;\n      color: var(--prism-text-muted);\n    }\n    .prism-shell__empty-hint {\n      margin: 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-ghost);\n    }\n  "] }]
+  `, styles: ["\n    :host { display: block; height: 100%; }\n\n    .prism-shell {\n      height: 100vh;\n      display: grid;\n      grid-template-rows: 52px 1fr;\n      background: var(--prism-void);\n      font-family: var(--font-sans, var(--prism-font-sans));\n      color: var(--prism-text);\n      overflow: hidden;\n    }\n\n    .prism-body {\n      display: grid;\n      grid-template-columns: var(--sw, 264px) 4px 1fr;\n      min-height: 0;\n    }\n    .prism-body--no-sidebar {\n      grid-template-columns: 1fr;\n    }\n\n    .prism-sidebar-wrap {\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .prism-sidebar-wrap prism-sidebar {\n      flex: 1;\n      min-height: 0;\n    }\n\n    .prism-sidebar-foot {\n      border-top: 1px solid var(--prism-border);\n      padding: 10px 14px;\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .prism-sidebar-foot__logo {\n      width: 16px;\n      flex-shrink: 0;\n    }\n    .prism-sidebar-foot__link {\n      color: var(--prism-text-ghost);\n      text-decoration: none;\n      transition: color var(--dur-fast);\n    }\n    .prism-sidebar-foot__link:hover {\n      color: var(--prism-text-2);\n    }\n\n    .prism-resizer-col {\n      width: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-col:hover,\n    .prism-resizer-col.active {\n      background: var(--prism-primary);\n    }\n\n    .prism-main {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      background: var(--prism-void);\n      overflow: hidden;\n    }\n\n    .prism-resizer-row {\n      flex-shrink: 0;\n      height: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-row:hover,\n    .prism-resizer-row.active {\n      background: var(--prism-primary);\n    }\n\n    .prism-canvas-wrap {\n      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-rows: auto minmax(0, 1fr);\n      background: var(--prism-bg-surface);\n      overflow: hidden;\n      position: relative;\n    }\n    .prism-main__view-bar { flex-shrink: 0; }\n    .prism-main__canvas { flex: 1; min-height: 0; overflow: auto; }\n\n    .prism-main__panel {\n      height: var(--ph, 260px);\n      flex-shrink: 0;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .prism-shell__empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      grid-row: 1 / -1;\n    }\n    .prism-shell__empty-icon {\n      width: 48px;\n      height: 48px;\n      color: var(--prism-text-ghost);\n      margin-bottom: 8px;\n    }\n    .prism-shell__empty-text {\n      margin: 0;\n      font-size: var(--fs-xl);\n      font-weight: 500;\n      color: var(--prism-text-muted);\n    }\n    .prism-shell__empty-hint {\n      margin: 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-ghost);\n    }\n  "] }]
     }], () => [], { onKeyDown: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]

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