@dalcvil/steam-green-react 0.2.0 → 1.0.0

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

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

package/dist/components/Console/Console.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'react';
+import './Console.css';
+import '../../styles/scrollbars.css';
+export type ConsoleLineKind = 'text' | 'error' | 'history';
+export interface ConsoleLine {
+    /** Stable identity; also the React key. */
+    id: string;
+    /** The log text, rendered verbatim including whitespace. */
+    text: string;
+    /** Drives the colour: Text, Highlight3, or White for history. */
+    kind: ConsoleLineKind;
+}
+export interface ConsoleProps extends HTMLAttributes<HTMLDivElement> {
+    /** Lines in display order, oldest first. */
+    lines: ConsoleLine[];
+    /** Accessible name, e.g. "Server console". */
+    label: string;
+    /** Scroll to the newest line when it is appended. */
+    follow?: boolean;
+    /** Maximum retained lines before the oldest are dropped. */
+    maxLines?: number;
+    /** Text prefixed to error lines so the failure is not colour-only; set to '' to disable. */
+    errorPrefix?: string;
+}
+export declare const Console: import("react").ForwardRefExoticComponent<ConsoleProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Console.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Console.d.ts","sourceRoot":"","sources":["../../../src/components/Console/Console.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAA;AAE1D,OAAO,eAAe,CAAA;AACtB,OAAO,6BAA6B,CAAA;AAEpC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;AAE1D,MAAM,WAAW,WAAW;IAC1B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAA;IACV,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAA;IACZ,iEAAiE;IACjE,IAAI,EAAE,eAAe,CAAA;CACtB;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,4CAA4C;IAC5C,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAA;IACb,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4FAA4F;IAC5F,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,OAAO,yGA6ElB,CAAA"}

package/dist/components/Console/Console.js

@@ -0,0 +1,59 @@
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import "../../styles/scrollbars.css";
+import "./Console.css";
+//#region src/components/Console/Console.tsx
+var Console = forwardRef(function Console({ className, lines, label, follow = false, maxLines, errorPrefix = "ERR: ", style, ...rest }, ref) {
+	const scrollRef = useRef(null);
+	const setRef = useCallback((node) => {
+		scrollRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const retained = maxLines === void 0 || lines.length <= maxLines ? lines : lines.slice(lines.length - Math.max(0, maxLines));
+	const newestId = retained[retained.length - 1]?.id;
+	useEffect(() => {
+		if (!follow) return;
+		const node = scrollRef.current;
+		if (node === null) return;
+		node.scrollTop = node.scrollHeight;
+	}, [
+		follow,
+		newestId,
+		retained.length
+	]);
+	const classes = ["vgui-console", "vgui-scroll-surface"];
+	if (errorPrefix === "") classes.push("vgui-console--no-error-prefix");
+	if (className) classes.push(className);
+	const inlineStyle = {
+		...style,
+		"--vgui-console-error-prefix": JSON.stringify(errorPrefix)
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: setRef,
+		role: "log",
+		"aria-live": "polite",
+		"aria-label": label,
+		tabIndex: 0,
+		className: classes.join(" "),
+		style: inlineStyle,
+		...rest,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "vgui-console__history",
+			children: retained.map((line) => {
+				const lineClasses = ["vgui-console__line"];
+				if (line.kind === "error") lineClasses.push("vgui-console__line--error");
+				if (line.kind === "history") lineClasses.push("vgui-console__line--history");
+				return /* @__PURE__ */ jsx("li", {
+					className: lineClasses.join(" "),
+					children: line.text
+				}, line.id);
+			})
+		})
+	});
+});
+Console.displayName = "Console";
+//#endregion
+export { Console };
+
+//# sourceMappingURL=Console.js.map

