@malilion/block-ui-react 0.1.0 → 0.3.0

package/dist/components/display/BlockTable/BlockTable.types.d.ts

@@ -0,0 +1,49 @@
+import type { Key, ReactNode, TableHTMLAttributes } from "react";
+export type BlockTableSortDirection = "asc" | "desc";
+export interface BlockTableSort {
+    key: string;
+    direction: BlockTableSortDirection;
+}
+export interface BlockTableColumn<T> {
+    /** Column id; also the default property read from each row. */
+    key: string;
+    header: ReactNode;
+    /** Custom cell content. Defaults to `row[key]`. */
+    cell?: (row: T, index: number) => ReactNode;
+    /** @default "start" */
+    align?: "start" | "center" | "end";
+    /** CSS width, e.g. `"120px"` or `"20%"`. */
+    width?: string;
+    sortable?: boolean;
+    /** Value used for sorting. Defaults to `row[key]`. */
+    sortValue?: (row: T) => string | number | null | undefined;
+    /** Render this column's cells as row headers (`<th scope="row">`). */
+    rowHeader?: boolean;
+}
+export interface BlockTableProps<T> extends Omit<TableHTMLAttributes<HTMLTableElement>, "children"> {
+    columns: BlockTableColumn<T>[];
+    rows: T[];
+    /** Stable key for each row. @default the row index */
+    getRowKey?: (row: T, index: number) => Key;
+    /** Table caption — required as the table's accessible name. */
+    caption: ReactNode;
+    /** Keep the caption for screen readers only. */
+    hideCaption?: boolean;
+    /** Controlled sort; `null` means unsorted. */
+    sort?: BlockTableSort | null;
+    defaultSort?: BlockTableSort | null;
+    onSortChange?: (sort: BlockTableSort | null) => void;
+    /** Turn off built-in sorting (e.g. when rows are sorted on the server). */
+    manualSort?: boolean;
+    /** Alternate row shading. */
+    striped?: boolean;
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** Keep the header visible while the page scrolls. */
+    stickyHeader?: boolean;
+    /** Shown in place of rows when `rows` is empty. @default "No data" */
+    emptyState?: ReactNode;
+    /** Class for the scroll container around the table. */
+    wrapperClassName?: string;
+}
+//# sourceMappingURL=BlockTable.types.d.ts.map

package/dist/components/display/BlockTable/BlockTable.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.types.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTable/BlockTable.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,uBAAuB,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,+DAA+D;IAC/D,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC5C,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3D,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,IAAI,CAC9C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,CACX;IACC,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,sDAAsD;IACtD,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;IAC3C,+DAA+D;IAC/D,OAAO,EAAE,SAAS,CAAC;IACnB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,2EAA2E;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sEAAsE;IACtE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}

package/dist/components/display/BlockTable/BlockTable.utils.d.ts

@@ -0,0 +1,8 @@
+import type { BlockTableColumn, BlockTableSort } from "./BlockTable.types";
+/** The property `key` of a row, when it is a renderable or sortable primitive. */
+export declare function readField(row: unknown, key: string): string | number | undefined;
+/** Returns a sorted copy of `rows` (stable; empty values last in both directions). */
+export declare function sortRows<T>(rows: T[], columns: BlockTableColumn<T>[], sort: BlockTableSort | null): T[];
+/** Clicking a header cycles: unsorted → ascending → descending → unsorted. */
+export declare function nextSort(current: BlockTableSort | null, key: string): BlockTableSort | null;
+//# sourceMappingURL=BlockTable.utils.d.ts.map

package/dist/components/display/BlockTable/BlockTable.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTable/BlockTable.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAI3E,kFAAkF;AAClF,wBAAgB,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAIhF;AAaD,sFAAsF;AACtF,wBAAgB,QAAQ,CAAC,CAAC,EACxB,IAAI,EAAE,CAAC,EAAE,EACT,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAC9B,IAAI,EAAE,cAAc,GAAG,IAAI,GAC1B,CAAC,EAAE,CAaL;AAED,8EAA8E;AAC9E,wBAAgB,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAI3F"}

package/dist/components/display/BlockTable/BlockTable.utils.js

@@ -0,0 +1,48 @@
+//#region src/components/display/BlockTable/BlockTable.utils.ts
+/** The property `key` of a row, when it is a renderable or sortable primitive. */
+function readField(row, key) {
+	if (row === null || typeof row !== "object") return void 0;
+	const value = row[key];
+	return typeof value === "string" || typeof value === "number" ? value : void 0;
+}
+var collator = new Intl.Collator(void 0, {
+	numeric: true,
+	sensitivity: "base"
+});
+function compare(a, b) {
+	if (a === null || a === void 0 || a === "") return b === null || b === void 0 || b === "" ? 0 : 1;
+	if (b === null || b === void 0 || b === "") return -1;
+	if (typeof a === "number" && typeof b === "number") return a - b;
+	return collator.compare(String(a), String(b));
+}
+/** Returns a sorted copy of `rows` (stable; empty values last in both directions). */
+function sortRows(rows, columns, sort) {
+	if (!sort) return rows;
+	const column = columns.find((candidate) => candidate.key === sort.key);
+	if (!column) return rows;
+	const value = (row) => column.sortValue ? column.sortValue(row) : readField(row, column.key);
+	const sign = sort.direction === "asc" ? 1 : -1;
+	return [...rows].sort((a, b) => {
+		const va = value(a);
+		const vb = value(b);
+		const empty = (v) => v === null || v === void 0 || v === "";
+		if (empty(va) || empty(vb)) return compare(va, vb);
+		return compare(va, vb) * sign;
+	});
+}
+/** Clicking a header cycles: unsorted → ascending → descending → unsorted. */
+function nextSort(current, key) {
+	if (current?.key !== key) return {
+		key,
+		direction: "asc"
+	};
+	if (current.direction === "asc") return {
+		key,
+		direction: "desc"
+	};
+	return null;
+}
+//#endregion
+export { nextSort, readField, sortRows };
+
+//# sourceMappingURL=BlockTable.utils.js.map

