forlogic-core 1.11.3 → 1.11.5

package/README.md

@@ -210,15 +210,13 @@ CREATE INDEX idx_processes_title ON processes.processes(title);
 
 A biblioteca `forlogic-core` exporta configurações padronizadas de Vite e Tailwind para garantir consistência de segurança e estilo em todos os projetos.
 
-### 📦 Instalação
-
-As configurações estão disponíveis via subpaths do pacote:
+### 📦 Imports Disponíveis
 
 ```typescript
-// Configurações Vite
+// Configurações Vite (headers de segurança, CSP, CORS)
 import { createSecurityHeadersPlugin, createForlogicViteConfig } from 'forlogic-core/vite';
 
-// Preset Tailwind
+// Preset Tailwind (cores, animações, gradientes)
 import { forlogicTailwindPreset, forlogicContentPaths } from 'forlogic-core/tailwind';
 ```
 
@@ -258,64 +256,54 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import { createSecurityHeadersPlugin } from 'forlogic-core/vite';
 
-export default defineConfig(({ mode }) => {
-  const isDev = mode === 'development';
-
-  return {
-    plugins: [
-      react(),
-      createSecurityHeadersPlugin(isDev, {
-        // URLs do Supabase para permitir conexões
-        supabaseUrls: [
-          'https://seu-projeto-dev.supabase.co',
-          'https://seu-projeto-prod.supabase.co',
-        ],
-        
-        // Origens confiáveis adicionais para CORS
-        trustedOrigins: [
-          'https://meu-app.com',
-          'https://admin.meu-app.com',
-        ],
-        
-        // APIs externas para connect-src
-        additionalConnectSrc: [
-          'https://api.exemplo.com',
-          'wss://websocket.exemplo.com',
-        ],
-        
-        // CDNs de scripts adicionais
-        additionalScriptSrc: [
-          'https://cdn.analytics.com',
-        ],
-        
-        // CDNs de estilos adicionais
-        additionalStyleSrc: [
-          'https://fonts.custom.com',
-        ],
-        
-        // URI para reportar violações CSP
-        cspReportUri: 'https://seu-projeto.supabase.co/functions/v1/csp-report',
-        
-        // Habilitar Trusted Types em produção (default: true)
-        enableTrustedTypes: true,
-        
-        // Upgrade HTTP para HTTPS em produção (default: true)
-        upgradeInsecureRequests: true,
-      }),
-    ],
-  };
-});
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    react(),
+    createSecurityHeadersPlugin(mode === 'development', {
+      // URLs do Supabase para permitir conexões
+      supabaseUrls: [
+        'https://seu-projeto-dev.supabase.co',
+        'https://seu-projeto-prod.supabase.co',
+      ],
+      
+      // Origens confiáveis adicionais para CORS
+      trustedOrigins: [
+        'https://meu-app.com',
+        'https://admin.meu-app.com',
+      ],
+      
+      // APIs externas para connect-src
+      additionalConnectSrc: [
+        'https://api.exemplo.com',
+        'wss://websocket.exemplo.com',
+      ],
+      
+      // CDNs de scripts/estilos/fontes adicionais
+      additionalScriptSrc: ['https://cdn.analytics.com'],
+      additionalStyleSrc: ['https://fonts.custom.com'],
+      additionalFontSrc: ['https://fonts.gstatic.com'],
+      
+      // URI para reportar violações CSP
+      cspReportUri: 'https://seu-projeto.supabase.co/functions/v1/csp-report',
+      
+      // Opções de produção (defaults: true)
+      enableTrustedTypes: true,
+      upgradeInsecureRequests: true,
+    }),
+  ],
+}));
 ```
 
 #### Opções do Plugin
 
 | Opção | Tipo | Padrão | Descrição |
 |-------|------|--------|-----------|
-| `supabaseUrls` | `string[]` | `[]` | URLs do Supabase para permitir conexões |
+| `supabaseUrls` | `string[]` | `[]` | URLs do Supabase permitidas |
 | `trustedOrigins` | `string[]` | `[]` | Origens confiáveis adicionais para CORS |
 | `additionalScriptSrc` | `string[]` | `[]` | Fontes de script adicionais para CSP |
 | `additionalStyleSrc` | `string[]` | `[]` | Fontes de estilo adicionais para CSP |
 | `additionalConnectSrc` | `string[]` | `[]` | APIs/WebSockets adicionais para CSP |
+| `additionalFontSrc` | `string[]` | `[]` | Fontes de font adicionais para CSP |
 | `cspReportUri` | `string` | - | URI para relatório de violações CSP |
 | `enableTrustedTypes` | `boolean` | `true` | Habilitar Trusted Types em produção |
 | `upgradeInsecureRequests` | `boolean` | `true` | Upgrade HTTP→HTTPS em produção |
@@ -324,44 +312,135 @@ export default defineConfig(({ mode }) => {
 
 ### 🏗️ Factory de Configuração Vite (Opcional)
 
-Para projetos que desejam usar a configuração completa padronizada:
+Para projetos que desejam usar a configuração padronizada com segurança:
 
 ```typescript
 // vite.config.ts
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
+import path from 'path';
 import { createForlogicViteConfig } from 'forlogic-core/vite';
 
