@malilion/block-ui-react 0.1.0 → 0.3.0

package/dist/components/actions/BlockMenu/BlockMenu.d.ts

@@ -0,0 +1,9 @@
+import type { BlockMenuProps } from "./BlockMenu.types";
+/**
+ * Dropdown menu button following the WAI-ARIA menu button pattern: arrow keys
+ * move with wrap-around, Home/End jump, letters type-ahead, Enter/Space choose
+ * and Escape closes — focus always returns to the trigger. The menu renders in
+ * the provider's overlay layer, so scroll containers (tables) never clip it.
+ */
+export declare const BlockMenu: import("react").ForwardRefExoticComponent<BlockMenuProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=BlockMenu.d.ts.map

package/dist/components/actions/BlockMenu/BlockMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockMenu/BlockMenu.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKvE;;;;;GAKG;AACH,eAAO,MAAM,SAAS,2GAqPpB,CAAC"}

package/dist/components/actions/BlockMenu/BlockMenu.js

@@ -0,0 +1,211 @@
+import { cx } from "../../../utils/cx.js";
+import { usePortalContainer } from "../../../provider/context.js";
+import { BlockButton } from "../BlockButton/BlockButton.js";
+import IconButton_module_default from "../IconButton/IconButton.module.js";
+import { useAnchoredPosition } from "../../../hooks/useAnchoredPosition.js";
+import { mergeRefs } from "../../../utils/refs.js";
+import BlockMenu_module_default from "./BlockMenu.module.js";
+import { isMenuItem, typeaheadIndex } from "./BlockMenu.utils.js";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { ChevronDownIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actions/BlockMenu/BlockMenu.tsx
+/**
+* Dropdown menu button following the WAI-ARIA menu button pattern: arrow keys
+* move with wrap-around, Home/End jump, letters type-ahead, Enter/Space choose
+* and Escape closes — focus always returns to the trigger. The menu renders in
+* the provider's overlay layer, so scroll containers (tables) never clip it.
+*/
+var BlockMenu = forwardRef(function BlockMenu({ label, items, onSelect, variant = "stone", size = "md", icon, iconOnly = false, align = "start", placement = "bottom", disabled = false, onOpenChange, className, ...rest }, ref) {
+	const baseId = useId();
+	const triggerId = `${baseId}-trigger`;
+	const menuId = `${baseId}-menu`;
+	const container = usePortalContainer();
+	const rootRef = useRef(null);
+	const menuRef = useRef(null);
+	const triggerRef = useRef(null);
+	const itemRefs = useRef(/* @__PURE__ */ new Map());
+	const [open, setOpenState] = useState(false);
+	const [focusTarget, setFocusTarget] = useState(null);
+	const position = useAnchoredPosition(triggerRef, menuRef, open, {
+		side: placement,
+		align: align === "end" ? "end" : "start",
+		gap: 4
+	});
+	const isInside = (node) => Boolean(node && (rootRef.current?.contains(node) || menuRef.current?.contains(node)));
+	const menuItems = items.filter(isMenuItem);
+	const enabledIndexes = menuItems.flatMap((item, index) => item.disabled ? [] : [index]);
+	const setOpen = (next) => {
+		setOpenState(next);
+		onOpenChange?.(next);
+	};
+	const openMenu = (target) => {
+		if (disabled || enabledIndexes.length === 0) return;
+		setOpen(true);
+		setFocusTarget(target);
+	};
+	const closeMenu = (returnFocus) => {
+		setOpen(false);
+		setFocusTarget(null);
+		if (returnFocus) triggerRef.current?.focus();
+	};
+	const focusItem = (index) => {
+		const item = menuItems[index];
+		if (item) itemRefs.current.get(item.id)?.focus();
+	};
+	useEffect(() => {
+		if (!open || focusTarget === null || !position) return;
+		const index = focusTarget === "first" ? enabledIndexes[0] : focusTarget === "last" ? enabledIndexes[enabledIndexes.length - 1] : focusTarget;
+		if (index !== void 0) focusItem(index);
+	}, [
+		open,
+		focusTarget,
+		position !== null
+	]);
+	useEffect(() => {
+		if (!open) return;
+		const onPointerDown = (event) => {
+			if (!isInside(event.target)) closeMenu(false);
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => document.removeEventListener("pointerdown", onPointerDown);
+	}, [open]);
+	const choose = (item) => {
+		if (item.disabled) return;
+		closeMenu(true);
+		item.onSelect?.();
+		onSelect?.(item.id);
+	};
+	const onTriggerKeyDown = (event) => {
+		if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			openMenu("first");
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			openMenu("last");
+		}
+	};
+	const onMenuKeyDown = (event) => {
+		const current = menuItems.findIndex((item) => itemRefs.current.get(item.id) === document.activeElement);
+		const position = enabledIndexes.indexOf(current);
+		const count = enabledIndexes.length;
+		let next;
+		switch (event.key) {
+			case "ArrowDown":
+				next = enabledIndexes[(position + 1) % count];
+				break;
+			case "ArrowUp":
+				next = enabledIndexes[(position - 1 + count) % count];
+				break;
+			case "Home":
+				next = enabledIndexes[0];
+				break;
+			case "End":
+				next = enabledIndexes[count - 1];
+				break;
+			case "Escape":
+				event.preventDefault();
+				event.stopPropagation();
+				closeMenu(true);
+				return;
+			case "Tab":
+				closeMenu(true);
+				return;
+			default: if (event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey) {
+				const match = typeaheadIndex(menuItems, current, event.key);
+				if (match >= 0) next = match;
+			}
+		}
+		if (next === void 0) return;
+		event.preventDefault();
+		focusItem(next);
+	};
+	const onMenuBlur = (event) => {
+		if (!isInside(event.relatedTarget)) closeMenu(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: mergeRefs(ref, rootRef),
+		className: cx(BlockMenu_module_default.root, className),
+		"data-open": open || void 0,
+		...rest,
+		children: [/* @__PURE__ */ jsx(BlockButton, {
+			ref: triggerRef,
+			id: triggerId,
+			variant,
+			size,
+			disabled,
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			"aria-controls": menuId,
+			"aria-label": iconOnly ? label : void 0,
+			title: iconOnly ? label : void 0,
+			startIcon: iconOnly ? void 0 : icon,
+			endIcon: iconOnly ? void 0 : /* @__PURE__ */ jsx("span", {
+				className: BlockMenu_module_default.chevron,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
+			}),
+			className: cx(iconOnly && IconButton_module_default.iconButton),
+			onClick: () => open ? closeMenu(false) : openMenu("first"),
+			onKeyDown: onTriggerKeyDown,
+			children: iconOnly ? /* @__PURE__ */ jsx("span", {
+				className: IconButton_module_default.icon,
+				"aria-hidden": "true",
+				children: icon
+			}) : label
+		}), container ? createPortal(/* @__PURE__ */ jsx("div", {
+			ref: menuRef,
+			id: menuId,
+			role: "menu",
+			tabIndex: -1,
+			"aria-labelledby": triggerId,
+			hidden: !open,
+			"data-align": align,
+			"data-placement": position?.side ?? placement,
+			className: BlockMenu_module_default.menu,
+			style: position?.style,
+			onKeyDown: onMenuKeyDown,
+			onBlur: onMenuBlur,
+			children: items.map((entry, index) => {
+				if (!isMenuItem(entry)) return /* @__PURE__ */ jsx("div", {
+					role: "separator",
+					className: BlockMenu_module_default.separator
+				}, entry.id ?? `separator-${index}`);
+				return /* @__PURE__ */ jsxs("button", {
+					ref: (element) => {
+						if (element) itemRefs.current.set(entry.id, element);
+						else itemRefs.current.delete(entry.id);
+					},
+					type: "button",
+					role: "menuitem",
+					tabIndex: -1,
+					"aria-disabled": entry.disabled || void 0,
+					"data-danger": entry.danger || void 0,
+					className: BlockMenu_module_default.item,
+					onClick: () => choose(entry),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: BlockMenu_module_default.icon,
+							"aria-hidden": "true",
+							children: entry.icon
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: BlockMenu_module_default.label,
+							children: entry.label
+						}),
+						entry.shortcut ? /* @__PURE__ */ jsx("kbd", {
+							className: BlockMenu_module_default.shortcut,
+							"aria-hidden": "true",
+							children: entry.shortcut
+						}) : null
+					]
+				}, entry.id);
+			})
+		}), container) : null]
+	});
+});
+//#endregion
+export { BlockMenu };
+
+//# sourceMappingURL=BlockMenu.js.map

