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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rigel-cms/rigel",
-  "version": "0.1.3-beta.1",
+  "version": "0.1.4-beta.1",
   "publishConfig": {
     "access": "public",
     "tag": "beta"

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,
@@ -21,7 +24,7 @@
   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";
@@ -40,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("");
@@ -76,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.";
     }
@@ -85,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;
@@ -93,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.";
@@ -135,9 +174,7 @@
     if (saveState === "saving" || connectionBusy) return;
     userOpen = false;
     requestNavigation(() => {
-      gitContext = null;
-      sessionExpiresAt = 0;
-      githubAccess = null;
+      invalidateSession();
       connected = false;
       connectionError = "";
       settingsOpen = false;
@@ -158,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);
   });
 
@@ -186,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) {
@@ -205,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;
@@ -220,10 +258,10 @@
 
   let settings = $state(getSettings());
   let settingsError = $state("");
-  const userName = $derived(githubMode ? githubAccess?.user.login ?? "GitHub user" : "Local user");
+  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 userMode = $derived(githubMode ? `${manifest.github?.repo} · ${manifest.github?.branch}` : "Local mode");
+  const userLogin = $derived(githubMode && githubAccess ? `@${githubAccess.user.login}` : "Local mode");
   let content: HTMLDivElement;
   let contentWidth = $state(0);
   let resizing = $state(false);
@@ -273,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();
@@ -372,7 +410,7 @@
     if (current?.kind === "document") map[current.id] = draft;
     return map;
   });
-  function documentPreview(mode: "live" | "draft") {
+  function documentPreview(mode: "draft" | "website") {
     if (sel?.kind !== "document" || newDocument?.id === sel.id) return null;
     return previewUrl(manifest.preview ?? {}, { kind: "document", type: sel.type, slug: sel.id.slice(sel.type.length + 1) }, mode);
   }
@@ -596,9 +634,8 @@
     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: initialCollectionValues(c.fields, title), body: emptyBody() } };
         openSelection({ kind: "post", collection: c.name, slug });
       },
