@kouji-ui/core 0.0.3 → 0.1.1

package/src/primitives/overlay/strategies/live-announcer/assertive.ts

@@ -0,0 +1,11 @@
+import type { KjLiveAnnouncerStrategy } from '../../tokens';
+import { announce } from './_announce';
+
+export function assertive(): KjLiveAnnouncerStrategy {
+  return {
+    attach() {},
+    onOpen() {}, onClose() {},
+    detach() {},
+    announce(msg: string) { announce(msg, 'assertive'); },
+  };
+}

package/src/primitives/overlay/strategies/live-announcer/polite.spec.ts

@@ -0,0 +1,21 @@
+import { TestBed } from '@angular/core/testing';
+import { describe, it, expect, afterEach } from 'vitest';
+import { polite } from './polite';
+
+describe('polite', () => {
+  afterEach(() => {
+    document.querySelectorAll('[data-kj-live-region]').forEach(el => el.remove());
+  });
+
+  it('announce writes to polite live region', async () => {
+    TestBed.runInInjectionContext(() => {
+      const s = polite();
+      s.attach({} as never);
+      s.announce('hello');
+    });
+    await new Promise(r => requestAnimationFrame(() => r(undefined)));
+    const region = document.querySelector('[data-kj-live-region="polite"]') as HTMLElement;
+    expect(region).toBeTruthy();
+    expect(region.textContent).toBe('hello');
+  });
+});

package/src/primitives/overlay/strategies/live-announcer/polite.ts

@@ -0,0 +1,11 @@
+import type { KjLiveAnnouncerStrategy } from '../../tokens';
+import { announce } from './_announce';
+
+export function polite(): KjLiveAnnouncerStrategy {
+  return {
+    attach() {},
+    onOpen() {}, onClose() {},
+    detach() {},
+    announce(msg: string) { announce(msg, 'polite'); },
+  };
+}

package/src/primitives/overlay/strategies/live-announcer/silent.spec.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+import { silent } from './silent';
+
+describe('silent', () => {
+  it('announce is a no-op (no live region created)', () => {
+    document.querySelectorAll('[data-kj-live-region]').forEach(el => el.remove());
+    const s = silent();
+    s.attach({} as never);
+    s.announce('hello');
+    expect(document.querySelector('[data-kj-live-region]')).toBeNull();
+  });
+});

package/src/primitives/overlay/strategies/live-announcer/silent.ts

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

package/src/primitives/overlay/strategies/mount/body-portal.spec.ts

@@ -0,0 +1,40 @@
+import { signal } from '@angular/core';
+import { describe, it, expect } from 'vitest';
+import { bodyPortal } from './body-portal';
+import type { KjOverlayContext } from '../../context';
+
+function makeCtx(panel: HTMLElement | null): KjOverlayContext {
+  return {
+    state: signal('closed'),
+    isOpen: signal(false),
+    triggerEl: signal(null),
+    panelEl: signal(panel),
+    stack: {} as never,
+    platform: { isBrowser: true },
+    requestClose: () => {},
+  };
+}
+
+describe('bodyPortal', () => {
+  it('portalled=true and resolveContainer returns body', () => {
+    const s = bodyPortal();
+    expect(s.portalled).toBe(true);
+    expect(s.resolveContainer()).toBe(document.body);
+  });
+
+  it('onOpen moves panel to body; onClose restores it', () => {
+    const parent = document.createElement('div');
+    document.body.appendChild(parent);
+    const panel = document.createElement('div');
+    parent.appendChild(panel);
+
+    const s = bodyPortal();
+    s.attach(makeCtx(panel));
+    s.onOpen!();
+    expect(panel.parentElement).toBe(document.body);
+    s.onClose!();
+    expect(panel.parentElement).toBe(parent);
+
+    parent.remove();
+  });
+});

package/src/primitives/overlay/strategies/mount/body-portal.ts

