@xtyle/astro 0.5.0

package/src/Tooltip.astro

@@ -0,0 +1,68 @@
+---
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type Placement = "top" | "bottom" | "left" | "right";
+
+interface Props {
+	text?: string;
+	placement?: Placement;
+	open?: boolean;
+	tone?: string;
+	variant?: "soft" | "solid";
+	mode?: "hint" | "rich";
+	size?: "sm" | "md";
+	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
+	static?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const {
+	text,
+	placement = "top",
+	open = false,
+	tone,
+	variant,
+	mode,
+	size,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const hasContent = Astro.slots.has("content");
+const contentId = `xtyle-tooltip-${Math.random().toString(36).slice(2, 8)}`;
+
+const bindings = {
+	text: text ?? null,
+	placement,
+	contentId,
+	open,
+	tone: tone ?? null,
+	variant: variant ?? null,
+	mode: mode ?? null,
+	size: size ?? null,
+};
+const light = await renderFragmentLight("tooltip", bindings);
+const triggerHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const contentHtml = hasContent ? await Astro.slots.render("content") : "";
+const composed = light
+	.replace('<slot name="content"></slot>', () => contentHtml)
+	.replace("<slot></slot>", () => triggerHtml);
+---
+
+<xtyle-tooltip
+	text={text}
+	placement={placement}
+	open={open || undefined}
+	tone={tone}
+	variant={variant}
+	mode={mode}
+	size={size}
+	class={extra}
+	set:html={composed}
+	{...rest}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/Tree.astro

@@ -0,0 +1,78 @@
+---
+import { firstSelectedValue } from "@xtyle/core/markup";
+import { renderFragmentLight } from "@xtyle/core/elements/ssr";
+
+type Size = "sm" | "md" | "lg";
+
+interface TreeNode {
+	label: string;
+	value?: string;
+	href?: string;
+	expanded?: boolean;
+	locked?: boolean;
+	selected?: boolean;
+	disabled?: boolean;
+	badge?: string;
+	children?: TreeNode[];
+}
+
+interface Props {
+	items?: TreeNode[];
+	size?: Size;
+	label?: string;
+	labelledby?: string;
+	/** Render zero-JS: emit the resolved light-DOM markup but never load the runtime to hydrate it. */
+	static?: boolean;
+	class?: string;
+	/** Any other attribute (`id`, `title`, `data-*`, `aria-*`, …) passes through to the element. */
+	[key: string]: unknown;
+}
+
+const {
+	items = [],
+	size = "md",
+	label,
+	labelledby,
+	static: isStatic = false,
+	class: extra,
+	...rest
+} = Astro.props;
+
+const nodeKey = (node: TreeNode): string => node.value ?? node.label;
+const hasChildren = (node: TreeNode): boolean => !!(node.children && node.children.length);
+
+const expandedKeys: string[] = [];
+const seedExpanded = (nodes: TreeNode[]): void => {
+	for (const node of nodes) {
+		if (hasChildren(node)) {
+			const locked = (node.locked ?? false) && hasChildren(node);
+			if (locked || node.expanded) expandedKeys.push(nodeKey(node));
+			seedExpanded(node.children as TreeNode[]);
+		}
+	}
+};
+seedExpanded(items);
+
+const bindings = {
+	items,
+	size,
+	label: label ?? null,
+	labelledby: labelledby ?? null,
+	selectedValue: firstSelectedValue(items),
+	expandedKeys,
+	rovingValue: null,
+};
+const light = await renderFragmentLight("tree", bindings);
+---
+
+<xtyle-tree
+	items={items ? JSON.stringify(items) : undefined}
+	size={size}
+	label={label}
+	labelledby={labelledby}
+	class={extra}
+	{...rest}
+	set:html={light}
+/>
+
+{!isStatic && <script>import "@xtyle/core/elements";</script>}

package/src/internal/palette.ts

@@ -0,0 +1,92 @@
+import { derive, seriesPalette, seriesColorsFor, rampColor, glowFilter, resolveIconMark, composeIconThemed, type SeriesScheme, type RampScheme } from "@xtyle/core";
+import { resolveAlgorithm } from "@xtyle/core/host";
+
+function matrixCeiling(matrix: number[][], explicit?: number): number {
+	if (explicit && explicit > 0) return explicit;
+	return Math.max(1, ...matrix.flatMap((row) => row.map((v) => (Number.isFinite(v) ? v : 0))));
+}
+
+/** Baking colors at build time needs a register; the runtime theme isn't known yet, so SSR uses the
+ * default one and the upgraded element re-resolves against the live cascade. Memoized per build. */
+let cached: Promise<Record<string, string>> | null = null;
+async function defaultRegister(): Promise<Record<string, string>> {
+	cached ??= (async () => derive(await resolveAlgorithm("xtyle-default"), {}))();
+	return cached;
+}
+
+/** Bakes a generated icon mark for SSR: series slots resolve against the default register while
+ * token fills stay `var(--…)`, so a static (un-hydrated) mark still recolors with the theme and the
+ * upgraded element re-resolves its series off the live cascade. Returns null for a non-spec name. */
+export async function bakeIconMark(
+	name: string,
+	scheme: SeriesScheme | string[],
+	className?: string,
+): Promise<string | null> {
+	const parsed = resolveIconMark(name);
+	if (!parsed) return null;
+	return composeIconThemed(parsed.composition, { register: await defaultRegister(), scheme, className, part: "icon" });
+}
+
+export async function resolveSeriesColors(
+	scheme: SeriesScheme | string[],
+	count: number,
+	reverse: boolean,
+): Promise<string[]> {
+	if (Array.isArray(scheme)) return seriesPalette(scheme, count, {}, { reverse });
+	return seriesPalette(scheme, count, await defaultRegister(), { reverse });
+}
+
+/** The by-name companion to `resolveSeriesColors` for SSR: a per-item resolver that honors each
+ * item's semantic `tone` under the `statuses` scheme, so a static outcome chart pins by meaning even
+ * when a zero-value category is filtered out. Positional for every other scheme. */
+export async function resolveSeriesColorsFor(
+	scheme: SeriesScheme | string[],
+	items: readonly { tone?: string }[],
+	reverse: boolean,
+): Promise<string[]> {
+	if (Array.isArray(scheme)) return seriesColorsFor(scheme, items, {}, { reverse });
+	return seriesColorsFor(scheme, items, await defaultRegister(), { reverse });
+}
+
+/** Bakes each cell's intensity color against the default register for the zero-JS SSR grid; the
+ * upgraded element re-resolves against the live cascade. */
+export async function resolveHeatmapColors(
+	scheme: RampScheme | string[],
+	values: number[][],
+	reverse: boolean,
+	max?: number,
+): Promise<string[][]> {
+	const register = Array.isArray(scheme) ? {} : await defaultRegister();
+	const ceiling = matrixCeiling(values, max);
+	return values.map((row) => row.map((v) => rampColor(scheme, (Number.isFinite(v) ? v : 0) / ceiling, register, { reverse })));
+}
+
+/** Bakes each cell's secondary-glow drop-shadow against the default register for the zero-JS SSR
+ * grid; the upgraded element re-resolves against the live cascade. */
+export async function resolveHeatmapGlows(
+	scheme: RampScheme | string[],
+	glow: number[][],
+	reverse: boolean,
+	glowMax?: number,
+	glowBlur?: number,
+): Promise<(string | null)[][]> {
+	if (!glow.length) return [];
+	const register = Array.isArray(scheme) ? {} : await defaultRegister();
+	const color = rampColor(scheme, 1, register, { reverse });
+	const ceiling = matrixCeiling(glow, glowMax);
+	const maxBlur = glowBlur && glowBlur > 0 ? glowBlur : undefined;
+	return glow.map((row) => row.map((v) => glowFilter((Number.isFinite(v) ? v : 0) / ceiling, color, maxBlur)));
+}
+
+/** Bakes the scale key against the default register for SSR; the upgraded element re-resolves against
+ * the live cascade. */
+export async function resolveHeatmapScale(
+	scheme: RampScheme | string[],
+	values: number[][],
+	reverse: boolean,
+	max?: number,
+): Promise<{ scaleColors: string[]; scaleLow: number; scaleHigh: number }> {
+	const register = Array.isArray(scheme) ? {} : await defaultRegister();
+	const scaleColors = [0, 0.25, 0.5, 0.75, 1].map((t) => rampColor(scheme, t, register, { reverse }));
+	return { scaleColors, scaleLow: 0, scaleHigh: matrixCeiling(values, max) };
+}