@kouji-ui/core 0.0.3 → 0.1.1

package/src/primitives/overlay/strategies/position/corner.spec.ts

@@ -0,0 +1,36 @@
+import { signal } from '@angular/core';
+import { describe, it, expect } from 'vitest';
+import { corner } from './corner';
+import type { KjOverlayContext } from '../../context';
+
+function makeCtx(panel: HTMLElement): KjOverlayContext {
+  return {
+    state: signal('closed'), isOpen: signal(false),
+    triggerEl: signal(null), panelEl: signal(panel),
+    stack: {} as never, platform: { isBrowser: true },
+    requestClose: () => {},
+  };
+}
+
+describe('corner', () => {
+  it('top-right with offset', () => {
+    const panel = document.createElement('div');
+    const s = corner({ position: 'top-right', offset: { x: 8, y: 12 } });
+    s.attach(makeCtx(panel));
+    s.onOpen!();
+    expect(panel.style.position).toBe('fixed');
+    expect(panel.style.top).toBe('12px');
+    expect(panel.style.right).toBe('8px');
+    s.onClose!();
+    expect(panel.style.position).toBe('');
+  });
+
+  it('bottom-left default offset 0', () => {
+    const panel = document.createElement('div');
+    const s = corner({ position: 'bottom-left' });
+    s.attach(makeCtx(panel));
+    s.onOpen!();
+    expect(panel.style.bottom).toBe('0px');
+    expect(panel.style.left).toBe('0px');
+  });
+});

package/src/primitives/overlay/strategies/position/corner.ts

@@ -0,0 +1,33 @@
+import type { KjOverlayContext } from '../../context';
+import type { KjPositionStrategy } from '../../tokens';
+
+export type KjCornerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export function corner(opts: { position: KjCornerPosition; offset?: { x?: number; y?: number } }): KjPositionStrategy {
+  let ctx: KjOverlayContext | null = null;
+  const ox = opts.offset?.x ?? 0;
+  const oy = opts.offset?.y ?? 0;
+  const apply = () => {
+    const panel = ctx?.panelEl();
+    if (!panel) return;
+    panel.style.position = 'fixed';
+    panel.style.left = panel.style.right = panel.style.top = panel.style.bottom = '';
+    if (opts.position === 'top-left')     { panel.style.top = `${oy}px`;    panel.style.left  = `${ox}px`; }
+    if (opts.position === 'top-right')    { panel.style.top = `${oy}px`;    panel.style.right = `${ox}px`; }
+    if (opts.position === 'bottom-left')  { panel.style.bottom = `${oy}px`; panel.style.left  = `${ox}px`; }
+    if (opts.position === 'bottom-right') { panel.style.bottom = `${oy}px`; panel.style.right = `${ox}px`; }
+  };
+  const clear = () => {
+    const panel = ctx?.panelEl();
+    if (!panel) return;
+    panel.style.position = '';
+    panel.style.left = panel.style.right = panel.style.top = panel.style.bottom = '';
+  };
+  return {
+    attach(c) { ctx = c; },
+    onOpen() { apply(); },
+    onClose() { clear(); },
+    update() { apply(); },
+    detach() { ctx = null; },
+  };
+}

package/src/primitives/overlay/strategies/position/edge-sheet.spec.ts

@@ -0,0 +1,32 @@
+import { signal } from '@angular/core';
+import { describe, it, expect } from 'vitest';
+import { edgeSheet } from './edge-sheet';
+import type { KjOverlayContext } from '../../context';
+
+function makeCtx(panel: HTMLElement): KjOverlayContext {
+  return {
+    state: signal('closed'), isOpen: signal(false),
+    triggerEl: signal(null), panelEl: signal(panel),
+    stack: {} as never, platform: { isBrowser: true },
+    requestClose: () => {},
+  };
+}
+
+describe('edgeSheet', () => {
+  for (const side of ['left', 'right', 'top', 'bottom'] as const) {
+    it(`side=${side} pins to that edge and stretches the others`, () => {
+      const panel = document.createElement('div');
+      const s = edgeSheet({ side });
+      s.attach(makeCtx(panel));
+      s.onOpen!();
+      expect(panel.style.position).toBe('fixed');
+      const zero = (v: string) => v === '0' || v === '0px';
+      if (side === 'left')   { expect(zero(panel.style.left)).toBe(true);   expect(panel.style.right).toBe(''); }
+      if (side === 'right')  { expect(zero(panel.style.right)).toBe(true);  expect(panel.style.left).toBe(''); }
+      if (side === 'top')    { expect(zero(panel.style.top)).toBe(true);    expect(panel.style.bottom).toBe(''); }
+      if (side === 'bottom') { expect(zero(panel.style.bottom)).toBe(true); expect(panel.style.top).toBe(''); }
+      s.onClose!();
+      expect(panel.style.position).toBe('');
+    });
+  }
+});

