@sharadox/web-library 0.1.0 → 0.2.0

package/README.md

@@ -8,18 +8,19 @@ pnpm add @sharadox/web-library
 
 Import each piece by its path:
 
-| Topic                   | Pieces                                                                                                                                            |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `internationalization/` | `locale` (`isLocale`, `languageTag`, `openGraphLocale`, `Translated`), `translate`, `locale-redirect` (Accept-Language redirects for next.config) |
-| `search-engine/`        | `sitemap` (`localizedSitemap`), `robots`, `structured-data` (JSON-LD component)                                                                   |
-| `animation/`            | `reveal`, `scroll-word` (text that lights up word by word), `in-view`, `smooth-scroll`                                                            |
-| `pointer/`              | `spotlight` (pointer position as CSS variables)                                                                                                   |
-| `time/`                 | `zone-minute`, `format-time`, `sun-time` (sunrise and sunset), `sun-today` (React hook), `open-state`                                             |
-| `form/`                 | `rate-limit`, `bot-check` (honeypot and fill time), `field`                                                                                       |
-| `html/`                 | `escape`                                                                                                                                          |
-| `math/`                 | `radians`, `clamp`, `pseudo-random`                                                                                                               |
-| `test/`                 | `visual-snapshot` (Playwright: frozen clock, settled reveals)                                                                                     |
-| —                       | `class-name`                                                                                                                                      |
+| Topic                   | Pieces                                                                                                                                                                                                           |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `internationalization/` | `locale` (`isLocale`, `languageTag`, `openGraphLocale`, `Translated`), `translate`, `locale-redirect` (next.config redirects: remembered language, then Accept-Language), `locale-preference` (`rememberLocale`) |
+| `search-engine/`        | `sitemap` (`localizedSitemap`), `robots`, `structured-data` (JSON-LD component)                                                                                                                                  |
+| `animation/`            | `reveal`, `scroll-word` (text that lights up word by word), `in-view`, `count-up`, `smooth-scroll`                                                                                                               |
+| `style/`                | `definition` (`resolveStyle`), `style-script` (`<StyleScript>` for `<head>`: every style's CSS variables and the no-flash script), `use-style` (picker hook), `apply`, `style-sheet`                             |
+| `pointer/`              | `spotlight` (pointer position as CSS variables), `tilt` (3D tilt towards the pointer)                                                                                                                            |
+| `time/`                 | `zone-minute`, `format-time`, `sun-time` (sunrise and sunset), `sun-today` (React hook), `open-state`                                                                                                            |
+| `form/`                 | `rate-limit`, `bot-check` (honeypot and fill time), `field`                                                                                                                                                      |
+| `html/`                 | `escape`                                                                                                                                                                                                         |
+| `math/`                 | `radians`, `clamp`, `pseudo-random`                                                                                                                                                                              |
+| `test/`                 | `visual-snapshot` (Playwright: frozen clock, settled reveals)                                                                                                                                                    |
+| —                       | `class-name`                                                                                                                                                                                                     |
 
 ```tsx
 import { Reveal } from "@sharadox/web-library/animation/reveal";
@@ -28,6 +29,8 @@ import { translate } from "@sharadox/web-library/internationalization/translate"
 <Reveal delay={0.1}>{translate({ en: "Hello", pt: "Olá" }, locale)}</Reveal>;
 ```
 
+Styles are what other projects call themes: any number of dark and light styles, a default for each scheme, "system" as the default choice, and a manual choice remembered in browser storage.
+
 React components are client components (`"use client"`), accept `className`, and can be restyled per site. React (and, for `test/`, Playwright) are optional peer dependencies.
 
 ## Licence

package/distribution/animation/count-up/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Counts from 0 to `target` with an ease-out once `start` is true (for example from `useInView`). Jumps straight to
+ * the target when the visitor prefers reduced motion.
+ */
+export declare function useCountUp(target: number, start: boolean, durationMilliseconds?: number): number;
+//# sourceMappingURL=index.d.ts.map

package/distribution/animation/count-up/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/animation/count-up/index.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,oBAAoB,SAAO,GAAG,MAAM,CAmB9F"}

package/distribution/animation/count-up/index.js

@@ -0,0 +1,29 @@
+"use client";
+import { useEffect, useState } from "react";
+/**
+ * Counts from 0 to `target` with an ease-out once `start` is true (for example from `useInView`). Jumps straight to
+ * the target when the visitor prefers reduced motion.
+ */
+export function useCountUp(target, start, durationMilliseconds = 1600) {
+    const [value, setValue] = useState(0);
+    useEffect(() => {
+        if (!start)
+            return;
+        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            const frame = requestAnimationFrame(() => setValue(target));
+            return () => cancelAnimationFrame(frame);
+        }
+        const begin = performance.now();
+        let frame = 0;
+        const tick = (now) => {
+            const progress = Math.min(1, (now - begin) / durationMilliseconds);
+            setValue(Math.round(target * (1 - Math.pow(1 - progress, 3))));
+            if (progress < 1)
+                frame = requestAnimationFrame(tick);
+        };
+        frame = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(frame);
+    }, [target, start, durationMilliseconds]);
+    return value;
+}
+//# sourceMappingURL=index.js.map

