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

package/docs/content-locales.md

@@ -51,3 +51,11 @@ Content without a `locale` remains visible in every language. Use this for commo
 Without `contentLocales`, the editor keeps its existing navigation and shows no content-language dropdown. A single configured locale also needs no dropdown.
 
 Your Astro routes and templates still own website localization, including public language links, HTML `lang`, translated navigation and fallback behavior. Rigel does not translate text, pair translated entries or generate localized routes. Keep each type's URL mapping consistent with the website routes, and prepare its preview bindings as usual.
+
+## Page categories and templates
+
+Set `category` on a nonshared document definition to group its pages, for example `category: "Articles"`. This is schema metadata, not an editable field in stored documents. Uncategorised native documents and legacy copy pages remain in **Core** without a migration. When categories exist, the Pages table offers Core, All pages and each category visible in the selected content language. Core is the initial filter when uncategorised pages or types exist; category-only sites initially show All pages. Back returns to the originating table/filter, not a filter inferred from the opened page.
+
+Add new asks for a page name and a category from the locale-eligible, creatable document types. When a category contains multiple types, the editor also requires a Template choice using each definition's title. Shared, singleton and `creatable: false` types are not creation choices. A single uncategorised type keeps the name-only dialog. Creation uses the selected type's identity, initial values and section template; nothing is written until Save.
+
+A visual variant can be another document definition with its own category, defaults and template—for example a Resources category with a dark-theme initial value. Its native type, folder, preview mapping and host renderer must be configured normally. A category does not change the editor theme, rewrite existing document types or generate website routes.

package/package.json

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

package/src/editor/App.svelte

@@ -15,6 +15,7 @@
   import TopBar from "./lib/TopBar.svelte";
   import Select from "./lib/Select.svelte";
   import { contentForLocale, selectionInContent } from "../manifest/content-locales";
+  import { pageCategories, pageTemplates, inPageCategory, defaultPageCategory } from "../manifest/pages";
   import { validateDocumentSlugs } from "../slugs";
   import Shortcuts from "./lib/Shortcuts.svelte";
   import CollectionPanel from "./lib/CollectionPanel.svelte";
@@ -38,7 +39,7 @@
   import VisualEditor from "./lib/VisualEditor.svelte";
   import { newDocumentFromTemplate } from "../schema/paths";
   import { previewUrl, previewPath } from "../preview";
-  import type { ContentDocument, Schema } from "../schema/types";
+  import type { ContentDocument, DocumentDef, Schema } from "../schema/types";
   import { buildSidebar, navigationKey, type Selection } from "../manifest/navigation";
   import { startGitHubLogin, checkGitHubAccess, type GitHubAccess } from "./lib/github-auth";
   import { loadManifestRemote, saveRemoteSelection, deleteRemotePost, reviewRemotePublish, confirmRemotePublish, PublishReviewChangedError, type GitContext, type PublishReview } from "./lib/github-backend";
@@ -142,7 +143,7 @@
   }
   let pendingNavigation = $state<(() => void) | null>(null);
   let pendingNavigationCancel: (() => void) | null = null;
-  let actionDialog = $state<{ title: string; description: string; confirmLabel: string; fieldLabel?: string; danger?: boolean; onconfirm: (value: string) => void | Promise<void> } | null>(null);
+  let actionDialog = $state<{ title: string; description: string; confirmLabel: string; fieldLabel?: string; danger?: boolean; templates?: DocumentDef[]; templateCategory?: string; onconfirm: (value: string, type?: string) => void | Promise<void> } | null>(null);
   let newEntry = $state<{ collection: string; post: CollectionPost } | null>(null);
   let newDocument = $state<{ type: string; id: string; slug: string } | null>(null);
   let docBase = $state<Record<string, unknown> | null>(null);
@@ -159,6 +160,7 @@
       if (!Array.isArray(data.pages) || (data.backend === "github" && !data.github)) throw new Error($t("shell.configurationIncomplete"));
       blueprint = data;
       manifest = data;
+      pagesFilter = defaultPageCategory(contentForLocale(data, data.contentLocales?.defaultLocale));
       ready = true;
       if (data.backend === "github" && data.github) {
         const session = readSession(data.github);
@@ -478,11 +480,18 @@
   });
 
   const sidebar = $derived(buildSidebar(visibleContent, $t));
