domotion-svg 0.1.1

package/dist/border-radius.test.js

@@ -0,0 +1,148 @@
+import { describe, expect, it } from "vitest";
+import { insetCornerRadii, parseCornerRadii, roundedRectPath, roundedRectSvg } from "./dom-to-svg.js";
+describe("parseCornerRadii: shorthand and longhand", () => {
+    it("treats four equal circular corners as uniform", () => {
+        const c = parseCornerRadii({
+            borderTopLeftRadius: "10px 10px",
+            borderTopRightRadius: "10px 10px",
+            borderBottomRightRadius: "10px 10px",
+            borderBottomLeftRadius: "10px 10px",
+        }, 200, 100);
+        expect(c.uniform).toBe(true);
+        expect(c.tl).toEqual({ h: 10, v: 10 });
+    });
+    it("flags asymmetric per-corner radii as non-uniform (DM-300)", () => {
+        const c = parseCornerRadii({
+            borderTopLeftRadius: "10px 10px",
+            borderTopRightRadius: "30px 30px",
+            borderBottomRightRadius: "50px 50px",
+            borderBottomLeftRadius: "70px 70px",
+        }, 200, 100);
+        expect(c.uniform).toBe(false);
+        expect(c.tl.h).toBe(10);
+        expect(c.tr.h).toBe(30);
+        expect(c.br.h).toBe(50);
+        expect(c.bl.h).toBe(70);
+    });
+    it("flags elliptical corners as non-uniform even when all four are equal", () => {
+        const c = parseCornerRadii({
+            borderTopLeftRadius: "50px 20px",
+            borderTopRightRadius: "50px 20px",
+            borderBottomRightRadius: "50px 20px",
+            borderBottomLeftRadius: "50px 20px",
+        }, 400, 80);
+        expect(c.uniform).toBe(false);
+        expect(c.tl).toEqual({ h: 50, v: 20 });
+    });
+    it("falls back to the borderRadius shorthand when longhands aren't captured", () => {
+        const c = parseCornerRadii({ borderRadius: "12px" }, 100, 100);
+        expect(c.uniform).toBe(true);
+        expect(c.tl).toEqual({ h: 12, v: 12 });
+    });
+    it("scales corners down to fit the edge length (CSS corner-overlap §5.5)", () => {
+        // 999px corners on a 200x100 box: top edge has rTL.h + rTR.h = 1998 > 200,
+        // so all corners scale by 200/1998 ≈ 0.1. The vertical sums (rTR.v +
+        // rBR.v = 1998 > 100, etc.) drive a tighter scale of 100/1998 ≈ 0.05,
+        // which wins. Final per-corner radius: ~50 (half the box height).
+        const c = parseCornerRadii({
+            borderTopLeftRadius: "999px 999px",
+            borderTopRightRadius: "999px 999px",
+            borderBottomRightRadius: "999px 999px",
+            borderBottomLeftRadius: "999px 999px",
+        }, 200, 100);
+        expect(c.tl.h).toBeCloseTo(50, 0);
+        expect(c.tl.v).toBeCloseTo(50, 0);
+        expect(c.uniform).toBe(true);
+    });
+});
+describe("insetCornerRadii: inner-corner derivation", () => {
+    it("shrinks each corner by the matching adjacent border-side widths", () => {
+        const c = parseCornerRadii({
+            borderTopLeftRadius: "20px 20px",
+            borderTopRightRadius: "20px 20px",
+            borderBottomRightRadius: "20px 20px",
+            borderBottomLeftRadius: "20px 20px",
+        }, 100, 100);
+        const inner = insetCornerRadii(c, 5, 3, 5, 3);
+        // TL: shrink by left=3 (h) and top=5 (v).
+        expect(inner.tl).toEqual({ h: 17, v: 15 });
+        // TR: shrink by right=3 (h) and top=5 (v).
+        expect(inner.tr).toEqual({ h: 17, v: 15 });
+    });
+    it("clamps shrunk corners to zero rather than going negative", () => {
+        const c = parseCornerRadii({
+            borderTopLeftRadius: "4px 4px",
+            borderTopRightRadius: "4px 4px",
+            borderBottomRightRadius: "4px 4px",
+            borderBottomLeftRadius: "4px 4px",
+        }, 100, 100);
+        const inner = insetCornerRadii(c, 10, 10, 10, 10);
+        expect(inner.tl).toEqual({ h: 0, v: 0 });
+    });
+});
+describe("roundedRectPath: SVG d-attribute geometry", () => {
+    it("emits a clockwise path with one elliptical arc per corner", () => {
+        const c = parseCornerRadii({
+            borderTopLeftRadius: "10px 10px",
+            borderTopRightRadius: "20px 20px",
+            borderBottomRightRadius: "30px 30px",
+            borderBottomLeftRadius: "40px 40px",
+        }, 200, 100);
+        const d = roundedRectPath(0, 0, 200, 100, c);
+        // Starts at (TL.h, 0).
+        expect(d.startsWith("M10,0 ")).toBe(true);
+        // Has 4 elliptical arc commands, one per non-zero corner.
+        const arcs = d.match(/A/g) || [];
+        expect(arcs.length).toBe(4);
+        // Closes the path.
+        expect(d.endsWith(" Z")).toBe(true);
+    });
+    it("omits the arc for a zero-radius corner so adjacent lines meet sharply", () => {
+        const c = parseCornerRadii({
+            borderTopLeftRadius: "0px 0px",
+            borderTopRightRadius: "20px 20px",
+            borderBottomRightRadius: "0px 0px",
+            borderBottomLeftRadius: "20px 20px",
+        }, 100, 100);
+        const d = roundedRectPath(0, 0, 100, 100, c);
+        const arcs = d.match(/A/g) || [];
+        expect(arcs.length).toBe(2);
+    });
+});
+describe("roundedRectSvg: rect-or-path branching", () => {
+    it("emits <rect rx> for uniform circular corners (fast path)", () => {
+        const c = parseCornerRadii({
+            borderTopLeftRadius: "8px 8px",
+            borderTopRightRadius: "8px 8px",
+            borderBottomRightRadius: "8px 8px",
+            borderBottomLeftRadius: "8px 8px",
+        }, 100, 50);
+        const svg = roundedRectSvg(0, 0, 100, 50, c, 'fill="red"');
+        expect(svg.startsWith("<rect ")).toBe(true);
+        expect(svg).toContain('rx="8"');
+        expect(svg).toContain('fill="red"');
+    });
+    it("emits <path> for asymmetric corners (DM-300)", () => {
+        const c = parseCornerRadii({
+            borderTopLeftRadius: "10px 10px",
+            borderTopRightRadius: "30px 30px",
+            borderBottomRightRadius: "50px 50px",
+            borderBottomLeftRadius: "70px 70px",
+        }, 200, 100);
+        const svg = roundedRectSvg(0, 0, 200, 100, c, 'fill="blue"');
+        expect(svg.startsWith("<path ")).toBe(true);
+        expect(svg).toContain('fill="blue"');
+        // Four arcs.
+        expect((svg.match(/A/g) || []).length).toBe(4);
+    });
+    it("emits <path> for elliptical corners (50px / 20px)", () => {
+        const c = parseCornerRadii({
+            borderTopLeftRadius: "50px 20px",
+            borderTopRightRadius: "50px 20px",
+            borderBottomRightRadius: "50px 20px",
+            borderBottomLeftRadius: "50px 20px",
+        }, 400, 80);
+        const svg = roundedRectSvg(0, 0, 400, 80, c, "");
+        expect(svg.startsWith("<path ")).toBe(true);
+    });
+});