-// Cria configuração com opções personalizadas
 const forlogicConfig = createForlogicViteConfig({
-  srcAlias: '@',           // Alias para ./src
-  libAlias: 'forlogic-core', // Alias para ./lib (desenvolvimento local)
   security: {
     supabaseUrls: ['https://seu-projeto.supabase.co'],
     trustedOrigins: ['https://meu-app.com'],
   },
-  server: {
-    host: '::',
-    port: 8080,
-  },
-  build: {
-    chunkSizeWarningLimit: 4000,
-  },
+  server: { host: '::', port: 8080 },
+  build: { chunkSizeWarningLimit: 4000 },
 });
 
 export default defineConfig(({ mode }) => {
-  const config = forlogicConfig(mode === 'development');
+  const isDev = mode === 'development';
+  const baseConfig = forlogicConfig(isDev);
   
   return {
-    ...config,
+    ...baseConfig,
+    plugins: [react(), ...baseConfig.plugins],
+    // IMPORTANTE: resolve.alias deve usar caminhos absolutos
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      },
+    },
+  };
+});
+```
+
+> **⚠️ IMPORTANTE**: A factory **não** configura `resolve.alias` porque caminhos relativos não funcionam corretamente no build. Cada projeto deve definir seus próprios aliases com `path.resolve(__dirname, './caminho')` para garantir caminhos absolutos.
+
+---
+
+### 📋 Template Completo para Projetos Consumidores
+
+Copie e adapte este template para novos projetos:
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
+import { createSecurityHeadersPlugin } from 'forlogic-core/vite';
+
+export default defineConfig(({ mode }) => {
+  const isDev = mode === 'development';
+
+  return {
+    server: {
+      host: '::',
+      port: 8080,
+    },
+    
+    // Força re-bundle quando atualizar forlogic-core
+    optimizeDeps: {
+      force: true,
+    },
+    
     plugins: [
       react(),
-      ...config.plugins,
+      // Headers de segurança (CSP, CORS, etc.)
+      createSecurityHeadersPlugin(isDev, {
+        supabaseUrls: [
+          'https://SEU_PROJETO.supabase.co',
+        ],
+        additionalConnectSrc: [
+          'https://*.qualiex.com',
+        ],
+        // Opcional: URI para relatório de violações CSP
+        cspReportUri: isDev
+          ? 'https://SEU_PROJETO_DEV.supabase.co/functions/v1/csp-report'
+          : 'https://SEU_PROJETO_PROD.supabase.co/functions/v1/csp-report',
+      }),
     ],
+    
+    // CRÍTICO: Aliases devem usar caminhos absolutos
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      },
+    },
+    
+    publicDir: false,
+    
+    esbuild: {
+      sourcemap: true,
+      target: 'es2020',
+    },
+    
+    build: {
+      chunkSizeWarningLimit: 4000,
+    },
   };
 });
 ```
 
+#### Checklist de Configuração
+
+```markdown
+- [ ] Substituiu `SEU_PROJETO` pelas URLs do Supabase
+- [ ] Adicionou origens confiáveis em `additionalConnectSrc` se necessário
+- [ ] Verificou que `resolve.alias` usa `path.resolve(__dirname, ...)`
+- [ ] Reiniciou o servidor após modificar o arquivo
+```
+
+---
+
+### 🔄 Forçar Re-bundle de Dependências
+
+Se você atualizar a `forlogic-core` e as mudanças não aparecerem no preview:
+
+```typescript
+// vite.config.ts
+export default defineConfig(({ mode }) => ({
+  optimizeDeps: {
+    force: true, // Força re-otimização a cada restart do dev server
+  },
+  // ...
+}));
+```
+
+> **⚠️ IMPORTANTE**: Após adicionar `force: true`, reinicie o servidor completamente (pare e inicie novamente).
+
 ---
 
 ### 🎨 Preset Tailwind CSS
@@ -751,6 +830,48 @@ Se você não fornecer um `queryClient`, o `CoreProviders` cria um com as seguin
 
 ---
 
+## 🛠️ CLI: Sincronização de Documentação
+
+O `forlogic-core` disponibiliza um comando CLI para sincronizar a documentação centralizada do banco de dados para projetos consumidores.
+
+### Uso
+
+```bash
+# Via npx (recomendado)
+npx forlogic-core-pull-docs
+
+# Ou adicione ao package.json do seu projeto:
+{
+  "scripts": {
+    "pull-docs": "forlogic-core-pull-docs"
+  }
+}
+
+# E execute:
+npm run pull-docs
+```
+
+### O que é sincronizado
+
+| Arquivo | Descrição |
+|---------|-----------|
+| `docs/FORLOGIC_CORE_README.md` | README completo da biblioteca |
+| `docs/DESIGN_SYSTEM.md` | Documentação do Design System |
+| `docs/KNOWLEDGE.md` | Knowledge base para IA/Lovable |
+
+### Benefícios
+
+- ✅ **Centralizado**: Documentação mantida em um único lugar (banco de dados)
+- ✅ **Sempre atualizado**: Execute o comando para obter a versão mais recente
+- ✅ **Sem cópia manual**: Não precisa copiar arquivos entre projetos
+- ✅ **Ideal para Custom Knowledge**: Use os arquivos gerados no Lovable
+
+### Requisitos
+
+O comando usa credenciais públicas do Supabase do forlogic-core e não requer configuração adicional.
+
+---
+
 <!-- AUTO_GENERATED_START -->
 
 ### 📚 Estatísticas da Documentação

package/dist/README.md

@@ -210,15 +210,13 @@ CREATE INDEX idx_processes_title ON processes.processes(title);
 
 A biblioteca `forlogic-core` exporta configurações padronizadas de Vite e Tailwind para garantir consistência de segurança e estilo em todos os projetos.
 
-### 📦 Instalação
-
-As configurações estão disponíveis via subpaths do pacote:
+### 📦 Imports Disponíveis
 
 ```typescript
-// Configurações Vite
+// Configurações Vite (headers de segurança, CSP, CORS)
 import { createSecurityHeadersPlugin, createForlogicViteConfig } from 'forlogic-core/vite';
 
-// Preset Tailwind
+// Preset Tailwind (cores, animações, gradientes)
 import { forlogicTailwindPreset, forlogicContentPaths } from 'forlogic-core/tailwind';
 ```
 
@@ -258,64 +256,54 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import { createSecurityHeadersPlugin } from 'forlogic-core/vite';
 
