Shape providers

import type {
  ShapePathParams,
  ShapeProvider,
  StrokePathParams,
} from '@wearables-ui-toolkit/mrbd';

• Return a closed path (Z) in the layer’s own coordinate space, with the fill outline anchored at the origin. Layers draw against this path directly; nothing re-centers it for you.
• In getStrokePath, inset the outline by half the stroke width on every side and reduce corner rounding by the same amount. A stroke centered on the outer boundary spills half its width outside the fill and reads as a fringe.
• Clamp defensively. width - strokeWidth can go negative on a small surface, and a corner radius larger than half the short side has to collapse.
• Be immutable. Paths are cached per provider instance, so a provider whose configuration mutates will keep serving stale geometry. Construct a new provider when the shape changes.
• Be size-agnostic. Surfaces size themselves from available space, so a provider is re-asked for a path on every measured size change and must produce a sensible outline at any aspect ratio.

import { useMemo } from 'react';
import {
  Container,
  CornerRadius,
  MaterialLibrary,
  RoundedRectangleShapeProvider,
} from '@wearables-ui-toolkit/mrbd';

export function CompactTile({ label }: { label: string }) {
  const shapeProvider = useMemo(
    () => new RoundedRectangleShapeProvider(CornerRadius.SMALL),
    [],
  );
  const material = useMemo(() => MaterialLibrary.default(), []);

  return (
    <Container
      material={material}
      shapeProvider={shapeProvider}
      focusable
      clickable
      className="compact-tile"
    >
      <span className="uit-text-body1">{label}</span>
    </Container>
  );
}

.compact-tile {
  padding: var(--uit-spacing-medium);
  color: var(--uit-color-text-primary);
}

• Fill paths. The host builds a Path2D from getShapePath and passes it to every layer as params.path. Fills, gradients, textures, and images all paint through it.
• Layer clipping. Canvas layers are clipped to that path unless the layer sets clipsToShape: false. CSS layers are clipped to the same outline under the same rule.
• Stroke paths. Stroke layers call params.getInsetStrokePath(strokeWidth), which resolves through getStrokePath and returns a Path2D already translated into place. Stroke it directly; do not apply your own transform.
• Content clipping. When the host clips its content (the default on Container and StaticContainer), it clips to the same fill path, so content and material can never disagree about the edge.
• The pre-measurement fallback. Until a size has been measured, the host has no path and applies getCssBorderRadius() as a plain CSS border-radius. A provider that omits the method falls back to square corners for that first frame, which is the right answer for a shape CSS cannot express and the wrong one for a shape it can.

import {
  CornerRadius,
  type ShapePathParams,
  type ShapeProvider,
  type StrokePathParams,
} from '@wearables-ui-toolkit/mrbd';

/** Rectangle whose corners are cut at 45 degrees. Immutable by contract. */
export class ChamferShapeProvider implements ShapeProvider {
  constructor(private readonly cut: number = CornerRadius.SMALL) {}

  getShapePath({ width, height }: ShapePathParams): string {
    return this.buildPath(0, 0, width, height, this.cut);
  }

  getStrokePath({ width, height, strokeWidth }: StrokePathParams): string {
    const half = strokeWidth / 2;
    return this.buildPath(
      half,
      half,
      Math.max(0, width - strokeWidth),
      Math.max(0, height - strokeWidth),
      Math.max(0, this.cut - half),
    );
  }

  getCssBorderRadius(): string {
    return '0';
  }

  private buildPath(
    x: number,
    y: number,
    width: number,
    height: number,
    cut: number,
  ): string {
    const c = Math.max(0, Math.min(cut, Math.min(width, height) / 2));
    return [
      `M ${x + c},${y}`,
      `L ${x + width - c},${y}`,
      `L ${x + width},${y + c}`,
      `L ${x + width},${y + height - c}`,
      `L ${x + width - c},${y + height}`,
      `L ${x + c},${y + height}`,
      `L ${x},${y + height - c}`,
      `L ${x},${y + c}`,
      'Z',
    ].join(' ');
  }
}

import { useMemo, type ReactNode } from 'react';
import { Container, MaterialLibrary } from '@wearables-ui-toolkit/mrbd';
import { ChamferShapeProvider } from './ChamferShapeProvider';

export function ChamferedTile({ children }: { children: ReactNode }) {
  const shapeProvider = useMemo(() => new ChamferShapeProvider(), []);
  const material = useMemo(() => MaterialLibrary.default(), []);

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

• Pick a named CornerRadius token so the surface stays on the shared radius scale.
• Memoize one provider instance per host, or hoist a stateless provider to module scope and share it, so path caches remain effective.
• Inset the stroke path by half the stroke width and shrink the corner rounding to match, keeping the stroke inside the fill.
• Verify a custom shape at small, wide, tall, and near-square sizes, in every visual state, over the additive-light display.

• Do not mutate a provider when its configuration changes. Providers are immutable because their identity owns path caches; create a new provider.
• Do not allocate providers during render; inline allocation invalidates geometry caches on every pass.
• Do not use custom shapes to imitate unsupported components or bypass public variants. Reserve them for genuinely new geometry.
• Do not assume fixed dimensions. Derive all geometry from the supplied width and height so surfaces remain responsive.