@syntrologie/runtime-sdk 0.2.1 → 0.2.3

package/dist/telemetry/adapters/posthog.d.ts

@@ -59,6 +59,12 @@ export declare class PostHogAdapter implements TelemetryClient {
     trackCanvasClosed(surface: CanvasSurface): void;
     trackRectangleViewed(rectangleId: string, surface: CanvasSurface): void;
     trackAction(action: string, rectangleId: string, surface: CanvasSurface): void;
+    register(properties: Record<string, unknown>): void;
+    getSessionId(): string | undefined;
+    startSessionRecording(): void;
+    trackExperiment(experimentKey: string, variationId: number, variationName?: string): void;
+    setPersonProperties(properties: Record<string, unknown>): void;
+    setPersonPropertiesOnce(properties: Record<string, unknown>): void;
 }
 /**
  * Create a TelemetryClient backed by PostHog.

package/dist/telemetry/adapters/posthog.js

@@ -9,13 +9,21 @@ export class PostHogAdapter {
         this.client = options.client;
         if (!this.client && typeof window !== "undefined" && options.apiKey) {
             this.client = posthog;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.client.init(options.apiKey, {
                 api_host: (_a = options.apiHost) !== null && _a !== void 0 ? _a : "https://posthog-dev.syntrologie.com",
+                // Disable feature flags - we use GrowthBook for experiments
+                advanced_disable_feature_flags: true,
+                advanced_disable_feature_flags_on_first_load: true,
                 // Full-page tracking - all ON by default
                 autocapture: (_b = options.autocapture) !== null && _b !== void 0 ? _b : true,
                 capture_pageview: (_c = options.capturePageview) !== null && _c !== void 0 ? _c : true,
                 capture_pageleave: (_d = options.capturePageleave) !== null && _d !== void 0 ? _d : true,
                 disable_session_recording: !((_e = options.sessionRecording) !== null && _e !== void 0 ? _e : true),
+                // CRITICAL: Disable user agent filtering to allow headless Chrome
+                // PostHog blocks "HeadlessChrome" user agents by default as bot detection
+                // This enables session recording in Playwright/crawler sessions
+                opt_out_useragent_filter: true,
                 // Cross-domain iframe recording for embeds
                 session_recording: {
                     recordCrossDomainIFrames: true,
@@ -51,6 +59,46 @@ export class PostHogAdapter {
     trackAction(action, rectangleId, surface) {
         this.track("shadow_canvas_action", { action, rectangleId, surface });
     }
+    register(properties) {
+        var _a, _b;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (_b = (_a = this.client) === null || _a === void 0 ? void 0 : _a.register) === null || _b === void 0 ? void 0 : _b.call(_a, properties);
+    }
+    getSessionId() {
+        var _a, _b;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return (_b = (_a = this.client) === null || _a === void 0 ? void 0 : _a.get_session_id) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    startSessionRecording() {
+        var _a, _b;
+        // Force start recording - bypasses bot detection for crawler sessions
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (_b = (_a = this.client) === null || _a === void 0 ? void 0 : _a.startSessionRecording) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    trackExperiment(experimentKey, variationId, variationName) {
+        // Register as super property so all subsequent events include experiment data
+        const experimentProperty = `$experiment_${experimentKey}`;
+        this.register({
+            [experimentProperty]: variationName !== null && variationName !== void 0 ? variationName : `variation_${variationId}`,
+            [`${experimentProperty}_id`]: variationId,
+        });
+        // Fire discrete event for experiment assignment tracking
+        this.track("$experiment_started", {
+            $experiment_key: experimentKey,
+            $experiment_variation_id: variationId,
+            $experiment_variation_name: variationName !== null && variationName !== void 0 ? variationName : `variation_${variationId}`,
+        });
+    }
+    setPersonProperties(properties) {
+        var _a;
+        // PostHog's $set event sets person properties
+        (_a = this.client) === null || _a === void 0 ? void 0 : _a.capture("$set", { $set: properties });
+    }
+    setPersonPropertiesOnce(properties) {
+        var _a;
+        // PostHog's $set_once only sets if property doesn't exist
+        (_a = this.client) === null || _a === void 0 ? void 0 : _a.capture("$set", { $set_once: properties });
+    }
 }
 /**
  * Create a TelemetryClient backed by PostHog.

package/dist/telemetry/adapters/posthog.js.map

@@ -1 +1 @@
-{"version":3,"file":"posthog.js","sourceRoot":"","sources":["../../../src/telemetry/adapters/posthog.ts"],"names":[],"mappings":"AAOA,OAAO,OAAO,MAAM,YAAY,CAAC;AAkDjC;;GAEG;AACH,MAAM,OAAO,cAAc;IAGzB,YAA6B,UAAiC,EAAE;;QAAnC,YAAO,GAAP,OAAO,CAA4B;QAC9D,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;YACpE,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;YACtB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;gBAC/B,QAAQ,EAAE,MAAA,OAAO,CAAC,OAAO,mCAAI,qCAAqC;gBAClE,yCAAyC;gBACzC,WAAW,EAAE,MAAA,OAAO,CAAC,WAAW,mCAAI,IAAI;gBACxC,gBAAgB,EAAE,MAAA,OAAO,CAAC,eAAe,mCAAI,IAAI;gBACjD,iBAAiB,EAAE,MAAA,OAAO,CAAC,gBAAgB,mCAAI,IAAI;gBACnD,yBAAyB,EAAE,CAAC,CAAC,MAAA,OAAO,CAAC,gBAAgB,mCAAI,IAAI,CAAC;gBAC9D,2CAA2C;gBAC3C,iBAAiB,EAAE;oBACjB,wBAAwB,EAAE,IAAI;iBAC/B;gBACD,8BAA8B;gBAC9B,mBAAmB,EAAE,IAAI;gBACzB,oBAAoB;gBACpB,4BAA4B,EAAE,IAAI;aACnC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,EAAU,EAAE,KAAkB;;QACrC,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,KAAK,CAAC,EAAU,EAAE,OAAe;;QAC/B,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAClC,CAAC;IAED,KAAK,CAAC,SAAiB,EAAE,OAAgC;;QACvD,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,iBAAiB,CAAC,OAAsB;QACtC,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,iBAAiB,CAAC,OAAsB;QACtC,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,oBAAoB,CAAC,WAAmB,EAAE,OAAsB;QAC9D,IAAI,CAAC,KAAK,CAAC,gCAAgC,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC;IACzE,CAAC;IAED,WAAW,CAAC,MAAc,EAAE,WAAmB,EAAE,OAAsB;QACrE,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC;IACvE,CAAC;CACF;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB,CACjC,UAAiC,EAAE;IAEnC,OAAO,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;AACrC,CAAC"}
+{"version":3,"file":"posthog.js","sourceRoot":"","sources":["../../../src/telemetry/adapters/posthog.ts"],"names":[],"mappings":"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"}

package/dist/telemetry/types.d.ts

@@ -25,4 +25,34 @@ export interface TelemetryClient {
      * Track a user action.
      */
     trackAction(action: string, rectangleId: string, surface: CanvasSurface): void;
