rook-cli 1.3.2 → 1.3.5

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,76 @@
+{% comment %}
+  Rook UI Core Framework — CSS Variables (Liquid → CSS)
+  =====================================================
+  Este snippet gera as CSS custom properties globais do framework:
+  - Cores globais padrão (:root) — usadas quando nenhum rk-scheme é aplicado
+  - Border-radius dinâmico
+  - Velocidade de transição
+
+  Para esquemas de cores por seção, veja rk-color-schemes.liquid.
+
+  Deve ser renderizado no <head> do layout/theme.liquid:
+    {% render 'rk-color-schemes' %}  ← Esquemas de cores (por seção)
+    {% render 'rk-variables' %}      ← Cores globais + forma + transição
+{% endcomment %}
+
+{% style %}
+  :root {
+    /* ================================================================
+       CORES GLOBAIS — Fallback quando nenhum rk-scheme é aplicado
+       ================================================================ */
+
+    /* 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 -%}
+      Valores RGB derivados 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-md: {{ settings.rk_border_radius }}px;
+    --rk-radius-lg: {{ settings.rk_border_radius_lg }}px;
+    --rk-radius-pill: {{ settings.rk_border_radius_pill }}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 () => {

package/src/commands/InstallCommand.js

@@ -0,0 +1,133 @@
+/**
+ * InstallCommand — Comando "install" do CLI.
+ *
+ * Orquestra o fluxo de instalação do Rook UI Core Framework:
+ * 1. Valida que o diretório é um tema Shopify
+ * 2. Detecta instalação prévia
+ * 3. Confirma com o usuário (modo interativo)
+ * 4. Delega ao FrameworkInstaller
+ *
+ * Princípio: Inversão de Dependência (DIP) — dependências injetadas
+ * Princípio: Responsabilidade Única (SRP) — orquestra apenas o fluxo do comando "install"
+ */
+
+import path from 'path';
+
+export class InstallCommand {
+
+    /**
+     * @param {import('../utils/logger.js').Logger} logger
+     * @param {import('../ui/PromptUI.js').PromptUI} promptUI
+     * @param {import('../services/FrameworkInstaller.js').FrameworkInstaller} frameworkInstaller
+     */
+    constructor(logger, promptUI, frameworkInstaller) {
+        this.logger = logger;
+        this.promptUI = promptUI;
+        this.frameworkInstaller = frameworkInstaller;
+    }
+
+    /**
+     * Executa o fluxo principal do comando "install".
+     *
+     * @param {Object} [opcoes={}]
+     * @param {string} [opcoes.path] - Diretório do tema Shopify (padrão: cwd)
+     * @param {boolean} [opcoes.force] - Sobrescreve sem perguntar
+     * @param {boolean} [opcoes.skipLayout] - Não modifica theme.liquid
+     * @param {boolean} [opcoes.skipSettings] - Não modifica settings_schema.json
+     * @returns {Promise<void>}
+     */
+    async executar(opcoes = {}) {
+        try {
+            const themePath = path.resolve(opcoes.path || process.cwd());
+            const isHeadless = opcoes.force || opcoes.path;
+
+            // 1. Validação: é um tema Shopify?
+            const isValid = await this.frameworkInstaller.validate(themePath);
+
+            if (!isValid) {
+                if (isHeadless) {
+                    this.logger.erro(`O diretório "${themePath}" não parece ser um tema Shopify.`);
+                    process.exitCode = 1;
+                    return;
+                }
+
+                const continuar = await this.promptUI.confirmar(
+                    'Este diretório não parece ser um tema Shopify. Deseja continuar mesmo assim?',
+                    false
+                );
+
+                if (!continuar) {
+                    this.logger.aviso('Instalação cancelada.');
+                    return;
+                }
+            }
+
+            // Detectar informações do tema
+            const themeInfo = await this.frameworkInstaller.detectThemeInfo(themePath);
+            if (themeInfo) {
+                this.logger.info(`Tema detectado: ${themeInfo.name} v${themeInfo.version}`);
+            }
+
+            // 2. Detectar instalação prévia
+            const jaInstalado = await this.frameworkInstaller.isAlreadyInstalled(themePath);
+
+            if (jaInstalado) {
+                if (isHeadless) {
+                    this.logger.aviso('Rook UI já instalado. Reinstalando (--force)...');
+                } else {
+                    const reinstalar = await this.promptUI.confirmar(
+                        'Rook UI já está instalado neste tema. Deseja reinstalar/atualizar?',
+                        false
+                    );
+
+                    if (!reinstalar) {
+                        this.logger.aviso('Instalação cancelada.');
+                        return;
+                    }
+                }
+            }
+
+            // 3. Confirmação (modo interativo)
+            if (!isHeadless) {
+                const confirmar = await this.promptUI.confirmar(
+                    'Instalar Rook UI Core Framework neste tema?',
+                    true
+                );
+
+                if (!confirmar) {
+                    this.logger.aviso('Instalação cancelada.');
+                    return;
+                }
+            }
+
+            // 4. Execução
+            this.logger.destaque('\n  ⚡ Instalando Rook UI Core Framework...\n');
+
+            const resultado = await this.frameworkInstaller.install(themePath, {
+                force: opcoes.force || false,
+                skipLayout: opcoes.skipLayout || false,
+                skipSettings: opcoes.skipSettings || false,
+            });
+
+            // 5. Resumo final
+            console.log('');
+            this.logger.destaque('═══════════════════════════════════════════');
+            this.logger.sucesso('🎉 Rook UI Core Framework instalado com sucesso!');
+            this.logger.sutil(`   Assets: ${resultado.assets} arquivo(s)`);
+            this.logger.sutil(`   Snippets: ${resultado.snippets} arquivo(s)`);
+            this.logger.sutil(`   Blocks: ${resultado.blocks} arquivo(s)`);
+            this.logger.sutil(`   Settings: ${resultado.settingsSections} seção(ões)`);
+            this.logger.sutil(`   Layout: ${resultado.layoutPatched ? 'atualizado' : 'sem alteração'}`);
+            this.logger.destaque('═══════════════════════════════════════════');
+            console.log('');
+
+        } catch (erro) {
+            if (erro.name === 'ExitPromptError') {
+                this.logger.aviso('Operação cancelada pelo usuário.');
+                return;
+            }
+            this.logger.erro(`Erro durante a instalação: ${erro.message}`);
+            process.exitCode = 1;
+        }
+    }
+}

package/src/mcp/server.js

@@ -43,6 +43,7 @@ import { DownloadService } from '../services/DownloadService.js';
 import { ScaffoldService } from '../services/ScaffoldService.js';
 import { FileMapper } from '../filesystem/FileMapper.js';
 import { ConflictResolver } from '../filesystem/ConflictResolver.js';
+import { FrameworkInstaller } from '../services/FrameworkInstaller.js';
 import { generateNames } from '../utils/stringUtils.js';
 
 import path from 'path';
@@ -69,6 +70,7 @@ const downloadService = new DownloadService(logger, tokenManager);
 const conflictResolver = new ConflictResolver(logger);
 const fileMapper = new FileMapper(logger, conflictResolver);
 const scaffoldService = new ScaffoldService(logger);
+const frameworkInstaller = new FrameworkInstaller(logger);
 
 // No modo MCP, o ConflictResolver opera em modo headless (sobrescreve tudo)
 conflictResolver.definirDecisaoGlobal(true);
@@ -99,6 +101,28 @@ const InstallComponentSchema = z.object({
         .describe('Obrigatório no Cursor/Claude Desktop: Caminho absoluto para a raiz do projeto (ex: /Users/nome/projeto).'),
 });
 
+const InstallFrameworkSchema = z.object({
+    projectPath: z
+        .string()
+        .min(1)
+        .describe('Obrigatório: Caminho absoluto para a raiz do tema Shopify (ex: /Users/nome/meu-tema).'),
+    force: z
+        .boolean()
+        .optional()
+        .default(true)
+        .describe('Sobrescreve arquivos existentes sem perguntar (padrão: true no MCP).'),
+    skipLayout: z
+        .boolean()
+        .optional()
+        .default(false)
+        .describe('Se true, não modifica o layout/theme.liquid.'),
+    skipSettings: z
+        .boolean()
+        .optional()
+        .default(false)
+        .describe('Se true, não modifica o config/settings_schema.json.'),
+});
+
 const GenerateScaffoldSchema = z.object({
     name: z
         .string()
@@ -267,6 +291,58 @@ async function handleGenerateScaffold(args) {
     };
 }
 
+/**
+ * Handler: install_framework
+ * Instala o Rook UI Core Framework em um tema Shopify.
+ */
+async function handleInstallFramework(args) {
+    const { projectPath, force, skipLayout, skipSettings } = InstallFrameworkSchema.parse(args);
+
+    // Validar tema
+    const isValid = await frameworkInstaller.validate(projectPath);
+    if (!isValid) {
+        return {
+            content: [{
+                type: 'text',
+                text: JSON.stringify({
+                    success: false,
+                    message: `O diretório "${projectPath}" não parece ser um tema Shopify válido.`,
+                }, null, 2),
+            }],
+        };
+    }
+
+    // Detectar tema
+    const themeInfo = await frameworkInstaller.detectThemeInfo(projectPath);
+    const jaInstalado = await frameworkInstaller.isAlreadyInstalled(projectPath);
+
+    // Executar instalação
+    const resultado = await frameworkInstaller.install(projectPath, {
+        force,
+        skipLayout,
+        skipSettings,
+    });
+
+    return {
+        content: [{
+            type: 'text',
+            text: JSON.stringify({
+                success: true,
+                message: 'Rook UI Core Framework instalado com sucesso.',
+                theme: themeInfo || undefined,
+                wasReinstall: jaInstalado,
+                result: {
+                    assets: resultado.assets,
+                    snippets: resultado.snippets,
+                    blocks: resultado.blocks,
+                    settingsSections: resultado.settingsSections,
+                    layoutPatched: resultado.layoutPatched,
+                },
+            }, null, 2),
+        }],
+    };
+}
+
 // ═══════════════════════════════════════════════════════════════
 //  Função auxiliar: Download + Distribuição
 // ═══════════════════════════════════════════════════════════════
@@ -354,6 +430,37 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
                     required: ['name', 'type', 'projectPath'],
                 },
             },