package/dist/components/Console/Console.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Console.js","names":[],"sources":["../../../src/components/Console/Console.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useRef } from 'react'\nimport type { CSSProperties, HTMLAttributes } from 'react'\n\nimport './Console.css'\nimport '../../styles/scrollbars.css'\n\nexport type ConsoleLineKind = 'text' | 'error' | 'history'\n\nexport interface ConsoleLine {\n  /** Stable identity; also the React key. */\n  id: string\n  /** The log text, rendered verbatim including whitespace. */\n  text: string\n  /** Drives the colour: Text, Highlight3, or White for history. */\n  kind: ConsoleLineKind\n}\n\nexport interface ConsoleProps extends HTMLAttributes<HTMLDivElement> {\n  /** Lines in display order, oldest first. */\n  lines: ConsoleLine[]\n  /** Accessible name, e.g. \"Server console\". */\n  label: string\n  /** Scroll to the newest line when it is appended. */\n  follow?: boolean\n  /** Maximum retained lines before the oldest are dropped. */\n  maxLines?: number\n  /** Text prefixed to error lines so the failure is not colour-only; set to '' to disable. */\n  errorPrefix?: string\n}\n\nexport const Console = forwardRef<HTMLDivElement, ConsoleProps>(function Console(\n  {\n    className,\n    lines,\n    label,\n    follow = false,\n    maxLines,\n    errorPrefix = 'ERR: ',\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const scrollRef = useRef<HTMLDivElement | null>(null)\n\n  const setRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      scrollRef.current = node\n      if (typeof ref === 'function') {\n        ref(node)\n      } else if (ref) {\n        ref.current = node\n      }\n    },\n    [ref],\n  )\n\n  // `maxLines` is an addition the corpus does not describe: an unbounded log is\n  // an unbounded DOM.\n  const retained =\n    maxLines === undefined || lines.length <= maxLines\n      ? lines\n      : lines.slice(lines.length - Math.max(0, maxLines))\n  const newestId = retained[retained.length - 1]?.id\n\n  useEffect(() => {\n    if (!follow) return\n    const node = scrollRef.current\n    if (node === null) return\n    node.scrollTop = node.scrollHeight\n  }, [follow, newestId, retained.length])\n\n  const classes = ['vgui-console', 'vgui-scroll-surface']\n  if (errorPrefix === '') classes.push('vgui-console--no-error-prefix')\n  if (className) classes.push(className)\n\n  const inlineStyle = {\n    ...style,\n    '--vgui-console-error-prefix': JSON.stringify(errorPrefix),\n  } as CSSProperties\n\n  return (\n    <div\n      ref={setRef}\n      role=\"log\"\n      aria-live=\"polite\"\n      aria-label={label}\n      tabIndex={0}\n      className={classes.join(' ')}\n      style={inlineStyle}\n      {...rest}\n    >\n      <ol className=\"vgui-console__history\">\n        {retained.map((line) => {\n          const lineClasses = ['vgui-console__line']\n          if (line.kind === 'error') lineClasses.push('vgui-console__line--error')\n          if (line.kind === 'history') lineClasses.push('vgui-console__line--history')\n\n          return (\n            <li key={line.id} className={lineClasses.join(' ')}>\n              {line.text}\n            </li>\n          )\n        })}\n      </ol>\n    </div>\n  )\n})\n\nConsole.displayName = 'Console'\n"],"mappings":";;;;;AA8BA,IAAa,UAAU,WAAyC,SAAS,QACvE,EACE,WACA,OACA,OACA,SAAS,OACT,UACA,cAAc,SACd,OACA,GAAG,QAEL,KACA;CACA,MAAM,YAAY,OAA8B,IAAI;CAEpD,MAAM,SAAS,aACZ,SAAgC;EAC/B,UAAU,UAAU;EACpB,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAI,UAAU;CAElB,GACA,CAAC,GAAG,CACN;CAIA,MAAM,WACJ,aAAa,KAAA,KAAa,MAAM,UAAU,WACtC,QACA,MAAM,MAAM,MAAM,SAAS,KAAK,IAAI,GAAG,QAAQ,CAAC;CACtD,MAAM,WAAW,SAAS,SAAS,SAAS,EAAE,EAAE;CAEhD,gBAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,OAAO,UAAU;EACvB,IAAI,SAAS,MAAM;EACnB,KAAK,YAAY,KAAK;CACxB,GAAG;EAAC;EAAQ;EAAU,SAAS;CAAM,CAAC;CAEtC,MAAM,UAAU,CAAC,gBAAgB,qBAAqB;CACtD,IAAI,gBAAgB,IAAI,QAAQ,KAAK,+BAA+B;CACpE,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,MAAM,cAAc;EAClB,GAAG;EACH,+BAA+B,KAAK,UAAU,WAAW;CAC3D;CAEA,OACE,oBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,aAAU;EACV,cAAY;EACZ,UAAU;EACV,WAAW,QAAQ,KAAK,GAAG;EAC3B,OAAO;EACP,GAAI;EAEJ,UAAA,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,SAAS,KAAK,SAAS;IACtB,MAAM,cAAc,CAAC,oBAAoB;IACzC,IAAI,KAAK,SAAS,SAAS,YAAY,KAAK,2BAA2B;IACvE,IAAI,KAAK,SAAS,WAAW,YAAY,KAAK,6BAA6B;IAE3E,OACE,oBAAC,MAAD;KAAkB,WAAW,YAAY,KAAK,GAAG;KAC9C,UAAA,KAAK;IACJ,GAFK,KAAK,EAEV;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET,CAAC;AAED,QAAQ,cAAc"}

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

@@ -0,0 +1,3 @@
+export { Console } from './Console';
+export type { ConsoleLine, ConsoleLineKind, ConsoleProps } from './Console';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Dialog/Dialog.css

@@ -0,0 +1,137 @@
+/*
+ * Dialog — the VGUI `MessageBox` / modal frame.
+ *
+ * The dialog is a `Window` with modal semantics, so the frame's look (bevel,
+ * title bar, clay controls) comes from Window.css. Everything here is the part
+ * a message box adds: the dimming scrim, the four MessageBox shapes and the
+ * button row.
+ *
+ * `tokens.css` has no scrim, z-index or dialog-sizing tokens, so those values
+ * are declared as component-local custom properties on the two root classes.
+ * They are part of this component's public styling surface: set them on
+ * `.vgui-dialog-overlay` / `.vgui-dialog` to retheme without touching a token.
+ */
+
+.vgui-dialog-overlay {
+  --vgui-dialog-scrim: rgb(0 0 0 / 0.5);
+  --vgui-dialog-z-index: 900;
+
+  position: fixed;
+  inset: 0;
+  /*
+   * The scrim is decoration: it takes no focus, and centring the frame keeps
+   * the only way to hit it a click outside the frame.
+   */
+  display: grid;
+  place-items: center;
+  outline: none;
+  background-color: var(--vgui-dialog-scrim);
+  z-index: var(--vgui-dialog-z-index);
+}
+
+/*
+ * `.vgui-dialog` lands on the same element as Window's own `.vgui-window`, so
+ * the two selectors are written as one compound selector: the dialog owns the
+ * layout (a capped-height column) no matter which stylesheet a bundler emits
+ * first.
+ */
+.vgui-window.vgui-dialog {
+  --vgui-dialog-min-width: 320px;
+  --vgui-dialog-max-width: min(90vw, 640px);
+  --vgui-dialog-max-height: 90vh;
+  --vgui-dialog-footer-gap: 8px;
+  --vgui-dialog-footer-padding: 12px;
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: var(--vgui-dialog-min-width);
+  max-width: var(--vgui-dialog-max-width);
+  max-height: var(--vgui-dialog-max-height);
+}
+
+/* The frame is a focus sink, not a stop: the trap below tabulates its children. */
+.vgui-dialog:focus {
+  outline: none;
+}
+
+.vgui-dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+
+.vgui-dialog--invalid .vgui-dialog__body {
+  color: var(--vgui-danger);
+}
+
+.vgui-dialog__footer {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--vgui-dialog-footer-gap);
+  padding-top: var(--vgui-dialog-footer-padding);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  box-shadow: inset 0 var(--vgui-bevel-width) 0 var(--vgui-bevel-light);
+}
+
+/* Valve's message boxes are a row of identical plates, not width-to-content. */
+.vgui-dialog__footer .vgui-button {
+  min-width: var(--vgui-dialog-button-width);
+  min-height: var(--vgui-dialog-button-height);
+}
+
+/*
+ * Destructive dialogs mark the last action as the danger action. Only the label
+ * is recoloured: the plate's bevel belongs to Button, and a `--vgui-danger`
+ * border would flatten it. Consumers wanting the full treatment also pass
+ * `.vgui-button--danger` through `actions`.
+ */
+.vgui-dialog--destructive .vgui-dialog__footer .vgui-button:last-child {
+  color: var(--vgui-danger);
+}
+
+/*
+ * While an action is in flight the row is inert but still visible, so the user
+ * can see which choice they already made.
+ */
+.vgui-dialog--busy .vgui-dialog__footer > * {
+  pointer-events: none;
+}
+
+.vgui-dialog__spinner {
+  flex: 0 0 auto;
+  /* Sized in `em` off a token so no new pixel metric is introduced. */
+  font-size: var(--vgui-font-size-small);
+  width: 1em;
+  height: 1em;
+  border: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-top-color: var(--vgui-clay-glyph);
+  border-radius: 50%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .vgui-dialog__spinner {
+    animation: vgui-dialog-spin 0.9s linear infinite;
+  }
+}
+
+@keyframes vgui-dialog-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.vgui-dialog .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/Dialog/Dialog.css.d.ts

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

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode, type RefObject } from 'react';
+import type { WindowProps } from '../Window';
+import './Dialog.css';
+import '../../styles/scrollbars.css';
+export interface DialogProps extends Omit<WindowProps, 'title' | 'onAction'> {
+    /** Dialog title, shown in the shared title bar. */
+    title: ReactNode;
+    /** Whether the dialog is rendered. Uncontrolled by default. */
+    open?: boolean;
+    /** Called when the user dismisses via the close button, Escape or the scrim. */
+    onOpenChange?: (open: boolean) => void;
+    /** Prompt or content. */
+    children?: ReactNode;
+    /** Footer actions. Rendered right-aligned in the order given. */
+    actions?: ReactNode;
+    /** Hide the close button and ignore Escape. */
+    unclosable?: boolean;
+    /** Clicking the scrim dismisses. Off by default — accidental data loss. */
+    dismissOnOverlayClick?: boolean;
+    /** Element to focus when the dialog opens; defaults to the first action. */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Disable the button row while an action is in flight. */
+    busy?: boolean;
+    /** Which of the four MessageBox shapes this dialog reproduces. */
+    variant?: 'alert' | 'confirm' | 'prompt' | 'destructive';
+}
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,cAAc,CAAA;AACrB,OAAO,6BAA6B,CAAA;AAEpC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,UAAU,CAAC;IAC1E,mDAAmD;IACnD,KAAK,EAAE,SAAS,CAAA;IAChB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gFAAgF;IAChF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2EAA2E;IAC3E,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,4EAA4E;IAC5E,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC/C,2DAA2D;IAC3D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAA;CACzD;AAoCD,eAAO,MAAM,MAAM,wGAwKjB,CAAA"}

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,151 @@
+import { Window } from "../Window/Window.js";
+import { forwardRef, useCallback, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Dialog.css";
+import "../../styles/scrollbars.css";
+//#region src/components/Dialog/Dialog.tsx
+/** Anything a dialog may move focus to, in DOM order. */
+var FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(", ");
+var focusableWithin = (node) => Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR));
+var initialTarget = (node) => {
+	const preferred = [
+		node.querySelector(".vgui-dialog__footer"),
+		node.querySelector(".vgui-dialog__body"),
+		node
+	];
+	for (const scope of preferred) {
+		if (!scope) continue;
+		const [first] = focusableWithin(scope);
+		if (first) return first;
+	}
+	return node;
+};
+var Dialog = forwardRef(function Dialog({ actions, busy = false, children, className, closable = true, controlsLabel, dismissOnOverlayClick = false, focused = true, icon, initialFocusRef, maximizable = false, maximized = false, minimizable = false, onDrag, onKeyDown, onOpenChange, open, resizable = false, title, tooltip, unclosable = false, variant = "confirm", ...sectionProps }, ref) {
+	const titleId = useId();
+	const bodyId = useId();
+	const overlayRef = useRef(null);
+	const dialogRef = useRef(null);
+	const restoreRef = useRef(null);
+	const [internalOpen, setInternalOpen] = useState(true);
+	const isOpen = open ?? internalOpen;
+	const setDialog = useCallback((node) => {
+		dialogRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const requestOpen = (next) => {
+		if (open === void 0) setInternalOpen(next);
+		onOpenChange?.(next);
+	};
+	useLayoutEffect(() => {
+		if (!isOpen) return;
+		const node = dialogRef.current;
+		if (!node) return;
+		const previous = document.activeElement;
+		const target = initialFocusRef?.current ?? initialTarget(node);
+		if (!node.contains(document.activeElement)) {
+			target.focus();
+			restoreRef.current = previous;
+		}
+		return () => {
+			const restore = restoreRef.current;
+			if (restore instanceof HTMLElement && restore.isConnected) restore.focus();
+			restoreRef.current = null;
+		};
+	}, [initialFocusRef, isOpen]);
+	const handleOverlayClick = (event) => {
+		if (!dismissOnOverlayClick || unclosable) return;
+		if (event.target !== overlayRef.current) return;
+		requestOpen(false);
+	};
+	/** Wraps `Tab` at both ends of the dialog, which is what contains focus. */
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.key !== "Tab") return;
+		const node = dialogRef.current;
+		if (!node) return;
+		const focusable = focusableWithin(node);
+		if (focusable.length === 0) {
+			event.preventDefault();
+			return;
+		}
+		const first = focusable[0];
+		const last = focusable[focusable.length - 1];
+		const active = document.activeElement;
+		if (event.shiftKey) {
+			if (active === first || !node.contains(active)) {
+				event.preventDefault();
+				last.focus();
+			}
+			return;
+		}
+		if (active === last || !node.contains(active)) {
+			event.preventDefault();
+			first.focus();
+		}
+	};
+	if (!isOpen) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: overlayRef,
+		className: "vgui-dialog-overlay",
+		onClick: handleOverlayClick,
+		children: /* @__PURE__ */ jsxs(Window, {
+			...sectionProps,
+			ref: setDialog,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": titleId,
+			"aria-describedby": children ? bodyId : void 0,
+			"aria-busy": busy || void 0,
+			tabIndex: -1,
+			className: [
+				"vgui-dialog",
+				`vgui-dialog--${variant}`,
+				busy ? "vgui-dialog--busy" : null,
+				className
+			].filter(Boolean).join(" "),
+			focused,
+			minimizable,
+			maximizable,
+			maximized,
+			closable: closable && !unclosable,
+			resizable,
+			icon,
+			controlsLabel,
+			tooltip,
+			onDrag,
+			onAction: (action) => {
+				if (action === "close") requestOpen(false);
+			},
+			onKeyDown: handleKeyDown,
+			title: /* @__PURE__ */ jsx("span", {
+				id: titleId,
+				children: title
+			}),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "vgui-dialog__body vgui-scroll-surface",
+				id: bodyId,
+				children
+			}), actions ? /* @__PURE__ */ jsxs("div", {
+				className: "vgui-dialog__footer",
+				"data-busy": busy ? "true" : void 0,
+				children: [busy ? /* @__PURE__ */ jsx("span", {
+					className: "vgui-dialog__spinner",
+					"aria-hidden": "true"
+				}) : null, actions]
+			}) : null]
+		})
+	});
+});
+Dialog.displayName = "Dialog";
+//#endregion
+export { Dialog };
+
+//# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n  type RefObject,\n} from 'react'\nimport { Window } from '../Window'\nimport type { WindowProps } from '../Window'\nimport './Dialog.css'\nimport '../../styles/scrollbars.css'\n\nexport interface DialogProps extends Omit<WindowProps, 'title' | 'onAction'> {\n  /** Dialog title, shown in the shared title bar. */\n  title: ReactNode\n  /** Whether the dialog is rendered. Uncontrolled by default. */\n  open?: boolean\n  /** Called when the user dismisses via the close button, Escape or the scrim. */\n  onOpenChange?: (open: boolean) => void\n  /** Prompt or content. */\n  children?: ReactNode\n  /** Footer actions. Rendered right-aligned in the order given. */\n  actions?: ReactNode\n  /** Hide the close button and ignore Escape. */\n  unclosable?: boolean\n  /** Clicking the scrim dismisses. Off by default — accidental data loss. */\n  dismissOnOverlayClick?: boolean\n  /** Element to focus when the dialog opens; defaults to the first action. */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  /** Disable the button row while an action is in flight. */\n  busy?: boolean\n  /** Which of the four MessageBox shapes this dialog reproduces. */\n  variant?: 'alert' | 'confirm' | 'prompt' | 'destructive'\n}\n\n/** Anything a dialog may move focus to, in DOM order. */\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(', ')\n\nconst focusableWithin = (node: HTMLElement) =>\n  Array.from(node.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))\n\n/*\n * The frame's own controls sit before the body in DOM order, so a naive \"first\n * focusable\" would always land on the close button. The actions the user came\n * for come first, then the body, then the frame.\n */\nconst initialTarget = (node: HTMLElement) => {\n  const preferred = [\n    node.querySelector<HTMLElement>('.vgui-dialog__footer'),\n    node.querySelector<HTMLElement>('.vgui-dialog__body'),\n    node,\n  ]\n\n  for (const scope of preferred) {\n    if (!scope) continue\n    const [first] = focusableWithin(scope)\n    if (first) return first\n  }\n\n  return node\n}\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  {\n    actions,\n    busy = false,\n    children,\n    className,\n    closable = true,\n    controlsLabel,\n    dismissOnOverlayClick = false,\n    focused = true,\n    icon,\n    initialFocusRef,\n    maximizable = false,\n    maximized = false,\n    minimizable = false,\n    onDrag,\n    onKeyDown,\n    onOpenChange,\n    open,\n    resizable = false,\n    title,\n    tooltip,\n    unclosable = false,\n    variant = 'confirm',\n    ...sectionProps\n  },\n  ref,\n) {\n  const titleId = useId()\n  const bodyId = useId()\n  const overlayRef = useRef<HTMLDivElement | null>(null)\n  const dialogRef = useRef<HTMLDivElement | null>(null)\n  const restoreRef = useRef<Element | null>(null)\n  const [internalOpen, setInternalOpen] = useState(true)\n\n  const isOpen = open ?? internalOpen\n\n  const setDialog = useCallback(\n    (node: HTMLDivElement | null) => {\n      dialogRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    },\n    [ref],\n  )\n\n  const requestOpen = (next: boolean) => {\n    if (open === undefined) setInternalOpen(next)\n    onOpenChange?.(next)\n  }\n\n  /*\n   * A dialog that opens without moving focus leaves the keyboard user tabbing\n   * around the page behind it, and one that closes without giving focus back\n   * strands them at the top of the document.\n   */\n  useLayoutEffect(() => {\n    if (!isOpen) return\n\n    const node = dialogRef.current\n    if (!node) return\n\n    const previous = document.activeElement\n    const target = initialFocusRef?.current ?? initialTarget(node)\n\n    // `autoFocus` on a child already moved focus during commit; leave it alone.\n    if (!node.contains(document.activeElement)) {\n      target.focus()\n      restoreRef.current = previous\n    }\n\n    return () => {\n      const restore = restoreRef.current\n      if (restore instanceof HTMLElement && restore.isConnected) restore.focus()\n      restoreRef.current = null\n    }\n  }, [initialFocusRef, isOpen])\n\n  const handleOverlayClick = (event: ReactMouseEvent<HTMLDivElement>) => {\n    // Test the click target rather than stopping propagation, so a click that\n    // starts inside the dialog but ends on the scrim is not treated as a\n    // dismissal of the dialog.\n    if (!dismissOnOverlayClick || unclosable) return\n    if (event.target !== overlayRef.current) return\n    requestOpen(false)\n  }\n\n  /** Wraps `Tab` at both ends of the dialog, which is what contains focus. */\n  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event)\n    if (event.key !== 'Tab') return\n\n    const node = dialogRef.current\n    if (!node) return\n\n    const focusable = focusableWithin(node)\n    if (focusable.length === 0) {\n      event.preventDefault()\n      return\n    }\n\n    const first = focusable[0]\n    const last = focusable[focusable.length - 1]\n    const active = document.activeElement\n\n    if (event.shiftKey) {\n      if (active === first || !node.contains(active)) {\n        event.preventDefault()\n        last.focus()\n      }\n      return\n    }\n\n    if (active === last || !node.contains(active)) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n\n  if (!isOpen) return null\n\n  return (\n    <div ref={overlayRef} className=\"vgui-dialog-overlay\" onClick={handleOverlayClick}>\n      <Window\n        {...sectionProps}\n        ref={setDialog}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={children ? bodyId : undefined}\n        aria-busy={busy || undefined}\n        tabIndex={-1}\n        className={[\n          'vgui-dialog',\n          `vgui-dialog--${variant}`,\n          busy ? 'vgui-dialog--busy' : null,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        focused={focused}\n        minimizable={minimizable}\n        maximizable={maximizable}\n        maximized={maximized}\n        closable={closable && !unclosable}\n        resizable={resizable}\n        icon={icon}\n        controlsLabel={controlsLabel}\n        tooltip={tooltip}\n        onDrag={onDrag}\n        onAction={(action) => {\n          if (action === 'close') requestOpen(false)\n        }}\n        onKeyDown={handleKeyDown}\n        title={<span id={titleId}>{title}</span>}\n      >\n        <div className=\"vgui-dialog__body vgui-scroll-surface\" id={bodyId}>\n          {children}\n        </div>\n        {actions ? (\n          <div className=\"vgui-dialog__footer\" data-busy={busy ? 'true' : undefined}>\n            {busy ? <span className=\"vgui-dialog__spinner\" aria-hidden=\"true\" /> : null}\n            {actions}\n          </div>\n        ) : null}\n      </Window>\n    </div>\n  )\n})\n\nDialog.displayName = 'Dialog'\n"],"mappings":"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"}

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

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

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

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

