@lablup/ui-common 0.1.0-alpha.9 → 0.2.0-alpha.16

package/dist/components/UnitGrid/UnitGrid2.js

@@ -0,0 +1,393 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { deriveMetrics as t, extractSegments as n, gridSize as r, groupConsecutiveSegments as i, latticeColsForWidth as a, letterCellIndices as ee, packGroups as te, placeCells as ne, platePath as re } from "./UnitGrid.geometry.js";
+/* empty css         */
+import { useEffect as o, useEffectEvent as ie, useLayoutEffect as ae, useRef as s, useState as c } from "react";
+import { HStack as l, VStack as oe } from "@astryxdesign/core/Stack";
+import { Text as se } from "@astryxdesign/core/Text";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { VisuallyHidden as ce } from "@astryxdesign/core/VisuallyHidden";
+//#region src/components/UnitGrid/UnitGrid.tsx
+var le = 256, ue = Array.from({ length: 7 }, (e, t) => `var(--unit-grid-group-${t + 1})`), de = 330, fe = 340, f = 6, pe = 150, me = "6 4", he = .6, p = "var(--unit-grid-cell-empty)", m = "var(--color-background-card)", h = "var(--unit-grid-ink-dark)", g = "var(--unit-grid-ink-light)", _ = (...e) => e.filter(Boolean).join(" "), v = (e) => {
+	if (e === void 0) return 1;
+	let t = parseFloat(e);
+	return Number.isFinite(t) ? e.endsWith("%") ? t / 100 : t : 1;
+}, y = (e) => {
+	let t = e.trim(), n = /^#?([0-9a-f]{6})$/i.exec(t);
+	if (n) {
+		let [e, t, r] = [
+			0,
+			2,
+			4
+		].map((e) => parseInt(n[1].slice(e, e + 2), 16));
+		return [
+			e,
+			t,
+			r,
+			1
+		];
+	}
+	let r = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*([\d.%]+))?/.exec(t);
+	if (r) return [
+		parseFloat(r[1]),
+		parseFloat(r[2]),
+		parseFloat(r[3]),
+		v(r[4])
+	];
+	let i = /^color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.%]+))?/.exec(t);
+	return i ? [
+		parseFloat(i[1]) * 255,
+		parseFloat(i[2]) * 255,
+		parseFloat(i[3]) * 255,
+		v(i[4])
+	] : null;
+}, b = (e) => {
+	let [t, n, r] = e.map((e) => {
+		let t = e / 255;
+		return t <= .03928 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * t + .7152 * n + .0722 * r;
+}, x = (e) => {
+	let t = e === void 0 ? null : y(e);
+	return t ? b([
+		t[0],
+		t[1],
+		t[2]
+	]) : null;
+}, ge = (e, t) => (Math.max(e, t) + .05) / (Math.min(e, t) + .05), _e = (e, t) => {
+	(e.key === "Enter" || e.key === " ") && (e.key === " " && e.preventDefault(), t());
+}, ve = (e, t) => {
+	let n = document.createElement("div");
+	n.setAttribute("aria-hidden", "true"), n.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;width:0;height:0;overflow:hidden";
+	let r = t.map((e) => {
+		let t = document.createElement("div");
+		return t.style.color = e, n.appendChild(t), t;
+	});
+	e.appendChild(n);
+	let i = {};
+	return t.forEach((e, t) => {
+		i[e] = getComputedStyle(r[t]).color;
+	}), e.removeChild(n), i;
+}, ye = (e) => {
+	let t = document.createElement("div");
+	t.setAttribute("aria-hidden", "true"), t.style.cssText = "position:fixed;top:0;left:0;width:0;height:0;visibility:hidden;pointer-events:none", e.appendChild(t);
+	let n = t.getBoundingClientRect();
+	return e.removeChild(t), {
+		left: n.left,
+		top: n.top
+	};
+}, be = (e) => {
+	let n = getComputedStyle(e), r = (e, t) => {
+		let r = parseFloat(n.getPropertyValue(e));
+		return Number.isFinite(r) ? r : t;
+	};
+	return t(r("--spacing-4", 16), r("--spacing-0-5", 2), Math.min(r("--radius-element", 4), 4));
+};
+function S({ groups: v, layout: S = "serpentine", groupPalette: C, hueOverrides: xe, onHueOverrideChange: w, legendItems: T, renderGroupPopover: E, onClickGroup: D, emptyFallback: Se, maxUnitsPerGroup: Ce = le, columns: O, changeGroupColorLabel: we, colorSwatchLabel: k, className: Te, ...A }) {
+	let j = e(), M = C && C.length > 0 ? C : ue, N = s(null), P = s(null), [F, Ee] = c(0), I = v.filter((e) => e.units.length > 0), L = I.length > 0;
+	o(() => {
+		let e = P.current;
+		if (!e) return;
+		let t = new ResizeObserver((e) => {
+			Ee(e[0]?.contentRect.width ?? 0);
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [L]);
+	let [R, De] = c(() => t()), [z, Oe] = c({}), B = Array.from(new Set(I.flatMap((e) => e.units.map((e) => e.color)))), ke = B.join(" "), Ae = ie(() => {
+		let e = N.current;
+		if (!e) return;
+		let t = be(e);
+		De((e) => e.cellPx === t.cellPx && e.gapPx === t.gapPx && e.radiusPx === t.radiusPx ? e : t);
+		let n = ve(e, [
+			...B,
+			p,
+			m,
+			h,
+			g
+		]);
+		Oe((e) => {
+			let t = Object.keys(n);
+			return t.length === Object.keys(e).length && t.every((t) => e[t] === n[t]) ? e : n;
+		});
+	}), [je, Me] = c(0);
+	o(() => {
+		let e = new MutationObserver(() => Me((e) => e + 1));
+		return e.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: [
+				"data-theme",
+				"data-astryx-theme",
+				"class",
+				"style"
+			]
+		}), () => e.disconnect();
+	}, []), ae(() => {
+		Ae();
+	}, [ke, je]);
+	let [V, H] = c(null), U = s(null), W = () => {
+		U.current &&= (clearTimeout(U.current), null);
+	}, G = () => {
+		W(), U.current = setTimeout(() => {
+			H(null), K(null);
+		}, pe);
+	};
+	o(() => W, []);
+	let [Ne, K] = c(null), Pe = Ne !== null && Ne === V, [q, Fe] = c(null);
+	o(() => {
+		if (V !== null) {
+			let e = P.current, t = e?.getBoundingClientRect(), n = e ? ye(e) : null;
+			Fe(t && n ? {
+				left: t.left,
+				top: t.top,
+				originLeft: n.left,
+				originTop: n.top
+			} : null);
+		}
+	}, [V]);
+	let Ie = V !== null;
+	o(() => {
+		if (!Ie) return;
+		let e = () => {
+			H(null), K(null);
+		};
+		return window.addEventListener("scroll", e, !0), () => window.removeEventListener("scroll", e, !0);
+	}, [Ie]);
+	let J = new Map(I.map((e) => [e.key, e])), Le = new Map(I.map((e, t) => [e.key, t])), Re = (e) => ((xe?.[e] ?? Le.get(e) ?? 0) % M.length + M.length) % M.length, Y = (e) => M[Re(e)], ze = (e) => ((J.get(e)?.label || e).charAt(0) || "?").toUpperCase(), Be = x(z[h]) ?? 0, Ve = x(z[g]) ?? 1, He = (e) => {
+		let t = e ?? .8;
+		return ge(t, Be) >= ge(t, Ve) ? h : g;
+	}, Ue = (e) => He(x(z[e] ?? e)), We = (() => {
+		let e = y(z[p] ?? "");
+		if (!e) return null;
+		if (e[3] >= 1) return b([
+			e[0],
+			e[1],
+			e[2]
+		]);
+		let t = y(z[m] ?? "");
+		if (!t) return null;
+		let n = e[3];
+		return b([
+			e[0] * n + t[0] * (1 - n),
+			e[1] * n + t[1] * (1 - n),
+			e[2] * n + t[2] * (1 - n)
+		]);
+	})(), Ge = (e) => e.fraction !== void 0 && e.fraction < he ? He(We) : Ue(e.color), Ke = O ?? a(F, R), qe = te(I, Ce), X = ne(qe, S, Ke, R), { width: Je, height: Ye } = r(X, Ke, R), Xe = i(n(X, R)), Ze = ee(X), Z = V === null ? null : J.get(V) ?? null, Qe = V === null ? void 0 : Ze.get(V), Q = Qe === void 0 ? null : X[Qe] ?? null, $e = () => {
+		H(null), K(null);
+	}, et = (e) => e.target.getAttribute?.("data-group-key") ?? null, tt = L && (O !== void 0 || F > 0), nt = Z !== null && V !== null && Q !== null && q !== null && (E !== void 0 || w !== void 0), $ = () => K((e) => e === V ? null : V);
+	return /* @__PURE__ */ d(oe, {
+		ref: N,
+		gap: 3,
+		align: "stretch",
+		className: _("uic-unit-grid", Te),
+		...A,
+		children: [T && T.length > 0 && /* @__PURE__ */ u(l, {
+			gap: 3,
+			wrap: "wrap",
+			align: "center",
+			children: T.map((e, t) => /* @__PURE__ */ d(l, {
+				gap: 1,
+				align: "center",
+				children: [/* @__PURE__ */ u("svg", {
+					width: 10,
+					height: 10,
+					role: "img",
+					"aria-label": e.label,
+					children: /* @__PURE__ */ u("rect", {
+						width: 10,
+						height: 10,
+						rx: 2,
+						style: { fill: e.color }
+					})
+				}), /* @__PURE__ */ u(se, {
+					size: "sm",
+					color: "secondary",
+					children: e.label
+				})]
+			}, t))
+		}), L ? /* @__PURE__ */ d("div", {
+			ref: P,
+			className: "uic-unit-grid__wrapper",
+			children: [
+				tt && /* @__PURE__ */ d("svg", {
+					width: Je,
+					height: Ye,
+					role: "img",
+					"aria-label": A["aria-label"] ?? j("uic.UnitGrid.label"),
+					className: _("uic-unit-grid__svg", D !== void 0 && "uic-unit-grid__svg--clickable"),
+					onMouseMove: (e) => {
+						let t = et(e);
+						t === null ? G() : (W(), H(t));
+					},
+					onMouseLeave: G,
+					onClick: (e) => {
+						let t = et(e);
+						t !== null && D && D(t);
+					},
+					children: [Xe.map((e) => {
+						let t = e[0].groupKey, n = J.get(t), r = Y(t), i = V === t;
+						return /* @__PURE__ */ u("path", {
+							"data-group-key": t,
+							d: re(e, R),
+							style: {
+								fill: r,
+								stroke: r
+							},
+							fillOpacity: i ? .32 : .15,
+							strokeWidth: i ? 2.5 : 1.5,
+							strokeDasharray: n?.plateVariant === "dashed" ? me : void 0
+						}, t);
+					}), X.map((e, t) => {
+						let n = e.unit.fraction !== void 0 && e.unit.fraction < 1, r = V === e.groupKey;
+						return /* @__PURE__ */ d("g", { children: [
+							/* @__PURE__ */ u("rect", {
+								className: "uic-unit-grid__cell",
+								"data-group-key": e.groupKey,
+								x: e.px,
+								y: e.py,
+								width: R.cellPx,
+								height: R.cellPx,
+								rx: R.radiusPx,
+								style: {
+									fill: n ? p : e.unit.color,
+									stroke: r ? Y(e.groupKey) : "var(--unit-grid-cell-stroke)"
+								},
+								strokeWidth: r ? 1 : .5
+							}),
+							n && /* @__PURE__ */ u("rect", {
+								"data-group-key": e.groupKey,
+								x: e.px,
+								y: e.py + R.cellPx * (1 - (e.unit.fraction ?? 0)),
+								width: R.cellPx,
+								height: R.cellPx * (e.unit.fraction ?? 0),
+								rx: 1,
+								style: { fill: e.unit.color }
+							}),
+							Ze.get(e.groupKey) === t && /* @__PURE__ */ u("text", {
+								x: e.px + R.cellPx / 2,
+								y: e.py + R.cellPx / 2,
+								textAnchor: "middle",
+								dominantBaseline: "central",
+								fontSize: R.cellPx * .62,
+								fontWeight: 700,
+								pointerEvents: "none",
+								style: { fill: Ge(e.unit) },
+								children: ze(e.groupKey)
+							})
+						] }, t);
+					})]
+				}),
+				/* @__PURE__ */ u(ce, {
+					as: "ul",
+					children: I.map((e) => /* @__PURE__ */ u("li", { children: e.label || e.key }, e.key))
+				}),
+				nt && /* @__PURE__ */ u("div", {
+					className: "uic-unit-grid__popover",
+					onMouseEnter: W,
+					onMouseLeave: G,
+					style: {
+						borderColor: Y(V),
+						...(() => {
+							let e = q.left + Math.max(0, Math.min(Q.px - R.platePadX, Math.max(0, F - de))), t = q.top + Q.py, n = t >= fe, r = n ? t - R.platePadY - f : t + R.cellPx + R.platePadY + f, i = e - q.originLeft, a = r - q.originTop;
+							return n ? {
+								left: i,
+								top: a,
+								transform: "translateY(-100%)"
+							} : {
+								left: i,
+								top: a
+							};
+						})()
+					},
+					children: /* @__PURE__ */ d(oe, {
+						gap: 1.5,
+						align: "stretch",
+						children: [
+							Pe && w && /* @__PURE__ */ u(l, {
+								gap: 1,
+								align: "center",
+								children: M.map((e, t) => {
+									let n = () => {
+										w(V, t), K(null);
+									}, r = Re(V) === t;
+									return /* @__PURE__ */ d("svg", {
+										width: 20,
+										height: 20,
+										role: "button",
+										tabIndex: 0,
+										"aria-label": k ? k(t + 1) : j("uic.UnitGrid.useColor", { index: t + 1 }),
+										className: "uic-unit-grid__swatch",
+										onClick: n,
+										onKeyDown: (e) => _e(e, n),
+										children: [/* @__PURE__ */ u("rect", {
+											x: 1,
+											y: 1,
+											width: 18,
+											height: 18,
+											rx: 5,
+											style: {
+												fill: e,
+												stroke: e
+											},
+											fillOpacity: .35,
+											strokeWidth: r ? 2 : 1
+										}), r && /* @__PURE__ */ u("text", {
+											x: 10,
+											y: 10.5,
+											textAnchor: "middle",
+											dominantBaseline: "central",
+											fontSize: 11,
+											fontWeight: 700,
+											pointerEvents: "none",
+											style: { fill: e },
+											children: "✓"
+										})]
+									}, t);
+								})
+							}),
+							w && /* @__PURE__ */ d(l, {
+								gap: 1.5,
+								align: "center",
+								children: [/* @__PURE__ */ u("svg", {
+									width: 16,
+									height: 16,
+									role: "button",
+									tabIndex: 0,
+									"aria-label": we ?? j("uic.UnitGrid.changeGroupColor"),
+									className: "uic-unit-grid__swatch",
+									onClick: $,
+									onKeyDown: (e) => _e(e, $),
+									children: /* @__PURE__ */ u("rect", {
+										x: 1,
+										y: 1,
+										width: 14,
+										height: 14,
+										rx: 4,
+										style: {
+											fill: Y(V),
+											stroke: Y(V)
+										},
+										fillOpacity: .15,
+										strokeWidth: 1.5
+									})
+								}), /* @__PURE__ */ u(se, {
+									size: "sm",
+									weight: "semibold",
+									children: Z.label || Z.key
+								})]
+							}),
+							E?.(Z, {
+								hue: Y(V),
+								closePopover: $e
+							})
+						]
+					})
+				})
+			]
+		}) : Se ?? null]
+	});
+}
+S.displayName = "UnitGrid";
+//#endregion
+export { S as UnitGrid };
+
+//# sourceMappingURL=UnitGrid2.js.map
+import "../../assets/components/UnitGrid/UnitGrid.css";

package/dist/components/UnitGrid/UnitGrid2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnitGrid2.js","names":[],"sources":["../../../src/components/UnitGrid/UnitGrid.tsx"],"sourcesContent":["/**\n * UnitGrid\n *\n * Groups of unit squares packed onto one shared lattice (serpentine or\n * word-wrap), each group merged into a tinted rounded plate, with a hover card\n * anchored to the group, an optional palette picker in it, and a legend row.\n * It knows nothing about what a unit is: callers pass the resolved colour of\n * every unit, the legend entries and the hover card body.\n *\n * Unit colours may be `var()` or `color-mix()` strings. The component resolves\n * them against its own cascade to pick, per group initial, the ink with the\n * better WCAG contrast.\n *\n * @example\n * <UnitGrid\n *   aria-label=\"GPU allocation\"\n *   groups={[{ key: \"a\", label: \"Alpha\", units: [{ color: \"var(--color-icon-blue)\" }] }]}\n * />\n */\nimport {\n  useEffect,\n  useEffectEvent,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { HStack, VStack } from \"@astryxdesign/core/Stack\";\nimport { Text } from \"@astryxdesign/core/Text\";\nimport { VisuallyHidden } from \"@astryxdesign/core/VisuallyHidden\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport {\n  deriveMetrics,\n  extractSegments,\n  gridSize,\n  groupConsecutiveSegments,\n  latticeColsForWidth,\n  letterCellIndices,\n  packGroups,\n  placeCells,\n  platePath,\n  type UnitGridLayout,\n  type UnitGridMetrics,\n} from \"./UnitGrid.geometry\";\nimport \"./UnitGrid.css\";\n\nexport type { UnitGridLayout } from \"./UnitGrid.geometry\";\n\nconst DEFAULT_MAX_UNITS_PER_GROUP = 256;\n/** The seven hues declared in UnitGrid.css. */\nconst DEFAULT_PALETTE = Array.from(\n  { length: 7 },\n  (_, i) => `var(--unit-grid-group-${i + 1})`,\n);\n// Hover card geometry: clamp width, flip threshold, anchor offset, and the\n// hide delay that lets the pointer travel onto the card.\nconst POPOVER_CLAMP_WIDTH = 330;\nconst POPOVER_FLIP_MIN_TOP = 340;\nconst POPOVER_OFFSET = 6;\nconst POPOVER_HIDE_DELAY_MS = 150;\n// Legible at both plate stroke widths (1.5 at rest, 2.5 on hover).\nconst PLATE_DASH_PATTERN = \"6 4\";\n// The initial is vertically centred and fills grow bottom-up, so below this\n// fraction the initial sits on the empty underlay: pick ink against that.\nconst LETTER_ON_EMPTY_MAX_FRACTION = 0.6;\nconst EMPTY_FILL_COLOR = \"var(--unit-grid-cell-empty)\";\n// The empty fill is translucent; composite it over this before judging it.\nconst EMPTY_FILL_BACKDROP = \"var(--color-background-card)\";\nconst INK_DARK = \"var(--unit-grid-ink-dark)\";\nconst INK_LIGHT = \"var(--unit-grid-ink-light)\";\n\nconst cx = (...names: Array<string | false | undefined>) =>\n  names.filter(Boolean).join(\" \");\n\nconst parseAlpha = (raw: string | undefined): number => {\n  if (raw === undefined) return 1;\n  const v = parseFloat(raw);\n  if (!Number.isFinite(v)) return 1;\n  return raw.endsWith(\"%\") ? v / 100 : v;\n};\n\n/** `[r, g, b (0..255), alpha (0..1)]` of `#rrggbb`, `rgb()` or `color(srgb)`. */\nconst parseColorChannels = (color: string): [number, number, number, number] | null => {\n  const trimmed = color.trim();\n  const hex = /^#?([0-9a-f]{6})$/i.exec(trimmed);\n  if (hex) {\n    const [r, g, b] = [0, 2, 4].map((i) => parseInt(hex[1]!.slice(i, i + 2), 16));\n    return [r!, g!, b!, 1];\n  }\n  const rgb =\n    /^rgba?\\(\\s*([\\d.]+)[,\\s]+([\\d.]+)[,\\s]+([\\d.]+)(?:\\s*[,/]\\s*([\\d.%]+))?/.exec(\n      trimmed,\n    );\n  if (rgb) {\n    return [\n      parseFloat(rgb[1]!),\n      parseFloat(rgb[2]!),\n      parseFloat(rgb[3]!),\n      parseAlpha(rgb[4]),\n    ];\n  }\n  // color-mix() and color() fills serialize as `color(srgb r g b / a)`, 0..1.\n  const srgb =\n    /^color\\(srgb\\s+([\\d.]+)\\s+([\\d.]+)\\s+([\\d.]+)(?:\\s*\\/\\s*([\\d.%]+))?/.exec(trimmed);\n  if (srgb) {\n    return [\n      parseFloat(srgb[1]!) * 255,\n      parseFloat(srgb[2]!) * 255,\n      parseFloat(srgb[3]!) * 255,\n      parseAlpha(srgb[4]),\n    ];\n  }\n  return null;\n};\n\nconst luminanceOfChannels = (channels: [number, number, number]): number => {\n  const [r, g, b] = channels.map((c) => {\n    const v = c / 255;\n    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r! + 0.7152 * g! + 0.0722 * b!;\n};\n\n/** WCAG relative luminance, alpha ignored. */\nconst relativeLuminance = (color: string | undefined): number | null => {\n  const channels = color === undefined ? null : parseColorChannels(color);\n  return channels ? luminanceOfChannels([channels[0], channels[1], channels[2]]) : null;\n};\n\nconst contrastRatio = (a: number, b: number): number =>\n  (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);\n\n/** Keyboard activation for the SVG `role=\"button\"` picker controls. */\nconst activateOnKey = (e: KeyboardEvent<SVGSVGElement>, action: () => void): void => {\n  if (e.key === \"Enter\" || e.key === \" \") {\n    // Space must not scroll the page while it activates the control.\n    if (e.key === \" \") e.preventDefault();\n    action();\n  }\n};\n\n/**\n * Resolve CSS colour strings, `var()` included, to computed colours through\n * hidden probes under `host`, so they see the component's own cascade.\n */\nconst resolveColorsInDOM = (\n  host: HTMLElement,\n  colors: readonly string[],\n): Record<string, string> => {\n  const probeHost = document.createElement(\"div\");\n  probeHost.setAttribute(\"aria-hidden\", \"true\");\n  probeHost.style.cssText =\n    \"position:absolute;visibility:hidden;pointer-events:none;width:0;height:0;overflow:hidden\";\n  const probes = colors.map((color) => {\n    const el = document.createElement(\"div\");\n    el.style.color = color;\n    probeHost.appendChild(el);\n    return el;\n  });\n  host.appendChild(probeHost);\n  const out: Record<string, string> = {};\n  colors.forEach((color, i) => {\n    out[color] = getComputedStyle(probes[i]!).color;\n  });\n  host.removeChild(probeHost);\n  return out;\n};\n\n/**\n * Origin of the hover card's `position: fixed` containing block, in viewport\n * coordinates. A transformed ancestor (a drawer panel is one) takes over from\n * the viewport, so measured viewport rects are rebased onto it. (0, 0) when\n * the viewport is the origin.\n */\nconst fixedOriginIn = (host: HTMLElement): { left: number; top: number } => {\n  const probe = document.createElement(\"div\");\n  probe.setAttribute(\"aria-hidden\", \"true\");\n  probe.style.cssText =\n    \"position:fixed;top:0;left:0;width:0;height:0;visibility:hidden;pointer-events:none\";\n  host.appendChild(probe);\n  const r = probe.getBoundingClientRect();\n  host.removeChild(probe);\n  return { left: r.left, top: r.top };\n};\n\nconst readMetricsFromDOM = (host: HTMLElement): UnitGridMetrics => {\n  const cs = getComputedStyle(host);\n  const len = (name: string, fallback: number): number => {\n    const v = parseFloat(cs.getPropertyValue(name));\n    return Number.isFinite(v) ? v : fallback;\n  };\n  return deriveMetrics(\n    len(\"--spacing-4\", 16),\n    len(\"--spacing-0-5\", 2),\n    Math.min(len(\"--radius-element\", 4), 4),\n  );\n};\n\nexport interface UnitGridUnit {\n  /** Fill colour of this unit's cell. */\n  color: string;\n  /** 0..1 partial fill; a fractional cell fills bottom-up. */\n  fraction?: number;\n}\n\nexport interface UnitGridGroup {\n  key: string;\n  /** The group initial and the hover card title. @default key */\n  label?: string;\n  units: UnitGridUnit[];\n  /** Plate outline; `dashed` marks a group as tentative. @default 'solid' */\n  plateVariant?: \"solid\" | \"dashed\";\n}\n\nexport interface UnitGridLegendItem {\n  color: string;\n  label: string;\n}\n\nexport interface UnitGridProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"children\"\n> {\n  groups: UnitGridGroup[];\n  /** How groups flow along the lattice. @default 'serpentine' */\n  layout?: UnitGridLayout;\n  /** Group hues, cycled in flow order. @default the seven --unit-grid-group-N hues */\n  groupPalette?: string[];\n  /** Controlled palette-index overrides, keyed by group key. */\n  hueOverrides?: Record<string, number>;\n  /** Shows the palette picker in the hover card. */\n  onHueOverrideChange?: (key: string, paletteIndex: number) => void;\n  legendItems?: UnitGridLegendItem[];\n  /** The hover card body for a group. */\n  renderGroupPopover?: (\n    group: UnitGridGroup,\n    context: { hue: string; closePopover: () => void },\n  ) => ReactNode;\n  onClickGroup?: (key: string) => void;\n  /** Rendered instead of the grid when no group has a unit. */\n  emptyFallback?: ReactNode;\n  /** Units drawn per group at most. @default 256 */\n  maxUnitsPerGroup?: number;\n  /**\n   * Fixed lattice column count. Without it the count follows the measured\n   * width (ResizeObserver); pass it for fixed layouts and in jsdom.\n   */\n  columns?: number;\n  /** @default the catalog's uic.UnitGrid.changeGroupColor (\"Change group color\") */\n  changeGroupColorLabel?: string;\n  /** @default the catalog's uic.UnitGrid.useColor (\"Use color {index}\") */\n  colorSwatchLabel?: (index: number) => string;\n}\n\nexport function UnitGrid({\n  groups,\n  layout = \"serpentine\",\n  groupPalette,\n  hueOverrides,\n  onHueOverrideChange,\n  legendItems,\n  renderGroupPopover,\n  onClickGroup,\n  emptyFallback,\n  maxUnitsPerGroup = DEFAULT_MAX_UNITS_PER_GROUP,\n  columns,\n  changeGroupColorLabel,\n  colorSwatchLabel,\n  className,\n  ...divProps\n}: UnitGridProps) {\n  const t = useUicTranslator();\n  const palette =\n    groupPalette && groupPalette.length > 0 ? groupPalette : DEFAULT_PALETTE;\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n  const [wrapperWidth, setWrapperWidth] = useState(0);\n\n  const visibleGroups = groups.filter((g) => g.units.length > 0);\n  const hasGroups = visibleGroups.length > 0;\n\n  useEffect(() => {\n    const el = wrapperRef.current;\n    if (!el) return;\n    const ro = new ResizeObserver((entries) => {\n      setWrapperWidth(entries[0]?.contentRect.width ?? 0);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [hasGroups]);\n\n  // Concrete colours (for the ink decision) and token-derived metrics,\n  // resolved against the live cascade. Paint uses the raw strings, so var()\n  // fills keep following the theme; only the ink decision is a snapshot.\n  const [metrics, setMetrics] = useState<UnitGridMetrics>(() => deriveMetrics());\n  const [resolvedColors, setResolvedColors] = useState<Record<string, string>>({});\n  const distinctColors = Array.from(\n    new Set(visibleGroups.flatMap((g) => g.units.map((u) => u.color))),\n  );\n  const colorsKey = distinctColors.join(\" \");\n  const refreshResolved = useEffectEvent(() => {\n    const host = rootRef.current;\n    if (!host) return;\n    const nextMetrics = readMetricsFromDOM(host);\n    setMetrics((prev) =>\n      prev.cellPx === nextMetrics.cellPx &&\n      prev.gapPx === nextMetrics.gapPx &&\n      prev.radiusPx === nextMetrics.radiusPx\n        ? prev\n        : nextMetrics,\n    );\n    const next = resolveColorsInDOM(host, [\n      ...distinctColors,\n      EMPTY_FILL_COLOR,\n      EMPTY_FILL_BACKDROP,\n      INK_DARK,\n      INK_LIGHT,\n    ]);\n    setResolvedColors((prev) => {\n      const keys = Object.keys(next);\n      const same =\n        keys.length === Object.keys(prev).length &&\n        keys.every((k) => prev[k] === next[k]);\n      return same ? prev : next;\n    });\n  });\n  // A theme flip changes what the same var() strings resolve to, so the ink\n  // snapshot re-probes when the root's theme attributes change.\n  const [themeEpoch, setThemeEpoch] = useState(0);\n  useEffect(() => {\n    const observer = new MutationObserver(() => setThemeEpoch((e) => e + 1));\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"data-theme\", \"data-astryx-theme\", \"class\", \"style\"],\n    });\n    return () => observer.disconnect();\n  }, []);\n  useLayoutEffect(() => {\n    refreshResolved();\n    // refreshResolved is an effect event: it is never a dependency.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [colorsKey, themeEpoch]);\n\n  // Hover card: hiding is delayed so the pointer can travel onto it.\n  const [hoverKey, setHoverKey] = useState<string | null>(null);\n  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const cancelHide = () => {\n    if (hideTimer.current) {\n      clearTimeout(hideTimer.current);\n      hideTimer.current = null;\n    }\n  };\n  const scheduleHide = () => {\n    cancelHide();\n    hideTimer.current = setTimeout(() => {\n      setHoverKey(null);\n      setPickerFor(null);\n    }, POPOVER_HIDE_DELAY_MS);\n  };\n  useEffect(() => cancelHide, []);\n\n  // The group the picker was opened for; hovering another group closes it.\n  const [pickerFor, setPickerFor] = useState<string | null>(null);\n  const pickerOpen = pickerFor !== null && pickerFor === hoverKey;\n\n  const [wrapperRect, setWrapperRect] = useState<{\n    left: number;\n    top: number;\n    originLeft: number;\n    originTop: number;\n  } | null>(null);\n  useEffect(() => {\n    if (hoverKey !== null) {\n      const host = wrapperRef.current;\n      const r = host?.getBoundingClientRect();\n      const origin = host ? fixedOriginIn(host) : null;\n      setWrapperRect(\n        r && origin\n          ? { left: r.left, top: r.top, originLeft: origin.left, originTop: origin.top }\n          : null,\n      );\n    }\n  }, [hoverKey]);\n\n  // The card is fixed, so any scroll moves its anchor: dismiss it.\n  const hoverOpen = hoverKey !== null;\n  useEffect(() => {\n    if (!hoverOpen) return;\n    const onScroll = () => {\n      setHoverKey(null);\n      setPickerFor(null);\n    };\n    window.addEventListener(\"scroll\", onScroll, true);\n    return () => window.removeEventListener(\"scroll\", onScroll, true);\n  }, [hoverOpen]);\n\n  const groupByKey = new Map(visibleGroups.map((g) => [g.key, g]));\n  const flowIndexByKey = new Map(visibleGroups.map((g, i) => [g.key, i]));\n\n  // Default hues cycle the palette in flow order, so neighbours differ;\n  // overrides are keyed by the group's stable key.\n  const hueIndexFor = (key: string): number => {\n    const base = hueOverrides?.[key] ?? flowIndexByKey.get(key) ?? 0;\n    return ((base % palette.length) + palette.length) % palette.length;\n  };\n  const hueFor = (key: string): string => palette[hueIndexFor(key)]!;\n\n  const letterFor = (key: string): string => {\n    const group = groupByKey.get(key);\n    return ((group?.label || key).charAt(0) || \"?\").toUpperCase();\n  };\n\n  const inkDarkLuminance = relativeLuminance(resolvedColors[INK_DARK]) ?? 0;\n  const inkLightLuminance = relativeLuminance(resolvedColors[INK_LIGHT]) ?? 1;\n  const inkForLuminance = (fillLuminance: number | null): string => {\n    // An unresolved fill (first paint, jsdom) is taken as light.\n    const lum = fillLuminance ?? 0.8;\n    return contrastRatio(lum, inkDarkLuminance) >= contrastRatio(lum, inkLightLuminance)\n      ? INK_DARK\n      : INK_LIGHT;\n  };\n\n  const inkFor = (color: string): string =>\n    inkForLuminance(relativeLuminance(resolvedColors[color] ?? color));\n\n  const emptyFillLuminance = ((): number | null => {\n    const fg = parseColorChannels(resolvedColors[EMPTY_FILL_COLOR] ?? \"\");\n    if (!fg) return null;\n    if (fg[3] >= 1) return luminanceOfChannels([fg[0], fg[1], fg[2]]);\n    const bg = parseColorChannels(resolvedColors[EMPTY_FILL_BACKDROP] ?? \"\");\n    if (!bg) return null;\n    const a = fg[3];\n    return luminanceOfChannels([\n      fg[0] * a + bg[0] * (1 - a),\n      fg[1] * a + bg[1] * (1 - a),\n      fg[2] * a + bg[2] * (1 - a),\n    ]);\n  })();\n\n  const letterInkFor = (unit: UnitGridUnit): string =>\n    unit.fraction !== undefined && unit.fraction < LETTER_ON_EMPTY_MAX_FRACTION\n      ? inkForLuminance(emptyFillLuminance)\n      : inkFor(unit.color);\n\n  const latticeCols = columns ?? latticeColsForWidth(wrapperWidth, metrics);\n  const packed = packGroups(visibleGroups, maxUnitsPerGroup);\n  const placed = placeCells(packed, layout, latticeCols, metrics);\n  const { width: svgWidth, height: svgHeight } = gridSize(placed, latticeCols, metrics);\n  const segGroups = groupConsecutiveSegments(extractSegments(placed, metrics));\n  const letterIdx = letterCellIndices(placed);\n\n  const hoveredGroup = hoverKey === null ? null : (groupByKey.get(hoverKey) ?? null);\n  const hoverAnchorIdx = hoverKey === null ? undefined : letterIdx.get(hoverKey);\n  const hoverAnchor =\n    hoverAnchorIdx === undefined ? null : (placed[hoverAnchorIdx] ?? null);\n  const closePopover = () => {\n    setHoverKey(null);\n    setPickerFor(null);\n  };\n\n  const groupKeyFromEvent = (e: MouseEvent): string | null =>\n    (e.target as Element).getAttribute?.(\"data-group-key\") ?? null;\n\n  const showGrid = hasGroups && (columns !== undefined || wrapperWidth > 0);\n  const showPopover =\n    hoveredGroup !== null &&\n    hoverKey !== null &&\n    hoverAnchor !== null &&\n    wrapperRect !== null &&\n    (renderGroupPopover !== undefined || onHueOverrideChange !== undefined);\n\n  const togglePicker = () => setPickerFor((v) => (v === hoverKey ? null : hoverKey));\n\n  return (\n    <VStack\n      ref={rootRef}\n      gap={3}\n      align=\"stretch\"\n      className={cx(\"uic-unit-grid\", className)}\n      {...divProps}\n    >\n      {legendItems && legendItems.length > 0 && (\n        <HStack gap={3} wrap=\"wrap\" align=\"center\">\n          {legendItems.map((item, i) => (\n            <HStack key={i} gap={1} align=\"center\">\n              <svg width={10} height={10} role=\"img\" aria-label={item.label}>\n                <rect width={10} height={10} rx={2} style={{ fill: item.color }} />\n              </svg>\n              <Text size=\"sm\" color=\"secondary\">\n                {item.label}\n              </Text>\n            </HStack>\n          ))}\n        </HStack>\n      )}\n      {!hasGroups ? (\n        (emptyFallback ?? null)\n      ) : (\n        <div ref={wrapperRef} className=\"uic-unit-grid__wrapper\">\n          {showGrid && (\n            <svg\n              width={svgWidth}\n              height={svgHeight}\n              role=\"img\"\n              aria-label={divProps[\"aria-label\"] ?? t(\"uic.UnitGrid.label\")}\n              className={cx(\n                \"uic-unit-grid__svg\",\n                onClickGroup !== undefined && \"uic-unit-grid__svg--clickable\",\n              )}\n              onMouseMove={(e) => {\n                const key = groupKeyFromEvent(e);\n                if (key === null) {\n                  scheduleHide();\n                } else {\n                  cancelHide();\n                  setHoverKey(key);\n                }\n              }}\n              onMouseLeave={scheduleHide}\n              onClick={(e) => {\n                const key = groupKeyFromEvent(e);\n                if (key !== null && onClickGroup) onClickGroup(key);\n              }}\n            >\n              {segGroups.map((segs) => {\n                const key = segs[0]!.groupKey;\n                const group = groupByKey.get(key);\n                const hue = hueFor(key);\n                const hovered = hoverKey === key;\n                // Hover strengthens the hovered group's tint and border\n                // rather than dimming the others.\n                return (\n                  <path\n                    key={key}\n                    data-group-key={key}\n                    d={platePath(segs, metrics)}\n                    style={{ fill: hue, stroke: hue }}\n                    fillOpacity={hovered ? 0.32 : 0.15}\n                    strokeWidth={hovered ? 2.5 : 1.5}\n                    strokeDasharray={\n                      group?.plateVariant === \"dashed\" ? PLATE_DASH_PATTERN : undefined\n                    }\n                  />\n                );\n              })}\n              {placed.map((cell, i) => {\n                const isPartial =\n                  cell.unit.fraction !== undefined && cell.unit.fraction < 1;\n                const cellHovered = hoverKey === cell.groupKey;\n                return (\n                  <g key={i}>\n                    <rect\n                      className=\"uic-unit-grid__cell\"\n                      data-group-key={cell.groupKey}\n                      x={cell.px}\n                      y={cell.py}\n                      width={metrics.cellPx}\n                      height={metrics.cellPx}\n                      rx={metrics.radiusPx}\n                      style={{\n                        fill: isPartial ? EMPTY_FILL_COLOR : cell.unit.color,\n                        stroke: cellHovered\n                          ? hueFor(cell.groupKey)\n                          : \"var(--unit-grid-cell-stroke)\",\n                      }}\n                      strokeWidth={cellHovered ? 1 : 0.5}\n                    />\n                    {isPartial && (\n                      <rect\n                        data-group-key={cell.groupKey}\n                        x={cell.px}\n                        y={cell.py + metrics.cellPx * (1 - (cell.unit.fraction ?? 0))}\n                        width={metrics.cellPx}\n                        height={metrics.cellPx * (cell.unit.fraction ?? 0)}\n                        rx={1}\n                        style={{ fill: cell.unit.color }}\n                      />\n                    )}\n                    {letterIdx.get(cell.groupKey) === i && (\n                      <text\n                        x={cell.px + metrics.cellPx / 2}\n                        y={cell.py + metrics.cellPx / 2}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"central\"\n                        fontSize={metrics.cellPx * 0.62}\n                        fontWeight={700}\n                        pointerEvents=\"none\"\n                        style={{ fill: letterInkFor(cell.unit) }}\n                      >\n                        {letterFor(cell.groupKey)}\n                      </text>\n                    )}\n                  </g>\n                );\n              })}\n            </svg>\n          )}\n          {/* role=\"img\" flattens the svg for assistive technology, so the\n              groups are listed here as well. */}\n          <VisuallyHidden as=\"ul\">\n            {visibleGroups.map((g) => (\n              <li key={g.key}>{g.label || g.key}</li>\n            ))}\n          </VisuallyHidden>\n          {showPopover && (\n            <div\n              className=\"uic-unit-grid__popover\"\n              onMouseEnter={cancelHide}\n              onMouseLeave={scheduleHide}\n              style={{\n                borderColor: hueFor(hoverKey),\n                ...(() => {\n                  const viewportLeft =\n                    wrapperRect.left +\n                    Math.max(\n                      0,\n                      Math.min(\n                        hoverAnchor.px - metrics.platePadX,\n                        Math.max(0, wrapperWidth - POPOVER_CLAMP_WIDTH),\n                      ),\n                    );\n                  const cellTop = wrapperRect.top + hoverAnchor.py;\n                  // Above the cell when the viewport has room, else below;\n                  // decided in viewport space, then rebased onto the block\n                  // the offsets resolve against.\n                  const flipAbove = cellTop >= POPOVER_FLIP_MIN_TOP;\n                  const viewportTop = flipAbove\n                    ? cellTop - metrics.platePadY - POPOVER_OFFSET\n                    : cellTop + metrics.cellPx + metrics.platePadY + POPOVER_OFFSET;\n                  const left = viewportLeft - wrapperRect.originLeft;\n                  const top = viewportTop - wrapperRect.originTop;\n                  return flipAbove\n                    ? { left, top, transform: \"translateY(-100%)\" }\n                    : { left, top };\n                })(),\n              }}\n            >\n              <VStack gap={1.5} align=\"stretch\">\n                {pickerOpen && onHueOverrideChange && (\n                  <HStack gap={1} align=\"center\">\n                    {palette.map((hue, pi) => {\n                      const pickThis = () => {\n                        onHueOverrideChange(hoverKey, pi);\n                        setPickerFor(null);\n                      };\n                      const selected = hueIndexFor(hoverKey) === pi;\n                      return (\n                        <svg\n                          key={pi}\n                          width={20}\n                          height={20}\n                          role=\"button\"\n                          tabIndex={0}\n                          aria-label={\n                            colorSwatchLabel\n                              ? colorSwatchLabel(pi + 1)\n                              : t(\"uic.UnitGrid.useColor\", { index: pi + 1 })\n                          }\n                          className=\"uic-unit-grid__swatch\"\n                          onClick={pickThis}\n                          onKeyDown={(e) => activateOnKey(e, pickThis)}\n                        >\n                          <rect\n                            x={1}\n                            y={1}\n                            width={18}\n                            height={18}\n                            rx={5}\n                            style={{ fill: hue, stroke: hue }}\n                            fillOpacity={0.35}\n                            strokeWidth={selected ? 2 : 1}\n                          />\n                          {selected && (\n                            <text\n                              x={10}\n                              y={10.5}\n                              textAnchor=\"middle\"\n                              dominantBaseline=\"central\"\n                              fontSize={11}\n                              fontWeight={700}\n                              pointerEvents=\"none\"\n                              style={{ fill: hue }}\n                            >\n                              ✓\n                            </text>\n                          )}\n                        </svg>\n                      );\n                    })}\n                  </HStack>\n                )}\n                {onHueOverrideChange && (\n                  <HStack gap={1.5} align=\"center\">\n                    <svg\n                      width={16}\n                      height={16}\n                      role=\"button\"\n                      tabIndex={0}\n                      aria-label={\n                        changeGroupColorLabel ?? t(\"uic.UnitGrid.changeGroupColor\")\n                      }\n                      className=\"uic-unit-grid__swatch\"\n                      onClick={togglePicker}\n                      onKeyDown={(e) => activateOnKey(e, togglePicker)}\n                    >\n                      <rect\n                        x={1}\n                        y={1}\n                        width={14}\n                        height={14}\n                        rx={4}\n                        style={{ fill: hueFor(hoverKey), stroke: hueFor(hoverKey) }}\n                        fillOpacity={0.15}\n                        strokeWidth={1.5}\n                      />\n                    </svg>\n                    <Text size=\"sm\" weight=\"semibold\">\n                      {hoveredGroup.label || hoveredGroup.key}\n                    </Text>\n                  </HStack>\n                )}\n                {renderGroupPopover?.(hoveredGroup, {\n                  hue: hueFor(hoverKey),\n                  closePopover,\n                })}\n              </VStack>\n            </div>\n          )}\n        </div>\n      )}\n    </VStack>\n  );\n}\n\nUnitGrid.displayName = \"UnitGrid\";\n"],"mappings":"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"}

package/dist/components/UnitGrid/UnitGridSkeleton.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export interface UnitGridSkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Lattice rows, two blocks each. @default 3 */
+    rows?: number;
+}
+export declare function UnitGridSkeleton({ rows, className, ...divProps }: UnitGridSkeletonProps): import("react").JSX.Element;
+export declare namespace UnitGridSkeleton {
+    var displayName: string;
+}

package/dist/components/UnitGrid/UnitGridSkeleton.js

@@ -0,0 +1,73 @@
+import { HStack as e, VStack as t } from "@astryxdesign/core/Stack";
+import { Skeleton as n } from "@astryxdesign/core/Skeleton";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/UnitGrid/UnitGridSkeleton.tsx
+var a = 3, o = [
+	140,
+	180,
+	100
+], s = "var(--size-element-sm)", c = 5, l = 10, u = 40, d = 12, f = [
+	["45%", "25%"],
+	["30%", "40%"],
+	["55%", "20%"]
+], p = "var(--size-element-sm)";
+function m({ rows: m = a, className: h, ...g }) {
+	let _ = 0;
+	return /* @__PURE__ */ i(t, {
+		gap: 3,
+		align: "stretch",
+		className: ["uic-unit-grid-skeleton", h].filter(Boolean).join(" "),
+		...g,
+		children: [
+			/* @__PURE__ */ r(e, {
+				gap: 3,
+				align: "center",
+				children: o.map((e, t) => /* @__PURE__ */ r(n, {
+					width: e,
+					height: s,
+					radius: 2,
+					index: _++
+				}, t))
+			}),
+			/* @__PURE__ */ r(e, {
+				gap: 3,
+				wrap: "wrap",
+				align: "center",
+				children: Array.from({ length: c }, (t, a) => /* @__PURE__ */ i(e, {
+					gap: 1,
+					align: "center",
+					children: [/* @__PURE__ */ r(n, {
+						width: l,
+						height: l,
+						radius: 1,
+						index: _++
+					}), /* @__PURE__ */ r(n, {
+						width: u,
+						height: d,
+						radius: 1,
+						index: _++
+					})]
+				}, a))
+			}),
+			Array.from({ length: Math.max(0, m) }, (t, i) => {
+				let a = f[i % f.length];
+				return /* @__PURE__ */ r(e, {
+					gap: 3,
+					align: "center",
+					className: "uic-unit-grid-skeleton__row",
+					children: a.map((e, t) => /* @__PURE__ */ r(n, {
+						width: e,
+						height: p,
+						radius: 1,
+						index: _++
+					}, t))
+				}, i);
+			})
+		]
+	});
+}
+m.displayName = "UnitGridSkeleton";
+//#endregion
+export { m as UnitGridSkeleton };
+
+//# sourceMappingURL=UnitGridSkeleton.js.map

package/dist/components/UnitGrid/UnitGridSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnitGridSkeleton.js","names":[],"sources":["../../../src/components/UnitGrid/UnitGridSkeleton.tsx"],"sourcesContent":["/**\n * UnitGridSkeleton\n *\n * The loading stand-in for a UnitGrid and the toolbar above it: a row of\n * control-sized bars, a legend row, then two blocks per lattice row. The\n * lattice is drawn at low fidelity on purpose; mimicking plates and cells\n * would read as detail while nothing is loaded.\n *\n * @example\n * <Suspense fallback={<UnitGridSkeleton />}>...</Suspense>\n */\nimport type { HTMLAttributes } from \"react\";\nimport { HStack, VStack } from \"@astryxdesign/core/Stack\";\nimport { Skeleton } from \"@astryxdesign/core/Skeleton\";\n\nconst DEFAULT_ROW_COUNT = 3;\n\n/** The toolbar's control widths: per control, not a scale, so no token. */\nconst TOOLBAR_PILL_WIDTHS = [140, 180, 100] as const;\nconst TOOLBAR_PILL_HEIGHT = \"var(--size-element-sm)\";\n\nconst LEGEND_ITEM_COUNT = 5;\nconst LEGEND_SWATCH_SIZE = 10;\nconst LEGEND_LABEL_WIDTH = 40;\nconst LEGEND_LABEL_HEIGHT = 12;\n\n/** Two blocks per row, widths varied so the rows read organic. */\nconst ROW_BLOCK_WIDTHS = [\n  [\"45%\", \"25%\"],\n  [\"30%\", \"40%\"],\n  [\"55%\", \"20%\"],\n] as const;\nconst ROW_BLOCK_HEIGHT = \"var(--size-element-sm)\";\n\nexport interface UnitGridSkeletonProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"children\"\n> {\n  /** Lattice rows, two blocks each. @default 3 */\n  rows?: number;\n}\n\nexport function UnitGridSkeleton({\n  rows = DEFAULT_ROW_COUNT,\n  className,\n  ...divProps\n}: UnitGridSkeletonProps) {\n  // One running index across every bar, so the shimmer reads as one wave.\n  let waveIndex = 0;\n\n  return (\n    <VStack\n      gap={3}\n      align=\"stretch\"\n      className={[\"uic-unit-grid-skeleton\", className].filter(Boolean).join(\" \")}\n      {...divProps}\n    >\n      <HStack gap={3} align=\"center\">\n        {TOOLBAR_PILL_WIDTHS.map((width, i) => (\n          <Skeleton\n            key={i}\n            width={width}\n            height={TOOLBAR_PILL_HEIGHT}\n            radius={2}\n            index={waveIndex++}\n          />\n        ))}\n      </HStack>\n      <HStack gap={3} wrap=\"wrap\" align=\"center\">\n        {Array.from({ length: LEGEND_ITEM_COUNT }, (_unused, i) => (\n          <HStack key={i} gap={1} align=\"center\">\n            <Skeleton\n              width={LEGEND_SWATCH_SIZE}\n              height={LEGEND_SWATCH_SIZE}\n              radius={1}\n              index={waveIndex++}\n            />\n            <Skeleton\n              width={LEGEND_LABEL_WIDTH}\n              height={LEGEND_LABEL_HEIGHT}\n              radius={1}\n              index={waveIndex++}\n            />\n          </HStack>\n        ))}\n      </HStack>\n      {Array.from({ length: Math.max(0, rows) }, (_unused, rowIdx) => {\n        const widths = ROW_BLOCK_WIDTHS[rowIdx % ROW_BLOCK_WIDTHS.length]!;\n        return (\n          <HStack\n            key={rowIdx}\n            gap={3}\n            align=\"center\"\n            className=\"uic-unit-grid-skeleton__row\"\n          >\n            {widths.map((width, blockIdx) => (\n              <Skeleton\n                key={blockIdx}\n                width={width}\n                height={ROW_BLOCK_HEIGHT}\n                radius={1}\n                index={waveIndex++}\n              />\n            ))}\n          </HStack>\n        );\n      })}\n    </VStack>\n  );\n}\n\nUnitGridSkeleton.displayName = \"UnitGridSkeleton\";\n"],"mappings":";;;;AAeA,IAAM,IAAoB,GAGpB,IAAsB;CAAC;CAAK;CAAK;AAAG,GACpC,IAAsB,0BAEtB,IAAoB,GACpB,IAAqB,IACrB,IAAqB,IACrB,IAAsB,IAGtB,IAAmB;CACvB,CAAC,OAAO,KAAK;CACb,CAAC,OAAO,KAAK;CACb,CAAC,OAAO,KAAK;AACf,GACM,IAAmB;AAUzB,SAAgB,EAAiB,EAC/B,UAAO,GACP,cACA,GAAG,KACqB;CAExB,IAAI,IAAY;CAEhB,OACE,kBAAC,GAAD;EACE,KAAK;EACL,OAAM;EACN,WAAW,CAAC,0BAA0B,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACzE,GAAI;EAJN,UAAA;GAME,kBAAC,GAAD;IAAQ,KAAK;IAAG,OAAM;IACnB,UAAA,EAAoB,KAAK,GAAO,MAC/B,kBAAC,GAAD;KAES;KACP,QAAQ;KACR,QAAQ;KACR,OAAO;IACR,GALM,CAKN,CACF;GACK,CAAA;GACR,kBAAC,GAAD;IAAQ,KAAK;IAAG,MAAK;IAAO,OAAM;IAC/B,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAkB,IAAI,GAAS,MACnD,kBAAC,GAAD;KAAgB,KAAK;KAAG,OAAM;KAA9B,UAAA,CACE,kBAAC,GAAD;MACE,OAAO;MACP,QAAQ;MACR,QAAQ;MACR,OAAO;KACR,CAAA,GACD,kBAAC,GAAD;MACE,OAAO;MACP,QAAQ;MACR,QAAQ;MACR,OAAO;KACR,CAAA,CACK;IAbK,GAAA,CAaL,CACT;GACK,CAAA;GACP,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,CAAI,EAAE,IAAI,GAAS,MAAW;IAC9D,IAAM,IAAS,EAAiB,IAAS,EAAiB;IAC1D,OACE,kBAAC,GAAD;KAEE,KAAK;KACL,OAAM;KACN,WAAU;KAET,UAAA,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD;MAES;MACP,QAAQ;MACR,QAAQ;MACR,OAAO;KACR,GALM,CAKN,CACF;IACK,GAdD,CAcC;GAEZ,CAAC;EACK;;AAEZ;AAEA,EAAiB,cAAc"}

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

@@ -0,0 +1,4 @@
+export { UnitGrid } from './UnitGrid';
+export type { UnitGridGroup, UnitGridLayout, UnitGridLegendItem, UnitGridProps, UnitGridUnit, } from './UnitGrid';
+export { UnitGridSkeleton } from './UnitGridSkeleton';
+export type { UnitGridSkeletonProps } from './UnitGridSkeleton';

package/dist/components/UnitGrid/index.js

@@ -0,0 +1,3 @@
+import { UnitGrid as e } from "./UnitGrid2.js";
+import { UnitGridSkeleton as t } from "./UnitGridSkeleton.js";
+export { e as UnitGrid, t as UnitGridSkeleton };