@aiworkbench/vibe-ide 0.0.1

package/dist/core/boot.d.ts

@@ -0,0 +1,15 @@
+/**
+ * WebContainer boot lifecycle with single-tab detection.
+ *
+ * Refactored from usecase-editor to accept configurable options
+ * instead of relying on host-level globals.
+ */
+import { WebContainer } from "@webcontainer/api";
+import type { VibeIdeBootOptions } from "../types";
+export declare class WebContainerTabBlockedError extends Error {
+    constructor();
+}
+export declare function bootWebContainer(options?: VibeIdeBootOptions): Promise<WebContainer>;
+export declare function teardownWebContainer(): void;
+export declare function getWebContainer(): WebContainer | null;
+//# sourceMappingURL=boot.d.ts.map

package/dist/core/boot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"boot.d.ts","sourceRoot":"","sources":["../../src/core/boot.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAUnD,qBAAa,2BAA4B,SAAQ,KAAK;;CAOrD;AAED,wBAAsB,gBAAgB,CACpC,OAAO,CAAC,EAAE,kBAAkB,GAC3B,OAAO,CAAC,YAAY,CAAC,CAiEvB;AAED,wBAAgB,oBAAoB,SAcnC;AAED,wBAAgB,eAAe,wBAE9B"}

package/dist/core/bridge-shim.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Bridge dev shim — injected into the WebContainer at /.ide/vibe-bridge-dev.js
+ *
+ * This is a self-executing JS string that creates `window.__VIBE_BRIDGE_DEV__`,
+ * implementing the full Bridge API client-side inside the preview iframe. It
+ * communicates with the host via a MessagePort received through `vibe:init`.
+ */
+export declare const BRIDGE_DEV_SHIM_SOURCE = "\n(async function() {\n  function waitForBridgeInit() {\n    return new Promise((resolve) => {\n      window.addEventListener('message', (e) => {\n        if (e.data?.type === 'vibe:init') {\n          resolve({ port: e.ports[0], previewSessionId: e.data.previewSessionId, bootstrap: e.data.bootstrap });\n        }\n      });\n    });\n  }\n\n  const { port, previewSessionId, bootstrap } = await waitForBridgeInit();\n  const effectivePermissions = new Set(Array.isArray(bootstrap?.effectivePermissions) ? bootstrap.effectivePermissions : []);\n  let currentBootstrap = bootstrap || {};\n\n  window.addEventListener('message', (e) => {\n    if (e.data?.type === 'vibe:permissions') {\n      effectivePermissions.clear();\n      const nextPermissions = Array.isArray(e.data.effectivePermissions) ? e.data.effectivePermissions : [];\n      nextPermissions.forEach((capability) => effectivePermissions.add(capability));\n      currentBootstrap = e.data.bootstrap || currentBootstrap;\n    }\n  });\n\n  function ensureCapability(capability) {\n    if (!effectivePermissions.has(capability)) {\n      throw new Error(capability + ' is not permitted in this preview');\n    }\n  }\n\n  function sendOneWay(capability, method, args) {\n    ensureCapability(capability);\n    port.postMessage({ id: crypto.randomUUID(), previewSessionId, capability, method, args });\n  }\n\n  function sendRequest(capability, method, args) {\n    ensureCapability(capability);\n    const id = crypto.randomUUID();\n    return new Promise((resolve, reject) => {\n      const handler = (e) => {\n        if (e.data.id === id) {\n          port.removeEventListener('message', handler);\n          if (e.data.error) reject(new Error(e.data.error));\n          else resolve(e.data.result);\n        }\n      };\n      port.addEventListener('message', handler);\n      port.start();\n      port.postMessage({ id, previewSessionId, capability, method, args });\n    });\n  }\n\n  function sendStream(capability, method, args, onChunk) {\n    ensureCapability(capability);\n    const id = crypto.randomUUID();\n    let isDone = false;\n    let stopEventRegistration = () => {};\n\n    const promise = new Promise((resolve, reject) => {\n      const handler = (e) => {\n        if (e.data.id === id) {\n          if (e.data.error) {\n            port.removeEventListener('message', handler);\n            reject(new Error(e.data.error));\n          } else if (e.data.chunk !== undefined) {\n             onChunk(e.data.chunk);\n          } else if (e.data.subscribed) {\n            resolve({ subscriptionId: id, unsubscribe: stopEventRegistration });\n          } else if (e.data.done || e.data.result !== undefined) {\n            port.removeEventListener('message', handler);\n            isDone = true;\n            resolve(e.data.result);\n          }\n        }\n      };\n      port.addEventListener('message', handler);\n      port.start();\n      port.postMessage({ id, previewSessionId, capability, method, args });\n       \n      stopEventRegistration = () => {\n         if (!isDone) {\n           port.removeEventListener('message', handler);\n           port.postMessage({\n             id: crypto.randomUUID(),\n             previewSessionId,\n             capability,\n             method: 'unsubscribe',\n             args: [id],\n           });\n         }\n       };\n    });\n    \n    return { promise, unsubscribe: stopEventRegistration };\n  }\n\n  window.__VIBE_BRIDGE_DEV__ = {\n    auth: {\n      getUser: () => {\n        ensureCapability('auth');\n        if (!currentBootstrap.user) {\n          throw new Error('auth.getUser() is unavailable in this preview');\n        }\n        return currentBootstrap.user;\n      },\n      getToken: async () => { throw new Error(\"auth.getToken() is unavailable in dev preview\"); }\n    },\n    theme: {\n      current: () => {\n        ensureCapability('theme');\n        return currentBootstrap.theme;\n      }\n    },\n    toast: {\n      show: (msg, opts) => sendOneWay('toast', 'show', [msg, opts])\n    },\n    api: {\n      fetch: async (ep, opts) => {\n        const res = await sendRequest('api', 'fetch', [ep, opts]);\n        return new Response(res.body, { status: res.status, statusText: res.statusText, headers: res.headers });\n      }\n    },\n    storage: {\n      get: (key) => sendRequest('storage', 'get', [key]),\n      set: (key, val) => sendRequest('storage', 'set', [key, val]),\n      remove: (key) => sendRequest('storage', 'remove', [key]),\n      keys: () => sendRequest('storage', 'keys', [])\n    },\n    navigation: {\n      navigate: (path) => sendOneWay('navigation', 'navigate', [path])\n    },\n    events: {\n      emit: (evt, data) => sendOneWay('events', 'emit', [evt, data]),\n      on: (evt, cb) => {\n         const stream = sendStream('events', 'on', [evt], (chunk) => {\n            cb(chunk);\n         });\n         return stream.unsubscribe;\n      },\n      once: (evt, cb) => {\n         let unsub = () => {};\n         const wrappedCb = (chunk) => { unsub(); cb(chunk); };\n         const stream = sendStream('events', 'once', [evt], wrappedCb);\n         unsub = stream.unsubscribe;\n         return unsub;\n      }\n    },\n    chat: {\n      send: function(serverUrl, parts, options) {\n          const payload = {\n            serverUrl,\n            parts,\n            options: options ? {\n              contextId: options.contextId,\n              messageId: options.messageId,\n              metadata: options.metadata,\n            } : undefined,\n          };\n         let buffer = [];\n          let error = null;\n          let done = false;\n          let resolvers = [];\n         const stream = sendStream('chat', 'send', [payload], (chunk) => {\n            buffer.push(chunk);\n            if (resolvers.length > 0) resolvers.shift()();\n         });\n\n         stream.promise.then((res) => {\n             done = true;\n             if (resolvers.length > 0) resolvers.shift()();\n          }).catch(err => {\n             error = err;\n             done = true;\n             if (resolvers.length > 0) resolvers.shift()();\n          });\n         const iterator = (async function*() {\n           while (true) {\n             if (buffer.length > 0) yield buffer.shift();\n             else if (error) throw error;\n             else if (done) break;\n             else await new Promise(r => resolvers.push(r));\n           }\n         })();\n\n         return {\n           [Symbol.asyncIterator]: () => iterator,\n           abort: () => stream.unsubscribe(),\n         };\n       }\n    }\n  };\n\n  window.dispatchEvent(new Event(\"vibe-bridge-ready\"));\n})();\n";
+//# sourceMappingURL=bridge-shim.d.ts.map

