@pancake-apps/web 0.0.0-snapshot-20260125200133

package/dist/chunk-TLBYYZHP.js

@@ -0,0 +1,715 @@
+import { resetAdaptor, getAdaptor, getPlatform } from './chunk-ZYBPDIEG.js';
+import { getBridge, getStore, MCP_METHODS } from './chunk-YGGRUIUG.js';
+import { useState, useRef, useEffect, useCallback, useSyncExternalStore } from 'react';
+
+// src/unified/view.ts
+var View = class {
+  adaptor;
+  options;
+  _isConnected = false;
+  cleanupFns = [];
+  _hostContext;
+  _hostCapabilities;
+  _hostInfo;
+  // ============================================
+  // Event Handlers
+  // ============================================
+  /**
+   * Called when tool input is received (complete input)
+   */
+  ontoolinput;
+  /**
+   * Called during streaming when partial tool input is received (MCP only)
+   */
+  ontoolinputpartial;
+  /**
+   * Called when tool result is received
+   */
+  ontoolresult;
+  /**
+   * Called when tool execution is cancelled
+   */
+  ontoolcancelled;
+  /**
+   * Called when host context changes (theme, display mode, etc.)
+   */
+  onhostcontextchanged;
+  /**
+   * Called when the host requests teardown
+   */
+  onteardown;
+  /**
+   * Called when an error occurs
+   */
+  onerror;
+  /**
+   * Called when the connection is closed
+   */
+  onclose;
+  // ============================================
+  // Constructor
+  // ============================================
+  constructor(options = {}) {
+    this.options = options;
+    if (options.platform) {
+      resetAdaptor();
+    }
+    this.adaptor = getAdaptor();
+  }
+  // ============================================
+  // Getters
+  // ============================================
+  /**
+   * Get the current host context (MCP-specific)
+   */
+  getHostContext() {
+    return this._hostContext;
+  }
+  /**
+   * Get host capabilities (MCP-specific)
+   */
+  getHostCapabilities() {
+    return this._hostCapabilities;
+  }
+  /**
+   * Get host info (MCP-specific)
+   */
+  getHostInfo() {
+    return this._hostInfo;
+  }
+  /**
+   * Check if the view is connected
+   */
+  isConnected() {
+    return this._isConnected;
+  }
+  /**
+   * Get the current platform
+   */
+  getPlatform() {
+    return getPlatform();
+  }
+  /**
+   * Get the underlying adaptor for advanced use cases
+   */
+  getAdaptor() {
+    return this.adaptor;
+  }
+  // ============================================
+  // Context Getters
+  // ============================================
+  /**
+   * Get the current theme
+   */
+  getTheme() {
+    return this.adaptor.getTheme();
+  }
+  /**
+   * Get the current locale
+   */
+  getLocale() {
+    return this.adaptor.getLocale();
+  }
+  /**
+   * Get the current display mode
+   */
+  getDisplayMode() {
+    return this.adaptor.getDisplayMode();
+  }
+  /**
+   * Get the max height constraint
+   */
+  getMaxHeight() {
+    return this.adaptor.getMaxHeight();
+  }
+  /**
+   * Get safe area insets
+   */
+  getSafeArea() {
+    return this.adaptor.getSafeArea();
+  }
+  /**
+   * Get the normalized platform
+   */
+  getNormalizedPlatform() {
+    return this.adaptor.getPlatform();
+  }
+  /**
+   * Get the device type
+   */
+  getDeviceType() {
+    return this.adaptor.getDeviceType();
+  }
+  /**
+   * Get container size
+   */
+  getContainerSize() {
+    return this.adaptor.getContainerSize();
+  }
+  /**
+   * Get input capabilities
+   */
+  getInputCapabilities() {
+    return this.adaptor.getInputCapabilities();
+  }
+  /**
+   * Get the current tool input
+   */
+  getToolInput() {
+    return this.adaptor.getToolInput();
+  }
+  /**
+   * Get partial tool input during streaming (MCP only)
+   */
+  getToolInputPartial() {
+    return this.adaptor.getToolInputPartial();
+  }
+  /**
+   * Get the current tool output
+   */
+  getToolOutput() {
+    return this.adaptor.getToolOutput();
+  }
+  // ============================================
+  // Connection
+  // ============================================
+  /**
+   * Connect to the host platform.
+   * For MCP, this performs the initialization handshake.
+   * For Apps SDK, this is a no-op (already connected).
+   */
+  async connect() {
+    if (this._isConnected) {
+      return;
+    }
+    try {
+      if (this.adaptor.platform === "mcp-apps") {
+        await this.connectMcp();
+      } else {
+        await this.connectAppsSdk();
+      }
+      this._isConnected = true;
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      this.onerror?.(err);
+      throw err;
+    }
+  }
+  async connectMcp() {
+    const bridge = getBridge();
+    const store = getStore();
+    const initResult = await bridge.initialize({
+      clientInfo: this.options.appInfo ?? { name: "pancake-app", version: "1.0.0" },
+      capabilities: this.options.capabilities ?? {}
+    });
+    this._hostContext = initResult.hostContext;
+    this._hostCapabilities = initResult.hostCapabilities;
+    this._hostInfo = initResult.hostInfo;
+    store.setInitialized(initResult.hostContext, initResult.hostCapabilities, initResult.hostInfo);
+    this.cleanupFns.push(
+      bridge.onNotification(MCP_METHODS.TOOL_INPUT, (params) => {
+        this.ontoolinput?.(params);
+      })
+    );
+    this.cleanupFns.push(
+      bridge.onNotification(MCP_METHODS.TOOL_INPUT_PARTIAL, (params) => {
+        this.ontoolinputpartial?.(params);
+      })
+    );
+    this.cleanupFns.push(
+      bridge.onNotification(MCP_METHODS.TOOL_RESULT, (params) => {
+        this.ontoolresult?.(params);
+      })
+    );
+    this.cleanupFns.push(
+      bridge.onNotification(MCP_METHODS.TOOL_CANCELLED, (params) => {
+        this.ontoolcancelled?.(params);
+      })
+    );
+    this.cleanupFns.push(
+      bridge.onNotification(MCP_METHODS.HOST_CONTEXT_CHANGED, (params) => {
+        const changes = params;
+        this._hostContext = { ...this._hostContext, ...changes };
+        this.onhostcontextchanged?.(this._hostContext);
+      })
+    );
+    if (this.onteardown) {
+      this.cleanupFns.push(bridge.onTeardown(this.onteardown));
+    }
+  }
+  async connectAppsSdk() {
+    await this.adaptor.ensureReady();
+    this._hostContext = {
+      theme: this.adaptor.getTheme(),
+      displayMode: this.adaptor.getDisplayMode(),
+      locale: this.adaptor.getLocale()
+    };
+  }
+  /**
+   * Close the view and cleanup resources
+   */
+  close() {
+    this.cleanupFns.forEach((fn) => fn());
+    this.cleanupFns = [];
+    this._isConnected = false;
+    this.onclose?.();
+  }
+  // ============================================
+  // Actions
+  // ============================================
+  /**
+   * Call a server tool
+   */
+  async callTool(name, args) {
+    this.ensureConnected();
+    return this.adaptor.callTool(name, args);
+  }
+  /**
+   * Send a message to the chat
+   */
+  async sendMessage(content) {
+    this.ensureConnected();
+    if (typeof content === "string") {
+      this.adaptor.sendFollowUpMessage(content);
+    } else {
+      const text = content.filter((block) => block.type === "text" && !!block.text).map((block) => block.text).join("\n");
+      this.adaptor.sendFollowUpMessage(text);
+    }
+  }
+  /**
+   * Open a link in the browser
+   */
+  async openLink(url) {
+    this.ensureConnected();
+    this.adaptor.openExternal(url);
+  }
+  /**
+   * Request a display mode change
+   */
+  async requestDisplayMode(mode) {
+    this.ensureConnected();
+    if (this.adaptor.platform === "mcp-apps") {
+      const bridge = getBridge();
+      return bridge.requestDisplayMode(mode);
+    } else {
+      this.adaptor.requestDisplayMode(mode);
+      return mode;
+    }
+  }
+  /**
+   * Update the model context (MCP only)
+   */
+  async updateModelContext(content, structured) {
+    this.ensureConnected();
+    const params = {};
+    if (content) params.content = content;
+    if (structured) params.structuredContent = structured;
+    await this.adaptor.updateModelContext(params);
+  }
+  /**
+   * Read a resource (MCP only)
+   */
+  async readResource(uri) {
+    this.ensureConnected();
+    return this.adaptor.readResource(uri);
+  }
+  /**
+   * Notify the host of size changes
+   */
+  notifySizeChanged(width, height) {
+    this.adaptor.notifySizeChanged(width, height);
+  }
+  /**
+   * Setup automatic size reporting
+   */
+  setupAutoSizeReporting(element) {
+    const el = element ?? (typeof document !== "undefined" ? document.documentElement : void 0);
+    if (!el) return () => {
+    };
+    return this.adaptor.setupAutoSizeReporting(el);
+  }
+  /**
+   * Log a message to the host
+   */
+  log(level, data, logger) {
+    this.adaptor.log(level, data, logger);
+  }
+  /**
+   * Ping the host (MCP only)
+   */
+  async ping() {
+    await this.adaptor.ping();
+  }
+  // ============================================
+  // Private Helpers
+  // ============================================
+  ensureConnected() {
+    if (!this._isConnected) {
+      throw new Error("View is not connected. Call connect() first.");
+    }
+  }
+};
+async function createView(options = {}) {
+  const { autoConnect = false, ...viewOptions } = options;
+  const view = new View(viewOptions);
+  if (autoConnect) {
+    await view.connect();
+  }
+  return view;
+}
+
+// src/unified/react/use-view.ts
+function useView(options = {}) {
+  const {
+    autoConnect = true,
+    onViewCreated,
+    onConnected,
+    onError,
+    onClose,
+    ...viewOptions
+  } = options;
+  const [view, setView] = useState(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [error, setError] = useState(null);
+  const onViewCreatedRef = useRef(onViewCreated);
+  const onConnectedRef = useRef(onConnected);
+  const onErrorRef = useRef(onError);
+  const onCloseRef = useRef(onClose);
+  onViewCreatedRef.current = onViewCreated;
+  onConnectedRef.current = onConnected;
+  onErrorRef.current = onError;
+  onCloseRef.current = onClose;
+  useEffect(() => {
+    const newView = new View(viewOptions);
+    newView.onclose = () => {
+      setIsConnected(false);
+      onCloseRef.current?.();
+    };
+    newView.onerror = (err) => {
+      setError(err);
+      onErrorRef.current?.(err);
+    };
+    onViewCreatedRef.current?.(newView);
+    setView(newView);
+    return () => {
+      newView.close();
+    };
+  }, []);
+  const connect = useCallback(async () => {
+    if (!view || isConnecting || isConnected) return;
+    setIsConnecting(true);
+    setError(null);
+    try {
+      await view.connect();
+      setIsConnected(true);
+      onConnectedRef.current?.(view);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      setError(error2);
+      onErrorRef.current?.(error2);
+    } finally {
+      setIsConnecting(false);
+    }
+  }, [view, isConnecting, isConnected]);
+  const disconnect = useCallback(() => {
+    if (view && isConnected) {
+      view.close();
+      setIsConnected(false);
+    }
+  }, [view, isConnected]);
+  useEffect(() => {
+    if (view && autoConnect && !isConnected && !isConnecting) {
+      connect();
+    }
+  }, [view, autoConnect, isConnected, isConnecting, connect]);
+  return {
+    view,
+    isConnected,
+    isConnecting,
+    error,
+    connect,
+    disconnect
+  };
+}
+
+// src/unified/style-utils.ts
+function getDocumentTheme() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return "light";
+  }
+  const colorSchemeMeta = document.querySelector('meta[name="color-scheme"]');
+  if (colorSchemeMeta) {
+    const content = colorSchemeMeta.getAttribute("content");
+    if (content?.includes("dark")) return "dark";
+    if (content?.includes("light")) return "light";
+  }
+  const docElement = document.documentElement;
+  if (docElement.classList.contains("dark")) return "dark";
+  if (docElement.classList.contains("light")) return "light";
+  const dataTheme = docElement.getAttribute("data-theme");
+  if (dataTheme === "dark") return "dark";
+  if (dataTheme === "light") return "light";
+  if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return "light";
+}
+function observeDocumentTheme(callback) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return {
+      getTheme: () => "light",
+      disconnect: () => {
+      }
+    };
+  }
+  let currentTheme = getDocumentTheme();
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const handleMediaChange = () => {
+    const newTheme = getDocumentTheme();
+    if (newTheme !== currentTheme) {
+      currentTheme = newTheme;
+      callback(newTheme);
+    }
+  };
+  const observer = new MutationObserver(() => {
+    const newTheme = getDocumentTheme();
+    if (newTheme !== currentTheme) {
+      currentTheme = newTheme;
+      callback(newTheme);
+    }
+  });
+  mediaQuery.addEventListener("change", handleMediaChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-theme"]
+  });
+  return {
+    getTheme: () => currentTheme,
+    disconnect: () => {
+      mediaQuery.removeEventListener("change", handleMediaChange);
+      observer.disconnect();
+    }
+  };
+}
+function applyDocumentTheme(theme) {
+  if (typeof document === "undefined") return;
+  const docElement = document.documentElement;
+  docElement.classList.remove("light", "dark");
+  docElement.classList.add(theme);
+  docElement.setAttribute("data-theme", theme);
+  docElement.style.colorScheme = theme;
+}
+var STYLE_ELEMENT_ID = "pancake-host-styles";
+var FONTS_STYLE_ELEMENT_ID = "pancake-host-fonts";
+function applyHostStyleVariables(variables) {
+  if (typeof document === "undefined") return;
+  let styleElement = document.getElementById(STYLE_ELEMENT_ID);
+  if (!styleElement) {
+    styleElement = document.createElement("style");
+    styleElement.id = STYLE_ELEMENT_ID;
+    document.head.appendChild(styleElement);
+  }
+  const cssVars = Object.entries(variables).map(([key, value]) => `  ${key}: ${value};`).join("\n");
+  styleElement.textContent = `:root {
+${cssVars}
+}`;
+}
+function applyHostFonts(css) {
+  if (typeof document === "undefined") return;
+  let styleElement = document.getElementById(FONTS_STYLE_ELEMENT_ID);
+  if (!styleElement) {
+    styleElement = document.createElement("style");
+    styleElement.id = FONTS_STYLE_ELEMENT_ID;
+    document.head.appendChild(styleElement);
+  }
+  styleElement.textContent = css;
+}
+function clearHostStyles() {
+  if (typeof document === "undefined") return;
+  document.getElementById(STYLE_ELEMENT_ID)?.remove();
+  document.getElementById(FONTS_STYLE_ELEMENT_ID)?.remove();
+}
+function applyHostContext(context) {
+  if (!context) return;
+  if (context.theme) {
+    applyDocumentTheme(context.theme);
+  }
+  if (context.styles?.variables) {
+    applyHostStyleVariables(context.styles.variables);
+  }
+  if (context.styles?.css?.fonts) {
+    applyHostFonts(context.styles.css.fonts);
+  }
+}
+function getComputedStyleVariables(element, variableNames) {
+  if (typeof window === "undefined") return {};
+  const el = element ?? document.documentElement;
+  const computedStyle = window.getComputedStyle(el);
+  const result = {};
+  if (variableNames) {
+    for (const name of variableNames) {
+      const value = computedStyle.getPropertyValue(name).trim();
+      if (value) {
+        result[name] = value;
+      }
+    }
+  } else {
+    const cssText = el.style.cssText;
+    const matches = cssText.matchAll(/(--[\w-]+):\s*([^;]+)/g);
+    for (const match of matches) {
+      const key = match[1];
+      const value = match[2];
+      if (key && value) {
+        result[key] = value.trim();
+      }
+    }
+  }
+  return result;
+}
+function applySafeAreaInsets(insets) {
+  if (typeof document === "undefined") return;
+  const docElement = document.documentElement;
+  docElement.style.setProperty("--safe-area-inset-top", `${insets.top}px`);
+  docElement.style.setProperty("--safe-area-inset-right", `${insets.right}px`);
+  docElement.style.setProperty("--safe-area-inset-bottom", `${insets.bottom}px`);
+  docElement.style.setProperty("--safe-area-inset-left", `${insets.left}px`);
+}
+function getSafeAreaInsets() {
+  if (typeof window === "undefined") {
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+  }
+  const computedStyle = window.getComputedStyle(document.documentElement);
+  const parseValue = (value) => {
+    const num = parseFloat(value);
+    return isNaN(num) ? 0 : num;
+  };
+  return {
+    top: parseValue(computedStyle.getPropertyValue("--safe-area-inset-top")),
+    right: parseValue(computedStyle.getPropertyValue("--safe-area-inset-right")),
+    bottom: parseValue(computedStyle.getPropertyValue("--safe-area-inset-bottom")),
+    left: parseValue(computedStyle.getPropertyValue("--safe-area-inset-left"))
+  };
+}
+
+// src/unified/react/use-host-styles.ts
+function useHostStyles(context, options = {}) {
+  const {
+    applyTheme = true,
+    applyVariables = true,
+    applyFonts = true,
+    applySafeArea = true,
+    clearOnUnmount = true
+  } = options;
+  const appliedRef = useRef(false);
+  useEffect(() => {
+    if (!context) return;
+    if (applyTheme && context.theme) {
+      applyDocumentTheme(context.theme);
+    }
+    if (applyVariables && context.styles?.variables) {
+      applyHostStyleVariables(context.styles.variables);
+    }
+    if (applyFonts && context.styles?.css?.fonts) {
+      applyHostFonts(context.styles.css.fonts);
+    }
+    if (applySafeArea && context.safeAreaInsets) {
+      applySafeAreaInsets(context.safeAreaInsets);
+    }
+    appliedRef.current = true;
+  }, [context, applyTheme, applyVariables, applyFonts, applySafeArea]);
+  useEffect(() => {
+    return () => {
+      if (clearOnUnmount && appliedRef.current) {
+        clearHostStyles();
+      }
+    };
+  }, [clearOnUnmount]);
+}
+function useHostTheme(context) {
+  useEffect(() => {
+    if (context?.theme) {
+      applyDocumentTheme(context.theme);
+    }
+  }, [context?.theme]);
+}
+function useHostVariables(context) {
+  useEffect(() => {
+    if (context?.styles?.variables) {
+      applyHostStyleVariables(context.styles.variables);
+    }
+  }, [context?.styles?.variables]);
+}
+function useHostFontsHook(context) {
+  useEffect(() => {
+    if (context?.styles?.css?.fonts) {
+      applyHostFonts(context.styles.css.fonts);
+    }
+  }, [context?.styles?.css?.fonts]);
+}
+function useDocumentTheme() {
+  return useSyncExternalStore(
+    subscribeToTheme,
+    getDocumentTheme,
+    getServerTheme
+  );
+}
+function subscribeToTheme(callback) {
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  mediaQuery.addEventListener("change", callback);
+  const observer = new MutationObserver(callback);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-theme"]
+  });
+  return () => {
+    mediaQuery.removeEventListener("change", callback);
+    observer.disconnect();
+  };
+}
+function getServerTheme() {
+  return "light";
+}
+function useDocumentThemeState() {
+  const [theme, setTheme] = useState(() => {
+    if (typeof window === "undefined") return "light";
+    return getDocumentTheme();
+  });
+  useEffect(() => {
+    const { disconnect } = observeDocumentTheme((newTheme) => {
+      setTheme(newTheme);
+    });
+    return disconnect;
+  }, []);
+  return theme;
+}
+function useSystemColorScheme() {
+  return useSyncExternalStore(
+    subscribeToSystemColorScheme,
+    getSystemColorScheme,
+    getServerTheme
+  );
+}
+function subscribeToSystemColorScheme(callback) {
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  mediaQuery.addEventListener("change", callback);
+  return () => {
+    mediaQuery.removeEventListener("change", callback);
+  };
+}
+function getSystemColorScheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+export { View, applyDocumentTheme, applyHostContext, applyHostFonts, applyHostStyleVariables, applySafeAreaInsets, clearHostStyles, createView, getComputedStyleVariables, getDocumentTheme, getSafeAreaInsets, observeDocumentTheme, useDocumentTheme, useDocumentThemeState, useHostFontsHook, useHostStyles, useHostTheme, useHostVariables, useSystemColorScheme, useView };
+//# sourceMappingURL=chunk-TLBYYZHP.js.map
+//# sourceMappingURL=chunk-TLBYYZHP.js.map