semicons 0.0.1

package/src/features/hover.ts

@@ -0,0 +1,90 @@
+import {
+  languages,
+  MarkdownString,
+  window,
+  Hover,
+  Disposable,
+  type TextDocument,
+  type Position,
+  type CancellationToken,
+  type ProviderResult,
+} from 'vscode';
+import { getRegistryForFile } from '../registry/cache';
+import { getSemiconsConfig } from '../utils/config';
+import { extractTokenNameAtPosition } from '../utils/tokenParse';
+
+export function registerHoverProvider(): Disposable {
+  const provider = languages.registerHoverProvider(
+    [
+      { language: 'typescriptreact' },
+      { language: 'javascriptreact' },
+      { language: 'vue' },
+      { language: 'astro' },
+    ],
+    {
+      async provideHover(
+        document: TextDocument,
+        position: Position,
+        cancellationToken: CancellationToken
+      ): Promise<Hover | null | undefined> {
+        const registry = await getRegistryForFile(document.uri);
+
+        if (!registry || !registry.tokens) {
+          return null;
+        }
+
+        const tokenName = extractTokenNameAtPosition(document, position);
+
+        if (!tokenName) {
+          return null;
+        }
+
+        const foundToken = registry.tokens.find((t: { name: string }) => t.name === tokenName);
+
+        if (!foundToken) {
+          return null;
+        }
+
+        const markdown = new MarkdownString();
+        markdown.isTrusted = true;
+
+        const deprecated = foundToken.meta.deprecated;
+        const theme = registry.defaultTheme;
+        const assetRef = foundToken.themes[theme] || Object.values(foundToken.themes)[0];
+
+        // Build hover content
+        const lines: string[] = [];
+
+        // Token name with deprecated marker
+        if (deprecated) {
+          lines.push(`~~${foundToken.name}~~ ⚠️`);
+        } else {
+          lines.push(`**${foundToken.name}**`);
+        }
+
+        // Asset ref
+        lines.push(`\`${assetRef}\``);
+
+        // A11y label
+        if (foundToken.a11y?.label) {
+          lines.push(`a11y: "${foundToken.a11y.label}"`);
+        }
+
+        // Tags
+        if (foundToken.meta.tags && foundToken.meta.tags.length > 0) {
+          lines.push(`tags: ${foundToken.meta.tags.join(', ')}`);
+        }
+
+        // Preview command
+        const previewCommand = `[Preview icon](command:semicons.previewIcon?${encodeURIComponent(JSON.stringify([foundToken.name]))})`;
+        lines.push('', previewCommand);
+
+        markdown.value = lines.join('\n\n');
+
+        return new Hover(markdown);
+      },
+    }
+  );
+
+  return provider;
+}

package/src/registry/cache.ts

@@ -0,0 +1,71 @@
+import { Uri, workspace, type Uri as VSCodeUri } from 'vscode';
+import type { Registry } from './types';
+import { loadRegistry } from './loader';
+
+interface RegistryCache {
+  [folderUri: string]: Registry | null | Promise<Registry | null>;
+}
+
+const cache: RegistryCache = {};
+
+export async function getRegistryForFile(fileUri: VSCodeUri): Promise<Registry | null> {
+  const folder = workspace.getWorkspaceFolder(fileUri);
+  
+  if (folder) {
+    const folderKey = folder.uri.toString();
+    
+    if (!cache[folderKey]) {
+      cache[folderKey] = await loadRegistry(folder.uri);
+    }
+    
+    return cache[folderKey];
+  }
+  
+  // Fallback: use first available registry
+  const folders = workspace.workspaceFolders;
+  if (folders && folders.length > 0) {
+    const firstFolder = folders[0];
+    const firstKey = firstFolder.uri.toString();
+    
+    if (!cache[firstKey]) {
+      cache[firstKey] = await loadRegistry(firstFolder.uri);
+    }
+    
+    return cache[firstKey];
+  }
+  
+  return null;
+}
+
+export async function getRegistryForFolder(folderUri: VSCodeUri): Promise<Registry | null> {
+  const folderKey = folderUri.toString();
+
+  if (!cache[folderKey]) {
+    cache[folderKey] = await loadRegistry(folderUri);
+  }
+
+  return cache[folderKey] as Promise<Registry | null> | Registry | null;
+}
+
+export function setRegistry(folderUri: VSCodeUri, registry: Registry | null): void {
+  const folderKey = folderUri.toString();
+  cache[folderKey] = registry;
+}
+
+export function clearCache(): void {
+  for (const key of Object.keys(cache)) {
+    delete cache[key];
+  }
+}
+
+export async function getAllRegistries(): Promise<Registry[]> {
+  const registries: Registry[] = [];
+
+  for (const value of Object.values(cache)) {
+    if (value && !(value instanceof Promise)) {
+      registries.push(value);
+    }
+  }
+
+  return registries;
+}

