@agent-native/core 0.85.7 → 0.86.1

package/corpus/templates/videos/app/components/keyframes/KeyframeActionButtons.tsx

@@ -1,78 +0,0 @@
-import { useT } from "@agent-native/core/client";
-import { IconCopy, IconRotate, IconTrash } from "@tabler/icons-react";
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-import { Button } from "../ui/button";
-
-interface KeyframeActionButtonsProps {
-  isOnKeyframe: boolean;
-  onDuplicate: () => void;
-  onReset: () => void;
-  onRemove: () => void;
-  resetTooltip?: string;
-}
-
-export function KeyframeActionButtons({
-  isOnKeyframe,
-  onDuplicate,
-  onReset,
-  onRemove,
-  resetTooltip,
-}: KeyframeActionButtonsProps) {
-  const t = useT();
-  const resetLabel = resetTooltip ?? t("raw.keyframes.resetDefaults");
-
-  if (!isOnKeyframe) return null;
-
-  return (
-    <div className="flex gap-2 pt-2 border-t border-border/50">
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={onDuplicate}
-            className="text-xs border-muted-foreground/30 hover:bg-secondary/50"
-            aria-label={t("raw.keyframes.duplicateAhead")}
-          >
-            <IconCopy className="w-3 h-3" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{t("raw.keyframes.duplicateAhead")}</TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onReset}
-            className="text-xs text-muted-foreground/60 hover:text-muted-foreground hover:bg-secondary/30"
-            aria-label={resetLabel}
-          >
-            <IconRotate className="h-3 w-3" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{resetLabel}</TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={onRemove}
-            className="text-destructive/80 border-destructive/30 hover:bg-destructive/10 text-xs ml-auto"
-            aria-label={t("raw.keyframes.remove")}
-          >
-            <IconTrash className="w-3.5 h-3.5" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{t("raw.keyframes.remove")}</TooltipContent>
-      </Tooltip>
-    </div>
-  );
-}

package/corpus/templates/videos/app/components/keyframes/KeyframeNavigation.tsx

@@ -1,59 +0,0 @@
-import { Button } from "../ui/button";
-
-interface KeyframeNavigationProps {
-  currentFrame: number;
-  allKeyframes: number[];
-  onSeek: (frame: number) => void;
-  disabled?: boolean;
-}
-
-export function KeyframeNavigation({
-  currentFrame,
-  allKeyframes,
-  onSeek,
-  disabled = false,
-}: KeyframeNavigationProps) {
-  const prevFrames = allKeyframes.filter((f) => f < currentFrame);
-  const nextFrames = allKeyframes.filter((f) => f > currentFrame);
-
-  const handlePrev = () => {
-    if (prevFrames.length > 0) {
-      onSeek(prevFrames[prevFrames.length - 1]);
-    }
-  };
-
-  const handleNext = () => {
-    if (nextFrames.length > 0) {
-      onSeek(nextFrames[0]);
-    }
-  };
-
-  return (
-    <div className="flex items-center gap-2">
-      <Button
-        size="sm"
-        variant="outline"
-        onClick={handlePrev}
-        disabled={disabled || prevFrames.length === 0}
-        className="flex-1 gap-1.5 text-xs border-muted-foreground/30 hover:bg-secondary/50 disabled:opacity-30"
-      >
-        <div className="relative w-3 h-3 flex items-center justify-center">
-          <div className="w-2 h-2 rotate-45 bg-muted-foreground/40 border-l-2 border-b-2 border-muted-foreground/80" />
-        </div>
-        Previous
-      </Button>
-      <Button
-        size="sm"
-        variant="outline"
-        onClick={handleNext}
-        disabled={disabled || nextFrames.length === 0}
-        className="flex-1 gap-1.5 text-xs border-muted-foreground/30 hover:bg-secondary/50 disabled:opacity-30"
-      >
-        Next
-        <div className="relative w-3 h-3 flex items-center justify-center">
-          <div className="w-2 h-2 rotate-45 bg-muted-foreground/40 border-r-2 border-t-2 border-muted-foreground/80" />
-        </div>
-      </Button>
-    </div>
-  );
-}

