feat: Add "clear canvas" functionality

frontend/src/components/editor-clear-canvas.tsx

@@ -0,0 +1,36 @@
+import { RefreshIcon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+// similar class as the adjacent export button next to it 
+const triggerClass = [
+  "inline-flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-full border border-black/[0.08] px-4 text-sm font-medium sm:h-10 sm:px-5",
+  "bg-gradient-to-br from-[#fafaf9] via-[#f2f0f3] to-[#ebe7f3]",
+  "text-[var(--text)] shadow-[0_1px_2px_rgba(0,0,0,0.04)]",
+  "outline-none transition-[background,box-shadow,filter] duration-200",
+  "hover:from-[#f5f4f2] hover:via-[#eceaf1] hover:to-[#e5e0f2] hover:shadow-[0_2px_8px_rgba(0,0,0,0.06)]",
+  "focus-visible:ring-2 focus-visible:ring-[var(--accent)]/50 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface)]",
+  "disabled:pointer-events-none disabled:opacity-40",
+].join(" ");
+
+type Props = {
+  onClearCanvas?: () => void;
+};
+
+export default function EditorClearCanvas({ onClearCanvas }: Props) {
+    return (
+        <button
+            type="button"
+            className={triggerClass}
+            title="Clear canvas"
+            onClick={onClearCanvas}
+        >
+            <HugeiconsIcon
+                icon={RefreshIcon}
+                size={18}
+                strokeWidth={1.75}
+                className="shrink-0 text-neutral-800"
+            />
+            <span className="text-[var(--text)]">Clear Canvas</span>
+        </button>
+    )
+}

frontend/src/components/scene-editor.tsx

@@ -146,6 +146,7 @@ export type SceneEditorHandle = {
   exportImage: (opts?: ExportImageOptions) => void
   saveDocument: () => void
   loadDocument: (file: File) => Promise<void>
+  clearCanvas: () => void
 }
 
 type SceneEditorProps = {
@@ -1618,6 +1619,17 @@ const SceneEditor = forwardRef<SceneEditorHandle, SceneEditorProps>(function Sce
             return
           }
 
+    const clearCanvas = useCallback(() => {
+      setDoc((prev) => ({ ...prev, objects: [] }))
+      setSelectedIds([])
+      setTextEditingId(null)
+    }, [setDoc, setSelectedIds])
+
+    useImperativeHandle(
+      ref,
+      () => ({ exportImage, saveDocument, loadDocument, clearCanvas }),
+      [exportImage, saveDocument, loadDocument, clearCanvas],
+    )
           const pageDoc = exportPages[0] ? pageExportDocument(doc, exportPages[0]) : doc
           const url = await renderAvnacDocumentToDataUrl(pageDoc, vectorBoardDocs, {
             format,

frontend/src/routes/create.tsx

@@ -11,6 +11,8 @@ import {
   idbGetEditorRecord,
   idbMigrateLegacyDocument,
   idbSetDocumentName,
+} from "../lib/avnac-editor-idb";
+import EditorClearCanvas from "#/components/editor-clear-canvas";
 } from '../lib/avnac-editor-idb'
 
 type CreateSearch = {
@@ -175,6 +177,7 @@ function CreatePage() {
           />
         </div>
         <div className="ml-auto flex shrink-0 items-center gap-1.5 sm:gap-2">
+          <EditorClearCanvas onClearCanvas={() => editorRef.current?.clearCanvas()} />
           <EditorExportMenu
             disabled={!editorReady}
             onExport={opts => editorRef.current?.exportImage(opts)}