@syntrologie/runtime-sdk 0.2.0

package/README.md

@@ -0,0 +1,185 @@
+# Syntrologie Smart Canvas SDK
+
+## Smart Canvas SDK (React + Shadow DOM)
+
+The SDK now ships a framework-agnostic `<smart-canvas>` custom element with an **open shadow root**. We still render everything with React, but the canvas is encapsulated so host Tailwind configs, resets, or stacking contexts can’t break the UI.
+
+### What’s Included
+
+- `SmartCanvasElement` – the custom element that owns the shadow DOM, overlay root, and controller.
+- `SmartCanvasApp` – the React tree (overlay, rectangles, toggle) you portal into the shadow.
+- `SmartCanvasPortal` – helper for React hosts to portal their tree (and context) into the element mount.
+- `createSmartCanvas` – imperative API (`window.SmartCanvas.create`) for non-React hosts.
+- GrowthBook/PostHog wrappers, hooks, rectangle components, and wheel remain available.
+
+### Installation
+
+#### NPM/Yarn
+
+```bash
+npm install @syntrologie/smart-canvas-sdk
+# or
+yarn add @syntrologie/smart-canvas-sdk
+```
+
+#### CDN
+
+For quick setup without a build process:
+
+```html
+<!-- Minified production build -->
+<script src="https://unpkg.com/@syntrologie/smart-canvas-sdk@latest/dist/smart-canvas.min.js"></script>
+
+<!-- Non-minified development build -->
+<script src="https://unpkg.com/@syntrologie/smart-canvas-sdk@latest/dist/smart-canvas.js"></script>
+
+<!-- ES Modules -->
+<script type="module">
+  import { createSmartCanvas } from 'https://unpkg.com/@syntrologie/smart-canvas-sdk@latest/dist/smart-canvas.esm.js';
+</script>
+```
+
+#### Local Development
+
+```bash
+cd tech-core/sdks/shadow-canvas
+npm run build
+cd ../../tax_landing_page
+npm install @syntrologie/smart-canvas-sdk@file:../tech-core/sdks/shadow-canvas
+```
+
+Rebuild and reinstall whenever the SDK changes.
+
+### Using the Custom Element (React Host)
+
+```tsx
+import {
+  createSyntroExperiment,
+  createSyntroTelemetry,
+  SmartCanvasApp,
+  SmartCanvasPortal,
+  registerSmartCanvasElement,
+  type SmartCanvasElement,
+} from "@syntrologie/smart-canvas-sdk";
+
+const canvasFetcher = async () => {/* return ShadowCanvasConfigResponse */};
+
+function SmartCanvasBridge() {
+  const [element, setElement] = useState<SmartCanvasElement | null>(null);
+
+  useEffect(() => {
+    registerSmartCanvasElement();
+  }, []);
+
+  const controller = element?.getController();
+
+  return (
+    <>
+      <smart-canvas ref={setElement as any} />
+      {element && controller ? (
+        <SmartCanvasPortal element={element}>
+          <SmartCanvasApp
+            controller={controller}
+            fetcher={canvasFetcher}
+            overlayConfigUri={import.meta.env.VITE_SHADOW_CANVAS_OVERLAY_URI}
+          />
+        </SmartCanvasPortal>
+      ) : null}
+    </>
+  );
+}
+```
+
+### Using the Imperative API (Plain JS Host)
+
+When using via CDN, the SDK is available as `window.SyntrologieSDK`:
+
+```ts
+// Via npm/ES modules
+await window.SmartCanvas?.create({
+  defaultOpen: true,
+  tokens: {
+    "--sc-surface": "#050814",
+    "--sc-fg": "#f8fafc",
+  },
+  integrations: {
+    posthog,       // existing PostHog client
+    growthbook,    // existing GrowthBook client
+  },
+});
+```
+
+### Styling & Overlays
+
+- Fonts, colors, and CSS variables (`--sc-surface`, `--sc-fg`, etc.) are inherited from the host. Tokens can be overridden via `setTokens` or standard CSS:
+  - `--syntro-tooltip-bg`, `--syntro-tooltip-fg`, `--syntro-tooltip-radius`, `--syntro-tooltip-shadow`
+  - `--syntro-ring`, `--syntro-spotlight-backdrop` for highlights
+- A scoped reset is injected via `adoptedStyleSheets` (fallbacks to `<style>`).
+- Tooltips/popovers should use the Popover API or Floating UI with the exposed overlay root (`element.getOverlayRoot()`).
+
+### Analytics Events
+
+The `createSyntroTelemetry` client emits:
+
+| Event | Description |
+| --- | --- |
+| `shadow_canvas_opened` / `shadow_canvas_closed` | Toggle button interactions. |
+| `shadow_canvas_rectangle_viewed` | A rectangle becomes visible (overlay grid & wheel). |
+| `shadow_canvas_action` | CTA click, chatbot send, overlay events (tooltips, dismiss, anchor missing). |
+
+### Rectangle Config (unchanged)
+
+The experimentation service still returns the same payload (`rectangles`, `style`, `content`, optional `experiment` metadata). Top-level fields now include optional `canvasTitle` so host teams can rename the overlay without code changes. See `src/types.ts` for the exact contract.
+
+### Schema & Validation Tool
+
+- JSON schema lives at `schema/canvas-config.schema.json` (published with the package).
+- Validate a config file locally:
+
+```bash
+cd tech-core/sdks/shadow-canvas
+npm run validate-config -- ../../tax_landing_page/public/smart-canvas-demo.json
+```
+
+The script evaluates structure/required fields without third-party dependencies so CI and content authors can catch issues early.
+
+### Overlays (Tooltips & Highlights)
+
+- Recipes use the schema in `src/overlays/schema.ts` (roughly `{ id, version, steps[] }`).
+- Provide a recipe URI via `overlayConfigUri` or let GrowthBook supply `smart-canvas-overlay-uri`.
+- Overlays render in `#syntro-overlays` (fixed, pointer-events: none) and use Floating UI for tethering.
+- The Canvas runtime dynamically imports the overlay chunk only when a recipe resolves.
+- Exposed helpers:
+  - `createOverlayRecipeFetcher`, `resolveConfigUri`
+  - `runOverlays`, `showTooltip`, `showHighlight`
+  - `createAnchorResolver` (works for main DOM + shadow DOM)
+
+Telemetry for overlays uses `telemetry.trackAction("syntro_overlay_*", stepId, "overlay")`.
+
+### Testing
+
+- Shadow root is **open**, so Playwright/Cypress can traverse via `.shadow()`.
+- Data hooks: `[data-shadow-canvas-id="overlay-launcher"]`, `[data-shadow-canvas-id="rectangle-${id}"]`, etc.
+- `SmartCanvasController` exposes `open/close` for deterministic tests.
+
+### Directory Overview
+
+```
+tech-core/sdks/shadow-canvas
+├─ src
+│  ├─ SmartCanvasElement.tsx   // custom element + controller glue
+│  ├─ SmartCanvasApp.tsx       // React UI
+│  ├─ SmartCanvasPortal.tsx    // portal helper
+│  ├─ api.tsx                  // window.SmartCanvas + imperative API
+│  ├─ analytics/, experiments/, hooks/, components/
+│  └─ controller.ts
+└─ README.md
+```
+
+### Quick Checklist
+
+1. Call `registerSmartCanvasElement()` once per app.
+2. Render `<smart-canvas>` (custom element).
+3. Portal your React tree into the element’s shadow via `SmartCanvasPortal`.
+4. Configure the SDK with your API credentials.
+5. For non-React pages, call `window.SmartCanvas.create()` with configuration.