package/dist/components/Divider/Divider.css

@@ -0,0 +1,68 @@
+/*
+ * Green Steam divider — two 1px rows, dark above light
+ * (docs/components/Divider.md).
+ *
+ * The two-tone groove is a `linear-gradient` rather than `border` +
+ * `box-shadow`: a 2px-tall box needs a 1px row at the exact top and a 1px row
+ * at the exact bottom, which one declaration expresses and a border cannot.
+ * Both stop positions stay at `1px`, so the element must stay exactly 2px tall
+ * and use `margin` for any spacing.
+ */
+
+.vgui-divider {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 2px;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background-image: linear-gradient(
+    to bottom,
+    var(--vgui-bevel-dark) 0,
+    var(--vgui-bevel-dark) 1px,
+    var(--vgui-bevel-light) 1px,
+    var(--vgui-bevel-light) 2px
+  );
+}
+
+.vgui-divider--inset {
+  background-image: linear-gradient(
+    to bottom,
+    var(--vgui-bevel-light) 0,
+    var(--vgui-bevel-light) 1px,
+    var(--vgui-bevel-dark) 1px,
+    var(--vgui-bevel-dark) 2px
+  );
+}
+
+.vgui-divider--vertical {
+  width: 2px;
+  height: 100%;
+  min-height: 1em;
+  background-image: linear-gradient(
+    to right,
+    var(--vgui-bevel-dark) 0,
+    var(--vgui-bevel-dark) 1px,
+    var(--vgui-bevel-light) 1px,
+    var(--vgui-bevel-light) 2px
+  );
+}
+
+.vgui-divider--spaced {
+  margin: 20px 0;
+}
+
+/*
+ * Forced-colors discards the gradient and the rule disappears, so it is drawn
+ * with a system-coloured border instead.
+ */
+@media (forced-colors: active) {
+  .vgui-divider,
+  .vgui-divider--inset,
+  .vgui-divider--vertical {
+    forced-color-adjust: none;
+    background-image: none;
+    border-top: 1px solid CanvasText;
+  }
+}

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

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

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'react';
+import './Divider.css';
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Invert the two rows, for a rule sitting on a recessed surface. */
+    inset?: boolean;
+    /** Draw a vertical rule instead of a horizontal one. */
+    vertical?: boolean;
+    /** Add the standard 20px vertical margin. */
+    spaced?: boolean;
+}
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,eAAe,CAAA;AAEtB,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,qEAAqE;IACrE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,OAAO,yGAqBlB,CAAA"}

