@runtypelabs/persona 1.48.0 → 2.0.0

package/src/utils/artifact-gate.test.ts

@@ -0,0 +1,255 @@
+import { describe, expect, it } from "vitest";
+import {
+  applyArtifactLayoutCssVars,
+  applyArtifactPaneAppearance,
+  applyArtifactPaneBorderTheme,
+  artifactsSidebarEnabled,
+} from "./artifact-gate";
+import type { AgentWidgetConfig } from "../types";
+
+function baseConfig(overrides: Partial<AgentWidgetConfig> = {}): AgentWidgetConfig {
+  return {
+    apiUrl: "/api",
+    ...overrides,
+  } as AgentWidgetConfig;
+}
+
+/** Minimal DOM shim (widget vitest uses `environment: 'node'`). */
+function createFakeMount(): HTMLElement {
+  const classes = new Set<string>();
+  const cssProps: Record<string, string> = {};
+  return {
+    classList: {
+      remove(...names: string[]) {
+        for (const n of names) {
+          for (const part of n.split(/\s+/).filter(Boolean)) {
+            classes.delete(part);
+          }
+        }
+      },
+      add(name: string) {
+        classes.add(name);
+      },
+      contains(name: string) {
+        return classes.has(name);
+      },
+    },
+    style: {
+      setProperty(name: string, value: string) {
+        cssProps[name] = value;
+      },
+      removeProperty(name: string) {
+        delete cssProps[name];
+      },
+      getPropertyValue(name: string) {
+        return cssProps[name] ?? "";
+      },
+    },
+  } as unknown as HTMLElement;
+}
+
+describe("applyArtifactPaneAppearance", () => {
+  it("clears classes and radius when artifacts disabled", () => {
+    const mount = createFakeMount();
+    mount.classList.add("persona-artifact-appearance-panel");
+    mount.style.setProperty("--persona-artifact-pane-radius", "99px");
+    applyArtifactPaneAppearance(
+      mount,
+      baseConfig({ features: { artifacts: { enabled: false } } })
+    );
+    expect(mount.classList.contains("persona-artifact-appearance-panel")).toBe(false);
+    expect(mount.style.getPropertyValue("--persona-artifact-pane-radius")).toBe("");
+  });
+
+  it("adds panel class by default when artifacts enabled", () => {
+    const mount = createFakeMount();
+    applyArtifactPaneAppearance(
+      mount,
+      baseConfig({ features: { artifacts: { enabled: true } } })
+    );
+    expect(mount.classList.contains("persona-artifact-appearance-panel")).toBe(true);
+    expect(mount.style.getPropertyValue("--persona-artifact-pane-radius")).toBe("");
+    expect(mount.classList.contains("persona-artifact-unified-split")).toBe(false);
+  });
+
+  it("adds unified split class and optional outer radius", () => {
+    const mount = createFakeMount();
+    applyArtifactPaneAppearance(
+      mount,
+      baseConfig({
+        features: {
+          artifacts: { enabled: true, layout: { unifiedSplitChrome: true, unifiedSplitOuterRadius: "12px" } },
+        },
+      })
+    );
+    expect(mount.classList.contains("persona-artifact-unified-split")).toBe(true);
+    expect(mount.style.getPropertyValue("--persona-artifact-unified-outer-radius").trim()).toBe("12px");
+  });
+
+  it("adds seamless class and border radius on any mode", () => {
+    const ext = createFakeMount();
+    applyArtifactPaneAppearance(
+      ext,
+      baseConfig({
+        features: { artifacts: { enabled: true, layout: { paneAppearance: "seamless" } } },
+      })
+    );
+    expect(ext.classList.contains("persona-artifact-appearance-seamless")).toBe(true);
+
+    const rounded = createFakeMount();
+    applyArtifactPaneAppearance(
+      rounded,
+      baseConfig({
+        features: {
+          artifacts: { enabled: true, layout: { paneAppearance: "panel", paneBorderRadius: "1rem" } },
+        },
+      })
+    );
+    expect(rounded.classList.contains("persona-artifact-appearance-panel")).toBe(true);
+    expect(rounded.style.getPropertyValue("--persona-artifact-pane-radius").trim()).toBe("1rem");
+  });
+
+  it("sets paneShadow CSS var when provided", () => {
+    const mount = createFakeMount();
+    applyArtifactPaneAppearance(
+      mount,
+      baseConfig({
+        features: {
+          artifacts: { enabled: true, layout: { paneShadow: "none" } },
+        },
+      })
+    );
+    expect(mount.style.getPropertyValue("--persona-artifact-pane-shadow").trim()).toBe("none");
+  });
+
+  it("falls back to panel for invalid paneAppearance", () => {
+    const mount = createFakeMount();
+    applyArtifactPaneAppearance(
+      mount,
+      baseConfig({
+        features: {
+          artifacts: { enabled: true, layout: { paneAppearance: "nope" as never } },
+        },
+      })
+    );
+    expect(mount.classList.contains("persona-artifact-appearance-panel")).toBe(true);
+  });
+});
+
+describe("applyArtifactPaneBorderTheme", () => {
+  it("clears when artifacts disabled", () => {
+    const mount = createFakeMount();
+    mount.classList.add("persona-artifact-border-full");
+    mount.style.setProperty("--persona-artifact-pane-border", "2px solid red");
+    applyArtifactPaneBorderTheme(
+      mount,
+      baseConfig({ features: { artifacts: { enabled: false } } })
+    );
+    expect(mount.classList.contains("persona-artifact-border-full")).toBe(false);
+    expect(mount.style.getPropertyValue("--persona-artifact-pane-border")).toBe("");
+  });
+
+  it("prefers paneBorder over paneBorderLeft", () => {
+    const mount = createFakeMount();
+    applyArtifactPaneBorderTheme(
+      mount,
+      baseConfig({
+        features: {
+          artifacts: {
+            enabled: true,
+            layout: { paneBorder: "1px solid #ccc", paneBorderLeft: "4px solid blue" },
+          },
+        },
+      })
+    );
+    expect(mount.classList.contains("persona-artifact-border-full")).toBe(true);
+    expect(mount.classList.contains("persona-artifact-border-left")).toBe(false);
+    expect(mount.style.getPropertyValue("--persona-artifact-pane-border").trim()).toBe("1px solid #ccc");
+  });
+
+  it("sets border-left only when paneBorderLeft alone", () => {
+    const mount = createFakeMount();
+    applyArtifactPaneBorderTheme(
+      mount,
+      baseConfig({
+        features: { artifacts: { enabled: true, layout: { paneBorderLeft: "1px solid #cccccc" } } },
+      })
+    );
+    expect(mount.classList.contains("persona-artifact-border-left")).toBe(true);
+    expect(mount.style.getPropertyValue("--persona-artifact-pane-border-left").trim()).toBe(
+      "1px solid #cccccc"
+    );
+  });
+});
+
+describe("artifactsSidebarEnabled", () => {
+  it("is true only when enabled flag is true", () => {
+    expect(artifactsSidebarEnabled(undefined)).toBe(false);
+    expect(artifactsSidebarEnabled(baseConfig())).toBe(false);
+    expect(
+      artifactsSidebarEnabled(baseConfig({ features: { artifacts: { enabled: true } } }))
+    ).toBe(true);
+  });
+});
+
+describe("applyArtifactLayoutCssVars", () => {
+  it("sets pane background and padding CSS vars when provided", () => {
+    const mount = createFakeMount();
+    applyArtifactLayoutCssVars(
+      mount,
+      baseConfig({
+        features: {
+          artifacts: {
+            enabled: true,
+            layout: {
+              paneBackground: "#212121",
+              panePadding: "24px",
+            },
+          },
+        },
+      })
+    );
+    expect(mount.style.getPropertyValue("--persona-artifact-pane-bg").trim()).toBe("#212121");
+    expect(mount.style.getPropertyValue("--persona-artifact-pane-padding").trim()).toBe("24px");
+  });
+
+  it("clears pane bg and padding when artifacts disabled", () => {
+    const mount = createFakeMount();
+    mount.style.setProperty("--persona-artifact-pane-bg", "#000");
+    mount.style.setProperty("--persona-artifact-pane-padding", "8px");
+    applyArtifactLayoutCssVars(
+      mount,
+      baseConfig({ features: { artifacts: { enabled: false } } })
+    );
+    expect(mount.style.getPropertyValue("--persona-artifact-pane-bg")).toBe("");
+    expect(mount.style.getPropertyValue("--persona-artifact-pane-padding")).toBe("");
+  });
+
+  it("sets document toolbar layout CSS vars when provided", () => {
+    const mount = createFakeMount();
+    applyArtifactLayoutCssVars(
+      mount,
+      baseConfig({
+        features: {
+          artifacts: {
+            enabled: true,
+            layout: {
+              documentToolbarIconColor: "#60a5fa",
+              documentToolbarToggleActiveBackground: "#262626",
+              documentToolbarToggleActiveBorderColor: "#444444",
+            },
+          },
+        },
+      })
+    );
+    expect(mount.style.getPropertyValue("--persona-artifact-doc-toolbar-icon-color").trim()).toBe(
+      "#60a5fa"
+    );
+    expect(mount.style.getPropertyValue("--persona-artifact-doc-toggle-active-bg").trim()).toBe(
+      "#262626"
+    );
+    expect(mount.style.getPropertyValue("--persona-artifact-doc-toggle-active-border").trim()).toBe(
+      "#444444"
+    );
+  });
+});

