@kouji-ui/core 0.1.1 → 0.1.3

package/src/primitives/list/selection.ts

@@ -1,339 +0,0 @@
-// packages/core/src/primitives/list/selection.ts
-import { Injectable, computed, effect, signal, type Signal, type WritableSignal } from '@angular/core';
-import type { KjListItem } from './item';
-import type {
-  KjCompareFn,
-  KjListSelectionMode,
-  KjTreeShape,
-} from './tokens';
-
-/**
- * Selection state shared by a list-style consumer (KjSelect, KjCombobox,
- * KjTreeSelect, KjCascadeSelect). The consumer root calls {@link bind}
- * from its constructor to wire in its canonical signals — the model
- * reads/writes through those signals, so there is no second source of
- * truth and no cyclic DI dependency (the model does not inject the
- * root; the root injects the model).
- *
- * **Tree topology is first-class.** When the consumer supplies a
- * `treeShape` signal, the model uses it. Otherwise the model
- * **auto-derives** a shape from the registered `KjListItem` parent
- * pointers (each item injects its nearest ancestor `KjListItem` via the
- * element injector). That makes DOM-nested clusters (cascade-select,
- * sub-menus) tree-aware out of the box; flat data-driven clusters
- * (tree-select) keep using the explicit shape.
- *
- * Modes:
- * - `'single'` — replace + close. With a shape, branch toggles no-op
- *   (only leaves enter `value`).
- * - `'multi'` — flat toggle in array
- * - `'leaf'` — tree-aware multi where only leaves enter `value`
- * - `'cascade'` — tri-state tree selection
- *
- * @doc-category Core/Primitives
- */
-@Injectable()
-export class KjSelectionModel<T = unknown> {
-  /**
-   * Source signals. Replaced wholesale by {@link bind} so the
-   * consumer's reactive inputs become the canonical state. `bind` MUST
-   * be called from the consumer's constructor, before any descendant
-   * `KjListItem._activate` fires.
-   */
-  private _value:    WritableSignal<T | readonly T[] | null> =
-    signal<T | readonly T[] | null>(null);
-  private _items:    Signal<readonly KjListItem<unknown>[] | null> = signal(null);
-  private _modeSig:  Signal<KjListSelectionMode> = signal<KjListSelectionMode>('single');
-  private _cmpSig:   Signal<KjCompareFn<T>>      = signal(Object.is as KjCompareFn<T>);
-  private _shapeSig: Signal<KjTreeShape<T> | null> = signal(null);
-
-  private readonly _mode = signal<KjListSelectionMode>('single');
-  private _compareBy: KjCompareFn<T> = Object.is as KjCompareFn<T>;
-  private readonly _consumerShape = signal<KjTreeShape<T> | null>(null);
-
-  constructor() {
-    // Effects always re-evaluate the bound signals so the model stays
-    // in sync whether the consumer rebinds during construction or
-    // mutates the underlying signals later. Reading inside an effect
-    // (rather than at construction time) means the model is robust to
-    // property-initializer ordering on consumer roots.
-    effect(() => this._mode.set(this._modeSig()));
-    effect(() => { this._compareBy = this._cmpSig(); });
-    effect(() => this._consumerShape.set(this._shapeSig()));
-  }
-
-  /**
-   * Bind consumer-owned source signals. Each is optional; unbound keys
-   * keep their previous source (defaulting to constants on first
-   * construct). Call once in the consumer's constructor before any
-   * descendant `KjListItem` activation fires.
-   */
-  bind(sources: {
-    readonly value?:     WritableSignal<T | readonly T[] | null>;
-    readonly items?:     Signal<readonly KjListItem<unknown>[]>;
-    readonly mode?:      Signal<KjListSelectionMode>;
-    readonly compareBy?: Signal<KjCompareFn<T>>;
-    readonly treeShape?: Signal<KjTreeShape<T> | null>;
-  }): void {
-    if (sources.value)     this._value    = sources.value;
-    if (sources.items)     this._items    = sources.items as Signal<readonly KjListItem<unknown>[] | null>;
-    if (sources.mode)      this._modeSig  = sources.mode;
-    if (sources.compareBy) this._cmpSig   = sources.compareBy;
-    if (sources.treeShape) this._shapeSig = sources.treeShape;
-  }
-
-  /** Current mode. */
-  readonly mode = this._mode.asReadonly();
-
-  /**
-   * Effective tree topology — consumer-supplied (`bind({ treeShape })`)
-   * when present, otherwise auto-derived from registered `KjListItem`
-   * parent pointers. Returns `null` when neither is available.
-   */
-  readonly shape: Signal<KjTreeShape<T> | null> = computed(() => {
-    const explicit = this._consumerShape();
-    if (explicit) return explicit;
-    return this._autoShape();
-  });
-
-  /**
-   * Auto-derived tree shape: a map of every registered item's value to
-   * its parent value (and inverse children list), built from each
-   * `KjListItem`'s injected `parent` reference. Only useful for
-   * DOM-nested clusters (cascade-select, sub-menus); flat clusters
-   * (tree-select) bind their own shape.
-   */
-  private readonly _autoShape: Signal<KjTreeShape<T> | null> = computed(() => {
-    const items = this._items();
-    if (!items || items.length === 0) return null;
-    const parentOf = new Map<T, T | null>();
-    const childrenOf = new Map<T, T[]>();
-    const valueByItem = new Map<KjListItem<unknown>, T>();
-    for (const it of items) {
-      const v = it.value();
-      if (v === undefined) continue;
-      valueByItem.set(it, v as T);
-    }
-    for (const it of items) {
-      const v = valueByItem.get(it);
-      if (v === undefined) continue;
-      const parentItem = it.parent;
-      const parentV = parentItem ? valueByItem.get(parentItem) ?? null : null;
-      parentOf.set(v, parentV);
-      if (parentV !== null) {
-        const arr = childrenOf.get(parentV) ?? [];
-        arr.push(v);
-        childrenOf.set(parentV, arr);
-      }
-    }
-    const eq = this._compareBy;
-    const findKey = (n: T): T | undefined => {
-      for (const k of parentOf.keys()) {
-        if (eq(k, n)) return k;
-      }
-      return undefined;
-    };
-    return {
-      getParent: (n: T) => {
-        const key = findKey(n);
-        return key !== undefined ? (parentOf.get(key) ?? null) : null;
-      },
-      getChildren: (n: T) => {
-        const key = findKey(n);
-        return key !== undefined ? (childrenOf.get(key) ?? []) : [];
-      },
-      isLeaf: (n: T) => {
-        const key = findKey(n);
-        if (key === undefined) return true;
-        return (childrenOf.get(key)?.length ?? 0) === 0;
-      },
-    };
-  });
-
-  /** Switch mode imperatively (consumers should prefer binding a signal). */
-  setMode(mode: KjListSelectionMode): void {
-    this._mode.set(mode);
-  }
-
-  /** Replace the current selection value (writes through the bound signal). */
-  setValue(v: T | readonly T[] | null): void {
-    this._value.set(v);
-  }
-
-  /** Override the equality function. Defaults to `Object.is`. */
-  setCompareBy(fn: KjCompareFn<T>): void {
-    this._compareBy = fn;
-  }
-
-  /**
-   * Provide the tree topology imperatively. Pass `null` to clear and
-   * fall back to the auto-derived shape.
-   */
-  setTreeShape(shape: KjTreeShape<T> | null): void {
-    this._consumerShape.set(shape);
-  }
-
-  /**
-   * Whether `target` is a leaf in the effective shape. Returns `true`
-   * when no shape is available (flat lists — everything is a "leaf").
-   */
-  isLeaf(target: T): boolean {
-    const s = this.shape();
-    return s ? s.isLeaf(target) : true;
-  }
-
-  /**
-   * Root → target value chain via the effective shape. Returns
-   * `[target]` when the target has no parent in the shape, and an
-   * empty array when no shape is available.
-   */
-  pathTo(target: T): readonly T[] {
-    const s = this.shape();
-    if (!s) return [];
-    const reverse: T[] = [target];
-    let cur: T | null = s.getParent(target);
-    while (cur !== null) {
-      reverse.unshift(cur);
-      cur = s.getParent(cur);
-    }
-    return reverse;
-  }
-
-  /**
-   * Activation gate. Returns `true` when committing `target` is
-   * meaningful in the current mode + shape:
-   * - `'single'` with a shape → only leaves activate. Branches are
-   *   blocked so they can serve as pure disclosure controls (open a
-   *   sub-panel) without leaking a branch value into `value`.
-   * - `'single'` without a shape → any value activates.
-   * - `'multi'` → any value activates.
-   * - `'leaf'` → only leaves activate (mirrors `toggle`'s no-op).
-   * - `'cascade'` → any value activates (tri-state toggle applies).
-   */
-  canActivate(target: T): boolean {
-    const mode = this._mode();
-    if (mode === 'multi' || mode === 'cascade') return true;
-    const s = this.shape();
-    if (!s) return true;
-    return s.isLeaf(target);
-  }
-
-  /** Whether `target` is currently in the selection (membership check). */
-  isSelected(target: T): boolean {
-    const v = this._value();
-    if (v === null) return false;
-    const mode = this._mode();
-    if (mode === 'multi' || mode === 'leaf' || mode === 'cascade') {
-      return Array.isArray(v) && v.some(x => this._compareBy(x, target));
-    }
-    return this._compareBy(v as T, target);
-  }
-
-  /**
-   * Tri-state for `'cascade'` mode. Walks descendants via the effective
-   * tree shape:
-   * - `'true'` — node and all leaf descendants are selected
-   * - `'mixed'` — some but not all descendants are selected
-   * - `'false'` — no descendants are selected
-   *
-   * In any other mode (or when no tree shape is set), returns `'true'`
-   * / `'false'` based on `isSelected()`.
-   */
-  cascadeState(target: T): 'true' | 'false' | 'mixed' {
-    const shape = this.shape();
-    if (this._mode() !== 'cascade' || !shape) {
-      return this.isSelected(target) ? 'true' : 'false';
-    }
-    return this._cascadeState(target, shape);
-  }
-
-  private _cascadeState(node: T, shape: KjTreeShape<T>): 'true' | 'false' | 'mixed' {
-    if (shape.isLeaf(node)) {
-      return this.isSelected(node) ? 'true' : 'false';
-    }
-    const children = shape.getChildren(node);
-    if (children.length === 0) {
-      return this.isSelected(node) ? 'true' : 'false';
-    }
-    let allTrue = true;
-    let anyTrueOrMixed = false;
-    for (const c of children) {
-      const s = this._cascadeState(c, shape);
-      if (s !== 'true') allTrue = false;
-      if (s !== 'false') anyTrueOrMixed = true;
-    }
-    if (allTrue) return 'true';
-    if (anyTrueOrMixed) return 'mixed';
-    return 'false';
-  }
-
-  /**
-   * Toggle `target` per the current mode:
-   * - `'single'` — with a shape, branch targets no-op
-   *   (`closeRequested: false`); leaves replace value and return
-   *   `closeRequested: true`. Without a shape, replaces unconditionally.
-   * - `'multi'` — flat toggle in array; `closeRequested: false`
-   * - `'leaf'` — toggle only when `target` is a leaf; branches are no-ops
-   * - `'cascade'` — toggle target + all leaf descendants based on current
-   *   tri-state (`'true'` deselects, `'false'`/`'mixed'` selects)
-   */
-  toggle(target: T): { closeRequested: boolean } {
-    const mode = this._mode();
-    const shape = this.shape();
-    if (mode === 'cascade' && shape) {
-      return this._cascadeToggle(target, shape);
-    }
-    if (mode === 'leaf' && shape) {
-      if (!shape.isLeaf(target)) return { closeRequested: false };
-      return this._multiToggle(target);
-    }
-    if (mode === 'multi' || mode === 'leaf' || mode === 'cascade') {
-      return this._multiToggle(target);
-    }
-    // Single mode — gate branches when a shape is available.
-    if (shape && !shape.isLeaf(target)) return { closeRequested: false };
-    this._value.set(target);
-    return { closeRequested: true };
-  }
-
-  private _multiToggle(target: T): { closeRequested: boolean } {
-    const current = this._value();
-    const arr = Array.isArray(current) ? [...current] : [];
-    const idx = arr.findIndex(x => this._compareBy(x, target));
-    if (idx >= 0) arr.splice(idx, 1);
-    else arr.push(target);
-    this._value.set(arr);
-    return { closeRequested: false };
-  }
-
-  private _cascadeToggle(target: T, shape: KjTreeShape<T>): { closeRequested: boolean } {
-    const currentState = this._cascadeState(target, shape);
-    const shouldSelect = currentState !== 'true';
-
-    const collectLeaves = (node: T): T[] => {
-      if (shape.isLeaf(node)) return [node];
-      const out: T[] = [];
-      for (const c of shape.getChildren(node)) out.push(...collectLeaves(c));
-      return out;
-    };
-
-    const leaves = collectLeaves(target);
-    const current = this._value();
-    const arr = Array.isArray(current) ? [...current] : [];
-
-    for (const leaf of leaves) {
-      const idx = arr.findIndex(x => this._compareBy(x, leaf));
-      if (shouldSelect && idx < 0) arr.push(leaf);
-      else if (!shouldSelect && idx >= 0) arr.splice(idx, 1);
-    }
-
-    this._value.set(arr);
-    return { closeRequested: false };
-  }
-
-  /** Clear the selection. `single` → `null`; multi-style → `[]`. */
-  clear(): void {
-    const mode = this._mode();
-    this._value.set(mode === 'single' ? null : []);
-  }
-}

