@hyperframes/studio 0.8.72 → 0.8.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.72",
+  "version": "0.8.74",
   "description": "",
   "repository": {
     "type": "git",
@@ -52,11 +52,11 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.72",
-    "@hyperframes/parsers": "0.8.72",
-    "@hyperframes/player": "0.8.72",
-    "@hyperframes/studio-server": "0.8.72",
-    "@hyperframes/sdk": "0.8.72"
+    "@hyperframes/core": "0.8.74",
+    "@hyperframes/parsers": "0.8.74",
+    "@hyperframes/sdk": "0.8.74",
+    "@hyperframes/studio-server": "0.8.74",
+    "@hyperframes/player": "0.8.74"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -72,7 +72,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.72"
+    "@hyperframes/producer": "0.8.74"
   },
   "peerDependencies": {
     "react": "19",

package/src/hooks/appHotkeysDispatch.ts

@@ -8,6 +8,7 @@ import { isEditableTarget } from "../utils/timelineDiscovery";
 import { shouldIgnoreHistoryShortcut } from "../utils/studioHelpers";
 import { canSplitElement } from "../utils/timelineElementSplit";
 import { trackStudioEvent } from "../utils/studioTelemetry";
+import { STUDIO_PLAIN_KEYS } from "../player/components/studioShortcuts";
 
 // Extracted from useAppHotkeys.ts to keep it under the studio 600-line cap,
 // following useTimelineDeleteOps's precedent. Pure functions, no hooks — the
@@ -158,7 +159,7 @@ export function dispatchModifierKey(
  *  Delete arbitration between keyframes, an automation range and the clip can
  *  be asserted without standing up the whole hook. */
 export function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCallbacks): void {
-  if (key === "f" && !event.shiftKey && !event.altKey) {
+  if (key === STUDIO_PLAIN_KEYS.fullscreen && !event.shiftKey && !event.altKey) {
     event.preventDefault();
     if (document.fullscreenElement) void document.exitFullscreen();
     else
@@ -166,7 +167,7 @@ export function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCa
     return;
   }
 
-  if (event.key === "s" && !event.altKey) {
+  if (event.key === STUDIO_PLAIN_KEYS.split && !event.altKey) {
     // Reserve bare `s` for Split even when the current selection cannot split,
     // so secondary listeners do not reinterpret the same key as Snap toggle.
     event.preventDefault();
@@ -274,7 +275,12 @@ export function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCa
     return;
   }
 
-  if (event.key === "r" && !event.shiftKey && !event.altKey && cb.onToggleRecording) {
+  if (
+    event.key === STUDIO_PLAIN_KEYS.record &&
+    !event.shiftKey &&
+    !event.altKey &&
+    cb.onToggleRecording
+  ) {
     event.preventDefault();
     cb.onToggleRecording();
   }

package/src/index.ts

@@ -35,6 +35,8 @@ export type { ToggleProps } from "./components/ui/Toggle";
 export { EditorShell } from "./components/EditorShell";
 export type { EditorShellProps } from "./components/EditorShell";
 export { NLEPreview } from "./components/nle/NLEPreview";
+export { DEFAULT_SHORTCUT_SECTIONS } from "./player/components/studioShortcuts";
+export type { ShortcutHint, ShortcutSection } from "./player/components/studioShortcuts";
 export { CompositionBreadcrumb } from "./components/nle/CompositionBreadcrumb";
 export type { CompositionLevel } from "./components/nle/CompositionBreadcrumb";
 

package/src/player/components/PlayerControls.tsx

@@ -7,6 +7,7 @@ import { trackStudioEvent } from "../../utils/studioTelemetry";
 import { Tooltip } from "../../components/ui";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { ShortcutsPanel } from "./ShortcutsPanel";
+import type { ShortcutSection } from "./studioShortcuts";
 import { SpeedMenu } from "./SpeedMenu";
 import { VolumeControl } from "./VolumeControl";
 
@@ -161,6 +162,8 @@ interface PlayerControlsProps {
   disabled?: boolean;
   isFullscreen?: boolean;
   onToggleFullscreen?: () => void;
+  /** Replaces the shortcuts panel's list, e.g. DEFAULT_SHORTCUT_SECTIONS with entries dropped or relabelled. */
+  shortcutSections?: readonly ShortcutSection[];
 }
 
 export const PlayerControls = memo(function PlayerControls({
@@ -169,6 +172,7 @@ export const PlayerControls = memo(function PlayerControls({
   disabled = false,
   isFullscreen = false,
   onToggleFullscreen,
+  shortcutSections,
 }: PlayerControlsProps) {
   const isPlaying = usePlayerStore((s) => s.isPlaying);
   const duration = usePlayerStore((s) => s.duration);
@@ -291,6 +295,7 @@ export const PlayerControls = memo(function PlayerControls({
             setInPoint={setInPoint}
             setOutPoint={setOutPoint}
             onSeek={onSeek}
+            sections={shortcutSections}
           />
         </div>
       </div>

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

@@ -3,6 +3,8 @@
 import React, { act, Profiler } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { ShortcutsPanel } from "./ShortcutsPanel";
+import { PlayerControls } from "./PlayerControls";
+import { DEFAULT_SHORTCUT_SECTIONS, type ShortcutSection } from "./studioShortcuts";
 import { createHappyDomRootHarness } from "./testRootHarness";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -149,4 +151,53 @@ describe("ShortcutsPanel", () => {
     expect(panel?.getAttribute("aria-modal")).toBeNull();
     expect(panel?.id).toBe(panelId);
   });
+
+  it("lists what an embedder passes to PlayerControls instead of Studio's defaults", () => {
+    const listed = (sections?: readonly ShortcutSection[]) => {
+      const host = document.createElement("div");
+      document.body.append(host);
+      act(() => {
+        mount(host).render(
+          <PlayerControls onTogglePlay={vi.fn()} onSeek={vi.fn()} shortcutSections={sections} />,
+        );
+      });
+      openPanel(host.querySelector<HTMLButtonElement>('button[aria-label="Shortcuts and tools"]')!);
+      return host.textContent ?? "";
+    };
+    const withoutSplit = DEFAULT_SHORTCUT_SECTIONS.map((section) => ({
+      ...section,
+      hints: section.hints.filter((hint) => hint.label !== "Split clip at playhead"),
+    }));
+
+    expect(listed()).toContain("Split clip at playhead");
+    expect(listed(withoutSplit)).not.toContain("Split clip at playhead");
+    expect(listed(withoutSplit)).toContain("Toggle fullscreen");
+  });
+
+  it("renders an embedder list that repeats a key or a section title without key clashes", () => {
+    const errors = vi.spyOn(console, "error").mockImplementation(() => {});
+    const host = document.createElement("div");
+    document.body.append(host);
+    const sections = [
+      {
+        title: "Keys",
+        hints: [
+          { key: "S", label: "Select" },
+          { key: "S", label: "Snap" },
+        ],
+      },
+      { title: "Keys", hints: [{ key: "V", label: "Move" }] },
+    ];
+    act(() => {
+      mount(host).render(
+        <PlayerControls onTogglePlay={vi.fn()} onSeek={vi.fn()} shortcutSections={sections} />,
+      );
+    });
+    openPanel(host.querySelector<HTMLButtonElement>('button[aria-label="Shortcuts and tools"]')!);
+
+    expect(host.textContent).toContain("Select");
+    expect(host.textContent).toContain("Snap");
+    expect(errors.mock.calls.flat().join(" ")).not.toMatch(/same key/);
+    errors.mockRestore();
+  });
 });

package/src/player/components/ShortcutsPanel.tsx

@@ -2,92 +2,7 @@ import { useState, useCallback, useEffect, useId, useRef, memo } from "react";
 import { formatTime, frameToSeconds } from "../lib/time";
 import { Tooltip } from "../../components/ui";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
-
-const SHORTCUT_SECTIONS = [
-  {
-    title: "Playback",
-    hints: [
-      { key: "Space", label: "Play / Pause" },
-      { 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" },
-    ],
-  },
-  {
-    title: "Keyframes (when an element is selected)",
-    hints: [
-      { key: "K", label: "Add keyframe at playhead" },
-      { key: "Del", label: "Delete selected keyframe" },
-      { key: "H", label: "Toggle hold / bezier" },
-      { key: "U", label: "Expand / collapse properties" },
-      { key: "R", label: "Record gesture" },
-    ],
-  },
-  {
-    title: "Editing",
-    hints: [
-      { key: "⌘Z", label: "Undo" },
-      { key: "⌘⇧Z", label: "Redo" },
-      { key: "⌘C", label: "Copy element" },
-      { key: "⌘V", label: "Paste element" },
-      { key: "⌘X", label: "Cut element" },
-      { key: "S", label: "Split clip at playhead" },
-      { key: "⇧Click", label: "Razor tool: split all tracks" },
-      { key: "⌘G", label: "Group elements" },
-      { key: "⌘⇧G", label: "Ungroup" },
-      { key: "Del", label: "Delete selected element (no keyframe selected)" },
-    ],
-  },
-  {
-    title: "Gesture recording modifiers",
-    hints: [
-      { key: "Drag", label: "Record x / y position" },
-      { key: "Scroll", label: "Record z depth" },
-      { key: "⇧ Drag", label: "Record rotationX / rotationY" },
-      { key: "⌥ Drag", label: "Record rotation" },
-      { key: "⌘ Drag↕", label: "Record opacity" },
-      { key: "⌘ Scroll", label: "Record scale" },
-    ],
-  },
-  {
-    title: "Canvas",
-    hints: [
-      { key: "Drag", label: "Move element / add keyframe" },
-      { key: "⌥ Drag", label: "Move entire animation path" },
-      { key: "⇧ Drag", label: "Uniform resize" },
-    ],
-  },
-  {
-    title: "Crop",
-    hints: [
-      { key: "Drag edge", label: "Crop a side" },
-      { key: "Drag center", label: "Reposition the crop" },
-    ],
-  },
-  {
-    title: "Panels",
-    hints: [
-      { key: "⌘1", label: "Compositions tab" },
-      { key: "⌘2", label: "Assets tab" },
-    ],
-  },
-  {
-    title: "Work area",
-    hints: [
-      { key: "I", label: "Set in-point" },
-      { key: "⇧I", label: "Clear in-point" },
-      { key: "O", label: "Set out-point" },
-      { key: "⇧O", label: "Clear out-point" },
-      { key: "A", label: "Jump to in-point" },
-      { key: "E", label: "Jump to out-point" },
-    ],
-  },
-] as const;
+import { DEFAULT_SHORTCUT_SECTIONS, type ShortcutSection } from "./studioShortcuts";
 
 interface ShortcutsPanelProps {
   disabled: boolean;
@@ -97,6 +12,7 @@ interface ShortcutsPanelProps {
   setInPoint: (v: number | null) => void;
   setOutPoint: (v: number | null) => void;
   onSeek: (time: number) => void;
+  sections?: readonly ShortcutSection[];
 }
 
 export const ShortcutsPanel = memo(function ShortcutsPanel({
@@ -107,6 +23,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
   setInPoint,
   setOutPoint,
   onSeek,
+  sections = DEFAULT_SHORTCUT_SECTIONS,
 }: ShortcutsPanelProps) {
   const [showShortcuts, setShowShortcuts] = useState(false);
   const [jumpFrame, setJumpFrame] = useState("");
@@ -319,14 +236,14 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
           </div>
           <div style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }} />
           <div className="px-3 pt-2.5 pb-3 flex flex-col gap-3">
-            {SHORTCUT_SECTIONS.map((section) => (
-              <div key={section.title}>
+            {sections.map((section, sectionIndex) => (
+              <div key={sectionIndex}>
                 <p className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5">
                   {section.title}
                 </p>
                 <div className="flex flex-col gap-1">
-                  {section.hints.map((hint) => (
-                    <div key={hint.key} className="flex items-center gap-3">
+                  {section.hints.map((hint, hintIndex) => (
+                    <div key={hintIndex} className="flex items-center gap-3">
                       <span
                         className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center"
                         style={{ background: "rgba(255,255,255,0.05)" }}

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

@@ -0,0 +1,98 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TimelineRuler } from "./TimelineRuler";
+import { TIMELINE_SCROLL_SETTLE_MS } from "./useTimelineScrollViewport";
+import type { TimelineTheme } from "./timelineTheme";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("TimelineRuler", () => {
+  it("masks the one tick label the track header would slice, once the scroll settles", () => {
+    vi.useFakeTimers();
+    const scroller = document.createElement("div");
+    let scrollLeft = 0;
+    Object.defineProperty(scroller, "scrollLeft", { get: () => scrollLeft });
+    const host = document.createElement("div");
+    scroller.append(host);
+    const root = createRoot(host);
+    act(() =>
+      root.render(
+        <TimelineRuler
+          major={[0, 10, 20]}
+          minor={[]}
+          pps={20}
+          trackContentWidth={600}
+          totalH={100}
+          effectiveDuration={30}
+          majorTickInterval={10}
+          theme={{} as TimelineTheme}
+          contentOrigin={80}
+          scrollRef={{ current: scroller }}
+        />,
+      ),
+    );
+    const mask = () =>
+      host.querySelector<HTMLElement>("[data-timeline-ruler-label-mask]")?.style.left ?? null;
+    const scrollTo = (left: number) =>
+      act(() => {
+        scrollLeft = left;
+        scroller.dispatchEvent(new Event("scroll"));
+      });
+    const settle = () => act(() => vi.advanceTimersByTime(TIMELINE_SCROLL_SETTLE_MS));
+
+    expect(mask()).toBeNull();
+    // The 10s label starts at 200 - 0.5 + 5 = 204.5 in ruler space.
+    scrollTo(204);
+    expect(mask()).toBeNull();
+    settle();
+    expect(mask()).toBe("4.5px");
+    scrollTo(205);
+    expect(mask()).toBeNull();
+    settle();
+    expect(mask()).toBe("204.5px");
+    act(() => root.unmount());
+  });
+
+  it("masks right away when the scroll element is swapped mid-scroll", () => {
+    vi.useFakeTimers();
+    const make = (left: number) => {
+      const el = document.createElement("div");
+      Object.defineProperty(el, "scrollLeft", { get: () => left });
+      return el;
+    };
+    const first = make(205);
+    const host = document.createElement("div");
+    const root = createRoot(host);
+    const render = (el: HTMLDivElement) =>
+      act(() =>
+        root.render(
+          <TimelineRuler
+            major={[0, 10, 20]}
+            minor={[]}
+            pps={20}
+            trackContentWidth={600}
+            totalH={100}
+            effectiveDuration={30}
+            majorTickInterval={10}
+            theme={{} as TimelineTheme}
+            contentOrigin={80}
+            scrollRef={{ current: el }}
+          />,
+        ),
+      );
+    render(first);
+    act(() => first.dispatchEvent(new Event("scroll")));
+    render(make(205));
+    expect(host.querySelector<HTMLElement>("[data-timeline-ruler-label-mask]")?.style.left).toBe(
+      "204.5px",
+    );
+    act(() => root.unmount());
+  });
+});

package/src/player/components/TimelineRuler.tsx

@@ -1,4 +1,5 @@
-import { memo } from "react";
+import { memo, useCallback, useRef, useSyncExternalStore, type RefObject } from "react";
+import { TIMELINE_SCROLL_SETTLE_MS } from "./useTimelineScrollViewport";
 import type { TimelineTheme } from "./timelineTheme";
 import { RULER_H, getTimelineBeatEntries } from "./timelineLayout";
 import { formatTimelineTickLabel } from "./timelineRulerGeometry";
@@ -19,8 +20,95 @@ interface TimelineRulerProps {
   beatAnalysis?: MusicBeatAnalysis | null;
   contentOrigin: number;
   renderTimeRange?: TimelineTimeRange;
+  scrollRef?: RefObject<HTMLDivElement | null>;
 }
 
+const TICK_LABEL_INSET_PX = 5;
+
+// Index of the major tick whose label starts under the track-header corner, which
+// covers ruler x < scrollLeft; -1 when none does.
+function tickIndexUnderHeader(major: number[], pps: number, scrollLeft: number): number {
+  let lo = 0;
+  let hi = major.length - 1;
+  let found = -1;
+  while (lo <= hi) {
+    const mid = (lo + hi) >> 1;
+    if (major[mid]! * pps - 0.5 + TICK_LABEL_INSET_PX < scrollLeft) {
+      found = mid;
+      lo = mid + 1;
+    } else hi = mid - 1;
+  }
+  return found;
+}
+
+/**
+ * Paints over the one label the header corner would slice, once a scroll settles. Moving it
+ * on every tick crossing cost 2-3x the scroll budget on a large timeline, so mid-scroll a
+ * fragment can still show.
+ */
+const HeaderSlicedLabelMask = memo(function HeaderSlicedLabelMask({
+  scrollRef,
+  major,
+  pps,
+  background,
+}: {
+  scrollRef: RefObject<HTMLDivElement | null>;
+  major: number[];
+  pps: number;
+  background: string;
+}) {
+  const scrollingRef = useRef(false);
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      const el = scrollRef.current;
+      let settle: ReturnType<typeof setTimeout> | undefined;
+      const onScroll = () => {
+        if (!scrollingRef.current) {
+          scrollingRef.current = true;
+          onChange();
+        }
+        clearTimeout(settle);
+        settle = setTimeout(() => {
+          scrollingRef.current = false;
+          onChange();
+        }, TIMELINE_SCROLL_SETTLE_MS);
+      };
+      el?.addEventListener("scroll", onScroll, { passive: true });
+      return () => {
+        clearTimeout(settle);
+        scrollingRef.current = false;
+        el?.removeEventListener("scroll", onScroll);
+      };
+    },
+    [scrollRef],
+  );
+  const index = useSyncExternalStore(
+    subscribe,
+    () =>
+      scrollingRef.current
+        ? -1
+        : tickIndexUnderHeader(major, pps, scrollRef.current?.scrollLeft ?? 0),
+    () => -1,
+  );
+  if (index < 0) return null;
+  const labelLeft = major[index]! * pps - 0.5 + TICK_LABEL_INSET_PX;
+  const next = major[index + 1];
+  return (
+    <div
+      data-timeline-ruler-label-mask=""
+      className="absolute pointer-events-none"
+      style={{
+        left: labelLeft,
+        top: 4,
+        height: 12,
+        // Up to the next label, so only this label's text band is covered.
+        width: next === undefined ? 80 : (next - major[index]!) * pps - TICK_LABEL_INSET_PX,
+        background,
+      }}
+    />
+  );
+});
+
 export const TimelineRuler = memo(function TimelineRuler({
   major,
   minor,
@@ -33,6 +121,7 @@ export const TimelineRuler = memo(function TimelineRuler({
   beatAnalysis,
   contentOrigin,
   renderTimeRange,
+  scrollRef,
 }: TimelineRulerProps) {
   const timeDisplayMode = usePlayerStore((s) => s.timeDisplayMode);
   const beatTimes = beatAnalysis?.beatTimes ?? [];
@@ -131,7 +220,7 @@ export const TimelineRuler = memo(function TimelineRuler({
                 className="absolute font-mono tabular-nums leading-none whitespace-nowrap"
                 style={{
                   color: theme.tickText,
-                  left: 5,
+                  left: TICK_LABEL_INSET_PX,
                   top: 5,
                   fontSize: 10,
                 }}
@@ -143,6 +232,14 @@ export const TimelineRuler = memo(function TimelineRuler({
               <div className="w-px" style={{ height: RULER_H, background: theme.tickMajor }} />
             </div>
           ))}
+          {scrollRef && (
+            <HeaderSlicedLabelMask
+              scrollRef={scrollRef}
+              major={major}
+              pps={pps}
+              background={theme.shellBackground}
+            />
+          )}
         </div>
       </div>
     </>

package/src/player/components/TimelineRulerPart.tsx

@@ -17,6 +17,7 @@ export function TimelineRulerPart() {
       beatAnalysis={props.beatAnalysis}
       contentOrigin={props.contentOrigin}
       renderTimeRange={props.rowsVirtualized ? props.renderTimeRange : undefined}
+      scrollRef={props.scrollRef}
     />
   );
 }

package/src/player/components/studioShortcuts.ts

@@ -0,0 +1,101 @@
+/** Bare keys Studio's app hotkeys bind; the shortcuts list names them from here. */
+export const STUDIO_PLAIN_KEYS = { fullscreen: "f", split: "s", record: "r" } as const;
+
+export interface ShortcutHint {
+  key: string;
+  label: string;
+}
+
+export interface ShortcutSection {
+  title: string;
+  hints: readonly ShortcutHint[];
+}
+
+const hintKey = (key: string) => key.toUpperCase();
+
+/** What PlayerControls' shortcuts panel lists unless an embedder passes its own sections. */
+export const DEFAULT_SHORTCUT_SECTIONS: readonly ShortcutSection[] = [
+  {
+    title: "Playback",
+    hints: [
+      { key: "Space", label: "Play / Pause" },
+      { 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: hintKey(STUDIO_PLAIN_KEYS.fullscreen), label: "Toggle fullscreen" },
+    ],
+  },
+  {
+    title: "Keyframes (when an element is selected)",
+    hints: [
+      { key: "K", label: "Add keyframe at playhead" },
+      { key: "Del", label: "Delete selected keyframe" },
+      { key: "H", label: "Toggle hold / bezier" },
+      { key: "U", label: "Expand / collapse properties" },
+      { key: hintKey(STUDIO_PLAIN_KEYS.record), label: "Record gesture" },
+    ],
+  },
+  {
+    title: "Editing",
+    hints: [
+      { key: "⌘Z", label: "Undo" },
+      { key: "⌘⇧Z", label: "Redo" },
+      { key: "⌘C", label: "Copy element" },
+      { key: "⌘V", label: "Paste element" },
+      { key: "⌘X", label: "Cut element" },
+      { key: hintKey(STUDIO_PLAIN_KEYS.split), label: "Split clip at playhead" },
+      { key: "⇧Click", label: "Razor tool: split all tracks" },
+      { key: "⌘G", label: "Group elements" },
+      { key: "⌘⇧G", label: "Ungroup" },
+      { key: "Del", label: "Delete selected element (no keyframe selected)" },
+    ],
+  },
+  {
+    title: "Gesture recording modifiers",
+    hints: [
+      { key: "Drag", label: "Record x / y position" },
+      { key: "Scroll", label: "Record z depth" },
+      { key: "⇧ Drag", label: "Record rotationX / rotationY" },
+      { key: "⌥ Drag", label: "Record rotation" },
+      { key: "⌘ Drag↕", label: "Record opacity" },
+      { key: "⌘ Scroll", label: "Record scale" },
+    ],
+  },
+  {
+    title: "Canvas",
+    hints: [
+      { key: "Drag", label: "Move element / add keyframe" },
+      { key: "⌥ Drag", label: "Move entire animation path" },
+      { key: "⇧ Drag", label: "Uniform resize" },
+    ],
+  },
+  {
+    title: "Crop",
+    hints: [
+      { key: "Drag edge", label: "Crop a side" },
+      { key: "Drag center", label: "Reposition the crop" },
+    ],
+  },
+  {
+    title: "Panels",
+    hints: [
+      { key: "⌘1", label: "Compositions tab" },
+      { key: "⌘2", label: "Assets tab" },
+    ],
+  },
+  {
+    title: "Work area",
+    hints: [
+      { key: "I", label: "Set in-point" },
+      { key: "⇧I", label: "Clear in-point" },
+      { key: "O", label: "Set out-point" },
+      { key: "⇧O", label: "Clear out-point" },
+      { key: "A", label: "Jump to in-point" },
+      { key: "E", label: "Jump to out-point" },
+    ],
+  },
+];