@ada-cx/lovelace 1.0.0-setup.0

package/dist/components/UserMessage/UserMessage.d.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties, ReactNode, Ref } from "react";
+export interface UserMessageProps {
+    /** The message text the customer sent. One message per bubble. */
+    children: ReactNode;
+    /**
+     * Localized failed-to-send copy. When set, reveals the retry affordance
+     * below the bubble and is its accessible name; pair it with `onRetry` so the
+     * retry actually resends. Absent means the message sent successfully.
+     */
+    error?: string;
+    /** Invoked when the retry affordance is activated (click / Enter / Space). */
+    onRetry?: () => void;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * The customer's outbound chat message bubble — accent background, aligned to the
+ * trailing edge. Mirrors automatically under `dir="rtl"` via logical properties.
+ * Pair with the agent/bot message component for replies.
+ */
+export declare function UserMessage({ children, error, onRetry, className, ...rest }: UserMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/UserMessage/UserMessage.js

@@ -0,0 +1,45 @@
+import { cx as e } from "../../utils/cx.js";
+import { ExclamationSync as t } from "../Icon/icons/ExclamationSync.js";
+import { userMessageBubble as n, userMessageRoot as r, userMessageText as i } from "./UserMessage.css.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Button as s } from "react-aria-components";
+//#region src/components/UserMessage/UserMessage.tsx
+function c({ children: c, error: l, onRetry: u, className: d, ...f }) {
+	return /* @__PURE__ */ o("div", {
+		...f,
+		"data-error": l ? !0 : void 0,
+		className: e(r, d),
+		children: [/* @__PURE__ */ a("div", {
+			className: n,
+			children: /* @__PURE__ */ a("p", {
+				dir: "auto",
+				className: i,
+				children: c
+			})
+		}), l && /* @__PURE__ */ a("div", {
+			role: "alert",
+			"aria-live": "assertive",
+			className: "jxp4or3",
+			children: u ? /* @__PURE__ */ o(s, {
+				className: "jxp4or5 jxp4or4",
+				onPress: u,
+				children: [/* @__PURE__ */ a(t, {}), /* @__PURE__ */ a("span", {
+					dir: "auto",
+					className: "jxp4or6",
+					children: l
+				})]
+			}) : /* @__PURE__ */ a("span", {
+				className: "jxp4or4",
+				children: /* @__PURE__ */ a("span", {
+					dir: "auto",
+					className: "jxp4or6",
+					children: l
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { c as UserMessage };
+
+//# sourceMappingURL=UserMessage.js.map

package/dist/components/UserMessage/UserMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserMessage.js","names":[],"sources":["../../../src/components/UserMessage/UserMessage.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref } from \"react\";\nimport { Button as AriaButton } from \"react-aria-components\";\nimport { cx } from \"../../utils/cx.js\";\nimport { ExclamationSync } from \"../Icon/icons/index.js\";\nimport {\n\tuserMessageBubble,\n\tuserMessageError,\n\tuserMessageErrorContent,\n\tuserMessageErrorText,\n\tuserMessageRetry,\n\tuserMessageRoot,\n\tuserMessageText,\n} from \"./UserMessage.css.js\";\n\nexport interface UserMessageProps {\n\t/** The message text the customer sent. One message per bubble. */\n\tchildren: ReactNode;\n\t/**\n\t * Localized failed-to-send copy. When set, reveals the retry affordance\n\t * below the bubble and is its accessible name; pair it with `onRetry` so the\n\t * retry actually resends. Absent means the message sent successfully.\n\t */\n\terror?: string;\n\t/** Invoked when the retry affordance is activated (click / Enter / Space). */\n\tonRetry?: () => void;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The customer's outbound chat message bubble — accent background, aligned to the\n * trailing edge. Mirrors automatically under `dir=\"rtl\"` via logical properties.\n * Pair with the agent/bot message component for replies.\n */\nexport function UserMessage({\n\tchildren,\n\terror,\n\tonRetry,\n\tclassName,\n\t...rest\n}: UserMessageProps) {\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tdata-error={error ? true : undefined}\n\t\t\tclassName={cx(userMessageRoot, className)}\n\t\t>\n\t\t\t<div className={userMessageBubble}>\n\t\t\t\t<p dir=\"auto\" className={userMessageText}>\n\t\t\t\t\t{children}\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t{error && (\n\t\t\t\t// Per-message assertive region (unlike AgentMessage's transcript-level\n\t\t\t\t// log): the failure surfaces after mount, so empty→populated announces\n\t\t\t\t// reliably. Assertive because a failed send needs prompt attention.\n\t\t\t\t// Without `onRetry` there's nothing to retry, so the copy is rendered\n\t\t\t\t// as static text rather than a control that does nothing.\n\t\t\t\t<div role=\"alert\" aria-live=\"assertive\" className={userMessageError}>\n\t\t\t\t\t{onRetry ? (\n\t\t\t\t\t\t<AriaButton className={userMessageRetry} onPress={onRetry}>\n\t\t\t\t\t\t\t<ExclamationSync />\n\t\t\t\t\t\t\t<span dir=\"auto\" className={userMessageErrorText}>\n\t\t\t\t\t\t\t\t{error}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</AriaButton>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span className={userMessageErrorContent}>\n\t\t\t\t\t\t\t<span dir=\"auto\" className={userMessageErrorText}>\n\t\t\t\t\t\t\t\t{error}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;AAmCA,SAAgB,EAAY,EAC3B,aACA,UACA,YACA,cACA,GAAG,KACiB;AACpB,QACC,kBAAC,OAAD;EACC,GAAI;EACJ,cAAY,IAAQ,KAAO,KAAA;EAC3B,WAAW,EAAG,GAAiB,EAAU;YAH1C,CAKC,kBAAC,OAAD;GAAK,WAAW;aACf,kBAAC,KAAD;IAAG,KAAI;IAAO,WAAW;IACvB;IACE,CAAA;GACC,CAAA,EACL,KAMA,kBAAC,OAAD;GAAK,MAAK;GAAQ,aAAU;GAAY,WAAA;aACtC,IACA,kBAAC,GAAD;IAAY,WAAA;IAA6B,SAAS;cAAlD,CACC,kBAAC,GAAD,EAAmB,CAAA,EACnB,kBAAC,QAAD;KAAM,KAAI;KAAO,WAAA;eACf;KACK,CAAA,CACK;QAEb,kBAAC,QAAD;IAAM,WAAA;cACL,kBAAC,QAAD;KAAM,KAAI;KAAO,WAAA;eACf;KACK,CAAA;IACD,CAAA;GAEH,CAAA,CAEF"}

package/dist/components/UserMessage/index.d.ts

@@ -0,0 +1 @@
+export { UserMessage, type UserMessageProps } from "./UserMessage.js";

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { readPrefersReducedMotion, usePrefersReducedMotion, } from "./usePrefersReducedMotion.js";
+export { useSubmitOnEnter } from "./useSubmitOnEnter.js";

package/dist/hooks/usePrefersReducedMotion.d.ts

@@ -0,0 +1,3 @@
+export declare function readPrefersReducedMotion(): boolean;
+/** Tracks the user's `prefers-reduced-motion` setting, updating on change. */
+export declare function usePrefersReducedMotion(): boolean;

package/dist/hooks/usePrefersReducedMotion.js

@@ -0,0 +1,20 @@
+import { useEffect as e, useState as t } from "react";
+//#region src/hooks/usePrefersReducedMotion.ts
+var n = "(prefers-reduced-motion: reduce)";
+function r() {
+	return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia(n).matches;
+}
+function i() {
+	let [i, a] = t(r);
+	return e(() => {
+		if (typeof window > "u" || typeof window.matchMedia != "function") return;
+		let e = window.matchMedia(n);
+		a(e.matches);
+		let t = (e) => a(e.matches);
+		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []), i;
+}
+//#endregion
+export { r as readPrefersReducedMotion, i as usePrefersReducedMotion };
+
+//# sourceMappingURL=usePrefersReducedMotion.js.map

package/dist/hooks/usePrefersReducedMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrefersReducedMotion.js","names":[],"sources":["../../src/hooks/usePrefersReducedMotion.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nconst REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\n\nexport function readPrefersReducedMotion(): boolean {\n\tif (\n\t\ttypeof window === \"undefined\" ||\n\t\ttypeof window.matchMedia !== \"function\"\n\t) {\n\t\treturn false;\n\t}\n\treturn window.matchMedia(REDUCED_MOTION_QUERY).matches;\n}\n\n/** Tracks the user's `prefers-reduced-motion` setting, updating on change. */\nexport function usePrefersReducedMotion(): boolean {\n\tconst [reduced, setReduced] = useState(readPrefersReducedMotion);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\ttypeof window === \"undefined\" ||\n\t\t\ttypeof window.matchMedia !== \"function\"\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t\tconst mql = window.matchMedia(REDUCED_MOTION_QUERY);\n\t\tsetReduced(mql.matches);\n\t\tconst listener = (e: MediaQueryListEvent) => setReduced(e.matches);\n\t\tmql.addEventListener(\"change\", listener);\n\t\treturn () => mql.removeEventListener(\"change\", listener);\n\t}, []);\n\n\treturn reduced;\n}\n"],"mappings":";;AAEA,IAAM,IAAuB;AAE7B,SAAgB,IAAoC;AAOnD,QALC,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,aAEtB,KAED,OAAO,WAAW,EAAqB,CAAC;;AAIhD,SAAgB,IAAmC;CAClD,IAAM,CAAC,GAAS,KAAc,EAAS,EAAyB;AAgBhE,QAdA,QAAgB;AACf,MACC,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,WAE7B;EAED,IAAM,IAAM,OAAO,WAAW,EAAqB;AACnD,IAAW,EAAI,QAAQ;EACvB,IAAM,KAAY,MAA2B,EAAW,EAAE,QAAQ;AAElE,SADA,EAAI,iBAAiB,UAAU,EAAS,QAC3B,EAAI,oBAAoB,UAAU,EAAS;IACtD,EAAE,CAAC,EAEC"}

package/dist/hooks/useSubmitOnEnter.d.ts

@@ -0,0 +1,7 @@
+import type { KeyboardEvent } from "react";
+/** Returns an `onKeyDown` handler that calls `onSubmit` when Enter is pressed
+ * without Shift — the standard chat-composer key handling. Shift+Enter falls
+ * through so the field inserts a newline. Guards against IME composition:
+ * pressing Enter to confirm a candidate (e.g. Japanese/Chinese input) must not
+ * submit, so composition keystrokes are ignored. */
+export declare function useSubmitOnEnter<T extends HTMLElement = HTMLTextAreaElement>(onSubmit: () => void): (event: KeyboardEvent<T>) => void;

package/dist/hooks/useSubmitOnEnter.js

@@ -0,0 +1,11 @@
+import { useCallback as e } from "react";
+//#region src/hooks/useSubmitOnEnter.ts
+function t(t) {
+	return e((e) => {
+		e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing || (e.preventDefault(), t());
+	}, [t]);
+}
+//#endregion
+export { t as useSubmitOnEnter };
+
+//# sourceMappingURL=useSubmitOnEnter.js.map

package/dist/hooks/useSubmitOnEnter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubmitOnEnter.js","names":[],"sources":["../../src/hooks/useSubmitOnEnter.ts"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport { useCallback } from \"react\";\n\n/** Returns an `onKeyDown` handler that calls `onSubmit` when Enter is pressed\n * without Shift — the standard chat-composer key handling. Shift+Enter falls\n * through so the field inserts a newline. Guards against IME composition:\n * pressing Enter to confirm a candidate (e.g. Japanese/Chinese input) must not\n * submit, so composition keystrokes are ignored. */\nexport function useSubmitOnEnter<T extends HTMLElement = HTMLTextAreaElement>(\n\tonSubmit: () => void,\n) {\n\treturn useCallback(\n\t\t(event: KeyboardEvent<T>) => {\n\t\t\tif (event.key !== \"Enter\" || event.shiftKey) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Enter confirms an IME candidate rather than sending — never submit mid-composition.\n\t\t\tif (event.nativeEvent.isComposing) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tevent.preventDefault();\n\t\t\tonSubmit();\n\t\t},\n\t\t[onSubmit],\n\t);\n}\n"],"mappings":";;AAQA,SAAgB,EACf,GACC;AACD,QAAO,GACL,MAA4B;AACxB,IAAM,QAAQ,WAAW,EAAM,YAI/B,EAAM,YAAY,gBAGtB,EAAM,gBAAgB,EACtB,GAAU;IAEX,CAAC,EAAS,CACV"}

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+export * from "./components/AgentMessage/index.js";
+export * from "./components/Avatar/index.js";
+export * from "./components/BubbleOverlay/index.js";
+export * from "./components/Button/index.js";
+export * from "./components/Checkbox/index.js";
+export * from "./components/Chip/index.js";
+export * from "./components/Dialog/index.js";
+export * from "./components/DialogOverlay/index.js";
+export * from "./components/Divider/index.js";
+export * from "./components/FullscreenOverlay/index.js";
+export * from "./components/Header/index.js";
+export * from "./components/Icon/index.js";
+export * from "./components/IconButton/index.js";
+export * from "./components/Image/index.js";
+export * from "./components/Input/index.js";
+export * from "./components/Link/index.js";
+export * from "./components/MenuItem/index.js";
+export * from "./components/PictureMessage/index.js";
+export * from "./components/PillButton/index.js";
+export * from "./components/ProactiveMessage/index.js";
+export * from "./components/Radio/index.js";
+export * from "./components/ScrollMarker/index.js";
+export * from "./components/Sheet/index.js";
+export * from "./components/SheetOverlay/index.js";
+export * from "./components/Spinner/index.js";
+export * from "./components/Survey/index.js";
+export * from "./components/ThinkingShimmer/index.js";
+export * from "./components/ToastNotification/index.js";
+export * from "./components/Toggle/index.js";
+export * from "./components/Tooltip/index.js";
+export * from "./components/TypingIndicator/index.js";
+export * from "./components/UserMessage/index.js";
+export * from "./hooks/index.js";
+export * from "./runtime/index.js";

package/dist/index.js

@@ -0,0 +1,75 @@
+import { AvatarPlaceholder as e } from "./components/Avatar/AvatarPlaceholder.js";
+import { Avatar as t } from "./components/Avatar/Avatar.js";
+import { AgentMessage as n } from "./components/AgentMessage/AgentMessage.js";
+import { BubbleOverlay as r } from "./components/BubbleOverlay/BubbleOverlay.js";
+import { Button as i } from "./components/Button/Button.js";
+import { Checkbox as a } from "./components/Checkbox/Checkbox.js";
+import { Chip as o } from "./components/Chip/Chip.js";
+import { Icon as s } from "./components/Icon/Icon.js";
+import { Checkmark as c } from "./components/Icon/icons/Checkmark.js";
+import { ExclamationTriangle as l } from "./components/Icon/icons/ExclamationTriangle.js";
+import { Dialog as u } from "./components/Dialog/Dialog.js";
+import { DialogOverlay as d } from "./components/DialogOverlay/DialogOverlay.js";
+import { Divider as f } from "./components/Divider/Divider.js";
+import { FullscreenOverlay as p } from "./components/FullscreenOverlay/FullscreenOverlay.js";
+import { Header as m } from "./components/Header/Header.js";
+import { AdaLogo as h } from "./components/Icon/icons/AdaLogo.js";
+import { ArrowDown as g } from "./components/Icon/icons/ArrowDown.js";
+import { ArrowLeft as _ } from "./components/Icon/icons/ArrowLeft.js";
+import { ArrowNortheast as v } from "./components/Icon/icons/ArrowNortheast.js";
+import { ArrowNorthwest as y } from "./components/Icon/icons/ArrowNorthwest.js";
+import { ArrowRight as b } from "./components/Icon/icons/ArrowRight.js";
+import { Bell as x } from "./components/Icon/icons/Bell.js";
+import { BellSlash as S } from "./components/Icon/icons/BellSlash.js";
+import { ChevronLeft as C } from "./components/Icon/icons/ChevronLeft.js";
+import { ChevronRight as w } from "./components/Icon/icons/ChevronRight.js";
+import { CloudUpload as T } from "./components/Icon/icons/CloudUpload.js";
+import { Download as E } from "./components/Icon/icons/Download.js";
+import { Ellipses as D } from "./components/Icon/icons/Ellipses.js";
+import { Email as O } from "./components/Icon/icons/Email.js";
+import { ExclamationSync as k } from "./components/Icon/icons/ExclamationSync.js";
+import { Eye as A } from "./components/Icon/icons/Eye.js";
+import { EyeSlash as j } from "./components/Icon/icons/EyeSlash.js";
+import { Language as M } from "./components/Icon/icons/Language.js";
+import { MediaSlash as N } from "./components/Icon/icons/MediaSlash.js";
+import { MessagingFill as P } from "./components/Icon/icons/MessagingFill.js";
+import { Minimize as F } from "./components/Icon/icons/Minimize.js";
+import { Mute as I } from "./components/Icon/icons/Mute.js";
+import { Paperclip as L } from "./components/Icon/icons/Paperclip.js";
+import { PersonFill as R } from "./components/Icon/icons/PersonFill.js";
+import { PlayFill as z } from "./components/Icon/icons/PlayFill.js";
+import { SendFill as B } from "./components/Icon/icons/SendFill.js";
+import { StarBadgeFill as V } from "./components/Icon/icons/StarBadgeFill.js";
+import { ThumbsDown as H } from "./components/Icon/icons/ThumbsDown.js";
+import { ThumbsUp as U } from "./components/Icon/icons/ThumbsUp.js";
+import { Volume as W } from "./components/Icon/icons/Volume.js";
+import { Xmark as G } from "./components/Icon/icons/Xmark.js";
+import { XmarkCircle as K } from "./components/Icon/icons/XmarkCircle.js";
+import { IconButton as q } from "./components/IconButton/IconButton.js";
+import { Image as J } from "./components/Image/Image.js";
+import { Input as Y } from "./components/Input/Input.js";
+import { Link as X } from "./components/Link/Link.js";
+import { Menu as Z } from "./components/MenuItem/Menu.js";
+import { MenuItem as Q } from "./components/MenuItem/MenuItem.js";
+import { PictureMessage as $ } from "./components/PictureMessage/PictureMessage.js";
+import { PillButton as ee } from "./components/PillButton/PillButton.js";
+import { ProactiveMessage as te } from "./components/ProactiveMessage/ProactiveMessage.js";
+import { Radio as ne } from "./components/Radio/Radio.js";
+import { RadioGroup as re } from "./components/Radio/RadioGroup.js";
+import { ScrollMarker as ie } from "./components/ScrollMarker/ScrollMarker.js";
+import { Sheet as ae } from "./components/Sheet/Sheet.js";
+import { SheetOverlay as oe } from "./components/SheetOverlay/SheetOverlay.js";
+import { readPrefersReducedMotion as se, usePrefersReducedMotion as ce } from "./hooks/usePrefersReducedMotion.js";
+import { useSubmitOnEnter as le } from "./hooks/useSubmitOnEnter.js";
+import { Spinner as ue } from "./components/Spinner/Spinner.js";
+import { SurveyRating as de } from "./components/Survey/SurveyRating/SurveyRating.js";
+import { SurveySelect as fe } from "./components/Survey/SurveySelect/SurveySelect.js";
+import { ThinkingShimmer as pe } from "./components/ThinkingShimmer/ThinkingShimmer.js";
+import { ToastNotification as me } from "./components/ToastNotification/ToastNotification.js";
+import { Toggle as he } from "./components/Toggle/Toggle.js";
+import { Tooltip as ge, TooltipTrigger as _e } from "./components/Tooltip/Tooltip.js";
+import { TypingIndicator as ve } from "./components/TypingIndicator/TypingIndicator.js";
+import { UserMessage as ye } from "./components/UserMessage/UserMessage.js";
+import { LOVELACE_SURFACES as be, contrastRatioBetween as xe, createBrandOverrides as Se, isLegibleAgainst as Ce, isLegibleOnSurface as we, readableTextOnAccent as Te } from "./runtime/branding.js";
+import { LovelaceProvider as Ee, useResolvedTheme as De } from "./runtime/LovelaceProvider.js";
+export { h as AdaLogo, n as AgentMessage, g as ArrowDown, _ as ArrowLeft, v as ArrowNortheast, y as ArrowNorthwest, b as ArrowRight, t as Avatar, e as AvatarPlaceholder, x as Bell, S as BellSlash, r as BubbleOverlay, i as Button, a as Checkbox, c as Checkmark, C as ChevronLeft, w as ChevronRight, o as Chip, T as CloudUpload, u as Dialog, d as DialogOverlay, f as Divider, E as Download, D as Ellipses, O as Email, k as ExclamationSync, l as ExclamationTriangle, A as Eye, j as EyeSlash, p as FullscreenOverlay, m as Header, s as Icon, q as IconButton, J as Image, Y as Input, be as LOVELACE_SURFACES, M as Language, X as Link, Ee as LovelaceProvider, N as MediaSlash, Z as Menu, Q as MenuItem, P as MessagingFill, F as Minimize, I as Mute, L as Paperclip, R as PersonFill, $ as PictureMessage, ee as PillButton, z as PlayFill, te as ProactiveMessage, ne as Radio, re as RadioGroup, ie as ScrollMarker, B as SendFill, ae as Sheet, oe as SheetOverlay, ue as Spinner, V as StarBadgeFill, de as SurveyRating, fe as SurveySelect, pe as ThinkingShimmer, H as ThumbsDown, U as ThumbsUp, me as ToastNotification, he as Toggle, ge as Tooltip, _e as TooltipTrigger, ve as TypingIndicator, ye as UserMessage, W as Volume, G as Xmark, K as XmarkCircle, xe as contrastRatioBetween, Se as createBrandOverrides, Ce as isLegibleAgainst, we as isLegibleOnSurface, se as readPrefersReducedMotion, Te as readableTextOnAccent, ce as usePrefersReducedMotion, De as useResolvedTheme, le as useSubmitOnEnter };

package/dist/runtime/LovelaceProvider.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import type { LovelaceOverridableToken } from "../tokens/tokens.js";
+export type LovelaceTheme = "light" | "dark" | "auto";
+export interface LovelaceProviderProps {
+    /** Color scheme. `auto` resolves via `prefers-color-scheme`. Defaults to `auto`. */
+    theme?: LovelaceTheme;
+    /**
+     * Type-safe token overrides applied to the provider root and cascaded to every
+     * Lovelace component inside. Keys are overridable (semantic / component) tokens;
+     * values are CSS values — typically a primitive reference via `t()` (e.g.
+     * `{ "font-size-body": t("font-size-14") }`) or a raw color.
+     */
+    override?: Partial<Record<LovelaceOverridableToken, string>>;
+    children?: ReactNode;
+}
+/**
+ * Resolves `auto` against `prefers-color-scheme`, updating live. Exported so a
+ * consumer deciding something per-surface (e.g. a contrast guard on a token
+ * override) resolves the scheme through the same code path that stamps
+ * `data-theme` — two independent media queries would disagree wherever
+ * `matchMedia` is unavailable, since each falls back to light on its own.
+ */
+export declare function useResolvedTheme(theme: LovelaceTheme): "light" | "dark";
+export declare function LovelaceProvider({ theme, override, children, }: LovelaceProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/runtime/LovelaceProvider.js

@@ -0,0 +1,45 @@
+import { tokenName as e } from "../tokens/tokens.js";
+import { jsx as t } from "react/jsx-runtime";
+import { UNSAFE_PortalProvider as n } from "react-aria";
+import { useEffect as r, useMemo as i, useState as a } from "react";
+//#region src/runtime/LovelaceProvider.tsx
+var o = "(prefers-color-scheme: dark)";
+function s() {
+	return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia(o).matches;
+}
+function c(e) {
+	let [t, n] = a(() => e === "auto" ? s() ? "dark" : "light" : e);
+	return r(() => {
+		if (e !== "auto") {
+			n(e);
+			return;
+		}
+		if (typeof window > "u" || typeof window.matchMedia != "function") return;
+		let t = window.matchMedia(o), r = (e) => {
+			n(e ? "dark" : "light");
+		};
+		r(t.matches);
+		let i = (e) => r(e.matches);
+		return t.addEventListener("change", i), () => t.removeEventListener("change", i);
+	}, [e]), t;
+}
+function l({ theme: r = "auto", override: o, children: s }) {
+	let l = c(r), [u, d] = a(null), f = i(() => {
+		let t = { display: "contents" };
+		for (let [n, r] of Object.entries(o ?? {})) r != null && (t[e(n)] = r);
+		return t;
+	}, [o]);
+	return /* @__PURE__ */ t("div", {
+		ref: d,
+		"data-theme": l,
+		style: f,
+		children: u != null && /* @__PURE__ */ t(n, {
+			getContainer: () => u,
+			children: s
+		})
+	});
+}
+//#endregion
+export { l as LovelaceProvider, c as useResolvedTheme };
+
+//# sourceMappingURL=LovelaceProvider.js.map

package/dist/runtime/LovelaceProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LovelaceProvider.js","names":[],"sources":["../../src/runtime/LovelaceProvider.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { LovelaceOverridableToken } from \"../tokens/tokens.js\";\nimport { tokenName } from \"../tokens/tokens.js\";\n\nexport type LovelaceTheme = \"light\" | \"dark\" | \"auto\";\n\nexport interface LovelaceProviderProps {\n\t/** Color scheme. `auto` resolves via `prefers-color-scheme`. Defaults to `auto`. */\n\ttheme?: LovelaceTheme;\n\t/**\n\t * Type-safe token overrides applied to the provider root and cascaded to every\n\t * Lovelace component inside. Keys are overridable (semantic / component) tokens;\n\t * values are CSS values — typically a primitive reference via `t()` (e.g.\n\t * `{ \"font-size-body\": t(\"font-size-14\") }`) or a raw color.\n\t */\n\toverride?: Partial<Record<LovelaceOverridableToken, string>>;\n\tchildren?: ReactNode;\n}\n\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\nfunction readPrefersDark(): boolean {\n\tif (\n\t\ttypeof window === \"undefined\" ||\n\t\ttypeof window.matchMedia !== \"function\"\n\t) {\n\t\treturn false;\n\t}\n\treturn window.matchMedia(DARK_QUERY).matches;\n}\n\n/**\n * Resolves `auto` against `prefers-color-scheme`, updating live. Exported so a\n * consumer deciding something per-surface (e.g. a contrast guard on a token\n * override) resolves the scheme through the same code path that stamps\n * `data-theme` — two independent media queries would disagree wherever\n * `matchMedia` is unavailable, since each falls back to light on its own.\n */\nexport function useResolvedTheme(theme: LovelaceTheme): \"light\" | \"dark\" {\n\tconst [resolved, setResolved] = useState<\"light\" | \"dark\">(() => {\n\t\tif (theme !== \"auto\") {\n\t\t\treturn theme;\n\t\t}\n\t\treturn readPrefersDark() ? \"dark\" : \"light\";\n\t});\n\n\tuseEffect(() => {\n\t\tif (theme !== \"auto\") {\n\t\t\tsetResolved(theme);\n\t\t\treturn;\n\t\t}\n\t\tif (\n\t\t\ttypeof window === \"undefined\" ||\n\t\t\ttypeof window.matchMedia !== \"function\"\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t\tconst mql = window.matchMedia(DARK_QUERY);\n\t\tconst update = (matches: boolean) => {\n\t\t\tsetResolved(matches ? \"dark\" : \"light\");\n\t\t};\n\t\tupdate(mql.matches);\n\t\tconst listener = (e: MediaQueryListEvent) => update(e.matches);\n\t\tmql.addEventListener(\"change\", listener);\n\t\treturn () => mql.removeEventListener(\"change\", listener);\n\t}, [theme]);\n\n\treturn resolved;\n}\n\nexport function LovelaceProvider({\n\ttheme = \"auto\",\n\toverride,\n\tchildren,\n}: LovelaceProviderProps) {\n\tconst resolvedTheme = useResolvedTheme(theme);\n\t// Callback-ref into state (not useRef): attaching the element triggers a\n\t// re-render. Children are gated on it (below) so an overlay never mounts before\n\t// the themed portal container exists — a plain ref wouldn't re-render, and\n\t// deferring the portal to a second render would move an already-open overlay,\n\t// cancelling its entrance transition and stranding it at the `data-entering`\n\t// start state (opacity 0).\n\tconst [themeEl, setThemeEl] = useState<HTMLDivElement | null>(null);\n\n\tconst overrides = useMemo<CSSProperties>(() => {\n\t\t// `display: contents` removes this wrapper from layout so it doesn't\n\t\t// interfere with the parent's sizing — children render as if the wrapper\n\t\t// isn't there. Custom properties and data-attributes still cascade.\n\t\tconst vars: Record<string, string> = { display: \"contents\" };\n\t\tfor (const [name, value] of Object.entries(override ?? {})) {\n\t\t\tif (value != null) {\n\t\t\t\tvars[tokenName(name as LovelaceOverridableToken)] = value;\n\t\t\t}\n\t\t}\n\t\treturn vars as CSSProperties;\n\t}, [override]);\n\n\t// Component tokens are declared on `[data-theme]` (this wrapper) so their var()\n\t// chain re-evaluates in the active theme. React Aria overlays (Dialog/Sheet/\n\t// Tooltip) portal to `document.body` by default — outside this element — where\n\t// they'd lose those aliases. Default the portal container to the themed wrapper\n\t// so overlays stay inside the theme boundary; a consumer can still nest its own\n\t// `UNSAFE_PortalProvider` deeper to override (as the app scopes to the chat window).\n\t//\n\t// Children render only once `themeEl` is attached so any overlay open on first\n\t// mount portals straight into the themed container — never to `document.body`\n\t// and then moved (which would cancel its entrance transition). The callback ref's\n\t// setState runs in the commit phase (before paint), so the extra commit causes no\n\t// visible flash. It does mean an SSR render would emit an empty themed div until\n\t// hydration — fine today since every lovelace tree is client-mounted.\n\treturn (\n\t\t<div ref={setThemeEl} data-theme={resolvedTheme} style={overrides}>\n\t\t\t{themeEl != null && (\n\t\t\t\t<UNSAFE_PortalProvider getContainer={() => themeEl}>\n\t\t\t\t\t{children}\n\t\t\t\t</UNSAFE_PortalProvider>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAqBA,IAAM,IAAa;AAEnB,SAAS,IAA2B;AAOnC,QALC,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,aAEtB,KAED,OAAO,WAAW,EAAW,CAAC;;AAUtC,SAAgB,EAAiB,GAAwC;CACxE,IAAM,CAAC,GAAU,KAAe,QAC3B,MAAU,SAGP,GAAiB,GAAG,SAAS,UAF5B,EAGP;AAuBF,QArBA,QAAgB;AACf,MAAI,MAAU,QAAQ;AACrB,KAAY,EAAM;AAClB;;AAED,MACC,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,WAE7B;EAED,IAAM,IAAM,OAAO,WAAW,EAAW,EACnC,KAAU,MAAqB;AACpC,KAAY,IAAU,SAAS,QAAQ;;AAExC,IAAO,EAAI,QAAQ;EACnB,IAAM,KAAY,MAA2B,EAAO,EAAE,QAAQ;AAE9D,SADA,EAAI,iBAAiB,UAAU,EAAS,QAC3B,EAAI,oBAAoB,UAAU,EAAS;IACtD,CAAC,EAAM,CAAC,EAEJ;;AAGR,SAAgB,EAAiB,EAChC,WAAQ,QACR,aACA,eACyB;CACzB,IAAM,IAAgB,EAAiB,EAAM,EAOvC,CAAC,GAAS,KAAc,EAAgC,KAAK,EAE7D,IAAY,QAA6B;EAI9C,IAAM,IAA+B,EAAE,SAAS,YAAY;AAC5D,OAAK,IAAM,CAAC,GAAM,MAAU,OAAO,QAAQ,KAAY,EAAE,CAAC,CACzD,CAAI,KAAS,SACZ,EAAK,EAAU,EAAiC,IAAI;AAGtD,SAAO;IACL,CAAC,EAAS,CAAC;AAed,QACC,kBAAC,OAAD;EAAK,KAAK;EAAY,cAAY;EAAe,OAAO;YACtD,KAAW,QACX,kBAAC,GAAD;GAAuB,oBAAoB;GACzC;GACsB,CAAA;EAEpB,CAAA"}

package/dist/runtime/branding.d.ts

@@ -0,0 +1,133 @@
+/**
+ * How Ada applies a customer's brand colors — the canonical mapping from
+ * dashboard brand settings to Lovelace token overrides, plus the WCAG
+ * colorimetry that keeps the result legible.
+ *
+ * `createBrandOverrides` is the single source of truth: the embedded widget,
+ * the docs theme playground, and the theming documentation all describe the
+ * same function. The output is a plain token→value map intended for
+ * `<LovelaceProvider override={...}>`.
+ */
+import type { LovelaceOverridableToken } from "../tokens/tokens.js";
+/** Token overrides consumable by `LovelaceProvider`'s `override` prop. */
+export type BrandOverrides = Partial<Record<LovelaceOverridableToken, string>>;
+/** Text-size preset. `default` keeps Lovelace's own type scale. */
+export type BrandTextSize = "default" | "small" | "large";
+/** Corner-style preset. `round` keeps Lovelace's own radii. */
+export type BrandCornerStyle = "round" | "rectangular";
+/**
+ * Customer brand settings, as configured in the Ada dashboard.
+ *
+ * Every field is optional: an absent (or `null`) value means "not configured"
+ * and contributes no overrides, so `createBrandOverrides({}, scheme)` is `{}`.
+ */
+export interface BrandSettings {
+    /**
+     * The brand accent color. Painted unconditionally as the accent fill
+     * (`color-background-accent`); used as accent *text* (`color-content-accent`)
+     * only when it reads against the rendered surface.
+     */
+    tintColor?: string | null;
+    /**
+     * Advanced-colors override for text painted on the accent fill
+     * (`color-content-on-accent`). Ignored unless `advancedColorsEnabled`.
+     */
+    textOverAccentColor?: string | null;
+    /** Gate for `textOverAccentColor` and `headerTextColor`. */
+    advancedColorsEnabled?: boolean;
+    /** Gate for `headerColor`/`headerTextColor`. */
+    headerColorEnabled?: boolean;
+    /** Header background (`header-background`). */
+    headerColor?: string | null;
+    /**
+     * Header foreground (`header-content`). Ignored unless
+     * `advancedColorsEnabled`; repaired to black or white when it provably
+     * falls below the WCAG AA 4.5:1 floor against `headerColor`.
+     */
+    headerTextColor?: string | null;
+    /** Type-scale preset. Defaults to `default`. */
+    textSize?: BrandTextSize;
+    /** Corner-radius preset. Defaults to `round`. */
+    cornerStyle?: BrandCornerStyle;
+}
+/**
+ * Lovelace's `color-background-default` per scheme (`tokens.css`). The surface
+ * every accent-as-text legibility judgement is made against.
+ */
+export declare const LOVELACE_SURFACES: {
+    readonly light: "#ffffff";
+    readonly dark: "#181a1e";
+};
+/**
+ * WCAG contrast ratio between two hex colors, or `null` when either cannot be parsed.
+ *
+ * Exported so a caller that needs a different floor than this module's 3:1 — an AA
+ * 4.5:1 check on the default palette, say — reuses this colorimetry instead of writing
+ * a second copy. Judging *which* colors to compare is still the caller's job.
+ */
+export declare function contrastRatioBetween(a: string, b: string): number | null;
+/**
+ * Pick black or white for ordinary text painted on a customer-provided accent fill.
+ *
+ * One of the two always clears WCAG AA against a valid opaque hex color (their
+ * luminances sit at opposite ends of the scale). An unparseable color keeps the
+ * caller's existing fallback: CSS may understand a value this deliberately-small
+ * parser does not, and silently changing its text color without measuring it would
+ * only trade one unknown rendering for another.
+ */
+export declare function readableTextOnAccent(accent: string, fallback: string): string;
+/**
+ * Whether `color` is safe to use as accent foreground on `surface`.
+ *
+ * Kept when it clears the floor, and also kept when it is merely below the floor but
+ * still no worse than `fallback` — the color withholding would leave in place — so the
+ * guard can never trade a tint for a *less* legible replacement. A value it cannot
+ * parse fails closed: an unreadable `surface` means the judgement cannot be made, and
+ * an unparseable `fallback` only forfeits that second chance.
+ *
+ * Both clauses are evaluated against `surface` and nothing else, so a caller that
+ * paints the tint over a *composite* of itself and the surface gets a verdict that
+ * overstates the real contrast — and can therefore keep a tint that is genuinely worse
+ * than the fallback it declined. `FileDropZone`'s 15% accent wash is the one such
+ * caller today; see the theming spec's auto-contrast row for the measured shortfall.
+ */
+export declare function isLegibleAgainst(color: string, surface: string, fallback: string): boolean;
+/**
+ * Whether `color` is safe to use as accent text on `scheme`'s default Lovelace
+ * surface. The comparison fallback is `color-accent-500`, the value the token
+ * resolves to when the override is withheld.
+ */
+export declare function isLegibleOnSurface(color: string, scheme: "light" | "dark"): boolean;
+/**
+ * Map customer brand settings to Lovelace token overrides — exactly how the Ada
+ * widget applies your brand colors. Feed the result to
+ * `<LovelaceProvider override={...}>`.
+ *
+ * `scheme` is the *resolved* light/dark surface being painted (resolve `auto`
+ * via `useResolvedTheme`), not the configured theme — the accent-text contrast
+ * decision has to be made against the surface the label actually lands on.
+ *
+ * The mapping, in order:
+ *
+ * 1. `cornerStyle` / `textSize` re-point radius and typography tokens at
+ *    Lovelace primitives (`rectangular` flattens radii to 10px; `small`/`large`
+ *    shift the four-step type scale down/up one step).
+ * 2. `tintColor` paints `color-background-accent` unconditionally, and
+ *    `color-content-on-accent` becomes whichever of black or white contrasts
+ *    more with the tint. The tint is also used as standalone accent *text*
+ *    (`color-content-accent`) only when it reads on the rendered surface —
+ *    a tint near that background would render the label invisible.
+ * 3. With `advancedColorsEnabled`, `textOverAccentColor` replaces the derived
+ *    on-accent text color verbatim.
+ * 4. With `headerColorEnabled`, `headerColor` paints `header-background`.
+ *    The header foreground is `headerTextColor` (advanced colors only),
+ *    repaired to black or white when it measurably falls below the WCAG AA
+ *    4.5:1 floor against `headerColor`; without a configured foreground the
+ *    maximum-contrast black or white is derived from the background.
+ *
+ * Legibility guards measure hex colors only. Values the hex parser cannot read
+ * (named colors, `rgba()`, `var()`, …) pass through unrepaired where they are
+ * kept at all: repairing what cannot be measured would trade one unknown
+ * rendering for another.
+ */
+export declare function createBrandOverrides(settings: BrandSettings, scheme: "light" | "dark"): BrandOverrides;

package/dist/runtime/branding.js

@@ -0,0 +1,92 @@
+import { t as e } from "../tokens/tokens.js";
+//#region src/runtime/branding.ts
+var t = {
+	light: "#ffffff",
+	dark: "#181a1e"
+}, n = 3, r = 4.5, i = "#4e53d1";
+function a(e) {
+	let t = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());
+	if (!t) return null;
+	let n = t[1], r = n.length === 3 ? n.split("").map((e) => e + e).join("") : n;
+	return [
+		Number.parseInt(r.slice(0, 2), 16),
+		Number.parseInt(r.slice(2, 4), 16),
+		Number.parseInt(r.slice(4, 6), 16)
+	];
+}
+function o(e) {
+	let t = e / 255;
+	return t <= .03928 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+}
+function s([e, t, n]) {
+	return .2126 * o(e) + .7152 * o(t) + .0722 * o(n);
+}
+function c(e, t) {
+	let n = s(e), r = s(t);
+	return (Math.max(n, r) + .05) / (Math.min(n, r) + .05);
+}
+function l(e, t) {
+	let n = a(e), r = a(t);
+	return n && r ? c(n, r) : null;
+}
+function u(e, t) {
+	let n = l("#ffffff", e), r = l("#000000", e);
+	return n === null || r === null ? t : n >= r ? "#ffffff" : "#000000";
+}
+function d(e, t, r) {
+	let i = a(e), o = a(t);
+	if (!i || !o) return !1;
+	let s = c(i, o);
+	if (s >= n) return !0;
+	let l = a(r);
+	return l !== null && s >= c(l, o);
+}
+function f(e, n) {
+	return d(e, t[n], i);
+}
+function p(e, t) {
+	let n = l(e, t);
+	return n === null || n >= r ? t : u(e, t);
+}
+var m = {
+	default: {},
+	small: {
+		"font-size-caption": e("font-size-12"),
+		"line-height-caption": e("font-line-height-16"),
+		"font-size-body": e("font-size-14"),
+		"line-height-body": e("font-line-height-18"),
+		"font-size-title-small": e("font-size-16"),
+		"line-height-title-small": e("font-line-height-22"),
+		"font-size-title-large": e("font-size-18"),
+		"line-height-title-large": e("font-line-height-24")
+	},
+	large: {
+		"font-size-caption": e("font-size-16"),
+		"line-height-caption": e("font-line-height-22"),
+		"font-size-body": e("font-size-18"),
+		"line-height-body": e("font-line-height-24"),
+		"font-size-title-small": e("font-size-20"),
+		"line-height-title-small": e("font-line-height-26"),
+		"font-size-title-large": e("font-size-22"),
+		"line-height-title-large": e("font-line-height-28")
+	}
+}, h = {
+	round: {},
+	rectangular: {
+		"border-radius-message": e("border-radius-10"),
+		"border-radius-composer": e("border-radius-10"),
+		"border-radius-media-preview": e("border-radius-10"),
+		"border-radius-container": e("border-radius-10")
+	}
+};
+function g(e, t) {
+	let n = {
+		...h[e.cornerStyle ?? "round"],
+		...m[e.textSize ?? "default"]
+	};
+	return e.tintColor && (n["color-background-accent"] = e.tintColor, n["color-content-on-accent"] = u(e.tintColor, "#ffffff"), f(e.tintColor, t) && (n["color-content-accent"] = e.tintColor)), e.advancedColorsEnabled && e.textOverAccentColor && (n["color-content-on-accent"] = e.textOverAccentColor), e.headerColorEnabled && e.headerColor && (n["header-background"] = e.headerColor, e.advancedColorsEnabled && e.headerTextColor ? n["header-content"] = p(e.headerColor, e.headerTextColor) : l(e.headerColor, "#000000") !== null && (n["header-content"] = u(e.headerColor, "#000000"))), n;
+}
+//#endregion
+export { t as LOVELACE_SURFACES, l as contrastRatioBetween, g as createBrandOverrides, d as isLegibleAgainst, f as isLegibleOnSurface, u as readableTextOnAccent };
+
+//# sourceMappingURL=branding.js.map

package/dist/runtime/branding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"branding.js","names":[],"sources":["../../src/runtime/branding.ts"],"sourcesContent":["/**\n * How Ada applies a customer's brand colors — the canonical mapping from\n * dashboard brand settings to Lovelace token overrides, plus the WCAG\n * colorimetry that keeps the result legible.\n *\n * `createBrandOverrides` is the single source of truth: the embedded widget,\n * the docs theme playground, and the theming documentation all describe the\n * same function. The output is a plain token→value map intended for\n * `<LovelaceProvider override={...}>`.\n */\n\nimport type { LovelaceOverridableToken } from \"../tokens/tokens.js\";\nimport { t } from \"../tokens/tokens.js\";\n\n/** Token overrides consumable by `LovelaceProvider`'s `override` prop. */\nexport type BrandOverrides = Partial<Record<LovelaceOverridableToken, string>>;\n\n/** Text-size preset. `default` keeps Lovelace's own type scale. */\nexport type BrandTextSize = \"default\" | \"small\" | \"large\";\n\n/** Corner-style preset. `round` keeps Lovelace's own radii. */\nexport type BrandCornerStyle = \"round\" | \"rectangular\";\n\n/**\n * Customer brand settings, as configured in the Ada dashboard.\n *\n * Every field is optional: an absent (or `null`) value means \"not configured\"\n * and contributes no overrides, so `createBrandOverrides({}, scheme)` is `{}`.\n */\nexport interface BrandSettings {\n\t/**\n\t * The brand accent color. Painted unconditionally as the accent fill\n\t * (`color-background-accent`); used as accent *text* (`color-content-accent`)\n\t * only when it reads against the rendered surface.\n\t */\n\ttintColor?: string | null;\n\t/**\n\t * Advanced-colors override for text painted on the accent fill\n\t * (`color-content-on-accent`). Ignored unless `advancedColorsEnabled`.\n\t */\n\ttextOverAccentColor?: string | null;\n\t/** Gate for `textOverAccentColor` and `headerTextColor`. */\n\tadvancedColorsEnabled?: boolean;\n\t/** Gate for `headerColor`/`headerTextColor`. */\n\theaderColorEnabled?: boolean;\n\t/** Header background (`header-background`). */\n\theaderColor?: string | null;\n\t/**\n\t * Header foreground (`header-content`). Ignored unless\n\t * `advancedColorsEnabled`; repaired to black or white when it provably\n\t * falls below the WCAG AA 4.5:1 floor against `headerColor`.\n\t */\n\theaderTextColor?: string | null;\n\t/** Type-scale preset. Defaults to `default`. */\n\ttextSize?: BrandTextSize;\n\t/** Corner-radius preset. Defaults to `round`. */\n\tcornerStyle?: BrandCornerStyle;\n}\n\ntype Rgb = readonly [number, number, number];\n\n/**\n * Lovelace's `color-background-default` per scheme (`tokens.css`). The surface\n * every accent-as-text legibility judgement is made against.\n */\nexport const LOVELACE_SURFACES = {\n\tlight: \"#ffffff\",\n\tdark: \"#181a1e\",\n} as const satisfies Record<\"light\" | \"dark\", string>;\n\n/**\n * An anti-invisibility floor, not an AA claim: the tinted labels this guards render at\n * 13–16px, which WCAG 1.4.3 would hold to 4.5:1. Neither design system's own withheld\n * fallback clears 4.5 on both surfaces, and 4.5 would strip the brand color from most\n * mid-tone tints, so this catches only the vanishing case.\n */\nconst MIN_CONTRAST_RATIO = 3;\n\n/** WCAG AA floor for the normal-size title and controls painted in the header. */\nconst MIN_HEADER_CONTENT_CONTRAST = 4.5;\n\n/**\n * What `color-content-accent` resolves to when the override is withheld —\n * `color-accent-500` (tokens.css). A scheme-independent primitive, so it is only\n * 2.9:1 on the dark surface: withholding is not itself a legibility guarantee.\n */\nconst FALLBACK_ACCENT = \"#4e53d1\";\n\n/**\n * Hex only, deliberately: enumerating what we can measure keeps the guards\n * honest. CSS may understand values this parser does not; those pass through\n * the mapping byte-for-byte rather than being judged blind.\n */\nfunction parseHexColor(color: string): Rgb | null {\n\tconst match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim());\n\tif (!match) {\n\t\treturn null;\n\t}\n\n\tconst hex = match[1];\n\tconst full =\n\t\thex.length === 3\n\t\t\t? hex\n\t\t\t\t\t.split(\"\")\n\t\t\t\t\t.map((c) => c + c)\n\t\t\t\t\t.join(\"\")\n\t\t\t: hex;\n\n\treturn [\n\t\tNumber.parseInt(full.slice(0, 2), 16),\n\t\tNumber.parseInt(full.slice(2, 4), 16),\n\t\tNumber.parseInt(full.slice(4, 6), 16),\n\t] as const;\n}\n\nfunction channelLuminance(channel: number): number {\n\tconst srgb = channel / 255;\n\n\treturn srgb <= 0.03928 ? srgb / 12.92 : ((srgb + 0.055) / 1.055) ** 2.4;\n}\n\nfunction relativeLuminance([r, g, b]: Rgb): number {\n\treturn (\n\t\t0.2126 * channelLuminance(r) +\n\t\t0.7152 * channelLuminance(g) +\n\t\t0.0722 * channelLuminance(b)\n\t);\n}\n\nfunction contrastRatio(a: Rgb, b: Rgb): number {\n\tconst la = relativeLuminance(a);\n\tconst lb = relativeLuminance(b);\n\n\treturn (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);\n}\n\n/**\n * WCAG contrast ratio between two hex colors, or `null` when either cannot be parsed.\n *\n * Exported so a caller that needs a different floor than this module's 3:1 — an AA\n * 4.5:1 check on the default palette, say — reuses this colorimetry instead of writing\n * a second copy. Judging *which* colors to compare is still the caller's job.\n */\nexport function contrastRatioBetween(a: string, b: string): number | null {\n\tconst rgbA = parseHexColor(a);\n\tconst rgbB = parseHexColor(b);\n\n\treturn rgbA && rgbB ? contrastRatio(rgbA, rgbB) : null;\n}\n\n/**\n * Pick black or white for ordinary text painted on a customer-provided accent fill.\n *\n * One of the two always clears WCAG AA against a valid opaque hex color (their\n * luminances sit at opposite ends of the scale). An unparseable color keeps the\n * caller's existing fallback: CSS may understand a value this deliberately-small\n * parser does not, and silently changing its text color without measuring it would\n * only trade one unknown rendering for another.\n */\nexport function readableTextOnAccent(accent: string, fallback: string): string {\n\tconst whiteRatio = contrastRatioBetween(\"#ffffff\", accent);\n\tconst blackRatio = contrastRatioBetween(\"#000000\", accent);\n\tif (whiteRatio === null || blackRatio === null) {\n\t\treturn fallback;\n\t}\n\treturn whiteRatio >= blackRatio ? \"#ffffff\" : \"#000000\";\n}\n\n/**\n * Whether `color` is safe to use as accent foreground on `surface`.\n *\n * Kept when it clears the floor, and also kept when it is merely below the floor but\n * still no worse than `fallback` — the color withholding would leave in place — so the\n * guard can never trade a tint for a *less* legible replacement. A value it cannot\n * parse fails closed: an unreadable `surface` means the judgement cannot be made, and\n * an unparseable `fallback` only forfeits that second chance.\n *\n * Both clauses are evaluated against `surface` and nothing else, so a caller that\n * paints the tint over a *composite* of itself and the surface gets a verdict that\n * overstates the real contrast — and can therefore keep a tint that is genuinely worse\n * than the fallback it declined. `FileDropZone`'s 15% accent wash is the one such\n * caller today; see the theming spec's auto-contrast row for the measured shortfall.\n */\nexport function isLegibleAgainst(\n\tcolor: string,\n\tsurface: string,\n\tfallback: string,\n): boolean {\n\tconst rgb = parseHexColor(color);\n\tconst surfaceRgb = parseHexColor(surface);\n\tif (!rgb || !surfaceRgb) {\n\t\treturn false;\n\t}\n\n\tconst tintRatio = contrastRatio(rgb, surfaceRgb);\n\tif (tintRatio >= MIN_CONTRAST_RATIO) {\n\t\treturn true;\n\t}\n\n\tconst fallbackRgb = parseHexColor(fallback);\n\n\treturn (\n\t\tfallbackRgb !== null && tintRatio >= contrastRatio(fallbackRgb, surfaceRgb)\n\t);\n}\n\n/**\n * Whether `color` is safe to use as accent text on `scheme`'s default Lovelace\n * surface. The comparison fallback is `color-accent-500`, the value the token\n * resolves to when the override is withheld.\n */\nexport function isLegibleOnSurface(\n\tcolor: string,\n\tscheme: \"light\" | \"dark\",\n): boolean {\n\treturn isLegibleAgainst(color, LOVELACE_SURFACES[scheme], FALLBACK_ACCENT);\n}\n\n/**\n * Keep a customer's configured pair when it is readable, and repair only a\n * valid pair that we can prove falls below AA. Named colors, alpha colors and\n * other values outside the shared hex parser stay byte-for-byte unchanged: CSS\n * may understand them, but choosing a replacement without measuring them would\n * exchange one unknown rendering for another.\n */\nfunction resolveHeaderContentColor(\n\tbackground: string,\n\tcontent: string,\n): string {\n\tconst ratio = contrastRatioBetween(background, content);\n\tif (ratio === null || ratio >= MIN_HEADER_CONTENT_CONTRAST) {\n\t\treturn content;\n\t}\n\treturn readableTextOnAccent(background, content);\n}\n\n/**\n * Text-size and corner style are consumer concerns: Lovelace ships only its\n * default scale, so the mapping re-points the semantic/component tokens at the\n * right Lovelace *primitives* per preset (values stay owned by the token sheet;\n * only the mapping lives here). Only tokens that differ from the default are listed.\n */\nconst TEXT_SIZE_TOKEN_OVERRIDES = {\n\tdefault: {},\n\tsmall: {\n\t\t\"font-size-caption\": t(\"font-size-12\"),\n\t\t\"line-height-caption\": t(\"font-line-height-16\"),\n\t\t\"font-size-body\": t(\"font-size-14\"),\n\t\t\"line-height-body\": t(\"font-line-height-18\"),\n\t\t\"font-size-title-small\": t(\"font-size-16\"),\n\t\t\"line-height-title-small\": t(\"font-line-height-22\"),\n\t\t\"font-size-title-large\": t(\"font-size-18\"),\n\t\t\"line-height-title-large\": t(\"font-line-height-24\"),\n\t},\n\tlarge: {\n\t\t\"font-size-caption\": t(\"font-size-16\"),\n\t\t\"line-height-caption\": t(\"font-line-height-22\"),\n\t\t\"font-size-body\": t(\"font-size-18\"),\n\t\t\"line-height-body\": t(\"font-line-height-24\"),\n\t\t\"font-size-title-small\": t(\"font-size-20\"),\n\t\t\"line-height-title-small\": t(\"font-line-height-26\"),\n\t\t\"font-size-title-large\": t(\"font-size-22\"),\n\t\t\"line-height-title-large\": t(\"font-line-height-28\"),\n\t},\n} satisfies Record<BrandTextSize, BrandOverrides>;\n\nconst CORNER_STYLE_TOKEN_OVERRIDES = {\n\tround: {},\n\trectangular: {\n\t\t\"border-radius-message\": t(\"border-radius-10\"),\n\t\t\"border-radius-composer\": t(\"border-radius-10\"),\n\t\t\"border-radius-media-preview\": t(\"border-radius-10\"),\n\t\t\"border-radius-container\": t(\"border-radius-10\"),\n\t},\n} satisfies Record<BrandCornerStyle, BrandOverrides>;\n\n/**\n * Map customer brand settings to Lovelace token overrides — exactly how the Ada\n * widget applies your brand colors. Feed the result to\n * `<LovelaceProvider override={...}>`.\n *\n * `scheme` is the *resolved* light/dark surface being painted (resolve `auto`\n * via `useResolvedTheme`), not the configured theme — the accent-text contrast\n * decision has to be made against the surface the label actually lands on.\n *\n * The mapping, in order:\n *\n * 1. `cornerStyle` / `textSize` re-point radius and typography tokens at\n *    Lovelace primitives (`rectangular` flattens radii to 10px; `small`/`large`\n *    shift the four-step type scale down/up one step).\n * 2. `tintColor` paints `color-background-accent` unconditionally, and\n *    `color-content-on-accent` becomes whichever of black or white contrasts\n *    more with the tint. The tint is also used as standalone accent *text*\n *    (`color-content-accent`) only when it reads on the rendered surface —\n *    a tint near that background would render the label invisible.\n * 3. With `advancedColorsEnabled`, `textOverAccentColor` replaces the derived\n *    on-accent text color verbatim.\n * 4. With `headerColorEnabled`, `headerColor` paints `header-background`.\n *    The header foreground is `headerTextColor` (advanced colors only),\n *    repaired to black or white when it measurably falls below the WCAG AA\n *    4.5:1 floor against `headerColor`; without a configured foreground the\n *    maximum-contrast black or white is derived from the background.\n *\n * Legibility guards measure hex colors only. Values the hex parser cannot read\n * (named colors, `rgba()`, `var()`, …) pass through unrepaired where they are\n * kept at all: repairing what cannot be measured would trade one unknown\n * rendering for another.\n */\nexport function createBrandOverrides(\n\tsettings: BrandSettings,\n\tscheme: \"light\" | \"dark\",\n): BrandOverrides {\n\tconst overrides: BrandOverrides = {\n\t\t...CORNER_STYLE_TOKEN_OVERRIDES[settings.cornerStyle ?? \"round\"],\n\t\t...TEXT_SIZE_TOKEN_OVERRIDES[settings.textSize ?? \"default\"],\n\t};\n\tif (settings.tintColor) {\n\t\toverrides[\"color-background-accent\"] = settings.tintColor;\n\t\toverrides[\"color-content-on-accent\"] = readableTextOnAccent(\n\t\t\tsettings.tintColor,\n\t\t\t\"#ffffff\",\n\t\t);\n\t\t// Only as text when it reads on the surface being painted — a tint near that\n\t\t// background renders the label invisible, and nothing downstream can recover\n\t\t// it (`textOverAccentColor` only covers text *on* the accent fill).\n\t\tif (isLegibleOnSurface(settings.tintColor, scheme)) {\n\t\t\toverrides[\"color-content-accent\"] = settings.tintColor;\n\t\t}\n\t}\n\tif (settings.advancedColorsEnabled && settings.textOverAccentColor) {\n\t\toverrides[\"color-content-on-accent\"] = settings.textOverAccentColor;\n\t}\n\tif (settings.headerColorEnabled && settings.headerColor) {\n\t\toverrides[\"header-background\"] = settings.headerColor;\n\t\tif (settings.advancedColorsEnabled && settings.headerTextColor) {\n\t\t\toverrides[\"header-content\"] = resolveHeaderContentColor(\n\t\t\t\tsettings.headerColor,\n\t\t\t\tsettings.headerTextColor,\n\t\t\t);\n\t\t} else if (contrastRatioBetween(settings.headerColor, \"#000000\") !== null) {\n\t\t\t// The dashboard derives the header foreground from a configured background\n\t\t\t// unless advanced colours explicitly supply one. The parse guard above\n\t\t\t// makes this fallback unreachable, so select the maximum-contrast black\n\t\t\t// or white foreground without implying a color-scheme preference.\n\t\t\toverrides[\"header-content\"] = readableTextOnAccent(\n\t\t\t\tsettings.headerColor,\n\t\t\t\t\"#000000\",\n\t\t\t);\n\t\t}\n\t}\n\treturn overrides;\n}\n"],"mappings":"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"}

package/dist/runtime/index.d.ts

@@ -0,0 +1,2 @@
+export { type BrandCornerStyle, type BrandOverrides, type BrandSettings, type BrandTextSize, contrastRatioBetween, createBrandOverrides, isLegibleAgainst, isLegibleOnSurface, LOVELACE_SURFACES, readableTextOnAccent, } from "./branding.js";
+export { LovelaceProvider, type LovelaceProviderProps, type LovelaceTheme, useResolvedTheme, } from "./LovelaceProvider.js";