@rigel-cms/rigel 0.2.0-beta.1 → 1.0.0

package/src/editor/lib/ImagePicker.svelte

@@ -1,20 +1,39 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
+  import { onMount, onDestroy, tick } from "svelte";
   import Icon from "./Icon.svelte";
+  import ActionDialog from "./ActionDialog.svelte";
   import Select from "./Select.svelte";
   import { getSettings, setSettings } from "./settings";
-  import { MEDIA_CATEGORIES, mediaMetadata, mediaAccept, safeMediaName } from "../../media-types";
-  import { filterMedia, modifiedMonth, mediaSize, assetFile, type MediaAsset } from "./media-library";
+  import { DEFAULT_MAX_FILE_SIZE, MEDIA_CATEGORIES, mediaMetadata, mediaAccept, safeMediaName } from "../../media-types";
+  import config from "virtual:rigel-config";
+  import { parseEmbedUrl, embedWatchUrl, type EmbedProvider } from "./embeds";
+  import type { EmbedData } from "../blocks/embed";
+  import type { VideoData } from "../blocks/video";
+  import { filterMedia, modifiedMonth, mediaSize, mediaIcon, assetFile, type MediaAsset } from "./media-library";
   import { searchImages, importStockImage, importImageUrl, uploadMedia, safeImageUrl, STOCK_PROVIDERS, type StockResult, type StockSource } from "./images";
 
-  let { value = "", altText = "", triggerLabel = "Insert image", onpick, inline = false, toolbar = false, onopen, onclose }: {
+  let { value = "", altText = "", triggerLabel = "Insert image", kind = "image", video, onvideo, embed, onembed, onpick, inline = false, toolbar = false, hiddenTrigger = false, onopen, onclose }: {
+    video?: VideoData;
+    onvideo?: (video: VideoData) => void;
+    embed?: EmbedData;
+    onembed?: (embed: EmbedData) => void;
+    kind?: "image" | "video";
     value?: string; onpick?: (url: string, alt: string, credit?: StockResult) => void;
     altText?: string; triggerLabel?: string;
-    inline?: boolean; toolbar?: boolean; onopen?: () => void; onclose?: () => void;
+    inline?: boolean; toolbar?: boolean; hiddenTrigger?: boolean; onopen?: () => void; onclose?: () => void;
   } = $props();
+  const id = $props.id();
+  const maxFileSize = config.maxFileSize ?? DEFAULT_MAX_FILE_SIZE;
   let open = $state(false);
-  let tab = $state<"library" | "upload" | "url" | StockSource>("library");
-  const tabs = ["library", "upload", "url", "picsum", ...Object.keys(STOCK_PROVIDERS)] as (typeof tab)[];
+  let tab = $state<"library" | "upload" | "url" | EmbedProvider | StockSource>("library");
+  const providerTab = $derived(tab === "youtube" || tab === "vimeo");
+  const editing = $derived(!!embed || !!value);
+  const stockKeys = $derived(open ? getSettings().apiKeys : null);
+  const tabs = $derived((kind === "video" ? ["library", "upload", "url", "youtube", "vimeo"] : ["library", "upload", "url", "picsum", ...Object.keys(STOCK_PROVIDERS).filter(source => stockKeys?.[source as keyof typeof STOCK_PROVIDERS]?.trim())]) as (typeof tab)[]);
+  let videoTitle = $state("");
+  let privacy = $state(true);
+  let muted = $state(false);
+  let controls = $state(true);
   let query = $state("");
   let filter = $state("");
   let format = $state("");
@@ -35,10 +54,13 @@
   let urlInput = $state("");
   let alt = $state("");
   let selected = $state<{url: string; stock?: StockResult; file?: File; asset?: MediaAsset} | null>(null);
+  const selectedMetadata = $derived(mediaMetadata(selected?.file?.name ?? assetFile(selected?.asset?.url ?? "")));
   let metaName = $state("");
   let metaTitle = $state("");
   let metaDescription = $state("");
   let metaAlt = $state("");
+  let confirmDelete = $state(false);
+  let deleteTrigger = $state<HTMLButtonElement>();
   let savingMeta = $state(false);
   let metaError = $state("");
   let metaNotice = $state("");
@@ -69,13 +91,32 @@
     } catch { metaError = "Metadata save failed"; }
     finally { savingMeta = false; }
   }
-  const needsImport = $derived(!!selected?.file || (!!selected && ((inline && tab === "url") || !selected.url.startsWith("/")) && selected.stock?.source !== "unsplash"));
+  async function deleteFile() {
+    if (!selected?.asset || !writable || picking || savingMeta) return;
+    const url = selected.asset.url;
+    picking = true;
+    try {
+      const response = await fetch("/rigel/api/local/media", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url }) });
+      if (!response.ok) throw new Error(`Could not delete file (${response.status}). Try again.`);
+      assets = assets.filter(asset => asset.url !== url);
+      librarySelection = ""; notice = "File deleted.";
+      close();
+    } finally { picking = false; }
+  }
+  const needsImport = $derived(!!selected?.file || (kind !== "video" && !!selected && ((inline && tab === "url") || !selected.url.startsWith("/")) && selected.stock?.source !== "unsplash"));
+  const imageImport = $derived(needsImport && kind === "image" && (!selected?.file || mediaMetadata(selected.file.name)?.category === "Images"));
+  const metadataImport = $derived(needsImport && (inline || imageImport));
+  function selectStock(image: StockResult) {
+    selected = { url: image.url, stock: image };
+    metaTitle = (image.title ?? "").slice(0, 200); metaDescription = (image.description ?? "").slice(0, 1000);
+    alt = (image.alt ?? altText).slice(0, 1000);
+  }
 
   async function library() {
     const response = await fetch("/rigel/media.json", { cache: "no-store" });
     if (!response.ok) throw new Error("Media listing unavailable. Start the local dev server or rebuild the site.");
     const data = await response.json();
-    assets = (data.assets ?? data.images).filter((asset: MediaAsset) => inline || asset.type?.startsWith("image/"));
+    assets = (data.assets ?? data.images).filter((asset: MediaAsset) => inline || asset.type?.startsWith(kind === "video" ? "video/" : "image/"));
     writable = data.writable === true;
     folder = data.folder;
   }
