@q9labsai/chalk-react 4.1.15 → 4.1.16

package/dist/chunk-RMOJ5DLX.js

@@ -0,0 +1,1421 @@
+import {
+  parseRecordingWhiteboardStateV1,
+  recordingWhiteboardFileAssetId,
+  recordingWhiteboardFileIds,
+  recordingWhiteboardSceneAppState
+} from "./chunk-HZ43I4OS.js";
+import {
+  ChalkBackdrop,
+  ChalkBadge,
+  ChalkButton,
+  ChalkDialogPanel,
+  ChalkEmptyState,
+  ChalkIconButton,
+  ChalkPanel,
+  ChalkProvider,
+  ChalkTextarea,
+  ChatPanelPresentation,
+  ControlBarPresentation,
+  EntranceSurface,
+  MediaRequestDialog,
+  ParticipantTileSurface,
+  QuietSpace,
+  ReactionsOverlayPresentation,
+  ScreenSharePresentation,
+  SettingsDialog,
+  SkinProvider,
+  SpaceDrawer,
+  SpacePresentation,
+  SpaceView,
+  Stage,
+  StageContentTileSurface,
+  StatusSurface,
+  WhiteboardView,
+  chalkThemeStyle,
+  getThemeMode,
+  useCan,
+  useConnection,
+  useMedia,
+  useOffline,
+  useParticipants,
+  useSelf,
+  useSkin,
+  useSpaceClient,
+  useWhiteboard
+} from "./chunk-C7PNVYDZ.js";
+import {
+  WHITEBOARD_ITEM_ID,
+  screenShareItemId
+} from "./chunk-VLAZKVNN.js";
+import {
+  captureFeedbackScreenshot,
+  collectBrowserFeedbackEvidence
+} from "./chunk-FFPNO2MY.js";
+import {
+  Cancel01Icon2 as Cancel01Icon,
+  Download01Icon2 as Download01Icon,
+  FileTextIcon,
+  Loading01Icon,
+  PlayIcon2 as PlayIcon,
+  RefreshIcon2 as RefreshIcon,
+  Video01Icon2 as Video01Icon,
+  cn
+} from "./chunk-S6OVGZD5.js";
+
+// src/components/entrance/Entrance.tsx
+import { useEffect, useState } from "react";
+import { describeMediaCaptureError } from "@q9labsai/chalk-client";
+import { jsx } from "react/jsx-runtime";
+function Entrance({
+  spaceName,
+  logoUrl,
+  defaultDisplayName = "",
+  defaults,
+  joining = false,
+  error,
+  theme,
+  generatedAvatars = true,
+  onJoin,
+  onCancel,
+  onPrepare,
+  audioInputDevices,
+  videoInputDevices,
+  audioOutputDevices,
+  selectedAudioInput: selectedAudioInputProp,
+  selectedVideoInput: selectedVideoInputProp,
+  selectedAudioOutput: selectedAudioOutputProp,
+  onAudioInputChange,
+  onVideoInputChange,
+  onAudioOutputChange
+}) {
+  useEffect(() => {
+    void onPrepare?.().catch(() => void 0);
+  }, [onPrepare]);
+  const [displayName, setDisplayName] = useState(defaultDisplayName);
+  const [microphone, setMicrophone] = useState(defaults?.microphone ?? true);
+  const [camera, setCamera] = useState(defaults?.camera ?? true);
+  const [selectedAudioInput, setSelectedAudioInput] = useState(selectedAudioInputProp ?? "");
+  const [selectedVideoInput, setSelectedVideoInput] = useState(selectedVideoInputProp ?? "");
+  const [selectedAudioOutput, setSelectedAudioOutput] = useState(selectedAudioOutputProp ?? "");
+  const [enumeratedDevices, setEnumeratedDevices] = useState({ audioInputDevices: [], videoInputDevices: [], audioOutputDevices: [] });
+  const [previewError, setPreviewError] = useState(null);
+  const [previewStream, setPreviewStream] = useState(null);
+  useEffect(() => {
+    if (selectedAudioInputProp !== void 0) setSelectedAudioInput(selectedAudioInputProp ?? "");
+  }, [selectedAudioInputProp]);
+  useEffect(() => {
+    if (selectedVideoInputProp !== void 0) setSelectedVideoInput(selectedVideoInputProp ?? "");
+  }, [selectedVideoInputProp]);
+  useEffect(() => {
+    if (selectedAudioOutputProp !== void 0) setSelectedAudioOutput(selectedAudioOutputProp ?? "");
+  }, [selectedAudioOutputProp]);
+  const hasMissingDeviceList = audioInputDevices === void 0 || videoInputDevices === void 0 || audioOutputDevices === void 0;
+  useEffect(() => {
+    if (!hasMissingDeviceList || !navigator.mediaDevices?.enumerateDevices) return;
+    let cancelled = false;
+    void navigator.mediaDevices.enumerateDevices().then((devices) => {
+      if (cancelled) return;
+      setEnumeratedDevices({
+        audioInputDevices: devicesOfKind(devices, "audioinput"),
+        videoInputDevices: devicesOfKind(devices, "videoinput"),
+        audioOutputDevices: devicesOfKind(devices, "audiooutput")
+      });
+    }).catch(() => void 0);
+    return () => {
+      cancelled = true;
+    };
+  }, [hasMissingDeviceList]);
+  const effectiveAudioInputDevices = audioInputDevices ?? enumeratedDevices.audioInputDevices;
+  const effectiveVideoInputDevices = videoInputDevices ?? enumeratedDevices.videoInputDevices;
+  const effectiveAudioOutputDevices = audioOutputDevices ?? enumeratedDevices.audioOutputDevices;
+  useEffect(() => {
+    if (!navigator.mediaDevices?.getUserMedia || !microphone && !camera) {
+      setPreviewStream((current) => {
+        stopTracks(current);
+        return null;
+      });
+      return;
+    }
+    let cancelled = false;
+    let requestedStream = null;
+    void navigator.mediaDevices.getUserMedia({ audio: captureConstraint(microphone, selectedAudioInput), video: captureConstraint(camera, selectedVideoInput) }).then((stream) => {
+      requestedStream = stream;
+      if (cancelled) {
+        stopTracks(stream);
+        return;
+      }
+      setPreviewError(null);
+      setPreviewStream((current) => {
+        stopTracks(current);
+        return stream;
+      });
+    }).catch((cause) => {
+      if (!cancelled) setPreviewError(describeMediaCaptureError(cause).message);
+    });
+    return () => {
+      cancelled = true;
+      stopTracks(requestedStream);
+    };
+  }, [camera, microphone, selectedAudioInput, selectedVideoInput]);
+  useEffect(() => () => stopTracks(previewStream), [previewStream]);
+  const submit = () => {
+    const normalizedDisplayName = displayName.trim();
+    if (!normalizedDisplayName || joining) return;
+    void onJoin({
+      displayName: normalizedDisplayName,
+      microphone,
+      camera,
+      ...selectedAudioInput ? { audioInputDeviceId: selectedAudioInput } : {},
+      ...selectedVideoInput ? { videoInputDeviceId: selectedVideoInput } : {},
+      ...selectedAudioOutput ? { audioOutputDeviceId: selectedAudioOutput } : {}
+    });
+  };
+  const selectAudioInput = (deviceId) => {
+    setSelectedAudioInput(deviceId);
+    void onAudioInputChange?.(deviceId);
+  };
+  const selectVideoInput = (deviceId) => {
+    setSelectedVideoInput(deviceId);
+    void onVideoInputChange?.(deviceId);
+  };
+  const selectAudioOutput = (deviceId) => {
+    setSelectedAudioOutput(deviceId);
+    void onAudioOutputChange?.(deviceId);
+  };
+  return /* @__PURE__ */ jsx(
+    EntranceSurface,
+    {
+      spaceName,
+      logoUrl,
+      displayName,
+      microphone,
+      camera,
+      joining,
+      error,
+      theme,
+      generatedAvatars,
+      previewError,
+      previewStream,
+      onDisplayNameChange: setDisplayName,
+      onMicrophoneChange: setMicrophone,
+      onCameraChange: setCamera,
+      audioInputDevices: effectiveAudioInputDevices,
+      videoInputDevices: effectiveVideoInputDevices,
+      audioOutputDevices: effectiveAudioOutputDevices,
+      selectedAudioInput,
+      selectedVideoInput,
+      selectedAudioOutput,
+      onAudioInputChange: selectAudioInput,
+      onVideoInputChange: selectVideoInput,
+      onAudioOutputChange: selectAudioOutput,
+      onSubmit: submit,
+      onCancel
+    }
+  );
+}
+function devicesOfKind(devices, kind) {
+  return devices.filter((device) => device.kind === kind).map(({ deviceId, label }) => ({ deviceId, label }));
+}
+function captureConstraint(enabled, deviceId) {
+  if (!enabled) return false;
+  return deviceId ? { deviceId: { exact: deviceId } } : true;
+}
+function stopTracks(stream) {
+  stream?.getTracks().forEach((track) => track.stop());
+}
+
+// src/components/feedback/FeedbackDialog.tsx
+import { useCallback, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CATEGORIES = [
+  { value: "bug", label: "Bug" },
+  { value: "feature_request", label: "Feature request" },
+  { value: "other", label: "Other" }
+];
+function FeedbackDialog({ isOpen, onClose, client, source = "embedded", captureRootRef }) {
+  const skin = useSkin();
+  const [category, setCategory] = useState2("bug");
+  const [message, setMessage] = useState2("");
+  const [prepared, setPrepared] = useState2(null);
+  const [screenshotUrl, setScreenshotUrl] = useState2();
+  const [screenshotFailure, setScreenshotFailure] = useState2();
+  const [preparing, setPreparing] = useState2(false);
+  const [submitting, setSubmitting] = useState2(false);
+  const [prepareError, setPrepareError] = useState2();
+  const [submitError, setSubmitError] = useState2();
+  const [submitted, setSubmitted] = useState2(false);
+  const openedRef = useRef(false);
+  const preparationRef = useRef(0);
+  const primaryText = skin === "classic" ? "!text-white" : "!text-[var(--chalk-accent-text)]";
+  const prepareFeedback = useCallback(
+    async (includeScreenshot) => {
+      const generation = ++preparationRef.current;
+      setPreparing(true);
+      setPrepared(null);
+      setScreenshotUrl(void 0);
+      setScreenshotFailure(void 0);
+      setPrepareError(void 0);
+      try {
+        const evidence = collectBrowserFeedbackEvidence();
+        const next = await client.feedback.prepare({
+          source,
+          evidence,
+          screenshot_provider: () => includeScreenshot ? captureFeedbackScreenshot(captureRootRef.current) : { state: "removed" }
+        });
+        if (generation !== preparationRef.current) return;
+        setPrepared(next);
+        setScreenshotUrl(next.screenshot ? `data:${next.screenshot.mime_type};base64,${next.screenshot.data_base64}` : void 0);
+        setScreenshotFailure(next.evidence.screenshot.state === "captured" || next.evidence.screenshot.state === "partial" ? void 0 : next.evidence.screenshot.failure_code);
+      } catch (cause) {
+        if (generation !== preparationRef.current) return;
+        setPrepared(null);
+        setScreenshotUrl(void 0);
+        setPrepareError(cause instanceof Error ? cause.message : "Feedback evidence is unavailable. You can still send this message.");
+      } finally {
+        if (generation === preparationRef.current) setPreparing(false);
+      }
+    },
+    [captureRootRef, client, source]
+  );
+  useEffect2(() => {
+    if (!isOpen) {
+      openedRef.current = false;
+      preparationRef.current += 1;
+      return;
+    }
+    if (openedRef.current) return;
+    openedRef.current = true;
+    setCategory("bug");
+    setMessage("");
+    setPrepared(null);
+    setScreenshotUrl(void 0);
+    setScreenshotFailure(void 0);
+    setPrepareError(void 0);
+    setSubmitError(void 0);
+    setSubmitted(false);
+    void prepareFeedback(true);
+  }, [isOpen, prepareFeedback]);
+  useEffect2(() => {
+    if (!isOpen) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const reviseFeedback = () => {
+    if (!submitError) return;
+    setSubmitError(void 0);
+    setPrepared(null);
+    void prepareFeedback(screenshotUrl !== void 0);
+  };
+  const submit = (event) => {
+    event.preventDefault();
+    const normalizedMessage = message.trim();
+    if (!normalizedMessage || submitting) return;
+    setSubmitting(true);
+    setSubmitError(void 0);
+    const send = async () => {
+      try {
+        if (prepared) {
+          await prepared.send({ category, message: normalizedMessage });
+        } else {
+          const evidence = collectBrowserFeedbackEvidence();
+          await client.feedback.send({ category, message: normalizedMessage, source, evidence: { ...evidence, screenshot: { state: "unavailable", failure_code: "capture_failed" } } });
+        }
+        setSubmitted(true);
+      } catch (cause) {
+        setSubmitError(cause instanceof Error ? cause.message : "Feedback could not be sent. Please try again.");
+      } finally {
+        setSubmitting(false);
+      }
+    };
+    void send();
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-chalk-feedback-private": true, "data-chalk-skin": skin, className: "fixed inset-0 z-[70]", onMouseDown: onClose, children: [
+    /* @__PURE__ */ jsx2(ChalkBackdrop, { className: "z-0 !bg-[color-mix(in_srgb,var(--chalk-app-canvas)_90%,transparent)] !backdrop-blur-[1px]" }),
+    /* @__PURE__ */ jsx2("div", { className: "relative z-10 grid h-full place-items-center p-4", children: /* @__PURE__ */ jsxs(
+      ChalkDialogPanel,
+      {
+        className: cn("chalk-textured-surface w-full max-w-lg overflow-hidden !rounded-[14px] !border border-[var(--chalk-app-line-strong)] bg-[var(--chalk-app-panel)] text-[var(--chalk-app-text)] !p-0 shadow-[var(--chalk-app-shadow-sm)]"),
+        "aria-modal": "true",
+        "aria-labelledby": "chalk-feedback-title",
+        onMouseDown: (event) => event.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-5 border-b border-[var(--chalk-app-line)] px-6 py-5", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx2("h2", { id: "chalk-feedback-title", className: "text-xl font-semibold tracking-[-0.025em]", children: "Send feedback" }),
+              /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-[var(--chalk-app-text-muted)]", children: "Tell Chalk what happened. We\u2019ll include safe technical context to help us understand it." })
+            ] }),
+            /* @__PURE__ */ jsx2(ChalkIconButton, { type: "button", onClick: onClose, size: "sm", "aria-label": "Close feedback dialog", className: "!h-9 !w-9 !rounded-[8px] text-[var(--chalk-app-text-muted)]", children: /* @__PURE__ */ jsx2(Cancel01Icon, { size: 19 }) })
+          ] }),
+          submitted ? /* @__PURE__ */ jsxs("div", { className: "space-y-5 p-6", children: [
+            /* @__PURE__ */ jsx2("p", { role: "status", className: "text-sm leading-6 text-[var(--chalk-app-text)]", children: "Thanks. Chalk received your feedback." }),
+            /* @__PURE__ */ jsx2(ChalkButton, { type: "button", variant: "solid", tone: "accent", className: cn("w-full", primaryText), onClick: onClose, children: "Done" })
+          ] }) : /* @__PURE__ */ jsxs("form", { className: "space-y-5 p-6", onSubmit: submit, children: [
+            /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx2("legend", { className: "text-sm font-semibold", children: "What kind of feedback is this?" }),
+              /* @__PURE__ */ jsx2("div", { className: "grid gap-2 sm:grid-cols-3", children: CATEGORIES.map((option) => /* @__PURE__ */ jsxs("label", { className: cn("flex cursor-pointer items-center gap-2 rounded-md border border-[var(--chalk-app-line)] px-3 py-2 text-sm", category === option.value && "border-[var(--chalk-app-control-active-line)] bg-[var(--chalk-app-control-active)]/10"), children: [
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "feedback-category",
+                    value: option.value,
+                    checked: category === option.value,
+                    onChange: () => {
+                      setCategory(option.value);
+                      reviseFeedback();
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx2("span", { children: option.label })
+              ] }, option.value)) })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "block text-sm font-semibold", htmlFor: "chalk-feedback-message", children: [
+              "Message",
+              /* @__PURE__ */ jsx2(
+                ChalkTextarea,
+                {
+                  id: "chalk-feedback-message",
+                  className: "mt-2",
+                  required: true,
+                  maxLength: 8e3,
+                  value: message,
+                  onChange: (event) => {
+                    setMessage(event.target.value);
+                    reviseFeedback();
+                  },
+                  placeholder: "What should we know?",
+                  "aria-describedby": "chalk-feedback-message-help"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx2("p", { id: "chalk-feedback-message-help", className: "text-xs text-[var(--chalk-app-text-muted)]", children: "One message is enough. Please don\u2019t include secrets or private content." }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", "aria-live": "polite", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+                /* @__PURE__ */ jsx2("p", { className: "text-sm font-semibold", children: "Screenshot" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsxs(ChalkButton, { type: "button", variant: "outline", disabled: preparing, onClick: () => void prepareFeedback(true), className: "!h-8 !rounded-[7px] !px-2.5 !text-xs", children: [
+                    /* @__PURE__ */ jsx2(RefreshIcon, { size: 14 }),
+                    "Refresh"
+                  ] }),
+                  /* @__PURE__ */ jsx2(ChalkButton, { type: "button", variant: "outline", disabled: submitting || !preparing && !screenshotUrl, onClick: () => void prepareFeedback(false), className: "!h-8 !rounded-[7px] !px-2.5 !text-xs", children: "Remove" })
+                ] })
+              ] }),
+              screenshotUrl ? /* @__PURE__ */ jsx2("img", { src: screenshotUrl, alt: "Screenshot preview", className: "max-h-36 w-full rounded-md border border-[var(--chalk-app-line)] object-cover" }) : /* @__PURE__ */ jsx2("p", { className: "rounded-md border border-dashed border-[var(--chalk-app-line)] px-3 py-3 text-xs text-[var(--chalk-app-text-muted)]", children: preparing ? "Preparing screenshot\u2026" : screenshotFailure ? "Screenshot unavailable. You can still send feedback." : "No screenshot attached." })
+            ] }),
+            prepareError ? /* @__PURE__ */ jsx2("p", { className: "text-xs text-[var(--chalk-app-text-muted)]", children: prepareError }) : null,
+            submitError ? /* @__PURE__ */ jsx2("p", { role: "alert", className: "text-sm text-[var(--chalk-app-danger)]", children: submitError }) : null,
+            /* @__PURE__ */ jsx2(ChalkButton, { type: "submit", variant: "solid", tone: "accent", loading: submitting, disabled: !message.trim(), className: cn("w-full", primaryText), children: "Send feedback" })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/chalk/Chalk.tsx
+import { createSpaceClient } from "@q9labsai/chalk-client";
+import { useCallback as useCallback2, useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState4 } from "react";
+
+// src/internal/useWhiteboardSceneSubscription.ts
+import { useEffect as useEffect3, useState as useState3 } 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] = useState3({ status: "closed" });
+  useEffect3(() => {
+    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 as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Chalk(props) {
+  const colorScheme = useResolvedColorScheme(props.theme?.palette ? getThemeMode(props.theme.palette) : props.theme?.colorScheme);
+  const skin = props.theme?.skin ?? "classic";
+  const suppliedClient = props.client;
+  const getAccessRef = useRef2(props.getAccess);
+  getAccessRef.current = props.getAccess;
+  const getLatestAccess = useCallback2((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;
+  const feedbackRootRef = useRef2(null);
+  useEffect4(() => {
+    if (!ownedClient) return;
+    return () => {
+      void ownedClient.leave().catch(() => void 0).finally(() => ownedClient.dispose());
+    };
+  }, [ownedClient]);
+  return /* @__PURE__ */ jsx3(SkinProvider, { skin, children: /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: feedbackRootRef,
+      "data-chalk": true,
+      "data-chalk-feedback-root": true,
+      "data-chalk-theme": colorScheme,
+      "data-chalk-palette": props.theme?.palette,
+      "data-chalk-texture": props.theme?.texture,
+      "data-chalk-skin": skin,
+      className: "chalk-root h-full min-h-0 w-full",
+      style: chalkThemeStyle(props.theme, colorScheme),
+      children: /* @__PURE__ */ jsx3(ChalkProvider, { client, children: /* @__PURE__ */ jsx3(SpaceExperience, { ...props, feedbackRootRef, resolvedColorScheme: colorScheme }) })
+    }
+  ) });
+}
+function SpaceExperience(props) {
+  const client = useSpaceClient();
+  const connection = useConnection();
+  const offline = useOffline();
+  const participants = useParticipants();
+  const previousStatus = useRef2(connection.status);
+  const hasObservedStatus = useRef2(false);
+  const hasBeenLive = useRef2(connection.status === "live" || connection.status === "reconnecting");
+  const autoJoinAttempted = useRef2(false);
+  const previousClient = useRef2(client);
+  const [joinError, setJoinError] = useState4(null);
+  const lastEpisode = useRef2(connection.episode);
+  const lastParticipantCount = useRef2(participants.roster.length);
+  const [retryPending, setRetryPending] = useState4(false);
+  const [episodeEnded, setEpisodeEnded] = useState4(false);
+  const [endedAt, setEndedAt] = useState4(null);
+  const entrance = props.entrance ?? true;
+  const spaceName = props.spaceName ?? props.space ?? "Space";
+  if (connection.episode) lastEpisode.current = connection.episode;
+  if (participants.roster.length > 0) lastParticipantCount.current = participants.roster.length;
+  if (previousClient.current !== client) {
+    previousClient.current = client;
+    previousStatus.current = connection.status;
+    hasObservedStatus.current = false;
+    hasBeenLive.current = connection.status === "live" || connection.status === "reconnecting";
+    autoJoinAttempted.current = false;
+  }
+  useClientEvents(client, props);
+  const join = useCallback2(
+    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 = useCallback2(() => {
+    autoJoinAttempted.current = true;
+    setRetryPending(true);
+    void join(defaultJoinOptions(props)).finally(() => setRetryPending(false));
+  }, [join, props]);
+  useEffect4(() => setJoinError(null), [client]);
+  useEffect4(() => {
+    setEpisodeEnded(false);
+    setEndedAt(null);
+  }, [client]);
+  useEffect4(
+    () => client.on("episodeEnded", () => {
+      setEpisodeEnded(true);
+      setEndedAt((/* @__PURE__ */ new Date()).toISOString());
+    }),
+    [client]
+  );
+  useEffect4(() => {
+    if (entrance || connection.status !== "idle" || autoJoinAttempted.current) return;
+    autoJoinAttempted.current = true;
+    void join(defaultJoinOptions(props));
+  }, [connection.status, entrance, join, props.defaults?.camera, props.defaults?.microphone, props.displayName]);
+  useEffect4(() => {
+    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;
+    if (connection.status === "live" || connection.status === "reconnecting") hasBeenLive.current = true;
+    if (connection.status === "left" && previous !== "left") setEndedAt((current) => current ?? (/* @__PURE__ */ new Date()).toISOString());
+  }, [connection.status, props.onJoined, props.onLeft]);
+  if (connection.status === "idle") {
+    if (!entrance) return /* @__PURE__ */ jsx3(StatusSurface, { message: joinError ?? `Entering ${spaceName}\u2026`, onRetry: joinError ? retryAutomaticJoin : void 0, retryPending, retryError: joinError });
+    return /* @__PURE__ */ jsx3(Entrance, { spaceName, logoUrl: props.logoUrl, defaultDisplayName: props.displayName, defaults: props.defaults, error: joinError ?? void 0, theme: props.theme, onJoin: join });
+  }
+  if (connection.status === "joining")
+    return entrance ? /* @__PURE__ */ jsx3(Entrance, { spaceName, logoUrl: props.logoUrl, defaultDisplayName: props.displayName, defaults: props.defaults, joining: true, error: joinError ?? void 0, theme: props.theme, onJoin: join }) : /* @__PURE__ */ jsx3(StatusSurface, { message: `Entering ${spaceName}\u2026` });
+  if (connection.status === "failed") {
+    const failureMessage = [connection.lastError?.message ?? joinError ?? "Unable to enter this Space.", offline.notice].filter(Boolean).join(" ");
+    if (!hasBeenLive.current && entrance) return /* @__PURE__ */ jsx3(Entrance, { spaceName, logoUrl: props.logoUrl, defaultDisplayName: props.displayName, defaults: props.defaults, error: failureMessage, theme: props.theme, onJoin: join });
+    return /* @__PURE__ */ jsx3(StatusSurface, { phase: "failed", message: failureMessage, onRetry: retryAutomaticJoin, retryPending, retryError: joinError });
+  }
+  if (connection.status === "leaving") return /* @__PURE__ */ jsx3(StatusSurface, { phase: "leaving", message: `Leaving ${spaceName}\u2026`, spaceName });
+  if (connection.status === "left")
+    return /* @__PURE__ */ jsx3(
+      StatusSurface,
+      {
+        phase: episodeEnded ? "episode-ended" : "left",
+        message: [episodeEnded ? "This Episode has ended for everyone." : "Your connection is closed. You can re-enter from here.", offline.notice].filter(Boolean).join(" "),
+        spaceName,
+        episode: lastEpisode.current,
+        endedAt,
+        participantCount: lastParticipantCount.current,
+        onRetry: episodeEnded ? void 0 : retryAutomaticJoin,
+        retryPending,
+        retryError: joinError
+      }
+    );
+  return /* @__PURE__ */ jsx3(SpaceSurface, { ...props, spaceName });
+}
+function SpaceSurface(props) {
+  const client = useSpaceClient();
+  const connection = useConnection();
+  const self = useSelf();
+  const media = useMedia();
+  const whiteboardState = useWhiteboard();
+  const canEndEpisode = useCan("endEpisode");
+  const canDrawWhiteboard = useCan("drawWhiteboard");
+  const [settingsOpen, setSettingsOpen] = useState4(false);
+  const [settingsInitialSection, setSettingsInitialSection] = useState4();
+  const [infoOpen, setInfoOpen] = useState4(false);
+  const [feedbackOpen, setFeedbackOpen] = useState4(false);
+  const [commandError, setCommandError] = useState4(null);
+  const [settings, setSettings] = useState4(() => createSettings(self.displayName ?? "", props.layout ?? "focus", props.theme?.skin ?? "classic", props.theme?.palette ?? (props.resolvedColorScheme === "dark" ? "warm-charcoal" : "light"), props.theme?.texture ?? "none"));
+  const resolvedSkin = props.theme?.skin ?? "classic";
+  const resolvedPalette = props.theme?.palette ?? (props.resolvedColorScheme === "dark" ? "warm-charcoal" : "light");
+  const resolvedTexture = props.theme?.texture ?? "none";
+  const appearancePaletteExplicitRef = useRef2(props.theme?.palette !== void 0);
+  const settingsRef = useRef2(settings);
+  settingsRef.current = settings;
+  useEffect4(() => {
+    setSettings((current) => ({
+      ...current,
+      identity: { displayName: self.displayName ?? current.identity.displayName },
+      join: { audioEnabled: media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting", videoEnabled: media.local.camera.state === "enabled" || media.local.camera.state === "requesting" },
+      audio: { ...current.audio, selectedInput: media.selection.microphone ?? void 0, selectedOutput: media.selection.speaker ?? void 0 },
+      video: { ...current.video, selectedInput: media.selection.camera ?? void 0 }
+    }));
+  }, [media.local.camera.state, media.local.microphone.state, media.selection.camera, media.selection.microphone, media.selection.speaker, self.displayName]);
+  useEffect4(() => {
+    if (!props.theme?.skin && !props.theme?.palette && !props.theme?.texture) return;
+    setSettings((current) => ({
+      ...current,
+      appearance: {
+        ...current.appearance,
+        skin: props.theme?.skin ?? current.appearance.skin,
+        palette: props.theme?.palette ?? current.appearance.palette,
+        texture: props.theme?.texture ?? current.appearance.texture,
+        theme: (props.theme?.palette ?? current.appearance.palette) === "light" ? "light" : "dark"
+      }
+    }));
+  }, [props.theme?.palette, props.theme?.skin, props.theme?.texture]);
+  useEffect4(() => {
+    if (props.theme?.palette || appearancePaletteExplicitRef.current) return;
+    const palette = props.resolvedColorScheme === "dark" ? "warm-charcoal" : "light";
+    setSettings((current) => current.appearance.palette === palette ? current : { ...current, appearance: { ...current.appearance, palette, theme: palette === "light" ? "light" : "dark" } });
+  }, [props.resolvedColorScheme, props.theme?.palette, props.theme?.texture]);
+  const runCommand = useCallback2(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;
+  const whiteboardSubscription = useWhiteboardSceneSubscription(whiteboardTransport, whiteboardAvailable);
+  const setWhiteboardPresentation = whiteboardSubscription.status === "ready" ? bindWhiteboardPresentation(whiteboardSubscription.transport) : void 0;
+  useEffect4(() => {
+    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(),
+        initiateUpload: (input) => whiteboardSubscription.transport.files.initiateUpload(input),
+        finalizeUpload: (uploadId) => whiteboardSubscription.transport.files.finalizeUpload(uploadId),
+        presignDownload: (fileId) => whiteboardSubscription.transport.files.getDownloadUrl(fileId)
+      }
+    }
+  } : void 0;
+  return /* @__PURE__ */ jsx3(
+    SpaceView,
+    {
+      spaceName: props.spaceName,
+      logoUrl: props.logoUrl,
+      inviteLink: props.inviteLink,
+      pickChatFiles: props.pickChatFiles,
+      skin: settings.appearance.skin ?? resolvedSkin,
+      palette: settings.appearance.palette ?? resolvedPalette,
+      texture: settings.appearance.texture ?? resolvedTexture,
+      generatedAvatars: settings.appearance.generatedAvatars,
+      commandError: commandError ?? void 0,
+      onDismissCommandError: () => setCommandError(null),
+      layout: settings.appearance.layout === "focus" || settings.appearance.layout === "grid" || settings.appearance.layout === "presentation" ? settings.appearance.layout : props.layout ?? "focus",
+      onLayoutChange: (nextLayout) => {
+        setSettings((current) => ({ ...current, appearance: { ...current.appearance, layout: nextLayout } }));
+        props.onLayoutChange?.(nextLayout);
+      },
+      features: { ...props.features, sounds: props.features?.sounds !== false && settings.experience.sounds },
+      onOpenDiagnostics: props.onOpenDiagnostics,
+      onOpenFeedback: () => setFeedbackOpen(true),
+      whiteboard,
+      onToggleWhiteboard: canDrawWhiteboard && setWhiteboardPresentation ? () => void runCommand(() => setWhiteboardPresentation(!whiteboardState.engine.presenting)) : void 0,
+      infoDialog: props.features?.info !== false && (props.inviteLink || props.diagnosticReference || props.spaceDescription) ? {
+        isOpen: infoOpen,
+        onOpenChange: setInfoOpen,
+        spaceName: props.spaceName,
+        spaceDescription: props.spaceDescription,
+        inviteLink: props.inviteLink,
+        onCopyLink: props.inviteLink ? () => void navigator.clipboard?.writeText(props.inviteLink) : void 0,
+        diagnosticReference: props.diagnosticReference,
+        onCopyDiagnosticReference: (reference) => void navigator.clipboard?.writeText(reference),
+        onSendFeedback: props.onSendFeedback
+      } : void 0,
+      onOpenSettings: props.features?.settings !== false ? () => {
+        setSettingsInitialSection(void 0);
+        setSettingsOpen(true);
+      } : void 0,
+      settingsDialog: props.features?.settings !== false ? /* @__PURE__ */ jsx3(
+        SettingsDialog,
+        {
+          isOpen: settingsOpen,
+          onClose: () => {
+            setSettingsOpen(false);
+            setSettingsInitialSection(void 0);
+          },
+          initialSection: settingsInitialSection,
+          settings,
+          onUpdateIdentity: (updates) => {
+            setSettings((current) => ({ ...current, identity: { ...current.identity, ...updates } }));
+            const nextDisplayName = updates.displayName?.trim();
+            if (nextDisplayName) void runCommand(() => client.participants.renameSelf(nextDisplayName));
+          },
+          onUpdateJoin: (updates) => {
+            setSettings((current) => ({ ...current, join: { ...current.join, ...updates } }));
+            if (updates.audioEnabled !== void 0) runCommand(() => client.media.setMicrophoneEnabled(updates.audioEnabled));
+            if (updates.videoEnabled !== void 0) runCommand(() => client.media.setCameraEnabled(updates.videoEnabled));
+          },
+          onUpdateAudio: (updates) => {
+            setSettings((current) => ({ ...current, audio: { ...current.audio, ...updates } }));
+            if (updates.selectedInput) runCommand(() => client.media.selectMicrophone(updates.selectedInput));
+            if (updates.selectedOutput) runCommand(() => client.media.selectSpeaker(updates.selectedOutput));
+          },
+          onUpdateVideo: (updates) => {
+            setSettings((current) => ({ ...current, video: { ...current.video, ...updates } }));
+            if (updates.selectedInput) runCommand(() => client.media.selectCamera(updates.selectedInput));
+          },
+          onUpdateAppearance: (updates) => {
+            if (updates.palette !== void 0) appearancePaletteExplicitRef.current = true;
+            const current = settingsRef.current;
+            if (updates.skin !== void 0 && updates.skin !== current.appearance.skin) setSettingsInitialSection("appearance");
+            const next = { ...current, appearance: { ...current.appearance, ...updates } };
+            settingsRef.current = next;
+            setSettings(next);
+            if (updates.layout === "focus" || updates.layout === "grid" || updates.layout === "presentation") props.onLayoutChange?.(updates.layout);
+          },
+          onUpdateExperience: (updates) => setSettings((current) => ({ ...current, experience: { ...current.experience, ...updates } })),
+          audioInputDevices: media.devices.microphones.map((device) => ({ ...device, kind: "audioinput" })),
+          audioOutputDevices: media.devices.speakers.map((device) => ({ ...device, kind: "audiooutput" })),
+          videoInputDevices: media.devices.cameras.map((device) => ({ ...device, kind: "videoinput" })),
+          videoTrack: media.local.camera.track,
+          participantColorSeed: self.displayName ?? void 0
+        }
+      ) : void 0,
+      onLeft: () => runCommand(() => client.leave()),
+      onEndEpisode: canEndEpisode ? () => runCommand(() => client.endEpisode()) : void 0,
+      reconnecting: { isVisible: connection.status === "reconnecting", status: "reconnecting", showNotice: false },
+      overlay: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        media.incomingRequests[0] ? /* @__PURE__ */ jsx3(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,
+        /* @__PURE__ */ jsx3(FeedbackDialog, { isOpen: feedbackOpen, onClose: () => setFeedbackOpen(false), client, source: props.feedbackSource, captureRootRef: props.feedbackRootRef })
+      ] })
+    }
+  );
+}
+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 useResolvedColorScheme(requested = "light") {
+  const [resolved, setResolved] = useState4(() => requested === "system" ? readSystemColorScheme() : requested);
+  useEffect4(() => {
+    if (requested !== "system") return void setResolved(requested);
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void setResolved("light");
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const update = () => setResolved(mediaQuery.matches ? "dark" : "light");
+    update();
+    mediaQuery.addEventListener?.("change", update);
+    return () => mediaQuery.removeEventListener?.("change", update);
+  }, [requested]);
+  return requested === "system" ? resolved : requested;
+}
+function readSystemColorScheme() {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function useClientEvents(client, callbacks) {
+  useEffect4(() => client.on("participantJoined", (event) => callbacks.onParticipantJoined?.(event)), [callbacks.onParticipantJoined, client]);
+  useEffect4(() => client.on("participantLeft", (event) => callbacks.onParticipantLeft?.(event)), [callbacks.onParticipantLeft, client]);
+  useEffect4(() => client.on("episodeEnded", (event) => callbacks.onEpisodeEnded?.(event)), [callbacks.onEpisodeEnded, client]);
+  useEffect4(() => client.on("screenShareStarted", (event) => callbacks.onScreenShareStarted?.(event)), [callbacks.onScreenShareStarted, client]);
+  useEffect4(() => client.on("screenShareStopped", (event) => callbacks.onScreenShareStopped?.(event)), [callbacks.onScreenShareStopped, client]);
+  useEffect4(() => client.on("error", (event) => callbacks.onError?.(event)), [callbacks.onError, client]);
+}
+function createSettings(displayName, layout, skin, palette, texture) {
+  return {
+    identity: { displayName },
+    join: { videoEnabled: true, audioEnabled: true },
+    audio: { outputVolume: 100, noiseSuppression: false, echoCancellation: true, autoGainControl: true },
+    video: { quality: "auto" },
+    appearance: { layout, theme: palette === "light" ? "light" : "dark", skin, palette, texture, gradient: "default", showFilmstrip: true, reducedMotion: false, generatedAvatars: true, profileGradient: { mode: "auto" }, ambientBackground: true },
+    experience: { captions: false, compactMode: false, showInviteToast: true, defaultOpenChat: false, defaultOpenParticipants: false, defaultOpenTranscription: false, autoOpenPictureInPicture: false, sounds: true }
+  };
+}
+
+// src/components/space-view/RecordingSpaceView.tsx
+import { CHALK_CHAT_ATTACHMENT_MIME_TYPES } from "@q9labsai/chalk-client";
+import { jsx as jsx4 } 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__ */ jsx4(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__ */ jsx4(ScreenSharePresentation, { sharedByName: item.participant.displayName, media, mediaVisible: hasRenderableMedia(media) });
+  };
+  return /* @__PURE__ */ jsx4(SkinProvider, { skin: frame.profile.theme.skin, children: /* @__PURE__ */ jsx4(
+    SpacePresentation,
+    {
+      skin: frame.profile.theme.skin,
+      palette: frame.profile.theme.palette,
+      texture: frame.profile.theme.texture,
+      stageBackground: frame.profile.theme.stageBackground,
+      header: {
+        spaceName: frame.space.name,
+        logoUrl: frame.space.logoAssetId ? resolveAssetUrl(frame.space.logoAssetId) : void 0,
+        duration: durationSeconds,
+        isRecording: true,
+        layout: frame.view.layout
+      },
+      stage: /* @__PURE__ */ jsx4(
+        Stage,
+        {
+          items,
+          layout: frame.view.layout,
+          interactive: false,
+          animate: false,
+          generatedAvatars: frame.profile.theme.generatedAvatars,
+          emptyState: /* @__PURE__ */ jsx4(QuietSpace, {}),
+          renderParticipant: (item, context) => {
+            const source = cameraByParticipant.get(item.participant.id);
+            const media = source ? mediaNodes.get(source.sourceId) : null;
+            return /* @__PURE__ */ jsx4(
+              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__ */ jsx4(StageContentTileSurface, { item, media, mediaVisible: hasRenderableMedia(media), pinned: context.pinned, style: context.style, hidden: context.hidden });
+          },
+          renderPrimaryContent: renderContent,
+          className: "h-full"
+        }
+      ),
+      controls: /* @__PURE__ */ jsx4(ControlBarPresentation, { placement: "floating", density: "comfortable", duration: durationSeconds, buttons: RECORDING_TOOLBAR_BUTTONS, isRecording: true, isChatOpen: true, isWhiteboardOpen: sharedContent.kind === "whiteboard", expanded: true, detectDevices: false, displayOnly: true }),
+      stageOverlay: /* @__PURE__ */ jsx4(ReactionsOverlayPresentation, { reactions: frame.reactions, elapsedMs: frame.elapsedMs }),
+      sidebar: /* @__PURE__ */ jsx4(SpaceDrawer, { state: "open", interactive: false, children: /* @__PURE__ */ jsx4(
+        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,
+          stableTexture: true,
+          disabled: true
+        }
+      ) }),
+      renderToken,
+      interactive: false,
+      className
+    }
+  ) });
+}
+RecordingSpaceView.displayName = "RecordingSpaceView";
+
+// src/components/recording-history/RecordingHistoryPanel.tsx
+import "react";
+import { jsx as jsx5, jsxs as jsxs3 } 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__ */ jsxs3(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", seed: "recording-history-panel", children: [
+    /* @__PURE__ */ jsxs3("header", { className: "flex items-center justify-between gap-3 border-b border-[var(--chalk-app-line)] px-4 py-3", children: [
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx5("h2", { className: "text-base font-semibold", children: "Recordings" }),
+        /* @__PURE__ */ jsx5("p", { className: "mt-0.5 text-xs text-[var(--chalk-app-text-muted)]", children: "Captured Episode activity" })
+      ] }),
+      isLoading ? /* @__PURE__ */ jsx5(Loading01Icon, { className: "size-4 animate-spin text-[var(--chalk-app-text-muted)]", "aria-label": "Loading recordings" }) : null
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "min-h-0 flex-1 overflow-y-auto p-3", children: error ? /* @__PURE__ */ jsx5(ChalkEmptyState, { title: "Recordings could not be loaded", description: error, tone: "danger", seed: "recording-history-error", children: onRetry ? /* @__PURE__ */ jsxs3(ChalkButton, { className: "mt-4", onClick: onRetry, tone: "danger", children: [
+      /* @__PURE__ */ jsx5(RefreshIcon, { className: "size-4" }),
+      "Try again"
+    ] }) : null }) : recordings.length === 0 && !isLoading ? /* @__PURE__ */ jsx5(ChalkEmptyState, { title: "No recordings yet", description: "Captured Episode activity will appear here.", seed: "recording-history-empty", children: /* @__PURE__ */ jsx5(Video01Icon, { className: "mx-auto mt-4 size-8 text-[var(--chalk-app-text-muted)]", "aria-hidden": "true" }) }) : /* @__PURE__ */ jsx5("ul", { className: "grid gap-2", "aria-label": "Recordings", children: recordings.map((recording) => /* @__PURE__ */ jsx5(
+      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__ */ jsx5("footer", { className: "border-t border-[var(--chalk-app-line)] p-3", children: /* @__PURE__ */ jsx5(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__ */ jsx5("li", { children: /* @__PURE__ */ jsxs3(ChalkPanel, { className: "p-3", contentClassName: "flex items-start gap-3", seed: `recording-${recording.id}`, children: [
+    /* @__PURE__ */ jsx5("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__ */ jsx5(Video01Icon, { className: "size-5" }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsxs3("span", { className: "truncate text-sm font-medium", children: [
+          "Episode ",
+          shortId(recording.episode_id)
+        ] }),
+        recording.export ? null : /* @__PURE__ */ jsx5(StatusBadge, { label: legacyStatusLabel(recording.status), tone: legacyStatusTone(recording.status), seed: `recording-status-${recording.id}` })
+      ] }),
+      /* @__PURE__ */ jsx5("p", { className: "mt-1 text-xs text-[var(--chalk-app-text-muted)]", children: /* @__PURE__ */ jsx5("time", { dateTime: recording.created_at, children: formatTimestamp(recording.created_at) }) }),
+      recording.export ? /* @__PURE__ */ jsx5(
+        RecordingArtifactStatus,
+        {
+          downloading,
+          onDownload,
+          onReadTranscript,
+          onRefreshExport,
+          onRequestExport,
+          onRequestTranscript,
+          onWatch,
+          readingTranscript,
+          recording,
+          refreshingExport,
+          requestingExport,
+          requestingTranscript
+        }
+      ) : /* @__PURE__ */ jsx5(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__ */ jsxs3("div", { className: "mt-3 grid gap-2 border-t border-[var(--chalk-app-line)] pt-3", children: [
+    recording.source ? /* @__PURE__ */ jsx5(ArtifactStatus, { icon: /* @__PURE__ */ jsx5(Video01Icon, { className: "size-4" }), label: "Capture", detail: sourceDetail(recording.source), status: sourceLabel(recording.source.status), tone: sourceTone(recording.source.status), seed: `capture-${recording.id}` }) : null,
+    transcriptStatus ? /* @__PURE__ */ jsx5(ArtifactStatus, { icon: /* @__PURE__ */ jsx5(FileTextIcon, { className: "size-4" }), label: "Transcript", detail: transcriptDetail(transcriptStatus), status: transcriptLabel(transcriptStatus), tone: transcriptTone(transcriptStatus), seed: `transcript-${recording.id}` }) : null,
+    recording.transcript ? /* @__PURE__ */ jsx5(TranscriptContent, { onReadTranscript, onRequestTranscript, reading: readingTranscript, recording, requestingTranscript }) : null,
+    /* @__PURE__ */ jsx5(ArtifactStatus, { icon: /* @__PURE__ */ jsx5(Video01Icon, { className: "size-4" }), label: "Video", detail: exportDetail(video), status: exportLabel(video.status), tone: exportTone(video.status), seed: `video-${recording.id}` }),
+    video.status === "ready" ? /* @__PURE__ */ jsx5(ReadyVideoActions, { downloading, onDownload, onWatch, recording }) : null,
+    video.status === "pending" ? /* @__PURE__ */ jsx5(PendingVideoActions, { onRefreshExport, recording, refreshingExport, requestingExport }) : null,
+    canRequestExport(video) ? /* @__PURE__ */ jsx5(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__ */ jsx5("div", { className: "pt-1", children: /* @__PURE__ */ jsxs3(ChalkButton, { "aria-label": `Request transcript ${shortId(recording.id)}`, disabled: requestingTranscript, loading: requestingTranscript, onClick: () => onRequestTranscript(recording), variant: "ghost", className: "shrink-0 px-3", children: [
+      /* @__PURE__ */ jsx5(FileTextIcon, { className: "size-4" }),
+      "Request transcript"
+    ] }) });
+  }
+  if (transcript.status !== "completed") return null;
+  if (transcript.text !== void 0) {
+    return /* @__PURE__ */ jsxs3("details", { className: "rounded border border-[var(--chalk-app-line)] p-2", children: [
+      /* @__PURE__ */ jsx5("summary", { className: "cursor-pointer text-xs font-medium", children: "Transcript" }),
+      /* @__PURE__ */ jsx5("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__ */ jsx5("div", { className: "pt-1", children: /* @__PURE__ */ jsxs3(ChalkButton, { "aria-label": `Read transcript ${shortId(recording.id)}`, disabled: reading, loading: reading, onClick: () => onReadTranscript(recording), variant: "ghost", className: "shrink-0 px-3", children: [
+    /* @__PURE__ */ jsx5(FileTextIcon, { className: "size-4" }),
+    "Read transcript"
+  ] }) });
+}
+function ArtifactStatus({ detail, icon, label, seed, status, tone }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-2 text-xs", children: [
+    /* @__PURE__ */ jsx5("span", { className: "mt-0.5 text-[var(--chalk-app-text-muted)]", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx5("span", { className: "font-medium", children: label }),
+        /* @__PURE__ */ jsx5(StatusBadge, { label: status, tone, seed })
+      ] }),
+      /* @__PURE__ */ jsx5("p", { className: "mt-0.5 text-[var(--chalk-app-text-muted)]", children: detail })
+    ] })
+  ] });
+}
+function StatusBadge({ label, seed, tone }) {
+  return /* @__PURE__ */ jsx5(ChalkBadge, { tone, seed, children: label });
+}
+function ReadyVideoActions({ downloading, onDownload, onWatch, recording }) {
+  if (!onDownload && !onWatch) return null;
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap gap-2 pt-1", children: [
+    onWatch ? /* @__PURE__ */ jsxs3(ChalkButton, { "aria-label": `Watch recording ${shortId(recording.id)}`, onClick: () => onWatch(recording), variant: "ghost", className: "shrink-0 px-3", children: [
+      /* @__PURE__ */ jsx5(PlayIcon, { className: "size-4" }),
+      "Watch"
+    ] }) : null,
+    onDownload ? /* @__PURE__ */ jsxs3(ChalkButton, { "aria-label": `Download recording ${shortId(recording.id)}`, disabled: downloading, loading: downloading, onClick: () => onDownload(recording), variant: "ghost", className: "shrink-0 px-3", children: [
+      /* @__PURE__ */ jsx5(Download01Icon, { className: "size-4" }),
+      "Download"
+    ] }) : null
+  ] });
+}
+function PendingVideoActions({ onRefreshExport, recording, refreshingExport, requestingExport }) {
+  if (!onRefreshExport) return null;
+  return /* @__PURE__ */ jsx5("div", { className: "pt-1", children: /* @__PURE__ */ jsxs3(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__ */ jsx5(RefreshIcon, { className: "size-4" }),
+    "Check video status"
+  ] }) });
+}
+function RequestedVideoActions({ onRequestExport, recording, requestingExport }) {
+  if (!onRequestExport) return null;
+  if (recording.export?.status === "failed") {
+    return /* @__PURE__ */ jsx5("div", { className: "pt-1", children: /* @__PURE__ */ jsxs3(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__ */ jsx5(RefreshIcon, { className: "size-4" }),
+      "Retry Export"
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap gap-2 pt-1", children: [
+    /* @__PURE__ */ jsxs3(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__ */ jsx5(PlayIcon, { className: "size-4" }),
+      "Watch"
+    ] }),
+    /* @__PURE__ */ jsxs3(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__ */ jsx5(Download01Icon, { className: "size-4" }),
+      "Download"
+    ] })
+  ] });
+}
+function LegacyRecordingActions({ downloading, onDownload, recording }) {
+  if (recording.status !== "completed" || !onDownload) return null;
+  return /* @__PURE__ */ jsx5("div", { className: "pt-3", children: /* @__PURE__ */ jsxs3(ChalkButton, { "aria-label": `Download recording ${shortId(recording.id)}`, disabled: downloading, loading: downloading, onClick: () => onDownload(recording), variant: "ghost", className: "shrink-0 px-3", children: [
+    /* @__PURE__ */ jsx5(Download01Icon, { className: "size-4" }),
+    /* @__PURE__ */ jsx5("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 useCallback3, useEffect as useEffect5, useMemo as useMemo2, useState as useState5 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function RecordingWhiteboardView({ state: stateValue, files, expectedSceneId, expectedRevision, theme, excalidrawCssPath, onLoadError, onPresented, className }) {
+  const state = useMemo2(() => parseRecordingWhiteboardStateV1(stateValue), [stateValue]);
+  const elements = useMemo2(() => state.elements.map(fromWireElement), [state.elements]);
+  const resolvedTheme = theme ?? "light";
+  const [ready, setReady] = useState5(null);
+  const [presentedState, setPresentedState] = useState5(null);
+  const handleReady = useCallback3((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)}`);
+  }
+  useEffect5(() => {
+    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]);
+  useEffect5(() => {
+    if (presentedState !== state || onPresented === void 0) return;
+    onPresented(state);
+  }, [onPresented, presentedState, state]);
+  return /* @__PURE__ */ jsx6(WhiteboardView, { canDraw: false, className: cn("h-full w-full !min-h-0 !border-0", className), excalidrawCssPath, onExcalidrawApiReady: handleReady, onLoadError, theme: resolvedTheme });
+}
+RecordingWhiteboardView.displayName = "RecordingWhiteboardView";
+
+export {
+  Entrance,
+  FeedbackDialog,
+  Chalk,
+  RecordingSpaceView,
+  RecordingHistoryPanel,
+  RecordingWhiteboardView
+};