);
}
// Confirmation dialog — two buttons (Cancel + a custom-labelled action).
// Esc cancels, Enter confirms.
function ConfirmDialog({ title, message, confirmLabel, cancelLabel, danger, onConfirm, onCancel }) {
React.useEffect(() => {
const onKey = (e) => {
if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); onCancel(); }
else if (e.key === "Enter") { e.preventDefault(); e.stopPropagation(); onConfirm(); }
};
// Capture-phase so we beat the overlay's global key handler.
window.addEventListener("keydown", onKey, true);
return () => window.removeEventListener("keydown", onKey, true);
}, [onConfirm, onCancel]);
return (
);
}
function ContextMenu({ x, y, slotIndex, slot, onRename, onClear, onSetHue, onCapture, onCaptureEffect, onCaptureTransition, onPickThumb, onResetThumb, onClose }) {
const ref = React.useRef(null);
// Clamp into viewport so the menu never overflows.
const [pos, setPos] = React.useState({ left: x, top: y });
React.useLayoutEffect(() => {
if (!ref.current) return;
const r = ref.current.getBoundingClientRect();
const left = Math.min(x, window.innerWidth - r.width - 8);
const top = Math.min(y, window.innerHeight - r.height - 8);
setPos({ left, top });
}, [x, y]);
// A slot is "populated" if it has *any* source: a disk file, an imported
// project nodeId, or a saved Premiere clipboard capture. Mirrors the
// SlotTile.isEmpty check so timeline-captured cards can be renamed/cleared.
const hasContent = !!(slot && (slot.path || slot.clipboardFile || slot.nodeId || slot.effectRecipe));
// Copied effect cards (dragged in from the Effects tool) are locked: the
// effect recipe + thumbnail + name are canonical, so Save Clips, Save
// Attributes, Rename, and thumbnail edits are all disabled. Clear stays
// open so the user can free the slot.
const isPreset = !!(slot && slot.preset);
return (
<>
{ e.preventDefault(); onClose(); }}/>
e.stopPropagation()}
onContextMenu={(e) => e.preventDefault()}>
Save Preset
{slot && slot.customThumb && !isPreset && (
)}
Color
{COLOR_OPTIONS.map((c) => {
const active = !!(slot && slot.customColor && slot.customColor.name === c.name);
return (
);
}
function hotkeyLabel(code) {
if (!code) return "—";
if (code === "Backquote") return "`";
// Pretty-print an Electron Accelerator string ("Command+Shift+K") with mac glyphs.
const SYMS = {
Command: "⌘", Cmd: "⌘", CommandOrControl: "⌘", CmdOrCtrl: "⌘",
Control: "⌃", Ctrl: "⌃",
Alt: "⌥", Option: "⌥",
Shift: "⇧",
Return: "↵", Enter: "↵",
Backspace: "⌫", Delete: "⌦",
Tab: "⇥", Escape: "⎋",
Space: "Space",
Up: "↑", Down: "↓", Left: "←", Right: "→"
};
return code.split("+").map((p) => SYMS[p] || p).join("");
}
// Convert a browser KeyboardEvent into an Electron Accelerator string
// (e.g. "Command+Shift+K"). Returns null for modifier-only presses.
function keyEventToAccelerator(e) {
if (["Meta","Control","Alt","Shift","OS","Hyper","Super"].indexOf(e.key) !== -1) return null;
const parts = [];
if (e.metaKey) parts.push("Command");
if (e.ctrlKey) parts.push("Control");
if (e.altKey) parts.push("Alt");
if (e.shiftKey) parts.push("Shift");
const k = mapCodeToAccelerator(e);
if (!k) return null;
parts.push(k);
return parts.join("+");
}
function mapCodeToAccelerator(e) {
const code = e.code || "";
if (/^Key[A-Z]$/.test(code)) return code.slice(3);
if (/^Digit[0-9]$/.test(code)) return code.slice(5);
if (/^F([1-9]|1[0-9]|2[0-4])$/.test(code)) return code;
const SPECIAL = {
Backquote: "`", Minus: "-", Equal: "=",
BracketLeft: "[", BracketRight: "]", Backslash: "\\",
Semicolon: ";", Quote: "'",
Comma: ",", Period: ".", Slash: "/",
Space: "Space", Enter: "Return", Tab: "Tab",
Backspace: "Backspace", Delete: "Delete",
ArrowUp: "Up", ArrowDown: "Down", ArrowLeft: "Left", ArrowRight: "Right",
Home: "Home", End: "End", PageUp: "PageUp", PageDown: "PageDown"
};
if (code in SPECIAL) return SPECIAL[code];
if (e.key && e.key.length === 1) return e.key.toUpperCase();
return null;
}
function normaliseAcceleratorKey(key) {
const k = String(key || "");
const ALIASES = {
Enter: "Return",
Esc: "Escape",
ArrowUp: "Up",
ArrowDown: "Down",
ArrowLeft: "Left",
ArrowRight: "Right"
};
return (ALIASES[k] || k).toUpperCase();
}
function eventMatchesAccelerator(e, accel) {
if (!accel) return false;
const parts = String(accel).split("+").map((p) => p.trim()).filter(Boolean);
if (!parts.length) return false;
let wantMeta = false;
let wantCtrl = false;
let wantAlt = false;
let wantShift = false;
let wantCmdOrCtrl = false;
let key = "";
parts.forEach((part) => {
if (part === "Command" || part === "Cmd") wantMeta = true;
else if (part === "Control" || part === "Ctrl") wantCtrl = true;
else if (part === "Alt" || part === "Option") wantAlt = true;
else if (part === "Shift") wantShift = true;
else if (part === "CommandOrControl" || part === "CmdOrCtrl") wantCmdOrCtrl = true;
else key = part;
});
if (!key) return false;
if (wantCmdOrCtrl) {
if (!e.metaKey && !e.ctrlKey) return false;
} else {
if (!!e.metaKey !== wantMeta) return false;
if (!!e.ctrlKey !== wantCtrl) return false;
}
if (!!e.altKey !== wantAlt) return false;
if (!!e.shiftKey !== wantShift) return false;
return normaliseAcceleratorKey(key) === normaliseAcceleratorKey(mapCodeToAccelerator(e));
}
function waveSamples(seed, n, peak) {
const out = [];
let s = seed;
for (let i = 0; i < n; i++) {
s = (s * 9301 + 49297) % 233280;
const r = s / 233280;
const t = i / (n - 1);
const env = Math.pow(Math.sin(Math.PI * Math.pow(t, .55)), 1.4);
const noise = .25 + r * .75;
out.push(Math.max(.04, env * noise * peak));
}
return out;
}
function Waveform({ seed, peak, color, height = 56, bars = 64, accent }) {
const samples = React.useMemo(() => waveSamples(seed, bars, peak), [seed, bars, peak]);
return (
{samples.map((v, i) => (
))}
);
}
function LibraryRow({ library, index, active, isEditing, onPick, onStartRename, onFinishRename, onRename, onContextMenu, accent, dragActive, onDwellSwitch, locked, onLockedClick }) {
const [draft, setDraft] = React.useState("");
React.useEffect(() => { if (isEditing) setDraft(library.name || ""); }, [isEditing]);
// Dwell-to-switch: while a slot drag is in flight, hovering this row for
// ~700ms switches the active library so the user can drop into one of its
// slots in the same drag gesture.
const [dwellActive, setDwellActive] = React.useState(false);
const dwellTimerRef = React.useRef(null);
React.useEffect(() => {
if (!dragActive) {
if (dwellTimerRef.current) { clearTimeout(dwellTimerRef.current); dwellTimerRef.current = null; }
if (dwellActive) setDwellActive(false);
}
}, [dragActive]);
const finish = (commit) => {
if (commit) {
const next = draft.trim();
if (next && next !== library.name) onRename(index, next);
}
onFinishRename();
};
const onContext = (e) => {
e.preventDefault();
e.stopPropagation();
if (onContextMenu) onContextMenu(index, e);
};
const onDragOver = (e) => {
if (!dragActive) return;
// Locked-on-Free libraries can't be dwelled into either — dragging a
// slot in mid-air shouldn't bypass the access-time paywall.
if (locked) return;
e.preventDefault();
if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
if (active) return; // already on this library, no need to dwell
if (!dwellActive) setDwellActive(true);
if (!dwellTimerRef.current) {
dwellTimerRef.current = setTimeout(() => {
if (onDwellSwitch) onDwellSwitch(index);
dwellTimerRef.current = null;
}, 700);
}
};
const onDragLeave = () => {
if (dwellTimerRef.current) { clearTimeout(dwellTimerRef.current); dwellTimerRef.current = null; }
if (dwellActive) setDwellActive(false);
};
const cls = `cd-side-item no-ico${active ? " on" : ""}${dwellActive && !active ? " dwell-active" : ""}${locked ? " locked" : ""}`;
return (
);
}
// Modal shown when an osascript keystroke / menu-click hits the macOS
// 1002 error ("not allowed to send keystrokes"). The user needs to grant
// Accessibility permission in System Settings — there's no programmatic
// way to do this for them, so we explain it as plainly as possible and
// hand them a button that deep-links to the right pane.
function AccessibilityDeniedModal({ onClose }) {
// Esc to dismiss — matches the rest of our modals.
React.useEffect(() => {
const onKey = (e) => {
if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); onClose(); }
};
window.addEventListener("keydown", onKey, true);
return () => window.removeEventListener("keydown", onKey, true);
}, [onClose]);
const openSettings = async () => {
if (window.clipDeck && window.clipDeck.openAccessibilitySettings) {
await window.clipDeck.openAccessibilitySettings();
}
};
return (
<>
e.stopPropagation()}>
Permission needed
Clip Deck needs your permission to control Premiere Pro. Without
it, capturing and firing clips will not work.
- Click Open Settings below.
- Find Clip Deck in the list and turn the switch on.
- Quit and reopen Clip Deck.
);
}
// First-launch welcome / onboarding modal. Shown exactly once per
// install — gated on `config.onboardingShown`. Surfaces the three-step
// mental model (add assets → open with backtick → fire onto timeline)
// before the user lands in an empty overlay. Dismiss via the bottom
// CTA, the corner X, or Escape; any of those persist the flag.
//
// "Watch Quick Tutorial" opens the demo video in the user's default
// browser. TUTORIAL_URL is hot-swappable here — update the constant
// when the production tutorial video is published.
const ONBOARDING_TUTORIAL_URL = "https://www.youtube.com/watch?v=vU3Du4H56g0";
function OnboardingModal({ onDismiss }) {
React.useEffect(() => {
const onKey = (e) => {
if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); onDismiss(); }
};
window.addEventListener("keydown", onKey, true);
return () => window.removeEventListener("keydown", onKey, true);
}, [onDismiss]);
const watchTutorial = () => {
if (window.clipDeck && window.clipDeck.openExternal) {
window.clipDeck.openExternal(ONBOARDING_TUTORIAL_URL);
}
onDismiss();
};
return (
<>
e.stopPropagation()}>
);
}
// Update banner — fixed-position pill at the top of the overlay,
// visible whenever main fires `update:available`. Click "Install"
// to start the download → verify → install flow.
function UpdateBanner({ manifest, onInstall, onSnooze }) {
return (
Update available
v{manifest.version}
{manifest.releaseNotes ? (
{manifest.releaseNotes}
) : null}
);
}
// Update progress modal — shown while the .pkg downloads + verifies.
// Phases: "downloading" (with byte progress) → "verifying" → "opening"
// → (handed off to macOS Installer, app quits, modal goes away with it).
function UpdateModal({ phase, progress, error, onClose }) {
const pct = progress && progress.total
? Math.min(99, Math.round((progress.received / progress.total) * 100))
: null;
const phaseLabel = ({
downloading: pct != null ? `Downloading… ${pct}%` : "Downloading…",
verifying: "Verifying download…",
opening: "Opening installer…",
error: "Update failed",
})[phase] || "Updating…";
return (
<>
e.stopPropagation()}>
{phaseLabel}
{error ? (
<>
{error}
) : phase === "opening" ? (
macOS will prompt for your password to complete the install.
) : (
Don't quit Clip Deck while the update downloads.
)}
);
}
// Preferences modal — full-window scrim + centered dialog, matching the
// Paywall's visual language. Hosts settings that used to live in their
// own sidebar slot (Panel Hotkey) plus newer preferences (Insert Options).
// Esc-to-close is handled centrally by the global keydown handler in App
// via prefsOpenRef.
function PrefsMenu({ panelHotkey, recordingHotkey, onClickHotkey, insertMode, onInsertModeChange, onUpgradeClick, onProBadgeClick, onClose, onCheckForUpdates, autoUpdate, onToggleAutoUpdate, onExportTransitionIndex, onReadDefaultTransition }) {
const [insertOpen, setInsertOpen] = React.useState(false);
const [devicesOpen, setDevicesOpen] = React.useState(false);
// Free users see an "Enter License Key" row that opens the
// EnterLicenseKey modal (paywall.jsx). Pro users don't need it on
// their primary Mac, so the row is hidden once isPro flips true.
const [licenseKeyOpen, setLicenseKeyOpen] = React.useState(false);
// Pull license state inline so we can gate the Manage devices button —
// only Pro accounts have any device list to manage. The badge in the
// corner does this too via PlanBadge, but it's a separate render.
const lic = window.useLicense ? window.useLicense() : { isPro: false, eligibleForRefund: false };
// 30-day refund — confirmation modal + in-flight + error state.
// The link is hidden by `lic.eligibleForRefund` (Pro + within 30 days
// of pro_since + has_refunded=false) so the click handler only ever
// runs when the backend will accept the request.
const [refundConfirmOpen, setRefundConfirmOpen] = React.useState(false);
const [refunding, setRefunding] = React.useState(false);
const [refundError, setRefundError] = React.useState(null);
// Translate the backend's machine-code error into a user-friendly
// sentence. refund_api_failed surfaces Gumroad's own message verbatim
// (e.g. "The sale was unable to be modified" for free / test sales)
// so support can debug without round-tripping the user.
const refundErrorCopy = (code, detail) => {
switch (code) {
case "not_activated":
case "device_not_registered":
return "This Mac isn't currently activated on a Pro license.";
case "not_pro":
return "Your Pro license is already inactive.";
case "already_refunded":
return "You've already used your one-time in-app refund. For another refund, please email hello@inthezone.studio.";
case "no_order_on_record":
return "We can't find a Gumroad order tied to this license. Please email hello@inthezone.studio for help.";
case "outside_window":
return "Your 30-day refund window has closed. For a manual refund, please email hello@inthezone.studio.";
case "refund_api_failed":
return detail
? `Gumroad couldn't process this refund: "${detail}". Please email hello@inthezone.studio for help.`
: "Gumroad couldn't process this refund. Please email hello@inthezone.studio for help.";
default:
return "Refund failed — please try again, or email hello@inthezone.studio for help.";
}
};
const onConfirmRefund = async () => {
setRefunding(true);
setRefundError(null);
const res = await lic.requestRefund();
setRefunding(false);
if (res && res.ok) {
// Server flipped pro=0 + has_refunded=1; license.jsx already
// applied the same state synchronously. Close both modals so the
// App-level RefundFeedback mount can take over.
setRefundConfirmOpen(false);
onClose();
} else {
setRefundError(refundErrorCopy(res && res.error, res && res.detail));
}
};
const INSERT_OPTIONS = [
{ value: "smart", label: "Smart Insert" },
{ value: "track", label: "Track Target" },
];
const currentInsert = INSERT_OPTIONS.find((o) => o.value === (insertMode || "smart")) || INSERT_OPTIONS[0];
// Mock news items — placeholders for the eventual /news.json feed from
// api.inthezone.studio. The render shape here is the one the real feed
// will follow (kind, title, subtitle, date, optional CTA), so wiring up
// live data later is just swapping this array for a fetched list.
const NEWS_ITEMS = [
{ id: "update-0.4.0", kind: "update", title: "Clip Deck v0.4.0 is available", subtitle: "Decks rename, paywall, news feed", date: "May 7", cta: "Update" },
{ id: "pro-launch", kind: "release", title: "Clip Deck Pro is here", subtitle: "Unlimited libraries, search, and more", date: "May 5" },
{ id: "tutorial-1", kind: "tutorial",title: "Capturing timeline selections", subtitle: "A 90-second tour of the new flow", date: "Apr 28" },
{ id: "spotlight-1", kind: "news", title: "Behind the scenes at INTHEZONE",subtitle: "How we test before every release", date: "Apr 22" },
];
return (
<>
e.stopPropagation()}>
{/* Top-right cluster — PRO/FREE badge plus "Watch Demo Tutorial"
shortcut so users can re-open the onboarding video later. */}
{window.PlanBadge && (
)}
Preferences
{/* Left column — actual settings. */}
Settings
Panel hotkey
Insert mode
{/* Custom (non-native) dropdown so opening the picker doesn't
steal window focus and trigger the overlay's blur-to-hide. */}
{insertOpen && (
{INSERT_OPTIONS.map((opt) => (
))}
)}
{/* Updates — manual check + auto-check toggle on the same row. */}
{/* Device manager entry point — Pro only AND hidden in
beta-silent mode (the testing variant doesn't expose
device management since testers don't have a real
Pro account). */}
{lic.isPro && !window.BETA_NO_PAYWALL && (
Devices
)}
{/* Enter License Key — Free users only. Opens the
EnterLicenseKey modal from paywall.jsx. The modal
closes itself when activation succeeds; license.jsx
flips to Pro synchronously so the rest of Preferences
re-renders (the row disappears, Manage devices
appears). Hidden in beta-silent mode for parity with
the rest of the licensing surface. */}
{!lic.isPro && !window.BETA_NO_PAYWALL && (
License key
)}
{/* 30-day in-app refund link — plain text, right-aligned at
the bottom of the SETTINGS column (intentionally not in
the right-hand graphic column, where the welcome panel
lives). Visible only when the user is Pro, within the
30-day window, and hasn't already used their
once-in-a-lifetime in-app refund. After the window
closes (or after a previous refund) it silently
disappears — no countdown, no warning. */}
{lic.eligibleForRefund && !window.BETA_NO_PAYWALL && (
)}
{/* Right column — same welcome graphic shown during onboarding,
repurposed here as a visual aside next to the settings list. */}
{/* Devices modal — rendered as a sibling to the prefs modal so it
can stack on top via its own scrim + z-index. Closing the
modal returns the user to Preferences (Prefs stays open). */}
{devicesOpen && window.DevicesModal && (
setDevicesOpen(false)}/>
)}
{/* Enter License Key modal — same stacking pattern. On success it
closes itself; the surrounding Preferences re-renders
automatically since license.jsx applies the new Pro state
synchronously. */}
{licenseKeyOpen && window.EnterLicenseKey && (
setLicenseKeyOpen(false)}/>
)}
{/* Refund confirmation dialog. Reuses the existing ConfirmDialog
component (danger button styling, Esc/Enter handled centrally).
Closing during an in-flight request is blocked so the user
can't double-fire the Gumroad refund API. refundErrorCopy()
above produces a self-contained sentence (no need to wrap
it in extra prefix/suffix here). */}
{refundConfirmOpen && (
{} : onConfirmRefund}
onCancel={() => { if (!refunding) { setRefundConfirmOpen(false); setRefundError(null); } }}/>
)}
);
}
function Sidebar({
libraries, activeLibraryIndex, onPickLibrary, onAddLibrary,
onAddLibraryContextMenu,
editingLibIndex, onStartRenameLib, onFinishRenameLib, onRenameLib,
onLibraryContextMenu, onLockedLibraryClick,
accent, density, query, onQuery, onFocusSearch,
searchHotkey, recordingSearchHotkey, onClickSearchHotkey,
dragActive, onLibraryDwellSwitch,
onUpgradeClick, onLockedToolClick, onOpenTool, onToolContextMenu, activeTool, isPro,
// NOTE: onOpenCgfy is intentionally removed while VFX Engine is locked.
// When re-enabling, add it back here and at the App-level callsite.
searchLocked, onLockedSearchClick,
prefsOpen, onTogglePrefs, onClosePrefs,
insertMode, onInsertModeChange,
onSearchKeyDown
}) {
// Tiny gear lives in the lower-right of the brand row. Absolutely
// positioned so it doesn't push the title or icon around — same
// visual layout as before the gear existed.
return (
);
}
function DeckTab({ deck, index, active, isEditing, onPick, onStartRename, onFinishRename, onRename, onContextMenu, accent, dragActive, onDwellSwitch, locked, onLockedClick }) {
const [draft, setDraft] = React.useState("");
React.useEffect(() => { if (isEditing) setDraft(deck.name || ""); }, [isEditing]);
// Dwell-to-switch: while a slot drag is in flight, hovering this tab for
// ~700ms switches the active deck so the user can drop into one of its
// slots in the same drag gesture. Mirrors LibraryRow's pattern.
const [dwellActive, setDwellActive] = React.useState(false);
const dwellTimerRef = React.useRef(null);
React.useEffect(() => {
if (!dragActive) {
if (dwellTimerRef.current) { clearTimeout(dwellTimerRef.current); dwellTimerRef.current = null; }
if (dwellActive) setDwellActive(false);
}
}, [dragActive]);
const finish = (commit) => {
if (commit) {
const next = draft.trim();
if (next && next !== deck.name) onRename(index, next);
}
onFinishRename();
};
const onContext = (e) => {
e.preventDefault();
e.stopPropagation();
if (onContextMenu) onContextMenu(index, e);
};
const onDragOver = (e) => {
if (!dragActive) return;
// Locked-on-Free decks reject dwell-switching for the same reason
// LibraryRow does — drag shouldn't bypass the access-time paywall.
if (locked) return;
e.preventDefault();
if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
if (active) return; // already on this deck, no need to dwell
if (!dwellActive) setDwellActive(true);
if (!dwellTimerRef.current) {
dwellTimerRef.current = setTimeout(() => {
if (onDwellSwitch) onDwellSwitch(index);
dwellTimerRef.current = null;
}, 700);
}
};
const onDragLeave = () => {
if (dwellTimerRef.current) { clearTimeout(dwellTimerRef.current); dwellTimerRef.current = null; }
if (dwellActive) setDwellActive(false);
};
const baseStyle = active
? { color: accent.hex, borderColor: accent.glow, background: accent.soft }
: null;
if (isEditing) {
return (
setDraft(e.target.value)}
onBlur={() => finish(true)}
onKeyDown={(e) => {
if (e.key === "Enter") { e.preventDefault(); e.stopPropagation(); finish(true); }
if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); finish(false); }
}}
onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
size={Math.max(4, draft.length || 1)}
/>
);
}
return (
);
}
function Topbar({
decks, activeDeckIndex, onPickDeck, onAddDeck,
editingDeckIndex, onStartRenameDeck, onFinishRenameDeck, onRenameDeck,
onDeckContextMenu,
accent,
dragActive, onDeckDwellSwitch,
isPro, onLockedDeckClick
}) {
return (
{decks.map((deck, i) => {
// Free-tier deck lock: only triggers when the caller passes an
// onLockedDeckClick (i.e. we're in the user-library view; tool
// decks pass undefined since Effects + Transitions are free).
// Mirrors addDeck's gate at ~L5592 (PAYWALL_ENABLED && !isPro).
const locked = !!onLockedDeckClick && !!window.PAYWALL_ENABLED && !isPro && i > 0;
return (
);
})}
{onAddDeck && (
)}
);
}
// "1:23" / "0:08" — minutes:seconds with zero-padded seconds. Returns
// null for non-finite values so callers can suppress the duration chip
// entirely when there's no real duration to show (e.g. before the
// metadata load resolves). Named `formatDurationLabel` to avoid
// colliding with `formatDuration` further down in the file (used by
// the Pixabay SFX browser with a different "?:??" fallback shape).
function formatDurationLabel(seconds) {
if (seconds == null || !isFinite(seconds) || seconds <= 0) return null;
const total = Math.floor(seconds);
const mins = Math.floor(total / 60);
const secs = total % 60;
return mins + ":" + String(secs).padStart(2, "0");
}
// Lazy-load media duration via a hidden