From d822207a1008091775e1a15435e707719eebb2c4 Mon Sep 17 00:00:00 2001
From: Willy <will.ricchiuti@gmail.com>
Date: Sun, 10 May 2026 00:31:27 -0500
Subject: [PATCH 1/2] feat(scene): add SVG file import as a new SceneSvg object
 type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduces a first-class `svg` scene object that stores raw SVG markup
and renders it via a data-URL `<img>` tag (browser-sandboxed, no script
execution). Adds an SVG file picker to the uploads panel that was
previously a "Coming soon" stub.

- `avnac-scene.ts`: new `SceneSvg` type, `'svg'` in `SceneObjectType`
  and `SceneObject` union, parse / clone / displayName cases
- `avnac-document.ts`: re-exports `SceneSvg`
- `avnac-scene-render.ts`: `svgMarkupToDataUrl` helper + `case 'svg'`
  in `drawSceneObject` — export pipeline works without further changes
- `object-view.tsx`: live editor renders SVG objects via `<img>` data URL
- `editor-uploads-panel.tsx`: SVG file picker with DOMParser-based size
  detection, parseerror guard, and regex sanitizer (strips `<script>`,
  `<foreignObject>`, `on*` attrs, external `<use href>`)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/editor-uploads-panel.tsx   | 130 +++++++++++++++++-
 .../components/scene-editor/object-view.tsx   |  20 +++
 frontend/src/lib/avnac-document.ts            |   1 +
 frontend/src/lib/avnac-scene-render.ts        |   9 ++
 frontend/src/lib/avnac-scene.ts               |  28 ++++
 5 files changed, 186 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/editor-uploads-panel.tsx b/frontend/src/components/editor-uploads-panel.tsx
index ee8313b..7db8479 100644
--- a/frontend/src/components/editor-uploads-panel.tsx
+++ b/frontend/src/components/editor-uploads-panel.tsx
@@ -1,18 +1,122 @@
-import { Cancel01Icon } from '@hugeicons/core-free-icons'
+import { Cancel01Icon, CloudUploadIcon } from '@hugeicons/core-free-icons'
 import { HugeiconsIcon } from '@hugeicons/react'
+import { useRef } from 'react'
 import {
   editorSidebarPanelLeftClass,
   editorSidebarPanelTopClass,
 } from '../lib/editor-sidebar-panel-layout'
+import type { SceneSvg } from '../lib/avnac-scene'
+import { useEditorStore } from './scene-editor/editor-store'
 
 type Props = {
   open: boolean
   onClose: () => void
 }
 
