@malilion/block-ui-react 0.2.0 → 0.4.0

package/dist/components/layout/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","names":["styles"],"sources":["../../../../src/components/layout/Accordion/Accordion.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@malilion/block-ui-icons\";\nimport { createElement, forwardRef, useId, useRef, type KeyboardEvent } from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./Accordion.module.css\";\nimport type { AccordionProps } from \"./Accordion.types\";\n\nconst EMPTY: string[] = [];\n\n/**\n * Collapsible sections following the WAI-ARIA accordion pattern: each header is\n * a button inside a heading; ↑ / ↓ / Home / End move between headers.\n */\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  {\n    items,\n    type = \"single\",\n    value,\n    defaultValue = EMPTY,\n    onValueChange,\n    headingLevel = 3,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const baseId = useId();\n  const [open, setOpen] = useControllableState({ value, defaultValue, onChange: onValueChange });\n  const triggers = useRef(new Map<string, HTMLButtonElement>());\n  const enabled = items.filter((item) => !item.disabled);\n\n  const toggle = (id: string) => {\n    const isOpen = open.includes(id);\n    if (type === \"single\") setOpen(isOpen ? [] : [id]);\n    else setOpen(isOpen ? open.filter((openId) => openId !== id) : [...open, id]);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const index = enabled.findIndex(\n      (item) => triggers.current.get(item.id) === document.activeElement,\n    );\n    if (index < 0) return;\n    let next: number | null = null;\n    if (event.key === \"ArrowDown\") next = (index + 1) % enabled.length;\n    else if (event.key === \"ArrowUp\") next = (index - 1 + enabled.length) % enabled.length;\n    else if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = enabled.length - 1;\n    if (next === null) return;\n    event.preventDefault();\n    const target = enabled[next];\n    if (target) triggers.current.get(target.id)?.focus();\n  };\n\n  return (\n    <div ref={ref} className={cx(styles.accordion, className)} {...rest}>\n      {items.map((item) => {\n        const isOpen = open.includes(item.id);\n        const triggerId = `${baseId}-trigger-${item.id}`;\n        const panelId = `${baseId}-panel-${item.id}`;\n        return (\n          <div key={item.id} className={styles.item} data-open={isOpen || undefined}>\n            {createElement(\n              `h${headingLevel}`,\n              { className: styles.heading },\n              <button\n                ref={(element) => {\n                  if (element) triggers.current.set(item.id, element);\n                  else triggers.current.delete(item.id);\n                }}\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={panelId}\n                disabled={item.disabled}\n                className={styles.trigger}\n                onClick={() => toggle(item.id)}\n                onKeyDown={onKeyDown}\n              >\n                {item.icon ? (\n                  <span className={styles.icon} aria-hidden=\"true\">\n                    {item.icon}\n                  </span>\n                ) : null}\n                <span className={styles.title}>{item.title}</span>\n                <span className={styles.chevron} aria-hidden=\"true\">\n                  <ChevronDownIcon size={16} />\n                </span>\n              </button>,\n            )}\n            <div\n              id={panelId}\n              role=\"region\"\n              aria-labelledby={triggerId}\n              hidden={!isOpen}\n              className={styles.panel}\n            >\n              {item.content}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;AAOA,IAAM,QAAkB,CAAC;;;;;AAMzB,IAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,OACA,OAAO,UACP,OACA,eAAe,OACf,eACA,eAAe,GACf,WACA,GAAG,QAEL,KACA;CACA,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,MAAM,WAAW,qBAAqB;EAAE;EAAO;EAAc,UAAU;CAAc,CAAC;CAC7F,MAAM,WAAW,uBAAO,IAAI,IAA+B,CAAC;CAC5D,MAAM,UAAU,MAAM,QAAQ,SAAS,CAAC,KAAK,QAAQ;CAErD,MAAM,UAAU,OAAe;EAC7B,MAAM,SAAS,KAAK,SAAS,EAAE;EAC/B,IAAI,SAAS,UAAU,QAAQ,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;OAC5C,QAAQ,SAAS,KAAK,QAAQ,WAAW,WAAW,EAAE,IAAI,CAAC,GAAG,MAAM,EAAE,CAAC;CAC9E;CAEA,MAAM,aAAa,UAA4C;EAC7D,MAAM,QAAQ,QAAQ,WACnB,SAAS,SAAS,QAAQ,IAAI,KAAK,EAAE,MAAM,SAAS,aACvD;EACA,IAAI,QAAQ,GAAG;EACf,IAAI,OAAsB;EAC1B,IAAI,MAAM,QAAQ,aAAa,QAAQ,QAAQ,KAAK,QAAQ;OACvD,IAAI,MAAM,QAAQ,WAAW,QAAQ,QAAQ,IAAI,QAAQ,UAAU,QAAQ;OAC3E,IAAI,MAAM,QAAQ,QAAQ,OAAO;OACjC,IAAI,MAAM,QAAQ,OAAO,OAAO,QAAQ,SAAS;EACtD,IAAI,SAAS,MAAM;EACnB,MAAM,eAAe;EACrB,MAAM,SAAS,QAAQ;EACvB,IAAI,QAAQ,SAAS,QAAQ,IAAI,OAAO,EAAE,CAAC,EAAE,MAAM;CACrD;CAEA,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAGA,yBAAO,WAAW,SAAS;EAAG,GAAI;EAC5D,UAAA,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,KAAK,SAAS,KAAK,EAAE;GACpC,MAAM,YAAY,GAAG,OAAO,WAAW,KAAK;GAC5C,MAAM,UAAU,GAAG,OAAO,SAAS,KAAK;GACxC,OACE,qBAAC,OAAD;IAAmB,WAAWA,yBAAO;IAAM,aAAW,UAAU,KAAA;IAAhE,UAAA,CACG,cACC,IAAI,gBACJ,EAAE,WAAWA,yBAAO,QAAQ,GAC5B,qBAAC,UAAD;KACE,MAAM,YAAY;MAChB,IAAI,SAAS,SAAS,QAAQ,IAAI,KAAK,IAAI,OAAO;WAC7C,SAAS,QAAQ,OAAO,KAAK,EAAE;KACtC;KACA,IAAI;KACJ,MAAK;KACL,iBAAe;KACf,iBAAe;KACf,UAAU,KAAK;KACf,WAAWA,yBAAO;KAClB,eAAe,OAAO,KAAK,EAAE;KAClB;KAZb,UAAA;MAcG,KAAK,OACJ,oBAAC,QAAD;OAAM,WAAWA,yBAAO;OAAM,eAAY;OACvC,UAAA,KAAK;MACF,CAAA,IACJ;MACJ,oBAAC,QAAD;OAAM,WAAWA,yBAAO;OAAQ,UAAA,KAAK;MAAY,CAAA;MACjD,oBAAC,QAAD;OAAM,WAAWA,yBAAO;OAAS,eAAY;OAC3C,UAAA,oBAAC,iBAAD,EAAiB,MAAM,GAAK,CAAA;MACxB,CAAA;KACA;IACV,CAAA,CAAA,GACA,oBAAC,OAAD;KACE,IAAI;KACJ,MAAK;KACL,mBAAiB;KACjB,QAAQ,CAAC;KACT,WAAWA,yBAAO;KAEjB,UAAA,KAAK;IACH,CAAA,CACF;GAtCK,GAAA,KAAK,EAsCV;EAET,CAAC;CACE,CAAA;AAET,CAAC"}

