@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/utils/colors.js

@@ -3,24 +3,27 @@ var clamp = (n, min, max) => Math.max(min, Math.min(max, n));
 var clamp01 = (n) => clamp(n, 0, 1);
 var rand = (min, max) => Math.random() * (max - min) + min;
 var wrap360 = (h) => (h % 360 + 360) % 360;
+/** Lowercases, adds a missing `#`, and expands `#rgb` to `#rrggbb`. Throws on anything else. */
 var normalizeHex = (hex) => {
 	let h = hex.trim().toLowerCase();
 	if (!h.startsWith("#")) h = `#${h}`;
 	if (h.length === 4) {
-		const r = h[1], g = h[2], b = h[3];
+		const [, r = "", g = "", b = ""] = h;
 		return `#${r}${r}${g}${g}${b}${b}`;
 	}
 	if (h.length !== 7) throw new Error(`Invalid hex color: "${hex}". Expected #RRGGBB or #RGB`);
 	return h;
 };
+/** Parses `#rrggbb` / `#rgb` (with or without `#`) into 0–255 channels. Throws on invalid input. */
 var hexToRgb = (hex) => {
 	const h = normalizeHex(hex);
 	return {
-		r: parseInt(h.slice(1, 3), 16),
-		g: parseInt(h.slice(3, 5), 16),
-		b: parseInt(h.slice(5, 7), 16)
+		r: Number.parseInt(h.slice(1, 3), 16),
+		g: Number.parseInt(h.slice(3, 5), 16),
+		b: Number.parseInt(h.slice(5, 7), 16)
 	};
 };
