@dalcvil/steam-green-react 0.2.0 → 1.0.0

package/dist/components/Splitter/Splitter.css

@@ -0,0 +1,119 @@
+/*
+ * Green Steam splitter (`SplitterHandle` — a 3px recessed groove you drag).
+ *
+ * Two values in `docs/components/Splitter.md` have no token: the 3px groove
+ * width and the 8px invisible hit area, so both are local properties an
+ * application can widen without touching the component. The hit area is what
+ * keeps the 3px groove usable as a pointer target.
+ */
+
+.vgui-splitter {
+  --vgui-splitter-handle-size: 3px;
+  --vgui-splitter-hit-area: -8px;
+
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+}
+
+.vgui-splitter--horizontal {
+  grid-template-columns: var(--vgui-splitter-size, 1fr) var(--vgui-splitter-handle-size) 1fr;
+}
+
+.vgui-splitter--vertical {
+  grid-template-rows: var(--vgui-splitter-size, 1fr) var(--vgui-splitter-handle-size) 1fr;
+}
+
+.vgui-splitter__handle {
+  /* Positioned so its hit area and grip paint above the panes. */
+  position: relative;
+  background-color: var(--vgui-surface-dark);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  /* On the handle only — `touch-action` on the panes would break their scrolling. */
+  touch-action: none;
+  transition: background-color 100ms linear;
+}
+
+.vgui-splitter--horizontal .vgui-splitter__handle {
+  cursor: col-resize;
+}
+
+.vgui-splitter--vertical .vgui-splitter__handle {
+  cursor: row-resize;
+}
+
+.vgui-splitter__handle:hover,
+.vgui-splitter__handle[data-dragging='true'] {
+  background-color: var(--vgui-surface);
+}
+
+.vgui-splitter__handle[aria-disabled='true'] {
+  cursor: default;
+}
+
+/*
+ * A 3px groove is far below the 24x24 minimum target, so the pointer target is
+ * grown invisibly. It overlaps the panes by 8px on each side, which is the
+ * intended catch area next to the divider.
+ */
+.vgui-splitter__handle::before {
+  content: '';
+  position: absolute;
+  inset: var(--vgui-splitter-hit-area);
+}
+
+.vgui-splitter__handle:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-splitter__handle:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/* Three grip dots, centred on the groove. */
+.vgui-splitter__handle-grip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  background-image: radial-gradient(var(--vgui-bevel-light) 1px, transparent 1px);
+  background-size: 3px 3px;
+  background-position: center;
+}
+
+.vgui-splitter--horizontal .vgui-splitter__handle-grip {
+  width: 3px;
+  height: 7px;
+}
+
+.vgui-splitter--vertical .vgui-splitter__handle-grip {
+  width: 7px;
+  height: 3px;
+}
+
+/* The faithful bare groove: no dots at all. */
+.vgui-splitter--plain .vgui-splitter__handle-grip {
+  display: none;
+}
+
+/*
+ * `min-width: 0` / `min-height: 0` are load-bearing: grid items default to
+ * `min-width: auto`, so one long line of content would freeze the divider.
+ */
+.vgui-splitter__pane {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vgui-splitter__handle {
+    transition: none;
+  }
+}

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

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

package/dist/components/Splitter/Splitter.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import './Splitter.css';
+import '../../styles/scrollbars.css';
+export interface SplitterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Layout direction of the panes. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Size of the first pane: a percentage, or a number of pixels. Uncontrolled. */
+    defaultSize?: number | string;
+    /** Controlled size of the first pane. Pair with `onResize`. */
+    size?: number | string;
+    /** Called with the new size while dragging and after keyboard nudges. */
+    onResize?: (size: number | string) => void;
+    /** Smallest the first pane may become, in pixels. */
+    minSize?: number;
+    /** Largest the first pane may become, in pixels. */
+    maxSize?: number;
+    /** Accessible name; defaults to "Resize panel". */
+    label?: string;
+    /** Content for the first pane. */
+    first: ReactNode;
+    /** Content for the second pane. */
+    second: ReactNode;
+}
+export declare const Splitter: import("react").ForwardRefExoticComponent<SplitterProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Splitter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Splitter.d.ts","sourceRoot":"","sources":["../../../src/components/Splitter/Splitter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,cAAc,EAGd,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,OAAO,gBAAgB,CAAA;AACvB,OAAO,6BAA6B,CAAA;AAiCpC,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,qCAAqC;IACrC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC1C,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAA;IAChB,mCAAmC;IACnC,MAAM,EAAE,SAAS,CAAA;CAClB;AAED,eAAO,MAAM,QAAQ,0GAgPnB,CAAA"}

