@dorsk/tsumikit 0.78.0 → 0.80.0

package/dist/pointer.d.ts

@@ -0,0 +1,3 @@
+/** Sets `--pointer-x` / `--pointer-y` (px, box-relative) on the hovered
+ *  `[data-tsu]` element and its `[data-tsu]` ancestors, mouse only. */
+export declare function trackPointer(doc?: Document | undefined): () => void;

package/dist/pointer.js

@@ -0,0 +1,40 @@
+/** Sets `--pointer-x` / `--pointer-y` (px, box-relative) on the hovered
+ *  `[data-tsu]` element and its `[data-tsu]` ancestors, mouse only. */
+export function trackPointer(doc = globalThis.document) {
+    if (!doc)
+        return () => { };
+    const win = doc.defaultView;
+    let last = null;
+    let frame = 0;
+    const flush = () => {
+        frame = 0;
+        const e = last;
+        last = null;
+        if (!e)
+            return;
+        let el = e.target?.closest?.('[data-tsu]');
+        while (el) {
+            const r = el.getBoundingClientRect();
+            el.style.setProperty('--pointer-x', `${e.clientX - r.left}px`);
+            el.style.setProperty('--pointer-y', `${e.clientY - r.top}px`);
+            el = el.parentElement?.closest('[data-tsu]');
+        }
+    };
+    const move = (e) => {
+        if (e.pointerType !== 'mouse')
+            return;
+        last = e;
+        if (!win)
+            flush();
+        else if (!frame)
+            frame = win.requestAnimationFrame(flush);
+    };
+    doc.addEventListener('pointermove', move, { passive: true });
+    return () => {
+        doc.removeEventListener('pointermove', move);
+        if (frame)
+            win?.cancelAnimationFrame(frame);
+        frame = 0;
+        last = null;
+    };
+}

package/dist/stores/fx.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type FxFamily, type FxSettings, type FxVariant } from '../fx';
+export declare const FX_PREPAINT: string;
+declare class Fx {
+    settings: FxSettings;
+    onchange?: (settings: FxSettings) => void;
+    constructor();
+    get<F extends FxFamily>(family: F): FxVariant<F>;
+    set<F extends FxFamily>(family: F, variant: string): void;
+    reset(): void;
+    get isDefault(): boolean;
+    /** Replay settings an app persisted itself, without echoing through `onchange`. */
+    hydrate(settings: Partial<FxSettings>): void;
+    private commit;
+    private apply;
+}
+export declare const fx: Fx;
+export {};

package/dist/stores/fx.svelte.js

@@ -0,0 +1,64 @@
+import { browser } from '../env';
+import { DEFAULT_FX, FX_FAMILIES, fxAttr, fxDiff, fxPrepaint, isFxVariant, parseFx, } from '../fx';
+import { readStorage, writeStorage } from './storage';
+// Until something is saved or set, <html> is left untouched so attributes an
+// app wrote itself win.
+const KEY = 'tsumikit-fx';
+export const FX_PREPAINT = fxPrepaint(KEY);
+class Fx {
+    settings = $state({ ...DEFAULT_FX });
+    onchange;
+    constructor() {
+        if (!browser)
+            return;
+        const raw = readStorage(KEY);
+        if (!raw)
+            return;
+        try {
+            this.settings = parseFx(JSON.parse(raw));
+        }
+        catch { }
+        this.apply();
+    }
+    get(family) {
+        return this.settings[family];
+    }
+    set(family, variant) {
+        if (!isFxVariant(family, variant))
+            return;
+        this.settings = { ...this.settings, [family]: variant };
+        this.commit();
+    }
+    reset() {
+        this.settings = { ...DEFAULT_FX };
+        this.commit();
+    }
+    get isDefault() {
+        return Object.keys(fxDiff(this.settings)).length === 0;
+    }
+    /** Replay settings an app persisted itself, without echoing through `onchange`. */
+    hydrate(settings) {
+        this.settings = parseFx(settings);
+        this.apply();
+        if (browser)
+            writeStorage(KEY, JSON.stringify(fxDiff(this.settings)));
+    }
+    commit() {
+        this.apply();
+        if (browser)
+            writeStorage(KEY, JSON.stringify(fxDiff(this.settings)));
+        this.onchange?.(this.settings);
+    }
+    apply() {
+        if (!browser)
+            return;
+        const root = document.documentElement;
+        for (const f of FX_FAMILIES) {
+            if (this.settings[f] === DEFAULT_FX[f])
+                root.removeAttribute(fxAttr(f));
+            else
+                root.setAttribute(fxAttr(f), this.settings[f]);
+        }
+    }
+}
+export const fx = new Fx();

