@rigel-cms/rigel 0.1.4-beta.1 → 1.0.0-rc.1

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/PreviewFrame.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { untrack } from "svelte";
+  import { tick, untrack } from "svelte";
   import { fetchPreview } from "./preview-frame";
 
   let { url, title, frame = $bindable(), reloadToken = 0, onload, onloading, onerror }: {
@@ -11,35 +11,77 @@
     onloading: () => void;
     onerror: (message: string) => void;
   } = $props();
-  let source = $state<{ src?: string; srcdoc?: string } | null>(null);
+  let source = $state<{ src?: string; srcdoc?: string; ready: (event: Event) => void; fail: () => void } | null>(null);
+  let loading = $state(true);
+  let revealed = $state(false);
 
   $effect(() => {
     const target = new URL(url, location.href);
     void reloadToken;
+    const started = performance.now();
+    const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const controller = new AbortController();
+    const { signal } = controller;
     source = null;
+    loading = true;
+    revealed = false;
     untrack(onloading);
-    const controller = new AbortController();
-    if (target.origin === location.origin) source = { src: target.href };
-    else fetchPreview(target, controller.signal).then(srcdoc => {
-      if (!controller.signal.aborted) source = { srcdoc };
+    function fail(message = "The prepared page could not be loaded. Check its URL and framing headers.") {
+      if (signal.aborted) return;
+      controller.abort();
+      clearTimeout(timeout);
+      loading = false;
+      onerror(message);
+    }
+    const timeout = setTimeout(() => fail("The preview took too long to load. Check its URL and try again."), 20000);
+    function wait(ms: number) {
+      return new Promise<void>(resolve => {
+        const finish = () => { clearTimeout(timer); signal.removeEventListener("abort", finish); resolve(); };
+        const timer = setTimeout(finish, ms);
+        signal.addEventListener("abort", finish, { once: true });
+      });
+    }
+    async function ready(event: Event) {
+      const iframe = event.currentTarget as HTMLIFrameElement;
+      const doc = iframe.contentDocument;
+      if (signal.aborted) return;
+      if (!doc || (target.origin === location.origin && new URL(doc.URL).pathname.replace(/\/$/, "") !== target.pathname.replace(/\/$/, ""))) {
+        fail();
+        return;
+      }
+      try {
+        if (doc.fonts) await Promise.race([doc.fonts.ready.catch(() => {}), wait(200)]);
+        if (signal.aborted) return;
+        if (!reducedMotion) await wait(Math.max(0, 500 - (performance.now() - started)));
+        if (signal.aborted || iframe !== frame) return;
+        onload();
+        await tick();
+        if (signal.aborted || iframe !== frame) return;
+        clearTimeout(timeout);
+        loading = false;
+        revealed = true;
+      } catch (cause) {
+        fail(cause instanceof Error ? cause.message : "Preview unavailable");
+      }
+    }
+    const handlers = { ready, fail: () => fail() };
+    if (target.origin === location.origin) source = { src: target.href, ...handlers };
+    else fetchPreview(target, signal).then(srcdoc => {
+      if (!signal.aborted) source = { srcdoc, ...handlers };
     }).catch(cause => {
-      if (!controller.signal.aborted) onerror(cause instanceof Error ? cause.message : "Preview unavailable");
+      fail(cause instanceof Error ? cause.message : "Preview unavailable");
     });
-    return () => controller.abort();
+    return () => { controller.abort(); clearTimeout(timeout); };
   });
-
-  function ready() {
-    const doc = frame?.contentDocument;
-    if (!doc || (source?.src && new URL(doc.URL).pathname.replace(/\/$/, "") !== new URL(source.src).pathname.replace(/\/$/, ""))) {
-      onerror("The prepared page could not be loaded. Check its URL and framing headers.");
-      return;
-    }
-    onload();
-  }
 </script>
 
-{#if source}
-  {#key source}
-  <iframe bind:this={frame} {title} sandbox="allow-same-origin" referrerpolicy="no-referrer" src={source.src} srcdoc={source.srcdoc} onload={ready}></iframe>
-  {/key}
-{/if}
+<div class="preview-frame" aria-busy={loading}>
+  {#if source}
+    {#key source}
+      <iframe bind:this={frame} {title} sandbox="allow-same-origin" referrerpolicy="no-referrer" src={source.src} srcdoc={source.srcdoc} onload={source.ready} onerror={source.fail} class:revealed inert={!revealed} aria-hidden={!revealed}></iframe>
+    {/key}
+  {/if}
+  {#if loading}
+    <div class="preview-loading" role="status"><span class="preview-spinner" aria-hidden="true"></span>Loading preview…</div>
+  {/if}
+</div>

package/src/editor/lib/PublishDialog.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import Icon from "./Icon.svelte";
+  import type { PublishReview } from "./github-backend";
+  let { review, loading, busy, error, message, onrefresh, onconfirm, onclose }: {
+    review: PublishReview | null; loading: boolean; busy: boolean; error: string; message: string;
+    onrefresh: () => void; onconfirm: () => void; onclose: () => void;
+  } = $props();
+  let dialog: HTMLDialogElement;
+  let cancel: HTMLButtonElement;
+  $effect(() => {
+    dialog.showModal();
+    cancel.focus();
+    return () => dialog.close();
+  });
+</script>
+
+<dialog bind:this={dialog} class="rigel rigel-modal-backdrop publish-dialog" aria-labelledby="publish-title" aria-describedby="publish-description" oncancel={(event) => { event.preventDefault(); if (!busy) onclose(); }}>
+  <form class="rigel-modal" onsubmit={(event) => { event.preventDefault(); onconfirm(); }} aria-busy={loading || busy}>
+    <div class="publish-head"><h2 id="publish-title">Publish saved changes</h2><button type="button" class="icon-btn" aria-label="Close publish review" disabled={busy} onclick={onclose}><Icon name="x" size={16} /></button></div>
+    <p id="publish-description">Publish includes <strong>all saved changes on the drafts branch</strong>, including files outside CMS content folders. Unsaved edits are never included or saved automatically.</p>
+    {#if loading}<p role="status">Loading the complete file review…</p>{/if}
+    {#if review}
+      <p><strong>{review.repo}</strong><br /><span class="publish-branch">{review.branch}</span> to <span class="publish-branch">{review.publishBranch}</span>, as one squash commit.</p>
+      {#if review.needsSync}
+        <p>The publishing branch has changes not in drafts, including earlier squash publishes. First, explicitly sync it into drafts using GitHub’s normal merge. This does not publish. Conflicts stop the sync. Then review the updated files again before publishing.</p>
+        <p>These are the current tree differences, not the final publish list:</p>
+      {/if}
+      <p id="publish-file-count"><strong>{review.files.length} {review.files.length === 1 ? "file" : "files"}</strong></p>
+      {#if review.files.length}
+        <ul class="publish-files" tabindex="0" aria-label="All changed files" aria-describedby="publish-file-count">
+          {#each review.files as file (file.filename)}
+            <li><span class="publish-file-status">{file.status}</span><span>{file.filename}{#if file.previous_filename}<small>Previously: {file.previous_filename}</small>{/if}</span></li>
+          {/each}
+        </ul>
+      {:else}<p>No saved changes to publish. The branch trees are identical.</p>{/if}
+      <p class="hint">Both branch revisions are checked again before publishing. GitHub pins the draft revision, but cannot atomically lock the target revision; a target update in the final instant can still race. Required checks, reviews and branch protections apply.</p>
+    {/if}
+    {#if error}<p class="error" role="alert">{error}</p>{/if}
+    {#if message}<p role="status">{message}</p>{/if}
+    <div class="publish-actions">
+      <button type="button" bind:this={cancel} class="outlined" disabled={busy} onclick={onclose}>{message ? "Close" : "Cancel"}</button>
+      {#if !message}<button type="button" class="outlined" disabled={loading || busy} onclick={onrefresh}>Review again</button>{/if}
+      {#if review && !message}<button id="confirm-publish" type="submit" class="primary" disabled={loading || busy || !review.files.length}>{busy ? "Working…" : review.needsSync ? "Sync drafts first" : "Confirm publish"}</button>{/if}
+    </div>
+  </form>
+</dialog>
+
+<style>
+  .publish-dialog { box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 1rem; border: none; color: var(--text); }
+  .publish-dialog:not([open]) { display: none; }
+  .publish-dialog::backdrop { background: transparent; }
+  .publish-dialog .rigel-modal { box-sizing: border-box; width: min(42rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; overflow-wrap: anywhere; }
+  .publish-head, .publish-actions { display: flex; align-items: center; gap: 0.75rem; }
+  .publish-head { justify-content: space-between; }
+  .publish-actions { justify-content: flex-end; flex-wrap: wrap; margin-top: 1.5rem; }
+  .publish-dialog button { min-height: 44px; }
+  .publish-head .icon-btn { min-width: 44px; }
+  .publish-branch { font-weight: 600; }
+  .publish-files { list-style: none; margin: 0; padding: 0; max-height: min(35dvh, 20rem); overflow-y: auto; border: 1px solid var(--border); }
+  .publish-files li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.625rem; border-bottom: 1px solid var(--border); font-size: 0.8125rem; }
+  .publish-files li:last-child { border-bottom: none; }
+  .publish-files small { display: block; margin-top: 0.25rem; }
+  .publish-file-status { text-transform: capitalize; }
+  button:disabled { opacity: 0.5; cursor: not-allowed; }
+</style>