package/dist/components/display/BlockTable/BlockTable.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.utils.js","names":[],"sources":["../../../../src/components/display/BlockTable/BlockTable.utils.ts"],"sourcesContent":["import type { BlockTableColumn, BlockTableSort } from \"./BlockTable.types\";\n\ntype SortableValue = string | number | null | undefined;\n\n/** The property `key` of a row, when it is a renderable or sortable primitive. */\nexport function readField(row: unknown, key: string): string | number | undefined {\n  if (row === null || typeof row !== \"object\") return undefined;\n  const value = (row as Record<string, unknown>)[key];\n  return typeof value === \"string\" || typeof value === \"number\" ? value : undefined;\n}\n\nconst collator = new Intl.Collator(undefined, { numeric: true, sensitivity: \"base\" });\n\nfunction compare(a: SortableValue, b: SortableValue): number {\n  // Empty values always sort last.\n  if (a === null || a === undefined || a === \"\")\n    return b === null || b === undefined || b === \"\" ? 0 : 1;\n  if (b === null || b === undefined || b === \"\") return -1;\n  if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n  return collator.compare(String(a), String(b));\n}\n\n/** Returns a sorted copy of `rows` (stable; empty values last in both directions). */\nexport function sortRows<T>(\n  rows: T[],\n  columns: BlockTableColumn<T>[],\n  sort: BlockTableSort | null,\n): T[] {\n  if (!sort) return rows;\n  const column = columns.find((candidate) => candidate.key === sort.key);\n  if (!column) return rows;\n  const value = (row: T) => (column.sortValue ? column.sortValue(row) : readField(row, column.key));\n  const sign = sort.direction === \"asc\" ? 1 : -1;\n  return [...rows].sort((a, b) => {\n    const va = value(a);\n    const vb = value(b);\n    const empty = (v: SortableValue) => v === null || v === undefined || v === \"\";\n    if (empty(va) || empty(vb)) return compare(va, vb);\n    return compare(va, vb) * sign;\n  });\n}\n\n/** Clicking a header cycles: unsorted → ascending → descending → unsorted. */\nexport function nextSort(current: BlockTableSort | null, key: string): BlockTableSort | null {\n  if (current?.key !== key) return { key, direction: \"asc\" };\n  if (current.direction === \"asc\") return { key, direction: \"desc\" };\n  return null;\n}\n"],"mappings":";;AAKA,SAAgB,UAAU,KAAc,KAA0C;CAChF,IAAI,QAAQ,QAAQ,OAAO,QAAQ,UAAU,OAAO,KAAA;CACpD,MAAM,QAAS,IAAgC;CAC/C,OAAO,OAAO,UAAU,YAAY,OAAO,UAAU,WAAW,QAAQ,KAAA;AAC1E;AAEA,IAAM,WAAW,IAAI,KAAK,SAAS,KAAA,GAAW;CAAE,SAAS;CAAM,aAAa;AAAO,CAAC;AAEpF,SAAS,QAAQ,GAAkB,GAA0B;CAE3D,IAAI,MAAM,QAAQ,MAAM,KAAA,KAAa,MAAM,IACzC,OAAO,MAAM,QAAQ,MAAM,KAAA,KAAa,MAAM,KAAK,IAAI;CACzD,IAAI,MAAM,QAAQ,MAAM,KAAA,KAAa,MAAM,IAAI,OAAO;CACtD,IAAI,OAAO,MAAM,YAAY,OAAO,MAAM,UAAU,OAAO,IAAI;CAC/D,OAAO,SAAS,QAAQ,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC;AAC9C;;AAGA,SAAgB,SACd,MACA,SACA,MACK;CACL,IAAI,CAAC,MAAM,OAAO;CAClB,MAAM,SAAS,QAAQ,MAAM,cAAc,UAAU,QAAQ,KAAK,GAAG;CACrE,IAAI,CAAC,QAAQ,OAAO;CACpB,MAAM,SAAS,QAAY,OAAO,YAAY,OAAO,UAAU,GAAG,IAAI,UAAU,KAAK,OAAO,GAAG;CAC/F,MAAM,OAAO,KAAK,cAAc,QAAQ,IAAI;CAC5C,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,GAAG,MAAM;EAC9B,MAAM,KAAK,MAAM,CAAC;EAClB,MAAM,KAAK,MAAM,CAAC;EAClB,MAAM,SAAS,MAAqB,MAAM,QAAQ,MAAM,KAAA,KAAa,MAAM;EAC3E,IAAI,MAAM,EAAE,KAAK,MAAM,EAAE,GAAG,OAAO,QAAQ,IAAI,EAAE;EACjD,OAAO,QAAQ,IAAI,EAAE,IAAI;CAC3B,CAAC;AACH;;AAGA,SAAgB,SAAS,SAAgC,KAAoC;CAC3F,IAAI,SAAS,QAAQ,KAAK,OAAO;EAAE;EAAK,WAAW;CAAM;CACzD,IAAI,QAAQ,cAAc,OAAO,OAAO;EAAE;EAAK,WAAW;CAAO;CACjE,OAAO;AACT"}

package/dist/components/display/BlockTable/index.d.ts

@@ -0,0 +1,3 @@
+export { BlockTable } from "./BlockTable";
+export type { BlockTableColumn, BlockTableProps, BlockTableSort, BlockTableSortDirection, } from "./BlockTable.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/display/BlockTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,uBAAuB,GACxB,MAAM,oBAAoB,CAAC"}

package/dist/components/display/BlockTooltip/BlockTooltip.d.ts

@@ -0,0 +1,8 @@
+import type { BlockTooltipProps } from "./BlockTooltip.types";
+/**
+ * Short hint for a focusable element, shown on hover and keyboard focus.
+ * Rendered in the provider's overlay layer, so scroll containers never clip it.
+ * Escape dismisses it; the pointer can move onto it without closing it.
+ */
+export declare const BlockTooltip: import("react").ForwardRefExoticComponent<BlockTooltipProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=BlockTooltip.d.ts.map

package/dist/components/display/BlockTooltip/BlockTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTooltip/BlockTooltip.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAK9D;;;;GAIG;AACH,eAAO,MAAM,YAAY,+GA8FvB,CAAC"}

package/dist/components/display/BlockTooltip/BlockTooltip.js

