@runtypelabs/persona 4.7.0 → 4.9.0

package/src/utils/mention-trigger.test.ts

@@ -0,0 +1,155 @@
+import { describe, it, expect } from "vitest";
+import {
+  parseMentionTrigger,
+  parseAnyTrigger,
+  isMenuOpeningInput,
+  stripMentionQuery,
+  MENTION_PLACEHOLDER,
+} from "./mention-trigger";
+
+describe("parseMentionTrigger", () => {
+  it("activates on @ at the start of input", () => {
+    const m = parseMentionTrigger("@App", 4);
+    expect(m).toEqual({ triggerIndex: 0, query: "App" });
+  });
+
+  it("activates on @ after whitespace mid-sentence", () => {
+    const m = parseMentionTrigger("check @fo", 9);
+    expect(m).toEqual({ triggerIndex: 6, query: "fo" });
+  });
+
+  it("returns an empty query right after a bare @", () => {
+    const m = parseMentionTrigger("hi @", 4);
+    expect(m).toEqual({ triggerIndex: 3, query: "" });
+  });
+
+  it("does NOT activate for an email (@ glued to a word char)", () => {
+    expect(parseMentionTrigger("user@example.com", 16)).toBeNull();
+    expect(parseMentionTrigger("user@", 5)).toBeNull();
+  });
+
+  it("closes once a space follows the trigger", () => {
+    // caret after "fo bar" — whitespace between query and caret ends the mention
+    expect(parseMentionTrigger("@fo bar", 7)).toBeNull();
+  });
+
+  it("tracks the nearest active trigger when caret is mid-query", () => {
+    const m = parseMentionTrigger("a @one @two", 11);
+    expect(m).toEqual({ triggerIndex: 7, query: "two" });
+  });
+
+  it("returns null at caret 0 or out of range", () => {
+    expect(parseMentionTrigger("@x", 0)).toBeNull();
+    expect(parseMentionTrigger("@x", 99)).toBeNull();
+  });
+
+  it("honors a custom trigger character", () => {
+    expect(parseMentionTrigger("see #iss", 8, "#")).toEqual({
+      triggerIndex: 4,
+      query: "iss",
+    });
+    expect(parseMentionTrigger("see #iss", 8, "@")).toBeNull();
+  });
+
+  it("handles multi-byte characters in the query", () => {
+    const m = parseMentionTrigger("@café", 5);
+    expect(m).toEqual({ triggerIndex: 0, query: "café" });
+  });
+
+  it("exports MENTION_PLACEHOLDER as the U+FFFC object-replacement char", () => {
+    expect(MENTION_PLACEHOLDER).toBe("");
+  });
+
+  it("treats U+FFFC (inline mention token placeholder) as a query terminator", () => {
+    // In inline-mode logical text an existing token is a single `` char. A new
+    // `@query` must not scan back THROUGH that token: "@ab" with caret after "b"
+    // has no active trigger (the `` ends the backscan like whitespace/newline).
+    expect(parseMentionTrigger(`@a${MENTION_PLACEHOLDER}b`, 4)).toBeNull();
+    // A fresh `@` typed AFTER a token still activates (scan stops at ``, not the @).
+    expect(parseMentionTrigger(" @fo", 5)).toEqual({
+      triggerIndex: 2,
+      query: "fo",
+    });
+  });
+
+  describe("position gating (for / slash-commands)", () => {
+    it("line-start: activates at input start and after a newline", () => {
+      expect(parseMentionTrigger("/dep", 4, "/", "line-start")).toEqual({
+        triggerIndex: 0,
+        query: "dep",
+      });
+      expect(parseMentionTrigger("hi\n/dep", 7, "/", "line-start")).toEqual({
+        triggerIndex: 3,
+        query: "dep",
+      });
+    });
+
+    it("line-start: does NOT activate mid-line (after a space)", () => {
+      expect(parseMentionTrigger("hi /dep", 7, "/", "line-start")).toBeNull();
+    });
+
+    it("input-start: only at index 0", () => {
+      expect(parseMentionTrigger("/x", 2, "/", "input-start")).toEqual({
+        triggerIndex: 0,
+        query: "x",
+      });
+      expect(parseMentionTrigger("hi\n/x", 5, "/", "input-start")).toBeNull();
+    });
+  });
+});
+
+describe("parseAnyTrigger", () => {
+  const channels = [
+    { trigger: "@", position: "anywhere" as const },
+    { trigger: "/", position: "line-start" as const },
+  ];
+
+  it("picks the @ channel for a mid-sentence mention", () => {
+    const hit = parseAnyTrigger("hey @fo", 7, channels);
+    expect(hit?.channel.trigger).toBe("@");
+    expect(hit?.match).toEqual({ triggerIndex: 4, query: "fo" });
+  });
+
+  it("picks the / channel only at line-start", () => {
+    const hit = parseAnyTrigger("/dep", 4, channels);
+    expect(hit?.channel.trigger).toBe("/");
+    expect(hit?.match).toEqual({ triggerIndex: 0, query: "dep" });
+  });
+
+  it("does not match / mid-line even though @ is anywhere", () => {
+    expect(parseAnyTrigger("hi /dep", 7, channels)).toBeNull();
+  });
+
+  it("returns null when no channel is active", () => {
+    expect(parseAnyTrigger("plain text", 10, channels)).toBeNull();
+  });
+});
+
+describe("isMenuOpeningInput", () => {
+  it("opens on typed text and unknown input types", () => {
+    expect(isMenuOpeningInput("insertText")).toBe(true);
+    expect(isMenuOpeningInput(undefined)).toBe(true);
+  });
+
+  it("does not open on paste or drop", () => {
+    expect(isMenuOpeningInput("insertFromPaste")).toBe(false);
+    expect(isMenuOpeningInput("insertFromDrop")).toBe(false);
+  });
+});
+
+describe("stripMentionQuery", () => {
+  it("removes the @query span and moves the caret to the trigger", () => {
+    const value = "check @App for bugs";
+    const match = parseMentionTrigger("check @App", 10)!;
+    // caret sits right after "@App" (index 10)
+    const out = stripMentionQuery(value, match, 10);
+    expect(out.value).toBe("check  for bugs");
+    expect(out.caret).toBe(6);
+  });
+
+  it("strips a bare trigger with empty query", () => {
+    const out = stripMentionQuery("hi @", { triggerIndex: 3, query: "" }, 4);
+    expect(out.value).toBe("hi ");
+    expect(out.caret).toBe(3);
+  });
+});