package/dist/components/actions/BlockMenu/BlockMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockMenu.js","names":["styles","iconButtonStyles"],"sources":["../../../../src/components/actions/BlockMenu/BlockMenu.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@malilion/block-ui-icons\";\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type FocusEvent,\n  type KeyboardEvent,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPosition } from \"../../../hooks/useAnchoredPosition\";\nimport { usePortalContainer } from \"../../../provider/context\";\nimport { cx } from \"../../../utils/cx\";\nimport { mergeRefs } from \"../../../utils/refs\";\nimport { BlockButton } from \"../BlockButton/BlockButton\";\nimport iconButtonStyles from \"../IconButton/IconButton.module.css\";\nimport styles from \"./BlockMenu.module.css\";\nimport type { BlockMenuItem, BlockMenuProps } from \"./BlockMenu.types\";\nimport { isMenuItem, typeaheadIndex } from \"./BlockMenu.utils\";\n\ntype FocusTarget = \"first\" | \"last\" | number;\n\n/**\n * Dropdown menu button following the WAI-ARIA menu button pattern: arrow keys\n * move with wrap-around, Home/End jump, letters type-ahead, Enter/Space choose\n * and Escape closes — focus always returns to the trigger. The menu renders in\n * the provider's overlay layer, so scroll containers (tables) never clip it.\n */\nexport const BlockMenu = forwardRef<HTMLDivElement, BlockMenuProps>(function BlockMenu(\n  {\n    label,\n    items,\n    onSelect,\n    variant = \"stone\",\n    size = \"md\",\n    icon,\n    iconOnly = false,\n    align = \"start\",\n    placement = \"bottom\",\n    disabled = false,\n    onOpenChange,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const baseId = useId();\n  const triggerId = `${baseId}-trigger`;\n  const menuId = `${baseId}-menu`;\n  const container = usePortalContainer();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const itemRefs = useRef(new Map<string, HTMLButtonElement>());\n  const [open, setOpenState] = useState(false);\n  const [focusTarget, setFocusTarget] = useState<FocusTarget | null>(null);\n\n  const position = useAnchoredPosition(triggerRef, menuRef, open, {\n    side: placement,\n    align: align === \"end\" ? \"end\" : \"start\",\n    gap: 4,\n  });\n  const isInside = (node: Node | null) =>\n    Boolean(node && (rootRef.current?.contains(node) || menuRef.current?.contains(node)));\n\n  const menuItems = items.filter(isMenuItem);\n  const enabledIndexes = menuItems.flatMap((item, index) => (item.disabled ? [] : [index]));\n\n  const setOpen = (next: boolean) => {\n    setOpenState(next);\n    onOpenChange?.(next);\n  };\n\n  const openMenu = (target: FocusTarget) => {\n    if (disabled || enabledIndexes.length === 0) return;\n    setOpen(true);\n    setFocusTarget(target);\n  };\n\n  const closeMenu = (returnFocus: boolean) => {\n    setOpen(false);\n    setFocusTarget(null);\n    if (returnFocus) triggerRef.current?.focus();\n  };\n\n  const focusItem = (index: number) => {\n    const item = menuItems[index];\n    if (item) itemRefs.current.get(item.id)?.focus();\n  };\n\n  useEffect(() => {\n    if (!open || focusTarget === null || !position) return;\n    const index =\n      focusTarget === \"first\"\n        ? enabledIndexes[0]\n        : focusTarget === \"last\"\n          ? enabledIndexes[enabledIndexes.length - 1]\n          : focusTarget;\n    if (index !== undefined) focusItem(index);\n    // Focus once the menu is open and positioned, or when the target changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, focusTarget, position !== null]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: PointerEvent) => {\n      if (!isInside(event.target as Node)) closeMenu(false);\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  const choose = (item: BlockMenuItem) => {\n    if (item.disabled) return;\n    closeMenu(true);\n    item.onSelect?.();\n    onSelect?.(item.id);\n  };\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === \"ArrowDown\" || event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      openMenu(\"first\");\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      openMenu(\"last\");\n    }\n  };\n\n  const onMenuKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const current = menuItems.findIndex(\n      (item) => itemRefs.current.get(item.id) === document.activeElement,\n    );\n    const position = enabledIndexes.indexOf(current);\n    const count = enabledIndexes.length;\n    let next: number | undefined;\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        next = enabledIndexes[(position + 1) % count];\n        break;\n      case \"ArrowUp\":\n        next = enabledIndexes[(position - 1 + count) % count];\n        break;\n      case \"Home\":\n        next = enabledIndexes[0];\n        break;\n      case \"End\":\n        next = enabledIndexes[count - 1];\n        break;\n      case \"Escape\":\n        event.preventDefault();\n        event.stopPropagation();\n        closeMenu(true);\n        return;\n      case \"Tab\":\n        // The menu lives in the overlay layer at the end of the page: hand focus back to the\n        // trigger first so the browser's Tab continues from the trigger's place in the page.\n        closeMenu(true);\n        return;\n      default:\n        if (event.key.length === 1 && /\\S/.test(event.key) && !event.ctrlKey && !event.metaKey) {\n          const match = typeaheadIndex(menuItems, current, event.key);\n          if (match >= 0) next = match;\n        }\n    }\n    if (next === undefined) return;\n    event.preventDefault();\n    focusItem(next);\n  };\n\n  const onMenuBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (!isInside(event.relatedTarget as Node | null)) closeMenu(false);\n  };\n\n  return (\n    <div\n      ref={mergeRefs(ref, rootRef)}\n      className={cx(styles.root, className)}\n      data-open={open || undefined}\n      {...rest}\n    >\n      <BlockButton\n        ref={triggerRef}\n        id={triggerId}\n        variant={variant}\n        size={size}\n        disabled={disabled}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-controls={menuId}\n        aria-label={iconOnly ? label : undefined}\n        title={iconOnly ? label : undefined}\n        startIcon={iconOnly ? undefined : icon}\n        endIcon={\n          iconOnly ? undefined : (\n            <span className={styles.chevron} aria-hidden=\"true\">\n              <ChevronDownIcon size={16} />\n            </span>\n          )\n        }\n        className={cx(iconOnly && iconButtonStyles.iconButton)}\n        onClick={() => (open ? closeMenu(false) : openMenu(\"first\"))}\n        onKeyDown={onTriggerKeyDown}\n      >\n        {iconOnly ? (\n          <span className={iconButtonStyles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        ) : (\n          label\n        )}\n      </BlockButton>\n      {container\n        ? createPortal(\n            <div\n              ref={menuRef}\n              id={menuId}\n              role=\"menu\"\n              tabIndex={-1}\n              aria-labelledby={triggerId}\n              hidden={!open}\n              data-align={align}\n              data-placement={position?.side ?? placement}\n              className={styles.menu}\n              style={position?.style}\n              onKeyDown={onMenuKeyDown}\n              onBlur={onMenuBlur}\n            >\n              {items.map((entry, index) => {\n                if (!isMenuItem(entry)) {\n                  return (\n                    <div\n                      key={entry.id ?? `separator-${index}`}\n                      role=\"separator\"\n                      className={styles.separator}\n                    />\n                  );\n                }\n                return (\n                  <button\n                    key={entry.id}\n                    ref={(element) => {\n                      if (element) itemRefs.current.set(entry.id, element);\n                      else itemRefs.current.delete(entry.id);\n                    }}\n                    type=\"button\"\n                    role=\"menuitem\"\n                    tabIndex={-1}\n                    aria-disabled={entry.disabled || undefined}\n                    data-danger={entry.danger || undefined}\n                    className={styles.item}\n                    onClick={() => choose(entry)}\n                  >\n                    <span className={styles.icon} aria-hidden=\"true\">\n                      {entry.icon}\n                    </span>\n                    <span className={styles.label}>{entry.label}</span>\n                    {entry.shortcut ? (\n                      <kbd className={styles.shortcut} aria-hidden=\"true\">\n                        {entry.shortcut}\n                      </kbd>\n                    ) : null}\n                  </button>\n                );\n              })}\n            </div>,\n            container,\n          )\n        : null}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/actions/BlockMenu/BlockMenu.module.js