@@ -0,0 +1,91 @@
+import type { KjOverlayContext } from '../../context';
+import type { KjMountStrategy } from '../../tokens';
+import { createOverlayWrapper } from '../../container';
+
+/**
+ * Walk up from `start` until we hit an element with `[data-theme]` set —
+ * that's the scope the trigger renders inside. We propagate that value to
+ * the portalled wrapper so theme tokens resolve against the local scope,
+ * not the global `<html data-theme>`. Critical for theme-generator
+ * previews where the preview pane carries `data-theme="custom-draft"` but
+ * the outer page is on the docs theme.
+ */
+function closestTheme(start: Element | null): string | null {
+  let el: Element | null = start;
+  while (el) {
+    const v = el.getAttribute?.('data-theme');
+    if (v) return v;
+    el = el.parentElement;
+  }
+  return null;
+}
+
+/**
+ * Mount strategy for declarative overlays whose panel is rendered inline
+ * in the consumer's template (popover, tooltip, dropdown-menu via
+ * `[kjFor]`). On open the panel is portalled into a per-overlay wrapper
+ * inside the singleton `.kj-overlay-container`; on close it's returned to
+ * its original DOM location and the wrapper is removed.
+ *
+ * Service-launched overlays (dialog, drawer, toast) are mounted directly
+ * into a `<kj-overlay-wrapper>` component by the builder — they use
+ * `inPlace()` instead.
+ */
+export function bodyPortal(): KjMountStrategy {
+  let ctx: KjOverlayContext | null = null;
+  let wrapper: HTMLElement | null = null;
+  let originalParent: HTMLElement | null = null;
+  let originalNextSibling: Node | null = null;
+
+  const ensureWrapper = (): HTMLElement | null => {
+    if (wrapper && wrapper.isConnected) return wrapper;
+    wrapper = createOverlayWrapper();
+    return wrapper;
+  };
+
+  return {
+    portalled: true,
+    attach(c) { ctx = c; },
+    onOpen() {
+      if (!ctx?.platform.isBrowser) return;
+      const panel = ctx.panelEl();
+      const w = ensureWrapper();
+      if (!panel || !w) return;
+      if (panel.parentElement === w) return;
+      originalParent = panel.parentElement;
+      originalNextSibling = panel.nextSibling;
+      // Propagate the closest ancestor's `data-theme` so the portalled
+      // panel resolves theme tokens against the trigger's local scope.
+      const theme = closestTheme(ctx.triggerEl() ?? originalParent);
+      if (theme) w.setAttribute('data-theme', theme);
+      else w.removeAttribute('data-theme');
+      w.appendChild(panel);
+    },
+    onClose() {
+      if (!ctx?.platform.isBrowser) return;
+      const panel = ctx.panelEl();
+      if (panel && originalParent) {
+        if (originalNextSibling && originalNextSibling.parentNode === originalParent) {
+          originalParent.insertBefore(panel, originalNextSibling);
+        } else {
+          originalParent.appendChild(panel);
+        }
+      }
+      originalParent = null;
+      originalNextSibling = null;
+      if (wrapper?.parentElement) wrapper.parentElement.removeChild(wrapper);
+      wrapper = null;
+    },
+    detach() {
+      if (wrapper?.parentElement) wrapper.parentElement.removeChild(wrapper);
+      wrapper = null;
+      ctx = null;
+    },
+    resolveContainer() {
+      const w = ensureWrapper();
+      if (w) return w;
+      if (typeof document === 'undefined') return null as unknown as HTMLElement;
+      return document.body;
+    },
+  };
+}

package/src/primitives/overlay/strategies/mount/in-container.spec.ts

@@ -0,0 +1,43 @@
+import { signal } from '@angular/core';
+import { describe, it, expect } from 'vitest';
+import { inContainer } from './in-container';
+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('inContainer', () => {
+  it('accepts HTMLElement target — onOpen moves panel; onClose restores', () => {
+    const target = document.createElement('div');
+    const parent = document.createElement('div');
+    const panel = document.createElement('div');
+    parent.appendChild(panel);
+
+    const s = inContainer(target);
+    s.attach(makeCtx(panel));
+    s.onOpen!();
+    expect(panel.parentElement).toBe(target);
+    s.onClose!();
+    expect(panel.parentElement).toBe(parent);
+  });
+
+  it('accepts function target (lazy)', () => {
+    const target = document.createElement('div');
+    const parent = document.createElement('div');
+    const panel = document.createElement('div');
+    parent.appendChild(panel);
+
+    const s = inContainer(() => target);
+    s.attach(makeCtx(panel));
+    s.onOpen!();
+    expect(panel.parentElement).toBe(target);
+    s.onClose!();
+    expect(panel.parentElement).toBe(parent);
+  });
+});

