@pixerate/flair 0.13.1 → 0.15.0

package/dist/react/index.d.ts

@@ -0,0 +1,82 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import { V as VectorEffect$1 } from '../types-9J6NWaN3.js';
+import { C as ControlValue } from '../controls-Syr6drzO.js';
+import { S as SvgMotion, a as SvgTrigger, C as Clock, b as SvgPlayer } from '../svg-XugR-6Ec.js';
+
+/** When to leave the still in place of the animation. */
+type ReducedMotion = "user" | "always" | "never";
+interface SvgPlayerViewProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** The picture and its animations. */
+    motion: SvgMotion;
+    /** Start again at the end (default `true`); `false` plays once and stays on the last frame. */
+    loop?: boolean;
+    /** Start playing at once (default `true`). */
+    autoplay?: boolean;
+    /** Playback speed (default 1). */
+    speed?: number;
+    /** Ms to rest on the last frame before looping (default 600). */
+    hold?: number;
+    /** Loop length in ms (default: the picture's own, plus `hold`). */
+    duration?: number;
+    /** Step start times in ms, for pictures that change on steps. */
+    steps?: readonly number[];
+    /** Plays in answer to the pointer (see `SvgTrigger`). */
+    trigger?: SvgTrigger;
+    /** Pause while scrolled out of view. */
+    pauseWhenHidden?: boolean;
+    /** Wait to start until scrolled into view. */
+    playOnEnter?: boolean;
+    /** Hide the picture while paused or reset. */
+    hideWhenPaused?: boolean;
+    /** Time source (default animation frames); a `ManualClock` steps frames yourself. */
+    clock?: Clock;
+    /** Called with the id of the innermost element with an id that is clicked. */
+    onPick?: (id: string) => void;
+    /** Called with the player once it is made, and `undefined` when it is disposed. */
+    onPlayer?: (player: SvgPlayer | undefined) => void;
+    /**
+     * The still shown before the player starts (server render, hydration) and
+     * instead of it under reduced motion: `"last"` (default; the rest frame,
+     * `"first"` for a hover or press trigger), `"first"` or a time in ms.
+     */
+    poster?: "first" | "last" | number;
+    /**
+     * `"user"` (default) shows the still when the visitor prefers reduced
+     * motion, `"always"` always does, `"never"` always plays.
+     */
+    reducedMotion?: ReducedMotion;
+    /**
+     * Size it as a word in a line of text: `display: inline-block` with the
+     * viewBox's aspect ratio and `height` 0.72em (the cap height of a heavy
+     * sans; pass a CSS length for another). Meant for pictures framed from cap
+     * height to baseline, like drip text's `inline`. Otherwise it is a block
+     * as wide as its container with the viewBox's aspect ratio.
+     */
+    inline?: boolean | string;
+}
+/**
+ * Plays an {@link SvgMotion}: a still on the server and before mount, then
+ * an `SvgPlayer` (remade when the motion or its options change, disposed on
+ * unmount). Pass a memoised `motion`: a new object each render restarts it.
+ */
+declare function SvgPlayerView(props: SvgPlayerViewProps): react.JSX.Element;
+interface VectorEffectProps extends Omit<SvgPlayerViewProps, "motion" | "id"> {
+    /** A vector effect's catalog id (`"drip-text"`), or the effect itself. */
+    id: string | VectorEffect$1;
+    /** Control values; missing ones take the preset's, then the defaults. */
+    values?: Record<string, ControlValue>;
+    /** A preset's name to start from. */
+    preset?: string;
+    /** The host element's own `id`. */
+    elementId?: string;
+}
+/**
+ * Plays a catalog vector effect: `<VectorEffect id="drip-text" values={{ word: "Slop" }} loop={false} />`.
+ * Its `hold` and `trigger` are used unless given. With an `inline` control
+ * set (drip text's), it is sized as a word in the line (see `inline`).
+ * Throws when `id` is not a vector effect.
+ */
+declare function VectorEffect(props: VectorEffectProps): react.JSX.Element;
+
+export { type ReducedMotion, SvgMotion, SvgPlayer, SvgPlayerView, type SvgPlayerViewProps, SvgTrigger, VectorEffect, type VectorEffectProps };