package/corpus/templates/videos/app/components/keyframes/PropertyNumberInput.tsx

@@ -1,56 +0,0 @@
-import { Label } from "../ui/label";
-
-interface PropertyNumberInputProps {
-  label: string;
-  icon?: React.ReactNode;
-  value: number;
-  onChange: (value: number) => void;
-  step?: number;
-  min?: number;
-  max?: number;
-  suffix?: string;
-  decimals?: number;
-}
-
-export function PropertyNumberInput({
-  label,
-  icon,
-  value,
-  onChange,
-  step = 1,
-  min,
-  max,
-  suffix = "",
-  decimals = 0,
-}: PropertyNumberInputProps) {
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = parseFloat(e.target.value);
-    if (!Number.isFinite(newValue)) return;
-
-    // Apply min/max constraints if provided
-    let constrainedValue = newValue;
-    if (min !== undefined) constrainedValue = Math.max(min, constrainedValue);
-    if (max !== undefined) constrainedValue = Math.min(max, constrainedValue);
-
-    onChange(constrainedValue);
-  };
-
-  return (
-    <div className="space-y-1.5">
-      <Label className="text-xs text-muted-foreground flex items-center gap-1.5">
-        {icon}
-        {label}
-        {suffix && <span className="opacity-60">({suffix})</span>}
-      </Label>
-      <input
-        type="number"
-        step={step}
-        min={min}
-        max={max}
-        value={value.toFixed(decimals)}
-        onChange={handleChange}
-        className="w-full text-xs bg-secondary border border-border rounded-lg px-2.5 py-1.5 text-foreground font-mono focus:outline-none focus:ring-2 focus:ring-blue-400/40"
-      />
-    </div>
-  );
-}

package/corpus/templates/videos/app/components/layout/Header.tsx

@@ -1,64 +0,0 @@
-import { AgentToggleButton, useT } from "@agent-native/core/client";
-import { IconMenu2 } from "@tabler/icons-react";
-import { useLocation } from "react-router";
-
-import { compositions } from "@/remotion/registry";
-
-import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
-
-const pageTitleKeys: Record<string, string> = {
-  "/": "header.videos",
-  "/components": "header.components",
-  "/design-systems": "header.designSystems",
-  "/settings": "header.settings",
-};
-
-function resolveTitle(pathname: string, t: ReturnType<typeof useT>): string {
-  if (pageTitleKeys[pathname]) return t(pageTitleKeys[pathname]);
-  if (pathname.startsWith("/extensions")) return t("header.extensions");
-  const studioMatch = pathname.match(/^\/c\/(.+)$/);
-  if (studioMatch) {
-    const id = studioMatch[1];
-    if (id === "new") return t("header.newComposition");
-    const comp = compositions.find((c) => c.id === id);
-    return comp?.title || t("header.studio");
-  }
-  return t("header.videos");
-}
-
-interface HeaderProps {
-  onOpenMobileSidebar?: () => void;
-}
-
-export function Header({ onOpenMobileSidebar }: HeaderProps) {
-  const location = useLocation();
-  const title = useHeaderTitle();
-  const actions = useHeaderActions();
-  const t = useT();
-
-  return (
-    <header className="flex h-12 items-center gap-3 border-b border-border bg-background px-4 lg:px-6 shrink-0">
-      {onOpenMobileSidebar && (
-        <button
-          type="button"
-          onClick={onOpenMobileSidebar}
-          aria-label={t("sidebar.openNavigation")}
-          className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent md:hidden"
-        >
-          <IconMenu2 className="h-4 w-4" />
-        </button>
-      )}
-      <div className="flex items-center gap-3 flex-1 min-w-0">
-        {title ?? (
-          <h1 className="text-lg font-semibold tracking-tight truncate">
-            {resolveTitle(location.pathname, t)}
-          </h1>
-        )}
-      </div>
-      <div className="flex items-center gap-2 shrink-0">
-        {actions}
-        <AgentToggleButton />
-      </div>
-    </header>
-  );
-}