package/src/registry/loader.ts

@@ -0,0 +1,26 @@
+import { Uri, workspace } from 'vscode';
+import * as fs from 'fs';
+import * as path from 'path';
+import type { Registry } from './types';
+
+export async function loadRegistry(folderUri: Uri): Promise<Registry | null> {
+  const config = workspace.getConfiguration('semicons', folderUri);
+  const registryPath = config.get<string>('registryPath', 'src/icons.generated/registry.json');
+  
+  const registryUri = Uri.joinPath(folderUri, registryPath);
+  
+  try {
+    const document = await workspace.openTextDocument(registryUri);
+    const content = document.getText();
+    const registry = JSON.parse(content) as Registry;
+    return registry;
+  } catch (error) {
+    return null;
+  }
+}
+
+export function resolveRegistryPath(folderUri: Uri): Uri {
+  const config = workspace.getConfiguration('semicons', folderUri);
+  const registryPath = config.get<string>('registryPath', 'src/icons.generated/registry.json');
+  return Uri.joinPath(folderUri, registryPath);
+}

package/src/registry/types.ts

@@ -0,0 +1,38 @@
+import { Uri } from 'vscode';
+
+export interface Registry {
+  version: string;
+  defaultTheme: string;
+  themes: string[];
+  tokens: Token[];
+}
+
+export interface Token {
+  name: string;
+  themes: Record<string, AssetRef>;
+  meta: {
+    deprecated?: boolean | string;
+    description?: string;
+    tags?: string[];
+  };
+  a11y?: {
+    label?: string;
+    description?: string;
+  };
+}
+
+export type AssetRef = string; // e.g., "local:menu", "lucide:github"
+
+export interface TokenCompletionItem {
+  label: string;
+  detail: string;
+  documentation: string;
+  deprecated: boolean | string;
+  category?: string;
+}
+
+export interface IconComponentInfo {
+  name: string;
+  nameProp: string;
+  uri: Uri;
+}

package/src/registry/watcher.ts

@@ -0,0 +1,67 @@
+import { workspace, Uri, Disposable } from 'vscode';
+import { clearCache, setRegistry } from './cache';
+import { loadRegistry, resolveRegistryPath } from './loader';
+
+const watchers: Map<string, Disposable> = new Map();
+
+export function setupRegistryWatcher(): void {
+  const folders = workspace.workspaceFolders;
+  if (!folders) {
+    return;
+  }
+  
+  for (const folder of folders) {
+    const registryUri = resolveRegistryPath(folder.uri);
+    const watcherKey = folder.uri.toString();
+    
+    if (watchers.has(watcherKey)) {
+      continue;
+    }
+    
+    const watcher = workspace.createFileSystemWatcher(
+      registryUri.fsPath,
+      false,
+      false,
+      false
+    );
+    
+    watcher.onDidChange(async () => {
+      const registry = await loadRegistry(folder.uri);
+      setRegistry(folder.uri, registry);
+    });
+    
+    watcher.onDidCreate(async () => {
+      const registry = await loadRegistry(folder.uri);
+      setRegistry(folder.uri, registry);
+    });
+    
+    watcher.onDidDelete(() => {
+      setRegistry(folder.uri, null);
+    });
+    
+    watchers.set(watcherKey, watcher);
+  }
+}
+
+export function disposeWatchers(): void {
+  for (const disposable of watchers.values()) {
+    disposable.dispose();
+  }
+  watchers.clear();
+}
+
+export function refreshAllRegistries(): Promise<void> {
+  clearCache();
+  
+  const folders = workspace.workspaceFolders;
+  if (!folders) {
+    return Promise.resolve();
+  }
+  
+  const promises = folders.map(async (folder) => {
+    const registry = await loadRegistry(folder.uri);
+    setRegistry(folder.uri, registry);
+  });
+  
+  return Promise.all(promises).then(() => undefined);
+}

