@clypra/ui 1.0.0

package/src/components/PresetManager/PresetManager.tsx

@@ -0,0 +1,420 @@
+/**
+ * PresetManager Component
+ *
+ * Create, load, save, and manage effect presets.
+ * Supports preset library, export/import JSON.
+ */
+
+import React, { useState } from "react";
+
+export interface Preset {
+  id: string;
+  name: string;
+  description?: string;
+  effectId: string;
+  parameters: Record<string, any>;
+  version: string;
+  createdAt: string;
+  updatedAt: string;
+  tags?: string[];
+}
+
+export interface PresetManagerProps {
+  /** Current effect being edited */
+  effect: {
+    id: string;
+    name: string;
+    version: string;
+  };
+  /** Current parameter values */
+  parameters: Record<string, any>;
+  /** Available presets for this effect */
+  presets?: Preset[];
+  /** Callback when preset is loaded */
+  onLoadPreset?: (preset: Preset) => void;
+  /** Callback when preset is saved */
+  onSavePreset?: (preset: Preset) => void;
+  /** Callback when preset is deleted */
+  onDeletePreset?: (presetId: string) => void;
+  /** Callback when preset is exported */
+  onExportPreset?: (preset: Preset) => void;
+  /** Callback when preset is imported */
+  onImportPreset?: (preset: Preset) => void;
+}
+
+export function PresetManager({ effect, parameters, presets = [], onLoadPreset, onSavePreset, onDeletePreset, onExportPreset, onImportPreset }: PresetManagerProps) {
+  const [selectedPreset, setSelectedPreset] = useState<Preset | null>(null);
+  const [isCreating, setIsCreating] = useState(false);
+  const [newPresetName, setNewPresetName] = useState("");
+  const [newPresetDescription, setNewPresetDescription] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filterTag, setFilterTag] = useState<string | null>(null);
+
+  // Get all unique tags from presets
+  const allTags = Array.from(new Set(presets.flatMap((p) => p.tags || []))).sort();
+
+  // Filter presets by search query and tag
+  const filteredPresets = presets.filter((preset) => {
+    const matchesSearch = searchQuery === "" || preset.name.toLowerCase().includes(searchQuery.toLowerCase()) || preset.description?.toLowerCase().includes(searchQuery.toLowerCase());
+
+    const matchesTag = filterTag === null || (preset.tags && preset.tags.includes(filterTag));
+
+    return matchesSearch && matchesTag;
+  });
+
+  const handleCreatePreset = () => {
+    if (!newPresetName.trim()) return;
+
+    const newPreset: Preset = {
+      id: `preset-${Date.now()}`,
+      name: newPresetName,
+      description: newPresetDescription,
+      effectId: effect.id,
+      parameters: { ...parameters },
+      version: effect.version,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      tags: [],
+    };
+
+    onSavePreset?.(newPreset);
+    setIsCreating(false);
+    setNewPresetName("");
+    setNewPresetDescription("");
+  };
+
+  const handleLoadPreset = (preset: Preset) => {
+    setSelectedPreset(preset);
+    onLoadPreset?.(preset);
+  };
+
+  const handleExportJSON = (preset: Preset) => {
+    const json = JSON.stringify(preset, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${preset.name.replace(/\s+/g, "-").toLowerCase()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    onExportPreset?.(preset);
+  };
+
+  const handleImportJSON = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json";
+    input.onchange = async (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+
+      const text = await file.text();
+      try {
+        const preset = JSON.parse(text) as Preset;
+        onImportPreset?.(preset);
+      } catch (error) {
+        console.error("Failed to import preset:", error);
+        alert("Invalid preset file");
+      }
+    };
+    input.click();
+  };
+
+  return (
+    <div
+      style={{
+        padding: "16px",
+        background: "#0f172a",
+        borderRadius: "8px",
+        border: "1px solid #334155",
+      }}
+    >
+      {/* Header */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "16px",
+        }}
+      >
+        <h3 style={{ margin: 0, color: "#f1f5f9", fontSize: "16px" }}>Preset Manager</h3>
+        <div style={{ display: "flex", gap: "8px" }}>
+          <button
+            onClick={() => setIsCreating(true)}
+            style={{
+              padding: "6px 12px",
+              background: "#3b82f6",
+              color: "white",
+              border: "none",
+              borderRadius: "6px",
+              cursor: "pointer",
+              fontSize: "14px",
+            }}
+          >
+            + New Preset
+          </button>
+          <button
+            onClick={handleImportJSON}
+            style={{
+              padding: "6px 12px",
+              background: "#475569",
+              color: "white",
+              border: "none",
+              borderRadius: "6px",
+              cursor: "pointer",
+              fontSize: "14px",
+            }}
+          >
+            Import
+          </button>
+        </div>
+      </div>
+
+      {/* Effect info */}
+      <div
+        style={{
+          marginBottom: "16px",
+          padding: "12px",
+          background: "#1e293b",
+          borderRadius: "6px",
+          fontSize: "14px",
+          color: "#94a3b8",
+        }}
+      >
+        <div>
+          <strong style={{ color: "#f1f5f9" }}>Effect:</strong> {effect.name}
+        </div>
+        <div>
+          <strong style={{ color: "#f1f5f9" }}>Version:</strong> {effect.version}
+        </div>
+      </div>
+
+      {/* Create preset form */}
+      {isCreating && (
+        <div
+          style={{
+            marginBottom: "16px",
+            padding: "12px",
+            background: "#1e293b",
+            borderRadius: "6px",
+            border: "2px solid #3b82f6",
+          }}
+        >
+          <input
+            type="text"
+            placeholder="Preset name"
+            value={newPresetName}
+            onChange={(e) => setNewPresetName(e.target.value)}
+            style={{
+              width: "100%",
+              padding: "8px",
+              marginBottom: "8px",
+              background: "#0f172a",
+              border: "1px solid #334155",
+              borderRadius: "4px",
+              color: "#f1f5f9",
+              fontSize: "14px",
+            }}
+          />
+          <textarea
+            placeholder="Description (optional)"
+            value={newPresetDescription}
+            onChange={(e) => setNewPresetDescription(e.target.value)}
+            rows={3}
+            style={{
+              width: "100%",
+              padding: "8px",
+              marginBottom: "8px",
+              background: "#0f172a",
+              border: "1px solid #334155",
+              borderRadius: "4px",
+              color: "#f1f5f9",
+              fontSize: "14px",
+              resize: "vertical",
+            }}
+          />
+          <div style={{ display: "flex", gap: "8px" }}>
+            <button
+              onClick={handleCreatePreset}
+              disabled={!newPresetName.trim()}
+              style={{
+                flex: 1,
+                padding: "8px",
+                background: newPresetName.trim() ? "#10b981" : "#334155",
+                color: "white",
+                border: "none",
+                borderRadius: "6px",
+                cursor: newPresetName.trim() ? "pointer" : "not-allowed",
+                fontSize: "14px",
+              }}
+            >
+              Save Preset
+            </button>
+            <button
+              onClick={() => {
+                setIsCreating(false);
+                setNewPresetName("");
+                setNewPresetDescription("");
+              }}
+              style={{
+                flex: 1,
+                padding: "8px",
+                background: "#475569",
+                color: "white",
+                border: "none",
+                borderRadius: "6px",
+                cursor: "pointer",
+                fontSize: "14px",
+              }}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Search and filter */}
+      <div style={{ marginBottom: "16px" }}>
+        <input
+          type="text"
+          placeholder="Search presets..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          style={{
+            width: "100%",
+            padding: "8px",
+            marginBottom: "8px",
+            background: "#1e293b",
+            border: "1px solid #334155",
+            borderRadius: "6px",
+            color: "#f1f5f9",
+            fontSize: "14px",
+          }}
+        />
+        {allTags.length > 0 && (
+          <div style={{ display: "flex", gap: "6px", flexWrap: "wrap" }}>
+            <button
+              onClick={() => setFilterTag(null)}
+              style={{
+                padding: "4px 10px",
+                background: filterTag === null ? "#3b82f6" : "#334155",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "12px",
+              }}
+            >
+              All
+            </button>
+            {allTags.map((tag) => (
+              <button
+                key={tag}
+                onClick={() => setFilterTag(tag)}
+                style={{
+                  padding: "4px 10px",
+                  background: filterTag === tag ? "#3b82f6" : "#334155",
+                  color: "white",
+                  border: "none",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  fontSize: "12px",
+                }}
+              >
+                {tag}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Preset library */}
+      <div style={{ maxHeight: "400px", overflowY: "auto" }}>
+        {filteredPresets.length === 0 ? (
+          <div
+            style={{
+              padding: "32px",
+              textAlign: "center",
+              color: "#64748b",
+              fontSize: "14px",
+            }}
+          >
+            {presets.length === 0 ? "No presets yet. Create your first preset!" : "No presets match your search"}
+          </div>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            {filteredPresets.map((preset) => (
+              <div
+                key={preset.id}
+                style={{
+                  padding: "12px",
+                  background: selectedPreset?.id === preset.id ? "#1e40af" : "#1e293b",
+                  border: selectedPreset?.id === preset.id ? "2px solid #3b82f6" : "1px solid #334155",
+                  borderRadius: "6px",
+                  cursor: "pointer",
+                }}
+                onClick={() => handleLoadPreset(preset)}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "start",
+                    marginBottom: "6px",
+                  }}
+                >
+                  <div style={{ flex: 1 }}>
+                    <div
+                      style={{
+                        fontWeight: 600,
+                        color: "#f1f5f9",
+                        marginBottom: "4px",
+                      }}
+                    >
+                      {preset.name}
+                    </div>
+                    {preset.description && <div style={{ fontSize: "13px", color: "#94a3b8" }}>{preset.description}</div>}
+                  </div>
+                  <div style={{ display: "flex", gap: "6px" }} onClick={(e) => e.stopPropagation()}>
+                    <button
+                      onClick={() => handleExportJSON(preset)}
+                      title="Export as JSON"
+                      style={{
+                        padding: "4px 8px",
+                        background: "#475569",
+                        color: "white",
+                        border: "none",
+                        borderRadius: "4px",
+                        cursor: "pointer",
+                        fontSize: "12px",
+                      }}
+                    >
+                      ↓
+                    </button>
+                    <button
+                      onClick={() => onDeletePreset?.(preset.id)}
+                      title="Delete preset"
+                      style={{
+                        padding: "4px 8px",
+                        background: "#ef4444",
+                        color: "white",
+                        border: "none",
+                        borderRadius: "4px",
+                        cursor: "pointer",
+                        fontSize: "12px",
+                      }}
+                    >
+                      ×
+                    </button>
+                  </div>
+                </div>
+                <div style={{ fontSize: "12px", color: "#64748b" }}>Updated: {new Date(preset.updatedAt).toLocaleDateString()}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/PresetManager/index.ts

@@ -0,0 +1,2 @@
+export { PresetManager } from "./PresetManager";
+export type { PresetManagerProps, Preset } from "./PresetManager";

package/src/components/PreviewCanvas/PreviewCanvas.tsx

@@ -0,0 +1,168 @@
+/**
+ * PreviewCanvas Component
+ *
+ * Renders effect with current parameters.
+ * Supports pause/play/scrub and before/after comparison.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+
+export interface PreviewCanvasProps {
+  /** Effect definition to render */
+  effect: any; // TODO: Type from @clypra/engine
+  /** Media inputs for the effect */
+  inputs: Record<string, any>;
+  /** Current playback time in seconds */
+  currentTime: number;
+  /** Canvas width */
+  width?: number;
+  /** Canvas height */
+  height?: number;
+  /** Show before/after comparison */
+  showComparison?: boolean;
+  /** Playback state */
+  playing?: boolean;
+  /** Callback when playback state changes */
+  onPlayingChange?: (playing: boolean) => void;
+  /** Callback when time changes */
+  onTimeChange?: (time: number) => void;
+}
+
+export function PreviewCanvas({ effect, inputs, currentTime, width = 1920, height = 1080, showComparison = false, playing = false, onPlayingChange, onTimeChange }: PreviewCanvasProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animationFrameRef = useRef<number>();
+  const lastTimeRef = useRef<number>(0);
+
+  // Handle playback animation
+  useEffect(() => {
+    if (!playing) {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+      return;
+    }
+
+    const animate = (timestamp: number) => {
+      const deltaTime = (timestamp - lastTimeRef.current) / 1000;
+      lastTimeRef.current = timestamp;
+
+      if (onTimeChange && deltaTime > 0) {
+        onTimeChange(currentTime + deltaTime);
+      }
+
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    lastTimeRef.current = performance.now();
+    animationFrameRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [playing, currentTime, onTimeChange]);
+
+  // Render effect frame
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // TODO: Integrate with PixiRenderer from @clypra/runtime
+    // For now, show placeholder
+    ctx.fillStyle = "#1a1a1a";
+    ctx.fillRect(0, 0, width, height);
+
+    ctx.fillStyle = "#3b82f6";
+    ctx.font = "24px sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(`Preview Canvas - ${effect?.name || "No Effect"}`, width / 2, height / 2 - 30);
+
+    ctx.fillStyle = "#94a3b8";
+    ctx.font = "16px monospace";
+    ctx.fillText(`Time: ${currentTime.toFixed(2)}s`, width / 2, height / 2 + 10);
+    ctx.fillText(`Playing: ${playing}`, width / 2, height / 2 + 40);
+
+    if (showComparison) {
+      // Draw comparison split
+      ctx.strokeStyle = "#f59e0b";
+      ctx.lineWidth = 3;
+      ctx.beginPath();
+      ctx.moveTo(width / 2, 0);
+      ctx.lineTo(width / 2, height);
+      ctx.stroke();
+
+      ctx.fillStyle = "#f59e0b";
+      ctx.font = "14px sans-serif";
+      ctx.fillText("Before", width / 4, 30);
+      ctx.fillText("After", (width * 3) / 4, 30);
+    }
+  }, [effect, inputs, currentTime, width, height, showComparison, playing]);
+
+  const handleCanvasClick = () => {
+    if (onPlayingChange) {
+      onPlayingChange(!playing);
+    }
+  };
+
+  return (
+    <div className="preview-canvas-container">
+      <canvas
+        ref={canvasRef}
+        width={width}
+        height={height}
+        onClick={handleCanvasClick}
+        style={{
+          width: "100%",
+          height: "auto",
+          cursor: "pointer",
+          border: "1px solid #334155",
+          borderRadius: "8px",
+        }}
+      />
+      <div
+        style={{
+          marginTop: "8px",
+          display: "flex",
+          gap: "12px",
+          alignItems: "center",
+          fontSize: "14px",
+          color: "#94a3b8",
+        }}
+      >
+        <button
+          onClick={() => onPlayingChange?.(!playing)}
+          style={{
+            padding: "6px 16px",
+            background: playing ? "#ef4444" : "#3b82f6",
+            color: "white",
+            border: "none",
+            borderRadius: "6px",
+            cursor: "pointer",
+            fontWeight: 500,
+          }}
+        >
+          {playing ? "⏸ Pause" : "▶ Play"}
+        </button>
+        <label>
+          <input
+            type="checkbox"
+            checked={showComparison}
+            onChange={(e) => {
+              // Handle comparison toggle - prop would need to be passed
+            }}
+            style={{ marginRight: "6px" }}
+          />
+          Before/After
+        </label>
+        <span>
+          Resolution: {width}×{height}
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/components/PreviewCanvas/index.ts

@@ -0,0 +1,2 @@
+export { PreviewCanvas } from "./PreviewCanvas";
+export type { PreviewCanvasProps } from "./PreviewCanvas";