@ng-prism/core 22.2.1 → 22.4.0

package/dist/app/services/prism-canvas.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-canvas.service.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;;AAG3E,YAAY,EAAE,QAAQ,EAAE,CAAC;AAIzB,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,EAAE,mDAA4B;IACvC,QAAQ,CAAC,IAAI,iDAAa;IAC1B,QAAQ,CAAC,MAAM,kDAAiB;IAChC,QAAQ,CAAC,MAAM,kDAAiB;IAEhC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;;IAWvD,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAKzB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAKxB,YAAY,IAAI,IAAI;IAKpB,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,IAAI;yCAnDD,kBAAkB;;CAiE9B"}
+{"version":3,"file":"prism-canvas.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-canvas.service.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;;AAI3E,YAAY,EAAE,QAAQ,EAAE,CAAC;AAIzB,qBACa,kBAAkB;IAC3B,QAAQ,CAAC,EAAE,mDAA4B;IACvC,QAAQ,CAAC,IAAI,iDAAa;IAC1B,QAAQ,CAAC,MAAM,kDAAiB;IAChC,QAAQ,CAAC,MAAM,kDAAiB;IAEhC;;;;;;;;OAQG;IACH,QAAQ,CAAC,OAAO,kDAAiB;IAEjC;;;;;;;;;OASG;IACH,QAAQ,CAAC,aAAa,wDAA+B;IAErD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;IAEvD;;;;;;;OAOG;IACH,OAAO,CAAC,iBAAiB,CAAoB;;IAW7C,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAKzB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAKxB,YAAY,IAAI,IAAI;IAKpB,YAAY,IAAI,IAAI;IAKpB,aAAa,IAAI,IAAI;IAKrB,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAYxC,cAAc,IAAI,IAAI;IAItB,OAAO,CAAC,eAAe;IAyBvB,OAAO,CAAC,IAAI;yCApHH,kBAAkB;;CAuI9B"}

package/dist/app/services/prism-canvas.service.js

@@ -1,5 +1,6 @@
 import { inject, Injectable, signal } from '@angular/core';
 import { CANVAS_BGS } from '../../shared/canvas-bg.type.js';
+import { clampViewportWidth, VIEWPORT_DEFAULT } from '../../shared/viewport.type.js';
 import { PrismCaptureService } from './prism-capture.service.js';
 import * as i0 from "@angular/core";
 const STORAGE_KEY = 'ng-prism-canvas';
@@ -12,12 +13,44 @@ export class PrismCanvasService {
     ...(ngDevMode ? [{ debugName: "guides" }] : /* istanbul ignore next */ []));
     rulers = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rulers" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the measuring tool is active.
+     *
+     * Lives here rather than in `PrismMeasureService` because it is the same
+     * kind of state as `guides` and `rulers`: a preference about the working
+     * environment, not a statement about this variant. That also means the
+     * toggle inherits the constructor's capture-mode behaviour below for
+     * free, without having to repeat it.
+     */
+    measure = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measure" }] : /* istanbul ignore next */ []));
+    /**
+     * The width `.demo-wrap` is constrained to, or `null` for "as wide as it
+     * wants".
+     *
+     * Nullable rather than a `0`/`-1` sentinel because "off" is a
+     * different state and not a width: the renderer keys a whole set of CSS off
+     * `[data-viewport]`, and a falsy number would make `viewportWidth() ? ... `
+     * silently treat a legal narrow width as "off" the moment the floor ever
+     * moved to 0.
+     */
+    viewportWidth = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportWidth" }] : /* istanbul ignore next */ []));
     capture = inject(PrismCaptureService);