package/dist/components/layout/Accordion/Accordion.module.js

@@ -0,0 +1,23 @@
+//#region src/components/layout/Accordion/Accordion.module.css
+var accordion = "block-accordion-u7KUD";
+var item = "block-item-Anf9u";
+var heading = "block-heading-YzlrO";
+var trigger = "block-trigger-r-rVI";
+var icon = "block-icon-ja4pL";
+var title = "block-title-xq19m";
+var chevron = "block-chevron-hKGfT";
+var panel = "block-panel-wcIDx";
+var Accordion_module_default = {
+	accordion,
+	item,
+	heading,
+	trigger,
+	icon,
+	title,
+	chevron,
+	panel
+};
+//#endregion
+export { accordion, chevron, Accordion_module_default as default, heading, icon, item, panel, title, trigger };
+
+//# sourceMappingURL=Accordion.module.js.map

package/dist/components/layout/Accordion/Accordion.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.module.js","names":[],"sources":["../../../../src/components/layout/Accordion/Accordion.module.css"],"sourcesContent":[".accordion {\n  display: flex;\n  flex-direction: column;\n  gap: var(--block-space-1);\n  width: 100%;\n}\n\n.item {\n  background-color: var(--block-surface);\n  border: var(--block-border-width) solid var(--block-border);\n  box-shadow: var(--block-shadow-bevel);\n}\n\n.heading {\n  margin: 0;\n}\n\n.trigger {\n  display: flex;\n  align-items: center;\n  gap: var(--block-space-2);\n  width: 100%;\n  min-height: 44px;\n  padding: var(--block-space-2) var(--block-space-3);\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-sm);\n  font-weight: var(--block-font-weight-bold);\n  letter-spacing: var(--block-letter-spacing-wide);\n  text-align: left;\n  text-transform: uppercase;\n  color: var(--block-text);\n  background-color: var(--block-surface-header);\n  border: 0;\n  cursor: pointer;\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: var(--block-slot-hover);\n}\n\n.trigger:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: -3px;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.icon {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.title {\n  flex: 1;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.chevron {\n  display: inline-flex;\n  flex-shrink: 0;\n  transition: transform var(--block-duration-instant) var(--block-ease-step);\n}\n\n.item[data-open] .chevron {\n  transform: rotate(180deg);\n}\n\n.panel {\n  padding: var(--block-space-3);\n  border-top: var(--block-border-width-thin) solid var(--block-border);\n  color: var(--block-text);\n}\n\n.panel[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/dist/components/layout/Accordion/Accordion.types.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface AccordionItem {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
+    items: AccordionItem[];
+    /** `single` keeps at most one section open. @default "single" */
+    type?: "single" | "multiple";
+    /** Controlled open section ids. */
+    value?: string[];
+    /** Initially open section ids. @default [] */
+    defaultValue?: string[];
+    onValueChange?: (open: string[]) => void;
+    /** Heading level wrapping each trigger. @default 3 */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+//# sourceMappingURL=Accordion.types.d.ts.map

package/dist/components/layout/Accordion/Accordion.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Accordion/Accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC1F,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,iEAAiE;IACjE,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC,sDAAsD;IACtD,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAClC"}

package/dist/components/layout/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { Accordion } from "./Accordion";
+export type { AccordionItem, AccordionProps } from "./Accordion.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/Accordion/index.d.ts.map

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

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

@@ -1,4 +1,5 @@
 export * from "./BlockPanel";
 export * from "./BlockStack";
 export * from "./BlockDivider";
+export * from "./Accordion";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC"}

package/dist/components/social/ChatWindow/ChatWindow.d.ts

@@ -0,0 +1,8 @@
+import type { ChatWindowProps } from "./ChatWindow.types";
+/**
+ * In-game chat: a scrolling message log (`role="log"`) above a text field.
+ * Enter sends, ↑ / ↓ recall sent messages, and the log only auto-scrolls while
+ * the reader is already at the bottom.
+ */
+export declare const ChatWindow: import("react").ForwardRefExoticComponent<ChatWindowProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ChatWindow.d.ts.map

package/dist/components/social/ChatWindow/ChatWindow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.d.ts","sourceRoot":"","sources":["../../../../src/components/social/ChatWindow/ChatWindow.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAK1D;;;;GAIG;AACH,eAAO,MAAM,UAAU,4GAmIrB,CAAC"}

package/dist/components/social/ChatWindow/ChatWindow.js

@@ -0,0 +1,146 @@
+import { cx } from "../../../utils/cx.js";
+import ChatWindow_module_default from "./ChatWindow.module.js";
+import { forwardRef, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/social/ChatWindow/ChatWindow.tsx
+/** Pixels from the bottom that still count as "following" the conversation. */
+var STICK_THRESHOLD = 24;
+/**
+* In-game chat: a scrolling message log (`role="log"`) above a text field.
+* Enter sends, ↑ / ↓ recall sent messages, and the log only auto-scrolls while
+* the reader is already at the bottom.
+*/
+var ChatWindow = forwardRef(function ChatWindow({ messages, onSend, placeholder = "Type a message…", maxLength = 256, showTimestamps = false, size = "md", label = "Chat", className, ...rest }, ref) {
+	const inputId = useId();
+	const logRef = useRef(null);
+	const stick = useRef(true);
+	const [draft, setDraft] = useState("");
+	const [history, setHistory] = useState([]);
+	const [historyIndex, setHistoryIndex] = useState(null);
+	useLayoutEffect(() => {
+		const log = logRef.current;
+		if (log && stick.current) log.scrollTop = log.scrollHeight;
+	}, [messages]);
+	useEffect(() => {
+		const log = logRef.current;
+		if (!log) return void 0;
+		const onScroll = () => {
+			stick.current = log.scrollHeight - log.scrollTop - log.clientHeight <= STICK_THRESHOLD;
+		};
+		log.addEventListener("scroll", onScroll);
+		return () => log.removeEventListener("scroll", onScroll);
+	}, []);
+	const submit = (event) => {
+		event.preventDefault();
+		const text = draft.trim();
+		if (!text) return;
+		onSend?.(text);
+		setHistory((previous) => [...previous, text]);
+		setHistoryIndex(null);
+		setDraft("");
+		stick.current = true;
+	};
+	const onKeyDown = (event) => {
+		if (history.length === 0) return;
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			const next = historyIndex === null ? history.length - 1 : Math.max(0, historyIndex - 1);
+			setHistoryIndex(next);
+			setDraft(history[next] ?? "");
+		} else if (event.key === "ArrowDown" && historyIndex !== null) {
+			event.preventDefault();
+			const next = historyIndex + 1;
+			if (next >= history.length) {
+				setHistoryIndex(null);
+				setDraft("");
+			} else {
+				setHistoryIndex(next);
+				setDraft(history[next] ?? "");
+			}
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "region",
+		"aria-label": label,
+		"data-size": size,
+		className: cx(ChatWindow_module_default.chat, className),
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: logRef,
+			role: "log",
+			"aria-label": `${label} messages`,
+			tabIndex: 0,
+			className: ChatWindow_module_default.log,
+			children: /* @__PURE__ */ jsx("ol", {
+				className: ChatWindow_module_default.list,
+				children: messages.map((message) => {
+					const type = message.type ?? "chat";
+					return /* @__PURE__ */ jsxs("li", {
+						className: ChatWindow_module_default.message,
+						"data-type": type,
+						children: [
+							showTimestamps && message.time ? /* @__PURE__ */ jsxs("span", {
+								className: ChatWindow_module_default.time,
+								children: [
+									"[",
+									message.time,
+									"] "
+								]
+							}) : null,
+							type === "chat" && message.author ? /* @__PURE__ */ jsxs("span", {
+								className: ChatWindow_module_default.author,
+								children: [
+									"<",
+									message.author,
+									"> "
+								]
+							}) : null,
+							type === "whisper" && message.author ? /* @__PURE__ */ jsxs("span", {
+								className: ChatWindow_module_default.author,
+								children: [message.author, " whispers: "]
+							}) : null,
+							/* @__PURE__ */ jsx("span", {
+								className: ChatWindow_module_default.text,
+								children: message.text
+							})
+						]
+					}, message.id);
+				})
+			})
+		}), onSend ? /* @__PURE__ */ jsxs("form", {
+			className: ChatWindow_module_default.form,
+			onSubmit: submit,
+			children: [
+				/* @__PURE__ */ jsx("label", {
+					htmlFor: inputId,
+					className: "block-visually-hidden",
+					children: "Message"
+				}),
+				/* @__PURE__ */ jsx("input", {
+					id: inputId,
+					type: "text",
+					value: draft,
+					maxLength,
+					placeholder,
+					autoComplete: "off",
+					className: ChatWindow_module_default.input,
+					onChange: (event) => {
+						setDraft(event.target.value);
+						setHistoryIndex(null);
+					},
+					onKeyDown
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "submit",
+					className: ChatWindow_module_default.send,
+					children: "Send"
+				})
+			]
+		}) : null]
+	});
+});
+//#endregion
+export { ChatWindow };
+
+//# sourceMappingURL=ChatWindow.js.map

package/dist/components/social/ChatWindow/ChatWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.js","names":["styles"],"sources":["../../../../src/components/social/ChatWindow/ChatWindow.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type FormEvent,\n  type KeyboardEvent,\n} from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./ChatWindow.module.css\";\nimport type { ChatWindowProps } from \"./ChatWindow.types\";\n\n/** Pixels from the bottom that still count as \"following\" the conversation. */\nconst STICK_THRESHOLD = 24;\n\n/**\n * In-game chat: a scrolling message log (`role=\"log\"`) above a text field.\n * Enter sends, ↑ / ↓ recall sent messages, and the log only auto-scrolls while\n * the reader is already at the bottom.\n */\nexport const ChatWindow = forwardRef<HTMLDivElement, ChatWindowProps>(function ChatWindow(\n  {\n    messages,\n    onSend,\n    placeholder = \"Type a message…\",\n    maxLength = 256,\n    showTimestamps = false,\n    size = \"md\",\n    label = \"Chat\",\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const inputId = useId();\n  const logRef = useRef<HTMLDivElement>(null);\n  const stick = useRef(true);\n  const [draft, setDraft] = useState(\"\");\n  const [history, setHistory] = useState<string[]>([]);\n  const [historyIndex, setHistoryIndex] = useState<number | null>(null);\n\n  useLayoutEffect(() => {\n    const log = logRef.current;\n    if (log && stick.current) log.scrollTop = log.scrollHeight;\n  }, [messages]);\n\n  useEffect(() => {\n    const log = logRef.current;\n    if (!log) return undefined;\n    const onScroll = () => {\n      stick.current = log.scrollHeight - log.scrollTop - log.clientHeight <= STICK_THRESHOLD;\n    };\n    log.addEventListener(\"scroll\", onScroll);\n    return () => log.removeEventListener(\"scroll\", onScroll);\n  }, []);\n\n  const submit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const text = draft.trim();\n    if (!text) return;\n    onSend?.(text);\n    setHistory((previous) => [...previous, text]);\n    setHistoryIndex(null);\n    setDraft(\"\");\n    stick.current = true;\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (history.length === 0) return;\n    if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      const next = historyIndex === null ? history.length - 1 : Math.max(0, historyIndex - 1);\n      setHistoryIndex(next);\n      setDraft(history[next] ?? \"\");\n    } else if (event.key === \"ArrowDown\" && historyIndex !== null) {\n      event.preventDefault();\n      const next = historyIndex + 1;\n      if (next >= history.length) {\n        setHistoryIndex(null);\n        setDraft(\"\");\n      } else {\n        setHistoryIndex(next);\n        setDraft(history[next] ?? \"\");\n      }\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      role=\"region\"\n      aria-label={label}\n      data-size={size}\n      className={cx(styles.chat, className)}\n      {...rest}\n    >\n      <div\n        ref={logRef}\n        role=\"log\"\n        aria-label={`${label} messages`}\n        // Scrollable log: keyboard users must be able to focus it to scroll.\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        className={styles.log}\n      >\n        <ol className={styles.list}>\n          {messages.map((message) => {\n            const type = message.type ?? \"chat\";\n            return (\n              <li key={message.id} className={styles.message} data-type={type}>\n                {showTimestamps && message.time ? (\n                  <span className={styles.time}>[{message.time}] </span>\n                ) : null}\n                {type === \"chat\" && message.author ? (\n                  <span className={styles.author}>&lt;{message.author}&gt; </span>\n                ) : null}\n                {type === \"whisper\" && message.author ? (\n                  <span className={styles.author}>{message.author} whispers: </span>\n                ) : null}\n                <span className={styles.text}>{message.text}</span>\n              </li>\n            );\n          })}\n        </ol>\n      </div>\n      {onSend ? (\n        <form className={styles.form} onSubmit={submit}>\n          <label htmlFor={inputId} className=\"block-visually-hidden\">\n            Message\n          </label>\n          <input\n            id={inputId}\n            type=\"text\"\n            value={draft}\n            maxLength={maxLength}\n            placeholder={placeholder}\n            autoComplete=\"off\"\n            className={styles.input}\n            onChange={(event) => {\n              setDraft(event.target.value);\n              setHistoryIndex(null);\n            }}\n            onKeyDown={onKeyDown}\n          />\n          <button type=\"submit\" className={styles.send}>\n            Send\n          </button>\n        </form>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/social/ChatWindow/ChatWindow.module.js

