@ng-prism/core 21.4.4 → 21.5.0

package/README.md

@@ -57,7 +57,7 @@ export class ButtonComponent {
 ### 3. Run the schematic
 
 ```bash
-ng add ng-prism
+ng add @ng-prism/core
 ```
 
 This creates the prism app project, configures Angular builders, and generates `ng-prism.config.ts`.

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

@@ -0,0 +1,16 @@
+import { PrismCanvasService } from '../services/prism-canvas.service.js';
+import * as i0 from "@angular/core";
+export declare class PrismCanvasRulersComponent {
+    protected readonly canvas: PrismCanvasService;
+    private readonly rulerTop;
+    private readonly rulerLeft;
+    private ro;
+    constructor();
+    private observeResize;
+    private paint;
+    private paintH;
+    private paintV;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismCanvasRulersComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismCanvasRulersComponent, "prism-canvas-rulers", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-canvas-rulers.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-canvas-rulers.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-rulers.component.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAIzE,qBAkDa,0BAA0B;IACrC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IAEvD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAC8B;IACvD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAC8B;IAExD,OAAO,CAAC,EAAE,CAA+B;;IAoBzC,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,MAAM;IA4Dd,OAAO,CAAC,MAAM;yCArGH,0BAA0B;2CAA1B,0BAA0B;CAoKtC"}

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

@@ -0,0 +1,177 @@
+import { Component, ChangeDetectionStrategy, effect, inject, viewChild, } from '@angular/core';
+import { PrismCanvasService } from '../services/prism-canvas.service.js';
+import * as i0 from "@angular/core";
+const _c0 = ["rulerTop"];
+const _c1 = ["rulerLeft"];
+function PrismCanvasRulersComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 2);
+    i0.ɵɵdomElement(1, "canvas", 3, 0)(3, "canvas", 4, 1)(5, "div", 5);
+    i0.ɵɵdomElementEnd();
+} }
+const R = 20;
+export class PrismCanvasRulersComponent {
+    canvas = inject(PrismCanvasService);
+    rulerTop = viewChild('rulerTop', ...(ngDevMode ? [{ debugName: "rulerTop" }] : []));
+    rulerLeft = viewChild('rulerLeft', ...(ngDevMode ? [{ debugName: "rulerLeft" }] : []));
+    ro = null;
+    constructor() {
+        effect(() => {
+            const show = this.canvas.rulers();
+            const zoom = this.canvas.zoom();
+            if (!show) {
+                this.ro?.disconnect();
+                this.ro = null;
+                return;
+            }
+            requestAnimationFrame(() => {
+                this.paint(zoom);
+                this.observeResize(zoom);
+            });
+        });
+    }
+    observeResize(zoom) {
+        if (this.ro)
+            return;
+        const wrap = this.rulerTop()?.nativeElement?.parentElement;
+        if (!wrap)
+            return;
+        this.ro = new ResizeObserver(() => this.paint(this.canvas.zoom()));
+        this.ro.observe(wrap);
+    }
+    paint(zoom) {
+        this.paintH(zoom);
+        this.paintV(zoom);
+    }
+    paintH(zoom) {
+        const el = this.rulerTop()?.nativeElement;
+        if (!el)
+            return;
+        const wrap = el.parentElement;
+        const w = wrap.clientWidth - R;
+        const h = R;
+        if (w <= 0)
+            return;
+        const dpr = devicePixelRatio;
+        el.width = w * dpr;
+        el.height = h * dpr;
+        el.style.width = w + 'px';
+        el.style.height = h + 'px';
+        const ctx = el.getContext('2d');
+        ctx.scale(dpr, dpr);
+        const cs = getComputedStyle(document.documentElement);
+        const bg = cs.getPropertyValue('--prism-bg').trim() || '#0d0b1c';
+        const fg = cs.getPropertyValue('--prism-text-ghost').trim() || '#6a5d87';
+        const border = cs.getPropertyValue('--prism-border').trim() || 'rgba(255,255,255,0.08)';
+        ctx.fillStyle = bg;
+        ctx.fillRect(0, 0, w, h);
+        ctx.strokeStyle = border;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(0, h - 0.5);
+        ctx.lineTo(w, h - 0.5);
+        ctx.stroke();
+        const step = stepFor(zoom);
+        const pxStep = step * zoom;
+        ctx.strokeStyle = fg;
+        ctx.fillStyle = fg;
+        ctx.lineWidth = 0.5;
+        ctx.font = '9px monospace';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        let logical = 0;
+        for (let x = 0; x < w; x += pxStep, logical += step) {
+            const xr = Math.round(x) + 0.5;
+            const major = logical % (step * 5) === 0;
+            ctx.beginPath();
+            ctx.moveTo(xr, h);
+            ctx.lineTo(xr, h - (major ? 12 : 6));
+            ctx.stroke();
+            if (major) {
+                ctx.fillText(String(logical), xr + 2, 2);
+            }
+        }
+    }
+    paintV(zoom) {
+        const el = this.rulerLeft()?.nativeElement;
+        if (!el)
+            return;
+        const wrap = el.parentElement;
+        const w = R;
+        const h = wrap.clientHeight - R;
+        if (h <= 0)
+            return;
+        const dpr = devicePixelRatio;
+        el.width = w * dpr;
+        el.height = h * dpr;
+        el.style.width = w + 'px';
+        el.style.height = h + 'px';
+        const ctx = el.getContext('2d');
+        ctx.scale(dpr, dpr);
+        const cs = getComputedStyle(document.documentElement);
+        const bg = cs.getPropertyValue('--prism-bg').trim() || '#0d0b1c';
+        const fg = cs.getPropertyValue('--prism-text-ghost').trim() || '#6a5d87';
+        const border = cs.getPropertyValue('--prism-border').trim() || 'rgba(255,255,255,0.08)';
+        ctx.fillStyle = bg;
+        ctx.fillRect(0, 0, w, h);
+        ctx.strokeStyle = border;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(w - 0.5, 0);
+        ctx.lineTo(w - 0.5, h);
+        ctx.stroke();
+        const step = stepFor(zoom);
+        const pxStep = step * zoom;
+        ctx.strokeStyle = fg;
+        ctx.fillStyle = fg;
+        ctx.lineWidth = 0.5;
+        ctx.font = '9px monospace';
+        let logical = 0;
+        for (let y = 0; y < h; y += pxStep, logical += step) {
+            const yr = Math.round(y) + 0.5;
+            const major = logical % (step * 5) === 0;
+            ctx.beginPath();
+            ctx.moveTo(w, yr);
+            ctx.lineTo(w - (major ? 12 : 6), yr);
+            ctx.stroke();
+            if (major) {
+                ctx.save();
+                ctx.translate(9, yr + 2);
+                ctx.rotate(-Math.PI / 2);
+                ctx.textAlign = 'left';
+                ctx.textBaseline = 'top';
+                ctx.fillText(String(logical), 0, 0);
+                ctx.restore();
+            }
+        }
+    }
+    static ɵfac = function PrismCanvasRulersComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismCanvasRulersComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasRulersComponent, selectors: [["prism-canvas-rulers"]], viewQuery: function PrismCanvasRulersComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.rulerTop, _c0, 5)(ctx.rulerLeft, _c1, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance(2);
+        } }, decls: 1, vars: 1, consts: [["rulerTop", ""], ["rulerLeft", ""], [1, "ruler-wrap"], [1, "ruler", "ruler--top"], [1, "ruler", "ruler--left"], [1, "ruler-corner"]], template: function PrismCanvasRulersComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismCanvasRulersComponent_Conditional_0_Template, 6, 0, "div", 2);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.canvas.rulers() ? 0 : -1);
+        } }, styles: ["[_nghost-%COMP%] { display: contents; }\n\n    .ruler-wrap[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 4;\n      overflow: hidden;\n    }\n\n    .ruler[_ngcontent-%COMP%] { position: absolute; }\n    .ruler--top[_ngcontent-%COMP%] {\n      top: 0;\n      left: 20px;\n      right: 0;\n      height: 20px;\n    }\n    .ruler--left[_ngcontent-%COMP%] {\n      top: 20px;\n      left: 0;\n      bottom: 0;\n      width: 20px;\n    }\n    .ruler-corner[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 20px;\n      height: 20px;\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      border-bottom: 1px solid var(--prism-border);\n      z-index: 1;\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasRulersComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-canvas-rulers', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (canvas.rulers()) {
+    <div class="ruler-wrap">
+      <canvas #rulerTop class="ruler ruler--top"></canvas>
+      <canvas #rulerLeft class="ruler ruler--left"></canvas>
+      <div class="ruler-corner"></div>
+    </div>
+    }
+  `, styles: ["\n    :host { display: contents; }\n\n    .ruler-wrap {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 4;\n      overflow: hidden;\n    }\n\n    .ruler { position: absolute; }\n    .ruler--top {\n      top: 0;\n      left: 20px;\n      right: 0;\n      height: 20px;\n    }\n    .ruler--left {\n      top: 20px;\n      left: 0;\n      bottom: 0;\n      width: 20px;\n    }\n    .ruler-corner {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 20px;\n      height: 20px;\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      border-bottom: 1px solid var(--prism-border);\n      z-index: 1;\n    }\n  "] }]
+    }], () => [], { rulerTop: [{ type: i0.ViewChild, args: ['rulerTop', { isSignal: true }] }], rulerLeft: [{ type: i0.ViewChild, args: ['rulerLeft', { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasRulersComponent, { className: "PrismCanvasRulersComponent", filePath: "app/canvas/prism-canvas-rulers.component.ts", lineNumber: 63 }); })();
+function stepFor(zoom) {
+    if (zoom >= 2)
+        return 10;
+    if (zoom >= 1)
+        return 20;
+    return 50;
+}

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

@@ -0,0 +1,14 @@
+import { PrismCanvasService, type CanvasBg } from '../services/prism-canvas.service.js';
+import * as i0 from "@angular/core";
+export declare class PrismCanvasToolbarComponent {
+    protected readonly canvas: PrismCanvasService;
+    protected readonly bgs: CanvasBg[];
+    protected readonly zooms: {
+        value: number;
+        label: string;
+    }[];
+    protected capitalize(s: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismCanvasToolbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismCanvasToolbarComponent, "prism-canvas-toolbar", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-canvas-toolbar.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,kBAAkB,EAClB,KAAK,QAAQ,EACd,MAAM,qCAAqC,CAAC;;AAE7C,qBAwHa,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IAEvD,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,CAMhC;IACF,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCAjB5B,2BAA2B;2CAA3B,2BAA2B;CAoBvC"}

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

@@ -0,0 +1,144 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { PrismIconComponent } from '../icons/prism-icon.component.js';
+import { PrismCanvasService, } from '../services/prism-canvas.service.js';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.value;
+function PrismCanvasToolbarComponent_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 9);
+    i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_5_Template_button_click_0_listener() { const bg_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.canvas.setBg(bg_r2)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const bg_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("tool-btn--active", ctx_r2.canvas.bg() === bg_r2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.capitalize(bg_r2), " ");
+} }
+function PrismCanvasToolbarComponent_For_11_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 9);
+    i0.ɵɵ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();
+} if (rf & 2) {
+    const z_r5 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("tool-btn--active", ctx_r2.canvas.zoom() === z_r5.value);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", z_r5.label, " ");
+} }
+export class PrismCanvasToolbarComponent {
+    canvas = inject(PrismCanvasService);
+    bgs = [
+        'dots',
+        'plain',
+        'light',
+        'dark',
+        'checker',
+    ];
+    zooms = [
+        { value: 0.75, label: '75%' },
+        { value: 1, label: '100%' },
+        { value: 1.5, label: '150%' },
+        { value: 2, label: '200%' },
+    ];
+    capitalize(s) {
+        return s.charAt(0).toUpperCase() + s.slice(1);
+    }
+    static ɵfac = function PrismCanvasToolbarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismCanvasToolbarComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasToolbarComponent, selectors: [["prism-canvas-toolbar"]], decls: 19, vars: 6, consts: [[1, "canvas-toolbar"], [1, "tool-label"], [1, "tool-group"], [1, "tool-btn", 3, "tool-btn--active"], [1, "tool-sep"], ["title", "Toggle guides", "aria-label", "Toggle guides", 1, "tool-btn", 3, "click"], ["name", "crosshair", 3, "size"], ["title", "Toggle rulers", "aria-label", "Toggle rulers", 1, "tool-btn", 3, "click"], ["name", "move", 3, "size"], [1, "tool-btn", 3, "click"]], template: function PrismCanvasToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
+            i0.ɵɵtext(2, "Canvas");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "div", 2);
+            i0.ɵɵrepeaterCreate(4, PrismCanvasToolbarComponent_For_5_Template, 2, 3, "button", 3, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(6, "div", 4);
+            i0.ɵɵelementStart(7, "span", 1);
+            i0.ɵɵtext(8, "Zoom");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "div", 2);
+            i0.ɵɵrepeaterCreate(10, PrismCanvasToolbarComponent_For_11_Template, 2, 3, "button", 3, _forTrack0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(12, "div", 4);
+            i0.ɵɵelementStart(13, "button", 5);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_13_listener() { return ctx.canvas.toggleGuides(); });
+            i0.ɵɵelement(14, "prism-icon", 6);
+            i0.ɵɵtext(15, " Guides ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "button", 7);
+            i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_Template_button_click_16_listener() { return ctx.canvas.toggleRulers(); });
+            i0.ɵɵelement(17, "prism-icon", 8);
+            i0.ɵɵtext(18, " Rulers ");
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵrepeater(ctx.bgs);
+            i0.ɵɵadvance(6);
+            i0.ɵɵrepeater(ctx.zooms);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("tool-btn--active", ctx.canvas.guides());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("size", 13);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("tool-btn--active", ctx.canvas.rulers());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("size", 13);
+        } }, dependencies: [PrismIconComponent], styles: [".canvas-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 20px;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg);\n      min-height: 44px;\n    }\n\n    .tool-group[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 1px;\n      padding: 2px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-md);\n    }\n\n    .tool-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      padding: 0 9px;\n      border-radius: var(--radius-sm);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n      transition: all var(--dur-fast);\n      font-weight: 500;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .tool-btn[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn--active[_ngcontent-%COMP%] {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n\n    .tool-sep[_ngcontent-%COMP%] {\n      width: 1px;\n      height: 18px;\n      background: var(--prism-border);\n      margin: 0 4px;\n    }\n\n    .tool-label[_ngcontent-%COMP%] {\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n      margin-right: 2px;\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasToolbarComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-canvas-toolbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
+    <div class="canvas-toolbar">
+      <span class="tool-label">Canvas</span>
+      <div class="tool-group">
+        @for (bg of bgs; track bg) {
+        <button
+          class="tool-btn"
+          [class.tool-btn--active]="canvas.bg() === bg"
+          (click)="canvas.setBg(bg)"
+        >
+          {{ capitalize(bg) }}
+        </button>
+        }
+      </div>
+      <div class="tool-sep"></div>
+      <span class="tool-label">Zoom</span>
+      <div class="tool-group">
+        @for (z of zooms; track z.value) {
+        <button
+          class="tool-btn"
+          [class.tool-btn--active]="canvas.zoom() === z.value"
+          (click)="canvas.setZoom(z.value)"
+        >
+          {{ z.label }}
+        </button>
+        }
+      </div>
+      <div class="tool-sep"></div>
+      <button
+        class="tool-btn"
+        [class.tool-btn--active]="canvas.guides()"
+        (click)="canvas.toggleGuides()"
+        title="Toggle guides"
+        aria-label="Toggle guides"
+      >
+        <prism-icon name="crosshair" [size]="13" />
+        Guides
+      </button>
+      <button
+        class="tool-btn"
+        [class.tool-btn--active]="canvas.rulers()"
+        (click)="canvas.toggleRulers()"
+        title="Toggle rulers"
+        aria-label="Toggle rulers"
+      >
+        <prism-icon name="move" [size]="13" />
+        Rulers
+      </button>
+    </div>
+  `, styles: ["\n    .canvas-toolbar {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 20px;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg);\n      min-height: 44px;\n    }\n\n    .tool-group {\n      display: flex;\n      align-items: center;\n      gap: 1px;\n      padding: 2px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-md);\n    }\n\n    .tool-btn {\n      height: 24px;\n      padding: 0 9px;\n      border-radius: var(--radius-sm);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n      transition: all var(--dur-fast);\n      font-weight: 500;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .tool-btn:hover {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn--active {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n\n    .tool-sep {\n      width: 1px;\n      height: 18px;\n      background: var(--prism-border);\n      margin: 0 4px;\n    }\n\n    .tool-label {\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n      margin-right: 2px;\n    }\n\n  "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 128 }); })();

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

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export declare class PrismCodeDrawerComponent {
+    private readonly navigationService;
+    private readonly rendererService;
+    protected readonly collapsed: import("@angular/core").WritableSignal<boolean>;
+    protected readonly snippet: import("@angular/core").Signal<string>;
+    protected readonly highlighted: import("@angular/core").Signal<string>;
+    protected copy(e: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismCodeDrawerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismCodeDrawerComponent, "prism-code-drawer", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-code-drawer.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-code-drawer.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-code-drawer.component.ts"],"names":[],"mappings":";AAyCA,qBAuGa,wBAAwB;IACnC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,SAAS,CAAC,QAAQ,CAAC,SAAS,kDAAiB;IAE7C,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAqBvB;IAEH,SAAS,CAAC,QAAQ,CAAC,WAAW,yCAI3B;IAEH,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;yCAnCxB,wBAAwB;2CAAxB,wBAAwB;CAwCpC"}

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

@@ -0,0 +1,114 @@
+import { Component, inject, computed, signal, ChangeDetectionStrategy, } from '@angular/core';
+import { PrismIconComponent } from '../icons/prism-icon.component.js';
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { PrismRendererService } from '../services/prism-renderer.service.js';
+import { generateSnippet } from '../renderer/snippet-generator.js';
+import * as i0 from "@angular/core";
+function esc(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+function tokenizeXml(code) {
+    const re = /(\/\/[^\n]*)|(<\/?[\w-]+)|(\[[\w.]+\]|[\w-]+)=|"([^"]*)"|(\/>|>)|(\n)|([^<\["\n/>=]+|[/=])/g;
+    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 PrismCodeDrawerComponent {
+    navigationService = inject(PrismNavigationService);
+    rendererService = inject(PrismRendererService);
+    collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    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(e) {
+        e.stopPropagation();
+        const code = this.snippet();
+        if (code)
+            navigator.clipboard.writeText(code);
+    }
+    static ɵfac = function PrismCodeDrawerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismCodeDrawerComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCodeDrawerComponent, selectors: [["prism-code-drawer"]], decls: 11, vars: 6, consts: [[1, "code-drawer"], [1, "code-head", 3, "click"], ["name", "chevron-down", 1, "chev", 3, "size"], ["name", "copy", 3, "size"], [1, "code-head-actions"], ["title", "Copy to clipboard", 1, "mini", 3, "click"], [1, "code-body", 3, "innerHTML"]], template: function PrismCodeDrawerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵlistener("click", function PrismCodeDrawerComponent_Template_div_click_1_listener() { return ctx.collapsed.update(v => !v); });
+            i0.ɵɵelement(2, "prism-icon", 2)(3, "prism-icon", 3);
+            i0.ɵɵelementStart(4, "span");
+            i0.ɵɵtext(5, "Angular Template");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "div", 4)(7, "button", 5);
+            i0.ɵɵlistener("click", function PrismCodeDrawerComponent_Template_button_click_7_listener($event) { return ctx.copy($event); });
+            i0.ɵɵelement(8, "prism-icon", 3);
+            i0.ɵɵtext(9, " Copy ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelement(10, "pre", 6);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("is-collapsed", ctx.collapsed());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("size", 12);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("size", 12);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("size", 11);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("innerHTML", ctx.highlighted(), i0.ɵɵsanitizeHtml);
+        } }, dependencies: [PrismIconComponent], styles: [".code-drawer[_ngcontent-%COMP%] {\n      border-top: 1px solid var(--prism-border);\n      background: var(--prism-bg);\n      max-height: 260px;\n      transition: max-height 0.25s var(--ease-default), opacity var(--dur-base);\n      overflow: hidden;\n    }\n    .code-drawer.is-collapsed[_ngcontent-%COMP%] { max-height: 40px; }\n    .code-drawer.is-collapsed[_ngcontent-%COMP%]   .code-body[_ngcontent-%COMP%] { opacity: 0; }\n\n    .code-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      height: 40px;\n      padding: 0 20px;\n      color: var(--prism-text-muted);\n      font-size: var(--fs-sm);\n      font-weight: 600;\n      letter-spacing: 0.04em;\n      cursor: pointer;\n      border-bottom: 1px solid var(--prism-border);\n      background: linear-gradient(180deg, var(--prism-bg-surface), var(--prism-bg));\n    }\n    .code-head[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%]:first-of-type {\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n    }\n    .code-head[_ngcontent-%COMP%]   .chev[_ngcontent-%COMP%] {\n      transition: transform var(--dur-fast);\n    }\n    .is-collapsed[_ngcontent-%COMP%]   .code-head[_ngcontent-%COMP%]   .chev[_ngcontent-%COMP%] {\n      transform: rotate(-90deg);\n    }\n\n    .code-head-actions[_ngcontent-%COMP%] {\n      margin-left: auto;\n      display: flex;\n      gap: 2px;\n    }\n    .mini[_ngcontent-%COMP%] {\n      height: 22px;\n      padding: 0 8px;\n      font-size: 10.5px;\n      border-radius: 4px;\n      color: var(--prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .mini[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      background: var(--prism-input-bg);\n    }\n\n    .code-body[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 12px 20px 16px;\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-x: auto;\n      transition: opacity var(--dur-base);\n      background: var(--prism-bg);\n      white-space: pre;\n    }\n    .code-body[_ngcontent-%COMP%]::-webkit-scrollbar { height: 6px; }\n    .code-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 3px; }\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(PrismCodeDrawerComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-code-drawer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
+    <div class="code-drawer" [class.is-collapsed]="collapsed()">
+      <div class="code-head" (click)="collapsed.update(v => !v)">
+        <prism-icon name="chevron-down" [size]="12" class="chev" />
+        <prism-icon name="copy" [size]="12" />
+        <span>Angular Template</span>
+        <div class="code-head-actions">
+          <button class="mini" (click)="copy($event)" title="Copy to clipboard">
+            <prism-icon name="copy" [size]="11" />
+            Copy
+          </button>
+        </div>
+      </div>
+      <pre class="code-body" [innerHTML]="highlighted()"></pre>
+    </div>
+  `, styles: ["\n    .code-drawer {\n      border-top: 1px solid var(--prism-border);\n      background: var(--prism-bg);\n      max-height: 260px;\n      transition: max-height 0.25s var(--ease-default), opacity var(--dur-base);\n      overflow: hidden;\n    }\n    .code-drawer.is-collapsed { max-height: 40px; }\n    .code-drawer.is-collapsed .code-body { opacity: 0; }\n\n    .code-head {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      height: 40px;\n      padding: 0 20px;\n      color: var(--prism-text-muted);\n      font-size: var(--fs-sm);\n      font-weight: 600;\n      letter-spacing: 0.04em;\n      cursor: pointer;\n      border-bottom: 1px solid var(--prism-border);\n      background: linear-gradient(180deg, var(--prism-bg-surface), var(--prism-bg));\n    }\n    .code-head > span:first-of-type {\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n    }\n    .code-head .chev {\n      transition: transform var(--dur-fast);\n    }\n    .is-collapsed .code-head .chev {\n      transform: rotate(-90deg);\n    }\n\n    .code-head-actions {\n      margin-left: auto;\n      display: flex;\n      gap: 2px;\n    }\n    .mini {\n      height: 22px;\n      padding: 0 8px;\n      font-size: 10.5px;\n      border-radius: 4px;\n      color: var(--prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .mini:hover {\n      color: var(--prism-text);\n      background: var(--prism-input-bg);\n    }\n\n    .code-body {\n      margin: 0;\n      padding: 12px 20px 16px;\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-x: auto;\n      transition: opacity var(--dur-base);\n      background: var(--prism-bg);\n      white-space: pre;\n    }\n    .code-body::-webkit-scrollbar { height: 6px; }\n    .code-body::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 3px; }\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, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCodeDrawerComponent, { className: "PrismCodeDrawerComponent", filePath: "app/canvas/prism-code-drawer.component.ts", lineNumber: 145 }); })();

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

@@ -0,0 +1,15 @@
+import * as i0 from "@angular/core";
+export declare class PrismComponentHeadComponent {
+    private readonly navigationService;
+    private readonly auditService;
+    protected readonly comp: import("@angular/core").Signal<import("../../index.js").RuntimeComponent | null>;
+    protected readonly category: import("@angular/core").Signal<string>;
+    protected readonly variantCount: import("@angular/core").Signal<number>;
+    protected readonly coveragePercent: import("@angular/core").Signal<number | null>;
+    protected readonly bundleSize: import("@angular/core").Signal<string | null>;
+    protected readonly a11yScore: import("@angular/core").Signal<number | null>;
+    private readonly componentMeta;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismComponentHeadComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismComponentHeadComponent, "prism-component-head", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-component-head.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-component-head.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-component-head.component.ts"],"names":[],"mappings":";AAWA,qBAoJa,2BAA2B;IACtC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,mFAErB;IAEF,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAGxB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAG5B;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,gDAM/B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU,gDAS1B;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAEzB;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAM3B;yCA/CQ,2BAA2B;2CAA3B,2BAA2B;CAgDvC"}