@@ -0,0 +1,23 @@
+//#region src/components/actions/BlockMenu/BlockMenu.module.css
+var root = "block-root-YWJbx";
+var chevron = "block-chevron-KdTgQ";
+var menu = "block-menu-KgvDw";
+var item = "block-item-u39c-";
+var icon = "block-icon-OVCC3";
+var label = "block-label-r-rZl";
+var shortcut = "block-shortcut-5Sekq";
+var separator = "block-separator-xmDN6";
+var BlockMenu_module_default = {
+	root,
+	chevron,
+	menu,
+	item,
+	icon,
+	label,
+	shortcut,
+	separator
+};
+//#endregion
+export { chevron, BlockMenu_module_default as default, icon, item, label, menu, root, separator, shortcut };
+
+//# sourceMappingURL=BlockMenu.module.js.map

package/dist/components/actions/BlockMenu/BlockMenu.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockMenu.module.js","names":[],"sources":["../../../../src/components/actions/BlockMenu/BlockMenu.module.css"],"sourcesContent":[".root {\n  position: relative;\n  display: inline-flex;\n}\n\n.chevron {\n  display: inline-flex;\n  transition: transform var(--block-duration-instant) var(--block-ease-step);\n}\n\n.root[data-open] .chevron {\n  transform: rotate(180deg);\n}\n\n.menu {\n  position: fixed;\n  top: var(--block-float-y, 0);\n  left: var(--block-float-x, 0);\n  z-index: var(--block-z-dropdown);\n  display: flex;\n  flex-direction: column;\n  min-width: max(var(--block-float-anchor-width, 0px), 200px);\n  max-width: min(320px, calc(100vw - var(--block-space-4)));\n  max-height: calc(100vh - var(--block-space-4));\n  overflow-y: auto;\n  padding: var(--block-space-1);\n  background-color: var(--block-surface);\n  border: var(--block-border-width) solid var(--block-border);\n  box-shadow: var(--block-shadow-bevel), var(--block-shadow-drop);\n}\n\n.menu[hidden] {\n  display: none;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: var(--block-space-2);\n  width: 100%;\n  min-height: var(--block-size-control-sm);\n  padding: var(--block-space-1) var(--block-space-2);\n  font: inherit;\n  font-size: var(--block-font-size-sm);\n  font-weight: var(--block-font-weight-medium);\n  text-align: left;\n  color: var(--block-text);\n  background: transparent;\n  border: var(--block-border-width-thin) solid transparent;\n  cursor: pointer;\n}\n\n.item:hover:not([aria-disabled]),\n.item:focus-visible {\n  background-color: var(--block-slot-hover);\n  border-color: var(--block-border);\n}\n\n.item:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: -3px;\n}\n\n.item[aria-disabled] {\n  color: var(--block-text-muted);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.item[data-danger] {\n  color: var(--block-redstone-light);\n}\n\n.icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  width: 16px;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.shortcut {\n  flex-shrink: 0;\n  margin-left: var(--block-space-3);\n  font-family: var(--block-font-mono);\n  font-size: var(--block-font-size-xs);\n  color: var(--block-text-muted);\n}\n\n.separator {\n  height: 4px;\n  margin: var(--block-space-1) 0;\n  background-color: var(--block-shadow-bevel-dark);\n  box-shadow: inset -2px -2px 0 var(--block-shadow-bevel-light);\n}\n"],"mappings":""}

package/dist/components/actions/BlockMenu/BlockMenu.types.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockButtonSize, BlockButtonVariant } from "../BlockButton/BlockButton.types";
+export interface BlockMenuItem {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    /** Keyboard shortcut hint shown on the right (display only). */
+    shortcut?: string;
+    disabled?: boolean;
+    /** Redstone-colored destructive action. */
+    danger?: boolean;
+    onSelect?: () => void;
+    /** Text used for type-ahead when `label` is not a string. */
+    textValue?: string;
+}
+export interface BlockMenuSeparator {
+    type: "separator";
+    id?: string;
+}
+export type BlockMenuEntry = BlockMenuItem | BlockMenuSeparator;
+export interface BlockMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Trigger button text — also the menu's accessible name. */
+    label: string;
+    items: BlockMenuEntry[];
+    /** Called with the item id after any item is chosen. */
+    onSelect?: (id: string) => void;
+    /** Trigger material. @default "stone" */
+    variant?: BlockButtonVariant;
+    /** Trigger size. @default "md" */
+    size?: BlockButtonSize;
+    /** Icon before the trigger text, or the whole trigger when `iconOnly`. */
+    icon?: ReactNode;
+    /** Square icon trigger; `label` becomes its `aria-label`. */
+    iconOnly?: boolean;
+    /** Align the menu with the trigger's start or end edge. @default "start" */
+    align?: "start" | "end";
+    /** Open below or above the trigger. @default "bottom" */
+    placement?: "bottom" | "top";
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+//# sourceMappingURL=BlockMenu.types.d.ts.map

