rook-cli 1.3.8 → 1.3.10

package/rook-framework/snippets/rk-modal.liquid

@@ -1,31 +1,149 @@
 {% doc %}
   Snippet: RkModal
-  Renders a modal/dialog wrapper using a Web Component.
+  Renders a media lightbox for images, videos, and embedded content.
+  Uses Web Component <rk-modal-element> for behaviour.
+  Videos use custom Instagram-style controls (autoplay + muted by default).
 
-  @param {string} id - Unique modal id
-  @param {string} content - HTML content of the modal
-  @param {string} [title] - Optional title
+  @param {string} id - Unique modal id (required)
+  @param {string} [type] - 'image' | 'video' | 'youtube' | 'vimeo' | 'html' (default: 'image')
+  @param {object} [image] - Shopify image object (when type is 'image')
+  @param {string} [video_url] - Video URL for hosted .mp4 (when type is 'video')
+  @param {string} [youtube_id] - YouTube video ID (when type is 'youtube')
+  @param {string} [vimeo_id] - Vimeo video ID (when type is 'vimeo')
+  @param {string} [content] - Raw HTML content (when type is 'html')
+  @param {string} [alt] - Alt text for images / aria-label for media
+  @param {string} [aspect_ratio] - Aspect ratio for video (e.g. '16/9', default: '16/9')
   @param {string} [custom_class] - Extra CSS classes
 
-  @example
-  {% render 'rk-modal', id: 'my-modal', title: 'Quick View', content: some_html %}
+  @example — Image lightbox
+  {% render 'rk-modal', id: 'product-zoom', type: 'image', image: product.featured_image, alt: product.title %}
+
+  @example — YouTube lightbox
+  {% render 'rk-modal', id: 'brand-video', type: 'youtube', youtube_id: 'dQw4w9WgXcQ' %}
+
+  @example — Hosted video
+  {% render 'rk-modal', id: 'story-video', type: 'video', video_url: video_source %}
 {% enddoc %}
 
-<rk-modal-element data-modal-id="{{ id }}">
+{%- liquid
+  assign modal_type = type | default: 'image'
+  assign modal_aspect = aspect_ratio | default: '16/9'
+  assign modal_alt = alt | default: ''
+-%}
+
+<rk-modal-element
+  data-modal-id="{{ id }}"
+  data-type="{{ modal_type }}"
+>
   <div id="{{ id }}" class="rk-modal{% if custom_class %} {{ custom_class }}{% endif %}">
+    {%- comment -%} Overlay {%- endcomment -%}
     <div class="rk-modal__overlay" data-action="close"></div>