@@ -0,0 +1,27 @@
+//#region src/components/social/ChatWindow/ChatWindow.module.css
+var chat = "block-chat-Q0XDo";
+var log = "block-log-HVoUA";
+var list = "block-list-JP34I";
+var message = "block-message-hLZr5";
+var time = "block-time-ADjHo";
+var author = "block-author-4B0dn";
+var text = "block-text-dAB3G";
+var form = "block-form--uumN";
+var input = "block-input-jrO44";
+var send = "block-send-P4NkZ";
+var ChatWindow_module_default = {
+	chat,
+	log,
+	list,
+	message,
+	time,
+	author,
+	text,
+	form,
+	input,
+	send
+};
+//#endregion
+export { author, chat, ChatWindow_module_default as default, form, input, list, log, message, send, text, time };
+
+//# sourceMappingURL=ChatWindow.module.js.map

package/dist/components/social/ChatWindow/ChatWindow.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.module.js","names":[],"sources":["../../../../src/components/social/ChatWindow/ChatWindow.module.css"],"sourcesContent":[".chat {\n  --chat-height: 240px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 560px;\n  font-size: var(--block-font-size-sm);\n  color: var(--block-text-primary);\n  background-color: color-mix(in srgb, var(--block-obsidian-dark) 80%, transparent);\n  border: var(--block-border-width-thin) solid var(--block-black);\n}\n\n.chat[data-size=\"sm\"] {\n  --chat-height: 160px;\n}\n\n.chat[data-size=\"lg\"] {\n  --chat-height: 360px;\n}\n\n.log {\n  display: flex;\n  flex-direction: column;\n  height: var(--chat-height);\n  padding: var(--block-space-2);\n  overflow-y: auto;\n  scrollbar-width: thin;\n}\n\n/* Messages stack from the bottom, like in-game chat. */\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin: auto 0 0;\n  padding: 0;\n  list-style: none;\n}\n\n.log:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: -3px;\n}\n\n.message {\n  line-height: var(--block-line-height-normal);\n  text-shadow: var(--block-shadow-text);\n  overflow-wrap: anywhere;\n}\n\n.time {\n  color: var(--block-text-secondary);\n  font-variant-numeric: tabular-nums;\n}\n\n.author {\n  color: var(--block-diamond-light);\n}\n\n.message[data-type=\"system\"] .text {\n  color: var(--block-gold-light);\n}\n\n.message[data-type=\"join\"] .text {\n  color: var(--block-gold-light);\n}\n\n.message[data-type=\"death\"] .text {\n  color: var(--block-redstone-light);\n}\n\n.message[data-type=\"whisper\"] {\n  color: var(--block-text-secondary);\n  font-style: italic;\n}\n\n.form {\n  display: flex;\n  gap: var(--block-space-1);\n  padding: var(--block-space-1);\n  border-top: var(--block-border-width-thin) solid var(--block-black);\n}\n\n.input {\n  flex: 1;\n  min-width: 0;\n  min-height: 36px;\n  padding: 0 var(--block-space-2);\n  font: inherit;\n  color: var(--block-text-primary);\n  background-color: color-mix(in srgb, var(--block-black) 70%, transparent);\n  border: var(--block-border-width-thin) solid var(--block-obsidian-light);\n}\n\n.input::placeholder {\n  color: var(--block-text-secondary);\n}\n\n.input:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: -1px;\n}\n\n.send {\n  min-width: 64px;\n  min-height: 36px;\n  padding: 0 var(--block-space-2);\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-xs);\n  text-transform: uppercase;\n  color: var(--block-text-primary);\n  background-color: var(--block-obsidian-light);\n  border: var(--block-border-width-thin) solid var(--block-black);\n  cursor: pointer;\n}\n\n.send:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 2px;\n}\n"],"mappings":""}