package/src/utils/artifact-gate.ts

@@ -0,0 +1,142 @@
+import type { AgentWidgetConfig, PersonaArtifactKind } from "../types";
+
+export function artifactsSidebarEnabled(config: AgentWidgetConfig | undefined): boolean {
+  return config?.features?.artifacts?.enabled === true;
+}
+
+export function artifactKindAllowedByFeature(
+  config: AgentWidgetConfig | undefined,
+  kind: PersonaArtifactKind
+): boolean {
+  const allowed = config?.features?.artifacts?.allowedTypes;
+  if (!allowed?.length) return true;
+  return allowed.includes(kind);
+}
+
+/** Optional custom border on artifact pane via CSS vars + root classes. */
+export function applyArtifactPaneBorderTheme(mount: HTMLElement, config: AgentWidgetConfig): void {
+  mount.classList.remove("persona-artifact-border-full", "persona-artifact-border-left");
+  mount.style.removeProperty("--persona-artifact-pane-border");
+  mount.style.removeProperty("--persona-artifact-pane-border-left");
+  if (!artifactsSidebarEnabled(config)) return;
+
+  const l = config.features?.artifacts?.layout;
+  const full = l?.paneBorder?.trim();
+  const left = l?.paneBorderLeft?.trim();
+  if (full) {
+    mount.classList.add("persona-artifact-border-full");
+    mount.style.setProperty("--persona-artifact-pane-border", full);
+  } else if (left) {
+    mount.classList.add("persona-artifact-border-left");
+    mount.style.setProperty("--persona-artifact-pane-border-left", left);
+  }
+}
+
+/** Set CSS variables on #persona-root for artifact split/pane sizing. Clears when artifacts disabled. */
+function clearDocumentToolbarLayoutVars(mount: HTMLElement): void {
+  mount.style.removeProperty("--persona-artifact-doc-toolbar-icon-color");
+  mount.style.removeProperty("--persona-artifact-doc-toggle-active-bg");
+  mount.style.removeProperty("--persona-artifact-doc-toggle-active-border");
+}
+
+export function applyArtifactLayoutCssVars(mount: HTMLElement, config: AgentWidgetConfig): void {
+  if (!artifactsSidebarEnabled(config)) {
+    mount.style.removeProperty("--persona-artifact-split-gap");
+    mount.style.removeProperty("--persona-artifact-pane-width");
+    mount.style.removeProperty("--persona-artifact-pane-max-width");
+    mount.style.removeProperty("--persona-artifact-pane-min-width");
+    mount.style.removeProperty("--persona-artifact-pane-bg");
+    mount.style.removeProperty("--persona-artifact-pane-padding");
+    clearDocumentToolbarLayoutVars(mount);
+    applyArtifactPaneBorderTheme(mount, config);
+    return;
+  }
+  const l = config.features?.artifacts?.layout;
+  mount.style.setProperty("--persona-artifact-split-gap", l?.splitGap ?? "0.5rem");
+  mount.style.setProperty("--persona-artifact-pane-width", l?.paneWidth ?? "40%");
+  mount.style.setProperty("--persona-artifact-pane-max-width", l?.paneMaxWidth ?? "28rem");
+  if (l?.paneMinWidth) {
+    mount.style.setProperty("--persona-artifact-pane-min-width", l.paneMinWidth);
+  } else {
+    mount.style.removeProperty("--persona-artifact-pane-min-width");
+  }
+  const paneBg = l?.paneBackground?.trim();
+  if (paneBg) {
+    mount.style.setProperty("--persona-artifact-pane-bg", paneBg);
+  } else {
+    mount.style.removeProperty("--persona-artifact-pane-bg");
+  }
+  const panePad = l?.panePadding?.trim();
+  if (panePad) {
+    mount.style.setProperty("--persona-artifact-pane-padding", panePad);
+  } else {
+    mount.style.removeProperty("--persona-artifact-pane-padding");
+  }
+
+  const iconColor = l?.documentToolbarIconColor?.trim();
+  if (iconColor) {
+    mount.style.setProperty("--persona-artifact-doc-toolbar-icon-color", iconColor);
+  } else {
+    mount.style.removeProperty("--persona-artifact-doc-toolbar-icon-color");
+  }
+  const toggleBg = l?.documentToolbarToggleActiveBackground?.trim();
+  if (toggleBg) {
+    mount.style.setProperty("--persona-artifact-doc-toggle-active-bg", toggleBg);
+  } else {
+    mount.style.removeProperty("--persona-artifact-doc-toggle-active-bg");
+  }
+  const toggleBorder = l?.documentToolbarToggleActiveBorderColor?.trim();
+  if (toggleBorder) {
+    mount.style.setProperty("--persona-artifact-doc-toggle-active-border", toggleBorder);
+  } else {
+    mount.style.removeProperty("--persona-artifact-doc-toggle-active-border");
+  }
+
+  applyArtifactPaneBorderTheme(mount, config);
+}
+
+const ARTIFACT_APPEARANCE_MODES = ["panel", "seamless"] as const;
+
+/** Toggle root classes for artifact pane appearance, radius, shadow, and unified chrome. */
+export function applyArtifactPaneAppearance(mount: HTMLElement, config: AgentWidgetConfig): void {
+  for (const m of ARTIFACT_APPEARANCE_MODES) {
+    mount.classList.remove(`persona-artifact-appearance-${m}`);
+  }
+  mount.classList.remove("persona-artifact-unified-split");
+  mount.style.removeProperty("--persona-artifact-pane-radius");
+  mount.style.removeProperty("--persona-artifact-pane-shadow");
+  mount.style.removeProperty("--persona-artifact-unified-outer-radius");
+  if (!artifactsSidebarEnabled(config)) return;
+
+  const layout = config.features?.artifacts?.layout;
+  const raw = layout?.paneAppearance ?? "panel";
+  const mode = (ARTIFACT_APPEARANCE_MODES as readonly string[]).includes(raw) ? raw : "panel";
+  mount.classList.add(`persona-artifact-appearance-${mode}`);
+
+  const radius = layout?.paneBorderRadius?.trim();
+  if (radius) {
+    mount.style.setProperty("--persona-artifact-pane-radius", radius);
+  }
+
+  const shadow = layout?.paneShadow?.trim();
+  if (shadow) {
+    mount.style.setProperty("--persona-artifact-pane-shadow", shadow);
+  }
+
+  if (layout?.unifiedSplitChrome === true) {
+    mount.classList.add("persona-artifact-unified-split");
+    const outer = layout.unifiedSplitOuterRadius?.trim() || radius;
+    if (outer) {
+      mount.style.setProperty("--persona-artifact-unified-outer-radius", outer);
+    }
+  }
+}
+
+/** Widen floating panel when artifacts show (default true); `false` opts out. */
+export function shouldExpandLauncherForArtifacts(
+  config: AgentWidgetConfig,
+  launcherEnabled: boolean
+): boolean {
+  if (!launcherEnabled || !artifactsSidebarEnabled(config)) return false;
+  return config.features?.artifacts?.layout?.expandLauncherPanelWhenOpen !== false;
+}

