@q9labsai/chalk-react 5.1.0 → 5.2.1

package/CHANGELOG.md

@@ -1,5 +1,107 @@
 # Changelog
 
+## 5.2.0
+
+### board-draw-policy
+
+Add a call-wide drawing policy for the board: everyone, only hosts, or picked people.
+Hosts set it with `setDrawPolicy` on the whiteboard transport and pick people with the
+existing `setDrawPermission`. Sync computes each person's permission and sends it with
+the policy over the new `draw_policy_v1` extension, so the summary and
+`useWhiteboard().access` now carry `canDraw`, `drawPolicy` and the host's per-person
+choices. The React board follows that permission instead of the role capability, and
+hosts get a "Who can draw" section with a person picker in the board menu.
+
+The whiteboard client now steps its hello down only when Sync can't decode it (close
+1009). A rejected token or a late hello (close 1008) is retried at the same level up to
+four times, so a brief token problem no longer hides the drawing policy for the rest of
+the connection. On a Sync without the drawing policy, a host's waiting policy change is
+refused as `unavailable`, and also reported on the summary, instead of being replayed.
+
+### board-frame-clock
+
+Keep Follow active when Bring everyone moves to a wider board view, without a brief zoom overshoot at the start of the animation.
+
+### board-stage-motion
+
+Keep the live whiteboard free of stage translation and scaling animations so
+switching between a participant and the board preserves the full canvas and
+accurate drawing coordinates. Other stage tiles keep their existing motion.
+
+### brand-single-chalk-mark
+
+Replace the retired colourful four-stick logo with the monochrome single chalk stick and dust in the distributed SVG assets and React Logo variants. Preserve existing asset filenames and component props. The React Logo now takes its default colour from the surrounding text colour.
+
+### follow-view-owner
+
+Converge Follow views on one Episode owner, recover from its canonical snapshot,
+and preserve real camera moves during recovery and tab switches. Zoom controls
+and keyboard moves now consistently leave Follow and lead the person's view.
+
+Keep all 500 active people's views using internal schema-generated limits in the client and React caches. The client's public bounds, event unions and decoded-frame unions are unchanged. The client now exports `ChalkWhiteboardViewVersions`, which the React SDK uses to order view moves, and whiteboard view events now carry `ownerId`, `ownerSequence` and `originEpoch`, so both releases are minor.
+
+### phone-board-notices-next-release
+
+Float faces over a phone board, and keep call notices off the call's controls.
+On a phone, an open board now fills the stage and up to three faces float at
+its right edge, with short name tags. Notices sit between the header and the
+controls under them. A call shorter than 620px, such as a landscape phone or a
+short embedded call, puts every notice in a notice button in the header, which
+lists each one whole and announces it once to screen readers; a taller call
+shows the newest three and puts older ones in the button. A notice in the
+button starts its timer only once it shows. The header stays visible while
+the button holds notices. Long names, links and error tokens wrap inside
+their notice, and a long call name shortens to make room for the timer and
+the notice button. A screen share beside a short board always keeps its own
+tile when there is no explicit cap. A capped strip or floating column counts
+shared content and its overflow button against that cap; folded shares stay
+readable in the shared-content overflow. One text-only announcer handles
+notice speech independently of its stage or header presentation.
+
+New optional props: `ToastStackProps.onFold` reports the ids of the notices
+the stage has no room for, `ChalkToastProps.announce` lets a host that already
+announced a notice keep its toast quiet, and `SpaceHeaderProps.notices` places
+a control before the people button.
+
+### problem-reporting
+
+Add the problem-report API contract and reusable report dialog, with opt-in diagnostics,
+editable delivery failures and bounded Unicode input. Call details and failed or ended
+call screens can expose reporting when an integration supplies a delivery callback.
+Use `reportUnavailableReason` to show expired access inside an editable report.
+Live report drafts survive call termination. Integrations with their own terminal
+screens can use `onOpenReportProblem` to keep one app-owned dialog across those screens.
+Give `ReportProblemDialog` a `focusScope` containing the current call or terminal screen,
+so closing it returns focus to its usable opener, or to a visible current control
+when the opener has disappeared. Hidden, inert and disabled targets are skipped.
+
+### recording-auto-render
+
+Expose recording expiry reasons through additive failure fields while preserving the existing export status enum.
+
+Add the Tenant recording_render_mode setting, defaulting to on_demand, with opt-in automatic MP4 rendering.
+
+### safe-media-command-guidance
+
+Show safe, source-aware guidance for media command failures across call controls,
+keyboard shortcuts, screen sharing, and media request dialogs. Preserve the
+existing onCommandError MediaSource argument and provide extended media context
+in an optional third argument. Keep disable-failure wording neutral and explain
+unsupported speaker selection without suggesting a retry. Preserve start/stop
+intent in failure guidance and retries; show terminal guidance for withdrawn
+media requests and other non-recoverable failures.
+
+Distinguish device selection, speaker tests, and incoming requests in media error
+guidance. Cover every client failure code with an operation-aware policy and only
+offer retry when the exact failed media command can be replayed.
+
+Preserve request context in the integrated Chalk dialog and show safe terminal
+guidance without retry for unknown runtime failure codes.
+
+### sync-connect-diagnostics
+
+Report Sync connection failures with the existing `connection.sync_hello_timeout` code without adding values to the public `ErrorCode` union. Add the current attempt's safe diagnostics to client errors, telemetry, and the call failure reference: opening/hello stage, close code and bounded reason, whether the socket opened, and elapsed time. Earlier attempts remain in the diagnostic history. Browsers do not expose DNS, TCP, or TLS progress. Unrecognized peer reasons are redacted. This is a compatible patch for the next client and React releases; released 5.1.0 files are unchanged.
+
 ## 5.1.0
 
 - Add optional `CallLimbo.className` for the message card, so a host can size the card around a form.

