rook-cli 1.3.2 → 1.3.4

package/rook-framework/snippets/rk-size-style.liquid

@@ -0,0 +1,48 @@
+{%- doc -%}
+  Renders CSS variables for size (width/height) styles with responsive support.
+  Portable equivalent of Horizon's `size-style.liquid` with `rk-` prefixed variables.
+  Intended for blocks and sections that provide values for all the referenced settings.
+
+  @param {object} settings - The block or section settings object containing size values
+
+  Settings keys used:
+    - settings.width: 'fill' | 'fit-content' | 'custom' | CSS value
+    - settings.custom_width: number (percentage when width == 'custom')
+    - settings.height: 'fill' | 'fit-content' | 'custom' | CSS value
+    - settings.custom_height: number (percentage when height == 'custom')
+    - settings.width_mobile: 'fill' | 'fit-content' | 'custom' (optional, mobile override)
+    - settings.custom_width_mobile: number (percentage when width_mobile == 'custom')
+
+  @example
+  <div class="rk-size-style" style="{% render 'rk-size-style', settings: block.settings %}">
+{%- enddoc -%}
+
+{%- comment -%}--- Width ---{%- endcomment -%}
+{%- if settings.width == 'custom' -%}
+  --rk-width: {{ settings.custom_width }}%;
+{%- elsif settings.width == 'fill' -%}
+  --rk-width: 100%;
+{%- elsif settings.width != blank -%}
+  --rk-width: {{ settings.width }};
+{%- endif -%}
+
+{%- comment -%}--- Height ---{%- endcomment -%}
+{%- if settings.height == 'custom' -%}
+  --rk-height: {{ settings.custom_height }}%;
+{%- elsif settings.height == 'fill' -%}
+  --rk-height: 100%;
+{%- elsif settings.height != blank -%}
+  --rk-height: {{ settings.height }};
+{%- endif -%}
+
+{%- comment -%}--- Width Mobile ---{%- endcomment -%}
+{%- if settings.width_mobile == 'custom' -%}
+  --rk-width-mobile: {{ settings.custom_width_mobile }}%;
+  --rk-width-mobile-min: {{ settings.custom_width_mobile }}%;
+{%- elsif settings.width_mobile == 'fill' -%}
+  --rk-width-mobile: 100%;
+  --rk-width-mobile-min: 5rem;
+{%- elsif settings.width_mobile == 'fit-content' -%}
+  --rk-width-mobile: fit-content;
+  --rk-width-mobile-min: fit-content;
+{%- endif -%}

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

@@ -0,0 +1,25 @@
+{% doc %}
+  Snippet: RkSkeleton
+  Renders a loading placeholder skeleton.
+
+  @param {string} [width] - CSS width (default: '100%')
+  @param {string} [height] - CSS height (default: '1em')
+  @param {string} [shape] - 'text' | 'circle' | 'rect' (default: 'text')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-skeleton', width: '200px', height: '20px' %}
+  {% render 'rk-skeleton', shape: 'circle', width: '48px', height: '48px' %}
+{% enddoc %}
+
+{%- liquid
+  assign sk_width = width | default: '100%'
+  assign sk_height = height | default: '1em'
+  assign sk_shape = shape | default: 'text'
+-%}
+
+<div
+  class="rk-skeleton{% if sk_shape == 'circle' %} rk-skeleton--circle{% elsif sk_shape == 'text' %} rk-skeleton--text{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  style="width: {{ sk_width }}; height: {{ sk_height }};"
+  aria-hidden="true"
+></div>

package/rook-framework/snippets/rk-spacing-padding.liquid

@@ -0,0 +1,18 @@
+{%- doc -%}
+  Renders CSS variables for simple padding styles without responsive scaling.
+  Portable equivalent of Horizon's `spacing-padding.liquid` with `rk-` prefixed variables.
+  Use this for simpler cases where responsive scaling is not needed.
+
+  @param {object} settings - The block or section settings object containing padding values
+
+  Settings keys used:
+    - settings['padding-block-start']: number (px, default: 0)
+    - settings['padding-block-end']: number (px, default: 0)
+    - settings['padding-inline-start']: number (px, default: 0)
+    - settings['padding-inline-end']: number (px, default: 0)
+
+  @example
+  <div style="{% render 'rk-spacing-padding', settings: section.settings %}">
+{%- enddoc -%}
+
+--rk-pt: {{ settings.padding-block-start | default: 0 }}px; --rk-pb: {{ settings.padding-block-end | default: 0 }}px; --rk-ps: {{ settings.padding-inline-start | default: 0 }}px; --rk-pe: {{ settings.padding-inline-end | default: 0 }}px;