package/src/utils/artifact-resize.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import {
+  ARTIFACT_RESIZE_CHAT_MIN_PX,
+  clampArtifactPaneWidth,
+  maxArtifactWidthFromSplit,
+  parseArtifactResizeMaxPxOptional,
+  parseArtifactResizePx,
+  resolveArtifactPaneWidthPx,
+} from "./artifact-resize";
+
+describe("parseArtifactResizePx", () => {
+  it("parses px strings", () => {
+    expect(parseArtifactResizePx("240px", 99)).toBe(240);
+    expect(parseArtifactResizePx("  12.5px ", 99)).toBe(12.5);
+  });
+  it("falls back on invalid or empty", () => {
+    expect(parseArtifactResizePx(undefined, 200)).toBe(200);
+    expect(parseArtifactResizePx("2rem", 200)).toBe(200);
+    expect(parseArtifactResizePx("50%", 200)).toBe(200);
+  });
+});
+
+describe("parseArtifactResizeMaxPxOptional", () => {
+  it("returns null when unset or invalid", () => {
+    expect(parseArtifactResizeMaxPxOptional(undefined)).toBe(null);
+    expect(parseArtifactResizeMaxPxOptional("40rem")).toBe(null);
+  });
+  it("parses px", () => {
+    expect(parseArtifactResizeMaxPxOptional("400px")).toBe(400);
+  });
+});
+
+describe("clampArtifactPaneWidth", () => {
+  it("clamps to range", () => {
+    expect(clampArtifactPaneWidth(100, 200, 400)).toBe(200);
+    expect(clampArtifactPaneWidth(500, 200, 400)).toBe(400);
+    expect(clampArtifactPaneWidth(300, 200, 400)).toBe(300);
+  });
+  it("returns min when max below min", () => {
+    expect(clampArtifactPaneWidth(300, 200, 100)).toBe(200);
+  });
+});
+
+describe("maxArtifactWidthFromSplit", () => {
+  it("subtracts chat min, gaps, and handle", () => {
+    const split = 800;
+    const gap = 8;
+    const handle = 6;
+    const chatMin = ARTIFACT_RESIZE_CHAT_MIN_PX;
+    expect(maxArtifactWidthFromSplit(split, gap, handle, chatMin)).toBe(800 - 200 - 16 - 6);
+  });
+});
+
+describe("resolveArtifactPaneWidthPx", () => {
+  it("applies config min and layout max", () => {
+    const w = resolveArtifactPaneWidthPx(500, 800, 8, 6, "250px", undefined);
+    expect(w).toBeGreaterThanOrEqual(250);
+    expect(w).toBeLessThanOrEqual(800 - 200 - 16 - 6);
+  });
+  it("respects optional max cap", () => {
+    const w = resolveArtifactPaneWidthPx(900, 1200, 8, 6, "200px", "320px");
+    expect(w).toBeLessThanOrEqual(320);
+  });
+});