@@ -0,0 +1,83 @@
+import { cx } from "../../../utils/cx.js";
+import { usePortalContainer } from "../../../provider/context.js";
+import { useAnchoredPosition } from "../../../hooks/useAnchoredPosition.js";
+import { mergeRefs } from "../../../utils/refs.js";
+import BlockTooltip_module_default from "./BlockTooltip.module.js";
+import { cloneElement, forwardRef, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/display/BlockTooltip/BlockTooltip.tsx
+/** Grace period so the pointer can cross the gap onto the tooltip (WCAG 1.4.13 hoverable). */
+var CLOSE_DELAY = 120;
+/**
+* Short hint for a focusable element, shown on hover and keyboard focus.
+* Rendered in the provider's overlay layer, so scroll containers never clip it.
+* Escape dismisses it; the pointer can move onto it without closing it.
+*/
+var BlockTooltip = forwardRef(function BlockTooltip({ content, children, placement = "top", delay = 300, size = "md", disabled = false, className, onPointerEnter, onPointerLeave, onFocus, onBlur, ...rest }, ref) {
+	const container = usePortalContainer();
+	const tooltipId = useId();
+	const [open, setOpen] = useState(false);
+	const anchorRef = useRef(null);
+	const tooltipRef = useRef(null);
+	const timer = useRef(void 0);
+	const visible = open && !disabled;
+	const position = useAnchoredPosition(anchorRef, tooltipRef, visible, { side: placement });
+	const schedule = (next, ms) => {
+		clearTimeout(timer.current);
+		if (ms <= 0) setOpen(next);
+		else timer.current = setTimeout(() => setOpen(next), ms);
+	};
+	useEffect(() => () => clearTimeout(timer.current), []);
+	useEffect(() => {
+		if (!open) return;
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") {
+				clearTimeout(timer.current);
+				setOpen(false);
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [open]);
+	const hasTooltip = !disabled && container !== null;
+	const describedBy = cx(children.props["aria-describedby"], hasTooltip && tooltipId) || void 0;
+	return /* @__PURE__ */ jsxs("span", {
+		ref: mergeRefs(ref, anchorRef),
+		className: cx(BlockTooltip_module_default.anchor, className),
+		onPointerEnter: (event) => {
+			schedule(true, delay);
+			onPointerEnter?.(event);
+		},
+		onPointerLeave: (event) => {
+			schedule(false, CLOSE_DELAY);
+			onPointerLeave?.(event);
+		},
+		onFocus: (event) => {
+			schedule(true, 0);
+			onFocus?.(event);
+		},
+		onBlur: (event) => {
+			schedule(false, 0);
+			onBlur?.(event);
+		},
+		...rest,
+		children: [cloneElement(children, { "aria-describedby": describedBy }), hasTooltip ? createPortal(/* @__PURE__ */ jsx("span", {
+			ref: tooltipRef,
+			id: tooltipId,
+			role: "tooltip",
+			hidden: !visible,
+			"data-placement": position?.side ?? placement,
+			"data-size": size,
+			className: BlockTooltip_module_default.tooltip,
+			style: position?.style,
+			onPointerEnter: () => schedule(true, 0),
+			onPointerLeave: () => schedule(false, CLOSE_DELAY),
+			children: content
+		}), container) : null]
+	});
+});
+//#endregion
+export { BlockTooltip };
+
+//# sourceMappingURL=BlockTooltip.js.map

package/dist/components/display/BlockTooltip/BlockTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.js","names":["styles"],"sources":["../../../../src/components/display/BlockTooltip/BlockTooltip.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type FocusEvent,\n  type PointerEvent,\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 styles from \"./BlockTooltip.module.css\";\nimport type { BlockTooltipProps } from \"./BlockTooltip.types\";\n\n/** Grace period so the pointer can cross the gap onto the tooltip (WCAG 1.4.13 hoverable). */\nconst CLOSE_DELAY = 120;\n\n/**\n * Short hint for a focusable element, shown on hover and keyboard focus.\n * Rendered in the provider's overlay layer, so scroll containers never clip it.\n * Escape dismisses it; the pointer can move onto it without closing it.\n */\nexport const BlockTooltip = forwardRef<HTMLSpanElement, BlockTooltipProps>(function BlockTooltip(\n  {\n    content,\n    children,\n    placement = \"top\",\n    delay = 300,\n    size = \"md\",\n    disabled = false,\n    className,\n    onPointerEnter,\n    onPointerLeave,\n    onFocus,\n    onBlur,\n    ...rest\n  },\n  ref,\n) {\n  const container = usePortalContainer();\n  const tooltipId = useId();\n  const [open, setOpen] = useState(false);\n  const anchorRef = useRef<HTMLSpanElement>(null);\n  const tooltipRef = useRef<HTMLSpanElement>(null);\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const visible = open && !disabled;\n  const position = useAnchoredPosition(anchorRef, tooltipRef, visible, { side: placement });\n\n  const schedule = (next: boolean, ms: number) => {\n    clearTimeout(timer.current);\n    if (ms <= 0) setOpen(next);\n    else timer.current = setTimeout(() => setOpen(next), ms);\n  };\n\n  useEffect(() => () => clearTimeout(timer.current), []);\n\n  useEffect(() => {\n    if (!open) return;\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        clearTimeout(timer.current);\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [open]);\n\n  const hasTooltip = !disabled && container !== null;\n  const describedBy = cx(children.props[\"aria-describedby\"], hasTooltip && tooltipId) || undefined;\n\n  return (\n    <span\n      ref={mergeRefs(ref, anchorRef)}\n      className={cx(styles.anchor, className)}\n      onPointerEnter={(event: PointerEvent<HTMLSpanElement>) => {\n        schedule(true, delay);\n        onPointerEnter?.(event);\n      }}\n      onPointerLeave={(event: PointerEvent<HTMLSpanElement>) => {\n        schedule(false, CLOSE_DELAY);\n        onPointerLeave?.(event);\n      }}\n      onFocus={(event: FocusEvent<HTMLSpanElement>) => {\n        schedule(true, 0);\n        onFocus?.(event);\n      }}\n      onBlur={(event: FocusEvent<HTMLSpanElement>) => {\n        schedule(false, 0);\n        onBlur?.(event);\n      }}\n      {...rest}\n    >\n      {cloneElement(children, { \"aria-describedby\": describedBy })}\n      {hasTooltip\n        ? createPortal(\n            <span\n              ref={tooltipRef}\n              id={tooltipId}\n              role=\"tooltip\"\n              hidden={!visible}\n              data-placement={position?.side ?? placement}\n              data-size={size}\n              className={styles.tooltip}\n              style={position?.style}\n              onPointerEnter={() => schedule(true, 0)}\n              onPointerLeave={() => schedule(false, CLOSE_DELAY)}\n            >\n              {content}\n            </span>,\n            container,\n          )\n        : null}\n    </span>\n  );\n});\n"],"mappings":";;;;;;;;;;AAmBA,IAAM,cAAc;;;;;;AAOpB,IAAa,eAAe,WAA+C,SAAS,aAClF,EACE,SACA,UACA,YAAY,OACZ,QAAQ,KACR,OAAO,MACP,WAAW,OACX,WACA,gBACA,gBACA,SACA,QACA,GAAG,QAEL,KACA;CACA,MAAM,YAAY,mBAAmB;CACrC,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,YAAY,OAAwB,IAAI;CAC9C,MAAM,aAAa,OAAwB,IAAI;CAC/C,MAAM,QAAQ,OAAkD,KAAA,CAAS;CAEzE,MAAM,UAAU,QAAQ,CAAC;CACzB,MAAM,WAAW,oBAAoB,WAAW,YAAY,SAAS,EAAE,MAAM,UAAU,CAAC;CAExF,MAAM,YAAY,MAAe,OAAe;EAC9C,aAAa,MAAM,OAAO;EAC1B,IAAI,MAAM,GAAG,QAAQ,IAAI;OACpB,MAAM,UAAU,iBAAiB,QAAQ,IAAI,GAAG,EAAE;CACzD;CAEA,sBAAsB,aAAa,MAAM,OAAO,GAAG,CAAC,CAAC;CAErD,gBAAgB;EACd,IAAI,CAAC,MAAM;EACX,MAAM,aAAa,UAAyB;GAC1C,IAAI,MAAM,QAAQ,UAAU;IAC1B,aAAa,MAAM,OAAO;IAC1B,QAAQ,KAAK;GACf;EACF;EACA,SAAS,iBAAiB,WAAW,SAAS;EAC9C,aAAa,SAAS,oBAAoB,WAAW,SAAS;CAChE,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,aAAa,CAAC,YAAY,cAAc;CAC9C,MAAM,cAAc,GAAG,SAAS,MAAM,qBAAqB,cAAc,SAAS,KAAK,KAAA;CAEvF,OACE,qBAAC,QAAD;EACE,KAAK,UAAU,KAAK,SAAS;EAC7B,WAAW,GAAGA,4BAAO,QAAQ,SAAS;EACtC,iBAAiB,UAAyC;GACxD,SAAS,MAAM,KAAK;GACpB,iBAAiB,KAAK;EACxB;EACA,iBAAiB,UAAyC;GACxD,SAAS,OAAO,WAAW;GAC3B,iBAAiB,KAAK;EACxB;EACA,UAAU,UAAuC;GAC/C,SAAS,MAAM,CAAC;GAChB,UAAU,KAAK;EACjB;EACA,SAAS,UAAuC;GAC9C,SAAS,OAAO,CAAC;GACjB,SAAS,KAAK;EAChB;EACA,GAAI;EAnBN,UAAA,CAqBG,aAAa,UAAU,EAAE,oBAAoB,YAAY,CAAC,GAC1D,aACG,aACE,oBAAC,QAAD;GACE,KAAK;GACL,IAAI;GACJ,MAAK;GACL,QAAQ,CAAC;GACT,kBAAgB,UAAU,QAAQ;GAClC,aAAW;GACX,WAAWA,4BAAO;GAClB,OAAO,UAAU;GACjB,sBAAsB,SAAS,MAAM,CAAC;GACtC,sBAAsB,SAAS,OAAO,WAAW;GAEhD,UAAA;EACG,CAAA,GACN,SACF,IACA,IACA;;AAEV,CAAC"}

