@hyperframes/studio 0.6.5 → 0.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/assets/{hyperframes-player-CzwFysqv.js → hyperframes-player-T-ME1rqL.js} +2 -2
  2. package/dist/assets/index-Bne9FFeo.css +1 -0
  3. package/dist/assets/index-DYqqzECY.js +117 -0
  4. package/dist/index.html +2 -2
  5. package/package.json +4 -4
  6. package/src/components/StudioHeader.tsx +128 -3
  7. package/src/player/components/PlayerControls.tsx +286 -56
  8. package/src/player/hooks/usePlaybackKeyboard.ts +25 -1
  9. package/src/player/hooks/useTimelinePlayer.ts +21 -10
  10. package/src/player/store/playerStore.ts +27 -0
  11. package/dist/assets/index-Bs6NmE0o.js +0 -117
  12. package/dist/assets/index-Dswa2GJ2.css +0 -1
package/dist/index.html CHANGED
@@ -5,8 +5,8 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
6
6
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
7
7
  <title>HyperFrames Studio</title>
8
- <script type="module" crossorigin src="/assets/index-Bs6NmE0o.js"></script>
9
- <link rel="stylesheet" crossorigin href="/assets/index-Dswa2GJ2.css">
8
+ <script type="module" crossorigin src="/assets/index-DYqqzECY.js"></script>
9
+ <link rel="stylesheet" crossorigin href="/assets/index-Bne9FFeo.css">
10
10
  </head>
11
11
  <body>
12
12
  <div id="root"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyperframes/studio",
3
- "version": "0.6.5",
3
+ "version": "0.6.6",
4
4
  "description": "",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,8 +32,8 @@
32
32
  "@phosphor-icons/react": "^2.1.10",
33
33
  "codemirror": "^6.0.1",
34
34
  "motion": "^12.38.0",
35
- "@hyperframes/player": "0.6.5",
36
- "@hyperframes/core": "0.6.5"
35
+ "@hyperframes/core": "0.6.6",
36
+ "@hyperframes/player": "0.6.6"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@types/react": "19",
@@ -47,7 +47,7 @@
47
47
  "vite": "^6.4.2",
48
48
  "vitest": "^3.2.4",
49
49
  "zustand": "^5.0.0",
50
- "@hyperframes/producer": "0.6.5"
50
+ "@hyperframes/producer": "0.6.6"
51
51
  },