+    /**
+     * What `toggleViewport()` restores.
+     *
+     * Kept in a field rather than persisted: it exists so that flicking the rail
+     * button off and on again does not throw away a width you just dragged to,
+     * which is a within-session concern. The width that *is* worth carrying
+     * across sessions is the live one, and that is already in `viewportWidth`.
+     */
+    lastViewportWidth = VIEWPORT_DEFAULT;
     constructor() {
-        // Capture mode renders for a screenshot tool: persisted zoom, guides and
-        // rulers would leak a previous session's state into the image, so the
-        // defaults (zoom 1, no guides, no rulers) are kept and nothing is written
-        // back.
+        // Capture mode renders for a screenshot tool: persisted zoom, guides,
+        // rulers and the measure toggle would leak a previous session's state
+        // into the image, so the defaults (zoom 1, no guides, no rulers, measure
+        // off) are kept and nothing is written back.
         if (this.capture.active())
             return;
         this.loadFromStorage();
@@ -38,6 +71,24 @@ export class PrismCanvasService {
         this.rulers.update((v) => !v);
         this.save();
     }
+    toggleMeasure() {
+        this.measure.update((v) => !v);
+        this.save();
+    }
+    setViewportWidth(w) {
+        if (w === null) {
+            this.viewportWidth.set(null);
+        }
+        else {
+            const clamped = clampViewportWidth(w);
+            this.lastViewportWidth = clamped;
+            this.viewportWidth.set(clamped);
+        }
+        this.save();
+    }
+    toggleViewport() {
+        this.setViewportWidth(this.viewportWidth() === null ? this.lastViewportWidth : null);
+    }
     loadFromStorage() {
         try {
             const raw = localStorage.getItem(STORAGE_KEY);
@@ -53,8 +104,17 @@ export class PrismCanvasService {
                 this.guides.set(d['guides']);
             if (typeof d['rulers'] === 'boolean')
                 this.rulers.set(d['rulers']);
+            if (typeof d['measure'] === 'boolean')
+                this.measure.set(d['measure']);
+            if (typeof d['viewportWidth'] === 'number') {
+                const w = clampViewportWidth(d['viewportWidth']);
+                this.lastViewportWidth = w;
+                this.viewportWidth.set(w);
+            }
+        }
+        catch {
+            // Malformed JSON or no storage access: keep the field defaults.
         }
-        catch { }
     }
     save() {
         if (this.capture.active())
@@ -65,9 +125,14 @@ export class PrismCanvasService {
                 zoom: this.zoom(),
                 guides: this.guides(),
                 rulers: this.rulers(),
+                measure: this.measure(),
+                viewportWidth: this.viewportWidth()
             }));
         }
-        catch { }
+        catch {
+            // Storage may be full or disabled (e.g. private browsing); the
+            // canvas state just stays unpersisted for this session.
+        }
     }
     static ɵfac = function PrismCanvasService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismCanvasService)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PrismCanvasService, factory: PrismCanvasService.ɵfac, providedIn: 'root' });

package/dist/app/services/prism-capture.service.d.ts