package/dist/stores/theme.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type SlotOf, type ThemeChoice, type ThemePreference } from '../theme-mode';
+import { type LookId, type SlotOf, type ThemeChoice, type ThemePreference } from '../theme-mode';
 export declare const THEMES: readonly [{
     readonly id: "light";
     readonly label: "Light";
@@ -186,6 +186,8 @@ export declare const THEMES: readonly [{
     readonly themeColor: "#3f3f3f";
     readonly mode: "dark";
 }];
+/** Pre-paint script for the built-in themes; inline it in <head>. */
+export declare const THEME_PREPAINT: string;
 export type Mode = (typeof THEMES)[number]['id'];
 export type ThemeMode = (typeof THEMES)[number]['mode'];
 export type ThemeId = Mode | (string & {});
@@ -222,6 +224,8 @@ declare class Theme {
     setDefault(id: ThemeId): void;
     private resolve;
     private read;
+    /** The active structural look; `default` when none is set. */
+    get look(): LookId;
     private paint;
     private persist;
     private apply;
@@ -234,8 +238,10 @@ declare class Theme {
     /** A picker choice: `auto`, or a theme id, which also becomes its slot's
      *  remembered theme. An unregistered id is ignored. */
     choose(choice: string): ThemePreference;
+    /** Pick a look; unknown ids fall back to the default look. */
+    setLook(look: string): ThemePreference;
     /** Replay a preference an app persisted itself, without echoing it back
-     *  through `onchange`. */
+     *  through `onchange`. A preference without `look` keeps the current one. */
     hydrate(pref: ThemePreference): void;
 }
 export declare const theme: Theme;

package/dist/stores/theme.svelte.js

@@ -1,5 +1,5 @@
 import { browser } from '../env';
-import { AUTO_THEME, chooseTheme, DEFAULT_THEME_PREFERENCE, preferenceFrom, resolveTheme, } from '../theme-mode';
+import { AUTO_THEME, chooseTheme, DEFAULT_LOOK, DEFAULT_THEME_PREFERENCE, parseLook, preferenceFrom, resolveTheme, themePrepaint, } from '../theme-mode';
 import { readStorage, writeStorage } from './storage';
 // Theme registry. Built-ins live in THEMES (+ one [data-theme="id"] block in
 // styles/themes.css); consumers append their own with theme.register() and ship
@@ -8,7 +8,8 @@ import { readStorage, writeStorage } from './storage';
 // light/dark sections.
 //
 // `tsumikit-theme` holds a {mode,light,dark} blob; a bare theme id there is a
-// legacy value and migrates through `preferenceFrom`.
+// legacy value and migrates through `preferenceFrom`. The blob also carries
+// `look` when it is not the default.
 const KEY = 'tsumikit-theme';
 const SCHEME_QUERY = '(prefers-color-scheme: dark)';
 export const THEMES = [
@@ -67,6 +68,8 @@ export const THEMES = [
     { id: 'espresso', label: 'Espresso', icon: '◉', themeColor: '#463a31', mode: 'dark' },
     { id: 'zenburn', label: 'Zenburn', icon: 'Z', themeColor: '#3f3f3f', mode: 'dark' },
 ];
+/** Pre-paint script for the built-in themes; inline it in <head>. */
+export const THEME_PREPAINT = themePrepaint(KEY, THEMES);
 const FALLBACK_ICON = '◈';
 class Theme {
     current = $state('dark');
@@ -142,9 +145,14 @@ class Theme {
                 blob = parsed;
         }
         catch { }
-        return preferenceFrom(blob
+        const pref = preferenceFrom(blob
             ? { themeMode: blob.mode, lightTheme: blob.light, darkTheme: blob.dark }
             : { theme: this.saved }, this.slotOf, seed);
+        return withLook(pref, blob?.look);
+    }
+    /** The active structural look; `default` when none is set. */
+    get look() {
+        return parseLook(this.pref.look);
     }
     paint() {
         this.current = this.resolved;
@@ -159,7 +167,13 @@ class Theme {
     apply() {
         if (!browser)
             return;
-        document.documentElement.setAttribute('data-theme', this.current);
+        const root = document.documentElement;
+        root.setAttribute('data-theme', this.current);
+        root.setAttribute('data-mode', this.option.mode);
+        if (this.look === DEFAULT_LOOK)
+            root.removeAttribute('data-look');
+        else
+            root.setAttribute('data-look', this.look);
         const color = this.option.themeColor;
         if (color)
             document
@@ -194,12 +208,24 @@ class Theme {
         this.persist();
         return this.pref;
     }
+    /** Pick a look; unknown ids fall back to the default look. */
+    setLook(look) {
+        this.pref = withLook(this.pref, look);
+        this.apply();
+        this.persist();
+        return this.pref;
+    }
     /** Replay a preference an app persisted itself, without echoing it back
-     *  through `onchange`. */
+     *  through `onchange`. A preference without `look` keeps the current one. */
     hydrate(pref) {
-        this.pref = pref;
-        this.saved = JSON.stringify(pref);
+        this.pref = withLook(pref, 'look' in pref ? pref.look : this.pref.look);
+        this.saved = JSON.stringify(this.pref);
         this.paint();
     }
 }
+function withLook(pref, look) {
+    const { look: _, ...rest } = pref;
+    const id = parseLook(look);
+    return id === DEFAULT_LOOK ? rest : { ...rest, look: id };
+}
 export const theme = new Theme();