package/src/primitives/overlay/strategies/position/edge-sheet.ts

@@ -0,0 +1,36 @@
+import type { KjOverlayContext } from '../../context';
+import type { KjPositionStrategy } from '../../tokens';
+
+export type KjSheetSide = 'left' | 'right' | 'top' | 'bottom';
+
+export function edgeSheet(opts: { side: KjSheetSide }): KjPositionStrategy {
+  let ctx: KjOverlayContext | null = null;
+  const side = opts.side;
+
+  const apply = () => {
+    const panel = ctx?.panelEl();
+    if (!panel) return;
+    panel.style.position = 'fixed';
+    panel.style.left = side === 'right' ? '' : '0';
+    panel.style.right = side === 'left' ? '' : '0';
+    panel.style.top = side === 'bottom' ? '' : '0';
+    panel.style.bottom = side === 'top' ? '' : '0';
+  };
+  const clear = () => {
+    const panel = ctx?.panelEl();
+    if (!panel) return;
+    panel.style.position = '';
+    panel.style.left = '';
+    panel.style.right = '';
+    panel.style.top = '';
+    panel.style.bottom = '';
+  };
+
+  return {
+    attach(c) { ctx = c; },
+    onOpen() { apply(); },
+    onClose() { clear(); },
+    update() { apply(); },
+    detach() { ctx = null; },
+  };
+}

package/src/primitives/overlay/strategies/position/in-place-sibling.spec.ts

@@ -0,0 +1,25 @@
+import { signal } from '@angular/core';
+import { describe, it, expect } from 'vitest';
+import { inPlaceSibling } from './in-place-sibling';
+import type { KjOverlayContext } from '../../context';
+
+describe('inPlaceSibling', () => {
+  it('all methods are no-ops; panel styles unchanged', () => {
+    const panel = document.createElement('div');
+    panel.style.color = 'red';
+    const ctx: KjOverlayContext = {
+      state: signal('closed'), isOpen: signal(false),
+      triggerEl: signal(null), panelEl: signal(panel),
+      stack: {} as never, platform: { isBrowser: true },
+      requestClose: () => {},
+    };
+    const s = inPlaceSibling();
+    s.attach(ctx);
+    s.onOpen!();
+    s.update();
+    s.onClose!();
+    s.detach();
+    expect(panel.style.position).toBe('');
+    expect(panel.style.color).toBe('red');
+  });
+});

package/src/primitives/overlay/strategies/position/in-place-sibling.ts

@@ -0,0 +1,13 @@
+import type { KjOverlayContext } from '../../context';
+import type { KjPositionStrategy } from '../../tokens';
+
+export function inPlaceSibling(): KjPositionStrategy {
+  let _ctx: KjOverlayContext | null = null;
+  return {
+    attach(c) { _ctx = c; },
+    onOpen() {},
+    onClose() {},
+    update() {},
+    detach() { _ctx = null; },
+  };
+}

package/src/primitives/overlay/strategies/position/point-at.spec.ts