package/dist/core/bridge-shim.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bridge-shim.d.ts","sourceRoot":"","sources":["../../src/core/bridge-shim.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,sBAAsB,6hNAmMlC,CAAC"}

package/dist/core/filesystem.d.ts

@@ -0,0 +1,39 @@
+/**
+ * WebContainer filesystem helpers: read, write, serialize, and batched writes.
+ *
+ * Refactored from usecase-editor to accept configurable exclusion lists.
+ */
+import type { WebContainer, FileSystemTree } from "@webcontainer/api";
+export declare function readFileTree(instance: WebContainer, basePath?: string, options?: {
+    exclude?: string[];
+}): Promise<FileSystemTree>;
+export declare function serializeProject(instance: WebContainer): Promise<{
+    path: string;
+    content: string;
+}[]>;
+export declare function writeFileTree(instance: WebContainer, _path: string, tree: FileSystemTree): Promise<void>;
+/**
+ * Batches filesystem writes with a 150ms idle debounce. Prevents Vite HMR
+ * thrashing when the agent writes many files in rapid succession.
+ */
+export declare class WriteCoalescer {
+    private instance;
+    private pending;
+    private timer;
+    dirty: boolean;
+    private maxBufferSize;
+    private currentBufferSize;
+    constructor(instance: WebContainer, options?: {
+        maxBufferSize?: number;
+    });
+    enqueue(path: string, content: string): void;
+    write(path: string, content: string): void;
+    private scheduleFlush;
+    flushImmediate(files: {
+        path: string;
+        content: string;
+    }[]): Promise<void>;
+    private writeDirect;
+    destroy(): void;
+}
+//# sourceMappingURL=filesystem.d.ts.map