package/distribution/animation/count-up/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../source/animation/count-up/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,KAAc,EAAE,oBAAoB,GAAG,IAAI;IACpF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,IAAI,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,EAAE,CAAC;YAClE,MAAM,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;YAC5D,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC;QACD,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC;QAChC,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,EAAE;YAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,oBAAoB,CAAC,CAAC;YACnE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/D,IAAI,QAAQ,GAAG,CAAC;gBAAE,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;QACxD,CAAC,CAAC;QACF,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;QACpC,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAC1C,OAAO,KAAK,CAAC;AACf,CAAC"}

package/distribution/internationalization/locale-preference/index.d.ts

@@ -0,0 +1,5 @@
+/** Cookie that remembers the language a visitor picked by hand; `localeRedirects` sends `/` to it. */
+export declare const LOCALE_COOKIE = "locale";
+/** Remembers a manual language choice for a year. Call it when the visitor switches language. */
+export declare function rememberLocale(locale: string, cookie?: string): void;
+//# sourceMappingURL=index.d.ts.map

package/distribution/internationalization/locale-preference/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/internationalization/locale-preference/index.ts"],"names":[],"mappings":"AAAA,sGAAsG;AACtG,eAAO,MAAM,aAAa,WAAW,CAAC;AAGtC,iGAAiG;AACjG,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAE,MAAsB,GAAG,IAAI,CAGnF"}

package/distribution/internationalization/locale-preference/index.js

@@ -0,0 +1,9 @@
+/** Cookie that remembers the language a visitor picked by hand; `localeRedirects` sends `/` to it. */
+export const LOCALE_COOKIE = "locale";
+const ONE_YEAR = 60 * 60 * 24 * 365;
+/** Remembers a manual language choice for a year. Call it when the visitor switches language. */
+export function rememberLocale(locale, cookie = LOCALE_COOKIE) {
+    const secure = location.protocol === "https:" ? "; secure" : "";
+    document.cookie = `${cookie}=${encodeURIComponent(locale)}; path=/; max-age=${ONE_YEAR}; samesite=lax${secure}`;
+}
+//# sourceMappingURL=index.js.map

package/distribution/internationalization/locale-preference/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../source/internationalization/locale-preference/index.ts"],"names":[],"mappings":"AAAA,sGAAsG;AACtG,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC;AACtC,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;AAEpC,iGAAiG;AACjG,MAAM,UAAU,cAAc,CAAC,MAAc,EAAE,SAAiB,aAAa;IAC3E,MAAM,MAAM,GAAG,QAAQ,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,QAAQ,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,kBAAkB,CAAC,MAAM,CAAC,qBAAqB,QAAQ,iBAAiB,MAAM,EAAE,CAAC;AAClH,CAAC"}

package/distribution/internationalization/locale-redirect/index.d.ts

@@ -1,7 +1,8 @@
 import type { LocaleRedirect } from "@sharadox/web-library/internationalization/locale-redirect/type";
 /**
- * Redirects for next.config `redirects()`: `/` goes to the visitor's language when their browser asks for one of
- * the published locales first (Accept-Language), otherwise to `/<defaultLocale>`.
+ * Redirects for next.config `redirects()`. `/` goes to, in order: the language the visitor picked before (the
+ * `locale` cookie set by `rememberLocale`), the language their browser asks for first (Accept-Language) when it is
+ * published, and otherwise `/<defaultLocale>`.
  */
-export declare function localeRedirects(locales: readonly string[], defaultLocale: string): LocaleRedirect[];
+export declare function localeRedirects(locales: readonly string[], defaultLocale: string, cookie?: string): LocaleRedirect[];
 //# sourceMappingURL=index.d.ts.map

package/distribution/internationalization/locale-redirect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/internationalization/locale-redirect/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iEAAiE,CAAC;AAEtG;;;GAGG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,EAAE,aAAa,EAAE,MAAM,GAAG,cAAc,EAAE,CAUnG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/internationalization/locale-redirect/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iEAAiE,CAAC;AAEtG;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,aAAa,EAAE,MAAM,EACrB,MAAM,GAAE,MAAsB,GAC7B,cAAc,EAAE,CAgBlB"}

package/distribution/internationalization/locale-redirect/index.js

@@ -1,8 +1,16 @@
+import { LOCALE_COOKIE } from "@sharadox/web-library/internationalization/locale-preference";
 /**
- * Redirects for next.config `redirects()`: `/` goes to the visitor's language when their browser asks for one of
- * the published locales first (Accept-Language), otherwise to `/<defaultLocale>`.
+ * Redirects for next.config `redirects()`. `/` goes to, in order: the language the visitor picked before (the
+ * `locale` cookie set by `rememberLocale`), the language their browser asks for first (Accept-Language) when it is
+ * published, and otherwise `/<defaultLocale>`.
  */