package/dist/components/social/ChatWindow/ChatWindow.types.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export declare const chatMessageTypes: readonly ["chat", "system", "whisper", "join", "death"];
+export type ChatMessageType = (typeof chatMessageTypes)[number];
+export interface ChatMessage {
+    id: string;
+    /** Sender; omitted for system lines. */
+    author?: string;
+    text: ReactNode;
+    /** Display time, e.g. "14:02". */
+    time?: string;
+    /** @default "chat" */
+    type?: ChatMessageType;
+}
+export interface ChatWindowProps extends HTMLAttributes<HTMLDivElement> {
+    messages: ChatMessage[];
+    /** Renders the input; called with the trimmed text on Enter. */
+    onSend?: (text: string) => void;
+    /** @default "Type a message…" */
+    placeholder?: string;
+    /** @default 256 */
+    maxLength?: number;
+    /** Show each message's time. */
+    showTimestamps?: boolean;
+    /** Log height. @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Accessible name. @default "Chat" */
+    label?: string;
+}
+//# sourceMappingURL=ChatWindow.types.d.ts.map

package/dist/components/social/ChatWindow/ChatWindow.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.types.d.ts","sourceRoot":"","sources":["../../../../src/components/social/ChatWindow/ChatWindow.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,eAAO,MAAM,gBAAgB,yDAA0D,CAAC;AAExF,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhE,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,gEAAgE;IAChE,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gCAAgC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/social/ChatWindow/ChatWindow.types.js

