Custom materials

import { useMemo, type ReactNode } from 'react';
import {
  Container,
  ContainerMaterial,
  ContainerMaterialLayer,
  LayerPlacement,
  VisualState,
  createGlowStrokeLayer,
  createIdleMaterialLayer,
  createPressedMaterialLayer,
  fillEllipticalRadialGradient,
  getInsetAdjustedShaderHeight,
  shiftedX,
  shiftedY,
  type CanvasLayerDrawParams,
  type GradientStop,
} from '@wearables-ui-toolkit/mrbd';

export interface BloomPalette {
  focusCore: string;
  focusFalloff: string;
}

/** A soft focus bloom rising from the lower edge of the surface. */
class FocusBloomLayer extends ContainerMaterialLayer {
  private readonly stops: readonly GradientStop[];

  constructor(palette: BloomPalette) {
    super('focus-bloom', LayerPlacement.BACKGROUND, {
      sortOrder: 100,
      supportsDiscretePartialFocus: true,
      alphaForState: (state) =>
        state === VisualState.FOCUSED || state === VisualState.PRESSED ? 1 : 0,
    });
    this.stops = [
      { offset: 0, color: palette.focusCore },
      { offset: 1, color: palette.focusFalloff },
    ];
  }

  protected paint(
    ctx: CanvasRenderingContext2D,
    params: CanvasLayerDrawParams,
    alpha: number,
  ): void {
    const { width, height, partialFocusPosition, shapeContext } = params;

    fillEllipticalRadialGradient(ctx, {
      path: params.path,
      width,
      height,
      cx: shiftedX(0.5, width, partialFocusPosition),
      cy: shiftedY(0.9, height, partialFocusPosition),
      radius: 0.8 * getInsetAdjustedShaderHeight(height, shapeContext),
      scaleX: 1.6,
      stops: this.stops,
      alpha,
      blend: this.blendMode,
    });
  }
}

export function BloomTile({
  children,
  palette,
  onOpen,
}: {
  children: ReactNode;
  palette: BloomPalette;
  onOpen: () => void;
}) {
  const material = useMemo(
    () =>
      new ContainerMaterial({
        layers: [
          createIdleMaterialLayer(),
          new FocusBloomLayer(palette),
          createPressedMaterialLayer(),
          createGlowStrokeLayer(),
        ],
      }),
    [palette],
  );

  return (
    <Container
      material={material}
      focusable
      clickable
      onClick={onOpen}
      className="bloom-tile"
    >
      {children}
    </Container>
  );
}

import { useMemo, type ReactNode } from 'react';
import {
  AnimationDurations,
  Container,
  ContainerMaterial,
  LayerPlacement,
  VisualState,
  createLayer,
  createTransition,
} from '@wearables-ui-toolkit/mrbd';

export function StatusTile({ children }: { children: ReactNode }) {
  const material = useMemo(
    () =>
      new ContainerMaterial({
        layers: [
          createLayer(
            'base',
            LayerPlacement.BACKGROUND,
            () => ({
              background: 'var(--uit-color-background-elevation1)',
            }),
            { sortOrder: 0 },
          ),
          createLayer(
            'interaction',
            LayerPlacement.BACKGROUND,
            (state, animated) => {
              const isFocused = state === VisualState.FOCUSED;
              const isPressed = state === VisualState.PRESSED;

              return {
                background: isPressed
                  ? 'var(--uit-color-interactive-fill-pressed)'
                  : 'var(--uit-color-background-elevation3)',
                opacity: isFocused || isPressed ? 1 : 0,
                transition: animated
                  ? createTransition(
                      'opacity',
                      AnimationDurations.CONTAINER_STATE_CHANGE,
                    )
                  : 'none',
              };
            },
            { sortOrder: 100 },
          ),
        ],
      }),
    [],
  );

  return (
    <Container material={material} focusable clickable className="status-tile">
      {children}
    </Container>
  );
}

import {
  ContainerMaterialLayer,
  LayerPlacement,
  fillSolid,
  type CanvasLayerDrawParams,
} from '@wearables-ui-toolkit/mrbd';

export class TintLayer extends ContainerMaterialLayer {
  constructor(private readonly color: string) {
    super('tint', LayerPlacement.BACKGROUND, { sortOrder: 75 });
  }

  protected paint(
    ctx: CanvasRenderingContext2D,
    params: CanvasLayerDrawParams,
    alpha: number,
  ): void {
    fillSolid(ctx, params.path, this.color, alpha, this.blendMode);
  }
}