package/dist/SmartCanvasApp.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+import { SmartCanvasController } from "./controller";
+import type { CanvasConfigFetcher } from "./types";
+import type { ExperimentClient } from "./experiments/types";
+import type { TelemetryClient } from "./telemetry/types";
+import type { OverlayRecipeFetcher } from "./overlays/fetcher";
+import { MountableComponent } from "./api";
+import { CanvasTheme } from "./components/ShadowCanvasOverlay";
+export interface SmartCanvasAppProps {
+    controller: SmartCanvasController;
+    fetcher?: CanvasConfigFetcher;
+    configUri?: string;
+    configUriFeatureKey?: string;
+    configFeatureKey?: string;
+    fetchCredentials?: RequestCredentials;
+    pollIntervalMs?: number;
+    experiments?: ExperimentClient;
+    telemetry?: TelemetryClient;
+    overlayFetcher?: OverlayRecipeFetcher;
+    overlayConfigUri?: string;
+    overlayConfigFeatureKey?: string;
+    overlayFetchCredentials?: RequestCredentials;
+    footerSlot?: ReactNode;
+    launcherLabel?: string;
+    canvasHost?: HTMLElement | null;
+    customRenderers?: Record<string, MountableComponent>;
+    theme?: Partial<CanvasTheme>;
+}
+export declare function SmartCanvasApp({ controller, fetcher, configUri, configUriFeatureKey, configFeatureKey, fetchCredentials, pollIntervalMs, experiments, telemetry, overlayFetcher, overlayConfigUri, overlayConfigFeatureKey, overlayFetchCredentials, footerSlot, launcherLabel, canvasHost, customRenderers, theme, }: SmartCanvasAppProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/SmartCanvasApp.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { ShadowCanvasOverlay } from "./components/ShadowCanvasOverlay";
+import { useShadowCanvasConfig } from "./hooks/useShadowCanvasConfig";
+import { createCanvasConfigFetcher } from "./configFetcher";
+import { useCanvasOverlays } from "./hooks/useCanvasOverlays";
+import { useHostPatches } from "./hooks/useHostPatches";
+export function SmartCanvasApp({ controller, fetcher, configUri, configUriFeatureKey = "smart-canvas-config-uri", configFeatureKey = "smart-canvas-config", fetchCredentials = "include", pollIntervalMs, experiments, telemetry, overlayFetcher, overlayConfigUri, overlayConfigFeatureKey = "smart-canvas-overlay-uri", overlayFetchCredentials = "include", footerSlot, launcherLabel, canvasHost, customRenderers, theme, }) {
+    const [open, setOpen] = useState(controller.getState().open);
+    const derivedFetcher = useMemo(() => {
+        if (fetcher)
+            return fetcher;
+        return createCanvasConfigFetcher({
+            configUri,
+            experiments,
+            featureKey: configUriFeatureKey,
+            configFeatureKey,
+            credentials: fetchCredentials,
+        });
+    }, [fetcher, configUri, experiments, configUriFeatureKey, configFeatureKey, fetchCredentials]);
+    const configState = useShadowCanvasConfig({
+        fetcher: derivedFetcher,
+        pollIntervalMs,
+        experiments,
+    });
+    const hasContent = configState.rectangles.length > 0 && !configState.error;
+    useEffect(() => controller.subscribe((state) => setOpen(state.open)), [controller]);
+    useEffect(() => {
+        if (!hasContent && controller.getState().open) {
+            controller.setOpen(false);
+        }
+    }, [controller, hasContent]);
+    // Use inline overlay recipe from main config if present, otherwise use separate fetcher/URI
+    const derivedOverlayFetcher = useMemo(() => {
+        if (overlayFetcher)
+            return overlayFetcher;
+        if (configState.overlayRecipe) {
+            return async () => configState.overlayRecipe;
+        }
+        // Don't create a fetcher if there's no URI and we're still loading config
+        if (!overlayConfigUri && configState.isLoading) {
+            return undefined;
+        }
+        return undefined;
+    }, [overlayFetcher, configState.overlayRecipe, configState.isLoading, overlayConfigUri]);
+    useCanvasOverlays({
+        fetcher: derivedOverlayFetcher,
+        configUri: !derivedOverlayFetcher && !configState.isLoading ? overlayConfigUri : undefined,
+        featureKey: overlayConfigFeatureKey,
+        credentials: overlayFetchCredentials,
+        experiments,
+        telemetry,
+        canvasHost,
+    });
+    useHostPatches({
+        patches: configState.patches,
+        telemetry,
+        canvasHost,
+    });
+    if (!configState.isLoading && !hasContent) {
+        return null;
+    }
+    if (!hasContent) {
+        return null;
+    }
+    return (_jsx(ShadowCanvasOverlay, { rectangles: configState.rectangles, isLoading: configState.isLoading, error: configState.error, canvasTitle: configState.canvasTitle, telemetry: telemetry, launcherLabel: launcherLabel, footerSlot: footerSlot, isOpen: open, onToggle: () => controller.toggle(), customRenderers: customRenderers, displayMode: configState.displayMode, theme: theme }));
+}
+//# sourceMappingURL=SmartCanvasApp.js.map

package/dist/SmartCanvasApp.js.map

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

package/dist/SmartCanvasElement.d.ts

@@ -0,0 +1,29 @@
+import { type SmartCanvasAppProps } from "./SmartCanvasApp";
+import { SmartCanvasController } from "./controller";
+import { MountableComponent } from "./api";
+export declare class SmartCanvasElement extends HTMLElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    getMountNode(): HTMLDivElement;
+    getController(): SmartCanvasController;
+    getOverlayRoot(): HTMLElement;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    registerComponent(key: string, component: MountableComponent): void;
+    setOverrideFetcher(fetcher: any): void;
+    /**
+     * Used by standalone create() helper to bootstrap React into the shadow.
+     */
+    mountReactApp(appProps: Omit<SmartCanvasAppProps, "controller">): void;
+    private render;
+    private applyBaseStyles;
+}
+export declare const registerSmartCanvasElement: () => void;
+declare global {
+    interface HTMLElementTagNameMap {
+        "smart-canvas": SmartCanvasElement;
+    }
+}

