@runtypelabs/persona 4.13.0 → 4.15.0

package/src/utils/theme.test.ts

@@ -137,6 +137,98 @@ describe('theme utils', () => {
     expect(cssVars['--persona-button-radius']).toBe('6px');
   });
 
+  it.each([
+    {
+      role: 'surface',
+      sentinel: '#010203',
+      consumers: [
+        '--persona-components-input-background',
+        '--persona-input-background',
+      ],
+    },
+    {
+      role: 'container',
+      sentinel: '#0a0b0c',
+      consumers: [
+        '--persona-components-message-assistant-background',
+        '--persona-message-assistant-bg',
+      ],
+    },
+    {
+      role: 'textMuted',
+      sentinel: '#0d0e0f',
+      consumers: [
+        '--persona-components-input-placeholder',
+        '--persona-input-placeholder',
+      ],
+    },
+    {
+      role: 'text',
+      sentinel: '#121314',
+      consumers: [
+        '--persona-components-message-assistant-text',
+        '--persona-message-assistant-text',
+      ],
+    },
+    {
+      role: 'border',
+      sentinel: '#232425',
+      consumers: [
+        '--persona-components-message-assistant-border',
+        '--persona-message-assistant-border',
+      ],
+    },
+  ])(
+    'cascades semantic.colors.$role to its default input and assistant consumers',
+    ({ role, sentinel, consumers }) => {
+      const theme = createTheme({
+        semantic: {
+          colors: {
+            [role]: sentinel,
+          },
+        },
+      } as any);
+      const cssVars = themeToCssVariables(theme);
+
+      for (const consumer of consumers) {
+        expect(cssVars[consumer]).toBe(sentinel);
+      }
+    }
+  );
+
+  it('keeps explicit input and assistant component colors above semantic defaults', () => {
+    const theme = createTheme({
+      semantic: {
+        colors: {
+          surface: '#010203',
+          container: '#0a0b0c',
+          text: '#121314',
+          border: '#232425',
+        },
+      },
+      components: {
+        input: {
+          background: '#343536',
+          placeholder: '#3a3b3c',
+        },
+        message: {
+          assistant: {
+            background: '#454647',
+            text: '#565758',
+            border: '#676869',
+          },
+        },
+      },
+    } as any);
+    const cssVars = themeToCssVariables(theme);
+
+    expect(cssVars['--persona-input-background']).toBe('#343536');
+    expect(cssVars['--persona-input-placeholder']).toBe('#3a3b3c');
+    expect(cssVars['--persona-message-assistant-bg']).toBe('#454647');
+    expect(cssVars['--persona-message-assistant-text']).toBe('#565758');
+    expect(cssVars['--persona-message-assistant-border']).toBe('#676869');
+  });
+
   it('maps markdown link and optional heading tokens to consumer CSS vars', () => {
     const theme = createTheme({
       components: {
@@ -301,6 +393,40 @@ describe('theme utils', () => {
     expect(cssVars['--persona-composer-shadow']).toBe('none');
   });
 
+  it('falls back composer spacing/type vars to the utility-class defaults', () => {
+    const cssVars = themeToCssVariables(createTheme());
+
+    expect(cssVars['--persona-composer-padding']).toBe('0.75rem 1rem');
+    expect(cssVars['--persona-composer-gap']).toBe('0.5rem');
+    expect(cssVars['--persona-composer-font-size']).toBe('0.875rem');
+    expect(cssVars['--persona-composer-line-height']).toBe('1.25rem');
+  });
+
+  it('maps composer spacing/type tokens to dedicated CSS variables', () => {
+    const theme = createTheme({
+      components: {
+        composer: {
+          padding: '1rem 1.25rem',
+          gap: '0.75rem',
+          fontSize: '1rem',
+          lineHeight: '1.5rem',
+        },
+      },
+    } as any);
+
+    const cssVars = themeToCssVariables(theme);
+
+    expect(cssVars['--persona-components-composer-padding']).toBe('1rem 1.25rem');
+    expect(cssVars['--persona-components-composer-gap']).toBe('0.75rem');
+    expect(cssVars['--persona-components-composer-fontSize']).toBe('1rem');
+    expect(cssVars['--persona-components-composer-lineHeight']).toBe('1.5rem');
+
+    expect(cssVars['--persona-composer-padding']).toBe('1rem 1.25rem');
+    expect(cssVars['--persona-composer-gap']).toBe('0.75rem');
+    expect(cssVars['--persona-composer-font-size']).toBe('1rem');
+    expect(cssVars['--persona-composer-line-height']).toBe('1.5rem');
+  });
+
   it('maps scroll-to-bottom component tokens to dedicated CSS variables', () => {
     const theme = createTheme({
       components: {
@@ -370,6 +496,51 @@ describe('theme utils', () => {
     expect(cssVars['--persona-intro-card-bg']).toBe('transparent');
   });
 
+  it('resolves semantic suggestion tokens for every variant and state', () => {
+    const theme = createTheme({
+      components: {
+        suggestion: {
+          chip: {
+            background: 'palette.colors.accent.50',
+            hoverBackground: 'palette.colors.accent.100',
+            focusRing: 'semantic.colors.interactive.focus',
+          },
+          card: {
+            borderRadius: 'palette.radius.lg',
+            shadow: 'palette.shadows.md',
+          },
+          list: {
+            minHeight: '48px',
+            disabledOpacity: '0.4',
+          },
+        },
+      },
+    });
+    const cssVars = themeToCssVariables(theme);
+
+    expect(cssVars['--persona-components-suggestion-chip-background']).toBe(
+      '#ecfeff'
+    );
+    expect(
+      cssVars['--persona-components-suggestion-chip-hoverBackground']
+    ).toBe('#cffafe');
+    expect(cssVars['--persona-components-suggestion-chip-focusRing']).toBe(
+      '#0f0f0f'
+    );
+    expect(
+      cssVars['--persona-components-suggestion-card-borderRadius']
+    ).toBe('0.5rem');
+    expect(cssVars['--persona-components-suggestion-card-shadow']).toContain(
+      '0 4px 6px'
+    );
+    expect(cssVars['--persona-components-suggestion-list-minHeight']).toBe(
+      '48px'
+    );
+    expect(
+      cssVars['--persona-components-suggestion-list-disabledOpacity']
+    ).toBe('0.4');
+  });
+
   it('drives --persona-tool-bubble-shadow from the theme token (config.toolCall.shadow is applied inline on the bubble, not the root var)', () => {
     const el = document.createElement('div');
     applyThemeVariables(el, {

package/src/utils/tokens.ts

@@ -269,9 +269,9 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
     },
   },
   input: {
-    // Input role: soft gray
-    background: 'palette.colors.gray.50',
-    placeholder: 'palette.colors.gray.400',
+    // Input role: semantic surface so host light/dark schemes cascade.
+    background: 'semantic.colors.surface',
+    placeholder: 'semantic.colors.textMuted',
     borderRadius: 'palette.radius.lg',
     padding: 'semantic.spacing.md',
     focus: {
@@ -319,11 +319,11 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
       shadow: 'palette.shadows.sm',
     },
     assistant: {
-      // Assistant Messages role: soft gray
-      background: 'palette.colors.gray.50',
-      text: 'palette.colors.gray.900',
+      // Assistant Messages role: semantic neutral container.
+      background: 'semantic.colors.container',
+      text: 'semantic.colors.text',
       borderRadius: 'palette.radius.lg',
-      border: 'palette.colors.gray.200',
+      border: 'semantic.colors.border',
       shadow: 'palette.shadows.sm',
     },
     border: 'semantic.colors.border',
@@ -336,6 +336,60 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
     padding: 'semantic.spacing.lg',
     shadow: 'palette.shadows.none',
   },
+  suggestion: {
+    chip: {
+      background: 'semantic.colors.surface',
+      foreground: 'semantic.colors.text',
+      border: 'semantic.colors.border',
+      borderRadius: 'palette.radius.full',
+      padding: '0.5rem 0.875rem',
+      gap: '0.5rem',
+      minHeight: '36px',
+      fontSize: '0.8125rem',
+      lineHeight: '1.25',
+      iconSize: '16px',
+      hoverBackground: 'palette.colors.gray.100',
+      hoverBorder: 'palette.colors.gray.300',
+      pressedBackground: 'palette.colors.gray.200',
+      focusRing: 'semantic.colors.interactive.focus',
+      disabledOpacity: '0.5',
+    },
+    card: {
+      background: 'semantic.colors.surface',
+      foreground: 'semantic.colors.text',
+      border: 'semantic.colors.border',
+      borderRadius: 'palette.radius.xl',
+      padding: '1rem',
+      shadow: 'palette.shadows.sm',
+      gap: '0.625rem',
+      minHeight: '72px',
+      fontSize: '0.875rem',
+      lineHeight: '1.35',
+      iconSize: '18px',
+      hoverBackground: 'palette.colors.gray.100',
+      hoverBorder: 'palette.colors.gray.300',
+      pressedBackground: 'palette.colors.gray.200',
+      focusRing: 'semantic.colors.interactive.focus',
+      disabledOpacity: '0.5',
+    },
+    list: {
+      background: 'transparent',
+      foreground: 'semantic.colors.text',
+      border: 'semantic.colors.border',
+      borderRadius: 'palette.radius.md',
+      padding: '0.75rem',
+      gap: '0.625rem',
+      minHeight: '44px',
+      fontSize: '0.875rem',
+      lineHeight: '1.35',
+      iconSize: '17px',
+      hoverBackground: 'palette.colors.gray.100',
+      hoverBorder: 'palette.colors.gray.300',
+      pressedBackground: 'palette.colors.gray.200',
+      focusRing: 'semantic.colors.interactive.focus',
+      disabledOpacity: '0.5',
+    },
+  },
   toolBubble: {
     shadow: 'palette.shadows.sm',
   },
@@ -883,6 +937,16 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     cssVars['--persona-components-reasoningBubble-shadow'] ?? '0 5px 15px rgba(15, 23, 42, 0.08)';
   cssVars['--persona-composer-shadow'] =
     cssVars['--persona-components-composer-shadow'] ?? 'none';
+  // Composer spacing/type. Fallbacks reproduce the utility classes the form
+  // used to carry (`px-4 py-3`, `gap-2`, `text-sm`) exactly.
+  cssVars['--persona-composer-padding'] =
+    cssVars['--persona-components-composer-padding'] ?? '0.75rem 1rem';
+  cssVars['--persona-composer-gap'] =
+    cssVars['--persona-components-composer-gap'] ?? '0.5rem';
+  cssVars['--persona-composer-font-size'] =
+    cssVars['--persona-components-composer-fontSize'] ?? '0.875rem';
+  cssVars['--persona-composer-line-height'] =
+    cssVars['--persona-components-composer-lineHeight'] ?? '1.25rem';
 
   cssVars['--persona-md-inline-code-bg'] =
     cssVars['--persona-components-markdown-inlineCode-background'] ?? cssVars['--persona-container'];

package/dist/chunk-MMUPR2JW.js

@@ -1 +0,0 @@
-var zt=(e,t)=>{let n=document.createElement(e);return t&&(n.className=t),n};var Bt=()=>document.createDocumentFragment(),Ft=(e,t={},...n)=>{let o=document.createElement(e);if(t.className&&(o.className=t.className),t.text!==void 0&&(o.textContent=t.text),t.attrs)for(let[s,a]of Object.entries(t.attrs))o.setAttribute(s,a);if(t.style){let s=o.style,a=t.style;for(let c of Object.keys(a)){let l=a[c];l!=null&&(s[c]=l)}}let r=n.filter(s=>s!=null);return r.length>0&&o.append(...r),o},Kt=(...e)=>e.filter(Boolean).join(" ");import{Activity as A,ArrowDown as k,ArrowUp as P,ArrowUpRight as L,Bot as I,ChevronDown as R,ChevronUp as D,ChevronRight as H,ChevronLeft as O,Check as z,Clipboard as B,ClipboardCopy as F,CodeXml as K,Copy as W,File as U,FileCode as j,FileSpreadsheet as $,FileText as q,ImagePlus as V,Loader as X,LoaderCircle as G,Mic as _,Paperclip as Y,RefreshCw as Z,Search as J,Send as Q,ShieldAlert as ee,ShieldCheck as te,ShieldX as ne,Square as oe,ThumbsDown as re,ThumbsUp as ie,Upload as se,Volume2 as ae,X as le,User as ce,Mail as de,Phone as ue,Calendar as me,Clock as pe,Building as ge,MapPin as he,Lock as fe,Key as we,CreditCard as ye,AtSign as be,Hash as ve,Globe as xe,Link as Ce,CircleCheck as Se,CircleX as Ee,TriangleAlert as Te,Info as Me,Ban as Ne,Shield as Ae,ArrowLeft as ke,ArrowRight as Pe,ExternalLink as Le,Ellipsis as Ie,EllipsisVertical as Re,Menu as De,House as He,Plus as Oe,Minus as ze,Pencil as Be,Trash as Fe,Trash2 as Ke,Save as We,Download as Ue,Share as je,Funnel as $e,Settings as qe,RotateCw as Ve,Maximize as Xe,Minimize as Ge,ShoppingCart as _e,ShoppingBag as Ye,Package as Ze,Truck as Je,Tag as Qe,Gift as et,Receipt as tt,Wallet as nt,Store as ot,DollarSign as rt,Percent as it,Play as st,Pause as at,VolumeX as lt,Camera as ct,Image as dt,Film as ut,Headphones as mt,MessageCircle as pt,MessageSquare as gt,Bell as ht,Heart as ft,Star as wt,Eye as yt,EyeOff as bt,Bookmark as vt,CalendarDays as xt,History as Ct,Timer as St,Folder as Et,FolderOpen as Tt,Files as Mt,Sparkles as Nt,Zap as At,Sun as kt,Moon as Pt,Flag as Lt,Monitor as It,Smartphone as Rt}from"lucide";var Dt={activity:A,"arrow-down":k,"arrow-up":P,"arrow-up-right":L,bot:I,"chevron-down":R,"chevron-up":D,"chevron-right":H,"chevron-left":O,check:z,clipboard:B,"clipboard-copy":F,"code-xml":K,copy:W,file:U,"file-code":j,"file-spreadsheet":$,"file-text":q,"image-plus":V,loader:X,"loader-circle":G,mic:_,paperclip:Y,"refresh-cw":Z,search:J,send:Q,"shield-alert":ee,"shield-check":te,"shield-x":ne,square:oe,"thumbs-down":re,"thumbs-up":ie,upload:se,"volume-2":ae,x:le,user:ce,mail:de,phone:ue,calendar:me,clock:pe,building:ge,"map-pin":he,lock:fe,key:we,"credit-card":ye,"at-sign":be,hash:ve,globe:xe,link:Ce,"circle-check":Se,"circle-x":Ee,"triangle-alert":Te,info:Me,ban:Ne,shield:Ae,"arrow-left":ke,"arrow-right":Pe,"external-link":Le,ellipsis:Ie,"ellipsis-vertical":Re,menu:De,house:He,plus:Oe,minus:ze,pencil:Be,trash:Fe,"trash-2":Ke,save:We,download:Ue,share:je,funnel:$e,settings:qe,"rotate-cw":Ve,maximize:Xe,minimize:Ge,"shopping-cart":_e,"shopping-bag":Ye,package:Ze,truck:Je,tag:Qe,gift:et,receipt:tt,wallet:nt,store:ot,"dollar-sign":rt,percent:it,play:st,pause:at,"volume-x":lt,camera:ct,image:dt,film:ut,headphones:mt,"message-circle":pt,"message-square":gt,bell:ht,heart:ft,star:wt,eye:yt,"eye-off":bt,bookmark:vt,"calendar-days":xt,history:Ct,timer:St,folder:Et,"folder-open":Tt,files:Mt,sparkles:Nt,zap:At,sun:kt,moon:Pt,flag:Lt,monitor:It,smartphone:Rt},jt=(e,t=24,n="currentColor",o=2)=>{let r=Dt[e];return r?Ht(r,t,n,o):(console.warn(`Lucide icon "${e}" is not in the Persona registry. Add it to packages/widget/src/utils/icons.ts (see docs/icon-registry-shortlist.md).`),null)};function Ht(e,t,n,o){if(!Array.isArray(e))return null;let r=document.createElementNS("http://www.w3.org/2000/svg","svg");return r.setAttribute("width",String(t)),r.setAttribute("height",String(t)),r.setAttribute("viewBox","0 0 24 24"),r.setAttribute("fill","none"),r.setAttribute("stroke",n),r.setAttribute("stroke-width",String(o)),r.setAttribute("stroke-linecap","round"),r.setAttribute("stroke-linejoin","round"),r.setAttribute("aria-hidden","true"),e.forEach(s=>{if(!Array.isArray(s)||s.length<2)return;let a=s[0],c=s[1];if(!c)return;let l=document.createElementNS("http://www.w3.org/2000/svg",a);Object.entries(c).forEach(([h,f])=>{h!=="stroke"&&l.setAttribute(h,String(f))}),r.appendChild(l)}),r}function qt(e){let t={trigger:e.trigger??"@",position:e.triggerPosition??"anywhere",allowSpaces:!1,sources:Array.isArray(e.sources)?e.sources:[],searchPlaceholder:e.searchPlaceholder,showButton:e.showButton!==!1,buttonIconName:e.buttonIconName,buttonTooltipText:e.buttonTooltipText},n=(e.triggers??[]).map(o=>({trigger:o.trigger,position:o.triggerPosition??"anywhere",allowSpaces:o.allowSpaces??!1,sources:Array.isArray(o.sources)?o.sources:[],searchPlaceholder:o.searchPlaceholder,showButton:o.showButton===!0,buttonIconName:o.buttonIconName,buttonTooltipText:o.buttonTooltipText}));return[t,...n]}function T(e){let t=e.getRootNode?.();return t instanceof ShadowRoot||t instanceof Document?t:e.ownerDocument??document}function b(e,t,n){let o=e instanceof Document?e.head:e,r=t.replace(/["\\]/g,"\\$&");if(o.querySelector(`style[data-persona-plugin-style="${r}"]`))return;let a=(e instanceof Document?e:e.ownerDocument??document).createElement("style");a.setAttribute("data-persona-plugin-style",t),a.textContent=n,o.appendChild(a)}function Xt(e,t,n){if(e instanceof Document||e instanceof ShadowRoot){b(e,t,n);return}let o=e;if(o.isConnected){b(T(o),t,n);return}let r=o.ownerDocument??document;b(r,t,n),queueMicrotask(()=>{let s=T(o);s!==r&&b(s,t,n)})}function Ot(e){let t=e.getRootNode?.();return t instanceof ShadowRoot?t:(e.ownerDocument??document).body}function Gt(e){let{anchor:t,content:n,placement:o="bottom-start",offset:r=6,matchAnchorWidth:s=!1,horizontalOffset:a,verticalOffset:c,zIndex:l=2147483e3,onOpen:h,onDismiss:f}=e,M=e.container??Ot(t),d=!1,w=null,v=()=>{if(!d)return;let i=t.getBoundingClientRect();n.style.position="fixed",s&&(n.style.minWidth=`${i.width}px`),a&&(n.style.maxWidth=`${i.width}px`);let m=n.getBoundingClientRect(),u=c?.()??null,y=u!=null?i.top+u:i.top,x=o==="top-start"||o==="top-end"?y-r-m.height:i.bottom+r,g=o==="bottom-end"||o==="top-end"?i.right-m.width:i.left,E=a?.()??null;if(E!=null){let N=Math.max(i.left,i.right-m.width);g=Math.min(Math.max(i.left+E,i.left),N)}n.style.top=`${x}px`,n.style.left=`${g}px`},p=()=>{d&&(d=!1,w&&(w(),w=null),n.remove())},S=()=>{if(d)return;d=!0,l!=null&&(n.style.zIndex=String(l)),M.appendChild(n),v();let i=(t.ownerDocument??document).defaultView??window,m=t.ownerDocument??document,u=()=>{if(!t.isConnected){p(),f?.("anchor-removed");return}v()},y=C=>{let g=typeof C.composedPath=="function"?C.composedPath():[];g.includes(n)||g.includes(t)||(p(),f?.("outside"))},x=i.setTimeout(()=>{m.addEventListener("pointerdown",y,!0)},0);i.addEventListener("scroll",u,!0),i.addEventListener("resize",u),w=()=>{i.clearTimeout(x),m.removeEventListener("pointerdown",y,!0),i.removeEventListener("scroll",u,!0),i.removeEventListener("resize",u)},h?.()};return{get isOpen(){return d},open:S,close:p,toggle:()=>d?p():S(),reposition:v,destroy:p}}function _t(e){return(typeof e.composedPath=="function"?e.composedPath():[]).some(n=>n instanceof HTMLElement&&(n.tagName==="INPUT"||n.tagName==="TEXTAREA"||n.isContentEditable))}export{zt as a,Bt as b,Ft as c,Kt as d,jt as e,qt as f,Xt as g,Gt as h,_t as i};