rook-cli 1.3.2 → 1.3.4

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

package/src/services/FrameworkInstaller.js

@@ -0,0 +1,379 @@
+/**
+ * FrameworkInstaller — Serviço de instalação do Rook UI Core Framework.
+ *
+ * Encapsula toda a lógica de instalação do framework em um tema Shopify:
+ * 1. Copiar assets (CSS + JS)
+ * 2. Copiar snippets (Liquid)
+ * 3. Copiar blocks (Liquid)
+ * 4. Injetar settings no settings_schema.json
+ * 5. Patch do layout/theme.liquid
+ *
+ * Princípio: Responsabilidade Única (SRP) — só instala o framework
+ * Princípio: Inversão de Dependência (DIP) — dependências injetadas
+ */
+
+import path from 'path';
+import fs from 'fs-extra';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const FRAMEWORK_DIR = path.resolve(__dirname, '../../rook-framework');
+
+/** Bloco Liquid injetado no <head> do theme.liquid */
+const HEAD_INJECTION = `
+    {%- comment -%} Rook UI Core Framework {%- endcomment -%}
+    {%- render 'rk-variables' -%}
+    {{ 'rk-framework-tokens.css' | asset_url | stylesheet_tag }}
+    {{ 'rk-framework-core.css' | asset_url | stylesheet_tag }}
+    {%- render 'rk-external-assets', location: 'head' -%}`;
+
+/** Bloco Liquid injetado antes do </body> do theme.liquid */
+const BODY_INJECTION = `
+    {%- comment -%} Rook UI Core Framework — Scripts {%- endcomment -%}
+    {%- render 'rk-external-assets', location: 'body' -%}
+    {%- render 'rk-scripts' -%}`;
+
+/** Marcador para detectar instalação prévia */
+const RK_MARKER = 'rk-variables';
+
+/** Prefixo das seções no settings_schema */
+const RK_SECTION_PREFIX = 'Rook UI';
+
+export class FrameworkInstaller {
+
+    /**
+     * @param {import('../utils/logger.js').Logger} logger
+     */
+    constructor(logger) {
+        this.logger = logger;
+    }
+
+    /**
+     * Executa a instalação completa do framework.
+     *
+     * @param {string} themePath - Caminho raiz do tema Shopify
+     * @param {Object} [options={}]
+     * @param {boolean} [options.force=false] - Sobrescrever sem perguntar
+     * @param {boolean} [options.skipLayout=false] - Não modificar theme.liquid
+     * @param {boolean} [options.skipSettings=false] - Não modificar settings_schema.json
+     * @returns {Promise<{assets: number, snippets: number, blocks: number, settingsSections: number, layoutPatched: boolean}>}
+     */
+    async install(themePath, options = {}) {
+        const resultado = {
+            assets: 0,
+            snippets: 0,
+            blocks: 0,
+            settingsSections: 0,
+            layoutPatched: false,
+        };
+
+        // Etapa 1: Assets
+        this.logger.destaque('\n  [1/5] Copiando assets...');
+        resultado.assets = await this._copyDir(
+            path.join(FRAMEWORK_DIR, 'assets'),
+            path.join(themePath, 'assets'),
+            options.force
+        );
+        this.logger.sucesso(`  ${resultado.assets} arquivo(s) copiados para assets/`);
+
+        // Etapa 2: Snippets
+        this.logger.destaque('\n  [2/5] Copiando snippets...');
+        resultado.snippets = await this._copyDir(
+            path.join(FRAMEWORK_DIR, 'snippets'),
+            path.join(themePath, 'snippets'),
+            options.force,
+            (filename) => !filename.includes(' copy')
+        );
+        this.logger.sucesso(`  ${resultado.snippets} arquivo(s) copiados para snippets/`);
+
+        // Etapa 3: Blocks
+        this.logger.destaque('\n  [3/5] Copiando blocks...');
+        resultado.blocks = await this._copyDir(
+            path.join(FRAMEWORK_DIR, 'blocks'),
+            path.join(themePath, 'blocks'),
+            options.force
+        );
+        this.logger.sucesso(`  ${resultado.blocks} arquivo(s) copiados para blocks/`);
+
+        // Etapa 4: Settings
+        if (!options.skipSettings) {
+            this.logger.destaque('\n  [4/5] Injetando settings no settings_schema.json...');
+            resultado.settingsSections = await this._injectSettings(themePath);
+            this.logger.sucesso(`  ${resultado.settingsSections} seção(ões) Rook UI injetadas`);
+        } else {
+            this.logger.sutil('[4/5] Pulando settings (--skip-settings)');
+        }
+
+        // Etapa 5: Layout
+        if (!options.skipLayout) {
+            this.logger.destaque('\n  [5/5] Configurando layout/theme.liquid...');
+            resultado.layoutPatched = await this._patchThemeLayout(themePath);
+            if (resultado.layoutPatched) {
+                this.logger.sucesso('  theme.liquid atualizado com sucesso');
+            } else {
+                this.logger.sutil('theme.liquid já contém o Rook UI, pulando');
+            }
+        } else {
+            this.logger.sutil('[5/5] Pulando layout (--skip-layout)');
+        }
+
+        return resultado;
+    }
+
+    /**
+     * Valida que o diretório é um tema Shopify.
+     *
+     * @param {string} themePath
+     * @returns {Promise<boolean>}
+     */
+    async validate(themePath) {
+        const indicators = [
+            'config/settings_schema.json',
+            'layout/theme.liquid',
+            'snippets',
+            'sections',
+            'templates',
+        ];
+
+        let found = 0;
+        for (const indicator of indicators) {
+            if (await fs.pathExists(path.join(themePath, indicator))) {
+                found++;
+            }
+        }
+
+        return found >= 3;
+    }
+
+    /**
+     * Detecta se o Rook UI já está instalado.
+     *
+     * @param {string} themePath
+     * @returns {Promise<boolean>}
+     */
+    async isAlreadyInstalled(themePath) {
+        const checks = [
+            path.join(themePath, 'snippets', 'rk-variables.liquid'),
+            path.join(themePath, 'assets', 'rk-framework-core.css'),
+        ];
+
+        for (const check of checks) {
+            if (await fs.pathExists(check)) {
+                return true;
+            }
+        }
+
+        // Verificar settings_schema.json
+        try {
+            const settingsPath = path.join(themePath, 'config', 'settings_schema.json');
+            if (await fs.pathExists(settingsPath)) {
+                const schema = JSON.parse(await fs.readFile(settingsPath, 'utf8'));
+                return schema.some(s => s.name && s.name.startsWith(RK_SECTION_PREFIX));
+            }
+        } catch {
+            // Ignora erro de leitura
+        }
+
+        return false;
+    }
+
+    /**
+     * Detecta informações do tema (nome e versão).
+     *
+     * @param {string} themePath
+     * @returns {Promise<{name: string, version: string}|null>}
+     */
+    async detectThemeInfo(themePath) {
+        try {
+            const settingsPath = path.join(themePath, 'config', 'settings_schema.json');
+            const schema = JSON.parse(await fs.readFile(settingsPath, 'utf8'));
+            const themeInfo = schema.find(s => s.name === 'theme_info');
+
+            if (themeInfo) {
+                return {
+                    name: themeInfo.theme_name || 'Desconhecido',
+                    version: themeInfo.theme_version || '?',
+                };
+            }
+        } catch {
+            // Ignora
+        }
+        return null;
+    }
+
+    /**
+     * Copia todos os arquivos de um diretório para outro.
+     *
+     * @param {string} srcDir - Diretório de origem
+     * @param {string} destDir - Diretório de destino
+     * @param {boolean} force - Sobrescrever sem perguntar
+     * @param {Function} [filter] - Função de filtro (recebe filename, retorna boolean)
+     * @returns {Promise<number>} Quantidade de arquivos copiados
+     * @private
+     */
+    async _copyDir(srcDir, destDir, force = false, filter = null) {
+        if (!await fs.pathExists(srcDir)) {
+            return 0;
+        }
+
+        await fs.ensureDir(destDir);
+
+        const files = await fs.readdir(srcDir);
+        let count = 0;
+
+        for (const file of files) {
+            if (filter && !filter(file)) {
+                continue;
+            }
+
+            const srcFile = path.join(srcDir, file);
+            const destFile = path.join(destDir, file);
+            const stat = await fs.stat(srcFile);
+
+            if (!stat.isFile()) {
+                continue;
+            }
+
+            // Se o arquivo já existe e não é force, pular
+            if (!force && await fs.pathExists(destFile)) {
+                // Em modo não-force, sobrescreve mesmo assim para garantir atualização
+                // O ConflictResolver é usado no nível do comando, não aqui
+            }
+
+            await fs.copy(srcFile, destFile, { overwrite: true });
+            this.logger.sutil(`→ ${path.basename(destDir)}/${file}`);
+            count++;
+        }
+
+        return count;
+    }
+
+    /**
+     * Injeta as seções do Rook UI no settings_schema.json do tema.
+     *
+     * @param {string} themePath
+     * @returns {Promise<number>} Quantidade de seções injetadas
+     * @private
+     */
+    async _injectSettings(themePath) {
+        const settingsPath = path.join(themePath, 'config', 'settings_schema.json');
+        const rkSettingsPath = path.join(FRAMEWORK_DIR, 'config', 'rk-settings_schema.json');
+
+        if (!await fs.pathExists(settingsPath)) {
+            this.logger.aviso('settings_schema.json não encontrado, pulando injeção de settings');
+            return 0;
+        }
+
+        // Backup
+        const backupPath = settingsPath + '.rk-backup';
+        await fs.copy(settingsPath, backupPath, { overwrite: true });
+        this.logger.sutil(`Backup criado: settings_schema.json.rk-backup`);
+
+        try {
+            // Ler ambos os arquivos
+            let schema = JSON.parse(await fs.readFile(settingsPath, 'utf8'));
+            const rkSections = JSON.parse(await fs.readFile(rkSettingsPath, 'utf8'));
+
+            // Remover seções Rook UI existentes (para atualização limpa)
+            schema = schema.filter(s => !s.name || !s.name.startsWith(RK_SECTION_PREFIX));
+
+            // Inserir novas seções no final
+            schema.push(...rkSections);
+
+            // Salvar
+            await fs.writeFile(settingsPath, JSON.stringify(schema, null, 2), 'utf8');
+
+            // Validar JSON resultante
+            JSON.parse(await fs.readFile(settingsPath, 'utf8'));
+
+            // Log das seções inseridas
+            for (const section of rkSections) {
+                const settingsCount = section.settings?.filter(s => s.id).length || 0;
+                this.logger.sutil(`→ ${section.name} (${settingsCount} settings)`);
+            }
+
+            return rkSections.length;
+        } catch (erro) {
+            // Restaurar backup em caso de erro
+            this.logger.erro(`Erro ao injetar settings: ${erro.message}`);
+            this.logger.info('Restaurando backup...');
+            await fs.copy(backupPath, settingsPath, { overwrite: true });
+            throw erro;
+        }
+    }
+
+    /**
+     * Modifica o layout/theme.liquid para carregar o framework.
+     *
+     * @param {string} themePath
+     * @returns {Promise<boolean>} true se modificou, false se já existia
+     * @private
+     */
+    async _patchThemeLayout(themePath) {
+        const layoutPath = path.join(themePath, 'layout', 'theme.liquid');
+
+        if (!await fs.pathExists(layoutPath)) {
+            this.logger.aviso('layout/theme.liquid não encontrado, pulando patch');
+            return false;
+        }
+
+        // Backup
+        const backupPath = layoutPath + '.rk-backup';
+        await fs.copy(layoutPath, backupPath, { overwrite: true });
+        this.logger.sutil(`Backup criado: theme.liquid.rk-backup`);
+
+        let content = await fs.readFile(layoutPath, 'utf8');
+
+        // Detectar instalação prévia
+        if (content.includes(RK_MARKER)) {
+            // Remover blocos antigos para reinstalar limpo
+            content = this._removeExistingRkBlocks(content);
+        }
+
+        // Injetar no <head> — antes de {{ content_for_header }}
+        const headAnchor = '{{ content_for_header }}';
+        const headFallback = '</head>';
+
+        if (content.includes(headAnchor)) {
+            content = content.replace(headAnchor, HEAD_INJECTION + '\n\n    ' + headAnchor);
+            this.logger.sutil('→ Injetado no <head>: rk-variables, tokens, core CSS');
+        } else if (content.includes(headFallback)) {
+            content = content.replace(headFallback, HEAD_INJECTION + '\n  ' + headFallback);
+            this.logger.sutil('→ Injetado antes de </head> (fallback)');
+        } else {
+            this.logger.aviso('Não foi possível encontrar ponto de injeção no <head>');
+        }
+
+        // Injetar antes do </body>
+        const bodyAnchor = '</body>';
+
+        if (content.includes(bodyAnchor)) {
+            content = content.replace(bodyAnchor, BODY_INJECTION + '\n  ' + bodyAnchor);
+            this.logger.sutil('→ Injetado antes do </body>: rk-scripts');
+        } else {
+            this.logger.aviso('Não foi possível encontrar </body> no theme.liquid');
+        }
+
+        await fs.writeFile(layoutPath, content, 'utf8');
+        return true;
+    }
+
+    /**
+     * Remove blocos Rook UI existentes do theme.liquid para reinstalação limpa.
+     *
+     * @param {string} content - Conteúdo do theme.liquid
+     * @returns {string} Conteúdo limpo
+     * @private
+     */
+    _removeExistingRkBlocks(content) {
+        // Remover bloco do <head>
+        const headBlockRegex = /\n?\s*\{%-?\s*comment\s*-?%\}\s*Rook UI Core Framework\s*\{%-?\s*endcomment\s*-?%\}[\s\S]*?\{%-?\s*render\s+'rk-external-assets'[^%]*%\}\s*\n?/g;
+        content = content.replace(headBlockRegex, '\n');
+
+        // Remover bloco do </body>
+        const bodyBlockRegex = /\n?\s*\{%-?\s*comment\s*-?%\}\s*Rook UI Core Framework — Scripts\s*\{%-?\s*endcomment\s*-?%\}[\s\S]*?\{%-?\s*render\s+'rk-scripts'\s*-?%\}\s*\n?/g;
+        content = content.replace(bodyBlockRegex, '\n');
+
+        return content;
+    }
+}

package/src/templates/block.liquid.txt

@@ -58,18 +58,3 @@
 }
 {% endschema %}
 
-{% javascript %}
-  class {{PascalName}}Block extends HTMLElement {
-    connectedCallback() {
-      this.addEventListener('click', this.handleClick.bind(this));
-    }
-
-    handleClick() {
-      console.log('Block clicked:', this.dataset.blockId);
-    }
-  }
-
-  if (!customElements.get('{{kebabName}}-block')) {
-    customElements.define('{{kebabName}}-block', {{PascalName}}Block);
-  }
-{% endjavascript %}