@agrhub/engine-pixi 0.0.0-stage → 1.4.0

package/dist/clips/audio-clip.d.ts

@@ -0,0 +1,122 @@
+import { BaseClip } from './base-clip';
+import { IClip, IPlaybackCapable } from './iclip';
+import { AudioJSON } from '../json-serialization';
+interface IAudioOpts {
+    loop?: boolean;
+    volume?: number;
+}
+/**
+ * Audio clip providing audio data for creating and editing audio/video
+ *
+ * @example
+ * // Load audio clip asynchronously
+ * const audioClip = await Audio.fromUrl('path/to/audio.mp3', {
+ *   loop: true,
+ * });
+ *
+ * @example
+ * // Traditional approach (for advanced use)
+ * new Audio((await fetch('<mp3 url>')).body, {
+ *   loop: true,
+ * }),
+ */
+export declare class Audio extends BaseClip implements IPlaybackCapable {
+    readonly type = "Audio";
+    static ctx: AudioContext | null;
+    ready: IClip["ready"];
+    private _meta;
+    /**
+     * Audio metadata
+     *
+     * ⚠️ Note, these are converted (normalized) metadata, not original audio metadata
+     */
+    get meta(): {
+        sampleRate: number;
+        chanCount: number;
+        duration: number;
+        width: number;
+        height: number;
+    };
+    private chan0Buf;
+    private chan1Buf;
+    /**
+     * Get complete PCM data from audio clip
+     */
+    getPCMData(): Float32Array[];
+    private opts;
+    /**
+     * Whether to loop the audio (hybrid JSON structure)
+     */
+    loop: boolean;
+    /**
+     * Load an audio clip from a URL
+     * @param url Audio URL
+     * @param opts Audio configuration (loop, volume)
+     * @returns Promise that resolves to an audio clip
+     *
+     * @example
+     * const audioClip = await Audio.fromUrl('path/to/audio.mp3', {
+     *   loop: true,
+     *   volume: 0.8,
+     * });
+     */
+    static fromUrl(url: string, opts?: IAudioOpts): Promise<Audio>;
+    /**
+     * Create an Audio instance from a JSON object (fabric.js pattern)
+     * @param json The JSON object representing the clip
+     * @returns Promise that resolves to an Audio instance
+     */
+    static fromObject(json: AudioJSON): Promise<Audio>;
+    /**
+     *
+     * @param dataSource Audio file stream
+     * @param opts Audio configuration, controls volume and whether to loop
+     */
+    constructor(dataSource: ReadableStream<Uint8Array> | Float32Array[], opts?: IAudioOpts, src?: string);
+    private init;
+    /**
+     * Intercept data returned by {@link Audio.tick} method for secondary processing of audio data
+     * @param time Time when tick was called
+     * @param tickRet Data returned by tick
+     *
+     */
+    tickInterceptor: <T extends Awaited<ReturnType<Audio["tick"]>>>(time: number, tickRet: T) => Promise<T>;
+    private timestamp;
+    private frameOffset;
+    /**
+     * Return audio PCM data corresponding to the time difference between last and current moments
+     *
+     * If the difference exceeds 3s or current time is less than last time, reset state
+     * @example
+     * tick(0) // => []
+     * tick(1e6) // => [leftChanPCM(1s), rightChanPCM(1s)]
+     *
+     */
+    tick(time: number): Promise<{
+        audio: Float32Array[];
+        state: "success" | "done";
+    }>;
+    /**
+     * Split is handled by core state, not implemented here
+     */
+    split(_time: number): Promise<[this, this]>;
+    clone(): Promise<this>;
+    /**
+     * Destroy instance and release resources
+     */
+    destroy(): void;
+    toJSON(_main?: boolean): AudioJSON;
+    /**
+     * Create HTMLAudioElement for playback
+     */
+    createPlaybackElement(): Promise<{
+        element: HTMLAudioElement;
+        objectUrl?: string;
+    }>;
+    play(element: HTMLVideoElement | HTMLAudioElement, timeSeconds: number): Promise<void>;
+    pause(element: HTMLVideoElement | HTMLAudioElement): void;
+    seek(element: HTMLVideoElement | HTMLAudioElement, timeSeconds: number): Promise<void>;
+    syncPlayback(element: HTMLVideoElement | HTMLAudioElement, isPlaying: boolean, timeSeconds: number): void;
+    cleanupPlayback(element: HTMLVideoElement | HTMLAudioElement, objectUrl?: string): void;
+}
+export {};