package/rook-framework/snippets/rk-spacing-style.liquid

@@ -0,0 +1,54 @@
+{%- doc -%}
+  Renders CSS variables for spacing (padding) styles with responsive scaling.
+  Portable equivalent of Horizon's `spacing-style.liquid` with `rk-` prefixed variables.
+  Intended for blocks and sections that provide values for all the referenced settings.
+
+  Values above `scale_min` (default: 20px) are wrapped in a responsive `max()` function
+  that scales down proportionally on smaller viewports using `--rk-spacing-scale`.
+
+  @param {object} settings - The block or section settings object containing spacing values
+
+  Settings keys used:
+    - settings['padding-block-start']: number (px)
+    - settings['padding-block-end']: number (px)
+    - settings['padding-inline-start']: number (px)
+    - settings['padding-inline-end']: number (px)
+
+  CSS Variables generated:
+    - --rk-pt (padding-block-start)
+    - --rk-pb (padding-block-end)
+    - --rk-ps (padding-inline-start)
+    - --rk-pe (padding-inline-end)
+
+  @example
+  <div class="rk-spacing-style" style="{% render 'rk-spacing-style', settings: block.settings %}">
+{%- enddoc -%}
+
+{%- liquid
+  assign rk_scale_min = 20
+  assign rk_keys = 'padding-block-start,padding-block-end,padding-inline-start,padding-inline-end' | split: ','
+  assign rk_vars = '--rk-pt,--rk-pb,--rk-ps,--rk-pe' | split: ','
+
+  for key in rk_keys
+    assign value = settings[key]
+    assign var_name = rk_vars[forloop.index0]
+
+    if value != blank
+      echo var_name
+      echo ': '
+
+      if value > rk_scale_min
+        echo 'max('
+        echo rk_scale_min
+        echo 'px, calc(var(--rk-spacing-scale, 1) * '
+        echo value
+        echo 'px))'
+      else
+        echo value
+        echo 'px'
+      endif
+
+      echo ';'
+    endif
+  endfor
+-%}

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

@@ -0,0 +1,43 @@
+{% doc %}
+  Snippet: RkSpinner
+  Elemento gráfico animado em SVG para indicar processamento em andamento.
+
+  @param {string} [size] - Define o tamanho do spinner: 'sm', 'md' (padrão), 'lg'.
+  @param {string} [color] - Cor CSS/Utilitária para o spinner. Por padrão herda `currentColor`.
+  @param {string} [custom_class] - Classes CSS extras para o container.
+  @param {string} [label] - Texto para acessibilidade (Screen Readers). Padrão: "Carregando...".
+
+  @example
+  <!-- Uso básico -->
+  {% render 'rk-spinner' %}
+
+  <!-- Pequeno dentro de um botão -->
+  <button class="rk-button">
+    {% render 'rk-spinner', size: 'sm', custom_class: 'mr-2' %}
+    Salvando
+  </button>
+{% enddoc %}
+
+{%- liquid
+  assign t_size = size | default: 'md'
+  assign t_label = label | default: 'Carregando...'
+-%}
+
+<span role="status" class="rk-spinner-wrapper{% if custom_class %} {{ custom_class }}{% endif %}">
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width="24" 
+    height="24" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    stroke-width="2" 
+    stroke-linecap="round" 
+    stroke-linejoin="round" 
+    class="rk-spinner rk-spinner--{{ t_size }}{% if color %} {{ color }}{% endif %}"
+    aria-hidden="true"
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
+  </svg>
+  <span class="rk-sr-only">{{ t_label }}</span>
+</span>

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