@@ -0,0 +1,40 @@
+import { signal } from '@angular/core';
+import { describe, it, expect } from 'vitest';
+import { pointAt } from './point-at';
+import type { KjOverlayContext } from '../../context';
+
+function makeCtx(panel: HTMLElement): KjOverlayContext {
+  return {
+    state: signal('closed'), isOpen: signal(false),
+    triggerEl: signal(null), panelEl: signal(panel),
+    stack: {} as never, platform: { isBrowser: true },
+    requestClose: () => {},
+  };
+}
+
+describe('pointAt', () => {
+  it('literal coords place panel', () => {
+    const panel = document.createElement('div');
+    const s = pointAt({ x: 10, y: 20 });
+    s.attach(makeCtx(panel));
+    s.onOpen!();
+    expect(panel.style.position).toBe('fixed');
+    expect(panel.style.left).toBe('10px');
+    expect(panel.style.top).toBe('20px');
+    s.onClose!();
+    expect(panel.style.left).toBe('');
+  });
+
+  it('signal coords reflect on update', () => {
+    const panel = document.createElement('div');
+    const x = signal(5); const y = signal(15);
+    const s = pointAt({ x, y });
+    s.attach(makeCtx(panel));
+    s.onOpen!();
+    expect(panel.style.left).toBe('5px');
+    x.set(50); y.set(60);
+    s.update();
+    expect(panel.style.left).toBe('50px');
+    expect(panel.style.top).toBe('60px');
+  });
+});

package/src/primitives/overlay/strategies/position/point-at.ts

@@ -0,0 +1,34 @@
+import { isSignal, type Signal } from '@angular/core';
+import type { KjOverlayContext } from '../../context';
+import type { KjPositionStrategy } from '../../tokens';
+
+export interface KjPointAtOpts {
+  x: Signal<number> | number;
+  y: Signal<number> | number;
+}
+
+export function pointAt(opts: KjPointAtOpts): KjPositionStrategy {
+  let ctx: KjOverlayContext | null = null;
+  const read = (v: Signal<number> | number): number => isSignal(v) ? v() : v;
+  const apply = () => {
+    const panel = ctx?.panelEl();
+    if (!panel) return;
+    panel.style.position = 'fixed';
+    panel.style.left = `${read(opts.x)}px`;
+    panel.style.top = `${read(opts.y)}px`;
+  };
+  const clear = () => {
+    const panel = ctx?.panelEl();
+    if (!panel) return;
+    panel.style.position = '';
+    panel.style.left = '';
+    panel.style.top = '';
+  };
+  return {
+    attach(c) { ctx = c; },
+    onOpen() { apply(); },
+    onClose() { clear(); },
+    update() { apply(); },
+    detach() { ctx = null; },
+  };
+}

package/src/primitives/overlay/strategies/position/viewport-centered.spec.ts

@@ -0,0 +1,31 @@
+import { signal } from '@angular/core';
+import { describe, it, expect } from 'vitest';
+import { viewportCentered } from './viewport-centered';
+import type { KjOverlayContext } from '../../context';
+
+function makeCtx(panel: HTMLElement): KjOverlayContext {
+  return {
+    state: signal('closed'), isOpen: signal(false),
+    triggerEl: signal(null), panelEl: signal(panel),
+    stack: {} as never, platform: { isBrowser: true },
+    requestClose: () => {},
+  };
+}
+
+describe('viewportCentered', () => {
+  it('onOpen applies fixed centering; onClose clears', () => {
+    const panel = document.createElement('div');
+    const s = viewportCentered();
+    s.attach(makeCtx(panel));
+    s.onOpen!();
+    expect(panel.style.position).toBe('fixed');
+    expect(panel.style.left).toBe('50%');
+    expect(panel.style.top).toBe('50%');
+    expect(panel.style.transform).toBe('translate(-50%, -50%)');
+    s.onClose!();
+    expect(panel.style.position).toBe('');
+    expect(panel.style.left).toBe('');
+    expect(panel.style.top).toBe('');
+    expect(panel.style.transform).toBe('');
+  });
+});

package/src/primitives/overlay/strategies/position/viewport-centered.ts

@@ -0,0 +1,31 @@
+import type { KjOverlayContext } from '../../context';
+import type { KjPositionStrategy } from '../../tokens';
+
+export function viewportCentered(): KjPositionStrategy {
+  let ctx: KjOverlayContext | null = null;
+
+  const apply = () => {
+    const panel = ctx?.panelEl();
+    if (!panel) return;
+    panel.style.position = 'fixed';
+    panel.style.left = '50%';
+    panel.style.top = '50%';
+    panel.style.transform = 'translate(-50%, -50%)';
+  };
+  const clear = () => {
+    const panel = ctx?.panelEl();
+    if (!panel) return;
+    panel.style.position = '';
+    panel.style.left = '';
+    panel.style.top = '';
+    panel.style.transform = '';
+  };
+
+  return {
+    attach(c) { ctx = c; },
+    onOpen() { apply(); },
+    onClose() { clear(); },
+    update() { apply(); },
+    detach() { ctx = null; },
+  };
+}