@@ -0,0 +1,12 @@
+//#region src/components/social/ChatWindow/ChatWindow.types.ts
+var chatMessageTypes = [
+	"chat",
+	"system",
+	"whisper",
+	"join",
+	"death"
+];
+//#endregion
+export { chatMessageTypes };
+
+//# sourceMappingURL=ChatWindow.types.js.map

package/dist/components/social/ChatWindow/ChatWindow.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.types.js","names":[],"sources":["../../../../src/components/social/ChatWindow/ChatWindow.types.ts"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\n\nexport const chatMessageTypes = [\"chat\", \"system\", \"whisper\", \"join\", \"death\"] as const;\n\nexport type ChatMessageType = (typeof chatMessageTypes)[number];\n\nexport interface ChatMessage {\n  id: string;\n  /** Sender; omitted for system lines. */\n  author?: string;\n  text: ReactNode;\n  /** Display time, e.g. \"14:02\". */\n  time?: string;\n  /** @default \"chat\" */\n  type?: ChatMessageType;\n}\n\nexport interface ChatWindowProps extends HTMLAttributes<HTMLDivElement> {\n  messages: ChatMessage[];\n  /** Renders the input; called with the trimmed text on Enter. */\n  onSend?: (text: string) => void;\n  /** @default \"Type a message…\" */\n  placeholder?: string;\n  /** @default 256 */\n  maxLength?: number;\n  /** Show each message's time. */\n  showTimestamps?: boolean;\n  /** Log height. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Accessible name. @default \"Chat\" */\n  label?: string;\n}\n"],"mappings":";AAEA,IAAa,mBAAmB;CAAC;CAAQ;CAAU;CAAW;CAAQ;AAAO"}

package/dist/components/social/ChatWindow/index.d.ts

@@ -0,0 +1,4 @@
+export { ChatWindow } from "./ChatWindow";
+export { chatMessageTypes } from "./ChatWindow.types";
+export type { ChatMessage, ChatMessageType, ChatWindowProps } from "./ChatWindow.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/social/ChatWindow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/social/ChatWindow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/social/CommandConsole/CommandConsole.d.ts

