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

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

@@ -13,10 +13,12 @@
   import { referenceOptions } from "../../manifest/references";
   import { isSeoField } from "../../manifest/seo";
   import type { ContentDocument } from "../../schema/types";
+  import { slugify } from "../../slugs";
 
-  let { fields, values, body, selected, focusToken, devMode, documents = [], bodyInline = false, oneditbody = () => {}, onchange, onbody }: {
+  let { fields, values, storageSlug, body, selected, focusToken, devMode, documents = [], bodyInline = false, oneditbody = () => {}, onchange, onbody }: {
     fields: CollectionField[];
     values: Record<string, unknown>;
+    storageSlug: string;
     body: ArticleBody;
     bodyInline?: boolean;
     oneditbody?: () => void;
@@ -49,7 +51,9 @@
   <div id="properties-content" role="tabpanel" aria-labelledby="properties-tab-content" hidden={tab !== "content"}>
   <section>
     <h3>Article details</h3>
-    {#each fields.filter(field => !isSeoField(field.key)) as field (field.key)}
+    <label><span>URL slug</span><input type="text" value={String(values.slug ?? storageSlug)} oninput={(event) => onchange("slug", event.currentTarget.value)} onblur={() => { if (Object.hasOwn(values, "slug")) onchange("slug", slugify(String(values.slug))); }} /></label>
+    <p class="hint">Changes the URL, not the content filename. The website route must use the slug metadata.</p>
+    {#each fields.filter(field => field.key !== "slug" && !isSeoField(field.key)) as field (field.key)}
       <div data-collection-field={field.key}>
         {#if field.type === "reference"}
           <ReferenceSelect label={field.label} value={values[field.key]} options={referenceOptions(field, documents)} multiple={field.multiple} onchange={(value) => onchange(field.key, value)} />

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { untrack } from "svelte";
+  import { tick, untrack } from "svelte";
   import { fetchPreview } from "./preview-frame";
 
   let { url, title, frame = $bindable(), reloadToken = 0, onload, onloading, onerror }: {
@@ -11,35 +11,77 @@
     onloading: () => void;
     onerror: (message: string) => void;
   } = $props();
-  let source = $state<{ src?: string; srcdoc?: string } | null>(null);
+  let source = $state<{ src?: string; srcdoc?: string; ready: (event: Event) => void; fail: () => void } | null>(null);
+  let loading = $state(true);
+  let revealed = $state(false);
 
   $effect(() => {
     const target = new URL(url, location.href);
     void reloadToken;
+    const started = performance.now();
+    const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const controller = new AbortController();
+    const { signal } = controller;
     source = null;
+    loading = true;
+    revealed = false;
     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 };
+    function fail(message = "The prepared page could not be loaded. Check its URL and framing headers.") {
+      if (signal.aborted) return;
+      controller.abort();
+      clearTimeout(timeout);
+      loading = false;
+      onerror(message);
+    }
+    const timeout = setTimeout(() => fail("The preview took too long to load. Check its URL and try again."), 20000);
+    function wait(ms: number) {
+      return new Promise<void>(resolve => {
+        const finish = () => { clearTimeout(timer); signal.removeEventListener("abort", finish); resolve(); };
+        const timer = setTimeout(finish, ms);
+        signal.addEventListener("abort", finish, { once: true });
+      });
+    }
+    async function ready(event: Event) {
+      const iframe = event.currentTarget as HTMLIFrameElement;
+      const doc = iframe.contentDocument;
+      if (signal.aborted) return;
+      if (!doc || (target.origin === location.origin && new URL(doc.URL).pathname.replace(/\/$/, "") !== target.pathname.replace(/\/$/, ""))) {
+        fail();
+        return;
+      }
+      try {
+        if (doc.fonts) await Promise.race([doc.fonts.ready.catch(() => {}), wait(200)]);
+        if (signal.aborted) return;
+        if (!reducedMotion) await wait(Math.max(0, 500 - (performance.now() - started)));
+        if (signal.aborted || iframe !== frame) return;
+        onload();
+        await tick();
+        if (signal.aborted || iframe !== frame) return;
+        clearTimeout(timeout);
+        loading = false;
+        revealed = true;
+      } catch (cause) {
+        fail(cause instanceof Error ? cause.message : "Preview unavailable");
+      }
+    }
+    const handlers = { ready, fail: () => fail() };
+    if (target.origin === location.origin) source = { src: target.href, ...handlers };
+    else fetchPreview(target, signal).then(srcdoc => {
+      if (!signal.aborted) source = { srcdoc, ...handlers };
     }).catch(cause => {
-      if (!controller.signal.aborted) onerror(cause instanceof Error ? cause.message : "Preview unavailable");
+      fail(cause instanceof Error ? cause.message : "Preview unavailable");
     });
-    return () => controller.abort();
+    return () => { controller.abort(); clearTimeout(timeout); };
   });
-
-  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}
+<div class="preview-frame" aria-busy={loading}>
+  {#if source}
+    {#key source}
+      <iframe bind:this={frame} {title} sandbox="allow-same-origin" referrerpolicy="no-referrer" src={source.src} srcdoc={source.srcdoc} onload={source.ready} onerror={source.fail} class:revealed inert={!revealed} aria-hidden={!revealed}></iframe>
+    {/key}
+  {/if}
+  {#if loading}
+    <div class="preview-loading" role="status"><span class="preview-spinner" aria-hidden="true"></span>Loading preview…</div>
+  {/if}
+</div>

package/src/editor/lib/PublishDialog.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import Icon from "./Icon.svelte";
+  import type { PublishReview } from "./github-backend";
+  let { review, loading, busy, error, message, onrefresh, onconfirm, onclose }: {
+    review: PublishReview | null; loading: boolean; busy: boolean; error: string; message: string;
+    onrefresh: () => void; onconfirm: () => void; onclose: () => void;
+  } = $props();
+  let dialog: HTMLDialogElement;
+  let cancel: HTMLButtonElement;
+  $effect(() => {
+    dialog.showModal();
+    cancel.focus();
+    return () => dialog.close();
+  });
+</script>
+
+<dialog bind:this={dialog} class="rigel rigel-modal-backdrop publish-dialog" aria-labelledby="publish-title" aria-describedby="publish-description" oncancel={(event) => { event.preventDefault(); if (!busy) onclose(); }}>
+  <form class="rigel-modal" onsubmit={(event) => { event.preventDefault(); onconfirm(); }} aria-busy={loading || busy}>
+    <div class="publish-head"><h2 id="publish-title">Publish saved changes</h2><button type="button" class="icon-btn" aria-label="Close publish review" disabled={busy} onclick={onclose}><Icon name="x" size={16} /></button></div>
+    <p id="publish-description">Publish includes <strong>all saved changes on the drafts branch</strong>, including files outside CMS content folders. Unsaved edits are never included or saved automatically.</p>
+    {#if loading}<p role="status">Loading the complete file review…</p>{/if}
+    {#if review}
+      <p><strong>{review.repo}</strong><br /><span class="publish-branch">{review.branch}</span> to <span class="publish-branch">{review.publishBranch}</span>, as one squash commit.</p>
+      {#if review.needsSync}
+        <p>The publishing branch has changes not in drafts, including earlier squash publishes. First, explicitly sync it into drafts using GitHub’s normal merge. This does not publish. Conflicts stop the sync. Then review the updated files again before publishing.</p>
+        <p>These are the current tree differences, not the final publish list:</p>
+      {/if}
+      <p id="publish-file-count"><strong>{review.files.length} {review.files.length === 1 ? "file" : "files"}</strong></p>
+      {#if review.files.length}
+        <ul class="publish-files" tabindex="0" aria-label="All changed files" aria-describedby="publish-file-count">
+          {#each review.files as file (file.filename)}
+            <li><span class="publish-file-status">{file.status}</span><span>{file.filename}{#if file.previous_filename}<small>Previously: {file.previous_filename}</small>{/if}</span></li>
+          {/each}
+        </ul>
+      {:else}<p>No saved changes to publish. The branch trees are identical.</p>{/if}
+      <p class="hint">Both branch revisions are checked again before publishing. GitHub pins the draft revision, but cannot atomically lock the target revision; a target update in the final instant can still race. Required checks, reviews and branch protections apply.</p>
+    {/if}
+    {#if error}<p class="error" role="alert">{error}</p>{/if}
+    {#if message}<p role="status">{message}</p>{/if}
+    <div class="publish-actions">
+      <button type="button" bind:this={cancel} class="outlined" disabled={busy} onclick={onclose}>{message ? "Close" : "Cancel"}</button>
+      {#if !message}<button type="button" class="outlined" disabled={loading || busy} onclick={onrefresh}>Review again</button>{/if}
+      {#if review && !message}<button id="confirm-publish" type="submit" class="primary" disabled={loading || busy || !review.files.length}>{busy ? "Working…" : review.needsSync ? "Sync drafts first" : "Confirm publish"}</button>{/if}
+    </div>
+  </form>
+</dialog>
+
+<style>
+  .publish-dialog { box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 1rem; border: none; color: var(--text); }
+  .publish-dialog:not([open]) { display: none; }
+  .publish-dialog::backdrop { background: transparent; }
+  .publish-dialog .rigel-modal { box-sizing: border-box; width: min(42rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; overflow-wrap: anywhere; }
+  .publish-head, .publish-actions { display: flex; align-items: center; gap: 0.75rem; }
+  .publish-head { justify-content: space-between; }
+  .publish-actions { justify-content: flex-end; flex-wrap: wrap; margin-top: 1.5rem; }
+  .publish-dialog button { min-height: 44px; }
+  .publish-head .icon-btn { min-width: 44px; }
+  .publish-branch { font-weight: 600; }
+  .publish-files { list-style: none; margin: 0; padding: 0; max-height: min(35dvh, 20rem); overflow-y: auto; border: 1px solid var(--border); }
+  .publish-files li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.625rem; border-bottom: 1px solid var(--border); font-size: 0.8125rem; }
+  .publish-files li:last-child { border-bottom: none; }
+  .publish-files small { display: block; margin-top: 0.25rem; }
+  .publish-file-status { text-transform: capitalize; }
+  button:disabled { opacity: 0.5; cursor: not-allowed; }
+</style>

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

@@ -19,6 +19,7 @@
   import { resolvePath } from "../../schema/paths";
   import { isSeoField } from "../../manifest/seo";
   import type { ContentDocument, DocumentDef, Schema } from "../../schema/types";
+  import { slugify } from "../../slugs";
 
   let {
     schema, docType, values, docId, selected, creating, pending, documents, focusToken, devMode, onchange, onselect, oneditdocument,
@@ -46,7 +47,7 @@
   const selectedField = $derived(selected?.docId === docId ? fieldForPath(schema, docType, values, selected.path) : null);
   const selectedSection = $derived(selected?.sectionKey ? sectionTypeDef(schema, sections.find((section) => section._key === selected?.sectionKey)?._type) : undefined);
   const selectedValue = $derived(selected && selectedField ? resolvePath(values, selected.path).value : undefined);
-  const docFields = $derived(docType.fields.filter((field) => field.key !== "sections"));
+  const docFields = $derived(docType.fields.filter((field) => field.key !== "sections" && (docType.shared || field.key !== "slug")));
   const seoFields = $derived(docType.shared ? [] : docFields.filter(field => isSeoField(field.key)));
 
   $effect(() => {
@@ -97,6 +98,10 @@
   {#if seoFields.length}<PropertiesTabs bind:tab />{/if}
   <section class="document-properties" hidden={tab !== "content"}>
     <h3>{docType.shared ? "Content" : "Page properties"}</h3>
+    {#if !docType.shared}
+      <label><span>URL slug</span><input type="text" value={String(values.slug ?? docId.slice(docType.name.length + 1))} oninput={(event) => onchange({ ...values, slug: event.currentTarget.value })} onblur={() => { if (Object.hasOwn(values, "slug")) onchange({ ...values, slug: slugify(String(values.slug)) }); }} /></label>
+      <p class="hint">Changes the URL, not the document identifier or filename. The website route must use the slug metadata.</p>
+    {/if}
     {#each docFields.filter(field => docType.shared || !isSeoField(field.key)) as field (field.key)}
       <div data-schema-path={field.key}>
         <SchemaField {schema} {documents} {devMode} {field} base={field.key} value={values[field.key]} onvalue={(next) => onchange(replaceAt(values, field.key, next))} />
@@ -119,10 +124,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>