@agent-native/core 0.85.7 → 0.86.0

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

@@ -1,287 +0,0 @@
-import { useT } from "@agent-native/core/client";
-import {
-  IconX,
-  IconCheck,
-  IconLoader2,
-  IconDatabase,
-  IconCloud,
-  IconChevronRight,
-} from "@tabler/icons-react";
-import { useState, useRef, useCallback } from "react";
-
-interface CloudUpgradeProps {
-  title?: string;
-  description?: string;
-  onClose?: () => void;
-}
-
-interface Provider {
-  id: string;
-  name: string;
-  descriptionKey: string;
-  urlPrefix: string;
-  needsAuthToken: boolean;
-  steps: string[];
-}
-
-const PROVIDERS: Provider[] = [
-  {
-    id: "turso",
-    name: "Turso",
-    descriptionKey: "raw.cloud.providers.sqliteEdge",
-    urlPrefix: "libsql://",
-    needsAuthToken: true,
-    steps: [
-      "Install CLI: curl -sSfL https://get.tur.so/install.sh | bash",
-      "Sign up / login: turso auth login (opens browser)",
-      "Create a database: turso db create my-app",
-      "Copy the URL: turso db show my-app --url → starts with libsql://",
-      "Create an auth token: turso db tokens create my-app → paste below",
-    ],
-  },
-  {
-    id: "neon",
-    name: "Neon",
-    descriptionKey: "raw.cloud.providers.serverlessPostgres",
-    urlPrefix: "postgres://",
-    needsAuthToken: false,
-    steps: [
-      "Go to console.neon.tech and sign up or log in",
-      'Click "New Project" → pick a name and region → click Create',
-      "On the project dashboard, find the Connection Details panel",
-      'Select "Connection string" tab → copy the postgres://... URL',
-      "Paste the full connection string (includes password) below",
-    ],
-  },
-  {
-    id: "supabase",
-    name: "Supabase",
-    descriptionKey: "raw.cloud.providers.firebaseAlternative",
-    urlPrefix: "postgres://",
-    needsAuthToken: false,
-    steps: [
-      "Go to supabase.com/dashboard and sign up or log in",
-      'Click "New Project" → set a name and database password → click Create',
-      "Wait for the project to finish provisioning (~30 seconds)",
-      "Go to Project Settings → Database → Connection string",
-      'Select "URI" tab → copy the postgres://... string (replace [YOUR-PASSWORD] with your DB password)',
-    ],
-  },
-  {
-    id: "d1",
-    name: "Cloudflare D1", // i18n-ignore stable provider name
-    descriptionKey: "raw.cloud.providers.sqliteCloudflareEdge",
-    urlPrefix: "d1://",
-    needsAuthToken: true,
-    steps: [
-      "Go to dash.cloudflare.com → Workers & Pages → D1 SQL Database",
-      'Click "Create" → name your database → click Create',
-      "Copy the Database ID from the database overview page",
-      "For the auth token: go to My Profile → API Tokens → Create Token",
-      'Select "Edit Cloudflare Workers" template → Create Token → copy it',
-      "Paste as: d1://<database-id> with the API token below",
-    ],
-  },
-];
-
-export function CloudUpgrade({
-  title = "Share Publicly",
-  description = "To share content publicly, connect a cloud database.",
-  onClose,
-}: CloudUpgradeProps) {
-  const t = useT();
-  const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
-  const [dbUrl, setDbUrl] = useState("");
-  const [authToken, setAuthToken] = useState("");
-  const [status, setStatus] = useState<
-    "idle" | "saving" | "polling" | "success" | "error"
-  >("idle");
-  const [errorMsg, setErrorMsg] = useState("");
-  const connectingRef = useRef(false);
-
-  const provider = PROVIDERS.find((p) => p.id === selectedProvider);
-
-  const handleConnect = useCallback(async () => {
-    if (connectingRef.current) return;
-    connectingRef.current = true;
-
-    if (!dbUrl.trim()) {
-      setErrorMsg(
-        "Database settings are deployment-level. Configure DATABASE_URL with your host and redeploy the app.",
-      );
-      setStatus("error");
-      connectingRef.current = false;
-      return;
-    }
-
-    try {
-      setStatus("error");
-      setErrorMsg("");
-      throw new Error(
-        "Database settings are deployment-level. Configure DATABASE_URL and DATABASE_AUTH_TOKEN with your host, redeploy, then check sharing again.",
-      );
-    } catch (e) {
-      setErrorMsg(
-        e instanceof Error ? e.message : t("raw.cloud.connectionFailed"),
-      );
-      setStatus("error");
-    } finally {
-      connectingRef.current = false;
-    }
-  }, [dbUrl, authToken, t]);
-
-  const isConnecting = status === "saving" || status === "polling";
-
-  return (
-    <div className="w-[calc(100%-2rem)] sm:w-full max-w-lg rounded-xl border border-zinc-200 bg-white p-4 sm:p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
-      {/* Header */}
-      <div className="mb-4 flex items-start justify-between">
-        <div className="flex items-center gap-2">
-          <IconCloud className="h-5 w-5 text-blue-500" />
-          <h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
-            {title}
-          </h3>
-        </div>
-        {onClose && (
-          <button
-            onClick={onClose}
-            aria-label="Close"
-            className="rounded-md p-1 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
-          >
-            <IconX className="h-4 w-4" />
-          </button>
-        )}
-      </div>
-
-      <p className="mb-5 text-sm text-zinc-500 dark:text-zinc-400">
-        {description}
-      </p>
-
-      {/* Provider selection */}
-      <div className="mb-5 grid grid-cols-1 sm:grid-cols-2 gap-2">
-        {PROVIDERS.map((p) => (
-          <button
-            key={p.id}
-            onClick={() => setSelectedProvider(p.id)}
-            className={`flex flex-col items-start rounded-lg border px-3 py-2.5 text-left transition-colors ${
-              selectedProvider === p.id
-                ? "border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-950/30"
-                : "border-zinc-200 hover:border-zinc-300 dark:border-zinc-700 dark:hover:border-zinc-600"
-            }`}
-          >
-            <span
-              className={`text-sm font-medium ${
-                selectedProvider === p.id
-                  ? "text-blue-700 dark:text-blue-300"
-                  : "text-zinc-900 dark:text-zinc-100"
-              }`}
-            >
-              {p.name}
-            </span>
-            <span className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">
-              {t(p.descriptionKey)}
-            </span>
-          </button>
-        ))}
-      </div>
-
-      {/* Provider setup steps */}
-      {provider && (
-        <div className="mb-5 rounded-lg border border-zinc-100 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-900">
-          <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
-            {t("raw.cloud.setupSteps")}
-          </p>
-          <ol className="space-y-1">
-            {provider.steps.map((step, i) => (
-              <li
-                key={i}
-                className="flex items-start gap-2 text-xs text-zinc-600 dark:text-zinc-300"
-              >
-                <IconChevronRight className="mt-0.5 h-3 w-3 shrink-0 text-zinc-400" />
-                <span className="font-mono">{step}</span>
-              </li>
-            ))}
-          </ol>
-        </div>
-      )}
-
-      {/* Credential inputs */}
-      <div className="space-y-3">
-        <div>
-          <label className="mb-1 block text-xs font-medium text-zinc-700 dark:text-zinc-300">
-            DATABASE_URL
-          </label>
-          <input
-            type="text"
-            placeholder={
-              provider?.urlPrefix
-                ? `${provider.urlPrefix}...`
-                : "libsql://... or postgres://..."
-            }
-            value={dbUrl}
-            onChange={(e) => setDbUrl(e.target.value)}
-            disabled={isConnecting}
-            className="w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500"
-          />
-        </div>
-
-        {(!provider || provider.needsAuthToken) && (
-          <div>
-            <label className="mb-1 block text-xs font-medium text-zinc-700 dark:text-zinc-300">
-              DATABASE_AUTH_TOKEN
-              {provider && !provider.needsAuthToken && (
-                <span className="ml-1 text-zinc-400">(optional)</span>
-              )}
-            </label>
-            <input
-              type="password"
-              placeholder={t("raw.cloud.authToken")}
-              value={authToken}
-              onChange={(e) => setAuthToken(e.target.value)}
-              disabled={isConnecting}
-              className="w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500"
-            />
-          </div>
-        )}
-      </div>
-
-      {/* Error message */}
-      {status === "error" && errorMsg && (
-        <p className="mt-3 text-xs text-red-600 dark:text-red-400">
-          {errorMsg}
-        </p>
-      )}
-
-      {/* Success message */}
-      {status === "success" && (
-        <div className="mt-3 flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400">
-          <IconCheck className="h-3.5 w-3.5" />
-          <span>{t("raw.cloud.connectedReloading")}</span>
-        </div>
-      )}
-
-      {/* Connect button */}
-      <button
-        onClick={handleConnect}
-        disabled={isConnecting || !dbUrl.trim() || status === "success"}
-        className="mt-4 flex w-full items-center justify-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        {isConnecting ? (
-          <>
-            <IconLoader2 className="h-4 w-4 animate-spin" />
-            <span>
-              {status === "saving"
-                ? t("raw.cloud.savingCredentials")
-                : t("raw.cloud.testingConnection")}
-            </span>
-          </>
-        ) : (
-          <>
-            <IconDatabase className="h-4 w-4" />
-            <span>{t("raw.cloud.testConnect")}</span>
-          </>
-        )}
-      </button>
-    </div>
-  );
-}

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