package/dist/components/Splitter/Splitter.js

@@ -0,0 +1,212 @@
+import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "../../styles/scrollbars.css";
+import "./Splitter.css";
+//#region src/components/Splitter/Splitter.tsx
+/** Arrow-key nudge in pixels; `Shift` drops to a single pixel. */
+var STEP = 10;
+var FINE_STEP = 1;
+function toPixels(value) {
+	if (typeof value === "number") return Number.isFinite(value) ? value : null;
+	if (typeof value === "string") {
+		const match = /^(-?\d+(?:\.\d+)?)px$/.exec(value.trim());
+		if (match) return Number(match[1]);
+	}
+	return null;
+}
+function toPercent(value) {
+	if (typeof value !== "string") return null;
+	const match = /^(-?\d+(?:\.\d+)?)%$/.exec(value.trim());
+	return match ? Number(match[1]) : null;
+}
+/** A number is a pixel count; a string is passed through, `%` included. */
+function toCssSize(value) {
+	return typeof value === "number" ? `${value}px` : value;
+}
+function clamp(value, min, max) {
+	let next = value;
+	if (min !== void 0) next = Math.max(next, min);
+	if (max !== void 0) next = Math.min(next, max);
+	return next;
+}
+var Splitter = forwardRef(function Splitter({ orientation = "horizontal", defaultSize, size, onResize, minSize, maxSize, label = "Resize panel", first, second, className, style, ...rest }, ref) {
+	const rootRef = useRef(null);
+	const [internalSize, setInternalSize] = useState(defaultSize);
+	const [extent, setExtent] = useState(0);
+	const draggingRef = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	const isControlled = size !== void 0;
+	const currentSize = isControlled ? size : internalSize;
+	const percent = toPercent(currentSize);
+	const pixels = toPixels(currentSize);
+	const ariaDisabled = rest["aria-disabled"];
+	const disabled = ariaDisabled === true || ariaDisabled === "true";
+	useLayoutEffect(() => {
+		const node = rootRef.current;
+		if (!node) return;
+		const measure = () => {
+			const rect = node.getBoundingClientRect();
+			setExtent(orientation === "horizontal" ? rect.width : rect.height);
+		};
+		measure();
+		window.addEventListener("resize", measure);
+		return () => window.removeEventListener("resize", measure);
+	}, [orientation]);
+	useEffect(() => {
+		if (!dragging) return;
+		const previous = document.body.style.userSelect;
+		document.body.style.userSelect = "none";
+		return () => {
+			document.body.style.userSelect = previous;
+		};
+	}, [dragging]);
+	const measureNow = () => {
+		const node = rootRef.current;
+		if (!node) return extent;
+		const rect = node.getBoundingClientRect();
+		const measured = orientation === "horizontal" ? rect.width : rect.height;
+		return measured > 0 ? measured : extent;
+	};
+	/**
+	* The gesture is always a pixel delta, so the current size has to become one.
+	* A pixel size always can; a percentage needs a laid-out container.
+	*/
+	const basePixels = () => {
+		if (pixels !== null) return pixels;
+		if (currentSize === void 0) {
+			const total = measureNow();
+			return total > 0 ? total / 2 : null;
+		}
+		if (percent !== null) {
+			const total = measureNow();
+			if (total > 0) return percent / 100 * total;
+		}
+		return null;
+	};
+	const commit = (next) => {
+		if (!isControlled) setInternalSize(next);
+		onResize?.(next);
+	};
+	const resizeBy = (delta) => {
+		const base = basePixels();
+		if (base === null) return;
+		commit(clamp(base + delta, minSize, maxSize));
+	};
+	const axisPosition = (event) => orientation === "horizontal" ? event.clientX : event.clientY;
+	const handlePointerDown = (event) => {
+		if (disabled || event.button !== 0) return;
+		draggingRef.current = {
+			origin: axisPosition(event),
+			base: basePixels()
+		};
+		setDragging(true);
+		if (typeof event.currentTarget.setPointerCapture === "function") event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const handlePointerMove = (event) => {
+		const drag = draggingRef.current;
+		if (!drag || drag.base === null) return;
+		commit(clamp(drag.base + (axisPosition(event) - drag.origin), minSize, maxSize));
+	};
+	const handlePointerUp = (event) => {
+		if (!draggingRef.current) return;
+		draggingRef.current = null;
+		setDragging(false);
+		const target = event.currentTarget;
+		if (typeof target.hasPointerCapture === "function" && target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+	};
+	const handleKeyDown = (event) => {
+		if (disabled) return;
+		const increase = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+		const decrease = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+		const step = event.shiftKey ? FINE_STEP : STEP;
+		let handled = true;
+		if (event.key === increase) resizeBy(step);
+		else if (event.key === decrease) resizeBy(-step);
+		else if (event.key === "Home") {
+			const base = minSize ?? 0;
+			if (!isControlled) setInternalSize(base);
+			onResize?.(base);
+		} else if (event.key === "End") {
+			const base = maxSize ?? measureNow();
+			if (base > 0) {
+				if (!isControlled) setInternalSize(base);
+				onResize?.(base);
+			}
+		} else handled = false;
+		if (handled) event.preventDefault();
+	};
+	let valueNow;
+	let valueMin;
+	let valueMax;
+	let valueText;
+	if (percent !== null) {
+		valueMin = extent > 0 && minSize !== void 0 ? Math.round(minSize / extent * 100) : 0;
+		valueMax = extent > 0 && maxSize !== void 0 ? Math.round(maxSize / extent * 100) : 100;
+		valueNow = Math.round(clamp(percent, valueMin, valueMax));
+		valueText = `${valueNow} percent`;
+	} else if (pixels !== null) {
+		valueMin = Math.round(minSize ?? 0);
+		valueMax = Math.round(maxSize ?? (extent > 0 ? extent : Math.max(pixels, valueMin)));
+		valueNow = Math.round(clamp(pixels, valueMin, valueMax));
+		valueText = `${valueNow} pixels`;
+	} else {
+		valueMin = 0;
+		valueMax = 100;
+		valueNow = 50;
+		valueText = "50 percent";
+	}
+	const sizeStyle = currentSize === void 0 ? void 0 : { "--vgui-splitter-size": toCssSize(currentSize) };
+	const classes = ["vgui-splitter", `vgui-splitter--${orientation}`];
+	if (className) classes.push(className);
+	const setRoot = (node) => {
+		rootRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setRoot,
+		className: classes.join(" "),
+		style: {
+			...sizeStyle,
+			...style
+		},
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "vgui-splitter__pane vgui-splitter__pane--first vgui-scroll-surface",
+				children: first
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "vgui-splitter__handle",
+				role: "separator",
+				tabIndex: disabled ? -1 : 0,
+				"aria-label": label,
+				"aria-orientation": orientation === "horizontal" ? "vertical" : "horizontal",
+				"aria-disabled": disabled ? true : void 0,
+				"aria-valuenow": valueNow,
+				"aria-valuemin": valueMin,
+				"aria-valuemax": valueMax,
+				"aria-valuetext": valueText,
+				"data-dragging": dragging ? "true" : void 0,
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: handlePointerUp,
+				onPointerCancel: handlePointerUp,
+				onKeyDown: handleKeyDown,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "vgui-splitter__handle-grip",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "vgui-splitter__pane vgui-splitter__pane--second vgui-scroll-surface",
+				children: second
+			})
+		]
+	});
+});
+Splitter.displayName = "Splitter";
+//#endregion
+export { Splitter };
+
+//# sourceMappingURL=Splitter.js.map

