@ksp-gonogo/kerbcast-react 1.6.3 → 1.8.0

package/src/RecordingsTray.tsx

@@ -0,0 +1,475 @@
+/**
+ * RecordingsTray: a presentational drawer over the client-side recordings
+ * store (`useRecordings()`). Lists finished single clips and grouped SETS,
+ * with a play/preview, a download, and a discard per clip; a group also gets
+ * a download-all + a discard-set. Recording is client-local and in-memory (no
+ * sidecar, no server state), so this is where an operator saves a clip before
+ * a page reload discards it. The tray shows a quiet reminder of that.
+ *
+ * Deliberately dumb: it owns no recording logic, only formatting and the
+ * per-clip object-URL lifecycle (create on first render, revoke on discard or
+ * unmount). Starting/stopping recordings is CameraFeed's REC control (or a
+ * host's own REC+ grouped flow); this component only ever reads the store and
+ * calls its discard/discardGroup actions.
+ *
+ * Every `RecordingHandle` (standalone or a grouped member) carries its own
+ * `flightId`, so camera names come straight off the clip, with no dependency
+ * on the store's transient `active` list. That matters because the tray
+ * commonly mounts after a recording has already finished (its `active` entry
+ * long gone by then). A host supplies the flightId -> label step via
+ * `cameraLabel` (e.g. `buildCameraLabeler(useKerbcastCameras())`, the same
+ * labeller CameraFeed uses) so this stays decoupled from any particular
+ * camera registry; omit it for a plain "Camera <flightId>" fallback.
+ */
+
+import type { GroupedRecordingHandle, RecordingHandle } from "@ksp-gonogo/kerbcast";
+import { useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+import styled from "styled-components";
+import { useRecordings } from "./hooks/useRecordings";
+
+export interface RecordingsTrayProps {
+  /**
+   * Resolve a flightId to a display label for a clip's camera name. Omit for
+   * a plain "Camera <flightId>" fallback.
+   */
+  cameraLabel?: (flightId: number) => string;
+  /** Forwarded to the root panel; lets a host lay out/size the tray. */
+  className?: string;
+}
+
+/**
+ * The shared drawer. Requires a `KerbcastProvider` ancestor (it calls
+ * `useRecordings()` directly, same requirement as `CameraFeed`).
+ */
+export function RecordingsTray({ cameraLabel, className }: RecordingsTrayProps) {
+  const store = useRecordings();
+
+  const labelFor = useCallback(
+    (flightId: number): string => (cameraLabel ? cameraLabel(flightId) : `Camera ${flightId}`),
+    [cameraLabel],
+  );
+
+  const allClips = useMemo(
+    () => [...store.recordings, ...store.groups.flatMap((g) => g.recordings)],
+    [store.recordings, store.groups],
+  );
+  const objectUrls = useClipObjectUrls(allClips);
+
+  const hasAny = store.recordings.length > 0 || store.groups.length > 0;
+
+  return (
+    <Tray className={className} aria-label="Recordings">
+      {!hasAny ? (
+        <Empty>No recordings yet. Press REC on a feed to start one.</Empty>
+      ) : (
+        <>
+          <Notice>
+            Unsaved clips are lost on reload. Download what you want to keep.
+          </Notice>
+          <ClipList>
+            {store.recordings.map((rec) => (
+              <ClipRow
+                key={rec.recordingId}
+                rec={rec}
+                label={labelFor(rec.flightId)}
+                url={objectUrls.get(rec.recordingId)}
+                onDiscard={() => store.discard(rec.recordingId)}
+              />
+            ))}
+            {store.groups.map((group) => (
+              <GroupItem
+                key={group.groupId}
+                group={group}
+                labelFor={labelFor}
+                objectUrls={objectUrls}
+                onDiscardGroup={() => store.discardGroup(group.groupId)}
+              />
+            ))}
+          </ClipList>
+        </>
+      )}
+    </Tray>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Sub-rows
+// ---------------------------------------------------------------------------
+
+interface ClipRowProps {
+  rec: RecordingHandle;
+  label: string;
+  url: string | undefined;
+  /** Omitted for a clip inside a grouped set: only the whole set discards. */
+  onDiscard?: () => void;
+}
+
+function ClipRow({ rec, label, url, onDiscard }: ClipRowProps) {
+  const utRange =
+    rec.utStart != null && rec.utEnd != null
+      ? `${formatUt(rec.utStart)} - ${formatUt(rec.utEnd)}`
+      : "no UT (out of flight)";
+
+  return (
+    <Clip>
+      {url ? (
+        <ClipPreview controls preload="metadata" src={url} aria-label={`Preview: ${label}`} />
+      ) : (
+        <ClipPreviewPlaceholder aria-hidden="true" />
+      )}
+      <ClipMeta>
+        <ClipName>{label}</ClipName>
+        <ClipDetail>{utRange}</ClipDetail>
+        <ClipDetail>
+          {formatDuration(rec.durationMs)} &middot; {formatBytes(rec.byteSize)}
+        </ClipDetail>
+      </ClipMeta>
+      <ClipActions>
+        {url && (
+          <TrayLink href={url} download={clipFileName(rec, label)}>
+            Download
+          </TrayLink>
+        )}
+        {onDiscard && (
+          <TrayButton type="button" $danger onClick={onDiscard}>
+            Discard
+          </TrayButton>
+        )}
+      </ClipActions>
+    </Clip>
+  );
+}
+
+interface GroupItemProps {
+  group: GroupedRecordingHandle;
+  labelFor: (flightId: number) => string;
+  objectUrls: Map<string, string>;
+  onDiscardGroup: () => void;
+}
+
+function GroupItem({ group, labelFor, objectUrls, onDiscardGroup }: GroupItemProps) {
+  return (
+    <GroupCard aria-label={`Grouped recording, ${group.recordings.length} feeds`}>
+      <GroupHeader>
+        <GroupHeaderText>
+          <GroupTitle>
+            Grouped recording &middot; {group.recordings.length} feeds
+          </GroupTitle>
+          {group.commonUtWindow && (
+            <GroupMeta>
+              common UT {formatUt(group.commonUtWindow[0])} -{" "}
+              {formatUt(group.commonUtWindow[1])}
+            </GroupMeta>
+          )}
+        </GroupHeaderText>
+        <GroupActions>
+          <TrayButton
+            type="button"
+            onClick={() => downloadAll(group.recordings, objectUrls, labelFor)}
+          >
+            Download all
+          </TrayButton>
+          <TrayButton type="button" $danger onClick={onDiscardGroup}>
+            Discard set
+          </TrayButton>
+        </GroupActions>
+      </GroupHeader>
+      {group.recordings.map((rec) => (
+        <ClipRow
+          key={rec.recordingId}
+          rec={rec}
+          label={labelFor(rec.flightId)}
+          url={objectUrls.get(rec.recordingId)}
+        />
+      ))}
+    </GroupCard>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Object-URL lifecycle
+// ---------------------------------------------------------------------------
+
+/**
+ * Creates one `URL.createObjectURL` per clip and revokes it once the clip
+ * disappears from `clips` (discarded) or on unmount. The map itself lives in
+ * a ref (not state) so the unmount cleanup always sees every URL ever
+ * created, even ones added after the effect that captured it first ran; a
+ * cheap reducer bump re-renders the caller whenever the map actually changes.
+ */
+function useClipObjectUrls(clips: RecordingHandle[]): Map<string, string> {
+  const mapRef = useRef(new Map<string, string>());
+  const [, bump] = useReducer((c: number) => c + 1, 0);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    const liveIds = new Set(clips.map((c) => c.recordingId));
+    let changed = false;
+
+    for (const [id, url] of map) {
+      if (!liveIds.has(id)) {
+        URL.revokeObjectURL(url);
+        map.delete(id);
+        changed = true;
+      }
+    }
+    for (const clip of clips) {
+      if (!map.has(clip.recordingId)) {
+        map.set(clip.recordingId, URL.createObjectURL(clip.blob));
+        changed = true;
+      }
+    }
+    if (changed) bump();
+  }, [clips]);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    return () => {
+      for (const url of map.values()) URL.revokeObjectURL(url);
+      map.clear();
+    };
+  }, []);
+
+  return mapRef.current;
+}
+
+// ---------------------------------------------------------------------------
+// Formatting + download helpers
+// ---------------------------------------------------------------------------
+
+/* KSP mission time (seconds); the tray shows the raw value rather than the
+   in-game calendar breakdown, which needs the epoch this component doesn't have. */
+function formatUt(ut: number): string {
+  return `T+${Math.round(ut)}s`;
+}
+
+function formatDuration(ms: number): string {
+  const totalSeconds = Math.max(0, Math.round(ms / 1000));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  const mm = hours > 0 ? minutes.toString().padStart(2, "0") : minutes.toString();
+  const ss = seconds.toString().padStart(2, "0");
+  return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb.toFixed(1)} KB`;
+  return `${(kb / 1024).toFixed(1)} MB`;
+}
+
+function clipFileName(rec: RecordingHandle, label: string): string {
+  const ext = /mp4/i.test(rec.mimeType) ? "mp4" : "webm";
+  const safeLabel = label.replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "") || "clip";
+  return `${safeLabel}-${rec.recordingId}.${ext}`;
+}
+
+/* A set's "download all": one <a> per member, clicked in turn. Each still
+   downloads under its own clip filename (no zipping); good enough for an
+   operator who wants every feed of the moment without N separate clicks. */
+function downloadAll(
+  members: RecordingHandle[],
+  urls: Map<string, string>,
+  labelFor: (flightId: number) => string,
+): void {
+  for (const member of members) {
+    const url = urls.get(member.recordingId);
+    if (!url) continue;
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = clipFileName(member, labelFor(member.flightId));
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Styled components
+// ---------------------------------------------------------------------------
+
+const Tray = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 260px;
+  max-height: min(70vh, 520px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 10px;
+  background: var(--kerbcast-tray-bg, rgba(0, 0, 0, 0.85));
+  border: 1px solid var(--kerbcast-tray-border, rgba(255, 255, 255, 0.3));
+  border-radius: 6px;
+  color: var(--kerbcast-tray-text, #fff);
+  font-size: 12px;
+`;
+
+const Empty = styled.div`
+  padding: 16px 8px;
+  text-align: center;
+  color: var(--kerbcast-tray-text-muted, rgba(255, 255, 255, 0.65));
+  font-style: italic;
+`;
+
+const Notice = styled.div`
+  padding: 2px 2px 4px;
+  color: var(--kerbcast-tray-text-muted, rgba(255, 255, 255, 0.55));
+  font-size: 10.5px;
+  font-style: italic;
+  letter-spacing: 0.01em;
+`;
+
+const ClipList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const Clip = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 6px 0;
+  border-top: 1px solid var(--kerbcast-tray-border-subtle, rgba(255, 255, 255, 0.12));
+
+  &:first-child {
+    border-top: none;
+    padding-top: 0;
+  }
+`;
+
+const ClipPreview = styled.video`
+  width: 120px;
+  aspect-ratio: 16 / 9;
+  background: #000;
+  border-radius: 4px;
+  flex-shrink: 0;
+  object-fit: cover;
+`;
+
+const ClipPreviewPlaceholder = styled.div`
+  width: 120px;
+  aspect-ratio: 16 / 9;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+  flex-shrink: 0;
+`;
+
+const ClipMeta = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1 1 140px;
+  min-width: 0;
+`;
+
+const ClipName = styled.div`
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const ClipDetail = styled.div`
+  color: var(--kerbcast-tray-text-muted, rgba(255, 255, 255, 0.65));
+  font-size: 11px;
+`;
+
+const ClipActions = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  flex-shrink: 0;
+`;
+
+const trayButtonBase = `
+  padding: 3px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  letter-spacing: 0.03em;
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+`;
+
+const TrayButton = styled.button<{ $danger?: boolean }>`
+  ${trayButtonBase}
+  background: transparent;
+  border: 1px solid
+    ${(p) =>
+      p.$danger
+        ? "var(--kerbcast-tray-danger, #ff6b5e)"
+        : "var(--kerbcast-accent, #00ff88)"};
+  color: ${(p) => (p.$danger ? "var(--kerbcast-tray-danger, #ff6b5e)" : "var(--kerbcast-accent, #00ff88)")};
+
+  @media (hover: hover) {
+    &:hover {
+      background: ${(p) =>
+        p.$danger ? "rgba(255, 107, 94, 0.15)" : "var(--kerbcast-accent-wash, rgba(0, 255, 136, 0.15))"};
+    }
+  }
+`;
+
+const TrayLink = styled.a`
+  ${trayButtonBase}
+  display: inline-block;
+  background: transparent;
+  border: 1px solid var(--kerbcast-accent, #00ff88);
+  color: var(--kerbcast-accent, #00ff88);
+
+  @media (hover: hover) {
+    &:hover {
+      background: var(--kerbcast-accent-wash, rgba(0, 255, 136, 0.15));
+    }
+  }
+`;
+
+const GroupCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  background: var(--kerbcast-tray-surface-raised, rgba(255, 255, 255, 0.04));
+  border: 1px solid var(--kerbcast-tray-border-subtle, rgba(255, 255, 255, 0.12));
+  border-left: 2px solid var(--kerbcast-accent, #00ff88);
+  border-radius: 4px;
+
+  ${Clip} {
+    border-top-color: var(--kerbcast-tray-border-subtle, rgba(255, 255, 255, 0.12));
+  }
+`;
+
+const GroupHeader = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+`;
+
+const GroupHeaderText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const GroupTitle = styled.div`
+  font-weight: 600;
+  letter-spacing: 0.03em;
+`;
+
+const GroupMeta = styled.div`
+  color: var(--kerbcast-tray-text-muted, rgba(255, 255, 255, 0.65));
+  font-size: 11px;
+`;
+
+const GroupActions = styled.div`
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+`;

package/src/context.test.tsx

@@ -0,0 +1,94 @@
+import { describe, expect, it, vi } from "vitest";
+import type { KerbcastClient } from "@ksp-gonogo/kerbcast";
+import { createClientDisplaySizes } from "./context";
+
+/**
+ * A client stub that only records reportDisplaySize calls. The registry is the
+ * per-consumer MAX collapse across every mounted reporter for one flightId, so
+ * a spotlight and a tiny avatar of the same camera resolve to one report = max,
+ * and a departing big reporter relaxes the stream back down (the v1.6.3
+ * "don't pin large" discipline at the client edge).
+ */
+function fakeClient() {
+  const reports: Array<{ flightId: number; width: number; height: number }> = [];
+  const client = {
+    reportDisplaySize: vi.fn(async (flightId: number, width: number, height: number) => {
+      reports.push({ flightId, width, height });
+    }),
+  } as unknown as KerbcastClient;
+  return { client, reports };
+}
+
+describe("createClientDisplaySizes", () => {
+  it("reports the measured size for a single reporter", () => {
+    const { client, reports } = fakeClient();
+    const reg = createClientDisplaySizes(client);
+    reg.report(1, "a", 40, 40);
+    expect(reports).toEqual([{ flightId: 1, width: 40, height: 40 }]);
+  });
+
+  it("collapses two reporters of one camera to a single MAX report", () => {
+    const { client, reports } = fakeClient();
+    const reg = createClientDisplaySizes(client);
+    reg.report(1, "small", 40, 40);
+    reg.report(1, "big", 512, 512);
+    // 40 first, then bumped to the max 512 when the big one mounts.
+    expect(reports).toEqual([
+      { flightId: 1, width: 40, height: 40 },
+      { flightId: 1, width: 512, height: 512 },
+    ]);
+  });
+
+  it("maxes width and height independently across reporters", () => {
+    const { client, reports } = fakeClient();
+    const reg = createClientDisplaySizes(client);
+    reg.report(1, "a", 640, 360);
+    reg.report(1, "b", 320, 400);
+    expect(reports.at(-1)).toEqual({ flightId: 1, width: 640, height: 400 });
+  });
+
+  it("does not re-report when the max is unchanged", () => {
+    const { client, reports } = fakeClient();
+    const reg = createClientDisplaySizes(client);
+    reg.report(1, "big", 512, 512);
+    reg.report(1, "small", 40, 40); // below current max -> no new report
+    reg.report(1, "small", 44, 44); // still below -> no new report
+    expect(reports).toEqual([{ flightId: 1, width: 512, height: 512 }]);
+  });
+
+  it("relaxes to the next-largest reporter when the big one departs", () => {
+    const { client, reports } = fakeClient();
+    const reg = createClientDisplaySizes(client);
+    reg.report(1, "small", 40, 40);
+    reg.report(1, "big", 512, 512);
+    reg.clear(1, "big");
+    expect(reports.at(-1)).toEqual({ flightId: 1, width: 40, height: 40 });
+  });
+
+  it("sends nothing more once the last reporter departs (backend forget clears it)", () => {
+    const { client, reports } = fakeClient();
+    const reg = createClientDisplaySizes(client);
+    reg.report(1, "a", 40, 40);
+    const countBefore = reports.length;
+    reg.clear(1, "a");
+    expect(reports.length).toBe(countBefore); // no extra report on empty
+  });
+
+  it("keeps separate maxes per flightId", () => {
+    const { client, reports } = fakeClient();
+    const reg = createClientDisplaySizes(client);
+    reg.report(1, "a", 40, 40);
+    reg.report(2, "b", 512, 512);
+    expect(reports).toEqual([
+      { flightId: 1, width: 40, height: 40 },
+      { flightId: 2, width: 512, height: 512 },
+    ]);
+  });
+
+  it("clearing an unknown reporter is a no-op", () => {
+    const { client, reports } = fakeClient();
+    const reg = createClientDisplaySizes(client);
+    reg.clear(99, "ghost");
+    expect(reports).toEqual([]);
+  });
+});

package/src/context.tsx

@@ -46,6 +46,78 @@ export function createClientSubscriptions(
   };
 }
 
+// ---------------------------------------------------------------------------
+// Display-size reporting seam
+// ---------------------------------------------------------------------------
+
+/**
+ * Collects each mounted feed's self-measured display size and drives the
+ * client's per-consumer `reportDisplaySize`. Multiple feeds can show the SAME
+ * camera at once (e.g. a tiny avatar and a spotlight of the same kerbal); the
+ * sidecar keys the auto-resolution max per CONSUMER, so those would clobber
+ * each other last-writer-wins. This collapses them at the client edge: it
+ * keeps the MAX display size across every mounted reporter for a flightId and
+ * sends one report per max-change. Co-located with the subscription refcount
+ * (same per-flightId lifetime) so one object owns everything this client is
+ * doing with camera N.
+ */
+export interface KerbcastDisplaySizes {
+  /** Register/update a reporter's measured size for a camera. */
+  report(flightId: number, instanceId: string, width: number, height: number): void;
+  /** Deregister a reporter (on unmount / flightId change). */
+  clear(flightId: number, instanceId: string): void;
+}
+
+/** Build the default per-flightId MAX display-size registry for a client. */
+export function createClientDisplaySizes(
+  client: KerbcastClient,
+): KerbcastDisplaySizes {
+  // flightId -> (instanceId -> measured size)
+  const perCamera = new Map<number, Map<string, { w: number; h: number }>>();
+  // Last size reported to the sidecar per flightId, so we send only on change.
+  const lastSent = new Map<number, { w: number; h: number }>();
+
+  function recompute(flightId: number): void {
+    const instances = perCamera.get(flightId);
+    if (!instances || instances.size === 0) {
+      // No reporters left. Drop bookkeeping and send nothing: the subscription
+      // release (unsubscribe -> sidecar remove_track -> forget_display_size)
+      // clears the sidecar side. Sending a spurious size here would fight it.
+      perCamera.delete(flightId);
+      lastSent.delete(flightId);
+      return;
+    }
+    let maxW = 0;
+    let maxH = 0;
+    for (const { w, h } of instances.values()) {
+      if (w > maxW) maxW = w;
+      if (h > maxH) maxH = h;
+    }
+    const prev = lastSent.get(flightId);
+    if (prev && prev.w === maxW && prev.h === maxH) return;
+    lastSent.set(flightId, { w: maxW, h: maxH });
+    client.reportDisplaySize(flightId, maxW, maxH).catch(() => {});
+  }
+
+  return {
+    report(flightId: number, instanceId: string, width: number, height: number): void {
+      let instances = perCamera.get(flightId);
+      if (!instances) {
+        instances = new Map();
+        perCamera.set(flightId, instances);
+      }
+      instances.set(instanceId, { w: width, h: height });
+      recompute(flightId);
+    },
+    clear(flightId: number, instanceId: string): void {
+      const instances = perCamera.get(flightId);
+      if (!instances) return;
+      instances.delete(instanceId);
+      recompute(flightId);
+    },
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Context shape
 // ---------------------------------------------------------------------------
@@ -53,6 +125,7 @@ export function createClientSubscriptions(
 interface KerbcastContextValue {
   client: KerbcastClient;
   subscriptions: KerbcastSubscriptions;
+  displaySizes: KerbcastDisplaySizes;
 }
 
 const KerbcastContext = createContext<KerbcastContextValue | null>(null);
@@ -65,6 +138,8 @@ export interface KerbcastProviderProps {
   client: KerbcastClient;
   /** Override the subscription manager. Defaults to a refcounted per-client impl. */
   subscriptions?: KerbcastSubscriptions;
+  /** Override the display-size registry. Defaults to a per-flightId MAX impl. */
+  displaySizes?: KerbcastDisplaySizes;
   children: ReactNode;
 }
 
@@ -75,6 +150,7 @@ export interface KerbcastProviderProps {
 export function KerbcastProvider({
   client,
   subscriptions: subscriptionsProp,
+  displaySizes: displaySizesProp,
   children,
 }: KerbcastProviderProps): React.JSX.Element {
   // Create default subscriptions once per client. A ref so the object is
@@ -84,13 +160,20 @@ export function KerbcastProvider({
     defaultSubsRef.current = createClientSubscriptions(client);
   }
 
+  // Same for the display-size registry: one per client, stable across renders.
+  const defaultSizesRef = useRef<KerbcastDisplaySizes | null>(null);
+  if (defaultSizesRef.current === null) {
+    defaultSizesRef.current = createClientDisplaySizes(client);
+  }
+
   const value = useMemo(
     () => ({
       client,
       subscriptions: subscriptionsProp ?? defaultSubsRef.current!,
+      displaySizes: displaySizesProp ?? defaultSizesRef.current!,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [client, subscriptionsProp],
+    [client, subscriptionsProp, displaySizesProp],
   );
 
   return (
@@ -127,3 +210,17 @@ export function useKerbcastSubscriptions(): KerbcastSubscriptions {
   }
   return ctx.subscriptions;
 }
+
+/**
+ * Return the `KerbcastDisplaySizes` registry from the nearest
+ * `KerbcastProvider`. Throws if called outside a provider.
+ */
+export function useKerbcastDisplaySizes(): KerbcastDisplaySizes {
+  const ctx = useContext(KerbcastContext);
+  if (!ctx) {
+    throw new Error(
+      "useKerbcastDisplaySizes must be used inside a KerbcastProvider",
+    );
+  }
+  return ctx.displaySizes;
+}