package/src/primitives/list/tokens.ts

@@ -1,106 +0,0 @@
-import { InjectionToken, Signal, WritableSignal } from '@angular/core';
-import type { KjListItem } from './item';
-
-/**
- * The single contract a consumer root directive (KjSelect, KjCombobox,
- * KjCommandPalette, …) implements + provides via
- * `useExisting: forwardRef(() => Self)`. Primitives read whichever
- * fields they need from this one object — items for the navigator,
- * `value` for the selection model, `visibleItems` for filter-aware nav.
- */
-export interface KjListNavigatorConfig {
-  /** All registered items in DOM order. Source of truth for nav + filter. */
-  readonly items: Signal<readonly KjListItem<unknown>[]>;
-  /** Filter-aware visible subset. Falls back to `items` when not provided. */
-  readonly visibleItems?: Signal<readonly KjListItem<unknown>[]>;
-  /**
-   * Writable signal holding the canonical selection value (typically the
-   * consumer's `model()` input). When the consumer provides
-   * `KjSelectionModel`, it reads / writes through this signal — one
-   * source of truth, no bridging effects. Optional: consumers without
-   * selection state (e.g. KjCommandPalette) omit it.
-   */
-  readonly value?: WritableSignal<unknown | readonly unknown[] | null>;
-  /**
-   * Selection mode signal. When provided, `KjSelectionModel` follows it
-   * reactively — consumers don't need to inject the model just to call
-   * `setMode()`. Default `'single'`.
-   */
-  readonly mode?: Signal<KjListSelectionMode>;
-  /**
-   * Equality fn signal. When provided, `KjSelectionModel` follows it
-   * reactively. Default `Object.is`.
-   */
-  readonly compareBy?: Signal<KjCompareFn<unknown>>;
-  /**
-   * Tree topology signal. When provided, `KjSelectionModel` follows it
-   * reactively, so the consumer never needs to inject the model just
-   * to call `setTreeShape()`. Required for `'leaf'` / `'cascade'`
-   * selection modes; optional otherwise.
-   */
-  readonly treeShape?: Signal<KjTreeShape<unknown> | null>;
-  /**
-   * Consumer-side hook invoked by `KjListItem` immediately after it
-   * toggles the shared `KjSelectionModel`. Lets the consumer do its
-   * post-selection work (close an overlay, set an input query, emit a
-   * commit event) without subscribing to every option's `activate`
-   * output — pushing the repeat pattern down into one place.
-   *
-   * `closeRequested` mirrors `KjSelectionModel.toggle()`'s return value:
-   * `true` in single mode, `false` in multi / leaf / cascade modes.
-   */
-  afterSelect?(value: unknown, closeRequested: boolean): void;
-}
-
-export const KJ_LIST_NAVIGATOR_CONFIG =
-  new InjectionToken<KjListNavigatorConfig>('KJ_LIST_NAVIGATOR_CONFIG');
-
-/**
- * Focus model for a list-style cluster:
- *
- * - `'activedescendant'` — host element keeps DOM focus; the active
- *   option is signalled via `aria-activedescendant`. Default for
- *   listbox / combobox / command-palette.
- * - `'roving'` — the active option *is* the focused element; focus
- *   moves between options via roving `tabindex`. Used by menus,
- *   menubars, tree-select.
- */
-export type KjListFocusMode = 'activedescendant' | 'roving';
-
-/**
- * Provided by `KjListNavigator` so child `KjListItem`s can read the
- * current focus mode reactively and bind their own `tabindex`. Items
- * inject this `{ optional: true }` — when absent (no navigator on the
- * host) they fall back to `'activedescendant'` behavior.
- */
-export const KJ_LIST_FOCUS_MODE =
-  new InjectionToken<Signal<KjListFocusMode>>('KJ_LIST_FOCUS_MODE');
-
-export type KjListOrientation = 'vertical' | 'horizontal' | 'both';
-
-/**
- * Selection modes supported by `KjSelectionModel`:
- *
- * - `'single'` — exactly one value (or `null`). Aria: `aria-selected="true"` on the chosen item.
- * - `'multi'` — any combination from a flat list. Aria: `aria-selected="true|false"` per item, container `aria-multiselectable="true"`.
- * - `'leaf'` — multi over a tree, but only leaf nodes go into `value`. Branch clicks are no-ops. Requires `setTreeShape()`. Aria: `aria-selected`.
- * - `'cascade'` — tri-state tree selection. Toggling a branch selects/deselects all leaf descendants; the parent's state is computed from descendants (`true` / `false` / `mixed`). Requires `setTreeShape()`. Aria: `aria-checked="true|false|mixed"` per WAI-ARIA tree checkbox pattern.
- */
-export type KjListSelectionMode = 'single' | 'multi' | 'leaf' | 'cascade';
-
-export type KjFilterFn = (query: string, haystacks: readonly string[]) => number;
-export type KjCompareFn<T> = (a: T, b: T) => boolean;
-
-/**
- * Tree topology contract used by `KjSelectionModel` in `'leaf'` and
- * `'cascade'` modes. The consumer's root directive (typically
- * `KjTreeSelect`) implements + provides this via `setTreeShape()`.
- */
-export interface KjTreeShape<T> {
-  /** Parent of `node`, or `null` at the root. */
-  getParent(node: T): T | null;
-  /** Immediate children of `node`. Empty for leaves. */
-  getChildren(node: T): readonly T[];
-  /** `true` when `node` has no children. */
-  isLeaf(node: T): boolean;
-}

