@dalcvil/steam-green-react 0.2.0 → 1.0.0

package/dist/components/TreeView/TreeView.js

@@ -0,0 +1,331 @@
+import { Fragment, forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import "../../styles/scrollbars.css";
+import "./TreeView.css";
+//#region src/components/TreeView/TreeView.tsx
+/** How long a run of typed characters keeps building a typeahead query. */
+var TYPEAHEAD_RESET_MS = 600;
+/** `--vgui-tree-indent` defaults to 16px, which is the doc's inference. */
+var DEFAULT_INDENT = 16;
+function toIdArray(value) {
+	if (value === void 0) return [];
+	return Array.isArray(value) ? value.slice() : [value];
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+/** The doc is explicit that a node with an empty array still renders a leaf. */
+function hasChildren(node) {
+	return Array.isArray(node.children) && node.children.length > 0;
+}
+/**
+* Walks the visible nodes in depth-first order, descending into a subtree only
+* while it is expanded — so this list is both the rendering order and the
+* arrow-key/typeahead order, and a collapsed subtree is simply absent.
+*/
+function flatten(nodes, expanded, level = 1, parentId = null, out = []) {
+	for (const node of nodes) {
+		const children = hasChildren(node);
+		out.push({
+			node,
+			level,
+			parentId,
+			hasChildren: children
+		});
+		if (children && expanded.has(node.id)) flatten(node.children, expanded, level + 1, node.id, out);
+	}
+	return out;
+}
+/** `defaultExpanded` seeds the uncontrolled expansion state at every depth. */
+function initialExpanded(nodes) {
+	return nodes.flatMap((node) => [...node.defaultExpanded ? [node.id] : [], ...initialExpanded(Array.isArray(node.children) ? node.children : [])]);
+}
+var TreeView = forwardRef(function TreeView(props, forwardedRef) {
+	const { className, nodes, variant = "default", selected, defaultSelected, multi = false, onSelectedChange, expandOnRowClick = false, indentSize, emptyMessage, label, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = props;
+	const baseId = useId();
+	const nodeRefs = useRef(/* @__PURE__ */ new Map());
+	/**
+	* Shift+click anchors on the node that was focused when the range started.
+	* It lives in a ref because a pointer press moves DOM focus before the click
+	* lands, which would otherwise overwrite the anchor with the clicked node.
+	*/
+	const anchorRef = useRef(null);
+	const typeaheadRef = useRef({
+		query: "",
+		timer: null
+	});
+	const [uncontrolledSelected, setUncontrolledSelected] = useState(() => toIdArray(defaultSelected));
+	const [expandedIds, setExpandedIds] = useState(() => initialExpanded(nodes));
+	const [activeId, setActiveId] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
+	const expandedSet = useMemo(() => new Set(expandedIds), [expandedIds]);
+	const visible = useMemo(() => flatten(nodes, expandedSet), [expandedSet, nodes]);
+	const nodeById = useMemo(() => new Map(visible.map((entry) => [entry.node.id, entry])), [visible]);
+	const selectedIds = selected === void 0 ? uncontrolledSelected : toIdArray(selected);
+	const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+	const fallbackActiveId = visible.find((entry) => selectedSet.has(entry.node.id))?.node.id ?? visible[0]?.node.id ?? null;
+	const activeNodeId = activeId !== null && nodeById.has(activeId) ? activeId : fallbackActiveId;
+	useEffect(() => {
+		const typeahead = typeaheadRef.current;
+		return () => {
+			if (typeahead.timer !== null) clearTimeout(typeahead.timer);
+		};
+	}, []);
+	const setNodeRef = useCallback((id, node) => {
+		if (node) nodeRefs.current.set(id, node);
+		else nodeRefs.current.delete(id);
+	}, []);
+	const labelOf = useCallback((id) => nodeById.get(id)?.node.label ?? "", [nodeById]);
+	const commit = useCallback((next) => {
+		if (selected === void 0) setUncontrolledSelected(next);
+		onSelectedChange?.(multi ? next : next[0] ?? "");
+	}, [
+		multi,
+		onSelectedChange,
+		selected
+	]);
+	const describe = useCallback((id, next) => {
+		const entry = nodeById.get(id);
+		const name = (entry?.node.label ?? "").slice(0, 60);
+		const state = next.includes(id) ? "selected" : "not selected";
+		const level = entry?.level ?? 1;
+		const position = visible.findIndex((candidate) => candidate.node.id === id) + 1;
+		return [
+			`${name || "Node"}, ${state}`,
+			`level ${level}`,
+			`${position} of ${visible.length}`
+		].join(", ");
+	}, [nodeById, visible]);
+	const focusNode = useCallback((id) => {
+		setActiveId(id);
+		anchorRef.current = id;
+		const node = nodeRefs.current.get(id);
+		if (!node) return;
+		/**
+		* jsdom has no layout engine, so `scrollIntoView` may be a stub or missing
+		* entirely; the tree only asks that the active node be brought into view,
+		* so a missing implementation is not fatal.
+		*/
+		if (typeof node.scrollIntoView === "function") node.scrollIntoView({ block: "nearest" });
+		node.focus();
+	}, []);
+	const moveActive = useCallback((step) => {
+		const ids = visible.map((entry) => entry.node.id);
+		if (ids.length === 0) return;
+		const current = activeNodeId === null ? -1 : ids.indexOf(activeNodeId);
+		const next = step === "first" ? 0 : step === "last" ? ids.length - 1 : clamp((current < 0 ? 0 : current) + step, 0, ids.length - 1);
+		focusNode(ids[next]);
+	}, [
+		activeNodeId,
+		focusNode,
+		visible
+	]);
+	const setExpanded = useCallback((id, next) => {
+		setExpandedIds((previous) => {
+			if (next) return previous.includes(id) ? previous : [...previous, id];
+			return previous.includes(id) ? previous.filter((entry) => entry !== id) : previous;
+		});
+	}, []);
+	const toggleExpanded = useCallback((id) => setExpanded(id, !expandedSet.has(id)), [expandedSet, setExpanded]);
+	const typeahead = useCallback((character) => {
+		const state = typeaheadRef.current;
+		const buffer = (state.query + character).toLowerCase();
+		state.query = buffer;
+		if (state.timer !== null) clearTimeout(state.timer);
+		state.timer = setTimeout(() => {
+			state.query = "";
+		}, TYPEAHEAD_RESET_MS);
+		const ids = visible.map((entry) => entry.node.id);
+		if (ids.length === 0) return;
+		const targets = visible.filter((entry) => !entry.node.disabled).map((entry) => entry.node.id);
+		if (targets.length === 0) return;
+		const start = activeNodeId === null ? -1 : ids.indexOf(activeNodeId);
+		for (let offset = 1; offset <= ids.length; offset += 1) {
+			const id = ids[(start + offset + ids.length) % ids.length];
+			if (!targets.includes(id)) continue;
+			if (labelOf(id).toLowerCase().startsWith(buffer)) {
+				focusNode(id);
+				return;
+			}
+		}
+	}, [
+		activeNodeId,
+		focusNode,
+		labelOf,
+		visible
+	]);
+	const selectNode = useCallback((id, mode) => {
+		const anchor = anchorRef.current ?? activeNodeId;
+		const ids = visible.map((entry) => entry.node.id);
+		let next;
+		const from = anchor === null ? -1 : ids.indexOf(anchor);
+		if (mode === "range" && from >= 0 && anchor !== id) {
+			const to = ids.indexOf(id);
+			next = ids.slice(Math.min(from, to), Math.max(from, to) + 1);
+		} else if (mode === "range" || mode === "replace") next = [id];
+		else next = selectedSet.has(id) ? selectedIds.filter((entry) => entry !== id) : [...selectedIds, id];
+		if (mode !== "range") anchorRef.current = id;
+		setAnnouncement(describe(id, next));
+		commit(next);
+	}, [
+		activeNodeId,
+		commit,
+		describe,
+		selectedIds,
+		selectedSet,
+		visible
+	]);
+	const selectByKeyboard = useCallback((id) => {
+		const entry = nodeById.get(id);
+		if (!entry || entry.node.disabled) return;
+		selectNode(id, multi ? "toggle" : "replace");
+	}, [
+		multi,
+		nodeById,
+		selectNode
+	]);
+	const handleKeyDown = useCallback((event) => {
+		const { key } = event;
+		const entry = activeNodeId === null ? void 0 : nodeById.get(activeNodeId);
+		if (key === "ArrowDown" || key === "ArrowUp") {
+			event.preventDefault();
+			moveActive(key === "ArrowDown" ? 1 : -1);
+			return;
+		}
+		if (key === "ArrowRight" && entry !== void 0) {
+			event.preventDefault();
+			if (!entry.hasChildren) return;
+			if (expandedSet.has(entry.node.id)) {
+				const first = entry.node.children[0];
+				if (first) focusNode(first.id);
+				return;
+			}
+			setExpanded(entry.node.id, true);
+			return;
+		}
+		if (key === "ArrowLeft" && entry !== void 0) {
+			event.preventDefault();
+			if (entry.hasChildren && expandedSet.has(entry.node.id)) {
+				setExpanded(entry.node.id, false);
+				return;
+			}
+			if (entry.parentId !== null) focusNode(entry.parentId);
+			return;
+		}
+		if (key === "Home" || key === "End") {
+			event.preventDefault();
+			moveActive(key === "Home" ? "first" : "last");
+			return;
+		}
+		if (key === "Enter" || key === " ") {
+			event.preventDefault();
+			if (activeNodeId !== null) selectByKeyboard(activeNodeId);
+			return;
+		}
+		if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) typeahead(key);
+	}, [
+		activeNodeId,
+		expandedSet,
+		focusNode,
+		moveActive,
+		nodeById,
+		selectByKeyboard,
+		setExpanded,
+		typeahead
+	]);
+	const handleNodeClick = useCallback((event, node) => {
+		if (node.disabled) return;
+		setActiveId(node.id);
+		if (Boolean(event.target?.closest?.(".vgui-tree__image")) && hasChildren(node)) {
+			toggleExpanded(node.id);
+			return;
+		}
+		if (!multi) selectNode(node.id, "replace");
+		else if (event.shiftKey) selectNode(node.id, "range");
+		else selectNode(node.id, event.ctrlKey || event.metaKey ? "toggle" : "replace");
+		if (expandOnRowClick && hasChildren(node)) toggleExpanded(node.id);
+	}, [
+		expandOnRowClick,
+		multi,
+		selectNode,
+		toggleExpanded
+	]);
+	const classes = ["vgui-tree"];
+	classes.push(`vgui-tree--${variant}`);
+	if (multi) classes.push("vgui-tree--multi");
+	if (nodes.length === 0) classes.push("vgui-tree--empty");
+	if (className) classes.push(className);
+	const treeStyle = {
+		...style,
+		"--vgui-tree-indent": `${indentSize ?? DEFAULT_INDENT}px`
+	};
+	const renderNodes = (children, level) => children.map((node) => {
+		const nodeHasChildren = hasChildren(node);
+		const expanded = nodeHasChildren && expandedSet.has(node.id);
+		const isSelected = selectedSet.has(node.id);
+		const isActive = node.id === activeNodeId;
+		const nodeClasses = ["vgui-tree__node"];
+		if (isSelected) nodeClasses.push("vgui-tree__node--selected");
+		if (node.disabled) nodeClasses.push("vgui-tree__node--disabled");
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			id: `${baseId}-node-${node.id}`,
+			ref: (element) => setNodeRef(node.id, element),
+			className: nodeClasses.join(" "),
+			role: "treeitem",
+			"aria-level": level,
+			"aria-expanded": nodeHasChildren ? expanded : void 0,
+			"aria-selected": isSelected,
+			"aria-disabled": node.disabled ? true : void 0,
+			tabIndex: isActive ? 0 : -1,
+			style: { "--vgui-tree-level": level - 1 },
+			title: node.label,
+			onClick: (event) => handleNodeClick(event, node),
+			onFocus: () => {
+				setActiveId(node.id);
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				className: `vgui-tree__image${nodeHasChildren ? expanded ? " vgui-tree__image--expanded" : " vgui-tree__image--collapsed" : " vgui-tree__image--leaf"}`,
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "vgui-tree__text",
+				children: node.label
+			})]
+		}), expanded ? /* @__PURE__ */ jsx("div", {
+			className: "vgui-tree__group",
+			role: "group",
+			children: renderNodes(node.children ?? [], level + 1)
+		}) : null] }, node.id);
+	});
+	const isEmpty = nodes.length === 0;
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardedRef,
+		className: classes.join(" "),
+		style: treeStyle,
+		...rest,
+		children: isEmpty ? /* @__PURE__ */ jsx("div", {
+			className: "vgui-tree__subpanel vgui-scroll-surface",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "vgui-tree__empty",
+				role: "status",
+				children: emptyMessage
+			})
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+			className: "vgui-tree__subpanel vgui-scroll-surface",
+			role: "tree",
+			"aria-label": ariaLabelledBy ? void 0 : ariaLabel ?? label ?? "Tree",
+			"aria-labelledby": ariaLabelledBy,
+			"aria-multiselectable": multi ? true : void 0,
+			onKeyDown: handleKeyDown,
+			children: renderNodes(nodes, 1)
+		}), /* @__PURE__ */ jsx("div", {
+			className: "vgui-tree__live",
+			role: "status",
+			children: announcement
+		})] })
+	});
+});
+TreeView.displayName = "TreeView";
+//#endregion
+export { TreeView };
+
+//# sourceMappingURL=TreeView.js.map

