@pixerate/flair 0.16.0 → 0.18.0

package/dist/react/index.js.map

@@ -1 +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":[]}
+{"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, svgInlineLayout, 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  /**\n   * Wait to start until scrolled into view. Default `true` when it plays once\n   * (`loop={false}`, no trigger), so a one-shot further down the page does not\n   * finish before anyone sees it; `false` plays at mount.\n   */\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   * With `inline`, keep room for what spills past the word (descenders,\n   * outlines, glows, drips): a margin of the picture's `data-overhang` (see\n   * `svgInlineLayout`), so the lines around it make space instead of being\n   * painted over. Default `false`.\n   */\n  contain?: boolean;\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, contain: boolean | undefined, style?: CSSProperties): CSSProperties {\n  const box = svgViewBox(svg);\n  const aspectRatio = box ? `${box[2]} / ${box[3]}` : undefined;\n  const spill = inline && contain ? svgInlineLayout(svg)?.overhang : undefined;\n  const base: CSSProperties = inline\n    ? {\n        display: \"inline-block\",\n        height: typeof inline === \"string\" ? inline : CAP_HEIGHT,\n        aspectRatio,\n        ...(spill && { margin: `${spill.top}em ${spill.right}em ${spill.bottom}em ${spill.left}em` }),\n      }\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    contain,\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  // A one-shot waits until it is seen.\n  const enter = playOnEnter ?? (loop === false && !trigger);\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: enter,\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, enter, 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, contain, 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/recorder-HKFFHQES.js

@@ -0,0 +1,10 @@
+import {
+  exportMotionGraphic,
+  findChrome
+} from "./chunk-UP6QQVRS.js";
+import "./chunk-VYOMXE6I.js";
+export {
+  exportMotionGraphic,
+  findChrome
+};
+//# sourceMappingURL=recorder-HKFFHQES.js.map

package/dist/{renderer-SNYZu__R.d.ts → renderer-Cn4_d5Qs.d.ts}

@@ -1,9 +1,9 @@
-import { T as TextureSettings, a as ControlDef, C as ControlValue } from './controls-Syr6drzO.js';
+import { T as TextureSettings, a as ControlDef, C as ControlValue } from './controls-Ec6P0Vpy.js';
 
 /** Why an image control's URL could not be shown. */
 declare class ImageLoadError extends Error {
     readonly url: string;
-    constructor(url: string, cause?: unknown);
+    constructor(url: string, cause?: unknown, message?: string);
 }
 /**
  * The long edge, in pixels, SVG images are rasterised at. WebGL2 guarantees
@@ -49,7 +49,26 @@ declare function releaseImages(urls?: Iterable<string>): void;
 interface TextureSource {
     /** The texture for `url`: the image once loaded, a 1 × 1 opaque black placeholder until then. */
     texture(url: string): WebGLTexture | null;
+    /**
+     * The texture of the live source set for the image control `name` (see
+     * {@link TextureCache.setLive}), with its current frame; undefined when
+     * the control has none, so its URL is drawn instead.
+     */
+    liveTexture?(name: string): WebGLTexture | null | undefined;
 }
+/**
+ * A picture that changes while it is shown, for an image control: a playing
+ * `<video>`, or a canvas something else draws on. Videos re-upload when
+ * their frame changes; canvases on every frame drawn.
+ */
+type LiveSource = HTMLVideoElement | HTMLCanvasElement | OffscreenCanvas;
+/**
+ * Seeks a video to `time` seconds and settles once the frame there can be
+ * drawn, for stepping a video in time with `ShaderFrames`: `await
+ * seekVideo(video, t); frames.render(t)`. Pause the video first, or it
+ * moves on. The time is clamped to the video's length.
+ */
+declare function seekVideo(video: HTMLVideoElement, time: number): Promise<void>;
 /**
  * The textures of one WebGL context, by image URL. A URL starts loading the
  * first time it is asked for; until it arrives the placeholder is drawn, and
@@ -61,6 +80,7 @@ interface TextureSource {
 declare class TextureCache implements TextureSource {
     private readonly gl;
     private readonly entries;
+    private readonly live;
     private readonly onLoad;
     private readonly load;
     private placeholder;
@@ -70,6 +90,27 @@ declare class TextureCache implements TextureSource {
     /** Starts loading `url` if it is new. */
     request(url: string): void;
     private entry;
+    /**
+     * Shows `source` in the image control `name` instead of its URL, frame by
+     * frame (`null` goes back to the URL). Its texture is uploaded as it is
+     * drawn: a video's whenever it has moved to another frame, a canvas's on
+     * every frame. Until a video has a frame it shows black. A video from
+     * another site needs CORS (`crossOrigin = "anonymous"` and the site's
+     * consent); without it the upload fails, `onLoad` hears an
+     * {@link ImageLoadError}, and the control shows black.
+     */
+    setLive(name: string, source: LiveSource | null): void;
+    liveTexture(name: string): WebGLTexture | null | undefined;
+    /**
+     * Whether a live video has moved to a frame not yet drawn (or has its
+     * first frame ready), so a paused preview knows to draw again.
+     */
+    liveChanged(): boolean;
+    /**
+     * Settles once every live video has a frame to show. Rejects with an
+     * {@link ImageLoadError} when one fails to load.
+     */
+    liveReady(): Promise<void>;
     /** The error for `url`, if it failed to load. */
     error(url: string): ImageLoadError | null;
     /**
@@ -183,8 +224,9 @@ interface FrameState {
 /**
  * Draws one frame of a compiled shader into the bound framebuffer, from (0, 0).
  * Image controls are bound to texture units 0, 1, … in source order, with
- * textures from `textures` (a {@link TextureCache} for the same context);
- * without it they sample nothing.
+ * textures from `textures` (a {@link TextureCache} for the same context): a
+ * control's live source when it has one, else its URL's image. Without
+ * `textures` they sample nothing.
  */
 declare function drawFrame(gl: WebGL2RenderingContext, shader: CompiledShader, controls: ControlDef[], values: Record<string, ControlValue> | undefined, state: FrameState, textures?: TextureSource): void;
 /**
@@ -237,6 +279,8 @@ declare class ShaderRenderer {
     private readonly alpha;
     private shader;
     private textures;
+    /** Live sources by image control, kept to set again on a restored context. */
+    private live;
     private controls;
     private values;
     private source;
