@runtypelabs/persona 2.3.0 → 3.0.0

package/dist/widget.css

@@ -2067,7 +2067,7 @@
   padding: var(--persona-artifact-toolbar-icon-padding, 0.25rem);
   border-radius: var(--persona-artifact-toolbar-icon-radius, var(--persona-radius-md, 0.375rem));
   border: var(--persona-artifact-toolbar-icon-border, 1px solid var(--persona-border, #e5e7eb));
-  background: var(--persona-surface, #ffffff);
+  background: var(--persona-artifact-toolbar-icon-bg, var(--persona-surface, #ffffff));
   color: var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827));
   cursor: pointer;
   line-height: 1;
@@ -2105,18 +2105,6 @@
   font-weight: 500;
 }
 
-/* Copy menu dropdown theming */
-#persona-root .persona-artifact-doc-copy-menu {
-  background: var(--persona-artifact-toolbar-copy-menu-bg, var(--persona-surface, #fff));
-  border: var(--persona-artifact-toolbar-copy-menu-border, 1px solid var(--persona-border, #e5e7eb));
-  box-shadow: var(--persona-artifact-toolbar-copy-menu-shadow, 0 4px 6px -1px rgba(0,0,0,.1));
-  border-radius: var(--persona-artifact-toolbar-copy-menu-radius, 0.375rem);
-}
-
-#persona-root .persona-artifact-doc-copy-menu button:hover {
-  background: var(--persona-artifact-toolbar-copy-menu-item-hover-bg, var(--persona-container, #f3f4f6));
-}
-
 /* Artifact tab theming */
 #persona-root .persona-artifact-tab {
   background: var(--persona-artifact-tab-bg, transparent);
@@ -2134,6 +2122,200 @@
   background: var(--persona-artifact-toolbar-bg, var(--persona-surface, #fff));
 }
 
+/* Toggle group gap */
+#persona-root .persona-artifact-toggle-group {
+  gap: var(--persona-artifact-toolbar-toggle-group-gap, 0.25rem);
+}
+
+/* Toggle button border-radius (view/code buttons) */
+#persona-root .persona-artifact-toolbar-document .persona-artifact-view-btn,
+#persona-root .persona-artifact-toolbar-document .persona-artifact-code-btn {
+  border-radius: var(--persona-artifact-toolbar-toggle-radius, var(--persona-artifact-toolbar-icon-radius, var(--persona-radius-md, 0.375rem)));
+}
+
+/* Tab hover */
+#persona-root .persona-artifact-tab:hover {
+  background: var(--persona-artifact-tab-hover-bg, var(--persona-container, #f3f4f6));
+}
+
+/* Tab list container */
+#persona-root .persona-artifact-list {
+  background: var(--persona-artifact-tab-list-bg, transparent);
+  border-bottom-color: var(--persona-artifact-tab-list-border-color, var(--persona-border, #e5e7eb));
+  padding: var(--persona-artifact-tab-list-padding, 0.5rem);
+}
+
+/* Toolbar border override */
+#persona-root .persona-artifact-toolbar-document {
+  border-bottom: var(--persona-artifact-toolbar-border, 1px solid var(--persona-border, #e5e7eb));
+}
+
+/* ── Composable button utilities ── */
+
+/* Icon button — base for all icon-only buttons created by createIconButton() */
+#persona-root .persona-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--persona-icon-btn-padding, 0.25rem);
+  border-radius: var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem));
+  border: var(--persona-icon-btn-border, 1px solid var(--persona-border, #e5e7eb));
+  background: var(--persona-icon-btn-bg, var(--persona-surface, #ffffff));
+  color: var(--persona-icon-btn-color, var(--persona-text, #111827));
+  cursor: pointer;
+  line-height: 1;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+#persona-root .persona-icon-btn:hover {
+  background: var(--persona-icon-btn-hover-bg, var(--persona-container, #f3f4f6));
+  color: var(--persona-icon-btn-hover-color, inherit);
+}
+
+#persona-root .persona-icon-btn:focus-visible {
+  outline: 2px solid var(--persona-accent, #3b82f6);
+  outline-offset: 2px;
+}
+
+#persona-root .persona-icon-btn[aria-pressed="true"] {
+  background: var(--persona-icon-btn-active-bg, var(--persona-container, #f3f4f6));
+  border-color: var(--persona-icon-btn-active-border, var(--persona-border, #e5e7eb));
+}
+
+/* Label button — icon + text button created by createLabelButton() */
+#persona-root .persona-label-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--persona-label-btn-gap, 0.35rem);
+  padding: var(--persona-label-btn-padding, 0.25rem 0.5rem);
+  border-radius: var(--persona-label-btn-radius, var(--persona-radius-md, 0.375rem));
+  border: var(--persona-label-btn-border, 1px solid var(--persona-border, #e5e7eb));
+  background: var(--persona-label-btn-bg, var(--persona-surface, #ffffff));
+  color: var(--persona-label-btn-color, var(--persona-text, #111827));
+  cursor: pointer;
+  font-size: var(--persona-label-btn-font-size, 0.75rem);
+  font-weight: 500;
+  line-height: 1.25;
+  white-space: nowrap;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+#persona-root .persona-label-btn:hover {
+  background: var(--persona-label-btn-hover-bg, var(--persona-container, #f3f4f6));
+}
+
+#persona-root .persona-label-btn:focus-visible {
+  outline: 2px solid var(--persona-accent, #3b82f6);
+  outline-offset: 2px;
+}
+
+#persona-root .persona-label-btn--sm {
+  padding: var(--persona-label-btn-padding, 0.25rem 0.5rem);
+  font-size: var(--persona-label-btn-font-size, 0.75rem);
+}
+
+#persona-root .persona-label-btn--md {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+#persona-root .persona-label-btn--primary {
+  background: var(--persona-primary, #3b82f6);
+  color: var(--persona-text-inverse, #ffffff);
+  border-color: transparent;
+}
+
+#persona-root .persona-label-btn--primary:hover {
+  opacity: 0.9;
+}
+
+#persona-root .persona-label-btn--destructive {
+  color: var(--persona-label-btn-destructive-color, #ef4444);
+}
+
+#persona-root .persona-label-btn--ghost {
+  border: none;
+  background: transparent;
+}
+
+#persona-root .persona-label-btn--ghost:hover {
+  background: var(--persona-label-btn-hover-bg, var(--persona-container, #f3f4f6));
+}
+
+/* Toggle group — mutually exclusive button set created by createToggleGroup() */
+#persona-root .persona-toggle-group {
+  display: inline-flex;
+  gap: var(--persona-toggle-group-gap, 0);
+}
+
+#persona-root .persona-toggle-group > .persona-icon-btn {
+  border-radius: 0;
+}
+
+#persona-root .persona-toggle-group > .persona-icon-btn:first-child {
+  border-top-left-radius: var(--persona-toggle-group-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem)));
+  border-bottom-left-radius: var(--persona-toggle-group-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem)));
+}
+
+#persona-root .persona-toggle-group > .persona-icon-btn:last-child {
+  border-top-right-radius: var(--persona-toggle-group-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem)));
+  border-bottom-right-radius: var(--persona-toggle-group-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem)));
+}
+
+/* Combo button — label + chevron with dropdown */
+#persona-root .persona-combo-btn {
+  font-size: var(--persona-combo-btn-font-size, 0.8125rem);
+  font-weight: var(--persona-combo-btn-font-weight, 600);
+  color: var(--persona-combo-btn-color, var(--persona-text, #111827));
+  user-select: none;
+}
+
+#persona-root .persona-combo-btn-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Dropdown menu utility */
+#persona-root .persona-dropdown-menu {
+  z-index: 100;
+  min-width: 160px;
+  background: var(--persona-dropdown-bg, var(--persona-surface, #fff));
+  border: var(--persona-dropdown-border, 1px solid var(--persona-border, #e5e7eb));
+  border-radius: var(--persona-dropdown-radius, 0.625rem);
+  padding: 0.25rem 0;
+  box-shadow: var(--persona-dropdown-shadow, 0 4px 16px rgba(0,0,0,0.12));
+}
+
+#persona-root .persona-dropdown-menu button {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5rem 0.875rem;
+  border: none;
+  background: transparent;
+  color: var(--persona-dropdown-item-color, var(--persona-text, #1f2937));
+  font-size: 0.8125rem;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+}
+
+#persona-root .persona-dropdown-menu button:hover {
+  background: var(--persona-dropdown-item-hover-bg, var(--persona-container, #f3f4f6));
+}
+
+#persona-root .persona-dropdown-menu button[data-destructive] {
+  color: var(--persona-dropdown-destructive-color, #ef4444);
+}
+
+#persona-root .persona-dropdown-menu hr {
+  border: none;
+  border-top: 1px solid var(--persona-dropdown-hr, var(--persona-border, #e5e7eb));
+  margin: 0.25rem 0;
+}
+
 /* Draggable split handle (desktop split only; hidden in drawer / narrow host / small viewport) */
 #persona-root .persona-artifact-split-handle {
   width: 6px;
@@ -2178,7 +2360,11 @@
 #persona-root .persona-artifact-pane {
   border-radius: var(--persona-artifact-pane-radius, 0);
   overflow: hidden;
-  background-color: var(--persona-artifact-pane-bg, var(--persona-surface, #ffffff));
+  /* Layout paneBackground → theme components.artifact.pane.background → semantic surface */
+  background-color: var(
+    --persona-artifact-pane-bg,
+    var(--persona-components-artifact-pane-background, var(--persona-surface, #ffffff))
+  );
 }
 
 /* paneAppearance: 'seamless' — flush with chat, no border/shadow/gap */
@@ -2192,7 +2378,11 @@
   border-left-width: 0 !important;
   border-left-color: transparent !important;
   box-shadow: none !important;
-  background-color: var(--persona-artifact-pane-bg, var(--persona-container, #f8fafc));
+  /* Same token chain; final fallback stays container for flush split chrome */
+  background-color: var(
+    --persona-artifact-pane-bg,
+    var(--persona-components-artifact-pane-background, var(--persona-container, #f8fafc))
+  );
 }
 
 /* layout.paneBorder / paneBorderLeft — theme overrides (after appearance defaults) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "description": "Themeable, pluggable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -46,7 +46,7 @@
     "vitest": "^4.0.9"
   },
   "engines": {
-    "node": ">=18.17.0"
+    "node": ">=20.0.0"
   },
   "author": "Runtype",
   "license": "MIT",

package/src/components/artifact-card.ts

@@ -1,11 +1,13 @@
-import type { ComponentRenderer } from "./registry";
+import type { ComponentContext, ComponentRenderer } from "./registry";
 
 /**
- * Built-in artifact reference card component.
- * Renders a compact clickable card in the chat thread that links to an artifact.
- * Uses `data-open-artifact` attribute for click delegation (handled in ui.ts).
+ * Default artifact card renderer.
+ * Builds the compact clickable card shown in the chat thread.
  */
-export const PersonaArtifactCard: ComponentRenderer = (props) => {
+function renderDefaultArtifactCard(
+  props: Record<string, unknown>,
+  _context: ComponentContext
+): HTMLElement {
   const title =
     typeof props.title === "string" && props.title
       ? props.title
@@ -88,4 +90,36 @@ export const PersonaArtifactCard: ComponentRenderer = (props) => {
   }
 
   return root;
+}
+
+/**
+ * Built-in artifact reference card component.
+ * Renders a compact clickable card in the chat thread that links to an artifact.
+ * Uses `data-open-artifact` attribute for click delegation (handled in ui.ts).
+ *
+ * Supports a custom `renderCard` callback via `config.features.artifacts.renderCard`
+ * that can override the default card rendering.
+ */
+export const PersonaArtifactCard: ComponentRenderer = (props, context) => {
+  const customRenderer = context?.config?.features?.artifacts?.renderCard;
+  if (customRenderer) {
+    const title =
+      typeof props.title === "string" && props.title
+        ? props.title
+        : "Untitled artifact";
+    const artifactId =
+      typeof props.artifactId === "string" ? props.artifactId : "";
+    const status = props.status === "streaming" ? "streaming" : "complete";
+    const artifactType =
+      typeof props.artifactType === "string" ? props.artifactType : "markdown";
+
+    const result = customRenderer({
+      artifact: { artifactId, title, artifactType, status },
+      config: context.config,
+      defaultRenderer: () => renderDefaultArtifactCard(props, context),
+    });
+    if (result) return result;
+  }
+
+  return renderDefaultArtifactCard(props, context);
 };

package/src/components/artifact-pane.ts

@@ -4,6 +4,8 @@ import { escapeHtml, createMarkdownProcessorFromConfig } from "../postprocessors
 import { resolveSanitizer } from "../utils/sanitize";
 import { componentRegistry, type ComponentContext } from "./registry";
 import { renderLucideIcon } from "../utils/icons";
+import { createDropdownMenu, type DropdownMenuHandle } from "../utils/dropdown";
+import { createIconButton, createLabelButton } from "../utils/buttons";
 
 export type ArtifactPaneApi = {
   element: HTMLElement;
@@ -27,65 +29,6 @@ function fallbackComponentCard(sel: PersonaArtifactRecord): HTMLElement {
   return card;
 }
 
-function iconButton(iconName: string, label: string, extraClass = ""): HTMLButtonElement {
-  const btn = createElement(
-    "button",
-    `persona-inline-flex persona-items-center persona-justify-center persona-rounded-md persona-border persona-border-persona-border persona-bg-persona-surface persona-p-1 persona-text-persona-primary hover:persona-bg-persona-container ${extraClass}`
-  ) as HTMLButtonElement;
-  btn.type = "button";
-  btn.setAttribute("aria-label", label);
-  btn.title = label;
-  const icon = renderLucideIcon(iconName, 16, "currentColor", 2);
-  if (icon) btn.appendChild(icon);
-  return btn;
-}
-
-function documentToolbarIconButton(
-  iconName: string,
-  label: string,
-  extraClass: string
-): HTMLButtonElement {
-  const btn = createElement(
-    "button",
-    `persona-artifact-doc-icon-btn ${extraClass}`.trim()
-  ) as HTMLButtonElement;
-  btn.type = "button";
-  btn.setAttribute("aria-label", label);
-  btn.title = label;
-  const icon = renderLucideIcon(iconName, 16, "currentColor", 2);
-  if (icon) btn.appendChild(icon);
-  return btn;
-}
-
-function documentToolbarCopyMainButton(showLabel: boolean): HTMLButtonElement {
-  const btn = createElement("button", "persona-artifact-doc-copy-btn") as HTMLButtonElement;
-  btn.type = "button";
-  btn.setAttribute("aria-label", "Copy");
-  btn.title = "Copy";
-  const icon = renderLucideIcon("copy", showLabel ? 14 : 16, "currentColor", 2);
-  if (icon) btn.appendChild(icon);
-  if (showLabel) {
-    const span = createElement("span", "persona-artifact-doc-copy-label");
-    span.textContent = "Copy";
-    btn.appendChild(span);
-  }
-  return btn;
-}
-
-function documentToolbarChevronMenuButton(): HTMLButtonElement {
-  const btn = createElement(
-    "button",
-    "persona-artifact-doc-copy-menu-chevron persona-artifact-doc-icon-btn"
-  ) as HTMLButtonElement;
-  btn.type = "button";
-  btn.setAttribute("aria-label", "More copy options");
-  btn.setAttribute("aria-haspopup", "true");
-  btn.setAttribute("aria-expanded", "false");
-  const chev = renderLucideIcon("chevron-down", 14, "currentColor", 2);
-  if (chev) btn.appendChild(chev);
-  return btn;
-}
-
 /**
  * Right-hand artifact sidebar / mobile drawer content.
  */
@@ -119,6 +62,8 @@ export function createArtifactPane(
   const dismissLocalUi = () => {
     backdrop?.classList.add("persona-hidden");
     shell.classList.remove("persona-artifact-drawer-open");
+    // Hide portaled copy menu
+    copyMenuDropdown?.hide();
   };
 
   if (backdrop) {
@@ -162,13 +107,13 @@ export function createArtifactPane(
 
   /** Document preset: view vs raw source */
   let viewMode: "rendered" | "source" = "rendered";
-  const leftTools = createElement("div", "persona-flex persona-items-center persona-gap-1 persona-shrink-0");
+  const leftTools = createElement("div", "persona-flex persona-items-center persona-gap-1 persona-shrink-0 persona-artifact-toggle-group");
   const viewBtn = documentChrome
-    ? documentToolbarIconButton("eye", "Rendered view", "persona-artifact-view-btn")
-    : iconButton("eye", "Rendered view", "");
+    ? createIconButton({ icon: "eye", label: "Rendered view", className: "persona-artifact-doc-icon-btn persona-artifact-view-btn" })
+    : createIconButton({ icon: "eye", label: "Rendered view" });
   const codeBtn = documentChrome
-    ? documentToolbarIconButton("code-2", "Source", "persona-artifact-code-btn")
-    : iconButton("code-2", "Source", "");
+    ? createIconButton({ icon: "code-2", label: "Source", className: "persona-artifact-doc-icon-btn persona-artifact-code-btn" })
+    : createIconButton({ icon: "code-2", label: "Source" });
   const actionsRight = createElement("div", "persona-flex persona-items-center persona-gap-1 persona-shrink-0");
   const showCopyLabel = layout?.documentToolbarShowCopyLabel === true;
   const showCopyChevron = layout?.documentToolbarShowCopyChevron === true;
@@ -178,10 +123,12 @@ export function createArtifactPane(
   let copyWrap: HTMLElement | null = null;
   let copyBtn: HTMLButtonElement;
   let copyMenuChevronBtn: HTMLButtonElement | null = null;
-  let copyMenuEl: HTMLElement | null = null;
+  let copyMenuDropdown: DropdownMenuHandle | null = null;
 
   if (documentChrome && (showCopyLabel || showCopyChevron) && !showCopyMenu) {
-    copyBtn = documentToolbarCopyMainButton(showCopyLabel);
+    copyBtn = showCopyLabel
+      ? createLabelButton({ icon: "copy", label: "Copy", iconSize: 14, className: "persona-artifact-doc-copy-btn" })
+      : createIconButton({ icon: "copy", label: "Copy", className: "persona-artifact-doc-copy-btn" });
     if (showCopyChevron) {
       const chev = renderLucideIcon("chevron-down", 14, "currentColor", 2);
       if (chev) copyBtn.appendChild(chev);
@@ -191,36 +138,29 @@ export function createArtifactPane(
       "div",
       "persona-relative persona-inline-flex persona-items-center persona-gap-0 persona-rounded-md"
     );
-    copyBtn = documentToolbarCopyMainButton(showCopyLabel);
-    copyMenuChevronBtn = documentToolbarChevronMenuButton();
+    copyBtn = showCopyLabel
+      ? createLabelButton({ icon: "copy", label: "Copy", iconSize: 14, className: "persona-artifact-doc-copy-btn" })
+      : createIconButton({ icon: "copy", label: "Copy", className: "persona-artifact-doc-copy-btn" });
+    copyMenuChevronBtn = createIconButton({
+      icon: "chevron-down",
+      label: "More copy options",
+      size: 14,
+      className: "persona-artifact-doc-copy-menu-chevron persona-artifact-doc-icon-btn",
+      aria: { "aria-haspopup": "true", "aria-expanded": "false" }
+    });
     copyWrap.append(copyBtn, copyMenuChevronBtn);
-    copyMenuEl = createElement(
-      "div",
-      "persona-artifact-doc-copy-menu persona-absolute persona-right-0 persona-top-full persona-z-20 persona-mt-1 persona-min-w-[10rem] persona-rounded-md persona-border persona-border-persona-border persona-bg-persona-surface persona-py-1 persona-shadow-md persona-hidden"
-    );
-    copyWrap.appendChild(copyMenuEl);
-    for (const item of copyMenuItems!) {
-      const opt = createElement(
-        "button",
-        "persona-block persona-w-full persona-text-left persona-px-3 persona-py-2 persona-text-xs persona-text-persona-primary hover:persona-bg-persona-container"
-      ) as HTMLButtonElement;
-      opt.type = "button";
-      opt.textContent = item.label;
-      opt.dataset.copyMenuId = item.id;
-      copyMenuEl.appendChild(opt);
-    }
   } else if (documentChrome) {
-    copyBtn = documentToolbarIconButton("copy", "Copy", "");
+    copyBtn = createIconButton({ icon: "copy", label: "Copy", className: "persona-artifact-doc-icon-btn" });
   } else {
-    copyBtn = iconButton("copy", "Copy", "");
+    copyBtn = createIconButton({ icon: "copy", label: "Copy" });
   }
 
   const refreshBtn = documentChrome
-    ? documentToolbarIconButton("refresh-cw", "Refresh", "")
-    : iconButton("refresh-cw", "Refresh", "");
+    ? createIconButton({ icon: "refresh-cw", label: "Refresh", className: "persona-artifact-doc-icon-btn" })
+    : createIconButton({ icon: "refresh-cw", label: "Refresh" });
   const closeIconBtn = documentChrome
-    ? documentToolbarIconButton("x", "Close", "")
-    : iconButton("x", "Close", "");
+    ? createIconButton({ icon: "x", label: "Close", className: "persona-artifact-doc-icon-btn" })
+    : createIconButton({ icon: "x", label: "Close" });
 
   const getSelectedArtifactText = (): { markdown: string; jsonPayload: string; id: string | null } => {
     const sel = records.find((r) => r.id === selectedId) ?? records[records.length - 1];
@@ -262,45 +202,46 @@ export function createArtifactPane(
     await defaultCopy();
   });
 
-  if (copyMenuChevronBtn && copyMenuEl) {
-    const closeMenu = () => {
-      copyMenuEl!.classList.add("persona-hidden");
-      copyMenuChevronBtn!.setAttribute("aria-expanded", "false");
+  if (copyMenuChevronBtn && copyMenuItems?.length) {
+    // Resolve the portal target — #persona-root for CSS var inheritance, escaping overflow: hidden
+    const resolvePortal = (): HTMLElement => shell.closest("#persona-root") as HTMLElement ?? document.body;
+
+    const initDropdown = () => {
+      copyMenuDropdown = createDropdownMenu({
+        items: copyMenuItems.map((item) => ({ id: item.id, label: item.label })),
+        onSelect: async (actionId) => {
+          const { markdown, jsonPayload, id } = getSelectedArtifactText();
+          const handler = layout?.onDocumentToolbarCopyMenuSelect;
+          try {
+            if (handler) {
+              await handler({ actionId, artifactId: id, markdown, jsonPayload });
+            } else if (actionId === "markdown" || actionId === "md") {
+              await navigator.clipboard.writeText(markdown);
+            } else if (actionId === "json" || actionId === "source") {
+              await navigator.clipboard.writeText(jsonPayload);
+            } else {
+              await navigator.clipboard.writeText(markdown || jsonPayload);
+            }
+          } catch {
+            /* ignore */
+          }
+        },
+        anchor: copyWrap ?? copyMenuChevronBtn!,
+        position: 'bottom-right',
+        portal: resolvePortal(),
+      });
     };
-    copyMenuChevronBtn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      const open = copyMenuEl!.classList.contains("persona-hidden");
-      if (open) {
-        copyMenuEl!.classList.remove("persona-hidden");
-        copyMenuChevronBtn!.setAttribute("aria-expanded", "true");
-      } else {
-        closeMenu();
-      }
-    });
-    if (typeof document !== "undefined") {
-      document.addEventListener("click", closeMenu);
+
+    // Defer init until shell is in the DOM (may not be attached yet)
+    if (shell.isConnected) {
+      initDropdown();
+    } else {
+      requestAnimationFrame(initDropdown);
     }
-    copyMenuEl.addEventListener("click", async (e) => {
-      const t = (e.target as HTMLElement).closest("button[data-copy-menu-id]") as HTMLButtonElement | null;
-      if (!t?.dataset.copyMenuId) return;
+
+    copyMenuChevronBtn.addEventListener("click", (e) => {
       e.stopPropagation();
-      const actionId = t.dataset.copyMenuId;
-      const { markdown, jsonPayload, id } = getSelectedArtifactText();
-      const handler = layout?.onDocumentToolbarCopyMenuSelect;
-      try {
-        if (handler) {
-          await handler({ actionId, artifactId: id, markdown, jsonPayload });
-        } else if (actionId === "markdown" || actionId === "md") {
-          await navigator.clipboard.writeText(markdown);
-        } else if (actionId === "json" || actionId === "source") {
-          await navigator.clipboard.writeText(jsonPayload);
-        } else {
-          await navigator.clipboard.writeText(markdown || jsonPayload);
-        }
-      } catch {
-        /* ignore */
-      }
-      closeMenu();
+      copyMenuDropdown?.toggle();
     });
   }
 
@@ -388,7 +329,7 @@ export function createArtifactPane(
     for (const r of records) {
       const tab = createElement(
         "button",
-        "persona-artifact-tab persona-shrink-0 persona-rounded-lg persona-px-2 persona-py-1 persona-text-xs persona-border persona-border-transparent persona-text-persona-primary hover:persona-bg-persona-container"
+        "persona-artifact-tab persona-shrink-0 persona-rounded-lg persona-px-2 persona-py-1 persona-text-xs persona-border persona-border-transparent persona-text-persona-primary"
       );
       tab.type = "button";
       tab.textContent = r.title || r.id.slice(0, 8);

package/src/components/composer-builder.ts

@@ -40,23 +40,6 @@ export interface ComposerBuildContext {
   disabled?: boolean;
 }
 
-/**
- * Helper to get font family CSS value from config preset
- */
-const getFontFamilyValue = (
-  family: "sans-serif" | "serif" | "mono"
-): string => {
-  switch (family) {
-    case "serif":
-      return 'Georgia, "Times New Roman", Times, serif';
-    case "mono":
-      return '"Courier New", Courier, "Lucida Console", Monaco, monospace';
-    case "sans-serif":
-    default:
-      return '-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif';
-  }
-};
-
 /**
  * Build the composer/footer section of the panel.
  * Extracted for reuse and plugin override support.
@@ -91,12 +74,9 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     "persona-w-full persona-min-h-[24px] persona-resize-none persona-border-none persona-bg-transparent persona-text-sm persona-text-persona-primary focus:persona-outline-none focus:persona-border-none persona-composer-textarea";
   textarea.rows = 1;
 
-  // Apply font family and weight from config
-  const fontFamily = config?.theme?.inputFontFamily ?? "sans-serif";
-  const fontWeight = config?.theme?.inputFontWeight ?? "400";
-
-  textarea.style.fontFamily = getFontFamilyValue(fontFamily);
-  textarea.style.fontWeight = fontWeight;
+  textarea.style.fontFamily =
+    'var(--persona-input-font-family, var(--persona-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif))';
+  textarea.style.fontWeight = "var(--persona-input-font-weight, var(--persona-font-weight, 400))";
 
   // Set up auto-resize: expand up to 3 lines, then scroll
   // Line height is ~20px for text-sm (14px * 1.25 line-height), so 3 lines ≈ 60px