@kouji-ui/core 0.1.1 → 0.1.2

package/src/chat/chat.ts

@@ -1,191 +0,0 @@
-import {
-  DestroyRef,
-  Directive,
-  ElementRef,
-  Injector,
-  afterNextRender,
-  computed,
-  effect,
-  inject,
-  input,
-  signal,
-} from '@angular/core';
-import {
-  KJ_CHAT,
-  KJ_CHAT_LOG,
-  type KjChatContext,
-  type KjChatRole,
-  type KjChatSide,
-} from './chat.context';
-
-/**
- * Element → directive map used by `KjChat` to walk previous siblings without
- * relying on Angular dev-mode internals. Each row registers itself on its host
- * element on construction and unregisters on destroy.
- */
-const CHAT_ROW_REGISTRY = new WeakMap<Element, KjChat>();
-
-/**
- * A single chat row. Owns the logical side, the per-row role, and the
- * group-by-sender computation; reflects header / footer ids registered by
- * its children for `aria-labelledby` / `aria-describedby` wiring.
- *
- * **Grouping uses DOM traversal, not a registry**, deliberately: the registry
- * pattern races on the bottom-up `ngOnInit` order (children before parent),
- * which means the first row could ask for its previous sibling before the
- * previous row has registered. DOM traversal via `previousElementSibling` is
- * deterministic and works at first render.
- *
- * Standalone rows (no `KjChatLog` parent) skip auto-grouping entirely;
- * consumers set `kjChatGrouped` explicitly when they want grouped chrome.
- *
- * @example
- * ```html
- * <div kjChat kjSide="start" kjChatAuthor="alice">
- *   <span kjChatAvatar>…</span>
- *   <header kjChatHeader>Alice 12:46</header>
- *   <p kjChatBubble>Hey!</p>
- *   <footer kjChatFooter kjState="read">Read 12:46</footer>
- * </div>
- * ```
- * @doc-category Core/Data display
- * @doc
- * @doc-name chat
- * @doc-description Unstyled chat row with side, sender grouping, and ARIA wiring for message log semantics.
- * @doc-is-main
- */
-@Directive({
-  selector: '[kjChat]',
-  standalone: true,
-  providers: [{ provide: KJ_CHAT, useExisting: KjChat }],
-  host: {
-    '[attr.role]': 'kjRole()',
-    '[attr.data-side]': 'kjSide()',
-    '[attr.data-grouped]': 'grouped() ? "" : null',
-    '[attr.aria-labelledby]': 'headerId() ?? null',
-    '[attr.aria-describedby]': 'footerId() ?? null',
-  },
-})
-export class KjChat implements KjChatContext {
-  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly injector = inject(Injector);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly log = inject(KJ_CHAT_LOG, { optional: true });
-
-  /** Logical side of this row. CSS reads `data-side` and handles RTL flip. */
-  readonly kjSide = input<KjChatSide>('start');
-
-  /** Sender id — drives auto-grouping with the previous sibling row. */
-  readonly kjChatAuthor = input<string | undefined>(undefined);
-
-  /**
-   * Explicit group override. When defined, wins over the auto-computed value;
-   * use this when no `KjChatLog` parent is present.
-   */
-  readonly kjChatGrouped = input<boolean | undefined>(undefined);
-
-  /**
-   * Per-row role. Default `'article'` gives AT users a per-message landmark
-   * navigable via JAWS / NVDA `M`; `'listitem'` opts in to list semantics
-   * (parent log must then expose `role="list"`); `null` drops the attribute.
-   */
-  readonly kjRole = input<KjChatRole>('article');
-
-  private readonly headerIds = signal<readonly string[]>([]);
-  private readonly footerIds = signal<readonly string[]>([]);
-
-  /** Composed `aria-labelledby` value. */
-  readonly headerId = computed(() => {
-    const ids = this.headerIds();
-    return ids.length === 0 ? null : ids.join(' ');
-  });
-
-  /** Composed `aria-describedby` value. */
-  readonly footerId = computed(() => {
-    const ids = this.footerIds();
-    return ids.length === 0 ? null : ids.join(' ');
-  });
-
-  private readonly autoGrouped = signal(false);
-
-  /** True when this row groups with the previous one (same author). */
-  readonly grouped = computed(
-    () => this.kjChatGrouped() ?? this.autoGrouped(),
-  );
-
-  constructor() {
-    // Registry write happens in the constructor so any sibling rendered
-    // *after* us finds us during its own afterNextRender pass. (Angular
-    // builds child instances bottom-up, but DOM siblings are ordered
-    // top-down — by the time the second row's afterNextRender fires,
-    // the first row's host element exists and is keyed in the WeakMap.)
-    CHAT_ROW_REGISTRY.set(this.el.nativeElement, this);
-    this.destroyRef.onDestroy(() =>
-      CHAT_ROW_REGISTRY.delete(this.el.nativeElement),
-    );
-
-    // DOM-traversal grouping: run after first render (so the previous
-    // sibling exists) and re-run whenever this row's author changes.
-    afterNextRender(() => {
-      this.recomputeAutoGrouped();
-    });
-    effect(
-      () => {
-        // Track the input — touching it inside the effect creates the dep.
-        this.kjChatAuthor();
-        this.recomputeAutoGrouped();
-      },
-      { injector: this.injector },
-    );
-  }
-
-  /** @internal */
-  registerHeaderId(id: string): void {
-    this.headerIds.update(ids => [...ids, id]);
-    this.destroyRef.onDestroy(() => this.unregisterHeaderId(id));
-  }
-
-  /** @internal */
-  unregisterHeaderId(id: string): void {
-    this.headerIds.update(ids => ids.filter(x => x !== id));
-  }
-
-  /** @internal */
-  registerFooterId(id: string): void {
-    this.footerIds.update(ids => [...ids, id]);
-    this.destroyRef.onDestroy(() => this.unregisterFooterId(id));
-  }
-
-  /** @internal */
-  unregisterFooterId(id: string): void {
-    this.footerIds.update(ids => ids.filter(x => x !== id));
-  }
-
-  private recomputeAutoGrouped(): void {
-    if (!this.log) {
-      this.autoGrouped.set(false);
-      return;
-    }
-    const me = this.kjChatAuthor();
-    if (me === undefined) {
-      this.autoGrouped.set(false);
-      return;
-    }
-    const prev = this.previousChatRow();
-    if (!prev) {
-      this.autoGrouped.set(false);
-      return;
-    }
-    this.autoGrouped.set(prev.kjChatAuthor() === me);
-  }
-
-  private previousChatRow(): KjChat | null {
-    let sib = this.el.nativeElement.previousElementSibling as Element | null;
-    while (sib) {
-      const row = CHAT_ROW_REGISTRY.get(sib);
-      if (row) return row;
-      sib = sib.previousElementSibling;
-    }
-    return null;
-  }
-}