+    /**
+     * Register super properties that will be sent with all subsequent events.
+     * Used by the editor SDK to tag crawler sessions.
+     */
+    register?(properties: Record<string, unknown>): void;
+    /**
+     * Get the current session ID from the telemetry provider.
+     */
+    getSessionId?(): string | undefined;
+    /**
+     * Force start session recording.
+     * Used to bypass bot detection for crawler sessions.
+     */
+    startSessionRecording?(): void;
+    /**
+     * Track experiment assignment.
+     * Called when a user is assigned to an experiment variation.
+     * Registers experiment as super property and fires $experiment_started event.
+     */
+    trackExperiment?(experimentKey: string, variationId: number, variationName?: string): void;
+    /**
+     * Set person properties that persist across sessions/devices.
+     * Used to store tour completion state, user preferences, etc.
+     */
+    setPersonProperties?(properties: Record<string, unknown>): void;
+    /**
+     * Set person properties only if they haven't been set before.
+     * Useful for tracking first-time events like tour completion.
+     */
+    setPersonPropertiesOnce?(properties: Record<string, unknown>): void;
 }

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+import type { CanvasThemeTokens, ThemeAppearance, ThemeMode } from "./types";
+interface ThemeContextValue {
+    theme: CanvasThemeTokens;
+    mode: ThemeMode;
+    cssVariables: Record<string, string>;
+    setMode: (mode: ThemeMode) => void;
+}
+export interface ThemeProviderProps {
+    children: ReactNode;
+    appearance?: ThemeAppearance;
+    autoDetect?: boolean;
+    shadowRoot?: ShadowRoot | null;
+}
+/**
+ * Theme provider component that injects CSS variables into shadow DOM
+ */
+export declare function ThemeProvider({ children, appearance, autoDetect, shadowRoot, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access theme context
+ */
+export declare function useTheme(): ThemeContextValue;
+/**
+ * Hook to get specific theme token with CSS variable fallback
+ */
+export declare function useThemeToken<K extends keyof CanvasThemeTokens>(token: K): string;
+/**
+ * Hook to get CSS variable name for a token
+ */
+export declare function useThemeVar(token: keyof CanvasThemeTokens): string;
+export {};

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useEffect, useState } from "react";
+import { darkTheme, lightTheme, themeToCssVariables } from "./defaultTheme";
+import { autoDetectTheme } from "./extractHostTheme";
+const ThemeContext = createContext(null);
+/**
+ * Detect system color scheme preference
+ */
+function getSystemMode() {
+    var _a, _b;
+    if (typeof window === "undefined")
+        return "dark";
+    return ((_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-color-scheme: dark)")) === null || _b === void 0 ? void 0 : _b.matches) ? "dark" : "light";
+}
+/**
+ * Theme provider component that injects CSS variables into shadow DOM
+ */
+export function ThemeProvider({ children, appearance, autoDetect = true, shadowRoot, }) {
+    var _a;
+    const [mode, setMode] = useState((_a = appearance === null || appearance === void 0 ? void 0 : appearance.mode) !== null && _a !== void 0 ? _a : "auto");
+    const [systemMode, setSystemMode] = useState(getSystemMode);
+    // Listen for system color scheme changes
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const handleChange = (e) => {
+            setSystemMode(e.matches ? "dark" : "light");
+        };
+        mediaQuery.addEventListener("change", handleChange);
+        return () => mediaQuery.removeEventListener("change", handleChange);
+    }, []);
+    // Resolve effective mode
+    const effectiveMode = mode === "auto" ? systemMode : mode;
+    // Build theme
+    const theme = useMemo(() => {
+        let baseTheme;
+        if (autoDetect) {
+            // Auto-detect theme from host page
+            baseTheme = autoDetectTheme(effectiveMode === "light" ? lightTheme : darkTheme);
+        }
+        else {
+            baseTheme = effectiveMode === "light" ? lightTheme : darkTheme;
+        }
+        return baseTheme;
+    }, [autoDetect, effectiveMode]);
+    // Build CSS variables
+    const cssVariables = useMemo(() => {
+        const vars = themeToCssVariables(theme);
+        // Apply user overrides from appearance.variables
+        if (appearance === null || appearance === void 0 ? void 0 : appearance.variables) {
+            for (const [key, value] of Object.entries(appearance.variables)) {
+                if (value) {
+                    vars[key] = value;
+                }
+            }
+        }
+        return vars;
+    }, [theme, appearance === null || appearance === void 0 ? void 0 : appearance.variables]);
+    // Inject CSS variables into shadow root
+    useEffect(() => {
+        if (!shadowRoot)
+            return;
+        // Find or create the style element
+        let styleEl = shadowRoot.querySelector("#sc-theme-vars");
+        if (!styleEl) {
+            styleEl = document.createElement("style");
+            styleEl.id = "sc-theme-vars";
+            shadowRoot.insertBefore(styleEl, shadowRoot.firstChild);
+        }
+        // Generate CSS
+        const cssRules = Object.entries(cssVariables)
+            .map(([key, value]) => `  ${key}: ${value};`)
+            .join("\n");
+        styleEl.textContent = `:host {\n${cssRules}\n}`;
+    }, [shadowRoot, cssVariables]);
+    const value = {
+        theme,
+        mode: effectiveMode,
+        cssVariables,
+        setMode,
+    };
+    return _jsx(ThemeContext.Provider, { value: value, children: children });
+}
+/**
+ * Hook to access theme context
+ */
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+/**
+ * Hook to get specific theme token with CSS variable fallback
+ */
+export function useThemeToken(token) {
+    const { theme } = useTheme();
+    return theme[token];
+}
+/**
+ * Hook to get CSS variable name for a token
+ */
+export function useThemeVar(token) {
+    const kebabCase = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    return `var(--sc-${kebabCase(token)})`;
+}
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/theme/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"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"}

