@genfeedai/workflow-ui 0.1.3 → 0.1.5

package/dist/canvas.d.mts

@@ -1,12 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NodeTypes, EdgeProps } from '@xyflow/react';
+import { WorkflowNode } from '@genfeedai/types';
 import * as react from 'react';
 
 interface WorkflowCanvasProps {
     /** Override default node types. Pass merged core + cloud nodeTypes here. */
     nodeTypes?: NodeTypes;
+    /** Optional callback for download-as-ZIP of selected nodes */
+    onDownloadAsZip?: (nodes: WorkflowNode[]) => void;
 }
-declare function WorkflowCanvas({ nodeTypes: nodeTypesProp }?: WorkflowCanvasProps): react_jsx_runtime.JSX.Element;
+declare function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip }?: WorkflowCanvasProps): react_jsx_runtime.JSX.Element;
 
 interface HelperLinesProps {
     draggingNodeId: string | null;
@@ -24,4 +27,15 @@ declare function ShortcutHelpModal(): react_jsx_runtime.JSX.Element | null;
 declare function PauseEdgeComponent({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, data, }: EdgeProps): react_jsx_runtime.JSX.Element;
 declare const PauseEdge: react.MemoExoticComponent<typeof PauseEdgeComponent>;
 
-export { GroupOverlay, HelperLines, NodeSearch, PauseEdge, ShortcutHelpModal, WorkflowCanvas };
+declare function ConnectionDropMenuComponent(): react_jsx_runtime.JSX.Element | null;
+declare const ConnectionDropMenu: react.MemoExoticComponent<typeof ConnectionDropMenuComponent>;
+
+declare function EditableEdgeComponent({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, data, selected, }: EdgeProps): react_jsx_runtime.JSX.Element;
+declare const EditableEdge: react.MemoExoticComponent<typeof EditableEdgeComponent>;
+
+declare function EdgeToolbarComponent(): react_jsx_runtime.JSX.Element | null;
+declare const EdgeToolbar: react.MemoExoticComponent<typeof EdgeToolbarComponent>;
+
+declare function ReferenceEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, source, target, }: EdgeProps): react_jsx_runtime.JSX.Element;
+
+export { ConnectionDropMenu, EdgeToolbar, EditableEdge, GroupOverlay, HelperLines, NodeSearch, PauseEdge, ReferenceEdge, ShortcutHelpModal, WorkflowCanvas };

package/dist/canvas.mjs

@@ -1,16 +1,18 @@
-export { GroupOverlay, HelperLines, NodeSearch, PauseEdge, ShortcutHelpModal, WorkflowCanvas } from './chunk-7P2JWDC7.mjs';
-import './chunk-E3YBVMYZ.mjs';
+export { ConnectionDropMenu, EdgeToolbar, EditableEdge, GroupOverlay, HelperLines, NodeSearch, PauseEdge, ReferenceEdge, ShortcutHelpModal, WorkflowCanvas } from './chunk-O5II6BOJ.mjs';
+import './chunk-PANZDSP6.mjs';
 import './chunk-ZJD5WMR3.mjs';
-import './chunk-E323WAZG.mjs';
-import './chunk-IASLG6IA.mjs';
-import './chunk-AOTUCJMA.mjs';
+import './chunk-6PSJTBNV.mjs';
+import './chunk-JTPADIUO.mjs';
+import './chunk-OY7BRSGG.mjs';
+import './chunk-ZD2BADZO.mjs';
+import './chunk-GWBGK3KL.mjs';
 import './chunk-7SKSRSS7.mjs';
 import './chunk-EFXQT23N.mjs';
 import './chunk-CV4M7CNU.mjs';
+import './chunk-PCIWWD37.mjs';
 import './chunk-LDN7IX4Y.mjs';
-import './chunk-SQK4JDYY.mjs';
-import './chunk-RIGVIEYB.mjs';
+import './chunk-LT3ZJJL6.mjs';
+import './chunk-R727OFBR.mjs';
 import './chunk-MLJJBBTB.mjs';
 import './chunk-FT33LFII.mjs';
 import './chunk-VRN3UWE5.mjs';
-import './chunk-ZJWP5KGZ.mjs';

package/dist/chunk-6PSJTBNV.mjs

