@hyperframes/studio 0.8.101 → 0.8.103

package/src/player/components/TimelineClipFades.tsx

@@ -1,11 +1,4 @@
-import {
-  useEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type KeyboardEvent,
-  type PointerEvent,
-} from "react";
+import { useEffect, useRef, useState, type CSSProperties, type PointerEvent } from "react";
 import {
   HF_AUDIO_FADE_IN_ATTR,
   HF_AUDIO_FADE_OUT_ATTR,
@@ -13,13 +6,16 @@ import {
   formatFadeSeconds,
 } from "@hyperframes/core/audio-fade";
 import type { TimelineElement } from "../store/playerStore";
+import { Tooltip } from "../../components/ui";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import { releasedOutsideWindow } from "./timelinePointerRelease";
 
 type FadeEdge = "in" | "out";
 
 const HANDLE_SIZE = 10;
-const HANDLE_HIT = 16;
+const HANDLE_HIT = 24;
+const HANDLE_Z_ABOVE_CLIP_CONTENT = 30;
+const SUPPRESS_CLIP_NATIVE_TITLE = "";
 /** Pixels of pointer travel before a press on the handle counts as a drag. */
 const DRAG_THRESHOLD_PX = 2;
 
@@ -147,31 +143,38 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
     );
   };
 
-  const onHandleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    const g = gesture.current;
-    if (e.key !== "Escape" || !g) return;
-    e.preventDefault();
-    gesture.current = null;
-    setDragging(null);
-    revertGesture(g);
-  };
+  useEffect(() => {
+    if (dragging === null) return;
+    const cancelOnWindowEscape = (e: KeyboardEvent) => {
+      const g = gesture.current;
+      if (e.key !== "Escape" || !g) return;
+      e.preventDefault();
+      e.stopPropagation();
+      gesture.current = null;
+      setDragging(null);
+      revertGesture(g);
+    };
+    window.addEventListener("keydown", cancelOnWindowEscape, { capture: true });
+    return () => window.removeEventListener("keydown", cancelOnWindowEscape, { capture: true });
+  });
 
   const showIn = fades.fadeIn > 0;
   const showOut = fades.fadeOut > 0;
   const handlesVisible = showHandles || dragging !== null;
   if (!showIn && !showOut && !handlesVisible) return null;
 
-  const handleStyle = (leftPx: number): CSSProperties => ({
+  const hitWidth = Math.min(HANDLE_HIT, widthPx / 2);
+  const handleStyle = (edge: FadeEdge): CSSProperties => ({
     position: "absolute",
     top: -(HANDLE_HIT - HANDLE_SIZE) / 2 + 1,
-    left: leftPx - HANDLE_HIT / 2,
-    width: HANDLE_HIT,
+    left: edge === "in" ? 0 : widthPx - hitWidth,
+    width: hitWidth,
     height: HANDLE_HIT,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     cursor: "ew-resize",
-    zIndex: 6,
+    zIndex: HANDLE_Z_ABOVE_CLIP_CONTENT,
     opacity: handlesVisible ? 1 : 0,
     pointerEvents: handlesVisible && canEdit ? "auto" : "none",
     touchAction: "none",
@@ -191,7 +194,8 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
             height: "100%",
             pointerEvents: "none",
             zIndex: 5,
-            overflow: "visible",
+            overflow: "hidden",
+            borderRadius: "inherit",
           }}
           viewBox={`0 0 ${Math.max(widthPx, 1)} 100`}
           preserveAspectRatio="none"
@@ -245,25 +249,23 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
             direction="in"
             value={fades.fadeIn}
             max={Math.max(0, el.duration - fades.fadeOut)}
-            style={handleStyle(inPx)}
+            style={handleStyle("in")}
             dragging={dragging === "in"}
             onPointerDown={onHandlePointerDown("in")}
             onPointerMove={onHandlePointerMove}
             onPointerUp={(e) => finish(e, false)}
             onPointerCancel={(e) => finish(e, true)}
-            onKeyDown={onHandleKeyDown}
           />
           <FadeHandle
             direction="out"
             value={fades.fadeOut}
             max={Math.max(0, el.duration - fades.fadeIn)}
-            style={handleStyle(widthPx - outPx)}
+            style={handleStyle("out")}
             dragging={dragging === "out"}
             onPointerDown={onHandlePointerDown("out")}
             onPointerMove={onHandlePointerMove}
             onPointerUp={(e) => finish(e, false)}
             onPointerCancel={(e) => finish(e, true)}
-            onKeyDown={onHandleKeyDown}
           />
         </>
       )}
