wehub-resource-sync
306 lines
14 KiB
TypeScript
306 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import { motion, useReducedMotion } from 'motion/react';
|
|
import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
|
|
import type { SceneEditorSurface, SurfaceState } from '@/lib/edit/scene-editor-surface';
|
|
import { sceneEditorRegistry } from '@/lib/edit/scene-editor-registry';
|
|
import { NOOP_SURFACE } from '@/lib/edit/noop-surface';
|
|
import type { Scene } from '@/lib/types/stage';
|
|
import { CHROME_DURATION, CHROME_EASE, CHROME_STAGGER } from '@/lib/edit/transitions';
|
|
import { StageGrid } from '@/components/edit/StageGrid';
|
|
import { CommandBar } from './CommandBar';
|
|
import { FloatingInsertToolbar } from './FloatingInsertToolbar';
|
|
import { FloatingToolbar } from './FloatingToolbar';
|
|
import { HintRail } from './HintRail';
|
|
|
|
interface EditShellProps {
|
|
readonly scene: Scene;
|
|
/**
|
|
* Optional left-side navigator slot. In v0 this is the SlideNavRail
|
|
* passed from Stage when mode === 'edit'. Surface code never imports
|
|
* the rail (the prop is the only handoff seam), keeping chrome and
|
|
* surface separable.
|
|
*/
|
|
readonly leftRail?: ReactNode;
|
|
/**
|
|
* Right-edge slot of the CommandBar — Stage uses this to hand in the
|
|
* global controls (settings pill + Pro Switch) when the Stage Header
|
|
* is hidden, so the entire top chrome reduces to a single bar.
|
|
*/
|
|
readonly commandTrailing?: ReactNode;
|
|
/**
|
|
* Optional right-side panel slot. Used by the MAIC Agent PoC to mount the
|
|
* AI sidebar. Like `leftRail`, it is a pure chrome handoff — surface code
|
|
* never imports it. Collapses to zero width when absent.
|
|
*/
|
|
readonly rightRail?: ReactNode;
|
|
/** Optional bottom bar (under the canvas) — used for the actions timeline. */
|
|
readonly bottomRail?: ReactNode;
|
|
}
|
|
|
|
const CHROME_TRANSITION = { duration: CHROME_DURATION, ease: CHROME_EASE } as const;
|
|
const COMMANDBAR_DELAY = CHROME_STAGGER;
|
|
const LEFT_RAIL_DELAY = CHROME_STAGGER * 2;
|
|
|
|
/**
|
|
* Pro mode (edit) chrome — mounts inside the canvas slot of Stage, replacing
|
|
* CanvasArea. The playback Header above stays mounted because it owns the
|
|
* global Pro toggle Switch: exiting Pro mode is done by flipping that Switch
|
|
* off, not by a dedicated button here.
|
|
*
|
|
* ┌──────────────────────────────────────────────┐ (Stage Header above)
|
|
* ├──────────────────────────────────────────────┤
|
|
* │ CommandBar (undo/redo · title · insert · │
|
|
* │ surface commands) │
|
|
* ├──────────┬───────────────────────────────────┤
|
|
* │ leftRail │ Canvas / unsupported-scene │
|
|
* │ (opt) │ FloatingToolbar (when selected) │
|
|
* │ │ HintRail (AI, reserved) │
|
|
* └──────────┴───────────────────────────────────┘
|
|
*
|
|
* Mount choreography: CommandBar drops in from top, leftRail slides in
|
|
* from left after a stagger, content opacity-fades in. All three share
|
|
* the single `CHROME_*` source in `lib/edit/transitions.ts` so timing
|
|
* stays consistent with the outer Stage-level cross-fade.
|
|
*
|
|
* Architecture: this shell resolves `scene.type` to a registered surface
|
|
* (or falls back to NOOP_SURFACE for unregistered types) and **never
|
|
* branches into a different component type**. The same `<Frame>` mounts
|
|
* across every scene-type change — only the `surface.SurfaceComponent`
|
|
* inside the center slot swaps. That guarantees CommandBar and `leftRail`
|
|
* never remount during scene navigation, removing the chrome flicker that
|
|
* the previous two-branch design caused (PR3a rearch).
|
|
*/
|
|
export function EditShell({
|
|
scene,
|
|
leftRail,
|
|
commandTrailing,
|
|
rightRail,
|
|
bottomRail,
|
|
}: EditShellProps) {
|
|
const surface = sceneEditorRegistry.resolve(scene.type) ?? NOOP_SURFACE;
|
|
// Surface state is published from a child runner (keyed by sceneType so it
|
|
// remounts when the surface identity changes — that's the boundary at which
|
|
// rules-of-hooks naturally allows a different hook signature). The chrome
|
|
// around it stays mounted and consumes state via these props.
|
|
const [state, setState] = useState<SurfaceState | null>(null);
|
|
const SurfaceComponent = surface.SurfaceComponent;
|
|
|
|
return (
|
|
<>
|
|
{/* `key={scene.type}` is the remount boundary. We can't use
|
|
`surface.sceneType` here because NOOP_SURFACE deliberately reuses
|
|
'slide' as a placeholder (the SceneType union is closed and NOOP
|
|
isn't a real type). The scene's own `type` is the actual signal
|
|
that the hook signature inside `useSurfaceState` is about to
|
|
change — so we remount the runner exactly when it does, keeping
|
|
rules-of-hooks happy across the slide ↔ read-only surface swap
|
|
while the rest of the chrome stays mounted. */}
|
|
<SurfaceStateRunner key={scene.type} surface={surface} onChange={setState} />
|
|
<Frame
|
|
title={scene.title}
|
|
leftRail={leftRail}
|
|
history={state?.history}
|
|
commands={state?.commands}
|
|
trailing={commandTrailing}
|
|
rightRail={rightRail}
|
|
bottomRail={bottomRail}
|
|
>
|
|
<SurfaceComponent />
|
|
{state?.insertItems && state.insertItems.length > 0 && (
|
|
<FloatingInsertToolbar items={state.insertItems} />
|
|
)}
|
|
{state?.hasSelection && <FloatingToolbar actions={state.floatingActions} />}
|
|
<HintRail hints={state?.hints} />
|
|
</Frame>
|
|
</>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Hidden runner that owns the surface state hook. `key={surface.sceneType}`
|
|
* ensures it remounts when the surface itself changes (slide → noop) — the
|
|
* only point at which the hook call signature can vary. Within a single mount
|
|
* the hook signature is fixed (the surface object is constant), so React's
|
|
* rules-of-hooks are respected.
|
|
*
|
|
* Renders no DOM; state flows up to the chrome via `onChange`. A custom
|
|
* shallow comparison gates the publish — surface hooks (e.g. slideSurface's
|
|
* `useSlideSurfaceState`) return a fresh object literal every render, so naive
|
|
* reference equality would loop infinitely (every publish causes the parent to
|
|
* re-render, which re-runs this hook, which yields a new ref, which publishes
|
|
* again, etc.). We only publish when one of the fields the chrome actually
|
|
* reads has materially changed.
|
|
*/
|
|
function SurfaceStateRunner({
|
|
surface,
|
|
onChange,
|
|
}: {
|
|
readonly surface: SceneEditorSurface;
|
|
readonly onChange: (state: SurfaceState) => void;
|
|
}) {
|
|
const state = surface.useSurfaceState();
|
|
const lastRef = useRef<SurfaceState | null>(null);
|
|
useLayoutEffect(() => {
|
|
if (surfaceStateEqual(state, lastRef.current)) return;
|
|
lastRef.current = state;
|
|
onChange(state);
|
|
});
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Field-by-field equality for the subset of SurfaceState that the chrome
|
|
* reads. Surface hooks (e.g. `useSlideSurfaceState`) return a fresh object
|
|
* literal every render, so naive reference equality would publish on
|
|
* every render and trip an infinite render loop via the runner →
|
|
* setState → re-render cycle. We compare semantic content instead.
|
|
*
|
|
* **When you extend `SurfaceState`** (new field on `EditorCommand`,
|
|
* `InsertPaletteItem`, `FloatingAction`, `EditorHint`, or a new top-level
|
|
* field), update this function in lock-step. A field that's read by the
|
|
* chrome but missing from the comparison silently goes stale.
|
|
*
|
|
* - `content` is reference-equal as long as the in-memory slide buffer
|
|
* hasn't been committed — the canonical "real change" signal.
|
|
* - History flags compared individually (functions like undo/redo are
|
|
* stable references via `useSlideEditSession.getState()`).
|
|
* - InsertPaletteItem / EditorCommand / FloatingAction arrays: length +
|
|
* per-item `id` + per-item flags that drive visual state.
|
|
* - EditorHint compared by length + per-item severity/message.
|
|
*
|
|
* **Callback identity (`onInvoke`, `popoverContent`) is intentionally
|
|
* NOT compared.** Per-render closure rebinding is normal and would
|
|
* trip equality every render. Today this is safe because slide is the
|
|
* only registered surface and its `floatingActions` is `[]` — the only
|
|
* `onInvoke` set the chrome reads is on `InsertPaletteItem`, which is
|
|
* a stable module-level closure from `buildInsertItems`. A future
|
|
* surface that returns non-empty `floatingActions` with closures
|
|
* capturing per-render state must fold its own change signal (a
|
|
* content ref / version counter) into the comparison, otherwise the
|
|
* stale callback fires at click time.
|
|
*/
|
|
function surfaceStateEqual(a: SurfaceState, b: SurfaceState | null): boolean {
|
|
if (!b) return false;
|
|
if (a.content !== b.content) return false;
|
|
if (a.hasSelection !== b.hasSelection) return false;
|
|
if ((a.history?.canUndo ?? null) !== (b.history?.canUndo ?? null)) return false;
|
|
if ((a.history?.canRedo ?? null) !== (b.history?.canRedo ?? null)) return false;
|
|
if (a.insertItems.length !== b.insertItems.length) return false;
|
|
for (let i = 0; i < a.insertItems.length; i++) {
|
|
if (a.insertItems[i].id !== b.insertItems[i].id) return false;
|
|
if (a.insertItems[i].active !== b.insertItems[i].active) return false;
|
|
if (a.insertItems[i].disabled !== b.insertItems[i].disabled) return false;
|
|
// Label/tooltip are user-facing and locale-dependent: without them the
|
|
// insert toolbar text stays stale after a language switch.
|
|
if (a.insertItems[i].label !== b.insertItems[i].label) return false;
|
|
if (a.insertItems[i].tooltip !== b.insertItems[i].tooltip) return false;
|
|
}
|
|
if (a.commands.length !== b.commands.length) return false;
|
|
for (let i = 0; i < a.commands.length; i++) {
|
|
if (a.commands[i].id !== b.commands[i].id) return false;
|
|
if (a.commands[i].disabled !== b.commands[i].disabled) return false;
|
|
if (a.commands[i].label !== b.commands[i].label) return false;
|
|
if (a.commands[i].tooltip !== b.commands[i].tooltip) return false;
|
|
}
|
|
if (a.floatingActions.length !== b.floatingActions.length) return false;
|
|
for (let i = 0; i < a.floatingActions.length; i++) {
|
|
if (a.floatingActions[i].id !== b.floatingActions[i].id) return false;
|
|
if (a.floatingActions[i].disabled !== b.floatingActions[i].disabled) return false;
|
|
if (a.floatingActions[i].label !== b.floatingActions[i].label) return false;
|
|
}
|
|
const aHints = a.hints ?? [];
|
|
const bHints = b.hints ?? [];
|
|
if (aHints.length !== bHints.length) return false;
|
|
for (let i = 0; i < aHints.length; i++) {
|
|
if (aHints[i].id !== bHints[i].id) return false;
|
|
if (aHints[i].severity !== bHints[i].severity) return false;
|
|
if (aHints[i].message !== bHints[i].message) return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
interface FrameProps {
|
|
readonly title: string;
|
|
readonly leftRail?: ReactNode;
|
|
readonly history?: React.ComponentProps<typeof CommandBar>['history'];
|
|
readonly commands?: React.ComponentProps<typeof CommandBar>['commands'];
|
|
readonly trailing?: ReactNode;
|
|
readonly rightRail?: ReactNode;
|
|
readonly bottomRail?: ReactNode;
|
|
readonly children: ReactNode;
|
|
}
|
|
|
|
function Frame({
|
|
title,
|
|
leftRail,
|
|
history,
|
|
commands,
|
|
trailing,
|
|
rightRail,
|
|
bottomRail,
|
|
children,
|
|
}: FrameProps) {
|
|
const prefersReducedMotion = useReducedMotion();
|
|
|
|
// Chrome layers fade in (opacity only) — deliberately NO transform (x/y)
|
|
// slide. Two reasons: (1) the CommandBar's trailing slot and the rail host
|
|
// the Pro Switch / settings pill, which animate across the mode swap via
|
|
// `layoutId`; a transform on an ancestor distorts motion's layout
|
|
// measurement and makes the shared element drift. (2) the rail
|
|
// (`backdrop-blur-xl`) and the pills (`backdrop-blur-md`) would force a
|
|
// per-frame backdrop-filter recompute while transforming, which drops
|
|
// frames. A pure opacity fade composites cleanly and keeps the layout
|
|
// static so layoutId morphs land precisely.
|
|
const cmdInitial = { opacity: 0 };
|
|
const cmdAnimate = { opacity: 1 };
|
|
const railInitial = { opacity: 0 };
|
|
const railAnimate = { opacity: 1 };
|
|
|
|
const stepTransition = prefersReducedMotion
|
|
? { duration: 0.12, ease: CHROME_EASE }
|
|
: CHROME_TRANSITION;
|
|
|
|
return (
|
|
<StageGrid
|
|
className="bg-gradient-to-b from-zinc-100 to-zinc-200 dark:from-zinc-950 dark:to-zinc-900"
|
|
topSlot={
|
|
<motion.div
|
|
initial={cmdInitial}
|
|
animate={cmdAnimate}
|
|
transition={{ ...stepTransition, delay: prefersReducedMotion ? 0 : COMMANDBAR_DELAY }}
|
|
>
|
|
<CommandBar title={title} history={history} commands={commands} trailing={trailing} />
|
|
</motion.div>
|
|
}
|
|
leftSlot={
|
|
leftRail ? (
|
|
<motion.div
|
|
initial={railInitial}
|
|
animate={railAnimate}
|
|
transition={{ ...stepTransition, delay: prefersReducedMotion ? 0 : LEFT_RAIL_DELAY }}
|
|
className="h-full shrink-0"
|
|
>
|
|
{leftRail}
|
|
</motion.div>
|
|
) : null
|
|
}
|
|
centerSlot={
|
|
// Padded studio frame around the actual scene renderer. Lifted
|
|
// up from SlideCanvas so the slide and the non-slide read-only
|
|
// renderers share the exact same canvas bounding rect (no
|
|
// layout jump when switching scene type). Children render
|
|
// inside an inner ring/shadow card that the playback
|
|
// CanvasArea visually mirrors.
|
|
<div className="relative h-full w-full p-3 sm:p-4">
|
|
<div className="relative h-full w-full overflow-hidden rounded-xl bg-white ring-1 ring-zinc-200/80 dark:bg-zinc-900 dark:ring-zinc-800/80 shadow-[0_10px_40px_-12px_rgba(15,23,42,0.18)] dark:shadow-[0_10px_40px_-12px_rgba(0,0,0,0.6)]">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
}
|
|
rightSlot={rightRail ? <div className="h-full shrink-0">{rightRail}</div> : null}
|
|
bottomSlot={bottomRail ?? null}
|
|
/>
|
|
);
|
|
}
|