@sampleapp.ai/sdk 1.0.42 → 1.0.43

package/dist/index.js

@@ -15,8 +15,16 @@ const SandboxHome = (props) => React.createElement(ShadowDomWrapper, null, React
 export { ChatButton, ModalSearchAndChat, ChatBar, TailwindExample, SandboxHome };
 // Export Sandbox component and types
 export { Sandbox } from "./components/sandbox";
+// Export sandbox API functions
+export { fetchSandboxConfig, fetchSandboxConfigWithContent, buildConfigFromContent } from "./components/sandbox/api";
+// Export tree selector utilities and types
+export { useTreeSelector } from "./hooks/use-tree-selector";
+export { getNodeAtPath, getNodesAlongPath, pathToByType, getDefaultPath, getSelectableSections, updateSelectionPath, createSelection, isPathComplete, getNodeLabel } from "./lib/tree-utils";
+export { findMatchingContent, hasContentForSelection, getUniqueFieldValues, filterContent } from "./lib/content-matcher";
+// Export API client
+export { createApiClient, extractContainerIdFromUrl } from "./lib/api-client";
 // Export Guardian components (now nested under sandbox)
-export { GuardianPlayground, GuardianComponent, GuardianProvider, VmProvider, buildGuardianConfig, } from "./components/sandbox/guardian";
+export { GuardianPlayground, GuardianComponent, GuardianProvider, VmProvider, buildGuardianConfig, Header } from "./components/sandbox/guardian";
 // Export themes
 export { themes, getTheme, DEFAULT_THEME } from "./themes";
 // SDK class for loadScript programmatic usage
@@ -33,7 +41,7 @@ class SampleAppSDK {
                 onClose: () => {
                     root.unmount();
                     modalContainer.remove();
-                },
+                }
             });
             root.render(component);
             return {
@@ -46,7 +54,7 @@ class SampleAppSDK {
                 },
                 hide: () => {
                     modalContainer.style.display = "none";
-                },
+                }
             };
         };
         this.ChatButton = (settings, container) => {
@@ -58,7 +66,7 @@ class SampleAppSDK {
                 unmount: () => {
                     root.unmount();
                     targetContainer.remove();
-                },
+                }
             };
         };
     }

package/dist/lib/api-client.js

@@ -74,6 +74,74 @@ class ApiClient {
                     method: "GET",
                 }, { skip, limit });
             },
