@ng-prism/plugin-figma 21.0.0

package/README.md

@@ -0,0 +1,106 @@
+# @ng-prism/plugin-figma
+
+Figma design embed panel for [ng-prism](https://github.com/USERNAME/ng-prism). Displays Figma designs as interactive iframes directly in your component styleguide.
+
+Uses Figma's official embed endpoint — no API token required. Works with any publicly shared Figma file.
+
+## Installation
+
+```bash
+npm install @ng-prism/plugin-figma
+```
+
+### Peer Dependencies
+
+| Package | Version |
+|---|---|
+| `ng-prism` | `>=21.0.0` |
+| `@angular/core` | `>=20.0.0` |
+
+## Usage
+
+### 1. Register the plugin
+
+Add `figmaPlugin()` to your `ng-prism.config.ts`:
+
+```typescript
+import { defineConfig } from 'ng-prism/config';
+import { figmaPlugin } from '@ng-prism/plugin-figma';
+
+export default defineConfig({
+  plugins: [figmaPlugin()],
+});
+```
+
+### 2. Link Figma designs to components
+
+Add a `figma` key to the `meta` field of your `@Showcase` decorator:
+
+```typescript
+import { Component, input, output } from '@angular/core';
+import { Showcase } from 'ng-prism';
+
+@Showcase({
+  title: 'Button',
+  category: 'Inputs',
+  meta: {
+    figma: 'https://www.figma.com/file/abc123/my-design',
+  },
+})
+@Component({
+  selector: 'my-button',
+  standalone: true,
+  template: `<button>{{ label() }}</button>`,
+})
+export class ButtonComponent {
+  label = input('Button');
+}
+```
+
+A **Figma** tab appears in the panel area (next to Controls and Events). The tab displays an interactive Figma viewer with zoom and navigation support.
+
+Components without a `meta.figma` URL show a placeholder message instead.
+
+### Supported URL formats
+
+Any publicly shared Figma URL works:
+
+- `https://www.figma.com/file/<id>/<name>` — full file
+- `https://www.figma.com/file/<id>/<name>?node-id=<node>` — specific frame/component
+- `https://www.figma.com/design/<id>/<name>` — new Figma URL format
+
+## How it works
+
+The plugin registers a single panel (`FigmaPanelComponent`) that:
+
+1. Reads `meta.figma` from the active component's `@Showcase` config
+2. Constructs a Figma embed URL: `https://www.figma.com/embed?embed_host=ng-prism&url=<encoded-url>`
+3. Renders the embed in a sandboxed `<iframe>` with `allowfullscreen`
+4. Reactively updates when navigating between components (Angular Signals)
+
+No build-time hooks — the plugin is purely runtime. The panel component is **lazy-loaded**
+via `loadComponent` to avoid pulling in browser-only Angular dependencies (`DomSanitizer`)
+at config-load time in Node.js.
+
+## API
+
+### `figmaPlugin()`
+
+Factory function that returns an `NgPrismPlugin`. Zero-config — no arguments needed.
+
+```typescript
+import { figmaPlugin } from '@ng-prism/plugin-figma';
+
+const plugin = figmaPlugin();
+// plugin.name === '@ng-prism/plugin-figma'
+// plugin.panels === [{ id: 'figma', label: 'Figma', loadComponent: () => ... }]
+```
+
+### `FigmaPanelComponent`
+
+The Angular component rendering the Figma iframe. Lazy-loaded by the plugin — typically
+you don't need to import it directly. The type is exported for advanced use cases.
+
+## License
+
+MIT

package/dist/diff/component-screenshot.service.d.ts

@@ -0,0 +1,2 @@
+export declare function captureDomElement(element: HTMLElement | null): Promise<HTMLCanvasElement>;
+//# sourceMappingURL=component-screenshot.service.d.ts.map

package/dist/diff/component-screenshot.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-screenshot.service.d.ts","sourceRoot":"","sources":["../../src/diff/component-screenshot.service.ts"],"names":[],"mappings":"AAAA,wBAAsB,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAW/F"}

package/dist/diff/component-screenshot.service.js

@@ -0,0 +1,11 @@
+export async function captureDomElement(element) {
+    if (!element)
+        throw new Error('Kein gerendertes Element gefunden');
+    const { default: html2canvas } = await import('html2canvas');
+    return html2canvas(element, {
+        useCORS: true,
+        scale: window.devicePixelRatio || 1,
+        backgroundColor: null,
+        logging: false,
+    });
+}

package/dist/diff/design-diff.engine.d.ts

@@ -0,0 +1,3 @@
+import type { DiffResult } from './figma-diff.types.js';
+export declare function computeDesignDiff(componentCanvas: HTMLCanvasElement, figmaBlob: Blob): Promise<DiffResult>;
+//# sourceMappingURL=design-diff.engine.d.ts.map

package/dist/diff/design-diff.engine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-diff.engine.d.ts","sourceRoot":"","sources":["../../src/diff/design-diff.engine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,wBAAsB,iBAAiB,CACrC,eAAe,EAAE,iBAAiB,EAClC,SAAS,EAAE,IAAI,GACd,OAAO,CAAC,UAAU,CAAC,CAiCrB"}

package/dist/diff/design-diff.engine.js

@@ -0,0 +1,46 @@
+export async function computeDesignDiff(componentCanvas, figmaBlob) {
+    const { default: pixelmatch } = await import('pixelmatch');
+    const w = componentCanvas.width;
+    const h = componentCanvas.height;
+    const figmaCanvas = await blobToCanvas(figmaBlob, w, h);
+    const diffCanvas = document.createElement('canvas');
+    diffCanvas.width = w;
+    diffCanvas.height = h;
+    const img1 = componentCanvas.getContext('2d').getImageData(0, 0, w, h);
+    const img2 = figmaCanvas.getContext('2d').getImageData(0, 0, w, h);
+    const ctxDiff = diffCanvas.getContext('2d');
+    const imgDiff = ctxDiff.createImageData(w, h);
+    const diffPixels = pixelmatch(img1.data, img2.data, imgDiff.data, w, h, {
+        threshold: 0.1,
+        includeAA: false,
+    });
+    ctxDiff.putImageData(imgDiff, 0, 0);
+    const totalPixels = w * h;
+    return {
+        similarity: ((totalPixels - diffPixels) / totalPixels) * 100,
+        diffPixels,
+        totalPixels,
+        componentDataUrl: componentCanvas.toDataURL(),
+        figmaDataUrl: figmaCanvas.toDataURL(),
+        diffDataUrl: diffCanvas.toDataURL(),
+    };
+}
+function blobToCanvas(blob, width, height) {
+    return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(blob);
+        const img = new Image();
+        img.onload = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            canvas.getContext('2d').drawImage(img, 0, 0, width, height);
+            URL.revokeObjectURL(url);
+            resolve(canvas);
+        };
+        img.onerror = () => {
+            URL.revokeObjectURL(url);
+            reject(new Error('Figma-Bild konnte nicht geladen werden'));
+        };
+        img.src = url;
+    });
+}

