@syntrologie/runtime-sdk 0.2.0

package/dist/api.js

@@ -0,0 +1,159 @@
+import { registerSmartCanvasElement } from "./SmartCanvasElement";
+import { createCanvasConfigFetcher } from "./configFetcher";
+import { initAntiFlicker } from "./antiFlicker";
+import { applyPatchesEarly, extractPatchesFromConfig, revertAllPatches } from "./earlyPatcher";
+import { loadEditorSdk, shouldLoadEditor } from "./editorLoader";
+export const createSmartCanvas = async (config = {}) => {
+    var _a, _b, _c, _d;
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        throw new Error("SmartCanvas can only be created in a browser-like environment");
+    }
+    // Initialize anti-flicker if enabled
+    let removeAntiFlicker = null;
+    if (config.antiFlicker) {
+        const antiFlickerConfig = typeof config.antiFlicker === 'object' ? config.antiFlicker : {};
+        removeAntiFlicker = initAntiFlicker(antiFlickerConfig);
+    }
+    // Store current config and fetcher to expose to editor
+    let currentConfig = null;
+    let currentFetcher = null;
+    // Apply patches early if enabled and we have a fetcher
+    if (config.earlyPatching !== false && config.fetcher) {
+        try {
+            currentFetcher = config.fetcher;
+            const canvasConfig = await config.fetcher();
+            currentConfig = canvasConfig; // Save for editor
+            const patches = extractPatchesFromConfig(canvasConfig);
+            if (patches.length > 0) {
+                applyPatchesEarly({
+                    patches,
+                    onComplete: () => {
+                        // Remove anti-flicker after patches are applied
+                        if (removeAntiFlicker) {
+                            removeAntiFlicker();
+                            removeAntiFlicker = null;
+                        }
+                    }
+                });
+            }
+        }
+        catch (error) {
+            console.error('[SmartCanvas] Error applying early patches:', error);
+        }
+    }
+    // Remove anti-flicker if not already removed
+    if (removeAntiFlicker) {
+        removeAntiFlicker();
+    }
+    // Check if we should load the editor
+    if (shouldLoadEditor()) {
+        // We don't await this so the runtime SDK can continue initializing
+        loadEditorSdk(config.editorUrl).catch(console.error);
+    }
+    registerSmartCanvasElement();
+    const host = document.createElement("smart-canvas");
+    if (config.tokens) {
+        for (const [key, value] of Object.entries(config.tokens)) {
+            host.style.setProperty(key, value);
+        }
+    }
+    const target = (_a = config.target) !== null && _a !== void 0 ? _a : document.body;
+    target.appendChild(host);
+    const experiments = (_b = config.integrations) === null || _b === void 0 ? void 0 : _b.experiments;
+    const telemetry = (_c = config.integrations) === null || _c === void 0 ? void 0 : _c.telemetry;
+    const fetcher = (_d = config.fetcher) !== null && _d !== void 0 ? _d : createCanvasConfigFetcher({
+        configUri: config.configUri,
+        experiments,
+        featureKey: config.configUriFeatureKey,
+        credentials: config.fetchCredentials,
+    });
+    // Store the initial fetcher if not already set
+    if (!currentFetcher) {
+        currentFetcher = fetcher;
+    }
+    const appProps = {
+        fetcher,
+        pollIntervalMs: config.pollIntervalMs,
+        experiments,
+        telemetry,
+        overlayFetcher: config.overlayFetcher,
+        overlayConfigUri: config.overlayConfigUri,
+        overlayConfigFeatureKey: config.overlayConfigFeatureKey,
+        overlayFetchCredentials: config.overlayFetchCredentials,
+        configUri: config.configUri,
+        configUriFeatureKey: config.configUriFeatureKey,
+        fetchCredentials: config.fetchCredentials,
+        theme: config.theme,
+    };
+    host.mountReactApp(appProps);
+    if (config.defaultOpen) {
+        host.open();
+    }
+    const handle = {
+        el: host,
+        open: () => host.open(),
+        close: () => host.close(),
+        destroy: () => host.remove(),
+        setTokens: (tokens) => {
+            for (const [key, value] of Object.entries(tokens)) {
+                host.style.setProperty(key, value);
+            }
+        },
+        getConfig: async () => {
+            // Use current fetcher to get fresh config
+            if (currentFetcher) {
+                try {
+                    const freshConfig = await currentFetcher();
+                    currentConfig = freshConfig;
+                    return freshConfig;
+                }
+                catch (error) {
+                    console.error('[SmartCanvas] Error fetching config:', error);
+                }
+            }
+            return currentConfig;
+        },
+        updateConfig: (newConfig) => {
+            currentConfig = newConfig;
+            // Re-apply patches
+            const patches = extractPatchesFromConfig(newConfig);
+            if (patches.length > 0) {
+                applyPatchesEarly({ patches });
+            }
+        },
+        setEnabled: (enabled) => {
+            if (enabled) {
+                if (currentConfig) {
+                    const patches = extractPatchesFromConfig(currentConfig);
+                    if (patches.length > 0) {
+                        applyPatchesEarly({ patches });
+                    }
+                }
+            }
+            else {
+                revertAllPatches();
+            }
+        },
+        registerComponent: (key, Component) => host.registerComponent(key, Component),
+        setOverrideFetcher: (newFetcher) => {
+            currentFetcher = newFetcher;
+            host.setOverrideFetcher(newFetcher);
+        }
+    };
+    // Only expose debug handle in development mode
+    // This prevents malicious scripts from manipulating SDK state in production
+    if (typeof window !== "undefined" && process.env.NODE_ENV === 'development') {
+        window.__smartCanvasHandle = handle;
+    }
+    return handle;
+};
+// Export anti-flicker snippet for inline usage
+export { getAntiFlickerSnippet } from "./antiFlicker";
+if (typeof window !== "undefined") {
+    window.SmartCanvas = {
+        async create(config) {
+            return createSmartCanvas(config);
+        },
+    };
+}
+//# sourceMappingURL=api.js.map

