@ng-prism/core 21.10.0 → 21.10.2

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

@@ -1,9 +1,11 @@
 import { PrismCanvasService, type CanvasBg } from '../services/prism-canvas.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
+import { PrismLayoutService } from '../services/prism-layout.service.js';
 import * as i0 from "@angular/core";
 export declare class PrismCanvasToolbarComponent {
     protected readonly canvas: PrismCanvasService;
     protected readonly variantBg: PrismVariantBgService;
+    protected readonly layout: PrismLayoutService;
     protected setBg(bg: CanvasBg): void;
     protected readonly bgs: CanvasBg[];
     protected readonly zooms: {

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

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

@@ -2,19 +2,20 @@ import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import { PrismCanvasService, } from '../services/prism-canvas.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
+import { PrismLayoutService } from '../services/prism-layout.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.value;
 function PrismCanvasToolbarComponent_For_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 11);
-    i0.ɵɵelement(1, "path", 12);
+    i0.ɵɵelementStart(0, "svg", 14);
+    i0.ɵɵelement(1, "path", 15);
     i0.ɵɵelementEnd();
 } }
 function PrismCanvasToolbarComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 10);
+    i0.ɵɵelementStart(0, "button", 13);
     i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_5_Template_button_click_0_listener() { const bg_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setBg(bg_r2)); });
-    i0.ɵɵconditionalCreate(1, PrismCanvasToolbarComponent_For_5_Conditional_1_Template, 2, 0, ":svg:svg", 11);
+    i0.ɵɵconditionalCreate(1, PrismCanvasToolbarComponent_For_5_Conditional_1_Template, 2, 0, ":svg:svg", 14);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -29,7 +30,7 @@ function PrismCanvasToolbarComponent_For_5_Template(rf, ctx) { if (rf & 1) {
 } }
 function PrismCanvasToolbarComponent_For_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 13);