package/dist/components/actions/BlockMenu/BlockMenu.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockMenu.types.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockMenu/BlockMenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAE5F,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,WAAW,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,kBAAkB,CAAC;AAEhE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACtF,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,yCAAyC;IACzC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,kCAAkC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,yDAAyD;IACzD,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC"}

package/dist/components/actions/BlockMenu/BlockMenu.utils.d.ts

@@ -0,0 +1,10 @@
+import type { BlockMenuEntry, BlockMenuItem } from "./BlockMenu.types";
+export declare function isMenuItem(entry: BlockMenuEntry): entry is BlockMenuItem;
+/** Text an item answers to for type-ahead. */
+export declare function itemText(item: BlockMenuItem): string;
+/**
+ * Index of the next enabled item whose text starts with `char`, searching
+ * forward from the item after `from` and wrapping around.
+ */
+export declare function typeaheadIndex(items: BlockMenuItem[], from: number, char: string): number;
+//# sourceMappingURL=BlockMenu.utils.d.ts.map

package/dist/components/actions/BlockMenu/BlockMenu.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockMenu.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockMenu/BlockMenu.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvE,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,IAAI,aAAa,CAExE;AAED,8CAA8C;AAC9C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,aAAa,GAAG,MAAM,CAGpD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAQzF"}

