@rigel-cms/rigel 1.2.2 → 1.4.0-rc.1

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

@@ -1,4 +1,7 @@
 {
+  "shell.coreCategory": "基础",
+  "shell.template": "模板",
+  "shell.chooseTemplate": "选择模板",
   "shell.search": "搜索",
   "shell.searchShortcut": "⌘/Ctrl + K",
   "shell.closeDialog": "关闭对话框",
@@ -94,6 +97,7 @@
   "shell.eraseData": "清除数据",
   "shell.eraseBrowserDataDescription": "这会清除此浏览器中的 Rigel 设置、API 密钥、GitHub 登录信息和未保存的草稿。已保存的仓库文件不会改变。编辑器将重新加载。",
   "shell.name": "名称",
+  "shell.path": "路径",
   "shell.slug": "路径标识",
   "shell.title": "标题",
   "shell.category": "分类",

package/src/editor/lib/ActionDialog.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
   import { t } from "../i18n";
   import Icon from "./Icon.svelte";
-  let { title, description, confirmLabel, fieldLabel, danger = false, onconfirm, onclose }: {
+  import Select from "./Select.svelte";
+  import { untrack } from "svelte";
+  import type { DocumentDef } from "../../schema/types";
+  let { title, description, confirmLabel, fieldLabel, danger = false, templates, templateCategory, onconfirm, onclose }: {
     title: string; description: string; confirmLabel: string; fieldLabel?: string; danger?: boolean;
-    onconfirm: (value: string) => void | Promise<void>; onclose: () => void;
+    templates?: DocumentDef[]; templateCategory?: string;
+    onconfirm: (value: string, type?: string) => void | Promise<void>; onclose: () => void;
   } = $props();
   let dialog: HTMLDialogElement;
   let cancel: HTMLButtonElement;
@@ -11,6 +15,11 @@
   let value = $state("");
   let busy = $state(false);
   let error = $state("");
+  let category = $state(untrack(() => templateCategory ?? ""));
+  let selectedTemplate = $state("");
+  const categories = $derived([...new Set((templates ?? []).map(type => type.category ?? ""))].sort());
+  const candidates = $derived((templates ?? []).filter(type => (type.category ?? "") === category));
+  const template = $derived(candidates.length === 1 ? candidates[0].name : selectedTemplate);
   $effect(() => {
     dialog.showModal();
     (fieldLabel ? input : cancel).focus();
@@ -20,7 +29,10 @@
     if (busy) return;
     busy = true;
     error = "";
-    try { await onconfirm(value.trim()); onclose(); }
+    try {
+      if (templates && !candidates.some(type => type.name === template)) throw new Error($t("shell.chooseTemplate"));
+      await onconfirm(value.trim(), template); onclose();
+    }
     catch (cause) { error = cause instanceof Error ? cause.message : $t("connection.actionFailed"); }
     finally { busy = false; }
   }
@@ -31,6 +43,14 @@
     <div class="action-head"><h2 id="action-title">{title}</h2><button type="button" class="icon-btn" aria-label={$t("connection.cancel")} disabled={busy} onclick={onclose}><Icon name="x" size={16} /></button></div>
     <p id="action-description">{description}</p>
     {#if fieldLabel}<label><span>{fieldLabel}</span><input type="text" bind:this={input} bind:value required disabled={busy} /></label>{/if}
+    {#if templates}
+      {#if categories.some(category => category !== "")}
+        <Select label={$t("shell.category")} value={category} options={categories.map(value => ({ value, label: value || $t("shell.coreCategory") }))} disabled={busy} onchange={(value) => { if (typeof value === "string") { category = value; selectedTemplate = ""; error = ""; } }} />
+      {/if}
+      {#if candidates.length > 1}
+        <Select label={$t("shell.template")} value={selectedTemplate} options={[{ value: "", label: $t("shell.chooseTemplate"), disabled: true }, ...candidates.map(type => ({ value: type.name, label: type.title }))]} disabled={busy} onchange={(value) => { if (typeof value === "string") selectedTemplate = value; }} />
+      {/if}
+    {/if}
     {#if error}<p class="error" role="alert">{error}</p>{/if}
     <div class="action-actions">
       <button type="button" bind:this={cancel} disabled={busy} onclick={onclose}>{$t("connection.cancel")}</button>

package/src/editor/lib/ImagePicker.svelte

@@ -5,7 +5,7 @@
   import ActionDialog from "./ActionDialog.svelte";
   import Select from "./Select.svelte";
   import { getSettings, setSettings } from "./settings";
-  import { DEFAULT_MAX_FILE_SIZE, MEDIA_CATEGORIES, mediaMetadata, mediaAccept, safeMediaName } from "../../media-types";
+  import { DEFAULT_MAX_FILE_SIZE, MEDIA_CATEGORIES, mediaMetadata, mediaAccept, safeMediaName, matchesMediaAccept, safeFileUrl } from "../../media-types";
   import config from "virtual:rigel-config";
   import { parseEmbedUrl, embedWatchUrl, type EmbedProvider } from "./embeds";
   import type { EmbedData } from "../blocks/embed";
@@ -13,12 +13,13 @@
   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, kind = "image", video, onvideo, embed, onembed, onpick, inline = false, toolbar = false, hiddenTrigger = false, onopen, onclose }: {
+  let { value = "", altText = "", triggerLabel, kind = "image", accept, 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";
+    kind?: "image" | "video" | "file";
+    accept?: string;
     value?: string; onpick?: (url: string, alt: string, credit?: StockResult) => void;
     altText?: string; triggerLabel?: string;
     inline?: boolean; toolbar?: boolean; hiddenTrigger?: boolean; onopen?: () => void; onclose?: () => void;
@@ -30,7 +31,7 @@
   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)[]);
+  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)[]);
   let videoTitle = $state("");
   let privacy = $state(true);
   let muted = $state(false);
@@ -73,6 +74,7 @@
   const months = $derived([...new Set(assets.map(a => modifiedMonth(a.modified)).filter(Boolean))].sort().reverse());
   function resetFilters() { filter = ""; format = ""; month = ""; }
   function selectAsset(asset: MediaAsset) {
+    if (kind === "file" && (!safeFileUrl(asset.url) || !matchesMediaAccept(asset.url, accept))) { error = $t("media.chooseAcceptedFile", { accept: accept ?? mediaAccept() }); return; }
     librarySelection = asset.url; selected = {url: asset.url, asset};
     metaName = asset.name; metaTitle = asset.title ?? ""; metaDescription = asset.description ?? ""; metaAlt = asset.alt ?? "";
     alt = value ? altText : asset.alt ?? "";
@@ -117,7 +119,7 @@
     const response = await fetch("/rigel/media.json", { cache: "no-store", headers: { "Accept-Language": $locale } });
     if (!response.ok) throw new Error($t("media.listingUnavailable"));
     const data = await response.json();
-    assets = (data.assets ?? data.images).filter((asset: MediaAsset) => inline || asset.type?.startsWith(kind === "video" ? "video/" : "image/"));
+    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;
     folder = data.folder;
   }
@@ -162,11 +164,13 @@
     if (!selected || picking) return;
     const request = ++requestId;
     const choice = selected;
+    if (kind === "file" && !matchesMediaAccept(choice.file?.name ?? choice.url, accept)) { error = $t("media.chooseAcceptedFile", { accept: accept ?? mediaAccept() }); return; }
     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($t("media.unsafeMediaUrl"));
+      if (kind === "file" && (!safeFileUrl(url) || !matchesMediaAccept(url, accept))) throw new Error($t("media.chooseAcceptedFile", { accept: accept ?? mediaAccept() }));
       if (metadata) {
         const saved = await fetch("/rigel/api/local/media", { method: "PUT", headers: { "Content-Type": "application/json", "Accept-Language": $locale }, body: JSON.stringify({ url, ...metadata }) });
         if (!saved.ok) throw new Error($t("media.uploadedMetadataFailed", { status: saved.status }));
@@ -179,15 +183,16 @@
         else onpick?.(url, alt, choice.stock);
         close();
       }
-    } catch (e) { if (request === requestId) error = e instanceof Error ? e.message : $t("media.photoImportFailed"); }
+    } catch (e) { if (request === requestId) error = e instanceof Error ? e.message : $t(kind === "file" ? "media.uploadFailedGeneric" : "media.photoImportFailed"); }
     finally { if (request === requestId) picking = false; }
   }
   function upload(file?: File) {
     if (!file || picking) return;
     error = "";
     const limit = maxFileSize;
-    if (!safeMediaName(file.name) || (!inline && mediaMetadata(file.name)?.category !== (kind === "video" ? "Video" : "Images")) || file.size > limit) {
-      error = $t(inline ? "media.chooseSupportedFile" : kind === "video" ? "media.chooseSupportedVideo" : "media.chooseSupportedImage", { limit: limit / 1024 / 1024 }); return;
+    if (kind === "file" && !matchesMediaAccept(file.name, accept)) { error = $t("media.chooseAcceptedFile", { accept: accept ?? mediaAccept() }); return; }
+    if (!safeMediaName(file.name) || (!inline && kind !== "file" && mediaMetadata(file.name)?.category !== (kind === "video" ? "Video" : "Images")) || file.size > limit) {
+      error = $t(inline || kind === "file" ? "media.chooseSupportedFile" : kind === "video" ? "media.chooseSupportedVideo" : "media.chooseSupportedImage", { limit: limit / 1024 / 1024 }); return;
     }
     const type = mediaMetadata(file.name)!.type;
     releaseFile(); objectURL = URL.createObjectURL(new Blob([file], { type: type === "text/plain" ? "text/plain; charset=utf-8" : type }));
@@ -225,9 +230,11 @@
   <button bind:this={trigger} data-image-trigger={kind === "image" ? "" : undefined} type="button" aria-label={triggerLabel ?? $t("media.insertImage")} data-tooltip={triggerLabel ?? $t("media.insertImage")} 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">{$t("media.noImage")}</div>{/if}
+    {#if kind === "file"}
+      {#if value && safeFileUrl(value)}<a href={value} download>{assetFile(value)}</a>{:else}<span>{$t("media.noFile")}</span>{/if}
+    {:else if value}<img src={value} alt="" class="preview" />{:else}<div class="preview empty">{$t("media.noImage")}</div>{/if}
     <button bind:this={trigger} type="button" class="outlined" onclick={launch}>{$t("media.choose")}</button>
-    {#if value && onpick}<button type="button" class="outlined" aria-label={$t("media.removeImage")} data-tooltip={$t("media.removeImage")} onclick={() => onpick?.("", "")}><Icon name="x" size={14} /></button>{/if}
+    {#if value && onpick}<button type="button" class="outlined icon-only" aria-label={$t(kind === "file" ? "media.removeFile" : "media.removeImage")} data-tooltip={$t(kind === "file" ? "media.removeFile" : "media.removeImage")} onclick={() => onpick?.("", "")}><Icon name="x" size={14} /></button>{/if}
   </div>
 {/if}
 
@@ -235,11 +242,11 @@
   <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")}>
-      <button type="button" class="outlined" data-tooltip={$t("media.gridView")} aria-label={$t("media.gridView")} aria-pressed={view === "grid"} onclick={() => setView("grid")}><Icon name="squaresFour" size={18} /></button>
-      <button type="button" class="outlined" data-tooltip={$t("media.listView")} aria-label={$t("media.listView")} aria-pressed={view === "list"} onclick={() => setView("list")}><Icon name="listBullets" size={18} /></button>
+      <button type="button" class="outlined icon-only" data-tooltip={$t("media.gridView")} aria-label={$t("media.gridView")} aria-pressed={view === "grid"} onclick={() => setView("grid")}><Icon name="squaresFour" size={18} /></button>
+      <button type="button" class="outlined icon-only" data-tooltip={$t("media.listView")} aria-label={$t("media.listView")} aria-pressed={view === "list"} onclick={() => setView("list")}><Icon name="listBullets" size={18} /></button>
     </div>
     <div class="media-select">
-      <Select ariaLabel={$t(inline ? "media.type" : kind === "video" ? "media.videoFormat" : "media.imageFormat")} value={format} onchange={next => { format = String(next); }} options={inline ? [{ value: "", label: $t("media.allItems") }, ...MEDIA_CATEGORIES.map(category => ({ value: category, label: $t(`media.category.${category}`) }))] : kind === "video" ? [{ value: "", label: $t("media.allVideos") }, { value: "video/mp4", label: "MP4" }, { value: "video/webm", label: "WebM" }, { value: "video/quicktime", label: "MOV" }] : [{ value: "", label: $t("media.allImages") }, ...["jpeg", "png", "webp", "gif", "avif"].map(format => ({ value: `image/${format}`, label: format === "jpeg" ? "JPEG" : format === "webp" ? "WebP" : format.toUpperCase() }))]} />
+      <Select ariaLabel={$t(inline || kind === "file" ? "media.type" : kind === "video" ? "media.videoFormat" : "media.imageFormat")} value={format} onchange={next => { format = String(next); }} options={inline || kind === "file" ? [{ value: "", label: $t("media.allItems") }, ...MEDIA_CATEGORIES.map(category => ({ value: category, label: $t(`media.category.${category}`) }))] : kind === "video" ? [{ value: "", label: $t("media.allVideos") }, { value: "video/mp4", label: "MP4" }, { value: "video/webm", label: "WebM" }, { value: "video/quicktime", label: "MOV" }] : [{ value: "", label: $t("media.allImages") }, ...["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={$t("media.modifiedMonth")} data-tooltip={$t("media.modifiedMonthHint")} value={month} onchange={next => { month = String(next); }} options={[{ value: "", label: $t("media.allModifiedDates") }, ...months.map(date => ({ value: date, label: new Date(date + "-01T00:00:00Z").toLocaleDateString($locale, { month: "long", year: "numeric", timeZone: "UTC" }) }))]} />
@@ -261,9 +268,9 @@
 {/snippet}
 
 {#if open}
-  <dialog bind:this={dialog} class="rigel-modal-backdrop rigel image-dialog" class:media-insert={providerTab} aria-label={$t(providerTab ? editing ? "media.editVideo" : "media.addVideoLink" : inline ? "media.uploadMedia" : kind === "video" ? "media.chooseVideo" : "media.chooseImage")} 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={$t(providerTab ? editing ? "media.editVideo" : "media.addVideoLink" : inline ? "media.uploadMedia" : kind === "file" ? "media.chooseFile" : kind === "video" ? "media.chooseVideo" : "media.chooseImage")} 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>{providerTab ? $t(editing ? "media.editProviderVideo" : "media.addProviderVideo", { provider: tab === "youtube" ? "YouTube" : "Vimeo" }) : $t(selected ? "media.previewMedia" : inline ? "media.uploadMedia" : kind === "video" ? "media.chooseVideo" : "media.chooseImage")}</h2><button bind:this={cancel} type="button" class="close" aria-label={$t("media.close")} disabled={picking} onclick={close}><Icon name="x" size={14} weight="bold" /></button></div>
+      <div class="media-head"><h2>{providerTab ? $t(editing ? "media.editProviderVideo" : "media.addProviderVideo", { provider: tab === "youtube" ? "YouTube" : "Vimeo" }) : $t(selected ? "media.previewMedia" : inline ? "media.uploadMedia" : kind === "file" ? "media.chooseFile" : kind === "video" ? "media.chooseVideo" : "media.chooseImage")}</h2><button bind:this={cancel} type="button" class="close" aria-label={$t("media.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) || metadataImport}>
           <div class="media-preview">
@@ -292,7 +299,7 @@
             <label><span>{$t(kind === "video" ? "media.videoUrl" : "media.imageUrl")}</span><input type="text" readonly value={selected.url} /></label>
           {/if}
           {#if imageImport && !selected.file}<label><span>{$t("media.imageUrl")}</span><input type="text" readonly value={selected.url} /></label>{/if}
-          {#if !inline && !imageImport}<label><span>{$t(kind === "video" ? "media.captionOptional" : "media.descriptiveAlt")}</span><input aria-label={kind === "video" ? $t("media.videoCaption") : undefined} type="text" bind:value={alt} /></label>{/if}
+          {#if !inline && kind !== "file" && !imageImport}<label><span>{$t(kind === "video" ? "media.captionOptional" : "media.descriptiveAlt")}</span><input aria-label={kind === "video" ? $t("media.videoCaption") : undefined} type="text" bind:value={alt} /></label>{/if}
           {#if kind === "video"}
             <label class="inline"><input type="checkbox" role="switch" class="switch" aria-label={$t("media.muted")} bind:checked={muted} /><span>{$t("media.muted")}</span></label>
             <label class="inline"><input type="checkbox" role="switch" class="switch" aria-label={$t("media.showControls")} bind:checked={controls} /><span>{$t("media.showControls")}</span></label>
@@ -313,12 +320,12 @@
             <button type="button" class="primary" disabled={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 === "video" ? "media.uploadingVideo" : "media.importingPhoto" : kind === "video" ? "media.useVideo" : !inline ? "media.insertImage" : selected.file && mediaMetadata(selected.file.name)?.category !== "Images" ? "media.uploadFile" : "media.importImage")}</button>{/if}
+            {#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}
           {/if}</div>
           </div>
         </div>
       {:else}
-        <div class="tabs" aria-label={$t(kind === "video" ? "media.videoSources" : "media.imageSources")}>
+        <div class="tabs" aria-label={$t(kind === "file" ? "media.fileSources" : kind === "video" ? "media.videoSources" : "media.imageSources")}>
           {#each tabs.filter(source => !inline || (source !== "library" && source !== "unsplash")) as source}<button type="button" data-source={source} class:active={tab === source} aria-pressed={tab === source} disabled={picking} onclick={() => changeTab(source)}>{source === "youtube" ? "YouTube" : source === "vimeo" ? "Vimeo" : source === "library" || source === "upload" || source === "url" ? $t(`media.source.${source}`) : source}</button>{/each}
         </div>
         {#if inline}<p class="hint">{$t("media.unsplashUploadsHint")}</p>{/if}
@@ -335,7 +342,8 @@
           {@render libraryBrowser()}
         {:else if tab === "upload"}
           <p class="hint">{$t("media.localFileHint")}</p>
-          {#if writable}<label><span>{$t(kind === "video" ? "media.uploadVideoLimit" : inline ? "media.uploadMediaLimit" : "media.uploadImageLimit", { limit: maxFileSize / 1024 / 1024 })}</span><input type="file" accept={kind === "video" ? ".mp4,.webm,.mov" : mediaAccept(!inline)} onchange={e => upload(e.currentTarget.files?.[0])} /></label>{:else}<p role="status">{$t("media.readOnlyUploads")}</p>{/if}
+          {#if kind === "file" && accept}<p class="hint">{$t("media.chooseAcceptedFile", { accept })}</p>{/if}
+          {#if writable}<label><span>{$t(kind === "video" ? "media.uploadVideoLimit" : inline || kind === "file" ? "media.uploadMediaLimit" : "media.uploadImageLimit", { limit: maxFileSize / 1024 / 1024 })}</span><input type="file" accept={kind === "file" ? accept ?? mediaAccept() : kind === "video" ? ".mp4,.webm,.mov" : mediaAccept(!inline)} onchange={e => upload(e.currentTarget.files?.[0])} /></label>{:else}<p role="status">{$t("media.readOnlyUploads")}</p>{/if}
         {:else if tab === "url"}
           <label><span>{$t(kind === "video" ? "media.videoUrl" : "media.imageUrl")}</span><input type="url" bind:value={urlInput} placeholder={$t(kind === "video" ? "media.videoUrlPlaceholder" : "media.imageUrlPlaceholder")} /></label>
           <button type="button" class="primary" onclick={run}>{$t("media.useUrl")}</button>

package/src/editor/lib/MarkdownEditor.svelte

@@ -14,7 +14,7 @@
   import type { SelectionBookmark } from "prosemirror-state";
   import { parseVisualMarkdown, serializeMarkdown, safeMarkdownUrl, schema } from "./rich-markdown";
 
-  let { value, label, oninput }: { value: string; label: string; oninput: (value: string) => void } = $props();
+  let { value, label, oninput, editableRoot }: { value: string; label: string; oninput: (value: string) => void; editableRoot?: HTMLElement } = $props();
   const id = $props.id();
   let host: HTMLDivElement;
   let mode = $state<"visual" | "source">("visual");
@@ -66,9 +66,10 @@
   }
 
   $effect(() => {
-    if (!host) return;
+    if (!editableRoot && !host) return;
     if (!view) {
-      view = new EditorView(host, {
+      if (editableRoot) editableRoot.classList.add("rigel-markdown-content");
+      view = new EditorView(editableRoot ? { mount: editableRoot } : host, {
         state: EditorState.create({ schema }),
         attributes: { role: "textbox", "aria-label": label, "aria-multiline": "true" },
         dispatchTransaction(transaction) {
@@ -92,6 +93,7 @@
       load(value);
     }
   });
+  $effect(() => { const editable = mode === "visual"; view?.setProps({ editable: () => editable }); });
   onDestroy(() => view?.destroy());
 
   function activeMark(type: string) {
@@ -162,7 +164,7 @@
 
 <svelte:window onpointerdown={event => { if (linkOpen && !document.getElementById(`${id}-link`)?.contains(event.target as Node) && !linkButton?.contains(event.target as Node)) linkOpen = false; }} />
 
-<div class="markdown-editor body-editor">
+<div class="markdown-editor body-editor" class:markdown-inline={!!editableRoot}>
   <div class="markdown-heading">
     <div class="field-label" id={`${id}-label`}>{label}</div>
     <div class="markdown-modes" role="group" aria-label={$t("richtext.editingMode", { label })}>
@@ -199,7 +201,7 @@
         {#if linkError}<p id={`${id}-error`} role="alert">{linkError}</p>{/if}
       </div>
     {/if}
-    <div class="md-preview rich-text" bind:this={host}></div>
+    {#if !editableRoot}<div class="md-preview rich-text" bind:this={host}></div>{/if}
   </div>
   {#if mode === "source"}
     <textarea class="mono" rows="14" aria-label={$t("richtext.markdownSource", { label })} value={value} oninput={(event) => { warning = ""; emit(event.currentTarget.value); }}></textarea>

package/src/editor/lib/SchemaField.svelte

@@ -86,10 +86,10 @@
   </label>
 {:else if field.type === "markdown"}
   <MarkdownEditor label={fieldLabel} value={typeof value === "string" ? value : ""} oninput={(next) => onvalue(next)} />
-{:else if field.type === "image"}
+{:else if field.type === "image" || field.type === "file"}
   <div class="schema-field">
     <span class="schema-label">{label}</span>
-    <ImagePicker value={typeof value === "string" ? value : ""} onpick={(url) => onvalue(url)} />
+    <ImagePicker kind={field.type} accept={field.accept} value={typeof value === "string" ? value : ""} onpick={(url) => onvalue(url)} />
   </div>
 {:else if field.type === "boolean"}
   <label class="inline">

package/src/editor/lib/SchemaPanel.svelte

@@ -5,7 +5,7 @@
   import PropertiesTabs from "./PropertiesTabs.svelte";
   import SeoGuidance from "./SeoGuidance.svelte";
   import Select from "./Select.svelte";
-  import { tick } from "svelte";
+  import { onDestroy, tick } from "svelte";
   import {
     blankItem,
     duplicateItem,
@@ -89,8 +89,79 @@
   function removeSection(index: number) {
     setSections(sections.filter((_, position) => position !== index));
   }
+
+  let dragging = $state<string | null>(null);
+  let target = $state<number | null>(null);
+  let message = $state("");
+  let pointer: { key: string; docId: string; pointerId: number; x: number; y: number; handle: HTMLButtonElement } | null = null;
+
+  function cancelDrag() {
+    const active = pointer;
+    pointer = null;
+    dragging = null;
+    target = null;
+    if (active?.handle.hasPointerCapture(active.pointerId)) active.handle.releasePointerCapture(active.pointerId);
+  }
+  onDestroy(cancelDrag);
+
+  function startDrag(event: PointerEvent, key: string) {
+    if (event.button !== 0 || !event.isPrimary || pointer) return;
+    const handle = event.currentTarget as HTMLButtonElement;
+    pointer = { key, docId, pointerId: event.pointerId, x: event.clientX, y: event.clientY, handle };
+    handle.setPointerCapture(event.pointerId);
+  }
+
+  function dropAt(x: number, y: number) {
+    const list = document.elementFromPoint(x, y)?.closest('.structure-list');
+    const source = pointer?.handle.closest('li');
+    if (!list || source?.parentElement !== list || pointer?.docId !== docId) return null;
+    const rows = [...list.children];
+    const before = rows.findIndex(row => { const rect = row.getBoundingClientRect(); return y < rect.top + rect.height / 2; });
+    const insertion = before < 0 ? rows.length : before;
+    const from = sections.findIndex(section => section._key === pointer?.key);
+    return from < 0 || insertion === from || insertion === from + 1 ? null : insertion;
+  }
+
+  function dragPointer(event: PointerEvent) {
+    if (!pointer || event.pointerId !== pointer.pointerId) return;
+    if (!dragging && Math.hypot(event.clientX - pointer.x, event.clientY - pointer.y) < 5) return;
+    dragging = pointer.key;
+    target = dropAt(event.clientX, event.clientY);
+  }
+
+  function finishDrag(event: PointerEvent) {
+    if (!pointer || event.pointerId !== pointer.pointerId) return;
+    const captured = pointer.handle.hasPointerCapture(event.pointerId);
+    const from = captured ? sections.findIndex(section => section._key === dragging) : -1;
+    const insertion = dropAt(event.clientX, event.clientY);
+    cancelDrag();
+    if (from < 0 || insertion === null) return;
+    const next = [...sections];
+    const [section] = next.splice(from, 1);
+    const index = insertion > from ? insertion - 1 : insertion;
+    next.splice(index, 0, section);
+    setSections(next);
+    message = $t("fields.sectionMoved", { label: sectionLabel(schema, section._type), position: index + 1, count: next.length });
+  }
+
+  async function moveWithKeyboard(event: KeyboardEvent, index: number) {
+    if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+    event.preventDefault();
+    if (pointer) return;
+    const delta = event.key === "ArrowUp" ? -1 : 1;
+    const position = index + delta;
+    if (position < 0 || position >= sections.length) return;
+    const handle = event.currentTarget as HTMLButtonElement;
+    const label = sectionLabel(schema, sections[index]._type);
+    setSections(moveItem(sections, index, delta) as Record<string, unknown>[]);
+    message = $t("fields.sectionMoved", { label, position: position + 1, count: sections.length });
+    await tick();
+    handle.focus({ preventScroll: true });
+  }
 </script>
 
+<svelte:window onpointermove={dragPointer} onpointerup={finishDrag} onpointercancel={cancelDrag} onkeydown={event => { if (event.key === 'Escape' && pointer) { event.preventDefault(); cancelDrag(); message = $t('fields.menuMoveCancelled'); } }} />
+
 <div class="schema-panel" bind:this={host}>
   {#if docType.shared}
     <p class="shared-badge"><Icon name="info" size={12} /> {$t(docType.demo ? "fields.demoContentNotice" : "fields.sharedContentNotice")}</p>
@@ -115,16 +186,17 @@
   {#if sections.length || values.sections !== undefined}
     <section>
       <h3>{$t("fields.structure")}</h3>
+      <p id="section-reorder-hint" class="reorder-status">{$t("fields.sectionReorderHint")}</p>
+      <p class="reorder-status" role="status" aria-live="polite">{message}</p>
       <ul class="structure-list">
         {#each sections as section, index (section._key)}
-          <li class:active={selected?.sectionKey === section._key}>
+          <li class:active={selected?.sectionKey === section._key} class:is-dragging={dragging === section._key} class:drop-before={target === index} class:drop-after={target === sections.length && index === sections.length - 1} data-section-key={section._key}>
+            <button type="button" class="outlined icon-only section-drag" aria-label={$t("fields.reorderSection", { label: sectionLabel(schema, section._type) })} aria-describedby="section-reorder-hint" onpointerdown={event => startDrag(event, String(section._key))} onlostpointercapture={cancelDrag} onkeydown={event => moveWithKeyboard(event, index)}><Icon name="dotsSixVertical" /></button>
             <button type="button" class="structure-row" onclick={() => onselect({ docId, path: "", sectionKey: String(section._key) })}>
               <span>{sectionLabel(schema, section._type, $t("fields.section"))}</span>
               {#if devMode}<span class="schema-key">{section._key}</span>{/if}
             </button>
             <div class="structure-actions">
-              <button type="button" aria-label={$t("fields.moveSectionUp", { label: sectionLabel(schema, section._type) })} data-tooltip={$t("fields.moveUp")} disabled={index === 0} onclick={() => setSections(moveItem(sections, index, -1) as Record<string, unknown>[])}>↑</button>
-              <button type="button" aria-label={$t("fields.moveSectionDown", { label: sectionLabel(schema, section._type) })} data-tooltip={$t("fields.moveDown")} disabled={index === sections.length - 1} onclick={() => setSections(moveItem(sections, index, 1) as Record<string, unknown>[])}>↓</button>
               <button type="button" aria-label={$t("fields.duplicateSection", { label: sectionLabel(schema, section._type) })} data-tooltip={$t("fields.duplicate")} onclick={() => setSections(duplicateItem(sections, index) as Record<string, unknown>[])}>⧉</button>
               <button type="button" aria-label={$t("fields.removeSection", { label: sectionLabel(schema, section._type) })} data-tooltip={$t("fields.remove")} onclick={() => removeSection(index)}>×</button>
             </div>

package/src/editor/lib/VisualEditor.svelte

@@ -2,6 +2,7 @@
   import { t } from "../i18n";
   import { mount, unmount, onDestroy, tick, type Snippet } from "svelte";
   import BlockEditor from "./BlockEditor.svelte";
+  import MarkdownEditor from "./MarkdownEditor.svelte";
   import { tooltipRoot } from "./tooltip";
   import editorStyles from "../styles.css?inline";
   import type { ArticleBody } from "../../article-body";
@@ -51,7 +52,7 @@
   let bodyScope: HTMLElement | null = null;
   let removeTooltips: (() => void) | undefined;
   let mode = $state<"browse" | "edit">("edit");
-  let panelOpen = $state(true);
+  let panelOpen = $state(false);
   let editorWidth = $state(0);
   let requestedWidth = $state(340);
   let resizing = $state(false);
@@ -248,11 +249,42 @@
     }
     if (editVideo) mounted.editVideoAt(blockIndex);
   }
+  function startMarkdownEdit(element: HTMLElement) {
+    const field = fieldPathFrom(element);
+    if (!field || field.doc !== docId || !schema || !docType) return false;
+    const def = fieldForPath(schema, docType, values, field.path);
+    if (def?.type !== "markdown") return false;
+    stopBodyEdit();
+    const doc = element.ownerDocument;
+    let editorStyle = doc.querySelector<HTMLStyleElement>('style[data-rigel-editor-styles]');
+    if (!editorStyle) { editorStyle = doc.createElement("style"); editorStyle.dataset.rigelEditorStyles = ""; doc.head.append(editorStyle); }
+    if (editorStyle.textContent !== editorStyles) editorStyle.textContent = editorStyles;
+    clearHover(); clearHighlight();
+    editingBody = element; bodyContents = [...element.childNodes];
+    const scope = doc.createElement("div");
+    bodyAttributes = ["class", "style", "role", "aria-label", "aria-multiline", "contenteditable", "tabindex", "translate"].map(name => [name, element.getAttribute(name)]);
+    const syncTheme = () => { scope.dataset.theme = document.documentElement.dataset.theme; scope.dataset.contrast = document.documentElement.dataset.contrast; };
+    syncTheme();
+    const host = doc.createElement("div"); host.className = "rigel rigel-inline";
+    scope.append(host); doc.body.append(scope); bodyScope = scope;
+    removeTooltips = tooltipRoot(host).destroy;
+    bodyEditor = mount(MarkdownEditor, { target: host, props: {
+      editableRoot: element,
+      label: def.labelKey ? $t(def.labelKey) : def.label,
+      get value() { return String(anchorValue(values, field.path).value ?? ""); },
+      oninput: (next: string) => onchange(replaceAt(values, field.path, next)),
+    } });
+    bodyThemeObserver = new MutationObserver(syncTheme);
+    bodyThemeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "data-contrast"] });
+    void tick().then(() => (element.isContentEditable ? element : host.querySelector<HTMLTextAreaElement>("textarea"))?.focus());
+    return true;
+  }
+
   function focusBody() {
     const target = docElement()?.querySelector<HTMLElement>('[data-rigel-richtext="$body"]');
     if (inlineBodyEnabled && target) { target.scrollIntoView({ block: "center" }); void startBodyEdit(target); }
   }
-  $effect(() => { if (!inlineBodyEnabled || mode !== "edit") stopBodyEdit(); });
+  $effect(() => { if ((!schema && !inlineBodyEnabled) || mode !== "edit") stopBodyEdit(); });
   onDestroy(stopBodyEdit);
 
   function onClick(event: MouseEvent) {
@@ -264,6 +296,9 @@
     if (!target) return;
     const articleBody = target.closest<HTMLElement>('[data-rigel-richtext="$body"]');
     if (inlineBodyEnabled && articleBody) { void startBodyEdit(articleBody, event); return; }
+    const markdown = target.closest<HTMLElement>("[data-rigel-richtext]");
+    if (markdown && startMarkdownEdit(markdown)) return;
+    stopBodyEdit();
     const element = target.closest<HTMLElement>("[data-rigel-tags],[data-rigel-text],[data-rigel-richtext],[data-rigel-image],[data-rigel-alt],[data-rigel-href],[data-rigel-section]");
     if (element) selectFromElement(element);
   }
@@ -360,7 +395,7 @@
 
   function setMode(next: "browse" | "edit") {
     mode = next;
-    panelOpen = next === "edit";
+    panelOpen = false;
     if (next === "browse") {
       clearHighlight();
       clearHover();

package/src/editor/lib/icons.ts

@@ -78,6 +78,10 @@ export const ICONS = {
     viewBox: "0 0 256 256",
     d: "M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144Zm0-64A32,32,0,1,0,96,48,32,32,0,0,0,128,80Zm0-48a16,16,0,1,1-16,16A16,16,0,0,1,128,32Zm0,144a32,32,0,1,0,32,32A32,32,0,0,0,128,176Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,224Z",
   },
+  dotsSixVertical: {
+    viewBox: "0 0 256 256",
+    d: "M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z",
+  },
   keyboard: {
     viewBox: "0 0 256 256",
     d: "M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192Zm-16-64a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,128Zm0-32a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,96ZM72,160a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16h8A8,8,0,0,1,72,160Zm96,0a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,160Zm40,0a8,8,0,0,1-8,8h-8a8,8,0,0,1,0-16h8A8,8,0,0,1,208,160Z",

package/src/editor/styles.css

@@ -849,7 +849,8 @@
 .rigel .media-head h2 { margin: 0; font-size: 1rem; }
 .rigel .media-tools { align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--border-control); background: var(--panel); }
 .rigel .media-views { display: flex; flex-shrink: 0; margin-inline-end: 1rem; }
-.rigel .media-views button { display: inline-flex; align-items: center; justify-content: center; padding-inline: 0.5rem; }
+.rigel button.outlined.icon-only, .rigel :is(.structure-actions, .schema-item-actions) button { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; flex-shrink: 0; }
+@media (pointer: coarse) { .rigel button.outlined.icon-only, .rigel :is(.structure-actions, .schema-item-actions) button { width: 44px; height: 44px; } }
 .rigel .media-views button + button { border-left: 0; }
 .rigel .media-views button[aria-pressed=true] { background: var(--accent-soft); color: var(--on-accent-soft); }
 .rigel .media-tools .media-select { position: relative; max-width: 100%; min-width: 0; }
@@ -1182,6 +1183,9 @@
 .rigel.rigel-inline .markdown-link, .rigel .block-editor .markdown-link { position: fixed; inset: auto; width: 340px; max-width: calc(100vw - 16px); z-index: 121; }
 .rigel.rigel-inline .block-markdown-view { position: fixed; inset: 12px; max-height: calc(100vh - 24px); overflow: auto; padding: 0.5rem; border: 1px solid var(--border-control); background: var(--panel); }
 .rigel-article-content:focus { outline: 0; }
+.rigel.rigel-inline .markdown-inline { position: fixed; top: 8px; left: 8px; width: max-content; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; background: var(--panel); border: 1px solid var(--border-control); box-shadow: var(--shadow-lg); pointer-events: auto; }
+.rigel .markdown-editor [hidden] { display: none !important; }
+.rigel-markdown-content { white-space: pre-wrap; overflow-wrap: anywhere; }
 :is(.rigel .block-content, .rigel-article-content)::highlight(rigel-link-selection), :is(.rigel .block-content, .rigel-article-content) ::highlight(rigel-link-selection) { background-color: Highlight; color: HighlightText; }
 .rigel-article-content:focus-visible > [data-rigel-active-block] { outline: 3px solid Highlight; outline-offset: 3px; }
 .rigel-article-content .block-bold { font-weight: 700; }
@@ -1305,11 +1309,19 @@
 .rigel .panel-note { margin: 0 0 0.75rem; font-size: 0.75rem; color: var(--text-3); }
 .rigel .shared-badge { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.75rem; padding: 0.5rem; border: 1px solid var(--accent); color: var(--text-2); font-size: 0.75rem; }
 .rigel .structure-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
-.rigel .structure-list li { display: flex; align-items: stretch; border: 1px solid var(--border); }
+.rigel .structure-list li { position: relative; display: flex; align-items: stretch; border: 1px solid var(--border); }
+.rigel .structure-list .section-drag { cursor: grab; touch-action: none; user-select: none; align-self: center; border: 0; background: transparent; }
+.rigel .structure-list .section-drag:active { cursor: grabbing; }
+.rigel .structure-list li.is-dragging { border-style: dashed; }
+.rigel .structure-list li.drop-before::before, .rigel .structure-list li.drop-after::after { content: ""; position: absolute; left: -1px; right: -1px; height: 3px; background: var(--accent); pointer-events: none; }
+.rigel .structure-list li.drop-before::before { top: -5px; }
+.rigel .structure-list li.drop-after::after { bottom: -5px; }
+.rigel .reorder-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .rigel .structure-list li.active { border-color: var(--accent); }
 .rigel .structure-row { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; border: 0; border-radius: 0; background: transparent; color: var(--text); padding: 0.5rem; text-align: left; cursor: pointer; font-size: 0.8125rem; }
+.rigel .structure-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .rigel .structure-actions, .rigel .schema-item-actions { display: flex; align-items: center; }
-.rigel .structure-actions button, .rigel .schema-item-actions button { border: 0; border-left: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text-2); min-width: 26px; height: 100%; padding: 0 0.25rem; cursor: pointer; }
+.rigel .structure-actions button, .rigel .schema-item-actions button { border: 0; border-left: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text-2); cursor: pointer; }
 .rigel .structure-actions button:disabled, .rigel .schema-item-actions button:disabled { opacity: 0.35; cursor: default; }
 .rigel .add-section { display: flex; gap: 0.5rem; }
 .rigel .add-section select { flex: 1; min-width: 0; }

package/src/manifest/content-locales.ts

@@ -35,7 +35,7 @@ export function selectionInContent(manifest: Manifest, selection: Selection | nu
   if (!selection) return true;
   switch (selection.kind) {
     case "page": return manifest.pages.some(page => page.slug === selection.slug);
-    case "pages": return !selection.category || manifest.pages.some(page => !page.shared && page.category === selection.category);
+    case "pages": return !selection.category || manifest.pages.some(page => !page.shared && page.category === selection.category) || !!manifest.schema?.documents.some(type => !type.shared && type.category === selection.category);
     case "document":
     case "documents": return !!manifest.schema?.documents.some(type => type.name === selection.type);
     case "post": return !!manifest.collections?.some(collection => collection.name === selection.collection);

package/src/manifest/navigation.ts

@@ -1,4 +1,5 @@
 import type { Manifest } from "./types";
+import { pageCategories } from "./pages";
 import { systemMessage, type Translator } from "../editor/i18n/format";
 
 export type Selection =
@@ -31,8 +32,7 @@ export function navigationKey(target: Selection): string {
 export function buildSidebar(manifest: Manifest, message: Translator = systemMessage): SidebarNode[] {
   const link = (target: SidebarTarget, label: string): SidebarLink => ({ kind: "link", target, label });
   const types = manifest.schema?.documents ?? [];
-  const pages = manifest.pages.filter(page => !page.shared);
-  const categories = [...new Set(pages.map(page => page.category).filter((category): category is string => !!category))].sort();
+  const categories = pageCategories(manifest);
   const defaults: SidebarNode[] = [
     { kind: "heading", label: message("system.sidebar.website") },
     link({ kind: "pages" }, message("system.sidebar.pages")),
@@ -72,7 +72,8 @@ export function buildSidebar(manifest: Manifest, message: Translator = systemMes
     used.add(key);
     nodes.push({ ...item, label: entry.label ?? item.label, ...(entry.icon ? { icon: entry.icon } : {}) });
   }
-  const remaining = defaults.filter((node): node is SidebarLink => node.kind === "link" && !used.has(navigationKey(node.target)));
+  const allPages = used.has(navigationKey({ kind: "pages" }));
+  const remaining = defaults.filter((node): node is SidebarLink => node.kind === "link" && !used.has(navigationKey(node.target)) && !(allPages && node.target.kind === "pages" && node.target.category));
   if (remaining.length) nodes.push({ kind: "heading", label: message("system.sidebar.more") }, ...remaining);
   return nodes;
 }

package/src/manifest/pages.ts

@@ -0,0 +1,17 @@
+import type { Manifest } from "./types";
+
+export function pageCategories(manifest: Manifest): string[] {
+  return [...new Set([...manifest.pages, ...(manifest.schema?.documents ?? [])].filter(entry => !entry.shared).map(entry => entry.category).filter((category): category is string => !!category))].sort();
+}
+
+export function pageTemplates(manifest: Manifest) {
+  return (manifest.schema?.documents ?? []).filter(type => !type.shared && !type.singleton && type.creatable !== false);
+}
+
+export function defaultPageCategory(manifest: Manifest): "" | null {
+  return [...manifest.pages, ...(manifest.schema?.documents ?? [])].some(entry => !entry.shared && entry.category === undefined) ? "" : null;
+}
+
+export function inPageCategory(category: string | undefined, filter: string | null): boolean {
+  return filter === null || (category ?? "") === filter;
+}