package/dist/core/filesystem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filesystem.d.ts","sourceRoot":"","sources":["../../src/core/filesystem.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAoBtE,wBAAsB,YAAY,CAChC,QAAQ,EAAE,YAAY,EACtB,QAAQ,GAAE,MAAY,EACtB,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;CAAO,GACnC,OAAO,CAAC,cAAc,CAAC,CA6BzB;AAED,wBAAsB,gBAAgB,CACpC,QAAQ,EAAE,YAAY,GACrB,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,EAAE,CAAC,CAkB9C;AAED,wBAAsB,aAAa,CACjC,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,cAAc,iBAGrB;AAED;;;GAGG;AACH,qBAAa,cAAc;IACzB,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,KAAK,CAAuB;IAC7B,KAAK,UAAS;IACrB,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,iBAAiB,CAAK;gBAElB,QAAQ,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE;QAAE,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE;IAKxE,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;IAyBrC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;IAInC,OAAO,CAAC,aAAa;IAWf,cAAc,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,EAAE;YAiBjD,WAAW;IAezB,OAAO;CAGR"}

package/dist/core/inject-shim.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Inject the bridge dev shim into the WebContainer virtual filesystem.
+ */
+import type { WebContainer } from "@webcontainer/api";
+export declare function injectDevShim(instance: WebContainer): Promise<void>;
+//# sourceMappingURL=inject-shim.d.ts.map

package/dist/core/inject-shim.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inject-shim.d.ts","sourceRoot":"","sources":["../../src/core/inject-shim.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,wBAAsB,aAAa,CAAC,QAAQ,EAAE,YAAY,iBAWzD"}

