rook-cli 1.3.7 → 1.3.9

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, YouTube/Vimeo embeds, and raw HTML
+   in a fullscreen lightbox overlay.
    ========================================================================== */
 
 if (!customElements.get('rk-modal-element')) {
@@ -8,33 +11,33 @@ if (!customElements.get('rk-modal-element')) {
         constructor() {
             super();
             this.modal = null;
-            this.focusableElements = [];
+            this.content = null;
             this.previousFocus = 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();
         }
 
-        bindEvents() {
-            // Close buttons (overlay & X)
+        /* ------------------------------------------------------------------ */
+        /*  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 +49,122 @@ if (!customElements.get('rk-modal-element')) {
             });
         }
 
+        /* ------------------------------------------------------------------ */
+        /*  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();
 
-            if (this.focusableElements.length > 0) {
-                this.focusableElements[0].focus();
+            // Autoplay video if configured
+            if (this.dataset.autoplay === 'true') {
+                this._playMedia();
             }
 
+            // 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();
 
             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') {
+                    const src = iframe.dataset.src;
+                    if (this.dataset.autoplay === 'true' && src.includes('youtube.com')) {
+                        iframe.src = src + (src.includes('?') ? '&' : '?') + 'autoplay=1';
+                    } else if (this.dataset.autoplay === 'true' && src.includes('vimeo.com')) {
+                        iframe.src = src + (src.includes('?') ? '&' : '?') + 'autoplay=1';
+                    } else {
+                        iframe.src = src;
+                    }
+                }
+            });
+        }
+
+        _playMedia() {
+            const video = this.querySelector('video[data-autoplay]');
+            if (video) {
+                video.play().catch(() => {
+                    /* autoplay blocked by browser — 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)                                                    */
+        /* ------------------------------------------------------------------ */
+
+        _onKeyDown(e) {
+            if (!this.isOpen()) return;
+
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.close();
+            }
+        }
     }
 
     customElements.define('rk-modal-element', RkModalElement);

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

@@ -0,0 +1,212 @@
+/* ==========================================================================
+   Rook UI Core — Reveal Controller
+   Web Component: <rk-reveal-element>
+
+   Revelacao progressiva por scroll usando IntersectionObserver.
+   Suporta animacoes: fade-up, fade-down, fade-left, fade-right, fade, zoom.
+   Suporta stagger (cascata) entre filhos diretos do content.
+   ========================================================================== */
+
+if (!customElements.get('rk-reveal-element')) {
+    class RkRevealElement extends HTMLElement {
+        constructor() {
+            super();
+            this.observer = null;
+            this.hasRevealed = false;
+        }
+
+        connectedCallback() {
+            /* ---------------------------------------------------------- */
+            /*  Leitura dos data-attributes                               */
+            /* ---------------------------------------------------------- */
+            this._animation = this.dataset.animation || 'fade-up';
+            this._duration = parseInt(this.dataset.duration) || 600;
+            this._delay = parseInt(this.dataset.delay) || 0;
+            this._stagger = parseInt(this.dataset.stagger) || 0;
+            this._threshold = parseFloat(this.dataset.threshold) || 0.1;
+            this._easing = this.dataset.easing || 'cubic-bezier(0.16, 1, 0.3, 1)';
+            this._once = this.dataset.once !== 'false';
+
+            /* ---------------------------------------------------------- */
+            /*  Estado inicial: escondido                                 */
+            /* ---------------------------------------------------------- */
+            this._applyInitialState();
+
+            /* ---------------------------------------------------------- */
+            /*  Respeitar prefers-reduced-motion                          */
+            /* ---------------------------------------------------------- */
+            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+                this._revealImmediate();
+                return;
+            }
+
+            /* ---------------------------------------------------------- */
+            /*  IntersectionObserver                                      */
+            /* ---------------------------------------------------------- */
+            this.observer = new IntersectionObserver(
+                (entries) => {
+                    entries.forEach((entry) => {
+                        if (entry.isIntersecting) {
+                            this._reveal();
+                            if (this._once) {
+                                this.observer.unobserve(this);
+                            }
+                        } else if (!this._once && this.hasRevealed) {
+                            this._hide();
+                        }
+                    });
+                },
+                { threshold: this._threshold }
+            );
+
+            this.observer.observe(this);
+        }
+
+        disconnectedCallback() {
+            if (this.observer) {
+                this.observer.disconnect();
+                this.observer = null;
+            }
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Estado inicial (pre-animacao)                                     */
+        /* ------------------------------------------------------------------ */
+
+        _applyInitialState() {
+            const content = this.querySelector('.rk-reveal__content');
+            if (!content) return;
+
+            content.style.transition = 'none';
+            content.style.willChange = 'opacity, transform';
+
+            const transforms = {
+                'fade-up': 'translateY(30px)',
+                'fade-down': 'translateY(-30px)',
+                'fade-left': 'translateX(30px)',
+                'fade-right': 'translateX(-30px)',
+                'fade': 'none',
+                'zoom': 'scale(0.92)',
+            };
+
+            content.style.opacity = '0';
+            const transform = transforms[this._animation] || transforms['fade-up'];
+            if (transform !== 'none') {
+                content.style.transform = transform;
+            }
+
+            /* Stagger: esconde filhos diretos individualmente */
+            if (this._stagger > 0) {
+                const children = content.children;
+                for (let i = 0; i < children.length; i++) {
+                    children[i].style.opacity = '0';
+                    children[i].style.willChange = 'opacity, transform';
+                    if (transform !== 'none') {
+                        children[i].style.transform = transform;
+                    }
+                }
+            }
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Revelacao com animacao                                            */
+        /* ------------------------------------------------------------------ */
+
+        _reveal() {
+            this.hasRevealed = true;
+            const content = this.querySelector('.rk-reveal__content');
+            if (!content) return;
+
+            if (this._stagger > 0) {
+                this._revealWithStagger(content);
+            } else {
+                this._revealSingle(content);
+            }
+
+            this.classList.add('rk-reveal--visible');
+
+            this.dispatchEvent(
+                new CustomEvent('rk:reveal:visible', {
+                    bubbles: true,
+                    detail: { animation: this._animation },
+                })
+            );
+        }
+
+        _revealSingle(content) {
+            requestAnimationFrame(() => {
+                content.style.transition = `opacity ${this._duration}ms ${this._easing} ${this._delay}ms, transform ${this._duration}ms ${this._easing} ${this._delay}ms`;
+                content.style.opacity = '1';
+                content.style.transform = 'translate(0) scale(1)';
+            });
+        }
+
+        _revealWithStagger(content) {
+            /* O wrapper fica visivel imediatamente */
+            content.style.transition = `opacity ${this._duration}ms ${this._easing} ${this._delay}ms`;
+            content.style.opacity = '1';
+            content.style.transform = 'none';
+
+            /* Cada filho anima individualmente com delay incremental */
+            const children = content.children;
+            for (let i = 0; i < children.length; i++) {
+                const childDelay = this._delay + (this._stagger * i);
+                requestAnimationFrame(() => {
+                    children[i].style.transition = `opacity ${this._duration}ms ${this._easing} ${childDelay}ms, transform ${this._duration}ms ${this._easing} ${childDelay}ms`;
+                    children[i].style.opacity = '1';
+                    children[i].style.transform = 'translate(0) scale(1)';
+                });
+            }
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Esconder (quando once: false)                                     */
+        /* ------------------------------------------------------------------ */
+
+        _hide() {
+            this.hasRevealed = false;
+            const content = this.querySelector('.rk-reveal__content');
+            if (!content) return;
+
+            this.classList.remove('rk-reveal--visible');
+            this._applyInitialState();
+
+            /* Reabilitar transition apos resetar */
+            requestAnimationFrame(() => {
+                content.style.transition = `opacity ${this._duration}ms ${this._easing}, transform ${this._duration}ms ${this._easing}`;
+                if (this._stagger > 0) {
+                    const children = content.children;
+                    for (let i = 0; i < children.length; i++) {
+                        children[i].style.transition = `opacity ${this._duration}ms ${this._easing}, transform ${this._duration}ms ${this._easing}`;
+                    }
+                }
+            });
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Revelacao imediata (reduced motion / fallback)                    */
+        /* ------------------------------------------------------------------ */
+
+        _revealImmediate() {
+            const content = this.querySelector('.rk-reveal__content');
+            if (!content) return;
+
+            content.style.opacity = '1';
+            content.style.transform = 'none';
+            content.style.transition = 'none';
+
+            if (this._stagger > 0) {
+                const children = content.children;
+                for (let i = 0; i < children.length; i++) {
+                    children[i].style.opacity = '1';
+                    children[i].style.transform = 'none';
+                    children[i].style.transition = 'none';
+                }
+            }
+
+            this.classList.add('rk-reveal--visible');
+        }
+    }
+
+    customElements.define('rk-reveal-element', RkRevealElement);
+}

package/rook-framework/blocks/rk-heading.liquid

@@ -0,0 +1,233 @@
+{% comment %}
+  Block: RK Heading
+  Renders a heading element using rk-typography snippet.
+  Fully featured with size presets, custom styling, and spacing controls.
+{% endcomment %}
+
+{%- liquid
+  assign bs = block.settings
+  assign el_tag = bs.tag | default: 'h2'
+  assign el_size = bs.size | default: '2xl'
+  assign el_text = bs.text
+-%}
+
+<rk-heading-block
+  id="block-{{ block.id }}"
+  {{ block.shopify_attributes }}
+  class="rk-block rk-block--heading rk-spacing-style"
+  style="
+    {% render 'rk-spacing-style', settings: bs %}
+    {% if bs.custom_color != blank %}--rk-heading-color: {{ bs.custom_color }};{% endif %}
+    {% if bs.max_width != 'none' %}--rk-heading-max-width: {{ bs.max_width }};{% endif %}
+    {% if bs.line_height != 'default' %}--rk-heading-line-height: var(--rk-line-height-{{ bs.line_height }});{% endif %}
+    {% if bs.letter_spacing != 'normal' %}--rk-heading-letter-spacing: var(--rk-letter-spacing-{{ bs.letter_spacing }});{% endif %}
+  "
+>
+  {% render 'rk-typography',
+    text: el_text,
+    tag: el_tag,
+    size: el_size,
+    align: bs.alignment,
+    bold: bs.bold,
+    muted: bs.muted,
+    uppercase: bs.uppercase,
+    custom_class: 'rk-block__heading'
+  %}
+</rk-heading-block>
+
+{% stylesheet %}
+  .rk-block--heading .rk-block__heading {
+    margin: 0;
+    color: var(--rk-heading-color, inherit);
+    max-width: var(--rk-heading-max-width, none);
+    line-height: var(--rk-heading-line-height, var(--rk-line-height-tight));
+    letter-spacing: var(--rk-heading-letter-spacing, normal);
+    text-wrap: var(--rk-heading-wrap, pretty);
+  }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "RK | Título",
+  "tag": null,
+  "settings": [
+    {
+      "type": "text",
+      "id": "text",
+      "label": "Texto",
+      "default": "Seu título aqui"
+    },
+    {
+      "type": "header",
+      "content": "Tipografia"
+    },
+    {
+      "type": "select",
+      "id": "tag",
+      "label": "Tag HTML",
+      "options": [
+        { "value": "h1", "label": "H1" },
+        { "value": "h2", "label": "H2" },
+        { "value": "h3", "label": "H3" },
+        { "value": "h4", "label": "H4" },
+        { "value": "h5", "label": "H5" },
+        { "value": "h6", "label": "H6" },
+        { "value": "p", "label": "Parágrafo" },
+        { "value": "span", "label": "Span" }
+      ],
+      "default": "h2",
+      "info": "Define a semântica HTML. O tamanho visual é controlado separadamente."
+    },
+    {
+      "type": "select",
+      "id": "size",
+      "label": "Tamanho Visual",
+      "options": [
+        { "value": "xs", "label": "XS (12px)" },
+        { "value": "sm", "label": "SM (14px)" },
+        { "value": "md", "label": "MD (16px)" },
+        { "value": "lg", "label": "LG (18px)" },
+        { "value": "xl", "label": "XL (20px)" },
+        { "value": "2xl", "label": "2XL (24px)" },
+        { "value": "3xl", "label": "3XL (30px)" },
+        { "value": "4xl", "label": "4XL (36px)" }
+      ],
+      "default": "2xl"
+    },
+    {
+      "type": "checkbox",
+      "id": "bold",
+      "label": "Negrito",
+      "default": true
+    },
+    {
+      "type": "checkbox",
+      "id": "uppercase",
+      "label": "Caixa Alta",
+      "default": false
+    },
+    {
+      "type": "checkbox",
+      "id": "muted",
+      "label": "Cor Suave (muted)",
+      "default": false
+    },
+    {
+      "type": "select",
+      "id": "line_height",
+      "label": "Altura da Linha",
+      "options": [
+        { "value": "default", "label": "Padrão" },
+        { "value": "tight", "label": "Compacto" },
+        { "value": "normal", "label": "Normal" },
+        { "value": "relaxed", "label": "Espaçado" }
+      ],
+      "default": "default"
+    },
+    {
+      "type": "select",
+      "id": "letter_spacing",
+      "label": "Espaçamento entre Letras",
+      "options": [
+        { "value": "normal", "label": "Normal" },
+        { "value": "tight", "label": "Compacto" },
+        { "value": "wide", "label": "Espaçado" }
+      ],
+      "default": "normal"
+    },
+    {
+      "type": "header",
+      "content": "Layout"
+    },
+    {
+      "type": "select",
+      "id": "alignment",
+      "label": "Alinhamento",
+      "options": [
+        { "value": "left", "label": "Esquerda" },
+        { "value": "center", "label": "Centro" },
+        { "value": "right", "label": "Direita" }
+      ],
+      "default": "left"
+    },
+    {
+      "type": "select",
+      "id": "max_width",
+      "label": "Largura Máxima",
+      "options": [
+        { "value": "none", "label": "Sem limite" },
+        { "value": "20ch", "label": "Curta (20ch)" },
+        { "value": "30ch", "label": "Média (30ch)" },
+        { "value": "40ch", "label": "Longa (40ch)" }
+      ],
+      "default": "none"
+    },
+    {
+      "type": "header",
+      "content": "Cor"
+    },
+    {
+      "type": "color",
+      "id": "custom_color",
+      "label": "Cor Personalizada",
+      "info": "Deixe vazio para herdar a cor do contexto."
+    },
+    {
+      "type": "header",
+      "content": "Espaçamento"
+    },
+    {
+      "type": "range",
+      "id": "padding-block-start",
+      "label": "Topo",
+      "min": 0,
+      "max": 100,
+      "step": 2,
+      "unit": "px",
+      "default": 0
+    },
+    {
+      "type": "range",
+      "id": "padding-block-end",
+      "label": "Base",
+      "min": 0,
+      "max": 100,
+      "step": 2,
+      "unit": "px",
+      "default": 0
+    },
+    {
+      "type": "range",
+      "id": "padding-inline-start",
+      "label": "Esquerda",
+      "min": 0,
+      "max": 100,
+      "step": 2,
+      "unit": "px",
+      "default": 0
+    },
+    {
+      "type": "range",
+      "id": "padding-inline-end",
+      "label": "Direita",
+      "min": 0,
+      "max": 100,
+      "step": 2,
+      "unit": "px",
+      "default": 0
+    }
+  ],
+  "presets": [
+    {
+      "name": "RK | Título",
+      "category": "Rook UI",
+      "settings": {
+        "text": "Seu título aqui",
+        "tag": "h2",
+        "size": "2xl",
+        "bold": true
+      }
+    }
+  ]
+}
+{% endschema %}