-    <div class="rk-modal__content" role="dialog" aria-modal="true" {% if title %}aria-label="{{ title }}"{% endif %}>
-      <button type="button" class="rk-modal__close" data-action="close" aria-label="Fechar">
-        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-          <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-        </svg>
-      </button>
-
-      {% if title %}
-        <h2 class="rk-typography rk-typography--lg rk-typography--bold" style="margin-bottom: var(--rk-space-md);">{{ title }}</h2>
-      {% endif %}
-
-      {{ content }}
+
+    {%- comment -%} Close button {%- endcomment -%}
+    <button type="button" class="rk-modal__close" data-action="close" aria-label="Fechar">
+      {% render 'rk-icon', icon: 'close', size: 'md', color: '#fff' %}
+    </button>
+
+    {%- comment -%} Media content {%- endcomment -%}
+    <div
+      class="rk-modal__content"
+      role="dialog"
+      aria-modal="true"
+      {% if modal_alt != blank %}aria-label="{{ modal_alt }}"{% endif %}
+    >
+      {%- case modal_type -%}
+
+        {%- when 'image' -%}
+          {%- if image != blank -%}
+            {%- assign img_alt = modal_alt | default: image.alt | escape -%}
+            <div class="rk-modal__media rk-modal__media--image">
+              {{
+                image
+                | image_url: width: 1600
+                | image_tag:
+                  class: 'rk-modal__img',
+                  loading: 'lazy',
+                  alt: img_alt,
+                  sizes: '(min-width: 1200px) 1200px, 90vw'
+              }}
+            </div>
+          {%- endif -%}
+
+        {%- when 'video' -%}
+          <div class="rk-modal__media rk-modal__media--video" style="aspect-ratio: {{ modal_aspect }};">
+            <video
+              class="rk-modal__video"
+              playsinline
+              muted
+              loop
+              preload="metadata"
+              data-autoplay
+              {% if modal_alt != blank %}aria-label="{{ modal_alt }}"{% endif %}
+            >
+              <source src="{{ video_url }}" type="video/mp4">
+            </video>
+
+            {%- comment -%} Custom controls — Instagram style {%- endcomment -%}
+            <div class="rk-modal__controls">
+              <button type="button" class="rk-modal__ctrl-btn" data-ctrl="play-pause" aria-label="Play / Pause">
+                <svg class="rk-modal__ctrl-icon rk-modal__ctrl-icon--play" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M6.3 3.24A1 1 0 0 0 5 4.13v11.74a1 1 0 0 0 1.5.87l10-5.87a1 1 0 0 0 0-1.74l-10-5.87-.2-.02Z"/>
+                </svg>
+                <svg class="rk-modal__ctrl-icon rk-modal__ctrl-icon--pause" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M5 3h3v14H5V3Zm7 0h3v14h-3V3Z"/>
+                </svg>
+              </button>
+
+              <div class="rk-modal__progress" data-ctrl="progress">
+                <div class="rk-modal__progress-bar"></div>
+              </div>
+
+              <span class="rk-modal__time" data-ctrl="time">0:00</span>
+
+              <button type="button" class="rk-modal__ctrl-btn" data-ctrl="mute" aria-label="Mudo / Som">
+                <svg class="rk-modal__ctrl-icon rk-modal__ctrl-icon--muted" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M10 3.5a.5.5 0 0 0-.8-.4L5.38 6H2.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h2.88l3.82 2.9a.5.5 0 0 0 .8-.4v-13ZM14.15 6.15a.5.5 0 0 1 .7 0l1.65 1.65 1.65-1.65a.5.5 0 0 1 .7.7L17.2 8.5l1.65 1.65a.5.5 0 0 1-.7.7L16.5 9.2l-1.65 1.65a.5.5 0 0 1-.7-.7l1.65-1.65-1.65-1.65a.5.5 0 0 1 0-.7Z"/>
+                </svg>
+                <svg class="rk-modal__ctrl-icon rk-modal__ctrl-icon--unmuted" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M10 3.5a.5.5 0 0 0-.8-.4L5.38 6H2.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h2.88l3.82 2.9a.5.5 0 0 0 .8-.4v-13ZM13.54 6.16a.5.5 0 0 1 .7 0A6.47 6.47 0 0 1 16 10.5a6.47 6.47 0 0 1-1.76 4.34.5.5 0 0 1-.7-.7A5.47 5.47 0 0 0 15 10.5c0-1.5-.52-2.88-1.46-3.64a.5.5 0 0 1 0-.7Zm-1.08 2.3a.5.5 0 0 1 .7 0c.55.5.84 1.24.84 2.04s-.29 1.54-.84 2.04a.5.5 0 0 1-.7-.7c.35-.32.54-.79.54-1.34s-.19-1.02-.54-1.34a.5.5 0 0 1 0-.7Z"/>
+                </svg>
+              </button>
+            </div>
+
+            {%- comment -%} Tap-to-toggle play overlay {%- endcomment -%}
+            <div class="rk-modal__tap-overlay" data-ctrl="tap"></div>
+          </div>
+
+        {%- when 'youtube' -%}
+          <div class="rk-modal__media rk-modal__media--embed" style="aspect-ratio: {{ modal_aspect }};">
+            <iframe
+              class="rk-modal__iframe"
+              data-src="https://www.youtube.com/embed/{{ youtube_id }}?rel=0&enablejsapi=1&mute=1&autoplay=1"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+              loading="lazy"
+              {% if modal_alt != blank %}title="{{ modal_alt }}"{% endif %}
+            ></iframe>
+          </div>
+
+        {%- when 'vimeo' -%}
+          <div class="rk-modal__media rk-modal__media--embed" style="aspect-ratio: {{ modal_aspect }};">
+            <iframe
+              class="rk-modal__iframe"
+              data-src="https://player.vimeo.com/video/{{ vimeo_id }}?title=0&byline=0&portrait=0&muted=1&autoplay=1"
+              allow="autoplay; fullscreen; picture-in-picture"
+              allowfullscreen
+              loading="lazy"
+              {% if modal_alt != blank %}title="{{ modal_alt }}"{% endif %}
+            ></iframe>
+          </div>
+
+        {%- when 'html' -%}
+          <div class="rk-modal__media rk-modal__media--html">
+            {{ content }}
+          </div>
+
+      {%- endcase -%}
     </div>
   </div>
 </rk-modal-element>