package/dist/bindings/hooks.d.ts

@@ -21,6 +21,8 @@ export declare function useReactions(): ReactionsSlice;
 export declare function useRecording(): RecordingSlice;
 export declare function useWhiteboard(): WhiteboardSlice;
 export declare function useCan(capability: Capability): boolean;
+/** Whether this person can draw on the board. Sync decides from the call's policy, their role and the host's choice for them; until the board subscription is live, the role default stands in. A Sync without the drawing policy doesn't report role changes to the board, so there the live role still limits drawing. */
+export declare function useCanDrawWhiteboard(): boolean;
 /** Local capture state and the action that opens the browser's share picker. */
 export declare function useScreenShare(): {
     source: import("@q9labsai/chalk-client").MediaSource;

package/dist/{chunk-QDEKMRH2.js → chunk-53ZA776J.js}

@@ -28,17 +28,19 @@ import {
   StatusSurface,
   WhiteboardView,
   chalkThemeStyle,
+  commandFailure,
   useCan,
+  useCanDrawWhiteboard,
   useConnection,
   useMedia,
   useRecording,
   useSpaceClient,
   useWhiteboard
-} from "./chunk-XOHNIYSR.js";
+} from "./chunk-RQXFFDOS.js";
 import {
   WHITEBOARD_ITEM_ID,
   screenShareItemId
-} from "./chunk-ZFWIMKUC.js";
+} from "./chunk-HWQLW4JR.js";
 import {
   Download01Icon,
   FileTextIcon,
@@ -208,10 +210,10 @@ function Chalk(props) {
     props.onColorSchemeChange?.(next);
   };
   const [reportOpen, setReportOpen] = useState2(false);
-  const reportTrigger = useRef(null);
-  const openReport = props.onReportProblem ? () => {
-    reportTrigger.current = document.activeElement instanceof HTMLButtonElement ? document.activeElement : null;
-    setReportOpen(true);
+  const container = useRef(null);
+  const openReport = props.onReportProblem && !props.reportUnavailableReason ? () => {
+    if (props.onOpenReportProblem) props.onOpenReportProblem();
+    else setReportOpen(true);
   } : void 0;
   const suppliedClient = props.client;
   const getAccessRef = useRef(props.getAccess);
@@ -233,12 +235,23 @@ function Chalk(props) {
       void ownedClient.leave().catch(() => void 0).finally(() => ownedClient.dispose());
     };
   }, [ownedClient]);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { "data-chalk": true, "data-chalk-theme": colorScheme, className: "chalk-root h-full min-h-0 w-full", style: chalkThemeStyle(props.theme, colorScheme), children: /* @__PURE__ */ jsxs(ChalkProvider, { client, children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { ref: container, "data-chalk": true, "data-chalk-theme": colorScheme, className: "chalk-root h-full min-h-0 w-full", style: chalkThemeStyle(props.theme, colorScheme), children: /* @__PURE__ */ jsxs(ChalkProvider, { client, children: [
     /* @__PURE__ */ jsx(SpaceExperience, { ...props, theme: { ...props.theme, colorScheme }, onColorSchemeChange: changeColorScheme, resolvedColorScheme: colorScheme, onOpenReport: openReport }),
-    props.onReportProblem ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.onReportProblem && !props.onOpenReportProblem ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ShellStyles, {}),
-      /* @__PURE__ */ jsx(CallDialog, { kind: "report", open: reportOpen, onClose: () => setReportOpen(false), onReportProblem: props.onReportProblem, diagnostics: `Call: ${props.spaceName ?? props.space ?? "Call"}
-Status: ${client.getSnapshot().connection.status}`, returnFocus: reportTrigger })
+      /* @__PURE__ */ jsx(
+        CallDialog,
+        {
+          kind: "report",
+          open: reportOpen,
+          onClose: () => setReportOpen(false),
+          onReportProblem: props.onReportProblem,
+          unavailableReason: props.reportUnavailableReason,
+          diagnostics: `Call: ${props.spaceName ?? props.space ?? "Call"}
+Status: ${client.getSnapshot().connection.status}`,
+          focusScope: container
+        }
+      )
     ] }) : null
   ] }) }) });
 }