+    i0.ɵɵelementStart(0, "button", 16);
     i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_11_Template_button_click_0_listener() { const z_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.canvas.setZoom(z_r5.value)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -43,6 +44,7 @@ function PrismCanvasToolbarComponent_For_11_Template(rf, ctx) { if (rf & 1) {
 export class PrismCanvasToolbarComponent {
     canvas = inject(PrismCanvasService);
     variantBg = inject(PrismVariantBgService);
+    layout = inject(PrismLayoutService);
     setBg(bg) {
         if (this.variantBg.recommended() !== null) {
             this.variantBg.setOverride(bg);
@@ -68,7 +70,7 @@ 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", "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) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasToolbarComponent, selectors: [["prism-canvas-toolbar"]], decls: 23, vars: 9, consts: [[1, "canvas-toolbar"], [1, "tool-label"], [1, "tool-group"], [1, "tool-btn", 3, "tool-btn--active", "tool-btn--recommended", "title"], [1, "tool-sep"], [1, "tool-btn", 3, "tool-btn--active"], ["title", "Toggle guides", "aria-label", "Toggle guides", 1, "tool-btn", 3, "click"], ["name", "crosshair", 3, "size"], ["title", "Toggle rulers", "aria-label", "Toggle rulers", 1, "tool-btn", 3, "click"], ["name", "move", 3, "size"], [1, "tool-spacer"], ["title", "Toggle Angular template", "aria-label", "Toggle Angular template", 1, "tool-btn", "tool-btn--tpl", 3, "click"], ["name", "code", 3, "size"], [1, "tool-btn", 3, "click", "title"], ["width", "11", "height", "11", "viewBox", "0 0 24 24", "fill", "#facc15", "aria-label", "Recommended", 1, "bg-star"], ["d", "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"], [1, "tool-btn", 3, "click"]], template: function PrismCanvasToolbarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
             i0.ɵɵtext(2, "Canvas");
             i0.ɵɵelementEnd();
@@ -92,6 +94,12 @@ export class PrismCanvasToolbarComponent {
             i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_16_listener() { return ctx.canvas.toggleRulers(); });
             i0.ɵɵelement(17, "prism-icon", 9);
             i0.ɵɵtext(18, " Rulers ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(19, "div", 10);
+            i0.ɵɵelementStart(20, "button", 11);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_20_listener() { return ctx.layout.toggleTemplatePopover(); });
+            i0.ɵɵelement(21, "prism-icon", 12);
+            i0.ɵɵtext(22, " Template ");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(4);
@@ -106,7 +114,11 @@ export class PrismCanvasToolbarComponent {
             i0.ɵɵclassProp("tool-btn--active", ctx.canvas.rulers());
             i0.ɵɵadvance();
             i0.ɵɵproperty("size", 13);
-        } }, dependencies: [PrismIconComponent], styles: [".canvas-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 20px;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg);\n      min-height: 44px;\n    }\n\n    .tool-group[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 1px;\n      padding: 2px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-md);\n    }\n\n    .tool-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      padding: 0 9px;\n      border-radius: var(--radius-sm);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n      transition: all var(--dur-fast);\n      font-weight: 500;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .tool-btn[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn--active[_ngcontent-%COMP%] {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n    .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 });
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("tool-btn--tpl-active", ctx.layout.templatePopoverVisible());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("size", 13);
+        } }, dependencies: [PrismIconComponent], styles: [".canvas-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 20px;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg);\n      min-height: 44px;\n    }\n\n    .tool-group[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 1px;\n      padding: 2px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-md);\n    }\n\n    .tool-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      padding: 0 9px;\n      border-radius: var(--radius-sm);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n      transition: all var(--dur-fast);\n      font-weight: 500;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .tool-btn[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn--active[_ngcontent-%COMP%] {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n    .bg-star[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.4));\n    }\n\n    .tool-sep[_ngcontent-%COMP%] {\n      width: 1px;\n      height: 18px;\n      background: var(--prism-border);\n      margin: 0 4px;\n    }\n\n    .tool-label[_ngcontent-%COMP%] {\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n      margin-right: 2px;\n    }\n\n    .tool-spacer[_ngcontent-%COMP%] { flex: 1; }\n\n    .tool-btn--tpl[_ngcontent-%COMP%] {\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: 1px solid\n        color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      font-family: var(--font-mono);\n    }\n    .tool-btn--tpl[_ngcontent-%COMP%]:hover {\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n    }\n    .tool-btn--tpl.tool-btn--tpl-active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-primary) 22%, transparent);\n      box-shadow: inset 0 0 0 1px\n        color-mix(in srgb, var(--prism-primary) 35%, transparent);\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasToolbarComponent, [{
         type: Component,
@@ -178,7 +190,20 @@ export class PrismCanvasToolbarComponent {
         <prism-icon name="move" [size]="13" />
         Rulers
       </button>
+
+      <div class="tool-spacer"></div>
+
+      <button
+        class="tool-btn tool-btn--tpl"
+        [class.tool-btn--tpl-active]="layout.templatePopoverVisible()"
+        (click)="layout.toggleTemplatePopover()"
+        title="Toggle Angular template"
+        aria-label="Toggle Angular template"
+      >
+        <prism-icon name="code" [size]="13" />
+        Template
+      </button>
     </div>
-  `, styles: ["\n    .canvas-toolbar {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 20px;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg);\n      min-height: 44px;\n    }\n\n    .tool-group {\n      display: flex;\n      align-items: center;\n      gap: 1px;\n      padding: 2px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-md);\n    }\n\n    .tool-btn {\n      height: 24px;\n      padding: 0 9px;\n      border-radius: var(--radius-sm);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n      transition: all var(--dur-fast);\n      font-weight: 500;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .tool-btn:hover {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn--active {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n    .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  "] }]
+  `, styles: ["\n    .canvas-toolbar {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 20px;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg);\n      min-height: 44px;\n    }\n\n    .tool-group {\n      display: flex;\n      align-items: center;\n      gap: 1px;\n      padding: 2px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-md);\n    }\n\n    .tool-btn {\n      height: 24px;\n      padding: 0 9px;\n      border-radius: var(--radius-sm);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n      transition: all var(--dur-fast);\n      font-weight: 500;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .tool-btn:hover {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn--active {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n    .bg-star {\n      flex-shrink: 0;\n      filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.4));\n    }\n\n    .tool-sep {\n      width: 1px;\n      height: 18px;\n      background: var(--prism-border);\n      margin: 0 4px;\n    }\n\n    .tool-label {\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n      margin-right: 2px;\n    }\n\n    .tool-spacer { flex: 1; }\n\n    .tool-btn--tpl {\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: 1px solid\n        color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      font-family: var(--font-mono);\n    }\n    .tool-btn--tpl:hover {\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n    }\n    .tool-btn--tpl.tool-btn--tpl-active {\n      background: color-mix(in srgb, var(--prism-primary) 22%, transparent);\n      box-shadow: inset 0 0 0 1px\n        color-mix(in srgb, var(--prism-primary) 35%, transparent);\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 153 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 185 }); })();

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

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

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

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

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

@@ -0,0 +1,162 @@
+import { Component, inject, computed, signal, ChangeDetectionStrategy, HostListener, } from '@angular/core';
+import { PrismIconComponent } from '../icons/prism-icon.component.js';
+import { PrismLayoutService } from '../services/prism-layout.service.js';
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { PrismRendererService } from '../services/prism-renderer.service.js';
+import { generateSnippet } from '../renderer/snippet-generator.js';
+import * as i0 from "@angular/core";
+function PrismTemplatePopoverComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵlistener("click", function PrismTemplatePopoverComponent_Conditional_0_Template_div_click_0_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelementStart(1, "div", 2);
+    i0.ɵɵelement(2, "prism-icon", 3);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Angular Template");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 4);
+    i0.ɵɵlistener("click", function PrismTemplatePopoverComponent_Conditional_0_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copy()); });
+    i0.ɵɵelement(6, "prism-icon", 5);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 6);
+    i0.ɵɵlistener("click", function PrismTemplatePopoverComponent_Conditional_0_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.layoutService.closeTemplatePopover()); });
+    i0.ɵɵelement(9, "prism-icon", 7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(10, "pre", 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("size", 13);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("title", ctx_r1.copied() ? "Copied!" : "Copy to clipboard");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", ctx_r1.copied() ? "shield-check" : "copy")("size", 12);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.copied() ? "Copied" : "Copy", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("size", 13);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.highlighted(), i0.ɵɵsanitizeHtml);
+} }
+function esc(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+function tokenizeXml(code) {
+    const re = /(\/\/[^\n]*)|(<\/?[\w-]+)|(\[[\w.]+\]|[\w-]+)=|"([^"]*)"|(\/>|>)|(\n)|([^<\["\n/>=]+|[/=])/g;
+    let out = '';
+    let m;
+    while ((m = re.exec(code)) !== null) {
+        if (m[1] != null) {
+            out += `<span class="tok-com">${esc(m[1])}</span>`;
+        }
+        else if (m[2] != null) {
+            out += `<span class="tok-tag">${esc(m[2])}</span>`;
+        }
+        else if (m[3] != null) {
+            out += `<span class="tok-attr">${esc(m[3])}</span>=`;
+        }
+        else if (m[4] != null) {
+            out += `"<span class="tok-str">${esc(m[4])}</span>"`;
+        }
+        else if (m[5] != null) {
+            out += `<span class="tok-tag">${esc(m[5])}</span>`;
+        }
+        else if (m[6] != null) {
+            out += '\n';
+        }
+        else {
+            out += esc(m[0]);
+        }
+    }
+    return out;
+}
+export class PrismTemplatePopoverComponent {
+    navigationService = inject(PrismNavigationService);
+    rendererService = inject(PrismRendererService);
+    layoutService = inject(PrismLayoutService);
+    copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : []));
+    copiedResetTimer = null;
+    snippet = computed(() => {
+        const comp = this.navigationService.activeComponent();
+        if (!comp)
+            return '';
+        const variant = comp.meta.showcaseConfig.variants?.[this.rendererService.activeVariantIndex()];
+        const explicitKeys = variant?.inputs
+            ? new Set(Object.keys(variant.inputs))
+            : undefined;
+        const directiveOptions = comp.meta.componentMeta.isDirective
+            ? { host: comp.meta.showcaseConfig.host }
+            : undefined;
+        return generateSnippet(comp.meta.componentMeta.selector, comp.meta.inputs, this.rendererService.inputValues(), explicitKeys, this.rendererService.activeContent(), directiveOptions);
+    }, ...(ngDevMode ? [{ debugName: "snippet" }] : []));
+    highlighted = computed(() => {
+        const code = this.snippet();
+        if (!code)
+            return '';
+        return tokenizeXml(code);
+    }, ...(ngDevMode ? [{ debugName: "highlighted" }] : []));
+    copy() {
+        const code = this.snippet();
+        if (!code)
+            return;
+        navigator.clipboard?.writeText(code);
+        this.copied.set(true);
+        if (this.copiedResetTimer)
+            clearTimeout(this.copiedResetTimer);
+        this.copiedResetTimer = setTimeout(() => this.copied.set(false), 1500);
+    }
+    onEscape() {
+        if (this.layoutService.templatePopoverVisible()) {
+            this.layoutService.closeTemplatePopover();
+        }
+    }
+    static ɵfac = function PrismTemplatePopoverComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismTemplatePopoverComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismTemplatePopoverComponent, selectors: [["prism-template-popover"]], hostBindings: function PrismTemplatePopoverComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown.escape", function PrismTemplatePopoverComponent_keydown_escape_HostBindingHandler() { return ctx.onEscape(); }, i0.ɵɵresolveDocument);
+        } }, decls: 1, vars: 1, consts: [["role", "dialog", "aria-label", "Angular template", 1, "tpl-popover"], ["role", "dialog", "aria-label", "Angular template", 1, "tpl-popover", 3, "click"], [1, "tpl-popover-head"], ["name", "code", 3, "size"], [1, "tpl-popover-copy", 3, "click", "title"], [3, "name", "size"], ["aria-label", "Close", "title", "Close (Esc)", 1, "tpl-popover-close", 3, "click"], ["name", "x", 3, "size"], [1, "tpl-popover-body", 3, "innerHTML"]], template: function PrismTemplatePopoverComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismTemplatePopoverComponent_Conditional_0_Template, 11, 7, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.layoutService.templatePopoverVisible() ? 0 : -1);
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: contents; }\n\n    .tpl-popover[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 20px;\n      top: 8px;\n      width: 520px;\n      max-width: calc(100% - 40px);\n      max-height: min(420px, calc(100% - 16px));\n      background: var(--prism-bg-elevated);\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--radius-lg, 10px);\n      box-shadow:\n        0 20px 60px rgba(0, 0, 0, 0.45),\n        0 0 0 1px color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      display: flex;\n      flex-direction: column;\n      z-index: 30;\n      overflow: hidden;\n      animation: _ngcontent-%COMP%_tpl-fade-in var(--dur-fast, 0.15s) var(--ease-default, ease-out);\n    }\n\n    @keyframes _ngcontent-%COMP%_tpl-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(-8px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    .tpl-popover-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 12px 0 16px;\n      height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n      background: linear-gradient(\n        180deg,\n        var(--prism-bg-surface),\n        var(--prism-bg-elevated)\n      );\n      flex-shrink: 0;\n    }\n    .tpl-popover-head[_ngcontent-%COMP%]    > prism-icon[_ngcontent-%COMP%] {\n      color: var(--prism-text-muted);\n    }\n    .tpl-popover-head[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n      flex: 1;\n      font-size: var(--fs-xs);\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--prism-text-2);\n    }\n\n    .tpl-popover-copy[_ngcontent-%COMP%] {\n      height: 26px;\n      padding: 0 10px;\n      font-size: var(--fs-sm);\n      font-family: var(--font-sans);\n      font-weight: 500;\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      border-radius: var(--radius-sm, 5px);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      cursor: pointer;\n      transition: background var(--dur-fast);\n    }\n    .tpl-popover-copy[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .tpl-popover-close[_ngcontent-%COMP%] {\n      width: 26px;\n      height: 26px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--radius-sm, 5px);\n      color: var(--prism-text-muted);\n      background: transparent;\n      border: 0;\n      cursor: pointer;\n      transition: background var(--dur-fast), color var(--dur-fast);\n    }\n    .tpl-popover-close[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      background: var(--prism-input-bg);\n    }\n\n    .tpl-popover-body[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 14px 18px;\n      font-family: var(--font-mono);\n      font-size: var(--fs-md);\n      line-height: 1.7;\n      color: var(--prism-text-2);\n      overflow: auto;\n      background: var(--prism-bg);\n      flex: 1;\n      min-height: 0;\n      white-space: pre;\n    }\n    .tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n    .tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n      background: var(--prism-border-strong);\n      border-radius: 3px;\n    }\n\n    [_nghost-%COMP%]     .tok-tag { color: var(--prism-code-tag); }\n    [_nghost-%COMP%]     .tok-attr { color: var(--prism-code-attr); }\n    [_nghost-%COMP%]     .tok-str { color: var(--prism-code-str); }\n    [_nghost-%COMP%]     .tok-com { color: var(--prism-code-com); font-style: italic; }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismTemplatePopoverComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-template-popover', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
+    @if (layoutService.templatePopoverVisible()) {
+    <div
+      class="tpl-popover"
+      role="dialog"
+      aria-label="Angular template"
+      (click)="$event.stopPropagation()"
+    >
+      <div class="tpl-popover-head">
+        <prism-icon name="code" [size]="13" />
+        <span>Angular Template</span>
+        <button
+          class="tpl-popover-copy"
+          (click)="copy()"
+          [title]="copied() ? 'Copied!' : 'Copy to clipboard'"
+        >
+          <prism-icon [name]="copied() ? 'shield-check' : 'copy'" [size]="12" />
+          {{ copied() ? 'Copied' : 'Copy' }}
+        </button>
+        <button
+          class="tpl-popover-close"
+          (click)="layoutService.closeTemplatePopover()"
+          aria-label="Close"
+          title="Close (Esc)"
+        >
+          <prism-icon name="x" [size]="13" />
+        </button>
+      </div>
+      <pre class="tpl-popover-body" [innerHTML]="highlighted()"></pre>
+    </div>
+    }
+  `, styles: ["\n    :host { display: contents; }\n\n    .tpl-popover {\n      position: absolute;\n      right: 20px;\n      top: 8px;\n      width: 520px;\n      max-width: calc(100% - 40px);\n      max-height: min(420px, calc(100% - 16px));\n      background: var(--prism-bg-elevated);\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--radius-lg, 10px);\n      box-shadow:\n        0 20px 60px rgba(0, 0, 0, 0.45),\n        0 0 0 1px color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      display: flex;\n      flex-direction: column;\n      z-index: 30;\n      overflow: hidden;\n      animation: tpl-fade-in var(--dur-fast, 0.15s) var(--ease-default, ease-out);\n    }\n\n    @keyframes tpl-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(-8px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    .tpl-popover-head {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 12px 0 16px;\n      height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n      background: linear-gradient(\n        180deg,\n        var(--prism-bg-surface),\n        var(--prism-bg-elevated)\n      );\n      flex-shrink: 0;\n    }\n    .tpl-popover-head > prism-icon {\n      color: var(--prism-text-muted);\n    }\n    .tpl-popover-head > span {\n      flex: 1;\n      font-size: var(--fs-xs);\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--prism-text-2);\n    }\n\n    .tpl-popover-copy {\n      height: 26px;\n      padding: 0 10px;\n      font-size: var(--fs-sm);\n      font-family: var(--font-sans);\n      font-weight: 500;\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      border-radius: var(--radius-sm, 5px);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      cursor: pointer;\n      transition: background var(--dur-fast);\n    }\n    .tpl-popover-copy:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .tpl-popover-close {\n      width: 26px;\n      height: 26px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--radius-sm, 5px);\n      color: var(--prism-text-muted);\n      background: transparent;\n      border: 0;\n      cursor: pointer;\n      transition: background var(--dur-fast), color var(--dur-fast);\n    }\n    .tpl-popover-close:hover {\n      color: var(--prism-text);\n      background: var(--prism-input-bg);\n    }\n\n    .tpl-popover-body {\n      margin: 0;\n      padding: 14px 18px;\n      font-family: var(--font-mono);\n      font-size: var(--fs-md);\n      line-height: 1.7;\n      color: var(--prism-text-2);\n      overflow: auto;\n      background: var(--prism-bg);\n      flex: 1;\n      min-height: 0;\n      white-space: pre;\n    }\n    .tpl-popover-body::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n    .tpl-popover-body::-webkit-scrollbar-thumb {\n      background: var(--prism-border-strong);\n      border-radius: 3px;\n    }\n\n    :host ::ng-deep .tok-tag { color: var(--prism-code-tag); }\n    :host ::ng-deep .tok-attr { color: var(--prism-code-attr); }\n    :host ::ng-deep .tok-str { color: var(--prism-code-str); }\n    :host ::ng-deep .tok-com { color: var(--prism-code-com); font-style: italic; }\n  "] }]
+    }], null, { onEscape: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismTemplatePopoverComponent, { className: "PrismTemplatePopoverComponent", filePath: "app/canvas/prism-template-popover.component.ts", lineNumber: 206 }); })();

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

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

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

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

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

@@ -7,13 +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 codeDrawerCollapsed: import("@angular/core").WritableSignal<boolean>;
+    readonly templatePopoverVisible: import("@angular/core").WritableSignal<boolean>;
     constructor();
     toggleSidebar(): void;
     toggleAddons(): void;
     toggleToolbar(): void;
     toggleOrientation(): void;
-    toggleCodeDrawer(): 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;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"}
+{"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,7 +9,7 @@ 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" }] : []));
+    templatePopoverVisible = signal(false, ...(ngDevMode ? [{ debugName: "templatePopoverVisible" }] : []));
     constructor() {
         this.loadFromStorage();
     }
@@ -29,9 +29,11 @@ export class PrismLayoutService {
         this.addonsOrientation.update((v) => (v === 'bottom' ? 'right' : 'bottom'));
         this.saveToStorage();
     }
-    toggleCodeDrawer() {
-        this.codeDrawerCollapsed.update((v) => !v);
-        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)));
@@ -67,8 +69,6 @@ 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 { }
     }
@@ -81,7 +81,6 @@ 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/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,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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"], [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/shared/prism-pipeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-pipeline.d.ts","sourceRoot":"","sources":["../../../src/builder/shared/prism-pipeline.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAMpE,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,mGAAmG;IACnG,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,wBAAgB,mBAAmB,IAAI,kBAAkB,CAExD;AAED,wBAAsB,gBAAgB,CACpC,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,kBAAkB,GACxB,OAAO,CAAC,mBAAmB,CAAC,CAmD9B"}
+{"version":3,"file":"prism-pipeline.d.ts","sourceRoot":"","sources":["../../../src/builder/shared/prism-pipeline.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAMhE,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAMpE,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,mGAAmG;IACnG,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,wBAAgB,mBAAmB,IAAI,kBAAkB,CAExD;AAED,wBAAsB,gBAAgB,CACpC,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,kBAAkB,GACxB,OAAO,CAAC,mBAAmB,CAAC,CAoD9B"}

package/dist/builder/shared/prism-pipeline.js

@@ -1,5 +1,5 @@
 import { join, dirname } from 'path';
-import { writeFileSync, readFileSync, mkdirSync, statSync, renameSync, existsSync, unlinkSync } from 'fs';
+import { writeFileSync, readFileSync, mkdirSync, statSync, renameSync, existsSync, unlinkSync, } from 'fs';
 import ts from 'typescript';
 import { createScanner } from '../scanner/scanner.js';
 import { discoverSecondaryEntryPoints } from '../scanner/entry-point-discovery.js';
@@ -28,8 +28,8 @@ export async function runPrismPipeline(options, context, state) {
         pages: manifest.pages,
     });
     const projectMeta = await context.getProjectMetadata(options.prismProject);
-    const sourceRoot = projectMeta['sourceRoot']
-        ?? join('projects', options.prismProject, 'src');
+    const sourceRoot = projectMeta['sourceRoot'] ??
+        join('projects', options.prismProject, 'src');
     const manifestPath = join(workspaceRoot, sourceRoot, 'prism-manifest.ts');
     mkdirSync(join(workspaceRoot, sourceRoot), { recursive: true });
     const written = writeManifestIfChanged(manifestPath, source);
@@ -63,7 +63,9 @@ function writeManifestIfChanged(manifestPath, newContent) {
             try {
                 unlinkSync(tempPath);
             }
-            catch { /* best-effort cleanup */ }
+            catch {
+                /* best-effort cleanup */
+            }
         }
         throw err;
     }
@@ -77,6 +79,18 @@ function isDirectory(path) {
         return false;
     }
 }
+function findLibraryRoot(filePath) {
+    let dir = dirname(filePath);
+    let parent = dirname(dir);
+    while (dir !== parent) {
+        if (existsSync(join(dir, 'ng-package.json'))) {
+            return dir;
+        }
+        dir = parent;
+        parent = dirname(dir);
+    }
+    return undefined;
+}
 function resolveTsconfigPaths(entryPointDir) {
     const configPath = ts.findConfigFile(entryPointDir, ts.sys.fileExists, 'tsconfig.json');
     if (!configPath)
@@ -95,10 +109,17 @@ function resolveTsconfigPaths(entryPointDir) {
 function scanEntryPoints(workspaceRoot, options, state) {
     const absoluteEntryPoint = join(workspaceRoot, options.entryPoint);
     const pathOptions = resolveTsconfigPaths(dirname(absoluteEntryPoint));
-    if (!isDirectory(absoluteEntryPoint)) {
+    const entryIsDirectory = isDirectory(absoluteEntryPoint);
+    const libraryRoot = entryIsDirectory
+        ? absoluteEntryPoint
+        : findLibraryRoot(absoluteEntryPoint);
+    if (!libraryRoot) {
+        return getOrCreateScanner(state, absoluteEntryPoint, pathOptions).scan();
+    }
+    const entryPoints = discoverSecondaryEntryPoints(libraryRoot, options.libraryImportPath);
+    if (entryPoints.length === 0 && !entryIsDirectory) {
         return getOrCreateScanner(state, absoluteEntryPoint, pathOptions).scan();
     }
-    const entryPoints = discoverSecondaryEntryPoints(absoluteEntryPoint, options.libraryImportPath);
     const allComponents = [];
     for (const ep of entryPoints) {
         const scanner = getOrCreateScanner(state, ep.entryFile, pathOptions);

package/dist/schematics/ng-add/index.js

@@ -141,8 +141,7 @@ function addBuilderTargets(options) {
         const project = workspace.projects[options.project];
         const prismProjectName = `${options.project}-prism`;
         const port = options.port ?? 4400;
-        const sourceRoot = project.sourceRoot ?? `${project.root}/src`;
-        const entryPoint = `${sourceRoot}/public-api.ts`;
+        const entryPoint = project.root ?? project.sourceRoot ?? `projects/${options.project}`;
         if (!project.architect) {
             project.architect = {};
         }

package/package.json

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