@@ -6,59 +6,33 @@ export declare const CAPTURE_ATTRIBUTE = "data-prism-capture";
 /**
  * Everything capture mode makes see-through for `bg: 'transparent'`.
  *
- * A screenshot tool clips the *composited* page, so a transparent stage alone
- * buys nothing: the wrappers behind it keep painting and the PNG comes back
- * opaque. The stage and every ancestor that paints have to go at once, which
- * is why this is one selector rather than a rule per layer.
- *
- * `html` and `body` are insurance rather than observation — ng-prism paints
- * neither, but a consuming app's global stylesheet can, and the guarantee this
- * makes is "nothing opaque between the component and the document root".
- * Above `html` the backdrop is the browser's own and no stylesheet reaches it;
- * a runner has to clear that with `omitBackground: true`.
- *
- * `prism-shell` is the *host element* the app bootstraps into, not the
- * `div.prism-shell` inside its template — both are in the chain and either can
- * be given a background, a `:host` rule being the easy way to do it by
- * accident. `.prism-body` is the grid between the shell and `.prism-main` and
- * is listed on the same insurance grounds.
- *
- * Scoped by `:has()` to a *transparent* stage, so the other five backgrounds
- * behave exactly as before. Exported so a test can assert the invariant
- * against the real DOM rather than against this list — the list is the
- * fragile part of the feature. A renamed wrapper or a newly introduced
- * painting layer turns the capture opaque again, and an opaque capture still
- * looks correct; it just silently stops testing transparency.
+ * A screenshot tool clips the composited page, so the stage and every painting
+ * ancestor must clear together or the PNG comes back opaque. `html`, `body`,
+ * the `prism-shell` host element and `.prism-body` are insurance: ng-prism
+ * paints none of them, but an app stylesheet or a `:host` rule can. The
+ * browser's own backdrop above `html` needs `omitBackground: true` in the runner.
+ *
+ * Scoped by `:has()` to a transparent stage so the other backgrounds are
+ * untouched. Exported so a test can check it against the real DOM: a renamed
+ * wrapper or a new painting layer makes captures opaque again, and an opaque
+ * capture still looks correct.
  */
 export declare const CAPTURE_TRANSPARENT_SELECTOR: string;
 /**
- * Capture-isolation mode.
- *
- * Screenshot tools clip the composited page to the capture target's box, so
- * anything painted behind or inside `.demo-wrap` ends up in the image. Capture
- * mode strips the canvas background down to its patternless colour — keeping
- * whatever `@Showcase({ bg })` declared, or clearing the whole paint chain to
- * real transparency for `bg: 'transparent'` — suppresses every piece of
- * canvas chrome, removes every other shell region from layout so the canvas
- * owns the viewport, locks zoom to 1 and freezes animation, so a variant
- * renders identically on every run.
- *
- * What that buys a runner is the right to screenshot `.demo-wrap` directly:
- * the target is composited against the declared background over its whole box,
- * not merely over the part that fits inside the canvas viewport. The one thing
- * the mode cannot do is make room that the viewport does not have — a
- * component larger than the viewport still overflows, and sizing the viewport
- * to fit is the runner's job.
- *
- * The flag is read once from the URL at construction time and never written
- * back — {@link PrismUrlStateService} rebuilds the query string from scratch,
- * so navigating inside the app drops `?capture=1` from the address bar while
- * the mode itself stays on for the lifetime of the document.
- *
- * Reading in the constructor (rather than during `PrismUrlStateService.init()`)
- * is deliberate: `PrismCanvasService` restores persisted zoom in *its* own
- * constructor, which can run first, so anything init-order dependent would
- * make zoom-locking racy.
+ * Capture-isolation mode, for external screenshot runners.
+ *
+ * Keeps the declared canvas colour but strips its pattern (or clears the whole
+ * paint chain for `bg: 'transparent'`), hides canvas chrome and every other
+ * shell region, locks zoom to 1 and freezes animation, so a variant renders the
+ * same on every run and a runner can screenshot `.demo-wrap` directly. It
+ * cannot make room the viewport lacks: sizing the viewport is the runner's job.
+ *
+ * The flag is read once from the URL in the constructor and never written back.
+ * {@link PrismUrlStateService} rebuilds the query string, so `?capture=1` leaves
+ * the address bar on navigation while the mode stays on. Reading it during
+ * `PrismUrlStateService.init()` instead would make zoom-locking racy:
+ * `PrismCanvasService` restores persisted zoom in its own constructor, which
+ * can run first.
  */
 export declare class PrismCaptureService {
     private readonly _active;

package/dist/app/services/prism-capture.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-capture.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-capture.service.ts"],"names":[],"mappings":";AAEA,sFAAsF;AACtF,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAItD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,4BAA4B,QAE0H,CAAC;AAmJpK;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAItB;IAEF,kEAAkE;IAClE,QAAQ,CAAC,MAAM,0CAA6B;;IAM5C,OAAO,CAAC,eAAe;yCAdZ,mBAAmB;;CAuB/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAIzD"}
+{"version":3,"file":"prism-capture.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-capture.service.ts"],"names":[],"mappings":";AAEA,sFAAsF;AACtF,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAItD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,4BAA4B,QAE4H,CAAC;AA2FtK;;;;;;;;;;;;;;;GAeG;AACH,qBACa,mBAAmB;IAC5B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA6F;IAErH,kEAAkE;IAClE,QAAQ,CAAC,MAAM,0CAA6B;;IAM5C,OAAO,CAAC,eAAe;yCAVd,mBAAmB;;CAoB/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAKzD"}

package/dist/app/services/prism-capture.service.js