@@ -267,7 +311,7 @@ declare class ShaderRenderer {
     onStats?: (stats: RendererStats) => void;
     /** Called with `true` when the GL context is lost and `false` once it is restored and recompiled. */
     onContextLost?: (lost: boolean) => void;
-    /** Called when an image control's URL cannot be loaded; the control shows black. */
+    /** Called when an image control's URL (or live video) cannot be loaded; the control shows black. */
     onImageError?: (error: ImageLoadError) => void;
     /**
      * Creates a canvas in `target` (with `className` or options), or attaches to an existing
@@ -285,8 +329,20 @@ declare class ShaderRenderer {
      */
     setValues(values: Record<string, ControlValue> | undefined): void;
     /**
-     * Settles once the images the current controls show have loaded. Rejects
-     * with an {@link ImageLoadError} when one cannot be (it shows black).
+     * Shows a `<video>` (or a canvas) in the image control `name` (the
+     * uniform's name, such as `uImage`) in place of its URL, frame by frame;
+     * `null` goes back to the URL. The preview follows the video even while
+     * the shader's own clock is paused, and the video plays, seeks and loops
+     * on its own: the renderer never controls it. A video from another site
+     * needs `crossOrigin = "anonymous"` and CORS, or `onImageError` hears why
+     * it shows black. The value stays as it is, so documents, presets and
+     * agents keep seeing the URL.
+     */
+    setLiveSource(name: string, source: LiveSource | null): void;
+    /**
+     * Settles once the images the current controls show have loaded, and
+     * every live video has a frame. Rejects with an {@link ImageLoadError}
+     * when one cannot be (it shows black).
      */
     ready(): Promise<void>;
     play(): void;
@@ -327,4 +383,4 @@ declare class ShaderRenderer {
     private onRestored;
 }
 
-export { BUILTIN_UNIFORMS as B, type CompileError as C, type FrameState as F, ImageLoadError as I, type RendererStats as R, SVG_EDGE as S, TextureCache as T, VERTEX_SOURCE as V, type CompileStatus as a, type CompileResult as b, type CompiledShader as c, ShaderCompileError as d, ShaderRenderer as e, type ShaderRendererOptions as f, type TextureSource as g, applyTextureSettings as h, compileShader as i, createContext as j, drawFrame as k, formatCompileError as l, isSvgUrl as m, loadImage as n, preloadImages as o, parseCompileLog as p, resetGlCaches as q, releaseImages as r, sizeSvg as s, wrapSource as w };
+export { BUILTIN_UNIFORMS as B, type CompileError as C, type FrameState as F, ImageLoadError as I, type LiveSource as L, type RendererStats as R, SVG_EDGE as S, TextureCache as T, VERTEX_SOURCE as V, type CompileStatus as a, type CompileResult as b, type CompiledShader as c, ShaderCompileError as d, ShaderRenderer as e, type ShaderRendererOptions as f, type TextureSource as g, applyTextureSettings as h, compileShader as i, createContext as j, drawFrame as k, formatCompileError as l, isSvgUrl as m, loadImage as n, preloadImages as o, parseCompileLog as p, resetGlCaches as q, releaseImages as r, seekVideo as s, sizeSvg as t, wrapSource as w };

package/dist/svelte/index.d.ts

@@ -1,6 +1,6 @@
 import { ActionReturn } from 'svelte/action';
-import { V as VectorEffect } from '../types-9J6NWaN3.js';
-import { C as ControlValue } from '../controls-Syr6drzO.js';
+import { V as VectorEffect } from '../types-kAFjaq2N.js';
+import { C as ControlValue } from '../controls-Ec6P0Vpy.js';
 import { a as SvgTrigger, C as Clock, b as SvgPlayer, S as SvgMotion } from '../svg-XugR-6Ec.js';
 
 /**
@@ -49,7 +49,11 @@ interface SvgPlayerParams {
     trigger?: SvgTrigger;
     /** Pause while scrolled out of view. */
     pauseWhenHidden?: boolean;
-    /** Wait to start until scrolled into view. */
+    /**
+     * Wait to start until scrolled into view. Default `true` when it plays once
+     * (`loop: false`, no trigger), so a one-shot further down the page does not
+     * finish before anyone sees it; `false` plays at mount.
+     */
     playOnEnter?: boolean;
     /** Hide the picture while paused or reset. */
     hideWhenPaused?: boolean;
@@ -78,6 +82,13 @@ interface SvgPlayerParams {
      * viewBox's aspect ratio.
      */
     inline?: boolean | string;
+    /**
+     * With `inline`, keep room for what spills past the word (descenders,
+     * outlines, glows, drips): a margin of the picture's `data-overhang` (see
+     * `svgInlineLayout`), so the lines around it make space instead of being
+     * painted over. Default `false`.
+     */
+    contain?: boolean;
 }
 /** A catalog vector effect by id (or the effect itself), with its values. */
 interface VectorEffectByIdParams extends SvgPlayerParams {
@@ -123,8 +134,8 @@ declare function vectorEffectStill(params: VectorEffectParams): VectorEffectStil
  * destroy. A still from {@link vectorEffectStill} in the element is hidden
  * while the player runs and shown again after; without one, the action makes
  * its own (so reduced motion still shows the picture) and sizes the element
- * from the viewBox, leaving alone any of `position`, `display`, `height` and
- * `aspect-ratio` the element's style already sets.
+ * from the viewBox, leaving alone any of `position`, `display`, `height`,
+ * `aspect-ratio` and `margin` the element's style already sets.
  *
  * For an attachment, `{@attach fromAction(vectorEffect, () => params)}`
  * (`fromAction` is from `svelte/attachments`). Throws when `id` is not a

package/dist/svelte/index.js

@@ -2,25 +2,26 @@ import {
   effectDefaults,
   getEffect,
   renderVectorEffect
-} from "../chunk-KWNFZ5NC.js";
+} from "../chunk-UI5X4D63.js";
 import {
   svgFrameMarkup,
+  svgInlineLayout,
   svgViewBox
-} from "../chunk-DVVQRZJ5.js";
+} from "../chunk-MILF5MRS.js";
 import {
   SvgPlayer
-} from "../chunk-4RGHZWQC.js";
+} from "../chunk-RM3I6WZH.js";
 import "../chunk-OHW7UG6D.js";
 import "../chunk-EHDJ3CPJ.js";
 import "../chunk-WMZQCUFJ.js";