package/src/primitives/list/type-ahead.spec.ts

@@ -1,58 +0,0 @@
-// packages/core/src/primitives/list/type-ahead.spec.ts
-import { TestBed } from '@angular/core/testing';
-import { describe, it, expect, beforeEach } from 'vitest';
-import { KjTypeAhead } from './type-ahead';
-import type { KjListItem } from './item';
-
-function item(id: string, label: string, disabled = false): KjListItem<unknown> {
-  return {
-    id,
-    label: () => label,
-    disabled: () => disabled,
-  } as unknown as KjListItem<unknown>;
-}
-
-describe('KjTypeAhead', () => {
-  let ta: KjTypeAhead;
-  beforeEach(() => {
-    TestBed.configureTestingModule({ providers: [KjTypeAhead] });
-    ta = TestBed.inject(KjTypeAhead);
-  });
-
-  it('returns the first item whose label starts with the typed char', () => {
-    const items = [item('1', 'Apple'), item('2', 'Banana')];
-    expect(ta.match('b', items)).toBe('2');
-  });
-
-  it('buffers consecutive chars within the debounce window', () => {
-    const items = [item('1', 'Apple'), item('2', 'Apricot'), item('3', 'Avocado')];
-    expect(ta.match('a', items)).toBe('1');
-    expect(ta.match('p', items)).toBe('1');
-    expect(ta.match('r', items)).toBe('2');
-  });
-
-  it('resets the buffer after the debounce window', async () => {
-    const items = [item('1', 'Apple'), item('2', 'Banana')];
-    ta.debounceMs.set(10);
-    expect(ta.match('a', items)).toBe('1');
-    await new Promise(r => setTimeout(r, 20));
-    expect(ta.match('b', items)).toBe('2');
-  });
-
-  it('skips disabled items', () => {
-    const items = [item('1', 'Apple', true), item('2', 'Apricot')];
-    expect(ta.match('a', items)).toBe('2');
-  });
-
-  it('returns null when nothing matches', () => {
-    const items = [item('1', 'Apple')];
-    expect(ta.match('z', items)).toBeNull();
-  });
-
-  it('reset() clears the buffer', () => {
-    const items = [item('1', 'Apple'), item('2', 'Banana')];
-    ta.match('a', items);
-    ta.reset();
-    expect(ta.match('b', items)).toBe('2');
-  });
-});