package/dist/clips/backdrop-clip.d.ts

@@ -0,0 +1,56 @@
+import { Container, Application } from 'pixi.js';
+import { BaseClip } from './base-clip';
+import { IClipMeta } from './iclip';
+export interface BackdropClipOptions {
+    backdropType: "solid" | "gradient" | "meshGradient" | "noise" | "floatingBlobs";
+    width?: number;
+    height?: number;
+    colors?: string[];
+    gradientType?: "linear" | "radial";
+    speed?: number;
+    scale?: number;
+    density?: number;
+    renderer?: Application["renderer"];
+}
+/**
+ * Backdrop: procedural, endlessly playing background (solid, gradient, animated mesh gradient,
+ * floating blobs, film noise) rendered with Pixi into a texture.
+ */
+export declare class Backdrop extends BaseClip {
+    readonly type = "Backdrop";
+    backdropType: BackdropClipOptions["backdropType"];
+    container: Container;
+    private _meta;
+    private renderTexture;
+    private externalRenderer;
+    private bgGraphics;
+    private meshContainer;
+    private meshCircles;
+    private blobsContainer;
+    private blobCircles;
+    private noiseSprite;
+    private noiseTexture;
+    constructor(options: BackdropClipOptions);
+    setRenderer(renderer: Application["renderer"]): void;
+    private getRenderer;
+    private getRenderTexture;
+    get meta(): IClipMeta;
+    /**
+     * Rebuilds the static structure of the backdrop based on current styles.
+     */
+    private rebuildBackdrop;
+    tick(time: number): Promise<{
+        video: ImageBitmap;
+        state: "success";
+    }>;
+    clone(): Promise<this>;
+    split(_time: number): Promise<[this, this]>;
+    toJSON(main?: boolean): any;
+    set style(style: any);
+    get style(): any;
+    set width(width: number);
+    get width(): number;
+    set height(height: number);
+    get height(): number;
+    static fromObject(json: any): Promise<Backdrop>;
+}

package/dist/clips/base-clip.d.ts

