@dalcvil/steam-green-react 0.1.0 → 1.0.0

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,534 @@
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import "./ColorPicker.css";
+//#region src/components/ColorPicker/ColorPicker.tsx
+var DEFAULT_PALETTE = [
+	{
+		name: "GreenBG",
+		value: "#4C5844"
+	},
+	{
+		name: "LightGreenBG",
+		value: "#5A6A50"
+	},
+	{
+		name: "DarkGreenBG",
+		value: "#3E4637"
+	},
+	{
+		name: "BorderBright",
+		value: "#899281"
+	},
+	{
+		name: "BorderDark",
+		value: "#292D23"
+	},
+	{
+		name: "ShadeLighter",
+		value: "#B8C4AD"
+	},
+	{
+		name: "OffWhite",
+		value: "#D8DED3"
+	},
+	{
+		name: "White",
+		value: "#FFFFFF"
+	},
+	{
+		name: "Label",
+		value: "#A0AA95"
+	},
+	{
+		name: "DimListText",
+		value: "#758666"
+	},
+	{
+		name: "DisabledText1",
+		value: "#75806F"
+	},
+	{
+		name: "DisabledText2",
+		value: "#282E22"
+	},
+	{
+		name: "Maize",
+		value: "#C4B550"
+	},
+	{
+		name: "MaizeBG",
+		value: "#91863C"
+	},
+	{
+		name: "Selection",
+		value: "#96892D"
+	},
+	{
+		name: "NavHover",
+		value: "#E3E41F"
+	},
+	{
+		name: "Link",
+		value: "#AAAAAA"
+	},
+	{
+		name: "FullGreen",
+		value: "#7EA64B"
+	},
+	{
+		name: "Success",
+		value: "#1AE225"
+	},
+	{
+		name: "Warning",
+		value: "#C4B550"
+	},
+	{
+		name: "Danger",
+		value: "#E2251A"
+	},
+	{
+		name: "Info",
+		value: "#0900FF"
+	},
+	{
+		name: "PingLow",
+		value: "#6A1610"
+	},
+	{
+		name: "PingMedium",
+		value: "#91863C"
+	},
+	{
+		name: "PingHigh",
+		value: "#4C5844"
+	},
+	{
+		name: "FriendsSelected",
+		value: "#111111"
+	},
+	{
+		name: "FriendsIgnored",
+		value: "#F86C4F"
+	},
+	{
+		name: "FriendsAvatarOver",
+		value: "#FFFFFF"
+	},
+	{
+		name: "ClayBG",
+		value: "#464646"
+	},
+	{
+		name: "LightClayBG",
+		value: "#686A65"
+	},
+	{
+		name: "LightClayButtonBG",
+		value: "#7D8078"
+	},
+	{
+		name: "ClaySheetBottom",
+		value: "#5C5957"
+	},
+	{
+		name: "DarkClayBG",
+		value: "#2F312D"
+	},
+	{
+		name: "ClayLightGreen",
+		value: "#ADB5A8"
+	},
+	{
+		name: "ClayDimLightGreen",
+		value: "#A6ACA2"
+	},
+	{
+		name: "BorderSelection",
+		value: "#000000"
+	}
+];
+var HEX_PATTERN = /^#([0-9a-f]{6}|[0-9a-f]{8})$/i;
+var isHex = (value) => HEX_PATTERN.test(value);
+var normalizeHex = (value) => value.toUpperCase();
+var rgbHex = (value) => value.slice(0, 7).toUpperCase();
+var alphaOf = (value) => value.length === 9 ? parseInt(value.slice(7, 9), 16) : 255;
+var withAlpha = (value, alpha) => `${rgbHex(value)}${Math.round(alpha).toString(16).padStart(2, "0").toUpperCase()}`;
+var channelsOf = (value) => [
+	1,
+	3,
+	5
+].map((i) => parseInt(value.slice(i, i + 2), 16) / 255);
+var toHsv = (value) => {
+	const [r, g, b] = channelsOf(value);
+	const max = Math.max(r, g, b);
+	const delta = max - Math.min(r, g, b);
+	let h = 0;
+	if (delta !== 0) {
+		if (max === r) h = (g - b) / delta % 6;
+		else if (max === g) h = (b - r) / delta + 2;
+		else h = (r - g) / delta + 4;
+		h *= 60;
+		if (h < 0) h += 360;
+	}
+	return {
+		h,
+		s: max === 0 ? 0 : delta / max,
+		v: max
+	};
+};
+var fromHsv = ({ h, s, v }) => {
+	const c = v * s;
+	const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+	const m = v - c;
+	const [r, g, b] = [
+		[
+			c,
+			x,
+			0
+		],
+		[
+			x,
+			c,
+			0
+		],
+		[
+			0,
+			c,
+			x
+		],
+		[
+			0,
+			x,
+			c
+		],
+		[
+			x,
+			0,
+			c
+		],
+		[
+			c,
+			0,
+			x
+		]
+	][Math.min(5, Math.floor(h / 60))];
+	const channel = (n) => Math.round((n + m) * 255).toString(16).padStart(2, "0").toUpperCase();
+	return `#${channel(r)}${channel(g)}${channel(b)}`;
+};
+var instance = 0;
+var ColorPicker = forwardRef(function ColorPicker({ className, style, value, onValueChange, palette = DEFAULT_PALETTE, hex = false, continuous = false, alpha = false, columns = 12, swatchOnly = false, inline = false, disabled = false, "aria-label": ariaLabel, ...rest }, ref) {
+	const fallback = palette[0]?.value ?? "#4C5844";
+	const [internal, setInternal] = useState(() => normalizeHex(value ?? fallback));
+	const current = normalizeHex(value ?? internal);
+	const [ids] = useState(() => {
+		instance += 1;
+		return {
+			panel: `vgui-color-picker-${instance}-panel`,
+			listbox: `vgui-color-picker-${instance}-grid`,
+			option: (index) => `vgui-color-picker-${instance}-swatch-${index}`
+		};
+	});
+	const selectedIndex = palette.findIndex((entry) => normalizeHex(entry.value) === current);
+	const [open, setOpen] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(() => selectedIndex >= 0 ? selectedIndex : 0);
+	const [hexDraft, setHexDraft] = useState(current);
+	const [seen, setSeen] = useState(current);
+	const [pending, setPending] = useState(null);
+	const [hsv, setHsv] = useState(() => toHsv(current));
+	if (seen !== current) {
+		setSeen(current);
+		setHexDraft(current);
+		setHsv(toHsv(current));
+	}
+	const display = pending ?? current;
+	const shownAlpha = alphaOf(display);
+	const hsvAlpha = alphaOf(current);
+	const hueHex = fromHsv({
+		h: hsv.h,
+		s: 1,
+		v: 1
+	});
+	const commit = (next) => {
+		const normalized = normalizeHex(next);
+		if (normalized === current) return;
+		if (value === void 0) setInternal(normalized);
+		onValueChange?.(normalized);
+	};
+	const applySliderValue = (event, next) => {
+		setPending(next);
+		if (event.nativeEvent.type === "change") {
+			setPending(null);
+			commit(next);
+		}
+	};
+	const rootRef = useRef(null);
+	const listboxRef = useRef(null);
+	const triggerRef = useRef(null);
+	const restoreFocus = useRef(true);
+	const wasOpen = useRef(false);
+	const setRefs = (node) => {
+		rootRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	useEffect(() => {
+		if (open) {
+			wasOpen.current = true;
+			listboxRef.current?.focus();
+			return;
+		}
+		if (wasOpen.current) {
+			wasOpen.current = false;
+			if (restoreFocus.current) triggerRef.current?.focus();
+		}
+		restoreFocus.current = true;
+	}, [open]);
+	const openPanel = () => {
+		setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+		setOpen(true);
+	};
+	const closePanel = () => setOpen(false);
+	const choose = (index) => {
+		const entry = palette[index];
+		if (!entry || disabled) return;
+		commit(compose(entry.value));
+		if (!inline) closePanel();
+	};
+	const moveTo = (index) => setActiveIndex(Math.max(0, Math.min(palette.length - 1, index)));
+	const compose = (hex) => alpha && hsvAlpha < 255 ? withAlpha(hex, hsvAlpha) : normalizeHex(hex);
+	const handleGridKeyDown = (event) => {
+		switch (event.key) {
+			case "ArrowRight":
+				event.preventDefault();
+				moveTo(activeIndex + 1);
+				break;
+			case "ArrowLeft":
+				event.preventDefault();
+				moveTo(activeIndex - 1);
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				moveTo(activeIndex + columns);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				moveTo(activeIndex - columns);
+				break;
+			case "Home":
+				event.preventDefault();
+				moveTo(0);
+				break;
+			case "End":
+				event.preventDefault();
+				moveTo(palette.length - 1);
+				break;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				choose(activeIndex);
+				break;
+			case "Escape":
+				event.preventDefault();
+				closePanel();
+				break;
+			case "Tab":
+				restoreFocus.current = false;
+				closePanel();
+		}
+	};
+	const handleTriggerKeyDown = (event) => {
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			openPanel();
+		} else if (event.key === "Escape" && open) {
+			event.preventDefault();
+			closePanel();
+		}
+	};
+	const commitHex = () => {
+		if (!isHex(hexDraft)) return;
+		commit(hexDraft);
+	};
+	const handleHexChange = (event) => {
+		setHexDraft(event.currentTarget.value.trim());
+	};
+	const handleHexKeyDown = (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			commitHex();
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			setHexDraft(current);
+		}
+	};
+	const classes = ["vgui-color-picker"];
+	if (hex) classes.push("vgui-color-picker--hex");
+	if (continuous) classes.push("vgui-color-picker--continuous");
+	if (alpha) classes.push("vgui-color-picker--alpha");
+	if (swatchOnly) classes.push("vgui-color-picker--swatch-only");
+	if (inline) classes.push("vgui-color-picker--inline");
+	if (className) classes.push(className);
+	const rootStyle = {
+		...style,
+		"--vgui-color-picker-columns": columns
+	};
+	const swatch = /* @__PURE__ */ jsx("span", {
+		className: "vgui-color-picker__swatch",
+		style: { "--vgui-swatch": display },
+		"data-alpha": shownAlpha < 255 ? "true" : void 0
+	});
+	const grid = /* @__PURE__ */ jsx("div", {
+		ref: listboxRef,
+		id: inline ? void 0 : ids.listbox,
+		className: "vgui-color-picker__grid",
+		role: "listbox",
+		"aria-label": "Colour palette",
+		"aria-activedescendant": ids.option(activeIndex),
+		tabIndex: 0,
+		onKeyDown: handleGridKeyDown,
+		children: palette.map((entry, index) => /* @__PURE__ */ jsx("div", {
+			id: ids.option(index),
+			className: "vgui-color-picker__option",
+			role: "option",
+			"aria-label": entry.name,
+			"aria-selected": normalizeHex(entry.value) === current,
+			"aria-disabled": disabled || void 0,
+			"data-active": index === activeIndex ? "true" : void 0,
+			"data-alpha": alphaOf(entry.value) < 255 ? "true" : void 0,
+			title: entry.name,
+			style: { "--vgui-option-color": entry.value },
+			onClick: () => choose(index)
+		}, `${entry.name}-${index}`))
+	});
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		continuous ? /* @__PURE__ */ jsxs("div", {
+			className: "vgui-color-picker__continuous",
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					className: "vgui-color-picker__slider vgui-color-picker__hue",
+					type: "range",
+					min: 0,
+					max: 359,
+					step: 1,
+					"aria-label": "Hue",
+					value: Math.round(hsv.h),
+					disabled,
+					onChange: (event) => {
+						const next = {
+							...hsv,
+							h: Number(event.currentTarget.value)
+						};
+						setHsv(next);
+						applySliderValue(event, compose(fromHsv(next)));
+					}
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "vgui-color-picker__sv",
+					"aria-hidden": "true",
+					style: { "--vgui-hue": hueHex }
+				}),
+				/* @__PURE__ */ jsx("input", {
+					className: "vgui-color-picker__slider vgui-color-picker__sv-saturation",
+					type: "range",
+					min: 0,
+					max: 100,
+					step: 1,
+					"aria-label": "Saturation",
+					value: Math.round(hsv.s * 100),
+					disabled,
+					onChange: (event) => {
+						const next = {
+							...hsv,
+							s: Number(event.currentTarget.value) / 100
+						};
+						setHsv(next);
+						applySliderValue(event, compose(fromHsv(next)));
+					}
+				}),
+				/* @__PURE__ */ jsx("input", {
+					className: "vgui-color-picker__slider vgui-color-picker__sv-value",
+					type: "range",
+					min: 0,
+					max: 100,
+					step: 1,
+					"aria-label": "Brightness",
+					value: Math.round(hsv.v * 100),
+					disabled,
+					onChange: (event) => {
+						const next = {
+							...hsv,
+							v: Number(event.currentTarget.value) / 100
+						};
+						setHsv(next);
+						applySliderValue(event, compose(fromHsv(next)));
+					}
+				})
+			]
+		}) : null,
+		alpha ? /* @__PURE__ */ jsx("input", {
+			className: "vgui-color-picker__slider vgui-color-picker__alpha",
+			type: "range",
+			min: 0,
+			max: 255,
+			step: 1,
+			"aria-label": "Alpha",
+			"aria-valuetext": `${Math.round(shownAlpha / 255 * 100)}%`,
+			value: shownAlpha,
+			disabled,
+			onChange: (event) => applySliderValue(event, withAlpha(display, Number(event.currentTarget.value)))
+		}) : null,
+		hex ? /* @__PURE__ */ jsx("input", {
+			className: "vgui-color-picker__hex",
+			type: "text",
+			"aria-label": "Hex colour",
+			"aria-invalid": isHex(hexDraft) ? void 0 : true,
+			spellCheck: false,
+			value: hexDraft,
+			disabled,
+			onChange: handleHexChange,
+			onKeyDown: handleHexKeyDown,
+			onBlur: commitHex
+		}) : null
+	] });
+	return /* @__PURE__ */ jsx("div", {
+		ref: setRefs,
+		className: classes.join(" "),
+		style: rootStyle,
+		...rest,
+		children: inline ? /* @__PURE__ */ jsxs(Fragment$1, { children: [grid, controls] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+			ref: triggerRef,
+			type: "button",
+			className: "vgui-color-picker__trigger",
+			"aria-label": ariaLabel,
+			"aria-haspopup": "dialog",
+			"aria-expanded": open,
+			"aria-controls": ids.panel,
+			disabled,
+			onClick: () => open ? closePanel() : openPanel(),
+			onKeyDown: handleTriggerKeyDown,
+			children: [
+				swatch,
+				swatchOnly ? null : /* @__PURE__ */ jsx("span", {
+					className: "vgui-color-picker__label",
+					children: display
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "vgui-color-picker__arrow",
+					"aria-hidden": "true"
+				})
+			]
+		}), open ? /* @__PURE__ */ jsxs("div", {
+			id: ids.panel,
+			className: "vgui-color-picker__panel",
+			role: "dialog",
+			"aria-label": "Colour palette",
+			children: [grid, controls]
+		}) : null] })
+	});
+});
+ColorPicker.displayName = "ColorPicker";
+//#endregion
+export { ColorPicker };
+
+//# sourceMappingURL=ColorPicker.js.map