package/src/primitives/list/type-ahead.ts

@@ -1,46 +0,0 @@
-// packages/core/src/primitives/list/type-ahead.ts
-import { Injectable, signal } from '@angular/core';
-import type { KjListItem } from './item';
-
-/**
- * Char-buffered type-ahead matcher used by `KjListNavigator` on
- * single-character key presses. Buffers characters within a debounce
- * window so users can type "ap" to jump to "Apricot" instead of just
- * "Apple". Matches case-insensitive prefix against `KjListItem.label()`.
- * Skips disabled items.
- *
- * @doc-category Core/Primitives
- */
-@Injectable()
-export class KjTypeAhead {
-  /** Debounce window (ms) that resets the buffer between key presses. */
-  readonly debounceMs = signal(500);
-
-  private _buffer = '';
-  private _lastKeyAt = 0;
-
-  /**
-   * Append `key` to the buffer (reset if outside debounce window), then
-   * return the id of the first non-disabled item whose label starts with
-   * the buffered prefix. Returns `null` if no item matches.
-   */
-  match(key: string, items: readonly KjListItem<unknown>[]): string | null {
-    if (key.length !== 1) return null;
-    const now = performance.now();
-    if (now - this._lastKeyAt > this.debounceMs()) this._buffer = '';
-    this._buffer += key.toLowerCase();
-    this._lastKeyAt = now;
-
-    const needle = this._buffer;
-    const hit = items.find(
-      i => !i.disabled() && i.label().toLowerCase().startsWith(needle),
-    );
-    return hit?.id ?? null;
-  }
-
-  /** Clear the buffer and last-key timestamp. */
-  reset(): void {
-    this._buffer = '';
-    this._lastKeyAt = 0;
-  }
-}

