morethanui 1.0.0

package/js/pull-refresh.js

@@ -0,0 +1,122 @@
+/* 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);
+})();

package/js/telegram.js

@@ -0,0 +1,175 @@
+/* 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);
+  }
+})();

package/js/x-colorswatches.js

@@ -0,0 +1,144 @@
+/* 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);
+})();

package/js/x-contextmenu.js

@@ -0,0 +1,190 @@
+/* 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);
+})();