-export function localeRedirects(locales, defaultLocale) {
+export function localeRedirects(locales, defaultLocale, cookie = LOCALE_COOKIE) {
+    const remembered = locales.map((locale) => ({
+        source: "/",
+        has: [{ type: "cookie", key: cookie, value: locale }],
+        destination: `/${locale}`,
+        permanent: false,
+    }));
     const preferred = locales
         .filter((locale) => locale !== defaultLocale)
         .map((locale) => ({
@@ -11,6 +19,6 @@ export function localeRedirects(locales, defaultLocale) {
         destination: `/${locale}`,
         permanent: false,
     }));
-    return [...preferred, { source: "/", destination: `/${defaultLocale}`, permanent: false }];
+    return [...remembered, ...preferred, { source: "/", destination: `/${defaultLocale}`, permanent: false }];
 }
 //# sourceMappingURL=index.js.map

package/distribution/internationalization/locale-redirect/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../source/internationalization/locale-redirect/index.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,OAA0B,EAAE,aAAqB;IAC/E,MAAM,SAAS,GAAqB,OAAO;SACxC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,KAAK,aAAa,CAAC;SAC5C,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAChB,MAAM,EAAE,GAAG;QACX,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;QACvE,WAAW,EAAE,IAAI,MAAM,EAAE;QACzB,SAAS,EAAE,KAAK;KACjB,CAAC,CAAC,CAAC;IACN,OAAO,CAAC,GAAG,SAAS,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,aAAa,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;AAC7F,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../source/internationalization/locale-redirect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,8DAA8D,CAAC;AAG7F;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAC7B,OAA0B,EAC1B,aAAqB,EACrB,SAAiB,aAAa;IAE9B,MAAM,UAAU,GAAqB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC5D,MAAM,EAAE,GAAG;QACX,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QACrD,WAAW,EAAE,IAAI,MAAM,EAAE;QACzB,SAAS,EAAE,KAAK;KACjB,CAAC,CAAC,CAAC;IACJ,MAAM,SAAS,GAAqB,OAAO;SACxC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,KAAK,aAAa,CAAC;SAC5C,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAChB,MAAM,EAAE,GAAG;QACX,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;QACvE,WAAW,EAAE,IAAI,MAAM,EAAE;QACzB,SAAS,EAAE,KAAK;KACjB,CAAC,CAAC,CAAC;IACN,OAAO,CAAC,GAAG,UAAU,EAAE,GAAG,SAAS,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,aAAa,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;AAC5G,CAAC"}

package/distribution/internationalization/locale-redirect/type.d.ts

@@ -4,7 +4,7 @@ export interface LocaleRedirect {
     destination: string;
     permanent: false;
     has?: {
-        type: "header";
+        type: "header" | "cookie";
         key: string;
         value: string;
     }[];

package/distribution/internationalization/locale-redirect/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../source/internationalization/locale-redirect/type.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,KAAK,CAAC;IACjB,GAAG,CAAC,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACxD"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../source/internationalization/locale-redirect/type.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,KAAK,CAAC;IACjB,GAAG,CAAC,EAAE;QAAE,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACnE"}

package/distribution/pointer/tilt/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Tilts an element towards the pointer: sets `--tilt-x` and `--tilt-y` (degrees, up to `maximum`) while the pointer
+ * is over it and eases back to 0 when it leaves. Use them in CSS, for example
+ * `transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))`. Off on touch screens.
+ */
+export declare function useTilt<Target extends HTMLElement>(maximum?: number): import("react").RefObject<Target | null>;
+//# sourceMappingURL=index.d.ts.map

package/distribution/pointer/tilt/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/pointer/tilt/index.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,MAAM,SAAS,WAAW,EAAE,OAAO,SAAI,4CAwB9D"}

package/distribution/pointer/tilt/index.js

@@ -0,0 +1,34 @@
+"use client";
+import { useEffect, useRef } from "react";
+/**
+ * Tilts an element towards the pointer: sets `--tilt-x` and `--tilt-y` (degrees, up to `maximum`) while the pointer
+ * is over it and eases back to 0 when it leaves. Use them in CSS, for example
+ * `transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))`. Off on touch screens.
+ */
+export function useTilt(maximum = 8) {
+    const reference = useRef(null);
+    useEffect(() => {
+        const element = reference.current;
+        if (!element || !window.matchMedia("(pointer: fine)").matches)
+            return;
+        const move = (event) => {
+            const bounds = element.getBoundingClientRect();
+            const x = (event.clientX - bounds.left) / bounds.width - 0.5;
+            const y = (event.clientY - bounds.top) / bounds.height - 0.5;
+            element.style.setProperty("--tilt-x", `${(-y * maximum * 2).toFixed(2)}deg`);
+            element.style.setProperty("--tilt-y", `${(x * maximum * 2).toFixed(2)}deg`);
+        };
+        const leave = () => {
+            element.style.setProperty("--tilt-x", "0deg");
+            element.style.setProperty("--tilt-y", "0deg");
+        };
+        element.addEventListener("pointermove", move);
+        element.addEventListener("pointerleave", leave);
+        return () => {
+            element.removeEventListener("pointermove", move);
+            element.removeEventListener("pointerleave", leave);
+        };
+    }, [maximum]);
+    return reference;
+}
+//# sourceMappingURL=index.js.map

package/distribution/pointer/tilt/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../source/pointer/tilt/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAA6B,OAAO,GAAG,CAAC;IAC7D,MAAM,SAAS,GAAG,MAAM,CAAS,IAAI,CAAC,CAAC;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,OAAO;YAAE,OAAO;QACtE,MAAM,IAAI,GAAG,CAAC,KAAmB,EAAE,EAAE;YACnC,MAAM,MAAM,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;YAC/C,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC;YAC7D,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC;YAC7D,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;YAC7E,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAC9E,CAAC,CAAC;QACF,MAAM,KAAK,GAAG,GAAG,EAAE;YACjB,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YAC9C,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;QAChD,CAAC,CAAC;QACF,OAAO,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;QAC9C,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;YACjD,OAAO,CAAC,mBAAmB,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/distribution/style/apply/index.d.ts

@@ -0,0 +1,11 @@
+import type { StyleConfiguration } from "@sharadox/web-library/style/definition/type";
+import type { StyleApplyData } from "@sharadox/web-library/style/apply/type";
+/** The configuration reduced to what `applyStyle` needs. */
+export declare function styleApplyData(configuration: StyleConfiguration): StyleApplyData;
+/**
+ * Writes the style to `<html>`: `data-style` (the style in use), `data-style-choice` and `color-scheme`.
+ * Without a `choice` it reads the remembered one (or "system"). It is self-contained on purpose: the inline
+ * script in `<head>` embeds its source, so the page never shows the wrong style before React loads.
+ */
+export declare function applyStyle(data: StyleApplyData, choice?: string): void;
+//# sourceMappingURL=index.d.ts.map

package/distribution/style/apply/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/style/apply/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAE7E,4DAA4D;AAC5D,wBAAgB,cAAc,CAAC,aAAa,EAAE,kBAAkB,GAAG,cAAc,CAOhF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAyBtE"}

package/distribution/style/apply/index.js

@@ -0,0 +1,46 @@
+/** The configuration reduced to what `applyStyle` needs. */
+export function styleApplyData(configuration) {
+    return {
+        storageKey: configuration.storageKey,
+        schemes: Object.fromEntries(configuration.styles.map((style) => [style.name, style.scheme])),
+        defaults: { ...configuration.defaults },
+        fallback: configuration.fallback,
+    };
+}
+/**
+ * Writes the style to `<html>`: `data-style` (the style in use), `data-style-choice` and `color-scheme`.
+ * Without a `choice` it reads the remembered one (or "system"). It is self-contained on purpose: the inline
+ * script in `<head>` embeds its source, so the page never shows the wrong style before React loads.
+ */
+export function applyStyle(data, choice) {
+    let wanted = choice;
+    if (wanted === undefined) {
+        try {
+            wanted = localStorage.getItem(data.storageKey) || "system";
+        }
+        catch {
+            wanted = "system";
+        }
+    }
+    if (wanted !== "system" && !data.schemes[wanted])
+        wanted = "system";
+    let name = wanted;
+    if (wanted === "system") {
+        let scheme = data.fallback;
+        try {
+            if (matchMedia("(prefers-color-scheme: light)").matches)
+                scheme = "light";
+            else if (matchMedia("(prefers-color-scheme: dark)").matches)
+                scheme = "dark";
+        }
+        catch {
+            // No media queries: keep the fallback.
+        }
+        name = data.defaults[scheme];
+    }
+    const root = document.documentElement;
+    root.setAttribute("data-style", name);
+    root.setAttribute("data-style-choice", wanted);
+    root.style.colorScheme = data.schemes[name] ?? data.fallback;
+}
+//# sourceMappingURL=index.js.map

package/distribution/style/apply/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../source/style/apply/index.ts"],"names":[],"mappings":"AAGA,4DAA4D;AAC5D,MAAM,UAAU,cAAc,CAAC,aAAiC;IAC9D,OAAO;QACL,UAAU,EAAE,aAAa,CAAC,UAAU;QACpC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;QAC5F,QAAQ,EAAE,EAAE,GAAG,aAAa,CAAC,QAAQ,EAAE;QACvC,QAAQ,EAAE,aAAa,CAAC,QAAQ;KACjC,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,IAAoB,EAAE,MAAe;IAC9D,IAAI,MAAM,GAAG,MAAM,CAAC;IACpB,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,IAAI,CAAC;YACH,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,QAAQ,CAAC;QAC7D,CAAC;QAAC,MAAM,CAAC;YACP,MAAM,GAAG,QAAQ,CAAC;QACpB,CAAC;IACH,CAAC;IACD,IAAI,MAAM,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;QAAE,MAAM,GAAG,QAAQ,CAAC;IACpE,IAAI,IAAI,GAAG,MAAM,CAAC;IAClB,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;QACxB,IAAI,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC3B,IAAI,CAAC;YACH,IAAI,UAAU,CAAC,+BAA+B,CAAC,CAAC,OAAO;gBAAE,MAAM,GAAG,OAAO,CAAC;iBACrE,IAAI,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO;gBAAE,MAAM,GAAG,MAAM,CAAC;QAC/E,CAAC;QAAC,MAAM,CAAC;YACP,uCAAuC;QACzC,CAAC;QACD,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC;IACD,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;IACtC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IACtC,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;IAC/C,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;AAC/D,CAAC"}

package/distribution/style/apply/type.d.ts

@@ -0,0 +1,10 @@
+import type { ColorScheme } from "@sharadox/web-library/style/definition/type";
+/** The plain data `applyStyle` needs; it is serialized into the inline script, so it holds no functions. */
+export interface StyleApplyData {
+    storageKey: string;
+    /** Style name → scheme. */
+    schemes: Record<string, ColorScheme>;
+    defaults: Record<ColorScheme, string>;
+    fallback: ColorScheme;
+}
+//# sourceMappingURL=type.d.ts.map

package/distribution/style/apply/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../source/style/apply/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAE/E,4GAA4G;AAC5G,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACtC,QAAQ,EAAE,WAAW,CAAC;CACvB"}

package/distribution/style/apply/type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=type.js.map

package/distribution/style/apply/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../source/style/apply/type.ts"],"names":[],"mappings":""}

package/distribution/style/definition/index.d.ts

@@ -0,0 +1,12 @@
+import type { ColorScheme, StyleConfiguration, StyleDefinition } from "@sharadox/web-library/style/definition/type";
+/** The choice that follows the device's light or dark setting. It is the default and is never stored. */
+export declare const SYSTEM_STYLE = "system";
+/** `<html>` attribute holding the style in use, for CSS (`[data-style="black"]`). */
+export declare const STYLE_ATTRIBUTE = "data-style";
+/** `<html>` attribute holding the visitor's choice ("system" or a style name), for the picker. */
+export declare const STYLE_CHOICE_ATTRIBUTE = "data-style-choice";
+/** Finds a style by name. */
+export declare function findStyle(configuration: StyleConfiguration, name: string): StyleDefinition | undefined;
+/** The style shown for a choice: the chosen style, or for "system" (and unknown names) the default for the scheme. */
+export declare function resolveStyle(configuration: StyleConfiguration, choice: string, systemScheme: ColorScheme | undefined): StyleDefinition;
+//# sourceMappingURL=index.d.ts.map

package/distribution/style/definition/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/style/definition/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAEpH,yGAAyG;AACzG,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,qFAAqF;AACrF,eAAO,MAAM,eAAe,eAAe,CAAC;AAC5C,kGAAkG;AAClG,eAAO,MAAM,sBAAsB,sBAAsB,CAAC;AAE1D,6BAA6B;AAC7B,wBAAgB,SAAS,CAAC,aAAa,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS,CAEtG;AAED,sHAAsH;AACtH,wBAAgB,YAAY,CAC1B,aAAa,EAAE,kBAAkB,EACjC,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,WAAW,GAAG,SAAS,GACpC,eAAe,CASjB"}

package/distribution/style/definition/index.js

@@ -0,0 +1,21 @@
+/** The choice that follows the device's light or dark setting. It is the default and is never stored. */
+export const SYSTEM_STYLE = "system";
+/** `<html>` attribute holding the style in use, for CSS (`[data-style="black"]`). */
+export const STYLE_ATTRIBUTE = "data-style";
+/** `<html>` attribute holding the visitor's choice ("system" or a style name), for the picker. */
+export const STYLE_CHOICE_ATTRIBUTE = "data-style-choice";
+/** Finds a style by name. */
+export function findStyle(configuration, name) {
+    return configuration.styles.find((style) => style.name === name);
+}
+/** The style shown for a choice: the chosen style, or for "system" (and unknown names) the default for the scheme. */
+export function resolveStyle(configuration, choice, systemScheme) {
+    const chosen = choice === SYSTEM_STYLE ? undefined : findStyle(configuration, choice);
+    if (chosen)
+        return chosen;
+    const style = findStyle(configuration, configuration.defaults[systemScheme ?? configuration.fallback]);
+    if (!style)
+        throw new Error(`style configuration: no style named "${configuration.defaults[systemScheme ?? configuration.fallback]}"`);
+    return style;
+}
+//# sourceMappingURL=index.js.map

package/distribution/style/definition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../source/style/definition/index.ts"],"names":[],"mappings":"AAEA,yGAAyG;AACzG,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC;AACrC,qFAAqF;AACrF,MAAM,CAAC,MAAM,eAAe,GAAG,YAAY,CAAC;AAC5C,kGAAkG;AAClG,MAAM,CAAC,MAAM,sBAAsB,GAAG,mBAAmB,CAAC;AAE1D,6BAA6B;AAC7B,MAAM,UAAU,SAAS,CAAC,aAAiC,EAAE,IAAY;IACvE,OAAO,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;AACnE,CAAC;AAED,sHAAsH;AACtH,MAAM,UAAU,YAAY,CAC1B,aAAiC,EACjC,MAAc,EACd,YAAqC;IAErC,MAAM,MAAM,GAAG,MAAM,KAAK,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACtF,IAAI,MAAM;QAAE,OAAO,MAAM,CAAC;IAC1B,MAAM,KAAK,GAAG,SAAS,CAAC,aAAa,EAAE,aAAa,CAAC,QAAQ,CAAC,YAAY,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;IACvG,IAAI,CAAC,KAAK;QACR,MAAM,IAAI,KAAK,CACb,wCAAwC,aAAa,CAAC,QAAQ,CAAC,YAAY,IAAI,aAAa,CAAC,QAAQ,CAAC,GAAG,CAC1G,CAAC;IACJ,OAAO,KAAK,CAAC;AACf,CAAC"}

package/distribution/style/definition/type.d.ts

@@ -0,0 +1,24 @@
+/** Whether a style is dark or light. The system preference (`prefers-color-scheme`) is one of these. */
+export type ColorScheme = "dark" | "light";
+/** One style (what other projects call a theme): a name, its scheme and the CSS custom properties it sets. */
+export interface StyleDefinition {
+    /** Lower-case identifier, stored and written to `<html data-style>`, for example `black`. */
+    name: string;
+    scheme: ColorScheme;
+    /** CSS custom properties without the leading dashes, for example `{ background: "#000" }` → `--background`. */
+    palette: Readonly<Record<string, string>>;
+}
+/** Every style a site offers, and how one is picked when the visitor hasn't chosen. */
+export interface StyleConfiguration {
+    /** Any number of dark and light styles. */
+    styles: readonly StyleDefinition[];
+    /** The style used for each system scheme when the choice is "system". */
+    defaults: Readonly<Record<ColorScheme, string>>;
+    /** The scheme used when the system preference is unknown, and before scripts run. */
+    fallback: ColorScheme;
+    /** Browser storage key that remembers a manual choice. */
+    storageKey: string;
+}
+/** What the visitor picked: "system" (follow the device) or a style name. */
+export type StyleChoice = string;
+//# sourceMappingURL=type.d.ts.map

package/distribution/style/definition/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../source/style/definition/type.ts"],"names":[],"mappings":"AAAA,wGAAwG;AACxG,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3C,8GAA8G;AAC9G,MAAM,WAAW,eAAe;IAC9B,6FAA6F;IAC7F,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;IACpB,+GAA+G;IAC/G,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CAC3C;AAED,uFAAuF;AACvF,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,MAAM,EAAE,SAAS,eAAe,EAAE,CAAC;IACnC,yEAAyE;IACzE,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAChD,qFAAqF;IACrF,QAAQ,EAAE,WAAW,CAAC;IACtB,0DAA0D;IAC1D,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,6EAA6E;AAC7E,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC"}

package/distribution/style/definition/type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=type.js.map

package/distribution/style/definition/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../source/style/definition/type.ts"],"names":[],"mappings":""}

package/distribution/style/style-script/index.d.ts

@@ -0,0 +1,10 @@
+import type { StyleConfiguration } from "@sharadox/web-library/style/definition/type";
+import type { StyleScriptProperties } from "@sharadox/web-library/style/style-script/type";
+/** The inline script: applies the remembered style, then follows the device and other tabs while the page is open. */
+export declare function styleScript(configuration: StyleConfiguration): string;
+/**
+ * Put in `<head>` (and add `suppressHydrationWarning` to `<html>`): every style's CSS custom properties, and the
+ * script that picks the style before the first paint.
+ */
+export declare function StyleScript({ configuration }: StyleScriptProperties): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/distribution/style/style-script/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/style/style-script/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACtF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AAE3F,sHAAsH;AACtH,wBAAgB,WAAW,CAAC,aAAa,EAAE,kBAAkB,GAAG,MAAM,CAGrE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,aAAa,EAAE,EAAE,qBAAqB,+BAOnE"}

package/distribution/style/style-script/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { applyStyle, styleApplyData } from "@sharadox/web-library/style/apply";
+import { styleSheet } from "@sharadox/web-library/style/style-sheet";
+/** The inline script: applies the remembered style, then follows the device and other tabs while the page is open. */
+export function styleScript(configuration) {
+    const data = JSON.stringify(styleApplyData(configuration)).replace(/</g, "\\u003c");
+    return `(function(){var apply=${applyStyle.toString()};var data=${data};apply(data);try{matchMedia("(prefers-color-scheme: light)").addEventListener("change",function(){apply(data)});addEventListener("storage",function(event){if(event.key===data.storageKey)apply(data)})}catch(error){}})();`;
+}
+/**
+ * Put in `<head>` (and add `suppressHydrationWarning` to `<html>`): every style's CSS custom properties, and the
+ * script that picks the style before the first paint.
+ */
+export function StyleScript({ configuration }) {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { dangerouslySetInnerHTML: { __html: styleSheet(configuration) } }), _jsx("script", { dangerouslySetInnerHTML: { __html: styleScript(configuration) } })] }));
+}
+//# sourceMappingURL=index.js.map

