animot-presenter 0.1.2 → 0.2.1

package/dist/element.svelte.d.ts

@@ -3,20 +3,49 @@ import './styles/presenter.css';
 declare class AnimotPresenterElement extends HTMLElement {
     static get observedAttributes(): string[];
     private _component;
+    private _pendingRemount;
+    private _src;
     private _data;
+    private _autoplay;
+    private _loop;
+    private _controls;
+    private _arrows;
+    private _progress;
+    private _keyboard;
+    private _duration;
+    private _startSlide;
     private _onslidechange;
     private _oncomplete;
-    private _mounted;
-    private _props;
-    set data(value: AnimotProject | null);
+    get src(): string | null;
+    set src(v: string | null);
     get data(): AnimotProject | null;
+    set data(v: AnimotProject | null);
+    get autoplay(): boolean;
+    set autoplay(v: boolean);
+    get loop(): boolean;
+    set loop(v: boolean);
+    get controls(): boolean;
+    set controls(v: boolean);
+    get arrows(): boolean;
+    set arrows(v: boolean);
+    get progress(): boolean;
+    set progress(v: boolean);
+    get keyboard(): boolean;
+    set keyboard(v: boolean);
+    get duration(): number | undefined;
+    set duration(v: number | undefined);
+    get startSlide(): number | undefined;
+    set startSlide(v: number | undefined);
+    get onslidechange(): ((index: number, total: number) => void) | null;
     set onslidechange(fn: ((index: number, total: number) => void) | null);
+    get oncomplete(): (() => void) | null;
     set oncomplete(fn: (() => void) | null);
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
     private _buildProps;
-    private _updateProps;
+    private _cancelPendingRemount;
+    private _scheduleRemount;
     private _mount;
     private _unmount;
     next(): void;

package/dist/element.svelte.js

@@ -6,60 +6,86 @@ import { mount, unmount } from 'svelte';
 import AnimotPresenter from './AnimotPresenter.svelte';
 // Inject floating animation CSS into the document (once)
 import './styles/presenter.css';
-const BOOLEAN_ATTRS = new Set(['autoplay', 'loop', 'controls', 'arrows', 'progress', 'keyboard']);
+const BOOLEAN_PROPS = ['autoplay', 'loop', 'controls', 'arrows', 'progress', 'keyboard'];
 class AnimotPresenterElement extends HTMLElement {
     static get observedAttributes() {
         return ['src', 'autoplay', 'loop', 'controls', 'arrows', 'progress', 'keyboard', 'duration', 'start-slide'];
     }
     _component = null;
+    _pendingRemount = null;
+    // Property backing stores — React 19 sets these as properties, not attributes
+    _src = null;
     _data = null;
+    _autoplay = false;
+    _loop = false;
+    _controls = false;
+    _arrows = false;
+    _progress = false;
+    _keyboard = false;
+    _duration = undefined;
+    _startSlide = undefined;
     _onslidechange = null;
     _oncomplete = null;
-    _mounted = false;
-    // Reactive props object that Svelte reads from
-    _props = $state({});
-    set data(value) {
-        this._data = value;
-        this._updateProps();
-    }
-    get data() {
-        return this._data;
-    }
+    // --- Property getters/setters (React 19 sets these directly) ---
+    get src() { return this._src ?? this.getAttribute('src'); }
+    set src(v) { this._src = v; this._scheduleRemount(); }
+    get data() { return this._data; }
+    set data(v) { this._data = v; this._scheduleRemount(); }
+    get autoplay() { return this._autoplay || this.hasAttribute('autoplay'); }
+    set autoplay(v) { this._autoplay = !!v; this._scheduleRemount(); }
+    get loop() { return this._loop || this.hasAttribute('loop'); }
+    set loop(v) { this._loop = !!v; this._scheduleRemount(); }
+    get controls() { return this._controls || this.hasAttribute('controls'); }
+    set controls(v) { this._controls = !!v; this._scheduleRemount(); }
+    get arrows() { return this._arrows || this.hasAttribute('arrows'); }
+    set arrows(v) { this._arrows = !!v; this._scheduleRemount(); }
+    get progress() { return this._progress || this.hasAttribute('progress'); }
+    set progress(v) { this._progress = !!v; this._scheduleRemount(); }
+    get keyboard() { return this._keyboard || this.hasAttribute('keyboard'); }
+    set keyboard(v) { this._keyboard = !!v; this._scheduleRemount(); }
+    get duration() { return this._duration; }
+    set duration(v) { this._duration = v; this._scheduleRemount(); }
+    get startSlide() { return this._startSlide; }
+    set startSlide(v) { this._startSlide = v; this._scheduleRemount(); }
+    get onslidechange() { return this._onslidechange; }
     set onslidechange(fn) {
         this._onslidechange = fn;
-        this._updateProps();
+        this._scheduleRemount();
     }
+    get oncomplete() { return this._oncomplete; }
     set oncomplete(fn) {
         this._oncomplete = fn;
-        this._updateProps();
+        this._scheduleRemount();
     }
     connectedCallback() {
-        this._mounted = true;
         this._mount();
     }
     disconnectedCallback() {
-        this._mounted = false;
+        this._cancelPendingRemount();
         this._unmount();
     }
     attributeChangedCallback() {
-        // Only update props if already mounted — don't remount
-        if (this._mounted && this._component) {
-            this._updateProps();
+        if (this.isConnected && this._component) {
+            this._scheduleRemount();
         }
     }
     _buildProps() {
         const props = {};
-        const src = this.getAttribute('src');
+        // Read from property first (React 19), fall back to attribute (vanilla HTML)
+        const src = this._src ?? this.getAttribute('src');
         if (src)
             props.src = src;
-        for (const attr of BOOLEAN_ATTRS) {
-            props[attr] = this.hasAttribute(attr);
-        }
-        const duration = this.getAttribute('duration');
-        if (duration)
+        props.autoplay = this.autoplay;
+        props.loop = this.loop;
+        props.controls = this.controls;
+        props.arrows = this.arrows;
+        props.progress = this.progress;
+        props.keyboard = this.keyboard;
+        const duration = this._duration ?? this.getAttribute('duration');
+        if (duration != null)
             props.duration = Number(duration);
-        const startSlide = this.getAttribute('start-slide');
-        if (startSlide)
+        const startSlide = this._startSlide ?? this.getAttribute('start-slide');
+        if (startSlide != null)
             props.startSlide = Number(startSlide);
         if (this._data)
             props.data = this._data;
@@ -81,30 +107,41 @@ class AnimotPresenterElement extends HTMLElement {
         }
         return props;
     }
-    _updateProps() {
-        const newProps = this._buildProps();
-        // Update the reactive props object in place so Svelte picks up changes
-        for (const key of Object.keys(newProps)) {
-            this._props[key] = newProps[key];
+    _cancelPendingRemount() {
+        if (this._pendingRemount) {
+            clearTimeout(this._pendingRemount);
+            this._pendingRemount = null;
         }
     }
+    _scheduleRemount() {
+        if (!this.isConnected)
+            return;
+        this._cancelPendingRemount();
+        this._pendingRemount = setTimeout(() => {
+            this._pendingRemount = null;
+            this._unmount();
+            this._mount();
+        }, 0);
+    }
     _mount() {
         if (this._component)
             return;
         if (!this.style.display) {
             this.style.display = 'block';
         }
-        // Build initial props
-        Object.assign(this._props, this._buildProps());
+        if (!this.style.height && !this.getAttribute('style')?.includes('height')) {
+            this.style.height = '100%';
+        }
         this._component = mount(AnimotPresenter, {
             target: this,
-            props: this._props
+            props: this._buildProps()
         });
     }
     _unmount() {
         if (this._component) {
             unmount(this._component);
             this._component = null;
+            this.innerHTML = '';
         }
     }
     next() {

package/dist/engine/utils.d.ts

@@ -1,4 +1,9 @@
+export declare function easeLinear(t: number): number;
+export declare function easeInCubic(t: number): number;
+export declare function easeOutCubic(t: number): number;
 export declare function easeInOutCubic(t: number): number;
+export declare function easeSpring(t: number): number;
+export declare function getEasingFn(name?: string): (t: number) => number;
 export declare function interpolateColor(color1: string, color2: string, progress: number): string;
 export declare function hashFraction(str: string, salt?: number): number;
 export declare function getFloatAnimName(direction: string, seed: string): string;

package/dist/engine/utils.js

@@ -1,6 +1,24 @@
+export function easeLinear(t) { return t; }
+export function easeInCubic(t) { return t * t * t; }
+export function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }
 export function easeInOutCubic(t) {
     return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 }
+export function easeSpring(t) {
+    const c4 = (2 * Math.PI) / 3;
+    return t === 0 ? 0 : t === 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+}
+export function getEasingFn(name) {
+    switch (name) {
+        case 'linear': return easeLinear;
+        case 'ease-in': return easeInCubic;
+        case 'ease-out': return easeOutCubic;
+        case 'spring': return easeSpring;
+        case 'ease': return easeOutCubic;
+        case 'ease-in-out':
+        default: return easeInOutCubic;
+    }
+}
 export function interpolateColor(color1, color2, progress) {
     if (color1 === 'transparent')
         color1 = '#00000000';

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { default as AnimotPresenter } from './AnimotPresenter.svelte';
-export type { AnimotProject, AnimotPresenterProps, Slide, SlideCanvas, CanvasElement, CanvasBackground, TransitionConfig, TransitionType, ProjectSettings, BaseElement, CodeElement, TextElement, ArrowElement, ImageElement, ShapeElement, CounterElement, ChartElement, IconElement, ElementAnimationConfig, FloatingAnimationConfig, ParticlesConfig, ConfettiConfig } from './types';
+export type { AnimotProject, AnimotPresenterProps, Slide, SlideCanvas, CanvasElement, CanvasBackground, TransitionConfig, TransitionType, ProjectSettings, BaseElement, CodeElement, TextElement, ArrowElement, ImageElement, ShapeElement, CounterElement, ChartElement, IconElement, SvgElement, MotionPathElement, PathPoint, MotionPathConfig, ElementAnimationConfig, FloatingAnimationConfig, ParticlesConfig, ConfettiConfig } from './types';

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-export type ElementType = 'code' | 'text' | 'arrow' | 'image' | 'shape' | 'counter' | 'chart' | 'icon';
+export type ElementType = 'code' | 'text' | 'arrow' | 'image' | 'shape' | 'counter' | 'chart' | 'icon' | 'svg' | 'motionPath';
 export type ShapeType = 'rectangle' | 'circle' | 'triangle' | 'ellipse' | 'star' | 'hexagon';
 export interface Position {
     x: number;
@@ -9,19 +9,23 @@ export interface Size {
     height: number;
 }
 export type TiltOrigin = string;
-export type AnimatableProperty = 'position' | 'rotation' | 'tilt' | 'skew' | 'size' | 'opacity' | 'borderRadius' | 'color';
+export type AnimatableProperty = 'position' | 'rotation' | 'tilt' | 'skew' | 'size' | 'opacity' | 'borderRadius' | 'color' | 'perspective';
 export interface PropertySequence {
     property: AnimatableProperty;
     order: number;
     delay: number;
     duration: number;
 }
+export type EntranceAnimation = 'fade' | 'none';
+export type ExitAnimation = 'fade' | 'none';
 export interface ElementAnimationConfig {
     order: number;
     delay: number;
     duration: number;
     easing: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
     propertySequences?: PropertySequence[];
+    entrance?: EntranceAnimation;
+    exit?: ExitAnimation;
 }
 export type FloatingDirection = 'vertical' | 'horizontal' | 'both';
 export interface FloatingAnimationConfig {
@@ -32,6 +36,20 @@ export interface FloatingAnimationConfig {
     amplitudeRandomness: number;
     speedRandomness: number;
 }
+export interface PathPoint {
+    x: number;
+    y: number;
+    handleIn?: Position;
+    handleOut?: Position;
+}
+export interface MotionPathConfig {
+    motionPathId: string;
+    startPercent: number;
+    endPercent: number;
+    autoRotate: boolean;
+    orientationOffset: number;
+    loop: boolean;
+}
 export interface BaseElement {
     id: string;
     type: ElementType;
@@ -48,8 +66,12 @@ export interface BaseElement {
     tiltOrigin: TiltOrigin;
     zIndex: number;
     visible: boolean;
+    perspective?: number;
+    backfaceVisibility?: 'visible' | 'hidden';
     animationConfig?: ElementAnimationConfig;
     floatingAnimation?: FloatingAnimationConfig;
+    motionPathId?: string;
+    motionPathConfig?: MotionPathConfig;
 }
 export type CodeAnimationMode = 'instant' | 'typewriter' | 'highlight-changes';
 export interface CodeAnimationConfig {
@@ -139,6 +161,7 @@ export interface ImageElement extends BaseElement {
     borderRadius: number;
     opacity: number;
     blur: number;
+    backgroundColor?: string;
     clipMask?: {
         enabled: boolean;
         shapeType: ShapeType;
@@ -214,7 +237,22 @@ export interface IconElement extends BaseElement {
     strokeWidth: number;
     fillMode: 'stroke' | 'fill' | 'both';
 }
-export type CanvasElement = CodeElement | TextElement | ArrowElement | ImageElement | ShapeElement | CounterElement | ChartElement | IconElement;
+export interface SvgElement extends BaseElement {
+    type: 'svg';
+    svgContent: string;
+    color?: string;
+    opacity: number;
+    preserveAspectRatio: string;
+}
+export interface MotionPathElement extends BaseElement {
+    type: 'motionPath';
+    points: PathPoint[];
+    closed: boolean;
+    pathColor: string;
+    pathWidth: number;
+    showInPresentation: boolean;
+}
+export type CanvasElement = CodeElement | TextElement | ArrowElement | ImageElement | ShapeElement | CounterElement | ChartElement | IconElement | SvgElement | MotionPathElement;
 export type ParticleShape = 'circle' | 'square' | 'star' | 'triangle';
 export interface ParticlesConfig {
     enabled: boolean;
@@ -252,7 +290,7 @@ export interface CanvasBackground {
     particles?: ParticlesConfig;
     confetti?: ConfettiConfig;
 }
-export type TransitionType = 'none' | 'fade' | 'slide-left' | 'slide-right' | 'slide-up' | 'slide-down' | 'zoom-in' | 'zoom-out' | 'flip';
+export type TransitionType = 'none' | 'fade' | 'slide-left' | 'slide-right' | 'slide-up' | 'slide-down' | 'zoom-in' | 'zoom-out' | 'flip' | 'flip-x' | 'flip-y';
 export interface TransitionConfig {
     type: TransitionType;
     duration: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "animot-presenter",
-	"version": "0.1.2",
+	"version": "0.2.1",
 	"description": "Embed animated presentations anywhere. Works with vanilla JS, React, Vue, Angular, Svelte, and any frontend framework. Morphing animations, code highlighting, charts, particles, and more.",
 	"type": "module",
 	"svelte": "./dist/index.js",