@blotch/dolan 0.0.0-stage → 22.2.0

package/dist/ui/components/select/select.test.ts

@@ -0,0 +1,107 @@
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { describe, expect, it } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiSelect, UiSelectItem } from './select';
+
+describe('UiSelect', () => {
+  it('renders the trigger for the current selection', async () => {
+    const { container } = await render(UiSelect);
+    expect(container).toBeTruthy();
+  });
+
+  it('displays the placeholder when no value is selected', async () => {
+    const { componentRef, container } = await render(UiSelect);
+    const inst = componentRef.instance as UiSelect;
+    setInputSignal(inst.placeholder, 'Choose...');
+    await waitForUpdate();
+    expect(container.textContent).toContain('Choose...');
+  });
+
+  it('displays the raw value when no matching item is projected', async () => {
+    // Covers the `item?.label() ?? val` fallback path.
+    const { componentRef, container } = await render(UiSelect);
+    const inst = componentRef.instance as UiSelect;
+    inst.value.set('unknown');
+    await waitForUpdate();
+    expect(container.textContent).toContain('unknown');
+  });
+
+  it('select() updates the model, emits `changed`, and closes the sheet', async () => {
+    const { componentRef } = await render(UiSelect);
+    const inst = componentRef.instance as UiSelect;
+    inst.open();
+    const emitted: string[] = [];
+    inst.changed.subscribe((v) => emitted.push(v));
+    inst.select('b');
+    expect(inst.value()).toBe('b');
+    expect(emitted).toEqual(['b']);
+  });
+
+  it('toggle() flips the sheet open/closed', async () => {
+    const { componentRef } = await render(UiSelect);
+    const inst = componentRef.instance as UiSelect;
+    inst.toggle();
+    inst.toggle();
+    // No throw; the internal `sheetOpen` signal is protected — verify indirectly
+    // by ensuring subsequent open()/close() calls still work.
+    inst.open();
+    inst.close();
+    expect(inst.value()).toBe('');
+  });
+
+  it('toggle() / open() are no-ops when disabled', async () => {
+    const { componentRef } = await render(UiSelect);
+    const inst = componentRef.instance as UiSelect;
+    setInputSignal(inst.disabled, true);
+    await waitForUpdate();
+    // No throw and no exception paths — early-return branch is exercised.
+    inst.toggle();
+    inst.open();
+    inst.close();
+    expect(inst.value()).toBe('');
+  });
+
+  it('trigger dims when the select is disabled', async () => {
+    const { componentRef, container } = await render(UiSelect);
+    const inst = componentRef.instance as UiSelect;
+    setInputSignal(inst.disabled, true);
+    await waitForUpdate();
+    const trigger = container.querySelector('view');
+    expect(trigger?.getAttribute('class')).toContain('opacity-50');
+  });
+});
+
+describe('UiSelectItem', () => {
+  it('onTap delegates to the parent select', async () => {
+    const parentResult = await render(UiSelect);
+    const parent = parentResult.componentRef.instance as UiSelect;
+
+    const itemResult = await render(UiSelectItem, {
+      providers: [{ provide: UiSelect, useValue: parent }],
+    });
+    const item = itemResult.componentRef.instance as UiSelectItem;
+    setInputSignal(item.itemValue, 'x');
+    setInputSignal(item.label, 'X');
+    await waitForUpdate();
+
+    (item as unknown as { onTap: () => void }).onTap();
+    expect(parent.value()).toBe('x');
+  });
+
+  it('highlights the selected item via bg-accent', async () => {
+    const parentResult = await render(UiSelect);
+    const parent = parentResult.componentRef.instance as UiSelect;
+    parent.value.set('x');
+
+    const itemResult = await render(UiSelectItem, {
+      providers: [{ provide: UiSelect, useValue: parent }],
+    });
+    const item = itemResult.componentRef.instance as UiSelectItem;
+    setInputSignal(item.itemValue, 'x');
+    setInputSignal(item.label, 'X');
+    await waitForUpdate();
+
+    const view = itemResult.container.querySelector('view');
+    expect(view?.getAttribute('class')).toContain('bg-accent');
+  });
+});

package/dist/ui/components/select/select.ts

