@sampleapp.ai/sdk 1.0.28 → 1.0.30

package/dist/lib/inject-styles.js

@@ -0,0 +1,42 @@
+/**
+ * Utility functions for creating Shadow DOM containers with CSS injection
+ */
+/**
+ * Creates a shadow container and injects CSS into it
+ */
+export function createShadowContainer(hostElement) {
+    const shadowHost = document.createElement("div");
+    shadowHost.style.display = "contents"; // Make shadow host transparent to layout
+    const shadow = shadowHost.attachShadow({ mode: "open" });
+    hostElement.appendChild(shadowHost);
+    return shadow;
+}
+/**
+ * Gets or creates the mount point inside a shadow root
+ */
+export function getShadowMountPoint(shadow) {
+    // Check if mount point already exists
+    let mountPoint = shadow.querySelector("#sdk-mount-point");
+    if (!mountPoint) {
+        mountPoint = document.createElement("div");
+        mountPoint.id = "sdk-mount-point";
+        // Don't reset all styles - only reset what's necessary to prevent host page interference
+        mountPoint.style.position = "relative";
+        mountPoint.style.display = "block";
+        shadow.appendChild(mountPoint);
+    }
+    return mountPoint;
+}
+/**
+ * Injects CSS text into a shadow root
+ */
+export function injectStylesIntoShadow(shadow, cssText) {
+    // Check if style element already exists
+    let styleElement = shadow.querySelector("#sdk-styles");
+    if (!styleElement) {
+        styleElement = document.createElement("style");
+        styleElement.id = "sdk-styles";
+        shadow.insertBefore(styleElement, shadow.firstChild);
+    }
+    styleElement.textContent = cssText;
+}

package/dist/lib/shadow-dom-wrapper.js

@@ -0,0 +1,42 @@
+import React, { useEffect, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { TAILWIND_CSS } from "./generated-css";
+/**
+ * React component that wraps children in a Shadow DOM for style isolation
+ * This is used for ES module builds where components are imported directly
+ */
+export const ShadowDomWrapper = ({ children, }) => {
+    const containerRef = useRef(null);
+    const shadowRootRef = useRef(null);
+    const mountPointRef = useRef(null);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        // Create shadow DOM
+        const shadow = containerRef.current.attachShadow({ mode: "open" });
+        shadowRootRef.current = shadow;
+        // Create mount point
+        const mountPoint = document.createElement("div");
+        mountPoint.id = "sdk-mount-point";
+        // Don't reset all styles - only reset what's necessary to prevent host page interference
+        mountPoint.style.position = "relative";
+        mountPoint.style.display = "block";
+        mountPointRef.current = mountPoint;
+        // Inject processed Tailwind CSS into shadow DOM
+        const styleElement = document.createElement("style");
+        styleElement.id = "sdk-styles";
+        styleElement.textContent = TAILWIND_CSS;
+        shadow.appendChild(styleElement);
+        shadow.appendChild(mountPoint);
+        // Render children into shadow DOM mount point
+        const root = createRoot(mountPoint);
+        root.render(children);
+        return () => {
+            root.unmount();
+            if (containerRef.current && shadowRootRef.current) {
+                containerRef.current.innerHTML = "";
+            }
+        };
+    }, [children]);
+    return React.createElement("div", { ref: containerRef, style: { display: "contents" } });
+};

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}