@creature-ai/sdk 0.1.17 → 0.1.19

package/dist/core/index.d.ts

@@ -449,6 +449,120 @@ declare class ChatGptAppHostClient extends Subscribable implements HostClient {
  */
 declare function detectEnvironment(): Environment;
 
+/**
+ * Environment-Aware Default Styles
+ *
+ * This module provides default CSS variable values for MCP Apps and ChatGPT Apps.
+ * Import `initStyles` early in your app entry point to prevent flash of unstyled content.
+ *
+ * The MCP Apps spec defines CSS variable names (e.g., --color-background-primary).
+ * This module provides environment-specific VALUES for those variables as sensible
+ * defaults until the host injects its own values.
+ *
+ * Flow:
+ * 1. Detect environment (ChatGPT, MCP Apps, or Standalone)
+ * 2. Detect theme (light or dark)
+ * 3. Inject defaults immediately on document.documentElement
+ * 4. When host connects, host variables override these defaults
+ *
+ * IMPORTANT: MCP Apps defaults match Creature's actual values exactly.
+ * The observer only runs for ChatGPT (MCP Apps hosts handle theme changes themselves).
+ */
+
+/**
+ * Theme mode for styling.
+ */
+type Theme = "light" | "dark";
+/**
+ * Options for initializing styles.
+ */
+interface InitStylesOptions {
+    /** Whether to set up a MutationObserver for dynamic theme changes. Default: true for ChatGPT only */
+    observeThemeChanges?: boolean;
+}
+/**
+ * MCP Apps / Creature default values - DARK mode.
+ * These values are extracted directly from Creature's globals.css.
+ * They MUST match exactly what Creature sends via hostContext.styles.variables.
+ */
+declare const MCP_APPS_DARK_DEFAULTS: Record<string, string>;
+/**
+ * MCP Apps / Creature default values - LIGHT mode.
+ * These values are extracted directly from Creature's globals.css.
+ */
+declare const MCP_APPS_LIGHT_DEFAULTS: Record<string, string>;
+/**
+ * Shared MCP Apps / Creature typography and layout tokens (same for light/dark).
+ * These values are extracted directly from Creature's globals.css.
+ */
+declare const MCP_APPS_SHARED_DEFAULTS: Record<string, string>;
+/**
+ * ChatGPT Apps default values - LIGHT mode.
+ * Ported from @openai/apps-sdk-ui design tokens.
+ */
+declare const CHATGPT_LIGHT_DEFAULTS: Record<string, string>;
+/**
+ * ChatGPT Apps default values - DARK mode.
+ */
+declare const CHATGPT_DARK_DEFAULTS: Record<string, string>;
+/**
+ * Shared ChatGPT typography and layout tokens (same for light/dark).
+ */
+declare const CHATGPT_SHARED_DEFAULTS: Record<string, string>;
+/**
+ * Get MCP Apps default styles for the specified theme.
+ * Returns CSS variable names with their default values.
+ * These values match exactly what Creature sends via hostContext.styles.variables.
+ *
+ * @param theme - The theme to get defaults for
+ * @returns Record of CSS variable names to their values
+ */
+declare const getMcpAppDefaultStyles: ({ theme }: {
+    theme: Theme;
+}) => Record<string, string>;
+/**
+ * Get ChatGPT Apps default styles for the specified theme.
+ * Returns CSS variable names with their values matching the @openai/apps-sdk-ui design tokens.
+ *
+ * @param theme - The theme to get defaults for
+ * @returns Record of CSS variable names to their values
+ */
+declare const getChatGptDefaultStyles: ({ theme }: {
+    theme: Theme;
+}) => Record<string, string>;
+/**
+ * Detect the current theme from the document.
+ * Checks data-theme attribute, dark class (Tailwind), and prefers-color-scheme.
+ *
+ * @returns The detected theme
+ */
+declare const detectTheme: () => Theme;
+/**
+ * Apply CSS variables to the document root.
+ *
+ * @param styles - Record of CSS variable names to their values
+ */
+declare const applyStyles: ({ styles }: {
+    styles: Record<string, string>;
+}) => void;
+/**
+ * Initialize default styles based on detected environment and theme.
+ * This should be called early in your app entry point to prevent FOUC.
+ *
+ * For MCP Apps (Creature): Applies defaults once. The host handles theme changes
+ * and sends new styles via hostContext, which override these defaults.
+ *
+ * For ChatGPT: Applies defaults and sets up an observer to handle theme changes,
+ * since ChatGPT may change theme before sending new hostContext.
+ *
+ * @param environment - The detected environment (from detectEnvironment)
+ * @param options - Configuration options
+ */
+declare const initStyles: ({ environment, options, }: {
+    environment: Environment;
+    options?: InitStylesOptions;
+}) => void;
+
 /**
  * Create a WebSocket client with automatic reconnection.
  *
@@ -458,6 +572,13 @@ declare function detectEnvironment(): Environment;
  */
 declare function createWebSocket<TSend = unknown, TReceive = unknown>(url: string, config?: WebSocketClientConfig<TReceive>): WebSocketClient<TSend, TReceive>;
 
+/**
+ * Create a host client for the detected environment.
+ * Automatically selects McpAppHostClient or ChatGptAppHostClient based on runtime detection.
+ *
+ * @param config - Configuration for the host client
+ * @returns The appropriate host client for the environment
+ */
 declare function createHost(config: HostClientConfig): HostClient;
 
-export { ChatGptAppHostClient, type DisplayMode, type Environment, type HostClient, type HostClientConfig, type HostClientEvents, type HostClientState, type HostContext, type LogLevel, McpAppHostClient, type StateListener, type StructuredWidgetState, type ToolResult, type WebSocketClient, type WebSocketClientConfig, type WebSocketStatus, type WidgetState, createHost, createWebSocket, detectEnvironment };
+export { CHATGPT_DARK_DEFAULTS, CHATGPT_LIGHT_DEFAULTS, CHATGPT_SHARED_DEFAULTS, ChatGptAppHostClient, type DisplayMode, type Environment, type HostClient, type HostClientConfig, type HostClientEvents, type HostClientState, type HostContext, type InitStylesOptions, type LogLevel, MCP_APPS_DARK_DEFAULTS, MCP_APPS_LIGHT_DEFAULTS, MCP_APPS_SHARED_DEFAULTS, McpAppHostClient, type StateListener, type StructuredWidgetState, type Theme, type ToolResult, type WebSocketClient, type WebSocketClientConfig, type WebSocketStatus, type WidgetState, applyStyles, createHost, createWebSocket, detectEnvironment, detectTheme, getChatGptDefaultStyles, getMcpAppDefaultStyles, initStyles };

package/dist/core/index.js

@@ -9795,6 +9795,345 @@ function detectEnvironment() {
   return "standalone";
 }
 
+// src/core/styles.ts
+var MCP_APPS_DARK_DEFAULTS = {
+  // Background colors
+  "--color-background-primary": "#0D0D0B",
+  "--color-background-secondary": "#1A1917",
+  "--color-background-tertiary": "#141311",
+  "--color-background-inverse": "#efefef",
+  "--color-background-ghost": "transparent",
+  "--color-background-info": "#1e3a5f",
+  "--color-background-danger": "#5f1e1e",
+  "--color-background-success": "#1e5f2e",
+  "--color-background-warning": "#5f4a1e",
+  "--color-background-disabled": "#1A1917",
+  // Text colors
+  "--color-text-primary": "#efefef",
+  "--color-text-secondary": "#888888",
+  "--color-text-tertiary": "#4A4846",
+  "--color-text-inverse": "#0D0D0B",
+  "--color-text-ghost": "#3A3836",
+  "--color-text-info": "#58a6ff",
+  "--color-text-danger": "#F85149",
+  "--color-text-success": "#3fb950",
+  "--color-text-warning": "#d29922",
+  "--color-text-disabled": "#4A4846",
+  // Border colors
+  "--color-border-primary": "#4A4846",
+  "--color-border-secondary": "#242222",
+  "--color-border-tertiary": "#1A1917",
+  "--color-border-inverse": "#ABABAB",
+  "--color-border-ghost": "transparent",
+  "--color-border-info": "#58a6ff",
+  "--color-border-danger": "#F85149",
+  "--color-border-success": "#3fb950",
+  "--color-border-warning": "#d29922",
+  "--color-border-disabled": "#242222",
+  // Ring/focus colors
+  "--color-ring-primary": "#cdcdcd",
+  "--color-ring-secondary": "#666666",
+  "--color-ring-inverse": "#0D0D0B",
+  "--color-ring-info": "#58a6ff",
+  "--color-ring-danger": "#F85149",
+  "--color-ring-success": "#3fb950",
+  "--color-ring-warning": "#d29922",
+  // Shadows (dark mode)
+  "--shadow-hairline": "0 0 0 1px rgba(0, 0, 0, 0.1)",
+  "--shadow-sm": "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
+  "--shadow-md": "0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3)",
+  "--shadow-lg": "0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3)"
+};
+var MCP_APPS_LIGHT_DEFAULTS = {
+  // Background colors
+  "--color-background-primary": "#f2f2f2",
+  "--color-background-secondary": "#e8e8e8",
+  "--color-background-tertiary": "#eaeaea",
+  "--color-background-inverse": "#1F1E1D",
+  "--color-background-ghost": "transparent",
+  "--color-background-info": "#dbeafe",
+  "--color-background-danger": "#fee2e2",
+  "--color-background-success": "#dcfce7",
+  "--color-background-warning": "#fef3c7",
+  "--color-background-disabled": "#e8e8e8",
+  // Text colors
+  "--color-text-primary": "#1F1E1D",
+  "--color-text-secondary": "#6B6A68",
+  "--color-text-tertiary": "#9A9998",
+  "--color-text-inverse": "#F8F7F6",
+  "--color-text-ghost": "#B8B7B5",
+  "--color-text-info": "#0366d6",
+  "--color-text-danger": "#DC2626",
+  "--color-text-success": "#22863a",
+  "--color-text-warning": "#b08800",
+  "--color-text-disabled": "#9A9998",
+  // Border colors
+  "--color-border-primary": "#b8b8b8",
+  "--color-border-secondary": "#d8d8d8",
+  "--color-border-tertiary": "#e8e8e8",
+  "--color-border-inverse": "#1F1E1D",
+  "--color-border-ghost": "transparent",
+  "--color-border-info": "#0366d6",
+  "--color-border-danger": "#DC2626",
+  "--color-border-success": "#22863a",
+  "--color-border-warning": "#b08800",
+  "--color-border-disabled": "#d8d8d8",
+  // Ring/focus colors
+  "--color-ring-primary": "#666666",
+  "--color-ring-secondary": "#AAAAAA",
+  "--color-ring-inverse": "#F8F7F6",
+  "--color-ring-info": "#0366d6",
+  "--color-ring-danger": "#DC2626",
+  "--color-ring-success": "#22863a",
+  "--color-ring-warning": "#b08800",
+  // Shadows (light mode)
+  "--shadow-hairline": "0 0 0 1px rgba(0, 0, 0, 0.05)",
+  "--shadow-sm": "0 1px 2px 0 rgba(0, 0, 0, 0.1)",
+  "--shadow-md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+  "--shadow-lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)"
+};
+var MCP_APPS_SHARED_DEFAULTS = {
+  // Typography - font families
+  "--font-sans": '"Sora", system-ui, sans-serif',
+  "--font-mono": '"SF Mono", Monaco, Consolas, "Liberation Mono", monospace',
+  // Typography - font weights
+  "--font-weight-normal": "400",
+  "--font-weight-medium": "500",
+  "--font-weight-semibold": "600",
+  "--font-weight-bold": "700",
+  // Typography - text sizes
+  "--font-text-xs-size": "0.6875rem",
+  "--font-text-sm-size": "0.75rem",
+  "--font-text-md-size": "0.875rem",
+  "--font-text-lg-size": "1rem",
+  // Typography - text line heights
+  "--font-text-xs-line-height": "1rem",
+  "--font-text-sm-line-height": "1.25rem",
+  "--font-text-md-line-height": "1.5rem",
+  "--font-text-lg-line-height": "1.75rem",
+  // Typography - heading sizes
+  "--font-heading-xs-size": "0.875rem",
+  "--font-heading-sm-size": "1rem",
+  "--font-heading-md-size": "1.125rem",
+  "--font-heading-lg-size": "1.25rem",
+  "--font-heading-xl-size": "1.5rem",
+  "--font-heading-2xl-size": "1.875rem",
+  "--font-heading-3xl-size": "2.25rem",
+  // Typography - heading line heights
+  "--font-heading-xs-line-height": "1.25rem",
+  "--font-heading-sm-line-height": "1.5rem",
+  "--font-heading-md-line-height": "1.75rem",
+  "--font-heading-lg-line-height": "2rem",
+  "--font-heading-xl-line-height": "2.25rem",
+  "--font-heading-2xl-line-height": "2.5rem",
+  "--font-heading-3xl-line-height": "2.75rem",
+  // Border radius
+  "--border-radius-xs": "0.125rem",
+  "--border-radius-sm": "0.25rem",
+  "--border-radius-md": "0.375rem",
+  "--border-radius-lg": "0.5rem",
+  "--border-radius-xl": "0.75rem",
+  "--border-radius-full": "9999px",
+  // Border width
+  "--border-width-regular": "1px"
+};
+var CHATGPT_LIGHT_DEFAULTS = {
+  "--color-background-primary": "#ffffff",
+  "--color-background-secondary": "#f7f7f8",
+  "--color-background-tertiary": "#ececec",
+  "--color-background-inverse": "#0d0d0d",
+  "--color-background-ghost": "rgba(0, 0, 0, 0.04)",
+  "--color-background-info": "#eef6fc",
+  "--color-background-danger": "#fdecec",
+  "--color-background-success": "#edf8ee",
+  "--color-background-warning": "#fdf5e6",
+  "--color-background-disabled": "#f4f4f4",
+  "--color-text-primary": "#0d0d0d",
+  "--color-text-secondary": "#6e6e80",
+  "--color-text-tertiary": "#8e8ea0",
+  "--color-text-inverse": "#ffffff",
+  "--color-text-ghost": "rgba(0, 0, 0, 0.4)",
+  "--color-text-info": "#0066da",
+  "--color-text-danger": "#d93025",
+  "--color-text-success": "#188038",
+  "--color-text-warning": "#b36200",
+  "--color-text-disabled": "#b4b4b4",
+  "--color-border-primary": "#e5e5e5",
+  "--color-border-secondary": "#ececec",
+  "--color-border-tertiary": "#f4f4f4",
+  "--color-border-inverse": "#3c3c3c",
+  "--color-border-ghost": "rgba(0, 0, 0, 0.08)",
+  "--color-border-info": "#a8d4fb",
+  "--color-border-danger": "#f9b4ab",
+  "--color-border-success": "#a8dab5",
+  "--color-border-warning": "#f9dca8",
+  "--color-border-disabled": "#d9d9d9",
+  "--color-ring-primary": "#10a37f",
+  "--color-ring-secondary": "#6e6e80",
+  "--color-ring-inverse": "#ffffff",
+  "--color-ring-info": "#0066da",
+  "--color-ring-danger": "#d93025",
+  "--color-ring-success": "#188038",
+  "--color-ring-warning": "#b36200"
+};
+var CHATGPT_DARK_DEFAULTS = {
+  "--color-background-primary": "#212121",
+  "--color-background-secondary": "#2f2f2f",
+  "--color-background-tertiary": "#424242",
+  "--color-background-inverse": "#ffffff",
+  "--color-background-ghost": "rgba(255, 255, 255, 0.04)",
+  "--color-background-info": "#1a3a4a",
+  "--color-background-danger": "#4a1a1a",
+  "--color-background-success": "#1a3a1a",
+  "--color-background-warning": "#4a3a1a",
+  "--color-background-disabled": "#3a3a3a",
+  "--color-text-primary": "#ececec",
+  "--color-text-secondary": "#b4b4b4",
+  "--color-text-tertiary": "#8e8e8e",
+  "--color-text-inverse": "#0d0d0d",
+  "--color-text-ghost": "rgba(255, 255, 255, 0.4)",
+  "--color-text-info": "#6eb5ff",
+  "--color-text-danger": "#ff6b6b",
+  "--color-text-success": "#6bff6b",
+  "--color-text-warning": "#ffb86b",
+  "--color-text-disabled": "#666666",
+  "--color-border-primary": "#424242",
+  "--color-border-secondary": "#3a3a3a",
+  "--color-border-tertiary": "#2f2f2f",
+  "--color-border-inverse": "#e5e5e5",
+  "--color-border-ghost": "rgba(255, 255, 255, 0.08)",
+  "--color-border-info": "#3a5a7a",
+  "--color-border-danger": "#7a3a3a",
+  "--color-border-success": "#3a7a3a",
+  "--color-border-warning": "#7a5a3a",
+  "--color-border-disabled": "#4a4a4a",
+  "--color-ring-primary": "#10a37f",
+  "--color-ring-secondary": "#8e8e8e",
+  "--color-ring-inverse": "#0d0d0d",
+  "--color-ring-info": "#6eb5ff",
+  "--color-ring-danger": "#ff6b6b",
+  "--color-ring-success": "#6bff6b",
+  "--color-ring-warning": "#ffb86b"
+};
+var CHATGPT_SHARED_DEFAULTS = {
+  "--font-sans": '"S\xF6hne", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  "--font-mono": '"S\xF6hne Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+  "--font-weight-normal": "400",
+  "--font-weight-medium": "500",
+  "--font-weight-semibold": "600",
+  "--font-weight-bold": "700",
+  "--font-text-xs-size": "0.75rem",
+  "--font-text-xs-line-height": "1rem",
+  "--font-text-sm-size": "0.875rem",
+  "--font-text-sm-line-height": "1.25rem",
+  "--font-text-md-size": "1rem",
+  "--font-text-md-line-height": "1.5rem",
+  "--font-text-lg-size": "1.125rem",
+  "--font-text-lg-line-height": "1.75rem",
+  "--font-heading-xs-size": "0.875rem",
+  "--font-heading-xs-line-height": "1.25rem",
+  "--font-heading-sm-size": "1rem",
+  "--font-heading-sm-line-height": "1.5rem",
+  "--font-heading-md-size": "1.125rem",
+  "--font-heading-md-line-height": "1.75rem",
+  "--font-heading-lg-size": "1.25rem",
+  "--font-heading-lg-line-height": "1.75rem",
+  "--font-heading-xl-size": "1.5rem",
+  "--font-heading-xl-line-height": "2rem",
+  "--font-heading-2xl-size": "1.875rem",
+  "--font-heading-2xl-line-height": "2.25rem",
+  "--font-heading-3xl-size": "2.25rem",
+  "--font-heading-3xl-line-height": "2.5rem",
+  "--border-radius-xs": "4px",
+  "--border-radius-sm": "6px",
+  "--border-radius-md": "8px",
+  "--border-radius-lg": "12px",
+  "--border-radius-xl": "16px",
+  "--border-radius-full": "9999px",
+  "--border-width-regular": "1px",
+  "--shadow-hairline": "0 0 0 1px rgba(0, 0, 0, 0.05)",
+  "--shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.04)",
+  "--shadow-md": "0 2px 8px rgba(0, 0, 0, 0.08)",
+  "--shadow-lg": "0 8px 24px rgba(0, 0, 0, 0.12)"
+};
+var getMcpAppDefaultStyles = ({ theme }) => {
+  const colorDefaults = theme === "dark" ? MCP_APPS_DARK_DEFAULTS : MCP_APPS_LIGHT_DEFAULTS;
+  return { ...colorDefaults, ...MCP_APPS_SHARED_DEFAULTS };
+};
+var getChatGptDefaultStyles = ({ theme }) => {
+  const colorDefaults = theme === "dark" ? CHATGPT_DARK_DEFAULTS : CHATGPT_LIGHT_DEFAULTS;
+  return { ...colorDefaults, ...CHATGPT_SHARED_DEFAULTS };
+};
+var detectTheme = () => {
+  if (typeof document === "undefined") {
+    return "dark";
+  }
+  const root = document.documentElement;
+  const dataTheme = root.getAttribute("data-theme");
+  if (dataTheme === "dark" || dataTheme === "light") {
+    return dataTheme;
+  }
+  if (root.classList.contains("light")) {
+    return "light";
+  }
+  if (root.classList.contains("dark")) {
+    return "dark";
+  }
+  if (typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return "dark";
+};
+var applyStyles = ({ styles }) => {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const root = document.documentElement;
+  for (const [key, value] of Object.entries(styles)) {
+    root.style.setProperty(key, value);
+  }
+};
+var initStyles = ({
+  environment,
+  options = {}
+}) => {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const theme = detectTheme();
+  const defaults = environment === "chatgpt" ? getChatGptDefaultStyles({ theme }) : getMcpAppDefaultStyles({ theme });
+  applyStyles({ styles: defaults });
+  document.documentElement.setAttribute("data-env", environment);
+  const shouldObserve = options.observeThemeChanges ?? environment === "chatgpt";
+  if (shouldObserve && environment === "chatgpt") {
+    setupThemeObserver({ environment });
+  }
+};
+var setupThemeObserver = ({ environment }) => {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") {
+    return;
+  }
+  if (environment !== "chatgpt") {
+    return;
+  }
+  const root = document.documentElement;
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "attributes" && (mutation.attributeName === "data-theme" || mutation.attributeName === "class")) {
+        const newTheme = detectTheme();
+        const defaults = getChatGptDefaultStyles({ theme: newTheme });
+        applyStyles({ styles: defaults });
+      }
+    }
+  });
+  setTimeout(() => {
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class"]
+    });
+  }, 100);
+};
+
 // src/core/websocket.ts
 function createWebSocket(url, config = {}) {
   const {
@@ -9908,14 +10247,25 @@ function createHost(config) {
   return new McpAppHostClient(config);
 }
 export {
+  CHATGPT_DARK_DEFAULTS,
+  CHATGPT_LIGHT_DEFAULTS,
+  CHATGPT_SHARED_DEFAULTS,
   ChatGptAppHostClient,
+  MCP_APPS_DARK_DEFAULTS,
+  MCP_APPS_LIGHT_DEFAULTS,
+  MCP_APPS_SHARED_DEFAULTS,
   McpAppHostClient,
   YU as applyDocumentTheme,
   qU as applyHostFonts,
   QU as applyHostStyleVariables,
+  applyStyles,
   createHost,
   createWebSocket,
   detectEnvironment,
-  VU as getDocumentTheme
+  detectTheme,
+  getChatGptDefaultStyles,
+  VU as getDocumentTheme,
+  getMcpAppDefaultStyles,
+  initStyles
 };
 //# sourceMappingURL=index.js.map