@runtypelabs/persona 2.3.0 → 3.0.0

package/src/presets.ts

@@ -1,4 +1,5 @@
-import type { AgentWidgetConfig } from './types';
+import type { AgentWidgetConfig } from "./types";
+import type { DeepPartial, PersonaTheme } from "./types/theme";
 
 /**
  * A named preset containing partial widget configuration.
@@ -11,51 +12,71 @@ export interface WidgetPreset {
   config: Partial<AgentWidgetConfig>;
 }
 
+/** Shopping palette + semantic roles (matches prior shop preset visuals). */
+const SHOP_THEME: DeepPartial<PersonaTheme> = {
+  palette: {
+    colors: {
+      primary: { 500: "#111827" },
+      accent: { 600: "#1d4ed8" },
+      gray: {
+        50: "#ffffff",
+        100: "#f8fafc",
+        200: "#f1f5f9",
+        500: "#6b7280",
+        900: "#000000",
+      },
+    },
+    radius: {
+      sm: "0.75rem",
+      md: "1rem",
+      lg: "1.5rem",
+      launcher: "9999px",
+      button: "9999px",
+    },
+  },
+  semantic: {
+    colors: {
+      primary: "palette.colors.primary.500",
+      textInverse: "palette.colors.gray.50",
+    },
+  },
+};
+
+const PANEL_EDGELESS_THEME: DeepPartial<PersonaTheme> = {
+  components: {
+    panel: {
+      borderRadius: "0",
+      shadow: "none",
+    },
+  },
+};
+
 /**
  * Shopping / e-commerce preset.
  * Dark header, rounded launchers, shopping-oriented copy.
  */
 export const PRESET_SHOP: WidgetPreset = {
-  id: 'shop',
-  label: 'Shopping Assistant',
+  id: "shop",
+  label: "Shopping Assistant",
   config: {
-    theme: {
-      primary: '#111827',
-      accent: '#1d4ed8',
-      surface: '#ffffff',
-      muted: '#6b7280',
-      container: '#f8fafc',
-      border: '#f1f5f9',
-      divider: '#f1f5f9',
-      messageBorder: '#f1f5f9',
-      inputBackground: '#ffffff',
-      callToAction: '#000000',
-      callToActionBackground: '#ffffff',
-      sendButtonBackgroundColor: '#111827',
-      sendButtonTextColor: '#ffffff',
-      radiusSm: '0.75rem',
-      radiusMd: '1rem',
-      radiusLg: '1.5rem',
-      launcherRadius: '9999px',
-      buttonRadius: '9999px',
-    },
+    theme: SHOP_THEME,
     launcher: {
-      title: 'Shopping Assistant',
-      subtitle: 'Here to help you find what you need',
-      agentIconText: '🛍️',
-      position: 'bottom-right',
-      width: 'min(400px, calc(100vw - 24px))',
+      title: "Shopping Assistant",
+      subtitle: "Here to help you find what you need",
+      agentIconText: "🛍️",
+      position: "bottom-right",
+      width: "min(400px, calc(100vw - 24px))",
     },
     copy: {
-      welcomeTitle: 'Welcome to our shop!',
-      welcomeSubtitle: 'I can help you find products and answer questions',
-      inputPlaceholder: 'Ask me anything...',
-      sendButtonLabel: 'Send',
+      welcomeTitle: "Welcome to our shop!",
+      welcomeSubtitle: "I can help you find products and answer questions",
+      inputPlaceholder: "Ask me anything...",
+      sendButtonLabel: "Send",
     },
     suggestionChips: [
-      'What can you help me with?',
-      'Tell me about your features',
-      'How does this work?',
+      "What can you help me with?",
+      "Tell me about your features",
+      "How does this work?",
     ],
   },
 };