@@ -0,0 +1,33 @@
+{% doc %}
+  Snippet: RkSwatch
+  Renders a variant swatch (color, image or unavailable).
+
+  @param {object} swatch - Shopify swatch object
+  @param {object} [variant_image] - Alternative image to use
+  @param {boolean} [active] - Currently selected
+  @param {boolean} [unavailable] - Unavailable state
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-swatch', swatch: swatch, active: true %}
+{% enddoc %}
+
+{%- liquid
+  assign swatch_value = null
+
+  if variant_image
+    assign swatch_url = variant_image | image_url: width: 64
+    assign swatch_value = 'url(' | append: swatch_url | append: ')'
+  elsif swatch.image
+    assign swatch_url = swatch.image | image_url: width: 80
+    assign swatch_value = 'url(' | append: swatch_url | append: ')'
+  elsif swatch.color
+    assign swatch_value = 'rgb(' | append: swatch.color.rgb | append: ')'
+  endif
+-%}
+
+<span
+  class="rk-swatch{% if active %} rk-swatch--active{% endif %}{% if unavailable %} rk-swatch--unavailable{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  style="--rk-swatch-bg: {{ swatch_value }};"
+>
+</span>

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

@@ -0,0 +1,44 @@
+{% doc %}
+  Snippet: RkTable
+  Renders a responsive Table component (Shadcn/UI pattern).
+  The snippet acts as a wrapper to manage horizontal scrolling on mobile,
+  while you write the semantic HTML inside it.
+
+  @param {string} content - HTML containing <thead>, <tbody>, etc.
+  @param {boolean} [striped] - Add alternating row colors (default: false)
+  @param {string} [custom_class] - Extra CSS classes for the wrapper
+
+  @example
+  {% capture table_content %}
+    <thead>
+      <tr>
+        <th>Fatura</th>
+        <th>Status</th>
+        <th>Método</th>
+        <th class="rk-text-right">Valor</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>INV001</td>
+        <td>Paga</td>
+        <td>Cartão de Crédito</td>
+        <td class="rk-text-right">R$ 250,00</td>
+      </tr>
+      <tr>
+        <td>INV002</td>
+        <td>Pendente</td>
+        <td>Pix</td>
+        <td class="rk-text-right">R$ 150,00</td>
+      </tr>
+    </tbody>
+  {% endcapture %}
+
+  {% render 'rk-table', content: table_content, striped: true %}
+{% enddoc %}
+
+<div class="rk-table-wrapper{% if custom_class %} {{ custom_class }}{% endif %}">
+  <table class="rk-table{% if striped %} rk-table--striped{% endif %}">
+    {{ content }}
+  </table>
+</div>

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

@@ -0,0 +1,52 @@
+{% doc %}
+  Snippet: RkTabs
+  Renders a Tabs wrapper (Shadcn/UI pattern).
+  The snippet manages the Web Component wrapper and the basic layout.
+  You need to provide the raw HTML for triggers (buttons) and content (panels)
+  following the WAI-ARIA specs (roles and aria-attributes).
+
+  @param {string} id - Unique tabs id (for prefixing triggers/panels)
+  @param {string} triggers - HTML for the tab triggers ([role="tab"])
+  @param {string} content - HTML for the tab panels ([role="tabpanel"])
+  @param {string} [default_value] - ID of the tab to open by default
+  @param {string} [orientation] - 'horizontal' (default) or 'vertical'
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% capture tabs_triggers %}
+    <button class="rk-tabs__trigger" role="tab" aria-controls="panel-1" id="tab-1">Descrição</button>
+    <button class="rk-tabs__trigger" role="tab" aria-controls="panel-2" id="tab-2">Especificações</button>
+  {% endcapture %}
+
+  {% capture tabs_content %}
+    <div class="rk-tabs__panel" role="tabpanel" id="panel-1" aria-labelledby="tab-1">
+      <p>Texto da descrição aqui.</p>
+    </div>
+    <div class="rk-tabs__panel" role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
+      <p>Detalhes técnicos aqui.</p>
+    </div>
+  {% endcapture %}
+
+  {% render 'rk-tabs', id: 'product-tabs', triggers: tabs_triggers, content: tabs_content, default_value: 'tab-1' %}
+{% enddoc %}
+
+{%- liquid
+  assign t_orientation = orientation | default: 'horizontal'
+-%}
+
+<rk-tabs-element
+  id="{{ id | default: 'rk-tabs' }}"
+  data-default-value="{{ default_value }}"
+  data-orientation="{{ t_orientation }}"
+  class="rk-tabs rk-tabs--{{ t_orientation }}{% if custom_class %} {{ custom_class }}{% endif %}"
+>
+  {%- comment -%} Tab List {%- endcomment -%}
+  <div class="rk-tabs__list" role="tablist" aria-orientation="{{ t_orientation }}">
+    {{ triggers }}
+  </div>
+
+  {%- comment -%} Tab Panels {%- endcomment -%}
+  <div class="rk-tabs__content-wrapper">
+    {{ content }}
+  </div>
+</rk-tabs-element>

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