+// SVGs are rendered exclusively via <img> with a data URL, which sandboxes scripts
+// and event handlers at the browser level. This sanitizer is defense-in-depth only —
+// it removes common XSS vectors so that stored markup stays clean if the rendering
+// approach ever changes.
+function sanitizeSvgMarkup(markup: string): string {
+  return markup
+    .replace(/<script[\s\S]*?<\/script>/gi, '')
+    .replace(/<foreignObject[\s\S]*?<\/foreignObject>/gi, '')
+    .replace(/\bon\w+\s*=/gi, 'data-removed=')
+    .replace(/javascript:/gi, '')
+    .replace(/(<use\b[^>]*\s(?:href|xlink:href)\s*=\s*["'])(https?:\/\/[^"']*)(["'])/gi, '$1#$3')
+}
+
+// Returns null if the markup is not valid SVG.
+function parseSvgNaturalSize(markup: string): { width: number; height: number } | null {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(markup, 'image/svg+xml')
+  if (doc.querySelector('parsererror')) return null
+
+  const root = doc.documentElement
+  const wAttr = root.getAttribute('width')
+  const hAttr = root.getAttribute('height')
+  const viewBox = root.getAttribute('viewBox')
+
+  const numW = wAttr ? parseFloat(wAttr) : Number.NaN
+  const numH = hAttr ? parseFloat(hAttr) : Number.NaN
+  if (Number.isFinite(numW) && numW > 0 && Number.isFinite(numH) && numH > 0) {
+    return { width: numW, height: numH }
+  }
+
+  if (viewBox) {
+    const parts = viewBox.trim().split(/[\s,]+/)
+    const vbW = parseFloat(parts[2] ?? '')
+    const vbH = parseFloat(parts[3] ?? '')
+    if (Number.isFinite(vbW) && vbW > 0 && Number.isFinite(vbH) && vbH > 0) {
+      return { width: vbW, height: vbH }
+    }
+  }
+
+  return { width: 300, height: 300 }
+}
+
 export default function EditorUploadsPanel({ open, onClose }: Props) {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const setDoc = useEditorStore(s => s.setDoc)
+  const doc = useEditorStore(s => s.doc)
+  const setSelectedIds = useEditorStore(s => s.setSelectedIds)
+
   if (!open) return null
 
+  const artboardW = doc.artboard.width
+  const artboardH = doc.artboard.height
+
+  const handleSvgFiles = async (files: FileList | null) => {
+    if (!files) return
+    const insertedIds: string[] = []
+
+    for (const file of Array.from(files)) {
+      if (!file.name.toLowerCase().endsWith('.svg') && file.type !== 'image/svg+xml') continue
+
+      const rawMarkup = await new Promise<string>((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onload = () => resolve(String(reader.result))
+        reader.onerror = () => reject(reader.error)
+        reader.readAsText(file)
+      })
+
+      const markup = sanitizeSvgMarkup(rawMarkup)
+      const size = parseSvgNaturalSize(markup)
+      if (!size) continue
+
+      const { width: naturalWidth, height: naturalHeight } = size
+      const maxEdge = 800
+      const scale = Math.min(1, maxEdge / Math.max(naturalWidth, naturalHeight))
+      const displayWidth = Math.round(naturalWidth * scale)
+      const displayHeight = Math.round(naturalHeight * scale)
+
+      const obj: SceneSvg = {
+        id: crypto.randomUUID(),
+        type: 'svg',
+        x: Math.round(artboardW / 2 - displayWidth / 2),
+        y: Math.round(artboardH / 2 - displayHeight / 2),
+        width: displayWidth,
+        height: displayHeight,
+        rotation: 0,
+        opacity: 1,
+        visible: true,
+        locked: false,
+        blurPct: 0,
+        shadow: null,
+        markup,
+        naturalWidth,
+        naturalHeight,
+      }
+
+      insertedIds.push(obj.id)
+      setDoc(prev => ({ ...prev, objects: [...prev.objects, obj] }))
+    }
+
+    if (insertedIds.length > 0) {
+      setSelectedIds(insertedIds)
+    }
+  }
+
   return (
     <div
       data-avnac-chrome
@@ -35,7 +139,29 @@ export default function EditorUploadsPanel({ open, onClose }: Props) {
           <HugeiconsIcon icon={Cancel01Icon} size={18} strokeWidth={1.75} />
         </button>
       </div>
-      <div className="px-3 py-8 text-center text-sm text-neutral-500">Coming soon</div>
+
+      <div className="p-3">
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".svg,image/svg+xml"
+          className="hidden"
+          multiple
+          onChange={e => {
+            void handleSvgFiles(e.target.files)
+            e.target.value = ''
+          }}
+        />
+        <button
+          type="button"
+          className="flex w-full flex-col items-center gap-2 rounded-2xl border-2 border-dashed border-black/[0.12] px-4 py-6 text-center text-sm text-neutral-500 hover:border-black/[0.2] hover:bg-black/[0.02]"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <HugeiconsIcon icon={CloudUploadIcon} size={28} strokeWidth={1.5} />
+          <span>Upload SVG file</span>
+          <span className="text-xs text-neutral-400">Click to browse</span>
+        </button>
+      </div>
     </div>
   )
 }
diff --git a/frontend/src/components/scene-editor/object-view.tsx b/frontend/src/components/scene-editor/object-view.tsx
index d5de34f..a5b640f 100644
--- a/frontend/src/components/scene-editor/object-view.tsx
+++ b/frontend/src/components/scene-editor/object-view.tsx
@@ -216,6 +216,26 @@ export function SceneObjectView({
     )
   }
 
+  if (obj.type === 'svg') {
+    return (
+      <div
+        style={style}
+        data-avnac-scene-object
+        onPointerDown={e => onObjectPointerDown(e, obj)}
+        {...hoverProps}
+        title={obj.locked ? 'Locked SVG' : undefined}
+      >
+        <img
+          src={`data:image/svg+xml;charset=utf-8,${encodeURIComponent(obj.markup)}`}
+          alt=""
+          draggable={false}
+          className="pointer-events-none block h-full w-full select-none"
+          style={{ objectFit: 'fill' }}
+        />
+      </div>
+    )
+  }
+
   if (obj.type === 'vector-board') {
     return (
       <div
diff --git a/frontend/src/lib/avnac-document.ts b/frontend/src/lib/avnac-document.ts
index b3f2af1..be1de02 100644
--- a/frontend/src/lib/avnac-document.ts
+++ b/frontend/src/lib/avnac-document.ts
@@ -16,6 +16,7 @@ export {
   type SceneGroup,
   type SceneIcon,
   type SceneImage,
+  type SceneSvg,
   type SceneLine,
   type SceneObject,
   type ScenePolygon,
diff --git a/frontend/src/lib/avnac-scene-render.ts b/frontend/src/lib/avnac-scene-render.ts
index f33a5a5..bf49d74 100644
--- a/frontend/src/lib/avnac-scene-render.ts
+++ b/frontend/src/lib/avnac-scene-render.ts
@@ -122,6 +122,10 @@ export async function loadSceneImageElement(rawUrl: string): Promise<HTMLImageEl
   }
 }
 
+function svgMarkupToDataUrl(markup: string): string {
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`
+}
+
 function applyShadow(ctx: CanvasRenderingContext2D, obj: SceneObject) {
   if (!obj.shadow) {
     ctx.shadowColor = 'transparent'
@@ -727,6 +731,11 @@ async function drawSceneObject(
       ctx.drawImage(img, iconBox.x, iconBox.y, iconBox.width, iconBox.height)
       break
     }
+    case 'svg': {
+      const img = await loadSceneImageElement(svgMarkupToDataUrl(obj.markup))
+      ctx.drawImage(img, 0, 0, obj.width, obj.height)
+      break
+    }
     case 'vector-board': {
       const doc = vectorBoardDocs[obj.boardId]
       if (doc) {
diff --git a/frontend/src/lib/avnac-scene.ts b/frontend/src/lib/avnac-scene.ts
index 8bde5fd..afd861a 100644
--- a/frontend/src/lib/avnac-scene.ts
+++ b/frontend/src/lib/avnac-scene.ts
@@ -15,6 +15,7 @@ export type SceneObjectType =
   | 'arrow'
   | 'text'
   | 'image'
+  | 'svg'
   | 'icon'
   | 'vector-board'
   | 'group'
@@ -117,6 +118,13 @@ export type SceneImage = SceneObjectBase & {
   cornerRadius: number
 }
 
+export type SceneSvg = SceneObjectBase & {
+  type: 'svg'
+  markup: string
+  naturalWidth: number
+  naturalHeight: number
+}
+
 export type SceneIcon = SceneObjectBase & {
   type: 'icon'
   iconName: string
@@ -144,6 +152,7 @@ export type SceneObject =
   | SceneArrow
   | SceneText
   | SceneImage
+  | SceneSvg
   | SceneIcon
   | SceneVectorBoard
   | SceneGroup
@@ -469,6 +478,21 @@ function parseSceneObject(raw: unknown): SceneObject | null {
       cornerRadius: typeof obj.cornerRadius === 'number' ? Math.max(0, obj.cornerRadius) : 0,
     }
   }
+  if (type === 'svg') {
+    return {
+      ...baseObjectFromUnknown(obj, 'svg'),
+      type: 'svg' as const,
+      markup: typeof obj.markup === 'string' ? obj.markup : '',
+      naturalWidth:
+        typeof obj.naturalWidth === 'number' && Number.isFinite(obj.naturalWidth)
+          ? Math.max(1, obj.naturalWidth)
+          : 100,
+      naturalHeight:
+        typeof obj.naturalHeight === 'number' && Number.isFinite(obj.naturalHeight)
+          ? Math.max(1, obj.naturalHeight)
+          : 100,
+    }
+  }
   if (type === 'icon') {
     const svg = normalizeIconSvg(obj.svg)
     if (!svg) return null
@@ -954,6 +978,8 @@ export function cloneSceneObject<T extends SceneObject>(obj: T): T {
         ...base,
         crop: { ...obj.crop },
       } as T
+    case 'svg':
+      return { ...base } as T
     case 'icon':
       return {
         ...base,
@@ -1001,6 +1027,8 @@ export function objectDisplayName(obj: SceneObject): string {
       return obj.text.trim() || 'Text'
     case 'image':
       return 'Image'
+    case 'svg':
+      return 'SVG'
     case 'icon':
       return obj.iconName.replace(/Icon$/, '').replace(/([a-z0-9])([A-Z])/g, '$1 $2') || 'Icon'
     case 'vector-board':

From 67650d85da70351004760bd17a69281baf969eed Mon Sep 17 00:00:00 2001
From: Willy <will.ricchiuti@gmail.com>
Date: Sun, 10 May 2026 00:37:37 -0500
Subject: [PATCH 2/2] fix(uploads): address bot review issues in SVG import

- parseSvgNaturalSize: reject non-SVG XML by checking root tag name
- handleSvgFiles: catch FileReader errors per-file so one failure
  does not abort remaining files in a multi-file upload
- clamp display dimensions to at least 1px to prevent zero-sized
  objects when rounding tiny SVG natural dimensions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/editor-uploads-panel.tsx   | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/editor-uploads-panel.tsx b/frontend/src/components/editor-uploads-panel.tsx
index 7db8479..773b4dd 100644
--- a/frontend/src/components/editor-uploads-panel.tsx
+++ b/frontend/src/components/editor-uploads-panel.tsx
@@ -33,6 +33,7 @@ function parseSvgNaturalSize(markup: string): { width: number; height: number }
   if (doc.querySelector('parsererror')) return null
 
   const root = doc.documentElement
+  if (root.tagName.toLowerCase() !== 'svg') return null
   const wAttr = root.getAttribute('width')
   const hAttr = root.getAttribute('height')
   const viewBox = root.getAttribute('viewBox')
@@ -73,12 +74,17 @@ export default function EditorUploadsPanel({ open, onClose }: Props) {
     for (const file of Array.from(files)) {
       if (!file.name.toLowerCase().endsWith('.svg') && file.type !== 'image/svg+xml') continue
 
-      const rawMarkup = await new Promise<string>((resolve, reject) => {
-        const reader = new FileReader()
-        reader.onload = () => resolve(String(reader.result))
-        reader.onerror = () => reject(reader.error)
-        reader.readAsText(file)
-      })
+      let rawMarkup: string
+      try {
+        rawMarkup = await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader()
+          reader.onload = () => resolve(String(reader.result))
+          reader.onerror = () => reject(reader.error)
+          reader.readAsText(file)
+        })
+      } catch {
+        continue
+      }
 
       const markup = sanitizeSvgMarkup(rawMarkup)
       const size = parseSvgNaturalSize(markup)
@@ -87,8 +93,8 @@ export default function EditorUploadsPanel({ open, onClose }: Props) {
       const { width: naturalWidth, height: naturalHeight } = size
       const maxEdge = 800
       const scale = Math.min(1, maxEdge / Math.max(naturalWidth, naturalHeight))
-      const displayWidth = Math.round(naturalWidth * scale)
-      const displayHeight = Math.round(naturalHeight * scale)
+      const displayWidth = Math.max(1, Math.round(naturalWidth * scale))
+      const displayHeight = Math.max(1, Math.round(naturalHeight * scale))
 
       const obj: SceneSvg = {
         id: crypto.randomUUID(),