@hyperframes/studio 0.6.0-alpha.9 → 0.6.1

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"

package/src/player/components/TimelineEmptyState.tsx

@@ -0,0 +1,102 @@
+import type { DragEventHandler } from "react";
+import { GUTTER, RULER_H } from "./timelineLayout";
+
+interface TimelineEmptyStateProps {
+  isDragOver: boolean;
+  onFileDrop?: boolean;
+  onDragOver: DragEventHandler<HTMLDivElement>;
+  onDragLeave: DragEventHandler<HTMLDivElement>;
+  onDrop: DragEventHandler<HTMLDivElement>;
+}
+
+export function TimelineEmptyState({
+  isDragOver,
+  onFileDrop,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+}: TimelineEmptyStateProps) {
+  return (
+    <div
+      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"
+      }`}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+    >
+      {/* Ruler */}
+      <div
+        className="flex-shrink-0 border-b border-neutral-800/40 flex items-end relative"
+        style={{ height: RULER_H, paddingLeft: GUTTER }}
+      >
+        {[0, 10, 20, 30, 40, 50].map((s) => (
+          <div
+            key={s}
+            className="flex flex-col items-center"
+            style={{ position: "absolute", left: GUTTER + s * 14 }}
+          >
+            <span className="text-[9px] text-neutral-600 font-mono tabular-nums leading-none mb-0.5">
+              {`${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, "0")}`}
+            </span>
+            <div className="w-px h-[5px] bg-neutral-700/40" />
+          </div>
+        ))}
+      </div>
+      {/* Empty drop zone */}
+      <div className="flex-1 flex items-center justify-center">
+        <div
+          className={`flex items-center gap-3 px-6 py-3 border border-dashed rounded-lg transition-colors duration-150 ${
+            isDragOver ? "border-studio-accent/60 bg-studio-accent/[0.06]" : "border-neutral-700/50"
+          }`}
+        >
+          {isDragOver ? (
+            <>
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="text-studio-accent flex-shrink-0"
+              >
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="7 10 12 15 17 10" />
+                <line x1="12" y1="15" x2="12" y2="3" />
+              </svg>
+              <span className="text-[13px] text-studio-accent">Drop media files to import</span>
+            </>
+          ) : (
+            <>
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="text-neutral-600 flex-shrink-0"
+              >
+                <rect x="2" y="2" width="20" height="20" rx="2" />
+                <path d="M7 2v20" />
+                <path d="M17 2v20" />
+                <path d="M2 7h20" />
+                <path d="M2 17h20" />
+              </svg>
+              <span className="text-[13px] text-neutral-500">
+                {onFileDrop
+                  ? "Drop media here or describe your video to start"
+                  : "Describe your video to start creating"}
+              </span>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/player/components/TimelineRuler.tsx

@@ -0,0 +1,90 @@
+import { memo } from "react";
+import type { TimelineTheme } from "./timelineTheme";
+import type { TimelineRangeSelection } from "./timelineEditing";
+import { GUTTER, RULER_H, formatTimelineTickLabel } from "./timelineLayout";
+
+interface TimelineRulerProps {
+  major: number[];
+  minor: number[];
+  pps: number;
+  trackContentWidth: number;
+  totalH: number;
+  effectiveDuration: number;
+  majorTickInterval: number;
+  shiftHeld: boolean;
+  rangeSelection: TimelineRangeSelection | null;
+  theme: TimelineTheme;
+}
+
+export const TimelineRuler = memo(function TimelineRuler({
+  major,
+  minor,
+  pps,
+  trackContentWidth,
+  totalH,
+  effectiveDuration,
+  majorTickInterval,
+  shiftHeld,
+  rangeSelection,
+  theme,
+}: TimelineRulerProps) {
+  return (
+    <>
+      {/* Grid lines */}
+      <svg
+        className="absolute pointer-events-none"
+        style={{ left: GUTTER, width: trackContentWidth }}
+        height={totalH}
+      >
+        {major.map((t) => {
+          const x = t * pps;
+          return (
+            <line
+              key={`g-${t}`}
+              x1={x}
+              y1={RULER_H}
+              x2={x}
+              y2={totalH}
+              stroke={theme.tickMinor}
+              strokeWidth="1"
+            />
+          );
+        })}
+      </svg>
+
+      {/* Ruler */}
+      <div
+        className="relative overflow-hidden"
+        style={{ height: RULER_H, marginLeft: GUTTER, width: trackContentWidth }}
+      >
+        {shiftHeld && !rangeSelection && (
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
+            <span className="text-[9px] font-medium" style={{ color: theme.textSecondary }}>
+              Drag or click a clip to edit range
+            </span>
+          </div>
+        )}
+        {minor.map((t) => (
+          <div key={`m-${t}`} className="absolute bottom-0" style={{ left: t * pps }}>
+            <div className="w-px h-[3px]" style={{ background: theme.tickMinor }} />
+          </div>
+        ))}
+        {major.map((t) => (
+          <div
+            key={`M-${t}`}
+            className="absolute bottom-0 flex flex-col items-center"
+            style={{ left: t * pps }}
+          >
+            <span
+              className="text-[9px] font-mono tabular-nums leading-none mb-0.5"
+              style={{ color: theme.tickText }}
+            >
+              {formatTimelineTickLabel(t, effectiveDuration, majorTickInterval)}
+            </span>
+            <div className="w-px h-[5px]" style={{ background: theme.tickMajor }} />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+});

package/src/player/components/timelineIcons.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+import { getTimelineTrackStyle, type TimelineTrackStyle } from "./timelineTheme";
+
+export interface TrackVisualStyle extends TimelineTrackStyle {
+  icon: ReactNode;
+}
+
+const ICON_BASE = "/icons/timeline";
+function TimelineIcon({ src }: { src: string }) {
+  return (
+    <img
+      src={src}
+      alt=""
+      width={12}
+      height={12}
+      style={{ filter: "brightness(0) invert(1)" }}
+      draggable={false}
+    />
+  );
+}
+
+const IconCaptions = <TimelineIcon src={`${ICON_BASE}/captions.svg`} />;
+const IconImage = <TimelineIcon src={`${ICON_BASE}/image.svg`} />;
+const IconMusic = <TimelineIcon src={`${ICON_BASE}/music.svg`} />;
+const IconText = <TimelineIcon src={`${ICON_BASE}/text.svg`} />;
+const IconComposition = <TimelineIcon src={`${ICON_BASE}/composition.svg`} />;
+const IconAudio = <TimelineIcon src={`${ICON_BASE}/audio.svg`} />;
+
+const ICONS: Record<string, ReactNode> = {
+  video: IconImage,
+  audio: IconMusic,
+  img: IconImage,
+  div: IconComposition,
+  span: IconCaptions,
+  p: IconText,
+  h1: IconText,
+  section: IconComposition,
+  sfx: IconAudio,
+};
+
+export function getTrackStyle(tag: string): TrackVisualStyle {
+  const trackStyle = getTimelineTrackStyle(tag);
+  const normalized = tag.toLowerCase();
+  const icon =
+    normalized.startsWith("h") && normalized.length === 2 && "123456".includes(normalized[1] ?? "")
+      ? ICONS.h1
+      : (ICONS[normalized] ?? IconComposition);
+  return { ...trackStyle, icon };
+}