package/src/primitives/overlay/backdrop.spec.ts

@@ -1,54 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { render } from '@testing-library/angular';
-import { describe, it, expect, vi } from 'vitest';
-import { KjBackdrop } from './backdrop';
-import { KjOverlayController } from './controller';
-import { KJ_OVERLAY_BACKDROP_STRATEGY } from './tokens';
-
-describe('KjBackdrop', () => {
-  it('clicking host invokes controller.close when closeOnClick=true', async () => {
-    @Component({
-      standalone: true,
-      imports: [KjBackdrop],
-      providers: [
-        KjOverlayController,
-        { provide: KJ_OVERLAY_BACKDROP_STRATEGY, useValue: {
-          inertSiblings: true, closeOnClick: true, className: 'kj-backdrop',
-          attach() {}, onOpen() {}, onClose() {}, detach() {},
-        }},
-      ],
-      template: '<kj-backdrop></kj-backdrop>',
-    })
-    class Host {
-      readonly ctrl = inject(KjOverlayController);
-    }
-    const { fixture, container } = await render(Host);
-    const closeSpy = vi.spyOn(fixture.componentInstance.ctrl, 'close');
-    const el = container.querySelector('kj-backdrop') as HTMLElement;
-    el.click();
-    expect(closeSpy).toHaveBeenCalledWith('outside');
-  });
-
-  it('does not close when closeOnClick=false', async () => {
-    @Component({
-      standalone: true,
-      imports: [KjBackdrop],
-      providers: [
-        KjOverlayController,
-        { provide: KJ_OVERLAY_BACKDROP_STRATEGY, useValue: {
-          inertSiblings: false, closeOnClick: false, className: 'kj-backdrop',
-          attach() {}, onOpen() {}, onClose() {}, detach() {},
-        }},
-      ],
-      template: '<kj-backdrop></kj-backdrop>',
-    })
-    class Host {
-      readonly ctrl = inject(KjOverlayController);
-    }
-    const { fixture, container } = await render(Host);
-    const closeSpy = vi.spyOn(fixture.componentInstance.ctrl, 'close');
-    const el = container.querySelector('kj-backdrop') as HTMLElement;
-    el.click();
-    expect(closeSpy).not.toHaveBeenCalled();
-  });
-});