package/src/primitives/overlay/strategies/mount/in-container.ts

@@ -0,0 +1,39 @@
+import type { KjOverlayContext } from '../../context';
+import type { KjMountStrategy } from '../../tokens';
+
+export type KjContainerTarget = HTMLElement | (() => HTMLElement);
+
+export function inContainer(target: KjContainerTarget): KjMountStrategy {
+  let ctx: KjOverlayContext | null = null;
+  let originalParent: HTMLElement | null = null;
+  let originalNextSibling: Node | null = null;
+
+  const resolve = (): HTMLElement => typeof target === 'function' ? target() : target;
+
+  return {
+    portalled: true,
+    attach(c) { ctx = c; },
+    onOpen() {
+      if (!ctx?.platform.isBrowser) return;
+      const panel = ctx.panelEl();
+      if (!panel) return;
+      originalParent = panel.parentElement;
+      originalNextSibling = panel.nextSibling;
+      resolve().appendChild(panel);
+    },
+    onClose() {
+      if (!ctx?.platform.isBrowser) return;
+      const panel = ctx.panelEl();
+      if (!panel || !originalParent) return;
+      if (originalNextSibling && originalNextSibling.parentNode === originalParent) {
+        originalParent.insertBefore(panel, originalNextSibling);
+      } else {
+        originalParent.appendChild(panel);
+      }
+      originalParent = null;
+      originalNextSibling = null;
+    },
+    detach() { ctx = null; },
+    resolveContainer() { return resolve(); },
+  };
+}

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

@@ -0,0 +1,40 @@
+import { signal } from '@angular/core';
+import { describe, it, expect } from 'vitest';
+import { inPlace } from './in-place';
+import type { KjOverlayContext } from '../../context';
+
+describe('inPlace', () => {
+  it('portalled=false and resolveContainer returns parent', () => {
+    const parent = document.createElement('div');
+    const panel = document.createElement('div');
+    parent.appendChild(panel);
+
+    const s = inPlace();
+    expect(s.portalled).toBe(false);
+
+    const ctx: KjOverlayContext = {
+      state: signal('closed'), isOpen: signal(false),
+      triggerEl: signal(null), panelEl: signal(panel),
+      stack: {} as never, platform: { isBrowser: true },
+      requestClose: () => {},
+    };
+    s.attach(ctx);
+    expect(s.resolveContainer()).toBe(parent);
+  });
+
+  it('onOpen and onClose are no-ops', () => {
+    const panel = document.createElement('div');
+    const parent = document.createElement('div');
+    parent.appendChild(panel);
+    const s = inPlace();
+    s.attach({
+      state: signal('closed'), isOpen: signal(false),
+      triggerEl: signal(null), panelEl: signal(panel),
+      stack: {} as never, platform: { isBrowser: true },
+      requestClose: () => {},
+    });
+    s.onOpen!();
+    s.onClose!();
+    expect(panel.parentElement).toBe(parent);
+  });
+});

package/src/primitives/overlay/strategies/mount/in-place.ts

@@ -0,0 +1,20 @@
+import type { KjOverlayContext } from '../../context';
+import type { KjMountStrategy } from '../../tokens';
+
+export function inPlace(): KjMountStrategy {
+  let ctx: KjOverlayContext | null = null;
+  return {
+    portalled: false,
+    attach(c) { ctx = c; },
+    onOpen() {},
+    onClose() {},
+    detach() { ctx = null; },
+    resolveContainer() {
+      const panel = ctx?.panelEl();
+      const parent = panel?.parentElement;
+      if (parent) return parent;
+      if (typeof document === 'undefined') return null as unknown as HTMLElement;
+      return document.body;
+    },
+  };
+}

package/src/primitives/overlay/strategies/position/anchored-to.spec.ts

