freshcoat 0.1.0

package/src/bake-text.js

@@ -0,0 +1,321 @@
+// bakeText — lay out a TextNode's already-resolved text into a BakedTextLayout
+// (per-line spans with absolute x, baseline, and vertical placement) the painter
+// draws verbatim. Operates purely on the Node IR — concrete strings +
+// ResolvedFont — through the injected TextEngine (the seam compile measures
+// through).
+//
+// Two paths, chosen by content:
+//   • wrappable — one span, no per-span overrides → full wrap + shrink-to-fit
+//     via engine.layoutText.
+//   • inline — multiple spans (or a single span overriding font/color) → one
+//     shaped, wrapped paragraph via engine.layoutInline when available, else an
+//     independent-span single-line fallback.
+import { getFontMetrics } from "./font-metrics.js";
+// A node's leadingTrim wins over the compile default; both default to true.
+export function resolveLeadingTrim(node, fallback) {
+    return (node.leadingTrim ?? fallback) !== false;
+}
+// Vertical slack a fit:"clip" rect needs so glyph overshoot isn't sliced.
+// - leadingTrim: the cap line tucks against the box top, so the ascent rises
+//   (ascent − capHeight) above it and descenders drop a full descent below the
+//   last baseline (bottom-align seats it at the box bottom).
+// - line-box model: glyphs are already centered via half-leading, so nothing
+//   spills unless the line height is tighter than ascent + descent.
+export function textClipOutset(font, leadingTrim, metricsMap) {
+    const m = fontMetrics(font, metricsMap);
+    if (leadingTrim) {
+        return { top: Math.max(0, m.ascent - m.capHeight), bottom: m.descent };
+    }
+    const halfLeading = (font.size * font.lineHeight - (m.ascent + m.descent)) / 2;
+    const spill = Math.max(0, -halfLeading);
+    return { top: spill, bottom: spill };
+}
+export function bakeText(node, opts) {
+    const engine = opts.textEngine;
+    const leadingTrim = resolveLeadingTrim(node, opts.leadingTrim);
+    const metricsMap = opts.fontMetrics;
+    const pos = node.pos ?? { x: 0, y: 0 };
+    const size = node.size ?? { width: 0, height: 0 };
+    const color = node.color ?? "#000";
+    const align = node.align ?? "left";
+    const verticalAlign = node.verticalAlign ?? "top";
+    const fit = node.fit;
+    const maxLines = node.maxLines;
+    const defaultFont = node.font;
+    const lineHeight = defaultFont.lineHeight;
+    const deviceScale = opts.deviceScale;
+    const spans = normalizeSpans(node);
+    // Wrappable: a single span with no font/color override keeps the full wrap +
+    // shrink path. Anything richer goes through the inline (adjacent) path.
+    const wrappable = spans.length === 1 && !hasOverrides(spans[0]);
+    return wrappable
+        ? layoutWrappable(spans[0].text, defaultFont, color, pos, size, align, verticalAlign, lineHeight, fit, leadingTrim, maxLines, engine, metricsMap, deviceScale)
+        : layoutInline(spans, defaultFont, color, pos, size, align, verticalAlign, leadingTrim, engine, metricsMap, deviceScale);
+}
+// ─────────────── span normalization ───────────────
+function normalizeSpans(node) {
+    if (node.spans && node.spans.length > 0)
+        return node.spans;
+    return [{ text: node.text ?? "" }];
+}
+function hasOverrides(span) {
+    if (span.color !== undefined)
+        return true;
+    const f = span.font;
+    if (!f)
+        return false;
+    return (f.family !== undefined ||
+        f.size !== undefined ||
+        f.weight !== undefined ||
+        f.style !== undefined ||
+        f.letterSpacing !== undefined ||
+        f.lineHeight !== undefined ||
+        f.variations !== undefined);
+}
+// ─────────────── metrics + baseline ───────────────
+// Font ascent/descent (+ line gap, cap height) in target pixels. Prefers the
+// OS/2 sTypo metrics Figma uses (registered from font bytes); falls back to
+// typical ratios when a family isn't registered.
+function fontMetrics(font, metricsMap) {
+    const reg = metricsMap?.[font.family] ?? getFontMetrics(font.family);
+    if (reg) {
+        return {
+            ascent: reg.ascent * font.size,
+            descent: reg.descent * font.size,
+            lineGap: reg.lineGap * font.size,
+            capHeight: reg.capHeight * font.size,
+        };
+    }
+    return {
+        ascent: font.size * 0.8,
+        descent: font.size * 0.2,
+        lineGap: 0,
+        capHeight: font.size * 0.7,
+    };
+}
+// Distance from a line's top to its alphabetic baseline.
+// - default: Figma centers (ascent + descent) in the line height, so the
+//   baseline sits half a leading below the top, plus the ascent.
+// - leadingTrim: cap height is anchored to the box top, so baseline = capHeight.
+function baselineOffset(font, lineHeightPx, leadingTrim, metricsMap) {
+    const m = fontMetrics(font, metricsMap);
+    if (leadingTrim && m.capHeight > 0)
+        return m.capHeight;
+    const halfLeading = (lineHeightPx - (m.ascent + m.descent)) / 2;
+    return halfLeading + m.ascent;
+}
+// ─────────────── wrappable (single-style) path ───────────────
+function layoutWrappable(text, defaultFont, color, pos, size, align, verticalAlign, lineHeight, fit, leadingTrim, maxLines, engine, metricsMap, deviceScale) {
+    const measured = engine.layoutText({
+        value: text,
+        font: {
+            family: defaultFont.family,
+            size: defaultFont.size,
+            weight: defaultFont.weight,
+            style: defaultFont.style,
+            letterSpacing: defaultFont.letterSpacing,
+            variations: defaultFont.variations,
+        },
+        maxWidth: size.width,
+        maxHeight: size.height,
+        lineHeight,
+        fit,
+    });
+    const effFont = {
+        ...defaultFont,
+        size: measured.effectiveFontSize,
+    };
+    // Figma "Truncate text": keep the first maxLines, ellipsize the last on overflow.
+    let mlines = measured.lines;
+    if (maxLines !== undefined && mlines.length > maxLines) {
+        const kept = mlines.slice(0, maxLines);
+        const last = kept[maxLines - 1];
+        const truncated = ellipsize(last.text, effFont, size.width, engine);
+        kept[maxLines - 1] = {
+            ...last,
+            text: truncated,
+            width: engine.measureText(truncated, effFont, null).width,
+        };
+        mlines = kept;
+    }
+    const lineHeightPx = measured.effectiveFontSize * lineHeight;
+    // Per-line advance, pixel-rounded like Figma to avoid sub-px drift down a
+    // paragraph — on the grid the export will be painted on. (No authoring ratio
+    // here — the Node IR is already in target px.)
+    const lineAdvance = snapToDevice(lineHeightPx, deviceScale);
+    const baseOffset = baselineOffset(effFont, lineHeightPx, leadingTrim, metricsMap);
+    const nLines = mlines.length;
+    const contentHeight = leadingTrim
+        ? baseOffset + (nLines - 1) * lineAdvance
+        : lineAdvance * nLines;
+    const startY = startYForVAlign(verticalAlign, pos.y, size.height, contentHeight);
+    const lines = mlines.map((line, i) => {
+        const x = xForAlign(align, pos.x, size.width, line.width);
+        const y = startY + i * lineAdvance;
+        return {
+            text: line.text,
+            y,
+            baseline: y + baseOffset,
+            spans: [{ text: line.text, x, width: line.width, font: effFont, color }],
+        };
+    });
+    return {
+        font: effFont,
+        lines,
+        totalHeight: nLines * lineHeightPx,
+        shrinkApplied: measured.shrinkApplied,
+    };
+}
+// Trim `text` so `text + "…"` fits within maxWidth (binary search on length).
+function ellipsize(text, font, maxWidth, engine) {
+    const ell = "…";
+    if (engine.measureText(`${text}${ell}`, font, null).width <= maxWidth)
+        return `${text}${ell}`;
+    let lo = 0;
+    let hi = text.length;
+    while (lo < hi) {
+        const mid = Math.ceil((lo + hi) / 2);
+        const candidate = `${text.slice(0, mid).trimEnd()}${ell}`;
+        if (engine.measureText(candidate, font, null).width <= maxWidth)
+            lo = mid;
+        else
+            hi = mid - 1;
+    }
+    return `${text.slice(0, lo).trimEnd()}${ell}`;
+}
+const sum = (ns) => ns.reduce((a, b) => a + b, 0);
+// Snap to the pixel grid the scene will actually be painted on.
+function snapToDevice(v, deviceScale) {
+    const s = deviceScale && deviceScale > 0 ? deviceScale : 1;
+    return Math.round(v * s) / s;
+}
+// ─────────────── inline (multi-style) path ───────────────
+function layoutInline(spans, defaultFont, defaultColor, pos, size, align, verticalAlign, leadingTrim, engine, metricsMap, deviceScale) {
+    const resolved = spans.map((s) => {
+        const f = s.font ?? {};
+        const font = {
+            family: f.family ?? defaultFont.family,
+            size: f.size ?? defaultFont.size,
+            weight: f.weight ?? defaultFont.weight,
+            style: f.style ?? defaultFont.style,
+            letterSpacing: f.letterSpacing ?? defaultFont.letterSpacing,
+            lineHeight: f.lineHeight ?? defaultFont.lineHeight,
+            decoration: f.decoration ?? defaultFont.decoration,
+            // A span's axes adjust the element's rather than replacing them.
+            variations: f.variations || defaultFont.variations
+                ? { ...defaultFont.variations, ...f.variations }
+                : undefined,
+        };
+        return { text: s.text, font, color: s.color ?? defaultColor };
+    });
+    const dominantFont = resolved.reduce((d, r) => r.font.size > d.font.size ? r : d).font;
+    const lineHeightPx = dominantFont.size * dominantFont.lineHeight;
+    const baseOffset = baselineOffset(dominantFont, lineHeightPx, leadingTrim, metricsMap);
+    // Engine path: one shaped, wrappable paragraph across all spans (cross-span
+    // shaping + mixed-style wrapping). This module owns vertical placement (line
+    // advance / baseline / vertical-align); the engine returns per-line fragment
+    // geometry only.
+    if (engine.layoutInline) {
+        const shaped = engine.layoutInline(resolved.map((r) => ({ text: r.text, font: r.font })), size.width);
+        // Each line gets the box ITS OWN spans ask for, not the node's tallest.
+        // Line height varies within a text node as freely as size does — a
+        // signature block set to 132% on its first line and Auto on the rest is one
+        // node with two different line boxes — and using a single advance stacks
+        // every later line where the first line's box would have put it.
+        const measuredLines = shaped.lines.map((sl) => {
+            const fonts = sl.fragments.map((fr) => resolved[fr.spanIndex].font);
+            const tallest = fonts.reduce((best, f) => f.size * f.lineHeight > best.size * best.lineHeight ? f : best, fonts[0] ?? dominantFont);
+            const boxPx = tallest.size * tallest.lineHeight;
+            return {
+                shaped: sl,
+                font: tallest,
+                boxPx,
+                // Pixel-rounded like Figma, so a paragraph doesn't drift sub-pixel.
+                advance: snapToDevice(boxPx, deviceScale),
+                baseOffset: baselineOffset(tallest, boxPx, leadingTrim, metricsMap),
+            };
+        });
+        const advances = measuredLines.map((l) => l.advance);
+        const firstOffset = measuredLines[0]?.baseOffset ?? baseOffset;
+        const contentHeight = leadingTrim
+            ? firstOffset + sum(advances.slice(1))
+            : sum(advances) || snapToDevice(lineHeightPx, deviceScale);
+        const startY = startYForVAlign(verticalAlign, pos.y, size.height, contentHeight);
+        let cursorY = startY;
+        const lines = measuredLines.map((ml) => {
+            const sl = ml.shaped;
+            const lineX = xForAlign(align, pos.x, size.width, sl.width);
+            const y = cursorY;
+            cursorY += ml.advance;
+            const spansOut = sl.fragments.map((fr) => ({
+                text: fr.text,
+                x: lineX + fr.x,
+                width: fr.width,
+                font: resolved[fr.spanIndex].font,
+                color: resolved[fr.spanIndex].color,
+            }));
+            return {
+                text: sl.fragments.map((f) => f.text).join(""),
+                y,
+                baseline: y + ml.baseOffset,
+                spans: spansOut,
+            };
+        });
+        return {
+            font: dominantFont,
+            lines,
+            totalHeight: sum(measuredLines.map((l) => l.boxPx)) || lineHeightPx,
+            shrinkApplied: false,
+        };
+    }
+    // Fallback: independent per-span widths, single line, no wrap.
+    const widths = resolved.map((r) => engine.measureSpanWidth(r.text, r.font));
+    const totalWidth = widths.reduce((s, w) => s + w, 0);
+    const startY = startYForVAlign(verticalAlign, pos.y, size.height, lineHeightPx);
+    const lineX = xForAlign(align, pos.x, size.width, totalWidth);
+    let cursor = lineX;
+    const spanLayouts = resolved.map((r, i) => {
+        const out = {
+            text: r.text,
+            x: cursor,
+            width: widths[i],
+            font: r.font,
+            color: r.color,
+        };
+        cursor += widths[i];
+        return out;
+    });
+    return {
+        font: dominantFont,
+        lines: [
+            {
+                text: resolved.map((r) => r.text).join(""),
+                y: startY,
+                baseline: startY + baseOffset,
+                spans: spanLayouts,
+            },
+        ],
+        totalHeight: lineHeightPx,
+        shrinkApplied: false,
+    };
+}
+// ─────────────── alignment ───────────────
+function xForAlign(align, boxX, boxWidth, lineWidth) {
+    if (align === "center")
+        return boxX + (boxWidth - lineWidth) / 2;
+    if (align === "right")
+        return boxX + boxWidth - lineWidth;
+    return boxX;
+}
+function startYForVAlign(va, boxY, boxHeight, layoutHeight) {
+    // When content overflows the box, aligning would push its start above the box
+    // top (middle/bottom) so a clip shows only the tail. Pin to the top instead so
+    // the START of the text stays visible; alignment applies only when it fits.
+    if (layoutHeight > boxHeight)
+        return boxY;
+    if (va === "middle")
+        return boxY + (boxHeight - layoutHeight) / 2;
+    if (va === "bottom")
+        return boxY + boxHeight - layoutHeight;
+    return boxY;
+}

