@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/text/Text.js

@@ -1,114 +1,247 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
+import { FontFamily } from "../theme/enums.js";
+import LazyTooltip from "../tooltip/internal/LazyTooltip.js";
 /* empty css               */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
+import { forwardRef, useCallback, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/text/Text.tsx
-/** Text color role. Resolves to a `theme.color.text.*` token in both themes. */
+/**
+* The text primitive. Every string in a Galaxy UI renders through it, so color, type step, weight
+* and family always resolve from tokens. Renders a `<p>` by default; `as` changes the element (and
+* so the semantics: `as="h2"` is how a heading gets its role) without changing the style. Replaces
+* 1.x `Text` and `Paragraph` (`isProse` is the paragraph mode).
+*
+* Size × family without 27 blocks: each `TEXT_SIZE_TO_CSS_MAP` entry writes the step's metrics for
+* all three families into `--gx-text-<metric>-<family>` custom properties, and the one
+* `TEXT_FAMILY_TO_CSS_MAP` entry in play reads its own family's set. Weight works the same way.
+*
+* Continuous values (`hex`, `lineClamp`, `cursor`) are set as `--gx-text-*` custom properties in
+* `style`, read by a block that is switched on only when the prop is set, so a nested `Text` never
+* inherits its parent's value (the Box pattern).
+*
+* Plain `Text` has no hooks and imports no overlay code. `shouldTooltipOnOverflow` hands the
+* element to `OverflowTooltipText`, which measures only when the pointer (or focus) arrives and
+* mounts a `LazyTooltip` the first time the text really is cut, so a table of a thousand clamped
+* cells carries no observers and no floating-ui instances until one is hovered.
+*/
+/** Color role of the text (color set, Constitution V-A). */
 var TextVariant = /* @__PURE__ */ function(TextVariant) {
+	/** Primary copy, `text.primary`. */
 	TextVariant["PRIMARY"] = "PRIMARY";
-	TextVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
+	/** Supporting copy, `text.secondary`. */
 	TextVariant["SECONDARY"] = "SECONDARY";
-	TextVariant["SECONDARY_ALT"] = "SECONDARY_ALT";
+	/** Hints and metadata, `text.tertiary`. */
 	TextVariant["TERTIARY"] = "TERTIARY";
-	TextVariant["TERTIARY_ALT"] = "TERTIARY_ALT";
+	/** Disabled controls, `text.disabled`. */
+	TextVariant["DISABLED"] = "DISABLED";
+	/** The parent's color (used inside Button and other colored controls). */
+	TextVariant["INHERIT"] = "INHERIT";
+	/** Status: success, `text.success`. */
 	TextVariant["SUCCESS"] = "SUCCESS";
+	/** Status: warning, `text.warning`. */
 	TextVariant["WARNING"] = "WARNING";
+	/** Status: error, `text.error`. */
 	TextVariant["ERROR"] = "ERROR";
-	TextVariant["PINK"] = "PINK";
-	TextVariant["ORANGE"] = "ORANGE";
-	TextVariant["YELLOW"] = "YELLOW";
-	TextVariant["LIME"] = "LIME";
-	TextVariant["BLUE"] = "BLUE";
-	TextVariant["TEAL"] = "TEAL";
-	TextVariant["PURPLE"] = "PURPLE";
-	TextVariant["DISABLED"] = "DISABLED";
 	return TextVariant;
 }({});
-/** Type scale step. Sets font-size, line-height and letter-spacing together. */
+/** Type-scale step. Sets font size, line height and letter spacing together (Constitution III-A). */
 var TextSize = /* @__PURE__ */ function(TextSize) {
+	/** 10px on a 12px line. */
 	TextSize["CAPTION"] = "CAPTION";
+	/** 12px on a 16px line. */
 	TextSize["BODY_SM"] = "BODY_SM";
+	/** 13px on a 16px line. The default. */
 	TextSize["BODY_MD"] = "BODY_MD";
+	/** 14px on a 20px line. */
 	TextSize["BODY_LG"] = "BODY_LG";
+	/** 16px on a 20px line. */
 	TextSize["HEADING_SM"] = "HEADING_SM";
+	/** 20px on a 24px line. */
 	TextSize["HEADING_MD"] = "HEADING_MD";
+	/** 24px on a 28px line. */
 	TextSize["HEADING_LG"] = "HEADING_LG";
+	/** 32px on a 40px line. */
+	TextSize["DISPLAY_SM"] = "DISPLAY_SM";
+	/** 40px on a 48px line. */
+	TextSize["DISPLAY_LG"] = "DISPLAY_LG";
 	return TextSize;
 }({});
-/** Font weight. Two steps by design — hierarchy comes from size, not weight. */
+/** Font weight. Two steps by design: hierarchy comes from size, not weight. */
 var TextWeight = /* @__PURE__ */ function(TextWeight) {
+	/** 400. */
 	TextWeight["REGULAR"] = "REGULAR";
+	/** 500. */
 	TextWeight["MEDIUM"] = "MEDIUM";
 	return TextWeight;
 }({});
-var _exp = () => ({ theme, $variant, $hex }) => {
-	if ($hex) return $hex;
-	return match($variant).with("PRIMARY", () => theme.color.text.primary).with("PRIMARY_ALT", () => theme.color.text.primaryAlt).with("SECONDARY", () => theme.color.text.secondary).with("SECONDARY_ALT", () => theme.color.text.secondaryAlt).with("TERTIARY", () => theme.color.text.tertiary).with("TERTIARY_ALT", () => theme.color.text.tertiaryAlt).with("SUCCESS", () => theme.color.text.success).with("ERROR", () => theme.color.text.error).with("LIME", () => theme.color.text.lime).with("PURPLE", () => theme.color.text.purple).with("TEAL", () => theme.color.text.teal).with("YELLOW", () => theme.color.text.yellow).with("ORANGE", () => theme.color.text.orange).with("PINK", () => theme.color.text.pink).with("BLUE", () => theme.color.text.blue).with("WARNING", () => theme.color.text.warning).with("DISABLED", () => theme.color.text.disabled).exhaustive();
+/** Case transform. */
+var TextTransform = /* @__PURE__ */ function(TextTransform) {
+	/** As written. */
+	TextTransform["NONE"] = "NONE";
+	/** All caps with added tracking, for small labels. */
+	TextTransform["UPPERCASE"] = "UPPERCASE";
+	return TextTransform;
+}({});
+var Root = /*#__PURE__*/ styled("p")({
+	name: "Root",
+	class: "gx-Text-rhbcgkd",
+	propsAsIs: false
+});
+var TEXT_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-Text-PRIMARY-p1o7ndnh",
+	["SECONDARY"]: "gx-Text-SECONDARY-sxn0am",
+	["TERTIARY"]: "gx-Text-TERTIARY-tjam0gv",
+	["DISABLED"]: "gx-Text-DISABLED-d9vq58r",
+	["INHERIT"]: "gx-Text-INHERIT-ikc9uqt",
+	["SUCCESS"]: "gx-Text-SUCCESS-sd9g98b",
+	["WARNING"]: "gx-Text-WARNING-wj6mcrw",
+	["ERROR"]: "gx-Text-ERROR-em7katg"
+};
+var TEXT_SIZE_TO_CSS_MAP = {
+	["CAPTION"]: "gx-Text-CAPTION-clqhh6f",
+	["BODY_SM"]: "gx-Text-BODY_SM-bhah7z5",
+	["BODY_MD"]: "gx-Text-BODY_MD-bx8q0yn",
+	["BODY_LG"]: "gx-Text-BODY_LG-b1blssxg",
+	["HEADING_SM"]: "gx-Text-HEADING_SM-hp6b6ct",
+	["HEADING_MD"]: "gx-Text-HEADING_MD-h1n2lvag",
+	["HEADING_LG"]: "gx-Text-HEADING_LG-h123wkme",
+	["DISPLAY_SM"]: "gx-Text-DISPLAY_SM-d1m1eryv",
+	["DISPLAY_LG"]: "gx-Text-DISPLAY_LG-doytb7j"
 };
-var _exp2 = () => ({ theme, $isMonospace }) => $isMonospace ? theme.font.mono.family : theme.font.sans.family;
-var _exp3 = () => ({ theme, $size }) => {
-	return match($size).with("CAPTION", () => theme.font.sans.size.caption).with("BODY_SM", () => theme.font.sans.size.body_sm).with("BODY_MD", () => theme.font.sans.size.body_md).with("BODY_LG", () => theme.font.sans.size.body_lg).with("HEADING_SM", () => theme.font.sans.size.heading_sm).with("HEADING_MD", () => theme.font.sans.size.heading_md).with("HEADING_LG", () => theme.font.sans.size.heading_lg).exhaustive();
+/** Each family's weight, read by the family block. */
+var TEXT_WEIGHT_TO_CSS_MAP = {
+	["REGULAR"]: "gx-Text-REGULAR-rf1moiw",
+	["MEDIUM"]: "gx-Text-MEDIUM-mii0sim"
 };
-var _exp4 = () => ({ theme, $weight }) => {
-	return match($weight).with("REGULAR", () => theme.font.sans.weight.regular).with("MEDIUM", () => theme.font.sans.weight.medium).exhaustive();
+/** The family stack, and the family's own set of the step and weight variables. */
+var TEXT_FAMILY_TO_CSS_MAP = {
+	[FontFamily.SANS]: "gx-Text-FontFamily_SANS-f1r9nxxz",
+	[FontFamily.MONO]: "gx-Text-FontFamily_MONO-f1rdyhdd",
+	[FontFamily.SERIF]: "gx-Text-FontFamily_SERIF-f1tw09v7"
 };
-var _exp5 = () => ({ theme, $size }) => {
-	return match($size).with("CAPTION", () => theme.font.sans.height.caption).with("BODY_SM", () => theme.font.sans.height.body_sm).with("BODY_MD", () => theme.font.sans.height.body_md).with("BODY_LG", () => theme.font.sans.height.body_lg).with("HEADING_SM", () => theme.font.sans.height.heading_sm).with("HEADING_MD", () => theme.font.sans.height.heading_md).with("HEADING_LG", () => theme.font.sans.height.heading_lg).exhaustive();
+var TEXT_ALIGN_TO_CSS_MAP = {
+	left: "gx-Text-left-l14le4my",
+	center: "gx-Text-center-c1fdaqaz",
+	right: "gx-Text-right-royz62m"
 };
-var _exp6 = () => ({ theme, $size }) => {
-	return match($size).with("CAPTION", () => theme.font.sans.spacing.caption).with("BODY_SM", () => theme.font.sans.spacing.body_sm).with("BODY_MD", () => theme.font.sans.spacing.body_md).with("BODY_LG", () => theme.font.sans.spacing.body_lg).with("HEADING_SM", () => theme.font.sans.spacing.heading_sm).with("HEADING_MD", () => theme.font.sans.spacing.heading_md).with("HEADING_LG", () => theme.font.sans.spacing.heading_lg).exhaustive();
+var TEXT_TRANSFORM_TO_CSS_MAP = {
+	["NONE"]: "gx-Text-NONE-n1ms692r",
+	["UPPERCASE"]: "gx-Text-UPPERCASE-uceej59"
 };
-var _exp7 = () => ({ $align }) => $align ?? "left";
-var _exp8 = () => ({ $isUnderlined }) => $isUnderlined ? "underline" : "none";
-var _exp9 = () => ({ $cursor }) => $cursor ?? "inherit";
-var _exp11 = () => ({ $isSelectable }) => $isSelectable ? "text" : "none";
-var _exp12 = () => ({ $isEllipsis }) => $isEllipsis ? "hidden" : "visible";
-var _exp13 = () => ({ $isEllipsis }) => $isEllipsis ? "ellipsis" : "clip";
-var _exp14 = () => ({ $isEllipsis }) => $isEllipsis ? "nowrap" : "normal";
-var _exp15 = () => ({ $isEllipsis }) => $isEllipsis ? "100%" : "auto";
-var StyledText = withTheme(/*#__PURE__*/ styled("p")({
-	name: "StyledText",
-	class: "shbcgkd",
-	propsAsIs: false,
-	vars: {
-		"shbcgkd-0": [_exp()],
-		"shbcgkd-1": [_exp2()],
-		"shbcgkd-2": [_exp3()],
-		"shbcgkd-3": [_exp4()],
-		"shbcgkd-4": [_exp5()],
-		"shbcgkd-5": [_exp6()],
-		"shbcgkd-6": [_exp7()],
-		"shbcgkd-7": [_exp8()],
-		"shbcgkd-8": [_exp9()],
-		"shbcgkd-9": [_exp11()],
-		"shbcgkd-10": [_exp12()],
-		"shbcgkd-11": [_exp13()],
-		"shbcgkd-12": [_exp14()],
-		"shbcgkd-13": [_exp15()]
-	}
-}));
+var PROSE_CSS = "gx-Text-PROSE_CSS-porkynj";
+var UI_SELECT_CSS = "gx-Text-UI_SELECT_CSS-ug9onio";
+var SELECTABLE_CSS = "gx-Text-SELECTABLE_CSS-snbodax";
+var TABULAR_CSS = "gx-Text-TABULAR_CSS-tzelh2u";
+var ITALIC_CSS = "gx-Text-ITALIC_CSS-i1wm3pcb";
+var UNDERLINED_CSS = "gx-Text-UNDERLINED_CSS-ur3mnle";
+var STRIKETHROUGH_CSS = "gx-Text-STRIKETHROUGH_CSS-spzvz5x";
+var UNDERLINED_STRIKETHROUGH_CSS = "gx-Text-UNDERLINED_STRIKETHROUGH_CSS-u1xwjpqd";
+/** `lineClamp={1}`: one line ending in an ellipsis, clipped sideways only (see `TRUNCATE`). */
+var SINGLE_LINE_CLAMP_CSS = "gx-Text-SINGLE_LINE_CLAMP_CSS-s59kfuv";
 /**
-* The text primitive. Every string in a Galaxy UI renders through it, so color,
-* size and weight always resolve from theme tokens rather than raw CSS.
-*
-* Renders a `<p>`. For inline treatments nest `Bold`, `Code`, `Selectable` or
-* `HotKeys` inside it rather than reaching for a raw tag.
+* `lineClamp > 1`: N lines, the last ending in an ellipsis. The hidden lines need a vertical clip;
+* it never cuts the last visible line's descenders because every line height holds its ink.
+*/
+var MULTI_LINE_CLAMP_CSS = "gx-Text-MULTI_LINE_CLAMP_CSS-m1ukj6n6";
+/** Declared after the variant map so `hex` wins over it. */
+var HEX_CSS = "gx-Text-HEX_CSS-h1x2tvf1";
+var CURSOR_CSS = "gx-Text-CURSOR_CSS-c1bar1us";
+/** What `line-height: normal` resolves to, roughly, when a computed style reports `normal`. */
+var NORMAL_LINE_HEIGHT_RATIO = 1.2;
+/**
+* Whether a clamped element hides some of its text. One line clips sideways, so only the widths
+* are compared. Several lines clip downwards, and a hidden line adds at least one full line
+* height, so the height test ignores anything under half a line (sub-pixel rounding).
+*/
+function isClampOverflowing(element, clamp) {
+	if (element.scrollWidth > element.clientWidth) return true;
+	if (clamp === 1) return false;
+	const computed = getComputedStyle(element);
+	const lineHeight = Number.parseFloat(computed.lineHeight);
+	const line = Number.isFinite(lineHeight) ? lineHeight : Number.parseFloat(computed.fontSize) * NORMAL_LINE_HEIGHT_RATIO;
+	return element.scrollHeight - element.clientHeight > line / 2;
+}
+/** The full text of a clamped element while it is cut, or `undefined` while it all fits. */
+function overflowTextOf(element, clamp) {
+	if (!element) return void 0;
+	const text = element.textContent ?? "";
+	return text !== "" && isClampOverflowing(element, clamp) ? text : void 0;
+}
+/**
+* The `shouldTooltipOnOverflow` path. Nothing is measured and no `Tooltip` exists until the pointer
+* (or focus) reaches the element; the first time the text is cut, a `LazyTooltip` mounts already
+* open with the full text, and from then on every open request re-measures, so a cell that later
+* fits shows no bubble. The bubble is `aria-hidden`: the full text is already the element's
+* content.
 */
-var Text = ({ children, size = "BODY_MD", variant = "PRIMARY", weight = "REGULAR", align = "left", cursor, isMonospace = false, isSelectable = false, isUnderlined = false, isEllipsis = false, hex }) => {
-	return /* @__PURE__ */ jsx(StyledText, {
-		$size: size,
-		$variant: variant,
-		$weight: weight,
-		$align: align,
-		$cursor: cursor,
-		$isMonospace: isMonospace,
-		$isSelectable: isSelectable,
-		$isUnderlined: isUnderlined,
-		$isEllipsis: isEllipsis,
-		$hex: hex,
+function OverflowTooltipText({ clamp, forwardedRef, renderRoot }) {
+	const elementRef = useRef(null);
+	const [overflowText, setOverflowText] = useState(void 0);
+	const [isOpen, setIsOpen] = useState(false);
+	const setRefs = useCallback((node) => {
+		elementRef.current = node;
+		if (typeof forwardedRef === "function") forwardedRef(node);
+		else if (forwardedRef) forwardedRef.current = node;
+	}, [forwardedRef]);
+	const arm = () => {
+		const text = overflowTextOf(elementRef.current, clamp);
+		if (text === void 0) return;
+		setOverflowText(text);
+		setIsOpen(true);
+	};
+	const handleOpenChange = (next) => {
+		if (!next) {
+			setIsOpen(false);
+			return;
+		}
+		const text = overflowTextOf(elementRef.current, clamp);
+		setOverflowText(text);
+		setIsOpen(text !== void 0);
+	};
+	if (overflowText === void 0) return renderRoot(setRefs, {
+		onPointerEnter: arm,
+		onFocus: arm
+	});
+	return /* @__PURE__ */ jsx(LazyTooltip, {
+		body: overflowText,
+		isOpen,
+		onOpenChange: handleOpenChange,
+		"aria-hidden": true,
+		children: renderRoot(setRefs, {})
+	});
+}
+/** The text primitive: a color role, a type step, a weight and a family, all from tokens. */
+var Text = forwardRef(function Text({ children, as = "p", variant = "PRIMARY", size = "BODY_MD", weight = "REGULAR", family = FontFamily.SANS, align = "left", transform = "NONE", lineClamp, shouldTooltipOnOverflow = false, isProse = false, isTabular: isTabularProp, isItalic = false, isUnderlined = false, isStrikethrough = false, isSelectable: isSelectableProp, hex, cursor, id, className, style, ...rest }, ref) {
+	const isTabular = isTabularProp ?? family === FontFamily.MONO;
+	const isSelectable = isSelectableProp ?? isProse;
+	const clamp = lineClamp !== void 0 && lineClamp > 0 ? Math.floor(lineClamp) : void 0;
+	const hasOverflowTooltip = shouldTooltipOnOverflow && clamp !== void 0;
+	const variables = {};
+	if (hex !== void 0) variables["--gx-text-hex"] = hex;
+	if (clamp !== void 0 && clamp > 1) variables["--gx-text-line-clamp"] = String(clamp);
+	if (cursor !== void 0) variables["--gx-text-cursor"] = cursor;
+	const rootClassName = cx(TEXT_VARIANT_TO_CSS_MAP[variant], TEXT_SIZE_TO_CSS_MAP[size], TEXT_WEIGHT_TO_CSS_MAP[weight], TEXT_FAMILY_TO_CSS_MAP[family], TEXT_ALIGN_TO_CSS_MAP[align], TEXT_TRANSFORM_TO_CSS_MAP[transform], isProse && PROSE_CSS, isSelectable ? SELECTABLE_CSS : UI_SELECT_CSS, isTabular && TABULAR_CSS, isItalic && ITALIC_CSS, isUnderlined && isStrikethrough ? UNDERLINED_STRIKETHROUGH_CSS : isUnderlined && UNDERLINED_CSS || isStrikethrough && STRIKETHROUGH_CSS, clamp === 1 && SINGLE_LINE_CLAMP_CSS, clamp !== void 0 && clamp > 1 && MULTI_LINE_CLAMP_CSS, hex !== void 0 && HEX_CSS, cursor !== void 0 && CURSOR_CSS, className);
+	const renderRoot = (rootRef, handlers) => /* @__PURE__ */ jsx(Root, {
+		...rest,
+		...handlers,
+		as,
+		ref: rootRef,
+		id,
+		className: rootClassName,
+		style: {
+			...variables,
+			...style
+		},
 		children
 	});
-};
+	if (!hasOverflowTooltip) return renderRoot(ref, {});
+	return /* @__PURE__ */ jsx(OverflowTooltipText, {
+		clamp,
+		forwardedRef: ref,
+		renderRoot
+	});
+});
+Text.displayName = "Text";
 //#endregion
-export { TextSize, TextVariant, TextWeight, Text as default };
+export { TextSize, TextTransform, TextVariant, TextWeight, Text as default };

package/dist/theme/GalaxyProvider.d.ts

@@ -0,0 +1,75 @@
+import { type ReactNode } from "react";
+import { GalaxyTheme, ReducedMotion } from "./enums.js";
+/** The two themes the OS can report, and the two every preference resolves to. */
+type BaseTheme = GalaxyTheme.DARK | GalaxyTheme.LIGHT;
+/** Where the theme preference persists (`localStorage`, a cookie, a desktop store). */
+export interface GalaxyProviderStorage {
+    /** The stored value for `key`, or `null` when nothing is stored. */
+    get(key: string): string | null;
+    /** Store `value` under `key`. */
+    set(key: string, value: string): void;
+}
+/**
+ * How the provider reads the OS theme. Supply your own where `prefers-color-scheme` is not the
+ * source of truth (Electron, React Native).
+ */
+export interface ThemeDetector {
+    /**
+     * Read the OS theme once, at mount. A synchronous result applies before the first paint; a
+     * promise applies when it resolves. Throwing or rejecting leaves `isSystemThemeSupported` false.
+     */
+    detectInitialTheme(): BaseTheme | Promise<BaseTheme>;
+    /** Subscribe to OS theme changes. Returns the unsubscribe function. */
+    onThemeChange(callback: (theme: BaseTheme) => void): () => void;
+}
+export interface GalaxyProviderProps {
+    /**
+     * Theme to start on when nothing is stored. A starting value; remount with a `key` to reset it.
+     * Omitted on a scoped provider inside another provider: the parent's resolved theme.
+     * @default GalaxyTheme.SYSTEM
+     */
+    theme?: GalaxyTheme;
+    /**
+     * Where the theme preference persists. Pass `null` to disable persistence.
+     * @default localStorage in browsers, null on the server and when `isScoped`
+     */
+    storage?: GalaxyProviderStorage | null;
+    /**
+     * Storage key of the theme preference.
+     * @default "galaxy:theme"
+     */
+    storageKey?: string;
+    /**
+     * How the OS theme is read (Electron and React Native can supply their own).
+     * @default a detector that reads `prefers-color-scheme`
+     */
+    detector?: ThemeDetector;
+    /**
+     * Write the theme attributes to a wrapper `div` instead of `<html>`, for a nested theme.
+     * @default false
+     */
+    isScoped?: boolean;
+    /**
+     * Where Portal, Modal, Drawer, Popover and Toast render. A nested provider without it keeps its
+     * parent's; `null` holds portals back until the node exists.
+     * @default document.body
+     */
+    portalContainer?: HTMLElement | null;
+    /**
+     * Reduce motion always, never, or when the OS asks (`prefers-reduced-motion`).
+     * @default ReducedMotion.SYSTEM
+     */
+    reducedMotion?: ReducedMotion;
+    /** The app, or the subtree the theme applies to when `isScoped`. */
+    children?: ReactNode;
+}
+/**
+ * The single root every app mounts. Resolves the theme, writes `data-gx-theme` (and
+ * `color-scheme`, reduced motion) on `<html>` or, when `isScoped`, on a wrapper `div`, and
+ * provides `useGalaxyTheme()`.
+ */
+declare function GalaxyProvider({ theme, storage, storageKey, detector, isScoped, portalContainer, reducedMotion, children, }: GalaxyProviderProps): import("react").JSX.Element;
+declare namespace GalaxyProvider {
+    var displayName: string;
+}
+export default GalaxyProvider;

package/dist/theme/GalaxyProvider.js

@@ -0,0 +1,223 @@
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import { GalaxyTheme, ReducedMotion } from "./enums.js";
+import { DARK_THEME } from "./tokens/dark.js";
+import { GalaxyThemeContext, PortalContainerContext, ThemeScopeContext } from "./useGalaxyTheme.js";
+import OverlayProvider from "../overlay/OverlayProvider.js";
+import ToastProvider from "../toast/ToastProvider.js";
+import { LIGHT_THEME } from "./tokens/light.js";
+/* empty css                         */
+import { useCallback, useContext, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/theme/GalaxyProvider.tsx
+/**
+* The one provider an app mounts (spec 03). It resolves the theme (`DARK`, `LIGHT` or `SYSTEM`),
+* writes `data-gx-theme` on `<html>` (or on a wrapper when `isScoped`) and fills the context
+* `useGalaxyTheme()` reads. It also hosts `OverlayProvider` (the overlay stack: `z` order and
+* Escape to the topmost overlay) and, inside it, `ToastProvider` (the toast queue, placement
+* regions, timers and announcements), so apps never mount either themselves.
+*
+* Styling never subscribes to it: components read `var(--gx-…)`, so a theme switch is one
+* attribute change. Only `useGalaxyTheme()` consumers re-render. Galaxy is monochrome: there is
+* no accent to configure.
+*
+* SSR: nothing here touches `window`, `document` or `localStorage` at module scope. Storage, the
+* OS theme and the `<html>` attribute are read and written in layout effects, so the server
+* renders the `theme` prop and the first client paint is already themed.
+*/
+/** Default `storageKey`. */
+var DEFAULT_STORAGE_KEY = "galaxy:theme";
+/** The attribute the token CSS keys off (`tokens.css`, `themeToCss`). */
+var THEME_ATTRIBUTE = "data-gx-theme";
+/** The resolved token object behind each theme, for `useGalaxyTheme().theme`. */
+var BASE_THEME_TO_THEME_MAP = {
+	[GalaxyTheme.DARK]: DARK_THEME,
+	[GalaxyTheme.LIGHT]: LIGHT_THEME
+};
+/** `color-scheme` follows the active theme, so native controls and scrollbars match. */
+var PROVIDER_COLOR_SCHEME_TO_CSS_MAP = {
+	[GalaxyTheme.DARK]: "gx-GalaxyProvider-GalaxyTheme_DARK-g1mrhybl",
+	[GalaxyTheme.LIGHT]: "gx-GalaxyProvider-GalaxyTheme_LIGHT-g5p68x8"
+};
+/**
+* Reduced motion on the root and every descendant. `SYSTEM` reuses the media-gated
+* `REDUCED_MOTION` mixin; `ALWAYS` writes the mixin's two rules without the media gate (the one
+* documented re-declaration, GalaxyProvider Q5); `NEVER` adds nothing.
+*/
+var PROVIDER_REDUCED_MOTION_TO_CSS_MAP = {
+	[ReducedMotion.SYSTEM]: "gx-GalaxyProvider-ReducedMotion_SYSTEM-r1dimuet",
+	[ReducedMotion.ALWAYS]: "gx-GalaxyProvider-ReducedMotion_ALWAYS-rylvh5s",
+	[ReducedMotion.NEVER]: ""
+};
+/**
+* On while the theme flips: no transitions anywhere for that one frame, so every color (and the
+* ThemeSwitcher pill) lands on the new theme at once instead of easing through a mixed state.
+*/
+var THEME_SWITCHING_CSS = "gx-GalaxyProvider-THEME_SWITCHING_CSS-t154i2sa";
+/** The `isScoped` wrapper re-roots inherited text color under its own theme. */
+var SCOPE_CSS = "gx-GalaxyProvider-SCOPE_CSS-svyyo75";
+var BUILT_IN_THEMES = Object.values(GalaxyTheme);
+var isPromiseLike = (value) => typeof value === "object" && value !== null && "then" in value;
+/** `localStorage`, read lazily and guarded (private modes throw). */
+var LOCAL_STORAGE = {
+	get(key) {
+		try {
+			return typeof window === "undefined" ? null : window.localStorage.getItem(key);
+		} catch {
+			return null;
+		}
+	},
+	set(key, value) {
+		try {
+			if (typeof window !== "undefined") window.localStorage.setItem(key, value);
+		} catch {}
+	}
+};
+/** Reads `prefers-color-scheme`. Throws where `matchMedia` is missing (unsupported). */
+var BROWSER_THEME_DETECTOR = {
+	detectInitialTheme() {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") throw new Error("prefers-color-scheme is not available.");
+		return window.matchMedia("(prefers-color-scheme: dark)").matches ? GalaxyTheme.DARK : GalaxyTheme.LIGHT;
+	},
+	onThemeChange(callback) {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+		const query = window.matchMedia("(prefers-color-scheme: dark)");
+		const handleChange = (event) => callback(event.matches ? GalaxyTheme.DARK : GalaxyTheme.LIGHT);
+		query.addEventListener("change", handleChange);
+		return () => query.removeEventListener("change", handleChange);
+	}
+};
+/** Sets `name` on `element` to `value`, or removes it when `value` is `null`. */
+function restoreAttribute(element, name, value) {
+	if (value === null) element.removeAttribute(name);
+	else element.setAttribute(name, value);
+}
+/**
+* The single root every app mounts. Resolves the theme, writes `data-gx-theme` (and
+* `color-scheme`, reduced motion) on `<html>` or, when `isScoped`, on a wrapper `div`, and
+* provides `useGalaxyTheme()`.
+*/
+function GalaxyProvider({ theme, storage, storageKey = DEFAULT_STORAGE_KEY, detector = BROWSER_THEME_DETECTOR, isScoped = false, portalContainer, reducedMotion = ReducedMotion.SYSTEM, children }) {
+	const parentScope = useContext(ThemeScopeContext);
+	const parentPortalContainer = useContext(PortalContainerContext);
+	const resolvedPortalContainer = portalContainer !== void 0 ? portalContainer : parentPortalContainer;
+	const resolvedStorage = storage !== void 0 ? storage : isScoped ? null : LOCAL_STORAGE;
+	const inheritedTheme = isScoped && theme === void 0 ? parentScope?.base : void 0;
+	const [chosenTheme, setChosenTheme] = useState(theme);
+	const selectedTheme = chosenTheme ?? inheritedTheme ?? GalaxyTheme.SYSTEM;
+	const [systemTheme, setSystemTheme] = useState(GalaxyTheme.DARK);
+	const [isSystemThemeSupported, setIsSystemThemeSupported] = useState(false);
+	const hasReadStorageRef = useRef(false);
+	useIsomorphicLayoutEffect(() => {
+		if (hasReadStorageRef.current) return;
+		hasReadStorageRef.current = true;
+		if (resolvedStorage === null) return;
+		let storedTheme = null;
+		try {
+			storedTheme = resolvedStorage.get(storageKey);
+		} catch {
+			return;
+		}
+		if (storedTheme !== null && BUILT_IN_THEMES.includes(storedTheme)) setChosenTheme(storedTheme);
+	}, [resolvedStorage, storageKey]);
+	useIsomorphicLayoutEffect(() => {
+		let isMounted = true;
+		const applyInitial = (initial) => {
+			if (!isMounted) return;
+			setSystemTheme(initial);
+			setIsSystemThemeSupported(true);
+		};
+		try {
+			const initial = detector.detectInitialTheme();
+			if (isPromiseLike(initial)) initial.then(applyInitial, () => {});
+			else applyInitial(initial);
+		} catch {}
+		let unsubscribe = () => {};
+		try {
+			unsubscribe = detector.onThemeChange((next) => {
+				if (isMounted) setSystemTheme(next);
+			});
+		} catch {}
+		return () => {
+			isMounted = false;
+			unsubscribe();
+		};
+	}, [detector]);
+	const activeTheme = selectedTheme === GalaxyTheme.SYSTEM ? systemTheme : selectedTheme;
+	const themeAttribute = activeTheme.toLowerCase();
+	const colorSchemeClass = PROVIDER_COLOR_SCHEME_TO_CSS_MAP[activeTheme];
+	const reducedMotionClass = PROVIDER_REDUCED_MOTION_TO_CSS_MAP[reducedMotion];
+	useIsomorphicLayoutEffect(() => {
+		if (isScoped) return;
+		const root = document.documentElement;
+		const previousTheme = root.getAttribute(THEME_ATTRIBUTE);
+		root.setAttribute(THEME_ATTRIBUTE, themeAttribute);
+		const addedClasses = [colorSchemeClass, reducedMotionClass].filter((className) => className !== "" && !root.classList.contains(className));
+		root.classList.add(...addedClasses);
+		return () => {
+			restoreAttribute(root, THEME_ATTRIBUTE, previousTheme);
+			root.classList.remove(...addedClasses);
+		};
+	}, [
+		isScoped,
+		themeAttribute,
+		colorSchemeClass,
+		reducedMotionClass
+	]);
+	const lastThemeRef = useRef(themeAttribute);
+	useIsomorphicLayoutEffect(() => {
+		if (lastThemeRef.current === themeAttribute) return;
+		lastThemeRef.current = themeAttribute;
+		const root = document.documentElement;
+		root.classList.add(THEME_SWITCHING_CSS);
+		getComputedStyle(root).color;
+		let frame = requestAnimationFrame(() => {
+			frame = requestAnimationFrame(() => root.classList.remove(THEME_SWITCHING_CSS));
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+			root.classList.remove(THEME_SWITCHING_CSS);
+		};
+	}, [themeAttribute]);
+	const setTheme = useCallback((next) => {
+		setChosenTheme(next);
+		try {
+			resolvedStorage?.set(storageKey, next);
+		} catch {}
+	}, [resolvedStorage, storageKey]);
+	const scope = useMemo(() => ({ base: activeTheme }), [activeTheme]);
+	const value = useMemo(() => ({
+		theme: BASE_THEME_TO_THEME_MAP[activeTheme],
+		activeTheme,
+		selectedTheme,
+		systemTheme,
+		isSystemThemeSupported,
+		setTheme,
+		reducedMotion
+	}), [
+		activeTheme,
+		selectedTheme,
+		systemTheme,
+		isSystemThemeSupported,
+		setTheme,
+		reducedMotion
+	]);
+	const content = isScoped ? /* @__PURE__ */ jsx("div", {
+		"data-gx-theme": themeAttribute,
+		className: cx(SCOPE_CSS, colorSchemeClass, reducedMotionClass),
+		children
+	}) : children;
+	return /* @__PURE__ */ jsx(GalaxyThemeContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(ThemeScopeContext.Provider, {
+			value: scope,
+			children: /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
+				value: resolvedPortalContainer,
+				children: /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsx(ToastProvider, { children: content }) })
+			})
+		})
+	});
+}
+GalaxyProvider.displayName = "GalaxyProvider";
+//#endregion
+export { GalaxyProvider as default };