package/dist/components/actions/BlockMenu/BlockMenu.utils.js

@@ -0,0 +1,26 @@
+//#region src/components/actions/BlockMenu/BlockMenu.utils.ts
+function isMenuItem(entry) {
+	return !("type" in entry && entry.type === "separator");
+}
+/** Text an item answers to for type-ahead. */
+function itemText(item) {
+	if (item.textValue !== void 0) return item.textValue;
+	return typeof item.label === "string" || typeof item.label === "number" ? String(item.label) : "";
+}
+/**
+* Index of the next enabled item whose text starts with `char`, searching
+* forward from the item after `from` and wrapping around.
+*/
+function typeaheadIndex(items, from, char) {
+	const needle = char.toLowerCase();
+	for (let step = 1; step <= items.length; step += 1) {
+		const index = (from + step) % items.length;
+		const item = items[index];
+		if (item && !item.disabled && itemText(item).toLowerCase().startsWith(needle)) return index;
+	}
+	return -1;
+}
+//#endregion
+export { isMenuItem, itemText, typeaheadIndex };
+
+//# sourceMappingURL=BlockMenu.utils.js.map

package/dist/components/actions/BlockMenu/BlockMenu.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockMenu.utils.js","names":[],"sources":["../../../../src/components/actions/BlockMenu/BlockMenu.utils.ts"],"sourcesContent":["import type { BlockMenuEntry, BlockMenuItem } from \"./BlockMenu.types\";\n\nexport function isMenuItem(entry: BlockMenuEntry): entry is BlockMenuItem {\n  return !(\"type\" in entry && entry.type === \"separator\");\n}\n\n/** Text an item answers to for type-ahead. */\nexport function itemText(item: BlockMenuItem): string {\n  if (item.textValue !== undefined) return item.textValue;\n  return typeof item.label === \"string\" || typeof item.label === \"number\" ? String(item.label) : \"\";\n}\n\n/**\n * Index of the next enabled item whose text starts with `char`, searching\n * forward from the item after `from` and wrapping around.\n */\nexport function typeaheadIndex(items: BlockMenuItem[], from: number, char: string): number {\n  const needle = char.toLowerCase();\n  for (let step = 1; step <= items.length; step += 1) {\n    const index = (from + step) % items.length;\n    const item = items[index];\n    if (item && !item.disabled && itemText(item).toLowerCase().startsWith(needle)) return index;\n  }\n  return -1;\n}\n"],"mappings":";AAEA,SAAgB,WAAW,OAA+C;CACxE,OAAO,EAAE,UAAU,SAAS,MAAM,SAAS;AAC7C;;AAGA,SAAgB,SAAS,MAA6B;CACpD,IAAI,KAAK,cAAc,KAAA,GAAW,OAAO,KAAK;CAC9C,OAAO,OAAO,KAAK,UAAU,YAAY,OAAO,KAAK,UAAU,WAAW,OAAO,KAAK,KAAK,IAAI;AACjG;;;;;AAMA,SAAgB,eAAe,OAAwB,MAAc,MAAsB;CACzF,MAAM,SAAS,KAAK,YAAY;CAChC,KAAK,IAAI,OAAO,GAAG,QAAQ,MAAM,QAAQ,QAAQ,GAAG;EAClD,MAAM,SAAS,OAAO,QAAQ,MAAM;EACpC,MAAM,OAAO,MAAM;EACnB,IAAI,QAAQ,CAAC,KAAK,YAAY,SAAS,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,WAAW,MAAM,GAAG,OAAO;CACxF;CACA,OAAO;AACT"}

package/dist/components/actions/BlockMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { BlockMenu } from "./BlockMenu";
+export type { BlockMenuEntry, BlockMenuItem, BlockMenuProps, BlockMenuSeparator, } from "./BlockMenu.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/actions/BlockMenu/index.d.ts.map

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

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

@@ -1,3 +1,4 @@
 export * from "./BlockButton";
 export * from "./IconButton";
+export * from "./BlockMenu";
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/cards/ServerBrowser/ServerBrowser.d.ts

@@ -0,0 +1,7 @@
+import type { ServerBrowserProps } from "./ServerBrowser.types";
+/**
+ * Multiplayer server list: search, sort and an "online only" switch over
+ * `ServerCard`s, with optional Refresh and Add server actions.
+ */
+export declare const ServerBrowser: import("react").ForwardRefExoticComponent<ServerBrowserProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ServerBrowser.d.ts.map

package/dist/components/cards/ServerBrowser/ServerBrowser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerBrowser.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/ServerBrowser/ServerBrowser.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAc,MAAM,uBAAuB,CAAC;AAS5E;;;GAGG;AACH,eAAO,MAAM,aAAa,+GAuExB,CAAC"}

package/dist/components/cards/ServerBrowser/ServerBrowser.js