+            {
+                name: 'install_framework',
+                description:
+                    'Instala o Rook UI Core Framework em um tema Shopify. ' +
+                    'Copia assets, snippets e blocks, injeta settings no settings_schema.json e configura o layout/theme.liquid.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        projectPath: {
+                            type: 'string',
+                            description: 'Obrigatório: Caminho absoluto para a raiz do tema Shopify.',
+                        },
+                        force: {
+                            type: 'boolean',
+                            description: 'Sobrescreve arquivos existentes sem perguntar (padrão: true).',
+                            default: true,
+                        },
+                        skipLayout: {
+                            type: 'boolean',
+                            description: 'Se true, não modifica o layout/theme.liquid.',
+                            default: false,
+                        },
+                        skipSettings: {
+                            type: 'boolean',
+                            description: 'Se true, não modifica o config/settings_schema.json.',
+                            default: false,
+                        },
+                    },
+                    required: ['projectPath'],
+                },
+            },
             {
                 name: 'generate_scaffold',
                 description:
@@ -395,11 +502,14 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
             case 'install_component':
                 return await handleInstallComponent(args);
 
+            case 'install_framework':
+                return await handleInstallFramework(args);
+
             case 'generate_scaffold':
                 return await handleGenerateScaffold(args);
 
             default:
-                throw new Error(`Tool desconhecida: "${name}". Tools disponíveis: list_components, install_component, generate_scaffold`);
+                throw new Error(`Tool desconhecida: "${name}". Tools disponíveis: list_components, install_component, install_framework, generate_scaffold`);
         }
     } catch (erro) {
         // Retorna erro estruturado para a IA