package/src/browser.d.ts

@@ -0,0 +1,7 @@
+import type { PaintCache } from "./paint-cache.js";
+import type { PaintRuntime } from "./types.js";
+export declare function createBrowserEnv(opts?: {
+    fonts?: Map<string, Uint8Array[]>;
+    images?: Map<string, Uint8Array>;
+    cache?: PaintCache;
+}): PaintRuntime;

package/src/browser.js

@@ -0,0 +1,79 @@
+import { resolveFontRequest } from "./font-bytes.js";
+import { makeRuntime } from "./runtime.js";
+async function fetchBytes(url) {
+    const res = await fetch(url);
+    if (!res.ok)
+        throw new Error(`fetch ${url} -> ${res.status}`);
+    return new Uint8Array(await res.arrayBuffer());
+}
+const injectedStylesheets = new Set();
+// The browser runtime: font resolution + fetch image I/O + a DOM Canvas2D host +
+// a native font registry (the DOM's own font loading) under a keep-alive policy
+// (the live <canvas> stays mounted; nothing is auto-disposed).
+export function createBrowserEnv(opts) {
+    return makeRuntime({
+        cache: opts?.cache,
+        resolveFont(req) {
+            return resolveFontRequest(req, opts?.fonts);
+        },
+        async loadImageBytes(src) {
+            return opts?.images?.get(src) ?? fetchBytes(src);
+        },
+        // The browser loads fonts natively — no byte fetch. Google/fontsource
+        // inject a stylesheet the DOM fetches; local files + pre-supplied bytes
+        // become FontFaces. All land in document.fonts for the 2D ctx to resolve.
+        async registerFont(family, res) {
+            if (res.kind === "none")
+                return;
+            if (res.kind === "bytes") {
+                await Promise.all(res.bytes.map((bytes) => addFace(family, bytes)));
+                return;
+            }
+            const d = res.descriptor;
+            if (d.kind === "local") {
+                await Promise.all(d.files.map((f) => addFace(family, `url(${f.src})`)));
+                return;
+            }
+            await injectStylesheet(d.url);
+        },
+        canvas: {
+            createCanvas(w, h) {
+                const c = document.createElement("canvas");
+                c.width = w;
+                c.height = h;
+                return c;
+            },
+            async decodeImage(bytes) {
+                const bmp = await createImageBitmap(new Blob([bytes]));
+                return bmp;
+            },
+            encode(canvas) {
+                // The keep-alive path never encodes server-side; this is a
+                // best-effort sync fallback for callers that want bytes.
+                const url = canvas.toDataURL("image/png");
+                const b64 = url.slice(url.indexOf(",") + 1);
+                return Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));
+            },
+        },
+    }, "keep");
+}
+async function addFace(family, source) {
+    const face = new FontFace(family, source);
+    await face.load();
+    document.fonts.add(face);
+}
+async function injectStylesheet(url) {
+    if (!injectedStylesheets.has(url)) {
+        injectedStylesheets.add(url);
+        await new Promise((resolve) => {
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = url;
+            const done = () => resolve();
+            link.onload = done;
+            link.onerror = done;
+            document.head.appendChild(link);
+        });
+    }
+    await document.fonts.ready;
+}

package/src/canvaskit.d.ts

@@ -0,0 +1,4 @@
+import type { Command, PaintOutput, PaintRuntime } from "./types.js";
+type CK = any;
+export declare function paintScene(ck: CK, commands: Command[], rt: PaintRuntime): Promise<PaintOutput>;
+export {};