@weasel-js/svg 1.5.2 → 1.6.1

package/README.md

@@ -91,6 +91,11 @@ decodes it, so an external URL round-trips as a reference and resolves only
 when something downstream loads it. `unpackSvgFiles` maps the node onto the
 kit's `kit:image` painter (`data.image.src`), which does load it.
 
+A source rect and flips (`source`, `flipX`, `flipY`) are written as a nested
+`<svg viewBox>` viewport and read back as the same node. `unpackSvgFiles`
+carries them onto `data.image` under the same names, and `svgImageFromKit`
+writes a `kit:image` leaf back as an `SvgImageNode`.
+
 `preserveAspectRatio` is not modeled. The box is taken literally on the way
 in (a non-`none` value warns) and written back as `none`, so a source file
 that relied on letterboxing imports stretched.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Mat3 } from '@weasel-js/geom';
-import { Path, FillStyle, ScreenLength, StrokeAlign, StyledRun, TextStyle, TextVerticalAlign, Stroke, MarkerEntry, TilePatternSpec, IngestCtx } from '@weasel-js/core';
+import { Path, FillStyle, ScreenLength, StrokeAlign, StyledRun, TextStyle, TextVerticalAlign, Stroke, MarkerEntry, TilePatternSpec, ImageNodeData, IngestCtx } from '@weasel-js/core';
 
 /**
  * Public types for `@weasel-js/svg`. The package exposes a flat,
@@ -426,6 +426,9 @@ type SvgSceneDraft = {
  *  `userSpaceOnUse` gradient survives the fit-clamp and the drop-point
  *  placement. */
 declare function strokeDataFromSvg(stroke: SvgStroke | undefined, box: SvgDraftBounds): Stroke | undefined;
+/** Write a `kit:image` leaf as an `SvgImageNode` — the inverse of the image
+ *  arm of {@link svgNodesToKitDrafts}. The pose is the image's box. */
+declare function svgImageFromKit(image: ImageNodeData['image'], pose: DraftPose): SvgImageNode;
 /**
  * Walk an `SvgNode[]` tree and emit a flat, parent-before-child list of
  * {@link SvgSceneDraft}s. Each `<g>` becomes a container whose pose is the
@@ -441,4 +444,4 @@ declare function svgNodesToKitDrafts(nodes: readonly SvgNode[], nextId: () => st
  */
 declare function unpackSvgFiles(files: File[], ctx: IngestCtx): Promise<void>;
 
