@rigel-cms/rigel 1.4.0 → 1.5.0-rc.2

package/README.md

@@ -16,6 +16,8 @@ Edit page copy, structured content and articles at `/rigel/`. Your content stays
 
 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.
 
+Set `backend: "demo"` for a public editor with no sign-in. Save, create and delete changes stay in browser memory; publishing is simulated. Refreshing restores the original content. Demo mode never writes content to disk or GitHub, and media uploads, imports and metadata changes are disabled. Existing media can still be selected. The demo manifest exposes all configured content publicly, so use sample content only. The separate `demo` boolean controls sample-field visibility, not the storage backend.
+
 ## Get started
 
 Use the [Astro starter](https://github.com/rigel-cms/rigel-starter), or follow the [installation guide](docs/getting-started.md) to add Rigel to an existing site. Requires Node.js 24 and Astro 7.3 or later within Astro 7.

package/docs/media.md

@@ -52,7 +52,7 @@ On the local backend, open an asset in Media, edit its display name, title, desc
 
 Local file uploads send a browser-supplied author label through `X-Rigel-Author`. Rigel uses the browser identity's name or nickname, falling back to `Local user`. This is a descriptive label, not verified ownership or an audit identity. The metadata editor cannot change it. Existing files and URL or stock imports may have no captured author; the interface displays `Local user` as a fallback.
 
-For rich-text image insertion, saved repository-image alt text supplies a default that you can override per use, or leave empty for a decorative image. Image fields store the URL; declare and render a separate alt field where your site needs one. Rigel does not rewrite alt text already stored in content. Rich-text insertions remain unsaved until the document's Save action.
+For rich-text image insertion, saved repository-image alt text supplies a default that you can override per use, or leave empty for a decorative image. Image fields store the URL; declare and render a separate alt field where your site needs one. Store the original URL rather than a path your build generates. [Preview](preview.md) covers the `data-rigel-src` binding for optimized Astro images. Rigel does not rewrite alt text already stored in content. Rich-text insertions remain unsaved until the document's Save action.
 
 ## Image URLs and stock providers
 

package/docs/preview.md

@@ -44,6 +44,21 @@ These HTML excerpts illustrate the scalar anchors. Render the saved values throu
 
 Paths use object keys and stable array `_key` values. Array positions are not preview bindings. For schema content, put `data-rigel-doc="page:about"` on each bound element and on section/list containers. It identifies the source document for that element; a parent attribute does not substitute for attributes on descendant anchors. Referenced records use their own IDs and local field paths.
 
+### Keep optimized images editable
+
+Astro's `Image` and `Picture` components replace `src` with hashed, responsive candidates, so changing `src` alone changes nothing while `srcset` still lists the old files. Mark an editable image with `data-rigel-src` to show the draft instead:
+
+```astro
+<Image src={cover} alt={hero.alt} widths={[480, 960]} sizes="100vw" data-rigel-image="hero.image" data-rigel-alt="hero.alt" data-rigel-src={hero.image} />
+<Picture src={cover} formats={["avif", "webp"]} alt={hero.alt} data-rigel-image="hero.image" data-rigel-src={hero.image} />
+```
+
+`data-rigel-image` names the field, as before. `data-rigel-src` holds the original browser-addressable URL that the field stores, and it marks the element as optimized. In preview, a marked image loses its `srcset` and `sizes`, and the surrounding `picture` sources lose theirs, so the field value is the file the browser loads. The attribute is not a second source of truth: preview renders the field value, and a value that fails the image URL check is dropped rather than loaded.
+
+Public pages are untouched. Rigel patches only the editor iframe, so built markup keeps its hashed URLs, `srcset` and AVIF or WebP sources. Images without `data-rigel-src` keep their previous behavior: the `src` changes and any `srcset` stays.
+
+Store the original reference in content, never a generated path. `/images/cover.jpg`, a media URL or an HTTPS URL work; `/_astro/cover.BnV1MXKY.webp` does not, because Astro derives it at build time. An imported file is not addressable either: `src/assets/cover.jpg` has no URL a browser can request. Serve the file from a public path or the media folder and bind that URL, even when the template imports the same file for optimization. Preview shows the original at its own size, not a resized or converted variant, and the built `width` and `height` stay as they were, so check a replacement with different proportions against the template's layout. An upload becomes reachable at its media URL once the host serves it or rebuilds.
+
 ## Prepare changing sections and lists
 
 Scalar anchors update existing elements. Adding sections needs inert templates for each allowed section type. This HTML excerpt uses the `intro` section from [Content model](content-model.md):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rigel-cms/rigel",
-  "version": "1.4.0",
+  "version": "1.5.0-rc.2",
   "description": "A CMS for Astro sites. You edit the text, Git keeps the history.",
   "keywords": [
     "astro",

package/src/config.ts

@@ -23,7 +23,7 @@ export interface RigelConfig {
   mediaDir?: string;
   maxFileSize?: number;
   preview?: import("./preview").PreviewConfig;
-  backend: "local" | "github";
+  backend: "local" | "github" | "demo";
   jsonOutput?: JsonOutput;
   demo?: boolean;
   languages?: Locale[];
@@ -60,6 +60,7 @@ const DEFAULTS: Pick<RigelConfig, "copyDir" | "backend"> = {
 
 export function parseConfig(options: Partial<RigelConfig> = {}): RigelConfig {
   const cfg = { ...DEFAULTS, ...options };
+  if (!["local", "github", "demo"].includes(cfg.backend)) throw new Error("rigel: backend must be local, github or demo");
   cfg.search = { scope: effectiveSearchScope(cfg.search, undefined) };
   if (cfg.contentLocales !== undefined) {
     validateContentLocales(cfg.contentLocales);

package/src/editor/App.svelte

@@ -37,6 +37,7 @@
   import UnsavedChanges from "./lib/UnsavedChanges.svelte";
   import ActionDialog from "./lib/ActionDialog.svelte";
   import PublishDialog from "./lib/PublishDialog.svelte";
+  import { validateDemoSelection } from "./lib/demo-backend";
   import VisualEditor from "./lib/VisualEditor.svelte";
   import { newDocumentFromTemplate } from "../schema/paths";
   import { previewUrl, previewPath } from "../preview";
@@ -64,6 +65,7 @@
   let sessionExpiresAt = $state(0);
   let tokenExpired = $state(false);
   const githubMode = $derived(manifest.backend === "github");
+  const demoMode = $derived(manifest.backend === "demo");
   let sel = $state<Sel | null>(null);
   const previewTarget = $derived(sel?.kind === "page" ? sel : null);
   let draft = $state<Record<string, unknown>>({});
@@ -96,6 +98,12 @@
 
   async function reviewPublish() {
     if (publishBusy || publishLoading) return;
+    if (demoMode) {
+      publishOpen = true;
+      publishMessage = "";
+      publishError = dirty ? $t("shell.saveBeforeReview") : "";
+      return;
+    }
     publishOpen = true;
     publishReview = null;
     publishError = "";
@@ -116,6 +124,11 @@
   }
 
   async function publish() {
+    if (demoMode) {
+      if (dirty || saveTask || saveState === "saving") { publishError = $t("shell.saveBeforeReview"); return; }
+      publishMessage = $t("shell.demoPublished");
+      return;
+    }
     if (publishBusy || publishLoading || !publishReview) return;
     publishBusy = true;
     publishError = "";
@@ -149,7 +162,7 @@
   let newDocument = $state<{ type: string; id: string; slug: string } | null>(null);
   let docBase = $state<Record<string, unknown> | null>(null);
   let documentReload = $state(0);
-  if (import.meta.hot) import.meta.hot.on("rigel:content-updated", () => { if (!githubMode) documentReload += 1; });
+  if (import.meta.hot) import.meta.hot.on("rigel:content-updated", () => { if (!githubMode && !demoMode) documentReload += 1; });
 
   async function loadBlueprint() {
     loadError = "";
@@ -307,7 +320,10 @@
             values.slug = normalizeUrlSlug(values.slug, $t);
             draft.slug = values.slug;
           }
-          if (githubMode) {
+          if (demoMode) {
+            if (!selection) throw new Error($t("shell.selectBeforeSaving"));
+            validateDemoSelection(manifest, selection, values, body, !!creating || creatingDoc);
+          } else if (githubMode) {
             if (!selection) throw new Error($t("shell.selectBeforeSaving"));
             await saveRemoteSelection(requireGitContext(), manifest, selection, values, body, !!creating || creatingDoc);
           } else {
@@ -350,10 +366,10 @@
 
   let settings = $state(getSettings());
   let settingsError = $state("");
-  const userName = $derived(githubMode ? githubAccess?.user.name ?? githubAccess?.user.login ?? $t("shell.githubUser") : $t("shell.localUser"));
+  const userName = $derived(demoMode ? $t("shell.demoUser") : githubMode ? githubAccess?.user.name ?? githubAccess?.user.login ?? $t("shell.githubUser") : $t("shell.localUser"));
   const userAvatar = $derived(githubMode && /^https:\/\/avatars\.githubusercontent\.com\//.test(githubAccess?.user.avatar_url ?? "") ? githubAccess!.user.avatar_url : "");
   let failedAvatar = $state("");
-  const userLogin = $derived(githubMode && githubAccess ? `@${githubAccess.user.login}` : $t("shell.localMode"));
+  const userLogin = $derived(demoMode ? $t("shell.demoMode") : githubMode && githubAccess ? `@${githubAccess.user.login}` : $t("shell.localMode"));
   let content: HTMLDivElement;
   let contentWidth = $state(0);
   let resizing = $state(false);
@@ -811,14 +827,14 @@
     if (!current || !collection) return;
     actionDialog = {
       title: $t("shell.deletePostTitle", { name: String(current.frontmatter.title ?? current.slug) }), confirmLabel: $t("shell.delete"), danger: true,
-      description: unsaved ? $t("shell.discardNewPostDescription") : githubMode ? $t("shell.deleteRemotePostDescription", { slug: current.slug, branch: String(manifest.github?.branch) }) : $t("shell.deleteLocalPostDescription", { slug: current.slug }),
+      description: unsaved ? $t("shell.discardNewPostDescription") : demoMode ? $t("shell.demoDelete") : githubMode ? $t("shell.deleteRemotePostDescription", { slug: current.slug, branch: String(manifest.github?.branch) }) : $t("shell.deleteLocalPostDescription", { slug: current.slug }),
       onconfirm: async () => {
         if (!unsaved) {
           if (githubMode) {
             try { await deleteRemotePost(requireGitContext(), manifest, collection.name, current.slug); }
             catch (error) { handleAuthError(error); throw error; }
           }
-          else {
+          else if (!demoMode) {
           const res = await fetch(`/rigel/api/local/${collection.name}/${encodeURIComponent(current.slug)}`, { method: "DELETE", headers: { "Accept-Language": $locale } });
           if (!res.ok) throw new Error((await res.text()) || $t("shell.deleteFailedStatus", { status: res.status }));
           }
@@ -941,8 +957,8 @@
       {/each}
     </nav>
 
-    {#if githubMode && manifest.github?.publishBranch}
-      <button id="publish-button" class="sidebar-publish" aria-label={$t("shell.publish")} data-tooltip={dirty ? $t("shell.saveBeforePublishing") : $t("shell.publishSavedChanges")} disabled={publishBusy || publishLoading || saveState === "saving" || connectionBusy || tokenExpired || githubAccess?.status !== "ready"} onclick={reviewPublish}>
+    {#if demoMode || (githubMode && manifest.github?.publishBranch)}
+      <button id="publish-button" class="sidebar-publish" aria-label={$t("shell.publish")} data-tooltip={dirty ? $t("shell.saveBeforePublishing") : $t("shell.publishSavedChanges")} disabled={publishBusy || publishLoading || saveState === "saving" || (!demoMode && (connectionBusy || tokenExpired || githubAccess?.status !== "ready"))} onclick={reviewPublish}>
         <Icon name="rocketLaunch" size={18} /><span class="sidebar-label">{$t("shell.publish")}</span>
       </button>
     {/if}
@@ -951,7 +967,7 @@
     </button>
     <div class="aside-foot">
       <div class="user-menu-wrap">
-        <button class="user-btn" aria-label={githubMode ? $t("shell.githubUserMenu") : $t("shell.localUserMenu")} data-tooltip={githubMode ? $t("shell.githubUserMenu") : $t("shell.localUserMenu")} aria-haspopup="menu" aria-expanded={userOpen} onclick={() => (userOpen = !userOpen)}>
+        <button class="user-btn" aria-label={demoMode ? $t("shell.demoUser") : githubMode ? $t("shell.githubUserMenu") : $t("shell.localUserMenu")} data-tooltip={demoMode ? $t("shell.demoUser") : githubMode ? $t("shell.githubUserMenu") : $t("shell.localUserMenu")} aria-haspopup="menu" aria-expanded={userOpen} onclick={() => (userOpen = !userOpen)}>
           {@render avatar()}
           <span class="user-details"><span class="uname">{userName}</span><small>{userLogin}</small></span>
           <span class="user-menu-icon"><Icon name="dotsThreeOutlineVertical" size={18} /></span>
@@ -981,11 +997,11 @@
             <a role="menuitem" href={githubAccess?.installUrl} target="_blank" rel="noopener noreferrer">{$t("shell.configureGithubAccess")}</a>
             <button role="menuitem" class="github-reconnect" disabled={connectionBusy || saveState === "saving"} onclick={() => { userOpen = false; void connectGitHub(); }}>{$t("shell.reconnectGithub")}</button>
             {/if}
-            <button id={githubMode ? "github-sign-out" : undefined} role="menuitem" class:muted={!githubMode} disabled={!githubMode || saveState === "saving" || connectionBusy} data-tooltip={githubMode ? $t("shell.signOutTooltip") : $t("shell.localMode")} onclick={signOut}>
+            {#if !demoMode}<button id={githubMode ? "github-sign-out" : undefined} role="menuitem" class:muted={!githubMode} disabled={!githubMode || saveState === "saving" || connectionBusy} data-tooltip={githubMode ? $t("shell.signOutTooltip") : $t("shell.localMode")} onclick={signOut}>
               <Icon name="signOut" size={13} />
               {$t("shell.signOut")}
               {#if !githubMode}<span class="soon">{$t("shell.githubBackendHint")}</span>{/if}
-            </button>
+            </button>{/if}
           </div>
         {/if}
       </div>
@@ -1000,6 +1016,7 @@
           <button class="primary" disabled={connectionBusy || saveState === "saving"} onclick={connectGitHub}>{connectionBusy ? $t("shell.connecting") : $t("shell.reconnectGithub")}</button>
         </div>
       {/if}
+      {#if demoMode}<p class="github-session" role="status">{$t("shell.demoBanner")}</p>{/if}
       {#if settingsError}<p role="alert">{settingsError}</p>{/if}
       {#if ready && sel && sel.kind !== "media"}
         {#if sel.kind === "page" || sel.kind === "post" || sel.kind === "menu" || sel.kind === "document"}
@@ -1224,5 +1241,5 @@
   <ActionDialog {...actionDialog} onclose={() => { actionDialog = null; }} />
 {/if}
 {#if publishOpen}
-  <PublishDialog review={publishReview} loading={publishLoading} busy={publishBusy} error={publishError} message={publishMessage} onrefresh={reviewPublish} onconfirm={publish} onclose={closePublish} />
+  <PublishDialog demo={demoMode} review={publishReview} loading={publishLoading} busy={publishBusy} error={publishError} message={publishMessage} onrefresh={reviewPublish} onconfirm={publish} onclose={closePublish} />
 {/if}

package/src/editor/i18n/de/shell.json

@@ -1,4 +1,11 @@
 {
+  "shell.demoUser": "Demobesucher",
+  "shell.demoMode": "Demomodus",
+  "shell.demoBanner": "Öffentliche Demo — Änderungen bleiben im Speicher und werden beim Neuladen zurückgesetzt. Keine Dateien werden geschrieben.",
+  "shell.demoPublishDescription": "Simulierte Veröffentlichung: Es wird nichts geschrieben oder bereitgestellt.",
+  "shell.demoPublished": "Simulation abgeschlossen. Nichts wurde geschrieben oder bereitgestellt. Neuladen setzt Änderungen zurück.",
+  "shell.demoDelete": "Eintrag aus der Demositzung entfernen? Neuladen stellt den Inhalt wieder her.",
+  "shell.demoMediaReadOnly": "Medien sind schreibgeschützt. Vorhandene Dateien auswählen; Uploads, Importe und Metadatenänderungen sind deaktiviert.",
   "shell.searchScope": "Inhaltssprachen durchsuchen",
   "shell.searchScopeDefault": "Website-Standard ({scope})",
   "shell.searchScopeAll": "Alle Sprachen",

package/src/editor/i18n/en/shell.json

@@ -1,4 +1,11 @@
 {
+  "shell.demoUser": "Demo visitor",
+  "shell.demoMode": "Demo mode",
+  "shell.demoBanner": "Public demo — changes stay in memory and reset when you refresh. No files are written.",
+  "shell.demoPublishDescription": "Try publishing your saved changes. This is a simulation: nothing is written or deployed.",
+  "shell.demoPublished": "Demo publish complete. Nothing was written or deployed. Refresh to reset your changes.",
+  "shell.demoDelete": "Remove this entry from your demo session? Refresh restores the original content.",
+  "shell.demoMediaReadOnly": "Media is read-only in the demo. Choose an existing asset; uploads, imports and metadata changes are disabled.",
   "shell.searchScope": "Search content languages",
   "shell.searchScopeDefault": "Website default ({scope})",
   "shell.searchScopeAll": "All languages",

package/src/editor/i18n/es/shell.json

@@ -1,4 +1,11 @@
 {
+  "shell.demoUser": "Visitante de la demo",
+  "shell.demoMode": "Modo demo",
+  "shell.demoBanner": "Demo pública: los cambios quedan en memoria y se restablecen al recargar. No se escriben archivos.",
+  "shell.demoPublishDescription": "Publicación simulada: no se escribe ni se despliega nada.",
+  "shell.demoPublished": "Simulación completada. No se ha escrito ni desplegado nada. Recarga para restablecer los cambios.",
+  "shell.demoDelete": "¿Eliminar esta entrada de la sesión de demo? Recargar restaura el contenido original.",
+  "shell.demoMediaReadOnly": "Medios de solo lectura. Elige un archivo existente; las subidas, importaciones y cambios de metadatos están desactivados.",
   "shell.searchScope": "Idiomas del contenido de búsqueda",
   "shell.searchScopeDefault": "Predeterminado del sitio ({scope})",
   "shell.searchScopeAll": "Todos los idiomas",

package/src/editor/i18n/fr/shell.json

@@ -1,4 +1,11 @@
 {
+  "shell.demoUser": "Visiteur de la démo",
+  "shell.demoMode": "Mode démo",
+  "shell.demoBanner": "Démo publique — les modifications restent en mémoire et disparaissent à l’actualisation. Aucun fichier n’est modifié.",
+  "shell.demoPublishDescription": "Publication simulée : rien n’est écrit ni déployé.",
+  "shell.demoPublished": "Publication simulée terminée. Rien n’a été écrit ni déployé. Actualisez pour réinitialiser vos modifications.",
+  "shell.demoDelete": "Supprimer cette entrée de la session de démo ? L’actualisation restaure le contenu d’origine.",
+  "shell.demoMediaReadOnly": "Médias en lecture seule : choisissez un fichier existant. Envois, imports et modifications des métadonnées désactivés.",
   "shell.searchScope": "Langues du contenu recherché",
   "shell.searchScopeDefault": "Par défaut du site ({scope})",
   "shell.searchScopeAll": "Toutes les langues",

package/src/editor/i18n/it/shell.json

@@ -1,4 +1,11 @@
 {
+  "shell.demoUser": "Visitatore demo",
+  "shell.demoMode": "Modalità demo",
+  "shell.demoBanner": "Demo pubblica: le modifiche restano in memoria e si azzerano ricaricando. Nessun file viene scritto.",
+  "shell.demoPublishDescription": "Pubblicazione simulata: nulla viene scritto o distribuito.",
+  "shell.demoPublished": "Simulazione completata. Nulla è stato scritto o distribuito. Ricarica per azzerare le modifiche.",
+  "shell.demoDelete": "Rimuovere questa voce dalla sessione demo? Ricaricando si ripristina il contenuto originale.",
+  "shell.demoMediaReadOnly": "Media in sola lettura. Scegli un file esistente; caricamenti, importazioni e modifiche ai metadati sono disattivati.",
   "shell.searchScope": "Lingue dei contenuti da cercare",
   "shell.searchScopeDefault": "Predefinito del sito ({scope})",
   "shell.searchScopeAll": "Tutte le lingue",

package/src/editor/i18n/ja/shell.json

@@ -1,4 +1,11 @@
 {
+  "shell.demoUser": "デモ訪問者",
+  "shell.demoMode": "デモモード",
+  "shell.demoBanner": "公開デモ：変更はメモリ内にのみ保存され、再読み込みでリセットされます。ファイルは書き込まれません。",
+  "shell.demoPublishDescription": "公開のシミュレーションです。書き込みやデプロイは行いません。",
+  "shell.demoPublished": "シミュレーション完了。書き込みやデプロイは行われていません。再読み込みで変更をリセットできます。",
+  "shell.demoDelete": "この項目をデモセッションから削除しますか？再読み込みで元に戻ります。",
+  "shell.demoMediaReadOnly": "メディアは読み取り専用です。既存のファイルを選択してください。アップロード、インポート、メタデータの変更は無効です。",
   "shell.searchScope": "検索するコンテンツの言語",
   "shell.searchScopeDefault": "サイトの既定値（{scope}）",
   "shell.searchScopeAll": "すべての言語",

package/src/editor/i18n/nl/shell.json

@@ -1,4 +1,11 @@
 {
+  "shell.demoUser": "Demobezoeker",
+  "shell.demoMode": "Demomodus",
+  "shell.demoBanner": "Openbare demo — wijzigingen blijven in het geheugen en verdwijnen bij vernieuwen. Er worden geen bestanden geschreven.",
+  "shell.demoPublishDescription": "Gesimuleerde publicatie: er wordt niets geschreven of uitgerold.",
+  "shell.demoPublished": "Simulatie voltooid. Niets geschreven of uitgerold. Vernieuw om wijzigingen te herstellen.",
+  "shell.demoDelete": "Dit item uit de demosessie verwijderen? Vernieuwen herstelt de inhoud.",
+  "shell.demoMediaReadOnly": "Media zijn alleen-lezen. Kies een bestaand bestand; uploads, imports en metadatawijzigingen zijn uitgeschakeld.",
   "shell.searchScope": "Inhoudstalen doorzoeken",
   "shell.searchScopeDefault": "Websitestandaard ({scope})",
   "shell.searchScopeAll": "Alle talen",

package/src/editor/i18n/ru/shell.json

@@ -1,4 +1,11 @@
 {
+  "shell.demoUser": "Посетитель демо",
+  "shell.demoMode": "Деморежим",
+  "shell.demoBanner": "Публичное демо: изменения хранятся в памяти и сбрасываются при обновлении страницы. Файлы не изменяются.",
+  "shell.demoPublishDescription": "Имитация публикации: ничего не записывается и не развёртывается.",
+  "shell.demoPublished": "Имитация завершена. Ничего не записано и не развёрнуто. Обновите страницу для сброса изменений.",
+  "shell.demoDelete": "Удалить запись из демосессии? Обновление страницы восстановит исходное содержимое.",
+  "shell.demoMediaReadOnly": "Медиа доступны только для чтения. Выберите существующий файл; загрузки, импорт и изменение метаданных отключены.",
   "shell.searchScope": "Языки содержимого для поиска",
   "shell.searchScopeDefault": "По умолчанию на сайте ({scope})",
   "shell.searchScopeAll": "Все языки",

package/src/editor/i18n/zh/shell.json

@@ -1,4 +1,11 @@
 {
+  "shell.demoUser": "演示访客",
+  "shell.demoMode": "演示模式",
+  "shell.demoBanner": "公开演示：更改仅保存在内存中，刷新后重置。不会写入任何文件。",
+  "shell.demoPublishDescription": "模拟发布：不会写入或部署任何内容。",
+  "shell.demoPublished": "模拟发布完成。未写入或部署任何内容。刷新以重置更改。",
+  "shell.demoDelete": "从演示会话中删除此条目？刷新后将恢复原始内容。",
+  "shell.demoMediaReadOnly": "演示中的媒体为只读。请选择现有文件；上传、导入和元数据修改已禁用。",
   "shell.searchScope": "搜索内容语言",
   "shell.searchScopeDefault": "网站默认（{scope}）",
   "shell.searchScopeAll": "所有语言",

package/src/editor/lib/ImagePicker.svelte

@@ -26,12 +26,13 @@
   } = $props();
   const id = $props.id();
   const maxFileSize = config.maxFileSize ?? DEFAULT_MAX_FILE_SIZE;
+  const demoMode = config.backend === "demo";
   let open = $state(false);
   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 === "file" ? ["library", "upload"] : 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)[]);
+  const tabs = $derived((demoMode ? ["library"] : kind === "file" ? ["library", "upload"] : 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);
@@ -82,7 +83,7 @@
     if (inline) { tab = "library"; open = true; }
   }
   async function saveMetadata() {
-    if (!selected?.asset || savingMeta) return;
+    if (demoMode || !selected?.asset || !writable || savingMeta) return;
     const url = selected.asset.url;
     savingMeta = true; metaError = ""; metaNotice = "";
     try {
@@ -120,7 +121,7 @@
     if (!response.ok) throw new Error($t("media.listingUnavailable"));
     const data = await response.json();
     assets = (data.assets ?? data.images).filter((asset: MediaAsset) => inline || (kind === "file" ? safeFileUrl(asset.url) && matchesMediaAccept(asset.url, accept) : asset.type?.startsWith(kind === "video" ? "video/" : "image/")));
-    writable = data.writable === true;
+    writable = !demoMode && data.writable === true;
     folder = data.folder;
   }
   onMount(() => { if (inline) void run(); });
@@ -154,6 +155,7 @@
     finally { if (request === requestId) loading = false; }
   }
   async function confirm() {
+    if (demoMode && (tab !== "library" || !selected?.asset)) { error = $t("shell.demoMediaReadOnly"); return; }
     if (providerTab) {
       const ref = parseEmbedUrl(urlInput);
       if (!ref || ref.provider !== tab) { error = $t("media.pasteVideoUrl", { provider: tab === "youtube" ? "YouTube" : "Vimeo" }); return; }
@@ -187,6 +189,7 @@
     finally { if (request === requestId) picking = false; }
   }
   function upload(file?: File) {
+    if (demoMode) return;
     if (!file || picking) return;
     error = "";
     const limit = maxFileSize;
@@ -204,6 +207,7 @@
     releaseFile(); onclose?.(); trigger?.focus();
   }
   function changeTab(next: typeof tab) {
+    if (demoMode) next = "library";
     alt = altText; metaTitle = ""; metaDescription = "";
     requestId++; releaseFile(); tab = next; results = []; selected = null; error = ""; searched = false; loading = false;
     if (next === "youtube" || next === "vimeo") {
@@ -220,7 +224,7 @@
 </script>
 
 {#if inline}
-  <div class="titlebar"><h2>{$t("media.heading")}</h2><button bind:this={trigger} type="button" class="primary" onclick={launch}>{$t("media.upload")}</button></div>
+  <div class="titlebar"><h2>{$t("media.heading")}</h2><button bind:this={trigger} type="button" class="primary" disabled={demoMode} onclick={launch}>{$t("media.upload")}</button></div>
   <div class="media-library">
     {@render libraryBrowser()}
     {#if notice}<p role="status">{notice}</p>{/if}
@@ -239,6 +243,7 @@
 {/if}
 
 {#snippet libraryBrowser()}
+  {#if demoMode}<p class="hint">{$t("shell.demoMediaReadOnly")}</p>{/if}
   <p class="hint">{$t(writable ? "media.repositoryWritable" : "media.repositorySnapshot", { folder: folder || "…" })}</p>
   <div class="media-tools">
     <div class="media-views" role="group" aria-label={$t("media.view")}>
@@ -287,10 +292,10 @@
           <div class="media-details">
           {#if (inline && selected.asset) || metadataImport}
             <div class="media-meta">
-              {#if inline && selected.asset}<label><span>{$t("media.displayName")}</span><input aria-label={$t("media.mediaDisplayName")} type="text" maxlength="120" bind:value={metaName} /></label>{/if}
-              {#if imageImport}<label><span>{$t("media.decorativeAlt")}</span><input aria-label={$t("media.imageAlt")} type="text" maxlength="1000" disabled={picking} bind:value={alt} /></label>{:else if selected.asset?.type?.startsWith("image/")}<label><span>{$t("media.alt")}</span><textarea aria-label={$t("media.mediaAlt")} rows="3" maxlength="1000" bind:value={metaAlt}></textarea></label>{/if}
-              <label><span>{$t("media.title")}</span><input aria-label={$t(imageImport ? "media.imageTitle" : "media.mediaTitle")} type="text" maxlength="200" disabled={picking} bind:value={metaTitle} /></label>
-              <label><span>{$t("media.description")}</span><textarea aria-label={$t(imageImport ? "media.imageDescription" : "media.mediaDescription")} rows="3" maxlength="1000" disabled={picking} bind:value={metaDescription}></textarea></label>
+              {#if inline && selected.asset}<label><span>{$t("media.displayName")}</span><input aria-label={$t("media.mediaDisplayName")} type="text" maxlength="120" readonly={demoMode} bind:value={metaName} /></label>{/if}
+              {#if imageImport}<label><span>{$t("media.decorativeAlt")}</span><input aria-label={$t("media.imageAlt")} type="text" maxlength="1000" disabled={picking} bind:value={alt} /></label>{:else if selected.asset?.type?.startsWith("image/")}<label><span>{$t("media.alt")}</span><textarea aria-label={$t("media.mediaAlt")} rows="3" maxlength="1000" readonly={demoMode} bind:value={metaAlt}></textarea></label>{/if}
+              <label><span>{$t("media.title")}</span><input aria-label={$t(imageImport ? "media.imageTitle" : "media.mediaTitle")} type="text" maxlength="200" readonly={demoMode} disabled={picking} bind:value={metaTitle} /></label>
+              <label><span>{$t("media.description")}</span><textarea aria-label={$t(imageImport ? "media.imageDescription" : "media.mediaDescription")} rows="3" maxlength="1000" readonly={demoMode} disabled={picking} bind:value={metaDescription}></textarea></label>
               {#if selected.asset}<p class="hint">{$t("media.author", { author: selected.asset.author || $t("media.localUser") })}</p>{:else if selected.file}<p class="hint">{selected.file.name}</p>{/if}
             </div>
           {:else if selected.file}
@@ -317,7 +322,7 @@
           <div class="media-button-actions">
           {#if inline && selected.asset}
             <button type="button" class="outlined" disabled={picking || savingMeta} onclick={close}>{$t("media.cancel")}</button>
-            <button type="button" class="primary" disabled={picking || savingMeta} onclick={saveMetadata}>{$t(savingMeta ? "media.saving" : "media.save")}</button>
+            <button type="button" class="primary" disabled={!writable || picking || savingMeta} onclick={saveMetadata}>{$t(savingMeta ? "media.saving" : "media.save")}</button>
           {:else}
             <button type="button" class="outlined" disabled={picking} onclick={() => { selected = null; releaseFile(); }}>{$t("media.back")}</button>
             {#if inline && tab === "library"}<button type="button" class="primary" onclick={close}>{$t("media.done")}</button>{:else}<button type="button" class="primary" disabled={picking || (needsImport && !writable)} onclick={confirm}>{$t(picking ? kind === "file" ? "media.uploadingFile" : kind === "video" ? "media.uploadingVideo" : "media.importingPhoto" : kind === "file" ? selected.file ? "media.uploadFile" : "media.useFile" : kind === "video" ? "media.useVideo" : !inline ? "media.insertImage" : selected.file && mediaMetadata(selected.file.name)?.category !== "Images" ? "media.uploadFile" : "media.importImage")}</button>{/if}

package/src/editor/lib/PublishDialog.svelte

@@ -2,7 +2,8 @@
   import { t } from "../i18n";
   import Icon from "./Icon.svelte";
   import type { PublishReview } from "./github-backend";
-  let { review, loading, busy, error, message, onrefresh, onconfirm, onclose }: {
+  let { demo = false, review, loading, busy, error, message, onrefresh, onconfirm, onclose }: {
+    demo?: boolean;
     review: PublishReview | null; loading: boolean; busy: boolean; error: string; message: string;
     onrefresh: () => void; onconfirm: () => void; onclose: () => void;
   } = $props();
@@ -18,7 +19,7 @@
 <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">{$t("connection.publishTitle")}</h2><button type="button" class="icon-btn" aria-label={$t("connection.closePublishReview")} disabled={busy} onclick={onclose}><Icon name="x" size={16} /></button></div>
-    <p id="publish-description">{#each $t("connection.publishDescription", { scope: "{scope}" }).split("{scope}") as part, index}{#if index}<strong>{$t("connection.publishScope")}</strong>{/if}{part}{/each}</p>
+    <p id="publish-description">{#if demo}{$t("shell.demoPublishDescription")}{:else}{#each $t("connection.publishDescription", { scope: "{scope}" }).split("{scope}") as part, index}{#if index}<strong>{$t("connection.publishScope")}</strong>{/if}{part}{/each}{/if}</p>
     {#if loading}<p role="status">{$t("connection.loadingReview")}</p>{/if}
     {#if review}
       <p><strong>{review.repo}</strong><br />{#each $t("connection.publishBranches", { branch: "{branch}", publishBranch: "{publishBranch}" }).split(/(\{branch\}|\{publishBranch\})/) as part}{#if part === "{branch}"}<span class="publish-branch">{review.branch}</span>{:else if part === "{publishBranch}"}<span class="publish-branch">{review.publishBranch}</span>{:else}{part}{/if}{/each}</p>
@@ -41,7 +42,7 @@
     <div class="publish-actions">
       <button type="button" bind:this={cancel} class="outlined" disabled={busy} onclick={onclose}>{message ? $t("connection.close") : $t("connection.cancel")}</button>
       {#if !message}<button type="button" class="outlined" disabled={loading || busy} onclick={onrefresh}>{$t("connection.reviewAgain")}</button>{/if}
-      {#if review && !message}<button id="confirm-publish" type="submit" class="primary" disabled={loading || busy || !review.files.length}>{busy ? $t("connection.working") : review.needsSync ? $t("connection.syncDraftsFirst") : $t("connection.confirmPublish")}</button>{/if}
+      {#if (demo || review) && !message}<button id="confirm-publish" type="submit" class="primary" disabled={loading || busy || (demo ? !!error : !review?.files.length)}>{busy ? $t("connection.working") : !demo && review?.needsSync ? $t("connection.syncDraftsFirst") : $t("connection.confirmPublish")}</button>{/if}
     </div>
   </form>
 </dialog>

package/src/editor/lib/demo-backend.ts

@@ -0,0 +1,41 @@
+import type { Manifest } from "../../manifest/types";
+import type { Selection } from "../../manifest/navigation";
+import { validateBody, type ArticleBody } from "../../article-body";
+import { validateMenu } from "../../manifest/menu";
+import { validateCollectionValues } from "../../manifest/collections";
+import { isPlainObject, validateDocument, validateDocumentId } from "../../schema/validate";
+import { assertUniqueUrlSlugs, validateDocumentSlugs } from "../../slugs";
+import { resolveExtensions, validateExtensionBlocks } from "../../extensions";
+import extensions from "virtual:rigel-extensions";
+import { translate } from "../i18n";
+
+export function validateDemoSelection(manifest: Manifest, selection: Selection, values: Record<string, unknown>, body: ArticleBody | "", creating: boolean) {
+  if (manifest.backend !== "demo" || !isPlainObject(values)) throw new Error(translate("connection.invalidValues"));
+  if (selection.kind === "page") {
+    if (creating || !manifest.pages.some(page => page.slug === selection.slug)) throw new Error(translate("connection.unknownCopyPage"));
+    if (!Object.values(values).every(isPlainObject)) throw new Error(translate("connection.invalidCopyGroups"));
+  } else if (selection.kind === "post") {
+    const collection = manifest.collections?.find(collection => collection.name === selection.collection);
+    if (!collection) throw new Error(translate("connection.unknownCollection"));
+    const exists = collection.posts.some(post => post.slug === selection.slug);
+    if (exists === creating) throw new Error(translate("connection.invalidValues"));
+    validateBody(body, translate);
+    validateExtensionBlocks(body, resolveExtensions(extensions).blocks);
+    validateCollectionValues(collection.fields, values, manifest.documents ?? [], translate);
+    assertUniqueUrlSlugs([...collection.posts.filter(post => post.slug !== selection.slug).map(post => ({ slug: post.slug, values: post.frontmatter })), { slug: selection.slug, values }], translate);
+  } else if (selection.kind === "document") {
+    if (!manifest.schema) throw new Error(translate("connection.missingSchema"));
+    const document = validateDocumentId(manifest.schema, selection.id);
+    if (!document || document.type.name !== selection.type) throw new Error(translate("connection.unknownDocument"));
+    if (creating && (document.type.creatable === false || document.type.singleton)) throw new Error(translate("connection.creationDisabled"));
+    const documents = manifest.documents ?? [];
+    if (documents.some(doc => doc.id === selection.id) === creating) throw new Error(translate("connection.invalidValues"));
+    values._id = selection.id;
+    values._type = selection.type;
+    validateDocument(manifest.schema, selection.type, document.slug, values, documents, translate);
+    validateDocumentSlugs(manifest.schema, [...documents.filter(doc => doc.id !== selection.id), { id: selection.id, type: selection.type, slug: document.slug, data: values }], manifest.preview, translate);
+  } else if (selection.kind === "menu") {
+    if (creating || !manifest.menus?.entries.some(menu => menu.slug === selection.slug)) throw new Error(translate("connection.menusNotConfigured"));
+    validateMenu({ ...values, slug: selection.slug }, manifest.menus.maxDepth, translate);
+  } else throw new Error(translate("connection.selectContent"));
+}

package/src/editor/lib/images.ts

@@ -118,6 +118,7 @@ export async function searchImages(
 }
 
 export async function importStockImage(image: StockResult): Promise<string> {
+  if (config.backend === "demo") throw new Error(translate("shell.demoMediaReadOnly"));
   const url = new URL(image.url);
   const hosts = {
     picsum: ["picsum.photos"], unsplash: ["images.unsplash.com"],
@@ -139,6 +140,7 @@ export async function importStockImage(image: StockResult): Promise<string> {
 }
 
 export async function importImageUrl(value: string): Promise<string> {
+  if (config.backend === "demo") throw new Error(translate("shell.demoMediaReadOnly"));
   if (!safeImageUrl(value)) throw new Error(translate("media.unsafeImageUrl"));
   if (!value.startsWith("/") && new URL(value).protocol !== "https:") throw new Error(translate("media.remoteRequiresHttps"));
   if (!value.startsWith("/") && new URL(value).hostname === "images.unsplash.com") throw new Error(translate("media.unsplashHotlinkRequired"));
@@ -185,6 +187,7 @@ export function currentAuthor(): string {
 }
 
 export async function uploadMedia(file: File): Promise<string> {
+  if (config.backend === "demo") throw new Error(translate("shell.demoMediaReadOnly"));
   const metadata = mediaMetadata(file.name);
   const limit = config.maxFileSize ?? DEFAULT_MAX_FILE_SIZE;
   if (!safeMediaName(file.name) || !metadata || file.size > limit) throw new Error(translate("media.chooseSupportedFile", { limit: limit / 1024 / 1024 }));
@@ -196,6 +199,7 @@ export async function uploadMedia(file: File): Promise<string> {
 }
 
 export async function uploadImage(blob: Blob): Promise<string> {
+  if (config.backend === "demo") throw new Error(translate("shell.demoMediaReadOnly"));
   const limit = config.maxFileSize ?? DEFAULT_MAX_FILE_SIZE;
   if (blob.size > limit) throw new Error(translate("media.photoLimitExceeded", { limit: limit / 1024 / 1024 }));
   const saved = await fetch("/rigel/api/local/media", { method: "POST", headers: { "Accept-Language": get(locale) }, body: blob });

package/src/manifest/types.ts

@@ -39,7 +39,7 @@ export interface GitHubBackendConfig {
 export interface Manifest {
   contentLocales?: import("../config").ContentLocalesConfig;
   search?: { scope: import("../config").SearchScope };
-  backend?: "github";
+  backend?: "github" | "demo";
   github?: GitHubBackendConfig;
   sidebar?: import("./navigation").SidebarEntry[];
   preview?: import("../preview").PreviewConfig;

package/src/preview.ts

@@ -217,7 +217,22 @@ export function patchPreview(doc: Document, values: Record<string, unknown>, bod
     if (blocks) previews.set(el, mountExtensionPreviews(el));
     rendered.set(el, source);
   }
-  for (const [anchor, attr, tag] of [["image", "src", "IMG"], ["alt", "alt", "IMG"], ["href", "href", "A"]]) {
+  for (const el of doc.querySelectorAll<HTMLImageElement>("[data-rigel-image]")) {
+    if (el.tagName !== "IMG") continue;
+    const result = get(el, el.getAttribute("data-rigel-image")!);
+    if (!result.found) continue;
+    const value = result.value === null || result.value === undefined ? "" : String(result.value);
+    const safe = safePreviewUrl(value, true);
+    if (el.hasAttribute("data-rigel-src")) {
+      el.removeAttribute("srcset");
+      el.removeAttribute("sizes");
+      for (const source of el.closest("picture")?.querySelectorAll("source") ?? []) { source.removeAttribute("srcset"); source.removeAttribute("sizes"); }
+      if (safe) el.setAttribute("data-rigel-src", value);
+    }
+    if (safe) { if (el.getAttribute("src") !== value) el.setAttribute("src", value); }
+    else el.removeAttribute("src");
+  }
+  for (const [anchor, attr, tag] of [["alt", "alt", "IMG"], ["href", "href", "A"]]) {
     for (const el of doc.querySelectorAll(`[data-rigel-${anchor}]`)) {
       if (el.tagName !== tag) continue;
       const result = get(el, el.getAttribute(`data-rigel-${anchor}`)!);

package/src/routes/local-api.ts

@@ -3,12 +3,13 @@ import { requestTranslator } from "../editor/i18n/server";
 import { writeFile, readFile } from "node:fs/promises";
 import path from "node:path";
 import { applyValues } from "./serialize";
+import config from "virtual:rigel-config";
 
 export const prerender = false;
 
 export const POST: APIRoute = async ({ request }) => {
   const t = requestTranslator(request);
-  if (import.meta.env.PROD) {
+  if (import.meta.env.PROD || config.backend !== "local") {
     return new Response("Local backend is dev-only", { status: 404 });
   }
 

package/src/routes/local-media.ts

@@ -14,7 +14,7 @@ export const prerender = false;
 export const GET: APIRoute = async ({ params, request }) => {
   const t = requestTranslator(request);
   const filename = params.filename ?? "";
-  if (import.meta.env.PROD || !safeMediaName(filename) || filename.startsWith(".") || /[/\\\u0000]/.test(filename)) {
+  if (import.meta.env.PROD || config.backend !== "local" || !safeMediaName(filename) || filename.startsWith(".") || /[/\\\u0000]/.test(filename)) {
     return new Response(t("local.notFound"), { status: 404 });
   }
   try {
@@ -29,7 +29,7 @@ export const GET: APIRoute = async ({ params, request }) => {
 
 export const POST: APIRoute = async ({ request }) => {
   const t = requestTranslator(request);
-  if (import.meta.env.PROD) {
+  if (import.meta.env.PROD || config.backend !== "local") {
     return new Response("Local backend is dev-only", { status: 404 });
   }
   if (request.headers.get("Origin") !== new URL(request.url).origin) {
@@ -90,7 +90,7 @@ export const POST: APIRoute = async ({ request }) => {
 
   export const PUT: APIRoute = async ({ request }) => {
   const t = requestTranslator(request);
-    if (import.meta.env.PROD) {
+    if (import.meta.env.PROD || config.backend !== "local") {
       return new Response("Local backend is dev-only", { status: 404 });
     }
     if (request.headers.get("Origin") !== new URL(request.url).origin) {
@@ -120,7 +120,7 @@ export const POST: APIRoute = async ({ request }) => {
 
 export const DELETE: APIRoute = async ({ request }) => {
   const t = requestTranslator(request);
-  if (import.meta.env.PROD) return new Response("Local backend is dev-only", { status: 404 });
+  if (import.meta.env.PROD || config.backend !== "local") return new Response("Local backend is dev-only", { status: 404 });
   if (request.headers.get("Origin") !== new URL(request.url).origin) return new Response("Same-origin request required", { status: 403 });
   let body: unknown;
   try { body = await request.json(); } catch { return new Response("Invalid JSON body", { status: 400 }); }

package/src/routes/local-post.ts

@@ -37,7 +37,7 @@ export const POST: APIRoute = (context) => {
 
 const savePost: APIRoute = async ({ request, params }) => {
   const t = requestTranslator(request);
-  if (import.meta.env.PROD) {
+  if (import.meta.env.PROD || config.backend !== "local") {
     return new Response("Local backend is dev-only", { status: 404 });
   }
   const folder = collectionFolder(String(params.collection ?? ""));
@@ -86,7 +86,7 @@ const savePost: APIRoute = async ({ request, params }) => {
 
 export const DELETE: APIRoute = async ({ request, params }) => {
   const t = requestTranslator(request);
-  if (import.meta.env.PROD) {
+  if (import.meta.env.PROD || config.backend !== "local") {
     return new Response("Local backend is dev-only", { status: 404 });
   }
   const folder = collectionFolder(String(params.collection ?? ""));

package/src/vite/manifest-plugin.ts

@@ -219,7 +219,7 @@ ${collectionCode}
 ];
 for (const collection of collections) __rigelAssertUniqueUrlSlugs(collection.posts.map(post => ({ slug: post.slug, values: post.frontmatter })));
 ${menuCode}
-export default { pages, collections, documents, search: ${JSON.stringify(cfg.search)}${cfg.contentLocales ? ", contentLocales: " + JSON.stringify(cfg.contentLocales) : ""}${github ? ', backend: "github", github: ' + JSON.stringify(github) : ""}${cfg.menus ? ", menus" : ""}${cfg.schema ? ", schema: " + JSON.stringify(cfg.schema) : ""}${cfg.preview ? ", preview: " + JSON.stringify(cfg.preview) : ""}${cfg.sidebar ? ", sidebar: " + JSON.stringify(cfg.sidebar) : ""} };
+export default { pages, collections, documents, search: ${JSON.stringify(cfg.search)}${cfg.contentLocales ? ", contentLocales: " + JSON.stringify(cfg.contentLocales) : ""}${github ? ', backend: "github", github: ' + JSON.stringify(github) : cfg.backend === "demo" ? ', backend: "demo"' : ""}${cfg.menus ? ", menus" : ""}${cfg.schema ? ", schema: " + JSON.stringify(cfg.schema) : ""}${cfg.preview ? ", preview: " + JSON.stringify(cfg.preview) : ""}${cfg.sidebar ? ", sidebar: " + JSON.stringify(cfg.sidebar) : ""} };
 `;
     },
   };