+/** `hexToRgb` plus an alpha channel. */
 var hexToRgba = (hex, a = 1) => {
 	const { r, g, b } = hexToRgb(hex);
 	return {
@@ -30,15 +33,17 @@ var hexToRgba = (hex, a = 1) => {
 		a
 	};
 };
-var rgbToHex = ({ r, g, b }) => "#" + [
+/** Formats 0–255 channels (rounded, clamped) as lowercase `#rrggbb`. */
+var rgbToHex = ({ r, g, b }) => `#${[
 	r,
 	g,
 	b
-].map((v) => clamp(Math.round(v), 0, 255).toString(16).padStart(2, "0")).join("");
-var rgbToHsl = ({ r, g, b }) => {
-	r /= 255;
-	g /= 255;
-	b /= 255;
+].map((v) => clamp(Math.round(v), 0, 255).toString(16).padStart(2, "0")).join("")}`;
+/** Converts 0–255 channels to HSL (`h` 0–360, `s` and `l` 0–1). */
+var rgbToHsl = (rgb) => {
+	const r = rgb.r / 255;
+	const g = rgb.g / 255;
+	const b = rgb.b / 255;
 	const max = Math.max(r, g, b);
 	const min = Math.min(r, g, b);
 	const delta = max - min;
@@ -67,14 +72,17 @@ var rgbToHsl = ({ r, g, b }) => {
 		l
 	};
 };
-var hslToRgb = ({ h, s, l }) => {
-	h = wrap360(h);
-	s = clamp01(s);
-	l = clamp01(l);
+/** Converts HSL to unrounded 0–255 channels. Wraps `h`, clamps `s` and `l` to 0–1. */
+var hslToRgb = (hsl) => {
+	const h = wrap360(hsl.h);
+	const s = clamp01(hsl.s);
+	const l = clamp01(hsl.l);
 	const c = (1 - Math.abs(2 * l - 1)) * s;
 	const x = c * (1 - Math.abs(h / 60 % 2 - 1));
 	const m = l - c / 2;
-	let r = 0, g = 0, b = 0;
+	let r = 0;
+	let g = 0;
+	let b = 0;
 	if (h < 60) [r, g, b] = [
 		c,
 		x,
@@ -111,6 +119,7 @@ var hslToRgb = ({ h, s, l }) => {
 		b: (b + m) * 255
 	};
 };
+/** Converts HSL to `#rrggbb`. */
 var hslToHex = ({ h, s, l }) => {
 	const { r, g, b } = hslToRgb({
 		h,
@@ -123,10 +132,10 @@ var hslToHex = ({ h, s, l }) => {
 		b
 	});
 };
-var rgbToHsva = ({ r, g, b }) => {
-	r /= 255;
-	g /= 255;
-	b /= 255;
+var rgbToHsva = (rgb) => {
+	const r = rgb.r / 255;
+	const g = rgb.g / 255;
+	const b = rgb.b / 255;
 	const max = Math.max(r, g, b);
 	const delta = max - Math.min(r, g, b);
 	let h = 0;
@@ -146,13 +155,15 @@ var rgbToHsva = ({ r, g, b }) => {
 		a: 1
 	};
 };
-var hsvaToRgb = ({ h, s, v, a: _a }) => {
+var hsvaToRgb = ({ h, s, v }) => {
 	const sNorm = s / 100;
 	const vNorm = v / 100;
 	const c = vNorm * sNorm;
 	const x = c * (1 - Math.abs(h / 60 % 2 - 1));
 	const m = vNorm - c;
-	let r = 0, g = 0, b = 0;
+	let r = 0;
+	let g = 0;
+	let b = 0;
 	if (h < 60) [r, g, b] = [
 		c,
 		x,
@@ -189,9 +200,11 @@ var hsvaToRgb = ({ h, s, v, a: _a }) => {
 		b: Math.round((b + m) * 255)
 	};
 };
+/** Converts a hex color to HSVA (`s`, `v` 0–100; `a` always 1), as `@uiw/react-color` expects. */
 var hexToHsva = (hex) => {
 	return rgbToHsva(hexToRgb(hex));
 };
+/** Converts HSVA (`s`, `v` 0–100) to `#rrggbb`; alpha is ignored. */
 var hsvaToHex = (hsva) => {
 	return rgbToHex(hsvaToRgb(hsva));
 };
@@ -206,7 +219,7 @@ var generateRandomHexColor = () => {
 * Gets an opaque hex color
 * @param hex - The hex color to add opacity to
 * @param opacity - The opacity to add (0-1)
-* @returns A hex color with the added opacity
+* @returns An `rgba(r, g, b, opacity)` string (not a hex)
 */
 var getOpaqueHexColor = (hex, opacity = .5) => {
 	const { r, g, b } = hexToRgb(hex);
@@ -298,26 +311,71 @@ var generateRandomPastelHexColor = () => {
 		l: rand(.75, .9)
 	});
 };
+/** Balanced hue ranges for `generateRandomVibrantHexColor` (greens included but not dominant). */
+var VIBRANT_HUE_RANGES = [
+	[0, 60],
+	[60, 90],
+	[90, 150],
+	[150, 210],
+	[210, 270],
+	[270, 330],
+	[330, 360]
+];
 /**
 * Random vibrant color (saturated, bold, UI-friendly)
 * Generates colors similar to: #5D9CEC, #4FC1E9, #48CFAD, #A0D468, #FFCE54, #FC6E51, #ED5565, #AC92EC, #EC87C0
 */
 var generateRandomVibrantHexColor = () => {
-	const hueRanges = [
-		[0, 60],
-		[60, 90],
-		[90, 150],
-		[150, 210],
-		[210, 270],
-		[270, 330],
-		[330, 360]
-	];
-	const range = hueRanges[Math.floor(Math.random() * hueRanges.length)];
+	const [min, max] = VIBRANT_HUE_RANGES[Math.floor(Math.random() * VIBRANT_HUE_RANGES.length)] ?? [0, 360];
 	return hslToHex({
-		h: rand(range[0], range[1]),
+		h: rand(min, max),
 		s: rand(.6, .95),
 		l: rand(.5, .75)
 	});
 };
+/** WCAG 2.x relative luminance (0–1) of a hex color. */
+var relativeLuminance = (hex) => {
+	const { r, g, b } = hexToRgb(hex);
+	const [lr = 0, lg = 0, lb = 0] = [
+		r,
+		g,
+		b
+	].map((value) => {
+		const channel = value / 255;
+		return channel <= .04045 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * lr + .7152 * lg + .0722 * lb;
+};
+/** WCAG 2.x contrast ratio between two hex colors, from 1 (same) to 21 (black on white). Order-independent. */
+var contrastRatio = (a, b) => {
+	const la = relativeLuminance(a);
+	const lb = relativeLuminance(b);
+	return (Math.max(la, lb) + .05) / (Math.min(la, lb) + .05);
+};
+/** WCAG AA minimum contrast for body text. */
+var AA_MIN_RATIO = 4.5;
+/** WCAG AA minimum contrast for large text (≥ 18pt, or ≥ 14pt bold). */
+var AA_LARGE_TEXT_MIN_RATIO = 3;
+/**
+* Whether `fg` on `bg` meets WCAG AA: ≥ 4.5:1, or ≥ 3:1 when `isLargeText`.
+* @param isLargeText - Text is ≥ 18pt, or ≥ 14pt bold. @default false
+*/
+var meetsAA = (fg, bg, isLargeText = false) => contrastRatio(fg, bg) >= (isLargeText ? AA_LARGE_TEXT_MIN_RATIO : AA_MIN_RATIO);
+/**
+* Per-channel sRGB interpolation `a·(1−t) + b·t`, rounded: `t = 0` is `a`, `t = 1` is `b`.
+* The formula the token `subtle`/`strong` steps are derived with (Tokens Q3).
+* @param t - Weight of `b`, clamped to 0–1.
+*/
+var mix = (a, b, t) => {
+	const from = hexToRgb(a);
+	const to = hexToRgb(b);
+	const weight = clamp01(t);
+	const lerp = (x, y) => x * (1 - weight) + y * weight;
+	return rgbToHex({
+		r: lerp(from.r, to.r),
+		g: lerp(from.g, to.g),
+		b: lerp(from.b, to.b)
+	});
+};
 //#endregion
-export { generateRandomHexColor, generateRandomPastelHexColor, generateRandomVibrantHexColor, getBrighterPronouncedHexColor, getDarkerHexColor, getDarkerPronouncedHexColor, getLighterHexColor, getOpaqueHexColor, hexToHsva, hexToRgb, hexToRgba, hslToHex, hslToRgb, hsvaToHex, rgbToHex, rgbToHsl };
+export { contrastRatio, generateRandomHexColor, generateRandomPastelHexColor, generateRandomVibrantHexColor, getBrighterPronouncedHexColor, getDarkerHexColor, getDarkerPronouncedHexColor, getLighterHexColor, getOpaqueHexColor, hexToHsva, hexToRgb, hexToRgba, hslToHex, hslToRgb, hsvaToHex, meetsAA, mix, rgbToHex, rgbToHsl };

package/dist/utils/css.d.ts

@@ -0,0 +1,23 @@
+/**
+ * CSS value helpers for the layout components (`Flex`, `Grid`, `Box`). `getCssSizeValue` is kept
+ * from 1.x `utils/linaria`; `spaceToCss` and `gapToCss` turn the `Space` props into token
+ * variables, so spacing always follows the scale (Constitution II.5, V).
+ */
+import type { Space, SpaceShorthand } from "../theme/enums.js";
+/**
+ * A CSS length: a numeric `value` as px; else a numeric `fallback` as px; else the string
+ * `value`, the string `fallback`, or `"0"`. Unchanged from 1.x, including that a numeric
+ * `fallback` wins over a string `value`: `getCssSizeValue(12)` → `"12px"`,
+ * `getCssSizeValue("50%")` → `"50%"`, `getCssSizeValue("auto", 8)` → `"8px"`.
+ */
+export declare function getCssSizeValue(value?: number | string, fallback?: number | string): string;
+/**
+ * `padding` value from a `Space` or a 1–4 value tuple in CSS shorthand order.
+ * `12` → `"var(--gx-space-12)"`; `[12, 16]` → `"var(--gx-space-12) var(--gx-space-16)"`.
+ */
+export declare function spaceToCss(value: SpaceShorthand): string;
+/**
+ * `gap` value from a `Space` or a `[row, column]` tuple.
+ * `8` → `"var(--gx-space-8)"`; `[8, 16]` → `"var(--gx-space-8) var(--gx-space-16)"`.
+ */
+export declare function gapToCss(value: Space | [Space, Space]): string;

package/dist/utils/css.js

@@ -0,0 +1,30 @@
+import { t } from "../theme/tokens/t.js";
+//#region src/utils/css.ts
+/**
+* A CSS length: a numeric `value` as px; else a numeric `fallback` as px; else the string
+* `value`, the string `fallback`, or `"0"`. Unchanged from 1.x, including that a numeric
+* `fallback` wins over a string `value`: `getCssSizeValue(12)` → `"12px"`,
+* `getCssSizeValue("50%")` → `"50%"`, `getCssSizeValue("auto", 8)` → `"8px"`.
+*/
+function getCssSizeValue(value, fallback) {
+	if (typeof value === "number") return `${value}px`;
+	if (typeof fallback === "number") return `${fallback}px`;
+	return value ?? fallback ?? "0";
+}
+var spaceVar = (value) => t.space[value];
+/**
+* `padding` value from a `Space` or a 1–4 value tuple in CSS shorthand order.
+* `12` → `"var(--gx-space-12)"`; `[12, 16]` → `"var(--gx-space-12) var(--gx-space-16)"`.
+*/
+function spaceToCss(value) {
+	return typeof value === "number" ? spaceVar(value) : value.map(spaceVar).join(" ");
+}
+/**
+* `gap` value from a `Space` or a `[row, column]` tuple.
+* `8` → `"var(--gx-space-8)"`; `[8, 16]` → `"var(--gx-space-8) var(--gx-space-16)"`.
+*/
+function gapToCss(value) {
+	return spaceToCss(value);
+}
+//#endregion
+export { gapToCss, getCssSizeValue, spaceToCss };

package/dist/utils/format.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Display formatting for numbers, byte sizes, durations, relative times and percentages
+ * (Constitution VIII-A.2). Pure functions on `Intl`, no dependencies, safe at module scope and
+ * under SSR. Number parts default to the `en-US` locale (not the runtime's) so server and client
+ * render the same string.
+ *
+ * `precision` is always the maximum number of fraction digits; trailing zeros are dropped
+ * (`formatPercent(0.5)` → `"50%"`, not `"50.0%"`). Non-finite input (`NaN`, `±Infinity`) is
+ * returned as `formatNumber` prints it (`"NaN"`, `"∞"`, `"-∞"`).
+ */
+/**
+ * Formats a number with grouping. `1234` → `"1,234"`; `{ compact: true }` → `"1.2k"`
+ * (suffixes `k M B T`). `precision` is the maximum fraction digits (default `1` when compact,
+ * otherwise the `Intl` default of `3`). `locale` defaults to `"en-US"`.
+ */
+export declare function formatNumber(n: number, opts?: {
+    compact?: boolean;
+    precision?: number;
+    locale?: string;
+}): string;
+/**
+ * Formats a byte count. `1536` → `"1.5 KB"`. Decimal units (`KB`, base 1000) by default;
+ * `{ binary: true }` uses IEC units (`KiB`, base 1024). Whole bytes have no fraction digits.
+ * `precision` is the maximum fraction digits (default `1`).
+ */
+export declare function formatBytes(bytes: number, opts?: {
+    precision?: number;
+    binary?: boolean;
+}): string;
+/**
+ * Formats a duration in milliseconds. `4215000` → `"1h 10m"`; `{ style: "long" }` →
+ * `"1 hour 10 minutes"`. Units are `d h m s ms`, starting at the largest non-zero unit and
+ * spanning at most `maxUnits` consecutive units (default `2`, also used when `maxUnits` is not
+ * finite); zero units are omitted and the
+ * remainder is truncated. Zero is `"0s"` / `"0 seconds"`. `style` defaults to `"compact"`.
+ */
+export declare function formatDuration(ms: number, opts?: {
+    style?: "compact" | "long";
+    maxUnits?: number;
+}): string;
+/**
+ * Formats a date relative to `now` (default: the current time, read at call time).
+ * `{ style: "short" }` (default) → `"3m ago"`, `"in 2d"`, `"now"` (units `s m h d w mo y`);
+ * `{ style: "long" }` → `Intl.RelativeTimeFormat` with `numeric: "auto"` (`"3 minutes ago"`,
+ * `"in 2 days"`, `"yesterday"`, `"now"`). Uses the largest unit that fits, truncated;
+ * months are 30 days, years 365 days. Under 1 second is `"now"`.
+ */
+export declare function formatRelativeTime(date: Date | number, opts?: {
+    now?: Date;
+    style?: "short" | "long";
+}): string;
+/**
+ * Formats a ratio as a percentage. `0.1234` → `"12.3%"`. `precision` is the maximum fraction
+ * digits (default `1`).
+ */
+export declare function formatPercent(ratio: number, opts?: {
+    precision?: number;
+}): string;

package/dist/utils/format.js

@@ -0,0 +1,220 @@
+//#region src/utils/format.ts
+/**
+* Display formatting for numbers, byte sizes, durations, relative times and percentages
+* (Constitution VIII-A.2). Pure functions on `Intl`, no dependencies, safe at module scope and
+* under SSR. Number parts default to the `en-US` locale (not the runtime's) so server and client
+* render the same string.
+*
+* `precision` is always the maximum number of fraction digits; trailing zeros are dropped
+* (`formatPercent(0.5)` → `"50%"`, not `"50.0%"`). Non-finite input (`NaN`, `±Infinity`) is
+* returned as `formatNumber` prints it (`"NaN"`, `"∞"`, `"-∞"`).
+*/
+var DEFAULT_LOCALE = "en-US";
+var COMPACT_SUFFIXES = [
+	"",
+	"k",
+	"M",
+	"B",
+	"T"
+];
+var DECIMAL_BYTE_UNITS = [
+	"B",
+	"KB",
+	"MB",
+	"GB",
+	"TB",
+	"PB"
+];
+var BINARY_BYTE_UNITS = [
+	"B",
+	"KiB",
+	"MiB",
+	"GiB",
+	"TiB",
+	"PiB"
+];
+var SECOND_MS = 1e3;
+var MINUTE_MS = 60 * SECOND_MS;
+var HOUR_MS = 60 * MINUTE_MS;
+var DAY_MS = 24 * HOUR_MS;
+var WEEK_MS = 7 * DAY_MS;
+var MONTH_MS = 30 * DAY_MS;
+var YEAR_MS = 365 * DAY_MS;
+/** Largest first. A duration is cut into consecutive units starting at its largest non-zero one. */
+var DURATION_UNITS = [
+	{
+		ms: DAY_MS,
+		compact: "d",
+		singular: "day",
+		plural: "days"
+	},
+	{
+		ms: HOUR_MS,
+		compact: "h",
+		singular: "hour",
+		plural: "hours"
+	},
+	{
+		ms: MINUTE_MS,
+		compact: "m",
+		singular: "minute",
+		plural: "minutes"
+	},
+	{
+		ms: SECOND_MS,
+		compact: "s",
+		singular: "second",
+		plural: "seconds"
+	},
+	{
+		ms: 1,
+		compact: "ms",
+		singular: "millisecond",
+		plural: "milliseconds"
+	}
+];
+/** Largest first. A relative time uses the largest unit that fits, truncated (90s → 1m). */
+var RELATIVE_UNITS = [
+	{
+		ms: YEAR_MS,
+		short: "y",
+		intl: "year"
+	},
+	{
+		ms: MONTH_MS,
+		short: "mo",
+		intl: "month"
+	},
+	{
+		ms: WEEK_MS,
+		short: "w",
+		intl: "week"
+	},
+	{
+		ms: DAY_MS,
+		short: "d",
+		intl: "day"
+	},
+	{
+		ms: HOUR_MS,
+		short: "h",
+		intl: "hour"
+	},
+	{
+		ms: MINUTE_MS,
+		short: "m",
+		intl: "minute"
+	},
+	{
+		ms: SECOND_MS,
+		short: "s",
+		intl: "second"
+	}
+];
+var decimal = (value, maxFractionDigits, locale = DEFAULT_LOCALE) => new Intl.NumberFormat(locale, {
+	signDisplay: "negative",
+	...maxFractionDigits === void 0 ? {} : { maximumFractionDigits: maxFractionDigits }
+}).format(value);
+/**
+* Scales `abs` by `base` until it is below `base` after rounding to the fraction digits that
+* step actually prints (`precisionAt(step)`), so `999_960` bytes becomes `1 MB`, not `1,000 KB`,
+* and `999.6` bytes becomes `1 KB`, not `1,000 B`. Returns the scaled value and the step index.
+*/
+function scale(abs, base, steps, precisionAt) {
+	let value = abs;
+	let step = 0;
+	const rounded = () => {
+		const factor = 10 ** precisionAt(step);
+		return Math.round(value * factor) / factor;
+	};
+	while (step < steps - 1 && rounded() >= base) {
+		value /= base;
+		step += 1;
+	}
+	return [value, step];
+}
+/**
+* Formats a number with grouping. `1234` → `"1,234"`; `{ compact: true }` → `"1.2k"`
+* (suffixes `k M B T`). `precision` is the maximum fraction digits (default `1` when compact,
+* otherwise the `Intl` default of `3`). `locale` defaults to `"en-US"`.
+*/
+function formatNumber(n, opts) {
+	const locale = opts?.locale ?? DEFAULT_LOCALE;
+	if (!opts?.compact || !Number.isFinite(n)) return decimal(n, opts?.precision, locale);
+	const precision = opts.precision ?? 1;
+	const [value, step] = scale(Math.abs(n), 1e3, COMPACT_SUFFIXES.length, () => precision);
+	return `${n < 0 && decimal(value, precision, locale) !== "0" ? "-" : ""}${decimal(value, precision, locale)}${COMPACT_SUFFIXES[step] ?? ""}`;
+}
+/**
+* Formats a byte count. `1536` → `"1.5 KB"`. Decimal units (`KB`, base 1000) by default;
+* `{ binary: true }` uses IEC units (`KiB`, base 1024). Whole bytes have no fraction digits.
+* `precision` is the maximum fraction digits (default `1`).
+*/
+function formatBytes(bytes, opts) {
+	if (!Number.isFinite(bytes)) return formatNumber(bytes);
+	const precision = opts?.precision ?? 1;
+	const units = opts?.binary ? BINARY_BYTE_UNITS : DECIMAL_BYTE_UNITS;
+	const precisionAt = (step) => step === 0 ? 0 : precision;
+	const [value, step] = scale(Math.abs(bytes), opts?.binary ? 1024 : 1e3, units.length, precisionAt);
+	const digits = decimal(value, precisionAt(step));
+	return `${bytes < 0 && digits !== "0" ? "-" : ""}${digits} ${units[step] ?? ""}`;
+}
+/**
+* Formats a duration in milliseconds. `4215000` → `"1h 10m"`; `{ style: "long" }` →
+* `"1 hour 10 minutes"`. Units are `d h m s ms`, starting at the largest non-zero unit and
+* spanning at most `maxUnits` consecutive units (default `2`, also used when `maxUnits` is not
+* finite); zero units are omitted and the
+* remainder is truncated. Zero is `"0s"` / `"0 seconds"`. `style` defaults to `"compact"`.
+*/
+function formatDuration(ms, opts) {
+	if (!Number.isFinite(ms)) return formatNumber(ms);
+	const isLong = opts?.style === "long";
+	const requestedUnits = opts?.maxUnits ?? 2;
+	const maxUnits = Number.isFinite(requestedUnits) ? Math.max(1, Math.floor(requestedUnits)) : 2;
+	let rest = Math.floor(Math.abs(ms));
+	const start = DURATION_UNITS.findIndex((unit) => rest >= unit.ms);
+	if (start === -1) return isLong ? "0 seconds" : "0s";
+	const parts = [];
+	for (const unit of DURATION_UNITS.slice(start, start + maxUnits)) {
+		const count = Math.floor(rest / unit.ms);
+		rest -= count * unit.ms;
+		if (count > 0) {
+			const amount = decimal(count, 0);
+			parts.push(isLong ? `${amount} ${count === 1 ? unit.singular : unit.plural}` : `${amount}${unit.compact}`);
+		}
+	}
+	return `${ms < 0 ? "-" : ""}${parts.join(" ")}`;
+}
+/**
+* Formats a date relative to `now` (default: the current time, read at call time).
+* `{ style: "short" }` (default) → `"3m ago"`, `"in 2d"`, `"now"` (units `s m h d w mo y`);
+* `{ style: "long" }` → `Intl.RelativeTimeFormat` with `numeric: "auto"` (`"3 minutes ago"`,
+* `"in 2 days"`, `"yesterday"`, `"now"`). Uses the largest unit that fits, truncated;
+* months are 30 days, years 365 days. Under 1 second is `"now"`.
+*/
+function formatRelativeTime(date, opts) {
+	const now = opts?.now ?? /* @__PURE__ */ new Date();
+	const diff = (typeof date === "number" ? date : date.getTime()) - now.getTime();
+	if (!Number.isFinite(diff)) return formatNumber(diff);
+	const isLong = opts?.style === "long";
+	const unit = RELATIVE_UNITS.find((candidate) => Math.abs(diff) >= candidate.ms);
+	if (!unit) return isLong ? new Intl.RelativeTimeFormat(DEFAULT_LOCALE, { numeric: "auto" }).format(0, "second") : "now";
+	const count = Math.floor(Math.abs(diff) / unit.ms);
+	if (isLong) return new Intl.RelativeTimeFormat(DEFAULT_LOCALE, { numeric: "auto" }).format(diff < 0 ? -count : count, unit.intl);
+	const amount = `${decimal(count, 0)}${unit.short}`;
+	return diff < 0 ? `${amount} ago` : `in ${amount}`;
+}
+/**
+* Formats a ratio as a percentage. `0.1234` → `"12.3%"`. `precision` is the maximum fraction
+* digits (default `1`).
+*/
+function formatPercent(ratio, opts) {
+	if (!Number.isFinite(ratio)) return formatNumber(ratio);
+	return new Intl.NumberFormat(DEFAULT_LOCALE, {
+		style: "percent",
+		signDisplay: "negative",
+		maximumFractionDigits: opts?.precision ?? 1
+	}).format(ratio);
+}
+//#endregion
+export { formatBytes, formatDuration, formatNumber, formatPercent, formatRelativeTime };

package/dist/vite/index.d.ts

@@ -0,0 +1,16 @@
+import { type Plugin } from "@wyw-in-js/vite";
+/** Options for {@link galaxyDls}. */
+export type GalaxyDlsOptions = {
+    /**
+     * App name that starts every generated class: `<prefix>-<Component>-<Part>-<hash>`
+     * (`fil-Sidebar-Item-1a2b3c`). Letters, digits and `-`, starting with a letter.
+     * @default "gx"
+     */
+    prefix?: string;
+};
+/**
+ * Returns the configured `@wyw-in-js/vite` plugin: the DLS Babel presets (React automatic
+ * runtime + TypeScript), `include`/`exclude`, React `importOverrides`, and the DLS
+ * `classNameSlug` (`gx-<Component>-<Part>-<hash>`) with `gx` replaced by `prefix`.
+ */
+export declare function galaxyDls(options?: GalaxyDlsOptions): Plugin;

package/dist/vite/index.js

@@ -0,0 +1,52 @@
+import { createRequire } from "node:module";
+import wyw from "@wyw-in-js/vite";
+//#region src/vite/index.ts
+/**
+* `@galaxy-io/dls/vite` — one-line wyw-in-js (Linaria) setup for consumer apps.
+*
+* ```ts
+* // vite.config.ts
+* import { galaxyDls } from "@galaxy-io/dls/vite";
+* export default defineConfig({ plugins: [react(), galaxyDls({ prefix: "fil" })] });
+* ```
+*
+* The DLS itself ships pre-extracted CSS (`@galaxy-io/dls/styles.css`); this preset only
+* compiles the app's own `styled` / `css` code, which reads DLS tokens through `t`.
+*/
+/** The DLS class prefix; also the default app prefix. */
+var DEFAULT_PREFIX = "gx";
+/** A valid start for a CSS class name: a letter, then letters, digits or `-`. */
+var PREFIX_PATTERN = /^[A-Za-z][A-Za-z0-9-]*$/;
+/** The styled root is named `Root`; its class drops the part segment. */
+var ROOT_PART = "Root";
+/** Files the plugin compiles. The DLS (and every other package) ships already compiled. */
+var INCLUDE = ["**/*.{js,jsx,ts,tsx}"];
+var EXCLUDE = ["**/node_modules/**"];
+/**
+* React is reached while wyw evaluates `styled` components at build time; loading it as-is is
+* expected, so the "unknown import reached during eval" warning is silenced for it.
+*/
+var IMPORT_OVERRIDES = {
+	react: { unknown: "allow" },
+	"react/jsx-runtime": { unknown: "allow" },
+	"react/jsx-dev-runtime": { unknown: "allow" }
+};
+/**
+* Returns the configured `@wyw-in-js/vite` plugin: the DLS Babel presets (React automatic
+* runtime + TypeScript), `include`/`exclude`, React `importOverrides`, and the DLS
+* `classNameSlug` (`gx-<Component>-<Part>-<hash>`) with `gx` replaced by `prefix`.
+*/
+function galaxyDls(options = {}) {
+	const { prefix = DEFAULT_PREFIX } = options;
+	if (!PREFIX_PATTERN.test(prefix)) throw new Error(`[@galaxy-io/dls/vite] prefix "${prefix}" is not a valid class-name start: use letters, digits and "-", starting with a letter.`);
+	const require = createRequire(import.meta.url);
+	return wyw({
+		include: INCLUDE,
+		exclude: EXCLUDE,
+		babelOptions: { presets: [[require.resolve("@babel/preset-react"), { runtime: "automatic" }], require.resolve("@babel/preset-typescript")] },
+		importOverrides: IMPORT_OVERRIDES,
+		classNameSlug: (hash, title, { name }) => `${prefix}-${name}${title === ROOT_PART ? "" : `-${title}`}-${hash}`
+	});
+}
+//#endregion
+export { galaxyDls };