@@ -613,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})`);
@@ -640,6 +680,12 @@
 {/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(); }}
@@ -658,8 +704,8 @@
 {#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}
@@ -693,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} />
@@ -714,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)}
@@ -725,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)}>
+        <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>{userMode}</small></span>
+          <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">
               {@render avatar()}
-              <div class="user-details"><strong>{userName}</strong><small>{userMode}</small></div>
+              <div class="user-details"><strong>{userName}</strong><small>{userLogin}</small></div>
             </div>
             <div class="divider"></div>
             <a role="menuitem" href="/" target="_blank" rel="noopener">
@@ -760,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}
@@ -807,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}
@@ -885,7 +931,7 @@
           values={draft}
           documents={draftDocuments}
           previewPath={documentPreview("draft")}
-          livePath={documentPreview("live")}
+          websitePath={documentPreview("website")}
           creating={newDocument?.id === sel.id}
           devMode={settings.devMode}
           reloadToken={documentReload}
@@ -933,7 +979,7 @@
             bodyInline={settings.userPref.editorExperience === "inline"}
             onbody={(value) => { bodyDraft = value; touch(); }}
             previewPath={manifest.preview ? previewUrl(manifest.preview, sel, "draft", !!newEntry) : null}
-            livePath={manifest.preview ? previewUrl(manifest.preview, sel, "live") : null}
+            websitePath={manifest.preview ? previewUrl(manifest.preview, sel, "website") : null}
             creating={!!newEntry}
             devMode={settings.devMode}
             onchange={(next) => { draft = next; touch(); }}
@@ -947,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>
@@ -968,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}

package/src/editor/lib/ImagePicker.svelte

@@ -153,12 +153,12 @@
     {#if error && !open}<p class="error" role="alert">{error}</p>{/if}
   </div>
 {:else if toolbar}
-  <button bind:this={trigger} data-image-trigger type="button" aria-label={triggerLabel} title={triggerLabel} onmousedown={event => event.preventDefault()} onclick={launch}><Icon name="image" size={18} /></button>
+  <button bind:this={trigger} data-image-trigger type="button" aria-label={triggerLabel} data-tooltip={triggerLabel} 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">No image</div>{/if}
     <button bind:this={trigger} type="button" class="outlined" onclick={launch}>Choose…</button>
-    {#if value && onpick}<button type="button" class="outlined" aria-label="Remove image" title="Remove image" onclick={() => onpick?.("", "")}><Icon name="x" size={14} /></button>{/if}
+    {#if value && onpick}<button type="button" class="outlined" aria-label="Remove image" data-tooltip="Remove image" onclick={() => onpick?.("", "")}><Icon name="x" size={14} /></button>{/if}
   </div>
 {/if}
 
@@ -166,14 +166,14 @@
   <p class="hint">Repository media: public/{folder || "…"}. {writable ? "Uploads write files immediately on confirmation; content still requires Save." : "Build-time snapshot. Uploads and stock imports require the local dev server; GitHub uploads are not connected."}</p>
   <div class="media-tools">
     <div class="media-views" role="group" aria-label="Media view">
-      <button type="button" class="outlined" title="Grid view" aria-label="Grid view" aria-pressed={view === "grid"} onclick={() => setView("grid")}><Icon name="squaresFour" size={18} /></button>
-      <button type="button" class="outlined" title="List view" aria-label="List view" aria-pressed={view === "list"} onclick={() => setView("list")}><Icon name="listBullets" size={18} /></button>
+      <button type="button" class="outlined" data-tooltip="Grid view" aria-label="Grid view" aria-pressed={view === "grid"} onclick={() => setView("grid")}><Icon name="squaresFour" size={18} /></button>
+      <button type="button" class="outlined" data-tooltip="List view" aria-label="List view" aria-pressed={view === "list"} onclick={() => setView("list")}><Icon name="listBullets" size={18} /></button>
     </div>
     <div class="media-select">
       <Select ariaLabel={inline ? "Media type" : "Image format"} value={format} onchange={next => { format = String(next); }} options={inline ? [{ value: "", label: "All media items" }, ...MEDIA_CATEGORIES.map(category => ({ value: category, label: category }))] : [{ value: "", label: "All images" }, ...["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="Modified month" title="Filesystem modified month (UTC), not upload date" value={month} onchange={next => { month = String(next); }} options={[{ value: "", label: "All modified dates" }, ...months.map(date => ({ value: date, label: new Date(date + "-01T00:00:00Z").toLocaleDateString(undefined, { month: "long", year: "numeric", timeZone: "UTC" }) }))]} />
+      <Select ariaLabel="Modified month" data-tooltip="Filesystem modified month (UTC), not upload date" value={month} onchange={next => { month = String(next); }} options={[{ value: "", label: "All modified dates" }, ...months.map(date => ({ value: date, label: new Date(date + "-01T00:00:00Z").toLocaleDateString(undefined, { month: "long", year: "numeric", timeZone: "UTC" }) }))]} />
     </div>
     <button type="button" class="outlined" onclick={() => { tab = "library"; void run(); }} disabled={loading || picking}>Refresh</button>
     {#if filter || format || month}<button type="button" class="outlined" onclick={resetFilters}>Reset filters</button>{/if}
@@ -181,7 +181,7 @@
   </div>
   {#if view === "grid"}<div class="grid">
     {#each filtered as asset}
-      <figure><button type="button" class="thumb" title={asset.name} aria-pressed={librarySelection === asset.url} onclick={() => selectAsset(asset)}>{#if asset.type?.startsWith("image/")}<img src={asset.url} alt={asset.name} loading="lazy" />{:else}<span class="media-file-icon"><Icon name="listBullets" size={40} /><span>{mediaMetadata(asset.name)?.category} · {mediaMetadata(asset.name)?.extension.toUpperCase()}</span></span>{/if}</button><figcaption>{asset.name}</figcaption></figure>
+      <figure><button type="button" class="thumb" aria-label={asset.name} data-tooltip={asset.name} aria-pressed={librarySelection === asset.url} onclick={() => selectAsset(asset)}>{#if asset.type?.startsWith("image/")}<img src={asset.url} alt={asset.name} loading="lazy" />{:else}<span class="media-file-icon"><Icon name="listBullets" size={40} /><span>{mediaMetadata(asset.name)?.category} · {mediaMetadata(asset.name)?.extension.toUpperCase()}</span></span>{/if}</button><figcaption>{asset.name}</figcaption></figure>
     {/each}
   </div>
   {:else}<div class="table-card media-table"><table aria-label="Media library"><thead><tr><th scope="col">File</th><th scope="col">Type</th><th scope="col">Size</th><th scope="col">Modified (UTC)</th></tr></thead><tbody>
@@ -253,7 +253,7 @@
           {#if searched && !results.length && !error}<p class="hint" role="status">No photos found. Try another search.</p>{/if}
           <div class="grid">
             {#each results as r (r.url)}
-              <figure><button type="button" class="thumb" disabled={picking} onclick={() => selected = {url: r.url, stock: r}} title={r.credit}><img src={r.thumb} alt={r.credit} loading="lazy" /></button><figcaption>{#if r.creditURL?.startsWith("https://")}<a href={r.creditURL} target="_blank" rel="noopener noreferrer">{r.credit}</a>{:else}{r.credit}{/if}</figcaption></figure>
+              <figure><button type="button" class="thumb" disabled={picking} onclick={() => selected = {url: r.url, stock: r}} data-tooltip={r.credit}><img src={r.thumb} alt={r.credit} loading="lazy" /></button><figcaption>{#if r.creditURL?.startsWith("https://")}<a href={r.creditURL} target="_blank" rel="noopener noreferrer">{r.credit}</a>{:else}{r.credit}{/if}</figcaption></figure>
             {/each}
           </div>
         {/if}

package/src/editor/lib/MarkdownEditor.svelte

@@ -172,18 +172,18 @@
   {#if warning}<p class="markdown-warning" role="status">{warning}</p>{/if}
   <div class="markdown-visual" hidden={mode !== "visual"}>
     <div class="body-toolbar formatting-toolbar" role="group" aria-label={`${label} formatting`}>
-      <Select ariaLabel="Text style" title="Text style" value={format} options={[{ value: "paragraph", label: "Paragraph" }, ...[1, 2, 3, 4, 5, 6].map(level => ({ value: `h${level}`, label: `Heading ${level}` })), { value: "code_block", label: "Code block" }].map(option => ({ ...option, disabled: !!state && format !== option.value && !formatCommand(option.value)(state) }))} onchange={next => command(formatCommand(String(next)))} />
+      <Select ariaLabel="Text style" data-tooltip="Text style" value={format} options={[{ value: "paragraph", label: "Paragraph" }, ...[1, 2, 3, 4, 5, 6].map(level => ({ value: `h${level}`, label: `Heading ${level}` })), { value: "code_block", label: "Code block" }].map(option => ({ ...option, disabled: !!state && format !== option.value && !formatCommand(option.value)(state) }))} onchange={next => command(formatCommand(String(next)))} />
       <div class="format-group" role="group" aria-label="Text formatting">
         {#each marks as item}
-          <button type="button" aria-label={item.name} title={item.name} aria-pressed={activeMark(item.type)} disabled={!state || !toggleMark(schema.marks[item.type])(state)} onmousedown={event => event.preventDefault()} onclick={() => command(toggleMark(schema.marks[item.type]))}><Icon name={item.icon} size={18} /></button>
+          <button type="button" aria-label={item.name} data-tooltip={item.name} aria-pressed={activeMark(item.type)} disabled={!state || !toggleMark(schema.marks[item.type])(state)} onmousedown={event => event.preventDefault()} onclick={() => command(toggleMark(schema.marks[item.type]))}><Icon name={item.icon} size={18} /></button>
         {/each}
       </div>
       <div class="format-group" role="group" aria-label="Lists and quote">
         {#each blocks as item}
-          <button type="button" aria-label={item.name} title={item.name} aria-pressed={activeBlock(item.type)} disabled={!state || !blockCommand(item.type)(state)} onmousedown={event => event.preventDefault()} onclick={() => command(blockCommand(item.type))}><Icon name={item.icon} size={18} /></button>
+          <button type="button" aria-label={item.name} data-tooltip={item.name} aria-pressed={activeBlock(item.type)} disabled={!state || !blockCommand(item.type)(state)} onmousedown={event => event.preventDefault()} onclick={() => command(blockCommand(item.type))}><Icon name={item.icon} size={18} /></button>
         {/each}
       </div>
-      <button bind:this={linkButton} type="button" aria-label="Link" title="Link" aria-pressed={activeMark("link")} aria-expanded={linkOpen} aria-controls={`${id}-link`} disabled={!state || !toggleMark(schema.marks.link)(state)} onmousedown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
+      <button bind:this={linkButton} type="button" aria-label="Link" data-tooltip="Link" aria-pressed={activeMark("link")} aria-expanded={linkOpen} aria-controls={`${id}-link`} disabled={!state || !toggleMark(schema.marks.link)(state)} onmousedown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
       <ImagePicker toolbar onopen={() => { imageSelection = view?.state.selection.getBookmark(); linkOpen = false; }} onpick={insertImage} onclose={() => { imageSelection = undefined; }} />
     </div>
     {#if linkOpen}
@@ -191,9 +191,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} aria-describedby={linkError ? `${id}-error` : undefined} />
-          <button type="button" aria-label="Apply link" title="Apply link" onclick={() => link()}><Icon name="check" size={16} /></button>
-          <button type="button" aria-label="Remove link" title="Remove link" disabled={!activeMark("link")} onclick={() => link(true)}><Icon name="linkBreak" size={16} /></button>
-          <button type="button" aria-label="Close link" title="Close link" onclick={() => { linkOpen = false; linkButton.focus(); }}><Icon name="x" size={16} /></button>
+          <button type="button" aria-label="Apply link" data-tooltip="Apply link" onclick={() => link()}><Icon name="check" size={16} /></button>
+          <button type="button" aria-label="Remove link" data-tooltip="Remove link" disabled={!activeMark("link")} onclick={() => link(true)}><Icon name="linkBreak" size={16} /></button>
+          <button type="button" aria-label="Close link" data-tooltip="Close link" onclick={() => { linkOpen = false; linkButton.focus(); }}><Icon name="x" size={16} /></button>
         </div>
         {#if linkError}<p id={`${id}-error`} role="alert">{linkError}</p>{/if}
       </div>

package/src/editor/lib/SchemaField.svelte

@@ -127,10 +127,10 @@
           <span>Item {index + 1}</span>
           <span class="schema-key">{(item && typeof item === "object" ? (item as Record<string, unknown>)._key : "") ?? ""}</span>
           <div class="schema-item-actions">
-            <button type="button" aria-label={`Move ${field.label} item ${index + 1} up`} title="Move up" disabled={index === 0} onclick={() => onvalue(moveItem(itemList, index, -1))}>↑</button>
-            <button type="button" aria-label={`Move ${field.label} item ${index + 1} down`} title="Move down" disabled={index === itemList.length - 1} onclick={() => onvalue(moveItem(itemList, index, 1))}>↓</button>
-            <button type="button" aria-label={`Duplicate ${field.label} item ${index + 1}`} title="Duplicate" onclick={() => onvalue(duplicateItem(itemList, index))}>⧉</button>
-            <button type="button" aria-label={`Remove ${field.label} item ${index + 1}`} title="Remove" onclick={() => onvalue(itemList.filter((_, position) => position !== index))}>×</button>
+            <button type="button" aria-label={`Move ${field.label} item ${index + 1} up`} data-tooltip="Move up" disabled={index === 0} onclick={() => onvalue(moveItem(itemList, index, -1))}>↑</button>
+            <button type="button" aria-label={`Move ${field.label} item ${index + 1} down`} data-tooltip="Move down" disabled={index === itemList.length - 1} onclick={() => onvalue(moveItem(itemList, index, 1))}>↓</button>
+            <button type="button" aria-label={`Duplicate ${field.label} item ${index + 1}`} data-tooltip="Duplicate" onclick={() => onvalue(duplicateItem(itemList, index))}>⧉</button>
+            <button type="button" aria-label={`Remove ${field.label} item ${index + 1}`} data-tooltip="Remove" onclick={() => onvalue(itemList.filter((_, position) => position !== index))}>×</button>
           </div>
         </div>
         {#if itemSchema.length}

package/src/editor/lib/SchemaPanel.svelte

@@ -119,10 +119,10 @@
               {#if devMode}<span class="schema-key">{section._key}</span>{/if}
             </button>
             <div class="structure-actions">
-              <button type="button" aria-label={`Move ${sectionLabel(schema, section._type)} up`} title="Move up" disabled={index === 0} onclick={() => setSections(moveItem(sections, index, -1) as Record<string, unknown>[])}>↑</button>
-              <button type="button" aria-label={`Move ${sectionLabel(schema, section._type)} down`} title="Move down" disabled={index === sections.length - 1} onclick={() => setSections(moveItem(sections, index, 1) as Record<string, unknown>[])}>↓</button>
-              <button type="button" aria-label={`Duplicate ${sectionLabel(schema, section._type)}`} title="Duplicate" onclick={() => setSections(duplicateItem(sections, index) as Record<string, unknown>[])}>⧉</button>
-              <button type="button" aria-label={`Remove ${sectionLabel(schema, section._type)}`} title="Remove" onclick={() => removeSection(index)}>×</button>
+              <button type="button" aria-label={`Move ${sectionLabel(schema, section._type)} up`} data-tooltip="Move up" disabled={index === 0} onclick={() => setSections(moveItem(sections, index, -1) as Record<string, unknown>[])}>↑</button>
+              <button type="button" aria-label={`Move ${sectionLabel(schema, section._type)} down`} data-tooltip="Move down" disabled={index === sections.length - 1} onclick={() => setSections(moveItem(sections, index, 1) as Record<string, unknown>[])}>↓</button>
+              <button type="button" aria-label={`Duplicate ${sectionLabel(schema, section._type)}`} data-tooltip="Duplicate" onclick={() => setSections(duplicateItem(sections, index) as Record<string, unknown>[])}>⧉</button>
+              <button type="button" aria-label={`Remove ${sectionLabel(schema, section._type)}`} data-tooltip="Remove" onclick={() => removeSection(index)}>×</button>
             </div>
           </li>
         {/each}

package/src/editor/lib/Select.svelte

@@ -3,10 +3,11 @@
   import Icon from "./Icon.svelte";
   import type { ICONS } from "./icons";
 
-  let { label = "", ariaLabel = label, title, icon, value = "", options, multiple = false, disabled = false, onchange = () => {} }: {
+  let { label = "", ariaLabel = label, title, "data-tooltip": tooltip = title, icon, value = "", options, multiple = false, disabled = false, onchange = () => {} }: {
     label?: string;
     ariaLabel?: string;
     title?: string;
+    "data-tooltip"?: string;
     icon?: keyof typeof ICONS;
     value?: string | string[];
     options: { value: string; label: string; icon?: keyof typeof ICONS; disabled?: boolean }[];
@@ -120,7 +121,7 @@
 
 <div class="custom-select" onfocusout={() => { if (open) requestAnimationFrame(() => { if (trigger.ownerDocument.activeElement?.tagName === "IFRAME") close(); }); }}>
   {#if label}<span class="select-label" id={`${id}-label`}>{label}</span>{/if}
-  <button bind:this={trigger} type="button" class="select-trigger" class:icon-only={!!icon} role="combobox" aria-label={label ? undefined : ariaLabel} aria-labelledby={label ? `${id}-label` : undefined} aria-haspopup="listbox" aria-expanded={open} aria-controls={`${id}-list`} aria-activedescendant={open && active >= 0 ? `${id}-option-${active}` : undefined} popovertarget={`${id}-list`} {title} {disabled} onclick={event => { event.preventDefault(); menu.matches(":popover-open") ? close() : void reveal(); }} onkeydown={onkey}>
+  <button bind:this={trigger} type="button" class="select-trigger" class:icon-only={!!icon} role="combobox" aria-label={label ? undefined : ariaLabel} aria-labelledby={label ? `${id}-label` : undefined} aria-haspopup="listbox" aria-expanded={open} aria-controls={`${id}-list`} aria-activedescendant={open && active >= 0 ? `${id}-option-${active}` : undefined} popovertarget={`${id}-list`} data-tooltip={tooltip} {disabled} onclick={event => { event.preventDefault(); menu.matches(":popover-open") ? close() : void reveal(); }} onkeydown={onkey}>
     {#if icon}<Icon name={icon} size={18} />{:else}<span>{text || (multiple ? `Select ${label.toLowerCase() || "options"}…` : "Choose…")}</span><Icon name="caretDown" size={12} />{/if}
   </button>
   <select hidden aria-hidden="true" tabindex="-1" aria-label={ariaLabel} {multiple} {disabled} {value} onchange={event => { value = multiple ? Array.from(event.currentTarget.selectedOptions, option => option.value) : event.currentTarget.value; onchange(value); }}>

package/src/editor/lib/SeoGuidance.svelte

@@ -8,7 +8,7 @@
 
 {#if field === "metaTitle" || field === "description"}
   <div class="seo-length" data-seo-length={field} data-tone={tone}>
-    <div class="seo-length-track" role="meter" aria-label={`${limits.label} length`} aria-valuemin={0} aria-valuemax={Math.max(limits.max, count)} aria-valuenow={count} aria-valuetext={`${count} characters. ${status}. Recommended ${limits.min} to ${limits.max}.`} title={status}>
+    <div class="seo-length-track" role="meter" aria-label={`${limits.label} length`} aria-valuemin={0} aria-valuemax={Math.max(limits.max, count)} aria-valuenow={count} aria-valuetext={`${count} characters. ${status}. Recommended ${limits.min} to ${limits.max}.`} data-tooltip={status}>
       <span class="seo-length-fill" style:width={`${Math.min(count / limits.max * 100, 100)}%`}></span>
     </div>
     <div class="seo-length-summary hint">

package/src/editor/lib/Settings.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
   import { getKeys, setKeys, STOCK_PROVIDERS } from "./images";
   import type { RigelSettings } from "./settings";
+  import type { Manifest } from "../../manifest/types";
+  import type { GitHubAccess } from "./github-auth";
   import Icon from "./Icon.svelte";
 
-  let { s = $bindable(), error, saving, onerase, onclose }: {
+  let { s = $bindable(), github, user, error, saving, onerase, onclose }: {
     s: RigelSettings;
+    github?: Manifest["github"];
+    user?: GitHubAccess["user"];
     error: string;
     saving: boolean;
     onerase: () => void;
     onclose: () => void;
   } = $props();
 
-  type PaneId = "appearance" | "editor" | "media" | "language" | "advanced";
+  type PaneId = "appearance" | "editor" | "connection" | "media" | "language" | "advanced";
   let active: PaneId = $state("appearance");
 
   const providerIds = Object.keys(STOCK_PROVIDERS) as (keyof typeof STOCK_PROVIDERS)[];
@@ -23,6 +27,7 @@
   const panes: { id: PaneId; label: string }[] = [
     { id: "appearance", label: "Appearance" },
     { id: "editor", label: "Editor" },
+    { id: "connection", label: "Connection" },
     { id: "media", label: "Media" },
     { id: "language", label: "Language" },
     { id: "advanced", label: "Advanced" },
@@ -31,6 +36,7 @@
   const PANE_ICONS = {
     appearance: "palette",
     editor: "textB",
+    connection: "user",
     media: "image",
     language: "translate",
     advanced: "wrench",
@@ -103,6 +109,25 @@
             <label class="radio"><input type="radio" bind:group={s.userPref.editorExperience} value="inline" /><span>Inline preview</span></label>
           </fieldset>
           <p class="hint">Inline preview lets you click an article body and write directly on the page. Other fields stay in the sidebar. This preference saves in this browser; content still requires Save.</p>
+        {:else if active === "connection"}
+          <h3>Connection</h3>
+          {#if github}
+            <dl class="connection-details">
+              <dt>GitHub account</dt>
+              <dd>{#if user}{user.name ?? user.login}<small>@{user.login}</small>{:else}No GitHub account connected.{/if}</dd>
+              <dt>Repository</dt>
+              <dd>{github.repo}</dd>
+              <dt>Editing branch</dt>
+              <dd>{github.branch}</dd>
+              {#if github.publishBranch}
+                <dt>Publishing branch</dt>
+                <dd>{github.publishBranch}</dd>
+              {/if}
+            </dl>
+          {:else}
+            <p>Local mode</p>
+            <p class="hint">No GitHub account connected. Content saves to local files when you press Save.</p>
+          {/if}
         {:else if active === "media"}
 
           <section class="media-settings-section">

package/src/editor/lib/SitePreview.svelte

@@ -5,7 +5,7 @@
   import PreviewFrame from "./PreviewFrame.svelte";
   let { target, config, values, body, isNew = false, devMode = false }: { target: PreviewTarget; config: PreviewConfig; values: Record<string, unknown>; body: "" | import("../../article-body").ArticleBody; isNew?: boolean; devMode?: boolean } = $props();
 
-  const livePath = $derived(previewUrl(config, target, "live"));
+  const websitePath = $derived(previewUrl(config, target, "website"));
   const key = $derived(`${target.kind}:${target.collection ?? ""}:${target.slug}`);
   let frame: HTMLIFrameElement | undefined = $state();
   let loaded = $state(false);
@@ -39,7 +39,7 @@
 <div class="site-preview" aria-label="Website preview">
   <div class="preview-heading">
     <strong>Website preview</strong>
-    {#if livePath}<a class="icon-btn visual-live" href={livePath} target="_blank" rel="noopener noreferrer" aria-label="View live page" title="View live page"><Icon name="external" size={18} /></a>{/if}
+    {#if websitePath}<a class="icon-btn visual-live" href={websitePath} target="_blank" rel="noopener noreferrer" aria-label="Preview on website" data-tooltip="Preview on website"><Icon name="external" size={18} /></a>{/if}
   </div>
   {#if error}<p role="status" class="preview-error">{error}</p>{/if}
   {#if path}

package/src/editor/lib/TopBar.svelte

@@ -112,7 +112,7 @@
 
 <svelte:window onkeydown={onKeydown} />
 
-<button class="search-trigger" aria-label="Search content" title="Search content (⌘K)" onclick={() => { active = -1; open = true; }}>
+<button class="search-trigger" aria-label="Search content" data-tooltip="Search content (⌘K)" onclick={() => { active = -1; open = true; }}>
   <SidebarIcon name="magnifying-glass" />
   <span class="sidebar-label">Search…</span>
   <kbd>⌘K</kbd>

package/src/editor/lib/VisualEditor.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { mount, unmount, onDestroy, tick, type Snippet } from "svelte";
   import BlockEditor from "./BlockEditor.svelte";
+  import { tooltipRoot } from "./tooltip";
   import editorStyles from "../styles.css?inline";
   import type { ArticleBody } from "../../article-body";
   import { patchPreview } from "../../preview";
@@ -13,7 +14,7 @@
   import type { ContentDocument, DocumentDef, Schema } from "../../schema/types";
 
   let {
-    docId, schema, docType, values, previewValues, documents = {}, previewPath, livePath = previewPath, body = "", bodyInline = false, onbody = () => {}, properties, creating, devMode, reloadToken = 0, onchange, oneditdocument = () => {},
+    docId, schema, docType, values, previewValues, documents = {}, previewPath, websitePath, body = "", bodyInline = false, onbody = () => {}, properties, creating, devMode, reloadToken = 0, onchange, oneditdocument = () => {},
   }: {
     docId: string;
     schema?: Schema;
@@ -22,7 +23,7 @@
     previewValues?: Record<string, unknown>;
     documents?: Record<string, Record<string, unknown>>;
     previewPath: string | null;
-    livePath?: string | null;
+    websitePath?: string | null;
     body?: "" | import("../../article-body").ArticleBody;
     properties?: Snippet<[SelectedField | null, number, boolean, () => void]>;
     bodyInline?: boolean;
@@ -45,6 +46,7 @@
   let bodyContents: ChildNode[] = [];
   let bodyAttributes: [string, string | null][] = [];
   let bodyScope: HTMLElement | null = null;
+  let removeTooltips: (() => void) | undefined;
   let error = $state("");
   let mode = $state<"browse" | "edit">("edit");
   let panelOpen = $state(true);
@@ -186,6 +188,7 @@
 
   function stopBodyEdit() {
     if (!bodyEditor) return;
+    removeTooltips?.(); removeTooltips = undefined;
     void unmount(bodyEditor); bodyEditor = undefined;
     bodyThemeObserver?.disconnect(); bodyThemeObserver = undefined;
     editingBody?.replaceChildren(...bodyContents);
@@ -222,6 +225,7 @@
     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(BlockEditor, { target: host, props: { editableRoot: element, get value() { return body as ArticleBody; }, oninput: (next: ArticleBody) => onbody(next) } });
     bodyThemeObserver = new MutationObserver(syncTheme);
     bodyThemeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "data-contrast"] });
@@ -435,8 +439,8 @@
       </div>
       <span class="visual-hint">{mode === "edit" ? "Click a region to edit it. Scripts, forms and links stay disabled." : "Scripts, forms and links are disabled in this preview."}</span>
       <div class="visual-actions">
-        {#if livePath}<a class="icon-btn visual-live" href={livePath} target="_blank" rel="noopener noreferrer" aria-label="View live page" title="View live page"><Icon name="external" size={18} /></a>{/if}
-        <button type="button" class="icon-btn" aria-pressed={panelOpen} aria-label="Toggle properties panel" title="Toggle properties panel" onclick={() => (panelOpen = !panelOpen)}>
+        {#if websitePath}<a class="icon-btn visual-live" href={websitePath} target="_blank" rel="noopener noreferrer" aria-label="Preview on website" data-tooltip="Preview on website"><Icon name="external" size={18} /></a>{/if}
+        <button type="button" class="icon-btn" aria-pressed={panelOpen} aria-label="Toggle properties panel" data-tooltip="Toggle properties panel" onclick={() => (panelOpen = !panelOpen)}>
           <SidebarIcon name="square-half" />
         </button>
       </div>

package/src/editor/lib/github-auth.ts

@@ -1,5 +1,5 @@
 export interface GitHubAccess {
-  user: { login: string; avatar_url: string; html_url: string };
+  user: { login: string; name?: string; avatar_url: string; html_url: string };
   status: "ready" | "installation-required" | "read-only";
   installUrl: string;
   installation: { id: number; account: string; html_url: string } | null;
@@ -63,7 +63,7 @@ export async function checkGitHubAccess(token: string, repo: string, appSlug: st
       });
     } catch { throw new Error("Unable to reach GitHub. Check your connection and try again."); }
     if (!response.ok) {
-      if (response.status === 401) throw new Error("GitHub session expired or was revoked. Please sign in again.");
+      if (response.status === 401) throw Object.assign(new Error("GitHub session expired or was revoked. Please sign in again."), { status: 401 });
       if (response.status === 429 || (response.status === 403 && (response.headers.get("x-ratelimit-remaining") === "0" || response.headers.has("retry-after")))) throw new Error("GitHub rate limit reached. Wait a few minutes and try again.");
       if (response.status === 403) throw new Error("GitHub access denied. Check app permissions and organization approval, then sign in again.");
       if (response.status === 404) throw new Error("GitHub repository or installation is unavailable. Check the repository name and app installation, then try again.");
@@ -85,7 +85,8 @@ export async function checkGitHubAccess(token: string, repo: string, appSlug: st
   };
   const rawUser = await get("/user");
   if (!rawUser || ![rawUser.login, rawUser.avatar_url, rawUser.html_url].every(value => typeof value === "string" && value)) throw new Error("GitHub returned an invalid user. Please sign in again.");
-  const user = { login: rawUser.login, avatar_url: rawUser.avatar_url, html_url: rawUser.html_url };
+  const name = typeof rawUser.name === "string" ? rawUser.name.trim() : "";
+  const user = { login: rawUser.login, ...(name ? { name } : {}), avatar_url: rawUser.avatar_url, html_url: rawUser.html_url };
   const installUrl = `https://github.com/apps/${appSlug}/installations/new`;
   const result: GitHubAccess = { user, status: "installation-required", installUrl, installation: null, repository: null };
   type Installation = { id: number; app_slug: string; account?: { login?: string }; html_url?: string; permissions?: { contents?: string }; suspended_at?: string | null };