@@ -89,10 +130,12 @@
     if (picking) return;
     const request = ++requestId;
     error = "";
+    if (providerTab) return;
     if (tab === "url") {
-      if (!safeImageUrl(urlInput.trim())) { error = "Enter an image URL starting with https:// or /"; return; }
+      if (!safeImageUrl(urlInput.trim())) { error = `Enter ${kind === "video" ? "a video" : "an image"} URL starting with https:// or /`; return; }
       const metadata = mediaMetadata(new URL(urlInput.trim(), location.origin).pathname);
-      if (metadata && metadata.category !== "Images") { error = "Choose an image URL, not a document or other media file."; return; }
+      if (kind === "video" && metadata?.category !== "Video") { error = "Choose an MP4, WebM or MOV video URL."; return; }
+      if (kind === "image" && metadata && metadata.category !== "Images") { error = "Choose an image URL, not a document or other media file."; return; }
       selected = { url: urlInput.trim() };
       return;
     }
@@ -100,7 +143,7 @@
     try {
       if (tab === "library" || tab === "upload") await library();
       else {
-        const found = await searchImages(tab, query);
+        const found = await searchImages(tab as StockSource, query);
         if (request === requestId) results = found;
       }
       if (request === requestId) searched = true;
@@ -108,17 +151,31 @@
     finally { if (request === requestId) loading = false; }
   }
   async function confirm() {
+    if (providerTab) {
+      const ref = parseEmbedUrl(urlInput);
+      if (!ref || ref.provider !== tab) { error = `Paste a ${tab === "youtube" ? "YouTube" : "Vimeo"} video URL.`; return; }
+      onembed?.({ ...ref, title: videoTitle.trim() || undefined, privacy });
+      close();
+      return;
+    }
     if (!selected || picking) return;
     const request = ++requestId;
     const choice = selected;
+    const metadata = metadataImport ? { title: metaTitle.trim(), description: metaDescription.trim(), ...(imageImport ? { alt: alt.trim() } : {}) } : null;
     picking = true; error = "";
     try {
       const url = choice.file ? await uploadMedia(choice.file) : choice.stock ? await importStockImage(choice.stock) : needsImport ? await importImageUrl(choice.url) : choice.url;
-      if (!safeImageUrl(url)) throw new Error("Unsafe image URL");
+      if (!safeImageUrl(url)) throw new Error("Unsafe media URL");
+      if (metadata) {
+        const saved = await fetch("/rigel/api/local/media", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url, ...metadata }) });
+        if (!saved.ok) throw new Error(`File uploaded, but metadata could not be saved (${saved.status}). Retry to finish the import.`);
+      }
+      if (kind === "video" && mediaMetadata(new URL(url, location.origin).pathname)?.category !== "Video") throw new Error("Choose an MP4, WebM or MOV video URL.");
       if (request === requestId) {
         if (inline) {
           await library(); resetFilters(); notice = "Media available in the repository library.";
-        } else onpick?.(url, alt, choice.stock);
+        } else if (kind === "video") onvideo?.({ src: url, caption: alt.trim() || undefined, muted, controls });
+        else onpick?.(url, alt, choice.stock);
         close();
       }
     } catch (e) { if (request === requestId) error = e instanceof Error ? e.message : "Photo import failed"; }