package/dist/SmartCanvasElement.js

@@ -0,0 +1,133 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _SmartCanvasElement_shadow, _SmartCanvasElement_mount, _SmartCanvasElement_overlayRoot, _SmartCanvasElement_controller, _SmartCanvasElement_root, _SmartCanvasElement_lastAppProps, _SmartCanvasElement_customRenderers;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+import { SmartCanvasApp } from "./SmartCanvasApp";
+import { createSmartCanvasController } from "./controller";
+const TAG_NAME = "smart-canvas";
+const BASE_CSS = `
+:host {
+  font: inherit;
+  color: inherit;
+  position: relative;
+  contain: layout style;
+}
+:host([hidden]) {
+  display: none;
+}
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+`;
+const ensureOverlayRoot = () => {
+    const id = "smartcanvas-overlays";
+    let root = document.getElementById(id);
+    if (!root) {
+        root = document.createElement("div");
+        root.id = id;
+        root.setAttribute("data-smart-canvas-overlay", "true");
+        document.body.appendChild(root);
+    }
+    return root;
+};
+export class SmartCanvasElement extends HTMLElement {
+    constructor() {
+        super();
+        _SmartCanvasElement_shadow.set(this, void 0);
+        _SmartCanvasElement_mount.set(this, void 0);
+        _SmartCanvasElement_overlayRoot.set(this, void 0);
+        _SmartCanvasElement_controller.set(this, void 0);
+        _SmartCanvasElement_root.set(this, null);
+        _SmartCanvasElement_lastAppProps.set(this, null);
+        _SmartCanvasElement_customRenderers.set(this, {});
+        __classPrivateFieldSet(this, _SmartCanvasElement_shadow, this.attachShadow({ mode: "open", delegatesFocus: true }), "f");
+        __classPrivateFieldSet(this, _SmartCanvasElement_mount, document.createElement("div"), "f");
+        __classPrivateFieldGet(this, _SmartCanvasElement_mount, "f").setAttribute("part", "mount");
+        __classPrivateFieldGet(this, _SmartCanvasElement_shadow, "f").appendChild(__classPrivateFieldGet(this, _SmartCanvasElement_mount, "f"));
+        __classPrivateFieldSet(this, _SmartCanvasElement_overlayRoot, ensureOverlayRoot(), "f");
+        __classPrivateFieldSet(this, _SmartCanvasElement_controller, createSmartCanvasController(), "f");
+        this.applyBaseStyles();
+    }
+    connectedCallback() {
+        this.style.setProperty("font-family", "inherit");
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _SmartCanvasElement_root, "f")) === null || _a === void 0 ? void 0 : _a.unmount();
+        __classPrivateFieldSet(this, _SmartCanvasElement_root, null, "f");
+    }
+    getMountNode() {
+        return __classPrivateFieldGet(this, _SmartCanvasElement_mount, "f");
+    }
+    getController() {
+        return __classPrivateFieldGet(this, _SmartCanvasElement_controller, "f");
+    }
+    getOverlayRoot() {
+        return __classPrivateFieldGet(this, _SmartCanvasElement_overlayRoot, "f");
+    }
+    open() {
+        __classPrivateFieldGet(this, _SmartCanvasElement_controller, "f").setOpen(true);
+    }
+    close() {
+        __classPrivateFieldGet(this, _SmartCanvasElement_controller, "f").setOpen(false);
+    }
+    toggle() {
+        __classPrivateFieldGet(this, _SmartCanvasElement_controller, "f").toggle();
+    }
+    registerComponent(key, component) {
+        __classPrivateFieldSet(this, _SmartCanvasElement_customRenderers, { ...__classPrivateFieldGet(this, _SmartCanvasElement_customRenderers, "f"), [key]: component }, "f");
+        this.render();
+    }
+    setOverrideFetcher(fetcher) {
+        if (__classPrivateFieldGet(this, _SmartCanvasElement_lastAppProps, "f")) {
+            __classPrivateFieldSet(this, _SmartCanvasElement_lastAppProps, { ...__classPrivateFieldGet(this, _SmartCanvasElement_lastAppProps, "f"), fetcher }, "f");
+            this.render();
+        }
+    }
+    /**
+     * Used by standalone create() helper to bootstrap React into the shadow.
+     */
+    mountReactApp(appProps) {
+        __classPrivateFieldSet(this, _SmartCanvasElement_lastAppProps, appProps, "f");
+        this.render();
+    }
+    render() {
+        if (!this.isConnected || !__classPrivateFieldGet(this, _SmartCanvasElement_lastAppProps, "f"))
+            return;
+        if (!__classPrivateFieldGet(this, _SmartCanvasElement_root, "f")) {
+            __classPrivateFieldSet(this, _SmartCanvasElement_root, createRoot(__classPrivateFieldGet(this, _SmartCanvasElement_mount, "f")), "f");
+        }
+        __classPrivateFieldGet(this, _SmartCanvasElement_root, "f").render(_jsx(SmartCanvasApp, { ...__classPrivateFieldGet(this, _SmartCanvasElement_lastAppProps, "f"), controller: __classPrivateFieldGet(this, _SmartCanvasElement_controller, "f"), canvasHost: this, customRenderers: __classPrivateFieldGet(this, _SmartCanvasElement_customRenderers, "f") }));
+    }
+    applyBaseStyles() {
+        if (__classPrivateFieldGet(this, _SmartCanvasElement_shadow, "f").adoptedStyleSheets !== undefined) {
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(BASE_CSS);
+            __classPrivateFieldGet(this, _SmartCanvasElement_shadow, "f").adoptedStyleSheets = [sheet];
+        }
+        else {
+            const style = document.createElement("style");
+            style.textContent = BASE_CSS;
+            __classPrivateFieldGet(this, _SmartCanvasElement_shadow, "f").appendChild(style);
+        }
+    }
+}
+_SmartCanvasElement_shadow = new WeakMap(), _SmartCanvasElement_mount = new WeakMap(), _SmartCanvasElement_overlayRoot = new WeakMap(), _SmartCanvasElement_controller = new WeakMap(), _SmartCanvasElement_root = new WeakMap(), _SmartCanvasElement_lastAppProps = new WeakMap(), _SmartCanvasElement_customRenderers = new WeakMap();
+export const registerSmartCanvasElement = () => {
+    if (typeof window === "undefined")
+        return;
+    if (!customElements.get(TAG_NAME)) {
+        customElements.define(TAG_NAME, SmartCanvasElement);
+    }
+};
+//# sourceMappingURL=SmartCanvasElement.js.map

