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

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { fetchPreview } from "./preview-frame";
+
+  let { url, title, frame = $bindable(), reloadToken = 0, onload, onloading, onerror }: {
+    url: string;
+    title: string;
+    frame?: HTMLIFrameElement;
+    reloadToken?: number;
+    onload: () => void;
+    onloading: () => void;
+    onerror: (message: string) => void;
+  } = $props();
+  let source = $state<{ src?: string; srcdoc?: string } | null>(null);
+
+  $effect(() => {
+    const target = new URL(url, location.href);
+    void reloadToken;
+    source = null;
+    untrack(onloading);
+    const controller = new AbortController();
+    if (target.origin === location.origin) source = { src: target.href };
+    else fetchPreview(target, controller.signal).then(srcdoc => {
+      if (!controller.signal.aborted) source = { srcdoc };
+    }).catch(cause => {
+      if (!controller.signal.aborted) onerror(cause instanceof Error ? cause.message : "Preview unavailable");
+    });
+    return () => controller.abort();
+  });
+
+  function ready() {
+    const doc = frame?.contentDocument;
+    if (!doc || (source?.src && new URL(doc.URL).pathname.replace(/\/$/, "") !== new URL(source.src).pathname.replace(/\/$/, ""))) {
+      onerror("The prepared page could not be loaded. Check its URL and framing headers.");
+      return;
+    }
+    onload();
+  }
+</script>
+
+{#if source}
+  {#key source}
+  <iframe bind:this={frame} {title} sandbox="allow-same-origin" referrerpolicy="no-referrer" src={source.src} srcdoc={source.srcdoc} onload={ready}></iframe>
+  {/key}
+{/if}

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

@@ -1,12 +1,13 @@
 <script lang="ts">
   import { untrack } from "svelte";
   import Icon from "./Icon.svelte";
-  import { patchPreview, previewPath, type PreviewConfig, type PreviewTarget } from "../../preview";
+  import { patchPreview, previewUrl, type PreviewConfig, type PreviewTarget } from "../../preview";
+  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(previewPath(config, target));
+  const websitePath = $derived(previewUrl(config, target, "website"));
   const key = $derived(`${target.kind}:${target.collection ?? ""}:${target.slug}`);
-  let frame: HTMLIFrameElement;
+  let frame: HTMLIFrameElement | undefined = $state();
   let loaded = $state(false);
   let error = $state("");
   let path = $state<string | null>(null);
@@ -14,7 +15,7 @@
     void key;
     loaded = false;
     error = "";
-    path = untrack(() => previewPath(config, target, isNew));
+    path = untrack(() => previewUrl(config, target, "draft", isNew));
   });
   function patch() {
     if (!loaded || !frame?.contentDocument) return;
@@ -22,9 +23,9 @@
   }
   function onload() {
     try {
-      const doc = frame.contentDocument;
+      const doc = frame?.contentDocument;
       doc?.addEventListener("contextmenu", event => { if (!devMode) event.preventDefault(); }, true);
-      if (!doc || new URL(doc.URL).pathname !== path) throw new Error("The prepared same-origin page could not be loaded.");
+      if (!doc) throw new Error("The prepared page could not be loaded.");
       if (!doc.querySelector('[data-rigel-text], [data-rigel-richtext], [data-rigel-image]')) throw new Error("This page has no prepared Rigel anchors.");
       doc.addEventListener("click", event => event.preventDefault(), true);
       doc.addEventListener("submit", event => event.preventDefault(), true);
@@ -38,11 +39,11 @@
 <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}
-    {#key key}<iframe bind:this={frame} title="Live website draft preview" sandbox="allow-same-origin" referrerpolicy="no-referrer" src={path} {onload}></iframe>{/key}
+    {#key key}<PreviewFrame bind:frame url={path} title="Live website draft preview" {onload} onloading={() => { loaded = false; error = ""; }} onerror={(message) => { loaded = false; error = message; }} />{/key}
     <small>Prepared template · Scripts, navigation and forms disabled. Unanchored fields and lists are not previewed.</small>
   {:else}
     <p role="status">{target.kind === "menu" ? "Menu preview is not supported." : "No prepared preview URL is mapped to this content."}</p>

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";
@@ -8,11 +9,12 @@
   import SchemaPanel from "./SchemaPanel.svelte";
   import SidebarIcon from "./SidebarIcon.svelte";
   import Icon from "./Icon.svelte";
+  import PreviewFrame from "./PreviewFrame.svelte";
   import { fieldForPath, replaceAt, type SelectedField } from "./schema-edit";
   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;
@@ -21,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;
@@ -44,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);
@@ -185,6 +188,7 @@
 
   function stopBodyEdit() {
     if (!bodyEditor) return;
+    removeTooltips?.(); removeTooltips = undefined;
     void unmount(bodyEditor); bodyEditor = undefined;
     bodyThemeObserver?.disconnect(); bodyThemeObserver = undefined;
     editingBody?.replaceChildren(...bodyContents);
@@ -221,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"] });
@@ -338,7 +343,6 @@
       doc.addEventListener("mouseout", onOut, true);
       doc.addEventListener("submit", (event) => event.preventDefault(), true);
       doc.defaultView?.addEventListener("scroll", () => closeInline(), { passive: true });
-      if (previewPath && new URL(doc.URL).pathname.replace(/\/$/, "") !== previewPath.replace(/\/$/, "")) throw new Error("The prepared page could not be loaded.");
       if (!doc.querySelector(schema ? `[data-rigel-doc="${docId}"]` : "[data-rigel-text],[data-rigel-richtext],[data-rigel-image]")) throw new Error("This page isn’t set up for live editing. Changes won’t appear in this preview.");
       loaded = true;
       bodyAvailable = !schema && !!body && !!doc.querySelector('[data-rigel-richtext="$body"]');
@@ -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>
@@ -448,9 +452,7 @@
       {#if !previewPath}
         <p class="visual-error" role="status">{creating ? "New page — Save writes the file. The route renders once the site has it." : "No preview URL is mapped to this document. Use the properties panel to edit."}</p>
       {:else}
-        {#key `${previewPath}:${reloadToken}`}
-          <iframe bind:this={frame} title="Website page editor" sandbox="allow-same-origin" referrerpolicy="no-referrer" src={previewPath} onload={onLoad}></iframe>
-        {/key}
+        <PreviewFrame bind:frame url={previewPath} {reloadToken} title="Website page editor" onload={onLoad} onloading={() => { stopBodyEdit(); inline = null; loaded = false; error = ""; }} onerror={(message) => { loaded = false; error = message; }} />
       {/if}
       {#if inline}
         <input

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/github-backend.ts

@@ -2,7 +2,7 @@ import type { Manifest } from "../../manifest/types";
 import type { Selection } from "../../manifest/navigation";
 import { validateBody, type ArticleBody } from "../../article-body";
 import { validateMenu } from "../../manifest/menu";
-import { validateCollectionReferences } from "../../manifest/references";
+import { validateCollectionValues } from "../../manifest/collections";
 import { documentIndex, isPlainObject, validateDocument, validateDocumentId, validateSchema } from "../../schema/validate";
 import { applyValues, readValues } from "../../routes/serialize";
 
@@ -163,7 +163,7 @@ export async function loadManifestRemote(ctx: GitContext, blueprint: Manifest):
     for (const file of list(folder,POST_SLUG)) {
       const post = parseJson(await read(file.path));
       if (!isPlainObject(post) || !isPlainObject(post.frontmatter)) throw new Error("Invalid remote article");
-      validateBody(post.body); validateCollectionReferences(collection.fields,post.frontmatter,manifest.documents);
+      validateBody(post.body); validateCollectionValues(collection.fields,post.frontmatter,manifest.documents);
       collection.posts.push({slug:file.slug,frontmatter:post.frontmatter,body:post.body});
     }
   }
@@ -236,7 +236,7 @@ export async function saveRemoteSelection(ctx: GitContext, manifest: Manifest, s
     const folder = cfg.collections.find(c => c.name === selection.collection)?.folder;
     const collection = manifest.collections?.find(c => c.name === selection.collection);
     if (!folder || !collection) throw new Error("Unknown collection");
-    validateBody(body); validateCollectionReferences(collection.fields,values,manifest.documents ?? []);
+    validateBody(body); validateCollectionValues(collection.fields,values,manifest.documents ?? []);
     path = filePath(ctx,manifest,folder,selection.slug,"json",POST_SLUG);
     data = {frontmatter:{...values,slug:selection.slug},body};
   } else if (selection.kind === "document") {

package/src/editor/lib/preview-frame.ts

@@ -0,0 +1,29 @@
+import DOMPurify from "dompurify";
+
+export async function fetchPreview(url: URL, signal: AbortSignal): Promise<string> {
+  let response: Response;
+  try {
+    response = await fetch(url, { mode: "cors", credentials: "omit", referrerPolicy: "no-referrer", redirect: "error", signal: AbortSignal.any([signal, AbortSignal.timeout(15000)]) });
+  } catch {
+    throw new Error("Draft preview could not be fetched. Check the URL, HTTPS, CORS (Access-Control-Allow-Origin for this editor), redirects and the editor’s connect-src policy. Authentication cookies are not sent.");
+  }
+  if (!response.ok) throw new Error(`Draft preview returned HTTP ${response.status}. Check the draft deployment and mapped route.`);
+  if (!response.headers.get("content-type")?.toLowerCase().includes("text/html")) throw new Error("Draft preview did not return HTML. Check the mapped route and Content-Type header.");
+  const root = DOMPurify.sanitize(await response.text(), {
+    WHOLE_DOCUMENT: true,
+    RETURN_DOM: true,
+    ADD_TAGS: ["link"],
+    FORBID_TAGS: ["script", "base", "meta", "iframe", "object", "embed", "form"],
+    FORBID_ATTR: ["srcdoc", "action", "formaction", "autofocus"],
+  }) as HTMLElement;
+  for (const link of root.querySelectorAll("link")) {
+    if (link.getAttribute("rel")?.toLowerCase() !== "stylesheet") link.remove();
+  }
+  const head = root.querySelector("head")!;
+  const base = document.createElement("base"); base.href = url.href;
+  const policy = document.createElement("meta"); policy.httpEquiv = "Content-Security-Policy";
+  policy.content = "default-src 'none'; script-src 'none'; style-src https: http: 'unsafe-inline'; img-src https: http: data: blob:; font-src https: http: data:; media-src https: http:; connect-src 'none'; frame-src 'none'; object-src 'none'; form-action 'none'; base-uri " + url.origin;
+  const referrer = document.createElement("meta"); referrer.name = "referrer"; referrer.content = "no-referrer";
+  head.prepend(policy, referrer, base);
+  return "<!doctype html>" + root.outerHTML;
+}

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}`);
 }