@@ -127,22 +184,33 @@
   function upload(file?: File) {
     if (!file || picking) return;
     error = "";
-    if (!safeMediaName(file.name) || (!inline && mediaMetadata(file.name)?.category !== "Images") || file.size > 10 * 1024 * 1024) {
-      error = "Choose a supported " + (inline ? "file" : "image") + " up to 10 MB with a safe filename."; return;
+    const limit = maxFileSize;
+    if (!safeMediaName(file.name) || (!inline && mediaMetadata(file.name)?.category !== (kind === "video" ? "Video" : "Images")) || file.size > limit) {
+      error = `Choose a supported ${inline ? "file" : kind} up to ${limit / 1024 / 1024} MB with a safe filename.`; return;
     }
-    releaseFile(); objectURL = URL.createObjectURL(file);
+    const type = mediaMetadata(file.name)!.type;
+    releaseFile(); objectURL = URL.createObjectURL(new Blob([file], { type: type === "text/plain" ? "text/plain; charset=utf-8" : type }));
+    metaTitle = file.name.replace(/\.[^.]+$/, "").slice(0, 200); metaDescription = ""; alt = altText;
     selected = { url: objectURL, file };
   }
   function close() {
-    requestId++; dialog?.close(); open = false; loading = false; picking = false; selected = null; error = "";
+    requestId++; confirmDelete = false; dialog?.close(); open = false; loading = false; picking = false; selected = null; error = "";
     releaseFile(); onclose?.(); trigger?.focus();
   }
   function changeTab(next: typeof tab) {
-    alt = altText;
+    alt = altText; metaTitle = ""; metaDescription = "";
     requestId++; releaseFile(); tab = next; results = []; selected = null; error = ""; searched = false; loading = false;
+    if (next === "youtube" || next === "vimeo") {
+      urlInput = embed?.provider === next ? embedWatchUrl(embed) : next === "youtube" ? "https://www.youtube.com/watch?v=dQw4w9WgXcQ" : "https://vimeo.com/861680818";
+      videoTitle = embed?.provider === next ? embed.title ?? "" : next === "youtube" ? "Rick Astley - Never Gonna Give You Up (Rickroll)" : "The Rolling Stones - Angry";
+      privacy = embed?.provider === next ? embed.privacy : true;
+      return;
+    }
+    urlInput = value;
     if (tab !== "url") void run();
   }
-  function launch() { onopen?.(); open = true; urlInput = value; alt = altText; changeTab(inline ? "upload" : "library"); }
+  export function launch() { onopen?.(); open = true; urlInput = value; alt = altText; changeTab(inline ? "upload" : "library"); }
+  export function launchVideo(source: "library" | EmbedProvider) { onopen?.(); open = true; muted = video?.muted === true; controls = video?.controls !== false; changeTab(source); }
 </script>
 
 {#if inline}
@@ -153,7 +221,7 @@
     {#if error && !open}<p class="error" role="alert">{error}</p>{/if}
   </div>
 {:else if toolbar}
-  <button bind:this={trigger} data-image-trigger type="button" aria-label={triggerLabel} data-tooltip={triggerLabel} onmousedown={event => event.preventDefault()} onclick={launch}><Icon name="image" size={18} /></button>
+  <button bind:this={trigger} data-image-trigger={kind === "image" ? "" : undefined} type="button" aria-label={triggerLabel} data-tooltip={triggerLabel} hidden={hiddenTrigger} onmousedown={event => event.preventDefault()} onclick={launch}><Icon name="image" size={18} /></button>
 {:else}
   <div class="image-field">
     {#if value}<img src={value} alt="" class="preview" />{:else}<div class="preview empty">No image</div>{/if}
@@ -170,7 +238,7 @@
       <button type="button" class="outlined" data-tooltip="List view" aria-label="List view" aria-pressed={view === "list"} onclick={() => setView("list")}><Icon name="listBullets" size={18} /></button>
     </div>
     <div class="media-select">
-      <Select ariaLabel={inline ? "Media type" : "Image format"} value={format} onchange={next => { format = String(next); }} options={inline ? [{ value: "", label: "All media items" }, ...MEDIA_CATEGORIES.map(category => ({ value: category, label: category }))] : [{ value: "", label: "All images" }, ...["jpeg", "png", "webp", "gif", "avif"].map(format => ({ value: `image/${format}`, label: format === "jpeg" ? "JPEG" : format === "webp" ? "WebP" : format.toUpperCase() }))]} />
+      <Select ariaLabel={inline ? "Media type" : kind === "video" ? "Video format" : "Image format"} value={format} onchange={next => { format = String(next); }} options={inline ? [{ value: "", label: "All media items" }, ...MEDIA_CATEGORIES.map(category => ({ value: category, label: category }))] : kind === "video" ? [{ value: "", label: "All videos" }, { value: "video/mp4", label: "MP4" }, { value: "video/webm", label: "WebM" }, { value: "video/quicktime", label: "MOV" }] : [{ value: "", label: "All images" }, ...["jpeg", "png", "webp", "gif", "avif"].map(format => ({ value: `image/${format}`, label: format === "jpeg" ? "JPEG" : format === "webp" ? "WebP" : format.toUpperCase() }))]} />
     </div>
     <div class="media-select">
       <Select ariaLabel="Modified month" data-tooltip="Filesystem modified month (UTC), not upload date" value={month} onchange={next => { month = String(next); }} options={[{ value: "", label: "All modified dates" }, ...months.map(date => ({ value: date, label: new Date(date + "-01T00:00:00Z").toLocaleDateString(undefined, { month: "long", year: "numeric", timeZone: "UTC" }) }))]} />
@@ -180,48 +248,62 @@
     <input class="media-search" aria-label="Search media" type="search" bind:value={filter} placeholder="Search media…" />
   </div>
   {#if view === "grid"}<div class="grid">
-    {#each filtered as asset}
-      <figure><button type="button" class="thumb" aria-label={asset.name} data-tooltip={asset.name} aria-pressed={librarySelection === asset.url} onclick={() => selectAsset(asset)}>{#if asset.type?.startsWith("image/")}<img src={asset.url} alt={asset.name} loading="lazy" />{:else}<span class="media-file-icon"><Icon name="listBullets" size={40} /><span>{mediaMetadata(asset.name)?.category} · {mediaMetadata(asset.name)?.extension.toUpperCase()}</span></span>{/if}</button><figcaption>{asset.name}</figcaption></figure>
+    {#each filtered as asset, index}
+      {@const extension = mediaMetadata(assetFile(asset.url))?.extension.toUpperCase() ?? "FILE"}
+      <figure><button type="button" class="thumb" aria-label={asset.name} aria-describedby={`${id}-extension-${index}`} data-tooltip={asset.name} aria-pressed={librarySelection === asset.url} onclick={() => selectAsset(asset)}>{#if asset.type?.startsWith("image/")}<img src={asset.url} alt={asset.name} loading="lazy" />{:else if asset.type?.startsWith("video/")}<video src={`${asset.url}#t=0.001`} muted preload="metadata" playsinline aria-hidden="true"></video>{:else}<span class="media-file-icon"><Icon name={mediaIcon(assetFile(asset.url))} size={40} /><span>{mediaMetadata(assetFile(asset.url))?.category}</span></span>{/if}<span id={`${id}-extension-${index}`} class="media-extension">{extension}</span></button><figcaption>{asset.name}</figcaption></figure>
     {/each}
   </div>
   {:else}<div class="table-card media-table"><table aria-label="Media library"><thead><tr><th scope="col">File</th><th scope="col">Type</th><th scope="col">Size</th><th scope="col">Modified (UTC)</th></tr></thead><tbody>
-    {#each filtered as asset}<tr><td><button type="button" class="table-link media-file" aria-pressed={librarySelection === asset.url} onclick={() => selectAsset(asset)}>{#if asset.type?.startsWith("image/")}<img src={asset.url} alt="" loading="lazy" />{:else}<Icon name="listBullets" size={28} />{/if}<span>{asset.name}</span></button></td><td>{asset.type?.replace("image/", "").toUpperCase() || "—"}</td><td>{mediaSize(asset.size)}</td><td>{modifiedMonth(asset.modified) ? new Date(asset.modified!).toLocaleDateString(undefined, {timeZone: "UTC"}) : "—"}</td></tr>{/each}
+    {#each filtered as asset}<tr><td><button type="button" class="table-link media-file" aria-pressed={librarySelection === asset.url} onclick={() => selectAsset(asset)}><span class="media-thumbnail" aria-hidden="true">{#if asset.type?.startsWith("image/")}<img src={asset.url} alt="" loading="lazy" />{:else}<Icon name={mediaIcon(assetFile(asset.url))} size={28} />{/if}</span><span>{asset.name}</span></button></td><td>{asset.type?.replace("image/", "").toUpperCase() || "—"}</td><td>{mediaSize(asset.size)}</td><td>{modifiedMonth(asset.modified) ? new Date(asset.modified!).toLocaleDateString(undefined, {timeZone: "UTC"}) : "—"}</td></tr>{/each}
   </tbody></table></div>{/if}
   {#if loading}<p role="status">Loading media…</p>{:else if !filtered.length}<p role="status">{assets.length ? "No media match these filters." : "No media in this folder yet."}</p>{/if}
 {/snippet}
 
 {#if open}
-  <dialog bind:this={dialog} class="rigel-modal-backdrop rigel image-dialog" aria-label={inline ? "Upload media" : "Choose image"} oncancel={e => { e.preventDefault(); if (!picking) close(); }} onclick={e => { if (e.target === dialog && !picking) close(); }}>
+  <dialog bind:this={dialog} class="rigel-modal-backdrop rigel image-dialog" class:media-insert={providerTab} aria-label={providerTab ? editing ? "Edit video" : "Add video link" : inline ? "Upload media" : kind === "video" ? "Choose video" : "Choose image"} oncancel={e => { e.preventDefault(); if (!picking) close(); }} onclick={e => { if (e.target === dialog && !picking) close(); }}>
     <div class="rigel-modal image-picker">
-      <div class="media-head"><h2>{selected ? "Preview media" : inline ? "Upload media" : "Choose image"}</h2><button bind:this={cancel} type="button" class="close" aria-label="Close" disabled={picking} onclick={close}><Icon name="x" size={14} weight="bold" /></button></div>
+      <div class="media-head"><h2>{providerTab ? `${editing ? "Edit" : "Add"} ${tab === "youtube" ? "YouTube" : "Vimeo"} video` : selected ? "Preview media" : inline ? "Upload media" : kind === "video" ? "Choose video" : "Choose image"}</h2><button bind:this={cancel} type="button" class="close" aria-label="Close" disabled={picking} onclick={close}><Icon name="x" size={14} weight="bold" /></button></div>
       {#if selected}
-        <div class="media-selection" class:media-editing={inline && !!selected.asset}>
+        <div class="media-selection" class:media-editing={(inline && !!selected.asset) || metadataImport}>
           <div class="media-preview">
-          {#if (!selected.file && !selected.asset) || mediaMetadata(selected.file?.name ?? (selected.asset ? assetFile(selected.asset.url) : ""))?.category === "Images"}<img src={selected.url} alt="Selected image preview" />{:else}<div class="media-file-icon"><Icon name="listBullets" size={64} /><p>{mediaMetadata(selected.file?.name ?? (selected.asset ? assetFile(selected.asset.url) : ""))?.category} · {mediaSize(selected.file?.size ?? selected.asset?.size)}</p><p>{selected.asset?.type ?? mediaMetadata(selected.file?.name ?? "")?.type}</p></div>{/if}
+          {#if kind === "video" || selectedMetadata?.category === "Video"}
+            <video src={selected.url} controls={kind === "video" ? controls : true} muted={kind === "video" ? muted : false} preload="metadata" playsinline></video>
+          {:else if selectedMetadata?.extension === "pdf" || selectedMetadata?.extension === "txt"}
+            <iframe src={`${selected.file ? selected.url : `${selected.url}?preview=1`}${selectedMetadata.extension === "pdf" ? "#navpanes=0&view=FitH" : ""}`} title={selectedMetadata.extension === "pdf" ? "PDF preview" : "Text preview"} sandbox={selectedMetadata.extension === "txt" ? "" : undefined}></iframe>
+          {:else if (!selected.file && !selected.asset) || selectedMetadata?.category === "Images"}
+            <img src={selected.url} alt="Selected image preview" />
+          {:else}
+            <div class="media-file-icon"><Icon name={mediaIcon(selected.file?.name ?? assetFile(selected.asset?.url ?? ""))} size={64} /><p>{selectedMetadata?.category} · {mediaSize(selected.file?.size ?? selected.asset?.size)}</p><p>{selectedMetadata?.type}</p></div>
+          {/if}
           </div>
           <div class="media-details">
-          {#if inline && selected.asset}
+          {#if (inline && selected.asset) || metadataImport}
             <div class="media-meta">
-              <label>Display name<input aria-label="Media display name" type="text" maxlength="120" bind:value={metaName} /></label>
-              {#if selected.asset.type?.startsWith("image/")}<label>Alt text<textarea aria-label="Media alt text" rows="3" maxlength="1000" bind:value={metaAlt}></textarea></label>{/if}
-              <label>Title<input aria-label="Media title" type="text" maxlength="200" bind:value={metaTitle} /></label>
-              <label>Description<textarea aria-label="Media description" rows="3" maxlength="1000" bind:value={metaDescription}></textarea></label>
-              <p class="hint">Author: {selected.asset.author || "Local user"}</p>
-              {#if metaError}<p class="error" role="alert">{metaError}</p>{/if}
-              {#if metaNotice}<p role="status">{metaNotice}</p>{/if}
+              {#if inline && selected.asset}<label><span>Display name</span><input aria-label="Media display name" type="text" maxlength="120" bind:value={metaName} /></label>{/if}
+              {#if imageImport}<label><span>Alt text (leave empty if decorative)</span><input aria-label="Image alt text" type="text" maxlength="1000" disabled={picking} bind:value={alt} /></label>{:else if selected.asset?.type?.startsWith("image/")}<label><span>Alt text</span><textarea aria-label="Media alt text" rows="3" maxlength="1000" bind:value={metaAlt}></textarea></label>{/if}
+              <label><span>Title</span><input aria-label={imageImport ? "Image title" : "Media title"} type="text" maxlength="200" disabled={picking} bind:value={metaTitle} /></label>
+              <label><span>Description</span><textarea aria-label={imageImport ? "Image description" : "Media description"} rows="3" maxlength="1000" disabled={picking} bind:value={metaDescription}></textarea></label>
+              {#if selected.asset}<p class="hint">Author: {selected.asset.author || "Local user"}</p>{:else if selected.file}<p class="hint">{selected.file.name}</p>{/if}
             </div>
           {:else if selected.file}
             <p class="hint">{selected.file.name}</p>
           {:else if !selected.asset}
-            <label>Image URL<input type="text" readonly value={selected.url} /></label>
+            <label><span>{kind === "video" ? "Video URL" : "Image URL"}</span><input type="text" readonly value={selected.url} /></label>
+          {/if}
+          {#if imageImport && !selected.file}<label><span>Image URL</span><input type="text" readonly value={selected.url} /></label>{/if}
+          {#if !inline && !imageImport}<label><span>{kind === "video" ? "Caption (optional)" : "Alt text (describe the image; leave empty if decorative)"}</span><input aria-label={kind === "video" ? "Video caption" : undefined} type="text" bind:value={alt} /></label>{/if}
+          {#if kind === "video"}
+            <label class="inline"><input type="checkbox" role="switch" class="switch" aria-label="Muted" bind:checked={muted} /><span>Muted</span></label>
+            <label class="inline"><input type="checkbox" role="switch" class="switch" aria-label="Show controls" bind:checked={controls} /><span>Show controls</span></label>
           {/if}
-          {#if !inline}<label>Alt text (describe the image; leave empty if decorative)<input type="text" bind:value={alt} /></label>{/if}
           {#if selected.stock?.credit}<p class="hint">{selected.stock.credit}</p>{/if}
-          {#if needsImport}<p class="hint">Confirmation downloads this file into the repository media folder. Content still requires Save.</p>{/if}
+          {#if needsImport}<p class="hint">Confirmation {selected.file ? "uploads" : "downloads"} this file into the repository media folder. Content still requires Save.</p>{/if}
           </div>
           <div class="media-actions" class:with-media-path={!!selected.asset}>
+          {#if metaError || metaNotice}<p class="media-feedback" class:error={!!metaError} role={metaError ? "alert" : "status"}>{metaError || metaNotice}</p>{/if}
           {#if selected.asset}
             <a class="outlined media-download" href={selected.asset.url} download={assetFile(selected.asset.url)}>Download file</a>
+            {#if inline && writable}<button bind:this={deleteTrigger} type="button" class="danger-btn" aria-label="Delete file" disabled={picking || savingMeta} onclick={() => { confirmDelete = true; }}>Delete file</button>{/if}
             <pre class="media-path" role="region" aria-label="Media file path" tabindex="0"><code>{selected.asset.url}</code></pre>
           {/if}
           <div class="media-button-actions">
@@ -230,22 +312,31 @@
             <button type="button" class="primary" disabled={picking || savingMeta} onclick={saveMetadata}>{savingMeta ? "Saving…" : "Save"}</button>
           {:else}
             <button type="button" class="outlined" disabled={picking} onclick={() => { selected = null; releaseFile(); }}>Back</button>
-            {#if inline && tab === "library"}<button type="button" class="primary" onclick={close}>Done</button>{:else}<button type="button" class="primary" disabled={picking || (needsImport && !writable)} onclick={confirm}>{picking ? "Importing photo…" : !inline ? "Insert image" : selected.file && mediaMetadata(selected.file.name)?.category !== "Images" ? "Upload file" : "Import image"}</button>{/if}
+            {#if inline && tab === "library"}<button type="button" class="primary" onclick={close}>Done</button>{:else}<button type="button" class="primary" disabled={picking || (needsImport && !writable)} onclick={confirm}>{picking ? kind === "video" ? "Uploading video…" : "Importing photo…" : kind === "video" ? "Use video" : !inline ? "Insert image" : selected.file && mediaMetadata(selected.file.name)?.category !== "Images" ? "Upload file" : "Import image"}</button>{/if}
           {/if}</div>
           </div>
         </div>
       {:else}
-        <div class="tabs" aria-label="Image sources">
-          {#each tabs.filter(t => !inline || (t !== "library" && t !== "unsplash")) as t}<button type="button" class:active={tab === t} aria-pressed={tab === t} disabled={picking} onclick={() => changeTab(t)}>{t}</button>{/each}
+        <div class="tabs" aria-label={kind === "video" ? "Video sources" : "Image sources"}>
+          {#each tabs.filter(t => !inline || (t !== "library" && t !== "unsplash")) as t}<button type="button" data-source={t} class:active={tab === t} aria-pressed={tab === t} disabled={picking} onclick={() => changeTab(t)}>{t === "youtube" ? "YouTube" : t === "vimeo" ? "Vimeo" : t}</button>{/each}
         </div>
         {#if inline}<p class="hint">Unsplash API photos require hotlinking and are available only when inserting images into content, not as repository uploads.</p>{/if}
-        {#if tab === "library"}
+        {#if providerTab}
+          <p class="hint">Paste a {tab === "youtube" ? "YouTube" : "Vimeo"} link. Privacy-enhanced mode is enabled by default.</p>
+          <label><span>Video URL</span><input type="text" bind:value={urlInput} placeholder={tab === "youtube" ? "https://www.youtube.com/watch?v=…" : "https://vimeo.com/…"} /></label>
+          <label><span>Title for accessibility (optional)</span><input type="text" maxlength="200" bind:value={videoTitle} /></label>
+          <label class="inline"><input type="checkbox" role="switch" class="switch" bind:checked={privacy} /><span>Privacy-enhanced (no cookies until play)</span></label>
+          <div class="media-actions media-button-actions">
+            <button type="button" class="outlined" onclick={close}>Cancel</button>
+            <button type="button" class="primary" onclick={confirm}>{editing ? "Update video" : "Insert"}</button>
+          </div>
+        {:else if tab === "library"}
           {@render libraryBrowser()}
         {:else if tab === "upload"}
           <p class="hint">Choose a local file, then preview and confirm. Nothing is uploaded until confirmation.</p>
-          {#if writable}<label>{inline ? "Upload media (images, audio, video, documents, spreadsheets, archives; 10 MB)" : "Upload image (JPEG, PNG, WebP, GIF, AVIF; 10 MB)"}<input type="file" accept={mediaAccept(!inline)} onchange={e => upload(e.currentTarget.files?.[0])} /></label>{:else}<p role="status">Local uploads require the local dev server. This library is read-only.</p>{/if}
+          {#if writable}<label><span>{kind === "video" ? "Upload video (MP4, WebM, MOV)" : inline ? "Upload media (images, audio, video, documents, spreadsheets, archives)" : "Upload image (JPEG, PNG, WebP, GIF, AVIF)"} · {maxFileSize / 1024 / 1024} MB maximum</span><input type="file" accept={kind === "video" ? ".mp4,.webm,.mov" : mediaAccept(!inline)} onchange={e => upload(e.currentTarget.files?.[0])} /></label>{:else}<p role="status">Local uploads require the local dev server. This library is read-only.</p>{/if}
         {:else if tab === "url"}
-          <label>Image URL<input type="url" bind:value={urlInput} placeholder="https://… or /images/photo.jpg" /></label>
+          <label><span>{kind === "video" ? "Video URL" : "Image URL"}</span><input type="url" bind:value={urlInput} placeholder={kind === "video" ? "https://… or /media/video.mp4" : "https://… or /images/photo.jpg"} /></label>
           <button type="button" class="primary" onclick={run}>Use this URL</button>
         {:else}
           <p class="hint">{tab === "picsum" ? "Placeholder photos from Lorem Picsum (seed, not semantic search)." : tab === "unsplash" ? "Unsplash photos stay linked to Unsplash; selection records a download." : "Import selected photos into the media folder (local dev only)."}</p>
@@ -253,7 +344,7 @@
           {#if searched && !results.length && !error}<p class="hint" role="status">No photos found. Try another search.</p>{/if}
           <div class="grid">
             {#each results as r (r.url)}
-              <figure><button type="button" class="thumb" disabled={picking} onclick={() => selected = {url: r.url, stock: r}} data-tooltip={r.credit}><img src={r.thumb} alt={r.credit} loading="lazy" /></button><figcaption>{#if r.creditURL?.startsWith("https://")}<a href={r.creditURL} target="_blank" rel="noopener noreferrer">{r.credit}</a>{:else}{r.credit}{/if}</figcaption></figure>
+              <figure><button type="button" class="thumb" disabled={picking} onclick={() => selectStock(r)} data-tooltip={r.credit}><img src={r.thumb} alt={r.credit} loading="lazy" /></button><figcaption>{#if r.creditURL?.startsWith("https://")}<a href={r.creditURL} target="_blank" rel="noopener noreferrer">{r.credit}</a>{:else}{r.credit}{/if}</figcaption></figure>
             {/each}
           </div>
         {/if}
@@ -261,4 +352,7 @@
       {#if error}<p class="error" role="alert">{error}</p>{/if}
     </div>
   </dialog>
+  {#if confirmDelete && selected?.asset}
+    <ActionDialog title={`Delete “${selected.asset.name}”?`} description="This permanently deletes the file and its metadata. This cannot be undone. Any pages using this file will have broken media or links." confirmLabel="Delete file" danger onconfirm={deleteFile} onclose={async () => { confirmDelete = false; await tick(); deleteTrigger?.focus(); }} />
+  {/if}
 {/if}

package/src/editor/lib/MediaPicker.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import Icon from "./Icon.svelte";
+  import { tick } from "svelte";
+  import ImagePicker from "./ImagePicker.svelte";
+  import type { EmbedRef } from "./embeds";
+  import type { EmbedData } from "../blocks/embed";
+  import type { VideoData } from "../blocks/video";
+
+  let { triggerLabel = "Insert media", hiddenTrigger = false, onimage, onvideo, onembed, onopen, onclose = () => {} }: {
+    triggerLabel?: string;
+    hiddenTrigger?: boolean;
+    onimage?: () => void;
+    onvideo?: (video: VideoData) => void;
+    onembed?: (embed: EmbedRef & { privacy: boolean; title?: string }) => void;
+    onclose?: () => void;
+    onopen?: () => void;
+  } = $props();
+  const id = $props.id();
+
+  let trigger: HTMLButtonElement;
+  let menu: HTMLDivElement;
+  let videoPicker: ImagePicker;
+  let video = $state<VideoData | undefined>();
+  let embed = $state<EmbedData | undefined>();
+
+  export function toggleMenu(anchor = trigger) {
+    if (!menu || !anchor) return;
+    if (menu.matches(":popover-open")) menu.hidePopover();
+    else {
+      trigger = anchor;
+      menu.showPopover();
+      const rect = anchor.getBoundingClientRect(), bounds = menu.getBoundingClientRect();
+      const view = anchor.ownerDocument.defaultView!;
+      menu.style.left = `${Math.max(8, Math.min(rect.left, view.innerWidth - bounds.width - 8))}px`;
+      menu.style.top = `${rect.bottom + 4 + bounds.height <= view.innerHeight - 8 ? rect.bottom + 4 : Math.max(8, rect.top - bounds.height - 4)}px`;
+    }
+  }
+  export async function pick(choice: "image" | "video" | "youtube" | "vimeo") {
+    if (menu?.matches(":popover-open")) menu.hidePopover();
+    onopen?.();
+    reset();
+    if (choice === "image") { onimage?.(); return; }
+    await tick();
+    videoPicker.launchVideo(choice === "video" ? "library" : choice);
+  }
+  function reset() {
+    video = undefined; embed = undefined;
+  }
+  export async function edit(value: EmbedData | VideoData) {
+    onopen?.();
+    reset();
+    if ("provider" in value) embed = value;
+    else video = value;
+    await tick();
+    videoPicker.launchVideo("provider" in value ? value.provider : "library");
+  }
+  function close() {
+    reset();
+    trigger?.focus();
+    onclose();
+  }
+
+</script>
+
+{#if !hiddenTrigger}<button bind:this={trigger} data-media-trigger type="button" aria-label={triggerLabel} data-tooltip={triggerLabel} aria-haspopup="menu" popovertarget={`${id}-media`} onmousedown={event => event.preventDefault()} onclick={event => { event.preventDefault(); toggleMenu(); }}><Icon name="image" size={18} /></button>{/if}
+<div bind:this={menu} id={`${id}-media`} class="block-menu media-menu" popover role="menu" aria-label="Insert media">
+  <button type="button" role="menuitem" onclick={() => pick("image")}><Icon name="image" size={16} />Image</button>
+  <button type="button" role="menuitem" onclick={() => pick("video")}><Icon name="filmStrip" size={16} />Video</button>
+  <button type="button" role="menuitem" onclick={() => pick("youtube")}><Icon name="youtubeLogo" size={16} />YouTube</button>
+  <button type="button" role="menuitem" onclick={() => pick("vimeo")}><Icon name="playCircle" size={16} />Vimeo</button>
+</div>
+
+<ImagePicker bind:this={videoPicker} toolbar hiddenTrigger kind="video" value={video?.src ?? ""} altText={video?.caption ?? ""} {video} {onvideo} {embed} {onembed} onclose={close} />

package/src/editor/lib/Select.svelte

@@ -2,12 +2,15 @@
   import { tick } from "svelte";
   import Icon from "./Icon.svelte";
   import type { ICONS } from "./icons";
+  import type { TooltipSide, TooltipAlign } from "./tooltip";
 
-  let { label = "", ariaLabel = label, title, "data-tooltip": tooltip = title, icon, value = "", options, multiple = false, disabled = false, onchange = () => {} }: {
+  let { label = "", ariaLabel = label, title, "data-tooltip": tooltip = title, "data-tooltip-position": tooltipPosition, "data-tooltip-align": tooltipAlign, icon, value = "", options, multiple = false, disabled = false, onchange = () => {} }: {
     label?: string;
     ariaLabel?: string;
     title?: string;
     "data-tooltip"?: string;
+    "data-tooltip-position"?: TooltipSide;
+    "data-tooltip-align"?: TooltipAlign;
     icon?: keyof typeof ICONS;
     value?: string | string[];
     options: { value: string; label: string; icon?: keyof typeof ICONS; disabled?: boolean }[];
@@ -121,7 +124,7 @@
 
 <div class="custom-select" onfocusout={() => { if (open) requestAnimationFrame(() => { if (trigger.ownerDocument.activeElement?.tagName === "IFRAME") close(); }); }}>
   {#if label}<span class="select-label" id={`${id}-label`}>{label}</span>{/if}
-  <button bind:this={trigger} type="button" class="select-trigger" class:icon-only={!!icon} role="combobox" aria-label={label ? undefined : ariaLabel} aria-labelledby={label ? `${id}-label` : undefined} aria-haspopup="listbox" aria-expanded={open} aria-controls={`${id}-list`} aria-activedescendant={open && active >= 0 ? `${id}-option-${active}` : undefined} popovertarget={`${id}-list`} data-tooltip={tooltip} {disabled} onclick={event => { event.preventDefault(); menu.matches(":popover-open") ? close() : void reveal(); }} onkeydown={onkey}>
+  <button bind:this={trigger} type="button" class="select-trigger" class:icon-only={!!icon} role="combobox" aria-label={label ? undefined : ariaLabel} aria-labelledby={label ? `${id}-label` : undefined} aria-haspopup="listbox" aria-expanded={open} aria-controls={`${id}-list`} aria-activedescendant={open && active >= 0 ? `${id}-option-${active}` : undefined} popovertarget={`${id}-list`} data-tooltip={tooltip} data-tooltip-position={tooltipPosition} data-tooltip-align={tooltipAlign} {disabled} onclick={event => { event.preventDefault(); menu.matches(":popover-open") ? close() : void reveal(); }} onkeydown={onkey}>
     {#if icon}<Icon name={icon} size={18} />{:else}<span>{text || (multiple ? `Select ${label.toLowerCase() || "options"}…` : "Choose…")}</span><Icon name="caretDown" size={12} />{/if}
   </button>
   <select hidden aria-hidden="true" tabindex="-1" aria-label={ariaLabel} {multiple} {disabled} {value} onchange={event => { value = multiple ? Array.from(event.currentTarget.selectedOptions, option => option.value) : event.currentTarget.value; onchange(value); }}>

package/src/editor/lib/VisualEditor.svelte

@@ -25,7 +25,7 @@
     previewPath: string | null;
     websitePath?: string | null;
     body?: "" | import("../../article-body").ArticleBody;
-    properties?: Snippet<[SelectedField | null, number, boolean, () => void]>;
+    properties?: Snippet<[SelectedField | null, number, boolean, () => void, boolean]>;
     bodyInline?: boolean;
     onbody?: (body: ArticleBody) => void;
     creating: boolean;
@@ -39,7 +39,9 @@
   let stage: HTMLDivElement;
   let loaded = $state(false);
   let bodyAvailable = $state(false);
-  const inlineBodyEnabled = $derived(bodyInline && loaded && bodyAvailable);
+  let error = $state("");
+  const inlineBodyEnabled = $derived(bodyInline && !!previewPath && loaded && bodyAvailable && !error);
+  const inlineBodyLoading = $derived(bodyInline && !!previewPath && !loaded && !error);
   let bodyEditor: ReturnType<typeof mount> | undefined;
   let bodyThemeObserver: MutationObserver | undefined;
   let editingBody: HTMLElement | null = null;
@@ -47,7 +49,6 @@
   let bodyAttributes: [string, string | null][] = [];
   let bodyScope: HTMLElement | null = null;
   let removeTooltips: (() => void) | undefined;
-  let error = $state("");
   let mode = $state<"browse" | "edit">("edit");
   let panelOpen = $state(true);
   let editorWidth = $state(0);
@@ -152,6 +153,7 @@
     const doc = docElement();
     if (!doc) return;
     patchPreview(doc, previewValues ?? values, body, { documents, primary: docId, editingBody });
+    for (const button of doc.querySelectorAll<HTMLButtonElement>('[data-rigel-edit-video]')) button.hidden = !inlineBodyEnabled || mode !== "edit";
     const signature = (Array.isArray(values.sections) ? (values.sections as Record<string, unknown>[]) : [])
       .map((section) => `${section._key}:${section._type}`)
       .join(",");
@@ -202,6 +204,7 @@
     if (bodyEditor) { element.focus(); return; }
     const doc = element.ownerDocument;
     const blockIndex = event ? [...element.children].findIndex(child => child.contains(event.target as Node)) : 0;
+    const editVideo = !!(event?.target as Element | undefined)?.closest('[data-rigel-edit-video]');
     const caret = event && doc.caretPositionFromPoint?.(event.clientX, event.clientY);
     let offset = 0;
     if (caret && element.children[blockIndex]?.contains(caret.offsetNode)) {
@@ -226,7 +229,8 @@
     const host = doc.createElement("div"); host.className = "rigel rigel-inline";
     scope.append(host); doc.body.append(scope); bodyScope = scope;
     removeTooltips = tooltipRoot(host).destroy;
-    bodyEditor = mount(BlockEditor, { target: host, props: { editableRoot: element, get value() { return body as ArticleBody; }, oninput: (next: ArticleBody) => onbody(next) } });
+    const mounted = mount(BlockEditor, { target: host, props: { editableRoot: element, get value() { return body as ArticleBody; }, oninput: (next: ArticleBody) => onbody(next) } });
+    bodyEditor = mounted;
     bodyThemeObserver = new MutationObserver(syncTheme);
     bodyThemeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "data-contrast"] });
     await tick();
@@ -241,6 +245,7 @@
       }
       const selection = doc.defaultView?.getSelection(); selection?.removeAllRanges(); selection?.addRange(range);
     }
+    if (editVideo) mounted.editVideoAt(blockIndex);
   }
   function focusBody() {
     const target = docElement()?.querySelector<HTMLElement>('[data-rigel-richtext="$body"]');
@@ -452,7 +457,7 @@
       {#if !previewPath}
         <p class="visual-error" role="status">{creating ? "New page — Save writes the file. The route renders once the site has it." : "No preview URL is mapped to this document. Use the properties panel to edit."}</p>
       {:else}
-        <PreviewFrame bind:frame url={previewPath} {reloadToken} title="Website page editor" onload={onLoad} onloading={() => { stopBodyEdit(); inline = null; loaded = false; error = ""; }} onerror={(message) => { loaded = false; error = message; }} />
+        <PreviewFrame bind:frame url={previewPath} {reloadToken} title="Website page editor" onload={onLoad} onloading={() => { stopBodyEdit(); inline = null; loaded = false; bodyAvailable = false; error = ""; }} onerror={(message) => { loaded = false; error = message; }} />
       {/if}
       {#if inline}
         <input
@@ -475,7 +480,7 @@
     <div class="properties-divider" role="separator" tabindex="0" aria-label="Properties panel width" aria-orientation="vertical" aria-valuemin="280" aria-valuemax={panelMax} aria-valuenow={panelWidth} aria-valuetext={`${Math.round(panelWidth)} pixels`} onpointerdown={startResize} onpointermove={moveResize} onpointerup={endResize} onpointercancel={endResize} onlostpointercapture={endResize} onkeydown={keyResize}></div>
   {/if}
   {#if panelOpen && properties}
-    {@render properties(selected, focusToken, inlineBodyEnabled, focusBody)}
+    {@render properties(selected, focusToken, inlineBodyEnabled || inlineBodyLoading, focusBody, inlineBodyLoading)}
   {:else if panelOpen && schema && docType}
     <SchemaPanel
       {schema}

package/src/editor/lib/embed-preview.ts

@@ -0,0 +1,57 @@
+import { embedProviderLabel, embedWatchUrl, safeEmbed } from "./embeds";
+
+export function createVideoOverlay(doc: Document, label: string, url: string, editable = false): HTMLElement {
+  const overlay = doc.createElement("div");
+  overlay.contentEditable = "false";
+  overlay.style.cssText = "position:absolute;inset:0;display:grid;place-items:center;padding:1rem;background:#0006";
+  const card = doc.createElement("div");
+  card.style.cssText = "box-sizing:border-box;width:100%;max-width:360px;padding:1rem;background:#18181b;color:white;border:1px solid #52525b;font:14px/1.5 system-ui;text-align:left";
+  const heading = doc.createElement("strong");
+  heading.textContent = label;
+  const link = doc.createElement("div");
+  link.textContent = url;
+  link.style.cssText = "margin:0.5rem 0 1rem;overflow-wrap:anywhere;color:#e4e4e7";
+  const edit = doc.createElement("button");
+  edit.type = "button";
+  edit.dataset.rigelEditVideo = "";
+  edit.addEventListener("pointerdown", event => event.stopPropagation());
+  edit.addEventListener("keydown", event => {
+    event.stopPropagation();
+    if (event.key === "Enter" || event.key === " ") { event.preventDefault(); edit.click(); }
+  });
+  edit.textContent = "Edit video";
+  edit.hidden = !editable;
+  edit.style.cssText = "min-height:44px;padding:0.5rem 0.75rem;border:1px solid #d4d4d8;background:white;color:#18181b;font:inherit;cursor:pointer";
+  card.append(heading, link, edit);
+  overlay.append(card);
+  return overlay;
+}
+
+export function createEmbedPreview(value: unknown, doc: Document, editable = false): HTMLElement {
+  const figure = doc.createElement("figure");
+  figure.className = "media-embed";
+  figure.style.cssText = "max-width:100%;min-width:0;margin-inline:0";
+  const ref = safeEmbed(value);
+  if (!ref) return figure;
+  const title = typeof (value as { title?: unknown }).title === "string" ? (value as { title: string }).title : "";
+  figure.dataset.rigelEmbed = ref.provider;
+  figure.dataset.rigelVideoId = ref.id;
+  const poster = doc.createElement("div");
+  poster.style.cssText = "position:relative;width:100%;min-width:0;aspect-ratio:16/9;min-height:220px;overflow:hidden;background:#18181b";
+  if (ref.provider === "youtube") {
+    const image = doc.createElement("img");
+    image.src = `https://i.ytimg.com/vi/${ref.id}/hqdefault.jpg`;
+    image.alt = "";
+    image.loading = "lazy";
+    image.referrerPolicy = "no-referrer";
+    image.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0";
+    image.onerror = () => { image.hidden = true; };
+    poster.append(image);
+  }
+  const caption = doc.createElement("figcaption");
+  caption.textContent = `${embedProviderLabel(ref)} · ${title || "Video"}`;
+  caption.style.cssText = "margin-top:0.5rem;font-size:0.875rem;line-height:1.5";
+  poster.append(createVideoOverlay(doc, `${embedProviderLabel(ref)} Video`, embedWatchUrl(ref), editable));
+  figure.append(poster, caption);
+  return figure;
+}