@hyperframes/studio 0.6.29 → 0.6.31

package/src/hooks/usePanelLayout.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback, useRef } from "react";
 import type { RightPanelTab } from "../utils/studioHelpers";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../utils/studioUiPreferences";
+import { trackStudioEvent } from "../utils/studioTelemetry";
 
 export interface InitialPanelLayoutState {
   rightCollapsed?: boolean | null;
@@ -26,6 +27,7 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
   const toggleLeftSidebar = useCallback(() => {
     setLeftCollapsed((collapsed) => {
       writeStudioUiPreferences({ leftCollapsed: !collapsed });
+      trackStudioEvent("panel_toggle", { panel: "left_sidebar", collapsed: !collapsed });
       return !collapsed;
     });
   }, []);
@@ -63,6 +65,14 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
     panelDragRef.current = null;
   }, []);
 
+  const trackedSetRightPanelTab = useCallback(
+    (tab: RightPanelTab) => {
+      setRightPanelTab(tab);
+      trackStudioEvent("tab_switch", { panel: "right_panel", tab });
+    },
+    [setRightPanelTab],
+  );
+
   return {
     leftWidth,
     setLeftWidth,
@@ -72,7 +82,7 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
     rightCollapsed,
     setRightCollapsed,
     rightPanelTab,
-    setRightPanelTab,
+    setRightPanelTab: trackedSetRightPanelTab,
     toggleLeftSidebar,
     handlePanelResizeStart,
     handlePanelResizeMove,

package/src/hooks/useRenderClipContent.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { normalizeCompositionSrc } from "./useRenderClipContent";
+
+describe("normalizeCompositionSrc", () => {
+  const origin = "http://localhost:5190";
+  const pid = "my-project";
+
+  it("strips absolute preview URL to relative path", () => {
+    const result = normalizeCompositionSrc(
+      "http://localhost:5190/api/projects/my-project/preview/compositions/intro.html",
+      pid,
+      origin,
+    );
+    expect(result).toBe("compositions/intro.html");
+  });
+
+  it("preserves already-relative paths", () => {
+    const result = normalizeCompositionSrc("compositions/intro.html", pid, origin);
+    expect(result).toBe("compositions/intro.html");
+  });
+
+  it("preserves absolute URLs from different origins", () => {
+    const result = normalizeCompositionSrc(
+      "https://cdn.example.com/compositions/intro.html",
+      pid,
+      origin,
+    );
+    expect(result).toBe("https://cdn.example.com/compositions/intro.html");
+  });
+
+  it("preserves absolute URLs for different projects", () => {
+    const result = normalizeCompositionSrc(
+      "http://localhost:5190/api/projects/other-project/preview/compositions/intro.html",
+      pid,
+      origin,
+    );
+    expect(result).toBe(
+      "http://localhost:5190/api/projects/other-project/preview/compositions/intro.html",
+    );
+  });
+
+  it("handles nested composition paths", () => {
+    const result = normalizeCompositionSrc(
+      "http://localhost:5190/api/projects/my-project/preview/compositions/scenes/hero.html",
+      pid,
+      origin,
+    );
+    expect(result).toBe("compositions/scenes/hero.html");
+  });
+});

package/src/hooks/useRenderClipContent.ts

@@ -5,6 +5,23 @@ import type { TimelineElement } from "../player";
 import { AudioWaveform } from "../player/components/AudioWaveform";
 import { getTimelineElementLabel } from "../utils/studioHelpers";
 
+export function normalizeCompositionSrc(
+  compSrc: string,
+  projectId: string,
+  origin: string,
+): string {
+  try {
+    const parsed = new URL(compSrc, origin);
+    const previewPrefix = `/api/projects/${projectId}/preview/`;
+    if (parsed.pathname.startsWith(previewPrefix)) {
+      return parsed.pathname.slice(previewPrefix.length);
+    }
+  } catch {
+    // already relative
+  }
+  return compSrc;
+}
+
 interface UseRenderClipContentOptions {
   projectIdRef: { current: string | null };
   compIdToSrc: Map<string, string>;
@@ -23,8 +40,10 @@ export function useRenderClipContent({
       const pid = projectIdRef.current;
       if (!pid) return null;
 
-      // Resolve composition source path using the compIdToSrc map
       let compSrc = el.compositionSrc;
+      if (compSrc) {
+        compSrc = normalizeCompositionSrc(compSrc, pid, window.location.origin);
+      }
       if (compSrc && compIdToSrc.size > 0) {
         const resolved =
           compIdToSrc.get(el.id) ||
@@ -40,7 +59,7 @@ export function useRenderClipContent({
           previewUrl: `/api/projects/${pid}/preview/comp/${compSrc}`,
           label: getTimelineElementLabel(el),
           labelColor: style.label,
-          accentColor: style.clip,
+
           seekTime: 0,
           duration: el.duration,
         });
@@ -53,7 +72,7 @@ export function useRenderClipContent({
           previewUrl: activePreviewUrl,
           label: getTimelineElementLabel(el),
           labelColor: style.label,
-          accentColor: style.clip,
+
           selector: el.selector,
           selectorIndex: el.selectorIndex,
           seekTime: el.start,
@@ -109,7 +128,7 @@ export function useRenderClipContent({
           previewUrl: `/api/projects/${pid}/preview`,
           label: getTimelineElementLabel(el),
           labelColor: style.label,
-          accentColor: style.clip,
+
           selector: el.selector,
           selectorIndex: el.selectorIndex,
           seekTime: el.start,

package/src/hooks/useServerConnection.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { buildProjectHash, parseProjectIdFromHash } from "../utils/projectRouting";
 import { useMountEffect } from "./useMountEffect";
 
@@ -67,5 +67,15 @@ export function useServerConnection(): ServerConnectionState {
     };
   });
 
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    const onHashChange = () => {
+      const next = parseProjectIdFromHash(window.location.hash);
+      if (next && next !== projectId) setProjectId(next);
+    };
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, [projectId]);
+
   return { projectId, resolving, waitingForServer };
 }

package/src/main.tsx

@@ -1,10 +1,45 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { StudioApp } from "./App";
+import { StudioErrorBoundary } from "./components/StudioErrorBoundary";
+import { trackStudioEvent } from "./utils/studioTelemetry";
 import "./styles/studio.css";
 
+trackStudioEvent("session_start");
+
+function errorProps(value: unknown): {
+  error_message: string;
+  error_name: string | null;
+  stack_trace: string | null;
+} {
+  if (value instanceof Error) {
+    return {
+      error_message: value.message,
+      error_name: value.name,
+      stack_trace: value.stack?.slice(0, 4000) ?? null,
+    };
+  }
+  return { error_message: String(value), error_name: null, stack_trace: null };
+}
+
+window.addEventListener("error", (event) => {
+  trackStudioEvent("unhandled_error", {
+    ...errorProps(event.error),
+    error_message: event.message,
+    filename: event.filename,
+    lineno: event.lineno,
+    colno: event.colno,
+  });
+});
+
+window.addEventListener("unhandledrejection", (event) => {
+  trackStudioEvent("unhandled_promise_rejection", errorProps(event.reason));
+});
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <StudioApp />
+    <StudioErrorBoundary>
+      <StudioApp />
+    </StudioErrorBoundary>
   </StrictMode>,
 );

package/src/player/components/CompositionThumbnail.tsx

@@ -5,7 +5,6 @@ interface CompositionThumbnailProps {
   previewUrl: string;
   label: string;
   labelColor: string;
-  accentColor?: string;
   selector?: string;
   selectorIndex?: number;
   seekTime?: number;
@@ -16,7 +15,6 @@ interface CompositionThumbnailProps {
 
 const CLIP_HEIGHT = 66;
 const THUMBNAIL_URL_VERSION = "v3";
-const COMPOSITION_THUMBNAIL_LABEL_Z_INDEX = 10;
 
 export function buildCompositionThumbnailUrl({
   previewUrl,
@@ -53,7 +51,6 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
   previewUrl,
   label,
   labelColor,
-  accentColor = "#6B7280",
   selector,
   selectorIndex,
   seekTime = 2,
@@ -110,8 +107,11 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
         className="hidden"
       />
 
-      {loaded ? (
-        <div className="absolute inset-0 flex">
+      {loaded && (
+        <div
+          className="absolute inset-0 flex"
+          style={{ animation: "hf-thumb-fade 200ms ease-out", mixBlendMode: "lighten" }}
+        >
           {Array.from({ length: frameCount }).map((_, i) => (
             <div
               key={i}
@@ -122,59 +122,25 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
                 src={url}
                 alt=""
                 draggable={false}
-                className="absolute inset-0 h-full w-full object-cover opacity-60"
+                className="absolute inset-0 h-full w-full object-cover"
+                style={{ opacity: 0.7 }}
               />
             </div>
           ))}
         </div>
-      ) : (
-        <div
-          className="absolute inset-0 animate-pulse"
-          style={{
-            background:
-              "linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 100%)",
-          }}
-        />
       )}
 
-      <div
-        className="absolute inset-0"
-        style={{
-          background: `linear-gradient(120deg, ${accentColor}2e, transparent 34%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08))`,
-        }}
-      />
-
-      <div
-        className="absolute left-2 top-2"
-        style={{ zIndex: COMPOSITION_THUMBNAIL_LABEL_Z_INDEX }}
-      >
+      <div className="absolute left-3 top-0 bottom-0 flex items-center" style={{ zIndex: 10 }}>
         <span
-          className="block max-w-full truncate rounded-md px-1.5 py-0.5 text-[9px] font-semibold uppercase leading-none"
+          className="block max-w-full truncate text-[10px] font-semibold leading-none"
           style={{
             color: labelColor,
-            background: `${accentColor}2e`,
-            boxShadow: `inset 0 0 0 1px ${accentColor}40`,
+            textShadow: loaded ? "0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6)" : "none",
           }}
         >
           {label}
         </span>
       </div>
-
-      <div
-        className="absolute bottom-0 left-0 right-0 px-1.5 pb-0.5 pt-3"
-        style={{
-          zIndex: COMPOSITION_THUMBNAIL_LABEL_Z_INDEX,
-          background:
-            "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%)",
-        }}
-      >
-        <span
-          className="block truncate text-[9px] font-semibold leading-tight"
-          style={{ color: labelColor, textShadow: "0 1px 2px rgba(0,0,0,0.9)" }}
-        >
-          {label}
-        </span>
-      </div>
     </div>
   );
 });

package/src/player/components/PlayerControls.tsx

@@ -3,6 +3,7 @@ import { useMountEffect } from "../../hooks/useMountEffect";
 import { formatFrameTime, frameToSeconds, stepFrameTime, formatTime } from "../lib/time";
 import { shouldMutePreviewAudio } from "../lib/timelineIframeHelpers";
 import { usePlayerStore, liveTime } from "../store/playerStore";
+import { trackStudioEvent } from "../../utils/studioTelemetry";
 
 const SPEED_OPTIONS = [0.25, 0.5, 1, 1.5, 2] as const;
 const SEEK_EDGE_SNAP_PX = 8;
@@ -15,8 +16,11 @@ const SHORTCUT_SECTIONS = [
       { key: "J", label: "Play backward" },
       { key: "K", label: "Stop" },
       { key: "L", label: "Play forward" },
+      { key: "M", label: "Toggle mute" },
+      { key: "⇧L", label: "Toggle loop" },
       { key: "←/→", label: "Step 1 frame" },
       { key: "⇧←/⇧→", label: "Step 10 frames" },
+      { key: "F", label: "Toggle fullscreen" },
     ],
   },
   {
@@ -46,12 +50,16 @@ interface PlayerControlsProps {
   onTogglePlay: () => void;
   onSeek: (time: number) => void;
   disabled?: boolean;
+  isFullscreen?: boolean;
+  onToggleFullscreen?: () => void;
 }
 
 export const PlayerControls = memo(function PlayerControls({
   onTogglePlay,
   onSeek,
   disabled = false,
+  isFullscreen = false,
+  onToggleFullscreen,
 }: PlayerControlsProps) {
   // Subscribe to only the fields we render — each selector prevents cascading re-renders
   const isPlaying = usePlayerStore((s) => s.isPlaying);
@@ -335,7 +343,10 @@ export const PlayerControls = memo(function PlayerControls({
       <button
         type="button"
         aria-label={isPlaying ? "Pause" : "Play"}
-        onClick={onTogglePlay}
+        onClick={() => {
+          trackStudioEvent("playback", { action: isPlaying ? "pause" : "play" });
+          onTogglePlay();
+        }}
         disabled={controlsDisabled}
         className="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-lg disabled:opacity-30 disabled:pointer-events-none transition-colors"
         style={{ background: "rgba(255,255,255,0.06)" }}
@@ -461,7 +472,10 @@ export const PlayerControls = memo(function PlayerControls({
       <button
         type="button"
         onClick={() => {
-          if (!audioAutoMuted) setAudioMuted(!audioMuted);
+          if (!audioAutoMuted) {
+            trackStudioEvent("playback", { action: "mute_toggle", muted: !audioMuted });
+            setAudioMuted(!audioMuted);
+          }
         }}
         disabled={controlsDisabled || audioAutoMuted}
         title={muteButtonLabel}
@@ -528,6 +542,7 @@ export const PlayerControls = memo(function PlayerControls({
               <button
                 key={rate}
                 onClick={() => {
+                  trackStudioEvent("playback", { action: "speed_change", rate });
                   setPlaybackRate(rate);
                   setShowSpeedMenu(false);
                 }}
@@ -553,7 +568,10 @@ export const PlayerControls = memo(function PlayerControls({
 
       <button
         type="button"
-        onClick={() => setLoopEnabled(!loopEnabled)}
+        onClick={() => {
+          trackStudioEvent("playback", { action: "loop_toggle", enabled: !loopEnabled });
+          setLoopEnabled(!loopEnabled);
+        }}
         disabled={disabled}
         className={`h-7 w-7 flex items-center justify-center rounded-md border transition-colors ${
           loopEnabled
@@ -582,6 +600,60 @@ export const PlayerControls = memo(function PlayerControls({
         </svg>
       </button>
 
+      {/* Fullscreen toggle */}
+      {onToggleFullscreen && (
+        <button
+          type="button"
+          onClick={() => {
+            trackStudioEvent("playback", { action: "fullscreen_toggle", active: !isFullscreen });
+            onToggleFullscreen();
+          }}
+          className={`h-7 w-7 flex-shrink-0 flex items-center justify-center rounded-md border transition-colors ${
+            isFullscreen
+              ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
+              : "border-neutral-700 text-neutral-400 hover:border-neutral-500 hover:bg-neutral-800"
+          }`}
+          title={isFullscreen ? "Exit fullscreen (F)" : "Enter fullscreen (F)"}
+          aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+        >
+          {isFullscreen ? (
+            <svg
+              width="13"
+              height="13"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M8 3v3a2 2 0 0 1-2 2H3" />
+              <path d="M21 8h-3a2 2 0 0 1-2-2V3" />
+              <path d="M3 16h3a2 2 0 0 1 2 2v3" />
+              <path d="M16 21v-3a2 2 0 0 1 2-2h3" />
+            </svg>
+          ) : (
+            <svg
+              width="13"
+              height="13"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M8 3H5a2 2 0 0 0-2 2v3" />
+              <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
+              <path d="M3 16v3a2 2 0 0 0 2 2h3" />
+              <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+            </svg>
+          )}
+        </button>
+      )}
+
       {/* Keyboard shortcuts + frame jump + work area — click to open panel */}
       <div ref={shortcutsPanelRef} className="relative flex-shrink-0">
         <button

package/src/player/components/TimelineCanvas.tsx

@@ -10,7 +10,6 @@ import { getRenderedTimelineElement, type TimelineTheme } from "./timelineTheme"
 import { GUTTER, TRACK_H, RULER_H, CLIP_Y, CLIP_HANDLE_W } from "./timelineLayout";
 import type { TimelineElement } from "../store/playerStore";
 import type { DraggedClipState, ResizingClipState, BlockedClipState } from "./useTimelineClipDrag";
-import { formatTime } from "../lib/time";
 import type { TrackVisualStyle } from "./timelineIcons";
 
 interface TimelineCanvasProps {
@@ -134,28 +133,16 @@ export const TimelineCanvas = memo(function TimelineCanvas({
         className={
           renderClipContent
             ? "absolute inset-0 overflow-hidden"
-            : "flex flex-col justify-center overflow-hidden flex-1 min-w-0 px-6"
+            : "flex items-center overflow-hidden flex-1 min-w-0 px-3 gap-2"
         }
       >
         {renderClipContent?.(element, clipStyle) ?? (
-          <div className="flex h-full min-h-0 flex-col justify-between py-3">
-            <span
-              className="max-w-full truncate rounded-md px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.08em] leading-none"
-              style={{
-                color: clipStyle.label,
-                background: `${clipStyle.accent}26`,
-                boxShadow: `inset 0 0 0 1px ${clipStyle.accent}33`,
-              }}
-            >
-              {element.tag}
-            </span>
-            <span
-              className="max-w-full truncate rounded-md px-1.5 py-0.5 text-[10px] font-medium tabular-nums leading-none"
-              style={{ color: theme.textSecondary, background: "rgba(255,255,255,0.04)" }}
-            >
-              {formatTime(element.start)} {"→"} {formatTime(element.start + element.duration)}
-            </span>
-          </div>
+          <span
+            className="truncate text-[10px] font-medium leading-none"
+            style={{ color: clipStyle.label }}
+          >
+            {element.label || element.id || element.tag}
+          </span>
         )}
       </div>
     </>
@@ -221,10 +208,9 @@ export const TimelineCanvas = memo(function TimelineCanvas({
                     paddingLeft: 16,
                     color: ts.label,
                     fontSize: 11,
-                    letterSpacing: "0.08em",
+                    letterSpacing: "0.06em",
                     textTransform: "uppercase",
-                    background: `linear-gradient(90deg, ${ts.accent}14, transparent 28%)`,
-                    boxShadow: `inset 0 0 0 1px ${ts.accent}24`,
+                    opacity: 0.5,
                   }}
                 >
                   New track