@@ -0,0 +1,106 @@
+import { cx } from "../../../utils/cx.js";
+import { BlockButton } from "../../actions/BlockButton/BlockButton.js";
+import { BlockInput } from "../../forms/BlockInput/BlockInput.js";
+import { BlockSelect } from "../../forms/BlockSelect/BlockSelect.js";
+import { BlockToggle } from "../../forms/BlockToggle/BlockToggle.js";
+import { ServerCard } from "../ServerCard/ServerCard.js";
+import browser_module_default from "../browser.module.js";
+import { browseServers } from "./ServerBrowser.utils.js";
+import { forwardRef, useState } from "react";
+import { PlusIcon, SearchIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/cards/ServerBrowser/ServerBrowser.tsx
+var SORT_OPTIONS = [
+	{
+		value: "players",
+		label: "Most players"
+	},
+	{
+		value: "ping",
+		label: "Lowest ping"
+	},
+	{
+		value: "name",
+		label: "Name"
+	}
+];
+/**
+* Multiplayer server list: search, sort and an "online only" switch over
+* `ServerCard`s, with optional Refresh and Add server actions.
+*/
+var ServerBrowser = forwardRef(function ServerBrowser({ servers, onJoin, onRefresh, onAddServer, defaultSort = "players", emptyText = "No servers found", label = "Server browser", className, ...rest }, ref) {
+	const [query, setQuery] = useState("");
+	const [onlineOnly, setOnlineOnly] = useState(false);
+	const [sort, setSort] = useState(defaultSort);
+	const visible = browseServers(servers, {
+		query,
+		onlineOnly,
+		sort
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "region",
+		"aria-label": label,
+		className: cx(browser_module_default.browser, className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: browser_module_default.toolbar,
+				children: [
+					/* @__PURE__ */ jsx(BlockInput, {
+						type: "search",
+						label: "Search servers",
+						value: query,
+						onChange: (event) => setQuery(event.target.value),
+						startIcon: /* @__PURE__ */ jsx(SearchIcon, { size: 16 }),
+						wrapperClassName: browser_module_default.search
+					}),
+					/* @__PURE__ */ jsx(BlockSelect, {
+						label: "Sort by",
+						value: sort,
+						onChange: (event) => setSort(event.target.value),
+						options: SORT_OPTIONS,
+						wrapperClassName: browser_module_default.filter
+					}),
+					/* @__PURE__ */ jsx(BlockToggle, {
+						label: "Online only",
+						checked: onlineOnly,
+						onCheckedChange: setOnlineOnly
+					}),
+					onRefresh || onAddServer ? /* @__PURE__ */ jsxs("div", {
+						className: browser_module_default.actions,
+						children: [onRefresh ? /* @__PURE__ */ jsx(BlockButton, {
+							onClick: onRefresh,
+							children: "Refresh"
+						}) : null, onAddServer ? /* @__PURE__ */ jsx(BlockButton, {
+							variant: "grass",
+							startIcon: /* @__PURE__ */ jsx(PlusIcon, { size: 16 }),
+							onClick: onAddServer,
+							children: "Add server"
+						}) : null]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: browser_module_default.count,
+				role: "status",
+				children: visible.length === 1 ? "1 server" : `${visible.length} servers`
+			}),
+			visible.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				className: browser_module_default.list,
+				"aria-label": "Servers",
+				children: visible.map(({ id, ...server }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ServerCard, {
+					...server,
+					onJoin: onJoin ? () => onJoin(id) : void 0
+				}) }, id))
+			}) : /* @__PURE__ */ jsx("p", {
+				className: browser_module_default.empty,
+				children: emptyText
+			})
+		]
+	});
+});
+//#endregion
+export { ServerBrowser };
+
+//# sourceMappingURL=ServerBrowser.js.map