@@ -0,0 +1,146 @@
+import {
+  Component,
+  ViewEncapsulation,
+  computed,
+  contentChildren,
+  forwardRef,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { UiBottomSheet } from '../bottom-sheet/bottom-sheet';
+import { cn } from '../../utils/cn';
+
+const CHEVRON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
+const CHECK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
+
+@Component({
+  selector: 'ui-select',
+  standalone: true,
+  imports: [LYNX_ELEMENTS, UiBottomSheet],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="triggerClass()" (bindtap)="toggle()">
+      <text [class]="valueTextClass()">{{ displayText() }}</text>
+      <svg [attr.content]="chevronSvg" style="width: 16px; height: 16px;" />
+    </view>
+    <ui-bottom-sheet [(open)]="sheetOpen">
+      <scroll-view scroll-orientation="vertical" style="max-height: 300px;">
+        <view class="flex-col pb-4 flex">
+          <ng-content />
+        </view>
+      </scroll-view>
+    </ui-bottom-sheet>
+  `,
+})
+export class UiSelect {
+  readonly value = model<string>('');
+  readonly placeholder = input('Select...');
+  readonly disabled = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly changed = output<string>();
+
+  protected readonly chevronSvg = CHEVRON_SVG;
+
+  // Drives the shared bottom-sheet's `open` model via `[(open)]`. All the
+  // overlay/animation/drag behavior lives in ui-bottom-sheet; select only
+  // decides when the sheet is open.
+  protected readonly sheetOpen = signal(false);
+
+  // `forwardRef` is required because UiSelectItem is defined later in this
+  // file — without it, the reference would be `undefined` at class-definition
+  // time and contentChildren would silently query nothing.
+  /* v8 ignore next 1 -- forwardRef lambda; JIT+jsdom doesn't wire required child inputs */
+  readonly itemRefs = contentChildren(forwardRef(() => UiSelectItem));
+
+  protected readonly displayText = computed(() => {
+    const val = this.value();
+    if (!val) return this.placeholder();
+    /* v8 ignore next 1 -- .find predicate: unreachable when no content-projected items */
+    const item = this.itemRefs().find((i) => i.itemValue() === val);
+    return item?.label() ?? val;
+  });
+
+  protected readonly triggerClass = computed(() =>
+    cn(
+      'h-10 flex-row items-center rounded-md border border-input bg-background px-3 py-2 flex justify-between',
+      this.disabled() && 'opacity-50',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly valueTextClass = computed(() => {
+    const val = this.value();
+    return cn(
+      'flex-1 text-sm',
+      val ? 'text-foreground' : 'text-muted-foreground',
+    );
+  });
+
+  select(value: string): void {
+    this.value.set(value);
+    this.changed.emit(value);
+    this.close();
+  }
+
+  toggle(): void {
+    if (this.disabled()) return;
+    this.sheetOpen.update((v) => !v);
+  }
+
+  open(): void {
+    if (this.disabled()) return;
+    this.sheetOpen.set(true);
+  }
+
+  close(): void {
+    this.sheetOpen.set(false);
+  }
+}
+
+@Component({
+  selector: 'ui-select-item',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()" (bindtap)="onTap()">
+      <text [class]="labelClass()">{{ label() }}</text>
+      @if (isSelected()) {
+        <svg [attr.content]="checkSvg" style="width: 16px; height: 16px;" />
+      }
+    </view>
+  `,
+})
+export class UiSelectItem {
+  readonly #select = inject(UiSelect);
+
+  readonly itemValue = input.required<string>({ alias: 'value' });
+  readonly label = input.required<string>();
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly checkSvg = CHECK_SVG;
+
+  protected readonly isSelected = computed(
+    () => this.#select.value() === this.itemValue(),
+  );
+
+  protected readonly containerClass = computed(() =>
+    cn(
+      'flex-row items-center px-4 py-3 flex justify-between',
+      this.isSelected() && 'bg-accent',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly labelClass = computed(() => cn('text-sm text-foreground'));
+
+  protected onTap(): void {
+    this.#select.select(this.itemValue());
+  }
+}

package/dist/ui/components/separator/index.ts

@@ -0,0 +1 @@
+export { UiSeparator } from './separator';

package/dist/ui/components/separator/separator.test.ts

@@ -0,0 +1,26 @@
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { describe, expect, it } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiSeparator } from './separator';
+
+describe('UiSeparator', () => {
+  it('renders horizontally (default)', async () => {
+    const { componentRef } = await render(UiSeparator);
+    // The class binding lands on the host element, which is the component's
+    // location.nativeElement (a real DOM node representing the ui-separator
+    // host). Read the class directly from that node.
+    const host = componentRef.location.nativeElement as HTMLElement;
+    expect(host.getAttribute('class')).toContain('h-px');
+  });
+
+  it('renders vertically when the orientation input is flipped', async () => {
+    const { componentRef } = await render(UiSeparator);
+    setInputSignal(
+      (componentRef.instance as UiSeparator).orientation,
+      'vertical',
+    );
+    await waitForUpdate();
+    const host = componentRef.location.nativeElement as HTMLElement;
+    expect(host.getAttribute('class')).toContain('w-px');
+  });
+});

package/dist/ui/components/separator/separator.ts

@@ -0,0 +1,45 @@
+import { Component, ViewEncapsulation, computed, input } from '@angular/core';
+
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-separator',
+  standalone: true,
+  encapsulation: ViewEncapsulation.None,
+  // The styling lives on the HOST element, not an inner <view>, so the separator
+  // is a single element (like shadcn's separator on the web). This is essential:
+  // an Angular component host whose selector is not a native Lynx element falls
+  // back to a plain, UNSTYLED `view` (see runtime CLAUDE.md). If we styled an
+  // inner <view> instead, that unstyled host would sit between the parent and the
+  // line as an extra flex item — and a zero-content separator has no intrinsic
+  // size to give the host, so the host collapses and the line disappears.
+  //
+  // This is exactly why the vertical separator was invisible: in a `flex flex-row
+  // items-center` parent, `items-center` overrides Lynx's default `align-items:
+  // stretch`, so the unstyled host collapsed to 0 height and the inner view had
+  // nothing to fill. (The horizontal one survived only because a `flex-col`
+  // parent stretches the host to full width by default.) Styling the host makes
+  // the sizing classes apply to the actual flex item of the parent row.
+  host: {
+    '[class]': 'separatorClass()',
+  },
+  template: '',
+})
+export class UiSeparator {
+  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly separatorClass = computed(() =>
+    cn(
+      'bg-border',
+      // Horizontal: 1px tall, `w-full` to span the parent's width.
+      // Vertical: 1px wide, `self-stretch` (align-self: stretch) to fill the
+      // parent row's height. We use align-self rather than `h-full` because a
+      // percentage height does not reliably resolve on a flex item in Lynx,
+      // whereas align-self stretches to the parent's cross axis directly — and
+      // it re-enables stretch even when the parent set `align-items: center`.
+      this.orientation() === 'horizontal' ? 'h-px w-full' : 'w-px self-stretch',
+      this.userClass(),
+    ),
+  );
+}