package/src/utils/config.ts

@@ -0,0 +1,17 @@
+import { Uri, workspace } from 'vscode';
+
+export interface SemiconsConfig {
+  registryPath: string;
+  localIconDir: string;
+  iconComponentName: string;
+}
+
+export function getSemiconsConfig(folder?: Uri): SemiconsConfig {
+  const config = workspace.getConfiguration('semicons', folder);
+  
+  return {
+    registryPath: config.get<string>('registryPath', 'src/icons.generated/registry.json'),
+    localIconDir: config.get<string>('localIconDir', 'icons/local'),
+    iconComponentName: config.get<string>('iconComponentName', 'Icon'),
+  };
+}

package/src/utils/path.ts

@@ -0,0 +1,49 @@
+import { Uri, workspace } from 'vscode';
+import type { AssetRef } from '../registry/types';
+import { getSemiconsConfig } from './config';
+
+export function parseAssetRef(assetRef: AssetRef): { namespace: string; id: string } | null {
+  const match = assetRef.match(/^([^:]+):(.+)$/);
+  if (!match) {
+    return null;
+  }
+  return { namespace: match[1], id: match[2] };
+}
+
+export async function resolveAssetToFileUri(
+  assetRef: AssetRef,
+  folder: Uri
+): Promise<Uri | null> {
+  const parsed = parseAssetRef(assetRef);
+  if (!parsed) {
+    return null;
+  }
+  
+  const { namespace, id } = parsed;
+  
+  if (namespace === 'local') {
+    const config = getSemiconsConfig(folder);
+    const filePath = `${config.localIconDir}/${id}.svg`;
+    const fileUri = Uri.joinPath(folder, filePath);
+    
+    try {
+      // Check if file exists
+      await workspace.fs.stat(fileUri);
+      return fileUri;
+    } catch {
+      return null;
+    }
+  }
+  
+  // For other namespaces (lucide, etc.), we can't resolve to local file
+  return null;
+}
+
+export async function readSvgContent(fileUri: Uri): Promise<string | null> {
+  try {
+    const bytes = await workspace.fs.readFile(fileUri);
+    return new TextDecoder().decode(bytes);
+  } catch {
+    return null;
+  }
+}

package/src/utils/tokenParse.ts

@@ -0,0 +1,79 @@
+import { Position, Range, type TextDocument } from 'vscode';
+
+export interface TokenMatch {
+  name: string;
+  range: Range;
+  isAttributeValue: boolean;
+}
+
+const ICON_TAG_REGEX = /<Icon\b/gi;
+const NAME_ATTR_REGEX = /\s+name\s*=\s*["']([^"']+)["']/g;
+const VUE_NAME_ATTR_REGEX = /\s+:name\s*=\s*["']([^"']+)["']/g;
+
+export function findIconTokens(document: TextDocument): TokenMatch[] {
+  const text = document.getText();
+  const matches: TokenMatch[] = [];
+  
+  let match;
+  
+  // Match <Icon name="..."> patterns
+  while ((match = ICON_TAG_REGEX.exec(text)) !== null) {
+    const tagStart = match.index;
+    const tagEnd = tagStart + match[0].length;
+    
+    // Look for name attribute after the tag
+    const remainingText = text.substring(tagEnd);
+    
+    // Check for name="value"
+    let nameMatch;
+    const nameRegex = new RegExp(NAME_ATTR_REGEX);
+    while ((nameMatch = nameRegex.exec(remainingText)) !== null) {
+      const nameStart = tagEnd + nameMatch.index;
+      const nameEnd = nameStart + nameMatch[0].length;
+      const nameValue = nameMatch[1];
+      
+      const startPos = document.positionAt(nameStart);
+      const endPos = document.positionAt(nameEnd);
+      
+      matches.push({
+        name: nameValue,
+        range: new Range(startPos, endPos),
+        isAttributeValue: true,
+      });
+    }
+    
+    // Check for Vue :name="'value'"
+    const vueNameRegex = new RegExp(VUE_NAME_ATTR_REGEX);
+    while ((nameMatch = vueNameRegex.exec(remainingText)) !== null) {
+      const nameStart = tagEnd + nameMatch.index;
+      const nameEnd = nameStart + nameMatch[0].length;
+      const nameValue = nameMatch[1];
+      
+      const startPos = document.positionAt(nameStart);
+      const endPos = document.positionAt(nameEnd);
+      
+      matches.push({
+        name: nameValue,
+        range: new Range(startPos, endPos),
+        isAttributeValue: true,
+      });
+    }
+  }
+  
+  return matches;
+}
+
+export function extractTokenNameAtPosition(
+  document: TextDocument,
+  position: Position
+): string | null {
+  const matches = findIconTokens(document);
+  
+  for (const match of matches) {
+    if (match.range.contains(position)) {
+      return match.name;
+    }
+  }
+  
+  return null;
+}

