@agent-native/core 0.163.4 → 0.164.1

package/corpus/templates/design/app/pages/design-editor/commands/toggle-motion-keyframe.ts

@@ -0,0 +1,99 @@
+import type { CodeLayerNode } from "@shared/code-layer";
+import type { MotionEase } from "@shared/motion-timeline";
+import {
+  MOTION_PROPERTY_PRESETS,
+  createMotionTrackFromPreset,
+  upsertMotionKeyframeAtTime,
+} from "@shared/motion-timeline";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+
+import type { MotionDockTrack } from "@/components/design/MotionDock";
+import type { ElementInfo } from "@/components/design/types";
+import {
+  MOTION_KEYFRAME_TIME_EPSILON,
+  computedMotionStyleValue,
+} from "@/pages/design-editor/motion-state";
+
+export interface ToggleMotionKeyframeArgs {
+  canEditDesign: boolean;
+  markMotionTracksDirty: () => void;
+  motionDefaultEase: string;
+  motionLivePlayheadRef: RefObject<number | null>;
+  motionPlayhead: number;
+  selectedCodeLayerNode: CodeLayerNode | null;
+  selectedElement: ElementInfo | null;
+  selectedMotionTargetNodeId: string | null;
+  setMotionTracks: Dispatch<SetStateAction<MotionDockTrack[]>>;
+}
+
+export function runToggleMotionKeyframe(
+  {
+    canEditDesign,
+    markMotionTracksDirty,
+    motionDefaultEase,
+    motionLivePlayheadRef,
+    motionPlayhead,
+    selectedCodeLayerNode,
+    selectedElement,
+    selectedMotionTargetNodeId,
+    setMotionTracks,
+  }: ToggleMotionKeyframeArgs,
+  cssProperty: string,
+) {
+  if (!canEditDesign || !selectedMotionTargetNodeId) return;
+  const preset = MOTION_PROPERTY_PRESETS.find(
+    (candidate) => candidate.property === cssProperty,
+  );
+  if (!preset) return;
+  const activePlayhead = motionLivePlayheadRef.current ?? motionPlayhead;
+  const playheadT = Math.max(0, Math.min(1, activePlayhead));
+  const currentValue =
+    computedMotionStyleValue(selectedElement?.computedStyles, cssProperty) ??
+    preset.to;
+  const label =
+    selectedCodeLayerNode?.layerName ||
+    selectedElement?.tagName ||
+    "Selected element";
+  setMotionTracks((current) => {
+    const existingIndex = current.findIndex(
+      (track) =>
+        track.targetNodeId === selectedMotionTargetNodeId &&
+        track.property === cssProperty,
+    );
+    const ease = motionDefaultEase as MotionEase;
+    if (existingIndex === -1) {
+      const track = createMotionTrackFromPreset(
+        selectedMotionTargetNodeId,
+        preset,
+        ease,
+      );
+      const seeded: MotionDockTrack = {
+        ...track,
+        label,
+        keyframes: upsertMotionKeyframeAtTime(
+          track.keyframes,
+          { t: playheadT, value: currentValue, ease },
+          MOTION_KEYFRAME_TIME_EPSILON,
+        ),
+      };
+      return [...current, seeded];
+    }
+    const track = current[existingIndex]!;
+    const existingAtPlayhead = track.keyframes.find(
+      (kf) => Math.abs(kf.t - playheadT) <= MOTION_KEYFRAME_TIME_EPSILON,
+    );
+    const nextKeyframes = existingAtPlayhead
+      ? track.keyframes.filter((kf) => kf !== existingAtPlayhead)
+      : upsertMotionKeyframeAtTime(
+          track.keyframes,
+          { t: playheadT, value: currentValue, ease },
+          MOTION_KEYFRAME_TIME_EPSILON,
+        );
+    return current.map((candidate, index) =>
+      index === existingIndex
+        ? { ...candidate, keyframes: nextKeyframes }
+        : candidate,
+    );
+  });
+  markMotionTracksDirty();
+}

package/corpus/templates/design/app/pages/design-editor/commands/tweak-prompt-submit.ts

@@ -0,0 +1,84 @@
+import type { PromptComposerSubmitOptions } from "@agent-native/core/client/composer";
+import type { TweakDefinition } from "@shared/api";
+import type { TweakSelections } from "@shared/resolve-tweaks";
+import { toast } from "sonner";
+
+import type { UploadedFile } from "@/components/editor/PromptDialog";
+import { sendToDesignAgentChat } from "@/lib/agent-chat";
+import { TWEAK_CONTROLS_EDIT_ACCESS_MESSAGE } from "@/pages/design-editor/editor-constants";
+import {
+  formatTweakDefinitionsContext,
+  formatUploadedFileContext,
+  imageAttachmentsFromUploadedFiles,
+} from "@/pages/design-editor/generation-prompt-directives";
+import type { DesignData, DesignFile } from "@/pages/design-editor/types";
+
+export interface TweakPromptSubmitArgs {
+  activeFile: DesignFile;
+  canEditDesign: boolean;
+  design: DesignData | null;
+  handleTweakPromptOpenChange: (open: boolean) => void;
+  id: string | undefined;
+  tweakSelections: TweakSelections;
+  tweaks: TweakDefinition[];
+}
+
+export function runTweakPromptSubmit(
+  {
+    activeFile,
+    canEditDesign,
+    design,
+    handleTweakPromptOpenChange,
+    id,
+    tweakSelections,
+    tweaks,
+  }: TweakPromptSubmitArgs,
+  prompt: string,
+  files: UploadedFile[],
+  options: PromptComposerSubmitOptions,
+) {
+  if (!canEditDesign) {
+    toast.error(TWEAK_CONTROLS_EDIT_ACCESS_MESSAGE);
+    return;
+  }
+  if (!design) return;
+  const trimmed = prompt.trim();
+  if (!trimmed) return;
+  const fileContext = formatUploadedFileContext(files);
+  const images = imageAttachmentsFromUploadedFiles(files);
+  const currentSelections =
+    Object.keys(tweakSelections).length > 0
+      ? JSON.stringify(tweakSelections, null, 2)
+      : "None yet.";
+  const context = [
+    `The user is in the Design editor tweaks panel for design id "${id}" (title: "${design.title}").`,
+    activeFile
+      ? `Active file: "${activeFile.filename}" (file id: "${activeFile.id}").`
+      : "There is no active file yet.",
+    `User request: "${trimmed}"`,
+    "",
+    "Existing tweak definitions:",
+    formatTweakDefinitionsContext(tweaks),
+    "",
+    "Current selected tweak values:",
+    currentSelections,
+    fileContext,
+    "",
+    "Add or update live tweak controls for this design. Keep existing useful tweak controls unless the user explicitly asks to replace them.",
+    "If a requested control needs a new CSS custom property, first read the live design with `get-design-snapshot`, update the relevant HTML/CSS so the property is used, then persist the complete updated tweak definition list through `generate-design`.",
+    "For tiny source changes, prefer `edit-design`, but make sure the tweak definitions are saved so the Tweaks panel updates.",
+  ].join("\n");
+
+  sendToDesignAgentChat({
+    message: `Add tweak controls to "${design.title}": ${trimmed}`,
+    context,
+    submit: true,
+    openSidebar: true,
+    newTab: true,
+    model: options.model,
+    engine: options.engine,
+    effort: options.effort,
+    images,
+  });
+  handleTweakPromptOpenChange(false);
+}