package/dist/SmartCanvasElement.js.map

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

package/dist/SmartCanvasPortal.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import type { SmartCanvasElement } from "./SmartCanvasElement";
+export interface SmartCanvasPortalProps {
+    element: SmartCanvasElement | null;
+    children: ReactNode;
+}
+export declare function SmartCanvasPortal({ element, children }: SmartCanvasPortalProps): import("react").ReactPortal | null;

package/dist/SmartCanvasPortal.js

@@ -0,0 +1,17 @@
+import { useLayoutEffect, useState } from "react";
+import { createPortal } from "react-dom";
+export function SmartCanvasPortal({ element, children }) {
+    const [mountNode, setMountNode] = useState(null);
+    useLayoutEffect(() => {
+        if (!element) {
+            setMountNode(null);
+            return;
+        }
+        setMountNode(element.getMountNode());
+        return () => setMountNode(null);
+    }, [element]);
+    if (!mountNode)
+        return null;
+    return createPortal(children, mountNode);
+}
+//# sourceMappingURL=SmartCanvasPortal.js.map

package/dist/SmartCanvasPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartCanvasPortal.js","sourceRoot":"","sources":["../src/SmartCanvasPortal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAQzC,MAAM,UAAU,iBAAiB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAA0B;IAC7E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAErE,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,OAAO;QACT,CAAC;QACD,YAAY,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;QACrC,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAC5B,OAAO,YAAY,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AAC3C,CAAC"}