package/src/utils/artifact-resize.ts

@@ -0,0 +1,67 @@
+/** Minimum width (px) reserved for the chat column while resizing the artifact pane. */
+export const ARTIFACT_RESIZE_CHAT_MIN_PX = 200;
+
+/** Default minimum width (px) for the artifact column when `resizableMinWidth` is unset. */
+export const ARTIFACT_RESIZE_PANE_MIN_DEFAULT_PX = 200;
+
+/** Parse a `NNpx` string; returns `fallback` if missing or invalid. */
+export function parseArtifactResizePx(input: string | undefined, fallback: number): number {
+  if (!input?.trim()) return fallback;
+  const m = /^(\d+(?:\.\d+)?)px\s*$/i.exec(input.trim());
+  if (!m) return fallback;
+  return Math.max(0, Number(m[1]));
+}
+
+/** Optional max from config: only valid `px` strings apply; otherwise no extra cap. */
+export function parseArtifactResizeMaxPxOptional(input: string | undefined): number | null {
+  if (!input?.trim()) return null;
+  const m = /^(\d+(?:\.\d+)?)px\s*$/i.exec(input.trim());
+  if (!m) return null;
+  return Math.max(0, Number(m[1]));
+}
+
+export function clampArtifactPaneWidth(widthPx: number, minPx: number, maxPx: number): number {
+  if (maxPx < minPx) return minPx;
+  return Math.min(maxPx, Math.max(minPx, widthPx));
+}
+
+/**
+ * Upper bound for artifact width (px) from split row geometry: leave room for chat min, two flex gaps, handle.
+ */
+export function maxArtifactWidthFromSplit(
+  splitWidthPx: number,
+  gapPx: number,
+  handleWidthPx: number,
+  chatMinPx: number
+): number {
+  const raw = splitWidthPx - chatMinPx - 2 * gapPx - handleWidthPx;
+  return Math.max(0, raw);
+}
+
+/** Read the first gap value from computed `gap` (e.g. `8px` or `8px 8px`). */
+export function readFlexGapPx(splitRoot: HTMLElement, win: Window): number {
+  const g = win.getComputedStyle(splitRoot).gap || "0px";
+  const first = g.trim().split(/\s+/)[0] ?? "0px";
+  const m = /^([\d.]+)px$/i.exec(first);
+  if (m) return Number(m[1]);
+  const m2 = /^([\d.]+)/.exec(first);
+  return m2 ? Number(m2[1]) : 8;
+}
+
+export function resolveArtifactPaneWidthPx(
+  candidatePx: number,
+  splitWidthPx: number,
+  gapPx: number,
+  handleWidthPx: number,
+  resizableMinWidth?: string,
+  resizableMaxWidth?: string
+): number {
+  const minPx = parseArtifactResizePx(resizableMinWidth, ARTIFACT_RESIZE_PANE_MIN_DEFAULT_PX);
+  let maxPx = maxArtifactWidthFromSplit(splitWidthPx, gapPx, handleWidthPx, ARTIFACT_RESIZE_CHAT_MIN_PX);
+  maxPx = Math.max(minPx, maxPx);
+  const cap = parseArtifactResizeMaxPxOptional(resizableMaxWidth);
+  if (cap !== null) {
+    maxPx = Math.min(maxPx, cap);
+  }
+  return clampArtifactPaneWidth(candidatePx, minPx, maxPx);
+}

