@rendiv/studio 0.1.0

package/ui/Preview.tsx

@@ -0,0 +1,379 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { Player, type PlayerRef } from '@rendiv/player';
+import type { CompositionEntry } from '@rendiv/core';
+import { previewStyles, colors, fonts } from './styles';
+
+interface PreviewProps {
+  composition: CompositionEntry;
+  inputProps: Record<string, unknown>;
+  playbackRate: number;
+  onPlaybackRateChange: (rate: number) => void;
+  onInputPropsChange: (props: Record<string, unknown>) => void;
+  onFrameUpdate?: (frame: number) => void;
+  seekRef?: React.MutableRefObject<((frame: number) => void) | null>;
+}
+
+const SPEED_STEPS = [0.25, 0.5, 1, 2, 4];
+
+function formatTime(frame: number, fps: number): string {
+  const totalSeconds = frame / fps;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = Math.floor(totalSeconds % 60);
+  const ms = Math.floor((totalSeconds % 1) * 100);
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(ms).padStart(2, '0')}`;
+}
+
+export const Preview: React.FC<PreviewProps> = ({
+  composition,
+  inputProps,
+  playbackRate,
+  onPlaybackRateChange,
+  onInputPropsChange,
+  onFrameUpdate,
+  seekRef,
+}) => {
+  const playerRef = useRef<PlayerRef>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [currentFrame, setCurrentFrame] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [propsOpen, setPropsOpen] = useState(false);
+  const [propsText, setPropsText] = useState('');
+  const [propsError, setPropsError] = useState(false);
+  const [wrapperSize, setWrapperSize] = useState({ width: 0, height: 0 });
+
+  // Track player wrapper dimensions to fit the player within both axes
+  useEffect(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setWrapperSize({ width: entry.contentRect.width, height: entry.contentRect.height });
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  // Expose seekTo to parent via mutable ref
+  useEffect(() => {
+    if (seekRef) {
+      seekRef.current = (frame: number) => playerRef.current?.seekTo(frame);
+    }
+    return () => {
+      if (seekRef) seekRef.current = null;
+    };
+  }, [seekRef]);
+
+  const mergedProps = { ...composition.defaultProps, ...inputProps };
+
+  // Sync props editor when composition changes.
+  // Timeline entries are managed by Sequence mount/unmount lifecycle — no need to clear here.
+  useEffect(() => {
+    setPropsText(JSON.stringify({ ...composition.defaultProps, ...inputProps }, null, 2));
+    setPropsError(false);
+  }, [composition.id]);
+
+  // Track frame updates and play state
+  useEffect(() => {
+    const player = playerRef.current;
+    if (!player) return;
+
+    const onFrame = (data: { frame: number }) => {
+      setCurrentFrame(data.frame);
+      onFrameUpdate?.(data.frame);
+    };
+    const onPlay = () => setIsPlaying(true);
+    const onPause = () => setIsPlaying(false);
+
+    player.addEventListener('frameupdate', onFrame);
+    player.addEventListener('play', onPlay);
+    player.addEventListener('pause', onPause);
+    return () => {
+      player.removeEventListener('frameupdate', onFrame);
+      player.removeEventListener('play', onPlay);
+      player.removeEventListener('pause', onPause);
+    };
+  }, [composition.id]);
+
+  // Global keyboard shortcuts — work regardless of which panel has focus
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Skip when user is typing in an input or textarea
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+
+      if (e.key === ' ' || e.key === 'k' || e.key === 'K') {
+        e.preventDefault();
+        if (isPlaying) {
+          playerRef.current?.pause();
+        } else {
+          playerRef.current?.play();
+        }
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        playerRef.current?.seekTo(Math.max(0, currentFrame - 1));
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        playerRef.current?.seekTo(Math.min(composition.durationInFrames - 1, currentFrame + 1));
+      } else if (e.key === '0') {
+        e.preventDefault();
+        playerRef.current?.seekTo(0);
+      } else if (e.key === 'j' || e.key === 'J') {
+        e.preventDefault();
+        const currentIdx = SPEED_STEPS.indexOf(playbackRate);
+        if (currentIdx > 0) {
+          onPlaybackRateChange(SPEED_STEPS[currentIdx - 1]);
+        } else if (currentIdx === 0) {
+          playerRef.current?.pause();
+        }
+      } else if (e.key === 'l' || e.key === 'L') {
+        e.preventDefault();
+        const currentIdx = SPEED_STEPS.indexOf(playbackRate);
+        if (currentIdx < SPEED_STEPS.length - 1) {
+          onPlaybackRateChange(SPEED_STEPS[currentIdx + 1]);
+          playerRef.current?.play();
+        } else if (currentIdx === -1) {
+          onPlaybackRateChange(1);
+          playerRef.current?.play();
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [playbackRate, onPlaybackRateChange, isPlaying, currentFrame, composition.durationInFrames]);
+
+  const handlePropsChange = useCallback(
+    (text: string) => {
+      setPropsText(text);
+      try {
+        const parsed = JSON.parse(text);
+        setPropsError(false);
+        onInputPropsChange(parsed);
+      } catch {
+        setPropsError(true);
+      }
+    },
+    [onInputPropsChange],
+  );
+
+  const durationSeconds = (composition.durationInFrames / composition.fps).toFixed(1);
+
+  return (
+    <div style={previewStyles.container}>
+      {/* Metadata bar */}
+      <div style={previewStyles.metadataBar}>
+        <span>
+          <span style={previewStyles.metadataLabel}>Size </span>
+          <span style={previewStyles.metadataValue}>
+            {composition.width}x{composition.height}
+          </span>
+        </span>
+        <span>
+          <span style={previewStyles.metadataLabel}>FPS </span>
+          <span style={previewStyles.metadataValue}>{composition.fps}</span>
+        </span>
+        <span>
+          <span style={previewStyles.metadataLabel}>Frames </span>
+          <span style={previewStyles.metadataValue}>{composition.durationInFrames}</span>
+        </span>
+        <span>
+          <span style={previewStyles.metadataLabel}>Duration </span>
+          <span style={previewStyles.metadataValue}>{durationSeconds}s</span>
+        </span>
+        <span>
+          <span style={previewStyles.metadataLabel}>Frame </span>
+          <span style={previewStyles.metadataValue}>
+            {currentFrame} / {composition.durationInFrames - 1}
+          </span>
+        </span>
+        <span>
+          <span style={previewStyles.metadataLabel}>Time </span>
+          <span style={previewStyles.metadataValue}>
+            {formatTime(currentFrame, composition.fps)}
+          </span>
+        </span>
+        {playbackRate !== 1 && (
+          <span style={previewStyles.speedIndicator}>{playbackRate}x</span>
+        )}
+      </div>
+
+      {/* Player */}
+      <div ref={wrapperRef} style={previewStyles.playerWrapper}>
+        <Player
+          key={composition.id}
+          ref={playerRef}
+          component={composition.component}
+          durationInFrames={composition.durationInFrames}
+          fps={composition.fps}
+          compositionWidth={composition.width}
+          compositionHeight={composition.height}
+          inputProps={mergedProps}
+          playbackRate={playbackRate}
+          loop
+          style={{
+            width: wrapperSize.width > 0 && wrapperSize.height > 0
+              ? Math.min(wrapperSize.width, wrapperSize.height * (composition.width / composition.height))
+              : '100%',
+          }}
+        />
+      </div>
+
+      {/* Playback controls */}
+      <div style={controlsBarStyle}>
+        <div style={controlsLeftStyle}>
+          <button
+            style={controlBtnStyle}
+            onClick={() => playerRef.current?.seekTo(0)}
+            title="Go to start (0)"
+          >
+            &#x23EE;
+          </button>
+          <button
+            style={controlBtnStyle}
+            onClick={() => playerRef.current?.seekTo(Math.max(0, currentFrame - 1))}
+            title="Step back (←)"
+          >
+            &#x23F4;
+          </button>
+          <button
+            style={{ ...controlBtnStyle, fontSize: 16, width: 36, height: 28 }}
+            onClick={() => (isPlaying ? playerRef.current?.pause() : playerRef.current?.play())}
+            title="Play/Pause (Space)"
+          >
+            {isPlaying ? '\u23F8' : '\u25B6'}
+          </button>
+          <button
+            style={controlBtnStyle}
+            onClick={() => playerRef.current?.seekTo(Math.min(composition.durationInFrames - 1, currentFrame + 1))}
+            title="Step forward (→)"
+          >
+            &#x23F5;
+          </button>
+          <button
+            style={controlBtnStyle}
+            onClick={() => playerRef.current?.seekTo(composition.durationInFrames - 1)}
+            title="Go to end"
+          >
+            &#x23ED;
+          </button>
+        </div>
+        <div style={controlsRightStyle}>
+          <span style={frameCounterStyle}>
+            {currentFrame} / {composition.durationInFrames - 1}
+          </span>
+          <span style={timeDisplayStyle}>
+            {formatTime(currentFrame, composition.fps)}
+          </span>
+          <div style={speedGroupStyle}>
+            {SPEED_STEPS.map((s) => (
+              <button
+                key={s}
+                style={{
+                  ...speedBtnStyle,
+                  backgroundColor: playbackRate === s ? colors.accentMuted : 'transparent',
+                  color: playbackRate === s ? '#fff' : colors.textSecondary,
+                }}
+                onClick={() => onPlaybackRateChange(s)}
+              >
+                {s}x
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Props editor */}
+      {Object.keys(composition.defaultProps).length > 0 && (
+        <div style={previewStyles.propsContainer}>
+          <div
+            style={previewStyles.propsHeader}
+            onClick={() => setPropsOpen(!propsOpen)}
+          >
+            <span>{propsOpen ? '\u25BC' : '\u25B6'} Input Props</span>
+            {propsError && (
+              <span style={{ color: colors.error, fontSize: 11 }}>Invalid JSON</span>
+            )}
+          </div>
+          {propsOpen && (
+            <textarea
+              style={{
+                ...previewStyles.propsTextarea,
+                borderColor: propsError ? colors.error : undefined,
+              }}
+              value={propsText}
+              onChange={(e) => handlePropsChange(e.target.value)}
+              spellCheck={false}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Inline styles for the playback controls bar
+
+const controlsBarStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '6px 12px',
+  backgroundColor: colors.surface,
+  borderRadius: 8,
+};
+
+const controlsLeftStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
+};
+
+const controlsRightStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 12,
+};
+
+const controlBtnStyle: React.CSSProperties = {
+  background: 'none',
+  border: 'none',
+  color: colors.textPrimary,
+  cursor: 'pointer',
+  fontSize: 14,
+  width: 28,
+  height: 28,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: 4,
+  padding: 0,
+};
+
+const frameCounterStyle: React.CSSProperties = {
+  fontSize: 12,
+  fontFamily: fonts.mono,
+  color: colors.textSecondary,
+  fontVariantNumeric: 'tabular-nums',
+};
+
+const timeDisplayStyle: React.CSSProperties = {
+  fontSize: 12,
+  fontFamily: fonts.mono,
+  color: colors.textPrimary,
+  fontVariantNumeric: 'tabular-nums',
+};
+
+const speedGroupStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 2,
+};
+
+const speedBtnStyle: React.CSSProperties = {
+  border: 'none',
+  cursor: 'pointer',
+  fontSize: 11,
+  fontFamily: fonts.mono,
+  padding: '2px 6px',
+  borderRadius: 4,
+};

package/ui/RenderQueue.tsx

@@ -0,0 +1,308 @@
+import React, { useCallback } from 'react';
+import { colors, fonts } from './styles';
+
+export type RenderJobStatus = 'queued' | 'bundling' | 'rendering' | 'encoding' | 'done' | 'error' | 'cancelled';
+
+export interface RenderJob {
+  id: string;
+  compositionId: string;
+  compositionName: string;
+  codec: 'mp4' | 'webm';
+  outputPath: string;
+  inputProps: Record<string, unknown>;
+  status: RenderJobStatus;
+  progress: number;
+  renderedFrames: number;
+  totalFrames: number;
+  error?: string;
+}
+
+interface RenderQueueProps {
+  jobs: RenderJob[];
+  open: boolean;
+  onToggle: () => void;
+  onCancel: (jobId: string) => void;
+  onRemove: (jobId: string) => void;
+  onClear: () => void;
+}
+
+function statusLabel(job: RenderJob): string {
+  switch (job.status) {
+    case 'queued':
+      return 'Queued';
+    case 'bundling':
+      return 'Bundling...';
+    case 'rendering':
+      return `Rendering ${job.renderedFrames}/${job.totalFrames}`;
+    case 'encoding':
+      return 'Encoding...';
+    case 'done':
+      return 'Done';
+    case 'error':
+      return 'Failed';
+    case 'cancelled':
+      return 'Cancelled';
+  }
+}
+
+function statusColor(status: RenderJobStatus): string {
+  switch (status) {
+    case 'done':
+      return colors.badge;
+    case 'error':
+      return colors.error;
+    case 'cancelled':
+      return colors.textSecondary;
+    default:
+      return colors.accent;
+  }
+}
+
+function overallProgress(job: RenderJob): number {
+  switch (job.status) {
+    case 'queued':
+      return 0;
+    case 'bundling':
+      return job.progress * 0.1;
+    case 'rendering':
+      return 0.1 + job.progress * 0.8;
+    case 'encoding':
+      return 0.9;
+    case 'done':
+      return 1;
+    default:
+      return 0;
+  }
+}
+
+export const RenderQueue: React.FC<RenderQueueProps> = ({
+  jobs,
+  open,
+  onToggle,
+  onCancel,
+  onRemove,
+  onClear,
+}) => {
+  const activeCount = jobs.filter((j) => j.status === 'queued' || j.status === 'bundling' || j.status === 'rendering' || j.status === 'encoding').length;
+  const hasFinished = jobs.some((j) => j.status === 'done' || j.status === 'error' || j.status === 'cancelled');
+
+  const handleCancel = useCallback((e: React.MouseEvent, jobId: string) => {
+    e.stopPropagation();
+    onCancel(jobId);
+  }, [onCancel]);
+
+  const handleRemove = useCallback((e: React.MouseEvent, jobId: string) => {
+    e.stopPropagation();
+    onRemove(jobId);
+  }, [onRemove]);
+
+  if (!open) return null;
+
+  return (
+    <div style={panelStyle}>
+      {/* Header */}
+      <div style={headerStyle}>
+        <span style={{ fontWeight: 600, fontSize: 11, textTransform: 'uppercase' as const, letterSpacing: '0.05em' }}>
+          Render Queue
+          {activeCount > 0 && (
+            <span style={{ marginLeft: 6, color: colors.accent, fontWeight: 600 }}>
+              ({activeCount})
+            </span>
+          )}
+        </span>
+        <div style={{ display: 'flex', gap: 8 }}>
+          {hasFinished && (
+            <button
+              type="button"
+              style={clearBtnStyle}
+              onClick={onClear}
+              title="Clear finished jobs"
+            >
+              Clear
+            </button>
+          )}
+          <button
+            type="button"
+            style={closeBtnStyle}
+            onClick={onToggle}
+            title="Close panel"
+          >
+            {'\u2715'}
+          </button>
+        </div>
+      </div>
+
+      {/* Job list */}
+      <div style={listStyle}>
+        {jobs.length === 0 ? (
+          <div style={emptyStyle}>
+            No render jobs
+          </div>
+        ) : (
+          jobs.map((job) => {
+            const isActive = job.status === 'bundling' || job.status === 'rendering' || job.status === 'encoding';
+            const isQueued = job.status === 'queued';
+            const isDone = job.status === 'done' || job.status === 'error' || job.status === 'cancelled';
+            const progress = overallProgress(job);
+
+            return (
+              <div key={job.id} style={jobStyle}>
+                {/* Job info */}
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+                  <span style={{ fontSize: 12, fontWeight: 500, color: colors.textPrimary }}>
+                    {job.compositionName}
+                  </span>
+                  {(isActive || isQueued) && (
+                    <button
+                      type="button"
+                      style={cancelBtnStyle}
+                      onClick={(e) => handleCancel(e, job.id)}
+                      title="Cancel"
+                    >
+                      {'\u2715'}
+                    </button>
+                  )}
+                  {isDone && (
+                    <button
+                      type="button"
+                      style={cancelBtnStyle}
+                      onClick={(e) => handleRemove(e, job.id)}
+                      title="Remove"
+                    >
+                      {'\u2715'}
+                    </button>
+                  )}
+                </div>
+
+                {/* Status line */}
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+                  <span style={{ fontSize: 11, color: statusColor(job.status) }}>
+                    {statusLabel(job)}
+                  </span>
+                  <span style={{ fontSize: 10, color: colors.textSecondary, fontFamily: fonts.mono }}>
+                    {job.outputPath}
+                  </span>
+                </div>
+
+                {/* Error message */}
+                {job.status === 'error' && job.error && (
+                  <div style={{ fontSize: 10, color: colors.error, marginBottom: 4, wordBreak: 'break-all' as const }}>
+                    {job.error}
+                  </div>
+                )}
+
+                {/* Progress bar */}
+                {(isActive || isQueued) && (
+                  <div style={progressTrackStyle}>
+                    <div
+                      style={{
+                        ...progressBarStyle,
+                        width: `${progress * 100}%`,
+                        backgroundColor: isQueued ? colors.textSecondary : colors.accent,
+                      }}
+                    />
+                  </div>
+                )}
+
+                {/* Done indicator */}
+                {job.status === 'done' && (
+                  <div style={progressTrackStyle}>
+                    <div style={{ ...progressBarStyle, width: '100%', backgroundColor: colors.badge }} />
+                  </div>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Styles
+
+const panelStyle: React.CSSProperties = {
+  width: 300,
+  minWidth: 300,
+  height: '100%',
+  backgroundColor: colors.surface,
+  borderLeft: `1px solid ${colors.border}`,
+  display: 'flex',
+  flexDirection: 'column',
+  flexShrink: 0,
+};
+
+const headerStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '12px 16px',
+  color: colors.textSecondary,
+  borderBottom: `1px solid ${colors.border}`,
+  flexShrink: 0,
+};
+
+const listStyle: React.CSSProperties = {
+  flex: 1,
+  overflowY: 'auto',
+  padding: 8,
+};
+
+const emptyStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 80,
+  color: colors.textSecondary,
+  fontSize: 12,
+};
+
+const jobStyle: React.CSSProperties = {
+  padding: '10px 12px',
+  backgroundColor: colors.bg,
+  borderRadius: 6,
+  marginBottom: 6,
+};
+
+const progressTrackStyle: React.CSSProperties = {
+  height: 3,
+  backgroundColor: colors.border,
+  borderRadius: 2,
+  overflow: 'hidden',
+};
+
+const progressBarStyle: React.CSSProperties = {
+  height: '100%',
+  borderRadius: 2,
+  transition: 'width 0.3s ease',
+};
+
+const closeBtnStyle: React.CSSProperties = {
+  background: 'none',
+  border: 'none',
+  color: colors.textSecondary,
+  cursor: 'pointer',
+  fontSize: 12,
+  padding: '2px 4px',
+};
+
+const clearBtnStyle: React.CSSProperties = {
+  background: 'none',
+  border: `1px solid ${colors.border}`,
+  color: colors.textSecondary,
+  cursor: 'pointer',
+  fontSize: 10,
+  padding: '2px 8px',
+  borderRadius: 4,
+  fontFamily: fonts.sans,
+};
+
+const cancelBtnStyle: React.CSSProperties = {
+  background: 'none',
+  border: 'none',
+  color: colors.textSecondary,
+  cursor: 'pointer',
+  fontSize: 10,
+  padding: '2px 4px',
+  lineHeight: 1,
+};