-export default defineConfig(({ mode }) => {
-  const isDev = mode === 'development';
-
-  return {
-    plugins: [
-      react(),
-      createSecurityHeadersPlugin(isDev, {
-        // URLs do Supabase para permitir conexões
-        supabaseUrls: [
-          'https://seu-projeto-dev.supabase.co',
-          'https://seu-projeto-prod.supabase.co',
-        ],
-        
-        // Origens confiáveis adicionais para CORS
-        trustedOrigins: [
-          'https://meu-app.com',
-          'https://admin.meu-app.com',
-        ],
-        
-        // APIs externas para connect-src
-        additionalConnectSrc: [
-          'https://api.exemplo.com',
-          'wss://websocket.exemplo.com',
-        ],
-        
-        // CDNs de scripts adicionais
-        additionalScriptSrc: [
-          'https://cdn.analytics.com',
-        ],
-        
-        // CDNs de estilos adicionais
-        additionalStyleSrc: [
-          'https://fonts.custom.com',
-        ],
-        
-        // URI para reportar violações CSP
-        cspReportUri: 'https://seu-projeto.supabase.co/functions/v1/csp-report',
-        
-        // Habilitar Trusted Types em produção (default: true)
-        enableTrustedTypes: true,
-        
-        // Upgrade HTTP para HTTPS em produção (default: true)
-        upgradeInsecureRequests: true,
-      }),
-    ],
-  };
-});
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    react(),
+    createSecurityHeadersPlugin(mode === 'development', {
+      // URLs do Supabase para permitir conexões
+      supabaseUrls: [
+        'https://seu-projeto-dev.supabase.co',
+        'https://seu-projeto-prod.supabase.co',
+      ],
+      
+      // Origens confiáveis adicionais para CORS
+      trustedOrigins: [
+        'https://meu-app.com',
+        'https://admin.meu-app.com',
+      ],
+      
+      // APIs externas para connect-src
+      additionalConnectSrc: [
+        'https://api.exemplo.com',
+        'wss://websocket.exemplo.com',
+      ],
+      
+      // CDNs de scripts/estilos/fontes adicionais
+      additionalScriptSrc: ['https://cdn.analytics.com'],
+      additionalStyleSrc: ['https://fonts.custom.com'],
+      additionalFontSrc: ['https://fonts.gstatic.com'],
+      
+      // URI para reportar violações CSP
+      cspReportUri: 'https://seu-projeto.supabase.co/functions/v1/csp-report',
+      
+      // Opções de produção (defaults: true)
+      enableTrustedTypes: true,
+      upgradeInsecureRequests: true,
+    }),
+  ],
+}));
 ```
 
 #### Opções do Plugin
 
 | Opção | Tipo | Padrão | Descrição |
 |-------|------|--------|-----------|
-| `supabaseUrls` | `string[]` | `[]` | URLs do Supabase para permitir conexões |
+| `supabaseUrls` | `string[]` | `[]` | URLs do Supabase permitidas |
 | `trustedOrigins` | `string[]` | `[]` | Origens confiáveis adicionais para CORS |
 | `additionalScriptSrc` | `string[]` | `[]` | Fontes de script adicionais para CSP |
 | `additionalStyleSrc` | `string[]` | `[]` | Fontes de estilo adicionais para CSP |
 | `additionalConnectSrc` | `string[]` | `[]` | APIs/WebSockets adicionais para CSP |
+| `additionalFontSrc` | `string[]` | `[]` | Fontes de font adicionais para CSP |
 | `cspReportUri` | `string` | - | URI para relatório de violações CSP |
 | `enableTrustedTypes` | `boolean` | `true` | Habilitar Trusted Types em produção |
 | `upgradeInsecureRequests` | `boolean` | `true` | Upgrade HTTP→HTTPS em produção |
@@ -324,44 +312,135 @@ export default defineConfig(({ mode }) => {
 
 ### 🏗️ Factory de Configuração Vite (Opcional)
 
-Para projetos que desejam usar a configuração completa padronizada:
+Para projetos que desejam usar a configuração padronizada com segurança:
 
 ```typescript
 // vite.config.ts
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
+import path from 'path';
 import { createForlogicViteConfig } from 'forlogic-core/vite';
 
-// Cria configuração com opções personalizadas
 const forlogicConfig = createForlogicViteConfig({
-  srcAlias: '@',           // Alias para ./src
-  libAlias: 'forlogic-core', // Alias para ./lib (desenvolvimento local)
   security: {
     supabaseUrls: ['https://seu-projeto.supabase.co'],
     trustedOrigins: ['https://meu-app.com'],
   },
-  server: {
-    host: '::',
-    port: 8080,
-  },
-  build: {
-    chunkSizeWarningLimit: 4000,
-  },
+  server: { host: '::', port: 8080 },
+  build: { chunkSizeWarningLimit: 4000 },
 });
 
 export default defineConfig(({ mode }) => {
-  const config = forlogicConfig(mode === 'development');
+  const isDev = mode === 'development';
+  const baseConfig = forlogicConfig(isDev);
   
   return {
-    ...config,
+    ...baseConfig,
+    plugins: [react(), ...baseConfig.plugins],
+    // IMPORTANTE: resolve.alias deve usar caminhos absolutos
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      },
+    },
+  };
+});
+```
+
+> **⚠️ IMPORTANTE**: A factory **não** configura `resolve.alias` porque caminhos relativos não funcionam corretamente no build. Cada projeto deve definir seus próprios aliases com `path.resolve(__dirname, './caminho')` para garantir caminhos absolutos.
+
+---
+
+### 📋 Template Completo para Projetos Consumidores
+
+Copie e adapte este template para novos projetos:
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
+import { createSecurityHeadersPlugin } from 'forlogic-core/vite';
+
+export default defineConfig(({ mode }) => {
+  const isDev = mode === 'development';
+
+  return {
+    server: {
+      host: '::',
+      port: 8080,
+    },
+    
+    // Força re-bundle quando atualizar forlogic-core
+    optimizeDeps: {
+      force: true,
+    },
+    
     plugins: [
       react(),
-      ...config.plugins,
+      // Headers de segurança (CSP, CORS, etc.)
+      createSecurityHeadersPlugin(isDev, {
+        supabaseUrls: [
+          'https://SEU_PROJETO.supabase.co',
+        ],
+        additionalConnectSrc: [
+          'https://*.qualiex.com',
+        ],
+        // Opcional: URI para relatório de violações CSP
+        cspReportUri: isDev
+          ? 'https://SEU_PROJETO_DEV.supabase.co/functions/v1/csp-report'
+          : 'https://SEU_PROJETO_PROD.supabase.co/functions/v1/csp-report',
+      }),
     ],
+    
+    // CRÍTICO: Aliases devem usar caminhos absolutos
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      },
+    },
+    
+    publicDir: false,
+    
+    esbuild: {
+      sourcemap: true,
+      target: 'es2020',
+    },
+    
+    build: {
+      chunkSizeWarningLimit: 4000,
+    },
   };
 });
 ```
 
