@agent-native/core 0.85.7 → 0.86.0

package/corpus/templates/videos/actions/generate-animated-component.ts

@@ -1,470 +0,0 @@
-#!/usr/bin/env ts-node
-
-/**
- * Component Generator CLI
- *
- * Generates a Remotion composition with animated elements.
- *
- * Usage:
- *   npm run generate:component MyDashboard
- *   npm run generate:component MyDashboard --elements Button,Card,Panel
- */
-
-import * as fs from "fs";
-import * as path from "path";
-import { fileURLToPath } from "url";
-
-import { defineAction } from "@agent-native/core";
-import { z } from "zod";
-
-interface GeneratorOptions {
-  name: string;
-  elements: string[];
-  outputDir: string;
-}
-
-const TEMPLATE_COMPOSITION = (
-  name: string,
-  elements: string[],
-) => `import { AbsoluteFill } from "remotion";
-import { CameraHost } from "@/remotion/CameraHost";
-import type { AnimationTrack } from "@/types";
-import { findTrack } from "@/remotion/trackAnimation";
-import { useCurrentElement } from "@/contexts/CurrentElementContext";
-import { useEffect, useMemo, useState } from "react";
-import { AnimatedElement } from "@/remotion/components/AnimatedElement";
-import { initializeDefaultAnimations, AnimationPresets } from "@/remotion/utils/animationHelpers";
-import { useCursorHistory } from "@/remotion/hooks/useCursorHistory";
-${elements.map((el) => `import { ${name}${el} } from "./${name}${el}";`).join("\n")}
-import { FALLBACK_TRACKS } from "./${name}Config";
-
-initializeDefaultAnimations("${name.toLowerCase()}", [
-${elements
-  .map(
-    (el) => `  AnimationPresets.hoverLift("${el}"),
-  AnimationPresets.clickPress("${el}"),`,
-  )
-  .join("\n")}
-]);
-
-export interface ${name}Props {
-  tracks?: AnimationTrack[];
-}
-
-export function ${name}({ tracks = FALLBACK_TRACKS }: ${name}Props) {
-  const { setCurrentElement, getAnimationsForElement } = useCurrentElement();
-
-  const cursorTrack = findTrack(tracks, "cursor", FALLBACK_TRACKS[1]);
-  const cursorHistory = useCursorHistory(cursorTrack, 6);
-
-  const clickStartFrames = useMemo(() => {
-    const prop = cursorTrack?.animatedProps?.find(p => p.property === "isClicking");
-    return (prop?.keyframes ?? [])
-      .filter(kf => parseFloat(kf.value) > 0.5)
-      .map(kf => kf.frame);
-  }, [cursorTrack]);
-
-  const autoCursorType = undefined;
-
-  const [hoveredElement, setHoveredElement] = useState<string | null>(null);
-
-  const handleHoverChange = (elementId: string, hovered: boolean) => {
-    if (hovered) {
-      setHoveredElement(elementId);
-    } else if (hoveredElement === elementId) {
-      setHoveredElement(null);
-    }
-  };
-
-  useEffect(() => {
-    if (hoveredElement) {
-      const elementMap: Record<string, { type: string; label: string }> = {
-${elements.map((el) => `        "${el.toLowerCase()}": { type: "${el}", label: "${el}" },`).join("\n")}
-      };
-      const element = elementMap[hoveredElement];
-      if (element) {
-        setCurrentElement({
-          id: hoveredElement,
-          type: element.type,
-          label: element.label,
-          compositionId: "${name.toLowerCase()}"
-        });
-      }
-    } else {
-      setCurrentElement(null);
-    }
-  }, [hoveredElement, setCurrentElement]);
-
-  return (
-    <CameraHost tracks={tracks} autoCursorType={autoCursorType}>
-      <AbsoluteFill style={{ background: "#0D1519" }}>
-
-${elements
-  .map(
-    (el, i) => `
-        <AnimatedElement
-          id="${el.toLowerCase()}"
-          elementType="${el}"
-          label="${el}"
-          compositionId="${name.toLowerCase()}"
-          position={{ x: ${100 + i * 250}, y: 400 }}
-          size={{ width: 200, height: 100 }}
-          baseColor="#3b82f6"
-          cursorHistory={cursorHistory}
-          getAnimationsForElement={getAnimationsForElement}
-          cursorTrack={cursorTrack}
-          clickStartFrames={clickStartFrames}
-          onHoverChange={handleHoverChange}
-        >
-          {(animatedStyles) => (
-            <${name}${el} animatedStyles={animatedStyles} />
-          )}
-        </AnimatedElement>`,
-  )
-  .join("\n")}
-
-      </AbsoluteFill>
-    </CameraHost>
-  );
-}
-`;
-
-const TEMPLATE_ELEMENT = (compositionName: string, elementName: string) => `/**
- * ${compositionName} - ${elementName} Component
- */
-
-import type { AnimatedStyles } from "@/remotion/components/AnimatedElement";
-
-export interface ${compositionName}${elementName}Props {
-  animatedStyles: AnimatedStyles;
-}
-
-export function ${compositionName}${elementName}({
-  animatedStyles,
-}: ${compositionName}${elementName}Props) {
-  return (
-    <div
-      style={{
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: animatedStyles.backgroundColor,
-        borderColor: animatedStyles.borderColor,
-        borderWidth: animatedStyles.borderWidth,
-        borderStyle: "solid",
-        borderRadius: animatedStyles.borderRadius,
-        boxShadow: animatedStyles.boxShadow,
-        transform: animatedStyles.transform,
-        filter: animatedStyles.filter,
-        opacity: animatedStyles.opacity,
-        fontFamily: "Inter, sans-serif",
-        fontSize: 18,
-        fontWeight: 600,
-        color: "white",
-      }}
-    >
-      ${elementName}
-    </div>
-  );
-}
-`;
-
-const TEMPLATE_CONFIG = (name: string) => `/**
- * ${name} Configuration
- * Defines tracks, cursor path, and constants
- */
-
-import type { AnimationTrack } from "@/types";
-
-export const FALLBACK_TRACKS: AnimationTrack[] = [
-  {
-    id: "camera",
-    label: "Camera",
-    startFrame: 0,
-    endFrame: 300,
-    easing: "linear",
-    animatedProps: [
-      { property: "translateX", from: "0", to: "0", unit: "px", keyframes: [] },
-      { property: "translateY", from: "0", to: "0", unit: "px", keyframes: [] },
-      { property: "scale", from: "1", to: "1", unit: "", keyframes: [] },
-      { property: "rotateX", from: "0", to: "0", unit: "deg", keyframes: [] },
-      { property: "rotateY", from: "0", to: "0", unit: "deg", keyframes: [] },
-      { property: "perspective", from: "800", to: "800", unit: "px", keyframes: [] },
-    ],
-  },
-  {
-    id: "cursor",
-    label: "Cursor",
-    startFrame: 0,
-    endFrame: 300,
-    easing: "expo.inOut",
-    animatedProps: [
-      {
-        property: "x",
-        from: "0",
-        to: "0",
-        unit: "px",
-        keyframes: [
-          { frame: 0, value: "100", easing: "expo.inOut" },
-          { frame: 100, value: "500", easing: "expo.inOut" },
-          { frame: 200, value: "900", easing: "expo.inOut" },
-          { frame: 300, value: "100", easing: "expo.inOut" },
-        ],
-      },
-      {
-        property: "y",
-        from: "0",
-        to: "0",
-        unit: "px",
-        keyframes: [
-          { frame: 0, value: "540", easing: "expo.inOut" },
-          { frame: 100, value: "540", easing: "expo.inOut" },
-          { frame: 200, value: "540", easing: "expo.inOut" },
-          { frame: 300, value: "540", easing: "expo.inOut" },
-        ],
-      },
-      { property: "opacity", from: "1", to: "1", unit: "", keyframes: [] },
-      { property: "scale", from: "1", to: "1", unit: "", keyframes: [] },
-      { property: "type", from: "default", to: "default", unit: "", keyframes: [] },
-      {
-        property: "isClicking",
-        from: "0",
-        to: "0",
-        unit: "",
-        keyframes: [
-          { frame: 110, value: "1", easing: "linear" },
-          { frame: 112, value: "0", easing: "linear" },
-        ],
-      },
-    ],
-  },
-];
-`;
-
-const TEMPLATE_README = (
-  name: string,
-  elements: string[],
-) => `# ${name} Composition
-
-Auto-generated Remotion composition with animated elements.
-
-## Elements
-
-${elements.map((el) => `- **${el}**: Animated component with hover and click interactions`).join("\n")}
-
-## Customization
-
-1. **Edit element appearance**: Modify \`${name}*.tsx\` component files.
-2. **Add animations**: Use the Properties panel in the Video Studio UI.
-3. **Customize cursor path**: Edit the cursor track in \`${name}Config.ts\`.
-4. **Add more elements**: Create new components and register them in \`${name}.tsx\`.
-
-## Cursor Animation Pattern
-
-Define cursor animations as tracks so the editor, renderer, and generated output stay in sync.
-
-\`\`\`typescript
-{
-  id: "cursor",
-  animatedProps: [
-    { property: "x", keyframes: [...] },
-    { property: "y", keyframes: [...] },
-    { property: "type", keyframes: [...] },
-  ]
-}
-
-<CameraHost tracks={tracks}>
-  {/* Cursor renders automatically from track */}
-</CameraHost>
-\`\`\`
-
-## File Structure
-
-\`\`\`
-${name}/
-├── ${name}.tsx              # Main composition
-├── ${name}Config.ts         # Tracks and configuration
-${elements.map((el) => `├── ${name}${el}.tsx       # ${el} component`).join("\n")}
-└── README.md                # This file
-\`\`\`
-
-## Adding to Registry
-
-Add to \`app/remotion/registry.ts\`:
-
-\`\`\`typescript
-import { ${name} } from "@/remotion/compositions/${name}";
-
-{
-  id: "${name.toLowerCase()}",
-  title: "${name}",
-  description: "${name} composition",
-  component: ${name},
-  durationInFrames: 300,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  defaultProps: {} satisfies ${name}Props,
-  tracks: FALLBACK_TRACKS,
-}
-\`\`\`
-`;
-
-function generateComponent(options: GeneratorOptions): void {
-  const { name, elements, outputDir } = options;
-
-  console.log(`\nGenerating animated composition: ${name}`);
-  console.log(`Elements: ${elements.join(", ")}\n`);
-
-  // Create output directory
-  const compDir = path.join(outputDir, name);
-  if (!fs.existsSync(compDir)) {
-    fs.mkdirSync(compDir, { recursive: true });
-  } else {
-    console.error(`Directory already exists: ${compDir}`);
-    throw new Error("Script failed");
-  }
-
-  // Generate main composition file
-  const compositionPath = path.join(compDir, `${name}.tsx`);
-  fs.writeFileSync(compositionPath, TEMPLATE_COMPOSITION(name, elements));
-  console.log(`Created ${compositionPath}`);
-
-  // Generate config file
-  const configPath = path.join(compDir, `${name}Config.ts`);
-  fs.writeFileSync(configPath, TEMPLATE_CONFIG(name));
-  console.log(`Created ${configPath}`);
-
-  // Generate element components
-  elements.forEach((element) => {
-    const elementPath = path.join(compDir, `${name}${element}.tsx`);
-    fs.writeFileSync(elementPath, TEMPLATE_ELEMENT(name, element));
-    console.log(`Created ${elementPath}`);
-  });
-
-  // Generate README
-  const readmePath = path.join(compDir, "README.md");
-  fs.writeFileSync(readmePath, TEMPLATE_README(name, elements));
-  console.log(`Created ${readmePath}`);
-
-  console.log(`\nSuccessfully generated composition!`);
-  console.log(`\nNext steps:`);
-  console.log(`   1. Customize element components in ${compDir}/`);
-  console.log(`   2. Add to registry in app/remotion/registry.ts`);
-  console.log(`   3. Open in Video Studio UI to configure animations\n`);
-}
-
-function optionsFromArgs(args: {
-  name: string;
-  elements?: string;
-  output?: string;
-  outputDir?: string;
-}): GeneratorOptions {
-  return {
-    name: args.name,
-    elements: args.elements
-      ? args.elements
-          .split(",")
-          .map((element) => element.trim())
-          .filter(Boolean)
-      : ["Button", "Card"],
-    outputDir: args.outputDir || args.output || "app/remotion/compositions",
-  };
-}
-
-// Parse CLI arguments for direct `pnpm generate:component` usage.
-function parseCliArgs(args: string[]): GeneratorOptions | undefined {
-  if (args.length === 0 || args[0] === "--help") {
-    console.log(`
-Animated Component Generator
-
-Usage:
-  npm run generate:component <ComponentName> [options]
-  pnpm action generate-animated-component --name <ComponentName> [options]
-
-Options:
-  --name <ComponentName>           Component name for action usage
-  --elements <Element1,Element2>   Comma-separated list of element types (default: Button,Card)
-  --output <dir>                   Output directory (default: app/remotion/compositions)
-
-Examples:
-  npm run generate:component MyDashboard
-  npm run generate:component MyDashboard --elements Button,Card,Panel,Toggle
-  npm run generate:component MyApp --elements Hero,Feature,CTA --output src/components
-    `);
-    return;
-  }
-
-  const parsed: Record<string, string> = {};
-  let positionalName: string | undefined;
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (!arg.startsWith("--")) {
-      positionalName ??= arg;
-      continue;
-    }
-
-    const eqIdx = arg.indexOf("=");
-    if (eqIdx > 0) {
-      parsed[arg.slice(2, eqIdx)] = arg.slice(eqIdx + 1);
-      continue;
-    }
-
-    const key = arg.slice(2);
-    const next = args[i + 1];
-    if (next && !next.startsWith("--")) {
-      parsed[key] = next;
-      i++;
-    }
-  }
-
-  const name = parsed.name || positionalName;
-  if (!name) {
-    throw new Error("Component name is required");
-  }
-
-  return optionsFromArgs({
-    name,
-    elements: parsed.elements,
-    output: parsed.output,
-    outputDir: parsed.outputDir,
-  });
-}
-
-const action = defineAction({
-  description:
-    "Generate a new Remotion composition folder with animated element boilerplate.",
-  schema: z.object({
-    name: z.string().describe("Component/composition name, e.g. MyDashboard"),
-    elements: z
-      .string()
-      .optional()
-      .describe("Comma-separated element names, e.g. Button,Card,Panel"),
-    output: z.string().optional().describe("Output directory"),
-    outputDir: z.string().optional().describe("Output directory"),
-  }),
-  http: false,
-  run: async (args) => {
-    const options = optionsFromArgs(args);
-    generateComponent(options);
-    return {
-      name: options.name,
-      elements: options.elements,
-      outputDir: options.outputDir,
-    };
-  },
-});
-
-export default action;
-
-if (
-  process.argv[1] &&
-  path.resolve(process.argv[1]) === fileURLToPath(import.meta.url)
-) {
-  const options = parseCliArgs(process.argv.slice(2));
-  if (options) {
-    generateComponent(options);
-  }
-}