package/dist/components/Splitter/Splitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Splitter.js","names":[],"sources":["../../../src/components/Splitter/Splitter.tsx"],"sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport type {\n  CSSProperties,\n  HTMLAttributes,\n  KeyboardEvent as ReactKeyboardEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n} from 'react'\n\nimport './Splitter.css'\nimport '../../styles/scrollbars.css'\n\n/** Arrow-key nudge in pixels; `Shift` drops to a single pixel. */\nconst STEP = 10\nconst FINE_STEP = 1\n\nfunction toPixels(value: number | string | undefined): number | null {\n  if (typeof value === 'number') return Number.isFinite(value) ? value : null\n  if (typeof value === 'string') {\n    const match = /^(-?\\d+(?:\\.\\d+)?)px$/.exec(value.trim())\n    if (match) return Number(match[1])\n  }\n  return null\n}\n\nfunction toPercent(value: number | string | undefined): number | null {\n  if (typeof value !== 'string') return null\n  const match = /^(-?\\d+(?:\\.\\d+)?)%$/.exec(value.trim())\n  return match ? Number(match[1]) : null\n}\n\n/** A number is a pixel count; a string is passed through, `%` included. */\nfunction toCssSize(value: number | string): string {\n  return typeof value === 'number' ? `${value}px` : value\n}\n\nfunction clamp(value: number, min?: number, max?: number): number {\n  let next = value\n  if (min !== undefined) next = Math.max(next, min)\n  if (max !== undefined) next = Math.min(next, max)\n  return next\n}\n\nexport interface SplitterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Layout direction of the panes. */\n  orientation?: 'horizontal' | 'vertical'\n  /** Size of the first pane: a percentage, or a number of pixels. Uncontrolled. */\n  defaultSize?: number | string\n  /** Controlled size of the first pane. Pair with `onResize`. */\n  size?: number | string\n  /** Called with the new size while dragging and after keyboard nudges. */\n  onResize?: (size: number | string) => void\n  /** Smallest the first pane may become, in pixels. */\n  minSize?: number\n  /** Largest the first pane may become, in pixels. */\n  maxSize?: number\n  /** Accessible name; defaults to \"Resize panel\". */\n  label?: string\n  /** Content for the first pane. */\n  first: ReactNode\n  /** Content for the second pane. */\n  second: ReactNode\n}\n\nexport const Splitter = forwardRef<HTMLDivElement, SplitterProps>(function Splitter(\n  {\n    orientation = 'horizontal',\n    defaultSize,\n    size,\n    onResize,\n    minSize,\n    maxSize,\n    label = 'Resize panel',\n    first,\n    second,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const [internalSize, setInternalSize] = useState<number | string | undefined>(defaultSize)\n  const [extent, setExtent] = useState(0)\n  const draggingRef = useRef<{ origin: number; base: number | null } | null>(null)\n  const [dragging, setDragging] = useState(false)\n\n  const isControlled = size !== undefined\n  const currentSize = isControlled ? size : internalSize\n  const percent = toPercent(currentSize)\n  const pixels = toPixels(currentSize)\n\n  /*\n   * `aria-disabled` is the documented way to switch the handle off, so it is\n   * mirrored onto the handle (where the widget lives) instead of being passed\n   * through to the container only.\n   */\n  const ariaDisabled = rest['aria-disabled']\n  const disabled = ariaDisabled === true || ariaDisabled === 'true'\n\n  /*\n   * jsdom has no layout engine, so every measurement path has to survive a\n   * zero-sized rect: `extent` stays 0 and pixel sizes simply cannot be turned\n   * into proportions, which is exactly what the guards below fall back on.\n   */\n  useLayoutEffect(() => {\n    const node = rootRef.current\n    if (!node) return\n\n    const measure = () => {\n      const rect = node.getBoundingClientRect()\n      setExtent(orientation === 'horizontal' ? rect.width : rect.height)\n    }\n\n    measure()\n    window.addEventListener('resize', measure)\n    return () => window.removeEventListener('resize', measure)\n  }, [orientation])\n\n  useEffect(() => {\n    if (!dragging) return\n\n    const previous = document.body.style.userSelect\n    document.body.style.userSelect = 'none'\n    return () => {\n      document.body.style.userSelect = previous\n    }\n  }, [dragging])\n\n  const measureNow = () => {\n    const node = rootRef.current\n    if (!node) return extent\n    const rect = node.getBoundingClientRect()\n    const measured = orientation === 'horizontal' ? rect.width : rect.height\n    return measured > 0 ? measured : extent\n  }\n\n  /**\n   * The gesture is always a pixel delta, so the current size has to become one.\n   * A pixel size always can; a percentage needs a laid-out container.\n   */\n  const basePixels = (): number | null => {\n    if (pixels !== null) return pixels\n    if (currentSize === undefined) {\n      const total = measureNow()\n      return total > 0 ? total / 2 : null\n    }\n    if (percent !== null) {\n      const total = measureNow()\n      if (total > 0) return (percent / 100) * total\n    }\n    return null\n  }\n\n  const commit = (next: number) => {\n    if (!isControlled) setInternalSize(next)\n    onResize?.(next)\n  }\n\n  const resizeBy = (delta: number) => {\n    const base = basePixels()\n    if (base === null) return\n    commit(clamp(base + delta, minSize, maxSize))\n  }\n\n  const axisPosition = (event: ReactPointerEvent<HTMLDivElement>) =>\n    orientation === 'horizontal' ? event.clientX : event.clientY\n\n  const handlePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (disabled || event.button !== 0) return\n\n    // An unresolvable base (jsdom, or an unmeasurable percentage) leaves the\n    // gesture live but makes every move a no-op, mirroring the keyboard.\n    draggingRef.current = { origin: axisPosition(event), base: basePixels() }\n    setDragging(true)\n\n    if (typeof event.currentTarget.setPointerCapture === 'function') {\n      event.currentTarget.setPointerCapture(event.pointerId)\n    }\n  }\n\n  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const drag = draggingRef.current\n    if (!drag || drag.base === null) return\n\n    commit(clamp(drag.base + (axisPosition(event) - drag.origin), minSize, maxSize))\n  }\n\n  const handlePointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!draggingRef.current) return\n\n    draggingRef.current = null\n    setDragging(false)\n\n    const target = event.currentTarget\n    if (typeof target.hasPointerCapture === 'function' && target.hasPointerCapture(event.pointerId)) {\n      target.releasePointerCapture(event.pointerId)\n    }\n  }\n\n  /* Drag-only resizing is a WCAG 2.1.1 failure, so the separator is a widget. */\n  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return\n\n    const increase = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n    const decrease = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n    const step = event.shiftKey ? FINE_STEP : STEP\n\n    let handled = true\n\n    if (event.key === increase) resizeBy(step)\n    else if (event.key === decrease) resizeBy(-step)\n    else if (event.key === 'Home') {\n      const base = minSize ?? 0\n      if (!isControlled) setInternalSize(base)\n      onResize?.(base)\n    } else if (event.key === 'End') {\n      const base = maxSize ?? measureNow()\n      if (base > 0) {\n        if (!isControlled) setInternalSize(base)\n        onResize?.(base)\n      }\n    } else handled = false\n\n    if (handled) event.preventDefault()\n  }\n\n  /*\n   * Two scales, never mixed: a percentage size is a proportion of an unknown\n   * container, so min/max are converted only when the container can be\n   * measured. A pixel size reports pixels, and an undeclared size is the\n   * `1fr / 1fr` default — an even half.\n   */\n  let valueNow: number\n  let valueMin: number\n  let valueMax: number\n  let valueText: string\n\n  if (percent !== null) {\n    valueMin = extent > 0 && minSize !== undefined ? Math.round((minSize / extent) * 100) : 0\n    valueMax = extent > 0 && maxSize !== undefined ? Math.round((maxSize / extent) * 100) : 100\n    valueNow = Math.round(clamp(percent, valueMin, valueMax))\n    valueText = `${valueNow} percent`\n  } else if (pixels !== null) {\n    valueMin = Math.round(minSize ?? 0)\n    valueMax = Math.round(maxSize ?? (extent > 0 ? extent : Math.max(pixels, valueMin)))\n    valueNow = Math.round(clamp(pixels, valueMin, valueMax))\n    valueText = `${valueNow} pixels`\n  } else {\n    valueMin = 0\n    valueMax = 100\n    valueNow = 50\n    valueText = '50 percent'\n  }\n\n  const sizeStyle =\n    currentSize === undefined\n      ? undefined\n      : ({ '--vgui-splitter-size': toCssSize(currentSize) } as unknown as CSSProperties)\n\n  const classes = ['vgui-splitter', `vgui-splitter--${orientation}`]\n  if (className) classes.push(className)\n\n  const setRoot = (node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof ref === 'function') ref(node)\n    else if (ref) ref.current = node\n  }\n\n  return (\n    <div\n      ref={setRoot}\n      className={classes.join(' ')}\n      style={{ ...sizeStyle, ...style }}\n      {...rest}\n    >\n      <div className=\"vgui-splitter__pane vgui-splitter__pane--first vgui-scroll-surface\">{first}</div>\n      <div\n        className=\"vgui-splitter__handle\"\n        role=\"separator\"\n        tabIndex={disabled ? -1 : 0}\n        aria-label={label}\n        /*\n         * The separator's own orientation, per ARIA — a horizontal split has a\n         * vertical bar between the panes. It is also what the arrow keys follow.\n         */\n        aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n        aria-disabled={disabled ? true : undefined}\n        aria-valuenow={valueNow}\n        aria-valuemin={valueMin}\n        aria-valuemax={valueMax}\n        aria-valuetext={valueText}\n        data-dragging={dragging ? 'true' : undefined}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={handlePointerUp}\n        onKeyDown={handleKeyDown}\n      >\n        <span className=\"vgui-splitter__handle-grip\" aria-hidden=\"true\" />\n      </div>\n      <div className=\"vgui-splitter__pane vgui-splitter__pane--second vgui-scroll-surface\">{second}</div>\n    </div>\n  )\n})\n\nSplitter.displayName = 'Splitter'\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export { Splitter } from './Splitter';
+export type { SplitterProps } from './Splitter';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/StatusBar/StatusBar.css

@@ -0,0 +1,97 @@
+/*
+ * Green Steam status bar.
+ *
+ * A 28px strip: a `StatusLabel`, an optional slim progress bar, and nothing
+ * else (docs/components/StatusBar.md). The strip is chrome — `flex: none` so it
+ * never scrolls away with the content.
+ *
+ * The slim bar is `SlimProgressBar`, not `ProgressBar`: one flat `fill()` call
+ * in the corpus, so a single `background-color` here. Give it a bevel and a 3px
+ * bar has a 1px interior.
+ *
+ * The fill also carries a non-colour boundary cue (`--vgui-bevel-light-strong`
+ * on its leading edge) because the fill/trough pair measures 2.77:1 and the 3px
+ * height compounds it (docs/components/StatusBar.md, Accessibility).
+ *
+ * Component-local metrics are declared here per foundations.md §4; palette
+ * tokens are referenced bare.
+ */
+
+.vgui-status-bar {
+  --vgui-status-bar-height: 28px;
+  --vgui-status-bar-progress-width: 300px;
+  --vgui-status-bar-progress-height: 3px;
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center; /* the corpus places both children centred */
+  gap: 8px;
+  min-block-size: var(--vgui-status-bar-height);
+  padding-block: 0;
+  padding-inline: 8px;
+  background-color: var(--vgui-surface);
+  border-block-start: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  color: var(--vgui-text-muted);
+  font: inherit;
+  font-size: var(--vgui-font-size);
+  flex: none;
+}
+
+/* The slim bar — one flat fill, no bevel, no stripes. */
+.vgui-status-bar__progress {
+  box-sizing: border-box;
+  flex: none;
+  inline-size: var(--vgui-status-bar-progress-width);
+  block-size: var(--vgui-status-bar-progress-height);
+  overflow: hidden;
+  background-color: var(--vgui-surface-dark);
+  border: 0; /* barinset=0 */
+}
+
+.vgui-status-bar__progress > * {
+  box-sizing: border-box;
+  block-size: 100%;
+  background-color: var(--vgui-accent-darker);
+  border-inline-end: var(--vgui-bevel-width) solid var(--vgui-bevel-light-strong);
+}
+
+/* The 3px bar conveys nothing to a low-vision user, so the percentage is text. */
+.vgui-status-bar__value {
+  flex: none;
+  font-size: var(--vgui-font-size-small);
+}
+
+/*
+ * Multi-field strip: the "bottom strip of status fields" case. Same height, same
+ * separator, children laid out in a row.
+ */
+.vgui-status-bar--fields {
+  justify-content: flex-start;
+  gap: 16px;
+}
+
+.vgui-status-bar--fields > *:last-child {
+  margin-inline-start: auto;
+}
+
+/*
+ * `--message-only` is the default layout with the progress region omitted, so
+ * the modifier declares nothing itself; it is emitted so a caller can target the
+ * state.
+ */
+.vgui-status-bar--left {
+  justify-content: flex-start;
+}
+
+.vgui-status-bar--left .vgui-status-bar__message {
+  min-inline-size: 16ch; /* reserved so the bar does not slide as text changes */
+}
+
+.vgui-status-bar--compact {
+  --vgui-status-bar-height: 20px;
+}
+
+.vgui-status-bar--error .vgui-status-bar__message {
+  color: var(--vgui-danger);
+}

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

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

package/dist/components/StatusBar/StatusBar.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import './StatusBar.css';
+export interface StatusBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** The status message. Rendered through StatusLabel (uppercase by default). */
+    message?: ReactNode;
+    /** Progress 0–100. Omit to hide the bar entirely. */
+    value?: number;
+    /** Render the progress region as indeterminate instead of a bar. */
+    busy?: boolean;
+    /** Turn the message into a link, as every corpus status string is. */
+    href?: string;
+    /** Left-align instead of centring the message and bar. */
+    align?: 'center' | 'left';
+    /** Show the numeric percentage beside the bar. */
+    showValue?: boolean;
+    /** Actionable failure state. Pairs with a details affordance. */
+    error?: boolean;
+    /** Compact 20px strip. */
+    compact?: boolean;
+}
+export declare const StatusBar: import("react").ForwardRefExoticComponent<StatusBarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=StatusBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../src/components/StatusBar/StatusBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtD,OAAO,iBAAiB,CAAA;AAExB,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,+EAA+E;IAC/E,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0DAA0D;IAC1D,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IACzB,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,SAAS,2GAkEpB,CAAA"}

package/dist/components/StatusBar/StatusBar.js

@@ -0,0 +1,56 @@
+import { Spinner } from "../Spinner/Spinner.js";
+import { StatusLabel } from "../StatusLabel/StatusLabel.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./StatusBar.css";
+//#region src/components/StatusBar/StatusBar.tsx
+var StatusBar = forwardRef(function StatusBar({ className, message, value, busy = false, href, align = "center", showValue = false, error = false, compact = false, children, ...rest }, ref) {
+	const messageId = useId();
+	const hasChildren = children !== void 0 && children !== null;
+	const hasMessage = message !== void 0 && message !== null;
+	const hasBar = !busy && value !== void 0;
+	const percent = Math.min(100, Math.max(0, value ?? 0));
+	const classes = ["vgui-status-bar"];
+	if (hasMessage && !busy && value === void 0) classes.push("vgui-status-bar--message-only");
+	if (align === "left") classes.push("vgui-status-bar--left");
+	if (compact) classes.push("vgui-status-bar--compact");
+	if (hasChildren) classes.push("vgui-status-bar--fields");
+	if (error) classes.push("vgui-status-bar--error");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "contentinfo",
+		className: classes.join(" "),
+		...rest,
+		children: [
+			hasMessage && /* @__PURE__ */ jsx(StatusLabel, {
+				className: "vgui-status-bar__message",
+				id: messageId,
+				href,
+				live: "polite",
+				children: message
+			}),
+			children,
+			busy && /* @__PURE__ */ jsx(Spinner, {}),
+			hasBar && /* @__PURE__ */ jsx("div", {
+				className: "vgui-status-bar__progress",
+				role: "progressbar",
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": percent,
+				"aria-labelledby": hasMessage ? messageId : void 0,
+				"aria-label": hasMessage ? void 0 : "Progress",
+				children: /* @__PURE__ */ jsx("div", { style: { width: `${percent}%` } })
+			}),
+			hasBar && showValue && /* @__PURE__ */ jsxs("span", {
+				className: "vgui-status-bar__value",
+				children: [percent, "%"]
+			})
+		]
+	});
+});
+StatusBar.displayName = "StatusBar";
+//#endregion
+export { StatusBar };
+
+//# sourceMappingURL=StatusBar.js.map