@@ -0,0 +1,42 @@
+{% doc %}
+  Snippet: RkTextarea
+  Campo de entrada de texto com múltiplas linhas (textarea), seguindo o estilo base (Shadcn/UI).
+
+  @param {string} [id] - ID único para o campo, vinculando-o ao Label.
+  @param {string} [name] - Nome do campo no formulário.
+  @param {string} [placeholder] - Texto de dica (placeholder).
+  @param {string} [value] - Valor inicial.
+  @param {number} [rows] - Quantidade de linhas visíveis (altura inicial). Padrão: 3.
+  @param {string} [resize] - Propriedade de redimensionamento ('none', 'vertical', 'both'). Padrão: 'vertical'.
+  @param {boolean} [required] - Se o campo é obrigatório.
+  @param {boolean} [disabled] - Se o campo está desabilitado.
+  @param {boolean} [readonly] - Se o campo é somente leitura.
+  @param {boolean} [has_error] - Define estilo de erro na borda se `true`.
+  @param {string} [custom_class] - Classes CSS customizadas.
+
+  @example
+  {% render 'rk-textarea',
+    id: 'contact_message',
+    name: 'contact[body]',
+    placeholder: 'Digite sua mensagem aqui...',
+    rows: 4,
+    required: true
+  %}
+{% enddoc %}
+
+{%- liquid
+  assign t_rows = rows | default: 3
+  assign t_resize = resize | default: 'vertical'
+-%}
+
+<textarea
+  {% if id %}id="{{ id }}"{% endif %}
+  {% if name %}name="{{ name }}"{% endif %}
+  class="rk-textarea rk-textarea--resize-{{ t_resize }}{% if has_error %} rk-textarea--error{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  rows="{{ t_rows }}"
+  {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
+  {% if required %}required aria-required="true"{% endif %}
+  {% if disabled %}disabled aria-disabled="true"{% endif %}
+  {% if readonly %}readonly{% endif %}
+  {% if has_error %}aria-invalid="true"{% endif %}
+>{{ value }}</textarea>

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

@@ -0,0 +1,27 @@
+{% doc %}
+  Snippet: RkToggleGroup
+  Renders a Toggle Group that manages multiple <rk-toggle-element>.
+  Uses <rk-toggle-group> Web Component.
+
+  @param {string} type - 'single' or 'multiple' (default: 'single')
+  @param {string} toggles - The rendered HTML of the <rk-toggle-element>s
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% capture group_toggles %}
+    {% render 'rk-toggle', value: 'b', text: 'B', variant: 'outline', pressed: true %}
+    {% render 'rk-toggle', value: 'i', text: 'I', variant: 'outline' %}
+    {% render 'rk-toggle', value: 'u', text: 'U', variant: 'outline' %}
+  {% endcapture %}
+
+  {% render 'rk-toggle-group', type: 'multiple', toggles: group_toggles %}
+{% enddoc %}
+
+<rk-toggle-group
+  data-type="{{ type | default: 'single' }}"
+  role="group"
+  dir="ltr"
+  class="rk-toggle-group{% if custom_class %} {{ custom_class }}{% endif %}"
+>
+  {{ toggles }}
+</rk-toggle-group>

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