package/src/utils/mention-trigger.ts

@@ -0,0 +1,156 @@
+/**
+ * Pure `@`-trigger detection for the composer mention menu.
+ *
+ * No DOM, no contenteditable — a small function over `(value, caret)` mirroring
+ * the Slack/Discord approach. Shared by the core orchestrator's lightweight
+ * "should I open?" pre-check and the lazy-loaded controller's full parse, so the
+ * trigger rule lives in exactly one place.
+ */
+
+export type MentionTriggerMatch = {
+  /** Index of the trigger character in `value`. */
+  triggerIndex: number;
+  /** The text typed after the trigger, up to the caret (no leading trigger). */
+  query: string;
+};
+
+/**
+ * Where a trigger may open. `"anywhere"` is the `@` rule (after any whitespace/
+ * start); `"line-start"` and `"input-start"` are the natural rules for `/`
+ * slash-commands. Kept as a local string union so the parser stays free of the
+ * public config types.
+ */
+export type MentionTriggerPosition = "anywhere" | "line-start" | "input-start";
+
+/** One trigger channel for `parseAnyTrigger` — a char plus its position rule. */
+export type MentionTriggerSpec = {
+  trigger: string;
+  position?: MentionTriggerPosition;
+  /**
+   * Allow the query to span spaces/tabs (a newline still ends it). Needed for
+   * slash-command ARGS (`/deploy staging` → query `"deploy staging"`); leave
+   * false for single-token `@` mentions (a space ends the mention).
+   */
+  allowSpaces?: boolean;
+};
+
+const WHITESPACE = /\s/;
+
+/**
+ * OBJECT REPLACEMENT CHAR (U+FFFC) — one inline mention token in the composer's
+ * *logical* text (see `toLogicalText` in composer-document.ts). Defined HERE, in
+ * the dependency-free trigger module, and re-exported from composer-document.ts so
+ * the constant has a single source without dragging the document-model runtime
+ * into the chip chunk (which imports this module but not composer-document).
+ */
+export const MENTION_PLACEHOLDER = "";
+
+/** Does `triggerIndex` satisfy the channel's position rule? */
+function positionAllowed(
+  value: string,
+  triggerIndex: number,
+  position: MentionTriggerPosition
+): boolean {
+  if (position === "input-start") return triggerIndex === 0;
+  const before = triggerIndex > 0 ? value[triggerIndex - 1] : "";
+  if (position === "line-start") return before === "" || before === "\n";
+  // "anywhere": preceded by whitespace or start (also excludes `user@example.com`).
+  return before === "" || WHITESPACE.test(before);
+}
+
+/**
+ * Detect an active mention trigger ending at `caret`.
+ *
+ * Active when, scanning back from the caret, a trigger char is reached with no
+ * intervening whitespace AND the trigger satisfies `position`. Returns `null`
+ * otherwise — notably for `user@example.com` (trigger glued to a word char) and
+ * once a space follows the trigger.
+ *
+ * @param value       Full textarea value.
+ * @param caret       Caret offset (selectionStart). Out-of-range → `null`.
+ * @param trigger     Single trigger character. @default "@"
+ * @param position    Where the trigger may open. @default "anywhere"
+ * @param allowSpaces Let the query span spaces/tabs (for command args). @default false
+ */
+export function parseMentionTrigger(
+  value: string,
+  caret: number,
+  trigger = "@",
+  position: MentionTriggerPosition = "anywhere",
+  allowSpaces = false
+): MentionTriggerMatch | null {
+  if (!trigger) return null;
+  if (caret <= 0 || caret > value.length) return null;
+
+  let i = caret - 1;
+  while (i >= 0) {
+    const ch = value[i];
+    if (ch === trigger) {
+      if (positionAllowed(value, i, position)) {
+        return { triggerIndex: i, query: value.slice(i + 1, caret) };
+      }
+      // Trigger present but disallowed here (glued word char / not line-start).
+      return null;
+    }
+    // A newline always ends the query. Spaces/tabs end it too, unless the
+    // channel allows multi-word queries (slash-command args).
+    if (ch === "\n") return null;
+    // The mention-token placeholder always terminates the backscan so a query
+    // never spans an existing token (`@a<token>b` must not report a query through
+    // the token). Never appears in a plain textarea value, so chip mode is
+    // unaffected.
+    if (ch === MENTION_PLACEHOLDER) return null;
+    if (!allowSpaces && WHITESPACE.test(ch)) return null;
+    i--;
+  }
+  return null;
+}
+
+/**
+ * Resolve which of several trigger channels is active at `caret`. Channels are
+ * tested in order; the FIRST with an active match wins (put `@` first, `/`
+ * next). At any caret at most one channel can match — the scan stops at the
+ * nearest trigger/whitespace — so ordering only matters if two channels share a
+ * trigger char (don't do that). Returns the winning channel + its match.
+ */
+export function parseAnyTrigger<T extends MentionTriggerSpec>(
+  value: string,
+  caret: number,
+  channels: readonly T[]
+): { channel: T; match: MentionTriggerMatch } | null {
+  for (const channel of channels) {
+    const match = parseMentionTrigger(
+      value,
+      caret,
+      channel.trigger,
+      channel.position ?? "anywhere",
+      channel.allowSpaces ?? false
+    );
+    if (match) return { channel, match };
+  }
+  return null;
+}
+
+/**
+ * Whether a given `inputType` (from an `InputEvent`) is one that may OPEN the
+ * menu. Paste never opens it (`insertFromPaste`); only real typing does. The
+ * caller separately guards `event.isComposing` for IME safety.
+ */
+export function isMenuOpeningInput(inputType: string | undefined): boolean {
+  if (!inputType) return true; // older browsers omit inputType; treat as typing
+  return inputType !== "insertFromPaste" && inputType !== "insertFromDrop";
+}
+
+/**
+ * Remove the `@query` span (trigger char through the caret) from `value`,
+ * returning the new value + the caret position after removal. Used on select to
+ * strip the typed query while leaving the rest of the prose intact.
+ */
+export function stripMentionQuery(
+  value: string,
+  match: MentionTriggerMatch,
+  caret: number
+): { value: string; caret: number } {
+  const next = value.slice(0, match.triggerIndex) + value.slice(caret);
+  return { value: next, caret: match.triggerIndex };
+}

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);
+    },
+  };
+}