package/dist/api.js.map

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

package/dist/bootstrap.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Bootstrap module for single-token SDK initialization.
+ *
+ * Usage:
+ * ```typescript
+ * import { Syntro } from '@syntrologie/runtime-sdk';
+ *
+ * const { canvas, experiments, telemetry } = await Syntro.init({
+ *   token: "syn_eyJ2IjoxLCJleHAiOnsiayI6InNkay14eHgiLCJwIjoiZ3Jvd3RoYm9vayJ9fQ"
+ * });
+ * ```
+ */
+import { decodeToken, encodeToken } from "./token";
+import { SmartCanvasConfig, SmartCanvasHandle } from "./api";
+import type { ExperimentClient } from "./experiments/types";
+import type { TelemetryClient } from "./telemetry/types";
+export interface SyntroInitOptions {
+    /**
+     * The Syntro token containing all credentials.
+     * Generated from your admin dashboard.
+     */
+    token: string;
+    /**
+     * Optional canvas configuration overrides.
+     */
+    canvas?: Partial<Omit<SmartCanvasConfig, "integrations" | "fetcher">>;
+}
+export interface SyntroInitResult {
+    /**
+     * The SmartCanvas handle for controlling the canvas.
+     */
+    canvas: SmartCanvasHandle;
+    /**
+     * The experiment client, if experiments are configured in the token.
+     */
+    experiments?: ExperimentClient;
+    /**
+     * The telemetry client, if telemetry is configured in the token.
+     */
+    telemetry?: TelemetryClient;
+}
+/**
+ * Initialize the Syntro SDK with a single token.
+ *
+ * @param options - Initialization options
+ * @returns The initialized SDK components
+ */
+declare function init(options: SyntroInitOptions): Promise<SyntroInitResult>;
+/**
+ * The Syntro namespace for single-token initialization.
+ */
+export declare const Syntro: {
+    init: typeof init;
+    encodeToken: typeof encodeToken;
+    decodeToken: typeof decodeToken;
+};
+declare global {
+    interface Window {
+        Syntro?: typeof Syntro;
+    }
+}
+export {};

package/dist/bootstrap.js