+            /**
+             * Get all sandbox contents for a specific use case
+             * Used for upfront loading to enable local filtering
+             * @param useCaseId - The ID of the use case
+             * @param skip - Number of records to skip (default: 0)
+             * @param limit - Maximum number of records to return (default: 100)
+             * @returns Array of sandbox content data
+             */
+            getByUseCaseId: async (useCaseId, skip = 0, limit = 100) => {
+                return this.request(["sandbox-content", "use-case", useCaseId.toString()], {
+                    method: "GET",
+                }, { skip, limit });
+            },
+        };
+        /**
+         * Sandbox use case endpoints
+         */
+        this.sandboxUseCase = {
+            /**
+             * Get a sandbox use case by UID
+             * @param uid - The UID of the use case
+             * @returns The use case data including tech_stack_config
+             */
+            getByUid: async (uid) => {
+                return this.request(["sandbox-use-case", uid]);
+            },
+            /**
+             * Get a sandbox use case by ID
+             * @param id - The numeric ID of the use case
+             * @returns The use case data including tech_stack_config
+             */
+            getById: async (id) => {
+                return this.request(["sandbox-use-case", "id", id.toString()]);
+            },
+            /**
+             * Get all sandbox use cases for a specific playground
+             * @param playgroundUid - The UID of the playground
+             * @param skip - Number of records to skip (default: 0)
+             * @param limit - Maximum number of records to return (default: 100)
+             * @returns Array of use case data
+             */
+            getByPlayground: async (playgroundUid, skip = 0, limit = 100) => {
+                return this.request(["sandbox-use-case", "playground", playgroundUid], {
+                    method: "GET",
+                }, { skip, limit });
+            },
+            /**
+             * Get all template use cases (public access)
+             * @param skip - Number of records to skip (default: 0)
+             * @param limit - Maximum number of records to return (default: 100)
+             * @returns Array of template use case data
+             */
+            getTemplates: async (skip = 0, limit = 100) => {
+                return this.request(["sandbox-use-case", "templates", "list"], {
+                    method: "GET",
+                }, { skip, limit });
+            },
+            /**
+             * Get all public use cases
+             * @param skip - Number of records to skip (default: 0)
+             * @param limit - Maximum number of records to return (default: 100)
+             * @returns Array of public use case data
+             */
+            getPublic: async (skip = 0, limit = 100) => {
+                return this.request(["sandbox-use-case", "public", "list"], {
+                    method: "GET",
+                }, { skip, limit });
+            },
         };
         /**
          * SDK endpoints

package/dist/lib/content-matcher.js

@@ -0,0 +1,99 @@
+/**
+ * Utility functions for matching sandbox content to tree selections
+ * Enables local filtering without API calls after initial load
+ */
+/**
+ * Find sandbox content that matches the current tree selection
+ * Matches against flat fields: product, product_version, architecture, frontend, backend, framework
+ *
+ * @param allContent - All sandbox content entries for the use case
+ * @param selection - Current tree selection
+ * @returns Matching content or null if not found
+ */
+export function findMatchingContent(allContent, selection) {
+    const { byType } = selection;
+    const match = allContent.find((content) => {
+        // Match each selected dimension against content fields
+        // Only check fields that are present in the selection
+        if (byType.product && content.product !== byType.product)
+            return false;
+        if (byType.version && content.product_version !== byType.version)
+            return false;
+        if (byType.architecture && content.architecture !== byType.architecture)
+            return false;
+        if (byType.frontend && content.frontend !== byType.frontend)
+            return false;
+        if (byType.backend && content.backend !== byType.backend)
+            return false;
+        if (byType.framework && content.framework !== byType.framework)
+            return false;
+        return true;
+    });
+    return match || null;
+}
+/**
+ * Check if content exists for a potential selection
+ * Used to disable/gray out options that have no content
+ *
+ * @param allContent - All sandbox content entries for the use case
+ * @param partialSelection - Partial selection to check (only specified fields are matched)
+ * @returns True if at least one content entry matches
+ */
+export function hasContentForSelection(allContent, partialSelection) {
+    return allContent.some((content) => {
+        if (partialSelection.product &&
+            content.product !== partialSelection.product)
+            return false;
+        if (partialSelection.version &&
+            content.product_version !== partialSelection.version)
+            return false;
+        if (partialSelection.architecture &&
+            content.architecture !== partialSelection.architecture)
+            return false;
+        if (partialSelection.frontend &&
+            content.frontend !== partialSelection.frontend)
+            return false;
+        if (partialSelection.backend &&
+            content.backend !== partialSelection.backend)
+            return false;
+        if (partialSelection.framework &&
+            content.framework !== partialSelection.framework)
+            return false;
+        return true;
+    });
+}
+/**
+ * Get all unique values for a specific field from content entries
+ * Useful for building filter options
+ *
+ * @param allContent - All sandbox content entries
+ * @param field - The field to extract unique values from
+ * @returns Array of unique non-null values
+ */
+export function getUniqueFieldValues(allContent, field) {
+    const values = new Set();
+    for (const content of allContent) {
+        const value = content[field];
+        if (value) {
+            values.add(value);
+        }
+    }
+    return Array.from(values);
+}
+/**
+ * Filter content entries by multiple criteria
+ *
+ * @param allContent - All sandbox content entries
+ * @param filters - Object with field names and values to filter by
+ * @returns Filtered array of content entries
+ */
+export function filterContent(allContent, filters) {
+    return allContent.filter((content) => {
+        for (const [key, value] of Object.entries(filters)) {
+            if (value && content[key] !== value) {
+                return false;
+            }
+        }
+        return true;
+    });
+}

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

