rook-cli 1.3.12 → 1.3.14

package/package.json

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

package/rook-framework/PRD.md

@@ -135,6 +135,7 @@ O framework inteiro vive em `/rook-framework/` como pasta isolada. Para portar p
 │   ├── rk-collapsible.liquid         ← Molécula: Painel ocultável
 │   ├── rk-carousel.liquid            ← Molécula: Slider/Carousel (Swiper.js)
 │   ├── rk-bottom-app-bar.liquid      ← Molécula: Barra de navegação inferior estilo App
+│   ├── rk-group.liquid               ← Molécula: Container flexível com controladores completos (layout/size/bg/overlay/border/link)
 │   ├── rk-external-assets.liquid     ← Serviço: Gerenciador de preconnects, CDNs e scripts externos (GSAP/Animejs)
 │   ├── rk-scripts.liquid             ← Serviço: Carregador centralizado dos Web Components JS do framework
 │   └── rk-quick-add.liquid           ← Molécula: Add to Cart (⚠️ exceção)
@@ -152,7 +153,8 @@ O framework inteiro vive em `/rook-framework/` como pasta isolada. Para portar p
     ├── rk-pix-discount.liquid        ← Block: Desconto Pix com customizer
     ├── rk-quantity.liquid            ← Block: Seletor qtd com customizer
     ├── rk-quick-add.liquid           ← Block: Add to Cart com customizer
-    └── rk-skeleton.liquid            ← Block: Skeleton com customizer
+    ├── rk-skeleton.liquid            ← Block: Skeleton com customizer
+    └── rk-group.liquid               ← Block: Grupo container com customizer
 ```
 
 ---
@@ -529,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 |
@@ -552,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 %}
 
@@ -561,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`
@@ -1038,6 +1052,73 @@ Shapes: `text` \| `circle` \| `rect`
 
 ---
 
+#### `rk-group`
+**Arquivo:** `snippets/rk-group.liquid`
+**Controller:** Nenhum (CSS puro + Liquid)
+**Descrição:** Container flexível ("smart div") que aceita qualquer conteúdo dentro dele com controladores completos para layout, tamanho, espaçamento, fundo (cor/imagem), overlay (sólido/gradiente), borda e link. Compõe internamente os snippets `rk-layout-style`, `rk-size-style` e `rk-spacing-style` para máxima reutilização.
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `children` | string | — | HTML do conteúdo interno (obrigatório) |
+| `settings` | object | — | Objeto de configurações do block/section |
+| `shopify_attributes` | string | — | Atributos do editor Shopify |
+| `class` | string | — | Classes CSS extras |
+| `style` | string | — | Estilos inline extras |
+
+**Settings de Layout:**
+| Setting | Tipo | Default | Descrição |
+|---|---|---|---|
+| `content_direction` | select | `column` | `column` \| `row` |
+| `vertical_on_mobile` | checkbox | `true` | Empilha no mobile (quando `row`) |
+| `horizontal_alignment` | select | `flex-start` | Alinhamento horizontal (row) |
+| `vertical_alignment` | select | `center` | Alinhamento vertical (row) |
+| `horizontal_alignment_flex_direction_column` | select | `flex-start` | Alinhamento horizontal (column) |
+| `vertical_alignment_flex_direction_column` | select | `center` | Alinhamento vertical (column) |
+| `gap` | range | `12px` | Espaço entre itens |
+
+**Settings de Tamanho:**
+| Setting | Tipo | Default | Descrição |
+|---|---|---|---|
+| `width` | select | `fill` | `fill` \| `fit-content` \| `custom` |
+| `custom_width` | range | `100%` | Largura personalizada (%) |
+| `width_mobile` | select | `fill` | Override mobile |
+| `custom_width_mobile` | range | `100%` | Largura mobile personalizada |
+| `height` | select | `fit` | `fit` \| `fill` \| `custom` |
+| `custom_height` | range | `100%` | Altura personalizada (%) |
+
+**Settings de Aparência:**
+| Setting | Tipo | Default | Descrição |
+|---|---|---|---|
+| `background_color` | color | — | Cor de fundo |
+| `background_image` | image_picker | — | Imagem de fundo |
+| `background_image_position` | select | `cover` | `cover` \| `contain` |
+| `border` | select | `none` | `none` \| `solid` |
+| `border_width` | range | `1px` | Espessura da borda |
+| `border_opacity` | range | `100%` | Opacidade da borda |
+| `border_radius` | range | `0` | Arredondamento |
+| `toggle_overlay` | checkbox | `false` | Ativar overlay |
+| `overlay_color` | color (alpha) | `#00000026` | Cor do overlay |
+| `overlay_style` | select | `solid` | `solid` \| `gradient` |
+| `gradient_direction` | select | `to top` | Direção do gradiente |
+| `link` | url | — | Link do grupo inteiro |
+| `open_in_new_tab` | checkbox | `false` | Abrir em nova aba |
+
+**Exemplo:**
+```liquid
+{%- capture children %}
+  {% content_for 'blocks' %}
+{% endcapture %}
+{% render 'rk-group', children: children, settings: block.settings, shopify_attributes: block.shopify_attributes %}
+```
+
+**Comportamento Técnico:**
+- Link wrapper usa `position: absolute; inset: 0` com `pointer-events: none` nos filhos, preservando interatividade de `a`, `button`, `input`, `textarea`, `select`
+- Background image usa `<img>` com `object-fit` (cover/contain) para performance e lazy-loading nativo
+- Overlay suporta cor sólida ou gradiente linear com transparência
+- No Design Mode do Shopify, pointer-events são restaurados no conteúdo para permitir edição
+
+---
+
 ### 5.3 Serviços
 
 #### `rk-external-assets`