package/dist/components/Divider/Divider.js

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import "./Divider.css";
+//#region src/components/Divider/Divider.tsx
+var Divider = forwardRef(function Divider({ className, inset = false, vertical = false, spaced = false, ...rest }, ref) {
+	const classes = ["vgui-divider"];
+	if (inset) classes.push("vgui-divider--inset");
+	if (vertical) classes.push("vgui-divider--vertical");
+	if (spaced) classes.push("vgui-divider--spaced");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "separator",
+		"aria-orientation": vertical ? "vertical" : "horizontal",
+		className: classes.join(" "),
+		...rest
+	});
+});
+Divider.displayName = "Divider";
+//#endregion
+export { Divider };
+
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","names":[],"sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport './Divider.css'\n\nexport interface DividerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Invert the two rows, for a rule sitting on a recessed surface. */\n  inset?: boolean\n  /** Draw a vertical rule instead of a horizontal one. */\n  vertical?: boolean\n  /** Add the standard 20px vertical margin. */\n  spaced?: boolean\n}\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(function Divider(\n  { className, inset = false, vertical = false, spaced = false, ...rest },\n  ref,\n) {\n  const classes = ['vgui-divider']\n  if (inset) classes.push('vgui-divider--inset')\n  if (vertical) classes.push('vgui-divider--vertical')\n  if (spaced) classes.push('vgui-divider--spaced')\n  if (className) classes.push(className)\n\n  return (\n    <div\n      ref={ref}\n      role=\"separator\"\n      // ARIA's default orientation is vertical, so the horizontal case has to\n      // say so out loud.\n      aria-orientation={vertical ? 'vertical' : 'horizontal'}\n      className={classes.join(' ')}\n      {...rest}\n    />\n  )\n})\n\nDivider.displayName = 'Divider'\n"],"mappings":";;;;AAcA,IAAa,UAAU,WAAyC,SAAS,QACvE,EAAE,WAAW,QAAQ,OAAO,WAAW,OAAO,SAAS,OAAO,GAAG,QACjE,KACA;CACA,MAAM,UAAU,CAAC,cAAc;CAC/B,IAAI,OAAO,QAAQ,KAAK,qBAAqB;CAC7C,IAAI,UAAU,QAAQ,KAAK,wBAAwB;CACnD,IAAI,QAAQ,QAAQ,KAAK,sBAAsB;CAC/C,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,oBAAC,OAAD;EACO;EACL,MAAK;EAGL,oBAAkB,WAAW,aAAa;EAC1C,WAAW,QAAQ,KAAK,GAAG;EAC3B,GAAI;CACL,CAAA;AAEL,CAAC;AAED,QAAQ,cAAc"}

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

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

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

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