package/src/primitives/overlay/backdrop.ts

@@ -1,31 +0,0 @@
-import { Component, ChangeDetectionStrategy, computed, inject } from '@angular/core';
-import { KjOverlayController } from './controller';
-import { KJ_OVERLAY_BACKDROP_STRATEGY } from './tokens';
-
-/**
- * Renders the backdrop scrim for an overlay. Reads the backdrop strategy
- * (className, closeOnClick) and the controller from the per-overlay
- * injector so neither needs to be passed in. Mounted by `KjOverlayBuilder`
- * as a sibling preceding the panel inside the per-overlay wrapper.
- */
-@Component({
-  selector: 'kj-backdrop',
-  standalone: true,
-  template: '',
-  host: {
-    '[class]': 'klass()',
-    '[attr.data-state]': 'state()',
-    '(click)': 'onClick($event)',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjBackdrop {
-  private readonly controller = inject(KjOverlayController, { optional: true });
-  private readonly strategy   = inject(KJ_OVERLAY_BACKDROP_STRATEGY)!;
-  readonly state = computed(() => this.controller?.state() ?? 'closed');
-  readonly klass = computed(() => (this.strategy as { className?: string }).className ?? 'kj-backdrop');
-
-  onClick(_e: MouseEvent): void {
-    if (this.strategy.closeOnClick) this.controller?.close('outside');
-  }
-}

package/src/primitives/overlay/builder.spec.ts

@@ -1,38 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, it, expect } from 'vitest';
-import { KjOverlayBuilder } from './builder';
-import type { KjOverlayStrategies } from './controller';
-import { bodyPortal } from './strategies/mount/body-portal';
-import { viewportCentered } from './strategies/position/viewport-centered';
-import { programmatic } from './strategies/trigger-event/programmatic';
-
-function makeStrategies(): KjOverlayStrategies {
-  return {
-    mount: bodyPortal(),
-    position: viewportCentered(),
-    trigger: programmatic(),
-  };
-}
-
-describe('KjOverlayBuilder', () => {
-  it('create returns a controller with strategies attached', () => {
-    const builder = TestBed.inject(KjOverlayBuilder);
-    const ctrl = builder.create({ ...makeStrategies(), panelRole: 'dialog' });
-    expect(ctrl.state()).toBe('closed');
-  });
-
-  it('attachComponent injects custom providers', () => {
-    @Component({ standalone: true, template: '' })
-    class Cmp {
-      readonly value = inject('TOKEN' as never);
-    }
-    const builder = TestBed.inject(KjOverlayBuilder);
-    const ctrl = builder.create({ ...makeStrategies(), panelRole: 'dialog' });
-    const ref = builder.attachComponent(ctrl, Cmp, {
-      providers: [{ provide: 'TOKEN' as never, useValue: 'hello' }],
-    });
-    expect((ref.instance as Cmp).value).toBe('hello');
-    ref.destroy();
-  });
-});