rook-cli 1.3.13 → 1.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rook-cli",
-  "version": "1.3.13",
+  "version": "1.3.14",
   "description": "CLI para instalar componentes Shopify",
   "repository": {
     "type": "git",

package/rook-framework/PRD.md

@@ -531,20 +531,20 @@ Shapes: `text` \| `circle` \| `rect`
 
 ---
 
-#### `rk-modal` (Media Lightbox)
+#### `rk-modal` (Generic Lightbox Container)
 **Arquivo:** `snippets/rk-modal.liquid`
 **Controller:** `assets/rk-modal.js` → `<rk-modal-element>`
-**Descrição:** Lightbox de mídia especializado para imagens, vídeos hospedados, YouTube, Vimeo e HTML customizado. Suporta lazy-loading de iframes, autoplay, overlay escuro (85% opacidade), ESC key e scroll lock.
+**Descrição:** Container lightbox genérico e fullscreen. Aceita qualquer conteúdo por padrão (type: `custom`) e oferece presets de conveniência para tipos de mídia comuns (image, video, youtube, vimeo, html). Suporta lazy-loading de iframes, autoplay, overlay escuro (85% opacidade), ESC key e scroll lock.
 
 | Prop | Tipo | Default | Descrição |
 |---|---|---|---|
 | `id` | string | — | ID único do modal (obrigatório) |
-| `type` | string | `image` | `image` \| `video` \| `youtube` \| `vimeo` \| `html` |
+| `type` | string | `custom` | `custom` \| `image` \| `video` \| `youtube` \| `vimeo` \| `html` |
+| `content` | string | — | HTML arbitrário (funciona com qualquer type, obrigatório para `custom` e `html`) |
 | `image` | object | — | Objeto imagem Shopify (para type: `image`) |
 | `video_url` | string | — | URL do arquivo .mp4 (para type: `video`) |
 | `youtube_id` | string | — | ID do vídeo YouTube (para type: `youtube`) |
 | `vimeo_id` | string | — | ID do vídeo Vimeo (para type: `vimeo`) |
-| `content` | string | — | HTML customizado (para type: `html`) |
 | `alt` | string | — | Texto alternativo / aria-label |
 | `aspect_ratio` | string | `16/9` | Aspect ratio para vídeos |
 | `autoplay` | boolean | `true` | Autoplay ao abrir |
@@ -554,6 +554,14 @@ Shapes: `text` \| `circle` \| `rect`
 
 **Exemplo:**
 ```liquid
+{%- comment -%} Conteúdo customizado (default) {%- endcomment -%}
+{%- capture modal_body -%}
+  <h2>Meu conteúdo</h2>
+  <p>Qualquer HTML aqui</p>
+  {%- render 'rk-button', text: 'Fechar', attr: 'data-action="close"' -%}
+{%- endcapture -%}
+{% render 'rk-modal', id: 'my-modal', content: modal_body %}
+
 {%- comment -%} Lightbox de imagem {%- endcomment -%}
 {% render 'rk-modal', id: 'product-zoom', type: 'image', image: product.featured_image, alt: product.title %}
 
@@ -563,10 +571,14 @@ Shapes: `text` \| `circle` \| `rect`
 {%- comment -%} Vídeo hospedado {%- endcomment -%}
 {% render 'rk-modal', id: 'story', type: 'video', video_url: video_source, autoplay: true %}
 
-{%- comment -%} HTML customizado {%- endcomment -%}
-{% render 'rk-modal', id: 'custom', type: 'html', content: '<p>Conteúdo aqui</p>' %}
+{%- comment -%} HTML customizado (com bg branco e padding) {%- endcomment -%}
+{% render 'rk-modal', id: 'info', type: 'html', content: '<p>Conteúdo aqui</p>' %}
 ```
 
+**Diferença entre `custom` e `html`:**
+- `custom` (default): Container transparente sem styling — o conteúdo controla 100% da aparência.
+- `html`: Container com fundo branco, border-radius e padding — ideal para conteúdo de texto.
+
 **Comportamento Técnico:**
 - Iframes (YouTube/Vimeo) usam `data-src` para lazy-loading (carregam apenas ao abrir)
 - YouTube: `https://www.youtube.com/embed/{ID}?rel=0&enablejsapi=1`
@@ -1152,7 +1164,7 @@ Shapes: `text` \| `circle` \| `rect`
 | `updateButtons()` | Habilita/desabilita botões nos limites |
 | `dispatchChange()` | Emite `rk:quantity:change` com o novo valor |
 
-### 6.2 `rk-modal.js` → `<rk-modal-element>` (Media Lightbox)
+### 6.2 `rk-modal.js` → `<rk-modal-element>` (Generic Lightbox Container)
 
 | Método | Descrição |
 |---|---|

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

@@ -941,6 +941,12 @@
     user-select: none;
 }
 
