@agent-native/core 0.85.7 → 0.86.0

package/corpus/templates/videos/app/contexts/TimelineContext.tsx

@@ -1,433 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useMemo,
-  type ReactNode,
-} from "react";
-
-import type { CompositionCollabData } from "@/hooks/use-composition-collab";
-import { useTimelineState } from "@/state";
-import type { AnimationTrack } from "@/types";
-import { debug } from "@/utils/debug";
-
-import { useCompositionOptional } from "./CompositionContext";
-
-const TRACKS_KEY = (id: string) => `videos-tracks:${id}`;
-const VERSION_KEY = (id: string) => `videos-tracks-version:${id}`;
-
-function mergeAnimatedProps(
-  stored: AnimationTrack["animatedProps"],
-  defaults: AnimationTrack["animatedProps"],
-): AnimationTrack["animatedProps"] {
-  const def = defaults ?? [];
-  const sto = stored ?? [];
-
-  // First load (no stored data) → use all registry defaults
-  if (sto.length === 0) return def;
-
-  const merged = sto.map((storedProp) => {
-    const defProp = def.find((d) => d.property === storedProp.property);
-    if (defProp) {
-      const useRegistryKeyframes =
-        (!storedProp.keyframes || storedProp.keyframes.length === 0) &&
-        defProp.keyframes &&
-        defProp.keyframes.length > 0;
-
-      if (useRegistryKeyframes) {
-        debug.verbose("Using registry keyframes", {
-          property: storedProp.property,
-          keyframes: defProp.keyframes!.length,
-        });
-      }
-
-      return {
-        ...defProp,
-        from: storedProp.from,
-        to: storedProp.to,
-        keyframes: useRegistryKeyframes
-          ? defProp.keyframes
-          : storedProp.keyframes,
-        easing: storedProp.easing,
-      };
-    }
-    return storedProp;
-  });
-
-  const storedPropNames = new Set(sto.map((p) => p.property));
-  const missingProps = def.filter((p) => !storedPropNames.has(p.property));
-
-  if (missingProps.length > 0) {
-    debug.verbose("Added missing animated props", {
-      count: missingProps.length,
-      properties: missingProps.map((p) => p.property),
-    });
-  }
-
-  return [...merged, ...missingProps];
-}
-
-function loadTracks(
-  compositionId: string,
-  defaults: AnimationTrack[],
-  registryVersion: number = 1,
-  durationInFrames?: number,
-): AnimationTrack[] {
-  try {
-    const storedVersionRaw = localStorage.getItem(VERSION_KEY(compositionId));
-    const storedVersion = storedVersionRaw ? parseInt(storedVersionRaw, 10) : 0;
-
-    if (registryVersion > storedVersion) {
-      debug.verbose("Clearing stale composition data", {
-        compositionId,
-        registryVersion,
-        storedVersion,
-      });
-      localStorage.removeItem(TRACKS_KEY(compositionId));
-      localStorage.removeItem(`videos-props:${compositionId}`);
-      localStorage.removeItem(`videos-comp-settings:${compositionId}`);
-      localStorage.setItem(VERSION_KEY(compositionId), String(registryVersion));
-      return applyCameraTrackCorrection(defaults, durationInFrames);
-    }
-
-    const raw = localStorage.getItem(TRACKS_KEY(compositionId));
-    if (!raw) {
-      localStorage.setItem(VERSION_KEY(compositionId), String(registryVersion));
-      return applyCameraTrackCorrection(defaults, durationInFrames);
-    }
-    const stored = JSON.parse(raw) as AnimationTrack[];
-
-    const seenIds = new Set<string>();
-    const deduped = stored.filter((track) => {
-      if (seenIds.has(track.id)) return false;
-      seenIds.add(track.id);
-      return true;
-    });
-
-    if (deduped.length !== stored.length) {
-      debug.verbose("Cleaned duplicate tracks from localStorage", {
-        removed: stored.length - deduped.length,
-      });
-      localStorage.setItem(TRACKS_KEY(compositionId), JSON.stringify(deduped));
-    }
-
-    const merged = defaults.map((def) => {
-      const sto = deduped.find((s) => s.id === def.id);
-      if (!sto) return def;
-      return {
-        ...sto,
-        animatedProps: mergeAnimatedProps(sto.animatedProps, def.animatedProps),
-      };
-    });
-
-    return applyCameraTrackCorrection(merged, durationInFrames);
-  } catch {
-    return applyCameraTrackCorrection(defaults, durationInFrames);
-  }
-}
-
-function applyCameraTrackCorrection(
-  tracks: AnimationTrack[],
-  durationInFrames?: number,
-): AnimationTrack[] {
-  if (!durationInFrames) return tracks;
-
-  return tracks.map((track) => {
-    if (track.id === "camera") {
-      return {
-        ...track,
-        startFrame: 0,
-        endFrame: durationInFrames,
-      };
-    }
-    return track;
-  });
-}
-
-function saveTracks(
-  compositionId: string,
-  tracks: AnimationTrack[],
-  version: number = 1,
-) {
-  try {
-    localStorage.setItem(TRACKS_KEY(compositionId), JSON.stringify(tracks));
-    localStorage.setItem(VERSION_KEY(compositionId), String(version));
-  } catch {}
-}
-
-type TimelineContextType = {
-  tracks: AnimationTrack[];
-  selectedTrackId: string | null;
-  selectTrack: (id: string | null) => void;
-  updateTrack: (id: string, patch: Partial<AnimationTrack>) => void;
-  addTrack: (track: AnimationTrack) => void;
-  deleteTrack: (id: string) => void;
-  setTracks: (tracks: AnimationTrack[]) => void;
-};
-
-const TimelineContext = createContext<TimelineContextType | null>(null);
-
-type TimelineProviderProps = {
-  children: ReactNode;
-  /** Optional: push state to collab layer on changes. */
-  onCollabPush?: (data: CompositionCollabData) => void;
-  /** Optional: remote collab data to apply when it arrives. */
-  collabData?: CompositionCollabData | null;
-  /** Whether collab is synced (prevents overwriting remote data on first load). */
-  collabSynced?: boolean;
-};
-
-export function TimelineProvider({
-  children,
-  onCollabPush,
-  collabData,
-  collabSynced,
-}: TimelineProviderProps) {
-  // Use the non-throwing variant so hooks are called unconditionally.
-  // A null return means the context is absent (e.g. HMR teardown); we still
-  // call all other hooks before checking and returning the fallback provider.
-  const compositionContext = useCompositionOptional();
-
-  const { compositionId, effectiveComposition, selected, compSettings } =
-    compositionContext ?? {
-      compositionId: undefined,
-      effectiveComposition: undefined,
-      selected: undefined,
-      compSettings: undefined,
-    };
-  const timeline = useTimelineState([]);
-  const prevFpsRef = useRef<Record<string, number>>({});
-
-  const defaultTracks = selected?.tracks ?? [];
-  const registryVersion = selected?.version ?? 1;
-  const durationInFrames =
-    effectiveComposition?.durationInFrames ??
-    compSettings?.durationInFrames ??
-    90;
-  const fps = effectiveComposition?.fps ?? compSettings?.fps ?? 30;
-
-  useEffect(() => {
-    if (!compositionId) {
-      timeline.setTracks([]);
-      return;
-    }
-    const merged = loadTracks(
-      compositionId,
-      defaultTracks,
-      registryVersion,
-      durationInFrames,
-    );
-
-    const hasRegistryKeyframes = defaultTracks.some((t) =>
-      t.animatedProps?.some((p) => p.keyframes && p.keyframes.length > 0),
-    );
-    const hasMergedKeyframes = merged.some((t) =>
-      t.animatedProps?.some((p) => p.keyframes && p.keyframes.length > 0),
-    );
-
-    if (hasRegistryKeyframes && !hasMergedKeyframes) {
-      debug.warn("Registry keyframes are missing from merged tracks", {
-        compositionId,
-      });
-    }
-
-    timeline.setTracks(merged);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [compositionId]);
-
-  const prevTracksRef = useRef<AnimationTrack[]>([]);
-  const tracksInitialLoadRef = useRef(true);
-
-  useEffect(() => {
-    if (!compositionId) return;
-    if (timeline.tracks === prevTracksRef.current) return;
-
-    if (tracksInitialLoadRef.current) {
-      tracksInitialLoadRef.current = false;
-      prevTracksRef.current = timeline.tracks;
-      return;
-    }
-
-    debug.verbose("Saving tracks to localStorage", { compositionId });
-    saveTracks(compositionId, timeline.tracks, registryVersion);
-    prevTracksRef.current = timeline.tracks;
-  }, [compositionId, timeline.tracks, registryVersion]);
-
-  useEffect(() => {
-    tracksInitialLoadRef.current = true;
-  }, [compositionId]);
-
-  const prevDurationRef = useRef(durationInFrames);
-
-  useEffect(() => {
-    if (!compositionId) return;
-
-    if (
-      prevDurationRef.current !== durationInFrames &&
-      prevDurationRef.current !== undefined
-    ) {
-      const cameraTrack = timeline.tracks.find((t) => t.id === "camera");
-      if (cameraTrack) {
-        debug.verbose("Updating camera track duration", {
-          compositionId,
-          durationInFrames,
-        });
-        timeline.updateTrack("camera", {
-          startFrame: 0,
-          endFrame: durationInFrames,
-        });
-      }
-    }
-
-    prevDurationRef.current = durationInFrames;
-  }, [compositionId, durationInFrames, timeline]);
-
-  useEffect(() => {
-    const handleStorageChange = (e: StorageEvent) => {
-      if (!compositionId) return;
-
-      const tracksKey = TRACKS_KEY(compositionId);
-
-      if (e.key === tracksKey && e.newValue) {
-        const newTracks = loadTracks(
-          compositionId,
-          defaultTracks,
-          registryVersion,
-        );
-        timeline.setTracks(newTracks);
-        debug.verbose("Synced tracks from another tab", { compositionId });
-      }
-    };
-
-    window.addEventListener("storage", handleStorageChange);
-    return () => window.removeEventListener("storage", handleStorageChange);
-  }, [compositionId, defaultTracks, registryVersion, timeline]);
-
-  useEffect(() => {
-    if (!compositionId) return;
-
-    const previousFps = prevFpsRef.current[compositionId];
-
-    if (previousFps && fps !== previousFps) {
-      const fpsRatio = fps / previousFps;
-
-      const scaledTracks = timeline.tracks.map((track) => {
-        const scaledStart = Math.round(track.startFrame * fpsRatio);
-        const scaledEnd = Math.round(track.endFrame * fpsRatio);
-
-        const scaledProps = track.animatedProps?.map((prop) => {
-          if (!prop.keyframes || prop.keyframes.length === 0) return prop;
-
-          const scaledKeyframes = prop.keyframes.map((kf) => ({
-            ...kf,
-            frame: Math.round(kf.frame * fpsRatio),
-          }));
-
-          return { ...prop, keyframes: scaledKeyframes };
-        });
-
-        return {
-          ...track,
-          startFrame: scaledStart,
-          endFrame: scaledEnd,
-          animatedProps: scaledProps,
-        };
-      });
-
-      timeline.setTracks(scaledTracks);
-    }
-
-    prevFpsRef.current[compositionId] = fps;
-  }, [compositionId, fps, timeline]);
-
-  const collabPushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    if (!compositionId || !onCollabPush) return;
-    if (timeline.tracks === prevTracksRef.current) return;
-
-    if (tracksInitialLoadRef.current) return;
-
-    if (collabPushTimerRef.current) clearTimeout(collabPushTimerRef.current);
-    collabPushTimerRef.current = setTimeout(() => {
-      debug.verbose("Pushing tracks to collab layer", { compositionId });
-      onCollabPush({ tracks: timeline.tracks });
-    }, 500);
-
-    return () => {
-      if (collabPushTimerRef.current) clearTimeout(collabPushTimerRef.current);
-    };
-  }, [compositionId, timeline.tracks, onCollabPush]);
-
-  const prevCollabDataRef = useRef<CompositionCollabData | null>(null);
-
-  useEffect(() => {
-    if (!compositionId || !collabSynced || !collabData) return;
-    if (collabData === prevCollabDataRef.current) return;
-    prevCollabDataRef.current = collabData;
-
-    if (collabData.tracks && Array.isArray(collabData.tracks)) {
-      const remoteJson = JSON.stringify(collabData.tracks);
-      const localJson = JSON.stringify(timeline.tracks);
-      if (remoteJson !== localJson) {
-        debug.verbose("Applying remote tracks from collab layer", {
-          compositionId,
-        });
-        const merged = loadTracks(
-          compositionId,
-          collabData.tracks as AnimationTrack[],
-          registryVersion,
-          durationInFrames,
-        );
-        timeline.setTracks(merged);
-        saveTracks(compositionId, merged, registryVersion);
-      }
-    }
-  }, [
-    compositionId,
-    collabData,
-    collabSynced,
-    durationInFrames,
-    registryVersion,
-    timeline,
-  ]);
-
-  const value = useMemo(
-    () => ({
-      tracks: timeline.tracks,
-      selectedTrackId: timeline.selectedTrackId,
-      selectTrack: timeline.selectTrack,
-      updateTrack: timeline.updateTrack,
-      addTrack: timeline.addTrack,
-      deleteTrack: timeline.deleteTrack,
-      setTracks: timeline.setTracks,
-    }),
-    [timeline],
-  );
-
-  // If composition context is absent (e.g. HMR context teardown), surface a
-  // null-value provider so children can still render without crashing.
-  if (!compositionContext) {
-    debug.error("HMR context error detected. Please refresh the page.");
-    return (
-      <TimelineContext.Provider value={null}>
-        {children}
-      </TimelineContext.Provider>
-    );
-  }
-
-  return (
-    <TimelineContext.Provider value={value}>
-      {children}
-    </TimelineContext.Provider>
-  );
-}
-
-export function useTimeline() {
-  const context = useContext(TimelineContext);
-  if (!context) {
-    throw new Error("useTimeline must be used within TimelineProvider");
-  }
-  return context;
-}