@@ -0,0 +1,7 @@
+import type { CommandConsoleProps } from "./CommandConsole.types";
+/**
+ * Command console: an output log above a "/" command line with suggestions
+ * (WAI-ARIA combobox). Tab completes, ↑ / ↓ pick a suggestion or recall history.
+ */
+export declare const CommandConsole: import("react").ForwardRefExoticComponent<CommandConsoleProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=CommandConsole.d.ts.map

package/dist/components/social/CommandConsole/CommandConsole.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandConsole.d.ts","sourceRoot":"","sources":["../../../../src/components/social/CommandConsole/CommandConsole.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAKlE;;;GAGG;AACH,eAAO,MAAM,cAAc,gHAwL1B,CAAC"}

package/dist/components/social/CommandConsole/CommandConsole.js

@@ -0,0 +1,187 @@
+import { cx } from "../../../utils/cx.js";
+import CommandConsole_module_default from "./CommandConsole.module.js";
+import { suggestCommands } from "./CommandConsole.utils.js";
+import { forwardRef, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/social/CommandConsole/CommandConsole.tsx
+var STICK_THRESHOLD = 24;
+/**
+* Command console: an output log above a "/" command line with suggestions
+* (WAI-ARIA combobox). Tab completes, ↑ / ↓ pick a suggestion or recall history.
+*/
+var CommandConsole = forwardRef(function CommandConsole({ entries, commands = [], onRun, size = "md", label = "Console", className, ...rest }, ref) {
+	const baseId = useId();
+	const listId = `${baseId}-suggestions`;
+	const logRef = useRef(null);
+	const stick = useRef(true);
+	const [draft, setDraft] = useState("");
+	const [active, setActive] = useState(0);
+	const [dismissed, setDismissed] = useState(false);
+	const [history, setHistory] = useState([]);
+	const [historyIndex, setHistoryIndex] = useState(null);
+	const suggestions = dismissed ? [] : suggestCommands(draft, commands);
+	const open = suggestions.length > 0;
+	const activeIndex = Math.min(active, suggestions.length - 1);
+	useLayoutEffect(() => {
+		const log = logRef.current;
+		if (log && stick.current) log.scrollTop = log.scrollHeight;
+	}, [entries]);
+	useEffect(() => {
+		const log = logRef.current;
+		if (!log) return void 0;
+		const onScroll = () => {
+			stick.current = log.scrollHeight - log.scrollTop - log.clientHeight <= STICK_THRESHOLD;
+		};
+		log.addEventListener("scroll", onScroll);
+		return () => log.removeEventListener("scroll", onScroll);
+	}, []);
+	const update = (value) => {
+		setDraft(value);
+		setActive(0);
+		setDismissed(false);
+		setHistoryIndex(null);
+	};
+	const complete = (index) => {
+		const command = suggestions[index];
+		if (!command) return;
+		setDraft(`/${command.name} `);
+		setActive(0);
+	};
+	const submit = (event) => {
+		event.preventDefault();
+		const command = draft.trim();
+		if (!command) return;
+		onRun?.(command);
+		setHistory((previous) => [...previous, command]);
+		update("");
+		stick.current = true;
+	};
+	const recall = (direction) => {
+		if (history.length === 0) return;
+		if (direction === -1) {
+			const next = historyIndex === null ? history.length - 1 : Math.max(0, historyIndex - 1);
+			setHistoryIndex(next);
+			setDraft(history[next] ?? "");
+		} else if (historyIndex !== null) {
+			const next = historyIndex + 1;
+			setHistoryIndex(next >= history.length ? null : next);
+			setDraft(next >= history.length ? "" : history[next] ?? "");
+		}
+		setDismissed(true);
+	};
+	const onKeyDown = (event) => {
+		if (open) {
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				const step = event.key === "ArrowDown" ? 1 : -1;
+				setActive((activeIndex + step + suggestions.length) % suggestions.length);
+				return;
+			}
+			if (event.key === "Tab" && !event.shiftKey) {
+				event.preventDefault();
+				complete(activeIndex);
+				return;
+			}
+			if (event.key === "Escape") {
+				event.preventDefault();
+				setDismissed(true);
+				return;
+			}
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			recall(-1);
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			recall(1);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "region",
+		"aria-label": label,
+		"data-size": size,
+		className: cx(CommandConsole_module_default.console, className),
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: logRef,
+			role: "log",
+			"aria-label": `${label} output`,
+			tabIndex: 0,
+			className: CommandConsole_module_default.log,
+			children: /* @__PURE__ */ jsx("ol", {
+				className: CommandConsole_module_default.list,
+				children: entries.map((entry) => /* @__PURE__ */ jsx("li", {
+					className: CommandConsole_module_default.entry,
+					"data-kind": entry.kind ?? "output",
+					children: entry.text
+				}, entry.id))
+			})
+		}), onRun ? /* @__PURE__ */ jsxs("form", {
+			className: CommandConsole_module_default.form,
+			onSubmit: submit,
+			children: [
+				open ? /* @__PURE__ */ jsx("ul", {
+					id: listId,
+					role: "listbox",
+					"aria-label": "Command suggestions",
+					className: CommandConsole_module_default.suggestions,
+					children: suggestions.map((command, index) => /* @__PURE__ */ jsxs("li", {
+						id: `${listId}-${index}`,
+						role: "option",
+						"aria-selected": index === activeIndex,
+						className: CommandConsole_module_default.suggestion,
+						onMouseDown: (event) => {
+							event.preventDefault();
+							complete(index);
+						},
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: CommandConsole_module_default.name,
+								children: ["/", command.name]
+							}),
+							command.usage ? /* @__PURE__ */ jsxs("span", {
+								className: CommandConsole_module_default.usage,
+								children: [" ", command.usage]
+							}) : null,
+							command.description ? /* @__PURE__ */ jsxs("span", {
+								className: CommandConsole_module_default.description,
+								children: [" — ", command.description]
+							}) : null
+						]
+					}, command.name))
+				}) : null,
+				/* @__PURE__ */ jsx("label", {
+					htmlFor: `${baseId}-input`,
+					className: "block-visually-hidden",
+					children: "Command"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: CommandConsole_module_default.prompt,
+					"aria-hidden": "true",
+					children: ">"
+				}),
+				/* @__PURE__ */ jsx("input", {
+					id: `${baseId}-input`,
+					type: "text",
+					role: "combobox",
+					"aria-autocomplete": "list",
+					"aria-expanded": open,
+					"aria-controls": open ? listId : void 0,
+					"aria-activedescendant": open ? `${listId}-${activeIndex}` : void 0,
+					value: draft,
+					placeholder: "/help",
+					autoComplete: "off",
+					spellCheck: false,
+					className: CommandConsole_module_default.input,
+					onChange: (event) => update(event.target.value),
+					onKeyDown
+				})
+			]
+		}) : null]
+	});
+});
+//#endregion
+export { CommandConsole };
+
+//# sourceMappingURL=CommandConsole.js.map