package/dist/diff/figma-api.service.d.ts

@@ -0,0 +1,2 @@
+export declare function fetchFigmaImage(fileKey: string, nodeId: string, token: string): Promise<Blob>;
+//# sourceMappingURL=figma-api.service.d.ts.map

package/dist/diff/figma-api.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"figma-api.service.d.ts","sourceRoot":"","sources":["../../src/diff/figma-api.service.ts"],"names":[],"mappings":"AAAA,wBAAsB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAqBnG"}

package/dist/diff/figma-api.service.js

@@ -0,0 +1,17 @@
+export async function fetchFigmaImage(fileKey, nodeId, token) {
+    const res = await fetch(`https://api.figma.com/v1/images/${fileKey}?ids=${encodeURIComponent(nodeId)}&format=png&scale=2`, { headers: { 'X-Figma-Token': token } });
+    if (!res.ok) {
+        const text = await res.text().catch(() => '');
+        throw new Error(`Figma API ${res.status}${text ? `: ${text}` : ''}`);
+    }
+    const json = await res.json();
+    if (json.err)
+        throw new Error(json.err);
+    const imageUrl = json.images?.[nodeId];
+    if (!imageUrl)
+        throw new Error(`Kein Bild für Node-ID "${nodeId}"`);
+    const imgRes = await fetch(imageUrl);
+    if (!imgRes.ok)
+        throw new Error(`CDN Fehler ${imgRes.status}`);
+    return imgRes.blob();
+}

package/dist/diff/figma-design-diff-panel.component.d.ts