package/dist/core/install.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Dependency installation with SHA-256 fingerprint-based caching.
+ */
+import type { WebContainer } from "@webcontainer/api";
+export declare function computeInstallFingerprint(lockfile: string, nodeVersion: string, npmVersion: string, installMode: string, templateId: string): Promise<string>;
+export declare function installDependencies(instance: WebContainer, options?: {
+    templateId?: string;
+    onOutput?: (chunk: string) => void;
+}): Promise<{
+    skipped: boolean;
+    exitCode: number;
+    fingerprint: string;
+}>;
+//# sourceMappingURL=install.d.ts.map

package/dist/core/install.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"install.d.ts","sourceRoot":"","sources":["../../src/core/install.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKtD,wBAAsB,yBAAyB,CAC7C,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,mBAQnB;AAED,wBAAsB,mBAAmB,CACvC,QAAQ,EAAE,YAAY,EACtB,OAAO,CAAC,EAAE;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE;;;;GAoCtE"}

package/dist/core/preview-channel.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Preview iframe ↔ host bridge relay protocol.
+ *
+ * Uses a `MessageChannel` for secure, session-bound communication between the
+ * host IDE and the preview iframe running inside WebContainer.
+ *
+ * Refactored from usecase-editor to remove the React `RefObject` dependency.
+ * Accepts a plain `{ current: HTMLIFrameElement | null }` ref-like object so
+ * it works with any framework (or direct DOM references).
+ */
+import { z } from "zod";
+export declare const BridgeCapabilitySchema: z.ZodEnum<["toast", "navigation", "storage", "events", "theme", "auth", "api", "chat"]>;
+export type BridgeCapability = z.infer<typeof BridgeCapabilitySchema>;
+export declare const BridgeRequestSchema: z.ZodObject<{
+    id: z.ZodString;
+    previewSessionId: z.ZodString;
+    capability: z.ZodEnum<["toast", "navigation", "storage", "events", "theme", "auth", "api", "chat"]>;
+    method: z.ZodString;
+    args: z.ZodArray<z.ZodUnknown, "many">;
+}, "strip", z.ZodTypeAny, {
+    id: string;
+    previewSessionId: string;
+    capability: "auth" | "api" | "navigation" | "theme" | "toast" | "storage" | "events" | "chat";
+    method: string;
+    args: unknown[];
+}, {
+    id: string;
+    previewSessionId: string;
+    capability: "auth" | "api" | "navigation" | "theme" | "toast" | "storage" | "events" | "chat";
+    method: string;
+    args: unknown[];
+}>;
+export type BridgeRequest = z.infer<typeof BridgeRequestSchema>;
+export declare const BridgeResponseSchema: z.ZodObject<{
+    id: z.ZodString;
+    result: z.ZodOptional<z.ZodUnknown>;
+    error: z.ZodOptional<z.ZodString>;
+    chunk: z.ZodOptional<z.ZodUnknown>;
+    done: z.ZodOptional<z.ZodBoolean>;
+    subscribed: z.ZodOptional<z.ZodBoolean>;
+}, "strip", z.ZodTypeAny, {
+    id: string;
+    error?: string | undefined;
+    result?: unknown;
+    chunk?: unknown;
+    done?: boolean | undefined;
+    subscribed?: boolean | undefined;
+}, {
+    id: string;
+    error?: string | undefined;
+    result?: unknown;
+    chunk?: unknown;
+    done?: boolean | undefined;
+    subscribed?: boolean | undefined;
+}>;
+export type BridgeResponse = z.infer<typeof BridgeResponseSchema>;
+/** A ref-like container for an iframe element. Compatible with React refs. */
+export interface IframeRef {
+    current: HTMLIFrameElement | null;
+}
+export declare function createPreviewChannel(iframeRef: IframeRef, iframeOrigin: string): {
+    channel: MessageChannel;
+    previewSessionId: `${string}-${string}-${string}-${string}-${string}`;
+    sendInit: (effectivePermissions: BridgeCapability[], bootstrap: unknown) => void;
+    destroy: () => void;
+};
+export type StreamingContext = {
+    id: string;
+    postChunk: (chunk: unknown) => void;
+    done: (result?: unknown) => void;
+};
+export type CapabilityHandler = (method: string, args: unknown[], ctx: StreamingContext) => Promise<unknown> | unknown;
+export declare function createRequestHandler(port: MessagePort, handlers: Partial<Record<BridgeCapability, CapabilityHandler>>, options?: {
+    timeout?: number;
+    maxConcurrency?: number;
+    allowedSessionId?: string;
+    allowedCapabilities?: BridgeCapability[] | (() => BridgeCapability[]);
+}): () => void;
+//# sourceMappingURL=preview-channel.d.ts.map

