@pixerate/flair 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @pixerate/flair
 
+## 0.16.0
+
+### Minor Changes
+
+- 55fbb80: New `@pixerate/flair/svelte` entry point, with `svelte` (>= 5) as an optional peer dependency (its types only; nothing to compile):
+
+  - `use:vectorEffect={{ id: "drip-text", values: { word: "Slop" }, loop: false }}` plays a catalog vector effect (or `{ motion }`, any `SvgMotion`) in an element: it makes an `SvgPlayer` on mount, remakes it when the params change (values by content, `speed` without remaking) and disposes it on destroy. Works as an attachment through `fromAction`.
+  - `vectorEffectStill(params)` returns `{ markup, style }` for server rendering: `<span use:vectorEffect={params} style={still.style}>{@html still.markup}</span>` shows the last frame, sized from the viewBox, until the player takes over. The still stays under `prefers-reduced-motion` (`reducedMotion` overrides).
+  - Sized like the React components: a block with the viewBox's aspect ratio, or with `inline` (or an effect's `inline` control) an `inline-block` 0.72em high.
+
+## 0.15.0
+
+### Minor Changes
+
+- 61b2ed6: New `@pixerate/flair/react` entry point, with `react` (>= 18) as an optional peer dependency:
+
+  - `<VectorEffect id="drip-text" values={{ word: "Slop" }} loop={false} />` plays a catalog vector effect; `<SvgPlayerView motion={...} />` plays any `SvgMotion`. Each makes an `SvgPlayer` after mount and disposes it on unmount.
+  - Server-renders a still of the last frame, sized from the viewBox, so hydration neither shifts the layout nor flashes blank. The still stays under `prefers-reduced-motion` (`reducedMotion` overrides).
+  - `inline` (or an effect's `inline` control, like drip text's) sizes it as a word in a line: `inline-block`, 0.72em high, with the viewBox's aspect ratio.
+
+  `@pixerate/flair/vector` adds `svgFrameMarkup(motion, { at })`, a frame as safe `<svg>` markup with no DOM (for server rendering and reduced motion), and `svgViewBox` / `parseViewBox`.
+
 ## 0.14.0
 
 ### Minor Changes

package/README.md