package/dist/components/display/BlockTooltip/BlockTooltip.module.js

@@ -0,0 +1,11 @@
+//#region src/components/display/BlockTooltip/BlockTooltip.module.css
+var anchor = "block-anchor-3LOJ3";
+var tooltip = "block-tooltip-K9Jn9";
+var BlockTooltip_module_default = {
+	anchor,
+	tooltip
+};
+//#endregion
+export { anchor, BlockTooltip_module_default as default, tooltip };
+
+//# sourceMappingURL=BlockTooltip.module.js.map

package/dist/components/display/BlockTooltip/BlockTooltip.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.module.js","names":[],"sources":["../../../../src/components/display/BlockTooltip/BlockTooltip.module.css"],"sourcesContent":[".anchor {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.tooltip {\n  position: fixed;\n  top: var(--block-float-y, 0);\n  left: var(--block-float-x, 0);\n  z-index: var(--block-z-tooltip);\n  width: max-content;\n  max-width: min(280px, calc(100vw - var(--block-space-4)));\n  padding: var(--block-space-1) var(--block-space-2);\n  font-family: var(--block-font-body);\n  font-size: var(--block-font-size-sm);\n  font-weight: var(--block-font-weight-medium);\n  line-height: var(--block-line-height-tight);\n  text-align: left;\n  text-transform: none;\n  white-space: normal;\n  color: var(--block-text-primary);\n  background-color: var(--block-obsidian-dark);\n  border: var(--block-border-width-thin) solid var(--block-black);\n  box-shadow:\n    inset 0 0 0 2px var(--block-obsidian-light),\n    var(--block-shadow-drop);\n}\n\n.tooltip[hidden] {\n  display: none;\n}\n\n.tooltip[data-size=\"sm\"] {\n  max-width: min(200px, calc(100vw - var(--block-space-4)));\n}\n\n/* Pixel arrow, aligned with the anchor's center even when the box slides. */\n.tooltip::after {\n  content: \"\";\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background-color: var(--block-obsidian-light);\n}\n\n.tooltip[data-placement=\"top\"]::after,\n.tooltip[data-placement=\"bottom\"]::after {\n  left: calc(var(--block-float-arrow, 50%) - 4px);\n}\n\n.tooltip[data-placement=\"left\"]::after,\n.tooltip[data-placement=\"right\"]::after {\n  top: calc(var(--block-float-arrow, 50%) - 4px);\n}\n\n.tooltip[data-placement=\"top\"]::after {\n  top: 100%;\n  clip-path: polygon(0 0, 100% 0, 50% 100%);\n}\n\n.tooltip[data-placement=\"bottom\"]::after {\n  bottom: 100%;\n  clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n\n.tooltip[data-placement=\"left\"]::after {\n  left: 100%;\n  clip-path: polygon(0 0, 100% 50%, 0 100%);\n}\n\n.tooltip[data-placement=\"right\"]::after {\n  right: 100%;\n  clip-path: polygon(100% 0, 100% 100%, 0 50%);\n}\n"],"mappings":""}