@@ -0,0 +1,150 @@
+import { BaseSprite, BaseSpriteEvents } from '../sprite/base-sprite';
+import { IClip, IClipMeta, ITransitionInfo } from './iclip';
+import { ClipJSON } from '../json-serialization';
+/**
+ * Base class for all clips that extends BaseSprite
+ * Provides common functionality for sprite operations (position, animation, timing)
+ * and frame management
+ */
+export declare abstract class BaseClip<T extends BaseSpriteEvents = BaseSpriteEvents> extends BaseSprite<T> implements IClip<T> {
+    abstract readonly type: string;
+    private lastVf;
+    protected destroyed: boolean;
+    /**
+     * Source URL or identifier for this clip
+     * Used for serialization and reloading from JSON
+     */
+    src: string;
+    /**
+     * User-defined metadata
+     */
+    metadata: Record<string, any>;
+    /**
+     * Transition info (optional)
+     */
+    transition?: ITransitionInfo;
+    /**
+     * When set, the clip's RenderTexture is larger than its logical bounds by this many pixels
+     * on each side. Provides overflow room for animations (slide, zoom) without visual clipping.
+     */
+    renderTexturePadding?: number;
+    abstract tick(time: number): Promise<{
+        video?: VideoFrame | ImageBitmap | null;
+        audio?: Float32Array[];
+        state: "done" | "success";
+    }>;
+    ready: Promise<IClipMeta>;
+    abstract readonly meta: IClipMeta;
+    abstract clone(): Promise<this>;
+    abstract split?(time: number): Promise<[this, this]>;
+    constructor();
+    /**
+     * Get video frame and audio at specified time without rendering to canvas
+     * Useful for Pixi.js rendering where canvas context is not needed
+     * @param time Specified time in microseconds
+     */
+    getFrame(time: number): Promise<{
+        video: VideoFrame | ImageBitmap | null;
+        audio: Float32Array[];
+        done: boolean;
+    }>;
+    /**
+     * Draw image at specified time to canvas context and return corresponding audio data
+     * @param time Specified time in microseconds
+     */
+    offscreenRender(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, time: number): Promise<{
+        audio: Float32Array[];
+        done: boolean;
+    }>;
+    /**
+     * Set clip properties (position, size, display timeline)
+     * @param props Properties to set
+     * @param fps Optional FPS for frame-to-time conversion (default: 30)
+     * @returns this for method chaining
+     *
+     * @example
+     * // Using frames (will be converted to microseconds)
+     * clip.set({
+     *   display: {
+     *     from: 150, // frames
+     *     to: 450, // frames (10 seconds at 30fps)
+     *   },
+     * }, 30);
+     *
+     * // Using microseconds directly
+     * clip.set({
+     *   display: {
+     *     from: 5000000, // microseconds
+     *     to: 15000000, // microseconds
+     *   },
+     * });
+     */
+    set(props: {
+        display?: {
+            from?: number;
+            to?: number;
+        };
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+        duration?: number;
+        timing?: {
+            display?: {
+                from?: number;
+                to?: number;
+            };
+            trim?: {
+                from?: number;
+                to?: number;
+            };
+            duration?: number;
+            playbackRate?: number;
+            fadeIn?: {
+                duration: number;
+                curve?: "linear" | "ease-in" | "ease-out" | "ease-in-out";
+            };
+            fadeOut?: {
+                duration: number;
+                curve?: "linear" | "ease-in" | "ease-out" | "ease-in-out";
+            };
+        };
+    }, _fps?: number): this;
+    /**
+     * Base implementation of toJSON that handles common clip properties
+     * Subclasses should override to add their specific options
+     * @param main Whether this is the main clip (for Compositor)
+     */
+    toJSON(main?: boolean): ClipJSON;
+    /**
+     * Get the list of visible transformer handles for this clip type
+     * Default implementation returns all handles
+     * Override in subclasses to customize handle visibility (e.g., TextClip)
+     */
+    getVisibleHandles(): Array<"tl" | "tr" | "bl" | "br" | "ml" | "mr" | "mt" | "mb" | "rot">;
+    /**
+     * Scale clip to fit within the scene dimensions while maintaining aspect ratio
+     * @param sceneWidth Scene width
+     * @param sceneHeight Scene height
+     */
+    scaleToFit(sceneWidth: number, sceneHeight: number): Promise<void>;
+    /**
+     * Scale clip to fill the scene dimensions while maintaining aspect ratio
+     * May crop parts of the clip.
+     * @param sceneWidth Scene width
+     * @param sceneHeight Scene height
+     */
+    scaleToFill(sceneWidth: number, sceneHeight: number): Promise<void>;
+    /**
+     * Center the clip within the scene dimensions
+     * @param sceneWidth Scene width
+     * @param sceneHeight Scene height
+     */
+    centerInScene(sceneWidth: number, sceneHeight: number): void;
+    destroy(): void;
+    /**
+     * Applies all common properties from JSON to a clip instance.
+     * This handles transform, timing, style, animation, transitions, chroma key, color adjustment, and generic metadata.
+     */
+    static deserializeBaseProperties(clip: BaseClip, json: any): void;
+}

package/dist/clips/base-text-clip.d.ts

