@weasel-js/labkit 1.7.0 → 1.7.1

package/dist/{chunk-7BO7HNGF.js → chunk-CEGFXTBD.js}

@@ -1,68 +1,15 @@
-import { CanvasStackContext } from './chunk-CQLQPQ4P.js';
-import { S, y } from './chunk-MIM5R4ZT.js';
-import { useRef, useCallback, useEffect, useState, useContext } from 'react';
+import { CanvasStackContext } from './chunk-ZQIHJXP4.js';
+import { c2, S, y } from './chunk-4KSC7NXL.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useVisibleRaf, normalizeZoom } from '@weasel-js/core';
+import { useState, useRef, useEffect, useContext } from 'react';
 
-function nextIndex(current, key, count, orientation = "horizontal") {
-  if (count === 0) return null;
-  const forward = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
-  const back = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
-  if (key === forward) return (current + 1) % count;
-  if (key === back) return (current - 1 + count) % count;
-  if (key === "Home") return 0;
-  if (key === "End") return count - 1;
-  return null;
-}
-function useRovingTabIndex(orientation = "horizontal") {
-  const ref = useRef(null);
-  const stop = useRef(0);
-  const items = useCallback(
-    () => ref.current ? Array.from(
-      ref.current.querySelectorAll('button:not([disabled]), [role="button"]')
-    ) : [],
-    []
-  );
-  const setTabStop = useCallback(
-    (index) => {
-      const found = items();
-      const at = Math.min(Math.max(index, 0), Math.max(found.length - 1, 0));
-      stop.current = at;
-      for (const [i, el] of found.entries()) el.tabIndex = i === at ? 0 : -1;
-    },
-    [items]
-  );
-  useEffect(() => {
-    const resync = () => {
-      const focused = items().indexOf(document.activeElement);
-      setTabStop(focused === -1 ? stop.current : focused);
-    };
-    resync();
-    if (!ref.current) return;
-    const mo = new MutationObserver(resync);
-    mo.observe(ref.current, { childList: true, subtree: true, attributeFilter: ["disabled"] });
-    return () => mo.disconnect();
-  }, [items, setTabStop]);
-  const onKeyDown = useCallback(
-    (e) => {
-      const found = items();
-      const current = found.indexOf(document.activeElement);
-      const next = nextIndex(current === -1 ? 0 : current, e.key, found.length, orientation);
-      if (next === null) return;
-      e.preventDefault();
-      found[next]?.focus();
-      setTabStop(next);
-    },
-    [items, setTabStop, orientation]
-  );
-  return { ref, onKeyDown };
-}
 function Toolbar({ children, "aria-label": ariaLabel }) {
-  const { ref, onKeyDown } = useRovingTabIndex();
+  const { rootRef, onKeyDown } = c2({ orientation: "horizontal" });
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
+      ref: rootRef,
       className: "lk-toolbar",
       role: "toolbar",
       "aria-label": ariaLabel,
@@ -265,6 +212,6 @@ function Section({ children, end }) {
 }
 StatusBar.Section = Section;
 
-export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl, useRovingTabIndex };
-//# sourceMappingURL=chunk-7BO7HNGF.js.map
-//# sourceMappingURL=chunk-7BO7HNGF.js.map
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl };
+//# sourceMappingURL=chunk-CEGFXTBD.js.map
+//# sourceMappingURL=chunk-CEGFXTBD.js.map