package/corpus/templates/videos/app/components/layout/HeaderActions.tsx

@@ -1,84 +0,0 @@
-import {
-  useEffect,
-  useSyncExternalStore,
-  type ReactNode,
-  type FC,
-} from "react";
-
-/**
- * External store for the page's header title + actions. We use an external
- * store (not React context) so that pages can inject ReactNode without
- * subscribing to the header state themselves — subscribing would trigger a
- * re-render on every update, which in turn creates new JSX, which updates
- * the store again, which re-renders… an infinite loop.
- *
- * Only <Header /> reads the store via useSyncExternalStore; pages only write.
- */
-
-type Listener = () => void;
-
-let currentTitle: ReactNode = null;
-let currentActions: ReactNode = null;
-const listeners = new Set<Listener>();
-
-function notify() {
-  for (const l of listeners) l();
-}
-
-function subscribe(l: Listener): () => void {
-  listeners.add(l);
-  return () => {
-    listeners.delete(l);
-  };
-}
-
-/** Consumed only by <Header /> — returns the current title. */
-export function useHeaderTitle(): ReactNode {
-  return useSyncExternalStore(
-    subscribe,
-    () => currentTitle,
-    () => currentTitle,
-  );
-}
-
-/** Consumed only by <Header /> — returns the current actions slot. */
-export function useHeaderActions(): ReactNode {
-  return useSyncExternalStore(
-    subscribe,
-    () => currentActions,
-    () => currentActions,
-  );
-}
-
-/**
- * Provider is now a no-op wrapper for backwards compatibility — the state
- * lives in the module-level store above. Kept as a component so callers of
- * <HeaderActionsProvider> don't need to change.
- */
-export const HeaderActionsProvider: FC<{ children: ReactNode }> = ({
-  children,
-}) => <>{children}</>;
-
-/** Mount a custom title into the app header. Cleans up on unmount. */
-export function useSetPageTitle(node: ReactNode) {
-  useEffect(() => {
-    currentTitle = node;
-    notify();
-    return () => {
-      currentTitle = null;
-      notify();
-    };
-  });
-}
-
-/** Mount ReactNode into the header's actions slot. Cleans up on unmount. */
-export function useSetHeaderActions(node: ReactNode) {
-  useEffect(() => {
-    currentActions = node;
-    notify();
-    return () => {
-      currentActions = null;
-      notify();
-    };
-  });
-}

package/corpus/templates/videos/app/components/layout/Layout.tsx