package/src/utils/spinner.ts

@@ -0,0 +1,45 @@
+import { cx } from "./dom";
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+/**
+ * Reusable icon spinner: a small SVG ring with a faint full track plus a
+ * rotating arc.
+ *
+ * Icon-first loading is the norm for preview surfaces (Sandpack, YouTube/Figma/
+ * CodePen embeds, ChatGPT/Claude/v0) and every major design system (Apple HIG,
+ * Material, Carbon, Polaris, Geist); text-only "Loading…" is used by none, and
+ * HIG explicitly warns against the vague word "loading". So the default preview
+ * indicator is this spinner, with any work-naming label added only later as an
+ * escalation. The arc spins via a GPU-friendly `transform: rotate` keyframe
+ * (see `.persona-spinner` in widget.css); under `prefers-reduced-motion` the
+ * rotation stops and the static arc still reads as a progress ring.
+ *
+ * Structure and animation live in CSS (class `persona-spinner`); geometry here
+ * is viewBox-relative so the rendered size follows `--persona-artifact-spinner-size`.
+ */
+export function createSpinner(className?: string): SVGSVGElement {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("class", cx("persona-spinner", className));
+  svg.setAttribute("viewBox", "0 0 24 24");
+  // Decorative: the loading state is announced by surrounding copy/labels, so
+  // the spinner itself must not add redundant noise to the accessibility tree.
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+
+  const track = document.createElementNS(SVG_NS, "circle");
+  track.setAttribute("class", "persona-spinner-track");
+  track.setAttribute("cx", "12");
+  track.setAttribute("cy", "12");
+  track.setAttribute("r", "9");
+
+  const arc = document.createElementNS(SVG_NS, "circle");
+  arc.setAttribute("class", "persona-spinner-arc");
+  arc.setAttribute("cx", "12");
+  arc.setAttribute("cy", "12");
+  arc.setAttribute("r", "9");
+
+  svg.appendChild(track);
+  svg.appendChild(arc);
+  return svg;
+}