package/src/chat/config.ts

@@ -1,53 +0,0 @@
-import { InjectionToken, Provider } from '@angular/core';
-
-/** Shape of the bubble's preset configuration. */
-export interface KjChatBubbleConfig {
-  variants: string[];
-  sizes: string[];
-  defaults: { variant: string; size: string };
-}
-
-/**
- * Default Chat-Bubble presets shipped by kouji-ui. Exported so consumers can
- * spread when extending: `[...KJ_CHAT_BUBBLE_DEFAULTS.variants, 'brand']`.
- */
-export const KJ_CHAT_BUBBLE_DEFAULTS: KjChatBubbleConfig = {
-  variants: [
-    'default',
-    'primary',
-    'secondary',
-    'accent',
-    'info',
-    'success',
-    'warning',
-    'error',
-  ],
-  sizes: ['sm', 'md', 'lg'],
-  defaults: { variant: 'default', size: 'md' },
-};
-
-/**
- * DI token for the active Chat-Bubble presets. Default factory yields
- * `KJ_CHAT_BUBBLE_DEFAULTS`. Override via `provideKjChatBubble(…)` at the
- * application or component scope.
- */
-export const KJ_CHAT_BUBBLE_CONFIG = new InjectionToken<KjChatBubbleConfig>(
-  'kj.chat-bubble.config',
-  { factory: () => KJ_CHAT_BUBBLE_DEFAULTS },
-);
-
-/**
- * Configures the Chat-Bubble presets for the enclosing injector. Replaces
- * (does not merge) `variants` and `sizes`; spread `KJ_CHAT_BUBBLE_DEFAULTS.variants`
- * to extend.
- */
-export function provideKjChatBubble(
-  config: Partial<KjChatBubbleConfig>,
-): Provider[] {
-  return [
-    {
-      provide: KJ_CHAT_BUBBLE_CONFIG,
-      useValue: { ...KJ_CHAT_BUBBLE_DEFAULTS, ...config },
-    },
-  ];
-}

package/src/chat/index.ts

