@fluixi/core 1.0.0-alpha.100

package/dist/src/lib/theme/color-scheme.cjs

@@ -0,0 +1,281 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lib/theme/color-scheme.ts
+var color_scheme_exports = {};
+__export(color_scheme_exports, {
+  createColorScheme: () => createColorScheme
+});
+module.exports = __toCommonJS(color_scheme_exports);
+var import_head2 = require("@fluixi/head");
+var import_signal4 = require("@fluixi/reactive/signal");
+
+// src/lib/env/index.ts
+var import_dom = require("@fluixi/dom");
+var import_dom2 = require("@fluixi/dom");
+var env = {
+  get window() {
+    return typeof window !== "undefined" ? window : void 0;
+  },
+  get document() {
+    return typeof document !== "undefined" ? document : void 0;
+  }
+};
+
+// src/lib/storage/persisted.ts
+var import_signal = require("@fluixi/reactive/signal");
+var isAsync = (storage) => "encryption" in storage;
+function persisted(storage, key, options = {}) {
+  const fallback = options.fallback ?? null;
+  const name = options.name ?? `storage:${storage.keyPrefix}${key}`;
+  const state = (0, import_signal.signal)(isAsync(storage) ? fallback : storage.get(key) ?? fallback, { name });
+  const put = (value) => state.set(() => value);
+  const resolve = (next) => typeof next === "function" ? next((0, import_signal.untrack)(state)) : next;
+  const writeOptions = (extra) => ({
+    ...options.ttl !== void 0 ? { ttl: options.ttl } : {},
+    ...options.encrypt ? { encrypt: true } : {},
+    ...extra
+  });
+  if (!isAsync(storage)) {
+    const off2 = storage.subscribe(key, (event) => {
+      if (event.type !== "set") return put(fallback);
+      if (event.value !== void 0) put(event.value);
+    });
+    if ((0, import_signal.getOwner)()) (0, import_signal.onCleanup)(off2);
+    return Object.assign(() => state(), {
+      set(next, extra) {
+        const value = resolve(next);
+        storage.set(key, value, writeOptions(extra));
+        put(value);
+      },
+      remove() {
+        storage.remove(key);
+        put(fallback);
+      }
+    });
+  }
+  let written = false;
+  const reread = () => storage.get(key).then(
+    (value) => put(value ?? fallback),
+    () => void 0
+  );
+  const off = storage.subscribe(key, (event) => {
+    if (event.type !== "set") return put(fallback);
+    if (event.value !== void 0) put(event.value);
+    else void reread();
+  });
+  if ((0, import_signal.getOwner)()) (0, import_signal.onCleanup)(off);
+  const ready = storage.get(key).then((value) => {
+    if (!written) put(value ?? fallback);
+  });
+  return Object.assign(() => state(), {
+    ready,
+    async set(next, extra) {
+      const previous = (0, import_signal.untrack)(state);
+      const value = resolve(next);
+      written = true;
+      put(value);
+      try {
+        await storage.set(key, value, writeOptions(extra));
+      } catch (error) {
+        put(previous);
+        throw error;
+      }
+    },
+    async remove() {
+      written = true;
+      await storage.remove(key);
+      put(fallback);
+    }
+  });
+}
+
+// src/lib/theme/index.ts
+var import_head = require("@fluixi/head");
+var import_signal3 = require("@fluixi/reactive/signal");
+var import_storage2 = require("@fluixi/storage");
+
+// src/lib/storage/index.ts
+var import_dom3 = require("@fluixi/dom");
+var import_signal2 = require("@fluixi/reactive/signal");
+var import_storage = require("@fluixi/storage");
+var import_browser = require("@fluixi/storage/browser");
+var import_server = require("@fluixi/storage/server");
+var StorageContext = (0, import_signal2.createContext)(void 0, "storage");
+var AsyncStorageContext = (0, import_signal2.createContext)(void 0, "asyncStorage");
+var isBrowser = () => typeof window !== "undefined" && typeof document !== "undefined";
+var perRequest = /* @__PURE__ */ new WeakMap();
+var perPage = /* @__PURE__ */ new Map();
+function cached(scope, id, make) {
+  let adapter = scope.get(id);
+  if (!adapter) scope.set(id, adapter = make());
+  return adapter;
+}
+function requestRequired(scope) {
+  throw new import_storage.StorageUnavailableError(
+    `useStorage({ scope: '${scope}' }) on the server needs a request: call it during a render, a loader or a server function, or provide a storage with <StorageProvider>.`
+  );
+}
+function adapterFor(scope, cookie = {}) {
+  const ctx = (0, import_dom3.getRequestContext)();
+  const options = { httpOnly: false, ...cookie };
+  switch (scope) {
+    case "local":
+      return (0, import_browser.localStorageAdapter)();
+    case "session":
+      return (0, import_browser.sessionStorageAdapter)();
+    case "request":
+      if (isBrowser()) return cached(perPage, "request", import_storage.memoryStorage);
+      if (!ctx) requestRequired(scope);
+      return cached(perRequest.get(ctx) ?? perRequest.set(ctx, /* @__PURE__ */ new Map()).get(ctx), "request", import_server.requestStorage);
+    case "cookie": {
+      const id = `cookie:${JSON.stringify(options)}`;
+      if (isBrowser()) {
+        const { httpOnly: _ignored, ...browser } = options;
+        return cached(perPage, id, () => (0, import_browser.documentCookieAdapter)(browser));
+      }
+      if (!ctx) requestRequired(scope);
+      const raw = ctx.event.request;
+      const target = raw && typeof raw === "object" ? raw : void 0;
+      return cached(
+        perRequest.get(ctx) ?? perRequest.set(ctx, /* @__PURE__ */ new Map()).get(ctx),
+        id,
+        () => (0, import_server.cookieStorage)({
+          ...options,
+          request: raw && typeof raw === "object" && ("headers" in raw || "getHeader" in raw) ? (0, import_server.toStorageRequest)(raw) : void 0,
+          response: {
+            appendHeader(name, value) {
+              if (!(0, import_dom3.appendResponseHeader)(name, value, target)) {
+                throw new import_storage.StorageUnavailableError("The response headers were already sent, so this cookie cannot reach the browser. Write it before the page head goes out: in middleware, a loader, a server function or the render before its first chunk.");
+              }
+            }
+          }
+        })
+      );
+    }
+  }
+}
+function useStorage(options = {}) {
+  const { scope = "auto", cookie, ...storageOptions } = options;
+  if (scope === "auto") {
+    const provided = (0, import_signal2.useContext)(StorageContext);
+    if (provided) return options.namespace ? provided.namespace(options.namespace) : provided;
+  }
+  return (0, import_storage.createSyncStorage)({ ...storageOptions, adapter: resolveAdapter(scope, cookie) });
+}
+function resolveAdapter(scope, cookie) {
+  if (scope !== "auto") return adapterFor(scope, cookie);
+  if (isBrowser()) return adapterFor("local");
+  if (!(0, import_dom3.getRequestContext)()) requestRequired(scope);
+  return adapterFor("request");
+}
+
+// src/lib/theme/index.ts
+var YEAR = 60 * 60 * 24 * 365;
+function defaultStorage() {
+  try {
+    return useStorage({ scope: "cookie", cookie: { maxAge: YEAR, sameSite: "lax" } });
+  } catch (error) {
+    if (error instanceof import_storage2.StorageUnavailableError) return null;
+    throw error;
+  }
+}
+function storedLookup(storage, key) {
+  if (!storage) return null;
+  const full = storage.keyPrefix + key;
+  if (storage.scope === "cookie") {
+    return { from: "cookie", name: encodeURIComponent(full).replace(/[()]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`) };
+  }
+  if (storage.scope === "local") return { from: "local", name: full };
+  return null;
+}
+
+// src/lib/theme/color-scheme.ts
+var CHOICES = ["system", "light", "dark"];
+var DARK = "(prefers-color-scheme: dark)";
+function createColorScheme(options = {}) {
+  const storageKey = options.storageKey ?? "color-scheme";
+  const attribute = options.attribute ?? "data-theme";
+  const systemAs = options.systemAs ?? "resolved";
+  const storage = options.storage === void 0 ? defaultStorage() : options.storage;
+  const saved = storage ? persisted(storage, storageKey) : null;
+  const [unsaved, setUnsaved] = (0, import_signal4.createSignal)(null);
+  const value = () => {
+    const local = unsaved();
+    if (local) return local;
+    const stored = saved?.();
+    return CHOICES.includes(stored) ? stored : "system";
+  };
+  const media = env.window?.matchMedia?.(DARK);
+  const [osDark, setOsDark] = (0, import_signal4.createSignal)(media?.matches ?? false);
+  if (media) {
+    const onChange = () => setOsDark(media.matches);
+    media.addEventListener?.("change", onChange);
+    if ((0, import_signal4.getOwner)()) (0, import_signal4.onCleanup)(() => media.removeEventListener?.("change", onChange));
+  }
+  const resolved = () => {
+    const choice = value();
+    return choice === "system" ? osDark() ? "dark" : "light" : choice;
+  };
+  const shown = () => systemAs === "system" && value() === "system" ? "system" : resolved();
+  const apply = () => {
+    env.document?.documentElement.setAttribute(attribute, shown());
+  };
+  const set = (choice) => {
+    if (!CHOICES.includes(choice)) return;
+    if (!saved) setUnsaved(choice);
+    else {
+      try {
+        saved.set(choice);
+        setUnsaved(null);
+      } catch {
+        setUnsaved(choice);
+      }
+    }
+    apply();
+    options.onChange?.(choice);
+  };
+  const scriptBody = () => {
+    const cfg = JSON.stringify({ s: storedLookup(storage, storageKey), a: attribute, sys: systemAs === "system", tc: options.themeColor ?? null, cs: options.colorSchemeMeta !== false }).replace(/</g, "\\u003c");
+    return `(function(){try{var c=${cfg},t=null,s=c.s,r=null;if(s&&s.from==='local')r=localStorage.getItem(s.name);if(s&&s.from==='cookie')document.cookie.split('; ').forEach(function(p){var i=p.indexOf('=');if(p.slice(0,i)===s.name)r=decodeURIComponent(p.slice(i+1));});if(r){var e=JSON.parse(r);t=e&&e.v===1?e.value:e;}var chosen=t==='light'||t==='dark'?t:null;if(!chosen)t=c.sys?'system':(matchMedia('${DARK}').matches?'dark':'light');document.documentElement.setAttribute(c.a,t);if(chosen&&c.tc)document.querySelectorAll('meta[name="theme-color"]').forEach(function(m){m.setAttribute('content',c.tc[chosen]);m.removeAttribute('media');});if(chosen&&c.cs){var m=document.querySelector('meta[name="color-scheme"]');if(m)m.setAttribute('content',chosen);}}catch(e){}})();`;
+  };
+  if ((0, import_head2.getActiveHead)()) {
+    const colors = options.themeColor;
+    (0, import_head2.useHead)({
+      htmlAttrs: { [attribute]: shown },
+      ...colors ? {
+        themeColor: () => value() === "system" ? [
+          { color: colors.light, media: "(prefers-color-scheme: light)" },
+          { color: colors.dark, media: DARK }
+        ] : colors[resolved()]
+      } : {},
+      ...options.colorSchemeMeta === false ? {} : { colorScheme: () => value() === "system" ? "light dark" : resolved() },
+      ...options.script === false ? {} : { script: [{ children: scriptBody() }] }
+    });
+  }
+  if (env.document && (0, import_signal4.getOwner)()) (0, import_signal4.createEffect)(apply);
+  return {
+    value,
+    resolved,
+    set,
+    toggle: () => set(resolved() === "dark" ? "light" : "dark"),
+    init: apply,
+    headScript: () => `<script>${scriptBody()}<\/script>`
+  };
+}

package/dist/src/lib/theme/color-scheme.d.ts

@@ -0,0 +1,61 @@
+import { type Accessor } from '@fluixi/reactive/signal';
+import type { TypedStorage } from '@fluixi/storage';
+export type ColorSchemeChoice = 'system' | 'light' | 'dark';
+export interface ColorSchemeOptions {
+    /** Key the choice is stored under. Default `color-scheme`. */
+    storageKey?: string;
+    /** Attribute set on `<html>`. Default `data-theme`. */
+    attribute?: string;
+    /** Where the choice is kept: a cookie for a year by default, `null` for memory only. */
+    storage?: TypedStorage<any> | null;
+    /**
+     * What the attribute says while following the OS. `resolved` (default) writes `light` or
+     * `dark`, for CSS that selects on `[data-theme="dark"]`. `system` writes `system`, for CSS
+     * that follows the OS by itself (`color-scheme`, a media query): a page without JavaScript
+     * then still matches the OS.
+     */
+    systemAs?: 'resolved' | 'system';
+    /**
+     * The browser UI colour for each scheme: Chrome's address and app bar on Android, Safari's bars
+     * on iOS. While following the OS both are sent, each under its media query, and the browser
+     * picks; after a choice, the chosen one.
+     */
+    themeColor?: {
+        light: string;
+        dark: string;
+    };
+    /**
+     * Send `<meta name="color-scheme">` too (`light dark` while following the OS, else the
+     * choice), so form controls, scrollbars and the page behind the CSS match. Default true.
+     */
+    colorSchemeMeta?: boolean;
+    /** Send the before-paint script with the page during a render. Default true. */
+    script?: boolean;
+    onChange?: (choice: ColorSchemeChoice) => void;
+}
+export interface ColorScheme {
+    /** The choice: `system`, `light` or `dark`. */
+    value: Accessor<ColorSchemeChoice>;
+    /** What is shown: the choice, or the OS's scheme while the choice is `system`. */
+    resolved: Accessor<'light' | 'dark'>;
+    set: (choice: ColorSchemeChoice) => void;
+    /** Flips light and dark, from what is shown. */
+    toggle: () => void;
+    /** Writes the attribute now; the head and the scheme's own effect keep it current after. */
+    init: () => void;
+    /** The before-paint script, for a page you write yourself. */
+    headScript: () => string;
+}
+/**
+ * A light/dark scheme with the OS as the default. Create it during a render (a provider at the
+ * app root does), so the server reads the visitor's cookie.
+ *
+ * @example
+ * ```ts
+ * const scheme = createColorScheme({ storageKey: 'app-scheme' });
+ * scheme.toggle();   // dark if the page shows light, and remembered
+ * scheme.resolved(); // 'dark'
+ * ```
+ */
+export declare function createColorScheme(options?: ColorSchemeOptions): ColorScheme;
+//# sourceMappingURL=color-scheme.d.ts.map

package/dist/src/lib/theme/color-scheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-scheme.d.ts","sourceRoot":"","sources":["../../../../src/lib/theme/color-scheme.ts"],"names":[],"mappings":"AASA,OAAO,EAAmD,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACzG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAKpD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAE5D,MAAM,WAAW,kBAAkB;IACjC,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,OAAO,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACnC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,WAAW;IAC1B,+CAA+C;IAC/C,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IACnC,kFAAkF;IAClF,QAAQ,EAAE,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;IACrC,GAAG,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACzC,gDAAgD;IAChD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,4FAA4F;IAC5F,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,8DAA8D;IAC9D,UAAU,EAAE,MAAM,MAAM,CAAC;CAC1B;AAKD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,kBAAuB,GAAG,WAAW,CAkG/E"}

package/dist/src/lib/theme/color-scheme.js

@@ -0,0 +1,120 @@
+/**
+ * Light, dark, or whatever the operating system says: the theme axis almost every app has.
+ *
+ * Built on the same pieces as `createTheme` (a cookie by default, the attribute and a
+ * before-paint script sent through the head during a render), with what a scheme needs on top:
+ * `system` as a choice, `resolved()` for what is actually shown, which follows the OS live, and
+ * a `toggle` that flips from what the reader sees.
+ */
+import { getActiveHead, useHead } from '@fluixi/head';
+import { createEffect, createSignal, getOwner, onCleanup } from '@fluixi/reactive/signal';
+import { env } from '../env/index.js';
+import { persisted } from '../storage/persisted.js';
+import { defaultStorage, storedLookup } from './index.js';
+const CHOICES = ['system', 'light', 'dark'];
+const DARK = '(prefers-color-scheme: dark)';
+/**
+ * A light/dark scheme with the OS as the default. Create it during a render (a provider at the
+ * app root does), so the server reads the visitor's cookie.
+ *
+ * @example
+ * ```ts
+ * const scheme = createColorScheme({ storageKey: 'app-scheme' });
+ * scheme.toggle();   // dark if the page shows light, and remembered
+ * scheme.resolved(); // 'dark'
+ * ```
+ */
+export function createColorScheme(options = {}) {
+    const storageKey = options.storageKey ?? 'color-scheme';
+    const attribute = options.attribute ?? 'data-theme';
+    const systemAs = options.systemAs ?? 'resolved';
+    const storage = options.storage === undefined ? defaultStorage() : options.storage;
+    const saved = storage ? persisted(storage, storageKey) : null;
+    const [unsaved, setUnsaved] = createSignal(null);
+    const value = () => {
+        const local = unsaved();
+        if (local)
+            return local;
+        const stored = saved?.();
+        return CHOICES.includes(stored) ? stored : 'system';
+    };
+    // The OS scheme, followed live in the browser. The server cannot know it: light there, and the
+    // script corrects it before paint.
+    const media = env.window?.matchMedia?.(DARK);
+    const [osDark, setOsDark] = createSignal(media?.matches ?? false);
+    if (media) {
+        const onChange = () => setOsDark(media.matches);
+        media.addEventListener?.('change', onChange);
+        if (getOwner())
+            onCleanup(() => media.removeEventListener?.('change', onChange));
+    }
+    const resolved = () => {
+        const choice = value();
+        return choice === 'system' ? (osDark() ? 'dark' : 'light') : choice;
+    };
+    const shown = () => (systemAs === 'system' && value() === 'system' ? 'system' : resolved());
+    const apply = () => {
+        env.document?.documentElement.setAttribute(attribute, shown());
+    };
+    const set = (choice) => {
+        if (!CHOICES.includes(choice))
+            return;
+        if (!saved)
+            setUnsaved(choice);
+        else {
+            try {
+                saved.set(choice);
+                setUnsaved(null);
+            }
+            catch {
+                // Not saved (the response already went out, storage blocked): the page still switches.
+                setUnsaved(choice);
+            }
+        }
+        apply();
+        options.onChange?.(choice);
+    };
+    const scriptBody = () => {
+        const cfg = JSON.stringify({ s: storedLookup(storage, storageKey), a: attribute, sys: systemAs === 'system', tc: options.themeColor ?? null, cs: options.colorSchemeMeta !== false }).replace(/</g, '\\u003c');
+        return (`(function(){try{var c=${cfg},t=null,s=c.s,r=null;` +
+            `if(s&&s.from==='local')r=localStorage.getItem(s.name);` +
+            `if(s&&s.from==='cookie')document.cookie.split('; ').forEach(function(p){var i=p.indexOf('=');if(p.slice(0,i)===s.name)r=decodeURIComponent(p.slice(i+1));});` +
+            `if(r){var e=JSON.parse(r);t=e&&e.v===1?e.value:e;}` +
+            `var chosen=t==='light'||t==='dark'?t:null;` +
+            `if(!chosen)t=c.sys?'system':(matchMedia('${DARK}').matches?'dark':'light');` +
+            `document.documentElement.setAttribute(c.a,t);` +
+            // A chosen scheme also decides the browser's bars and controls, which the page sent for the OS.
+            `if(chosen&&c.tc)document.querySelectorAll('meta[name="theme-color"]').forEach(function(m){m.setAttribute('content',c.tc[chosen]);m.removeAttribute('media');});` +
+            `if(chosen&&c.cs){var m=document.querySelector('meta[name="color-scheme"]');if(m)m.setAttribute('content',chosen);}` +
+            `}catch(e){}})();`);
+    };
+    if (getActiveHead()) {
+        const colors = options.themeColor;
+        useHead({
+            htmlAttrs: { [attribute]: shown },
+            ...(colors
+                ? {
+                    themeColor: () => value() === 'system'
+                        ? [
+                            { color: colors.light, media: '(prefers-color-scheme: light)' },
+                            { color: colors.dark, media: DARK },
+                        ]
+                        : colors[resolved()],
+                }
+                : {}),
+            ...(options.colorSchemeMeta === false ? {} : { colorScheme: () => (value() === 'system' ? 'light dark' : resolved()) }),
+            ...(options.script === false ? {} : { script: [{ children: scriptBody() }] }),
+        });
+    }
+    // In the browser the attribute follows the OS while the choice is `system`.
+    if (env.document && getOwner())
+        createEffect(apply);
+    return {
+        value,
+        resolved,
+        set,
+        toggle: () => set(resolved() === 'dark' ? 'light' : 'dark'),
+        init: apply,
+        headScript: () => `<script>${scriptBody()}</script>`,
+    };
+}