@agent-native/core 0.85.6 → 0.86.0

package/corpus/templates/videos/app/hooks/use-composition-collab.ts

@@ -1,269 +0,0 @@
-/**
- * Bridge between the videos composition state and the collaborative editing layer.
- *
- * Uses the core `useCollaborativeDoc` hook to sync composition data (tracks,
- * props, settings) across multiple users and the AI agent via Yjs CRDT.
- *
- * This follows "Option A": localStorage remains the primary state store.
- * Collab acts as a secondary sync layer — local edits are pushed to the
- * collab endpoint, and remote edits received via polling are applied back
- * to the local state.
- */
-
-import {
-  agentNativePath,
-  useCollaborativeDoc,
-  emailToColor,
-  emailToName,
-  useSession,
-  type CollabUser,
-  type UseCollaborativeDocResult,
-} from "@agent-native/core/client";
-import { useEffect, useRef, useState, useCallback, useMemo } from "react";
-
-const TAB_ID = `videos-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-
-export { TAB_ID };
-
-export interface CompositionCollabData {
-  tracks?: any[];
-  props?: Record<string, any>;
-  settings?: {
-    durationInFrames?: number;
-    fps?: number;
-    width?: number;
-    height?: number;
-  };
-  updatedAt?: string;
-}
-
-/**
- * Normalize a parsed composition JSON blob into the canonical collab shape the
- * contexts consume (`tracks`, `props`, `settings`).
- *
- * Two writers feed `Y.Text("content")` and historically disagreed on the field
- * names, which is why agent edits used to never reach the editor's props/settings:
- *
- *  - The agent actions (`update-composition`, `save-composition`) and the SQL
- *    source of truth (`compositions.data`, see `databaseRowToComposition`) use
- *    the FLAT, DB-canonical shape:
- *    `{ tracks, defaultProps, durationInFrames, fps, width, height }`.
- *  - The UI's own `pushToCollab` historically used a NESTED shape:
- *    `{ tracks, props, settings: { durationInFrames, fps, width, height } }`.
- *
- * `tracks` was the only field both shapes shared, so timeline edits synced but
- * prop/setting edits silently dropped. We now normalize on read so BOTH shapes
- * are understood, and `pushToCollab` writes the DB-canonical shape so every
- * writer (agent, SQL, and all clients) agrees.
- */
-function normalizeCompositionCollab(raw: any): CompositionCollabData | null {
-  if (!raw || typeof raw !== "object") return null;
-
-  const tracks = Array.isArray(raw.tracks) ? raw.tracks : undefined;
-
-  // props: prefer the DB-canonical `defaultProps`, fall back to nested `props`.
-  const props =
-    raw.defaultProps && typeof raw.defaultProps === "object"
-      ? raw.defaultProps
-      : raw.props && typeof raw.props === "object"
-        ? raw.props
-        : undefined;
-
-  // settings: prefer the nested `settings` object, otherwise lift the flat
-  // DB-canonical fields into a settings object.
-  let settings: CompositionCollabData["settings"];
-  if (raw.settings && typeof raw.settings === "object") {
-    settings = raw.settings;
-  } else {
-    const flat: CompositionCollabData["settings"] = {};
-    if (typeof raw.durationInFrames === "number")
-      flat.durationInFrames = raw.durationInFrames;
-    if (typeof raw.fps === "number") flat.fps = raw.fps;
-    if (typeof raw.width === "number") flat.width = raw.width;
-    if (typeof raw.height === "number") flat.height = raw.height;
-    if (Object.keys(flat).length > 0) settings = flat;
-  }
-
-  return {
-    tracks,
-    props,
-    settings,
-    updatedAt: typeof raw.updatedAt === "string" ? raw.updatedAt : undefined,
-  };
-}
-
-export interface UseCompositionCollabResult {
-  /** The parsed composition data from the collab layer, or null if not synced yet. */
-  compositionData: CompositionCollabData | null;
-  /** The raw Yjs document, for awareness state broadcasting. */
-  ydoc: UseCollaborativeDocResult["ydoc"];
-  /** Yjs awareness instance for cursor/presence sync. */
-  awareness: UseCollaborativeDocResult["awareness"];
-  /** Whether the initial collab state is still loading. */
-  isLoading: boolean;
-  /** Whether the collab doc is synced with the server. */
-  isSynced: boolean;
-  /** Active users collaborating on this composition. */
-  activeUsers: CollabUser[];
-  /** True briefly when the AI agent makes an edit. */
-  agentActive: boolean;
-  /** True when the AI agent has an active awareness entry. */
-  agentPresent: boolean;
-  /** Push local composition data to the collab layer. */
-  pushToCollab: (data: CompositionCollabData) => void;
-  /** The current user info (for awareness). */
-  currentUser: CollabUser | undefined;
-  /** Unique tab identifier for jitter prevention. */
-  tabId: string;
-}
-
-/**
- * Hook that bridges composition state management with collaborative editing.
- *
- * @param compositionId - The composition ID, or null to disable collab.
- */
-export function useCompositionCollab(
-  compositionId: string | null,
-): UseCompositionCollabResult {
-  const { session } = useSession();
-
-  // Build a stable user identity from the session
-  const currentUser = useMemo<CollabUser | undefined>(() => {
-    if (!session?.email) return undefined;
-    return {
-      name: emailToName(session.email),
-      email: session.email,
-      color: emailToColor(session.email),
-    };
-  }, [session?.email]);
-
-  const docId = compositionId ? `comp-${compositionId}` : null;
-
-  const {
-    ydoc,
-    awareness,
-    isLoading,
-    isSynced,
-    activeUsers,
-    agentActive,
-    agentPresent,
-  } = useCollaborativeDoc({
-    docId,
-    user: currentUser,
-    requestSource: TAB_ID,
-    pollInterval: 2000,
-  });
-
-  const [compositionData, setCompositionData] =
-    useState<CompositionCollabData | null>(null);
-
-  // When the Yjs doc syncs, read the Y.Text("content") and parse it
-  useEffect(() => {
-    if (!ydoc || !isSynced) return;
-
-    const ytext = ydoc.getText("content");
-    const text = ytext.toString();
-
-    if (text) {
-      try {
-        const parsed = normalizeCompositionCollab(JSON.parse(text));
-        if (parsed) setCompositionData(parsed);
-      } catch {
-        // Not valid JSON yet — initial state may be empty
-      }
-    }
-
-    // Observe Y.Text changes from remote edits (other users AND the agent —
-    // the agent writes the DB-canonical JSON in-process via applyText).
-    const observer = () => {
-      const updated = ytext.toString();
-      if (updated) {
-        try {
-          const parsed = normalizeCompositionCollab(JSON.parse(updated));
-          if (parsed) setCompositionData(parsed);
-        } catch {
-          // Ignore parse errors during partial updates
-        }
-      }
-    };
-
-    ytext.observe(observer);
-    return () => {
-      ytext.unobserve(observer);
-    };
-  }, [ydoc, isSynced]);
-
-  // Track whether we're currently pushing to avoid feedback loops
-  const isPushingRef = useRef(false);
-
-  // Hold the latest parsed state so pushToCollab can merge against it without
-  // depending on `compositionData` (which would change its identity on every
-  // remote edit and re-trigger the contexts' push effects).
-  const compositionDataRef = useRef<CompositionCollabData | null>(null);
-  compositionDataRef.current = compositionData;
-
-  // Push local state to collab endpoint, merging with existing state and
-  // writing the DB-canonical shape so every writer (the agent's in-process
-  // `applyText`, the SQL `compositions.data` column, and all clients) agree on
-  // field names. `update-composition`/`save-composition` read `defaultProps`
-  // and flat `durationInFrames`/`fps`/`width`/`height`, so we serialize the
-  // same way here instead of the old nested `{ props, settings }` shape.
-  const pushToCollab = useCallback(
-    (data: CompositionCollabData) => {
-      if (!docId || isPushingRef.current) return;
-      isPushingRef.current = true;
-
-      const current = compositionDataRef.current ?? {};
-      const tracks = data.tracks ?? current.tracks;
-      const props = data.props ?? current.props;
-      const settings = data.settings ?? current.settings;
-
-      const payload: Record<string, any> = {
-        updatedAt: new Date().toISOString(),
-      };
-      if (tracks !== undefined) payload.tracks = tracks;
-      if (props !== undefined) payload.defaultProps = props;
-      if (settings) {
-        if (typeof settings.durationInFrames === "number")
-          payload.durationInFrames = settings.durationInFrames;
-        if (typeof settings.fps === "number") payload.fps = settings.fps;
-        if (typeof settings.width === "number") payload.width = settings.width;
-        if (typeof settings.height === "number")
-          payload.height = settings.height;
-      }
-
-      const dataStr = JSON.stringify(payload);
-
-      fetch(agentNativePath(`/_agent-native/collab/${docId}/text`), {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          text: dataStr,
-          field: "content",
-          requestSource: TAB_ID,
-        }),
-      })
-        .catch(() => {
-          // Collab sync failed — localStorage still has the data
-        })
-        .finally(() => {
-          isPushingRef.current = false;
-        });
-    },
-    [docId],
-  );
-
-  return {
-    compositionData,
-    ydoc,
-    awareness,
-    isLoading,
-    isSynced,
-    activeUsers,
-    agentActive,
-    agentPresent,
-    pushToCollab,
-    currentUser,
-    tabId: TAB_ID,
-  };
-}

package/corpus/templates/videos/app/hooks/use-composition-design-system.ts

@@ -1,47 +0,0 @@
-import { useActionQuery } from "@agent-native/core/client";
-
-import type { DesignSystemData } from "../../shared/api";
-
-const DEFAULT_DESIGN_SYSTEM: DesignSystemData = {
-  colors: {
-    primary: "#609FF8",
-    secondary: "#4ADE80",
-    accent: "#00E5FF",
-    background: "#000000",
-    surface: "#0a0a0a",
-    text: "#ffffff",
-    textMuted: "rgba(255,255,255,0.55)",
-  },
-  typography: {
-    headingFont: "Poppins",
-    bodyFont: "Poppins",
-    headingWeight: "900",
-    bodyWeight: "400",
-    headingSizes: { h1: "64px", h2: "40px", h3: "28px" },
-  },
-  spacing: { slidePadding: "80px 110px", elementGap: "20px" },
-  borders: { radius: "12px", accentWidth: "4px" },
-  slideDefaults: { background: "#000000", labelStyle: "uppercase" },
-  logos: [],
-};
-
-export function useCompositionDesignSystem(designSystemId?: string | null) {
-  const { data, isLoading } = useActionQuery<{
-    id: string;
-    title: string;
-    data: string;
-  }>("get-design-system", designSystemId ? { id: designSystemId } : undefined);
-
-  if (!designSystemId || !data?.data) {
-    return { designSystem: DEFAULT_DESIGN_SYSTEM, isLoading: false };
-  }
-
-  try {
-    const parsed = JSON.parse(data.data) as DesignSystemData;
-    return { designSystem: parsed, isLoading };
-  } catch {
-    return { designSystem: DEFAULT_DESIGN_SYSTEM, isLoading };
-  }
-}
-
-export { DEFAULT_DESIGN_SYSTEM };

package/corpus/templates/videos/app/hooks/use-database-compositions.ts

@@ -1,144 +0,0 @@
-import { useActionQuery } from "@agent-native/core/client";
-import { useEffect, useMemo, useState } from "react";
-
-import {
-  databaseRowToComposition,
-  type DatabaseCompositionRow,
-} from "@/lib/database-compositions";
-import { compositions, type CompositionEntry } from "@/remotion/registry";
-
-function compositionChanged(
-  existing: CompositionEntry,
-  next: CompositionEntry,
-) {
-  return (
-    existing.title !== next.title ||
-    existing.description !== next.description ||
-    existing.durationInFrames !== next.durationInFrames ||
-    existing.fps !== next.fps ||
-    existing.width !== next.width ||
-    existing.height !== next.height ||
-    JSON.stringify(existing.defaultProps) !==
-      JSON.stringify(next.defaultProps) ||
-    JSON.stringify(existing.tracks) !== JSON.stringify(next.tracks)
-  );
-}
-
-// ─── Cross-instance reconciliation ────────────────────────────────────────────
-// Multiple components mount this hook. They all observe the same React Query
-// cache, but they each fire their own effect. To keep them from racing on the
-// shared `compositions` singleton (and to react when DB rows are added or
-// removed), we run an idempotent full reconcile guarded by a snapshot key —
-// only one instance does the work per data change, the rest early-out — and
-// notify every subscribed instance afterward so they all re-render together.
-
-let lastReconciledKey: string | null = null;
-const subscribers = new Set<() => void>();
-
-function subscribe(notify: () => void): () => void {
-  subscribers.add(notify);
-  return () => {
-    subscribers.delete(notify);
-  };
-}
-
-function notifyAll() {
-  for (const cb of subscribers) cb();
-}
-
-function snapshotKey(rows: DatabaseCompositionRow[]): string {
-  // Stable identity for this set of rows — used to skip redundant reconciles.
-  return JSON.stringify(
-    rows
-      .map((r) => [r.id, r.title, r.type, r.data])
-      .sort((a, b) => String(a[0]).localeCompare(String(b[0]))),
-  );
-}
-
-function reconcileRegistry(rows: DatabaseCompositionRow[]): boolean {
-  let mutated = false;
-  const dbIds = new Set<string>();
-
-  // Add or update every DB-sourced entry.
-  for (const row of rows) {
-    const entry = databaseRowToComposition(row);
-    dbIds.add(entry.id);
-    const index = compositions.findIndex((c) => c.id === entry.id);
-    if (index === -1) {
-      compositions.push(entry);
-      mutated = true;
-    } else if (compositionChanged(compositions[index], entry)) {
-      const existing = compositions[index];
-      compositions[index] = {
-        ...entry,
-        component: existing.component ?? entry.component,
-      };
-      mutated = true;
-    }
-  }
-
-  // Remove DB-sourced entries that no longer exist in the query data.
-  // Static registry entries (storage !== "database") are never touched.
-  for (let i = compositions.length - 1; i >= 0; i--) {
-    const c = compositions[i];
-    if (c.storage === "database" && !dbIds.has(c.id)) {
-      compositions.splice(i, 1);
-      mutated = true;
-    }
-  }
-
-  return mutated;
-}
-
-export function useDatabaseCompositions() {
-  const [version, setVersion] = useState(0);
-  const query = useActionQuery<DatabaseCompositionRow[]>(
-    "list-compositions",
-    undefined,
-    {
-      retry: 1,
-      staleTime: 2000,
-    },
-  );
-  const rows: DatabaseCompositionRow[] = query.data ?? [];
-
-  // Subscribe to cross-instance updates so every mounted hook re-renders when
-  // any other instance reconciles the registry.
-  useEffect(() => {
-    return subscribe(() => setVersion((v) => v + 1));
-  }, []);
-
-  // Idempotent reconcile guarded by a snapshot key. Concurrent instances all
-  // see the same query.data reference, compute the same key, and exactly one
-  // of them does the work — the rest early-out.
-  useEffect(() => {
-    if (!query.data) return;
-    const key = snapshotKey(rows);
-    if (key === lastReconciledKey) return;
-    lastReconciledKey = key;
-    const changed = reconcileRegistry(rows);
-    if (changed) notifyAll();
-  }, [query.data, rows]);
-
-  // Derived merged list — recomputed from query.data each render. Callers can
-  // consume this directly without touching the singleton. Static registry
-  // entries (storage !== "database") are kept; DB entries replace stale ones.
-  const merged = useMemo<CompositionEntry[]>(() => {
-    const dbEntries = rows.map(databaseRowToComposition);
-    const dbIds = new Set(dbEntries.map((e) => e.id));
-    const staticEntries = compositions.filter(
-      (c) => c.storage !== "database" && !dbIds.has(c.id),
-    );
-    return [...staticEntries, ...dbEntries];
-    // `version` is intentionally a dep so a registry mutation re-derives.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rows, version]);
-
-  return {
-    rows,
-    compositions: merged,
-    version,
-    isLoading: query.isLoading,
-    isError: query.isError,
-  };
-}

package/corpus/templates/videos/app/hooks/use-db-status.ts

@@ -1,30 +0,0 @@
-import { agentNativePath } from "@agent-native/core/client";
-import { useQuery } from "@tanstack/react-query";
-
-interface EnvStatusEntry {
-  key: string;
-  label: string;
-  required: boolean;
-  configured: boolean;
-}
-
-export function useDbStatus() {
-  const { data, isLoading } = useQuery<EnvStatusEntry[]>({
-    queryKey: ["env-status"],
-    queryFn: async () => {
-      const res = await fetch(agentNativePath("/_agent-native/env-status"));
-      if (!res.ok) return [];
-      return res.json();
-    },
-    staleTime: 30_000,
-  });
-
-  const dbUrlEntry = data?.find((e) => e.key === "DATABASE_URL");
-  const configured = dbUrlEntry?.configured ?? false;
-
-  return {
-    configured,
-    isLocal: !configured,
-    isLoading,
-  };
-}

package/corpus/templates/videos/app/hooks/use-design-systems.ts

@@ -1,21 +0,0 @@
-import { useActionQuery } from "@agent-native/core/client";
-
-type DesignSystemSummary = {
-  id: string;
-  title: string;
-  description: string | null;
-  data: string;
-  isDefault: boolean;
-  createdAt: string;
-};
-
-export function useDesignSystems() {
-  const { data, isLoading, error, refetch } = useActionQuery<{
-    designSystems: DesignSystemSummary[];
-  }>("list-design-systems");
-
-  const designSystems: DesignSystemSummary[] = data?.designSystems ?? [];
-  const defaultSystem = designSystems.find((ds) => ds.isDefault);
-
-  return { designSystems, defaultSystem, isLoading, error, refetch };
-}