package/distribution/style/style-script/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../source/style/style-script/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AAIrE,sHAAsH;AACtH,MAAM,UAAU,WAAW,CAAC,aAAiC;IAC3D,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACpF,OAAO,yBAAyB,UAAU,CAAC,QAAQ,EAAE,aAAa,IAAI,6NAA6N,CAAC;AACtS,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,aAAa,EAAyB;IAClE,OAAO,CACL,8BACE,gBAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,aAAa,CAAC,EAAE,GAAI,EACzE,iBAAQ,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,CAAC,aAAa,CAAC,EAAE,GAAI,IAC1E,CACJ,CAAC;AACJ,CAAC"}

package/distribution/style/style-script/type.d.ts

@@ -0,0 +1,5 @@
+import type { StyleConfiguration } from "@sharadox/web-library/style/definition/type";
+export interface StyleScriptProperties {
+    configuration: StyleConfiguration;
+}
+//# sourceMappingURL=type.d.ts.map

package/distribution/style/style-script/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../source/style/style-script/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AAEtF,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,kBAAkB,CAAC;CACnC"}

package/distribution/style/style-script/type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=type.js.map

package/distribution/style/style-script/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../source/style/style-script/type.ts"],"names":[],"mappings":""}

package/distribution/style/style-sheet/index.d.ts

