@codefluss/rive 0.0.1-alpha.1

package/README.md

@@ -0,0 +1,74 @@
+# @codefluss/rive
+
+Rive animation plugin with advanced interactive features.
+
+## Features
+
+- Rive animation playback
+- State machine support for interactive animations
+- Multiple artboard support
+- Input triggers for user interaction
+- Fit modes (cover, contain, fill)
+- Design system integration
+- SSR compatible with client-side hydration
+
+## Installation
+
+```bash
+pnpm add @codefluss/rive
+```
+
+## Usage
+
+### Editor Mode
+
+```tsx
+import { RiveComponent } from '@codefluss/rive';
+
+<RiveComponent
+  data={riveData}
+  language='en'
+  isSelected={false}
+  isEditorMode={true}
+  dependencies={{ designSystem, utils }}
+/>;
+```
+
+### SSR Mode
+
+```tsx
+import { RiveRenderer } from '@codefluss/rive/renderer';
+
+<RiveRenderer
+  elementId='rive-1'
+  data={riveData}
+  language='en'
+  dependencies={{ designSystem, utils }}
+/>;
+```
+
+## Properties
+
+| Property                 | Type                                                                    | Description                       |
+| ------------------------ | ----------------------------------------------------------------------- | --------------------------------- |
+| `src`                    | `string`                                                                | URL to Rive animation file (.riv) |
+| `artboard`               | `string`                                                                | Artboard name to display          |
+| `stateMachine`           | `string`                                                                | State machine name to use         |
+| `animations`             | `string[]`                                                              | Animation names to play           |
+| `autoplay`               | `boolean`                                                               | Start playing on load             |
+| `fit`                    | `'cover' \| 'contain' \| 'fill' \| 'fitWidth' \| 'fitHeight' \| 'none'` | Fit mode                          |
+| `alignment`              | `string`                                                                | Animation alignment               |
+| `inputs`                 | `RiveInput[]`                                                           | State machine inputs              |
+| `layout.spacingPresetId` | `string`                                                                | Spacing preset from design system |
+
+## State Machine Inputs
+
+Rive supports various input types for interactive animations:
+
+- **Boolean**: Toggle states
+- **Number**: Numeric values
+- **Trigger**: One-shot events
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as RiveComponent } from './rive-component';
+export { riveConfig, defaultRiveData } from './rive-config';
+export type { RiveData, RiveComponentProps } from './rive-config';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,YAAY,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as RiveComponent } from './rive-component';
+export { riveConfig, defaultRiveData } from './rive-config';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function cn(...inputs: (string | undefined | null | false)[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AACA,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,CAE3E"}

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+// Simple className utility function
+export function cn(...inputs) {
+    return inputs.filter(Boolean).join(' ');
+}
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,MAAM,UAAU,EAAE,CAAC,GAAG,MAA6C;IACjE,OAAO,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC1C,CAAC"}

package/dist/locales/de.json

@@ -0,0 +1,183 @@
+{
+    "plugin": {
+        "name": "Rive Animation",
+        "description": "Interaktive Rive Animation mit Datei-Upload und erweiterten Maus-Interaktionen"
+    },
+    "properties": {
+        "src": {
+            "label": "Animationsdatei",
+            "placeholder": "Rive-Datei hochladen",
+            "description": "Wählen Sie eine Rive Animationsdatei von Ihrem Computer aus"
+        },
+        "artboard": {
+            "label": "Artboard",
+            "placeholder": "Standard",
+            "description": "Spezifischer Artboard der Animation"
+        },
+        "stateMachines": {
+            "label": "State Machines",
+            "placeholder": "StateMachine",
+            "description": "Kommagetrennte Liste der State Machines zur Steuerung"
+        },
+        "width": {
+            "label": "Breite",
+            "placeholder": "400",
+            "description": "Animationsbreite in Pixeln"
+        },
+        "height": {
+            "label": "Höhe",
+            "placeholder": "400",
+            "description": "Animationshöhe in Pixeln"
+        },
+        "fit": {
+            "label": "Anpassungsmodus",
+            "description": "Wie die Animation in ihren Container passt"
+        },
+        "alignment": {
+            "label": "Ausrichtung",
+            "description": "Animationsausrichtung innerhalb ihres Containers"
+        },
+        "loop": {
+            "label": "Endlosschleife",
+            "description": "Endlose Wiedergabe aktivieren"
+        },
+        "autoplay": {
+            "label": "Automatische Wiedergabe",
+            "description": "Animation automatisch beim Laden abspielen"
+        },
+        "mouseInteraction.enabled": {
+            "label": "Maus-Interaktion aktivieren",
+            "description": "Mausgestützte Interaktionssteuerungen aktivieren"
+        },
+        "mouseInteraction.followMouse": {
+            "label": "Maus folgen",
+            "description": "Animation folgt der Mausbewegung"
+        },
+        "mouseInteraction.sensitivity": {
+            "label": "Maus-Empfindlichkeit",
+            "placeholder": "1.0",
+            "description": "Wie empfindlich die Animation auf Mausbewegungen reagiert"
+        },
+        "mouseInteraction.hoverEffects": {
+            "label": "Hover-Effekte",
+            "description": "Spezialeffekte beim Überfahren der Animation aktivieren"
+        },
+        "mouseInteraction.clickActions": {
+            "label": "Klick-Aktionen",
+            "description": "Spezialaktionen beim Klicken auf die Animation aktivieren"
+        },
+        "stateMachineInputs.hover": {
+            "label": "Hover-State Input",
+            "placeholder": "isHovering",
+            "description": "State Machine Input Name für Hover-Zustand"
+        },
+        "stateMachineInputs.click": {
+            "label": "Klick-State Input",
+            "placeholder": "onTap",
+            "description": "State Machine Input Name für Klick-Aktion"
+        },
+        "stateMachineInputs.mousePosition.x": {
+            "label": "Maus-X Input",
+            "placeholder": "mouseX",
+            "description": "State Machine Input Name für X-Mausposition"
+        },
+        "stateMachineInputs.mousePosition.y": {
+            "label": "Maus-Y Input",
+            "placeholder": "mouseY",
+            "description": "State Machine Input Name für Y-Mausposition"
+        },
+        "accessibility.label": {
+            "label": "Barrierefreies Label",
+            "placeholder": "Interaktive Animation",
+            "description": "Screen Reader Label für die Animation"
+        },
+        "accessibility.description": {
+            "label": "Barrierefreie Beschreibung",
+            "placeholder": "Interaktive Rive Animation mit Maus-Interaktionen",
+            "description": "Detaillierte Beschreibung für Screen Reader"
+        },
+        "accessibility.role": {
+            "label": "Barrierefreie Rolle",
+            "placeholder": "img",
+            "description": "ARIA-Rolle für das Animationselement"
+        },
+        "advanced.className": {
+            "label": "CSS-Klassen",
+            "placeholder": "custom-animation my-style",
+            "description": "Zusätzliche CSS-Klassennamen für Styling"
+        },
+        "advanced.id": {
+            "label": "Element-ID",
+            "placeholder": "unique-id",
+            "description": "Eindeutiger Identifikator für das Element"
+        },
+        "advanced.ariaLabel": {
+            "label": "ARIA-Label",
+            "placeholder": "Beschreibendes Label für Screen Reader",
+            "description": "Zusätzliches Barrierefreiheits-Label"
+        },
+        "advanced.tabIndex": {
+            "label": "Tab-Index",
+            "placeholder": "0",
+            "description": "Navigationsreihenfolge für Tastaturzugang"
+        }
+    },
+    "categories": {
+        "content": "Inhalt",
+        "style": "Stil",
+        "interactivity": "Interaktivität",
+        "state": "Zustandssteuerung",
+        "advanced": "Erweitert"
+    },
+    "priorities": {
+        "quick": "Schnell",
+        "common": "Häufig",
+        "advanced": "Erweitert"
+    },
+    "upload": {
+        "title": "Rive-Datei hochladen",
+        "description": "Wählen Sie eine Rive Animationsdatei von Ihrem Computer aus",
+        "button": "Datei auswählen",
+        "dragText": "Ziehen Sie Ihre Rive-Datei hierher oder klicken Sie zur Auswahl",
+        "supportedFormats": "Unterstütztes Format: .riv",
+        "invalidFormat": "Bitte laden Sie eine gültige Rive .riv Datei hoch",
+        "fileTooLarge": "Datei ist zu groß. Maximale Größe ist 10MB.",
+        "uploadSuccess": "Datei erfolgreich hochgeladen!",
+        "uploadError": "Fehler beim Hochladen der Datei. Bitte versuchen Sie es erneut.",
+        "fileReady": "Bereit zum Rendern",
+        "loadedFile": "Geladen: {filename}"
+    },
+    "interactivity": {
+        "enabled": "Maus-Interaktion aktiv",
+        "followMouse": "Maus folgen",
+        "hoverEffects": "Hover-Effekte",
+        "clickActions": "Klick-Aktionen",
+        "sensitivity": "Empfindlichkeit",
+        "stateMachines": "State Machines",
+        "mousePosition": "Mausposition: ({x}, {y})"
+    },
+    "controls": {
+        "play": "Abspielen",
+        "pause": "Pausieren",
+        "stop": "Stopp"
+    },
+    "fitModes": {
+        "contain": "Enthalten",
+        "cover": "Abdecken",
+        "fill": "Füllen",
+        "fitWidth": "Breite anpassen",
+        "fitHeight": "Höhe anpassen",
+        "none": "Keine"
+    },
+    "alignments": {
+        "center": "Zentriert",
+        "topLeft": "Oben Links",
+        "topCenter": "Oben Zentriert",
+        "topRight": "Oben Rechts",
+        "centerLeft": "Zentriert Links",
+        "centerRight": "Zentriert Rechts",
+        "bottomLeft": "Unten Links",
+        "bottomCenter": "Unten Zentriert",
+        "bottomRight": "Unten Rechts"
+    }
+}

package/dist/locales/en.json

@@ -0,0 +1,183 @@
+{
+    "plugin": {
+        "name": "Rive Animation",
+        "description": "Interactive Rive animation with file upload and advanced mouse interactions"
+    },
+    "properties": {
+        "src": {
+            "label": "Animation File",
+            "placeholder": "Upload Rive file",
+            "description": "Select a Rive animation file from your computer"
+        },
+        "artboard": {
+            "label": "Artboard",
+            "placeholder": "Default",
+            "description": "Specific artboard to use from the animation"
+        },
+        "stateMachines": {
+            "label": "State Machines",
+            "placeholder": "StateMachine",
+            "description": "Comma-separated list of state machines to control"
+        },
+        "width": {
+            "label": "Width",
+            "placeholder": "400",
+            "description": "Animation width in pixels"
+        },
+        "height": {
+            "label": "Height",
+            "placeholder": "400",
+            "description": "Animation height in pixels"
+        },
+        "fit": {
+            "label": "Fit Mode",
+            "description": "How the animation fits within its container"
+        },
+        "alignment": {
+            "label": "Alignment",
+            "description": "Animation alignment within its container"
+        },
+        "loop": {
+            "label": "Loop Animation",
+            "description": "Enable infinite loop playback"
+        },
+        "autoplay": {
+            "label": "Autoplay",
+            "description": "Play animation automatically when loaded"
+        },
+        "mouseInteraction.enabled": {
+            "label": "Enable Mouse Interaction",
+            "description": "Enable mouse-based interaction controls"
+        },
+        "mouseInteraction.followMouse": {
+            "label": "Follow Mouse",
+            "description": "Animation follows mouse cursor movement"
+        },
+        "mouseInteraction.sensitivity": {
+            "label": "Mouse Sensitivity",
+            "placeholder": "1.0",
+            "description": "How responsive the animation is to mouse movement"
+        },
+        "mouseInteraction.hoverEffects": {
+            "label": "Hover Effects",
+            "description": "Enable special effects when hovering over animation"
+        },
+        "mouseInteraction.clickActions": {
+            "label": "Click Actions",
+            "description": "Enable special actions when clicking on animation"
+        },
+        "stateMachineInputs.hover": {
+            "label": "Hover State Input",
+            "placeholder": "isHovering",
+            "description": "State machine input name for hover state"
+        },
+        "stateMachineInputs.click": {
+            "label": "Click State Input",
+            "placeholder": "onTap",
+            "description": "State machine input name for click action"
+        },
+        "stateMachineInputs.mousePosition.x": {
+            "label": "Mouse X Input",
+            "placeholder": "mouseX",
+            "description": "State machine input name for X mouse position"
+        },
+        "stateMachineInputs.mousePosition.y": {
+            "label": "Mouse Y Input",
+            "placeholder": "mouseY",
+            "description": "State machine input name for Y mouse position"
+        },
+        "accessibility.label": {
+            "label": "Accessibility Label",
+            "placeholder": "Interactive Animation",
+            "description": "Screen reader label for the animation"
+        },
+        "accessibility.description": {
+            "label": "Accessibility Description",
+            "placeholder": "Interactive Rive animation with mouse interactions",
+            "description": "Detailed description for screen readers"
+        },
+        "accessibility.role": {
+            "label": "Accessibility Role",
+            "placeholder": "img",
+            "description": "ARIA role for the animation element"
+        },
+        "advanced.className": {
+            "label": "CSS Classes",
+            "placeholder": "custom-animation my-style",
+            "description": "Additional CSS class names for styling"
+        },
+        "advanced.id": {
+            "label": "Element ID",
+            "placeholder": "unique-id",
+            "description": "Unique identifier for the element"
+        },
+        "advanced.ariaLabel": {
+            "label": "ARIA Label",
+            "placeholder": "Descriptive label for screen readers",
+            "description": "Additional accessibility label"
+        },
+        "advanced.tabIndex": {
+            "label": "Tab Index",
+            "placeholder": "0",
+            "description": "Navigation order for keyboard access"
+        }
+    },
+    "categories": {
+        "content": "Content",
+        "style": "Style",
+        "interactivity": "Interactivity",
+        "state": "State Control",
+        "advanced": "Advanced"
+    },
+    "priorities": {
+        "quick": "Quick",
+        "common": "Common",
+        "advanced": "Advanced"
+    },
+    "upload": {
+        "title": "Upload Rive File",
+        "description": "Select a Rive animation file from your computer",
+        "button": "Choose File",
+        "dragText": "Drag and drop your Rive file here, or click to select",
+        "supportedFormats": "Supported format: .riv",
+        "invalidFormat": "Please upload a valid Rive .riv file",
+        "fileTooLarge": "File is too large. Maximum size is 10MB.",
+        "uploadSuccess": "File uploaded successfully!",
+        "uploadError": "Failed to upload file. Please try again.",
+        "fileReady": "Ready to render",
+        "loadedFile": "Loaded: {filename}"
+    },
+    "interactivity": {
+        "enabled": "Mouse Interaction Active",
+        "followMouse": "Mouse Follow",
+        "hoverEffects": "Hover Effects",
+        "clickActions": "Click Actions",
+        "sensitivity": "Sensitivity",
+        "stateMachines": "State Machines",
+        "mousePosition": "Mouse Position: ({x}, {y})"
+    },
+    "controls": {
+        "play": "Play",
+        "pause": "Pause",
+        "stop": "Stop"
+    },
+    "fitModes": {
+        "contain": "Contain",
+        "cover": "Cover",
+        "fill": "Fill",
+        "fitWidth": "Fit Width",
+        "fitHeight": "Fit Height",
+        "none": "None"
+    },
+    "alignments": {
+        "center": "Center",
+        "topLeft": "Top Left",
+        "topCenter": "Top Center",
+        "topRight": "Top Right",
+        "centerLeft": "Center Left",
+        "centerRight": "Center Right",
+        "bottomLeft": "Bottom Left",
+        "bottomCenter": "Bottom Center",
+        "bottomRight": "Bottom Right"
+    }
+}