@galaxy-io/dls 2.9.0 → 2.10.0

package/dist/beacons/Beacon.d.ts

@@ -13,7 +13,7 @@ export declare enum BeaconSize {
     /** 10px, beside `body_lg` (20px line); a label is `body_lg` with an 8px gap. */
     X_LARGE = "X_LARGE"
 }
-/** Dot color role (Constitution V-A color set). Neutral steps resolve to `color.text.*`; statuses fill with `color.mark.<status>` and label with `color.text.<status>`. */
+/** Dot color role (AGENTS.md "Variant": color set). Neutral steps resolve to `color.text.*`; statuses fill with `color.mark.<status>` and label with `color.text.<status>`. */
 export declare enum BeaconVariant {
     /** `text.primary`. The default (1.x `BASE` / `PRIMARY`). */
     PRIMARY = "PRIMARY",

package/dist/beacons/Beacon.js

@@ -1,4 +1,5 @@
 import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { ROLE_COLOR_TO_CSS_MAP } from "../styles/internal/roleColor.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
 import { forwardRef } from "react";
@@ -46,7 +47,7 @@ var BeaconSize = /* @__PURE__ */ function(BeaconSize) {
 	BeaconSize["X_LARGE"] = "X_LARGE";
 	return BeaconSize;
 }({});
-/** Dot color role (Constitution V-A color set). Neutral steps resolve to `color.text.*`; statuses fill with `color.mark.<status>` and label with `color.text.<status>`. */
+/** Dot color role (AGENTS.md "Variant": color set). Neutral steps resolve to `color.text.*`; statuses fill with `color.mark.<status>` and label with `color.text.<status>`. */
 var BeaconVariant = /* @__PURE__ */ function(BeaconVariant) {
 	/** `text.primary`. The default (1.x `BASE` / `PRIMARY`). */
 	BeaconVariant["PRIMARY"] = "PRIMARY";
@@ -102,7 +103,7 @@ var BEACON_SIZE_TO_GAP_CSS_MAP = {
 	["LARGE"]: "gx-Beacon-LARGE-lpeaf5b",
 	["X_LARGE"]: "gx-Beacon-X_LARGE-xoex4vi"
 };
-/** The label's type step per rung (Constitution III-A.4). */
+/** The label's type step per rung (AGENTS.md "Control rungs"). */
 var BEACON_SIZE_TO_TEXT_SIZE_MAP = {
 	["X_SMALL"]: TextSize.CAPTION,
 	["SMALL"]: TextSize.BODY_SM,
@@ -124,38 +125,21 @@ var BEACON_VARIANT_TO_CSS_MAP = {
 	["WARNING"]: "gx-Beacon-WARNING-w1d27vzd",
 	["ERROR"]: "gx-Beacon-ERROR-eshtlvu"
 };
-/** Categorical `color`: the label `text.<family>`, the dot `mark.<family>`, the way a status variant renders. */
-var BEACON_COLOR_TO_CSS_MAP = {
-	success: "gx-Beacon-success-s1nxs4in",
-	warning: "gx-Beacon-warning-w1dc3rbq",
-	error: "gx-Beacon-error-edasyys",
-	red: "gx-Beacon-red-r1rjlf72",
-	orange: "gx-Beacon-orange-ofhdj80",
-	amber: "gx-Beacon-amber-a1lpbbc5",
-	yellow: "gx-Beacon-yellow-y1wxkqi6",
-	lime: "gx-Beacon-lime-l9ukjzr",
-	green: "gx-Beacon-green-g1be6eig",
-	emerald: "gx-Beacon-emerald-emvjtgh",
-	teal: "gx-Beacon-teal-tkh8tqf",
-	cyan: "gx-Beacon-cyan-c1e21vro",
-	sky: "gx-Beacon-sky-sxwnre2",
-	blue: "gx-Beacon-blue-b1qbmqgn",
-	indigo: "gx-Beacon-indigo-idn9ked",
-	violet: "gx-Beacon-violet-v1tc1xnc",
-	purple: "gx-Beacon-purple-pgzv1cm",
-	fuchsia: "gx-Beacon-fuchsia-f1marsuc",
-	pink: "gx-Beacon-pink-p1ikfn3f",
-	rose: "gx-Beacon-rose-romuo8"
-};
+/**
+* Categorical `color`: the label `text.<family>`, the dot `mark.<family>`, the way a status variant
+* renders. Reads the shared `--gx-role-*` variables `ROLE_COLOR_TO_CSS_MAP` sets per family, so the
+* twenty families are written once (`styles/internal/roleColor`).
+*/
+var BEACON_COLOR_CSS = "gx-Beacon-BEACON_COLOR_CSS-b1nxs4in";
 /** Declared after the variant and color maps so `hex` wins over them: the label and the dot both take it. */
-var HEX_CSS = "gx-Beacon-HEX_CSS-h14k32og";
+var HEX_CSS = "gx-Beacon-HEX_CSS-h1dc3rbq";
 /**
 * One pulse every thirteen `duration.base` steps (1.95s, the 1.x 2s default), linear, forever: the
 * ring, in the dot's fill, grows from the dot's edge to 2.5× while it fades from 0.5 to 0. Paint-only (`transform`), so
 * the line box never moves. The keyframes are global, so the name is `gx-` prefixed.
 * `REDUCED_MOTION` stops it and the ring falls back to its resting `opacity: 0`.
 */
-var PULSE_CSS = "gx-Beacon-PULSE_CSS-p88byx5";
+var PULSE_CSS = "gx-Beacon-PULSE_CSS-pdasyys";
 /**
 * A status dot, alone or with its `label`; its color is a role (`variant`), a category (`color`) or
 * data (`hex`), and it can pulse.
@@ -163,7 +147,7 @@ var PULSE_CSS = "gx-Beacon-PULSE_CSS-p88byx5";
 var Beacon = forwardRef(function Beacon({ label, size = "MEDIUM", variant = "PRIMARY", color, hex, isPulse = false, ariaLabel, id, className, style, ...rest }, ref) {
 	const variables = {};
 	if (hex !== void 0) variables["--gx-beacon-hex"] = hex;
-	const colorCss = cx(color !== void 0 ? BEACON_COLOR_TO_CSS_MAP[color] : BEACON_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS);
+	const colorCss = cx(color !== void 0 ? cx(ROLE_COLOR_TO_CSS_MAP[color], BEACON_COLOR_CSS) : BEACON_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS);
 	if (label) return /* @__PURE__ */ jsxs(LabeledRoot, {
 		...rest,
 		ref,

package/dist/brand/GalaxyAlchemyWordmark.d.ts

@@ -26,6 +26,9 @@ export interface GalaxyAlchemyWordmarkProps extends AriaAttributes {
     /** Inline style on the `<svg>`. */
     style?: CSSProperties;
 }
-/** Alchemy's product wordmark, painted `text.primary`. Labelled "Alchemy" unless `ariaLabel=""`. */
+/**
+ * Alchemy's product wordmark, painted `text.primary`. Labelled "Alchemy" unless `ariaLabel=""`.
+ * Never beside a logomark.
+ */
 declare const GalaxyAlchemyWordmark: import("react").ForwardRefExoticComponent<GalaxyAlchemyWordmarkProps & import("react").RefAttributes<SVGSVGElement>>;
 export default GalaxyAlchemyWordmark;

package/dist/brand/GalaxyAlchemyWordmark.js

@@ -9,13 +9,19 @@ import { cx } from "@linaria/core";
 * It behaves exactly like `GalaxyWordmark`: it paints `text.primary`, reads only CSS variables,
 * and is SSR-safe.
 *
+* It always stands alone: never set it beside `GalaxyLogomark` (or any logomark). The product
+* wordmark is the whole logo; only `GalaxyWordmark` pairs with the mark.
+*
 * The artwork is `src/brand/assets/galaxy-alchemy-wordmark.svg`, compiled by `pnpm assets` into
 * the private `GalaxyAlchemyWordmarkSvg`; the aspect ratio comes from its
 * `GALAXY_ALCHEMY_WORDMARK_VIEW_BOX`.
 */
 /** Width ÷ height of the artwork, from its viewBox. */
 var GALAXY_ALCHEMY_WORDMARK_ASPECT_RATIO = GALAXY_ALCHEMY_WORDMARK_VIEW_BOX.width / GALAXY_ALCHEMY_WORDMARK_VIEW_BOX.height;
-/** Alchemy's product wordmark, painted `text.primary`. Labelled "Alchemy" unless `ariaLabel=""`. */
+/**
+* Alchemy's product wordmark, painted `text.primary`. Labelled "Alchemy" unless `ariaLabel=""`.
+* Never beside a logomark.
+*/
 var GalaxyAlchemyWordmark = forwardRef(function GalaxyAlchemyWordmark({ size = 20, isInverse = false, ariaLabel = "Alchemy", id, className, style, ...rest }, ref) {
 	const aria = brandMarkAriaProps(ariaLabel);
 	return /* @__PURE__ */ jsx(GalaxyAlchemyWordmarkSvg, {

package/dist/brand/GalaxyFilamentWordmark.d.ts

@@ -1,7 +1,7 @@
 import { type AriaAttributes, type CSSProperties } from "react";
 export interface GalaxyFilamentWordmarkProps extends AriaAttributes {
     /**
-     * Height of the wordmark in px. The width follows the aspect ratio (≈ 3.76 × height).
+     * Height of the letters in px: the artwork is cropped to its ink, so `size` is the cap-to-baseline height with no empty band (like `GalaxyAlchemyWordmark`). The width follows the aspect ratio (≈ 4.07 × height).
      * @default 20
      */
     size?: number;
@@ -25,6 +25,9 @@ export interface GalaxyFilamentWordmarkProps extends AriaAttributes {
     /** Inline style on the `<svg>`. */
     style?: CSSProperties;
 }
-/** Filament's product wordmark, painted `text.primary`. Labelled "Filament" unless `ariaLabel=""`. */
+/**
+ * Filament's product wordmark, painted `text.primary`. Labelled "Filament" unless `ariaLabel=""`.
+ * Never beside a logomark.
+ */
 declare const GalaxyFilamentWordmark: import("react").ForwardRefExoticComponent<GalaxyFilamentWordmarkProps & import("react").RefAttributes<SVGSVGElement>>;
 export default GalaxyFilamentWordmark;

package/dist/brand/GalaxyFilamentWordmark.js

@@ -9,13 +9,20 @@ import { cx } from "@linaria/core";
 * inline SVG. It behaves exactly like `GalaxyWordmark`: it paints `text.primary`, reads only CSS
 * variables, and is SSR-safe.
 *
+* It always stands alone: never set it beside `GalaxyLogomark` (or any logomark). The product
+* wordmark is the whole logo; only `GalaxyWordmark` pairs with the mark.
+*
 * The artwork is `src/brand/assets/galaxy-filament-wordmark.svg`, compiled by `pnpm assets` into
 * the private `GalaxyFilamentWordmarkSvg`; the aspect ratio comes from its
-* `GALAXY_FILAMENT_WORDMARK_VIEW_BOX`.
+* `GALAXY_FILAMENT_WORDMARK_VIEW_BOX`. The viewBox is cropped to the ink (`0 91 4513 1109`), so a
+* `size` is the letters' height and no caller needs an ink-ratio correction (DLS 2.10).
 */
 /** Width ÷ height of the artwork, from its viewBox. */
 var GALAXY_FILAMENT_WORDMARK_ASPECT_RATIO = GALAXY_FILAMENT_WORDMARK_VIEW_BOX.width / GALAXY_FILAMENT_WORDMARK_VIEW_BOX.height;
-/** Filament's product wordmark, painted `text.primary`. Labelled "Filament" unless `ariaLabel=""`. */
+/**
+* Filament's product wordmark, painted `text.primary`. Labelled "Filament" unless `ariaLabel=""`.
+* Never beside a logomark.
+*/
 var GalaxyFilamentWordmark = forwardRef(function GalaxyFilamentWordmark({ size = 20, isInverse = false, ariaLabel = "Filament", id, className, style, ...rest }, ref) {
 	const aria = brandMarkAriaProps(ariaLabel);
 	return /* @__PURE__ */ jsx(GalaxyFilamentWordmarkSvg, {

package/dist/brand/GalaxyLogomark.js

@@ -9,6 +9,9 @@ import { cx } from "@linaria/core";
 * monochrome fill (`color.solid.primary.background`, which is `text.primary`: the 1.x look). Color
 * is CSS (`fill="currentColor"`), so it is SSR-safe and a theme switch needs no re-render.
 *
+* It pairs only with `GalaxyWordmark`. The product wordmarks (`GalaxyFilamentWordmark`,
+* `GalaxyAlchemyWordmark`) stand alone: never set the mark beside them.
+*
 * The artwork is `src/brand/assets/galaxy-logomark.svg`, compiled by `pnpm assets` into the private
 * `GalaxyLogomarkSvg`; this component only names, sizes and colors it.
 */

package/dist/brand/PoweredBy.d.ts

@@ -0,0 +1,27 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+/** The product whose wordmark the credit shows. */
+export declare enum PoweredByWordmark {
+    /** `GalaxyFilamentWordmark`. */
+    FILAMENT = "FILAMENT",
+    /** `GalaxyAlchemyWordmark`. */
+    ALCHEMY = "ALCHEMY"
+}
+export interface PoweredByProps extends AriaAttributes {
+    /** The product wordmark. An enum, not a node, so the wordmark always stands alone (never beside a logomark). */
+    wordmark: PoweredByWordmark;
+    /** The product's site. Opens in a new tab (`target="_blank"`, `rel="noopener noreferrer"`). */
+    href: string;
+    /** The link's name ("Powered by Filament"); " (opens in a new tab)" is appended. The wordmark itself is decorative. */
+    ariaLabel: string;
+    /** DOM id on the `<a>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<a>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the `<a>`. */
+    className?: string;
+    /** Inline style on the `<a>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** The sidebar credit: "Powered by" and a product wordmark, linking to the product in a new tab. */
+declare const PoweredBy: import("react").ForwardRefExoticComponent<PoweredByProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export default PoweredBy;

package/dist/brand/PoweredBy.js

@@ -0,0 +1,96 @@
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import GalaxyAlchemyWordmark from "./GalaxyAlchemyWordmark.js";
+import GalaxyFilamentWordmark from "./GalaxyFilamentWordmark.js";
+/* empty css                    */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/PoweredBy.tsx
+/**
+* The credit at the foot of a Galaxy module's sidebar: "Powered by" and the product wordmark, as
+* one link that opens the product's site in a new tab. A 40px row (tall enough to centre on the
+* Galaxy host's 24px theme toggle beside it) with `body_sm` tertiary text and the wordmark sized so
+* every product reads at the same x-height (Filament 15px, Alchemy 12px); its accessible name is
+* `ariaLabel` plus " (opens in a new tab)".
+*
+* `wordmark` is an enum of the product wordmarks, never a node: a product wordmark always stands
+* alone (AGENTS.md "Marks"), so no logomark can be passed in. There is no trailing arrow either
+* (`Link isExternal` would draw one after the logo); the new tab is in the name.
+*
+* Hover is a monochrome step on the mark, `text.tertiary` to `text.secondary`, the DLS's own hover
+* idiom (a color change, never opacity). Focus is the `FOCUS_RING`. Not a nav destination
+* (`NavItem`), not a body link (`Link`).
+*/
+/** The product whose wordmark the credit shows. */
+var PoweredByWordmark = /* @__PURE__ */ function(PoweredByWordmark) {
+	/** `GalaxyFilamentWordmark`. */
+	PoweredByWordmark["FILAMENT"] = "FILAMENT";
+	/** `GalaxyAlchemyWordmark`. */
+	PoweredByWordmark["ALCHEMY"] = "ALCHEMY";
+	return PoweredByWordmark;
+}({});
+/**
+* Each wordmark's `size` (its full letter height), chosen so the products read at the same optical
+* size: their lowercase bodies (x-heights) match, not their boxes. Filament's x-height is 527 of
+* its 1109 units, so 15px gives 7.1px, about the `body_sm` text beside it. Alchemy's is 151 of
+* 252, with tall ascenders and a descender around a heavy body, so at 15px its letters were 26%
+* larger; 12px gives a 7.2px x-height and a width (58px) next to Filament's (61px). Measured from
+* the artwork (Mitch, 2026-10-10: "alchemy feels a bit too big").
+*/
+var POWERED_BY_WORDMARK_TO_SIZE_PX_MAP = {
+	["FILAMENT"]: 15,
+	["ALCHEMY"]: 12
+};
+/** What is appended to the name, as `Link isExternal` does. */
+var NEW_TAB_SUFFIX = " (opens in a new tab)";
+/**
+* The row: 40px (32 + 8), 8px in from the sides like a `NavItem`'s content, the text and the mark
+* 8px apart on one centre line. The radius gives the focus ring its corners.
+*/
+var Root = /*#__PURE__*/ styled("a")({
+	name: "Root",
+	class: "gx-PoweredBy-r1hilrad",
+	propsAsIs: false
+});
+/**
+* The mark's color: `text.tertiary` at rest, `text.secondary` while the row is hovered. The mark
+* already transitions `color` on `duration.fast`. Declared in this module, whose CSS follows the
+* wordmarks' (it imports them), so it wins over their `text.primary`.
+*/
+var MARK_CSS = "gx-PoweredBy-MARK_CSS-m1s356ob";
+/** The wordmark component per product: both take a px `size`, an `ariaLabel` and a class. */
+var POWERED_BY_WORDMARK_TO_COMPONENT_MAP = {
+	["FILAMENT"]: GalaxyFilamentWordmark,
+	["ALCHEMY"]: GalaxyAlchemyWordmark
+};
+/** "Powered by" never wraps or shrinks: the row is short and the mark follows it. */
+var LABEL_CSS = "gx-PoweredBy-LABEL_CSS-l1ez0mfr";
+/** The sidebar credit: "Powered by" and a product wordmark, linking to the product in a new tab. */
+var PoweredBy = forwardRef(function PoweredBy({ wordmark, href, ariaLabel, id, className, style, ...rest }, ref) {
+	const Wordmark = POWERED_BY_WORDMARK_TO_COMPONENT_MAP[wordmark];
+	return /* @__PURE__ */ jsxs(Root, {
+		"aria-label": `${ariaLabel}${NEW_TAB_SUFFIX}`,
+		...rest,
+		ref,
+		id,
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className,
+		style,
+		children: [/* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: TextSize.BODY_SM,
+			variant: TextVariant.TERTIARY,
+			className: LABEL_CSS,
+			children: "Powered by"
+		}), /* @__PURE__ */ jsx(Wordmark, {
+			size: POWERED_BY_WORDMARK_TO_SIZE_PX_MAP[wordmark],
+			ariaLabel: "",
+			className: MARK_CSS
+		})]
+	});
+});
+PoweredBy.displayName = "PoweredBy";
+//#endregion
+export { PoweredByWordmark, PoweredBy as default };

package/dist/brand/internal/svg/GalaxyFilamentWordmarkSvg.d.ts

@@ -9,5 +9,5 @@ export default GalaxyFilamentWordmarkSvg;
 /** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
 export declare const GALAXY_FILAMENT_WORDMARK_VIEW_BOX: {
     readonly width: 4513;
-    readonly height: 1200;
+    readonly height: 1109;
 };

package/dist/brand/internal/svg/GalaxyFilamentWordmarkSvg.js

@@ -9,7 +9,7 @@ import { jsx } from "react/jsx-runtime";
 var GalaxyFilamentWordmarkSvg = forwardRef(function GalaxyFilamentWordmarkSvg(props, ref) {
 	return /* @__PURE__ */ jsx("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 4513 1200",
+		viewBox: "0 91 4513 1109",
 		fill: "currentColor",
 		ref,
 		...props,
@@ -20,7 +20,7 @@ GalaxyFilamentWordmarkSvg.displayName = "GalaxyFilamentWordmarkSvg";
 /** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
 var GALAXY_FILAMENT_WORDMARK_VIEW_BOX = {
 	width: 4513,
-	height: 1200
+	height: 1109
 };
 //#endregion
 export { GALAXY_FILAMENT_WORDMARK_VIEW_BOX, GalaxyFilamentWordmarkSvg as default };

package/dist/charts/Heatmap.js

@@ -13,7 +13,7 @@ import { formatChartValue } from "./chartFormat.js";
 import { useChartDimensions } from "./useChartDimensions.js";
 import { useChartFormatters } from "./useChartFormatters.js";
 import { useChartInteraction } from "./useChartInteraction.js";
-import { HEATMAP_CELL_RADIUS, HEATMAP_STEP_TO_TOKEN_MAP, buildHeatmapGeometry, estimateRowLabelInset, getHeatmapDomain, getHeatmapLabels } from "./heatmapGeometry.js";
+import { HEATMAP_CELL_RADIUS, HEATMAP_STEP_TO_TOKEN_MAP, buildHeatmapGeometry, estimateRowLabelInset, getHeatmapDomain, getHeatmapLabels, heatmapLoadingAxes } from "./heatmapGeometry.js";
 /* empty css                  */
 import { styled } from "@linaria/react";
 import { forwardRef, useCallback, useMemo, useRef } from "react";
@@ -117,8 +117,17 @@ var Heatmap = forwardRef(function Heatmap(props, ref) {
 		domainMax
 	]);
 	const ramp = HEATMAP_STEP_TO_TOKEN_MAP[color];
+	const isPlaceholder = isLoading && (columns.length === 0 || rows.length === 0);
+	const { columns: gridColumns, rows: gridRows } = useMemo(() => isPlaceholder ? heatmapLoadingAxes() : {
+		columns,
+		rows
+	}, [
+		isPlaceholder,
+		columns,
+		rows
+	]);
 	const formattedRows = useMemo(() => rows.map(formatLabel), [rows, formatLabel]);
-	const insetLeft = useMemo(() => estimateRowLabelInset(formattedRows), [formattedRows]);
+	const insetLeft = useMemo(() => isPlaceholder ? PLOT_INSET_RIGHT : estimateRowLabelInset(formattedRows), [isPlaceholder, formattedRows]);
 	const dimensions = useChartDimensions(plotRef, useMemo(() => ({
 		top: PLOT_INSET_TOP,
 		right: PLOT_INSET_RIGHT,
@@ -128,15 +137,15 @@ var Heatmap = forwardRef(function Heatmap(props, ref) {
 	const { plotWidth, plotHeight } = dimensions;
 	const geometry = useMemo(() => buildHeatmapGeometry({
 		cells,
-		columns,
-		rows,
+		columns: gridColumns,
+		rows: gridRows,
 		domain,
 		plotWidth,
 		plotHeight
 	}), [
 		cells,
-		columns,
-		rows,
+		gridColumns,
+		gridRows,
 		domain,
 		plotWidth,
 		plotHeight
@@ -229,7 +238,7 @@ var Heatmap = forwardRef(function Heatmap(props, ref) {
 	]);
 	const passedAriaLabel = typeof rest["aria-label"] === "string" ? rest["aria-label"] : void 0;
 	const resolvedAriaLabel = ariaLabel ?? passedAriaLabel ?? `Heatmap, ${columns.length} columns by ${rows.length} rows`;
-	const aspectRatio = clamp(columns.length / Math.max(1, rows.length), 1, 4);
+	const aspectRatio = clamp(gridColumns.length / Math.max(1, gridRows.length), 1, 4);
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		rootRef: ref,
 		plotRef,
@@ -243,7 +252,7 @@ var Heatmap = forwardRef(function Heatmap(props, ref) {
 		categoryCount: cellCount,
 		ariaLabel: resolvedAriaLabel,
 		aspectRatio,
-		axes: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChartCategoryAxis, {
+		axes: isPlaceholder ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChartCategoryAxis, {
 			labels: columns,
 			positions: geometry.columnPositions,
 			step: geometry.columnStep,
@@ -283,7 +292,14 @@ var Heatmap = forwardRef(function Heatmap(props, ref) {
 			hasEmpty: geometry.hasEmptyCells,
 			inset: insetLeft
 		}),
-		children: geometry.cells.map((cell, index) => {
+		children: isPlaceholder ? geometry.cells.map((cell) => /* @__PURE__ */ jsx("rect", {
+			x: cell.x,
+			y: cell.y,
+			width: cell.width,
+			height: cell.height,
+			rx: HEATMAP_CELL_RADIUS,
+			className: HEATMAP_EMPTY_CELL_CSS
+		}, cell.id)) : geometry.cells.map((cell, index) => {
 			let state = interaction.getMarkState({
 				categoryIndex: index,
 				seriesKey: cell.row

package/dist/charts/Sparkline.d.ts

@@ -14,7 +14,7 @@ export declare enum SparklineSize {
     /** 40px tall, 160px wide. */
     X_LARGE = "X_LARGE"
 }
-/** Color role (Constitution V-A color set; subset). */
+/** Color role (AGENTS.md "Variant": color set, subset). */
 export declare enum SparklineVariant {
     /** `text.primary`. */
     PRIMARY = "PRIMARY",

package/dist/charts/Sparkline.js

@@ -1,3 +1,4 @@
+import { ROLE_COLOR_TO_CSS_MAP } from "../styles/internal/roleColor.js";
 import { ChartCurve } from "./types.js";
 import { buildLinePath } from "./lineChartGeometry.js";
 import { layoutBars } from "./barChartGeometry.js";
@@ -37,7 +38,7 @@ var SparklineSize = /* @__PURE__ */ function(SparklineSize) {
 	SparklineSize["X_LARGE"] = "X_LARGE";
 	return SparklineSize;
 }({});
-/** Color role (Constitution V-A color set; subset). */
+/** Color role (AGENTS.md "Variant": color set, subset). */
 var SparklineVariant = /* @__PURE__ */ function(SparklineVariant) {
 	/** `text.primary`. */
 	SparklineVariant["PRIMARY"] = "PRIMARY";
@@ -110,31 +111,14 @@ var SPARKLINE_VARIANT_TO_CSS_MAP = {
 	["WARNING"]: "gx-Sparkline-WARNING-w12wppjx",
 	["ERROR"]: "gx-Sparkline-ERROR-e1vjlz3y"
 };
-/** Categorical `color`: `mark.<family>`, the way a status variant renders. */
-var SPARKLINE_COLOR_TO_CSS_MAP = {
-	success: "gx-Sparkline-success-s1g1xl1p",
-	warning: "gx-Sparkline-warning-w1jau8rz",
-	error: "gx-Sparkline-error-e1oe0nww",
-	red: "gx-Sparkline-red-r927tvl",
-	orange: "gx-Sparkline-orange-o17vquw4",
-	amber: "gx-Sparkline-amber-a1dzgnla",
-	yellow: "gx-Sparkline-yellow-y11hl6v6",
-	lime: "gx-Sparkline-lime-l1dtbnvn",
-	green: "gx-Sparkline-green-g1hj4qmv",
-	emerald: "gx-Sparkline-emerald-e157jvnt",
-	teal: "gx-Sparkline-teal-t14oiqli",
-	cyan: "gx-Sparkline-cyan-czvb5wf",
-	sky: "gx-Sparkline-sky-s1rblyi3",
-	blue: "gx-Sparkline-blue-b1lhbciw",
-	indigo: "gx-Sparkline-indigo-i1l7cy0y",
-	violet: "gx-Sparkline-violet-vpfz7ft",
-	purple: "gx-Sparkline-purple-p14stz7g",
-	fuchsia: "gx-Sparkline-fuchsia-f41c05i",
-	pink: "gx-Sparkline-pink-psamfb6",
-	rose: "gx-Sparkline-rose-r3yynzk"
-};
+/**
+* Categorical `color`: `mark.<family>`, the way a status variant renders. Reads the shared
+* `--gx-role-*` variables `ROLE_COLOR_TO_CSS_MAP` sets per family, so the twenty families are
+* written once (`styles/internal/roleColor`).
+*/
+var SPARKLINE_COLOR_CSS = "gx-Sparkline-SPARKLINE_COLOR_CSS-s1g1xl1p";
 /** Declared after the variant and color maps so `hex` wins over them. */
-var HEX_CSS = "gx-Sparkline-HEX_CSS-hhfwv7i";
+var HEX_CSS = "gx-Sparkline-HEX_CSS-h1jau8rz";
 /** A finite reading, or `null` for a gap. */
 var toReading = (value) => typeof value === "number" && Number.isFinite(value) ? value : null;
 /** The vertical range: the override where given, else the mark's default from the readings. */
@@ -228,7 +212,7 @@ var Sparkline = forwardRef(function Sparkline({ data, mark = "LINE", variant = "
 		...accessibility,
 		ref,
 		id,
-		className: cx(SPARKLINE_SIZE_TO_CSS_MAP[size], color !== void 0 ? SPARKLINE_COLOR_TO_CSS_MAP[color] : SPARKLINE_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, fillWidth && FILL_WIDTH_CSS, className),
+		className: cx(SPARKLINE_SIZE_TO_CSS_MAP[size], color !== void 0 ? cx(ROLE_COLOR_TO_CSS_MAP[color], SPARKLINE_COLOR_CSS) : SPARKLINE_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, fillWidth && FILL_WIDTH_CSS, className),
 		style: {
 			...variables,
 			...style

package/dist/charts/chartFormat.d.ts

@@ -1,5 +1,5 @@
 import type { ChartLabelFormatter, ChartValueFormatter } from "./types.js";
-/** @internal How a gap (a `null` reading) renders in the tooltip. */
+/** @internal How a gap (a `null` reading) renders in the tooltip: the shared `EMPTY_VALUE`. */
 export declare const CHART_NULL_VALUE = "\u2014";
 /** @internal The default value formatter: grouped, at most two fraction digits. */
 export declare const DEFAULT_CHART_VALUE_FORMATTER: ChartValueFormatter;

package/dist/charts/chartFormat.js

@@ -5,7 +5,7 @@ import { formatNumber } from "../utils/format.js";
 * ticks, tooltip rows and announcements cannot drift apart. Built on `utils/format` (en-US by
 * default, so the server and the client agree).
 */
-/** @internal How a gap (a `null` reading) renders in the tooltip. */
+/** @internal How a gap (a `null` reading) renders in the tooltip: the shared `EMPTY_VALUE`. */
 var CHART_NULL_VALUE = "—";
 /** @internal The default value formatter: grouped, at most two fraction digits. */
 var DEFAULT_CHART_VALUE_FORMATTER = (value) => formatNumber(value, { precision: 2 });
@@ -21,7 +21,7 @@ function resolveLabelFormatter(labelFormatter) {
 }
 /** @internal Formats a reading, rendering a gap or a non-finite value as "—". */
 function formatChartValue(value, formatter) {
-	return value === null || !Number.isFinite(value) ? "—" : formatter(value);
+	return value === null || !Number.isFinite(value) ? CHART_NULL_VALUE : formatter(value);
 }
 //#endregion
 export { CHART_NULL_VALUE, DEFAULT_CHART_LABEL_FORMATTER, DEFAULT_CHART_VALUE_FORMATTER, formatChartValue, resolveLabelFormatter, resolveValueFormatter };

package/dist/charts/heatmapGeometry.d.ts

@@ -1,6 +1,20 @@
 import { ChartPalette } from "./types.js";
 /** @internal Cell corner radius: `radius.sm`. */
 export declare const HEATMAP_CELL_RADIUS: number;
+/**
+ * @internal The placeholder grid a loading heatmap draws when it has no rows or columns yet: a
+ * week of hours (7 × 24), the shape most Galaxy heatmaps take, so the frame holds its final
+ * proportions and reads as a heatmap while data loads.
+ */
+export declare const HEATMAP_LOADING_GRID: {
+    readonly columns: 24;
+    readonly rows: 7;
+};
+/** @internal The loading grid's column and row keys: positional, never shown (no axes). */
+export declare function heatmapLoadingAxes(): {
+    columns: string[];
+    rows: string[];
+};
 /** @internal Number of ramp steps. */
 export declare const HEATMAP_STEP_COUNT = 5;
 /** @internal The aspect-ratio fallback is clamped to these, so cells stay near-square. */

package/dist/charts/heatmapGeometry.js

@@ -13,6 +13,22 @@ import { CHART_PALETTE_TO_HUE_MAP } from "./chartPalette.js";
 */
 /** @internal Cell corner radius: `radius.sm`. */
 var HEATMAP_CELL_RADIUS = Number.parseFloat(RADIUS.sm);
+/**
+* @internal The placeholder grid a loading heatmap draws when it has no rows or columns yet: a
+* week of hours (7 × 24), the shape most Galaxy heatmaps take, so the frame holds its final
+* proportions and reads as a heatmap while data loads.
+*/
+var HEATMAP_LOADING_GRID = {
+	columns: 24,
+	rows: 7
+};
+/** @internal The loading grid's column and row keys: positional, never shown (no axes). */
+function heatmapLoadingAxes() {
+	return {
+		columns: Array.from({ length: HEATMAP_LOADING_GRID.columns }, (_, index) => `c${index}`),
+		rows: Array.from({ length: HEATMAP_LOADING_GRID.rows }, (_, index) => `r${index}`)
+	};
+}
 /** @internal Number of ramp steps. */
 var HEATMAP_STEP_COUNT = 5;
 /** @internal The aspect-ratio fallback is clamped to these, so cells stay near-square. */
@@ -152,4 +168,4 @@ function buildHeatmapGeometry({ cells, columns, rows, domain, plotWidth, plotHei
 	return geometry;
 }
 //#endregion
-export { HEATMAP_CELL_RADIUS, HEATMAP_MAX_ASPECT_RATIO, HEATMAP_MIN_ASPECT_RATIO, HEATMAP_STEP_COUNT, HEATMAP_STEP_TO_TOKEN_MAP, buildHeatmapGeometry, estimateRowLabelInset, getHeatmapDomain, getHeatmapLabels, getHeatmapStep };
+export { HEATMAP_CELL_RADIUS, HEATMAP_LOADING_GRID, HEATMAP_MAX_ASPECT_RATIO, HEATMAP_MIN_ASPECT_RATIO, HEATMAP_STEP_COUNT, HEATMAP_STEP_TO_TOKEN_MAP, buildHeatmapGeometry, estimateRowLabelInset, getHeatmapDomain, getHeatmapLabels, getHeatmapStep, heatmapLoadingAxes };

package/dist/chips/Chip.d.ts

@@ -15,8 +15,8 @@ export declare enum ChipSize {
     X_LARGE = "X_LARGE"
 }
 /**
- * Color role (Constitution V-A color set; meaning only): tints the fill, the text and the border
- * together. Categories take `color` instead.
+ * Color role (AGENTS.md "Variant": color set, meaning only): tints the fill, the text and the
+ * border together. Categories take `color` instead.
  */
 export declare enum ChipVariant {
     /** `background.primary` fill, `text.primary`. */