@agent-native/core 0.85.7 → 0.86.0

package/corpus/templates/videos/app/config/constants.ts

@@ -1,204 +0,0 @@
-/**
- * Application Constants
- *
- * Centralized configuration values to avoid magic numbers
- * and maintain consistency across the application.
- */
-
-/**
- * Animation Configuration
- */
-export const ANIMATION_CONFIG = {
-  /** Default frames per second for compositions */
-  DEFAULT_FPS: 30,
-
-  /** Default composition duration in frames */
-  DEFAULT_DURATION: 240,
-
-  /** Minimum playback rate */
-  MIN_PLAYBACK_RATE: 0.25,
-
-  /** Maximum playback rate */
-  MAX_PLAYBACK_RATE: 4,
-
-  /** Default easing curve */
-  DEFAULT_EASING: "expo.out" as const,
-} as const;
-
-/**
- * Cursor Configuration
- */
-export const CURSOR_CONFIG = {
-  /** Cursor size in pixels */
-  SIZE: 32,
-
-  /** Default cursor opacity */
-  DEFAULT_OPACITY: 1,
-
-  /** Default cursor scale */
-  DEFAULT_SCALE: 1,
-
-  /** Hover detection padding in pixels */
-  HOVER_PADDING: 15,
-} as const;
-
-/**
- * Card Configuration
- */
-export const CARD_CONFIG = {
-  /** Card width in pixels */
-  WIDTH: 285,
-
-  /** Card height in pixels */
-  HEIGHT: 200,
-
-  /** Default border radius in pixels */
-  BORDER_RADIUS: 16,
-
-  /** Default border width in pixels */
-  BORDER_WIDTH: 2,
-
-  /** Default border opacity */
-  BORDER_OPACITY: 0.2,
-
-  /** Default background opacity */
-  BACKGROUND_OPACITY: 1,
-
-  /** Default shadow blur in pixels */
-  SHADOW_BLUR: 8,
-
-  /** Default shadow spread in pixels */
-  SHADOW_SPREAD: 0,
-} as const;
-
-/**
- * UI Configuration
- */
-export const UI_CONFIG = {
-  /** Property label minimum width in pixels */
-  PROPERTY_LABEL_WIDTH: 80,
-
-  /** Standard input height in pixels */
-  INPUT_HEIGHT: 28,
-
-  /** Sidebar width (open) in pixels */
-  SIDEBAR_WIDTH: 288, // 72 * 4 = 18rem
-
-  /** Timeline track height in pixels */
-  TRACK_HEIGHT: 36,
-
-  /** Keyframe diamond size in pixels */
-  KEYFRAME_SIZE: 8,
-
-  /** Keyframe clickable area in pixels */
-  KEYFRAME_CLICKABLE: 24,
-} as const;
-
-/**
- * Timeline Configuration
- */
-export const TIMELINE_CONFIG = {
-  /** Minimum zoom level */
-  MIN_ZOOM: 0.1,
-
-  /** Maximum zoom level */
-  MAX_ZOOM: 10,
-
-  /** Default zoom level */
-  DEFAULT_ZOOM: 1,
-
-  /** Zoom step increment */
-  ZOOM_STEP: 0.1,
-} as const;
-
-/**
- * Color Palette
- */
-export const COLORS = {
-  /** Camera track color */
-  CAMERA: "#3b82f6", // blue-500
-
-  /** Cursor track color */
-  CURSOR: "#00B5FF", // brand blue
-
-  /** Interaction color (hover/click) */
-  INTERACTION: "#ef4444", // red-500
-
-  /** Click indicator dot color */
-  CLICK_DOT: "#facc15", // yellow-400
-
-  /** Default background color */
-  DEFAULT_BG: "#3b82f6", // blue-500
-
-  /** Default border color */
-  DEFAULT_BORDER: "#ffffff", // white
-} as const;
-
-/**
- * Storage Keys
- */
-export const STORAGE_KEYS = {
-  /** Prefix for localStorage keys */
-  PREFIX: "videos",
-
-  /** Tracks storage key */
-  tracks: (compositionId: string) => `videos-tracks-${compositionId}`,
-
-  /** Props storage key */
-  props: (compositionId: string) => `videos-props-${compositionId}`,
-
-  /** Composition settings storage key */
-  settings: (compositionId: string) => `videos-comp-settings-${compositionId}`,
-
-  /** Element animations storage key */
-  elementAnimations: (compositionId: string) =>
-    `videos-element-animations-${compositionId}`,
-} as const;
-
-/**
- * Validation Limits
- */
-export const LIMITS = {
-  /** Maximum composition duration in seconds */
-  MAX_DURATION_SECONDS: 600, // 10 minutes
-
-  /** Maximum number of keyframes per property */
-  MAX_KEYFRAMES: 1000,
-
-  /** Maximum number of tracks per composition */
-  MAX_TRACKS: 50,
-
-  /** Maximum file attachment size in bytes (10MB) */
-  MAX_ATTACHMENT_SIZE: 10 * 1024 * 1024,
-} as const;
-
-/**
- * Default Values
- */
-export const DEFAULTS = {
-  /** Default hover animation duration in frames */
-  HOVER_DURATION: 6,
-
-  /** Default click animation duration in frames */
-  CLICK_DURATION: 12,
-
-  /** Default composition format */
-  FORMAT: "wide" as const,
-
-  /** Default composition background */
-  BACKGROUND: "#0a0a0a" as const,
-} as const;
-
-/**
- * Feature Flags
- */
-export const FEATURES = {
-  /** Enable debug logging */
-  DEBUG: import.meta.env.DEV,
-
-  /** Enable verbose logging */
-  VERBOSE: import.meta.env.VITE_DEBUG_VERBOSE === "true",
-
-  /** Enable frame-by-frame logging */
-  FRAME_LOGGING: import.meta.env.VITE_DEBUG_FRAMES === "true",
-} as const;

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