package/dist/components/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState, forwardRef } from 'react'\nimport type {\n  ChangeEvent as ReactChangeEvent,\n  CSSProperties,\n  HTMLAttributes,\n  KeyboardEvent as ReactKeyboardEvent,\n} from 'react'\n\nimport './ColorPicker.css'\n\n/*\n * The palette is `foundations.md` §3 — the theme's own token table, which is\n * the corpus's colour list (`steamscheme.res:10-71`). These are data, not\n * styling: they are handed to CSS as custom properties, which is why they are\n * literal hex strings rather than `var()` references.\n */\nconst DEFAULT_PALETTE: Array<{ name: string; value: string }> = [\n  { name: 'GreenBG', value: '#4C5844' },\n  { name: 'LightGreenBG', value: '#5A6A50' },\n  { name: 'DarkGreenBG', value: '#3E4637' },\n  { name: 'BorderBright', value: '#899281' },\n  { name: 'BorderDark', value: '#292D23' },\n  { name: 'ShadeLighter', value: '#B8C4AD' },\n  { name: 'OffWhite', value: '#D8DED3' },\n  { name: 'White', value: '#FFFFFF' },\n  { name: 'Label', value: '#A0AA95' },\n  { name: 'DimListText', value: '#758666' },\n  { name: 'DisabledText1', value: '#75806F' },\n  { name: 'DisabledText2', value: '#282E22' },\n  { name: 'Maize', value: '#C4B550' },\n  { name: 'MaizeBG', value: '#91863C' },\n  { name: 'Selection', value: '#96892D' },\n  { name: 'NavHover', value: '#E3E41F' },\n  { name: 'Link', value: '#AAAAAA' },\n  { name: 'FullGreen', value: '#7EA64B' },\n  { name: 'Success', value: '#1AE225' },\n  { name: 'Warning', value: '#C4B550' },\n  { name: 'Danger', value: '#E2251A' },\n  { name: 'Info', value: '#0900FF' },\n  { name: 'PingLow', value: '#6A1610' },\n  { name: 'PingMedium', value: '#91863C' },\n  { name: 'PingHigh', value: '#4C5844' },\n  { name: 'FriendsSelected', value: '#111111' },\n  { name: 'FriendsIgnored', value: '#F86C4F' },\n  { name: 'FriendsAvatarOver', value: '#FFFFFF' },\n  { name: 'ClayBG', value: '#464646' },\n  { name: 'LightClayBG', value: '#686A65' },\n  { name: 'LightClayButtonBG', value: '#7D8078' },\n  { name: 'ClaySheetBottom', value: '#5C5957' },\n  { name: 'DarkClayBG', value: '#2F312D' },\n  { name: 'ClayLightGreen', value: '#ADB5A8' },\n  { name: 'ClayDimLightGreen', value: '#A6ACA2' },\n  { name: 'BorderSelection', value: '#000000' },\n]\n\n/* The corpus writes alpha as a fourth component (`\"0 0 0 128\"`), so it is part\n * of the value grammar even though the theme barely uses it. */\nconst HEX_PATTERN = /^#([0-9a-f]{6}|[0-9a-f]{8})$/i\n\nconst isHex = (value: string) => HEX_PATTERN.test(value)\n\nconst normalizeHex = (value: string) => value.toUpperCase()\n\nconst rgbHex = (value: string) => value.slice(0, 7).toUpperCase()\n\nconst alphaOf = (value: string) => (value.length === 9 ? parseInt(value.slice(7, 9), 16) : 255)\n\nconst withAlpha = (value: string, alpha: number) =>\n  `${rgbHex(value)}${Math.round(alpha).toString(16).padStart(2, '0').toUpperCase()}`\n\nconst channelsOf = (value: string) => [1, 3, 5].map((i) => parseInt(value.slice(i, i + 2), 16) / 255)\n\nconst toHsv = (value: string) => {\n  const [r, g, b] = channelsOf(value)\n  const max = Math.max(r, g, b)\n  const min = Math.min(r, g, b)\n  const delta = max - min\n  let h = 0\n  if (delta !== 0) {\n    if (max === r) h = ((g - b) / delta) % 6\n    else if (max === g) h = (b - r) / delta + 2\n    else h = (r - g) / delta + 4\n    h *= 60\n    if (h < 0) h += 360\n  }\n  return { h, s: max === 0 ? 0 : delta / max, v: max }\n}\n\nconst fromHsv = ({ h, s, v }: { h: number; s: number; v: number }) => {\n  const c = v * s\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\n  const m = v - c\n  const segments = [\n    [c, x, 0],\n    [x, c, 0],\n    [0, c, x],\n    [0, x, c],\n    [x, 0, c],\n    [c, 0, x],\n  ]\n  const [r, g, b] = segments[Math.min(5, Math.floor(h / 60))]\n  const channel = (n: number) =>\n    Math.round((n + m) * 255)\n      .toString(16)\n      .padStart(2, '0')\n      .toUpperCase()\n\n  return `#${channel(r)}${channel(g)}${channel(b)}`\n}\n\nlet instance = 0\n\nexport interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current colour as `#RRGGBB` or `#RRGGBBAA`. */\n  value?: string\n  /** Called with the new colour when the user commits a choice. */\n  onValueChange?: (value: string) => void\n  /** Palette to show. Defaults to the scheme's named colours. */\n  palette?: Array<{ name: string; value: string }>\n  /** Show the hex text input beside the grid. */\n  hex?: boolean\n  /** Add a hue strip and saturation/value square. Not period-accurate. */\n  continuous?: boolean\n  /** Allow alpha editing. */\n  alpha?: boolean\n  /** Grid columns. 12 fits the scheme palette in three tidy rows. */\n  columns?: number\n  /** Render the swatch alone, with no hex label in the trigger. */\n  swatchOnly?: boolean\n  /** Grid always visible; no trigger or panel. */\n  inline?: boolean\n  /** Disable the control and the panel. */\n  disabled?: boolean\n}\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(function ColorPicker(\n  {\n    className,\n    style,\n    value,\n    onValueChange,\n    palette = DEFAULT_PALETTE,\n    hex = false,\n    continuous = false,\n    alpha = false,\n    columns = 12,\n    swatchOnly = false,\n    inline = false,\n    disabled = false,\n    'aria-label': ariaLabel,\n    ...rest\n  },\n  ref,\n) {\n  const fallback = palette[0]?.value ?? '#4C5844'\n  const [internal, setInternal] = useState(() => normalizeHex(value ?? fallback))\n  const current = normalizeHex(value ?? internal)\n\n  const [ids] = useState(() => {\n    instance += 1\n    return {\n      panel: `vgui-color-picker-${instance}-panel`,\n      listbox: `vgui-color-picker-${instance}-grid`,\n      option: (index: number) => `vgui-color-picker-${instance}-swatch-${index}`,\n    }\n  })\n\n  const selectedIndex = palette.findIndex((entry) => normalizeHex(entry.value) === current)\n\n  const [open, setOpen] = useState(false)\n  const [activeIndex, setActiveIndex] = useState(() => (selectedIndex >= 0 ? selectedIndex : 0))\n\n  /* The hex field and the sliders own their text until the value is valid. */\n  const [hexDraft, setHexDraft] = useState(current)\n  const [seen, setSeen] = useState(current)\n\n  /*\n   * A live preview: a drag emits `input` continuously, so the value is only\n   * committed when the interaction ends and the `change` event arrives, as the\n   * doc's accessibility notes require.\n   */\n  const [pending, setPending] = useState<string | null>(null)\n  const [hsv, setHsv] = useState(() => toHsv(current))\n\n  if (seen !== current) {\n    setSeen(current)\n    setHexDraft(current)\n    setHsv(toHsv(current))\n  }\n\n  const display = pending ?? current\n  const shownAlpha = alphaOf(display)\n  const hsvAlpha = alphaOf(current)\n  const hueHex = fromHsv({ h: hsv.h, s: 1, v: 1 })\n\n  const commit = (next: string) => {\n    const normalized = normalizeHex(next)\n    if (normalized === current) return\n    if (value === undefined) setInternal(normalized)\n    onValueChange?.(normalized)\n  }\n\n  /*\n   * React maps `onChange` on a range input to both the `input` and the `change`\n   * event; only the latter is the commit point. The intermediate value still\n   * paints, so the swatch follows the drag.\n   */\n  const applySliderValue = (event: ReactChangeEvent<HTMLInputElement>, next: string) => {\n    setPending(next)\n    if (event.nativeEvent.type === 'change') {\n      setPending(null)\n      commit(next)\n    }\n  }\n\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const listboxRef = useRef<HTMLDivElement | null>(null)\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const restoreFocus = useRef(true)\n  const wasOpen = useRef(false)\n\n  const setRefs = (node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof ref === 'function') ref(node)\n    else if (ref) (ref as { current: HTMLDivElement | null }).current = node\n  }\n\n  useEffect(() => {\n    if (open) {\n      wasOpen.current = true\n      listboxRef.current?.focus()\n      return\n    }\n    if (wasOpen.current) {\n      wasOpen.current = false\n      if (restoreFocus.current) triggerRef.current?.focus()\n    }\n    restoreFocus.current = true\n  }, [open])\n\n  const openPanel = () => {\n    setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0)\n    setOpen(true)\n  }\n\n  const closePanel = () => setOpen(false)\n\n  const choose = (index: number) => {\n    const entry = palette[index]\n    if (!entry || disabled) return\n    /* An edited alpha carries across palette picks; a full alpha does not. */\n    commit(compose(entry.value))\n    if (!inline) closePanel()\n  }\n\n  const moveTo = (index: number) => setActiveIndex(Math.max(0, Math.min(palette.length - 1, index)))\n\n  /* Alpha only survives a change when the control is actually editing it, so a\n   * picker without `alpha` keeps emitting 6-digit values. */\n  const compose = (hex: string) => (alpha && hsvAlpha < 255 ? withAlpha(hex, hsvAlpha) : normalizeHex(hex))\n\n  const handleGridKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case 'ArrowRight':\n        event.preventDefault()\n        moveTo(activeIndex + 1)\n        break\n      case 'ArrowLeft':\n        event.preventDefault()\n        moveTo(activeIndex - 1)\n        break\n      case 'ArrowDown':\n        event.preventDefault()\n        moveTo(activeIndex + columns)\n        break\n      case 'ArrowUp':\n        event.preventDefault()\n        moveTo(activeIndex - columns)\n        break\n      case 'Home':\n        event.preventDefault()\n        moveTo(0)\n        break\n      case 'End':\n        event.preventDefault()\n        moveTo(palette.length - 1)\n        break\n      case 'Enter':\n      case ' ':\n        event.preventDefault()\n        choose(activeIndex)\n        break\n      case 'Escape':\n        event.preventDefault()\n        closePanel()\n        break\n      case 'Tab':\n        /* Not a focus trap: the panel simply closes and focus moves on. */\n        restoreFocus.current = false\n        closePanel()\n        break\n      default:\n        break\n    }\n  }\n\n  const handleTriggerKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault()\n      openPanel()\n    } else if (event.key === 'Escape' && open) {\n      event.preventDefault()\n      closePanel()\n    }\n  }\n\n  const commitHex = () => {\n    if (!isHex(hexDraft)) return\n    commit(hexDraft)\n  }\n\n  const handleHexChange = (event: ReactChangeEvent<HTMLInputElement>) => {\n    setHexDraft(event.currentTarget.value.trim())\n  }\n\n  const handleHexKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') {\n      event.preventDefault()\n      commitHex()\n    } else if (event.key === 'Escape') {\n      event.preventDefault()\n      setHexDraft(current)\n    }\n  }\n\n  const classes = ['vgui-color-picker']\n  if (hex) classes.push('vgui-color-picker--hex')\n  if (continuous) classes.push('vgui-color-picker--continuous')\n  if (alpha) classes.push('vgui-color-picker--alpha')\n  if (swatchOnly) classes.push('vgui-color-picker--swatch-only')\n  if (inline) classes.push('vgui-color-picker--inline')\n  if (className) classes.push(className)\n\n  const rootStyle = {\n    ...style,\n    '--vgui-color-picker-columns': columns,\n  } as CSSProperties\n\n  const swatch = (\n    <span\n      className=\"vgui-color-picker__swatch\"\n      style={{ '--vgui-swatch': display } as CSSProperties}\n      data-alpha={shownAlpha < 255 ? 'true' : undefined}\n    />\n  )\n\n  const grid = (\n    <div\n      ref={listboxRef}\n      id={inline ? undefined : ids.listbox}\n      className=\"vgui-color-picker__grid\"\n      role=\"listbox\"\n      aria-label=\"Colour palette\"\n      aria-activedescendant={ids.option(activeIndex)}\n      tabIndex={0}\n      onKeyDown={handleGridKeyDown}\n    >\n      {palette.map((entry, index) => (\n        <div\n          key={`${entry.name}-${index}`}\n          id={ids.option(index)}\n          className=\"vgui-color-picker__option\"\n          role=\"option\"\n          aria-label={entry.name}\n          aria-selected={normalizeHex(entry.value) === current}\n          aria-disabled={disabled || undefined}\n          data-active={index === activeIndex ? 'true' : undefined}\n          data-alpha={alphaOf(entry.value) < 255 ? 'true' : undefined}\n          title={entry.name}\n          style={{ '--vgui-option-color': entry.value } as CSSProperties}\n          onClick={() => choose(index)}\n        />\n      ))}\n    </div>\n  )\n\n  const controls = (\n    <>\n      {continuous ? (\n        <div className=\"vgui-color-picker__continuous\">\n          <input\n            className=\"vgui-color-picker__slider vgui-color-picker__hue\"\n            type=\"range\"\n            min={0}\n            max={359}\n            step={1}\n            aria-label=\"Hue\"\n            value={Math.round(hsv.h)}\n            disabled={disabled}\n            onChange={(event) => {\n              const next = { ...hsv, h: Number(event.currentTarget.value) }\n              setHsv(next)\n              applySliderValue(event, compose(fromHsv(next)))\n            }}\n          />\n          {/* The square is a data visualisation; the two sliders below it are\n              the operable controls, which is what the a11y notes require. */}\n          <div className=\"vgui-color-picker__sv\" aria-hidden=\"true\" style={{ '--vgui-hue': hueHex } as CSSProperties} />\n          <input\n            className=\"vgui-color-picker__slider vgui-color-picker__sv-saturation\"\n            type=\"range\"\n            min={0}\n            max={100}\n            step={1}\n            aria-label=\"Saturation\"\n            value={Math.round(hsv.s * 100)}\n            disabled={disabled}\n            onChange={(event) => {\n              const next = { ...hsv, s: Number(event.currentTarget.value) / 100 }\n              setHsv(next)\n              applySliderValue(event, compose(fromHsv(next)))\n            }}\n          />\n          <input\n            className=\"vgui-color-picker__slider vgui-color-picker__sv-value\"\n            type=\"range\"\n            min={0}\n            max={100}\n            step={1}\n            aria-label=\"Brightness\"\n            value={Math.round(hsv.v * 100)}\n            disabled={disabled}\n            onChange={(event) => {\n              const next = { ...hsv, v: Number(event.currentTarget.value) / 100 }\n              setHsv(next)\n              applySliderValue(event, compose(fromHsv(next)))\n            }}\n          />\n        </div>\n      ) : null}\n\n      {alpha ? (\n        <input\n          className=\"vgui-color-picker__slider vgui-color-picker__alpha\"\n          type=\"range\"\n          min={0}\n          max={255}\n          step={1}\n          aria-label=\"Alpha\"\n          aria-valuetext={`${Math.round((shownAlpha / 255) * 100)}%`}\n          value={shownAlpha}\n          disabled={disabled}\n          onChange={(event) => applySliderValue(event, withAlpha(display, Number(event.currentTarget.value)))}\n        />\n      ) : null}\n\n      {hex ? (\n        <input\n          className=\"vgui-color-picker__hex\"\n          type=\"text\"\n          aria-label=\"Hex colour\"\n          aria-invalid={isHex(hexDraft) ? undefined : true}\n          spellCheck={false}\n          value={hexDraft}\n          disabled={disabled}\n          onChange={handleHexChange}\n          onKeyDown={handleHexKeyDown}\n          onBlur={commitHex}\n        />\n      ) : null}\n    </>\n  )\n\n  return (\n    <div\n      ref={setRefs}\n      className={classes.join(' ')}\n      style={rootStyle}\n      {...rest}\n    >\n      {inline ? (\n        <>\n          {grid}\n          {controls}\n        </>\n      ) : (\n        <>\n          <button\n            ref={triggerRef}\n            type=\"button\"\n            className=\"vgui-color-picker__trigger\"\n            aria-label={ariaLabel}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            aria-controls={ids.panel}\n            disabled={disabled}\n            onClick={() => (open ? closePanel() : openPanel())}\n            onKeyDown={handleTriggerKeyDown}\n          >\n            {swatch}\n            {swatchOnly ? null : <span className=\"vgui-color-picker__label\">{display}</span>}\n            <span className=\"vgui-color-picker__arrow\" aria-hidden=\"true\" />\n          </button>\n          {open ? (\n            <div\n              id={ids.panel}\n              className=\"vgui-color-picker__panel\"\n              role=\"dialog\"\n              aria-label=\"Colour palette\"\n            >\n              {grid}\n              {controls}\n            </div>\n          ) : null}\n        </>\n      )}\n    </div>\n  )\n})\n\nColorPicker.displayName = 'ColorPicker'\n"],"mappings":"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"}

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

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