@@ -252,7 +265,7 @@ function SpaceExperience(props) {
   const previousClient = useRef(client);
   const [joinError, setJoinError] = useState2(null);
   const [retryPending, setRetryPending] = useState2(false);
-  const [episodeEnded, setEpisodeEnded] = useState2(false);
+  const [episodeEnded, setEpisodeEnded] = useState2(connection.episodeEnded);
   const [handledTerminal, setHandledTerminal] = useState2(void 0);
   useEffect2(() => setHandledTerminal(void 0), [props.terminalState]);
   const spaceName = props.spaceName ?? props.space ?? "Space";
@@ -310,12 +323,26 @@ function SpaceExperience(props) {
   if (connection.status === "idle")
     return /* @__PURE__ */ jsx(CallLimbo, { theme: { ...props.theme, colorScheme: props.resolvedColorScheme }, recorded, spaceName, message: joinError ?? `Joining ${spaceName}\u2026`, action: joinError ? { label: "Try again", onClick: retryAutomaticJoin, disabled: retryPending } : void 0 });
   if (connection.status === "joining") return /* @__PURE__ */ jsx(CallLimbo, { theme: { ...props.theme, colorScheme: props.resolvedColorScheme }, recorded, spaceName, message: `Joining ${spaceName}\u2026` });
-  if (connection.status === "failed" && connection.lastError?.code === "episode.ended") return /* @__PURE__ */ jsx(StatusSurface, { phase: "episode-ended", callName, theme: statusTheme, onHome: props.onHome, onReportProblem: props.onOpenReport });
+  if (connection.status === "failed" && connection.lastError?.code === "episode.ended")
+    return /* @__PURE__ */ jsx(StatusSurface, { phase: "episode-ended", callName, episodeEndReason: connection.episodeEndReason, endAction: props.timeLimit?.endAction, theme: statusTheme, onHome: props.onHome, onReportProblem: props.onOpenReport });
   if (connection.status === "failed") {
-    return /* @__PURE__ */ jsx(StatusSurface, { phase: "failed", callName, errorCode: connection.lastError?.code, theme: statusTheme, onHome: props.onHome, onReportProblem: props.onOpenReport, onRetry: retryAutomaticJoin, retryPending });
+    return /* @__PURE__ */ jsx(StatusSurface, { phase: "failed", callName, errorCode: connection.lastError?.code, sync: connection.lastError?.sync, theme: statusTheme, onHome: props.onHome, onReportProblem: props.onOpenReport, onRetry: retryAutomaticJoin, retryPending });
   }
   if (connection.status === "leaving" || connection.status === "left")
-    return /* @__PURE__ */ jsx(StatusSurface, { phase: episodeEnded ? "episode-ended" : "left", callName, theme: statusTheme, onReportProblem: props.onOpenReport, onRejoin: props.onRejoin ?? retryAutomaticJoin, rejoinDisabled: connection.status === "leaving" || retryPending, onHome: props.onHome });
+    return /* @__PURE__ */ jsx(
+      StatusSurface,
+      {
+        phase: episodeEnded || connection.episodeEnded ? "episode-ended" : "left",
+        episodeEndReason: connection.episodeEndReason,
+        endAction: props.timeLimit?.endAction,
+        callName,
+        theme: statusTheme,
+        onReportProblem: connection.status === "leaving" ? void 0 : props.onOpenReport,
+        onRejoin: props.onRejoin ?? retryAutomaticJoin,
+        rejoinDisabled: connection.status === "leaving" || retryPending,
+        onHome: props.onHome
+      }
+    );
   return /* @__PURE__ */ jsxs("div", { className: "relative h-full min-h-0", children: [
     /* @__PURE__ */ jsx(SpaceSurface, { ...props, spaceName }),
     /* @__PURE__ */ jsx(CallLimbo, { overlay: true, active: false, initiallyCovered: true, message: "" })
@@ -327,14 +354,20 @@ function SpaceSurface(props) {
   const media = useMedia();
   const whiteboardState = useWhiteboard();
   const canEndEpisode = useCan("endEpisode");
-  const canDrawWhiteboard = useCan("drawWhiteboard");
-  const [commandError, setCommandError] = useState2(() => connection.lastError?.recoverable && connection.lastError.code.startsWith("media.") ? connection.lastError.message : null);
-  const runCommand = useCallback(async (command) => {
+  const canDrawWhiteboard = useCanDrawWhiteboard();
+  const [commandError, setCommandError] = useState2(() => connection.lastError?.recoverable && connection.lastError.code.startsWith("media.") ? connection.lastError : null);
+  const [commandSource, setCommandSource] = useState2();
+  const [commandAction, setCommandAction] = useState2();
+  const runCommand = useCallback(async (command, source, action) => {
     try {
       await command();
       setCommandError(null);
+      setCommandSource(void 0);
+      setCommandAction(void 0);
     } catch (cause) {
-      setCommandError(cause instanceof Error ? cause.message : "This command could not be completed.");
+      setCommandError(commandFailure(cause));
+      setCommandSource(source);
+      setCommandAction(action);
     }
   }, []);
   const whiteboardTransport = client.whiteboard.transport();
@@ -368,14 +401,19 @@ function SpaceSurface(props) {
   return /* @__PURE__ */ jsx(
     SpaceView,
     {
+      timeLimit: props.timeLimit,
       colorScheme: props.resolvedColorScheme,
       shareUrl: props.shareUrl,
       onReportProblem: props.onReportProblem,
+      onOpenReportProblem: props.onOpenReport,
+      reportUnavailableReason: props.reportUnavailableReason,
       onColorSchemeChange: props.onColorSchemeChange,
       spaceName: props.spaceName,
       inviteLink: props.inviteLink,
       pickChatFiles: props.pickChatFiles,
       commandError: commandError ?? void 0,
+      commandSource,
+      commandAction,
       onDismissCommandError: () => setCommandError(null),
       layout: props.layout,
       onLayoutChange: props.onLayoutChange,
@@ -385,7 +423,14 @@ function SpaceSurface(props) {
       onLeft: () => runCommand(() => client.leave()),
       onEndEpisode: canEndEpisode ? () => runCommand(() => client.endEpisode()) : void 0,
       reconnecting: { isVisible: connection.status === "reconnecting", status: "reconnecting", showNotice: false },
-      overlay: /* @__PURE__ */ jsx(Fragment, { children: media.incomingRequests[0] ? /* @__PURE__ */ jsx(MediaRequestDialog, { request: media.incomingRequests[0], onDecline: () => void runCommand(() => client.media.declineRequest(media.incomingRequests[0].requestId)), onAllow: () => void runCommand(() => client.media.acceptRequest(media.incomingRequests[0].requestId)) }) : null })
+      overlay: /* @__PURE__ */ jsx(Fragment, { children: media.incomingRequests[0] ? /* @__PURE__ */ jsx(
+        MediaRequestDialog,
+        {
+          request: media.incomingRequests[0],
+          onDecline: () => void runCommand(() => client.media.declineRequest(media.incomingRequests[0].requestId), media.incomingRequests[0].kind === "start_camera" ? "camera" : "microphone", "request"),
+          onAllow: () => void runCommand(() => client.media.acceptRequest(media.incomingRequests[0].requestId), media.incomingRequests[0].kind === "start_camera" ? "camera" : "microphone", "request")
+        }
+      ) : null })
     }
   );
 }
@@ -891,19 +936,13 @@ function RecordingWhiteboardView({ state: stateValue, files, expectedSceneId, ex
 RecordingWhiteboardView.displayName = "RecordingWhiteboardView";
 
 // src/components/logo/Logo.tsx
-import { useId } from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var DEFAULT_COLOR = "#1A332B";
+var DEFAULT_COLOR = "currentColor";
 var DEFAULT_HEIGHT = 32;
 var DEFAULT_VARIANT = "wordmark";
 var WORDMARK_VIEW_BOX = "0 0 200 80";
 var MARK_VIEW_BOX = "0 0 68 80";
-function gradientId(prefix, name) {
-  return `${prefix}-${name}`;
-}
 function Logo({ accessibilityLabel = "Chalk", color = DEFAULT_COLOR, height = DEFAULT_HEIGHT, variant = DEFAULT_VARIANT }) {
-  const generatedId = useId().replace(/[^a-zA-Z0-9_-]/gu, "");
-  const idPrefix = `chalk-logo-${generatedId}`;
   const isWordmark = variant === "wordmark";
   const viewBox = isWordmark ? WORDMARK_VIEW_BOX : MARK_VIEW_BOX;
   const width = isWordmark ? height * 2.5 : height * (68 / 80);
@@ -924,41 +963,14 @@ function Logo({ accessibilityLabel = "Chalk", color = DEFAULT_COLOR, height = DE
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
       children: [
-        /* @__PURE__ */ jsxs3("defs", { children: [
-          /* @__PURE__ */ jsxs3("linearGradient", { id: gradientId(idPrefix, "green"), x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-            /* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: "#C5E5C0" }),
-            /* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: "#80B879" })
-          ] }),
-          /* @__PURE__ */ jsxs3("linearGradient", { id: gradientId(idPrefix, "yellow"), x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-            /* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: "#FCEAB3" }),
-            /* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: "#D9B641" })
+        /* @__PURE__ */ jsxs3("svg", { x: "0", y: "6", width: "68", height: "68", viewBox: "0 0 48 48", children: [
+          /* @__PURE__ */ jsxs3("g", { transform: "rotate(28 24 24)", fill: "currentColor", children: [
+            /* @__PURE__ */ jsx5("path", { d: "M18 8h12v28a6 6 0 0 1-12 0z" }),
+            /* @__PURE__ */ jsx5("path", { d: "M18 8h12l-1.5 4.5h-9z", opacity: "0.45" })
           ] }),
-          /* @__PURE__ */ jsxs3("linearGradient", { id: gradientId(idPrefix, "blue"), x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-            /* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: "#B2E0F0" }),
-            /* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: "#55AAC9" })
-          ] }),
-          /* @__PURE__ */ jsxs3("linearGradient", { id: gradientId(idPrefix, "pink"), x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-            /* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: "#F8CACA" }),
-            /* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: "#D67B7B" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs3("g", { transform: "translate(2, 2) scale(0.95)", children: [
-          /* @__PURE__ */ jsx5("g", { className: "chalk-logo__stick chalk-logo__stick--green", children: /* @__PURE__ */ jsxs3("g", { transform: "rotate(-15 20 60)", children: [
-            /* @__PURE__ */ jsx5("path", { d: "M9,20 L21,20 L22,63 A7,7 0 0 1 8,63 Z", fill: `url(#${gradientId(idPrefix, "green")})` }),
-            /* @__PURE__ */ jsx5("ellipse", { cx: "15", cy: "20", rx: "6", ry: "2.5", fill: "#D8ECD4" })
-          ] }) }),
-          /* @__PURE__ */ jsx5("g", { className: "chalk-logo__stick chalk-logo__stick--yellow", children: /* @__PURE__ */ jsxs3("g", { transform: "rotate(-8 32 55)", children: [
-            /* @__PURE__ */ jsx5("path", { d: "M23,15 L35,15 L36,60 A7,7 0 0 1 22,60 Z", fill: `url(#${gradientId(idPrefix, "yellow")})` }),
-            /* @__PURE__ */ jsx5("ellipse", { cx: "29", cy: "15", rx: "6", ry: "2.5", fill: "#FEF3D1" })
-          ] }) }),
-          /* @__PURE__ */ jsx5("g", { className: "chalk-logo__stick chalk-logo__stick--blue", children: /* @__PURE__ */ jsxs3("g", { transform: "rotate(12 60 30)", children: [
-            /* @__PURE__ */ jsx5("path", { d: "M36,8 L48,8 L49,56 A7,7 0 0 1 35,56 Z", fill: `url(#${gradientId(idPrefix, "blue")})` }),
-            /* @__PURE__ */ jsx5("ellipse", { cx: "42", cy: "8", rx: "6", ry: "2.5", fill: "#D0EDF8" })
-          ] }) }),
-          /* @__PURE__ */ jsx5("g", { className: "chalk-logo__stick chalk-logo__stick--pink", children: /* @__PURE__ */ jsxs3("g", { transform: "rotate(5 55 50)", children: [
-            /* @__PURE__ */ jsx5("path", { d: "M49,70 L61,70 L62,29 A7,7 0 0 0 48,29 Z", fill: `url(#${gradientId(idPrefix, "pink")})` }),
-            /* @__PURE__ */ jsx5("ellipse", { cx: "55", cy: "70", rx: "6", ry: "2.5", fill: "#FBE4E4" })
-          ] }) })
+          /* @__PURE__ */ jsx5("circle", { cx: "10.5", cy: "41.5", r: "1.7", fill: "currentColor", opacity: "0.55" }),
+          /* @__PURE__ */ jsx5("circle", { cx: "6.5", cy: "37", r: "1.2", fill: "currentColor", opacity: "0.4" }),
+          /* @__PURE__ */ jsx5("circle", { cx: "4", cy: "43.5", r: "0.85", fill: "currentColor", opacity: "0.28" })
         ] }),
         isWordmark ? /* @__PURE__ */ jsx5("text", { className: "chalk-logo__wordmark", x: "90", y: "52", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif", fontSize: "38", fontWeight: "600", letterSpacing: "-0.02em", fill: "currentColor", children: "chalk" }) : null
       ]

package/dist/{chunk-ZFWIMKUC.js → chunk-HWQLW4JR.js}

@@ -1,6 +1,5 @@
 // src/components/stage/stage-layout.ts
 var WIDESCREEN = 16 / 9;
-var SLIM_STRIP_PX = 52;
 var MORE_TILE_ID = "stage:more";
 var DEFAULT_GRID_OPTIONS = { gap: 8, minTileWidth: 150, minTileHeight: 96, maxPerPage: Number.POSITIVE_INFINITY, minAspect: 0.8, maxAspect: 2 };
 var DEFAULT_SPOTLIGHT_OPTIONS = { gap: 8, stripRatio: 0.17, minStripHeight: 104, maxStripHeight: 150, stripAspect: WIDESCREEN };
@@ -56,11 +55,13 @@ function fitGrid(box, ids, options, wideIds = []) {
   let plan = null;
   let overflowCount = 0;
   const weight = (id) => wideIds.includes(id) ? 2 : 1;
-  for (let count = Math.min(ids.length, Math.max(1, options.maxPerPage)); count >= 1; count -= 1) {
+  const lastContent = ids.reduce((last, id, index2) => wideIds.includes(id) ? index2 : last, -1);
+  const fewest = Math.min(ids.length, Math.max(wideIds.includes(ids[0] ?? "") ? 2 : 1, lastContent + 2));
+  for (let count = Math.min(ids.length, Math.floor(options.maxPerPage)); count >= 1; count -= 1) {
     overflowCount = count < ids.length ? ids.length - count + 1 : 0;
     keys = overflowCount ? [...ids.slice(0, count - 1), MORE_TILE_ID] : ids;
     plan = rowPlan(box, keys.map(weight), options);
-    if (plan && (plan.minWidth >= options.minTileWidth && plan.height >= options.minTileHeight || count <= (wideIds.includes(ids[0] ?? "") ? 2 : 1))) break;
+    if (plan && (plan.minWidth >= options.minTileWidth && plan.height >= options.minTileHeight || count <= fewest)) break;
   }
   if (!plan) return EMPTY_GEOMETRY;
   let height = plan.height;
@@ -90,15 +91,52 @@ function contain(box, aspect) {
   const width = Math.min(box.width, box.height * aspect);
   return { width, height: width / aspect };
 }
+var FLOAT_SPEAKER = { width: 120, height: 68 };
+var FLOAT_PERSON = { width: 76, height: 44 };
+var FLOAT_MAX_PEOPLE = 3;
+var FLOAT_TOP = 56;
+var FLOAT_BOTTOM = 8 + 64 + 60;
+function floatPeople(box, primaryId, stripIds, options) {
+  const content = stripIds.filter((id) => options.wideIds?.includes(id));
+  const people = stripIds.filter((id) => !content.includes(id));
+  const speaker = options.speakerId && options.speakerId !== options.localId && people.includes(options.speakerId) ? options.speakerId : null;
+  const local = options.localId && people.includes(options.localId) ? options.localId : null;
+  const others = people.filter((id) => id !== speaker && id !== local);
+  const ordered = [...speaker ? [speaker] : [], ...others, ...local ? [local] : []];
+  const fold = (max2) => {
+    if (content.length + ordered.length <= max2) return [...content, ...ordered];
+    const shares = content.slice(0, max2 - 1);
+    const slots = max2 - 1 - shares.length;
+    const faces = ordered.length <= slots ? ordered : slots > 0 ? [...ordered.slice(0, slots - 1), ...ordered.slice(-1)] : [];
+    return [...shares, ...faces, MORE_TILE_ID];
+  };
+  const sizeOf = (id) => id === speaker || content.includes(id) ? FLOAT_SPEAKER : FLOAT_PERSON;
+  const bottomOf = (ids) => ids.reduce((y2, id) => y2 + sizeOf(id).height + options.gap, FLOAT_TOP) - options.gap;
+  let max = Math.max(1, Math.min(content.length + FLOAT_MAX_PEOPLE, options.maxPerPage ?? Infinity));
+  const minimum = Number.isFinite(options.maxPerPage) ? 1 : content.length + 1;
+  while (max > minimum && bottomOf(fold(max)) > box.height - FLOAT_BOTTOM) max -= 1;
+  const column = fold(max);
+  if (bottomOf(column) > box.height - FLOAT_BOTTOM) return null;
+  let y = FLOAT_TOP;
+  const floats = column.map((id) => {
+    const size = sizeOf(id);
+    const frame = { id, role: "float", page: 0, x: box.width - 12 - size.width, y, ...size };
+    y += size.height + options.gap;
+    return frame;
+  });
+  const shown = floats.filter((frame) => frame.id !== MORE_TILE_ID).length;
+  return { frames: [{ id: primaryId, role: "primary", page: 0, x: 0, y: 0, ...box }, ...floats], pageCount: 1, perPage: floats.length, overflowCount: stripIds.length - shown };
+}
 function fitSpotlight(box, primaryId, stripIds, options) {
   const phone = box.width <= 640;
+  const maxPerPage = Math.floor(options.maxPerPage ?? Infinity);
   const aspect = options.primaryAspect === void 0 ? WIDESCREEN : options.primaryAspect;
-  if (!stripIds.length) {
+  if (!stripIds.length || maxPerPage <= 0) {
     const aspect2 = clamp(box.width / box.height, 4 / 3, WIDESCREEN);
     const fitted = contain(box, aspect2);
     const width = options.content || phone ? box.width : Math.min(box.width * 0.56, fitted.width);
     const height = options.content || phone ? box.height : width / aspect2;
-    return { frames: [{ id: primaryId, role: "primary", page: 0, x: (box.width - width) / 2, y: (box.height - height) / 2, width, height }], pageCount: 1, perPage: 0 };
+    return { frames: [{ id: primaryId, role: "primary", page: 0, x: (box.width - width) / 2, y: (box.height - height) / 2, width, height }], pageCount: 1, perPage: 0, overflowCount: stripIds.length };
   }
   if (phone && stripIds.length === 1 && !options.content) {
     return {
@@ -110,15 +148,17 @@ function fitSpotlight(box, primaryId, stripIds, options) {
       perPage: 1
     };
   }
+  const floating = phone && options.floatingPhonePeople ? floatPeople(box, primaryId, stripIds, { ...options, maxPerPage }) : null;
+  if (floating) return floating;
   const slim = phone && options.slimPhoneStrip === true;
-  const strip = slim ? SLIM_STRIP_PX : phone ? Math.round(box.height * 0.3) : clamp(box.height * options.stripRatio, options.minStripHeight, options.maxStripHeight);
+  const strip = slim ? 52 : phone ? Math.round(box.height * 0.3) : clamp(box.height * options.stripRatio, options.minStripHeight, options.maxStripHeight);
   const column = phone && options.content ? 120 : clamp(box.width * 0.15, 180, 260);
   const belowMain = options.content ? contain({ width: box.width, height: box.height - strip - options.gap }, aspect) : { width: box.width, height: box.height - strip - options.gap };
   const besideMain = options.content ? contain({ width: box.width - column - options.gap, height: box.height }, aspect) : { width: box.width - column - options.gap, height: box.height };
   const beside = options.content ? besideMain.width * besideMain.height > belowMain.width * belowMain.height * 1.005 : !phone && Math.abs(Math.log(besideMain.width / besideMain.height / WIDESCREEN)) < Math.abs(Math.log(belowMain.width / belowMain.height / WIDESCREEN));
   const main = { width: beside ? besideMain.width : box.width, height: beside ? box.height : belowMain.height };
   const remaining = { width: beside ? box.width - main.width - options.gap : box.width, height: beside ? box.height : box.height - main.height - options.gap };
-  const people = fitGrid(remaining, stripIds, { ...DEFAULT_GRID_OPTIONS, minTileWidth: phone ? 88 : 150, minTileHeight: slim ? SLIM_STRIP_PX : phone ? 72 : 96, maxPerPage: options.maxPerPage ?? DEFAULT_GRID_OPTIONS.maxPerPage }, options.wideIds);
+  const people = fitGrid(remaining, stripIds, { ...DEFAULT_GRID_OPTIONS, minTileWidth: phone ? 88 : 150, minTileHeight: slim ? 52 : phone ? 72 : 96, maxPerPage }, options.wideIds);
   return {
     ...people,
     frames: [{ id: primaryId, role: "primary", page: 0, x: 0, y: 0, ...main }, ...people.frames.map((frame) => ({ ...frame, role: "strip", x: frame.x + (beside ? main.width + options.gap : 0), y: frame.y + (beside ? 0 : main.height + options.gap) }))]
@@ -182,6 +222,12 @@ function choosePrimary(items, context) {
   if (content) return content;
   return participantWhere(items, (participant) => participant.isActiveSpeaker === true) ?? participantWhere(items, (participant) => participant.isSpeaking === true) ?? (context.lastSpeakerId ? items.find((item) => item.kind === "participant" && item.id === context.lastSpeakerId) : void 0) ?? participantWhere(items, (participant) => !participant.isLocal) ?? participantWhere(items, () => true) ?? items[0] ?? null;
 }
+function speakingParticipantId(items, accept = () => true) {
+  return (participantWhere(items, (participant) => accept(participant) && participant.isActiveSpeaker === true) ?? participantWhere(items, (participant) => accept(participant) && participant.isSpeaking === true))?.id;
+}
+function floatingSpeakerId(items, lastRemoteSpeakerId) {
+  return speakingParticipantId(items, (participant) => !participant.isLocal) ?? lastRemoteSpeakerId;
+}
 function gridOrder(items, pinnedId) {
   if (!pinnedId) return [...items];
   const pinned = items.find((item) => item.id === pinnedId);
@@ -201,5 +247,7 @@ export {
   isContentItem,
   stabilizeOrder,
   choosePrimary,
+  speakingParticipantId,
+  floatingSpeakerId,
   gridOrder
 };