package/src/views/previewWebview.ts

@@ -0,0 +1,253 @@
+import { window, ViewColumn, Uri, type WebviewPanel } from 'vscode';
+import type { Token, Registry } from '../registry/types';
+import { resolveAssetToFileUri, readSvgContent } from '../utils/path';
+
+interface PreviewState {
+  token: Token;
+  registry: Registry;
+  folderUri: Uri;
+}
+
+export class PreviewWebview {
+  private panel: WebviewPanel | null = null;
+  private state: PreviewState | null = null;
+
+  async show(token: Token, registry: Registry, folderUri: Uri): Promise<void> {
+    this.state = { token, registry, folderUri };
+    
+    if (this.panel) {
+      this.panel.reveal(ViewColumn.Beside);
+      this.updatePanel();
+    } else {
+      this.panel = window.createWebviewPanel(
+        'semiconsPreview',
+        `Preview: ${token.name}`,
+        ViewColumn.Beside,
+        {
+          enableScripts: true,
+          localResourceRoots: [folderUri],
+        }
+      );
+      
+      this.panel.onDidDispose(() => {
+        this.panel = null;
+        this.state = null;
+      });
+      
+      this.updatePanel();
+    }
+  }
+
+  private async updatePanel(): Promise<void> {
+    if (!this.panel || !this.state) {
+      return;
+    }
+
+    const { token, registry, folderUri } = this.state;
+    const theme = registry.defaultTheme;
+    const assetRef = token.themes[theme] || Object.values(token.themes)[0];
+    
+    // Try to get real SVG content
+    const fileUri = await resolveAssetToFileUri(assetRef, folderUri);
+    let svgContent: string | null = null;
+    let svgExists = false;
+    
+    if (fileUri) {
+      svgContent = await readSvgContent(fileUri);
+      svgExists = svgContent !== null;
+    }
+    
+    // Build preview HTML
+    const previewHtml = svgExists && svgContent
+      ? this.wrapSvg(svgContent)
+      : this.createPlaceholder(token.name, assetRef, svgExists);
+    
+    const html = this.buildHtml(token, registry, assetRef, previewHtml);
+    
+    this.panel.webview.html = html;
+  }
+
+  private wrapSvg(svg: string): string {
+    // Remove existing width/height/viewBox for consistent sizing
+    return svg
+      .replace(/\s+width="[^"]*"/g, '')
+      .replace(/\s+height="[^"]*"/g, '')
+      .replace(/\s+viewBox="[^"]*"/g, '')
+      .replace(/^<svg/, '<svg width="100%" height="100%" viewBox="0 0 24 24"');
+  }
+
+  private createPlaceholder(name: string, assetRef: string, fileExists: boolean): string {
+    return `
+      <div class="placeholder">
+        <div class="placeholder-icon">
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <rect x="3" y="3" width="18" height="18" rx="2"/>
+            <line x1="9" y1="9" x2="15" y2="15"/>
+            <line x1="15" y1="9" x2="9" y2="15"/>
+          </svg>
+        </div>
+        <p class="placeholder-text">${fileExists ? 'Preview unavailable' : 'File not found'}</p>
+        <p class="placeholder-ref">${assetRef}</p>
+        ${!fileExists ? `<p class="placeholder-hint">Expected: ${name.replace('local:', 'icons/local/') + '.svg'}</p>` : ''}
+      </div>
+    `;
+  }
+
+  private buildHtml(token: Token, registry: Registry, assetRef: string, previewHtml: string): string {
+    const deprecated = token.meta.deprecated;
+    
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${token.name}</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      margin: 0;
+      padding: 16px;
+      background: #1e1e2e;
+      color: #cdd6f4;
+    }
+    .header {
+      margin-bottom: 16px;
+    }
+    .token-name {
+      font-size: 18px;
+      font-weight: 600;
+      margin: 0;
+    }
+    .token-name.deprecated {
+      text-decoration: line-through;
+      opacity: 0.7;
+    }
+    .token-ref {
+      font-family: 'Fira Code', monospace;
+      font-size: 12px;
+      color: #a6adc8;
+      background: #313244;
+      padding: 2px 8px;
+      border-radius: 4px;
+    }
+    .section {
+      margin-bottom: 16px;
+    }
+    .section-title {
+      font-size: 12px;
+      text-transform: uppercase;
+      color: #6c7086;
+      margin-bottom: 8px;
+    }
+    .preview-container {
+      background: #181825;
+      border-radius: 8px;
+      padding: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 120px;
+    }
+    .preview-container svg {
+      max-width: 100%;
+      max-height: 100px;
+    }
+    .placeholder {
+      text-align: center;
+      padding: 24px;
+    }
+    .placeholder-icon {
+      opacity: 0.3;
+      margin-bottom: 8px;
+    }
+    .placeholder-text {
+      font-size: 14px;
+      color: #a6adc8;
+      margin: 0 0 4px 0;
+    }
+    .placeholder-ref {
+      font-family: 'Fira Code', monospace;
+      font-size: 11px;
+      color: #6c7086;
+      margin: 0 0 8px 0;
+    }
+    .placeholder-hint {
+      font-size: 11px;
+      color: #f38ba8;
+      margin: 0;
+    }
+    .meta-row {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .tag {
+      font-size: 11px;
+      background: #313244;
+      padding: 2px 8px;
+      border-radius: 4px;
+    }
+    .warning {
+      background: #f9e2af;
+      color: #1e1e2e;
+      padding: 8px 12px;
+      border-radius: 4px;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1 class="token-name ${deprecated ? 'deprecated' : ''}">${token.name}</h1>
+    <span class="token-ref">${assetRef}</span>
+  </div>
+  
+  ${deprecated ? `<div class="warning">⚠️ Deprecated: ${typeof deprecated === 'string' ? deprecated : 'This icon is deprecated'}</div>` : ''}
+  
+  <div class="section">
+    <div class="section-title">Preview</div>
+    <div class="preview-container">
+      ${previewHtml}
+    </div>
+  </div>
+  
+  ${token.a11y?.label ? `
+  <div class="section">
+    <div class="section-title">Accessibility</div>
+    <div>aria-label: "${token.a11y.label}"</div>
+  </div>
+  ` : ''}
+  
+  ${token.meta.description ? `
+  <div class="section">
+    <div class="section-title">Description</div>
+    <div>${token.meta.description}</div>
+  </div>
+  ` : ''}
+  
+  ${token.meta.tags && token.meta.tags.length > 0 ? `
+  <div class="section">
+    <div class="section-title">Tags</div>
+    <div class="meta-row">
+      ${token.meta.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
+    </div>
+  </div>
+  ` : ''}
+  
+  <div class="section">
+    <div class="section-title">Usage</div>
+    <pre style="background: #313244; padding: 12px; border-radius: 6px; overflow-x: auto;"><code>&lt;Icon name="${token.name}" /&gt;</code></pre>
+  </div>
+</body>
+</html>`;
+  }
+
+  dispose(): void {
+    if (this.panel) {
+      this.panel.dispose();
+      this.panel = null;
+    }
+    this.state = null;
+  }
+}