-  const pageCategory = $derived(sel?.kind === "pages" ? sel.category : undefined);
+  let pagesFilter = $state<string | null>("");
+  let entryList = $state<Sel | null>(null);
+  const categories = $derived(pageCategories(visibleContent));
+  const pageCategory = $derived(sel?.kind === "pages" && sel.category !== undefined ? sel.category : pagesFilter);
   const schema = $derived<Schema | undefined>(manifest.schema);
   const docTypes = $derived(visibleContent.schema?.documents ?? []);
 
   const pageDocType = $derived(docTypes.find((type) => !type.shared && !type.singleton));
+  const templates = $derived(pageTemplates(visibleContent));
+  const pageBack = $derived<Extract<Sel, { kind: "pages" }>>(entryList?.kind === "pages" ? entryList : { kind: "pages" });
+  const documentBack = $derived<Sel | null>(entryList?.kind === "documents" && entryList.type === activeDocType?.name ? entryList : !activeDocType?.shared ? pageBack : activeDocType.singleton ? null : { kind: "documents", type: activeDocType.name });
+  const pageBackLabel = $derived((pageBack.category ?? pagesFilter) || (pagesFilter === "" && categories.length ? $t("shell.coreCategory") : $t("shell.pages")));
   const pageDocuments = $derived((visibleContent.documents ?? []).filter((doc) => docTypes.some(type => type.name === doc.type && !type.shared)));
   function docTypeName(s: Sel | null): string | null {
     return s && (s.kind === "document" || s.kind === "documents") ? s.type : null;
@@ -509,11 +518,11 @@
 
   const sortedPages = $derived.by(() => {
     const rows = [
-      ...visibleContent.pages.filter((p) => !p.shared && (pageCategory === undefined || p.category === pageCategory))
+      ...visibleContent.pages.filter((p) => !p.shared && inPageCategory(p.category, pageCategory))
         .map((p) => ({ slug: p.slug, path: previewPath(manifest.preview ?? {}, { kind: "page", slug: p.slug }), title: p.label, category: p.category, draft: false, target: { kind: "page", slug: p.slug } as Sel })),
       ...pageDocuments
         .map((doc) => ({ slug: effectiveSlug(doc.data, doc.slug), path: previewPath(manifest.preview ?? {}, { kind: "document", type: doc.type, slug: effectiveSlug(doc.data, doc.slug) }), title: String(doc.data.title ?? doc.slug), category: docTypes.find(type => type.name === doc.type)?.category, draft: doc.data.draft === true, target: { kind: "document", type: doc.type, id: doc.id } as Sel }))
-        .filter(doc => pageCategory === undefined || doc.category === pageCategory),
+        .filter(doc => inPageCategory(doc.category, pageCategory)),
     ];
     const key = sortBy === "slug" || sortBy === "category" || sortBy === "path" ? sortBy : "title";
     return rows.sort((a, b) => String(a[key] ?? "").localeCompare(String(b[key] ?? "")) * sortDir);
@@ -526,13 +535,13 @@
 
   const menu = $derived.by(() => { const slug = sel?.kind === "menu" ? sel.slug : null; return manifest.menus?.entries.find((m) => m.slug === slug); });
   const sortedMenus = $derived([...(manifest.menus?.entries ?? [])].sort((a, b) => (sortBy === "slug" ? a.slug.localeCompare(b.slug) : a.title.localeCompare(b.title)) * sortDir));
-  const listTitle = $derived(sel?.kind === "menus" ? $t("shell.allMenus") : sel?.kind === "documents" ? activeDocType?.title ?? $t("shell.documents") : sel?.kind === "pages" ? pageCategory !== undefined ? $t("shell.allNamedEntries", { name: pageCategory }) : $t("shell.allPages") : coll?.listTitle?.trim() || (coll?.label !== undefined ? $t("shell.allNamedEntries", { name: coll.label }) : $t("shell.allEntries")));
+  const listTitle = $derived(sel?.kind === "menus" ? $t("shell.allMenus") : sel?.kind === "documents" ? activeDocType?.title ?? $t("shell.documents") : sel?.kind === "pages" ? pageCategory !== null && categories.length ? $t("shell.allNamedEntries", { name: pageCategory || $t("shell.coreCategory") }) : $t("shell.allPages") : coll?.listTitle?.trim() || (coll?.label !== undefined ? $t("shell.allNamedEntries", { name: coll.label }) : $t("shell.allEntries")));
   const listRows = $derived(sel?.kind === "menus"
     ? sortedMenus.map((m) => ({ slug: m.slug, cells: { slug: m.slug, title: m.title } as Record<string, string>, draft: false, target: { kind: "menu", slug: m.slug } as Sel }))
     : sel?.kind === "documents"
     ? typeDocuments.map((doc) => ({ slug: doc.slug, cells: Object.fromEntries(columns.map(column => [column.key, documentCell(doc, column.key)])), draft: doc.data.draft === true, target: { kind: "document", type: doc.type, id: doc.id } as Sel }))
     : sel?.kind === "pages"
-    ? sortedPages.map((p) => ({ slug: p.slug, cells: { label: p.title, slug: p.slug, path: p.path ?? "—", category: p.category ?? "—" } as Record<string, string>, draft: p.draft, target: p.target }))
+    ? sortedPages.map((p) => ({ slug: p.slug, cells: { label: p.title, slug: p.slug, path: p.path ?? "—", category: p.category ?? (categories.length ? $t("shell.coreCategory") : "—") } as Record<string, string>, draft: p.draft, target: p.target }))
     : sortedPosts.map((p) => ({ slug: p.slug, cells: Object.fromEntries(columns.map((c) => [c.key, cellValue(p, c.key)])), draft: Boolean(p.frontmatter.draft), target: { kind: "post", collection: coll!.name, slug: p.slug } as Sel })));
   const titleColumn = $derived(sel?.kind === "pages" ? "label" : "title");
 
@@ -637,6 +646,11 @@
   }
 
   function openSelection(next: Sel | null) {
+    if (next?.kind === "page" || next?.kind === "document") {
+      if (sel?.kind === "pages" || sel?.kind === "documents") entryList = sel;
+      else if (sel?.kind !== "page" && sel?.kind !== "document") entryList = null;
+    }
+    if (next?.kind === "pages" && next.category !== undefined) pagesFilter = next.category;
     sel = next;
     saveError = "";
     sortBy = "";
@@ -686,6 +700,8 @@
     requestNavigation(() => {
       const destination = contentForLocale(manifest, value);
       selectedContentLocale = value;
+      if (pagesFilter && !pageCategories(destination).includes(pagesFilter)) pagesFilter = defaultPageCategory(destination);
+      if (!selectionInContent(destination, entryList)) entryList = null;
       if (!selectionInContent(destination, sel)) openSelection(null);
       focusContentLocale();
     }, focusContentLocale);
@@ -726,21 +742,25 @@
     return String(v);
   }
 
-  function newPage(type = pageDocType) {
+  function newPage(type = pageDocType, chooseTemplate = false) {
+    if (chooseTemplate) type = templates.find(type => inPageCategory(type.category, pageCategory)) ?? templates[0];
     if (!type || !schema || type.creatable === false || type.singleton) return;
     actionDialog = {
-      title: $t("shell.addDocument", { name: type.title }), description: $t("shell.newDocumentDescription"), fieldLabel: type.shared ? $t("shell.name") : $t("shell.pageName"), confirmLabel: $t("shell.createDraft"),
-      onconfirm: (title) => {
+      title: $t("shell.addDocument", { name: chooseTemplate ? $t("shell.pages") : type.title }), description: $t("shell.newDocumentDescription"), fieldLabel: type.shared ? $t("shell.name") : $t("shell.pageName"), confirmLabel: $t("shell.createDraft"),
+      ...(chooseTemplate ? { templates, templateCategory: type.category ?? "" } : {}),
+      onconfirm: (title, selectedType) => {
+        const selected = chooseTemplate ? templates.find(entry => entry.name === selectedType) : type;
+        if (!selected) throw new Error($t("shell.chooseTemplate"));
         const slug = slugify(title);
         if (!slug) throw new Error($t("shell.titleRequired"));
-        if (manifest.documents?.some(doc => doc.type === type.name && doc.slug === slug)) throw new Error($t("shell.slugAlreadyUsed", { slug }));
-        const id = `${type.name}:${slug}`;
-        const data = newDocumentFromTemplate(schema, type.name, title, slug);
-        validateDocumentSlugs(schema, [...(manifest.documents ?? []), { id, type: type.name, slug, data }], manifest.preview, $t);
-        newDocument = { type: type.name, id, slug };
+        if (manifest.documents?.some(doc => doc.type === selected.name && doc.slug === slug)) throw new Error($t("shell.slugAlreadyUsed", { slug }));
+        const id = `${selected.name}:${slug}`;
+        const data = newDocumentFromTemplate(schema, selected.name, title, slug);
+        validateDocumentSlugs(schema, [...(manifest.documents ?? []), { id, type: selected.name, slug, data }], manifest.preview, $t);
+        newDocument = { type: selected.name, id, slug };
         draft = JSON.parse(JSON.stringify(data));
         docBase = null;
-        openSelection({ kind: "document", type: type.name, id });
+        openSelection({ kind: "document", type: selected.name, id });
       },
     };
   }
@@ -957,10 +977,9 @@
         {#if sel.kind === "page" || sel.kind === "post" || sel.kind === "menu" || sel.kind === "document"}
         <div class="editor-actions">
         {#if sel.kind === "page" && page}
-          <p class="back"><button onclick={() => select(page.shared ? null : { kind: "pages", category: page.category })}>{$t("shell.backTo", { name: page.shared ? $t("shell.welcome") : page.category ?? $t("shell.pages") })}</button></p>
+          <p class="back"><button onclick={() => select(page.shared ? null : pageBack)}>{$t("shell.backTo", { name: page.shared ? $t("shell.welcome") : pageBackLabel })}</button></p>
         {:else if sel.kind === "document"}
-          {@const backSel: Sel | null = activeDocType?.singleton ? null : sel.type === pageDocType?.name ? { kind: "pages" } : { kind: "documents", type: sel.type }}
-          <p class="back"><button onclick={() => select(backSel)}>{$t("shell.backTo", { name: activeDocType?.singleton ? $t("shell.welcome") : sel.type === pageDocType?.name ? $t("shell.pages") : activeDocType?.title ?? $t("shell.documents") })}</button></p>
+          <p class="back"><button onclick={() => select(documentBack)}>{$t("shell.backTo", { name: !documentBack ? $t("shell.welcome") : documentBack.kind === "pages" ? pageBackLabel : activeDocType?.title ?? $t("shell.documents") })}</button></p>
         {:else if sel.kind === "post" && coll}
           <p class="back"><button onclick={() => select({ kind: "collection", name: coll.name })}>{$t("shell.backTo", { name: coll.label })}</button></p>
         {:else if sel.kind === "menu"}
@@ -976,8 +995,11 @@
         {/if}
         <div class="titlebar">
           <h2>{sel.kind === "page" ? page?.label : sel.kind === "menu" ? String(draft.title || menu?.slug || "") : sel.kind === "post" ? String(draft.title || post?.slug || "") : sel.kind === "document" ? activeDocType?.singleton ? activeDocType.title : String(draft.title || draft.name || activeDocument?.slug || sel.id) : listTitle}</h2>
-        {#if (sel?.kind === "collection" && coll) || (sel?.kind === "pages" && pageDocType?.creatable !== false && pageDocType) || (sel?.kind === "documents" && activeDocType && activeDocType.creatable !== false && !activeDocType.singleton)}
-          <button class="primary" onclick={() => (sel?.kind === "collection" ? newPost(coll!) : newPage(sel?.kind === "documents" ? activeDocType : pageDocType))}>{$t("shell.addNew")}</button>
+        {#if sel.kind === "pages" && categories.length}
+          <Select label={$t("shell.category")} value={JSON.stringify(pageCategory)} options={[{ value: "null", label: $t("shell.allPages") }, { value: JSON.stringify(""), label: $t("shell.coreCategory") }, ...categories.map(category => ({ value: JSON.stringify(category), label: category }))]} onchange={(value) => { if (typeof value === "string") { pagesFilter = JSON.parse(value); select({ kind: "pages" }); } }} />
+        {/if}
+        {#if (sel?.kind === "collection" && coll) || (sel?.kind === "pages" && templates.length) || (sel?.kind === "documents" && activeDocType && activeDocType.creatable !== false && !activeDocType.singleton)}
+          <button class="primary" onclick={() => (sel?.kind === "collection" ? newPost(coll!) : newPage(sel?.kind === "documents" ? activeDocType : pageDocType, sel?.kind === "pages"))}>{$t("shell.addNew")}</button>
         {/if}
         {#if sel?.kind === "post" && post}
           <button class="icon-btn" aria-label={$t("shell.deletePost")} data-tooltip={$t("shell.deletePost")} disabled={saveState === "saving"} onclick={deletePost}>

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

@@ -1,4 +1,7 @@
 {
+  "shell.coreCategory": "Standard",
+  "shell.template": "Vorlage",
+  "shell.chooseTemplate": "Vorlage auswählen",
   "shell.search": "Suchen",
   "shell.searchShortcut": "⌘/Ctrl + K",
   "shell.closeDialog": "Dialog schließen",

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

@@ -1,4 +1,7 @@
 {
+  "shell.coreCategory": "Core",
+  "shell.template": "Template",
+  "shell.chooseTemplate": "Choose a template",
   "shell.search": "Search",
   "shell.searchShortcut": "⌘/Ctrl + K",
   "shell.closeDialog": "Close dialog",

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

@@ -1,4 +1,7 @@
 {
+  "shell.coreCategory": "Principales",
+  "shell.template": "Plantilla",
+  "shell.chooseTemplate": "Elige una plantilla",
   "shell.search": "Buscar",
   "shell.searchShortcut": "⌘/Ctrl + K",
   "shell.closeDialog": "Cerrar diálogo",

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

@@ -1,4 +1,7 @@
 {
+  "shell.coreCategory": "Principales",
+  "shell.template": "Modèle",
+  "shell.chooseTemplate": "Choisir un modèle",
   "shell.search": "Rechercher",
   "shell.searchShortcut": "⌘/Ctrl + K",
   "shell.closeDialog": "Fermer la boîte de dialogue",

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

@@ -1,4 +1,7 @@
 {
+  "shell.coreCategory": "Principali",
+  "shell.template": "Modello",
+  "shell.chooseTemplate": "Scegli un modello",
   "shell.search": "Cerca",
   "shell.searchShortcut": "⌘/Ctrl + K",
   "shell.closeDialog": "Chiudi finestra",

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

@@ -1,4 +1,7 @@
 {
+  "shell.coreCategory": "基本",
+  "shell.template": "テンプレート",
+  "shell.chooseTemplate": "テンプレートを選択",
   "shell.search": "検索",
   "shell.searchShortcut": "⌘/Ctrl + K",
   "shell.closeDialog": "ダイアログを閉じる",

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

@@ -1,4 +1,7 @@
 {
+  "shell.coreCategory": "Standaard",
+  "shell.template": "Sjabloon",
+  "shell.chooseTemplate": "Kies een sjabloon",
   "shell.search": "Zoeken",
   "shell.searchShortcut": "⌘/Ctrl + K",
   "shell.closeDialog": "Dialoogvenster sluiten",

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

@@ -1,4 +1,7 @@
 {
+  "shell.coreCategory": "Основные",
+  "shell.template": "Шаблон",
+  "shell.chooseTemplate": "Выберите шаблон",
   "shell.search": "Поиск",
   "shell.searchShortcut": "⌘/Ctrl + K",
   "shell.closeDialog": "Закрыть диалог",

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": "关闭对话框",

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

@@ -52,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);
@@ -262,19 +262,21 @@
     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); element.replaceChildren(scope); bodyScope = scope;
+    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(() => host.querySelector<HTMLElement>('[contenteditable="true"], textarea')?.focus());
+    void tick().then(() => (element.isContentEditable ? element : host.querySelector<HTMLTextAreaElement>("textarea"))?.focus());
     return true;
   }
 
@@ -393,7 +395,7 @@
 
   function setMode(next: "browse" | "edit") {
     mode = next;
-    panelOpen = next === "edit";
+    panelOpen = false;
     if (next === "browse") {
       clearHighlight();
       clearHover();

package/src/editor/styles.css

@@ -1183,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; }
@@ -1316,6 +1319,7 @@
 .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); cursor: pointer; }
 .rigel .structure-actions button:disabled, .rigel .schema-item-actions button:disabled { opacity: 0.35; cursor: default; }

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, ...types.filter(type => !type.shared)].map(entry => entry.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")),

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;
+}