@ng-prism/core 22.5.0 → 22.7.0-beta.0

package/README.md

@@ -13,6 +13,8 @@
 - **Zero-config discovery**: TypeScript Compiler API scans your library at build time
 - **Signal-native**: works with `input()` / `output()` signals
 - **Directive support**: showcase directives with configurable host elements
+- **Compositions**: show a component with the parts it works with, such as a form field with its input, as a compiled Angular template with `template`, `host: { template }` and `imports`
+- **Services and pipes**: `@Showcase` on a service or pipe gives it an API page, no canvas needed
 - **Plugin architecture**: JSDoc, A11y, Figma, Performance, Box Model, Coverage
 - **Live Controls**: auto-generated input controls with type-aware editors
 - **Code Snippets**: live-updating Angular template snippets per variant
@@ -72,6 +74,8 @@ ng run my-lib:prism
 
 Open `http://localhost:4400`. Your component appears in the sidebar with live controls, code snippets, and variant tabs.
 
+Using Claude Code? The [ng-prism plugin](https://ng-prism.github.io/ng-prism/#/guide/ai-agents) teaches it to write showcases, check them in the browser and set up ng-prism.
+
 ## Configuration
 
 ```typescript
@@ -93,7 +97,7 @@ export default defineConfig({
 
 ## Directives
 
-Directives need a host element. Use `host` to wrap them:
+A directive renders on the element its selector names. To put it on another element or component, or inside other markup, such as an input in its form field, configure `host`:
 
 ```typescript
 @Showcase({
@@ -133,14 +137,14 @@ Link to a `@Showcase`-decorated component for combined API docs + custom renderi
 
 ## Official Plugins
 
-| Plugin    | Package                              | Description                                                   |
-| --------- | ------------------------------------ | ------------------------------------------------------------- |
-| JSDoc     | `@ng-prism/plugin-jsdoc`             | API documentation from JSDoc comments                         |
-| Figma     | `@ng-prism/plugin-figma`             | Figma design embed + visual diff                              |
-| Box Model | `@ng-prism/plugin-box-model`         | CSS box model inspector                                       |
-| Perf      | `@ng-prism/plugin-perf`              | Render performance profiling                                  |
-| Coverage  | `@ng-prism/plugin-coverage`          | Per-component test coverage from Istanbul/v8                  |
-| VRT       | `@ng-prism/plugin-visual-regression` | Per-variant visual regression report from a screenshot runner |
+| Plugin    | Package                              | Description                                                                 |
+| --------- | ------------------------------------ | --------------------------------------------------------------------------- |
+| JSDoc     | `@ng-prism/plugin-jsdoc`             | API pages for components, directives, services and pipes, with linked types |
+| Figma     | `@ng-prism/plugin-figma`             | Figma design embed + visual diff                                            |
+| Box Model | `@ng-prism/plugin-box-model`         | CSS box model inspector                                                     |
+| Perf      | `@ng-prism/plugin-perf`              | Render performance profiling                                                |
+| Coverage  | `@ng-prism/plugin-coverage`          | Per-component test coverage from Istanbul/v8                                |
+| VRT       | `@ng-prism/plugin-visual-regression` | Per-variant visual regression report from a screenshot runner               |
 
 > **Note:** Accessibility auditing (axe-core) is built into ng-prism core, so no plugin is needed.
 

package/dist/app/canvas/canvas-bg.styles.d.ts

@@ -10,5 +10,5 @@
  * `dark` override it. Capture mode is unaffected: `CAPTURE_STYLES` is a global
  * stylesheet using `!important`.
  */
-export declare const CANVAS_BG_STYLES = "\n  [data-bg=\"dots\"] {\n    background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"] {\n    background-image: none;\n  }\n\n  /* Flat, not dotted. \"light\" and \"dark\" name the surface a component was\n     designed against, and their colour is absolute rather than a theme token,\n     which makes them the values to declare for a screenshot baseline. Use\n     \"dots\" for the grid. */\n  /* These two also re-point --prism-measure. Other overlays use theme colours\n     on theme surfaces, but these grounds ignore the theme: \"light\" stays\n     near-white in the dark theme and \"dark\" stays near-black in the light one.\n     The dark theme's magenta reaches only 2.85:1 on the light ground, under the\n     4.5:1 its 9px readout needs, so the measurement colour has to follow the\n     ground, not the theme.\n\n     --prism-measure-plate follows it for the same reason. It is the surface\n     the measuring tool's value label paints itself on, so the label reads as a\n     gap in the measurement line rather than a badge on top of it. At its\n     --prism-stage fallback it would be the theme's stage under a re-pointed\n     foreground: the light theme's magenta on the dark theme's stage reads\n     3.71:1, the dark theme's on white 3.08:1. Pinned to the ground the same way,\n     the pairs reach 4.54:1 and 6.57:1. A color-mix against the ground would\n     work too, but this file already states both grounds literally, and one\n     mechanism per decision is enough.\n\n     Literal values because this file is theme-independent, like the two\n     grounds below. Keep them in step with --prism-measure in\n     prism-default-theme.ts; semantic-colours.spec.ts fails if they drift. */\n  [data-bg=\"light\"] {\n    background-color: var(--prism-void-light, #f7f5fc);\n    background-image: none;\n    --prism-measure: #ca00c1;\n    --prism-measure-plate: var(--prism-void-light, #f7f5fc);\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n    --prism-measure: #f632ff;\n    --prism-measure-plate: var(--prism-void-dark, #07050f);\n  }\n\n  /* \"transparent\" shares the checkerboard. In the app the checkerboard is\n     already the UI's sign for \"no surface\", and a see-through stage would only\n     show the shell behind it. Only CAPTURE_STYLES tells the two apart. */\n  [data-bg=\"checker\"],\n  [data-bg=\"transparent\"] {\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";
+export declare const CANVAS_BG_STYLES = "\n  [data-bg=\"dots\"] {\n    background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"] {\n    background-image: none;\n  }\n\n  /* Flat, not dotted. \"light\" and \"dark\" name the surface a component was\n     designed against, and their colour is absolute rather than a theme token,\n     which makes them the values to declare for a screenshot baseline. Use\n     \"dots\" for the grid. */\n  /* These two also re-point --prism-measure. Other overlays use theme colours\n     on theme surfaces, but these grounds ignore the theme: \"light\" stays\n     near-white in the dark theme and \"dark\" stays near-black in the light one.\n     The dark theme's magenta reaches only 2.85:1 on the light ground, under the\n     4.5:1 its 9px readout needs, so the measurement colour has to follow the\n     ground, not the theme.\n\n     --prism-measure-plate follows it for the same reason. It is the surface\n     the measuring tool's value label paints itself on, so the label reads as a\n     gap in the measurement line rather than a badge on top of it. At its\n     --prism-stage fallback it would be the theme's stage under a re-pointed\n     foreground: the light theme's magenta on the dark theme's stage reads\n     3.71:1, the dark theme's on white 3.08:1. Pinned to the ground the same way,\n     the pairs reach 4.54:1 and 6.57:1. A color-mix against the ground would\n     work too, but this file already states both grounds literally, and one\n     mechanism per decision is enough.\n\n     Literal values because this file is theme-independent, like the two\n     grounds below. Keep them in step with --prism-measure in canvas-overlay-tokens.ts and\n     prism-default-theme.ts; semantic-colours.spec.ts fails if they drift. */\n  [data-bg=\"light\"] {\n    background-color: var(--prism-void-light, #f7f5fc);\n    background-image: none;\n    --prism-measure: #ca00c1;\n    --prism-measure-plate: var(--prism-void-light, #f7f5fc);\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n    --prism-measure: #f632ff;\n    --prism-measure-plate: var(--prism-void-dark, #07050f);\n  }\n\n  /* \"transparent\" shares the checkerboard. In the app the checkerboard is\n     already the UI's sign for \"no surface\", and a see-through stage would only\n     show the shell behind it. Only CAPTURE_STYLES tells the two apart. */\n  [data-bg=\"checker\"],\n  [data-bg=\"transparent\"] {\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";
 //# sourceMappingURL=canvas-bg.styles.d.ts.map

package/dist/app/canvas/canvas-bg.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-bg.styles.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/canvas-bg.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,62FA4D5B,CAAC"}
+{"version":3,"file":"canvas-bg.styles.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/canvas-bg.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,04FA4D5B,CAAC"}

package/dist/app/canvas/canvas-bg.styles.js

@@ -42,7 +42,7 @@ export const CANVAS_BG_STYLES = `
      mechanism per decision is enough.
 
      Literal values because this file is theme-independent, like the two
-     grounds below. Keep them in step with --prism-measure in
+     grounds below. Keep them in step with --prism-measure in canvas-overlay-tokens.ts and
      prism-default-theme.ts; semantic-colours.spec.ts fails if they drift. */
   [data-bg="light"] {
     background-color: var(--prism-void-light, #f7f5fc);

package/dist/app/canvas/canvas-overlay-tokens.d.ts

@@ -0,0 +1,12 @@
+import type { CanvasBg } from '../../shared/canvas-bg.type.js';
+/**
+ * The overlay tokens for a ground, bound on `.prism-canvas-wrap`. The four
+ * theme-following grounds get none: there the defaults in the stylesheet,
+ * which point at the theme, apply.
+ */
+export declare function canvasOverlayTokens(bg: CanvasBg): Record<string, string>;
+/** The zoom readout's tooltip, which also carries the viewport width the rail no longer prints. */
+export declare function zoomTitle(zoom: number, viewportWidth: number | null): string;
+/** A rail toggle's tooltip: the tool and whether it is on. */
+export declare function railToggleTitle(label: string, on: boolean): string;
+//# sourceMappingURL=canvas-overlay-tokens.d.ts.map

package/dist/app/canvas/canvas-overlay-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-overlay-tokens.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/canvas-overlay-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAoC/D;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAIxE;AAED,mGAAmG;AACnG,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAE5E;AAED,8DAA8D;AAC9D,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,MAAM,CAElE"}

package/dist/app/canvas/canvas-overlay-tokens.js

@@ -0,0 +1,52 @@
+/**
+ * Overlay colours for the two absolute canvas grounds.
+ *
+ * `light` and `dark` paint the same colour whatever the app theme is, so the
+ * tool rail, the background pill and the pin row on top of them have to follow
+ * the ground, not the theme: a dark rail on a light canvas under the dark theme
+ * is the case this exists for. The values are the theme surfaces of the matching
+ * theme, held to 4.5:1 for text and 3:1 for contours by the spec next to this.
+ * The measurement colours repeat the ground's from `CANVAS_BG_STYLES`.
+ */
+const ON_LIGHT = {
+    '--prism-canvas-overlay-bg': '#ffffff',
+    '--prism-canvas-overlay-fg': '#0f172a',
+    '--prism-canvas-overlay-muted': '#334155',
+    '--prism-canvas-overlay-border': '#7b8aa0',
+    '--prism-canvas-overlay-primary': '#1d4ed8',
+    '--prism-canvas-overlay-active': 'color-mix(in srgb, #2563eb 10%, transparent)',
+    // The pin row sits on the plate outside the stage, so it needs the ground's
+    // measurement colour too. Same literals as CANVAS_BG_STYLES.
+    '--prism-measure': '#ca00c1',
+    '--prism-measure-plate': 'var(--prism-void-light, #f7f5fc)'
+};
+const ON_DARK = {
+    '--prism-canvas-overlay-bg': '#1a2335',
+    '--prism-canvas-overlay-fg': '#f1f5f9',
+    '--prism-canvas-overlay-muted': '#cbd5e1',
+    '--prism-canvas-overlay-border': '#64748b',
+    '--prism-canvas-overlay-primary': '#60a5fa',
+    '--prism-canvas-overlay-active': 'color-mix(in srgb, #60a5fa 16%, transparent)',
+    '--prism-measure': '#f632ff',
+    '--prism-measure-plate': 'var(--prism-void-dark, #07050f)'
+};
+/**
+ * The overlay tokens for a ground, bound on `.prism-canvas-wrap`. The four
+ * theme-following grounds get none: there the defaults in the stylesheet,
+ * which point at the theme, apply.
+ */
+export function canvasOverlayTokens(bg) {
+    if (bg === 'light')
+        return ON_LIGHT;
+    if (bg === 'dark')
+        return ON_DARK;
+    return {};
+}
+/** The zoom readout's tooltip, which also carries the viewport width the rail no longer prints. */
+export function zoomTitle(zoom, viewportWidth) {
+    return `Zoom ${Math.round(zoom * 100)}% · Width ${viewportWidth === null ? 'auto' : `${viewportWidth}px`}`;
+}
+/** A rail toggle's tooltip: the tool and whether it is on. */
+export function railToggleTitle(label, on) {
+    return `${label}: ${on ? 'on' : 'off'}`;
+}

package/dist/app/canvas/prism-canvas-bg-pill.component.js

@@ -27,10 +27,10 @@ export class PrismCanvasBgPillComponent {
             i0.ɵɵconditionalCreate(0, PrismCanvasBgPillComponent_Conditional_0_Template, 5, 1, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.visible() ? 0 : -1);
-        } }, styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n    position: absolute;\n    top: var(--%NS%prism-canvas-overlay-top, 12px);\n    left: var(--%NS%prism-canvas-overlay-inline, 20px);\n    z-index: 2;\n    pointer-events: none;\n    transition:\n        top var(--%NS%dur-base),\n        left var(--%NS%dur-base);\n}\n\n.prism-bg-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n    padding: 4px 4px 4px 10px;\n    font-family: var(--%NS%font-sans);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    pointer-events: auto;\n    background: color-mix(in srgb, var(--%NS%prism-bg-elevated) 90%, transparent);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 999px;\n    backdrop-filter: blur(8px);\n    animation: _ngcontent-%COMP%_fade-in var(--%NS%dur-base) ease-out;\n}\n\n.label[_ngcontent-%COMP%] {\n    letter-spacing: 0.02em;\n}\n\n.reset[_ngcontent-%COMP%] {\n    height: 22px;\n    padding: 0 10px;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: 500;\n    color: var(--%NS%prism-text);\n    cursor: pointer;\n    background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n    border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n    border-radius: 999px;\n    transition: background var(--%NS%dur-fast);\n}\n\n.reset[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n}\n\n@keyframes _ngcontent-%COMP%_fade-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}"] });
+        } }, styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n    position: absolute;\n    top: var(--%NS%prism-canvas-overlay-top, 12px);\n    left: var(--%NS%prism-canvas-overlay-inline, 20px);\n    z-index: 2;\n    pointer-events: none;\n    transition:\n        top var(--%NS%dur-base),\n        left var(--%NS%dur-base);\n}\n\n.prism-bg-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n    padding: 4px 4px 4px 10px;\n    font-family: var(--%NS%font-sans);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-canvas-overlay-muted);\n    pointer-events: auto;\n    background: color-mix(in srgb, var(--%NS%prism-canvas-overlay-bg) 92%, transparent);\n    border: 1px solid var(--%NS%prism-canvas-overlay-border);\n    border-radius: 999px;\n    backdrop-filter: blur(8px);\n    animation: _ngcontent-%COMP%_fade-in var(--%NS%dur-base) ease-out;\n}\n\n.label[_ngcontent-%COMP%] {\n    letter-spacing: 0.02em;\n}\n\n.reset[_ngcontent-%COMP%] {\n    height: 22px;\n    padding: 0 10px;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: 500;\n    color: var(--%NS%prism-canvas-overlay-fg);\n    cursor: pointer;\n    background: var(--%NS%prism-canvas-overlay-active);\n    border: 1px solid color-mix(in srgb, var(--%NS%prism-canvas-overlay-primary) 45%, transparent);\n    border-radius: 999px;\n    transition: background var(--%NS%dur-fast);\n}\n\n.reset[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--%NS%prism-canvas-overlay-primary) 22%, transparent);\n}\n\n@keyframes _ngcontent-%COMP%_fade-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasBgPillComponent, [{
         type: Component,
-        args: [{ selector: 'prism-canvas-bg-pill', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\n    <div class=\"prism-bg-pill\">\n        <span class=\"label\">Recommended: {{ recommended() }}</span>\n        <button\n            type=\"button\"\n            class=\"reset\"\n            title=\"Reset to recommended background\"\n            aria-label=\"Reset to recommended background\"\n            (click)=\"reset()\">\n            Reset\n        </button>\n    </div>\n}\n", styles: ["/* Top left, opposite the tool rail. Both used to claim the right corner and\n   the rail won, hiding a notice whose whole job is to be noticed. The rail\n   is permanent and the notice is not, so the permanent thing keeps the\n   corner it sits in and this moves. Nothing else occupies the left corner:\n   the zoom badge that used to live here was a duplicate of the readout the\n   rail carries. */\n:host {\n    position: absolute;\n    top: var(--prism-canvas-overlay-top, 12px);\n    left: var(--prism-canvas-overlay-inline, 20px);\n    z-index: 2;\n    pointer-events: none;\n    transition:\n        top var(--dur-base),\n        left var(--dur-base);\n}\n\n.prism-bg-pill {\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n    padding: 4px 4px 4px 10px;\n    font-family: var(--font-sans);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    pointer-events: auto;\n    background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n    border: 1px solid var(--prism-border);\n    border-radius: 999px;\n    backdrop-filter: blur(8px);\n    animation: fade-in var(--dur-base) ease-out;\n}\n\n.label {\n    letter-spacing: 0.02em;\n}\n\n.reset {\n    height: 22px;\n    padding: 0 10px;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: 500;\n    color: var(--prism-text);\n    cursor: pointer;\n    background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n    border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n    border-radius: 999px;\n    transition: background var(--dur-fast);\n}\n\n.reset:hover {\n    background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n}\n\n@keyframes fade-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n"] }]
+        args: [{ selector: 'prism-canvas-bg-pill', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\n    <div class=\"prism-bg-pill\">\n        <span class=\"label\">Recommended: {{ recommended() }}</span>\n        <button\n            type=\"button\"\n            class=\"reset\"\n            title=\"Reset to recommended background\"\n            aria-label=\"Reset to recommended background\"\n            (click)=\"reset()\">\n            Reset\n        </button>\n    </div>\n}\n", styles: ["/* Top left, opposite the tool rail. Both used to claim the right corner and\n   the rail won, hiding a notice whose whole job is to be noticed. The rail\n   is permanent and the notice is not, so the permanent thing keeps the\n   corner it sits in and this moves. Nothing else occupies the left corner:\n   the zoom badge that used to live here was a duplicate of the readout the\n   rail carries. */\n:host {\n    position: absolute;\n    top: var(--prism-canvas-overlay-top, 12px);\n    left: var(--prism-canvas-overlay-inline, 20px);\n    z-index: 2;\n    pointer-events: none;\n    transition:\n        top var(--dur-base),\n        left var(--dur-base);\n}\n\n.prism-bg-pill {\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n    padding: 4px 4px 4px 10px;\n    font-family: var(--font-sans);\n    font-size: var(--fs-xs);\n    color: var(--prism-canvas-overlay-muted);\n    pointer-events: auto;\n    background: color-mix(in srgb, var(--prism-canvas-overlay-bg) 92%, transparent);\n    border: 1px solid var(--prism-canvas-overlay-border);\n    border-radius: 999px;\n    backdrop-filter: blur(8px);\n    animation: fade-in var(--dur-base) ease-out;\n}\n\n.label {\n    letter-spacing: 0.02em;\n}\n\n.reset {\n    height: 22px;\n    padding: 0 10px;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: 500;\n    color: var(--prism-canvas-overlay-fg);\n    cursor: pointer;\n    background: var(--prism-canvas-overlay-active);\n    border: 1px solid color-mix(in srgb, var(--prism-canvas-overlay-primary) 45%, transparent);\n    border-radius: 999px;\n    transition: background var(--dur-fast);\n}\n\n.reset:hover {\n    background: color-mix(in srgb, var(--prism-canvas-overlay-primary) 22%, transparent);\n}\n\n@keyframes fade-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasBgPillComponent, { className: "PrismCanvasBgPillComponent", filePath: "app/canvas/prism-canvas-bg-pill.component.ts", lineNumber: 11 }); })();

package/dist/app/canvas/prism-canvas-pin-row.component.js

@@ -55,10 +55,10 @@ export class PrismCanvasPinRowComponent {
             i0.ɵɵconditionalCreate(0, PrismCanvasPinRowComponent_Conditional_0_Template, 3, 0, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.chips().length > 0 ? 0 : -1);
-        } }, dependencies: [PrismIconComponent], styles: [".pin-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: var(--%NS%sp-2);\n    align-items: center;\n    padding: var(--%NS%sp-2) var(--%NS%sp-3);\n    overflow-x: auto;\n    background: var(--%NS%prism-bg-surface);\n    border-top: 1px solid var(--%NS%prism-border);\n}\n\n.pin-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: var(--%NS%sp-1);\n    align-items: center;\n    padding: var(--%NS%sp-1) 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-measure);\n    white-space: nowrap;\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.pin-chip__x[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    padding: 0;\n    color: inherit;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    opacity: 0.6;\n}\n\n.pin-chip__x[_ngcontent-%COMP%]:hover, \n.pin-chip__x[_ngcontent-%COMP%]:focus-visible {\n    opacity: 1;\n}"] });
+        } }, dependencies: [PrismIconComponent], styles: [".pin-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: var(--%NS%sp-2);\n    align-items: center;\n    padding: var(--%NS%sp-2) var(--%NS%sp-3);\n    overflow-x: auto;\n    background: var(--%NS%prism-canvas-overlay-bg);\n    border-top: 1px solid var(--%NS%prism-border);\n}\n\n.pin-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: var(--%NS%sp-1);\n    align-items: center;\n    padding: var(--%NS%sp-1) 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-measure);\n    white-space: nowrap;\n    border: 1px solid var(--%NS%prism-canvas-overlay-border);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.pin-chip__x[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    padding: 0;\n    color: inherit;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    opacity: 0.6;\n}\n\n.pin-chip__x[_ngcontent-%COMP%]:hover, \n.pin-chip__x[_ngcontent-%COMP%]:focus-visible {\n    opacity: 1;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasPinRowComponent, [{
         type: Component,
-        args: [{ selector: 'prism-canvas-pin-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "@if (chips().length > 0) {\n    <div\n        class=\"pin-row\"\n        role=\"group\"\n        aria-label=\"Pinned measurements\">\n        @for (chip of chips(); track $index) {\n            <span class=\"pin-chip\">\n                {{ chip }}\n                <button\n                    type=\"button\"\n                    class=\"pin-chip__x\"\n                    (click)=\"remove($index)\"\n                    [attr.aria-label]=\"'Remove measurement ' + chip\">\n                    <prism-icon\n                        name=\"x\"\n                        [size]=\"10\" />\n                </button>\n            </span>\n        }\n    </div>\n}\n", styles: [".pin-row {\n    display: flex;\n    gap: var(--sp-2);\n    align-items: center;\n    padding: var(--sp-2) var(--sp-3);\n    overflow-x: auto;\n    background: var(--prism-bg-surface);\n    border-top: 1px solid var(--prism-border);\n}\n\n.pin-chip {\n    display: inline-flex;\n    gap: var(--sp-1);\n    align-items: center;\n    padding: var(--sp-1) 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-measure);\n    white-space: nowrap;\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-xs);\n}\n\n.pin-chip__x {\n    display: grid;\n    place-items: center;\n    padding: 0;\n    color: inherit;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    opacity: 0.6;\n}\n\n.pin-chip__x:hover,\n.pin-chip__x:focus-visible {\n    opacity: 1;\n}\n"] }]
+        args: [{ selector: 'prism-canvas-pin-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "@if (chips().length > 0) {\n    <div\n        class=\"pin-row\"\n        role=\"group\"\n        aria-label=\"Pinned measurements\">\n        @for (chip of chips(); track $index) {\n            <span class=\"pin-chip\">\n                {{ chip }}\n                <button\n                    type=\"button\"\n                    class=\"pin-chip__x\"\n                    (click)=\"remove($index)\"\n                    [attr.aria-label]=\"'Remove measurement ' + chip\">\n                    <prism-icon\n                        name=\"x\"\n                        [size]=\"10\" />\n                </button>\n            </span>\n        }\n    </div>\n}\n", styles: [".pin-row {\n    display: flex;\n    gap: var(--sp-2);\n    align-items: center;\n    padding: var(--sp-2) var(--sp-3);\n    overflow-x: auto;\n    background: var(--prism-canvas-overlay-bg);\n    border-top: 1px solid var(--prism-border);\n}\n\n.pin-chip {\n    display: inline-flex;\n    gap: var(--sp-1);\n    align-items: center;\n    padding: var(--sp-1) 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-measure);\n    white-space: nowrap;\n    border: 1px solid var(--prism-canvas-overlay-border);\n    border-radius: var(--radius-xs);\n}\n\n.pin-chip__x {\n    display: grid;\n    place-items: center;\n    padding: 0;\n    color: inherit;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    opacity: 0.6;\n}\n\n.pin-chip__x:hover,\n.pin-chip__x:focus-visible {\n    opacity: 1;\n}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasPinRowComponent, { className: "PrismCanvasPinRowComponent", filePath: "app/canvas/prism-canvas-pin-row.component.ts", lineNumber: 28 }); })();

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

@@ -4,6 +4,8 @@ export declare class PrismCanvasRulersComponent {
     protected readonly rulerSize = "20px";
     protected readonly canvas: PrismCanvasService;
     private readonly themeService;
+    private readonly variantBg;
+    private readonly host;
     private readonly rulerTop;
     private readonly rulerLeft;
     private ro;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas-rulers.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-rulers.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAKzE,qBAWa,0BAA0B;IACnC,SAAS,CAAC,QAAQ,CAAC,SAAS,UAAY;IAExC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAE1D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAwD;IACjF,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyD;IAEnF,OAAO,CAAC,EAAE,CAA+B;;IAsBzC,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,MAAM;IAgEd,OAAO,CAAC,MAAM;yCA7GL,0BAA0B;2CAA1B,0BAA0B;CAgLtC"}
+{"version":3,"file":"prism-canvas-rulers.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-rulers.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAMzE,qBAWa,0BAA0B;IACnC,SAAS,CAAC,QAAQ,CAAC,SAAS,UAAY;IAExC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAC3D,OAAO,CAAC,QAAQ,CAAC,IAAI,CAA+C;IAEpE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAwD;IACjF,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyD;IAEnF,OAAO,CAAC,EAAE,CAA+B;;IAwBzC,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,MAAM;IAgEd,OAAO,CAAC,MAAM;yCAjHL,0BAA0B;2CAA1B,0BAA0B;CAoLtC"}

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

@@ -1,6 +1,7 @@
-import { ChangeDetectionStrategy, Component, effect, inject, viewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, viewChild } from '@angular/core';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
 import { PrismThemeService } from '../services/prism-theme.service.js';
+import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import * as i0 from "@angular/core";
 const _c0 = ["rulerTop"];
 const _c1 = ["rulerLeft"];
@@ -14,6 +15,8 @@ export class PrismCanvasRulersComponent {
     rulerSize = `${R}px`;
     canvas = inject(PrismCanvasService);
     themeService = inject(PrismThemeService);
+    variantBg = inject(PrismVariantBgService);
+    host = inject(ElementRef);
     rulerTop = viewChild('rulerTop', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rulerTop" }] : /* istanbul ignore next */ []));
     rulerLeft = viewChild('rulerLeft', /* @ts-ignore */
@@ -24,6 +27,8 @@ export class PrismCanvasRulersComponent {
             const show = this.canvas.rulers();
             const zoom = this.canvas.zoom();
             this.themeService.theme();
+            // The rulers sit on the canvas, so they follow its ground, not the theme.
+            this.variantBg.effective();
             if (!show) {
                 this.ro?.disconnect();
                 this.ro = null;
@@ -64,10 +69,10 @@ export class PrismCanvasRulersComponent {
         el.style.height = h + 'px';
         const ctx = el.getContext('2d');
         ctx.scale(dpr, dpr);
-        const cs = getComputedStyle(document.documentElement);
-        const bg = cs.getPropertyValue('--prism-bg').trim() || '#0d0b1c';
-        const fg = cs.getPropertyValue('--prism-text-ghost').trim() || '#6a5d87';
-        const border = cs.getPropertyValue('--prism-border').trim() || 'rgba(255,255,255,0.08)';
+        const cs = getComputedStyle(this.host.nativeElement);
+        const bg = cs.getPropertyValue('--prism-canvas-overlay-bg').trim() || '#1a2335';
+        const fg = cs.getPropertyValue('--prism-canvas-overlay-muted').trim() || '#cbd5e1';
+        const border = cs.getPropertyValue('--prism-border').trim() || '#1f2b3e';
         ctx.fillStyle = bg;
         ctx.fillRect(0, 0, w, h);
         ctx.strokeStyle = border;
@@ -113,10 +118,10 @@ export class PrismCanvasRulersComponent {
         el.style.height = h + 'px';
         const ctx = el.getContext('2d');
         ctx.scale(dpr, dpr);
-        const cs = getComputedStyle(document.documentElement);
-        const bg = cs.getPropertyValue('--prism-bg').trim() || '#0d0b1c';
-        const fg = cs.getPropertyValue('--prism-text-ghost').trim() || '#6a5d87';
-        const border = cs.getPropertyValue('--prism-border').trim() || 'rgba(255,255,255,0.08)';
+        const cs = getComputedStyle(this.host.nativeElement);
+        const bg = cs.getPropertyValue('--prism-canvas-overlay-bg').trim() || '#1a2335';
+        const fg = cs.getPropertyValue('--prism-canvas-overlay-muted').trim() || '#cbd5e1';
+        const border = cs.getPropertyValue('--prism-border').trim() || '#1f2b3e';
         ctx.fillStyle = bg;
         ctx.fillRect(0, 0, w, h);
         ctx.strokeStyle = border;
@@ -161,13 +166,13 @@ export class PrismCanvasRulersComponent {
             i0.ɵɵconditionalCreate(0, PrismCanvasRulersComponent_Conditional_0_Template, 6, 0, "div", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.canvas.rulers() ? 0 : -1);
-        } }, styles: ["\n\n\n[_nghost-%COMP%] {\n    display: contents;\n}\n\n.ruler-wrap[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    z-index: 4;\n    overflow: hidden;\n    pointer-events: none;\n}\n\n.ruler[_ngcontent-%COMP%] {\n    position: absolute;\n}\n\n.ruler--top[_ngcontent-%COMP%] {\n    top: 0;\n    right: 0;\n    left: var(--%NS%prism-ruler-size);\n    height: var(--%NS%prism-ruler-size);\n}\n\n.ruler--left[_ngcontent-%COMP%] {\n    top: var(--%NS%prism-ruler-size);\n    bottom: 0;\n    left: 0;\n    width: var(--%NS%prism-ruler-size);\n}\n\n.ruler-corner[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: var(--%NS%prism-ruler-size);\n    height: var(--%NS%prism-ruler-size);\n    background: var(--%NS%prism-bg);\n    border-right: 1px solid var(--%NS%prism-border);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}"] });
+        } }, styles: ["\n\n\n[_nghost-%COMP%] {\n    display: contents;\n}\n\n.ruler-wrap[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    z-index: 4;\n    overflow: hidden;\n    pointer-events: none;\n}\n\n.ruler[_ngcontent-%COMP%] {\n    position: absolute;\n}\n\n.ruler--top[_ngcontent-%COMP%] {\n    top: 0;\n    right: 0;\n    left: var(--%NS%prism-ruler-size);\n    height: var(--%NS%prism-ruler-size);\n}\n\n.ruler--left[_ngcontent-%COMP%] {\n    top: var(--%NS%prism-ruler-size);\n    bottom: 0;\n    left: 0;\n    width: var(--%NS%prism-ruler-size);\n}\n\n.ruler-corner[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: var(--%NS%prism-ruler-size);\n    height: var(--%NS%prism-ruler-size);\n    background: var(--%NS%prism-canvas-overlay-bg);\n    border-right: 1px solid var(--%NS%prism-border);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasRulersComponent, [{
         type: Component,
-        args: [{ selector: 'prism-canvas-rulers', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.--prism-ruler-size]': 'rulerSize' }, template: "@if (canvas.rulers()) {\n    <div class=\"ruler-wrap\">\n        <canvas\n            #rulerTop\n            class=\"ruler ruler--top\"></canvas>\n        <canvas\n            #rulerLeft\n            class=\"ruler ruler--left\"></canvas>\n        <div class=\"ruler-corner\"></div>\n    </div>\n}\n", styles: ["/* --prism-ruler-size is bound from the host rather than declared here. The\n   gutter width is also the canvas size the two rulers are painted at, so R in\n   the component is the one place it may be written down. */\n:host {\n    display: contents;\n}\n\n.ruler-wrap {\n    position: absolute;\n    inset: 0;\n    z-index: 4;\n    overflow: hidden;\n    pointer-events: none;\n}\n\n.ruler {\n    position: absolute;\n}\n\n.ruler--top {\n    top: 0;\n    right: 0;\n    left: var(--prism-ruler-size);\n    height: var(--prism-ruler-size);\n}\n\n.ruler--left {\n    top: var(--prism-ruler-size);\n    bottom: 0;\n    left: 0;\n    width: var(--prism-ruler-size);\n}\n\n.ruler-corner {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: var(--prism-ruler-size);\n    height: var(--prism-ruler-size);\n    background: var(--prism-bg);\n    border-right: 1px solid var(--prism-border);\n    border-bottom: 1px solid var(--prism-border);\n}\n"] }]
+        args: [{ selector: 'prism-canvas-rulers', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.--prism-ruler-size]': 'rulerSize' }, template: "@if (canvas.rulers()) {\n    <div class=\"ruler-wrap\">\n        <canvas\n            #rulerTop\n            class=\"ruler ruler--top\"></canvas>\n        <canvas\n            #rulerLeft\n            class=\"ruler ruler--left\"></canvas>\n        <div class=\"ruler-corner\"></div>\n    </div>\n}\n", styles: ["/* --prism-ruler-size is bound from the host rather than declared here. The\n   gutter width is also the canvas size the two rulers are painted at, so R in\n   the component is the one place it may be written down. */\n:host {\n    display: contents;\n}\n\n.ruler-wrap {\n    position: absolute;\n    inset: 0;\n    z-index: 4;\n    overflow: hidden;\n    pointer-events: none;\n}\n\n.ruler {\n    position: absolute;\n}\n\n.ruler--top {\n    top: 0;\n    right: 0;\n    left: var(--prism-ruler-size);\n    height: var(--prism-ruler-size);\n}\n\n.ruler--left {\n    top: var(--prism-ruler-size);\n    bottom: 0;\n    left: 0;\n    width: var(--prism-ruler-size);\n}\n\n.ruler-corner {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: var(--prism-ruler-size);\n    height: var(--prism-ruler-size);\n    background: var(--prism-canvas-overlay-bg);\n    border-right: 1px solid var(--prism-border);\n    border-bottom: 1px solid var(--prism-border);\n}\n"] }]
     }], () => [], { rulerTop: [{ type: i0.ViewChild, args: ['rulerTop', { isSignal: true }] }], rulerLeft: [{ type: i0.ViewChild, args: ['rulerLeft', { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasRulersComponent, { className: "PrismCanvasRulersComponent", filePath: "app/canvas/prism-canvas-rulers.component.ts", lineNumber: 18 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasRulersComponent, { className: "PrismCanvasRulersComponent", filePath: "app/canvas/prism-canvas-rulers.component.ts", lineNumber: 19 }); })();
 function stepFor(zoom) {
     if (zoom >= 2)
         return 10;

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

@@ -3,6 +3,7 @@ import { type PseudoState } from '../../shared/pseudo-state.type.js';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
 import { PrismPseudoStateService } from '../services/prism-pseudo-state.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
+import { type StateChip } from './state-chips.js';
 import * as i0 from "@angular/core";
 /**
  * The canvas tools, as a rail floating over the canvas.
@@ -10,8 +11,7 @@ import * as i0 from "@angular/core";
  * Things you toggle constantly (guides, rulers, the viewport constraint) get
  * their own button; things you set once (background, forced state, zoom,
  * viewport width) live in the menu. The template is a view rather than a setting and keeps its own
- * button. Zoom and the active viewport width are shown as readouts; the width
- * only appears while the viewport constraint is on.
+ * button. Zoom is shown as a readout, with the viewport width in its tooltip.
  *
  * The host generates no box. The rail must be a direct child of
  * `.prism-canvas-wrap` outside the stage, because that is what capture mode's
@@ -23,15 +23,37 @@ export declare class PrismCanvasToolbarComponent {
     protected readonly canvas: PrismCanvasService;
     protected readonly variantBg: PrismVariantBgService;
     protected readonly pseudoState: PrismPseudoStateService;
+    private readonly navigation;
+    private readonly renderer;
     /**
      * The pseudo states the canvas can force, as toggles. Several can be on at
      * once (`:hover` with `:focus-visible`). The active ones carry `is-on`, the
-     * ones the variant declares the `is-rec` edge, as in the Canvas group.
+     * ones the variant or the active state declares the `is-rec` edge, as in the
+     * Canvas group.
      */
     protected readonly states: readonly PseudoState[];
     protected stateTitle(state: PseudoState): string;
+    /** The variant first. Otherwise the active state, which {@link PrismPseudoStateService.isDeclared} only counts while it fits. */
+    private declaredBy;
+    /** The component's declared states, as chips above the toggles. Empty for a component without any, which then shows no row. */
+    private readonly declaredStates;
+    /** Whether the shown variant has `states: false`. `stateExclusion` says so only while a state is active, the chips need it before. */
+    private readonly variantOptsOut;
+    /**
+     * Whether each declared state fits the rendered component. Measured after
+     * the render because the fit depends on the DOM, which a control or a
+     * variant change rewrites: a state can lose its target to a toggled input.
+     * Equal results keep the old array, so typing into a text control does not
+     * re-render the menu for nothing.
+     */
+    private readonly fits;
+    protected readonly chips: import("@angular/core").Signal<StateChip[]>;
+    constructor();
+    protected pickState(chip: StateChip): void;
     /** Angular templates resolve names against the component, not the global scope. */
     protected readonly Math: Math;
+    protected readonly zoomTitle: import("@angular/core").Signal<string>;
+    protected railTitle(label: string, on: boolean): string;
     protected setBg(bg: CanvasBg): void;
     /**
      * Every {@link CanvasBg}, taken from the type's canonical list.

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

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAGpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAEhF;;;;;;;;;;;;;;GAcG;AACH,qBAQa,2BAA2B;IACpC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,SAAS,CAAC,QAAQ,CAAC,WAAW,0BAAmC;IAEjE;;;;OAIG;IACH,SAAS,CAAC,QAAQ,CAAC,MAAM,yBAAiB;IAE1C,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM;IAIhD,mFAAmF;IACnF,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAE/B,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC;;;;;;;;;;OAUG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,sBAAc;IAEpC;;;;;;;OAOG;IACH,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI;IAY9C,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,CAAC,SAAS,oBAAkB;IAE9C,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCA3E9B,2BAA2B;2CAA3B,2BAA2B;CA8EvC"}
+{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAIpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAEzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AAEpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAGhF,OAAO,EAAgD,KAAK,SAAS,EAAe,MAAM,kBAAkB,CAAC;;AAE7G;;;;;;;;;;;;;GAaG;AACH,qBAQa,2BAA2B;IACpC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,SAAS,CAAC,QAAQ,CAAC,WAAW,0BAAmC;IACjE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkC;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IAEzD;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,CAAC,MAAM,yBAAiB;IAE1C,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM;IAIhD,iIAAiI;IACjI,OAAO,CAAC,UAAU;IAQlB,+HAA+H;IAC/H,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiH;IAEhJ,sIAAsI;IACtI,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IAEF;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAwF;IAE7G,SAAS,CAAC,QAAQ,CAAC,KAAK,8CAAsH;;IAwB9I,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAI1C,mFAAmF;IACnF,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAE/B,SAAS,CAAC,QAAQ,CAAC,SAAS,yCAA8E;IAE1G,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,MAAM;IAIvD,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC;;;;;;;;;;OAUG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,sBAAc;IAEpC;;;;;;;OAOG;IACH,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI;IAY9C,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,CAAC,SAAS,oBAAkB;IAE9C,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCA1I9B,2BAA2B;2CAA3B,2BAA2B;CA6IvC"}