package/rook-framework/snippets/rk-reveal.liquid

@@ -0,0 +1,56 @@
+{% doc %}
+  Snippet: RkReveal
+  Wrapper que aplica animacao de revelacao progressiva por scroll (fade-in + slide-up).
+  Usa IntersectionObserver para detectar quando o elemento entra na viewport
+  e dispara a animacao com suporte a stagger (cascata entre filhos).
+
+  @param {string} [animation] - Tipo de animacao: 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right' | 'fade' | 'zoom' (default: 'fade-up')
+  @param {number} [duration] - Duracao da animacao em ms (default: 600)
+  @param {number} [delay] - Atraso antes de iniciar em ms (default: 0)
+  @param {number} [stagger] - Atraso incremental entre filhos diretos em ms (default: 0, desativado)
+  @param {number} [threshold] - Percentual visivel para disparar (0.0 a 1.0, default: 0.1)
+  @param {string} [easing] - CSS easing function (default: 'cubic-bezier(0.16, 1, 0.3, 1)')
+  @param {boolean} [once] - Anima apenas uma vez (default: true)
+  @param {string} [content] - HTML do conteudo interno
+  @param {string} [custom_class] - Classes CSS extras
+  @param {string} [tag] - Tag HTML do wrapper (default: 'div')
+
+  @example
+  {% capture card_content %}
+    <div>Card 1</div>
+    <div>Card 2</div>
+    <div>Card 3</div>
+  {% endcapture %}
+  {% render 'rk-reveal', content: card_content, animation: 'fade-up', stagger: 100 %}
+
+  {% capture banner %}
+    <h2>Titulo do Banner</h2>
+  {% endcapture %}
+  {% render 'rk-reveal', content: banner, animation: 'fade-up', delay: 200, duration: 800 %}
+{% enddoc %}
+
+{%- liquid
+  assign rv_animation = animation | default: 'fade-up'
+  assign rv_duration = duration | default: 600
+  assign rv_delay = delay | default: 0
+  assign rv_stagger = stagger | default: 0
+  assign rv_threshold = threshold | default: '0.1'
+  assign rv_easing = easing | default: 'cubic-bezier(0.16, 1, 0.3, 1)'
+  assign rv_once = once | default: true
+  assign rv_tag = tag | default: 'div'
+-%}
+
+<rk-reveal-element
+  class="rk-reveal{% if custom_class %} {{ custom_class }}{% endif %}"
+  data-animation="{{ rv_animation }}"
+  data-duration="{{ rv_duration }}"
+  data-delay="{{ rv_delay }}"
+  data-stagger="{{ rv_stagger }}"
+  data-threshold="{{ rv_threshold }}"
+  data-easing="{{ rv_easing }}"
+  data-once="{{ rv_once }}"
+>
+  <{{ rv_tag }} class="rk-reveal__content">
+    {{ content }}
+  </{{ rv_tag }}>
+</rk-reveal-element>

