From 7ea68d4e066abdca2c28fc8b114c6566c48ef4f3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 31 May 2026 23:24:47 +0000
Subject: [PATCH] Add audio & embed resources (MP3 upload, YouTube, Google
 Drive)

Teachers can attach audio/video resources to a board as canvas objects,
alongside images and PDFs.

- New `YEmbed` shape kind (audio | youtube | gdrive) with a Konva card
  (EmbedRenderer) plus a DOM player floated over the stage
  (MediaOverlayLayer), since Konva's canvas can't host <audio>/<iframe>.
  The overlay is click-through until the card is selected, so Konva still
  drives select/drag/resize unchanged.
- MP3 upload reuses the existing asset pipeline: AssetKind gains "audio";
  importFiles classifies audio/* and places a player card (no decoding).
- YouTube/Drive embeds via pasted URL: parseEmbedUrl() normalises watch/
  youtu.be/shorts/embed and Drive file/open links to canonical iframe URLs;
  assetStore.insertEmbed() drops a card at the viewport centre.
- AppMenu: accept audio/* in import; new "Embed YouTube / Google Drive" URL
  popover with inline validation.
- Wire "embed" through shapeBounds/translate, ShapesLayer, TransformLayer,
  and SelectionInspector so transform/move/z-order/lock all apply.
- Migration 0003 widens the assets.kind check to allow 'audio'.

https://claude.ai/code/session_012m6DUY6q4Vk2WuUh9GtkpA
---
 apps/web/src/features/canvas/AppMenu.tsx      |  81 ++++++++++++-
 .../features/canvas/SelectionInspector.tsx    |   2 +
 packages/canvas/src/CanvasStage.tsx           |   6 +
 packages/canvas/src/MediaOverlayLayer.tsx     | 110 ++++++++++++++++++
 packages/canvas/src/assets/embeds.ts          |  85 ++++++++++++++
 packages/canvas/src/assets/importFiles.ts     |  48 +++++++-
 packages/canvas/src/assets/storage.ts         |  12 ++
 packages/canvas/src/layers/ShapesLayer.tsx    |   4 +
 packages/canvas/src/layers/TransformLayer.tsx |   9 +-
 .../canvas/src/renderers/EmbedRenderer.tsx    |  62 ++++++++++
 packages/canvas/src/store/assetStore.ts       |  47 +++++++-
 packages/canvas/src/tools/shapeOps.ts         |   2 +
 packages/types/src/asset.ts                   |   2 +-
 packages/types/src/index.ts                   |   1 +
 packages/types/src/yshape.ts                  |  22 +++-
 supabase/migrations/0003_audio_resources.sql  |  11 ++
 16 files changed, 493 insertions(+), 11 deletions(-)
 create mode 100644 packages/canvas/src/MediaOverlayLayer.tsx
 create mode 100644 packages/canvas/src/assets/embeds.ts
 create mode 100644 packages/canvas/src/renderers/EmbedRenderer.tsx
 create mode 100644 supabase/migrations/0003_audio_resources.sql

diff --git a/apps/web/src/features/canvas/AppMenu.tsx b/apps/web/src/features/canvas/AppMenu.tsx
index 068d58e..e18d8bc 100644
--- a/apps/web/src/features/canvas/AppMenu.tsx
+++ b/apps/web/src/features/canvas/AppMenu.tsx
@@ -73,6 +73,9 @@ export function AppMenu({ boardId, client, owned }: AppMenuProps) {
   const [pagesOpen, setPagesOpen] = useState(false);
   const [snapshotsOpen, setSnapshotsOpen] = useState(false);
   const [exportOpen, setExportOpen] = useState(false);
+  const [embedOpen, setEmbedOpen] = useState(false);
+  const [embedUrl, setEmbedUrl] = useState("");
+  const [embedError, setEmbedError] = useState<string | null>(null);
   const [exporting, setExporting] = useState(false);
   const [dragIdx, setDragIdx] = useState<number | null>(null);
   const [overIdx, setOverIdx] = useState<number | null>(null);
@@ -141,6 +144,17 @@ export function AppMenu({ boardId, client, owned }: AppMenuProps) {
     }
   }
 
+  function submitEmbed() {
+    const err = useAssetStore.getState().insertEmbed(embedUrl);
+    if (err) {
+      setEmbedError(err);
+      return;
+    }
+    setEmbedUrl("");
+    setEmbedError(null);
+    setEmbedOpen(false);
+  }
+
   function commitDrop() {
     if (dragIdx !== null && overIdx !== null && dragIdx !== overIdx) {
       reorderPage(dragIdx, overIdx);
@@ -212,10 +226,20 @@ export function AppMenu({ boardId, client, owned }: AppMenuProps) {
             />
             <MenuItem
               icon="upload"
-              label="Import image or PDF"
+              label="Import image, PDF or audio"
               disabled={!canImport}
               onClick={() => run(() => fileRef.current?.click())}
             />
+            <MenuItem
+              icon="plus"
+              label="Embed YouTube / Google Drive…"
+              disabled={!canImport}
+              onClick={() => {
+                setMenuOpen(false);
+                setEmbedError(null);
+                setEmbedOpen(true);
+              }}
+            />
             <MenuItem
               icon="download"
               label={exporting ? "Exporting…" : "Export as PDF…"}
@@ -382,6 +406,59 @@ export function AppMenu({ boardId, client, owned }: AppMenuProps) {
         </div>
       </Popover>
 
+      {/* Embed-by-URL (YouTube / Google Drive) */}
+      <Popover
+        open={embedOpen}
+        onClose={() => setEmbedOpen(false)}
+        anchorRef={menuBtnRef}
+        placement="bottom"
+        className="menu-popover"
+      >
+        <div className="menu" style={{ padding: 12, minWidth: 280 }}>
+          <div className="menu__section-title">Embed a link</div>
+          <input
+            type="url"
+            value={embedUrl}
+            autoFocus
+            placeholder="Paste a YouTube or Google Drive URL"
+            onChange={(e) => {
+              setEmbedUrl(e.target.value);
+              if (embedError) setEmbedError(null);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") submitEmbed();
+            }}
+            style={{
+              width: "100%",
+              boxSizing: "border-box",
+              padding: "8px 10px",
+              borderRadius: 8,
+              border: "1px solid rgba(255,255,255,0.18)",
+              background: "rgba(0,0,0,0.25)",
+              color: "inherit",
+              outline: "none",
+              marginTop: 6,
+            }}
+          />
+          {embedError && (
+            <div style={{ color: "#ff6b6b", fontSize: 12, marginTop: 6 }}>
+              {embedError}
+            </div>
+          )}
+          <div style={{ fontSize: 11, opacity: 0.6, marginTop: 6 }}>
+            Google Drive files must be shared “anyone with the link”.
+          </div>
+          <button
+            type="button"
+            className="menu__item"
+            style={{ justifyContent: "center", marginTop: 8 }}
+            onClick={submitEmbed}
+          >
+            <span className="menu__item-label">Add to board</span>
+          </button>
+        </div>
+      </Popover>
+
       <SnapshotsPanel
         open={snapshotsOpen}
         onClose={() => setSnapshotsOpen(false)}
