@runtypelabs/persona 4.7.0 → 4.8.0

package/src/utils/code-highlight.ts

@@ -0,0 +1,400 @@
+/**
+ * Tiny hand-rolled syntax highlighter for the artifact source view.
+ *
+ * Zero dependencies by design: the IIFE bundle is built with `--splitting
+ * false`, so any highlight.js / prism / shiki style library would be inlined
+ * and inflate the critical bundle. This module is a small regex tokenizer
+ * (html / css / js|ts / json) plus a DOM builder that emits one
+ * `span.persona-code-line` per source line for the CSS-counter gutter.
+ *
+ * Safety by construction: the DOM is built ONLY with `createElement` +
+ * `textContent` + `createTextNode` — never `innerHTML` — so the output is safe
+ * regardless of the widget's `sanitize` config, even when the source itself is
+ * hostile markup (e.g. `<img src=x onerror=…>`).
+ *
+ * Verbatim-reconstruction invariant: the built fragment's `textContent` equals
+ * the original `source` exactly. Every source newline becomes a literal `"\n"`
+ * text node placed *between* line spans; token spans never contain a newline
+ * (multi-line tokens such as block comments and template literals are split at
+ * newline boundaries into per-line spans of the same class). A trailing source
+ * newline is preserved as a `"\n"` text node without a phantom numbered empty
+ * final line.
+ */
+import { createElement, createFragment } from "./dom";
+
+/** Token classification. `plain`/`punctuation` render as bare text (no span). */
+export type CodeTokenType =
+  | "keyword"
+  | "string"
+  | "comment"
+  | "number"
+  | "tag"
+  | "attr"
+  | "property"
+  | "punctuation"
+  | "plain";
+
+export interface CodeToken {
+  type: CodeTokenType;
+  value: string;
+}
+
+/** Canonical tokenizer keys. `ts`/`jsx`/`tsx` share the `js` tokenizer. */
+export type HighlightLanguage = "html" | "css" | "js" | "json";
+
+/** Token type → CSS class. Types absent here render as a bare text node. */
+const TOKEN_CLASS: Partial<Record<CodeTokenType, string>> = {
+  keyword: "persona-code-token-keyword",
+  string: "persona-code-token-string",
+  comment: "persona-code-token-comment",
+  number: "persona-code-token-number",
+  tag: "persona-code-token-tag",
+  attr: "persona-code-token-attr",
+  property: "persona-code-token-property",
+};
+
+/**
+ * Streaming perf guard: skip tokenization above this many characters and fall
+ * back to plain line-numbered text. `renderPre` runs on every streaming delta,
+ * so keep the tokenizer off huge sources.
+ */
+export const MAX_HIGHLIGHT_LENGTH = 150_000;
+
+/** Extension / short-name → canonical tokenizer key. */
+const LANGUAGE_ALIASES: Record<string, HighlightLanguage> = {
+  html: "html",
+  htm: "html",
+  xhtml: "html",
+  xml: "html",
+  svg: "html",
+  css: "css",
+  js: "js",
+  jsx: "js",
+  mjs: "js",
+  cjs: "js",
+  ts: "js",
+  tsx: "js",
+  mts: "js",
+  cts: "js",
+  javascript: "js",
+  typescript: "js",
+  ecmascript: "js",
+  json: "json",
+  jsonc: "json",
+  json5: "json",
+};
+
+/**
+ * Resolve a canonical tokenizer from an explicit language or a file path
+ * extension. Returns `null` for anything unmapped (plain-text fallback).
+ */
+export function resolveHighlightLanguage(
+  language?: string,
+  path?: string
+): HighlightLanguage | null {
+  const lang = (language || "").trim().toLowerCase();
+  if (lang && LANGUAGE_ALIASES[lang]) return LANGUAGE_ALIASES[lang];
+
+  if (path) {
+    const dot = path.lastIndexOf(".");
+    if (dot >= 0) {
+      const ext = path.slice(dot + 1).toLowerCase();
+      if (LANGUAGE_ALIASES[ext]) return LANGUAGE_ALIASES[ext];
+    }
+  }
+  return null;
+}
+
+interface Rule {
+  type: CodeTokenType;
+  /** Sticky (`y`) regex so a match only counts when it starts at `lastIndex`. */
+  re: RegExp;
+  /** Optional reclassifier (e.g. identifier → keyword when in a keyword set). */
+  map?: (text: string) => CodeTokenType;
+}
+
+/**
+ * Left-to-right rule scanner. At each index the first rule that matches at that
+ * exact position wins; unmatched characters accrete into a single `plain` run.
+ */
+function runRules(source: string, rules: Rule[]): CodeToken[] {
+  const tokens: CodeToken[] = [];
+  let i = 0;
+  let plainStart = 0;
+  const flushPlain = (end: number) => {
+    if (end > plainStart) {
+      tokens.push({ type: "plain", value: source.slice(plainStart, end) });
+    }
+  };
+
+  while (i < source.length) {
+    let matched = false;
+    for (const rule of rules) {
+      rule.re.lastIndex = i;
+      const m = rule.re.exec(source);
+      if (m && m.index === i && m[0].length > 0) {
+        flushPlain(i);
+        const type = rule.map ? rule.map(m[0]) : rule.type;
+        tokens.push({ type, value: m[0] });
+        i += m[0].length;
+        plainStart = i;
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) i += 1;
+  }
+  flushPlain(source.length);
+  return tokens;
+}
+
+const JS_KEYWORDS = new Set([
+  "abstract", "any", "as", "async", "await", "boolean", "break", "case",
+  "catch", "class", "const", "continue", "debugger", "declare", "default",
+  "delete", "do", "else", "enum", "export", "extends", "false", "finally",
+  "for", "from", "function", "get", "if", "implements", "import", "in",
+  "instanceof", "interface", "keyof", "let", "namespace", "never", "new",
+  "null", "number", "object", "of", "private", "protected", "public",
+  "readonly", "return", "satisfies", "set", "static", "string", "super",
+  "switch", "symbol", "this", "throw", "true", "try", "type", "typeof",
+  "undefined", "unknown", "var", "void", "while", "yield",
+]);
+
+const JS_RULES: Rule[] = [
+  { type: "comment", re: /\/\/[^\n]*/y },
+  { type: "comment", re: /\/\*[\s\S]*?\*\//y },
+  { type: "string", re: /`(?:\\[\s\S]|[^\\`])*`/y },
+  { type: "string", re: /"(?:\\.|[^"\\\n])*"/y },
+  { type: "string", re: /'(?:\\.|[^'\\\n])*'/y },
+  {
+    type: "number",
+    re: /0[xX][0-9a-fA-F]+|(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/y,
+  },
+  {
+    type: "plain",
+    re: /[A-Za-z_$][\w$]*/y,
+    map: (t) => (JS_KEYWORDS.has(t) ? "keyword" : "plain"),
+  },
+];
+
+function tokenizeJs(source: string): CodeToken[] {
+  return runRules(source, JS_RULES);
+}
+
+const JSON_RULES: Rule[] = [
+  { type: "string", re: /"(?:\\.|[^"\\])*"/y },
+  { type: "number", re: /-?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/y },
+  {
+    type: "plain",
+    re: /[A-Za-z_]\w*/y,
+    map: (t) =>
+      t === "true" || t === "false" || t === "null" ? "keyword" : "plain",
+  },
+];
+
+function tokenizeJson(source: string): CodeToken[] {
+  const tokens = runRules(source, JSON_RULES);
+  // Reclassify object keys: a string whose next significant token opens with
+  // `:` is a property, not a value string.
+  for (let idx = 0; idx < tokens.length; idx += 1) {
+    if (tokens[idx].type !== "string") continue;
+    let j = idx + 1;
+    while (j < tokens.length && tokens[j].value.trim() === "") j += 1;
+    const next = tokens[j];
+    if (next && next.value.replace(/^\s*/, "").startsWith(":")) {
+      tokens[idx].type = "property";
+    }
+  }
+  return tokens;
+}
+
+const CSS_RULES: Rule[] = [
+  { type: "comment", re: /\/\*[\s\S]*?\*\//y },
+  { type: "string", re: /"(?:\\.|[^"\\\n])*"/y },
+  { type: "string", re: /'(?:\\.|[^'\\\n])*'/y },
+  { type: "keyword", re: /@[A-Za-z-]+/y },
+  { type: "number", re: /#[0-9a-fA-F]{3,8}\b/y },
+  { type: "number", re: /-?(?:\d+\.?\d*|\.\d+)(?:[a-z%]+)?/y },
+  { type: "plain", re: /[A-Za-z_-][\w-]*/y },
+];
+
+function tokenizeCss(source: string): CodeToken[] {
+  const tokens = runRules(source, CSS_RULES);
+  // Property detection: an identifier immediately followed by `:` counts as a
+  // declaration property only when the previous significant character opens a
+  // declaration (`{`, `}`, `;`, `,`, or start of input). This keeps selectors
+  // and pseudo-classes (`a:hover`) plain in the common cases.
+  let lastSignificant = "";
+  for (let idx = 0; idx < tokens.length; idx += 1) {
+    const tok = tokens[idx];
+    if (tok.type === "plain" && /^[A-Za-z_-][\w-]*$/.test(tok.value)) {
+      let j = idx + 1;
+      while (j < tokens.length && tokens[j].value.trim() === "") j += 1;
+      const next = tokens[j];
+      if (
+        next &&
+        next.value.replace(/^\s*/, "").startsWith(":") &&
+        (lastSignificant === "" ||
+          lastSignificant === "{" ||
+          lastSignificant === "}" ||
+          lastSignificant === ";" ||
+          lastSignificant === ",")
+      ) {
+        tok.type = "property";
+      }
+    }
+    const trimmed = tok.value.replace(/\s+$/, "");
+    if (trimmed) lastSignificant = trimmed[trimmed.length - 1];
+  }
+  return tokens;
+}
+
+const HTML_TAG_RULES: Rule[] = [
+  { type: "tag", re: /<\/?\s*[A-Za-z][\w:-]*/y },
+  { type: "string", re: /"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'/y },
+  { type: "attr", re: /[A-Za-z_:@][\w:.-]*(?=\s*=)/y },
+  { type: "attr", re: /[A-Za-z_:@][\w:.-]*/y },
+  { type: "tag", re: /\/?>/y },
+];
+
+function tokenizeHtml(source: string): CodeToken[] {
+  const tokens: CodeToken[] = [];
+  const push = (type: CodeTokenType, value: string) => {
+    if (value) tokens.push({ type, value });
+  };
+  const n = source.length;
+  let i = 0;
+
+  while (i < n) {
+    // Comments.
+    if (source.startsWith("<!--", i)) {
+      const end = source.indexOf("-->", i + 4);
+      const stop = end === -1 ? n : end + 3;
+      push("comment", source.slice(i, stop));
+      i = stop;
+      continue;
+    }
+    // Doctype (and other `<!…>` declarations).
+    if (source[i] === "<" && source[i + 1] === "!") {
+      const end = source.indexOf(">", i);
+      const stop = end === -1 ? n : end + 1;
+      push("tag", source.slice(i, stop));
+      i = stop;
+      continue;
+    }
+    // Element tag.
+    if (source[i] === "<" && /[A-Za-z/]/.test(source[i + 1] || "")) {
+      const tagEnd = source.indexOf(">", i);
+      const stop = tagEnd === -1 ? n : tagEnd + 1;
+      const tagText = source.slice(i, stop);
+      for (const t of runRules(tagText, HTML_TAG_RULES)) tokens.push(t);
+      i = stop;
+
+      // Embedded <script>/<style> bodies: tokenize with the js/css tokenizer.
+      const embed = /^<\s*(script|style)\b/i.exec(tagText);
+      if (embed && !/\/>\s*$/.test(tagText)) {
+        const tag = embed[1].toLowerCase();
+        const closeRe = new RegExp("</\\s*" + tag + "\\s*>", "i");
+        const cm = closeRe.exec(source.slice(i));
+        const innerEnd = cm ? i + cm.index : n;
+        const inner = source.slice(i, innerEnd);
+        const innerTokens =
+          tag === "script" ? tokenizeJs(inner) : tokenizeCss(inner);
+        for (const t of innerTokens) tokens.push(t);
+        i = innerEnd;
+      }
+      continue;
+    }
+    // Text content up to the next `<` (or a lone `<` that is not a tag).
+    const lt = source.indexOf("<", i);
+    if (lt === i) {
+      push("plain", source[i]);
+      i += 1;
+    } else {
+      const stop = lt === -1 ? n : lt;
+      push("plain", source.slice(i, stop));
+      i = stop;
+    }
+  }
+  return tokens;
+}
+
+function tokenizeByLanguage(
+  source: string,
+  lang: HighlightLanguage
+): CodeToken[] {
+  switch (lang) {
+    case "html":
+      return tokenizeHtml(source);
+    case "css":
+      return tokenizeCss(source);
+    case "js":
+      return tokenizeJs(source);
+    case "json":
+      return tokenizeJson(source);
+  }
+}
+
+/** Build one `span.persona-code-line` per source line from a token stream. */
+function buildLines(tokens: CodeToken[]): DocumentFragment {
+  const frag = createFragment();
+  let line = createElement("span", "persona-code-line");
+
+  const appendSegment = (type: CodeTokenType, text: string) => {
+    if (!text) return;
+    const cls = TOKEN_CLASS[type];
+    if (cls) {
+      const span = createElement("span", cls);
+      span.textContent = text;
+      line.appendChild(span);
+    } else {
+      line.appendChild(document.createTextNode(text));
+    }
+  };
+
+  for (const tok of tokens) {
+    const parts = tok.value.split("\n");
+    for (let p = 0; p < parts.length; p += 1) {
+      if (p > 0) {
+        // Close the current line, then emit the literal newline separator that
+        // keeps `textContent` verbatim. `.persona-code` sets white-space:normal
+        // so this whitespace-only node collapses visually between block lines.
+        frag.appendChild(line);
+        frag.appendChild(document.createTextNode("\n"));
+        line = createElement("span", "persona-code-line");
+      }
+      appendSegment(tok.type, parts[p]);
+    }
+  }
+
+  if (line.childNodes.length > 0) {
+    frag.appendChild(line);
+  } else if (!frag.lastChild) {
+    // Wholly empty source: keep the single empty line so the gutter shows "1".
+    frag.appendChild(line);
+  }
+  // Otherwise the source ended with a newline: the trailing "\n" separator is
+  // already in the fragment, so drop the empty phantom final line + number.
+  return frag;
+}
+
+/**
+ * Tokenize `source` and return a DocumentFragment of line spans (+ newline
+ * separator text nodes). Prefers the explicit `language`, then the `path`
+ * extension, else plain text. Sources longer than {@link MAX_HIGHLIGHT_LENGTH}
+ * are returned as plain line-numbered text (still gutter-numbered, no colors).
+ */
+export function highlightCode(
+  source: string,
+  language?: string,
+  path?: string
+): DocumentFragment {
+  const lang =
+    source.length <= MAX_HIGHLIGHT_LENGTH
+      ? resolveHighlightLanguage(language, path)
+      : null;
+  const tokens: CodeToken[] = lang
+    ? tokenizeByLanguage(source, lang)
+    : [{ type: "plain", value: source }];
+  return buildLines(tokens);
+}

package/src/utils/icons.ts

@@ -13,6 +13,7 @@ import {
   Check,
   Clipboard,
   ClipboardCopy,
+  CodeXml,
   Copy,
   File as FileIcon,
   FileCode,
@@ -162,6 +163,7 @@ const LUCIDE_ICONS = {
   "check": Check,
   "clipboard": Clipboard,
   "clipboard-copy": ClipboardCopy,
+  "code-xml": CodeXml,
   "copy": Copy,
   "file": FileIcon,
   "file-code": FileCode,

package/src/utils/roving-tablist.test.ts

@@ -0,0 +1,152 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it } from "vitest";
+
+import { createRovingTablist } from "./roving-tablist";
+
+const makeTabs = (container: HTMLElement, count: number): HTMLElement[] => {
+  const tabs: HTMLElement[] = [];
+  for (let i = 0; i < count; i += 1) {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.textContent = `tab-${i}`;
+    container.appendChild(b);
+    tabs.push(b);
+  }
+  return tabs;
+};
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("createRovingTablist", () => {
+  it("applies role=tablist/tab, aria-selected, and a single roving tabindex", () => {
+    const container = document.createElement("div");
+    const tabs = makeTabs(container, 3);
+    const controller = createRovingTablist(container, { onSelect: () => {} });
+    controller.render(tabs, 1);
+
+    expect(container.getAttribute("role")).toBe("tablist");
+    expect(tabs.every((t) => t.getAttribute("role") === "tab")).toBe(true);
+    expect(tabs.map((t) => t.getAttribute("aria-selected"))).toEqual([
+      "false",
+      "true",
+      "false",
+    ]);
+    // Only the selected tab is the tab stop.
+    expect(tabs.filter((t) => t.tabIndex === 0).length).toBe(1);
+    expect(tabs[1].tabIndex).toBe(0);
+    expect(tabs[0].tabIndex).toBe(-1);
+    expect(tabs[2].tabIndex).toBe(-1);
+  });
+
+  it("makes the first tab the stop when nothing is selected", () => {
+    const container = document.createElement("div");
+    const tabs = makeTabs(container, 3);
+    const controller = createRovingTablist(container, { onSelect: () => {} });
+    controller.render(tabs, -1);
+    expect(tabs[0].tabIndex).toBe(0);
+    expect(tabs[1].tabIndex).toBe(-1);
+    expect(tabs[2].tabIndex).toBe(-1);
+  });
+
+  it("moves selection with Arrow/Home/End (clamped) via onSelect", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const tabs = makeTabs(container, 3);
+    const picks: number[] = [];
+    const controller = createRovingTablist(container, {
+      onSelect: (i) => picks.push(i),
+    });
+    controller.render(tabs, 0);
+
+    tabs[0].dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    expect(picks[picks.length - 1]).toBe(1);
+
+    // Clamp at the start: ArrowLeft from index 0 stays put (no onSelect).
+    const before = picks.length;
+    tabs[0].dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+    expect(picks.length).toBe(before);
+
+    tabs[2].dispatchEvent(new KeyboardEvent("keydown", { key: "Home", bubbles: true }));
+    expect(picks[picks.length - 1]).toBe(0);
+
+    tabs[0].dispatchEvent(new KeyboardEvent("keydown", { key: "End", bubbles: true }));
+    expect(picks[picks.length - 1]).toBe(2);
+  });
+
+  it("uses Up/Down for vertical orientation", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const tabs = makeTabs(container, 3);
+    const picks: number[] = [];
+    const controller = createRovingTablist(container, {
+      onSelect: (i) => picks.push(i),
+      orientation: "vertical",
+    });
+    controller.render(tabs, 1);
+
+    tabs[1].dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    expect(picks[picks.length - 1]).toBe(2);
+    tabs[2].dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowUp", bubbles: true }));
+    expect(picks[picks.length - 1]).toBe(1);
+    // Horizontal keys are ignored in vertical mode.
+    const before = picks.length;
+    tabs[1].dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    expect(picks.length).toBe(before);
+  });
+
+  it("restores focus to the selected tab across a rebuild", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const controller = createRovingTablist(container, { onSelect: () => {} });
+
+    const first = makeTabs(container, 3);
+    controller.render(first, 0);
+    first[0].focus();
+    expect(document.activeElement).toBe(first[0]);
+
+    // Rebuild: capture focus, swap the tab DOM, re-render selecting index 1.
+    controller.beforeRender();
+    container.replaceChildren();
+    const next = makeTabs(container, 3);
+    controller.render(next, 1);
+
+    expect(document.activeElement).toBe(next[1]);
+  });
+
+  it("does not restore focus when beforeRender saw no focus inside the strip", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const controller = createRovingTablist(container, { onSelect: () => {} });
+
+    const first = makeTabs(container, 2);
+    controller.render(first, 0);
+    // Focus lives outside the strip.
+    const outside = document.createElement("button");
+    document.body.appendChild(outside);
+    outside.focus();
+
+    controller.beforeRender();
+    container.replaceChildren();
+    const next = makeTabs(container, 2);
+    controller.render(next, 1);
+
+    expect(document.activeElement).toBe(outside);
+  });
+
+  it("stops routing keys after destroy", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const tabs = makeTabs(container, 2);
+    const picks: number[] = [];
+    const controller = createRovingTablist(container, {
+      onSelect: (i) => picks.push(i),
+    });
+    controller.render(tabs, 0);
+    controller.destroy();
+    tabs[0].dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    expect(picks.length).toBe(0);
+  });
+});

package/src/utils/roving-tablist.ts

@@ -0,0 +1,111 @@
+/**
+ * Roving-tabindex tablist controller (WAI-ARIA APG tabs pattern). Owns the tab
+ * roles, aria-selected, roving tabindex, Arrow/Home/End keyboard nav routed
+ * through an onSelect callback, focus reveal via scrollIntoView, and focus
+ * survival across a tab-DOM rebuild. Extracted so custom tab bars stay
+ * accessible without re-implementing the pattern.
+ */
+
+export interface RovingTablistOptions {
+  onSelect: (index: number) => void;
+  /** Arrow-key axis. @default "horizontal" */
+  orientation?: "horizontal" | "vertical";
+}
+
+export interface RovingTablistController {
+  /** Snapshot whether focus is inside the strip. Call before replacing tab DOM. */
+  beforeRender(): void;
+  /**
+   * Apply role=tablist/tab, aria-selected, roving tabindex, and keyboard nav to
+   * the given tab elements (in order). Restores focus to the selected tab when
+   * the last beforeRender() saw focus inside the strip. Call after (re)building
+   * tabs.
+   */
+  render(tabs: HTMLElement[], selectedIndex: number): void;
+  destroy(): void;
+}
+
+export function createRovingTablist(
+  container: HTMLElement,
+  options: RovingTablistOptions
+): RovingTablistController {
+  const orientation = options.orientation ?? "horizontal";
+  const prevKey = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+  const nextKey = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+  container.setAttribute("role", "tablist");
+
+  let tabs: HTMLElement[] = [];
+  // Whether the last beforeRender() saw focus inside the strip; consumed by the
+  // next render() to restore the roving stop after a rebuild.
+  let restoreFocus = false;
+
+  const revealTab = (tab: HTMLElement) => {
+    if (typeof tab.scrollIntoView === "function") {
+      tab.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+  };
+
+  const indexOfTarget = (target: EventTarget | null): number => {
+    const node = target as HTMLElement | null;
+    return tabs.findIndex((t) => t === node || t.contains(node));
+  };
+
+  // One delegated keydown listener so it survives child replacement. Arrow moves
+  // selection one step (clamped); Home/End jump to the edges; selection routes
+  // through onSelect so the host owns state.
+  const onKeydown = (e: KeyboardEvent) => {
+    const index = indexOfTarget(e.target);
+    if (index < 0) return;
+    let next = index;
+    if (e.key === nextKey) next = Math.min(index + 1, tabs.length - 1);
+    else if (e.key === prevKey) next = Math.max(index - 1, 0);
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = tabs.length - 1;
+    else return;
+    e.preventDefault();
+    if (next === index) return;
+    options.onSelect(next);
+  };
+
+  // Delegated focus reveal: bring a focused edge tab out from under the fade.
+  const onFocusin = (e: FocusEvent) => {
+    const index = indexOfTarget(e.target);
+    if (index >= 0) revealTab(tabs[index]);
+  };
+
+  container.addEventListener("keydown", onKeydown);
+  container.addEventListener("focusin", onFocusin);
+
+  return {
+    beforeRender() {
+      restoreFocus =
+        typeof document !== "undefined" &&
+        container.contains(document.activeElement);
+    },
+    render(nextTabs: HTMLElement[], selectedIndex: number) {
+      tabs = nextTabs;
+      nextTabs.forEach((tab, i) => {
+        tab.setAttribute("role", "tab");
+        const selected = i === selectedIndex;
+        tab.setAttribute("aria-selected", selected ? "true" : "false");
+        // Roving tabindex: the selected tab is the only stop, or the first tab
+        // when nothing is selected.
+        tab.tabIndex = selected || (selectedIndex < 0 && i === 0) ? 0 : -1;
+      });
+      // Restore focus to the roving stop after the rebuild so arrow nav keeps
+      // working across the selection re-render.
+      if (restoreFocus) {
+        const stop =
+          (selectedIndex >= 0 ? nextTabs[selectedIndex] : undefined) ?? nextTabs[0];
+        if (stop && typeof stop.focus === "function") {
+          revealTab(stop);
+          stop.focus();
+        }
+      }
+    },
+    destroy() {
+      container.removeEventListener("keydown", onKeydown);
+      container.removeEventListener("focusin", onFocusin);
+    },
+  };
+}