package/dist/core/preview-channel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-channel.d.ts","sourceRoot":"","sources":["../../src/core/preview-channel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAMxB,eAAO,MAAM,sBAAsB,yFASjC,CAAC;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAEtE,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;EAM9B,CAAC;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEhE,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;EAO/B,CAAC;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAMlE,8EAA8E;AAC9E,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACnC;AAMD,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,MAAM;;;qCASM,gBAAgB,EAAE,aAC7B,OAAO;;EAkBvB;AAMD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,IAAI,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,CAC9B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,OAAO,EAAE,EACf,GAAG,EAAE,gBAAgB,KAClB,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;AAEhC,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC,EAC9D,OAAO,CAAC,EAAE;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,gBAAgB,EAAE,GAAG,CAAC,MAAM,gBAAgB,EAAE,CAAC,CAAC;CACvE,cA6HF"}

package/dist/core/process.d.ts

@@ -0,0 +1,20 @@
+/**
+ * WebContainer process spawning with output buffering and timeout control.
+ */
+import type { WebContainer } from "@webcontainer/api";
+export interface ProcessResult {
+    exitCode: Promise<number>;
+    kill: () => void;
+}
+export declare function spawnWithOutput(instance: WebContainer, command: string, args: string[], options?: {
+    onChunk?: (chunk: string) => void;
+    timeout?: number;
+}): Promise<ProcessResult>;
+export declare function spawnDevServer(instance: WebContainer, options?: {
+    onOutput?: (chunk: string) => void;
+}): Promise<{
+    url: Promise<string>;
+    kill: () => void;
+    output: ReadableStream<string>;
+}>;
+//# sourceMappingURL=process.d.ts.map

package/dist/core/process.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"process.d.ts","sourceRoot":"","sources":["../../src/core/process.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAC1B,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,wBAAsB,eAAe,CACnC,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GAChE,OAAO,CAAC,aAAa,CAAC,CA2ExB;AAED,wBAAsB,cAAc,CAClC,QAAQ,EAAE,YAAY,EACtB,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE;;;;GAsBjD"}

package/dist/ide-theme.css

