@rigel-cms/rigel 0.1.0-beta.1 → 0.1.4-beta.1

package/README.md

@@ -4,6 +4,14 @@ A CMS for Astro sites. You edit the text, git keeps the history.
 
 `@rigel-cms/rigel` is a beta package and a work in progress. Expect bugs and breaking changes.
 
+## Collection validation
+
+New collection drafts initialize every configured field, including Rigel's automatic `description`, `metaTitle`, and `ogImage` strings. Existing content is never filled in automatically; unknown properties are preserved and missing optional fields remain allowed.
+
+Rigel validates configured collection field types and `required: true` on load and before local or GitHub saves. Required strings must contain non-whitespace text, required arrays must contain an item, and `false` is a valid required boolean. Dates use real `YYYY-MM-DD` calendar dates; optional dates may be empty. Tags are arrays of strings and references must select configured entries.
+
+Astro content schemas remain the host site's contract: Rigel does not discover or execute them. Align Rigel field types and requiredness with the host schema. For example, Astro's `z.string()` accepts an initialized empty description; `z.string().min(1)` also needs Rigel's `required: true`.
+
 ## License
 
 [Apache-2.0](LICENSE). Copyright 2026 [Alex Zappa](https://alex.zappa.dev/) ([FreshJuice](https://freshjuice.dev/)).

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@rigel-cms/rigel",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.4-beta.1",
+  "publishConfig": {
+    "access": "public",
+    "tag": "beta"
+  },
   "description": "Rigel CMS — the copy editor for Astro sites. Clients edit text, git keeps the history.",
   "author": {
     "name": "FreshJuice",
@@ -28,7 +32,8 @@
   "scripts": {
     "build": "pnpm typecheck",
     "test": "vitest run",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "publish:beta": "npm publish --access public --tag beta"
   },
   "exports": {
     ".": "./src/index.ts",

package/src/config.ts

@@ -3,6 +3,7 @@ import { validateSchema } from "./schema/validate";
 import type { Schema } from "./schema/types";
 import { validateSidebar, type SidebarEntry } from "./manifest/navigation";
 import { withSeoFields } from "./manifest/seo";
+import { previewBaseUrl } from "./preview-urls";
 
 export interface RigelConfig {
   copyDir: string;
@@ -41,6 +42,10 @@ export function parseConfig(options: Partial<RigelConfig> = {}): RigelConfig {
   const cfg = { ...DEFAULTS, ...options };
   if (cfg.demo === undefined) cfg.demo = true;
   if (typeof cfg.demo !== "boolean") throw new Error("rigel: demo must be boolean");
+  if (cfg.preview) {
+    cfg.preview = { ...cfg.preview };
+    for (const key of ["liveUrl", "draftUrl"] as const) if (cfg.preview[key] !== undefined) cfg.preview[key] = previewBaseUrl(cfg.preview[key]);
+  }
   if (cfg.mediaDir !== undefined && (typeof cfg.mediaDir !== "string" || !cfg.mediaDir.split("/").every(part => /^[a-zA-Z0-9_-][a-zA-Z0-9_. -]*$/.test(part)))) throw new Error("rigel: mediaDir must be a relative folder inside publicDir");
   if (cfg.backend === "github") {
     if (typeof cfg.repo !== "string" || !/^[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\/[a-zA-Z0-9_.-]+$/.test(cfg.repo) || [".", ".."].includes(cfg.repo.split("/")[1])) throw new Error("rigel: github backend requires `repo: owner/name`");
@@ -82,6 +87,7 @@ export function parseConfig(options: Partial<RigelConfig> = {}): RigelConfig {
   if (cfg.collections) cfg.collections = cfg.collections.map(collection => ({ ...collection, fields: withSeoFields(collection.fields) }));
   for (const collection of cfg.collections ?? []) {
     for (const field of collection.fields) {
+      if (field.required !== undefined && typeof field.required !== "boolean") throw new Error(`rigel: ${collection.name}.${field.key}: required must be boolean`);
       if (field.type !== "reference") continue;
       if (field.multiple !== undefined && typeof field.multiple !== "boolean") throw new Error(`rigel: ${collection.name}.${field.key}: multiple must be boolean`);
       if ((field.to !== undefined ? 1 : 0) + (field.options !== undefined ? 1 : 0) !== 1) throw new Error(`rigel: ${collection.name}.${field.key}: reference requires either to or options`);

package/src/editor/App.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+  import { tooltipRoot } from "./lib/tooltip";
+  onMount(() => tooltipRoot(document.body).destroy);
   import type {
     Manifest,
     ManifestCollection,
@@ -15,19 +18,20 @@
   import SchemaPanel from "./lib/SchemaPanel.svelte";
   import { collectionPreviewValues, referenceLabel, referenceOptions } from "../manifest/references";
   import { isSeoField } from "../manifest/seo";
+  import { initialCollectionValues } from "../manifest/collections";
   import { slugify } from "./lib/slugify";
   import Icon from "./lib/Icon.svelte";
   import SidebarIcon from "./lib/SidebarIcon.svelte";
   import logo from "./assets/rigelcms-icon.png?url";
   import { getSettings, setSettings } from "./lib/settings";
-  import { eraseData } from "./lib/storage";
+  import { eraseData, readSession, writeSession, clearSession } from "./lib/storage";
   import MenuEditor from "./lib/MenuEditor.svelte";
   import type { MenuItem } from "../manifest/menu";
   import UnsavedChanges from "./lib/UnsavedChanges.svelte";
   import ActionDialog from "./lib/ActionDialog.svelte";
   import VisualEditor from "./lib/VisualEditor.svelte";
   import { newDocumentFromTemplate } from "../schema/paths";
-  import { previewPath } from "../preview";
+  import { previewUrl } from "../preview";
   import type { ContentDocument, Schema } from "../schema/types";
   import { buildSidebar, navigationKey, type Selection } from "../manifest/navigation";
   import { startGitHubLogin, checkGitHubAccess, type GitHubAccess } from "./lib/github-auth";
@@ -39,6 +43,7 @@
   let ready = $state(false);
   let blueprint: Manifest | null = null;
   let gitContext: GitContext | null = null;
+  let authRevision = 0;
   let connected = $state(false);
   let connectionBusy = $state(false);
   let connectionError = $state("");
@@ -75,6 +80,14 @@
       blueprint = data;
       manifest = data;
       ready = true;
+      if (data.backend === "github" && data.github) {
+        const session = readSession(data.github);
+        if (session) {
+          gitContext = { token: session.accessToken, repo: data.github.repo, branch: data.github.branch };
+          sessionExpiresAt = session.expiresAt;
+          await recheckGitHub();
+        }
+      }
     } catch (error) {
       loadError = error instanceof Error ? error.message : "Could not load the editor configuration.";
     }
@@ -84,7 +97,7 @@
     if (connectionBusy) throw new Error("Wait for GitHub access verification before saving.");
     if (!gitContext || !connected || githubAccess?.status !== "ready") throw new Error("Connect GitHub and verify repository access before saving.");
     if (Date.now() >= sessionExpiresAt - 30_000) {
-      tokenExpired = true;
+      invalidateSession();
       throw new Error("Your GitHub session expired. Reconnect GitHub, then retry. Your unsaved edits are still here.");
     }
     return gitContext;
@@ -92,27 +105,54 @@
 
   async function verifyGitHub() {
     const config = blueprint?.github;
-    if (!config || !gitContext) return;
-    if (Date.now() >= sessionExpiresAt - 30_000) throw new Error("Your GitHub session expired. Sign in again to check repository access.");
-    githubAccess = await checkGitHubAccess(gitContext.token, config.repo, config.appSlug);
-    if (githubAccess.status !== "ready") return;
-    if (!connected && blueprint) {
-      const remote = await loadManifestRemote(gitContext, blueprint);
-      manifest = remote;
-      connected = true;
+    const context = gitContext;
+    if (!config || !context) return;
+    try {
+      if (Date.now() >= sessionExpiresAt - 30_000) {
+        invalidateSession();
+        throw new Error("Your GitHub session expired. Sign in again to check repository access.");
+      }
+      const access = await checkGitHubAccess(context.token, config.repo, config.appSlug);
+      if (gitContext !== context) return;
+      githubAccess = access;
+      if (access.status !== "ready") return;
+      if (!connected && blueprint) {
+        const remote = await loadManifestRemote(context, blueprint);
+        if (gitContext !== context) return;
+        manifest = remote;
+        connected = true;
+      }
+    } catch (error) {
+      if (gitContext === context) handleAuthError(error);
+      throw error;
     }
   }
 
+  function invalidateSession() {
+    authRevision += 1;
+    clearSession();
+    gitContext = null;
+    sessionExpiresAt = 0;
+    githubAccess = null;
+    tokenExpired = true;
+  }
+
+  function handleAuthError(error: unknown) {
+    if (error instanceof Error && "status" in error && error.status === 401) invalidateSession();
+  }
+
   async function connectGitHub() {
     if (connectionBusy || saveState === "saving" || !manifest.github) return;
     connectionBusy = true;
     connectionError = "";
+    const revision = ++authRevision;
     try {
       const session = await startGitHubLogin(manifest.github.authOrigin);
-      if (gitContext) gitContext.token = session.accessToken;
-      else gitContext = { token: session.accessToken, repo: manifest.github.repo, branch: manifest.github.branch };
+      if (revision !== authRevision) return;
+      gitContext = { token: session.accessToken, repo: manifest.github.repo, branch: manifest.github.branch };
       githubAccess = null;
       sessionExpiresAt = session.expiresAt;
+      writeSession(manifest.github, session);
       await verifyGitHub();
     } catch (error) {
       connectionError = error instanceof Error ? error.message : "Could not connect GitHub. Try signing in again.";
@@ -134,9 +174,7 @@
     if (saveState === "saving" || connectionBusy) return;
     userOpen = false;
     requestNavigation(() => {
-      gitContext = null;
-      sessionExpiresAt = 0;
-      githubAccess = null;
+      invalidateSession();
       connected = false;
       connectionError = "";
       settingsOpen = false;
@@ -157,9 +195,9 @@
 
   $effect(() => {
     const expiry = sessionExpiresAt;
-    tokenExpired = !!expiry && Date.now() >= expiry - 30_000;
+    tokenExpired = !expiry || Date.now() >= expiry - 30_000;
     if (!expiry) return;
-    const timer = setTimeout(() => { tokenExpired = true; }, Math.max(0, expiry - Date.now() - 30_000));
+    const timer = setTimeout(invalidateSession, Math.max(0, expiry - Date.now() - 30_000));
     return () => clearTimeout(timer);
   });
 
@@ -185,7 +223,7 @@
             ? `/rigel/api/local/documents/${encodeURIComponent(docSel.id)}`
             : m ? `/rigel/api/local/menus/${m.slug}` : po && c ? `/rigel/api/local/${c.name}/${encodeURIComponent(po.slug)}` : "/rigel/api/local/save";
           const payload = docSel ? { data: values } : m ? { slug: m.slug, title: values.title, items: values.items } : po ? { frontmatter: values, body } : { slug: p?.slug, values };
-          const res = await fetch(url, { method: docSel ? (creatingDoc ? "POST" : "PUT") : m ? "PUT" : "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
+          const res = await fetch(url, { method: docSel ? (creatingDoc ? "POST" : "PUT") : m ? "PUT" : "POST", headers: { "Content-Type": "application/json", ...(po && creating ? { "If-None-Match": "*" } : {}) }, body: JSON.stringify(payload) });
           if (!res.ok) throw new Error((await res.text()) || `Save failed (${res.status})`);
           }
           if (docSel) {
@@ -204,6 +242,7 @@
           saveState = dirty ? "idle" : "saved";
           saveError = "";
         } catch (error) {
+          handleAuthError(error);
           saveState = "error";
           saveError = error instanceof Error ? error.message : "Could not save changes";
           return false;
@@ -219,8 +258,10 @@
 
   let settings = $state(getSettings());
   let settingsError = $state("");
-  const userName = $derived(githubMode ? githubAccess?.user.login ?? "GitHub user" : "Local user");
-  const userMode = $derived(githubMode ? `${manifest.github?.repo} · ${manifest.github?.branch}` : "Local mode");
+  const userName = $derived(githubMode ? githubAccess?.user.name ?? githubAccess?.user.login ?? "GitHub user" : "Local user");
+  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}` : "Local mode");
   let content: HTMLDivElement;
   let contentWidth = $state(0);
   let resizing = $state(false);
@@ -270,7 +311,7 @@
   function eraseBrowserData() {
     actionDialog = {
       title: "Erase browser data?", confirmLabel: "Erase data", danger: true,
-      description: "This removes Rigel settings, API keys and unsaved drafts from this browser. Saved repository files will not change. The editor will reload.",
+      description: "This removes Rigel settings, API keys, GitHub login and unsaved drafts from this browser. Saved repository files will not change. The editor will reload.",
       onconfirm: () => {
         if (saveState === "saving") throw new Error("Wait for the current save to finish.");
         eraseData();
@@ -369,10 +410,10 @@
     if (current?.kind === "document") map[current.id] = draft;
     return map;
   });
-  const previewDocPath = $derived.by(() => {
+  function documentPreview(mode: "draft" | "website") {
     if (sel?.kind !== "document" || newDocument?.id === sel.id) return null;
-    return previewPath(manifest.preview ?? {}, { kind: "document", type: sel.type, slug: sel.id.slice(sel.type.length + 1) });
-  });
+    return previewUrl(manifest.preview ?? {}, { kind: "document", type: sel.type, slug: sel.id.slice(sel.type.length + 1) }, mode);
+  }
   const standaloneDocument = $derived(sel?.kind === "document" && activeDocType?.shared === true);
   const visualSelection = $derived(sel?.kind === "post" || (sel?.kind === "document" && !standaloneDocument));
 
@@ -593,10 +634,9 @@
     actionDialog = {
       title: `Add to ${c.label}`, description: "Enter a title to start a draft. Nothing is written until you press Save.", fieldLabel: "Title", confirmLabel: "Create draft",
       onconfirm: (title) => {
-        const slug = slugify(title);
+        const slug = slugify(title, c.posts.map((post) => post.slug));
         if (!slug) throw new Error("Enter a title containing letters or numbers.");
-        if (c.posts.some((p) => p.slug === slug)) throw new Error(`A post with slug "${slug}" already exists.`);
-        newEntry = { collection: c.name, post: { slug, frontmatter: { title, date: new Date().toISOString().slice(0, 10), author: "", draft: true, ...Object.fromEntries(c.fields.filter(field => field.type === "reference" && field.multiple).map(field => [field.key, []])) }, body: emptyBody() } };
+        newEntry = { collection: c.name, post: { slug, frontmatter: initialCollectionValues(c.fields, title), body: emptyBody() } };
         openSelection({ kind: "post", collection: c.name, slug });
       },
     };
@@ -610,7 +650,10 @@
       description: unsaved ? "This discards the new post and its unsaved changes." : `This deletes ${current.slug}.json${githubMode ? ` from ${manifest.github?.branch}` : ""} and discards any unsaved changes. This cannot be undone in the editor.`,
       onconfirm: async () => {
         if (!unsaved) {
-          if (githubMode) await deleteRemotePost(requireGitContext(), manifest, collection.name, current.slug);
+          if (githubMode) {
+            try { await deleteRemotePost(requireGitContext(), manifest, collection.name, current.slug); }
+            catch (error) { handleAuthError(error); throw error; }
+          }
           else {
           const res = await fetch(`/rigel/api/local/${collection.name}/${encodeURIComponent(current.slug)}`, { method: "DELETE" });
           if (!res.ok) throw new Error((await res.text()) || `Delete failed (${res.status})`);
@@ -626,7 +669,23 @@
 
 </script>
 
+{#snippet avatar()}
+  <span class="avatar">
+    {#if userAvatar && failedAvatar !== userAvatar}
+      <img src={userAvatar} alt="" width="36" height="36" referrerpolicy="no-referrer" onerror={() => { failedAvatar = userAvatar; }} />
+    {:else}
+      <Icon name="user" size={20} />
+    {/if}
+  </span>
+{/snippet}
+
 <svelte:window
+  onstorage={(event) => {
+    if ((event.key === "rigelcms.session" || event.key === null) && blueprint?.github && !readSession(blueprint.github)) {
+      invalidateSession();
+      connectionError = "Signed out in another tab. Reconnect GitHub to save. Your unsaved edits are still here.";
+    }
+  }}
   onresize={endPreviewResize}
   onblur={endPreviewResize}
   oncontextmenu={(event) => { if (!settings.devMode) event.preventDefault(); }}
@@ -645,37 +704,32 @@
 {#if !ready || (githubMode && !connected)}
 <div class="rigel connection-shell">
   <main id="github-connection" class="connection-card" aria-busy={connectionBusy}>
-    <img src={logo} alt="" width="64" height="64" />
-    <h1>{!ready ? "RigelCMS" : "Connect GitHub"}</h1>
+    <div class="connection-brand"><img src={logo} alt="" width="64" height="64" /><span>Rigel <span class="brand-suffix">CMS</span></span></div>
+    <h1>{!ready ? "Loading editor" : "Connect GitHub"}</h1>
     {#if !ready}
       {#if loadError}<p class="connection-error" role="alert">{loadError}</p><button class="primary" onclick={loadBlueprint}>Retry loading</button>
       {:else}<p role="status">Loading the editor configuration…</p>{/if}
     {:else if manifest.github}
-      <p>Content repository <strong>{manifest.github.repo}</strong></p>
       {#if githubAccess}
         <p>Signed in as <strong>{githubAccess.user.login}</strong>.</p>
-        {#if githubAccess.status === "read-only"}
-          <p>Editing needs write access from both your account and the GitHub App. Ask an administrator to check repository permissions and the App installation, then check again.</p>
-        {:else if githubAccess.status === "installation-required"}
-          <p>Install or configure the Rigel GitHub App for this repository. On GitHub, choose your account or organization, select <strong>Only select repositories</strong>, and include <strong>{manifest.github.repo}</strong>.</p>
-          <p>If your organization requires approval, its administrator must approve the installation first.</p>
+        {#if githubAccess.status === "read-only" || githubAccess.status === "installation-required"}
+          <p>You don’t have editing access. Contact the website administrator.</p>
         {:else}
-          <p role="status">{connectionBusy ? "Loading the shared drafts workspace…" : "Repository access verified. Retry loading the drafts workspace."}</p>
+          <p role="status">{connectionBusy ? "Opening the editor…" : "Access confirmed. Try opening the editor again."}</p>
         {/if}
         {#if githubAccess.status !== "ready"}
-          <a id="github-install" class="primary" href={githubAccess.installUrl} target="_blank" rel="noopener noreferrer">Install / configure GitHub access</a>
-          <p>Keep this tab open. Return here after configuring access on GitHub.</p>
+          <a id="github-install" class="primary" href={githubAccess.installUrl} target="_blank" rel="noopener noreferrer">Manage GitHub access</a>
         {/if}
       {:else}
-        <p>Sign in, then choose which repositories the Rigel GitHub App may access. The editor opens only after GitHub confirms write access to this repository.</p>
+        <p>Sign in to edit this website.</p>
       {/if}
       <div class="connection-actions">
         {#if sessionExpiresAt && !tokenExpired}
-          <button id="github-check-access" class="primary" disabled={connectionBusy} onclick={recheckGitHub}>{connectionBusy ? "Checking access…" : githubAccess?.status === "ready" ? "Retry loading drafts" : "Check repository access"}</button>
+          <button id="github-check-access" class="primary" disabled={connectionBusy} onclick={recheckGitHub}>{connectionBusy ? "Checking access…" : githubAccess?.status === "ready" ? "Open editor" : "Check access"}</button>
         {/if}
         <button id="github-sign-in" class:primary={!sessionExpiresAt || tokenExpired} class:outlined={sessionExpiresAt > 0 && !tokenExpired} disabled={connectionBusy} onclick={connectGitHub}>{connectionBusy && !sessionExpiresAt ? "Signing in…" : sessionExpiresAt ? "Sign in again" : "Sign in with GitHub"}</button>
       </div>
-      <p class="connection-note">Save writes to <strong>{manifest.github.branch}</strong>, not <strong>{manifest.github.publishBranch}</strong>. Publishing is a separate pull request.</p>
+      <p class="connection-note">By continuing, you agree to the <a href="https://rigelcms.dev/terms" target="_blank" rel="noopener noreferrer">Terms of Use</a> and acknowledge the <a href="https://rigelcms.dev/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>.</p>
     {/if}
     {#if connectionError}<p class="connection-error" role="alert">{connectionError}</p>{/if}
   </main>
@@ -685,7 +739,7 @@
   <aside id="rigel-sidebar">
     <a class="brand" href="/rigel/" role="button" aria-label="Welcome" aria-describedby="rigel-beta" onclick={(event) => { event.preventDefault(); goWelcome(); }}>
       <img src={logo} alt="" width="32" height="32" />
-      <span>RigelCMS</span>
+      <span>Rigel <span class="brand-suffix">CMS</span></span>
       <span id="rigel-beta" class="badge">Beta</span>
     </a>
     <TopBar {manifest} {sel} onselect={select} />
@@ -706,7 +760,7 @@
             data-document={node.target.kind === "document" ? node.target.id : undefined}
             data-page={node.target.kind === "page" ? node.target.slug : undefined}
             aria-label={node.label}
-            title={node.label}
+            data-tooltip={node.label}
             class:active={navActive(node.target)}
             aria-current={navActive(node.target) ? "page" : undefined}
             onclick={() => select(node.target)}
@@ -717,21 +771,21 @@
       {/each}
     </nav>
 
-    <button class="sidebar-toggle" aria-expanded={!settings.userPref.sidebarCollapsed} aria-controls="rigel-sidebar-navigation" aria-label={settings.userPref.sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"} title={settings.userPref.sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"} onclick={() => { settings.userPref.sidebarCollapsed = !settings.userPref.sidebarCollapsed; }}>
+    <button class="sidebar-toggle" aria-expanded={!settings.userPref.sidebarCollapsed} aria-controls="rigel-sidebar-navigation" aria-label={settings.userPref.sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"} data-tooltip={settings.userPref.sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"} onclick={() => { settings.userPref.sidebarCollapsed = !settings.userPref.sidebarCollapsed; }}>
       <SidebarIcon name="sidebar-simple" /><span class="sidebar-label">Collapse sidebar</span>
     </button>
     <div class="aside-foot">
       <div class="user-menu-wrap">
-        <button class="user-btn" aria-label={githubMode ? "GitHub user menu" : "Local user menu"} title={githubMode ? "GitHub user menu" : "Local user menu"} aria-haspopup="menu" aria-expanded={userOpen} onclick={() => (userOpen = !userOpen)}>
-          <span class="avatar"><Icon name="user" size={20} /></span>
-          <span class="user-details"><span class="uname">{userName}</span><small>{userMode}</small></span>
+        <button class="user-btn" aria-label={githubMode ? "GitHub user menu" : "Local user menu"} data-tooltip={githubMode ? "GitHub user menu" : "Local user menu"} 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>
         </button>
         {#if userOpen}
           <div class="user-menu" role="menu">
             <div class="user-menu-head">
-              <span class="avatar"><Icon name="user" size={20} /></span>
-              <div class="user-details"><strong>{userName}</strong><small>{userMode}</small></div>
+              {@render avatar()}
+              <div class="user-details"><strong>{userName}</strong><small>{userLogin}</small></div>
             </div>
             <div class="divider"></div>
             <a role="menuitem" href="/" target="_blank" rel="noopener">
@@ -752,7 +806,7 @@
             <a role="menuitem" href={githubAccess?.installUrl} target="_blank" rel="noopener noreferrer">Configure GitHub access</a>
             <button role="menuitem" class="github-reconnect" disabled={connectionBusy || saveState === "saving"} onclick={() => { userOpen = false; void connectGitHub(); }}>Reconnect GitHub</button>
             {/if}
-            <button id={githubMode ? "github-sign-out" : undefined} role="menuitem" class:muted={!githubMode} disabled={!githubMode || saveState === "saving" || connectionBusy} title={githubMode ? "Sign out of this editor" : "Local mode"} onclick={signOut}>
+            <button id={githubMode ? "github-sign-out" : undefined} role="menuitem" class:muted={!githubMode} disabled={!githubMode || saveState === "saving" || connectionBusy} data-tooltip={githubMode ? "Sign out of this editor" : "Local mode"} onclick={signOut}>
               <Icon name="signOut" size={13} />
               Sign Out
               {#if !githubMode}<span class="soon">backend: github</span>{/if}
@@ -799,7 +853,7 @@
           <button class="primary" onclick={() => (sel?.kind === "collection" ? newPost(coll!) : newPage(sel?.kind === "documents" ? activeDocType : pageDocType))}>Add new</button>
         {/if}
         {#if sel?.kind === "post" && post}
-          <button class="icon-btn" title="Delete post" disabled={saveState === "saving"} onclick={deletePost}>
+          <button class="icon-btn" aria-label="Delete post" data-tooltip="Delete post" disabled={saveState === "saving"} onclick={deletePost}>
             <Icon name="trash" size={15} />
           </button>
         {/if}
@@ -876,7 +930,8 @@
           docType={activeDocType}
           values={draft}
           documents={draftDocuments}
-          previewPath={previewDocPath}
+          previewPath={documentPreview("draft")}
+          websitePath={documentPreview("website")}
           creating={newDocument?.id === sel.id}
           devMode={settings.devMode}
           reloadToken={documentReload}
@@ -923,8 +978,8 @@
             body={bodyDraft}
             bodyInline={settings.userPref.editorExperience === "inline"}
             onbody={(value) => { bodyDraft = value; touch(); }}
-            previewPath={manifest.preview ? previewPath(manifest.preview, sel, !!newEntry) : null}
-            livePath={manifest.preview ? previewPath(manifest.preview, sel) : null}
+            previewPath={manifest.preview ? previewUrl(manifest.preview, sel, "draft", !!newEntry) : null}
+            websitePath={manifest.preview ? previewUrl(manifest.preview, sel, "website") : null}
             creating={!!newEntry}
             devMode={settings.devMode}
             onchange={(next) => { draft = next; touch(); }}
@@ -938,7 +993,7 @@
       {:else}
         <div class="welcome">
           <img src={logo} alt="" width="64" height="64" />
-          <h2>Welcome to RigelCMS</h2>
+          <h2>Welcome to Rigel CMS</h2>
           <p>The best CMS in the whole space.</p>
           <p class="welcome-hint">Select a page or collection from the sidebar to start editing.</p>
         </div>
@@ -959,7 +1014,7 @@
 {/if}
 
 {#if settingsOpen}
-  <Settings bind:s={settings} error={settingsError} saving={saveState === "saving"} onerase={eraseBrowserData} onclose={() => (settingsOpen = false)} />
+  <Settings bind:s={settings} github={githubMode ? manifest.github : undefined} user={githubAccess?.user} error={settingsError} saving={saveState === "saving"} onerase={eraseBrowserData} onclose={() => (settingsOpen = false)} />
 {/if}
 {#if shortcutsOpen}
   <Shortcuts onclose={() => (shortcutsOpen = false)} />

package/src/editor/lib/BlockEditor.svelte

@@ -509,10 +509,10 @@
 
 {#snippet formatButtons()}
   {#each marks.slice(0, 2) as mark}
-    <button type="button" aria-label={mark.label} title={mark.label} aria-pressed={activeMarks.includes(mark.type)} onpointerdown={event => event.preventDefault()} onclick={() => format(mark.type)}><Icon name={mark.icon} size={18} /></button>
+    <button type="button" aria-label={mark.label} data-tooltip={mark.label} aria-pressed={activeMarks.includes(mark.type)} onpointerdown={event => event.preventDefault()} onclick={() => format(mark.type)}><Icon name={mark.icon} size={18} /></button>
   {/each}
-  <button type="button" aria-label="Link" title="Link" aria-expanded={linkOpen} aria-controls={`${id}-link`} onpointerdown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
-  <button type="button" aria-label="More formatting" title="More formatting" aria-haspopup="menu" aria-expanded={formatsOpen} aria-controls={`${id}-formats`} popovertarget={`${id}-formats`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); formatTrigger = event.currentTarget; formatMenu.matches(':popover-open') ? closeMenu() : openMenu(event, formatMenu); }}><Icon name="caretDown" size={18} /></button>
+  <button type="button" aria-label="Link" data-tooltip="Link" aria-expanded={linkOpen} aria-controls={`${id}-link`} onpointerdown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
+  <button type="button" aria-label="More formatting" data-tooltip="More formatting" aria-haspopup="menu" aria-expanded={formatsOpen} aria-controls={`${id}-formats`} popovertarget={`${id}-formats`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); formatTrigger = event.currentTarget; formatMenu.matches(':popover-open') ? closeMenu() : openMenu(event, formatMenu); }}><Icon name="caretDown" size={18} /></button>
 {/snippet}
 {#snippet tableControls()}
   <div class="block-table-controls" role="group" aria-label="Table controls">
@@ -526,24 +526,24 @@
 {#snippet toolbar(image: boolean)}
   <div class="body-toolbar formatting-toolbar" class:image-toolbar={image} role="group" aria-label={image ? "Image editing" : "Body formatting"} style={inline || image ? floating : undefined} hidden={markdownView || ((inline || image) && !floating) || (image && !imageData)}>
     {#if image}
-      <button type="button" aria-label="Edit alt text" title="Edit alt text" onpointerdown={event => event.preventDefault()} onclick={openAlt}><Icon name="textAa" size={18} /></button>
-      <button type="button" aria-label={imageData?.url ? "Edit image link" : "Add image link"} title={imageData?.url ? "Edit image link" : "Add image link"} onpointerdown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
+      <button type="button" aria-label="Edit alt text" data-tooltip="Edit alt text" onpointerdown={event => event.preventDefault()} onclick={openAlt}><Icon name="textAa" size={18} /></button>
+      <button type="button" aria-label={imageData?.url ? "Edit image link" : "Add image link"} data-tooltip={imageData?.url ? "Edit image link" : "Add image link"} onpointerdown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
     {:else}
-    <Select ariaLabel="Block type" title={activeBlock?.label ?? "Block type"} icon={activeBlock?.icon ?? "paragraph"} value={imageData ? "" : blockType} options={textBlocks} disabled={!!imageData} onchange={next => { hoverKey = ""; changeBlock(String(next)); }} />
+    <Select ariaLabel="Block type" data-tooltip={activeBlock?.label ?? "Block type"} icon={activeBlock?.icon ?? "paragraph"} value={imageData ? "" : blockType} options={textBlocks} disabled={!!imageData} onchange={next => { hoverKey = ""; changeBlock(String(next)); }} />
     {#if !inline || !["image", "divider"].includes(blockType)}<span class="toolbar-separator" aria-hidden="true"></span>{@render formatButtons()}<span class="toolbar-separator" aria-hidden="true"></span>{/if}
     {/if}
     <ImagePicker toolbar value={image ? imageData?.src ?? "" : ""} altText={image ? imageData?.alt ?? "" : ""} triggerLabel={image ? "Replace image" : "Insert image"} onopen={() => { if (!imageJob) imageJob = { key: activeKey, replace: image }; linkOpen = false; altOpen = false; }} onpick={pickImage} onclose={() => { imageJob = null; refocus(); }} />
     {#if !image}
-    <button type="button" aria-label="Table" title="Table" aria-pressed={blockType === "table"} popovertarget={`${id}-table`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); tableMenu.matches(':popover-open') ? closeMenu() : openMenu(event, tableMenu); }}><Icon name="table" size={18} /></button>
-    <button type="button" aria-label="Bulleted list" title="Bulleted list" aria-pressed={listType === "bullet"} disabled={["image", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("bullet")}><Icon name="listBullets" size={18} /></button>
-    <button type="button" aria-label="Numbered list" title="Numbered list" aria-pressed={listType === "number"} disabled={["image", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("number")}><Icon name="listNumbers" size={18} /></button>
+    <button type="button" aria-label="Table" data-tooltip="Table" aria-pressed={blockType === "table"} popovertarget={`${id}-table`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); tableMenu.matches(':popover-open') ? closeMenu() : openMenu(event, tableMenu); }}><Icon name="table" size={18} /></button>
+    <button type="button" aria-label="Bulleted list" data-tooltip="Bulleted list" aria-pressed={listType === "bullet"} disabled={["image", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("bullet")}><Icon name="listBullets" size={18} /></button>
+    <button type="button" aria-label="Numbered list" data-tooltip="Numbered list" aria-pressed={listType === "number"} disabled={["image", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("number")}><Icon name="listNumbers" size={18} /></button>
     {#if !inline}
       <button type="button" class="block-history" disabled={!canUndo} onclick={() => editor.dispatchCommand(L.UNDO_COMMAND, undefined)}>Undo</button>
       <button type="button" class="block-history" disabled={!canRedo} onclick={() => editor.dispatchCommand(L.REDO_COMMAND, undefined)}>Redo</button>
-      <button type="button" class="block-add" aria-label="Add block" title="Add block" onclick={addBlock}>Add block</button>
+      <button type="button" class="block-add" aria-label="Add block" data-tooltip="Add block" onclick={addBlock}>Add block</button>
     {/if}
     {/if}
-    {#if inline || image}<span class="toolbar-separator" aria-hidden="true"></span><button type="button" aria-label="More actions" title="More actions" aria-haspopup="true" popovertarget={`${id}-actions`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); menu.matches(':popover-open') ? closeMenu() : openMenu(event); }}><Icon name="dotsThreeOutlineVertical" size={18} /></button>{/if}
+    {#if inline || image}<span class="toolbar-separator" aria-hidden="true"></span><button type="button" aria-label="More actions" data-tooltip="More actions" aria-haspopup="true" popovertarget={`${id}-actions`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); menu.matches(':popover-open') ? closeMenu() : openMenu(event); }}><Icon name="dotsThreeOutlineVertical" size={18} /></button>{/if}
   </div>
 {/snippet}
 <div class="block-editor" bind:this={editorHost}>
@@ -556,9 +556,9 @@
       <label for={`${id}-url`}>Link URL</label>
       <div class="markdown-link-controls">
         <input id={`${id}-url`} type="text" placeholder="https://…" bind:this={linkInput} bind:value={linkUrl} aria-invalid={!!linkError} />
-        <button type="button" aria-label="Apply link" title="Apply link" onclick={() => applyLink()}><Icon name="check" size={16} /></button>
-        <button type="button" aria-label="Remove link" title="Remove link" onclick={() => applyLink(true)}><Icon name="linkBreak" size={16} /></button>
-        <button type="button" aria-label="Close link" title="Close link" onclick={() => { linkOpen = false; refocus(); }}><Icon name="x" size={16} /></button>
+        <button type="button" aria-label="Apply link" data-tooltip="Apply link" onclick={() => applyLink()}><Icon name="check" size={16} /></button>
+        <button type="button" aria-label="Remove link" data-tooltip="Remove link" onclick={() => applyLink(true)}><Icon name="linkBreak" size={16} /></button>
+        <button type="button" aria-label="Close link" data-tooltip="Close link" onclick={() => { linkOpen = false; refocus(); }}><Icon name="x" size={16} /></button>
       </div>
       {#if linkError}<p role="alert">{linkError}</p>{/if}
     </div>
@@ -568,8 +568,8 @@
       <label for={`${id}-alt`}>Alt text (leave empty if decorative)</label>
       <div class="markdown-link-controls">
         <input id={`${id}-alt`} type="text" aria-label="Image alt text" bind:this={altInput} bind:value={altText} />
-        <button type="button" aria-label="Apply alt text" title="Apply alt text" onclick={applyAlt}><Icon name="check" size={16} /></button>
-        <button type="button" aria-label="Close alt text" title="Close alt text" onclick={() => { altOpen = false; refocus(); }}><Icon name="x" size={16} /></button>
+        <button type="button" aria-label="Apply alt text" data-tooltip="Apply alt text" onclick={applyAlt}><Icon name="check" size={16} /></button>
+        <button type="button" aria-label="Close alt text" data-tooltip="Close alt text" onclick={() => { altOpen = false; refocus(); }}><Icon name="x" size={16} /></button>
       </div>
     </div>
   {/if}
@@ -578,9 +578,9 @@
     <div class="block-markdown-view">{#if inline}<button type="button" class="outlined" onclick={async () => { markdownView = false; await tick(); editor.focus(); }}>Close Markdown view</button>{/if}<pre class="block-markdown" aria-label="Body as Markdown" tabindex="0">{articleMarkdown(value)}</pre></div>
   {/if}
   <div class="block-surface" bind:this={surface} hidden={markdownView} onpointermove={hover} role="group" aria-label="Article blocks">
-    {#if insertion && !markdownView}<button type="button" class="block-insert" style={`top:${insertion.top}px;left:${insertion.left}px`} aria-label="Insert paragraph here" title="Insert paragraph" onpointerdown={event => event.preventDefault()} onpointerleave={leaveInsertion} onblur={() => { insertion = null; }} onclick={insertParagraph}><Icon name="plus" size={16} /></button>{/if}
+    {#if insertion && !markdownView}<button type="button" class="block-insert" style={`top:${insertion.top}px;left:${insertion.left}px`} aria-label="Insert paragraph here" data-tooltip="Insert paragraph" onpointerdown={event => event.preventDefault()} onpointerleave={leaveInsertion} onblur={() => { insertion = null; }} onclick={insertParagraph}><Icon name="plus" size={16} /></button>{/if}
     {#if !inline}<div class="block-content" contenteditable="true" role="textbox" aria-label="Body" aria-multiline="true" bind:this={root}></div>{/if}
-    {#if hoverKey || activeKey}<button bind:this={handle} type="button" class="block-handle" style={`top:${handleTop}px;${inline ? `left:${handleLeft}px` : ''}`} aria-label="Block options and drag handle" title="Drag to reorder; click for block options" onpointerdown={startDrag} onpointermove={moveDrag} onpointerup={() => endDrag()} onpointercancel={() => endDrag(true)} onlostpointercapture={() => endDrag(true)} onclick={openMenu}><Icon name="dotsThreeOutlineVertical" size={16} /></button>{/if}
+    {#if hoverKey || activeKey}<button bind:this={handle} type="button" class="block-handle" style={`top:${handleTop}px;${inline ? `left:${handleLeft}px` : ''}`} aria-label="Block options and drag handle" data-tooltip="Drag to reorder; click for block options" onpointerdown={startDrag} onpointermove={moveDrag} onpointerup={() => endDrag()} onpointercancel={() => endDrag(true)} onlostpointercapture={() => endDrag(true)} onclick={openMenu}><Icon name="dotsThreeOutlineVertical" size={16} /></button>{/if}
     {#if drop}<div class="block-drop-indicator" style={`top:${drop.top}px;${inline ? `position:fixed;left:${root.getBoundingClientRect().left}px;width:${root.getBoundingClientRect().width}px;right:auto` : ''}`}></div>{/if}
     <div bind:this={slashMenu} class="block-slash" id={`${id}-slash`} popover="manual" style={slashPosition} role="listbox" aria-label="Insert block" onkeydown={slashKeydown}>
       {#if slash !== null}