+#### Checklist de Configuração
+
+```markdown
+- [ ] Substituiu `SEU_PROJETO` pelas URLs do Supabase
+- [ ] Adicionou origens confiáveis em `additionalConnectSrc` se necessário
+- [ ] Verificou que `resolve.alias` usa `path.resolve(__dirname, ...)`
+- [ ] Reiniciou o servidor após modificar o arquivo
+```
+
+---
+
+### 🔄 Forçar Re-bundle de Dependências
+
+Se você atualizar a `forlogic-core` e as mudanças não aparecerem no preview:
+
+```typescript
+// vite.config.ts
+export default defineConfig(({ mode }) => ({
+  optimizeDeps: {
+    force: true, // Força re-otimização a cada restart do dev server
+  },
+  // ...
+}));
+```
+
+> **⚠️ IMPORTANTE**: Após adicionar `force: true`, reinicie o servidor completamente (pare e inicie novamente).
+
 ---
 
 ### 🎨 Preset Tailwind CSS
@@ -751,82 +830,124 @@ Se você não fornecer um `queryClient`, o `CoreProviders` cria um com as seguin
 
 ---
 
-<!-- AUTO_GENERATED_START -->
-
-### 📚 Estatísticas da Documentação
-
-**49 Componentes UI** | **6 Tokens** | **2 Ferramentas CRUD**
-
----
-
-### 🎨 Fundamentos (Tokens)
-
-- [Colors Foundation](./docs/DESIGN_SYSTEM.md#colorsfoundation) - Sistema de cores completo com escalas neutras, de marca e funcionais.
-- [Radius](./docs/DESIGN_SYSTEM.md#radius) - Sistema de arredondamento de bordas para consistência visual.
-- [Shadows](./docs/DESIGN_SYSTEM.md#shadows) - Sistema de sombras e elevação para criar profundidade e hierarquia.
-- [Spacing](./docs/DESIGN_SYSTEM.md#spacing) - Escala de espaçamento consistente baseada em uma unidade base de 4px.
-- [Typography](./docs/DESIGN_SYSTEM.md#typographycomponent) - Componentes de tipografia para estilos de texto consistentes em toda a sua aplicação.
-- [Typography Foundation](./docs/DESIGN_SYSTEM.md#typographyfoundation) - Sistema tipográfico completo com Display, Headings, Body e mais.
-
-### 🧩 Componentes UI
-
-- [Accordion](./docs/DESIGN_SYSTEM.md#accordion) - Um conjunto de cabeçalhos interativos empilhados verticalmente, onde cada um revela uma seção de conteúdo.
-- [Action Button](./docs/DESIGN_SYSTEM.md#actionbutton) - Botão compacto otimizado para ações em linhas de tabela e menus dropdown.
-- [Alert](./docs/DESIGN_SYSTEM.md#alert) - Exibe uma mensagem de destaque para chamar a atenção do usuário.
-- [Aspect Ratio](./docs/DESIGN_SYSTEM.md#aspectratio) - Exibe conteúdo dentro de uma proporção desejada.
-- [Avatar](./docs/DESIGN_SYSTEM.md#avatar) - Um elemento de imagem com fallback para representar o usuário.
-- [Badge](./docs/DESIGN_SYSTEM.md#badge) - Exibe um badge ou um componente que se parece com um badge.
-- [Breadcrumb](./docs/DESIGN_SYSTEM.md#breadcrumb) - Exibe o caminho até o recurso atual usando uma hierarquia de links.
-- [Button](./docs/DESIGN_SYSTEM.md#button) - Componente de botão com variantes semânticas, tamanhos e estados. Use para ações primárias, secundárias e destrutivas.
-- [Button Group](./docs/DESIGN_SYSTEM.md#buttongroup) - Agrupa botões relacionados com espaçamento e bordas apropriados.
-- [Calendar & Date Picker](./docs/DESIGN_SYSTEM.md#calendar) - Componentes para seleção de datas. O Calendar exibe um calendário interativo, enquanto o Date Picker combina um campo de input com o calendário em um popover.
-- [Card](./docs/DESIGN_SYSTEM.md#card) - Exibe um card com cabeçalho, conteúdo e rodapé.
-- [Carousel](./docs/DESIGN_SYSTEM.md#carousel) - Um componente de carrossel para alternar entre elementos. Nota: Este componente requer a biblioteca Embla Carousel que não está incluída no forlogic-core por padrão.
-- [Checkbox](./docs/DESIGN_SYSTEM.md#checkbox) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
-- [Collapsible](./docs/DESIGN_SYSTEM.md#collapsible) - Um componente interativo que expande/colapsa um painel.
-- [Color Picker](./docs/DESIGN_SYSTEM.md#colorpicker) - Seletor de cores com paleta predefinida e seletor customizado.
-- [Combobox](./docs/DESIGN_SYSTEM.md#combobox) - Componente versátil para seleção única ou múltipla com busca inteligente. Combina Popover e Command para autocomplete.
-- [Context Menu](./docs/DESIGN_SYSTEM.md#contextmenu) - Exibe um menu ao usuário — como um conjunto de ações ou funções — acionado por um clique com o botão direito do mouse.
-- [Dialog](./docs/DESIGN_SYSTEM.md#dialog) - Uma janela sobreposta à janela principal ou a outra janela de diálogo, tornando o conteúdo abaixo inerte. Inclui variações para seleção, tabelas e formulários.
-- [Dropdown Menu](./docs/DESIGN_SYSTEM.md#dropdownmenu) - Exibe um menu ao usuário — como um conjunto de ações ou funções — acionado por um botão ou elemento interativo.
-- [Empty State](./docs/DESIGN_SYSTEM.md#emptystate) - Componente para exibir estados vazios com ícone, mensagem e ação opcional.
-- [Form](./docs/DESIGN_SYSTEM.md#form) - Construindo formulários com React Hook Form e Zod.
-- [Grid](./docs/DESIGN_SYSTEM.md#grid) - Sistema de grid responsivo com configuração simplificada de colunas e espaçamento.
-- [Icon Picker](./docs/DESIGN_SYSTEM.md#iconpicker) - Seletor de ícones da biblioteca Lucide React com busca integrada.
-- [Input](./docs/DESIGN_SYSTEM.md#input) - Exibe um campo de entrada de texto.
-- [Input Group](./docs/DESIGN_SYSTEM.md#inputgroup) - Agrupe inputs com addons de prefixo, sufixo, ícones, botões, tooltips e dropdowns. Segue a API oficial do shadcn/ui.
-- [Input OTP](./docs/DESIGN_SYSTEM.md#inputotp) - Accessible one-time password component with customizable number of inputs. Available in the UI library but not exported from forlogic-core.
-- [Label](./docs/DESIGN_SYSTEM.md#label) - Renderiza uma label acessível associada a controles.
-- [Loading State](./docs/DESIGN_SYSTEM.md#loadingstate) - Componente para gerenciar estados de loading de forma declarativa com dois tipos: spinner e overlay.
-- [Native Select](./docs/DESIGN_SYSTEM.md#nativeselect) - Elemento select nativo do HTML com estilização.
-- [Pagination](./docs/DESIGN_SYSTEM.md#pagination) - Barra de paginação completa com seletor de itens por página e controles de navegação.
-- [Progress](./docs/DESIGN_SYSTEM.md#progress) - Exibe um indicador mostrando o progresso de conclusão de uma tarefa, tipicamente exibido como uma barra de progresso.
-- [Radio Group](./docs/DESIGN_SYSTEM.md#radiogroup) - Um conjunto de botões marcáveis—conhecidos como botões de rádio—onde apenas um pode ser marcado por vez.
-- [Resizable](./docs/DESIGN_SYSTEM.md#resizable) - Grupos de painéis redimensionáveis e layouts acessíveis com suporte a teclado. Construído sobre react-resizable-panels.
-- [Scroll Area](./docs/DESIGN_SYSTEM.md#scrollarea) - Aprimora a funcionalidade de rolagem nativa para estilização personalizada e cross-browser.
-- [Searchbar](./docs/DESIGN_SYSTEM.md#searchbar) - Campo de busca com ícone de pesquisa integrado e botão de limpar opcional. Otimizado para experiências de busca em toda a aplicação.
-- [Select](./docs/DESIGN_SYSTEM.md#select) - Exibe uma lista de opções para o usuário escolher—acionada por um botão.
-- [Separator](./docs/DESIGN_SYSTEM.md#separator) - Separa visual ou semanticamente o conteúdo.
-- [Sheet](./docs/DESIGN_SYSTEM.md#sheet) - Estende o componente Dialog para exibir conteúdo que complementa o conteúdo principal da tela.
-- [Skeleton](./docs/DESIGN_SYSTEM.md#skeleton) - Componente de placeholder para estados de carregamento. Inclui variantes pré-configuradas para tabelas, cards, formulários e mais.
-- [Slider](./docs/DESIGN_SYSTEM.md#slider) - Um input onde o usuário seleciona um valor dentro de um intervalo determinado.
-- [Spinner](./docs/DESIGN_SYSTEM.md#spinner) - Um componente de spinner de carregamento para indicar estado de carregamento.
-- [Stack](./docs/DESIGN_SYSTEM.md#stack) - Layout de pilha flexível com controle de direção, espaçamento, alinhamento e justificação.
-- [Switch](./docs/DESIGN_SYSTEM.md#switch) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
-- [Tab Page Layout](./docs/DESIGN_SYSTEM.md#tabpagelayout) - Layout padronizado para páginas dentro de tabs com header, descrição, ações e conteúdo scrollável.
-- [Table](./docs/DESIGN_SYSTEM.md#table) - Uma tabela semântica para exibir dados tabulares.
-- [Tabs](./docs/DESIGN_SYSTEM.md#tabs) - Um conjunto de seções de conteúdo em camadas—conhecidas como painéis de abas—que são exibidas uma de cada vez.
-- [Textarea](./docs/DESIGN_SYSTEM.md#textarea) - Exibe um textarea de formulário ou um componente que se parece com um textarea.
-- [Toast](./docs/DESIGN_SYSTEM.md#toast) - Componente de notificação toast usando Sonner. Exibe mensagens temporárias para feedback de ações do usuário.
-- [Toggle](./docs/DESIGN_SYSTEM.md#toggle) - Botões de dois estados que podem estar ligados ou desligados, individualmente ou em grupo.
-
-### 🚀 Sistema CRUD
-
-- [CRUD System](./docs/DESIGN_SYSTEM.md#crudsystem) - Sistema completo para criação rápida de interfaces CRUD com validação, busca, paginação e muito mais.
-- [Wizard Form](./docs/DESIGN_SYSTEM.md#wizardform) - Formulário multi-etapas com validação, navegação entre seções e indicadores de progresso.
-
----
-
-> 📘 **Documentação Completa**: Para ver detalhes de props, exemplos de uso e acessibilidade de cada componente, consulte o [Design System Completo](./docs/DESIGN_SYSTEM.md).
-
+## 🛠️ CLI: Sincronização de Documentação
+
+O `forlogic-core` disponibiliza um comando CLI para sincronizar a documentação centralizada do banco de dados para projetos consumidores.
+
+### Uso
+
+```bash
+# Via npx (recomendado)
+npx forlogic-core-pull-docs
+
+# Ou adicione ao package.json do seu projeto:
+{
+  "scripts": {
+    "pull-docs": "forlogic-core-pull-docs"
+  }
+}
+
+# E execute:
+npm run pull-docs
+```
+
+### O que é sincronizado
+
+| Arquivo | Descrição |
+|---------|-----------|
+| `docs/FORLOGIC_CORE_README.md` | README completo da biblioteca |
+| `docs/DESIGN_SYSTEM.md` | Documentação do Design System |
+| `docs/KNOWLEDGE.md` | Knowledge base para IA/Lovable |
+
+### Benefícios
+
+- ✅ **Centralizado**: Documentação mantida em um único lugar (banco de dados)
+- ✅ **Sempre atualizado**: Execute o comando para obter a versão mais recente
+- ✅ **Sem cópia manual**: Não precisa copiar arquivos entre projetos
+- ✅ **Ideal para Custom Knowledge**: Use os arquivos gerados no Lovable
+
+### Requisitos
+
+O comando usa credenciais públicas do Supabase do forlogic-core e não requer configuração adicional.
+
+---
+
+<!-- AUTO_GENERATED_START -->
+
+### 📚 Estatísticas da Documentação
+
+**49 Componentes UI** | **6 Tokens** | **2 Ferramentas CRUD**
+
+---
+
+### 🎨 Fundamentos (Tokens)
+
+- [Colors Foundation](./docs/DESIGN_SYSTEM.md#colorsfoundation) - Sistema de cores completo com escalas neutras, de marca e funcionais.
+- [Radius](./docs/DESIGN_SYSTEM.md#radius) - Sistema de arredondamento de bordas para consistência visual.
+- [Shadows](./docs/DESIGN_SYSTEM.md#shadows) - Sistema de sombras e elevação para criar profundidade e hierarquia.
+- [Spacing](./docs/DESIGN_SYSTEM.md#spacing) - Escala de espaçamento consistente baseada em uma unidade base de 4px.
+- [Typography](./docs/DESIGN_SYSTEM.md#typographycomponent) - Componentes de tipografia para estilos de texto consistentes em toda a sua aplicação.
+- [Typography Foundation](./docs/DESIGN_SYSTEM.md#typographyfoundation) - Sistema tipográfico completo com Display, Headings, Body e mais.
+
+### 🧩 Componentes UI
+
+- [Accordion](./docs/DESIGN_SYSTEM.md#accordion) - Um conjunto de cabeçalhos interativos empilhados verticalmente, onde cada um revela uma seção de conteúdo.
+- [Action Button](./docs/DESIGN_SYSTEM.md#actionbutton) - Botão compacto otimizado para ações em linhas de tabela e menus dropdown.
+- [Alert](./docs/DESIGN_SYSTEM.md#alert) - Exibe uma mensagem de destaque para chamar a atenção do usuário.
+- [Aspect Ratio](./docs/DESIGN_SYSTEM.md#aspectratio) - Exibe conteúdo dentro de uma proporção desejada.
+- [Avatar](./docs/DESIGN_SYSTEM.md#avatar) - Um elemento de imagem com fallback para representar o usuário.
+- [Badge](./docs/DESIGN_SYSTEM.md#badge) - Exibe um badge ou um componente que se parece com um badge.
+- [Breadcrumb](./docs/DESIGN_SYSTEM.md#breadcrumb) - Exibe o caminho até o recurso atual usando uma hierarquia de links.
+- [Button](./docs/DESIGN_SYSTEM.md#button) - Componente de botão com variantes semânticas, tamanhos e estados. Use para ações primárias, secundárias e destrutivas.
+- [Button Group](./docs/DESIGN_SYSTEM.md#buttongroup) - Agrupa botões relacionados com espaçamento e bordas apropriados.
+- [Calendar & Date Picker](./docs/DESIGN_SYSTEM.md#calendar) - Componentes para seleção de datas. O Calendar exibe um calendário interativo, enquanto o Date Picker combina um campo de input com o calendário em um popover.
+- [Card](./docs/DESIGN_SYSTEM.md#card) - Exibe um card com cabeçalho, conteúdo e rodapé.
+- [Carousel](./docs/DESIGN_SYSTEM.md#carousel) - Um componente de carrossel para alternar entre elementos. Nota: Este componente requer a biblioteca Embla Carousel que não está incluída no forlogic-core por padrão.
+- [Checkbox](./docs/DESIGN_SYSTEM.md#checkbox) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
+- [Collapsible](./docs/DESIGN_SYSTEM.md#collapsible) - Um componente interativo que expande/colapsa um painel.
+- [Color Picker](./docs/DESIGN_SYSTEM.md#colorpicker) - Seletor de cores com paleta predefinida e seletor customizado.
+- [Combobox](./docs/DESIGN_SYSTEM.md#combobox) - Componente versátil para seleção única ou múltipla com busca inteligente. Combina Popover e Command para autocomplete.
+- [Context Menu](./docs/DESIGN_SYSTEM.md#contextmenu) - Exibe um menu ao usuário — como um conjunto de ações ou funções — acionado por um clique com o botão direito do mouse.
+- [Dialog](./docs/DESIGN_SYSTEM.md#dialog) - Uma janela sobreposta à janela principal ou a outra janela de diálogo, tornando o conteúdo abaixo inerte. Inclui variações para seleção, tabelas e formulários.
+- [Dropdown Menu](./docs/DESIGN_SYSTEM.md#dropdownmenu) - Exibe um menu ao usuário — como um conjunto de ações ou funções — acionado por um botão ou elemento interativo.
+- [Empty State](./docs/DESIGN_SYSTEM.md#emptystate) - Componente para exibir estados vazios com ícone, mensagem e ação opcional.
+- [Form](./docs/DESIGN_SYSTEM.md#form) - Construindo formulários com React Hook Form e Zod.
+- [Grid](./docs/DESIGN_SYSTEM.md#grid) - Sistema de grid responsivo com configuração simplificada de colunas e espaçamento.
+- [Icon Picker](./docs/DESIGN_SYSTEM.md#iconpicker) - Seletor de ícones da biblioteca Lucide React com busca integrada.
+- [Input](./docs/DESIGN_SYSTEM.md#input) - Exibe um campo de entrada de texto.
+- [Input Group](./docs/DESIGN_SYSTEM.md#inputgroup) - Agrupe inputs com addons de prefixo, sufixo, ícones, botões, tooltips e dropdowns. Segue a API oficial do shadcn/ui.
+- [Input OTP](./docs/DESIGN_SYSTEM.md#inputotp) - Accessible one-time password component with customizable number of inputs. Available in the UI library but not exported from forlogic-core.
+- [Label](./docs/DESIGN_SYSTEM.md#label) - Renderiza uma label acessível associada a controles.
+- [Loading State](./docs/DESIGN_SYSTEM.md#loadingstate) - Componente para gerenciar estados de loading de forma declarativa com dois tipos: spinner e overlay.
+- [Native Select](./docs/DESIGN_SYSTEM.md#nativeselect) - Elemento select nativo do HTML com estilização.
+- [Pagination](./docs/DESIGN_SYSTEM.md#pagination) - Barra de paginação completa com seletor de itens por página e controles de navegação.
+- [Progress](./docs/DESIGN_SYSTEM.md#progress) - Exibe um indicador mostrando o progresso de conclusão de uma tarefa, tipicamente exibido como uma barra de progresso.
+- [Radio Group](./docs/DESIGN_SYSTEM.md#radiogroup) - Um conjunto de botões marcáveis—conhecidos como botões de rádio—onde apenas um pode ser marcado por vez.
+- [Resizable](./docs/DESIGN_SYSTEM.md#resizable) - Grupos de painéis redimensionáveis e layouts acessíveis com suporte a teclado. Construído sobre react-resizable-panels.
+- [Scroll Area](./docs/DESIGN_SYSTEM.md#scrollarea) - Aprimora a funcionalidade de rolagem nativa para estilização personalizada e cross-browser.
+- [Searchbar](./docs/DESIGN_SYSTEM.md#searchbar) - Campo de busca com ícone de pesquisa integrado e botão de limpar opcional. Otimizado para experiências de busca em toda a aplicação.
+- [Select](./docs/DESIGN_SYSTEM.md#select) - Exibe uma lista de opções para o usuário escolher—acionada por um botão.
+- [Separator](./docs/DESIGN_SYSTEM.md#separator) - Separa visual ou semanticamente o conteúdo.
+- [Sheet](./docs/DESIGN_SYSTEM.md#sheet) - Estende o componente Dialog para exibir conteúdo que complementa o conteúdo principal da tela.
+- [Skeleton](./docs/DESIGN_SYSTEM.md#skeleton) - Componente de placeholder para estados de carregamento. Inclui variantes pré-configuradas para tabelas, cards, formulários e mais.
+- [Slider](./docs/DESIGN_SYSTEM.md#slider) - Um input onde o usuário seleciona um valor dentro de um intervalo determinado.
+- [Spinner](./docs/DESIGN_SYSTEM.md#spinner) - Um componente de spinner de carregamento para indicar estado de carregamento.
+- [Stack](./docs/DESIGN_SYSTEM.md#stack) - Layout de pilha flexível com controle de direção, espaçamento, alinhamento e justificação.
+- [Switch](./docs/DESIGN_SYSTEM.md#switch) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
+- [Tab Page Layout](./docs/DESIGN_SYSTEM.md#tabpagelayout) - Layout padronizado para páginas dentro de tabs com header, descrição, ações e conteúdo scrollável.
+- [Table](./docs/DESIGN_SYSTEM.md#table) - Uma tabela semântica para exibir dados tabulares.
+- [Tabs](./docs/DESIGN_SYSTEM.md#tabs) - Um conjunto de seções de conteúdo em camadas—conhecidas como painéis de abas—que são exibidas uma de cada vez.
+- [Textarea](./docs/DESIGN_SYSTEM.md#textarea) - Exibe um textarea de formulário ou um componente que se parece com um textarea.
+- [Toast](./docs/DESIGN_SYSTEM.md#toast) - Componente de notificação toast usando Sonner. Exibe mensagens temporárias para feedback de ações do usuário.
+- [Toggle](./docs/DESIGN_SYSTEM.md#toggle) - Botões de dois estados que podem estar ligados ou desligados, individualmente ou em grupo.
+
+### 🚀 Sistema CRUD
+
+- [CRUD System](./docs/DESIGN_SYSTEM.md#crudsystem) - Sistema completo para criação rápida de interfaces CRUD com validação, busca, paginação e muito mais.
+- [Wizard Form](./docs/DESIGN_SYSTEM.md#wizardform) - Formulário multi-etapas com validação, navegação entre seções e indicadores de progresso.
+
+---
+
+> 📘 **Documentação Completa**: Para ver detalhes de props, exemplos de uso e acessibilidade de cada componente, consulte o [Design System Completo](./docs/DESIGN_SYSTEM.md).
+
 <!-- AUTO_GENERATED_END -->

package/dist/bin/pull-docs.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+#!/usr/bin/env node
+import * as fs from 'fs';
+import * as path from 'path';
+import { createClient } from '@supabase/supabase-js';
+
+const FORLOGIC_CORE_SUPABASE_URL = "https://ccjfvpnndclajkleyqkc.supabase.co";
+const FORLOGIC_CORE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNjamZ2cG5uZGNsYWprbGV5cWtjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTA5NTQ1OTksImV4cCI6MjA2NjUzMDU5OX0.j7ASp7OYaR5oXfnVmK77VGNH-5hDa9JpzbAYJBUpfa8";
+const supabase = createClient(
+  FORLOGIC_CORE_SUPABASE_URL,
+  FORLOGIC_CORE_ANON_KEY
+);
+const DOCS_TO_SYNC = [
+  { type: "readme", outputFile: "docs/FORLOGIC_CORE_README.md" },
+  { type: "design_system", outputFile: "docs/DESIGN_SYSTEM.md" },
+  { type: "knowledge", outputFile: "docs/KNOWLEDGE.md" }
+];
+async function pullDocs() {
+  console.log("\u{1F4E5} Puxando documenta\xE7\xE3o do forlogic-core...\n");
+  let successCount = 0;
+  let errorCount = 0;
+  for (const doc of DOCS_TO_SYNC) {
+    try {
+      const { data, error } = await supabase.schema("common").from("documentation").select("content, updated_at").eq("type", doc.type).single();
+      if (error) {
+        console.error(`\u274C Erro ao buscar ${doc.type}:`, error.message);
+        errorCount++;
+        continue;
+      }
+      if (!data) {
+        console.warn(`\u26A0\uFE0F Documento '${doc.type}' n\xE3o encontrado no banco`);
+        errorCount++;
+        continue;
+      }
+      const outputPath = path.join(process.cwd(), doc.outputFile);
+      const outputDir = path.dirname(outputPath);
+      if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+      }
+      fs.writeFileSync(outputPath, data.content, "utf-8");
+      console.log(`\u2705 ${doc.type} \u2192 ${doc.outputFile}`);
+      console.log(`   \u{1F4CA} Tamanho: ${(data.content.length / 1024).toFixed(2)} KB`);
+      console.log(`   \u{1F550} \xDAltima atualiza\xE7\xE3o: ${data.updated_at}
+`);
+      successCount++;
+    } catch (err) {
+      console.error(`\u274C Erro ao processar ${doc.type}:`, err.message);
+      errorCount++;
+    }
+  }
+  console.log("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501");
+  console.log(`\u{1F389} Sincroniza\xE7\xE3o conclu\xEDda!`);
+  console.log(`   \u2705 Sucesso: ${successCount}`);
+  console.log(`   \u274C Erros: ${errorCount}
+`);
+  if (successCount > 0) {
+    console.log("\u{1F4A1} Arquivos sincronizados em docs/");
+    console.log("   Use no Custom Knowledge do Lovable ou como refer\xEAncia.\n");
+  }
+}
+pullDocs();

package/dist/vite/index.esm.js

@@ -162,8 +162,6 @@ function createSecurityHeadersPlugin(isDev, options = {}) {
 
 function createForlogicViteConfig(options = {}) {
   const {
-    srcAlias = "@",
-    libAlias = "forlogic-core",
     security = {},
     server = {},
     build = {},
@@ -180,13 +178,6 @@ function createForlogicViteConfig(options = {}) {
         host: server.host ?? "::",
         port: server.port ?? 8080
       },
-      resolve: {
-        alias: {
-          [srcAlias]: "./src",
-          [libAlias]: "./lib",
-          "/assets": "./lib/assets"
-        }
-      },
       publicDir: false,
       esbuild: {
         sourcemap: build.sourcemap ?? true,

package/dist/vite/index.js

@@ -164,8 +164,6 @@ function createSecurityHeadersPlugin(isDev, options = {}) {
 
 function createForlogicViteConfig(options = {}) {
   const {
-    srcAlias = "@",
-    libAlias = "forlogic-core",
     security = {},
     server = {},
     build = {},
@@ -182,13 +180,6 @@ function createForlogicViteConfig(options = {}) {
         host: server.host ?? "::",
         port: server.port ?? 8080
       },
-      resolve: {
-        alias: {
-          [srcAlias]: "./src",
-          [libAlias]: "./lib",
-          "/assets": "./lib/assets"
-        }
-      },
       publicDir: false,
       esbuild: {
         sourcemap: build.sourcemap ?? true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forlogic-core",
-  "version": "1.11.3",
+  "version": "1.11.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -12,7 +12,17 @@
       "types": "./dist/index.d.ts"
     },
     "./index.css": "./dist/index.css",
-    "./tokens": "./dist/tokens/index.js"
+    "./tokens": "./dist/tokens/index.js",
+    "./vite": {
+      "import": "./dist/vite/index.esm.js",
+      "require": "./dist/vite/index.js",
+      "types": "./dist/vite/index.d.ts"
+    },
+    "./tailwind": {
+      "import": "./dist/tailwind/index.esm.js",
+      "require": "./dist/tailwind/index.js",
+      "types": "./dist/tailwind/index.d.ts"
+    }
   },
   "files": [
     "dist",