package/dist/antiFlicker.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Anti-flicker functionality to prevent content flash during patch application
+ */
+export interface AntiFlickerConfig {
+    timeout?: number;
+    className?: string;
+    style?: string;
+}
+export declare function initAntiFlicker(config?: AntiFlickerConfig): () => void;
+export declare function getAntiFlickerSnippet(config?: AntiFlickerConfig): string;

package/dist/antiFlicker.js

@@ -0,0 +1,39 @@
+/**
+ * Anti-flicker functionality to prevent content flash during patch application
+ */
+const DEFAULT_CONFIG = {
+    timeout: 300,
+    className: 'sc-anti-flicker',
+    style: 'opacity: 0 !important'
+};
+export function initAntiFlicker(config = {}) {
+    const { timeout, className, style } = { ...DEFAULT_CONFIG, ...config };
+    // Inject style
+    const styleEl = document.createElement('style');
+    styleEl.textContent = `.${className} { ${style} }`;
+    document.head.appendChild(styleEl);
+    // Add class to hide content
+    document.documentElement.classList.add(className);
+    // Set timeout to remove class (failsafe)
+    const timeoutId = setTimeout(() => {
+        document.documentElement.classList.remove(className);
+    }, timeout);
+    // Return function to remove anti-flicker
+    return () => {
+        clearTimeout(timeoutId);
+        document.documentElement.classList.remove(className);
+        styleEl.remove();
+    };
+}
+// For inline script usage
+export function getAntiFlickerSnippet(config = {}) {
+    const { className, style } = { ...DEFAULT_CONFIG, ...config };
+    return `
+(function() {
+  var s = document.createElement('style');
+  s.textContent = '.${className} { ${style} }';
+  document.head.appendChild(s);
+  document.documentElement.className += ' ${className}';
+})();`;
+}
+//# sourceMappingURL=antiFlicker.js.map