package/dist/theme/defaultTheme.d.ts

@@ -0,0 +1,18 @@
+import type { CanvasThemeTokens } from "./types";
+/**
+ * Default dark theme inspired by macOS Notification Center
+ * Uses the Apple HIG color palette with slight adjustments for accessibility
+ */
+export declare const darkTheme: CanvasThemeTokens;
+/**
+ * Light theme variant
+ */
+export declare const lightTheme: CanvasThemeTokens;
+/**
+ * Get default theme based on mode
+ */
+export declare function getDefaultTheme(mode?: "light" | "dark"): CanvasThemeTokens;
+/**
+ * Convert theme tokens to CSS custom properties
+ */
+export declare function themeToCssVariables(theme: CanvasThemeTokens): Record<string, string>;

package/dist/theme/defaultTheme.js

@@ -0,0 +1,163 @@
+/**
+ * Default dark theme inspired by macOS Notification Center
+ * Uses the Apple HIG color palette with slight adjustments for accessibility
+ */
+export const darkTheme = {
+    // Brand colors (indigo accent like macOS)
+    colorPrimary: "#6366f1",
+    colorPrimaryHover: "#818cf8",
+    colorPrimaryMuted: "rgba(99, 102, 241, 0.15)",
+    // Surface colors (macOS dark mode vibrancy)
+    colorBackground: "rgba(28, 28, 30, 0.95)",
+    colorBackgroundElevated: "rgba(44, 44, 46, 0.95)",
+    colorBackgroundSubtle: "rgba(0, 0, 0, 0.2)",
+    colorSurface: "rgba(58, 58, 60, 0.8)",
+    colorSurfaceHover: "rgba(72, 72, 74, 0.8)",
+    // Text colors
+    colorText: "#f5f5f7",
+    colorTextSecondary: "#a1a1a6",
+    colorTextMuted: "#8e8e93",
+    colorTextInverse: "#1c1c1e",
+    // Border colors
+    colorBorder: "rgba(255, 255, 255, 0.12)",
+    colorBorderSubtle: "rgba(255, 255, 255, 0.06)",
+    // Semantic colors
+    colorSuccess: "#34c759",
+    colorSuccessMuted: "rgba(52, 199, 89, 0.15)",
+    colorWarning: "#ff9f0a",
+    colorWarningMuted: "rgba(255, 159, 10, 0.15)",
+    colorError: "#ff453a",
+    colorErrorMuted: "rgba(255, 69, 58, 0.15)",
+    colorInfo: "#0a84ff",
+    colorInfoMuted: "rgba(10, 132, 255, 0.15)",
+    // Typography (SF Pro stack)
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+    fontFamilyMono: "'SF Mono', 'Fira Code', Consolas, monospace",
+    fontSizeXs: "0.7rem",
+    fontSizeSm: "0.8rem",
+    fontSizeMd: "0.9rem",
+    fontSizeLg: "1rem",
+    fontSizeXl: "1.25rem",
+    fontSizeXxl: "1.5rem",
+    fontWeightNormal: "400",
+    fontWeightMedium: "500",
+    fontWeightSemibold: "600",
+    fontWeightBold: "700",
+    lineHeightTight: "1.25",
+    lineHeightNormal: "1.5",
+    lineHeightRelaxed: "1.75",
+    // Spacing
+    spacingXs: "0.25rem",
+    spacingSm: "0.5rem",
+    spacingMd: "0.75rem",
+    spacingLg: "1rem",
+    spacingXl: "1.5rem",
+    // Border radius (macOS rounded corners)
+    borderRadiusSm: "6px",
+    borderRadiusMd: "10px",
+    borderRadiusLg: "14px",
+    borderRadiusXl: "20px",
+    borderRadiusFull: "9999px",
+    // Shadows
+    shadowSm: "0 1px 2px rgba(0, 0, 0, 0.2)",
+    shadowMd: "0 2px 12px rgba(0, 0, 0, 0.3)",
+    shadowLg: "0 8px 24px rgba(0, 0, 0, 0.4)",
+    shadowXl: "0 16px 48px rgba(0, 0, 0, 0.5)",
+    // Backdrop effects
+    backdropBlur: "blur(20px)",
+    backdropSaturate: "saturate(180%)",
+    // Animation
+    transitionFast: "0.1s ease",
+    transitionNormal: "0.25s ease",
+    transitionSlow: "0.4s ease",
+};
+/**
+ * Light theme variant
+ */
+export const lightTheme = {
+    // Brand colors
+    colorPrimary: "#5856d6",
+    colorPrimaryHover: "#6366f1",
+    colorPrimaryMuted: "rgba(88, 86, 214, 0.1)",
+    // Surface colors
+    colorBackground: "rgba(255, 255, 255, 0.95)",
+    colorBackgroundElevated: "rgba(242, 242, 247, 0.95)",
+    colorBackgroundSubtle: "rgba(0, 0, 0, 0.02)",
+    colorSurface: "rgba(229, 229, 234, 0.6)",
+    colorSurfaceHover: "rgba(209, 209, 214, 0.6)",
+    // Text colors
+    colorText: "#1c1c1e",
+    colorTextSecondary: "#636366",
+    colorTextMuted: "#8e8e93",
+    colorTextInverse: "#f5f5f7",
+    // Border colors
+    colorBorder: "rgba(0, 0, 0, 0.12)",
+    colorBorderSubtle: "rgba(0, 0, 0, 0.06)",
+    // Semantic colors (slightly adjusted for light mode)
+    colorSuccess: "#34c759",
+    colorSuccessMuted: "rgba(52, 199, 89, 0.12)",
+    colorWarning: "#ff9500",
+    colorWarningMuted: "rgba(255, 149, 0, 0.12)",
+    colorError: "#ff3b30",
+    colorErrorMuted: "rgba(255, 59, 48, 0.12)",
+    colorInfo: "#007aff",
+    colorInfoMuted: "rgba(0, 122, 255, 0.12)",
+    // Typography (same as dark)
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+    fontFamilyMono: "'SF Mono', 'Fira Code', Consolas, monospace",
+    fontSizeXs: "0.7rem",
+    fontSizeSm: "0.8rem",
+    fontSizeMd: "0.9rem",
+    fontSizeLg: "1rem",
+    fontSizeXl: "1.25rem",
+    fontSizeXxl: "1.5rem",
+    fontWeightNormal: "400",
+    fontWeightMedium: "500",
+    fontWeightSemibold: "600",
+    fontWeightBold: "700",
+    lineHeightTight: "1.25",
+    lineHeightNormal: "1.5",
+    lineHeightRelaxed: "1.75",
+    // Spacing (same as dark)
+    spacingXs: "0.25rem",
+    spacingSm: "0.5rem",
+    spacingMd: "0.75rem",
+    spacingLg: "1rem",
+    spacingXl: "1.5rem",
+    // Border radius (same as dark)
+    borderRadiusSm: "6px",
+    borderRadiusMd: "10px",
+    borderRadiusLg: "14px",
+    borderRadiusXl: "20px",
+    borderRadiusFull: "9999px",
+    // Shadows (lighter for light mode)
+    shadowSm: "0 1px 2px rgba(0, 0, 0, 0.08)",
+    shadowMd: "0 2px 12px rgba(0, 0, 0, 0.12)",
+    shadowLg: "0 8px 24px rgba(0, 0, 0, 0.16)",
+    shadowXl: "0 16px 48px rgba(0, 0, 0, 0.2)",
+    // Backdrop effects
+    backdropBlur: "blur(20px)",
+    backdropSaturate: "saturate(180%)",
+    // Animation
+    transitionFast: "0.1s ease",
+    transitionNormal: "0.25s ease",
+    transitionSlow: "0.4s ease",
+};
+/**
+ * Get default theme based on mode
+ */
+export function getDefaultTheme(mode = "dark") {
+    return mode === "light" ? lightTheme : darkTheme;
+}
+/**
+ * Convert theme tokens to CSS custom properties
+ */
+export function themeToCssVariables(theme) {
+    const kebabCase = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    const variables = {};
+    for (const [key, value] of Object.entries(theme)) {
+        variables[`--sc-${kebabCase(key)}`] = value;
+    }
+    return variables;
+}
+//# sourceMappingURL=defaultTheme.js.map

package/dist/theme/defaultTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultTheme.js","sourceRoot":"","sources":["../../src/theme/defaultTheme.ts"],"names":[],"mappings":"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"}

package/dist/theme/extractHostTheme.d.ts

@@ -0,0 +1,14 @@
+import type { ExtractedTheme, CanvasThemeTokens } from "./types";
+/**
+ * Extract theme information from the host page
+ */
+export declare function extractHostTheme(): ExtractedTheme;
+/**
+ * Merge extracted theme with default theme tokens
+ */
+export declare function mergeWithExtractedTheme(extracted: ExtractedTheme, baseTheme?: CanvasThemeTokens): CanvasThemeTokens;
+/**
+ * Auto-detect and extract theme from host page
+ * Returns merged theme tokens ready to use
+ */
+export declare function autoDetectTheme(baseTheme?: CanvasThemeTokens): CanvasThemeTokens;