@runtypelabs/persona 2.3.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +221 -4
- package/dist/index.cjs +42 -42
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +832 -571
- package/dist/index.d.ts +832 -571
- package/dist/index.global.js +87 -87
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +42 -42
- package/dist/index.js.map +1 -1
- package/dist/widget.css +205 -15
- package/package.json +2 -2
- package/src/components/artifact-card.ts +39 -5
- package/src/components/artifact-pane.ts +67 -126
- package/src/components/composer-builder.ts +3 -23
- package/src/components/header-builder.ts +29 -34
- package/src/components/header-layouts.ts +109 -41
- package/src/components/launcher.ts +10 -7
- package/src/components/message-bubble.ts +7 -11
- package/src/components/panel.ts +4 -4
- package/src/defaults.ts +22 -93
- package/src/index.ts +20 -7
- package/src/presets.ts +66 -51
- package/src/runtime/host-layout.test.ts +196 -0
- package/src/runtime/host-layout.ts +265 -27
- package/src/runtime/init.test.ts +77 -7
- package/src/styles/widget.css +205 -15
- package/src/types/theme.ts +76 -0
- package/src/types.ts +86 -97
- package/src/ui.docked.test.ts +203 -7
- package/src/ui.ts +129 -88
- package/src/utils/buttons.ts +417 -0
- package/src/utils/code-generators.test.ts +43 -7
- package/src/utils/code-generators.ts +9 -25
- package/src/utils/deep-merge.ts +26 -0
- package/src/utils/dock.ts +18 -5
- package/src/utils/dropdown.ts +178 -0
- package/src/utils/sanitize.ts +1 -1
- package/src/utils/theme.test.ts +90 -15
- package/src/utils/theme.ts +20 -46
- package/src/utils/tokens.ts +108 -11
- package/src/utils/migration.ts +0 -220
package/dist/index.d.cts
CHANGED
|
@@ -165,6 +165,456 @@ interface AgentWidgetPlugin {
|
|
|
165
165
|
onUnregister?: () => void;
|
|
166
166
|
}
|
|
167
167
|
|
|
168
|
+
type TokenType = 'color' | 'spacing' | 'typography' | 'shadow' | 'border' | 'radius';
|
|
169
|
+
type TokenReference<_T extends TokenType = TokenType> = string;
|
|
170
|
+
interface ColorShade {
|
|
171
|
+
50?: string;
|
|
172
|
+
100?: string;
|
|
173
|
+
200?: string;
|
|
174
|
+
300?: string;
|
|
175
|
+
400?: string;
|
|
176
|
+
500?: string;
|
|
177
|
+
600?: string;
|
|
178
|
+
700?: string;
|
|
179
|
+
800?: string;
|
|
180
|
+
900?: string;
|
|
181
|
+
950?: string;
|
|
182
|
+
[key: string]: string | undefined;
|
|
183
|
+
}
|
|
184
|
+
interface ColorPalette {
|
|
185
|
+
gray: ColorShade;
|
|
186
|
+
primary: ColorShade;
|
|
187
|
+
secondary: ColorShade;
|
|
188
|
+
accent: ColorShade;
|
|
189
|
+
success: ColorShade;
|
|
190
|
+
warning: ColorShade;
|
|
191
|
+
error: ColorShade;
|
|
192
|
+
[key: string]: ColorShade;
|
|
193
|
+
}
|
|
194
|
+
interface SpacingScale {
|
|
195
|
+
0: string;
|
|
196
|
+
1: string;
|
|
197
|
+
2: string;
|
|
198
|
+
3: string;
|
|
199
|
+
4: string;
|
|
200
|
+
5: string;
|
|
201
|
+
6: string;
|
|
202
|
+
8: string;
|
|
203
|
+
10: string;
|
|
204
|
+
12: string;
|
|
205
|
+
16: string;
|
|
206
|
+
20: string;
|
|
207
|
+
24: string;
|
|
208
|
+
32: string;
|
|
209
|
+
40: string;
|
|
210
|
+
48: string;
|
|
211
|
+
56: string;
|
|
212
|
+
64: string;
|
|
213
|
+
[key: string]: string;
|
|
214
|
+
}
|
|
215
|
+
interface ShadowScale {
|
|
216
|
+
none: string;
|
|
217
|
+
sm: string;
|
|
218
|
+
md: string;
|
|
219
|
+
lg: string;
|
|
220
|
+
xl: string;
|
|
221
|
+
'2xl': string;
|
|
222
|
+
[key: string]: string;
|
|
223
|
+
}
|
|
224
|
+
interface BorderScale {
|
|
225
|
+
none: string;
|
|
226
|
+
sm: string;
|
|
227
|
+
md: string;
|
|
228
|
+
lg: string;
|
|
229
|
+
[key: string]: string;
|
|
230
|
+
}
|
|
231
|
+
interface RadiusScale {
|
|
232
|
+
none: string;
|
|
233
|
+
sm: string;
|
|
234
|
+
md: string;
|
|
235
|
+
lg: string;
|
|
236
|
+
xl: string;
|
|
237
|
+
full: string;
|
|
238
|
+
[key: string]: string;
|
|
239
|
+
}
|
|
240
|
+
interface TypographyScale {
|
|
241
|
+
fontFamily: {
|
|
242
|
+
sans: string;
|
|
243
|
+
serif: string;
|
|
244
|
+
mono: string;
|
|
245
|
+
};
|
|
246
|
+
fontSize: {
|
|
247
|
+
xs: string;
|
|
248
|
+
sm: string;
|
|
249
|
+
base: string;
|
|
250
|
+
lg: string;
|
|
251
|
+
xl: string;
|
|
252
|
+
'2xl': string;
|
|
253
|
+
'3xl': string;
|
|
254
|
+
'4xl': string;
|
|
255
|
+
};
|
|
256
|
+
fontWeight: {
|
|
257
|
+
normal: string;
|
|
258
|
+
medium: string;
|
|
259
|
+
semibold: string;
|
|
260
|
+
bold: string;
|
|
261
|
+
};
|
|
262
|
+
lineHeight: {
|
|
263
|
+
tight: string;
|
|
264
|
+
normal: string;
|
|
265
|
+
relaxed: string;
|
|
266
|
+
};
|
|
267
|
+
}
|
|
268
|
+
interface SemanticColors {
|
|
269
|
+
primary: TokenReference<'color'>;
|
|
270
|
+
secondary: TokenReference<'color'>;
|
|
271
|
+
accent: TokenReference<'color'>;
|
|
272
|
+
surface: TokenReference<'color'>;
|
|
273
|
+
background: TokenReference<'color'>;
|
|
274
|
+
container: TokenReference<'color'>;
|
|
275
|
+
text: TokenReference<'color'>;
|
|
276
|
+
textMuted: TokenReference<'color'>;
|
|
277
|
+
textInverse: TokenReference<'color'>;
|
|
278
|
+
border: TokenReference<'color'>;
|
|
279
|
+
divider: TokenReference<'color'>;
|
|
280
|
+
interactive: {
|
|
281
|
+
default: TokenReference<'color'>;
|
|
282
|
+
hover: TokenReference<'color'>;
|
|
283
|
+
focus: TokenReference<'color'>;
|
|
284
|
+
active: TokenReference<'color'>;
|
|
285
|
+
disabled: TokenReference<'color'>;
|
|
286
|
+
};
|
|
287
|
+
feedback: {
|
|
288
|
+
success: TokenReference<'color'>;
|
|
289
|
+
warning: TokenReference<'color'>;
|
|
290
|
+
error: TokenReference<'color'>;
|
|
291
|
+
info: TokenReference<'color'>;
|
|
292
|
+
};
|
|
293
|
+
}
|
|
294
|
+
interface SemanticSpacing {
|
|
295
|
+
xs: TokenReference<'spacing'>;
|
|
296
|
+
sm: TokenReference<'spacing'>;
|
|
297
|
+
md: TokenReference<'spacing'>;
|
|
298
|
+
lg: TokenReference<'spacing'>;
|
|
299
|
+
xl: TokenReference<'spacing'>;
|
|
300
|
+
'2xl': TokenReference<'spacing'>;
|
|
301
|
+
}
|
|
302
|
+
interface SemanticTypography {
|
|
303
|
+
fontFamily: TokenReference<'typography'>;
|
|
304
|
+
fontSize: TokenReference<'typography'>;
|
|
305
|
+
fontWeight: TokenReference<'typography'>;
|
|
306
|
+
lineHeight: TokenReference<'typography'>;
|
|
307
|
+
}
|
|
308
|
+
interface SemanticTokens {
|
|
309
|
+
colors: SemanticColors;
|
|
310
|
+
spacing: SemanticSpacing;
|
|
311
|
+
typography: SemanticTypography;
|
|
312
|
+
}
|
|
313
|
+
interface ComponentTokenSet {
|
|
314
|
+
background?: TokenReference<'color'>;
|
|
315
|
+
foreground?: TokenReference<'color'>;
|
|
316
|
+
border?: TokenReference<'color'>;
|
|
317
|
+
borderRadius?: TokenReference<'radius'>;
|
|
318
|
+
padding?: TokenReference<'spacing'>;
|
|
319
|
+
margin?: TokenReference<'spacing'>;
|
|
320
|
+
shadow?: TokenReference<'shadow'>;
|
|
321
|
+
opacity?: number;
|
|
322
|
+
}
|
|
323
|
+
interface ButtonTokens extends ComponentTokenSet {
|
|
324
|
+
primary: ComponentTokenSet;
|
|
325
|
+
secondary: ComponentTokenSet;
|
|
326
|
+
ghost: ComponentTokenSet;
|
|
327
|
+
}
|
|
328
|
+
interface InputTokens extends ComponentTokenSet {
|
|
329
|
+
background: TokenReference<'color'>;
|
|
330
|
+
placeholder: TokenReference<'color'>;
|
|
331
|
+
focus: {
|
|
332
|
+
border: TokenReference<'color'>;
|
|
333
|
+
ring: TokenReference<'color'>;
|
|
334
|
+
};
|
|
335
|
+
}
|
|
336
|
+
interface LauncherTokens extends ComponentTokenSet {
|
|
337
|
+
size: string;
|
|
338
|
+
iconSize: string;
|
|
339
|
+
shadow: TokenReference<'shadow'>;
|
|
340
|
+
}
|
|
341
|
+
interface PanelTokens extends ComponentTokenSet {
|
|
342
|
+
width: string;
|
|
343
|
+
maxWidth: string;
|
|
344
|
+
height: string;
|
|
345
|
+
maxHeight: string;
|
|
346
|
+
}
|
|
347
|
+
interface HeaderTokens extends ComponentTokenSet {
|
|
348
|
+
background: TokenReference<'color'>;
|
|
349
|
+
border: TokenReference<'color'>;
|
|
350
|
+
borderRadius: TokenReference<'radius'>;
|
|
351
|
+
/** Background of the rounded avatar tile next to the title (Lucide / emoji / image). */
|
|
352
|
+
iconBackground: TokenReference<'color'>;
|
|
353
|
+
/** Foreground (glyph stroke or emoji text) on the header avatar tile. */
|
|
354
|
+
iconForeground: TokenReference<'color'>;
|
|
355
|
+
/** Header title line (next to the icon, or minimal layout title). */
|
|
356
|
+
titleForeground: TokenReference<'color'>;
|
|
357
|
+
/** Header subtitle line under the title. */
|
|
358
|
+
subtitleForeground: TokenReference<'color'>;
|
|
359
|
+
/** Default color for clear / close icon buttons when launcher overrides are unset. */
|
|
360
|
+
actionIconForeground: TokenReference<'color'>;
|
|
361
|
+
/** Box-shadow on the header (e.g., a fade shadow to replace the default border). */
|
|
362
|
+
shadow?: string;
|
|
363
|
+
/** Override the header bottom border (e.g., `none`). */
|
|
364
|
+
borderBottom?: string;
|
|
365
|
+
}
|
|
366
|
+
interface MessageTokens {
|
|
367
|
+
user: {
|
|
368
|
+
background: TokenReference<'color'>;
|
|
369
|
+
text: TokenReference<'color'>;
|
|
370
|
+
borderRadius: TokenReference<'radius'>;
|
|
371
|
+
/** User bubble box-shadow (token ref or raw CSS, e.g. `none`). */
|
|
372
|
+
shadow?: string;
|
|
373
|
+
};
|
|
374
|
+
assistant: {
|
|
375
|
+
background: TokenReference<'color'>;
|
|
376
|
+
text: TokenReference<'color'>;
|
|
377
|
+
borderRadius: TokenReference<'radius'>;
|
|
378
|
+
/** Assistant bubble border color (CSS color). */
|
|
379
|
+
border?: TokenReference<'color'>;
|
|
380
|
+
/** Assistant bubble box-shadow (token ref or raw CSS, e.g. `none`). */
|
|
381
|
+
shadow?: string;
|
|
382
|
+
};
|
|
383
|
+
}
|
|
384
|
+
interface MarkdownTokens {
|
|
385
|
+
inlineCode: {
|
|
386
|
+
background: TokenReference<'color'>;
|
|
387
|
+
foreground: TokenReference<'color'>;
|
|
388
|
+
};
|
|
389
|
+
/** Foreground for `<a>` in rendered markdown (assistant bubbles + artifact pane). */
|
|
390
|
+
link?: {
|
|
391
|
+
foreground: TokenReference<'color'>;
|
|
392
|
+
};
|
|
393
|
+
/**
|
|
394
|
+
* Body font for rendered markdown blocks (artifact pane + markdown bubbles).
|
|
395
|
+
* Use a raw CSS `font-family` value, e.g. `Georgia, serif`.
|
|
396
|
+
*/
|
|
397
|
+
prose?: {
|
|
398
|
+
fontFamily?: string;
|
|
399
|
+
};
|
|
400
|
+
/** Optional heading scale overrides (raw CSS or resolvable token paths). */
|
|
401
|
+
heading?: {
|
|
402
|
+
h1?: {
|
|
403
|
+
fontSize?: string;
|
|
404
|
+
fontWeight?: string;
|
|
405
|
+
};
|
|
406
|
+
h2?: {
|
|
407
|
+
fontSize?: string;
|
|
408
|
+
fontWeight?: string;
|
|
409
|
+
};
|
|
410
|
+
};
|
|
411
|
+
}
|
|
412
|
+
interface VoiceTokens {
|
|
413
|
+
recording: {
|
|
414
|
+
indicator: TokenReference<'color'>;
|
|
415
|
+
background: TokenReference<'color'>;
|
|
416
|
+
border: TokenReference<'color'>;
|
|
417
|
+
};
|
|
418
|
+
processing: {
|
|
419
|
+
icon: TokenReference<'color'>;
|
|
420
|
+
background: TokenReference<'color'>;
|
|
421
|
+
};
|
|
422
|
+
speaking: {
|
|
423
|
+
icon: TokenReference<'color'>;
|
|
424
|
+
};
|
|
425
|
+
}
|
|
426
|
+
interface ApprovalTokens {
|
|
427
|
+
requested: {
|
|
428
|
+
background: TokenReference<'color'>;
|
|
429
|
+
border: TokenReference<'color'>;
|
|
430
|
+
text: TokenReference<'color'>;
|
|
431
|
+
};
|
|
432
|
+
approve: ComponentTokenSet;
|
|
433
|
+
deny: ComponentTokenSet;
|
|
434
|
+
}
|
|
435
|
+
interface AttachmentTokens {
|
|
436
|
+
image: {
|
|
437
|
+
background: TokenReference<'color'>;
|
|
438
|
+
border: TokenReference<'color'>;
|
|
439
|
+
};
|
|
440
|
+
}
|
|
441
|
+
/** Tool-call row chrome (collapsible tool bubbles). */
|
|
442
|
+
interface ToolBubbleTokens {
|
|
443
|
+
/** Box-shadow for tool bubbles (token ref or raw CSS, e.g. `none`). */
|
|
444
|
+
shadow: string;
|
|
445
|
+
}
|
|
446
|
+
/** Reasoning / “thinking” row chrome. */
|
|
447
|
+
interface ReasoningBubbleTokens {
|
|
448
|
+
shadow: string;
|
|
449
|
+
}
|
|
450
|
+
/** Composer (message input) chrome. */
|
|
451
|
+
interface ComposerChromeTokens {
|
|
452
|
+
/** Box-shadow on the composer form (raw CSS, e.g. `none`). */
|
|
453
|
+
shadow: string;
|
|
454
|
+
}
|
|
455
|
+
/** Artifact toolbar chrome. */
|
|
456
|
+
interface ArtifactToolbarTokens {
|
|
457
|
+
iconHoverColor?: string;
|
|
458
|
+
iconHoverBackground?: string;
|
|
459
|
+
iconPadding?: string;
|
|
460
|
+
iconBorderRadius?: string;
|
|
461
|
+
iconBorder?: string;
|
|
462
|
+
toggleGroupGap?: string;
|
|
463
|
+
toggleBorderRadius?: string;
|
|
464
|
+
copyBackground?: string;
|
|
465
|
+
copyBorder?: string;
|
|
466
|
+
copyColor?: string;
|
|
467
|
+
copyBorderRadius?: string;
|
|
468
|
+
copyPadding?: string;
|
|
469
|
+
copyMenuBackground?: string;
|
|
470
|
+
copyMenuBorder?: string;
|
|
471
|
+
copyMenuShadow?: string;
|
|
472
|
+
copyMenuBorderRadius?: string;
|
|
473
|
+
copyMenuItemHoverBackground?: string;
|
|
474
|
+
/** Base background of icon buttons (defaults to --persona-surface). */
|
|
475
|
+
iconBackground?: string;
|
|
476
|
+
/** Border on the toolbar (e.g., `none` to remove the bottom border). */
|
|
477
|
+
toolbarBorder?: string;
|
|
478
|
+
}
|
|
479
|
+
/** Artifact tab strip chrome. */
|
|
480
|
+
interface ArtifactTabTokens {
|
|
481
|
+
background?: string;
|
|
482
|
+
activeBackground?: string;
|
|
483
|
+
activeBorder?: string;
|
|
484
|
+
borderRadius?: string;
|
|
485
|
+
textColor?: string;
|
|
486
|
+
/** Hover background for inactive tabs. */
|
|
487
|
+
hoverBackground?: string;
|
|
488
|
+
/** Tab list container background. */
|
|
489
|
+
listBackground?: string;
|
|
490
|
+
/** Tab list container border color. */
|
|
491
|
+
listBorderColor?: string;
|
|
492
|
+
/** Tab list container padding (CSS shorthand). */
|
|
493
|
+
listPadding?: string;
|
|
494
|
+
}
|
|
495
|
+
/** Artifact pane chrome. */
|
|
496
|
+
interface ArtifactPaneTokens {
|
|
497
|
+
/**
|
|
498
|
+
* Background for the artifact column (toolbar + content), resolved from the theme.
|
|
499
|
+
* Defaults to `semantic.colors.container` so the pane matches assistant message surfaces.
|
|
500
|
+
* `features.artifacts.layout.paneBackground` still wins when set (layout escape hatch).
|
|
501
|
+
*/
|
|
502
|
+
background?: string;
|
|
503
|
+
toolbarBackground?: string;
|
|
504
|
+
}
|
|
505
|
+
/** Icon button chrome (used by createIconButton). */
|
|
506
|
+
interface IconButtonTokens {
|
|
507
|
+
background?: string;
|
|
508
|
+
border?: string;
|
|
509
|
+
color?: string;
|
|
510
|
+
padding?: string;
|
|
511
|
+
borderRadius?: string;
|
|
512
|
+
hoverBackground?: string;
|
|
513
|
+
hoverColor?: string;
|
|
514
|
+
/** Background when aria-pressed="true". */
|
|
515
|
+
activeBackground?: string;
|
|
516
|
+
/** Border color when aria-pressed="true". */
|
|
517
|
+
activeBorder?: string;
|
|
518
|
+
}
|
|
519
|
+
/** Label button chrome (used by createLabelButton). */
|
|
520
|
+
interface LabelButtonTokens {
|
|
521
|
+
background?: string;
|
|
522
|
+
border?: string;
|
|
523
|
+
color?: string;
|
|
524
|
+
padding?: string;
|
|
525
|
+
borderRadius?: string;
|
|
526
|
+
hoverBackground?: string;
|
|
527
|
+
fontSize?: string;
|
|
528
|
+
gap?: string;
|
|
529
|
+
}
|
|
530
|
+
/** Toggle group chrome (used by createToggleGroup). */
|
|
531
|
+
interface ToggleGroupTokens {
|
|
532
|
+
/** Gap between toggle buttons. Default: 0 (connected). */
|
|
533
|
+
gap?: string;
|
|
534
|
+
/** Border radius for first/last buttons. */
|
|
535
|
+
borderRadius?: string;
|
|
536
|
+
}
|
|
537
|
+
interface ComponentTokens {
|
|
538
|
+
button: ButtonTokens;
|
|
539
|
+
input: InputTokens;
|
|
540
|
+
launcher: LauncherTokens;
|
|
541
|
+
panel: PanelTokens;
|
|
542
|
+
header: HeaderTokens;
|
|
543
|
+
message: MessageTokens;
|
|
544
|
+
/** Markdown surfaces (chat + artifact pane). */
|
|
545
|
+
markdown?: MarkdownTokens;
|
|
546
|
+
voice: VoiceTokens;
|
|
547
|
+
approval: ApprovalTokens;
|
|
548
|
+
attachment: AttachmentTokens;
|
|
549
|
+
toolBubble: ToolBubbleTokens;
|
|
550
|
+
reasoningBubble: ReasoningBubbleTokens;
|
|
551
|
+
composer: ComposerChromeTokens;
|
|
552
|
+
/** Icon button styling tokens. */
|
|
553
|
+
iconButton?: IconButtonTokens;
|
|
554
|
+
/** Label button styling tokens. */
|
|
555
|
+
labelButton?: LabelButtonTokens;
|
|
556
|
+
/** Toggle group styling tokens. */
|
|
557
|
+
toggleGroup?: ToggleGroupTokens;
|
|
558
|
+
/** Artifact toolbar, tab strip, and pane chrome. */
|
|
559
|
+
artifact?: {
|
|
560
|
+
toolbar?: ArtifactToolbarTokens;
|
|
561
|
+
tab?: ArtifactTabTokens;
|
|
562
|
+
pane?: ArtifactPaneTokens;
|
|
563
|
+
};
|
|
564
|
+
}
|
|
565
|
+
interface PaletteExtras {
|
|
566
|
+
transitions?: Record<string, string>;
|
|
567
|
+
easings?: Record<string, string>;
|
|
568
|
+
}
|
|
569
|
+
interface PersonaThemeBase {
|
|
570
|
+
palette: {
|
|
571
|
+
colors: ColorPalette;
|
|
572
|
+
spacing: SpacingScale;
|
|
573
|
+
typography: TypographyScale;
|
|
574
|
+
shadows: ShadowScale;
|
|
575
|
+
borders: BorderScale;
|
|
576
|
+
radius: RadiusScale;
|
|
577
|
+
} & PaletteExtras;
|
|
578
|
+
}
|
|
579
|
+
interface PersonaThemeSemantic {
|
|
580
|
+
semantic: SemanticTokens;
|
|
581
|
+
}
|
|
582
|
+
interface PersonaThemeComponents {
|
|
583
|
+
components: ComponentTokens;
|
|
584
|
+
}
|
|
585
|
+
type PersonaTheme = PersonaThemeBase & PersonaThemeSemantic & PersonaThemeComponents;
|
|
586
|
+
/** Recursive partial for `config.theme` / `config.darkTheme` overrides. */
|
|
587
|
+
type DeepPartial<T> = T extends object ? {
|
|
588
|
+
[P in keyof T]?: DeepPartial<T[P]>;
|
|
589
|
+
} : T;
|
|
590
|
+
interface ResolvedToken {
|
|
591
|
+
path: string;
|
|
592
|
+
value: string;
|
|
593
|
+
type: TokenType;
|
|
594
|
+
}
|
|
595
|
+
interface ThemeValidationError {
|
|
596
|
+
path: string;
|
|
597
|
+
message: string;
|
|
598
|
+
severity: 'error' | 'warning';
|
|
599
|
+
}
|
|
600
|
+
interface ThemeValidationResult {
|
|
601
|
+
valid: boolean;
|
|
602
|
+
errors: ThemeValidationError[];
|
|
603
|
+
warnings: ThemeValidationError[];
|
|
604
|
+
}
|
|
605
|
+
interface PersonaThemePlugin {
|
|
606
|
+
name: string;
|
|
607
|
+
version: string;
|
|
608
|
+
transform(theme: PersonaTheme): PersonaTheme;
|
|
609
|
+
cssVariables?: Record<string, string>;
|
|
610
|
+
afterResolve?(resolved: Record<string, string>): Record<string, string>;
|
|
611
|
+
}
|
|
612
|
+
interface CreateThemeOptions {
|
|
613
|
+
plugins?: PersonaThemePlugin[];
|
|
614
|
+
validate?: boolean;
|
|
615
|
+
extend?: PersonaTheme;
|
|
616
|
+
}
|
|
617
|
+
|
|
168
618
|
/**
|
|
169
619
|
* Text content part for multi-modal messages
|
|
170
620
|
*/
|
|
@@ -580,7 +1030,9 @@ type AgentWidgetArtifactsLayoutConfig = {
|
|
|
580
1030
|
*/
|
|
581
1031
|
unifiedSplitOuterRadius?: string;
|
|
582
1032
|
/**
|
|
583
|
-
*
|
|
1033
|
+
* Strongest override: solid background for the artifact column (CSS color). Sets `--persona-artifact-pane-bg`
|
|
1034
|
+
* on the widget root. Leave unset to use theme `components.artifact.pane.background` (defaults to semantic
|
|
1035
|
+
* container) so light/dark stays consistent.
|
|
584
1036
|
*/
|
|
585
1037
|
paneBackground?: string;
|
|
586
1038
|
/**
|
|
@@ -646,6 +1098,20 @@ type AgentWidgetArtifactsFeature = {
|
|
|
646
1098
|
type: 'open' | 'download';
|
|
647
1099
|
artifactId: string;
|
|
648
1100
|
}) => boolean | void;
|
|
1101
|
+
/**
|
|
1102
|
+
* Custom renderer for artifact reference cards shown in the message thread.
|
|
1103
|
+
* Return an HTMLElement to replace the default card, or `null` to use the default.
|
|
1104
|
+
*/
|
|
1105
|
+
renderCard?: (context: {
|
|
1106
|
+
artifact: {
|
|
1107
|
+
artifactId: string;
|
|
1108
|
+
title: string;
|
|
1109
|
+
artifactType: string;
|
|
1110
|
+
status: string;
|
|
1111
|
+
};
|
|
1112
|
+
config: AgentWidgetConfig;
|
|
1113
|
+
defaultRenderer: () => HTMLElement;
|
|
1114
|
+
}) => HTMLElement | null;
|
|
649
1115
|
};
|
|
650
1116
|
type AgentWidgetFeatureFlags = {
|
|
651
1117
|
showReasoning?: boolean;
|
|
@@ -767,84 +1233,6 @@ type EventStreamPayloadRenderContext = {
|
|
|
767
1233
|
defaultRenderer: () => HTMLElement;
|
|
768
1234
|
parsedPayload: unknown;
|
|
769
1235
|
};
|
|
770
|
-
type AgentWidgetTheme = {
|
|
771
|
-
primary?: string;
|
|
772
|
-
secondary?: string;
|
|
773
|
-
surface?: string;
|
|
774
|
-
muted?: string;
|
|
775
|
-
accent?: string;
|
|
776
|
-
container?: string;
|
|
777
|
-
border?: string;
|
|
778
|
-
divider?: string;
|
|
779
|
-
messageBorder?: string;
|
|
780
|
-
inputBackground?: string;
|
|
781
|
-
callToAction?: string;
|
|
782
|
-
callToActionBackground?: string;
|
|
783
|
-
sendButtonBackgroundColor?: string;
|
|
784
|
-
sendButtonTextColor?: string;
|
|
785
|
-
sendButtonBorderColor?: string;
|
|
786
|
-
closeButtonColor?: string;
|
|
787
|
-
closeButtonBackgroundColor?: string;
|
|
788
|
-
closeButtonBorderColor?: string;
|
|
789
|
-
clearChatIconColor?: string;
|
|
790
|
-
clearChatBackgroundColor?: string;
|
|
791
|
-
clearChatBorderColor?: string;
|
|
792
|
-
tooltipBackground?: string;
|
|
793
|
-
tooltipForeground?: string;
|
|
794
|
-
micIconColor?: string;
|
|
795
|
-
micBackgroundColor?: string;
|
|
796
|
-
micBorderColor?: string;
|
|
797
|
-
recordingIconColor?: string;
|
|
798
|
-
recordingBackgroundColor?: string;
|
|
799
|
-
recordingBorderColor?: string;
|
|
800
|
-
inputFontFamily?: "sans-serif" | "serif" | "mono";
|
|
801
|
-
inputFontWeight?: string;
|
|
802
|
-
radiusSm?: string;
|
|
803
|
-
radiusMd?: string;
|
|
804
|
-
radiusLg?: string;
|
|
805
|
-
launcherRadius?: string;
|
|
806
|
-
buttonRadius?: string;
|
|
807
|
-
/**
|
|
808
|
-
* Border style for the chat panel container.
|
|
809
|
-
* @example "1px solid #e5e7eb" | "none"
|
|
810
|
-
* @default "1px solid var(--persona-border)"
|
|
811
|
-
*/
|
|
812
|
-
panelBorder?: string;
|
|
813
|
-
/**
|
|
814
|
-
* Box shadow for the chat panel container.
|
|
815
|
-
* @example "0 25px 50px -12px rgba(0,0,0,0.25)" | "none"
|
|
816
|
-
* @default "0 25px 50px -12px rgba(0,0,0,0.25)"
|
|
817
|
-
*/
|
|
818
|
-
panelShadow?: string;
|
|
819
|
-
/**
|
|
820
|
-
* Border radius for the chat panel container.
|
|
821
|
-
* @example "16px" | "0"
|
|
822
|
-
* @default "16px"
|
|
823
|
-
*/
|
|
824
|
-
panelBorderRadius?: string;
|
|
825
|
-
/**
|
|
826
|
-
* Box-shadow for user message bubbles (bubble message layout).
|
|
827
|
-
* @example "none" | "0 1px 2px rgba(0,0,0,0.05)"
|
|
828
|
-
*/
|
|
829
|
-
messageUserShadow?: string;
|
|
830
|
-
/**
|
|
831
|
-
* Box-shadow for assistant message bubbles (bubble message layout).
|
|
832
|
-
* Overrides the default subtle assistant shadow when set.
|
|
833
|
-
*/
|
|
834
|
-
messageAssistantShadow?: string;
|
|
835
|
-
/**
|
|
836
|
-
* Box-shadow for tool-call / function-call rows.
|
|
837
|
-
*/
|
|
838
|
-
toolBubbleShadow?: string;
|
|
839
|
-
/**
|
|
840
|
-
* Box-shadow for reasoning (“thinking”) rows.
|
|
841
|
-
*/
|
|
842
|
-
reasoningBubbleShadow?: string;
|
|
843
|
-
/**
|
|
844
|
-
* Box-shadow on the composer (input) container.
|
|
845
|
-
*/
|
|
846
|
-
composerShadow?: string;
|
|
847
|
-
};
|
|
848
1236
|
type AgentWidgetDockConfig = {
|
|
849
1237
|
/**
|
|
850
1238
|
* Side of the wrapped container where the docked panel should render.
|
|
@@ -857,10 +1245,22 @@ type AgentWidgetDockConfig = {
|
|
|
857
1245
|
*/
|
|
858
1246
|
width?: string;
|
|
859
1247
|
/**
|
|
860
|
-
*
|
|
861
|
-
*
|
|
1248
|
+
* When false, the dock column snaps between `0` and `width` with no CSS transition so main
|
|
1249
|
+
* content does not reflow during the open/close animation.
|
|
1250
|
+
* @default true
|
|
1251
|
+
*/
|
|
1252
|
+
animate?: boolean;
|
|
1253
|
+
/**
|
|
1254
|
+
* How the dock panel is shown.
|
|
1255
|
+
* - `"resize"` (default): a flex column grows/shrinks between `0` and `width` (main content reflows).
|
|
1256
|
+
* - `"overlay"`: panel is absolutely positioned and translates in/out **over** full-width content.
|
|
1257
|
+
* - `"push"`: a wide inner track `[content at shell width][panel]` translates horizontally so the panel
|
|
1258
|
+
* appears to push the workspace aside **without** animating the content column width (Shopify-style).
|
|
1259
|
+
* - `"emerge"`: like `"resize"`, the flex column animates so **page content reflows**; the chat
|
|
1260
|
+
* panel keeps a **fixed** `dock.width` (not squeezed while the column grows), clipped by the slot so
|
|
1261
|
+
* it appears to emerge at full width like a floating widget.
|
|
862
1262
|
*/
|
|
863
|
-
|
|
1263
|
+
reveal?: "resize" | "overlay" | "push" | "emerge";
|
|
864
1264
|
};
|
|
865
1265
|
type AgentWidgetLauncherConfig = {
|
|
866
1266
|
enabled?: boolean;
|
|
@@ -1428,6 +1828,17 @@ type AgentWidgetHeaderTrailingAction = {
|
|
|
1428
1828
|
icon?: string;
|
|
1429
1829
|
label?: string;
|
|
1430
1830
|
ariaLabel?: string;
|
|
1831
|
+
/**
|
|
1832
|
+
* When set, clicking this action opens a dropdown menu.
|
|
1833
|
+
* Menu item selections fire `onAction(menuItemId)`.
|
|
1834
|
+
*/
|
|
1835
|
+
menuItems?: Array<{
|
|
1836
|
+
id: string;
|
|
1837
|
+
label: string;
|
|
1838
|
+
icon?: string;
|
|
1839
|
+
destructive?: boolean;
|
|
1840
|
+
dividerBefore?: boolean;
|
|
1841
|
+
}>;
|
|
1431
1842
|
};
|
|
1432
1843
|
/**
|
|
1433
1844
|
* Context provided to header render functions
|
|
@@ -1494,6 +1905,41 @@ type AgentWidgetHeaderLayoutConfig = {
|
|
|
1494
1905
|
* When set, the title row becomes visually interactive (cursor: pointer).
|
|
1495
1906
|
*/
|
|
1496
1907
|
onTitleClick?: () => void;
|
|
1908
|
+
/** Style config for the title row hover effect (minimal layout). */
|
|
1909
|
+
titleRowHover?: {
|
|
1910
|
+
/** Hover background color. */
|
|
1911
|
+
background?: string;
|
|
1912
|
+
/** Hover border color. */
|
|
1913
|
+
border?: string;
|
|
1914
|
+
/** Border radius for the pill shape. */
|
|
1915
|
+
borderRadius?: string;
|
|
1916
|
+
/** Padding inside the pill. */
|
|
1917
|
+
padding?: string;
|
|
1918
|
+
};
|
|
1919
|
+
/**
|
|
1920
|
+
* Replaces the title with a combo button (label + chevron + dropdown menu).
|
|
1921
|
+
* When set, `trailingActions`, `onTitleClick`, and `titleRowHover` are ignored
|
|
1922
|
+
* since the combo button handles all of these internally.
|
|
1923
|
+
*/
|
|
1924
|
+
titleMenu?: {
|
|
1925
|
+
/** Dropdown menu items. */
|
|
1926
|
+
menuItems: Array<{
|
|
1927
|
+
id: string;
|
|
1928
|
+
label: string;
|
|
1929
|
+
icon?: string;
|
|
1930
|
+
destructive?: boolean;
|
|
1931
|
+
dividerBefore?: boolean;
|
|
1932
|
+
}>;
|
|
1933
|
+
/** Called when a menu item is selected. */
|
|
1934
|
+
onSelect: (id: string) => void;
|
|
1935
|
+
/** Hover pill style. */
|
|
1936
|
+
hover?: {
|
|
1937
|
+
background?: string;
|
|
1938
|
+
border?: string;
|
|
1939
|
+
borderRadius?: string;
|
|
1940
|
+
padding?: string;
|
|
1941
|
+
};
|
|
1942
|
+
};
|
|
1497
1943
|
};
|
|
1498
1944
|
/**
|
|
1499
1945
|
* Avatar configuration for message bubbles
|
|
@@ -2257,22 +2703,15 @@ type AgentWidgetConfig = {
|
|
|
2257
2703
|
*/
|
|
2258
2704
|
showWelcomeCard?: boolean;
|
|
2259
2705
|
};
|
|
2260
|
-
theme?: AgentWidgetTheme;
|
|
2261
2706
|
/**
|
|
2262
|
-
*
|
|
2263
|
-
*
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
*
|
|
2268
|
-
* config: {
|
|
2269
|
-
* theme: { primary: '#111827', surface: '#ffffff' },
|
|
2270
|
-
* darkTheme: { primary: '#f9fafb', surface: '#1f2937' },
|
|
2271
|
-
* colorScheme: 'auto'
|
|
2272
|
-
* }
|
|
2273
|
-
* ```
|
|
2707
|
+
* Semantic design tokens (`palette`, `semantic`, `components`).
|
|
2708
|
+
* Omit for library defaults.
|
|
2709
|
+
*/
|
|
2710
|
+
theme?: DeepPartial<PersonaTheme>;
|
|
2711
|
+
/**
|
|
2712
|
+
* Dark-mode token overrides. Merged over `theme` when the active scheme is dark.
|
|
2274
2713
|
*/
|
|
2275
|
-
darkTheme?:
|
|
2714
|
+
darkTheme?: DeepPartial<PersonaTheme>;
|
|
2276
2715
|
/**
|
|
2277
2716
|
* Color scheme mode for the widget.
|
|
2278
2717
|
* - 'light': Always use light theme (default)
|
|
@@ -4013,6 +4452,13 @@ declare function generateUserMessageId(): string;
|
|
|
4013
4452
|
declare function generateAssistantMessageId(): string;
|
|
4014
4453
|
|
|
4015
4454
|
declare const isDockedMountMode: (config?: AgentWidgetConfig) => boolean;
|
|
4455
|
+
/**
|
|
4456
|
+
* Resolved dock layout. For `reveal: "resize"`, when the panel is closed the dock column is `0px`.
|
|
4457
|
+
* For `reveal: "overlay"`, the panel overlays with `transform`. For `reveal: "push"`, a sliding track
|
|
4458
|
+
* moves content and panel together without width animation on the main column. For `emerge`,
|
|
4459
|
+
* the dock column still animates like `resize` but the widget stays `dock.width` wide inside the slot.
|
|
4460
|
+
* Unknown keys on `launcher.dock` (e.g. legacy `collapsedWidth`) are ignored.
|
|
4461
|
+
*/
|
|
4016
4462
|
declare const resolveDockConfig: (config?: AgentWidgetConfig) => Required<AgentWidgetDockConfig>;
|
|
4017
4463
|
|
|
4018
4464
|
type CodeFormat = "esm" | "script-installer" | "script-manual" | "script-advanced" | "react-component" | "react-advanced";
|
|
@@ -4084,480 +4530,313 @@ type CodeGeneratorHooks = {
|
|
|
4084
4530
|
requestMiddleware?: string | ((context: {
|
|
4085
4531
|
payload: unknown;
|
|
4086
4532
|
config: unknown;
|
|
4087
|
-
}) => unknown);
|
|
4088
|
-
/**
|
|
4089
|
-
* Custom action handlers array.
|
|
4090
|
-
* Array of handler functions.
|
|
4091
|
-
*
|
|
4092
|
-
* @example
|
|
4093
|
-
* ```typescript
|
|
4094
|
-
* [
|
|
4095
|
-
* (action, context) => {
|
|
4096
|
-
* if (action.type === 'custom') {
|
|
4097
|
-
* return { handled: true };
|
|
4098
|
-
* }
|
|
4099
|
-
* }
|
|
4100
|
-
* ]
|
|
4101
|
-
* ```
|
|
4102
|
-
*/
|
|
4103
|
-
actionHandlers?: string | Array<(action: unknown, context: unknown) => unknown>;
|
|
4104
|
-
/**
|
|
4105
|
-
* Custom action parsers array.
|
|
4106
|
-
* Array of parser functions.
|
|
4107
|
-
*/
|
|
4108
|
-
actionParsers?: string | Array<(context: unknown) => unknown>;
|
|
4109
|
-
/**
|
|
4110
|
-
* Custom postprocessMessage function.
|
|
4111
|
-
* Receives { text, message, streaming, raw } context.
|
|
4112
|
-
* Will override the default markdownPostprocessor.
|
|
4113
|
-
*
|
|
4114
|
-
* @example
|
|
4115
|
-
* ```typescript
|
|
4116
|
-
* ({ text }) => customMarkdownProcessor(text)
|
|
4117
|
-
* ```
|
|
4118
|
-
*/
|
|
4119
|
-
postprocessMessage?: string | ((context: {
|
|
4120
|
-
text: string;
|
|
4121
|
-
message?: unknown;
|
|
4122
|
-
streaming?: boolean;
|
|
4123
|
-
raw?: string;
|
|
4124
|
-
}) => string);
|
|
4125
|
-
/**
|
|
4126
|
-
* Custom context providers array.
|
|
4127
|
-
* Array of provider functions.
|
|
4128
|
-
*/
|
|
4129
|
-
contextProviders?: string | Array<() => unknown>;
|
|
4130
|
-
/**
|
|
4131
|
-
* Custom stream parser factory.
|
|
4132
|
-
* Should be a function that returns a StreamParser.
|
|
4133
|
-
*/
|
|
4134
|
-
streamParser?: string | (() => unknown);
|
|
4135
|
-
};
|
|
4136
|
-
/**
|
|
4137
|
-
* Options for code generation beyond format selection.
|
|
4138
|
-
*/
|
|
4139
|
-
type CodeGeneratorOptions = {
|
|
4140
|
-
/**
|
|
4141
|
-
* Custom hook code to inject into the generated snippet.
|
|
4142
|
-
* Hooks are JavaScript/TypeScript code strings that will be
|
|
4143
|
-
* inserted at appropriate locations in the output.
|
|
4144
|
-
*/
|
|
4145
|
-
hooks?: CodeGeneratorHooks;
|
|
4146
|
-
/**
|
|
4147
|
-
* Whether to include comments explaining each hook.
|
|
4148
|
-
* @default true
|
|
4149
|
-
*/
|
|
4150
|
-
includeHookComments?: boolean;
|
|
4151
|
-
};
|
|
4152
|
-
declare function generateCodeSnippet(config: any, format?: CodeFormat, options?: CodeGeneratorOptions): string;
|
|
4153
|
-
|
|
4154
|
-
/**
|
|
4155
|
-
* The current version of the @runtypelabs/persona package.
|
|
4156
|
-
* This is automatically derived from package.json.
|
|
4157
|
-
*/
|
|
4158
|
-
declare const VERSION: string;
|
|
4159
|
-
|
|
4160
|
-
declare class PluginRegistry {
|
|
4161
|
-
private plugins;
|
|
4162
|
-
/**
|
|
4163
|
-
* Register a plugin
|
|
4164
|
-
*/
|
|
4165
|
-
register(plugin: AgentWidgetPlugin): void;
|
|
4533
|
+
}) => unknown);
|
|
4166
4534
|
/**
|
|
4167
|
-
*
|
|
4535
|
+
* Custom action handlers array.
|
|
4536
|
+
* Array of handler functions.
|
|
4537
|
+
*
|
|
4538
|
+
* @example
|
|
4539
|
+
* ```typescript
|
|
4540
|
+
* [
|
|
4541
|
+
* (action, context) => {
|
|
4542
|
+
* if (action.type === 'custom') {
|
|
4543
|
+
* return { handled: true };
|
|
4544
|
+
* }
|
|
4545
|
+
* }
|
|
4546
|
+
* ]
|
|
4547
|
+
* ```
|
|
4168
4548
|
*/
|
|
4169
|
-
|
|
4549
|
+
actionHandlers?: string | Array<(action: unknown, context: unknown) => unknown>;
|
|
4170
4550
|
/**
|
|
4171
|
-
*
|
|
4551
|
+
* Custom action parsers array.
|
|
4552
|
+
* Array of parser functions.
|
|
4172
4553
|
*/
|
|
4173
|
-
|
|
4554
|
+
actionParsers?: string | Array<(context: unknown) => unknown>;
|
|
4174
4555
|
/**
|
|
4175
|
-
*
|
|
4176
|
-
*
|
|
4556
|
+
* Custom postprocessMessage function.
|
|
4557
|
+
* Receives { text, message, streaming, raw } context.
|
|
4558
|
+
* Will override the default markdownPostprocessor.
|
|
4559
|
+
*
|
|
4560
|
+
* @example
|
|
4561
|
+
* ```typescript
|
|
4562
|
+
* ({ text }) => customMarkdownProcessor(text)
|
|
4563
|
+
* ```
|
|
4177
4564
|
*/
|
|
4178
|
-
|
|
4565
|
+
postprocessMessage?: string | ((context: {
|
|
4566
|
+
text: string;
|
|
4567
|
+
message?: unknown;
|
|
4568
|
+
streaming?: boolean;
|
|
4569
|
+
raw?: string;
|
|
4570
|
+
}) => string);
|
|
4179
4571
|
/**
|
|
4180
|
-
*
|
|
4181
|
-
|
|
4182
|
-
|
|
4183
|
-
|
|
4184
|
-
declare const pluginRegistry: PluginRegistry;
|
|
4185
|
-
|
|
4186
|
-
type TokenType = 'color' | 'spacing' | 'typography' | 'shadow' | 'border' | 'radius';
|
|
4187
|
-
type TokenReference<_T extends TokenType = TokenType> = string;
|
|
4188
|
-
interface ColorShade {
|
|
4189
|
-
50?: string;
|
|
4190
|
-
100?: string;
|
|
4191
|
-
200?: string;
|
|
4192
|
-
300?: string;
|
|
4193
|
-
400?: string;
|
|
4194
|
-
500?: string;
|
|
4195
|
-
600?: string;
|
|
4196
|
-
700?: string;
|
|
4197
|
-
800?: string;
|
|
4198
|
-
900?: string;
|
|
4199
|
-
950?: string;
|
|
4200
|
-
[key: string]: string | undefined;
|
|
4201
|
-
}
|
|
4202
|
-
interface ColorPalette {
|
|
4203
|
-
gray: ColorShade;
|
|
4204
|
-
primary: ColorShade;
|
|
4205
|
-
secondary: ColorShade;
|
|
4206
|
-
accent: ColorShade;
|
|
4207
|
-
success: ColorShade;
|
|
4208
|
-
warning: ColorShade;
|
|
4209
|
-
error: ColorShade;
|
|
4210
|
-
[key: string]: ColorShade;
|
|
4211
|
-
}
|
|
4212
|
-
interface SpacingScale {
|
|
4213
|
-
0: string;
|
|
4214
|
-
1: string;
|
|
4215
|
-
2: string;
|
|
4216
|
-
3: string;
|
|
4217
|
-
4: string;
|
|
4218
|
-
5: string;
|
|
4219
|
-
6: string;
|
|
4220
|
-
8: string;
|
|
4221
|
-
10: string;
|
|
4222
|
-
12: string;
|
|
4223
|
-
16: string;
|
|
4224
|
-
20: string;
|
|
4225
|
-
24: string;
|
|
4226
|
-
32: string;
|
|
4227
|
-
40: string;
|
|
4228
|
-
48: string;
|
|
4229
|
-
56: string;
|
|
4230
|
-
64: string;
|
|
4231
|
-
[key: string]: string;
|
|
4232
|
-
}
|
|
4233
|
-
interface ShadowScale {
|
|
4234
|
-
none: string;
|
|
4235
|
-
sm: string;
|
|
4236
|
-
md: string;
|
|
4237
|
-
lg: string;
|
|
4238
|
-
xl: string;
|
|
4239
|
-
'2xl': string;
|
|
4240
|
-
[key: string]: string;
|
|
4241
|
-
}
|
|
4242
|
-
interface BorderScale {
|
|
4243
|
-
none: string;
|
|
4244
|
-
sm: string;
|
|
4245
|
-
md: string;
|
|
4246
|
-
lg: string;
|
|
4247
|
-
[key: string]: string;
|
|
4248
|
-
}
|
|
4249
|
-
interface RadiusScale {
|
|
4250
|
-
none: string;
|
|
4251
|
-
sm: string;
|
|
4252
|
-
md: string;
|
|
4253
|
-
lg: string;
|
|
4254
|
-
xl: string;
|
|
4255
|
-
full: string;
|
|
4256
|
-
[key: string]: string;
|
|
4257
|
-
}
|
|
4258
|
-
interface TypographyScale {
|
|
4259
|
-
fontFamily: {
|
|
4260
|
-
sans: string;
|
|
4261
|
-
serif: string;
|
|
4262
|
-
mono: string;
|
|
4263
|
-
};
|
|
4264
|
-
fontSize: {
|
|
4265
|
-
xs: string;
|
|
4266
|
-
sm: string;
|
|
4267
|
-
base: string;
|
|
4268
|
-
lg: string;
|
|
4269
|
-
xl: string;
|
|
4270
|
-
'2xl': string;
|
|
4271
|
-
'3xl': string;
|
|
4272
|
-
'4xl': string;
|
|
4273
|
-
};
|
|
4274
|
-
fontWeight: {
|
|
4275
|
-
normal: string;
|
|
4276
|
-
medium: string;
|
|
4277
|
-
semibold: string;
|
|
4278
|
-
bold: string;
|
|
4279
|
-
};
|
|
4280
|
-
lineHeight: {
|
|
4281
|
-
tight: string;
|
|
4282
|
-
normal: string;
|
|
4283
|
-
relaxed: string;
|
|
4284
|
-
};
|
|
4285
|
-
}
|
|
4286
|
-
interface SemanticColors {
|
|
4287
|
-
primary: TokenReference<'color'>;
|
|
4288
|
-
secondary: TokenReference<'color'>;
|
|
4289
|
-
accent: TokenReference<'color'>;
|
|
4290
|
-
surface: TokenReference<'color'>;
|
|
4291
|
-
background: TokenReference<'color'>;
|
|
4292
|
-
container: TokenReference<'color'>;
|
|
4293
|
-
text: TokenReference<'color'>;
|
|
4294
|
-
textMuted: TokenReference<'color'>;
|
|
4295
|
-
textInverse: TokenReference<'color'>;
|
|
4296
|
-
border: TokenReference<'color'>;
|
|
4297
|
-
divider: TokenReference<'color'>;
|
|
4298
|
-
interactive: {
|
|
4299
|
-
default: TokenReference<'color'>;
|
|
4300
|
-
hover: TokenReference<'color'>;
|
|
4301
|
-
focus: TokenReference<'color'>;
|
|
4302
|
-
active: TokenReference<'color'>;
|
|
4303
|
-
disabled: TokenReference<'color'>;
|
|
4304
|
-
};
|
|
4305
|
-
feedback: {
|
|
4306
|
-
success: TokenReference<'color'>;
|
|
4307
|
-
warning: TokenReference<'color'>;
|
|
4308
|
-
error: TokenReference<'color'>;
|
|
4309
|
-
info: TokenReference<'color'>;
|
|
4310
|
-
};
|
|
4311
|
-
}
|
|
4312
|
-
interface SemanticSpacing {
|
|
4313
|
-
xs: TokenReference<'spacing'>;
|
|
4314
|
-
sm: TokenReference<'spacing'>;
|
|
4315
|
-
md: TokenReference<'spacing'>;
|
|
4316
|
-
lg: TokenReference<'spacing'>;
|
|
4317
|
-
xl: TokenReference<'spacing'>;
|
|
4318
|
-
'2xl': TokenReference<'spacing'>;
|
|
4319
|
-
}
|
|
4320
|
-
interface SemanticTypography {
|
|
4321
|
-
fontFamily: TokenReference<'typography'>;
|
|
4322
|
-
fontSize: TokenReference<'typography'>;
|
|
4323
|
-
fontWeight: TokenReference<'typography'>;
|
|
4324
|
-
lineHeight: TokenReference<'typography'>;
|
|
4325
|
-
}
|
|
4326
|
-
interface SemanticTokens {
|
|
4327
|
-
colors: SemanticColors;
|
|
4328
|
-
spacing: SemanticSpacing;
|
|
4329
|
-
typography: SemanticTypography;
|
|
4330
|
-
}
|
|
4331
|
-
interface ComponentTokenSet {
|
|
4332
|
-
background?: TokenReference<'color'>;
|
|
4333
|
-
foreground?: TokenReference<'color'>;
|
|
4334
|
-
border?: TokenReference<'color'>;
|
|
4335
|
-
borderRadius?: TokenReference<'radius'>;
|
|
4336
|
-
padding?: TokenReference<'spacing'>;
|
|
4337
|
-
margin?: TokenReference<'spacing'>;
|
|
4338
|
-
shadow?: TokenReference<'shadow'>;
|
|
4339
|
-
opacity?: number;
|
|
4340
|
-
}
|
|
4341
|
-
interface ButtonTokens extends ComponentTokenSet {
|
|
4342
|
-
primary: ComponentTokenSet;
|
|
4343
|
-
secondary: ComponentTokenSet;
|
|
4344
|
-
ghost: ComponentTokenSet;
|
|
4345
|
-
}
|
|
4346
|
-
interface InputTokens extends ComponentTokenSet {
|
|
4347
|
-
background: TokenReference<'color'>;
|
|
4348
|
-
placeholder: TokenReference<'color'>;
|
|
4349
|
-
focus: {
|
|
4350
|
-
border: TokenReference<'color'>;
|
|
4351
|
-
ring: TokenReference<'color'>;
|
|
4352
|
-
};
|
|
4353
|
-
}
|
|
4354
|
-
interface LauncherTokens extends ComponentTokenSet {
|
|
4355
|
-
size: string;
|
|
4356
|
-
iconSize: string;
|
|
4357
|
-
shadow: TokenReference<'shadow'>;
|
|
4358
|
-
}
|
|
4359
|
-
interface PanelTokens extends ComponentTokenSet {
|
|
4360
|
-
width: string;
|
|
4361
|
-
maxWidth: string;
|
|
4362
|
-
height: string;
|
|
4363
|
-
maxHeight: string;
|
|
4364
|
-
}
|
|
4365
|
-
interface HeaderTokens extends ComponentTokenSet {
|
|
4366
|
-
background: TokenReference<'color'>;
|
|
4367
|
-
border: TokenReference<'color'>;
|
|
4368
|
-
borderRadius: TokenReference<'radius'>;
|
|
4369
|
-
}
|
|
4370
|
-
interface MessageTokens {
|
|
4371
|
-
user: {
|
|
4372
|
-
background: TokenReference<'color'>;
|
|
4373
|
-
text: TokenReference<'color'>;
|
|
4374
|
-
borderRadius: TokenReference<'radius'>;
|
|
4375
|
-
/** User bubble box-shadow (token ref or raw CSS, e.g. `none`). */
|
|
4376
|
-
shadow?: string;
|
|
4377
|
-
};
|
|
4378
|
-
assistant: {
|
|
4379
|
-
background: TokenReference<'color'>;
|
|
4380
|
-
text: TokenReference<'color'>;
|
|
4381
|
-
borderRadius: TokenReference<'radius'>;
|
|
4382
|
-
/** Assistant bubble border color (CSS color). */
|
|
4383
|
-
border?: TokenReference<'color'>;
|
|
4384
|
-
/** Assistant bubble box-shadow (token ref or raw CSS, e.g. `none`). */
|
|
4385
|
-
shadow?: string;
|
|
4386
|
-
};
|
|
4387
|
-
}
|
|
4388
|
-
interface MarkdownTokens {
|
|
4389
|
-
inlineCode: {
|
|
4390
|
-
background: TokenReference<'color'>;
|
|
4391
|
-
foreground: TokenReference<'color'>;
|
|
4392
|
-
};
|
|
4393
|
-
/** Foreground for `<a>` in rendered markdown (assistant bubbles + artifact pane). */
|
|
4394
|
-
link?: {
|
|
4395
|
-
foreground: TokenReference<'color'>;
|
|
4396
|
-
};
|
|
4572
|
+
* Custom context providers array.
|
|
4573
|
+
* Array of provider functions.
|
|
4574
|
+
*/
|
|
4575
|
+
contextProviders?: string | Array<() => unknown>;
|
|
4397
4576
|
/**
|
|
4398
|
-
*
|
|
4399
|
-
*
|
|
4577
|
+
* Custom stream parser factory.
|
|
4578
|
+
* Should be a function that returns a StreamParser.
|
|
4400
4579
|
*/
|
|
4401
|
-
|
|
4402
|
-
|
|
4403
|
-
|
|
4404
|
-
|
|
4405
|
-
|
|
4406
|
-
|
|
4407
|
-
|
|
4408
|
-
|
|
4409
|
-
|
|
4410
|
-
|
|
4411
|
-
|
|
4412
|
-
|
|
4413
|
-
|
|
4414
|
-
|
|
4415
|
-
|
|
4416
|
-
|
|
4417
|
-
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
4421
|
-
|
|
4422
|
-
|
|
4423
|
-
|
|
4424
|
-
|
|
4425
|
-
|
|
4426
|
-
|
|
4427
|
-
|
|
4428
|
-
|
|
4580
|
+
streamParser?: string | (() => unknown);
|
|
4581
|
+
};
|
|
4582
|
+
/**
|
|
4583
|
+
* Options for code generation beyond format selection.
|
|
4584
|
+
*/
|
|
4585
|
+
type CodeGeneratorOptions = {
|
|
4586
|
+
/**
|
|
4587
|
+
* Custom hook code to inject into the generated snippet.
|
|
4588
|
+
* Hooks are JavaScript/TypeScript code strings that will be
|
|
4589
|
+
* inserted at appropriate locations in the output.
|
|
4590
|
+
*/
|
|
4591
|
+
hooks?: CodeGeneratorHooks;
|
|
4592
|
+
/**
|
|
4593
|
+
* Whether to include comments explaining each hook.
|
|
4594
|
+
* @default true
|
|
4595
|
+
*/
|
|
4596
|
+
includeHookComments?: boolean;
|
|
4597
|
+
};
|
|
4598
|
+
declare function generateCodeSnippet(config: any, format?: CodeFormat, options?: CodeGeneratorOptions): string;
|
|
4599
|
+
|
|
4600
|
+
/**
|
|
4601
|
+
* The current version of the @runtypelabs/persona package.
|
|
4602
|
+
* This is automatically derived from package.json.
|
|
4603
|
+
*/
|
|
4604
|
+
declare const VERSION: string;
|
|
4605
|
+
|
|
4606
|
+
declare class PluginRegistry {
|
|
4607
|
+
private plugins;
|
|
4608
|
+
/**
|
|
4609
|
+
* Register a plugin
|
|
4610
|
+
*/
|
|
4611
|
+
register(plugin: AgentWidgetPlugin): void;
|
|
4612
|
+
/**
|
|
4613
|
+
* Unregister a plugin
|
|
4614
|
+
*/
|
|
4615
|
+
unregister(pluginId: string): void;
|
|
4616
|
+
/**
|
|
4617
|
+
* Get all plugins sorted by priority
|
|
4618
|
+
*/
|
|
4619
|
+
getAll(): AgentWidgetPlugin[];
|
|
4620
|
+
/**
|
|
4621
|
+
* Get plugins for a specific instance (from config)
|
|
4622
|
+
* Merges instance plugins with globally registered plugins
|
|
4623
|
+
*/
|
|
4624
|
+
getForInstance(instancePlugins?: AgentWidgetPlugin[]): AgentWidgetPlugin[];
|
|
4625
|
+
/**
|
|
4626
|
+
* Clear all plugins
|
|
4627
|
+
*/
|
|
4628
|
+
clear(): void;
|
|
4429
4629
|
}
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
|
|
4433
|
-
|
|
4434
|
-
|
|
4435
|
-
|
|
4436
|
-
|
|
4437
|
-
|
|
4630
|
+
declare const pluginRegistry: PluginRegistry;
|
|
4631
|
+
|
|
4632
|
+
interface DropdownMenuItem {
|
|
4633
|
+
id: string;
|
|
4634
|
+
label: string;
|
|
4635
|
+
/** Lucide icon name to show before the label. */
|
|
4636
|
+
icon?: string;
|
|
4637
|
+
/** When true, item text is styled in a destructive/danger color. */
|
|
4638
|
+
destructive?: boolean;
|
|
4639
|
+
/** When true, a visual divider is inserted before this item. */
|
|
4640
|
+
dividerBefore?: boolean;
|
|
4438
4641
|
}
|
|
4439
|
-
interface
|
|
4440
|
-
|
|
4441
|
-
|
|
4442
|
-
|
|
4443
|
-
|
|
4642
|
+
interface CreateDropdownOptions {
|
|
4643
|
+
/** Menu items to render. */
|
|
4644
|
+
items: DropdownMenuItem[];
|
|
4645
|
+
/** Called when a menu item is selected. */
|
|
4646
|
+
onSelect: (id: string) => void;
|
|
4647
|
+
/** Anchor element used for positioning. When `portal` is not set the menu is appended inside this element (which must have position: relative). */
|
|
4648
|
+
anchor: HTMLElement;
|
|
4649
|
+
/** Alignment of the menu relative to the anchor. Default: 'bottom-left'. */
|
|
4650
|
+
position?: 'bottom-left' | 'bottom-right';
|
|
4651
|
+
/**
|
|
4652
|
+
* Portal target element. When set, the menu is appended to this element
|
|
4653
|
+
* and uses fixed positioning calculated from the anchor's bounding rect.
|
|
4654
|
+
* Use this to escape `overflow: hidden` containers.
|
|
4655
|
+
*/
|
|
4656
|
+
portal?: HTMLElement;
|
|
4444
4657
|
}
|
|
4445
|
-
|
|
4446
|
-
|
|
4447
|
-
|
|
4448
|
-
|
|
4658
|
+
interface DropdownMenuHandle {
|
|
4659
|
+
/** The menu DOM element. */
|
|
4660
|
+
element: HTMLElement;
|
|
4661
|
+
/** Show the menu. */
|
|
4662
|
+
show: () => void;
|
|
4663
|
+
/** Hide the menu. */
|
|
4664
|
+
hide: () => void;
|
|
4665
|
+
/** Toggle visibility. */
|
|
4666
|
+
toggle: () => void;
|
|
4667
|
+
/** Remove the menu and clean up all listeners. */
|
|
4668
|
+
destroy: () => void;
|
|
4449
4669
|
}
|
|
4450
|
-
/**
|
|
4451
|
-
|
|
4452
|
-
|
|
4670
|
+
/**
|
|
4671
|
+
* Create a dropdown menu attached to an anchor element.
|
|
4672
|
+
*
|
|
4673
|
+
* The menu is styled via `.persona-dropdown-menu` CSS rules and themed
|
|
4674
|
+
* through `--persona-dropdown-*` CSS variables with semantic fallbacks.
|
|
4675
|
+
*
|
|
4676
|
+
* ```ts
|
|
4677
|
+
* import { createDropdownMenu } from "@runtypelabs/persona";
|
|
4678
|
+
*
|
|
4679
|
+
* const dropdown = createDropdownMenu({
|
|
4680
|
+
* items: [
|
|
4681
|
+
* { id: "edit", label: "Edit", icon: "pencil" },
|
|
4682
|
+
* { id: "delete", label: "Delete", icon: "trash-2", destructive: true, dividerBefore: true },
|
|
4683
|
+
* ],
|
|
4684
|
+
* onSelect: (id) => console.log("selected", id),
|
|
4685
|
+
* anchor: buttonElement,
|
|
4686
|
+
* });
|
|
4687
|
+
* anchor.appendChild(dropdown.element);
|
|
4688
|
+
* button.addEventListener("click", () => dropdown.toggle());
|
|
4689
|
+
* ```
|
|
4690
|
+
*/
|
|
4691
|
+
declare function createDropdownMenu(options: CreateDropdownOptions): DropdownMenuHandle;
|
|
4692
|
+
|
|
4693
|
+
/** Options for {@link createIconButton}. */
|
|
4694
|
+
interface CreateIconButtonOptions {
|
|
4695
|
+
/** Lucide icon name (kebab-case, e.g. "eye", "chevron-down"). */
|
|
4696
|
+
icon: string;
|
|
4697
|
+
/** Accessible label (used for aria-label and title). */
|
|
4698
|
+
label: string;
|
|
4699
|
+
/** Icon size in pixels. Default: 16. */
|
|
4700
|
+
size?: number;
|
|
4701
|
+
/** Icon stroke width. Default: 2. */
|
|
4702
|
+
strokeWidth?: number;
|
|
4703
|
+
/** Extra CSS class(es) appended after "persona-icon-btn". */
|
|
4704
|
+
className?: string;
|
|
4705
|
+
/** Click handler. */
|
|
4706
|
+
onClick?: (e: MouseEvent) => void;
|
|
4707
|
+
/** Additional ARIA attributes (e.g. { "aria-haspopup": "true" }). */
|
|
4708
|
+
aria?: Record<string, string>;
|
|
4453
4709
|
}
|
|
4454
|
-
/**
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
|
|
4710
|
+
/**
|
|
4711
|
+
* Creates a minimal icon-only button with accessible labelling.
|
|
4712
|
+
*
|
|
4713
|
+
* The button receives the base class `persona-icon-btn` and renders a single
|
|
4714
|
+
* Lucide icon inside it.
|
|
4715
|
+
*/
|
|
4716
|
+
declare function createIconButton(options: CreateIconButtonOptions): HTMLButtonElement;
|
|
4717
|
+
/** Options for {@link createLabelButton}. */
|
|
4718
|
+
interface CreateLabelButtonOptions {
|
|
4719
|
+
/** Optional Lucide icon name shown before the label. */
|
|
4720
|
+
icon?: string;
|
|
4721
|
+
/** Button text label (also used for aria-label). */
|
|
4722
|
+
label: string;
|
|
4723
|
+
/** Visual variant. Default: "default". */
|
|
4724
|
+
variant?: "default" | "primary" | "destructive" | "ghost";
|
|
4725
|
+
/** Size preset. Default: "sm". */
|
|
4726
|
+
size?: "sm" | "md";
|
|
4727
|
+
/** Icon size in pixels. Default: 14. */
|
|
4728
|
+
iconSize?: number;
|
|
4729
|
+
/** Extra CSS class(es). */
|
|
4730
|
+
className?: string;
|
|
4731
|
+
/** Click handler. */
|
|
4732
|
+
onClick?: (e: MouseEvent) => void;
|
|
4733
|
+
/** Additional ARIA attributes. */
|
|
4734
|
+
aria?: Record<string, string>;
|
|
4458
4735
|
}
|
|
4459
|
-
/**
|
|
4460
|
-
|
|
4461
|
-
|
|
4462
|
-
|
|
4463
|
-
|
|
4464
|
-
|
|
4465
|
-
|
|
4466
|
-
|
|
4467
|
-
|
|
4468
|
-
|
|
4469
|
-
|
|
4470
|
-
|
|
4471
|
-
|
|
4472
|
-
|
|
4473
|
-
copyMenuBackground?: string;
|
|
4474
|
-
copyMenuBorder?: string;
|
|
4475
|
-
copyMenuShadow?: string;
|
|
4476
|
-
copyMenuBorderRadius?: string;
|
|
4477
|
-
copyMenuItemHoverBackground?: string;
|
|
4736
|
+
/**
|
|
4737
|
+
* Creates a button with an optional leading icon and a text label.
|
|
4738
|
+
*
|
|
4739
|
+
* CSS classes follow the BEM-like pattern:
|
|
4740
|
+
* `persona-label-btn persona-label-btn--{variant} persona-label-btn--{size}`
|
|
4741
|
+
*/
|
|
4742
|
+
declare function createLabelButton(options: CreateLabelButtonOptions): HTMLButtonElement;
|
|
4743
|
+
/** Describes a single item inside a toggle group. */
|
|
4744
|
+
interface ToggleGroupItem {
|
|
4745
|
+
id: string;
|
|
4746
|
+
/** Lucide icon name. If omitted, uses label as text. */
|
|
4747
|
+
icon?: string;
|
|
4748
|
+
/** Accessible label for the button. */
|
|
4749
|
+
label: string;
|
|
4478
4750
|
}
|
|
4479
|
-
/**
|
|
4480
|
-
interface
|
|
4481
|
-
|
|
4482
|
-
|
|
4483
|
-
|
|
4484
|
-
|
|
4485
|
-
|
|
4751
|
+
/** Options for {@link createToggleGroup}. */
|
|
4752
|
+
interface CreateToggleGroupOptions {
|
|
4753
|
+
/** Toggle items. */
|
|
4754
|
+
items: ToggleGroupItem[];
|
|
4755
|
+
/** Initially selected item id. */
|
|
4756
|
+
selectedId: string;
|
|
4757
|
+
/** Called when selection changes. */
|
|
4758
|
+
onSelect: (id: string) => void;
|
|
4759
|
+
/** Extra CSS class(es) on the wrapper. */
|
|
4760
|
+
className?: string;
|
|
4486
4761
|
}
|
|
4487
|
-
/**
|
|
4488
|
-
interface
|
|
4489
|
-
|
|
4762
|
+
/** Handle returned by {@link createToggleGroup}. */
|
|
4763
|
+
interface ToggleGroupHandle {
|
|
4764
|
+
/** The wrapper element containing toggle buttons. */
|
|
4765
|
+
element: HTMLElement;
|
|
4766
|
+
/** Programmatically change the selected item. */
|
|
4767
|
+
setSelected: (id: string) => void;
|
|
4490
4768
|
}
|
|
4491
|
-
|
|
4492
|
-
|
|
4493
|
-
|
|
4494
|
-
|
|
4495
|
-
|
|
4496
|
-
|
|
4497
|
-
|
|
4498
|
-
|
|
4499
|
-
|
|
4500
|
-
|
|
4501
|
-
|
|
4502
|
-
|
|
4503
|
-
|
|
4504
|
-
|
|
4505
|
-
|
|
4506
|
-
/**
|
|
4507
|
-
|
|
4508
|
-
|
|
4509
|
-
|
|
4510
|
-
|
|
4769
|
+
/**
|
|
4770
|
+
* Creates a group of mutually-exclusive toggle buttons.
|
|
4771
|
+
*
|
|
4772
|
+
* Each button uses `aria-pressed` to communicate its state. Only one button
|
|
4773
|
+
* can be active at a time.
|
|
4774
|
+
*/
|
|
4775
|
+
declare function createToggleGroup(options: CreateToggleGroupOptions): ToggleGroupHandle;
|
|
4776
|
+
/** Options for {@link createComboButton}. */
|
|
4777
|
+
interface CreateComboButtonOptions {
|
|
4778
|
+
/** Button text label. */
|
|
4779
|
+
label: string;
|
|
4780
|
+
/** Lucide icon name for the dropdown indicator (default: "chevron-down"). */
|
|
4781
|
+
icon?: string;
|
|
4782
|
+
/** Dropdown menu items. */
|
|
4783
|
+
menuItems: DropdownMenuItem[];
|
|
4784
|
+
/** Called when a menu item is selected. */
|
|
4785
|
+
onSelect: (id: string) => void;
|
|
4786
|
+
/** Where to align the dropdown. Default: "bottom-left". */
|
|
4787
|
+
position?: "bottom-left" | "bottom-right";
|
|
4788
|
+
/**
|
|
4789
|
+
* Portal target for the dropdown menu. When set, the menu escapes
|
|
4790
|
+
* overflow containers by rendering inside this element with fixed positioning.
|
|
4791
|
+
*/
|
|
4792
|
+
portal?: HTMLElement;
|
|
4793
|
+
/** Extra CSS class(es) on the wrapper element. */
|
|
4794
|
+
className?: string;
|
|
4795
|
+
/** Hover style for the pill effect. */
|
|
4796
|
+
hover?: {
|
|
4797
|
+
background?: string;
|
|
4798
|
+
border?: string;
|
|
4799
|
+
borderRadius?: string;
|
|
4800
|
+
padding?: string;
|
|
4511
4801
|
};
|
|
4512
4802
|
}
|
|
4513
|
-
|
|
4514
|
-
|
|
4515
|
-
|
|
4516
|
-
|
|
4517
|
-
|
|
4518
|
-
|
|
4519
|
-
|
|
4520
|
-
|
|
4521
|
-
|
|
4522
|
-
|
|
4523
|
-
|
|
4524
|
-
|
|
4525
|
-
|
|
4526
|
-
|
|
4527
|
-
interface PersonaThemeSemantic {
|
|
4528
|
-
semantic: SemanticTokens;
|
|
4529
|
-
}
|
|
4530
|
-
interface PersonaThemeComponents {
|
|
4531
|
-
components: ComponentTokens;
|
|
4532
|
-
}
|
|
4533
|
-
type PersonaTheme = PersonaThemeBase & PersonaThemeSemantic & PersonaThemeComponents;
|
|
4534
|
-
interface ResolvedToken {
|
|
4535
|
-
path: string;
|
|
4536
|
-
value: string;
|
|
4537
|
-
type: TokenType;
|
|
4538
|
-
}
|
|
4539
|
-
interface ThemeValidationError {
|
|
4540
|
-
path: string;
|
|
4541
|
-
message: string;
|
|
4542
|
-
severity: 'error' | 'warning';
|
|
4543
|
-
}
|
|
4544
|
-
interface ThemeValidationResult {
|
|
4545
|
-
valid: boolean;
|
|
4546
|
-
errors: ThemeValidationError[];
|
|
4547
|
-
warnings: ThemeValidationError[];
|
|
4548
|
-
}
|
|
4549
|
-
interface PersonaThemePlugin {
|
|
4550
|
-
name: string;
|
|
4551
|
-
version: string;
|
|
4552
|
-
transform(theme: PersonaTheme): PersonaTheme;
|
|
4553
|
-
cssVariables?: Record<string, string>;
|
|
4554
|
-
afterResolve?(resolved: Record<string, string>): Record<string, string>;
|
|
4555
|
-
}
|
|
4556
|
-
interface CreateThemeOptions {
|
|
4557
|
-
plugins?: PersonaThemePlugin[];
|
|
4558
|
-
validate?: boolean;
|
|
4559
|
-
extend?: PersonaTheme;
|
|
4803
|
+
/** Handle returned by {@link createComboButton}. */
|
|
4804
|
+
interface ComboButtonHandle {
|
|
4805
|
+
/** The wrapper element (label + chevron + dropdown). */
|
|
4806
|
+
element: HTMLElement;
|
|
4807
|
+
/** Update the displayed label text. */
|
|
4808
|
+
setLabel: (text: string) => void;
|
|
4809
|
+
/** Open the dropdown. */
|
|
4810
|
+
open: () => void;
|
|
4811
|
+
/** Close the dropdown. */
|
|
4812
|
+
close: () => void;
|
|
4813
|
+
/** Toggle the dropdown. */
|
|
4814
|
+
toggle: () => void;
|
|
4815
|
+
/** Remove from DOM and clean up listeners. */
|
|
4816
|
+
destroy: () => void;
|
|
4560
4817
|
}
|
|
4818
|
+
/**
|
|
4819
|
+
* Creates a combo button — a clickable label with a chevron that opens a dropdown menu.
|
|
4820
|
+
*
|
|
4821
|
+
* The entire label + chevron area acts as a single interactive unit with an optional
|
|
4822
|
+
* hover pill effect. Clicking anywhere on it toggles the dropdown.
|
|
4823
|
+
*
|
|
4824
|
+
* ```ts
|
|
4825
|
+
* import { createComboButton } from "@runtypelabs/persona";
|
|
4826
|
+
*
|
|
4827
|
+
* const combo = createComboButton({
|
|
4828
|
+
* label: "Chat Assistant",
|
|
4829
|
+
* menuItems: [
|
|
4830
|
+
* { id: "star", label: "Star", icon: "star" },
|
|
4831
|
+
* { id: "rename", label: "Rename", icon: "pencil" },
|
|
4832
|
+
* { id: "delete", label: "Delete", icon: "trash-2", destructive: true, dividerBefore: true },
|
|
4833
|
+
* ],
|
|
4834
|
+
* onSelect: (id) => console.log("Selected:", id),
|
|
4835
|
+
* });
|
|
4836
|
+
* header.appendChild(combo.element);
|
|
4837
|
+
* ```
|
|
4838
|
+
*/
|
|
4839
|
+
declare function createComboButton(options: CreateComboButtonOptions): ComboButtonHandle;
|
|
4561
4840
|
|
|
4562
4841
|
declare const DEFAULT_PALETTE: {
|
|
4563
4842
|
colors: {
|
|
@@ -4726,7 +5005,7 @@ declare const DEFAULT_SEMANTIC: SemanticTokens;
|
|
|
4726
5005
|
declare const DEFAULT_COMPONENTS: ComponentTokens;
|
|
4727
5006
|
declare function resolveTokens(theme: PersonaTheme): Record<string, ResolvedToken>;
|
|
4728
5007
|
declare function validateTheme(theme: Partial<PersonaTheme>): ThemeValidationResult;
|
|
4729
|
-
declare function createTheme(userConfig?:
|
|
5008
|
+
declare function createTheme(userConfig?: DeepPartial<PersonaTheme>, options?: CreateThemeOptions): PersonaTheme;
|
|
4730
5009
|
declare function themeToCssVariables(theme: PersonaTheme): Record<string, string>;
|
|
4731
5010
|
/**
|
|
4732
5011
|
* Stable `data-persona-theme-zone` values applied to key widget regions.
|
|
@@ -4747,8 +5026,8 @@ type ThemeZone = keyof typeof THEME_ZONES;
|
|
|
4747
5026
|
|
|
4748
5027
|
type ColorScheme = 'light' | 'dark' | 'auto';
|
|
4749
5028
|
interface PersonaWidgetConfig {
|
|
4750
|
-
theme?:
|
|
4751
|
-
darkTheme?:
|
|
5029
|
+
theme?: DeepPartial<PersonaTheme>;
|
|
5030
|
+
darkTheme?: DeepPartial<PersonaTheme>;
|
|
4752
5031
|
colorScheme?: ColorScheme;
|
|
4753
5032
|
}
|
|
4754
5033
|
type WidgetConfig = PersonaWidgetConfig | AgentWidgetConfig;
|
|
@@ -4778,16 +5057,6 @@ declare function createPlugin(config: {
|
|
|
4778
5057
|
afterResolve?: (resolved: Record<string, string>) => Record<string, string>;
|
|
4779
5058
|
}): PersonaThemePlugin;
|
|
4780
5059
|
|
|
4781
|
-
interface V1ToV2MigrationOptions {
|
|
4782
|
-
warn?: boolean;
|
|
4783
|
-
colorScheme?: 'light' | 'dark' | 'auto';
|
|
4784
|
-
}
|
|
4785
|
-
declare function migrateV1Theme(v1Theme: AgentWidgetTheme | undefined, options?: V1ToV2MigrationOptions): Partial<PersonaTheme>;
|
|
4786
|
-
declare function validateV1Theme(v1Theme: unknown): {
|
|
4787
|
-
valid: boolean;
|
|
4788
|
-
warnings: string[];
|
|
4789
|
-
};
|
|
4790
|
-
|
|
4791
5060
|
/**
|
|
4792
5061
|
* Context provided to component renderers
|
|
4793
5062
|
*/
|
|
@@ -4965,14 +5234,6 @@ declare function hasComponentDirective(message: AgentWidgetMessage): boolean;
|
|
|
4965
5234
|
*/
|
|
4966
5235
|
declare function extractComponentDirectiveFromMessage(message: AgentWidgetMessage): ComponentDirective | null;
|
|
4967
5236
|
|
|
4968
|
-
/**
|
|
4969
|
-
* Default light theme colors
|
|
4970
|
-
*/
|
|
4971
|
-
declare const DEFAULT_LIGHT_THEME: AgentWidgetTheme;
|
|
4972
|
-
/**
|
|
4973
|
-
* Default dark theme colors
|
|
4974
|
-
*/
|
|
4975
|
-
declare const DEFAULT_DARK_THEME: AgentWidgetTheme;
|
|
4976
5237
|
/**
|
|
4977
5238
|
* Default widget configuration
|
|
4978
5239
|
* Single source of truth for all default values
|
|
@@ -5104,4 +5365,4 @@ declare function createVoiceProvider(config: VoiceConfig): VoiceProvider;
|
|
|
5104
5365
|
declare function createBestAvailableVoiceProvider(config?: Partial<VoiceConfig>): VoiceProvider;
|
|
5105
5366
|
declare function isVoiceSupported(config?: Partial<VoiceConfig>): boolean;
|
|
5106
5367
|
|
|
5107
|
-
export { type AgentConfig, type AgentExecutionState, type AgentLoopConfig, type AgentMessageMetadata, type AgentRequestOptions, type AgentToolsConfig, type AgentWidgetAgentRequestPayload, type AgentWidgetApproval, type AgentWidgetApprovalConfig, type AgentWidgetArtifactsFeature, type AgentWidgetArtifactsLayoutConfig, type AgentWidgetAttachmentsConfig, type AgentWidgetAvatarConfig, AgentWidgetClient, type AgentWidgetComposerConfig, type AgentWidgetConfig, type AgentWidgetController, type AgentWidgetControllerEventMap, type AgentWidgetCustomFetch, type AgentWidgetDockConfig, type AgentWidgetEvent, type AgentWidgetFeatureFlags, type AgentWidgetHeaderLayoutConfig, type AgentWidgetHeadersFunction, type AgentWidgetInitHandle, type AgentWidgetInitOptions, type AgentWidgetLauncherConfig, type AgentWidgetLayoutConfig, type AgentWidgetLoadingIndicatorConfig, type AgentWidgetMarkdownConfig, type AgentWidgetMarkdownOptions, type AgentWidgetMarkdownRendererOverrides, type AgentWidgetMessage, type AgentWidgetMessageActionsConfig, type AgentWidgetMessageFeedback, type AgentWidgetMessageLayoutConfig, type AgentWidgetPlugin, type AgentWidgetRequestPayload, type AgentWidgetSSEEventParser, type AgentWidgetSSEEventResult, AgentWidgetSession, type AgentWidgetSessionStatus, type AgentWidgetStreamParser, type AgentWidgetStreamParserResult, type
|
|
5368
|
+
export { type AgentConfig, type AgentExecutionState, type AgentLoopConfig, type AgentMessageMetadata, type AgentRequestOptions, type AgentToolsConfig, type AgentWidgetAgentRequestPayload, type AgentWidgetApproval, type AgentWidgetApprovalConfig, type AgentWidgetArtifactsFeature, type AgentWidgetArtifactsLayoutConfig, type AgentWidgetAttachmentsConfig, type AgentWidgetAvatarConfig, AgentWidgetClient, type AgentWidgetComposerConfig, type AgentWidgetConfig, type AgentWidgetController, type AgentWidgetControllerEventMap, type AgentWidgetCustomFetch, type AgentWidgetDockConfig, type AgentWidgetEvent, type AgentWidgetFeatureFlags, type AgentWidgetHeaderLayoutConfig, type AgentWidgetHeadersFunction, type AgentWidgetInitHandle, type AgentWidgetInitOptions, type AgentWidgetLauncherConfig, type AgentWidgetLayoutConfig, type AgentWidgetLoadingIndicatorConfig, type AgentWidgetMarkdownConfig, type AgentWidgetMarkdownOptions, type AgentWidgetMarkdownRendererOverrides, type AgentWidgetMessage, type AgentWidgetMessageActionsConfig, type AgentWidgetMessageFeedback, type AgentWidgetMessageLayoutConfig, type AgentWidgetPlugin, type AgentWidgetRequestPayload, type AgentWidgetSSEEventParser, type AgentWidgetSSEEventResult, AgentWidgetSession, type AgentWidgetSessionStatus, type AgentWidgetStreamParser, type AgentWidgetStreamParserResult, type AgentWidgetTimestampConfig, type ArtifactConfigPayload, type ArtifactPaneTokens, type ArtifactTabTokens, type ArtifactToolbarTokens, AttachmentManager, type AttachmentManagerConfig, type BorderScale, type CSATFeedbackOptions, type ClientChatRequest, type ClientFeedbackRequest, type ClientFeedbackType, type ClientInitResponse, type ClientSession, type CodeFormat, type CodeGeneratorHooks, type CodeGeneratorOptions, type ColorPalette, type ColorShade, type ComboButtonHandle, type ComponentContext, type ComponentDirective, type ComponentRenderer, type ComponentTokens, type ComposerBuildContext, type ComposerElements, type ContentPart, type CreateComboButtonOptions, type CreateDropdownOptions, type CreateIconButtonOptions, type CreateLabelButtonOptions, type CreateStandardBubbleOptions, type CreateThemeOptions, type CreateToggleGroupOptions, DEFAULT_COMPONENTS, DEFAULT_PALETTE, DEFAULT_SEMANTIC, DEFAULT_WIDGET_CONFIG, type DeepPartial, type DomContextMode, type DomContextOptions, type DropdownMenuHandle, type DropdownMenuItem, type EnrichedPageElement, type EventStreamBadgeColor, type EventStreamConfig, type EventStreamPayloadRenderContext, type EventStreamRowRenderContext, type EventStreamToolbarRenderContext, type EventStreamViewRenderContext, type FormatEnrichedContextOptions, type HeaderBuildContext, type HeaderElements, type HeaderLayoutContext, type HeaderLayoutRenderer, type HeaderRenderContext, type IconButtonTokens, type IdleIndicatorRenderContext, type ImageContentPart, type InjectAssistantMessageOptions, type InjectMessageOptions, type InjectSystemMessageOptions, type InjectUserMessageOptions, type LabelButtonTokens, type LoadingIndicatorRenderContext, type LoadingIndicatorRenderer, type MarkdownProcessorOptions, type MessageActionCallbacks, type MessageContent, type MessageRenderContext, type MessageTransform, type NPSFeedbackOptions, PRESETS, PRESET_FULLSCREEN, PRESET_MINIMAL, PRESET_SHOP, type ParseOptionsConfig, type ParseRule, type PendingAttachment, type PersonaArtifactKind, type PersonaArtifactManualUpsert, type PersonaArtifactRecord, type PersonaTheme, type PersonaThemePlugin, type RadiusScale, type RuleScoringContext, type SSEEventCallback, type SSEEventRecord, type SanitizeFunction, type SemanticColors, type SemanticSpacing, type SemanticTypography, type ShadowScale, type SlotRenderContext, type SlotRenderer, type SpacingScale, THEME_ZONES, type TextContentPart, type ThemeValidationError, type ThemeValidationResult, type ThemeZone, type ToggleGroupHandle, type ToggleGroupItem, type ToggleGroupTokens, type TokenReference, type TypographyScale, VERSION, type VoiceConfig, type VoiceProvider, type VoiceResult, type VoiceStatus, type WidgetHostLayout, type WidgetHostLayoutMode, type WidgetLayoutSlot, type WidgetPreset, accessibilityPlugin, animationsPlugin, applyThemeVariables, attachHeaderToContainer, brandPlugin, buildComposer, buildDefaultHeader, buildHeader, buildHeaderWithLayout, buildMinimalHeader, collectEnrichedPageContext, componentRegistry, createActionManager, createAgentExperience, createBestAvailableVoiceProvider, createBubbleWithLayout, createCSATFeedback, createComboButton, createComponentMiddleware, createComponentStreamParser, createDefaultSanitizer, createDirectivePostprocessor, createDropdownMenu, createFlexibleJsonStreamParser, createIconButton, createImagePart, createJsonStreamParser, createLabelButton, createLocalStorageAdapter, createMarkdownProcessor, createMarkdownProcessorFromConfig, createMessageActions, createNPSFeedback, createPlainTextParser, createPlugin, createRegexJsonParser, createStandardBubble, createTextPart, createTheme, createThemeObserver, createToggleGroup, createTypingIndicator, createVoiceProvider, createWidgetHostLayout, createXmlParser, initAgentWidget as default, defaultActionHandlers, defaultJsonActionParser, defaultParseRules, detectColorScheme, directivePostprocessor, escapeHtml, extractComponentDirectiveFromMessage, fileToImagePart, formatEnrichedContext, generateAssistantMessageId, generateCodeSnippet, generateMessageId, generateStableSelector, generateUserMessageId, getActiveTheme, getColorScheme, getDisplayText, getHeaderLayout, getImageParts, getPreset, hasComponentDirective, hasImages, headerLayouts, highContrastPlugin, initAgentWidget, isComponentDirectiveType, isDockedMountMode, isVoiceSupported, markdownPostprocessor, mergeWithDefaults, normalizeContent, pluginRegistry, reducedMotionPlugin, renderComponentDirective, renderLoadingIndicatorWithFallback, resolveDockConfig, resolveSanitizer, resolveTokens, themeToCssVariables, validateImageFile, validateTheme };
|