@@ -0,0 +1,58 @@
+{% doc %}
+  Snippet: RkToggle
+  Renders a Toggle button (two-state switch).
+  Uses <rk-toggle-element> Web Component.
+
+  @param {string} value - The value when pressed
+  @param {string} [id] - Unique id
+  @param {string} [text] - Text label
+  @param {string} [icon] - HTML for the icon (usually an SVG)
+  @param {string} [variant] - 'default' or 'outline' (default: 'default')
+  @param {string} [size] - 'sm', 'md', 'lg' (default: 'md')
+  @param {boolean} [pressed] - Set true if it should start pressed
+  @param {boolean} [disabled] - Set 
+  @param {string} [aria_label] - Required if only icon is used
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-toggle', icon: my_bold_svg, aria_label: 'Bold', pressed: true %}
+{% enddoc %}
+
+{%- liquid
+  assign t_variant = variant | default: 'default'
+  assign t_size = size | default: 'md'
+  assign t_pressed = pressed | default: false
+  
+  capture class_list
+    echo 'rk-toggle'
+    echo ' rk-toggle--' | append: t_variant
+    echo ' rk-toggle--' | append: t_size
+    if t_pressed
+      echo ' rk-toggle--on'
+    else
+      echo ' rk-toggle--off'
+    endif
+    if custom_class
+      echo ' ' | append: custom_class
+    endif
+  endcapture
+-%}
+
+<rk-toggle-element data-value="{{ value | escape }}">
+  <button
+    type="button"
+    class="{{ class_list | strip_newlines }}"
+    {% if id %}id="{{ id }}"{% endif %}
+    {% if disabled %}disabled aria-disabled="true"{% endif %}
+    aria-pressed="{{ t_pressed | downcase }}"
+    {% if aria_label %}aria-label="{{ aria_label }}"{% endif %}
+  >
+    {%- if icon -%}
+      <span class="rk-toggle__icon">{{ icon }}</span>
+    {%- endif -%}
+    
+    {%- if text -%}
+      <span class="rk-toggle__text">{{ text }}</span>
+    {%- endif -%}
+  </button>
+</rk-toggle-element>

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

@@ -0,0 +1,27 @@
+{% doc %}
+  Snippet: RkTypography
+  Renders a text element with configurable scale, weight and alignment.
+
+  @param {string} text - The text content (HTML safe)
+  @param {string} [tag] - HTML tag (default: 'p')
+  @param {string} [size] - 'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'|'4xl' (default: 'md')
+  @param {string} [align] - 'center' | 'right'
+  @param {boolean} [muted] - Muted color
+  @param {boolean} [bold] - Bold weight
+  @param {boolean} [uppercase] - Uppercase text
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-typography', text: 'Hello', tag: 'h2', size: '2xl', bold: true %}
+{% enddoc %}
+
+{%- liquid
+  assign el = tag | default: 'p'
+  assign t_size = size | default: 'md'
+-%}
+
+<{{ el }}
+  class="rk-typography rk-typography--{{ t_size }}{% if align %} rk-typography--{{ align }}{% endif %}{% if muted %} rk-typography--muted{% endif %}{% if bold %} rk-typography--bold{% endif %}{% if uppercase %} rk-typography--uppercase{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+>
+  {{ text }}
+</{{ el }}>

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

