@wibly/ui-kit 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # `@wibly/ui-kit` — Changelog
 
+## 0.1.3 — 2026-06-08
+
+## 0.1.2 — 2026-06-08
+
+Version alignment release (no API changes).
+
 ## 0.1.1 — 2026-05-30
 
 Initial public npm release. Eight shared React components plus the Wibly

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wibly/ui-kit",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Wibly @wibly/ui-kit",
   "type": "module",
   "main": "./src/index.ts",
@@ -18,10 +18,11 @@
     "access": "public"
   },
   "dependencies": {
+    "@platform/player-profile": "workspace:*",
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@wibly/sdk": "0.1.1",
+    "@wibly/sdk": "0.1.3",
     "react": "^19.0.0"
   },
   "peerDependenciesMeta": {

package/src/components/camera-capture-modal.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import type { ReactElement } from 'react';
+import * as React from 'react';
+
+import type { ProcessAvatarPhotoResult } from '@platform/player-profile';
+
+export type CameraCaptureModalProps = {
+  readonly open: boolean;
+  readonly onClose: () => void;
+  readonly onCaptured: (dataUrl: string) => void;
+  readonly onProcessBytes: (args: {
+    readonly bytes: Uint8Array;
+    readonly mimeType: string;
+    readonly sizeBytes: number;
+  }) => ProcessAvatarPhotoResult;
+};
+
+export const CameraCaptureModal = ({
+  open,
+  onClose,
+  onCaptured,
+  onProcessBytes,
+}: CameraCaptureModalProps): ReactElement | null => {
+  const videoRef = React.useRef<HTMLVideoElement>(null);
+  const streamRef = React.useRef<MediaStream | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const [ready, setReady] = React.useState(false);
+
+  const stopStream = React.useCallback((): void => {
+    for (const track of streamRef.current?.getTracks() ?? []) {
+      track.stop();
+    }
+    streamRef.current = null;
+    setReady(false);
+  }, []);
+
+  React.useEffect(() => {
+    if (!open) {
+      stopStream();
+      setError(null);
+      return;
+    }
+
+    let cancelled = false;
+
+    void (async () => {
+      if (
+        typeof navigator === 'undefined' ||
+        !navigator.mediaDevices?.getUserMedia
+      ) {
+        setError('Camera access is not available in this browser.');
+        return;
+      }
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: { facingMode: 'user', width: { ideal: 640 }, height: { ideal: 640 } },
+          audio: false,
+        });
+        if (cancelled) {
+          for (const track of stream.getTracks()) track.stop();
+          return;
+        }
+        streamRef.current = stream;
+        const video = videoRef.current;
+        if (video) {
+          video.srcObject = stream;
+          await video.play();
+          setReady(true);
+        }
+      } catch {
+        setError(
+          'Could not open the camera. Check permissions or try uploading a photo instead.',
+        );
+      }
+    })();
+
+    return (): void => {
+      cancelled = true;
+      stopStream();
+    };
+  }, [open, stopStream]);
+
+  const handleCapture = (): void => {
+    const video = videoRef.current;
+    if (!video || video.videoWidth === 0) return;
+    const canvas = document.createElement('canvas');
+    const size = Math.min(video.videoWidth, video.videoHeight);
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    const offsetX = (video.videoWidth - size) / 2;
+    const offsetY = (video.videoHeight - size) / 2;
+    ctx.drawImage(video, offsetX, offsetY, size, size, 0, 0, size, size);
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          setError('Could not capture a photo — try again.');
+          return;
+        }
+        void blob.arrayBuffer().then((buffer) => {
+          const result = onProcessBytes({
+            bytes: new Uint8Array(buffer),
+            mimeType: blob.type || 'image/jpeg',
+            sizeBytes: blob.size,
+          });
+          if (!result.ok) {
+            setError(result.message);
+            return;
+          }
+          stopStream();
+          onCaptured(result.dataUrl);
+          onClose();
+        });
+      },
+      'image/jpeg',
+      0.88,
+    );
+  };
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Take a photo with your camera"
+    >
+      <div className="w-full max-w-md rounded-2xl bg-white p-4 text-neutral-900 shadow-xl dark:bg-neutral-900 dark:text-neutral-100">
+        <h2 className="text-lg font-semibold">Take a photo</h2>
+        <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-300">
+          Position your face in the frame, then capture.
+        </p>
+        <div className="relative mt-4 aspect-square overflow-hidden rounded-xl bg-black">
+          <video
+            ref={videoRef}
+            className="h-full w-full object-cover"
+            playsInline
+            muted
+          />
+        </div>
+        {error ? (
+          <p className="mt-3 text-sm text-red-600" role="alert">
+            {error}
+          </p>
+        ) : null}
+        <div className="mt-4 flex flex-wrap justify-end gap-2">
+          <button
+            type="button"
+            className="rounded-full border border-neutral-300 px-4 py-2 text-sm font-semibold dark:border-neutral-600"
+            onClick={() => {
+              stopStream();
+              onClose();
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="rounded-full bg-indigo-600 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
+            disabled={!ready}
+            onClick={handleCapture}
+          >
+            Capture photo
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/host-display-viewport.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+/**
+ * Host TV display viewport — scale-to-fit 16:9 canvas with full-screen backdrop.
+ *
+ * Bundles set `HOST_BACKDROP_CSS_VAR` on the mount container (`data-host-mount`)
+ * so atmospheric backgrounds fill the physical screen outside letterboxing.
+ */
+
+import * as React from 'react';
+
+import {
+  computeHostCanvasScale,
+  HOST_BACKDROP_CSS_VAR,
+  HOST_CANVAS_HEIGHT,
+  HOST_CANVAS_WIDTH,
+} from '../lib/host-canvas.js';
+import { resolveHostMountElement } from '../lib/host-mount.js';
+import { cn } from '../lib/cn.js';
+
+export type HostDisplayViewportProps = {
+  readonly children: React.ReactNode;
+  /** When true, backdrop is contained to the preview card (Studio / ui-kit preview). */
+  readonly embedded?: boolean;
+  readonly className?: string;
+  readonly testId?: string;
+};
+
+const readHostBackdrop = (element: Element | null): string | null => {
+  if (!element) return null;
+  const value = getComputedStyle(element)
+    .getPropertyValue(HOST_BACKDROP_CSS_VAR)
+    .trim();
+  return value.length > 0 ? value : null;
+};
+
+export const HostDisplayViewport = ({
+  children,
+  embedded = false,
+  className,
+  testId = 'host-display-viewport',
+}: HostDisplayViewportProps): React.ReactElement => {
+  const viewportRef = React.useRef<HTMLDivElement | null>(null);
+  const canvasRef = React.useRef<HTMLDivElement | null>(null);
+  const fitRef = React.useRef<HTMLDivElement | null>(null);
+  const [scale, setScale] = React.useState(1);
+
+  React.useLayoutEffect(() => {
+    const fit = fitRef.current;
+    const viewport = viewportRef.current;
+    if (!fit) return;
+
+    const updateScale = (): void => {
+      const { width, height } = fit.getBoundingClientRect();
+      const next = computeHostCanvasScale(width, height);
+      setScale(next > 0 ? next : 0);
+    };
+
+    updateScale();
+    const observer = new ResizeObserver(updateScale);
+    observer.observe(fit);
+    if (viewport) {
+      observer.observe(viewport);
+    }
+    return () => observer.disconnect();
+  }, []);
+
+  React.useLayoutEffect(() => {
+    const viewport = viewportRef.current;
+    const canvas = canvasRef.current;
+    if (!viewport || !canvas) return;
+
+    const syncBackdrop = (): void => {
+      const mount = resolveHostMountElement(canvas);
+      const backdrop = readHostBackdrop(mount);
+      if (backdrop) {
+        viewport.style.setProperty(HOST_BACKDROP_CSS_VAR, backdrop);
+      } else {
+        viewport.style.removeProperty(HOST_BACKDROP_CSS_VAR);
+      }
+    };
+
+    const observed: MutationObserver[] = [];
+
+    const observe = (target: Node): void => {
+      const observer = new MutationObserver(syncBackdrop);
+      observer.observe(target, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['style', 'class'],
+      });
+      observed.push(observer);
+    };
+
+    const observeIframe = (iframe: HTMLIFrameElement): void => {
+      const doc = iframe.contentDocument;
+      if (!doc) return;
+      observe(doc.documentElement);
+    };
+
+    syncBackdrop();
+    observe(canvas);
+
+    const iframe = canvas.querySelector('iframe[data-host-mount]');
+    if (iframe instanceof HTMLIFrameElement) {
+      if (iframe.contentDocument) {
+        observeIframe(iframe);
+      }
+      iframe.addEventListener('load', () => {
+        observeIframe(iframe);
+        syncBackdrop();
+      });
+    }
+
+    return () => {
+      for (const observer of observed) {
+        observer.disconnect();
+      }
+    };
+  }, []);
+
+  const scaledWidth = HOST_CANVAS_WIDTH * scale;
+  const scaledHeight = HOST_CANVAS_HEIGHT * scale;
+
+  return (
+    <div
+      ref={viewportRef}
+      data-testid={testId}
+      className={cn(
+        'host-display-viewport relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden',
+        embedded && 'host-display-viewport--embedded',
+        className,
+      )}
+    >
+      <div
+        aria-hidden
+        data-testid="host-display-backdrop"
+        className={cn(
+          'host-display-backdrop pointer-events-none inset-0 z-0',
+          embedded ? 'absolute' : 'fixed',
+        )}
+      />
+      <div
+        ref={fitRef}
+        data-testid="host-display-fit"
+        className="relative z-10 flex min-h-0 min-w-0 flex-1 items-center justify-center overflow-hidden"
+      >
+        <div
+          data-testid="host-display-scaler"
+          className="host-display-scaler relative shrink-0 overflow-hidden"
+          style={{
+            width: scaledWidth,
+            height: scaledHeight,
+          }}
+        >
+          <div
+            ref={canvasRef}
+            data-testid="host-display-canvas"
+            className="host-display-canvas absolute top-0 left-0 overflow-hidden"
+            style={{
+              width: HOST_CANVAS_WIDTH,
+              height: HOST_CANVAS_HEIGHT,
+              transform: `scale(${scale})`,
+              transformOrigin: 'top left',
+            }}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/player-avatar-picker.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import type { ReactElement } from 'react';
+import * as React from 'react';
+
+import {
+  letterFromDisplayName,
+  PRESET_AVATARS,
+  processAvatarPhotoBytes,
+  resolveAvatarPreviewUrl,
+  type PresetAvatarId,
+  type ProcessAvatarPhotoResult,
+} from '@platform/player-profile';
+
+import { CameraCaptureModal } from './camera-capture-modal.js';
+
+export type PlayerAvatarPickerShape = 'rounded' | 'circle';
+
+export type PlayerAvatarPickerProps = {
+  readonly displayName: string;
+  readonly selectedPresetId: PresetAvatarId;
+  readonly customAvatarUrl: string | null;
+  readonly onPresetChange: (id: PresetAvatarId) => void;
+  readonly onCustomAvatarChange: (dataUrl: string | null) => void;
+  readonly onProcessPhotoFile?: (
+    formData: FormData,
+  ) => Promise<ProcessAvatarPhotoResult>;
+  readonly shape?: PlayerAvatarPickerShape;
+  readonly previewClassName?: string;
+  readonly selectClassName?: string;
+  readonly primaryButtonClassName?: string;
+  readonly secondaryButtonClassName?: string;
+  readonly errorClassName?: string;
+};
+
+const defaultPreviewClass =
+  'relative h-14 w-14 shrink-0 overflow-hidden border border-neutral-200 bg-neutral-50';
+
+const defaultSelectClass =
+  'h-10 w-full min-w-0 rounded-lg border border-neutral-200 bg-white px-3 text-sm font-medium text-neutral-900';
+
+export const PlayerAvatarPicker = ({
+  displayName,
+  selectedPresetId,
+  customAvatarUrl,
+  onPresetChange,
+  onCustomAvatarChange,
+  onProcessPhotoFile,
+  shape = 'rounded',
+  previewClassName,
+  selectClassName,
+  primaryButtonClassName = 'text-xs font-semibold text-indigo-600 underline-offset-2 hover:underline',
+  secondaryButtonClassName = 'text-xs font-semibold text-neutral-500 underline-offset-2 hover:underline',
+  errorClassName = 'text-xs font-medium text-red-600',
+}: PlayerAvatarPickerProps): ReactElement => {
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+  const cameraInputRef = React.useRef<HTMLInputElement>(null);
+  const [photoError, setPhotoError] = React.useState<string | null>(null);
+  const [uploading, setUploading] = React.useState(false);
+  const [cameraOpen, setCameraOpen] = React.useState(false);
+
+  const previewRadius = shape === 'circle' ? 'rounded-full' : 'rounded-xl';
+  const letter = letterFromDisplayName(displayName);
+
+  const previewUrl =
+    customAvatarUrl ??
+    resolveAvatarPreviewUrl({
+      presetId: selectedPresetId,
+      displayName,
+    });
+
+  const applyPhotoResult = (result: ProcessAvatarPhotoResult): void => {
+    if (!result.ok) {
+      setPhotoError(result.message);
+      return;
+    }
+    onCustomAvatarChange(result.dataUrl);
+  };
+
+  const handlePhotoFile = async (file: File): Promise<void> => {
+    setUploading(true);
+    setPhotoError(null);
+    if (onProcessPhotoFile) {
+      const formData = new FormData();
+      formData.set('photo', file);
+      const result = await onProcessPhotoFile(formData);
+      setUploading(false);
+      applyPhotoResult(result);
+      return;
+    }
+    const buffer = await file.arrayBuffer();
+    const result = processAvatarPhotoBytes({
+      bytes: new Uint8Array(buffer),
+      mimeType: file.type,
+      sizeBytes: file.size,
+    });
+    setUploading(false);
+    applyPhotoResult(result);
+  };
+
+  const handleFileInput = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const file = event.target.files?.[0];
+    event.target.value = '';
+    if (!file) return;
+    void handlePhotoFile(file);
+  };
+
+  const handlePresetChange = (
+    event: React.ChangeEvent<HTMLSelectElement>,
+  ): void => {
+    onCustomAvatarChange(null);
+    onPresetChange(event.target.value as PresetAvatarId);
+  };
+
+  return (
+    <section className="flex flex-col gap-3">
+      <div className="flex items-center gap-3">
+        <div className={`${previewClassName ?? defaultPreviewClass} ${previewRadius}`}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={previewUrl}
+            alt="Your avatar preview"
+            className="h-full w-full object-cover"
+          />
+        </div>
+        <div className="min-w-0 flex-1">
+          <label className="flex flex-col gap-1.5">
+            <span className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
+              Avatar
+            </span>
+            <select
+              className={selectClassName ?? defaultSelectClass}
+              value={selectedPresetId}
+              disabled={Boolean(customAvatarUrl)}
+              aria-label="Choose an avatar"
+              onChange={handlePresetChange}
+            >
+              {PRESET_AVATARS.map((avatar) => (
+                <option key={avatar.id} value={avatar.id}>
+                  {avatar.id === 'letter'
+                    ? `${avatar.label} — ${letter}`
+                    : avatar.label}
+                </option>
+              ))}
+            </select>
+          </label>
+          {customAvatarUrl ? (
+            <p className="mt-1 text-xs text-neutral-500">Using a custom photo</p>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
+        <button
+          type="button"
+          className={primaryButtonClassName}
+          disabled={uploading}
+          onClick={() => setCameraOpen(true)}
+        >
+          Camera / webcam
+        </button>
+        <button
+          type="button"
+          className={primaryButtonClassName}
+          disabled={uploading}
+          onClick={() => cameraInputRef.current?.click()}
+        >
+          Take photo
+        </button>
+        <button
+          type="button"
+          className={primaryButtonClassName}
+          disabled={uploading}
+          onClick={() => fileInputRef.current?.click()}
+        >
+          {uploading ? 'Processing…' : 'Upload photo'}
+        </button>
+        {customAvatarUrl ? (
+          <button
+            type="button"
+            className={secondaryButtonClassName}
+            onClick={() => onCustomAvatarChange(null)}
+          >
+            Use preset instead
+          </button>
+        ) : null}
+      </div>
+
+      <input
+        ref={cameraInputRef}
+        type="file"
+        accept="image/jpeg,image/png,image/webp"
+        capture="user"
+        className="hidden"
+        onChange={handleFileInput}
+      />
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/jpeg,image/png,image/webp"
+        className="hidden"
+        onChange={handleFileInput}
+      />
+
+      <CameraCaptureModal
+        open={cameraOpen}
+        onClose={() => setCameraOpen(false)}
+        onCaptured={(dataUrl) => {
+          setPhotoError(null);
+          onCustomAvatarChange(dataUrl);
+        }}
+        onProcessBytes={processAvatarPhotoBytes}
+      />
+
+      {photoError ? (
+        <p className={errorClassName} role="alert">
+          {photoError}
+        </p>
+      ) : null}
+    </section>
+  );
+};

package/src/components/player-avatar.tsx

@@ -0,0 +1,82 @@
+/**
+ * `PlayerAvatar` — single player chip for rosters and score strips.
+ */
+
+import * as React from 'react';
+
+import { cn } from '../lib/cn.js';
+
+export type PlayerAvatarProps = {
+  readonly playerId: string;
+  readonly displayName: string;
+  readonly imageUrl?: string | null;
+  readonly score?: number;
+  readonly connected?: boolean;
+  readonly highlighted?: boolean;
+  readonly size?: 'sm' | 'md';
+  readonly className?: string;
+  readonly testId?: string;
+};
+
+const initialsFromName = (name: string): string => {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return '?';
+  return parts[0]!.slice(0, 2).toUpperCase();
+};
+
+const SIZE_CLASS: Record<NonNullable<PlayerAvatarProps['size']>, string> = {
+  sm: 'size-10 text-[10px]',
+  md: 'size-14 text-xs',
+};
+
+export const PlayerAvatar = ({
+  playerId,
+  displayName,
+  imageUrl,
+  score,
+  connected,
+  highlighted = false,
+  size = 'md',
+  className,
+  testId,
+}: PlayerAvatarProps): React.ReactElement => (
+  <div
+    data-testid={testId ?? `player-avatar-${playerId}`}
+    className={cn(
+      'relative flex flex-col items-center gap-1',
+      highlighted ? 'opacity-100' : 'opacity-90',
+      className,
+    )}
+    title={displayName}
+  >
+    <div
+      className={cn(
+        'relative flex shrink-0 items-center justify-center overflow-hidden rounded-full border-2 bg-card font-bold text-card-foreground',
+        SIZE_CLASS[size],
+        highlighted ? 'border-primary shadow-[0_0_0_3px_color-mix(in_oklab,var(--primary)_25%,transparent)]' : 'border-border',
+        connected === false ? 'opacity-50' : '',
+      )}
+    >
+      {imageUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={imageUrl} alt="" className="size-full object-cover" />
+      ) : (
+        <span>{initialsFromName(displayName)}</span>
+      )}
+      {connected === true ? (
+        <span
+          className="absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full border-2 border-card bg-[color:var(--color-success,oklch(0.62_0.17_155))]"
+          aria-label="Connected"
+        />
+      ) : null}
+    </div>
+    <span className="max-w-[5.5rem] truncate text-center text-[10px] font-medium text-foreground">
+      {displayName}
+    </span>
+    {score !== undefined ? (
+      <span className="rounded-full bg-primary/20 px-1.5 py-0.5 text-[10px] font-bold text-primary">
+        {score.toLocaleString()}
+      </span>
+    ) : null}
+  </div>
+);