morethanui 1.0.0

package/dist/mtui.js

@@ -0,0 +1,1719 @@
+/* MTUI accordion motion — tier: lightly Enhanced over Basic <details>.
+   Basic (no JS): native <details>/<summary> opens/closes instantly, fully
+   functional. Enhanced: smooth height + chevron animation both ways via
+   the Web Animations API. Duration/easing are read live from --t-lift and
+   --ease, so reduced-motion (which collapses --t-lift to 0ms) disables
+   this for free — no separate check needed.
+   No custom element: this is an ambient enhancement over any
+   .accordion > summary in the page, same pattern as js/menu.js.           */
+(function () {
+  'use strict';
+
+  function durationMs() {
+    const v = getComputedStyle(document.documentElement)
+      .getPropertyValue('--t-lift').trim();
+    return parseFloat(v) || 0;
+  }
+
+  document.addEventListener('click', (e) => {
+    const summary = e.target.closest('.accordion > summary');
+    if (!summary) return;
+    const details = summary.parentElement;
+    if ('animating' in details.dataset) { e.preventDefault(); return; }
+
+    const duration = durationMs();
+    if (duration === 0) return; // reduced motion: native instant toggle
+
+    const body = details.querySelector(':scope > .accordion-body');
+    if (!body) return; // nothing to animate; let the native toggle happen
+
+    e.preventDefault();
+    const opening = !details.open;
+    details.dataset.animating = '';
+    details.dataset.expanded = opening ? 'true' : 'false';
+
+    if (opening) details.open = true; // must be open to measure scrollHeight
+    // border-box means blockSize alone can't go below the body's own
+    // padding — animate padding to 0 in lockstep so the collapsed state is
+    // a true 0px, not a floor of ~24px of bare padding.
+    const cs = getComputedStyle(body);
+    const padTop = cs.paddingBlockStart;
+    const padBottom = cs.paddingBlockEnd;
+    const endHeight = body.scrollHeight;
+    const easing = getComputedStyle(document.documentElement)
+      .getPropertyValue('--ease').trim() || 'ease';
+
+    const open = { blockSize: `${endHeight}px`, paddingBlockStart: padTop, paddingBlockEnd: padBottom };
+    const closed = { blockSize: '0px', paddingBlockStart: '0px', paddingBlockEnd: '0px' };
+
+    body.style.overflow = 'hidden';
+    const anim = body.animate(
+      opening ? [closed, open] : [open, closed],
+      { duration, easing }
+    );
+
+    anim.onfinish = () => {
+      body.style.blockSize = '';
+      body.style.paddingBlockStart = '';
+      body.style.paddingBlockEnd = '';
+      body.style.overflow = '';
+      delete details.dataset.animating;
+      if (!opening) details.open = false; // unmount only after fully collapsed
+    };
+  });
+})();
+/* MTUI feedback — tier: JS-only, layered opt-in over phase 04-06 components
+   (doesn't change their markup or behavior contracts).
+   Five synthetic WebAudio cues (no audio files) + matching haptics, gated
+   by one global mute persisted to localStorage. AudioContext is created
+   lazily on first use; if it's still suspended (no user gesture has
+   unlocked audio yet) or unavailable, playback silently no-ops.
+   API: mtui.feedback.play('tick'|'toggle-on'|'toggle-off'|'success'|'error')
+        mtui.feedback.muted            // get
+        mtui.feedback.muted = true     // set, persists
+
+   Opt-in wiring — nothing fires without a matching visible event, and
+   none of this listens for hover, scroll, or focus (DESIGN.md §4.10):
+     .switch/.checkbox/.radio[data-feedback]  -> toggle-on / toggle-off on change
+     button/.btn[data-feedback]               -> success on click, or the
+                                                  cue named in the attribute
+                                                  ("confirm actions")
+     .toast[data-kind]                        -> that cue when the toast mounts
+     [data-feedback][data-status="danger"]    -> error when it mounts
+                                                  (alert / empty boundaries)
+
+   Basic (JS off): silent — there is no audio-file fallback to degrade to. */
+(function () {
+  'use strict';
+
+  const MUTE_KEY = 'mtui-feedback-muted';
+
+  // Frequencies, durations and the 0.06 gain ceiling are locked by
+  // DESIGN.md §2.13. `steps` are discrete pitches (a clean interval, not a
+  // continuous portamento glide) so toggles read as a crisp two-note tap
+  // rather than a slide-whistle swoop. Everything else — soft attack,
+  // exponential decay, lowpass — is envelope shaping, not spec values.
+  const CUES = {
+    tick: { wave: 'sine', steps: [880], duration: 0.05, peak: 0.04 },
+    'toggle-on': { wave: 'sine', steps: [520, 784], duration: 0.09, peak: 0.05, haptic: 8 },
+    'toggle-off': { wave: 'sine', steps: [784, 520], duration: 0.09, peak: 0.05, haptic: 8 },
+    success: { wave: 'sine', steps: [660, 880], duration: 0.14, peak: 0.05, haptic: 8 },
+    error: { wave: 'triangle', steps: [233], duration: 0.16, peak: 0.05, haptic: [20, 40, 20] },
+  };
+
+  function isMuted() {
+    try {
+      return localStorage.getItem(MUTE_KEY) === '1';
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function setMuted(value) {
+    try {
+      localStorage.setItem(MUTE_KEY, value ? '1' : '0');
+    } catch (e) {
+      /* storage unavailable (private mode, quota, policy) — mute stays session-only */
+    }
+  }
+
+  let ctx = null;
+  function audioCtx() {
+    if (ctx) return ctx;
+    const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+    ctx = AudioContextClass ? new AudioContextClass() : null;
+    return ctx;
+  }
+
+  function tone(cue) {
+    const c = audioCtx();
+    if (!c) return;
+    if (c.state === 'suspended') c.resume().catch(() => {});
+
+    const t0 = c.currentTime;
+    const osc = c.createOscillator();
+    const gain = c.createGain();
+    const lp = c.createBiquadFilter();
+    osc.type = cue.wave;
+
+    // Discrete pitch steps — each note holds for an equal slice, no glide.
+    const steps = cue.steps;
+    const slice = cue.duration / steps.length;
+    steps.forEach((f, i) => osc.frequency.setValueAtTime(f, t0 + i * slice));
+
+    // Gentle lowpass rolls off the brittle upper harmonics (esp. the
+    // triangle error cue) so the tone stays soft rather than buzzy.
+    lp.type = 'lowpass';
+    lp.frequency.setValueAtTime(Math.max(...steps) * 3, t0);
+    lp.Q.setValueAtTime(0.7, t0);
+
+    // Percussive envelope: click-free ~4ms attack, then a natural
+    // exponential decay — no flat sustain plateau (that's the "beep").
+    // exponentialRampToValueAtTime can't reach 0, so decay to near-zero.
+    const peak = Math.min(cue.peak || 0.05, 0.06);
+    gain.gain.setValueAtTime(0.0001, t0);
+    gain.gain.exponentialRampToValueAtTime(peak, t0 + 0.004);
+    gain.gain.exponentialRampToValueAtTime(0.0001, t0 + cue.duration);
+    gain.gain.setValueAtTime(0, t0 + cue.duration + 0.005);
+
+    osc.connect(lp).connect(gain).connect(c.destination);
+    osc.start(t0);
+    osc.stop(t0 + cue.duration + 0.02);
+    osc.addEventListener('ended', () => {
+      osc.disconnect();
+      lp.disconnect();
+      gain.disconnect();
+    });
+  }
+
+  function buzz(pattern) {
+    if (typeof navigator.vibrate !== 'function') return;
+    try {
+      navigator.vibrate(pattern);
+    } catch (e) {
+      /* unsupported in this context — no-op */
+    }
+  }
+
+  function play(name) {
+    const cue = CUES[name];
+    if (!cue || isMuted()) return;
+    tone(cue);
+    if (cue.haptic) buzz(cue.haptic);
+  }
+
+  window.mtui = Object.assign(window.mtui || {}, {
+    feedback: {
+      play,
+      get muted() {
+        return isMuted();
+      },
+      set muted(value) {
+        setMuted(!!value);
+      },
+    },
+  });
+
+  document.addEventListener('change', (e) => {
+    if (e.target.matches('.switch[data-feedback], .checkbox[data-feedback], .radio[data-feedback]')) {
+      play(e.target.checked ? 'toggle-on' : 'toggle-off');
+    }
+  });
+
+  document.addEventListener('click', (e) => {
+    const el = e.target.closest('button[data-feedback], .btn[data-feedback]');
+    if (el) play(el.getAttribute('data-feedback') || 'success');
+  });
+
+  // A parent (e.g. the <x-toast> mount) and its just-appended child can
+  // land in separate MutationRecords from the same synchronous batch; by
+  // the time this callback runs both are already in the live tree, so
+  // scanning the parent's subtree can rediscover a child another record
+  // already reported. Track fired nodes so each element cues at most once.
+  const MOUNT_SELECTOR = '.toast[data-kind], [data-feedback][data-status="danger"]';
+  const fired = new WeakSet();
+  function scan(node) {
+    if (node.nodeType !== 1) return;
+    const found = node.matches(MOUNT_SELECTOR) ? [node] : [];
+    found.concat([...node.querySelectorAll(MOUNT_SELECTOR)]).forEach((el) => {
+      if (fired.has(el)) return;
+      fired.add(el);
+      play(el.classList.contains('toast') ? el.dataset.kind : 'error');
+    });
+  }
+
+  // Guard document.body: if this script is included in <head> without defer,
+  // body is null. The API + change/click listeners above are already live;
+  // only the mount-cue observer needs a live body, so defer it if needed.
+  function observeMounts() {
+    new MutationObserver((mutations) => {
+      mutations.forEach((m) => m.addedNodes.forEach(scan));
+    }).observe(document.body, { childList: true, subtree: true });
+  }
+  if (document.body) observeMounts();
+  else document.addEventListener('DOMContentLoaded', observeMounts, { once: true });
+})();
+/* MTUI menu positioning — tier: lightly Enhanced (no custom element).
+   Anchors any .menu[popover] below its [popovertarget] trigger, aligned to
+   the trigger's inline-start edge, flipped above when there is no room and
+   clamped to the viewport. Re-anchors on scroll/resize while open, so the
+   panel tracks its trigger instead of staying pinned at the viewport
+   position it opened at (which would visibly drift away from the trigger
+   as the page scrolls underneath it).
+   Basic (JS off): the popover opens centered in the top layer — Esc and
+   light-dismiss still work; nothing breaks.                                 */
+(function () {
+  'use strict';
+
+  function place(menu, trigger) {
+    const gap = parseFloat(
+      getComputedStyle(document.documentElement).getPropertyValue('--sp-8')
+    ) || 8;
+    const t = trigger.getBoundingClientRect();
+    const m = menu.getBoundingClientRect();
+    const rtl = getComputedStyle(menu).direction === 'rtl';
+
+    let top = t.bottom + gap;
+    if (top + m.height > window.innerHeight - gap) {
+      top = Math.max(gap, t.top - m.height - gap);
+    }
+    let x = rtl ? t.right - m.width : t.left;
+    x = Math.min(Math.max(gap, x), window.innerWidth - m.width - gap);
+
+    menu.style.position = 'fixed';
+    menu.style.top = `${Math.round(top)}px`;
+    menu.style.left = `${Math.round(x)}px`;
+    menu.style.margin = '0';
+  }
+
+  let tracking = null; // { menu, trigger, raf }
+
+  function stopTracking() {
+    if (!tracking) return;
+    cancelAnimationFrame(tracking.raf);
+    window.removeEventListener('scroll', tracking.onScroll, true);
+    window.removeEventListener('resize', tracking.onScroll);
+    tracking = null;
+  }
+
+  document.addEventListener('toggle', (e) => {
+    const menu = e.target;
+    if (!(menu instanceof HTMLElement) || !menu.matches('.menu[popover]')) return;
+
+    if (e.newState !== 'open') {
+      if (tracking && tracking.menu === menu) stopTracking();
+      return;
+    }
+
+    const trigger = document.querySelector(`[popovertarget="${menu.id}"]`);
+    if (!trigger) return;
+
+    if (tracking) stopTracking();
+    place(menu, trigger);
+
+    let queued = false;
+    const onScroll = () => {
+      if (queued) return;
+      queued = true;
+      tracking.raf = requestAnimationFrame(() => {
+        queued = false;
+        place(menu, trigger);
+      });
+    };
+    tracking = { menu, trigger, raf: 0, onScroll };
+    window.addEventListener('scroll', onScroll, true); // capture: any scrolling ancestor
+    window.addEventListener('resize', onScroll);
+  }, true); /* popover toggle doesn't bubble — capture phase catches it     */
+})();
+/* MTUI <x-pull-refresh> — tier: Enhanced over .screen-list.
+   Wraps a scrollable region; pulling down past the threshold at
+   scrollTop 0 dispatches a bubbling `refresh` CustomEvent whose
+   detail.done() the app calls when its async work finishes.
+   Pointer Events, so mouse/trackpad/pen work the same as touch — this is
+   a drag gesture, not a touch-only affordance.
+   Basic (no JS): no affordance — the list just scrolls normally.
+   <x-pull-refresh>
+     <div class="screen-list">…</div>
+   </x-pull-refresh>
+   app.addEventListener('refresh', (e) => {
+     loadMessages().then(() => { e.detail.done(); mtui.toast('Updated'); });
+   });                                                                     */
+(function () {
+  'use strict';
+  if (customElements.get('x-pull-refresh')) return;
+
+  const THRESHOLD = 64;
+  const MAX_PULL = 96;
+
+  class XPullRefresh extends HTMLElement {
+    connectedCallback() {
+      if (this._built) return;
+      const scroller = this.querySelector('.screen-list, [data-pull-scroll]');
+      if (!scroller) return;
+      this._built = true;
+      this._build(scroller);
+    }
+
+    _build(scroller) {
+      scroller.style.position = 'relative';
+      scroller.style.overscrollBehaviorY = 'contain'; // don't chain into page scroll
+      const indicator = document.createElement('div');
+      indicator.className = 'pull-indicator';
+      scroller.prepend(indicator);
+
+      const reduced = () => {
+        const v = getComputedStyle(document.documentElement)
+          .getPropertyValue('--t-lift').trim();
+        return (parseFloat(v) || 0) === 0;
+      };
+
+      let startY = 0;
+      let dragging = false; // pointer is down and we've confirmed this is a pull, not a click
+      let refreshing = false;
+      let activePointerId = null;
+      let currentPull = 0;
+
+      const setPull = (px) => {
+        currentPull = px;
+        indicator.style.transform = `translateY(${px}px) rotate(${px * 3}deg)`;
+      };
+
+      scroller.addEventListener('pointerdown', (e) => {
+        if (refreshing || scroller.scrollTop > 0 || !e.isPrimary) return;
+        startY = e.clientY;
+        activePointerId = e.pointerId;
+        // Not yet a confirmed drag — a plain click/tap must still work
+        // normally. document-level listeners (not scroller-level) so the
+        // gesture keeps tracking even if the pointer leaves the element.
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', onUp);
+        document.addEventListener('pointercancel', onUp);
+      });
+
+      function onMove(e) {
+        if (e.pointerId !== activePointerId) return;
+        const dy = e.clientY - startY;
+        if (dy <= 0) { dragging = false; setPull(0); return; }
+        // Only now, once it's clearly a downward pull, do we take over the
+        // gesture — this is what keeps the page (and the internal list)
+        // from scrolling along with the pull.
+        dragging = true;
+        e.preventDefault();
+        setPull(Math.min(dy * 0.5, MAX_PULL));
+      }
+
+      function onUp() {
+        document.removeEventListener('pointermove', onMove);
+        document.removeEventListener('pointerup', onUp);
+        document.removeEventListener('pointercancel', onUp);
+        activePointerId = null;
+        if (!dragging) return;
+        dragging = false;
+        if (currentPull >= THRESHOLD) beginRefresh(); else springBack();
+      }
+
+      function springBack() {
+        indicator.style.transition = reduced() ? 'none' : 'transform var(--t-knob) var(--spring)';
+        setPull(0);
+        indicator.addEventListener('transitionend', function onEnd() {
+          indicator.style.transition = '';
+          indicator.removeEventListener('transitionend', onEnd);
+        });
+      }
+
+      function beginRefresh() {
+        refreshing = true;
+        indicator.style.transition = reduced() ? 'none' : 'transform var(--t-knob) var(--spring)';
+        setPull(THRESHOLD * 0.6);
+        indicator.dataset.spinning = '';
+
+        let settled = false;
+        const done = () => {
+          if (settled) return;
+          settled = true;
+          delete indicator.dataset.spinning;
+          refreshing = false;
+          springBack();
+        };
+
+        scroller.dispatchEvent(new CustomEvent('refresh', {
+          bubbles: true,
+          detail: { done },
+        }));
+        setTimeout(done, 15000); // safety: never spin forever if the app forgets done()
+      }
+    }
+  }
+
+  customElements.define('x-pull-refresh', XPullRefresh);
+})();
+/* MTUI Telegram adapter — tier: JS-only, layered opt-in (loads harmlessly
+   anywhere; no-ops unless window.Telegram.WebApp is present).
+
+   Maps the host theme onto MTUI so a mini app looks and feels native to the
+   Telegram shell: the user's background, surfaces, text, and brand accent all
+   come straight from themeParams. Telegram supplies ~2 backgrounds + 2 text
+   levels + an accent; MTUI's ladder needs 4 surfaces, 3 text tones, and a
+   full accent family, so the gaps are DERIVED in OKLCH from the host's own
+   colors (never invented from scratch):
+     pass-through : --bg --surface --text --text-muted --accent --on-accent
+                    --accent-text        (host values, verbatim)
+     derived      : --surface-2 --surface-3   (step from surface toward text)
+                    --text-faint             (muted blended toward bg)
+                    --accent-hover           (accent lightness −0.05)
+                    --accent-tint            (§2.14 tint from the accent hue)
+   Contrast is delegated to the host pairings (button_text_color, link_color),
+   which Telegram themes already guarantee legible.
+
+   themeParams -> MTUI slots:
+     secondary_bg_color -> --bg          (the recessed page background)
+     bg_color           -> --surface     (raised cards/sections)
+     text_color         -> --text
+     hint_color         -> --text-muted
+     button_color       -> --accent      (+ button_text_color -> --on-accent)
+     link_color         -> --accent-text
+   Re-applied on load and on Telegram's themeChanged; data-theme tracks
+   colorScheme so MTUI's status tints and forced-colors pick the right base.
+
+   API: mtui.telegram.sync()                    // read live WebApp + apply
+        mtui.telegram.apply(themeParams, scheme) // apply given values (testing)
+
+   Basic (JS off, or outside Telegram): silent no-op — the screen keeps the
+   tokens.css defaults, functional and on-language. */
+(function () {
+  'use strict';
+
+  const clamp01 = (n) => Math.min(1, Math.max(0, n));
+  const r3 = (n) => Number(n.toFixed(3));
+  const r1 = (n) => Number(n.toFixed(1));
+
+  // "#rgb" / "#rrggbb" (with or without #) -> "#rrggbb", or null if unusable.
+  function normHex(hex) {
+    if (typeof hex !== 'string') return null;
+    let h = hex.trim().replace(/^#/, '');
+    if (h.length === 3) h = h.split('').map((c) => c + c).join('');
+    return /^[0-9a-fA-F]{6}$/.test(h) ? '#' + h.toLowerCase() : null;
+  }
+
+  // sRGB hex -> OKLCH {L (0–1), C, H (deg)}. null on unparseable input.
+  function hexToLCH(hex) {
+    const h = normHex(hex);
+    if (!h) return null;
+    const toLinear = (v) => {
+      const c = v / 255;
+      return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    };
+    const r = toLinear(parseInt(h.slice(1, 3), 16));
+    const g = toLinear(parseInt(h.slice(3, 5), 16));
+    const b = toLinear(parseInt(h.slice(5, 7), 16));
+    // linear sRGB -> LMS -> OKLab (Ottosson matrices).
+    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+    const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+    const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+    const L = 0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s;
+    const oa = 1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s;
+    const ob = 0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s;
+    let H = (Math.atan2(ob, oa) * 180) / Math.PI;
+    if (H < 0) H += 360;
+    return { L, C: Math.sqrt(oa * oa + ob * ob), H };
+  }
+
+  const fmt = (lch) => `oklch(${r1(lch.L * 100)}% ${r3(lch.C)} ${Math.round(lch.H)})`;
+
+  // Nudge lightness a fixed delta in the direction of a target L (chroma/hue
+  // kept). Light theme: surface is light, text dark -> steps darker (recede);
+  // dark theme: steps lighter. Same rule works for both.
+  const towardL = (base, targetL, delta) => ({
+    L: clamp01(base.L + Math.sign(targetL - base.L || 1) * delta),
+    C: base.C,
+    H: base.H,
+  });
+
+  // Blend two OKLCH colors (shortest-path hue) — used for near-grey text tones.
+  function mix(a, b, t) {
+    let dh = b.H - a.H;
+    if (dh > 180) dh -= 360;
+    if (dh < -180) dh += 360;
+    return { L: a.L + (b.L - a.L) * t, C: a.C + (b.C - a.C) * t, H: a.H + dh * t };
+  }
+
+  // §2.14 tint from the accent's hue/chroma, per theme.
+  const tint = (acc, dark) =>
+    dark
+      ? { L: 0.30, C: 0.35 * acc.C, H: acc.H }
+      : { L: 0.92, C: Math.min(0.32 * acc.C, 0.05), H: acc.H };
+
+  const MANAGED = [
+    '--bg', '--surface', '--surface-2', '--surface-3',
+    '--text', '--text-muted', '--text-faint',
+    '--accent', '--accent-hover', '--accent-text', '--accent-tint', '--on-accent',
+  ];
+
+  function apply(themeParams, scheme) {
+    const root = document.documentElement;
+    const dark = scheme === 'dark';
+    root.setAttribute('data-theme', dark ? 'dark' : 'light');
+
+    // Start clean so a sparser theme (e.g. after themeChanged) can't leave
+    // stale overrides from a richer previous one.
+    MANAGED.forEach((p) => root.style.removeProperty(p));
+
+    const tp = themeParams || {};
+    const surfaceHex = normHex(tp.bg_color) || normHex(tp.section_bg_color) || normHex(tp.secondary_bg_color);
+    const bgRaw = normHex(tp.secondary_bg_color);
+    // Only use the host bg if it's actually distinct from the surface; a sparse
+    // theme (only secondary_bg_color) would otherwise collapse the tonal step.
+    const bgHex = bgRaw && bgRaw !== surfaceHex ? bgRaw : null;
+    const textHex = normHex(tp.text_color);
+
+    // Need at least a base surface + text to meaningfully theme the shell;
+    // otherwise leave the tokens.css defaults in place.
+    if (!surfaceHex || !textHex) return;
+
+    const surface = hexToLCH(surfaceHex);
+    const text = hexToLCH(textHex);
+    const bg = bgHex ? hexToLCH(bgHex) : { L: clamp01(surface.L - 0.05), C: surface.C, H: surface.H };
+    const mutedHex = normHex(tp.hint_color) || normHex(tp.subtitle_text_color);
+    const muted = mutedHex ? hexToLCH(mutedHex) : mix(text, bg, 0.45);
+
+    const set = (prop, val) => root.style.setProperty(prop, val);
+    set('--bg', bgHex || fmt(bg));
+    set('--surface', surfaceHex);
+    set('--surface-2', fmt(towardL(surface, text.L, 0.035)));
+    set('--surface-3', fmt(towardL(surface, text.L, 0.075)));
+    set('--text', textHex);
+    set('--text-muted', mutedHex || fmt(muted));
+    set('--text-faint', fmt(mix(muted, bg, 0.45)));
+
+    const accentHex = normHex(tp.button_color);
+    if (accentHex) {
+      const acc = hexToLCH(accentHex);
+      root.setAttribute('data-accent', 'custom');
+      set('--accent', accentHex);
+      set('--on-accent', normHex(tp.button_text_color) || '#FFFFFF');
+      set('--accent-hover', fmt({ L: clamp01(acc.L - 0.05), C: acc.C, H: acc.H }));
+      set('--accent-text', normHex(tp.link_color) || normHex(tp.accent_text_color) || accentHex);
+      set('--accent-tint', fmt(tint(acc, dark)));
+    } else {
+      // No host accent this round — drop a stale data-accent="custom" so the
+      // accent doesn't silently revert to the default ramp while the attr lies.
+      root.removeAttribute('data-accent');
+    }
+  }
+
+  function currentWebApp() {
+    return (window.Telegram && window.Telegram.WebApp) || null;
+  }
+
+  function sync() {
+    const wa = currentWebApp();
+    if (!wa) return false;
+    apply(wa.themeParams || {}, wa.colorScheme);
+    return true;
+  }
+
+  window.mtui = Object.assign(window.mtui || {}, {
+    telegram: { sync, apply },
+  });
+
+  const wa = currentWebApp();
+  if (wa) {
+    sync();
+    if (typeof wa.onEvent === 'function') wa.onEvent('themeChanged', sync);
+  }
+})();
+/* MTUI <x-colorswatches> — tier: Enhanced over Basic native
+   <input type="color">. Curated swatches only, never a free color wheel.
+   Basic (no JS): the native color input renders and works normally.
+   <x-colorswatches data-colors="#BC4B2A,#3556C9,#2F7A50,#6E46BD,#7A5600">
+     <label class="field">
+       <span class="t-label">Tag color</span>
+       <input type="color" value="#BC4B2A">
+     </label>
+   </x-colorswatches>
+   data-colors on the host element is the one canonical swatch source.
+   Dispatches a bubbling `change` CustomEvent (detail: { value }) on the
+   underlying input.                                                       */
+(function () {
+  'use strict';
+  if (customElements.get('x-colorswatches')) return;
+
+  let seq = 0;
+
+  function luminance(hex) {
+    const n = hex.replace('#', '');
+    const [r, g, b] = [0, 2, 4].map((i) => {
+      const c = parseInt(n.slice(i, i + 2), 16) / 255;
+      return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  }
+
+  class XColorswatches extends HTMLElement {
+    connectedCallback() {
+      if (this._built) return;
+      const input = this.querySelector('input[type="color"]');
+      if (!input) return;
+      this._built = true;
+      this._build(input);
+    }
+
+    _build(input) {
+      const panelId = `x-swatches-panel-${++seq}`;
+      const labelText = this.querySelector('.t-label')?.textContent.trim();
+      const colors = (this.dataset.colors || '')
+        .split(',')
+        .map((c) => c.trim())
+        .filter(Boolean);
+      if (!colors.length) return;
+
+      input.setAttribute('tabindex', '-1');
+      input.setAttribute('aria-hidden', 'true');
+      input.style.position = 'absolute';
+      input.style.opacity = '0';
+      input.style.pointerEvents = 'none';
+      input.style.inlineSize = '1px';
+      input.style.blockSize = '1px';
+
+      const trigger = document.createElement('button');
+      trigger.type = 'button';
+      trigger.className = 'swatches-trigger';
+      trigger.setAttribute('aria-haspopup', 'true');
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.setAttribute('popovertarget', panelId);
+      if (labelText) trigger.setAttribute('aria-label', labelText);
+      const swatchPreview = document.createElement('span');
+      swatchPreview.className = 'swatches-trigger-swatch';
+      const triggerLabel = document.createElement('span');
+      trigger.append(swatchPreview, triggerLabel);
+
+      const panel = document.createElement('div');
+      panel.className = 'swatches-panel menu';
+      panel.id = panelId;
+      panel.setAttribute('popover', '');
+      panel.setAttribute('role', 'radiogroup');
+      if (labelText) panel.setAttribute('aria-label', labelText);
+
+      const swatches = colors.map((color) => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'swatch';
+        btn.style.background = color;
+        btn.style.setProperty('--swatch-check-color', luminance(color) > 0.5 ? '#000' : '#fff');
+        btn.setAttribute('role', 'radio');
+        btn.dataset.color = color;
+        btn.setAttribute('aria-label', color);
+        btn.addEventListener('click', () => commit(color));
+        panel.append(btn);
+        return btn;
+      });
+
+      input.before(trigger);
+      document.body.append(panel);
+
+      const syncFace = () => {
+        const value = input.value.toUpperCase();
+        swatchPreview.style.background = value;
+        triggerLabel.textContent = value;
+        swatches.forEach((s) => {
+          s.setAttribute('aria-checked', String(s.dataset.color.toUpperCase() === value));
+          s.tabIndex = s.dataset.color.toUpperCase() === value ? 0 : -1;
+        });
+      };
+
+      function commit(color) {
+        const changed = input.value.toUpperCase() !== color.toUpperCase();
+        input.value = color;
+        syncFace();
+        panel.hidePopover();
+        trigger.focus();
+        if (changed) {
+          input.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            detail: { value: input.value },
+          }));
+        }
+      }
+
+      panel.addEventListener('keydown', (e) => {
+        const current = document.activeElement.closest('.swatch');
+        if (!current) return;
+        const idx = swatches.indexOf(current);
+        if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          (swatches[idx + 1] || swatches[0]).focus();
+        } else if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          (swatches[idx - 1] || swatches[swatches.length - 1]).focus();
+        } else if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          commit(current.dataset.color);
+        }
+      });
+
+      panel.addEventListener('toggle', (e) => {
+        const open = e.newState === 'open';
+        trigger.setAttribute('aria-expanded', String(open));
+        if (open) panel.querySelector('[tabindex="0"]')?.focus();
+      });
+
+      if (!colors.some((c) => c.toUpperCase() === input.value.toUpperCase())) {
+        input.value = colors[0];
+      }
+      syncFace();
+    }
+  }
+
+  customElements.define('x-colorswatches', XColorswatches);
+})();
+/* MTUI <x-contextmenu> — tier: Enhanced. Wraps any region; a <template>
+   child declares the menu, cloned into a popover panel positioned at the
+   pointer (right-click) or touch point (long-press ~500ms).
+   Uses popover="manual" with its own light-dismiss: the native "auto"
+   popover's built-in light-dismiss reacts to the SAME right-click
+   gesture that opens it (contextmenu fires on the button's press on some
+   platforms, release on others), so it could close itself the instant
+   the mouse button lifts — reading as "the menu only stays up while I
+   hold the click down." Registering our own outside-pointerdown listener
+   a tick after opening sidesteps that race.
+   Basic (no JS): the browser's native context menu appears — content
+   itself is unaffected.
+   <x-contextmenu>
+     <div class="card">Right-click me</div>
+     <template>
+       <button class="menu-item" data-value="rename">Rename</button>
+       <button class="menu-item" data-value="delete" data-danger>Delete</button>
+     </template>
+   </x-contextmenu>
+   Item activation dispatches a bubbling `select` CustomEvent
+   (detail: { value, target }) — value is the clicked item's data-value;
+   target is the element the gesture opened on. Wrap a whole list in ONE
+   x-contextmenu and read detail.target.closest('.item') to know which row
+   fired, instead of one menu per row.
+   Touch discoverability: a right-click/long-press has no visible affordance,
+   so give each row a trigger button carrying data-contextmenu-trigger (e.g. a
+   trailing "more" icon) — clicking it opens the same menu, anchored to the
+   button, with target set to it. Add aria-haspopup="menu" to that button.    */
+(function () {
+  'use strict';
+  if (customElements.get('x-contextmenu')) return;
+
+  let seq = 0;
+  const LONG_PRESS_MS = 500;
+  const MOVE_TOLERANCE = 10;
+
+  class XContextmenu extends HTMLElement {
+    connectedCallback() {
+      if (this._built) return;
+      const template = this.querySelector('template');
+      if (!template) return;
+      this._built = true;
+      this._build(template);
+    }
+
+    _build(template) {
+      const panelId = `x-contextmenu-panel-${++seq}`;
+      const panel = document.createElement('div');
+      panel.className = 'menu context-menu';
+      panel.id = panelId;
+      panel.setAttribute('popover', 'manual');
+      panel.setAttribute('role', 'menu');
+      panel.append(template.content.cloneNode(true));
+      document.body.append(panel);
+
+      // The element the gesture landed on, captured at open time (the panel
+      // lives in <body>, so the item click's own target is the menu item, not
+      // the row). Lets ONE x-contextmenu wrap a whole list: select.detail.target
+      // is the origin element — the app calls .closest('.item') to find the row.
+      let origin = null;
+
+      const items = [...panel.querySelectorAll('.menu-item')];
+      items.forEach((item) => {
+        item.setAttribute('role', 'menuitem');
+        item.addEventListener('click', () => {
+          const target = origin;
+          close();
+          this.dispatchEvent(new CustomEvent('select', {
+            bubbles: true,
+            detail: { value: item.dataset.value, target },
+          }));
+        });
+      });
+
+      let returnFocus = null;
+      let onOutside = null;
+      let isOpen = false;
+
+      function close() {
+        if (!isOpen) return;
+        isOpen = false;
+        panel.hidePopover();
+        if (onOutside) {
+          document.removeEventListener('pointerdown', onOutside, true);
+          onOutside = null;
+        }
+        returnFocus?.focus();
+        returnFocus = null;
+      }
+      this._teardown = () => { close(); panel.remove(); };
+
+      const openAt = (x, y, originEl) => {
+        if (isOpen) close();            // reposition on re-open; avoids double showPopover
+        origin = originEl || null;
+        // Keyboard-invoked (Menu key / Shift+F10) contextmenu reports 0/absent
+        // coords — anchor to the focused element instead of the corner.
+        if (!x && !y && originEl && originEl.getBoundingClientRect) {
+          const r = originEl.getBoundingClientRect();
+          x = r.left;
+          y = r.bottom;
+        }
+        returnFocus = document.activeElement;
+        isOpen = true;
+        panel.style.position = 'fixed';
+        panel.style.margin = '0';
+        panel.showPopover();
+        const gap = 4;
+        const rect = panel.getBoundingClientRect();
+        const left = Math.min(Math.max(gap, x), innerWidth - rect.width - gap);
+        const top = Math.min(Math.max(gap, y), innerHeight - rect.height - gap);
+        panel.style.left = `${Math.round(left)}px`;
+        panel.style.top = `${Math.round(top)}px`;
+        items[0]?.focus();
+
+        onOutside = (e) => {
+          if (!panel.contains(e.target)) close();
+        };
+        // Registered on the next tick — see the file header comment on why
+        // this can't be wired synchronously during the opening gesture.
+        setTimeout(() => document.addEventListener('pointerdown', onOutside, true), 0);
+      };
+
+      this.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+        openAt(e.clientX, e.clientY, e.target);
+      });
+
+      // A visible tap affordance: any [data-contextmenu-trigger] inside the
+      // region opens the same menu on click (mouse/touch/keyboard), anchored
+      // to the button. origin = the trigger, so select.detail.target.closest()
+      // still finds the row. Gesture-only menus are undiscoverable on touch.
+      this.addEventListener('click', (e) => {
+        const trigger = e.target.closest('[data-contextmenu-trigger]');
+        if (!trigger || !this.contains(trigger)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const r = trigger.getBoundingClientRect();
+        openAt(r.left, r.bottom, trigger);
+      });
+
+      let pressTimer = null;
+      let startX = 0;
+      let startY = 0;
+      let startTarget = null;
+      this.addEventListener('touchstart', (e) => {
+        const t = e.touches[0];
+        startX = t.clientX;
+        startY = t.clientY;
+        startTarget = e.target;
+        pressTimer = setTimeout(() => openAt(startX, startY, startTarget), LONG_PRESS_MS);
+      }, { passive: true });
+      this.addEventListener('touchmove', (e) => {
+        const t = e.touches[0];
+        if (Math.abs(t.clientX - startX) > MOVE_TOLERANCE
+          || Math.abs(t.clientY - startY) > MOVE_TOLERANCE) {
+          clearTimeout(pressTimer);
+        }
+      }, { passive: true });
+      this.addEventListener('touchend', () => clearTimeout(pressTimer));
+      this.addEventListener('touchcancel', () => clearTimeout(pressTimer));
+
+      panel.addEventListener('keydown', (e) => {
+        const idx = items.indexOf(document.activeElement);
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          (items[idx + 1] || items[0])?.focus();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          (items[idx - 1] || items[items.length - 1])?.focus();
+        } else if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          document.activeElement?.click();
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          close();
+        }
+      });
+    }
+
+    disconnectedCallback() {
+      // Remove the body-appended panel + any open outside-listener so a
+      // removed host doesn't leak (and can rebuild if re-added).
+      this._teardown?.();
+      this._teardown = null;
+      this._built = false;
+    }
+  }
+
+  customElements.define('x-contextmenu', XContextmenu);
+})();
+/* MTUI <x-datepicker> — tier: Enhanced over Basic native <input type="date">.
+   Single date only — no ranges, no times (kept out of v1 scope).
+   Basic (no JS): the native date input renders and works normally.
+   <x-datepicker>
+     <label class="field">
+       <span class="t-label">Start date</span>
+       <input type="date" min="2026-01-01" max="2026-12-31" value="2026-07-07">
+     </label>
+   </x-datepicker>
+   Dispatches a bubbling `change` CustomEvent (detail: { value }) on the
+   underlying input, value in the native YYYY-MM-DD format.
+   Tap the header to zoom out: day grid -> month grid -> scrollable year
+   list -> back to day grid. Prev/next step by month/year/scroll-page
+   depending on the current level — faster than repeated month clicks
+   when jumping further than a month or two.                              */
+(function () {
+  'use strict';
+  if (customElements.get('x-datepicker')) return;
+
+  let seq = 0;
+  const iso = (d) => {
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${y}-${m}-${day}`;
+  };
+  const parseIso = (s) => {
+    if (!s) return null;
+    const [y, m, d] = s.split('-').map(Number);
+    return new Date(y, m - 1, d);
+  };
+  const sameDay = (a, b) => a && b
+    && a.getFullYear() === b.getFullYear()
+    && a.getMonth() === b.getMonth()
+    && a.getDate() === b.getDate();
+
+  class XDatepicker extends HTMLElement {
+    connectedCallback() {
+      if (this._built) return;
+      const input = this.querySelector('input[type="date"]');
+      if (!input) return;
+      this._built = true;
+      this._build(input);
+    }
+
+    _build(input) {
+      const panelId = `x-datepicker-panel-${++seq}`;
+      const labelText = this.querySelector('.t-label')?.textContent.trim();
+      const lang = document.documentElement.lang || undefined;
+      const monthFmt = new Intl.DateTimeFormat(lang, { month: 'long', year: 'numeric' });
+      const monthShortFmt = new Intl.DateTimeFormat(lang, { month: 'short' });
+      const weekdayFmt = new Intl.DateTimeFormat(lang, { weekday: 'short' });
+      const min = parseIso(input.min);
+      const max = parseIso(input.max);
+
+      input.setAttribute('tabindex', '-1');
+      input.setAttribute('aria-hidden', 'true');
+      input.style.position = 'absolute';
+      input.style.opacity = '0';
+      input.style.pointerEvents = 'none';
+      input.style.inlineSize = '1px';
+      input.style.blockSize = '1px';
+
+      const trigger = document.createElement('button');
+      trigger.type = 'button';
+      trigger.className = 'select-trigger';
+      trigger.setAttribute('aria-haspopup', 'dialog');
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.setAttribute('popovertarget', panelId);
+      if (labelText) trigger.setAttribute('aria-label', labelText);
+      const triggerLabel = document.createElement('span');
+      trigger.append(triggerLabel);
+
+      const panel = document.createElement('div');
+      panel.className = 'datepicker-panel menu';
+      panel.id = panelId;
+      panel.setAttribute('popover', '');
+      if (labelText) panel.setAttribute('aria-label', labelText);
+
+      const header = document.createElement('div');
+      header.className = 'datepicker-header';
+      const prev = document.createElement('button');
+      prev.type = 'button';
+      prev.className = 'datepicker-nav';
+      prev.dataset.dir = 'prev';
+      const headerLabel = document.createElement('button');
+      headerLabel.type = 'button';
+      headerLabel.className = 'datepicker-header-label';
+      const next = document.createElement('button');
+      next.type = 'button';
+      next.className = 'datepicker-nav';
+      next.dataset.dir = 'next';
+      header.append(prev, headerLabel, next);
+
+      const weekdays = document.createElement('div');
+      weekdays.className = 'datepicker-weekdays';
+      const weekStart = new Date(2024, 0, 7); // a Sunday
+      for (let i = 0; i < 7; i++) {
+        const d = document.createElement('span');
+        const day = new Date(weekStart);
+        day.setDate(day.getDate() + i);
+        d.textContent = weekdayFmt.format(day);
+        weekdays.append(d);
+      }
+
+      const grid = document.createElement('div');
+      grid.className = 'datepicker-grid';
+      grid.setAttribute('role', 'grid');
+
+      const footer = document.createElement('div');
+      footer.className = 'datepicker-footer';
+      const todayBtn = document.createElement('button');
+      todayBtn.type = 'button';
+      todayBtn.className = 'btn';
+      todayBtn.setAttribute('data-variant', 'ghost');
+      todayBtn.textContent = 'Today';
+      footer.append(todayBtn);
+
+      panel.append(header, weekdays, grid, footer);
+      input.before(trigger);
+      document.body.append(panel);
+
+      let selected = parseIso(input.value);
+      let viewYear = (selected || new Date()).getFullYear();
+      let viewMonth = (selected || new Date()).getMonth();
+      let viewMode = 'days'; // 'days' | 'months'
+
+      const syncTrigger = () => {
+        triggerLabel.textContent = selected
+          ? new Intl.DateTimeFormat(lang, { dateStyle: 'medium' }).format(selected)
+          : 'Select date';
+      };
+
+      function commit(date) {
+        selected = date;
+        input.value = iso(date);
+        syncTrigger();
+        panel.hidePopover();
+        trigger.focus();
+        input.dispatchEvent(new CustomEvent('change', {
+          bubbles: true,
+          detail: { value: input.value },
+        }));
+      }
+
+      function render() {
+        grid.innerHTML = '';
+        if (viewMode === 'months') {
+          renderMonths();
+        } else if (viewMode === 'years') {
+          renderYears();
+        } else {
+          renderDays();
+        }
+      }
+
+      function renderDays() {
+        weekdays.hidden = false;
+        grid.setAttribute('data-view', 'days');
+        headerLabel.textContent = monthFmt.format(new Date(viewYear, viewMonth, 1));
+        prev.setAttribute('aria-label', 'Previous month');
+        next.setAttribute('aria-label', 'Next month');
+
+        const firstOfMonth = new Date(viewYear, viewMonth, 1);
+        const startOffset = firstOfMonth.getDay(); // Sunday-start grid (v1)
+        const gridStart = new Date(viewYear, viewMonth, 1 - startOffset);
+        const today = new Date();
+
+        for (let i = 0; i < 42; i++) {
+          const day = new Date(gridStart);
+          day.setDate(day.getDate() + i);
+          const btn = document.createElement('button');
+          btn.type = 'button';
+          btn.className = 'datepicker-day';
+          btn.setAttribute('role', 'gridcell');
+          btn.textContent = String(day.getDate());
+          btn.dataset.iso = iso(day);
+          if (day.getMonth() !== viewMonth) btn.dataset.outside = '';
+          if (sameDay(day, today)) btn.setAttribute('data-today', '');
+          if (sameDay(day, selected)) btn.setAttribute('aria-selected', 'true');
+          if ((min && day < min) || (max && day > max)) btn.disabled = true;
+          btn.tabIndex = sameDay(day, selected) || (!selected && sameDay(day, today)) ? 0 : -1;
+          btn.addEventListener('click', () => commit(new Date(day)));
+          grid.append(btn);
+        }
+      }
+
+      function renderMonths() {
+        weekdays.hidden = true;
+        grid.setAttribute('data-view', 'months');
+        headerLabel.textContent = String(viewYear);
+        prev.setAttribute('aria-label', 'Previous year');
+        next.setAttribute('aria-label', 'Next year');
+
+        for (let m = 0; m < 12; m++) {
+          const btn = document.createElement('button');
+          btn.type = 'button';
+          btn.className = 'datepicker-day datepicker-month';
+          btn.setAttribute('role', 'gridcell');
+          btn.textContent = monthShortFmt.format(new Date(viewYear, m, 1));
+          if (m === viewMonth) btn.setAttribute('aria-selected', 'true');
+          btn.tabIndex = m === viewMonth ? 0 : -1;
+          btn.addEventListener('click', () => {
+            viewMonth = m;
+            viewMode = 'days';
+            render();
+            grid.querySelector('[tabindex="0"]')?.focus();
+          });
+          grid.append(btn);
+        }
+      }
+
+      function renderYears() {
+        weekdays.hidden = true;
+        grid.setAttribute('data-view', 'years');
+        headerLabel.textContent = 'Select year';
+        prev.setAttribute('aria-label', 'Scroll up');
+        next.setAttribute('aria-label', 'Scroll down');
+
+        const rangeStart = min ? min.getFullYear() : viewYear - 100;
+        const rangeEnd = max ? max.getFullYear() : viewYear + 100;
+        for (let y = rangeStart; y <= rangeEnd; y++) {
+          const btn = document.createElement('button');
+          btn.type = 'button';
+          btn.className = 'datepicker-day datepicker-year';
+          btn.setAttribute('role', 'gridcell');
+          btn.textContent = String(y);
+          if (y === viewYear) btn.setAttribute('aria-selected', 'true');
+          btn.tabIndex = y === viewYear ? 0 : -1;
+          btn.addEventListener('click', () => {
+            viewYear = y;
+            viewMode = 'months';
+            render();
+            grid.querySelector('[tabindex="0"]')?.focus();
+          });
+          grid.append(btn);
+        }
+        // bring the current year into view without an initial janky jump —
+        // reduced motion collapses --t-lift to 0ms, so this stays instant.
+        const smooth = (parseFloat(getComputedStyle(document.documentElement)
+          .getPropertyValue('--t-lift')) || 0) > 0;
+        requestAnimationFrame(() => {
+          grid.querySelector('[aria-selected="true"]')
+            ?.scrollIntoView({ block: 'center', behavior: smooth ? 'smooth' : 'auto' });
+        });
+      }
+
+      headerLabel.addEventListener('click', () => {
+        viewMode = viewMode === 'days' ? 'months' : viewMode === 'months' ? 'years' : 'days';
+        render();
+        grid.querySelector('[tabindex="0"]')?.focus();
+      });
+
+      prev.addEventListener('click', () => {
+        if (viewMode === 'years') {
+          grid.scrollBy({ top: -grid.clientHeight * 0.9 });
+        } else if (viewMode === 'months') {
+          viewYear -= 1;
+          render();
+        } else {
+          viewMonth -= 1;
+          if (viewMonth < 0) { viewMonth = 11; viewYear -= 1; }
+          render();
+        }
+      });
+      next.addEventListener('click', () => {
+        if (viewMode === 'years') {
+          grid.scrollBy({ top: grid.clientHeight * 0.9 });
+        } else if (viewMode === 'months') {
+          viewYear += 1;
+          render();
+        } else {
+          viewMonth += 1;
+          if (viewMonth > 11) { viewMonth = 0; viewYear += 1; }
+          render();
+        }
+      });
+      todayBtn.addEventListener('click', () => {
+        const t = new Date();
+        viewYear = t.getFullYear();
+        viewMonth = t.getMonth();
+        viewMode = 'days';
+        render();
+        commit(t);
+      });
+
+      grid.addEventListener('keydown', (e) => {
+        const current = document.activeElement.closest('.datepicker-day');
+        if (!current) return;
+        const cells = [...grid.children];
+        const idx = cells.indexOf(current);
+        const rowSpan = viewMode === 'months' ? 4 : viewMode === 'years' ? 1 : 7;
+        const moves = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: rowSpan, ArrowUp: -rowSpan };
+        if (e.key in moves) {
+          e.preventDefault();
+          const target = cells[idx + moves[e.key]];
+          if (target) { target.tabIndex = 0; current.tabIndex = -1; target.focus(); }
+        } else if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          if (!current.disabled) current.click();
+        }
+      });
+
+      panel.addEventListener('toggle', (e) => {
+        const open = e.newState === 'open';
+        trigger.setAttribute('aria-expanded', String(open));
+        if (open) {
+          viewYear = (selected || new Date()).getFullYear();
+          viewMonth = (selected || new Date()).getMonth();
+          viewMode = 'days';
+          render();
+          grid.querySelector('[tabindex="0"]')?.focus();
+        }
+      });
+
+      syncTrigger();
+    }
+  }
+
+  customElements.define('x-datepicker', XDatepicker);
+})();
+/* MTUI <x-select> — tier: Enhanced over Basic .select (native <select>).
+   Wraps existing Basic field-select markup, hides the native select from
+   sight (kept as the value holder + no-JS fallback + form participant),
+   and draws an MTUI trigger + popover-ring listbox panel in its place.
+   Basic (no JS): the native select renders and works normally.
+   <x-select>
+     <label class="field">
+       <span class="t-label">Role</span>
+       <span class="select"><select>
+         <option value="designer">Designer</option>
+         <option value="engineer" selected>Engineer</option>
+       </select></span>
+     </label>
+   </x-select>
+   Dispatches a bubbling `change` CustomEvent (detail: { value }) on the
+   underlying <select> whenever the value changes via the panel.          */
+(function () {
+  'use strict';
+  if (customElements.get('x-select')) return;
+
+  let seq = 0;
+
+  class XSelect extends HTMLElement {
+    connectedCallback() {
+      if (this._built) return;
+      const select = this.querySelector('select');
+      if (!select) return; // nothing to enhance
+      this._built = true;
+      this._build(select);
+    }
+
+    _build(select) {
+      const wrap = select.closest('.select') || select;
+      const panelId = `x-select-panel-${++seq}`;
+      const labelText = this.querySelector('.t-label')?.textContent.trim();
+
+      wrap.style.display = 'none';
+      select.setAttribute('tabindex', '-1');
+      select.setAttribute('aria-hidden', 'true');
+
+      const trigger = document.createElement('button');
+      trigger.type = 'button';
+      trigger.className = 'select-trigger';
+      trigger.setAttribute('aria-haspopup', 'listbox');
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.setAttribute('popovertarget', panelId);
+      if (labelText) trigger.setAttribute('aria-label', labelText);
+      if (select.disabled) trigger.disabled = true;
+      const label = document.createElement('span');
+      trigger.append(label);
+
+      const panel = document.createElement('div');
+      panel.className = 'select-panel menu';
+      panel.id = panelId;
+      panel.setAttribute('popover', '');
+      panel.setAttribute('role', 'listbox');
+      if (labelText) panel.setAttribute('aria-label', labelText);
+
+      const options = [...select.options].map((opt, i) => {
+        const row = document.createElement('button');
+        row.type = 'button';
+        row.className = 'menu-item select-option';
+        row.textContent = opt.textContent;
+        row.setAttribute('role', 'option');
+        row.dataset.index = String(i);
+        if (opt.disabled) {
+          row.disabled = true;
+          row.setAttribute('aria-disabled', 'true');
+        }
+        row.addEventListener('click', () => commit(i));
+        panel.append(row);
+        return row;
+      });
+
+      wrap.before(trigger);
+      document.body.append(panel); // top layer via popover; anchored by js/menu.js
+
+      const syncFace = () => {
+        label.textContent = select.options[select.selectedIndex]?.textContent || '';
+        options.forEach((row, i) => {
+          const selected = i === select.selectedIndex;
+          row.setAttribute('aria-selected', String(selected));
+        });
+      };
+      syncFace();
+
+      function commit(index) {
+        const changed = select.selectedIndex !== index;
+        select.selectedIndex = index;
+        syncFace();
+        panel.hidePopover();
+        trigger.focus();
+        if (changed) {
+          select.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            detail: { value: select.value },
+          }));
+        }
+      }
+
+      panel.addEventListener('keydown', (e) => {
+        const enabled = options.filter((r) => !r.disabled);
+        const current = document.activeElement.closest('.select-option');
+        const idx = enabled.indexOf(current);
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          (enabled[idx + 1] || enabled[0])?.focus();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          (enabled[idx - 1] || enabled[enabled.length - 1])?.focus();
+        } else if (e.key === 'Home') {
+          e.preventDefault();
+          enabled[0]?.focus();
+        } else if (e.key === 'End') {
+          e.preventDefault();
+          enabled[enabled.length - 1]?.focus();
+        } else if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          if (current) commit(Number(current.dataset.index));
+        } else if (e.key.length === 1) {
+          const match = enabled.find((r) =>
+            r.textContent.trim().toLowerCase().startsWith(e.key.toLowerCase()));
+          match?.focus();
+        }
+      });
+
+      panel.addEventListener('toggle', (e) => {
+        const open = e.newState === 'open';
+        trigger.setAttribute('aria-expanded', String(open));
+        if (open) {
+          panel.style.minWidth = `${trigger.getBoundingClientRect().width}px`;
+          (options[select.selectedIndex] || options[0])?.focus();
+        }
+      });
+    }
+  }
+
+  customElements.define('x-select', XSelect);
+})();
+/* MTUI <x-tabs> — tier: Enhanced over Basic segmented.
+   Upgrades a .segmented radio group + [data-panel] siblings in place:
+   only the panel matching the checked radio's value shows.
+   Basic (JS off): all panels render, radios still select — functional.
+   Keyboard: native radio arrow-key behavior is the tab navigation.
+   Events: bubbling `change` CustomEvent with detail { value } (the native
+   radio change also bubbles through; listeners can read detail?.value ??
+   el.value).                                                                */
+(function () {
+  'use strict';
+  if (customElements.get('x-tabs')) return;
+
+  class XTabs extends HTMLElement {
+    connectedCallback() {
+      this.addEventListener('change', this);
+      this._sync(false);
+    }
+
+    disconnectedCallback() {
+      this.removeEventListener('change', this);
+    }
+
+    get value() {
+      const checked = this.querySelector('.segmented input:checked');
+      return checked ? checked.value : null;
+    }
+
+    handleEvent(e) {
+      if (e.target === this || !e.target.matches('.segmented input')) return;
+      this._sync(true);
+    }
+
+    _sync(emit) {
+      const value = this.value;
+      this.querySelectorAll('[data-panel]').forEach((panel) => {
+        panel.hidden = panel.dataset.panel !== value;
+      });
+      if (emit) {
+        this.dispatchEvent(new CustomEvent('change', {
+          bubbles: true,
+          detail: { value },
+        }));
+      }
+    }
+  }
+
+  customElements.define('x-tabs', XTabs);
+})();
+/* MTUI <x-theme> — tier: JS-only (an in-app theme switcher inherently needs
+   JS; without it the element is empty and the app keeps its current/persisted
+   theme, still functional and on-language).
+
+   The Telegram "Appearance" panel, MTUI-native: flip theme, tap an accent,
+   set corners + density. Writes ONLY to the <html> knobs (root-only rule,
+   DESIGN.md) and persists each choice to localStorage so it survives reloads.
+   Built from canonical .segmented groups + a row of accent dots; accent
+   colors are sampled live from tokens.css (never hard-coded).
+
+   Canonical markup — just the empty element; it renders its own controls:
+     <x-theme></x-theme>
+
+   Emits a bubbling CustomEvent on every change:
+     'themechange', detail: { key, value }   // key: theme|accent|radius|density|tint
+
+   localStorage keys: mtui-theme, mtui-accent, mtui-radius, mtui-density, mtui-tint.
+   Precedence on load: a stored value (only if it's a valid option) > current
+   <html> attribute > default. */
+(function () {
+  'use strict';
+
+  const KNOBS = [
+    { key: 'theme', attr: 'data-theme', label: 'Appearance',
+      opts: [['light', 'Light'], ['dark', 'Dark']] },
+    { key: 'accent', attr: 'data-accent', label: 'Accent', swatch: true,
+      opts: [['clay', 'Clay'], ['cobalt', 'Cobalt'], ['fern', 'Fern'], ['plum', 'Plum']] },
+    { key: 'radius', attr: 'data-radius', label: 'Corners',
+      opts: [['round', 'Round'], ['soft', 'Soft'], ['sharp', 'Sharp']] },
+    { key: 'density', attr: 'data-density', label: 'Density',
+      opts: [['comfortable', 'Comfortable'], ['compact', 'Compact']] },
+    { key: 'tint', attr: 'data-tint', label: 'Surface tint',
+      opts: [['accent', 'Accent'], ['warm', 'Warm']] },
+  ];
+  const byKey = (k) => KNOBS.find((x) => x.key === k);
+
+  const store = {
+    get(key) { try { return localStorage.getItem('mtui-' + key); } catch (e) { return null; } },
+    set(key, val) { try { localStorage.setItem('mtui-' + key, val); } catch (e) { /* storage off */ } },
+  };
+
+  // Read each accent's solid --accent from the stylesheet by briefly swapping
+  // the root knob (root-only; all swaps + restore happen in one sync turn, so
+  // nothing paints in between — no flash). Never invents a hex value.
+  function sampleAccents(root, values) {
+    const prev = root.getAttribute('data-accent');
+    const cs = getComputedStyle(root);
+    const out = {};
+    try {
+      values.forEach((v) => {
+        root.setAttribute('data-accent', v);
+        out[v] = cs.getPropertyValue('--accent').trim();
+      });
+    } finally {
+      // Always restore, even if reading a value throws — never strand the
+      // root on a sampled accent.
+      if (prev === null) root.removeAttribute('data-accent');
+      else root.setAttribute('data-accent', prev);
+    }
+    return out;
+  }
+
+  let uid = 0;
+
+  class ThemeControl extends HTMLElement {
+    connectedCallback() {
+      if (this._built) return; // guard re-entry on move/reparent
+      this._built = true;
+      const root = document.documentElement;
+      const id = ++uid;
+
+      const accentColors = sampleAccents(root, byKey('accent').opts.map((o) => o[0]));
+
+      // Resolve + apply each knob (stored pref wins) before reflecting state.
+      const current = {};
+      KNOBS.forEach((k) => {
+        // Prefer a stored pref only if it's a real option (guards corrupt/stale
+        // localStorage); otherwise keep the current attribute — which may be a
+        // legit non-preset like data-accent="custom" from the generator/Telegram
+        // — and never clobber it with the default.
+        const stored = store.get(k.key);
+        const valid = stored && k.opts.some(([v]) => v === stored);
+        const val = (valid ? stored : root.getAttribute(k.attr)) || k.opts[0][0];
+        root.setAttribute(k.attr, val);
+        current[k.key] = val;
+      });
+
+      const panel = document.createElement('div');
+      panel.className = 'theme-panel';
+
+      KNOBS.forEach((k) => {
+        const group = document.createElement('div');
+        group.className = 'theme-group';
+
+        const label = document.createElement('span');
+        label.className = 't-label';
+        label.textContent = k.label;
+        group.appendChild(label);
+
+        const name = `mtui-${k.key}-${id}`;
+        const container = document.createElement(k.swatch ? 'div' : 'fieldset');
+        container.dataset.knob = k.key;
+        container.className = k.swatch ? 'theme-accents' : 'segmented';
+        if (k.swatch) {
+          container.setAttribute('role', 'radiogroup');
+          container.setAttribute('aria-label', k.label);
+        }
+
+        k.opts.forEach(([value, text]) => {
+          const optLabel = document.createElement('label');
+          optLabel.className = k.swatch ? 'theme-accent' : '';
+          if (k.swatch) optLabel.style.setProperty('--dot', accentColors[value] || 'var(--accent)');
+
+          const input = document.createElement('input');
+          input.type = 'radio';
+          input.name = name;
+          input.value = value;
+          input.checked = current[k.key] === value;
+          if (k.swatch) input.setAttribute('aria-label', text);
+          optLabel.appendChild(input);
+
+          const face = document.createElement('span');
+          face.className = k.swatch ? 'theme-accent-dot' : '';
+          if (!k.swatch) face.textContent = text;
+          optLabel.appendChild(face);
+
+          container.appendChild(optLabel);
+        });
+
+        group.appendChild(container);
+        panel.appendChild(group);
+      });
+
+      this.replaceChildren(panel);
+
+      this.addEventListener('change', (e) => {
+        const input = e.target.closest('input[type="radio"]');
+        if (!input) return;
+        const holder = input.closest('[data-knob]');
+        if (!holder) return;
+        const key = holder.dataset.knob;
+        const value = input.value;
+        document.documentElement.setAttribute(byKey(key).attr, value);
+        store.set(key, value);
+        this.dispatchEvent(new CustomEvent('themechange', {
+          bubbles: true,
+          detail: { key, value },
+        }));
+      });
+    }
+  }
+
+  if (!customElements.get('x-theme')) customElements.define('x-theme', ThemeControl);
+})();
+/* MTUI <x-toast> — tier: JS-only.
+   Toast stack: inverse pills dropping from top center, max 3, slide-up
+   exit, pause on hover/focus. Toasts never carry the only copy of
+   critical information (there is no no-JS fallback).
+   API:  mtui.toast('Changes saved')
+         mtui.toast('Message deleted', {
+           action: { label: 'Undo', onClick: fn },
+           duration: 4000,        // ms visible; default 4000
+           kind: 'success',       // opt-in feedback cue: tick|success|error (js/feedback.js)
+         }) → dismiss()
+   The <x-toast> mount is created on first use (or place one in the page). */
+(function () {
+  'use strict';
+  if (customElements.get('x-toast')) return;
+
+  function cssVar(name) {
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  }
+
+  /* Removing a toast from the flex stack instantly snaps whatever was
+     below it up into the gap — CSS has no built-in transition for a
+     sibling's layout position changing. FLIP it: record where every
+     remaining toast sits before removal, let the browser reflow, then
+     play each one in from its old position to its new one. Skipped
+     entirely under reduced motion (--t-knob collapses to 0ms). */
+  function removeAndSettle(root, toast) {
+    const duration = parseFloat(cssVar('--t-knob')) || 0;
+    const siblings = [...root.querySelectorAll('.toast')].filter((t) => t !== toast);
+    const before = siblings.map((el) => el.getBoundingClientRect().top);
+
+    toast.remove();
+    if (duration === 0) return;
+
+    const easing = cssVar('--spring') || 'ease';
+    siblings.forEach((el, i) => {
+      const dy = before[i] - el.getBoundingClientRect().top;
+      if (!dy) return;
+      el.style.transition = 'none';
+      el.style.transform = `translateY(${dy}px)`;
+      el.getBoundingClientRect(); // force the browser to commit the jump before transitioning
+      requestAnimationFrame(() => {
+        el.style.transition = `transform ${duration}ms ${easing}`;
+        el.style.transform = '';
+      });
+      el.addEventListener('transitionend', function onEnd(e) {
+        if (e.propertyName !== 'transform') return;
+        el.style.transition = '';
+        el.removeEventListener('transitionend', onEnd);
+      });
+    });
+  }
+
+  class XToast extends HTMLElement {
+    connectedCallback() {
+      this.setAttribute('role', 'status');
+      this.setAttribute('aria-live', 'polite');
+    }
+
+    show(message, opts = {}) {
+      const toast = document.createElement('div');
+      toast.className = 'toast';
+      if (opts.kind) toast.dataset.kind = opts.kind;
+      const text = document.createElement('span');
+      text.textContent = message;
+      toast.append(text);
+
+      const dismiss = () => {
+        if ('leaving' in toast.dataset) return;
+        toast.dataset.leaving = '';
+        clearTimeout(timer);
+        toast.addEventListener('animationend', () => removeAndSettle(this, toast), { once: true });
+      };
+
+      if (opts.action) {
+        const btn = document.createElement('button');
+        btn.className = 'toast-action';
+        btn.textContent = opts.action.label;
+        btn.addEventListener('click', () => {
+          if (typeof opts.action.onClick === 'function') opts.action.onClick();
+          dismiss();
+        });
+        toast.append(btn);
+      }
+
+      this.append(toast);
+
+      const alive = [...this.querySelectorAll('.toast')]
+        .filter((t) => !('leaving' in t.dataset));
+      if (alive.length > 3) {
+        const oldest = alive[0];
+        oldest.dataset.leaving = '';
+        oldest.addEventListener('animationend', () => removeAndSettle(this, oldest), { once: true });
+      }
+
+      let timer = setTimeout(dismiss, opts.duration || 4000);
+      toast.addEventListener('mouseenter', () => clearTimeout(timer));
+      toast.addEventListener('focusin', () => clearTimeout(timer));
+      toast.addEventListener('mouseleave', () => {
+        clearTimeout(timer);
+        timer = setTimeout(dismiss, 1500);
+      });
+
+      return dismiss;
+    }
+  }
+
+  customElements.define('x-toast', XToast);
+
+  window.mtui = Object.assign(window.mtui || {}, {
+    toast(message, opts) {
+      let mount = document.querySelector('x-toast');
+      if (!mount) {
+        mount = document.createElement('x-toast');
+        document.body.append(mount);
+      }
+      return mount.show(message, opts);
+    },
+  });
+})();