package/corpus/templates/videos/app/entry.client.tsx

@@ -1,19 +0,0 @@
-import { appBasePath } from "@agent-native/core/client/api-path";
-import { hydrateRoot } from "react-dom/client";
-import { HydratedRouter } from "react-router/dom";
-
-const basePath = appBasePath();
-const pathname = window.location.pathname;
-const routerBasePath =
-  basePath && (pathname === basePath || pathname.startsWith(`${basePath}/`))
-    ? basePath
-    : "";
-
-const context = (
-  window as Window & { __reactRouterContext?: { basename?: string } }
-).__reactRouterContext;
-if (context) {
-  context.basename = routerBasePath;
-}
-
-hydrateRoot(document, <HydratedRouter />);

package/corpus/templates/videos/app/entry.server.tsx

@@ -1,10 +0,0 @@
-import {
-  createDocumentRequestHandler,
-  streamTimeout,
-} from "@agent-native/core/server/entry-server";
-import { ServerRouter } from "react-router";
-
-const handleDocumentRequest = createDocumentRequestHandler(ServerRouter);
-
-export { streamTimeout };
-export default handleDocumentRequest;

package/corpus/templates/videos/app/global.css

@@ -1,171 +0,0 @@
-/* Self-hosted via @fontsource-variable/inter and @fontsource-variable/jetbrains-mono — no render-blocking Google Fonts request */
-@import "@fontsource-variable/inter";
-@import "@fontsource-variable/jetbrains-mono";
-
-@import "tailwindcss";
-@import "@agent-native/core/styles/agent-native.css";
-
-@source "./**/*.{ts,tsx}";
-
-/**
-   * Tailwind CSS theme
-   * tailwind.config.ts expects the following color variables to be expressed as HSL values.
-  */
-:root {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 10%;
-
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 10%;
-
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 10%;
-
-  --primary: 0 0% 10%;
-  --primary-foreground: 0 0% 100%;
-
-  --secondary: 0 0% 96%;
-  --secondary-foreground: 0 0% 10%;
-
-  --muted: 0 0% 96%;
-  --muted-foreground: 0 0% 46%;
-
-  --accent: 0 0% 96%;
-  --accent-foreground: 0 0% 10%;
-
-  --destructive: 0 84% 60%;
-  --destructive-foreground: 0 0% 98%;
-
-  --border: 0 0% 90%;
-  --input: 0 0% 90%;
-  --ring: 0 0% 65%;
-
-  --radius: 0.625rem;
-
-  --sidebar-background: 0 0% 97%;
-  --sidebar-foreground: 0 0% 46%;
-  --sidebar-primary: 0 0% 10%;
-  --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 0 0% 96%;
-  --sidebar-accent-foreground: 0 0% 10%;
-  --sidebar-border: 0 0% 90%;
-  --sidebar-ring: 0 0% 65%;
-}
-
-.dark {
-  --background: 0 0% 13%;
-  --foreground: 0 0% 95%;
-
-  --card: 0 0% 15%;
-  --card-foreground: 0 0% 95%;
-
-  --popover: 0 0% 15%;
-  --popover-foreground: 0 0% 95%;
-
-  --primary: 0 0% 75%;
-  --primary-foreground: 0 0% 10%;
-
-  --secondary: 0 0% 18%;
-  --secondary-foreground: 0 0% 90%;
-
-  --muted: 0 0% 16%;
-  --muted-foreground: 0 0% 50%;
-
-  --accent: 0 0% 18%;
-  --accent-foreground: 0 0% 90%;
-
-  --destructive: 0 84% 60%;
-  --destructive-foreground: 0 0% 100%;
-
-  --border: 0 0% 24%;
-  --input: 0 0% 24%;
-  --ring: 0 0% 50%;
-
-  --radius: 0.625rem;
-
-  --sidebar-background: 0 0% 10%;
-  --sidebar-foreground: 0 0% 55%;
-  --sidebar-primary: 0 0% 75%;
-  --sidebar-primary-foreground: 0 0% 10%;
-  --sidebar-accent: 0 0% 16%;
-  --sidebar-accent-foreground: 0 0% 80%;
-  --sidebar-border: 0 0% 20%;
-  --sidebar-ring: 0 0% 50%;
-}
-
-@layer base {
-  body {
-    @apply bg-background text-foreground;
-    font-family:
-      "Inter Variable",
-      "Inter",
-      system-ui,
-      -apple-system,
-      sans-serif;
-  }
-
-  :where(p, span, li, h1, h2, h3, h4, h5, h6, a, button, label, td, th) {
-    overflow-wrap: anywhere;
-    word-break: break-word;
-  }
-
-  pre,
-  code {
-    overflow-x: auto;
-    white-space: pre;
-    font-family: "JetBrains Mono Variable", "JetBrains Mono", monospace;
-  }
-
-  /* Custom dark scrollbar for all elements */
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.03);
-  }
-
-  *::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  *::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.03);
-  }
-
-  *::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.15);
-    border-radius: 4px;
-  }
-
-  *::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.25);
-  }
-
-  *::-webkit-scrollbar-corner {
-    background: rgba(255, 255, 255, 0.03);
-  }
-}
-
-/* Custom scrollbar for dark theme */
-@layer utilities {
-  .scrollbar-thin {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
-  }
-
-  .scrollbar-thin::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  .scrollbar-thin::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .scrollbar-thin::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.06);
-    border-radius: 4px;
-  }
-
-  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.12);
-  }
-}