@q9labsai/chalk-react 4.1.17 → 5.0.1

package/dist/chunk-NPOO7BOX.js

@@ -0,0 +1,974 @@
+import {
+  createRecordingWhiteboardCursor,
+  recordingWhiteboardFileAssetId,
+  recordingWhiteboardFileIds,
+  recordingWhiteboardSceneAppState
+} from "./chunk-VHM3SYMY.js";
+import {
+  CallCard,
+  CallDialog,
+  CallLimbo,
+  ChalkBadge,
+  ChalkButton,
+  ChalkEmptyState,
+  ChalkPanel,
+  ChalkProvider,
+  ChatPanelPresentation,
+  ControlBarPresentation,
+  MediaRequestDialog,
+  ParticipantTileSurface,
+  QuietSpace,
+  ReactionsOverlayPresentation,
+  ScreenSharePresentation,
+  ShellStyles,
+  SpacePresentation,
+  SpaceView,
+  Stage,
+  StageContentTileSurface,
+  StatusSurface,
+  WhiteboardView,
+  chalkThemeStyle,
+  useCan,
+  useConnection,
+  useMedia,
+  useRecording,
+  useSpaceClient,
+  useWhiteboard
+} from "./chunk-XN2E352E.js";
+import {
+  WHITEBOARD_ITEM_ID,
+  screenShareItemId
+} from "./chunk-WRAEH24P.js";
+import {
+  Download01Icon,
+  FileTextIcon,
+  Loading01Icon,
+  PlayIcon,
+  RefreshIcon,
+  Video01Icon,
+  cn
+} from "./chunk-4U7QZC72.js";
+
+// src/components/chalk/Chalk.tsx
+import { createSpaceClient } from "@q9labsai/chalk-client";
+import { preloadWhiteboardStylesheet } from "@q9labsai/chalk-whiteboard/react";
+import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+
+// src/internal/useWhiteboardSceneSubscription.ts
+import { useEffect, useState } from "react";
+var errorMessage = (cause) => cause instanceof Error ? cause : new Error("Whiteboard could not connect.");
+var summaryError = (summary) => summary.error ? new Error(summary.error.message) : errorMessage(void 0);
+var MAX_RECOVERY_ATTEMPTS = 3;
+var recoveryDelayMs = (attempt) => 250 * 2 ** attempt;
+function useWhiteboardSceneSubscription(transport, active) {
+  const [subscription, setSubscription] = useState({ status: "closed" });
+  useEffect(() => {
+    if (!active || !transport) {
+      setSubscription({ status: "closed" });
+      return;
+    }
+    let disposed = false;
+    let starting = false;
+    let startupSettled = false;
+    let ready = false;
+    let recoveryAttempts = 0;
+    let recoveryTimer;
+    let latestSummary;
+    const observesSummary = transport.subscribeSummary !== void 0;
+    const clearRecoveryTimer = () => {
+      if (recoveryTimer === void 0) return;
+      globalThis.clearTimeout(recoveryTimer);
+      recoveryTimer = void 0;
+    };
+    const recover = (cause) => {
+      if (disposed || recoveryTimer !== void 0 || starting) return;
+      if (recoveryAttempts >= MAX_RECOVERY_ATTEMPTS) {
+        setSubscription({ status: "failed", error: errorMessage(cause) });
+        return;
+      }
+      const attempt = recoveryAttempts++;
+      setSubscription({ status: "loading" });
+      recoveryTimer = globalThis.setTimeout(() => {
+        recoveryTimer = void 0;
+        start();
+      }, recoveryDelayMs(attempt));
+    };
+    const handleSummary = (summary) => {
+      latestSummary = summary;
+      if (disposed) return;
+      if (summary.status === "unsubscribed") {
+        setSubscription({ status: "loading" });
+        return;
+      }
+      if (summary.status === "ready") {
+        if (!starting || startupSettled) {
+          recoveryAttempts = 0;
+          ready = true;
+          setSubscription({ status: "ready", transport });
+        }
+        return;
+      }
+      if (summary.status === "loading" || summary.status === "recovering") {
+        if (!ready) setSubscription({ status: "loading" });
+        return;
+      }
+      if (summary.status === "failed") {
+        starting = false;
+        setSubscription({ status: "loading" });
+        recover(summaryError(summary));
+      }
+    };
+    const start = () => {
+      if (disposed || starting) return;
+      clearRecoveryTimer();
+      starting = true;
+      startupSettled = false;
+      setSubscription({ status: "loading" });
+      void Promise.resolve().then(() => transport.startSceneSubscription()).then(
+        () => {
+          starting = false;
+          startupSettled = true;
+          if (disposed) return;
+          if (!latestSummary || latestSummary.status === "ready") {
+            recoveryAttempts = 0;
+            ready = true;
+            setSubscription({ status: "ready", transport });
+          }
+        },
+        (cause) => {
+          starting = false;
+          if (!disposed && observesSummary) recover(cause);
+          else if (!disposed) setSubscription({ status: "failed", error: errorMessage(cause) });
+        }
+      );
+    };
+    setSubscription({ status: "loading" });
+    const unsubscribeSummary = transport.subscribeSummary?.(handleSummary);
+    start();
+    return () => {
+      disposed = true;
+      clearRecoveryTimer();
+      unsubscribeSummary?.();
+      void Promise.resolve(transport.stopSceneSubscription());
+    };
+  }, [active, transport]);
+  return subscription;
+}
+
+// src/whiteboard/wire-adapters.ts
+function fromWhiteboardWireElement(element) {
+  return {
+    id: element.id,
+    type: element.type,
+    version: element.version,
+    versionNonce: element.version_nonce,
+    index: element.index,
+    isDeleted: element.is_deleted,
+    payload: element.payload
+  };
+}
+function toWhiteboardWireElement(element) {
+  return {
+    id: element.id,
+    type: element.type,
+    version: element.version,
+    version_nonce: element.versionNonce,
+    index: element.index,
+    is_deleted: element.isDeleted,
+    payload: element.payload
+  };
+}
+function toWhiteboardCollaborationEvent(event) {
+  if (event.type === "snapshot" || event.type === "update") {
+    return {
+      ...event,
+      elements: event.elements.map(toWhiteboardWireElement)
+    };
+  }
+  if (event.type === "cursor") {
+    return {
+      type: "cursor",
+      participantId: event.participantId,
+      displayName: event.displayName,
+      x: event.x,
+      y: event.y,
+      occurredAt: event.occurredAt
+    };
+  }
+  return event;
+}
+
+// src/components/chalk/Chalk.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Chalk(props) {
+  const [localColorScheme, setLocalColorScheme] = useState2("dark");
+  const colorScheme = props.theme?.colorScheme ?? localColorScheme;
+  const changeColorScheme = (next) => {
+    setLocalColorScheme(next);
+    props.onColorSchemeChange?.(next);
+  };
+  const [reportOpen, setReportOpen] = useState2(false);
+  const reportTrigger = useRef(null);
+  const openReport = props.onReportProblem ? () => {
+    reportTrigger.current = document.activeElement instanceof HTMLButtonElement ? document.activeElement : null;
+    setReportOpen(true);
+  } : void 0;
+  const suppliedClient = props.client;
+  const getAccessRef = useRef(props.getAccess);
+  getAccessRef.current = props.getAccess;
+  const getLatestAccess = useCallback((context) => {
+    const latestGetAccess = getAccessRef.current;
+    if (!latestGetAccess) return Promise.reject(new Error("Chalk cannot refresh access after getAccess was removed."));
+    return latestGetAccess(context);
+  }, []);
+  const ownedClient = useMemo(() => {
+    if (suppliedClient) return null;
+    if (!props.space || !getAccessRef.current) throw new Error("Chalk requires either client or both space and getAccess.");
+    return createSpaceClient({ space: props.space, getAccess: getLatestAccess });
+  }, [getLatestAccess, props.space, suppliedClient]);
+  const client = suppliedClient ?? ownedClient;
+  useEffect2(() => {
+    if (!ownedClient) return;
+    return () => {
+      void ownedClient.leave().catch(() => void 0).finally(() => ownedClient.dispose());
+    };
+  }, [ownedClient]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { "data-chalk": true, "data-chalk-theme": colorScheme, className: "chalk-root h-full min-h-0 w-full", style: chalkThemeStyle(props.theme, colorScheme), children: /* @__PURE__ */ jsxs(ChalkProvider, { client, children: [
+    /* @__PURE__ */ jsx(SpaceExperience, { ...props, theme: { ...props.theme, colorScheme }, onColorSchemeChange: changeColorScheme, resolvedColorScheme: colorScheme, onOpenReport: openReport }),
+    props.onReportProblem ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ShellStyles, {}),
+      /* @__PURE__ */ jsx(CallDialog, { kind: reportOpen ? "report" : null, onClose: () => setReportOpen(false), onReportProblem: props.onReportProblem, diagnostics: `Call: ${props.spaceName ?? props.space ?? "Call"}
+Status: ${client.getSnapshot().connection.status}`, returnFocus: reportTrigger })
+    ] }) : null
+  ] }) }) });
+}
+function SpaceExperience(props) {
+  const client = useSpaceClient();
+  const connection = useConnection();
+  const recorded = useRecording().current?.status === "recording";
+  const previousStatus = useRef(connection.status);
+  const hasObservedStatus = useRef(false);
+  const autoJoinAttempted = useRef(false);
+  const previousClient = useRef(client);
+  const [joinError, setJoinError] = useState2(null);
+  const [retryPending, setRetryPending] = useState2(false);
+  const [episodeEnded, setEpisodeEnded] = useState2(false);
+  const [handledTerminal, setHandledTerminal] = useState2(void 0);
+  useEffect2(() => setHandledTerminal(void 0), [props.terminalState]);
+  const spaceName = props.spaceName ?? props.space ?? "Space";
+  if (previousClient.current !== client) {
+    previousClient.current = client;
+    previousStatus.current = connection.status;
+    hasObservedStatus.current = false;
+    autoJoinAttempted.current = false;
+  }
+  useClientEvents(client, props);
+  const join = useCallback(
+    async (settings) => {
+      try {
+        setJoinError(null);
+        await client.join(settings);
+      } catch (cause) {
+        setJoinError(cause instanceof Error ? cause.message : "Could not enter this Space.");
+      }
+    },
+    [client]
+  );
+  const retryAutomaticJoin = useCallback(() => {
+    autoJoinAttempted.current = true;
+    setHandledTerminal(props.terminalState);
+    setRetryPending(true);
+    void join(defaultJoinOptions(props)).finally(() => setRetryPending(false));
+  }, [join, props]);
+  useEffect2(() => setJoinError(null), [client]);
+  useEffect2(() => {
+    setEpisodeEnded(false);
+  }, [client]);
+  useEffect2(
+    () => client.on("episodeEnded", () => {
+      setEpisodeEnded(true);
+    }),
+    [client]
+  );
+  useEffect2(() => {
+    if (connection.status !== "idle" || autoJoinAttempted.current) return;
+    autoJoinAttempted.current = true;
+    void join(defaultJoinOptions(props));
+  }, [connection.status, join, props.defaults?.camera, props.defaults?.microphone, props.displayName]);
+  useEffect2(() => {
+    const previous = previousStatus.current;
+    if (hasObservedStatus.current) {
+      if (connection.status === "live" && previous !== "live" && previous !== "reconnecting") props.onJoined?.();
+      if (connection.status === "left" && previous !== "left") props.onLeft?.();
+    }
+    previousStatus.current = connection.status;
+    hasObservedStatus.current = true;
+  }, [connection.status, props.onJoined, props.onLeft]);
+  const callName = props.spaceName ?? props.space;
+  const statusTheme = { ...props.theme, colorScheme: props.resolvedColorScheme };
+  if (props.terminalState && props.terminalState !== handledTerminal) return /* @__PURE__ */ jsx(StatusSurface, { phase: props.terminalState, callName, theme: statusTheme, onRejoin: props.onRejoin ?? retryAutomaticJoin, onHome: props.onHome, onReportProblem: props.onOpenReport, retryPending });
+  if (connection.status === "idle")
+    return /* @__PURE__ */ jsx(CallLimbo, { theme: { ...props.theme, colorScheme: props.resolvedColorScheme }, recorded, spaceName, message: joinError ?? `Joining ${spaceName}\u2026`, action: joinError ? { label: "Try again", onClick: retryAutomaticJoin, disabled: retryPending } : void 0 });
+  if (connection.status === "joining") return /* @__PURE__ */ jsx(CallLimbo, { theme: { ...props.theme, colorScheme: props.resolvedColorScheme }, recorded, spaceName, message: `Joining ${spaceName}\u2026` });
+  if (connection.status === "failed" && connection.lastError?.code === "episode.ended") return /* @__PURE__ */ jsx(StatusSurface, { phase: "episode-ended", callName, theme: statusTheme, onHome: props.onHome, onReportProblem: props.onOpenReport });
+  if (connection.status === "failed") {
+    return /* @__PURE__ */ jsx(StatusSurface, { phase: "failed", callName, theme: statusTheme, onHome: props.onHome, onReportProblem: props.onOpenReport, onRetry: retryAutomaticJoin, retryPending });
+  }
+  if (connection.status === "leaving" || connection.status === "left")
+    return /* @__PURE__ */ jsx(StatusSurface, { phase: episodeEnded ? "episode-ended" : "left", callName, theme: statusTheme, onReportProblem: props.onOpenReport, onRejoin: props.onRejoin ?? retryAutomaticJoin, rejoinDisabled: connection.status === "leaving" || retryPending, onHome: props.onHome });
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-full min-h-0", children: [
+    /* @__PURE__ */ jsx(SpaceSurface, { ...props, spaceName }),
+    /* @__PURE__ */ jsx(CallLimbo, { overlay: true, active: false, initiallyCovered: true, message: "" })
+  ] });
+}
+function SpaceSurface(props) {
+  const client = useSpaceClient();
+  const connection = useConnection();
+  const media = useMedia();
+  const whiteboardState = useWhiteboard();
+  const canEndEpisode = useCan("endEpisode");
+  const canDrawWhiteboard = useCan("drawWhiteboard");
+  const [commandError, setCommandError] = useState2(() => connection.lastError?.recoverable && connection.lastError.code.startsWith("media.") ? connection.lastError.message : null);
+  const runCommand = useCallback(async (command) => {
+    try {
+      await command();
+      setCommandError(null);
+    } catch (cause) {
+      setCommandError(cause instanceof Error ? cause.message : "This command could not be completed.");
+    }
+  }, []);
+  const whiteboardTransport = client.whiteboard.transport();
+  const whiteboardAvailable = props.features?.whiteboard !== false;
+  useEffect2(() => {
+    if (whiteboardAvailable) preloadWhiteboardStylesheet();
+  }, [whiteboardAvailable]);
+  const whiteboardSubscription = useWhiteboardSceneSubscription(whiteboardTransport, whiteboardAvailable);
+  const setWhiteboardPresentation = whiteboardSubscription.status === "ready" ? bindWhiteboardPresentation(whiteboardSubscription.transport) : void 0;
+  useEffect2(() => {
+    if (whiteboardSubscription.status === "failed") setCommandError(whiteboardSubscription.error.message);
+    else if (whiteboardSubscription.status === "loading" || whiteboardSubscription.status === "ready") setCommandError(null);
+  }, [whiteboardSubscription]);
+  const whiteboard = whiteboardAvailable && whiteboardState.engine.presenting && whiteboardSubscription.status === "ready" ? {
+    isOpen: true,
+    props: {
+      canDraw: canDrawWhiteboard,
+      collab: {
+        canDraw: canDrawWhiteboard,
+        subscribe: (listener) => whiteboardSubscription.transport.subscribe((event) => listener(toWhiteboardCollaborationEvent(event))),
+        submitUpdate: async (input) => whiteboardSubscription.transport.submitUpdate({ sceneId: input.sceneId, syncAll: input.syncAll, elements: input.elements.map(fromWhiteboardWireElement) }),
+        sendCursor: (input) => whiteboardSubscription.transport.sendCursor(input),
+        requestSnapshot: () => whiteboardSubscription.transport.requestSnapshot(),
+        onSubmissionError: (cause) => setCommandError(cause instanceof Error ? cause.message : "Whiteboard could not sync."),
+        clear: () => whiteboardSubscription.transport.clear(),
+        presignDownload: (fileId) => whiteboardSubscription.transport.files.getDownloadUrl(fileId)
+      }
+    }
+  } : void 0;
+  return /* @__PURE__ */ jsx(
+    SpaceView,
+    {
+      colorScheme: props.resolvedColorScheme,
+      shareUrl: props.shareUrl,
+      onReportProblem: props.onReportProblem,
+      onColorSchemeChange: props.onColorSchemeChange,
+      spaceName: props.spaceName,
+      inviteLink: props.inviteLink,
+      pickChatFiles: props.pickChatFiles,
+      commandError: commandError ?? void 0,
+      onDismissCommandError: () => setCommandError(null),
+      layout: props.layout,
+      onLayoutChange: props.onLayoutChange,
+      features: props.features,
+      whiteboard,
+      onToggleWhiteboard: canDrawWhiteboard && setWhiteboardPresentation ? () => void runCommand(() => setWhiteboardPresentation(!whiteboardState.engine.presenting)) : void 0,
+      onLeft: () => runCommand(() => client.leave()),
+      onEndEpisode: canEndEpisode ? () => runCommand(() => client.endEpisode()) : void 0,
+      reconnecting: { isVisible: connection.status === "reconnecting", status: "reconnecting", showNotice: false },
+      overlay: /* @__PURE__ */ jsx(Fragment, { children: media.incomingRequests[0] ? /* @__PURE__ */ jsx(MediaRequestDialog, { request: media.incomingRequests[0], onDecline: () => void runCommand(() => client.media.declineRequest(media.incomingRequests[0].requestId)), onAllow: () => void runCommand(() => client.media.acceptRequest(media.incomingRequests[0].requestId)) }) : null })
+    }
+  );
+}
+function bindWhiteboardPresentation(transport) {
+  const setPresentation = transport.setPresentation;
+  if (!setPresentation) return void 0;
+  return (presenting) => setPresentation.call(transport, presenting);
+}
+function defaultJoinOptions(props) {
+  const displayName = props.displayName?.trim();
+  return { ...displayName ? { displayName } : {}, microphone: props.defaults?.microphone ?? true, camera: props.defaults?.camera ?? true };
+}
+function useClientEvents(client, callbacks) {
+  useEffect2(() => client.on("participantJoined", (event) => callbacks.onParticipantJoined?.(event)), [callbacks.onParticipantJoined, client]);
+  useEffect2(() => client.on("participantLeft", (event) => callbacks.onParticipantLeft?.(event)), [callbacks.onParticipantLeft, client]);
+  useEffect2(() => client.on("episodeEnded", (event) => callbacks.onEpisodeEnded?.(event)), [callbacks.onEpisodeEnded, client]);
+  useEffect2(() => client.on("screenShareStarted", (event) => callbacks.onScreenShareStarted?.(event)), [callbacks.onScreenShareStarted, client]);
+  useEffect2(() => client.on("screenShareStopped", (event) => callbacks.onScreenShareStopped?.(event)), [callbacks.onScreenShareStopped, client]);
+  useEffect2(() => client.on("error", (event) => callbacks.onError?.(event)), [callbacks.onError, client]);
+}
+
+// src/components/space-view/RecordingSpaceView.tsx
+import { CHALK_CHAT_ATTACHMENT_MIME_TYPES } from "@q9labsai/chalk-client";
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+var RECORDING_TOOLBAR_BUTTONS = ["record", "participants", "chat", "reactions", "whiteboard"];
+var CHAT_ATTACHMENT_MIME_TYPES = new Set(CHALK_CHAT_ATTACHMENT_MIME_TYPES);
+function hasRenderableMedia(media) {
+  return media !== null && media !== void 0 && media !== false;
+}
+function isChatAttachmentMimeType(value) {
+  return CHAT_ATTACHMENT_MIME_TYPES.has(value);
+}
+function toChatMessages(frame) {
+  const displayTimes = /* @__PURE__ */ new Map();
+  const attachmentAssets = /* @__PURE__ */ new Map();
+  const messages = frame.chat.messages.map((message) => {
+    displayTimes.set(message.id, message.displayTime);
+    const attachments = message.attachments.map((attachment) => {
+      if (!isChatAttachmentMimeType(attachment.contentType)) throw new TypeError(`unsupported recording chat attachment content type: ${attachment.contentType}`);
+      attachmentAssets.set(attachment.id, attachment.assetId);
+      return {
+        attachmentId: attachment.id,
+        fileName: attachment.fileName,
+        mimeType: attachment.contentType,
+        byteLength: attachment.byteSize
+      };
+    });
+    return {
+      messageId: message.id,
+      clientMessageId: message.id,
+      sequence: String(message.sequence),
+      participantId: message.participantId,
+      displayName: message.displayName,
+      text: message.text,
+      // The supplied displayTime is authoritative. This stable ISO value only
+      // satisfies the shared chat model and is never formatted for presentation.
+      createdAt: new Date(message.createdAtMs).toISOString(),
+      attachments
+    };
+  });
+  return { messages, displayTimes, attachmentAssets };
+}
+function toParticipant(participant, resolveAssetUrl) {
+  return {
+    id: participant.id,
+    displayName: participant.displayName,
+    isSpeaking: participant.speaking,
+    isActiveSpeaker: participant.activeSpeaker,
+    isMuted: participant.microphoneMuted,
+    isVideoEnabled: participant.cameraEnabled,
+    isScreenSharing: participant.screenShareEnabled,
+    isHandRaised: participant.handRaised,
+    avatarUrl: participant.avatarAssetId ? resolveAssetUrl(participant.avatarAssetId) : void 0
+  };
+}
+function RecordingSpaceView({ frame, resolveMedia, resolveAssetUrl, renderWhiteboard, renderToken, className }) {
+  const sharedContent = frame.sharedContent;
+  const joinedParticipants = [...frame.participants.filter((participant) => participant.joined)].sort((left, right) => left.joinOrdinal - right.joinOrdinal || left.id.localeCompare(right.id));
+  const recordingParticipantsById = new Map(joinedParticipants.map((participant) => [participant.id, participant]));
+  const participantsById = new Map(joinedParticipants.map((participant) => [participant.id, toParticipant(participant, resolveAssetUrl)]));
+  const visibleMedia = frame.media.filter((source) => source.visible);
+  const mediaNodes = /* @__PURE__ */ new Map();
+  for (const source of visibleMedia) {
+    const participant = recordingParticipantsById.get(source.participantId);
+    if (!participant) continue;
+    mediaNodes.set(source.sourceId, resolveMedia(source, { participant, placement: source.kind === "camera" ? "camera" : "shared_content" }));
+  }
+  const cameraByParticipant = new Map(visibleMedia.filter((source) => source.kind === "camera").map((source) => [source.participantId, source]));
+  const items = joinedParticipants.map((participant) => ({ kind: "participant", id: participant.id, participant: participantsById.get(participant.id) }));
+  if (sharedContent.kind === "screen_share") {
+    const participant = participantsById.get(sharedContent.participantId);
+    const source = visibleMedia.find((candidate) => candidate.sourceId === sharedContent.sourceId && candidate.kind === "screen_share");
+    if (!participant || !source) throw new TypeError("recording screen share does not resolve to a joined participant and visible source");
+    items.push({ kind: "screen-share", id: screenShareItemId(participant.id), participant });
+  } else if (sharedContent.kind === "whiteboard") {
+    items.push({ kind: "whiteboard", id: WHITEBOARD_ITEM_ID });
+  }
+  const { messages, displayTimes, attachmentAssets } = toChatMessages(frame);
+  const participantNames = Object.fromEntries(frame.participants.map((participant) => [participant.id, participant.displayName]));
+  const durationSeconds = Math.floor(frame.elapsedMs / 1e3);
+  const renderContent = (item) => {
+    if (item.kind === "whiteboard") {
+      const content = sharedContent.kind === "whiteboard" ? renderWhiteboard?.(sharedContent) : null;
+      return /* @__PURE__ */ jsx2(StageContentTileSurface, { item, media: content, mediaVisible: hasRenderableMedia(content), className: "h-full w-full" });
+    }
+    if (sharedContent.kind !== "screen_share") throw new TypeError("recording stage contains a screen share without shared-content state");
+    const source = visibleMedia.find((candidate) => candidate.sourceId === sharedContent.sourceId);
+    if (!source) throw new TypeError("recording screen share source is not visible");
+    const media = mediaNodes.get(source.sourceId);
+    return /* @__PURE__ */ jsx2(ScreenSharePresentation, { sharedByName: item.participant.displayName, media, mediaVisible: hasRenderableMedia(media) });
+  };
+  const layout = frame.view.layout === "grid" ? "grid" : "focus";
+  return /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2(
+    SpacePresentation,
+    {
+      colorScheme: frame.profile.theme.colorScheme,
+      stageBackground: frame.profile.theme.stageBackground,
+      header: {
+        spaceName: frame.space.name,
+        duration: durationSeconds,
+        isRecording: true,
+        layout
+      },
+      stage: /* @__PURE__ */ jsx2(
+        Stage,
+        {
+          items,
+          layout,
+          interactive: false,
+          animate: false,
+          generatedAvatars: frame.profile.theme.generatedAvatars,
+          emptyState: /* @__PURE__ */ jsx2(QuietSpace, {}),
+          renderParticipant: (item, context) => {
+            const source = cameraByParticipant.get(item.participant.id);
+            const media = source ? mediaNodes.get(source.sourceId) : null;
+            return /* @__PURE__ */ jsx2(
+              ParticipantTileSurface,
+              {
+                participant: item.participant,
+                media,
+                mediaVisible: item.participant.isVideoEnabled === true && hasRenderableMedia(media),
+                aspectRatio: "fill",
+                pinned: context.pinned,
+                style: context.style,
+                hidden: context.hidden,
+                generatedAvatars: frame.profile.theme.generatedAvatars,
+                animatedAvatars: false
+              }
+            );
+          },
+          renderContentTile: (item, context) => {
+            const media = item.kind === "whiteboard" && frame.sharedContent.kind === "whiteboard" ? renderWhiteboard?.(frame.sharedContent) : frame.sharedContent.kind === "screen_share" ? mediaNodes.get(frame.sharedContent.sourceId) : null;
+            return /* @__PURE__ */ jsx2(StageContentTileSurface, { item, media, mediaVisible: hasRenderableMedia(media), pinned: context.pinned, style: context.style, hidden: context.hidden });
+          },
+          renderPrimaryContent: renderContent,
+          className: "h-full"
+        }
+      ),
+      controls: /* @__PURE__ */ jsx2(ControlBarPresentation, { density: "comfortable", buttons: RECORDING_TOOLBAR_BUTTONS, isRecording: true, isChatOpen: true, isWhiteboardOpen: sharedContent.kind === "whiteboard", expanded: true, detectDevices: false, displayOnly: true }),
+      stageOverlay: /* @__PURE__ */ jsx2(ReactionsOverlayPresentation, { reactions: frame.reactions, elapsedMs: frame.elapsedMs }),
+      sidebar: /* @__PURE__ */ jsx2(CallCard, { state: "open", interactive: false, children: /* @__PURE__ */ jsx2(
+        ChatPanelPresentation,
+        {
+          messages,
+          participantNames,
+          onResolveAttachmentUrl: async (attachmentId) => {
+            const assetId = attachmentAssets.get(attachmentId);
+            if (!assetId) throw new TypeError(`recording chat attachment is unknown: ${attachmentId}`);
+            return resolveAssetUrl(assetId);
+          },
+          messageDisplayTime: (message) => displayTimes.get(message.messageId) ?? "",
+          autoScrollBehavior: "auto",
+          generatedAvatars: frame.profile.theme.generatedAvatars,
+          disabled: true
+        }
+      ) }),
+      renderToken,
+      interactive: false,
+      className
+    }
+  ) });
+}
+RecordingSpaceView.displayName = "RecordingSpaceView";
+
+// src/components/recording-history/RecordingHistoryPanel.tsx
+import "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function RecordingHistoryPanel({
+  recordings,
+  isLoading = false,
+  error,
+  hasMore = false,
+  downloadingRecordingId,
+  readingTranscriptRecordingId,
+  refreshingExportRecordingId,
+  requestingExportRecordingId,
+  requestingTranscriptRecordingId,
+  onDownload,
+  onLoadMore,
+  onReadTranscript,
+  onRefreshExport,
+  onRequestExport,
+  onRequestTranscript,
+  onRetry,
+  onWatch,
+  className
+}) {
+  return /* @__PURE__ */ jsxs2(ChalkPanel, { className: cn("h-full min-h-0 w-full overflow-hidden bg-[var(--chalk-app-panel)] p-0", className), contentClassName: "flex h-full min-h-0 flex-col", role: "region", "aria-label": "Recording history", children: [
+    /* @__PURE__ */ jsxs2("header", { className: "flex items-center justify-between gap-3 border-b border-[var(--chalk-app-line)] px-4 py-3", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx3("h2", { className: "text-base font-semibold", children: "Recordings" }),
+        /* @__PURE__ */ jsx3("p", { className: "mt-0.5 text-xs text-[var(--chalk-app-text-muted)]", children: "Captured Episode activity" })
+      ] }),
+      isLoading ? /* @__PURE__ */ jsx3(Loading01Icon, { className: "size-4 animate-spin text-[var(--chalk-app-text-muted)]", "aria-label": "Loading recordings" }) : null
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "min-h-0 flex-1 overflow-y-auto p-3", children: error ? /* @__PURE__ */ jsx3(ChalkEmptyState, { title: "Recordings could not be loaded", description: error, tone: "danger", children: onRetry ? /* @__PURE__ */ jsxs2(ChalkButton, { className: "mt-4", onClick: onRetry, tone: "danger", children: [
+      /* @__PURE__ */ jsx3(RefreshIcon, { className: "size-4" }),
+      "Try again"
+    ] }) : null }) : recordings.length === 0 && !isLoading ? /* @__PURE__ */ jsx3(ChalkEmptyState, { title: "No recordings yet", description: "Captured Episode activity will appear here.", children: /* @__PURE__ */ jsx3(Video01Icon, { className: "mx-auto mt-4 size-8 text-[var(--chalk-app-text-muted)]", "aria-hidden": "true" }) }) : /* @__PURE__ */ jsx3("ul", { className: "grid gap-2", "aria-label": "Recordings", children: recordings.map((recording) => /* @__PURE__ */ jsx3(
+      RecordingHistoryRow,
+      {
+        recording,
+        downloading: downloadingRecordingId === recording.id,
+        readingTranscript: readingTranscriptRecordingId === recording.id,
+        refreshingExport: refreshingExportRecordingId === recording.id,
+        requestingExport: requestingExportRecordingId === recording.id,
+        requestingTranscript: requestingTranscriptRecordingId === recording.id,
+        onDownload,
+        onReadTranscript,
+        onRefreshExport,
+        onRequestExport,
+        onRequestTranscript,
+        onWatch
+      },
+      recording.id
+    )) }) }),
+    hasMore && !error ? /* @__PURE__ */ jsx3("footer", { className: "border-t border-[var(--chalk-app-line)] p-3", children: /* @__PURE__ */ jsx3(ChalkButton, { className: "w-full", disabled: isLoading || !onLoadMore, loading: isLoading, onClick: onLoadMore, children: "Load more" }) }) : null
+  ] });
+}
+function RecordingHistoryRow({ downloading, onDownload, onReadTranscript, onRefreshExport, onRequestExport, onRequestTranscript, onWatch, readingTranscript, recording, refreshingExport, requestingExport, requestingTranscript }) {
+  return /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsxs2(ChalkPanel, { className: "p-3", contentClassName: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx3("span", { className: "grid size-10 shrink-0 place-items-center rounded-full bg-[var(--chalk-app-control)] text-[var(--chalk-app-text-muted)]", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(Video01Icon, { className: "size-5" }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsxs2("span", { className: "truncate text-sm font-medium", children: [
+          "Episode ",
+          shortId(recording.episode_id)
+        ] }),
+        recording.export ? null : /* @__PURE__ */ jsx3(StatusBadge, { label: legacyStatusLabel(recording.status), tone: legacyStatusTone(recording.status) })
+      ] }),
+      /* @__PURE__ */ jsx3("p", { className: "mt-1 text-xs text-[var(--chalk-app-text-muted)]", children: /* @__PURE__ */ jsx3("time", { dateTime: recording.created_at, children: formatTimestamp(recording.created_at) }) }),
+      recording.export ? /* @__PURE__ */ jsx3(
+        RecordingArtifactStatus,
+        {
+          downloading,
+          onDownload,
+          onReadTranscript,
+          onRefreshExport,
+          onRequestExport,
+          onRequestTranscript,
+          onWatch,
+          readingTranscript,
+          recording,
+          refreshingExport,
+          requestingExport,
+          requestingTranscript
+        }
+      ) : /* @__PURE__ */ jsx3(LegacyRecordingActions, { downloading, onDownload, recording })
+    ] })
+  ] }) });
+}
+function RecordingArtifactStatus({ downloading, onDownload, onReadTranscript, onRefreshExport, onRequestExport, onRequestTranscript, onWatch, readingTranscript, recording, refreshingExport, requestingExport, requestingTranscript }) {
+  const video = recording.export;
+  if (!video) throw new Error("Recording export is required when rendering artifact status");
+  const transcriptStatus = recording.transcript?.status === "none" && recording.transcript.requestable ? "requestable" : recording.transcript?.status;
+  return /* @__PURE__ */ jsxs2("div", { className: "mt-3 grid gap-2 border-t border-[var(--chalk-app-line)] pt-3", children: [
+    recording.source ? /* @__PURE__ */ jsx3(ArtifactStatus, { icon: /* @__PURE__ */ jsx3(Video01Icon, { className: "size-4" }), label: "Capture", detail: sourceDetail(recording.source), status: sourceLabel(recording.source.status), tone: sourceTone(recording.source.status) }) : null,
+    transcriptStatus ? /* @__PURE__ */ jsx3(ArtifactStatus, { icon: /* @__PURE__ */ jsx3(FileTextIcon, { className: "size-4" }), label: "Transcript", detail: transcriptDetail(transcriptStatus), status: transcriptLabel(transcriptStatus), tone: transcriptTone(transcriptStatus) }) : null,
+    recording.transcript ? /* @__PURE__ */ jsx3(TranscriptContent, { onReadTranscript, onRequestTranscript, reading: readingTranscript, recording, requestingTranscript }) : null,
+    /* @__PURE__ */ jsx3(ArtifactStatus, { icon: /* @__PURE__ */ jsx3(Video01Icon, { className: "size-4" }), label: "Video", detail: exportDetail(video), status: exportLabel(video.status), tone: exportTone(video.status) }),
+    video.status === "ready" ? /* @__PURE__ */ jsx3(ReadyVideoActions, { downloading, onDownload, onWatch, recording }) : null,
+    video.status === "pending" ? /* @__PURE__ */ jsx3(PendingVideoActions, { onRefreshExport, recording, refreshingExport, requestingExport }) : null,
+    canRequestExport(video) ? /* @__PURE__ */ jsx3(RequestedVideoActions, { onRequestExport, recording, requestingExport }) : null
+  ] });
+}
+function TranscriptContent({ onReadTranscript, onRequestTranscript, reading, recording, requestingTranscript }) {
+  const transcript = recording.transcript;
+  if (!transcript) return null;
+  if ((transcript.status === "none" || transcript.status === "requestable") && transcript.requestable && onRequestTranscript) {
+    return /* @__PURE__ */ jsx3("div", { className: "pt-1", children: /* @__PURE__ */ jsxs2(ChalkButton, { "aria-label": `Request transcript ${shortId(recording.id)}`, disabled: requestingTranscript, loading: requestingTranscript, onClick: () => onRequestTranscript(recording), variant: "ghost", className: "shrink-0 px-3", children: [
+      /* @__PURE__ */ jsx3(FileTextIcon, { className: "size-4" }),
+      "Request transcript"
+    ] }) });
+  }
+  if (transcript.status !== "completed") return null;
+  if (transcript.text !== void 0) {
+    return /* @__PURE__ */ jsxs2("details", { className: "rounded border border-[var(--chalk-app-line)] p-2", children: [
+      /* @__PURE__ */ jsx3("summary", { className: "cursor-pointer text-xs font-medium", children: "Transcript" }),
+      /* @__PURE__ */ jsx3("p", { className: "mt-2 whitespace-pre-wrap text-xs leading-5 text-[var(--chalk-app-text-muted)]", children: transcript.text })
+    ] });
+  }
+  if (!onReadTranscript) return null;
+  return /* @__PURE__ */ jsx3("div", { className: "pt-1", children: /* @__PURE__ */ jsxs2(ChalkButton, { "aria-label": `Read transcript ${shortId(recording.id)}`, disabled: reading, loading: reading, onClick: () => onReadTranscript(recording), variant: "ghost", className: "shrink-0 px-3", children: [
+    /* @__PURE__ */ jsx3(FileTextIcon, { className: "size-4" }),
+    "Read transcript"
+  ] }) });
+}
+function ArtifactStatus({ detail, icon, label, status, tone }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-2 text-xs", children: [
+    /* @__PURE__ */ jsx3("span", { className: "mt-0.5 text-[var(--chalk-app-text-muted)]", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx3("span", { className: "font-medium", children: label }),
+        /* @__PURE__ */ jsx3(StatusBadge, { label: status, tone })
+      ] }),
+      /* @__PURE__ */ jsx3("p", { className: "mt-0.5 text-[var(--chalk-app-text-muted)]", children: detail })
+    ] })
+  ] });
+}
+function StatusBadge({ label, tone }) {
+  return /* @__PURE__ */ jsx3(ChalkBadge, { tone, children: label });
+}
+function ReadyVideoActions({ downloading, onDownload, onWatch, recording }) {
+  if (!onDownload && !onWatch) return null;
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap gap-2 pt-1", children: [
+    onWatch ? /* @__PURE__ */ jsxs2(ChalkButton, { "aria-label": `Watch recording ${shortId(recording.id)}`, onClick: () => onWatch(recording), variant: "ghost", className: "shrink-0 px-3", children: [
+      /* @__PURE__ */ jsx3(PlayIcon, { className: "size-4" }),
+      "Watch"
+    ] }) : null,
+    onDownload ? /* @__PURE__ */ jsxs2(ChalkButton, { "aria-label": `Download recording ${shortId(recording.id)}`, disabled: downloading, loading: downloading, onClick: () => onDownload(recording), variant: "ghost", className: "shrink-0 px-3", children: [
+      /* @__PURE__ */ jsx3(Download01Icon, { className: "size-4" }),
+      "Download"
+    ] }) : null
+  ] });
+}
+function PendingVideoActions({ onRefreshExport, recording, refreshingExport, requestingExport }) {
+  if (!onRefreshExport) return null;
+  return /* @__PURE__ */ jsx3("div", { className: "pt-1", children: /* @__PURE__ */ jsxs2(ChalkButton, { "aria-label": `Check video status ${shortId(recording.id)}`, disabled: refreshingExport || requestingExport, loading: refreshingExport || requestingExport, onClick: () => onRefreshExport(recording), variant: "ghost", className: "shrink-0 px-3", children: [
+    /* @__PURE__ */ jsx3(RefreshIcon, { className: "size-4" }),
+    "Check video status"
+  ] }) });
+}
+function RequestedVideoActions({ onRequestExport, recording, requestingExport }) {
+  if (!onRequestExport) return null;
+  if (recording.export?.status === "failed") {
+    return /* @__PURE__ */ jsx3("div", { className: "pt-1", children: /* @__PURE__ */ jsxs2(ChalkButton, { "aria-label": `Retry Export ${shortId(recording.id)}`, disabled: requestingExport, loading: requestingExport, onClick: () => onRequestExport(recording, "retry"), variant: "ghost", className: "shrink-0 px-3", children: [
+      /* @__PURE__ */ jsx3(RefreshIcon, { className: "size-4" }),
+      "Retry Export"
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap gap-2 pt-1", children: [
+    /* @__PURE__ */ jsxs2(ChalkButton, { "aria-label": `Watch recording ${shortId(recording.id)}`, disabled: requestingExport, loading: requestingExport, onClick: () => onRequestExport(recording, "watch"), variant: "ghost", className: "shrink-0 px-3", children: [
+      /* @__PURE__ */ jsx3(PlayIcon, { className: "size-4" }),
+      "Watch"
+    ] }),
+    /* @__PURE__ */ jsxs2(ChalkButton, { "aria-label": `Download recording ${shortId(recording.id)}`, disabled: requestingExport, loading: requestingExport, onClick: () => onRequestExport(recording, "download"), variant: "ghost", className: "shrink-0 px-3", children: [
+      /* @__PURE__ */ jsx3(Download01Icon, { className: "size-4" }),
+      "Download"
+    ] })
+  ] });
+}
+function LegacyRecordingActions({ downloading, onDownload, recording }) {
+  if (recording.status !== "completed" || !onDownload) return null;
+  return /* @__PURE__ */ jsx3("div", { className: "pt-3", children: /* @__PURE__ */ jsxs2(ChalkButton, { "aria-label": `Download recording ${shortId(recording.id)}`, disabled: downloading, loading: downloading, onClick: () => onDownload(recording), variant: "ghost", className: "shrink-0 px-3", children: [
+    /* @__PURE__ */ jsx3(Download01Icon, { className: "size-4" }),
+    /* @__PURE__ */ jsx3("span", { className: "hidden sm:inline", children: "Download" })
+  ] }) });
+}
+function canRequestExport(value) {
+  return value.status === "none" || value.status === "failed" && value.retryable;
+}
+function legacyStatusLabel(status) {
+  if (status === "pending") return "Pending";
+  if (status === "processing") return "Processing";
+  if (status === "completed") return "Ready";
+  return "Failed";
+}
+function legacyStatusTone(status) {
+  if (status === "pending") return "neutral";
+  if (status === "processing") return "accent";
+  if (status === "completed") return "success";
+  return "danger";
+}
+function sourceDetail(source) {
+  if (source.status === "available") return source.expires_at ? `Available until ${formatTimestamp(source.expires_at)}.` : "Available for transcript processing and a video request.";
+  if (source.status === "pending") return "Capture is still being stored.";
+  if (source.status === "failed") return "Capture failed. A transcript and video cannot be created.";
+  return "Capture is no longer available.";
+}
+function transcriptDetail(status) {
+  if (status === "none") return "Transcript was not enabled for this Episode.";
+  if (status === "requestable") return "Transcript can be requested from this Capture.";
+  if (status === "unavailable") return "Transcript cannot be requested from this Capture.";
+  if (status === "pending") return "Transcript is waiting to be prepared.";
+  if (status === "processing") return "Transcript is being prepared.";
+  if (status === "completed") return "Transcript is ready.";
+  return "Transcript could not be created.";
+}
+function exportDetail(value) {
+  if (value.status === "none") return "A video will be prepared when you watch or download.";
+  if (value.status === "pending") return "Video is being prepared.";
+  if (value.status === "ready") return "Video is ready to watch or download.";
+  if (value.status === "failed") return value.failure_message ?? "Video could not be prepared.";
+  return "Video cannot be created because the capture is unavailable.";
+}
+function sourceTone(status) {
+  if (status === "available") return "success";
+  if (status === "pending") return "accent";
+  return "danger";
+}
+function sourceLabel(status) {
+  if (status === "pending") return "Saving";
+  if (status === "available") return "Available";
+  if (status === "failed") return "Failed";
+  return "Expired";
+}
+function transcriptTone(status) {
+  if (status === "none" || status === "requestable") return "neutral";
+  if (status === "unavailable") return "danger";
+  if (status === "completed") return "success";
+  if (status === "failed") return "danger";
+  return "accent";
+}
+function transcriptLabel(status) {
+  if (status === "none") return "Not enabled";
+  if (status === "requestable") return "Can request";
+  if (status === "unavailable") return "Unavailable";
+  if (status === "pending") return "Waiting";
+  if (status === "processing") return "Preparing";
+  if (status === "completed") return "Ready";
+  return "Failed";
+}
+function exportTone(status) {
+  if (status === "ready") return "success";
+  if (status === "none") return "neutral";
+  if (status === "pending") return "accent";
+  return "danger";
+}
+function exportLabel(status) {
+  if (status === "none") return "Not requested";
+  if (status === "pending") return "Preparing";
+  if (status === "ready") return "Ready";
+  if (status === "failed") return "Failed";
+  return "Unavailable";
+}
+function shortId(value) {
+  return value.slice(0, 8);
+}
+function formatTimestamp(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  const datePart = date.toISOString().slice(0, 10);
+  const timePart = date.toISOString().slice(11, 16);
+  return `${datePart} ${timePart} UTC`;
+}
+RecordingHistoryPanel.displayName = "RecordingHistoryPanel";
+
+// src/components/whiteboard-view/RecordingWhiteboardView.tsx
+import { fromWireElement } from "@q9labsai/chalk-whiteboard";
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function RecordingWhiteboardView({ state: stateValue, files, expectedSceneId, expectedRevision, theme, excalidrawCssPath, onLoadError, onPresented, className }) {
+  const cursor = useMemo2(() => createRecordingWhiteboardCursor(stateValue), [stateValue]);
+  const state = useMemo2(() => cursor.at(expectedRevision), [cursor, expectedRevision]);
+  const elements = useMemo2(() => state.elements.map(fromWireElement), [state.elements]);
+  const resolvedTheme = theme ?? "light";
+  const [ready, setReady] = useState3(null);
+  const [presentedState, setPresentedState] = useState3(null);
+  const handleReady = useCallback2((api) => setReady(Object.freeze({ api, defaultViewBackgroundColor: api.getAppState().viewBackgroundColor })), []);
+  const requiredFileIds = recordingWhiteboardFileIds(state);
+  if (expectedSceneId !== void 0 && state.sceneId !== expectedSceneId) throw new TypeError("recording whiteboard scene does not match the presentation frame");
+  if (expectedRevision !== void 0 && state.revision !== expectedRevision) throw new TypeError("recording whiteboard revision does not match the presentation frame");
+  for (const fileId of requiredFileIds) {
+    if (!Object.hasOwn(files ?? {}, fileId)) throw new TypeError(`recording whiteboard file is missing: ${recordingWhiteboardFileAssetId(fileId)}`);
+  }
+  useEffect3(() => {
+    if (!ready) return;
+    setPresentedState(null);
+    const installScene = () => {
+      if (files) ready.api.addFiles(Object.values(files));
+      ready.api.updateScene({ elements, appState: recordingWhiteboardSceneAppState(state, ready.defaultViewBackgroundColor), captureUpdate: "NEVER" });
+    };
+    installScene();
+    const visibleElements = elements.filter((element) => !element.isDeleted);
+    let presentedFrameRef;
+    const reconcileFrame = requestAnimationFrame(() => {
+      installScene();
+      if (visibleElements.length > 0) ready.api.scrollToContent(visibleElements, { fitToContent: true, animate: false, viewportZoomFactor: 0.9 });
+      const presentedFrame = requestAnimationFrame(() => setPresentedState(state));
+      presentedFrameRef = presentedFrame;
+    });
+    return () => {
+      cancelAnimationFrame(reconcileFrame);
+      if (presentedFrameRef !== void 0) cancelAnimationFrame(presentedFrameRef);
+    };
+  }, [elements, files, ready, state]);
+  useEffect3(() => {
+    if (presentedState !== state || onPresented === void 0) return;
+    onPresented(state);
+  }, [onPresented, presentedState, state]);
+  return /* @__PURE__ */ jsx4(WhiteboardView, { canDraw: false, className: cn("h-full w-full !min-h-0 !border-0", className), excalidrawCssPath, onExcalidrawApiReady: handleReady, onLoadError, theme: resolvedTheme });
+}
+RecordingWhiteboardView.displayName = "RecordingWhiteboardView";
+
+// src/components/logo/Logo.tsx
+import { useId } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_COLOR = "#1A332B";
+var DEFAULT_HEIGHT = 32;
+var DEFAULT_VARIANT = "wordmark";
+var WORDMARK_VIEW_BOX = "0 0 200 80";
+var MARK_VIEW_BOX = "0 0 68 80";
+function gradientId(prefix, name) {
+  return `${prefix}-${name}`;
+}
+function Logo({ accessibilityLabel = "Chalk", color = DEFAULT_COLOR, height = DEFAULT_HEIGHT, variant = DEFAULT_VARIANT }) {
+  const generatedId = useId().replace(/[^a-zA-Z0-9_-]/gu, "");
+  const idPrefix = `chalk-logo-${generatedId}`;
+  const isWordmark = variant === "wordmark";
+  const viewBox = isWordmark ? WORDMARK_VIEW_BOX : MARK_VIEW_BOX;
+  const width = isWordmark ? height * 2.5 : height * (68 / 80);
+  const accessible = accessibilityLabel !== null;
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      "aria-hidden": accessible ? void 0 : true,
+      "aria-label": accessible ? accessibilityLabel : void 0,
+      className: "chalk-logo",
+      color,
+      "data-chalk-logo": "true",
+      focusable: "false",
+      height,
+      role: accessible ? "img" : void 0,
+      viewBox,
+      width,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ jsxs3("defs", { children: [
+          /* @__PURE__ */ jsxs3("linearGradient", { id: gradientId(idPrefix, "green"), x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: "#C5E5C0" }),
+            /* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: "#80B879" })
+          ] }),
+          /* @__PURE__ */ jsxs3("linearGradient", { id: gradientId(idPrefix, "yellow"), x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: "#FCEAB3" }),
+            /* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: "#D9B641" })
+          ] }),
+          /* @__PURE__ */ jsxs3("linearGradient", { id: gradientId(idPrefix, "blue"), x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: "#B2E0F0" }),
+            /* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: "#55AAC9" })
+          ] }),
+          /* @__PURE__ */ jsxs3("linearGradient", { id: gradientId(idPrefix, "pink"), x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: "#F8CACA" }),
+            /* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: "#D67B7B" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("g", { transform: "translate(2, 2) scale(0.95)", children: [
+          /* @__PURE__ */ jsx5("g", { className: "chalk-logo__stick chalk-logo__stick--green", children: /* @__PURE__ */ jsxs3("g", { transform: "rotate(-15 20 60)", children: [
+            /* @__PURE__ */ jsx5("path", { d: "M9,20 L21,20 L22,63 A7,7 0 0 1 8,63 Z", fill: `url(#${gradientId(idPrefix, "green")})` }),
+            /* @__PURE__ */ jsx5("ellipse", { cx: "15", cy: "20", rx: "6", ry: "2.5", fill: "#D8ECD4" })
+          ] }) }),
+          /* @__PURE__ */ jsx5("g", { className: "chalk-logo__stick chalk-logo__stick--yellow", children: /* @__PURE__ */ jsxs3("g", { transform: "rotate(-8 32 55)", children: [
+            /* @__PURE__ */ jsx5("path", { d: "M23,15 L35,15 L36,60 A7,7 0 0 1 22,60 Z", fill: `url(#${gradientId(idPrefix, "yellow")})` }),
+            /* @__PURE__ */ jsx5("ellipse", { cx: "29", cy: "15", rx: "6", ry: "2.5", fill: "#FEF3D1" })
+          ] }) }),
+          /* @__PURE__ */ jsx5("g", { className: "chalk-logo__stick chalk-logo__stick--blue", children: /* @__PURE__ */ jsxs3("g", { transform: "rotate(12 60 30)", children: [
+            /* @__PURE__ */ jsx5("path", { d: "M36,8 L48,8 L49,56 A7,7 0 0 1 35,56 Z", fill: `url(#${gradientId(idPrefix, "blue")})` }),
+            /* @__PURE__ */ jsx5("ellipse", { cx: "42", cy: "8", rx: "6", ry: "2.5", fill: "#D0EDF8" })
+          ] }) }),
+          /* @__PURE__ */ jsx5("g", { className: "chalk-logo__stick chalk-logo__stick--pink", children: /* @__PURE__ */ jsxs3("g", { transform: "rotate(5 55 50)", children: [
+            /* @__PURE__ */ jsx5("path", { d: "M49,70 L61,70 L62,29 A7,7 0 0 0 48,29 Z", fill: `url(#${gradientId(idPrefix, "pink")})` }),
+            /* @__PURE__ */ jsx5("ellipse", { cx: "55", cy: "70", rx: "6", ry: "2.5", fill: "#FBE4E4" })
+          ] }) })
+        ] }),
+        isWordmark ? /* @__PURE__ */ jsx5("text", { className: "chalk-logo__wordmark", x: "90", y: "52", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif", fontSize: "38", fontWeight: "600", letterSpacing: "-0.02em", fill: "currentColor", children: "chalk" }) : null
+      ]
+    }
+  );
+}
+
+export {
+  Chalk,
+  RecordingSpaceView,
+  RecordingHistoryPanel,
+  RecordingWhiteboardView,
+  Logo
+};