@aiworkbench/vibe-bridge 0.0.2 → 0.0.4

package/dist/index.js

@@ -0,0 +1,450 @@
+// src/components/VibeHost.tsx
+import { useRef, useEffect as useEffect2, useCallback } from "react";
+
+// src/hooks/useVibeLoader.ts
+import { useState, useEffect } from "react";
+
+// src/core/loader.ts
+var loadedScripts = new Set;
+var ALLOWED_PROTOCOLS = new Set(["https:", "http:"]);
+function validateScriptSrc(src) {
+  let url;
+  try {
+    url = new URL(src, window.location.href);
+  } catch {
+    return `Invalid vibe app script URL: ${src}`;
+  }
+  if (!ALLOWED_PROTOCOLS.has(url.protocol)) {
+    return `Refused to load vibe app script with disallowed protocol "${url.protocol}": ${src}`;
+  }
+  return null;
+}
+function loadScript(src) {
+  const validationError = validateScriptSrc(src);
+  if (validationError) {
+    return Promise.reject(new Error(validationError));
+  }
+  if (loadedScripts.has(src)) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve, reject) => {
+    const existing = document.querySelector(`script[src="${CSS.escape(src)}"]`);
+    if (existing) {
+      loadedScripts.add(src);
+      resolve();
+      return;
+    }
+    const script = document.createElement("script");
+    script.type = "module";
+    script.src = src;
+    script.onload = () => {
+      loadedScripts.add(src);
+      resolve();
+    };
+    script.onerror = () => {
+      reject(new Error(`Failed to load vibe app script: ${src}`));
+    };
+    document.head.appendChild(script);
+  });
+}
+function waitForElement(tagName) {
+  if (customElements.get(tagName)) {
+    return Promise.resolve();
+  }
+  return customElements.whenDefined(tagName).then(() => {
+    return;
+  });
+}
+
+// src/hooks/useVibeLoader.ts
+function useVibeLoader(src, tagName) {
+  const [status, setStatus] = useState("loading");
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    setStatus("loading");
+    setError(null);
+    loadScript(src).then(() => waitForElement(tagName)).then(() => {
+      if (!cancelled) {
+        setStatus("ready");
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        const e = err instanceof Error ? err : new Error(`Failed to load vibe app: ${tagName}`);
+        setError(e);
+        setStatus("error");
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [src, tagName]);
+  return { status, error };
+}
+
+// src/hooks/useVibeBridge.ts
+import { useMemo } from "react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+
+// src/adapters/auth.ts
+function createAuthAdapter(deps) {
+  return {
+    getUser() {
+      const user = deps.session?.user;
+      return {
+        id: user?.email ?? "unknown",
+        name: user?.name ?? "Unknown User",
+        email: user?.email ?? undefined
+      };
+    },
+    async getToken() {
+      const token = deps.session?.idToken;
+      if (!token) {
+        throw new Error("No authentication token available.");
+      }
+      return token;
+    }
+  };
+}
+
+// src/adapters/api.ts
+function createApiAdapter(deps) {
+  return {
+    async fetch(endpoint, options) {
+      const url = endpoint.startsWith("/api/") ? endpoint : `/api/${endpoint.replace(/^\//, "")}`;
+      const token = await deps.getToken();
+      const headers = new Headers(options?.headers);
+      headers.set("Authorization", `Bearer ${token}`);
+      return globalThis.fetch(url, {
+        ...options,
+        headers
+      });
+    }
+  };
+}
+
+// src/adapters/navigation.ts
+function createNavigationAdapter(deps) {
+  return {
+    navigate(path) {
+      if (/^https?:\/\//i.test(path) || /^javascript:/i.test(path)) {
+        throw new Error(`Navigation to external URLs is not allowed: ${path}`);
+      }
+      deps.push(path);
+    }
+  };
+}
+
+// src/adapters/theme.ts
+function createThemeAdapter() {
+  return {
+    current() {
+      const html = document.documentElement;
+      if (html.classList.contains("dark"))
+        return "dark";
+      if (html.classList.contains("light"))
+        return "light";
+      const dataTheme = html.getAttribute("data-theme");
+      if (dataTheme === "dark")
+        return "dark";
+      if (dataTheme === "light")
+        return "light";
+      if (globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+      }
+      return "light";
+    }
+  };
+}
+
+// src/adapters/toast.ts
+function createToastAdapter(deps) {
+  return {
+    show(message, options) {
+      const type = options?.type ?? "info";
+      switch (type) {
+        case "success":
+          deps.toast.success(message);
+          break;
+        case "error":
+          deps.toast.error(message);
+          break;
+        case "info":
+          deps.toast.info(message);
+          break;
+        default:
+          deps.toast(message);
+      }
+    }
+  };
+}
+
+// src/adapters/storage.ts
+function createStorageAdapter(appId) {
+  const prefix = `vibe:${appId}:`;
+  return {
+    async get(key) {
+      return localStorage.getItem(`${prefix}${key}`);
+    },
+    async set(key, value) {
+      localStorage.setItem(`${prefix}${key}`, value);
+    },
+    async remove(key) {
+      localStorage.removeItem(`${prefix}${key}`);
+    },
+    async keys() {
+      const result = [];
+      for (let i = 0;i < localStorage.length; i++) {
+        const k = localStorage.key(i);
+        if (k?.startsWith(prefix)) {
+          result.push(k.slice(prefix.length));
+        }
+      }
+      return result;
+    }
+  };
+}
+
+// src/core/event-bus.ts
+var VIBE_EVENT_PREFIX = "vibe:";
+var sharedBus = null;
+function getEventBus() {
+  if (!sharedBus) {
+    sharedBus = new EventTarget;
+  }
+  return sharedBus;
+}
+function prefixedEventName(event) {
+  if (event.startsWith(VIBE_EVENT_PREFIX)) {
+    return event;
+  }
+  return `${VIBE_EVENT_PREFIX}${event}`;
+}
+function emitEvent(event, payload, sourceAppId) {
+  const bus = getEventBus();
+  const detail = { payload, sourceAppId };
+  bus.dispatchEvent(new CustomEvent(prefixedEventName(event), { detail }));
+}
+function onEvent(event, handler) {
+  const bus = getEventBus();
+  const prefixed = prefixedEventName(event);
+  const listener = (e) => {
+    handler(e.detail);
+  };
+  bus.addEventListener(prefixed, listener);
+  return () => bus.removeEventListener(prefixed, listener);
+}
+function onceEvent(event, handler) {
+  const bus = getEventBus();
+  const prefixed = prefixedEventName(event);
+  const listener = (e) => {
+    handler(e.detail);
+  };
+  bus.addEventListener(prefixed, listener, { once: true });
+  return () => bus.removeEventListener(prefixed, listener);
+}
+
+// src/adapters/events.ts
+function createEventsAdapter(appId) {
+  return {
+    emit(event, payload) {
+      emitEvent(event, payload ?? {}, appId);
+    },
+    on(event, handler) {
+      return onEvent(event, (detail) => handler(detail.payload));
+    },
+    once(event, handler) {
+      return onceEvent(event, (detail) => handler(detail.payload));
+    }
+  };
+}
+
+// src/core/permissions.ts
+function createDeniedProxy(capability) {
+  return new Proxy({}, {
+    get(_target, prop) {
+      if (typeof prop === "symbol")
+        return;
+      throw new Error(`Access denied: ${capability}.${prop} is not permitted. Add '${capability}' to your manifest.json permissions.`);
+    }
+  });
+}
+function filterByPermissions(bridge, permissions) {
+  const allCapabilities = [
+    "auth",
+    "api",
+    "navigation",
+    "theme",
+    "toast",
+    "storage",
+    "events"
+  ];
+  const filtered = {};
+  for (const cap of allCapabilities) {
+    if (permissions.includes(cap)) {
+      filtered[cap] = bridge[cap];
+    } else {
+      filtered[cap] = createDeniedProxy(cap);
+    }
+  }
+  return filtered;
+}
+
+// src/hooks/useVibeBridge.ts
+function useVibeBridge(options) {
+  const { appId, permissions, overrides } = options;
+  const { data: session } = useSession();
+  const router = useRouter();
+  return useMemo(() => {
+    const authAdapter = overrides?.auth ?? createAuthAdapter({ session: session ?? null });
+    const fullBridge = {
+      auth: authAdapter,
+      api: overrides?.api ?? createApiAdapter({ getToken: () => authAdapter.getToken() }),
+      navigation: overrides?.navigation ?? createNavigationAdapter({ push: (path) => router.push(path) }),
+      theme: overrides?.theme ?? createThemeAdapter(),
+      toast: overrides?.toast ?? createToastAdapter({ toast }),
+      storage: overrides?.storage ?? createStorageAdapter(appId),
+      events: overrides?.events ?? createEventsAdapter(appId)
+    };
+    return filterByPermissions(fullBridge, permissions);
+  }, [session, router, appId, permissions, overrides]);
+}
+
+// src/components/VibeErrorBoundary.tsx
+import { Component } from "react";
+
+class VibeErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, _info) {
+    this.props.onError?.(error);
+  }
+  render() {
+    if (this.state.error) {
+      return this.props.fallback(this.state.error);
+    }
+    return this.props.children;
+  }
+}
+
+// src/components/VibeHost.tsx
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+function VibeHostInner({
+  manifest,
+  src,
+  fallback,
+  errorFallback,
+  adapters,
+  onReady,
+  onError,
+  className,
+  style
+}) {
+  const containerRef = useRef(null);
+  const elementRef = useRef(null);
+  const readyFiredRef = useRef(false);
+  const { status, error: loadError } = useVibeLoader(src, manifest.id);
+  const bridge = useVibeBridge({
+    appId: manifest.id,
+    permissions: manifest.permissions,
+    overrides: adapters
+  });
+  useEffect2(() => {
+    if (loadError) {
+      onError?.(loadError);
+    }
+  }, [loadError, onError]);
+  useEffect2(() => {
+    const container = containerRef.current;
+    if (status !== "ready" || !container)
+      return;
+    const el = document.createElement(manifest.id);
+    el.bridge = bridge;
+    container.appendChild(el);
+    elementRef.current = el;
+    if (!readyFiredRef.current) {
+      readyFiredRef.current = true;
+      onReady?.();
+    }
+    return () => {
+      if (container.contains(el)) {
+        container.removeChild(el);
+      }
+      elementRef.current = null;
+    };
+  }, [status, manifest.id]);
+  useEffect2(() => {
+    if (elementRef.current) {
+      elementRef.current.bridge = bridge;
+    }
+  }, [bridge]);
+  if (status === "error" && loadError) {
+    if (errorFallback) {
+      return /* @__PURE__ */ jsxDEV(Fragment, {
+        children: errorFallback(loadError)
+      }, undefined, false, undefined, this);
+    }
+    return null;
+  }
+  if (status === "loading") {
+    return /* @__PURE__ */ jsxDEV(Fragment, {
+      children: fallback ?? null
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    ref: containerRef,
+    className,
+    style
+  }, undefined, false, undefined, this);
+}
+function VibeHost(props) {
+  const defaultErrorFallback = useCallback((error) => {
+    props.onError?.(error);
+    if (props.errorFallback) {
+      return /* @__PURE__ */ jsxDEV(Fragment, {
+        children: props.errorFallback(error)
+      }, undefined, false, undefined, this);
+    }
+    return null;
+  }, [props.onError, props.errorFallback]);
+  return /* @__PURE__ */ jsxDEV(VibeErrorBoundary, {
+    fallback: defaultErrorFallback,
+    onError: props.onError,
+    children: /* @__PURE__ */ jsxDEV(VibeHostInner, {
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+// src/hooks/useVibeEvents.ts
+import { useEffect as useEffect3 } from "react";
+function useVibeEvents(event, handler) {
+  useEffect3(() => {
+    return onEvent(event, (detail) => {
+      handler(detail.payload, detail.sourceAppId);
+    });
+  }, [event, handler]);
+}
+export {
+  useVibeLoader,
+  useVibeEvents,
+  useVibeBridge,
+  getEventBus,
+  filterByPermissions,
+  emitEvent,
+  createToastAdapter,
+  createThemeAdapter,
+  createStorageAdapter,
+  createNavigationAdapter,
+  createEventsAdapter,
+  createAuthAdapter,
+  createApiAdapter,
+  VibeHost,
+  VibeErrorBoundary
+};

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@aiworkbench/vibe-bridge",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "publishConfig": { "access": "public" },
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "bun": "./src/index.ts",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     }
@@ -16,11 +15,12 @@
     "build": "bun build ./src/index.ts --outdir ./dist --target=browser --external react --external react-dom --external next --external next-auth --external next-auth/react --external next/navigation --external sonner && tsc --emitDeclarationOnly",
     "dev": "tsc --watch --emitDeclarationOnly",
     "type-check": "tsc --noEmit",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "prepublishOnly": "bun run build"
   },
-  "files": ["dist", "src"],
+  "files": ["dist"],
   "dependencies": {
-    "@aiworkbench/vibe-types": "^0.0.2"
+    "@aiworkbench/vibe-types": "^0.0.4"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/adapters/api.ts

@@ -1,24 +0,0 @@
-import type { ApiBridge } from "@aiworkbench/vibe-types";
-
-export interface ApiAdapterDeps {
-  getToken: () => Promise<string>;
-}
-
-export function createApiAdapter(deps: ApiAdapterDeps): ApiBridge {
-  return {
-    async fetch(endpoint: string, options?: RequestInit): Promise<Response> {
-      const url = endpoint.startsWith("/api/")
-        ? endpoint
-        : `/api/${endpoint.replace(/^\//, "")}`;
-
-      const token = await deps.getToken();
-      const headers = new Headers(options?.headers);
-      headers.set("Authorization", `Bearer ${token}`);
-
-      return globalThis.fetch(url, {
-        ...options,
-        headers,
-      });
-    },
-  };
-}

package/src/adapters/auth.ts

@@ -1,28 +0,0 @@
-import type { AuthBridge, BridgeUser } from "@aiworkbench/vibe-types";
-
-export interface AuthAdapterDeps {
-  session: {
-    user?: { name?: string | null; email?: string | null } | null;
-    idToken?: string;
-  } | null;
-}
-
-export function createAuthAdapter(deps: AuthAdapterDeps): AuthBridge {
-  return {
-    getUser(): BridgeUser {
-      const user = deps.session?.user;
-      return {
-        id: user?.email ?? "unknown",
-        name: user?.name ?? "Unknown User",
-        email: user?.email ?? undefined,
-      };
-    },
-    async getToken(): Promise<string> {
-      const token = deps.session?.idToken;
-      if (!token) {
-        throw new Error("No authentication token available.");
-      }
-      return token;
-    },
-  };
-}

package/src/adapters/events.ts

@@ -1,16 +0,0 @@
-import type { EventsBridge, EventPayload } from "@aiworkbench/vibe-types";
-import { emitEvent, onEvent, onceEvent } from "../core/event-bus";
-
-export function createEventsAdapter(appId: string): EventsBridge {
-  return {
-    emit(event: string, payload?: EventPayload): void {
-      emitEvent(event, payload ?? {}, appId);
-    },
-    on(event: string, handler: (payload: EventPayload) => void): () => void {
-      return onEvent(event, (detail) => handler(detail.payload));
-    },
-    once(event: string, handler: (payload: EventPayload) => void): () => void {
-      return onceEvent(event, (detail) => handler(detail.payload));
-    },
-  };
-}

package/src/adapters/navigation.ts

@@ -1,21 +0,0 @@
-import type { NavigationBridge } from "@aiworkbench/vibe-types";
-
-export interface NavigationAdapterDeps {
-  push: (path: string) => void;
-}
-
-export function createNavigationAdapter(
-  deps: NavigationAdapterDeps,
-): NavigationBridge {
-  return {
-    navigate(path: string): void {
-      // Block external URLs and javascript: protocol
-      if (/^https?:\/\//i.test(path) || /^javascript:/i.test(path)) {
-        throw new Error(
-          `Navigation to external URLs is not allowed: ${path}`,
-        );
-      }
-      deps.push(path);
-    },
-  };
-}

package/src/adapters/storage.ts

@@ -1,27 +0,0 @@
-import type { StorageBridge } from "@aiworkbench/vibe-types";
-
-export function createStorageAdapter(appId: string): StorageBridge {
-  const prefix = `vibe:${appId}:`;
-
-  return {
-    async get(key: string): Promise<string | null> {
-      return localStorage.getItem(`${prefix}${key}`);
-    },
-    async set(key: string, value: string): Promise<void> {
-      localStorage.setItem(`${prefix}${key}`, value);
-    },
-    async remove(key: string): Promise<void> {
-      localStorage.removeItem(`${prefix}${key}`);
-    },
-    async keys(): Promise<string[]> {
-      const result: string[] = [];
-      for (let i = 0; i < localStorage.length; i++) {
-        const k = localStorage.key(i);
-        if (k?.startsWith(prefix)) {
-          result.push(k.slice(prefix.length));
-        }
-      }
-      return result;
-    },
-  };
-}

package/src/adapters/theme.ts

@@ -1,24 +0,0 @@
-import type { ThemeBridge } from "@aiworkbench/vibe-types";
-
-export function createThemeAdapter(): ThemeBridge {
-  return {
-    current(): "light" | "dark" {
-      // Check <html> class for Tailwind dark mode convention
-      const html = document.documentElement;
-      if (html.classList.contains("dark")) return "dark";
-      if (html.classList.contains("light")) return "light";
-
-      // Check data-theme attribute
-      const dataTheme = html.getAttribute("data-theme");
-      if (dataTheme === "dark") return "dark";
-      if (dataTheme === "light") return "light";
-
-      // Fallback to prefers-color-scheme media query
-      if (globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches) {
-        return "dark";
-      }
-
-      return "light";
-    },
-  };
-}

package/src/adapters/toast.ts

@@ -1,34 +0,0 @@
-import type { ToastBridge } from "@aiworkbench/vibe-types";
-
-export interface ToastAdapterDeps {
-  toast: {
-    (message: string): void;
-    success: (message: string) => void;
-    error: (message: string) => void;
-    info: (message: string) => void;
-  };
-}
-
-export function createToastAdapter(deps: ToastAdapterDeps): ToastBridge {
-  return {
-    show(
-      message: string,
-      options?: { type?: "info" | "success" | "error" },
-    ): void {
-      const type = options?.type ?? "info";
-      switch (type) {
-        case "success":
-          deps.toast.success(message);
-          break;
-        case "error":
-          deps.toast.error(message);
-          break;
-        case "info":
-          deps.toast.info(message);
-          break;
-        default:
-          deps.toast(message);
-      }
-    },
-  };
-}

package/src/components/VibeErrorBoundary.tsx

@@ -1,36 +0,0 @@
-import { Component, type ReactNode, type ErrorInfo } from "react";
-
-interface VibeErrorBoundaryProps {
-  fallback: (error: Error) => ReactNode;
-  onError?: (error: Error) => void;
-  children: ReactNode;
-}
-
-interface VibeErrorBoundaryState {
-  error: Error | null;
-}
-
-export class VibeErrorBoundary extends Component<
-  VibeErrorBoundaryProps,
-  VibeErrorBoundaryState
-> {
-  constructor(props: VibeErrorBoundaryProps) {
-    super(props);
-    this.state = { error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): VibeErrorBoundaryState {
-    return { error };
-  }
-
-  componentDidCatch(error: Error, _info: ErrorInfo): void {
-    this.props.onError?.(error);
-  }
-
-  render(): ReactNode {
-    if (this.state.error) {
-      return this.props.fallback(this.state.error);
-    }
-    return this.props.children;
-  }
-}