@@ -43,7 +43,9 @@ Flair gives products a library of good-looking, configurable visual effects (her
 | :--- | :--- | :--- |
 | `@pixerate/flair` | Shader engine, vector motion, time and easing, colour, blending, transitions, scenes, interchange exporters | None (browser-safe) |
 | `@pixerate/flair/catalog` | `EFFECTS`, `getEffect`, `findEffects`, `effectDefaults`, `renderVectorEffect`, `vectorControls`, GLSL helpers, sample images, `textImage` | None |
-| `@pixerate/flair/vector` | `SvgMotion`, `svgFrame`, `svgView`, `SvgPlayer`, `animateCount`, `formatCount`, `morphPaths`, `morphSequence`, `svgMotionIssues` | None |
+| `@pixerate/flair/vector` | `SvgMotion`, `svgFrame`, `svgView`, `SvgPlayer`, `svgFrameMarkup`, `svgViewBox`, `animateCount`, `formatCount`, `morphPaths`, `morphSequence`, `svgMotionIssues` | None |
+| `@pixerate/flair/react` | `<VectorEffect>`, `<SvgPlayerView>`: vector effects as React components, server-rendered as a still | `react` ≥ 18 (optional peer) |
+| `@pixerate/flair/svelte` | `vectorEffect` action, `vectorEffectStill`: vector effects in Svelte, server-rendered as a still | `svelte` ≥ 5 (optional peer; types only) |
 | `@pixerate/flair/editor` | `EffectEditor`, effect documents, keyframe tracks, renderer bindings, parameter-panel binding, agent tools and instructions | `@pixerate/editor` ≥ 0.29 (optional peer; only its dependency-free `/history`, `/commands`, `/tools`, `/animation` and `/parameters` subpaths) |
 | `@pixerate/flair/node` | `exportMotionGraphic`: renders a shader to GIF/MP4 through headless Chrome and ffmpeg | Node.js |
 
@@ -149,6 +151,45 @@ Overlay shaders (`category: "overlay"`) have `transparent: true`: they write cov
 
 To morph between any two SVG shapes, `morphPaths(from, to)` (from `@pixerate/flair/vector`) returns two paths with one structure, so `attrs: { d: [a, b] }` blends them point by point: curves and arcs are read, pieces are paired by position and size, and a piece with no partner grows from or shrinks to a point (draw them with `fill-rule="evenodd"`). `morphSequence` does the same for three or more shapes. `feature-morph` morphs two photos from five matching points, and `silhouette-morph` morphs any two silhouettes or logos (or words, through `textImage`).
 
+### React
+
+`@pixerate/flair/react` wraps the player, so a page needs no ref, effect or dispose of its own. `<VectorEffect>` plays a catalog vector effect by id, `<SvgPlayerView>` any `SvgMotion`:
+
+```tsx
+import { VectorEffect } from "@pixerate/flair/react";
+
+<h1>
+  Stop the <VectorEffect id="drip-text" values={{ word: "Slop", inline: true, font: "inherit" }} loop={false} />
+</h1>;
+```
+
+- **Server rendering**: both render a still of the last frame as markup (`"first"` for hover and press triggers; set `poster` for another), sized from the viewBox, so the page hydrates with the picture in place. The `SvgPlayer` takes over after mount and is disposed on unmount.
+- **Reduced motion**: under `prefers-reduced-motion: reduce` the still stays. `reducedMotion="always"` or `"never"` overrides it.
+- **Size**: a block as wide as its container, with the viewBox's aspect ratio. With `inline` (or an effect whose `inline` control is on, like drip text's) it is an `inline-block` 0.72em high, sitting on the baseline like a capital letter; pass a CSS length to `inline` for another height.
+- **Props**: player options (`loop`, `autoplay`, `speed`, `hold`, `trigger`, `steps`, `pauseWhenHidden`, `playOnEnter`, `clock` …), `values` and `preset` for an effect, `onPlayer` for the player itself, and any `<span>` attribute (`elementId` sets the host's `id` on `<VectorEffect>`). Values are compared by content, so an inline object does not restart it; pass `<SvgPlayerView>` a memoised `motion`.
+
+Without React or Svelte, `svgFrameMarkup(motion, { at: "last" })` (from `@pixerate/flair/vector`) gives the same still as safe `<svg>` markup with no DOM, for any server or framework.
+
+### Svelte
+
+`@pixerate/flair/svelte` does the same for Svelte 5, as plain TypeScript (no `.svelte` files, so nothing to compile). The `vectorEffect` action plays an effect by `id` (or any `motion`) in its element, and `vectorEffectStill` gives the server-rendered still:
+
+```svelte
+<script>
+  import { vectorEffect, vectorEffectStill } from "@pixerate/flair/svelte";
+
+  let { word = "Slop" } = $props();
+  const params = $derived({ id: "drip-text", values: { word, inline: true, font: "inherit" }, loop: false });
+  const still = $derived(vectorEffectStill(params));
+</script>
+
+<h1>Stop the <span use:vectorEffect={params} style={still.style}>{@html still.markup}</span></h1>
+```
+
+- **Params**: the React props, as one object: `id` with `values` and `preset`, or `motion`; player options; `poster`, `reducedMotion`, `inline`, `onPlayer`. A change remakes the player (values by content; `speed` without remaking), and it is disposed when the element goes.
+- **Still**: `markup` is the still's layer and `style` the host's size from the viewBox, with the same rules as React. The action hides the still while the player runs and keeps it under `prefers-reduced-motion`. Without `vectorEffectStill` it makes its own still and sizes the element on the client.
+- **Attachments**: `{@attach fromAction(vectorEffect, () => params)}`, with `fromAction` from `svelte/attachments`.
+
 `shader-text` fills letters from a text image: set its `uText` control to `textImage("Your title", { weight: 900 })`, a transparent SVG `data:` URL of any Unicode text.
 
 A vector effect declares its controls in its picture, the way a shader declares its uniforms: the first `{{name: type …}}` declares a control (`float`, `int`, `bool`, `color` or `text`, with `@control`'s attributes; quote values with spaces in single quotes), and every `{{name}}` is filled with its value. Declarations can sit in an XML comment, which is dropped when the picture is filled in, and text is escaped, so any words are safe:

package/dist/catalog/index.d.ts

@@ -1,7 +1,7 @@
 import { a as ControlDef, C as ControlValue } from '../controls-Syr6drzO.js';
-import { E as EffectDefinition, a as EffectCategory, S as ShaderEffect } from '../types-CGsNkP5U.js';
-export { b as EFFECT_CATEGORIES, c as EffectPreset, V as VECTOR_CONTROL_TYPES, d as VectorControl, e as VectorEffect, f as colorControl, n as numberControl, r as renderVectorEffect, v as vectorControlDef, g as vectorControlIssues, h as vectorControls, i as vectorEffectControls } from '../types-CGsNkP5U.js';
-import '../svg-C_TWBtEN.js';
+import { E as EffectDefinition, a as EffectCategory, S as ShaderEffect } from '../types-9J6NWaN3.js';
+export { b as EFFECT_CATEGORIES, c as EffectPreset, d as VECTOR_CONTROL_TYPES, e as VectorControl, V as VectorEffect, f as colorControl, n as numberControl, r as renderVectorEffect, v as vectorControlDef, g as vectorControlIssues, h as vectorControls, i as vectorEffectControls } from '../types-9J6NWaN3.js';
+import '../svg-XugR-6Ec.js';
 
 /**
  * Sample pictures for the catalog's image effects: small SVGs as `data:` URLs,

package/dist/chunk-DVVQRZJ5.js

@@ -0,0 +1,137 @@
+import {
+  SVG_PICTURE,
+  svgDuration,
+  svgFrame
+} from "./chunk-4RGHZWQC.js";
+
+// src/vector/static.ts
+var DROPPED = /* @__PURE__ */ new Set(["script", "foreignobject", "iframe", "object", "embed"]);
+var ATTR = /([^\s=/>"']+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>"']+)))?/g;
+var TOKEN = /<!--[\s\S]*?(?:-->|$)|<!\[CDATA\[([\s\S]*?)(?:\]\]>|$)|<[!?][^>]*>|<\/\s*([\w:.-]+)\s*>|<([\w:.-]+)((?:\s+[^\s=/>"']+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>"']+))?)*)\s*(\/?)>/g;
+var ENTITIES = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: "\xA0" };
+var decode = (s) => s.replace(/&(#x[0-9a-f]+|#\d+|\w+);/gi, (match, e) => {
+  if (e[0] !== "#") return ENTITIES[e.toLowerCase()] ?? match;
+  const code = e[1] === "x" || e[1] === "X" ? parseInt(e.slice(2), 16) : parseInt(e.slice(1), 10);
+  return code > 0 && code <= 1114111 ? String.fromCodePoint(code) : "";
+});
+var escapeText = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var escapeAttr = (s) => escapeText(s).replace(/"/g, "&quot;");
+function safeAttr(name, value) {
+  const n = name.toLowerCase();
+  if (n.startsWith("on") || !/^[a-z_][\w:.-]*$/i.test(n)) return false;
+  if (n === "href" || n === "xlink:href" || n === "src") return /^(#|data:image\/)/i.test(value.trim());
+  return true;
+}
+function parse(markup) {
+  const root = { tag: "", attrs: [], children: [] };
+  const stack = [root];
+  let dropping = 0;
+  let at = 0;
+  const text = (s) => {
+    if (!dropping && s) stack[stack.length - 1].children.push(decode(s));
+  };
+  for (const m of markup.matchAll(TOKEN)) {
+    text(markup.slice(at, m.index));
+    at = m.index + m[0].length;
+    const [, cdata, close, open, attrs = "", selfClosing] = m;
+    if (cdata !== void 0) {
+      if (!dropping) stack[stack.length - 1].children.push(cdata);
+    } else if (close) {
+      const tag = close.toLowerCase();
+      if (dropping) {
+        if (DROPPED.has(tag)) dropping--;
+        continue;
+      }
+      let i = stack.length - 1;
+      while (i > 0 && stack[i].tag.toLowerCase() !== tag) i--;
+      if (i > 0) stack.length = i;
+    } else if (open) {
+      if (DROPPED.has(open.toLowerCase())) {
+        if (!selfClosing) dropping++;
+        continue;
+      }
+      if (dropping) continue;
+      const node = { tag: open, attrs: [], children: [] };
+      for (const a of attrs.matchAll(ATTR)) {
+        const value = decode(a[2] ?? a[3] ?? a[4] ?? "");
+        if (safeAttr(a[1], value)) node.attrs.push([a[1], value]);
+      }
+      stack[stack.length - 1].children.push(node);
+      if (!selfClosing) stack.push(node);
+    }
+  }
+  text(markup.slice(at));
+  const svg = root.children.find((c) => typeof c !== "string");
+  return svg && svg.tag.toLowerCase() === "svg" ? svg : void 0;
+}
+function serialize(node) {
+  if (typeof node === "string") return escapeText(node);
+  const attrs = node.attrs.map(([k, v]) => ` ${k}="${escapeAttr(v)}"`).join("");
+  return `<${node.tag}${attrs}>${node.children.map(serialize).join("")}</${node.tag}>`;
+}
+function setAttr(node, name, value) {
+  const i = node.attrs.findIndex(([k]) => k === name);
+  if (value === void 0) {
+    if (i >= 0) node.attrs.splice(i, 1);
+  } else if (!safeAttr(name, value)) return;
+  else if (i >= 0) node.attrs[i][1] = value;
+  else node.attrs.push([name, value]);
+}
+var getAttr = (node, name) => node.attrs.find(([k]) => k === name)?.[1];
+function parseViewBox(value) {
+  const box = (value ?? "").trim().split(/[\s,]+/).map(Number);
+  return box.length === 4 && box.every(Number.isFinite) && box[2] > 0 && box[3] > 0 ? box : void 0;
+}
+function svgViewBox(markup) {
+  const open = /<svg\b[^>]*>/i.exec(markup)?.[0] ?? "";
+  return parseViewBox(/\sviewBox\s*=\s*(?:"([^"]*)"|'([^']*)')/i.exec(open)?.slice(1).find((v) => v !== void 0));
+}
+function svgFrameMarkup(motion, options = {}) {
+  const svg = parse(motion.svg.trim());
+  if (!svg) return void 0;
+  const steps = options.steps ?? [];
+  const at = options.at ?? "last";
+  const time = at === "first" ? 0 : at === "last" ? svgDuration(motion, steps) : at;
+  const byId = /* @__PURE__ */ new Map();
+  const index = (node) => {
+    const id = getAttr(node, "id");
+    if (id && !byId.has(id)) byId.set(id, node);
+    for (const c of node.children) if (typeof c !== "string") index(c);
+  };
+  index(svg);
+  const whole = parseViewBox(getAttr(svg, "viewBox"));
+  for (const [id, frame] of svgFrame(motion.animate ?? [], steps, time)) {
+    if (id === SVG_PICTURE && frame.view) {
+      const { from, to, u } = frame.view;
+      const a = from === null ? whole : typeof from === "string" ? void 0 : from;
+      const b = typeof to === "string" ? void 0 : to;
+      if (a && b) setAttr(svg, "viewBox", a.map((n, i) => +(n + (b[i] - n) * u).toFixed(2)).join(" "));
+      continue;
+    }
+    const el = byId.get(id);
+    if (!el) continue;
+    for (const [name, value] of Object.entries(frame.attrs)) setAttr(el, name, value);
+    if (frame.draw !== void 0) {
+      setAttr(el, "pathLength", "1");
+      setAttr(el, "stroke-dasharray", "1 1");
+      setAttr(el, "stroke-dashoffset", String(1 - frame.draw));
+    }
+    if (frame.text !== void 0) el.children = [frame.text];
+    if (frame.solo !== void 0) {
+      let i = 0;
+      for (const child of el.children)
+        if (typeof child !== "string") setAttr(child, "display", i++ === frame.solo ? void 0 : "none");
+    }
+  }
+  setAttr(svg, "width", "100%");
+  setAttr(svg, "height", "100%");
+  if (!getAttr(svg, "xmlns")) setAttr(svg, "xmlns", "http://www.w3.org/2000/svg");
+  return serialize(svg);
+}
+
+export {
+  parseViewBox,
+  svgViewBox,
+  svgFrameMarkup
+};
+//# sourceMappingURL=chunk-DVVQRZJ5.js.map

package/dist/chunk-DVVQRZJ5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vector/static.ts"],"sourcesContent":["/**\n * An {@link SvgMotion}'s frame as markup, with no DOM: for server rendering\n * (a still that hydrates without a blank flash), reduced motion and other\n * places a live player is not wanted.\n */\n\nimport { SVG_PICTURE, svgFrame, type SvgBox, type SvgMotion } from \"./motion.js\";\nimport { svgDuration } from \"./svg.js\";\n\ninterface Node {\n  tag: string;\n  attrs: [string, string][];\n  children: (Node | string)[];\n}\n\n/** Elements dropped with all they hold: they run code or show outside markup. */\nconst DROPPED = new Set([\"script\", \"foreignobject\", \"iframe\", \"object\", \"embed\"]);\nconst ATTR = /([^\\s=/>\"']+)(?:\\s*=\\s*(?:\"([^\"]*)\"|'([^']*)'|([^\\s>\"']+)))?/g;\nconst TOKEN = /<!--[\\s\\S]*?(?:-->|$)|<!\\[CDATA\\[([\\s\\S]*?)(?:\\]\\]>|$)|<[!?][^>]*>|<\\/\\s*([\\w:.-]+)\\s*>|<([\\w:.-]+)((?:\\s+[^\\s=/>\"']+(?:\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s>\"']+))?)*)\\s*(\\/?)>/g;\n\nconst ENTITIES: Record<string, string> = { amp: \"&\", lt: \"<\", gt: \">\", quot: '\"', apos: \"'\", nbsp: \" \" };\nconst decode = (s: string) =>\n  s.replace(/&(#x[0-9a-f]+|#\\d+|\\w+);/gi, (match, e: string) => {\n    if (e[0] !== \"#\") return ENTITIES[e.toLowerCase()] ?? match;\n    const code = e[1] === \"x\" || e[1] === \"X\" ? parseInt(e.slice(2), 16) : parseInt(e.slice(1), 10);\n    return code > 0 && code <= 0x10ffff ? String.fromCodePoint(code) : \"\";\n  });\nconst escapeText = (s: string) => s.replace(/&/g, \"&amp;\").replace(/</g, \"&lt;\").replace(/>/g, \"&gt;\");\nconst escapeAttr = (s: string) => escapeText(s).replace(/\"/g, \"&quot;\");\n\n/** Safe as `parseSvg` keeps it: no handlers, and links only within the picture or to data images. */\nfunction safeAttr(name: string, value: string): boolean {\n  const n = name.toLowerCase();\n  if (n.startsWith(\"on\") || !/^[a-z_][\\w:.-]*$/i.test(n)) return false;\n  if (n === \"href\" || n === \"xlink:href\" || n === \"src\") return /^(#|data:image\\/)/i.test(value.trim());\n  return true;\n}\n\n/** The `<svg>` in `markup` as a tree, without anything `parseSvg` would remove. */\nfunction parse(markup: string): Node | undefined {\n  const root: Node = { tag: \"\", attrs: [], children: [] };\n  const stack = [root];\n  let dropping = 0;\n  let at = 0;\n  const text = (s: string) => {\n    if (!dropping && s) stack[stack.length - 1]!.children.push(decode(s));\n  };\n  for (const m of markup.matchAll(TOKEN)) {\n    text(markup.slice(at, m.index));\n    at = m.index + m[0].length;\n    const [, cdata, close, open, attrs = \"\", selfClosing] = m;\n    if (cdata !== undefined) {\n      if (!dropping) stack[stack.length - 1]!.children.push(cdata);\n    } else if (close) {\n      const tag = close.toLowerCase();\n      if (dropping) {\n        if (DROPPED.has(tag)) dropping--;\n        continue;\n      }\n      // Close up to the matching element; a stray closing tag is ignored.\n      let i = stack.length - 1;\n      while (i > 0 && stack[i]!.tag.toLowerCase() !== tag) i--;\n      if (i > 0) stack.length = i;\n    } else if (open) {\n      if (DROPPED.has(open.toLowerCase())) {\n        if (!selfClosing) dropping++;\n        continue;\n      }\n      if (dropping) continue;\n      const node: Node = { tag: open, attrs: [], children: [] };\n      for (const a of attrs.matchAll(ATTR)) {\n        const value = decode(a[2] ?? a[3] ?? a[4] ?? \"\");\n        if (safeAttr(a[1]!, value)) node.attrs.push([a[1]!, value]);\n      }\n      stack[stack.length - 1]!.children.push(node);\n      if (!selfClosing) stack.push(node);\n    }\n  }\n  text(markup.slice(at));\n  const svg = root.children.find((c): c is Node => typeof c !== \"string\");\n  return svg && svg.tag.toLowerCase() === \"svg\" ? svg : undefined;\n}\n\nfunction serialize(node: Node | string): string {\n  if (typeof node === \"string\") return escapeText(node);\n  const attrs = node.attrs.map(([k, v]) => ` ${k}=\"${escapeAttr(v)}\"`).join(\"\");\n  return `<${node.tag}${attrs}>${node.children.map(serialize).join(\"\")}</${node.tag}>`;\n}\n\nfunction setAttr(node: Node, name: string, value: string | undefined) {\n  const i = node.attrs.findIndex(([k]) => k === name);\n  if (value === undefined) {\n    if (i >= 0) node.attrs.splice(i, 1);\n  } else if (!safeAttr(name, value)) return;\n  else if (i >= 0) node.attrs[i]![1] = value;\n  else node.attrs.push([name, value]);\n}\n\nconst getAttr = (node: Node, name: string) => node.attrs.find(([k]) => k === name)?.[1];\n\n/** A `viewBox` attribute's box, or undefined when it has none or it is malformed. */\nexport function parseViewBox(value: string | null | undefined): SvgBox | undefined {\n  const box = (value ?? \"\").trim().split(/[\\s,]+/).map(Number);\n  return box.length === 4 && box.every(Number.isFinite) && box[2]! > 0 && box[3]! > 0\n    ? (box as unknown as SvgBox)\n    : undefined;\n}\n\n/** The `viewBox` on an SVG's opening tag (see {@link parseViewBox}). */\nexport function svgViewBox(markup: string): SvgBox | undefined {\n  const open = /<svg\\b[^>]*>/i.exec(markup)?.[0] ?? \"\";\n  return parseViewBox(/\\sviewBox\\s*=\\s*(?:\"([^\"]*)\"|'([^']*)')/i.exec(open)?.slice(1).find((v) => v !== undefined));\n}\n\nexport interface SvgFrameMarkupOptions {\n  /**\n   * The time shown, in ms: a number, `\"first\"` (0) or `\"last\"` (the end of\n   * its last change, see `svgDuration`; the default).\n   */\n  at?: number | \"first\" | \"last\";\n  /** Step start times in ms, as a player's `steps` (default none). */\n  steps?: readonly number[];\n}\n\n/**\n * The picture of an {@link SvgMotion} at a moment, as `<svg>` markup made safe\n * the way `parseSvg` makes it (no scripts, handlers, `<foreignObject>` or\n * outside links), with no DOM needed: render it on a server, show it under\n * `prefers-reduced-motion`, or anywhere a still will do. It is sized to fill\n * its container, as `SvgPlayer` draws it.\n *\n * It matches the player's frame except where that needs layout: a change\n * `along` a path, and a `view` that frames an element by id, stay where the\n * markup puts them. Undefined when `motion.svg` is not an `<svg>`.\n */\nexport function svgFrameMarkup(motion: SvgMotion, options: SvgFrameMarkupOptions = {}): string | undefined {\n  const svg = parse(motion.svg.trim());\n  if (!svg) return undefined;\n  const steps = options.steps ?? [];\n  const at = options.at ?? \"last\";\n  const time = at === \"first\" ? 0 : at === \"last\" ? svgDuration(motion, steps) : at;\n  const byId = new Map<string, Node>();\n  const index = (node: Node) => {\n    const id = getAttr(node, \"id\");\n    if (id && !byId.has(id)) byId.set(id, node);\n    for (const c of node.children) if (typeof c !== \"string\") index(c);\n  };\n  index(svg);\n  const whole = parseViewBox(getAttr(svg, \"viewBox\"));\n  for (const [id, frame] of svgFrame(motion.animate ?? [], steps, time)) {\n    if (id === SVG_PICTURE && frame.view) {\n      const { from, to, u } = frame.view;\n      const a = from === null ? whole : typeof from === \"string\" ? undefined : from;\n      const b = typeof to === \"string\" ? undefined : to;\n      if (a && b) setAttr(svg, \"viewBox\", a.map((n, i) => +(n + (b[i]! - n) * u).toFixed(2)).join(\" \"));\n      continue;\n    }\n    const el = byId.get(id);\n    if (!el) continue;\n    for (const [name, value] of Object.entries(frame.attrs)) setAttr(el, name, value);\n    if (frame.draw !== undefined) {\n      setAttr(el, \"pathLength\", \"1\");\n      setAttr(el, \"stroke-dasharray\", \"1 1\");\n      setAttr(el, \"stroke-dashoffset\", String(1 - frame.draw));\n    }\n    if (frame.text !== undefined) el.children = [frame.text];\n    if (frame.solo !== undefined) {\n      let i = 0;\n      for (const child of el.children)\n        if (typeof child !== \"string\") setAttr(child, \"display\", i++ === frame.solo ? undefined : \"none\");\n    }\n  }\n  setAttr(svg, \"width\", \"100%\");\n  setAttr(svg, \"height\", \"100%\");\n  if (!getAttr(svg, \"xmlns\")) setAttr(svg, \"xmlns\", \"http://www.w3.org/2000/svg\");\n  return serialize(svg);\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-KVKJCD6A.js → chunk-UNLCGDCB.js}

@@ -1,3 +1,12 @@
+import {
+  CAMERA_MS,
+  CAMERA_STEP_MS,
+  EFFECT_TYPES,
+  MAX_TILT,
+  cameraAt,
+  cameraTrack,
+  sceneStage
+} from "./chunk-WAMA45G3.js";
 import {
   HOVER_SECONDS,
   MAX_CLICKS,
@@ -13,15 +22,6 @@ import {
   resetGlCaches,
   wrapSource
 } from "./chunk-YLJWC4N2.js";
-import {
-  CAMERA_MS,
-  CAMERA_STEP_MS,
-  EFFECT_TYPES,
-  MAX_TILT,
-  cameraAt,
-  cameraTrack,
-  sceneStage
-} from "./chunk-WAMA45G3.js";
 import {
   controlValue,
   imageUrls,
@@ -1617,4 +1617,4 @@ export {
   validateScene,
   standaloneSceneHtml
 };
-//# sourceMappingURL=chunk-KVKJCD6A.js.map
+//# sourceMappingURL=chunk-UNLCGDCB.js.map

package/dist/{chunk-H355R6U4.js → chunk-VP6IEWIK.js}

@@ -128,4 +128,4 @@ export {
   stepVariant,
   formatUnit
 };
-//# sourceMappingURL=chunk-H355R6U4.js.map
+//# sourceMappingURL=chunk-VP6IEWIK.js.map

package/dist/cli.js

@@ -3,12 +3,12 @@ import {
   standaloneHtml,
   standaloneSceneHtml,
   validateScene
-} from "./chunk-KVKJCD6A.js";
-import "./chunk-YLJWC4N2.js";
-import "./chunk-EHDJ3CPJ.js";
+} from "./chunk-UNLCGDCB.js";
 import {
   simulateScene
 } from "./chunk-WAMA45G3.js";
+import "./chunk-YLJWC4N2.js";
+import "./chunk-EHDJ3CPJ.js";
 import "./chunk-WMZQCUFJ.js";
 import {
   parseControls

package/dist/editor/index.d.ts

@@ -1,6 +1,6 @@
-import { d as VectorControl, c as EffectPreset, E as EffectDefinition } from '../types-CGsNkP5U.js';
+import { e as VectorControl, c as EffectPreset, E as EffectDefinition } from '../types-9J6NWaN3.js';
 import { C as ControlValue, a as ControlDef, b as ControlType } from '../controls-Syr6drzO.js';
-import { S as SvgMotion, C as Clock } from '../svg-C_TWBtEN.js';
+import { S as SvgMotion, C as Clock } from '../svg-XugR-6Ec.js';
 import { AnimationEasingPreset, AnimationEasing, AnimationTrack, AnimationKeyframe, cubicBezierAt as cubicBezierAt$1, evaluateEasing as evaluateEasing$1 } from '@pixerate/editor/animation';
 export { CubicBezierEasing, SpringEasing } from '@pixerate/editor/animation';
 import { CommandRegistry, CommandSpec } from '@pixerate/editor/commands';

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import { C as ControlValue, a as ControlDef } from './controls-Syr6drzO.js';
 export { c as ControlCheck, b as ControlType, T as TextureSettings, d as checkControlValue, e as coerceControlValue, f as componentCount, g as controlValue, h as describeValue, i as hexToRgb, j as humanise, k as imageUrls, l as isImageUrl, p as parseControls, r as rgbToHex } from './controls-Syr6drzO.js';
 export { B as BUILTIN_UNIFORMS, C as CompileError, b as CompileResult, a as CompileStatus, c as CompiledShader, F as FrameState, I as ImageLoadError, R as RendererStats, S as SVG_EDGE, d as ShaderCompileError, e as ShaderRenderer, f as ShaderRendererOptions, T as TextureCache, g as TextureSource, V as VERTEX_SOURCE, h as applyTextureSettings, i as compileShader, j as createContext, k as drawFrame, l as formatCompileError, m as isSvgUrl, n as loadImage, p as parseCompileLog, o as preloadImages, r as releaseImages, q as resetGlCaches, s as sizeSvg, w as wrapSource } from './renderer-SNYZu__R.js';
-import { C as Clock } from './svg-C_TWBtEN.js';
-export { A as AnimateCountOptions, D as DataKey, E as EASES, b as EaseName, M as ManualClock, c as SCRAMBLE_MS, d as STEP_MS, e as SVG_PICTURE, f as SvgAnimation, g as SvgBox, h as SvgElementFrame, S as SvgMotion, i as SvgPlayer, j as SvgPlayerOptions, a as SvgTrigger, k as SvgView, l as SvgViewOptions, m as animateCount, n as defaultDataKey, o as formatCount, p as jitter, q as lerpAttr, r as lerpData, s as pageHidden, t as parseSvg, u as realClock, v as stepData, w as stepProgress, x as stepStart, y as svgDuration, z as svgFrame, B as svgMotionIssues, F as svgOpeningTag, G as svgView, H as writtenText } from './svg-C_TWBtEN.js';
-export { BoxAlignment, BoxFit, FittedBoxResult, FormatUnitOptions, MorphOptions, StackLayoutOptions, UnitFormat, computeBoxFit, formatUnit, layoutStack, morphPaths, morphSequence, remap, stepVariant } from './vector/index.js';
+import { C as Clock } from './svg-XugR-6Ec.js';
+export { A as AnimateCountOptions, D as DataKey, E as EASES, c as EaseName, M as ManualClock, d as SCRAMBLE_MS, e as STEP_MS, f as SVG_PICTURE, g as SvgAnimation, h as SvgBox, i as SvgElementFrame, S as SvgMotion, b as SvgPlayer, j as SvgPlayerOptions, a as SvgTrigger, k as SvgView, l as SvgViewOptions, m as animateCount, n as defaultDataKey, o as formatCount, p as jitter, q as lerpAttr, r as lerpData, s as pageHidden, t as parseSvg, u as realClock, v as stepData, w as stepProgress, x as stepStart, y as svgDuration, z as svgFrame, B as svgMotionIssues, F as svgOpeningTag, G as svgView, H as writtenText } from './svg-XugR-6Ec.js';
+export { BoxAlignment, BoxFit, FittedBoxResult, FormatUnitOptions, MorphOptions, StackLayoutOptions, SvgFrameMarkupOptions, UnitFormat, computeBoxFit, formatUnit, layoutStack, morphPaths, morphSequence, parseViewBox, remap, stepVariant, svgFrameMarkup, svgViewBox } from './vector/index.js';
 
 /** Controls a registered thumbnail. */
 interface ThumbnailHandle {

package/dist/index.js

@@ -1,10 +1,25 @@
+import {
+  calculateShotTimings,
+  createLottieEase,
+  exportCmx3600Edl,
+  exportFcp7Xml,
+  exportLottie,
+  exportMotn,
+  framesToTimecode,
+  timecodeToFrames
+} from "./chunk-GTIAOYOK.js";
 import {
   computeBoxFit,
   formatUnit,
   layoutStack,
   remap,
   stepVariant
-} from "./chunk-H355R6U4.js";
+} from "./chunk-VP6IEWIK.js";
+import {
+  parseViewBox,
+  svgFrameMarkup,
+  svgViewBox
+} from "./chunk-DVVQRZJ5.js";
 import {
   EASES,
   SCRAMBLE_MS,
@@ -44,67 +59,7 @@ import {
   standaloneHtml,
   standaloneSceneHtml,
   validateScene
-} from "./chunk-KVKJCD6A.js";
-import {
-  BUILTIN_UNIFORMS,
-  HOVER_SECONDS,
-  ImageLoadError,
-  MAX_CLICKS,
-  PointerTracker,
-  SVG_EDGE,
-  ShaderCompileError,
-  TextureCache,
-  VERTEX_SOURCE,
-  applyAscCdl,
-  applyLiftGammaGain,
-  applyTextureSettings,
-  applyVibrance,
-  clicksUniform,
-  compileShader,
-  convertColorSpace,
-  createContext,
-  drawFrame,
-  formatCompileError,
-  getColorGradingGLSL,
-  getOklabGLSL,
-  getWhiteBalanceGains,
-  interpolateOklab,
-  interpolateOklch,
-  isSvgUrl,
-  linearRgbToSrgb,
-  linearSrgbToOklab,
-  linearToSrgb,
-  loadImage,
-  oklabToLinearSrgb,
-  oklabToOklch,
-  oklabToSrgb,
-  oklchToOklab,
-  parseCompileLog,
-  preloadImages,
-  releaseImages,
-  resetGlCaches,
-  sizeSvg,
-  srgbToLinear,
-  srgbToLinearRgb,
-  srgbToOklab,
-  wrapSource
-} from "./chunk-YLJWC4N2.js";
-import {
-  ALL_TRANSITION_TYPES,
-  blendTransitionPixel,
-  getTransitionGLSL,
-  sampleTransition
-} from "./chunk-EHDJ3CPJ.js";
-import {
-  calculateShotTimings,
-  createLottieEase,
-  exportCmx3600Edl,
-  exportFcp7Xml,
-  exportLottie,
-  exportMotn,
-  framesToTimecode,
-  timecodeToFrames
-} from "./chunk-GTIAOYOK.js";
+} from "./chunk-UNLCGDCB.js";
 import {
   CAMERA_MS,
   CAMERA_STEP_MS,
@@ -162,6 +117,56 @@ import {
   viewAt,
   visibleRect
 } from "./chunk-WAMA45G3.js";
+import {
+  BUILTIN_UNIFORMS,
+  HOVER_SECONDS,
+  ImageLoadError,
+  MAX_CLICKS,
+  PointerTracker,
+  SVG_EDGE,
+  ShaderCompileError,
+  TextureCache,
+  VERTEX_SOURCE,
+  applyAscCdl,
+  applyLiftGammaGain,
+  applyTextureSettings,
+  applyVibrance,
+  clicksUniform,
+  compileShader,
+  convertColorSpace,
+  createContext,
+  drawFrame,
+  formatCompileError,
+  getColorGradingGLSL,
+  getOklabGLSL,
+  getWhiteBalanceGains,
+  interpolateOklab,
+  interpolateOklch,
+  isSvgUrl,
+  linearRgbToSrgb,
+  linearSrgbToOklab,
+  linearToSrgb,
+  loadImage,
+  oklabToLinearSrgb,
+  oklabToOklch,
+  oklabToSrgb,
+  oklchToOklab,
+  parseCompileLog,
+  preloadImages,
+  releaseImages,
+  resetGlCaches,
+  sizeSvg,
+  srgbToLinear,
+  srgbToLinearRgb,
+  srgbToOklab,
+  wrapSource
+} from "./chunk-YLJWC4N2.js";
+import {
+  ALL_TRANSITION_TYPES,
+  blendTransitionPixel,
+  getTransitionGLSL,
+  sampleTransition
+} from "./chunk-EHDJ3CPJ.js";
 import {
   ManualClock,
   jitter,
@@ -1303,6 +1308,7 @@ export {
   parseControls,
   parseSvg,
   parseTimecode,
+  parseViewBox,
   pingPongTime,
   playScene,
   preloadImages,
@@ -1343,9 +1349,11 @@ export {
   supportsDropFrame,
   svgDuration,
   svgFrame,
+  svgFrameMarkup,
   svgMotionIssues,
   svgOpeningTag,
   svgView,
+  svgViewBox,
   timecodeToFrames,
   titleBox,
   touchedIds,