package/dist/components/TreeView/TreeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.js","names":[],"sources":["../../../src/components/TreeView/TreeView.tsx"],"sourcesContent":["import { Fragment, forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'\nimport type {\n  CSSProperties,\n  HTMLAttributes,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  ReactNode,\n} from 'react'\n\nimport './TreeView.css'\nimport '../../styles/scrollbars.css'\n\nexport interface TreeNode {\n  /** Stable identity; also the React key. */\n  id: string\n  /** Visible node label. */\n  label: string\n  /** Child nodes. A node with an empty array still renders a leaf. */\n  children?: TreeNode[]\n  /** Renders disabled and unselectable. */\n  disabled?: boolean\n  /** Initial expansion when uncontrolled. */\n  defaultExpanded?: boolean\n  /** Arbitrary payload returned on selection. */\n  data?: unknown\n}\n\nexport type TreeViewVariant = 'default' | 'sidebar'\n\nexport interface TreeViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Root nodes, in order. */\n  nodes: TreeNode[]\n  /** `sidebar` draws the two-sided `TreeViewSubPanel` recess and fills its parent. */\n  variant?: TreeViewVariant\n  /** Controlled selection. Use `string[]` when `multi` is set. */\n  selected?: string | string[]\n  /** Initial selection when uncontrolled. */\n  defaultSelected?: string | string[]\n  /** Allows Ctrl/Shift multi-selection. */\n  multi?: boolean\n  /** Called with the newly selected node id, or ids when `multi` is set. */\n  onSelectedChange?: (ids: string | string[]) => void\n  /** Expands nodes when the whole row is clicked, not just the disclosure glyph. */\n  expandOnRowClick?: boolean\n  /** Indent per level in pixels. Defaults to 16. */\n  indentSize?: number\n  /** Message rendered when there are no nodes. */\n  emptyMessage?: string\n  /**\n   * Accessible name for the tree, used when neither `aria-label` nor\n   * `aria-labelledby` is given. ARIA requires a tree to be named, so it falls\n   * back to `\"Tree\"`.\n   */\n  label?: string\n}\n\n/** How long a run of typed characters keeps building a typeahead query. */\nconst TYPEAHEAD_RESET_MS = 600\n\n/** `--vgui-tree-indent` defaults to 16px, which is the doc's inference. */\nconst DEFAULT_INDENT = 16\n\ninterface FlatNode {\n  node: TreeNode\n  level: number\n  parentId: string | null\n  hasChildren: boolean\n}\n\nfunction toIdArray(value: string | string[] | undefined): string[] {\n  if (value === undefined) return []\n  return Array.isArray(value) ? value.slice() : [value]\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\n/** The doc is explicit that a node with an empty array still renders a leaf. */\nfunction hasChildren(node: TreeNode): boolean {\n  return Array.isArray(node.children) && node.children.length > 0\n}\n\n/**\n * Walks the visible nodes in depth-first order, descending into a subtree only\n * while it is expanded — so this list is both the rendering order and the\n * arrow-key/typeahead order, and a collapsed subtree is simply absent.\n */\nfunction flatten(\n  nodes: TreeNode[],\n  expanded: Set<string>,\n  level = 1,\n  parentId: string | null = null,\n  out: FlatNode[] = [],\n): FlatNode[] {\n  for (const node of nodes) {\n    const children = hasChildren(node)\n    out.push({ node, level, parentId, hasChildren: children })\n    if (children && expanded.has(node.id)) {\n      flatten(node.children as TreeNode[], expanded, level + 1, node.id, out)\n    }\n  }\n  return out\n}\n\n/** `defaultExpanded` seeds the uncontrolled expansion state at every depth. */\nfunction initialExpanded(nodes: TreeNode[]): string[] {\n  return nodes.flatMap((node) => [\n    ...(node.defaultExpanded ? [node.id] : []),\n    ...initialExpanded(Array.isArray(node.children) ? node.children : []),\n  ])\n}\n\nexport const TreeView = forwardRef<HTMLDivElement, TreeViewProps>(function TreeView(\n  props,\n  forwardedRef,\n) {\n  const {\n    className,\n    nodes,\n    variant = 'default',\n    selected,\n    defaultSelected,\n    multi = false,\n    onSelectedChange,\n    expandOnRowClick = false,\n    indentSize,\n    emptyMessage,\n    label,\n    style,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...rest\n  } = props\n\n  const baseId = useId()\n  const nodeRefs = useRef(new Map<string, HTMLDivElement>())\n  /**\n   * Shift+click anchors on the node that was focused when the range started.\n   * It lives in a ref because a pointer press moves DOM focus before the click\n   * lands, which would otherwise overwrite the anchor with the clicked node.\n   */\n  const anchorRef = useRef<string | null>(null)\n  const typeaheadRef = useRef<{ query: string; timer: ReturnType<typeof setTimeout> | null }>({\n    query: '',\n    timer: null,\n  })\n\n  const [uncontrolledSelected, setUncontrolledSelected] = useState<string[]>(() =>\n    toIdArray(defaultSelected),\n  )\n  const [expandedIds, setExpandedIds] = useState<string[]>(() => initialExpanded(nodes))\n  const [activeId, setActiveId] = useState<string | null>(null)\n  const [announcement, setAnnouncement] = useState('')\n\n  const expandedSet = useMemo(() => new Set(expandedIds), [expandedIds])\n  const visible = useMemo(() => flatten(nodes, expandedSet), [expandedSet, nodes])\n  const nodeById = useMemo(\n    () => new Map(visible.map((entry) => [entry.node.id, entry])),\n    [visible],\n  )\n\n  const selectedIds = selected === undefined ? uncontrolledSelected : toIdArray(selected)\n  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds])\n\n  // Roving tabindex: exactly one node is the tab stop. A stale active node (its\n  // ancestor collapsed, or its node removed) falls back to the selection and\n  // then to the first visible node.\n  const fallbackActiveId =\n    visible.find((entry) => selectedSet.has(entry.node.id))?.node.id ?? visible[0]?.node.id ?? null\n  const activeNodeId =\n    activeId !== null && nodeById.has(activeId) ? activeId : fallbackActiveId\n\n  useEffect(() => {\n    const typeahead = typeaheadRef.current\n    return () => {\n      if (typeahead.timer !== null) clearTimeout(typeahead.timer)\n    }\n  }, [])\n\n  const setNodeRef = useCallback((id: string, node: HTMLDivElement | null) => {\n    if (node) nodeRefs.current.set(id, node)\n    else nodeRefs.current.delete(id)\n  }, [])\n\n  const labelOf = useCallback(\n    (id: string) => nodeById.get(id)?.node.label ?? '',\n    [nodeById],\n  )\n\n  const commit = useCallback(\n    (next: string[]) => {\n      if (selected === undefined) setUncontrolledSelected(next)\n      onSelectedChange?.(multi ? next : (next[0] ?? ''))\n    },\n    [multi, onSelectedChange, selected],\n  )\n\n  const describe = useCallback(\n    (id: string, next: string[]) => {\n      const entry = nodeById.get(id)\n      const name = (entry?.node.label ?? '').slice(0, 60)\n      const state = next.includes(id) ? 'selected' : 'not selected'\n      const level = entry?.level ?? 1\n      const position = visible.findIndex((candidate) => candidate.node.id === id) + 1\n      return [\n        `${name || 'Node'}, ${state}`,\n        `level ${level}`,\n        `${position} of ${visible.length}`,\n      ].join(', ')\n    },\n    [nodeById, visible],\n  )\n\n  const focusNode = useCallback((id: string) => {\n    setActiveId(id)\n    anchorRef.current = id\n    const node = nodeRefs.current.get(id)\n    if (!node) return\n    /**\n     * jsdom has no layout engine, so `scrollIntoView` may be a stub or missing\n     * entirely; the tree only asks that the active node be brought into view,\n     * so a missing implementation is not fatal.\n     */\n    if (typeof node.scrollIntoView === 'function') node.scrollIntoView({ block: 'nearest' })\n    node.focus()\n  }, [])\n\n  const moveActive = useCallback(\n    (step: number | 'first' | 'last') => {\n      const ids = visible.map((entry) => entry.node.id)\n      if (ids.length === 0) return\n\n      const current = activeNodeId === null ? -1 : ids.indexOf(activeNodeId)\n      const base = current < 0 ? 0 : current\n      const next =\n        step === 'first'\n          ? 0\n          : step === 'last'\n            ? ids.length - 1\n            : clamp(base + step, 0, ids.length - 1)\n      focusNode(ids[next])\n    },\n    [activeNodeId, focusNode, visible],\n  )\n\n  const setExpanded = useCallback((id: string, next: boolean) => {\n    setExpandedIds((previous) => {\n      if (next) return previous.includes(id) ? previous : [...previous, id]\n      return previous.includes(id) ? previous.filter((entry) => entry !== id) : previous\n    })\n  }, [])\n\n  const toggleExpanded = useCallback(\n    (id: string) => setExpanded(id, !expandedSet.has(id)),\n    [expandedSet, setExpanded],\n  )\n\n  const typeahead = useCallback(\n    (character: string) => {\n      const state = typeaheadRef.current\n      const buffer = (state.query + character).toLowerCase()\n      state.query = buffer\n      if (state.timer !== null) clearTimeout(state.timer)\n      state.timer = setTimeout(() => {\n        state.query = ''\n      }, TYPEAHEAD_RESET_MS)\n\n      const ids = visible.map((entry) => entry.node.id)\n      if (ids.length === 0) return\n\n      // Disabled nodes advertise their existence but are not typeahead targets.\n      const targets = visible\n        .filter((entry) => !entry.node.disabled)\n        .map((entry) => entry.node.id)\n      if (targets.length === 0) return\n\n      const start = activeNodeId === null ? -1 : ids.indexOf(activeNodeId)\n      for (let offset = 1; offset <= ids.length; offset += 1) {\n        const id = ids[(start + offset + ids.length) % ids.length]\n        if (!targets.includes(id)) continue\n        if (labelOf(id).toLowerCase().startsWith(buffer)) {\n          focusNode(id)\n          return\n        }\n      }\n    },\n    [activeNodeId, focusNode, labelOf, visible],\n  )\n\n  const selectNode = useCallback(\n    (id: string, mode: 'replace' | 'toggle' | 'range') => {\n      const anchor = anchorRef.current ?? activeNodeId\n      const ids = visible.map((entry) => entry.node.id)\n      let next: string[]\n\n      const from = anchor === null ? -1 : ids.indexOf(anchor)\n      if (mode === 'range' && from >= 0 && anchor !== id) {\n        const to = ids.indexOf(id)\n        next = ids.slice(Math.min(from, to), Math.max(from, to) + 1)\n      } else if (mode === 'range' || mode === 'replace') {\n        next = [id]\n      } else {\n        next =\n          selectedSet.has(id)\n            ? selectedIds.filter((entry) => entry !== id)\n            : [...selectedIds, id]\n      }\n\n      // A range keeps its original anchor; every other gesture moves it.\n      if (mode !== 'range') anchorRef.current = id\n\n      setAnnouncement(describe(id, next))\n      commit(next)\n    },\n    [activeNodeId, commit, describe, selectedIds, selectedSet, visible],\n  )\n\n  const selectByKeyboard = useCallback(\n    (id: string) => {\n      const entry = nodeById.get(id)\n      if (!entry || entry.node.disabled) return\n      selectNode(id, multi ? 'toggle' : 'replace')\n    },\n    [multi, nodeById, selectNode],\n  )\n\n  const handleKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      const { key } = event\n      const entry = activeNodeId === null ? undefined : nodeById.get(activeNodeId)\n\n      if (key === 'ArrowDown' || key === 'ArrowUp') {\n        event.preventDefault()\n        moveActive(key === 'ArrowDown' ? 1 : -1)\n        return\n      }\n\n      if (key === 'ArrowRight' && entry !== undefined) {\n        event.preventDefault()\n        if (!entry.hasChildren) return\n        // An expanded node hands focus to its first child; a collapsed one opens\n        // in place.\n        if (expandedSet.has(entry.node.id)) {\n          const children = entry.node.children as TreeNode[]\n          const first = children[0]\n          if (first) focusNode(first.id)\n          return\n        }\n        setExpanded(entry.node.id, true)\n        return\n      }\n\n      if (key === 'ArrowLeft' && entry !== undefined) {\n        event.preventDefault()\n        // An expanded node closes in place; a collapsed child steps out to its\n        // parent, which is the ARIA tree model and costs a keyboard user no\n        // second tab stop.\n        if (entry.hasChildren && expandedSet.has(entry.node.id)) {\n          setExpanded(entry.node.id, false)\n          return\n        }\n        if (entry.parentId !== null) focusNode(entry.parentId)\n        return\n      }\n\n      if (key === 'Home' || key === 'End') {\n        event.preventDefault()\n        moveActive(key === 'Home' ? 'first' : 'last')\n        return\n      }\n\n      if (key === 'Enter' || key === ' ') {\n        event.preventDefault()\n        if (activeNodeId !== null) selectByKeyboard(activeNodeId)\n        return\n      }\n\n      if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n        typeahead(key)\n      }\n    },\n    [\n      activeNodeId,\n      expandedSet,\n      focusNode,\n      moveActive,\n      nodeById,\n      selectByKeyboard,\n      setExpanded,\n      typeahead,\n    ],\n  )\n\n  const handleNodeClick = useCallback(\n    (event: ReactMouseEvent<HTMLDivElement>, node: TreeNode) => {\n      if (node.disabled) return\n\n      // Roving tabindex means the pointer must move the active node too.\n      setActiveId(node.id)\n\n      // The glyph is decorative (`aria-hidden`) because the row already carries\n      // `aria-expanded`, so it is hit-tested here rather than being a second\n      // interactive control inside the `treeitem`.\n      const clickedGlyph = Boolean(\n        (event.target as Element | null)?.closest?.('.vgui-tree__image'),\n      )\n      if (clickedGlyph && hasChildren(node)) {\n        toggleExpanded(node.id)\n        return\n      }\n\n      if (!multi) {\n        selectNode(node.id, 'replace')\n      } else if (event.shiftKey) {\n        selectNode(node.id, 'range')\n      } else {\n        selectNode(node.id, event.ctrlKey || event.metaKey ? 'toggle' : 'replace')\n      }\n\n      if (expandOnRowClick && hasChildren(node)) toggleExpanded(node.id)\n    },\n    [expandOnRowClick, multi, selectNode, toggleExpanded],\n  )\n\n  const classes = ['vgui-tree']\n  classes.push(`vgui-tree--${variant}`)\n  if (multi) classes.push('vgui-tree--multi')\n  if (nodes.length === 0) classes.push('vgui-tree--empty')\n  if (className) classes.push(className)\n\n  const treeStyle = {\n    ...style,\n    '--vgui-tree-indent': `${indentSize ?? DEFAULT_INDENT}px`,\n  } as CSSProperties\n\n  const renderNodes = (children: TreeNode[], level: number): ReactNode =>\n    children.map((node) => {\n      const nodeHasChildren = hasChildren(node)\n      const expanded = nodeHasChildren && expandedSet.has(node.id)\n      const isSelected = selectedSet.has(node.id)\n      const isActive = node.id === activeNodeId\n      const nodeClasses = ['vgui-tree__node']\n      if (isSelected) nodeClasses.push('vgui-tree__node--selected')\n      if (node.disabled) nodeClasses.push('vgui-tree__node--disabled')\n\n      return (\n        <Fragment key={node.id}>\n          <div\n            id={`${baseId}-node-${node.id}`}\n            ref={(element) => setNodeRef(node.id, element)}\n            className={nodeClasses.join(' ')}\n            role=\"treeitem\"\n            aria-level={level}\n            // `aria-expanded` only on nodes that have children: announcing\n            // \"collapsed\" for a leaf is a lie.\n            aria-expanded={nodeHasChildren ? expanded : undefined}\n            aria-selected={isSelected}\n            aria-disabled={node.disabled ? true : undefined}\n            // Roving tabindex: the active node is the tree's single tab stop.\n            tabIndex={isActive ? 0 : -1}\n            style={{ '--vgui-tree-level': level - 1 } as CSSProperties}\n            // The recipe truncates long labels, so the full text is kept\n            // reachable as a tooltip.\n            title={node.label}\n            onClick={(event) => handleNodeClick(event, node)}\n            onFocus={() => {\n              // A disabled node may hold the tab stop — the arrow keys walk\n              // onto it so its existence is discoverable — but activation is\n              // guarded separately in `selectByKeyboard`.\n              setActiveId(node.id)\n            }}\n          >\n            <span\n              className={`vgui-tree__image${\n                nodeHasChildren\n                  ? expanded\n                    ? ' vgui-tree__image--expanded'\n                    : ' vgui-tree__image--collapsed'\n                  : ' vgui-tree__image--leaf'\n              }`}\n              aria-hidden=\"true\"\n            />\n            <span className=\"vgui-tree__text\">{node.label}</span>\n          </div>\n          {/* `role=\"group\"` is what makes `aria-level` mean anything; a\n              collapsed subtree is unmounted rather than hidden so it leaves the\n              accessibility tree with its `aria-expanded=\"false\"` parent. */}\n          {expanded ? (\n            <div className=\"vgui-tree__group\" role=\"group\">\n              {renderNodes(node.children ?? [], level + 1)}\n            </div>\n          ) : null}\n        </Fragment>\n      )\n    })\n\n  const isEmpty = nodes.length === 0\n\n  return (\n    <div ref={forwardedRef} className={classes.join(' ')} style={treeStyle} {...rest}>\n      {isEmpty ? (\n        // An empty `tree` is itself an `aria-required-children` violation, so\n        // the empty state drops the widget and announces through a status\n        // region instead of a dangling role.\n        <div className=\"vgui-tree__subpanel vgui-scroll-surface\">\n          <p className=\"vgui-tree__empty\" role=\"status\">\n            {emptyMessage}\n          </p>\n        </div>\n      ) : (\n        <>\n          <div\n            className=\"vgui-tree__subpanel vgui-scroll-surface\"\n            role=\"tree\"\n            aria-label={ariaLabelledBy ? undefined : (ariaLabel ?? label ?? 'Tree')}\n            aria-labelledby={ariaLabelledBy}\n            aria-multiselectable={multi ? true : undefined}\n            onKeyDown={handleKeyDown}\n          >\n            {renderNodes(nodes, 1)}\n          </div>\n          <div className=\"vgui-tree__live\" role=\"status\">\n            {announcement}\n          </div>\n        </>\n      )}\n    </div>\n  )\n})\n\nTreeView.displayName = 'TreeView'\n"],"mappings":"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"}

package/dist/components/TreeView/index.d.ts

@@ -0,0 +1,3 @@
+export { TreeView } from './TreeView';
+export type { TreeNode, TreeViewProps, TreeViewVariant } from './TreeView';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TreeView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TreeView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/Window/Window.css

@@ -0,0 +1,218 @@
+/*
+ * Green Steam window (VGUI `Frame`).
+ *
+ * A beveled surface with a draggable caption strip, a control cluster and a
+ * resize grip. Positioning is deliberately left to the consumer: the component
+ * renders an unstyled-by-default box, it never bakes in `position: fixed`.
+ *
+ * Two values from `docs/components/Window.md` have no token — the `220x120`
+ * minimum box and the `16px` icon box — so they are routed through local
+ * properties an application shell can override, the same pattern `Panel` uses
+ * for its `max-width`.
+ */
+
+.vgui-window {
+  --vgui-window-min-width: 220px;
+  --vgui-window-min-height: 120px;
+  --vgui-window-icon-size: 16px;
+  --vgui-window-padding: 10px;
+  --vgui-window-titlebar-gap: 8px;
+  --vgui-window-control-gap: 2px;
+  --vgui-window-grip-offset: 2px;
+
+  box-sizing: border-box;
+  position: relative;
+  background-color: var(--vgui-surface);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  padding: var(--vgui-window-padding);
+  min-width: var(--vgui-window-min-width);
+  min-height: var(--vgui-window-min-height);
+}
+
+/* `Frame:FrameFocus` — Valve lights the frame border while the window has focus. */
+.vgui-window--focused {
+  border-top-color: var(--vgui-bevel-light-strong);
+  border-left-color: var(--vgui-bevel-light-strong);
+}
+
+.vgui-window--maximized {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+}
+
+/* The caption strip: uppercase + 2px tracking is the theme's signature. */
+.vgui-window__titlebar {
+  display: flex;
+  align-items: center;
+  gap: var(--vgui-window-titlebar-gap);
+  height: var(--vgui-titlebar-height);
+  line-height: var(--vgui-titlebar-height);
+  margin-bottom: 1em;
+  cursor: move;
+  user-select: none;
+  touch-action: none;
+}
+
+/* The ring is the accessible default; `.vgui-crisp` opts into Valve's own. */
+.vgui-window__titlebar:focus-visible,
+.vgui-window__grip:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-window__titlebar:focus-visible,
+.vgui-crisp .vgui-window__grip:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+.vgui-window__icon {
+  flex: 0 0 auto;
+  width: var(--vgui-window-icon-size);
+  height: var(--vgui-window-icon-size);
+}
+
+/*
+ * The caption stays at `--vgui-text-strong` in both states on purpose. The
+ * states table dims it to `--vgui-text-muted`, but the accessibility section
+ * measures that at 3.0:1 over `--vgui-surface` — below AA for 12px text — and
+ * resolves the conflict: dim the glyphs, never the caption.
+ */
+.vgui-window__title {
+  flex: 1 1 auto;
+  text-transform: uppercase;
+  letter-spacing: var(--vgui-chrome-tracking);
+  font-size: var(--vgui-font-size-small);
+  font-weight: bold;
+  color: var(--vgui-text-strong);
+}
+
+.vgui-window__controls {
+  display: flex;
+  gap: var(--vgui-window-control-gap);
+}
+
+.vgui-window__control {
+  position: relative;
+  width: var(--vgui-frame-control-size);
+  height: var(--vgui-frame-control-size);
+  padding: 0;
+  /* Transparent rather than none — the box has to survive the hover bevel. */
+  border: var(--vgui-bevel-width) solid transparent;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+/*
+ * 20x20 is under the 24x24 minimum target size, so an invisible overlay grows
+ * the hit area without moving the glyph.
+ */
+.vgui-window__control::before {
+  content: '';
+  position: absolute;
+  inset: calc((var(--vgui-frame-control-size) - var(--vgui-min-target-size)) / 2);
+}
+
+.vgui-window__control:hover {
+  border-color: var(--vgui-bevel-light);
+}
+
+.vgui-window__control:active {
+  border-color: var(--vgui-bevel-dark);
+  background-color: var(--vgui-surface-light);
+}
+
+.vgui-window__control:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-window__control:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/*
+ * Glyphs are painted as a mask over `background-color`, so they follow the
+ * clay tokens under every theme variant instead of being baked into the data
+ * URI — a `data:` URI cannot read a CSS variable.
+ */
+.vgui-window__glyph {
+  display: block;
+  width: 7px;
+  height: 7px;
+  margin: 0 auto;
+  background-color: var(--vgui-clay-glyph-dim);
+  mask-image: none;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+
+.vgui-window--focused .vgui-window__glyph,
+.vgui-window__control:hover .vgui-window__glyph,
+.vgui-window__control:active .vgui-window__glyph {
+  background-color: var(--vgui-clay-glyph);
+}
+
+.vgui-window__glyph[data-glyph='minimize'] {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Crect x='0.5' y='3' width='6' height='1.5' fill='white'/%3E%3C/svg%3E");
+}
+
+.vgui-window__glyph[data-glyph='maximize'] {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Crect x='0.5' y='0.5' width='6' height='6' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
+}
+
+.vgui-window__glyph[data-glyph='restore'] {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M1.5 2.5 h4 v4 h-4 z' fill='none' stroke='white'/%3E%3Cpath d='M2.5 2.5 v-2 h3 v3' fill='none' stroke='white'/%3E%3C/svg%3E");
+}
+
+.vgui-window__glyph[data-glyph='close'] {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0.5 0.5 L6.5 6.5 M6.5 0.5 L0.5 6.5' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
+}
+
+.vgui-window__body {
+  min-width: 0;
+}
+
+/* `resizer` — three diagonal rules of the VGUI grip sprite. */
+.vgui-window__grip {
+  position: absolute;
+  right: var(--vgui-window-grip-offset);
+  bottom: var(--vgui-window-grip-offset);
+  width: var(--vgui-resize-grip);
+  height: var(--vgui-resize-grip);
+  cursor: nwse-resize;
+  background-color: var(--vgui-clay-glyph-dim);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11 1 L1 11 M11 5 L5 11 M11 9 L9 11' fill='none' stroke='white'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+
+.vgui-window__grip:hover,
+.vgui-window--focused .vgui-window__grip {
+  background-color: var(--vgui-clay-glyph);
+}
+
+/*
+ * Component-scoped copy of the house screen-reader-only helper, so the control
+ * names travel with the component rather than depending on a global stylesheet.
+ */
+.vgui-window .vgui-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/components/Window/Window.css.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/components/Window/Window.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import './Window.css';
+export interface WindowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onDrag'> {
+    /** Uppercase text in the title bar. */
+    title: ReactNode;
+    /** Optional 16px application glyph shown before the title. */
+    icon?: ReactNode;
+    /** Show the minimize control. */
+    minimizable?: boolean;
+    /** Show the maximize control. */
+    maximizable?: boolean;
+    /** Show the close control. */
+    closable?: boolean;
+    /** Show the bottom-right resize grip. */
+    resizable?: boolean;
+    /** Render the focused border and glyph colours. */
+    focused?: boolean;
+    /** Show the maximize glyph in its toggled state. */
+    maximized?: boolean;
+    /** Fires when a control is activated; `close` also fires on Escape. */
+    onAction?: (action: 'minimize' | 'maximize' | 'restore' | 'close') => void;
+    /** Called continuously while dragging the title bar, with the pointer delta. */
+    onDrag?: (deltaX: number, deltaY: number) => void;
+    /** Accessible label for the control group. */
+    controlsLabel?: string;
+    /** Native tooltip attribute — `title` is taken by the caption. */
+    tooltip?: string;
+}
+export declare const Window: import("react").ForwardRefExoticComponent<WindowProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Window.d.ts.map

package/dist/components/Window/Window.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Window.d.ts","sourceRoot":"","sources":["../../../src/components/Window/Window.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,cAAc,EAGd,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,OAAO,cAAc,CAAA;AAarB,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3F,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAA;IAChB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,KAAK,IAAI,CAAA;IAC1E,gFAAgF;IAChF,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,MAAM,wGAwLjB,CAAA"}