@ng-prism/core 22.0.0-beta.1 → 22.0.0-beta.3

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,qBAkJa,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      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      max-width: 600px;\n\n      > * {\n        flex: 1 1 auto;\n        text-align: center;\n      }\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      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      max-width: 600px;\n\n      > * {\n        flex: 1 1 auto;\n        text-align: center;\n      }\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: 183 }); })();
+(() => { (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/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/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.1",
+  "version": "22.0.0-beta.3",
   "description": "ng-prism — the Angular-native Storybook alternative. Lightweight component showcase with @Showcase decorator, no story files needed.",
   "keywords": [
     "ng-prism",