@ng-prism/core 22.2.1 → 22.4.0

package/dist/app/shared/prism-metric-badge.component.d.ts

@@ -2,21 +2,15 @@ import * as i0 from "@angular/core";
 /**
  * Library-wide metric badge for the header.
  *
- * Presentational only — it takes an already-formatted value and a variant and
- * knows nothing about thresholds, manifests or where the number came from.
- * That keeps the three badges that use it (a11y in core, coverage and visual
- * regression in their plugins) owning their own data logic while sharing one
- * appearance.
+ * Presentational only: it takes a formatted value and a variant, so each badge
+ * (a11y in core, coverage and visual regression in their plugins) keeps its own
+ * data logic while sharing one appearance.
  *
- * It carries an icon rather than a text label on purpose. The glyph is the
- * same one the source contributes to the navigation marks and its panel tab,
- * so one symbol means one source wherever it appears — and the badge gets
- * narrow enough that three of them fit a 40px header without crowding it.
- * The icon is `aria-hidden` — it is decoration, not content. The accessible
- * name is composed here as "label: value" (e.g. "Library coverage: 23%"), so
- * the figure that is the whole point of the badge cannot be dropped by a
- * consumer that only passes `label`. `title` stays the full text the
- * consumer passes, for the hover tooltip.
+ * It shows an icon instead of a text label: the same glyph the source uses for
+ * its navigation marks and panel tab, and narrow enough to fit three badges in
+ * the 40px header. The icon is `aria-hidden`; the accessible name is built here
+ * as "label: value" (e.g. "Library coverage: 23%") so a consumer cannot drop
+ * the figure. `title` is the consumer's full text for the hover tooltip.
  */
 export declare class PrismMetricBadgeComponent {
     readonly icon: import("@angular/core").InputSignal<string>;
@@ -24,7 +18,7 @@ export declare class PrismMetricBadgeComponent {
     readonly label: import("@angular/core").InputSignal<string>;
     readonly title: import("@angular/core").InputSignal<string>;
     readonly variant: import("@angular/core").InputSignal<"ok" | "warn" | "danger">;
-    /** "label: value" — the accessible name, so the figure is never dropped. */
+    /** "label: value" is the accessible name, so the figure is never dropped. */
     readonly accessibleName: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismMetricBadgeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismMetricBadgeComponent, "prism-metric-badge", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

package/dist/app/shared/prism-metric-badge.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-metric-badge.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-metric-badge.component.ts"],"names":[],"mappings":";AAQA;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBA6Da,yBAAyB;IACpC,QAAQ,CAAC,IAAI,8CAA4B;IACzC,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,8CAAqB;IACnC,QAAQ,CAAC,OAAO,gEAAyC;IAEzD,4EAA4E;IAC5E,QAAQ,CAAC,cAAc,yCAAsD;yCARlE,yBAAyB;2CAAzB,yBAAyB;CASrC"}
+{"version":3,"file":"prism-metric-badge.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-metric-badge.component.ts"],"names":[],"mappings":";AAGA;;;;;;;;;;;;GAYG;AACH,qBAQa,yBAAyB;IAClC,QAAQ,CAAC,IAAI,8CAA4B;IACzC,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,8CAAqB;IACnC,QAAQ,CAAC,OAAO,gEAAyC;IAEzD,6EAA6E;IAC7E,QAAQ,CAAC,cAAc,yCAAsD;yCARpE,yBAAyB;2CAAzB,yBAAyB;CASrC"}

package/dist/app/shared/prism-metric-badge.component.js

@@ -1,24 +1,18 @@
-import { ChangeDetectionStrategy, Component, computed, input, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import * as i0 from "@angular/core";
 /**
  * Library-wide metric badge for the header.
  *
- * Presentational only — it takes an already-formatted value and a variant and
- * knows nothing about thresholds, manifests or where the number came from.
- * That keeps the three badges that use it (a11y in core, coverage and visual
- * regression in their plugins) owning their own data logic while sharing one
- * appearance.
+ * Presentational only: it takes a formatted value and a variant, so each badge
+ * (a11y in core, coverage and visual regression in their plugins) keeps its own
+ * data logic while sharing one appearance.
  *
- * It carries an icon rather than a text label on purpose. The glyph is the
- * same one the source contributes to the navigation marks and its panel tab,
- * so one symbol means one source wherever it appears — and the badge gets
- * narrow enough that three of them fit a 40px header without crowding it.
- * The icon is `aria-hidden` — it is decoration, not content. The accessible
- * name is composed here as "label: value" (e.g. "Library coverage: 23%"), so
- * the figure that is the whole point of the badge cannot be dropped by a
- * consumer that only passes `label`. `title` stays the full text the
- * consumer passes, for the hover tooltip.
+ * It shows an icon instead of a text label: the same glyph the source uses for
+ * its navigation marks and panel tab, and narrow enough to fit three badges in
+ * the 40px header. The icon is `aria-hidden`; the accessible name is built here
+ * as "label: value" (e.g. "Library coverage: 23%") so a consumer cannot drop
+ * the figure. `title` is the consumer's full text for the hover tooltip.
  */
 export class PrismMetricBadgeComponent {
     icon = input.required(/* @ts-ignore */
@@ -31,7 +25,7 @@ export class PrismMetricBadgeComponent {
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     variant = input('ok', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** "label: value" — the accessible name, so the figure is never dropped. */
+    /** "label: value" is the accessible name, so the figure is never dropped. */
     accessibleName = computed(() => `${this.label()}: ${this.value()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "accessibleName" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismMetricBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismMetricBadgeComponent)(); };
@@ -48,23 +42,10 @@ export class PrismMetricBadgeComponent {
             i0.ɵɵproperty("name", ctx.icon())("size", 12);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.value());
-        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: inline-flex; align-items: center; }\n\n    .metric-badge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--%NS%sp-2);\n      height: 20px;\n      padding: 0 var(--%NS%sp-3) 0 var(--%NS%sp-2);\n      border-radius: var(--%NS%radius-sm);\n      border: 1px solid var(--%NS%prism-border);\n      background: var(--%NS%prism-input-bg);\n      color: var(--%NS%prism-text-muted);\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-xs);\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    }\n    .metric-badge__value[_ngcontent-%COMP%] { color: var(--%NS%prism-text); font-weight: 600; }\n\n    .metric-badge--ok[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-nominal);\n      border-color: color-mix(in srgb, var(--%NS%prism-mark-nominal) 35%, transparent);\n      background: color-mix(in srgb, var(--%NS%prism-mark-nominal) 10%, transparent);\n    }\n    .metric-badge--ok[_ngcontent-%COMP%]   .metric-badge__value[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-nominal); }\n\n    .metric-badge--warn[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-attention);\n      border-color: color-mix(in srgb, var(--%NS%prism-mark-attention) 35%, transparent);\n      background: color-mix(in srgb, var(--%NS%prism-mark-attention) 10%, transparent);\n    }\n    .metric-badge--warn[_ngcontent-%COMP%]   .metric-badge__value[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-attention); }\n\n    .metric-badge--danger[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-mark-critical);\n      border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 40%, transparent);\n      background: color-mix(in srgb, var(--%NS%prism-mark-critical) 10%, transparent);\n    }\n    .metric-badge--danger[_ngcontent-%COMP%]   .metric-badge__value[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-critical); }"] });
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n}\n\n.metric-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: var(--%NS%sp-2);\n    align-items: center;\n    height: 20px;\n    padding: 0 var(--%NS%sp-3) 0 var(--%NS%sp-2);\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-sm);\n}\n\n.metric-badge__value[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n}\n\n.metric-badge--ok[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n    background: color-mix(in srgb, var(--%NS%prism-mark-nominal) 10%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-nominal) 35%, transparent);\n}\n\n.metric-badge--ok[_ngcontent-%COMP%]   .metric-badge__value[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n}\n\n.metric-badge--warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n    background: color-mix(in srgb, var(--%NS%prism-mark-attention) 10%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-attention) 35%, transparent);\n}\n\n.metric-badge--warn[_ngcontent-%COMP%]   .metric-badge__value[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n}\n\n.metric-badge--danger[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n    background: color-mix(in srgb, var(--%NS%prism-mark-critical) 10%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 40%, transparent);\n}\n\n.metric-badge--danger[_ngcontent-%COMP%]   .metric-badge__value[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismMetricBadgeComponent, [{
         type: Component,
-        args: [{ selector: 'prism-metric-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
-    <span
-      class="metric-badge"
-      role="img"
-      [class.metric-badge--ok]="variant() === 'ok'"
-      [class.metric-badge--warn]="variant() === 'warn'"
-      [class.metric-badge--danger]="variant() === 'danger'"
-      [attr.title]="title() || label()"
-      [attr.aria-label]="accessibleName()"
-    >
-      <prism-icon [name]="icon()" [size]="12" aria-hidden="true" />
-      <span class="metric-badge__value">{{ value() }}</span>
-    </span>
-  `, styles: ["\n    :host { display: inline-flex; align-items: center; }\n\n    .metric-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--sp-2);\n      height: 20px;\n      padding: 0 var(--sp-3) 0 var(--sp-2);\n      border-radius: var(--radius-sm);\n      border: 1px solid var(--prism-border);\n      background: var(--prism-input-bg);\n      color: var(--prism-text-muted);\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    }\n    .metric-badge__value { color: var(--prism-text); font-weight: 600; }\n\n    .metric-badge--ok {\n      color: var(--prism-mark-nominal);\n      border-color: color-mix(in srgb, var(--prism-mark-nominal) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-mark-nominal) 10%, transparent);\n    }\n    .metric-badge--ok .metric-badge__value { color: var(--prism-mark-nominal); }\n\n    .metric-badge--warn {\n      color: var(--prism-mark-attention);\n      border-color: color-mix(in srgb, var(--prism-mark-attention) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-mark-attention) 10%, transparent);\n    }\n    .metric-badge--warn .metric-badge__value { color: var(--prism-mark-attention); }\n\n    .metric-badge--danger {\n      color: var(--prism-mark-critical);\n      border-color: color-mix(in srgb, var(--prism-mark-critical) 40%, transparent);\n      background: color-mix(in srgb, var(--prism-mark-critical) 10%, transparent);\n    }\n    .metric-badge--danger .metric-badge__value { color: var(--prism-mark-critical); }\n  "] }]
+        args: [{ selector: 'prism-metric-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<span\n    class=\"metric-badge\"\n    role=\"img\"\n    [class.metric-badge--ok]=\"variant() === 'ok'\"\n    [class.metric-badge--warn]=\"variant() === 'warn'\"\n    [class.metric-badge--danger]=\"variant() === 'danger'\"\n    [attr.title]=\"title() || label()\"\n    [attr.aria-label]=\"accessibleName()\">\n    <prism-icon\n        [name]=\"icon()\"\n        [size]=\"12\"\n        aria-hidden=\"true\" />\n    <span class=\"metric-badge__value\">{{ value() }}</span>\n</span>\n", styles: [":host {\n    display: inline-flex;\n    align-items: center;\n}\n\n.metric-badge {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 20px;\n    padding: 0 var(--sp-3) 0 var(--sp-2);\n    font-family: var(--font-mono);\n    font-size: var(--fs-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-sm);\n}\n\n.metric-badge__value {\n    font-weight: 600;\n    color: var(--prism-text);\n}\n\n.metric-badge--ok {\n    color: var(--prism-mark-nominal);\n    background: color-mix(in srgb, var(--prism-mark-nominal) 10%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-nominal) 35%, transparent);\n}\n\n.metric-badge--ok .metric-badge__value {\n    color: var(--prism-mark-nominal);\n}\n\n.metric-badge--warn {\n    color: var(--prism-mark-attention);\n    background: color-mix(in srgb, var(--prism-mark-attention) 10%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-attention) 35%, transparent);\n}\n\n.metric-badge--warn .metric-badge__value {\n    color: var(--prism-mark-attention);\n}\n\n.metric-badge--danger {\n    color: var(--prism-mark-critical);\n    background: color-mix(in srgb, var(--prism-mark-critical) 10%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 40%, transparent);\n}\n\n.metric-badge--danger .metric-badge__value {\n    color: var(--prism-mark-critical);\n}\n"] }]
     }], null, { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismMetricBadgeComponent, { className: "PrismMetricBadgeComponent", filePath: "app/shared/prism-metric-badge.component.ts", lineNumber: 89 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismMetricBadgeComponent, { className: "PrismMetricBadgeComponent", filePath: "app/shared/prism-metric-badge.component.ts", lineNumber: 25 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"prism-shell.component.d.ts","sourceRoot":"","sources":["../../../src/app/shell/prism-shell.component.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAiBvE,qBAkQa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAC9D,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAmC;IAEtE,SAAS,CAAC,QAAQ,CAAC,UAAU,2FAAuC;IAEpE,SAAS,CAAC,QAAQ,CAAC,SAAS,0CAK1B;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAG1B;;IAoCH,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;yCAzDhC,mBAAmB;2CAAnB,mBAAmB;CA6E/B"}
+{"version":3,"file":"prism-shell.component.d.ts","sourceRoot":"","sources":["../../../src/app/shell/prism-shell.component.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAWvE,qBAsBa,mBAAmB;IAC5B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAC9D,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAmC;IAEtE,SAAS,CAAC,QAAQ,CAAC,UAAU,2FAAuC;IAEpE,SAAS,CAAC,QAAQ,CAAC,SAAS,0CAA0I;IAEtK,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAI1B;;IAmCH,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;yCApDlC,mBAAmB;2CAAnB,mBAAmB;CAwE/B"}

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

@@ -1,24 +1,25 @@
-import { Component, computed, effect, inject, untracked, HostListener, ChangeDetectionStrategy, } from '@angular/core';
-import { PRISM_CONFIG } from '../tokens/prism-tokens.js';
-import { PrismThemeService } from '../services/prism-theme.service.js';
-import { PrismLayoutService } from '../services/prism-layout.service.js';
-import { PrismNavigationService } from '../services/prism-navigation.service.js';
-import { PrismPanelService } from '../services/prism-panel.service.js';
+import { ChangeDetectionStrategy, Component, computed, effect, HostListener, inject, untracked } from '@angular/core';
+import { PrismCanvasPinRowComponent } from '../canvas/prism-canvas-pin-row.component.js';
+import { PrismCanvasToolbarComponent } from '../canvas/prism-canvas-toolbar.component.js';
+import { PrismTemplatePopoverComponent } from '../canvas/prism-template-popover.component.js';
 import { PrismComponentHeadComponent } from '../component-head/prism-component-head.component.js';
-import { PrismVariantRibbonComponent } from '../variant-ribbon/prism-variant-ribbon.component.js';
+import { PrismResizerDirective } from '../directives/prism-resizer.directive.js';
 import { PrismHeaderComponent } from '../header/prism-header.component.js';
+import { PrismPageRendererComponent } from '../page-renderer/prism-page-renderer.component.js';
 import { PrismPanelHostComponent } from '../panels/panel-host/prism-panel-host.component.js';
 import { PrismRendererComponent } from '../renderer/prism-renderer.component.js';
-import { PrismSidebarComponent } from '../sidebar/prism-sidebar.component.js';
-import { PrismPageRendererComponent } from '../page-renderer/prism-page-renderer.component.js';
-import { PrismUrlStateService } from '../services/prism-url-state.service.js';
+import { PrismLayoutService } from '../services/prism-layout.service.js';
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { PrismPanelService } from '../services/prism-panel.service.js';
 import { PrismPersistenceService } from '../services/prism-persistence.service.js';
-import { PrismViewTabBarComponent } from '../view-tab-bar/prism-view-tab-bar.component.js';
-import { PrismViewPanelHostComponent } from '../view-tab-bar/prism-view-panel-host.component.js';
-import { PrismResizerDirective } from '../directives/prism-resizer.directive.js';
-import { PrismCanvasToolbarComponent } from '../canvas/prism-canvas-toolbar.component.js';
-import { PrismTemplatePopoverComponent } from '../canvas/prism-template-popover.component.js';
+import { PrismThemeService } from '../services/prism-theme.service.js';
+import { PrismUrlStateService } from '../services/prism-url-state.service.js';
+import { PrismSidebarComponent } from '../sidebar/prism-sidebar.component.js';
+import { PRISM_CONFIG } from '../tokens/prism-tokens.js';
+import { PrismVariantRibbonComponent } from '../variant-ribbon/prism-variant-ribbon.component.js';
 import { nextViewId } from '../view-tab-bar/next-view-id.js';
+import { PrismViewPanelHostComponent } from '../view-tab-bar/prism-view-panel-host.component.js';
+import { PrismViewTabBarComponent } from '../view-tab-bar/prism-view-tab-bar.component.js';
 import * as i0 from "@angular/core";
 function PrismShellComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -49,7 +50,7 @@ function PrismShellComponent_Conditional_5_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(2, PrismShellComponent_Conditional_5_Conditional_0_Conditional_2_Template, 1, 0, "prism-variant-ribbon");
     i0.ɵɵelementStart(3, "div", 12);
-    i0.ɵɵelement(4, "prism-canvas-toolbar")(5, "prism-renderer")(6, "prism-template-popover");
+    i0.ɵɵelement(4, "prism-canvas-toolbar")(5, "prism-renderer")(6, "prism-template-popover")(7, "prism-canvas-pin-row");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -77,7 +78,7 @@ function PrismShellComponent_Conditional_5_Conditional_2_Template(rf, ctx) { if
     i0.ɵɵproperty("min", 200)("max", 560)("value", ctx_r1.layout.panelHeight());
 } }
 function PrismShellComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, PrismShellComponent_Conditional_5_Conditional_0_Template, 7, 2)(1, PrismShellComponent_Conditional_5_Conditional_1_Template, 3, 0);
+    i0.ɵɵconditionalCreate(0, PrismShellComponent_Conditional_5_Conditional_0_Template, 8, 2)(1, PrismShellComponent_Conditional_5_Conditional_1_Template, 3, 0);
     i0.ɵɵconditionalCreate(2, PrismShellComponent_Conditional_5_Conditional_2_Template, 3, 3);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -111,9 +112,7 @@ export class PrismShellComponent {
     urlStateService = inject(PrismUrlStateService);
     persistenceService = inject(PrismPersistenceService);
     viewPanels = this.panelService.visibleViewPanels;
-    showPanel = computed(() => this.layout.addonsVisible() &&
-        this.panelService.activeViewId() === 'renderer' &&
-        !this.navigationService.activePage(), /* @ts-ignore */
+    showPanel = computed(() => this.layout.addonsVisible() && this.panelService.activeViewId() === 'renderer' && !this.navigationService.activePage(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showPanel" }] : /* istanbul ignore next */ []));
     shellStyle = computed(() => {
         const sw = this.layout.sidebarVisible() ? this.layout.sidebarWidth() : 0;
@@ -126,11 +125,11 @@ export class PrismShellComponent {
         this.urlStateService.init();
         this.persistenceService.init();
         // A view survives a component switch as long as the new component still
-        // offers it — browsing a library variant-sheet by variant-sheet was
+        // offers it. Browsing a library variant-sheet by variant-sheet was
         // impossible while every navigation dropped back to the Playground. The
         // old rule watched for the *event* of switching and needed a key to
         // remember; this one states the invariant and needs nothing. The rule
-        // itself lives in `nextViewId`, a pure function with its own tests — this
+        // itself lives in `nextViewId`, a pure function with its own tests; this
         // effect only reads the two signals it needs and applies the result.
         effect(() => {
             const next = nextViewId(this.panelService.activeViewId(), this.panelService.visibleViewPanels());
@@ -200,7 +199,8 @@ export class PrismShellComponent {
             PrismViewPanelHostComponent,
             PrismResizerDirective,
             PrismCanvasToolbarComponent,
-            PrismTemplatePopoverComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n    .prism-shell[_ngcontent-%COMP%] {\n      height: 100vh;\n      display: grid;\n      grid-template-rows: var(--%NS%band-header) 1fr;\n      background: var(--%NS%prism-void);\n      font-family: var(--%NS%font-sans, var(--%NS%prism-font-sans));\n      color: var(--%NS%prism-text);\n      overflow: hidden;\n    }\n\n    .prism-body[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: var(--%NS%sw, 264px) 4px 1fr;\n      min-height: 0;\n    }\n    .prism-body--no-sidebar[_ngcontent-%COMP%] {\n      grid-template-columns: 1fr;\n    }\n\n    .prism-sidebar-wrap[_ngcontent-%COMP%] {\n      background: var(--%NS%prism-bg);\n      border-right: 1px solid var(--%NS%prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .prism-sidebar-wrap[_ngcontent-%COMP%]   prism-sidebar[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n    }\n\n    .prism-sidebar-foot[_ngcontent-%COMP%] {\n      border-top: 1px solid var(--%NS%prism-border);\n      padding: 10px 14px;\n      font-size: 11px;\n      color: var(--%NS%prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .prism-sidebar-foot__logo[_ngcontent-%COMP%] {\n      width: 16px;\n      flex-shrink: 0;\n    }\n    .prism-sidebar-foot__link[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-ghost);\n      text-decoration: none;\n      transition: color var(--%NS%dur-fast);\n    }\n    .prism-sidebar-foot__link[_ngcontent-%COMP%]:hover {\n      color: var(--%NS%prism-text-2);\n    }\n\n    .prism-resizer-col[_ngcontent-%COMP%] {\n      width: 4px;\n      background: transparent;\n      transition: background var(--%NS%dur-fast) var(--%NS%ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-col[_ngcontent-%COMP%]:hover, \n   .prism-resizer-col.active[_ngcontent-%COMP%] {\n      background: var(--%NS%prism-primary);\n    }\n\n    .prism-main[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      background: var(--%NS%prism-void);\n      overflow: hidden;\n    }\n\n    .prism-resizer-row[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      height: 4px;\n      background: transparent;\n      transition: background var(--%NS%dur-fast) var(--%NS%ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-row[_ngcontent-%COMP%]:hover, \n   .prism-resizer-row.active[_ngcontent-%COMP%] {\n      background: var(--%NS%prism-primary);\n    }\n\n    \n\n\n    .prism-canvas-wrap[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-rows: minmax(0, 1fr);\n      background: var(--%NS%prism-bg-surface);\n      overflow: hidden;\n      position: relative;\n    }\n    .prism-main__canvas[_ngcontent-%COMP%] { flex: 1; min-height: 0; overflow: auto; }\n\n    .prism-main__panel[_ngcontent-%COMP%] {\n      height: var(--%NS%ph, 260px);\n      flex-shrink: 0;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .prism-shell__empty[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      grid-row: 1 / -1;\n    }\n    .prism-shell__empty-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      color: var(--%NS%prism-text-ghost);\n      margin-bottom: 8px;\n    }\n    .prism-shell__empty-text[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--%NS%fs-xl);\n      font-weight: 500;\n      color: var(--%NS%prism-text-muted);\n    }\n    .prism-shell__empty-hint[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--%NS%fs-lg);\n      color: var(--%NS%prism-text-ghost);\n    }"] });
+            PrismTemplatePopoverComponent,
+            PrismCanvasPinRowComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.prism-shell[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-rows: var(--%NS%band-header) 1fr;\n\n    \n\n\n\n\n\n\n\n\n\n\n\n\n    grid-template-columns: minmax(0, 1fr);\n    height: 100vh;\n    overflow: hidden;\n    font-family: var(--%NS%font-sans, var(--%NS%prism-font-sans));\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-void);\n}\n\n.prism-body[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: var(--%NS%sw, 264px) 4px 1fr;\n    min-height: 0;\n}\n\n.prism-body--no-sidebar[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n}\n\n.prism-sidebar-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-bg);\n    border-right: 1px solid var(--%NS%prism-border);\n}\n\n.prism-sidebar-wrap[_ngcontent-%COMP%]   prism-sidebar[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n}\n\n.prism-sidebar-foot[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 10px 14px;\n    font-size: 11px;\n    color: var(--%NS%prism-text-ghost);\n    border-top: 1px solid var(--%NS%prism-border);\n}\n\n.prism-sidebar-foot__logo[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    width: 16px;\n}\n\n.prism-sidebar-foot__link[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-ghost);\n    text-decoration: none;\n    transition: color var(--%NS%dur-fast);\n}\n\n.prism-sidebar-foot__link[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.prism-resizer-col[_ngcontent-%COMP%] {\n    position: relative;\n    z-index: 5;\n    width: 4px;\n    background: transparent;\n    transition: background var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.prism-resizer-col[_ngcontent-%COMP%]:hover, \n.prism-resizer-col.active[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-primary);\n}\n\n.prism-main[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-void);\n}\n\n.prism-resizer-row[_ngcontent-%COMP%] {\n    position: relative;\n    z-index: 5;\n    flex-shrink: 0;\n    height: 4px;\n    background: transparent;\n    transition: background var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.prism-resizer-row[_ngcontent-%COMP%]:hover, \n.prism-resizer-row.active[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-primary);\n}\n\n\n\n\n.prism-canvas-wrap[_ngcontent-%COMP%] {\n    position: relative;\n    display: grid;\n    flex: 1;\n    grid-template-rows: minmax(0, 1fr);\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-bg-surface);\n}\n\n.prism-main__canvas[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n}\n\n.prism-main__panel[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    height: var(--%NS%ph, 260px);\n    min-height: 0;\n    overflow: hidden;\n}\n\n.prism-shell__empty[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    grid-row: 1 / -1;\n    gap: 8px;\n    align-items: center;\n    justify-content: center;\n}\n\n.prism-shell__empty-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    margin-bottom: 8px;\n    color: var(--%NS%prism-text-ghost);\n}\n\n.prism-shell__empty-text[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: var(--%NS%fs-xl);\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n}\n\n.prism-shell__empty-hint[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: var(--%NS%fs-lg);\n    color: var(--%NS%prism-text-ghost);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismShellComponent, [{
         type: Component,
@@ -217,109 +217,10 @@ export class PrismShellComponent {
                     PrismResizerDirective,
                     PrismCanvasToolbarComponent,
                     PrismTemplatePopoverComponent,
-                ], template: `
-    <div class="prism-shell" [style]="shellStyle()">
-      <prism-header class="prism-shell__header" />
-
-      <div
-        class="prism-body"
-        [class.prism-body--no-sidebar]="!layout.sidebarVisible()"
-      >
-        @if (layout.sidebarVisible()) {
-        <aside class="prism-sidebar-wrap">
-          <prism-sidebar />
-          <div class="prism-sidebar-foot">
-            <img
-              class="prism-sidebar-foot__logo"
-              alt="ng-prism logo"
-              src="data:image/png;base64,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"
-            />
-            <a
-              class="prism-sidebar-foot__link"
-              href="https://dyingangel666.github.io/ng-prism/#/"
-              target="_blank"
-              rel="noopener"
-            >
-              Powered by ng-prism
-            </a>
-          </div>
-        </aside>
-        <div
-          class="prism-resizer-col"
-          prismResizer
-          axis="x"
-          [min]="200"
-          [max]="360"
-          [value]="layout.sidebarWidth()"
-          (valueChange)="layout.setSidebarWidth($event)"
-        ></div>
-        }
-
-        <main
-          class="prism-main"
-          [style.--ph.px]="showPanel() ? layout.panelHeight() : 0"
-        >
-          @if (navigationService.activeComponent()) { @if
-          (panelService.activeViewId() === 'renderer') {
-          <prism-component-head>
-            @if (viewPanels().length > 0) {
-            <prism-view-tab-bar headEnd />
-            }
-          </prism-component-head>
-          @if (layout.toolbarVisible()) {
-          <prism-variant-ribbon />
-          }
-          <div class="prism-canvas-wrap">
-            <prism-canvas-toolbar />
-            <prism-renderer />
-            <prism-template-popover />
-          </div>
-          } @else {
-          <prism-component-head>
-            <prism-view-tab-bar headEnd />
-          </prism-component-head>
-          <prism-view-panel-host class="prism-main__canvas" />
-          } @if (showPanel()) {
-          <div
-            class="prism-resizer-row"
-            prismResizer
-            axis="y"
-            [min]="200"
-            [max]="560"
-            [value]="layout.panelHeight()"
-            (valueChange)="layout.setPanelHeight($event)"
-          ></div>
-          <div class="prism-main__panel">
-            <prism-panel-host />
-          </div>
-          } } @else if (navigationService.activePage()) {
-          <prism-page-renderer class="prism-main__canvas" />
-          } @else {
-          <div class="prism-shell__empty">
-            <svg
-              class="prism-shell__empty-icon"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M12 2L4 14h16L12 2z" />
-              <path d="M4 14l4 8h8l4-8" />
-            </svg>
-            <p class="prism-shell__empty-text">Select a component</p>
-            <p class="prism-shell__empty-hint">
-              from the sidebar to preview it here
-            </p>
-          </div>
-          }
-        </main>
-      </div>
-    </div>
-  `, styles: ["\n    :host { display: block; height: 100%; }\n\n    .prism-shell {\n      height: 100vh;\n      display: grid;\n      grid-template-rows: var(--band-header) 1fr;\n      background: var(--prism-void);\n      font-family: var(--font-sans, var(--prism-font-sans));\n      color: var(--prism-text);\n      overflow: hidden;\n    }\n\n    .prism-body {\n      display: grid;\n      grid-template-columns: var(--sw, 264px) 4px 1fr;\n      min-height: 0;\n    }\n    .prism-body--no-sidebar {\n      grid-template-columns: 1fr;\n    }\n\n    .prism-sidebar-wrap {\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .prism-sidebar-wrap prism-sidebar {\n      flex: 1;\n      min-height: 0;\n    }\n\n    .prism-sidebar-foot {\n      border-top: 1px solid var(--prism-border);\n      padding: 10px 14px;\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .prism-sidebar-foot__logo {\n      width: 16px;\n      flex-shrink: 0;\n    }\n    .prism-sidebar-foot__link {\n      color: var(--prism-text-ghost);\n      text-decoration: none;\n      transition: color var(--dur-fast);\n    }\n    .prism-sidebar-foot__link:hover {\n      color: var(--prism-text-2);\n    }\n\n    .prism-resizer-col {\n      width: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-col:hover,\n    .prism-resizer-col.active {\n      background: var(--prism-primary);\n    }\n\n    .prism-main {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      background: var(--prism-void);\n      overflow: hidden;\n    }\n\n    .prism-resizer-row {\n      flex-shrink: 0;\n      height: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-row:hover,\n    .prism-resizer-row.active {\n      background: var(--prism-primary);\n    }\n\n    /* One row, not two: the canvas tools no longer occupy a band above the\n       stage, they float over it from a rail absolutely positioned against\n       this element. The position: relative below is what anchors it. */\n    .prism-canvas-wrap {\n      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-rows: minmax(0, 1fr);\n      background: var(--prism-bg-surface);\n      overflow: hidden;\n      position: relative;\n    }\n    .prism-main__canvas { flex: 1; min-height: 0; overflow: auto; }\n\n    .prism-main__panel {\n      height: var(--ph, 260px);\n      flex-shrink: 0;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .prism-shell__empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      grid-row: 1 / -1;\n    }\n    .prism-shell__empty-icon {\n      width: 48px;\n      height: 48px;\n      color: var(--prism-text-ghost);\n      margin-bottom: 8px;\n    }\n    .prism-shell__empty-text {\n      margin: 0;\n      font-size: var(--fs-xl);\n      font-weight: 500;\n      color: var(--prism-text-muted);\n    }\n    .prism-shell__empty-hint {\n      margin: 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-ghost);\n    }\n  "] }]
+                    PrismCanvasPinRowComponent
+                ], template: "<div\n    class=\"prism-shell\"\n    [style]=\"shellStyle()\">\n    <prism-header class=\"prism-shell__header\" />\n\n    <div\n        class=\"prism-body\"\n        [class.prism-body--no-sidebar]=\"!layout.sidebarVisible()\">\n        @if (layout.sidebarVisible()) {\n            <aside class=\"prism-sidebar-wrap\">\n                <prism-sidebar />\n                <div class=\"prism-sidebar-foot\">\n                    <img\n                        class=\"prism-sidebar-foot__logo\"\n                        alt=\"ng-prism logo\"\n                        src=\"data:image/png;base64,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\" />\n                    <a\n                        class=\"prism-sidebar-foot__link\"\n                        href=\"https://dyingangel666.github.io/ng-prism/#/\"\n                        target=\"_blank\"\n                        rel=\"noopener\">\n                        Powered by ng-prism\n                    </a>\n                </div>\n            </aside>\n            <div\n                class=\"prism-resizer-col\"\n                prismResizer\n                axis=\"x\"\n                [min]=\"200\"\n                [max]=\"360\"\n                [value]=\"layout.sidebarWidth()\"\n                (valueChange)=\"layout.setSidebarWidth($event)\"></div>\n        }\n\n        <main\n            class=\"prism-main\"\n            [style.--ph.px]=\"showPanel() ? layout.panelHeight() : 0\">\n            @if (navigationService.activeComponent()) {\n                @if (panelService.activeViewId() === 'renderer') {\n                    <prism-component-head>\n                        @if (viewPanels().length > 0) {\n                            <prism-view-tab-bar headEnd />\n                        }\n                    </prism-component-head>\n                    @if (layout.toolbarVisible()) {\n                        <prism-variant-ribbon />\n                    }\n                    <div class=\"prism-canvas-wrap\">\n                        <prism-canvas-toolbar />\n                        <prism-renderer />\n                        <prism-template-popover />\n                        <prism-canvas-pin-row />\n                    </div>\n                } @else {\n                    <prism-component-head>\n                        <prism-view-tab-bar headEnd />\n                    </prism-component-head>\n                    <prism-view-panel-host class=\"prism-main__canvas\" />\n                }\n                @if (showPanel()) {\n                    <div\n                        class=\"prism-resizer-row\"\n                        prismResizer\n                        axis=\"y\"\n                        [min]=\"200\"\n                        [max]=\"560\"\n                        [value]=\"layout.panelHeight()\"\n                        (valueChange)=\"layout.setPanelHeight($event)\"></div>\n                    <div class=\"prism-main__panel\">\n                        <prism-panel-host />\n                    </div>\n                }\n            } @else if (navigationService.activePage()) {\n                <prism-page-renderer class=\"prism-main__canvas\" />\n            } @else {\n                <div class=\"prism-shell__empty\">\n                    <svg\n                        class=\"prism-shell__empty-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\">\n                        <path d=\"M12 2L4 14h16L12 2z\" />\n                        <path d=\"M4 14l4 8h8l4-8\" />\n                    </svg>\n                    <p class=\"prism-shell__empty-text\">Select a component</p>\n                    <p class=\"prism-shell__empty-hint\"> from the sidebar to preview it here </p>\n                </div>\n            }\n        </main>\n    </div>\n</div>\n", styles: [":host {\n    display: block;\n    height: 100%;\n}\n\n.prism-shell {\n    display: grid;\n    grid-template-rows: var(--band-header) 1fr;\n\n    /* Declared for its minimum, not for its size. An implicit grid track is\n     auto, and an auto track's minimum is the min-content width of what sits\n     in it -- here the whole body, sidebar and resizer and main together. The\n     track therefore grows to whatever the widest panel demands and the\n     overflow: hidden below clips the remainder, instead of the viewport ever\n     getting a chance to reflow. Measured at a 500px viewport the track stood\n     at 763px and held the canvas at 415px however far the window was dragged\n     in, so responsive behaviour inside a showcased component was impossible\n     to reach.\n     The rows stay bare because min-height: 0 is already spelled out on every\n     level below them. The inline axis had no such counterpart anywhere, and\n     the levels below zero their own minimum through overflow: hidden, which\n     is why this one track is the only place that needs saying. */\n    grid-template-columns: minmax(0, 1fr);\n    height: 100vh;\n    overflow: hidden;\n    font-family: var(--font-sans, var(--prism-font-sans));\n    color: var(--prism-text);\n    background: var(--prism-void);\n}\n\n.prism-body {\n    display: grid;\n    grid-template-columns: var(--sw, 264px) 4px 1fr;\n    min-height: 0;\n}\n\n.prism-body--no-sidebar {\n    grid-template-columns: 1fr;\n}\n\n.prism-sidebar-wrap {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-bg);\n    border-right: 1px solid var(--prism-border);\n}\n\n.prism-sidebar-wrap prism-sidebar {\n    flex: 1;\n    min-height: 0;\n}\n\n.prism-sidebar-foot {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 10px 14px;\n    font-size: 11px;\n    color: var(--prism-text-ghost);\n    border-top: 1px solid var(--prism-border);\n}\n\n.prism-sidebar-foot__logo {\n    flex-shrink: 0;\n    width: 16px;\n}\n\n.prism-sidebar-foot__link {\n    color: var(--prism-text-ghost);\n    text-decoration: none;\n    transition: color var(--dur-fast);\n}\n\n.prism-sidebar-foot__link:hover {\n    color: var(--prism-text-2);\n}\n\n.prism-resizer-col {\n    position: relative;\n    z-index: 5;\n    width: 4px;\n    background: transparent;\n    transition: background var(--dur-fast) var(--ease-default);\n}\n\n.prism-resizer-col:hover,\n.prism-resizer-col.active {\n    background: var(--prism-primary);\n}\n\n.prism-main {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-void);\n}\n\n.prism-resizer-row {\n    position: relative;\n    z-index: 5;\n    flex-shrink: 0;\n    height: 4px;\n    background: transparent;\n    transition: background var(--dur-fast) var(--ease-default);\n}\n\n.prism-resizer-row:hover,\n.prism-resizer-row.active {\n    background: var(--prism-primary);\n}\n\n/* One row, not two: the canvas tools no longer occupy a band above the\n   stage, they float over it from a rail absolutely positioned against\n   this element. The position: relative below is what anchors it. */\n.prism-canvas-wrap {\n    position: relative;\n    display: grid;\n    flex: 1;\n    grid-template-rows: minmax(0, 1fr);\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-bg-surface);\n}\n\n.prism-main__canvas {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n}\n\n.prism-main__panel {\n    flex-shrink: 0;\n    height: var(--ph, 260px);\n    min-height: 0;\n    overflow: hidden;\n}\n\n.prism-shell__empty {\n    display: flex;\n    flex-direction: column;\n    grid-row: 1 / -1;\n    gap: 8px;\n    align-items: center;\n    justify-content: center;\n}\n\n.prism-shell__empty-icon {\n    width: 48px;\n    height: 48px;\n    margin-bottom: 8px;\n    color: var(--prism-text-ghost);\n}\n\n.prism-shell__empty-text {\n    margin: 0;\n    font-size: var(--fs-xl);\n    font-weight: 500;\n    color: var(--prism-text-muted);\n}\n\n.prism-shell__empty-hint {\n    margin: 0;\n    font-size: var(--fs-lg);\n    color: var(--prism-text-ghost);\n}\n"] }]
     }], () => [], { onKeyDown: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismShellComponent, { className: "PrismShellComponent", filePath: "app/shell/prism-shell.component.ts", lineNumber: 290 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismShellComponent, { className: "PrismShellComponent", filePath: "app/shell/prism-shell.component.ts", lineNumber: 47 }); })();

package/dist/app/sidebar/navigation-decorations.d.ts

@@ -5,7 +5,7 @@ import type { NavigationItem } from '../services/navigation-item.types.js';
 export interface ItemMark {
     /**
      * The definition's id. `resolveNavigationDecorations` guarantees these are
-     * unique, so this is the only field safe to `@for track` by — `icon` is a
+     * unique, so this is the only field safe to `@for track` by. `icon` is a
      * free-form string on a public extension point and two sources can pick the
      * same one.
      */
@@ -15,7 +15,7 @@ export interface ItemMark {
     label: string;
 }
 export interface ItemDecorations {
-    /** Ordered marks — never empty; `decorateItem` returns null instead. */
+    /** Ordered marks, never empty (`decorateItem` returns null instead). */
     marks: ItemMark[];
     /** Worst variant across `marks`. Drives the group roll-up. */
     worst: 'warn' | 'danger';
@@ -33,7 +33,7 @@ export interface CategoryRollup {
  * by `order`.
  *
  * Built-ins win a collision: a plugin must not be able to silence or restyle a
- * core source by claiming its id. Sorting is by `order` alone — the reading
+ * core source by claiming its id. Sorting is by `order` alone because the reading
  * contract says position names the source, so registration order must not leak
  * into the result.
  */
@@ -53,7 +53,7 @@ export declare function decorateItem(item: NavigationItem, defs: readonly Naviga
  * the work.
  *
  * Takes each item's already-resolved `ItemDecorations` rather than the raw
- * items — callers already run `decorateItem` once per item to render its
+ * items. Callers already run `decorateItem` once per item to render its
  * marks, and recomputing it here would both waste the work and let the
  * roll-up drift from what actually renders.
  */

package/dist/app/sidebar/navigation-decorations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-decorations.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/navigation-decorations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE3E,qEAAqE;AACrE,MAAM,WAAW,QAAQ;IACvB;;;;;OAKG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;CACnC;AAID;;;;;;;;GAQG;AACH,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,SAAS,8BAA8B,EAAE,EAClD,WAAW,EAAE,SAAS,8BAA8B,EAAE,GACrD,8BAA8B,EAAE,CAWlC;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,SAAS,8BAA8B,EAAE,GAC9C,eAAe,GAAG,IAAI,CAuBxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,GAC/C,cAAc,CAahB;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,GAAG,MAAM,CAEzE"}
+{"version":3,"file":"navigation-decorations.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/navigation-decorations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE3E,qEAAqE;AACrE,MAAM,WAAW,QAAQ;IACrB;;;;;OAKG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC5B,wEAAwE;IACxE,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC3B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;CACrC;AAID;;;;;;;;GAQG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,EAAE,SAAS,8BAA8B,EAAE,EAClD,WAAW,EAAE,SAAS,8BAA8B,EAAE,GACvD,8BAA8B,EAAE,CAWlC;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,8BAA8B,EAAE,GAAG,eAAe,GAAG,IAAI,CA0B1H;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,GAAG,cAAc,CAa/F;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,GAAG,MAAM,CAEzE"}

package/dist/app/sidebar/navigation-decorations.js

@@ -4,7 +4,7 @@ const SEVERITY = { warn: 1, danger: 2 };
  * by `order`.
  *
  * Built-ins win a collision: a plugin must not be able to silence or restyle a
- * core source by claiming its id. Sorting is by `order` alone — the reading
+ * core source by claiming its id. Sorting is by `order` alone because the reading
  * contract says position names the source, so registration order must not leak
  * into the result.
  */
@@ -37,7 +37,7 @@ export function decorateItem(item, defs) {
             id: def.id,
             icon: def.icon,
             variant: badge.variant,
-            label: badge.label,
+            label: badge.label
         });
     }
     if (marks.length === 0)
@@ -57,7 +57,7 @@ export function decorateItem(item, defs) {
  * the work.
  *
  * Takes each item's already-resolved `ItemDecorations` rather than the raw
- * items — callers already run `decorateItem` once per item to render its
+ * items. Callers already run `decorateItem` once per item to render its
  * marks, and recomputing it here would both waste the work and let the
  * roll-up drift from what actually renders.
  */

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

@@ -1,7 +1,7 @@
+import type { ComponentStatus } from '../../decorator/showcase.types.js';
 import type { NavigationItem } from '../services/navigation-item.types.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismSearchService } from '../services/prism-search.service.js';
-import type { ComponentStatus } from '../../decorator/showcase.types.js';
 import { type CategoryRollup, type ItemDecorations } from './navigation-decorations.js';
 import * as i0 from "@angular/core";
 interface SidebarCategory {
@@ -41,12 +41,12 @@ export declare class PrismSidebarComponent {
     protected itemStatus(item: NavigationItem): ComponentStatus | undefined;
     /**
      * Accessible name for the roll-up pill, for the deviating case only. The
-     * pill otherwise renders a bare number distinguished only by colour — a
+     * pill otherwise renders a bare number distinguished only by colour. A
      * screen reader would read the group head as "Feedback 3 12" with nothing
      * naming what either number means, and a colour-blind reader can't tell
      * them apart at all.
      *
-     * There is deliberately no zero branch: a clean category renders its plain
+     * There is no zero branch: a clean category renders its plain
      * item count and the template leaves both attributes off, because
      * `aria-label` on a descendant feeds the group button's name-from-content
      * and "Buttons 0 components need review" is a claim about a group that has

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

@@ -1 +1 @@
-{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAEjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,6BAA6B,CAAC;;AAcrC,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;CACrC;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;CACxB;AAED,qBAkVa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAC6B;IAEzD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAK1B;IAGF,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAa7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAa9B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;;;SAmBjC;IAEH,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAU3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS;IAMvE;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM;IAKvD,SAAS,CAAC,WAAW,CACnB,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,eAAe,GAAG,IAAI,GAClC,MAAM,GAAG,IAAI;IAShB,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAWjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;yCAhKV,qBAAqB;2CAArB,qBAAqB;CAqKjC"}
+{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAEjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,KAAK,cAAc,EAAgB,KAAK,eAAe,EAA+D,MAAM,6BAA6B,CAAC;;AAcnK,UAAU,eAAe;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,UAAU,WAAW;IACjB,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;CACvC;AAED,UAAU,iBAAiB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;CAC1B;AAED,qBAQa,qBAAqB;IAC9B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA0D;IAEtF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA4H;IAGxJ,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAS7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAe9B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;;;SAqBjC;IAEH,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAI/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAIjD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS;IAIvE;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM;IAMvD,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI;IAU/F,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAUjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,aAAa;yCApJZ,qBAAqB;2CAArB,qBAAqB;CA4JjC"}