@@ -281,7 +283,6 @@ function FadeHandle({
   onPointerMove,
   onPointerUp,
   onPointerCancel,
-  onKeyDown,
 }: {
   direction: "in" | "out";
   value: number;
@@ -292,31 +293,31 @@ function FadeHandle({
   onPointerMove: (event: PointerEvent<HTMLDivElement>) => void;
   onPointerUp: (event: PointerEvent<HTMLDivElement>) => void;
   onPointerCancel: (event: PointerEvent<HTMLDivElement>) => void;
-  onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
 }) {
   const label = direction === "in" ? "Fade in" : "Fade out";
   return (
-    <div
-      role="slider"
-      tabIndex={-1}
-      aria-label={label}
-      aria-valuemin={0}
-      aria-valuemax={max}
-      aria-valuenow={value}
-      aria-valuetext={`${formatFadeSeconds(value)}s`}
-      data-testid={`clip-fade-handle-${direction}`}
-      title={`${label}: ${formatFadeSeconds(value)}s — drag to change`}
-      style={style}
-      onPointerDown={onPointerDown}
-      onPointerMove={onPointerMove}
-      onPointerUp={onPointerUp}
-      onPointerCancel={onPointerCancel}
-      onKeyDown={onKeyDown}
-      onClick={(e) => e.stopPropagation()}
-      onDoubleClick={(e) => e.stopPropagation()}
-    >
-      <FadeDot active={dragging} />
-    </div>
+    <Tooltip label={`${label} ${formatFadeSeconds(value)} s`}>
+      <div
+        role="slider"
+        tabIndex={-1}
+        aria-label={label}
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        aria-valuetext={`${formatFadeSeconds(value)}s`}
+        data-testid={`clip-fade-handle-${direction}`}
+        title={SUPPRESS_CLIP_NATIVE_TITLE}
+        style={style}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        onPointerCancel={onPointerCancel}
+        onClick={(e) => e.stopPropagation()}
+        onDoubleClick={(e) => e.stopPropagation()}
+      >
+        <FadeDot active={dragging} />
+      </div>
+    </Tooltip>
   );
 }
 
@@ -326,10 +327,12 @@ function FadeDot({ active }: { active: boolean }) {
       aria-hidden="true"
       style={{
         display: "block",
+        flexShrink: 0,
+        pointerEvents: "none",
         width: HANDLE_SIZE,
         height: HANDLE_SIZE,
         borderRadius: "50%",
-        background: active ? "var(--timeline-fade-dot-active)" : "var(--clip-handle)",
+        background: "var(--timeline-fade-dot)",
         boxShadow: "0 0 0 1.5px var(--timeline-fade-dot-ring)",
         transform: active ? "scale(1.15)" : undefined,
         transition: "transform 80ms ease-out",

package/src/styles/theme.css

@@ -114,7 +114,7 @@
   --timeline-handle: rgba(255, 255, 255, 0.55);
   /* Audio clip fades: the shaded wedge over the faded gain, and the corner dots. */
   --timeline-fade-shade: rgba(0, 0, 0, 0.38);
-  --timeline-fade-dot-active: rgba(255, 255, 255, 1);
+  --timeline-fade-dot: #fff;
   --timeline-fade-dot-ring: rgba(0, 0, 0, 0.55);
   --timeline-resize-seam: rgba(255, 255, 255, 0.12);
   --timeline-resize-active: rgba(255, 255, 255, 0.24);

package/src/utils/projectRouting.test.ts

@@ -18,6 +18,15 @@ describe("project routing utilities", () => {
     },
   );
 
+  it("opens a folder whose name has a colon, encoded once both ways", () => {
+    const id = "Customer story: Northwind";
+    expect(encodeProjectId(id)).toBe("Customer%20story%3A%20Northwind");
+    expect(buildProjectApiPath(id, "/preview")).toBe(
+      "/api/projects/Customer%20story%3A%20Northwind/preview",
+    );
+    expect(parseProjectIdFromHash(buildProjectHash(id))).toBe(id);
+  });
+
   it("decodes project ids from hash routes before building capture URLs", () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date("2026-05-01T12:00:00Z"));

package/src/utils/projectRouting.ts

@@ -5,13 +5,15 @@ export interface ProjectHashRoute {
   params: URLSearchParams;
 }
 
+const WINDOWS_DRIVE_PREFIX = /^[a-z]:/i;
+
 /** Project names are single path segments, including when received from a hash or server. */
 export function isValidProjectId(value: string): boolean {
   return (
     value.length > 0 &&
     value !== "." &&
     value !== ".." &&
-    !value.includes(":") &&
+    !WINDOWS_DRIVE_PREFIX.test(value) &&
     !value.includes("/") &&
     !value.includes("\\") &&
     !Array.from(value).some((char) => char.charCodeAt(0) < 32)

package/dist/chunk-S65AQH6M.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/utils/sourceScopedSelectorIndex.ts","../src/utils/projectRouting.ts"],"sourcesContent":["/**\n * Occurrence index for a selector within its source document.\n *\n * The preview flattens multiple composition files into one DOM, so a raw\n * `querySelectorAll` index is not a stable source-file identity. Callers supply\n * their existing source resolver; this helper alone owns occurrence scoping.\n */\n\n/** Every element matching one selector, mapped to the source file it belongs to\n *  and its occurrence index within that file. One document query fills it. */\ntype SelectorOccurrences = Map<Element, { scope: string; index: number }>;\n\ninterface SelectorIndexPass {\n  doc: Document;\n  bySelector: Map<string, SelectorOccurrences>;\n}\n\nlet activePass: SelectorIndexPass | null = null;\n\n/**\n * Share one occurrence index per selector across every\n * `getSourceScopedSelectorIndex` call made synchronously inside `run`.\n *\n * Unshared, each call runs its own whole-document `querySelectorAll(selector)`\n * and resolves the source file of every match. A rebuild that walks n elements\n * sharing a selector therefore does n whole-document queries and n² resolver\n * calls — a composition of repeated cards or tiles is exactly that shape. One\n * index per selector makes the same pass linear.\n *\n * Correctness rests on the pass being ONE synchronous walk of a document that\n * does not change under it: nothing invalidates the index, so `run` must not\n * mutate `doc`, and every call inside it must resolve source files the same way\n * (the resolver may be a fresh closure per call, as long as it answers the\n * same). Outside a pass the index is per-call, exactly as before.\n */\nexport function withSelectorIndexPass<T>(doc: Document, run: () => T): T {\n  const previous = activePass;\n  activePass = { doc, bySelector: new Map() };\n  try {\n    return run();\n  } finally {\n    activePass = previous;\n  }\n}\n\nfunction buildOccurrences(\n  doc: Document,\n  selector: string,\n  resolveSourceFile: (candidate: Element) => string | undefined,\n): SelectorOccurrences {\n  const occurrences: SelectorOccurrences = new Map();\n  const counts = new Map<string, number>();\n  for (const candidate of doc.querySelectorAll(selector)) {\n    const scope = resolveSourceFile(candidate) ?? \"index.html\";\n    const index = counts.get(scope) ?? 0;\n    counts.set(scope, index + 1);\n    occurrences.set(candidate, { scope, index });\n  }\n  return occurrences;\n}\n\nexport function getSourceScopedSelectorIndex(\n  doc: Document,\n  el: Element,\n  selector: string | undefined,\n  sourceFile: string | undefined,\n  resolveSourceFile: (candidate: Element) => string | undefined,\n): number | undefined {\n  if (!selector || selector.startsWith(\"#\") || selector.startsWith(\"[data-composition-id=\")) {\n    return undefined;\n  }\n\n  try {\n    const pass = activePass?.doc === doc ? activePass : null;\n    let occurrences = pass?.bySelector.get(selector);\n    if (!occurrences) {\n      occurrences = buildOccurrences(doc, selector, resolveSourceFile);\n      pass?.bySelector.set(selector, occurrences);\n    }\n    // An element outside the requested scope is not in that scope's occurrence\n    // run at all, which is the `indexOf` miss the filtered form returned before.\n    const hit = occurrences.get(el);\n    return hit && hit.scope === (sourceFile ?? \"index.html\") ? hit.index : undefined;\n  } catch {\n    return undefined;\n  }\n}\n","const PROJECT_HASH_PREFIX = \"#project/\";\n\nexport interface ProjectHashRoute {\n  projectId: string;\n  params: URLSearchParams;\n}\n\n/** Project names are single path segments, including when received from a hash or server. */\nexport function isValidProjectId(value: string): boolean {\n  return (\n    value.length > 0 &&\n    value !== \".\" &&\n    value !== \"..\" &&\n    !value.includes(\":\") &&\n    !value.includes(\"/\") &&\n    !value.includes(\"\\\\\") &&\n    !Array.from(value).some((char) => char.charCodeAt(0) < 32)\n  );\n}\n\nfunction decodeHashProjectId(value: string): string {\n  try {\n    return decodeURIComponent(value);\n  } catch {\n    return value;\n  }\n}\n\nfunction normalizeHashParams(\n  params?: URLSearchParams | Record<string, string | null | undefined>,\n): URLSearchParams {\n  if (!params) return new URLSearchParams();\n  if (params instanceof URLSearchParams) return params;\n\n  const next = new URLSearchParams();\n  for (const [key, value] of Object.entries(params)) {\n    if (!key || value == null || value === \"\") continue;\n    next.set(key, value);\n  }\n  return next;\n}\n\nexport function encodeProjectId(projectId: string): string {\n  if (!isValidProjectId(projectId)) throw new Error(\"Invalid project ID\");\n  return encodeURIComponent(projectId);\n}\n\nexport function buildProjectHash(\n  projectId: string,\n  params?: URLSearchParams | Record<string, string | null | undefined>,\n): string {\n  const search = normalizeHashParams(params).toString();\n  return `${PROJECT_HASH_PREFIX}${encodeProjectId(projectId)}${search ? `?${search}` : \"\"}`;\n}\n\nexport function parseProjectHashRoute(hash: string): ProjectHashRoute | null {\n  if (!hash.startsWith(PROJECT_HASH_PREFIX)) return null;\n\n  const route = hash.slice(PROJECT_HASH_PREFIX.length);\n  const queryIndex = route.indexOf(\"?\");\n  const encodedProjectId = queryIndex >= 0 ? route.slice(0, queryIndex) : route;\n  if (!encodedProjectId || encodedProjectId.includes(\"/\")) return null;\n\n  const projectId = decodeHashProjectId(encodedProjectId);\n  if (!isValidProjectId(projectId)) return null;\n\n  const rawParams = queryIndex >= 0 ? route.slice(queryIndex + 1) : \"\";\n  return {\n    projectId,\n    params: new URLSearchParams(rawParams),\n  };\n}\n\nexport function parseProjectIdFromHash(hash: string): string | null {\n  return parseProjectHashRoute(hash)?.projectId ?? null;\n}\n\nexport function buildProjectApiPath(projectId: string, suffix = \"\"): string {\n  const normalizedSuffix = suffix && !suffix.startsWith(\"/\") ? `/${suffix}` : suffix;\n  return `/api/projects/${encodeProjectId(projectId)}${normalizedSuffix}`;\n}\n"],"mappings":"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","names":[]}