animot-presenter 0.5.19 → 0.5.21

package/dist/engine/container-layout.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Auto-layout pass for ContainerElement. Walks a slide's elements list,
+ * finds the container by id, and rewrites the position (and optionally
+ * size, when align=stretch) of every child id listed in childIds.
+ *
+ * This is the same algorithm the editor uses; running it in the presenter
+ * keeps embedded JSONs visually identical to what the user authored, and
+ * gives us a single source of truth for layout math.
+ */
+import type { CanvasElement } from '../types';
+export declare function relayoutContainer(elements: CanvasElement[], containerId: string): CanvasElement[];
+export declare function relayoutAllContainers(elements: CanvasElement[]): CanvasElement[];

package/dist/engine/container-layout.js

@@ -0,0 +1,108 @@
+/**
+ * Auto-layout pass for ContainerElement. Walks a slide's elements list,
+ * finds the container by id, and rewrites the position (and optionally
+ * size, when align=stretch) of every child id listed in childIds.
+ *
+ * This is the same algorithm the editor uses; running it in the presenter
+ * keeps embedded JSONs visually identical to what the user authored, and
+ * gives us a single source of truth for layout math.
+ */
+function resolvePadding(p) {
+    if (typeof p === 'number')
+        return { top: p, right: p, bottom: p, left: p };
+    return p;
+}
+export function relayoutContainer(elements, containerId) {
+    const container = elements.find((el) => el.id === containerId);
+    if (!container || container.type !== 'container')
+        return elements;
+    const c = container;
+    const pad = resolvePadding(c.padding);
+    const innerW = Math.max(0, c.size.width - pad.left - pad.right);
+    const innerH = Math.max(0, c.size.height - pad.top - pad.bottom);
+    const isRow = c.direction === 'row';
+    const innerMain = isRow ? innerW : innerH;
+    const innerCross = isRow ? innerH : innerW;
+    const mainOriginAbs = (isRow ? c.position.x + pad.left : c.position.y + pad.top);
+    const crossOriginAbs = (isRow ? c.position.y + pad.top : c.position.x + pad.left);
+    const childMap = new Map(elements.map((el) => [el.id, el]));
+    const children = c.childIds
+        .map((id) => childMap.get(id))
+        .filter((el) => el !== undefined);
+    if (children.length === 0)
+        return elements;
+    const mainSizes = children.map((ch) => (isRow ? ch.size.width : ch.size.height));
+    const totalChildMain = mainSizes.reduce((a, b) => a + b, 0);
+    const totalGap = c.gap * Math.max(0, children.length - 1);
+    const usedMain = totalChildMain + totalGap;
+    const freeMain = Math.max(0, innerMain - usedMain);
+    let mainCursor = 0;
+    let extraGap = 0;
+    switch (c.justify) {
+        case 'start':
+            mainCursor = 0;
+            break;
+        case 'center':
+            mainCursor = freeMain / 2;
+            break;
+        case 'end':
+            mainCursor = freeMain;
+            break;
+        case 'space-between':
+            mainCursor = 0;
+            extraGap = children.length > 1 ? freeMain / (children.length - 1) : 0;
+            break;
+        case 'space-around':
+            extraGap = children.length > 0 ? freeMain / children.length : 0;
+            mainCursor = extraGap / 2;
+            break;
+        case 'space-evenly':
+            extraGap = freeMain / (children.length + 1);
+            mainCursor = extraGap;
+            break;
+    }
+    const updates = new Map();
+    for (let i = 0; i < children.length; i++) {
+        const ch = children[i];
+        const mainSize = isRow ? ch.size.width : ch.size.height;
+        const intrinsicCross = isRow ? ch.size.height : ch.size.width;
+        let crossOffset = 0;
+        let crossSize = intrinsicCross;
+        switch (c.align) {
+            case 'start':
+                crossOffset = 0;
+                break;
+            case 'center':
+                crossOffset = (innerCross - intrinsicCross) / 2;
+                break;
+            case 'end':
+                crossOffset = innerCross - intrinsicCross;
+                break;
+            case 'stretch':
+                crossOffset = 0;
+                crossSize = innerCross;
+                break;
+        }
+        const x = isRow ? mainOriginAbs + mainCursor : crossOriginAbs + crossOffset;
+        const y = isRow ? crossOriginAbs + crossOffset : mainOriginAbs + mainCursor;
+        const w = isRow ? mainSize : crossSize;
+        const h = isRow ? crossSize : mainSize;
+        updates.set(ch.id, { position: { x, y }, size: { width: w, height: h } });
+        mainCursor += mainSize + c.gap + extraGap;
+    }
+    return elements.map((el) => {
+        const up = updates.get(el.id);
+        if (!up)
+            return el;
+        return { ...el, position: up.position, size: up.size ?? el.size };
+    });
+}
+export function relayoutAllContainers(elements) {
+    let result = elements;
+    for (const el of elements) {
+        if (el.type === 'container') {
+            result = relayoutContainer(result, el.id);
+        }
+    }
+    return result;
+}