@@ -1,81 +0,0 @@
-/**
- * Presence bar showing active collaborators on a composition.
- *
- * Displays colored avatar circles with initials for each active user,
- * plus an agent activity indicator when the AI is editing.
- */
-
-import type { CollabUser } from "@agent-native/core/client";
-import { IconBolt } from "@tabler/icons-react";
-
-import { cn } from "@/lib/utils";
-
-interface CollabPresenceBarProps {
-  activeUsers: CollabUser[];
-  agentActive: boolean;
-  agentPresent: boolean;
-  className?: string;
-}
-
-function getInitials(name: string): string {
-  const parts = name.trim().split(/\s+/);
-  if (parts.length >= 2) {
-    return (parts[0][0] + parts[1][0]).toUpperCase();
-  }
-  return name.slice(0, 2).toUpperCase();
-}
-
-export function CollabPresenceBar({
-  activeUsers,
-  agentActive,
-  agentPresent,
-  className,
-}: CollabPresenceBarProps) {
-  // Filter out the agent from user avatars (handled separately)
-  const humanUsers = Array.from(
-    new Map(
-      activeUsers
-        .filter((u) => u.email !== "agent@system")
-        .map((user) => [user.email, user]),
-    ).values(),
-  );
-  const hasPresence = humanUsers.length > 0 || agentPresent;
-
-  if (!hasPresence) return null;
-
-  return (
-    <div className={cn("flex items-center gap-1.5", className)}>
-      {/* Human user avatars */}
-      {humanUsers.map((user) => (
-        <div
-          key={user.email}
-          className="flex items-center justify-center w-6 h-6 rounded-full text-[9px] font-semibold text-white shrink-0"
-          style={{ backgroundColor: user.color }}
-          title={`${user.name} (${user.email})`}
-        >
-          {getInitials(user.name)}
-        </div>
-      ))}
-
-      {/* Agent presence indicator */}
-      {agentPresent && (
-        <div
-          className={cn(
-            "flex items-center justify-center w-6 h-6 rounded-full shrink-0",
-            agentActive ? "bg-sky-500/20 ring-1 ring-sky-400/50" : "bg-muted",
-          )}
-          title={agentActive ? "AI is editing" : "AI agent connected"}
-        >
-          <IconBolt
-            size={12}
-            className={cn(
-              agentActive
-                ? "text-sky-400 animate-pulse"
-                : "text-muted-foreground",
-            )}
-          />
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,107 +0,0 @@
-import { useT } from "@agent-native/core/client";
-
-import { cn } from "@/lib/utils";
-
-export type CompSettings = {
-  durationInFrames: number;
-  fps: number;
-  width: number;
-  height: number;
-};
-
-const SIZE_PRESETS = [
-  { label: "Square", description: "1080×1080", width: 1080, height: 1080 },
-  { label: "Wide", description: "1920×1080", width: 1920, height: 1080 },
-] as const;
-
-type CompSettingsEditorProps = {
-  settings: CompSettings;
-  onChange: (patch: Partial<CompSettings>) => void;
-};
-
-export function CompSettingsEditor({
-  settings,
-  onChange,
-}: CompSettingsEditorProps) {
-  const t = useT();
-  const durationSeconds = +(settings.durationInFrames / settings.fps).toFixed(
-    2,
-  );
-
-  const handleDurationSeconds = (raw: string) => {
-    const seconds = parseFloat(raw);
-    if (isNaN(seconds)) return;
-    const clamped = Math.max(0.5, Math.min(600, seconds));
-    onChange({ durationInFrames: Math.round(clamped * settings.fps) });
-  };
-
-  return (
-    <div className="space-y-3 p-4 border-t">
-      <div className="space-y-3">
-        {/* Duration */}
-        <div className="space-y-1.5">
-          <label className="text-xs text-muted-foreground">Duration</label>
-          <div className="flex items-center gap-2">
-            <input
-              type="number"
-              step="0.5"
-              min="0.5"
-              max="600"
-              value={durationSeconds}
-              onChange={(e) => handleDurationSeconds(e.target.value)}
-              className="flex-1 text-xs bg-secondary border border-border rounded-lg px-3 py-2 text-foreground/80 font-mono focus:outline-none focus:ring-1 focus:ring-primary/40"
-            />
-            <span className="text-xs text-muted-foreground flex-shrink-0">
-              sec
-            </span>
-          </div>
-          <span className="text-[10px] text-muted-foreground/45 font-mono">
-            {settings.durationInFrames}f · {durationSeconds}s · {settings.fps}
-            fps
-          </span>
-        </div>
-
-        {/* Size presets */}
-        <div className="space-y-1.5">
-          <label className="text-xs text-muted-foreground">
-            {t("raw.compositionSettings.outputSize")}
-          </label>
-          <div className="flex gap-1">
-            {SIZE_PRESETS.map((preset) => {
-              const active =
-                settings.width === preset.width &&
-                settings.height === preset.height;
-              return (
-                <button
-                  key={preset.label}
-                  onClick={() =>
-                    onChange({ width: preset.width, height: preset.height })
-                  }
-                  className={cn(
-                    "flex-1 flex flex-col items-center py-1.5 rounded-lg border",
-                    active
-                      ? "bg-primary/15 border-primary/40 text-primary"
-                      : "bg-secondary border-border text-muted-foreground hover:border-primary/30 hover:text-foreground/70",
-                  )}
-                >
-                  <span className="text-[10px] font-medium">
-                    {preset.label}
-                  </span>
-                  <span className="text-[9px] font-mono opacity-60">
-                    {preset.description}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-          <div className="text-[10px] text-muted-foreground/60">
-            Output:{" "}
-            <span className="font-mono">
-              {settings.width}×{settings.height}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}