@@ -394,7 +471,7 @@ export function AppMenu({ boardId, client, owned }: AppMenuProps) {
       <input
         ref={fileRef}
         type="file"
-        accept="image/*,application/pdf"
+        accept="image/*,application/pdf,audio/*"
         multiple
         style={{ display: "none" }}
         onChange={(e) => {
diff --git a/apps/web/src/features/canvas/SelectionInspector.tsx b/apps/web/src/features/canvas/SelectionInspector.tsx
index 7569e64..3e97b49 100644
--- a/apps/web/src/features/canvas/SelectionInspector.tsx
+++ b/apps/web/src/features/canvas/SelectionInspector.tsx
@@ -21,6 +21,7 @@ function shapeColor(s: YShape): string | undefined {
     case "sticky":
       return s.color;
     case "asset":
+    case "embed":
       return undefined;
   }
 }
@@ -38,6 +39,7 @@ function colorPatch(s: YShape, color: string): Partial<YShape> | null {
     case "sticky":
       return { color };
     case "asset":
+    case "embed":
       return null;
   }
 }
diff --git a/packages/canvas/src/CanvasStage.tsx b/packages/canvas/src/CanvasStage.tsx
index 96280dd..7727833 100644
--- a/packages/canvas/src/CanvasStage.tsx
+++ b/packages/canvas/src/CanvasStage.tsx
@@ -18,6 +18,7 @@ import { useShapeStore } from "./store/shapeStore";
 import { useTextEditStore } from "./store/textEditStore";
 import { useToolStore } from "./store/toolStore";
 import { TextEditorOverlay } from "./TextEditorOverlay";
+import { MediaOverlayLayer } from "./MediaOverlayLayer";
 import { makeTool } from "./tools/registry";
 import { boundsIntersect, shapeBounds } from "./tools/shapeOps";
 import type { Tool, ToolContext, ToolEventPoint } from "./tools/types";
@@ -523,6 +524,11 @@ export function CanvasStage({
         <OverlayLayer draft={draft} selectedShapes={selectedShapes} viewport={viewport} />
         <PresenceLayer awareness={awareness} viewport={viewport} />
       </Stage>
+      <MediaOverlayLayer
+        shapes={shapes}
+        selection={selection}
+        viewport={viewport}
+      />
       <TextEditorOverlay
         viewport={viewport}
         pageId={pageId}
diff --git a/packages/canvas/src/MediaOverlayLayer.tsx b/packages/canvas/src/MediaOverlayLayer.tsx
new file mode 100644
index 0000000..27e15cf
--- /dev/null
+++ b/packages/canvas/src/MediaOverlayLayer.tsx
@@ -0,0 +1,110 @@
+import type { CSSProperties } from "react";
+import type { YEmbed, YShape } from "@notux/types";
+import { assetPublicUrl } from "./assets/storage";
+import { useAssetStore } from "./store/assetStore";
+import type { ViewportState } from "./viewport/Viewport";
+
+interface Props {
+  shapes: YShape[];
+  selection: Set<string>;
+  viewport: ViewportState;
+}
+
+// HTML players floated over the Konva stage, one per `embed` shape. Konva's
+// <canvas> can't host <audio>/<iframe>, so each player is an absolutely
+// positioned DOM node tracking the shape through the viewport transform (same
+// world→screen math as TextEditorOverlay).
+//
+// Pointer rule: the player is click-through (pointer-events:none) unless its
+// card is selected. So a single click selects/drags the card via Konva, and a
+// second click (now selected) reaches the controls. This keeps SelectTool and
+// the Transformer working unchanged.
+export function MediaOverlayLayer({ shapes, selection, viewport }: Props) {
+  const embeds = shapes.filter((s): s is YEmbed => s.kind === "embed");
+  if (embeds.length === 0) return null;
+
+  return (
+    <>
+      {embeds.map((shape) => (
+        <EmbedPlayer
+          key={shape.id}
+          shape={shape}
+          selected={selection.has(shape.id)}
+          viewport={viewport}
+        />
+      ))}
+    </>
+  );
+}
+
+function EmbedPlayer({
+  shape,
+  selected,
+  viewport,
+}: {
+  shape: YEmbed;
+  selected: boolean;
+  viewport: ViewportState;
+}) {
+  const left = shape.x * viewport.scale + viewport.x;
+  const top = shape.y * viewport.scale + viewport.y;
+  const width = shape.w * viewport.scale;
+  const height = shape.h * viewport.scale;
+
+  const wrap: CSSProperties = {
+    position: "absolute",
+    left,
+    top,
+    width,
+    height,
+    transform: shape.rot ? `rotate(${shape.rot}deg)` : undefined,
+    transformOrigin: "top left",
+    // Click-through until selected, so Konva drives select/drag first.
+    pointerEvents: selected ? "auto" : "none",
+    overflow: "hidden",
+    borderRadius: 10,
+    // Leave room so the EmbedRenderer card header (provider/title) stays visible
+    // for audio; the player sits in the lower portion of the card.
+    display: "flex",
+    alignItems: "flex-end",
+    boxSizing: "border-box",
+    zIndex: 5,
+  };
+
+  if (shape.embedType === "audio") {
+    const src = resolveAudioSrc(shape.assetId);
+    return (
+      <div style={wrap}>
+        {src ? (
+          <audio
+            controls
+            src={src}
+            style={{ width: "100%", display: "block" }}
+          />
+        ) : null}
+      </div>
+    );
+  }
+
+  // youtube / gdrive — iframe embed.
+  return (
+    <div style={{ ...wrap, alignItems: "stretch" }}>
+      {shape.url ? (
+        <iframe
+          src={shape.url}
+          title={shape.title}
+          style={{ width: "100%", height: "100%", border: "none", borderRadius: 10 }}
+          allow="autoplay; encrypted-media; picture-in-picture"
+          allowFullScreen
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function resolveAudioSrc(assetId: string | undefined): string | null {
+  if (!assetId) return null;
+  const { _client, _boardId } = useAssetStore.getState();
+  if (!_client || !_boardId) return null;
+  return assetPublicUrl(_client, _boardId, assetId);
+}
diff --git a/packages/canvas/src/assets/embeds.ts b/packages/canvas/src/assets/embeds.ts
new file mode 100644
index 0000000..d811f8a
--- /dev/null
+++ b/packages/canvas/src/assets/embeds.ts
@@ -0,0 +1,85 @@
+// URL parsing for embeddable media resources (YouTube / Google Drive). Turns a
+// pasted share/watch URL into the canonical iframe-embed URL stored on a YEmbed
+// shape. Returns null when the URL isn't recognised so the UI can show an error.
+
+export interface ParsedEmbed {
+  embedType: "youtube" | "gdrive";
+  // Canonical iframe src.
+  url: string;
+}
+
+// Accepts the common YouTube URL shapes:
+//   https://www.youtube.com/watch?v=<id>
+//   https://youtu.be/<id>
+//   https://www.youtube.com/embed/<id>
+//   https://www.youtube.com/shorts/<id>
+// and (separately) Google Drive file links:
+//   https://drive.google.com/file/d/<id>/view?usp=sharing
+//   https://drive.google.com/open?id=<id>
+//   https://drive.google.com/uc?id=<id>
+export function parseEmbedUrl(raw: string): ParsedEmbed | null {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+
+  let u: URL;
+  try {
+    u = new URL(trimmed);
+  } catch {
+    return null;
+  }
+
+  const host = u.hostname.replace(/^www\./, "").toLowerCase();
+
+  // ----- YouTube -----------------------------------------------------------
+  if (host === "youtube.com" || host === "m.youtube.com" || host === "youtu.be") {
+    const id = youtubeId(u, host);
+    if (id) {
+      return {
+        embedType: "youtube",
+        url: `https://www.youtube.com/embed/${id}`,
+      };
+    }
+    return null;
+  }
+
+  // ----- Google Drive ------------------------------------------------------
+  if (host === "drive.google.com") {
+    const id = driveId(u);
+    if (id) {
+      return {
+        embedType: "gdrive",
+        url: `https://drive.google.com/file/d/${id}/preview`,
+      };
+    }
+    return null;
+  }
+
+  return null;
+}
+
+const YT_ID = /^[A-Za-z0-9_-]{11}$/;
+
+function youtubeId(u: URL, host: string): string | null {
+  if (host === "youtu.be") {
+    const id = u.pathname.split("/").filter(Boolean)[0];
+    return id && YT_ID.test(id) ? id : null;
+  }
+  const v = u.searchParams.get("v");
+  if (v && YT_ID.test(v)) return v;
+  // /embed/<id> or /shorts/<id>
+  const segs = u.pathname.split("/").filter(Boolean);
+  if ((segs[0] === "embed" || segs[0] === "shorts") && segs[1] && YT_ID.test(segs[1])) {
+    return segs[1];
+  }
+  return null;
+}
+
+function driveId(u: URL): string | null {
+  // /file/d/<id>/...
+  const segs = u.pathname.split("/").filter(Boolean);
+  const dIdx = segs.indexOf("d");
+  if (segs[0] === "file" && dIdx >= 0 && segs[dIdx + 1]) return segs[dIdx + 1]!;
+  // ?id=<id> (open / uc)
+  const id = u.searchParams.get("id");
+  return id || null;
+}
diff --git a/packages/canvas/src/assets/importFiles.ts b/packages/canvas/src/assets/importFiles.ts
index 26fe615..28a046f 100644
--- a/packages/canvas/src/assets/importFiles.ts
+++ b/packages/canvas/src/assets/importFiles.ts
@@ -1,4 +1,4 @@
-import type { YAssetRef, AssetKind } from "@notux/types";
+import type { YAssetRef, YEmbed, YShape, AssetKind } from "@notux/types";
 import { newShapeId } from "../ids";
 import { useShapeStore } from "../store/shapeStore";
 import { useToolStore } from "../store/toolStore";
@@ -15,6 +15,8 @@ const MAX_IMAGE_SIZE = 640; // world units, longest side of a placed image
 const PDF_CELL_W = 360; // world units, grid cell width per page
 const PDF_GRID_GAP = 24; // world units between cells / stacked imports
 const PDF_GRID_COLS = 4;
+const AUDIO_CARD_W = 320; // world units, default audio player card
+const AUDIO_CARD_H = 96;
 
 export interface ImportResult {
   created: string[];
@@ -24,6 +26,7 @@ export interface ImportResult {
 function classify(file: File): AssetKind | null {
   if (file.type === "application/pdf") return "pdf";
   if (file.type.startsWith("image/")) return "image";
+  if (file.type.startsWith("audio/")) return "audio";
   return null;
 }
 
@@ -81,6 +84,28 @@ function makeShape(
   };
 }
 
+function makeAudioEmbed(
+  authorId: string,
+  assetId: string,
+  title: string,
+  x: number,
+  y: number,
+): YEmbed {
+  return {
+    id: newShapeId(),
+    author: authorId,
+    kind: "embed",
+    embedType: "audio",
+    assetId,
+    title,
+    x,
+    y,
+    w: AUDIO_CARD_W,
+    h: AUDIO_CARD_H,
+    rot: 0,
+  };
+}
+
 // Import images and PDFs at `world` (a drop point, or the viewport centre for
 // the toolbar button). Images become one shape; a PDF becomes one shape per
 // page laid out in a grid. All shapes are committed in a single transaction so
@@ -94,7 +119,7 @@ export async function importFiles(
   const list = Array.from(files);
   const assetStore = useAssetStore.getState();
   const errors: ImportResult["errors"] = [];
-  const shapes: YAssetRef[] = [];
+  const shapes: YShape[] = [];
   let originY = world.y; // advances so multiple files don't stack exactly
 
   for (const file of list) {
@@ -108,7 +133,24 @@ export async function importFiles(
       continue;
     }
     try {
-      if (kind === "image") {
+      if (kind === "audio") {
+        // No decoding: upload bytes and place a player card. The HTML overlay
+        // resolves the public URL from the assetId at render time.
+        const asset = await assetStore.ingest(file, {
+          kind: "audio",
+          pageCount: null,
+        });
+        shapes.push(
+          makeAudioEmbed(
+            authorId,
+            asset.id,
+            file.name,
+            world.x - AUDIO_CARD_W / 2,
+            originY - AUDIO_CARD_H / 2,
+          ),
+        );
+        originY += AUDIO_CARD_H + PDF_GRID_GAP;
+      } else if (kind === "image") {
         const dec = await decodeImageFile(file);
         const asset = await assetStore.ingest(file, {
           kind: "image",
diff --git a/packages/canvas/src/assets/storage.ts b/packages/canvas/src/assets/storage.ts
index 18fe448..b6e6921 100644
--- a/packages/canvas/src/assets/storage.ts
+++ b/packages/canvas/src/assets/storage.ts
@@ -26,6 +26,18 @@ export async function uploadAsset(
   if (error) throw error;
 }
 
+// Public URL for an asset's bytes, suitable for a direct <audio src>. The
+// board-assets bucket is public (0002 migration), so no signing is needed.
+export function assetPublicUrl(
+  client: SupabaseClient,
+  boardId: string,
+  assetId: string,
+): string {
+  return client.storage
+    .from(BOARD_ASSETS_BUCKET)
+    .getPublicUrl(assetPath(boardId, assetId)).data.publicUrl;
+}
+
 export async function downloadAssetBlob(
   client: SupabaseClient,
   boardId: string,
diff --git a/packages/canvas/src/layers/ShapesLayer.tsx b/packages/canvas/src/layers/ShapesLayer.tsx
index be7b6ae..e55ddee 100644
--- a/packages/canvas/src/layers/ShapesLayer.tsx
+++ b/packages/canvas/src/layers/ShapesLayer.tsx
@@ -4,6 +4,7 @@ import { Group, Layer } from "react-konva";
 import type Konva from "konva";
 import { ArrowRenderer } from "../renderers/ArrowRenderer";
 import { AssetRefRenderer } from "../renderers/AssetRefRenderer";
+import { EmbedRenderer } from "../renderers/EmbedRenderer";
 import { EllipseRenderer } from "../renderers/EllipseRenderer";
 import { LineRenderer } from "../renderers/LineRenderer";
 import { PolygonRenderer } from "../renderers/PolygonRenderer";
@@ -37,6 +38,8 @@ function renderShape(shape: YShape, selected: boolean) {
       return <StickyRenderer shape={shape} selected={selected} />;
     case "asset":
       return <AssetRefRenderer shape={shape} selected={selected} />;
+    case "embed":
+      return <EmbedRenderer shape={shape} selected={selected} />;
   }
 }
 
@@ -55,6 +58,7 @@ function groupTransform(shape: YShape): {
     case "text":
     case "sticky":
     case "asset":
+    case "embed":
       return { x: shape.x, y: shape.y, rotation: shape.rot ?? 0 };
     default:
       return {};
diff --git a/packages/canvas/src/layers/TransformLayer.tsx b/packages/canvas/src/layers/TransformLayer.tsx
index e75b819..cc8181f 100644
--- a/packages/canvas/src/layers/TransformLayer.tsx
+++ b/packages/canvas/src/layers/TransformLayer.tsx
@@ -18,7 +18,11 @@ interface Props {
 // show the dashed OverlayLayer box instead.
 function isTransformable(kind: YShape["kind"]): boolean {
   return (
-    kind === "rect" || kind === "ellipse" || kind === "text" || kind === "asset"
+    kind === "rect" ||
+    kind === "ellipse" ||
+    kind === "text" ||
+    kind === "asset" ||
+    kind === "embed"
   );
 }
 
@@ -66,7 +70,8 @@ export function TransformLayer({
           shape.kind === "rect" ||
           shape.kind === "ellipse" ||
           shape.kind === "text" ||
-          shape.kind === "asset"
+          shape.kind === "asset" ||
+          shape.kind === "embed"
         ) {
           const w = Math.max(1, shape.w * node.scaleX());
           const h = Math.max(1, shape.h * node.scaleY());
diff --git a/packages/canvas/src/renderers/EmbedRenderer.tsx b/packages/canvas/src/renderers/EmbedRenderer.tsx
new file mode 100644
index 0000000..eb00271
--- /dev/null
+++ b/packages/canvas/src/renderers/EmbedRenderer.tsx
@@ -0,0 +1,62 @@
+import type { YEmbed } from "@notux/types";
+import { Group, Rect, Text } from "react-konva";
+
+interface Props {
+  shape: YEmbed;
+  selected?: boolean;
+}
+
+const LABELS: Record<YEmbed["embedType"], string> = {
+  audio: "♫  Audio",
+  youtube: "▶  YouTube",
+  gdrive: "▶  Google Drive",
+};
+
+// Konva "card" for an audio/video resource. It owns selection, drag, resize and
+// z-order like any box shape; the live <audio>/<iframe> player is drawn on top
+// by MediaOverlayLayer (a DOM overlay), since Konva can't host those elements.
+// The card stays visible behind/around the player as a frame and while the
+// overlay loads. Drawn in local coords — the ShapesLayer Group carries
+// x/y/rotation.
+export function EmbedRenderer({ shape, selected }: Props) {
+  const sel = selected
+    ? { shadowColor: "#5ac8fa", shadowBlur: 12, shadowOpacity: 0.9 }
+    : {};
+  return (
+    <Group listening>
+      <Rect
+        width={shape.w}
+        height={shape.h}
+        cornerRadius={10}
+        fill="rgba(20, 22, 28, 0.92)"
+        stroke={selected ? "#5ac8fa" : "rgba(255,255,255,0.18)"}
+        strokeWidth={1}
+        {...sel}
+      />
+      <Text
+        x={12}
+        y={10}
+        width={shape.w - 24}
+        text={LABELS[shape.embedType]}
+        fontFamily="-apple-system, system-ui, sans-serif"
+        fontStyle="600"
+        fontSize={13}
+        fill="rgba(255,255,255,0.85)"
+        listening={false}
+      />
+      <Text
+        x={12}
+        y={30}
+        width={shape.w - 24}
+        height={shape.h - 36}
+        text={shape.title}
+        fontFamily="-apple-system, system-ui, sans-serif"
+        fontSize={12}
+        fill="rgba(255,255,255,0.5)"
+        ellipsis
+        wrap="none"
+        listening={false}
+      />
+    </Group>
+  );
+}
diff --git a/packages/canvas/src/store/assetStore.ts b/packages/canvas/src/store/assetStore.ts
index e2ca504..8f3b773 100644
--- a/packages/canvas/src/store/assetStore.ts
+++ b/packages/canvas/src/store/assetStore.ts
@@ -1,8 +1,11 @@
 import type { SupabaseClient } from "@supabase/supabase-js";
-import type { Asset, AssetKind } from "@notux/types";
+import type { Asset, AssetKind, YEmbed } from "@notux/types";
 import { create } from "zustand";
-import { newAssetId } from "../ids";
+import { newAssetId, newShapeId } from "../ids";
 import { uploadAsset, assetPath } from "../assets/storage";
+import { parseEmbedUrl } from "../assets/embeds";
+import { useShapeStore } from "./shapeStore";
+import { useToolStore } from "./toolStore";
 import { screenToWorld, type ViewportState } from "../viewport/Viewport";
 
 export interface AssetDecoded {
@@ -37,8 +40,17 @@ interface AssetStoreState {
   importAt(files: FileList | File[], world: { x: number; y: number }): Promise<void>;
   // Import via the toolbar button: place at the current viewport centre.
   importAtCenter(files: FileList | File[]): Promise<void>;
+  // Insert a YouTube/Google Drive embed from a pasted URL at the viewport
+  // centre. Returns an error message when the URL can't be parsed, else null.
+  insertEmbed(rawUrl: string): string | null;
 }
 
+// Default card sizes (world units) per embed provider.
+const YT_EMBED_W = 480;
+const YT_EMBED_H = 270; // 16:9
+const DRIVE_EMBED_W = 420;
+const DRIVE_EMBED_H = 120;
+
 export const useAssetStore = create<AssetStoreState>((set, get) => ({
   _boardId: null,
   _client: null,
@@ -108,4 +120,35 @@ export const useAssetStore = create<AssetStoreState>((set, get) => ({
     );
     await get().importAt(files, world);
   },
+
+  insertEmbed(rawUrl) {
+    const canvas = get()._canvas;
+    if (!canvas) return "Canvas is not ready";
+    const parsed = parseEmbedUrl(rawUrl);
+    if (!parsed) return "Unrecognised URL — paste a YouTube or Google Drive link";
+    const world = screenToWorld(
+      canvas.viewport,
+      canvas.size.w / 2,
+      canvas.size.h / 2,
+    );
+    const w = parsed.embedType === "youtube" ? YT_EMBED_W : DRIVE_EMBED_W;
+    const h = parsed.embedType === "youtube" ? YT_EMBED_H : DRIVE_EMBED_H;
+    const shape: YEmbed = {
+      id: newShapeId(),
+      author: canvas.authorId,
+      kind: "embed",
+      embedType: parsed.embedType,
+      url: parsed.url,
+      title: parsed.embedType === "youtube" ? "YouTube" : "Google Drive",
+      x: world.x - w / 2,
+      y: world.y - h / 2,
+      w,
+      h,
+      rot: 0,
+    };
+    const store = useShapeStore.getState();
+    store.transact(() => store.addShape(canvas.pageId, shape));
+    useToolStore.getState().setSelection([shape.id]);
+    return null;
+  },
 }));
diff --git a/packages/canvas/src/tools/shapeOps.ts b/packages/canvas/src/tools/shapeOps.ts
index 312d58a..8223450 100644
--- a/packages/canvas/src/tools/shapeOps.ts
+++ b/packages/canvas/src/tools/shapeOps.ts
@@ -37,6 +37,7 @@ export function shapeBounds(shape: YShape): Bounds {
     case "text":
     case "sticky":
     case "asset":
+    case "embed":
       return { x: shape.x, y: shape.y, w: shape.w, h: shape.h };
     case "line":
     case "arrow": {
@@ -72,6 +73,7 @@ export function translateShape(shape: YShape, dx: number, dy: number): YShape {
     case "text":
     case "sticky":
     case "asset":
+    case "embed":
       return { ...shape, x: shape.x + dx, y: shape.y + dy };
     case "line":
     case "arrow":
diff --git a/packages/types/src/asset.ts b/packages/types/src/asset.ts
index 9639d48..9ed4174 100644
--- a/packages/types/src/asset.ts
+++ b/packages/types/src/asset.ts
@@ -1,4 +1,4 @@
-export type AssetKind = "pdf" | "image";
+export type AssetKind = "pdf" | "image" | "audio";
 
 export interface Asset {
   id: string;
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 82061fc..8dff0da 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -12,6 +12,7 @@ export type {
   YText,
   YSticky,
   YAssetRef,
+  YEmbed,
   YShape,
   YShapeKind,
   ToolKind,
diff --git a/packages/types/src/yshape.ts b/packages/types/src/yshape.ts
index 1f515e3..0a07f36 100644
--- a/packages/types/src/yshape.ts
+++ b/packages/types/src/yshape.ts
@@ -142,6 +142,25 @@ export interface YAssetRef extends YShapeBase {
   rot: number;
 }
 
+// Audio/video resource placed on the board. Rendered as a selectable Konva card
+// (EmbedRenderer) with a live HTML player floated on top (MediaOverlayLayer),
+// since Konva's <canvas> can't host <audio>/<iframe>.
+//   - "audio":   uploaded file. `assetId` points at Storage (AssetKind "audio").
+//   - "youtube": `url` is a youtube.com/embed/<id> URL.
+//   - "gdrive":  `url` is a drive.google.com/file/d/<id>/preview URL.
+export interface YEmbed extends YShapeBase {
+  kind: "embed";
+  embedType: "audio" | "youtube" | "gdrive";
+  assetId?: string;
+  url?: string;
+  title: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  rot: number;
+}
+
 export type YShape =
   | YStroke
   | YRect
@@ -151,6 +170,7 @@ export type YShape =
   | YArrow
   | YText
   | YSticky
-  | YAssetRef;
+  | YAssetRef
+  | YEmbed;
 
 export type YShapeKind = YShape["kind"];
diff --git a/supabase/migrations/0003_audio_resources.sql b/supabase/migrations/0003_audio_resources.sql
new file mode 100644
index 0000000..5e42745
--- /dev/null
+++ b/supabase/migrations/0003_audio_resources.sql
@@ -0,0 +1,11 @@
+-- NotUX: allow audio assets (MP3 upload) alongside pdf/image.
+-- Widens the assets.kind CHECK constraint from 0001_init.sql. The board-assets
+-- bucket and RLS (0002) already accept arbitrary bytes, so no storage change is
+-- needed. The metadata row is best-effort (assetStore.ingest swallows failures),
+-- but keeping the constraint in sync avoids rejecting valid audio rows.
+
+alter table assets drop constraint if exists assets_kind_check;
+
+alter table assets
+  add constraint assets_kind_check
+  check (kind in ('pdf', 'image', 'audio'));