@bitovi/vybit 0.4.4

package/server/queue.ts

@@ -0,0 +1,281 @@
+// In-memory patch queue with draft + commits model
+
+import { EventEmitter } from 'node:events';
+import type { Patch, PatchStatus, PatchSummary, Commit, CommitStatus, CommitSummary } from '../shared/types.js';
+
+const emitter = new EventEmitter();
+
+function toSummary(p: Patch): PatchSummary {
+  return {
+    id: p.id,
+    kind: p.kind,
+    elementKey: p.elementKey,
+    status: p.status,
+    originalClass: p.originalClass,
+    newClass: p.newClass,
+    property: p.property,
+    timestamp: p.timestamp,
+    component: p.component,
+    errorMessage: p.errorMessage,
+    message: p.message,
+    image: p.image,
+  };
+}
+
+function toCommitSummary(c: Commit): CommitSummary {
+  return {
+    id: c.id,
+    status: c.status,
+    timestamp: c.timestamp,
+    patches: c.patches.map(toSummary),
+  };
+}
+
+// Mutable draft: accumulates patches as the user stages them (preserves insertion order)
+const draftPatches: Patch[] = [];
+
+// Finalized commits
+const commits: Commit[] = [];
+
+export function addPatch(patch: Patch): Patch {
+  // Dedup by ID first — if an identical PATCH_STAGED arrives twice (e.g. from
+  // two overlays connected to the same server) just ignore the duplicate.
+  if (draftPatches.some(p => p.id === patch.id)) {
+    return patch;
+  }
+
+  if (patch.kind === 'class-change') {
+    // Dedup: if a staged patch exists for the same elementKey+property, replace it
+    const existingIdx = draftPatches.findIndex(
+      p => p.kind === 'class-change' && p.elementKey === patch.elementKey && p.property === patch.property && p.status === 'staged'
+    );
+    if (existingIdx !== -1) {
+      draftPatches.splice(existingIdx, 1);
+    }
+  }
+  // Message patches are always appended (no dedup)
+  draftPatches.push(patch);
+  return patch;
+}
+
+export function commitDraft(ids: string[]): Commit {
+  const idSet = new Set(ids);
+  const commitPatches: Patch[] = [];
+
+  // Extract matching patches from draft, preserving order
+  for (let i = draftPatches.length - 1; i >= 0; i--) {
+    if (idSet.has(draftPatches[i].id) && draftPatches[i].status === 'staged') {
+      draftPatches[i].status = 'committed';
+      commitPatches.unshift(draftPatches[i]);
+      draftPatches.splice(i, 1);
+    }
+  }
+
+  const commit: Commit = {
+    id: crypto.randomUUID(),
+    patches: commitPatches,
+    status: 'committed',
+    timestamp: new Date().toISOString(),
+  };
+
+  // Set commitId on each patch
+  for (const p of commit.patches) {
+    p.commitId = commit.id;
+  }
+
+  commits.push(commit);
+  if (commitPatches.length > 0) emitter.emit('committed');
+  return commit;
+}
+
+/** @deprecated Use commitDraft instead. Backward compat shim. */
+export function commitPatches(ids: string[]): number {
+  const commit = commitDraft(ids);
+  return commit.patches.length;
+}
+
+/** Returns the oldest Commit with status 'committed', or null. */
+export function getNextCommitted(): Commit | null {
+  return commits.find(c => c.status === 'committed') ?? null;
+}
+
+export function markCommitImplementing(commitId: string): void {
+  const commit = commits.find(c => c.id === commitId);
+  if (!commit) return;
+  commit.status = 'implementing';
+  for (const p of commit.patches) {
+    if (p.status === 'committed') p.status = 'implementing';
+  }
+}
+
+export interface PatchResult {
+  patchId: string;
+  success: boolean;
+  error?: string;
+}
+
+export function markCommitImplemented(commitId: string, results: PatchResult[]): void {
+  const commit = commits.find(c => c.id === commitId);
+  if (!commit) return;
+
+  // Apply results to class-change patches
+  for (const result of results) {
+    const patch = commit.patches.find(p => p.id === result.patchId);
+    if (!patch) continue;
+    patch.status = result.success ? 'implemented' : 'error';
+    if (result.error) patch.errorMessage = result.error;
+  }
+
+  // Message patches are always "implemented" (informational, no action needed)
+  for (const patch of commit.patches) {
+    if (patch.kind === 'message') patch.status = 'implemented';
+  }
+
+  const classChanges = commit.patches.filter(p => p.kind === 'class-change');
+  const allSucceeded = classChanges.every(p => p.status === 'implemented');
+  const allFailed = classChanges.every(p => p.status === 'error');
+
+  commit.status = classChanges.length === 0 ? 'implemented'  // message-only commit
+               : allSucceeded               ? 'implemented'
+               : allFailed                   ? 'error'
+               :                               'partial';
+}
+
+/** Legacy: mark individual patch IDs as implementing (backward compat for old MCP tools). */
+export function markImplementing(ids: string[]): number {
+  const idSet = new Set(ids);
+  let moved = 0;
+  for (const commit of commits) {
+    for (const p of commit.patches) {
+      if (idSet.has(p.id) && p.status === 'committed') {
+        p.status = 'implementing';
+        moved++;
+      }
+    }
+    // If all patches in commit are implementing, update commit status
+    if (commit.status === 'committed' && commit.patches.every(p => p.status !== 'committed')) {
+      commit.status = 'implementing';
+    }
+  }
+  return moved;
+}
+
+/** Legacy: mark individual patch IDs as implemented (backward compat). */
+export function markImplemented(ids: string[]): number {
+  const idSet = new Set(ids);
+  let moved = 0;
+  for (const commit of commits) {
+    for (const p of commit.patches) {
+      if (idSet.has(p.id) && (p.status === 'committed' || p.status === 'implementing')) {
+        p.status = 'implemented';
+        moved++;
+      }
+    }
+    // Auto-succeed message patches if all class-changes done
+    const classChanges = commit.patches.filter(p => p.kind === 'class-change');
+    if (classChanges.length > 0 && classChanges.every(p => p.status === 'implemented')) {
+      for (const p of commit.patches) {
+        if (p.kind === 'message' && p.status !== 'implemented') p.status = 'implemented';
+      }
+      commit.status = 'implemented';
+    }
+  }
+  return moved;
+}
+
+export function getByStatus(status: PatchStatus): Patch[] {
+  const result: Patch[] = [];
+  // Draft patches
+  for (const p of draftPatches) {
+    if (p.status === status) result.push(p);
+  }
+  // Commit patches
+  for (const commit of commits) {
+    for (const p of commit.patches) {
+      if (p.status === status) result.push(p);
+    }
+  }
+  return result;
+}
+
+export function getCounts(): { staged: number; committed: number; implementing: number; implemented: number } {
+  const counts = { staged: 0, committed: 0, implementing: 0, implemented: 0 };
+  for (const p of draftPatches) {
+    if (p.status in counts) counts[p.status as keyof typeof counts]++;
+  }
+  for (const commit of commits) {
+    for (const p of commit.patches) {
+      if (p.status in counts) counts[p.status as keyof typeof counts]++;
+    }
+  }
+  return counts;
+}
+
+/** Build the full QUEUE_UPDATE payload */
+export function getQueueUpdate() {
+  // Count commits by status
+  let committedCount = 0;
+  let implementingCount = 0;
+  let implementedCount = 0;
+  let partialCount = 0;
+  let errorCount = 0;
+  for (const c of commits) {
+    switch (c.status) {
+      case 'committed': committedCount++; break;
+      case 'implementing': implementingCount++; break;
+      case 'implemented': implementedCount++; break;
+      case 'partial': partialCount++; break;
+      case 'error': errorCount++; break;
+    }
+  }
+
+  return {
+    draftCount: draftPatches.length,
+    committedCount,
+    implementingCount,
+    implementedCount,
+    partialCount,
+    errorCount,
+    draft: draftPatches.map(toSummary),
+    commits: commits.map(toCommitSummary),
+  };
+}
+
+/** @deprecated Use getQueueUpdate instead. Backward compat shim. */
+export function getPatchUpdate() {
+  const allPatches: Patch[] = [...draftPatches];
+  for (const c of commits) allPatches.push(...c.patches);
+  const counts = getCounts();
+  return {
+    ...counts,
+    patches: {
+      staged: allPatches.filter(p => p.status === 'staged').map(toSummary),
+      committed: allPatches.filter(p => p.status === 'committed').map(toSummary),
+      implementing: allPatches.filter(p => p.status === 'implementing').map(toSummary),
+      implemented: allPatches.filter(p => p.status === 'implemented').map(toSummary),
+    },
+  };
+}
+
+export function discardDraftPatch(id: string): boolean {
+  // Remove ALL patches with this ID (guards against any duplicates that
+  // slipped through addPatch before the ID-dedup was in place).
+  const before = draftPatches.length;
+  const remaining = draftPatches.filter(p => p.id !== id);
+  draftPatches.length = 0;
+  draftPatches.push(...remaining);
+  return remaining.length < before;
+}
+
+export function clearAll(): { staged: number; committed: number; implementing: number; implemented: number } {
+  const counts = getCounts();
+  draftPatches.length = 0;
+  commits.length = 0;
+  return counts;
+}
+
+/** Subscribe to commit events. Returns an unsubscribe function. */
+export function onCommitted(listener: () => void): () => void {
+  emitter.on('committed', listener);
+  return () => { emitter.off('committed', listener); };
+}