-import "../chunk-WC3VADZC.js";
+import "../chunk-VYOMXE6I.js";
 
 // src/svelte/index.ts
 var CAP_HEIGHT = "0.72em";
 var STILL_ATTR = "data-flair-still";
 var LAYER = "position:absolute;inset:0;display:block";
 function resolve(params, cache) {
-  if (params.motion) return { motion: params.motion, hold: params.hold, trigger: params.trigger, inline: params.inline };
+  if (params.motion) return { motion: params.motion, hold: params.hold, trigger: params.trigger, inline: params.inline, contain: params.contain };
   const { id, values, preset } = params;
   const effect = typeof id === "string" ? getEffect(id) : id;
   if (!effect || effect.kind !== "vector")
@@ -38,10 +39,11 @@ function resolve(params, cache) {
     motion,
     hold: params.hold ?? effect.hold,
     trigger: params.trigger ?? effect.trigger,
-    inline: params.inline ?? values?.inline === true
+    inline: params.inline ?? values?.inline === true,
+    contain: params.contain
   };
 }
-function hostStyle(svg, inline) {
+function hostStyle(svg, inline, contain) {
   const box = svgViewBox(svg);
   const style = [
     ["position", "relative"],
@@ -49,8 +51,11 @@ function hostStyle(svg, inline) {
   ];
   if (inline) style.push(["height", typeof inline === "string" ? inline : CAP_HEIGHT]);
   if (box) style.push(["aspect-ratio", `${box[2]} / ${box[3]}`]);
+  const spill = inline && contain ? svgInlineLayout(svg)?.overhang : void 0;
+  if (spill) style.push(["margin", `${spill.top}em ${spill.right}em ${spill.bottom}em ${spill.left}em`]);
   return style;
 }
+var enters = (r, p) => p.playOnEnter ?? (p.loop === false && !r.trigger);
 function stillMarkup(r, params) {
   const at = params.poster ?? (r.trigger === "hover" || r.trigger === "press" ? "first" : "last");
   return svgFrameMarkup(r.motion, { at, steps: params.steps }) ?? "";
@@ -59,7 +64,7 @@ function vectorEffectStill(params) {
   const r = resolve(params);
   return {
     markup: `<span ${STILL_ATTR} aria-hidden="true" style="${LAYER}">${stillMarkup(r, params)}</span>`,
-    style: hostStyle(r.motion.svg, r.inline).map(([k, v]) => `${k}: ${v}`).join("; ")
+    style: hostStyle(r.motion.svg, r.inline, r.contain).map(([k, v]) => `${k}: ${v}`).join("; ")
   };
 }
 function prefersReducedMotion() {
@@ -75,7 +80,7 @@ function playerKey(r, p) {
     p.steps?.join(","),
     r.trigger,
     p.pauseWhenHidden,
-    p.playOnEnter,
+    enters(r, p),
     p.hideWhenPaused,
     p.clock,
     p.reducedMotion ?? "user"
@@ -104,7 +109,7 @@ function vectorEffect(node, initial) {
   const observer = typeof MutationObserver === "function" ? new MutationObserver(reattach) : void 0;
   observer?.observe(node, { childList: true });
   const size = () => {
-    const style = hostStyle(resolved.motion.svg, resolved.inline);
+    const style = hostStyle(resolved.motion.svg, resolved.inline, resolved.contain);
     for (const [prop, value] of style) {
       if (!sized.has(prop) && node.style.getPropertyValue(prop)) continue;
       node.style.setProperty(prop, value);
@@ -143,7 +148,7 @@ function vectorEffect(node, initial) {
       steps: params.steps,
       trigger: resolved.trigger,
       pauseWhenHidden: params.pauseWhenHidden,
-      playOnEnter: params.playOnEnter,
+      playOnEnter: enters(resolved, params),
       hideWhenPaused: params.hideWhenPaused,
       clock: params.clock,
       // The latest params' callback, without remaking the player.

package/dist/svelte/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/svelte/index.ts"],"sourcesContent":["/**\n * Svelte 5 bindings for Flair's vector effects, written as plain TypeScript so\n * they need no Svelte compiler: the `vectorEffect` action plays a catalog\n * effect (or any {@link SvgMotion}) in an element, and `vectorEffectStill`\n * gives the markup and style of its still for server rendering.\n *\n * ```svelte\n * <script>\n *   import { vectorEffect, vectorEffectStill } from \"@pixerate/flair/svelte\";\n *   const params = { id: \"drip-text\", values: { word: \"Slop\" }, loop: false };\n *   const still = vectorEffectStill(params);\n * </script>\n *\n * <span use:vectorEffect={params} style={still.style}>{@html still.markup}</span>\n * ```\n *\n * The still is in place from the first paint; the live `SvgPlayer` takes over\n * after mount and is disposed on destroy. Under `prefers-reduced-motion:\n * reduce` the still stays.\n *\n * Needs Svelte 5 (an optional peer dependency of the package); only its types\n * are imported.\n *\n * @packageDocumentation\n */\n\nimport type { ActionReturn } from \"svelte/action\";\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/** 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/** Marks the still's layer, so the action can find it (and hide it while the player runs). */\nconst STILL_ATTR = \"data-flair-still\";\n\nconst LAYER = \"position:absolute;inset:0;display:block\";\n\n/** When to leave the still in place of the animation. */\nexport type ReducedMotion = \"user\" | \"always\" | \"never\";\n\n/** Options shared by an effect by id and a motion of your own. */\nexport interface SvgPlayerParams {\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); changed without remaking the player. */\n  speed?: number;\n  /** Ms to rest on the last frame before looping (default 600, or the effect's). */\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`; default the effect's). */\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 and instead of it under reduced\n   * motion: `\"last\"` (default; the rest frame, `\"first\"` for a hover or press\n   * 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). Default: the effect's `inline`\n   * control. Otherwise it is a block as wide as its container with the\n   * viewBox's aspect ratio.\n   */\n  inline?: boolean | string;\n}\n\n/** A catalog vector effect by id (or the effect itself), with its values. */\nexport interface VectorEffectByIdParams extends SvgPlayerParams {\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. Compared by content. */\n  values?: Record<string, ControlValue>;\n  /** A preset's name to start from. */\n  preset?: string;\n  motion?: never;\n}\n\n/** Any {@link SvgMotion}; a new object restarts the player. */\nexport interface SvgMotionParams extends SvgPlayerParams {\n  /** The picture and its animations. */\n  motion: SvgMotion;\n  id?: never;\n  values?: never;\n  preset?: never;\n}\n\n/** What `vectorEffect` and `vectorEffectStill` take: an effect by `id`, or a `motion`. */\nexport type VectorEffectParams = VectorEffectByIdParams | SvgMotionParams;\n\n/** A still of the picture, for `{@html markup}` inside an element with `style`. */\nexport interface VectorEffectStill {\n  /** The still's layer: safe `<svg>` markup (see `svgFrameMarkup`) in an absolutely placed `<span>`. */\n  markup: string;\n  /** The host's inline style: its position and size from the viewBox. */\n  style: string;\n}\n\ninterface Resolved {\n  motion: SvgMotion;\n  hold?: number;\n  trigger?: SvgTrigger;\n  inline?: boolean | string;\n}\n\n/** Remembers the last motion made from an effect, so values compared by content do not remake it. */\ntype MotionCache = { key: string; effect: VectorEffectDefinition; motion: SvgMotion };\n\nfunction resolve(params: VectorEffectParams, cache?: { current?: MotionCache }): Resolved {\n  if (params.motion) return { motion: params.motion, hold: params.hold, trigger: params.trigger, inline: params.inline };\n  const { id, values, preset } = params as VectorEffectByIdParams;\n  const effect = typeof id === \"string\" ? getEffect(id) : id;\n  if (!effect || effect.kind !== \"vector\")\n    throw new Error(\n      `\"${typeof id === \"string\" ? id : (effect?.id ?? id)}\" is not a vector effect; pick one from findEffects({ kind: \"vector\" }), or pass a motion`,\n    );\n  const key = JSON.stringify([preset ?? null, values ?? {}]);\n  let motion: SvgMotion;\n  if (cache?.current && cache.current.effect === effect && cache.current.key === key) motion = cache.current.motion;\n  else {\n    motion = renderVectorEffect(effect, effectDefaults(effect, { preset, values }));\n    if (cache) cache.current = { key, effect, motion };\n  }\n  return {\n    motion,\n    hold: params.hold ?? effect.hold,\n    trigger: params.trigger ?? effect.trigger,\n    inline: params.inline ?? values?.inline === true,\n  };\n}\n\n/** The host's sizing from the picture's viewBox, so the still and the player take the same room. */\nfunction hostStyle(svg: string, inline: boolean | string | undefined): [string, string][] {\n  const box = svgViewBox(svg);\n  const style: [string, string][] = [\n    [\"position\", \"relative\"],\n    [\"display\", inline ? \"inline-block\" : \"block\"],\n  ];\n  if (inline) style.push([\"height\", typeof inline === \"string\" ? inline : CAP_HEIGHT]);\n  if (box) style.push([\"aspect-ratio\", `${box[2]} / ${box[3]}`]);\n  return style;\n}\n\nfunction stillMarkup(r: Resolved, params: SvgPlayerParams): string {\n  const at = params.poster ?? (r.trigger === \"hover\" || r.trigger === \"press\" ? \"first\" : \"last\");\n  return svgFrameMarkup(r.motion, { at, steps: params.steps }) ?? \"\";\n}\n\n/**\n * The still of an effect or motion, for server rendering: put `markup` in the\n * element that has the `vectorEffect` action, with `style` as its style, so\n * the page shows the picture before the player starts (and instead of it\n * under reduced motion), in the room the player will take.\n * Throws when `id` is not a vector effect.\n */\nexport function vectorEffectStill(params: VectorEffectParams): VectorEffectStill {\n  const r = resolve(params);\n  return {\n    markup: `<span ${STILL_ATTR} aria-hidden=\"true\" style=\"${LAYER}\">${stillMarkup(r, params)}</span>`,\n    style: hostStyle(r.motion.svg, r.inline)\n      .map(([k, v]) => `${k}: ${v}`)\n      .join(\"; \"),\n  };\n}\n\nfunction prefersReducedMotion(): boolean {\n  return typeof matchMedia === \"function\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\n/** The options whose change remakes the player (`speed` is set on it instead). */\nfunction playerKey(r: Resolved, p: SvgPlayerParams): unknown[] {\n  return [\n    r.motion,\n    p.loop,\n    p.autoplay,\n    r.hold,\n    p.duration,\n    p.steps?.join(\",\"),\n    r.trigger,\n    p.pauseWhenHidden,\n    p.playOnEnter,\n    p.hideWhenPaused,\n    p.clock,\n    p.reducedMotion ?? \"user\",\n  ];\n}\n\n/**\n * A Svelte action that plays a vector effect in its element:\n * `<span use:vectorEffect={{ id: \"drip-text\", values: { word: \"Slop\" }, loop: false }} />`.\n *\n * It makes an `SvgPlayer` in a layer of its own, remakes it when the params\n * change (values by content; `speed` without remaking) and disposes it on\n * destroy. A still from {@link vectorEffectStill} in the element is hidden\n * while the player runs and shown again after; without one, the action makes\n * its own (so reduced motion still shows the picture) and sizes the element\n * from the viewBox, leaving alone any of `position`, `display`, `height` and\n * `aspect-ratio` the element's style already sets.\n *\n * For an attachment, `{@attach fromAction(vectorEffect, () => params)}`\n * (`fromAction` is from `svelte/attachments`). Throws when `id` is not a\n * vector effect.\n */\nexport function vectorEffect(node: HTMLElement, initial: VectorEffectParams): ActionReturn<VectorEffectParams> {\n  const cache: { current?: MotionCache } = {};\n  const doc = node.ownerDocument;\n  const mount = doc.createElement(\"span\");\n  mount.style.cssText = LAYER;\n  node.appendChild(mount);\n\n  let params = initial;\n  let resolved = resolve(params, cache);\n  let player: SvgPlayer | undefined;\n  let key: unknown[] = [];\n  /** The still the action made itself, when the element had none. */\n  let ownStill: HTMLElement | undefined;\n  /** Sizing properties the action set (the element's own style had them empty). */\n  const sized = new Set<string>();\n\n  const stills = () => node.querySelectorAll<HTMLElement>(`:scope > [${STILL_ATTR}]`);\n  const showStills = (show: boolean) => {\n    for (const s of stills()) s.style.display = show ? \"block\" : \"none\";\n  };\n  // When the params change Svelte replaces a server still (`{@html}`), and when\n  // it is the element's only child, by setting `innerHTML`, which takes the\n  // player's layer out too: put the layer back, and keep a new still hidden.\n  const reattach = () => {\n    if (mount.parentNode !== node) node.appendChild(mount);\n    if (player) showStills(false);\n  };\n  const observer = typeof MutationObserver === \"function\" ? new MutationObserver(reattach) : undefined;\n  observer?.observe(node, { childList: true });\n\n  const size = () => {\n    const style = hostStyle(resolved.motion.svg, resolved.inline);\n    for (const [prop, value] of style) {\n      if (!sized.has(prop) && node.style.getPropertyValue(prop)) continue;\n      node.style.setProperty(prop, value);\n      sized.add(prop);\n    }\n    // A property the new sizing drops (`height` when no longer inline) is cleared.\n    for (const prop of sized)\n      if (!style.some(([p]) => p === prop)) {\n        node.style.removeProperty(prop);\n        sized.delete(prop);\n      }\n  };\n\n  if (stills().length === 0) {\n    ownStill = doc.createElement(\"span\");\n    ownStill.setAttribute(STILL_ATTR, \"\");\n    ownStill.setAttribute(\"aria-hidden\", \"true\");\n    ownStill.style.cssText = LAYER;\n    node.insertBefore(ownStill, mount);\n    size();\n  }\n\n  const stop = () => {\n    if (!player) return;\n    player.dispose();\n    player = undefined;\n    showStills(true);\n    params.onPlayer?.(undefined);\n  };\n\n  const start = () => {\n    const reduced = params.reducedMotion ?? \"user\";\n    if (reduced === \"always\" || (reduced === \"user\" && prefersReducedMotion())) return;\n    player = new SvgPlayer(mount, resolved.motion, {\n      loop: params.loop,\n      autoplay: params.autoplay,\n      speed: params.speed,\n      hold: resolved.hold,\n      duration: params.duration,\n      steps: params.steps,\n      trigger: resolved.trigger,\n      pauseWhenHidden: params.pauseWhenHidden,\n      playOnEnter: params.playOnEnter,\n      hideWhenPaused: params.hideWhenPaused,\n      clock: params.clock,\n      // The latest params' callback, without remaking the player.\n      onPick: (id) => params.onPick?.(id),\n    });\n    showStills(false);\n    params.onPlayer?.(player);\n  };\n\n  const apply = () => {\n    reattach();\n    if (ownStill) {\n      ownStill.innerHTML = stillMarkup(resolved, params);\n      size();\n    }\n    const next = playerKey(resolved, params);\n    if (player && next.every((v, i) => v === key[i])) {\n      player.setSpeed(params.speed ?? 1);\n      return;\n    }\n    key = next;\n    stop();\n    start();\n  };\n\n  apply();\n\n  return {\n    update(next) {\n      params = next;\n      resolved = resolve(params, cache);\n      apply();\n    },\n    destroy() {\n      observer?.disconnect();\n      stop();\n      mount.remove();\n      ownStill?.remove();\n      for (const prop of sized) node.style.removeProperty(prop);\n    },\n  };\n}\n\nexport type { SvgPlayer, SvgMotion, SvgTrigger };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/svelte/index.ts"],"sourcesContent":["/**\n * Svelte 5 bindings for Flair's vector effects, written as plain TypeScript so\n * they need no Svelte compiler: the `vectorEffect` action plays a catalog\n * effect (or any {@link SvgMotion}) in an element, and `vectorEffectStill`\n * gives the markup and style of its still for server rendering.\n *\n * ```svelte\n * <script>\n *   import { vectorEffect, vectorEffectStill } from \"@pixerate/flair/svelte\";\n *   const params = { id: \"drip-text\", values: { word: \"Slop\" }, loop: false };\n *   const still = vectorEffectStill(params);\n * </script>\n *\n * <span use:vectorEffect={params} style={still.style}>{@html still.markup}</span>\n * ```\n *\n * The still is in place from the first paint; the live `SvgPlayer` takes over\n * after mount and is disposed on destroy. Under `prefers-reduced-motion:\n * reduce` the still stays.\n *\n * Needs Svelte 5 (an optional peer dependency of the package); only its types\n * are imported.\n *\n * @packageDocumentation\n */\n\nimport type { ActionReturn } from \"svelte/action\";\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, svgInlineLayout, svgViewBox } from \"../vector/static.js\";\nimport { SvgPlayer, type SvgTrigger } from \"../vector/svg.js\";\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/** Marks the still's layer, so the action can find it (and hide it while the player runs). */\nconst STILL_ATTR = \"data-flair-still\";\n\nconst LAYER = \"position:absolute;inset:0;display:block\";\n\n/** When to leave the still in place of the animation. */\nexport type ReducedMotion = \"user\" | \"always\" | \"never\";\n\n/** Options shared by an effect by id and a motion of your own. */\nexport interface SvgPlayerParams {\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); changed without remaking the player. */\n  speed?: number;\n  /** Ms to rest on the last frame before looping (default 600, or the effect's). */\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`; default the effect's). */\n  trigger?: SvgTrigger;\n  /** Pause while scrolled out of view. */\n  pauseWhenHidden?: boolean;\n  /**\n   * Wait to start until scrolled into view. Default `true` when it plays once\n   * (`loop: false`, no trigger), so a one-shot further down the page does not\n   * finish before anyone sees it; `false` plays at mount.\n   */\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 and instead of it under reduced\n   * motion: `\"last\"` (default; the rest frame, `\"first\"` for a hover or press\n   * 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). Default: the effect's `inline`\n   * control. Otherwise it is a block as wide as its container with the\n   * viewBox's aspect ratio.\n   */\n  inline?: boolean | string;\n  /**\n   * With `inline`, keep room for what spills past the word (descenders,\n   * outlines, glows, drips): a margin of the picture's `data-overhang` (see\n   * `svgInlineLayout`), so the lines around it make space instead of being\n   * painted over. Default `false`.\n   */\n  contain?: boolean;\n}\n\n/** A catalog vector effect by id (or the effect itself), with its values. */\nexport interface VectorEffectByIdParams extends SvgPlayerParams {\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. Compared by content. */\n  values?: Record<string, ControlValue>;\n  /** A preset's name to start from. */\n  preset?: string;\n  motion?: never;\n}\n\n/** Any {@link SvgMotion}; a new object restarts the player. */\nexport interface SvgMotionParams extends SvgPlayerParams {\n  /** The picture and its animations. */\n  motion: SvgMotion;\n  id?: never;\n  values?: never;\n  preset?: never;\n}\n\n/** What `vectorEffect` and `vectorEffectStill` take: an effect by `id`, or a `motion`. */\nexport type VectorEffectParams = VectorEffectByIdParams | SvgMotionParams;\n\n/** A still of the picture, for `{@html markup}` inside an element with `style`. */\nexport interface VectorEffectStill {\n  /** The still's layer: safe `<svg>` markup (see `svgFrameMarkup`) in an absolutely placed `<span>`. */\n  markup: string;\n  /** The host's inline style: its position and size from the viewBox. */\n  style: string;\n}\n\ninterface Resolved {\n  motion: SvgMotion;\n  hold?: number;\n  trigger?: SvgTrigger;\n  inline?: boolean | string;\n  contain?: boolean;\n}\n\n/** Remembers the last motion made from an effect, so values compared by content do not remake it. */\ntype MotionCache = { key: string; effect: VectorEffectDefinition; motion: SvgMotion };\n\nfunction resolve(params: VectorEffectParams, cache?: { current?: MotionCache }): Resolved {\n  if (params.motion) return { motion: params.motion, hold: params.hold, trigger: params.trigger, inline: params.inline, contain: params.contain };\n  const { id, values, preset } = params as VectorEffectByIdParams;\n  const effect = typeof id === \"string\" ? getEffect(id) : id;\n  if (!effect || effect.kind !== \"vector\")\n    throw new Error(\n      `\"${typeof id === \"string\" ? id : (effect?.id ?? id)}\" is not a vector effect; pick one from findEffects({ kind: \"vector\" }), or pass a motion`,\n    );\n  const key = JSON.stringify([preset ?? null, values ?? {}]);\n  let motion: SvgMotion;\n  if (cache?.current && cache.current.effect === effect && cache.current.key === key) motion = cache.current.motion;\n  else {\n    motion = renderVectorEffect(effect, effectDefaults(effect, { preset, values }));\n    if (cache) cache.current = { key, effect, motion };\n  }\n  return {\n    motion,\n    hold: params.hold ?? effect.hold,\n    trigger: params.trigger ?? effect.trigger,\n    inline: params.inline ?? values?.inline === true,\n    contain: params.contain,\n  };\n}\n\n/** The host's sizing from the picture's viewBox, so the still and the player take the same room. */\nfunction hostStyle(svg: string, inline: boolean | string | undefined, contain?: boolean): [string, string][] {\n  const box = svgViewBox(svg);\n  const style: [string, string][] = [\n    [\"position\", \"relative\"],\n    [\"display\", inline ? \"inline-block\" : \"block\"],\n  ];\n  if (inline) style.push([\"height\", typeof inline === \"string\" ? inline : CAP_HEIGHT]);\n  if (box) style.push([\"aspect-ratio\", `${box[2]} / ${box[3]}`]);\n  const spill = inline && contain ? svgInlineLayout(svg)?.overhang : undefined;\n  if (spill) style.push([\"margin\", `${spill.top}em ${spill.right}em ${spill.bottom}em ${spill.left}em`]);\n  return style;\n}\n\n/** Whether to wait until scrolled into view: as asked, else when it plays once. */\nconst enters = (r: Resolved, p: SvgPlayerParams) => p.playOnEnter ?? (p.loop === false && !r.trigger);\n\nfunction stillMarkup(r: Resolved, params: SvgPlayerParams): string {\n  const at = params.poster ?? (r.trigger === \"hover\" || r.trigger === \"press\" ? \"first\" : \"last\");\n  return svgFrameMarkup(r.motion, { at, steps: params.steps }) ?? \"\";\n}\n\n/**\n * The still of an effect or motion, for server rendering: put `markup` in the\n * element that has the `vectorEffect` action, with `style` as its style, so\n * the page shows the picture before the player starts (and instead of it\n * under reduced motion), in the room the player will take.\n * Throws when `id` is not a vector effect.\n */\nexport function vectorEffectStill(params: VectorEffectParams): VectorEffectStill {\n  const r = resolve(params);\n  return {\n    markup: `<span ${STILL_ATTR} aria-hidden=\"true\" style=\"${LAYER}\">${stillMarkup(r, params)}</span>`,\n    style: hostStyle(r.motion.svg, r.inline, r.contain)\n      .map(([k, v]) => `${k}: ${v}`)\n      .join(\"; \"),\n  };\n}\n\nfunction prefersReducedMotion(): boolean {\n  return typeof matchMedia === \"function\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\n/** The options whose change remakes the player (`speed` is set on it instead). */\nfunction playerKey(r: Resolved, p: SvgPlayerParams): unknown[] {\n  return [\n    r.motion,\n    p.loop,\n    p.autoplay,\n    r.hold,\n    p.duration,\n    p.steps?.join(\",\"),\n    r.trigger,\n    p.pauseWhenHidden,\n    enters(r, p),\n    p.hideWhenPaused,\n    p.clock,\n    p.reducedMotion ?? \"user\",\n  ];\n}\n\n/**\n * A Svelte action that plays a vector effect in its element:\n * `<span use:vectorEffect={{ id: \"drip-text\", values: { word: \"Slop\" }, loop: false }} />`.\n *\n * It makes an `SvgPlayer` in a layer of its own, remakes it when the params\n * change (values by content; `speed` without remaking) and disposes it on\n * destroy. A still from {@link vectorEffectStill} in the element is hidden\n * while the player runs and shown again after; without one, the action makes\n * its own (so reduced motion still shows the picture) and sizes the element\n * from the viewBox, leaving alone any of `position`, `display`, `height`,\n * `aspect-ratio` and `margin` the element's style already sets.\n *\n * For an attachment, `{@attach fromAction(vectorEffect, () => params)}`\n * (`fromAction` is from `svelte/attachments`). Throws when `id` is not a\n * vector effect.\n */\nexport function vectorEffect(node: HTMLElement, initial: VectorEffectParams): ActionReturn<VectorEffectParams> {\n  const cache: { current?: MotionCache } = {};\n  const doc = node.ownerDocument;\n  const mount = doc.createElement(\"span\");\n  mount.style.cssText = LAYER;\n  node.appendChild(mount);\n\n  let params = initial;\n  let resolved = resolve(params, cache);\n  let player: SvgPlayer | undefined;\n  let key: unknown[] = [];\n  /** The still the action made itself, when the element had none. */\n  let ownStill: HTMLElement | undefined;\n  /** Sizing properties the action set (the element's own style had them empty). */\n  const sized = new Set<string>();\n\n  const stills = () => node.querySelectorAll<HTMLElement>(`:scope > [${STILL_ATTR}]`);\n  const showStills = (show: boolean) => {\n    for (const s of stills()) s.style.display = show ? \"block\" : \"none\";\n  };\n  // When the params change Svelte replaces a server still (`{@html}`), and when\n  // it is the element's only child, by setting `innerHTML`, which takes the\n  // player's layer out too: put the layer back, and keep a new still hidden.\n  const reattach = () => {\n    if (mount.parentNode !== node) node.appendChild(mount);\n    if (player) showStills(false);\n  };\n  const observer = typeof MutationObserver === \"function\" ? new MutationObserver(reattach) : undefined;\n  observer?.observe(node, { childList: true });\n\n  const size = () => {\n    const style = hostStyle(resolved.motion.svg, resolved.inline, resolved.contain);\n    for (const [prop, value] of style) {\n      if (!sized.has(prop) && node.style.getPropertyValue(prop)) continue;\n      node.style.setProperty(prop, value);\n      sized.add(prop);\n    }\n    // A property the new sizing drops (`height` when no longer inline) is cleared.\n    for (const prop of sized)\n      if (!style.some(([p]) => p === prop)) {\n        node.style.removeProperty(prop);\n        sized.delete(prop);\n      }\n  };\n\n  if (stills().length === 0) {\n    ownStill = doc.createElement(\"span\");\n    ownStill.setAttribute(STILL_ATTR, \"\");\n    ownStill.setAttribute(\"aria-hidden\", \"true\");\n    ownStill.style.cssText = LAYER;\n    node.insertBefore(ownStill, mount);\n    size();\n  }\n\n  const stop = () => {\n    if (!player) return;\n    player.dispose();\n    player = undefined;\n    showStills(true);\n    params.onPlayer?.(undefined);\n  };\n\n  const start = () => {\n    const reduced = params.reducedMotion ?? \"user\";\n    if (reduced === \"always\" || (reduced === \"user\" && prefersReducedMotion())) return;\n    player = new SvgPlayer(mount, resolved.motion, {\n      loop: params.loop,\n      autoplay: params.autoplay,\n      speed: params.speed,\n      hold: resolved.hold,\n      duration: params.duration,\n      steps: params.steps,\n      trigger: resolved.trigger,\n      pauseWhenHidden: params.pauseWhenHidden,\n      playOnEnter: enters(resolved, params),\n      hideWhenPaused: params.hideWhenPaused,\n      clock: params.clock,\n      // The latest params' callback, without remaking the player.\n      onPick: (id) => params.onPick?.(id),\n    });\n    showStills(false);\n    params.onPlayer?.(player);\n  };\n\n  const apply = () => {\n    reattach();\n    if (ownStill) {\n      ownStill.innerHTML = stillMarkup(resolved, params);\n      size();\n    }\n    const next = playerKey(resolved, params);\n    if (player && next.every((v, i) => v === key[i])) {\n      player.setSpeed(params.speed ?? 1);\n      return;\n    }\n    key = next;\n    stop();\n    start();\n  };\n\n  apply();\n\n  return {\n    update(next) {\n      params = next;\n      resolved = resolve(params, cache);\n      apply();\n    },\n    destroy() {\n      observer?.disconnect();\n      stop();\n      mount.remove();\n      ownStill?.remove();\n      for (const prop of sized) node.style.removeProperty(prop);\n    },\n  };\n}\n\nexport type { SvgPlayer, SvgMotion, SvgTrigger };\n"],"mappings":"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","names":[]}

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

@@ -1,10 +1,24 @@
-import { C as ControlValue, a as ControlDef } from './controls-Syr6drzO.js';
+import { C as ControlValue, a as ControlDef } from './controls-Ec6P0Vpy.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";
 /** Every category, in the order the catalog lists them. */
 declare const EFFECT_CATEGORIES: readonly EffectCategory[];
+/**
+ * How a shader effect suits video in its image controls (see
+ * `ShaderRenderer.setLiveSource`):
+ *
+ * - `filter`: it treats each frame on its own, so it works as a live video filter.
+ * - `transition`: it blends two pictures, so it works between two clips.
+ * - `interactive`: it reacts to the pointer over a picture, and works as well over video.
+ * - `stills`: it runs on video but is made for a still picture: it moves the
+ *   picture to fake motion of its own, or needs shapes or features in fixed places.
+ * - `none`: its pictures are not photos (rendered text, a silhouette mask), so video has no place in it.
+ */
+type VideoUse = "filter" | "transition" | "interactive" | "stills" | "none";
+/** Every {@link VideoUse}, best suited to video first. */
+declare const VIDEO_USES: readonly VideoUse[];
 /** Named control values: a look an effect can be switched to. */
 interface EffectPreset {
     name: string;
@@ -36,6 +50,11 @@ interface ShaderEffect extends EffectBase {
      * (`ShaderRenderer`'s `alpha` option) to layer it over a page or picture.
      */
     transparent?: boolean;
+    /**
+     * How it suits video in its image controls. Every effect with an image
+     * control says; effects without one have nothing to show video in.
+     */
+    video?: VideoUse;
 }
 /**
  * A control of a vector effect, declared in a list rather than in the
@@ -96,12 +115,18 @@ declare function vectorEffectControls(effect: Pick<VectorEffect, "motion" | "con
 declare function vectorControlIssues(motion: SvgMotion): string[];
 /** A vector control as a full `ControlDef`, so editors treat both kinds of effect alike. */
 declare function vectorControlDef(control: VectorControl, line?: number): ControlDef;
+/** What a vector effect's colour control takes to paint in the surrounding text's colour (CSS `color`). */
+declare const CURRENT_COLOR = "currentColor";
+/** Whether a colour value is `currentColor` (in any case), which vector effects keep as it is. */
+declare function isCurrentColor(value: unknown): value is string;
 /**
  * A vector effect's motion with its controls filled in. A string that is
  * only a placeholder (an animation's `"{{width}}"`) becomes the value
  * itself, so numbers stay numbers; elsewhere a placeholder becomes its text,
  * escaped in the markup so any text is safe to show. Comments are dropped
- * from the markup. Colours also take "#RRGGBB"; missing values, and values a
+ * from the markup. Colours also take CSS colours (see `parseColor`) and
+ * `currentColor`, which paints in the surrounding text's colour (`derived`
+ * then sees the string "currentColor"); missing values, and values a
  * control cannot take, use defaults. Placeholders no control or derived
  * value fills stay put.
  */
@@ -111,4 +136,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, 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 };
+export { CURRENT_COLOR as C, type EffectDefinition as E, type ShaderEffect as S, type VectorEffect as V, type EffectCategory as a, type VideoUse as b, EFFECT_CATEGORIES as c, type EffectPreset as d, VECTOR_CONTROL_TYPES as e, VIDEO_USES as f, type VectorControl as g, colorControl as h, isCurrentColor as i, vectorControlIssues as j, vectorControls as k, vectorEffectControls as l, numberControl as n, renderVectorEffect as r, vectorControlDef as v };

package/dist/vector/index.d.ts

@@ -38,6 +38,32 @@ declare function morphPaths(from: string, to: string, options?: MorphOptions): [
 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;
+/** How a picture framed for a line of text (a text effect's `inline`) sits in it; see {@link svgInlineLayout}. */
+interface SvgInlineLayout {
+    /** Its viewBox: x, y, width, height. */
+    viewBox: SvgBox;
+    /** Width over height, for its host's CSS `aspect-ratio`. */
+    aspectRatio: number;
+    /**
+     * How far it reaches past its box at rest (descenders, outlines, glows,
+     * drips), in ems of the font size it is set at; 0 where the picture says
+     * nothing (no `data-overhang`).
+     */
+    overhang: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}
+/**
+ * The box and overhang on an SVG's opening tag: its `viewBox`, and
+ * `data-overhang="top right bottom left"` (ems), which text effects write.
+ * Set inline (`height: 0.72em`, the cap height they frame), give the host a
+ * margin of the overhang to keep room for what spills out:
+ * `margin: ${top}em ${right}em ${bottom}em ${left}em`.
+ */
+declare function svgInlineLayout(markup: string): SvgInlineLayout | undefined;
 interface SvgFrameMarkupOptions {
     /**
      * The time shown, in ms: a number, `"first"` (0) or `"last"` (the end of
@@ -113,4 +139,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 SvgFrameMarkupOptions, SvgMotion, type UnitFormat, computeBoxFit, formatUnit, layoutStack, morphPaths, morphSequence, parseViewBox, remap, stepVariant, svgFrameMarkup, svgViewBox };
+export { type BoxAlignment, type BoxFit, type FittedBoxResult, type FormatUnitOptions, type MorphOptions, type StackLayoutOptions, SvgBox, type SvgFrameMarkupOptions, type SvgInlineLayout, SvgMotion, type UnitFormat, computeBoxFit, formatUnit, layoutStack, morphPaths, morphSequence, parseViewBox, remap, stepVariant, svgFrameMarkup, svgInlineLayout, svgViewBox };

package/dist/vector/index.js

@@ -8,8 +8,9 @@ import {
 import {
   parseViewBox,
   svgFrameMarkup,
+  svgInlineLayout,
   svgViewBox
-} from "../chunk-DVVQRZJ5.js";
+} from "../chunk-MILF5MRS.js";
 import {
   EASES,
   SCRAMBLE_MS,
@@ -31,7 +32,7 @@ import {
   svgOpeningTag,
   svgView,
   writtenText
-} from "../chunk-4RGHZWQC.js";
+} from "../chunk-RM3I6WZH.js";
 import {
   morphPaths,
   morphSequence
@@ -63,6 +64,7 @@ export {
   svgDuration,
   svgFrame,
   svgFrameMarkup,
+  svgInlineLayout,
   svgMotionIssues,
   svgOpeningTag,
   svgView,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/flair",
-  "version": "0.16.0",
+  "version": "0.18.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",

package/dist/chunk-DVVQRZJ5.js.map

@@ -1 +0,0 @@
-{"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":[]}