@runtypelabs/persona 4.7.0 → 4.9.0

package/src/theme-editor/preview.ts

@@ -317,6 +317,8 @@ export function createThemePreview(
             artifactType: 'markdown',
             title: 'Sample Document',
             content: '# Sample Artifact\n\nThis is a preview of the artifact sidebar.\n\n## Features\n\n- Markdown rendering\n- Document toolbar\n- Resizable panes',
+            // Pane-only preview: showcase the sidebar without a chat block.
+            transcript: false,
           });
         }
       }

package/src/theme-editor/sections.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { COMPONENTS_SECTIONS, CONFIGURE_SECTIONS, INTERFACE_ROLES_SECTION } from "./sections";
+import { COMPONENTS_SECTIONS, CONFIGURE_SECTIONS, INTERFACE_ROLES_SECTION, STYLE_SECTIONS } from "./sections";
 import { ALL_ROLES } from "./role-mappings";
 
 describe("theme editor scroll-to-bottom controls", () => {
@@ -44,6 +44,14 @@ describe("theme editor scroll-to-bottom controls", () => {
     expect(fieldPaths).toContain("theme.components.composer.shadow");
   });
 
+  it("exposes detached panel token controls", () => {
+    const componentPaths = COMPONENTS_SECTIONS.flatMap((section) => section.fields.map((field) => field.path));
+    const stylePaths = STYLE_SECTIONS.flatMap((section) => section.fields.map((field) => field.path));
+
+    expect(componentPaths).toContain("theme.components.panel.inset");
+    expect(stylePaths).toContain("theme.components.panel.canvasBackground");
+  });
+
   it("adds a scroll-to-bottom interface role mapping", () => {
     const role = ALL_ROLES.find((entry) => entry.roleId === "role-scroll-to-bottom");
 
@@ -67,6 +75,23 @@ describe("theme editor scroll-to-bottom controls", () => {
     expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.activeMinHeight")).toBe(true);
     expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.expandable")).toBe(true);
     expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.grouped")).toBe(true);
+    expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.groupedMode")).toBe(true);
+  });
+
+  it("exposes product-facing artifact toolbar copy", () => {
+    const section = CONFIGURE_SECTIONS.find((entry) => entry.id === "artifacts-customization");
+    const paths = section?.fields.map((field) => field.path) ?? [];
+
+    expect(paths).toContain("features.artifacts.layout.toolbarTitle");
+    expect(paths).toContain("features.artifacts.layout.closeButtonLabel");
+
+    // The deprecated no-op unifiedSplitChrome control is gone (welding is now default).
+    expect(paths).not.toContain("features.artifacts.layout.unifiedSplitChrome");
+    // Split gap defaults to the welded 0, not the old 0.5rem.
+    const splitGap = section?.fields.find(
+      (field) => field.path === "features.artifacts.layout.splitGap"
+    );
+    expect(splitGap?.defaultValue).toBe("0");
   });
 
   it("exposes collapsed reasoning preview controls", () => {

package/src/theme-editor/sections.ts

@@ -5,6 +5,10 @@ import {
   DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH,
   DEFAULT_FLOATING_LAUNCHER_WIDTH,
 } from '../defaults';
+import {
+  DEFAULT_PANEL_CANVAS_BACKGROUND,
+  DEFAULT_PANEL_INSET,
+} from '../utils/tokens';
 import { COLOR_FAMILIES } from './color-utils';
 import {
   ROLE_SURFACES,
@@ -180,6 +184,7 @@ const widgetStyleSectionDef: SectionDef = {
       { value: 'palette.shadows.lg', label: 'Large' },
       { value: 'palette.shadows.xl', label: 'Extra Large' },
     ] },
+    { id: 'style-panel-canvas-bg', label: 'Detached Canvas Background', description: 'Fills the region behind a detached panel; defaults to transparent', type: 'token-ref', path: 'theme.components.panel.canvasBackground', defaultValue: DEFAULT_PANEL_CANVAS_BACKGROUND, tokenRef: { tokenType: 'color' } },
     { id: 'style-msg-user-radius', label: 'User Message Radius', type: 'select', path: 'theme.components.message.user.borderRadius', defaultValue: 'palette.radius.lg', options: [
       { value: 'palette.radius.none', label: 'None' },
       { value: 'palette.radius.sm', label: 'Small' },
@@ -295,6 +300,7 @@ const panelLayoutSectionDef: SectionDef = {
       { value: 'palette.shadows.lg', label: 'Large' },
       { value: 'palette.shadows.xl', label: 'Extra Large' },
     ] },
+    { id: 'panel-inset', label: 'Detached Inset', description: 'Gap around the card when launcher.detachedPanel is on', type: 'text', path: 'theme.components.panel.inset', defaultValue: DEFAULT_PANEL_INSET },
   ],
 };
 
@@ -464,8 +470,8 @@ const SHADOW_SCALE_OPTIONS: { value: string; label: string }[] = [
   { value: 'palette.shadows.xl', label: 'Extra Large' },
 ];
 
-// The approval and intro-card defaults are a bespoke "card" shadow rather than a
-// palette step, so expose it as a leading "Default" option users can keep.
+// The approval default is a bespoke "card" shadow rather than a palette step,
+// so expose it as a leading "Default" option users can keep.
 const CARD_SHADOW = '0 5px 15px rgba(15, 23, 42, 0.08)';
 const CARD_SHADOW_OPTIONS = [{ value: CARD_SHADOW, label: 'Default' }, ...SHADOW_SCALE_OPTIONS];
 
@@ -480,7 +486,7 @@ const componentShadowsSectionDef: SectionDef = {
     { id: 'shadow-tool-bubble', label: 'Tool Call Bubble', type: 'select', path: 'theme.components.toolBubble.shadow', defaultValue: 'palette.shadows.sm', options: SHADOW_SCALE_OPTIONS },
     { id: 'shadow-reasoning-bubble', label: 'Reasoning Bubble', type: 'select', path: 'theme.components.reasoningBubble.shadow', defaultValue: 'palette.shadows.sm', options: SHADOW_SCALE_OPTIONS },
     { id: 'shadow-approval', label: 'Approval Bubble', type: 'select', path: 'theme.components.approval.requested.shadow', defaultValue: CARD_SHADOW, options: CARD_SHADOW_OPTIONS },
-    { id: 'shadow-intro-card', label: 'Intro Card', type: 'select', path: 'theme.components.introCard.shadow', defaultValue: CARD_SHADOW, options: CARD_SHADOW_OPTIONS },
+    { id: 'shadow-intro-card', label: 'Intro Card', type: 'select', path: 'theme.components.introCard.shadow', defaultValue: 'palette.shadows.none', options: CARD_SHADOW_OPTIONS },
     { id: 'shadow-composer', label: 'Composer', type: 'select', path: 'theme.components.composer.shadow', defaultValue: 'palette.shadows.none', options: SHADOW_SCALE_OPTIONS },
   ],
 };
@@ -834,11 +840,12 @@ const artifactCustomizationSectionDef: SectionDef = {
   id: 'artifacts-customization', title: 'Artifact Customization', collapsed: true,
   fields: [
     { id: 'art-toolbar', label: 'Toolbar Preset', type: 'select', path: 'features.artifacts.layout.toolbarPreset', defaultValue: 'default', options: [{ value: 'default', label: 'Default' }, { value: 'document', label: 'Document' }] },
+    { id: 'art-toolbar-title', label: 'Toolbar Title', type: 'text', path: 'features.artifacts.layout.toolbarTitle', defaultValue: 'Artifacts' },
+    { id: 'art-close-label', label: 'Close Button Label', type: 'text', path: 'features.artifacts.layout.closeButtonLabel', defaultValue: 'Close' },
     { id: 'art-pane-width', label: 'Pane Width', description: 'CSS width (e.g. 40%, 28rem)', type: 'text', path: 'features.artifacts.layout.paneWidth', defaultValue: '40%' },
     { id: 'art-pane-max-width', label: 'Pane Max Width', type: 'text', path: 'features.artifacts.layout.paneMaxWidth', defaultValue: '28rem' },
-    { id: 'art-split-gap', label: 'Split Gap', type: 'text', path: 'features.artifacts.layout.splitGap', defaultValue: '0.5rem' },
+    { id: 'art-split-gap', label: 'Split Gap', type: 'text', path: 'features.artifacts.layout.splitGap', defaultValue: '0' },
     { id: 'art-pane-bg', label: 'Pane Background', type: 'color', path: 'features.artifacts.layout.paneBackground', defaultValue: '' },
-    { id: 'art-unified', label: 'Unified Split Chrome', description: 'Wrap chat and artifact in a single container', type: 'toggle', path: 'features.artifacts.layout.unifiedSplitChrome', defaultValue: false },
     { id: 'art-resizable', label: 'Resizable', description: 'Allow dragging the pane divider', type: 'toggle', path: 'features.artifacts.layout.resizable', defaultValue: false },
     { id: 'art-expand-panel', label: 'Expand Panel When Open', description: 'Widen the launcher panel to fit artifacts', type: 'toggle', path: 'features.artifacts.layout.expandLauncherPanelWhenOpen', defaultValue: true },
   ],
@@ -864,6 +871,7 @@ const debugSectionDef: SectionDef = {
     { id: 'dev-tool-active-min-height', label: 'Tool Active Min Height', description: 'CSS min-height for collapsed active tool rows (e.g. 5rem)', type: 'text', path: 'features.toolCallDisplay.activeMinHeight', defaultValue: '' },
     { id: 'dev-tool-expandable', label: 'Tool Calls Expandable', description: 'Allow expanding tool call rows to see full details', type: 'toggle', path: 'features.toolCallDisplay.expandable', defaultValue: true },
     { id: 'dev-tool-grouped', label: 'Group Sequential Tool Calls', description: 'Render consecutive tool rows inside a grouped container', type: 'toggle', path: 'features.toolCallDisplay.grouped', defaultValue: false },
+    { id: 'dev-tool-grouped-mode', label: 'Grouped Tool Detail', description: 'Show each tool step or one consolidated summary', type: 'select', path: 'features.toolCallDisplay.groupedMode', defaultValue: 'stack', options: [{ value: 'stack', label: 'Show Steps' }, { value: 'summary', label: 'Summary Only' }] },
     { id: 'dev-reasoning-expandable', label: 'Reasoning Expandable', description: 'Allow expanding reasoning rows to see full details', type: 'toggle', path: 'features.reasoningDisplay.expandable', defaultValue: true },
     { id: 'dev-reasoning-active-preview', label: 'Reasoning Preview While Active', description: 'Show a lightweight preview in collapsed active reasoning rows', type: 'toggle', path: 'features.reasoningDisplay.activePreview', defaultValue: false },
     { id: 'dev-reasoning-preview-lines', label: 'Reasoning Preview Lines', type: 'select', path: 'features.reasoningDisplay.previewMaxLines', defaultValue: 3, options: [{ value: '1', label: '1' }, { value: '2', label: '2' }, { value: '3', label: '3' }, { value: '4', label: '4' }, { value: '5', label: '5' }], formatValue: (v: unknown) => String(v ?? 3), parseValue: (v: unknown) => Number(v) },

package/src/theme-reference.ts

@@ -115,7 +115,7 @@ export const THEME_TOKEN_DOCS = {
       panel: {
         description: 'Chat panel container.',
         properties:
-          'width, maxWidth (440px), height (600px), maxHeight, borderRadius, shadow.',
+          'width, maxWidth (440px), height (600px), maxHeight, borderRadius, shadow, inset (16px, gap around a detached panel), canvasBackground (transparent, fills the region behind a detached panel in docked and inline embed modes; a no-op in sidebar mode, where the gap stays click-through and the host page shows through like floating). inset and canvasBackground apply only when launcher.detachedPanel is true or artifacts.layout.paneAppearance is "detached".',
       },
       header: {
         description: 'Chat panel header.',
@@ -288,7 +288,7 @@ export const THEME_TOKEN_DOCS = {
     features: {
       description: 'Feature flags.',
       properties:
-        'showReasoning (AI thinking steps), showToolCalls (tool invocations), toolCallDisplay (collapsedMode, activePreview, activeMinHeight, previewMaxLines, grouped, expandable, loadingAnimation), reasoningDisplay (activePreview, activeMinHeight, previewMaxLines, expandable, loadingAnimation), artifacts (sidebar config).',
+        'showReasoning (AI thinking steps), showToolCalls (tool invocations), toolCallDisplay (collapsedMode, activePreview, activeMinHeight, previewMaxLines, grouped, groupedMode, expandable, loadingAnimation), reasoningDisplay (activePreview, activeMinHeight, previewMaxLines, expandable, loadingAnimation), artifacts (sidebar config).',
     },
   },
 }

package/src/tool-call-display-defaults.test.ts

@@ -8,6 +8,7 @@ describe("tool call display defaults", () => {
       collapsedMode: "tool-call",
       activePreview: false,
       grouped: false,
+      groupedMode: "stack",
       previewMaxLines: 3,
       expandable: true,
       loadingAnimation: "none",

package/src/types/theme.ts

@@ -166,6 +166,8 @@ export interface ComponentTokenSet {
   margin?: TokenReference<'spacing'>;
   shadow?: TokenReference<'shadow'>;
   opacity?: number;
+  /** Hover background — used by transparent variants like `button.ghost`. */
+  hoverBackground?: TokenReference<'color'>;
 }
 
 export interface ButtonTokens extends ComponentTokenSet {
@@ -194,6 +196,10 @@ export interface PanelTokens extends ComponentTokenSet {
   maxWidth: string;
   height: string;
   maxHeight: string;
+  /** Gap between the detached panel and its region edges. Only used when detached. */
+  inset?: string;
+  /** Background of the region revealed behind a detached panel. */
+  canvasBackground?: string;
 }
 
 export interface HeaderTokens extends ComponentTokenSet {
@@ -370,6 +376,14 @@ export interface ArtifactToolbarTokens {
   iconBorder?: string;
   toggleGroupGap?: string;
   toggleBorderRadius?: string;
+  /** Inner padding of the segmented view/source toggle pill. */
+  toggleGroupPadding?: string;
+  /** Border of the segmented view/source toggle pill (e.g., `none`). */
+  toggleGroupBorder?: string;
+  /** Corner radius of the segmented view/source toggle pill. */
+  toggleGroupBorderRadius?: string;
+  /** Background of the segmented view/source toggle pill. */
+  toggleGroupBackground?: string;
   copyBackground?: string;
   copyBorder?: string;
   copyColor?: string;
@@ -403,6 +417,17 @@ export interface ArtifactTabTokens {
   listPadding?: string;
 }
 
+/** Artifact reference card (chat thread) chrome. */
+export interface ArtifactCardTokens {
+  background?: string;
+  /** Full border shorthand (e.g. `1px solid #e5e7eb`). */
+  border?: string;
+  borderRadius?: string;
+  hoverBackground?: string;
+  /** Border color on hover. */
+  hoverBorderColor?: string;
+}
+
 /** Artifact pane chrome. */
 export interface ArtifactPaneTokens {
   /**
@@ -414,6 +439,56 @@ export interface ArtifactPaneTokens {
   toolbarBackground?: string;
 }
 
+/** Inline artifact block chrome (`display: "inline"` file preview). */
+export interface ArtifactInlineTokens {
+  /** Background of the inline preview frame. */
+  background?: string;
+  /** Full border shorthand for the frame (e.g. `1px solid #e5e7eb`). */
+  border?: string;
+  /** Border radius of the inline preview frame. */
+  borderRadius?: string;
+  /** Background of the title/toolbar chrome bar. */
+  chromeBackground?: string;
+  /** Bottom border of the title bar. */
+  chromeBorder?: string;
+  /** Title text color in the chrome bar (artifact basename). */
+  titleColor?: string;
+  /** Muted text color for the type label / streaming status. */
+  mutedColor?: string;
+  /** Preview iframe height inside the inline body. */
+  frameHeight?: string;
+}
+
+/**
+ * Syntax-highlighted artifact source view (pane + inline), rendered by
+ * `utils/code-highlight.ts`. One Light defaults ship in `widget.css`, with a
+ * One Dark override keyed off the widget's resolved color scheme (the
+ * `data-persona-color-scheme` root attribute, not the OS preference); set any
+ * of these to retheme the tokenizer palette and the line-number gutter.
+ */
+export interface CodeTokens {
+  /** Keywords, booleans, null (e.g. `const`, `true`). */
+  keywordColor?: string;
+  /** String and template literals; HTML attribute values. */
+  stringColor?: string;
+  /** Line and block comments. */
+  commentColor?: string;
+  /** Numeric literals; CSS hex colors / units. */
+  numberColor?: string;
+  /** HTML tag brackets + names; doctype. */
+  tagColor?: string;
+  /** HTML attribute names. */
+  attrColor?: string;
+  /** CSS property names; JSON object keys. */
+  propertyColor?: string;
+  /** Line-number gutter digits. */
+  lineNumberColor?: string;
+  /** Right border of the line-number gutter. */
+  gutterBorderColor?: string;
+  /** Background of the source-view code sheet (defaults to One Light/Dark editor background). */
+  background?: string;
+}
+
 /** Icon button chrome (used by createIconButton). */
 export interface IconButtonTokens {
   background?: string;
@@ -487,9 +562,13 @@ export interface ComponentTokens {
     toolbar?: ArtifactToolbarTokens;
     tab?: ArtifactTabTokens;
     pane?: ArtifactPaneTokens;
+    card?: ArtifactCardTokens;
+    inline?: ArtifactInlineTokens;
   };
   /** Collapsible widget chrome (tool/reasoning/approval bubbles). */
   collapsibleWidget?: CollapsibleWidgetTokens;
+  /** Syntax-highlighted artifact source view (tokenizer palette + gutter). */
+  code?: CodeTokens;
 }
 
 export interface PaletteExtras {