@@ -0,0 +1,26 @@
+import { type DiffMode, type DiffResult, type DiffState } from './figma-diff.types.js';
+import * as i0 from "@angular/core";
+export declare class FigmaDesignDiffPanelComponent {
+    private readonly config;
+    private readonly nav;
+    private readonly renderer;
+    protected readonly state: import("@angular/core").WritableSignal<DiffState>;
+    protected readonly activeMode: import("@angular/core").WritableSignal<DiffMode>;
+    protected readonly overlayOpacity: import("@angular/core").WritableSignal<number>;
+    protected readonly modes: {
+        value: DiffMode;
+        label: string;
+    }[];
+    protected readonly doneResult: import("@angular/core").Signal<DiffResult | null>;
+    protected readonly similarity: import("@angular/core").Signal<string>;
+    protected readonly errorMessage: import("@angular/core").Signal<string>;
+    protected readonly activeVariantMeta: import("@angular/core").Signal<{
+        url: string;
+        nodeId: string;
+    } | null>;
+    protected runDiff(): void;
+    private executeDiff;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FigmaDesignDiffPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FigmaDesignDiffPanelComponent, "prism-figma-design-diff-panel", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=figma-design-diff-panel.component.d.ts.map

package/dist/diff/figma-design-diff-panel.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"figma-design-diff-panel.component.d.ts","sourceRoot":"","sources":["../../src/diff/figma-design-diff-panel.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAkC,MAAM,uBAAuB,CAAC;;AAEvH,qBAmPa,6BAA6B;IACxC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA+B;IACtD,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IAEzD,SAAS,CAAC,QAAQ,CAAC,KAAK,oDAAyC;IACjE,SAAS,CAAC,QAAQ,CAAC,UAAU,mDAAoC;IACjE,SAAS,CAAC,QAAQ,CAAC,cAAc,iDAAc;IAE/C,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAI5D;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,oDAG1B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAG1B;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAG5B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;cAQjC;IAEH,SAAS,CAAC,OAAO,IAAI,IAAI;YAsBX,WAAW;yCA9Dd,6BAA6B;2CAA7B,6BAA6B;CAqFzC"}

package/dist/diff/figma-design-diff-panel.component.js

@@ -0,0 +1,332 @@
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { PrismNavigationService, PrismRendererService } from '@ng-prism/core';
+import { FIGMA_PLUGIN_CONFIG } from '../figma-config.token.js';
+import { extractFileKey, parseFigmaMeta } from './figma-diff.types.js';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.value;
+function FigmaDesignDiffPanelComponent_Case_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1)(1, "p", 6);
+    i0.ɵɵtext(2, "Access Token fehlt");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "p", 7);
+    i0.ɵɵtext(4, " Konfiguriere ");
+    i0.ɵɵdomElementStart(5, "code");
+    i0.ɵɵtext(6, "figmaPlugin({ accessToken: '...' })");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵtext(7, " in deiner ");
+    i0.ɵɵdomElementStart(8, "code");
+    i0.ɵɵtext(9, "ng-prism.config.ts");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵtext(10, ". ");
+    i0.ɵɵdomElementEnd()();
+} }
+function FigmaDesignDiffPanelComponent_Case_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1)(1, "p", 6);
+    i0.ɵɵtext(2, "Kein Figma-Node f\u00FCr diese Variante");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "p", 7);
+    i0.ɵɵtext(4, " F\u00FCge ");
+    i0.ɵɵdomElementStart(5, "code");
+    i0.ɵɵtext(6, "meta: { figma: '\u2026?node-id=12-34' }");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵtext(7, " zur aktiven Variante hinzu. ");
+    i0.ɵɵdomElementEnd()();
+} }
+function FigmaDesignDiffPanelComponent_Case_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 2)(1, "p", 6);
+    i0.ɵɵtext(2, "Figma API Fehler");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "p", 7);
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.errorMessage());
+} }
+function FigmaDesignDiffPanelComponent_Case_4_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 3)(1, "button", 8);
+    i0.ɵɵdomListener("click", function FigmaDesignDiffPanelComponent_Case_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.runDiff()); });
+    i0.ɵɵtext(2, " \u25B6 Design Diff ausf\u00FChren ");
+    i0.ɵɵdomElementEnd()();
+} }
+function FigmaDesignDiffPanelComponent_Case_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 4);
+    i0.ɵɵdomElement(1, "span", 9);
+    i0.ɵɵdomElementStart(2, "span");
+    i0.ɵɵtext(3, "Lade Screenshots\u2026");
+    i0.ɵɵdomElementEnd()();
+} }
+function FigmaDesignDiffPanelComponent_Case_6_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 18);
+    i0.ɵɵdomListener("click", function FigmaDesignDiffPanelComponent_Case_6_For_4_Template_button_click_0_listener() { const m_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.activeMode.set(m_r5.value)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const m_r5 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("diff-panel__mode-btn--active", ctx_r0.activeMode() === m_r5.value);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(m_r5.label);
+} }
+function FigmaDesignDiffPanelComponent_Case_6_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 16)(1, "div", 19)(2, "span", 20);
+    i0.ɵɵtext(3, "ng-prism");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElement(4, "img", 21);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "div", 19)(6, "span", 20);
+    i0.ɵɵtext(7, "Figma");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElement(8, "img", 22);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵdomProperty("src", ctx_r0.doneResult().componentDataUrl, i0.ɵɵsanitizeUrl);
+    i0.ɵɵadvance(4);
+    i0.ɵɵdomProperty("src", ctx_r0.doneResult().figmaDataUrl, i0.ɵɵsanitizeUrl);
+} }
+function FigmaDesignDiffPanelComponent_Case_6_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 23);
+    i0.ɵɵdomElement(1, "img", 24)(2, "img", 25);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "input", 26);
+    i0.ɵɵdomListener("input", function FigmaDesignDiffPanelComponent_Case_6_Conditional_11_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.overlayOpacity.set(+$event.target.value)); });
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("src", ctx_r0.doneResult().componentDataUrl, i0.ɵɵsanitizeUrl);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("opacity", ctx_r0.overlayOpacity() / 100);
+    i0.ɵɵdomProperty("src", ctx_r0.doneResult().figmaDataUrl, i0.ɵɵsanitizeUrl);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("value", ctx_r0.overlayOpacity());
+} }
+function FigmaDesignDiffPanelComponent_Case_6_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "img", 17);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵdomProperty("src", ctx_r0.doneResult().diffDataUrl, i0.ɵɵsanitizeUrl);
+} }
+function FigmaDesignDiffPanelComponent_Case_6_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 5)(1, "div", 10)(2, "div", 11);
+    i0.ɵɵrepeaterCreate(3, FigmaDesignDiffPanelComponent_Case_6_For_4_Template, 2, 3, "button", 12, _forTrack0);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "span", 13);
+    i0.ɵɵtext(6);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(7, "button", 14);
+    i0.ɵɵdomListener("click", function FigmaDesignDiffPanelComponent_Case_6_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.runDiff()); });
+    i0.ɵɵtext(8, " \u21BA Erneut ");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(9, "div", 15);
+    i0.ɵɵconditionalCreate(10, FigmaDesignDiffPanelComponent_Case_6_Conditional_10_Template, 9, 2, "div", 16);
+    i0.ɵɵconditionalCreate(11, FigmaDesignDiffPanelComponent_Case_6_Conditional_11_Template, 4, 5);
+    i0.ɵɵconditionalCreate(12, FigmaDesignDiffPanelComponent_Case_6_Conditional_12_Template, 1, 1, "img", 17);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r0.modes);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2(" ", ctx_r0.similarity(), "% match \u00B7 ", ctx_r0.doneResult().diffPixels.toLocaleString(), " px diff ");
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r0.activeMode() === "side-by-side" ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.activeMode() === "overlay" ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.activeMode() === "diff-only" ? 12 : -1);
+} }
+export class FigmaDesignDiffPanelComponent {
+    config = inject(FIGMA_PLUGIN_CONFIG);
+    nav = inject(PrismNavigationService);
+    renderer = inject(PrismRendererService);
+    state = signal({ status: 'idle' }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    activeMode = signal('side-by-side', ...(ngDevMode ? [{ debugName: "activeMode" }] : []));
+    overlayOpacity = signal(50, ...(ngDevMode ? [{ debugName: "overlayOpacity" }] : []));
+    modes = [
+        { value: 'side-by-side', label: 'Side-by-side' },
+        { value: 'overlay', label: 'Overlay' },
+        { value: 'diff-only', label: 'Diff' },
+    ];
+    doneResult = computed(() => {
+        const s = this.state();
+        return s.status === 'done' ? s.result : null;
+    }, ...(ngDevMode ? [{ debugName: "doneResult" }] : []));
+    similarity = computed(() => {
+        const r = this.doneResult();
+        return r ? r.similarity.toFixed(1) : '0';
+    }, ...(ngDevMode ? [{ debugName: "similarity" }] : []));
+    errorMessage = computed(() => {
+        const s = this.state();
+        return s.status === 'error-api' ? s.message : '';
+    }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    activeVariantMeta = computed(() => {
+        const comp = this.nav.activeComponent();
+        if (!comp)
+            return null;
+        const variants = comp.meta.showcaseConfig.variants;
+        const idx = this.renderer.activeVariantIndex();
+        const variantFigma = variants?.[idx]?.meta?.['figma'];
+        if (variantFigma !== undefined)
+            return parseFigmaMeta(variantFigma);
+        return parseFigmaMeta(comp.meta.showcaseConfig.meta?.['figma']);
+    }, ...(ngDevMode ? [{ debugName: "activeVariantMeta" }] : []));
+    runDiff() {
+        if (!this.config.accessToken) {
+            this.state.set({ status: 'error-no-token' });
+            return;
+        }
+        const meta = this.activeVariantMeta();
+        if (!meta) {
+            this.state.set({ status: 'error-no-node' });
+            return;
+        }
+        const fileKey = extractFileKey(meta.url);
+        if (!fileKey) {
+            this.state.set({ status: 'error-api', message: 'Ungültige Figma-URL' });
+            return;
+        }
+        this.state.set({ status: 'loading' });
+        this.executeDiff(fileKey, meta.nodeId);
+    }
+    async executeDiff(fileKey, nodeId) {
+        try {
+            const [{ computeDesignDiff }, { captureDomElement }, { fetchFigmaImage }] = await Promise.all([
+                import('./design-diff.engine.js'),
+                import('./component-screenshot.service.js'),
+                import('./figma-api.service.js'),
+            ]);
+            const element = this.renderer.renderedElement();
+            const [componentCanvas, figmaBlob] = await Promise.all([
+                captureDomElement(element),
+                fetchFigmaImage(fileKey, nodeId, this.config.accessToken),
+            ]);
+            const result = await computeDesignDiff(componentCanvas, figmaBlob);
+            this.state.set({ status: 'done', result });
+        }
+        catch (err) {
+            this.state.set({
+                status: 'error-api',
+                message: err instanceof Error ? err.message : 'Unbekannter Fehler',
+            });
+        }
+    }
+    static ɵfac = function FigmaDesignDiffPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FigmaDesignDiffPanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FigmaDesignDiffPanelComponent, selectors: [["prism-figma-design-diff-panel"]], decls: 7, vars: 1, consts: [[1, "diff-panel"], [1, "diff-panel__empty"], [1, "diff-panel__empty", "diff-panel__empty--error"], [1, "diff-panel__idle"], [1, "diff-panel__loading"], [1, "diff-panel__result"], [1, "diff-panel__empty-title"], [1, "diff-panel__empty-hint"], [1, "diff-panel__run-btn", 3, "click"], [1, "diff-panel__spinner"], [1, "diff-panel__toolbar"], [1, "diff-panel__modes"], [1, "diff-panel__mode-btn", 3, "diff-panel__mode-btn--active"], [1, "diff-panel__stats"], [1, "diff-panel__run-btn", "diff-panel__run-btn--sm", 3, "click"], [1, "diff-panel__canvas-area"], [1, "diff-panel__split"], ["alt", "Pixel diff", 3, "src"], [1, "diff-panel__mode-btn", 3, "click"], [1, "diff-panel__split-side"], [1, "diff-panel__split-label"], ["alt", "Component screenshot", 3, "src"], ["alt", "Figma design", 3, "src"], [1, "diff-panel__overlay-wrap"], ["alt", "Component", 1, "diff-panel__overlay-base", 3, "src"], ["alt", "Figma overlay", 1, "diff-panel__overlay-top", 3, "src"], ["type", "range", "min", "0", "max", "100", 1, "diff-panel__opacity-slider", 3, "input", "value"]], template: function FigmaDesignDiffPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, FigmaDesignDiffPanelComponent_Case_1_Template, 11, 0, "div", 1)(2, FigmaDesignDiffPanelComponent_Case_2_Template, 8, 0, "div", 1)(3, FigmaDesignDiffPanelComponent_Case_3_Template, 5, 1, "div", 2)(4, FigmaDesignDiffPanelComponent_Case_4_Template, 3, 0, "div", 3)(5, FigmaDesignDiffPanelComponent_Case_5_Template, 4, 0, "div", 4)(6, FigmaDesignDiffPanelComponent_Case_6_Template, 13, 5, "div", 5);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            let tmp_0_0;
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((tmp_0_0 = ctx.state().status) === "error-no-token" ? 1 : tmp_0_0 === "error-no-node" ? 2 : tmp_0_0 === "error-api" ? 3 : tmp_0_0 === "idle" ? 4 : tmp_0_0 === "loading" ? 5 : tmp_0_0 === "done" ? 6 : -1);
+        } }, styles: [".diff-panel[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      font-family: var(--prism-font-sans);\n      font-size: 13px;\n      color: var(--prism-text-1);\n      background: var(--prism-bg-elevated);\n    }\n\n    .diff-panel__empty[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      gap: 8px;\n      padding: 24px;\n      text-align: center;\n    }\n\n    .diff-panel__empty-title[_ngcontent-%COMP%] { font-weight: 500; color: var(--prism-text-1); margin: 0; }\n    .diff-panel__empty-hint[_ngcontent-%COMP%] { color: var(--prism-text-muted); margin: 0; }\n    .diff-panel__empty--error[_ngcontent-%COMP%]   .diff-panel__empty-title[_ngcontent-%COMP%] { color: #ef4444; }\n\n    .diff-panel__idle[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n    }\n\n    .diff-panel__loading[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      height: 100%;\n      color: var(--prism-text-muted);\n    }\n\n    .diff-panel__spinner[_ngcontent-%COMP%] {\n      width: 16px;\n      height: 16px;\n      border: 2px solid var(--prism-border);\n      border-top-color: var(--prism-primary);\n      border-radius: 50%;\n      animation: _ngcontent-%COMP%_spin 0.7s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin { to { transform: rotate(360deg); } }\n\n    .diff-panel__run-btn[_ngcontent-%COMP%] {\n      padding: 8px 16px;\n      background: var(--prism-primary);\n      color: #fff;\n      border: none;\n      border-radius: 6px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      cursor: pointer;\n    }\n\n    .diff-panel__run-btn[_ngcontent-%COMP%]:hover { opacity: 0.9; }\n    .diff-panel__run-btn--sm[_ngcontent-%COMP%] { padding: 5px 10px; font-size: 12px; }\n\n    .diff-panel__result[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .diff-panel__toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--prism-border);\n      flex-shrink: 0;\n    }\n\n    .diff-panel__modes[_ngcontent-%COMP%] { display: flex; gap: 2px; }\n\n    .diff-panel__mode-btn[_ngcontent-%COMP%] {\n      padding: 4px 10px;\n      border: 1px solid var(--prism-border);\n      background: none;\n      font-size: 12px;\n      font-family: var(--prism-font-sans);\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .diff-panel__mode-btn--active[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n      color: #fff;\n      border-color: var(--prism-primary);\n    }\n\n    .diff-panel__stats[_ngcontent-%COMP%] {\n      margin-left: auto;\n      color: var(--prism-text-muted);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .diff-panel__canvas-area[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: auto;\n      padding: 16px;\n      display: flex;\n      align-items: flex-start;\n      justify-content: center;\n    }\n\n    .diff-panel__split[_ngcontent-%COMP%] { display: flex; gap: 16px; width: 100%; }\n\n    .diff-panel__split-side[_ngcontent-%COMP%] { flex: 1; display: flex; flex-direction: column; gap: 6px; }\n\n    .diff-panel__split-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .diff-panel__split-side[_ngcontent-%COMP%]   img[_ngcontent-%COMP%], \n   .diff-panel__canvas-area[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n      max-width: 100%;\n      border: 1px solid var(--prism-border);\n      border-radius: 4px;\n    }\n\n    .diff-panel__overlay-wrap[_ngcontent-%COMP%] { position: relative; display: inline-block; }\n\n    .diff-panel__overlay-top[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0; left: 0;\n      width: 100%; height: 100%;\n    }\n\n    .diff-panel__opacity-slider[_ngcontent-%COMP%] { display: block; width: 200px; margin-top: 12px; }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FigmaDesignDiffPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-figma-design-diff-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="diff-panel">
+      @switch (state().status) {
+        @case ('error-no-token') {
+          <div class="diff-panel__empty">
+            <p class="diff-panel__empty-title">Access Token fehlt</p>
+            <p class="diff-panel__empty-hint">
+              Konfiguriere <code>figmaPlugin(&#123; accessToken: '...' &#125;)</code> in deiner
+              <code>ng-prism.config.ts</code>.
+            </p>
+          </div>
+        }
+        @case ('error-no-node') {
+          <div class="diff-panel__empty">
+            <p class="diff-panel__empty-title">Kein Figma-Node für diese Variante</p>
+            <p class="diff-panel__empty-hint">
+              Füge <code>meta: &#123; figma: '…?node-id=12-34' &#125;</code> zur aktiven Variante hinzu.
+            </p>
+          </div>
+        }
+        @case ('error-api') {
+          <div class="diff-panel__empty diff-panel__empty--error">
+            <p class="diff-panel__empty-title">Figma API Fehler</p>
+            <p class="diff-panel__empty-hint">{{ errorMessage() }}</p>
+          </div>
+        }
+        @case ('idle') {
+          <div class="diff-panel__idle">
+            <button class="diff-panel__run-btn" (click)="runDiff()">
+              ▶ Design Diff ausführen
+            </button>
+          </div>
+        }
+        @case ('loading') {
+          <div class="diff-panel__loading">
+            <span class="diff-panel__spinner"></span>
+            <span>Lade Screenshots…</span>
+          </div>
+        }
+        @case ('done') {
+          <div class="diff-panel__result">
+            <div class="diff-panel__toolbar">
+              <div class="diff-panel__modes">
+                @for (m of modes; track m.value) {
+                  <button
+                    class="diff-panel__mode-btn"
+                    [class.diff-panel__mode-btn--active]="activeMode() === m.value"
+                    (click)="activeMode.set(m.value)"
+                  >{{ m.label }}</button>
+                }
+              </div>
+              <span class="diff-panel__stats">
+                {{ similarity() }}% match &middot; {{ doneResult()!.diffPixels.toLocaleString() }} px diff
+              </span>
+              <button class="diff-panel__run-btn diff-panel__run-btn--sm" (click)="runDiff()">
+                ↺ Erneut
+              </button>
+            </div>
+            <div class="diff-panel__canvas-area">
+              @if (activeMode() === 'side-by-side') {
+                <div class="diff-panel__split">
+                  <div class="diff-panel__split-side">
+                    <span class="diff-panel__split-label">ng-prism</span>
+                    <img [src]="doneResult()!.componentDataUrl" alt="Component screenshot" />
+                  </div>
+                  <div class="diff-panel__split-side">
+                    <span class="diff-panel__split-label">Figma</span>
+                    <img [src]="doneResult()!.figmaDataUrl" alt="Figma design" />
+                  </div>
+                </div>
+              }
+              @if (activeMode() === 'overlay') {
+                <div class="diff-panel__overlay-wrap">
+                  <img class="diff-panel__overlay-base" [src]="doneResult()!.componentDataUrl" alt="Component" />
+                  <img
+                    class="diff-panel__overlay-top"
+                    [src]="doneResult()!.figmaDataUrl"
+                    [style.opacity]="overlayOpacity() / 100"
+                    alt="Figma overlay"
+                  />
+                </div>
+                <input
+                  class="diff-panel__opacity-slider"
+                  type="range" min="0" max="100"
+                  [value]="overlayOpacity()"
+                  (input)="overlayOpacity.set(+$any($event.target).value)"
+                />
+              }
+              @if (activeMode() === 'diff-only') {
+                <img [src]="doneResult()!.diffDataUrl" alt="Pixel diff" />
+              }
+            </div>
+          </div>
+        }
+      }
+    </div>
+  `, styles: ["\n    .diff-panel {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      font-family: var(--prism-font-sans);\n      font-size: 13px;\n      color: var(--prism-text-1);\n      background: var(--prism-bg-elevated);\n    }\n\n    .diff-panel__empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      gap: 8px;\n      padding: 24px;\n      text-align: center;\n    }\n\n    .diff-panel__empty-title { font-weight: 500; color: var(--prism-text-1); margin: 0; }\n    .diff-panel__empty-hint { color: var(--prism-text-muted); margin: 0; }\n    .diff-panel__empty--error .diff-panel__empty-title { color: #ef4444; }\n\n    .diff-panel__idle {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n    }\n\n    .diff-panel__loading {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      height: 100%;\n      color: var(--prism-text-muted);\n    }\n\n    .diff-panel__spinner {\n      width: 16px;\n      height: 16px;\n      border: 2px solid var(--prism-border);\n      border-top-color: var(--prism-primary);\n      border-radius: 50%;\n      animation: spin 0.7s linear infinite;\n    }\n\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    .diff-panel__run-btn {\n      padding: 8px 16px;\n      background: var(--prism-primary);\n      color: #fff;\n      border: none;\n      border-radius: 6px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      cursor: pointer;\n    }\n\n    .diff-panel__run-btn:hover { opacity: 0.9; }\n    .diff-panel__run-btn--sm { padding: 5px 10px; font-size: 12px; }\n\n    .diff-panel__result { display: flex; flex-direction: column; height: 100%; }\n\n    .diff-panel__toolbar {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--prism-border);\n      flex-shrink: 0;\n    }\n\n    .diff-panel__modes { display: flex; gap: 2px; }\n\n    .diff-panel__mode-btn {\n      padding: 4px 10px;\n      border: 1px solid var(--prism-border);\n      background: none;\n      font-size: 12px;\n      font-family: var(--prism-font-sans);\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .diff-panel__mode-btn--active {\n      background: var(--prism-primary);\n      color: #fff;\n      border-color: var(--prism-primary);\n    }\n\n    .diff-panel__stats {\n      margin-left: auto;\n      color: var(--prism-text-muted);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .diff-panel__canvas-area {\n      flex: 1;\n      overflow: auto;\n      padding: 16px;\n      display: flex;\n      align-items: flex-start;\n      justify-content: center;\n    }\n\n    .diff-panel__split { display: flex; gap: 16px; width: 100%; }\n\n    .diff-panel__split-side { flex: 1; display: flex; flex-direction: column; gap: 6px; }\n\n    .diff-panel__split-label {\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .diff-panel__split-side img,\n    .diff-panel__canvas-area img {\n      max-width: 100%;\n      border: 1px solid var(--prism-border);\n      border-radius: 4px;\n    }\n\n    .diff-panel__overlay-wrap { position: relative; display: inline-block; }\n\n    .diff-panel__overlay-top {\n      position: absolute;\n      top: 0; left: 0;\n      width: 100%; height: 100%;\n    }\n\n    .diff-panel__opacity-slider { display: block; width: 200px; margin-top: 12px; }\n  "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FigmaDesignDiffPanelComponent, { className: "FigmaDesignDiffPanelComponent", filePath: "diff/figma-design-diff-panel.component.ts", lineNumber: 249 }); })();

package/dist/diff/figma-diff.types.d.ts

@@ -0,0 +1,34 @@
+export type FigmaMeta = string | {
+    url: string;
+    nodeId?: string;
+};
+export type DiffMode = 'side-by-side' | 'overlay' | 'diff-only';
+export type DiffState = {
+    status: 'idle';
+} | {
+    status: 'loading';
+} | {
+    status: 'done';
+    result: DiffResult;
+} | {
+    status: 'error-no-token';
+} | {
+    status: 'error-no-node';
+} | {
+    status: 'error-api';
+    message: string;
+};
+export interface DiffResult {
+    similarity: number;
+    diffPixels: number;
+    totalPixels: number;
+    componentDataUrl: string;
+    figmaDataUrl: string;
+    diffDataUrl: string;
+}
+export declare function parseFigmaMeta(raw: unknown): {
+    url: string;
+    nodeId: string;
+} | null;
+export declare function extractFileKey(url: string): string | null;
+//# sourceMappingURL=figma-diff.types.d.ts.map

package/dist/diff/figma-diff.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"figma-diff.types.d.ts","sourceRoot":"","sources":["../../src/diff/figma-diff.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAElE,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG,SAAS,GAAG,WAAW,CAAC;AAEhE,MAAM,MAAM,SAAS,GACjB;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,GAClB;IAAE,MAAM,EAAE,SAAS,CAAA;CAAE,GACrB;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,UAAU,CAAA;CAAE,GACtC;IAAE,MAAM,EAAE,gBAAgB,CAAA;CAAE,GAC5B;IAAE,MAAM,EAAE,eAAe,CAAA;CAAE,GAC3B;IAAE,MAAM,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAE7C,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,OAAO,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAYnF;AAaD,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAGzD"}

package/dist/diff/figma-diff.types.js

@@ -0,0 +1,29 @@
+export function parseFigmaMeta(raw) {
+    if (typeof raw === 'string') {
+        return extractNodeId(raw);
+    }
+    if (raw && typeof raw === 'object' && 'url' in raw) {
+        const obj = raw;
+        if (obj.nodeId) {
+            return { url: obj.url, nodeId: obj.nodeId };
+        }
+        return extractNodeId(obj.url);
+    }
+    return null;
+}
+function extractNodeId(url) {
+    try {
+        const u = new URL(url);
+        const nodeId = u.searchParams.get('node-id');
+        if (!nodeId)
+            return null;
+        return { url, nodeId: nodeId.replace(/-/g, ':') };
+    }
+    catch {
+        return null;
+    }
+}
+export function extractFileKey(url) {
+    const match = url.match(/figma\.com\/(?:design|file)\/([^/?#]+)/);
+    return match?.[1] ?? null;
+}

package/dist/figma-config.token.d.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+export interface FigmaPluginOptions {
+    accessToken?: string;
+}
+export declare const FIGMA_PLUGIN_CONFIG: InjectionToken<FigmaPluginOptions>;
+//# sourceMappingURL=figma-config.token.d.ts.map

package/dist/figma-config.token.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"figma-config.token.d.ts","sourceRoot":"","sources":["../src/figma-config.token.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,WAAW,kBAAkB;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,oCAAgE,CAAC"}

package/dist/figma-config.token.js

@@ -0,0 +1,2 @@
+import { InjectionToken } from '@angular/core';
+export const FIGMA_PLUGIN_CONFIG = new InjectionToken('FIGMA_PLUGIN_CONFIG');

package/dist/figma-panel.component.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+export declare class FigmaPanelComponent {
+    private readonly renderer;
+    private readonly iframe;
+    readonly activeComponent: import("@angular/core").InputSignal<unknown>;
+    protected readonly figmaUrl: import("@angular/core").Signal<string | null>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<FigmaPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FigmaPanelComponent, "prism-figma-panel", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=figma-panel.component.d.ts.map

package/dist/figma-panel.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"figma-panel.component.d.ts","sourceRoot":"","sources":["../src/figma-panel.component.ts"],"names":[],"mappings":";AAYA,qBAkDa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAqB;IAC9C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAE1D,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,QAAQ,gDAKxB;;yCAXQ,mBAAmB;2CAAnB,mBAAmB;CA0B/B"}

package/dist/figma-panel.component.js

@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, Renderer2, viewChild, } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["iframe"];
+function FigmaPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "iframe", 1, 0);
+} }
+function FigmaPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 2);
+    i0.ɵɵtext(1, " No Figma design linked. Add ");
+    i0.ɵɵdomElementStart(2, "code");
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵtext(4, " to @Showcase. ");
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2("meta: ", "{", " figma: 'https://...' ", "}");
+} }
+export class FigmaPanelComponent {
+    renderer = inject(Renderer2);
+    iframe = viewChild('iframe', ...(ngDevMode ? [{ debugName: "iframe" }] : []));
+    activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
+    figmaUrl = computed(() => {
+        const comp = this.activeComponent();
+        if (!comp)
+            return null;
+        const url = comp.meta?.showcaseConfig?.meta?.['figma'];
+        return typeof url === 'string' ? url : null;
+    }, ...(ngDevMode ? [{ debugName: "figmaUrl" }] : []));
+    constructor() {
+        effect(() => {
+            const url = this.figmaUrl();
+            const el = this.iframe()?.nativeElement;
+            if (el && url) {
+                this.renderer.setAttribute(el, 'src', `https://www.figma.com/embed?embed_host=ng-prism&url=${encodeURIComponent(url)}`);
+            }
+        });
+    }
+    static ɵfac = function FigmaPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FigmaPanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FigmaPanelComponent, selectors: [["prism-figma-panel"]], viewQuery: function FigmaPanelComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.iframe, _c0, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, inputs: { activeComponent: [1, "activeComponent"] }, decls: 2, vars: 1, consts: [["iframe", ""], ["allowfullscreen", "", 1, "prism-figma-panel__iframe"], [1, "prism-figma-panel__empty"]], template: function FigmaPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, FigmaPanelComponent_Conditional_0_Template, 2, 0, "iframe", 1)(1, FigmaPanelComponent_Conditional_1_Template, 5, 2, "div", 2);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.figmaUrl() ? 0 : 1);
+        } }, styles: ["[_nghost-%COMP%] {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .prism-figma-panel__iframe[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n      min-height: 400px;\n      border: none;\n    }\n\n    .prism-figma-panel__empty[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      min-height: 200px;\n      color: var(--prism-text-muted, #6b7280);\n      font-size: 14px;\n    }\n\n    .prism-figma-panel__empty[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n      font-family: var(--prism-font-mono, monospace);\n      background: var(--prism-bg-surface, #f3f4f6);\n      padding: 2px 6px;\n      border-radius: 4px;\n      font-size: 13px;\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FigmaPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-figma-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (figmaUrl()) {
+      <iframe
+        #iframe
+        class="prism-figma-panel__iframe"
+        allowfullscreen
+      ></iframe>
+    } @else {
+      <div class="prism-figma-panel__empty">
+        No Figma design linked. Add <code>meta: {{ '{' }} figma: 'https://...' {{ '}' }}</code> to &#64;Showcase.
+      </div>
+    }
+  `, styles: ["\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .prism-figma-panel__iframe {\n      width: 100%;\n      height: 100%;\n      min-height: 400px;\n      border: none;\n    }\n\n    .prism-figma-panel__empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      min-height: 200px;\n      color: var(--prism-text-muted, #6b7280);\n      font-size: 14px;\n    }\n\n    .prism-figma-panel__empty code {\n      font-family: var(--prism-font-mono, monospace);\n      background: var(--prism-bg-surface, #f3f4f6);\n      padding: 2px 6px;\n      border-radius: 4px;\n      font-size: 13px;\n    }\n  "] }]
+    }], () => [], { iframe: [{ type: i0.ViewChild, args: ['iframe', { isSignal: true }] }], activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FigmaPanelComponent, { className: "FigmaPanelComponent", filePath: "figma-panel.component.ts", lineNumber: 63 }); })();

package/dist/figma-plugin.d.ts

@@ -0,0 +1,4 @@
+import type { NgPrismPlugin } from '@ng-prism/core/plugin';
+import { type FigmaPluginOptions } from './figma-config.token.js';
+export declare function figmaPlugin(options?: FigmaPluginOptions): NgPrismPlugin;
+//# sourceMappingURL=figma-plugin.d.ts.map

package/dist/figma-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"figma-plugin.d.ts","sourceRoot":"","sources":["../src/figma-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAGvF,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,aAAa,CAsB3E"}

package/dist/figma-plugin.js

@@ -0,0 +1,22 @@
+import { FIGMA_PLUGIN_CONFIG } from './figma-config.token.js';
+import { FigmaPanelComponent } from './figma-panel.component.js';
+export function figmaPlugin(options = {}) {
+    return {
+        name: '@ng-prism/plugin-figma',
+        panels: [
+            {
+                id: 'figma',
+                label: 'Figma',
+                component: FigmaPanelComponent,
+                position: 'bottom',
+            },
+            {
+                id: 'figma-diff',
+                label: 'Design Diff',
+                loadComponent: () => import('./diff/figma-design-diff-panel.component.js').then((m) => m.FigmaDesignDiffPanelComponent),
+                position: 'bottom',
+                providers: [{ provide: FIGMA_PLUGIN_CONFIG, useValue: options }],
+            },
+        ],
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { figmaPlugin } from './figma-plugin.js';
+export { FigmaPanelComponent } from './figma-panel.component.js';
+export { FIGMA_PLUGIN_CONFIG, type FigmaPluginOptions } from './figma-config.token.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,KAAK,kBAAkB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { figmaPlugin } from './figma-plugin.js';
+export { FigmaPanelComponent } from './figma-panel.component.js';
+export { FIGMA_PLUGIN_CONFIG } from './figma-config.token.js';

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@ng-prism/plugin-figma",
+  "version": "21.0.0",
+  "description": "Figma design embed panel for ng-prism.",
+  "keywords": [
+    "@ng-prism/core",
+    "figma",
+    "plugin",
+    "angular",
+    "styleguide"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "peerDependencies": {
+    "@angular/core": ">=20.0.0",
+    "html2canvas": ">=1.4.0",
+    "pixelmatch": ">=6.0.0",
+    "@ng-prism/core": ">=21.0.0"
+  },
+  "peerDependenciesMeta": {
+    "html2canvas": {
+      "optional": true
+    },
+    "pixelmatch": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@ng-prism/core": "*"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dyingangel666/ng-prism.git",
+    "directory": "packages/plugin-figma"
+  },
+  "homepage": "https://dyingangel666.github.io/ng-prism/",
+  "bugs": "https://github.com/dyingangel666/ng-prism/issues"
+}