@@ -0,0 +1,74 @@
+{% comment %}
+  Rook UI Core Framework — CSS Variables (Liquid → CSS)
+  =====================================================
+  Este snippet gera todas as CSS custom properties dinâmicas do framework,
+  populadas a partir das settings globais do tema (rk-settings_schema.json).
+
+  Deve ser renderizado no <head> do layout/theme.liquid:
+    {% render 'rk-variables' %}
+
+  Segue o mesmo padrão do Horizon (theme-styles-variables.liquid) usando
+  a tag {% style %} para injeção inline de CSS com acesso às settings.
+{% endcomment %}
+
+{% style %}
+  :root {
+    /* ================================================================
+       CORES — Dinâmicas via Theme Settings
+       ================================================================ */
+
+    /* Primárias */
+    --rk-color-primary: {{ settings.rk_color_primary }};
+    --rk-color-primary-hover: {{ settings.rk_color_primary_hover }};
+    --rk-color-primary-foreground: {{ settings.rk_color_primary_foreground }};
+
+    /* Secundárias */
+    --rk-color-secondary: {{ settings.rk_color_secondary }};
+    --rk-color-secondary-hover: {{ settings.rk_color_secondary_hover }};
+
+    /* Fundos */
+    --rk-color-bg: {{ settings.rk_color_background }};
+    --rk-color-bg-secondary: {{ settings.rk_color_background_secondary }};
+
+    /* Semânticas */
+    --rk-color-success: {{ settings.rk_color_success }};
+    --rk-color-danger: {{ settings.rk_color_danger }};
+    --rk-color-destructive: {{ settings.rk_color_danger }};
+
+    /* Texto */
+    --rk-color-text: {{ settings.rk_color_text }};
+    --rk-color-text-muted: {{ settings.rk_color_text_muted }};
+
+    /* Bordas e Foco */
+    --rk-color-border: {{ settings.rk_color_border }};
+    --rk-color-ring: {{ settings.rk_color_ring }};
+
+    {%- comment -%}
+      Gerar a versão RGB das cores de borda para uso com opacity.
+      Ex: rgb(var(--rk-color-border-rgb) / 0.5)
+    {%- endcomment -%}
+    {%- assign rk_border_color = settings.rk_color_border -%}
+    --rk-color-border-rgb: {{ rk_border_color.red }} {{ rk_border_color.green }} {{ rk_border_color.blue }};
+
+    {%- assign rk_text_color = settings.rk_color_text -%}
+    --rk-color-text-rgb: {{ rk_text_color.red }} {{ rk_text_color.green }} {{ rk_text_color.blue }};
+
+    /* Hover de borda (derivado) */
+    --rk-color-border-hover: rgb({{ rk_text_color.red }} {{ rk_text_color.green }} {{ rk_text_color.blue }} / 0.3);
+
+    /* ================================================================
+       FORMA — Border Radius dinâmico
+       ================================================================ */
+    --rk-radius: {{ settings.rk_border_radius }}px;
+    --rk-radius-sm: {{ settings.rk_border_radius_sm }}px;
+    --rk-radius-lg: {{ settings.rk_border_radius_lg }}px;
+    --rk-radius-pill: {{ settings.rk_border_radius_pill }}px;
+    --rk-radius-md: {{ settings.rk_border_radius }}px;
+
+    /* ================================================================
+       TRANSIÇÃO — Velocidade dinâmica
+       ================================================================ */
+    --rk-transition-speed: {{ settings.rk_transition_speed }}ms;
+    --rk-transition: var(--rk-transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
+  }
+{% endstyle %}

package/src/app.js

@@ -22,6 +22,8 @@ import { AddCommand } from './commands/AddCommand.js';
 import { ConfigCommand } from './commands/ConfigCommand.js';
 import { GenerateCommand } from './commands/GenerateCommand.js';
 import { ScaffoldService } from './services/ScaffoldService.js';
+import { FrameworkInstaller } from './services/FrameworkInstaller.js';
+import { InstallCommand } from './commands/InstallCommand.js';
 import { CLI_NAME } from './config/constants.js';
 
 export class App {
@@ -61,6 +63,14 @@ export class App {
             this.scaffoldService,
             this.conflictResolver
         );
+
+        this.frameworkInstaller = new FrameworkInstaller(this.logger);
+
+        this.installCommand = new InstallCommand(
+            this.logger,
+            this.promptUI,
+            this.frameworkInstaller
+        );
     }
 
     /**
@@ -108,6 +118,20 @@ export class App {
                 await this.generateCommand.executar(nome, opcoes);
             });
 
+        // Comando: rook install
+        this.programa
+            .command('install')
+            .alias('i')
+            .description('Instala o Rook UI Core Framework no tema Shopify')
+            .option('--path <dir>', 'Diretório do tema Shopify (padrão: diretório atual)')
+            .option('--force', 'Sobrescreve arquivos sem perguntar')
+            .option('--skip-layout', 'Não modifica o theme.liquid')
+            .option('--skip-settings', 'Não modifica o settings_schema.json')
+            .action(async (opcoes) => {
+                this.logger.banner();
+                await this.installCommand.executar(opcoes);
+            });
+
         // Comando padrão (sem argumentos) — abre o menu interativo
         this.programa
             .action(async () => {