@kouji-ui/core 0.1.1 → 0.1.2

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

@@ -1,11 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

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