+ );
+}
+
+interface ContextMenuProps {
+ x: number;
+ y: number;
+ hit: MenuHit;
+ onInsert: (importStmt: string) => void;
+ onClose: () => void;
+}
+
+// Small custom right-click menu: Copy import / Insert import. Rendered via a
+// portal straight onto — several ancestors (e.g. `.node-search`'s
+// fade-slide entrance animation) end their animation with a lingering
+// `transform`, which per spec establishes a new containing block for any
+// `position: fixed` descendant. Left in place, that made the menu position
+// itself relative to the sidebar instead of the viewport (appearing far from
+// the click) and clipped it under `.node-search`'s `overflow: hidden` and
+// the editor's stacking context (covered instead of on top). Portaling to
+// `document.body` sidesteps all of that: `position: fixed` is now always
+// viewport-relative, and a high z-index guarantees it paints above the
+// editor. Closes on outside pointerdown, Esc, or scroll (capture-phase
+// listeners so scrolling inside the results list — which doesn't bubble —
+// still closes it); these still work unchanged since `rootRef` points at the
+// real portaled DOM node regardless of where in the tree it renders.
+function ContextMenu({ x, y, hit, onInsert, onClose }: ContextMenuProps) {
+ const rootRef = useRef(null);
+
+ useEffect(() => {
+ function handlePointerDown(e: PointerEvent) {
+ if (rootRef.current && !rootRef.current.contains(e.target as Node)) onClose();
+ }
+ function handleKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") onClose();
+ }
+ function handleScroll() {
+ onClose();
+ }
+ document.addEventListener("pointerdown", handlePointerDown);
+ document.addEventListener("keydown", handleKeyDown);
+ window.addEventListener("scroll", handleScroll, true);
+ return () => {
+ document.removeEventListener("pointerdown", handlePointerDown);
+ document.removeEventListener("keydown", handleKeyDown);
+ window.removeEventListener("scroll", handleScroll, true);
+ };
+ }, [onClose]);
+
+ return createPortal(
+
+
+
+
,
+ document.body
+ );
+}
+
+const MENU_WIDTH = 160;
+const MENU_HEIGHT = 76;
+
+// Centered SVG chevron shared by both tree levels. Unlike the old text
+// glyphs ("▸"/"▾"), the triangle is geometrically centered in its box, so
+// the CSS 90° open-rotation spins in place instead of drifting (the glyph's
+// off-center metrics were visibly shifting the depth-1 caret mid-turn).
+function Chevron() {
+ return (
+
+
+
+ );
+}
+
+export default function NodeSearch({ catalog, onInsert, width }: Props) {
+ const [query, setQuery] = useState("");
+ const [expanded, setExpanded] = useState>(new Set());
+ const [menu, setMenu] = useState(null);
+
+ const hits = useMemo(
+ () => (catalog ? searchCatalog(catalog, query) : []),
+ [catalog, query]
+ );
+ const tree = useMemo(() => (catalog ? catalogTree(catalog) : []), [catalog]);
+
+ function toggle(key: string) {
+ setExpanded((prev) => {
+ const next = new Set(prev);
+ if (next.has(key)) next.delete(key);
+ else next.add(key);
+ return next;
+ });
+ }
+
+ // One menu instance at a time: keep it fully on-screen by clamping against
+ // the viewport rather than letting it render past the right/bottom edge.
+ function openMenu(x: number, y: number, hit: MenuHit) {
+ const clampedX = Math.min(x, window.innerWidth - MENU_WIDTH - 8);
+ const clampedY = Math.min(y, window.innerHeight - MENU_HEIGHT - 8);
+ setMenu({ x: Math.max(8, clampedX), y: Math.max(8, clampedY), hit });
+ }
+
+ // Flat search-result row (non-empty query).
+ function hitRow(hit: SearchHit) {
+ return (
+
+ );
+ }
+
+ const isBlank = !query.trim();
+
+ return (
+
+ {/* testid lives on the canvas (not the pane root) so e2e's
+ `preview svg` matches only rendered diagram SVGs — the ExportBar
+ docked below carries its own decorative icon
+ );
+}
diff --git a/playground/src/components/Toolbar.tsx b/playground/src/components/Toolbar.tsx
new file mode 100644
index 00000000..f29de8cb
--- /dev/null
+++ b/playground/src/components/Toolbar.tsx
@@ -0,0 +1,143 @@
+import { useEffect, useState } from "react";
+import { formatStars } from "../utils/format";
+import { toggleTheme } from "../utils/theme";
+
+interface Props {
+ status: string;
+ onShare: () => void;
+ shared: boolean;
+}
+
+function statusVariant(status: string): "ready" | "busy" | "error" {
+ if (status === "Ready") return "ready";
+ if (status.startsWith("Failed")) return "error";
+ return "busy";
+}
+
+const STARS_CACHE_KEY = "dgp-gh-stars";
+const STARS_TTL_MS = 60 * 60 * 1000; // 1h
+const STARS_API_URL = "https://api.github.com/repos/mingrammer/diagrams";
+// The badge must always render — when the API is unreachable (e.g. rate
+// limited) and no cache exists yet, fall back to this approximate count;
+// it self-corrects on the next successful fetch.
+const FALLBACK_STARS = 42_500;
+
+interface StarsCache {
+ count: number;
+ ts: number;
+}
+
+function readCachedStars(ignoreTtl = false): number | null {
+ try {
+ const raw = localStorage.getItem(STARS_CACHE_KEY);
+ if (!raw) return null;
+ const parsed = JSON.parse(raw) as StarsCache;
+ if (typeof parsed.count !== "number" || typeof parsed.ts !== "number") return null;
+ if (!ignoreTtl && Date.now() - parsed.ts > STARS_TTL_MS) return null;
+ return parsed.count;
+ } catch {
+ return null;
+ }
+}
+
+// GitHub's official octocat mark, inlined so it renders crisp at 16px with
+// no extra request and follows `currentColor` in both themes.
+function GitHubMark() {
+ return (
+
+ );
+}
+
+// Small filled star, used ahead of the formatted count.
+function StarMark() {
+ return (
+
+ );
+}
+
+export default function Toolbar({ status, onShare, shared }: Props) {
+ const isLoading = status === "Rendering…";
+ const variant = statusVariant(status);
+ // Stale-while-error: fresh cache → stale cache (expired TTL) → baked-in
+ // fallback, so the count is always visible; a successful fetch replaces it.
+ const [stars, setStars] = useState(
+ () => readCachedStars() ?? readCachedStars(true) ?? FALLBACK_STARS
+ );
+
+ useEffect(() => {
+ if (readCachedStars() !== null) return; // fresh cache already applied above
+ let cancelled = false;
+ fetch(STARS_API_URL)
+ .then((res) => {
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ return res.json();
+ })
+ .then((data: { stargazers_count?: unknown }) => {
+ if (cancelled) return;
+ const count = data.stargazers_count;
+ if (typeof count !== "number") return;
+ setStars(count);
+ localStorage.setItem(STARS_CACHE_KEY, JSON.stringify({ count, ts: Date.now() } satisfies StarsCache));
+ })
+ .catch(() => {
+ // Fetch failed (network, rate limit, bad shape): keep whatever count
+ // is already displayed — a fresh/stale cached value or the baked-in
+ // fallback — rather than surfacing an error.
+ });
+ return () => {
+ cancelled = true;
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+ {/* The real diagrams project logo (copied from assets/img/diagrams.png)
+ on a white chip so its dark strokes stay legible in dark theme. */}
+
+
+
+ Diagrams Playground
+
+