inkbridge 0.1.0-beta.1

package/src/main.ts

@@ -0,0 +1,687 @@
+// Tailwind Tokens Plugin - Entry Point
+// Creates local color styles, a tokens preview page, and UI components.
+// Includes "Push to Code" feature for GitHub PR creation.
+// Universal plugin - configure for any project via Settings.
+
+import { loadConfig, saveConfig, GITHUB_CONFIG } from './config';
+import { TOKENS, COMPONENT_DEFS, applyScannedTokens, getCoreFontFamily, getThemeFontFamily, getThemeNames } from './tokens';
+import { rebuildColorIndex } from './colors';
+import { handleUIReady, handleImageResult, prefetchImages } from './dev-server';
+import { setImageMap, setSvgMap } from './image-cache';
+import { applyPack, type Pack } from './packs';
+import { handlePackResult, refreshPack } from './pack-provider';
+import { createOrUpdateStyles } from './variables';
+import { tailwindForNode } from './tailwind';
+import { detectComponentChanges } from './change-detection';
+import { pushToGitHub, pushToGitHubWithComponents, handleGitHubFetchResult, handlePatchCssResult, previewTokenChanges } from './github';
+import { buildDesignSystemSinglePage } from './design-system';
+import { waitForAllFonts } from './text-builder';
+import { getKnownStylesForFamily, initializeFontStyleIndex } from './font-style-resolver';
+import type { ResolvedTokenSourceMode, ScannedTokenMap, TokenSourceMode } from './token-source';
+
+const PACK_LOAD_ERROR = 'Dev server not reachable / pack not found.';
+const TOKEN_SOURCE_INFO_KEY = 'token_source_info';
+
+type TokenSourceInfo = {
+  source: string;
+  mode: ResolvedTokenSourceMode;
+  requestedMode?: TokenSourceMode;
+};
+
+let LAST_TOKEN_SOURCE_INFO: TokenSourceInfo | null = null;
+
+function getPackLoadErrorMessage(error?: string): string {
+  if (error === 'incompatible-schema-version' || error === 'incompatible-pack-version') {
+    return 'Incompatible scanner contract. Update plugin and scanner to matching versions.';
+  }
+  if (error === 'invalid-pack') {
+    return 'Invalid pack payload from dev server.';
+  }
+  return PACK_LOAD_ERROR;
+}
+
+function isOfflineError(error?: string): boolean {
+  return !error || error === 'timeout' || error === 'no-result';
+}
+
+function coerceTokenSourceInfo(raw: any): TokenSourceInfo {
+  const mode: ResolvedTokenSourceMode =
+    raw && (raw.mode === 'css' || raw.mode === 'dtcg' || raw.mode === 'embedded')
+      ? raw.mode
+      : 'embedded';
+  const requestedMode: TokenSourceMode | undefined =
+    raw && (raw.requestedMode === 'auto' || raw.requestedMode === 'css' || raw.requestedMode === 'dtcg')
+      ? raw.requestedMode
+      : undefined;
+  const source = raw && typeof raw.source === 'string' && raw.source.trim()
+    ? raw.source.trim()
+    : 'embedded:tokens.ts';
+  return { source, mode, requestedMode };
+}
+
+function getTokenSourceInfoFromPack(pack: Pack | null): TokenSourceInfo {
+  const raw = (pack && pack.tokens) ? (pack.tokens as ScannedTokenMap) : null;
+  if (!raw) return { source: 'embedded:tokens.ts', mode: 'embedded' };
+  return coerceTokenSourceInfo(raw);
+}
+
+async function loadTokenSourceInfoFromStorage(): Promise<TokenSourceInfo> {
+  if (LAST_TOKEN_SOURCE_INFO) return LAST_TOKEN_SOURCE_INFO;
+  const stored = await figma.clientStorage.getAsync(TOKEN_SOURCE_INFO_KEY);
+  LAST_TOKEN_SOURCE_INFO = coerceTokenSourceInfo(stored);
+  return LAST_TOKEN_SOURCE_INFO;
+}
+
+async function saveAndBroadcastTokenSourceInfo(info: TokenSourceInfo): Promise<void> {
+  LAST_TOKEN_SOURCE_INFO = info;
+  await figma.clientStorage.setAsync(TOKEN_SOURCE_INFO_KEY, info);
+  figma.ui.postMessage({ type: 'token-source-info', info: info });
+}
+
+async function postTokenSourceInfoToUI(): Promise<void> {
+  const info = await loadTokenSourceInfoFromStorage();
+  figma.ui.postMessage({ type: 'token-source-info', info: info });
+}
+
+// ---------------------------------------------------------------------------
+// Image src collection
+// ---------------------------------------------------------------------------
+
+function collectImageSrcsFromJsxTree(node: any, out: Set<string>): void {
+  if (!node || typeof node !== 'object') return;
+  const tag = node.tagName;
+  if (tag === 'img' || tag === 'Image') {
+    const src = node.props?.src;
+    if (typeof src === 'string' && src.length > 0 && src !== 'src') {
+      out.add(src);
+    }
+  }
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) collectImageSrcsFromJsxTree(child, out);
+  }
+}
+
+function collectImageSrcs(components: any[]): string[] {
+  const srcs = new Set<string>();
+  for (const comp of components) {
+    const analysis = comp?.analysis;
+    if (!analysis) continue;
+    collectImageSrcsFromJsxTree(analysis.jsxTree, srcs);
+    for (const story of analysis.stories ?? []) {
+      collectImageSrcsFromJsxTree(story.jsxTree, srcs);
+    }
+  }
+  return [...srcs];
+}
+
+// ----------------------- License Checking -----------------------
+
+let pendingLicenseResolve: ((tier: 'free' | 'pro') => void) | null = null;
+let licenseValidatingFromSettings = false;
+
+async function checkLicenseOnline(key: string): Promise<'free' | 'pro'> {
+  return new Promise<'free' | 'pro'>(function(resolve) {
+    pendingLicenseResolve = resolve;
+    figma.ui.postMessage({ type: 'validate-license', key: key });
+    setTimeout(function() {
+      if (pendingLicenseResolve === resolve) {
+        pendingLicenseResolve = null;
+        resolve('free');
+      }
+    }, 5000);
+  });
+}
+
+async function checkLicense(): Promise<'free' | 'pro'> {
+  const key = await figma.clientStorage.getAsync('license_key');
+  if (!key) return 'free';
+
+  const cachedTier = await figma.clientStorage.getAsync('license_tier') as string | null;
+  const cachedAt = await figma.clientStorage.getAsync('license_cache_at') as string | null;
+  const SEVEN_DAYS = 7 * 24 * 60 * 60 * 1000;
+
+  // Only trust cached 'pro' — never trust cached 'free' (avoids stale negatives)
+  if (cachedTier === 'pro' && cachedAt && (Date.now() - Number(cachedAt)) < SEVEN_DAYS) {
+    return 'pro';
+  }
+
+  return checkLicenseOnline(key as string);
+}
+
+// ----------------------- Generate Command -----------------------
+
+async function warmThemeFonts(): Promise<string[]> {
+  const baseFont = getCoreFontFamily(TOKENS) || 'Inter';
+  const themeNames = getThemeNames(TOKENS);
+  const fontsSet = new Set<string>();
+  fontsSet.add(baseFont);
+  fontsSet.add('Inter');
+
+  for (let i = 0; i < themeNames.length; i++) {
+    const theme = themeNames[i];
+    const sansFont = getThemeFontFamily(TOKENS, theme, 'sans') || baseFont;
+    const headingFont = getThemeFontFamily(TOKENS, theme, 'heading') || sansFont || baseFont;
+    if (sansFont) fontsSet.add(sansFont);
+    if (headingFont) fontsSet.add(headingFont);
+  }
+
+  const fontsToLoad = Array.from(fontsSet);
+  const failedFonts: string[] = [];
+  await initializeFontStyleIndex();
+
+  const fallbackStyles = ['Regular', 'Medium', 'SemiBold', 'Bold'];
+  for (const family of fontsToLoad) {
+    const knownStyles = getKnownStylesForFamily(family);
+    const stylesToTry = knownStyles.length > 0 ? knownStyles : fallbackStyles;
+    let loadedAny = false;
+    for (const style of stylesToTry) {
+      const ok = await figma.loadFontAsync({ family, style }).then(() => true).catch(() => false);
+      if (ok) loadedAny = true;
+    }
+    if (!loadedAny && family !== 'Inter') failedFonts.push(family);
+  }
+
+  return failedFonts;
+}
+
+async function runGenerate(): Promise<void> {
+  let shouldClose = true;
+  try {
+    await loadConfig();
+    // Show UI (hidden) so it can relay fetch requests
+    // code.js sandbox has no network access - UI iframe does the fetching
+    figma.showUI(__html__, { visible: false, width: 1, height: 1 });
+
+    figma.notify('🔄 Loading pack...');
+    const result = await refreshPack(GITHUB_CONFIG || undefined);
+
+    if (!result.success || !result.pack) {
+      const message = getPackLoadErrorMessage(result.error);
+      figma.notify('❌ ' + message);
+      figma.showUI(__html__, { width: 360, height: 400 });
+      if (isOfflineError(result.error)) {
+        figma.ui.postMessage({ type: 'show-view', view: 'offline' });
+      } else {
+        await loadConfig();
+        figma.ui.postMessage({ type: 'show-view', view: 'settings' });
+        const hasToken = await figma.clientStorage.getAsync('github_token');
+        figma.ui.postMessage({ type: 'config-loaded', config: GITHUB_CONFIG, hasToken: !!hasToken });
+        await postTokenSourceInfoToUI();
+        figma.ui.postMessage({ type: 'pack-load-error', message: message });
+      }
+      shouldClose = false;
+      return;
+    }
+
+    applyPack(result.pack);
+    applyScannedTokens(result.pack.tokens);
+    await saveAndBroadcastTokenSourceInfo(getTokenSourceInfoFromPack(result.pack));
+
+    const failedFonts = await warmThemeFonts();
+    if (failedFonts.length) {
+      figma.notify(`⚠️ Font(s) not found in Figma: ${failedFonts.join(', ')}. Enable them via Figma's Google Fonts panel or install locally. Falling back to Inter.`, { timeout: 6000 });
+    }
+    figma.notify('✅ Loaded ' + COMPONENT_DEFS.components.length + ' components');
+
+    // Pre-fetch all image srcs found in component definitions
+    const imageSrcs = collectImageSrcs(COMPONENT_DEFS.components as any[]);
+    if (imageSrcs.length > 0) {
+      // Extract port from the source URL (e.g. 'http://localhost:3000/api/...')
+      const portMatch = result.source?.match(/localhost:(\d+)/);
+      const devPort = portMatch ? parseInt(portMatch[1], 10) : 3000;
+      const { hashMap, svgMap } = await prefetchImages(imageSrcs, devPort);
+      setImageMap(hashMap);
+      setSvgMap(svgMap);
+    }
+
+    rebuildColorIndex(TOKENS);
+    createOrUpdateStyles();
+
+    // Single page build to avoid page-limit errors on free plans
+    buildDesignSystemSinglePage();
+    figma.notify('✅ Built Design System page (tokens + pack)');
+  } catch (e: any) {
+    figma.notify('❌ Failed: ' + e.message);
+  } finally {
+    if (shouldClose) {
+      await waitForAllFonts();
+      figma.closePlugin();
+    }
+  }
+}
+
+// ----------------------- Menu Command Handling -----------------------
+
+function debugSelection(): void {
+  const selection = figma.currentPage.selection || [];
+  if (selection.length === 0) {
+    figma.notify('No selection. Select a node and run Debug Selection.');
+    return;
+  }
+
+  const payload: any[] = [];
+  for (const node of selection) {
+    const entry: any = {
+      id: node.id,
+      name: node.name,
+      type: node.type,
+      width: (node as any).width,
+      height: (node as any).height,
+    };
+
+    if ('layoutMode' in node) {
+      entry.layoutMode = (node as any).layoutMode;
+      entry.layoutWrap = (node as any).layoutWrap;
+      entry.itemSpacing = (node as any).itemSpacing;
+      entry.counterAxisSpacing = (node as any).counterAxisSpacing;
+      entry.primaryAxisSizingMode = (node as any).primaryAxisSizingMode;
+      entry.counterAxisSizingMode = (node as any).counterAxisSizingMode;
+      entry.primaryAxisAlignItems = (node as any).primaryAxisAlignItems;
+      entry.counterAxisAlignItems = (node as any).counterAxisAlignItems;
+      entry.padding = {
+        top: (node as any).paddingTop,
+        right: (node as any).paddingRight,
+        bottom: (node as any).paddingBottom,
+        left: (node as any).paddingLeft,
+      };
+    }
+
+    if ('layoutAlign' in node) {
+      entry.layoutAlign = (node as any).layoutAlign;
+    }
+
+    if ('layoutGrow' in node) {
+      entry.layoutGrow = (node as any).layoutGrow;
+    }
+
+    if ('layoutPositioning' in node) {
+      entry.layoutPositioning = (node as any).layoutPositioning;
+    }
+
+    if ('children' in node) {
+      const childSummary: any[] = [];
+      const children = (node as any).children || [];
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        childSummary.push({
+          name: child.name,
+          type: child.type,
+          width: child.width,
+          height: child.height,
+          layoutGrow: child.layoutGrow,
+          layoutAlign: child.layoutAlign,
+          layoutPositioning: child.layoutPositioning,
+        });
+      }
+      entry.children = childSummary;
+    }
+
+    payload.push(entry);
+  }
+
+  console.log('[TailwindTokens][DebugSelection]', payload);
+  figma.notify('Selection logged to console.');
+}
+
+async function handleCommand(command: string): Promise<void> {
+  switch (command) {
+    case 'push': {
+      // Show hidden UI so it can relay the license validation fetch
+      figma.showUI(__html__, { visible: false, width: 1, height: 1 });
+      const tier = await checkLicense();
+      if (tier !== 'pro') {
+        figma.showUI(__html__, { visible: true, width: 320, height: 160 });
+        figma.ui.postMessage({ type: 'show-view', view: 'upgrade' });
+        break;
+      }
+      figma.showUI(__html__, { visible: true, width: 360, height: 520 });
+      figma.ui.postMessage({ type: 'show-view', view: 'sync' });
+      figma.ui.postMessage({ type: 'changes-detected', changes: { tokens: false, components: [] } });
+      figma.ui.postMessage({ type: 'sync-status', message: 'Detecting changes...', success: null });
+      figma.ui.postMessage({ type: 'auto-start-detect' });
+      break;
+    }
+
+    case 'configure': {
+      figma.showUI(__html__, { width: 320, height: 340 });
+      figma.ui.postMessage({ type: 'show-view', view: 'configure' });
+      const existingToken = await figma.clientStorage.getAsync('github_token');
+      figma.ui.postMessage({ type: 'token-loaded', hasToken: !!existingToken });
+      break;
+    }
+
+    case 'settings': {
+      await loadConfig();
+      const tokenExists = await figma.clientStorage.getAsync('github_token');
+      const licenseKeyExists = await figma.clientStorage.getAsync('license_key');
+      const cachedSettingsTier = await figma.clientStorage.getAsync('license_tier') as string | null;
+      figma.showUI(__html__, { width: 320, height: 400 });
+      figma.ui.postMessage({ type: 'show-view', view: 'settings' });
+      figma.ui.postMessage({ type: 'config-loaded', config: GITHUB_CONFIG, hasToken: !!tokenExists });
+      figma.ui.postMessage({ type: 'license-key-loaded', hasKey: !!licenseKeyExists, tier: cachedSettingsTier || 'free' });
+      await postTokenSourceInfoToUI();
+      // Re-validate in background so badge is always accurate
+      if (licenseKeyExists) {
+        figma.ui.postMessage({ type: 'validate-license', key: licenseKeyExists as string });
+      }
+      break;
+    }
+
+    case 'debug-selection': {
+      debugSelection();
+      figma.closePlugin();
+      break;
+    }
+
+    case 'generate':
+    default:
+      await runGenerate();
+      break;
+  }
+}
+
+// ----------------------- UI Message Handler -----------------------
+
+figma.ui.onmessage = async (msg: any) => {
+  // Handle UI iframe ready signal
+  if (msg.type === 'ui-ready') {
+    handleUIReady();
+    return;
+  }
+
+  // Handle license validation result from UI iframe
+  if (msg.type === 'license-result') {
+    const tier: 'free' | 'pro' = msg.tier === 'pro' ? 'pro' : 'free';
+    await figma.clientStorage.setAsync('license_tier', tier);
+    await figma.clientStorage.setAsync('license_cache_at', String(Date.now()));
+    if (pendingLicenseResolve) {
+      pendingLicenseResolve(tier);
+      pendingLicenseResolve = null;
+    }
+    if (licenseValidatingFromSettings) {
+      licenseValidatingFromSettings = false;
+      const statusMsg = tier === 'pro' ? 'Pro license activated! Redirecting...' : 'Invalid license key.';
+      figma.ui.postMessage({ type: 'settings-status', message: statusMsg, success: tier === 'pro' });
+      if (tier === 'pro') {
+        setTimeout(() => {
+          figma.ui.postMessage({ type: 'show-view', view: 'overview' });
+        }, 1200);
+      }
+    }
+    // Always push updated badge to settings (harmless if settings isn't open)
+    const currentKey = await figma.clientStorage.getAsync('license_key');
+    figma.ui.postMessage({ type: 'license-key-loaded', hasKey: !!currentKey, tier: tier });
+    return;
+  }
+
+  // Handle pack fetch result from UI iframe
+  if (msg.type === 'pack-result') {
+    handlePackResult(msg);
+    return;
+  }
+
+  // Handle image fetch result from UI iframe
+  if (msg.type === 'image-result') {
+    handleImageResult(msg);
+    return;
+  }
+
+  // Handle GitHub API fetch result from UI iframe
+  if (msg.type === 'github-fetch-result') {
+    handleGitHubFetchResult(msg);
+    return;
+  }
+
+  if (msg.type === 'patch-css-result') {
+    handlePatchCssResult(msg);
+    return;
+  }
+
+  if (msg.type === 'save-github-token') {
+    try {
+      await figma.clientStorage.setAsync('github_token', msg.token);
+      figma.ui.postMessage({ type: 'config-status', message: 'Token saved successfully!', success: true });
+      setTimeout(() => {
+        figma.ui.postMessage({ type: 'show-view', view: 'overview' });
+      }, 1000);
+    } catch (e: any) {
+      figma.ui.postMessage({ type: 'config-status', message: 'Failed to save token: ' + e.message, success: false });
+    }
+  }
+
+  if (msg.type === 'save-settings') {
+    try {
+      const newConfig = {
+        owner: msg.owner || '',
+        repo: msg.repo || '',
+        baseBranch: msg.baseBranch || 'main',
+        tokenPath: msg.tokenPath || 'design-tokens/tokens.dtcg.json',
+        tokenSourceMode: msg.tokenSourceMode || 'auto',
+        cssTokenPath: msg.cssTokenPath || '',
+        syncDtcgOnPush: msg.syncDtcgOnPush === true,
+        allowNewTokensFromFigma: msg.allowNewTokensFromFigma === true,
+        newTokenPrefixes: Array.isArray(msg.newTokenPrefixes) ? msg.newTokenPrefixes : [],
+        projectName: msg.projectName || '',
+      };
+      await saveConfig(newConfig);
+
+      if (msg.token) {
+        await figma.clientStorage.setAsync('github_token', msg.token);
+      }
+
+      if (msg.licenseKey) {
+        await figma.clientStorage.setAsync('license_key', msg.licenseKey);
+        await figma.clientStorage.setAsync('license_tier', '');
+        await figma.clientStorage.setAsync('license_cache_at', '');
+        licenseValidatingFromSettings = true;
+        figma.ui.postMessage({ type: 'settings-status', message: 'Validating license key...', success: null });
+        figma.ui.postMessage({ type: 'validate-license', key: msg.licenseKey });
+      } else {
+        figma.ui.postMessage({ type: 'settings-status', message: 'Settings saved!', success: true });
+      }
+
+      // After saving settings (without license key change), go back to overview
+      if (!licenseValidatingFromSettings) {
+        setTimeout(() => {
+          figma.ui.postMessage({ type: 'show-view', view: 'overview' });
+        }, 800);
+      }
+    } catch (e: any) {
+      figma.ui.postMessage({ type: 'settings-status', message: 'Failed: ' + e.message, success: false });
+    }
+  }
+
+  if (msg.type === 'push-to-github') {
+    try {
+      figma.ui.postMessage({ type: 'push-status', message: 'Creating branch...', success: null });
+      const prUrl = await pushToGitHub(msg.commitMessage, msg.prDescription);
+      figma.ui.postMessage({ type: 'push-status', message: 'PR created!', success: true, url: prUrl });
+    } catch (e: any) {
+      figma.ui.postMessage({ type: 'push-status', message: 'Failed: ' + e.message, success: false });
+    }
+  }
+
+  if (msg.type === 'detect-changes') {
+    try {
+      await loadConfig();
+      const pushToken = await figma.clientStorage.getAsync('github_token') as string | null;
+      if (!pushToken) {
+        figma.ui.postMessage({ type: 'show-view', view: 'settings' });
+        figma.ui.postMessage({ type: 'config-loaded', config: GITHUB_CONFIG, hasToken: false });
+        await postTokenSourceInfoToUI();
+        figma.ui.postMessage({ type: 'pack-load-error', message: 'GitHub token missing. Add it in Project Settings.' });
+        return;
+      }
+
+      const result = await refreshPack(GITHUB_CONFIG || undefined);
+      if (!result.success || !result.pack) {
+        const message = getPackLoadErrorMessage(result.error);
+        if (isOfflineError(result.error)) {
+          figma.ui.postMessage({ type: 'show-view', view: 'offline' });
+        } else {
+          figma.ui.postMessage({ type: 'show-view', view: 'settings' });
+          figma.ui.postMessage({ type: 'config-loaded', config: GITHUB_CONFIG, hasToken: !!pushToken });
+          await postTokenSourceInfoToUI();
+          figma.ui.postMessage({ type: 'pack-load-error', message: message });
+        }
+        return;
+      }
+      applyPack(result.pack);
+      applyScannedTokens(result.pack.tokens);
+      await saveAndBroadcastTokenSourceInfo(getTokenSourceInfoFromPack(result.pack));
+
+      // Detect changes between Figma and code
+      const changes = detectComponentChanges();
+      if ((changes as any).error) {
+        figma.showUI(__html__, { width: 360, height: 520 });
+        figma.ui.postMessage({ type: 'show-view', view: 'sync' });
+        figma.ui.postMessage({ type: 'config-loaded', config: GITHUB_CONFIG, hasToken: !!pushToken });
+        await postTokenSourceInfoToUI();
+        figma.ui.postMessage({ type: 'changes-detected', changes: { tokens: false, components: [] } });
+        figma.ui.postMessage({ type: 'sync-status', message: String((changes as any).error), success: false });
+        return;
+      }
+      const componentChanges = Array.isArray((changes as any).changes) ? (changes as any).changes : [];
+      const tokenPreview = await previewTokenChanges(pushToken);
+      const hasTokenChanges = tokenPreview.hasChanges;
+
+      if (!hasTokenChanges && componentChanges.length === 0) {
+        figma.showUI(__html__, { width: 360, height: 520 });
+        figma.ui.postMessage({ type: 'show-view', view: 'sync' });
+        figma.ui.postMessage({ type: 'config-loaded', config: GITHUB_CONFIG, hasToken: !!pushToken });
+        await postTokenSourceInfoToUI();
+        figma.ui.postMessage({ type: 'changes-detected', changes: { tokens: false, components: [] } });
+        figma.ui.postMessage({
+          type: 'sync-status',
+          message: 'All tokens and components are already in sync. Nothing to commit.',
+          success: true,
+        });
+        return;
+      }
+
+      // Show sync view with detected changes
+      figma.showUI(__html__, { width: 360, height: 520 });
+      figma.ui.postMessage({ type: 'show-view', view: 'sync' });
+      figma.ui.postMessage({ type: 'config-loaded', config: GITHUB_CONFIG, hasToken: !!pushToken });
+      await postTokenSourceInfoToUI();
+      figma.ui.postMessage({ type: 'changes-detected', changes: { tokens: hasTokenChanges, components: componentChanges } });
+    } catch (e: any) {
+      figma.showUI(__html__, { width: 360, height: 520 });
+      figma.ui.postMessage({ type: 'show-view', view: 'sync' });
+      figma.ui.postMessage({ type: 'sync-status', message: 'Failed: ' + e.message, success: false });
+    }
+  }
+
+  if (msg.type === 'sync-to-github') {
+    try {
+      figma.notify('Sync request received', { timeout: 1200 });
+      figma.ui.postMessage({ type: 'sync-status', message: 'Starting sync...', success: null });
+      const prUrl = await pushToGitHubWithComponents(
+        msg.commitMessage,
+        msg.prDescription,
+        msg.includeTokens,
+        msg.components || [],
+        (message: string) => {
+          figma.ui.postMessage({ type: 'sync-status', message, success: null });
+        }
+      );
+      figma.ui.postMessage({ type: 'sync-status', message: 'PR created!', success: true, url: prUrl });
+    } catch (e: any) {
+      figma.notify('Sync failed: ' + e.message, { timeout: 2500 });
+      figma.ui.postMessage({ type: 'sync-status', message: 'Failed: ' + e.message, success: false });
+    }
+  }
+
+  if (msg.type === 'show-push') {
+    await loadConfig();
+    const hasPushToken = await figma.clientStorage.getAsync('github_token');
+    figma.ui.postMessage({ type: 'show-view', view: 'push' });
+    figma.ui.postMessage({ type: 'config-loaded', config: GITHUB_CONFIG, hasToken: !!hasPushToken });
+    await postTokenSourceInfoToUI();
+  }
+
+  if (msg.type === 'show-overview') {
+    figma.ui.postMessage({ type: 'show-view', view: 'overview' });
+  }
+
+  if (msg.type === 'retry-pack-load') {
+    figma.notify('🔄 Retrying...');
+    await loadConfig();
+    const retryResult = await refreshPack(GITHUB_CONFIG || undefined);
+    if (!retryResult.success || !retryResult.pack) {
+      const retryMessage = getPackLoadErrorMessage(retryResult.error);
+      figma.notify('❌ ' + retryMessage);
+      if (isOfflineError(retryResult.error)) {
+        figma.ui.postMessage({ type: 'show-view', view: 'offline' });
+      } else {
+        await loadConfig();
+        figma.ui.postMessage({ type: 'show-view', view: 'settings' });
+        const hasToken = await figma.clientStorage.getAsync('github_token');
+        figma.ui.postMessage({ type: 'config-loaded', config: GITHUB_CONFIG, hasToken: !!hasToken });
+        await postTokenSourceInfoToUI();
+        figma.ui.postMessage({ type: 'pack-load-error', message: retryMessage });
+      }
+      return;
+    }
+    applyPack(retryResult.pack);
+    applyScannedTokens(retryResult.pack.tokens);
+    await saveAndBroadcastTokenSourceInfo(getTokenSourceInfoFromPack(retryResult.pack));
+    const failedFonts = await warmThemeFonts();
+    if (failedFonts.length) {
+      figma.notify(`⚠️ Font(s) not found in Figma: ${failedFonts.join(', ')}. Falling back to Inter.`, { timeout: 6000 });
+    }
+    rebuildColorIndex(TOKENS);
+    createOrUpdateStyles();
+    buildDesignSystemSinglePage();
+    figma.notify('✅ Built Design System page');
+    await waitForAllFonts();
+    figma.closePlugin();
+  }
+
+  if (msg.type === 'resize') {
+    const h = typeof msg.height === 'number' ? Math.max(80, msg.height) : 400;
+    figma.ui.resize(320, h);
+  }
+
+  if (msg.type === 'show-settings') {
+    await loadConfig();
+    const tokenExists = await figma.clientStorage.getAsync('github_token');
+    const licenseKeyExists = await figma.clientStorage.getAsync('license_key');
+    const cachedMsgTier = await figma.clientStorage.getAsync('license_tier') as string | null;
+    figma.ui.postMessage({ type: 'show-view', view: 'settings' });
+    figma.ui.postMessage({ type: 'config-loaded', config: GITHUB_CONFIG, hasToken: !!tokenExists });
+    figma.ui.postMessage({ type: 'license-key-loaded', hasKey: !!licenseKeyExists, tier: cachedMsgTier || 'free' });
+    await postTokenSourceInfoToUI();
+    // Re-validate in background so badge is always accurate
+    if (licenseKeyExists) {
+      figma.ui.postMessage({ type: 'validate-license', key: licenseKeyExists as string });
+    }
+  }
+};
+
+// ----------------------- Dev Mode Codegen -----------------------
+
+if (figma.codegen && typeof figma.codegen.on === 'function') {
+  // Initialize color index for codegen
+  rebuildColorIndex(TOKENS);
+
+  figma.codegen.on('generate', (event: any) => {
+    try {
+      const node = event.node;
+      const classes = tailwindForNode(node);
+      const code = 'className="' + classes + '"';
+      return [{ title: 'Tailwind CSS', code, language: 'PLAINTEXT' }];
+    } catch (e: any) {
+      return [{ title: 'Tailwind CSS', code: '// Unable to generate: ' + e.message, language: 'PLAINTEXT' }];
+    }
+  });
+}
+
+// ----------------------- Main Entry Point -----------------------
+
+if (figma.command) {
+  handleCommand(figma.command);
+} else {
+  // Default behavior (backward compatibility)
+  runGenerate();
+}