@@ -0,0 +1,56 @@
+import { signal } from '@angular/core';
+import { describe, it, expect } from 'vitest';
+import { anchoredTo } from './anchored-to';
+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('anchoredTo', () => {
+  it('exposes placement signal', () => {
+    const trig = signal<HTMLElement | null>(null);
+    const s = anchoredTo({ trigger: trig, side: 'bottom', align: 'start' });
+    expect(typeof s.placement).toBe('function');
+    expect(s.placement!()).toBeNull();
+  });
+
+  it('uses CSS Anchor when supported', () => {
+    const orig = (globalThis as { CSS?: unknown }).CSS;
+    (globalThis as { CSS?: unknown }).CSS = { supports: (prop: string) => prop === 'anchor-name' };
+    try {
+      const trigger = document.createElement('button');
+      const panel = document.createElement('div');
+      document.body.append(trigger, panel);
+      const trig = signal<HTMLElement | null>(trigger);
+      const s = anchoredTo({ trigger: trig, side: 'bottom', align: 'start' });
+      s.attach(makeCtx(panel));
+      s.onOpen!();
+      expect(panel.style.position).toBe('fixed');
+      const anchor = panel.style.getPropertyValue('position-anchor') || (panel.style as CSSStyleDeclaration & { positionAnchor?: string }).positionAnchor;
+      expect(anchor).toMatch(/--kj-anchor-\d+/);
+      s.onClose!();
+      trigger.remove();
+      panel.remove();
+    } finally {
+      (globalThis as { CSS?: unknown }).CSS = orig;
+    }
+  });
+
+  it('detach clears inline styles', () => {
+    const panel = document.createElement('div');
+    panel.style.position = 'fixed';
+    panel.style.left = '5px';
+    const trig = signal<HTMLElement | null>(null);
+    const s = anchoredTo({ trigger: trig, side: 'bottom', align: 'start' });
+    s.attach(makeCtx(panel));
+    s.onClose!();
+    expect(panel.style.position).toBe('');
+    expect(panel.style.left).toBe('');
+  });
+});

package/src/primitives/overlay/strategies/position/anchored-to.ts

