symbols-app-connect 3.2.8

package/src/providers/definitionProvider.ts

@@ -0,0 +1,201 @@
+import * as vscode from 'vscode'
+import * as fs from 'fs'
+import * as path from 'path'
+import { isDomqlFile } from './completionProvider'
+
+const PASCAL_CASE_RE = /^[A-Z][a-zA-Z0-9]+$/
+
+/** Walk up from a file to find symbols.json, return its dir and location */
+function findSymbolsConfig(fromPath: string): { root: string; dir: string } | null {
+  let current = path.dirname(fromPath)
+  while (true) {
+    const configPath = path.join(current, 'symbols.json')
+    if (fs.existsSync(configPath)) {
+      try {
+        const json = JSON.parse(fs.readFileSync(configPath, 'utf-8'))
+        return { root: current, dir: json.dir || './symbols' }
+      } catch {
+        return { root: current, dir: './symbols' }
+      }
+    }
+    const parent = path.dirname(current)
+    if (parent === current) break
+    current = parent
+  }
+  return null
+}
+
+export class DomqlDefinitionProvider implements vscode.DefinitionProvider {
+  async provideDefinition(
+    document: vscode.TextDocument,
+    position: vscode.Position
+  ): Promise<vscode.Definition | null> {
+    if (!vscode.workspace.getConfiguration('symbolsApp').get('enable', true)) return null
+
+    const fullText = document.getText()
+    const config = vscode.workspace.getConfiguration('symbolsApp')
+    if (!isDomqlFile(fullText, config.get('detectByImports', true))) return null
+
+    const wordRange =
+      document.getWordRangeAtPosition(position, /[A-Z][a-zA-Z0-9]+/) ||
+      document.getWordRangeAtPosition(position, /[a-zA-Z][a-zA-Z0-9]+/)
+    if (!wordRange) return null
+
+    const word = document.getText(wordRange)
+    if (!PASCAL_CASE_RE.test(word)) return null
+
+    const line = document.lineAt(position).text
+
+    const insideString = isInsideQuotes(line, wordRange.start.character)
+    const isObjKey = line.substring(wordRange.end.character).trimStart().startsWith(':')
+    const textBefore = line.substring(0, wordRange.start.character)
+    const isDirectRef = /(?:extends|childExtends|childExtendsRecursive|childExtend)\s*:\s*$/.test(textBefore.trimEnd())
+    const isArrayRef = /(?:extends|childExtends)\s*:\s*\[/.test(textBefore)
+
+    if (!insideString && !isObjKey && !isDirectRef && !isArrayRef) return null
+
+    // 1. Fast: convention-based lookup from symbols.json
+    const conventionResult = this.findByConvention(word, document.uri.fsPath)
+    if (conventionResult) return conventionResult
+
+    // 2. Slow: workspace-wide search
+    return this.findByWorkspaceSearch(word, document.uri)
+  }
+
+  private findByConvention(name: string, filePath: string): vscode.Location | null {
+    const symConfig = findSymbolsConfig(filePath)
+
+    // Collect all candidate directories to search
+    const searchDirs: string[] = []
+
+    if (symConfig) {
+      const symbolsBase = path.resolve(symConfig.root, symConfig.dir)
+      searchDirs.push(
+        path.join(symbolsBase, 'components'),
+        symbolsBase,
+        path.join(symConfig.root, 'components'),
+      )
+    }
+
+    // Also check relative to current file
+    const fileDir = path.dirname(filePath)
+    searchDirs.push(
+      path.join(fileDir, '..', 'components'), // sibling components dir
+      path.join(fileDir, 'components'),
+      fileDir,
+    )
+
+    // Also check workspace folders
+    const folders = vscode.workspace.workspaceFolders
+    if (folders) {
+      for (const f of folders) {
+        searchDirs.push(
+          path.join(f.uri.fsPath, 'components'),
+          path.join(f.uri.fsPath, 'symbols', 'components'),
+        )
+      }
+    }
+
+    const extensions = ['.js', '.ts', '.jsx', '.tsx']
+
+    for (const dir of searchDirs) {
+      // Try direct file: components/Name.js
+      for (const ext of extensions) {
+        const candidate = path.join(dir, `${name}${ext}`)
+        const loc = this.resolveFile(candidate, name)
+        if (loc) return loc
+      }
+      // Try directory: components/Name/index.js
+      for (const ext of extensions) {
+        const candidate = path.join(dir, name, `index${ext}`)
+        const loc = this.resolveFile(candidate, name)
+        if (loc) return loc
+      }
+    }
+
+    return null
+  }
+
+  private resolveFile(filePath: string, name: string): vscode.Location | null {
+    if (!fs.existsSync(filePath)) return null
+    try {
+      const text = fs.readFileSync(filePath, 'utf-8')
+      const lines = text.split('\n')
+      const pattern = new RegExp(`(?:export\\s+)?(?:const|let|var|function)\\s+${name}\\b`)
+      for (let i = 0; i < lines.length; i++) {
+        if (pattern.test(lines[i])) {
+          return new vscode.Location(vscode.Uri.file(filePath), new vscode.Position(i, 0))
+        }
+      }
+      // File matches by name, go to top
+      return new vscode.Location(vscode.Uri.file(filePath), new vscode.Position(0, 0))
+    } catch {
+      return new vscode.Location(vscode.Uri.file(filePath), new vscode.Position(0, 0))
+    }
+  }
+
+  private async findByWorkspaceSearch(
+    name: string,
+    currentUri: vscode.Uri
+  ): Promise<vscode.Location | null> {
+    try {
+      // Targeted filename search first
+      const nameFiles = await vscode.workspace.findFiles(
+        `**/${name}.{js,ts,jsx,tsx}`,
+        '{**/node_modules/**,**/dist/**,**/out/**,**/build/**}',
+        10
+      )
+
+      for (const file of nameFiles) {
+        try {
+          const doc = await vscode.workspace.openTextDocument(file)
+          const text = doc.getText()
+          if (!text.includes(name)) continue
+          const lines = text.split('\n')
+          for (let i = 0; i < lines.length; i++) {
+            if (new RegExp(`(?:export\\s+)?(?:const|let|var|function)\\s+${name}\\s*[=({]`).test(lines[i])) {
+              return new vscode.Location(file, new vscode.Position(i, 0))
+            }
+          }
+          return new vscode.Location(file, new vscode.Position(0, 0))
+        } catch { /* skip */ }
+      }
+
+      // Broader search
+      const files = await vscode.workspace.findFiles(
+        '**/*.{js,ts,jsx,tsx}',
+        '{**/node_modules/**,**/dist/**,**/out/**,**/build/**,.next/**}',
+        300
+      )
+
+      for (const file of files) {
+        try {
+          const doc = await vscode.workspace.openTextDocument(file)
+          const text = doc.getText()
+          if (!text.includes(name)) continue
+          const lines = text.split('\n')
+          for (let i = 0; i < lines.length; i++) {
+            if (new RegExp(`^export\\s+(?:const|let|var)\\s+${name}\\s*=`).test(lines[i])) {
+              return new vscode.Location(file, new vscode.Position(i, 0))
+            }
+          }
+        } catch { /* skip */ }
+      }
+    } catch { /* failed */ }
+
+    return null
+  }
+}
+
+function isInsideQuotes(line: string, charIndex: number): boolean {
+  let inSingle = false
+  let inDouble = false
+  for (let i = 0; i < charIndex; i++) {
+    const ch = line[i]
+    const prev = i > 0 ? line[i - 1] : ''
+    if (prev === '\\') continue
+    if (ch === "'" && !inDouble) inSingle = !inSingle
+    if (ch === '"' && !inSingle) inDouble = !inDouble
+  }
+  return inSingle || inDouble
+}

package/src/providers/hoverProvider.ts

@@ -0,0 +1,162 @@
+import * as vscode from 'vscode'
+import { DOMQL_ALL_KEYS } from '../data/domqlKeys'
+import { ALL_EVENTS } from '../data/events'
+import { ELEMENT_METHODS, STATE_METHODS } from '../data/elementMethods'
+import { ALL_COMPONENTS } from '../data/components'
+import { ALL_CSS_PROPS } from '../data/cssProperties'
+import {
+  COLOR_TOKENS, COLOR_TOKEN_MAP, GRADIENT_TOKENS, THEME_TOKENS,
+  ICON_NAMES, SPACING_SCALE, SPACING_TOKENS, TYPOGRAPHY_TOKENS, TIMING_TOKENS,
+  SEQUENCE_CONFIGS, COLOR_PROPERTIES,
+  SPACING_PROPERTIES, FONT_SIZE_PROPERTIES
+} from '../data/designSystemValues'
+import { isDomqlFile } from './completionProvider'
+
+// Build lookup maps once
+const keyMap = new Map<string, string>()
+
+for (const k of DOMQL_ALL_KEYS) {
+  keyMap.set(k.label, `**${k.detail}**\n\n${k.documentation}`)
+}
+for (const ev of ALL_EVENTS) {
+  keyMap.set(ev.label, `**${ev.detail}**\n\n${ev.documentation}`)
+}
+for (const m of ELEMENT_METHODS) {
+  keyMap.set(m.label, `**${m.detail}**\n\n${m.documentation}`)
+}
+for (const m of STATE_METHODS) {
+  keyMap.set(`state.${m.label}`, `**${m.detail}**\n\n${m.documentation}`)
+}
+for (const c of ALL_COMPONENTS) {
+  keyMap.set(c.label, `**${c.detail}**\n\n${c.documentation}`)
+}
+for (const p of ALL_CSS_PROPS) {
+  if (p.documentation) keyMap.set(p.label, `**${p.detail}**\n\n${p.documentation}`)
+}
+
+// Design system value hover info
+const valueHints = new Map<string, string>()
+
+for (const c of COLOR_TOKEN_MAP) {
+  if (c.label !== 'inherit' && c.label !== 'none' && c.label !== 'currentColor') {
+    const hexInfo = c.hex ? ` → \`${c.hex}\`` : ''
+    const desc = c.description ? `\n\n${c.description}` : ''
+    valueHints.set(c.label, `**Color token:** \`${c.label}\`${hexInfo}${desc}\n\nModifiers: \`${c.label}.5\` (opacity), \`${c.label}+16\` (lighten), \`${c.label}-16\` (darken), \`${c.label}=50\` (set lightness)`)
+  }
+}
+for (const g of GRADIENT_TOKENS) {
+  valueHints.set(g, `**Gradient token:** \`${g}\``)
+}
+for (const t of THEME_TOKENS) {
+  valueHints.set(t, `**Theme:** \`${t}\`\n\nUsage: \`theme: "${t}"\`\n\nModifiers: \`"${t} .child"\`, \`"${t} .color-only"\``)
+}
+
+/** Detect if the hovered word is in a value position and what property it belongs to */
+function getPropertyContext(document: vscode.TextDocument, position: vscode.Position): string | null {
+  const line = document.lineAt(position).text
+  const colonIdx = line.indexOf(':')
+  if (colonIdx === -1 || position.character <= colonIdx) return null
+  const beforeColon = line.substring(0, colonIdx).trim()
+  const m = beforeColon.match(/(\w+)$/)
+  return m ? m[1] : null
+}
+
+export class DomqlHoverProvider implements vscode.HoverProvider {
+  provideHover(
+    document: vscode.TextDocument,
+    position: vscode.Position
+  ): vscode.Hover | null {
+    if (!vscode.workspace.getConfiguration('symbolsApp').get('enable', true)) return null
+
+    const fullText = document.getText()
+    const config = vscode.workspace.getConfiguration('symbolsApp')
+    if (!isDomqlFile(fullText, config.get('detectByImports', true))) return null
+
+    const wordRange = document.getWordRangeAtPosition(position, /[\w.@:-]+/)
+    if (!wordRange) return null
+
+    const word = document.getText(wordRange)
+
+    // Check key docs
+    const docs = keyMap.get(word)
+    if (docs) {
+      const md = new vscode.MarkdownString(docs)
+      md.isTrusted = true
+      return new vscode.Hover(md, wordRange)
+    }
+
+    // Check if it's a design system value in a value position
+    const prop = getPropertyContext(document, position)
+    if (prop) {
+      // Spacing tokens
+      if (SPACING_PROPERTIES.has(prop)) {
+        const token = SPACING_TOKENS.find(t => t.label === word)
+        if (token) {
+          const cfg = SEQUENCE_CONFIGS.spacing
+          const md = new vscode.MarkdownString(`**Spacing token:** \`${word}\` ≈ **${token.approxValue}**\n\nBase: A = ${cfg.base}px, ratio: ${cfg.ratio} (golden ratio)\n\nScale: W X Y Z **A** B C D E F G H\n\nOperations: \`A+B\`, \`A-Z\`, \`A*2\`, \`-A\` (negative)`)
+          md.isTrusted = true
+          return new vscode.Hover(md, wordRange)
+        }
+      }
+
+      // Typography tokens
+      if (FONT_SIZE_PROPERTIES.has(prop)) {
+        const token = TYPOGRAPHY_TOKENS.find(t => t.label === word)
+        if (token) {
+          const cfg = SEQUENCE_CONFIGS.typography
+          const md = new vscode.MarkdownString(`**Typography token:** \`${word}\` ≈ **${token.approxValue}**\n\nBase: A = ${cfg.base}px, ratio: ${cfg.ratio} (major third)\n\nScale: X Y Z **A** B C D E F G H`)
+          md.isTrusted = true
+          return new vscode.Hover(md, wordRange)
+        }
+      }
+
+      // Timing tokens
+      if (prop === 'transition' || prop === 'transitionDuration' || prop === 'animationDuration') {
+        const token = TIMING_TOKENS.find(t => t.label === word)
+        if (token) {
+          const cfg = SEQUENCE_CONFIGS.timing
+          const md = new vscode.MarkdownString(`**Timing token:** \`${word}\` ≈ **${token.approxValue}**\n\nBase: A = ${cfg.base}ms, ratio: ${cfg.ratio} (perfect fourth)`)
+          md.isTrusted = true
+          return new vscode.Hover(md, wordRange)
+        }
+      }
+
+      // Color values
+      if (COLOR_PROPERTIES.has(prop) || prop === 'background') {
+        const hint = valueHints.get(word)
+        if (hint) {
+          const md = new vscode.MarkdownString(hint)
+          md.isTrusted = true
+          return new vscode.Hover(md, wordRange)
+        }
+      }
+
+      // Theme values
+      if (prop === 'theme') {
+        const hint = valueHints.get(word)
+        if (hint) {
+          const md = new vscode.MarkdownString(hint)
+          md.isTrusted = true
+          return new vscode.Hover(md, wordRange)
+        }
+      }
+
+      // Icon names
+      if ((prop === 'icon' || prop === 'name') && ICON_NAMES.includes(word)) {
+        const md = new vscode.MarkdownString(`**Icon:** \`${word}\`\n\nDefault icon from design system sprite`)
+        md.isTrusted = true
+        return new vscode.Hover(md, wordRange)
+      }
+    }
+
+    // General value hints (color/gradient/theme tokens anywhere)
+    const generalHint = valueHints.get(word)
+    if (generalHint) {
+      const md = new vscode.MarkdownString(generalHint)
+      md.isTrusted = true
+      return new vscode.Hover(md, wordRange)
+    }
+
+    return null
+  }
+}

package/src/providers/workspaceScanner.ts

@@ -0,0 +1,98 @@
+import * as vscode from 'vscode'
+
+export interface ComponentLocation {
+  uri: vscode.Uri
+  line: number
+}
+
+interface ProjectCache {
+  components: Map<string, ComponentLocation>
+  lastScan: number
+}
+
+const SCAN_INTERVAL = 30_000
+const PASCAL_CASE_RE = /^[A-Z][a-zA-Z0-9]+$/
+
+let cache: ProjectCache = { components: new Map(), lastScan: 0 }
+
+// Patterns that export DOMQL components
+const EXPORT_RE = /export\s+(?:const|let|var|function)\s+([A-Z][a-zA-Z0-9]+)/g
+const OBJECT_KEY_RE = /^\s+([A-Z][a-zA-Z0-9]+)\s*[:{]/gm
+
+function extractComponentsWithLines(text: string): { name: string; line: number }[] {
+  const results: { name: string; line: number }[] = []
+  const seen = new Set<string>()
+
+  // Named exports: export const Button = { ... }
+  EXPORT_RE.lastIndex = 0
+  let m: RegExpExecArray | null
+  while ((m = EXPORT_RE.exec(text))) {
+    if (PASCAL_CASE_RE.test(m[1]) && !seen.has(m[1])) {
+      seen.add(m[1])
+      const line = text.substring(0, m.index).split('\n').length - 1
+      results.push({ name: m[1], line })
+    }
+  }
+
+  // Object keys inside component definitions
+  OBJECT_KEY_RE.lastIndex = 0
+  while ((m = OBJECT_KEY_RE.exec(text))) {
+    if (PASCAL_CASE_RE.test(m[1]) && !seen.has(m[1])) {
+      seen.add(m[1])
+      const line = text.substring(0, m.index).split('\n').length - 1
+      results.push({ name: m[1], line })
+    }
+  }
+
+  return results
+}
+
+export async function scanWorkspaceComponents(): Promise<string[]> {
+  await ensureScan()
+  return [...cache.components.keys()].sort()
+}
+
+export async function getComponentLocation(name: string): Promise<ComponentLocation | undefined> {
+  await ensureScan()
+  return cache.components.get(name)
+}
+
+async function ensureScan(): Promise<void> {
+  const now = Date.now()
+  if (now - cache.lastScan < SCAN_INTERVAL && cache.components.size > 0) return
+
+  const components = new Map<string, ComponentLocation>()
+
+  try {
+    const files = await vscode.workspace.findFiles(
+      '**/*.{js,ts,jsx,tsx}',
+      '{**/node_modules/**,**/dist/**,**/out/**,**/build/**,.next/**}',
+      500
+    )
+
+    for (const file of files) {
+      try {
+        const doc = await vscode.workspace.openTextDocument(file)
+        const text = doc.getText()
+        if (/extends\s*:|childExtends|from\s+['"](@domql|@symbo\.ls|smbls)/.test(text)) {
+          for (const { name, line } of extractComponentsWithLines(text)) {
+            // First definition found wins (don't overwrite)
+            if (!components.has(name)) {
+              components.set(name, { uri: file, line })
+            }
+          }
+        }
+      } catch {
+        // skip unreadable files
+      }
+    }
+  } catch {
+    // workspace not available
+  }
+
+  cache = { components, lastScan: now }
+}
+
+export function invalidateCache(): void {
+  cache.lastScan = 0
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "ES2020",
+    "lib": ["ES2020"],
+    "sourceMap": true,
+    "rootDir": "src",
+    "outDir": "out",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", ".vscode-test"]
+}