package/corpus/templates/videos/actions/get-composition.ts

@@ -1,36 +0,0 @@
-import { defineAction } from "@agent-native/core";
-import { resolveAccess } from "@agent-native/core/sharing";
-import { z } from "zod";
-
-import "../server/db/index.js"; // ensure registerShareableResource runs
-
-export default defineAction({
-  description: "Get a single composition by ID",
-  schema: z.object({
-    id: z.string().optional().describe("Composition ID"),
-  }),
-  http: { method: "GET" },
-  run: async (args) => {
-    if (!args.id) {
-      return { error: "Composition id is required" };
-    }
-
-    const access = await resolveAccess("composition", args.id);
-    if (!access) {
-      return { error: "Composition not found" };
-    }
-
-    const row = access.resource;
-    return {
-      id: row.id,
-      title: row.title,
-      type: row.type,
-      data: JSON.parse(row.data),
-      createdAt: row.createdAt,
-      updatedAt: row.updatedAt,
-      ownerEmail: row.ownerEmail,
-      orgId: row.orgId,
-      visibility: row.visibility,
-    };
-  },
-});

package/corpus/templates/videos/actions/get-design-system.ts

@@ -1,35 +0,0 @@
-import { defineAction } from "@agent-native/core";
-import { resolveAccess } from "@agent-native/core/sharing";
-import { z } from "zod";
-
-import "../server/db/index.js"; // ensure registerShareableResource runs
-
-export default defineAction({
-  description:
-    "Get a design system by ID. Returns full design system data including colors, typography, spacing, and assets.",
-  schema: z.object({
-    id: z.string().describe("Design system ID"),
-  }),
-  readOnly: true,
-  http: { method: "GET" },
-  run: async ({ id }) => {
-    const access = await resolveAccess("design-system", id);
-    if (!access) {
-      throw new Error("Design system not found");
-    }
-
-    const row = access.resource;
-    return {
-      id: row.id,
-      title: row.title,
-      description: row.description,
-      data: row.data ?? null,
-      assets: row.assets ?? null,
-      customInstructions: row.customInstructions ?? "",
-      isDefault: row.isDefault,
-      visibility: row.visibility,
-      createdAt: row.createdAt,
-      updatedAt: row.updatedAt,
-    };
-  },
-});