package/dist/components/social/CommandConsole/CommandConsole.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandConsole.js","names":["styles"],"sources":["../../../../src/components/social/CommandConsole/CommandConsole.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type FormEvent,\n  type KeyboardEvent,\n} from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./CommandConsole.module.css\";\nimport type { CommandConsoleProps } from \"./CommandConsole.types\";\nimport { suggestCommands } from \"./CommandConsole.utils\";\n\nconst STICK_THRESHOLD = 24;\n\n/**\n * Command console: an output log above a \"/\" command line with suggestions\n * (WAI-ARIA combobox). Tab completes, ↑ / ↓ pick a suggestion or recall history.\n */\nexport const CommandConsole = forwardRef<HTMLDivElement, CommandConsoleProps>(\n  function CommandConsole(\n    { entries, commands = [], onRun, size = \"md\", label = \"Console\", className, ...rest },\n    ref,\n  ) {\n    const baseId = useId();\n    const listId = `${baseId}-suggestions`;\n    const logRef = useRef<HTMLDivElement>(null);\n    const stick = useRef(true);\n    const [draft, setDraft] = useState(\"\");\n    const [active, setActive] = useState(0);\n    const [dismissed, setDismissed] = useState(false);\n    const [history, setHistory] = useState<string[]>([]);\n    const [historyIndex, setHistoryIndex] = useState<number | null>(null);\n\n    const suggestions = dismissed ? [] : suggestCommands(draft, commands);\n    const open = suggestions.length > 0;\n    const activeIndex = Math.min(active, suggestions.length - 1);\n\n    useLayoutEffect(() => {\n      const log = logRef.current;\n      if (log && stick.current) log.scrollTop = log.scrollHeight;\n    }, [entries]);\n\n    useEffect(() => {\n      const log = logRef.current;\n      if (!log) return undefined;\n      const onScroll = () => {\n        stick.current = log.scrollHeight - log.scrollTop - log.clientHeight <= STICK_THRESHOLD;\n      };\n      log.addEventListener(\"scroll\", onScroll);\n      return () => log.removeEventListener(\"scroll\", onScroll);\n    }, []);\n\n    const update = (value: string) => {\n      setDraft(value);\n      setActive(0);\n      setDismissed(false);\n      setHistoryIndex(null);\n    };\n\n    const complete = (index: number) => {\n      const command = suggestions[index];\n      if (!command) return;\n      setDraft(`/${command.name} `);\n      setActive(0);\n    };\n\n    const submit = (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      const command = draft.trim();\n      if (!command) return;\n      onRun?.(command);\n      setHistory((previous) => [...previous, command]);\n      update(\"\");\n      stick.current = true;\n    };\n\n    const recall = (direction: -1 | 1) => {\n      if (history.length === 0) return;\n      if (direction === -1) {\n        const next = historyIndex === null ? history.length - 1 : Math.max(0, historyIndex - 1);\n        setHistoryIndex(next);\n        setDraft(history[next] ?? \"\");\n      } else if (historyIndex !== null) {\n        const next = historyIndex + 1;\n        setHistoryIndex(next >= history.length ? null : next);\n        setDraft(next >= history.length ? \"\" : (history[next] ?? \"\"));\n      }\n      setDismissed(true);\n    };\n\n    const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (open) {\n        if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n          event.preventDefault();\n          const step = event.key === \"ArrowDown\" ? 1 : -1;\n          setActive((activeIndex + step + suggestions.length) % suggestions.length);\n          return;\n        }\n        if (event.key === \"Tab\" && !event.shiftKey) {\n          event.preventDefault();\n          complete(activeIndex);\n          return;\n        }\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          setDismissed(true);\n          return;\n        }\n      }\n      if (event.key === \"ArrowUp\") {\n        event.preventDefault();\n        recall(-1);\n      } else if (event.key === \"ArrowDown\") {\n        event.preventDefault();\n        recall(1);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"region\"\n        aria-label={label}\n        data-size={size}\n        className={cx(styles.console, className)}\n        {...rest}\n      >\n        <div\n          ref={logRef}\n          role=\"log\"\n          aria-label={`${label} output`}\n          // Scrollable log: keyboard users must be able to focus it to scroll.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n          tabIndex={0}\n          className={styles.log}\n        >\n          <ol className={styles.list}>\n            {entries.map((entry) => (\n              <li key={entry.id} className={styles.entry} data-kind={entry.kind ?? \"output\"}>\n                {entry.text}\n              </li>\n            ))}\n          </ol>\n        </div>\n        {onRun ? (\n          <form className={styles.form} onSubmit={submit}>\n            {open ? (\n              <ul\n                id={listId}\n                role=\"listbox\"\n                aria-label=\"Command suggestions\"\n                className={styles.suggestions}\n              >\n                {suggestions.map((command, index) => (\n                  <li\n                    key={command.name}\n                    id={`${listId}-${index}`}\n                    role=\"option\"\n                    aria-selected={index === activeIndex}\n                    className={styles.suggestion}\n                    // Pointer users pick with a click; keyboard users use the input's arrow keys.\n                    onMouseDown={(event) => {\n                      event.preventDefault();\n                      complete(index);\n                    }}\n                  >\n                    <span className={styles.name}>/{command.name}</span>\n                    {command.usage ? <span className={styles.usage}> {command.usage}</span> : null}\n                    {command.description ? (\n                      <span className={styles.description}> — {command.description}</span>\n                    ) : null}\n                  </li>\n                ))}\n              </ul>\n            ) : null}\n            <label htmlFor={`${baseId}-input`} className=\"block-visually-hidden\">\n              Command\n            </label>\n            <span className={styles.prompt} aria-hidden=\"true\">\n              &gt;\n            </span>\n            <input\n              id={`${baseId}-input`}\n              type=\"text\"\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded={open}\n              aria-controls={open ? listId : undefined}\n              aria-activedescendant={open ? `${listId}-${activeIndex}` : undefined}\n              value={draft}\n              placeholder=\"/help\"\n              autoComplete=\"off\"\n              spellCheck={false}\n              className={styles.input}\n              onChange={(event) => update(event.target.value)}\n              onKeyDown={onKeyDown}\n            />\n          </form>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/social/CommandConsole/CommandConsole.module.js