package/src/utils/attachment-manager.ts

@@ -267,7 +267,7 @@ export class AttachmentManager {
 
     const previewWrapper = createElement(
       "div",
-      "tvw-attachment-preview tvw-relative tvw-inline-block"
+      "persona-attachment-preview persona-relative persona-inline-block"
     );
     previewWrapper.setAttribute("data-attachment-id", attachment.id);
     previewWrapper.style.width = "48px";
@@ -279,7 +279,7 @@ export class AttachmentManager {
       img.src = attachment.previewUrl;
       img.alt = attachment.file.name;
       img.className =
-        "tvw-w-full tvw-h-full tvw-object-cover tvw-rounded-lg tvw-border tvw-border-gray-200";
+        "persona-w-full persona-h-full persona-object-cover persona-rounded-lg persona-border persona-border-gray-200";
       img.style.width = "48px";
       img.style.height = "48px";
       img.style.objectFit = "cover";
@@ -291,8 +291,8 @@ export class AttachmentManager {
       filePreview.style.width = "48px";
       filePreview.style.height = "48px";
       filePreview.style.borderRadius = "8px";
-      filePreview.style.backgroundColor = "var(--cw-container, #f3f4f6)";
-      filePreview.style.border = "1px solid var(--cw-border, #e5e7eb)";
+      filePreview.style.backgroundColor = "var(--persona-container, #f3f4f6)";
+      filePreview.style.border = "1px solid var(--persona-border, #e5e7eb)";
       filePreview.style.display = "flex";
       filePreview.style.flexDirection = "column";
       filePreview.style.alignItems = "center";
@@ -302,7 +302,7 @@ export class AttachmentManager {
 
       // File icon
       const iconName = getFileIconName(attachment.file.type);
-      const fileIcon = renderLucideIcon(iconName, 20, "var(--cw-muted, #6b7280)", 1.5);
+      const fileIcon = renderLucideIcon(iconName, 20, "var(--persona-muted, #6b7280)", 1.5);
       if (fileIcon) {
         filePreview.appendChild(fileIcon);
       }
@@ -312,7 +312,7 @@ export class AttachmentManager {
       typeLabel.textContent = getFileTypeName(attachment.file.type, attachment.file.name);
       typeLabel.style.fontSize = "8px";
       typeLabel.style.fontWeight = "600";
-      typeLabel.style.color = "var(--cw-muted, #6b7280)";
+      typeLabel.style.color = "var(--persona-muted, #6b7280)";
       typeLabel.style.textTransform = "uppercase";
       typeLabel.style.lineHeight = "1";
       filePreview.appendChild(typeLabel);
@@ -323,7 +323,7 @@ export class AttachmentManager {
     // Create remove button
     const removeBtn = createElement(
       "button",
-      "tvw-attachment-remove tvw-absolute tvw-flex tvw-items-center tvw-justify-center"
+      "persona-attachment-remove persona-absolute persona-flex persona-items-center persona-justify-center"
     ) as HTMLButtonElement;
     removeBtn.type = "button";
     removeBtn.setAttribute("aria-label", "Remove attachment");
@@ -333,7 +333,7 @@ export class AttachmentManager {
     removeBtn.style.width = "18px";
     removeBtn.style.height = "18px";
     removeBtn.style.borderRadius = "50%";
-    removeBtn.style.backgroundColor = "rgba(0, 0, 0, 0.6)";
+    removeBtn.style.backgroundColor = "var(--persona-palette-colors-black-alpha-60, rgba(0, 0, 0, 0.6))";
     removeBtn.style.border = "none";
     removeBtn.style.cursor = "pointer";
     removeBtn.style.display = "flex";
@@ -342,12 +342,12 @@ export class AttachmentManager {
     removeBtn.style.padding = "0";
 
     // Add X icon
-    const xIcon = renderLucideIcon("x", 10, "#ffffff", 2);
+    const xIcon = renderLucideIcon("x", 10, "var(--persona-text-inverse, #ffffff)", 2);
     if (xIcon) {
       removeBtn.appendChild(xIcon);
     } else {
       removeBtn.textContent = "×";
-      removeBtn.style.color = "#ffffff";
+      removeBtn.style.color = "var(--persona-text-inverse, #ffffff)";
       removeBtn.style.fontSize = "14px";
       removeBtn.style.lineHeight = "1";
     }