zidane-ui 0.0.0-stage → 9.0.2

package/dist/code/editor/FileView.js

@@ -0,0 +1,331 @@
+import { useEditorEnvironment } from "./environment.js";
+import { DIFFS_HOST_STYLE, DIFFS_UNSAFE_CSS, PREFERRED_HIGHLIGHTER, VIRTUALIZER_CONFIG } from "./pierre-theme.js";
+import { revealOnHighlight } from "./reveal.js";
+import { scrollReachOnRender } from "./scroll-reach.js";
+import { useDetachCleanup } from "./useDetachCleanup.js";
+import { lineRange, offsetIn, wordAt } from "./word-at.js";
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo, useRef } from "react";
+import { DEFAULT_TOKENIZE_MAX_LENGTH, getFiletypeFromFileName } from "@pierre/diffs";
+import { EditProvider, File, Virtualizer } from "@pierre/diffs/react";
+import { Editor } from "@pierre/diffs/edit";
+//#region src/code/editor/FileView.tsx
+/**
+* A file's text shown with @pierre/diffs `File` in the kit's tokens:
+* read-only, or editable with `edit` (pierre's editor). `CodeEditor`
+* renders it for every editor surface.
+*/
+/**
+* A file's text with syntax colors, line selection, token hovers and annotations; editable when `edit` is set.
+*
+* @param props - See {@link FileViewProps}.
+*/
+function FileViewInner({ name, contents, wrap = false, hideHeader = false, selectedLines, onSelectionEnd, onGutterAction, onContextMenu, edit, tabSize, onTokenEnter, onTokenLeave, onTokenClick, onHighlighted, annotations, renderAnnotation, className, virtualize }) {
+	const { shikiTheme: theme, appearance } = useEditorEnvironment();
+	const selectable = onSelectionEnd !== void 0;
+	const host = useDetachCleanup();
+	const latest = useRef({
+		onSelectionEnd,
+		onGutterAction,
+		onTokenEnter,
+		onTokenLeave,
+		onTokenClick,
+		onHighlighted,
+		renderAnnotation,
+		edit,
+		wrap
+	});
+	latest.current = {
+		onSelectionEnd,
+		onGutterAction,
+		onTokenEnter,
+		onTokenLeave,
+		onTokenClick,
+		onHighlighted,
+		renderAnnotation,
+		edit,
+		wrap
+	};
+	const highlightedOnce = useRef(false);
+	const words = useMemo(() => wordHover({
+		enter: (t, e) => latest.current.onTokenEnter?.(t, e),
+		leave: () => latest.current.onTokenLeave?.()
+	}), []);
+	const stable = useMemo(() => ({
+		onLineSelectionEnd: (r) => latest.current.onSelectionEnd?.(r),
+		onGutterUtilityClick: (r) => latest.current.onGutterAction?.(r),
+		onTokenEnter: (t, e) => words.enter(t, e),
+		onTokenLeave: () => words.leave(),
+		onTokenClick: (t, e) => {
+			const token = words.token(t, e.clientX, e.clientY);
+			if (token) latest.current.onTokenClick?.(token, e);
+		},
+		renderAnnotation: (a) => latest.current.renderAnnotation?.(a) ?? null,
+		onEditChange: (e) => latest.current.edit?.onChange(e.file.contents, e.changes.map((c) => ({
+			range: c.range,
+			text: c.text
+		}))),
+		onEditComplete: (e) => latest.current.edit?.onComplete?.(e) ?? "reject",
+		onPostRender: (node, instance, phase) => {
+			const highlighted = phase !== "unmount" && isHighlighted(instance, node);
+			revealOnHighlight(node, highlighted, phase, phase !== "unmount" && colorsFile(instance));
+			scrollReachOnRender(node, !latest.current.wrap, phase);
+			if (phase === "unmount" || highlightedOnce.current || !latest.current.onHighlighted) return;
+			if (highlighted) {
+				highlightedOnce.current = true;
+				latest.current.onHighlighted();
+			}
+		}
+	}), [words]);
+	const hasTokenHandlers = onTokenEnter !== void 0;
+	const hasTokenClick = onTokenClick !== void 0;
+	const hasGutter = onGutterAction !== void 0;
+	const options = useMemo(() => ({
+		theme,
+		themeType: appearance,
+		overflow: wrap ? "wrap" : "scroll",
+		disableFileHeader: hideHeader,
+		stickyHeader: !hideHeader,
+		unsafeCSS: DIFFS_UNSAFE_CSS,
+		preferredHighlighter: PREFERRED_HIGHLIGHTER,
+		onPostRender: stable.onPostRender,
+		...selectable ? {
+			enableLineSelection: true,
+			onLineSelectionEnd: stable.onLineSelectionEnd
+		} : {},
+		...hasGutter ? {
+			enableGutterUtility: true,
+			onGutterUtilityClick: stable.onGutterUtilityClick
+		} : {},
+		...hasTokenHandlers ? {
+			onTokenEnter: stable.onTokenEnter,
+			onTokenLeave: stable.onTokenLeave
+		} : {},
+		...hasTokenClick ? { onTokenClick: stable.onTokenClick } : {}
+	}), [
+		theme,
+		appearance,
+		wrap,
+		hideHeader,
+		selectable,
+		hasGutter,
+		hasTokenHandlers,
+		hasTokenClick,
+		stable
+	]);
+	const file = useMemo(() => ({
+		name,
+		contents,
+		cacheKey: `${name}\0${contentHash(contents)}`
+	}), [name, contents]);
+	const lineAnnotations = useMemo(() => annotations ? [...annotations] : void 0, [annotations]);
+	const style = useMemo(() => tabSize ? {
+		...DIFFS_HOST_STYLE,
+		tabSize
+	} : DIFFS_HOST_STYLE, [tabSize]);
+	const view = /* @__PURE__ */ jsx(EditProvider, {
+		createEditor,
+		children: /* @__PURE__ */ jsx(File, {
+			file,
+			className,
+			style,
+			...edit ? {
+				edit: true,
+				editorOptions: edit.options,
+				editStateKey: edit.stateKey,
+				onEditChange: stable.onEditChange,
+				onEditComplete: stable.onEditComplete
+			} : {},
+			...selectable ? { selectedLines: selectedLines ?? null } : {},
+			...lineAnnotations ? { lineAnnotations } : {},
+			...renderAnnotation ? { renderAnnotation: stable.renderAnnotation } : {},
+			options
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: host,
+		className: "contents",
+		onContextMenu,
+		children: virtualize ? /* @__PURE__ */ jsx(Virtualizer, {
+			className: virtualize.className,
+			contentClassName: "min-h-full",
+			config: VIRTUALIZER_CONFIG,
+			children: view
+		}) : view
+	});
+}
+/** Name of the CSS custom highlight carrying the link underline (styled in `DIFFS_UNSAFE_CSS`). */
+const LINK_HIGHLIGHT = "zg-link";
+/**
+* Underline a range through the CSS Custom Highlight API: no DOM mutation,
+* so pierre's render cache and the editor's caret never see it. One
+* highlight at a time.
+*/
+function setLinkHighlight(range) {
+	const registry = CSS.highlights;
+	if (!registry) return;
+	if (!range) {
+		registry.delete(LINK_HIGHLIGHT);
+		return;
+	}
+	const Highlight = globalThis.Highlight;
+	if (!Highlight) return;
+	registry.set(LINK_HIGHLIGHT, new Highlight(range));
+}
+function wordRange(element, word) {
+	const node = element.firstChild;
+	if (!node || node.nodeType !== Node.TEXT_NODE) return null;
+	const range = document.createRange();
+	range.setStart(node, word.start);
+	range.setEnd(node, Math.min(word.end, node.textContent?.length ?? word.end));
+	return range;
+}
+/**
+* Turns pierre's span-level hover into symbol-level hover. Pierre fires
+* `onTokenEnter` once per span and stays silent while the pointer moves
+* inside it; this tracks `pointermove` on the span and re-emits enter /
+* leave when the identifier under the pointer changes. A drawn link is one
+* symbol until removed, whatever it covers (`'zidane-playground'`: quotes,
+* dash and both words), across spans too: moving inside it emits nothing,
+* and a click anywhere in it resolves to it.
+*/
+function wordHover(handlers) {
+	/** The span the pointer is in, and the character of it the pointer is on. */
+	let span = null;
+	let pointer = null;
+	/** What the pointer is on: an identifier (`line:start`), the link (`link`), or nothing. */
+	let current = null;
+	/** The drawn link, as 0-based offsets on its line. */
+	let link = null;
+	/** Pierre reported leaving the span while on the link: held until the next enter shows where the pointer went. */
+	let leaving = false;
+	const inLink = (t, offset) => {
+		const at = t.lineCharStart + offset;
+		return link !== null && link.line === t.lineNumber && at >= link.start && at < link.end;
+	};
+	const keyAt = (t, offset) => {
+		if (inLink(t, offset)) return "link";
+		const word = wordAt(t.tokenText, offset);
+		return word ? `${t.lineNumber}:${t.lineCharStart + word.start}` : null;
+	};
+	const draw = (t, word, columns) => {
+		const exact = columns ? lineRange(t.tokenElement, columns.column - 1, columns.endColumn - 1) : null;
+		const range = exact ?? wordRange(t.tokenElement, word);
+		if (!range) return;
+		link = exact ? {
+			line: t.lineNumber,
+			start: columns.column - 1,
+			end: columns.endColumn - 1
+		} : {
+			line: t.lineNumber,
+			start: t.lineCharStart + word.start,
+			end: t.lineCharStart + word.end
+		};
+		setLinkHighlight(range);
+		if (pointer && inLink(pointer.token, pointer.offset)) current = "link";
+	};
+	const erase = () => {
+		setLinkHighlight(null);
+		link = null;
+		if (current === "link") current = null;
+	};
+	const tokenAt = (t, offset) => {
+		const word = inLink(t, offset) ? spanWord(t.tokenText, link.start - t.lineCharStart, link.end - t.lineCharStart) : wordAt(t.tokenText, offset);
+		if (!word) return null;
+		return {
+			lineNumber: t.lineNumber,
+			lineCharStart: t.lineCharStart,
+			text: t.tokenText,
+			element: t.tokenElement,
+			word,
+			column: t.lineCharStart + offset + 1,
+			link: (on, columns) => on ? draw(t, word, columns) : erase()
+		};
+	};
+	const resolve = (t, clientX, clientY) => tokenAt(t, offsetIn(t.tokenElement, clientX, clientY));
+	const onMove = (e) => {
+		if (!span) return;
+		const offset = offsetIn(span.tokenElement, e.clientX, e.clientY);
+		pointer = {
+			token: span,
+			offset
+		};
+		if (keyAt(span, offset) === current) return;
+		if (current) handlers.leave();
+		current = keyAt(span, offset);
+		const token = current ? tokenAt(span, offset) : null;
+		if (token) handlers.enter(token, e);
+	};
+	const track = (t) => {
+		span?.tokenElement.removeEventListener("pointermove", onMove);
+		span = t;
+		t?.tokenElement.addEventListener("pointermove", onMove);
+	};
+	const leave = () => {
+		leaving = false;
+		pointer = null;
+		if (current) handlers.leave();
+		current = null;
+	};
+	return {
+		enter(t, e) {
+			track(t);
+			if (leaving && !inLink(t, offsetIn(t.tokenElement, e.clientX, e.clientY))) leave();
+			leaving = false;
+			onMove(e);
+		},
+		leave() {
+			track(null);
+			if (current !== "link") return leave();
+			leaving = true;
+			queueMicrotask(() => leaving && leave());
+		},
+		token: resolve
+	};
+}
+/** The part of `[start, end)` inside `text`, as a word of it; `null` when they don't overlap. */
+function spanWord(text, start, end) {
+	const from = Math.max(0, start);
+	const to = Math.min(text.length, end);
+	return from < to ? {
+		start: from,
+		end: to,
+		text: text.slice(from, to)
+	} : null;
+}
+/**
+* Whether pierre's current render carries syntax tokens. Reads the renderer's
+* cache flag (private in the typings, present in @pierre/diffs 1.5); falls back to
+* looking for classed/styled token spans, which a plain render never has.
+*/
+function isHighlighted(instance, node) {
+	const cache = instance?.fileRenderer?.renderCache;
+	if (cache && typeof cache.highlighted === "boolean") return cache.highlighted;
+	return node.shadowRoot?.querySelector("[data-line] span[class], [data-line] span[style]") !== null;
+}
+/**
+* Whether pierre colors the rendered file at all: it leaves an empty, plain-text or massive file plain (its
+* `forcePlainText`). Reads the same private renderer as {@link isHighlighted}; unknown counts as plain.
+*/
+function colorsFile(instance) {
+	const renderer = instance?.fileRenderer;
+	const file = renderer?.renderCache?.file;
+	if (!file?.contents || (file.lang ?? getFiletypeFromFileName(file.name)) === "text") return false;
+	const max = renderer?.getTokenizeMaxLength?.() ?? DEFAULT_TOKENIZE_MAX_LENGTH;
+	return file.contents.length <= max || file.contents.split("\n").length <= max;
+}
+/** One factory for every editable surface; pierre needs it in context. */
+const createEditor = (type, options, key) => new Editor(type, options, key);
+/** A file's text with syntax colors, line selection, token hovers and annotations; editable when `edit` is set. */
+const FileView = memo(FileViewInner);
+/** FNV-1a over the text, base 36: a content key for pierre's caches. */
+function contentHash(text) {
+	let h = 2166136261;
+	for (let i = 0; i < text.length; i++) {
+		h ^= text.charCodeAt(i);
+		h = Math.imul(h, 16777619);
+	}
+	return (h >>> 0).toString(36) + text.length.toString(36);
+}
+//#endregion
+export { FileView, LINK_HIGHLIGHT };

package/dist/code/editor/HighlightWorkers.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+//#region src/code/editor/HighlightWorkers.d.ts
+/** Props of {@link HighlightWorkers}. */
+interface HighlightWorkersProps {
+  /** Creates one highlight worker; `null` (no Worker in this environment) highlights on the main thread. */
+  createWorker: (() => Worker) | null;
+  /** The views that highlight through the pool. */
+  children: ReactNode;
+}
+/**
+ * Gives the views below a shared pool of highlight workers themed like the editor. Without a
+ * `createWorker` it renders the children as they are and pierre highlights on the main thread.
+ *
+ * @param props - See {@link HighlightWorkersProps}.
+ */
+declare function HighlightWorkers({ createWorker, children }: HighlightWorkersProps): import("react").JSX.Element;
+//#endregion
+export { HighlightWorkers, HighlightWorkersProps };

package/dist/code/editor/HighlightWorkers.js

@@ -0,0 +1,59 @@
+import { useEditorEnvironment } from "./environment.js";
+import { PREFERRED_HIGHLIGHTER } from "./pierre-theme.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { WorkerPoolContextProvider, useWorkerPool } from "@pierre/diffs/react";
+//#region src/code/editor/HighlightWorkers.tsx
+/**
+* pierre's highlighting worker pool: shiki tokenises in Web Workers, so a
+* file paints as plain text in the same frame it is opened and the colours
+* arrive without ever blocking the main thread. One pool per app; two
+* workers cover a file view and a diff view highlighting at once without
+* idling eight threads.
+*
+* The pool carries its own theme (the per-view `theme` option is ignored on
+* the worker path), so it is seeded from the editor environment's shiki
+* theme and follows it, keeping the editor, the diffs and the hover cards
+* on one palette.
+*
+* The app injects the worker (`@pierre/diffs/worker/worker.js?worker` under
+* Vite), the way it injects the code block highlighter's. Without one,
+* pierre highlights on the main thread.
+*/
+const HIGHLIGHTER = {
+	useTokenTransformer: true,
+	preferredHighlighter: PREFERRED_HIGHLIGHTER,
+	tokenizeMaxLineLength: 1e3
+};
+/**
+* Gives the views below a shared pool of highlight workers themed like the editor. Without a
+* `createWorker` it renders the children as they are and pierre highlights on the main thread.
+*
+* @param props - See {@link HighlightWorkersProps}.
+*/
+function HighlightWorkers({ createWorker, children }) {
+	const theme = useEditorEnvironment().shikiTheme;
+	const pool = useMemo(() => createWorker && {
+		workerFactory: createWorker,
+		poolSize: 2,
+		totalASTLRUCacheSize: 240
+	}, [createWorker]);
+	if (!pool) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsxs(WorkerPoolContextProvider, {
+		poolOptions: pool,
+		highlighterOptions: {
+			...HIGHLIGHTER,
+			theme
+		},
+		children: [/* @__PURE__ */ jsx(ThemeFollower, { theme }), children]
+	});
+}
+function ThemeFollower({ theme }) {
+	const pool = useWorkerPool();
+	useEffect(() => {
+		pool?.setRenderOptions({ theme });
+	}, [pool, theme]);
+	return null;
+}
+//#endregion
+export { HighlightWorkers };

package/dist/code/editor/LanguageEditor.d.ts

@@ -0,0 +1,40 @@
+import { CodeDocument } from "./useCodeDocument.js";
+import { EditorDiagnostic, EditorLocation } from "./diagnostics.js";
+import { EditorLanguage, EditorReveal } from "./language.js";
+import { CSSProperties } from "react";
+//#region src/code/editor/LanguageEditor.d.ts
+/** Edits are sent this long after the last keystroke, like the app's language servers. */
+declare const LANGUAGE_DEBOUNCE_MS = 300;
+/** Props of {@link LanguageEditor}. */
+interface LanguageEditorProps {
+  /** The file's path; the language service and navigation targets know it by this. */
+  path: string;
+  /** The file's state from `useCodeDocument`. */
+  doc: CodeDocument;
+  /** pierre's retained-session key (the draft and undo stack survive remounts under it). */
+  sessionKey: string;
+  /** Whether this editor is on screen; focus and ⌘F follow it. */
+  visible: boolean;
+  /** Never arm the editor. */
+  readOnly?: boolean;
+  /** The service for this file; `null`: a plain `CodeEditor` with no findings, hovers or navigation. */
+  language: EditorLanguage | null;
+  /** Open a file at a position (a definition, a reference). */
+  onNavigate?: (target: EditorLocation) => void;
+  /** Where to go in this file, once per nonce. */
+  reveal?: EditorReveal | null;
+  /** The file's findings changed (`null`: a check runs). */
+  onDiagnostics?: (path: string, items: readonly EditorDiagnostic[] | null) => void;
+  /** Extra classes on the root element. */
+  className?: string;
+  /** Inline styles on the root element, merged after the component's own. */
+  style?: CSSProperties;
+}
+/**
+ * A `CodeEditor` wired to a language service; see the module comment.
+ *
+ * @param props - See {@link LanguageEditorProps}.
+ */
+declare function LanguageEditor({ path, doc, sessionKey, visible, readOnly, language, onNavigate, reveal, onDiagnostics, className, style }: LanguageEditorProps): import("react").JSX.Element;
+//#endregion
+export { LANGUAGE_DEBOUNCE_MS, LanguageEditor, LanguageEditorProps };

package/dist/code/editor/LanguageEditor.js

@@ -0,0 +1,159 @@
+import { useLabels } from "../../labels.js";
+import { RowActionsMenu } from "../../components/RowActionsMenu.js";
+import { CodeEditor } from "./CodeEditor.js";
+import { diagnosticMarkers, diagnosticsAt, diagnosticsByLine } from "./diagnostics.js";
+import { useHoverCard } from "./CodeHover.js";
+import { DiagnosticAnnotation } from "./DiagnosticAnnotation.js";
+import { useDefinition } from "./useDefinition.js";
+import { useRevealLine } from "./useRevealLine.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region src/code/editor/LanguageEditor.tsx
+/**
+* A `CodeEditor` with a language service (`EditorLanguage`): the file's
+* text goes to it on open and 300ms after each burst of edits; its findings
+* show as line annotations and squiggles; hovering a symbol shows the hover
+* card (findings first, then the service's answer); Cmd/Ctrl-click goes to
+* the definition; the card's "Find references" lists them in a menu.
+*/
+/** Edits are sent this long after the last keystroke, like the app's language servers. */
+const LANGUAGE_DEBOUNCE_MS = 300;
+const NO_DIAGNOSTICS = [];
+/**
+* A `CodeEditor` wired to a language service; see the module comment.
+*
+* @param props - See {@link LanguageEditorProps}.
+*/
+function LanguageEditor({ path, doc, sessionKey, visible, readOnly = false, language, onNavigate, reveal, onDiagnostics, className, style }) {
+	const labels = useLabels();
+	const handle = useRef(null);
+	const [findings, setFindings] = useState(NO_DIAGNOSTICS);
+	const [selected, setSelected] = useState(null);
+	const [references, setReferences] = useState(null);
+	const { contents } = doc;
+	const sent = useRef(false);
+	useEffect(() => {
+		if (!language) return;
+		if (!sent.current) {
+			sent.current = true;
+			language.update(path, contents);
+			return;
+		}
+		const id = setTimeout(() => language.update(path, contents), 300);
+		return () => clearTimeout(id);
+	}, [
+		language,
+		path,
+		contents
+	]);
+	useEffect(() => {
+		if (!language) return;
+		return language.diagnostics(path, (items) => {
+			if (items) setFindings(items);
+			onDiagnostics?.(path, items);
+		});
+	}, [
+		language,
+		path,
+		onDiagnostics
+	]);
+	const resolve = useCallback((line, column) => language?.definition(path, line, column) ?? Promise.resolve([]), [language, path]);
+	const navigate = useCallback((t) => onNavigate?.(t), [onNavigate]);
+	const definition = useDefinition(path, language !== null && onNavigate !== void 0, resolve, navigate);
+	const lastPointer = useRef({
+		x: 0,
+		y: 0
+	});
+	const findReferences = useCallback(async (line, column) => {
+		const items = await language?.references(path, line, column).catch(() => []) ?? [];
+		setReferences({
+			at: lastPointer.current,
+			items
+		});
+	}, [language, path]);
+	const actions = useMemo(() => definition.enabled ? [{
+		label: labels.goToDefinition,
+		run: definition.goTo
+	}, {
+		label: labels.findReferences,
+		run: findReferences
+	}] : [], [
+		definition.enabled,
+		definition.goTo,
+		findReferences,
+		labels
+	]);
+	const hover = useHoverCard(language ? (line, column) => language.hover(path, line, column).then((text) => ({ text })) : null, actions, contents, (line, column) => diagnosticsAt(findings, line, column));
+	const leaveHover = hover.onLeave;
+	useEffect(() => {
+		if (!language) return;
+		const onKey = (e) => {
+			if (e.key === "Meta" || e.key === "Control") leaveHover();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [language]);
+	const onTokenEnter = (t, e) => {
+		const box = t.element.getBoundingClientRect();
+		lastPointer.current = {
+			x: box.left,
+			y: box.bottom + 4
+		};
+		hover.onEnter(t, e);
+		definition.onEnter(t);
+	};
+	const onTokenLeave = () => {
+		hover.onLeave();
+		definition.onLeave();
+	};
+	useRevealLine(handle, reveal, (line) => setSelected({
+		start: line,
+		end: line
+	}), !readOnly);
+	const annotations = useMemo(() => [...diagnosticsByLine(findings)].map(([lineNumber, items]) => ({
+		lineNumber,
+		metadata: items
+	})), [findings]);
+	const markers = useMemo(() => diagnosticMarkers(findings), [findings]);
+	const referenceItems = useMemo(() => !references ? [] : references.items.length === 0 ? [{
+		id: "none",
+		label: labels.noReferences,
+		disabled: true,
+		onSelect: () => {}
+	}] : references.items.map((r) => ({
+		id: `${r.path}:${r.line}:${r.column}`,
+		label: `${r.path}:${r.line}:${r.column}`,
+		onSelect: () => onNavigate?.(r)
+	})), [
+		references,
+		labels,
+		onNavigate
+	]);
+	return /* @__PURE__ */ jsxs(CodeEditor, {
+		ref: handle,
+		path,
+		doc,
+		sessionKey,
+		visible,
+		readOnly,
+		className,
+		style,
+		markers,
+		selectedLines: selected,
+		onSelectionEnd: setSelected,
+		onTokenEnter,
+		onTokenLeave,
+		onTokenClick: definition.onClick,
+		annotations,
+		renderAnnotation: (a) => a.metadata && /* @__PURE__ */ jsx(DiagnosticAnnotation, { items: a.metadata }),
+		hostAttributes: { "data-zg-linking": definition.linking ? "true" : void 0 },
+		children: [hover.node, /* @__PURE__ */ jsx(RowActionsMenu, {
+			open: references !== null,
+			position: references?.at ?? null,
+			onClose: () => setReferences(null),
+			items: referenceItems
+		})]
+	});
+}
+//#endregion
+export { LANGUAGE_DEBOUNCE_MS, LanguageEditor };

package/dist/code/editor/_vendor/tree-icon-colors.d.ts

@@ -0,0 +1,11 @@
+//#region src/code/editor/_vendor/tree-icon-colors.d.ts
+/**
+ * Generated from @pierre/trees 1.0.0-beta.6 (dist/style.js, not exported by the package):
+ * the file-icon colour per icon token, so icons drawn outside the tree
+ * (FileIcon) match the Files tab. Regenerate when the package updates.
+ */
+declare const ICON_FAMILIES: Record<string, readonly [light: string, dark: string]>;
+/** The colour family (a key of {@link ICON_FAMILIES}) per icon token; tokens missing here draw gray. */
+declare const ICON_TOKEN_FAMILY: Record<string, string>;
+//#endregion
+export { ICON_FAMILIES, ICON_TOKEN_FAMILY };

package/dist/code/editor/_vendor/tree-icon-colors.js

@@ -0,0 +1,74 @@
+//#region src/code/editor/_vendor/tree-icon-colors.ts
+/**
+* Generated from @pierre/trees 1.0.0-beta.6 (dist/style.js, not exported by the package):
+* the file-icon colour per icon token, so icons drawn outside the tree
+* (FileIcon) match the Files tab. Regenerate when the package updates.
+*/
+const ICON_FAMILIES = {
+	gray: ["#84848a", "#adadb1"],
+	red: ["#d52c36", "#ff6762"],
+	vermilion: ["#ff8c5b", "#d5512f"],
+	orange: ["#d47628", "#ffa359"],
+	yellow: ["#d5a910", "#ffd452"],
+	green: ["#199f43", "#5ecc71"],
+	teal: ["#17a5af", "#64d1db"],
+	cyan: ["#1ca1c7", "#68cdf2"],
+	blue: ["#1a85d4", "#69b1ff"],
+	indigo: ["#693acf", "#9d6afb"],
+	purple: ["#a631be", "#d568ea"],
+	pink: ["#d32a61", "#ff678d"],
+	mauve: ["#594c5b", "#79697b"]
+};
+/** The colour family (a key of {@link ICON_FAMILIES}) per icon token; tokens missing here draw gray. */
+const ICON_TOKEN_FAMILY = {
+	default: "gray",
+	astro: "purple",
+	babel: "yellow",
+	bash: "green",
+	biome: "blue",
+	bootstrap: "indigo",
+	browserslist: "yellow",
+	bun: "mauve",
+	c: "blue",
+	cpp: "blue",
+	claude: "orange",
+	css: "indigo",
+	database: "purple",
+	docker: "blue",
+	eslint: "indigo",
+	go: "cyan",
+	graphql: "pink",
+	html: "orange",
+	image: "pink",
+	javascript: "yellow",
+	json: "orange",
+	markdown: "green",
+	mcp: "teal",
+	npm: "red",
+	postcss: "red",
+	prettier: "teal",
+	python: "blue",
+	react: "cyan",
+	ruby: "red",
+	rust: "orange",
+	sass: "pink",
+	svg: "orange",
+	svelte: "red",
+	svgo: "green",
+	swift: "orange",
+	table: "teal",
+	text: "gray",
+	tailwind: "cyan",
+	terraform: "indigo",
+	typescript: "blue",
+	vite: "purple",
+	vscode: "blue",
+	vue: "green",
+	wasm: "indigo",
+	webpack: "blue",
+	yml: "red",
+	zig: "orange",
+	zip: "orange"
+};
+//#endregion
+export { ICON_FAMILIES, ICON_TOKEN_FAMILY };