@dorsk/tsumikit 0.79.0 → 0.80.1

package/dist/markdown.js

@@ -89,7 +89,9 @@ function inline(s, autolink) {
 function splitRow(row) {
     const cells = [];
     let cur = '';
-    const t = row.trim().replace(/^\|/, '').replace(/\|$/, '');
+    let t = row.trim();
+    if (t.startsWith('|'))
+        t = t.slice(1);
     for (let i = 0; i < t.length; i++) {
         if (t[i] === '\\' && t[i + 1] === '|') {
             cur += '|';
@@ -102,32 +104,57 @@ function splitRow(row) {
         else
             cur += t[i];
     }
-    cells.push(cur);
+    if (cur.trim() || !cells.length)
+        cells.push(cur);
     return cells;
 }
-const TABLE_RE = /(?:^|\n)([ \t]*\|.+\|[ \t]*)\n([ \t]*\|(?:[ \t]*:?-+:?[ \t]*\|)+[ \t]*)\n((?:[ \t]*\|.*\|[ \t]*(?:\n|$))+)/g;
+const hasPipe = (line) => /(?:^|[^\\])\|/.test(line);
+const DELIM_CELL = /^\s*:?-+:?\s*$/;
+const TABLE_BREAK = new RegExp(`^\\s*(?:$|#{1,6}(?:\\s|$)|&gt;|(?:[-*+]|\\d{1,9}[.)])\\s|(?:-{3,}|\\*{3,}|_{3,})\\s*$|${BLOCK_L}\\d+${BLOCK_R}\\s*$)`);
 function table(header, delim, body, autolink) {
-    const aligns = splitRow(delim).map((c) => {
+    const aligns = delim.map((c) => {
         const l = c.trim().startsWith(':');
         const r = c.trim().endsWith(':');
         return r && l ? 'center' : r ? 'right' : l ? 'left' : '';
     });
-    const cell = (txt, i, tag) => {
-        const a = aligns[i] ? ` style="text-align:${aligns[i]}"` : '';
-        return `<${tag}${a}>${inline(txt.trim(), autolink)}</${tag}>`;
+    const row = (line, tag) => {
+        const cells = splitRow(line);
+        const html = aligns.map((a, i) => {
+            const style = a ? ` style="text-align:${a}"` : '';
+            return `<${tag}${style}>${inline((cells[i] ?? '').trim(), autolink)}</${tag}>`;
+        });
+        return `<tr>${html.join('')}</tr>`;
     };
-    const head = `<tr>${splitRow(header)
-        .map((c, i) => cell(c, i, 'th'))
-        .join('')}</tr>`;
-    const rows = body
-        .split('\n')
-        .filter((r) => r.trim())
-        .map((r) => `<tr>${splitRow(r)
-        .map((c, i) => cell(c, i, 'td'))
-        .join('')}</tr>`)
-        .join('');
+    const head = row(header, 'th');
+    const rows = body.map((r) => row(r, 'td')).join('');
     return `<table><thead>${head}</thead><tbody>${rows}</tbody></table>`;
 }
+// GFM pipe tables on escaped text: a header row, a delimiter row with the
+// same cell count, then rows up to a blank line or the start of another block.
+function tables(s, saved, autolink) {
+    const lines = s.split('\n');
+    const out = [];
+    for (let i = 0; i < lines.length; i++) {
+        const head = lines[i];
+        const next = lines[i + 1];
+        if (next === undefined || !hasPipe(head) || !hasPipe(next) || TABLE_BREAK.test(head)) {
+            out.push(head);
+            continue;
+        }
+        const delim = splitRow(next);
+        const cols = splitRow(head);
+        if (!delim.every((c) => DELIM_CELL.test(c)) || cols.length !== delim.length) {
+            out.push(head);
+            continue;
+        }
+        let j = i + 2;
+        while (j < lines.length && !TABLE_BREAK.test(lines[j]))
+            j++;
+        out.push('', stash(saved, table(head, delim, lines.slice(i + 2, j), autolink)), '');
+        i = j - 1;
+    }
+    return out.join('\n');
+}
 // Block pass over the escaped, inline-rendered lines. Produces paragraphs,
 // headings, lists, blockquotes and rules; stashed blocks stay opaque.
 function blocks(lines) {
@@ -209,7 +236,7 @@ function blocks(lines) {
     return out.join('');
 }
 export function renderMarkdown(src, opts = {}) {
-    const tables = opts.tables !== false;
+    const withTables = opts.tables !== false;
     const autolink = opts.autolink !== false;
     const saved = [];
     let s = stripAnsi(src.replace(/\r\n?/g, '\n'));
@@ -221,9 +248,8 @@ export function renderMarkdown(src, opts = {}) {
         return stash(saved, `<pre${attr}><code>${body}</code></pre>`);
     });
     s = escapeHtml(s);
-    if (tables) {
-        s = s.replace(TABLE_RE, (_m, header, delim, body) => `\n${stash(saved, table(header, delim, body, autolink))}\n`);
-    }
+    if (withTables)
+        s = tables(s, saved, autolink);
     s = inline(s, autolink);
     s = blocks(s.split('\n'));
     return restore(s, saved);

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();