52
52
  "peerDependencies": {
53
53
  "react": "19",
package/src/components/StudioHeader.tsx CHANGED
@@ -18,6 +18,127 @@ export interface StudioHeaderProps {
18
18
  inspectorPanelActive: boolean;
19
19
  }
20
20
 
21
+ function HyperframesLogo() {
22
+ // Full logo from logo-dark.svg (263×79): heygen label + gradient mark + hyperframes wordmark.
23
+ // All fill="black" paths inverted to white for the dark header.
24
+ const height = 28;
25
+ const width = Math.round(height * (263 / 79));
26
+ return (
27
+ <svg
28
+ width={width}
29
+ height={height}
30
+ viewBox="0 0 263 79"
31
+ fill="none"
32
+ xmlns="http://www.w3.org/2000/svg"
33
+ aria-label="Hyperframes"
34
+ >
35
+ <defs>
36
+ <linearGradient
37
+ id="hf-g0"
38
+ x1="225.869"
39
+ y1="0"
40
+ x2="222.845"
41
+ y2="37.482"
42
+ gradientUnits="userSpaceOnUse"
43
+ >
44
+ <stop stopColor="#06E3FA" />
45
+ <stop offset="1" stopColor="#4FDB5E" />
46
+ </linearGradient>
47
+ <linearGradient
48
+ id="hf-g1"
49
+ x1="230.87"
50
+ y1="39"
51
+ x2="244.661"
52
+ y2="6.303"
53
+ gradientUnits="userSpaceOnUse"
54
+ >
55
+ <stop stopColor="#06E3FA" />
56
+ <stop offset="1" stopColor="#4FDB5E" />
57
+ </linearGradient>
58
+ </defs>
59
+ {/* heygen label */}
60
+ <path
61
+ d="M0 16.6738H4.96V23.3838H11.53V16.6738H16.49V35.4538H11.53V27.6738H4.96V35.4538H0V16.6738Z"
62
+ fill="white"
63
+ />
64
+ <path
65
+ d="M17.8899 28.0137C17.8899 23.4237 21.2399 20.0237 25.7999 20.0237C30.0099 20.0237 32.9399 23.0837 32.9399 27.5637C32.9399 28.2037 32.8599 28.8237 32.8299 29.3337H22.6099C23.0399 31.1337 24.6199 32.1237 27.1399 32.1237C28.7199 32.1237 30.2199 31.7237 31.2999 31.0237V34.6737C30.1699 35.3937 28.2999 35.8537 26.3599 35.8537C21.2599 35.8537 17.8799 32.6037 17.8799 28.0237L17.8899 28.0137ZM28.5699 26.1937C28.4899 24.5337 27.3899 23.5637 25.7499 23.5637C24.1099 23.5637 22.9599 24.5337 22.6099 26.1937H28.5699Z"
66
+ fill="white"
67
+ />
68
+ <path
69
+ d="M37.85 33.8638L32 20.4238H37.29L40.46 28.1538L43.6 20.4238H48.48L40.33 39.5738H35.26L37.86 33.8638H37.85Z"
70
+ fill="white"
71
+ />
72
+ <path
73
+ d="M48.1797 26.1138C48.1797 20.4238 52.7097 16.2438 58.9397 16.2438C61.2997 16.2438 63.5297 16.8038 64.8197 17.7238V21.9338C63.5597 20.9138 61.6797 20.2938 59.7497 20.2938C55.7797 20.2938 53.2597 22.6238 53.2597 26.1438C53.2597 29.6638 55.5697 31.8838 58.8897 31.8838C59.6397 31.8838 60.4997 31.7538 61.1997 31.5038V27.8838H57.4697V24.2338H65.5197V33.7038C63.6697 35.0938 61.1997 35.8738 58.5997 35.8738C52.5397 35.8738 48.1897 31.7438 48.1897 26.1138H48.1797Z"
74
+ fill="white"
75
+ />
76
+ <path
77
+ d="M66.6604 28.0137C66.6604 23.4237 70.0104 20.0237 74.5704 20.0237C78.7804 20.0237 81.7104 23.0837 81.7104 27.5637C81.7104 28.2037 81.6304 28.8237 81.6004 29.3337H71.3804C71.8104 31.1337 73.3904 32.1237 75.9104 32.1237C77.4904 32.1237 78.9904 31.7237 80.0704 31.0237V34.6737C78.9404 35.3937 77.0704 35.8537 75.1304 35.8537C70.0304 35.8537 66.6504 32.6037 66.6504 28.0237L66.6604 28.0137ZM77.3404 26.1937C77.2604 24.5337 76.1604 23.5637 74.5204 23.5637C72.8804 23.5637 71.7304 24.5337 71.3804 26.1937H77.3404Z"
78
+ fill="white"
79
+ />
80
+ <path
81
+ d="M82.9688 20.4238H87.8488V22.4138C88.7588 20.9638 90.3488 20.1038 92.3288 20.1038C95.4988 20.1038 97.3988 22.3338 97.3988 25.8138V35.4438H92.5188V26.8638C92.5188 25.0438 91.8188 24.1838 90.4788 24.1838C88.9488 24.1838 87.8488 25.3638 87.8488 27.2638V35.4438H82.9688V20.4238Z"
82
+ fill="white"
83
+ />
84
+ {/* gradient icon mark */}
85
+ <path
86
+ d="M195.219 26.1937L213.529 38.9937C216.009 40.7237 220.239 38.7637 221.009 35.5337L228.419 4.33374C229.189 1.10374 225.879 -0.856262 222.589 0.873738L198.199 13.6737C192.649 16.5837 191.059 23.2837 195.219 26.1937Z"
87
+ fill="url(#hf-g0)"
88
+ />
89
+ <path
90
+ d="M256.97 25.9638L232.58 38.7638C229.28 40.4938 225.98 38.5338 226.75 35.3038L234.16 4.10376C234.93 0.873757 239.16 -1.08624 241.64 0.643757L259.95 13.4438C264.12 16.3538 262.52 23.0538 256.97 25.9638Z"
91
+ fill="url(#hf-g1)"
92
+ />
93
+ {/* hyperframes wordmark */}
94
+ <path
95
+ d="M0 71.9996V42.7256H7.7367V53.1806H17.9826V42.7256H25.7193V71.9996H17.9826V59.8718H7.7367V71.9996H0Z"
96
+ fill="white"
97
+ />
98
+ <path
99
+ d="M31.9606 78.4405L36.0171 69.5329L26.9004 48.5811H35.1389L40.0737 60.6252L44.9666 48.5811H52.5779L39.8646 78.4405H31.9606Z"
100
+ fill="white"
101
+ />
102
+ <path
103
+ d="M53.3711 78.4404V48.5809H60.9823V52.052C62.446 49.501 65.0807 48.0791 68.3008 48.0791C74.3647 48.0791 78.9649 53.3066 78.9649 60.2487C78.9649 67.2745 74.3229 72.4602 68.259 72.4602C65.0807 72.4602 62.446 71.1637 60.9823 68.78V78.4404H53.3711ZM66.1262 66.1872C69.2627 66.1872 71.3119 63.7616 71.3119 60.2905C71.3119 56.8195 69.2627 54.4357 66.1262 54.4357C62.7388 54.4357 60.9823 57.2795 60.9823 59.7051V60.9178C60.9823 63.3434 62.7388 66.1872 66.1262 66.1872Z"
104
+ fill="white"
105
+ />
106
+ <path
107
+ d="M93.4397 72.6269C85.4939 72.6269 80.2246 67.5667 80.2246 60.4155C80.2246 53.2643 85.4521 47.9531 92.5615 47.9531C99.1273 47.9531 103.686 52.7206 103.686 59.7045C103.686 60.7082 103.56 61.6701 103.518 62.4647H87.5849C88.2541 65.2666 90.7214 66.8139 94.6525 66.8139C97.1199 66.8139 99.4618 66.1866 101.135 65.0993V70.7868C99.3782 71.916 96.4508 72.6269 93.4397 72.6269ZM87.5849 57.5717H96.869C96.7435 54.9789 95.0289 53.4734 92.4779 53.4734C89.9687 53.4734 88.1286 54.9789 87.5849 57.5717Z"
108
+ fill="white"
109
+ />
110
+ <path
111
+ d="M105.645 72V48.5808H113.214V52.9719C114.218 50.0445 116.183 48.2881 118.692 48.2881C119.361 48.2881 119.989 48.4135 120.407 48.6645V55.8993C119.822 55.5648 119.111 55.4393 118.274 55.4393C115.138 55.4393 113.256 57.6558 113.256 61.2941V72H105.645Z"
112
+ fill="white"
113
+ />
114
+ <path
115
+ d="M122.643 71.9996V42.7256H139.371V49.124H130.379V54.477H138.911V60.5827H130.379V71.9996H122.643Z"
116
+ fill="white"
117
+ />
118
+ <path
119
+ d="M141.258 72V48.5808H148.827V52.9719C149.831 50.0445 151.796 48.2881 154.306 48.2881C154.975 48.2881 155.602 48.4135 156.02 48.6645V55.8993C155.435 55.5648 154.724 55.4393 153.887 55.4393C150.751 55.4393 148.869 57.6558 148.869 61.2941V72H141.258Z"
120
+ fill="white"
121
+ />
122
+ <path
123
+ d="M167.26 72.4602C161.154 72.4602 156.596 67.2745 156.596 60.3324C156.596 53.3066 161.196 48.0791 167.302 48.0791C170.438 48.0791 173.031 49.4173 174.536 51.8429V48.5809H182.148V72.0001H174.536V68.4873C173.031 71.0801 170.438 72.4602 167.26 72.4602ZM169.393 66.1872C172.78 66.1872 174.536 63.3434 174.536 60.876V59.6632C174.536 57.2377 172.78 54.4357 169.393 54.4357C166.298 54.4357 164.207 56.7777 164.207 60.2905C164.207 63.7616 166.298 66.1872 169.393 66.1872Z"
124
+ fill="white"
125
+ />
126
+ <path
127
+ d="M184.998 72.0001V48.5809H192.609V51.6756C193.989 49.4173 196.373 48.0791 199.426 48.0791C202.521 48.0791 204.779 49.5428 206.075 52.052C207.497 49.5846 210.132 48.0791 213.352 48.0791C218.245 48.0791 221.214 51.592 221.214 57.0286V72.0001H213.603V58.5341C213.603 55.774 212.557 54.4357 210.634 54.4357C208.459 54.4357 206.912 56.234 206.912 59.0778V72.0001H199.3V58.5341C199.3 55.774 198.255 54.4357 196.373 54.4357C194.157 54.4357 192.609 56.234 192.609 59.0778V72.0001H184.998Z"
128
+ fill="white"
129
+ />
130
+ <path
131
+ d="M236.338 72.6269C228.392 72.6269 223.123 67.5667 223.123 60.4155C223.123 53.2643 228.351 47.9531 235.46 47.9531C242.026 47.9531 246.584 52.7206 246.584 59.7045C246.584 60.7082 246.459 61.6701 246.417 62.4647H230.483C231.152 65.2666 233.62 66.8139 237.551 66.8139C240.018 66.8139 242.36 66.1866 244.033 65.0993V70.7868C242.277 71.916 239.349 72.6269 236.338 72.6269ZM230.483 57.5717H239.767C239.642 54.9789 237.927 53.4734 235.376 53.4734C232.867 53.4734 231.027 54.9789 230.483 57.5717Z"
132
+ fill="white"
133
+ />
134
+ <path
135
+ d="M252.115 72.502C250.192 72.502 248.268 72.0838 246.93 71.3728V65.6853C247.808 66.3126 248.937 66.689 250.066 66.689C251.739 66.689 252.784 65.8526 252.784 64.5562C252.784 63.8452 252.492 63.0925 251.655 62.0888L249.899 59.956C248.728 58.4923 248.226 56.9031 248.226 55.2721C248.226 51.0065 251.864 48.0791 256.883 48.0791C258.723 48.0791 260.438 48.4555 261.65 49.0828V54.7703C260.898 54.2266 259.768 53.8503 258.723 53.8503C257.092 53.8503 256.046 54.6867 256.046 55.8994C256.046 56.6522 256.423 57.405 257.259 58.4086L258.974 60.4996C260.187 62.047 260.73 63.5943 260.73 65.2671C260.73 69.5746 257.05 72.502 252.115 72.502Z"
136
+ fill="white"
137
+ />
138
+ </svg>
139
+ );
140
+ }
141
+
21
142
  export function StudioHeader({
22
143
  captureFrameHref,
23
144
  captureFrameFilename,
@@ -32,9 +153,13 @@ export function StudioHeader({
32
153
 
33
154
  return (
34
155
  <div className="flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 flex-shrink-0">
35
- {/* Left: project name */}
36
- <div className="flex items-center gap-2">
37
- <span className="text-[11px] font-medium text-neutral-400">{projectId}</span>
156
+ {/* Left: logo + project name */}
157
+ <div className="flex items-center gap-3">
158
+ <HyperframesLogo />
159
+ <span className="text-neutral-700 select-none" aria-hidden="true">
160
+ |
161
+ </span>
162
+ <span className="text-[11px] font-medium text-neutral-300">{projectId}</span>
38
163
  </div>
39
164
  {/* Right: toolbar buttons */}
40
165
  <div className="flex items-center gap-1.5">
package/src/player/components/PlayerControls.tsx CHANGED
@@ -6,11 +6,29 @@ import { usePlayerStore, liveTime } from "../store/playerStore";
6
6
  const SPEED_OPTIONS = [0.25, 0.5, 1, 1.5, 2] as const;
7
7
  const SEEK_EDGE_SNAP_PX = 8;
8
8
  type TimeDisplayMode = "time" | "frame";
9
- const SHORTCUT_HINTS = [
10
- { key: "J", label: "Play backward" },
11
- { key: "K", label: "Stop playback" },
12
- { key: "L", label: "Play forward" },
13
- { key: "←/→", label: "Step one frame backward or forward" },
9
+ const SHORTCUT_SECTIONS = [
10
+ {
11
+ title: "Playback",
12
+ hints: [
13
+ { key: "Space", label: "Play / Pause" },
14
+ { key: "J", label: "Play backward" },
15
+ { key: "K", label: "Stop" },
16
+ { key: "L", label: "Play forward" },
17
+ { key: "←/→", label: "Step 1 frame" },
18
+ { key: "⇧←/⇧→", label: "Step 10 frames" },
19
+ ],
20
+ },
21
+ {
22
+ title: "Work area",
23
+ hints: [
24
+ { key: "I", label: "Set in-point" },
25
+ { key: "⇧I", label: "Clear in-point" },
26
+ { key: "O", label: "Set out-point" },
27
+ { key: "⇧O", label: "Clear out-point" },
28
+ { key: "A", label: "Jump to in-point" },
29
+ { key: "E", label: "Jump to out-point" },
30
+ ],
31
+ },
14
32
  ] as const;
15
33
 
16
34
  export function resolveSeekPercent(clientX: number, rectLeft: number, rectWidth: number): number {
@@ -42,7 +60,12 @@ export const PlayerControls = memo(function PlayerControls({
42
60
  const loopEnabled = usePlayerStore((s) => s.loopEnabled);
43
61
  const setPlaybackRate = usePlayerStore.getState().setPlaybackRate;
44
62
  const setLoopEnabled = usePlayerStore.getState().setLoopEnabled;
63
+ const inPoint = usePlayerStore((s) => s.inPoint);
64
+ const outPoint = usePlayerStore((s) => s.outPoint);
65
+ const setInPoint = usePlayerStore.getState().setInPoint;
66
+ const setOutPoint = usePlayerStore.getState().setOutPoint;
45
67
  const [showSpeedMenu, setShowSpeedMenu] = useState(false);
68
+ const [showShortcuts, setShowShortcuts] = useState(false);
46
69
  const [timeDisplayMode, setTimeDisplayMode] = useState<TimeDisplayMode>("time");
47
70
  const [jumpFrame, setJumpFrame] = useState("");
48
71
 
@@ -52,6 +75,7 @@ export const PlayerControls = memo(function PlayerControls({
52
75
  const seekBarRef = useRef<HTMLDivElement>(null);
53
76
  const sliderRef = useRef<HTMLDivElement>(null);
54
77
  const speedMenuContainerRef = useRef<HTMLDivElement>(null);
78
+ const shortcutsPanelRef = useRef<HTMLDivElement>(null);
55
79
  const isDraggingRef = useRef(false);
56
80
  const currentTimeRef = useRef(0);
57
81
  const timeDisplayModeRef = useRef(timeDisplayMode);
@@ -116,6 +140,19 @@ export const PlayerControls = memo(function PlayerControls({
116
140
  };
117
141
  }, [showSpeedMenu]);
118
142
 
143
+ useEffect(() => {
144
+ if (!showShortcuts) return;
145
+ const handleMouseDown = (e: MouseEvent) => {
146
+ if (shortcutsPanelRef.current && !shortcutsPanelRef.current.contains(e.target as Node)) {
147
+ setShowShortcuts(false);
148
+ }
149
+ };
150
+ document.addEventListener("mousedown", handleMouseDown);
151
+ return () => {
152
+ document.removeEventListener("mousedown", handleMouseDown);
153
+ };
154
+ }, [showShortcuts]);
155
+
119
156
  const seekFromClientX = useCallback(
120
157
  (clientX: number) => {
121
158
  if (disabled) return;
@@ -278,10 +315,14 @@ export const PlayerControls = memo(function PlayerControls({
278
315
  )}
279
316
  </button>
280
317
 
281
- {/* Time display */}
282
- <span
283
- className="font-mono text-[11px] tabular-nums flex-shrink-0 w-[118px]"
284
- style={{ color: "#A1A1AA" }}
318
+ {/* Time display — click to toggle time/frame mode */}
319
+ <button
320
+ type="button"
321
+ onClick={() => setTimeDisplayMode((m) => (m === "time" ? "frame" : "time"))}
322
+ disabled={disabled}
323
+ title={timeDisplayMode === "time" ? "Switch to frame display" : "Switch to time display"}
324
+ className="font-mono text-[11px] tabular-nums flex-shrink-0 w-[118px] text-left transition-colors disabled:pointer-events-none hover:opacity-80"
325
+ style={{ color: "#A1A1AA", cursor: "pointer" }}
285
326
  >
286
327
  <span ref={timeDisplayRef}>{formatTime(0)}</span>
287
328
  {timeDisplayMode === "time" ? (
@@ -290,7 +331,7 @@ export const PlayerControls = memo(function PlayerControls({
290
331
  <span style={{ color: "#52525B" }}>{formatTime(duration)}</span>
291
332
  </>
292
333
  ) : null}
293
- </span>
334
+ </button>
294
335
 
295
336
  {/* Seek bar — teal progress fill */}
296
337
  <div
@@ -320,16 +361,57 @@ export const PlayerControls = memo(function PlayerControls({
320
361
  className="w-full rounded-full relative"
321
362
  style={{ background: "rgba(255,255,255,0.15)", height: "3px" }}
322
363
  >
364
+ {/* Work-area band between in/out points */}
365
+ {(inPoint !== null || outPoint !== null) && duration > 0 && (
366
+ <div
367
+ className="absolute top-0 bottom-0 pointer-events-none"
368
+ style={{
369
+ left: `${inPoint !== null ? Math.min(100, (inPoint / duration) * 100) : 0}%`,
370
+ right: `${outPoint !== null ? 100 - Math.min(100, (outPoint / duration) * 100) : 0}%`,
371
+ background: "rgba(60,230,172,0.15)",
372
+ }}
373
+ />
374
+ )}
323
375
  {/* Progress fill — width is controlled imperatively via ref to avoid React re-render resets */}
324
376
  <div
325
377
  ref={progressFillRef}
326
378
  className="absolute top-0 bottom-0 left-0 z-[1] rounded-full"
327
379
  style={{ background: "linear-gradient(90deg, var(--hf-accent, #3CE6AC), #2BBFA0)" }}
328
380
  />
381
+ {/* In-point marker */}
382
+ {inPoint !== null && duration > 0 && (
383
+ <div
384
+ className="absolute z-[3] pointer-events-none"
385
+ style={{
386
+ left: `${Math.min(100, (inPoint / duration) * 100)}%`,
387
+ top: "50%",
388
+ transform: "translate(-50%, -50%)",
389
+ width: "2px",
390
+ height: "10px",
391
+ background: "#3CE6AC",
392
+ borderRadius: "1px",
393
+ }}
394
+ />
395
+ )}
396
+ {/* Out-point marker */}
397
+ {outPoint !== null && duration > 0 && (
398
+ <div
399
+ className="absolute z-[3] pointer-events-none"
400
+ style={{
401
+ left: `${Math.min(100, (outPoint / duration) * 100)}%`,
402
+ top: "50%",
403
+ transform: "translate(-50%, -50%)",
404
+ width: "2px",
405
+ height: "10px",
406
+ background: "#3CE6AC",
407
+ borderRadius: "1px",
408
+ }}
409
+ />
410
+ )}
329
411
  {/* Playhead thumb — left is controlled imperatively via ref */}
330
412
  <div
331
413
  ref={progressThumbRef}
332
- className="absolute top-1/2 z-[2] w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 transition-transform group-hover:scale-125"
414
+ className="absolute top-1/2 z-[4] w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 transition-transform group-hover:scale-125"
333
415
  style={{
334
416
  background: "var(--hf-accent, #3CE6AC)",
335
417
  boxShadow: "0 0 6px rgba(60,230,172,0.4), 0 1px 4px rgba(0,0,0,0.4)",
@@ -385,7 +467,7 @@ export const PlayerControls = memo(function PlayerControls({
385
467
  type="button"
386
468
  onClick={() => setLoopEnabled(!loopEnabled)}
387
469
  disabled={disabled}
388
- className={`h-7 w-14 rounded-md border px-2 text-[10px] font-medium transition-colors ${
470
+ className={`h-7 w-7 flex items-center justify-center rounded-md border transition-colors ${
389
471
  loopEnabled
390
472
  ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
391
473
  : "border-neutral-700 text-neutral-400 hover:border-neutral-500 hover:bg-neutral-800"
@@ -394,53 +476,201 @@ export const PlayerControls = memo(function PlayerControls({
394
476
  aria-label={loopEnabled ? "Disable loop playback" : "Enable loop playback"}
395
477
  aria-pressed={loopEnabled}
396
478
  >
397
- Loop
398
- </button>
399
-
400
- <button
401
- type="button"
402
- onClick={() => setTimeDisplayMode((mode) => (mode === "time" ? "frame" : "time"))}
403
- disabled={disabled}
404
- className="h-7 w-14 rounded-md border border-neutral-700 px-2 text-[10px] font-mono text-neutral-300 transition-colors hover:border-neutral-500 hover:bg-neutral-800"
405
- title="Toggle time/frame display"
406
- aria-label="Toggle time and frame display"
407
- >
408
- {timeDisplayMode === "time" ? "m:ss" : "frames"}
479
+ <svg
480
+ width="13"
481
+ height="13"
482
+ viewBox="0 0 24 24"
483
+ fill="none"
484
+ stroke="currentColor"
485
+ strokeWidth="2"
486
+ strokeLinecap="round"
487
+ strokeLinejoin="round"
488
+ aria-hidden="true"
489
+ >
490
+ <path d="M17 2l4 4-4 4" />
491
+ <path d="M3 11V9a4 4 0 0 1 4-4h14" />
492
+ <path d="M7 22l-4-4 4-4" />
493
+ <path d="M21 13v2a4 4 0 0 1-4 4H3" />
494
+ </svg>
409
495
  </button>
410
496
 
411
- <form
412
- onSubmit={handleJumpSubmit}
413
- className="hidden sm:flex flex-shrink-0 w-[58px] items-center"
414
- >
415
- <input
416
- value={jumpFrame}
417
- onChange={(e) => setJumpFrame(e.target.value)}
418
- disabled={disabled}
419
- inputMode="numeric"
420
- pattern="[0-9]*"
421
- aria-label="Jump to frame"
422
- placeholder="frame"
423
- className="h-7 w-[58px] rounded-md border border-neutral-700 bg-neutral-900 px-2 text-[10px] font-mono tabular-nums text-neutral-200 outline-none transition-colors placeholder:text-neutral-600 focus:border-studio-accent/60"
424
- onKeyDown={handleJumpKeyDown}
425
- onBlur={commitJumpFrame}
426
- />
427
- </form>
428
-
429
- <div
430
- className="hidden lg:flex items-center gap-1 text-[9px] font-mono text-neutral-500"
431
- aria-label="Playback shortcuts: J backward, K stop, L forward, arrows step one frame"
432
- >
433
- {SHORTCUT_HINTS.map((shortcut) => (
434
- <span
435
- key={shortcut.key}
436
- className="group relative rounded border border-neutral-800 px-1 py-0.5"
497
+ {/* Keyboard shortcuts + frame jump + work area — click to open panel */}
498
+ <div ref={shortcutsPanelRef} className="relative flex-shrink-0">
499
+ <button
500
+ type="button"
501
+ onClick={() => setShowShortcuts((v) => !v)}
502
+ className={`w-6 h-6 flex items-center justify-center rounded border transition-colors ${
503
+ showShortcuts
504
+ ? "border-neutral-600 text-neutral-200 bg-neutral-800"
505
+ : "border-neutral-800 text-neutral-600 hover:text-neutral-300 hover:border-neutral-600"
506
+ }`}
507
+ aria-label="Shortcuts and tools"
508
+ aria-expanded={showShortcuts}
509
+ >
510
+ <svg
511
+ width="11"
512
+ height="11"
513
+ viewBox="0 0 24 24"
514
+ fill="none"
515
+ stroke="currentColor"
516
+ strokeWidth="1.75"
517
+ strokeLinecap="round"
518
+ strokeLinejoin="round"
519
+ aria-hidden="true"
437
520
  >
438
- {shortcut.key}
439
- <span className="pointer-events-none absolute bottom-full left-1/2 z-50 mb-1.5 hidden -translate-x-1/2 whitespace-nowrap rounded-md border border-neutral-700 bg-neutral-950 px-2 py-1 font-sans text-[10px] text-neutral-200 shadow-lg group-hover:block">
440
- {shortcut.label}
441
- </span>
442
- </span>
443
- ))}
521
+ <rect x="2" y="4" width="20" height="16" rx="2" />
522
+ <path d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M8 16h8" />
523
+ </svg>
524
+ </button>
525
+ {showShortcuts && (
526
+ <div
527
+ className="absolute bottom-full right-0 mb-2 z-50 rounded-lg shadow-xl min-w-[220px] overflow-y-auto"
528
+ style={{
529
+ background: "#161618",
530
+ border: "1px solid rgba(255,255,255,0.08)",
531
+ maxHeight: "min(280px, calc(100vh - 80px))",
532
+ }}
533
+ >
534
+ {/* Frame jump */}
535
+ <div className="px-3 pt-3 pb-2.5">
536
+ <p className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5">
537
+ Jump to frame
538
+ </p>
539
+ <form onSubmit={handleJumpSubmit} className="flex items-center gap-1.5">
540
+ <input
541
+ value={jumpFrame}
542
+ onChange={(e) => setJumpFrame(e.target.value)}
543
+ disabled={disabled}
544
+ inputMode="numeric"
545
+ pattern="[0-9]*"
546
+ aria-label="Jump to frame"
547
+ placeholder="frame number"
548
+ className="h-6 flex-1 rounded border border-neutral-700 bg-neutral-900 px-2 text-[10px] font-mono tabular-nums text-neutral-200 outline-none transition-colors placeholder:text-neutral-600 focus:border-studio-accent/60"
549
+ onKeyDown={handleJumpKeyDown}
550
+ onBlur={commitJumpFrame}
551
+ />
552
+ <button
553
+ type="submit"
554
+ disabled={disabled}
555
+ className="h-6 px-2 rounded border border-neutral-700 text-[10px] text-neutral-300 transition-colors hover:border-neutral-500 hover:bg-neutral-800 disabled:opacity-40"
556
+ >
557
+ Go
558
+ </button>
559
+ </form>
560
+ </div>
561
+ <div style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }} />
562
+ {/* Work area */}
563
+ <div className="px-3 pt-2.5 pb-2">
564
+ <p className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5">
565
+ Work area
566
+ </p>
567
+ <div className="flex flex-col gap-1">
568
+ <div className="flex items-center justify-between gap-2">
569
+ <div className="flex items-center gap-2">
570
+ <span
571
+ className="font-mono text-[10px] rounded border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center"
572
+ style={{ background: "rgba(255,255,255,0.05)" }}
573
+ >
574
+ I
575
+ </span>
576
+ <span className="text-[10px] text-neutral-400">In-point</span>
577
+ </div>
578
+ <div className="flex items-center gap-1.5">
579
+ {inPoint !== null ? (
580
+ <>
581
+ <span className="font-mono text-[10px] text-neutral-300">
582
+ {formatTime(inPoint)}
583
+ </span>
584
+ <button
585
+ type="button"
586
+ onClick={() => setInPoint(null)}
587
+ className="w-4 h-4 flex items-center justify-center rounded text-neutral-500 hover:text-neutral-200 transition-colors"
588
+ aria-label="Clear in-point"
589
+ >
590
+ <svg
591
+ width="8"
592
+ height="8"
593
+ viewBox="0 0 24 24"
594
+ fill="none"
595
+ stroke="currentColor"
596
+ strokeWidth="2.5"
597
+ >
598
+ <path d="M18 6L6 18M6 6l12 12" />
599
+ </svg>
600
+ </button>
601
+ </>
602
+ ) : (
603
+ <span className="text-[10px] text-neutral-600">—</span>
604
+ )}
605
+ </div>
606
+ </div>
607
+ <div className="flex items-center justify-between gap-2">
608
+ <div className="flex items-center gap-2">
609
+ <span
610
+ className="font-mono text-[10px] rounded border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center"
611
+ style={{ background: "rgba(255,255,255,0.05)" }}
612
+ >
613
+ O
614
+ </span>
615
+ <span className="text-[10px] text-neutral-400">Out-point</span>
616
+ </div>
617
+ <div className="flex items-center gap-1.5">
618
+ {outPoint !== null ? (
619
+ <>
620
+ <span className="font-mono text-[10px] text-neutral-300">
621
+ {formatTime(outPoint)}
622
+ </span>
623
+ <button
624
+ type="button"
625
+ onClick={() => setOutPoint(null)}
626
+ className="w-4 h-4 flex items-center justify-center rounded text-neutral-500 hover:text-neutral-200 transition-colors"
627
+ aria-label="Clear out-point"
628
+ >
629
+ <svg
630
+ width="8"
631
+ height="8"
632
+ viewBox="0 0 24 24"
633
+ fill="none"
634
+ stroke="currentColor"
635
+ strokeWidth="2.5"
636
+ >
637
+ <path d="M18 6L6 18M6 6l12 12" />
638
+ </svg>
639
+ </button>
640
+ </>
641
+ ) : (
642
+ <span className="text-[10px] text-neutral-600">—</span>
643
+ )}
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ <div style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }} />
649
+ {/* Shortcuts */}
650
+ <div className="px-3 pt-2.5 pb-3 flex flex-col gap-3">
651
+ {SHORTCUT_SECTIONS.map((section) => (
652
+ <div key={section.title}>
653
+ <p className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5">
654
+ {section.title}
655
+ </p>
656
+ <div className="flex flex-col gap-1">
657
+ {section.hints.map((hint) => (
658
+ <div key={hint.key} className="flex items-center gap-3">
659
+ <span
660
+ className="font-mono text-[10px] rounded border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center"
661
+ style={{ background: "rgba(255,255,255,0.05)" }}
662
+ >
663
+ {hint.key}
664
+ </span>
665
+ <span className="text-[10px] text-neutral-400">{hint.label}</span>
666
+ </div>
667
+ ))}
668
+ </div>
669
+ </div>
670
+ ))}
671
+ </div>
672
+ </div>
673
+ )}
444
674
  </div>
445
675
  </div>
446
676
  );
package/src/player/hooks/usePlaybackKeyboard.ts CHANGED
@@ -128,9 +128,33 @@ export function usePlaybackKeyboard({
128
128
  return;
129
129
  }
130
130
  shuttle("forward");
131
+ return;
132
+ }
133
+ if (e.code === "KeyI") {
134
+ e.preventDefault();
135
+ const t = getAdapter()?.getTime() ?? usePlayerStore.getState().currentTime;
136
+ usePlayerStore.getState().setInPoint(e.shiftKey ? null : t);
137
+ return;
138
+ }
139
+ if (e.code === "KeyO") {
140
+ e.preventDefault();
141
+ const t = getAdapter()?.getTime() ?? usePlayerStore.getState().currentTime;
142
+ usePlayerStore.getState().setOutPoint(e.shiftKey ? null : t);
143
+ return;
144
+ }
145
+ if (e.code === "KeyA") {
146
+ e.preventDefault();
147
+ seek(usePlayerStore.getState().inPoint ?? 0);
148
+ return;
149
+ }
150
+ if (e.code === "KeyE") {
151
+ e.preventDefault();
152
+ const { outPoint } = usePlayerStore.getState();
153
+ seek(outPoint ?? getAdapter()?.getDuration() ?? usePlayerStore.getState().duration);
154
+ return;
131
155
  }
132
156
  },
133
- [pause, shuttle, stepFrames, togglePlay],
157
+ [pause, shuttle, stepFrames, togglePlay, getAdapter, seek],
134
158
  );
135
159
 
136
160
  const handlePlaybackKeyUp = useCallback((e: KeyboardEvent) => {