@runtypelabs/persona 4.23.2 → 4.24.0

package/src/utils/tokens.ts

@@ -1,3 +1,4 @@
+import { CIRCLE_LAUNCHER_TOKENS } from "./launcher-variant";
 import type {
   DeepPartial,
   PersonaTheme,
@@ -9,8 +10,8 @@ import type {
   SemanticTokens,
 } from '../types/theme';
 import {
-  DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH,
   DEFAULT_FLOATING_LAUNCHER_WIDTH,
+  resolveDefaultsVersion,
 } from '../defaults';
 
 // Detached/docked panel defaults, shared by the panel token defaults, the alias
@@ -25,7 +26,7 @@ const spacing = (() => {
   return s as Record<0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64, string>;
 })();
 
-export const DEFAULT_PALETTE = {
+const DEFAULT_PALETTE_BASE = {
   colors: {
     primary: {
       50: '#ffffff',
@@ -209,7 +210,7 @@ export const DEFAULT_PALETTE = {
   },
 };
 
-export const DEFAULT_SEMANTIC: SemanticTokens = {
+const DEFAULT_SEMANTIC_BASE: SemanticTokens = {
   colors: {
     primary: 'palette.colors.primary.500',
     secondary: 'palette.colors.secondary.500',
@@ -257,7 +258,7 @@ export const DEFAULT_SEMANTIC: SemanticTokens = {
   },
 };
 
-export const DEFAULT_COMPONENTS: ComponentTokens = {
+const DEFAULT_COMPONENTS_BASE: ComponentTokens = {
   button: {
     primary: {
       // Primary Actions role: solid primary
@@ -305,13 +306,31 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
   },
   panel: {
     width: DEFAULT_FLOATING_LAUNCHER_WIDTH,
-    maxWidth: DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH,
-    height: '600px',
-    maxHeight: 'calc(100vh - 80px)',
+    // Matches the existing floating runtime geometry. `maxWidth` and
+    // `maxHeight` intentionally do not impose a second cap; ui.ts applies
+    // the responsive width and heightOffset rules for this mode.
+    maxWidth: 'none',
+    height: 'min(640px, max(200px, calc(100vh - 64px)))',
+    maxHeight: 'none',
     borderRadius: 'palette.radius.xl',
     shadow: 'palette.shadows.xl',
     inset: DEFAULT_PANEL_INSET,
     canvasBackground: DEFAULT_PANEL_CANVAS_BACKGROUND,
+    modes: {
+      floating: {
+        border: '1px solid var(--persona-border)',
+        shadow: 'palette.shadows.xl',
+        borderRadius: 'palette.radius.xl',
+      },
+      inline: {
+        border: '1px solid var(--persona-border)',
+        shadow: 'none',
+        borderRadius: 'palette.radius.xl',
+      },
+      docked: { border: 'none', shadow: 'none', borderRadius: 'palette.radius.xl' },
+      sidebar: { border: 'none', borderRadius: '0' },
+      mobile: { border: 'none', shadow: 'none', borderRadius: '0' },
+    },
   },
   header: {
     // Header role: solid primary. Border, subtitle, and action icons stay
@@ -319,11 +338,13 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
     background: 'palette.colors.primary.500',
     foreground: 'palette.colors.primary.50',
     borderRadius: 'palette.radius.xl palette.radius.xl 0 0',
-    padding: 'semantic.spacing.md',
+    padding: '20px 24px',
+    minimalPadding: '16px 24px',
     iconBackground: 'palette.colors.primary.600',
     iconForeground: 'palette.colors.primary.50',
   },
   message: {
+    gap: '12px',
     user: {
       // User Messages role: solid primary
       background: 'palette.colors.primary.500',
@@ -532,6 +553,110 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
   },
 };
 
+/** Shared defaults with a small opt-in V5 overlay. */
+const DEFAULT_PALETTE_GRAY_V4 = DEFAULT_PALETTE_BASE.colors.gray;
+const DEFAULT_PALETTE_GRAY_V5 = {
+  50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4',
+  400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040',
+  800: '#262626', 900: '#171717', 950: '#0a0a0a',
+};
+
+export const DEFAULT_PALETTE_V4 = {
+  ...DEFAULT_PALETTE_BASE,
+  colors: { ...DEFAULT_PALETTE_BASE.colors, gray: DEFAULT_PALETTE_GRAY_V4 },
+};
+export const DEFAULT_PALETTE_V5 = {
+  ...DEFAULT_PALETTE_BASE,
+  colors: { ...DEFAULT_PALETTE_BASE.colors, gray: DEFAULT_PALETTE_GRAY_V5 },
+  radius: { none: '0px', sm: '4px', md: '8px', lg: '12px', xl: '16px', '2xl': '24px', full: '9999px' },
+};
+export const DEFAULT_PALETTE = DEFAULT_PALETTE_V4;
+
+export const DEFAULT_SEMANTIC_V4 = DEFAULT_SEMANTIC_BASE;
+export const DEFAULT_SEMANTIC_V5: SemanticTokens = {
+  ...DEFAULT_SEMANTIC_BASE,
+  colors: {
+    ...DEFAULT_SEMANTIC_BASE.colors,
+    surface: '#ffffff', background: '#ffffff', container: 'semantic.colors.surface',
+    textInverse: '#ffffff',
+  },
+  typography: { ...DEFAULT_SEMANTIC_BASE.typography, fontSize: '14px', lineHeight: '1.5' },
+};
+export const DEFAULT_SEMANTIC = DEFAULT_SEMANTIC_V4;
+
+export const DEFAULT_COMPONENTS_V4 = DEFAULT_COMPONENTS_BASE;
+export const DEFAULT_COMPONENTS_V5: ComponentTokens = {
+  ...DEFAULT_COMPONENTS_BASE,
+  launcher: CIRCLE_LAUNCHER_TOKENS,
+  activity: { rowHeight: "32px", labelSize: "13px", iconSize: "16px", indent: "0px", groupIndent: "0px", groupGap: "0px", groupPadding: "0px", transcriptGap: "0px", responseGap: "12px", bodyPadding: "4px 0", bodySize: "13px", bodyLineHeight: "1.5", bodyFontWeight: "400", sectionGap: "8px", bodySurface: "transparent" },
+  toolBubble: { shadow: "none" },
+  reasoningBubble: { shadow: "none" },
+  input: { ...DEFAULT_COMPONENTS_BASE.input, borderRadius: 'palette.radius.full' },
+  introCard: { ...DEFAULT_COMPONENTS_BASE.introCard, title: { fontSize: '22px', fontWeight: '500' } },
+  suggestion: {
+    chip: { ...DEFAULT_COMPONENTS_BASE.suggestion!.chip, fontWeight: '400' },
+    card: { ...DEFAULT_COMPONENTS_BASE.suggestion!.card, fontWeight: '400' },
+    list: { ...DEFAULT_COMPONENTS_BASE.suggestion!.list, fontWeight: '400' },
+  },
+  panel: {
+    ...DEFAULT_COMPONENTS_BASE.panel,
+    width: 'min(400px, calc(100vw - 24px))',
+    height: 'min(704px, calc(100dvh - 104px))',
+    borderRadius: 'palette.radius.xl',
+  },
+  header: {
+    ...DEFAULT_COMPONENTS_BASE.header,
+    background: 'semantic.colors.container', foreground: 'semantic.colors.text',
+    padding: '8px 8px 8px 16px', minimalPadding: '8px 8px 8px 16px',
+    minHeight: '48px', borderBottom: 'none',
+    iconBackground: 'transparent', iconForeground: 'semantic.colors.text', iconScale: '1',
+    controlSize: '28px', controlIconSize: '18px', controlStrokeWidth: '1.5',
+    actionIconForeground: 'semantic.colors.textMuted',
+    controlBorderRadius: '8px',
+    controlHoverBackground: 'color-mix(in srgb, var(--persona-text) 8%, transparent)',
+    controlHoverForeground: 'semantic.colors.text',
+    controlFocusOutline: '2px solid color-mix(in srgb, var(--persona-text) 50%, transparent)',
+    title: { fontSize: '14px', fontWeight: '500', lineHeight: '1.5' },
+  },
+  message: {
+    ...DEFAULT_COMPONENTS_BASE.message,
+    gap: '20px', fullscreenGap: '28px', topFadeHeight: '18px',
+    user: {
+      ...DEFAULT_COMPONENTS_BASE.message.user,
+      background: 'palette.colors.gray.100', text: 'semantic.colors.text',
+      borderRadius: 'palette.radius.xl', shadow: 'none', padding: '8px 14px',
+      fontSize: '14px', lineHeight: '1.5',
+    },
+    assistant: {
+      ...DEFAULT_COMPONENTS_BASE.message.assistant,
+      background: 'transparent', border: 'transparent', borderWidth: '0px',
+      borderRadius: '0px', shadow: 'none', padding: '0px',
+      fontSize: '14px', lineHeight: '1.55',
+    },
+  },
+  composer: {
+    ...DEFAULT_COMPONENTS_BASE.composer,
+    padding: '8px', fontSize: '15px', lineHeight: '1.5', controlSize: '32px', controlIconSize: '20px',
+    sendIconSize: '18px', sendButtonRadius: '9999px', footerBorder: 'none',
+    overlayBand: 'linear-gradient(to bottom, transparent, var(--persona-container) 24px)',
+    focusBorderColor: 'color-mix(in srgb, var(--persona-text) 28%, var(--persona-border))',
+    focusRing: '1px solid color-mix(in srgb, var(--persona-text) 12%, transparent)',
+  },
+};
+export const DEFAULT_COMPONENTS = DEFAULT_COMPONENTS_V4;
+
+export type ThemeDefaultsVersion = 'v4' | 'v5';
+
+export const resolveThemeDefaultsVersion = (future?: { v5Defaults?: boolean }): ThemeDefaultsVersion =>
+  resolveDefaultsVersion({ future });
+
+export const resolveThemeDefaults = (future?: { v5Defaults?: boolean }) => {
+  const version = resolveThemeDefaultsVersion(future);
+  return version === 'v5'
+    ? { palette: DEFAULT_PALETTE_V5, semantic: DEFAULT_SEMANTIC_V5, components: DEFAULT_COMPONENTS_V5 }
+    : { palette: DEFAULT_PALETTE_V4, semantic: DEFAULT_SEMANTIC_V4, components: DEFAULT_COMPONENTS_V4 };
+};
+
 export function resolveTokenValue(theme: PersonaTheme, path: string): string | undefined {
   if (
     !path.startsWith('palette.') &&
@@ -673,10 +798,11 @@ export function createTheme(
   userConfig?: DeepPartial<PersonaTheme>,
   options: CreateThemeOptions = {}
 ): PersonaTheme {
+  const defaults = resolveThemeDefaults(options.future);
   const baseTheme: PersonaTheme = {
-    palette: DEFAULT_PALETTE as PersonaTheme['palette'],
-    semantic: DEFAULT_SEMANTIC as PersonaTheme['semantic'],
-    components: DEFAULT_COMPONENTS as PersonaTheme['components'],
+    palette: defaults.palette as PersonaTheme['palette'],
+    semantic: defaults.semantic as PersonaTheme['semantic'],
+    components: defaults.components as PersonaTheme['components'],
   };
 
   let theme: PersonaTheme = {
@@ -738,6 +864,30 @@ export function createTheme(
     ),
   } as PersonaTheme;
 
+  // A shared header padding is also the minimal-layout override unless the
+  // host supplies the more specific token. Both keys remain emitted CSS vars,
+  // so live updates and scheme changes restyle existing header DOM in place.
+  const activity = userConfig?.components?.activity;
+  for (const kind of ['toolBubble', 'reasoningBubble'] as const) {
+    for (const field of ['rowHeight', 'labelSize', 'iconSize', 'indent', 'bodySurface'] as const) {
+      if (activity?.[field] !== undefined) theme.components[kind][field] = activity[field];
+    }
+  }
+  const legacySurface = userConfig?.components?.collapsibleWidget?.surface;
+  if (legacySurface !== undefined && activity?.bodySurface === undefined) {
+    theme.components.activity = { ...theme.components.activity, bodySurface: legacySurface };
+  }
+
+  const suppliedHeader = userConfig?.components?.header;
+  if (suppliedHeader?.padding !== undefined && suppliedHeader.minimalPadding === undefined) {
+    theme.components.header.minimalPadding = theme.components.header.padding;
+  }
+
+  const suppliedMessage = userConfig?.components?.message;
+  if (suppliedMessage?.gap !== undefined && suppliedMessage.fullscreenGap === undefined) {
+    theme.components.message.fullscreenGap = theme.components.message.gap;
+  }
+
   if (options.validate !== false) {
     const validation = validateTheme(theme);
     if (!validation.valid) {
@@ -1224,12 +1374,21 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
   ]);
 
   // Collapsible widget chrome (tool/reasoning/approval bubbles)
-  cssVars['--cw-container'] =
-    cssVars['--persona-components-collapsibleWidget-container'] ?? cssVars['--persona-surface'];
-  cssVars['--cw-surface'] =
-    cssVars['--persona-components-collapsibleWidget-surface'] ?? cssVars['--persona-surface'];
-  cssVars['--cw-border'] =
-    cssVars['--persona-components-collapsibleWidget-border'] ?? cssVars['--persona-border'];
+  const collapsibleWidgetAliases = [
+    ['container', 'surface'],
+    ['surface', 'surface'],
+    ['border', 'border'],
+  ] as const;
+  for (const [name, semanticFallback] of collapsibleWidgetAliases) {
+    const value =
+      cssVars[`--persona-components-collapsibleWidget-${name}`] ??
+      cssVars[`--persona-${semanticFallback}`];
+    if (value !== undefined) {
+      cssVars[`--persona-cw-${name}`] = value;
+      // Kept for custom styles that adopted the original unprefixed aliases.
+      cssVars[`--cw-${name}`] = value;
+    }
+  }
 
   emitAliases(cssVars, [
     ['message-border', 'components-message-border', 'border'],
@@ -1246,6 +1405,7 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     ['message-user-font-family', 'components-message-user-fontFamily'],
     ['message-user-line-height', 'components-message-user-lineHeight'],
     ['message-assistant-padding', 'components-message-assistant-padding'],
+    ['message-assistant-border-width', 'components-message-assistant-borderWidth'],
     ['message-assistant-max-width', 'components-message-assistant-maxWidth'],
     ['message-assistant-font-size', 'components-message-assistant-fontSize'],
     ['message-assistant-font-family', 'components-message-assistant-fontFamily'],

package/src/welcome.test.ts

@@ -274,3 +274,26 @@ describe("resolveConversationState", () => {
     expect(resolveConversationState([])).toBe("empty");
   });
 });
+
+describe("V5 welcome layout defaults", () => {
+  it("centers the empty greeting with concise copy and dismisses every variant", () => {
+    for (const variant of ["card", "hero", "none"] as const) {
+      const resolved = resolveWelcomeConfig(config({ future: { v5Defaults: true }, welcome: { variant } }));
+      expect(resolved).toMatchObject({ layout: "centered", align: "center", title: "What can I help with?", subtitle: "", dismiss: "on-first-message", anchor: "bottom" });
+      expect(isWelcomeVisible(resolved, [userMessage])).toBe(false);
+    }
+  });
+
+  it("keeps explicit fields and legacy copy above V5 defaults", () => {
+    const resolved = resolveWelcomeConfig(config({ future: { v5Defaults: true }, copy: { welcomeTitle: "Legacy", welcomeSubtitle: "Scope" }, welcome: { layout: "top", variant: "hero", dismiss: "never", anchor: "bottom", align: "start" } }), true);
+    expect(resolved).toMatchObject({ title: "Legacy", subtitle: "Scope", layout: "top", dismiss: "never", anchor: "bottom", align: "start" });
+  });
+
+  it("makes centered fullscreen geometry available in either default mode", () => {
+    for (const v5Defaults of [false, true]) {
+      const resolved = resolveWelcomeConfig(config({ future: { v5Defaults }, welcome: { layout: "centered" } }), true);
+      expect(resolved.anchor).toBe("center");
+      expect(resolveWelcomeConfig(config({ future: { v5Defaults }, welcome: { layout: "centered", anchor: "bottom" } }), true).anchor).toBe("bottom");
+    }
+  });
+});

package/src/welcome.ts

@@ -55,6 +55,7 @@ export interface ResolvedWelcomeConfig {
    * Optional on the interface, always populated by `resolveWelcomeConfig`:
    * a plugin literal built against an older minor must still type-check.
    */
+  layout?: "top" | "centered";
   anchor?: AgentWidgetWelcomeAnchor;
   /** Percentage string; validated, falls back to "44%". */
   anchorComposerTop?: string;
@@ -80,10 +81,14 @@ const warnOnce = (config: AgentWidgetConfig | undefined, messages: string[]) =>
  * `copy` alias, else the default above.
  */
 export const resolveWelcomeConfig = (
-  config?: AgentWidgetConfig
+  config?: AgentWidgetConfig,
+  fullscreen = config?.launcher?.fullHeight === true &&
+    !config.launcher.sidebarMode && config.launcher.mountMode !== "docked"
 ): ResolvedWelcomeConfig => {
   const welcome = config?.welcome;
   const copy = config?.copy;
+  const v5 = config?.future?.v5Defaults === true;
+  const layout = welcome?.layout ?? (v5 ? "centered" : "top");
 
   const variant: AgentWidgetWelcomeVariant = isSet(welcome, "variant")
     ? welcome!.variant!
@@ -91,13 +96,14 @@ export const resolveWelcomeConfig = (
       ? "none"
       : "card";
 
-  // Hero IS the greeting: `dismiss` is forced and `message` is suppressed.
+  // Legacy V4 heroes force dismissal; opting into layout makes it configurable.
+  // A hero remains the greeting, so its separate message is always suppressed.
   const dismiss: AgentWidgetWelcomeDismiss =
-    variant === "hero"
+    variant === "hero" && !v5 && welcome?.layout === undefined
       ? "on-first-message"
       : isSet(welcome, "dismiss")
         ? welcome!.dismiss!
-        : "never";
+        : v5 || variant === "hero" ? "on-first-message" : "never";
 
   const conflicts: string[] = [];
   if (isSet(welcome, "title") && isSet(copy, "welcomeTitle")) {
@@ -120,14 +126,14 @@ export const resolveWelcomeConfig = (
       'welcome.message is ignored when welcome.variant is "hero": the hero is the greeting.'
     );
   }
-  if (variant === "hero" && isSet(welcome, "dismiss") && welcome!.dismiss !== "on-first-message") {
+  if (!v5 && welcome?.layout === undefined && variant === "hero" && isSet(welcome, "dismiss") && welcome!.dismiss !== "on-first-message") {
     conflicts.push(
       'welcome.dismiss is pinned to "on-first-message" when welcome.variant is "hero".'
     );
   }
 
   const anchor: AgentWidgetWelcomeAnchor =
-    welcome?.anchor === "center" ? "center" : "bottom";
+    welcome?.anchor ?? (layout === "centered" && fullscreen ? "center" : "bottom");
   const anchorTopValid = parseAnchorFraction(welcome?.anchorComposerTop) !== null;
   if (isSet(welcome, "anchorComposerTop") && !anchorTopValid) {
     conflicts.push(
@@ -147,16 +153,16 @@ export const resolveWelcomeConfig = (
   return {
     title: isSet(welcome, "title")
       ? welcome!.title!
-      : copy?.welcomeTitle ?? DEFAULT_WELCOME_TITLE,
+      : copy?.welcomeTitle ?? (v5 ? "What can I help with?" : DEFAULT_WELCOME_TITLE),
     kicker: welcome?.kicker ?? "",
     subtitle: isSet(welcome, "subtitle")
       ? welcome!.subtitle!
-      : copy?.welcomeSubtitle ?? DEFAULT_WELCOME_SUBTITLE,
+      : copy?.welcomeSubtitle ?? (v5 ? "" : DEFAULT_WELCOME_SUBTITLE),
     icon: welcome?.icon,
     align:
       welcome?.align === "start" || welcome?.align === "center"
         ? welcome.align
-        : undefined,
+        : layout === "centered" ? "center" : undefined,
     iconPlacement:
       welcome?.icon && typeof welcome.icon !== "function" &&
       welcome.icon.placement === "inline"
@@ -165,6 +171,7 @@ export const resolveWelcomeConfig = (
     variant,
     dismiss,
     message: variant === "hero" ? undefined : welcome?.message,
+    layout,
     anchor,
     anchorComposerTop: anchorTopValid
       ? welcome!.anchorComposerTop!

package/dist/approval-ui-K7R5Q5OC.js

@@ -1 +0,0 @@
-import{a as E,g as P}from"./chunk-NQLDCJAP.js";import{a as x}from"./chunk-7NQ4ZTHF.js";import{b as q,c as $}from"./chunk-Q735PSZL.js";import{a}from"./chunk-76IELU7F.js";var R=()=>{},z=t=>{R=t.webMcpToolTitle},I=t=>R(t);import{ChevronDown as Y,ChevronUp as ee,ShieldAlert as te,ShieldCheck as K,ShieldX as _}from"lucide";var k=new Map,B=t=>{let o=(t.startsWith(E)?t.slice(E.length):t).replace(/([a-z0-9])([A-Z])/g,"$1 $2").split(/[_\-\s.]+/).filter(Boolean);if(o.length===0)return t;let e=o.join(" ").toLowerCase();return e.charAt(0).toUpperCase()+e.slice(1)},F=t=>t?.approval!==!1?t?.approval:void 0,X=(t,r)=>{let o=F(r)?.detailsDisplay??"collapsed";return k.get(t)??o==="expanded"},j=(t,r,o)=>{let e=F(o);t.setAttribute("aria-expanded",r?"true":"false");let u=t.querySelector("[data-approval-details-label]");u&&(u.textContent=r?e?.hideDetailsLabel??"Hide details":e?.showDetailsLabel??"Show details");let i=t.querySelector("[data-approval-details-chevron]");if(i){i.innerHTML="";let g=x(r?ee:Y,14,"currentColor",2);g&&i.appendChild(g)}},V=(t,r,o)=>{let e=r.querySelector('button[data-bubble-type="approval"]'),u=r.querySelector("[data-approval-details]");if(!e||!u)return;let i=X(t,o);j(e,i,o),u.style.display=i?"":"none"};var Z=(t,r)=>{let o=t.approval,e=r?.approval!==!1?r?.approval:void 0,u=o?.status==="pending",i=a("div",["persona-approval-bubble","persona-w-full","persona-rounded-2xl","persona-border","persona-shadow-sm","persona-overflow-hidden"].join(" "));if(i.id=`bubble-${t.id}`,i.setAttribute("data-message-id",t.id),i.style.backgroundColor=e?.backgroundColor??"var(--persona-approval-bg, #fefce8)",i.style.borderColor=e?.borderColor??"var(--persona-approval-border, #fef08a)",i.style.boxShadow=e?.shadow!==void 0?e.shadow.trim()===""?"none":e.shadow:"var(--persona-approval-shadow, 0 5px 15px rgba(15, 23, 42, 0.08))",!o)return i;let g=a("div","persona-flex persona-items-start persona-gap-3 persona-px-4 persona-py-3"),l=a("div","persona-flex-shrink-0 persona-mt-0.5");l.setAttribute("data-approval-icon","true");let v=o.status==="denied"?_:o.status==="timeout"?te:K,C=o.status==="approved"?"var(--persona-feedback-success, #16a34a)":o.status==="denied"?"var(--persona-feedback-error, #dc2626)":o.status==="timeout"?"var(--persona-feedback-warning, #ca8a04)":e?.titleColor??"currentColor",A=x(v,20,C,2);A&&l.appendChild(A);let m=a("div","persona-flex-1 persona-min-w-0"),f=a("div","persona-flex persona-items-center persona-gap-2"),w=a("span","persona-text-sm persona-font-medium persona-text-persona-primary");if(e?.titleColor&&(w.style.color=e.titleColor),w.textContent=e?.title??"Approval Required",f.appendChild(w),!u){let s=a("span","persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded-full persona-text-xs persona-font-medium");s.setAttribute("data-approval-status",o.status),o.status==="approved"?(s.style.backgroundColor="var(--persona-palette-colors-success-100, #dcfce7)",s.style.color="var(--persona-palette-colors-success-700, #15803d)",s.textContent="Approved"):o.status==="denied"?(s.style.backgroundColor="var(--persona-palette-colors-error-100, #fee2e2)",s.style.color="var(--persona-palette-colors-error-700, #b91c1c)",s.textContent="Denied"):o.status==="timeout"&&(s.style.backgroundColor="var(--persona-palette-colors-warning-100, #fef3c7)",s.style.color="var(--persona-palette-colors-warning-700, #b45309)",s.textContent="Timeout"),f.appendChild(s)}m.appendChild(f);let y=o.toolType==="webmcp"||o.toolName.startsWith(E)?I(o.toolName):void 0,N=e?.formatDescription?.({toolName:o.toolName,toolType:o.toolType,description:o.description,parameters:o.parameters,...y?{displayTitle:y}:{},...o.reason?{reason:o.reason}:{}}),D=!o.toolName,H=N||(D?o.description:`The assistant wants to use \u201C${y??B(o.toolName)}\u201D.`),h=a("p","persona-text-sm persona-mt-0.5 persona-text-persona-muted");if(h.setAttribute("data-approval-summary","true"),e?.descriptionColor&&(h.style.color=e.descriptionColor),h.textContent=H,m.appendChild(h),o.reason){let s=a("p","persona-text-sm persona-mt-1 persona-text-persona-muted");s.setAttribute("data-approval-reason","true"),e?.reasonColor?s.style.color=e.reasonColor:e?.descriptionColor&&(s.style.color=e.descriptionColor);let n=a("span","persona-font-medium");n.textContent=`${e?.reasonLabel??"Agent's stated reason:"} `,s.appendChild(n),s.appendChild(document.createTextNode(o.reason)),m.appendChild(s)}let W=e?.detailsDisplay??"collapsed",M=!!o.description&&!D,S=M||!!o.parameters;if(W!=="hidden"&&S){let s=X(t.id,r),n=a("button","persona-inline-flex persona-items-center persona-gap-1 persona-mt-1 persona-p-0 persona-border-none persona-bg-transparent persona-text-xs persona-font-medium persona-cursor-pointer persona-text-persona-muted");n.type="button",n.setAttribute("data-expand-header","true"),n.setAttribute("data-bubble-type","approval"),e?.descriptionColor&&(n.style.color=e.descriptionColor);let p=a("span");p.setAttribute("data-approval-details-label","true");let b=a("span","persona-inline-flex persona-items-center");b.setAttribute("data-approval-details-chevron","true"),n.append(p,b),j(n,s,r),m.appendChild(n);let c=a("div");if(c.setAttribute("data-approval-details","true"),c.style.display=s?"":"none",M){let d=a("p","persona-text-sm persona-mt-1 persona-text-persona-muted");e?.descriptionColor&&(d.style.color=e.descriptionColor),d.textContent=o.description,c.appendChild(d)}if(o.parameters){let d=a("pre","persona-mt-2 persona-text-xs persona-p-2 persona-rounded persona-overflow-x-auto persona-max-h-32 persona-bg-persona-container persona-text-persona-primary");e?.parameterBackgroundColor&&(d.style.backgroundColor=e.parameterBackgroundColor),e?.parameterTextColor&&(d.style.color=e.parameterTextColor),d.style.fontSize="0.75rem",d.style.lineHeight="1rem",d.textContent=P(o.parameters),c.appendChild(d)}m.appendChild(c)}if(u){let s=a("div","persona-flex persona-gap-2 persona-mt-2");s.setAttribute("data-approval-buttons","true");let n=a("button","persona-inline-flex persona-items-center persona-px-3 persona-py-1.5 persona-rounded-md persona-text-xs persona-font-medium persona-border-none persona-cursor-pointer");n.type="button",n.style.backgroundColor=e?.approveButtonColor??"var(--persona-approval-approve-bg, #22c55e)",n.style.color=e?.approveButtonTextColor??"#ffffff",n.setAttribute("data-approval-action","approve");let p=x(K,14,e?.approveButtonTextColor??"#ffffff",2);p&&(p.style.marginRight="4px",n.appendChild(p));let b=document.createTextNode(e?.approveLabel??"Approve");n.appendChild(b);let c=a("button","persona-inline-flex persona-items-center persona-px-3 persona-py-1.5 persona-rounded-md persona-text-xs persona-font-medium persona-cursor-pointer");c.type="button",c.style.backgroundColor=e?.denyButtonColor??"transparent",c.style.color=e?.denyButtonTextColor??"var(--persona-feedback-error, #dc2626)",c.style.border=`1px solid ${e?.denyButtonTextColor?e.denyButtonTextColor:"var(--persona-palette-colors-error-200, #fca5a5)"}`,c.setAttribute("data-approval-action","deny");let d=x(_,14,e?.denyButtonTextColor??"var(--persona-feedback-error, #dc2626)",2);d&&(d.style.marginRight="4px",c.appendChild(d));let L=document.createTextNode(e?.denyLabel??"Deny");c.appendChild(L),s.append(n,c),m.appendChild(s)}return g.append(l,m),i.appendChild(g),i};import{Ban as oe,ChevronDown as G,ShieldCheck as ne}from"lucide";var re=()=>({keyHandlers:new Map,popovers:new Map,pendingOrder:[],latestPendingApprovalId:null}),J=(t,r)=>{let o=t.keyHandlers.get(r);o&&(document.removeEventListener("keydown",o),t.keyHandlers.delete(r));let e=t.popovers.get(r);e&&(e.destroy(),t.popovers.delete(r))},T=(t,r)=>{J(t,r);let o=t.pendingOrder.indexOf(r);o!==-1&&t.pendingOrder.splice(o,1),t.latestPendingApprovalId===r&&(t.latestPendingApprovalId=t.pendingOrder.length?t.pendingOrder[t.pendingOrder.length-1]:null)},ae=t=>t?.approval!==!1?t?.approval:void 0,se=(t,r)=>{let o=r?.detailsDisplay??"collapsed";return k.get(t)??o==="expanded"},U=t=>{let r=a("span","persona-approval-kbd");return r.textContent=t,r},pe=(t,r)=>{let o=a("span","persona-approval-title");r?.titleColor&&(o.style.color=r.titleColor);let u=t.toolType==="webmcp"||t.toolName.startsWith(E)?I(t.toolName):void 0,i=r?.formatDescription?.({toolName:t.toolName,toolType:t.toolType,description:t.description??"",parameters:t.parameters,...u?{displayTitle:u}:{},...t.reason?{reason:t.reason}:{}});if(i)return o.textContent=i,o;let g=u??B(t.toolName),l=t.toolType&&t.toolType!=="webmcp"?t.toolType:null;o.append("The assistant wants to use ");let v=document.createElement("strong");if(v.textContent=g,o.appendChild(v),l){o.append(" from ");let C=document.createElement("strong");C.textContent=l,o.appendChild(C)}return o},le=t=>{let r=a("div","persona-approval-resolved"),o=x(oe,15,"currentColor",2);o&&r.appendChild(o);let e=a("span","persona-approval-resolved-name");return e.textContent=t.toolName?B(t.toolName):"Tool",r.append(e,document.createTextNode(t.status==="timeout"?" timed out":" denied")),r},ie=(t,r,o,e,u,i,g)=>{let l=a("div","persona-approval-card persona-shadow-sm");l.id=`bubble-${r.id}`,l.setAttribute("data-message-id",r.id),l.setAttribute("data-bubble-type","approval"),e?.backgroundColor&&(l.style.background=e.backgroundColor),e?.borderColor&&(l.style.borderColor=e.borderColor),e?.shadow!==void 0&&(l.style.boxShadow=e.shadow.trim()===""?"none":e.shadow);let v=e?.detailsDisplay??"collapsed",C=!!o.description&&v!=="hidden",A=o.parameters!=null&&v!=="hidden",m=C||A,f=m&&se(r.id,e),w=e?.showDetailsLabel??"Show details",O=e?.hideDetailsLabel??"Hide details",y=a("button","persona-approval-head");y.type="button",m?(y.setAttribute("data-action","toggle-params"),y.setAttribute("aria-expanded",f?"true":"false"),y.setAttribute("aria-label",f?O:w)):y.setAttribute("data-static","true");let N=a("span","persona-approval-logo"),D=x(ne,16,"currentColor",2);D&&N.appendChild(D),y.appendChild(N);let H=pe(o,e);if(m){let n=a("span","persona-approval-toggle");n.setAttribute("aria-hidden","true");let p=x(G,14,"currentColor",2);p&&n.appendChild(p),H.append(" "),H.appendChild(n)}y.appendChild(H),l.appendChild(y);let h=a("div","persona-approval-body");if(m){let n=a("div","persona-approval-details");if(n.setAttribute("data-role","params"),n.hidden=!f,C){let p=a("p","persona-approval-desc");e?.descriptionColor&&(p.style.color=e.descriptionColor),p.textContent=o.description,n.appendChild(p)}if(A){let p=a("pre","persona-approval-params");e?.parameterBackgroundColor&&(p.style.background=e.parameterBackgroundColor),e?.parameterTextColor&&(p.style.color=e.parameterTextColor),p.textContent=P(o.parameters),n.appendChild(p)}h.appendChild(n)}if(o.reason){let n=a("p","persona-approval-reason");e?.reasonColor?n.style.color=e.reasonColor:e?.descriptionColor&&(n.style.color=e.descriptionColor);let p=a("span","persona-approval-reason-label");p.textContent=`${e?.reasonLabel??"Agent's stated reason:"} `,n.append(p,document.createTextNode(o.reason)),h.appendChild(n)}let W=a("div","persona-approval-actions"),M=null,S=n=>{e?.approveButtonColor&&(n.style.background=e.approveButtonColor),e?.approveButtonTextColor&&(n.style.color=e.approveButtonTextColor)},s=a("button","persona-approval-deny");if(s.type="button",s.setAttribute("data-action","deny"),e?.denyButtonColor&&(s.style.background=e.denyButtonColor),e?.denyButtonTextColor&&(s.style.color=e.denyButtonTextColor),s.append(e?.denyLabel??"Deny"),g){let n=a("div","persona-approval-split"),p=a("button","persona-approval-primary");p.type="button",p.setAttribute("data-action","always"),S(p),p.append(e?.approveLabel??"Always allow",U("\u23CE"));let b=a("button","persona-approval-caret");b.type="button",b.setAttribute("data-action","toggle-menu"),b.setAttribute("aria-label","More options"),S(b);let c=x(G,15,"currentColor",2);c&&b.appendChild(c),n.append(p,b),W.append(n,s),s.append(U("Esc"));let d=a("div","persona-approval-menu"),L=a("button","persona-approval-menu-item");L.type="button",L.append("Allow once",U("\u2318\u23CE")),d.appendChild(L),M=q({anchor:n,content:d,placement:"bottom-start",matchAnchorWidth:!0}),t.popovers.set(r.id,M),L.addEventListener("click",()=>{T(t,r.id),u()})}else{let n=a("button","persona-approval-primary persona-approval-primary--solo");n.type="button",n.setAttribute("data-action","allow"),S(n),n.append(e?.approveLabel??"Allow"),W.append(n,s)}return h.appendChild(W),l.appendChild(h),l.addEventListener("click",n=>{let p=n.target instanceof Element?n.target.closest("[data-action]"):null;if(!p)return;let b=p.getAttribute("data-action");if(b==="toggle-params"){let c=l.querySelector('[data-role="params"]');if(c){let d=c.hidden;c.hidden=!d,y.setAttribute("aria-expanded",d?"true":"false"),y.setAttribute("aria-label",d?O:w),k.set(r.id,d)}return}if(b==="toggle-menu"){M?.toggle();return}if(b==="always"){T(t,r.id),u({remember:!0});return}if(b==="allow"){T(t,r.id),u();return}if(b==="deny"){T(t,r.id),i();return}}),l},Q=()=>{let t=re();return{plugin:{id:"persona-built-in-approval",renderApproval:({message:e,approve:u,deny:i,config:g})=>{let l=e?.approval;if(!l)return null;let v=ae(g);if(l.status!=="pending"){if(T(t,e.id),l.status==="approved"){let m=document.createElement("div");return m.style.display="none",m}return le(l)}J(t,e.id);let C=v?.enableAlwaysAllow===!0,A=ie(t,e,l,v,u,i,C);if(C){t.pendingOrder.includes(e.id)||t.pendingOrder.push(e.id),t.latestPendingApprovalId=t.pendingOrder[t.pendingOrder.length-1];let m=f=>{$(f)||e.id===t.latestPendingApprovalId&&(f.key!=="Escape"&&f.key!=="Enter"||(f.preventDefault(),f.stopImmediatePropagation(),T(t,e.id),f.key==="Escape"?i():f.metaKey||f.ctrlKey?u():u({remember:!0})))};t.keyHandlers.set(e.id,m),document.addEventListener("keydown",m)}return A}},teardown:()=>{for(let e of[...t.keyHandlers.keys(),...t.popovers.keys()])T(t,e);t.latestPendingApprovalId=null}}};export{k as approvalDetailsExpansionState,Z as createApprovalBubble,Q as createBuiltInApprovalPlugin,B as humanizeToolName,z as initApprovalUi,V as updateApprovalDetailsUI};