@@ -0,0 +1,7 @@
+import type { StyleConfiguration } from "@sharadox/web-library/style/definition/type";
+/**
+ * The CSS for every style, from the configuration alone: `[data-style="<name>"]` for each style, plus a fallback for
+ * the moment before the inline script runs (or when scripts are off) that still follows the device's scheme.
+ */
+export declare function styleSheet(configuration: StyleConfiguration): string;
+//# sourceMappingURL=index.d.ts.map

package/distribution/style/style-sheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/style/style-sheet/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAmB,MAAM,6CAA6C,CAAC;AAOvG;;;GAGG;AACH,wBAAgB,UAAU,CAAC,aAAa,EAAE,kBAAkB,GAAG,MAAM,CAUpE"}

package/distribution/style/style-sheet/index.js

@@ -0,0 +1,19 @@
+import { findStyle } from "@sharadox/web-library/style/definition";
+const declarations = (style) => [...Object.entries(style.palette).map(([key, value]) => `--${key}:${value}`), `color-scheme:${style.scheme}`].join(";");
+/**
+ * The CSS for every style, from the configuration alone: `[data-style="<name>"]` for each style, plus a fallback for
+ * the moment before the inline script runs (or when scripts are off) that still follows the device's scheme.
+ */
+export function styleSheet(configuration) {
+    const fallback = findStyle(configuration, configuration.defaults[configuration.fallback]);
+    const other = configuration.fallback === "dark" ? "light" : "dark";
+    const otherDefault = findStyle(configuration, configuration.defaults[other]);
+    if (!fallback || !otherDefault)
+        throw new Error("style configuration: a default style is missing");
+    return [
+        `:root{${declarations(fallback)}}`,
+        `@media (prefers-color-scheme:${other}){:root:not([data-style]){${declarations(otherDefault)}}}`,
+        ...configuration.styles.map((style) => `:root[data-style="${style.name}"]{${declarations(style)}}`),
+    ].join("\n");
+}
+//# sourceMappingURL=index.js.map