@@ -0,0 +1,83 @@
+/**
+ * Bootstrap module for single-token SDK initialization.
+ *
+ * Usage:
+ * ```typescript
+ * import { Syntro } from '@syntrologie/runtime-sdk';
+ *
+ * const { canvas, experiments, telemetry } = await Syntro.init({
+ *   token: "syn_eyJ2IjoxLCJleHAiOnsiayI6InNkay14eHgiLCJwIjoiZ3Jvd3RoYm9vayJ9fQ"
+ * });
+ * ```
+ */
+import { decodeToken, encodeToken } from "./token";
+import { createExperimentClient } from "./experiments/registry";
+import { createTelemetryClient } from "./telemetry/registry";
+import { createConfigFetcher } from "./fetchers/registry";
+import { createCanvasConfigFetcher } from "./configFetcher";
+import { createSmartCanvas } from "./api";
+/**
+ * Initialize the Syntro SDK with a single token.
+ *
+ * @param options - Initialization options
+ * @returns The initialized SDK components
+ */
+async function init(options) {
+    var _a;
+    const payload = decodeToken(options.token);
+    // Initialize experiment client if configured (defaults to growthbook)
+    let experiments;
+    if (payload.e) {
+        experiments = createExperimentClient("growthbook", {
+            clientKey: payload.e,
+        });
+    }
+    // Initialize telemetry client if configured (defaults to posthog)
+    let telemetry;
+    if (payload.t) {
+        telemetry = createTelemetryClient("posthog", {
+            apiKey: payload.t,
+        });
+    }
+    // Create config fetcher
+    // Default: use experiments-based fetcher (checks for config object, then URI)
+    // This uses the existing createCanvasConfigFetcher which:
+    //   1. Checks "smart-canvas-config" feature for direct config object
+    //   2. Falls back to "smart-canvas-config-uri" feature for config URI
+    let fetcher;
+    if (payload.f) {
+        // Explicit fetcher type specified
+        const configFetcher = createConfigFetcher(payload.f, (_a = payload.o) !== null && _a !== void 0 ? _a : {});
+        fetcher = async () => {
+            var _a;
+            const result = await configFetcher.fetch();
+            return {
+                ...result.config,
+                tiles: (_a = result.config.tiles) !== null && _a !== void 0 ? _a : [],
+            };
+        };
+    }
+    else if (experiments) {
+        // Default: use experiments-based fetcher (GrowthBook config or URI)
+        fetcher = createCanvasConfigFetcher({ experiments });
+    }
+    // Create canvas with integrations
+    const canvas = await createSmartCanvas({
+        ...options.canvas,
+        fetcher,
+        integrations: { experiments, telemetry },
+    });
+    return { canvas, experiments, telemetry };
+}
+/**
+ * The Syntro namespace for single-token initialization.
+ */
+export const Syntro = {
+    init,
+    encodeToken,
+    decodeToken,
+};
+if (typeof window !== "undefined") {
+    window.Syntro = Syntro;
+}
+//# sourceMappingURL=bootstrap.js.map

package/dist/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../src/bootstrap.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,WAAW,EAAE,WAAW,EAAsB,MAAM,SAAS,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAwC,MAAM,OAAO,CAAC;AAmChF;;;;;GAKG;AACH,KAAK,UAAU,IAAI,CAAC,OAA0B;;IAC5C,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAE3C,sEAAsE;IACtE,IAAI,WAAyC,CAAC;IAC9C,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC;QACd,WAAW,GAAG,sBAAsB,CAAC,YAAY,EAAE;YACjD,SAAS,EAAE,OAAO,CAAC,CAAC;SACrB,CAAC,CAAC;IACL,CAAC;IAED,kEAAkE;IAClE,IAAI,SAAsC,CAAC;IAC3C,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC;QACd,SAAS,GAAG,qBAAqB,CAAC,SAAS,EAAE;YAC3C,MAAM,EAAE,OAAO,CAAC,CAAC;SAClB,CAAC,CAAC;IACL,CAAC;IAED,wBAAwB;IACxB,8EAA8E;IAC9E,0DAA0D;IAC1D,qEAAqE;IACrE,sEAAsE;IACtE,IAAI,OAAwC,CAAC;IAC7C,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC;QACd,kCAAkC;QAClC,MAAM,aAAa,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAC,EAAE,MAAA,OAAO,CAAC,CAAC,mCAAI,EAAE,CAAC,CAAC;QACtE,OAAO,GAAG,KAAK,IAAI,EAAE;;YACnB,MAAM,MAAM,GAAG,MAAM,aAAa,CAAC,KAAK,EAAE,CAAC;YAC3C,OAAO;gBACL,GAAG,MAAM,CAAC,MAAM;gBAChB,KAAK,EAAE,MAAA,MAAM,CAAC,MAAM,CAAC,KAAK,mCAAI,EAAE;aACjC,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;SAAM,IAAI,WAAW,EAAE,CAAC;QACvB,oEAAoE;QACpE,OAAO,GAAG,yBAAyB,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC;IACvD,CAAC;IAED,kCAAkC;IAClC,MAAM,MAAM,GAAG,MAAM,iBAAiB,CAAC;QACrC,GAAG,OAAO,CAAC,MAAM;QACjB,OAAO;QACP,YAAY,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;KACzC,CAAC,CAAC;IAEH,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;AAC5C,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI;IACJ,WAAW;IACX,WAAW;CACZ,CAAC;AASF,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;AACzB,CAAC"}

