@odori/cli 0.0.2

package/studio/src/main.tsx

@@ -0,0 +1,34 @@
+import {StrictMode} from "react";
+import {createRoot} from "react-dom/client";
+import {RenderSurface} from "odori";
+import {Studio} from "./Studio";
+import {project, videos} from "virtual:odori-project";
+import "./studio.css";
+
+const query = new URLSearchParams(window.location.search);
+const renderMode = query.get("render") === "1";
+const root = createRoot(document.getElementById("root")!);
+
+if (renderMode) {
+  const requested = query.get("video");
+  const entry = videos.find((video) => video.metadata.id === requested) ?? videos[0];
+  if (!entry) throw new Error("No videos discovered. Create videos/<name>/video.tsx first.");
+  const input = query.get("input") ? (JSON.parse(atob(query.get("input")!)) as Record<string, unknown>) : undefined;
+  const prepared = query.get("prepared") ? JSON.parse(atob(query.get("prepared")!)) : undefined;
+  document.body.classList.add("render-mode");
+  root.render(
+    <RenderSurface
+      entry={entry}
+      initialFrame={Number(query.get("frame") ?? 0)}
+      input={input}
+      prepared={prepared}
+      assets={project.assets}
+    />,
+  );
+} else {
+  root.render(
+    <StrictMode>
+      <Studio />
+    </StrictMode>,
+  );
+}

package/studio/src/shortcuts.ts

@@ -0,0 +1,27 @@
+import {useEffect, useRef} from "react";
+
+export type ShortcutMap = Record<string, (event: KeyboardEvent) => void>;
+
+const isTyping = (target: EventTarget | null) => {
+  const element = target as HTMLElement | null;
+  if (!element) return false;
+  return ["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName) || element.isContentEditable;
+};
+
+/** Editor-style shortcuts that stay out of the way while typing in a control. */
+export const useShortcuts = (map: ShortcutMap) => {
+  const latest = useRef(map);
+  latest.current = map;
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (isTyping(event.target) || event.metaKey || event.ctrlKey) return;
+      const handler = latest.current[event.key];
+      if (!handler) return;
+      event.preventDefault();
+      handler(event);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+};