package/dist/components/cards/ServerBrowser/ServerBrowser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerBrowser.js","names":["styles"],"sources":["../../../../src/components/cards/ServerBrowser/ServerBrowser.tsx"],"sourcesContent":["import { PlusIcon, SearchIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef, useState } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport { BlockButton } from \"../../actions/BlockButton/BlockButton\";\nimport { BlockInput } from \"../../forms/BlockInput/BlockInput\";\nimport { BlockSelect } from \"../../forms/BlockSelect/BlockSelect\";\nimport { BlockToggle } from \"../../forms/BlockToggle/BlockToggle\";\nimport styles from \"../browser.module.css\";\nimport { ServerCard } from \"../ServerCard/ServerCard\";\nimport type { ServerBrowserProps, ServerSort } from \"./ServerBrowser.types\";\nimport { browseServers } from \"./ServerBrowser.utils\";\n\nconst SORT_OPTIONS = [\n  { value: \"players\", label: \"Most players\" },\n  { value: \"ping\", label: \"Lowest ping\" },\n  { value: \"name\", label: \"Name\" },\n];\n\n/**\n * Multiplayer server list: search, sort and an \"online only\" switch over\n * `ServerCard`s, with optional Refresh and Add server actions.\n */\nexport const ServerBrowser = forwardRef<HTMLDivElement, ServerBrowserProps>(function ServerBrowser(\n  {\n    servers,\n    onJoin,\n    onRefresh,\n    onAddServer,\n    defaultSort = \"players\",\n    emptyText = \"No servers found\",\n    label = \"Server browser\",\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [query, setQuery] = useState(\"\");\n  const [onlineOnly, setOnlineOnly] = useState(false);\n  const [sort, setSort] = useState<ServerSort>(defaultSort);\n  const visible = browseServers(servers, { query, onlineOnly, sort });\n\n  return (\n    <div\n      ref={ref}\n      role=\"region\"\n      aria-label={label}\n      className={cx(styles.browser, className)}\n      {...rest}\n    >\n      <div className={styles.toolbar}>\n        <BlockInput\n          type=\"search\"\n          label=\"Search servers\"\n          value={query}\n          onChange={(event) => setQuery(event.target.value)}\n          startIcon={<SearchIcon size={16} />}\n          wrapperClassName={styles.search}\n        />\n        <BlockSelect\n          label=\"Sort by\"\n          value={sort}\n          onChange={(event) => setSort(event.target.value as ServerSort)}\n          options={SORT_OPTIONS}\n          wrapperClassName={styles.filter}\n        />\n        <BlockToggle label=\"Online only\" checked={onlineOnly} onCheckedChange={setOnlineOnly} />\n        {onRefresh || onAddServer ? (\n          <div className={styles.actions}>\n            {onRefresh ? <BlockButton onClick={onRefresh}>Refresh</BlockButton> : null}\n            {onAddServer ? (\n              <BlockButton variant=\"grass\" startIcon={<PlusIcon size={16} />} onClick={onAddServer}>\n                Add server\n              </BlockButton>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n      <p className={styles.count} role=\"status\">\n        {visible.length === 1 ? \"1 server\" : `${visible.length} servers`}\n      </p>\n      {visible.length > 0 ? (\n        <ul className={styles.list} aria-label=\"Servers\">\n          {visible.map(({ id, ...server }) => (\n            <li key={id}>\n              <ServerCard {...server} onJoin={onJoin ? () => onJoin(id) : undefined} />\n            </li>\n          ))}\n        </ul>\n      ) : (\n        <p className={styles.empty}>{emptyText}</p>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,eAAe;CACnB;EAAE,OAAO;EAAW,OAAO;CAAe;CAC1C;EAAE,OAAO;EAAQ,OAAO;CAAc;CACtC;EAAE,OAAO;EAAQ,OAAO;CAAO;AACjC;;;;;AAMA,IAAa,gBAAgB,WAA+C,SAAS,cACnF,EACE,SACA,QACA,WACA,aACA,cAAc,WACd,YAAY,oBACZ,QAAQ,kBACR,WACA,GAAG,QAEL,KACA;CACA,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CACrC,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,CAAC,MAAM,WAAW,SAAqB,WAAW;CACxD,MAAM,UAAU,cAAc,SAAS;EAAE;EAAO;EAAY;CAAK,CAAC;CAElE,OACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,WAAW,GAAGA,uBAAO,SAAS,SAAS;EACvC,GAAI;EALN,UAAA;GAOE,qBAAC,OAAD;IAAK,WAAWA,uBAAO;IAAvB,UAAA;KACE,oBAAC,YAAD;MACE,MAAK;MACL,OAAM;MACN,OAAO;MACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;MAChD,WAAW,oBAAC,YAAD,EAAY,MAAM,GAAK,CAAA;MAClC,kBAAkBA,uBAAO;KAC1B,CAAA;KACD,oBAAC,aAAD;MACE,OAAM;MACN,OAAO;MACP,WAAW,UAAU,QAAQ,MAAM,OAAO,KAAmB;MAC7D,SAAS;MACT,kBAAkBA,uBAAO;KAC1B,CAAA;KACD,oBAAC,aAAD;MAAa,OAAM;MAAc,SAAS;MAAY,iBAAiB;KAAgB,CAAA;KACtF,aAAa,cACZ,qBAAC,OAAD;MAAK,WAAWA,uBAAO;MAAvB,UAAA,CACG,YAAY,oBAAC,aAAD;OAAa,SAAS;OAAW,UAAA;MAAoB,CAAA,IAAI,MACrE,cACC,oBAAC,aAAD;OAAa,SAAQ;OAAQ,WAAW,oBAAC,UAAD,EAAU,MAAM,GAAK,CAAA;OAAG,SAAS;OAAa,UAAA;MAEzE,CAAA,IACX,IACD;KACH,CAAA,IAAA;IACD;;GACL,oBAAC,KAAD;IAAG,WAAWA,uBAAO;IAAO,MAAK;IAC9B,UAAA,QAAQ,WAAW,IAAI,aAAa,GAAG,QAAQ,OAAO;GACtD,CAAA;GACF,QAAQ,SAAS,IAChB,oBAAC,MAAD;IAAI,WAAWA,uBAAO;IAAM,cAAW;IACpC,UAAA,QAAQ,KAAK,EAAE,IAAI,GAAG,aACrB,oBAAC,MAAD,EAAA,UACE,oBAAC,YAAD;KAAY,GAAI;KAAQ,QAAQ,eAAe,OAAO,EAAE,IAAI,KAAA;IAAY,CAAA,EACtE,GAFK,EAEL,CACL;GACC,CAAA,IAEJ,oBAAC,KAAD;IAAG,WAAWA,uBAAO;IAAQ,UAAA;GAAa,CAAA;EAEzC;;AAET,CAAC"}

package/dist/components/cards/ServerBrowser/ServerBrowser.types.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { ServerCardProps } from "../ServerCard/ServerCard.types";
+export interface ServerEntry extends Omit<ServerCardProps, "onJoin" | "id"> {
+    id: string;
+}
+export type ServerSort = "name" | "players" | "ping";
+export interface ServerBrowserProps extends HTMLAttributes<HTMLDivElement> {
+    servers: ServerEntry[];
+    /** Called with the server id when its Join button is pressed. */
+    onJoin?: (id: string) => void;
+    /** Renders a Refresh button. */
+    onRefresh?: () => void;
+    /** Renders an "Add server" button. */
+    onAddServer?: () => void;
+    /** Initial sort. @default "players" */
+    defaultSort?: ServerSort;
+    /** Shown when no server matches. @default "No servers found" */
+    emptyText?: ReactNode;
+    /** Accessible name. @default "Server browser" */
+    label?: string;
+}
+//# sourceMappingURL=ServerBrowser.types.d.ts.map

package/dist/components/cards/ServerBrowser/ServerBrowser.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerBrowser.types.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/ServerBrowser/ServerBrowser.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEtE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,IAAI,CAAC;IACzE,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,uCAAuC;IACvC,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,gEAAgE;IAChE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/cards/ServerBrowser/ServerBrowser.utils.d.ts