package/dist/bundle-entry.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Bundle entry point - exports public SDK API
+ */
+export { createSmartCanvas } from './api';

package/dist/bundle-entry.js

@@ -0,0 +1,9 @@
+/**
+ * Bundle entry point - exports public SDK API
+ */
+// Export the main SDK creation function
+export { createSmartCanvas } from './api';
+// Ready to export additional functionality in the future:
+// export { applyPatchesEarly, extractPatchesFromConfig } from './earlyPatcher';
+// export type { Patch } from './hostPatcher/core/types';
+//# sourceMappingURL=bundle-entry.js.map

package/dist/bundle-entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-entry.js","sourceRoot":"","sources":["../src/bundle-entry.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,wCAAwC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,0DAA0D;AAC1D,gFAAgF;AAChF,yDAAyD"}

package/dist/components/RectangleCard.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from "react";
+import type { RectangleConfig } from "../types";
+import type { TelemetryClient } from "../telemetry/types";
+import { MountableComponent } from "../api";
+interface RectangleCardProps {
+    config: RectangleConfig;
+    surface: "overlay" | "wheel";
+    telemetry?: TelemetryClient;
+    style?: CSSProperties;
+    customRenderers?: Record<string, MountableComponent>;
+    isExpanded?: boolean;
+    onToggleExpand?: () => void;
+}
+export declare function RectangleCard({ config, surface, telemetry, style, customRenderers, isExpanded, onToggleExpand, }: RectangleCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RectangleCard.js

@@ -0,0 +1,226 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+function ChatbotBlock({ config, telemetry, surface, }) {
+    const [messages, setMessages] = useState([
+        { author: "Lumi", text: "Hi! Need clarity on a deduction?" },
+    ]);
+    const [input, setInput] = useState("");
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (!input.trim())
+            return;
+        setMessages((prev) => [...prev, { author: "You", text: input.trim() }]);
+        setTimeout(() => {
+            setMessages((prev) => [
+                ...prev,
+                {
+                    author: "Lumi",
+                    text: "I will route that to the experimentation server stub for now.",
+                },
+            ]);
+        }, 600);
+        telemetry === null || telemetry === void 0 ? void 0 : telemetry.trackAction("chatbot_message", config.id, surface);
+        setInput("");
+    };
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem", height: "100%" }, children: [_jsx("div", { style: {
+                    flex: 1,
+                    overflowY: "auto",
+                    padding: "0.75rem",
+                    background: "rgba(0, 0, 0, 0.2)",
+                    borderRadius: "8px",
+                    fontSize: "0.85rem",
+                }, children: messages.map((message, idx) => (_jsxs("p", { style: { margin: "0 0 0.5rem" }, children: [_jsxs("span", { style: { fontWeight: 600, color: "#94a3b8" }, children: [message.author, ":"] }), " ", _jsx("span", { style: { color: "#e2e8f0" }, children: message.text })] }, `${message.author}-${idx}`))) }), _jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", gap: "0.5rem" }, children: [_jsx("input", { style: {
+                            flex: 1,
+                            padding: "0.5rem 0.75rem",
+                            borderRadius: "6px",
+                            border: "1px solid rgba(255, 255, 255, 0.1)",
+                            background: "rgba(0, 0, 0, 0.3)",
+                            color: "#f1f5f9",
+                            fontSize: "0.85rem",
+                            outline: "none",
+                        }, value: input, onChange: (event) => setInput(event.target.value), placeholder: "Ask anything..." }), _jsx("button", { style: {
+                            padding: "0.5rem 0.75rem",
+                            borderRadius: "6px",
+                            border: "none",
+                            background: "#6366f1",
+                            color: "white",
+                            fontWeight: 600,
+                            fontSize: "0.8rem",
+                            cursor: "pointer",
+                        }, type: "submit", children: "Send" })] })] }));
+}
+function CustomRendererWrapper({ renderer, config, surface, telemetry, isExpanded, }) {
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        // Pass isExpanded to tile components so they can adjust their rendering
+        const cleanup = renderer.mount(containerRef.current, { config, surface, telemetry, isExpanded });
+        return () => {
+            if (cleanup)
+                cleanup();
+        };
+    }, [renderer, config, surface, telemetry, isExpanded]);
+    return _jsx("div", { ref: containerRef, style: { width: "100%", height: "100%" } });
+}
+export function RectangleCard({ config, surface, telemetry, style, customRenderers, isExpanded = false, onToggleExpand, }) {
+    var _a, _b, _c;
+    const { title, subtitle, content, style: configStyle } = config;
+    const accentColor = (_a = configStyle === null || configStyle === void 0 ? void 0 : configStyle.accentColor) !== null && _a !== void 0 ? _a : "#6366f1";
+    // Collapsed height - consistent like macOS notification center
+    const collapsedHeight = "72px";
+    const cardStyle = {
+        display: "flex",
+        flexDirection: "column",
+        borderRadius: "14px",
+        background: (_b = configStyle === null || configStyle === void 0 ? void 0 : configStyle.background) !== null && _b !== void 0 ? _b : "rgba(28, 28, 30, 0.95)",
+        border: "1px solid rgba(255, 255, 255, 0.08)",
+        boxShadow: "0 2px 12px rgba(0, 0, 0, 0.3)",
+        color: (_c = configStyle === null || configStyle === void 0 ? void 0 : configStyle.textColor) !== null && _c !== void 0 ? _c : "#f5f5f7",
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif",
+        overflow: "hidden",
+        cursor: onToggleExpand ? "pointer" : "default",
+        transition: "all 0.25s ease",
+        ...style,
+    };
+    const headerStyle = {
+        display: "flex",
+        alignItems: "center",
+        gap: "0.75rem",
+        padding: "0.875rem 1rem",
+        minHeight: collapsedHeight,
+    };
+    const iconStyle = {
+        width: "40px",
+        height: "40px",
+        borderRadius: "10px",
+        background: `linear-gradient(135deg, ${accentColor} 0%, ${accentColor}cc 100%)`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "1.25rem",
+        flexShrink: 0,
+        boxShadow: `0 2px 8px ${accentColor}40`,
+    };
+    const getIcon = () => {
+        switch (content.type) {
+            case "chatbot": return "💬";
+            case "metric": return "📊";
+            case "embed": return "🔗";
+            case "custom": return "⚙️";
+            default: return "📄";
+        }
+    };
+    const getPreview = () => {
+        var _a;
+        switch (content.type) {
+            case "metric":
+                return `${content.metricValue}${content.metricUnit ? ` ${content.metricUnit}` : ""}`;
+            case "text":
+                return content.headline || ((_a = content.body) === null || _a === void 0 ? void 0 : _a.slice(0, 50)) || "";
+            case "chatbot":
+                return "Tap to chat";
+            case "embed":
+                return "Tap to view";
+            case "custom":
+                return "Tap to expand";
+            default:
+                return "";
+        }
+    };
+    const renderExpandedContent = () => {
+        var _a;
+        switch (content.type) {
+            case "chatbot":
+                return (_jsx("div", { style: { height: "200px" }, children: _jsx(ChatbotBlock, { config: config, surface: surface, telemetry: telemetry }) }));
+            case "metric":
+                return (_jsxs("div", { style: { textAlign: "center", padding: "0.5rem 0" }, children: [_jsxs("p", { style: {
+                                fontSize: "3rem",
+                                fontWeight: 700,
+                                color: accentColor,
+                                margin: 0,
+                                letterSpacing: "-0.02em",
+                            }, children: [content.metricValue, content.metricUnit && (_jsx("span", { style: { fontSize: "1.25rem", fontWeight: 400, color: "#8e8e93", marginLeft: "0.5rem" }, children: content.metricUnit }))] }), content.headline && (_jsx("p", { style: { fontSize: "0.85rem", color: "#8e8e93", margin: "0.5rem 0 0" }, children: content.headline }))] }));
+            case "embed":
+                return content.embedUrl ? (_jsx("iframe", { src: content.embedUrl, sandbox: "allow-scripts allow-same-origin", referrerPolicy: "no-referrer", style: {
+                        width: "100%",
+                        height: "200px",
+                        borderRadius: "8px",
+                        border: "1px solid rgba(255, 255, 255, 0.1)",
+                        background: "rgba(0, 0, 0, 0.2)",
+                    }, title: (_a = content.headline) !== null && _a !== void 0 ? _a : config.title })) : null;
+            case "custom": {
+                // Support both legacy `customRendererKey` and new `component` field
+                const key = content.component || content.customRendererKey;
+                if (!key || !customRenderers || !customRenderers[key]) {
+                    return _jsxs("div", { style: { color: "#ff6b6b", fontSize: "0.85rem", padding: "0.5rem 0" }, children: ["Unknown component: ", key] });
+                }
+                return (_jsx(CustomRendererWrapper, { renderer: customRenderers[key], config: config, surface: surface, telemetry: telemetry, isExpanded: isExpanded }));
+            }
+            case "text":
+            default:
+                return (_jsxs("div", { style: { padding: "0.25rem 0" }, children: [content.headline && (_jsx("p", { style: { fontSize: "1rem", fontWeight: 600, color: "#f5f5f7", margin: "0 0 0.5rem" }, children: content.headline })), content.body && (_jsx("p", { style: { fontSize: "0.9rem", color: "#8e8e93", margin: 0, lineHeight: 1.5 }, children: content.body }))] }));
+        }
+    };
+    return (_jsxs("article", { "data-shadow-canvas-id": `rectangle-${config.id}`, style: cardStyle, onClick: (e) => {
+            // Don't collapse if clicking inside expanded content
+            if (isExpanded && e.target.closest('[data-expanded-content]'))
+                return;
+            onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
+        }, children: [_jsxs("div", { style: headerStyle, children: [_jsx("div", { style: iconStyle, children: getIcon() }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [subtitle && (_jsx("p", { style: {
+                                    fontSize: "0.7rem",
+                                    textTransform: "uppercase",
+                                    letterSpacing: "0.05em",
+                                    color: "#8e8e93",
+                                    margin: 0,
+                                }, children: subtitle })), _jsx("h3", { style: {
+                                    fontSize: "0.95rem",
+                                    fontWeight: 600,
+                                    color: "#f5f5f7",
+                                    margin: "0.125rem 0 0",
+                                    whiteSpace: "nowrap",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                }, children: title }), !isExpanded && (_jsx("p", { style: {
+                                    fontSize: "0.8rem",
+                                    color: "#8e8e93",
+                                    margin: "0.125rem 0 0",
+                                    whiteSpace: "nowrap",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                }, children: getPreview() }))] }), _jsx("div", { style: {
+                            color: "#8e8e93",
+                            fontSize: "0.85rem",
+                            transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+                            transition: "transform 0.2s ease",
+                        }, children: "\u25BC" })] }), isExpanded && (_jsxs("div", { "data-expanded-content": true, style: {
+                    padding: "0 1rem 1rem",
+                    borderTop: "1px solid rgba(255, 255, 255, 0.06)",
+                }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { paddingTop: "0.875rem" }, children: renderExpandedContent() }), content.actions && content.actions.length > 0 && (_jsx("div", { style: {
+                            marginTop: "1rem",
+                            paddingTop: "0.75rem",
+                            borderTop: "1px solid rgba(255, 255, 255, 0.06)",
+                            display: "flex",
+                            gap: "0.5rem",
+                        }, children: content.actions.map((action, idx) => (_jsx("button", { onClick: (e) => {
+                                e.stopPropagation();
+                                if (action.href && typeof window !== "undefined") {
+                                    window.open(action.href, "_blank", "noreferrer");
+                                }
+                                if (action.onClickId) {
+                                    telemetry === null || telemetry === void 0 ? void 0 : telemetry.trackAction(action.onClickId, config.id, surface);
+                                }
+                            }, style: {
+                                flex: 1,
+                                padding: "0.625rem 1rem",
+                                borderRadius: "8px",
+                                fontSize: "0.85rem",
+                                fontWeight: 600,
+                                cursor: "pointer",
+                                border: "none",
+                                background: idx === 0 ? accentColor : "rgba(255, 255, 255, 0.1)",
+                                color: "#fff",
+                                transition: "opacity 0.15s ease",
+                            }, onMouseEnter: (e) => { e.currentTarget.style.opacity = "0.85"; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = "1"; }, children: action.label }, action.label))) }))] }))] }));
+}
+//# sourceMappingURL=RectangleCard.js.map