@@ -1,21 +0,0 @@
-export { KjChatLog } from './chat-log';
-export { KjChat } from './chat';
-export { KjChatAvatar } from './chat-avatar';
-export { KjChatHeader } from './chat-header';
-export { KjChatBubble } from './chat-bubble';
-export { KjChatFooter } from './chat-footer';
-export {
-  KJ_CHAT,
-  KJ_CHAT_LOG,
-  type KjChatContext,
-  type KjChatLogContext,
-  type KjChatRole,
-  type KjChatSide,
-  type KjChatState,
-} from './chat.context';
-export {
-  KJ_CHAT_BUBBLE_CONFIG,
-  KJ_CHAT_BUBBLE_DEFAULTS,
-  provideKjChatBubble,
-  type KjChatBubbleConfig,
-} from './config';

package/src/checkbox/checkbox.spec.ts

@@ -1,35 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjCheckbox } from './checkbox';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjCheckbox', () => {
-  it('sets role=checkbox', async () => {
-    const { getByRole } = await render(`<div kjCheckbox tabindex="0">Check</div>`, { imports: [KjCheckbox] });
-    expect(getByRole('checkbox')).toBeInTheDocument();
-  });
-
-  it('has aria-checked=false by default', async () => {
-    const { getByRole } = await render(`<div kjCheckbox tabindex="0">Check</div>`, { imports: [KjCheckbox] });
-    expect(getByRole('checkbox')).toHaveAttribute('aria-checked', 'false');
-  });
-
-  it('toggles checked on click', async () => {
-    const { getByRole } = await render(`<div kjCheckbox tabindex="0">Check</div>`, { imports: [KjCheckbox] });
-    fireEvent.click(getByRole('checkbox'));
-    expect(getByRole('checkbox')).toHaveAttribute('aria-checked', 'true');
-    expect(getByRole('checkbox')).toHaveAttribute('data-checked', '');
-  });
-
-  it('toggles on Space key', async () => {
-    const { getByRole } = await render(`<div kjCheckbox tabindex="0">Check</div>`, { imports: [KjCheckbox] });
-    fireEvent.keyDown(getByRole('checkbox'), { key: ' ' });
-    expect(getByRole('checkbox')).toHaveAttribute('aria-checked', 'true');
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(`<div kjCheckbox tabindex="0" aria-label="Accept terms">Accept</div>`, { imports: [KjCheckbox] });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/checkbox/checkbox.ts

@@ -1,89 +0,0 @@
-import { Directive, inject, model } from '@angular/core';
-import { KjDisabled, KjFocusRing, KjFormControl } from '../primitives';
-
-/**
- * Adds checkbox semantics with Angular forms integration.
- * Supports `formControl`, `formControlName`, and `ngModel` bindings.
- *
- * Apply `[kjCheckbox]` to any focusable element to get `role="checkbox"`,
- * `aria-checked` reflection, Space/click toggle, and the shared focus-ring
- * primitive — all composable onto custom markup with no styling attached.
- *
- * @example
- * ```html
- * <div kjCheckbox tabindex="0" [(kjChecked)]="accepted" aria-label="Accept terms">Accept</div>
- * ```
- * @doc
- *  @doc-file checkbox.example.ts
- *    ```typescript
- *       import { Component, signal } from '@angular/core';
- *       import { KjCheckbox } from '@kouji-ui/core';
- *
- *       @Component({
- *         standalone: true,
- *         imports: [KjCheckbox],
- *         styles: [`
- *           .row { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; background: #0c0c0c; }
- *           .item { display: flex; align-items: center; gap: 0.75rem; }
- *           [kjCheckbox] { width: 18px; height: 18px; border: 2px solid #333; background: #111; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
- *           [data-checked] { background: #b8f500; border-color: #b8f500; }
- *           [data-checked]::after { content: '✓'; color: #0c0c0c; font-size: 0.75rem; font-weight: bold; }
- *           span { color: #888; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; }
- *         `],
- *         template: `
- *           <div class="row">
- *             <div class="item">
- *               <div kjCheckbox tabindex="0" [(kjChecked)]="terms" aria-label="Accept terms"></div>
- *               <span>Accept terms — {{ terms() ? 'checked' : 'unchecked' }}</span>
- *             </div>
- *             <div class="item">
- *               <div kjCheckbox tabindex="0" [(kjChecked)]="newsletter" aria-label="Newsletter"></div>
- *               <span>Subscribe to newsletter</span>
- *             </div>
- *           </div>
- *         `,
- *       })
- *       export class CheckboxExampleComponent {
- *         terms = signal(false);
- *         newsletter = signal(true);
- *       }
- *    ```
- * @doc-category Core/Inputs
- * @doc-name checkbox
- * @doc-description Adds accessible checkbox behaviour and Angular forms support to any element you bring.
- * @doc-is-main
- */
-@Directive({
-  selector: '[kjCheckbox]',
-  standalone: true,
-  hostDirectives: [
-    { directive: KjDisabled, inputs: ['kjDisabled'] },
-    KjFocusRing,
-    KjFormControl,
-  ],
-  host: {
-    role: 'checkbox',
-    '[attr.aria-checked]': 'kjChecked().toString()',
-    '[attr.data-checked]': 'kjChecked() ? "" : null',
-    '[attr.disabled]': 'formCtrl.disabled() ? "" : null',
-    '(click)': 'toggle()',
-    '(keydown.space)': 'onSpace($event)',
-    '(blur)': 'formCtrl.notifyTouched()',
-  },
-})
-export class KjCheckbox {
-  readonly formCtrl = inject(KjFormControl);
-
-  /** Whether the checkbox is checked. Supports two-way binding. */
-  kjChecked = model<boolean>(false);
-
-  /** @internal */
-  toggle(): void {
-    const next = !this.kjChecked();
-    this.kjChecked.set(next);
-    this.formCtrl.notifyChange(next);
-  }
-
-  /** @internal */
-  onSpace(e: Event): void { e.preventDefault(); this.toggle(); }
-}

package/src/checkbox/index.ts

@@ -1 +0,0 @@
-export { KjCheckbox } from './checkbox';

package/src/color-picker/color-picker.context.ts

@@ -1,74 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-import type { KjHsl, KjHsv, KjRgb } from './color-picker.utils';
-
-/** Output formats supported by `KjColorPicker`. */
-export type KjColorFormat = 'hex' | 'rgb' | 'hsl';
-
-/**
- * Public emitted value for `KjColorPicker`.
- * Concrete shape depends on the active `kjFormat`:
- *  - `'hex'` → `string` (`'#rrggbb'` or `'#rrggbbaa'` when alpha is on).
- *  - `'rgb'` → `[r, g, b]` or `[r, g, b, a]` when alpha is on.
- *  - `'hsl'` → `{ h, s, l }` or `{ h, s, l, a }` when alpha is on.
- */
-export type KjColorValue =
-  | string
-  | readonly [number, number, number]
-  | readonly [number, number, number, number]
-  | { h: number; s: number; l: number }
-  | { h: number; s: number; l: number; a: number };
-
-/** A single preset swatch in the color picker's palette grid. */
-export interface KjColorPreset {
-  /** Any parseable hex color string. */
-  readonly value: string;
-  /** Optional accessible name announced to AT in place of the raw hex. */
-  readonly label?: string;
-}
-
-/**
- * Shared state container exposed to every `KjColorPicker` sub-directive
- * via the `KJ_COLOR_PICKER` token. The root directive is the sole writer;
- * sub-directives read derived signals and call mutator methods.
- */
-export interface KjColorPickerContext {
-  // Canonical state
-  readonly hue:        Signal<number>;
-  readonly saturation: Signal<number>;
-  readonly value:      Signal<number>;
-  readonly alpha:      Signal<number>;
-
-  // Derived projections
-  readonly hex:  Signal<string>;
-  readonly rgb:  Signal<KjRgb>;
-  readonly hsv:  Signal<KjHsv>;
-  readonly hsl:  Signal<KjHsl>;
-
-  // Mutators
-  setHue(h: number): void;
-  setSaturationValue(s: number, v: number): void;
-  setAlpha(a: number): void;
-  setHex(hex: string): boolean;
-  setRgb(r: number, g: number, b: number, a?: number): void;
-
-  // UI state
-  readonly open:      Signal<boolean>;
-  readonly disabled:  Signal<boolean>;
-  readonly format:    Signal<KjColorFormat>;
-  readonly showAlpha: Signal<boolean>;
-  readonly presets:   Signal<readonly KjColorPreset[]>;
-  setOpen(open: boolean): void;
-
-  // Wiring ids
-  readonly panelId:   Signal<string>;
-  readonly triggerId: Signal<string>;
-}
-
-/**
- * DI token consumed by every `KjColorPicker*` sub-directive. Provided by
- * the root `KjColorPicker` directive — sub-directives outside that
- * context throw at injection time in dev.
- */
-export const KJ_COLOR_PICKER = new InjectionToken<KjColorPickerContext>(
-  'KjColorPicker',
-);