@runtypelabs/persona 3.7.0 → 3.8.1

package/src/utils/scroll-lock.test.ts

@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { acquireScrollLock } from "./scroll-lock";
+
+describe("acquireScrollLock", () => {
+  beforeEach(() => {
+    document.body.style.overflow = "";
+    document.body.style.position = "";
+    document.body.style.top = "";
+    document.body.style.width = "";
+  });
+
+  afterEach(() => {
+    document.body.style.overflow = "";
+    document.body.style.position = "";
+    document.body.style.top = "";
+    document.body.style.width = "";
+  });
+
+  it("sets overflow hidden and position fixed on body", () => {
+    const release = acquireScrollLock();
+    expect(document.body.style.overflow).toBe("hidden");
+    expect(document.body.style.position).toBe("fixed");
+    expect(document.body.style.width).toBe("100%");
+
+    release();
+    expect(document.body.style.overflow).toBe("");
+    expect(document.body.style.position).toBe("");
+    expect(document.body.style.width).toBe("");
+  });
+
+  it("is ref-counted: first release does not unlock when second acquire is active", () => {
+    const release1 = acquireScrollLock();
+    const release2 = acquireScrollLock();
+    expect(document.body.style.overflow).toBe("hidden");
+
+    release1();
+    expect(document.body.style.overflow).toBe("hidden");
+
+    release2();
+    expect(document.body.style.overflow).toBe("");
+  });
+
+  it("release is idempotent", () => {
+    const release = acquireScrollLock();
+    release();
+    release();
+    expect(document.body.style.overflow).toBe("");
+  });
+
+  it("restores original body styles on release", () => {
+    document.body.style.overflow = "scroll";
+    document.body.style.position = "relative";
+
+    const release = acquireScrollLock();
+    expect(document.body.style.overflow).toBe("hidden");
+    expect(document.body.style.position).toBe("fixed");
+
+    release();
+    expect(document.body.style.overflow).toBe("scroll");
+    expect(document.body.style.position).toBe("relative");
+  });
+});

package/src/utils/scroll-lock.ts

@@ -0,0 +1,62 @@
+interface ScrollLockState {
+  originalOverflow: string;
+  originalPosition: string;
+  originalTop: string;
+  originalWidth: string;
+  scrollY: number;
+}
+
+let lockCount = 0;
+let savedState: ScrollLockState | null = null;
+
+/**
+ * Acquire a document-level scroll lock. The page body becomes non-scrollable
+ * via `overflow: hidden` with an iOS-safe `position: fixed` pattern that
+ * preserves the visual scroll position.
+ *
+ * Ref-counted: multiple callers can acquire; the lock is only released when
+ * all callers have released. Each release call is idempotent.
+ *
+ * @returns A release function. Call it exactly once per acquisition.
+ */
+export function acquireScrollLock(doc: Document = document): () => void {
+  lockCount++;
+
+  if (lockCount === 1) {
+    const body = doc.body;
+    const win = doc.defaultView ?? window;
+    const scrollY = win.scrollY || doc.documentElement.scrollTop;
+
+    savedState = {
+      originalOverflow: body.style.overflow,
+      originalPosition: body.style.position,
+      originalTop: body.style.top,
+      originalWidth: body.style.width,
+      scrollY,
+    };
+
+    body.style.overflow = "hidden";
+    body.style.position = "fixed";
+    body.style.top = `-${scrollY}px`;
+    body.style.width = "100%";
+  }
+
+  let released = false;
+
+  return () => {
+    if (released) return;
+    released = true;
+    lockCount = Math.max(0, lockCount - 1);
+
+    if (lockCount === 0 && savedState) {
+      const body = doc.body;
+      const win = doc.defaultView ?? window;
+      body.style.overflow = savedState.originalOverflow;
+      body.style.position = savedState.originalPosition;
+      body.style.top = savedState.originalTop;
+      body.style.width = savedState.originalWidth;
+      win.scrollTo(0, savedState.scrollY);
+      savedState = null;
+    }
+  };
+}

package/src/utils/tokens.ts

@@ -312,6 +312,7 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
       border: 'palette.colors.gray.200',
       shadow: 'palette.shadows.sm',
     },
+    border: 'semantic.colors.border',
   },
   toolBubble: {
     shadow: 'palette.shadows.sm',
@@ -334,6 +335,28 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
     prose: {
       fontFamily: 'inherit',
     },
+    codeBlock: {
+      background: 'semantic.colors.container',
+      borderColor: 'semantic.colors.border',
+      textColor: 'inherit',
+    },
+    table: {
+      headerBackground: 'semantic.colors.container',
+      borderColor: 'semantic.colors.border',
+    },
+    hr: {
+      color: 'semantic.colors.divider',
+    },
+    blockquote: {
+      borderColor: 'palette.colors.gray.900',
+      background: 'transparent',
+      textColor: 'palette.colors.gray.500',
+    },
+  },
+  collapsibleWidget: {
+    container: 'palette.colors.gray.50',
+    surface: 'semantic.colors.surface',
+    border: 'semantic.colors.border',
   },
   voice: {
     recording: {
@@ -823,6 +846,46 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     cssVars['--persona-md-prose-font-family'] = mdProseFont;
   }
 
+  // Markdown code block
+  cssVars['--persona-md-code-block-bg'] =
+    cssVars['--persona-components-markdown-codeBlock-background'] ?? cssVars['--persona-container'];
+  cssVars['--persona-md-code-block-border-color'] =
+    cssVars['--persona-components-markdown-codeBlock-borderColor'] ?? cssVars['--persona-border'];
+  cssVars['--persona-md-code-block-text-color'] =
+    cssVars['--persona-components-markdown-codeBlock-textColor'] ?? 'inherit';
+
+  // Markdown table
+  cssVars['--persona-md-table-header-bg'] =
+    cssVars['--persona-components-markdown-table-headerBackground'] ?? cssVars['--persona-container'];
+  cssVars['--persona-md-table-border-color'] =
+    cssVars['--persona-components-markdown-table-borderColor'] ?? cssVars['--persona-border'];
+
+  // Markdown HR
+  cssVars['--persona-md-hr-color'] =
+    cssVars['--persona-components-markdown-hr-color'] ?? cssVars['--persona-divider'];
+
+  // Markdown blockquote
+  cssVars['--persona-md-blockquote-border-color'] =
+    cssVars['--persona-components-markdown-blockquote-borderColor'] ??
+    cssVars['--persona-palette-colors-gray-900'];
+  cssVars['--persona-md-blockquote-bg'] =
+    cssVars['--persona-components-markdown-blockquote-background'] ?? 'transparent';
+  cssVars['--persona-md-blockquote-text-color'] =
+    cssVars['--persona-components-markdown-blockquote-textColor'] ??
+    cssVars['--persona-palette-colors-gray-500'];
+
+  // Collapsible widget chrome (tool/reasoning/approval bubbles)
+  cssVars['--cw-container'] =
+    cssVars['--persona-components-collapsibleWidget-container'] ?? cssVars['--persona-surface'];
+  cssVars['--cw-surface'] =
+    cssVars['--persona-components-collapsibleWidget-surface'] ?? cssVars['--persona-surface'];
+  cssVars['--cw-border'] =
+    cssVars['--persona-components-collapsibleWidget-border'] ?? cssVars['--persona-border'];
+
+  // Message border
+  cssVars['--persona-message-border'] =
+    cssVars['--persona-components-message-border'] ?? cssVars['--persona-border'];
+
   // Icon button tokens
   const components = theme.components;
   const iconBtn = components?.iconButton;