package/dist/components/StatusBar/StatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.js","names":[],"sources":["../../../src/components/StatusBar/StatusBar.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\n\nimport { Spinner } from '../Spinner'\nimport { StatusLabel } from '../StatusLabel'\n\nimport './StatusBar.css'\n\nexport interface StatusBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** The status message. Rendered through StatusLabel (uppercase by default). */\n  message?: ReactNode\n  /** Progress 0–100. Omit to hide the bar entirely. */\n  value?: number\n  /** Render the progress region as indeterminate instead of a bar. */\n  busy?: boolean\n  /** Turn the message into a link, as every corpus status string is. */\n  href?: string\n  /** Left-align instead of centring the message and bar. */\n  align?: 'center' | 'left'\n  /** Show the numeric percentage beside the bar. */\n  showValue?: boolean\n  /** Actionable failure state. Pairs with a details affordance. */\n  error?: boolean\n  /** Compact 20px strip. */\n  compact?: boolean\n}\n\nexport const StatusBar = forwardRef<HTMLDivElement, StatusBarProps>(function StatusBar(\n  {\n    className,\n    message,\n    value,\n    busy = false,\n    href,\n    align = 'center',\n    showValue = false,\n    error = false,\n    compact = false,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const messageId = useId()\n  const hasChildren = children !== undefined && children !== null\n  const hasMessage = message !== undefined && message !== null\n  const hasBar = !busy && value !== undefined\n  const percent = Math.min(100, Math.max(0, value ?? 0))\n\n  const classes = ['vgui-status-bar']\n  if (hasMessage && !busy && value === undefined) classes.push('vgui-status-bar--message-only')\n  if (align === 'left') classes.push('vgui-status-bar--left')\n  if (compact) classes.push('vgui-status-bar--compact')\n  if (hasChildren) classes.push('vgui-status-bar--fields')\n  if (error) classes.push('vgui-status-bar--error')\n  if (className) classes.push(className)\n\n  return (\n    <div ref={ref} role=\"contentinfo\" className={classes.join(' ')} {...rest}>\n      {hasMessage && (\n        <StatusLabel\n          className=\"vgui-status-bar__message\"\n          id={messageId}\n          href={href}\n          live=\"polite\"\n        >\n          {message}\n        </StatusLabel>\n      )}\n\n      {children}\n\n      {busy && <Spinner />}\n\n      {hasBar && (\n        <div\n          className=\"vgui-status-bar__progress\"\n          role=\"progressbar\"\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={percent}\n          aria-labelledby={hasMessage ? messageId : undefined}\n          aria-label={hasMessage ? undefined : 'Progress'}\n        >\n          <div style={{ width: `${percent}%` }} />\n        </div>\n      )}\n\n      {hasBar && showValue && (\n        <span className=\"vgui-status-bar__value\">{percent}%</span>\n      )}\n    </div>\n  )\n})\n\nStatusBar.displayName = 'StatusBar'\n"],"mappings":";;;;;;AA2BA,IAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,WACA,SACA,OACA,OAAO,OACP,MACA,QAAQ,UACR,YAAY,OACZ,QAAQ,OACR,UAAU,OACV,UACA,GAAG,QAEL,KACA;CACA,MAAM,YAAY,MAAM;CACxB,MAAM,cAAc,aAAa,KAAA,KAAa,aAAa;CAC3D,MAAM,aAAa,YAAY,KAAA,KAAa,YAAY;CACxD,MAAM,SAAS,CAAC,QAAQ,UAAU,KAAA;CAClC,MAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,SAAS,CAAC,CAAC;CAErD,MAAM,UAAU,CAAC,iBAAiB;CAClC,IAAI,cAAc,CAAC,QAAQ,UAAU,KAAA,GAAW,QAAQ,KAAK,+BAA+B;CAC5F,IAAI,UAAU,QAAQ,QAAQ,KAAK,uBAAuB;CAC1D,IAAI,SAAS,QAAQ,KAAK,0BAA0B;CACpD,IAAI,aAAa,QAAQ,KAAK,yBAAyB;CACvD,IAAI,OAAO,QAAQ,KAAK,wBAAwB;CAChD,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,qBAAC,OAAD;EAAU;EAAK,MAAK;EAAc,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;EAApE,UAAA;GACG,cACC,oBAAC,aAAD;IACE,WAAU;IACV,IAAI;IACE;IACN,MAAK;IAEJ,UAAA;GACU,CAAA;GAGd;GAEA,QAAQ,oBAAC,SAAD,CAAU,CAAA;GAElB,UACC,oBAAC,OAAD;IACE,WAAU;IACV,MAAK;IACL,iBAAe;IACf,iBAAe;IACf,iBAAe;IACf,mBAAiB,aAAa,YAAY,KAAA;IAC1C,cAAY,aAAa,KAAA,IAAY;IAErC,UAAA,oBAAC,OAAD,EAAK,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,EAAI,CAAA;GACpC,CAAA;GAGN,UAAU,aACT,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAA0C,SAAQ,GAAO;;EAExD;;AAET,CAAC;AAED,UAAU,cAAc"}

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

@@ -0,0 +1,3 @@
+export { StatusBar } from './StatusBar';
+export type { StatusBarProps } from './StatusBar';
+//# sourceMappingURL=index.d.ts.map

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

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