@runtypelabs/persona 4.12.0 → 4.14.0

package/src/theme-editor/presets.ts

@@ -2,100 +2,114 @@
 
 import type { ThemeEditorPreset } from './types';
 
-export const BUILT_IN_PRESETS: ThemeEditorPreset[] = [
-  {
-    id: 'default-light',
-    name: 'Default Light',
-    description: 'Clean monochrome light theme',
-    theme: {
-      components: {
-        artifact: {
-          pane: {
-            background: 'semantic.colors.container',
-            toolbarBackground: 'semantic.colors.container',
-          },
+const DEFAULT_LIGHT_PRESET: ThemeEditorPreset = {
+  id: 'default-light',
+  name: 'Default Light',
+  description: 'Clean monochrome light theme',
+  theme: {
+    components: {
+      artifact: {
+        pane: {
+          background: 'semantic.colors.container',
+          toolbarBackground: 'semantic.colors.container',
         },
       },
     },
-    preview: { primary: '#171717', surface: '#ffffff', accent: '#0f0f0f' },
-    tags: ['light'],
   },
-  {
-    id: 'default-dark',
-    name: 'Default Dark',
-    description: 'Monochrome dark theme',
-    theme: {
-      palette: {
-        colors: {
-          primary: {
-            50: '#ffffff', 100: '#f5f5f5', 200: '#d4d4d4', 300: '#a3a3a3',
-            400: '#737373', 500: '#171717', 600: '#0f0f0f', 700: '#0a0a0a',
-            800: '#050505', 900: '#030303', 950: '#000000',
-          },
-          gray: {
-            50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db',
-            400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151',
-            800: '#1f2937', 900: '#111827', 950: '#030712',
-          },
-          secondary: {
-            50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd',
-            400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9',
-            800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065',
-          },
-          accent: {
-            50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9',
-            400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490',
-            800: '#155e75', 900: '#164e63', 950: '#083344',
-          },
-          success: {
-            50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac',
-            400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d',
-            800: '#166534', 900: '#14532d',
-          },
-          warning: {
-            50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047',
-            400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207',
-            800: '#854d0e', 900: '#713f12',
-          },
-          error: {
-            50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5',
-            400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c',
-            800: '#991b1b', 900: '#7f1d1d',
-          },
+  preview: { primary: '#171717', surface: '#ffffff', accent: '#0f0f0f' },
+  tags: ['light'],
+};
+
+const DEFAULT_DARK_PRESET: ThemeEditorPreset = {
+  id: 'default-dark',
+  name: 'Default Dark',
+  description: 'Monochrome dark theme',
+  theme: {
+    palette: {
+      colors: {
+        primary: {
+          50: '#ffffff', 100: '#f5f5f5', 200: '#d4d4d4', 300: '#a3a3a3',
+          400: '#737373', 500: '#171717', 600: '#0f0f0f', 700: '#0a0a0a',
+          800: '#050505', 900: '#030303', 950: '#000000',
         },
-      } as any,
-      semantic: {
-        colors: {
-          primary: 'palette.colors.primary.400',
-          secondary: 'palette.colors.gray.400',
-          accent: 'palette.colors.primary.500',
-          surface: 'palette.colors.gray.800',
-          background: 'palette.colors.gray.900',
-          container: 'palette.colors.gray.800',
-          text: 'palette.colors.gray.100',
-          textMuted: 'palette.colors.gray.400',
-          textInverse: 'palette.colors.gray.900',
-          border: 'palette.colors.gray.700',
-          divider: 'palette.colors.gray.700',
-          interactive: {
-            default: 'palette.colors.primary.400',
-            hover: 'palette.colors.primary.300',
-            focus: 'palette.colors.primary.500',
-            active: 'palette.colors.primary.600',
-            disabled: 'palette.colors.gray.600',
-          },
-          feedback: {
-            success: 'palette.colors.success.400',
-            warning: 'palette.colors.warning.400',
-            error: 'palette.colors.error.400',
-            info: 'palette.colors.primary.400',
-          },
+        gray: {
+          50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db',
+          400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151',
+          800: '#1f2937', 900: '#111827', 950: '#030712',
         },
-      } as any,
-    },
-    preview: { primary: '#171717', surface: '#1f2937', accent: '#0f0f0f' },
-    tags: ['dark'],
+        secondary: {
+          50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd',
+          400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9',
+          800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065',
+        },
+        accent: {
+          50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9',
+          400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490',
+          800: '#155e75', 900: '#164e63', 950: '#083344',
+        },
+        success: {
+          50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac',
+          400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d',
+          800: '#166534', 900: '#14532d',
+        },
+        warning: {
+          50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047',
+          400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207',
+          800: '#854d0e', 900: '#713f12',
+        },
+        error: {
+          50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5',
+          400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c',
+          800: '#991b1b', 900: '#7f1d1d',
+        },
+      },
+    } as any,
+    semantic: {
+      colors: {
+        primary: 'palette.colors.primary.400',
+        secondary: 'palette.colors.gray.400',
+        accent: 'palette.colors.primary.500',
+        surface: 'palette.colors.gray.800',
+        background: 'palette.colors.gray.900',
+        container: 'palette.colors.gray.800',
+        text: 'palette.colors.gray.100',
+        textMuted: 'palette.colors.gray.400',
+        textInverse: 'palette.colors.gray.900',
+        border: 'palette.colors.gray.700',
+        divider: 'palette.colors.gray.700',
+        interactive: {
+          default: 'palette.colors.primary.400',
+          hover: 'palette.colors.primary.300',
+          focus: 'palette.colors.primary.500',
+          active: 'palette.colors.primary.600',
+          disabled: 'palette.colors.gray.600',
+        },
+        feedback: {
+          success: 'palette.colors.success.400',
+          warning: 'palette.colors.warning.400',
+          error: 'palette.colors.error.400',
+          info: 'palette.colors.primary.400',
+        },
+      },
+    } as any,
+  },
+  preview: { primary: '#171717', surface: '#1f2937', accent: '#0f0f0f' },
+  tags: ['dark'],
+};
+
+export const BUILT_IN_PRESETS: ThemeEditorPreset[] = [
+  {
+    id: 'persona-default',
+    name: 'Persona Default',
+    description: 'Adaptive Persona theme with light and dark modes',
+    theme: DEFAULT_LIGHT_PRESET.theme,
+    darkTheme: DEFAULT_DARK_PRESET.theme,
+    preview: DEFAULT_LIGHT_PRESET.preview,
+    darkPreview: DEFAULT_DARK_PRESET.preview,
+    tags: ['light', 'dark', 'adaptive'],
   },
+  DEFAULT_LIGHT_PRESET,
+  DEFAULT_DARK_PRESET,
   {
     id: 'high-contrast',
     name: 'High Contrast',

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

@@ -99,16 +99,45 @@ describe("theme editor scroll-to-bottom controls", () => {
     expect(INTERFACE_ROLES_SECTION.fields.some((field) => field.id === "role-scroll-to-bottom")).toBe(true);
   });
 
-  it("exposes grouped and collapsed tool call preview controls", () => {
+  it("moves persistable stream controls out of developer debug without duplicates", () => {
     const debugSection = CONFIGURE_SECTIONS.find((section) => section.id === "debug-inspection");
+    const preferenceSection = CONFIGURE_SECTIONS.find(
+      (section) => section.id === "stream-display-preferences"
+    );
 
-    expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.collapsedMode")).toBe(true);
+    expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.collapsedMode")).toBe(false);
     expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.activePreview")).toBe(true);
     expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.previewMaxLines")).toBe(true);
     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);
+    expect(preferenceSection?.fields.some((field) => field.path === "features.toolCallDisplay.collapsedMode")).toBe(true);
+    expect(preferenceSection?.fields.some((field) => field.path === "features.toolCallDisplay.expandable")).toBe(true);
+    expect(preferenceSection?.fields.some((field) => field.path === "features.toolCallDisplay.grouped")).toBe(true);
+    expect(preferenceSection?.fields.some((field) => field.path === "features.toolCallDisplay.groupedMode")).toBe(true);
+
+    const paths = CONFIGURE_SECTIONS.flatMap((section) =>
+      section.fields.map((field) => field.path)
+    );
+    expect(paths.filter((path) => path === "features.toolCallDisplay.grouped")).toHaveLength(1);
+  });
+
+  it("exposes inheritable capability-tagged artifact preference fields", () => {
+    const section = CONFIGURE_SECTIONS.find(
+      (entry) => entry.id === "artifact-display-preferences"
+    );
+    const paths = section?.fields.map((field) => field.path) ?? [];
+    expect(paths).toEqual(
+      expect.arrayContaining([
+        "features.artifacts.display.files",
+        "features.artifacts.display.byKind.component",
+        "features.artifacts.display.default",
+        "features.artifacts.filePreview.enabled",
+      ])
+    );
+    expect(paths).not.toContain("features.artifacts.display.byKind.markdown");
+    expect(paths).not.toContain("features.artifacts.display.byCategory.document");
+    expect(paths).not.toContain("features.artifacts.display.byCategory.application");
+    expect(section?.requiresCapability).toBe("artifacts");
+    expect(section?.fields.every((field) => field.unsettable)).toBe(true);
   });
 
   it("exposes product-facing artifact toolbar copy", () => {
@@ -129,9 +158,12 @@ describe("theme editor scroll-to-bottom controls", () => {
 
   it("exposes collapsed reasoning preview controls", () => {
     const debugSection = CONFIGURE_SECTIONS.find((section) => section.id === "debug-inspection");
+    const preferenceSection = CONFIGURE_SECTIONS.find(
+      (section) => section.id === "stream-display-preferences"
+    );
 
-    expect(debugSection?.fields.some((field) => field.path === "features.reasoningDisplay.expandable")).toBe(true);
-    expect(debugSection?.fields.some((field) => field.path === "features.reasoningDisplay.activePreview")).toBe(true);
+    expect(preferenceSection?.fields.some((field) => field.path === "features.reasoningDisplay.expandable")).toBe(true);
+    expect(preferenceSection?.fields.some((field) => field.path === "features.reasoningDisplay.activePreview")).toBe(true);
     expect(debugSection?.fields.some((field) => field.path === "features.reasoningDisplay.previewMaxLines")).toBe(true);
     expect(debugSection?.fields.some((field) => field.path === "features.reasoningDisplay.activeMinHeight")).toBe(true);
   });

package/src/theme-editor/sections.ts

@@ -869,20 +869,71 @@ const apiIntegrationSectionDef: SectionDef = {
   ],
 };
 
+const DISPLAY_MODE_OPTIONS = [
+  { value: 'collapsed', label: 'Collapsed card' },
+  { value: 'panel', label: 'Side panel' },
+  { value: 'inline', label: 'In conversation' },
+];
+
+const INHERITABLE_DISPLAY_FIELD = {
+  type: 'select' as const,
+  defaultValue: 'panel',
+  options: DISPLAY_MODE_OPTIONS,
+  unsettable: true,
+  unsetLabel: 'Use default',
+  requiresCapability: 'artifacts' as const,
+};
+
+export const ARTIFACT_DISPLAY_PREFERENCE_SECTION: SectionDef = {
+  id: 'artifact-display-preferences',
+  title: 'Artifact display',
+  description: 'Choose where recognizable artifact groups appear.',
+  requiresCapability: 'artifacts',
+  fields: [
+    { ...INHERITABLE_DISPLAY_FIELD, id: 'artifact-display-files', label: 'Generated files', description: 'Default for HTML, CSV, documents, and code files.', path: 'features.artifacts.display.files' },
+    { ...INHERITABLE_DISPLAY_FIELD, id: 'artifact-display-components', label: 'Registered UI components', description: 'Charts, forms, cards, and custom UI rendered by the host.', path: 'features.artifacts.display.byKind.component' },
+    { ...INHERITABLE_DISPLAY_FIELD, id: 'artifact-display-default', label: 'Other artifacts', description: 'Plain documents and anything without a narrower rule.', path: 'features.artifacts.display.default' },
+    {
+      id: 'artifact-file-preview',
+      label: 'Render supported file previews',
+      type: 'toggle',
+      path: 'features.artifacts.filePreview.enabled',
+      defaultValue: true,
+      unsettable: true,
+      unsetLabel: 'Use default',
+      requiresCapability: 'artifacts',
+    },
+  ],
+};
+
+const streamDisplayPreferencesSectionDef: SectionDef = {
+  id: 'stream-display-preferences',
+  title: 'Tool calls and reasoning',
+  description: 'Control how agent activity appears in the conversation.',
+  fields: [
+    { id: 'pref-show-tools', label: 'Show tool calls', type: 'toggle', path: 'features.showToolCalls', defaultValue: true, unsettable: true, requiresCapability: 'tools' },
+    { id: 'pref-tool-collapsed-mode', label: 'Tool call summary', type: 'select', path: 'features.toolCallDisplay.collapsedMode', defaultValue: 'tool-call', options: [{ value: 'tool-call', label: 'Tool call' }, { value: 'tool-name', label: 'Tool name' }, { value: 'tool-preview', label: 'Tool preview' }], unsettable: true, requiresCapability: 'tools' },
+    { id: 'pref-tool-expandable', label: 'Tool calls expandable', type: 'toggle', path: 'features.toolCallDisplay.expandable', defaultValue: true, unsettable: true, requiresCapability: 'tools' },
+    { id: 'pref-tool-grouped', label: 'Group sequential tool calls', type: 'toggle', path: 'features.toolCallDisplay.grouped', defaultValue: false, unsettable: true, requiresCapability: 'tools' },
+    { id: 'pref-tool-grouped-mode', label: 'Grouped tool detail', type: 'select', path: 'features.toolCallDisplay.groupedMode', defaultValue: 'stack', options: [{ value: 'stack', label: 'Show steps' }, { value: 'summary', label: 'Summary only' }], unsettable: true, requiresCapability: 'tools' },
+    { id: 'pref-tool-loading-animation', label: 'Tool loading animation', type: 'select', path: 'features.toolCallDisplay.loadingAnimation', defaultValue: 'none', options: [{ value: 'none', label: 'None' }, { value: 'pulse', label: 'Pulse' }, { value: 'shimmer', label: 'Shimmer' }, { value: 'shimmer-color', label: 'Color shimmer' }, { value: 'rainbow', label: 'Rainbow' }], unsettable: true, requiresCapability: 'tools' },
+    { id: 'pref-show-reasoning', label: 'Show reasoning', type: 'toggle', path: 'features.showReasoning', defaultValue: true, unsettable: true, requiresCapability: 'reasoning' },
+    { id: 'pref-reasoning-expandable', label: 'Reasoning expandable', type: 'toggle', path: 'features.reasoningDisplay.expandable', defaultValue: true, unsettable: true, requiresCapability: 'reasoning' },
+    { id: 'pref-reasoning-active-preview', label: 'Reasoning preview while active', type: 'toggle', path: 'features.reasoningDisplay.activePreview', defaultValue: false, unsettable: true, requiresCapability: 'reasoning' },
+  ],
+};
+
+export const STREAM_AND_ARTIFACTS_SUB_GROUP: SubGroupDef = {
+  label: 'Stream and artifacts',
+  sections: [streamDisplayPreferencesSectionDef, ARTIFACT_DISPLAY_PREFERENCE_SECTION],
+};
+
 const debugSectionDef: SectionDef = {
   id: 'debug-inspection', title: 'Debug & Inspection', collapsed: true,
   fields: [
-    { id: 'dev-reasoning', label: 'Show Reasoning', description: 'Display AI reasoning steps', type: 'toggle', path: 'features.showReasoning', defaultValue: false },
-    { id: 'dev-tool-calls', label: 'Show Tool Calls', description: 'Display tool call details', type: 'toggle', path: 'features.showToolCalls', defaultValue: false },
-    { id: 'dev-tool-collapsed-mode', label: 'Tool Call Summary', description: 'Choose what collapsed tool rows show by default', type: 'select', path: 'features.toolCallDisplay.collapsedMode', defaultValue: 'tool-call', options: [{ value: 'tool-call', label: 'Tool Call' }, { value: 'tool-name', label: 'Tool Name' }, { value: 'tool-preview', label: 'Tool Preview' }] },
     { id: 'dev-tool-active-preview', label: 'Tool Preview While Active', description: 'Show a lightweight preview in collapsed active tool rows', type: 'toggle', path: 'features.toolCallDisplay.activePreview', defaultValue: false },
     { id: 'dev-tool-preview-lines', label: 'Tool Preview Lines', type: 'select', path: 'features.toolCallDisplay.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) },
     { 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) },
     { id: 'dev-reasoning-active-min-height', label: 'Reasoning Active Min Height', description: 'CSS min-height for collapsed active reasoning rows (e.g. 5rem)', type: 'text', path: 'features.reasoningDisplay.activeMinHeight', defaultValue: '' },
     { id: 'dev-debug', label: 'Debug Mode', description: 'Show debug information', type: 'toggle', path: 'debug', defaultValue: false },
@@ -906,6 +957,7 @@ export const CONFIGURE_SUB_GROUPS: SubGroupDef[] = [
   { label: 'Layout', sections: [generalLayoutSectionDef, headerLayoutSectionDef, messagesLayoutSectionDef, messageActionsSectionDef] },
   { label: 'Widget', sections: [launcherBasicsSectionDef, launcherAdvancedSectionDef, sendButtonSectionDef, closeButtonSectionDef, clearChatSectionDef, statusIndicatorSectionDef] },
   { label: 'Features', sections: [featuresSectionDef, streamAnimationSectionDef, attachmentsSectionDef, artifactsSectionDef, artifactCustomizationSectionDef] },
+  STREAM_AND_ARTIFACTS_SUB_GROUP,
   { label: 'Developer', collapsedByDefault: true, sections: [apiIntegrationSectionDef, debugSectionDef, markdownSectionDef] },
 ];
 

package/src/theme-editor/state-preferences.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { ThemeEditorState } from "./state";
+
+describe("ThemeEditorState preference reset", () => {
+  it("unsets a path and prunes empty parent objects", () => {
+    const state = new ThemeEditorState(undefined, {}, { mergeDefaults: false });
+    state.set("features.artifacts.display.files", "inline");
+    expect(state.get("features.artifacts.display.files")).toBe("inline");
+
+    state.unset("features.artifacts.display.files");
+
+    expect(state.get("features.artifacts.display.files")).toBeUndefined();
+    expect(state.getConfig()).not.toHaveProperty("features");
+  });
+});

package/src/theme-editor/state.ts

@@ -32,6 +32,30 @@ function setByPath(obj: unknown, path: string, value: unknown): unknown {
   };
 }
 
+function unsetByPath(obj: unknown, path: string): unknown {
+  const parts = path.split('.');
+  if (parts.length === 1) {
+    const result = { ...(obj as Record<string, unknown>) };
+    delete result[parts[0]];
+    return result;
+  }
+  const [first, ...rest] = parts;
+  const current = obj as Record<string, unknown>;
+  const child = unsetByPath(current?.[first] ?? {}, rest.join('.'));
+  const result = { ...current };
+  if (
+    typeof child === 'object' &&
+    child !== null &&
+    !Array.isArray(child) &&
+    Object.keys(child as Record<string, unknown>).length === 0
+  ) {
+    delete result[first];
+  } else {
+    result[first] = child;
+  }
+  return result;
+}
+
 // ─── ThemeEditorState ───────────────────────────────────────────
 
 export class ThemeEditorState {
@@ -111,6 +135,28 @@ export class ThemeEditorState {
     this.notifyListeners();
   }
 
+  /** Delete a dot-path and prune empty parents so sparse preferences inherit. */
+  unset(path: string): void {
+    if (path.startsWith('theme.')) {
+      const themePath = path.replace('theme.', '');
+      this.theme = unsetByPath(this.theme, themePath) as PersonaTheme;
+      this.syncThemeIntoConfig();
+    } else if (path.startsWith('darkTheme.')) {
+      const themePath = path.replace('darkTheme.', '');
+      this.config = {
+        ...this.config,
+        darkTheme: unsetByPath(
+          this.config.darkTheme ?? {},
+          themePath
+        ) as AgentWidgetConfig['darkTheme'],
+      };
+    } else {
+      this.config = unsetByPath(this.config, path) as AgentWidgetConfig;
+    }
+    this.recordHistory();
+    this.notifyListeners();
+  }
+
   /** Batch-set multiple paths at once */
   setBatch(updates: Record<string, unknown>): void {
     let themeChanged = false;

package/src/theme-editor/types.ts

@@ -1,7 +1,11 @@
 /** Field definition types for the declarative configurator system (headless: no DOM) */
 
 import type { DeepPartial, PersonaTheme } from '../types/theme';
-import type { AgentWidgetConfig } from '../types';
+import type {
+  AgentWidgetConfig,
+  WidgetPreferenceCapabilities,
+  WidgetPreferenceSlice,
+} from '../types';
 
 // ─── Field System ────────────────────────────────────────────────
 
@@ -101,6 +105,12 @@ export interface FieldDef {
   formatValue?: (value: unknown) => unknown;
   /** Convert control input back into the stored value shape */
   parseValue?: (value: unknown) => unknown;
+  /** Capability required for hosts to render this field. */
+  requiresCapability?: keyof WidgetPreferenceCapabilities;
+  /** The host may offer an inherit/reset action which deletes this path. */
+  unsettable?: boolean;
+  /** Label for the inherit/reset action. Default: "Use default". */
+  unsetLabel?: string;
 }
 
 export interface SectionDef {
@@ -112,6 +122,8 @@ export interface SectionDef {
   collapsed?: boolean;
   /** Preset buttons for this section */
   presets?: SectionPreset[];
+  /** Capability required for hosts to render this section. */
+  requiresCapability?: keyof WidgetPreferenceCapabilities;
 }
 
 export interface SectionPreset {
@@ -149,6 +161,8 @@ export interface ThemeEditorPreset {
   toolCall?: AgentWidgetToolCallConfig;
   /** Tool call styling for dark mode (falls back to toolCall if not set) */
   darkToolCall?: AgentWidgetToolCallConfig;
+  /** Sparse, persistable widget behavior layered separately from theme tokens. */
+  behavior?: WidgetPreferenceSlice;
   preview: {
     primary: string;
     surface: string;

package/src/theme-editor/webmcp/tools.test.ts

@@ -123,6 +123,19 @@ describe('createThemeEditorTools', () => {
     );
   });
 
+  it('apply_preset installs both Persona default slots with automatic scheme selection', async () => {
+    const out = await call(tools.get('apply_preset')!, { presetId: 'persona-default' });
+
+    expect(out.applied.appliedPreset.id).toBe('persona-default');
+    expect(state.get('colorScheme')).toBe('auto');
+    expect(state.get('theme.components.artifact.pane.background')).toBe(
+      'semantic.colors.container'
+    );
+    expect(state.get('darkTheme.semantic.colors.surface')).toBe(
+      'palette.colors.gray.800'
+    );
+  });
+
   it('configure_widget writes config paths', async () => {
     await call(tools.get('configure_widget')!, {
       launcherPosition: 'bottom-left',

package/src/theme-editor/webmcp/tools.ts

@@ -10,6 +10,7 @@
  */
 
 import { createTheme } from '../../utils/theme';
+import { applyFeaturePreferences } from '../../utils/feature-preferences';
 import type { AgentWidgetConfig } from '../../types';
 import type { PersonaTheme } from '../../types/theme';
 import { generateColorScale, SHADE_KEYS } from '../color-utils';
@@ -469,8 +470,12 @@ export function createThemeEditorTools(
       const config: AgentWidgetConfig = { ...state.getConfig() };
       if (preset.darkTheme) {
         config.darkTheme = createTheme(preset.darkTheme, { validate: false }) as PersonaTheme;
+        config.colorScheme = 'auto';
       }
       if (preset.toolCall) config.toolCall = preset.toolCall;
+      if (preset.behavior) {
+        config.features = applyFeaturePreferences(config.features, [preset.behavior]);
+      }
       state.setFullConfig(config, theme);
       const warnings = quickContrastWarnings(state, ['body', 'assistant-message'], 'light');
       return result({ appliedPreset: { id: preset.id, name: preset.name } }, warnings);