package/src/primitives/overlay/strategies/scroll-lock/css-clip.spec.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cssClip } from './css-clip';
+
+describe('cssClip', () => {
+  afterEach(() => { document.documentElement.style.overflow = ''; });
+
+  it('onOpen sets overflow:clip; onClose restores', () => {
+    const s = cssClip();
+    s.attach({} as never);
+    s.onOpen!();
+    expect(document.documentElement.style.overflow).toBe('clip');
+    s.onClose!();
+    expect(document.documentElement.style.overflow).toBe('');
+  });
+});

package/src/primitives/overlay/strategies/scroll-lock/css-clip.ts

@@ -0,0 +1,39 @@
+import type { KjScrollLockStrategy } from '../../tokens';
+
+let _count = 0;
+let _saved: string | null = null;
+
+export function cssClip(): KjScrollLockStrategy {
+  let acquired = false;
+  return {
+    attach() {},
+    onOpen() {
+      if (typeof document === 'undefined') return;
+      _count++;
+      acquired = true;
+      if (_count === 1) {
+        _saved = document.documentElement.style.overflow;
+        document.documentElement.style.overflow = 'clip';
+      }
+    },
+    onClose() {
+      if (typeof document === 'undefined' || !acquired) return;
+      acquired = false;
+      _count--;
+      if (_count === 0) {
+        document.documentElement.style.overflow = _saved ?? '';
+        _saved = null;
+      }
+    },
+    detach() {
+      if (acquired) {
+        acquired = false;
+        _count--;
+        if (_count === 0 && typeof document !== 'undefined') {
+          document.documentElement.style.overflow = _saved ?? '';
+          _saved = null;
+        }
+      }
+    },
+  };
+}

package/src/primitives/overlay/strategies/scroll-lock/html-overflow.spec.ts

@@ -0,0 +1,21 @@
+import { TestBed } from '@angular/core/testing';
+import { describe, it, expect, afterEach } from 'vitest';
+import { htmlOverflow } from './html-overflow';
+
+describe('htmlOverflow', () => {
+  afterEach(() => {
+    document.documentElement.style.overflow = '';
+    document.documentElement.style.paddingRight = '';
+  });
+
+  it('onOpen acquires lock; onClose releases', () => {
+    TestBed.runInInjectionContext(() => {
+      const s = htmlOverflow();
+      s.attach({} as never);
+      s.onOpen!();
+      expect(document.documentElement.style.overflow).toBe('hidden');
+      s.onClose!();
+      expect(document.documentElement.style.overflow).toBe('');
+    });
+  });
+});

package/src/primitives/overlay/strategies/scroll-lock/html-overflow.ts

@@ -0,0 +1,44 @@
+import type { KjScrollLockStrategy } from '../../tokens';
+
+let _count = 0;
+let _savedOverflow: string | null = null;
+let _savedPaddingRight: string | null = null;
+
+const acquire = (): (() => void) => {
+  if (typeof document === 'undefined') return () => {};
+  _count++;
+  if (_count === 1) {
+    const html = document.documentElement;
+    const scrollbarWidth = window.innerWidth - html.clientWidth;
+    _savedOverflow = html.style.overflow;
+    _savedPaddingRight = html.style.paddingRight;
+    html.style.overflow = 'hidden';
+    if (scrollbarWidth > 0) {
+      const existing = parseFloat(getComputedStyle(html).paddingRight) || 0;
+      html.style.paddingRight = `${existing + scrollbarWidth}px`;
+    }
+  }
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    _count--;
+    if (_count === 0) {
+      const html = document.documentElement;
+      html.style.overflow = _savedOverflow ?? '';
+      html.style.paddingRight = _savedPaddingRight ?? '';
+      _savedOverflow = null;
+      _savedPaddingRight = null;
+    }
+  };
+};
+
+export function htmlOverflow(): KjScrollLockStrategy {
+  let release: (() => void) | null = null;
+  return {
+    attach() {},
+    onOpen() { release = acquire(); },
+    onClose() { release?.(); release = null; },
+    detach() { release?.(); release = null; },
+  };
+}