@@ -0,0 +1,228 @@
+import { Application, SplitBitmapText, TextStyle, RenderTexture, Texture, Container, Graphics } from 'pixi.js';
+import { OutlineFilter } from '../filters/outline-filter';
+import { DropShadowFilter } from 'pixi-filters';
+import { BaseClip } from './base-clip';
+import { IClip } from './iclip';
+import { BaseSpriteEvents } from '../sprite/base-sprite';
+/**
+ * Shared style options used by both Text and Caption clips.
+ */
+export interface IBaseTextOpts {
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+    fontUrl?: string;
+    color?: string | number | {
+        type: "gradient";
+        x0: number;
+        y0: number;
+        x1: number;
+        y1: number;
+        colors: Array<{
+            ratio: number;
+            color: string | number;
+        }>;
+    };
+    stroke?: string | number | {
+        color: string | number;
+        width: number;
+        join?: "miter" | "round" | "bevel";
+        cap?: "butt" | "round" | "square";
+        miterLimit?: number;
+    };
+    strokeWidth?: number;
+    align?: "left" | "center" | "right";
+    textAlign?: "left" | "center" | "right";
+    verticalAlign?: "top" | "center" | "bottom" | "underline" | "overline" | "strikethrough";
+    shadow?: {
+        color?: string | number;
+        alpha?: number;
+        blur?: number;
+        offsetX?: number;
+        offsetY?: number;
+    };
+    wordWrapWidth?: number;
+    wordWrap?: boolean;
+    lineHeight?: number;
+    letterSpacing?: number;
+    textCase?: "none" | "uppercase" | "lowercase" | "title";
+    background?: {
+        color?: string;
+        opacity?: number;
+        borderRadius?: number;
+        paddingX?: number;
+        paddingY?: number;
+    };
+}
+export declare function getOrInstallFont(styleOptions: any): string;
+/**
+ * Abstract base class for text-based clips (Text and Caption).
+ * Contains all shared PixiJS rendering infrastructure.
+ * Subclasses must implement: `get text()`, `get textAlign()`, and `refreshContent()`.
+ */
+export declare abstract class BaseTextClip<TEvents extends BaseSpriteEvents = BaseSpriteEvents> extends BaseClip<TEvents> {
+    ready: IClip["ready"];
+    protected _meta: {
+        duration: number;
+        width: number;
+        height: number;
+    };
+    get meta(): {
+        duration: number;
+        width: number;
+        height: number;
+    };
+    protected pixiTextContainer: Container | null;
+    protected wordTexts: SplitBitmapText[];
+    protected textStyle: TextStyle;
+    protected textStyleBase: TextStyle;
+    protected renderTexture: RenderTexture | null;
+    protected outlineFilter: OutlineFilter | null;
+    protected dropShadowFilter: DropShadowFilter | null;
+    protected _refreshing: boolean;
+    protected _needsRefresh: boolean;
+    /** Settles after the last queued refresh pass (see refreshText) */
+    protected _refreshPromise: Promise<void> | null;
+    protected _spaceWidth: number;
+    /** Per-line boxes from the last layout (read by BlockRevealAnimation) */
+    _lineRects?: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }[];
+    protected _text: string;
+    private externalRenderer;
+    private pixiApp;
+    originalOpts: IBaseTextOpts;
+    id: string;
+    effects: Array<{
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+    }>;
+    /**
+     * The text string to render. Implemented by subclasses.
+     */
+    abstract get text(): string;
+    /**
+     * Horizontal text alignment. Implemented by subclasses.
+     */
+    abstract get textAlign(): "left" | "center" | "right";
+    setRenderer(renderer: Application["renderer"]): void;
+    protected getRenderer(): Promise<Application["renderer"]>;
+    getTexture(): Promise<Texture | null>;
+    tick(_time: number): Promise<{
+        video: ImageBitmap;
+        state: "success";
+    }>;
+    split(_time: number): Promise<[this, this]>;
+    abstract clone(): Promise<this>;
+    /**
+     * Returns true if any animation in the list requires a per-line mask (i.e. has params.mask === true).
+     */
+    private _hasMaskAnim;
+    /**
+     * Override the animations setter so that when the mask-mode changes
+     * (e.g. slideMaskWord → slideByWord or vice-versa), the PIXI scene graph
+     * is rebuilt via refreshText(). This removes stale LineMask graphics that
+     * would otherwise cause GSAP to access `.y` on null/destroyed nodes.
+     */
+    get animations(): any[];
+    set animations(v: any[]);
+    animate(time: number): void;
+    addEffect(effect: {
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+    }): void;
+    editEffect(effectId: string, newEffectData: Partial<{
+        key: string;
+        startTime: number;
+        duration: number;
+    }>): void;
+    removeEffect(effectId: string): void;
+    /**
+     * Rebuilds the text layout. Calls made while a rebuild runs are coalesced into one more pass, and
+     * every caller's promise resolves only after that final pass — previously they resolved
+     * immediately, so "refresh then emit propsChange" re-rendered the stale layout.
+     */
+    protected refreshText(): Promise<void>;
+    protected _doRefreshText(): Promise<void>;
+    /**
+     * Hook called at the end of _doRefreshText. Subclasses can override to run
+     * post-layout logic (e.g. populate word cache, apply initial word colors).
+     */
+    protected _onAfterRefresh(_words: string[], _textOnlyContainer: Container, _spaceWidth: number, _measuredTextHeight: number, _lineHeightMultiplier: number, _fontSize: number): void;
+    protected _applyTextCase(text: string): string;
+    protected _buildTextStyles(): {
+        fontName: string;
+        baseFontName: string;
+    };
+    protected _buildWordObjects(textToRender: string): {
+        textOnlyContainer: Container;
+        words: string[];
+    };
+    protected _applyStrokeFilter(): number;
+    protected _applyShadowFilter(textOnlyContainer: Container): void;
+    protected _measureSpaceAndHeight(): Promise<{
+        spaceWidth: number;
+        measuredTextHeight: number;
+    }>;
+    protected _breakIntoLines(wrapWidth: number, lineHeight: number): {
+        words: SplitBitmapText[];
+        width: number;
+        height: number;
+    }[];
+    protected _calculateDimensions(lines: {
+        words: SplitBitmapText[];
+        width: number;
+        height: number;
+    }[], measuredTextHeight: number, snapshotWidth: number, snapshotWordWrap: boolean | undefined, snapshotWordWrapWidth: number | undefined, snapshotBackground: IBaseTextOpts["background"], bgPadX: number, bgPadY: number): {
+        containerWidth: number;
+        containerHeight: number;
+        contentWidth: number;
+        contentHeight: number;
+    };
+    protected _positionWords(lines: {
+        words: SplitBitmapText[];
+        width: number;
+        height: number;
+    }[], containerWidth: number, containerHeight: number, contentHeight: number, measuredTextHeight: number, bgPadX: number, textOnlyContainer: Container): {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }[];
+    protected _drawDecoration(lines: {
+        words: SplitBitmapText[];
+        width: number;
+        height: number;
+    }[], containerWidth: number, bgPadX: number): Graphics | null;
+    protected _buildBackground(lineRects: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }[], bgColorOpt: string | undefined, bgOpacity: number, bgBorderRadius: number): Graphics | null;
+    protected _createRenderTexture(containerWidth: number, containerHeight: number, strokeWidth: number): void;
+    protected _normalizeStyleOpts(opts: Partial<IBaseTextOpts>): Partial<IBaseTextOpts>;
+    protected _cloneColorOpts(colorToNumber: (c: any) => number | undefined): IBaseTextOpts["color"];
+    protected _cloneStrokeOpts(colorToNumber: (c: any) => number | undefined): {
+        stroke: IBaseTextOpts["stroke"];
+        strokeWidth: number;
+    };
+    protected _cloneShadowOpts(colorToNumber: (c: any) => number | undefined): IBaseTextOpts["shadow"] | undefined;
+    protected createStyleFromOpts(opts: IBaseTextOpts): any;
+    protected drawRoundedMultilinePath(graphics: Graphics, rects: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }[], radius: number, color: number, alpha?: number): void;
+    destroy(): void;
+    toJSON(main?: boolean): any;
+}