package/dist/ui/components/sheet/index.ts

@@ -0,0 +1,7 @@
+export {
+  UiSheet,
+  UiSheetHeader,
+  UiSheetTitle,
+  UiSheetDescription,
+  UiSheetFooter,
+} from './sheet';

package/dist/ui/components/sheet/sheet.test.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import { render } from '@blotch/angular-lynx-testing-library';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { describe, expect, it } from 'vitest';
+import {
+  UiSheet,
+  UiSheetDescription,
+  UiSheetFooter,
+  UiSheetHeader,
+  UiSheetTitle,
+} from './sheet';
+
+@Component({
+  standalone: true,
+  imports: [
+    UiSheet,
+    UiSheetHeader,
+    UiSheetTitle,
+    UiSheetDescription,
+    UiSheetFooter,
+    LYNX_ELEMENTS,
+  ],
+  template: `
+    <ui-sheet [(open)]="open">
+      <ui-sheet-header>
+        <ui-sheet-title>Title</ui-sheet-title>
+        <ui-sheet-description>Body</ui-sheet-description>
+      </ui-sheet-header>
+      <ui-sheet-footer><text>Buttons</text></ui-sheet-footer>
+    </ui-sheet>
+  `,
+})
+class SheetHost {
+  open = true;
+}
+
+describe('UiSheet', () => {
+  it('renders header, title, description, and footer', async () => {
+    const { getByText } = await render(SheetHost);
+    expect(getByText('Title')).toBeTruthy();
+    expect(getByText('Body')).toBeTruthy();
+    expect(getByText('Buttons')).toBeTruthy();
+  });
+});

package/dist/ui/components/sheet/sheet.ts