package/dist/react/index.js

@@ -0,0 +1,132 @@
+import {
+  effectDefaults,
+  getEffect,
+  renderVectorEffect
+} from "../chunk-KWNFZ5NC.js";
+import {
+  svgFrameMarkup,
+  svgViewBox
+} from "../chunk-DVVQRZJ5.js";
+import {
+  SvgPlayer
+} from "../chunk-4RGHZWQC.js";
+import "../chunk-OHW7UG6D.js";
+import "../chunk-EHDJ3CPJ.js";
+import "../chunk-WC3VADZC.js";
+import "../chunk-WMZQCUFJ.js";
+
+// src/react/index.tsx
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+var CAP_HEIGHT = "0.72em";
+function prefersReducedMotion() {
+  return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function hostStyle(svg, inline, style) {
+  const box = svgViewBox(svg);
+  const aspectRatio = box ? `${box[2]} / ${box[3]}` : void 0;
+  const base = inline ? { display: "inline-block", height: typeof inline === "string" ? inline : CAP_HEIGHT, aspectRatio } : { display: "block", aspectRatio };
+  return { position: "relative", ...base, ...style };
+}
+var LAYER = { position: "absolute", inset: 0, display: "block" };
+function SvgPlayerView(props) {
+  const {
+    motion,
+    loop,
+    autoplay,
+    speed,
+    hold,
+    duration,
+    steps,
+    trigger,
+    pauseWhenHidden,
+    playOnEnter,
+    hideWhenPaused,
+    clock,
+    onPick,
+    onPlayer,
+    poster,
+    reducedMotion = "user",
+    inline,
+    style,
+    ...rest
+  } = props;
+  const still = useRef(null);
+  const mount = useRef(null);
+  const player = useRef(void 0);
+  const callbacks = useRef({ onPick, onPlayer });
+  callbacks.current = { onPick, onPlayer };
+  const at = poster ?? (trigger === "hover" || trigger === "press" ? "first" : "last");
+  const markup = useMemo(() => svgFrameMarkup(motion, { at, steps }) ?? "", [motion, at, steps]);
+  const stepsKey = steps?.join(",");
+  useIsomorphicLayoutEffect(() => {
+    const host = mount.current;
+    if (!host) return;
+    if (reducedMotion === "always" || reducedMotion === "user" && prefersReducedMotion()) return;
+    const p = new SvgPlayer(host, motion, {
+      loop,
+      autoplay,
+      speed,
+      hold,
+      duration,
+      steps,
+      trigger,
+      pauseWhenHidden,
+      playOnEnter,
+      hideWhenPaused,
+      clock,
+      onPick: (id) => callbacks.current.onPick?.(id)
+    });
+    player.current = p;
+    if (still.current) still.current.style.display = "none";
+    callbacks.current.onPlayer?.(p);
+    return () => {
+      p.dispose();
+      player.current = void 0;
+      if (still.current) still.current.style.display = "block";
+      callbacks.current.onPlayer?.(void 0);
+    };
+  }, [motion, loop, autoplay, hold, duration, stepsKey, trigger, pauseWhenHidden, playOnEnter, hideWhenPaused, clock, reducedMotion]);
+  useEffect(() => {
+    player.current?.setSpeed(speed ?? 1);
+  }, [speed]);
+  return /* @__PURE__ */ jsxs("span", { ...rest, style: hostStyle(motion.svg, inline, style), children: [
+    /* @__PURE__ */ jsx("span", { ref: still, "aria-hidden": "true", style: LAYER, dangerouslySetInnerHTML: { __html: markup } }),
+    /* @__PURE__ */ jsx("span", { ref: mount, style: LAYER })
+  ] });
+}
+function VectorEffect(props) {
+  const { id, values, preset, elementId, ...rest } = props;
+  const effect = typeof id === "string" ? getEffect(id) : id;
+  if (!effect || effect.kind !== "vector")
+    throw new Error(`"${typeof id === "string" ? id : effect?.id}" is not a vector effect; pick one from findEffects({ kind: "vector" })`);
+  const valuesKey = JSON.stringify(values ?? {});
+  const motion = useMemo(
+    () => renderVectorEffect(effect, effectDefaults(effect, { preset, values })),
+    // Values by content, so an inline object literal does not restart it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [effect, preset, valuesKey]
+  );
+  return /* @__PURE__ */ jsx(
+    SvgPlayerView,
+    {
+      id: elementId,
+      motion,
+      hold: effect.hold,
+      trigger: effect.trigger,
+      inline: values?.inline === true,
+      ...rest
+    }
+  );
+}
+export {
+  SvgPlayerView,
+  VectorEffect
+};
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/index.tsx"],"sourcesContent":["/**\n * React components for Flair's vector effects: `<VectorEffect>` plays a\n * catalog effect by id, `<SvgPlayerView>` plays any {@link SvgMotion}.\n *\n * Both render a still of the picture on the server (its last frame, by\n * default), so a page hydrates with the picture in place rather than a blank\n * box that jumps; the live `SvgPlayer` takes over after mount and is disposed\n * on unmount. Under `prefers-reduced-motion: reduce` the still stays.\n *\n * Needs React 18 or later (an optional peer dependency of the package).\n *\n * @packageDocumentation\n */\n\nimport {\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { getEffect, effectDefaults } from \"../catalog/index.js\";\nimport { renderVectorEffect, type VectorEffect as VectorEffectDefinition } from \"../catalog/types.js\";\nimport type { ControlValue } from \"../shader/controls.js\";\nimport type { Clock } from \"../time/clock.js\";\nimport type { SvgMotion } from \"../vector/motion.js\";\nimport { svgFrameMarkup, svgViewBox } from \"../vector/static.js\";\nimport { SvgPlayer, type SvgTrigger } from \"../vector/svg.js\";\n\n// Layout effects swap the still for the player before paint; on a server neither runs.\nconst useIsomorphicLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n/** Cap height of a heavy sans, as a share of its font size: what an inline word is framed to. */\nconst CAP_HEIGHT = \"0.72em\";\n\n/** When to leave the still in place of the animation. */\nexport type ReducedMotion = \"user\" | \"always\" | \"never\";\n\nexport interface SvgPlayerViewProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** The picture and its animations. */\n  motion: SvgMotion;\n  /** Start again at the end (default `true`); `false` plays once and stays on the last frame. */\n  loop?: boolean;\n  /** Start playing at once (default `true`). */\n  autoplay?: boolean;\n  /** Playback speed (default 1). */\n  speed?: number;\n  /** Ms to rest on the last frame before looping (default 600). */\n  hold?: number;\n  /** Loop length in ms (default: the picture's own, plus `hold`). */\n  duration?: number;\n  /** Step start times in ms, for pictures that change on steps. */\n  steps?: readonly number[];\n  /** Plays in answer to the pointer (see `SvgTrigger`). */\n  trigger?: SvgTrigger;\n  /** Pause while scrolled out of view. */\n  pauseWhenHidden?: boolean;\n  /** Wait to start until scrolled into view. */\n  playOnEnter?: boolean;\n  /** Hide the picture while paused or reset. */\n  hideWhenPaused?: boolean;\n  /** Time source (default animation frames); a `ManualClock` steps frames yourself. */\n  clock?: Clock;\n  /** Called with the id of the innermost element with an id that is clicked. */\n  onPick?: (id: string) => void;\n  /** Called with the player once it is made, and `undefined` when it is disposed. */\n  onPlayer?: (player: SvgPlayer | undefined) => void;\n  /**\n   * The still shown before the player starts (server render, hydration) and\n   * instead of it under reduced motion: `\"last\"` (default; the rest frame,\n   * `\"first\"` for a hover or press trigger), `\"first\"` or a time in ms.\n   */\n  poster?: \"first\" | \"last\" | number;\n  /**\n   * `\"user\"` (default) shows the still when the visitor prefers reduced\n   * motion, `\"always\"` always does, `\"never\"` always plays.\n   */\n  reducedMotion?: ReducedMotion;\n  /**\n   * Size it as a word in a line of text: `display: inline-block` with the\n   * viewBox's aspect ratio and `height` 0.72em (the cap height of a heavy\n   * sans; pass a CSS length for another). Meant for pictures framed from cap\n   * height to baseline, like drip text's `inline`. Otherwise it is a block\n   * as wide as its container with the viewBox's aspect ratio.\n   */\n  inline?: boolean | string;\n}\n\nfunction prefersReducedMotion(): boolean {\n  return typeof matchMedia === \"function\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\n/** The host's size from the picture's viewBox, so the still and the player take the same room. */\nfunction hostStyle(svg: string, inline: boolean | string | undefined, style?: CSSProperties): CSSProperties {\n  const box = svgViewBox(svg);\n  const aspectRatio = box ? `${box[2]} / ${box[3]}` : undefined;\n  const base: CSSProperties = inline\n    ? { display: \"inline-block\", height: typeof inline === \"string\" ? inline : CAP_HEIGHT, aspectRatio }\n    : { display: \"block\", aspectRatio };\n  return { position: \"relative\", ...base, ...style };\n}\n\nconst LAYER: CSSProperties = { position: \"absolute\", inset: 0, display: \"block\" };\n\n/**\n * Plays an {@link SvgMotion}: a still on the server and before mount, then\n * an `SvgPlayer` (remade when the motion or its options change, disposed on\n * unmount). Pass a memoised `motion`: a new object each render restarts it.\n */\nexport function SvgPlayerView(props: SvgPlayerViewProps) {\n  const {\n    motion,\n    loop,\n    autoplay,\n    speed,\n    hold,\n    duration,\n    steps,\n    trigger,\n    pauseWhenHidden,\n    playOnEnter,\n    hideWhenPaused,\n    clock,\n    onPick,\n    onPlayer,\n    poster,\n    reducedMotion = \"user\",\n    inline,\n    style,\n    ...rest\n  } = props;\n  const still = useRef<HTMLSpanElement>(null);\n  const mount = useRef<HTMLSpanElement>(null);\n  const player = useRef<SvgPlayer | undefined>(undefined);\n  // Callbacks change every render; the player calls the latest without being remade.\n  const callbacks = useRef({ onPick, onPlayer });\n  callbacks.current = { onPick, onPlayer };\n\n  const at = poster ?? (trigger === \"hover\" || trigger === \"press\" ? \"first\" : \"last\");\n  const markup = useMemo(() => svgFrameMarkup(motion, { at, steps }) ?? \"\", [motion, at, steps]);\n  const stepsKey = steps?.join(\",\");\n\n  useIsomorphicLayoutEffect(() => {\n    const host = mount.current;\n    if (!host) return;\n    if (reducedMotion === \"always\" || (reducedMotion === \"user\" && prefersReducedMotion())) return;\n    const p = new SvgPlayer(host, motion, {\n      loop,\n      autoplay,\n      speed,\n      hold,\n      duration,\n      steps,\n      trigger,\n      pauseWhenHidden,\n      playOnEnter,\n      hideWhenPaused,\n      clock,\n      onPick: (id) => callbacks.current.onPick?.(id),\n    });\n    player.current = p;\n    // Set directly, not through props, so React leaves it be on later renders.\n    if (still.current) still.current.style.display = \"none\";\n    callbacks.current.onPlayer?.(p);\n    return () => {\n      p.dispose();\n      player.current = undefined;\n      if (still.current) still.current.style.display = \"block\";\n      callbacks.current.onPlayer?.(undefined);\n    };\n    // `speed` is applied below without remaking; `steps` by value.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [motion, loop, autoplay, hold, duration, stepsKey, trigger, pauseWhenHidden, playOnEnter, hideWhenPaused, clock, reducedMotion]);\n\n  useEffect(() => {\n    player.current?.setSpeed(speed ?? 1);\n  }, [speed]);\n\n  return (\n    <span {...rest} style={hostStyle(motion.svg, inline, style)}>\n      <span ref={still} aria-hidden=\"true\" style={LAYER} dangerouslySetInnerHTML={{ __html: markup }} />\n      <span ref={mount} style={LAYER} />\n    </span>\n  );\n}\n\nexport interface VectorEffectProps extends Omit<SvgPlayerViewProps, \"motion\" | \"id\"> {\n  /** A vector effect's catalog id (`\"drip-text\"`), or the effect itself. */\n  id: string | VectorEffectDefinition;\n  /** Control values; missing ones take the preset's, then the defaults. */\n  values?: Record<string, ControlValue>;\n  /** A preset's name to start from. */\n  preset?: string;\n  /** The host element's own `id`. */\n  elementId?: string;\n}\n\n/**\n * Plays a catalog vector effect: `<VectorEffect id=\"drip-text\" values={{ word: \"Slop\" }} loop={false} />`.\n * Its `hold` and `trigger` are used unless given. With an `inline` control\n * set (drip text's), it is sized as a word in the line (see `inline`).\n * Throws when `id` is not a vector effect.\n */\nexport function VectorEffect(props: VectorEffectProps) {\n  const { id, values, preset, elementId, ...rest } = props;\n  const effect = typeof id === \"string\" ? getEffect(id) : id;\n  if (!effect || effect.kind !== \"vector\")\n    throw new Error(`\"${typeof id === \"string\" ? id : effect?.id}\" is not a vector effect; pick one from findEffects({ kind: \"vector\" })`);\n  const valuesKey = JSON.stringify(values ?? {});\n  const motion = useMemo(\n    () => renderVectorEffect(effect, effectDefaults(effect, { preset, values })),\n    // Values by content, so an inline object literal does not restart it.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [effect, preset, valuesKey],\n  );\n  return (\n    <SvgPlayerView\n      id={elementId}\n      motion={motion}\n      hold={effect.hold}\n      trigger={effect.trigger}\n      inline={values?.inline === true}\n      {...rest}\n    />\n  );\n}\n\nexport type { SvgPlayer, SvgMotion, SvgTrigger };\n"],"mappings":"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","names":[]}

