@galaxy-io/dls 2.8.1 → 2.10.0

package/dist/utils/format.js

@@ -1,15 +1,26 @@
 //#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.
+* Display formatting for numbers, byte sizes, durations, relative times, dates and percentages
+* (`docs/components.md`, Hooks and utils). 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"`, `"∞"`, `"-∞"`).
+*
+* Every formatter also takes a `bigint` (a database count, a unix-millisecond timestamp), so call
+* sites never wrap one in `Number()`. `formatNumber` prints a bigint exactly (`Intl` formats it
+* natively); compact numbers, byte sizes, durations and relative times scale and round anyway, so
+* they convert it to a number first (exact up to 2^53).
 */
 var DEFAULT_LOCALE = "en-US";
+/**
+* What a missing value prints as: an em dash, in a table cell, a description list or a chart
+* tooltip. One constant so every "no value" in an app reads the same. Render it in
+* `TextVariant.TERTIARY`.
+*/
+var EMPTY_VALUE = "—";
 var COMPACT_SUFFIXES = [
 	"",
 	"k",
@@ -111,6 +122,8 @@ var RELATIVE_UNITS = [
 		intl: "second"
 	}
 ];
+/** A bigint as a number, for the formatters that scale or round (exact up to 2^53). */
+var toNumber = (value) => typeof value === "bigint" ? Number(value) : value;
 var decimal = (value, maxFractionDigits, locale = DEFAULT_LOCALE) => new Intl.NumberFormat(locale, {
 	signDisplay: "negative",
 	...maxFractionDigits === void 0 ? {} : { maximumFractionDigits: maxFractionDigits }
@@ -136,11 +149,13 @@ function scale(abs, base, steps, precisionAt) {
 /**
 * 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"`.
+* otherwise the `Intl` default of `3`). `locale` defaults to `"en-US"`. A `bigint` prints exactly
+* (`12345678901234567890n` → `"12,345,678,901,234,567,890"`).
 */
-function formatNumber(n, opts) {
+function formatNumber(input, opts) {
 	const locale = opts?.locale ?? DEFAULT_LOCALE;
-	if (!opts?.compact || !Number.isFinite(n)) return decimal(n, opts?.precision, locale);
+	if (!opts?.compact || typeof input === "number" && !Number.isFinite(input)) return decimal(input, opts?.precision, locale);
+	const n = toNumber(input);
 	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] ?? ""}`;
@@ -150,7 +165,8 @@ function formatNumber(n, opts) {
 * `{ 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) {
+function formatBytes(input, opts) {
+	const bytes = toNumber(input);
 	if (!Number.isFinite(bytes)) return formatNumber(bytes);
 	const precision = opts?.precision ?? 1;
 	const units = opts?.binary ? BINARY_BYTE_UNITS : DECIMAL_BYTE_UNITS;
@@ -166,7 +182,8 @@ function formatBytes(bytes, opts) {
 * finite); zero units are omitted and the
 * remainder is truncated. Zero is `"0s"` / `"0 seconds"`. `style` defaults to `"compact"`.
 */
-function formatDuration(ms, opts) {
+function formatDuration(input, opts) {
+	const ms = toNumber(input);
 	if (!Number.isFinite(ms)) return formatNumber(ms);
 	const isLong = opts?.style === "long";
 	const requestedUnits = opts?.maxUnits ?? 2;
@@ -186,7 +203,8 @@ function formatDuration(ms, opts) {
 	return `${ms < 0 ? "-" : ""}${parts.join(" ")}`;
 }
 /**
-* Formats a date relative to `now` (default: the current time, read at call time).
+* Formats a date (or a unix-millisecond timestamp, `number` or `bigint`) 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;
@@ -194,7 +212,7 @@ function formatDuration(ms, opts) {
 */
 function formatRelativeTime(date, opts) {
 	const now = opts?.now ?? /* @__PURE__ */ new Date();
-	const diff = (typeof date === "number" ? date : date.getTime()) - now.getTime();
+	const diff = (date instanceof Date ? date.getTime() : toNumber(date)) - 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);
@@ -204,6 +222,36 @@ function formatRelativeTime(date, opts) {
 	const amount = `${decimal(count, 0)}${unit.short}`;
 	return diff < 0 ? `${amount} ago` : `in ${amount}`;
 }
+/** The `Intl` fields of each `formatDate` style. */
+var DATE_STYLE_TO_FORMAT_OPTIONS_MAP = {
+	date: {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	},
+	dateTime: {
+		month: "short",
+		day: "numeric",
+		hour: "numeric",
+		minute: "2-digit",
+		second: "2-digit"
+	}
+};
+/**
+* Formats a date (or a unix-millisecond timestamp, `number` or `bigint`). `{ style: "date" }`
+* (default) → `"Oct 3, 2026"`, the DateInput and table default; `{ style: "dateTime" }` →
+* `"Oct 10, 3:04:05 PM"`, an event in the recent past. `locale` defaults to `"en-US"`;
+* `timeZone` defaults to the runtime's (pass `"UTC"` when server and client must agree). An
+* invalid date is returned as `formatNumber` prints `NaN`.
+*/
+function formatDate(date, opts) {
+	const time = date instanceof Date ? date.getTime() : toNumber(date);
+	if (!Number.isFinite(time)) return formatNumber(time);
+	return new Intl.DateTimeFormat(opts?.locale ?? DEFAULT_LOCALE, {
+		...DATE_STYLE_TO_FORMAT_OPTIONS_MAP[opts?.style ?? "date"],
+		...opts?.timeZone === void 0 ? {} : { timeZone: opts.timeZone }
+	}).format(time);
+}
 /**
 * Formats a ratio as a percentage. `0.1234` → `"12.3%"`. `precision` is the maximum fraction
 * digits (default `1`).
@@ -217,4 +265,4 @@ function formatPercent(ratio, opts) {
 	}).format(ratio);
 }
 //#endregion
-export { formatBytes, formatDuration, formatNumber, formatPercent, formatRelativeTime };
+export { EMPTY_VALUE, formatBytes, formatDate, formatDuration, formatNumber, formatPercent, formatRelativeTime };

package/dist/utils/search.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Text search for lists that filter as the user types: CommandPalette, Menu, SelectInput,
+ * MultiSelectInput and JsonViewer use it, so one term matches the same rows everywhere. The rule:
+ * trim the term, lower-case it with `toLocaleLowerCase`, and match when any field contains it (an
+ * empty term matches everything). Pure functions, safe at module scope and under SSR.
+ */
+/** The term as it is compared: trimmed and lower-cased (`"  Orders "` → `"orders"`). */
+export declare function normalizeSearchTerm(term: string): string;
+/**
+ * Whether any field contains the term, case-insensitively. An empty (or blank) term matches;
+ * `null` and `undefined` fields are skipped, so optional fields pass straight through:
+ * `isSearchMatch(term, item.label, item.description, ...item.keywords)`. The term may already be
+ * normalized (normalizing is idempotent).
+ */
+export declare function isSearchMatch(term: string, ...fields: readonly (string | null | undefined)[]): boolean;

package/dist/utils/search.js

@@ -0,0 +1,24 @@
+//#region src/utils/search.ts
+/**
+* Text search for lists that filter as the user types: CommandPalette, Menu, SelectInput,
+* MultiSelectInput and JsonViewer use it, so one term matches the same rows everywhere. The rule:
+* trim the term, lower-case it with `toLocaleLowerCase`, and match when any field contains it (an
+* empty term matches everything). Pure functions, safe at module scope and under SSR.
+*/
+/** The term as it is compared: trimmed and lower-cased (`"  Orders "` → `"orders"`). */
+function normalizeSearchTerm(term) {
+	return term.trim().toLocaleLowerCase();
+}
+/**
+* Whether any field contains the term, case-insensitively. An empty (or blank) term matches;
+* `null` and `undefined` fields are skipped, so optional fields pass straight through:
+* `isSearchMatch(term, item.label, item.description, ...item.keywords)`. The term may already be
+* normalized (normalizing is idempotent).
+*/
+function isSearchMatch(term, ...fields) {
+	const normalized = normalizeSearchTerm(term);
+	if (normalized === "") return true;
+	return fields.some((field) => field?.toLocaleLowerCase().includes(normalized) ?? false);
+}
+//#endregion
+export { isSearchMatch, normalizeSearchTerm };

package/dist/vite/index.d.ts

@@ -1,4 +1,5 @@
 import { type Plugin } from "@wyw-in-js/vite";
+import { GalaxyTheme } from "../theme/enums.js";
 /** Options for {@link galaxyDls}. */
 export type GalaxyDlsOptions = {
     /**
@@ -7,10 +8,23 @@ export type GalaxyDlsOptions = {
      * @default "gx"
      */
     prefix?: string;
+    /**
+     * The theme the page boots in before `GalaxyProvider` mounts. Pass the provider's own `theme`; a
+     * choice stored under `storageKey` still wins, as it does in the provider.
+     * @default GalaxyTheme.SYSTEM
+     */
+    theme?: GalaxyTheme;
+    /**
+     * Where the provider stores the user's choice; the boot script reads it and never writes it.
+     * Pass the provider's `storageKey` if you changed it.
+     * @default "galaxy:theme"
+     */
+    storageKey?: 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`.
+ * runtime + TypeScript), `include`/`exclude`, and the DLS's own class-name config (the slug
+ * `gx-<Component>-<Part>-<hash>` with `gx` replaced by `prefix`, no vendor prefixes, React
+ * `importOverrides`), so app CSS is named and emitted like DLS CSS.
  */
 export declare function galaxyDls(options?: GalaxyDlsOptions): Plugin;

package/dist/vite/index.js

@@ -1,3 +1,6 @@
+import { GalaxyTheme } from "../theme/enums.js";
+import { BOOT_THEMES, DEFAULT_THEME_STORAGE_KEY, themeBackgroundStyle, themeBootScript } from "./internal/themeBoot.js";
+import { sharedWywOptions } from "./internal/wywOptions.js";
 import { createRequire } from "node:module";
 import wyw from "@wyw-in-js/vite";
 //#region src/vite/index.ts
@@ -12,41 +15,47 @@ import wyw from "@wyw-in-js/vite";
 *
 * 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`.
+*
+* It also boots the theme in `index.html`: one inline script sets `data-gx-theme` on `<html>`
+* before the first paint (the stored choice, else `theme`, resolving `SYSTEM` from the OS), and one
+* `<style>` paints the canvas per theme, so a page never flashes the wrong theme before
+* `GalaxyProvider` mounts. Pass the same `theme` and `storageKey` as the app's provider. A strict
+* Content Security Policy needs the script's hash.
 */
-/** 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`.
+* runtime + TypeScript), `include`/`exclude`, and the DLS's own class-name config (the slug
+* `gx-<Component>-<Part>-<hash>` with `gx` replaced by `prefix`, no vendor prefixes, React
+* `importOverrides`), so app CSS is named and emitted like DLS CSS.
 */
 function galaxyDls(options = {}) {
-	const { prefix = DEFAULT_PREFIX } = options;
+	const { prefix = "gx", theme = GalaxyTheme.SYSTEM, storageKey = DEFAULT_THEME_STORAGE_KEY } = 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.`);
+	if (!BOOT_THEMES.includes(theme)) throw new Error(`[@galaxy-io/dls/vite] theme "${theme}" is not a GalaxyTheme: use GalaxyTheme.SYSTEM, DARK or LIGHT.`);
 	const require = createRequire(import.meta.url);
-	return wyw({
+	const plugin = 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}`
+		...sharedWywOptions(prefix)
 	});
+	const bootScript = themeBootScript(theme, storageKey);
+	const backgroundStyle = themeBackgroundStyle();
+	plugin.transformIndexHtml = () => [{
+		tag: "script",
+		children: bootScript,
+		injectTo: "head-prepend"
+	}, {
+		tag: "style",
+		children: backgroundStyle,
+		injectTo: "head-prepend"
+	}];
+	return plugin;
 }
 //#endregion
 export { galaxyDls };

package/dist/vite/internal/themeBoot.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @internal What `galaxyDls()` injects into `index.html` so the first paint is already in the
+ * right theme: one inline script that sets `data-gx-theme` on `<html>`, and one `<style>` that
+ * paints the canvas per theme. Private on purpose (an `internal/` module: built, never a package
+ * export).
+ *
+ * The script resolves the theme exactly as `GalaxyProvider` does on mount, so nothing flips when
+ * React takes over: a valid stored choice (`DARK`, `LIGHT` or `SYSTEM` under `storageKey`) wins
+ * over the configured `theme`; `SYSTEM` reads `prefers-color-scheme`, and falls back to dark where
+ * `matchMedia` is missing (the provider's default). It reads storage and never writes it, and any
+ * error leaves the page as the server sent it.
+ *
+ * The background is a `<style>` keyed off the attribute, never an inline `style` on `<html>`: an
+ * inline background would stay the boot theme after a runtime switch, because nothing removes it.
+ * Its values come from the token modules, so they are `background.base` in each theme.
+ */
+import { GalaxyTheme } from "../../theme/enums.js";
+/** @internal The provider's default storage key; the boot script must read the same one. */
+export declare const DEFAULT_THEME_STORAGE_KEY = "galaxy:theme";
+/** @internal The boot script's source: resolves the theme and sets `data-gx-theme`. */
+export declare function themeBootScript(theme: GalaxyTheme, storageKey: string): string;
+/** @internal The canvas per theme, keyed off the attribute the script (then the provider) sets. */
+export declare function themeBackgroundStyle(): string;
+/** @internal The themes `galaxyDls({ theme })` accepts. */
+export declare const BOOT_THEMES: readonly string[];

package/dist/vite/internal/themeBoot.js

@@ -0,0 +1,44 @@
+import { GalaxyTheme } from "../../theme/enums.js";
+import { DARK_THEME } from "../../theme/tokens/dark.js";
+import { LIGHT_THEME } from "../../theme/tokens/light.js";
+//#region src/vite/internal/themeBoot.ts
+/**
+* @internal What `galaxyDls()` injects into `index.html` so the first paint is already in the
+* right theme: one inline script that sets `data-gx-theme` on `<html>`, and one `<style>` that
+* paints the canvas per theme. Private on purpose (an `internal/` module: built, never a package
+* export).
+*
+* The script resolves the theme exactly as `GalaxyProvider` does on mount, so nothing flips when
+* React takes over: a valid stored choice (`DARK`, `LIGHT` or `SYSTEM` under `storageKey`) wins
+* over the configured `theme`; `SYSTEM` reads `prefers-color-scheme`, and falls back to dark where
+* `matchMedia` is missing (the provider's default). It reads storage and never writes it, and any
+* error leaves the page as the server sent it.
+*
+* The background is a `<style>` keyed off the attribute, never an inline `style` on `<html>`: an
+* inline background would stay the boot theme after a runtime switch, because nothing removes it.
+* Its values come from the token modules, so they are `background.base` in each theme.
+*/
+/** @internal The provider's default storage key; the boot script must read the same one. */
+var DEFAULT_THEME_STORAGE_KEY = "galaxy:theme";
+/** A JSON string literal that is also safe inside a `<script>` element (no `<\/script>` break-out). */
+var toScriptLiteral = (value) => JSON.stringify(value).replace(/</g, "\\u003c");
+/** @internal The boot script's source: resolves the theme and sets `data-gx-theme`. */
+function themeBootScript(theme, storageKey) {
+	return [
+		"(function(){",
+		`var t=${toScriptLiteral(theme)},s=null;`,
+		`try{s=window.localStorage.getItem(${toScriptLiteral(storageKey)})}catch(e){}`,
+		"if(s===\"DARK\"||s===\"LIGHT\"||s===\"SYSTEM\")t=s;",
+		"if(t===\"SYSTEM\"){t=\"DARK\";try{if(!window.matchMedia(\"(prefers-color-scheme: dark)\").matches)t=\"LIGHT\"}catch(e){}}",
+		"document.documentElement.setAttribute(\"data-gx-theme\",t===\"LIGHT\"?\"light\":\"dark\")",
+		"})();"
+	].join("");
+}
+/** @internal The canvas per theme, keyed off the attribute the script (then the provider) sets. */
+function themeBackgroundStyle() {
+	return [`html[data-gx-theme="dark"]{background:${DARK_THEME.color.background.base}}`, `html[data-gx-theme="light"]{background:${LIGHT_THEME.color.background.base}}`].join("");
+}
+/** @internal The themes `galaxyDls({ theme })` accepts. */
+var BOOT_THEMES = Object.values(GalaxyTheme);
+//#endregion
+export { BOOT_THEMES, DEFAULT_THEME_STORAGE_KEY, themeBackgroundStyle, themeBootScript };

package/dist/vite/internal/wywOptions.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @internal The one class-name and compile config for Linaria (wyw-in-js), shared by the DLS's own
+ * build and Storybook (`wyw.config.ts`) and by the app preset (`galaxyDls()`), so a DLS class and
+ * an app class are named and emitted the same way. Private on purpose (an `internal/` module:
+ * built, never a package export). Each caller adds only what differs: its `include` / `exclude`,
+ * and how it resolves the Babel presets.
+ *
+ * Class names read `<prefix>-<Component>-<Part>-<hash>` (`gx-Button-Label-1a2b3c`); a styled root
+ * named `Root` drops the part (`gx-Button-1a2b3c`), so the inspector names the component.
+ */
+/** The DLS class prefix; also the default app prefix. */
+export declare const DLS_CLASS_PREFIX = "gx";
+/** What wyw passes the slug function besides the hash and the styled name. */
+interface SlugArgs {
+    name: string;
+}
+/** @internal The class-name slug for a prefix: `<prefix>-<Component>-<Part>-<hash>`, `Root` unnamed. */
+export declare function classNameSlug(prefix: string): (hash: string, title: string, { name }: SlugArgs) => string;
+/**
+ * @internal The options every caller shares, for a class prefix: the slug, no vendor prefixes,
+ * and the React import overrides.
+ *
+ * `prefixer: false`: every browser the DLS targets reads the unprefixed properties, and the stylis
+ * prefixer would add about 1,300 `-webkit-` declarations and duplicate every keyframe. Apps get
+ * the same, so their CSS and the DLS's match.
+ *
+ * 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 (the dev
+ * runtime too, for an app's dev server).
+ */
+export declare function sharedWywOptions(prefix: string): {
+    readonly classNameSlug: (hash: string, title: string, { name }: SlugArgs) => string;
+    readonly prefixer: false;
+    readonly importOverrides: {
+        readonly react: {
+            readonly unknown: "allow";
+        };
+        readonly "react/jsx-runtime": {
+            readonly unknown: "allow";
+        };
+        readonly "react/jsx-dev-runtime": {
+            readonly unknown: "allow";
+        };
+    };
+};
+export {};

package/dist/vite/internal/wywOptions.js

@@ -0,0 +1,44 @@
+//#region src/vite/internal/wywOptions.ts
+/**
+* @internal The one class-name and compile config for Linaria (wyw-in-js), shared by the DLS's own
+* build and Storybook (`wyw.config.ts`) and by the app preset (`galaxyDls()`), so a DLS class and
+* an app class are named and emitted the same way. Private on purpose (an `internal/` module:
+* built, never a package export). Each caller adds only what differs: its `include` / `exclude`,
+* and how it resolves the Babel presets.
+*
+* Class names read `<prefix>-<Component>-<Part>-<hash>` (`gx-Button-Label-1a2b3c`); a styled root
+* named `Root` drops the part (`gx-Button-1a2b3c`), so the inspector names the component.
+*/
+/** The DLS class prefix; also the default app prefix. */
+var DLS_CLASS_PREFIX = "gx";
+/** The styled root's name; its class drops the part segment. */
+var ROOT_PART = "Root";
+/** @internal The class-name slug for a prefix: `<prefix>-<Component>-<Part>-<hash>`, `Root` unnamed. */
+function classNameSlug(prefix) {
+	return (hash, title, { name }) => `${prefix}-${name}${title === ROOT_PART ? "" : `-${title}`}-${hash}`;
+}
+/**
+* @internal The options every caller shares, for a class prefix: the slug, no vendor prefixes,
+* and the React import overrides.
+*
+* `prefixer: false`: every browser the DLS targets reads the unprefixed properties, and the stylis
+* prefixer would add about 1,300 `-webkit-` declarations and duplicate every keyframe. Apps get
+* the same, so their CSS and the DLS's match.
+*
+* 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 (the dev
+* runtime too, for an app's dev server).
+*/
+function sharedWywOptions(prefix) {
+	return {
+		classNameSlug: classNameSlug(prefix),
+		prefixer: false,
+		importOverrides: {
+			react: { unknown: "allow" },
+			"react/jsx-runtime": { unknown: "allow" },
+			"react/jsx-dev-runtime": { unknown: "allow" }
+		}
+	};
+}
+//#endregion
+export { DLS_CLASS_PREFIX, classNameSlug, sharedWywOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "2.8.1",
+  "version": "2.10.0",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",
@@ -69,6 +69,10 @@
       "types": "./dist/brand/GalaxyWordmark.d.ts",
       "import": "./dist/brand/GalaxyWordmark.js"
     },
+    "./brand/PoweredBy": {
+      "types": "./dist/brand/PoweredBy.d.ts",
+      "import": "./dist/brand/PoweredBy.js"
+    },
     "./brand/brandMark": {
       "types": "./dist/brand/brandMark.d.ts",
       "import": "./dist/brand/brandMark.js"
@@ -297,6 +301,10 @@
       "types": "./dist/hooks/useElementWidth.d.ts",
       "import": "./dist/hooks/useElementWidth.js"
     },
+    "./hooks/useEndReached": {
+      "types": "./dist/hooks/useEndReached.d.ts",
+      "import": "./dist/hooks/useEndReached.js"
+    },
     "./hooks/useField": {
       "types": "./dist/hooks/useField.d.ts",
       "import": "./dist/hooks/useField.js"
@@ -441,6 +449,10 @@
       "types": "./dist/json/JsonViewer.d.ts",
       "import": "./dist/json/JsonViewer.js"
     },
+    "./layout/AppFrame": {
+      "types": "./dist/layout/AppFrame.d.ts",
+      "import": "./dist/layout/AppFrame.js"
+    },
     "./layout/Box": {
       "types": "./dist/layout/Box.d.ts",
       "import": "./dist/layout/Box.js"
@@ -449,6 +461,14 @@
       "types": "./dist/layout/Divider.d.ts",
       "import": "./dist/layout/Divider.js"
     },
+    "./layout/EmptyLayout": {
+      "types": "./dist/layout/EmptyLayout.d.ts",
+      "import": "./dist/layout/EmptyLayout.js"
+    },
+    "./layout/ErrorLayout": {
+      "types": "./dist/layout/ErrorLayout.d.ts",
+      "import": "./dist/layout/ErrorLayout.js"
+    },
     "./layout/Flex": {
       "types": "./dist/layout/Flex.d.ts",
       "import": "./dist/layout/Flex.js"
@@ -461,6 +481,14 @@
       "types": "./dist/layout/Grid.d.ts",
       "import": "./dist/layout/Grid.js"
     },
+    "./layout/PageLayout": {
+      "types": "./dist/layout/PageLayout.d.ts",
+      "import": "./dist/layout/PageLayout.js"
+    },
+    "./layout/PendingLayout": {
+      "types": "./dist/layout/PendingLayout.d.ts",
+      "import": "./dist/layout/PendingLayout.js"
+    },
     "./layout/Portal": {
       "types": "./dist/layout/Portal.d.ts",
       "import": "./dist/layout/Portal.js"
@@ -757,6 +785,10 @@
       "types": "./dist/utils/format.d.ts",
       "import": "./dist/utils/format.js"
     },
+    "./utils/search": {
+      "types": "./dist/utils/search.d.ts",
+      "import": "./dist/utils/search.js"
+    },
     "./vite": {
       "types": "./dist/vite/index.d.ts",
       "import": "./dist/vite/index.js"
@@ -946,6 +978,7 @@
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "glob": "^13.0.6",
+    "happy-dom": "20.10.2",
     "lottie-react": "^2.4.1",
     "publint": "^0.3.25",
     "react": "^18.3.1",