Add 8 major features: modes, templates, storyboard, undo, find/replace, drag-reorder, freemium gating, toast notifications

- Toast notification system with auto-dismiss for all operations
- Undo/Redo with Ctrl+Z/Y and snapshot-based history (50 entries)
- Script modes: Screenplay, YouTube, Podcast, TikTok with mode-specific block types, colors, AI prompts
- 10 pre-built templates filtered by mode (Horror, Rom-Com, Thriller, etc.)
- Find & Replace with Ctrl+F, prev/next navigation, replace all
- Scene drag-to-reorder via HTML5 drag events in SceneNavigator
- Storyboard mode: AI visual descriptions per scene, Canva page insertion
- Freemium gating: free/pro tiers with FeatureGate wrapper and UpgradePrompt
- Wire previously unused components: ExportPanel, CharacterTracker, ScriptStats
- Both Canva and GitHub Pages builds compile successfully

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: manzaro1

canva-app/src/components/AIToolsPanel.tsx

@@ -23,9 +23,10 @@ const TOOLS: { key: AITool; label: string; description: string }[] = [
 interface AIToolsPanelProps {
   blocks: ScriptBlock[];
   apiKey?: string;
+  addToast?: (text: string, type: "success" | "error" | "info") => void;
 }
 
-export default function AIToolsPanel({ blocks, apiKey }: AIToolsPanelProps) {
+export default function AIToolsPanel({ blocks, apiKey, addToast }: AIToolsPanelProps) {
   const [activeTool, setActiveTool] = useState<AITool | null>(null);
   const [loading, setLoading] = useState(false);
   const [result, setResult] = useState<AIAnalysisResult | null>(null);
@@ -45,8 +46,10 @@ export default function AIToolsPanel({ blocks, apiKey }: AIToolsPanelProps) {
     try {
       const analysis = await analyzeScript(blocks, tool, apiKey);
       setResult(analysis);
+      addToast?.("Analysis complete!", "success");
     } catch (err: any) {
       setError(err.message || "Analysis failed");
+      addToast?.(err.message || "Analysis failed", "error");
     } finally {
       setLoading(false);
     }

canva-app/src/components/DocumentImport.tsx

@@ -5,6 +5,7 @@ import { parseDocumentToBlocks } from "../utils/ai";
 interface DocumentImportProps {
   apiKey?: string;
   onImport: (blocks: ScriptBlock[]) => void;
+  addToast?: (text: string, type: "success" | "error" | "info") => void;
 }
 
 async function extractTextFromDocx(file: File): Promise<string> {
@@ -41,6 +42,7 @@ async function extractTextFromTxt(file: File): Promise<string> {
 export default function DocumentImport({
   apiKey,
   onImport,
+  addToast,
 }: DocumentImportProps) {
   const [status, setStatus] = useState<"idle" | "reading" | "parsing" | "preview">("idle");
   const [rawText, setRawText] = useState("");
@@ -89,8 +91,10 @@ export default function DocumentImport({
       );
       setParsedBlocks(blocks);
       setStatus("preview");
+      addToast?.("Document parsed successfully!", "success");
     } catch (err: any) {
       setError(err.message || "Failed to process document");
+      addToast?.(err.message || "Failed to process document", "error");
       setStatus("idle");
     }
   };

canva-app/src/components/FeatureGate.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import type { Tier } from "../utils/pricing";
+import { canAccess } from "../utils/pricing";
+import UpgradePrompt from "./UpgradePrompt";
+
+interface FeatureGateProps {
+  featureId: string;
+  tier: Tier;
+  children: React.ReactNode;
+  onUpgrade: () => void;
+}
+
+export default function FeatureGate({
+  featureId,
+  tier,
+  children,
+  onUpgrade,
+}: FeatureGateProps) {
+  if (canAccess(featureId, tier)) {
+    return <>{children}</>;
+  }
+  return <UpgradePrompt featureId={featureId} onUpgrade={onUpgrade} />;
+}

canva-app/src/components/FindReplace.tsx

@@ -0,0 +1,172 @@
+import React, { useState, useMemo, useCallback, useEffect, useRef } from "react";
+import type { ScriptBlock } from "../types";
+
+interface FindReplaceProps {
+  blocks: ScriptBlock[];
+  onBlocksChange: (blocks: ScriptBlock[]) => void;
+  onHighlightBlock: (blockId: string | null) => void;
+  visible: boolean;
+  onClose: () => void;
+}
+
+export default function FindReplace({
+  blocks,
+  onBlocksChange,
+  onHighlightBlock,
+  visible,
+  onClose,
+}: FindReplaceProps) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [replaceTerm, setReplaceTerm] = useState("");
+  const [currentIdx, setCurrentIdx] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const matchIndices = useMemo(() => {
+    if (!searchTerm) return [];
+    const lower = searchTerm.toLowerCase();
+    return blocks
+      .map((b, i) => (b.content.toLowerCase().includes(lower) ? i : -1))
+      .filter((i) => i !== -1);
+  }, [blocks, searchTerm]);
+
+  // Focus input when opened
+  useEffect(() => {
+    if (visible) inputRef.current?.focus();
+  }, [visible]);
+
+  // Highlight current match
+  useEffect(() => {
+    if (matchIndices.length > 0 && currentIdx < matchIndices.length) {
+      onHighlightBlock(blocks[matchIndices[currentIdx]]?.id ?? null);
+    } else {
+      onHighlightBlock(null);
+    }
+  }, [matchIndices, currentIdx, blocks, onHighlightBlock]);
+
+  // Reset index when search changes
+  useEffect(() => {
+    setCurrentIdx(0);
+  }, [searchTerm]);
+
+  const goNext = useCallback(() => {
+    if (matchIndices.length === 0) return;
+    setCurrentIdx((prev) => (prev + 1) % matchIndices.length);
+  }, [matchIndices]);
+
+  const goPrev = useCallback(() => {
+    if (matchIndices.length === 0) return;
+    setCurrentIdx((prev) =>
+      prev === 0 ? matchIndices.length - 1 : prev - 1
+    );
+  }, [matchIndices]);
+
+  const handleReplace = useCallback(() => {
+    if (matchIndices.length === 0 || !searchTerm) return;
+    const idx = matchIndices[currentIdx];
+    const block = blocks[idx];
+    const regex = new RegExp(searchTerm.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i");
+    const newContent = block.content.replace(regex, replaceTerm);
+    onBlocksChange(
+      blocks.map((b, i) => (i === idx ? { ...b, content: newContent } : b))
+    );
+  }, [blocks, matchIndices, currentIdx, searchTerm, replaceTerm, onBlocksChange]);
+
+  const handleReplaceAll = useCallback(() => {
+    if (!searchTerm) return;
+    const regex = new RegExp(
+      searchTerm.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"),
+      "gi"
+    );
+    onBlocksChange(
+      blocks.map((b) => ({
+        ...b,
+        content: b.content.replace(regex, replaceTerm),
+      }))
+    );
+  }, [blocks, searchTerm, replaceTerm, onBlocksChange]);
+
+  const handleClose = useCallback(() => {
+    setSearchTerm("");
+    setReplaceTerm("");
+    onHighlightBlock(null);
+    onClose();
+  }, [onClose, onHighlightBlock]);
+
+  if (!visible) return null;
+
+  return (
+    <div style={containerStyle}>
+      <div style={{ display: "flex", gap: 4, alignItems: "center", flex: 1 }}>
+        <input
+          ref={inputRef}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          placeholder="Find..."
+          style={inputStyle}
+        />
+        <input
+          value={replaceTerm}
+          onChange={(e) => setReplaceTerm(e.target.value)}
+          placeholder="Replace..."
+          style={inputStyle}
+        />
+      </div>
+      <div style={{ display: "flex", gap: 3, alignItems: "center" }}>
+        <span style={{ fontSize: 9, color: "#6b7280", minWidth: 30, textAlign: "center" }}>
+          {matchIndices.length > 0
+            ? `${currentIdx + 1}/${matchIndices.length}`
+            : searchTerm
+            ? "0"
+            : ""}
+        </span>
+        <button onClick={goPrev} style={btnStyle} title="Previous">
+          &#9650;
+        </button>
+        <button onClick={goNext} style={btnStyle} title="Next">
+          &#9660;
+        </button>
+        <button onClick={handleReplace} style={btnStyle} title="Replace">
+          R
+        </button>
+        <button onClick={handleReplaceAll} style={btnStyle} title="Replace All">
+          RA
+        </button>
+        <button onClick={handleClose} style={btnStyle} title="Close">
+          ×
+        </button>
+      </div>
+    </div>
+  );
+}
+
+const containerStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  padding: "6px 8px",
+  backgroundColor: "#f9fafb",
+  border: "1px solid #e5e7eb",
+  borderRadius: 6,
+};
+
+const inputStyle: React.CSSProperties = {
+  fontSize: 11,
+  padding: "4px 6px",
+  border: "1px solid #d1d5db",
+  borderRadius: 4,
+  outline: "none",
+  flex: 1,
+  minWidth: 0,
+};
+
+const btnStyle: React.CSSProperties = {
+  fontSize: 10,
+  fontWeight: 700,
+  color: "#374151",
+  backgroundColor: "#e5e7eb",
+  border: "none",
+  borderRadius: 3,
+  padding: "3px 6px",
+  cursor: "pointer",
+  lineHeight: 1,
+};

canva-app/src/components/SceneGenerator.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import type { ScriptBlock } from "../types";
+import type { ScriptBlock, ScriptMode } from "../types";
 import { generateScene } from "../utils/ai";
 import { extractCharacters } from "../utils/script-helpers";
 
@@ -26,12 +26,16 @@ interface SceneGeneratorProps {
   apiKey?: string;
   existingBlocks: ScriptBlock[];
   onInsert: (blocks: ScriptBlock[]) => void;
+  addToast?: (text: string, type: "success" | "error" | "info") => void;
+  mode?: ScriptMode;
 }
 
 export default function SceneGenerator({
   apiKey,
   existingBlocks,
   onInsert,
+  addToast,
+  mode = "screenplay",
 }: SceneGeneratorProps) {
   const [premise, setPremise] = useState("");
   const [tone, setTone] = useState("Dramatic");
@@ -58,11 +62,14 @@ export default function SceneGenerator({
         tone,
         sceneLength,
         existingChars,
-        apiKey
+        apiKey,
+        mode
       );
       setGeneratedBlocks(blocks);
+      addToast?.("Scene generated!", "success");
     } catch (err: any) {
       setError(err.message || "Generation failed");
+      addToast?.(err.message || "Generation failed", "error");
     } finally {
       setGenerating(false);
     }