@ng-prism/core 22.2.1 → 22.4.0

package/dist/app/canvas/measure-keyboard.d.ts

@@ -0,0 +1,20 @@
+import type { Vec } from './measure-geometry.js';
+/**
+ * The moved point — or `null` when the key does not belong here.
+ *
+ * Tab is deliberately not one of `nudge`'s keys. Spec §10 reserves it for
+ * stepping through the specimen's snap targets — the accessible substitute
+ * for the pointer, and arguably the more precise input, not a consolation
+ * prize for lacking one: edges are exactly what one wants to measure in the
+ * first place. Arrow keys only come in afterwards, to nudge off an edge once
+ * a free point is what's wanted; `nudge` only ever moves a point that
+ * already exists, it does not place one. Someone will eventually be tempted
+ * to fold Tab in here as "simpler" free-pixel movement — resist it, and see
+ * `onKey` in the component for why returning `null` here (rather than the
+ * unchanged point) is what makes that possible to resist safely.
+ *
+ * The step sizes are the pair Spec §10 fixes for this tool: 1px plain, 10px
+ * with Shift.
+ */
+export declare function nudge(point: Vec, key: string, shift: boolean): Vec | null;
+//# sourceMappingURL=measure-keyboard.d.ts.map

package/dist/app/canvas/measure-keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measure-keyboard.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/measure-keyboard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAKjD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,GAAG,GAAG,IAAI,CAezE"}

package/dist/app/canvas/measure-keyboard.js

@@ -0,0 +1,34 @@
+const STEP = 1;
+const STEP_COARSE = 10;
+/**
+ * The moved point — or `null` when the key does not belong here.
+ *
+ * Tab is deliberately not one of `nudge`'s keys. Spec §10 reserves it for
+ * stepping through the specimen's snap targets — the accessible substitute
+ * for the pointer, and arguably the more precise input, not a consolation
+ * prize for lacking one: edges are exactly what one wants to measure in the
+ * first place. Arrow keys only come in afterwards, to nudge off an edge once
+ * a free point is what's wanted; `nudge` only ever moves a point that
+ * already exists, it does not place one. Someone will eventually be tempted
+ * to fold Tab in here as "simpler" free-pixel movement — resist it, and see
+ * `onKey` in the component for why returning `null` here (rather than the
+ * unchanged point) is what makes that possible to resist safely.
+ *
+ * The step sizes are the pair Spec §10 fixes for this tool: 1px plain, 10px
+ * with Shift.
+ */
+export function nudge(point, key, shift) {
+    const d = shift ? STEP_COARSE : STEP;
+    switch (key) {
+        case 'ArrowRight':
+            return { x: point.x + d, y: point.y };
+        case 'ArrowLeft':
+            return { x: point.x - d, y: point.y };
+        case 'ArrowDown':
+            return { x: point.x, y: point.y + d };
+        case 'ArrowUp':
+            return { x: point.x, y: point.y - d };
+        default:
+            return null;
+    }
+}

package/dist/app/canvas/measure-quad.d.ts