package/dist/{svg-DNEreR2p.d.ts → svg-XugR-6Ec.d.ts}

@@ -265,7 +265,10 @@ interface SvgPlayerOptions extends SvgViewOptions {
     clock?: Clock;
     /** Start playing at once (default `true`). */
     autoplay?: boolean;
-    /** Start again at the end (default `true`). */
+    /**
+     * Start again at the end (default `true`). When `false` it plays once and
+     * stays on the last frame (hidden instead with `hideWhenPaused`).
+     */
     loop?: boolean;
     /** Loop length in ms (default: the picture's own, see {@link svgDuration}, plus `hold`). */
     duration?: number;
@@ -379,4 +382,4 @@ interface AnimateCountOptions {
  */
 declare function animateCount(options: AnimateCountOptions): () => void;
 
-export { type AnimateCountOptions as A, svgMotionIssues as B, type Clock as C, type DataKey as D, EASES as E, svgOpeningTag as F, svgView as G, writtenText as H, ManualClock as M, type SvgMotion as S, type SvgTrigger as a, type EaseName as b, SCRAMBLE_MS as c, STEP_MS as d, SVG_PICTURE as e, type SvgAnimation as f, type SvgBox as g, type SvgElementFrame as h, SvgPlayer as i, type SvgPlayerOptions as j, type SvgView as k, type SvgViewOptions as l, animateCount as m, defaultDataKey as n, formatCount as o, jitter as p, lerpAttr as q, lerpData as r, pageHidden as s, parseSvg as t, realClock as u, stepData as v, stepProgress as w, stepStart as x, svgDuration as y, svgFrame as z };
+export { type AnimateCountOptions as A, svgMotionIssues as B, type Clock as C, type DataKey as D, EASES as E, svgOpeningTag as F, svgView as G, writtenText as H, ManualClock as M, type SvgMotion as S, type SvgTrigger as a, SvgPlayer as b, type EaseName as c, SCRAMBLE_MS as d, STEP_MS as e, SVG_PICTURE as f, type SvgAnimation as g, type SvgBox as h, type SvgElementFrame as i, type SvgPlayerOptions as j, type SvgView as k, type SvgViewOptions as l, animateCount as m, defaultDataKey as n, formatCount as o, jitter as p, lerpAttr as q, lerpData as r, pageHidden as s, parseSvg as t, realClock as u, stepData as v, stepProgress as w, stepStart as x, svgDuration as y, svgFrame as z };

package/dist/{types-B23zI_jp.d.ts → types-9J6NWaN3.d.ts}

@@ -1,5 +1,5 @@
 import { C as ControlValue, a as ControlDef } from './controls-Syr6drzO.js';
-import { S as SvgMotion, a as SvgTrigger } from './svg-DNEreR2p.js';
+import { S as SvgMotion, a as SvgTrigger } from './svg-XugR-6Ec.js';
 
 /** What an effect is for, used to group the catalog. */
 type EffectCategory = "gradient" | "organic" | "pattern" | "light" | "space" | "retro" | "image" | "overlay" | "text" | "morph" | "interaction" | "pyrotechnics" | "timewarp" | "melt" | "electric" | "transition" | "loader" | "data" | "icon";
@@ -111,4 +111,4 @@ declare function colorControl(name: string, hex: string, label?: string): Vector
 /** A number control for vector effects. */
 declare function numberControl(name: string, value: number, min: number, max: number, label?: string, step?: number): VectorControl;
 
-export { type EffectDefinition as E, type ShaderEffect as S, VECTOR_CONTROL_TYPES as V, type EffectCategory as a, EFFECT_CATEGORIES as b, type EffectPreset as c, type VectorControl as d, type VectorEffect as e, colorControl as f, vectorControlIssues as g, vectorControls as h, vectorEffectControls as i, numberControl as n, renderVectorEffect as r, vectorControlDef as v };
+export { type EffectDefinition as E, type ShaderEffect as S, type VectorEffect as V, type EffectCategory as a, EFFECT_CATEGORIES as b, type EffectPreset as c, VECTOR_CONTROL_TYPES as d, type VectorControl as e, colorControl as f, vectorControlIssues as g, vectorControls as h, vectorEffectControls as i, numberControl as n, renderVectorEffect as r, vectorControlDef as v };

package/dist/vector/index.d.ts

@@ -1,5 +1,5 @@
-import { g as SvgBox } from '../svg-DNEreR2p.js';
-export { A as AnimateCountOptions, D as DataKey, E as EASES, b as EaseName, c as SCRAMBLE_MS, d as STEP_MS, e as SVG_PICTURE, f as SvgAnimation, 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, q as lerpAttr, r as lerpData, t as parseSvg, 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-DNEreR2p.js';
+import { h as SvgBox, S as SvgMotion } from '../svg-XugR-6Ec.js';
+export { A as AnimateCountOptions, D as DataKey, E as EASES, c as EaseName, d as SCRAMBLE_MS, e as STEP_MS, f as SVG_PICTURE, g as SvgAnimation, i as SvgElementFrame, b as SvgPlayer, j as SvgPlayerOptions, a as SvgTrigger, k as SvgView, l as SvgViewOptions, m as animateCount, n as defaultDataKey, o as formatCount, q as lerpAttr, r as lerpData, t as parseSvg, 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';
 
 /**
  * Shape morphing: any SVG paths turned into paths with the same structure, so
@@ -28,6 +28,38 @@ declare function morphSequence(paths: readonly string[], options?: MorphOptions)
  */
 declare function morphPaths(from: string, to: string, options?: MorphOptions): [string, string];
 
+/**
+ * An {@link SvgMotion}'s frame as markup, with no DOM: for server rendering
+ * (a still that hydrates without a blank flash), reduced motion and other
+ * places a live player is not wanted.
+ */
+
+/** A `viewBox` attribute's box, or undefined when it has none or it is malformed. */
+declare function parseViewBox(value: string | null | undefined): SvgBox | undefined;
+/** The `viewBox` on an SVG's opening tag (see {@link parseViewBox}). */
+declare function svgViewBox(markup: string): SvgBox | undefined;
+interface SvgFrameMarkupOptions {
+    /**
+     * The time shown, in ms: a number, `"first"` (0) or `"last"` (the end of
+     * its last change, see `svgDuration`; the default).
+     */
+    at?: number | "first" | "last";
+    /** Step start times in ms, as a player's `steps` (default none). */
+    steps?: readonly number[];
+}
+/**
+ * The picture of an {@link SvgMotion} at a moment, as `<svg>` markup made safe
+ * the way `parseSvg` makes it (no scripts, handlers, `<foreignObject>` or
+ * outside links), with no DOM needed: render it on a server, show it under
+ * `prefers-reduced-motion`, or anywhere a still will do. It is sized to fill
+ * its container, as `SvgPlayer` draws it.
+ *
+ * It matches the player's frame except where that needs layout: a change
+ * `along` a path, and a `view` that frames an element by id, stay where the
+ * markup puts them. Undefined when `motion.svg` is not an `<svg>`.
+ */
+declare function svgFrameMarkup(motion: SvgMotion, options?: SvgFrameMarkupOptions): string | undefined;
+
 type BoxFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 type BoxAlignment = 'topLeft' | 'topCenter' | 'topRight' | 'centerLeft' | 'center' | 'centerRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
 interface FittedBoxResult {
@@ -81,4 +113,4 @@ interface FormatUnitOptions {
  */
 declare function formatUnit(value: number, format?: UnitFormat, options?: FormatUnitOptions): string;
 
-export { type BoxAlignment, type BoxFit, type FittedBoxResult, type FormatUnitOptions, type MorphOptions, type StackLayoutOptions, SvgBox, type UnitFormat, computeBoxFit, formatUnit, layoutStack, morphPaths, morphSequence, remap, stepVariant };
+export { type BoxAlignment, type BoxFit, type FittedBoxResult, type FormatUnitOptions, type MorphOptions, type StackLayoutOptions, SvgBox, type SvgFrameMarkupOptions, SvgMotion, type UnitFormat, computeBoxFit, formatUnit, layoutStack, morphPaths, morphSequence, parseViewBox, remap, stepVariant, svgFrameMarkup, svgViewBox };

package/dist/vector/index.js

@@ -4,7 +4,12 @@ import {
   layoutStack,
   remap,
   stepVariant
-} from "../chunk-H355R6U4.js";
+} from "../chunk-VP6IEWIK.js";
+import {
+  parseViewBox,
+  svgFrameMarkup,
+  svgViewBox
+} from "../chunk-DVVQRZJ5.js";
 import {
   EASES,
   SCRAMBLE_MS,
@@ -26,7 +31,7 @@ import {
   svgOpeningTag,
   svgView,
   writtenText
-} from "../chunk-UJDQJK2O.js";
+} from "../chunk-4RGHZWQC.js";
 import {
   morphPaths,
   morphSequence
@@ -49,6 +54,7 @@ export {
   morphPaths,
   morphSequence,
   parseSvg,
+  parseViewBox,
   remap,
   stepData,
   stepProgress,
@@ -56,9 +62,11 @@ export {
   stepVariant,
   svgDuration,
   svgFrame,
+  svgFrameMarkup,
   svgMotionIssues,
   svgOpeningTag,
   svgView,
+  svgViewBox,
   writtenText
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/flair",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "Web visual effects and motion graphics: WebGL2 shader effects, animated vector effects, a catalog of ready-made effects, and a UI-agnostic, agent-ready effect editor.",
   "author": "Pixerate",
   "license": "MIT",
@@ -38,6 +38,10 @@
       "types": "./dist/vector/index.d.ts",
       "import": "./dist/vector/index.js"
     },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
     "./node": {
       "types": "./dist/node.d.ts",
       "import": "./dist/node.js"
@@ -57,25 +61,34 @@
     "effects",
     "generative",
     "editor",
-    "ai-agents"
+    "ai-agents",
+    "react"
   ],
   "dependencies": {
     "commander": "^12.0.0",
     "gifenc": "^1.0.3"
   },
   "peerDependencies": {
-    "@pixerate/editor": ">=0.29.0 <1"
+    "@pixerate/editor": ">=0.29.0 <1",
+    "react": ">=18"
   },
   "peerDependenciesMeta": {
     "@pixerate/editor": {
       "optional": true
+    },
+    "react": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.12",
     "@pixerate/editor": "^0.29.0",
     "@types/node": "^24.19.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "jsdom": "^30.1.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "tsup": "^8.5",
     "typescript": "^5.9",
     "vitest": "^4.1.11"