@hyperframes/studio 0.6.0-alpha.9 → 0.6.0

package/src/player/components/Timeline.tsx

@@ -28,11 +28,6 @@ import {
 } from "./timelineTheme";
 import { getPinchTimelineZoomPercent, getTimelinePixelsPerSecond } from "./timelineZoom";
 import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
-import {
-  canInspectTimelineElement,
-  getTimelineElementKey,
-  isAudioTimelineElement,
-} from "../../utils/timelineInspector";
 
 /* ── Layout ─────────────────────────────────────────────────────── */
 const GUTTER = 32;
@@ -335,12 +330,6 @@ interface TimelineProps {
     intent: BlockedTimelineEditIntent,
   ) => void;
   onSelectElement?: (element: import("../store/playerStore").TimelineElement | null) => void;
-  onInspectElement?: (element: import("../store/playerStore").TimelineElement) => void;
-  inspectedElementId?: string | null;
-  layerChildCounts?: ReadonlyMap<string, number>;
-  thumbnailedElementIds?: ReadonlySet<string>;
-  onToggleElementThumbnail?: (element: import("../store/playerStore").TimelineElement) => void;
-  disabled?: boolean;
   theme?: Partial<TimelineTheme>;
 }
 
@@ -389,12 +378,6 @@ export const Timeline = memo(function Timeline({
   onResizeElement,
   onBlockedEditAttempt,
   onSelectElement,
-  onInspectElement,
-  inspectedElementId,
-  layerChildCounts,
-  thumbnailedElementIds,
-  onToggleElementThumbnail,
-  disabled = false,
   theme: themeOverrides,
 }: TimelineProps = {}) {
   const theme = useMemo(() => ({ ...defaultTimelineTheme, ...themeOverrides }), [themeOverrides]);
@@ -414,8 +397,6 @@ export const Timeline = memo(function Timeline({
   const scrollRef = useRef<HTMLDivElement>(null);
   const [hoveredClip, setHoveredClip] = useState<string | null>(null);
   const isDragging = useRef(false);
-  const disabledRef = useRef(disabled);
-  disabledRef.current = disabled;
   const shiftClickClipRef = useRef<{
     element: TimelineElement;
     anchorX: number;
@@ -446,7 +427,6 @@ export const Timeline = memo(function Timeline({
   const resizingClipRef = useRef<ResizingClipState | null>(null);
   resizingClipRef.current = resizingClip;
   const blockedClipRef = useRef<BlockedClipState | null>(null);
-  const deleteInFlightRef = useRef(false);
   const onMoveElementRef = useRef(onMoveElement);
   onMoveElementRef.current = onMoveElement;
   const onResizeElementRef = useRef(onResizeElement);
@@ -502,19 +482,6 @@ export const Timeline = memo(function Timeline({
     if (shortcutHintRafRef.current) cancelAnimationFrame(shortcutHintRafRef.current);
   });
 
-  useEffect(() => {
-    if (!disabled) return;
-    stopClipDragAutoScrollRef.current();
-    isDragging.current = false;
-    isRangeSelecting.current = false;
-    blockedClipRef.current = null;
-    setDraggedClip(null);
-    setResizingClip(null);
-    setRangeSelection(null);
-    setShowPopover(false);
-    setIsDragOver(false);
-  }, [disabled]);
-
   // Effective duration: max of store duration and the furthest element end.
   // processTimelineMessage updates elements but not duration, so elements can
   // extend beyond the store's duration — this ensures fit mode shows everything.
@@ -741,7 +708,6 @@ export const Timeline = memo(function Timeline({
 
   const seekFromX = useCallback(
     (clientX: number) => {
-      if (disabledRef.current) return;
       const el = scrollRef.current;
       if (!el || effectiveDuration <= 0) return;
       const rect = el.getBoundingClientRect();
@@ -799,7 +765,6 @@ export const Timeline = memo(function Timeline({
     };
 
     const handleWindowPointerMove = (e: PointerEvent) => {
-      if (disabledRef.current) return;
       const drag = draggedClipRef.current;
       const resize = resizingClipRef.current;
       const blocked = blockedClipRef.current;
@@ -884,7 +849,6 @@ export const Timeline = memo(function Timeline({
 
     const handleWindowPointerUp = () => {
       stopClipDragAutoScrollRef.current();
-      if (disabledRef.current) return;
       const resize = resizingClipRef.current;
       if (resize) {
         resizingClipRef.current = null;
@@ -976,35 +940,20 @@ export const Timeline = memo(function Timeline({
     };
   });
 
-  useMountEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (disabledRef.current) return;
-      if (!shouldHandleTimelineDeleteKey(event)) return;
-      const selected = selectedElementRef.current;
-      const onDelete = onDeleteElementRef.current;
-      if (!selected || !onDelete || deleteInFlightRef.current) return;
-      event.preventDefault();
-      deleteInFlightRef.current = true;
-      suppressClickRef.current = true;
+  const prevSelectedRef = useRef(selectedElementRef.current);
+  // eslint-disable-next-line no-restricted-syntax, react-hooks/exhaustive-deps
+  useEffect(() => {
+    const prev = prevSelectedRef.current;
+    const curr = selectedElementRef.current;
+    prevSelectedRef.current = curr;
+    if (prev && !curr) {
       setShowPopover(false);
       setRangeSelection(null);
-      Promise.resolve(onDelete(selected)).finally(() => {
-        deleteInFlightRef.current = false;
-        requestAnimationFrame(() => {
-          suppressClickRef.current = false;
-        });
-      });
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    }
   });
 
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
-      if (disabledRef.current) {
-        e.preventDefault();
-        return;
-      }
       if (e.button !== 0) return;
 
       // Shift+click starts range selection — even on clips
@@ -1036,7 +985,6 @@ export const Timeline = memo(function Timeline({
   );
   const handlePointerMove = useCallback(
     (e: React.PointerEvent) => {
-      if (disabledRef.current) return;
       if (isRangeSelecting.current) {
         const rect = scrollRef.current?.getBoundingClientRect();
         if (rect) {
@@ -1107,7 +1055,6 @@ export const Timeline = memo(function Timeline({
 
   const [isDragOver, setIsDragOver] = useState(false);
   const handleAssetDragOver = useCallback((e: React.DragEvent) => {
-    if (disabledRef.current) return;
     const hasFiles = e.dataTransfer.files.length > 0;
     const hasAsset = Array.from(e.dataTransfer.types).includes(TIMELINE_ASSET_MIME);
     if (!hasFiles && !hasAsset) return;
@@ -1122,7 +1069,6 @@ export const Timeline = memo(function Timeline({
     (e: React.DragEvent) => {
       e.preventDefault();
       setIsDragOver(false);
-      if (disabledRef.current) return;
       if (onFileDrop && e.dataTransfer.files.length > 0) {
         const scroll = scrollRef.current;
         const rect = scroll?.getBoundingClientRect();
@@ -1179,7 +1125,6 @@ export const Timeline = memo(function Timeline({
 
   const handlePinchWheel = useCallback(
     (e: WheelEvent) => {
-      if (disabledRef.current) return;
       if (!e.ctrlKey) return;
       const scroll = scrollRef.current;
       if (!scroll || durationRef.current <= 0 || fitPpsRef.current <= 0 || ppsRef.current <= 0) {
@@ -1235,7 +1180,6 @@ export const Timeline = memo(function Timeline({
         className={`h-full border-t bg-[#0a0a0b] flex flex-col select-none transition-colors duration-150 ${
           isDragOver ? "border-studio-accent/50 bg-studio-accent/[0.03]" : "border-neutral-800/50"
         }`}
-        aria-disabled={disabled || undefined}
         onDragOver={handleAssetDragOver}
         onDragLeave={() => setIsDragOver(false)}
         onDrop={handleAssetDrop}
@@ -1391,13 +1335,8 @@ export const Timeline = memo(function Timeline({
     <div
       ref={setContainerRef}
       aria-label="Timeline"
-      aria-disabled={disabled || undefined}
-      className={`relative border-t select-none h-full overflow-hidden transition-opacity ${
-        disabled
-          ? "cursor-not-allowed opacity-45"
-          : shiftHeld
-            ? "cursor-crosshair"
-            : "cursor-default"
+      className={`relative border-t select-none h-full overflow-hidden ${
+        shiftHeld ? "cursor-crosshair" : "cursor-default"
       }`}
       style={{
         touchAction: "pan-x pan-y",
@@ -1536,14 +1475,6 @@ export const Timeline = memo(function Timeline({
                     const elementKey = el.key ?? el.id;
                     const capabilities = getTimelineEditCapabilities(el);
                     const isSelected = selectedElementId === elementKey;
-                    const canInspectClip = canInspectTimelineElement(el);
-                    const isInspectorActive =
-                      canInspectClip && inspectedElementId === getTimelineElementKey(el);
-                    const childCount = canInspectClip
-                      ? (layerChildCounts?.get(elementKey) ?? 0)
-                      : 0;
-                    const isThumbnailActive = thumbnailedElementIds?.has(elementKey) ?? false;
-                    const thumbnailLabel = isAudioTimelineElement(el) ? "waveform" : "thumbnail";
                     const isComposition = !!el.compositionSrc;
                     const clipKey = `${elementKey}-${i}`;
                     const isHovered = hoveredClip === clipKey;
@@ -1567,32 +1498,8 @@ export const Timeline = memo(function Timeline({
                         theme={theme}
                         trackStyle={clipStyle}
                         isComposition={isComposition}
-                        isInspectorActive={isInspectorActive}
-                        isThumbnailActive={isThumbnailActive}
-                        thumbnailLabel={thumbnailLabel}
-                        childCount={childCount}
                         onHoverStart={() => setHoveredClip(clipKey)}
                         onHoverEnd={() => setHoveredClip(null)}
-                        onInspectorClick={
-                          canInspectClip && onInspectElement
-                            ? (e) => {
-                                e.stopPropagation();
-                                if (suppressClickRef.current) return;
-                                setSelectedElementId(elementKey);
-                                onSelectElement?.(el);
-                                onInspectElement(el);
-                              }
-                            : undefined
-                        }
-                        onThumbnailClick={
-                          onToggleElementThumbnail && canInspectClip
-                            ? (e) => {
-                                e.stopPropagation();
-                                if (suppressClickRef.current) return;
-                                onToggleElementThumbnail(el);
-                              }
-                            : undefined
-                        }
                         onResizeStart={(edge, e) => {
                           if (e.button !== 0 || e.shiftKey || !onResizeElement) return;
                           if (edge === "start" && !capabilities.canTrimStart) return;

package/src/player/components/TimelineClip.tsx

@@ -1,5 +1,4 @@
 import type { TimelineTrackStyle } from "./timelineTheme";
-// TimelineClip — Visual clip component for the NLE timeline.
 
 import { memo, type ReactNode } from "react";
 import type { TimelineElement } from "../store/playerStore";
@@ -17,67 +16,15 @@ interface TimelineClipProps {
   theme?: TimelineTheme;
   trackStyle: TimelineTrackStyle;
   isComposition: boolean;
-  isInspectorActive?: boolean;
-  isThumbnailActive?: boolean;
-  thumbnailLabel?: string;
-  childCount?: number;
   onHoverStart: () => void;
   onHoverEnd: () => void;
   onPointerDown?: (e: React.PointerEvent) => void;
   onResizeStart?: (edge: "start" | "end", e: React.PointerEvent) => void;
-  onInspectorClick?: (e: React.MouseEvent) => void;
-  onThumbnailClick?: (e: React.MouseEvent) => void;
   onClick: (e: React.MouseEvent) => void;
   onDoubleClick: (e: React.MouseEvent) => void;
   children?: ReactNode;
 }
 
-export const TIMELINE_CLIP_CONTROL_Z_INDEX = 20;
-
-const COMPACT_CLIP_CONTROL_WIDTH = 112;
-
-interface TimelineClipControlPresentationInput {
-  widthPx: number;
-  isSelected: boolean;
-  isHovered: boolean;
-  isInspectorActive: boolean;
-  isThumbnailActive: boolean;
-  isDragging: boolean;
-}
-
-export interface TimelineClipControlPresentation {
-  compact: boolean;
-  showControls: boolean;
-  containerClassName: string;
-  buttonClassName: string;
-  iconSize: number;
-}
-
-export function getTimelineClipControlPresentation({
-  widthPx,
-  isSelected,
-  isHovered,
-  isInspectorActive,
-  isThumbnailActive,
-  isDragging,
-}: TimelineClipControlPresentationInput): TimelineClipControlPresentation {
-  const compact = widthPx < COMPACT_CLIP_CONTROL_WIDTH;
-  const isInteractive = isHovered || isSelected || isInspectorActive || isThumbnailActive;
-  const showControls = !isDragging && (!compact || isInteractive);
-
-  return {
-    compact,
-    showControls,
-    containerClassName: compact
-      ? "absolute right-1 top-1 flex items-center gap-1"
-      : "absolute right-2 top-2 flex items-center gap-1",
-    buttonClassName: compact
-      ? "flex h-5 w-5 items-center justify-center rounded-[7px]"
-      : "flex h-6 w-6 items-center justify-center rounded-md",
-    iconSize: compact ? 12 : 14,
-  };
-}
-
 export const TimelineClip = memo(function TimelineClip({
   el,
   pps,
@@ -89,16 +36,10 @@ export const TimelineClip = memo(function TimelineClip({
   theme = defaultTimelineTheme,
   trackStyle,
   isComposition,
-  isInspectorActive = false,
-  isThumbnailActive = false,
-  thumbnailLabel = "thumbnail",
-  childCount = 0,
   onHoverStart,
   onHoverEnd,
   onPointerDown,
   onResizeStart,
-  onInspectorClick,
-  onThumbnailClick,
   onClick,
   onDoubleClick,
   children,
@@ -120,38 +61,7 @@ export const TimelineClip = memo(function TimelineClip({
         : theme.clipShadow;
   const capabilities = getTimelineEditCapabilities(el);
   const displayLabel = el.label || el.id || el.tag;
-  const inspectorLabel =
-    childCount > 0
-      ? `${childCount} nested selectable layer${childCount === 1 ? "" : "s"}`
-      : "Inspect clip layer";
   const showHandles = handleOpacity > 0.01;
-  const baseBackgroundImage = isSelected ? theme.clipBackgroundActive : theme.clipBackground;
-  const controlPresentation = getTimelineClipControlPresentation({
-    widthPx,
-    isSelected,
-    isHovered,
-    isInspectorActive,
-    isThumbnailActive,
-    isDragging,
-  });
-  const glossBackgroundImage = isSelected
-    ? "linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0))"
-    : "linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0))";
-  const accentBackgroundImage = `linear-gradient(120deg, ${trackStyle.accent}${
-    isSelected ? "22" : "1e"
-  }, transparent 28%)`;
-  const compositionStripeBackgroundImage =
-    isComposition && !hasCustomContent
-      ? "repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255,255,255,0.05) 3px, rgba(255,255,255,0.05) 6px)"
-      : undefined;
-  const clipBackgroundImage = [
-    compositionStripeBackgroundImage,
-    glossBackgroundImage,
-    accentBackgroundImage,
-    baseBackgroundImage,
-  ]
-    .filter(Boolean)
-    .join(", ");
 
   return (
     <div
@@ -165,7 +75,13 @@ export const TimelineClip = memo(function TimelineClip({
         top: clipY,
         bottom: clipY,
         borderRadius: theme.clipRadius,
-        backgroundImage: clipBackgroundImage,
+        background: isSelected
+          ? `linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), linear-gradient(120deg, ${trackStyle.accent}22, transparent 28%), ${theme.clipBackgroundActive}`
+          : `linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), linear-gradient(120deg, ${trackStyle.accent}1e, transparent 28%), ${theme.clipBackground}`,
+        backgroundImage:
+          isComposition && !hasCustomContent
+            ? `repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255,255,255,0.05) 3px, rgba(255,255,255,0.05) 6px)`
+            : undefined,
         border: `1px solid ${borderColor}`,
         boxShadow,
         transition:
@@ -176,8 +92,8 @@ export const TimelineClip = memo(function TimelineClip({
       }}
       title={
         isComposition
-          ? `${el.compositionSrc} \u2022 Double-click to open`
-          : `${displayLabel} \u2022 ${el.start.toFixed(1)}s \u2013 ${(el.start + el.duration).toFixed(1)}s`
+          ? `${el.compositionSrc} • Double-click to open`
+          : `${displayLabel} • ${el.start.toFixed(1)}s – ${(el.start + el.duration).toFixed(1)}s`
       }
       onPointerEnter={onHoverStart}
       onPointerLeave={onHoverEnd}
@@ -185,157 +101,6 @@ export const TimelineClip = memo(function TimelineClip({
       onClick={onClick}
       onDoubleClick={onDoubleClick}
     >
-      {childCount > 0 && controlPresentation.showControls && (
-        <button
-          type="button"
-          className={`absolute flex items-center gap-1 rounded-md border border-studio-accent/30 bg-neutral-950/75 text-[10px] font-semibold tabular-nums text-studio-accent shadow-lg shadow-black/25 backdrop-blur transition-colors hover:border-studio-accent/60 hover:bg-studio-accent/15 ${
-            controlPresentation.compact ? "left-1 top-1 h-5 px-1" : "left-2 top-2 h-6 px-1.5"
-          }`}
-          style={{ zIndex: TIMELINE_CLIP_CONTROL_Z_INDEX }}
-          title={inspectorLabel}
-          aria-label={inspectorLabel}
-          onPointerDown={(event) => {
-            event.stopPropagation();
-          }}
-          onClick={(event) => {
-            event.stopPropagation();
-            onInspectorClick?.(event);
-          }}
-        >
-          <svg
-            width={controlPresentation.compact ? "11" : "13"}
-            height={controlPresentation.compact ? "11" : "13"}
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.8"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <rect x="4" y="4" width="6" height="6" rx="1" />
-            <rect x="14" y="4" width="6" height="6" rx="1" />
-            <rect x="4" y="14" width="6" height="6" rx="1" />
-            <path d="M14 17h6" />
-          </svg>
-          {childCount}
-        </button>
-      )}
-      {onInspectorClick &&
-        controlPresentation.compact &&
-        !controlPresentation.showControls &&
-        !isDragging && (
-          <button
-            type="button"
-            className="group/clip-inspect absolute right-1 top-1/2 flex h-7 w-2 -translate-y-1/2 items-center justify-center rounded-full border border-white/15 bg-neutral-950/70 text-neutral-300 shadow-lg shadow-black/25 backdrop-blur transition-all hover:w-5 hover:border-white/30 hover:bg-neutral-950/90 focus:w-5 focus:border-studio-accent/60 focus:bg-studio-accent/15 focus:outline-none"
-            style={{ zIndex: TIMELINE_CLIP_CONTROL_Z_INDEX }}
-            title={inspectorLabel}
-            aria-label={inspectorLabel}
-            onPointerDown={(event) => {
-              event.stopPropagation();
-            }}
-            onClick={(event) => {
-              event.stopPropagation();
-              onInspectorClick(event);
-            }}
-          >
-            <svg
-              className="opacity-0 transition-opacity group-hover/clip-inspect:opacity-100 group-focus/clip-inspect:opacity-100"
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.8"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z" />
-              <circle cx="12" cy="12" r="3" />
-            </svg>
-          </button>
-        )}
-      {(onThumbnailClick || onInspectorClick) && controlPresentation.showControls && (
-        <div
-          className={controlPresentation.containerClassName}
-          style={{ zIndex: TIMELINE_CLIP_CONTROL_Z_INDEX }}
-        >
-          {onThumbnailClick && (
-            <button
-              type="button"
-              className={`${controlPresentation.buttonClassName} border shadow-lg shadow-black/25 backdrop-blur transition-colors ${
-                isThumbnailActive
-                  ? "border-studio-accent/60 bg-studio-accent/18 text-studio-accent"
-                  : "border-white/12 bg-neutral-950/70 text-neutral-400 hover:border-white/24 hover:text-neutral-100"
-              }`}
-              title={
-                isThumbnailActive ? `Hide clip ${thumbnailLabel}` : `Show clip ${thumbnailLabel}`
-              }
-              aria-label={
-                isThumbnailActive ? `Hide clip ${thumbnailLabel}` : `Show clip ${thumbnailLabel}`
-              }
-              onPointerDown={(event) => {
-                event.stopPropagation();
-              }}
-              onClick={(event) => {
-                event.stopPropagation();
-                onThumbnailClick(event);
-              }}
-            >
-              <svg
-                width={controlPresentation.iconSize}
-                height={controlPresentation.iconSize}
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.8"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                aria-hidden="true"
-              >
-                <rect x="3" y="5" width="18" height="14" rx="2" />
-                <circle cx="8" cy="10" r="1.5" />
-                <path d="m4 17 5-5 4 4 2-2 5 5" />
-              </svg>
-            </button>
-          )}
-          {onInspectorClick && (
-            <button
-              type="button"
-              className={`${controlPresentation.buttonClassName} border shadow-lg shadow-black/25 backdrop-blur transition-colors ${
-                isInspectorActive
-                  ? "border-studio-accent/60 bg-studio-accent/18 text-studio-accent"
-                  : "border-white/12 bg-neutral-950/70 text-neutral-400 hover:border-white/24 hover:text-neutral-100"
-              }`}
-              title={inspectorLabel}
-              aria-label={inspectorLabel}
-              onPointerDown={(event) => {
-                event.stopPropagation();
-              }}
-              onClick={(event) => {
-                event.stopPropagation();
-                onInspectorClick(event);
-              }}
-            >
-              <svg
-                width={controlPresentation.iconSize}
-                height={controlPresentation.iconSize}
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.8"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                aria-hidden="true"
-              >
-                <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z" />
-                <circle cx="12" cy="12" r="3" />
-              </svg>
-            </button>
-          )}
-        </div>
-      )}
       <div
         aria-hidden="true"
         role="presentation"