@@ -0,0 +1,114 @@
+import type { EdgeSide } from '../../shared/measure.type.js';
+import { type RenderedLine, type Vec } from './measure-geometry.js';
+/** An axis-aligned box in `.demo-wrap`-local CSS pixels. */
+export interface Box {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** A box in the form an SVG `<rect>` takes. */
+export interface OutlineRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * A {@link Box} as an SVG `<rect>`.
+ *
+ * Spec §4.5 asks for the anchor and the target to be outlined alongside the
+ * four numbers, and `<rect>` wants an origin and a size where `Box` carries
+ * two opposite corners. Trivial arithmetic, kept out of the component for
+ * the same reason the rest of this module is: the component should hold
+ * nothing but the DOM reads.
+ */
+export declare function outlineOf(box: Box): OutlineRect;
+export interface QuadResult {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    /** True when one box lies entirely inside the other, in either order — see the explanation below. */
+    contained: boolean;
+}
+/**
+ * The point the spans run through: the middle of the inner box when one
+ * contains the other, the middle of the target otherwise.
+ *
+ * Exported because `quadLines` needs the same point to place short labels
+ * away from, and both orders of a containment have to agree on it — or the
+ * same reading would put its labels on different sides depending on which
+ * box was clicked first.
+ */
+export declare function quadCentre(anchor: Box, target: Box): Vec;
+/**
+ * The distances between two boxes, border-box to border-box.
+ *
+ * Two reading modes, because two different questions sit behind them. When
+ * one box lies **inside** the other (in either order, see {@link nesting}),
+ * what you want is the four insets — that is the case where 16/16 makes a
+ * container's padding visible. When the boxes sit **beside** each other,
+ * there are no four insets, only a gap per axis; reporting an inset there
+ * would mean presenting negative numbers as distances.
+ *
+ * Partial overlap counts as "not contained": there, exactly one side would
+ * go negative, and one negative inset next to three positive ones reads as a
+ * measurement fault rather than as the statement "sticks out".
+ *
+ * A target that overlaps the anchor on both axes — the partial-overlap case
+ * above included — reports zero on every side, because there is no gap on
+ * either axis to put a number on. A caller that draws one measurement line
+ * per non-zero side will then correctly draw no lines at all for that pair;
+ * that is the intended reading, not a bug to chase down.
+ */
+export declare function quadDistances(anchor: Box, target: Box): QuadResult;
+export interface QuadSpan {
+    a: Vec;
+    b: Vec;
+    value: number;
+    side: EdgeSide;
+}
+/**
+ * The four distances as drawable spans.
+ *
+ * Each span runs through {@link quadCentre}, so that four simultaneous
+ * measurement lines don't cross each other, and covers exactly the distance
+ * it is labelled with. Nested boxes span from the outer edge in to the inner
+ * one. Disjoint boxes span the gap between the two edges that *face* each
+ * other — measured from the anchor's edge to the target's far one instead,
+ * the line overshot the gap by the whole target, and a heading 4px above its
+ * subtitle drew a 24px line labelled 4.
+ *
+ * Sides with no distance are dropped: a measurement line of length 0 is not
+ * the statement "0 pixels" — it is no statement at all, and two ticks
+ * stacked on top of each other read as a drawing fault.
+ */
+export declare function quadSpans(anchor: Box, target: Box): QuadSpan[];
+/**
+ * Turns spans into the exact shape the template draws, using the same
+ * tick/label helpers the primary drag measurement uses.
+ *
+ * Every hover line is unpinned and carries no snap echoes — an element-to-
+ * element span has no single snapped-to edge to retrace. The value is
+ * divided by `zoom` because `quadSpans`' boxes come from
+ * `getBoundingClientRect` and so arrive in screen pixels, unlike the drag
+ * measurement's points, which are already `.demo-wrap`-local CSS pixels; the
+ * division goes through `safeZoom`, the same guard `toLocal` and `toScreen`
+ * use, so that a zoom of 0 cannot turn the text into `NaN` and a negative
+ * one cannot flip the sign of every reading. The text itself carries no
+ * unit: four `px` values in a tight space would be noise, the same
+ * reasoning `formatMeasure`'s own doc gives.
+ */
+export declare function quadLines(spans: QuadSpan[], centre: Vec, zoom: number): RenderedLine[];
+/**
+ * The same four values as one line of text, for the live region.
+ *
+ * The drawn readout drops the unit and relies on position to say which side
+ * each number belongs to — neither of which survives being read aloud, so
+ * this names the side and keeps the `px`. Without it the four-sided readout
+ * is announced to nobody: the live region only ever carried the drag
+ * measurement, and alt-hover never produces one.
+ */
+export declare function quadSummary(spans: QuadSpan[], zoom: number): string;
+//# sourceMappingURL=measure-quad.d.ts.map

package/dist/app/canvas/measure-quad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measure-quad.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/measure-quad.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAiC,KAAK,YAAY,EAA2B,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5H,4DAA4D;AAC5D,MAAM,WAAW,GAAG;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,+CAA+C;AAC/C,MAAM,WAAW,WAAW;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,GAAG,GAAG,WAAW,CAE/C;AAED,MAAM,WAAW,UAAU;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,qGAAqG;IACrG,SAAS,EAAE,OAAO,CAAC;CACtB;AAyBD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,GAAG,CAIxD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,UAAU,CAyBlE;AAED,MAAM,WAAW,QAAQ;IACrB,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,GAAG,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;CAClB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,QAAQ,EAAE,CA2B9D;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,GAAG,YAAY,EAAE,CAatF;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAInE"}

package/dist/app/canvas/measure-quad.js

@@ -0,0 +1,173 @@
+import { formatMeasure, labelPlacement, safeZoom, tickEndpoints } from './measure-geometry.js';
+/**
+ * A {@link Box} as an SVG `<rect>`.
+ *
+ * Spec §4.5 asks for the anchor and the target to be outlined alongside the
+ * four numbers, and `<rect>` wants an origin and a size where `Box` carries
+ * two opposite corners. Trivial arithmetic, kept out of the component for
+ * the same reason the rest of this module is: the component should hold
+ * nothing but the DOM reads.
+ */
+export function outlineOf(box) {
+    return { x: box.left, y: box.top, width: box.right - box.left, height: box.bottom - box.top };
+}
+/** True when `inner` lies entirely inside `outer`, shared edges included. */
+function within(inner, outer) {
+    return inner.left >= outer.left && inner.top >= outer.top && inner.right <= outer.right && inner.bottom <= outer.bottom;
+}
+/**
+ * The two boxes as container and contained, or `null` when neither holds
+ * the other.
+ *
+ * Which of the two was picked first says nothing about which one is the
+ * container: alt-clicking a label and hovering its card asks exactly the
+ * question that alt-clicking the card and hovering the label does. Checking
+ * only the target-inside-anchor order sent the other one to the disjoint
+ * reading, where two nested boxes overlap on both axes and every side comes
+ * back 0 — two outlines on screen and not a single number between them.
+ */
+function nesting(anchor, target) {
+    if (within(target, anchor))
+        return { outer: anchor, inner: target };
+    if (within(anchor, target))
+        return { outer: target, inner: anchor };
+    return null;
+}
+/**
+ * The point the spans run through: the middle of the inner box when one
+ * contains the other, the middle of the target otherwise.
+ *
+ * Exported because `quadLines` needs the same point to place short labels
+ * away from, and both orders of a containment have to agree on it — or the
+ * same reading would put its labels on different sides depending on which
+ * box was clicked first.
+ */
+export function quadCentre(anchor, target) {
+    const { left, top, right, bottom } = nesting(anchor, target)?.inner ?? target;
+    return { x: (left + right) / 2, y: (top + bottom) / 2 };
+}
+/**
+ * The distances between two boxes, border-box to border-box.
+ *
+ * Two reading modes, because two different questions sit behind them. When
+ * one box lies **inside** the other (in either order, see {@link nesting}),
+ * what you want is the four insets — that is the case where 16/16 makes a
+ * container's padding visible. When the boxes sit **beside** each other,
+ * there are no four insets, only a gap per axis; reporting an inset there
+ * would mean presenting negative numbers as distances.
+ *
+ * Partial overlap counts as "not contained": there, exactly one side would
+ * go negative, and one negative inset next to three positive ones reads as a
+ * measurement fault rather than as the statement "sticks out".
+ *
+ * A target that overlaps the anchor on both axes — the partial-overlap case
+ * above included — reports zero on every side, because there is no gap on
+ * either axis to put a number on. A caller that draws one measurement line
+ * per non-zero side will then correctly draw no lines at all for that pair;
+ * that is the intended reading, not a bug to chase down.
+ */
+export function quadDistances(anchor, target) {
+    const nested = nesting(anchor, target);
+    if (nested) {
+        const { outer, inner } = nested;
+        return {
+            top: inner.top - outer.top,
+            right: outer.right - inner.right,
+            bottom: outer.bottom - inner.bottom,
+            left: inner.left - outer.left,
+            contained: true
+        };
+    }
+    const gapX = Math.max(0, Math.max(anchor.left - target.right, target.left - anchor.right));
+    const gapY = Math.max(0, Math.max(anchor.top - target.bottom, target.top - anchor.bottom));
+    return {
+        top: target.bottom <= anchor.top ? gapY : 0,
+        right: target.left >= anchor.right ? gapX : 0,
+        bottom: target.top >= anchor.bottom ? gapY : 0,
+        left: target.right <= anchor.left ? gapX : 0,
+        contained: false
+    };
+}
+/**
+ * The four distances as drawable spans.
+ *
+ * Each span runs through {@link quadCentre}, so that four simultaneous
+ * measurement lines don't cross each other, and covers exactly the distance
+ * it is labelled with. Nested boxes span from the outer edge in to the inner
+ * one. Disjoint boxes span the gap between the two edges that *face* each
+ * other — measured from the anchor's edge to the target's far one instead,
+ * the line overshot the gap by the whole target, and a heading 4px above its
+ * subtitle drew a 24px line labelled 4.
+ *
+ * Sides with no distance are dropped: a measurement line of length 0 is not
+ * the statement "0 pixels" — it is no statement at all, and two ticks
+ * stacked on top of each other read as a drawing fault.
+ */
+export function quadSpans(anchor, target) {
+    const d = quadDistances(anchor, target);
+    const nested = nesting(anchor, target);
+    const { x: cx, y: cy } = quadCentre(anchor, target);
+    // Per side, the two coordinates the span runs between along its axis —
+    // top and left first, so every span points the same way in both readings.
+    const [top, right, bottom, left] = nested
+        ? [
+            [nested.outer.top, nested.inner.top],
+            [nested.inner.right, nested.outer.right],
+            [nested.inner.bottom, nested.outer.bottom],
+            [nested.outer.left, nested.inner.left]
+        ]
+        : [
+            [target.bottom, anchor.top],
+            [anchor.right, target.left],
+            [anchor.bottom, target.top],
+            [target.right, anchor.left]
+        ];
+    const all = [
+        { a: { x: cx, y: top[0] }, b: { x: cx, y: top[1] }, value: d.top, side: 'top' },
+        { a: { x: right[0], y: cy }, b: { x: right[1], y: cy }, value: d.right, side: 'right' },
+        { a: { x: cx, y: bottom[0] }, b: { x: cx, y: bottom[1] }, value: d.bottom, side: 'bottom' },
+        { a: { x: left[0], y: cy }, b: { x: left[1], y: cy }, value: d.left, side: 'left' }
+    ];
+    return all.filter((s) => s.value !== 0);
+}
+/**
+ * Turns spans into the exact shape the template draws, using the same
+ * tick/label helpers the primary drag measurement uses.
+ *
+ * Every hover line is unpinned and carries no snap echoes — an element-to-
+ * element span has no single snapped-to edge to retrace. The value is
+ * divided by `zoom` because `quadSpans`' boxes come from
+ * `getBoundingClientRect` and so arrive in screen pixels, unlike the drag
+ * measurement's points, which are already `.demo-wrap`-local CSS pixels; the
+ * division goes through `safeZoom`, the same guard `toLocal` and `toScreen`
+ * use, so that a zoom of 0 cannot turn the text into `NaN` and a negative
+ * one cannot flip the sign of every reading. The text itself carries no
+ * unit: four `px` values in a tight space would be noise, the same
+ * reasoning `formatMeasure`'s own doc gives.
+ */
+export function quadLines(spans, centre, zoom) {
+    const z = safeZoom(zoom);
+    return spans.map(({ a, b, value }) => ({
+        a,
+        b,
+        tickA: tickEndpoints(a, b, 'a'),
+        tickB: tickEndpoints(a, b, 'b'),
+        label: labelPlacement(a, b, centre),
+        text: formatMeasure(value / z),
+        pinned: false,
+        echoes: []
+    }));
+}
+/**
+ * The same four values as one line of text, for the live region.
+ *
+ * The drawn readout drops the unit and relies on position to say which side
+ * each number belongs to — neither of which survives being read aloud, so
+ * this names the side and keeps the `px`. Without it the four-sided readout
+ * is announced to nobody: the live region only ever carried the drag
+ * measurement, and alt-hover never produces one.
+ */
+export function quadSummary(spans, zoom) {
+    const z = safeZoom(zoom);
+    return spans.map(({ side, value }) => `${side} ${formatMeasure(value / z)} px`).join(', ');
+}

package/dist/app/canvas/measure-snap.d.ts

@@ -0,0 +1,35 @@
+import { type EdgeSide, type SnapKind } from '../../shared/measure.type.js';
+import type { Vec } from './measure-geometry.js';
+import type { Box } from './measure-quad.js';
+export type Sides = Record<EdgeSide, number>;
+export interface ElementBox {
+    rect: Box;
+    border: Sides;
+    padding: Sides;
+}
+export interface SnapTarget {
+    kind: SnapKind;
+    side: EdgeSide;
+    /** Which coordinate the edge fixes — `left`/`right` are x, the other two are y. */
+    axis: 'x' | 'y';
+    at: number;
+}
+/**
+ * The impure half: translating an element into plain numbers.
+ *
+ * Kept separate from {@link snapTargetsFor} so the edge arithmetic stays
+ * testable without a DOM — the same relationship as between `getBoxModel()`
+ * and its presentation in the box-model plugin.
+ */
+export declare function readElementBox(element: Element): ElementBox;
+/** An element's border, padding and content edges — twelve of them. */
+export declare function snapTargetsFor(box: ElementBox): SnapTarget[];
+/**
+ * The edge a point snaps to — or `null`.
+ *
+ * `null` is not a failure case but an equally valid result: a free point.
+ * A tool that always latched could not measure exactly the things that lie
+ * between edges.
+ */
+export declare function nearestSnap(point: Vec, targets: readonly SnapTarget[], tolerance?: number): SnapTarget | null;
+//# sourceMappingURL=measure-snap.d.ts.map

package/dist/app/canvas/measure-snap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measure-snap.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/measure-snap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAA0B,KAAK,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACpG,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;AAE7C,MAAM,WAAW,UAAU;IACvB,IAAI,EAAE,GAAG,CAAC;IACV,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACvB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,mFAAmF;IACnF,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACd;AAQD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,UAAU,CAS3D;AAED,uEAAuE;AACvE,wBAAgB,cAAc,CAAC,GAAG,EAAE,UAAU,GAAG,UAAU,EAAE,CAwB5D;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,UAAU,EAAE,EAAE,SAAS,GAAE,MAA+B,GAAG,UAAU,GAAG,IAAI,CAcrI"}

package/dist/app/canvas/measure-snap.js

@@ -0,0 +1,63 @@
+import { MEASURE_SNAP_TOLERANCE } from '../../shared/measure.type.js';
+function parseSides(style, prefix, suffix) {
+    const read = (side) => parseFloat(style.getPropertyValue(`${prefix}-${side}${suffix}`)) || 0;
+    return { top: read('top'), right: read('right'), bottom: read('bottom'), left: read('left') };
+}
+/**
+ * The impure half: translating an element into plain numbers.
+ *
+ * Kept separate from {@link snapTargetsFor} so the edge arithmetic stays
+ * testable without a DOM — the same relationship as between `getBoxModel()`
+ * and its presentation in the box-model plugin.
+ */
+export function readElementBox(element) {
+    const style = window.getComputedStyle(element);
+    const r = element.getBoundingClientRect();
+    return {
+        rect: { left: r.left, top: r.top, right: r.right, bottom: r.bottom },
+        border: parseSides(style, 'border', '-width'),
+        padding: parseSides(style, 'padding', '')
+    };
+}
+/** An element's border, padding and content edges — twelve of them. */
+export function snapTargetsFor(box) {
+    const { rect, border, padding } = box;
+    const insets = {
+        border: { top: 0, right: 0, bottom: 0, left: 0 },
+        padding: border,
+        content: {
+            top: border.top + padding.top,
+            right: border.right + padding.right,
+            bottom: border.bottom + padding.bottom,
+            left: border.left + padding.left
+        }
+    };
+    const targets = [];
+    for (const kind of ['border', 'padding', 'content']) {
+        const i = insets[kind];
+        targets.push({ kind, side: 'left', axis: 'x', at: rect.left + i.left });
+        targets.push({ kind, side: 'right', axis: 'x', at: rect.right - i.right });
+        targets.push({ kind, side: 'top', axis: 'y', at: rect.top + i.top });
+        targets.push({ kind, side: 'bottom', axis: 'y', at: rect.bottom - i.bottom });
+    }
+    return targets;
+}
+/**
+ * The edge a point snaps to — or `null`.
+ *
+ * `null` is not a failure case but an equally valid result: a free point.
+ * A tool that always latched could not measure exactly the things that lie
+ * between edges.
+ */
+export function nearestSnap(point, targets, tolerance = MEASURE_SNAP_TOLERANCE) {
+    let best = null;
+    let bestDistance = Infinity;
+    for (const target of targets) {
+        const distance = Math.abs((target.axis === 'x' ? point.x : point.y) - target.at);
+        if (distance <= tolerance && distance < bestDistance) {
+            best = target;
+            bestDistance = distance;
+        }
+    }
+    return best;
+}

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-measure.component.d.ts

@@ -0,0 +1,142 @@
+import { type MeasurePoint } from '../../shared/measure.type.js';
+import { PrismMeasureService } from '../services/prism-measure.service.js';
+import { type RenderedLine, type Vec } from './measure-geometry.js';
+import { type OutlineRect } from './measure-quad.js';
+import * as i0 from "@angular/core";
+/**
+ * The topmost element under a screen point that belongs to the specimen.
+ *
+ * `elementsFromPoint`, the plural one, and the loop are what make this work
+ * at all. The overlay host sits above `.demo-wrap` (see the `z-index` in the
+ * stylesheet and why it has to be there) and is the one layer that takes
+ * pointer events across the whole stage — so the singular `elementFromPoint`
+ * answers the overlay itself for every point over the specimen, `contains`
+ * then rejects it, and snapping and alt-click anchoring both stop working
+ * entirely. Walking the hit list past the overlay's own subtree is what
+ * gives the element actually underneath it.
+ *
+ * The `contains` check stays, and is still not optional: the toolrail and
+ * the viewport grips sit *above* the overlay, so they appear in the hit list
+ * ahead of anything in the specimen. Only the first hit the rendered root
+ * owns is the one the tool may latch onto.
+ */
+export declare function elementUnderPoint(x: number, y: number, root: Element | null): Element | null;
+export declare function echoFor(point: MeasurePoint, screen: Vec): [Vec, Vec] | null;
+/**
+ * Wires the two triggers that tell `lines` its drawn geometry might be
+ * stale, and returns how to undo them.
+ *
+ * A `ResizeObserver` on `stage` and `wrap` covers window resize, panel
+ * resize, and the specimen itself changing size. Resize alone is not enough
+ * because scrolling moves the specimen without resizing anything — a
+ * `ResizeObserver` does not fire on scroll — so `stage` also gets its own
+ * `scroll` listener. Dropping either one leaves the lines drawn at a screen
+ * position the specimen has since left, which is the worst impression a
+ * measuring tool can make.
+ *
+ * Takes the `ResizeObserver` constructor as a parameter instead of reading
+ * the global directly so the wiring stays testable without a real one:
+ * jsdom does not implement `ResizeObserver` at all, the same gap
+ * `elementsFromPoint` has above.
+ */
+export declare function watchGeometry(stage: Element, wrap: Element | null, onChange: () => void, ResizeObserverCtor?: typeof ResizeObserver): () => void;
+/** Everything alt-hover mode puts on screen for one anchor/target pair. */
+export interface HoverReadout {
+    /** The up-to-four spans between the anchor and the hovered element. */
+    lines: RenderedLine[];
+    /** The same values named and spoken, for the live region. Empty when there is nothing to say. */
+    summary: string;
+    /** The anchor's box, drawn dashed (Spec §4.5). Set as soon as an anchor is. */
+    anchor: OutlineRect | null;
+    /** The hovered element's box, drawn solid (Spec §4.5). */
+    target: OutlineRect | null;
+    /**
+     * True while `anchor` is only a prediction: Alt is held, nothing is
+     * anchored yet, and this is what a click would take. Drawn fainter, so the
+     * click visibly firms it up rather than changing nothing.
+     */
+    preview: boolean;
+}
+/**
+ * Keyboard support here only operates a draft that already exists: nudge,
+ * commit, cancel. There is deliberately no keyboard path to *start* one —
+ * Spec §10 calls for Tab to step through the specimen's snap targets as the
+ * accessible substitute for a pointer-down, and that is not built. Tab is
+ * left strictly alone by `onKey` (see its doc, and `nudge`'s) precisely so
+ * it stays free for that mechanism once it exists, rather than being
+ * repurposed here as a stand-in. The `aria-label` below only promises what
+ * this component actually does today; it does not mention Tab, because
+ * nothing happens when a user presses it. What the real interaction should
+ * be is still undecided — a tool covering the whole canvas cannot simply
+ * grab Tab for its own stepping without first deciding how a keyboard user
+ * gets back out, and that is a product decision, not one this task makes.
+ */
+export declare class PrismCanvasMeasureComponent {
+    private readonly el;
+    private readonly destroyRef;
+    private readonly canvas;
+    private readonly renderer;
+    protected readonly measure: PrismMeasureService;
+    /**
+     * Bumped whenever geometry `lines` depends on might have moved without
+     * touching zoom, pins or the draft — see {@link watchGeometry} below.
+     *
+     * `getBoundingClientRect()` inside `origin()`, `hostRect()`,
+     * `specimenCentre()` and `boxOf()` is not itself a reactive signal:
+     * without an explicit nudge like this one, nothing would tell `lines` to
+     * re-run after a scroll or a resize, and the drawn lines would stay put
+     * while the specimen moves out from under them. It covers the host's own
+     * rect too, so reading that per evaluation costs no new trigger.
+     */
+    private readonly geometryTick;
+    /** Origin and zoom the projection runs from, in viewport coordinates. */
+    private origin;
+    /**
+     * The host's own rect — what every drawn coordinate is measured against.
+     *
+     * Read once per `lines()` / `hover()` evaluation and handed to
+     * {@link toHostSpace}, which carries the full explanation of why the
+     * subtraction exists at all.
+     */
+    private hostRect;
+    protected readonly lines: import("@angular/core").Signal<RenderedLine[]>;
+    /**
+     * Everything the alt-hover mode draws, in one evaluation.
+     *
+     * One computed rather than three because all of it comes out of the same
+     * two `getBoundingClientRect()` reads, and splitting it would read the
+     * anchor's box once per consumer on every change detection pass.
+     */
+    protected readonly hover: import("@angular/core").Signal<HoverReadout>;
+    /** The element under the pointer while alt-hovering, `null` otherwise. */
+    private readonly hoverTarget;
+    /**
+     * An element's current rectangle as a {@link Box}, already in host
+     * space.
+     *
+     * Projected here rather than at the four call sites downstream: a box
+     * that reached `quadSpans` in viewport coordinates would produce correct
+     * *distances* — a constant offset cancels in a subtraction — and draw
+     * them in the wrong place, which is the half that is actually visible.
+     */
+    private boxOf;
+    private specimenCentre;
+    /** A pointer point, snapped to the nearest edge, in local coordinates. */
+    private pointAt;
+    /**
+     * Keyboard operation of the running draft.
+     *
+     * `Escape` and `Enter` act regardless of what `nudge` would say about the
+     * key; everything else only matters while a draft is open.
+     * `preventDefault` is called only on the branches that actually consumed
+     * the key — never for `Tab`, which `nudge` returns `null` for and this
+     * method then leaves untouched. Swallowing it here would break keyboard
+     * navigation of the whole shell for the sake of a tool that, as shipped,
+     * has nothing of its own to put Tab to — see `nudge`'s doc.
+     */
+    protected onKey(event: KeyboardEvent): void;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismCanvasMeasureComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismCanvasMeasureComponent, "prism-canvas-measure", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-canvas-measure.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-canvas-measure.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-measure.component.ts"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEzF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAE3E,OAAO,EAMH,KAAK,YAAY,EAKjB,KAAK,GAAG,EACX,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAuB,KAAK,WAAW,EAAiD,MAAM,mBAAmB,CAAC;;AAGzH;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAQ5F;AAWD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAa3E;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE,kBAAkB,GAAE,OAAO,cAA+B,GAAG,MAAM,IAAI,CAWhK;AAED,2EAA2E;AAC3E,MAAM,WAAW,YAAY;IACzB,uEAAuE;IACvE,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,iGAAiG;IACjG,OAAO,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,0DAA0D;IAC1D,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CACpB;AAID;;;;;;;;;;;;;GAaG;AACH,qBAyBa,2BAA2B;IACpC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;IACtD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IACrD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IACzD,SAAS,CAAC,QAAQ,CAAC,OAAO,sBAA+B;IAEzD;;;;;;;;;;OAUG;IACH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAa;IAE1C,yEAAyE;IACzE,OAAO,CAAC,MAAM;IAOd;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ;IAIhB,SAAS,CAAC,QAAQ,CAAC,KAAK,iDAkCrB;IAEH;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,KAAK,+CAsDrB;IAEH,0EAA0E;IAC1E,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAgC;IAE5D;;;;;;;;OAQG;IACH,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,cAAc;IAMtB,0EAA0E;IAC1E,OAAO,CAAC,OAAO;IAqBf;;;;;;;;;;OAUG;IACH,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;;yCArMlC,2BAA2B;2CAA3B,2BAA2B;CAkUvC"}