package/rook-framework/snippets/rk-scripts.liquid

@@ -7,7 +7,7 @@
 
 {%- liquid
   # Lista de componentes JS essenciais do Rook Framework
-  assign rk_components = 'quantity,modal,accordion,popover,scroll-area,drawer,dialog,sheet,tabs,toggle,progress,collapsible,carousel,bottom-app-bar'
+  assign rk_components = 'quantity,modal,accordion,popover,scroll-area,drawer,dialog,sheet,tabs,toggle,progress,collapsible,carousel,bottom-app-bar,reveal'
   assign rk_components_array = rk_components | split: ','
 -%}
 

package/src/utils/logger.js

@@ -49,7 +49,7 @@ export class Logger {
     banner() {
         console.log('');
         console.log(pc.bold(pc.white('  ╔══════════════════════════════╗')));
-        console.log(pc.bold(pc.white('  ║    ♟️  ROOK CLI  v1.3.8       ║')));
+        console.log(pc.bold(pc.white('  ║    ♟️  ROOK CLI  v1.3.10      ║')));
         console.log(pc.bold(pc.white('  ║   Shopify Component Tool     ║')));
         console.log(pc.bold(pc.white('  ╚══════════════════════════════╝')));
         console.log('');

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

@@ -1,166 +0,0 @@
-{% comment %}
-  Block: RK Button
-  Renders a rk-button with full customizer control.
-  Uses rk-size-style and rk-spacing-style for Horizon-compatible sizing and spacing.
-{% endcomment %}
-
-<rk-button-block
-  id="block-{{ block.id }}"
-  {{ block.shopify_attributes }}
-  class="rk-block rk-size-style rk-spacing-style"
-  style="
-    {% render 'rk-size-style', settings: block.settings %}
-    {% render 'rk-spacing-style', settings: block.settings %}
-    {% if block.settings.alignment == 'center' %}text-align: center;{% elsif block.settings.alignment == 'right' %}text-align: right;{% endif %}
-  "
->
-  {% render 'rk-button',
-    text: block.settings.text,
-    url: block.settings.url,
-    style: block.settings.style,
-    size: block.settings.size,
-    full_width: block.settings.full_width,
-    icon: block.settings.icon
-  %}
-</rk-button-block>
-
-{% schema %}
-{
-  "name": "RK | Botão",
-  "tag": null,
-  "settings": [
-    {
-      "type": "text",
-      "id": "text",
-      "label": "Texto do botão",
-      "default": "Clique aqui"
-    },
-    {
-      "type": "url",
-      "id": "url",
-      "label": "Link"
-    },
-    {
-      "type": "select",
-      "id": "style",
-      "label": "Estilo",
-      "options": [
-        { "value": "primary", "label": "Primário" },
-        { "value": "secondary", "label": "Secundário" },
-        { "value": "outline", "label": "Outline" },
-        { "value": "ghost", "label": "Ghost" },
-        { "value": "link", "label": "Link" }
-      ],
-      "default": "primary"
-    },
-    {
-      "type": "select",
-      "id": "size",
-      "label": "Tamanho",
-      "options": [
-        { "value": "sm", "label": "Pequeno" },
-        { "value": "md", "label": "Médio" },
-        { "value": "lg", "label": "Grande" }
-      ],
-      "default": "md"
-    },
-    {
-      "type": "checkbox",
-      "id": "full_width",
-      "label": "Largura total",
-      "default": false
-    },
-    {
-      "type": "text",
-      "id": "icon",
-      "label": "Ícone (nome)",
-      "info": "Ex: heart, cart, arrow"
-    },
-    {
-      "type": "header",
-      "content": "Dimensionamento"
-    },
-    {
-      "type": "select",
-      "id": "width",
-      "label": "Largura",
-      "options": [
-        { "value": "fit-content", "label": "Ajustar ao conteúdo" },
-        { "value": "fill", "label": "Preencher" },
-        { "value": "custom", "label": "Personalizado" }
-      ],
-      "default": "fit-content"
-    },
-    {
-      "type": "range",
-      "id": "custom_width",
-      "label": "Largura personalizada",
-      "min": 10,
-      "max": 100,
-      "step": 5,
-      "unit": "%",
-      "default": 100
-    },
-    {
-      "type": "header",
-      "content": "Layout"
-    },
-    {
-      "type": "text_alignment",
-      "id": "alignment",
-      "label": "Alinhamento",
-      "default": "left"
-    },
-    {
-      "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 | Botão",
-      "category": "Rook UI"
-    }
-  ]
-}
-{% endschema %}

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

@@ -1,134 +0,0 @@
-{% comment %}
-  Block: RK Icon
-  Renders a rk-icon standalone block.
-  Uses rk-spacing-style for Horizon-compatible spacing.
-{% endcomment %}
-
-<rk-icon-block
-  id="block-{{ block.id }}"
-  {{ block.shopify_attributes }}
-  class="rk-block rk-spacing-style"
-  style="
-    {% render 'rk-spacing-style', settings: block.settings %}
-    {% if block.settings.alignment == 'center' %}text-align: center;{% elsif block.settings.alignment == 'right' %}text-align: right;{% endif %}
-  "
->
-  {% render 'rk-icon',
-    icon: block.settings.icon,
-    size: block.settings.size,
-    color: block.settings.color
-  %}
-</rk-icon-block>
-
-{% schema %}
-{
-  "name": "RK | Ícone",
-  "tag": null,
-  "settings": [
-    {
-      "type": "select",
-      "id": "icon",
-      "label": "Ícone",
-      "options": [
-        { "value": "heart", "label": "Coração" },
-        { "value": "star", "label": "Estrela" },
-        { "value": "truck", "label": "Caminhão" },
-        { "value": "lock", "label": "Cadeado" },
-        { "value": "return", "label": "Devolução" },
-        { "value": "chat_bubble", "label": "Chat" },
-        { "value": "fire", "label": "Fogo" },
-        { "value": "lightning_bolt", "label": "Raio" },
-        { "value": "leaf", "label": "Folha" },
-        { "value": "plant", "label": "Planta" },
-        { "value": "recycle", "label": "Reciclável" },
-        { "value": "snowflake", "label": "Floco de neve" },
-        { "value": "map_pin", "label": "Pin de mapa" },
-        { "value": "eye", "label": "Olho" },
-        { "value": "ruler", "label": "Régua" },
-        { "value": "price_tag", "label": "Etiqueta de preço" },
-        { "value": "question_mark", "label": "Interrogação" },
-        { "value": "error", "label": "Erro" },
-        { "value": "check_box", "label": "Checkbox" },
-        { "value": "clipboard", "label": "Clipboard" },
-        { "value": "plane", "label": "Avião" },
-        { "value": "stopwatch", "label": "Cronômetro" },
-        { "value": "silhouette", "label": "Perfil" }
-      ],
-      "default": "heart"
-    },
-    {
-      "type": "select",
-      "id": "size",
-      "label": "Tamanho",
-      "options": [
-        { "value": "sm", "label": "Pequeno (16px)" },
-        { "value": "md", "label": "Médio (20px)" },
-        { "value": "lg", "label": "Grande (24px)" },
-        { "value": "xl", "label": "Extra Grande (32px)" }
-      ],
-      "default": "md"
-    },
-    {
-      "type": "color",
-      "id": "color",
-      "label": "Cor"
-    },
-    {
-      "type": "text_alignment",
-      "id": "alignment",
-      "label": "Alinhamento",
-      "default": "left"
-    },
-    {
-      "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 | Ícone",
-      "category": "Rook UI"
-    }
-  ]
-}
-{% endschema %}