@codefluss/rive 0.0.1-alpha.1

package/dist/locales/index.d.ts

@@ -0,0 +1,374 @@
+/**
+ * Rive Plugin Localization
+ */
+export declare const locales: {
+    readonly en: {
+        plugin: {
+            name: string;
+            description: string;
+        };
+        properties: {
+            src: {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            artboard: {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            stateMachines: {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            width: {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            height: {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            fit: {
+                label: string;
+                description: string;
+            };
+            alignment: {
+                label: string;
+                description: string;
+            };
+            loop: {
+                label: string;
+                description: string;
+            };
+            autoplay: {
+                label: string;
+                description: string;
+            };
+            "mouseInteraction.enabled": {
+                label: string;
+                description: string;
+            };
+            "mouseInteraction.followMouse": {
+                label: string;
+                description: string;
+            };
+            "mouseInteraction.sensitivity": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "mouseInteraction.hoverEffects": {
+                label: string;
+                description: string;
+            };
+            "mouseInteraction.clickActions": {
+                label: string;
+                description: string;
+            };
+            "stateMachineInputs.hover": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "stateMachineInputs.click": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "stateMachineInputs.mousePosition.x": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "stateMachineInputs.mousePosition.y": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "accessibility.label": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "accessibility.description": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "accessibility.role": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "advanced.className": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "advanced.id": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "advanced.ariaLabel": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "advanced.tabIndex": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+        };
+        categories: {
+            content: string;
+            style: string;
+            interactivity: string;
+            state: string;
+            advanced: string;
+        };
+        priorities: {
+            quick: string;
+            common: string;
+            advanced: string;
+        };
+        upload: {
+            title: string;
+            description: string;
+            button: string;
+            dragText: string;
+            supportedFormats: string;
+            invalidFormat: string;
+            fileTooLarge: string;
+            uploadSuccess: string;
+            uploadError: string;
+            fileReady: string;
+            loadedFile: string;
+        };
+        interactivity: {
+            enabled: string;
+            followMouse: string;
+            hoverEffects: string;
+            clickActions: string;
+            sensitivity: string;
+            stateMachines: string;
+            mousePosition: string;
+        };
+        controls: {
+            play: string;
+            pause: string;
+            stop: string;
+        };
+        fitModes: {
+            contain: string;
+            cover: string;
+            fill: string;
+            fitWidth: string;
+            fitHeight: string;
+            none: string;
+        };
+        alignments: {
+            center: string;
+            topLeft: string;
+            topCenter: string;
+            topRight: string;
+            centerLeft: string;
+            centerRight: string;
+            bottomLeft: string;
+            bottomCenter: string;
+            bottomRight: string;
+        };
+    };
+    readonly de: {
+        plugin: {
+            name: string;
+            description: string;
+        };
+        properties: {
+            src: {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            artboard: {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            stateMachines: {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            width: {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            height: {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            fit: {
+                label: string;
+                description: string;
+            };
+            alignment: {
+                label: string;
+                description: string;
+            };
+            loop: {
+                label: string;
+                description: string;
+            };
+            autoplay: {
+                label: string;
+                description: string;
+            };
+            "mouseInteraction.enabled": {
+                label: string;
+                description: string;
+            };
+            "mouseInteraction.followMouse": {
+                label: string;
+                description: string;
+            };
+            "mouseInteraction.sensitivity": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "mouseInteraction.hoverEffects": {
+                label: string;
+                description: string;
+            };
+            "mouseInteraction.clickActions": {
+                label: string;
+                description: string;
+            };
+            "stateMachineInputs.hover": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "stateMachineInputs.click": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "stateMachineInputs.mousePosition.x": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "stateMachineInputs.mousePosition.y": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "accessibility.label": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "accessibility.description": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "accessibility.role": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "advanced.className": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "advanced.id": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "advanced.ariaLabel": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+            "advanced.tabIndex": {
+                label: string;
+                placeholder: string;
+                description: string;
+            };
+        };
+        categories: {
+            content: string;
+            style: string;
+            interactivity: string;
+            state: string;
+            advanced: string;
+        };
+        priorities: {
+            quick: string;
+            common: string;
+            advanced: string;
+        };
+        upload: {
+            title: string;
+            description: string;
+            button: string;
+            dragText: string;
+            supportedFormats: string;
+            invalidFormat: string;
+            fileTooLarge: string;
+            uploadSuccess: string;
+            uploadError: string;
+            fileReady: string;
+            loadedFile: string;
+        };
+        interactivity: {
+            enabled: string;
+            followMouse: string;
+            hoverEffects: string;
+            clickActions: string;
+            sensitivity: string;
+            stateMachines: string;
+            mousePosition: string;
+        };
+        controls: {
+            play: string;
+            pause: string;
+            stop: string;
+        };
+        fitModes: {
+            contain: string;
+            cover: string;
+            fill: string;
+            fitWidth: string;
+            fitHeight: string;
+            none: string;
+        };
+        alignments: {
+            center: string;
+            topLeft: string;
+            topCenter: string;
+            topRight: string;
+            centerLeft: string;
+            centerRight: string;
+            bottomLeft: string;
+            bottomCenter: string;
+            bottomRight: string;
+        };
+    };
+};
+export type Locale = keyof typeof locales;
+export declare const defaultLocale: Locale;
+//# sourceMappingURL=index.d.ts.map

package/dist/locales/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/locales/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAKH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGV,CAAC;AAEX,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,OAAO,CAAC;AAC1C,eAAO,MAAM,aAAa,EAAE,MAAa,CAAC"}

package/dist/locales/index.js

@@ -0,0 +1,11 @@
+/**
+ * Rive Plugin Localization
+ */
+import en from './en.json';
+import de from './de.json';
+export const locales = {
+    en,
+    de,
+};
+export const defaultLocale = 'en';
+//# sourceMappingURL=index.js.map

package/dist/locales/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/locales/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,MAAM,WAAW,CAAC;AAC3B,OAAO,EAAE,MAAM,WAAW,CAAC;AAE3B,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,EAAE;IACF,EAAE;CACM,CAAC;AAGX,MAAM,CAAC,MAAM,aAAa,GAAW,IAAI,CAAC"}

package/dist/renderer.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Rive Renderer Component (SSR / View Mode)
+ *
+ * This is the Server-Side Rendering component for the Rive plugin.
+ * NO 'use client' directive - works in Node.js environment.
+ *
+ * ⚠️ IMPORTANT: This renderer produces LIVE SITE HTML!
+ * NO Tailwind classes allowed - only inline styles and semantic classes.
+ *
+ * Note: Rive animations require client-side JavaScript to play.
+ * This renderer provides a placeholder/fallback for SSR with proper styling.
+ * The actual animation will be hydrated on the client.
+ */
+import type { PluginDependencies } from '@codefluss/base-types';
+import type { RiveData } from './rive-config';
+/**
+ * Rive Renderer Props
+ *
+ * Follows the standard RendererProps pattern for consistency
+ */
+export interface RiveRendererProps {
+    /** Unique element identifier */
+    elementId: string;
+    /** Rive animation configuration data */
+    data: RiveData;
+    /** Current language for i18n */
+    language: string;
+    /** Plugin dependencies including design system */
+    dependencies: PluginDependencies;
+}
+/**
+ * Rive Renderer Component
+ *
+ * Pure functional component for SSR rendering of Rive animations.
+ * Uses ONLY inline styles and semantic classes - NO Tailwind.
+ *
+ * @param props - Renderer props following standard pattern
+ * @returns React element for server-side rendering
+ */
+export declare function RiveRenderer({ elementId, data, language, dependencies, }: RiveRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RiveRenderer {
+    var displayName: string;
+}
+export default RiveRenderer;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IACjC,gCAAgC;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,IAAI,EAAE,QAAQ,CAAC;IACf,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,YAAY,EAAE,kBAAkB,CAAC;CACjC;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC5B,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,YAAY,GACZ,EAAE,iBAAiB,2CAiHnB;yBAtHe,YAAY;;;AA2H5B,eAAe,YAAY,CAAC"}

package/dist/renderer.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Rive Renderer Component
+ *
+ * Pure functional component for SSR rendering of Rive animations.
+ * Uses ONLY inline styles and semantic classes - NO Tailwind.
+ *
+ * @param props - Renderer props following standard pattern
+ * @returns React element for server-side rendering
+ */
+export function RiveRenderer({ elementId, data, language, dependencies, }) {
+    const { designSystem, utils } = dependencies;
+    // Resolve accessibility label based on language
+    const ariaLabel = data.accessibility?.label || 'Rive Animation';
+    const ariaDescription = data.accessibility?.description || '';
+    // Get custom class name from advanced settings
+    const customClassName = data.advanced?.className || '';
+    // Generate class names - ONLY semantic classes, NO Tailwind
+    const className = utils.cn('rive-component', customClassName);
+    // Map fit values to CSS object-fit
+    const getFitStyle = (fit) => {
+        switch (fit) {
+            case 'contain': return 'contain';
+            case 'cover': return 'cover';
+            case 'fill': return 'fill';
+            case 'none': return 'none';
+            case 'scale-down': return 'scale-down';
+            default: return 'contain';
+        }
+    };
+    // Map alignment to flexbox positioning
+    const getAlignmentStyles = (alignment) => {
+        switch (alignment) {
+            case 'top-left': return { alignItems: 'flex-start', justifyContent: 'flex-start' };
+            case 'top-right': return { alignItems: 'flex-start', justifyContent: 'flex-end' };
+            case 'bottom-left': return { alignItems: 'flex-end', justifyContent: 'flex-start' };
+            case 'bottom-right': return { alignItems: 'flex-end', justifyContent: 'flex-end' };
+            case 'center':
+            default:
+                return { alignItems: 'center', justifyContent: 'center' };
+        }
+    };
+    // Build inline styles - ALL visual styling via inline CSS
+    const containerStyle = {
+        // Width from data or default to 100%
+        width: data.width ? `${data.width}px` : '100%',
+        // Height from data or auto
+        height: data.height ? `${data.height}px` : 'auto',
+        // Ensure proper display
+        display: 'flex',
+        // Position for potential overlays
+        position: 'relative',
+        // Aspect ratio maintenance
+        aspectRatio: data.width && data.height ? `${data.width} / ${data.height}` : undefined,
+        // Alignment styles
+        ...getAlignmentStyles(data.alignment),
+    };
+    // Placeholder style for SSR (before client hydration)
+    const placeholderStyle = {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+        borderRadius: '4px',
+        minHeight: '100px',
+        objectFit: getFitStyle(data.fit),
+    };
+    return (_jsxs("div", { className: className, style: containerStyle, "aria-label": ariaLabel, "aria-describedby": ariaDescription ? `${elementId}-desc` : undefined, "data-component-id": elementId, "data-component-type": "rive", "data-src": data.src, "data-artboard": data.artboard, "data-autoplay": data.autoplay, "data-loop": data.loop, "data-fit": data.fit, "data-alignment": data.alignment, id: data.advanced?.id, "data-testid": data.advanced?.['data-testid'], tabIndex: data.advanced?.tabIndex, children: [_jsx("div", { style: placeholderStyle, children: _jsx("span", { style: { fontSize: '24px' }, children: "\uD83C\uDFAF" }) }), ariaDescription && (_jsx("span", { id: `${elementId}-desc`, style: {
+                    position: 'absolute',
+                    width: '1px',
+                    height: '1px',
+                    padding: 0,
+                    margin: '-1px',
+                    overflow: 'hidden',
+                    clip: 'rect(0, 0, 0, 0)',
+                    whiteSpace: 'nowrap',
+                    border: 0,
+                }, children: ariaDescription }))] }));
+}
+// Display name for debugging
+RiveRenderer.displayName = 'RiveRenderer';
+export default RiveRenderer;
+//# sourceMappingURL=renderer.js.map

package/dist/renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../src/renderer.tsx"],"names":[],"mappings":"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"}

package/dist/rive-component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { RiveComponentProps } from './rive-config';
+declare const RiveComponent: React.FC<RiveComponentProps>;
+export default RiveComponent;
+//# sourceMappingURL=rive-component.d.ts.map

package/dist/rive-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rive-component.d.ts","sourceRoot":"","sources":["../src/rive-component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2K/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/rive-component.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from 'react';
+import { useRive, useStateMachineInput } from 'rive-react';
+import { cn } from './lib/utils';
+const RiveComponent = ({ data, onChange, isEditing = false, className, }) => {
+    const [uploadedFile, setUploadedFile] = useState(null);
+    const containerRef = useRef(null);
+    const [hasError, setHasError] = useState(false);
+    const [errorMessage, setErrorMessage] = useState('');
+    const [animationData, setAnimationData] = useState(null);
+    // Parse animations and state machines from data
+    const animations = Array.isArray(data.animations)
+        ? data.animations.join(',')
+        : data.animations || '';
+    const stateMachines = Array.isArray(data.stateMachines)
+        ? data.stateMachines.join(',')
+        : data.stateMachines || '';
+    const riveParams = {
+        src: data.src || '',
+        animations: animations,
+        stateMachines: stateMachines,
+        autoplay: data.autoplay !== false,
+        onRiveReady: () => {
+            console.log('Rive animation loaded');
+            setHasError(false);
+            setErrorMessage('');
+            setAnimationData(true);
+        },
+    };
+    if (data.artboard) {
+        riveParams.artboard = data.artboard;
+    }
+    const { RiveComponent: RiveComp, rive } = useRive(riveParams);
+    // Handle file upload
+    const handleFileUpload = useCallback(async (event) => {
+        const file = event.target.files?.[0];
+        if (!file)
+            return;
+        // Validate file type
+        if (!file.name.endsWith('.riv')) {
+            alert('Please upload a valid Rive .riv file');
+            return;
+        }
+        try {
+            setUploadedFile(file);
+            const fileUrl = URL.createObjectURL(file);
+            onChange?.({
+                ...data,
+                src: fileUrl,
+            });
+        }
+        catch (error) {
+            console.error('Failed to process Rive file:', error);
+            setHasError(true);
+            setErrorMessage('Failed to process Rive file');
+        }
+    }, [data, onChange]);
+    // State machine inputs for mouse interactions
+    const stateMachineName = Array.isArray(data.stateMachines) ? data.stateMachines[0] : data.stateMachines;
+    const mouseXInput = useStateMachineInput(rive, stateMachineName || '', data.stateMachineInputs?.mousePosition?.x || 'mouseX', 0);
+    const mouseYInput = useStateMachineInput(rive, stateMachineName || '', data.stateMachineInputs?.mousePosition?.y || 'mouseY', 0);
+    const hoverInput = useStateMachineInput(rive, stateMachineName || '', data.stateMachineInputs?.hover || 'isHovering', false);
+    const clickInput = useStateMachineInput(rive, stateMachineName || '', data.stateMachineInputs?.click || 'onClick', false);
+    // Handle mouse movement for tracking
+    const handleMouseMove = useCallback((event) => {
+        if (!data.mouseInteraction?.enabled || !containerRef.current || !rive)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const x = (event.clientX - rect.left) / rect.width;
+        const y = (event.clientY - rect.top) / rect.height;
+        // Update mouse position in Rive (if inputs exist and rive is ready)
+        if (mouseXInput && mouseYInput) {
+            mouseXInput.value = x;
+            mouseYInput.value = y;
+        }
+    }, [data.mouseInteraction?.enabled, mouseXInput, mouseYInput, rive]);
+    // Handle mouse enter for hover effects
+    const handleMouseEnter = useCallback(() => {
+        if (!data.mouseInteraction?.enabled || !hoverInput || !rive)
+            return;
+        hoverInput.value = true;
+    }, [data.mouseInteraction?.enabled, hoverInput, rive]);
+    // Handle mouse leave for hover effects
+    const handleMouseLeave = useCallback(() => {
+        if (!data.mouseInteraction?.enabled || !hoverInput || !rive)
+            return;
+        hoverInput.value = false;
+    }, [data.mouseInteraction?.enabled, hoverInput, rive]);
+    // Handle click for click actions
+    const handleClick = useCallback(() => {
+        if (!data.mouseInteraction?.enabled || !clickInput || !rive)
+            return;
+        clickInput.value = true;
+        // Reset click trigger after a short delay
+        setTimeout(() => {
+            if (clickInput && rive) {
+                clickInput.value = false;
+            }
+        }, 100);
+    }, [data.mouseInteraction?.enabled, clickInput, rive]);
+    const containerProps = {
+        ref: containerRef,
+        className: cn('rive-container', data.mouseInteraction?.enabled && 'cursor-pointer interactive', className),
+        style: {
+            width: data.width || 300,
+            height: data.height || 300,
+            overflow: 'hidden',
+            borderRadius: '8px',
+            backgroundColor: '#f0f0f0',
+            border: '1px solid #e0e0e0',
+        },
+        onMouseMove: handleMouseMove,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: handleClick,
+    };
+    if (hasError) {
+        return (_jsxs("div", { className: cn('rive-error-container', className), style: {
+                width: data.width || 300,
+                height: data.height || 300,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                backgroundColor: '#fee',
+                border: '1px solid #fcc',
+                borderRadius: '8px',
+                color: '#c66',
+            }, children: [_jsx("div", { style: { fontSize: '48px', marginBottom: '8px' }, children: "\u26A0\uFE0F" }), _jsxs("div", { style: { textAlign: 'center', fontSize: '14px' }, children: [_jsx("div", { style: { fontWeight: 'bold', marginBottom: '4px' }, children: "Animation Error" }), _jsx("div", { style: { fontSize: '12px', opacity: 0.8 }, children: errorMessage })] })] }));
+    }
+    return (_jsx("div", { ...containerProps, children: RiveComp && (_jsx(RiveComp, { style: {
+                width: '100%',
+                height: '100%',
+            } })) }));
+};
+export default RiveComponent;
+//# sourceMappingURL=rive-component.js.map