@@ -0,0 +1,638 @@
+import { memo, useRef, useState, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/lib/mediaExtraction.ts
+function getMediaFromNode(nodeType, data) {
+  switch (nodeType) {
+    case "imageGen": {
+      const imgData = data;
+      const urls = imgData.outputImages?.length ? imgData.outputImages : [];
+      return {
+        url: imgData.outputImage,
+        urls,
+        type: imgData.outputImage || urls.length ? "image" : null
+      };
+    }
+    case "videoGen": {
+      const vidData = data;
+      return { url: vidData.outputVideo, type: vidData.outputVideo ? "video" : null };
+    }
+    case "imageInput": {
+      const inputData = data;
+      return { url: inputData.image, type: inputData.image ? "image" : null };
+    }
+    case "videoInput": {
+      const vidInputData = data;
+      return { url: vidInputData.video, type: vidInputData.video ? "video" : null };
+    }
+    case "motionControl": {
+      const mcData = data;
+      return { url: mcData.outputVideo, type: mcData.outputVideo ? "video" : null };
+    }
+    case "download": {
+      const outData = data;
+      if (outData.inputVideo) {
+        return { url: outData.inputVideo, type: "video" };
+      }
+      if (outData.inputImage) {
+        return { url: outData.inputImage, type: "image" };
+      }
+      return { url: null, type: null };
+    }
+    default:
+      return { url: null, type: null };
+  }
+}
+
+// src/lib/schemaHandles.ts
+var HANDLE_FIELDS = /* @__PURE__ */ new Set([
+  // Text inputs
+  "prompt",
+  "negative_prompt",
+  "subject_reference",
+  // Image inputs (single)
+  "image",
+  "image_input",
+  "start_image",
+  "first_frame_image",
+  "end_image",
+  "last_frame",
+  "mask",
+  "mask_image",
+  "control_image",
+  "init_image",
+  "subject_image",
+  "face_image",
+  "style_image",
+  "pose_image",
+  "image_url",
+  "tail_image_url",
+  // Image inputs (array)
+  "reference_images",
+  // Video inputs
+  "video",
+  "video_url",
+  // Audio inputs
+  "audio",
+  "audio_url"
+]);
+var FIELD_TO_HANDLE_TYPE = {
+  // Text fields
+  prompt: "text",
+  negative_prompt: "text",
+  subject_reference: "text",
+  // Image fields (single)
+  image: "image",
+  image_input: "image",
+  start_image: "image",
+  first_frame_image: "image",
+  end_image: "image",
+  last_frame: "image",
+  mask: "image",
+  mask_image: "image",
+  control_image: "image",
+  init_image: "image",
+  subject_image: "image",
+  face_image: "image",
+  style_image: "image",
+  pose_image: "image",
+  image_url: "image",
+  tail_image_url: "image",
+  // Image fields (array)
+  reference_images: "image",
+  // Video fields
+  video: "video",
+  video_url: "video",
+  // Audio fields
+  audio: "audio",
+  audio_url: "audio"
+};
+function generateHandlesFromSchema(inputSchema, staticHandles) {
+  if (!inputSchema) return staticHandles;
+  const schema = inputSchema;
+  if (!schema.properties) return staticHandles;
+  const staticIds = new Set(staticHandles.map((h) => h.id));
+  const dynamicHandles = [];
+  for (const [fieldName, prop] of Object.entries(schema.properties)) {
+    if (!HANDLE_FIELDS.has(fieldName) || staticIds.has(fieldName)) continue;
+    const handleType = FIELD_TO_HANDLE_TYPE[fieldName];
+    if (!handleType) continue;
+    const label = prop.title || fieldName.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+    dynamicHandles.push({
+      id: fieldName,
+      type: handleType,
+      label,
+      multiple: prop.type === "array",
+      required: schema.required?.includes(fieldName),
+      fromSchema: true
+    });
+  }
+  return [...staticHandles, ...dynamicHandles];
+}
+function isSchemaHandle(handle) {
+  return handle.fromSchema === true;
+}
+
+// src/lib/models/registry.ts
+var IMAGE_MODELS = [
+  { value: "nano-banana", label: "Nano Banana", apiId: "google/nano-banana" },
+  { value: "nano-banana-pro", label: "Nano Banana Pro", apiId: "google/nano-banana-pro" }
+];
+var IMAGE_MODEL_MAP = Object.fromEntries(
+  IMAGE_MODELS.map((m) => [m.apiId, m.value])
+);
+var IMAGE_MODEL_ID_MAP = Object.fromEntries(
+  IMAGE_MODELS.map((m) => [m.value, m.apiId])
+);
+var DEFAULT_IMAGE_MODEL = "nano-banana-pro";
+var VIDEO_MODELS = [
+  {
+    value: "veo-3.1-fast",
+    label: "Veo 3.1 Fast",
+    description: "Fast",
+    apiId: "google/veo-3.1-fast"
+  },
+  { value: "veo-3.1", label: "Veo 3.1", description: "High quality", apiId: "google/veo-3.1" }
+];
+var VIDEO_MODEL_MAP = Object.fromEntries(
+  VIDEO_MODELS.map((m) => [m.apiId, m.value])
+);
+var VIDEO_MODEL_ID_MAP = Object.fromEntries(
+  VIDEO_MODELS.map((m) => [m.value, m.apiId])
+);
+var DEFAULT_VIDEO_MODEL = "veo-3.1-fast";
+var LIPSYNC_MODELS = [
+  { value: "bytedance/omni-human", label: "OmniHuman (Image)", supportsImage: true },
+  { value: "veed/fabric-1.0", label: "VEED Fabric (Image)", supportsImage: true },
+  { value: "sync/lipsync-2-pro", label: "Sync Labs Pro (Video)", supportsImage: false },
+  { value: "sync/lipsync-2", label: "Sync Labs (Video)", supportsImage: false },
+  { value: "pixverse/lipsync", label: "Pixverse", supportsImage: true }
+];
+var LIPSYNC_SYNC_MODES = [
+  { value: "loop", label: "Loop" },
+  { value: "bounce", label: "Bounce" },
+  { value: "cut_off", label: "Cut Off" },
+  { value: "silence", label: "Silence" },
+  { value: "remap", label: "Remap" }
+];
+var DEFAULT_LIPSYNC_MODEL = "bytedance/omni-human";
+var LLM_MODELS = [
+  {
+    value: "meta-llama-3.1-405b-instruct",
+    label: "Llama 3.1 405B",
+    apiId: "meta/meta-llama-3.1-405b-instruct"
+  },
+  {
+    value: "claude-4.5-sonnet",
+    label: "Claude 4.5 Sonnet",
+    apiId: "anthropic/claude-4.5-sonnet"
+  }
+];
+var LLM_MODEL_MAP = Object.fromEntries(
+  LLM_MODELS.map((m) => [m.apiId, m.value])
+);
+var LLM_MODEL_ID_MAP = Object.fromEntries(
+  LLM_MODELS.map((m) => [m.value, m.apiId])
+);
+var DEFAULT_LLM_MODEL = "meta-llama-3.1-405b-instruct";
+function getImageModelLabel(model) {
+  return IMAGE_MODELS.find((m) => m.value === model)?.label ?? model;
+}
+function getVideoModelLabel(model) {
+  return VIDEO_MODELS.find((m) => m.value === model)?.label ?? model;
+}
+function getLipSyncModelLabel(model) {
+  return LIPSYNC_MODELS.find((m) => m.value === model)?.label ?? model;
+}
+function getLLMModelLabel(model) {
+  return LLM_MODELS.find((m) => m.value === model)?.label ?? model;
+}
+function lipSyncModelSupportsImage(model) {
+  return LIPSYNC_MODELS.find((m) => m.value === model)?.supportsImage ?? false;
+}
+
+// src/lib/easing.ts
+var EASING_PRESETS = {
+  // Linear - no easing
+  linear: [0, 0, 1, 1],
+  // Standard easing functions
+  easeIn: [0.42, 0, 1, 1],
+  easeOut: [0, 0, 0.58, 1],
+  easeInOut: [0.42, 0, 0.58, 1],
+  // Quadratic easing
+  easeInQuad: [0.55, 0.085, 0.68, 0.53],
+  easeOutQuad: [0.25, 0.46, 0.45, 0.94],
+  easeInOutQuad: [0.455, 0.03, 0.515, 0.955],
+  // Cubic easing
+  easeInCubic: [0.55, 0.055, 0.675, 0.19],
+  easeOutCubic: [0.215, 0.61, 0.355, 1],
+  easeInOutCubic: [0.645, 0.045, 0.355, 1],
+  // Exponential easing
+  easeInExpo: [0.95, 0.05, 0.795, 0.035],
+  easeOutExpo: [0.19, 1, 0.22, 1],
+  easeInOutExpo: [1, 0, 0, 1]
+};
+var DEFAULT_CUSTOM_BEZIER = [0.42, 0, 0.58, 1];
+var PRESET_BEZIERS = {
+  easeInExpoOutCubic: [0.85, 0, 0.15, 1],
+  easeInOutExpo: [0.87, 0, 0.13, 1],
+  easeInQuartOutQuad: [0.8, 0, 0.2, 1],
+  easeInOutCubic: [0.65, 0, 0.35, 1],
+  easeInOutSine: [0.37, 0, 0.63, 1]
+};
+var EASING_BEZIER_MAP = {
+  ...PRESET_BEZIERS,
+  linear: [0, 0, 1, 1],
+  easeInSine: [0.12, 0, 0.39, 0],
+  easeOutSine: [0.61, 1, 0.88, 1],
+  easeInQuad: [0.11, 0, 0.5, 0],
+  easeOutQuad: [0.5, 1, 0.89, 1],
+  easeInOutQuad: [0.45, 0, 0.55, 1],
+  easeInCubic: [0.32, 0, 0.67, 0],
+  easeOutCubic: [0.33, 1, 0.68, 1],
+  easeInQuart: [0.5, 0, 0.75, 0],
+  easeOutQuart: [0.25, 1, 0.5, 1],
+  easeInOutQuart: [0.76, 0, 0.24, 1],
+  easeInQuint: [0.64, 0, 0.78, 0],
+  easeOutQuint: [0.22, 1, 0.36, 1],
+  easeInOutQuint: [0.83, 0, 0.17, 1],
+  easeInExpo: [0.7, 0, 0.84, 0],
+  easeOutExpo: [0.16, 1, 0.3, 1],
+  easeInCirc: [0.55, 0, 1, 0.45],
+  easeOutCirc: [0, 0.55, 0.45, 1],
+  easeInOutCirc: [0.85, 0, 0.15, 1]
+};
+function getPresetBezier(preset) {
+  const handles = preset ? PRESET_BEZIERS[preset] : null;
+  const source = handles ?? DEFAULT_CUSTOM_BEZIER;
+  return [...source];
+}
+function getEasingBezier(name) {
+  const handles = name ? EASING_BEZIER_MAP[name] : null;
+  const source = handles ?? DEFAULT_CUSTOM_BEZIER;
+  return [...source];
+}
+function createAsymmetricEase(easeIn, easeOut) {
+  return (t) => {
+    if (t <= 0.5) {
+      return 0.5 * easeIn(t * 2);
+    }
+    return 0.5 + 0.5 * easeOut((t - 0.5) * 2);
+  };
+}
+var baseEasing = {
+  linear: (t) => t,
+  easeInQuad: (t) => t * t,
+  easeOutQuad: (t) => t * (2 - t),
+  easeInOutQuad: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
+  easeInCubic: (t) => t * t * t,
+  easeOutCubic: (t) => {
+    const t1 = t - 1;
+    return t1 * t1 * t1 + 1;
+  },
+  easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2,
+  easeInQuart: (t) => t * t * t * t,
+  easeOutQuart: (t) => {
+    const t1 = t - 1;
+    return 1 - t1 * t1 * t1 * t1;
+  },
+  easeInOutQuart: (t) => t < 0.5 ? 8 * t * t * t * t : 1 - (-2 * t + 2) ** 4 / 2,
+  easeInQuint: (t) => t * t * t * t * t,
+  easeOutQuint: (t) => {
+    const t1 = t - 1;
+    return 1 + t1 * t1 * t1 * t1 * t1;
+  },
+  easeInOutQuint: (t) => t < 0.5 ? 16 * t * t * t * t * t : 1 - (-2 * t + 2) ** 5 / 2,
+  easeInSine: (t) => 1 - Math.cos(t * Math.PI / 2),
+  easeOutSine: (t) => Math.sin(t * Math.PI / 2),
+  easeInOutSine: (t) => -(Math.cos(Math.PI * t) - 1) / 2,
+  easeInExpo: (t) => t === 0 ? 0 : 2 ** (10 * t - 10),
+  easeOutExpo: (t) => t === 1 ? 1 : 1 - 2 ** (-10 * t),
+  easeInOutExpo: (t) => t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? 2 ** (20 * t - 10) / 2 : (2 - 2 ** (-20 * t + 10)) / 2,
+  easeInCirc: (t) => 1 - Math.sqrt(1 - t ** 2),
+  easeOutCirc: (t) => Math.sqrt(1 - (t - 1) ** 2),
+  easeInOutCirc: (t) => t < 0.5 ? (1 - Math.sqrt(1 - (2 * t) ** 2)) / 2 : (Math.sqrt(1 - (-2 * t + 2) ** 2) + 1) / 2
+};
+var hybridEasing = {
+  easeInExpoOutCubic: createAsymmetricEase(baseEasing.easeInExpo, baseEasing.easeOutCubic),
+  easeInQuartOutQuad: createAsymmetricEase(baseEasing.easeInQuart, baseEasing.easeOutQuad)
+};
+var easing = {
+  ...baseEasing,
+  ...hybridEasing
+};
+function createBezierEasing(p1x, p1y, p2x, p2y) {
+  const clamp = (value) => Math.min(1, Math.max(0, value));
+  const x1 = clamp(p1x);
+  const y1 = clamp(p1y);
+  const x2 = clamp(p2x);
+  const y2 = clamp(p2y);
+  const cx = 3 * x1;
+  const bx = 3 * (x2 - x1) - cx;
+  const ax = 1 - cx - bx;
+  const cy = 3 * y1;
+  const by = 3 * (y2 - y1) - cy;
+  const ay = 1 - cy - by;
+  const sampleCurveX = (t) => ((ax * t + bx) * t + cx) * t;
+  const sampleCurveY = (t) => ((ay * t + by) * t + cy) * t;
+  const sampleDerivativeX = (t) => (3 * ax * t + 2 * bx) * t + cx;
+  const solveCurveX = (x) => {
+    let t2 = x;
+    const epsilon = 1e-6;
+    for (let i = 0; i < 8; i++) {
+      const x2err = sampleCurveX(t2) - x;
+      if (Math.abs(x2err) < epsilon) return t2;
+      const d2 = sampleDerivativeX(t2);
+      if (Math.abs(d2) < epsilon) break;
+      t2 -= x2err / d2;
+    }
+    let t0 = 0;
+    let t1 = 1;
+    t2 = x;
+    while (t0 < t1) {
+      const x2err = sampleCurveX(t2);
+      if (Math.abs(x2err - x) < epsilon) return t2;
+      if (x > x2err) t0 = t2;
+      else t1 = t2;
+      t2 = (t1 + t0) / 2;
+    }
+    return t2;
+  };
+  return (t) => {
+    const clamped = clamp(t);
+    return sampleCurveY(solveCurveX(clamped));
+  };
+}
+function getEasingFunction(name) {
+  const func = easing[name];
+  if (!func) return easing.linear;
+  return func;
+}
+function getAllEasingNames() {
+  return Object.keys(easing);
+}
+function evaluateBezier(t, curve) {
+  const [x1, y1, x2, y2] = curve;
+  const epsilon = 1e-6;
+  let guess = t;
+  for (let i = 0; i < 8; i++) {
+    const x = 3 * (1 - guess) * (1 - guess) * guess * x1 + 3 * (1 - guess) * guess * guess * x2 + guess * guess * guess - t;
+    if (Math.abs(x) < epsilon) break;
+    const dx = 3 * (1 - guess) * (1 - guess) * x1 + 6 * (1 - guess) * guess * (x2 - x1) + 3 * guess * guess * (1 - x2);
+    guess -= x / dx;
+  }
+  return 3 * (1 - guess) * (1 - guess) * guess * y1 + 3 * (1 - guess) * guess * guess * y2 + guess * guess * guess;
+}
+function applySpeedCurve(duration, curve, sampleRate = 60) {
+  const timestamps = [];
+  for (let i = 0; i <= sampleRate; i++) {
+    const t = i / sampleRate;
+    const easedT = evaluateBezier(t, curve);
+    timestamps.push(easedT * duration);
+  }
+  return timestamps;
+}
+var EASING_DISPLAY_NAMES = {
+  linear: "Linear",
+  easeIn: "Ease In",
+  easeOut: "Ease Out",
+  easeInOut: "Ease In Out",
+  easeInQuad: "Ease In Quadratic",
+  easeOutQuad: "Ease Out Quadratic",
+  easeInOutQuad: "Ease In Out Quadratic",
+  easeInCubic: "Ease In Cubic",
+  easeOutCubic: "Ease Out Cubic",
+  easeInOutCubic: "Ease In Out Cubic",
+  easeInQuart: "Ease In Quartic",
+  easeOutQuart: "Ease Out Quartic",
+  easeInOutQuart: "Ease In Out Quartic",
+  easeInQuint: "Ease In Quintic",
+  easeOutQuint: "Ease Out Quintic",
+  easeInOutQuint: "Ease In Out Quintic",
+  easeInSine: "Ease In Sine",
+  easeOutSine: "Ease Out Sine",
+  easeInOutSine: "Ease In Out Sine",
+  easeInExpo: "Ease In Exponential",
+  easeOutExpo: "Ease Out Exponential",
+  easeInOutExpo: "Ease In Out Exponential",
+  easeInCirc: "Ease In Circular",
+  easeOutCirc: "Ease Out Circular",
+  easeInOutCirc: "Ease In Out Circular",
+  easeInExpoOutCubic: "Expo In \u2192 Cubic Out",
+  easeInQuartOutQuad: "Quart In \u2192 Quad Out"
+};
+function getEasingDisplayName(preset) {
+  return EASING_DISPLAY_NAMES[preset] || preset;
+}
+var PADDING = 16;
+var POINT_RADIUS = 8;
+function CubicBezierEditorComponent({
+  value,
+  onChange,
+  onCommit,
+  disabled = false,
+  width = 240,
+  height = 240
+}) {
+  const svgRef = useRef(null);
+  const [dragging, setDragging] = useState(null);
+  const plotW = width - PADDING * 2;
+  const plotH = height - PADDING * 2;
+  const toSVG = useCallback(
+    (x, y) => [
+      PADDING + x * plotW,
+      PADDING + (1 - y) * plotH
+    ],
+    [plotW, plotH]
+  );
+  const fromSVG = useCallback(
+    (svgX, svgY) => {
+      const x = Math.max(0, Math.min(1, (svgX - PADDING) / plotW));
+      const y = Math.max(-0.5, Math.min(1.5, 1 - (svgY - PADDING) / plotH));
+      return [x, y];
+    },
+    [plotW, plotH]
+  );
+  const getSVGPoint = useCallback(
+    (e) => {
+      const svg = svgRef.current;
+      if (!svg) return [0, 0];
+      const rect = svg.getBoundingClientRect();
+      return [e.clientX - rect.left, e.clientY - rect.top];
+    },
+    []
+  );
+  const handlePointerDown = useCallback(
+    (point) => (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setDragging(point);
+      e.target.setPointerCapture(e.pointerId);
+    },
+    [disabled]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!dragging || disabled) return;
+      const [svgX, svgY] = getSVGPoint(e);
+      const [x, y] = fromSVG(svgX, svgY);
+      const next = [...value];
+      if (dragging === 1) {
+        next[0] = x;
+        next[1] = y;
+      } else {
+        next[2] = x;
+        next[3] = y;
+      }
+      onChange(next);
+    },
+    [dragging, disabled, getSVGPoint, fromSVG, value, onChange]
+  );
+  const handlePointerUp = useCallback(() => {
+    if (dragging) {
+      setDragging(null);
+      onCommit?.(value);
+    }
+  }, [dragging, onCommit, value]);
+  const [p0x, p0y] = toSVG(0, 0);
+  const [p1x, p1y] = toSVG(value[0], value[1]);
+  const [p2x, p2y] = toSVG(value[2], value[3]);
+  const [p3x, p3y] = toSVG(1, 1);
+  const curvePath = `M ${p0x} ${p0y} C ${p1x} ${p1y}, ${p2x} ${p2y}, ${p3x} ${p3y}`;
+  const linearPath = `M ${p0x} ${p0y} L ${p3x} ${p3y}`;
+  const gridLines = [];
+  for (let i = 0; i <= 4; i++) {
+    const t = i / 4;
+    const [gx] = toSVG(t, 0);
+    const [, gy] = toSVG(0, t);
+    gridLines.push(
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: gx,
+          y1: PADDING,
+          x2: gx,
+          y2: height - PADDING,
+          stroke: "var(--border)",
+          strokeWidth: 1,
+          strokeDasharray: i === 0 || i === 4 ? void 0 : "2 4"
+        },
+        `v-${i}`
+      ),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: PADDING,
+          y1: gy,
+          x2: width - PADDING,
+          y2: gy,
+          stroke: "var(--border)",
+          strokeWidth: 1,
+          strokeDasharray: i === 0 || i === 4 ? void 0 : "2 4"
+        },
+        `h-${i}`
+      )
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "nodrag space-y-2", children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: svgRef,
+        width,
+        height,
+        className: `bg-[var(--background)] rounded border border-[var(--border)] ${disabled ? "opacity-50 pointer-events-none" : "cursor-crosshair"}`,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerUp,
+        children: [
+          gridLines,
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: linearPath,
+              fill: "none",
+              stroke: "var(--muted-foreground)",
+              strokeWidth: 1,
+              strokeDasharray: "4 4",
+              opacity: 0.3
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: p0x,
+              y1: p0y,
+              x2: p1x,
+              y2: p1y,
+              stroke: "var(--primary)",
+              strokeWidth: 1,
+              opacity: 0.5
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: p3x,
+              y1: p3y,
+              x2: p2x,
+              y2: p2y,
+              stroke: "var(--primary)",
+              strokeWidth: 1,
+              opacity: 0.5
+            }
+          ),
+          /* @__PURE__ */ jsx("path", { d: curvePath, fill: "none", stroke: "var(--primary)", strokeWidth: 2.5 }),
+          /* @__PURE__ */ jsx("circle", { cx: p0x, cy: p0y, r: 3, fill: "var(--foreground)" }),
+          /* @__PURE__ */ jsx("circle", { cx: p3x, cy: p3y, r: 3, fill: "var(--foreground)" }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: p1x,
+              cy: p1y,
+              r: POINT_RADIUS,
+              fill: "var(--primary)",
+              stroke: "var(--background)",
+              strokeWidth: 2,
+              className: disabled ? "" : "cursor-grab active:cursor-grabbing",
+              onPointerDown: handlePointerDown(1)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: p2x,
+              cy: p2y,
+              r: POINT_RADIUS,
+              fill: "var(--accent)",
+              stroke: "var(--background)",
+              strokeWidth: 2,
+              className: disabled ? "" : "cursor-grab active:cursor-grabbing",
+              onPointerDown: handlePointerDown(2)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[10px] text-[var(--muted-foreground)] font-mono px-1", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "P1: (",
+        value[0].toFixed(2),
+        ", ",
+        value[1].toFixed(2),
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "P2: (",
+        value[2].toFixed(2),
+        ", ",
+        value[3].toFixed(2),
+        ")"
+      ] })
+    ] })
+  ] });
+}
+var CubicBezierEditor = memo(CubicBezierEditorComponent);
+
+export { CubicBezierEditor, DEFAULT_CUSTOM_BEZIER, DEFAULT_IMAGE_MODEL, DEFAULT_LIPSYNC_MODEL, DEFAULT_LLM_MODEL, DEFAULT_VIDEO_MODEL, EASING_BEZIER_MAP, EASING_PRESETS, IMAGE_MODELS, IMAGE_MODEL_ID_MAP, IMAGE_MODEL_MAP, LIPSYNC_MODELS, LIPSYNC_SYNC_MODES, LLM_MODELS, LLM_MODEL_ID_MAP, LLM_MODEL_MAP, PRESET_BEZIERS, VIDEO_MODELS, VIDEO_MODEL_ID_MAP, VIDEO_MODEL_MAP, applySpeedCurve, createAsymmetricEase, createBezierEasing, easing, evaluateBezier, generateHandlesFromSchema, getAllEasingNames, getEasingBezier, getEasingDisplayName, getEasingFunction, getImageModelLabel, getLLMModelLabel, getLipSyncModelLabel, getMediaFromNode, getPresetBezier, getVideoModelLabel, isSchemaHandle, lipSyncModelSupportsImage };