package/corpus/templates/videos/actions/import-code.ts

@@ -1,67 +0,0 @@
-import { defineAction } from "@agent-native/core";
-import {
-  createCodeAnalysisState,
-  analyzeCodeFile,
-  CODE_MAX_FILES,
-  CODE_MAX_TOTAL_BYTES,
-} from "@agent-native/core/server/design-token-utils";
-import { z } from "zod";
-
-export default defineAction({
-  description:
-    "Extract design tokens from raw code files uploaded from the browser. " +
-    "Analyzes CSS, Tailwind configs, JSON theme files, package.json, and " +
-    "TypeScript/JavaScript theme files to extract colors, fonts, spacing, " +
-    "border-radius, and CSS custom properties. Returns a structured summary " +
-    "the agent can use to create or update a design system.",
-  schema: z.object({
-    files: z
-      .array(
-        z.object({
-          filename: z.string().describe("File name or relative path"),
-          content: z.string().describe("Raw text content of the file"),
-        }),
-      )
-      .describe("Array of code files to analyze"),
-  }),
-  readOnly: true,
-  run: async ({ files }) => {
-    const truncated = files.slice(0, CODE_MAX_FILES);
-    let totalBytes = 0;
-    const accepted: { filename: string; content: string }[] = [];
-    for (const file of truncated) {
-      const size = new TextEncoder().encode(file.content).byteLength;
-      if (totalBytes + size > CODE_MAX_TOTAL_BYTES) break;
-      totalBytes += size;
-      accepted.push(file);
-    }
-
-    const state = createCodeAnalysisState();
-    const filesAnalyzed: string[] = [];
-
-    for (const file of accepted) {
-      filesAnalyzed.push(file.filename);
-      analyzeCodeFile(state, file.filename, file.content);
-    }
-
-    const cappedColors = Object.fromEntries(
-      Object.entries(state.colors).slice(0, 60),
-    );
-    const cappedCssProps = Object.fromEntries(
-      Object.entries(state.cssCustomProperties).slice(0, 80),
-    );
-
-    return {
-      source: "code" as const,
-      fileCount: accepted.length,
-      filesAnalyzed,
-      colors: cappedColors,
-      cssCustomProperties: cappedCssProps,
-      fonts: state.fonts.slice(0, 20),
-      spacing: state.spacing,
-      borderRadius: state.borderRadius,
-      stylingFramework: state.stylingFramework,
-      rawExtracts: state.rawExtracts,
-    };
-  },
-});

