@wire-dsl/language-support 0.0.2

package/INTEGRATION-GUIDE.md

@@ -0,0 +1,218 @@
+# Reutilizando Wire DSL Language Support Across Tools
+
+## Resumen
+
+Hemos creado el package `@wire-dsl/language-support` como una fuente centralizada de definiciones de lenguaje. Esto permite que VS Code Extension, Monaco Editor, y otros editores usen las mismas definiciones sin duplicación.
+
+## Estructura
+
+```
+packages/
+├── language-support/          ← Nueva fuente centralizada
+│   ├── src/
+│   │   ├── index.ts          # Keywords, componentes, propiedades
+│   │   ├── grammar.ts        # Configuración de tokens para Monaco
+│   │   └── completions.ts    # Lógica de autocompletado
+│   ├── dist/                 # JavaScript compilado
+│   └── package.json
+│
+├── web/                       # Wire Live Editor
+│   ├── src/
+│   │   └── monaco/
+│   │       └── wireLanguage.ts    # Usa @wire-dsl/language-support
+│   └── package.json              # Dependencia: @wire-dsl/language-support
+│
+└── vscode-extension/          # (Futuro) Usar language-support también
+    └── src/
+        ├── completionProvider.ts
+        └── data/
+            └── components.ts
+```
+
+## Cómo Usar en Monaco (Web)
+
+```typescript
+// packages/web/src/monaco/wireLanguage.ts
+import { ALL_KEYWORDS, getCompletions } from '@wire-dsl/language-support';
+
+export function registerWireLanguage() {
+  // Usar keywords dinámicamente
+  const keywordPattern = ALL_KEYWORDS.map(kw => kw.name).join('|');
+  
+  // Tokenizer usa el patrón
+  monaco.languages.setMonarchTokensProvider('wire', {
+    tokenizer: {
+      root: [
+        [new RegExp(`\\b(${keywordPattern})\\b`), 'keyword'],
+        // ...
+      ],
+    },
+  });
+  
+  // Autocompletado usa language-support
+  monaco.languages.registerCompletionItemProvider('wire', {
+    provideCompletionItems: (model, position) => {
+      const word = getWord(model, position);
+      return {
+        suggestions: getCompletions(word).map(item => ({
+          label: item.label,
+          kind: getKind(item.kind),
+          detail: item.documentation,
+        })),
+      };
+    },
+  });
+}
+```
+
+## Cómo Usar en VS Code Extension
+
+### Opción 1: Reutilizar directamente (Recomendado)
+
+```typescript
+// vscode-extension/src/completionProvider.ts
+import { 
+  getCompletions, 
+  getContextualCompletions,
+  getCurrentWord 
+} from '@wire-dsl/language-support/completions';
+
+export class WireCompletionProvider implements vscode.CompletionItemProvider {
+  provideCompletionItems(document, position) {
+    const line = document.lineAt(position.line).text;
+    const word = getCurrentWord(line, position.character);
+    
+    // Usar completions del language-support
+    const suggestions = getContextualCompletions(line, word);
+    
+    return suggestions.map(item => ({
+      label: item.label,
+      kind: vscode.CompletionItemKind[item.kind],
+      detail: item.detail,
+      documentation: item.documentation,
+      range: new vscode.Range(position, position),
+    }));
+  }
+}
+```
+
+### Opción 2: Usar metadatos para documentación
+
+```typescript
+// vscode-extension/src/hoverProvider.ts
+import { ALL_KEYWORDS } from '@wire-dsl/language-support';
+
+export class WireHoverProvider implements vscode.HoverProvider {
+  provideHover(document, position) {
+    const word = document.getWordRangeAtPosition(position);
+    const text = document.getText(word);
+    
+    // Buscar en language-support
+    const keyword = ALL_KEYWORDS.find(k => k.name === text);
+    if (!keyword) return null;
+    
+    return new vscode.Hover(
+      `**${keyword.type}**: ${keyword.description}`
+    );
+  }
+}
+```
+
+## Instalación en VS Code Extension
+
+### 1. Agregar dependencia
+
+```bash
+cd packages/vscode-extension
+npm install @wire-dsl/language-support
+```
+
+### 2. Actualizar datos
+
+**Antes (hardcoded):**
+```typescript
+const COMPONENTS = ['button', 'text', 'input', ...];
+const KEYWORDS = ['project', 'screen', 'component', ...];
+```
+
+**Después (dinámico):**
+```typescript
+import { ALL_KEYWORDS, getKeywordsByType } from '@wire-dsl/language-support';
+
+const components = getKeywordsByType('component');
+const keywords = getKeywordsByType('keyword');
+```
+
+## Ventajas
+
+✅ **Single Source of Truth** - Una única definición de lenguaje
+✅ **Menos duplicación** - Cambios se propagan automáticamente
+✅ **Consistencia** - Todos los editores usan las mismas definiciones
+✅ **Fácil mantenimiento** - Agregar componentes en un solo lugar
+✅ **OSS-friendly** - Package público y reutilizable
+✅ **Type-safe** - TypeScript types compartidos
+
+## Proceso de Actualización
+
+### Agregar un nuevo componente
+
+1. **Editar `packages/language-support/src/index.ts`:**
+```typescript
+export const KEYWORDS: KeywordDefinition[] = [
+  // ... existing ...
+  { name: 'new-component', type: 'component', description: 'New component' },
+];
+```
+
+2. **Compilar el package:**
+```bash
+cd packages/language-support
+pnpm build
+```
+
+3. **Actualizar todos los dependientes:**
+```bash
+cd ../web && pnpm dev    # Monaco lo carga automáticamente
+cd ../vscode-extension && npm run compile  # VS Code Extension
+```
+
+## Exportes Disponibles
+
+```typescript
+// Main package
+import {
+  KEYWORDS,
+  PROPERTIES,
+  ALL_KEYWORDS,
+  getKeywordsByType,
+  getCompletions,
+} from '@wire-dsl/language-support';
+
+// Grammar (Monarch tokenizer)
+import { MONACO_GRAMMAR, TOKENIZE_RULES } from '@wire-dsl/language-support/grammar';
+
+// Completions (with snippets)
+import {
+  KEYWORD_COMPLETIONS,
+  CONTAINER_COMPLETIONS,
+  COMPONENT_COMPLETIONS,
+  PROPERTY_COMPLETIONS,
+  getContextualCompletions,
+  isPropertyContext,
+  getCurrentWord,
+} from '@wire-dsl/language-support/completions';
+```
+
+## Proximos Pasos
+
+1. ✅ Crear `@wire-dsl/language-support` (HECHO)
+2. ✅ Integrar con Monaco Editor (HECHO)
+3. ⏳ Integrar con VS Code Extension (Futuro)
+4. ⏳ Publicar en NPM (Futuro)
+5. ⏳ Crear Language Server Protocol (LSP) para mejor soporte
+
+## Recursos
+
+- [Language Support Package](../../packages/language-support/README.md)
+- [VS Code Extension Repo](https://github.com/Wire-DSL/vscode-extension)
+- [Monaco Editor Docs](https://microsoft.github.io/monaco-editor/)

package/LICENSE

@@ -0,0 +1,36 @@
+MIT License
+
+Copyright (c) 2026 WireDSL Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+## Third-Party Components & Assets
+
+### Feather Icons
+
+This project includes icons from Feather Icons (https://feathericons.com), created by Cole Bemis and contributors.
+
+- **License**: MIT License
+- **Repository**: https://github.com/feathericons/feather
+- **Location in project**: `packages/core/src/renderer/icons/`
+- **Full details**: See `packages/core/src/renderer/icons/ICONS-LICENSE.md`
+
+Feather Icons are used under the terms of the MIT License, which is fully compatible with this project's MIT License.

package/README.md

@@ -0,0 +1,55 @@
+# @wire-dsl/language-support
+
+Shared language definitions for Wire DSL - used by Monaco Editor, VS Code, and CLI tools.
+
+## Installation
+
+```bash
+npm install @wire-dsl/language-support
+```
+
+## Quick Start
+
+```typescript
+import { getCompletions, ALL_KEYWORDS } from '@wire-dsl/language-support';
+import { MONACO_GRAMMAR } from '@wire-dsl/language-support/grammar';
+
+// Use completions
+const suggestions = getCompletions('but'); // → [button, ...]
+
+// Use grammar for syntax highlighting
+// See INTEGRATION-GUIDE.md for setup
+```
+
+## What's Included
+
+- **35+ Keywords & Components** - All Wire DSL language definitions
+- **Autocomplete Logic** - Context-aware suggestions
+- **Syntax Grammar** - For Monaco, VS Code, and TextMate editors
+
+## Documentation
+
+- **[STRATEGY.md](STRATEGY.md)** - NPM publication strategy & rationale
+- **[INTEGRATION-GUIDE.md](INTEGRATION-GUIDE.md)** - How to use in your tool
+
+## Exports
+
+```typescript
+// Keywords and components
+export { ALL_KEYWORDS, KEYWORDS, PROPERTIES } from '@wire-dsl/language-support';
+export { getCompletions, getKeywordsByType } from '@wire-dsl/language-support';
+
+// Grammar for syntax highlighting
+export { MONACO_GRAMMAR, TOKENIZE_RULES } from '@wire-dsl/language-support/grammar';
+
+// Advanced completions
+export { getContextualCompletions } from '@wire-dsl/language-support/completions';
+```
+
+## Published Versions
+
+- **1.0.0** - Initial release with 35+ keywords and components
+
+## License
+
+MIT - See LICENSE in root directory

package/dist/completions.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Autocomplete and IntelliSense Provider
+ * Shared completion logic for Monaco, VS Code, and other editors
+ */
+export interface CompletionContext {
+    line: string;
+    position: number;
+    word: string;
+    lineText: string;
+}
+export interface CompletionItem {
+    label: string;
+    kind: 'Keyword' | 'Component' | 'Property' | 'Variable' | 'Value';
+    detail?: string;
+    documentation?: string;
+    insertText?: string;
+    range?: {
+        startColumn: number;
+        endColumn: number;
+    };
+}
+export type CompletionSuggestion = CompletionItem;
+export declare const KEYWORD_COMPLETIONS: CompletionItem[];
+export declare const CONTAINER_COMPLETIONS: CompletionItem[];
+export declare const COMPONENT_COMPLETIONS: CompletionItem[];
+export declare const PROPERTY_COMPLETIONS: CompletionItem[];
+/**
+ * Detect if cursor is after 'component' keyword
+ * Returns component name if found, null otherwise
+ */
+export declare function detectComponentKeyword(lineText: string): string | null;
+/**
+ * Detect if cursor is after ':' in a property context
+ * Returns { propertyName, componentName } if in property value context
+ */
+export declare function detectPropertyValueContext(lineText: string): {
+    propertyName: string;
+    componentName: string;
+} | null;
+/**
+ * Determine if we're in a property context (after ':')
+ */
+export declare function isPropertyContext(lineText: string, position: number): boolean;
+/**
+ * Get all available component names (built-in ones that start with uppercase)
+ */
+export declare function getAvailableComponents(): CompletionSuggestion[];
+/**
+ * Get properties for a specific component
+ */
+export declare function getComponentProperties(componentName: string): CompletionSuggestion[];
+/**
+ * Get available properties for a component
+ * Filters out properties already declared in current line
+ */
+export declare function getComponentPropertiesForCompletion(componentName: string, alreadyDeclaredProps?: string[]): CompletionSuggestion[];
+/**
+ * Get property value suggestions for a given component property
+ */
+export declare function getPropertyValueSuggestions(componentName: string, propertyName: string): CompletionSuggestion[];
+/**
+ * Get completions based on hierarchical scope
+ *
+ * Hierarchy:
+ * - empty-file: suggest 'project' to start
+ * - inside-project: suggest project-level keywords (screen, theme, colors, mocks, define)
+ * - inside-screen: suggest 'layout' keyword and containers (stack, grid, split, panel, card)
+ * - inside-layout: suggest components and nested layouts
+ */
+export declare function getScopeBasedCompletions(scope: 'empty-file' | 'inside-project' | 'inside-screen' | 'inside-layout'): CompletionSuggestion[];
+declare const _default: {
+    KEYWORD_COMPLETIONS: CompletionItem[];
+    CONTAINER_COMPLETIONS: CompletionItem[];
+    COMPONENT_COMPLETIONS: CompletionItem[];
+    PROPERTY_COMPLETIONS: CompletionItem[];
+    isPropertyContext: typeof isPropertyContext;
+    getComponentPropertiesForCompletion: typeof getComponentPropertiesForCompletion;
+    getPropertyValueSuggestions: typeof getPropertyValueSuggestions;
+    getScopeBasedCompletions: typeof getScopeBasedCompletions;
+    detectComponentKeyword: typeof detectComponentKeyword;
+    detectPropertyValueContext: typeof detectPropertyValueContext;
+    getAvailableComponents: typeof getAvailableComponents;
+    getComponentProperties: typeof getComponentProperties;
+};
+export default _default;
+//# sourceMappingURL=completions.d.ts.map

package/dist/completions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"completions.d.ts","sourceRoot":"","sources":["../src/completions.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;CACpD;AAGD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC;AAGlD,eAAO,MAAM,mBAAmB,EAAE,cAAc,EA6B/C,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,cAAc,EAoCjD,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,cAAc,EAgEjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,cAAc,EAuEhD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAItE;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,MAAM,GACf;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAgBxD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAG7E;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,oBAAoB,EAAE,CAU/D;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,aAAa,EAAE,MAAM,GAAG,oBAAoB,EAAE,CAcpF;AAED;;;GAGG;AACH,wBAAgB,mCAAmC,CACjD,aAAa,EAAE,MAAM,EACrB,oBAAoB,GAAE,MAAM,EAAO,GAClC,oBAAoB,EAAE,CAiBxB;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,GACnB,oBAAoB,EAAE,CAgBxB;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,YAAY,GAAG,gBAAgB,GAAG,eAAe,GAAG,eAAe,GACzE,oBAAoB,EAAE,CAgFxB;;;;;;;;;;;;;;;AAED,wBAaE"}