@@ -8,135 +8,66 @@ const STYLE_ELEMENT_ID = 'ng-prism-capture-styles';
 /**
  * Everything capture mode makes see-through for `bg: 'transparent'`.
  *
- * A screenshot tool clips the *composited* page, so a transparent stage alone
- * buys nothing: the wrappers behind it keep painting and the PNG comes back
- * opaque. The stage and every ancestor that paints have to go at once, which
- * is why this is one selector rather than a rule per layer.
- *
- * `html` and `body` are insurance rather than observation — ng-prism paints
- * neither, but a consuming app's global stylesheet can, and the guarantee this
- * makes is "nothing opaque between the component and the document root".
- * Above `html` the backdrop is the browser's own and no stylesheet reaches it;
- * a runner has to clear that with `omitBackground: true`.
- *
- * `prism-shell` is the *host element* the app bootstraps into, not the
- * `div.prism-shell` inside its template — both are in the chain and either can
- * be given a background, a `:host` rule being the easy way to do it by
- * accident. `.prism-body` is the grid between the shell and `.prism-main` and
- * is listed on the same insurance grounds.
- *
- * Scoped by `:has()` to a *transparent* stage, so the other five backgrounds
- * behave exactly as before. Exported so a test can assert the invariant
- * against the real DOM rather than against this list — the list is the
- * fragile part of the feature. A renamed wrapper or a newly introduced
- * painting layer turns the capture opaque again, and an opaque capture still
- * looks correct; it just silently stops testing transparency.
+ * A screenshot tool clips the composited page, so the stage and every painting
+ * ancestor must clear together or the PNG comes back opaque. `html`, `body`,
+ * the `prism-shell` host element and `.prism-body` are insurance: ng-prism
+ * paints none of them, but an app stylesheet or a `:host` rule can. The
+ * browser's own backdrop above `html` needs `omitBackground: true` in the runner.
+ *
+ * Scoped by `:has()` to a transparent stage so the other backgrounds are
+ * untouched. Exported so a test can check it against the real DOM: a renamed
+ * wrapper or a new painting layer makes captures opaque again, and an opaque
+ * capture still looks correct.
  */
 export const CAPTURE_TRANSPARENT_SELECTOR = `[${CAPTURE_ATTRIBUTE}] .prism-canvas-stage[data-bg='transparent'],\n` +
     `[${CAPTURE_ATTRIBUTE}] :is(html, body, prism-shell, .prism-shell, .prism-body, .prism-main, .prism-canvas-wrap):has(.prism-canvas-stage[data-bg='transparent'])`;
 /**
  * Everything capture mode removes from layout so the canvas owns the viewport.
  *
- * The canvas is not an overlay host: `.prism-canvas-wrap` is one flex sibling
- * among several inside `.prism-main`, which is itself one grid cell of
- * `.prism-body` inside `.prism-shell`. A screenshot tool captures the *screen
- * coordinates* of `.demo-wrap`, and `.demo-wrap` is centred in a stage that
- * scrolls — so whenever the component is larger than the canvas viewport, its
- * box extends past the canvas and the compositor fills those coordinates with
- * whichever sibling lives there. Measured in Chromium against the real
- * stylesheets, a 200x400 component at a 1280x720 viewport leaks 57px upwards
- * into the variant ribbon and 121px downwards into the panel. That is neither
- * a z-order nor a clipping bug: the capture target legitimately extends beyond
- * its scroll container and the page paints something there.
- *
- * `display: none` rather than `visibility: hidden`, and this is the one thing
- * not to "simplify" later. Keeping the layout box is the tempting minimal-churn
- * fix — nothing re-centres, no unaffected baseline moves — and it does not
- * work: the box still occupies its space, so what paints at those coordinates
- * becomes `.prism-main`'s own background instead of the panel. Measured at the
- * bottom row of a `bg: 'transparent'` capture: `#11284e` with the panel left
- * alone, `#11284e` with `visibility: hidden`, transparent only once the panel
- * leaves layout. The canvas is `flex: 1`; it has to reclaim the space for the
- * stage to paint there, and only removal from layout gives it back.
+ * Runners screenshot the screen coordinates of `.demo-wrap`, which is centred
+ * in a scrolling stage. A component larger than the canvas extends past it,
+ * and whichever sibling region paints there (ribbon, panel) leaks into the image.
  *
- * Written as a structural rule rather than a list of chrome selectors, because
- * enumeration is what makes this class of bug recur: the list has to be revised
- * every time the shell grows a region, nothing fails when it is not, and the
- * baselines recorded in the meantime look perfectly fine while guarding the
- * wrong image. At every level from the shell to the canvas wrap, the one child
- * that leads to the stage survives and every sibling is removed, so a region
- * added tomorrow is suppressed without anyone remembering this file exists.
+ * Use `display: none`, not `visibility: hidden`: a hidden box keeps its space
+ * and `.prism-main`'s background paints there instead. The canvas is `flex: 1`
+ * and only gets the space back once its siblings leave layout.
  *
- * The track collapses are not cosmetic. `.prism-shell` and `.prism-body` are
- * grids with sized tracks (`52px 1fr`, `var(--sw) 4px 1fr`); hiding the header
- * and the sidebar without collapsing them would auto-place the survivor into
- * the *first* track and render the canvas 52px tall or 264px wide.
+ * Structural rather than a list of chrome selectors: at each level from the
+ * shell to the canvas wrap, the child leading to the stage survives and every
+ * sibling goes, so a new shell region is covered without touching this file.
+ * The grid track overrides in `CAPTURE_STYLES` are required too: without them
+ * the survivor lands in the first sized track and the canvas renders 52px tall
+ * or 264px wide.
  *
- * Scoped by `:has(.prism-canvas-stage)` throughout: a component page or a view
- * panel has no canvas, and blanking the shell around it would leave a runner
- * with an empty screenshot rather than an honest one.
+ * Scoped by `:has(.prism-canvas-stage)`: a component page or view panel has no
+ * canvas, and blanking the shell there would give an empty screenshot.
  */