package/dist/antiFlicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"antiFlicker.js","sourceRoot":"","sources":["../src/antiFlicker.ts"],"names":[],"mappings":"AAAA;;GAEG;AAQH,MAAM,cAAc,GAAgC;IAClD,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,iBAAiB;IAC5B,KAAK,EAAE,uBAAuB;CAC/B,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,SAA4B,EAAE;IAC5D,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,MAAM,EAAE,CAAC;IAEvE,eAAe;IACf,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAChD,OAAO,CAAC,WAAW,GAAG,IAAI,SAAS,MAAM,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEnC,4BAA4B;IAC5B,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAElD,yCAAyC;IACzC,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;QAChC,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IACvD,CAAC,EAAE,OAAO,CAAC,CAAC;IAEZ,yCAAyC;IACzC,OAAO,GAAG,EAAE;QACV,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QACrD,OAAO,CAAC,MAAM,EAAE,CAAC;IACnB,CAAC,CAAC;AACJ,CAAC;AAED,0BAA0B;AAC1B,MAAM,UAAU,qBAAqB,CAAC,SAA4B,EAAE;IAClE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,MAAM,EAAE,CAAC;IAC9D,OAAO;;;sBAGa,SAAS,MAAM,KAAK;;4CAEE,SAAS;MAC/C,CAAC;AACP,CAAC"}