@@ -9,13 +9,25 @@ export const ShadowDomWrapper = ({ children, }) => {
     const containerRef = useRef(null);
     const shadowRootRef = useRef(null);
     const mountPointRef = useRef(null);
+    const rootRef = useRef(null);
+    // Initialize shadow DOM once on mount
     useEffect(() => {
         if (!containerRef.current)
             return;
-        // Create shadow DOM
-        const shadow = containerRef.current.attachShadow({ mode: "open" });
-        shadowRootRef.current = shadow;
-        // Create mount point
+        let shadow;
+        // Check if shadow root already exists (e.g., from hot reload)
+        if (containerRef.current.shadowRoot) {
+            shadow = containerRef.current.shadowRoot;
+            shadowRootRef.current = shadow;
+            // Clear existing content to prevent stale roots
+            shadow.innerHTML = '';
+        }
+        else {
+            // Create shadow DOM
+            shadow = containerRef.current.attachShadow({ mode: "open" });
+            shadowRootRef.current = shadow;
+        }
+        // Always create fresh 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
@@ -28,15 +40,24 @@ export const ShadowDomWrapper = ({ children, }) => {
         styleElement.textContent = TAILWIND_CSS;
         shadow.appendChild(styleElement);
         shadow.appendChild(mountPoint);
-        // Render children into shadow DOM mount point
-        const root = createRoot(mountPoint);
-        root.render(children);
+        // Create React root
+        rootRef.current = createRoot(mountPoint);
         return () => {
-            root.unmount();
-            if (containerRef.current && shadowRootRef.current) {
-                containerRef.current.innerHTML = "";
+            // Schedule unmount for after current render completes
+            if (rootRef.current) {
+                const root = rootRef.current;
+                rootRef.current = null;
+                setTimeout(() => {
+                    root.unmount();
+                }, 0);
             }
         };
+    }, []); // Only run once on mount
+    // Update rendered content when children change
+    useEffect(() => {
+        if (rootRef.current) {
+            rootRef.current.render(children);
+        }
     }, [children]);
     return React.createElement("div", { ref: containerRef, style: { display: "contents" } });
 };

package/dist/lib/tree-utils.js

@@ -0,0 +1,191 @@
+/**
+ * Utility functions for navigating and manipulating the tech stack tree
+ */
+import { NODE_TYPE_LABELS } from "./types/tree-config";
+/**
+ * Get the display label for a node (falls back to key if no label)
+ */
+export function getNodeLabel(node) {
+    return node.label || node.key;
+}
+/**
+ * Navigate the tree to find a node at a specific path
+ * @param root - The root node to start from
+ * @param path - Array of keys to follow
+ * @returns The node at the path, or null if not found
+ */
+export function getNodeAtPath(root, path) {
+    let current = root;
+    for (const key of path) {
+        if (!(current === null || current === void 0 ? void 0 : current.children))
+            return null;
+        const child = current.children.find((c) => c.key === key);
+        if (!child)
+            return null;
+        current = child;
+    }
+    return current;
+}
+/**
+ * Get all nodes along a path (including the root)
+ * @param root - The root node
+ * @param path - Array of keys to follow
+ * @returns Array of nodes from root to the final node
+ */
+export function getNodesAlongPath(root, path) {
+    const nodes = [root];
+    let current = root;
+    for (const key of path) {
+        if (!current.children)
+            break;
+        const child = current.children.find((c) => c.key === key);
+        if (!child)
+            break;
+        nodes.push(child);
+        current = child;
+    }
+    return nodes;
+}
+/**
+ * Convert a path to a byType map
+ * @param root - The root node
+ * @param path - Array of keys
+ * @returns Map of nodeType to selected key
+ */
+export function pathToByType(root, path) {
+    const byType = {};
+    const nodes = getNodesAlongPath(root, path);
+    // Skip the root node (index 0), start from first actual selection
+    for (let i = 1; i < nodes.length; i++) {
+        const node = nodes[i];
+        if (node.nodeType && node.nodeType !== "root") {
+            byType[node.nodeType] = node.key;
+        }
+    }
+    return byType;
+}
+/**
+ * Get the default path through the tree (following isDefault flags or first child)
+ * @param root - The root node
+ * @returns Array of keys representing the default selection path
+ */
+export function getDefaultPath(root) {
+    const path = [];
+    let current = root;
+    while (current.children && current.children.length > 0) {
+        // Find default child or use first child
+        const defaultChild = current.children.find((c) => c.isDefault) || current.children[0];
+        path.push(defaultChild.key);
+        current = defaultChild;
+    }
+    return path;
+}
+/**
+ * Get selectable sections based on current selection path
+ * This builds the button groups shown in the header
+ * @param config - The tech stack configuration
+ * @param currentPath - Current selection path
+ * @returns Array of sections with their options
+ */
+export function getSelectableSections(config, currentPath) {
+    const sections = [];
+    const nodes = getNodesAlongPath(config.root, currentPath);
+    // For each level in the path, create a section showing siblings
+    for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        // Skip root node
+        if (node.nodeType === "root")
+            continue;
+        // Get parent to find siblings
+        const parent = i === 0 ? config.root : nodes[i - 1];
+        if (!parent.children)
+            continue;
+        const options = parent.children.map((sibling) => ({
+            key: sibling.key,
+            label: getNodeLabel(sibling),
+            isSelected: sibling.key === node.key
+        }));
+        sections.push({
+            nodeType: node.nodeType,
+            label: NODE_TYPE_LABELS[node.nodeType] || `${node.nodeType}:`,
+            options
+        });
+    }
+    // Add the next level if current node has children
+    const currentNode = getNodeAtPath(config.root, currentPath);
+    if ((currentNode === null || currentNode === void 0 ? void 0 : currentNode.children) && currentNode.children.length > 0) {
+        const firstChild = currentNode.children[0];
+        const options = currentNode.children.map((child) => ({
+            key: child.key,
+            label: getNodeLabel(child),
+            isSelected: false // None selected yet at this level
+        }));
+        sections.push({
+            nodeType: firstChild.nodeType,
+            label: NODE_TYPE_LABELS[firstChild.nodeType] || `${firstChild.nodeType}:`,
+            options
+        });
+    }
+    return sections;
+}
+/**
+ * Update the selection path when a user selects an option
+ * @param config - The tech stack configuration
+ * @param currentPath - Current selection path
+ * @param nodeType - The nodeType of the selection being changed
+ * @param selectedKey - The key of the newly selected option
+ * @returns New selection path
+ */
+export function updateSelectionPath(config, currentPath, nodeType, selectedKey) {
+    var _a;
+    const nodes = getNodesAlongPath(config.root, currentPath);
+    // Find which level this nodeType is at
+    let levelIndex = -1;
+    for (let i = 1; i < nodes.length; i++) {
+        if (nodes[i].nodeType === nodeType) {
+            levelIndex = i - 1; // Index in path (nodes includes root, path doesn't)
+            break;
+        }
+    }
+    // If not found in current path, it might be the next level
+    if (levelIndex === -1) {
+        const currentNode = getNodeAtPath(config.root, currentPath);
+        if ((currentNode === null || currentNode === void 0 ? void 0 : currentNode.children) &&
+            ((_a = currentNode.children[0]) === null || _a === void 0 ? void 0 : _a.nodeType) === nodeType) {
+            // Append to current path
+            return [...currentPath, selectedKey];
+        }
+        // Unknown level, return current path
+        return currentPath;
+    }
+    // Truncate path at this level and set new selection
+    const newPath = currentPath.slice(0, levelIndex);
+    newPath.push(selectedKey);
+    // Follow defaults for remaining levels
+    const newNode = getNodeAtPath(config.root, newPath);
+    if (newNode) {
+        let current = newNode;
+        while (current.children && current.children.length > 0) {
+            const defaultChild = current.children.find((c) => c.isDefault) || current.children[0];
+            newPath.push(defaultChild.key);
+            current = defaultChild;
+        }
+    }
+    return newPath;
+}
+/**
+ * Create a TreeSelection object from a path
+ */
+export function createSelection(config, path) {
+    return {
+        path,
+        byType: pathToByType(config.root, path)
+    };
+}
+/**
+ * Check if a path is complete (reaches a leaf node)
+ */
+export function isPathComplete(config, path) {
+    const node = getNodeAtPath(config.root, path);
+    return node !== null && (!node.children || node.children.length === 0);
+}

package/dist/lib/types/tree-config.js

@@ -0,0 +1,18 @@
+/**
+ * Tree configuration types for dynamic tech stack selection
+ * Matches the tech_stack_config structure from SandboxUseCase
+ */
+/**
+ * Human-readable labels for node types
+ */
+export const NODE_TYPE_LABELS = {
+    root: "",
+    product: "Product:",
+    version: "Version:",
+    architecture: "Architecture:",
+    frontend: "Frontend:",
+    backend: "Backend:",
+    framework: "Framework:",
+    integration: "Integration Path:",
+    platform: "Platform:",
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sampleapp.ai/sdk",
-  "version": "1.0.42",
+  "version": "1.0.43",
   "type": "module",
   "description": "TypeScript SDK for your components",
   "main": "./dist/index.umd.js",
@@ -33,7 +33,7 @@
     "preview": "vite preview",
     "type-check": "tsc --noEmit",
     "test:api-client": "tsx test-api-client.ts",
-    "prepublishOnly": "npm run build:prod"
+    "prepublishOnly": "rm -rf dist && npm run build:prod"
   },
   "devDependencies": {
     "@types/node": "^24.3.1",