package/distribution/style/style-sheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../source/style/style-sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAGnE,MAAM,YAAY,GAAG,CAAC,KAAsB,EAAE,EAAE,CAC9C,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC,EAAE,gBAAgB,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAChH,GAAG,CACJ,CAAC;AAEJ;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,aAAiC;IAC1D,MAAM,QAAQ,GAAG,SAAS,CAAC,aAAa,EAAE,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1F,MAAM,KAAK,GAAG,aAAa,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IACnE,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAC7E,IAAI,CAAC,QAAQ,IAAI,CAAC,YAAY;QAAE,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;IACnG,OAAO;QACL,SAAS,YAAY,CAAC,QAAQ,CAAC,GAAG;QAClC,gCAAgC,KAAK,6BAA6B,YAAY,CAAC,YAAY,CAAC,IAAI;QAChG,GAAG,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,qBAAqB,KAAK,CAAC,IAAI,MAAM,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC;KACpG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACf,CAAC"}

package/distribution/style/use-style/index.d.ts

@@ -0,0 +1,5 @@
+import type { StyleConfiguration } from "@sharadox/web-library/style/definition/type";
+import type { StyleState } from "@sharadox/web-library/style/use-style/type";
+/** The visitor's style choice and the style in use, kept in sync with `<html>`; `choose` remembers a new choice. */
+export declare function useStyle(configuration: StyleConfiguration): StyleState;
+//# sourceMappingURL=index.d.ts.map