package/dist/api.d.ts

@@ -0,0 +1,60 @@
+import { SmartCanvasElement } from "./SmartCanvasElement";
+import type { ExperimentClient } from "./experiments/types";
+import type { TelemetryClient } from "./telemetry/types";
+import type { CanvasConfigFetcher } from "./types";
+import type { OverlayRecipeFetcher } from "./overlays/fetcher";
+import type { CanvasTheme } from "./components/ShadowCanvasOverlay";
+export interface SmartCanvasIntegrations {
+    experiments?: ExperimentClient;
+    telemetry?: TelemetryClient;
+}
+export interface SmartCanvasConfig {
+    target?: HTMLElement;
+    defaultOpen?: boolean;
+    tokens?: Record<string, string>;
+    fetcher?: CanvasConfigFetcher;
+    configUri?: string;
+    configUriFeatureKey?: string;
+    fetchCredentials?: RequestCredentials;
+    overlayFetcher?: OverlayRecipeFetcher;
+    overlayConfigUri?: string;
+    overlayConfigFeatureKey?: string;
+    overlayFetchCredentials?: RequestCredentials;
+    pollIntervalMs?: number;
+    integrations?: SmartCanvasIntegrations;
+    antiFlicker?: boolean | {
+        timeout?: number;
+        className?: string;
+    };
+    earlyPatching?: boolean;
+    editorUrl?: string;
+    theme?: Partial<CanvasTheme>;
+}
+/**
+ * @deprecated Use TileComponent from types.ts
+ */
+export interface MountableComponent {
+    mount(container: HTMLElement, props: any): void | (() => void);
+}
+export type { TileComponent, TileComponentProps } from "./types";
+export interface SmartCanvasHandle {
+    el: SmartCanvasElement;
+    open(): void;
+    close(): void;
+    destroy(): void;
+    setTokens(tokens: Record<string, string>): void;
+    getConfig(): Promise<any>;
+    updateConfig(newConfig: any): void;
+    setEnabled(enabled: boolean): void;
+    registerComponent(key: string, component: MountableComponent): void;
+    setOverrideFetcher(fetcher: any): void;
+}
+export declare const createSmartCanvas: (config?: SmartCanvasConfig) => Promise<SmartCanvasHandle>;
+declare global {
+    interface Window {
+        SmartCanvas?: {
+            create(config?: SmartCanvasConfig): Promise<SmartCanvasHandle>;
+        };
+    }
+}
+export { getAntiFlickerSnippet } from "./antiFlicker";