package/src/primitives/overlay/strategies/scroll-lock/none.spec.ts

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import { noScrollLock } from './none';
+
+describe('noScrollLock', () => {
+  it('all methods are no-ops', () => {
+    const s = noScrollLock();
+    expect(() => { s.attach({} as never); s.onOpen?.(); s.onClose?.(); s.detach(); }).not.toThrow();
+  });
+});

package/src/primitives/overlay/strategies/scroll-lock/none.ts

@@ -0,0 +1,5 @@
+import type { KjScrollLockStrategy } from '../../tokens';
+
+export function noScrollLock(): KjScrollLockStrategy {
+  return { attach() {}, onOpen() {}, onClose() {}, detach() {} };
+}

package/src/primitives/overlay/strategies/trigger-event/on-click.spec.ts

@@ -0,0 +1,32 @@
+import { signal } from '@angular/core';
+import { describe, it, expect, vi } from 'vitest';
+import { onClick } from './on-click';
+import type { KjOverlayContext } from '../../context';
+
+describe('onClick', () => {
+  it('clicking the trigger after bindToggle invokes the toggle', () => {
+    const trigger = document.createElement('button');
+    document.body.appendChild(trigger);
+
+    const ctx: KjOverlayContext = {
+      state: signal('closed'), isOpen: signal(false),
+      triggerEl: signal(trigger), panelEl: signal(null),
+      stack: {} as never, platform: { isBrowser: true },
+      requestClose: () => {},
+    };
+    const toggle = vi.fn();
+    const s = onClick();
+    s.attach(ctx);
+    s.bindToggle(toggle);
+    trigger.click();
+    expect(toggle).toHaveBeenCalledTimes(1);
+    s.detach();
+    trigger.click();
+    expect(toggle).toHaveBeenCalledTimes(1);
+    trigger.remove();
+  });
+
+  it('ariaHasPopup is null', () => {
+    expect(onClick().ariaHasPopup).toBeNull();
+  });
+});

package/src/primitives/overlay/strategies/trigger-event/on-click.ts

@@ -0,0 +1,28 @@
+import type { KjOverlayContext } from '../../context';
+import type { KjTriggerEventStrategy } from '../../tokens';
+
+export function onClick(): KjTriggerEventStrategy {
+  let ctx: KjOverlayContext | null = null;
+  let toggle: (() => void) | null = null;
+  let listener: ((e: Event) => void) | null = null;
+
+  const wireListener = () => {
+    if (!ctx?.platform.isBrowser) return;
+    const trigger = ctx.triggerEl();
+    if (!trigger || listener) return;
+    listener = () => toggle?.();
+    trigger.addEventListener('click', listener);
+  };
+
+  return {
+    ariaHasPopup: null,
+    attach(c) { ctx = c; wireListener(); },
+    bindToggle(t) { toggle = t; wireListener(); },
+    onOpen() {}, onClose() {},
+    detach() {
+      const trigger = ctx?.triggerEl();
+      if (trigger && listener) trigger.removeEventListener('click', listener);
+      listener = null; toggle = null; ctx = null;
+    },
+  };
+}

package/src/primitives/overlay/strategies/trigger-event/on-context-menu.spec.ts

@@ -0,0 +1,45 @@
+import { signal } from '@angular/core';
+import { describe, it, expect, vi } from 'vitest';
+import { onContextMenu } from './on-context-menu';
+import type { KjOverlayContext } from '../../context';
+
+function makeCtx(trigger: HTMLElement): KjOverlayContext {
+  return {
+    state: signal('closed'), isOpen: signal(false),
+    triggerEl: signal(trigger), panelEl: signal(null),
+    stack: {} as never, platform: { isBrowser: true },
+    requestClose: () => {},
+  };
+}
+
+describe('onContextMenu', () => {
+  it('contextmenu event triggers toggle and prevents default', () => {
+    const trigger = document.createElement('button');
+    document.body.appendChild(trigger);
+    const toggle = vi.fn();
+    const s = onContextMenu();
+    s.attach(makeCtx(trigger));
+    s.bindToggle(toggle);
+    const e = new MouseEvent('contextmenu', { cancelable: true, bubbles: true });
+    trigger.dispatchEvent(e);
+    expect(toggle).toHaveBeenCalledTimes(1);
+    expect(e.defaultPrevented).toBe(true);
+    s.detach(); trigger.remove();
+  });
+
+  it('Shift+F10 keydown triggers', () => {
+    const trigger = document.createElement('button');
+    document.body.appendChild(trigger);
+    const toggle = vi.fn();
+    const s = onContextMenu();
+    s.attach(makeCtx(trigger));
+    s.bindToggle(toggle);
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'F10', shiftKey: true, cancelable: true }));
+    expect(toggle).toHaveBeenCalledTimes(1);
+    s.detach(); trigger.remove();
+  });
+
+  it('ariaHasPopup is "menu"', () => {
+    expect(onContextMenu().ariaHasPopup).toBe('menu');
+  });
+});