package/src/editor/lib/slugify.ts

@@ -1,5 +1,5 @@
-export function slugify(input: string): string {
-  return input
+export function slugify(input: string, existingSlugs: Iterable<string> = []): string {
+  const base = input
     .normalize("NFKD")
     .replace(/[̀-ͯ]/g, "") // combining marks → strip (é→e)
     .toLowerCase()
@@ -7,4 +7,9 @@ export function slugify(input: string): string {
     .replace(/[^a-z0-9]+/g, "-")
     .replace(/^-+|-+$/g, "")
     .replace(/-{2,}/g, "-");
+  if (!base) return "";
+  const existing = new Set(existingSlugs);
+  let slug = base;
+  for (let suffix = 2; existing.has(slug); suffix++) slug = `${base}-${suffix}`;
+  return slug;
 }

package/src/editor/lib/storage.ts

@@ -1,8 +1,36 @@
-export function readStorage(name: "settings" | "keys" | "mediaView"): string | null {
+type SessionConfig = { authOrigin: string; repo: string; branch: string; appSlug: string };
+type Session = { accessToken: string; expiresAt: number };
+
+function sessionScope(config: SessionConfig) {
+  return JSON.stringify([config.authOrigin, config.repo, config.branch, config.appSlug]);
+}
+
+export function clearSession() {
+  try { localStorage.removeItem("rigelcms.session"); } catch {}
+}
+
+export function readSession(config: SessionConfig): Session | null {
+  try {
+    const saved = JSON.parse(localStorage.getItem("rigelcms.session") ?? "null");
+    if (saved?.version === 1 && saved.scope === sessionScope(config)
+      && typeof saved.accessToken === "string" && /^ghu_[a-zA-Z0-9_]{1,4092}$/.test(saved.accessToken)
+      && Number.isSafeInteger(saved.expiresAt) && saved.expiresAt > Date.now() + 30_000 && saved.expiresAt <= Date.now() + 86_400_000) {
+      return { accessToken: saved.accessToken, expiresAt: saved.expiresAt };
+    }
+  } catch {}
+  clearSession();
+  return null;
+}
+
+export function writeSession(config: SessionConfig, session: Session) {
+  try { writeStorage("session", { version: 1, scope: sessionScope(config), accessToken: session.accessToken, expiresAt: session.expiresAt }); } catch {}
+}
+
+export function readStorage(name: "settings" | "keys" | "mediaView" | "session"): string | null {
   return localStorage.getItem(`rigelcms.${name}`) ?? localStorage.getItem(`rigel.${name}`);
 }
 
-export function writeStorage(name: "settings" | "keys" | "mediaView", value: unknown) {
+export function writeStorage(name: "settings" | "keys" | "mediaView" | "session", value: unknown) {
   localStorage.setItem(`rigelcms.${name}`, JSON.stringify(value));
   localStorage.removeItem(`rigel.${name}`);
 }

package/src/editor/lib/tooltip.ts

@@ -0,0 +1,120 @@
+export function tooltipPosition(rect: Pick<DOMRect, "left" | "right" | "top" | "bottom">, width: number, height: number, viewportWidth: number, viewportHeight: number) {
+  return {
+    left: Math.max(8, Math.min((rect.left + rect.right - width) / 2, viewportWidth - width - 8)),
+    top: Math.max(8, Math.min(rect.top >= height + 14 ? rect.top - height - 6 : rect.bottom + 6, viewportHeight - height - 8)),
+  };
+}
+
+let provider: ReturnType<typeof createTooltips> | undefined;
+
+export function tooltipRoot(root: HTMLElement) {
+  provider ??= createTooltips();
+  const remove = provider.register(root);
+  return { destroy: remove };
+}
+
+function createTooltips() {
+  let tip: HTMLDivElement | undefined;
+  let anchor: HTMLElement | null = null;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let opening: ReturnType<typeof setTimeout> | undefined;
+  let frame = 0;
+  let view: Window | null = null;
+  let pointerTime = 0;
+  let users = 0;
+  const id = "rigel-tooltip";
+
+  function hide() {
+    clearTimeout(timer);
+    clearTimeout(opening);
+    if (view) view.cancelAnimationFrame(frame);
+    if (anchor) {
+      const ids = (anchor.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(value => value && value !== id);
+      if (ids.length) anchor.setAttribute("aria-describedby", ids.join(" ")); else anchor.removeAttribute("aria-describedby");
+    }
+    anchor = null;
+    if (tip?.matches(":popover-open")) tip.hidePopover();
+    tip?.remove();
+  }
+
+  function update() {
+    if (!anchor || !tip || !view) return;
+    if (!anchor.isConnected || !anchor.checkVisibility() || !anchor.dataset.tooltip) { hide(); return; }
+    if (tip.textContent !== anchor.dataset.tooltip) tip.textContent = anchor.dataset.tooltip;
+    const position = tooltipPosition(anchor.getBoundingClientRect(), tip.offsetWidth, tip.offsetHeight, view.innerWidth, view.innerHeight);
+    tip.style.left = `${position.left}px`;
+    tip.style.top = `${position.top}px`;
+    frame = view.requestAnimationFrame(update);
+  }
+
+  function show(target: HTMLElement) {
+    hide();
+    if (!target.isConnected || !target.checkVisibility() || !target.dataset.tooltip) return;
+    const doc = target.ownerDocument;
+    tip ??= doc.createElement("div");
+    tip.id = id;
+    tip.className = "rigel-tooltip";
+    tip.setAttribute("role", "tooltip");
+    tip.popover = "manual";
+    anchor = target;
+    view = doc.defaultView;
+    const scope = target.closest("dialog, .rigel") ?? target.parentElement!;
+    scope.append(tip);
+    tip.textContent = target.dataset.tooltip;
+    target.setAttribute("aria-describedby", [...new Set([...(target.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean), id])].join(" "));
+    try { tip.showPopover(); update(); }
+    catch (error) {
+      if ((error as DOMException)?.name !== "InvalidStateError") throw error;
+      opening = setTimeout(() => { if (anchor !== target) return; if (!target.isConnected || !target.checkVisibility()) { hide(); return; } tip!.showPopover(); update(); }, 0);
+    }
+  }
+
+  function register(root: HTMLElement) {
+    users++;
+    const doc = root.ownerDocument;
+    const win = doc.defaultView!;
+    const target = (event: Event) => {
+      const element = (event.target as Element)?.closest?.<HTMLElement>("[data-tooltip]");
+      return element && root.contains(element) && element.closest(".rigel") ? element : null;
+    };
+    const over = (event: PointerEvent) => {
+      if (event.pointerType === "touch") return;
+      if (event.target === tip) { clearTimeout(timer); return; }
+      const element = target(event);
+      if (!element || element.contains(event.relatedTarget as Node | null) || element === anchor || element === doc.activeElement) return;
+      hide(); timer = setTimeout(() => show(element), 450);
+    };
+    const out = (event: PointerEvent) => {
+      const element = target(event);
+      if (element?.contains(event.relatedTarget as Node | null)) return;
+      if (event.relatedTarget === tip || anchor?.contains(event.relatedTarget as Node | null)) return;
+      if (anchor === doc.activeElement) return;
+      clearTimeout(timer); timer = setTimeout(hide, 150);
+    };
+    const focus = (event: FocusEvent) => {
+      const element = target(event);
+      if (element && Date.now() - pointerTime > 700) show(element);
+    };
+    const down = () => { pointerTime = Date.now(); hide(); };
+    const key = (event: KeyboardEvent) => {
+      pointerTime = 0;
+      if (event.key !== "Escape") return;
+      const visible = !!anchor;
+      hide();
+      if (visible) { event.preventDefault(); event.stopImmediatePropagation(); }
+    };
+    const listeners = [["pointerover", over], ["pointerout", out], ["focusin", focus], ["focusout", hide], ["pointerdown", down], ["click", hide], ["keydown", key]] as const;
+    for (const [name, listener] of listeners) root.addEventListener(name, listener as EventListener, true);
+    win.addEventListener("blur", hide);
+    win.addEventListener("resize", hide);
+    win.addEventListener("scroll", hide, true);
+    return () => {
+      hide();
+      for (const [name, listener] of listeners) root.removeEventListener(name, listener as EventListener, true);
+      win.removeEventListener("blur", hide); win.removeEventListener("resize", hide);
+      win.removeEventListener("scroll", hide, true);
+      if (!--users) { tip = undefined; provider = undefined; }
+    };
+  }
+  return { register };
+}

package/src/editor/styles.css

@@ -1,4 +1,7 @@
 .rigel, .rigel *, .rigel *::before, .rigel *::after { box-sizing: border-box; }
+.rigel .rigel-tooltip { position: fixed; pointer-events: auto; inset: auto; margin: 0; padding: 0.375rem 0.625rem; max-width: min(20rem, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--text); color: var(--panel); box-shadow: var(--shadow-md); font: 500 0.75rem/1.5 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; overflow-wrap: anywhere; text-align: start; white-space: normal; }
+.rigel .rigel-tooltip::backdrop { background: transparent; pointer-events: none; }
+@media (forced-colors: active) { .rigel .rigel-tooltip { background: Canvas; color: CanvasText; border-color: CanvasText; } }
 .rigel {
   --rigel-50: #EFFBFF;
   --rigel-100: #D9F4FF;
@@ -26,6 +29,9 @@
 
 .rigel.connection-shell { align-items: center; justify-content: center; padding: 1.5rem; min-height: 100dvh; }
 .rigel .connection-card { flex: none; width: 100%; max-width: 560px; margin: 0; padding: 2rem; background: var(--panel); border: 1px solid var(--border); overflow-wrap: anywhere; }
+.rigel .connection-brand { display: flex; align-items: center; gap: 0.75rem; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.04em; }
+.rigel .brand-suffix { font-weight: 450; }
+.rigel .connection-brand img { flex-shrink: 0; }
 .rigel .connection-card h1 { margin: 1rem 0; font-size: 1.75rem; line-height: 1.2; }
 .rigel .connection-card p { margin: 1rem 0; }
 .rigel .connection-card :is(button, a.primary) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.625rem 1rem; font: inherit; text-decoration: none; text-align: center; }
@@ -959,6 +965,10 @@
   font-size: 0.875rem; font-weight: 600; text-transform: none;
   letter-spacing: 0; color: var(--text); margin: 0 0 0.75rem;
 }
+.rigel .connection-details { margin: 0; }
+.rigel .connection-details dt { margin-top: 1rem; font-size: 0.75rem; font-weight: 600; color: var(--text-2); }
+.rigel .connection-details dd { margin: 0.375rem 0 0; font-size: 0.875rem; overflow-wrap: anywhere; }
+.rigel .connection-details small { display: block; margin-top: 0.125rem; color: var(--text-muted); }
 .rigel .settings-pane fieldset { border: none; padding: 0; margin: 0 0 1rem; }
 .rigel .settings-pane fieldset.accessibility-options { margin-top: 1.5rem; }
 .rigel .accessibility-options label.inline { margin-top: 0; }

package/src/preview.ts

@@ -30,8 +30,8 @@ export function previewPath(config: PreviewConfig, target: PreviewTarget, isNew
   return typeof path === "string" && /^\/(?!\/)/.test(path) && !/[\\\s?#]/.test(path) && !/%(?:2e|2f|5c)/i.test(path) && !path.split("/").some(part => part === "." || part === "..") && !/^\/rigel(?:\/|$)/.test(path) ? path : null;
 }
 
-export function previewUrl(config: PreviewConfig, target: PreviewTarget, mode: "live" | "draft" = "draft", isNew = false): string | null {
-  const path = previewPath(config, target, mode === "draft" && isNew);
+export function previewUrl(config: PreviewConfig, target: PreviewTarget, mode: "live" | "draft" | "website" = "draft", isNew = false): string | null {
+  const path = previewPath(config, target, mode === "draft" && (target.kind === "post" || isNew));
   const base = mode === "live" ? config.liveUrl : config.draftUrl;
   if (!path || base === undefined) return path;
   try { return new URL(path.slice(1), previewBaseUrl(base)).href; } catch { return null; }

package/src/routes/local-post.ts

@@ -1,5 +1,5 @@
 import type { APIRoute } from "astro";
-import { writeFile, mkdir, rm, readFile, rename } from "node:fs/promises";
+import { writeFile, mkdir, rm, readFile, rename, link } from "node:fs/promises";
 import { randomUUID } from "node:crypto";
 import path from "node:path";
 
@@ -55,7 +55,13 @@ export const POST: APIRoute = async ({ request, params }) => {
   const temporary = `${file}.${randomUUID()}.tmp`;
   try {
     await writeFile(temporary, JSON.stringify({ frontmatter: fm, body: body.body }, null, 2) + "\n", { flag: "wx" });
-    await rename(temporary, file);
+    if (request.headers.get("If-None-Match") === "*") {
+      try { await link(temporary, file); }
+      catch (error) {
+        if ((error as NodeJS.ErrnoException).code === "EEXIST") return new Response("A post with that slug already exists. Reload the collection and create the draft again.", { status: 409 });
+        throw error;
+      }
+    } else await rename(temporary, file);
   } finally { await rm(temporary, { force: true }); }
   return new Response(null, { status: 204 });
 };