package/corpus/templates/videos/actions/import-design-project.ts

@@ -1,42 +0,0 @@
-import { defineAction } from "@agent-native/core";
-import { resolveAccess } from "@agent-native/core/sharing";
-import { z } from "zod";
-
-export default defineAction({
-  description:
-    "Import a design system from an existing design system for cloning/forking. " +
-    "Returns the design system's tokens and assets so the agent can create a " +
-    "new design system based on it.",
-  schema: z.object({
-    designSystemId: z.string().describe("Design system ID to import/fork from"),
-  }),
-  readOnly: true,
-  http: { method: "GET" },
-  run: async ({ designSystemId }) => {
-    const access = await resolveAccess("design-system", designSystemId);
-    if (!access) {
-      throw new Error("Design system not found");
-    }
-
-    const row = access.resource;
-    return {
-      source: "design-system" as const,
-      sourceId: row.id,
-      sourceTitle: row.title,
-      extractedTokens: {
-        cssCustomProperties: {},
-        colors: [],
-        fonts: [],
-        googleFontsLinks: [],
-        borderRadius: [],
-        spacing: [],
-      },
-      existingDesignSystem: {
-        id: row.id,
-        title: row.title,
-        data: row.data ? JSON.parse(row.data) : null,
-        assets: row.assets ? JSON.parse(row.assets) : null,
-      },
-    };
-  },
-});