package/dist/capture.d.ts

@@ -0,0 +1,193 @@
+/**
+ * Page Capture
+ *
+ * Uses Playwright to navigate to a URL, wait for it to settle,
+ * and capture the DOM as SVG via the dom-to-svg converter.
+ */
+import { type Browser, type LaunchOptions, type Page } from "@playwright/test";
+export interface CaptureOptions {
+    width: number;
+    height: number;
+    mobile?: boolean;
+    /**
+     * Sets the browser context's `prefers-color-scheme` media feature, which
+     * controls how dark-mode-aware sites resolve their CSS. Default behavior
+     * (undefined) follows Playwright's own default of "light".
+     */
+    colorScheme?: "light" | "dark" | "no-preference";
+    /** Authenticate via dev-login API before capturing */
+    devUser?: string;
+    /**
+     * DM-512: when true, fetch every http(s) image URL referenced by the
+     * captured tree and inline it as a `data:` URI in the output SVG. The
+     * resulting SVG loads correctly in image viewers (Preview, QuickLook,
+     * Finder thumbnail, etc.) that don't fetch remote resources from local
+     * files. Adds capture-time network I/O proportional to the number of
+     * unique referenced URLs; per-URL fetch failures are logged via the
+     * capture-warnings pipeline but don't fail the overall capture.
+     * Default: false (URLs pass through verbatim — works in browsers that
+     * fetch from file:// pages but not in offline viewers).
+     */
+    selfContained?: boolean;
+    /**
+     * DM-528: per-URL fetch timeout (ms) for the `selfContained` pre-pass.
+     * Caps the time a stalled CDN host can hold up the capture; total
+     * pre-pass time is bounded by `embedRemoteImagesTimeoutMs` (fetches run
+     * in parallel) rather than the sum across all URLs. Default 10000.
+     */
+    embedRemoteImagesTimeoutMs?: number;
+    /**
+     * DM-529: number of retry attempts for transient failures (5xx /
+     * network-error / timeout) in the `selfContained` pre-pass. 4xx
+     * responses are not retried. Default 1.
+     */
+    embedRemoteImagesRetries?: number;
+    /**
+     * DM-529: backoff delay (ms) between retry attempts in the
+     * `selfContained` pre-pass. Default 500.
+     */
+    embedRemoteImagesRetryBackoffMs?: number;
+    /**
+     * DM-526 / DM-539: when true, run the `resizeEmbeddedImages` pre-pass
+     * after `embedRemoteImages` to downscale each inlined image to its
+     * consumer's render rect × `embedRemoteImagesHiDPIFactor`, re-encoded as
+     * PNG. Yields 50–80 % SVG size reduction on news-site captures with no
+     * visible diff at the captured viewport. No-op unless `selfContained` is
+     * also true (resize only acts on what the embed pass already inlined).
+     * Default false. See `docs/27-image-resize-on-embed.md`.
+     */
+    embedRemoteImagesResize?: boolean;
+    /**
+     * DM-526 / DM-539: hiDPI multiplier applied to each consumer's render rect
+     * before resizing. `2.0` (default) leaves headroom for retina viewing /
+     * zoom; `1.0` produces the smallest output (matches Chromium's painted
+     * resolution at devicePixelRatio: 1); `3.0` covers iPhone-Pro density.
+     * Values < 1 are clamped to 1.
+     */
+    embedRemoteImagesHiDPIFactor?: number;
+}
+/**
+ * Launch Chromium via Playwright, auto-installing the browser binary on first
+ * use if it's missing. Use this instead of importing `chromium` from
+ * `@playwright/test` directly when you want a frictionless first-run
+ * experience for users of your tool.
+ *
+ * The install step is `npx playwright install chromium` and runs synchronously
+ * (stdout / stderr inherited) so the user sees its progress. Subsequent calls
+ * are a normal `chromium.launch()` with no overhead.
+ */
+export declare function launchChromium(opts?: LaunchOptions): Promise<Browser>;
+export declare class DemoRecorder {
+    private browser;
+    private context;
+    private page;
+    private width;
+    private height;
+    private baseUrl;
+    private selfContained;
+    private embedRemoteImagesTimeoutMs;
+    private embedRemoteImagesRetries;
+    private embedRemoteImagesRetryBackoffMs;
+    private embedRemoteImagesResize;
+    private embedRemoteImagesHiDPIFactor;
+    constructor(baseUrl: string, opts: CaptureOptions);
+    init(opts: CaptureOptions): Promise<void>;
+    /** Navigate to a URL and capture the visible DOM as SVG. */
+    captureUrl(path: string, waitMs?: number, idPrefix?: string): Promise<string>;
+    /** Capture the current page state as SVG content. */
+    captureCurrent(idPrefix?: string): Promise<string>;
+    /**
+     * Capture a full-page (scrollable) DOM as SVG.
+     * Returns SVG content that may be taller than the viewport.
+     */
+    captureFullPage(idPrefix?: string): Promise<{
+        svgContent: string;
+        pageHeight: number;
+    }>;
+    /** Get the underlying Playwright page for custom interactions. */
+    getPage(): Page;
+    /** Get the bounding box of an element (for positioning overlays). */
+    getBoundingBox(selector: string): Promise<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null>;
+    close(): Promise<void>;
+}
+/**
+ * Install a `requestfinished` listener that records every font-file URL the
+ * browser fetches into a Set. Returns the set + a detach handle. Pair with
+ * `discoverAndRegisterWebfonts(page, tracker.urls)` after the page loads.
+ *
+ * Needed because `performance.getEntriesByType("resource")` omits
+ * cross-origin fonts that don't send `Timing-Allow-Origin: *` (most CDNs
+ * don't), and most webfonts in the wild are served cross-origin.
+ *
+ * Attach BEFORE navigation so the listener catches the initial fetches.
+ */
+export declare function attachWebfontTracker(page: Page): {
+    urls: Set<string>;
+    detach: () => void;
+};
+/**
+ * Discover all `@font-face` rules in the page's stylesheets, fetch each
+ * font file via the browser context's request API (so cookies / CORS / auth
+ * follow whatever the browser is using), and register the bytes with
+ * `text-to-path.ts` so the renderer can draw with the actual webfont glyphs
+ * instead of falling through to the system-font substitutes.
+ *
+ * Should be called AFTER `await page.evaluate(() => document.fonts.ready)`
+ * — otherwise late-loading fonts may not be in `document.styleSheets` yet.
+ *
+ * Cross-origin stylesheets whose `cssRules` throw a SecurityError are silently
+ * skipped (we can't enumerate their rules from JS). Same-origin sheets and
+ * inline `<style>` blocks always work.
+ *
+ * Caller is responsible for `clearWebfonts()` between captures if needed.
+ * No-op when the page declares no `@font-face` rules.
+ */
+export declare function discoverAndRegisterWebfonts(page: Page, observedFontUrls?: Iterable<string>): Promise<{
+    family: string;
+    weight: number;
+    style: string;
+    url: string;
+    source: "font-face" | "resource";
+    ok: boolean;
+    error?: string;
+}[]>;
+/**
+ * DM-545: parse `@font-face` rules out of a raw CSS text fetched server-side.
+ * Used for cross-origin stylesheets that the page-side `cssRules` walker can't
+ * read. Tolerant scanner — handles top-level `@font-face` and rules nested
+ * inside any number of `@media` / `@supports` / `@layer` / `@container`
+ * blocks (recurses through balanced braces). Returns the same FaceRule shape
+ * the page-side walker emits so the downstream registration loop is uniform.
+ *
+ * Not a full CSS parser — comment-stripping handles `/* … *​/`, but exotic
+ * inputs (custom properties holding @font-face strings, CSSOM-injected rules
+ * that never serialised back to text) aren't covered. Adequate for the
+ * mainstream marketing-site case that motivated the change.
+ */
+export declare function parseFontFaceRulesFromCssText(cssText: string, baseUrl: string): Array<{
+    kind: "font-face";
+    family: string;
+    weight: string;
+    style: string;
+    url: string;
+    urls?: string[];
+    unicodeRange?: Array<[number, number]>;
+}>;
+/**
+ * Parse a CSS `unicode-range` descriptor value (CSS Fonts 4 §4.5) into a list
+ * of inclusive `[from, to]` codepoint intervals. Accepts the three forms:
+ * single (`U+26`), interval (`U+0-7F`), and wildcard (`U+4??`). Multiple
+ * ranges are comma-separated. Returns `undefined` for empty / unparseable
+ * input — callers treat that as the CSS default coverage (U+0..U+10FFFF).
+ *
+ * This is the Node-side twin of the in-page parser inlined inside
+ * `discoverAndRegisterWebfonts`'s `page.evaluate` body. The page-side copy
+ * can't import from here (it runs in the browser context), but the logic must
+ * stay aligned — covered by tests on this exported version.
+ */
+export declare function parseUnicodeRangeDescriptor(value: string): Array<[number, number]> | undefined;