@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/stage/StageRootBoundary.tsx

@@ -0,0 +1,114 @@
+// The stage realm's LAST-RESORT boundary, around StageApp and nothing else.
+//
+// This is not a violation of PanelBoundary's placement rule ("around a panel,
+// NEVER above the stage") — that rule is about the CHROME, where a boundary
+// above the iframe would unmount a healthy iframe on an unrelated panel's
+// throw. Here the boundary lives INSIDE the iframe, and by the time it
+// catches, its children are already dead: React's alternative is unmounting
+// the whole stage root to a white iframe with no way back. A fallback that
+// names the crash and offers a reload is strictly more than that.
+//
+// MANUAL RELOAD ONLY, never automatic: a deterministic boot crash under an
+// auto-reload is a reload loop. The reload path is already built — the iframe
+// `load` event re-runs the chrome's connect poll, and `onReady` re-pushes the
+// document, the frame and the selection (state/store.ts), exactly as after a
+// Vite full reload.
+//
+// INLINE STYLES, not styles.css classes: the stage document imports tokens
+// only (see main.tsx — the widget rules would repaint authored content), so
+// PanelBoundary's `.panel-crash` card has no rules here. Token vars with
+// literal fallbacks restating the token values (shotTokens.css).
+import { Component, type CSSProperties, type ErrorInfo, type ReactNode } from "react";
+import type { StageInset } from "../bridgeTypes.js";
+
+export interface StageRootBoundaryProps {
+  children: ReactNode;
+  /** The same lane every other stage failure takes — the chrome names it. */
+  report: (message: string) => void;
+  /** Test seam: jsdom cannot stub `location.reload`. */
+  reload?: () => void;
+  /** Where the chrome covers the stage, read when the card renders, so the
+   *  card fills the visible canvas and not the part under the docked cells.
+   *  Absent, the card fills the whole iframe. */
+  inset?: () => StageInset;
+}
+
+interface StageRootBoundaryState {
+  error: Error | null;
+}
+
+const wrapStyle: CSSProperties = {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "12px",
+  background: "var(--surface-well, #050505)",
+  color: "var(--ink-1, #f5f5f5)",
+  fontFamily: 'var(--font-sans, "Inter Variable", Inter, system-ui, sans-serif)',
+};
+
+const titleStyle: CSSProperties = { fontSize: "13px", fontWeight: 600 };
+
+const messageStyle: CSSProperties = {
+  maxWidth: "480px",
+  padding: "0 24px",
+  fontSize: "12px",
+  lineHeight: 1.5,
+  color: "var(--ink-2, #b7b7b7)",
+  textAlign: "center",
+  wordBreak: "break-word",
+};
+
+const buttonStyle: CSSProperties = {
+  padding: "6px 14px",
+  fontSize: "12px",
+  fontFamily: "inherit",
+  color: "var(--ink-1, #f5f5f5)",
+  background: "var(--fill-rest, rgba(255, 255, 255, 0.05))",
+  border: "1px solid var(--line, #2a2a2a)",
+  borderRadius: "6px",
+  cursor: "pointer",
+};
+
+export class StageRootBoundary extends Component<StageRootBoundaryProps, StageRootBoundaryState> {
+  override state: StageRootBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): StageRootBoundaryState {
+    return { error: error instanceof Error ? error : new Error(String(error)) };
+  }
+
+  override componentDidCatch(error: Error, info: ErrorInfo): void {
+    // Console BEFORE the report: a throwing handler must not swallow the only
+    // record of the original error (PanelBoundary's posture).
+    console.error("[shot-editor stage] stage crashed", error, info.componentStack);
+    this.props.report(error.message || String(error));
+  }
+
+  private readonly reload = (): void => {
+    (this.props.reload ?? (() => location.reload()))();
+  };
+
+  override render(): ReactNode {
+    const { error } = this.state;
+    if (error === null) return this.props.children;
+    const inset = this.props.inset?.();
+    const style = inset === undefined ? wrapStyle : { ...wrapStyle, ...inset };
+    return (
+      <div style={style} role="alert" data-dailies-stage-furniture="">
+        <div style={titleStyle}>The stage crashed</div>
+        {/* The message verbatim — a fallback that hides what went wrong makes
+            the crash harder to report than the blank iframe it replaced. */}
+        <div style={messageStyle}>{error.message || String(error)}</div>
+        <button type="button" style={buttonStyle} onClick={this.reload}>
+          Reload stage
+        </button>
+      </div>
+    );
+  }
+}