@devaccel-labs/app-comments-toolbar 1.0.0 → 1.3.0

package/src/runtime/session-source.ts

@@ -0,0 +1,112 @@
+/**
+ * The host session (which comment service, project and environment, and the 15-minute host token) and the
+ * cache that reuses it until the token is about to expire. DOM-free: the web toolbar loads the session route
+ * with `fetch` from the page (`./session.ts`); native clients load it with the app's own bearer auth.
+ */
+export type Session = {
+  apiUrl: string;
+  project: string;
+  environment: string;
+  hostToken: string;
+  /**
+   * Native clients only: their app origin (`<scheme>://app`), sent as `x-comment-service-origin` on every
+   * request. Web leaves it unset; the browser sends `Origin`.
+   */
+  clientOrigin?: string;
+  /**
+   * Web, script-tag loader only (`../embed`): the origin the session route says `embed.js` may be loaded from
+   * when that is not `apiUrl`'s origin. Without it the loader mounts nothing for such a session.
+   */
+  loaderOrigin?: string;
+};
+
+/** Returns this page's session, or null when comments are off. `refresh` skips the cached one. */
+export type GetSession = (options?: { refresh?: boolean }) => Promise<Session | null>;
+
+/** A cached host token is replaced this long before it expires, so a request never carries an expired one. */
+const EXPIRY_MARGIN_MS = 60_000;
+/** Host tokens last 15 minutes. If one carries no expiry, reuse it for less than that. */
+const UNKNOWN_EXPIRY_MS = 5 * 60_000;
+
+export function readJwt(token: string): {
+  exp?: number;
+  typ?: string;
+  name?: string;
+  email?: string;
+  memberId?: string;
+  origin?: string;
+} | null {
+  try {
+    const part = token.split(".")[1];
+    if (!part) return null;
+    const pad = part.length % 4 === 0 ? "" : "=".repeat(4 - (part.length % 4));
+    return JSON.parse(atob(part.replaceAll("-", "+").replaceAll("_", "/") + pad)) as {
+      exp?: number;
+      typ?: string;
+      name?: string;
+      email?: string;
+      memberId?: string;
+      origin?: string;
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function sessionFrom(payload: unknown): Session | null {
+  const value = payload as Partial<Session> & { enabled?: boolean };
+  if (!value?.enabled || !value.apiUrl || !value.project || !value.environment || !value.hostToken)
+    return null;
+  return {
+    apiUrl: value.apiUrl,
+    project: value.project,
+    environment: value.environment,
+    hostToken: value.hostToken,
+    ...(typeof value.loaderOrigin === "string" ? { loaderOrigin: value.loaderOrigin } : {}),
+  };
+}
+
+/**
+ * The session route answered, and its answer was "comments are off" with a reason (`{ enabled: false, error }`),
+ * most often because nobody is signed in. Not a failure to reach it.
+ */
+export class SessionOff extends Error {}
+
+/**
+ * Reads the session route at most once at a time and reuses the answer until its host token is about to expire.
+ * "Comments are off" is kept for the source's lifetime. A failed request is not kept, so the next call retries.
+ */
+export function sessionSource(
+  path: string,
+  load: (path: string) => Promise<unknown>,
+  now = Date.now,
+): GetSession {
+  let kept: { session: Session | null; until: number } | null = null;
+  let pending: Promise<Session | null> | null = null;
+  return ({ refresh = false } = {}) => {
+    if (!refresh && kept && now() < kept.until) return Promise.resolve(kept.session);
+    if (pending) return pending;
+    pending = load(path)
+      .then((payload) => {
+        const failed = payload as { enabled?: boolean; error?: unknown };
+        if (failed && failed.enabled === false && failed.error) {
+          throw new SessionOff(
+            typeof failed.error === "string" ? failed.error : "Comment service is unreachable.",
+          );
+        }
+        const session = sessionFrom(payload);
+        const expires = session ? readJwt(session.hostToken)?.exp : undefined;
+        const until = !session
+          ? Infinity
+          : expires
+            ? expires * 1000 - EXPIRY_MARGIN_MS
+            : now() + UNKNOWN_EXPIRY_MS;
+        kept = { session, until };
+        return session;
+      })
+      .finally(() => {
+        pending = null;
+      });
+    return pending;
+  };
+}

package/src/runtime/session.ts

@@ -0,0 +1,108 @@
+import {
+  sessionSource as cachedSession,
+  SessionOff,
+  type GetSession,
+  type Session,
+} from "./session-source.js";
+
+// Everything but `sessionSource`, which this file wraps with the page's own fetch.
+export { readJwt, sessionFrom, SessionOff } from "./session-source.js";
+export type { GetSession, Session } from "./session-source.js";
+
+/** Where the toolbar keeps a person's sign-in: `devaccel.comment.<apiUrl>.<project>.<environment>`. */
+const SIGN_IN_PREFIX = "devaccel.comment.http";
+
+/**
+ * Forgets every toolbar sign-in this page's origin holds. Run when the host app says nobody is signed in: a
+ * sign-in is kept per browser, not per person of the host app, so the next person to sign in to the app must
+ * not find the last one's.
+ */
+export function forgetSignIns(storage: Storage = localStorage): void {
+  try {
+    for (let index = storage.length - 1; index >= 0; index--) {
+      const key = storage.key(index);
+      if (key?.startsWith(SIGN_IN_PREFIX)) storage.removeItem(key);
+    }
+  } catch {
+    // Storage the page may not use holds no sign-in either.
+  }
+}
+
+const reported = new Set<string>();
+
+/** One console line per distinct answer per page: what the route said when it did not turn comments on. */
+function report(path: string, status: number, error: unknown, failed: boolean) {
+  const said = typeof error === "string" ? `: ${error}` : failed ? "." : " with comments off.";
+  const line = `[comment-service] ${path} answered ${status}${said}`;
+  if (reported.has(line)) return;
+  reported.add(line);
+  if (failed) console.warn(line);
+  else console.info(line);
+}
+
+/**
+ * The session route's answer. `2xx` is the answer as it is. `401` and `403` are "nobody is signed in" from a
+ * route that says so with a status. Anything else is a route that failed, which is not an answer about the
+ * person: it rejects, and comments stay as they were.
+ */
+async function fetchSession(path: string): Promise<unknown> {
+  const response = await fetch(path, {
+    headers: { accept: "application/json", "x-comment-service-origin": window.location.origin },
+    cache: "no-store",
+  });
+  const payload = (await response.json().catch(() => null)) as {
+    enabled?: unknown;
+    error?: unknown;
+  } | null;
+  const off = response.status === 401 || response.status === 403;
+  if (!response.ok && !off) {
+    report(path, response.status, payload?.error, true);
+    throw new Error(`The session route answered ${response.status}.`);
+  }
+  if (off || payload?.enabled !== true) {
+    report(path, response.status, payload?.error, false);
+    forgetSignIns();
+    return { enabled: false };
+  }
+  return payload;
+}
+
+/**
+ * Reads the session route at most once at a time and reuses the answer until its host token is about to expire.
+ * "Comments are off" is kept for the page's lifetime. A failed request is not kept, so the next call retries.
+ */
+export function sessionSource(
+  path: string,
+  load: (path: string) => Promise<unknown> = fetchSession,
+  now = Date.now,
+): GetSession {
+  return cachedSession(path, load, now);
+}
+
+const sources = new Map<string, GetSession>();
+
+/** The page-wide session source for a session route path. */
+export function sessionFor(path: string): GetSession {
+  let source = sources.get(path);
+  if (!source) {
+    source = sessionSource(path);
+    sources.set(path, source);
+  }
+  return source;
+}
+
+/** What the host app says now: comments are on (with the session), off, or it could not be asked. */
+export type HostAnswer =
+  | { readonly state: "on"; readonly session: Session }
+  | { readonly state: "off" }
+  | { readonly state: "unknown" };
+
+/** Asks the session route again, past any kept answer, or takes the kept one when `fresh` is false. */
+export async function askHost(get: GetSession, fresh = true): Promise<HostAnswer> {
+  try {
+    const session = await get({ refresh: fresh });
+    return session ? { state: "on", session } : { state: "off" };
+  } catch (caught) {
+    return caught instanceof SessionOff ? { state: "off" } : { state: "unknown" };
+  }
+}

package/src/runtime/shield.ts

@@ -0,0 +1,34 @@
+const TEXT_CONTROL = "input, textarea, select, [contenteditable]";
+
+function inToolbar(node: EventTarget | null) {
+  return node instanceof Element && Boolean(node.closest("#cs-root"));
+}
+
+/**
+ * Keeps the page from reacting to the toolbar. Presses on the toolbar never reach the page, so an open menu,
+ * popover, or dialog does not treat them as an outside press, and buttons do not pull focus out of it. Focus
+ * moving into the toolbar is hidden from document-level focus traps (Radix FocusScope listens for focusin and
+ * focusout on document), which would otherwise pull it straight back into an open modal so the composer never
+ * takes input. The focus listeners sit on document, so the page's and the toolbar's own React handlers still
+ * run; call this before any app dialog opens so stopImmediatePropagation runs ahead of the trap's listeners.
+ */
+export function shieldFromPage() {
+  const press = (event: Event) => {
+    const target = event.target;
+    if (!(target instanceof Element) || !inToolbar(target)) return;
+    event.stopPropagation();
+    if (event.type === "mousedown" && !target.closest(TEXT_CONTROL)) event.preventDefault();
+  };
+  const focus = (event: Event) => {
+    const into = event.type === "focusin" ? event.target : (event as FocusEvent).relatedTarget;
+    if (inToolbar(into)) event.stopImmediatePropagation();
+  };
+  const presses = ["pointerdown", "mousedown", "touchstart"];
+  const focuses = ["focusin", "focusout"];
+  for (const type of presses) window.addEventListener(type, press, true);
+  for (const type of focuses) document.addEventListener(type, focus);
+  return () => {
+    for (const type of presses) window.removeEventListener(type, press, true);
+    for (const type of focuses) document.removeEventListener(type, focus);
+  };
+}

package/src/runtime/shot.tsx

@@ -0,0 +1,422 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import {
+  ATTACHMENT_MAX_BYTES,
+  isReplayFile,
+  type Pending,
+  type PreviewFile,
+} from "./attachments.js";
+import * as Icon from "./icons.js";
+import { flattenMarkup, loadImage, type MarkupShape } from "./markup.js";
+import { MarkupEditor, type MarkupResult } from "./markup-editor.js";
+import { formatClock } from "./record.js";
+import {
+  parseReplay,
+  replayLine,
+  replayStamp,
+  type ReplayEvent,
+  type ReplayFile,
+} from "./replay.js";
+
+/** The captures a draft holds: pictures (marked up on the stage) and clips. */
+export type ShotCapture = PreviewFile;
+
+function ago(at: number | null) {
+  if (!at) return "Saving…";
+  const seconds = Math.max(0, Math.round((Date.now() - at) / 1000));
+  if (seconds < 8) return "Saved just now";
+  if (seconds < 60) return `Saved ${seconds}s ago`;
+  return `Saved ${Math.round(seconds / 60)} min ago`;
+}
+
+function sameShapes(a: MarkupShape[], b: MarkupShape[]) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
+/**
+ * The flattened picture `item` needs before it is sent, given the shapes drawn on it: null when the file already
+ * shows them, the original when every shape is gone, else a fresh flatten. Rejects when the image can't be read.
+ */
+export async function flattenCapture(
+  item: Pending,
+  shapes: MarkupShape[],
+): Promise<MarkupResult | null> {
+  if (!item.contentType.startsWith("image/")) return null;
+  if (sameShapes(shapes, item.markup?.shapes ?? [])) return null;
+  const name = item.markup?.name ?? item.name;
+  if (!shapes.length) return { blob: null, name, shapes: [] };
+  const url = item.markup?.url ?? item.preview;
+  if (!url) return null;
+  const image = await loadImage(url);
+  const flat = await flattenMarkup({
+    image,
+    width: image.naturalWidth,
+    height: image.naturalHeight,
+    shapes,
+    name,
+    maxBytes: ATTACHMENT_MAX_BYTES,
+  });
+  return { blob: flat.blob, name: flat.name, shapes };
+}
+
+/** Where an event sits on a clip's timeline, 0..1, or null when it falls outside the clip. */
+export function timelinePosition(
+  event: ReplayEvent,
+  clip: { startedAt: number; durationMs: number },
+) {
+  const at = (event.t - clip.startedAt) / clip.durationMs;
+  return at >= 0 && at <= 1 ? at : null;
+}
+
+function markerKind(event: ReplayEvent) {
+  if (event.type === "console" && event.level === "error") return "error";
+  if (event.type === "network") return "error";
+  if (event.type === "navigate") return "navigate";
+  if (event.type === "console") return "warn";
+  if (event.type === "say") return "say";
+  return "action";
+}
+
+/**
+ * A clip on the stage with what happened in it underneath: clicks, page changes, errors and failed requests
+ * from the replay that was kept beside it, on the clip's clock. A marker seeks the clip; the line under the
+ * playhead names the latest event.
+ */
+function ClipStage({ clip, replay }: { clip: ShotCapture; replay: ShotCapture | null }) {
+  const video = useRef<HTMLVideoElement>(null);
+  // Tagged with the replay it came from, so a replay still loading reads as none rather than the last one's.
+  const [loaded, setLoaded] = useState<{ id: string; file: ReplayFile | null } | null>(null);
+  const [time, setTime] = useState(0);
+  useEffect(() => {
+    if (!replay) return;
+    const id = replay.id;
+    let stale = false;
+    fetch(replay.url)
+      .then((response) => (response.ok ? response.json() : null))
+      .then((body: unknown) => {
+        if (!stale) setLoaded({ id, file: parseReplay(body) });
+      })
+      .catch(() => {
+        if (!stale) setLoaded({ id, file: null });
+      });
+    return () => {
+      stale = true;
+    };
+  }, [replay]);
+  const file = replay && loaded?.id === replay.id ? loaded.file : null;
+  const timeline = file?.clip
+    ? { startedAt: file.clip.startedAt, durationMs: file.clip.durationMs }
+    : null;
+  const events = timeline
+    ? file!.events
+        .map((event) => ({ event, at: timelinePosition(event, timeline) }))
+        .filter((item): item is { event: ReplayEvent; at: number } => item.at !== null)
+    : [];
+  const seek = (at: number) => {
+    const node = video.current;
+    if (!node || !timeline) return;
+    const seconds = (at * timeline.durationMs) / 1000;
+    node.currentTime = Math.max(0, Math.min(node.duration || seconds, seconds));
+    setTime(node.currentTime);
+  };
+  const played = timeline ? (time * 1000) / timeline.durationMs : 0;
+  const latest = timeline
+    ? [...events].reverse().find((item) => item.at <= played + 0.002)?.event
+    : undefined;
+  const errors = events.filter((item) => markerKind(item.event) === "error").length;
+  return (
+    <div className="cs-shot-clip-stage" data-cs-ui="shot-clip">
+      <video
+        ref={video}
+        key={clip.id}
+        src={clip.url}
+        controls
+        playsInline
+        preload="metadata"
+        onTimeUpdate={(event) => setTime(event.currentTarget.currentTime)}
+      />
+      {timeline ? (
+        <div className="cs-timeline" data-cs-ui="clip-timeline">
+          <div className="cs-timeline-track" role="list" aria-label="What happened in this clip">
+            <span
+              className="cs-timeline-played"
+              style={{ width: `${Math.min(100, played * 100)}%` }}
+            />
+            {events.map(({ event, at }, index) => (
+              <button
+                key={`${event.t}-${index}`}
+                type="button"
+                role="listitem"
+                className={`cs-timeline-mark is-${markerKind(event)}`}
+                style={{ left: `${at * 100}%` }}
+                title={`${formatClock(at * timeline.durationMs)} · ${replayLine(event)}`}
+                aria-label={`${formatClock(at * timeline.durationMs)}: ${replayLine(event)}`}
+                data-cs-ui="clip-mark"
+                onClick={() => seek(at)}
+              />
+            ))}
+          </div>
+          <div className="cs-timeline-line">
+            <span className="cs-timeline-time">{formatClock(time * 1000)}</span>
+            <span className="cs-timeline-text" data-cs-ui="clip-latest">
+              {latest ? replayLine(latest) : "Play, or pick a marker, to follow what happened."}
+            </span>
+            <span className="cs-timeline-count">
+              {events.length} event{events.length === 1 ? "" : "s"}
+              {errors ? ` · ${errors} error${errors === 1 ? "" : "s"}` : ""}
+            </span>
+          </div>
+        </div>
+      ) : replay ? (
+        <p className="cs-markup-status">Reading what happened in this clip…</p>
+      ) : (
+        <p className="cs-markup-status">No replay was kept with this clip.</p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * A draft of captures as a comment: the selected capture fills the surface (a picture with the markup tools live
+ * on it, or a clip playing), the others sit in a filmstrip, and the composer (`children`) is a column beside it.
+ * Nothing has to be typed, and there is no Done to press: posting flattens whatever was drawn (see the composer's
+ * submit in `toolbar.tsx`). "Another page" and "Record" minimise the surface to the dock so the draft can collect
+ * more from elsewhere in the app.
+ */
+export function ShotSurface({
+  captures,
+  selectedId,
+  shapes,
+  savedAt,
+  onSelect,
+  onRemove,
+  onShapes,
+  onAnother,
+  onRecord,
+  onDictate,
+  dictating,
+  onMinimise,
+  onDiscard,
+  confirmDiscard,
+  onSubmit,
+  children,
+}: {
+  captures: ShotCapture[];
+  selectedId: string | null;
+  /** Shapes drawn on each picture so far, by capture id; a picture not listed shows its flattened shapes. */
+  shapes: ReadonlyMap<string, MarkupShape[]>;
+  savedAt: number | null;
+  onSelect: (id: string) => void;
+  onRemove: (id: string) => void;
+  onShapes: (id: string, shapes: MarkupShape[]) => void;
+  onAnother: () => void;
+  onRecord: () => void;
+  /** Starts (or stops) typing what the person says into the comment; absent when dictation is not available. */
+  onDictate?: (() => void) | undefined;
+  dictating?: boolean | undefined;
+  onMinimise: () => void;
+  onDiscard: () => void;
+  confirmDiscard: boolean;
+  /** Cmd+Enter on the picture: post, as it does in the comment box. */
+  onSubmit: () => void;
+  children: ReactNode;
+}) {
+  // Replays kept beside a clip are not captures of their own; they ride on the clip's slide.
+  const companions = captures.filter(isReplayFile);
+  const shown = captures.filter((item) => !isReplayFile(item));
+  const selected = shown.find((item) => item.id === selectedId) ?? shown[0] ?? null;
+  const pictures = shown.filter((item) => item.contentType.startsWith("image/")).length;
+  const clips = shown.filter((item) => item.contentType.startsWith("video/")).length;
+  const companionOf = (clip: ShotCapture) => {
+    const stamp = replayStamp(clip.name);
+    return stamp ? (companions.find((item) => replayStamp(item.name) === stamp) ?? null) : null;
+  };
+  const ribbon = (
+    <>
+      <div className="cs-ribbon-group">
+        <div className="cs-ribbon-row">
+          <button
+            className="cs-ribbon-big"
+            type="button"
+            data-cs-ui="shot-another"
+            title="Minimises this; go to any page and press S to add it"
+            onClick={onAnother}
+          >
+            <Icon.Camera size={16} />
+            <span>Another page</span>
+          </button>
+          <button
+            className="cs-ribbon-big"
+            type="button"
+            data-cs-ui="shot-record"
+            title="Records this tab into the draft, with what happens on the page"
+            onClick={onRecord}
+          >
+            <Icon.Record />
+            <span>Record</span>
+          </button>
+          {onDictate ? (
+            <button
+              className="cs-ribbon-big"
+              type="button"
+              data-cs-ui="shot-dictate"
+              aria-pressed={Boolean(dictating)}
+              title="Type what you say into the comment"
+              onClick={onDictate}
+            >
+              <Icon.Mic />
+              <span>{dictating ? "Listening…" : "Dictate"}</span>
+            </button>
+          ) : null}
+        </div>
+        <div className="cs-ribbon-name">Add</div>
+      </div>
+      {selected ? (
+        <div className="cs-ribbon-group">
+          <div className="cs-ribbon-row cs-ribbon-stack">
+            <button
+              className="cs-ribbon-small"
+              type="button"
+              data-cs-ui="shot-remove-selected"
+              onClick={() => onRemove(selected.id)}
+            >
+              <Icon.Trash />
+              Remove this capture
+            </button>
+            <span className="cs-ribbon-text">
+              {pictures ? `${pictures} picture${pictures === 1 ? "" : "s"}` : "No pictures"}
+              {clips ? ` · ${clips} clip${clips === 1 ? "" : "s"}` : ""}
+              {companions.length
+                ? ` · ${companions.length} replay${companions.length === 1 ? "" : "s"}`
+                : ""}
+            </span>
+          </div>
+          <div className="cs-ribbon-name">This draft</div>
+        </div>
+      ) : null}
+    </>
+  );
+  return (
+    <>
+      <div className="cs-shot-scrim cs-hit" data-cs-ui="shot-scrim" onClick={onMinimise} />
+      <section
+        className="cs-card cs-shot cs-hit"
+        data-cs-ui="shot"
+        aria-label="Comment on captures of this app"
+      >
+        <header className="cs-shot-head">
+          <span className="cs-shot-title">
+            <Icon.Camera size={12} />
+            <strong>Draft</strong>
+            <span className="cs-shot-count">
+              {pictures ? `${pictures} picture${pictures === 1 ? "" : "s"}` : ""}
+              {pictures && clips ? " · " : ""}
+              {clips ? `${clips} clip${clips === 1 ? "" : "s"}` : ""}
+            </span>
+            <span className="cs-shot-saved" data-cs-ui="shot-saved">
+              <i aria-hidden="true" />
+              {ago(savedAt)}
+            </span>
+          </span>
+          <span className="cs-shot-spacer" />
+          <button
+            className={`cs-button${confirmDiscard ? " is-danger" : ""}`}
+            type="button"
+            data-cs-ui="shot-discard"
+            title="Throw this draft away"
+            onClick={onDiscard}
+          >
+            {confirmDiscard ? "Discard?" : <Icon.Trash />}
+          </button>
+          <button
+            className="cs-icon-button"
+            type="button"
+            data-cs-ui="shot-minimise"
+            aria-label="Minimise. The draft stays, and follows you."
+            title="Minimise (the draft stays)"
+            onClick={onMinimise}
+          >
+            <Icon.ChevronDown />
+          </button>
+        </header>
+        <div className="cs-shot-body">
+          {/* The film only earns its width with two or more captures; one is the picture on the stage. */}
+          {shown.length > 1 ? (
+            <aside
+              className="cs-shot-film"
+              data-cs-ui="shot-film"
+              aria-label="Captures in this draft"
+            >
+              {shown.map((item, index) => {
+                const video = item.contentType.startsWith("video/");
+                const on = selected?.id === item.id;
+                return (
+                  <div
+                    key={item.id}
+                    className={`cs-shot-slide${on ? " is-on" : ""}`}
+                    data-cs-ui="shot-slide"
+                    data-kind={video ? "clip" : "picture"}
+                  >
+                    <button
+                      type="button"
+                      className="cs-shot-thumb"
+                      aria-label={`Show ${item.name}`}
+                      aria-pressed={on}
+                      onClick={() => onSelect(item.id)}
+                    >
+                      {video ? (
+                        <video src={item.url} muted preload="metadata" />
+                      ) : (
+                        <img src={item.url} alt="" draggable={false} />
+                      )}
+                      {video ? <span className="cs-shot-clip">▶</span> : null}
+                    </button>
+                    <span className="cs-shot-cap">
+                      <b>{index + 1}</b>
+                      {video ? "Clip" : "Picture"}
+                    </span>
+                    <button
+                      type="button"
+                      className="cs-shot-remove"
+                      aria-label={`Remove ${item.name} from the draft`}
+                      onClick={() => onRemove(item.id)}
+                    >
+                      <Icon.Close />
+                    </button>
+                  </div>
+                );
+              })}
+              <button type="button" className="cs-shot-add" onClick={onAnother}>
+                + Another page
+              </button>
+            </aside>
+          ) : null}
+          <div className="cs-shot-stage cs-media">
+            {selected?.contentType.startsWith("image/") && selected.markup ? (
+              <MarkupEditor
+                // Keyed on the original, which outlives every flattened copy, so a save never remounts the tools.
+                key={selected.markup.src}
+                mode="inline"
+                src={selected.markup.src}
+                name={selected.markup.name}
+                shapes={shapes.get(selected.id) ?? selected.markup.shapes}
+                maxBytes={ATTACHMENT_MAX_BYTES}
+                ribbon={ribbon}
+                onChange={(next) => onShapes(selected.id, next)}
+                onCancel={onMinimise}
+                onSave={() => {}}
+                onSubmit={onSubmit}
+              />
+            ) : selected?.contentType.startsWith("video/") ? (
+              <ClipStage clip={selected} replay={companionOf(selected)} />
+            ) : (
+              <p className="cs-markup-status">Nothing captured yet. Press S on any page.</p>
+            )}
+          </div>
+          <aside className="cs-shot-side" data-cs-ui="shot-side">
+            {children}
+          </aside>
+        </div>
+      </section>
+    </>
+  );
+}