@agent-native/core 0.85.6 → 0.86.0

package/corpus/templates/videos/app/remotion/utils/springAnimation.ts

@@ -1,76 +0,0 @@
-/**
- * Spring animation utilities for bouncy, natural-feeling animations
- * Similar to iMessage bubble animations
- */
-
-/**
- * Spring animation with overshoot and bounce
- * @param progress - Linear progress from 0 to 1
- * @param stiffness - How "stiff" the spring is (higher = faster bounce)
- * @param damping - How much the spring dampens (higher = less bounce)
- * @returns Animated value from 0 to 1 with spring physics
- */
-export function spring(
-  progress: number,
-  stiffness = 300,
-  damping = 25,
-): number {
-  if (progress <= 0) return 0;
-  if (progress >= 1) return 1;
-
-  // Simulate spring physics
-  const mass = 1;
-  const angularFreq = Math.sqrt(stiffness / mass);
-  const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
-
-  if (dampingRatio < 1) {
-    // Underdamped (bouncy)
-    const dampedFreq = angularFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
-    const envelope = Math.exp(-dampingRatio * angularFreq * progress);
-    const phase = Math.atan(
-      dampingRatio / Math.sqrt(1 - dampingRatio * dampingRatio),
-    );
-
-    return (
-      1 - (envelope * Math.cos(dampedFreq * progress - phase)) / Math.cos(phase)
-    );
-  } else if (dampingRatio === 1) {
-    // Critically damped
-    const envelope = Math.exp(-angularFreq * progress);
-    return 1 - envelope * (1 + angularFreq * progress);
-  } else {
-    // Overdamped (no bounce)
-    const r1 =
-      -angularFreq *
-      (dampingRatio + Math.sqrt(dampingRatio * dampingRatio - 1));
-    const r2 =
-      -angularFreq *
-      (dampingRatio - Math.sqrt(dampingRatio * dampingRatio - 1));
-    const c2 = -1 / (r2 - r1);
-    const c1 = 1 - c2;
-
-    return 1 - (c1 * Math.exp(r1 * progress) + c2 * Math.exp(r2 * progress));
-  }
-}
-
-/**
- * iMessage-style bubble spring
- * Quick bounce with nice overshoot
- */
-export function iMessageSpring(progress: number): number {
-  return spring(progress, 400, 22);
-}
-
-/**
- * Gentle spring with subtle bounce
- */
-export function gentleSpring(progress: number): number {
-  return spring(progress, 200, 20);
-}
-
-/**
- * Energetic spring with pronounced bounce
- */
-export function energeticSpring(progress: number): number {
-  return spring(progress, 500, 18);
-}

package/corpus/templates/videos/app/root.tsx