package/dist/renderers/Container.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { ContainerElement } from '../types';
+
+	interface Props {
+		element: ContainerElement;
+	}
+	let { element }: Props = $props();
+
+	const fill = $derived(element.fillColor || 'transparent');
+	const borderCss = $derived(
+		element.borderWidth && element.borderColor
+			? `${element.borderWidth}px solid ${element.borderColor}`
+			: 'none'
+	);
+</script>
+
+<div class="animot-container-element"
+	style:width="100%"
+	style:height="100%"
+	style:background={fill}
+	style:border={borderCss}
+	style:border-radius="{element.borderRadius ?? 0}px"
+></div>
+
+<style>
+	.animot-container-element {
+		box-sizing: border-box;
+		pointer-events: none;
+	}
+</style>

package/dist/renderers/Container.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ContainerElement } from '../types';
+interface Props {
+    element: ContainerElement;
+}
+declare const Container: import("svelte").Component<Props, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/types.d.ts

@@ -1,4 +1,34 @@
-export type ElementType = 'code' | 'text' | 'arrow' | 'image' | 'shape' | 'counter' | 'chart' | 'icon' | 'svg' | 'motionPath' | 'video' | 'progress';
+export type ElementType = 'code' | 'text' | 'arrow' | 'image' | 'shape' | 'counter' | 'chart' | 'icon' | 'svg' | 'motionPath' | 'video' | 'progress' | 'container';
+/**
+ * Per-element keyframe — animates state at a specific time WITHIN a slide's
+ * display window. Layered on top of slide-to-slide morphing: morphing handles
+ * between-slide transitions, keyframes handle within-slide animation.
+ */
+export interface Keyframe {
+    id: string;
+    time: number;
+    easing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+    position?: Position;
+    size?: Size;
+    rotation?: number;
+    opacity?: number;
+    skewX?: number;
+    skewY?: number;
+    tiltX?: number;
+    tiltY?: number;
+    borderRadius?: number;
+    fontSize?: number;
+    fillColor?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+    backgroundColor?: string;
+    color?: string;
+    blur?: number;
+    brightness?: number;
+    contrast?: number;
+    saturate?: number;
+    grayscale?: number;
+}
 export type ShapeType = 'rectangle' | 'circle' | 'triangle' | 'ellipse' | 'star' | 'hexagon';
 export interface Position {
     x: number;
@@ -57,6 +87,11 @@ export interface BaseElement {
     name?: string;
     locked?: boolean;
     groupId?: string;
+    /** Auto-layout container parent. When set, position/size is computed
+     *  by the container's flex layout pass. */
+    containerId?: string;
+    /** Per-element keyframes that play DURING this slide. Sorted by time. */
+    keyframes?: Keyframe[];
     position: Position;
     size: Size;
     rotation: number;
@@ -414,7 +449,30 @@ export interface ProgressElement extends BaseElement {
     };
     animationDuration?: number;
 }
-export type CanvasElement = CodeElement | TextElement | ArrowElement | ImageElement | VideoElement | ShapeElement | CounterElement | ChartElement | IconElement | SvgElement | MotionPathElement | ProgressElement;
+/**
+ * Auto-layout container. Holds a list of child element ids and arranges them
+ * via flex-style rules. Children remain independently selectable; layout
+ * pass writes computed position+size onto each child.
+ */
+export interface ContainerElement extends BaseElement {
+    type: 'container';
+    childIds: string[];
+    direction: 'row' | 'column';
+    gap: number;
+    padding: number | {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    align: 'start' | 'center' | 'end' | 'stretch';
+    justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    fillColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    borderRadius?: number;
+}
+export type CanvasElement = CodeElement | TextElement | ArrowElement | ImageElement | VideoElement | ShapeElement | CounterElement | ChartElement | IconElement | SvgElement | MotionPathElement | ProgressElement | ContainerElement;
 export type ParticleShape = 'circle' | 'square' | 'star' | 'triangle';
 export interface ParticlesConfig {
     enabled: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "animot-presenter",
-	"version": "0.5.19",
+	"version": "0.5.21",
 	"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",