r1-create 1.0.0

package/dist/ui/index.js

@@ -0,0 +1,311 @@
+"use strict";
+/**
+ * UI utilities module for R1 display optimization
+ * Provides tools for 240x282px display, hardware-accelerated CSS, and DOM optimization
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.R1Component = exports.PerformanceUtils = exports.LayoutUtils = exports.DOMUtils = exports.CSSUtils = exports.R1_DIMENSIONS = void 0;
+exports.R1_DIMENSIONS = {
+    width: 240,
+    height: 282
+};
+/**
+ * CSS utilities for hardware-accelerated animations and R1 optimization
+ */
+class CSSUtils {
+    /**
+     * Apply hardware-accelerated transform
+     * @param element Target element
+     * @param transform Transform value (e.g., 'translateX(10px)')
+     */
+    static setTransform(element, transform) {
+        element.style.transform = transform;
+        element.style.willChange = 'transform';
+    }
+    /**
+     * Apply hardware-accelerated opacity
+     * @param element Target element
+     * @param opacity Opacity value (0-1)
+     */
+    static setOpacity(element, opacity) {
+        element.style.opacity = opacity.toString();
+        element.style.willChange = 'opacity';
+    }
+    /**
+     * Reset will-change property to optimize performance
+     * @param element Target element
+     */
+    static resetWillChange(element) {
+        element.style.willChange = 'auto';
+    }
+    /**
+     * Add hardware-accelerated transition
+     * @param element Target element
+     * @param property CSS property to transition
+     * @param duration Duration in milliseconds
+     * @param easing Easing function (default: ease-out)
+     */
+    static addTransition(element, property, duration, easing = 'ease-out') {
+        element.style.transition = `${property} ${duration}ms ${easing}`;
+    }
+    /**
+     * Create optimized CSS animation class
+     * @param name Animation name
+     * @param keyframes CSS keyframes
+     * @param duration Duration in milliseconds
+     * @param easing Easing function
+     */
+    static createAnimation(name, keyframes, duration, easing = 'ease-out') {
+        const style = document.createElement('style');
+        style.textContent = `
+      @keyframes ${name} {
+        ${keyframes}
+      }
+      .${name} {
+        animation: ${name} ${duration}ms ${easing};
+      }
+    `;
+        document.head.appendChild(style);
+    }
+}
+exports.CSSUtils = CSSUtils;
+/**
+ * DOM optimization utilities for minimal DOM changes
+ */
+class DOMUtils {
+    /**
+     * Batch DOM operations using DocumentFragment
+     * @param operations Function containing DOM operations
+     * @param container Container element to append fragment to
+     */
+    static batchOperations(operations, container) {
+        const fragment = document.createDocumentFragment();
+        operations(fragment);
+        container.appendChild(fragment);
+    }
+    /**
+     * Efficiently update element content without full innerHTML replacement
+     * @param element Target element
+     * @param content New content
+     */
+    static updateContent(element, content) {
+        if (element.textContent !== content) {
+            element.textContent = content;
+        }
+    }
+    /**
+     * Toggle class efficiently
+     * @param element Target element
+     * @param className Class name to toggle
+     * @param condition Optional condition for toggle
+     */
+    static toggleClass(element, className, condition) {
+        if (condition !== undefined) {
+            element.classList.toggle(className, condition);
+        }
+        else {
+            element.classList.toggle(className);
+        }
+    }
+    /**
+     * Create element with optimized attributes
+     * @param tagName Element tag name
+     * @param attributes Element attributes
+     * @param textContent Optional text content
+     */
+    static createElement(tagName, attributes = {}, textContent) {
+        const element = document.createElement(tagName);
+        Object.entries(attributes).forEach(([key, value]) => {
+            element.setAttribute(key, value);
+        });
+        if (textContent !== undefined) {
+            element.textContent = textContent;
+        }
+        return element;
+    }
+    /**
+     * Debounce function for reducing DOM updates
+     * @param func Function to debounce
+     * @param delay Delay in milliseconds
+     */
+    static debounce(func, delay) {
+        let timeoutId;
+        return ((...args) => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => func.apply(null, args), delay);
+        });
+    }
+}
+exports.DOMUtils = DOMUtils;
+DOMUtils.documentFragment = null;
+/**
+ * Layout utilities for R1 display
+ */
+class LayoutUtils {
+    /**
+     * Check if coordinates are within R1 display bounds
+     * @param x X coordinate
+     * @param y Y coordinate
+     */
+    static isWithinBounds(x, y) {
+        return x >= 0 && x <= exports.R1_DIMENSIONS.width && y >= 0 && y <= exports.R1_DIMENSIONS.height;
+    }
+    /**
+     * Clamp coordinates to R1 display bounds
+     * @param x X coordinate
+     * @param y Y coordinate
+     */
+    static clampToBounds(x, y) {
+        return {
+            x: Math.max(0, Math.min(x, exports.R1_DIMENSIONS.width)),
+            y: Math.max(0, Math.min(y, exports.R1_DIMENSIONS.height))
+        };
+    }
+    /**
+     * Calculate responsive font size based on container
+     * @param containerWidth Container width
+     * @param baseSize Base font size in px
+     * @param minSize Minimum font size in px
+     * @param maxSize Maximum font size in px
+     */
+    static calculateFontSize(containerWidth, baseSize = 16, minSize = 12, maxSize = 24) {
+        const ratio = containerWidth / exports.R1_DIMENSIONS.width;
+        const scaledSize = baseSize * ratio;
+        return Math.max(minSize, Math.min(scaledSize, maxSize));
+    }
+    /**
+     * Create CSS for R1-optimized container
+     */
+    static createR1Container() {
+        return `
+      width: ${exports.R1_DIMENSIONS.width}px;
+      height: ${exports.R1_DIMENSIONS.height}px;
+      max-width: 100vw;
+      max-height: 100vh;
+      overflow: hidden;
+      position: relative;
+      box-sizing: border-box;
+    `;
+    }
+    /**
+     * Apply R1 container styles to element
+     * @param element Target element
+     */
+    static applyR1Container(element) {
+        Object.assign(element.style, {
+            width: `${exports.R1_DIMENSIONS.width}px`,
+            height: `${exports.R1_DIMENSIONS.height}px`,
+            maxWidth: '100vw',
+            maxHeight: '100vh',
+            overflow: 'hidden',
+            position: 'relative',
+            boxSizing: 'border-box'
+        });
+    }
+}
+exports.LayoutUtils = LayoutUtils;
+/**
+ * Performance monitoring utilities
+ */
+class PerformanceUtils {
+    /**
+     * Start performance measurement
+     * @param name Measurement name
+     */
+    static startMeasure(name) {
+        this.performanceMarks.set(name, performance.now());
+    }
+    /**
+     * End performance measurement and log result
+     * @param name Measurement name
+     * @param logToConsole Whether to log to console
+     */
+    static endMeasure(name, logToConsole = true) {
+        const startTime = this.performanceMarks.get(name);
+        if (!startTime) {
+            console.warn(`No start mark found for: ${name}`);
+            return 0;
+        }
+        const duration = performance.now() - startTime;
+        this.performanceMarks.delete(name);
+        if (logToConsole) {
+            console.log(`Performance [${name}]: ${duration.toFixed(2)}ms`);
+        }
+        return duration;
+    }
+    /**
+     * Monitor frame rate
+     * @param duration Duration to monitor in seconds
+     * @param callback Callback with average FPS
+     */
+    static monitorFPS(duration, callback) {
+        let frames = 0;
+        const startTime = performance.now();
+        const tick = () => {
+            frames++;
+            const currentTime = performance.now();
+            const elapsed = (currentTime - startTime) / 1000;
+            if (elapsed >= duration) {
+                const fps = frames / elapsed;
+                callback(fps);
+            }
+            else {
+                requestAnimationFrame(tick);
+            }
+        };
+        requestAnimationFrame(tick);
+    }
+}
+exports.PerformanceUtils = PerformanceUtils;
+PerformanceUtils.performanceMarks = new Map();
+/**
+ * R1 UI Component base class
+ */
+class R1Component {
+    constructor(tagName = 'div', className) {
+        this.mounted = false;
+        this.element = document.createElement(tagName);
+        if (className) {
+            this.element.className = className;
+        }
+    }
+    /**
+     * Mount component to container
+     * @param container Container element
+     */
+    mount(container) {
+        if (this.mounted) {
+            console.warn('Component already mounted');
+            return;
+        }
+        container.appendChild(this.element);
+        this.mounted = true;
+        this.onMount();
+    }
+    /**
+     * Unmount component
+     */
+    unmount() {
+        if (!this.mounted)
+            return;
+        if (this.element.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+        this.mounted = false;
+        this.onUnmount();
+    }
+    /**
+     * Get component element
+     */
+    getElement() {
+        return this.element;
+    }
+    /**
+     * Check if component is mounted
+     */
+    isMounted() {
+        return this.mounted;
+    }
+}
+exports.R1Component = R1Component;
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

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

package/examples/README.md

@@ -0,0 +1,64 @@
+# R1 SDK Examples
+
+This directory contains example applications demonstrating various features of the R1 Create SDK.
+
+## Examples
+
+### 1. Basic Plugin (`basic/`)
+Simple plugin demonstrating:
+- Hardware event handling (side button, scroll wheel)
+- Accelerometer data display
+- LLM interaction
+- Storage operations
+
+### 2. Camera App (`camera/`)
+Camera application showing:
+- Camera access and preview
+- Photo capture
+- Image storage and display
+- Hardware-accelerated UI
+
+### 3. Voice Recorder (`voice/`)
+Voice recording app with:
+- Microphone access
+- Audio recording and playback
+- Audio storage with Base64 encoding
+- Voice-to-LLM integration
+
+### 4. Accelerometer Game (`accelerometer/`)
+Simple tilt-based game featuring:
+- Real-time accelerometer input
+- Hardware-accelerated animations
+- Game state management
+- Performance optimization
+
+### 5. LLM Chat (`chat/`)
+Chat interface demonstrating:
+- Conversational LLM interaction
+- Message history storage
+- Voice input/output
+- UI optimization for R1 display
+
+## Running Examples
+
+1. Build the SDK first:
+   ```bash
+   npm run build
+   ```
+
+2. Serve the examples using a local server:
+   ```bash
+   npx http-server examples -p 8080
+   ```
+
+3. Navigate to `http://localhost:8080/[example-name]/` in your browser
+
+## Note for R1 Device
+
+These examples are designed to work in the R1 environment where the hardware APIs are available. When running in a regular browser:
+- Hardware events won't trigger
+- Storage APIs may not be available
+- LLM interactions will fail
+- Media permissions may be restricted
+
+The examples include fallback behavior and error handling for development purposes.

package/examples/basic/index.html

@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Basic R1 Plugin</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #000;
+            color: #fff;
+            overflow: hidden;
+        }
+        
+        .container {
+            width: 240px;
+            height: 282px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+        
+        .status {
+            font-size: 14px;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        
+        .button {
+            background: #ff6b35;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            margin: 8px;
+            transition: background-color 0.2s;
+        }
+        
+        .button:hover {
+            background: #e55a2b;
+        }
+        
+        .accelerometer {
+            font-size: 12px;
+            text-align: center;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1 style="font-size: 18px; margin-bottom: 20px;">R1 Basic Plugin</h1>
+        
+        <div class="status" id="status">Initializing...</div>
+        
+        <button class="button" onclick="askLLM()">Ask LLM</button>
+        <button class="button" onclick="saveData()">Save Data</button>
+        <button class="button" onclick="loadData()">Load Data</button>
+        
+        <div class="accelerometer" id="accelerometer">
+            Accelerometer: Not active
+        </div>
+    </div>
+
+    <script type="module">
+        // Note: In a real R1 environment, you would import from 'r1-create'
+        // For this example, we're importing from the built dist
+        import { r1, createR1App } from './../../dist/index.js';
+        
+        let accelerometerActive = false;
+        
+        createR1App(async (sdk) => {
+            document.getElementById('status').textContent = 'R1 SDK Ready!';
+            
+            // Hardware event listeners
+            sdk.hardware.on('sideClick', () => {
+                document.getElementById('status').textContent = 'Side button clicked!';
+                setTimeout(() => {
+                    document.getElementById('status').textContent = 'R1 SDK Ready!';
+                }, 2000);
+            });
+            
+            sdk.hardware.on('scrollUp', () => {
+                document.getElementById('status').textContent = 'Scrolled up!';
+            });
+            
+            sdk.hardware.on('scrollDown', () => {
+                document.getElementById('status').textContent = 'Scrolled down!';
+            });
+            
+            // Start accelerometer
+            if (await sdk.accelerometer.isAvailable()) {
+                sdk.accelerometer.start((data) => {
+                    document.getElementById('accelerometer').innerHTML = `
+                        Accelerometer:<br>
+                        X: ${data.x.toFixed(2)}<br>
+                        Y: ${data.y.toFixed(2)}<br>
+                        Z: ${data.z.toFixed(2)}
+                    `;
+                });
+                accelerometerActive = true;
+            }
+            
+            // Message handler
+            sdk.messaging.onMessage((response) => {
+                if (response.parsedData) {
+                    console.log('LLM Response:', response.parsedData);
+                    document.getElementById('status').textContent = 'LLM responded!';
+                } else {
+                    console.log('Message:', response.message);
+                    document.getElementById('status').textContent = response.message;
+                }
+            });
+        });
+        
+        // Global functions for buttons
+        window.askLLM = async () => {
+            document.getElementById('status').textContent = 'Asking LLM...';
+            await r1.llm.askLLMJSON('Tell me an interesting fact about technology in JSON format: {"fact": "your fact here"}');
+        };
+        
+        window.saveData = async () => {
+            try {
+                await r1.storage.plain.setItem('demo_data', {
+                    timestamp: new Date().toISOString(),
+                    message: 'Hello from R1 plugin!',
+                    visits: Math.floor(Math.random() * 100)
+                });
+                document.getElementById('status').textContent = 'Data saved!';
+            } catch (error) {
+                document.getElementById('status').textContent = 'Save failed: ' + error.message;
+            }
+        };
+        
+        window.loadData = async () => {
+            try {
+                const data = await r1.storage.plain.getItem('demo_data');
+                if (data) {
+                    document.getElementById('status').textContent = `Loaded: ${data.visits} visits`;
+                    console.log('Loaded data:', data);
+                } else {
+                    document.getElementById('status').textContent = 'No data found';
+                }
+            } catch (error) {
+                document.getElementById('status').textContent = 'Load failed: ' + error.message;
+            }
+        };
+    </script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "r1-create",
+  "version": "1.0.0",
+  "description": "3rd party SDK for building R1/RabbitOS plugins with hardware access, storage, LLM integration, and optimized UI utilities",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "examples/**/*",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "build:watch": "tsc --watch",
+    "dev": "tsc --watch",
+    "test": "node test.js",
+    "test:build": "npm run build && npm test",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "r1",
+    "rabbit",
+    "rabbitos",
+    "plugin",
+    "sdk",
+    "hardware",
+    "accelerometer",
+    "llm",
+    "mobile"
+  ],
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/node": "^20.0.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AidanTheBandit/R1-create.js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/AidanTheBandit/R1-create.js/issues"
+  },
+  "homepage": "https://github.com/AidanTheBandit/R1-create.js#readme"
+}