package/dist/clips/caption-clip.d.ts

@@ -0,0 +1,129 @@
+import { Application, Container } from 'pixi.js';
+import { ICaptionWord } from '@agrhub/core';
+import { IClip } from './iclip';
+import { ClipContext } from './clip-registry';
+import { CaptionJSON, ICaptionWordAnimation } from '../json-serialization';
+import { BaseTextClip, IBaseTextOpts } from './base-text-clip';
+import { BaseSpriteEvents } from '../sprite/base-sprite';
+export type { ICaptionWord, ICaptionWordAnimation };
+/** Style applied to a single word state (active / future / keyword) */
+export interface ICaptionWordStyle {
+    color?: string;
+    border?: {
+        color?: string;
+        width?: number;
+    };
+    background?: string;
+}
+/** Caption color configuration */
+export interface ICaptionColors {
+    /** Currently spoken word — null/undefined to disable */
+    active?: ICaptionWordStyle | null;
+    /** Upcoming / future words — null/undefined to disable */
+    future?: ICaptionWordStyle | null;
+    /** Keyword words (isKeyWord=true) — null/undefined to disable */
+    keyword?: {
+        color?: string;
+        preserveAfterSpoken?: boolean;
+    } | null;
+}
+/**
+ * Options for constructing a Caption clip.
+ *
+ * Color model:
+ *  - `style.color`            → appeared (already-spoken) words
+ *  - `caption.colors.active`  → currently spoken word (color + background + border)
+ *  - `caption.colors.future`  → upcoming words (color + border)
+ *  - `caption.colors.keyword` → isKeyWord=true override
+ */
+export interface ICaptionOpts extends IBaseTextOpts {
+    words?: ICaptionWord[];
+    wordAnimation?: ICaptionWordAnimation;
+    wordsPerLine?: "single" | "multiple";
+    mediaId?: string;
+    videoWidth?: number;
+    videoHeight?: number;
+    bottomOffset?: number;
+    /** Nested caption data (flattened into opts on construction) */
+    caption?: {
+        words?: ICaptionWord[];
+        colors?: ICaptionColors;
+        wordAnimation?: ICaptionWordAnimation;
+        positioning?: {
+            videoWidth?: number;
+            videoHeight?: number;
+            bottomOffset?: number;
+        };
+    };
+    /** Internal: skip initial auto-positioning when restoring from JSON */
+    initialLayoutApplied?: boolean;
+    /** Resolved color objects (flat access after construction) */
+    activeStyle?: ICaptionWordStyle;
+    futureStyle?: ICaptionWordStyle;
+    keywordColor?: string;
+    keywordPreserveAfterSpoken?: boolean;
+}
+export interface ICaptionEvents extends BaseSpriteEvents {
+    propsChange: Partial<{
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        angle: number;
+        text: string;
+        style: any;
+    } & ICaptionOpts>;
+}
+export declare class Caption extends BaseTextClip<ICaptionEvents> implements IClip {
+    readonly type = "Caption";
+    ready: IClip["ready"];
+    private _lastTickTime;
+    protected _isWidthConstrained: boolean;
+    private _words;
+    originalOpts: ICaptionOpts;
+    private _activeStyle;
+    private _futureStyle;
+    private _keywordColor;
+    private _keywordPreserveAfterSpoken;
+    private _wordAnimation;
+    private _wordsPerLine;
+    protected _videoWidth: number;
+    protected _videoHeight: number;
+    protected _bottomOffset: number;
+    get text(): string;
+    set text(v: string);
+    get textAlign(): "left" | "center" | "right";
+    get caption(): ICaptionOpts["caption"];
+    set caption(v: ICaptionOpts["caption"]);
+    get words(): ICaptionWord[];
+    set words(v: ICaptionWord[]);
+    get mediaId(): string | undefined;
+    set mediaId(v: string | undefined);
+    get wordsPerLine(): "single" | "multiple";
+    set wordsPerLine(v: "single" | "multiple");
+    get style(): any;
+    set style(opts: Partial<ICaptionOpts>);
+    updateStyle(opts: Partial<ICaptionOpts>): Promise<void>;
+    get width(): number;
+    set width(v: number);
+    get height(): number;
+    set height(v: number);
+    animate(time: number): void;
+    constructor(text: string, opts?: ICaptionOpts, renderer?: Application["renderer"]);
+    protected createStyleFromOpts(opts: any): any;
+    private _syncOpts;
+    protected _buildWordObjects(textToRender: string): {
+        textOnlyContainer: Container;
+        words: string[];
+    };
+    protected _onAfterRefresh(): void;
+    tick(time: number): Promise<{
+        video: ImageBitmap;
+        state: "success";
+    }>;
+    updateState(currentTimeUs: number): void;
+    clone(): Promise<this>;
+    toJSON(main?: boolean): CaptionJSON;
+    static fromObject(json: CaptionJSON, context?: ClipContext): Promise<Caption>;
+    getVisibleHandles(): Array<"tl" | "tr" | "bl" | "br" | "ml" | "mr" | "mt" | "mb" | "rot">;
+}