@@ -0,0 +1,248 @@
+import { isSignal, signal, computed, type Signal } from '@angular/core';
+import type { KjOverlayContext } from '../../context';
+import type { KjPositionStrategy } from '../../tokens';
+import type { KjSide, KjAlign, KjPlacement } from '../../types';
+
+export interface KjAnchoredToOpts {
+  trigger?: Signal<HTMLElement | null>;
+  side: Signal<KjSide> | KjSide;
+  align: Signal<KjAlign> | KjAlign;
+  offset?: Signal<number> | number;
+  flip?: boolean;
+  shift?: boolean;
+  /**
+   * How to size the panel relative to the trigger:
+   * - `'none'` (default) — panel keeps its intrinsic width.
+   * - `'min'`            — panel min-width matches trigger width (panel can grow but not shrink below).
+   * - `'fixed'`          — panel width matches trigger width exactly.
+   */
+  matchTriggerWidth?: 'none' | 'min' | 'fixed';
+}
+
+export type KjAnchoredToStrategy = KjPositionStrategy & {
+  configure(opts: Partial<KjAnchoredToOpts>): void;
+};
+
+const read = <T>(v: Signal<T> | T): T => isSignal(v) ? v() : v;
+
+/**
+ * Returns the trigger's effective bounding rect. If the trigger element has
+ * `display: contents` (rect is 0×0), walks to the first child until a sized
+ * element is found. Common case: `<kj-button kjPopoverTrigger>` where the
+ * `<kj-button>` host is `display: contents` and the actual `<button>` is a
+ * descendant.
+ */
+const effectiveRect = (el: HTMLElement): DOMRect => {
+  let r = el.getBoundingClientRect();
+  if (r.width > 0 || r.height > 0) return r;
+  let cur: HTMLElement | null = el;
+  while (cur) {
+    const child = cur.firstElementChild as HTMLElement | null;
+    if (!child) break;
+    r = child.getBoundingClientRect();
+    if (r.width > 0 || r.height > 0) return r;
+    cur = child;
+  }
+  return el.getBoundingClientRect();
+};
+
+let _anchorIdCounter = 0;
+
+const supportsCssAnchor = (): boolean => {
+  // Disabled — CSS Anchor Positioning + position-area produces inconsistent
+  // results across browser versions (Chrome flips/inflates inset unexpectedly
+  // with span-* keywords). Manual math fallback is the canonical path.
+  return false;
+};
+
+const positionAreaFor = (side: KjSide, align: KjAlign): string => {
+  if (side === 'top' || side === 'bottom') {
+    const cross = align === 'start' ? 'span-right'
+                : align === 'end'   ? 'span-left'
+                                    : 'center';
+    return `${side} ${cross}`;
+  }
+  const cross = align === 'start' ? 'span-bottom'
+              : align === 'end'   ? 'span-top'
+                                  : 'center';
+  return `${side} ${cross}`;
+};
+
+export function anchoredTo(initialOpts: Partial<KjAnchoredToOpts> = {}): KjAnchoredToStrategy {
+  let opts: Partial<KjAnchoredToOpts> = { ...initialOpts };
+  let ctx: KjOverlayContext | null = null;
+  let onResize: (() => void) | null = null;
+  let onScroll: (() => void) | null = null;
+  let resizeObserver: ResizeObserver | null = null;
+  let useCssAnchor: boolean | null = null;
+  let anchorIdent: string | null = null;
+  let cssTrigger: HTMLElement | null = null;
+  let isOpen = false;
+  const _placement = signal<KjPlacement | null>(null);
+  const placement = computed(() => _placement());
+
+  const applyCss = () => {
+    if (!ctx?.platform.isBrowser) return;
+    const trigger = opts.trigger ? opts.trigger() : ctx.triggerEl();
+    const panel = ctx.panelEl();
+    if (!trigger || !panel) return;
+
+    const side = read<KjSide>(opts.side ?? 'bottom');
+    const align = read<KjAlign>(opts.align ?? 'center');
+    const offset = read<number>(opts.offset ?? 0);
+
+    if (!anchorIdent) anchorIdent = `--kj-anchor-${++_anchorIdCounter}`;
+    trigger.style.setProperty('anchor-name', anchorIdent);
+    cssTrigger = trigger;
+
+    panel.style.setProperty('position', 'fixed');
+    panel.style.setProperty('position-anchor', anchorIdent);
+    panel.style.setProperty('position-area', positionAreaFor(side, align));
+    panel.style.setProperty('margin', `${offset}px`);
+
+    _placement.set({ side, align });
+  };
+
+  const clearCss = () => {
+    const panel = ctx?.panelEl();
+    if (panel) {
+      panel.style.removeProperty('position');
+      panel.style.removeProperty('position-anchor');
+      panel.style.removeProperty('position-area');
+      panel.style.removeProperty('margin');
+    }
+    if (cssTrigger && anchorIdent) {
+      const current = cssTrigger.style.getPropertyValue('anchor-name');
+      if (current === anchorIdent) {
+        cssTrigger.style.removeProperty('anchor-name');
+      }
+    }
+    cssTrigger = null;
+    _placement.set(null);
+  };
+
+  const applyManual = () => {
+    if (!ctx?.platform.isBrowser) return;
+    const trigger = opts.trigger ? opts.trigger() : ctx.triggerEl();
+    const panel = ctx.panelEl();
+    if (!trigger || !panel) return;
+
+    const side = read<KjSide>(opts.side ?? 'bottom');
+    const align = read<KjAlign>(opts.align ?? 'center');
+    const offset = read<number>(opts.offset ?? 0);
+    const flip = opts.flip ?? true;
+    const shift = opts.shift ?? true;
+    const matchWidth = opts.matchTriggerWidth ?? 'none';
+    const tRect = effectiveRect(trigger);
+
+    // Apply width matching BEFORE measuring panel — affects pRect.
+    if (matchWidth === 'fixed') {
+      panel.style.width = `${tRect.width}px`;
+    } else if (matchWidth === 'min') {
+      panel.style.minWidth = `${tRect.width}px`;
+    }
+
+    const pRect = panel.getBoundingClientRect();
+    const vw = window.innerWidth, vh = window.innerHeight;
+
+    let resolvedSide = side;
+    if (flip) {
+      if (side === 'bottom' && tRect.bottom + offset + pRect.height > vh && tRect.top - offset - pRect.height >= 0) resolvedSide = 'top';
+      else if (side === 'top' && tRect.top - offset - pRect.height < 0 && tRect.bottom + offset + pRect.height <= vh) resolvedSide = 'bottom';
+      else if (side === 'right' && tRect.right + offset + pRect.width > vw && tRect.left - offset - pRect.width >= 0) resolvedSide = 'left';
+      else if (side === 'left' && tRect.left - offset - pRect.width < 0 && tRect.right + offset + pRect.width <= vw) resolvedSide = 'right';
+    }
+
+    let left = 0, top = 0;
+    if (resolvedSide === 'bottom') { top = tRect.bottom + offset; }
+    if (resolvedSide === 'top')    { top = tRect.top - offset - pRect.height; }
+    if (resolvedSide === 'right')  { left = tRect.right + offset; }
+    if (resolvedSide === 'left')   { left = tRect.left - offset - pRect.width; }
+
+    if (resolvedSide === 'top' || resolvedSide === 'bottom') {
+      if (align === 'start')  left = tRect.left;
+      if (align === 'center') left = tRect.left + (tRect.width - pRect.width) / 2;
+      if (align === 'end')    left = tRect.right - pRect.width;
+    } else {
+      if (align === 'start')  top = tRect.top;
+      if (align === 'center') top = tRect.top + (tRect.height - pRect.height) / 2;
+      if (align === 'end')    top = tRect.bottom - pRect.height;
+    }
+
+    if (shift) {
+      left = Math.max(0, Math.min(left, vw - pRect.width));
+      top  = Math.max(0, Math.min(top,  vh - pRect.height));
+    }
+
+    panel.style.position = 'fixed';
+    panel.style.left = `${left}px`;
+    panel.style.top = `${top}px`;
+    _placement.set({ side: resolvedSide, align });
+  };
+
+  const clearManual = () => {
+    const panel = ctx?.panelEl();
+    if (!panel) return;
+    panel.style.position = '';
+    panel.style.left = '';
+    panel.style.top = '';
+    panel.style.width = '';
+    panel.style.minWidth = '';
+    _placement.set(null);
+  };
+
+  const apply = () => {
+    if (useCssAnchor) applyCss();
+    else applyManual();
+  };
+
+  return {
+    placement,
+    attach(c) { ctx = c; },
+    onOpen() {
+      isOpen = true;
+      if (useCssAnchor === null) {
+        useCssAnchor = ctx?.platform.isBrowser ? supportsCssAnchor() : false;
+      }
+      if (useCssAnchor) {
+        applyCss();
+        return;
+      }
+      applyManual();
+      if (!ctx?.platform.isBrowser) return;
+      onResize = () => applyManual();
+      onScroll = () => applyManual();
+      window.addEventListener('resize', onResize);
+      window.addEventListener('scroll', onScroll, true);
+      const trigger = opts.trigger ? opts.trigger() : ctx.triggerEl();
+      const panel = ctx.panelEl();
+      if (typeof ResizeObserver !== 'undefined' && trigger && panel) {
+        resizeObserver = new ResizeObserver(() => applyManual());
+        resizeObserver.observe(trigger);
+        resizeObserver.observe(panel);
+      }
+    },
+    onClose() {
+      isOpen = false;
+      if (useCssAnchor) {
+        clearCss();
+        return;
+      }
+      clearManual();
+      if (onResize) window.removeEventListener('resize', onResize);
+      if (onScroll) window.removeEventListener('scroll', onScroll, true);
+      onResize = onScroll = null;
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+    },
+    update() {
+      if (useCssAnchor) return;
+      applyManual();
+    },
+    detach() { ctx = null; },
+    configure(newOpts: Partial<KjAnchoredToOpts>) {
+      opts = { ...opts, ...newOpts };
+      if (isOpen) apply();
+    },
+  };
+}