-const CAPTURE_CANVAS_ONLY_SELECTOR = `[${CAPTURE_ATTRIBUTE}] ` +
-    `:is(.prism-shell, .prism-body, .prism-main, .prism-canvas-wrap)` +
-    `:has(.prism-canvas-stage) > :not(:has(.prism-canvas-stage))`;
+const CAPTURE_CANVAS_ONLY_SELECTOR = `[${CAPTURE_ATTRIBUTE}] ` + `:is(.prism-shell, .prism-body, .prism-main, .prism-canvas-wrap)` + `:has(.prism-canvas-stage) > :not(:has(.prism-canvas-stage))`;
 /**
  * Global stylesheet applied in capture mode.
  *
- * This has to be a document-level stylesheet rather than a component `styles`
- * block: Angular's emulated view encapsulation scopes component styles to that
- * component's own content attribute, so a rule written inside the renderer
- * could never reach into the dynamically created showcase component to stop
- * *its* transitions and animations.
- *
- * Stripping `background-image` is what makes the canvas capture-safe without
- * flattening it to one colour. Every `data-bg` value is a background *colour*
- * plus, for all but `plain`, a repeating *pattern* — dots or a checkerboard.
- * The colour is what `@Showcase({ bg })` declares and is deterministic; the
- * pattern is not, because the component is centred, so the pattern's phase
- * beneath it shifts whenever the component changes size and every pixel behind
- * it differs after an unrelated resize. `!important` is required: the stage's
- * own rules are component-scoped and therefore more specific than this one.
- *
- * `transparent` is the one value that drops the colour too, and it cannot do
- * that on the stage alone — see {@link CAPTURE_TRANSPARENT_SELECTOR} for the
- * layers involved. Alpha is not what the paragraph above rules out: a pattern
- * has a phase that moves when the component resizes, an alpha channel is a
- * per-pixel value that does not.
- *
- * Colour is only half of it. The rules from
- * {@link CAPTURE_CANVAS_ONLY_SELECTOR} down hand the whole viewport to the
- * canvas, which is what makes the declared background reach the *whole* of the
- * capture target's box rather than only the part that happens to fit inside
- * the canvas viewport.
- *
- * The stage's padding goes with them, and it buys more than the 32px it looks
- * like. The stage is `height: 100%` under `content-box`, so its padding lands
- * *outside* that height: the stage is 64px taller than the row it sits in,
- * overflows it, and centres the component 32px below the true centre of what
- * is actually painted. Dropping the padding makes the stage exactly the canvas
- * and the component's centre the viewport's centre, which turns the guarantee
- * crisp — a component is contained iff it fits the viewport. Measured: a
- * 200x700 component at 1280x720 still leaks 22px past the canvas with the
- * regions gone but the padding kept. None of that padding is ever inside a
- * `.demo-wrap` screenshot, so nothing is lost by removing it.
- *
- * The stage's edge goes with them, and it is stripped rather than reshaped for
- * the same reason it exists in that shape at all. The edge is deliberately
- * built from `outline` plus `box-shadow` and never from a border or padding,
- * because neither participates in layout: `plugin-visual-regression`
- * screenshots `.demo-wrap`, which is centred in the stage, and a border would
- * shrink the stage's content box by 2px and move that centre, shifting every
- * recorded baseline without a component having changed. Not participating in
- * layout is not the same as not painting. `outline-offset: -1px` draws the
- * line *inside* the border box, and with the padding above gone the stage edge
- * sits flush against the component, so for anything whose `.demo-wrap` reaches
- * it that 1px line and the shadow under it composite straight into the
- * screenshot. So capture mode removes the paint and leaves the geometry
- * untouched — the same division of labour the edge was chosen for, and the
- * only one that keeps both halves of the guarantee.
- *
- * {@link CAPTURE_TRANSPARENT_SELECTOR} cannot cover this: it clears background
- * colour, and an outline is not a background.
+ * Document-level because emulated encapsulation would stop a renderer rule from
+ * reaching the dynamically created showcase component's transitions and
+ * animations.
+ *
+ * `background-image` is stripped because the dot/checker pattern's phase shifts
+ * whenever the centred component resizes; the declared colour is deterministic
+ * and stays. `!important` is required to beat the component-scoped stage rules.
+ * `transparent` also drops the colour, across the layers in
+ * {@link CAPTURE_TRANSPARENT_SELECTOR}; alpha is per-pixel and does not shift.
+ * The rules from {@link CAPTURE_CANVAS_ONLY_SELECTOR} down give the canvas the
+ * whole viewport, so the background covers the capture target's whole box.
+ *
+ * The stage padding goes too. The stage is `height: 100%` under `content-box`,
+ * so the padding makes it 64px taller than its row and centres the component
+ * 32px too low. Without it the stage is the canvas, and a component is
+ * contained iff it fits the viewport.
+ *
+ * The stage edge is `outline` plus `box-shadow`, never a border, so it does not
+ * move `.demo-wrap`'s centre and shift baselines. It still paints, and with the
+ * padding gone it sits flush against the component, so capture mode removes the
+ * paint and keeps the geometry. {@link CAPTURE_TRANSPARENT_SELECTOR} does not
+ * cover this: an outline is not a background.
  */
 const CAPTURE_STYLES = `
 [${CAPTURE_ATTRIBUTE}] *,
@@ -177,38 +108,23 @@ ${CAPTURE_CANVAS_ONLY_SELECTOR} {
 }
 `;
 /**
- * Capture-isolation mode.
- *
- * Screenshot tools clip the composited page to the capture target's box, so
- * anything painted behind or inside `.demo-wrap` ends up in the image. Capture
- * mode strips the canvas background down to its patternless colour — keeping
- * whatever `@Showcase({ bg })` declared, or clearing the whole paint chain to
- * real transparency for `bg: 'transparent'` — suppresses every piece of
- * canvas chrome, removes every other shell region from layout so the canvas
- * owns the viewport, locks zoom to 1 and freezes animation, so a variant
- * renders identically on every run.
- *
- * What that buys a runner is the right to screenshot `.demo-wrap` directly:
- * the target is composited against the declared background over its whole box,
- * not merely over the part that fits inside the canvas viewport. The one thing
- * the mode cannot do is make room that the viewport does not have — a
- * component larger than the viewport still overflows, and sizing the viewport
- * to fit is the runner's job.
- *
- * The flag is read once from the URL at construction time and never written
- * back — {@link PrismUrlStateService} rebuilds the query string from scratch,
- * so navigating inside the app drops `?capture=1` from the address bar while
- * the mode itself stays on for the lifetime of the document.
- *
- * Reading in the constructor (rather than during `PrismUrlStateService.init()`)
- * is deliberate: `PrismCanvasService` restores persisted zoom in *its* own
- * constructor, which can run first, so anything init-order dependent would
- * make zoom-locking racy.
+ * Capture-isolation mode, for external screenshot runners.
+ *
+ * Keeps the declared canvas colour but strips its pattern (or clears the whole
+ * paint chain for `bg: 'transparent'`), hides canvas chrome and every other
+ * shell region, locks zoom to 1 and freezes animation, so a variant renders the
+ * same on every run and a runner can screenshot `.demo-wrap` directly. It
+ * cannot make room the viewport lacks: sizing the viewport is the runner's job.
+ *
+ * The flag is read once from the URL in the constructor and never written back.
+ * {@link PrismUrlStateService} rebuilds the query string, so `?capture=1` leaves
+ * the address bar on navigation while the mode stays on. Reading it during
+ * `PrismUrlStateService.init()` instead would make zoom-locking racy:
+ * `PrismCanvasService` restores persisted zoom in its own constructor, which
+ * can run first.
  */
 export class PrismCaptureService {
-    _active = signal(typeof window !== 'undefined'
-        ? parseCaptureParam(window.location.search)
-        : false, /* @ts-ignore */
+    _active = signal(typeof window !== 'undefined' ? parseCaptureParam(window.location.search) : false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
     /** True while the app renders for an external screenshot tool. */
     active = this._active.asReadonly();

package/dist/app/services/prism-event-log.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-event-log.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-event-log.service.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,qBACa,oBAAoB;IAC/B,QAAQ,CAAC,MAAM,0DAA+B;IAC9C,OAAO,CAAC,OAAO,CAAK;IAEpB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAOvC,KAAK,IAAI,IAAI;yCAXF,oBAAoB;;CAchC"}
+{"version":3,"file":"prism-event-log.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-event-log.service.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAClB;AAED,qBACa,oBAAoB;IAC7B,QAAQ,CAAC,MAAM,0DAA+B;IAC9C,OAAO,CAAC,OAAO,CAAK;IAEpB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAIvC,KAAK,IAAI,IAAI;yCARJ,oBAAoB;;CAWhC"}

package/dist/app/services/prism-event-log.service.js

@@ -5,10 +5,7 @@ export class PrismEventLogService {
     ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
     _nextId = 0;
     log(name, value) {
-        this.events.update((prev) => [
-            { id: this._nextId++, timestamp: Date.now(), name, value },
-            ...prev,
-        ]);
+        this.events.update((prev) => [{ id: this._nextId++, timestamp: Date.now(), name, value }, ...prev]);
     }
     clear() {
         this.events.set([]);

package/dist/app/services/prism-layout.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-layout.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-layout.service.ts"],"names":[],"mappings":";AAIA,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,aAAa,kDAAgB;IACtC,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,iBAAiB,6DAAwC;IAClE,QAAQ,CAAC,YAAY,iDAAe;IACpC,QAAQ,CAAC,WAAW,iDAAe;IACnC,QAAQ,CAAC,UAAU,iDAAe;;IAMlC,aAAa,IAAI,IAAI;IAKrB,YAAY,IAAI,IAAI;IAKpB,aAAa,IAAI,IAAI;IAKrB,iBAAiB,IAAI,IAAI;IAKzB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKjC,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKhC,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,eAAe;IA0BvB,OAAO,CAAC,aAAa;yCA1EV,kBAAkB;;CAsF9B"}
+{"version":3,"file":"prism-layout.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-layout.service.ts"],"names":[],"mappings":";AAIA,qBACa,kBAAkB;IAC3B,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,aAAa,kDAAgB;IACtC,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,iBAAiB,6DAAwC;IAClE,QAAQ,CAAC,YAAY,iDAAe;IACpC,QAAQ,CAAC,WAAW,iDAAe;IACnC,QAAQ,CAAC,UAAU,iDAAe;;IAMlC,aAAa,IAAI,IAAI;IAKrB,YAAY,IAAI,IAAI;IAKpB,aAAa,IAAI,IAAI;IAKrB,iBAAiB,IAAI,IAAI;IAKzB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKjC,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKhC,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,aAAa;yCArEZ,kBAAkB;;CAkF9B"}

package/dist/app/services/prism-layout.service.js

@@ -59,8 +59,7 @@ export class PrismLayoutService {
                 this.addonsVisible.set(d['addonsVisible']);
             if (typeof d['toolbarVisible'] === 'boolean')
                 this.toolbarVisible.set(d['toolbarVisible']);
-            if (d['addonsOrientation'] === 'bottom' ||
-                d['addonsOrientation'] === 'right') {
+            if (d['addonsOrientation'] === 'bottom' || d['addonsOrientation'] === 'right') {
                 this.addonsOrientation.set(d['addonsOrientation']);
             }
             if (typeof d['sidebarWidth'] === 'number')
@@ -70,7 +69,9 @@ export class PrismLayoutService {
             if (typeof d['panelWidth'] === 'number')
                 this.panelWidth.set(Math.max(200, Math.min(600, d['panelWidth'])));
         }
-        catch { }
+        catch {
+            // Malformed JSON or no storage access: keep the field defaults.
+        }
     }
     saveToStorage() {
         const data = {
@@ -80,7 +81,7 @@ export class PrismLayoutService {
             addonsOrientation: this.addonsOrientation(),
             sidebarWidth: this.sidebarWidth(),
             panelHeight: this.panelHeight(),
-            panelWidth: this.panelWidth(),
+            panelWidth: this.panelWidth()
         };
         localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
     }

package/dist/app/services/prism-manifest.service.d.ts

@@ -1,5 +1,5 @@
-import type { RuntimeComponent, RuntimeManifest } from '../../plugin/plugin.types.js';
 import type { StyleguidePage } from '../../plugin/page.types.js';
+import type { RuntimeComponent, RuntimeManifest } from '../../plugin/plugin.types.js';
 import * as i0 from "@angular/core";
 export declare class PrismManifestService {
     private readonly _manifest;

package/dist/app/services/prism-manifest.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-manifest.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-manifest.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;;AAGjE,qBACa,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmD;IAE7E,QAAQ,CAAC,QAAQ,kDAA+B;IAEhD,QAAQ,CAAC,UAAU,qDAAmE;IAEtF,QAAQ,CAAC,KAAK,mDAAkE;IAEhF,QAAQ,CAAC,UAAU,2CAsBhB;IAEH,QAAQ,CAAC,iBAAiB,kEAUvB;IAEH,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI;yCA7CpC,oBAAoB;;CAgDhC"}
+{"version":3,"file":"prism-manifest.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-manifest.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;;AAGtF,qBACa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmD;IAE7E,QAAQ,CAAC,QAAQ,kDAA+B;IAEhD,QAAQ,CAAC,UAAU,qDAAmE;IAEtF,QAAQ,CAAC,KAAK,mDAAkE;IAEhF,QAAQ,CAAC,UAAU,2CA0BhB;IAEH,QAAQ,CAAC,iBAAiB,kEAYvB;IAEH,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI;yCAnDtC,oBAAoB;;CAsDhC"}

package/dist/app/services/prism-manifest.service.js

@@ -19,7 +19,7 @@ export class PrismManifestService {
                 orderMap.set(cat, order);
             }
         }
-        for (const page of (manifest.pages ?? [])) {
+        for (const page of manifest.pages ?? []) {
             const cat = page.category ?? 'Uncategorized';
             if (!orderMap.has(cat)) {
                 orderMap.set(cat, Infinity);

package/dist/app/services/prism-measure.service.d.ts

@@ -0,0 +1,44 @@
+import type { Measurement, MeasurePoint } from '../../shared/measure.type.js';
+import * as i0 from "@angular/core";
+/**
+ * The transient state of the measuring tool.
+ *
+ * Deliberately separate from `PrismCanvasService`, which holds durable
+ * preferences: the toggle lives there, the measurements live here. None of
+ * this is persisted — rescuing a half-finished measurement across a reload
+ * would be a burden, not a convenience.
+ */
+export declare class PrismMeasureService {
+    private readonly navigation;
+    private readonly renderer;
+    private readonly canvas;
+    private readonly _draft;
+    private readonly _pins;
+    private readonly _hoverAnchor;
+    /** The measurement in progress, for as long as the pointer is down. */
+    readonly draft: import("@angular/core").Signal<Measurement | null>;
+    /** Pinned measurements, in the order they were set. */
+    readonly pins: import("@angular/core").Signal<readonly Measurement[]>;
+    /** The element fixed by click for alt-hover mode. */
+    readonly hoverAnchor: import("@angular/core").Signal<Element | null>;
+    constructor();
+    beginDraft(a: MeasurePoint): void;
+    updateDraft(b: MeasurePoint): void;
+    commitDraft(): void;
+    cancelDraft(): void;
+    removePin(index: number): void;
+    setHoverAnchor(element: Element | null): void;
+    /**
+     * What happens when the tool is switched off.
+     *
+     * Deliberately not `clearAll()`: the toggle is a mode, not a reset. Anyone
+     * who hits the rail by accident must not lose the pinned measurements —
+     * the running one, on the other hand, no longer makes sense without a
+     * pointer, and an anchor with no visible overlay even less so.
+     */
+    suspend(): void;
+    clearAll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismMeasureService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+//# sourceMappingURL=prism-measure.service.d.ts.map

package/dist/app/services/prism-measure.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-measure.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-measure.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;;AAK9E;;;;;;;GAOG;AACH,qBACa,mBAAmB;IAC5B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkC;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IACzD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IAErD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAoC;IAC3D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAsC;IAC5D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAgC;IAE7D,uEAAuE;IACvE,QAAQ,CAAC,KAAK,qDAA4B;IAE1C,uDAAuD;IACvD,QAAQ,CAAC,IAAI,yDAA2B;IAExC,qDAAqD;IACrD,QAAQ,CAAC,WAAW,iDAAkC;;IAmBtD,UAAU,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAIjC,WAAW,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAIlC,WAAW,IAAI,IAAI;IAQnB,WAAW,IAAI,IAAI;IAInB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI9B,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI;IAI7C;;;;;;;OAOG;IACH,OAAO,IAAI,IAAI;IAKf,QAAQ,IAAI,IAAI;yCA5EP,mBAAmB;;CAiF/B"}