package/server/tailwind-adapter.ts

@@ -0,0 +1,17 @@
+// Shared interface for Tailwind version adapters.
+// Both v3 and v4 adapters implement this contract so the rest of
+// the server code is version-agnostic.
+
+export interface TailwindThemeSubset {
+  spacing: Record<string, string>;
+  colors: Record<string, unknown>;
+  fontSize: Record<string, unknown>;
+  fontWeight: Record<string, unknown>;
+  borderRadius: Record<string, string>;
+}
+
+export interface TailwindAdapter {
+  readonly version: 3 | 4;
+  resolveTailwindConfig(): Promise<TailwindThemeSubset>;
+  generateCssForClasses(classes: string[]): Promise<string>;
+}

package/server/tailwind-v3.ts

@@ -0,0 +1,159 @@
+// Tailwind v3 adapter — uses resolveConfig + PostCSS from the target project's tailwindcss v3.
+
+import { existsSync, readFileSync } from "fs";
+import { resolve } from "path";
+import { createRequire } from "module";
+import type { TailwindAdapter, TailwindThemeSubset } from "./tailwind-adapter.js";
+
+let cached: TailwindThemeSubset | null = null;
+
+const defaultTheme: TailwindThemeSubset = {
+  spacing: {
+    "0": "0px", px: "1px",
+    "0.5": "0.125rem", "1": "0.25rem", "1.5": "0.375rem", "2": "0.5rem",
+    "2.5": "0.625rem", "3": "0.75rem", "3.5": "0.875rem", "4": "1rem",
+    "5": "1.25rem", "6": "1.5rem", "7": "1.75rem", "8": "2rem",
+    "9": "2.25rem", "10": "2.5rem", "11": "2.75rem", "12": "3rem",
+    "14": "3.5rem", "16": "4rem", "20": "5rem", "24": "6rem",
+    "28": "7rem", "32": "8rem", "36": "9rem", "40": "10rem",
+    "44": "11rem", "48": "12rem", "52": "13rem", "56": "14rem",
+    "60": "15rem", "64": "16rem", "72": "18rem", "80": "20rem", "96": "24rem",
+  },
+  colors: {
+    inherit: "inherit", current: "currentColor", transparent: "transparent",
+    black: "#000", white: "#fff",
+    slate: { "50": "#f8fafc", "100": "#f1f5f9", "200": "#e2e8f0", "300": "#cbd5e1", "400": "#94a3b8", "500": "#64748b", "600": "#475569", "700": "#334155", "800": "#1e293b", "900": "#0f172a", "950": "#020617" },
+    gray: { "50": "#f9fafb", "100": "#f3f4f6", "200": "#e5e7eb", "300": "#d1d5db", "400": "#9ca3af", "500": "#6b7280", "600": "#4b5563", "700": "#374151", "800": "#1f2937", "900": "#111827", "950": "#030712" },
+    zinc: { "50": "#fafafa", "100": "#f4f4f5", "200": "#e4e4e7", "300": "#d4d4d8", "400": "#a1a1aa", "500": "#71717a", "600": "#52525b", "700": "#3f3f46", "800": "#27272a", "900": "#18181b", "950": "#09090b" },
+    neutral: { "50": "#fafafa", "100": "#f5f5f5", "200": "#e5e5e5", "300": "#d4d4d4", "400": "#a3a3a3", "500": "#737373", "600": "#525252", "700": "#404040", "800": "#262626", "900": "#171717", "950": "#0a0a0a" },
+    stone: { "50": "#fafaf9", "100": "#f5f5f4", "200": "#e7e5e4", "300": "#d6d3d1", "400": "#a8a29e", "500": "#78716c", "600": "#57534e", "700": "#44403c", "800": "#292524", "900": "#1c1917", "950": "#0c0a09" },
+    red: { "50": "#fef2f2", "100": "#fee2e2", "200": "#fecaca", "300": "#fca5a5", "400": "#f87171", "500": "#ef4444", "600": "#dc2626", "700": "#b91c1c", "800": "#991b1b", "900": "#7f1d1d", "950": "#450a0a" },
+    orange: { "50": "#fff7ed", "100": "#ffedd5", "200": "#fed7aa", "300": "#fdba74", "400": "#fb923c", "500": "#f97316", "600": "#ea580c", "700": "#c2410c", "800": "#9a3412", "900": "#7c2d12", "950": "#431407" },
+    amber: { "50": "#fffbeb", "100": "#fef3c7", "200": "#fde68a", "300": "#fcd34d", "400": "#fbbf24", "500": "#f59e0b", "600": "#d97706", "700": "#b45309", "800": "#92400e", "900": "#78350f", "950": "#451a03" },
+    yellow: { "50": "#fefce8", "100": "#fef9c3", "200": "#fef08a", "300": "#fde047", "400": "#facc15", "500": "#eab308", "600": "#ca8a04", "700": "#a16207", "800": "#854d0e", "900": "#713f12", "950": "#422006" },
+    lime: { "50": "#f7fee7", "100": "#ecfccb", "200": "#d9f99d", "300": "#bef264", "400": "#a3e635", "500": "#84cc16", "600": "#65a30d", "700": "#4d7c0f", "800": "#3f6212", "900": "#365314", "950": "#1a2e05" },
+    green: { "50": "#f0fdf4", "100": "#dcfce7", "200": "#bbf7d0", "300": "#86efac", "400": "#4ade80", "500": "#22c55e", "600": "#16a34a", "700": "#15803d", "800": "#166534", "900": "#14532d", "950": "#052e16" },
+    emerald: { "50": "#ecfdf5", "100": "#d1fae5", "200": "#a7f3d0", "300": "#6ee7b7", "400": "#34d399", "500": "#10b981", "600": "#059669", "700": "#047857", "800": "#065f46", "900": "#064e3b", "950": "#022c22" },
+    teal: { "50": "#f0fdfa", "100": "#ccfbf1", "200": "#99f6e4", "300": "#5eead4", "400": "#2dd4bf", "500": "#14b8a6", "600": "#0d9488", "700": "#0f766e", "800": "#115e59", "900": "#134e4a", "950": "#042f2e" },
+    cyan: { "50": "#ecfeff", "100": "#cffafe", "200": "#a5f3fc", "300": "#67e8f9", "400": "#22d3ee", "500": "#06b6d4", "600": "#0891b2", "700": "#0e7490", "800": "#155e75", "900": "#164e63", "950": "#083344" },
+    sky: { "50": "#f0f9ff", "100": "#e0f2fe", "200": "#bae6fd", "300": "#7dd3fc", "400": "#38bdf8", "500": "#0ea5e9", "600": "#0284c7", "700": "#0369a1", "800": "#075985", "900": "#0c4a6e", "950": "#082f49" },
+    blue: { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8", "800": "#1e40af", "900": "#1e3a8a", "950": "#172554" },
+    indigo: { "50": "#eef2ff", "100": "#e0e7ff", "200": "#c7d2fe", "300": "#a5b4fc", "400": "#818cf8", "500": "#6366f1", "600": "#4f46e5", "700": "#4338ca", "800": "#3730a3", "900": "#312e81", "950": "#1e1b4b" },
+    violet: { "50": "#f5f3ff", "100": "#ede9fe", "200": "#ddd6fe", "300": "#c4b5fd", "400": "#a78bfa", "500": "#8b5cf6", "600": "#7c3aed", "700": "#6d28d9", "800": "#5b21b6", "900": "#4c1d95", "950": "#2e1065" },
+    purple: { "50": "#faf5ff", "100": "#f3e8ff", "200": "#e9d5ff", "300": "#d8b4fe", "400": "#c084fc", "500": "#a855f7", "600": "#9333ea", "700": "#7e22ce", "800": "#6b21a8", "900": "#581c87", "950": "#3b0764" },
+    fuchsia: { "50": "#fdf4ff", "100": "#fae8ff", "200": "#f5d0fe", "300": "#f0abfc", "400": "#e879f9", "500": "#d946ef", "600": "#c026d3", "700": "#a21caf", "800": "#86198f", "900": "#701a75", "950": "#4a044e" },
+    pink: { "50": "#fdf2f8", "100": "#fce7f3", "200": "#fbcfe8", "300": "#f9a8d4", "400": "#f472b6", "500": "#ec4899", "600": "#db2777", "700": "#be185d", "800": "#9d174d", "900": "#831843", "950": "#500724" },
+    rose: { "50": "#fff1f2", "100": "#ffe4e6", "200": "#fecdd3", "300": "#fda4af", "400": "#fb7185", "500": "#f43f5e", "600": "#e11d48", "700": "#be123c", "800": "#9f1239", "900": "#881337", "950": "#4c0519" },
+  },
+  fontSize: {
+    xs: ["0.75rem", { lineHeight: "1rem" }],
+    sm: ["0.875rem", { lineHeight: "1.25rem" }],
+    base: ["1rem", { lineHeight: "1.5rem" }],
+    lg: ["1.125rem", { lineHeight: "1.75rem" }],
+    xl: ["1.25rem", { lineHeight: "1.75rem" }],
+    "2xl": ["1.5rem", { lineHeight: "2rem" }],
+    "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
+    "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
+    "5xl": ["3rem", { lineHeight: "1" }],
+    "6xl": ["3.75rem", { lineHeight: "1" }],
+    "7xl": ["4.5rem", { lineHeight: "1" }],
+    "8xl": ["6rem", { lineHeight: "1" }],
+    "9xl": ["8rem", { lineHeight: "1" }],
+  },
+  fontWeight: {
+    thin: "100", extralight: "200", light: "300", normal: "400",
+    medium: "500", semibold: "600", bold: "700", extrabold: "800", black: "900",
+  },
+  borderRadius: {
+    none: "0px", sm: "0.125rem", DEFAULT: "0.25rem", md: "0.375rem",
+    lg: "0.5rem", xl: "0.75rem", "2xl": "1rem", "3xl": "1.5rem", full: "9999px",
+  },
+};
+
+export class TailwindV3Adapter implements TailwindAdapter {
+  readonly version = 3 as const;
+
+  async resolveTailwindConfig(): Promise<TailwindThemeSubset> {
+    if (cached) return cached;
+
+    const cwd = process.cwd();
+    const jsPath = resolve(cwd, "tailwind.config.js");
+    const tsPath = resolve(cwd, "tailwind.config.ts");
+    const cjsPath = resolve(cwd, "tailwind.config.cjs");
+    const configPath = existsSync(jsPath)
+      ? jsPath
+      : existsSync(tsPath)
+        ? tsPath
+        : existsSync(cjsPath)
+          ? cjsPath
+          : null;
+
+    if (configPath) {
+      try {
+        const req = createRequire(resolve(cwd, "package.json"));
+        // @ts-expect-error — tailwindcss resolveConfig lacks NodeNext-compatible exports
+        const resolveConfig = (await import(req.resolve("tailwindcss/resolveConfig"))).default;
+        const userConfig = (await import(configPath)).default;
+        const full = resolveConfig(userConfig);
+        const theme = full.theme ?? {};
+
+        cached = {
+          spacing: (theme.spacing as Record<string, string>) ?? defaultTheme.spacing,
+          colors: (theme.colors as Record<string, unknown>) ?? defaultTheme.colors,
+          fontSize: (theme.fontSize as Record<string, unknown>) ?? defaultTheme.fontSize,
+          fontWeight: (theme.fontWeight as Record<string, unknown>) ?? defaultTheme.fontWeight,
+          borderRadius: (theme.borderRadius as Record<string, string>) ?? defaultTheme.borderRadius,
+        };
+
+        console.error(`[tailwind] v3 resolved config from ${configPath}`);
+        return cached;
+      } catch (err) {
+        console.error("[tailwind] v3 failed to resolve config, using defaults:", err);
+      }
+    } else {
+      console.error("[tailwind] v3 no tailwind.config found — using defaults.");
+    }
+
+    cached = defaultTheme;
+    return cached;
+  }
+
+  async generateCssForClasses(classes: string[]): Promise<string> {
+    const cwd = process.cwd();
+    const req = createRequire(resolve(cwd, "package.json"));
+
+    const jsPath = resolve(cwd, "tailwind.config.js");
+    const tsPath = resolve(cwd, "tailwind.config.ts");
+    const cjsPath = resolve(cwd, "tailwind.config.cjs");
+    const configPath = existsSync(jsPath)
+      ? jsPath
+      : existsSync(tsPath)
+        ? tsPath
+        : existsSync(cjsPath)
+          ? cjsPath
+          : null;
+
+    let userConfig: object = {};
+    if (configPath) {
+      try {
+        userConfig = (await import(configPath)).default;
+      } catch {
+        // fall through to empty config
+      }
+    }
+
+    // Load postcss and tailwindcss as a PostCSS plugin from the target project
+    const postcss = (await import(req.resolve("postcss"))).default;
+    const tailwindPlugin = (await import(req.resolve("tailwindcss"))).default;
+
+    const result = await postcss([
+      tailwindPlugin({
+        ...userConfig,
+        content: [],       // skip file scanning
+        safelist: classes,  // generate only the requested classes
+      }),
+    ]).process("@tailwind utilities;", { from: undefined });
+
+    return result.css;
+  }
+}

package/server/tailwind-v4.ts

@@ -0,0 +1,160 @@
+// Tailwind v4 adapter — uses compile() / build() from the target project's tailwindcss v4.
+
+import { readFileSync } from "fs";
+import { resolve, dirname } from "path";
+import { createRequire } from "module";
+import type { TailwindAdapter, TailwindThemeSubset } from "./tailwind-adapter.js";
+
+// Cached compiler instance (from target project's tailwindcss)
+let compilerCache: { build: (classes: string[]) => string } | null = null;
+
+/**
+ * Get a Tailwind v4 compile() function from the target project's node_modules.
+ */
+async function getCompile(): Promise<(css: string, opts: any) => Promise<{ build: (classes: string[]) => string }>> {
+  const cwd = process.cwd();
+  const req = createRequire(resolve(cwd, "package.json"));
+  const tw = await import(req.resolve("tailwindcss"));
+  // Handle CJS/ESM interop: compile may be on tw directly or on tw.default
+  const mod = tw.default ?? tw;
+  const compile = mod.compile ?? mod.default?.compile;
+  if (typeof compile !== "function") {
+    throw new Error("Could not find compile() in target project's tailwindcss");
+  }
+  return compile;
+}
+
+/**
+ * loadStylesheet callback for Tailwind v4 compile().
+ * Resolves @import "tailwindcss" and other stylesheet imports from the target project.
+ */
+function makeLoadStylesheet(cwd: string) {
+  const req = createRequire(resolve(cwd, "package.json"));
+  return async (id: string, base: string) => {
+    let resolved: string;
+    if (id === "tailwindcss") {
+      resolved = req.resolve("tailwindcss/index.css");
+    } else {
+      resolved = req.resolve(id, { paths: [base || cwd] });
+    }
+    return {
+      content: readFileSync(resolved, "utf8"),
+      base: dirname(resolved),
+    };
+  };
+}
+
+/**
+ * Initialize the Tailwind v4 compiler for the target project.
+ */
+async function getCompiler(): Promise<{ build: (classes: string[]) => string }> {
+  if (compilerCache) return compilerCache;
+
+  const cwd = process.cwd();
+  const compile = await getCompile();
+
+  const result = await compile('@import "tailwindcss";', {
+    loadStylesheet: makeLoadStylesheet(cwd),
+  });
+
+  compilerCache = result;
+  console.error("[tailwind] Initialized Tailwind v4 compiler from target project");
+  return result;
+}
+
+// Classes we probe to extract theme values
+const HUES = [
+  "slate", "gray", "zinc", "neutral", "stone",
+  "red", "orange", "amber", "yellow", "lime",
+  "green", "emerald", "teal", "cyan", "sky",
+  "blue", "indigo", "violet", "purple", "fuchsia",
+  "pink", "rose",
+];
+const SHADES = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
+const SPECIAL_COLORS = ["black", "white", "transparent"];
+
+const SPACING_KEYS = [
+  "0", "px", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "5", "6", "7",
+  "8", "9", "10", "11", "12", "14", "16", "20", "24", "28", "32", "36", "40",
+  "44", "48", "52", "56", "60", "64", "72", "80", "96",
+];
+
+const FONT_SIZE_KEYS = ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl"];
+const FONT_WEIGHT_KEYS = ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"];
+const BORDER_RADIUS_KEYS = ["none", "sm", "", "md", "lg", "xl", "2xl", "3xl", "full"];
+
+/**
+ * Extract --var definitions from compiled CSS output.
+ */
+function extractVars(css: string, prefix: string): Map<string, string> {
+  const vars = new Map<string, string>();
+  const regex = new RegExp(`^\\s*--${prefix}-([\\w.-]+):\\s*([^;]+);`, "gm");
+  let match;
+  while ((match = regex.exec(css)) !== null) {
+    vars.set(match[1], match[2].trim());
+  }
+  return vars;
+}
+
+export class TailwindV4Adapter implements TailwindAdapter {
+  readonly version = 4 as const;
+
+  async resolveTailwindConfig(): Promise<TailwindThemeSubset> {
+    const compiler = await getCompiler();
+
+    // Probe color classes to extract theme variable definitions
+    const probeClasses: string[] = [];
+    for (const h of HUES) {
+      for (const s of SHADES) probeClasses.push(`bg-${h}-${s}`);
+    }
+    for (const s of SPECIAL_COLORS) probeClasses.push(`bg-${s}`);
+
+    const css = compiler.build(probeClasses);
+
+    // --- Colors (extracted from CSS custom properties) ---
+    const colorVars = extractVars(css, "color");
+    const colors: Record<string, unknown> = {};
+    for (const [name, value] of colorVars) {
+      const dashIdx = name.lastIndexOf("-");
+      if (dashIdx > 0) {
+        const hue = name.substring(0, dashIdx);
+        const shade = name.substring(dashIdx + 1);
+        if (/^\d+$/.test(shade)) {
+          if (!colors[hue]) colors[hue] = {};
+          (colors[hue] as Record<string, string>)[shade] = value;
+          continue;
+        }
+      }
+      colors[name] = value;
+    }
+    if (!colors["transparent"]) colors["transparent"] = "transparent";
+
+    // --- Spacing (v4 uses calc(var(--spacing) * N)) ---
+    const spacing: Record<string, string> = {};
+    for (const k of SPACING_KEYS) {
+      spacing[k] = k === "px" ? "1px" : k === "0" ? "0px" : `calc(var(--spacing) * ${k})`;
+    }
+
+    // --- Font size, weight, border radius (static scales in v4) ---
+    const fontSize: Record<string, unknown> = {};
+    for (const k of FONT_SIZE_KEYS) fontSize[k] = k;
+
+    const fontWeight: Record<string, unknown> = {};
+    for (const k of FONT_WEIGHT_KEYS) fontWeight[k] = k;
+
+    const borderRadius: Record<string, string> = {};
+    for (const k of BORDER_RADIUS_KEYS) borderRadius[k || "DEFAULT"] = k || "DEFAULT";
+
+    const result: TailwindThemeSubset = { spacing, colors, fontSize, fontWeight, borderRadius };
+    console.error("[tailwind] v4 resolved theme:", {
+      colors: Object.keys(colors).length + " entries",
+      spacing: Object.keys(spacing).length + " entries",
+    });
+    return result;
+  }
+
+  async generateCssForClasses(classes: string[]): Promise<string> {
+    const compiler = await getCompiler();
+    return compiler.build(classes);
+  }
+}

package/server/tailwind.ts

@@ -0,0 +1,50 @@
+// Tailwind adapter factory — auto-detects v3 vs v4 from the target project's
+// installed tailwindcss version and delegates to the appropriate adapter.
+
+import { readFileSync } from "fs";
+import { resolve } from "path";
+import { createRequire } from "module";
+import type { TailwindAdapter, TailwindThemeSubset } from "./tailwind-adapter.js";
+
+export type { TailwindThemeSubset };
+
+let adapterCache: TailwindAdapter | null = null;
+
+/**
+ * Detect which major version of tailwindcss is installed in the target project.
+ */
+function detectTailwindVersion(): 3 | 4 {
+  const cwd = process.cwd();
+  const req = createRequire(resolve(cwd, "package.json"));
+  const pkgPath = req.resolve("tailwindcss/package.json");
+  const pkg = JSON.parse(readFileSync(pkgPath, "utf8"));
+  const major = parseInt(pkg.version.split(".")[0], 10);
+  return major >= 4 ? 4 : 3;
+}
+
+async function getAdapter(): Promise<TailwindAdapter> {
+  if (adapterCache) return adapterCache;
+  const version = detectTailwindVersion();
+  if (version === 3) {
+    const { TailwindV3Adapter } = await import("./tailwind-v3.js");
+    adapterCache = new TailwindV3Adapter();
+  } else {
+    const { TailwindV4Adapter } = await import("./tailwind-v4.js");
+    adapterCache = new TailwindV4Adapter();
+  }
+  console.error(`[tailwind] Using Tailwind v${version} adapter`);
+  return adapterCache;
+}
+
+/** Expose the detected version for the /api/info endpoint. */
+export async function getTailwindVersion(): Promise<3 | 4> {
+  return (await getAdapter()).version;
+}
+
+export async function resolveTailwindConfig(): Promise<TailwindThemeSubset> {
+  return (await getAdapter()).resolveTailwindConfig();
+}
+
+export async function generateCssForClasses(classes: string[]): Promise<string> {
+  return (await getAdapter()).generateCssForClasses(classes);
+}