@@ -0,0 +1,31 @@
+//#region src/components/social/CommandConsole/CommandConsole.module.css
+var console = "block-console-qcWGr";
+var log = "block-log-pWlGe";
+var list = "block-list-MIIVP";
+var entry = "block-entry--mmGM";
+var form = "block-form-tWoQQ";
+var prompt = "block-prompt-BftNf";
+var input = "block-input-GFfLX";
+var suggestions = "block-suggestions-kbQEK";
+var suggestion = "block-suggestion-gbqGK";
+var name = "block-name-V4HmU";
+var usage = "block-usage-58Sl7";
+var description = "block-description-hVsJo";
+var CommandConsole_module_default = {
+	console,
+	log,
+	list,
+	entry,
+	form,
+	prompt,
+	input,
+	suggestions,
+	suggestion,
+	name,
+	usage,
+	description
+};
+//#endregion
+export { console, CommandConsole_module_default as default, description, entry, form, input, list, log, name, prompt, suggestion, suggestions, usage };
+
+//# sourceMappingURL=CommandConsole.module.js.map

package/dist/components/social/CommandConsole/CommandConsole.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandConsole.module.js","names":[],"sources":["../../../../src/components/social/CommandConsole/CommandConsole.module.css"],"sourcesContent":[".console {\n  --console-height: 240px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 640px;\n  font-family: var(--block-font-mono);\n  font-size: var(--block-font-size-sm);\n  color: var(--block-text-primary);\n  background-color: color-mix(in srgb, var(--block-black) 88%, transparent);\n  border: var(--block-border-width-thin) solid var(--block-obsidian-light);\n}\n\n.console[data-size=\"sm\"] {\n  --console-height: 160px;\n}\n\n.console[data-size=\"lg\"] {\n  --console-height: 360px;\n}\n\n.log {\n  display: flex;\n  flex-direction: column;\n  height: var(--console-height);\n  padding: var(--block-space-2);\n  overflow-y: auto;\n  scrollbar-width: thin;\n}\n\n.log:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: -3px;\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin: auto 0 0;\n  padding: 0;\n  list-style: none;\n}\n\n.entry {\n  line-height: var(--block-line-height-normal);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n.entry[data-kind=\"input\"] {\n  color: var(--block-text-secondary);\n}\n\n.entry[data-kind=\"input\"]::before {\n  content: \"> \";\n}\n\n.entry[data-kind=\"success\"] {\n  color: var(--block-emerald-light);\n}\n\n.entry[data-kind=\"error\"] {\n  color: var(--block-redstone-light);\n}\n\n.form {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--block-space-1);\n  padding: var(--block-space-1) var(--block-space-2);\n  border-top: var(--block-border-width-thin) solid var(--block-obsidian-light);\n}\n\n.prompt {\n  color: var(--block-emerald-light);\n}\n\n.input {\n  flex: 1;\n  min-width: 0;\n  min-height: 36px;\n  padding: 0 var(--block-space-1);\n  font: inherit;\n  color: var(--block-text-primary);\n  background: transparent;\n  border: 0;\n}\n\n.input::placeholder {\n  color: var(--block-text-secondary);\n}\n\n.input:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 0;\n}\n\n.suggestions {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  right: 0;\n  z-index: var(--block-z-dropdown);\n  max-height: 180px;\n  margin: 0;\n  padding: var(--block-space-1);\n  overflow-y: auto;\n  list-style: none;\n  background-color: var(--block-obsidian-dark);\n  border: var(--block-border-width-thin) solid var(--block-obsidian-light);\n}\n\n.suggestion {\n  padding: 2px var(--block-space-1);\n  cursor: pointer;\n  overflow-wrap: anywhere;\n}\n\n.suggestion[aria-selected=\"true\"] {\n  background-color: var(--block-obsidian-light);\n}\n\n.name {\n  color: var(--block-gold-light);\n}\n\n.usage {\n  color: var(--block-text-primary);\n}\n\n.description {\n  color: var(--block-text-secondary);\n}\n"],"mappings":""}