@@ -0,0 +1,248 @@
+/* ─────────────────────────────────────────────────────────
+   IDE Theme — Polished Dark with Gold/Amber Accent
+   Scoped tokens & utilities for the builder IDE view.
+   ───────────────────────────────────────────────────────── */
+
+/* ── Design Tokens ─────────────────────────────────────── */
+.ide-root {
+  color-scheme: dark;
+
+  /* Backgrounds */
+  --ide-bg: #09090b;
+  --ide-surface: #18181b;
+  --ide-surface-hover: #27272a;
+
+  /* Borders */
+  --ide-border: #27272a;
+  --ide-border-strong: #3f3f46;
+
+  /* Text */
+  --ide-text: #fafafa;
+  --ide-text-secondary: #a1a1aa;
+  --ide-text-tertiary: #71717a;
+
+  /* Accent — tertiary gold/amber from design tokens */
+  --ide-accent: oklch(0.8544 0.1746 90.88);
+  --ide-accent-soft: rgba(234, 179, 8, 0.10);
+  --ide-accent-hover: oklch(0.9 0.16 90.88);
+  --ide-accent-muted: oklch(0.7 0.14 90.88);
+
+  /* Semantic */
+  --ide-success: #22c55e;
+  --ide-error: #ef4444;
+  --ide-warning: #f59e0b;
+}
+
+/* ── Base Panel ────────────────────────────────────────── */
+.ide-panel {
+  background: var(--ide-bg);
+  color: var(--ide-text);
+}
+
+/* ── Elevated Card ─────────────────────────────────────── */
+.ide-card {
+  background: var(--ide-surface);
+  border: 1px solid var(--ide-border);
+  border-radius: 0.75rem;
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.3),
+    0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.ide-card:hover {
+  border-color: var(--ide-border-strong);
+}
+
+/* ── Segmented Tab Pills ───────────────────────────────── */
+.ide-pill-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--ide-surface);
+  border-radius: 0.5rem;
+  padding: 3px;
+}
+
+.ide-pill {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition-property: color, background-color, box-shadow;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  user-select: none;
+}
+
+.ide-pill-active {
+  background: var(--ide-accent);
+  color: var(--ide-bg);
+  box-shadow: 0 1px 4px rgba(234, 179, 8, 0.25);
+}
+
+.ide-pill-inactive {
+  color: var(--ide-text-tertiary);
+  background: transparent;
+}
+
+.ide-pill-inactive:hover {
+  color: var(--ide-text);
+  background: var(--ide-surface-hover);
+}
+
+/* ── Input ──────────────────────────────────────────────── */
+.ide-input {
+  background: var(--ide-surface);
+  border: 1px solid var(--ide-border);
+  color: var(--ide-text);
+  border-radius: 0.75rem;
+  transition-property: border-color, box-shadow;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ide-input::placeholder {
+  color: var(--ide-text-tertiary);
+}
+
+.ide-input:focus {
+  outline: none;
+  border-color: var(--ide-accent);
+  box-shadow: 0 0 0 3px var(--ide-accent-soft);
+}
+
+/* ── React-Split Gutter ────────────────────────────────── */
+.ide-gutter {
+  position: relative;
+  background: transparent !important;
+  cursor: col-resize;
+  z-index: 10;
+}
+
+.ide-gutter::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+  transform: translateX(-50%);
+  background: var(--ide-border);
+  transition-property: background-color, width;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ide-gutter:hover::before {
+  width: 2px;
+  background: var(--ide-accent);
+}
+
+/* ── Scrollbar (dark) ──────────────────────────────────── */
+.ide-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.ide-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ide-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--ide-border-strong);
+  border-radius: 3px;
+}
+
+.ide-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--ide-text-tertiary);
+}
+
+/* ── Radix ScrollArea thin scrollbar (inside .ide-root) ── */
+.ide-root [data-slot="scroll-area-scrollbar"][data-orientation="vertical"] {
+  width: 4px;
+  border-left: none;
+  padding: 0;
+}
+
+.ide-root [data-slot="scroll-area-thumb"] {
+  background: var(--ide-border-strong);
+  border-radius: 9999px;
+}
+
+.ide-root [data-slot="scroll-area-thumb"]:hover {
+  background: var(--ide-text-tertiary);
+}
+
+/* ── Gold Spinner ──────────────────────────────────────── */
+@keyframes ide-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ide-spinner {
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid var(--ide-border);
+  border-top-color: var(--ide-accent);
+  border-radius: 9999px;
+  animation: ide-spin 0.8s linear infinite;
+}
+
+/* ── Fade-in for loading text ──────────────────────────── */
+@keyframes ide-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ide-fade-in {
+  animation: ide-fade-in 0.4s ease-out both;
+}
+
+/* ── Collapse toggle button ────────────────────────────── */
+.ide-collapse-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 2.5rem;
+  background: var(--ide-surface);
+  border: 1px solid var(--ide-border);
+  border-radius: 0 0.5rem 0.5rem 0;
+  cursor: pointer;
+  color: var(--ide-text-tertiary);
+  transition-property: color, background-color, border-color;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 20;
+}
+
+.ide-collapse-btn:hover {
+  color: var(--ide-accent);
+  background: var(--ide-surface-hover);
+  border-color: var(--ide-accent);
+}
+
+/* ── Reduce motion ─────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .ide-spinner {
+    animation-duration: 3s;
+  }
+
+  .ide-fade-in {
+    animation: none;
+  }
+
+  .ide-pill,
+  .ide-input,
+  .ide-gutter::before,
+  .ide-collapse-btn {
+    transition-duration: 0ms;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @aiworkbench/vibe-ide — Public API barrel export.
+ *
+ * This is the single entry point for the package. It re-exports everything
+ * consumers need: types, core runtime, MCP layer, template generation,
+ * and React components/hooks.
+ */
+export type { TemplateId, TemplateVars, RightPaneTab, UnifiedMessageStatus, UnifiedConnectionStatus, UnifiedArtifact, UnifiedStatusUpdate, UnifiedToolInvocation, UnifiedMessage, VibeIdeChatAdapter, VibeIdePreviewPolicy, VibeIdePersistenceAdapter, VibeIdeApprovalAdapter, WebContainerMcpAdapterOptions, VibeIdeBootOptions, VibeIdeProviderProps, VibeIdeSplitLayoutProps, VibeIdeContextValue, } from "./types";
+export { bootWebContainer, teardownWebContainer, getWebContainer, WebContainerTabBlockedError, } from "./core/boot";
+export { readFileTree, serializeProject, writeFileTree, WriteCoalescer, } from "./core/filesystem";
+export { spawnWithOutput, spawnDevServer, type ProcessResult, } from "./core/process";
+export { installDependencies, computeInstallFingerprint, } from "./core/install";
+export { createPreviewChannel, createRequestHandler, BridgeCapabilitySchema, BridgeRequestSchema, BridgeResponseSchema, type IframeRef, type BridgeCapability, type BridgeRequest, type BridgeResponse, type StreamingContext, type CapabilityHandler, } from "./core/preview-channel";
+export { BRIDGE_DEV_SHIM_SOURCE } from "./core/bridge-shim";
+export { injectDevShim } from "./core/inject-shim";
+export { webContainerToolArgumentSchemas, WebContainerToolSchema, webContainerToolsDefinition, type WebContainerToolCall, } from "./mcp/mcp-tools";
+export { WebContainerMcpAdapter, createWebContainerMcpAdapter, } from "./mcp/mcp-adapter";
+export { getVibeIdeTemplateTree } from "./templates/generated";
+export { VibeIdeProvider } from "./react/provider";
+export { useVibeIde } from "./react/use-vibe-ide";
+export { VibeIdeSplitLayout } from "./react/vibe-ide-layout";
+export { VibeIdePreviewPane } from "./react/vibe-ide-preview-pane";
+export { VibeIdeToolbar } from "./react/vibe-ide-toolbar";
+export { VibeIdeBridgeRelay } from "./react/vibe-ide-bridge-relay";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,YAAY,EACV,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,oBAAoB,EACpB,uBAAuB,EACvB,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,cAAc,EACd,kBAAkB,EAClB,oBAAoB,EACpB,yBAAyB,EACzB,sBAAsB,EACtB,6BAA6B,EAC7B,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,SAAS,CAAC;AAMjB,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,2BAA2B,GAC5B,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,cAAc,GACf,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,eAAe,EACf,cAAc,EACd,KAAK,aAAa,GACnB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,mBAAmB,EACnB,yBAAyB,GAC1B,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,mBAAmB,EACnB,oBAAoB,EACpB,KAAK,SAAS,EACd,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,GACvB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAMnD,OAAO,EACL,+BAA+B,EAC/B,sBAAsB,EACtB,2BAA2B,EAC3B,KAAK,oBAAoB,GAC1B,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EACL,sBAAsB,EACtB,4BAA4B,GAC7B,MAAM,mBAAmB,CAAC;AAM3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAM/D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC"}