@ng-prism/core 22.0.0-beta.2 → 22.0.0-beta.4

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

@@ -27,6 +27,8 @@ export declare class PrismRendererComponent {
     readonly activeOverlay: import("@angular/core").WritableSignal<Type<unknown> | null>;
     /** Identifier of the currently rendered component/variant (for audit tooling / e2e). */
     protected readonly renderedKey: import("@angular/core").Signal<string | null>;
+    /** Resolved canvas layout for the active variant — variant overrides component config; defaults to 'fit'. */
+    protected readonly canvasLayout: import("@angular/core").Signal<import("../../shared/canvas-layout.type.js").CanvasLayout>;
     protected readonly overlayInputs: {
         rendererService: PrismRendererService;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAIhF,qBA2Ia,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAC/B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,wFAAwF;IACxF,SAAS,CAAC,QAAQ,CAAC,WAAW,gDAQ3B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IA0FH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAlOJ,sBAAsB;2CAAtB,sBAAsB;CAgPlC"}
+{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAIhF,qBA8Ia,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAC/B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,wFAAwF;IACxF,SAAS,CAAC,QAAQ,CAAC,WAAW,gDAQ3B;IACH,6GAA6G;IAC7G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAQ5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IA0FH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCA5OJ,sBAAsB;2CAAtB,sBAAsB;CA0PlC"}

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

@@ -60,6 +60,15 @@ export class PrismRendererComponent {
         return `${comp.meta.className}:${this.rendererService.activeVariantIndex()}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "renderedKey" }] : /* istanbul ignore next */ []));
+    /** Resolved canvas layout for the active variant — variant overrides component config; defaults to 'fit'. */
+    canvasLayout = computed(() => {
+        const comp = this.navigationService.activeComponent();
+        if (!comp)
+            return 'fit';
+        const variant = comp.meta.showcaseConfig.variants?.[this.rendererService.activeVariantIndex()];
+        return variant?.canvasLayout ?? comp.meta.showcaseConfig.canvasLayout ?? 'fit';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasLayout" }] : /* istanbul ignore next */ []));
     overlayInputs = { rendererService: this.rendererService };
     overlayInjector = computed(() => {
         const panelInjector = this.panelService.activePanelInjector();
@@ -220,7 +229,7 @@ export class PrismRendererComponent {
             i0.ɵɵviewQuerySignal(ctx.outlet, _c0, 5, ViewContainerRef);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, decls: 11, vars: 9, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "canvas-badges"], [1, "c-badge"], [1, "stage-crosshair"], [1, "demo-wrap"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 11, vars: 10, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "canvas-badges"], [1, "c-badge"], [1, "stage-crosshair"], [1, "demo-wrap"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "span", 3);
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd()();
@@ -237,12 +246,12 @@ export class PrismRendererComponent {
             i0.ɵɵclassProp("visible", ctx.canvasService.guides());
             i0.ɵɵadvance(3);
             i0.ɵɵstyleProp("--zoom", ctx.canvasService.zoom());
-            i0.ɵɵattribute("data-prism-rendered", ctx.renderedKey());
+            i0.ɵɵattribute("data-prism-rendered", ctx.renderedKey())("data-canvas-layout", ctx.canvasLayout());
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.activeOverlay() ? 10 : -1);
         } }, dependencies: [PrismCanvasRulersComponent,
             PrismCanvasBgPillComponent,
-            NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage[_ngcontent-%COMP%] {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"][_ngcontent-%COMP%] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible[_ngcontent-%COMP%] { opacity: 1; }\n    .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair[_ngcontent-%COMP%]::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair[_ngcontent-%COMP%]::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges[_ngcontent-%COMP%] {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap[_ngcontent-%COMP%] {\n      position: relative;\n      display: block;\n      width: 100%;\n      max-width: 800px;\n      text-align: center;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }"] });
+            NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage[_ngcontent-%COMP%] {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"][_ngcontent-%COMP%] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible[_ngcontent-%COMP%] { opacity: 1; }\n    .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair[_ngcontent-%COMP%]::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair[_ngcontent-%COMP%]::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges[_ngcontent-%COMP%] {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap[_ngcontent-%COMP%] {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"][_ngcontent-%COMP%] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismRendererComponent, [{
         type: Component,
@@ -272,6 +281,7 @@ export class PrismRendererComponent {
         class="demo-wrap"
         [style.--zoom]="canvasService.zoom()"
         [attr.data-prism-rendered]="renderedKey()"
+        [attr.data-canvas-layout]="canvasLayout()"
       >
         <ng-container #outlet />
         @if (activeOverlay()) {
@@ -285,11 +295,11 @@ export class PrismRendererComponent {
         }
       </div>
     </div>
-  `, styles: ["\n    :host { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible { opacity: 1; }\n    .stage-crosshair::before,\n    .stage-crosshair::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap {\n      position: relative;\n      display: block;\n      width: 100%;\n      max-width: 800px;\n      text-align: center;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }\n\n  "] }]
+  `, styles: ["\n    :host { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible { opacity: 1; }\n    .stage-crosshair::before,\n    .stage-crosshair::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }\n\n  "] }]
     }], () => [], { outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
                         read: ViewContainerRef,
                     }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 176 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 179 }); })();
 function parseContentToNodes(content) {
     if (typeof content === 'string') {
         return [htmlToNodes(content)];

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

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

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

@@ -1,5 +1,6 @@
 import ts from 'typescript';
 import { CANVAS_BGS } from '../../shared/canvas-bg.type.js';
+import { CANVAS_LAYOUTS, } from '../../shared/canvas-layout.type.js';
 const COMPONENT_STATUSES = ['stable', 'beta', 'wip', 'deprecated'];
 function isComponentStatus(value) {
     return (typeof value === 'string' &&
@@ -11,6 +12,10 @@ function isCanvasBg(value) {
     return (typeof value === 'string' &&
         CANVAS_BGS.includes(value));
 }
+function isCanvasLayout(value) {
+    return (typeof value === 'string' &&
+        CANVAS_LAYOUTS.includes(value));
+}
 /**
  * Scan exported symbols for Angular components annotated with @Showcase.
  */
@@ -107,6 +112,15 @@ function extractShowcaseConfig(decorator, className) {
                 `expected one of: dots, plain, light, dark, checker. Skipping.`);
         }
     }
+    if (obj['canvasLayout'] !== undefined) {
+        if (isCanvasLayout(obj['canvasLayout'])) {
+            config.canvasLayout = obj['canvasLayout'];
+        }
+        else {
+            console.warn(`⚠ ng-prism: ${className} declares invalid canvasLayout "${String(obj['canvasLayout'])}" — ` +
+                `expected one of: ${CANVAS_LAYOUTS.join(', ')}. Skipping.`);
+        }
+    }
     if (Array.isArray(obj['variants'])) {
         config.variants = obj['variants'].map((variant) => {
             const cleaned = { ...variant };
@@ -115,6 +129,12 @@ function extractShowcaseConfig(decorator, className) {
                     `invalid bg "${String(variant['bg'])}" — expected one of: dots, plain, light, dark, checker. Skipping.`);
                 delete cleaned['bg'];
             }
+            if (variant['canvasLayout'] !== undefined &&
+                !isCanvasLayout(variant['canvasLayout'])) {
+                console.warn(`⚠ ng-prism: ${className} variant "${String(variant['name'])}" declares ` +
+                    `invalid canvasLayout "${String(variant['canvasLayout'])}" — expected one of: ${CANVAS_LAYOUTS.join(', ')}. Skipping.`);
+                delete cleaned['canvasLayout'];
+            }
             return cleaned;
         });
     }

package/dist/builder/shared/prism-pipeline.d.ts

@@ -5,7 +5,7 @@ export interface PrismPipelineOptions {
     libraryImportPath: string;
     prismProject: string;
     configFile: string;
-    /** Absolute path. If omitted, defaults to `<workspaceRoot>/.ng-prism/<prismProject>`. */
+    /** Absolute path. If omitted, defaults to `<workspaceRoot>/ng-prism-cache/<prismProject>`. */
     cacheDir?: string;
 }
 export interface PrismPipelineResult {

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":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAYpE,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;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,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,oGAAoG;IACpG,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;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,CAyE9B"}
+{"version":3,"file":"prism-pipeline.d.ts","sourceRoot":"","sources":["../../../src/builder/shared/prism-pipeline.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAYpE,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;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,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,oGAAoG;IACpG,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;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,CAyE9B"}

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, existsSync, } from 'fs';
 import ts from 'typescript';
 import { createScanner } from '../scanner/scanner.js';
 import { discoverSecondaryEntryPoints } from '../scanner/entry-point-discovery.js';
@@ -45,7 +45,8 @@ export async function runPrismPipeline(options, context, state) {
         pages: manifest.pages,
         meta: manifest.meta,
     });
-    const cacheDir = options.cacheDir ?? join(workspaceRoot, '.ng-prism', options.prismProject);
+    const cacheRoot = options.cacheDir ?? join(workspaceRoot, 'ng-prism-cache');
+    const cacheDir = join(cacheRoot, options.prismProject);
     const manifestPath = join(cacheDir, 'prism-manifest.ts');
     mkdirSync(cacheDir, { recursive: true });
     const written = writeManifestIfChanged(manifestPath, source);
@@ -69,22 +70,17 @@ function writeManifestIfChanged(manifestPath, newContent) {
             return false;
         }
     }
-    const tempPath = manifestPath + '.tmp';
-    writeFileSync(tempPath, newContent, 'utf-8');
-    try {
-        renameSync(tempPath, manifestPath);
-    }
-    catch (err) {
-        if (existsSync(tempPath)) {
-            try {
-                unlinkSync(tempPath);
-            }
-            catch {
-                /* best-effort cleanup */
-            }
-        }
-        throw err;
-    }
+    // In-place write (truncate + write to the existing inode). The previous
+    // implementation used a temp file + atomic rename, which produces a fresh
+    // inode on every write. That breaks file watchers — most importantly Vite's
+    // — when the manifest lives in a cache dir outside the prism project's
+    // source root: Vite watches the file by path/inode, loses the handle on
+    // rename, and never picks up subsequent rewrites. The result for the user
+    // is that @Showcase changes never trigger an HMR / reload. The window
+    // between truncate and write is small (single syscall for kilobyte-sized
+    // manifests), so the risk of a bundler observing a partial file is
+    // negligible in practice.
+    writeFileSync(manifestPath, newContent, 'utf-8');
     return true;
 }
 function isDirectory(path) {

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

@@ -1,5 +1,6 @@
 import type { InputSignalWithTransform, Provider } from '@angular/core';
 import type { CanvasBg } from '../shared/canvas-bg.type.js';
+import type { CanvasLayout } from '../shared/canvas-layout.type.js';
 export type ComponentStatus = 'stable' | 'beta' | 'wip' | 'deprecated';
 export interface DirectiveHost {
     selector: string;
@@ -52,6 +53,15 @@ export interface ShowcaseConfig<T = unknown> {
      * resets when switching variants or components.
      */
     bg?: CanvasBg;
+    /**
+     * Canvas layout mode for the rendered component.
+     * - `'fit'` (default): wrapper shrinks to content, component is centered in the canvas.
+     * - `'stretch'`: wrapper takes full canvas width (up to a sensible max) so block-level
+     *   components without intrinsic width (e.g. horizontal dividers) and components that
+     *   opt into `width: 100%` (e.g. full-width buttons) render correctly.
+     * A `Variant.canvasLayout` overrides this.
+     */
+    canvasLayout?: CanvasLayout;
     /** Host element for directive showcases. String = HTML element (e.g. '<button class="btn">'), object = Angular component. */
     host?: string | DirectiveHost;
     /** Title of a registered ComponentPage to render instead of the component itself. Use for complex components that need template projections or mock data. The page component can inject PrismRendererService to react to control panel changes. */
@@ -81,6 +91,8 @@ export interface Variant<T = unknown> {
     meta?: Record<string, unknown>;
     /** Recommended canvas background for this variant. Overrides `ShowcaseConfig.bg`. */
     bg?: CanvasBg;
+    /** Canvas layout mode for this variant. Overrides `ShowcaseConfig.canvasLayout`. See `ShowcaseConfig.canvasLayout` for semantics. */
+    canvasLayout?: CanvasLayout;
 }
 export {};
 //# sourceMappingURL=showcase.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"showcase.types.d.ts","sourceRoot":"","sources":["../../src/decorator/showcase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,YAAY,CAAC;AAEvE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC;AAOD,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,SAAS,wBAAwB,CAC5D,GAAG,EACH,MAAM,MAAM,CACb,GACG,MAAM,GACN,KAAK,CAAC;AAEV;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,GAC3C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACvB;KACG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,wBAAwB,CAAC,GAAG,EAAE,GAAG,CAAC,GAC5D,CAAC,GACD,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACpC,CAAC;AAEN,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,OAAO;IACzC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2IAA2I;IAC3I,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iJAAiJ;IACjJ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B;;;;;OAKG;IACH,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,6HAA6H;IAC7H,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAC9B,mPAAmP;IACnP,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,WAAW,OAAO,CAAC,CAAC,GAAG,OAAO;IAClC,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,0IAA0I;IAC1I,MAAM,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,qFAAqF;IACrF,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf"}
+{"version":3,"file":"showcase.types.d.ts","sourceRoot":"","sources":["../../src/decorator/showcase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,YAAY,CAAC;AAEvE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC;AAOD,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,SAAS,wBAAwB,CAC5D,GAAG,EACH,MAAM,MAAM,CACb,GACG,MAAM,GACN,KAAK,CAAC;AAEV;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,GAC3C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACvB;KACG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,wBAAwB,CAAC,GAAG,EAAE,GAAG,CAAC,GAC5D,CAAC,GACD,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACpC,CAAC;AAEN,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,OAAO;IACzC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2IAA2I;IAC3I,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iJAAiJ;IACjJ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B;;;;;OAKG;IACH,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,6HAA6H;IAC7H,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAC9B,mPAAmP;IACnP,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,WAAW,OAAO,CAAC,CAAC,GAAG,OAAO;IAClC,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,0IAA0I;IAC1I,MAAM,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,qFAAqF;IACrF,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,qIAAqI;IACrI,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B"}

package/dist/schematics/migrations/v21-13-manifest-cache/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/schematics/migrations/v21-13-manifest-cache/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAA0B,MAAM,4BAA4B,CAAC;AAsK/E,wBAAgB,OAAO,IAAI,IAAI,CAiB9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/schematics/migrations/v21-13-manifest-cache/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAA0B,MAAM,4BAA4B,CAAC;AAiM/E,wBAAgB,OAAO,IAAI,IAAI,CAiB9B"}

package/dist/schematics/migrations/v21-13-manifest-cache/index.js

@@ -1,8 +1,18 @@
 import { addTsConfigPath } from '../../utils/tsconfig-paths.js';
 const OLD_IMPORT = /^import\s+\{\s*PRISM_RUNTIME_MANIFEST\s*\}\s+from\s+['"](?:\.\/prism-manifest|prism-manifest)['"]\s*;?$/m;
+/**
+ * Matches a Vite HMR accept call whose dependency target is the legacy
+ * `./prism-manifest` module specifier. Captures everything after the dep
+ * argument so the rewrite preserves the original callback and trailing
+ * code verbatim.
+ */
+const OLD_HMR_ACCEPT = /\.accept\s*\(\s*(['"])\.\/prism-manifest\1\s*(,)/g;
 function buildNewImport(prismProject) {
     return `import { PRISM_RUNTIME_MANIFEST } from 'prism-manifest/${prismProject}';`;
 }
+function buildNewHmrAcceptTarget(prismProject) {
+    return `.accept('prism-manifest/${prismProject}',`;
+}
 function readWorkspace(tree) {
     const buffer = tree.read('angular.json');
     if (!buffer)
@@ -34,24 +44,36 @@ function rewriteMainTs(tree, context, workspace, prismProject) {
     if (!buffer)
         return;
     const newImport = buildNewImport(prismProject);
+    const newHmrTarget = buildNewHmrAcceptTarget(prismProject);
     const content = buffer.toString('utf-8');
-    if (content.includes(newImport))
+    const importMatches = OLD_IMPORT.test(content);
+    const hmrMatches = OLD_HMR_ACCEPT.test(content);
+    OLD_HMR_ACCEPT.lastIndex = 0;
+    if (content.includes(newImport) && !hmrMatches)
         return;
-    if (!OLD_IMPORT.test(content)) {
+    let next = content;
+    if (importMatches) {
+        next = next.replace(OLD_IMPORT, newImport);
+    }
+    else if (!next.includes(newImport)) {
         context.logger.warn(`ng-prism migration: could not find PRISM_RUNTIME_MANIFEST import in ${mainPath}. ` +
             `Update it manually to: ${newImport}`);
-        return;
     }
-    tree.overwrite(mainPath, content.replace(OLD_IMPORT, newImport));
+    if (hmrMatches) {
+        next = next.replace(OLD_HMR_ACCEPT, newHmrTarget);
+    }
+    if (next !== content) {
+        tree.overwrite(mainPath, next);
+    }
 }
 function addTsConfigMapping(tree) {
     addTsConfigPath(tree, 'tsconfig.json', 'prism-manifest/*', [
-        './.ng-prism/*/prism-manifest.ts',
+        './ng-prism-cache/*/prism-manifest.ts',
     ]);
 }
 function ensureNgPrismGitignoreEntry(tree) {
     const path = '.gitignore';
-    const entry = '.ng-prism/';
+    const entry = 'ng-prism-cache/';
     const buffer = tree.read(path);
     if (!buffer) {
         tree.create(path, entry + '\n');
@@ -88,7 +110,7 @@ function addCacheIncludeToTsconfigApp(tree, workspace, prismProject) {
     const include = Array.isArray(parsed.include)
         ? parsed.include
         : [];
-    const includeEntry = `../../.ng-prism/${prismProject}/**/*.ts`;
+    const includeEntry = `../../ng-prism-cache/${prismProject}/**/*.ts`;
     const includeChanged = !include.includes(includeEntry);
     const nextInclude = includeChanged ? [...include, includeEntry] : include;
     const compilerOptions = { ...(parsed.compilerOptions ?? {}) };

package/dist/schematics/migrations/v22-0-cache-dir-rename/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from '@angular-devkit/schematics';
+export declare function migrate(): Rule;
+//# sourceMappingURL=index.d.ts.map

package/dist/schematics/migrations/v22-0-cache-dir-rename/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/schematics/migrations/v22-0-cache-dir-rename/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAA0B,MAAM,4BAA4B,CAAC;AAmJ/E,wBAAgB,OAAO,IAAI,IAAI,CAsB9B"}

package/dist/schematics/migrations/v22-0-cache-dir-rename/index.js

@@ -0,0 +1,138 @@
+import { addTsConfigPath } from '../../utils/tsconfig-paths.js';
+const OLD_DIR = '.ng-prism';
+const NEW_DIR = 'ng-prism-cache';
+const OLD_GITIGNORE_ENTRY = '.ng-prism/';
+const NEW_GITIGNORE_ENTRY = 'ng-prism-cache/';
+const OLD_PATH_MAPPING = './.ng-prism/*/prism-manifest.ts';
+const NEW_PATH_MAPPING = './ng-prism-cache/*/prism-manifest.ts';
+function readWorkspace(tree) {
+    const buffer = tree.read('angular.json');
+    if (!buffer)
+        return undefined;
+    return JSON.parse(buffer.toString('utf-8'));
+}
+function findPrismProjects(workspace) {
+    const projects = workspace.projects ?? {};
+    const result = [];
+    for (const [, project] of Object.entries(projects)) {
+        const architect = project.architect ?? {};
+        for (const target of Object.values(architect)) {
+            if (target.builder === '@ng-prism/core:serve') {
+                const prismProject = target.options?.['prismProject'];
+                if (typeof prismProject === 'string' &&
+                    !result.includes(prismProject)) {
+                    result.push(prismProject);
+                }
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Replace the `prism-manifest/*` path mapping if it still points at the old
+ * `.ng-prism/` location, while preserving any user customisation that already
+ * uses a different target.
+ */
+function updateTsConfigMapping(tree, context) {
+    const buffer = tree.read('tsconfig.json');
+    if (!buffer)
+        return;
+    let parsed;
+    try {
+        parsed = JSON.parse(buffer.toString('utf-8'));
+    }
+    catch {
+        context.logger.warn('ng-prism migration: tsconfig.json could not be parsed; skipping path-mapping update. Update "prism-manifest/*" to ' +
+            `["${NEW_PATH_MAPPING}"] manually.`);
+        return;
+    }
+    const existing = parsed.compilerOptions?.paths?.['prism-manifest/*'];
+    if (!existing) {
+        // No existing mapping — fall through to addTsConfigPath which inserts the new default.
+        addTsConfigPath(tree, 'tsconfig.json', 'prism-manifest/*', [
+            NEW_PATH_MAPPING,
+        ]);
+        return;
+    }
+    // Replace any entries that still reference the legacy dot-dir; leave the rest alone.
+    const updated = existing.map((entry) => entry === OLD_PATH_MAPPING ? NEW_PATH_MAPPING : entry);
+    if (updated.every((entry, i) => entry === existing[i]))
+        return;
+    parsed.compilerOptions.paths['prism-manifest/*'] = updated;
+    tree.overwrite('tsconfig.json', JSON.stringify(parsed, null, 2) + '\n');
+}
+function updateTsConfigAppInclude(tree, workspace, prismProject) {
+    const project = workspace.projects?.[prismProject];
+    const projectRoot = project?.root ?? `projects/${prismProject}`;
+    const path = `${projectRoot}/tsconfig.app.json`;
+    const buffer = tree.read(path);
+    if (!buffer)
+        return;
+    const sourceText = buffer.toString('utf-8');
+    let parsed;
+    try {
+        parsed = JSON.parse(sourceText);
+    }
+    catch {
+        return;
+    }
+    if (!Array.isArray(parsed.include))
+        return;
+    const oldEntry = `../../${OLD_DIR}/${prismProject}/**/*.ts`;
+    const newEntry = `../../${NEW_DIR}/${prismProject}/**/*.ts`;
+    const include = parsed.include;
+    const oldIndex = include.indexOf(oldEntry);
+    if (oldIndex === -1 && include.includes(newEntry))
+        return;
+    if (oldIndex === -1)
+        return;
+    const next = [...include];
+    next[oldIndex] = newEntry;
+    // Avoid duplicates if user already had both entries for some reason.
+    const deduped = Array.from(new Set(next));
+    const updated = { ...parsed, include: deduped };
+    tree.overwrite(path, JSON.stringify(updated, null, 2) + '\n');
+}
+function renameGitignoreEntry(tree) {
+    const path = '.gitignore';
+    const buffer = tree.read(path);
+    if (!buffer)
+        return;
+    const content = buffer.toString('utf-8');
+    const lines = content.split('\n');
+    let changed = false;
+    const next = lines.map((line) => {
+        if (line.trim() === OLD_GITIGNORE_ENTRY) {
+            changed = true;
+            return line.replace(OLD_GITIGNORE_ENTRY, NEW_GITIGNORE_ENTRY);
+        }
+        return line;
+    });
+    if (!changed) {
+        // Ensure the new entry exists even if the old one was already missing.
+        if (next.some((line) => line.trim() === NEW_GITIGNORE_ENTRY))
+            return;
+        tree.overwrite(path, content.trimEnd() + '\n' + NEW_GITIGNORE_ENTRY + '\n');
+        return;
+    }
+    tree.overwrite(path, next.join('\n'));
+}
+export function migrate() {
+    return (tree, context) => {
+        const workspace = readWorkspace(tree);
+        if (!workspace)
+            return tree;
+        const prismProjects = findPrismProjects(workspace);
+        if (prismProjects.length === 0)
+            return tree;
+        updateTsConfigMapping(tree, context);
+        for (const prismProject of prismProjects) {
+            updateTsConfigAppInclude(tree, workspace, prismProject);
+        }
+        renameGitignoreEntry(tree);
+        context.logger.info('ng-prism migration: cache directory renamed from .ng-prism/ to ng-prism-cache/. ' +
+            'You can safely delete the old .ng-prism/ directory from your workspace — ' +
+            'the builder will regenerate the manifest on next serve/build run.');
+        return tree;
+    };
+}

package/dist/schematics/ng-add/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,IAAI,EAIV,MAAM,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAqWtD,wBAAgB,KAAK,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAWvD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,IAAI,EAIV,MAAM,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAkXtD,wBAAgB,KAAK,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAWvD"}

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

@@ -22,31 +22,43 @@ function addPrismAppProject(options) {
         const prismRoot = `projects/${prismProjectName}`;
         const prismSrc = `${prismRoot}/src`;
         const zoneless = options.zoneless === true;
+        const hotConst = "const hot = (import.meta as ImportMeta & { hot?: { accept(dep: string, cb: (mod: { PRISM_RUNTIME_MANIFEST: typeof PRISM_RUNTIME_MANIFEST } | undefined) => void): void } }).hot;";
+        const hmrThen = [
+            '.then((appRef) => {',
+            `  hot?.accept('prism-manifest/${prismProjectName}', (mod) => {`,
+            '    if (mod) enablePrismHmr(appRef, mod.PRISM_RUNTIME_MANIFEST);',
+            '  });',
+            '});',
+        ].join('\n');
         const mainTs = zoneless
             ? [
                 "import { provideZonelessChangeDetection } from '@angular/core';",
                 "import { bootstrapApplication } from '@angular/platform-browser';",
-                "import { PrismShellComponent, providePrism } from '@ng-prism/core';",
+                "import { enablePrismHmr, PrismShellComponent, providePrism } from '@ng-prism/core';",
                 `import { PRISM_RUNTIME_MANIFEST } from 'prism-manifest/${prismProjectName}';`,
                 "import config from 'ng-prism.config';",
                 '',
+                hotConst,
+                '',
                 'bootstrapApplication(PrismShellComponent, {',
                 '  providers: [',
                 '    provideZonelessChangeDetection(),',
                 '    providePrism(PRISM_RUNTIME_MANIFEST, config),',
                 '  ],',
-                '});',
+                '})' + hmrThen,
                 '',
             ].join('\n')
             : [
                 "import { bootstrapApplication } from '@angular/platform-browser';",
-                "import { PrismShellComponent, providePrism } from '@ng-prism/core';",
+                "import { enablePrismHmr, PrismShellComponent, providePrism } from '@ng-prism/core';",
                 `import { PRISM_RUNTIME_MANIFEST } from 'prism-manifest/${prismProjectName}';`,
                 "import config from 'ng-prism.config';",
                 '',
+                hotConst,
+                '',
                 'bootstrapApplication(PrismShellComponent, {',
                 '  providers: [providePrism(PRISM_RUNTIME_MANIFEST, config)],',
-                '});',
+                '})' + hmrThen,
                 '',
             ].join('\n');
         if (!tree.exists(`${prismSrc}/main.ts`)) {
@@ -83,7 +95,7 @@ function addPrismAppProject(options) {
                 files: ['src/main.ts'],
                 include: [
                     'src/**/*.d.ts',
-                    `../../.ng-prism/${prismProjectName}/**/*.ts`,
+                    `../../ng-prism-cache/${prismProjectName}/**/*.ts`,
                 ],
             };
             tree.create(tsconfigAppPath, JSON.stringify(tsconfigApp, null, 2) + '\n');
@@ -196,7 +208,7 @@ function addTsConfigPaths(options) {
             `./${sourceRoot}/public-api.ts`,
         ]);
         addTsConfigPath(tree, tsConfigPath, 'prism-manifest/*', [
-            './.ng-prism/*/prism-manifest.ts',
+            './ng-prism-cache/*/prism-manifest.ts',
         ]);
         return tree;
     };
@@ -260,7 +272,7 @@ function logSetupSummary(options) {
 }
 function addNgPrismGitignoreEntry() {
     return (tree) => {
-        const entry = '.ng-prism/';
+        const entry = 'ng-prism-cache/';
         const gitignorePath = '.gitignore';
         const buffer = tree.read(gitignorePath);
         if (buffer) {

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

@@ -0,0 +1,3 @@
+export type CanvasLayout = 'fit' | 'stretch';
+export declare const CANVAS_LAYOUTS: readonly CanvasLayout[];
+//# sourceMappingURL=canvas-layout.type.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-layout.type.d.ts","sourceRoot":"","sources":["../../src/shared/canvas-layout.type.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,SAAS,CAAC;AAE7C,eAAO,MAAM,cAAc,EAAE,SAAS,YAAY,EAAgC,CAAC"}

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

@@ -0,0 +1 @@
+export const CANVAS_LAYOUTS = ['fit', 'stretch'];

package/package.json

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

package/schematics/migrations.json

@@ -3,8 +3,13 @@
   "schematics": {
     "migration-v22-manifest-cache": {
       "version": "22.0.0-beta.0",
-      "description": "Move generated prism-manifest.ts into <workspaceRoot>/.ng-prism/<prismProject>/ and resolve it via a wildcard tsconfig path mapping.",
+      "description": "Move generated prism-manifest.ts into <workspaceRoot>/ng-prism-cache/<prismProject>/ and resolve it via a wildcard tsconfig path mapping.",
       "factory": "../dist/schematics/migrations/v21-13-manifest-cache/index#migrate"
+    },
+    "migration-v22-cache-dir-rename": {
+      "version": "22.0.0-beta.4",
+      "description": "Rename the manifest cache directory from .ng-prism/ to ng-prism-cache/. The dot-prefixed name was silently excluded from @angular/build's watcher (hardcoded **/.*/** ignore pattern), so @Showcase decorator edits never triggered an HMR / reload.",
+      "factory": "../dist/schematics/migrations/v22-0-cache-dir-rename/index#migrate"
     }
   }
 }