package/dist/components/RectangleCard.js.map

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

package/dist/components/RectangleWheel.d.ts

@@ -0,0 +1,8 @@
+import type { RectangleConfig } from "../types";
+import type { TelemetryClient } from "../telemetry/types";
+export interface RectangleWheelProps {
+    rectangles: RectangleConfig[];
+    intervalMs?: number;
+    telemetry?: TelemetryClient;
+}
+export declare function RectangleWheel({ rectangles, intervalMs, telemetry, }: RectangleWheelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/RectangleWheel.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { RectangleCard } from "./RectangleCard";
+export function RectangleWheel({ rectangles, intervalMs = 7000, telemetry, }) {
+    const [index, setIndex] = useState(0);
+    const ordered = useMemo(() => [...rectangles]
+        .filter((rect) => rect.size !== "quarter")
+        .sort((a, b) => { var _a, _b; return ((_a = a.order) !== null && _a !== void 0 ? _a : 0) - ((_b = b.order) !== null && _b !== void 0 ? _b : 0); }), [rectangles]);
+    useEffect(() => {
+        telemetry === null || telemetry === void 0 ? void 0 : telemetry.trackCanvasOpened("wheel");
+    }, [telemetry]);
+    useEffect(() => {
+        if (ordered.length <= 1)
+            return;
+        const id = setInterval(() => {
+            setIndex((prev) => (prev + 1) % ordered.length);
+        }, intervalMs);
+        return () => clearInterval(id);
+    }, [ordered, intervalMs]);
+    useEffect(() => {
+        const current = ordered[index];
+        if (current) {
+            telemetry === null || telemetry === void 0 ? void 0 : telemetry.trackRectangleViewed(current.id, "wheel");
+        }
+    }, [index, ordered, telemetry]);
+    if (!ordered.length)
+        return null;
+    return (_jsxs("div", { className: "relative overflow-hidden rounded-3xl border border-slate-200 bg-gradient-to-br from-white to-slate-50 p-6 shadow-2xl", "data-shadow-canvas-id": "wheel", children: [_jsx("div", { className: "flex transition-transform duration-700 ease-out", style: { transform: `translateX(-${index * 100}%)`, width: `${ordered.length * 100}%` }, children: ordered.map((rectangle) => (_jsx("div", { className: "w-full shrink-0 px-4", children: _jsx(RectangleCard, { config: { ...rectangle, size: "half" }, surface: "wheel", telemetry: telemetry }) }, rectangle.id))) }), _jsx("div", { className: "mt-4 flex justify-center gap-2", children: ordered.map((rectangle, idx) => (_jsx("button", { className: `h-2 w-6 rounded-full ${idx === index ? "bg-slate-800" : "bg-slate-300"}`, onClick: () => setIndex(idx) }, rectangle.id))) })] }));
+}
+//# sourceMappingURL=RectangleWheel.js.map