package/dist/components/display/BlockTooltip/BlockTooltip.types.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+export declare const tooltipPlacements: readonly ["top", "bottom", "left", "right"];
+export type BlockTooltipPlacement = (typeof tooltipPlacements)[number];
+export interface BlockTooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "content"> {
+    /** Tooltip text. Keep it short and non-interactive — links and buttons belong in a menu or modal. */
+    content: ReactNode;
+    /** A single focusable element (button, link, input). It receives `aria-describedby`. */
+    children: ReactElement<{
+        "aria-describedby"?: string;
+    }>;
+    /** Preferred side; flips to the opposite side when it would leave the viewport. @default "top" */
+    placement?: BlockTooltipPlacement;
+    /** Hover delay before opening, in ms. Focus opens immediately. @default 300 */
+    delay?: number;
+    /** `sm` wraps at 200px, `md` at 280px. @default "md" */
+    size?: "sm" | "md";
+    /** Never show the tooltip. */
+    disabled?: boolean;
+}
+//# sourceMappingURL=BlockTooltip.types.d.ts.map

package/dist/components/display/BlockTooltip/BlockTooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.types.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTooltip/BlockTooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,eAAO,MAAM,iBAAiB,6CAA8C,CAAC;AAE7E,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC;IACzF,qGAAqG;IACrG,OAAO,EAAE,SAAS,CAAC;IACnB,wFAAwF;IACxF,QAAQ,EAAE,YAAY,CAAC;QAAE,kBAAkB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxD,kGAAkG;IAClG,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/display/BlockTooltip/BlockTooltip.types.js

@@ -0,0 +1,11 @@
+//#region src/components/display/BlockTooltip/BlockTooltip.types.ts
+var tooltipPlacements = [
+	"top",
+	"bottom",
+	"left",
+	"right"
+];
+//#endregion
+export { tooltipPlacements };
+
+//# sourceMappingURL=BlockTooltip.types.js.map

package/dist/components/display/BlockTooltip/BlockTooltip.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.types.js","names":[],"sources":["../../../../src/components/display/BlockTooltip/BlockTooltip.types.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement, ReactNode } from \"react\";\n\nexport const tooltipPlacements = [\"top\", \"bottom\", \"left\", \"right\"] as const;\n\nexport type BlockTooltipPlacement = (typeof tooltipPlacements)[number];\n\nexport interface BlockTooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"content\"> {\n  /** Tooltip text. Keep it short and non-interactive — links and buttons belong in a menu or modal. */\n  content: ReactNode;\n  /** A single focusable element (button, link, input). It receives `aria-describedby`. */\n  children: ReactElement<{ \"aria-describedby\"?: string }>;\n  /** Preferred side; flips to the opposite side when it would leave the viewport. @default \"top\" */\n  placement?: BlockTooltipPlacement;\n  /** Hover delay before opening, in ms. Focus opens immediately. @default 300 */\n  delay?: number;\n  /** `sm` wraps at 200px, `md` at 280px. @default \"md\" */\n  size?: \"sm\" | \"md\";\n  /** Never show the tooltip. */\n  disabled?: boolean;\n}\n"],"mappings":";AAEA,IAAa,oBAAoB;CAAC;CAAO;CAAU;CAAQ;AAAO"}

package/dist/components/display/BlockTooltip/index.d.ts

@@ -0,0 +1,4 @@
+export { BlockTooltip } from "./BlockTooltip";
+export { tooltipPlacements } from "./BlockTooltip.types";
+export type { BlockTooltipPlacement, BlockTooltipProps } from "./BlockTooltip.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/display/BlockTooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/display/SkillTree/SkillTree.d.ts

@@ -0,0 +1,8 @@
+import type { SkillTreeProps } from "./SkillTree.types";
+/**
+ * Skill tree: nodes on a grid joined to their prerequisites. Unlocked skills
+ * glow, available ones can be bought with skill points, locked ones show what
+ * they need. Selecting a node shows its details and Unlock button.
+ */
+export declare const SkillTree: import("react").ForwardRefExoticComponent<SkillTreeProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SkillTree.d.ts.map

package/dist/components/display/SkillTree/SkillTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTree.d.ts","sourceRoot":"","sources":["../../../../src/components/display/SkillTree/SkillTree.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKxD;;;;GAIG;AACH,eAAO,MAAM,SAAS,2GAgIpB,CAAC"}

package/dist/components/display/SkillTree/SkillTree.js

