flowsvg 0.1.0 → 0.2.0

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* Control and canvas focus styles; CSS variables customize controls only. The core theme resolves diagram colors. */
+/* CSS variables style playback and custom choices; core themes own diagram colors. */
 .flowsvg-canvas:focus-visible {
   outline: 3px solid #2563eb;
   outline-offset: 3px;
@@ -9,39 +9,219 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.75rem;
+  padding: 0.875rem 1rem;
+  border-top: 1px solid var(--flowsvg-control-border, #e2e8f0);
   color: var(--flowsvg-control-color, #172033);
   background: var(--flowsvg-control-background, #ffffff);
-  font: 1rem/1.4 system-ui, sans-serif;
+  font: 500 0.8125rem/1.4 system-ui, sans-serif;
+  font-variant-numeric: tabular-nums;
 }
 
-.flowsvg-controls :is(button, input, select) {
+.flowsvg-controls :is(button, input) {
   box-sizing: border-box;
-  min-height: 2.75rem;
+  min-height: var(--flowsvg-control-height, 2.75rem);
   max-width: 100%;
   color: var(--flowsvg-control-color, #172033);
   background: var(--flowsvg-control-background, #ffffff);
-  border: 1px solid var(--flowsvg-control-border, #64748b);
-  border-radius: 0.25rem;
+  border: 1px solid var(--flowsvg-control-border, #d8dee8);
+  border-radius: 0.5rem;
   font: inherit;
   accent-color: var(--flowsvg-control-accent, #2563eb);
+  transition: background-color 160ms ease, border-color 160ms ease;
 }
 
-.flowsvg-controls :is(button, select) {
-  padding: 0.5rem 0.75rem;
+.flowsvg-controls button {
+  padding: var(--flowsvg-control-padding, 0.5rem 0.75rem);
+  cursor: pointer;
 }
 
-.flowsvg-controls :is(button, input, select):focus-visible {
-  outline: 3px solid var(--flowsvg-control-focus, #2563eb);
-  outline-offset: 3px;
+.flowsvg-controls button:enabled:hover,
+.flowsvg-select-trigger:enabled:hover {
+  background: color-mix(in srgb, var(--flowsvg-control-color, #172033) 4%, var(--flowsvg-control-background, #ffffff));
+  border-color: color-mix(in srgb, var(--flowsvg-control-color, #172033) 25%, var(--flowsvg-control-border, #d8dee8));
+}
+
+.flowsvg-controls button:enabled:active,
+.flowsvg-select-trigger:enabled:active {
+  background: color-mix(in srgb, var(--flowsvg-control-color, #172033) 8%, var(--flowsvg-control-background, #ffffff));
+}
+
+.flowsvg-controls .flowsvg-play-toggle {
+  min-width: 4.5rem;
+  color: var(--flowsvg-control-accent, #2563eb);
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 10%, var(--flowsvg-control-background, #ffffff));
+  border-color: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 35%, var(--flowsvg-control-border, #d8dee8));
+  font-weight: 650;
+}
+
+.flowsvg-controls .flowsvg-play-toggle:enabled:hover {
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 17%, var(--flowsvg-control-background, #ffffff));
+}
+
+.flowsvg-controls .flowsvg-play-toggle:enabled:active {
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 23%, var(--flowsvg-control-background, #ffffff));
+}
+
+.flowsvg-controls .flowsvg-loop-toggle[aria-pressed="true"] {
+  color: var(--flowsvg-control-accent, #2563eb);
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 10%, var(--flowsvg-control-background, #ffffff));
+  border-color: var(--flowsvg-control-accent, #2563eb);
+}
+
+.flowsvg-controls :is(button, input):focus-visible {
+  outline: 2px solid var(--flowsvg-control-focus, #2563eb);
+  outline-offset: 2px;
 }
 
 .flowsvg-controls :disabled {
-  opacity: 0.55;
-  cursor: default;
+  opacity: 0.45;
+  cursor: not-allowed;
 }
 
 .flowsvg-controls input[type="range"] {
   flex: 1 1 10rem;
   min-width: 4rem;
+  margin: 0 0.375rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  cursor: pointer;
 }
+
+.flowsvg-controls input[type="range"]:disabled {
+  cursor: not-allowed;
+}
+
+.flowsvg-export-controls {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-inline-start: auto;
+  max-width: 100%;
+}
+
+.flowsvg-export-controls progress {
+  max-width: 7rem;
+  height: 0.375rem;
+  accent-color: var(--flowsvg-control-accent, #2563eb);
+}
+
+.flowsvg-export-controls [role="status"] {
+  font-size: 0.75rem;
+}
+
+.flowsvg-export-controls [role="status"]:empty {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .flowsvg-controls { padding: 0.75rem; }
+  .flowsvg-controls input[type="range"] { flex-basis: 100%; margin: 0; }
+  .flowsvg-export-controls { margin-inline-start: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .flowsvg-controls :is(button, input) { transition: none; }
+}
+
+/* Apply to a host or ancestor; sizing affects controls only, never diagram geometry. */
+.flowsvg-compact {
+  --flowsvg-control-height: 2rem;
+  --flowsvg-control-padding: 0.3125rem 0.625rem;
+}
+
+.flowsvg-select {
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  color: var(--flowsvg-control-color, #172033);
+  font: 500 0.8125rem/1.4 system-ui, sans-serif;
+  font-variant-numeric: tabular-nums;
+}
+
+.flowsvg-select .flowsvg-select-trigger {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+  min-height: var(--flowsvg-control-height, 2.75rem);
+  padding: var(--flowsvg-control-padding, 0.5rem 0.75rem);
+  color: inherit;
+  background: var(--flowsvg-control-background, #ffffff);
+  border: 1px solid var(--flowsvg-control-border, #d8dee8);
+  border-radius: 0.5rem;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.flowsvg-select-trigger::after {
+  content: "";
+  width: 0.375rem;
+  height: 0.375rem;
+  margin: -0.1875rem 0.125rem 0 0;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg);
+}
+
+.flowsvg-select-trigger:focus-visible {
+  outline: 2px solid var(--flowsvg-control-focus, #2563eb);
+  outline-offset: 2px;
+}
+
+.flowsvg-select-trigger:disabled { opacity: 0.45; cursor: not-allowed; }
+
+.flowsvg-select-options {
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 2;
+  inset-block-start: calc(100% + 0.375rem);
+  inset-inline-end: 0;
+  width: max-content;
+  min-width: 100%;
+  max-width: min(22rem, calc(100vw - 2.5rem));
+  max-height: 14rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0.25rem;
+  color: var(--flowsvg-control-color, #172033);
+  background: var(--flowsvg-control-background, #ffffff);
+  border: 1px solid var(--flowsvg-control-border, #d8dee8);
+  border-radius: 0.625rem;
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--flowsvg-control-color, #172033) 14%, transparent);
+}
+
+.flowsvg-controls .flowsvg-select-options {
+  inset-block-start: auto;
+  inset-block-end: calc(100% + 0.375rem);
+}
+
+.flowsvg-select-options [role="option"] {
+  position: relative;
+  padding: 0.5rem 1.875rem 0.5rem 0.625rem;
+  border-radius: 0.375rem;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+
+.flowsvg-select-options [role="option"]:is(:hover, [data-active]) {
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 9%, var(--flowsvg-control-background, #ffffff));
+}
+
+.flowsvg-select-options [aria-selected="true"] {
+  color: var(--flowsvg-control-accent, #2563eb);
+  font-weight: 650;
+}
+
+.flowsvg-select-options [aria-selected="true"]::after {
+  content: "✓";
+  position: absolute;
+  inset-inline-end: 0.625rem;
+}
+
+.flowsvg-compact .flowsvg-play-toggle { min-width: 4rem; }

package/dist/vue.d.ts

@@ -1,132 +1,3 @@
-/**
- * Vue adapter for component lifecycle, props, events and imperative controls.
- * Playback/rendering reuse browser; imports do not create DOM, and the player is created only on mount.
- */
-import { type CSSProperties, type PropType } from "vue";
-import { type PlayerErrorDetail, type PlayerState } from "./browser.js";
-import type { DiagramDocument, ThemeName } from "./core.js";
-/** Vue document, visual options and callbacks; document reference changes trigger a reload. */
-export interface FlowPlayerProps {
-    document: DiagramDocument;
-    /** Positive playback multiplier; omit to use the player default. */
-    speed?: number;
-    theme?: ThemeName;
-    controls?: boolean;
-    /** Defaults to false: hover marks borders only. True also highlights backgrounds, including groups. */
-    hoverFill?: boolean;
-    reducedMotion?: boolean;
-    /** Initial position in milliseconds, applied once; use seek afterward, and document reloads reset to zero. */
-    initialTimeMs?: number;
-    className?: string;
-    style?: CSSProperties;
-    onStepChange?: (state: PlayerState) => void;
-    onTimeUpdate?: (state: PlayerState) => void;
-    onPlayStateChange?: (state: PlayerState) => void;
-    onError?: (detail: PlayerErrorDetail) => void;
-}
-/** Imperative controls for a mounted component; calls before mounting or after unmounting throw a not-mounted error. */
-export interface FlowPlayerHandle {
-    /** Resume from the current position when playback can advance. */
-    play(): void;
-    /** Pause while retaining the current frame. */
-    pause(): void;
-    /** Seek in milliseconds, clamping to the timeline; non-finite values become zero. */
-    seek(timeMs: number): void;
-    /** Pause and jump to a beat boundary; backward from inside a beat goes to that beat's start. */
-    step(direction: 1 | -1): void;
-    /** Set a finite positive multiplier; ignore invalid values. */
-    setSpeed(speed: number): 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. */
-    getState(): PlayerState;
-}
-/**
- * SSR renders only the host; onMounted creates the player and onBeforeUnmount releases it.
- * Document reference changes call load; option changes rebuild, and exposed methods delegate to the browser instance.
- */
-export declare const FlowPlayer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    readonly document: {
-        readonly type: PropType<DiagramDocument>;
-        readonly required: true;
-    };
-    readonly speed: {
-        readonly type: NumberConstructor;
-        readonly required: false;
-    };
-    readonly theme: {
-        readonly type: PropType<ThemeName>;
-        readonly required: false;
-    };
-    readonly controls: {
-        readonly type: PropType<boolean | undefined>;
-        readonly default: undefined;
-    };
-    readonly hoverFill: {
-        readonly type: PropType<boolean | undefined>;
-        readonly default: undefined;
-    };
-    readonly reducedMotion: {
-        readonly type: PropType<boolean | undefined>;
-        readonly default: undefined;
-    };
-    readonly initialTimeMs: {
-        readonly type: NumberConstructor;
-        readonly required: false;
-    };
-    readonly className: {
-        readonly type: StringConstructor;
-        readonly required: false;
-    };
-    readonly style: {
-        readonly type: PropType<CSSProperties>;
-        readonly required: false;
-    };
-    readonly onStepChange: {
-        readonly type: PropType<(state: PlayerState) => void>;
-        readonly required: false;
-    };
-    readonly onTimeUpdate: {
-        readonly type: PropType<(state: PlayerState) => void>;
-        readonly required: false;
-    };
-    readonly onPlayStateChange: {
-        readonly type: PropType<(state: PlayerState) => void>;
-        readonly required: false;
-    };
-    readonly onError: {
-        readonly type: PropType<(detail: PlayerErrorDetail) => void>;
-        readonly required: false;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    stepchange: (_state: PlayerState) => true;
-    timeupdate: (_state: PlayerState) => true;
-    playstatechange: (_state: PlayerState) => true;
-    error: (_detail: PlayerErrorDetail) => true;
-}, string, import("vue").PublicProps, Readonly<{
-    readonly document: DiagramDocument;
-} & {
-    readonly theme?: ThemeName | undefined;
-    readonly style?: CSSProperties | undefined;
-    readonly controls?: 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 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;
-}>, {
-    readonly controls: boolean | undefined;
-    readonly hoverFill: boolean | undefined;
-    readonly reducedMotion: boolean | undefined;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}>;
+/** Public Vue adapter entry. */
+export { FlowPlayer } from "./adapters/vue.js";
+export type { FlowPlayerHandle, FlowPlayerProps } from "./adapters/vue.js";

package/dist/vue.js

@@ -1,161 +1,2 @@
-/**
- * Vue adapter for component lifecycle, props, events and imperative controls.
- * Playback/rendering reuse browser; imports do not create DOM, and the player is created only on mount.
- */
-import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
-import { createPlayer } from "./browser.js";
-const propsOptions = {
-    document: { type: Object, required: true },
-    speed: { type: Number, required: false },
-    theme: { type: String, required: false },
-    controls: { type: Boolean, default: undefined },
-    hoverFill: { type: Boolean, default: undefined },
-    reducedMotion: { type: Boolean, default: undefined },
-    initialTimeMs: { type: Number, required: false },
-    className: { type: String, required: false },
-    style: { type: Object, required: false },
-    onStepChange: { type: Function, required: false },
-    onTimeUpdate: { type: Function, required: false },
-    onPlayStateChange: { type: Function, required: false },
-    onError: { type: Function, required: false }
-};
-/**
- * SSR renders only the host; onMounted creates the player and onBeforeUnmount releases it.
- * Document reference changes call load; option changes rebuild, and exposed methods delegate to the browser instance.
- */
-export const FlowPlayer = defineComponent({
-    name: "FlowPlayer",
-    inheritAttrs: false,
-    props: propsOptions,
-    emits: {
-        stepchange: (_state) => true,
-        timeupdate: (_state) => true,
-        playstatechange: (_state) => true,
-        error: (_detail) => true
-    },
-    setup(props, { attrs, emit, expose }) {
-        const hostRef = ref(null);
-        let player;
-        let cleanupEvents;
-        let optionsSnapshot;
-        let mounted = false;
-        let initialApplied = false;
-        const requirePlayer = () => {
-            if (!player)
-                throw new Error("FlowPlayer is not mounted");
-            return player;
-        };
-        expose({
-            play: () => requirePlayer().play(),
-            pause: () => requirePlayer().pause(),
-            seek: (timeMs) => requirePlayer().seek(timeMs),
-            step: (direction) => requirePlayer().step(direction),
-            setSpeed: (speed) => requirePlayer().setSpeed(speed),
-            load: (document) => requirePlayer().load(document),
-            getState: () => requirePlayer().getState()
-        });
-        const currentOptions = () => ({
-            theme: props.theme,
-            controls: props.controls,
-            hoverFill: props.hoverFill,
-            reducedMotion: props.reducedMotion
-        });
-        const attachEvents = (next) => {
-            const onStepChange = (event) => {
-                const state = event.detail;
-                emit("stepchange", state);
-                props.onStepChange?.(state);
-            };
-            const onTimeUpdate = (event) => {
-                const state = event.detail;
-                emit("timeupdate", state);
-                props.onTimeUpdate?.(state);
-            };
-            const onPlayStateChange = (event) => {
-                const state = event.detail;
-                emit("playstatechange", state);
-                props.onPlayStateChange?.(state);
-            };
-            const onError = (event) => {
-                const detail = event.detail;
-                // Vue's error event already invokes the onError prop; an explicit callback would duplicate delivery.
-                emit("error", detail);
-            };
-            next.element.addEventListener("stepchange", onStepChange);
-            next.element.addEventListener("timeupdate", onTimeUpdate);
-            next.element.addEventListener("playstatechange", onPlayStateChange);
-            next.element.addEventListener("error", onError);
-            return () => {
-                next.element.removeEventListener("stepchange", onStepChange);
-                next.element.removeEventListener("timeupdate", onTimeUpdate);
-                next.element.removeEventListener("playstatechange", onPlayStateChange);
-                next.element.removeEventListener("error", onError);
-            };
-        };
-        // Keep initialApplied across option rebuilds so initialTimeMs is not reapplied.
-        const mount = () => {
-            const host = hostRef.value;
-            if (!host || player)
-                return;
-            const next = createPlayer(host, props.document, currentOptions());
-            player = next;
-            optionsSnapshot = currentOptions();
-            cleanupEvents = attachEvents(next);
-            if (props.speed !== undefined)
-                next.setSpeed(props.speed);
-            if (!initialApplied && props.initialTimeMs !== undefined)
-                next.seek(props.initialTimeMs);
-            initialApplied = true;
-        };
-        // Detach event forwarding first so destruction does not call an unmounted component.
-        const unmount = () => {
-            cleanupEvents?.();
-            cleanupEvents = undefined;
-            player?.destroy();
-            player = undefined;
-            optionsSnapshot = undefined;
-        };
-        const rebuild = () => {
-            if (!mounted || !player)
-                return;
-            unmount();
-            mount();
-        };
-        onMounted(() => {
-            mounted = true;
-            mount();
-        });
-        watch(() => props.document, (next, previous) => {
-            if (!mounted || next === previous || !player)
-                return;
-            player.load(next);
-        });
-        watch(() => [props.theme, props.controls, props.reducedMotion, props.hoverFill], () => {
-            const next = currentOptions();
-            if (!mounted || sameOptions(optionsSnapshot, next))
-                return;
-            rebuild();
-        });
-        watch(() => props.speed, (speed) => {
-            if (player && speed !== undefined)
-                player.setSpeed(speed);
-        });
-        onBeforeUnmount(() => {
-            mounted = false;
-            unmount();
-        });
-        return () => h("div", {
-            ref: hostRef,
-            class: ["flowsvg", props.className, attrs.class],
-            style: [props.style, attrs.style]
-        });
-    }
-});
-function sameOptions(previous, next) {
-    if (!previous)
-        return false;
-    return previous.theme === next.theme
-        && previous.controls === next.controls
-        && previous.hoverFill === next.hoverFill
-        && previous.reducedMotion === next.reducedMotion;
-}
+/** Public Vue adapter entry. */
+export { FlowPlayer } from "./adapters/vue.js";

package/dist/web-component.d.ts

@@ -1,103 +1,3 @@
-/**
- * Web Component boundary: convert attributes/objects/URLs and manage lifecycle while reusing browser playback/rendering.
- * Imports do not register the element; DOM-free imports use a placeholder base, so real registration needs a browser load.
- */
-import { type DiagramDocument, type EvaluateOptions, type ThemeName } from "./core.js";
-import { type PlayerErrorDetail, type PlayerState } from "./browser.js";
-/** Default custom-element name registered by {@link defineFlowPlayer}. */
-export declare const FLOW_PLAYER_TAG = "flowsvg-player";
-type ElementBase = typeof HTMLElement;
-declare const HTMLElementBase: ElementBase;
-/** Declarative options; autoplay defaults to false, speed to 1 and controls to true. */
-export interface FlowPlayerElementOptions extends EvaluateOptions {
-    autoplay?: boolean;
-    controls?: boolean;
-    /** Defaults to false; true enables background feedback as well as borders on hover. */
-    hoverFill?: boolean;
-    speed?: number;
-}
-/** Pre-mount errors may lack player state; mounted errors include available state and the Error. */
-export type FlowPlayerElementErrorDetail = Partial<PlayerErrorDetail> & {
-    error: Error;
-};
-/**
- * Custom-element adapter for attribute conversion, URL requests and the four 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"];
-    private player;
-    private playerHost;
-    private sourceAbort;
-    private requestToken;
-    private connected;
-    private manuallyDestroyed;
-    private currentDocument;
-    private controlsOverride;
-    private readonly forwardedEvents;
-    /** Current object document; assigning undefined clears it, cancels requests and unmounts the player. */
-    get document(): DiagramDocument | undefined;
-    set document(value: DiagramDocument | undefined);
-    /** Document URL resolved against ownerDocument.baseURI; changes cancel obsolete loads. */
-    get src(): string | undefined;
-    set src(value: string | undefined);
-    /** Whether to autoplay; false pauses a mounted player. */
-    get autoplay(): boolean;
-    set autoplay(value: boolean);
-    /** Controls default on; an explicit false is retained in HTML as controls="false". */
-    get controls(): boolean;
-    set controls(value: boolean);
-    /** Positive speed multiplier; invalid attribute text reads as 1, while invalid property assignments are ignored. */
-    get speed(): number;
-    set speed(value: number);
-    /** Explicit light/dark theme; the player falls back to the document theme or light when unset. */
-    get theme(): ThemeName | undefined;
-    set theme(value: ThemeName | undefined);
-    /** undefined follows the system preference; true/false explicitly override it via reduced-motion. */
-    get reducedMotion(): boolean | undefined;
-    set reducedMotion(value: boolean | undefined);
-    /** Hover paints only borders by default. The hover-fill attribute enables background and content feedback. */
-    get hoverFill(): boolean;
-    set hoverFill(value: boolean);
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(name: string, _oldValue: string | null, value: string | null): void;
-    /** Forward controls to the mounted player; calls are inert when no player is mounted. */
-    play(): void;
-    /** Pause the mounted player, retaining its current frame; do nothing before mounting. */
-    pause(): void;
-    /** Seek in milliseconds using browser-player clamping; do nothing before mounting. */
-    seek(timeMs: number): void;
-    /** Pause and jump to a beat boundary; backward from inside a beat goes to that beat's start. */
-    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;
-    /** 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. */
-    destroy(): void;
-    private setDocument;
-    private loadDocumentAttribute;
-    /** AbortController cancels network work; the token also rejects obsolete results already received but not yet applied. */
-    private loadSource;
-    /** Restore an existing playback state during option rebuilds; autoplay applies only to a fresh mount. */
-    private mountPlayer;
-    /** Rebuild for option changes and restore time/playback; document replacement instead follows load's reset-to-zero rule. */
-    private rebuildForOptions;
-    /** Detach forwarding before destruction so teardown cannot forward events from the old instance. */
-    private unmountPlayer;
-    private forwardPlayerEvents;
-    private removeForwardedEvents;
-    private playerOptions;
-    private applyAutoplay;
-    private cancelSourceLoad;
-    private dispatchError;
-}
-/**
- * Register explicitly; repeated calls for the default name return the existing constructor, or undefined without customElements.
- * Load the module with a DOM for real registration, since the HTMLElement base is fixed at module evaluation.
- * @throws {DOMException} From the registry for invalid names or reusing the constructor under another name.
- */
-export declare function defineFlowPlayer(tagName?: string): CustomElementConstructor | undefined;
-export {};
+/** Public Web Component entry. */
+export { FLOW_PLAYER_TAG, FlowPlayerElement, defineFlowPlayer } from "./adapters/web-component.js";
+export type { FlowPlayerElementErrorDetail, FlowPlayerElementOptions } from "./adapters/web-component.js";