package/dist/components/{GreenButton → ColorPicker}/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GreenButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/Console/Console.css

@@ -0,0 +1,96 @@
+/*
+ * Green Steam console.
+ *
+ * There is no `Console` block in `steam.styles`: the console *is* a RichText
+ * (docs/components/Console.md), so it takes the recessed frame and the
+ * `DarkGreenBG` interior from RichText and adds exactly two things — a 12px
+ * monospace family (the theme's only non-`basefont` text) and a per-line colour.
+ *
+ * Live output is `Text` (#A0AA95), scrollback is `White`, and errors are
+ * `Highlight3`, which is `--vgui-console-error` in `src/styles/tokens.css`.
+ *
+ * Component-local metrics are declared here per foundations.md §4; shared
+ * palette tokens are referenced bare.
+ */
+
+.vgui-console {
+  --vgui-console-font: var(--vgui-font-mono);
+  --vgui-console-font-size: var(--vgui-font-size-small);
+  --vgui-console-line-height: 1.35;
+  --vgui-console-bg: var(--vgui-surface-dark); /* DarkGreenBG */
+  --vgui-console-text: var(--vgui-text-muted); /* Text, steam.styles:57 */
+  --vgui-console-history-text: var(--vgui-text-strong); /* White */
+  --vgui-console-selection-bg: var(--vgui-accent-dark); /* MaizeBG */
+  --vgui-console-inset: var(--vgui-richtext-inset, 6px);
+  --vgui-console-error-prefix: 'ERR: ';
+
+  box-sizing: border-box;
+  /* Inverted bevel: top/left dark, bottom/right lit — the recessed orientation
+     RichText shares with ListPanel. */
+  border-block-start: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-inline-start: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-inline-end: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-block-end: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  padding: var(--vgui-console-inset);
+  overflow-y: auto;
+  background-color: var(--vgui-console-bg);
+  color: var(--vgui-console-text);
+  font-family: var(--vgui-console-font);
+  font-size: var(--vgui-console-font-size);
+  line-height: var(--vgui-console-line-height);
+}
+
+/*
+ * The container is `tabindex="0"` so the log can be scrolled with the keyboard,
+ * which makes it focusable and therefore in need of a ring. Nothing here traps
+ * the keyboard: `Ctrl+C` on selected text must keep working.
+ */
+.vgui-console:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-console__history {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.vgui-console__line {
+  color: var(--vgui-console-text);
+  /* Console output is column-aligned by the engine, so whitespace is meaningful
+     — but a 4000-character server-supplied token must still not overflow. */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* CConsoleHistory is White; console_text is Text. Two colours, one console. */
+.vgui-console__line--history {
+  color: var(--vgui-console-history-text);
+}
+
+/* Highlight3 fails contrast on this fill (1.74:1), so the colour is never the
+   only signal: an error line also carries a glyph. Non-colour cue, WCAG 1.4.1.
+   The prefix is CSS so that `lines` stays a plain data array. */
+.vgui-console__line--error {
+  color: var(--vgui-console-error);
+}
+
+.vgui-console__line--error::before {
+  content: var(--vgui-console-error-prefix);
+}
+
+/* Opt-out for a consumer that supplies its own prefix or localises it. */
+.vgui-console--no-error-prefix .vgui-console__line--error::before {
+  content: none;
+}
+
+/*
+ * `CConsoleHistory` declares no `selectedbgcolor`, so scrollback selection keeps
+ * the platform highlight — reproduced by simply not styling it. The live styles
+ * do set MaizeBG, and maize takes dark text (foundations.md §10, baseline 1).
+ */
+.vgui-console__line:not(.vgui-console__line--history)::selection {
+  background-color: var(--vgui-console-selection-bg);
+  color: var(--vgui-selection-text);
+}