flowsvg 0.1.1 → 0.2.0

package/dist/adapters/react.d.ts

@@ -10,8 +10,12 @@ export interface FlowPlayerProps {
     document: DiagramDocument;
     /** Positive playback multiplier; omit to use the player default. */
     speed?: number;
+    /** Defaults to false. Changes update live loop mode without rebuilding the player. */
+    loop?: boolean;
     theme?: ThemeName;
     controls?: boolean;
+    /** Defaults to false. Enable GIF downloads when controls are visible; export is independent of playback. */
+    gifExport?: boolean;
     /** Defaults to false: hover marks borders only. True also highlights backgrounds, including groups. */
     hoverFill?: boolean;
     reducedMotion?: boolean;
@@ -22,6 +26,7 @@ export interface FlowPlayerProps {
     onStepChange?: (state: PlayerState) => void;
     onTimeUpdate?: (state: PlayerState) => void;
     onPlayStateChange?: (state: PlayerState) => void;
+    onLoopChange?: (state: PlayerState) => void;
     onError?: (detail: PlayerErrorDetail) => void;
 }
 /** Imperative controls for a mounted component; calls before mounting or after unmounting throw a not-mounted error. */
@@ -36,6 +41,8 @@ export interface FlowPlayerHandle {
     step(direction: 1 | -1): void;
     /** Set a finite positive multiplier; ignore invalid values. */
     setSpeed(speed: number): void;
+    /** Toggle whole-timeline playback without changing the current position or play state. */
+    setLoop(loop: boolean): void;
     /** Reset/pause at zero on success; emit an error and retain playback state if validation fails. */
     load(document: DiagramDocument): void;
     /** Read the current browser-player snapshot. */

package/dist/adapters/react.js

@@ -22,6 +22,7 @@ export const FlowPlayer = forwardRef(function FlowPlayer(props, ref) {
         onStepChange: props.onStepChange,
         onTimeUpdate: props.onTimeUpdate,
         onPlayStateChange: props.onPlayStateChange,
+        onLoopChange: props.onLoopChange,
         onError: props.onError
     };
     useImperativeHandle(ref, () => ({
@@ -30,6 +31,7 @@ export const FlowPlayer = forwardRef(function FlowPlayer(props, ref) {
         seek: (timeMs) => requirePlayer(playerRef).seek(timeMs),
         step: (direction) => requirePlayer(playerRef).step(direction),
         setSpeed: (speed) => requirePlayer(playerRef).setSpeed(speed),
+        setLoop: (loop) => requirePlayer(playerRef).setLoop(loop),
         load: (document) => requirePlayer(playerRef).load(document),
         getState: () => requirePlayer(playerRef).getState()
     }), []);
@@ -40,6 +42,7 @@ export const FlowPlayer = forwardRef(function FlowPlayer(props, ref) {
         const nextOptions = {
             theme: props.theme,
             controls: props.controls,
+            gifExport: props.gifExport,
             hoverFill: props.hoverFill,
             reducedMotion: props.reducedMotion
         };
@@ -53,7 +56,7 @@ export const FlowPlayer = forwardRef(function FlowPlayer(props, ref) {
             // Detach old callbacks before replacement so old lifecycle events cannot reach the new component state.
             eventCleanupRef.current?.();
             existing?.destroy();
-            const player = createPlayer(host, props.document, nextOptions);
+            const player = createPlayer(host, props.document, { ...nextOptions, loop: props.loop ?? existing?.getState().loop });
             // A new instance needs current props even when the separate speed effect has no changed dependency.
             if (props.speed !== undefined)
                 player.setSpeed(props.speed);
@@ -68,12 +71,15 @@ export const FlowPlayer = forwardRef(function FlowPlayer(props, ref) {
             return;
         }
         optionsRef.current = nextOptions;
-    }, [props.document, props.theme, props.controls, props.reducedMotion, props.hoverFill]);
+    }, [props.document, props.theme, props.controls, props.gifExport, props.reducedMotion, props.hoverFill]);
     useEffect(() => {
         const player = playerRef.current;
         if (player && props.speed !== undefined)
             player.setSpeed(props.speed);
     }, [props.speed]);
+    useEffect(() => {
+        playerRef.current?.setLoop(props.loop ?? false);
+    }, [props.loop]);
     useEffect(() => () => {
         eventCleanupRef.current?.();
         eventCleanupRef.current = null;
@@ -96,6 +102,7 @@ function sameOptions(previous, next) {
         return false;
     return previous.theme === next.theme
         && previous.controls === next.controls
+        && previous.gifExport === next.gifExport
         && previous.hoverFill === next.hoverFill
         && previous.reducedMotion === next.reducedMotion;
 }
@@ -110,17 +117,22 @@ function attachPlayerEvents(player, callbacksRef) {
     const onPlayStateChange = (event) => {
         callbacksRef.current.onPlayStateChange?.(event.detail);
     };
+    const onLoopChange = (event) => {
+        callbacksRef.current.onLoopChange?.(event.detail);
+    };
     const onError = (event) => {
         callbacksRef.current.onError?.(event.detail);
     };
     player.element.addEventListener("stepchange", onStepChange);
     player.element.addEventListener("timeupdate", onTimeUpdate);
     player.element.addEventListener("playstatechange", onPlayStateChange);
+    player.element.addEventListener("loopchange", onLoopChange);
     player.element.addEventListener("error", onError);
     return () => {
         player.element.removeEventListener("stepchange", onStepChange);
         player.element.removeEventListener("timeupdate", onTimeUpdate);
         player.element.removeEventListener("playstatechange", onPlayStateChange);
+        player.element.removeEventListener("loopchange", onLoopChange);
         player.element.removeEventListener("error", onError);
     };
 }

package/dist/adapters/vue.d.ts

@@ -10,8 +10,12 @@ export interface FlowPlayerProps {
     document: DiagramDocument;
     /** Positive playback multiplier; omit to use the player default. */
     speed?: number;
+    /** Defaults to false. Changes update live loop mode without rebuilding the player. */
+    loop?: boolean;
     theme?: ThemeName;
     controls?: boolean;
+    /** Defaults to false. Enable GIF downloads when controls are visible; export is independent of playback. */
+    gifExport?: boolean;
     /** Defaults to false: hover marks borders only. True also highlights backgrounds, including groups. */
     hoverFill?: boolean;
     reducedMotion?: boolean;
@@ -22,6 +26,7 @@ export interface FlowPlayerProps {
     onStepChange?: (state: PlayerState) => void;
     onTimeUpdate?: (state: PlayerState) => void;
     onPlayStateChange?: (state: PlayerState) => void;
+    onLoopChange?: (state: PlayerState) => void;
     onError?: (detail: PlayerErrorDetail) => void;
 }
 /** Imperative controls for a mounted component; calls before mounting or after unmounting throw a not-mounted error. */
@@ -36,6 +41,8 @@ export interface FlowPlayerHandle {
     step(direction: 1 | -1): void;
     /** Set a finite positive multiplier; ignore invalid values. */
     setSpeed(speed: number): void;
+    /** Toggle whole-timeline playback without changing the current position or play state. */
+    setLoop(loop: boolean): void;
     /** Reset/pause at zero on success; emit an error and retain playback state if validation fails. */
     load(document: DiagramDocument): void;
     /** Read the current browser-player snapshot. */
@@ -54,10 +61,18 @@ export declare const FlowPlayer: import("vue").DefineComponent<import("vue").Ext
         readonly type: NumberConstructor;
         readonly required: false;
     };
+    readonly loop: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly theme: {
         readonly type: PropType<ThemeName>;
         readonly required: false;
     };
+    readonly gifExport: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly controls: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -94,6 +109,10 @@ export declare const FlowPlayer: import("vue").DefineComponent<import("vue").Ext
         readonly type: PropType<(state: PlayerState) => void>;
         readonly required: false;
     };
+    readonly onLoopChange: {
+        readonly type: PropType<(state: PlayerState) => void>;
+        readonly required: false;
+    };
     readonly onError: {
         readonly type: PropType<(detail: PlayerErrorDetail) => void>;
         readonly required: false;
@@ -104,29 +123,36 @@ export declare const FlowPlayer: import("vue").DefineComponent<import("vue").Ext
     stepchange: (_state: PlayerState) => true;
     timeupdate: (_state: PlayerState) => true;
     playstatechange: (_state: PlayerState) => true;
+    loopchange: (_state: PlayerState) => true;
     error: (_detail: PlayerErrorDetail) => true;
 }, string, import("vue").PublicProps, Readonly<{
     readonly document: DiagramDocument;
 } & {
     readonly style?: CSSProperties | undefined;
     readonly theme?: ThemeName | undefined;
+    readonly reducedMotion?: boolean | undefined;
+    readonly speed?: number | undefined;
     readonly controls?: boolean | undefined;
+    readonly loop?: boolean | undefined;
+    readonly gifExport?: boolean | undefined;
     readonly hoverFill?: boolean | undefined;
-    readonly speed?: number | undefined;
-    readonly reducedMotion?: boolean | undefined;
     readonly initialTimeMs?: number | undefined;
     readonly className?: string | undefined;
     readonly onStepChange?: ((state: PlayerState) => void) | undefined;
     readonly onTimeUpdate?: ((state: PlayerState) => void) | undefined;
     readonly onPlayStateChange?: ((state: PlayerState) => void) | undefined;
+    readonly onLoopChange?: ((state: PlayerState) => void) | undefined;
     readonly onError?: ((detail: PlayerErrorDetail) => void) | undefined;
 } & {
     onError?: ((_detail: PlayerErrorDetail) => any) | undefined;
     onTimeupdate?: ((_state: PlayerState) => any) | undefined;
     onPlaystatechange?: ((_state: PlayerState) => any) | undefined;
     onStepchange?: ((_state: PlayerState) => any) | undefined;
+    onLoopchange?: ((_state: PlayerState) => any) | undefined;
 }>, {
+    readonly reducedMotion: boolean | undefined;
     readonly controls: boolean | undefined;
+    readonly loop: boolean | undefined;
+    readonly gifExport: boolean | undefined;
     readonly hoverFill: boolean | undefined;
-    readonly reducedMotion: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}>;

package/dist/adapters/vue.js

@@ -7,7 +7,9 @@ import { createPlayer } from "../browser/player.js";
 const propsOptions = {
     document: { type: Object, required: true },
     speed: { type: Number, required: false },
+    loop: { type: Boolean, default: undefined },
     theme: { type: String, required: false },
+    gifExport: { type: Boolean, default: undefined },
     controls: { type: Boolean, default: undefined },
     hoverFill: { type: Boolean, default: undefined },
     reducedMotion: { type: Boolean, default: undefined },
@@ -17,6 +19,7 @@ const propsOptions = {
     onStepChange: { type: Function, required: false },
     onTimeUpdate: { type: Function, required: false },
     onPlayStateChange: { type: Function, required: false },
+    onLoopChange: { type: Function, required: false },
     onError: { type: Function, required: false }
 };
 /**
@@ -31,6 +34,7 @@ export const FlowPlayer = defineComponent({
         stepchange: (_state) => true,
         timeupdate: (_state) => true,
         playstatechange: (_state) => true,
+        loopchange: (_state) => true,
         error: (_detail) => true
     },
     setup(props, { attrs, emit, expose }) {
@@ -51,12 +55,14 @@ export const FlowPlayer = defineComponent({
             seek: (timeMs) => requirePlayer().seek(timeMs),
             step: (direction) => requirePlayer().step(direction),
             setSpeed: (speed) => requirePlayer().setSpeed(speed),
+            setLoop: (loop) => requirePlayer().setLoop(loop),
             load: (document) => requirePlayer().load(document),
             getState: () => requirePlayer().getState()
         });
         const currentOptions = () => ({
             theme: props.theme,
             controls: props.controls,
+            gifExport: props.gifExport,
             hoverFill: props.hoverFill,
             reducedMotion: props.reducedMotion
         });
@@ -76,6 +82,11 @@ export const FlowPlayer = defineComponent({
                 emit("playstatechange", state);
                 props.onPlayStateChange?.(state);
             };
+            const onLoopChange = (event) => {
+                const state = event.detail;
+                emit("loopchange", state);
+                props.onLoopChange?.(state);
+            };
             const onError = (event) => {
                 const detail = event.detail;
                 // Vue's error event already invokes the onError prop; an explicit callback would duplicate delivery.
@@ -84,20 +95,22 @@ export const FlowPlayer = defineComponent({
             next.element.addEventListener("stepchange", onStepChange);
             next.element.addEventListener("timeupdate", onTimeUpdate);
             next.element.addEventListener("playstatechange", onPlayStateChange);
+            next.element.addEventListener("loopchange", onLoopChange);
             next.element.addEventListener("error", onError);
             return () => {
                 next.element.removeEventListener("stepchange", onStepChange);
                 next.element.removeEventListener("timeupdate", onTimeUpdate);
                 next.element.removeEventListener("playstatechange", onPlayStateChange);
+                next.element.removeEventListener("loopchange", onLoopChange);
                 next.element.removeEventListener("error", onError);
             };
         };
         // Keep initialApplied across option rebuilds so initialTimeMs is not reapplied.
-        const mount = () => {
+        const mount = (previousLoop) => {
             const host = hostRef.value;
             if (!host || player)
                 return;
-            const next = createPlayer(host, props.document, currentOptions());
+            const next = createPlayer(host, props.document, { ...currentOptions(), loop: props.loop ?? previousLoop });
             player = next;
             optionsSnapshot = currentOptions();
             cleanupEvents = attachEvents(next);
@@ -118,8 +131,9 @@ export const FlowPlayer = defineComponent({
         const rebuild = () => {
             if (!mounted || !player)
                 return;
+            const previousLoop = player.getState().loop;
             unmount();
-            mount();
+            mount(previousLoop);
         };
         onMounted(() => {
             mounted = true;
@@ -130,7 +144,7 @@ export const FlowPlayer = defineComponent({
                 return;
             player.load(next);
         });
-        watch(() => [props.theme, props.controls, props.reducedMotion, props.hoverFill], () => {
+        watch(() => [props.theme, props.controls, props.gifExport, props.reducedMotion, props.hoverFill], () => {
             const next = currentOptions();
             if (!mounted || sameOptions(optionsSnapshot, next))
                 return;
@@ -140,6 +154,7 @@ export const FlowPlayer = defineComponent({
             if (player && speed !== undefined)
                 player.setSpeed(speed);
         });
+        watch(() => props.loop, (loop) => player?.setLoop(loop ?? false));
         onBeforeUnmount(() => {
             mounted = false;
             unmount();
@@ -156,6 +171,7 @@ function sameOptions(previous, next) {
         return false;
     return previous.theme === next.theme
         && previous.controls === next.controls
+        && previous.gifExport === next.gifExport
         && previous.hoverFill === next.hoverFill
         && previous.reducedMotion === next.reducedMotion;
 }

package/dist/adapters/web-component.d.ts

@@ -7,7 +7,11 @@ declare const HTMLElementBase: ElementBase;
 /** Declarative options; autoplay defaults to false, speed to 1 and controls to true. */
 export interface FlowPlayerElementOptions extends EvaluateOptions {
     autoplay?: boolean;
+    /** Defaults to false; loop is a live playback preference, independent of GIF loopCount. */
+    loop?: boolean;
     controls?: boolean;
+    /** Defaults to false. Enable GIF download controls; ignored when controls is false. */
+    gifExport?: boolean;
     /** Defaults to false; true enables background feedback as well as borders on hover. */
     hoverFill?: boolean;
     speed?: number;
@@ -17,12 +21,12 @@ export type FlowPlayerElementErrorDetail = Partial<PlayerErrorDetail> & {
     error: Error;
 };
 /**
- * Custom-element adapter for attribute conversion, URL requests and the four playback/error events.
+ * Custom-element adapter for attribute conversion, URL requests and playback/error events.
  * The document property may be assigned before connection; disconnect releases the player/requests but retains the document.
  * Rendering/timeline behavior delegates to createPlayer; registration requires an explicit defineFlowPlayer call.
  */
 export declare class FlowPlayerElement extends HTMLElementBase {
-    static readonly observedAttributes: readonly ["document", "src", "autoplay", "controls", "speed", "theme", "reduced-motion", "hover-fill"];
+    static readonly observedAttributes: readonly ["document", "src", "autoplay", "controls", "speed", "theme", "reduced-motion", "hover-fill", "gif-export", "loop"];
     private player;
     private playerHost;
     private sourceAbort;
@@ -41,6 +45,9 @@ export declare class FlowPlayerElement extends HTMLElementBase {
     /** Whether to autoplay; false pauses a mounted player. */
     get autoplay(): boolean;
     set autoplay(value: boolean);
+    /** Live loop mode, reflected by the loop attribute; changes retain time and play state. */
+    get loop(): boolean;
+    set loop(value: boolean);
     /** Controls default on; an explicit false is retained in HTML as controls="false". */
     get controls(): boolean;
     set controls(value: boolean);
@@ -56,6 +63,9 @@ export declare class FlowPlayerElement extends HTMLElementBase {
     /** Hover paints only borders by default. The hover-fill attribute enables background and content feedback. */
     get hoverFill(): boolean;
     set hoverFill(value: boolean);
+    /** Opt-in GIF controls, reflected by the gif-export attribute; defaults to false. */
+    get gifExport(): boolean;
+    set gifExport(value: boolean);
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, _oldValue: string | null, value: string | null): void;
@@ -69,6 +79,8 @@ export declare class FlowPlayerElement extends HTMLElementBase {
     step(direction: 1 | -1): void;
     /** Set the speed property, retaining it for future mounts; ignore non-finite or non-positive values. */
     setSpeed(value: number): void;
+    /** Set loop mode and retain it for future mounts. */
+    setLoop(value: boolean): void;
     /** Return undefined before mounting or after destruction. */
     getState(): PlayerState | undefined;
     /** Explicitly release the player and requests; the manual-destruction flag resets on the next connection. */

package/dist/adapters/web-component.js

@@ -12,7 +12,7 @@ const HTMLElementBase = (typeof HTMLElement === "undefined"
     }
     : HTMLElement);
 /**
- * Custom-element adapter for attribute conversion, URL requests and the four playback/error events.
+ * Custom-element adapter for attribute conversion, URL requests and playback/error events.
  * The document property may be assigned before connection; disconnect releases the player/requests but retains the document.
  * Rendering/timeline behavior delegates to createPlayer; registration requires an explicit defineFlowPlayer call.
  */
@@ -25,7 +25,9 @@ export class FlowPlayerElement extends HTMLElementBase {
         "speed",
         "theme",
         "reduced-motion",
-        "hover-fill"
+        "hover-fill",
+        "gif-export",
+        "loop"
     ];
     player;
     playerHost;
@@ -67,6 +69,13 @@ export class FlowPlayerElement extends HTMLElementBase {
         setBooleanAttribute(this, "autoplay", value);
         this.applyAutoplay();
     }
+    /** Live loop mode, reflected by the loop attribute; changes retain time and play state. */
+    get loop() {
+        return readBooleanAttribute(this, "loop", false);
+    }
+    set loop(value) {
+        setBooleanAttribute(this, "loop", value);
+    }
     /** Controls default on; an explicit false is retained in HTML as controls="false". */
     get controls() {
         return this.controlsOverride ?? readBooleanAttribute(this, "controls", true);
@@ -121,6 +130,13 @@ export class FlowPlayerElement extends HTMLElementBase {
     set hoverFill(value) {
         setBooleanAttribute(this, "hover-fill", value);
     }
+    /** Opt-in GIF controls, reflected by the gif-export attribute; defaults to false. */
+    get gifExport() {
+        return readBooleanAttribute(this, "gif-export", false);
+    }
+    set gifExport(value) {
+        setBooleanAttribute(this, "gif-export", value);
+    }
     connectedCallback() {
         this.connected = true;
         this.manuallyDestroyed = false;
@@ -166,8 +182,12 @@ export class FlowPlayerElement extends HTMLElementBase {
             case "theme":
             case "reduced-motion":
             case "hover-fill":
+            case "gif-export":
                 this.rebuildForOptions();
                 break;
+            case "loop":
+                this.player?.setLoop(this.loop);
+                break;
             case "speed":
                 this.player?.setSpeed(this.speed);
                 break;
@@ -198,6 +218,10 @@ export class FlowPlayerElement extends HTMLElementBase {
     setSpeed(value) {
         this.speed = value;
     }
+    /** Set loop mode and retain it for future mounts. */
+    setLoop(value) {
+        this.loop = value;
+    }
     /** Return undefined before mounting or after destruction. */
     getState() {
         return this.player?.getState();
@@ -307,9 +331,12 @@ export class FlowPlayerElement extends HTMLElementBase {
     }
     forwardPlayerEvents(host) {
         this.removeForwardedEvents();
-        for (const name of ["stepchange", "timeupdate", "playstatechange", "error"]) {
+        for (const name of ["stepchange", "timeupdate", "playstatechange", "loopchange", "error"]) {
             const listener = (event) => {
                 const source = event;
+                if (name === "loopchange") {
+                    setBooleanAttribute(this, "loop", source.detail.loop);
+                }
                 this.dispatchEvent(new CustomEvent(name, {
                     detail: source.detail,
                     bubbles: true,
@@ -332,6 +359,8 @@ export class FlowPlayerElement extends HTMLElementBase {
     playerOptions() {
         return {
             controls: this.controls,
+            loop: this.loop,
+            gifExport: this.gifExport,
             hoverFill: this.hoverFill,
             ...(this.theme ? { theme: this.theme } : {}),
             ...(this.reducedMotion === undefined ? {} : { reducedMotion: this.reducedMotion })

package/dist/browser/controls.d.ts

@@ -1,4 +1,3 @@
-/** Built-in controls consume state and forward actions; the browser player owns evaluation and scheduling. */
 /** Scene selection metadata with its global start time in milliseconds. */
 interface SceneChoice {
     id: string;
@@ -11,23 +10,26 @@ interface ControlActions {
     step(direction: 1 | -1): void;
     seek(timeMs: number): void;
     setSpeed(speed: number): void;
+    toggleLoop(): void;
 }
 /** Player-state projection for controls; the scene list is replaced on document load. */
 interface ControlState {
     timeMs: number;
     totalDuration: number;
     playing: boolean;
+    loop: boolean;
     speed: number;
     sceneId: string | null;
     scenes: readonly SceneChoice[];
 }
 /**
  * Persistent control DOM translates input to commands; render synchronizes labels, progress and disabled states.
- * Own no clock or independent position; time-related controls are disabled for static documents.
+ * Own no clock or independent position; Time-related controls are disabled for static documents.
  */
 export declare class PlayerControls {
     readonly element: HTMLDivElement;
     private readonly play;
+    private readonly loop;
     private readonly previous;
     private readonly next;
     private readonly progress;
@@ -35,7 +37,9 @@ export declare class PlayerControls {
     private readonly speed;
     private sceneChoices;
     constructor(owner: Document, actions: ControlActions);
-    /** Update existing controls; scene choices change by reference and custom speeds are added as options. */
+    /** Update existing controls; custom speeds join the default choices without changing committed state. */
     render(state: ControlState): void;
+    /** Release menu listeners before the player removes its DOM. */
+    destroy(): void;
 }
 export type { SceneChoice };

package/dist/browser/controls.js

@@ -1,11 +1,14 @@
+/** Built-in controls consume state and forward actions; the browser player owns evaluation and scheduling. */
+import { SelectControl } from "./select-control.js";
 const DEFAULT_SPEEDS = [0.5, 1, 1.5, 2];
 /**
  * Persistent control DOM translates input to commands; render synchronizes labels, progress and disabled states.
- * Own no clock or independent position; time-related controls are disabled for static documents.
+ * Own no clock or independent position; Time-related controls are disabled for static documents.
  */
 export class PlayerControls {
     element;
     play;
+    loop;
     previous;
     next;
     progress;
@@ -16,6 +19,9 @@ export class PlayerControls {
         this.element = owner.createElement("div");
         this.element.className = "flowsvg-controls";
         this.play = createButton(owner, "Play", actions.toggle);
+        this.play.className = "flowsvg-play-toggle";
+        this.loop = createButton(owner, "Loop", actions.toggleLoop);
+        this.loop.className = "flowsvg-loop-toggle";
         this.previous = createButton(owner, "Previous step", () => actions.step(-1));
         this.next = createButton(owner, "Next step", () => actions.step(1));
         this.progress = owner.createElement("input");
@@ -24,39 +30,36 @@ export class PlayerControls {
         this.progress.step = "any";
         this.progress.setAttribute("aria-label", "Progress");
         this.progress.addEventListener("input", () => actions.seek(Number(this.progress.value)));
-        this.scene = createSelect(owner, "Scene");
-        this.scene.addEventListener("change", () => {
-            const choice = this.sceneChoices?.find((scene) => scene.id === this.scene.value);
+        this.scene = new SelectControl(owner, "Scene", (value) => {
+            const choice = this.sceneChoices?.find((scene) => scene.id === value);
             if (choice)
                 actions.seek(choice.startMs);
         });
-        this.speed = createSelect(owner, "Speed");
-        this.speed.addEventListener("change", () => actions.setSpeed(Number(this.speed.value)));
-        this.element.append(this.previous, this.play, this.next, this.progress, this.scene, this.speed);
+        this.speed = new SelectControl(owner, "Speed", (value) => actions.setSpeed(Number(value)));
+        this.element.append(this.previous, this.play, this.next, this.progress, this.scene.element, this.speed.element, this.loop);
     }
-    /** Update existing controls; scene choices change by reference and custom speeds are added as options. */
+    /** Update existing controls; custom speeds join the default choices without changing committed state. */
     render(state) {
         const isStatic = state.totalDuration === 0;
         this.play.textContent = state.playing ? "Pause" : "Play";
         this.play.setAttribute("aria-label", this.play.textContent);
-        this.play.disabled = isStatic || (!state.playing && state.timeMs >= state.totalDuration);
+        this.play.disabled = isStatic || (!state.playing && !state.loop && state.timeMs >= state.totalDuration);
+        this.loop.setAttribute("aria-pressed", String(state.loop));
+        this.loop.disabled = isStatic;
         this.previous.disabled = isStatic || state.timeMs <= 0;
         this.next.disabled = isStatic || state.timeMs >= state.totalDuration;
         this.progress.disabled = isStatic;
         this.progress.max = String(state.totalDuration);
         this.progress.value = String(state.timeMs);
-        this.scene.disabled = isStatic;
-        this.speed.disabled = isStatic;
-        if (this.sceneChoices !== state.scenes) {
-            this.sceneChoices = state.scenes;
-            this.scene.replaceChildren(...state.scenes.map((scene) => createOption(this.scene.ownerDocument, scene.id, scene.label)));
-        }
-        this.scene.value = state.sceneId ?? "";
+        this.sceneChoices = state.scenes;
+        this.scene.render(state.scenes.map((scene) => ({ value: scene.id, label: scene.label })), state.sceneId ?? "", isStatic);
         const speeds = [...new Set([...DEFAULT_SPEEDS, state.speed])].sort((left, right) => left - right);
-        if (!Array.from(this.speed.options).some((option) => Number(option.value) === state.speed)) {
-            this.speed.replaceChildren(...speeds.map((speed) => createOption(this.speed.ownerDocument, String(speed), `${speed}×`)));
-        }
-        this.speed.value = String(state.speed);
+        this.speed.render(speeds.map((speed) => ({ value: String(speed), label: `${speed}×` })), String(state.speed), isStatic);
+    }
+    /** Release menu listeners before the player removes its DOM. */
+    destroy() {
+        this.scene.destroy();
+        this.speed.destroy();
     }
 }
 function createButton(owner, label, click) {
@@ -67,14 +70,3 @@ function createButton(owner, label, click) {
     button.addEventListener("click", click);
     return button;
 }
-function createSelect(owner, label) {
-    const select = owner.createElement("select");
-    select.setAttribute("aria-label", label);
-    return select;
-}
-function createOption(owner, value, label) {
-    const option = owner.createElement("option");
-    option.value = value;
-    option.textContent = label;
-    return option;
-}

package/dist/browser/export-controls.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Optional player GIF UI. One task owns its input, abort signal and download resources independently of playback.
+ * The browser exporter stays behind a dynamic import; portable builds replace only that import with an inline bridge.
+ */
+import type { DiagramDocument, ThemeName } from "../core/model.js";
+interface ExportInput {
+    document: DiagramDocument;
+    theme: ThemeName;
+}
+/** Own the visible export state and one cancellable task; destroy silences asynchronous results and releases downloads. */
+export declare class GifExportControls {
+    private readonly owner;
+    private readonly captureInput;
+    readonly element: HTMLSpanElement;
+    private readonly startButton;
+    private readonly cancelButton;
+    private readonly status;
+    private readonly progress;
+    private task;
+    private destroyed;
+    private readonly downloadUrls;
+    constructor(owner: Document, captureInput: () => ExportInput);
+    destroy(): void;
+    /** Reserve the slot and capture input before loading code so repeated clicks and document loads cannot race the import. */
+    private start;
+    private cancel;
+    private run;
+    private isActive;
+    private renderProgress;
+    private download;
+}
+export {};