@@ -1,165 +0,0 @@
-import {
-  AppProviders,
-  CommandMenu,
-  appPath,
-  createAgentNativeQueryClient,
-  useCommandMenuShortcut,
-  useDbSync,
-  useT,
-} from "@agent-native/core/client";
-import {
-  configureTracking,
-  getLocaleInitScript,
-  getThemeInitScript,
-} from "@agent-native/core/client";
-import { IconSun, IconMoon } from "@tabler/icons-react";
-import { useQueryClient } from "@tanstack/react-query";
-import { useTheme } from "next-themes";
-import { useCallback, useState } from "react";
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
-import type { LinksFunction } from "react-router";
-
-import { Layout as AppLayout } from "@/components/layout/Layout";
-import { useNavigationState } from "@/hooks/use-navigation-state";
-import { TAB_ID } from "@/lib/tab-id";
-
-import changelog from "../CHANGELOG.md?raw";
-import { i18nCatalog } from "./i18n";
-
-import stylesheet from "./global.css?url";
-configureTracking({
-  getDefaultProps: (_name, properties) => ({
-    ...properties,
-    app: "agent-native-videos",
-  }),
-});
-
-export const links: LinksFunction = () => [
-  { rel: "stylesheet", href: stylesheet },
-];
-
-const THEME_INIT_SCRIPT_SELECTOR = "script[data-agent-native-theme-init]";
-const LOCALE_INIT_SCRIPT_SELECTOR = "script[data-agent-native-locale-init]";
-
-function getHydrationStableThemeInitScript() {
-  if (typeof document !== "undefined") {
-    const existing = document.querySelector<HTMLScriptElement>(
-      THEME_INIT_SCRIPT_SELECTOR,
-    );
-    if (existing?.innerHTML) return existing.innerHTML;
-  }
-  return getThemeInitScript("dark", true);
-}
-
-function getHydrationStableLocaleInitScript() {
-  if (typeof document !== "undefined") {
-    const existing = document.querySelector<HTMLScriptElement>(
-      LOCALE_INIT_SCRIPT_SELECTOR,
-    );
-    if (existing?.innerHTML) return existing.innerHTML;
-  }
-  return getLocaleInitScript();
-}
-
-const THEME_INIT_SCRIPT = getHydrationStableThemeInitScript();
-const LOCALE_INIT_SCRIPT = getHydrationStableLocaleInitScript();
-
-export function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en-US" dir="ltr" data-locale="en-US" suppressHydrationWarning>
-      <head>
-        <meta charSet="utf-8" />
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
-        />
-        <script
-          data-agent-native-theme-init
-          suppressHydrationWarning
-          dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }}
-        />
-        <script
-          data-agent-native-locale-init
-          suppressHydrationWarning
-          dangerouslySetInnerHTML={{ __html: LOCALE_INIT_SCRIPT }}
-        />
-        <link rel="manifest" href={appPath("/manifest.json")} />
-        <meta name="theme-color" content="#EF4444" />
-        <meta name="mobile-web-app-capable" content="yes" />
-        <meta
-          name="apple-mobile-web-app-status-bar-style"
-          content="black-translucent"
-        />
-        <meta name="apple-mobile-web-app-title" content="Videos" />
-        <link rel="icon" type="image/svg+xml" href={appPath("/favicon.svg")} />
-        <link rel="apple-touch-icon" href={appPath("/icon-180.svg")} />
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        {children}
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
-  );
-}
-
-function AppContent() {
-  useNavigationState();
-  const qc = useQueryClient();
-  useDbSync({
-    queryClient: qc,
-    queryKeys: ["action", "env-status"],
-    ignoreSource: TAB_ID,
-  });
-  const { resolvedTheme, setTheme } = useTheme();
-  const isDark = resolvedTheme === "dark";
-  const [cmdkOpen, setCmdkOpen] = useState(false);
-  const t = useT();
-  useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
-
-  return (
-    <>
-      <CommandMenu
-        open={cmdkOpen}
-        onOpenChange={setCmdkOpen}
-        changelog={changelog}
-        changelogKey="videos"
-      >
-        <CommandMenu.Group heading={t("root.commandVideos")}>
-          <CommandMenu.Item onSelect={() => {}}>
-            {t("root.searchCompositions")}
-          </CommandMenu.Item>
-        </CommandMenu.Group>
-        <CommandMenu.Group heading={t("root.commandAppearance")}>
-          <CommandMenu.Item
-            onSelect={() => setTheme(isDark ? "light" : "dark")}
-            keywords={["theme", "dark", "light", "mode"]}
-          >
-            {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
-            {t("root.toggleTheme")}
-          </CommandMenu.Item>
-        </CommandMenu.Group>
-      </CommandMenu>
-      <AppLayout>
-        <Outlet />
-      </AppLayout>
-    </>
-  );
-}
-
-export default function Root() {
-  const [queryClient] = useState(() => createAgentNativeQueryClient());
-  return (
-    <AppProviders
-      queryClient={queryClient}
-      defaultTheme="dark"
-      i18n={{ catalog: i18nCatalog }}
-    >
-      <AppContent />
-    </AppProviders>
-  );
-}
-
-export { ErrorBoundary } from "@agent-native/core/client";

package/corpus/templates/videos/app/routes/$.tsx

@@ -1,10 +0,0 @@
-import enUS from "@/i18n/en-US";
-import NotFound from "@/pages/NotFound";
-
-export function meta() {
-  return [{ title: enUS.raw.routes.notFound }];
-}
-
-export default function CatchAllRoute() {
-  return <NotFound />;
-}

package/corpus/templates/videos/app/routes/_index.tsx

@@ -1,25 +0,0 @@
-import Studio from "@/pages/Index";
-
-const SEO_TITLE =
-  "Agent-Native Videos - Open Source AI video editor for programmatic video";
-const SEO_DESCRIPTION =
-  "Open Source AI video editor for building, animating, editing, and rendering programmatic videos with React and Remotion.";
-
-export function meta() {
-  return [
-    { title: SEO_TITLE },
-    {
-      name: "description",
-      content: SEO_DESCRIPTION,
-    },
-    { property: "og:title", content: SEO_TITLE },
-    { property: "og:description", content: SEO_DESCRIPTION },
-    { name: "twitter:card", content: "summary" },
-    { name: "twitter:title", content: SEO_TITLE },
-    { name: "twitter:description", content: SEO_DESCRIPTION },
-  ];
-}
-
-export default function IndexRoute() {
-  return <Studio />;
-}

package/corpus/templates/videos/app/routes/c.$compositionId.tsx

@@ -1,10 +0,0 @@
-import enUS from "@/i18n/en-US";
-import Studio from "@/pages/Index";
-
-export function meta() {
-  return [{ title: enUS.raw.routes.studio }];
-}
-
-export default function CompositionRoute() {
-  return <Studio />;
-}

package/corpus/templates/videos/app/routes/components.tsx

@@ -1,10 +0,0 @@
-import enUS from "@/i18n/en-US";
-import ComponentLibrary from "@/pages/ComponentLibrary";
-
-export function meta() {
-  return [{ title: enUS.raw.routes.components }];
-}
-
-export default function ComponentsRoute() {
-  return <ComponentLibrary />;
-}

package/corpus/templates/videos/app/routes/design-systems.tsx

@@ -1,10 +0,0 @@
-import enUS from "@/i18n/en-US";
-import DesignSystems from "@/pages/DesignSystems";
-
-export function meta() {
-  return [{ title: enUS.raw.routes.designSystems }];
-}
-
-export default function DesignSystemsRoute() {
-  return <DesignSystems />;
-}

package/corpus/templates/videos/app/routes/extensions.$id.$slug.tsx

@@ -1,2 +0,0 @@
-export * from "./extensions.$id";
-export { default } from "./extensions.$id";

package/corpus/templates/videos/app/routes/extensions.$id.tsx

@@ -1,5 +0,0 @@
-import { ExtensionViewerPage } from "@agent-native/core/client/extensions";
-
-export default function ExtensionViewerRoute() {
-  return <ExtensionViewerPage />;
-}

package/corpus/templates/videos/app/routes/extensions._index.tsx

@@ -1,5 +0,0 @@
-import { ExtensionsListPage } from "@agent-native/core/client/extensions";
-
-export default function ExtensionsRoute() {
-  return <ExtensionsListPage />;
-}

package/corpus/templates/videos/app/routes/extensions.tsx

@@ -1,5 +0,0 @@
-import { Outlet } from "react-router";
-
-export default function ExtensionsLayout() {
-  return <Outlet />;
-}

package/corpus/templates/videos/app/routes/settings.tsx

@@ -1,88 +0,0 @@
-import {
-  ChangelogSettingsCard,
-  LanguagePicker,
-  SettingsTabsPage,
-  openAgentSettings,
-  useT,
-} from "@agent-native/core/client";
-import { TeamPage } from "@agent-native/core/client/org";
-
-import { useSetPageTitle } from "@/components/layout/HeaderActions";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import enUS from "@/i18n/en-US";
-
-import changelog from "../../CHANGELOG.md?raw";
-
-export function meta() {
-  return [{ title: enUS.raw.routes.settings }];
-}
-
-export default function SettingsRoute() {
-  const t = useT();
-  useSetPageTitle(t("settings.title"));
-
-  return (
-    <SettingsTabsPage
-      teamLabel={t("navigation.team")}
-      general={
-        <div className="mx-auto w-full max-w-3xl space-y-6">
-          <p className="text-sm leading-6 text-muted-foreground">
-            {t("settings.description")}
-          </p>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">
-                {t("settings.languageTitle")}
-              </CardTitle>
-              <CardDescription>
-                {t("settings.languageDescription")}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="max-w-xs space-y-1.5">
-              <Label>{t("settings.languageLabel")}</Label>
-              <LanguagePicker label={t("settings.languageLabel")} />
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">
-                {t("settings.agentTitle")}
-              </CardTitle>
-              <CardDescription>
-                {t("settings.agentDescription")}
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Button variant="outline" onClick={() => openAgentSettings()}>
-                {t("settings.openAgentSettings")}
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
-      }
-      team={
-        <div className="mx-auto w-full max-w-3xl">
-          <TeamPage
-            showTitle={false}
-            createOrgDescription="Set up a team to share compositions and animations with your colleagues."
-          />
-        </div>
-      }
-      whatsNew={
-        <div className="mx-auto w-full max-w-3xl">
-          <ChangelogSettingsCard markdown={changelog} />
-        </div>
-      }
-    />
-  );
-}

package/corpus/templates/videos/app/routes/team.tsx

@@ -1,11 +0,0 @@
-import { Navigate } from "react-router";
-
-import enUS from "@/i18n/en-US";
-
-export function meta() {
-  return [{ title: enUS.raw.routes.team }];
-}
-
-export default function TeamRoute() {
-  return <Navigate to="/settings#team" replace />;
-}

package/corpus/templates/videos/app/routes.ts

@@ -1,4 +0,0 @@
-import { type RouteConfig } from "@react-router/dev/routes";
-import { flatRoutes } from "@react-router/fs-routes";
-
-export default flatRoutes() satisfies RouteConfig;

package/corpus/templates/videos/app/state.ts

@@ -1,77 +0,0 @@
-import { useState, useCallback } from "react";
-
-import type { AnimationTrack } from "./types";
-
-export type TimelineState = {
-  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;
-};
-
-export function useTimelineState(
-  initialTracks: AnimationTrack[] = [],
-): TimelineState {
-  const [tracks, setTracksInternal] = useState<AnimationTrack[]>(initialTracks);
-  const [selectedTrackId, setSelectedTrackId] = useState<string | null>(null);
-
-  const selectTrack = useCallback((id: string | null) => {
-    setSelectedTrackId(id);
-  }, []);
-
-  const updateTrack = useCallback(
-    (id: string, patch: Partial<AnimationTrack>) => {
-      setTracksInternal((prev) =>
-        prev.map((t) => (t.id === id ? { ...t, ...patch } : t)),
-      );
-    },
-    [],
-  );
-
-  const addTrack = useCallback((track: AnimationTrack) => {
-    setTracksInternal((prev) => {
-      // Cursor track should be inserted at the top (after camera if it exists)
-      if (track.id === "cursor") {
-        const cameraIndex = prev.findIndex((t) => t.id === "camera");
-        if (cameraIndex >= 0) {
-          // Insert after camera
-          return [
-            ...prev.slice(0, cameraIndex + 1),
-            track,
-            ...prev.slice(cameraIndex + 1),
-          ];
-        } else {
-          // Insert at the very top
-          return [track, ...prev];
-        }
-      }
-      // Other tracks append at the end
-      return [...prev, track];
-    });
-  }, []);
-
-  const deleteTrack = useCallback((id: string) => {
-    setTracksInternal((prev) => prev.filter((t) => t.id !== id));
-    // Clear selection if the deleted track was selected
-    setSelectedTrackId((prevId) => (prevId === id ? null : prevId));
-  }, []);
-
-  // Resets tracks and clears selection — used when switching compositions
-  const setTracks = useCallback((newTracks: AnimationTrack[]) => {
-    setTracksInternal(newTracks);
-    setSelectedTrackId(null);
-  }, []);
-
-  return {
-    tracks,
-    selectedTrackId,
-    selectTrack,
-    updateTrack,
-    addTrack,
-    deleteTrack,
-    setTracks,
-  };
-}

package/corpus/templates/videos/app/types/elementAnimations.ts

@@ -1,121 +0,0 @@
-/**
- * Element Animation System
- *
- * Defines animations triggered by cursor interactions (hover/click)
- * Applies to all instances of a component type
- */
-
-export interface AnimationKeyframe {
-  progress: number; // 0→1 within the animation duration
-  value: number | string; // number for numeric properties, string for colors
-}
-
-export interface AnimatedPropertyConfig {
-  property: string; // e.g., "scale", "translateY", "brightness"
-  keyframes: AnimationKeyframe[];
-  to?: number | string; // Legacy persisted animations may still store a direct target
-  unit: string; // e.g., "px", "x", "%", ""
-  easing?: string; // e.g., "linear", "ease-out"
-  min?: number;
-  max?: number;
-}
-
-export interface ElementAnimation {
-  id: string; // e.g., "card-hover", "button-click"
-  elementType: string; // e.g., "Card", "Button" - applies to all instances
-  triggerType: "hover" | "click";
-  duration: number; // frames
-  easing?: string; // e.g., "expo.inOut", "linear"
-  properties: AnimatedPropertyConfig[];
-}
-
-export interface ElementAnimationRegistry {
-  [compositionId: string]: ElementAnimation[];
-}
-
-/**
- * Color parsing cache for hex colors
- * Key: hex color string, Value: { r, g, b }
- */
-const hexColorCache = new Map<string, { r: number; g: number; b: number }>();
-
-/**
- * Parse hex color to RGB (memoized)
- */
-function parseHexColor(hex: string): { r: number; g: number; b: number } {
-  const cached = hexColorCache.get(hex);
-  if (cached) return cached;
-
-  const cleanHex = hex.replace("#", "");
-  const result = {
-    r: parseInt(cleanHex.substring(0, 2), 16),
-    g: parseInt(cleanHex.substring(2, 4), 16),
-    b: parseInt(cleanHex.substring(4, 6), 16),
-  };
-
-  hexColorCache.set(hex, result);
-  return result;
-}
-
-// Helper to interpolate between two hex colors
-export function interpolateColor(
-  color1: string,
-  color2: string,
-  progress: number,
-): string {
-  // Parse hex colors (cached)
-  const rgb1 = parseHexColor(color1);
-  const rgb2 = parseHexColor(color2);
-
-  const r = Math.round(rgb1.r + (rgb2.r - rgb1.r) * progress);
-  const g = Math.round(rgb1.g + (rgb2.g - rgb1.g) * progress);
-  const b = Math.round(rgb1.b + (rgb2.b - rgb1.b) * progress);
-
-  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
-}
-
-// Helper to get animation value at a specific progress
-export function getAnimationValue(
-  property: AnimatedPropertyConfig,
-  progress: number, // 0→1
-): number | string {
-  const keyframes = property.keyframes;
-
-  if (keyframes.length === 0) return 0;
-  if (keyframes.length === 1) return keyframes[0].value;
-
-  // Find surrounding keyframes
-  let beforeIdx = 0;
-  let afterIdx = keyframes.length - 1;
-
-  for (let i = 0; i < keyframes.length - 1; i++) {
-    if (
-      progress >= keyframes[i].progress &&
-      progress <= keyframes[i + 1].progress
-    ) {
-      beforeIdx = i;
-      afterIdx = i + 1;
-      break;
-    }
-  }
-
-  const before = keyframes[beforeIdx];
-  const after = keyframes[afterIdx];
-
-  if (before.progress === after.progress) return before.value;
-
-  // Linear interpolation between keyframes
-  const localProgress =
-    (progress - before.progress) / (after.progress - before.progress);
-
-  // Handle color interpolation
-  if (typeof before.value === "string" && typeof after.value === "string") {
-    return interpolateColor(before.value, after.value, localProgress);
-  }
-
-  // Handle numeric interpolation
-  return (
-    (before.value as number) +
-    ((after.value as number) - (before.value as number)) * localProgress
-  );
-}