@weasel-js/labkit 1.7.0 → 1.7.2

package/dist/{chunk-WPLAANH4.js → chunk-2N7UBSS2.js}

@@ -1,9 +1,10 @@
-import { screenToWorld } from './chunk-AWQG7FCC.js';
-import { resolveFrame } from './chunk-24W5VEJW.js';
+import { screenToWorld } from './chunk-FG3EXZDV.js';
+import { resolveFrame } from './chunk-ULYYNWGP.js';
+import { boxContainsPoint } from './chunk-XVUKDSYV.js';
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx } from 'react/jsx-runtime';
-import { useVisibleRaf, openPointerSession } from '@weasel-js/core';
+import { useLatest, useVisibleRaf, openPointerSession } from '@weasel-js/core';
 
 function DragGhost({ item, screenPos }) {
   const [mounted, setMounted] = useState(false);
@@ -30,17 +31,15 @@ function useDragDrop({
 }) {
   const [drag, setDrag] = useState(null);
   const dragRef = useRef(null);
-  dragRef.current = drag;
   const pendingPos = useRef(null);
   const sessionRef = useRef(null);
-  const liveRef = useRef({ capability, state, config, setState, emit, view, worldSpec });
-  liveRef.current = { capability, state, config, setState, emit, view, worldSpec };
+  const liveRef = useLatest({ capability, state, config, setState, emit, view, worldSpec });
   const isOverCanvas = useCallback(
     (screenPos) => {
       const el = canvasContainerRef.current;
       if (!el) return false;
       const r = el.getBoundingClientRect();
-      return screenPos.x >= r.left && screenPos.x <= r.right && screenPos.y >= r.top && screenPos.y <= r.bottom;
+      return boxContainsPoint([r.left, r.top, r.right, r.bottom], screenPos.x, screenPos.y);
     },
     [canvasContainerRef]
   );
@@ -56,7 +55,7 @@ function useDragDrop({
         frame
       );
     },
-    [canvasContainerRef]
+    [canvasContainerRef, liveRef]
   );
   const frameLoop = useVisibleRaf(() => {
     const screenPos = pendingPos.current;
@@ -69,7 +68,8 @@ function useDragDrop({
       const world = screenToWorldFromContainer(screenPos);
       if (world) feedback = live.capability.onDragOver(world, active.item, live.state, live.config);
     }
-    setDrag({ ...active, screenPos, feedback });
+    dragRef.current = { ...active, screenPos, feedback };
+    setDrag(dragRef.current);
   });
   const clearDrag = useCallback(() => {
     pendingPos.current = null;
@@ -113,7 +113,7 @@ function useDragDrop({
         onCancel: clearDrag
       });
     },
-    [clearDrag, frameLoop, isOverCanvas, screenToWorldFromContainer]
+    [clearDrag, frameLoop, isOverCanvas, liveRef, screenToWorldFromContainer]
   );
   useEffect(() => () => sessionRef.current?.cancel(), []);
   return { drag, startDrag };
@@ -139,5 +139,5 @@ function Palette({ items, onDragStart, className }) {
 }
 
 export { DragGhost, DragOverlay, Palette, useDragDrop };
-//# sourceMappingURL=chunk-WPLAANH4.js.map
-//# sourceMappingURL=chunk-WPLAANH4.js.map
+//# sourceMappingURL=chunk-2N7UBSS2.js.map
+//# sourceMappingURL=chunk-2N7UBSS2.js.map

package/dist/chunk-2N7UBSS2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dragdrop/DragGhost.tsx","../src/dragdrop/DragDropRuntime.tsx","../src/dragdrop/Palette.tsx"],"names":["useState","useEffect","jsx"],"mappings":"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","file":"chunk-2N7UBSS2.js","sourcesContent":["import { type ReactPortal, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { PaletteItem, Point } from '../instrument/types';\n\n/** Props for `DragGhost`. `screenPos` is in client pixels. */\nexport interface DragGhostProps {\n  item: PaletteItem;\n  screenPos: Point;\n}\n\n/** The dragged item's label, portaled to `document.body` just below-right of\n *  `screenPos`. Renders nothing until mounted, so it is SSR-safe. */\nexport function DragGhost({ item, screenPos }: DragGhostProps): ReactPortal | null {\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n  if (!mounted || typeof document === 'undefined') return null;\n  const style = {\n    left: `${screenPos.x + 12}px`,\n    top: `${screenPos.y + 12}px`,\n  };\n  return createPortal(\n    <div className=\"lk-drag-ghost\" style={style}>\n      <span className=\"lk-drag-ghost__label\">{item.label}</span>\n    </div>,\n    document.body,\n  );\n}\n","import { openPointerSession, type PointerSession, useLatest, useVisibleRaf } from '@weasel-js/core';\nimport { boxContainsPoint } from '@weasel-js/geom';\nimport {\n  type PointerEvent as ReactPointerEvent,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { screenToWorld } from '../canvas/canvasCoords';\nimport { resolveFrame, type WorldSpec } from '../canvas/worldSpec';\nimport type {\n  DragDropCapability,\n  DragFeedback,\n  PaletteItem,\n  Point,\n  ViewTransform,\n} from '../instrument/types';\nimport { DragGhost } from './DragGhost';\n\n/** A palette drag in progress. `screenPos` is in client pixels; `feedback` is\n *  the last `onDragOver` answer — `null` off the canvas or without one. */\nexport interface DragState {\n  item: PaletteItem;\n  screenPos: Point;\n  feedback: DragFeedback | null;\n}\n\n/** Inputs to `useDragDrop`: the capability, the element that counts as the\n *  drop target, and the trial state a drop rewrites. */\nexport interface UseDragDropArgs<TS, TC> {\n  capability: DragDropCapability<TS, TC>;\n  canvasContainerRef: RefObject<HTMLElement | null>;\n  view: ViewTransform;\n  /** The instrument's coordinate system, resolved against the container each\n   *  time a screen point is converted — the container is what knows its size. */\n  worldSpec?: WorldSpec;\n  state: TS;\n  config: TC;\n  setState: (next: TS | ((prev: TS) => TS)) => void;\n  emit: (event: string) => void;\n}\n\n/** The live drag, and the handler a palette item calls on pointerdown. */\nexport interface UseDragDropResult {\n  drag: DragState | null;\n  startDrag: (item: PaletteItem, e: ReactPointerEvent) => void;\n}\n\n/**\n * Run palette-to-canvas drags for a `DragDropCapability`. Releasing over the\n * container converts the pointer to world coordinates, applies `onDrop`'s\n * state and emits `'canvas.itemAdded'`; releasing anywhere else, or a canceled\n * gesture, drops nothing. `onDragOver` is probed at most once per frame.\n */\nexport function useDragDrop<TS, TC>({\n  capability,\n  canvasContainerRef,\n  view,\n  state,\n  config,\n  setState,\n  emit,\n  worldSpec,\n}: UseDragDropArgs<TS, TC>): UseDragDropResult {\n  const [drag, setDrag] = useState<DragState | null>(null);\n  // Owned by the handlers below, which write it alongside every `setDrag`.\n  const dragRef = useRef<DragState | null>(null);\n  /** The move the next frame will resolve. Doubles as the throttle's flag:\n   *  non-null means a frame is already queued. */\n  const pendingPos = useRef<Point | null>(null);\n  const sessionRef = useRef<PointerSession | null>(null);\n\n  /** A session keeps the closure it was opened with, so everything the drop\n   *  reads has to come from here rather than from that closure. */\n  const liveRef = useLatest({ capability, state, config, setState, emit, view, worldSpec });\n\n  const isOverCanvas = useCallback(\n    (screenPos: Point): boolean => {\n      const el = canvasContainerRef.current;\n      if (!el) return false;\n      const r = el.getBoundingClientRect();\n      return boxContainsPoint([r.left, r.top, r.right, r.bottom], screenPos.x, screenPos.y);\n    },\n    [canvasContainerRef],\n  );\n\n  const screenToWorldFromContainer = useCallback(\n    (screenPos: Point): Point | null => {\n      const el = canvasContainerRef.current;\n      if (!el) return null;\n      const r = el.getBoundingClientRect();\n      const frame = resolveFrame(liveRef.current.worldSpec, { width: r.width, height: r.height });\n      return screenToWorld(\n        { x: screenPos.x - r.left, y: screenPos.y - r.top },\n        liveRef.current.view,\n        frame,\n      );\n    },\n    [canvasContainerRef, liveRef],\n  );\n\n  const frameLoop = useVisibleRaf(() => {\n    const screenPos = pendingPos.current;\n    pendingPos.current = null;\n    const active = dragRef.current;\n    if (!active || !screenPos) return;\n    const live = liveRef.current;\n    let feedback: DragFeedback | null = null;\n    if (live.capability.onDragOver && isOverCanvas(screenPos)) {\n      const world = screenToWorldFromContainer(screenPos);\n      if (world) feedback = live.capability.onDragOver(world, active.item, live.state, live.config);\n    }\n    dragRef.current = { ...active, screenPos, feedback };\n    setDrag(dragRef.current);\n  });\n\n  const clearDrag = useCallback(() => {\n    pendingPos.current = null;\n    frameLoop.cancel();\n    sessionRef.current = null;\n    dragRef.current = null;\n    setDrag(null);\n  }, [frameLoop]);\n\n  const startDrag = useCallback(\n    (item: PaletteItem, e: ReactPointerEvent) => {\n      if (sessionRef.current) return;\n      const next: DragState = { item, screenPos: { x: e.clientX, y: e.clientY }, feedback: null };\n      dragRef.current = next;\n      setDrag(next);\n      sessionRef.current = openPointerSession(e.currentTarget, e, {\n        onMove: (ev) => {\n          const screenPos = { x: ev.clientX, y: ev.clientY };\n          const current = dragRef.current;\n          if (!current) return;\n          if (pendingPos.current !== null) {\n            // A frame is already queued: keep the ghost under the cursor and\n            // let that frame probe the drop target from the newest position.\n            pendingPos.current = screenPos;\n            dragRef.current = { ...current, screenPos };\n            setDrag(dragRef.current);\n            return;\n          }\n          pendingPos.current = screenPos;\n          frameLoop.request();\n        },\n        onEnd: (ev) => {\n          const screenPos = { x: ev.clientX, y: ev.clientY };\n          const active = dragRef.current;\n          clearDrag();\n          if (!active || !isOverCanvas(screenPos)) return;\n          const world = screenToWorldFromContainer(screenPos);\n          if (!world) return;\n          const live = liveRef.current;\n          live.setState(live.capability.onDrop(world, active.item, live.state, live.config));\n          live.emit('canvas.itemAdded');\n        },\n        // An interrupted gesture never named a destination, so it drops nothing.\n        onCancel: clearDrag,\n      });\n    },\n    [clearDrag, frameLoop, isOverCanvas, liveRef, screenToWorldFromContainer],\n  );\n\n  useEffect(() => () => sessionRef.current?.cancel(), []);\n\n  return { drag, startDrag };\n}\n\n/** Props for `DragOverlay`. */\nexport interface DragOverlayProps {\n  drag: DragState | null;\n}\n\n/** The ghost for `drag`, or nothing when no drag is live. */\nexport function DragOverlay({ drag }: DragOverlayProps) {\n  if (!drag) return null;\n  return <DragGhost item={drag.item} screenPos={drag.screenPos} />;\n}\n","import type { PointerEvent as ReactPointerEvent } from 'react';\nimport type { PaletteItem } from '../instrument/types';\n\n/** Props for `Palette`. `onDragStart` is usually `useDragDrop`'s `startDrag`. */\nexport interface PaletteProps {\n  items: PaletteItem[];\n  onDragStart: (item: PaletteItem, e: ReactPointerEvent) => void;\n  className?: string;\n}\n\n/** One button per item, each starting a drag on pointerdown. */\nexport function Palette({ items, onDragStart, className }: PaletteProps) {\n  return (\n    <div className={className ? `lk-palette ${className}` : 'lk-palette'}>\n      {items.map((item) => (\n        <button\n          type=\"button\"\n          key={item.id}\n          className=\"lk-palette__item\"\n          onPointerDown={(e) => {\n            e.preventDefault();\n            onDragStart(item, e);\n          }}\n        >\n          <span className=\"lk-palette__label\">{item.label}</span>\n        </button>\n      ))}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-275JRRVD.js → chunk-E23Q6A3Y.js}

@@ -1,22 +1,7 @@
-import { resolveScreenLength, SCRIPT_METRICS, boundsOfPath, getMarker, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, resolveAlign, getPaintKind, resolveMarkerSize } from '@weasel-js/core';
+import { identity, multiply } from './chunk-XVUKDSYV.js';
+import { resolveScreenLength, scriptMetricsFor, boundsOfPath, getMarker, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, resolveAlign, resolveRunFace, resolveTextStyle, parseColor, rgbaToHex, getPaintKind, resolveMarkerSize } from '@weasel-js/core';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
-// ../svg/dist/index.js
-
-// ../geom/dist/index.js
-function identity() {
-  return [1, 0, 0, 1, 0, 0];
-}
-function multiply(m, n) {
-  return [
-    m[0] * n[0] + m[2] * n[1],
-    m[1] * n[0] + m[3] * n[1],
-    m[0] * n[2] + m[2] * n[3],
-    m[1] * n[2] + m[3] * n[3],
-    m[0] * n[4] + m[2] * n[5] + m[4],
-    m[1] * n[4] + m[3] * n[5] + m[5]
-  ];
-}
 var IDENTITY_MATRIX = identity();
 function isIdentity(m, eps = 1e-9) {
   return Math.abs(m[0] - 1) < eps && Math.abs(m[1]) < eps && Math.abs(m[2]) < eps && Math.abs(m[3] - 1) < eps && Math.abs(m[4]) < eps && Math.abs(m[5]) < eps;
@@ -31,10 +16,201 @@ function trimNumber(n) {
   if (Number.isInteger(r)) return String(r);
   return String(r);
 }
-function anchorOffset(style, width) {
+function anchorOffset(style, width2) {
   const edge = resolveAlign(style?.align ?? "left", style?.direction ?? "ltr");
-  return edge === "center" ? width / 2 : edge === "right" ? width : 0;
+  return edge === "center" ? width2 / 2 : edge === "right" ? width2 : 0;
+}
+function parsePaintAttr(raw) {
+  if (raw == null) return null;
+  const s = raw.trim();
+  if (s === "") return null;
+  if (s === "none") return { kind: "none" };
+  if (s.toLowerCase() === "currentcolor") {
+    return { kind: "solid", color: "#000000", alpha: 1 };
+  }
+  const urlMatch = /^url\(\s*#([^)\s]+)\s*\)(.*)$/.exec(s);
+  if (urlMatch) {
+    const out = { kind: "ref", id: urlMatch[1] };
+    const rest = urlMatch[2].trim();
+    if (rest !== "" && rest !== "none") {
+      const fallback = parsePaintAttr(rest);
+      if (fallback?.kind === "solid") {
+        out.fallback = { color: fallback.color, alpha: fallback.alpha };
+      }
+    }
+    return out;
+  }
+  try {
+    const [r, g, b, a] = parseColor(s);
+    return { kind: "solid", color: rgbaToHex([r, g, b]), alpha: a };
+  } catch {
+    return null;
+  }
+}
+var TEXT_TRANSFORMS = /* @__PURE__ */ new Set(["none", "uppercase", "lowercase", "capitalize"]);
+var DIMENSION = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)$/i;
+function dimension(v) {
+  const m = DIMENSION.exec(v);
+  return m ? { n: Number(m[1]), unit: m[2].toLowerCase() } : void 0;
+}
+var clamp01 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
+var length = (native, coercedAs) => (v, warn, prop) => {
+  const d = dimension(v);
+  if (!d) return void 0;
+  if (d.unit && !native.includes(d.unit)) {
+    warn(`${prop} "${v}" uses unit "${d.unit}", which is not converted; treated as ${d.n} ${coercedAs}`);
+  }
+  return d.n;
+};
+var worldLength = length(["px"], "world units");
+var keyword2 = (...words) => (v) => words.includes(v) ? v : void 0;
+var isCurrentColor = (v) => v.toLowerCase() === "currentcolor";
+function readPaint(v) {
+  if (v === "context-fill") return { kind: "context", of: "fill" };
+  if (v === "context-stroke") return { kind: "context", of: "stroke" };
+  return parsePaintAttr(v) ?? void 0;
+}
+function readRatio(v) {
+  const d = dimension(v);
+  if (!d || d.unit !== "" && d.unit !== "%") return void 0;
+  return clamp01(d.unit === "%" ? d.n / 100 : d.n);
+}
+function readSolidColor(v, warn, prop) {
+  const parsed = parsePaintAttr(v);
+  if (parsed?.kind !== "solid") return void 0;
+  if (isCurrentColor(v)) warn(`${prop}="${v}" is read as black; it is not resolved against color`);
+  return parsed;
+}
+function readMarkerRef(v) {
+  if (v === "none") return null;
+  return /^url\(\s*#([^)\s]+)\s*\)$/.exec(v)?.[1];
+}
+function readLinecap(v, warn) {
+  const cap = keyword2("butt", "round", "square")(v);
+  if (!cap) warn(`unsupported stroke-linecap: ${v}`);
+  return cap;
+}
+function readLinejoin(v, warn) {
+  const join = keyword2("miter", "round", "bevel")(v);
+  if (join) return join;
+  if (v === "arcs" || v === "miter-clip") {
+    warn(`stroke-linejoin "${v}" not supported; falling back to miter`);
+    return "miter";
+  }
+  warn(`unsupported stroke-linejoin: ${v}`);
+  return void 0;
+}
+function readDashArray(v, warn) {
+  if (v === "none" || v === "") return null;
+  const nums = [];
+  for (const t of v.split(/[\s,]+/).filter(Boolean)) {
+    const d = dimension(t);
+    if (!d || d.unit !== "" && d.unit !== "px" || d.n < 0) {
+      warn(`unrecognized stroke-dasharray: ${v}`);
+      return void 0;
+    }
+    nums.push(d.n);
+  }
+  return nums.length % 2 === 1 ? [...nums, ...nums] : nums;
+}
+function readMiterLimit(v, warn) {
+  const d = dimension(v);
+  if (d && d.unit === "" && d.n >= 1) return d.n;
+  warn(`unrecognized stroke-miterlimit: ${v}`);
+  return void 0;
+}
+function readColor(v) {
+  return isCurrentColor(v) || parsePaintAttr(v)?.kind === "solid" ? v : void 0;
 }
+function readFontSize(v, warn, prop) {
+  const d = dimension(v);
+  if (d?.unit === "%") return { fontScale: d.n / 100 };
+  const n = worldLength(v, warn, prop);
+  return n == null ? void 0 : { fontSize: n };
+}
+function readFontWeight(v) {
+  if (v === "normal" || v === "bold" || v === "bolder") return v;
+  const d = dimension(v);
+  return d && d.unit === "" && d.n >= 1 && d.n <= 1e3 ? d.n : void 0;
+}
+function readFontStyle(v, warn) {
+  if (v === "normal" || v === "italic") return v;
+  if (v === "oblique") {
+    warn('font-style "oblique" is read as italic');
+    return "italic";
+  }
+  return void 0;
+}
+function readLetterSpacing(v, warn, prop) {
+  return v === "normal" ? null : worldLength(v, warn, prop);
+}
+function readDecoration(v, warn) {
+  const out = {};
+  for (const t of v.toLowerCase().split(/\s+/)) {
+    if (t === "underline") out.underline = true;
+    else if (t === "line-through") out.strikethrough = true;
+    else if (t === "overline") out.overline = true;
+    else if (t !== "none" && t !== "blink") warn(`text-decoration "${v}": "${t}" is not modeled; dropped`);
+  }
+  return out;
+}
+function readFontVariant(v, warn) {
+  let out;
+  for (const t of v.toLowerCase().split(/\s+/)) {
+    if (t === "small-caps" || t === "normal") out = t;
+    else if (t) warn(`font-variant "${v}": "${t}" is not modeled; dropped`);
+  }
+  return out;
+}
+function readTextTransform(v) {
+  const t = v.toLowerCase();
+  return TEXT_TRANSFORMS.has(t) ? t : void 0;
+}
+var emLength = length(["em"], "em");
+function readBaselineShift(v, warn, prop) {
+  const k = v.toLowerCase();
+  if (k === "super" || k === "sub") return { script: k };
+  if (k === "baseline") return {};
+  const d = dimension(v);
+  if (d?.unit === "%") return d.n === 0 ? {} : { baselineShift: d.n / 100 };
+  const n = emLength(v, warn, prop);
+  if (n == null) return void 0;
+  return n === 0 ? {} : { baselineShift: n };
+}
+var inherited = (read) => ({ inherits: true, read });
+var own = (read) => ({ inherits: false, read });
+var PROPERTIES = {
+  "fill": inherited(readPaint),
+  "fill-opacity": inherited(readRatio),
+  "fill-rule": inherited(keyword2("nonzero", "evenodd")),
+  "stroke": inherited(readPaint),
+  "stroke-width": inherited(worldLength),
+  "stroke-opacity": inherited(readRatio),
+  "stroke-linecap": inherited(readLinecap),
+  "stroke-linejoin": inherited(readLinejoin),
+  "stroke-dasharray": inherited(readDashArray),
+  "stroke-miterlimit": inherited(readMiterLimit),
+  "marker-start": inherited(readMarkerRef),
+  "marker-mid": inherited(readMarkerRef),
+  "marker-end": inherited(readMarkerRef),
+  "color": inherited(readColor),
+  "font-size": inherited(readFontSize),
+  "font-family": inherited((v) => v.length > 0 ? v : void 0),
+  "font-weight": inherited(readFontWeight),
+  "font-style": inherited(readFontStyle),
+  "text-anchor": inherited(keyword2("start", "middle", "end")),
+  "letter-spacing": inherited(readLetterSpacing),
+  "text-decoration": inherited(readDecoration),
+  "direction": inherited(keyword2("ltr", "rtl")),
+  "text-transform": inherited(readTextTransform),
+  "font-variant": inherited(readFontVariant),
+  "opacity": own(readRatio),
+  "stop-color": own(readSolidColor),
+  "stop-opacity": own(readRatio),
+  "baseline-shift": own(readBaselineShift),
+  "vector-effect": own(keyword2("none", "non-scaling-stroke"))
+};
+Object.keys(PROPERTIES).filter((p) => PROPERTIES[p].inherits);
 function patternSpecOf(paint) {
   return "tile" in paint.pattern ? paint.pattern : null;
 }
@@ -53,7 +229,11 @@ function patternXml(id, paint, onWarn) {
     `width="${trimNumber(geometry.size)}"`,
     `height="${trimNumber(geometry.size)}"`
   ];
-  if (origin.x !== 0 || origin.y !== 0) {
+  const [a, b, c, d] = paint.transform ?? [1, 0, 0, 1];
+  const placement = formatMatrix([a, b, c, d, origin.x, origin.y]);
+  if (paint.transform && !isIdentity([a, b, c, d, 0, 0]) && placement) {
+    attrs.push(`patternTransform="${placement}"`);
+  } else if (origin.x !== 0 || origin.y !== 0) {
     attrs.push(`x="${trimNumber(origin.x)}"`, `y="${trimNumber(origin.y)}"`);
   }
   attrs.push(`data-weasel-tile="${escapeAttr(JSON.stringify(spec))}"`);
@@ -90,8 +270,8 @@ function escapeAttr(s) {
 }
 function serializePathD(path) {
   if (path.kind === "rect") {
-    const { x, y, width, height } = path;
-    return `M${trimNumber(x)} ${trimNumber(y)}h${trimNumber(width)}v${trimNumber(height)}h${trimNumber(-width)}Z`;
+    const { x, y, width: width2, height: height2 } = path;
+    return `M${trimNumber(x)} ${trimNumber(y)}h${trimNumber(width2)}v${trimNumber(height2)}h${trimNumber(-width2)}Z`;
   }
   const cmds = path.commands;
   const xs = path.coords;
@@ -176,6 +356,10 @@ var PaintServerRegistry = class {
     if (hasNativeSvgForm(paint)) return `url(#${id})`;
     return `url(#${id}) ${paintFallback(paint)}`;
   }
+  /** The paint kind of each registered paint, once, in first-use order. */
+  paintKinds() {
+    return [...new Set(this.order.map((paint) => paint.fill ?? "solid"))];
+  }
   /** Whether any registered paint serializes outside SVG's own vocabulary, so
    *  the root has to declare {@link WEASEL_NS}. */
   usesPrivateNamespace() {
@@ -258,9 +442,10 @@ function paintServerXml(id, paint, onWarn) {
   if (paint.fill === "pattern") return patternXml(id, paint, onWarn);
   const builtin = gradientXml(id, paint);
   if (builtin) return builtin;
-  const custom = getPaintKind(paint.fill)?.toSvg?.(id, paint);
+  const kind = getPaintKind(paint.fill);
+  const custom = kind?.toSvg?.(id, paint);
   if (custom) return custom;
-  onWarn?.(`${paint.fill} fill has no vector form \u2014 omitted from <defs>`);
+  onWarn?.(kind ? `${paint.fill} fill has no vector form \u2014 omitted from <defs>` : `${paint.fill} fill is not registered \u2014 omitted from <defs>; a kind loaded on demand needs \`await warmSvg(nodes)\` before a synchronous export`);
   return "";
 }
 function gradientUnitsAttr(units) {
@@ -508,19 +693,19 @@ function svgPaintOpacity(paint) {
 function opacityAttr(name, v) {
   return v != null && v !== 1 ? [`${name}="${trimNumber(v)}"`] : [];
 }
-function strokeWidthAttrs(width) {
-  if (typeof width === "number") return [`stroke-width="${trimNumber(width)}"`];
-  return [`stroke-width="${trimNumber(width.px)}"`, 'vector-effect="non-scaling-stroke"'];
+function strokeWidthAttrs(width2) {
+  if (typeof width2 === "number") return [`stroke-width="${trimNumber(width2)}"`];
+  return [`stroke-width="${trimNumber(width2.px)}"`, 'vector-effect="non-scaling-stroke"'];
 }
 function coreStrokeAttrs(stroke, registry, warn) {
   const paint = stroke?.paint;
   if (!stroke || !paint) return [];
-  const width = stroke.width ?? 1;
-  if (!((typeof width === "object" ? width.px : width) > 0)) return [];
+  const width2 = stroke.width ?? 1;
+  if (!((typeof width2 === "object" ? width2.px : width2) > 0)) return [];
   warnStrokeAlign(stroke.align, warn);
   const attrs = [`stroke="${"color" in paint ? paint.color : registry.ref(paint)}"`];
   attrs.push(...opacityAttr("stroke-opacity", paint.opacity));
-  attrs.push(...strokeWidthAttrs(width));
+  attrs.push(...strokeWidthAttrs(width2));
   if (stroke.cap) attrs.push(`stroke-linecap="${stroke.cap}"`);
   if (stroke.join) attrs.push(`stroke-linejoin="${stroke.join}"`);
   if (stroke.dash && stroke.dash.length > 0) {
@@ -621,12 +806,14 @@ function textXml(node, registry, namespaces, warn) {
   if (style?.fontFamily) attrs.push(`font-family="${escapeAttr2(style.fontFamily)}"`);
   if (style?.fontWeight != null) attrs.push(`font-weight="${String(style.fontWeight)}"`);
   if (style?.fontStyle && style.fontStyle !== "normal") attrs.push(`font-style="${style.fontStyle}"`);
+  if (style?.fontVariantCaps === "small-caps") attrs.push('font-variant="small-caps"');
   const direction = style?.direction ?? "ltr";
   if (direction === "rtl") attrs.push('direction="rtl"');
   if (style?.align != null || direction === "rtl") {
     const align = style?.align ?? "left";
-    const anchor = align === "center" ? "middle" : align === "start" ? "start" : align === "end" ? "end" : align === "left" === (direction === "ltr") ? "start" : "end";
+    const anchor = align === "center" ? "middle" : align === "start" || align === "justify" ? "start" : align === "end" ? "end" : align === "left" === (direction === "ltr") ? "start" : "end";
     if (anchor !== "start") attrs.push(`text-anchor="${anchor}"`);
+    if (align === "justify") attrs.push('data-weasel-align="justify"');
   }
   if (style?.letterSpacing != null && style.letterSpacing !== 0) {
     attrs.push(`letter-spacing="${trimNumber(resolveScreenLength(style.letterSpacing, 1))}"`);
@@ -661,17 +848,25 @@ function textXml(node, registry, namespaces, warn) {
     const deg = node.rotation * 180 / Math.PI;
     attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
   }
-  const body = node.runs && node.runs.length > 0 ? node.runs.map((r) => runXml(r, registry, warn)).join("") : escapeText(node.text);
+  const body = node.runs && node.runs.length > 0 ? node.runs.map((r) => runXml(r, style, registry, warn)).join("") : escapeText(node.text);
   const metaAttrs = metaAttrsXml(node.meta, namespaces);
   const metaEls = metaElementsXml(node.meta, namespaces);
   return `<text ${attrs.join(" ")}${metaAttrs}>${body}${metaEls}</text>`;
 }
-function runXml(run, registry, warn) {
+function scriptSizeFace(run, style) {
+  if (run.script == null || run.baselineShift == null) return void 0;
+  const face = resolveRunFace(run, resolveTextStyle(style));
+  return { family: face.fontFamily, weight: face.fontWeight, style: face.fontStyle };
+}
+function runXml(run, style, registry, warn) {
   const attrs = [];
-  if (run.bold) attrs.push(`font-weight="700"`);
+  if (run.fontWeight != null) attrs.push(`font-weight="${run.fontWeight}"`);
+  else if (run.bold) attrs.push(`font-weight="700"`);
   if (run.italic) attrs.push(`font-style="italic"`);
+  if (run.fontVariantCaps) attrs.push(`font-variant="${run.fontVariantCaps}"`);
   if (run.fontFamily) attrs.push(`font-family="${escapeAttr2(run.fontFamily)}"`);
-  const presetScale = run.script != null && run.baselineShift != null ? SCRIPT_METRICS[run.script].size : void 0;
+  const face = scriptSizeFace(run, style);
+  const presetScale = face && run.script ? scriptMetricsFor(face.family, face.weight, face.style)[run.script].size : void 0;
   const scale = run.fontScale ?? presetScale;
   if (run.fontSize != null) attrs.push(`font-size="${trimNumber(resolveScreenLength(run.fontSize, 1))}"`);
   else if (scale != null) attrs.push(`font-size="${trimNumber(scale * 100)}%"`);
@@ -724,5 +919,5 @@ function pathBounds(path) {
 }
 
 export { nativeSvgKind, nativeSvgSpace, serializeSvg, tilePreviewCssUrl };
-//# sourceMappingURL=chunk-275JRRVD.js.map
-//# sourceMappingURL=chunk-275JRRVD.js.map
+//# sourceMappingURL=chunk-E23Q6A3Y.js.map
+//# sourceMappingURL=chunk-E23Q6A3Y.js.map