move.gl 0.0.1 → 0.0.2

package/src/jinja/core-concepts.html.jinja

@@ -0,0 +1,148 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Core Concepts — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Documentation</p>
+<h1>Core Concepts</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Animation Categories</h2>
+    <p>move.gl organizes animations into logical categories:</p>
+
+    <div class="feature-grid">
+        <div class="feature-card">
+            <h3 class="feature-card__title">Keyframes</h3>
+            <p class="feature-card__desc">Pre-defined @keyframes for common animation patterns like fade, slide, bounce,
+                zoom, and flip.</p>
+        </div>
+        <div class="feature-card">
+            <h3 class="feature-card__title">Transitions</h3>
+            <p class="feature-card__desc">Smooth property transitions between states with customizable timing functions.
+            </p>
+        </div>
+        <div class="feature-card">
+            <h3 class="feature-card__title">Transforms</h3>
+            <p class="feature-card__desc">2D and 3D transform utilities for rotation, scaling, skewing, and translation.
+            </p>
+        </div>
+        <div class="feature-card">
+            <h3 class="feature-card__title">Loaders</h3>
+            <p class="feature-card__desc">Animated loading indicators including spinners, dots, bars, and pulse effects.
+            </p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h2>Timing Functions</h2>
+    <p>Built-in easing functions for natural motion:</p>
+
+    <div class="code-block"><span class="comment">// Standard easings</span>
+        $ease-linear: linear;
+        $ease-in: cubic-bezier(0.4, 0, 1, 1);
+        $ease-out: cubic-bezier(0, 0, 0.2, 1);
+        $ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+        <span class="comment">// Custom spring-like easings</span>
+        $ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        $ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+
+        <span class="comment">// Usage</span>
+        .element {
+        @include fade-in($timing: $ease-bounce);
+        }
+    </div>
+</section>
+
+<section>
+    <h2>Duration Scale</h2>
+    <p>Consistent duration values for animations:</p>
+
+    <div class="code-block"><span class="comment">// Duration scale</span>
+        $duration-instant: 75ms; <span class="comment">// Nearly instant</span>
+        $duration-fast: 150ms; <span class="comment">// Quick interactions</span>
+        $duration-normal: 300ms; <span class="comment">// Default</span>
+        $duration-slow: 500ms; <span class="comment">// Deliberate motion</span>
+        $duration-slower: 700ms; <span class="comment">// Dramatic effect</span>
+        $duration-slowest: 1000ms; <span class="comment">// Very slow</span>
+    </div>
+</section>
+
+<section>
+    <h2>Accessibility</h2>
+    <p>move.gl respects user preferences for reduced motion:</p>
+
+    <div class="code-block"><span class="comment">// The motion-safe mixin only applies animations when safe</span>
+        .element {
+        @include motion-safe {
+        @include fade-in;
+        }
+        }
+
+        <span class="comment">// Alternative: motion-reduced for fallback styles</span>
+        .element {
+        @include fade-in;
+
+        @include motion-reduced {
+        animation: none;
+        opacity: 1;
+        }
+        }
+    </div>
+
+    <p>Users with <code>prefers-reduced-motion: reduce</code> set in their system preferences will see static content or
+        minimal transitions.</p>
+</section>
+
+<section>
+    <h2>Performance</h2>
+    <p>move.gl uses GPU-accelerated properties for smooth 60fps animations:</p>
+
+    <ul>
+        <li><strong>transform</strong> — For position, rotation, and scale changes</li>
+        <li><strong>opacity</strong> — For visibility transitions</li>
+        <li><strong>will-change</strong> — Applied automatically for complex animations</li>
+    </ul>
+
+    <div class="code-block"><span class="comment">// GPU-accelerated animation</span>
+        @keyframes slide-up {
+        from {
+        transform: translateY(20px); <span class="comment">// GPU-accelerated</span>
+        opacity: 0; <span class="comment">// GPU-accelerated</span>
+        }
+        to {
+        transform: translateY(0);
+        opacity: 1;
+        }
+        }
+
+        <span class="comment">// Avoid animating these properties (triggers layout):</span>
+        <span class="comment">// - width, height</span>
+        <span class="comment">// - margin, padding</span>
+        <span class="comment">// - top, left, right, bottom</span>
+    </div>
+</section>
+
+<section>
+    <h2>Composing Animations</h2>
+    <p>Combine multiple animations for complex effects:</p>
+
+    <div class="code-block"><span class="comment">// Combine fade + slide</span>
+        .card-enter {
+        @include fade-in($duration: 0.5s);
+        @include slide-up($duration: 0.5s);
+        }
+
+        <span class="comment">// Sequential animations with delays</span>
+        .stagger-1 { animation-delay: 0ms; }
+        .stagger-2 { animation-delay: 100ms; }
+        .stagger-3 { animation-delay: 200ms; }
+        .stagger-4 { animation-delay: 300ms; }
+    </div>
+</section>
+
+{%- endblock %}