+.rk-modal__media--custom {
+    max-width: min(90vw, 800px);
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
 .rk-modal__media--html {
     background: #fff;
     border-radius: var(--rk-radius);

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

@@ -1,9 +1,11 @@
 /* ==========================================================================
-   Rook UI Core — Modal Media Lightbox Controller
+   Rook UI Core — Modal 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.
+   Generic fullscreen lightbox container. Accepts any content by default
+   (type: 'custom') and provides convenience presets for media types
+   (image, video, youtube, vimeo, html). Includes custom Instagram-style
+   video controls for hosted video playback.
    ========================================================================== */
 
 if (!customElements.get('rk-modal-element')) {

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

@@ -1,20 +1,29 @@
 {% doc %}
   Snippet: RkModal
-  Renders a media lightbox for images, videos, and embedded content.
+  Generic fullscreen lightbox container. Accepts any content by default (type: 'custom')
+  and provides convenience presets for common media types (image, video, youtube, vimeo, html).
   Uses Web Component <rk-modal-element> for behaviour.
   Videos use custom Instagram-style controls (autoplay + muted by default).
 
   @param {string} id - Unique modal id (required)
-  @param {string} [type] - 'image' | 'video' | 'youtube' | 'vimeo' | 'html' (default: 'image')
+  @param {string} [type] - 'custom' | 'image' | 'video' | 'youtube' | 'vimeo' | 'html' (default: 'custom')
+  @param {string} [content] - Arbitrary HTML content (works with any type, required for 'custom' and 'html')
   @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 — Custom content (default)
+  {% capture modal_body %}
+    <h2>Meu conteúdo</h2>
+    <p>Qualquer HTML aqui</p>
+    {% render 'rk-button', text: 'Fechar', attr: 'data-action="close"' %}
+  {% endcapture %}
+  {% render 'rk-modal', id: 'my-modal', content: modal_body %}
+
   @example — Image lightbox
   {% render 'rk-modal', id: 'product-zoom', type: 'image', image: product.featured_image, alt: product.title %}
 
@@ -26,7 +35,7 @@
 {% enddoc %}
 
 {%- liquid
-  assign modal_type = type | default: 'image'
+  assign modal_type = type | default: 'custom'
   assign modal_aspect = aspect_ratio | default: '16/9'
   assign modal_alt = alt | default: ''
 -%}
@@ -44,7 +53,7 @@
       {% render 'rk-icon', icon: 'close', size: 'md', color: '#fff' %}
     </button>
 
-    {%- comment -%} Media content {%- endcomment -%}
+    {%- comment -%} Content {%- endcomment -%}
     <div
       class="rk-modal__content"
       role="dialog"
@@ -53,6 +62,11 @@
     >
       {%- case modal_type -%}
 
+        {%- when 'custom' -%}
+          <div class="rk-modal__media rk-modal__media--custom">
+            {{ content }}
+          </div>
+
         {%- when 'image' -%}
           {%- if image != blank -%}
             {%- assign img_alt = modal_alt | default: image.alt | escape -%}

package/src/utils/logger.js

@@ -59,7 +59,7 @@ export class Logger {
         console.log(bold(white('  ██║  ██║╚██████╔╝╚██████╔╝██║  ██╗')));
         console.log(bold(white('  ╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝')));
         console.log('');
-        console.log(dim('  v1.3.13 — Rook UI'));
+        console.log(dim('  v1.3.14 — Rook UI'));
         console.log('');
     }