@hyperframes/studio 0.7.38 → 0.7.40

package/src/player/components/TimelineClip.test.tsx

@@ -0,0 +1,105 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { TimelineElement } from "../store/playerStore";
+import { TimelineClip } from "./TimelineClip";
+import type { TimelineEditCapabilities } from "./timelineEditing";
+
+Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
+  configurable: true,
+  value: true,
+});
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+const capabilities: TimelineEditCapabilities = {
+  canMove: true,
+  canTrimStart: true,
+  canTrimEnd: true,
+};
+
+function renderClip({
+  element,
+  pps = 100,
+  isSelected = false,
+  hasCustomContent = true,
+}: {
+  element: TimelineElement;
+  pps?: number;
+  isSelected?: boolean;
+  hasCustomContent?: boolean;
+}) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+
+  act(() => {
+    root.render(
+      <TimelineClip
+        el={element}
+        pps={pps}
+        clipY={0}
+        isSelected={isSelected}
+        isHovered={false}
+        hasCustomContent={hasCustomContent}
+        capabilities={capabilities}
+        isComposition={false}
+        onHoverStart={vi.fn()}
+        onHoverEnd={vi.fn()}
+        onClick={vi.fn()}
+        onDoubleClick={vi.fn()}
+      >
+        <div data-custom-content="true" />
+      </TimelineClip>,
+    );
+  });
+
+  return { host, root };
+}
+
+describe("TimelineClip", () => {
+  it("renders the clip label above custom content without showing default timecode", () => {
+    const { host, root } = renderClip({
+      element: { id: "hero", label: "Hero", tag: "div", start: 1, duration: 0.5, track: 0 },
+    });
+
+    expect(host.querySelector(".timeline-clip__label")?.textContent).toBe("Hero");
+    expect(host.querySelector(".timeline-clip__timecode")).toBeNull();
+
+    act(() => root.unmount());
+  });
+
+  it("keeps selected narrow clips labeled even when they render custom content", () => {
+    const { host, root } = renderClip({
+      element: { id: "fx", label: "FX", tag: "div", start: 0, duration: 0.1, track: 0 },
+      isSelected: true,
+    });
+
+    expect(host.querySelector(".timeline-clip__label")?.textContent).toBe("FX");
+    expect(host.querySelector(".timeline-clip__timecode")).toBeNull();
+
+    act(() => root.unmount());
+  });
+
+  it("marks hidden clips for active-state suppression", () => {
+    const { host, root } = renderClip({
+      element: {
+        id: "hidden",
+        label: "Hidden",
+        tag: "div",
+        start: 0,
+        duration: 1,
+        track: 0,
+        hidden: true,
+      },
+    });
+
+    expect(host.querySelector(".timeline-clip")?.getAttribute("data-clip-hidden")).toBe("true");
+
+    act(() => root.unmount());
+  });
+});

package/src/player/components/TimelineClip.tsx

@@ -1,6 +1,4 @@
-import type { TimelineTrackStyle } from "./timelineTheme";
-
-import { memo, type ReactNode } from "react";
+import { memo, type CSSProperties, type ReactNode } from "react";
 import type { TimelineElement } from "../store/playerStore";
 import { defaultTimelineTheme, getClipHandleOpacity, type TimelineTheme } from "./timelineTheme";
 import type { TimelineEditCapabilities } from "./timelineEditing";