package/src/jinja/demo_draggable.html.jinja

@@ -0,0 +1,114 @@
+{# ============================================================================
+move.gl | Draggable Demo
+============================================================================
+Interactive demo for the draggable component
+============================================================================ #}
+{%- extends "_base.html.jinja" -%}
+
+{%- set title = "Draggable Demo — move.gl" -%}
+{%- set description = "Draggable Component Demo — Make any element draggable with mouse and touch support." -%}
+{%- set current_demo = "draggable" -%}
+
+{%- block header %}
+<header class="page-header">
+    <div class="page-header__badge">TypeScript Component</div>
+    <h1 class="page-header__title">Draggable</h1>
+    <p class="page-header__description">
+        Make any HTML element draggable with full mouse and touch support.
+        Perfect for creating interactive interfaces, drag-and-drop features, and movable widgets.
+    </p>
+</header>
+{%- endblock -%}
+
+{%- block content %}
+<section class="section">
+    <h2 class="section__title">Interactive Demo</h2>
+    <p class="section__description">Try dragging the boxes around the container. Works with both mouse and touch!</p>
+
+    <div class="drag-container" id="dragContainer">
+        <div class="draggable-box" id="box1" style="top: 50px; left: 50px;">Drag Me!</div>
+        <div class="draggable-box draggable-box--pink" id="box2" style="top: 50px; right: 50px;">Me Too!</div>
+        <div class="draggable-box draggable-box--cyan" id="box3"
+            style="bottom: 50px; left: 50%; transform: translateX(-50%); width: 150px; height: 80px;">And Me!</div>
+    </div>
+
+    <div class="controls">
+        <button class="btn btn-primary" onclick="resetPositions()">Reset Positions</button>
+        <button class="btn btn-secondary" onclick="clearLog()">Clear Log</button>
+    </div>
+
+    <div class="log-output" id="logOutput">
+        <div class="log-entry"><span class="timestamp">[--:--:--]</span> Drag events will appear here...</div>
+    </div>
+</section>
+
+<section class="section">
+    <h2 class="section__title">Features</h2>
+    <div class="feature-grid">
+        <div class="feature-card">
+            <h4>🖱️ Mouse Support</h4>
+            <p>Full mouse drag support with mousedown, mousemove, and mouseup events.</p>
+        </div>
+        <div class="feature-card">
+            <h4>📱 Touch Support</h4>
+            <p>Native touch event handling for mobile devices and tablets.</p>
+        </div>
+        <div class="feature-card">
+            <h4>📦 Boundary Constraints</h4>
+            <p>Elements are constrained within their parent container bounds.</p>
+        </div>
+        <div class="feature-card">
+            <h4>🎯 Event Callbacks</h4>
+            <p>Hook into drag events with onDragStart, onDrag, and onDragEnd callbacks.</p>
+        </div>
+    </div>
+</section>
+
+<section class="section">
+    <h2 class="section__title">Usage</h2>
+
+    <h3>Basic Usage</h3>
+    <div class="code-block">
+        <code><span class="keyword">import</span> { Draggable } <span class="keyword">from</span> <span class="string">'move.gl'</span>;
+
+<span class="comment">// Make an element draggable</span>
+<span class="keyword">const</span> draggable = <span class="keyword">new</span> <span class="function">Draggable</span>(<span class="string">'myElement'</span>);
+
+<span class="comment">// Clean up when done</span>
+draggable.<span class="function">destroy</span>();</code>
+    </div>
+
+    <h3>HTML Structure</h3>
+    <div class="code-block">
+        <code><span class="comment">&lt;!-- Parent container defines boundaries --&gt;</span>
+&lt;<span class="keyword">div</span> <span class="string">class</span>=<span class="string">"container"</span>&gt;
+    &lt;<span class="keyword">div</span> <span class="string">id</span>=<span class="string">"myElement"</span> <span class="string">class</span>=<span class="string">"draggable"</span>&gt;
+        Drag me!
+    &lt;/<span class="keyword">div</span>&gt;
+&lt;/<span class="keyword">div</span>&gt;</code>
+    </div>
+</section>
+
+<section class="section">
+    <h2 class="section__title">API Reference</h2>
+
+    <h3>Constructor</h3>
+    <div class="code-block">
+        <code><span class="keyword">new</span> <span class="function">Draggable</span>(elementId: <span class="keyword">string</span>)</code>
+    </div>
+
+    <h3>Methods</h3>
+    <table class="api-table">
+        <tr>
+            <th>Method</th>
+            <th>Description</th>
+        </tr>
+        <tr>
+            <td><code>destroy()</code></td>
+            <td>Removes all event listeners and cleans up the instance</td>
+        </tr>
+    </table>
+</section>
+
+{%- include "partials/_demo_links.html.jinja" %}
+{%- endblock -%}

package/src/jinja/demo_gesture.html.jinja

@@ -0,0 +1,128 @@
+{# ============================================================================
+move.gl | Gesture Demo
+============================================================================
+Interactive demo for the gesture handler component
+============================================================================ #}
+{%- extends "_base.html.jinja" -%}
+
+{%- set title = "Gesture Demo — move.gl" -%}
+{%- set description = "Touch Gesture Demo — Detect taps, swipes, pinches, and rotations." -%}
+{%- set current_demo = "gesture" -%}
+
+{%- block header %}
+<header class="page-header">
+    <div class="page-header__badge">TypeScript Component</div>
+    <h1 class="page-header__title">Gesture Handler</h1>
+    <p class="page-header__description">
+        Detect and respond to touch gestures including taps, swipes, pinches, and rotations.
+        Works with both touch devices and mouse input.
+    </p>
+</header>
+{%- endblock -%}
+
+{%- block content %}
+<section class="section">
+    <h2 class="section__title">Interactive Demo</h2>
+    <p class="section__description">
+        <strong>Touch/Mobile:</strong> Use one finger to tap or swipe, two fingers to pinch.<br>
+        <strong>Desktop:</strong> Click to tap, click and drag to swipe.
+    </p>
+
+    <div class="gesture-area" id="gestureArea">
+        <div class="direction-indicator left" id="dirLeft">←</div>
+        <div class="direction-indicator right" id="dirRight">→</div>
+        <div class="direction-indicator up" id="dirUp">↑</div>
+        <div class="direction-indicator down" id="dirDown">↓</div>
+
+        <div class="gesture-icon" id="gestureIcon">👆</div>
+        <div class="gesture-label" id="gestureLabel">Touch or Click Here</div>
+        <div class="gesture-hint" id="gestureHint">Try tapping, swiping, or pinching</div>
+        <div class="gesture-feedback" id="gestureFeedback">Tap detected!</div>
+    </div>
+
+    <div class="stats-grid">
+        <div class="stat-card">
+            <div class="stat-card__value" id="tapCount">0</div>
+            <div class="stat-card__label">Taps</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-card__value" id="swipeCount">0</div>
+            <div class="stat-card__label">Swipes</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-card__value" id="pinchCount">0</div>
+            <div class="stat-card__label">Pinches</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-card__value" id="lastDirection">—</div>
+            <div class="stat-card__label">Last Direction</div>
+        </div>
+    </div>
+
+    <div class="controls">
+        <button class="btn btn-secondary" onclick="resetStats()">Reset Stats</button>
+        <button class="btn btn-secondary" onclick="clearLog()">Clear Log</button>
+    </div>
+
+    <div class="gesture-log" id="gestureLog">
+        <div class="entry">
+            <span class="timestamp">--:--:--</span>
+            <span class="type">INIT</span>
+            <span class="details">Gesture handler ready</span>
+        </div>
+    </div>
+</section>
+
+<section class="section">
+    <h2 class="section__title">Supported Gestures</h2>
+    <div class="feature-grid">
+        <div class="feature-card">
+            <h4>👆 Tap</h4>
+            <p>Single touch/click without movement. Fires onTap callback.</p>
+        </div>
+        <div class="feature-card">
+            <h4>👋 Swipe</h4>
+            <p>Touch and drag in any direction. Detects left, right, up, down.</p>
+        </div>
+        <div class="feature-card">
+            <h4>🤏 Pinch</h4>
+            <p>Two-finger pinch gesture. Returns scale factor for zoom effects.</p>
+        </div>
+        <div class="feature-card">
+            <h4>🔄 Rotate</h4>
+            <p>Two-finger rotation gesture. Returns angle for rotation effects.</p>
+        </div>
+    </div>
+</section>
+
+<section class="section">
+    <h2 class="section__title">Usage</h2>
+
+    <h3>TouchGestureHandler</h3>
+    <div class="code-block">
+        <code><span class="keyword">import</span> { TouchGestureHandler } <span class="keyword">from</span> <span class="string">'move.gl'</span>;
+
+<span class="keyword">const</span> gesture = <span class="keyword">new</span> <span class="function">TouchGestureHandler</span>(<span class="string">'myElement'</span>, {
+    <span class="function">onTap</span>: () => console.<span class="function">log</span>(<span class="string">'Tapped!'</span>),
+    <span class="function">onSwipe</span>: (direction, deltaX, deltaY) => {
+        console.<span class="function">log</span>(<span class="string">`Swiped ${direction}`</span>);
+    },
+    <span class="function">onPinch</span>: (scale) => console.<span class="function">log</span>(<span class="string">`Scale: ${scale}`</span>)
+});</code>
+    </div>
+
+    <h3>GestureCallbacks Interface</h3>
+    <div class="code-block">
+        <code><span class="keyword">interface</span> GestureCallbacks {
+    onTap?: () => <span class="keyword">void</span>;
+    onSwipe?: (direction: SwipeDirection, deltaX: <span class="keyword">number</span>, deltaY: <span class="keyword">number</span>) => <span class="keyword">void</span>;
+    onPinch?: (scale: <span class="keyword">number</span>) => <span class="keyword">void</span>;
+    onRotate?: (angle: <span class="keyword">number</span>) => <span class="keyword">void</span>;
+}
+
+<span class="keyword">type</span> SwipeDirection = <span class="string">'left'</span> | <span class="string">'right'</span> | <span class="string">'up'</span> | <span class="string">'down'</span>;</code>
+    </div>
+</section>
+
+{%- include "partials/_demo_links.html.jinja" %}
+{%- endblock -%}

package/src/jinja/demo_keyboard.html.jinja

@@ -0,0 +1,88 @@
+{# ============================================================================
+move.gl | Virtual Keyboard Demo
+============================================================================
+Interactive demo for the virtual keyboard component
+============================================================================ #}
+{%- extends "_base.html.jinja" -%}
+
+{%- set title = "Virtual Keyboard Demo — move.gl" -%}
+{%- set description = "Virtual Keyboard Demo — Customizable on-screen keyboard with multiple layouts." -%}
+{%- set current_demo = "keyboard" -%}
+
+{%- block header %}
+<header class="page-header">
+    <div class="page-header__badge">TypeScript Component</div>
+    <h1 class="page-header__title">Virtual Keyboard</h1>
+    <p class="page-header__description">
+        A fully customizable on-screen virtual keyboard with support for multiple layouts,
+        shift modes, and special character modes. Perfect for kiosks and touch interfaces.
+    </p>
+</header>
+{%- endblock -%}
+
+{%- block content %}
+<section class="section">
+    <h2 class="section__title">Interactive Demo</h2>
+    <p class="section__description">Click keys on the virtual keyboard to type. Use mode buttons to switch layouts.</p>
+
+    <div class="keyboard-demo">
+        <input type="text" class="keyboard__input" id="keyboardInput" placeholder="Click keys to type..." readonly>
+
+        <div class="mode-buttons">
+            <button class="mode-btn active" onclick="switchMode('default')">ABC</button>
+            <button class="mode-btn" onclick="switchMode('shift')">⇧ SHIFT</button>
+            <button class="mode-btn" onclick="switchMode('special')">123</button>
+        </div>
+
+        <div class="keyboard" id="keyboard"></div>
+
+        <div class="keyboard__stats">
+            <div>Characters: <span id="charCount">0</span></div>
+            <div>Words: <span id="wordCount">0</span></div>
+            <div>Keypresses: <span id="keypressCount">0</span></div>
+        </div>
+    </div>
+</section>
+
+<section class="section">
+    <h2 class="section__title">Features</h2>
+    <div class="feature-grid">
+        <div class="feature-card">
+            <h4>⌨️ Full Keyboard</h4>
+            <p>Complete QWERTY layout with all letters, numbers, and common symbols.</p>
+        </div>
+        <div class="feature-card">
+            <h4>⇧ Shift Mode</h4>
+            <p>Toggle uppercase letters with shift key support.</p>
+        </div>
+        <div class="feature-card">
+            <h4>🔢 Special Characters</h4>
+            <p>Dedicated mode for numbers and special symbols.</p>
+        </div>
+        <div class="feature-card">
+            <h4>🎨 Customizable</h4>
+            <p>Easily customize layouts, styles, and key mappings.</p>
+        </div>
+    </div>
+</section>
+
+<section class="section">
+    <h2 class="section__title">Usage</h2>
+    <div class="code-block">
+        <code><span class="keyword">import</span> { VirtualKeyboard } <span class="keyword">from</span> <span class="string">'move.gl'</span>;
+
+<span class="keyword">const</span> keyboard = <span class="keyword">new</span> <span class="function">VirtualKeyboard</span>({
+    containerId: <span class="string">'keyboard-container'</span>,
+    inputId: <span class="string">'text-input'</span>,
+    <span class="function">onKeyPress</span>: (key) => console.<span class="function">log</span>(<span class="string">`Key: ${key}`</span>)
+});
+
+<span class="comment">// Switch keyboard mode</span>
+keyboard.<span class="function">switchMode</span>(<span class="string">'shift'</span>);
+keyboard.<span class="function">switchMode</span>(<span class="string">'special'</span>);
+keyboard.<span class="function">switchMode</span>(<span class="string">'default'</span>);</code>
+    </div>
+</section>
+
+{%- include "partials/_demo_links.html.jinja" %}
+{%- endblock -%}

package/src/jinja/demo_screensaver.html.jinja

@@ -0,0 +1,122 @@
+{# ============================================================================
+move.gl | Screensaver Demo
+============================================================================
+Interactive demo for the screensaver component
+============================================================================ #}
+{%- extends "_base.html.jinja" -%}
+
+{%- set title = "Screensaver Demo — move.gl" -%}
+{%- set description = "Screensaver Demo — Inactivity-based screensaver with video and audio support." -%}
+{%- set current_demo = "screensaver" -%}
+
+{%- block header %}
+<header class="page-header">
+    <div class="page-header__badge">TypeScript Component</div>
+    <h1 class="page-header__title">Screensaver</h1>
+    <p class="page-header__description">
+        An inactivity-based screensaver system with video and audio support.
+        Perfect for kiosk displays, digital signage, and interactive installations.
+    </p>
+</header>
+{%- endblock -%}
+
+{%- block content %}
+<section class="section">
+    <h2 class="section__title">Interactive Demo</h2>
+    <p class="section__description">
+        The screensaver activates after a period of inactivity. Move your mouse or press any key to reset the timer.
+    </p>
+
+    <div class="demo-container" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: white;">
+        <div class="screensaver-preview">
+            <div class="preview-placeholder" id="placeholder">
+                <div class="icon">🖥️</div>
+                <div>Normal content view</div>
+            </div>
+            <div class="screensaver-content" id="screensaverContent">
+                <div class="icon">🌙</div>
+                <div class="text">Screensaver Active</div>
+                <div class="subtext">Move mouse or press any key to dismiss</div>
+            </div>
+        </div>
+
+        <div class="status-bar">
+            <div class="status-indicator">
+                <div class="status-dot" id="statusDot"></div>
+                <span id="statusText">Monitoring activity</span>
+            </div>
+            <div class="countdown" id="countdown">10s</div>
+        </div>
+
+        <div class="controls-panel">
+            <div class="control-group">
+                <label>Timeout (seconds)</label>
+                <div class="value" id="timeoutValue">10</div>
+                <input type="range" id="timeoutSlider" min="5" max="30" value="10">
+            </div>
+            <div class="control-group">
+                <label>Fade Duration (ms)</label>
+                <div class="value" id="fadeValue">500</div>
+                <input type="range" id="fadeSlider" min="100" max="2000" step="100" value="500">
+            </div>
+            <div class="control-group">
+                <label>Activity Events</label>
+                <div class="value" id="eventCount">0</div>
+            </div>
+        </div>
+
+        <div class="button-row">
+            <button class="btn btn-primary" onclick="forceActivate()">Force Screensaver</button>
+            <button class="btn btn-danger" onclick="forceDeactivate()">Force Deactivate</button>
+            <button class="btn btn-secondary" onclick="resetDemo()">Reset Demo</button>
+        </div>
+
+        <div class="activity-log" id="activityLog">
+            <div class="entry">[--:--:--] Demo initialized</div>
+        </div>
+    </div>
+</section>
+
+<section class="section">
+    <h2 class="section__title">Features</h2>
+    <div class="feature-grid">
+        <div class="feature-card">
+            <h4>⏱️ Configurable Timeout</h4>
+            <p>Set custom inactivity periods before screensaver activation.</p>
+        </div>
+        <div class="feature-card">
+            <h4>🎬 Video Support</h4>
+            <p>Display videos during screensaver mode with automatic playback.</p>
+        </div>
+        <div class="feature-card">
+            <h4>🔊 Audio Support</h4>
+            <p>Play audio tracks with volume control during screensaver.</p>
+        </div>
+        <div class="feature-card">
+            <h4>🎯 Activity Detection</h4>
+            <p>Monitors mouse movement, keyboard input, and touch events.</p>
+        </div>
+    </div>
+</section>
+
+<section class="section">
+    <h2 class="section__title">Usage</h2>
+    <div class="code-block">
+        <code><span class="keyword">import</span> { Screensaver } <span class="keyword">from</span> <span class="string">'move.gl'</span>;
+
+<span class="keyword">const</span> screensaver = <span class="keyword">new</span> <span class="function">Screensaver</span>({
+    timeout: <span class="number">300000</span>,  <span class="comment">// 5 minutes</span>
+    videoUrl: <span class="string">'path/to/video.mp4'</span>,
+    audioUrl: <span class="string">'path/to/audio.mp3'</span>,
+    containerId: <span class="string">'screensaver'</span>
+});
+
+screensaver.<span class="function">setVolume</span>(<span class="number">0.5</span>);
+screensaver.<span class="function">activate</span>();
+screensaver.<span class="function">deactivate</span>();
+screensaver.<span class="function">destroy</span>();</code>
+    </div>
+</section>
+
+{%- include "partials/_demo_links.html.jinja" %}
+{%- endblock -%}