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

package/README.md

@@ -1,16 +1,26 @@
 # Rigel CMS
 
-A CMS for Astro sites. You edit the text, git keeps the history.
+[![npm version](https://img.shields.io/npm/v/@rigel-cms/rigel)](https://www.npmjs.com/package/@rigel-cms/rigel)
+[![Astro 7](https://img.shields.io/badge/Astro-7-BC52EE?logo=astro&logoColor=white)](https://astro.build/)
+[![Node.js 24](https://img.shields.io/badge/Node.js-24-5FA04E?logo=nodedotjs&logoColor=white)](package.json)
+[![License](https://img.shields.io/badge/license-Apache--2.0-green)](LICENSE)
 
-`@rigel-cms/rigel` is a beta package and a work in progress. Expect bugs and breaking changes.
+A CMS for Astro sites. You edit the text, Git keeps the history.
 
-## Collection validation
+Edit page copy, structured content and articles at `/rigel/`. Your content stays in your repository, and your Astro site controls how it looks.
 
-New collection drafts initialize every configured field, including Rigel's automatic `description`, `metaTitle`, and `ogImage` strings. Existing content is never filled in automatically; unknown properties are preserved and missing optional fields remain allowed.
+- Visual editing on prepared page templates, with unsaved changes shown in the preview.
+- A block editor for articles and a media library with local uploads.
+- Explicit Save, with warnings before leaving unsaved changes.
+- Local file editing or GitHub drafts with pull-request publishing.
 
-Rigel validates configured collection field types and `required: true` on load and before local or GitHub saves. Required strings must contain non-whitespace text, required arrays must contain an item, and `false` is a valid required boolean. Dates use real `YYYY-MM-DD` calendar dates; optional dates may be empty. Tags are arrays of strings and references must select configured entries.
+Rigel edits content, not `.astro` components. Developers define the editable fields and add preview bindings to their templates. Saving content and publishing the website are separate steps.
 
-Astro content schemas remain the host site's contract: Rigel does not discover or execute them. Align Rigel field types and requiredness with the host schema. For example, Astro's `z.string()` accepts an initialized empty description; `z.string().min(1)` also needs Rigel's `required: true`.
+## Get started
+
+Use the [Astro starter](https://github.com/rigel-cms/rigel-starter), or follow the [installation guide](https://rigelcms.dev/docs/getting-started/) to add Rigel to an existing site. Requires Node.js 24 and Astro 7.3 or later within Astro 7.
+
+[Documentation](https://rigelcms.dev/docs/) · [Content model](https://rigelcms.dev/docs/content-model/) · [Previews](https://rigelcms.dev/docs/preview/) · [GitHub setup](https://rigelcms.dev/docs/github-publishing/)
 
 ## License
 

package/package.json

@@ -1,11 +1,7 @@
 {
   "name": "@rigel-cms/rigel",
-  "version": "0.2.0-beta.1",
-  "publishConfig": {
-    "access": "public",
-    "tag": "beta"
-  },
-  "description": "Rigel CMS — the copy editor for Astro sites. Clients edit text, git keeps the history.",
+  "version": "1.0.0",
+  "description": "A CMS for Astro sites. You edit the text, Git keeps the history.",
   "author": {
     "name": "FreshJuice",
     "email": "contact@freshjuice.dev",
@@ -32,8 +28,7 @@
   "scripts": {
     "build": "pnpm typecheck",
     "test": "vitest run",
-    "typecheck": "tsc --noEmit",
-    "publish:beta": "npm publish --access public --tag beta"
+    "typecheck": "tsc --noEmit"
   },
   "exports": {
     ".": "./src/index.ts",
@@ -54,7 +49,6 @@
     "vite": "^8.0.0"
   },
   "devDependencies": {
-
     "@types/markdown-it": "^14.2.0",
     "@types/node": "^24.0.0",
     "astro": "^7.3.2",

package/src/article-body.ts

@@ -1,5 +1,6 @@
 import type { SerializedEditorState } from "lexical";
 import { safePreviewUrl } from "./preview-urls";
+import { safeEmbed } from "./editor/lib/embeds";
 
 export type ArticleBody = SerializedEditorState;
 export type ArticleNode = { type: string; version: number; children?: ArticleNode[]; text?: string; format?: number | string; tag?: string; listType?: string; start?: number; url?: string; src?: string; alt?: string; credit?: string; creditURL?: string; [key: string]: unknown };
@@ -12,7 +13,7 @@ export function emptyBody(): ArticleBody {
 }
 
 export function validateBody(value: unknown): asserts value is ArticleBody {
-  const types = new Set(["root", "paragraph", "heading", "quote", "list", "listitem", "code", "text", "linebreak", "link", "image", "divider", "table", "tablerow", "tablecell"]);
+  const types = new Set(["root", "paragraph", "heading", "quote", "list", "listitem", "code", "text", "linebreak", "link", "image", "video", "embed", "divider", "table", "tablerow", "tablecell"]);
   let count = 0;
   let textSize = 0;
   function check(raw: unknown, parent = "", depth = 0) {
@@ -43,9 +44,15 @@ export function validateBody(value: unknown): asserts value is ArticleBody {
     if (node.type === "image" && !safePreviewUrl(node.src!, true)) throw new Error("Unsafe image URL");
     if (node.type === "image" && node.url !== undefined && (typeof node.url !== "string" || node.url && !safePreviewUrl(node.url))) throw new Error("Unsafe image link URL");
     if (node.type === "link" && !safePreviewUrl(node.url!)) throw new Error("Unsafe link URL");
+    if (node.type === "video" && (typeof node.src !== "string" || !safePreviewUrl(node.src, true))) throw new Error("Unsafe video URL");
+    if (node.type === "video" && node.poster !== undefined && (typeof node.poster !== "string" || !safePreviewUrl(node.poster, true))) throw new Error("Unsafe video poster URL");
+    if (node.type === "video" && node.caption !== undefined && typeof node.caption !== "string") throw new Error("Invalid video caption");
+    if (node.type === "video") for (const key of ["muted", "controls"]) if (node[key] !== undefined && typeof node[key] !== "boolean") throw new Error("Invalid video playback setting");
+    if (node.type === "embed" && (!safeEmbed(node) || typeof node.privacy !== "boolean")) throw new Error("Invalid video embed");
+    if (node.type === "embed" && node.title !== undefined && typeof node.title !== "string") throw new Error("Invalid embed title");
     for (const key of ["credit", "creditURL"]) if (node[key] !== undefined && typeof node[key] !== "string") throw new Error("Invalid image credit");
     if (node.creditURL && !safePreviewUrl(node.creditURL)) throw new Error("Unsafe image credit URL");
-    if (!["text", "linebreak", "image", "divider"].includes(node.type)) {
+    if (!["text", "linebreak", "image", "video", "embed", "divider"].includes(node.type)) {
       if (!Array.isArray(node.children)) throw new Error("Article block requires children");
       for (const child of node.children) check(child, node.type, depth + 1);
       if (["table", "tablerow", "tablecell"].includes(node.type) && !node.children.length) throw new Error("Table elements cannot be empty");

package/src/article-render.ts

@@ -1,5 +1,6 @@
 import { validateBody, type ArticleBody, type ArticleNode } from "./article-body";
 import { safePreviewUrl } from "./preview-urls";
+import { embedSrc, embedWatchUrl, safeEmbed, embedProviderLabel } from "./editor/lib/embeds";
 
 const escape = (text: unknown) => String(text ?? "").replace(/[&<>"']/g, character => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[character]!);
 
@@ -10,7 +11,7 @@ function renderText(node: ArticleNode): string {
   return text;
 }
 
-export function renderArticle(body: ArticleBody): string {
+export function renderArticle(body: ArticleBody, options: { preview?: boolean } = {}): string {
   validateBody(body);
   function walk(node: ArticleNode): string {
     const content = () => (node.children ?? []).map(walk).join("");
@@ -32,6 +33,20 @@ export function renderArticle(body: ArticleBody): string {
     if (node.type === "tablecell") return Number(node.headerState) ? `<th scope="${Number(node.headerState) & 1 ? "col" : "row"}">${content()}</th>` : `<td>${content()}</td>`;
     if (node.type === "link") return safePreviewUrl(node.url!) ? `<a href="${escape(node.url)}">${content()}</a>` : content();
     if (node.type === "divider") return "<hr>";
+    if (node.type === "video") {
+      if (!safePreviewUrl(node.src!, true)) return "";
+      const poster = typeof node.poster === "string" && safePreviewUrl(node.poster, true) ? ` poster="${escape(node.poster)}"` : "";
+      const caption = node.caption ? `<figcaption>${escape(node.caption)}</figcaption>` : "";
+      return `<figure class="media-video"><video${node.controls !== false ? " controls" : ""}${node.muted === true ? " muted" : ""} preload="metadata" playsinline src="${escape(node.src)}"${poster}></video>${caption}</figure>`;
+    }
+    if (node.type === "embed") {
+      const ref = safeEmbed(node);
+      if (!ref) return "";
+      const title = escape(typeof node.title === "string" && node.title ? node.title : `${embedProviderLabel(ref)} video`);
+      if (options.preview) return `<figure data-rigel-embed="${ref.provider}" data-rigel-video-id="${ref.id}" data-rigel-video-title="${title}"></figure>`;
+      const src = escape(embedSrc(ref, node.privacy !== false));
+      return `<figure class="media-embed"><iframe src="${src}" title="${title}" loading="lazy" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe></figure>`;
+    }
     if (node.type === "image") {
       if (!safePreviewUrl(node.src!, true)) return "";
       const credit = node.credit ? (node.creditURL && safePreviewUrl(node.creditURL) ? `<a href="${escape(node.creditURL)}">${escape(node.credit)}</a>` : escape(node.credit)) : "";
@@ -81,6 +96,17 @@ export function articleMarkdown(body: ArticleBody): string {
       return (node.url ? `[${image}](<${node.url.replace(/[<>]/g, character => encodeURIComponent(character))}>)` : image) + "\n\n";
     }
     if (node.type === "divider") return "---\n\n";
+    if (node.type === "video") {
+      if (!safePreviewUrl(node.src!, true)) return "";
+      const label = node.caption ? `Video: ${node.caption}` : "Video";
+      return `[${label}](<${node.src!.replace(/[<>]/g, character => encodeURIComponent(character))}>)\n\n`;
+    }
+    if (node.type === "embed") {
+      const ref = safeEmbed(node);
+      if (!ref) return "";
+      const label = typeof node.title === "string" && node.title ? node.title : `${embedProviderLabel(ref)} video`;
+      return `[${escaped(label)}](<${embedWatchUrl(ref)}>)\n\n`;
+    }
     return content();
   }
   return walk(body.root as unknown as ArticleNode).trimEnd() + "\n";

package/src/config.ts

@@ -3,13 +3,17 @@ import { validateSchema } from "./schema/validate";
 import type { Schema } from "./schema/types";
 import { validateSidebar, type SidebarEntry } from "./manifest/navigation";
 import { withSeoFields } from "./manifest/seo";
-import { previewBaseUrl } from "./preview-urls";
+import { previewBaseUrl, previewRoute } from "./preview-urls";
+import type { JsonOutput } from "./json-output";
+import { DEFAULT_MAX_FILE_SIZE } from "./media-types";
 
 export interface RigelConfig {
   copyDir: string;
   mediaDir?: string;
+  maxFileSize?: number;
   preview?: import("./preview").PreviewConfig;
   backend: "local" | "github";
+  jsonOutput?: JsonOutput;
   demo?: boolean;
   collections?: CollectionConfig[];
   menus?: { folder: string; maxDepth?: number };
@@ -40,11 +44,20 @@ const DEFAULTS: Pick<RigelConfig, "copyDir" | "backend"> = {
 
 export function parseConfig(options: Partial<RigelConfig> = {}): RigelConfig {
   const cfg = { ...DEFAULTS, ...options };
+  if (cfg.maxFileSize === undefined) cfg.maxFileSize = DEFAULT_MAX_FILE_SIZE;
+  if (!Number.isSafeInteger(cfg.maxFileSize) || cfg.maxFileSize <= 0) throw new Error("rigel: maxFileSize must be a positive integer in bytes");
+  if (cfg.jsonOutput === undefined) cfg.jsonOutput = "pretty";
+  if (cfg.jsonOutput !== "pretty" && cfg.jsonOutput !== "minified") throw new Error("rigel: jsonOutput must be pretty or minified");
   if (cfg.demo === undefined) cfg.demo = true;
   if (typeof cfg.demo !== "boolean") throw new Error("rigel: demo must be boolean");
   if (cfg.preview) {
     cfg.preview = { ...cfg.preview };
     for (const key of ["liveUrl", "draftUrl"] as const) if (cfg.preview[key] !== undefined) cfg.preview[key] = previewBaseUrl(cfg.preview[key]);
+    for (const mappings of [cfg.preview.pages, cfg.preview.documents, cfg.preview.collections]) {
+      for (const mapping of Object.values(mappings ?? {})) {
+        if (mapping && typeof mapping === "object" && mapping.template !== undefined && !previewRoute(mapping.template, true)) throw new Error("rigel: preview template must be a static root-relative path; only /rigel/preview/ is allowed inside the CMS");
+      }
+    }
   }
   if (cfg.mediaDir !== undefined && (typeof cfg.mediaDir !== "string" || !cfg.mediaDir.split("/").every(part => /^[a-zA-Z0-9_-][a-zA-Z0-9_. -]*$/.test(part)))) throw new Error("rigel: mediaDir must be a relative folder inside publicDir");
   if (cfg.backend === "github") {

package/src/editor/App.svelte

@@ -33,7 +33,7 @@
   import PublishDialog from "./lib/PublishDialog.svelte";
   import VisualEditor from "./lib/VisualEditor.svelte";
   import { newDocumentFromTemplate } from "../schema/paths";
-  import { previewUrl } from "../preview";
+  import { previewUrl, previewPath } from "../preview";
   import type { ContentDocument, Schema } from "../schema/types";
   import { buildSidebar, navigationKey, type Selection } from "../manifest/navigation";
   import { startGitHubLogin, checkGitHubAccess, type GitHubAccess } from "./lib/github-auth";
@@ -815,11 +815,10 @@
 </div>
 {:else}
 <div class="rigel" class:sidebar-collapsed={settings.userPref.sidebarCollapsed}>
-  <aside id="rigel-sidebar">
-    <a class="brand" href="/rigel/" role="button" aria-label="Welcome" aria-describedby="rigel-beta" onclick={(event) => { event.preventDefault(); goWelcome(); }}>
+  <aside id="rigel-sidebar" data-tooltip-position="right">
+    <a class="brand" href="/rigel/" role="button" aria-label="Welcome" onclick={(event) => { event.preventDefault(); goWelcome(); }}>
       <img src={logo} alt="" width="32" height="32" />
       <span>Rigel <span class="brand-suffix">CMS</span></span>
-      <span id="rigel-beta" class="badge">Beta</span>
     </a>
     <TopBar {manifest} {sel} onselect={select} />
 
@@ -852,7 +851,7 @@
 
     {#if githubMode && manifest.github?.publishBranch}
       <button id="publish-button" class="sidebar-publish" aria-label="Publish" data-tooltip={dirty ? "Save your edits before publishing" : "Publish saved branch changes"} disabled={publishBusy || publishLoading || saveState === "saving" || connectionBusy || tokenExpired || githubAccess?.status !== "ready"} onclick={reviewPublish}>
-        <Icon name="external" size={18} /><span class="sidebar-label">Publish</span>
+        <Icon name="rocketLaunch" size={18} /><span class="sidebar-label">Publish</span>
       </button>
     {/if}
     <button class="sidebar-toggle" aria-expanded={!settings.userPref.sidebarCollapsed} aria-controls="rigel-sidebar-navigation" aria-label={settings.userPref.sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"} data-tooltip={settings.userPref.sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"} onclick={() => { settings.userPref.sidebarCollapsed = !settings.userPref.sidebarCollapsed; }}>
@@ -877,11 +876,11 @@
               Live Site
             </a>
             <div class="divider"></div>
-            <button role="menuitem" onclick={() => { userOpen = false; requestNavigation(() => { settingsOpen = true; }); }}>
+            <button role="menuitem" onclick={() => { userOpen = false; settingsOpen = true; }}>
               <Icon name="gear" size={13} />
               Settings
             </button>
-            <button role="menuitem" onclick={() => { userOpen = false; requestNavigation(() => { shortcutsOpen = true; }); }}>
+            <button role="menuitem" onclick={() => { userOpen = false; shortcutsOpen = true; }}>
               <Icon name="keyboard" size={13} />
               Keyboard Shortcuts
             </button>
@@ -1036,7 +1035,7 @@
 
       {:else if sel?.kind === "page" && page}
         {#if !page.shared}
-          <section><label><span>Website route</span><input type="text" value={manifest.preview?.pages?.[page.slug] ?? "Not configured"} readonly /></label><p class="hint">This copy page uses a fixed Astro route. Its URL can only be changed in the website code; slug metadata cannot move it.</p></section>
+          <section><label><span>Website route</span><input type="text" value={previewPath(manifest.preview ?? {}, { kind: "page", slug: page.slug }) ?? "Not configured"} readonly /></label><p class="hint">This copy page uses a fixed Astro route. Its URL can only be changed in the website code; slug metadata cannot move it.</p></section>
         {/if}
         {#each page.groups as group (group.id)}
           <section>
@@ -1071,8 +1070,8 @@
             devMode={settings.devMode}
             onchange={(next) => { draft = next; touch(); }}
           >
-            {#snippet properties(selected, focusToken, bodyInline, oneditbody)}
-              <CollectionPanel fields={coll.fields} values={draft} storageSlug={post.slug} documents={manifest.documents ?? []} body={bodyDraft as ArticleBody} {bodyInline} {oneditbody} {selected} {focusToken} devMode={settings.devMode} onchange={(key, value) => { draft[key] = value; touch(); }} onbody={(value) => { bodyDraft = value; touch(); }} />
+            {#snippet properties(selected, focusToken, bodyInline, oneditbody, bodyLoading)}
+              <CollectionPanel fields={coll.fields} values={draft} storageSlug={post.slug} documents={manifest.documents ?? []} body={bodyDraft as ArticleBody} {bodyInline} {bodyLoading} {oneditbody} {selected} {focusToken} devMode={settings.devMode} onchange={(key, value) => { draft[key] = value; touch(); }} onbody={(value) => { bodyDraft = value; touch(); }} />
             {/snippet}
           </VisualEditor>
         {/key}

package/src/editor/blocks/embed.ts

@@ -0,0 +1,21 @@
+import { DecoratorNode, type NodeKey } from "lexical";
+import type { EmbedProvider } from "../lib/embeds";
+import { createEmbedPreview } from "../lib/embed-preview";
+
+export type EmbedData = { provider: EmbedProvider; id: string; title?: string; privacy: boolean };
+export class EmbedNode extends DecoratorNode<null> {
+  __embed: EmbedData;
+  static getType() { return "embed"; }
+  static clone(node: EmbedNode) { return new EmbedNode(node.__embed, node.__key); }
+  constructor(embed: EmbedData = { provider: "youtube", id: "", privacy: true }, key?: NodeKey) { super(key); this.__embed = embed; }
+  static importJSON(raw: unknown) { const embed = raw as EmbedData; return new EmbedNode({ provider: embed.provider, id: embed.id, title: embed.title, privacy: embed.privacy !== false }); }
+  exportJSON() { return { ...this.__embed, type: "embed", version: 1 }; }
+  createDOM() {
+    return createEmbedPreview(this.__embed, document, true);
+  }
+  updateDOM() { return true; }
+  decorate() { return null; }
+  isInline() { return false; }
+  getTextContent() { return this.__embed.title ?? ""; }
+}
+export const create = (embed?: EmbedData) => new EmbedNode(embed);

package/src/editor/blocks/index.ts

@@ -7,6 +7,8 @@ import { LinkNode } from "@lexical/link";
 import { CodeNode } from "@lexical/code";
 import { TableNode, TableRowNode, TableCellNode } from "@lexical/table";
 import { ImageNode, create as image } from "./image";
+import { VideoNode } from "./video";
+import { EmbedNode } from "./embed";
 import { DividerNode, create as divider } from "./divider";
 import { create as quote } from "./quote";
 import { create as bullet } from "./bulleted-list";
@@ -37,4 +39,4 @@ export const blockTypes: { value: string; label: string; icon: keyof typeof ICON
   { value: "divider", label: "Divider", icon: "minus", create: divider },
   { value: "table", label: "Table", icon: "table", create: table },
 ];
-export const blockNodes = [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, CodeNode, ImageNode, DividerNode, TableNode, TableRowNode, TableCellNode];
+export const blockNodes = [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, CodeNode, ImageNode, VideoNode, EmbedNode, DividerNode, TableNode, TableRowNode, TableCellNode];

package/src/editor/blocks/video.ts

@@ -0,0 +1,35 @@
+import { DecoratorNode, type NodeKey } from "lexical";
+import { safePreviewUrl } from "../../preview-urls";
+import { createVideoOverlay } from "../lib/embed-preview";
+
+export type VideoData = { src: string; poster?: string; caption?: string; muted?: boolean; controls?: boolean };
+export class VideoNode extends DecoratorNode<null> {
+  __video: VideoData;
+  static getType() { return "video"; }
+  static clone(node: VideoNode) { return new VideoNode(node.__video, node.__key); }
+  constructor(video: VideoData = { src: "" }, key?: NodeKey) { super(key); this.__video = video; }
+  static importJSON(raw: unknown) { const video = raw as VideoData; return new VideoNode({ src: video.src, poster: video.poster, caption: video.caption, muted: video.muted, controls: video.controls }); }
+  exportJSON() { return { ...this.__video, type: "video", version: 1 }; }
+  createDOM() {
+    const figure = document.createElement("figure");
+    figure.className = "media-video";
+    const video = document.createElement("video");
+    if (safePreviewUrl(this.__video.src, true)) video.src = this.__video.src;
+    if (this.__video.poster && safePreviewUrl(this.__video.poster, true)) video.poster = this.__video.poster;
+    video.controls = this.__video.controls !== false;
+    video.muted = video.defaultMuted = this.__video.muted === true;
+    video.preload = "metadata";
+    video.playsInline = true;
+    const preview = document.createElement("div");
+    preview.style.cssText = "position:relative;min-height:220px";
+    preview.append(video, createVideoOverlay(document, "Video", this.__video.src, true));
+    figure.append(preview);
+    if (this.__video.caption) { const caption = document.createElement("figcaption"); caption.textContent = this.__video.caption; figure.append(caption); }
+    return figure;
+  }
+  updateDOM() { return true; }
+  decorate() { return null; }
+  isInline() { return false; }
+  getTextContent() { return this.__video.caption ?? ""; }
+}
+export const create = (video?: VideoData) => new VideoNode(video);

package/src/editor/lib/ActionDialog.svelte

@@ -25,7 +25,7 @@
   }
 </script>
 
-<dialog bind:this={dialog} class="rigel rigel-modal-backdrop action-dialog" aria-labelledby="action-title" aria-describedby="action-description" oncancel={(event) => { event.preventDefault(); if (!busy) onclose(); }}>
+<dialog bind:this={dialog} class="rigel rigel-modal-backdrop action-dialog" aria-labelledby="action-title" aria-describedby="action-description" oncancel={(event) => { event.preventDefault(); event.stopPropagation(); if (!busy) onclose(); }} onkeydown={(event) => { if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); if (!busy) onclose(); } }}>
   <form class="rigel-modal" onsubmit={(event) => { event.preventDefault(); void submit(); }}>
     <div class="action-head"><h2 id="action-title">{title}</h2><button type="button" class="icon-btn" aria-label="Cancel" disabled={busy} onclick={onclose}><Icon name="x" size={16} /></button></div>
     <p id="action-description">{description}</p>
@@ -45,6 +45,7 @@
   .action-dialog::backdrop { background: transparent; }
   .action-head, .action-actions { display: flex; align-items: center; gap: 0.75rem; }
   .action-head { justify-content: space-between; }
+  .action-head h2 { min-width: 0; overflow-wrap: anywhere; }
   .action-actions { justify-content: flex-end; flex-wrap: wrap; margin-top: 1.5rem; }
   .action-actions button[type=button] { padding: 0.4375rem 0.75rem; border: 1px solid var(--border-control); border-radius: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 0.8125rem; cursor: pointer; }
   button:disabled { opacity: 0.5; cursor: wait; }

package/src/editor/lib/BlockEditor.svelte

@@ -7,7 +7,10 @@
   import * as Links from "@lexical/link";
   import * as Tables from "@lexical/table";
   import { ImageNode, type ImageData } from "../blocks/image";
+  import { VideoNode, type VideoData } from "../blocks/video";
+  import { EmbedNode, type EmbedData } from "../blocks/embed";
   import ImagePicker from "./ImagePicker.svelte";
+  import MediaPicker from "./MediaPicker.svelte";
   import type { StockResult } from "./images";
   import { safePreviewUrl } from "../../preview-urls";
   import { blockTypes, blockNodes } from "../blocks";
@@ -58,7 +61,12 @@
   let linkPosition = $state("");
   let editorHost: HTMLDivElement;
   let imageJob: { key: string; replace: boolean } | null = null;
+  let mediaJob: { key: string; replace: boolean } | null = null;
+  let mediaPicker: MediaPicker;
   let imageData = $state<ImageData | null>(null);
+  let embedData = $state<EmbedData | null>(null);
+  let videoData = $state<VideoData | null>(null);
+  const selectedVideo = $derived(embedData ?? videoData);
   let altOpen = $state(false);
   let altText = $state("");
   let altKey = "";
@@ -81,7 +89,8 @@
   let tableRows = $state(0);
   let tableColumns = $state(0);
   let tableHeader = $state(false);
-  const choices = $derived(blockTypes.filter(block => block.label.toLowerCase().includes((slash ?? "").toLowerCase())));
+  const mediaTypes = [{ value: "video", label: "Video" }, { value: "youtube", label: "YouTube" }, { value: "vimeo", label: "Vimeo" }] as const;
+  const choices = $derived([...blockTypes, ...mediaTypes].filter(block => block.label.toLowerCase().includes((slash ?? "").toLowerCase())));
   const textBlocks = blockTypes.filter(block => !["image", "table", "bullet", "number"].includes(block.value));
   const activeBlock = $derived(blockTypes.find(block => block.value === blockType));
 
@@ -106,6 +115,8 @@
       }
       if (node) {
         imageData = node instanceof ImageNode ? { ...node.__image } : null;
+        embedData = node instanceof EmbedNode ? { ...node.__embed } : null;
+        videoData = node instanceof VideoNode ? { ...node.__video } : null;
         activeKey = node.getKey();
         blockType = Rich.$isHeadingNode(node) ? node.getTag() : Lists.$isListNode(node) ? node.getListType() : node.getType();
         activeMarks = L.$isRangeSelection(selection) ? marks.filter(mark => selection.hasFormat(mark.type)).map(mark => mark.type) : [];
@@ -125,16 +136,17 @@
     positionInsertion();
   }
   function positionFloating() {
-    if (imageJob) return;
+    if (imageJob || mediaJob) return;
     const selection = view.getSelection();
     if (!root.ownerDocument.hasFocus()) { floating = ""; return; }
     if (editorHost.contains(root.ownerDocument.activeElement) && !root.contains(root.ownerDocument.activeElement)) return;
-    if (inline || imageData) {
-      if (imageData ? root.ownerDocument.activeElement !== root : !selection?.rangeCount || !root.contains(selection.anchorNode) || !root.contains(selection.focusNode)) { floating = ""; return; }
+    if (inline || imageData || selectedVideo) {
+      if (imageData || selectedVideo ? root.ownerDocument.activeElement !== root : !selection?.rangeCount || !root.contains(selection.anchorNode) || !root.contains(selection.focusNode)) { floating = ""; return; }
       const block = editor.getElementByKey(activeKey);
       if (!block) { floating = ""; return; }
-      const rect = imageData || selection!.isCollapsed ? block.getBoundingClientRect() : selection!.getRangeAt(0).getBoundingClientRect();
+      const rect = imageData || selectedVideo || selection!.isCollapsed ? block.getBoundingClientRect() : selection!.getRangeAt(0).getBoundingClientRect();
       if (rect.bottom < 0 || rect.top > view.innerHeight) { floating = ""; return; }
+      if (selectedVideo) { floating = ""; return; }
       const toolbarRect = editorHost.querySelector(imageData ? '.image-toolbar' : '.body-toolbar')?.getBoundingClientRect();
       const toolbarHeight = toolbarRect?.height || 42, toolbarWidth = toolbarRect?.width || 330;
       const top = rect.top >= toolbarHeight + 12 ? rect.top - toolbarHeight - 8 : rect.bottom + 8;
@@ -192,7 +204,7 @@
     }, L.COMMAND_PRIORITY_CRITICAL));
     cleanups.push(editor.registerCommand(L.DROP_COMMAND, event => { event.preventDefault(); return true; }, L.COMMAND_PRIORITY_CRITICAL));
     cleanups.push(editor.registerCommand(L.KEY_DOWN_COMMAND, event => {
-      if ((inline || imageData) && event.altKey && event.key === "F10") { event.preventDefault(); editorHost.querySelector<HTMLButtonElement>(imageData ? '.image-toolbar button' : '.body-toolbar button')?.focus(); return true; }
+      if ((inline || imageData || selectedVideo) && event.altKey && event.key === "F10") { event.preventDefault(); (selectedVideo ? editor.getElementByKey(activeKey)?.querySelector<HTMLButtonElement>('[data-rigel-edit-video]') : editorHost.querySelector<HTMLButtonElement>(imageData ? '.image-toolbar button' : '.body-toolbar button'))?.focus(); return true; }
       return slashKeydown(event);
     }, L.COMMAND_PRIORITY_HIGH));
     const updates = editor.registerUpdateListener(({ editorState, dirtyElements, dirtyLeaves }) => {
@@ -209,7 +221,7 @@
     toolbarObserver.observe(root);
     const outside = (event: PointerEvent) => {
       if (linkOpen && !editorHost.querySelector('.markdown-link')?.contains(event.target as Node)) linkOpen = false;
-      if ((inline || imageData) && !root.contains(event.target as Node) && !editorHost.contains(event.target as Node)) { floating = ""; linkOpen = false; altOpen = false; closeMenu(); }
+      if ((inline || imageData || selectedVideo) && !root.contains(event.target as Node) && !editorHost.contains(event.target as Node)) { floating = ""; linkOpen = false; altOpen = false; closeMenu(); }
       if (slash !== null && !slashMenu?.contains(event.target as Node) && !root.contains(event.target as Node) && !(event.target as Element).closest('.block-add')) dismissSlash();
     };
     const escape = (event: KeyboardEvent) => { if (event.key === "Escape") { endDrag(true); closeMenu(); dismissSlash(); if (inline) { floating = ""; editor.focus(); } } };
@@ -271,6 +283,12 @@
     return node.getChildren().flatMap(child => L.$isElementNode(child) && !child.isInline() ? [...inlineNodes(child), L.$createLineBreakNode()] : [child]);
   }
   function changeBlock(type: string, fromSlash = false) {
+    if (type === "video" || type === "youtube" || type === "vimeo") {
+      mediaJob = { key: fromSlash ? slashKey : activeKey, replace: fromSlash && !adding };
+      dismissSlash(); closeMenu();
+      mediaPicker.pick(type);
+      return;
+    }
     const definition = blockTypes.find(block => block.value === type);
     if (!definition) return;
     if (!fromSlash && type === blockType) { dismissSlash(); closeMenu(); return; }
@@ -390,6 +408,45 @@
     });
     imageJob = null; editor.focus();
   }
+  function editMedia(key: string) {
+    editor.getEditorState().read(() => {
+      const node = L.$getNodeByKey(key);
+      if (!(node instanceof EmbedNode || node instanceof VideoNode)) return;
+      mediaJob = { key, replace: true };
+      mediaPicker.edit(node instanceof EmbedNode ? node.__embed : node.__video);
+    });
+  }
+  export function editVideoAt(index: number) {
+    const key = editor.getEditorState().read(() => L.$getRoot().getChildren()[index]?.getKey());
+    if (key) editMedia(key);
+  }
+  function insertMedia(create: () => L.LexicalNode) {
+    const job = mediaJob ?? { key: activeKey, replace: false };
+    editor.update(() => {
+      const node = create(), previous = L.$getNodeByKey(job.key), paragraph = L.$createParagraphNode();
+      if (job.replace && (previous instanceof EmbedNode || previous instanceof VideoNode)) {
+        if (previous instanceof VideoNode && node instanceof VideoNode) node.__video = { ...previous.__video, ...node.__video };
+        previous.replace(node);
+        const selection = L.$createNodeSelection(); selection.add(node.getKey()); L.$setSelection(selection); hoverKey = "";
+        return;
+      }
+      if (previous && job.replace) previous.replace(node);
+      else if (previous && L.$isRootNode(previous.getParent())) previous.insertAfter(node);
+      else L.$getRoot().append(node);
+      node.insertAfter(paragraph);
+      paragraph.select();
+      hoverKey = "";
+    });
+    mediaJob = null;
+    refocus();
+  }
+  function pickVideo(video: VideoData) {
+    if (!safePreviewUrl(video.src, true)) return;
+    insertMedia(() => new VideoNode(video));
+  }
+  function pickEmbed(embed: EmbedData) {
+    insertMedia(() => new EmbedNode({ ...embed, privacy: embed.privacy !== false }));
+  }
   function closeMenu() { for (const popup of [menu, tableMenu, formatMenu]) if (popup?.matches(":popover-open")) popup.hidePopover(); }
   function openMenu(event?: MouseEvent, popup = menu) {
     if (suppressClick) { suppressClick = false; return; }
@@ -497,6 +554,11 @@
   }
   function contentClick(event: MouseEvent) {
     const element = (event.target as Element).closest<HTMLElement>('figure[data-block-key],hr[data-block-key]');
+    if (element && (event.target as Element).closest('[data-rigel-edit-video]')) {
+      event.preventDefault();
+      if (event.type === "click") editMedia(element.dataset.blockKey!);
+      return;
+    }
     if (event.type === "pointerdown" && !element) {
       editor.update(() => { if (L.$isNodeSelection(L.$getSelection())) L.$setSelection(null); }, { discrete: true });
       return;
@@ -520,23 +582,28 @@
     <button type="button" disabled={!tableCell || tableColumns >= MAX_TABLE_COLUMNS} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("column")}><Icon name="plus" />Add column right</button>
     <button type="button" disabled={!tableCell || tableRows <= 1} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("delete-row")}><Icon name="minus" />Remove row</button>
     <button type="button" disabled={!tableCell || tableColumns <= 1} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("delete-column")}><Icon name="minus" />Remove column</button>
-    <label class="inline"><Icon name="table" /><span>Header row</span><input type="checkbox" role="switch" class="switch" checked={tableHeader} disabled={!tableCell} onchange={event => tableAction("header", event.currentTarget.checked)} /></label>
+    <label class="inline"><input type="checkbox" role="switch" class="switch" checked={tableHeader} disabled={!tableCell} onchange={event => tableAction("header", event.currentTarget.checked)} /><Icon name="table" /><span>Header row</span></label>
   </div>
 {/snippet}
 {#snippet toolbar(image: boolean)}
-  <div class="body-toolbar formatting-toolbar" class:image-toolbar={image} role="group" aria-label={image ? "Image editing" : "Body formatting"} style={inline || image ? floating : undefined} hidden={markdownView || ((inline || image) && !floating) || (image && !imageData)}>
+  <div class="body-toolbar formatting-toolbar" class:image-toolbar={image} role="group" aria-label={image ? "Image editing" : "Body formatting"} style={inline || image ? floating : undefined} hidden={markdownView || ((inline || image) && !floating) || (image && !imageData) || (inline && !!selectedVideo)}>
     {#if image}
       <button type="button" aria-label="Edit alt text" data-tooltip="Edit alt text" onpointerdown={event => event.preventDefault()} onclick={openAlt}><Icon name="textAa" size={18} /></button>
       <button type="button" aria-label={imageData?.url ? "Edit image link" : "Add image link"} data-tooltip={imageData?.url ? "Edit image link" : "Add image link"} onpointerdown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
     {:else}
-    <Select ariaLabel="Block type" data-tooltip={activeBlock?.label ?? "Block type"} icon={activeBlock?.icon ?? "paragraph"} value={imageData ? "" : blockType} options={textBlocks} disabled={!!imageData} onchange={next => { hoverKey = ""; changeBlock(String(next)); }} />
-    {#if !inline || !["image", "divider"].includes(blockType)}<span class="toolbar-separator" aria-hidden="true"></span>{@render formatButtons()}<span class="toolbar-separator" aria-hidden="true"></span>{/if}
+    <Select ariaLabel="Block type" data-tooltip={activeBlock?.label ?? "Block type"} icon={activeBlock?.icon ?? "paragraph"} value={imageData || embedData ? "" : blockType} options={textBlocks} disabled={!!imageData} onchange={next => { hoverKey = ""; changeBlock(String(next)); }} />
+    {#if !inline || !["image", "video", "embed", "divider"].includes(blockType)}<span class="toolbar-separator" aria-hidden="true"></span>{@render formatButtons()}<span class="toolbar-separator" aria-hidden="true"></span>{/if}
+    {/if}
+    {#if image}
+      <ImagePicker toolbar value={imageData?.src ?? ""} altText={imageData?.alt ?? ""} triggerLabel="Replace image" onopen={() => { if (!imageJob) imageJob = { key: activeKey, replace: true }; linkOpen = false; altOpen = false; }} onpick={pickImage} onclose={() => { imageJob = null; refocus(); }} />
+    {:else}
+      <button type="button" data-media-trigger aria-label="Insert media" data-tooltip="Insert media" aria-haspopup="menu" onpointerdown={event => event.preventDefault()} onclick={event => mediaPicker.toggleMenu(event.currentTarget)}><Icon name="image" size={18} /></button>
+      <ImagePicker toolbar hiddenTrigger value="" onopen={() => { if (!imageJob) imageJob = { key: activeKey, replace: false }; linkOpen = false; altOpen = false; }} onpick={pickImage} onclose={() => { imageJob = null; refocus(); }} />
     {/if}
-    <ImagePicker toolbar value={image ? imageData?.src ?? "" : ""} altText={image ? imageData?.alt ?? "" : ""} triggerLabel={image ? "Replace image" : "Insert image"} onopen={() => { if (!imageJob) imageJob = { key: activeKey, replace: image }; linkOpen = false; altOpen = false; }} onpick={pickImage} onclose={() => { imageJob = null; refocus(); }} />
     {#if !image}
     <button type="button" aria-label="Table" data-tooltip="Table" aria-pressed={blockType === "table"} popovertarget={`${id}-table`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); tableMenu.matches(':popover-open') ? closeMenu() : openMenu(event, tableMenu); }}><Icon name="table" size={18} /></button>
-    <button type="button" aria-label="Bulleted list" data-tooltip="Bulleted list" aria-pressed={listType === "bullet"} disabled={["image", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("bullet")}><Icon name="listBullets" size={18} /></button>
-    <button type="button" aria-label="Numbered list" data-tooltip="Numbered list" aria-pressed={listType === "number"} disabled={["image", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("number")}><Icon name="listNumbers" size={18} /></button>
+    <button type="button" aria-label="Bulleted list" data-tooltip="Bulleted list" aria-pressed={listType === "bullet"} disabled={["image", "video", "embed", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("bullet")}><Icon name="listBullets" size={18} /></button>
+    <button type="button" aria-label="Numbered list" data-tooltip="Numbered list" aria-pressed={listType === "number"} disabled={["image", "video", "embed", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("number")}><Icon name="listNumbers" size={18} /></button>
     {#if !inline}
       <button type="button" class="block-history" disabled={!canUndo} onclick={() => editor.dispatchCommand(L.UNDO_COMMAND, undefined)}>Undo</button>
       <button type="button" class="block-history" disabled={!canRedo} onclick={() => editor.dispatchCommand(L.REDO_COMMAND, undefined)}>Redo</button>
@@ -547,9 +614,11 @@
   </div>
 {/snippet}
 <div class="block-editor" bind:this={editorHost}>
+  <MediaPicker bind:this={mediaPicker} hiddenTrigger onopen={() => editor.blur()} onimage={() => { if (!imageJob) imageJob = { key: activeKey, replace: false }; editorHost.querySelector<HTMLButtonElement>('.body-toolbar:not(.image-toolbar) [data-image-trigger]')?.click(); }} onvideo={pickVideo} onembed={pickEmbed} onclose={() => { mediaJob = null; refocus(); }} />
   {#if !inline}<div class="markdown-heading"><div class="field-label">Body</div><div class="markdown-modes"><button type="button" aria-pressed={markdownView} onclick={() => { markdownView = !markdownView; linkOpen = false; closeMenu(); dismissSlash(); }}>View as Markdown</button></div></div>{/if}
   {@render toolbar(inline && !!imageData)}
   {#if !inline}{@render toolbar(true)}{/if}
+
   {#if error}<p role="alert">{error}</p>{/if}
   {#if linkOpen}
     <div class="markdown-link" class:image-form={!!imageData} style={linkPosition} id={`${id}-link`} role="group" aria-label="Edit link" onkeydown={event => { if (event.key === "Escape") { event.stopPropagation(); linkOpen = false; refocus(); } if (event.key === "Enter") { event.preventDefault(); applyLink(); } }}>
@@ -573,7 +642,7 @@
       </div>
     </div>
   {/if}
-  {#if !inline && !imageData && floating && !markdownView}<div class="block-float" style={floating} role="group" aria-label="Selected text formatting">{@render formatButtons()}</div>{/if}
+  {#if !inline && !imageData && !selectedVideo && floating && !markdownView}<div class="block-float" style={floating} role="group" aria-label="Selected text formatting">{@render formatButtons()}</div>{/if}
   {#if markdownView}
     <div class="block-markdown-view">{#if inline}<button type="button" class="outlined" onclick={async () => { markdownView = false; await tick(); editor.focus(); }}>Close Markdown view</button>{/if}<pre class="block-markdown" aria-label="Body as Markdown" tabindex="0">{articleMarkdown(value)}</pre></div>
   {/if}

package/src/editor/lib/CollectionPanel.svelte

@@ -15,12 +15,13 @@
   import type { ContentDocument } from "../../schema/types";
   import { slugify } from "../../slugs";
 
-  let { fields, values, storageSlug, body, selected, focusToken, devMode, documents = [], bodyInline = false, oneditbody = () => {}, onchange, onbody }: {
+  let { fields, values, storageSlug, body, selected, focusToken, devMode, documents = [], bodyInline = false, bodyLoading = false, oneditbody = () => {}, onchange, onbody }: {
     fields: CollectionField[];
     values: Record<string, unknown>;
     storageSlug: string;
     body: ArticleBody;
     bodyInline?: boolean;
+    bodyLoading?: boolean;
     oneditbody?: () => void;
     selected: SelectedField | null;
     focusToken: number;
@@ -83,8 +84,8 @@
   </section>
   <section data-collection-field="$body">
     {#if bodyInline}
-      <button class="outlined" onclick={oneditbody}>Edit article body in preview</button>
-      <p class="hint">Click the article body in the preview to edit. Content changes require Save.</p>
+      <button class="outlined" disabled={bodyLoading} onclick={oneditbody}>Edit article body in preview</button>
+      <p class="hint">{bodyLoading ? "Loading preview…" : "Click the article body in the preview to edit. Content changes require Save."}</p>
     {:else}<BlockEditor value={body} oninput={onbody} />{/if}
   </section>
   </div>