@@ -0,0 +1,8 @@
+import type { ServerEntry, ServerSort } from "./ServerBrowser.types";
+/** Filters by name / MOTD and the online switch, then sorts (offline servers last). */
+export declare function browseServers(servers: ServerEntry[], { query, onlineOnly, sort }: {
+    query: string;
+    onlineOnly: boolean;
+    sort: ServerSort;
+}): ServerEntry[];
+//# sourceMappingURL=ServerBrowser.utils.d.ts.map

package/dist/components/cards/ServerBrowser/ServerBrowser.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerBrowser.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/ServerBrowser/ServerBrowser.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAErE,uFAAuF;AACvF,wBAAgB,aAAa,CAC3B,OAAO,EAAE,WAAW,EAAE,EACtB,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,GACpF,WAAW,EAAE,CAgBf"}

package/dist/components/cards/ServerBrowser/ServerBrowser.utils.js

@@ -0,0 +1,16 @@
+//#region src/components/cards/ServerBrowser/ServerBrowser.utils.ts
+/** Filters by name / MOTD and the online switch, then sorts (offline servers last). */
+function browseServers(servers, { query, onlineOnly, sort }) {
+	const needle = query.trim().toLowerCase();
+	return [...servers.filter((server) => (!onlineOnly || server.online !== false) && (needle === "" || server.name.toLowerCase().includes(needle) || (server.motd ?? "").toLowerCase().includes(needle)))].sort((a, b) => {
+		const offline = Number(a.online === false) - Number(b.online === false);
+		if (offline !== 0) return offline;
+		if (sort === "players") return (b.onlinePlayers ?? 0) - (a.onlinePlayers ?? 0);
+		if (sort === "ping") return (a.ping ?? Infinity) - (b.ping ?? Infinity);
+		return a.name.localeCompare(b.name);
+	});
+}
+//#endregion
+export { browseServers };
+
+//# sourceMappingURL=ServerBrowser.utils.js.map

package/dist/components/cards/ServerBrowser/ServerBrowser.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerBrowser.utils.js","names":[],"sources":["../../../../src/components/cards/ServerBrowser/ServerBrowser.utils.ts"],"sourcesContent":["import type { ServerEntry, ServerSort } from \"./ServerBrowser.types\";\n\n/** Filters by name / MOTD and the online switch, then sorts (offline servers last). */\nexport function browseServers(\n  servers: ServerEntry[],\n  { query, onlineOnly, sort }: { query: string; onlineOnly: boolean; sort: ServerSort },\n): ServerEntry[] {\n  const needle = query.trim().toLowerCase();\n  const visible = servers.filter(\n    (server) =>\n      (!onlineOnly || server.online !== false) &&\n      (needle === \"\" ||\n        server.name.toLowerCase().includes(needle) ||\n        (server.motd ?? \"\").toLowerCase().includes(needle)),\n  );\n  return [...visible].sort((a, b) => {\n    const offline = Number(a.online === false) - Number(b.online === false);\n    if (offline !== 0) return offline;\n    if (sort === \"players\") return (b.onlinePlayers ?? 0) - (a.onlinePlayers ?? 0);\n    if (sort === \"ping\") return (a.ping ?? Infinity) - (b.ping ?? Infinity);\n    return a.name.localeCompare(b.name);\n  });\n}\n"],"mappings":";;AAGA,SAAgB,cACd,SACA,EAAE,OAAO,YAAY,QACN;CACf,MAAM,SAAS,MAAM,KAAK,CAAC,CAAC,YAAY;CAQxC,OAAO,CAAC,GAPQ,QAAQ,QACrB,YACE,CAAC,cAAc,OAAO,WAAW,WACjC,WAAW,MACV,OAAO,KAAK,YAAY,CAAC,CAAC,SAAS,MAAM,MACxC,OAAO,QAAQ,GAAA,CAAI,YAAY,CAAC,CAAC,SAAS,MAAM,EAE5C,CAAO,CAAC,CAAC,MAAM,GAAG,MAAM;EACjC,MAAM,UAAU,OAAO,EAAE,WAAW,KAAK,IAAI,OAAO,EAAE,WAAW,KAAK;EACtE,IAAI,YAAY,GAAG,OAAO;EAC1B,IAAI,SAAS,WAAW,QAAQ,EAAE,iBAAiB,MAAM,EAAE,iBAAiB;EAC5E,IAAI,SAAS,QAAQ,QAAQ,EAAE,QAAQ,aAAa,EAAE,QAAQ;EAC9D,OAAO,EAAE,KAAK,cAAc,EAAE,IAAI;CACpC,CAAC;AACH"}

package/dist/components/cards/ServerBrowser/index.d.ts

@@ -0,0 +1,4 @@
+export { ServerBrowser } from "./ServerBrowser";
+export { browseServers } from "./ServerBrowser.utils";
+export type { ServerBrowserProps, ServerEntry, ServerSort } from "./ServerBrowser.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/cards/ServerBrowser/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/ServerBrowser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/cards/WorldBrowser/WorldBrowser.d.ts

@@ -0,0 +1,4 @@
+import type { WorldBrowserProps } from "./WorldBrowser.types";
+/** Singleplayer world list: search, game-mode filter and sort over `WorldCard`s. */
+export declare const WorldBrowser: import("react").ForwardRefExoticComponent<WorldBrowserProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=WorldBrowser.d.ts.map

package/dist/components/cards/WorldBrowser/WorldBrowser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorldBrowser.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/WorldBrowser/WorldBrowser.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAa,MAAM,sBAAsB,CAAC;AAQzE,oFAAoF;AACpF,eAAO,MAAM,YAAY,8GA+EvB,CAAC"}