@@ -0,0 +1,114 @@
+import {
+  Component,
+  ViewEncapsulation,
+  computed,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { UiBottomSheet } from '../bottom-sheet/bottom-sheet';
+import { cn } from '../../utils/cn';
+
+/**
+ * Styled bottom sheet: a thin wrapper over the shared `ui-bottom-sheet`
+ * primitive that adds content padding and pairs with the header/title/
+ * description/footer layout helpers below. All the overlay, animation, and
+ * drag-to-dismiss behavior lives in `ui-bottom-sheet`.
+ *
+ * The consumer's `class` and the built-in padding are applied to an inner
+ * content wrapper (not the panel) — the panel chrome (rounded corners, border,
+ * background) comes from the primitive.
+ */
+@Component({
+  selector: 'ui-sheet',
+  standalone: true,
+  imports: [LYNX_ELEMENTS, UiBottomSheet],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <ui-bottom-sheet [(open)]="open" (closed)="closed.emit()">
+      <view [class]="contentClass()">
+        <ng-content />
+      </view>
+    </ui-bottom-sheet>
+  `,
+})
+export class UiSheet {
+  readonly open = model(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly closed = output<void>();
+
+  protected readonly contentClass = computed(() =>
+    cn('px-6 pb-6', this.userClass()),
+  );
+}
+
+@Component({
+  selector: 'ui-sheet-header',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiSheetHeader {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly containerClass = computed(() =>
+    cn('mb-4 flex-col gap-1.5 flex', this.userClass()),
+  );
+}
+
+@Component({
+  selector: 'ui-sheet-title',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `<text [class]="textClass()"><ng-content /></text>`,
+})
+export class UiSheetTitle {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly textClass = computed(() =>
+    cn('text-lg font-semibold text-foreground', this.userClass()),
+  );
+}
+
+@Component({
+  selector: 'ui-sheet-description',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `<text [class]="textClass()"><ng-content /></text>`,
+})
+export class UiSheetDescription {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly textClass = computed(() =>
+    cn('text-sm text-muted-foreground', this.userClass()),
+  );
+}
+
+@Component({
+  selector: 'ui-sheet-footer',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiSheetFooter {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly containerClass = computed(() =>
+    cn('flex-col gap-2 pt-4 flex', this.userClass()),
+  );
+}

package/dist/ui/components/skeleton/index.ts

@@ -0,0 +1 @@
+export { UiSkeleton } from './skeleton';

package/dist/ui/components/skeleton/skeleton.test.ts

@@ -0,0 +1,13 @@
+import { render } from '@blotch/angular-lynx-testing-library';
+import { describe, expect, it } from 'vitest';
+import { UiSkeleton } from './skeleton';
+
+describe('UiSkeleton', () => {
+  it('renders and starts the pulse animation', async () => {
+    // The `effect()` schedules pulse(el) once the view child resolves — just
+    // asserting no throw covers the effect body, host template, and computed
+    // class binding in a single mount.
+    const { container } = await render(UiSkeleton);
+    expect(container).toBeTruthy();
+  });
+});

package/dist/ui/components/skeleton/skeleton.ts

@@ -0,0 +1,45 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  input,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { type AnimationHandle, pulse } from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-skeleton',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `<view #skeleton [class]="skeletonClass()" />`,
+})
+export class UiSkeleton {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly skeletonRef = viewChild<ElementRef>('skeleton');
+  #pulseAnim?: AnimationHandle;
+
+  constructor() {
+    // Start the pulse animation once the element is available
+    effect(() => {
+      const el = this.skeletonRef()?.nativeElement;
+      // pulse() calls el.animate() which is inert in jsdom — coverage
+      // for the pulsing loop is exercised on-device.
+      /* v8 ignore start */
+      if (!el) return;
+      this.#pulseAnim?.cancel();
+      this.#pulseAnim = pulse(el);
+      /* v8 ignore stop */
+    });
+  }
+
+  protected readonly skeletonClass = computed(() =>
+    cn('rounded-md bg-muted', this.userClass()),
+  );
+}

package/dist/ui/components/spinner/index.ts

@@ -0,0 +1 @@
+export { UiSpinner } from './spinner';

package/dist/ui/components/spinner/spinner.test.ts

@@ -0,0 +1,39 @@
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { describe, expect, it } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiSpinner } from './spinner';
+
+describe('UiSpinner', () => {
+  it('renders the SVG at the default size', async () => {
+    const { container } = await render(UiSpinner);
+    expect(container).toBeTruthy();
+    // The default size is 'md' → sizeStyle should render at 24px.
+    const view = container.querySelector('view');
+    expect(view?.getAttribute('style')).toContain('24px');
+  });
+
+  it('substitutes currentColor when the color input is set', async () => {
+    const { container, componentRef } = await render(UiSpinner);
+    setInputSignal((componentRef.instance as UiSpinner).color, 'rgb(0, 0, 0)');
+    // Flush CD so the computed re-runs and the `content` attribute updates.
+    await waitForUpdate();
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('content')).toContain('rgb(0, 0, 0)');
+    expect(svg?.getAttribute('content')).not.toContain('currentColor');
+  });
+
+  it('resizes for each supported size', async () => {
+    const { componentRef, container } = await render(UiSpinner);
+    for (const [size, px] of [
+      ['xs', 16],
+      ['sm', 20],
+      ['md', 24],
+      ['lg', 32],
+    ] as const) {
+      setInputSignal((componentRef.instance as UiSpinner).size, size);
+      await waitForUpdate();
+      const view = container.querySelector('view');
+      expect(view?.getAttribute('style')).toContain(`${px}px`);
+    }
+  });
+});