rook-cli 1.3.8 → 1.3.10

package/rook-framework/assets/rk-framework-core.css

@@ -276,6 +276,19 @@
     --rk-icon-size: 32px;
 }
 
+.rk-icon__img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.rk-icon-block__link {
+    display: inline-flex;
+    color: inherit;
+    text-decoration: none;
+}
+
 /* --------------------------------------------------------------------------
    rk-input (Input)
    -------------------------------------------------------------------------- */
@@ -705,7 +718,7 @@
 }
 
 /* --------------------------------------------------------------------------
-   rk-modal (Modal)
+   rk-modal (Media Lightbox)
    -------------------------------------------------------------------------- */
 .rk-modal {
     position: fixed;
@@ -729,42 +742,235 @@
 .rk-modal__overlay {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.85);
     backdrop-filter: blur(4px);
 }
 
 .rk-modal__content {
     position: relative;
     z-index: 1;
-    background: #fff;
-    border-radius: var(--rk-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     max-width: 90vw;
     max-height: 90vh;
-    overflow-y: auto;
-    padding: var(--rk-space-lg);
-    transform: translateY(16px);
+    transform: scale(0.95);
     transition: transform var(--rk-transition);
 }
 
 .rk-modal--active .rk-modal__content {
-    transform: translateY(0);
+    transform: scale(1);
 }
 
 .rk-modal__close {
-    position: absolute;
-    top: var(--rk-space-sm);
-    right: var(--rk-space-sm);
-    background: none;
+    position: fixed;
+    top: var(--rk-space-md);
+    right: var(--rk-space-md);
+    z-index: 2;
+    background: rgba(0, 0, 0, 0.5);
     border: none;
     cursor: pointer;
-    color: var(--rk-color-text-muted);
-    padding: var(--rk-space-2xs);
+    color: #fff;
+    padding: var(--rk-space-xs);
     border-radius: 50%;
     transition: background-color var(--rk-transition);
+    line-height: 0;
 }
 
 .rk-modal__close:hover {
-    background-color: var(--rk-color-secondary-hover);
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Media containers */
+.rk-modal__media {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.rk-modal__media--image {
+    max-width: 90vw;
+    max-height: 90vh;
+}
+
+.rk-modal__img {
+    display: block;
+    max-width: 90vw;
+    max-height: 90vh;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border-radius: var(--rk-radius-sm, 4px);
+}
+
+.rk-modal__media--video,
+.rk-modal__media--embed {
+    position: relative;
+    width: min(90vw, 1200px);
+    max-height: 90vh;
+    border-radius: var(--rk-radius-sm, 4px);
+    overflow: hidden;
+    background: #000;
+}
+
+.rk-modal__video {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.rk-modal__iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+/* Tap overlay — click to play/pause */
+.rk-modal__tap-overlay {
+    position: absolute;
+    inset: 0 0 48px 0;
+    z-index: 1;
+    cursor: pointer;
+}
+
+/* Custom controls — Instagram style */
+.rk-modal__controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
+    color: #fff;
+    opacity: 1;
+    transition: opacity 0.25s ease;
+}
+
+.rk-modal__media--video:hover .rk-modal__controls,
+.rk-modal__controls:focus-within {
+    opacity: 1;
+}
+
+/* Control buttons */
+.rk-modal__ctrl-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    padding: 0;
+    background: none;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    border-radius: 50%;
+    transition: background-color 0.15s ease;
+}
+
+.rk-modal__ctrl-btn:hover {
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
+.rk-modal__ctrl-icon {
+    width: 18px;
+    height: 18px;
+    display: none;
+}
+
+/* Play/pause icon toggle */
+.rk-modal__controls.is-paused .rk-modal__ctrl-icon--play,
+.rk-modal__controls:not(.is-playing):not(.is-paused) .rk-modal__ctrl-icon--play {
+    display: block;
+}
+
+.rk-modal__controls.is-playing .rk-modal__ctrl-icon--pause {
+    display: block;
+}
+
+/* Mute icon toggle */
+.rk-modal__controls.is-muted .rk-modal__ctrl-icon--muted {
+    display: block;
+}
+
+.rk-modal__controls.is-unmuted .rk-modal__ctrl-icon--unmuted {
+    display: block;
+}
+
+.rk-modal__controls:not(.is-muted):not(.is-unmuted) .rk-modal__ctrl-icon--muted {
+    display: block;
+}
+
+/* Progress bar */
+.rk-modal__progress {
+    flex: 1;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+    transition: height 0.15s ease;
+}
+
+.rk-modal__progress:hover {
+    height: 5px;
+}
+
+.rk-modal__progress-bar {
+    height: 100%;
+    width: 0%;
+    background: #fff;
+    border-radius: 2px;
+    transition: none;
+    pointer-events: none;
+}
+
+/* Time display */
+.rk-modal__time {
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    min-width: 32px;
+    text-align: center;
+    opacity: 0.85;
+    user-select: none;
+}
+
+.rk-modal__media--html {
+    background: #fff;
+    border-radius: var(--rk-radius);
+    padding: var(--rk-space-lg);
+    max-width: min(90vw, 800px);
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+@media (max-width: 749px) {
+    .rk-modal__media--video,
+    .rk-modal__media--embed {
+        width: 100vw;
+        border-radius: 0;
+    }
+
+    .rk-modal__controls {
+        padding: 8px 10px;
+        gap: 8px;
+    }
+
+    .rk-modal__ctrl-btn {
+        width: 28px;
+        height: 28px;
+    }
+
+    .rk-modal__ctrl-icon {
+        width: 16px;
+        height: 16px;
+    }
 }
 
 /* --------------------------------------------------------------------------
@@ -2538,6 +2744,17 @@ a.rk-card {
     height: 32px;
 }
 
+/* --------------------------------------------------------------------------
+   rk-reveal (Scroll Reveal Animation)
+   -------------------------------------------------------------------------- */
+.rk-reveal {
+    display: block;
+}
+
+.rk-reveal__content {
+    will-change: opacity, transform;
+}
+
 /* --------------------------------------------------------------------------
    rk-sr-only (Screen Reader Only utility)
    -------------------------------------------------------------------------- */

package/rook-framework/assets/rk-modal.js

@@ -1,6 +1,9 @@
 /* ==========================================================================
-   Rook UI Core — Modal Controller
+   Rook UI Core — Modal Media Lightbox Controller
    Web Component: <rk-modal-element>
+
+   Handles image zoom, hosted video (with custom Instagram-style controls),
+   YouTube/Vimeo embeds, and raw HTML in a fullscreen lightbox overlay.
    ========================================================================== */
 
 if (!customElements.get('rk-modal-element')) {
@@ -8,33 +11,39 @@ if (!customElements.get('rk-modal-element')) {
         constructor() {
             super();
             this.modal = null;
-            this.focusableElements = [];
+            this.content = null;
             this.previousFocus = null;
+            this._raf = null;
+
+            this._onKeyDown = this._onKeyDown.bind(this);
         }
 
         connectedCallback() {
             this.modal = this.querySelector('.rk-modal');
+            this.content = this.querySelector('.rk-modal__content');
+
             if (!this.modal) return;
 
-            this.bindEvents();
-            this.setupOpenTriggers();
+            this._bindEvents();
+            this._setupOpenTriggers();
+            this._setupVideoControls();
         }
 
-        bindEvents() {
-            // Close buttons (overlay & X)
+        disconnectedCallback() {
+            if (this._raf) cancelAnimationFrame(this._raf);
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Events                                                            */
+        /* ------------------------------------------------------------------ */
+
+        _bindEvents() {
             this.querySelectorAll('[data-action="close"]').forEach((el) => {
                 el.addEventListener('click', () => this.close());
             });
-
-            // ESC key
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape' && this.isOpen()) {
-                    this.close();
-                }
-            });
         }
 
-        setupOpenTriggers() {
+        _setupOpenTriggers() {
             const modalId = this.dataset.modalId || this.modal?.id;
             if (!modalId) return;
 
@@ -46,45 +55,262 @@ if (!customElements.get('rk-modal-element')) {
             });
         }
 
+        /* ------------------------------------------------------------------ */
+        /*  Custom video controls (Instagram-style)                           */
+        /* ------------------------------------------------------------------ */
+
+        _setupVideoControls() {
+            const video = this.querySelector('.rk-modal__video');
+            if (!video) return;
+
+            this._video = video;
+            this._controls = this.querySelector('.rk-modal__controls');
+            this._progressBar = this.querySelector('.rk-modal__progress-bar');
+            this._progressTrack = this.querySelector('[data-ctrl="progress"]');
+            this._timeDisplay = this.querySelector('[data-ctrl="time"]');
+            this._playPauseBtn = this.querySelector('[data-ctrl="play-pause"]');
+            this._muteBtn = this.querySelector('[data-ctrl="mute"]');
+            this._tapOverlay = this.querySelector('[data-ctrl="tap"]');
+
+            // Play/pause button
+            if (this._playPauseBtn) {
+                this._playPauseBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this._togglePlay();
+                });
+            }
+
+            // Mute button
+            if (this._muteBtn) {
+                this._muteBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this._toggleMute();
+                });
+            }
+
+            // Tap overlay — toggle play/pause
+            if (this._tapOverlay) {
+                this._tapOverlay.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this._togglePlay();
+                });
+            }
+
+            // Progress bar click — seek
+            if (this._progressTrack) {
+                this._progressTrack.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this._seek(e);
+                });
+            }
+
+            // Sync UI with video state
+            video.addEventListener('play', () => this._syncPlayState());
+            video.addEventListener('pause', () => this._syncPlayState());
+            video.addEventListener('volumechange', () => this._syncMuteState());
+        }
+
+        _togglePlay() {
+            if (!this._video) return;
+            if (this._video.paused) {
+                this._video.play().catch(() => {});
+            } else {
+                this._video.pause();
+            }
+        }
+
+        _toggleMute() {
+            if (!this._video) return;
+            this._video.muted = !this._video.muted;
+        }
+
+        _seek(e) {
+            if (!this._video || !this._progressTrack) return;
+            const rect = this._progressTrack.getBoundingClientRect();
+            const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+            this._video.currentTime = ratio * this._video.duration;
+        }
+
+        _syncPlayState() {
+            if (!this._video || !this._controls) return;
+            const playing = !this._video.paused;
+            this._controls.classList.toggle('is-playing', playing);
+            this._controls.classList.toggle('is-paused', !playing);
+
+            if (playing) {
+                this._startProgressLoop();
+            } else {
+                this._stopProgressLoop();
+            }
+        }
+
+        _syncMuteState() {
+            if (!this._video || !this._controls) return;
+            this._controls.classList.toggle('is-muted', this._video.muted);
+            this._controls.classList.toggle('is-unmuted', !this._video.muted);
+        }
+
+        _startProgressLoop() {
+            const update = () => {
+                if (!this._video || this._video.paused) return;
+
+                const pct = (this._video.currentTime / this._video.duration) * 100 || 0;
+                if (this._progressBar) {
+                    this._progressBar.style.width = pct + '%';
+                }
+
+                if (this._timeDisplay) {
+                    this._timeDisplay.textContent = this._formatTime(this._video.currentTime);
+                }
+
+                this._raf = requestAnimationFrame(update);
+            };
+            this._raf = requestAnimationFrame(update);
+        }
+
+        _stopProgressLoop() {
+            if (this._raf) {
+                cancelAnimationFrame(this._raf);
+                this._raf = null;
+            }
+        }
+
+        _formatTime(seconds) {
+            const m = Math.floor(seconds / 60);
+            const s = Math.floor(seconds % 60);
+            return m + ':' + (s < 10 ? '0' : '') + s;
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Public API                                                        */
+        /* ------------------------------------------------------------------ */
+
         isOpen() {
             return this.modal?.classList.contains('rk-modal--active');
         }
 
         open() {
-            if (!this.modal) return;
+            if (!this.modal || this.isOpen()) return;
 
             this.previousFocus = document.activeElement;
             this.modal.classList.add('rk-modal--active');
             document.body.style.overflow = 'hidden';
+            document.addEventListener('keydown', this._onKeyDown);
 
-            // Trap focus
-            this.focusableElements = this.modal.querySelectorAll(
-                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-            );
+            // Load lazy iframes (YouTube/Vimeo)
+            this._loadIframes();
+
+            // Autoplay hosted video (muted)
+            this._playMedia();
 
-            if (this.focusableElements.length > 0) {
-                this.focusableElements[0].focus();
+            // Sync initial state
+            if (this._video) {
+                this._syncPlayState();
+                this._syncMuteState();
             }
 
+            // Focus close button
+            requestAnimationFrame(() => {
+                const closeBtn = this.querySelector('.rk-modal__close');
+                if (closeBtn) closeBtn.focus();
+            });
+
             this.dispatchEvent(
-                new CustomEvent('rk:modal:open', { bubbles: true, detail: { id: this.modal.id } })
+                new CustomEvent('rk:modal:open', {
+                    bubbles: true,
+                    detail: { id: this.modal.id, type: this.dataset.type },
+                })
             );
         }
 
         close() {
-            if (!this.modal) return;
+            if (!this.modal || !this.isOpen()) return;
 
             this.modal.classList.remove('rk-modal--active');
             document.body.style.overflow = '';
+            document.removeEventListener('keydown', this._onKeyDown);
+
+            // Stop all media
+            this._stopMedia();
+            this._stopProgressLoop();
 
             if (this.previousFocus) {
                 this.previousFocus.focus();
+                this.previousFocus = null;
             }
 
             this.dispatchEvent(
-                new CustomEvent('rk:modal:close', { bubbles: true, detail: { id: this.modal.id } })
+                new CustomEvent('rk:modal:close', {
+                    bubbles: true,
+                    detail: { id: this.modal.id, type: this.dataset.type },
+                })
             );
         }
+
+        /* ------------------------------------------------------------------ */
+        /*  Media helpers                                                     */
+        /* ------------------------------------------------------------------ */
+
+        _loadIframes() {
+            this.querySelectorAll('iframe[data-src]').forEach((iframe) => {
+                if (!iframe.src || iframe.src === 'about:blank') {
+                    iframe.src = iframe.dataset.src;
+                }
+            });
+        }
+
+        _playMedia() {
+            const video = this.querySelector('video[data-autoplay]');
+            if (video) {
+                video.muted = true;
+                video.currentTime = 0;
+                video.play().catch(() => {
+                    /* autoplay blocked — silent fail */
+                });
+            }
+        }
+
+        _stopMedia() {
+            // Pause hosted videos
+            this.querySelectorAll('video').forEach((v) => {
+                v.pause();
+                v.currentTime = 0;
+            });
+
+            // Clear iframe src to stop YouTube/Vimeo playback
+            this.querySelectorAll('iframe').forEach((iframe) => {
+                if (iframe.dataset.src) {
+                    iframe.src = 'about:blank';
+                }
+            });
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Keyboard (ESC + Space for play/pause)                             */
+        /* ------------------------------------------------------------------ */
+
+        _onKeyDown(e) {
+            if (!this.isOpen()) return;
+
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.close();
+                return;
+            }
+
+            // Space toggles play/pause on video
+            if (e.key === ' ' && this._video) {
+                e.preventDefault();
+                this._togglePlay();
+                return;
+            }
+
+            // M toggles mute on video
+            if (e.key === 'm' && this._video) {
+                e.preventDefault();
+                this._toggleMute();
+            }
+        }
     }
 
     customElements.define('rk-modal-element', RkModalElement);