package/distribution/style/use-style/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/style/use-style/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACtF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AAa7E,oHAAoH;AACpH,wBAAgB,QAAQ,CAAC,aAAa,EAAE,kBAAkB,GAAG,UAAU,CAkBtE"}

package/distribution/style/use-style/index.js

@@ -0,0 +1,34 @@
+"use client";
+import { useCallback, useMemo, useSyncExternalStore } from "react";
+import { applyStyle, styleApplyData } from "@sharadox/web-library/style/apply";
+import { STYLE_ATTRIBUTE, STYLE_CHOICE_ATTRIBUTE, SYSTEM_STYLE } from "@sharadox/web-library/style/definition";
+const subscribe = (notify) => {
+    const observer = new MutationObserver(notify);
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: [STYLE_ATTRIBUTE, STYLE_CHOICE_ATTRIBUTE],
+    });
+    return () => observer.disconnect();
+};
+const read = (attribute, fallback) => () => document.documentElement.getAttribute(attribute) ?? fallback;
+/** The visitor's style choice and the style in use, kept in sync with `<html>`; `choose` remembers a new choice. */
+export function useStyle(configuration) {
+    const fallbackStyle = configuration.defaults[configuration.fallback];
+    const choice = useSyncExternalStore(subscribe, read(STYLE_CHOICE_ATTRIBUTE, SYSTEM_STYLE), () => SYSTEM_STYLE);
+    const style = useSyncExternalStore(subscribe, read(STYLE_ATTRIBUTE, fallbackStyle), () => fallbackStyle);
+    const data = useMemo(() => styleApplyData(configuration), [configuration]);
+    const choose = useCallback((next) => {
+        try {
+            if (next === SYSTEM_STYLE)
+                localStorage.removeItem(data.storageKey);
+            else
+                localStorage.setItem(data.storageKey, next);
+        }
+        catch {
+            // Storage blocked (private mode): the choice still applies until the page closes.
+        }
+        applyStyle(data, next);
+    }, [data]);
+    return { choice, style, choose };
+}
+//# sourceMappingURL=index.js.map