package/src/primitives/overlay/strategies/trigger-event/on-context-menu.ts

@@ -0,0 +1,70 @@
+import { isSignal, type Signal } from '@angular/core';
+import type { KjOverlayContext } from '../../context';
+import type { KjTriggerEventStrategy } from '../../tokens';
+
+type Reactive<T> = T | Signal<T> | (() => T);
+const read = <T>(v: Reactive<T> | undefined, fallback: T): T => {
+  if (v === undefined) return fallback;
+  if (isSignal(v)) return v();
+  if (typeof v === 'function') return (v as () => T)();
+  return v;
+};
+
+export interface KjOnContextMenuOpts {
+  longPressMs?: Reactive<number>;
+}
+
+export type KjOnContextMenuStrategy = KjTriggerEventStrategy & {
+  configure(opts: Partial<KjOnContextMenuOpts>): void;
+};
+
+export function onContextMenu(initialOpts: Partial<KjOnContextMenuOpts> = {}): KjOnContextMenuStrategy {
+  let opts: Partial<KjOnContextMenuOpts> = { ...initialOpts };
+  let ctx: KjOverlayContext | null = null;
+  let toggle: (() => void) | null = null;
+  let onCtx: ((e: MouseEvent) => void) | null = null;
+  let onKey: ((e: KeyboardEvent) => void) | null = null;
+  let onTouchStart: ((e: TouchEvent) => void) | null = null;
+  let onTouchEnd: (() => void) | null = null;
+  let touchTimer = 0;
+
+  const wire = () => {
+    if (!ctx?.platform.isBrowser) return;
+    const trigger = ctx.triggerEl();
+    if (!trigger || onCtx) return;
+
+    onCtx = (e: MouseEvent) => { e.preventDefault(); toggle?.(); };
+    onKey = (e: KeyboardEvent) => { if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); toggle?.(); } };
+    onTouchStart = (_e: TouchEvent) => { touchTimer = setTimeout(() => { toggle?.(); touchTimer = 0; }, read(opts.longPressMs, 500)) as unknown as number; };
+    onTouchEnd = () => { if (touchTimer) { clearTimeout(touchTimer); touchTimer = 0; } };
+
+    trigger.addEventListener('contextmenu', onCtx);
+    trigger.addEventListener('keydown', onKey);
+    trigger.addEventListener('touchstart', onTouchStart);
+    trigger.addEventListener('touchend', onTouchEnd);
+    trigger.addEventListener('touchcancel', onTouchEnd);
+  };
+
+  return {
+    ariaHasPopup: 'menu',
+    attach(c) { ctx = c; wire(); },
+    bindToggle(t) { toggle = t; wire(); },
+    onOpen() {}, onClose() {},
+    detach() {
+      const trigger = ctx?.triggerEl();
+      if (trigger) {
+        if (onCtx) trigger.removeEventListener('contextmenu', onCtx);
+        if (onKey) trigger.removeEventListener('keydown', onKey);
+        if (onTouchStart) trigger.removeEventListener('touchstart', onTouchStart);
+        if (onTouchEnd) {
+          trigger.removeEventListener('touchend', onTouchEnd);
+          trigger.removeEventListener('touchcancel', onTouchEnd);
+        }
+      }
+      if (touchTimer) clearTimeout(touchTimer);
+      onCtx = onKey = onTouchStart = onTouchEnd = null; touchTimer = 0;
+      toggle = null; ctx = null;
+    },
+    configure(newOpts) { opts = { ...opts, ...newOpts }; },
+  };
+}