@@ -1083,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);
@@ -2755,6 +2761,129 @@ a.rk-card {
     will-change: opacity, transform;
 }
 
+/* --------------------------------------------------------------------------
+   rk-group (Group Container — Smart Div with full controllers)
+   Flexible container that accepts any content with layout, size, spacing,
+   background, overlay, border and link controls.
+   -------------------------------------------------------------------------- */
+.rk-group {
+    position: relative;
+    display: block;
+    background-color: var(--rk-group-bg, transparent);
+    border-style: var(--rk-group-border-style, none);
+    border-width: var(--rk-group-border-width, 0);
+    border-color: rgb(var(--rk-color-border-rgb, 229 229 229) / var(--rk-group-border-opacity, 1));
+    border-radius: var(--rk-group-radius, 0);
+    overflow: hidden;
+}
+
+.rk-group--height-fit {
+    height: auto;
+}
+
+.rk-group--height-fill {
+    height: 100%;
+}
+
+.rk-group--height-custom {
+    height: var(--rk-height, auto);
+}
+
+.rk-group--width-fill {
+    width: 100%;
+}
+
+.rk-group--width-fit-content {
+    width: fit-content;
+}
+
+.rk-group--width-custom {
+    width: var(--rk-width, auto);
+}
+
+@media (max-width: 749px) {
+    .rk-group--width-custom,
+    .rk-group--width-fill {
+        width: var(--rk-width-mobile, var(--rk-width, 100%));
+    }
+}
+
+/* Link wrapper — full-bleed clickable area */
+.rk-group__link {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+}
+
+.rk-group__link ~ .rk-group__content,
+.rk-group__link ~ .rk-group__media {
+    pointer-events: none;
+}
+
+.rk-group__link ~ .rk-group__content :is(a, button, input, textarea, select),
+.rk-group__link ~ .rk-group__media :is(a, button, input, textarea, select) {
+    pointer-events: auto;
+}
+
+.rk-group__link ~ .rk-group__content--design-mode {
+    pointer-events: auto;
+}
+
+/* Background media layer */
+.rk-group__media {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.rk-group__bg-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.rk-group__bg-image--cover {
+    object-fit: cover;
+}
+
+.rk-group__bg-image--contain {
+    object-fit: contain;
+}
+
+/* Overlay */
+.rk-group__overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.rk-group__overlay--solid {
+    background: var(--rk-group-overlay-color);
+}
+
+.rk-group__overlay--gradient {
+    background: linear-gradient(
+        var(--rk-group-overlay-direction, to top),
+        var(--rk-group-overlay-color),
+        var(--rk-group-overlay-color-end, transparent)
+    );
+}
+
+/* Content layer */
+.rk-group__content {
+    position: relative;
+    z-index: 1;
+    min-height: inherit;
+    height: 100%;
+}
+
+@media (max-width: 749px) {
+    .rk-group__content--mobile-column {
+        flex-direction: column;
+    }
+}
+
 /* --------------------------------------------------------------------------
    rk-sr-only (Screen Reader Only utility)
    -------------------------------------------------------------------------- */

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/blocks/rk-group.liquid

@@ -0,0 +1,361 @@
+{% comment %}
+  Block: RK Group
+  A flexible container that accepts any blocks inside it with full layout,
+  sizing, spacing, background, overlay, border and link controls.
+  Acts as a "smart div" with all the visual controllers needed.
+{% endcomment %}
+
+{%- capture children %}
+  {% content_for 'blocks' %}
+{% endcapture %}
+
+{% render 'rk-group', children: children, settings: block.settings, shopify_attributes: block.shopify_attributes %}
+
+{% schema %}
+{
+  "name": "RK | Grupo",
+  "tag": null,
+  "blocks": [
+    {
+      "type": "@theme"
+    },
+    {
+      "type": "@app"
+    }
+  ],
+  "settings": [
+    {
+      "type": "header",
+      "content": "Layout"
+    },
+    {
+      "type": "select",
+      "id": "content_direction",
+      "label": "Direção",
+      "options": [
+        {
+          "value": "column",
+          "label": "Vertical"
+        },
+        {
+          "value": "row",
+          "label": "Horizontal"
+        }
+      ],
+      "default": "column"
+    },
+    {
+      "type": "checkbox",
+      "id": "vertical_on_mobile",
+      "label": "Empilhar no mobile",
+      "default": true,
+      "visible_if": "{{ block.settings.content_direction == 'row' }}"
+    },
+    {
+      "type": "select",
+      "id": "horizontal_alignment",
+      "label": "Alinhamento horizontal",
+      "options": [
+        { "value": "flex-start", "label": "Esquerda" },
+        { "value": "center", "label": "Centro" },
+        { "value": "flex-end", "label": "Direita" },
+        { "value": "space-between", "label": "Distribuído" }
+      ],
+      "default": "flex-start",
+      "visible_if": "{{ block.settings.content_direction == 'row' }}"
+    },
+    {
+      "type": "select",
+      "id": "vertical_alignment",
+      "label": "Alinhamento vertical",
+      "options": [
+        { "value": "flex-start", "label": "Topo" },
+        { "value": "center", "label": "Centro" },
+        { "value": "flex-end", "label": "Base" }
+      ],
+      "default": "center",
+      "visible_if": "{{ block.settings.content_direction == 'row' }}"
+    },
+    {
+      "type": "select",
+      "id": "horizontal_alignment_flex_direction_column",
+      "label": "Alinhamento horizontal",
+      "options": [
+        { "value": "flex-start", "label": "Esquerda" },
+        { "value": "center", "label": "Centro" },
+        { "value": "flex-end", "label": "Direita" }
+      ],
+      "default": "flex-start",
+      "visible_if": "{{ block.settings.content_direction != 'row' }}"
+    },
+    {
+      "type": "select",
+      "id": "vertical_alignment_flex_direction_column",
+      "label": "Alinhamento vertical",
+      "options": [
+        { "value": "flex-start", "label": "Topo" },
+        { "value": "center", "label": "Centro" },
+        { "value": "flex-end", "label": "Base" },
+        { "value": "space-between", "label": "Distribuído" }
+      ],
+      "default": "center",
+      "visible_if": "{{ block.settings.content_direction == 'column' }}"
+    },
+    {
+      "type": "range",
+      "id": "gap",
+      "label": "Espaço entre itens",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "px",
+      "default": 12
+    },
+    {
+      "type": "header",
+      "content": "Tamanho"
+    },
+    {
+      "type": "select",
+      "id": "width",
+      "label": "Largura",
+      "options": [
+        { "value": "fit-content", "label": "Ajustar ao conteúdo" },
+        { "value": "fill", "label": "Preencher" },
+        { "value": "custom", "label": "Personalizada" }
+      ],
+      "default": "fill"
+    },
+    {
+      "type": "range",
+      "id": "custom_width",
+      "label": "Largura personalizada",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "default": 100,
+      "visible_if": "{{ block.settings.width == 'custom' }}"
+    },
+    {
+      "type": "select",
+      "id": "width_mobile",
+      "label": "Largura mobile",
+      "options": [
+        { "value": "fit-content", "label": "Ajustar ao conteúdo" },
+        { "value": "fill", "label": "Preencher" },
+        { "value": "custom", "label": "Personalizada" }
+      ],
+      "default": "fill"
+    },
+    {
+      "type": "range",
+      "id": "custom_width_mobile",
+      "label": "Largura mobile personalizada",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "default": 100,
+      "visible_if": "{{ block.settings.width_mobile == 'custom' }}"
+    },
+    {
+      "type": "select",
+      "id": "height",
+      "label": "Altura",
+      "options": [
+        { "value": "fit", "label": "Ajustar ao conteúdo" },
+        { "value": "fill", "label": "Preencher" },
+        { "value": "custom", "label": "Personalizada" }
+      ],
+      "default": "fit"
+    },
+    {
+      "type": "range",
+      "id": "custom_height",
+      "label": "Altura personalizada",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "default": 100,
+      "visible_if": "{{ block.settings.height == 'custom' }}"
+    },
+    {
+      "type": "header",
+      "content": "Aparência"
+    },
+    {
+      "type": "color",
+      "id": "background_color",
+      "label": "Cor de fundo"
+    },
+    {
+      "type": "image_picker",
+      "id": "background_image",
+      "label": "Imagem de fundo"
+    },
+    {
+      "type": "select",
+      "id": "background_image_position",
+      "label": "Ajuste da imagem",
+      "options": [
+        { "value": "cover", "label": "Cobrir" },
+        { "value": "contain", "label": "Conter" }
+      ],
+      "default": "cover",
+      "visible_if": "{{ block.settings.background_image != blank }}"
+    },
+    {
+      "type": "select",
+      "id": "border",
+      "label": "Borda",
+      "options": [
+        { "value": "none", "label": "Nenhuma" },
+        { "value": "solid", "label": "Sólida" }
+      ],
+      "default": "none"
+    },
+    {
+      "type": "range",
+      "id": "border_width",
+      "min": 0,
+      "max": 10,
+      "step": 0.5,
+      "unit": "px",
+      "label": "Espessura da borda",
+      "default": 1,
+      "visible_if": "{{ block.settings.border != 'none' }}"
+    },
+    {
+      "type": "range",
+      "id": "border_opacity",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "Opacidade da borda",
+      "default": 100,
+      "visible_if": "{{ block.settings.border != 'none' }}"
+    },
+    {
+      "type": "range",
+      "id": "border_radius",
+      "label": "Arredondamento",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "px",
+      "default": 0
+    },
+    {
+      "type": "checkbox",
+      "id": "toggle_overlay",
+      "label": "Overlay de fundo"
+    },
+    {
+      "type": "color",
+      "id": "overlay_color",
+      "label": "Cor do overlay",
+      "alpha": true,
+      "default": "#00000026",
+      "visible_if": "{{ block.settings.toggle_overlay }}"
+    },
+    {
+      "type": "select",
+      "id": "overlay_style",
+      "label": "Estilo do overlay",
+      "options": [
+        { "value": "solid", "label": "Sólido" },
+        { "value": "gradient", "label": "Gradiente" }
+      ],
+      "default": "solid",
+      "visible_if": "{{ block.settings.toggle_overlay }}"
+    },
+    {
+      "type": "select",
+      "id": "gradient_direction",
+      "label": "Direção do gradiente",
+      "options": [
+        { "value": "to top", "label": "Para cima" },
+        { "value": "to bottom", "label": "Para baixo" }
+      ],
+      "default": "to top",
+      "visible_if": "{{ block.settings.toggle_overlay and block.settings.overlay_style == 'gradient' }}"
+    },
+    {
+      "type": "header",
+      "content": "Link"
+    },
+    {
+      "type": "url",
+      "id": "link",
+      "label": "Link"
+    },
+    {
+      "type": "checkbox",
+      "id": "open_in_new_tab",
+      "label": "Abrir em nova aba",
+      "default": false
+    },
+    {
+      "type": "header",
+      "content": "Espaçamento"
+    },
+    {
+      "type": "range",
+      "id": "padding-block-start",
+      "label": "Topo",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "px",
+      "default": 0
+    },
+    {
+      "type": "range",
+      "id": "padding-block-end",
+      "label": "Base",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "px",
+      "default": 0
+    },
+    {
+      "type": "range",
+      "id": "padding-inline-start",
+      "label": "Esquerda",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "px",
+      "default": 0
+    },
+    {
+      "type": "range",
+      "id": "padding-inline-end",
+      "label": "Direita",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "px",
+      "default": 0
+    }
+  ],
+  "presets": [
+    {
+      "name": "RK | Grupo",
+      "category": "Rook UI"
+    },
+    {
+      "name": "RK | Grupo Horizontal",
+      "category": "Rook UI",
+      "settings": {
+        "content_direction": "row",
+        "gap": 16
+      }
+    }
+  ]
+}
+{% endschema %}

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

@@ -0,0 +1,130 @@
+{%- doc -%}
+  Snippet: RkGroup
+  Renders a flexible container block that accepts any content with full layout,
+  sizing, spacing, background, overlay, border and link controls.
+  Acts as a "smart div" with all the visual controllers needed.
+
+  @param {string} children - The DOM content of the group (captured HTML)
+  @param {object} settings - The block/section settings object
+  @param {string} [shopify_attributes] - Shopify editor attributes string
+  @param {string} [class] - Custom CSS classes
+  @param {string} [style] - Custom inline styles
+
+  Settings keys used:
+    Layout:
+      - content_direction: 'column' | 'row' (default: 'column')
+      - vertical_on_mobile: boolean (default: true)
+      - horizontal_alignment, vertical_alignment (for row)
+      - horizontal_alignment_flex_direction_column, vertical_alignment_flex_direction_column (for column)
+      - gap: number (px)
+    Size:
+      - width: 'fill' | 'fit-content' | 'custom'
+      - custom_width: number (%)
+      - width_mobile: 'fill' | 'fit-content' | 'custom'
+      - custom_width_mobile: number (%)
+      - height: 'fit' | 'fill' | 'custom'
+      - custom_height: number (%)
+    Padding:
+      - padding-block-start, padding-block-end, padding-inline-start, padding-inline-end: number (px)
+    Appearance:
+      - background_color: color
+      - background_image: image object
+      - background_image_position: 'cover' | 'contain' (default: 'cover')
+      - border: 'none' | 'solid'
+      - border_width: number (px)
+      - border_opacity: number (0-100)
+      - border_radius: number (px)
+    Overlay:
+      - toggle_overlay: boolean
+      - overlay_color: color (with alpha)
+      - overlay_style: 'solid' | 'gradient'
+      - gradient_direction: 'to top' | 'to bottom'
+    Link:
+      - link: url
+      - open_in_new_tab: boolean
+
+  @example
+  {% capture children %}
+    {% content_for 'blocks' %}
+  {% endcapture %}
+  {% render 'rk-group', children: children, settings: block.settings, shopify_attributes: block.shopify_attributes %}
+{%- enddoc -%}
+
+<div
+  class="
+    rk-group
+    rk-group--height-{{ settings.height | default: 'fit' }}
+    rk-group--width-{{ settings.width | default: 'fill' }}
+    rk-spacing-style
+    rk-size-style
+    {{ class }}
+  "
+  style="
+    {% render 'rk-spacing-style', settings: settings %}
+    {% render 'rk-size-style', settings: settings %}
+    {%- if settings.border != 'none' and settings.border != blank -%}
+      --rk-group-border-width: {{ settings.border_width | default: 1 }}px;
+      --rk-group-border-style: {{ settings.border }};
+      --rk-group-border-opacity: {{ settings.border_opacity | default: 100 | divided_by: 100.0 }};
+    {%- endif -%}
+    {%- if settings.border_radius != blank and settings.border_radius > 0 -%}
+      --rk-group-radius: {{ settings.border_radius }}px;
+    {%- endif -%}
+    {%- if settings.background_color != blank -%}
+      --rk-group-bg: {{ settings.background_color }};
+    {%- endif -%}
+    {{ style }}
+  "
+  {{ shopify_attributes }}
+>
+  {%- if settings.link != blank -%}
+    <a
+      href="{{ settings.link }}"
+      class="rk-group__link"
+      {% if settings.open_in_new_tab %}target="_blank" rel="noopener"{% endif %}
+    ></a>
+  {%- endif -%}
+
+  {%- if settings.background_image != blank or settings.toggle_overlay -%}
+    <div class="rk-group__media">
+      {%- if settings.background_image != blank -%}
+        {%- assign bg_position = settings.background_image_position | default: 'cover' -%}
+        <img
+          src="{{ settings.background_image | image_url: width: 1920 }}"
+          alt=""
+          loading="lazy"
+          class="rk-group__bg-image rk-group__bg-image--{{ bg_position }}"
+          width="{{ settings.background_image.width }}"
+          height="{{ settings.background_image.height }}"
+        >
+      {%- endif -%}
+
+      {%- if settings.toggle_overlay -%}
+        {%- assign overlay_color = settings.overlay_color | default: '#00000026' -%}
+        {%- assign overlay_style = settings.overlay_style | default: 'solid' -%}
+        <div
+          class="rk-group__overlay rk-group__overlay--{{ overlay_style }}"
+          style="
+            --rk-group-overlay-color: {{ overlay_color }};
+            --rk-group-overlay-color-end: {{ overlay_color | color_modify: 'alpha', 0 }};
+            {%- if overlay_style == 'gradient' -%}
+              --rk-group-overlay-direction: {{ settings.gradient_direction | default: 'to top' }};
+            {%- endif -%}
+          "
+        ></div>
+      {%- endif -%}
+    </div>
+  {%- endif -%}
+
+  <div
+    class="
+      rk-group__content
+      rk-layout-style
+      {% if request.design_mode %}rk-group__content--design-mode{% endif %}
+      {% if settings.vertical_on_mobile and settings.content_direction == 'row' %} rk-group__content--mobile-column{% endif %}
+    "
+    style="{% render 'rk-layout-style', settings: settings %}"
+  >
+    {{- children -}}
+  </div>
+</div>

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.12 — Shopify Component Tool'));
+        console.log(dim('  v1.3.14 — Rook UI'));
         console.log('');
     }