@ng-prism/core 22.2.0 → 22.3.0

package/README.md

@@ -6,7 +6,7 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.5+-3178c6)](https://www.typescriptlang.org)
 [![License](https://img.shields.io/badge/license-MIT-green)](./LICENSE)
 
-**[Live Demo](https://dyingangel666.github.io/ng-prism/demo/)** · **[Documentation](https://dyingangel666.github.io/ng-prism/)**
+**[Live Demo](https://dyingangel666.github.io/ng-prism/demo/?component=ButtonComponent)** · **[Documentation](https://dyingangel666.github.io/ng-prism/)**
 
 ## Features
 
@@ -35,24 +35,24 @@ import { Component, input, output } from '@angular/core';
 import { Showcase } from '@ng-prism/core';
 
 @Showcase({
-  title: 'Button',
-  category: 'Atoms',
-  description: 'Primary action button',
-  variants: [
-    { name: 'Primary', inputs: { variant: 'primary', label: 'Click me' } },
-    { name: 'Danger', inputs: { variant: 'danger', disabled: true } },
-  ],
+    title: 'Button',
+    category: 'Atoms',
+    description: 'Primary action button',
+    variants: [
+        { name: 'Primary', inputs: { variant: 'primary', label: 'Click me' } },
+        { name: 'Danger', inputs: { variant: 'danger', disabled: true } }
+    ]
 })
 @Component({
-  selector: 'my-button',
-  standalone: true,
-  template: `<button [class]="variant()">{{ label() }}</button>`,
+    selector: 'my-button',
+    standalone: true,
+    template: `<button [class]="variant()">{{ label() }}</button>`
 })
 export class ButtonComponent {
-  variant = input<'primary' | 'secondary' | 'danger'>('primary');
-  label = input('Button');
-  disabled = input(false);
-  clicked = output<void>();
+    variant = input<'primary' | 'secondary' | 'danger'>('primary');
+    label = input('Button');
+    disabled = input(false);
+    clicked = output<void>();
 }
 ```
 
@@ -80,14 +80,14 @@ import { defineConfig } from '@ng-prism/core/config';
 import { jsDocPlugin } from '@ng-prism/plugin-jsdoc';
 
 export default defineConfig({
-  plugins: [jsDocPlugin()],
+    plugins: [jsDocPlugin()],
 
-  theme: {
-    '--prism-primary': '#00a67e',
-    '--prism-font-sans': "'Inter', sans-serif",
-  },
+    theme: {
+        '--prism-primary': '#00a67e',
+        '--prism-font-sans': "'Inter', sans-serif"
+    },
 
-  appProviders: [provideAnimationsAsync(), provideHttpClient()],
+    appProviders: [provideAnimationsAsync(), provideHttpClient()]
 });
 ```
 
@@ -117,9 +117,7 @@ For complex components that need template projections or mock data:
 
 ```typescript
 providePrism(PRISM_RUNTIME_MANIFEST, config, {
-  componentPages: [
-    { title: 'Table Demo', category: 'Data', component: TableDemoPage },
-  ],
+    componentPages: [{ title: 'Table Demo', category: 'Data', component: TableDemoPage }]
 });
 ```
 

package/builders.json

@@ -1,14 +1,14 @@
 {
-  "builders": {
-    "serve": {
-      "implementation": "./dist/builder/serve/index.js",
-      "schema": "./src/builder/serve/schema.json",
-      "description": "Start the ng-prism development server"
-    },
-    "build": {
-      "implementation": "./dist/builder/build/index.js",
-      "schema": "./src/builder/build/schema.json",
-      "description": "Build the ng-prism styleguide for production"
+    "builders": {
+        "serve": {
+            "implementation": "./dist/builder/serve/index.js",
+            "schema": "./src/builder/serve/schema.json",
+            "description": "Start the ng-prism development server"
+        },
+        "build": {
+            "implementation": "./dist/builder/build/index.js",
+            "schema": "./src/builder/build/schema.json",
+            "description": "Build the ng-prism styleguide for production"
+        }
     }
-  }
 }

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

@@ -15,5 +15,5 @@
  * `prism-capture.service.ts` is a global stylesheet using `!important`, which
  * beats any component-scoped rule regardless.
  */
-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 a surface a component was\n     designed against \u2014 and they are the two backgrounds whose colour is\n     absolute rather than a theme token, which is what makes them the values\n     to declare for a screenshot baseline. \"dots\" already exists for anyone\n     who wants the grid. */\n  [data-bg=\"light\"] {\n    background-color: var(--prism-void-light, #f7f5fc);\n    background-image: none;\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n  }\n\n  /* \"transparent\" shares the checkerboard on purpose. The two say the same\n     thing in the two media the canvas has: while browsing, the checkerboard\n     is already the UI's word for \"no surface here\"; in a capture it becomes\n     literal transparency. A stage that were really see-through in the app\n     would just show the shell through the canvas, which means nothing. The\n     split between the two lives entirely in CAPTURE_STYLES. */\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 a surface a component was\n     designed against \u2014 and they are the two backgrounds whose colour is\n     absolute rather than a theme token, which is what makes them the values\n     to declare for a screenshot baseline. \"dots\" already exists for anyone\n     who wants the grid. */\n  /* These two also re-point --prism-measure, and that is not decoration.\n     Every other canvas overlay is drawn in a theme colour over a theme\n     surface, so the two move together. These two backgrounds are absolute:\n     \"light\" stays near-white while the app runs the dark theme, and \"dark\"\n     stays near-black while it runs the light one. The measurement colour\n     picked for one theme is then sitting on the other theme's ground \u2014\n     measured, the dark theme's blue reaches 1.8:1 on the light background,\n     which is a viewport overlay you cannot see. Pinning the colour to the\n     ground rather than to the theme is what makes \"always visible\" true\n     instead of true-in-the-common-case.\n\n     Literal values because this file is theme-independent by construction \u2014\n     it is the one place that already hard-codes the two absolute grounds\n     below, for the same reason. 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: #004d8a;\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n    --prism-measure: #41bcff;\n  }\n\n  /* \"transparent\" shares the checkerboard on purpose. The two say the same\n     thing in the two media the canvas has: while browsing, the checkerboard\n     is already the UI's word for \"no surface here\"; in a capture it becomes\n     literal transparency. A stage that were really see-through in the app\n     would just show the shell through the canvas, which means nothing. The\n     split between the two lives entirely in CAPTURE_STYLES. */\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;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,qrDAwC5B,CAAC"}
+{"version":3,"file":"canvas-bg.styles.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/canvas-bg.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,wwFAyD5B,CAAC"}

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

@@ -30,13 +30,30 @@ export const CANVAS_BG_STYLES = `
      absolute rather than a theme token, which is what makes them the values
      to declare for a screenshot baseline. "dots" already exists for anyone
      who wants the grid. */
+  /* These two also re-point --prism-measure, and that is not decoration.
+     Every other canvas overlay is drawn in a theme colour over a theme
+     surface, so the two move together. These two backgrounds are absolute:
+     "light" stays near-white while the app runs the dark theme, and "dark"
+     stays near-black while it runs the light one. The measurement colour
+     picked for one theme is then sitting on the other theme's ground —
+     measured, the dark theme's blue reaches 1.8:1 on the light background,
+     which is a viewport overlay you cannot see. Pinning the colour to the
+     ground rather than to the theme is what makes "always visible" true
+     instead of true-in-the-common-case.
+
+     Literal values because this file is theme-independent by construction —
+     it is the one place that already hard-codes the two absolute grounds
+     below, for the same reason. Keep them in step with --prism-measure in
+     prism-default-theme.ts; semantic-colours.spec.ts fails if they drift. */
   [data-bg="light"] {
     background-color: var(--prism-void-light, #f7f5fc);
     background-image: none;
+    --prism-measure: #004d8a;
   }
   [data-bg="dark"] {
     background-color: var(--prism-void-dark, #07050f);
     background-image: none;
+    --prism-measure: #41bcff;
   }
 
   /* "transparent" shares the checkerboard on purpose. The two say the same

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

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas-bg-pill.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-bg-pill.component.ts"],"names":[],"mappings":";AAGA,qBAyEa,0BAA0B;IACrC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAE3D,SAAS,CAAC,QAAQ,CAAC,WAAW,gGAA8B;IAC5D,SAAS,CAAC,QAAQ,CAAC,OAAO,0CAA8B;IAExD,SAAS,CAAC,KAAK,IAAI,IAAI;yCANZ,0BAA0B;2CAA1B,0BAA0B;CAStC"}
+{"version":3,"file":"prism-canvas-bg-pill.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-bg-pill.component.ts"],"names":[],"mappings":";AAGA,qBAOa,0BAA0B;IACnC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAE3D,SAAS,CAAC,QAAQ,CAAC,WAAW,gGAA8B;IAC5D,SAAS,CAAC,QAAQ,CAAC,OAAO,0CAA8B;IAExD,SAAS,CAAC,KAAK,IAAI,IAAI;yCANd,0BAA0B;2CAA1B,0BAA0B;CAStC"}

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

@@ -27,25 +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      pointer-events: none;\n      z-index: 2;\n      transition: top var(--%NS%dur-base), left var(--%NS%dur-base);\n    }\n    .prism-bg-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 4px 4px 4px 10px;\n      border-radius: 999px;\n      font-size: var(--%NS%fs-xs);\n      font-family: var(--%NS%font-sans);\n      background: color-mix(in srgb, var(--%NS%prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--%NS%prism-border);\n      color: var(--%NS%prism-text-muted);\n      backdrop-filter: blur(8px);\n      pointer-events: auto;\n      animation: _ngcontent-%COMP%_fadeIn var(--%NS%dur-base) ease-out;\n    }\n    .label[_ngcontent-%COMP%] { letter-spacing: 0.02em; }\n    .reset[_ngcontent-%COMP%] {\n      height: 22px;\n      padding: 0 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n      color: var(--%NS%prism-text);\n      border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background var(--%NS%dur-fast);\n    }\n    .reset[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n    }\n    @keyframes _ngcontent-%COMP%_fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\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-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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasBgPillComponent, [{
         type: Component,
-        args: [{ selector: 'prism-canvas-bg-pill', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (visible()) {
-    <div class="prism-bg-pill">
-      <span class="label">Recommended: {{ recommended() }}</span>
-      <button
-        type="button"
-        class="reset"
-        title="Reset to recommended background"
-        aria-label="Reset to recommended background"
-        (click)="reset()"
-      >
-        Reset
-      </button>
-    </div>
-    }
-  `, styles: ["\n    /* 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      pointer-events: none;\n      z-index: 2;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .prism-bg-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 4px 4px 4px 10px;\n      border-radius: 999px;\n      font-size: var(--fs-xs);\n      font-family: var(--font-sans);\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n      pointer-events: auto;\n      animation: fadeIn var(--dur-base) ease-out;\n    }\n    .label { letter-spacing: 0.02em; }\n    .reset {\n      height: 22px;\n      padding: 0 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background var(--dur-fast);\n    }\n    .reset:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\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-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"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasBgPillComponent, { className: "PrismCanvasBgPillComponent", filePath: "app/canvas/prism-canvas-bg-pill.component.ts", lineNumber: 77 }); })();
+(() => { (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-rulers.component.d.ts

@@ -1,6 +1,7 @@
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
 import * as i0 from "@angular/core";
 export declare class PrismCanvasRulersComponent {
+    protected readonly rulerSize = "20px";
     protected readonly canvas: PrismCanvasService;
     private readonly themeService;
     private readonly rulerTop;

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":"AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAKzE,qBAkDa,0BAA0B;IACrC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAE1D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAC8B;IACvD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAC8B;IAExD,OAAO,CAAC,EAAE,CAA+B;;IAqBzC,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,MAAM;IA4Dd,OAAO,CAAC,MAAM;yCAvGH,0BAA0B;2CAA1B,0BAA0B;CAsKtC"}
+{"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"}

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

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, effect, inject, viewChild, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, viewChild } from '@angular/core';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
 import { PrismThemeService } from '../services/prism-theme.service.js';
 import * as i0 from "@angular/core";
@@ -11,6 +11,7 @@ function PrismCanvasRulersComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
 } }
 const R = 20;
 export class PrismCanvasRulersComponent {
+    rulerSize = `${R}px`;
     canvas = inject(PrismCanvasService);
     themeService = inject(PrismThemeService);
     rulerTop = viewChild('rulerTop', /* @ts-ignore */
@@ -30,11 +31,11 @@ export class PrismCanvasRulersComponent {
             }
             requestAnimationFrame(() => {
                 this.paint(zoom);
-                this.observeResize(zoom);
+                this.observeResize();
             });
         });
     }
-    observeResize(zoom) {
+    observeResize() {
         if (this.ro)
             return;
         const wrap = this.rulerTop()?.nativeElement?.parentElement;
@@ -154,25 +155,19 @@ export class PrismCanvasRulersComponent {
             i0.ɵɵviewQuerySignal(ctx.rulerTop, _c0, 5)(ctx.rulerLeft, _c1, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance(2);
+        } }, hostVars: 2, hostBindings: function PrismCanvasRulersComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵstyleProp("--%NS%prism-ruler-size", ctx.rulerSize);
         } }, decls: 1, vars: 1, consts: [["rulerTop", ""], ["rulerLeft", ""], [1, "ruler-wrap"], [1, "ruler", "ruler--top"], [1, "ruler", "ruler--left"], [1, "ruler-corner"]], template: function PrismCanvasRulersComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, PrismCanvasRulersComponent_Conditional_0_Template, 6, 0, "div", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.canvas.rulers() ? 0 : -1);
-        } }, styles: ["[_nghost-%COMP%] { display: contents; }\n\n    .ruler-wrap[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 4;\n      overflow: hidden;\n    }\n\n    .ruler[_ngcontent-%COMP%] { position: absolute; }\n    .ruler--top[_ngcontent-%COMP%] {\n      top: 0;\n      left: 20px;\n      right: 0;\n      height: 20px;\n    }\n    .ruler--left[_ngcontent-%COMP%] {\n      top: 20px;\n      left: 0;\n      bottom: 0;\n      width: 20px;\n    }\n    .ruler-corner[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 20px;\n      height: 20px;\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      z-index: 1;\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-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, template: `
-    @if (canvas.rulers()) {
-    <div class="ruler-wrap">
-      <canvas #rulerTop class="ruler ruler--top"></canvas>
-      <canvas #rulerLeft class="ruler ruler--left"></canvas>
-      <div class="ruler-corner"></div>
-    </div>
-    }
-  `, styles: ["\n    :host { display: contents; }\n\n    .ruler-wrap {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 4;\n      overflow: hidden;\n    }\n\n    .ruler { position: absolute; }\n    .ruler--top {\n      top: 0;\n      left: 20px;\n      right: 0;\n      height: 20px;\n    }\n    .ruler--left {\n      top: 20px;\n      left: 0;\n      bottom: 0;\n      width: 20px;\n    }\n    .ruler-corner {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 20px;\n      height: 20px;\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      border-bottom: 1px solid var(--prism-border);\n      z-index: 1;\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-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: 64 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasRulersComponent, { className: "PrismCanvasRulersComponent", filePath: "app/canvas/prism-canvas-rulers.component.ts", lineNumber: 18 }); })();
 function stepFor(zoom) {
     if (zoom >= 2)
         return 10;

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

@@ -6,13 +6,23 @@ import * as i0 from "@angular/core";
  * The canvas tools, as a rail floating over the canvas instead of a band above
  * it.
  *
- * The five entries were never one kind of control, and the split follows that
+ * The six entries were never one kind of control, and the split follows that
  * rather than the topic: guides and rulers are toggles you flip constantly
- * while measuring, so they toggle at their own button; canvas background and
- * zoom are choosers you set once, so they move behind a menu; the template is a
- * view rather than a setting and keeps its own button. The zoom *value* stays
- * on the rail as a readout — it is the one number here you read far more often
- * than you set.
+ * while working, so they toggle at their own button; canvas background and zoom
+ * are choosers you set once, so they move behind a menu; the template is a view
+ * rather than a setting and keeps its own button. The viewport is the sixth
+ * entry, and like zoom it does not stay on one side of that split — zoom
+ * already surfaces as a chooser in the menu and a readout on the rail, and the
+ * viewport surfaces the same way, as a toggle on the rail because switching the
+ * constraint on and off is something you do constantly, and a width chooser in
+ * the menu because the specific width is something you set once you have
+ * decided to constrain at all.
+ *
+ * Two numbers live on the rail as readouts, not one: the zoom percentage and
+ * the active viewport width are both things you read far more often than you
+ * set. They differ in permanence, not in kind — the zoom percentage never
+ * leaves, but the width is only there once the toggle above has switched the
+ * constraint on, so it takes a second line rather than a fixed one.
  *
  * The host deliberately generates no box. The rail has to be a direct child of
  * `.prism-canvas-wrap` that does not contain the stage, because that is exactly
@@ -55,6 +65,13 @@ export declare class PrismCanvasToolbarComponent {
         value: number;
         label: string;
     }[];
+    /**
+     * The named widths, offered exactly the way the zoom chooser is.
+     *
+     * Plain numbers and no device names: this tool narrows a box and simulates
+     * nothing, so calling 390 "iPhone" would promise a fidelity it does not have.
+     */
+    protected readonly viewports: readonly number[];
     protected capitalize(s: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismCanvasToolbarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismCanvasToolbarComponent, "prism-canvas-toolbar", never, {}, {}, never, never, true, never>;

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":"AAEA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAEhF;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAkOa,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAE7D,mFAAmF;IACnF,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAE/B,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC;;;;;;;;;;;;;;;OAeG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,sBAAc;IAEpC,4EAA4E;IAC5E;;;;;OAKG;IACH,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI;IAY9C,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCA3D5B,2BAA2B;2CAA3B,2BAA2B;CA8DvC"}
+{"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;AAG3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAQa,2BAA2B;IACpC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAE7D,mFAAmF;IACnF,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAE/B,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC;;;;;;;;;;;;;;;OAeG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,sBAAc;IAEpC,4EAA4E;IAC5E;;;;;OAKG;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;yCAnE9B,2BAA2B;2CAA3B,2BAA2B;CAsEvC"}