@blotch/dolan 0.0.0-stage → 22.2.0

package/dist/ui/components/button/button.ts

@@ -0,0 +1,170 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  input,
+  output,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import {
+  type AnimationHandle,
+  pressDown,
+  pressRelease,
+} from '../../utils/animate';
+import { cn } from '../../utils/cn';
+import { UiSpinner } from '../spinner/spinner';
+
+export const buttonVariants = cva(
+  'items-center rounded-md flex justify-center',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary',
+        destructive: 'bg-destructive',
+        outline: 'border border-border bg-background',
+        secondary: 'bg-secondary',
+        ghost: 'bg-transparent',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+const buttonTextVariants = cva('font-medium', {
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      destructive: 'text-destructive-foreground',
+      outline: 'text-foreground',
+      secondary: 'text-secondary-foreground',
+      ghost: 'text-foreground',
+    },
+    size: {
+      default: 'text-sm',
+      sm: 'text-xs',
+      lg: 'text-base',
+      icon: 'text-sm',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+});
+
+export type ButtonVariant = NonNullable<
+  VariantProps<typeof buttonVariants>['variant']
+>;
+export type ButtonSize = NonNullable<
+  VariantProps<typeof buttonVariants>['size']
+>;
+
+@Component({
+  selector: 'ui-button',
+  standalone: true,
+  imports: [LYNX_ELEMENTS, UiSpinner],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <!-- Press feedback binds BOTH touch and mouse events on purpose. Native
+         (iOS/Android) only ever fires touch; Lynx web runs in the browser, where
+         a cursor press fires mousedown/up and NEVER touchstart — so touch-only
+         bindings gave zero visual feedback on web while (bindtap) still fired the
+         action (a "the button works but doesn't react" split). Binding both makes
+         the press-and-hold identical on every platform; mouse events are inert on
+         touch devices, so there's no double-fire. The scale animation itself lives
+         in pressDown/pressRelease — see their JSDoc for why it's a CSS transition
+         (which serializes to the DOM on Lynx web) and not el.animate() (whose Web
+         Animation runs on web-core's offscreen node and never reaches the screen). -->
+    <view
+      #container
+      [class]="containerClass()"
+      (bindtouchstart)="onPressStart()"
+      (bindtouchend)="onPressEnd()"
+      (bindtouchcancel)="onPressCancel()"
+      (bindmousedown)="onPressStart()"
+      (bindmouseup)="onPressEnd()"
+      (bindmouseleave)="onPressCancel()"
+      (bindtap)="onTap()"
+    >
+      @if (loading()) {
+        <ui-spinner [size]="spinnerSize()" />
+      } @else {
+        <text [class]="labelClass()"><ng-content /></text>
+      }
+    </view>
+  `,
+})
+export class UiButton {
+  readonly variant = input<ButtonVariant>('default');
+  readonly size = input<ButtonSize>('default');
+  readonly disabled = input(false);
+  readonly loading = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly pressed = output<void>();
+
+  readonly containerRef = viewChild<ElementRef>('container');
+  #pressAnim?: AnimationHandle;
+
+  protected readonly containerClass = computed(() =>
+    cn(
+      buttonVariants({ variant: this.variant(), size: this.size() }),
+      (this.disabled() || this.loading()) && 'opacity-50',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly labelClass = computed(() =>
+    cn(buttonTextVariants({ variant: this.variant(), size: this.size() })),
+  );
+
+  protected readonly spinnerSize = computed(() => {
+    const s = this.size();
+    return s === 'sm' ? ('xs' as const) : ('sm' as const);
+  });
+
+  protected onPressStart(): void {
+    if (this.disabled() || this.loading()) return;
+    // pressDown/pressRelease drive el.setStyle() based CSS transitions on the
+    // container ref. In the JIT test harness the view-child isn't reliably
+    // wired up (see the label spec note), and Lynx web renderer's press
+    // feedback is verified end-to-end on-device.
+    /* v8 ignore next 2 */
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressDown(this.containerRef()?.nativeElement);
+  }
+
+  protected onPressEnd(): void {
+    if (this.disabled() || this.loading()) return;
+    /* v8 ignore next 2 */
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+
+  protected onPressCancel(): void {
+    // Also restore scale on cancel — without this, a canceled touch (e.g. scroll
+    // gesture taking over) leaves the button stuck in its pressed-down state.
+    /* v8 ignore next 2 */
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+
+  protected onTap(): void {
+    if (!this.disabled() && !this.loading()) {
+      this.pressed.emit();
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+export {
+  UiButton,
+  buttonVariants,
+  type ButtonVariant,
+  type ButtonSize,
+} from './button';

package/dist/ui/components/button-group/button-group-render.test.ts

@@ -0,0 +1,146 @@
+import { Component } from '@angular/core';
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { describe, expect, it, vi } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiButtonGroup, UiButtonGroupItem } from './button-group';
+
+@Component({
+  standalone: true,
+  imports: [UiButtonGroup, UiButtonGroupItem, LYNX_ELEMENTS],
+  template: `
+    <ui-button-group [orientation]="orientation">
+      <ui-button-group-item (pressed)="onPressed()"
+        ><text>A</text></ui-button-group-item
+      >
+      <ui-button-group-item [disabled]="disabled" (pressed)="onPressed()"
+        ><text>B</text></ui-button-group-item
+      >
+    </ui-button-group>
+  `,
+})
+class ButtonGroupHost {
+  orientation: 'horizontal' | 'vertical' = 'horizontal';
+  disabled = false;
+  onPressed = () => {};
+}
+
+describe('UiButtonGroup (render)', () => {
+  it('renders horizontally by default', async () => {
+    const { container } = await render(ButtonGroupHost);
+    expect(container).toBeTruthy();
+    const flexRow = container.querySelector('.flex-row');
+    expect(flexRow).toBeTruthy();
+  });
+
+  it('switches to vertical layout when orientation is flipped', async () => {
+    const { componentRef, container } = await render(UiButtonGroup);
+    setInputSignal(
+      (componentRef.instance as UiButtonGroup).orientation,
+      'vertical',
+    );
+    await waitForUpdate();
+    expect(container.querySelector('.flex-col')).toBeTruthy();
+  });
+
+  it('applies a user class from the alias input', async () => {
+    const { componentRef, container } = await render(UiButtonGroup);
+    setInputSignal(
+      (componentRef.instance as UiButtonGroup).userClass,
+      'w-full',
+    );
+    await waitForUpdate();
+    const outer = container.querySelector('view');
+    expect(outer?.getAttribute('class')).toContain('w-full');
+  });
+});
+
+describe('UiButtonGroupItem', () => {
+  const renderItem = async (
+    variant: 'default' | 'outline' = 'default',
+    size: 'default' | 'sm' | 'lg' = 'default',
+    disabledGroup = false,
+  ) => {
+    const parentResult = await render(UiButtonGroup);
+    const parent = parentResult.componentRef.instance as UiButtonGroup;
+    setInputSignal(parent.variant, variant);
+    setInputSignal(parent.size, size);
+    setInputSignal(parent.disabled, disabledGroup);
+    await waitForUpdate();
+
+    const itemResult = await render(UiButtonGroupItem, {
+      providers: [{ provide: UiButtonGroup, useValue: parent }],
+    });
+    await waitForUpdate();
+    return { parent, itemResult };
+  };
+
+  it('onTap emits `pressed` when neither the group nor the item is disabled', async () => {
+    const { itemResult } = await renderItem();
+    const inst = itemResult.componentRef
+      .instance as unknown as UiButtonGroupItem & {
+      onTap: () => void;
+    };
+    const emitted = vi.fn();
+    inst.pressed.subscribe(emitted);
+    inst.onTap();
+    expect(emitted).toHaveBeenCalledTimes(1);
+  });
+
+  it('onTap is a no-op when the group is disabled', async () => {
+    const { itemResult } = await renderItem('default', 'default', true);
+    const inst = itemResult.componentRef
+      .instance as unknown as UiButtonGroupItem & {
+      onTap: () => void;
+    };
+    const emitted = vi.fn();
+    inst.pressed.subscribe(emitted);
+    inst.onTap();
+    expect(emitted).not.toHaveBeenCalled();
+  });
+
+  it('onTap is a no-op when the item itself is disabled', async () => {
+    const { itemResult } = await renderItem();
+    const inst = itemResult.componentRef
+      .instance as unknown as UiButtonGroupItem & {
+      onTap: () => void;
+    };
+    setInputSignal(inst.disabled, true);
+    await waitForUpdate();
+    const emitted = vi.fn();
+    inst.pressed.subscribe(emitted);
+    inst.onTap();
+    expect(emitted).not.toHaveBeenCalled();
+  });
+
+  it('press handlers run cleanly on both enabled and disabled paths', async () => {
+    const { itemResult } = await renderItem();
+    const inst = itemResult.componentRef.instance as unknown as {
+      onPressStart: () => void;
+      onPressEnd: () => void;
+      onPressCancel: () => void;
+      disabled: unknown;
+    };
+    expect(() => inst.onPressStart()).not.toThrow();
+    expect(() => inst.onPressEnd()).not.toThrow();
+    expect(() => inst.onPressCancel()).not.toThrow();
+    setInputSignal((inst as unknown as UiButtonGroupItem).disabled, true);
+    await waitForUpdate();
+    expect(() => inst.onPressStart()).not.toThrow();
+    expect(() => inst.onPressEnd()).not.toThrow();
+  });
+
+  it('renders label with `outline` group variant classes', async () => {
+    // Covers the `outline` branch of both buttonGroupItemVariants and
+    // buttonGroupTextVariants.
+    const { itemResult } = await renderItem('outline', 'lg');
+    const view = itemResult.container.querySelector('view');
+    expect(view?.getAttribute('class')).toContain('bg-background');
+  });
+
+  it('renders with size sm variant classes', async () => {
+    const { itemResult } = await renderItem('default', 'sm');
+    const view = itemResult.container.querySelector('view');
+    expect(view?.getAttribute('class')).toContain('h-9');
+  });
+});

package/dist/ui/components/button-group/button-group.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it, vi } from 'vitest';
+
+// Mock Angular so importing the component module doesn't require the framework
+// runtime. Only the exported `cva` variant fn is exercised here; the class field
+// initializers (input/output/viewChild/inject) never run because we never
+// construct the components.
+vi.mock('@angular/core', () => ({
+  Component: () => () => {},
+  ViewEncapsulation: { None: 0 },
+  computed: () => () => {},
+  inject: () => ({}),
+  input: () => () => {},
+  output: () => () => {},
+  viewChild: () => () => {},
+}));
+
+vi.mock('@blotch/angular-lynx', () => ({
+  LYNX_ELEMENTS: [],
+}));
+
+const { buttonGroupItemVariants } = await import('./button-group');
+
+describe('buttonGroupItemVariants', () => {
+  it('returns default variant and size classes', () => {
+    const result = buttonGroupItemVariants();
+    expect(result).toContain('bg-secondary');
+    expect(result).toContain('h-10');
+    expect(result).toContain('px-4');
+  });
+
+  it('returns outline variant classes', () => {
+    const result = buttonGroupItemVariants({ variant: 'outline' });
+    expect(result).toContain('bg-background');
+  });
+
+  it('returns small size classes', () => {
+    const result = buttonGroupItemVariants({ size: 'sm' });
+    expect(result).toContain('h-9');
+    expect(result).toContain('px-3');
+  });
+
+  it('returns large size classes', () => {
+    const result = buttonGroupItemVariants({ size: 'lg' });
+    expect(result).toContain('h-11');
+    expect(result).toContain('px-6');
+  });
+
+  it('always includes base layout classes', () => {
+    const result = buttonGroupItemVariants({ variant: 'outline', size: 'lg' });
+    expect(result).toContain('flex');
+    expect(result).toContain('items-center');
+    expect(result).toContain('justify-center');
+  });
+});

package/dist/ui/components/button-group/button-group.ts

@@ -0,0 +1,209 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  inject,
+  input,
+  output,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import {
+  type AnimationHandle,
+  pressDown,
+  pressRelease,
+} from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+/**
+ * Per-item styling. Corners are intentionally left square here: the group
+ * container clips the whole bar with `overflow-hidden` + `rounded-md`, so only
+ * the outer edges round off while every internal seam stays crisp. Rounding
+ * individual items by position would require `:first-child`/`:last-child`
+ * selectors, which Lynx's CSS engine does not support (no component in the
+ * library relies on positional selectors — see CLAUDE.md).
+ */
+export const buttonGroupItemVariants = cva('items-center flex justify-center', {
+  variants: {
+    variant: {
+      // Filled segments — the whole bar reads as a solid control.
+      default: 'bg-secondary',
+      // Neutral segments against the app background, ringed by the container.
+      outline: 'bg-background',
+    },
+    size: {
+      default: 'h-10 px-4',
+      sm: 'h-9 px-3',
+      lg: 'h-11 px-6',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+});
+
+const buttonGroupTextVariants = cva('font-medium', {
+  variants: {
+    variant: {
+      default: 'text-secondary-foreground',
+      outline: 'text-foreground',
+    },
+    size: {
+      default: 'text-sm',
+      sm: 'text-xs',
+      lg: 'text-base',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+});
+
+export type ButtonGroupVariant = NonNullable<
+  VariantProps<typeof buttonGroupItemVariants>['variant']
+>;
+export type ButtonGroupSize = NonNullable<
+  VariantProps<typeof buttonGroupItemVariants>['size']
+>;
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';
+
+/**
+ * A row (or column) of connected action buttons — a toolbar of related
+ * commands rendered as a single, seamless control.
+ *
+ * The group owns the shared appearance (`variant`, `size`, `orientation`,
+ * `disabled`) and each `<ui-button-group-item>` reads it back via DI, mirroring
+ * the `UiToggleGroup`/`UiToggleGroupItem` pattern. Unlike a toggle group this
+ * carries no selection state: every item is an independent action that emits
+ * `pressed`.
+ */
+@Component({
+  selector: 'ui-button-group',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiButtonGroup {
+  readonly orientation = input<ButtonGroupOrientation>('horizontal');
+  readonly variant = input<ButtonGroupVariant>('default');
+  readonly size = input<ButtonGroupSize>('default');
+  readonly disabled = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly containerClass = computed(() =>
+    cn(
+      // The dividers between items are the group's own `bg-border` showing
+      // through a 1px `gap-px` seam — no per-item borders needed, which keeps
+      // items position-agnostic. `overflow-hidden` + `rounded-md` then clip the
+      // square item corners so the bar reads as one rounded control.
+      'gap-px rounded-md border border-border bg-border flex overflow-hidden',
+      // `self-start` stops the bar stretching to fill a column parent so it
+      // hugs its buttons like a real toolbar. Pass `class="w-full"` to override.
+      'self-start',
+      this.orientation() === 'vertical' ? 'flex-col' : 'flex-row',
+      this.userClass(),
+    ),
+  );
+}
+
+/**
+ * A single pressable action inside a `<ui-button-group>`. Inherits appearance
+ * from the parent group; set `disabled` per-item to disable just this action.
+ */
+@Component({
+  selector: 'ui-button-group-item',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view
+      #container
+      [class]="containerClass()"
+      (bindtouchstart)="onPressStart()"
+      (bindtouchend)="onPressEnd()"
+      (bindtouchcancel)="onPressCancel()"
+      (bindmousedown)="onPressStart()"
+      (bindmouseup)="onPressEnd()"
+      (bindmouseleave)="onPressCancel()"
+      (bindtap)="onTap()"
+    >
+      <text [class]="labelClass()"><ng-content /></text>
+    </view>
+  `,
+})
+export class UiButtonGroupItem {
+  readonly #group = inject(UiButtonGroup);
+
+  readonly disabled = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly pressed = output<void>();
+
+  readonly containerRef = viewChild<ElementRef>('container');
+  #pressAnim?: AnimationHandle;
+
+  // Disabled when either the whole group or this specific item is disabled.
+  protected readonly isDisabled = computed(
+    () => this.#group.disabled() || this.disabled(),
+  );
+
+  protected readonly containerClass = computed(() =>
+    cn(
+      buttonGroupItemVariants({
+        variant: this.#group.variant(),
+        size: this.#group.size(),
+      }),
+      this.isDisabled() && 'opacity-50',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly labelClass = computed(() =>
+    cn(
+      buttonGroupTextVariants({
+        variant: this.#group.variant(),
+        size: this.#group.size(),
+      }),
+    ),
+  );
+
+  protected onPressStart(): void {
+    if (this.isDisabled()) return;
+    // See UiButton — press animations use el.setStyle-driven transitions that
+    // are inert in the JIT test harness. Verified on-device.
+    /* v8 ignore next 2 */
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressDown(this.containerRef()?.nativeElement);
+  }
+
+  protected onPressEnd(): void {
+    if (this.isDisabled()) return;
+    /* v8 ignore next 2 */
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+
+  protected onPressCancel(): void {
+    // Restore scale on cancel too — otherwise a touch stolen by a scroll
+    // gesture leaves the item stuck in its pressed-down state.
+    /* v8 ignore next 2 */
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+
+  protected onTap(): void {
+    if (!this.isDisabled()) {
+      this.pressed.emit();
+    }
+  }
+}

package/dist/ui/components/button-group/index.ts

@@ -0,0 +1,8 @@
+export {
+  UiButtonGroup,
+  UiButtonGroupItem,
+  buttonGroupItemVariants,
+  type ButtonGroupVariant,
+  type ButtonGroupSize,
+  type ButtonGroupOrientation,
+} from './button-group';