package/distribution/style/use-style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../source/style/use-style/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAI/G,MAAM,SAAS,GAAG,CAAC,MAAkB,EAAE,EAAE;IACvC,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC9C,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;QACzC,UAAU,EAAE,IAAI;QAChB,eAAe,EAAE,CAAC,eAAe,EAAE,sBAAsB,CAAC;KAC3D,CAAC,CAAC;IACH,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;AACrC,CAAC,CAAC;AACF,MAAM,IAAI,GAAG,CAAC,SAAiB,EAAE,QAAgB,EAAE,EAAE,CAAC,GAAG,EAAE,CACzD,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,QAAQ,CAAC;AAE/D,oHAAoH;AACpH,MAAM,UAAU,QAAQ,CAAC,aAAiC;IACxD,MAAM,aAAa,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACrE,MAAM,MAAM,GAAG,oBAAoB,CAAC,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;IAC/G,MAAM,KAAK,GAAG,oBAAoB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC;IACzG,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAC3E,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,IAAY,EAAE,EAAE;QACf,IAAI,CAAC;YACH,IAAI,IAAI,KAAK,YAAY;gBAAE,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;;gBAC/D,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACnD,CAAC;QAAC,MAAM,CAAC;YACP,kFAAkF;QACpF,CAAC;QACD,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACzB,CAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;IACF,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AACnC,CAAC"}

package/distribution/style/use-style/type.d.ts

@@ -0,0 +1,9 @@
+export interface StyleState {
+    /** What the visitor picked: "system" or a style name. */
+    choice: string;
+    /** The style in use right now. Before hydration (and on the server) it is the fallback default. */
+    style: string;
+    /** Picks a style (or "system"), remembers it and applies it at once. */
+    choose: (choice: string) => void;
+}
+//# sourceMappingURL=type.d.ts.map

package/distribution/style/use-style/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../source/style/use-style/type.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,mGAAmG;IACnG,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC"}

package/distribution/style/use-style/type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=type.js.map

package/distribution/style/use-style/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../source/style/use-style/type.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sharadox/web-library",
-  "version": "0.1.0",
-  "description": "Generic building blocks for web applications: internationalization, search engine metadata, animation, time and forms.",
+  "version": "0.2.0",
+  "description": "Generic building blocks for web applications: internationalization, styles, search engine metadata, animation, time and forms.",
   "private": false,
   "license": "SEE LICENSE IN LICENCA.md",
   "author": "Sharadox <email@sharadox.com>",