@@ -0,0 +1,138 @@
+import { cx } from "../../../utils/cx.js";
+import { BlockButton } from "../../actions/BlockButton/BlockButton.js";
+import SkillTree_module_default from "./SkillTree.module.js";
+import { gridSize, skillState } from "./SkillTree.utils.js";
+import { forwardRef, useId, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/display/SkillTree/SkillTree.tsx
+var STATE_TEXT = {
+	locked: "locked",
+	available: "available",
+	unlocked: "unlocked"
+};
+/**
+* Skill tree: nodes on a grid joined to their prerequisites. Unlocked skills
+* glow, available ones can be bought with skill points, locked ones show what
+* they need. Selecting a node shows its details and Unlock button.
+*/
+var SkillTree = forwardRef(function SkillTree({ skills, unlocked, points, onUnlock, defaultValue, label = "Skill tree", className, ...rest }, ref) {
+	const detailId = useId();
+	const [selectedId, setSelectedId] = useState(defaultValue ?? skills[0]?.id ?? "");
+	const unlockedSet = new Set(unlocked);
+	const byId = new Map(skills.map((skill) => [skill.id, skill]));
+	const { rows, columns } = gridSize(skills);
+	const selected = byId.get(selectedId);
+	const selectedState = selected ? skillState(selected, unlockedSet) : void 0;
+	const selectedCost = selected?.cost ?? 1;
+	const affordable = points === void 0 || points >= selectedCost;
+	const missing = selected && selectedState === "locked" ? (selected.requires ?? []).filter((id) => !unlockedSet.has(id)).map((id) => byId.get(id)?.label ?? id) : [];
+	const edges = skills.flatMap((skill) => (skill.requires ?? []).flatMap((id) => {
+		const from = byId.get(id);
+		return from ? [{
+			key: `${id}-${skill.id}`,
+			from,
+			to: skill,
+			lit: unlockedSet.has(skill.id)
+		}] : [];
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": label,
+		className: cx(SkillTree_module_default.tree, className),
+		...rest,
+		children: [
+			points !== void 0 ? /* @__PURE__ */ jsxs("p", {
+				className: SkillTree_module_default.points,
+				children: ["Skill points: ", /* @__PURE__ */ jsx("strong", { children: points })]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: SkillTree_module_default.board,
+				style: {
+					"--block-skill-rows": rows,
+					"--block-skill-columns": columns
+				},
+				children: [/* @__PURE__ */ jsx("svg", {
+					className: SkillTree_module_default.lines,
+					viewBox: `0 0 ${columns} ${rows}`,
+					preserveAspectRatio: "none",
+					"aria-hidden": "true",
+					children: edges.map(({ key, from, to, lit }) => /* @__PURE__ */ jsx("line", {
+						x1: from.column - .5,
+						y1: from.row - .5,
+						x2: to.column - .5,
+						y2: to.row - .5,
+						"data-lit": lit || void 0,
+						vectorEffect: "non-scaling-stroke"
+					}, key))
+				}), /* @__PURE__ */ jsx("ul", {
+					className: SkillTree_module_default.nodes,
+					"aria-label": "Skills",
+					children: skills.map((skill) => {
+						const state = skillState(skill, unlockedSet);
+						return /* @__PURE__ */ jsx("li", {
+							className: SkillTree_module_default.cell,
+							style: {
+								"--block-skill-row": skill.row,
+								"--block-skill-col": skill.column
+							},
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: SkillTree_module_default.node,
+								"data-state": state,
+								"aria-pressed": skill.id === selectedId,
+								"aria-controls": detailId,
+								"aria-label": `${skill.label}, ${STATE_TEXT[state]}`,
+								onClick: () => setSelectedId(skill.id),
+								children: /* @__PURE__ */ jsx("span", {
+									className: SkillTree_module_default.icon,
+									"aria-hidden": "true",
+									children: skill.icon
+								})
+							})
+						}, skill.id);
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("section", {
+				id: detailId,
+				className: SkillTree_module_default.detail,
+				"aria-live": "polite",
+				"aria-label": "Skill details",
+				children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("p", {
+						className: SkillTree_module_default.name,
+						children: [
+							selected.label,
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: SkillTree_module_default.state,
+								"data-state": selectedState,
+								children: selectedState
+							})
+						]
+					}),
+					selected.description ? /* @__PURE__ */ jsx("p", {
+						className: SkillTree_module_default.description,
+						children: selected.description
+					}) : null,
+					missing.length > 0 ? /* @__PURE__ */ jsxs("p", {
+						className: SkillTree_module_default.requires,
+						children: ["Requires: ", missing.join(", ")]
+					}) : null,
+					selectedState === "available" && onUnlock ? /* @__PURE__ */ jsx(BlockButton, {
+						variant: "emerald",
+						size: "sm",
+						disabled: !affordable,
+						onClick: () => onUnlock(selected.id),
+						children: affordable ? `Unlock (${selectedCost} ${selectedCost === 1 ? "point" : "points"})` : `Needs ${selectedCost} ${selectedCost === 1 ? "point" : "points"}`
+					}) : null
+				] }) : null
+			})
+		]
+	});
+});
+//#endregion
+export { SkillTree };
+
+//# sourceMappingURL=SkillTree.js.map

package/dist/components/display/SkillTree/SkillTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTree.js","names":["styles","_Fragment"],"sources":["../../../../src/components/display/SkillTree/SkillTree.tsx"],"sourcesContent":["import { forwardRef, useId, useState, type CSSProperties } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport { BlockButton } from \"../../actions/BlockButton/BlockButton\";\nimport styles from \"./SkillTree.module.css\";\nimport type { SkillTreeProps } from \"./SkillTree.types\";\nimport { gridSize, skillState } from \"./SkillTree.utils\";\n\nconst STATE_TEXT = { locked: \"locked\", available: \"available\", unlocked: \"unlocked\" } as const;\n\n/**\n * Skill tree: nodes on a grid joined to their prerequisites. Unlocked skills\n * glow, available ones can be bought with skill points, locked ones show what\n * they need. Selecting a node shows its details and Unlock button.\n */\nexport const SkillTree = forwardRef<HTMLDivElement, SkillTreeProps>(function SkillTree(\n  { skills, unlocked, points, onUnlock, defaultValue, label = \"Skill tree\", className, ...rest },\n  ref,\n) {\n  const detailId = useId();\n  const [selectedId, setSelectedId] = useState(defaultValue ?? skills[0]?.id ?? \"\");\n  const unlockedSet = new Set(unlocked);\n  const byId = new Map(skills.map((skill) => [skill.id, skill]));\n  const { rows, columns } = gridSize(skills);\n  const selected = byId.get(selectedId);\n  const selectedState = selected ? skillState(selected, unlockedSet) : undefined;\n  const selectedCost = selected?.cost ?? 1;\n  const affordable = points === undefined || points >= selectedCost;\n  const missing =\n    selected && selectedState === \"locked\"\n      ? (selected.requires ?? [])\n          .filter((id) => !unlockedSet.has(id))\n          .map((id) => byId.get(id)?.label ?? id)\n      : [];\n\n  // Connector centres in grid units (0.5 = middle of the first cell).\n  const edges = skills.flatMap((skill) =>\n    (skill.requires ?? []).flatMap((id) => {\n      const from = byId.get(id);\n      return from\n        ? [{ key: `${id}-${skill.id}`, from, to: skill, lit: unlockedSet.has(skill.id) }]\n        : [];\n    }),\n  );\n\n  return (\n    <div ref={ref} role=\"group\" aria-label={label} className={cx(styles.tree, className)} {...rest}>\n      {points !== undefined ? (\n        <p className={styles.points}>\n          Skill points: <strong>{points}</strong>\n        </p>\n      ) : null}\n      <div\n        className={styles.board}\n        style={{ \"--block-skill-rows\": rows, \"--block-skill-columns\": columns } as CSSProperties}\n      >\n        <svg\n          className={styles.lines}\n          viewBox={`0 0 ${columns} ${rows}`}\n          preserveAspectRatio=\"none\"\n          aria-hidden=\"true\"\n        >\n          {edges.map(({ key, from, to, lit }) => (\n            <line\n              key={key}\n              x1={from.column - 0.5}\n              y1={from.row - 0.5}\n              x2={to.column - 0.5}\n              y2={to.row - 0.5}\n              data-lit={lit || undefined}\n              vectorEffect=\"non-scaling-stroke\"\n            />\n          ))}\n        </svg>\n        <ul className={styles.nodes} aria-label=\"Skills\">\n          {skills.map((skill) => {\n            const state = skillState(skill, unlockedSet);\n            return (\n              <li\n                key={skill.id}\n                className={styles.cell}\n                style={\n                  {\n                    \"--block-skill-row\": skill.row,\n                    \"--block-skill-col\": skill.column,\n                  } as CSSProperties\n                }\n              >\n                <button\n                  type=\"button\"\n                  className={styles.node}\n                  data-state={state}\n                  aria-pressed={skill.id === selectedId}\n                  aria-controls={detailId}\n                  aria-label={`${skill.label}, ${STATE_TEXT[state]}`}\n                  onClick={() => setSelectedId(skill.id)}\n                >\n                  <span className={styles.icon} aria-hidden=\"true\">\n                    {skill.icon}\n                  </span>\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n      <section\n        id={detailId}\n        className={styles.detail}\n        aria-live=\"polite\"\n        aria-label=\"Skill details\"\n      >\n        {selected ? (\n          <>\n            <p className={styles.name}>\n              {selected.label}{\" \"}\n              <span className={styles.state} data-state={selectedState}>\n                {selectedState}\n              </span>\n            </p>\n            {selected.description ? (\n              <p className={styles.description}>{selected.description}</p>\n            ) : null}\n            {missing.length > 0 ? (\n              <p className={styles.requires}>Requires: {missing.join(\", \")}</p>\n            ) : null}\n            {selectedState === \"available\" && onUnlock ? (\n              <BlockButton\n                variant=\"emerald\"\n                size=\"sm\"\n                disabled={!affordable}\n                onClick={() => onUnlock(selected.id)}\n              >\n                {affordable\n                  ? `Unlock (${selectedCost} ${selectedCost === 1 ? \"point\" : \"points\"})`\n                  : `Needs ${selectedCost} ${selectedCost === 1 ? \"point\" : \"points\"}`}\n              </BlockButton>\n            ) : null}\n          </>\n        ) : null}\n      </section>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/display/SkillTree/SkillTree.module.js

@@ -0,0 +1,33 @@
+//#region src/components/display/SkillTree/SkillTree.module.css
+var tree = "block-tree-t4d9e";
+var points = "block-points-l5jMV";
+var board = "block-board-n1kUI";
+var lines = "block-lines-tJ0wI";
+var nodes = "block-nodes-DQOOP";
+var cell = "block-cell-LDgL6";
+var node = "block-node-91mfm";
+var icon = "block-icon-BuZf1";
+var detail = "block-detail-RJItE";
+var name = "block-name-rX7DZ";
+var state = "block-state-sNumz";
+var description = "block-description-dDvD4";
+var requires = "block-requires-Vg1oB";
+var SkillTree_module_default = {
+	tree,
+	points,
+	board,
+	lines,
+	nodes,
+	cell,
+	node,
+	icon,
+	detail,
+	name,
+	state,
+	description,
+	requires
+};
+//#endregion
+export { board, cell, SkillTree_module_default as default, description, detail, icon, lines, name, node, nodes, points, requires, state, tree };
+
+//# sourceMappingURL=SkillTree.module.js.map

package/dist/components/display/SkillTree/SkillTree.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTree.module.js","names":[],"sources":["../../../../src/components/display/SkillTree/SkillTree.module.css"],"sourcesContent":[".tree {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--block-space-3);\n  width: 100%;\n}\n\n.points {\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-sm);\n  text-transform: uppercase;\n  color: var(--block-text-muted);\n}\n\n.points strong {\n  color: var(--block-emerald-light);\n}\n\n.board {\n  --cell: 64px;\n  position: relative;\n  width: calc(var(--block-skill-columns) * var(--cell));\n  max-width: 100%;\n  aspect-ratio: var(--block-skill-columns) / var(--block-skill-rows);\n}\n\n.lines {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.lines line {\n  stroke: var(--block-border);\n  stroke-width: 4;\n}\n\n.lines line[data-lit] {\n  stroke: var(--block-emerald);\n}\n\n.nodes {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(var(--block-skill-columns), 1fr);\n  grid-template-rows: repeat(var(--block-skill-rows), 1fr);\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.cell {\n  grid-row: var(--block-skill-row);\n  grid-column: var(--block-skill-col);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.node {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: min(48px, 80%);\n  aspect-ratio: 1;\n  padding: 0;\n  background-color: var(--block-slot);\n  border: var(--block-border-width) solid var(--block-border);\n  box-shadow: var(--block-shadow-inset);\n  cursor: pointer;\n}\n\n.node[data-state=\"available\"] {\n  background-color: var(--block-surface-alt);\n  border-color: var(--block-gold);\n  box-shadow: var(--block-shadow-bevel);\n}\n\n.node[data-state=\"unlocked\"] {\n  background-color: color-mix(in srgb, var(--block-emerald) 35%, var(--block-surface-alt));\n  border-color: var(--block-emerald-light);\n  box-shadow:\n    var(--block-shadow-bevel),\n    0 0 0 2px color-mix(in srgb, var(--block-emerald-light) 40%, transparent);\n}\n\n.node[aria-pressed=\"true\"] {\n  outline: 3px solid var(--block-text);\n  outline-offset: 2px;\n}\n\n.node:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 2px;\n}\n\n.icon {\n  display: inline-flex;\n  width: 70%;\n  height: 70%;\n}\n\n.icon > * {\n  width: 100%;\n  height: 100%;\n}\n\n.node[data-state=\"locked\"] .icon {\n  opacity: 0.45;\n  filter: grayscale(1);\n}\n\n.detail {\n  width: 100%;\n  max-width: 420px;\n  min-height: 72px;\n  padding: var(--block-space-2) var(--block-space-3);\n  background-color: var(--block-surface-alt);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  box-shadow: var(--block-shadow-bevel);\n}\n\n.detail > * + * {\n  margin-top: var(--block-space-2);\n}\n\n.name {\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-md);\n  text-transform: uppercase;\n}\n\n.state {\n  margin-left: var(--block-space-1);\n  font-size: var(--block-font-size-xs);\n  color: var(--block-text-muted);\n}\n\n.state[data-state=\"unlocked\"] {\n  color: var(--block-emerald-light);\n}\n\n.state[data-state=\"available\"] {\n  color: var(--block-gold-light);\n}\n\n.description {\n  margin: 0;\n  font-size: var(--block-font-size-sm);\n  color: var(--block-text-muted);\n}\n\n.requires {\n  margin: 0;\n  font-size: var(--block-font-size-sm);\n  /* Lightened so it stays above 4.5:1 on every theme's panel colour. */\n  color: color-mix(in srgb, var(--block-redstone-light) 65%, var(--block-white));\n}\n"],"mappings":""}

package/dist/components/display/SkillTree/SkillTree.types.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface SkillNode {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    description?: ReactNode;
+    /** Skill points needed to unlock. @default 1 */
+    cost?: number;
+    /** 1-based grid position. */
+    row: number;
+    column: number;
+    /** Skills that must be unlocked first. */
+    requires?: string[];
+}
+export type SkillState = "locked" | "available" | "unlocked";
+export interface SkillTreeProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
+    skills: SkillNode[];
+    /** Ids of unlocked skills. */
+    unlocked: string[];
+    /** Skill points the player can spend. */
+    points?: number;
+    /** Called when an available, affordable skill is unlocked. */
+    onUnlock?: (id: string) => void;
+    /** Initially selected skill id. */
+    defaultValue?: string;
+    /** Accessible name. @default "Skill tree" */
+    label?: string;
+}
+//# sourceMappingURL=SkillTree.types.d.ts.map

package/dist/components/display/SkillTree/SkillTree.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTree.types.d.ts","sourceRoot":"","sources":["../../../../src/components/display/SkillTree/SkillTree.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;AAE7D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC1F,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/display/SkillTree/SkillTree.utils.d.ts

@@ -0,0 +1,8 @@
+import type { SkillNode, SkillState } from "./SkillTree.types";
+export declare function skillState(skill: SkillNode, unlocked: ReadonlySet<string>): SkillState;
+/** Grid size needed to fit every node. */
+export declare function gridSize(skills: SkillNode[]): {
+    rows: number;
+    columns: number;
+};
+//# sourceMappingURL=SkillTree.utils.d.ts.map

package/dist/components/display/SkillTree/SkillTree.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTree.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/display/SkillTree/SkillTree.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/D,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,UAAU,CAGtF;AAED,0CAA0C;AAC1C,wBAAgB,QAAQ,CAAC,MAAM,EAAE,SAAS,EAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAK/E"}

package/dist/components/display/SkillTree/SkillTree.utils.js

@@ -0,0 +1,16 @@
+//#region src/components/display/SkillTree/SkillTree.utils.ts
+function skillState(skill, unlocked) {
+	if (unlocked.has(skill.id)) return "unlocked";
+	return (skill.requires ?? []).every((id) => unlocked.has(id)) ? "available" : "locked";
+}
+/** Grid size needed to fit every node. */
+function gridSize(skills) {
+	return {
+		rows: Math.max(1, ...skills.map((skill) => skill.row)),
+		columns: Math.max(1, ...skills.map((skill) => skill.column))
+	};
+}
+//#endregion
+export { gridSize, skillState };
+
+//# sourceMappingURL=SkillTree.utils.js.map

package/dist/components/display/SkillTree/SkillTree.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTree.utils.js","names":[],"sources":["../../../../src/components/display/SkillTree/SkillTree.utils.ts"],"sourcesContent":["import type { SkillNode, SkillState } from \"./SkillTree.types\";\n\nexport function skillState(skill: SkillNode, unlocked: ReadonlySet<string>): SkillState {\n  if (unlocked.has(skill.id)) return \"unlocked\";\n  return (skill.requires ?? []).every((id) => unlocked.has(id)) ? \"available\" : \"locked\";\n}\n\n/** Grid size needed to fit every node. */\nexport function gridSize(skills: SkillNode[]): { rows: number; columns: number } {\n  return {\n    rows: Math.max(1, ...skills.map((skill) => skill.row)),\n    columns: Math.max(1, ...skills.map((skill) => skill.column)),\n  };\n}\n"],"mappings":";AAEA,SAAgB,WAAW,OAAkB,UAA2C;CACtF,IAAI,SAAS,IAAI,MAAM,EAAE,GAAG,OAAO;CACnC,QAAQ,MAAM,YAAY,CAAC,EAAA,CAAG,OAAO,OAAO,SAAS,IAAI,EAAE,CAAC,IAAI,cAAc;AAChF;;AAGA,SAAgB,SAAS,QAAwD;CAC/E,OAAO;EACL,MAAM,KAAK,IAAI,GAAG,GAAG,OAAO,KAAK,UAAU,MAAM,GAAG,CAAC;EACrD,SAAS,KAAK,IAAI,GAAG,GAAG,OAAO,KAAK,UAAU,MAAM,MAAM,CAAC;CAC7D;AACF"}

package/dist/components/display/SkillTree/index.d.ts

@@ -0,0 +1,4 @@
+export { SkillTree } from "./SkillTree";
+export { skillState } from "./SkillTree.utils";
+export type { SkillNode, SkillState, SkillTreeProps } from "./SkillTree.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/display/SkillTree/index.d.ts.map

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