@@ -1,132 +0,0 @@
-import { AgentSidebar, useT } from "@agent-native/core/client";
-import { InvitationBanner } from "@agent-native/core/client/org";
-import { IconMenu2 } from "@tabler/icons-react";
-import { useState, useEffect } from "react";
-import { useLocation } from "react-router";
-
-import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
-
-import { Header } from "./Header";
-import { HeaderActionsProvider } from "./HeaderActions";
-import { NavSidebar } from "./NavSidebar";
-
-interface LayoutProps {
-  children: React.ReactNode;
-}
-
-const SIDEBAR_COLLAPSE_KEY = "videos.sidebar.collapsed";
-
-function readSidebarCollapsed() {
-  if (typeof window === "undefined") return false;
-  try {
-    return window.localStorage.getItem(SIDEBAR_COLLAPSE_KEY) === "1";
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Routes whose page renders its own h-12 toolbar (with title + AgentToggleButton).
- * Layout still wraps these with the AgentSidebar but skips the global Header
- * and the left NavSidebar so they don't double-stack chrome.
- *
- * - Studio routes (`/`, `/c/:id`) render their own complex sidebar + StudioHeader
- *   inside `pages/Index.tsx`.
- * - Extensions routes (`/extensions`, `/extensions/:id`) render the framework.s extensions toolbar.
- */
-function studioRoute(pathname: string): boolean {
-  if (pathname === "/") return true;
-  if (pathname.startsWith("/c/")) return true;
-  return false;
-}
-
-function routeOwnsToolbar(pathname: string): boolean {
-  if (studioRoute(pathname)) return true;
-  if (pathname.startsWith("/extensions")) return true;
-  return false;
-}
-
-export function Layout({ children }: LayoutProps) {
-  const location = useLocation();
-  const t = useT();
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
-  const [sidebarCollapsed, setSidebarCollapsed] =
-    useState(readSidebarCollapsed);
-
-  useEffect(() => {
-    setMobileSidebarOpen(false);
-  }, [location.pathname]);
-
-  useEffect(() => {
-    try {
-      window.localStorage.setItem(
-        SIDEBAR_COLLAPSE_KEY,
-        sidebarCollapsed ? "1" : "0",
-      );
-    } catch {
-      // Ignore storage failures; the in-memory preference still works.
-    }
-  }, [sidebarCollapsed]);
-
-  const isStudio = studioRoute(location.pathname);
-  const ownsToolbar = routeOwnsToolbar(location.pathname);
-
-  // Studio routes own their entire chrome (header + sidebar + agent sidebar
-  // are mounted inside pages/Index.tsx so AgentToggleButton can sit in the
-  // StudioHeader). Render the page directly.
-  if (isStudio) {
-    return <HeaderActionsProvider>{children}</HeaderActionsProvider>;
-  }
-
-  return (
-    <HeaderActionsProvider>
-      <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background text-foreground">
-        <div className="agent-layout-left-drawer hidden md:block">
-          <NavSidebar
-            collapsed={sidebarCollapsed}
-            onCollapsedChange={setSidebarCollapsed}
-          />
-        </div>
-        <Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
-          <SheetContent side="left" className="p-0 w-[260px]">
-            <SheetTitle className="sr-only">
-              {t("sidebar.navigation")}
-            </SheetTitle>
-            <NavSidebar collapsed={false} collapsible={false} />
-          </SheetContent>
-        </Sheet>
-        <AgentSidebar
-          position="right"
-          defaultOpen
-          emptyStateText={t("agent.emptyState")}
-          suggestions={[
-            t("agent.suggestionLogo"),
-            t("agent.suggestionZoom"),
-            t("agent.suggestionSlow"),
-          ]}
-        >
-          <div className="flex h-full flex-1 flex-col overflow-hidden">
-            {ownsToolbar ? (
-              <div className="flex h-12 items-center border-b border-border px-4 md:hidden shrink-0">
-                <button
-                  type="button"
-                  onClick={() => setMobileSidebarOpen(true)}
-                  aria-label={t("sidebar.openNavigation")}
-                  className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent"
-                >
-                  <IconMenu2 className="h-4 w-4" />
-                </button>
-              </div>
-            ) : (
-              <Header onOpenMobileSidebar={() => setMobileSidebarOpen(true)} />
-            )}
-            <InvitationBanner />
-            <main className="agent-native-app-main flex-1 overflow-y-auto">
-              {children}
-            </main>
-          </div>
-        </AgentSidebar>
-      </div>
-    </HeaderActionsProvider>
-  );
-}

package/corpus/templates/videos/app/components/layout/NavSidebar.tsx

@@ -1,180 +0,0 @@
-import {
-  DevDatabaseLink,
-  FeedbackButton,
-  appPath,
-  useT,
-} from "@agent-native/core/client";
-import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
-import { OrgSwitcher } from "@agent-native/core/client/org";
-import {
-  IconVideo,
-  IconComponents,
-  IconPalette,
-  IconSettings,
-  IconLayoutSidebarLeftCollapse,
-  IconLayoutSidebarLeftExpand,
-} from "@tabler/icons-react";
-import { Link, useLocation } from "react-router";
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-
-const navItems = [
-  { icon: IconVideo, labelKey: "navigation.animations", href: "/" },
-  {
-    icon: IconComponents,
-    labelKey: "navigation.components",
-    href: "/components",
-  },
-  {
-    icon: IconPalette,
-    labelKey: "navigation.designSystems",
-    href: "/design-systems",
-  },
-  { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
-];
-
-interface NavSidebarProps {
-  collapsed?: boolean;
-  collapsible?: boolean;
-  onCollapsedChange?: (collapsed: boolean) => void;
-}
-
-export function NavSidebar({
-  collapsed = false,
-  collapsible = true,
-  onCollapsedChange,
-}: NavSidebarProps) {
-  const location = useLocation();
-  const t = useT();
-
-  return (
-    <aside
-      data-collapsed={collapsed ? "true" : "false"}
-      className={cn(
-        "flex h-full shrink-0 flex-col overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out",
-        collapsed ? "w-12" : "w-56",
-      )}
-    >
-      <div
-        className={cn(
-          "flex h-12 shrink-0 items-center border-b border-border",
-          collapsed ? "justify-center px-1" : "gap-2 px-4",
-        )}
-      >
-        {!collapsed && (
-          <>
-            <img
-              src={appPath("/agent-native-icon-light.svg")}
-              alt=""
-              aria-hidden="true"
-              className="block h-4 w-auto shrink-0 dark:hidden"
-            />
-            <img
-              src={appPath("/agent-native-icon-dark.svg")}
-              alt=""
-              aria-hidden="true"
-              className="hidden h-4 w-auto shrink-0 dark:block"
-            />
-            <span className="min-w-0 flex-1 truncate text-sm font-semibold tracking-tight">
-              {t("navigation.brand")}
-            </span>
-          </>
-        )}
-        {collapsible && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                onClick={() => onCollapsedChange?.(!collapsed)}
-                aria-label={
-                  collapsed
-                    ? t("sidebar.expandSidebar")
-                    : t("sidebar.collapseSidebar")
-                }
-                className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-sidebar-accent/50 hover:text-foreground"
-              >
-                {collapsed ? (
-                  <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
-                ) : (
-                  <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
-                )}
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right">
-              {collapsed
-                ? t("sidebar.expandSidebar")
-                : t("sidebar.collapseSidebar")}
-            </TooltipContent>
-          </Tooltip>
-        )}
-      </div>
-
-      <nav
-        className={cn(
-          "flex-1 overflow-y-auto py-2",
-          collapsed
-            ? "flex flex-col items-center gap-1 px-1"
-            : "space-y-1 px-2",
-        )}
-      >
-        {navItems.map((item) => {
-          const Icon = item.icon;
-          const isActive =
-            item.href === "/"
-              ? !location.pathname.startsWith("/components") &&
-                !location.pathname.startsWith("/design-systems") &&
-                !location.pathname.startsWith("/settings") &&
-                !location.pathname.startsWith("/extensions")
-              : location.pathname.startsWith(item.href);
-          const link = (
-            <Link
-              key={item.href}
-              to={item.href}
-              aria-label={collapsed ? t(item.labelKey) : undefined}
-              className={cn(
-                "flex items-center rounded-lg text-sm transition-colors",
-                collapsed ? "h-10 w-10 justify-center" : "gap-3 px-3 py-2",
-                isActive
-                  ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                  : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
-              )}
-            >
-              <Icon className="h-4 w-4 shrink-0" />
-              {collapsed ? (
-                <span className="sr-only">{t(item.labelKey)}</span>
-              ) : (
-                t(item.labelKey)
-              )}
-            </Link>
-          );
-          if (!collapsed) return link;
-          return (
-            <Tooltip key={item.href}>
-              <TooltipTrigger asChild>{link}</TooltipTrigger>
-              <TooltipContent side="right">{t(item.labelKey)}</TooltipContent>
-            </Tooltip>
-          );
-        })}
-      </nav>
-
-      {!collapsed && (
-        <div className="px-2 py-2">
-          <ExtensionsSidebarSection />
-        </div>
-      )}
-
-      {!collapsed && (
-        <div className="space-y-2 px-3 py-2">
-          <DevDatabaseLink />
-          <FeedbackButton />
-          <OrgSwitcher />
-        </div>
-      )}
-    </aside>
-  );
-}