@runtypelabs/persona 3.0.0 → 3.1.1

package/src/ui.ts

@@ -385,12 +385,14 @@ export const createAgentExperience = (
   initialConfig?: AgentWidgetConfig,
   runtimeOptions?: { debugTools?: boolean }
 ): Controller => {
-  // Preserve original mount id as data attribute for window event instance scoping,
-  // then set mount.id to "persona-root" (required by Tailwind important: "#persona-root")
-  if (mount.id && mount.id !== "persona-root" && !mount.getAttribute("data-persona-instance")) {
+  // Preserve original mount id as data attribute for window event instance scoping
+  if (mount.id && !mount.getAttribute("data-persona-instance")) {
     mount.setAttribute("data-persona-instance", mount.id);
   }
-  mount.id = "persona-root";
+  // Ensure root marker is present for Tailwind scoping and DOM traversal
+  if (!mount.hasAttribute("data-persona-root")) {
+    mount.setAttribute("data-persona-root", "true");
+  }
 
   let config = mergeWithDefaults(initialConfig) as AgentWidgetConfig;
   // Note: applyThemeVariables is called after applyFullHeightStyles() below
@@ -410,11 +412,20 @@ export const createAgentExperience = (
   let persistentMetadata: Record<string, unknown> = {};
   let pendingStoredState: Promise<AgentWidgetStoredState | null> | null = null;
 
-  // Helper to apply onStateLoaded hook and extract state
+  let shouldOpenAfterStateLoaded = false;
+
+  // Helper to apply onStateLoaded hook and extract state.
+  // Supports both the legacy plain-state return and the new { state, open? } return.
   const applyStateLoadedHook = (state: AgentWidgetStoredState): AgentWidgetStoredState => {
     if (config.onStateLoaded) {
       try {
-        return config.onStateLoaded(state);
+        const result = config.onStateLoaded(state);
+        if (result && typeof result === 'object' && 'state' in result) {
+          const { state: processedState, open } = result as { state: AgentWidgetStoredState; open?: boolean };
+          if (open) shouldOpenAfterStateLoaded = true;
+          return processedState;
+        }
+        return result as AgentWidgetStoredState;
       } catch (error) {
         if (typeof console !== "undefined") {
           // eslint-disable-next-line no-console
@@ -5377,6 +5388,13 @@ export const createAgentExperience = (
     }
   }
 
+  // If onStateLoaded signalled open: true, open the panel after init.
+  // Mirrors the same setTimeout(0) pattern used by persistState restore so both
+  // can fire independently without interfering with each other.
+  if (shouldOpenAfterStateLoaded && launcherEnabled) {
+    setTimeout(() => { controller.open(); }, 0);
+  }
+
   return controller;
 };
 

package/src/utils/artifact-gate.ts

@@ -32,7 +32,7 @@ export function applyArtifactPaneBorderTheme(mount: HTMLElement, config: AgentWi
   }
 }
 
-/** Set CSS variables on #persona-root for artifact split/pane sizing. Clears when artifacts disabled. */
+/** Set CSS variables on the widget root for artifact split/pane sizing. Clears when artifacts disabled. */
 function clearDocumentToolbarLayoutVars(mount: HTMLElement): void {
   mount.style.removeProperty("--persona-artifact-doc-toolbar-icon-color");
   mount.style.removeProperty("--persona-artifact-doc-toggle-active-bg");

package/src/styles/tailwind.css

@@ -1,20 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  /* Widget CSS Variables - scoped to widget root to avoid polluting global namespace */
-  #persona-root {
-    --runtype-primary: #111827;
-    --runtype-secondary: #4338ca;
-    --runtype-surface: #ffffff;
-    --runtype-muted: #6b7280;
-    --runtype-accent: #1d4ed8;
-  }
-}
-
-@layer components {
-  .persona-widget-shadow {
-    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
-  }
-}