@creature-ai/sdk 0.1.18 → 0.1.19

package/dist/core/index.d.ts

@@ -464,6 +464,9 @@ declare function detectEnvironment(): Environment;
  * 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).
  */
 
 /**
@@ -474,20 +477,23 @@ type Theme = "light" | "dark";
  * Options for initializing styles.
  */
 interface InitStylesOptions {
-    /** Whether to set up a MutationObserver for dynamic theme changes. Default: true */
+    /** Whether to set up a MutationObserver for dynamic theme changes. Default: true for ChatGPT only */
     observeThemeChanges?: boolean;
 }
-/**
- * MCP Apps / Creature default values - LIGHT mode.
- * Host will override these with actual values via hostContext.styles.variables.
- */
-declare const MCP_APPS_LIGHT_DEFAULTS: Record<string, string>;
 /**
  * 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>;
 /**
- * Shared MCP Apps typography and layout tokens (same for light/dark).
+ * 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>;
 /**
@@ -506,6 +512,7 @@ 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
@@ -542,6 +549,12 @@ declare const applyStyles: ({ styles }: {
  * 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
  */

package/dist/core/index.js

@@ -9796,124 +9796,146 @@ function detectEnvironment() {
 }
 
 // src/core/styles.ts
-var MCP_APPS_LIGHT_DEFAULTS = {
-  "--color-background-primary": "#ffffff",
-  "--color-background-secondary": "#f8f9fa",
-  "--color-background-tertiary": "#f1f3f5",
-  "--color-background-inverse": "#1a1a1a",
-  "--color-background-ghost": "rgba(0, 0, 0, 0.04)",
-  "--color-background-info": "#e7f5ff",
-  "--color-background-danger": "#fff5f5",
-  "--color-background-success": "#ebfbee",
-  "--color-background-warning": "#fff9db",
-  "--color-background-disabled": "#e9ecef",
-  "--color-text-primary": "#212529",
-  "--color-text-secondary": "#495057",
-  "--color-text-tertiary": "#868e96",
-  "--color-text-inverse": "#ffffff",
-  "--color-text-ghost": "rgba(0, 0, 0, 0.4)",
-  "--color-text-info": "#1971c2",
-  "--color-text-danger": "#c92a2a",
-  "--color-text-success": "#2f9e44",
-  "--color-text-warning": "#e67700",
-  "--color-text-disabled": "#adb5bd",
-  "--color-border-primary": "#dee2e6",
-  "--color-border-secondary": "#e9ecef",
-  "--color-border-tertiary": "#f1f3f5",
-  "--color-border-inverse": "#343a40",
-  "--color-border-ghost": "rgba(0, 0, 0, 0.08)",
-  "--color-border-info": "#74c0fc",
-  "--color-border-danger": "#ffa8a8",
-  "--color-border-success": "#8ce99a",
-  "--color-border-warning": "#ffe066",
-  "--color-border-disabled": "#ced4da",
-  "--color-ring-primary": "#228be6",
-  "--color-ring-secondary": "#495057",
-  "--color-ring-inverse": "#ffffff",
-  "--color-ring-info": "#228be6",
-  "--color-ring-danger": "#fa5252",
-  "--color-ring-success": "#40c057",
-  "--color-ring-warning": "#fab005"
-};
 var MCP_APPS_DARK_DEFAULTS = {
-  "--color-background-primary": "#1a1a1a",
-  "--color-background-secondary": "#252525",
-  "--color-background-tertiary": "#2f2f2f",
-  "--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": "#2a2a2a",
-  "--color-text-primary": "#e9ecef",
-  "--color-text-secondary": "#adb5bd",
-  "--color-text-tertiary": "#868e96",
-  "--color-text-inverse": "#1a1a1a",
-  "--color-text-ghost": "rgba(255, 255, 255, 0.4)",
-  "--color-text-info": "#74c0fc",
-  "--color-text-danger": "#ffa8a8",
-  "--color-text-success": "#8ce99a",
-  "--color-text-warning": "#ffe066",
-  "--color-text-disabled": "#495057",
-  "--color-border-primary": "#343a40",
-  "--color-border-secondary": "#2f2f2f",
-  "--color-border-tertiary": "#252525",
-  "--color-border-inverse": "#dee2e6",
-  "--color-border-ghost": "rgba(255, 255, 255, 0.08)",
-  "--color-border-info": "#1971c2",
-  "--color-border-danger": "#c92a2a",
-  "--color-border-success": "#2f9e44",
-  "--color-border-warning": "#e67700",
-  "--color-border-disabled": "#3a3a3a",
-  "--color-ring-primary": "#4dabf7",
-  "--color-ring-secondary": "#adb5bd",
-  "--color-ring-inverse": "#1a1a1a",
-  "--color-ring-info": "#4dabf7",
-  "--color-ring-danger": "#ff8787",
-  "--color-ring-success": "#69db7c",
-  "--color-ring-warning": "#ffd43b"
+  // 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 = {
-  "--font-sans": '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-  "--font-mono": 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+  // 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",
-  "--font-text-xs-size": "0.75rem",
+  // 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-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",
+  // Typography - heading sizes
   "--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": "2px",
-  "--border-radius-sm": "4px",
-  "--border-radius-md": "6px",
-  "--border-radius-lg": "8px",
-  "--border-radius-xl": "12px",
+  // 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-regular": "1px",
-  "--shadow-hairline": "0 0 0 1px rgba(0, 0, 0, 0.05)",
-  "--shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.05)",
-  "--shadow-md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-  "--shadow-lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
+  // Border width
+  "--border-width-regular": "1px"
 };
 var CHATGPT_LIGHT_DEFAULTS = {
   "--color-background-primary": "#ffffff",
@@ -10044,20 +10066,23 @@ var getChatGptDefaultStyles = ({ theme }) => {
 };
 var detectTheme = () => {
   if (typeof document === "undefined") {
-    return "light";
+    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 "light";
+  return "dark";
 };
 var applyStyles = ({ styles }) => {
   if (typeof document === "undefined") {
@@ -10075,12 +10100,12 @@ var initStyles = ({
   if (typeof document === "undefined") {
     return;
   }
-  const { observeThemeChanges = true } = options;
   const theme = detectTheme();
   const defaults = environment === "chatgpt" ? getChatGptDefaultStyles({ theme }) : getMcpAppDefaultStyles({ theme });
   applyStyles({ styles: defaults });
   document.documentElement.setAttribute("data-env", environment);
-  if (observeThemeChanges) {
+  const shouldObserve = options.observeThemeChanges ?? environment === "chatgpt";
+  if (shouldObserve && environment === "chatgpt") {
     setupThemeObserver({ environment });
   }
 };
@@ -10088,13 +10113,15 @@ 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 currentEnv = root.getAttribute("data-env") || environment;
-        const defaults = currentEnv === "chatgpt" ? getChatGptDefaultStyles({ theme: newTheme }) : getMcpAppDefaultStyles({ theme: newTheme });
+        const defaults = getChatGptDefaultStyles({ theme: newTheme });
         applyStyles({ styles: defaults });
       }
     }