package/dist/chunk-CEGFXTBD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/primitives/Toolbar.tsx","../src/primitives/fpsAverage.ts","../src/primitives/FpsMeter.tsx","../src/primitives/ScaleIndicator.tsx","../src/primitives/ZoomControl.tsx","../src/primitives/StatusBar.tsx"],"names":["c","jsx","jsxs"],"mappings":"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","file":"chunk-CEGFXTBD.js","sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react';\nimport { useRovingTabIndex } from '../passthrough/weasel-ui';\n\n/** Props for `<Toolbar>`. */\nexport interface ToolbarProps {\n  children: ReactNode;\n  /** Names the toolbar for assistive tech. Required by the APG pattern when a\n   *  view holds more than one. */\n  'aria-label'?: string;\n}\n\n/** A horizontal bar of controls. Fill it with `<Toolbar.Title>`,\n *  `<Toolbar.Group>`, `<Toolbar.Button>` and `<Toolbar.Spacer>`. */\nexport function Toolbar({ children, 'aria-label': ariaLabel }: ToolbarProps) {\n  const { rootRef, onKeyDown } = useRovingTabIndex<HTMLDivElement>({ orientation: 'horizontal' });\n  return (\n    <div\n      ref={rootRef}\n      className=\"lk-toolbar\"\n      role=\"toolbar\"\n      aria-label={ariaLabel}\n      onKeyDown={onKeyDown}\n    >\n      {children}\n    </div>\n  );\n}\n\ninterface TitleProps {\n  children: ReactNode;\n}\nfunction Title({ children }: TitleProps) {\n  return <span className=\"lk-toolbar-title\">{children}</span>;\n}\n\n/** Props for `<Toolbar.Group>`. */\nexport interface ToolbarGroupProps {\n  children: ReactNode;\n  /** Pushes this group, and everything after it, to the far end. */\n  end?: boolean;\n  'aria-label'?: string;\n}\n\n/** Related controls, kept tight and ruled off from their neighbors. Group\n *  rather than separate with repeated `<Toolbar.Spacer>`: consecutive spacers\n *  share the free space, so every gap collapses to the same slack and the bar\n *  reads as one undifferentiated run. */\nfunction Group({ children, end, 'aria-label': ariaLabel }: ToolbarGroupProps) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: a group inside role=\"toolbar\" is the APG pattern; the rule is local and cannot see the parent. <fieldset> means form controls, needs a <legend> to be named, and its UA min-width breaks flex children.\n    <div\n      className={`lk-toolbar-group${end ? ' lk-toolbar-group--end' : ''}`}\n      role=\"group\"\n      aria-label={ariaLabel}\n    >\n      {children}\n    </div>\n  );\n}\n\n/** Props for `<Toolbar.Button>`. */\nexport interface ToolbarButtonProps {\n  children: ReactNode;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  disabled?: boolean;\n  title?: string;\n  /** Required when `children` is an icon with no text of its own. */\n  'aria-label'?: string;\n  /** `danger` reddens on hover — for actions that discard work. */\n  variant?: 'default' | 'danger';\n  /** Square, for a button whose whole content is one glyph. */\n  iconOnly?: boolean;\n  /** Makes this a toggle: `aria-pressed`, and held down while true. */\n  pressed?: boolean;\n}\n\nfunction Button({\n  children,\n  onClick,\n  disabled,\n  title,\n  'aria-label': ariaLabel,\n  variant = 'default',\n  iconOnly,\n  pressed,\n}: ToolbarButtonProps) {\n  const cls = [\n    'lk-toolbar-button',\n    variant === 'danger' && 'lk-toolbar-button--danger',\n    iconOnly && 'lk-toolbar-button--icon',\n    pressed && 'lk-toolbar-button--pressed',\n  ]\n    .filter(Boolean)\n    .join(' ');\n  return (\n    <button\n      type=\"button\"\n      className={cls}\n      onClick={onClick}\n      disabled={disabled}\n      title={title}\n      aria-label={ariaLabel ?? title}\n      aria-pressed={pressed}\n    >\n      {children}\n    </button>\n  );\n}\n\nfunction Spacer() {\n  return <span className=\"lk-toolbar-spacer\" aria-hidden=\"true\" />;\n}\n\n/** A label within a toolbar. */\nToolbar.Title = Title;\n/** A ruled-off run of related controls. */\nToolbar.Group = Group;\n/** A button within a toolbar. */\nToolbar.Button = Button;\n/** Flexible space that pushes what follows to the far end of the toolbar. */\nToolbar.Spacer = Spacer;\n","export function rollingAverage(samples: readonly number[]): number {\n  if (samples.length === 0) return 0;\n  const sum = samples.reduce((acc, n) => acc + n, 0);\n  return Math.round(sum / samples.length);\n}\n","import { useVisibleRaf } from '@weasel-js/core';\nimport { useEffect, useRef, useState } from 'react';\nimport { rollingAverage } from './fpsAverage';\n\nconst SAMPLE_WINDOW = 30;\n\n/** A live frame-rate readout, averaged over the last 30 frames. */\nexport function FpsMeter() {\n  const [fps, setFps] = useState(0);\n  const samplesRef = useRef<number[]>([]);\n  const lastTimeRef = useRef<number | null>(null);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const loop = useVisibleRaf(\n    (time) => {\n      const last = lastTimeRef.current;\n      if (last !== null) {\n        const delta = time - last;\n        if (delta > 0) {\n          const samples = samplesRef.current;\n          samples.push(1000 / delta);\n          if (samples.length > SAMPLE_WINDOW) samples.shift();\n          setFps(rollingAverage(samples));\n        }\n      }\n      lastTimeRef.current = time;\n      loop.request();\n    },\n    {\n      target: rootRef,\n      // The gap spent suspended is not a frame that took an hour to draw.\n      onResume: () => {\n        lastTimeRef.current = null;\n      },\n    },\n  );\n\n  useEffect(() => {\n    loop.request();\n    return () => loop.cancel();\n  }, [loop]);\n\n  return (\n    <div className=\"lk-fps-meter\" ref={rootRef}>\n      <span className=\"lk-fps-meter-label\">FPS</span>\n      {/* The number is its own cell because it is the only part that changes:\n          in one box with the label, every digit it gains or loses resizes the\n          readout, and the status bar it sits in wraps to a second line and\n          back — which in a small trial resizes the window. */}\n      <span className=\"lk-fps-meter-value\">{fps}</span>\n    </div>\n  );\n}\n","import { useContext } from 'react';\nimport { CanvasStackContext } from '../canvas/CanvasStackContext';\n\n/** Props for `<ScaleIndicator>`. */\nexport interface ScaleIndicatorProps {\n  /** Current view zoom factor. If omitted, reads from CanvasStackContext. Defaults to 1. */\n  zoom?: number;\n  /** World pixels per unit at zoom=1. Default: 1. */\n  pixelsPerUnit?: number;\n  /** Unit label. Default: 'px'. */\n  unit?: string;\n  /** Target bar width in display pixels. Default: 100. */\n  targetWidth?: number;\n}\n\n// Rounds n to a \"nice\" number — 1, 2, 5, 10, 20, 50, ...\nfunction niceNumber(n: number): number {\n  if (n <= 0) return 1;\n  const exp = Math.floor(Math.log10(n));\n  const fraction = n / 10 ** exp;\n  let nice: number;\n  if (fraction < 1.5) nice = 1;\n  else if (fraction < 3.5) nice = 2;\n  else if (fraction < 7.5) nice = 5;\n  else nice = 10;\n  return nice * 10 ** exp;\n}\n\n/** A scale bar: a labeled rule showing how far a round number of world units\n *  is at the current zoom. Reads the zoom from the surrounding canvas stack\n *  unless one is passed. */\nexport function ScaleIndicator({\n  zoom,\n  pixelsPerUnit = 1,\n  unit = 'px',\n  targetWidth = 100,\n}: ScaleIndicatorProps) {\n  const ctxValue = useContext(CanvasStackContext);\n  const effectiveZoom = zoom ?? ctxValue?.view.zoom ?? 1;\n  const effectivePxPerUnit = pixelsPerUnit * effectiveZoom;\n  const targetUnits = targetWidth / effectivePxPerUnit;\n  const niceUnits = niceNumber(targetUnits);\n  const barWidth = niceUnits * effectivePxPerUnit;\n  return (\n    <div className=\"lk-scale-indicator\" role=\"img\" aria-label={`Scale: ${niceUnits} ${unit}`}>\n      <div className=\"lk-scale-indicator-bar\" style={{ width: `${barWidth}px` }} />\n      <span className=\"lk-scale-indicator-label\">\n        {niceUnits} {unit}\n      </span>\n    </div>\n  );\n}\n","import { normalizeZoom } from '@weasel-js/core';\nimport { NumberField, Slider } from '../passthrough/weasel-ui';\n\n/** Props for `<ZoomControl>`. */\nexport interface ZoomControlProps {\n  /** Current zoom as a scale factor: 1 is actual size. */\n  zoom: number;\n  /** Fired continuously while the slider drags. */\n  onZoomChange: (zoom: number) => void;\n  /** Fired when a drag settles or the field is committed. Defaults to\n   *  `onZoomChange`. */\n  onZoomCommit?: (zoom: number) => void;\n  /** Smallest selectable zoom. Defaults to 0.1 (10%). */\n  min?: number;\n  /** Largest selectable zoom. Defaults to 8 (800%). */\n  max?: number;\n  className?: string;\n}\n\n// Zoom is perceptually geometric — halving is as big a step as doubling — so\n// the slider runs on log2 and 100% lands mid-track for a symmetric range.\nconst toTrack = (zoom: number): number => Math.log2(zoom);\nconst fromTrack = (v: number): number => 2 ** v;\n\nconst clamp = (v: number, lo: number, hi: number): number => Math.max(lo, Math.min(hi, v));\n\n/** Zoom as a log-scaled slider with an editable percentage beside it. Pair it\n *  with zoom-in / zoom-out buttons in a `<Toolbar.Group>`; this component owns\n *  only the continuous part. */\nexport function ZoomControl({\n  zoom,\n  onZoomChange,\n  onZoomCommit,\n  min: minProp = 0.1,\n  max: maxProp = 8,\n  className,\n}: ZoomControlProps) {\n  const min = normalizeZoom(minProp);\n  const max = normalizeZoom(maxProp);\n  const commit = onZoomCommit ?? onZoomChange;\n  const emit = (track: number, done: boolean): void => {\n    const next = clamp(fromTrack(track), min, max);\n    (done ? commit : onZoomChange)(next);\n  };\n\n  return (\n    <div className={`lk-zoom${className ? ` ${className}` : ''}`}>\n      <Slider\n        className=\"lk-zoom__slider\"\n        ariaLabel=\"Zoom\"\n        density=\"slim\"\n        min={toTrack(min)}\n        max={toTrack(max)}\n        // Detents at the octaves plus actual size, so 25/50/100/200/400% are\n        // reachable by drag rather than only by typing.\n        stops={[-2, -1, 0, 1, 2]}\n        thumbs={[{ value: clamp(toTrack(zoom), toTrack(min), toTrack(max)) }]}\n        onInput={(next) => emit(next[0].value, false)}\n        onChange={(next) => emit(next[0].value, true)}\n        readoutPlacement=\"none\"\n      />\n      {/* `style: 'percent'` formats a fraction, so the field carries the scale\n          factor itself and renders 0.5 as \"50%\". */}\n      <NumberField\n        className=\"lk-zoom__field\"\n        width=\"fit\"\n        aria-label=\"Zoom\"\n        value={zoom}\n        minValue={min}\n        maxValue={max}\n        step={0.01}\n        hideSteppers\n        ghost\n        formatOptions={{ style: 'percent', maximumFractionDigits: 0 }}\n        onChange={(next) => {\n          if (!Number.isFinite(next)) return;\n          commit(clamp(next, min, max));\n        }}\n      />\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\n/** Props for `<StatusBar>`. */\nexport interface StatusBarProps {\n  children: ReactNode;\n}\n\n/** A footer strip for readouts. Fill it with `<StatusBar.Section>`. */\nexport function StatusBar({ children }: StatusBarProps) {\n  return <div className=\"lk-status-bar\">{children}</div>;\n}\n\n/** Props for `<StatusBar.Section>`. */\nexport interface StatusBarSectionProps {\n  children: ReactNode;\n  /** Pushes this section, and everything after it, to the far end. */\n  end?: boolean;\n}\nfunction Section({ children, end }: StatusBarSectionProps) {\n  return (\n    <span className={`lk-status-bar-section${end ? ' lk-status-bar-section--end' : ''}`}>\n      {children}\n    </span>\n  );\n}\n\n/** One readout within a status bar. */\nStatusBar.Section = Section;\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