@@ -65,8 +86,8 @@ export const PRESET_SHOP: WidgetPreset = {
  * Stripped-down header, no launcher button, suitable for inline embeds.
  */
 export const PRESET_MINIMAL: WidgetPreset = {
-  id: 'minimal',
-  label: 'Minimal',
+  id: "minimal",
+  label: "Minimal",
   config: {
     launcher: {
       enabled: false,
@@ -74,17 +95,14 @@ export const PRESET_MINIMAL: WidgetPreset = {
     },
     layout: {
       header: {
-        layout: 'minimal',
+        layout: "minimal",
         showCloseButton: false,
       },
       messages: {
-        layout: 'minimal',
+        layout: "minimal",
       },
     },
-    theme: {
-      panelBorderRadius: '0',
-      panelShadow: 'none',
-    },
+    theme: PANEL_EDGELESS_THEME,
   },
 };
 
@@ -93,8 +111,8 @@ export const PRESET_MINIMAL: WidgetPreset = {
  * No launcher, content-max-width constrained, minimal header.
  */
 export const PRESET_FULLSCREEN: WidgetPreset = {
-  id: 'fullscreen',
-  label: 'Fullscreen Assistant',
+  id: "fullscreen",
+  label: "Fullscreen Assistant",
   config: {
     launcher: {
       enabled: false,
@@ -102,15 +120,12 @@ export const PRESET_FULLSCREEN: WidgetPreset = {
     },
     layout: {
       header: {
-        layout: 'minimal',
+        layout: "minimal",
         showCloseButton: false,
       },
-      contentMaxWidth: '72ch',
-    },
-    theme: {
-      panelBorderRadius: '0',
-      panelShadow: 'none',
+      contentMaxWidth: "72ch",
     },
+    theme: PANEL_EDGELESS_THEME,
   },
 };
 

package/src/runtime/host-layout.test.ts

@@ -0,0 +1,196 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it } from "vitest";
+
+import { createWidgetHostLayout } from "./host-layout";
+
+describe("createWidgetHostLayout docked", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("reserves no dock column when panel is closed (always 0px)", () => {
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const target = document.createElement("div");
+    parent.appendChild(target);
+
+    const layout = createWidgetHostLayout(target, {
+      launcher: {
+        mountMode: "docked",
+        autoExpand: false,
+        dock: { width: "320px" },
+      },
+    });
+
+    const dockSlot = layout.shell?.querySelector<HTMLElement>('[data-persona-dock-role="panel"]');
+    expect(dockSlot).not.toBeNull();
+    expect(dockSlot?.style.minWidth).toBe("0px");
+    expect(dockSlot?.style.overflow).toBe("hidden");
+
+    layout.syncWidgetState({ open: true, launcherEnabled: true });
+    expect(dockSlot?.style.width).toBe("320px");
+    expect(dockSlot?.style.overflow).toBe("visible");
+
+    layout.syncWidgetState({ open: false, launcherEnabled: true });
+    expect(dockSlot?.style.minWidth).toBe("0px");
+    expect(dockSlot?.style.overflow).toBe("hidden");
+
+    layout.destroy();
+  });
+
+  it("disables dock width transition when dock.animate is false", () => {
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const target = document.createElement("div");
+    parent.appendChild(target);
+
+    const layout = createWidgetHostLayout(target, {
+      launcher: {
+        mountMode: "docked",
+        autoExpand: false,
+        dock: { width: "320px", animate: false },
+      },
+    });
+
+    const dockSlot = layout.shell?.querySelector<HTMLElement>('[data-persona-dock-role="panel"]');
+    expect(dockSlot?.style.transition).toBe("none");
+
+    layout.destroy();
+  });
+
+  it("overlay reveal keeps panel width and translates off-screen when closed", () => {
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const target = document.createElement("div");
+    parent.appendChild(target);
+
+    const layout = createWidgetHostLayout(target, {
+      launcher: {
+        mountMode: "docked",
+        autoExpand: false,
+        dock: { width: "320px", reveal: "overlay" },
+      },
+    });
+
+    const shell = layout.shell;
+    const dockSlot = shell?.querySelector<HTMLElement>('[data-persona-dock-role="panel"]');
+    expect(shell?.dataset.personaDockReveal).toBe("overlay");
+    expect(shell?.style.overflow).toBe("hidden");
+    expect(dockSlot?.style.width).toBe("320px");
+    expect(dockSlot?.style.transform).toBe("translateX(100%)");
+
+    layout.syncWidgetState({ open: true, launcherEnabled: true });
+    expect(dockSlot?.style.width).toBe("320px");
+    expect(dockSlot?.style.transform).toBe("translateX(0)");
+
+    layout.destroy();
+  });
+
+  it("overlay reveal uses translateX(-100%) on the left side when closed", () => {
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const target = document.createElement("div");
+    parent.appendChild(target);
+
+    const layout = createWidgetHostLayout(target, {
+      launcher: {
+        mountMode: "docked",
+        autoExpand: false,
+        dock: { width: "300px", side: "left", reveal: "overlay" },
+      },
+    });
+
+    const dockSlot = layout.shell?.querySelector<HTMLElement>('[data-persona-dock-role="panel"]');
+    expect(dockSlot?.style.transform).toBe("translateX(-100%)");
+    expect(dockSlot?.style.left).toBe("0px");
+
+    layout.destroy();
+  });
+
+  it("push reveal translates a track; main column width stays fixed in px", () => {
+    const parent = document.createElement("div");
+    parent.style.width = "800px";
+    document.body.appendChild(parent);
+    const target = document.createElement("div");
+    parent.appendChild(target);
+
+    const dockConfig = {
+      mountMode: "docked" as const,
+      autoExpand: false,
+      dock: { width: "320px", reveal: "push" as const },
+    };
+
+    const layout = createWidgetHostLayout(target, { launcher: dockConfig });
+    const shell = layout.shell!;
+    Object.defineProperty(shell, "clientWidth", { get: () => 800, configurable: true });
+    layout.updateConfig({ launcher: dockConfig });
+
+    const pushTrack = shell.querySelector<HTMLElement>('[data-persona-dock-role="push-track"]');
+    const contentSlot = shell.querySelector<HTMLElement>('[data-persona-dock-role="content"]');
+    expect(pushTrack).not.toBeNull();
+    expect(shell.dataset.personaDockReveal).toBe("push");
+    expect(contentSlot?.style.width).toBe("800px");
+    expect(pushTrack?.style.width).toBe("1120px");
+    expect(pushTrack?.style.transform).toBe("translateX(0)");
+
+    layout.syncWidgetState({ open: true, launcherEnabled: true });
+    expect(pushTrack?.style.transform).toBe("translateX(-320px)");
+
+    layout.destroy();
+  });
+
+  it("push reveal on the left uses negative translate when closed", () => {
+    const parent = document.createElement("div");
+    parent.style.width = "600px";
+    document.body.appendChild(parent);
+    const target = document.createElement("div");
+    parent.appendChild(target);
+
+    const dockConfig = {
+      mountMode: "docked" as const,
+      autoExpand: false,
+      dock: { width: "200px", side: "left" as const, reveal: "push" as const },
+    };
+
+    const layout = createWidgetHostLayout(target, { launcher: dockConfig });
+    const shell = layout.shell!;
+    Object.defineProperty(shell, "clientWidth", { get: () => 600, configurable: true });
+    layout.updateConfig({ launcher: dockConfig });
+
+    const pushTrack = shell.querySelector<HTMLElement>('[data-persona-dock-role="push-track"]');
+    expect(pushTrack?.style.transform).toBe("translateX(-200px)");
+
+    layout.syncWidgetState({ open: true, launcherEnabled: true });
+    expect(pushTrack?.style.transform).toBe("translateX(0)");
+
+    layout.destroy();
+  });
+
+  it("emerge reveal keeps host width at dock.width while the column animates like resize", () => {
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const target = document.createElement("div");
+    parent.appendChild(target);
+
+    const layout = createWidgetHostLayout(target, {
+      launcher: {
+        mountMode: "docked",
+        autoExpand: false,
+        dock: { width: "320px", reveal: "emerge" },
+      },
+    });
+
+    const host = layout.host;
+    const dockSlot = layout.shell?.querySelector<HTMLElement>('[data-persona-dock-role="panel"]');
+    expect(layout.shell?.dataset.personaDockReveal).toBe("emerge");
+    expect(dockSlot?.style.minWidth).toBe("0px");
+    expect(host.style.width).toBe("320px");
+
+    layout.syncWidgetState({ open: true, launcherEnabled: true });
+    expect(dockSlot?.style.minWidth).toBe("320px");
+    expect(host.style.width).toBe("320px");
+
+    layout.destroy();
+  });
+});