@@ -1,437 +0,0 @@
-import { callAction } from "@agent-native/core/client";
-import {
-  createContext,
-  useContext,
-  useState,
-  useCallback,
-  useMemo,
-  useEffect,
-  useRef,
-  type ReactNode,
-} from "react";
-import { useNavigate } from "react-router";
-import { toast } from "sonner";
-
-import type { CompSettings } from "@/components/CompSettingsEditor";
-import type { CompositionCollabData } from "@/hooks/use-composition-collab";
-import { compositions, type CompositionEntry } from "@/remotion/registry";
-import { debug } from "@/utils/debug";
-
-const PROPS_KEY = (id: string) => `videos-props:${id}`;
-const SETTINGS_KEY = (id: string) => `videos-comp-settings:${id}`;
-
-function loadCompSettings(id: string, defaults: CompSettings): CompSettings {
-  try {
-    const raw = localStorage.getItem(SETTINGS_KEY(id));
-    if (!raw) return defaults;
-    return { ...defaults, ...JSON.parse(raw) };
-  } catch {
-    return defaults;
-  }
-}
-
-function saveCompSettings(id: string, settings: CompSettings) {
-  try {
-    localStorage.setItem(SETTINGS_KEY(id), JSON.stringify(settings));
-  } catch {}
-}
-
-function loadProps(
-  compositionId: string,
-  defaults: Record<string, any>,
-): Record<string, any> {
-  try {
-    const raw = localStorage.getItem(PROPS_KEY(compositionId));
-    if (!raw) return defaults;
-    return { ...defaults, ...JSON.parse(raw) };
-  } catch {
-    return defaults;
-  }
-}
-
-function saveProps(compositionId: string, props: Record<string, any>) {
-  try {
-    localStorage.setItem(PROPS_KEY(compositionId), JSON.stringify(props));
-  } catch {}
-}
-
-type CompositionContextType = {
-  compositionId: string;
-  isNew: boolean;
-  selected: CompositionEntry | undefined;
-  effectiveComposition: CompositionEntry | undefined;
-  currentProps: Record<string, any>;
-  compSettings: CompSettings | undefined;
-  onNavigate: (path: string) => void;
-  onDelete: (id: string) => void;
-  onPropsChange: (props: Record<string, any>) => void;
-  onTitleChange: (title: string) => void;
-  onCompSettingsChange: (patch: Partial<CompSettings>) => void;
-};
-
-const CompositionContext = createContext<CompositionContextType | null>(null);
-
-type CompositionProviderProps = {
-  children: ReactNode;
-  compositionId: string;
-  /** 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. */
-  collabSynced?: boolean;
-};
-
-export function CompositionProvider({
-  children,
-  compositionId,
-  onCollabPush,
-  collabData,
-  collabSynced,
-}: CompositionProviderProps) {
-  const navigate = useNavigate();
-
-  const isNew = compositionId === "new";
-  const [registryVersion, setRegistryVersion] = useState(0);
-  const selected = useMemo(
-    () => compositions.find((c) => c.id === compositionId),
-    [compositionId, registryVersion],
-  );
-
-  const [compSettingsOverrides, setCompSettingsOverrides] = useState<
-    Record<string, CompSettings>
-  >(() => {
-    const initial: Record<string, CompSettings> = {};
-    for (const c of compositions) {
-      initial[c.id] = loadCompSettings(c.id, {
-        durationInFrames: c.durationInFrames,
-        fps: c.fps,
-        width: c.width,
-        height: c.height,
-      });
-    }
-    return initial;
-  });
-
-  const handleCompSettingsChange = useCallback(
-    (patch: Partial<CompSettings>) => {
-      if (!selected) return;
-      setCompSettingsOverrides((prev) => {
-        const current = prev[selected.id] ?? {
-          durationInFrames: selected.durationInFrames,
-          fps: selected.fps,
-          width: selected.width,
-          height: selected.height,
-        };
-        const next = { ...current, ...patch };
-        saveCompSettings(selected.id, next);
-        return { ...prev, [selected.id]: next };
-      });
-    },
-    [selected],
-  );
-
-  const effectiveComposition = useMemo(() => {
-    if (!selected) return undefined;
-    const settings = compSettingsOverrides[selected.id];
-    if (!settings) return selected;
-
-    const effective = {
-      ...selected,
-      durationInFrames: settings.durationInFrames,
-      fps: settings.fps,
-      width: settings.width,
-      height: settings.height,
-    };
-
-    if (selected.fps !== settings.fps) {
-      debug.verbose("FPS override differs from registry", {
-        compositionId: selected.id,
-        registry: {
-          fps: selected.fps,
-          durationInFrames: selected.durationInFrames,
-        },
-        settings: {
-          fps: settings.fps,
-          durationInFrames: settings.durationInFrames,
-        },
-      });
-    }
-
-    return effective;
-  }, [selected, compSettingsOverrides]);
-
-  const [propsOverrides, setPropsOverrides] = useState<
-    Record<string, Record<string, any>>
-  >(() => {
-    const initial: Record<string, Record<string, any>> = {};
-    for (const c of compositions) {
-      initial[c.id] = loadProps(c.id, c.defaultProps);
-    }
-    return initial;
-  });
-
-  const currentProps = selected
-    ? (propsOverrides[selected.id] ?? selected.defaultProps)
-    : {};
-
-  const prevPropsRef = useRef<Record<string, Record<string, any>>>({});
-  const propsInitialLoadRef = useRef(true);
-
-  useEffect(() => {
-    if (propsInitialLoadRef.current) {
-      propsInitialLoadRef.current = false;
-      prevPropsRef.current = propsOverrides;
-      return;
-    }
-
-    for (const id of Object.keys(propsOverrides)) {
-      if (propsOverrides[id] !== prevPropsRef.current[id]) {
-        debug.verbose("Saving props to localStorage", { compositionId: id });
-        saveProps(id, propsOverrides[id]);
-      }
-    }
-    prevPropsRef.current = propsOverrides;
-  }, [propsOverrides]);
-
-  useEffect(() => {
-    const handleStorageChange = (e: StorageEvent) => {
-      if (!selected?.id) return;
-
-      const propsKey = PROPS_KEY(selected.id);
-      const settingsKey = SETTINGS_KEY(selected.id);
-
-      if (e.key === propsKey && e.newValue) {
-        const newProps = loadProps(selected.id, selected.defaultProps);
-        setPropsOverrides((prev) => ({ ...prev, [selected.id]: newProps }));
-        debug.verbose("Synced props from another tab", {
-          compositionId: selected.id,
-        });
-      } else if (e.key === settingsKey && e.newValue) {
-        const newSettings = loadCompSettings(selected.id, {
-          durationInFrames: selected.durationInFrames,
-          fps: selected.fps,
-          width: selected.width,
-          height: selected.height,
-        });
-        setCompSettingsOverrides((prev) => ({
-          ...prev,
-          [selected.id]: newSettings,
-        }));
-        debug.verbose("Synced composition settings from another tab", {
-          compositionId: selected.id,
-        });
-      }
-    };
-
-    window.addEventListener("storage", handleStorageChange);
-    return () => window.removeEventListener("storage", handleStorageChange);
-  }, [selected]);
-
-  const collabPropsPushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null,
-  );
-
-  useEffect(() => {
-    if (!selected || !onCollabPush) return;
-
-    if (propsInitialLoadRef.current) return;
-
-    if (collabPropsPushTimerRef.current)
-      clearTimeout(collabPropsPushTimerRef.current);
-    collabPropsPushTimerRef.current = setTimeout(() => {
-      const currentSettings = compSettingsOverrides[selected.id];
-      debug.verbose("Pushing props/settings to collab layer", {
-        compositionId: selected.id,
-      });
-      onCollabPush({
-        props: propsOverrides[selected.id],
-        settings: currentSettings,
-      });
-    }, 500);
-
-    return () => {
-      if (collabPropsPushTimerRef.current)
-        clearTimeout(collabPropsPushTimerRef.current);
-    };
-  }, [propsOverrides, compSettingsOverrides, selected, onCollabPush]);
-
-  const prevCollabPropsRef = useRef<CompositionCollabData | null>(null);
-
-  useEffect(() => {
-    if (!selected || !collabSynced || !collabData) return;
-    if (collabData === prevCollabPropsRef.current) return;
-    prevCollabPropsRef.current = collabData;
-
-    if (collabData.props) {
-      const remoteJson = JSON.stringify(collabData.props);
-      const localJson = JSON.stringify(propsOverrides[selected.id]);
-      if (remoteJson !== localJson) {
-        debug.verbose("Applying remote props from collab layer", {
-          compositionId: selected.id,
-        });
-        setPropsOverrides((prev) => ({
-          ...prev,
-          [selected.id]: collabData.props!,
-        }));
-      }
-    }
-
-    if (collabData.settings) {
-      const remoteJson = JSON.stringify(collabData.settings);
-      const localJson = JSON.stringify(compSettingsOverrides[selected.id]);
-      if (remoteJson !== localJson) {
-        debug.verbose("Applying remote settings from collab layer", {
-          compositionId: selected.id,
-        });
-        setCompSettingsOverrides((prev) => ({
-          ...prev,
-          [selected.id]: collabData.settings as CompSettings,
-        }));
-      }
-    }
-  }, [
-    collabData,
-    collabSynced,
-    selected,
-    propsOverrides,
-    compSettingsOverrides,
-  ]);
-
-  const handlePropsChange = useCallback(
-    (newProps: Record<string, any>) => {
-      if (!selected) return;
-      setPropsOverrides((prev) => ({ ...prev, [selected.id]: newProps }));
-    },
-    [selected],
-  );
-
-  const handleDelete = useCallback(
-    async (id: string) => {
-      // Delete from DB FIRST. If this fails, we leave the in-memory
-      // registry untouched so the composition doesn't reappear on reload.
-      // Note: action routes return HTTP 200 even when the action body
-      // contains `{ error }`, so we have to check the body too.
-      try {
-        const data = await callAction("delete-composition", { id });
-        const result = data as {
-          success?: boolean;
-          error?: string;
-        };
-        if (!result.success) {
-          throw new Error(
-            result.error ?? "delete-composition returned no success flag",
-          );
-        }
-      } catch (err) {
-        toast.error("Failed to delete composition");
-        return;
-      }
-
-      // DB delete succeeded; now safe to update the in-memory registry.
-      // Bump registryVersion so React observes the mutated singleton.
-      const idx = compositions.findIndex((c) => c.id === id);
-      if (idx !== -1) compositions.splice(idx, 1);
-      setRegistryVersion((v) => v + 1);
-
-      const remaining = compositions.filter((c) => c.id !== id);
-      if (id === compositionId && remaining.length > 0) {
-        navigate(`/c/${remaining[0].id}`, { replace: true });
-      } else if (remaining.length === 0) {
-        navigate("/c/new", { replace: true });
-      }
-    },
-    [compositionId, navigate],
-  );
-
-  const handleTitleChange = useCallback(
-    async (title: string) => {
-      if (!selected) return;
-      const compIndex = compositions.findIndex((c) => c.id === selected.id);
-      if (compIndex === -1) return;
-
-      // Optimistically update in-memory registry and trigger re-render
-      compositions[compIndex].title = title;
-      setRegistryVersion((v) => v + 1);
-
-      // Persist to DB
-      try {
-        const data = await callAction("update-composition", {
-          id: selected.id,
-          title,
-        });
-        const result = data as {
-          error?: string;
-        };
-        if (result.error) {
-          throw new Error(result.error);
-        }
-      } catch (err) {
-        toast.error("Failed to rename composition");
-      }
-    },
-    [selected],
-  );
-
-  const value = useMemo(
-    () => ({
-      compositionId,
-      isNew,
-      selected,
-      effectiveComposition,
-      currentProps,
-      compSettings: selected
-        ? (compSettingsOverrides[selected.id] ?? {
-            durationInFrames: selected.durationInFrames,
-            fps: selected.fps,
-            width: selected.width,
-            height: selected.height,
-          })
-        : undefined,
-      onNavigate: (path: string) => navigate(path),
-      onDelete: handleDelete,
-      onPropsChange: handlePropsChange,
-      onTitleChange: handleTitleChange,
-      onCompSettingsChange: handleCompSettingsChange,
-    }),
-    [
-      compositionId,
-      isNew,
-      selected,
-      effectiveComposition,
-      currentProps,
-      compSettingsOverrides,
-      navigate,
-      handleDelete,
-      handlePropsChange,
-      handleTitleChange,
-      handleCompSettingsChange,
-      registryVersion,
-    ],
-  );
-
-  return (
-    <CompositionContext.Provider value={value}>
-      {children}
-    </CompositionContext.Provider>
-  );
-}
-
-// ─── Hook ─────────────────────────────────────────────────────────────────────
-
-export function useComposition() {
-  const context = useContext(CompositionContext);
-  if (!context) {
-    throw new Error("useComposition must be used within CompositionProvider");
-  }
-  return context;
-}
-
-/**
- * Non-throwing variant — returns null when the context is absent (e.g. during
- * HMR teardown). Prefer this over try-catching `useComposition` so hooks-in-
- * try-catch linting rules are satisfied.
- */
-export function useCompositionOptional() {
-  return useContext(CompositionContext);
-}