-export { IDENTITY_MATRIX, type Matrix, type NamespaceMeta, type NamespacedElement, type ParseOptions, type ParseResult, type SerializeOptions, type SvgDraftBounds, type SvgGroupNode, type SvgImageNode, type SvgNode, type SvgPaint, type SvgPathNode, type SvgSceneDraft, type SvgStroke, type SvgTextNode, parseSvg, serializeSvg, strokeDataFromSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
+export { IDENTITY_MATRIX, type Matrix, type NamespaceMeta, type NamespacedElement, type ParseOptions, type ParseResult, type SerializeOptions, type SvgDraftBounds, type SvgGroupNode, type SvgImageNode, type SvgNode, type SvgPaint, type SvgPathNode, type SvgSceneDraft, type SvgStroke, type SvgTextNode, parseSvg, serializeSvg, strokeDataFromSvg, svgImageFromKit, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };

package/dist/index.js

@@ -13,9 +13,9 @@ function isIdentity(m, eps = 1e-9) {
 var NUM_RE = /[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g;
 function readNumbers(s) {
   const out = [];
-  const matches = s.match(NUM_RE);
-  if (!matches) return out;
-  for (const m of matches) {
+  const matches2 = s.match(NUM_RE);
+  if (!matches2) return out;
+  for (const m of matches2) {
     const n = Number(m);
     if (Number.isFinite(n)) out.push(n);
   }
@@ -249,6 +249,302 @@ function parsePaintAttr(raw) {
   }
 }
 
+// src/cascade.ts
+var EMPTY_STYLE = {};
+var INHERITABLE = [
+  "fill",
+  "fill-opacity",
+  "fill-rule",
+  "stroke",
+  "stroke-width",
+  "stroke-opacity",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-dasharray",
+  "stroke-miterlimit",
+  "marker-start",
+  "marker-mid",
+  "marker-end",
+  "color",
+  "font-size",
+  "font-family",
+  "font-weight",
+  "font-style",
+  "text-anchor",
+  "letter-spacing",
+  "text-decoration",
+  "direction",
+  "text-transform"
+];
+function skipString(s, i) {
+  const q = s[i];
+  for (let j = i + 1; j < s.length; j++) {
+    if (s[j] === "\\") j++;
+    else if (s[j] === q) return j + 1;
+  }
+  return s.length;
+}
+function stripComments(s) {
+  if (!s.includes("/*")) return s;
+  let out = "";
+  let i = 0;
+  while (i < s.length) {
+    const ch = s[i];
+    if (ch === '"' || ch === "'") {
+      const end = skipString(s, i);
+      out += s.slice(i, end);
+      i = end;
+    } else if (ch === "/" && s[i + 1] === "*") {
+      const end = s.indexOf("*/", i + 2);
+      i = end < 0 ? s.length : end + 2;
+      out += " ";
+    } else {
+      out += ch;
+      i++;
+    }
+  }
+  return out;
+}
+function splitTopLevel(s, sep, dropBlocks = false) {
+  const parts = [];
+  let depth = 0;
+  let start = 0;
+  let i = 0;
+  while (i < s.length) {
+    const ch = s[i];
+    if (ch === '"' || ch === "'") {
+      i = skipString(s, i);
+      continue;
+    }
+    if (ch === "(" || ch === "[") depth++;
+    else if ((ch === ")" || ch === "]") && depth > 0) depth--;
+    else if (depth === 0 && ch === sep) {
+      parts.push(s.slice(start, i));
+      start = i + 1;
+    } else if (depth === 0 && dropBlocks && ch === "{") {
+      i = skipBlock(s, i);
+      start = i;
+      continue;
+    }
+    i++;
+  }
+  parts.push(s.slice(start));
+  return parts;
+}
+function skipBlock(s, i) {
+  let depth = 0;
+  while (i < s.length) {
+    const ch = s[i];
+    if (ch === '"' || ch === "'") {
+      i = skipString(s, i);
+      continue;
+    }
+    if (ch === "{") depth++;
+    else if (ch === "}" && --depth === 0) return i + 1;
+    i++;
+  }
+  return s.length;
+}
+var PROP_NAME = /^-?[a-z_][a-z0-9_-]*$/;
+var IMPORTANT = /!\s*important\s*$/i;
+function parseDeclarations(block) {
+  const out = [];
+  for (const part of splitTopLevel(stripComments(block), ";", true)) {
+    const colon = part.indexOf(":");
+    if (colon < 0) continue;
+    const prop = part.slice(0, colon).trim().toLowerCase();
+    if (!PROP_NAME.test(prop)) continue;
+    let value = part.slice(colon + 1).trim();
+    const important = IMPORTANT.test(value);
+    if (important) value = value.replace(IMPORTANT, "").trim();
+    if (!value) continue;
+    out.push({ prop, value, important });
+  }
+  return out;
+}
+function identEnd(s, i) {
+  while (i < s.length) {
+    const ch = s[i];
+    if (ch === "\\") i += 2;
+    else if (/[\w-]/.test(ch) || ch.charCodeAt(0) > 127) i++;
+    else break;
+  }
+  return i;
+}
+function parenEnd(s, i) {
+  let depth = 0;
+  while (i < s.length) {
+    const ch = s[i];
+    if (ch === '"' || ch === "'") {
+      i = skipString(s, i);
+      continue;
+    }
+    if (ch === "(") depth++;
+    else if (ch === ")" && --depth === 0) return i + 1;
+    i++;
+  }
+  return s.length;
+}
+var LEGACY_PSEUDO_ELEMENTS = /* @__PURE__ */ new Set(["before", "after", "first-line", "first-letter"]);
+var MAX_ARG_PSEUDOS = /* @__PURE__ */ new Set(["not", "is", "matches", "-webkit-any", "has"]);
+function compareSpecificity(a, b) {
+  return a[0] - b[0] || a[1] - b[1] || a[2] - b[2];
+}
+function maxSpecificity(list) {
+  let best = [0, 0, 0];
+  for (const sel of splitTopLevel(list, ",")) {
+    const s = specificity(sel);
+    if (compareSpecificity(s, best) > 0) best = s;
+  }
+  return best;
+}
+function specificity(selector) {
+  let a = 0, b = 0, c = 0;
+  const s = selector;
+  let i = 0;
+  while (i < s.length) {
+    const ch = s[i];
+    if (ch === "#") {
+      a++;
+      i = identEnd(s, i + 1);
+    } else if (ch === ".") {
+      b++;
+      i = identEnd(s, i + 1);
+    } else if (ch === "[") {
+      b++;
+      while (i < s.length && s[i] !== "]") {
+        i = s[i] === '"' || s[i] === "'" ? skipString(s, i) : i + 1;
+      }
+      i++;
+    } else if (ch === ":") {
+      const element = s[i + 1] === ":";
+      const nameStart = i + (element ? 2 : 1);
+      const nameEnd = identEnd(s, nameStart);
+      const name = s.slice(nameStart, nameEnd).toLowerCase();
+      let arg = null;
+      i = nameEnd;
+      if (s[i] === "(") {
+        const end = parenEnd(s, i);
+        arg = s.slice(i + 1, end - 1);
+        i = end;
+      }
+      if (element || LEGACY_PSEUDO_ELEMENTS.has(name)) c++;
+      else if (name === "where") ; else if (MAX_ARG_PSEUDOS.has(name) && arg != null) {
+        const m = maxSpecificity(arg);
+        a += m[0];
+        b += m[1];
+        c += m[2];
+      } else b++;
+    } else if (/[a-zA-Z_\\-]/.test(ch) || ch.charCodeAt(0) > 127) {
+      c++;
+      i = identEnd(s, i);
+    } else {
+      i++;
+    }
+  }
+  return [a, b, c];
+}
+function parseStylesheet(text, firstOrder = 0) {
+  const src = stripComments(text).replace(/<!\[CDATA\[|\]\]>|<!--|-->/g, " ");
+  const rules = [];
+  let order = firstOrder;
+  let i = 0;
+  let preludeStart = 0;
+  while (i < src.length) {
+    const ch = src[i];
+    if (ch === '"' || ch === "'") {
+      i = skipString(src, i);
+      continue;
+    }
+    if (ch === ";") {
+      i++;
+      preludeStart = i;
+      continue;
+    }
+    if (ch !== "{") {
+      i++;
+      continue;
+    }
+    const prelude = src.slice(preludeStart, i).trim();
+    const end = skipBlock(src, i);
+    if (!prelude.startsWith("@") && prelude) {
+      const declarations = parseDeclarations(src.slice(i + 1, end - 1));
+      for (const raw of splitTopLevel(prelude, ",")) {
+        const selector = raw.trim();
+        if (selector) {
+          rules.push({ selector, declarations, specificity: specificity(selector), order: order++ });
+        }
+      }
+    }
+    i = end;
+    preludeStart = end;
+  }
+  return rules;
+}
+function appliesAsCss(style) {
+  const type = style.getAttribute("type")?.trim().toLowerCase();
+  if (type && type !== "text/css") return false;
+  const media = style.getAttribute("media")?.trim().toLowerCase();
+  if (!media) return true;
+  return media.split(",").some((m) => m.trim() === "all" || m.trim() === "screen");
+}
+var sheetCache = /* @__PURE__ */ new WeakMap();
+function documentRules(doc) {
+  const cached = sheetCache.get(doc);
+  if (cached) return cached;
+  const rules = [];
+  const styles = doc.getElementsByTagNameNS("*", "style");
+  for (let i = 0; i < styles.length; i++) {
+    if (!appliesAsCss(styles[i])) continue;
+    rules.push(...parseStylesheet(styles[i].textContent ?? "", rules.length));
+  }
+  rules.sort((x, y) => compareSpecificity(x.specificity, y.specificity) || x.order - y.order);
+  sheetCache.set(doc, rules);
+  return rules;
+}
+function matches(el, selector) {
+  try {
+    return el.matches(selector);
+  } catch {
+    return false;
+  }
+}
+var elementCache = /* @__PURE__ */ new WeakMap();
+function authorDeclarations(el) {
+  const cached = elementCache.get(el);
+  if (cached) return cached;
+  const rules = el.ownerDocument ? documentRules(el.ownerDocument) : [];
+  const matched = rules.filter((r) => matches(el, r.selector));
+  const inline = parseDeclarations(el.getAttribute("style") ?? "");
+  const out = /* @__PURE__ */ new Map();
+  for (const important of [false, true]) {
+    for (const r of matched) {
+      for (const d of r.declarations) if (d.important === important) out.set(d.prop, d.value);
+    }
+    for (const d of inline) if (d.important === important) out.set(d.prop, d.value);
+  }
+  elementCache.set(el, out);
+  return out;
+}
+function ownProp(el, prop) {
+  return authorDeclarations(el).get(prop) ?? el.getAttribute(prop);
+}
+function deriveStyle(parent, el) {
+  let next = null;
+  for (const prop of INHERITABLE) {
+    const own = ownProp(el, prop);
+    if (own == null || own === "inherit") continue;
+    if (!next) next = { ...parent };
+    next[prop] = own;
+  }
+  return next ?? parent;
+}
+function resolveCurrentColor(raw, style) {
+  if (raw == null) return null;
+  if (raw.trim().toLowerCase() === "currentcolor") return style["color"] ?? "#000000";
+  return raw;
+}
+
 // src/elements.ts
 function collectElementsByTag(root, tags) {
   const out = /* @__PURE__ */ new Map();
@@ -437,7 +733,7 @@ function warnUnsupportedDefsChildren(svg, onWarn) {
       const child = root.children[i];
       const tag = child.tagName.toLowerCase();
       if (GRADIENT_TAGS.has(tag) || GRADIENT_TAGS.has(localName(tag))) continue;
-      if (tag === "pattern" || tag === "marker" || tag === "clippath") continue;
+      if (tag === "pattern" || tag === "marker" || tag === "clippath" || tag === "style") continue;
       onWarn(`unsupported <defs> child: <${child.tagName}>`);
     }
   }
@@ -474,10 +770,10 @@ function readStops(el, onWarn) {
     if (c.tagName.toLowerCase() !== "stop") continue;
     const offsetRaw = parseRatio(c.getAttribute("offset") ?? "0");
     const offset = Number.isFinite(offsetRaw) ? offsetRaw : 0;
-    const colorAttr = c.getAttribute("stop-color") ?? "#000000";
+    const colorAttr = ownProp(c, "stop-color") ?? "#000000";
     const parsed = parsePaintAttr(colorAttr);
     if (parsed && parsed.kind === "solid") {
-      const opacityAttr = c.getAttribute("stop-opacity");
+      const opacityAttr = ownProp(c, "stop-opacity");
       const own = opacityAttr != null ? parseRatio(opacityAttr) : NaN;
       const alpha = Number.isFinite(own) ? own : parsed.alpha;
       stops.push({ offset, color: alpha < 1 ? applyAlpha(parsed.color, alpha) : parsed.color });
@@ -721,59 +1017,6 @@ function stopXml(s) {
   return `<stop offset="${trimNumber(s.offset)}" stop-color="${s.color}"/>`;
 }
 
-// src/cascade.ts
-var EMPTY_STYLE = {};
-var INHERITABLE = [
-  "fill",
-  "fill-opacity",
-  "fill-rule",
-  "stroke",
-  "stroke-width",
-  "stroke-opacity",
-  "stroke-linecap",
-  "stroke-linejoin",
-  "stroke-dasharray",
-  "stroke-miterlimit",
-  "marker-start",
-  "marker-mid",
-  "marker-end",
-  "color",
-  "font-size",
-  "font-family",
-  "font-weight",
-  "font-style",
-  "text-anchor",
-  "letter-spacing",
-  "text-decoration",
-  "direction"
-];
-function readStyleProp(el, prop) {
-  const style = el.getAttribute("style");
-  if (!style) return null;
-  const re = new RegExp(`(?:^|;)\\s*${prop}\\s*:\\s*([^;]+)`, "i");
-  const m = re.exec(style);
-  if (!m) return null;
-  return m[1].trim();
-}
-function ownProp(el, prop) {
-  return readStyleProp(el, prop) ?? el.getAttribute(prop);
-}
-function deriveStyle(parent, el) {
-  let next = null;
-  for (const prop of INHERITABLE) {
-    const own = ownProp(el, prop);
-    if (own == null || own === "inherit") continue;
-    if (!next) next = { ...parent };
-    next[prop] = own;
-  }
-  return next ?? parent;
-}
-function resolveCurrentColor(raw, style) {
-  if (raw == null) return null;
-  if (raw.trim().toLowerCase() === "currentcolor") return style["color"] ?? "#000000";
-  return raw;
-}
-
 // src/parse.ts
 var SUPPORTED_LEAF_TAGS = /* @__PURE__ */ new Set([
   "rect",
@@ -794,7 +1037,8 @@ var IGNORED_TAGS = /* @__PURE__ */ new Set([
   "clippath",
   "title",
   "desc",
-  "metadata"
+  "metadata",
+  "style"
 ]);
 function parseSvg(svg, opts = {}) {
   const warnings = [];
@@ -1546,6 +1790,11 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   }
   return node;
 }
+var TEXT_TRANSFORMS = /* @__PURE__ */ new Set(["none", "uppercase", "lowercase", "capitalize"]);
+function parseTextTransform(raw) {
+  const v = raw?.trim().toLowerCase();
+  return v !== void 0 && TEXT_TRANSFORMS.has(v) ? v : void 0;
+}
 function readTspanRun(el, gradients, style, onWarn) {
   const text = el.textContent ?? "";
   const run = { text };
@@ -1576,6 +1825,8 @@ function readTspanRun(el, gradients, style, onWarn) {
   if (decoration.underline) run.underline = true;
   if (decoration.strikethrough) run.strikethrough = true;
   if (decoration.overline) run.overline = true;
+  const transform = parseTextTransform(ownProp(el, "text-transform"));
+  if (transform) run.textTransform = transform;
   const tspanStyle = deriveStyle(style, el);
   const fillAttr = resolveCurrentColor(ownProp(el, "fill"), tspanStyle);
   if (fillAttr) {
@@ -1623,6 +1874,8 @@ function readTextStyle(style, onWarn) {
   if (decoration.underline) out.underline = true;
   if (decoration.strikethrough) out.strikethrough = true;
   if (decoration.overline) out.overline = true;
+  const transform = parseTextTransform(style["text-transform"] ?? null);
+  if (transform && transform !== "none") out.textTransform = transform;
   return out;
 }
 function readTextPaint(style, gradients, onWarn, nonScalingStroke = false) {
@@ -2188,6 +2441,9 @@ function textXml(node, registry, namespaces, warn) {
   }
   const decoration = textDecorationValue(style?.underline, style?.strikethrough, style?.overline);
   if (decoration) attrs.push(`text-decoration="${decoration}"`);
+  if (style?.textTransform && style.textTransform !== "none") {
+    attrs.push(`style="text-transform:${style.textTransform}"`);
+  }
   if (style?.wrap) {
     attrs.push('data-weasel-wrap="true"');
     warn("text that wraps at its box width is written unwrapped: SVG text does not wrap, so other readers draw one line per hard break (weasel reads the wrap back)");
@@ -2250,6 +2506,7 @@ function runXml(run, registry, warn) {
     }
   }
   for (const a of coreStrokeAttrs(run.stroke, registry, warn)) attrs.push(a);
+  if (run.textTransform) attrs.push(`style="text-transform:${run.textTransform}"`);
   const head = attrs.length > 0 ? `<tspan ${attrs.join(" ")}>` : "<tspan>";
   return `${head}${escapeText(run.text)}</tspan>`;
 }
@@ -2316,6 +2573,22 @@ function strokeDataFromSvg(stroke, box) {
     ...stroke.markerEnd !== void 0 ? { markerEnd: stroke.markerEnd } : {}
   };
 }
+function svgImageFromKit(image, pose) {
+  const node = {
+    kind: "image",
+    href: image.src,
+    x: pose.x,
+    y: pose.y,
+    width: pose.width,
+    height: pose.height
+  };
+  if (image.source) node.source = { ...image.source };
+  if (image.flipX) node.flipX = true;
+  if (image.flipY) node.flipY = true;
+  if (image.opacity != null) node.opacity = image.opacity;
+  if (pose.rotation) node.rotation = pose.rotation;
+  return node;
+}
 function fillInBoxFrame(fill, box) {
   const units = "units" in fill ? fill.units : void 0;
   return units === "world" ? fillToBoundsFrame(fill, box) : fill;
@@ -2397,7 +2670,10 @@ function svgNodesToKitDrafts(nodes, nextId) {
         data: {
           image: {
             src: n.href,
-            ...n.opacity != null ? { opacity: n.opacity } : {}
+            ...n.opacity != null ? { opacity: n.opacity } : {},
+            ...n.source ? { source: { ...n.source } } : {},
+            ...n.flipX ? { flipX: true } : {},
+            ...n.flipY ? { flipY: true } : {}
           }
         }
       });
@@ -2509,6 +2785,6 @@ async function unpackSvgFiles(files, ctx) {
   }
 }
 
-export { IDENTITY_MATRIX, parseSvg, serializeSvg, strokeDataFromSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
+export { IDENTITY_MATRIX, parseSvg, serializeSvg, strokeDataFromSvg, svgImageFromKit, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map