@@ -15,7 +13,6 @@ interface TimelineClipProps {
   hasCustomContent: boolean;
   capabilities: TimelineEditCapabilities;
   theme?: TimelineTheme;
-  trackStyle: TimelineTrackStyle;
   isComposition: boolean;
   onHoverStart: () => void;
   onHoverEnd: () => void;
@@ -27,6 +24,7 @@ interface TimelineClipProps {
   children?: ReactNode;
 }
 
+// fallow-ignore-next-line complexity
 export const TimelineClip = memo(function TimelineClip({
   el,
   pps,
@@ -37,7 +35,6 @@ export const TimelineClip = memo(function TimelineClip({
   hasCustomContent,
   capabilities,
   theme = defaultTimelineTheme,
-  trackStyle,
   isComposition,
   onHoverStart,
   onHoverEnd,
@@ -51,45 +48,43 @@ export const TimelineClip = memo(function TimelineClip({
   const leftPx = el.start * pps;
   const widthPx = Math.max(el.duration * pps, 4);
   const handleOpacity = getClipHandleOpacity({ isHovered, isSelected, isDragging });
-
-  const borderColor = isSelected
-    ? trackStyle.accent
-    : isHovered
-      ? theme.clipBorderHover
-      : theme.clipBorder;
-  const boxShadow = isDragging
-    ? theme.clipShadowDragging
-    : isSelected
-      ? `0 0 0 1px ${trackStyle.accent}80, 0 0 8px ${trackStyle.accent}25`
-      : isHovered
-        ? theme.clipShadowHover
-        : theme.clipShadow;
   const displayLabel = el.label || el.id || el.tag;
-  const showHandles = handleOpacity > 0.01;
+  const showHandles = handleOpacity > 0.01 && (widthPx >= 32 || isSelected);
+  const showLabel = widthPx >= 40 || isSelected;
+  const showDefaultText = !hasCustomContent && (widthPx >= 40 || isSelected);
+  const startLabel = el.start.toFixed(1);
+  const endLabel = (el.start + el.duration).toFixed(1);
+  const clipClassName = [
+    "timeline-clip",
+    "absolute",
+    hasCustomContent ? "overflow-visible" : "overflow-hidden",
+    isSelected ? "is-selected" : "",
+    isHovered ? "is-hovered" : "",
+    isDragging ? "is-dragging" : "",
+    showDefaultText ? "" : "is-micro",
+  ]
+    .filter((className) => className.length > 0)
+    .join(" ");
+  const style: CSSProperties = {
+    left: leftPx,
+    width: widthPx,
+    top: clipY,
+    bottom: clipY,
+    borderRadius: theme.clipRadius,
+    zIndex: isDragging ? 20 : isSelected ? 10 : isHovered ? 5 : 1,
+    cursor: capabilities.canMove ? "grab" : "default",
+    transform: isDragging ? "translateY(-1px)" : undefined,
+  };
 
   return (
     <div
       data-clip="true"
-      className={
-        hasCustomContent
-          ? "absolute overflow-visible"
-          : "absolute flex items-center overflow-visible"
-      }
-      style={{
-        left: leftPx,
-        width: widthPx,
-        top: clipY,
-        bottom: clipY,
-        borderRadius: theme.clipRadius,
-        background: trackStyle.clip,
-        border: `1px solid ${borderColor}`,
-        boxShadow,
-        transition: "border-color 100ms, box-shadow 100ms",
-        zIndex: isDragging ? 20 : isSelected ? 10 : isHovered ? 5 : 1,
-        cursor: capabilities.canMove ? "grab" : "default",
-        transform: isDragging ? "translateY(-1px)" : undefined,
-        opacity: isDragging ? 0.92 : 1,
-      }}
+      data-el-id={el.key ?? el.id}
+      data-clip-start={el.start}
+      data-clip-end={el.start + el.duration}
+      data-clip-hidden={el.hidden ? "true" : undefined}
+      className={clipClassName}
+      style={style}
       title={
         isComposition
           ? `${el.compositionSrc} • Double-click to open`
@@ -102,22 +97,6 @@ export const TimelineClip = memo(function TimelineClip({
       onDoubleClick={onDoubleClick}
       onContextMenu={onContextMenu}
     >
-      {/* Left accent stripe — wider + brighter for expanded sub-comp children */}
-      <div
-        aria-hidden="true"
-        style={{
-          position: "absolute",
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: el.expandedParentStart !== undefined ? 4 : 3,
-          background: trackStyle.accent,
-          opacity: el.expandedParentStart !== undefined ? 0.8 : isSelected ? 0.7 : 0.3,
-          borderRadius: `${theme.clipRadius} 0 0 ${theme.clipRadius}`,
-          zIndex: 2,
-          pointerEvents: "none",
-        }}
-      />
       {/* Left trim handle */}
       {showHandles && capabilities.canTrimStart && (
         <div
@@ -134,6 +113,7 @@ export const TimelineClip = memo(function TimelineClip({
           }}
         >
           <div
+            className="timeline-clip__handle-bar"
             style={{
               position: "absolute",
               left: 4,
@@ -141,7 +121,7 @@ export const TimelineClip = memo(function TimelineClip({
               bottom: 6,
               width: 2,
               borderRadius: 1,
-              background: trackStyle.accent,
+              background: "rgba(255, 255, 255, 0.55)",
               opacity: handleOpacity * 0.6,
             }}
           />
@@ -163,6 +143,7 @@ export const TimelineClip = memo(function TimelineClip({
           }}
         >
           <div
+            className="timeline-clip__handle-bar"
             style={{
               position: "absolute",
               right: 4,
@@ -170,12 +151,18 @@ export const TimelineClip = memo(function TimelineClip({
               bottom: 6,
               width: 2,
               borderRadius: 1,
-              background: trackStyle.accent,
+              background: "rgba(255, 255, 255, 0.55)",
               opacity: handleOpacity * 0.6,
             }}
           />
         </div>
       )}
+      {showLabel && <span className="timeline-clip__label">{displayLabel}</span>}
+      {showDefaultText && (
+        <span className="timeline-clip__timecode">
+          {startLabel}-{endLabel}s
+        </span>
+      )}
       {children}
     </div>
   );

package/src/player/components/TimelineRuler.tsx

@@ -1,6 +1,5 @@
 import { memo } from "react";
 import type { TimelineTheme } from "./timelineTheme";
-import type { TimelineRangeSelection } from "./timelineEditing";
 import { GUTTER, RULER_H, formatTimelineTickLabel } from "./timelineLayout";
 import type { MusicBeatAnalysis } from "@hyperframes/core/beats";
 
@@ -12,8 +11,6 @@ interface TimelineRulerProps {
   totalH: number;
   effectiveDuration: number;
   majorTickInterval: number;
-  shiftHeld: boolean;
-  rangeSelection: TimelineRangeSelection | null;
   theme: TimelineTheme;
   beatAnalysis?: MusicBeatAnalysis | null;
 }
@@ -26,8 +23,6 @@ export const TimelineRuler = memo(function TimelineRuler({
   totalH,
   effectiveDuration,
   majorTickInterval,
-  shiftHeld,
-  rangeSelection,
   theme,
   beatAnalysis,
 }: TimelineRulerProps) {
@@ -87,35 +82,34 @@ export const TimelineRuler = memo(function TimelineRuler({
       {/* Ruler */}
       <div
         className="relative overflow-hidden"
-        style={{ height: RULER_H, marginLeft: GUTTER, width: trackContentWidth }}
+        style={{
+          height: RULER_H,
+          marginLeft: GUTTER,
+          width: trackContentWidth,
+          background: theme.gutterBackground,
+          borderBottom: `1px solid ${theme.rulerBorder}`,
+        }}
       >
-        {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 className="w-px h-2" 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 }}
-          >
+          <div key={`M-${t}`} className="absolute top-0" style={{ left: t * pps }}>
             <span
-              className="text-[9px] font-mono tabular-nums leading-none mb-0.5"
-              style={{ color: theme.tickText }}
+              className="absolute font-mono tabular-nums leading-none whitespace-nowrap"
+              style={{
+                color: theme.tickText,
+                left: 5,
+                top: 5,
+                fontSize: 10,
+              }}
             >
               {formatTimelineTickLabel(t, effectiveDuration, majorTickInterval)}
             </span>
-            <div className="w-px h-[5px]" style={{ background: theme.tickMajor }} />
+            <div className="w-px" style={{ height: RULER_H, background: theme.tickMajor }} />
           </div>
         ))}
       </div>

package/src/player/components/TimelineShortcutHint.tsx

@@ -0,0 +1,26 @@
+import type { TimelineTheme } from "./timelineTheme";
+
+interface TimelineShortcutHintProps {
+  theme: TimelineTheme;
+}
+
+export function TimelineShortcutHint({ theme }: TimelineShortcutHintProps) {
+  return (
+    <div className="absolute bottom-2 right-3 pointer-events-none z-20">
+      <div
+        className="flex items-center gap-1.5 px-2 py-1 rounded-md border"
+        style={{ background: "rgba(17,23,35,0.84)", borderColor: theme.gutterBorder }}
+      >
+        <kbd
+          className="text-[9px] font-mono px-1 py-0.5 rounded"
+          style={{ color: theme.textSecondary, background: "rgba(255,255,255,0.06)" }}
+        >
+          Shift
+        </kbd>
+        <span className="text-[9px]" style={{ color: theme.textSecondary }}>
+          + drag/click to edit range
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/player/components/TimelineTypes.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import type { TimelineElement } from "../store/playerStore";
+import type { TimelineDropCallbacks } from "./timelineCallbacks";
+import type { TimelineTheme } from "./timelineTheme";
+import type { TimelineEditOverrides } from "./useResolvedTimelineEditCallbacks";
+
+export interface TimelineProps extends TimelineDropCallbacks, TimelineEditOverrides {
+  onSeek?: (time: number) => void;
+  onDrillDown?: (element: TimelineElement) => void;
+  renderClipContent?: (
+    element: TimelineElement,
+    style: { clip: string; label: string },
+  ) => ReactNode;
+  renderClipOverlay?: (element: TimelineElement) => ReactNode;
+  onDeleteElement?: (element: TimelineElement) => Promise<void> | void;
+  onSelectElement?: (element: TimelineElement | null) => void;
+  theme?: Partial<TimelineTheme>;
+}

package/src/player/components/VideoThumbnail.tsx

@@ -47,6 +47,7 @@ export const VideoThumbnail = memo(function VideoThumbnail({
       },
       { rootMargin: "200px" },
     );
+    // fallow-ignore-next-line code-duplication
     ioRef.current.observe(el);
 
     const target = el.parentElement || el;
@@ -177,20 +178,22 @@ export const VideoThumbnail = memo(function VideoThumbnail({
         />
       )}
 
-      <div
-        className="absolute bottom-0 left-0 right-0 z-10 px-1.5 pb-0.5 pt-3"
-        style={{
-          background:
-            "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%)",
-        }}
-      >
-        <span
-          className="text-[9px] font-semibold truncate block leading-tight"
-          style={{ color: labelColor, textShadow: "0 1px 2px rgba(0,0,0,0.9)" }}
+      {label && (
+        <div
+          className="absolute bottom-0 left-0 right-0 z-10 px-1.5 pb-0.5 pt-3"
+          style={{
+            background:
+              "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%)",
+          }}
         >
-          {label}
-        </span>
-      </div>
+          <span
+            className="text-[9px] font-semibold truncate block leading-tight"
+            style={{ color: labelColor, textShadow: "0 1px 2px rgba(0,0,0,0.9)" }}
+          >
+            {label}
+          </span>
+        </div>
+      )}
     </div>
   );
 });

package/src/player/components/timelineCallbacks.ts

@@ -32,6 +32,7 @@ export interface TimelineEditCallbacks {
     element: TimelineElement,
     updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
   ) => Promise<void> | void;
+  onToggleTrackHidden?: (track: number, hidden: boolean) => Promise<void> | void;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   onSplitElement?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   onRazorSplit?: (element: TimelineElement, splitTime: number) => Promise<void> | void;

package/src/player/components/timelineIcons.tsx

@@ -1,52 +1,10 @@
-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 type TrackVisualStyle = TimelineTrackStyle;
 
 export function getTrackStyle(tag: string): TrackVisualStyle {
   // Defensive: callers may pass an empty/undefined tag; fall back to "div"
   // (restores the #1679 null-guard that a restack had dropped).
   const safeTag = tag || "div";
-  const trackStyle = getTimelineTrackStyle(safeTag);
-  const normalized = safeTag.toLowerCase();
-  const icon =
-    normalized.startsWith("h") && normalized.length === 2 && "123456".includes(normalized[1] ?? "")
-      ? ICONS.h1
-      : (ICONS[normalized] ?? IconComposition);
-  return { ...trackStyle, icon };
+  return getTimelineTrackStyle(safeTag);
 }

package/src/player/components/timelineLayout.ts

@@ -11,9 +11,9 @@ const TIMELINE_SCROLL_BUFFER = 20;
 
 /* ── Tick generation ──────────────────────────────────────────────── */
 function getMajorTickInterval(duration: number, pixelsPerSecond?: number): number {
-  const zoomIntervals = [0.25, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600];
+  const zoomIntervals = [0.02, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600];
   if (Number.isFinite(pixelsPerSecond) && (pixelsPerSecond ?? 0) > 0) {
-    const targetMajorPx = 128;
+    const targetMajorPx = 88;
     return (
       zoomIntervals.find((interval) => interval * (pixelsPerSecond ?? 0) >= targetMajorPx) ?? 600
     );
@@ -24,20 +24,14 @@ function getMajorTickInterval(duration: number, pixelsPerSecond?: number): numbe
 }
 
 function getMinorTickInterval(majorInterval: number, pixelsPerSecond?: number): number {
-  let interval = majorInterval / 2;
-  if (majorInterval >= 30) interval = majorInterval / 6;
-  else if (majorInterval >= 15) interval = majorInterval / 3;
-  else if (majorInterval >= 5) interval = majorInterval / 5;
-  else if (majorInterval >= 1) interval = majorInterval / 4;
-
   if (
     Number.isFinite(pixelsPerSecond) &&
     (pixelsPerSecond ?? 0) > 0 &&
-    interval * (pixelsPerSecond ?? 0) < 20
+    (majorInterval / 2) * (pixelsPerSecond ?? 0) < 12
   ) {
-    return Math.max(0.25, majorInterval / 2);
+    return 0;
   }
-  return Math.max(0.25, interval);
+  return majorInterval / 2;
 }
 
 export function generateTicks(
@@ -51,17 +45,13 @@ export function generateTicks(
   const major: number[] = [];
   const minor: number[] = [];
   const maxTicks = 2000; // Safety cap to prevent runaway tick generation
-  for (
-    let t = 0;
-    t <= duration + 0.001 && major.length + minor.length < maxTicks;
-    t += minorInterval
-  ) {
+  for (let t = 0; t <= duration + 0.001 && major.length < maxTicks; t += majorInterval) {
     const rounded = Math.round(t * 100) / 100;
-    const isMajor =
-      Math.abs(rounded % majorInterval) < 0.01 ||
-      Math.abs((rounded % majorInterval) - majorInterval) < 0.01;
-    if (isMajor) major.push(rounded);
-    else minor.push(rounded);
+    major.push(rounded);
+    if (minorInterval > 0 && major.length + minor.length < maxTicks) {
+      const midpoint = Math.round((t + minorInterval) * 100) / 100;
+      if (midpoint <= duration + 0.001) minor.push(midpoint);
+    }
   }
   return { major, minor };
 }
@@ -69,6 +59,12 @@ export function generateTicks(
 export function formatTimelineTickLabel(time: number, duration: number, majorInterval: number) {
   if (!Number.isFinite(time)) return "0:00";
   const safeTime = Math.max(0, time);
+  if (majorInterval < 0.1) {
+    const totalHundredths = Math.round(safeTime * 100);
+    const wholeSeconds = Math.floor(totalHundredths / 100);
+    const hundredth = totalHundredths % 100;
+    return `${formatTime(wholeSeconds)}.${hundredth.toString().padStart(2, "0")}`;
+  }
   if (majorInterval < 1) {
     const totalTenths = Math.round(safeTime * 10);
     const wholeSeconds = Math.floor(totalTenths / 10);
@@ -101,7 +97,7 @@ export function getTimelineScrollLeftForZoomTransition(
   nextZoomMode: ZoomMode,
   currentScrollLeft: number,
 ): number {
-  if (previousZoomMode === "manual" && nextZoomMode === "fit") return 0;
+  if (nextZoomMode === "fit") return 0;
   return currentScrollLeft;
 }