@rigel-cms/rigel 0.0.0-stage → 0.1.3-beta.1

package/src/editor/lib/SchemaPanel.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+  import SchemaField from "./SchemaField.svelte";
+  import Icon from "./Icon.svelte";
+  import PropertiesTabs from "./PropertiesTabs.svelte";
+  import SeoGuidance from "./SeoGuidance.svelte";
+  import Select from "./Select.svelte";
+  import { tick } from "svelte";
+  import {
+    blankItem,
+    duplicateItem,
+    fieldForPath,
+    moveItem,
+    replaceAt,
+    sectionLabel,
+    sectionList,
+    sectionTypeDef,
+    type SelectedField,
+  } from "./schema-edit";
+  import { resolvePath } from "../../schema/paths";
+  import { isSeoField } from "../../manifest/seo";
+  import type { ContentDocument, DocumentDef, Schema } from "../../schema/types";
+
+  let {
+    schema, docType, values, docId, selected, creating, pending, documents, focusToken, devMode, onchange, onselect, oneditdocument,
+  }: {
+    schema: Schema;
+    docType: DocumentDef;
+    values: Record<string, unknown>;
+    docId: string;
+    selected: SelectedField | null;
+    creating: boolean;
+    pending: string[];
+    documents: ContentDocument[];
+    focusToken: number;
+    devMode: boolean;
+    onchange: (next: Record<string, unknown>) => void;
+    onselect: (next: SelectedField | null) => void;
+    oneditdocument: (id: string) => void;
+  } = $props();
+
+  let host: HTMLDivElement;
+  let tab = $state<"content" | "seo">("content");
+  let addType = $state("");
+  const sections = $derived(sectionList(values));
+  const allowedTypes = $derived(schema.objects.filter((object) => object.type === "section"));
+  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 seoFields = $derived(docType.shared ? [] : docFields.filter(field => isSeoField(field.key)));
+
+  $effect(() => {
+    void focusToken;
+    const path = selected?.docId === docId ? selected.path : "";
+    const sectionKey = selected?.docId === docId ? selected.sectionKey : undefined;
+    tab = "content";
+    if (!focusToken || !host) return;
+    let cancelled = false;
+    void tick().then(() => {
+      if (cancelled) return;
+      const properties = host.querySelector(sectionKey ? ".section-properties" : ".document-properties");
+      const field = [...properties?.querySelectorAll<HTMLElement>("[data-schema-path]") ?? []].find((element) => element.dataset.schemaPath === path);
+      const scope = field ?? properties;
+      const target = scope?.querySelector<HTMLElement>('[contenteditable="true"]')
+        ?? scope?.querySelector<HTMLElement>('button[role="combobox"], input:not([type="hidden"]), textarea')
+        ?? scope?.querySelector<HTMLElement>('button:not(:disabled)');
+      target?.focus();
+      target?.scrollIntoView({ block: "nearest" });
+    });
+    return () => { cancelled = true; };
+  });
+
+  function setSections(next: Record<string, unknown>[]) {
+    onchange({ ...values, sections: next });
+  }
+
+  function addSection() {
+    const def = schema.objects.find((object) => object.name === addType && object.type === "section");
+    if (!def) return;
+    const section = blankItem(def.fields);
+    section._type = addType;
+    setSections([...sections, section]);
+    onselect({ docId, path: "", sectionKey: String(section._key) });
+    addType = "";
+  }
+
+  function removeSection(index: number) {
+    setSections(sections.filter((_, position) => position !== index));
+  }
+</script>
+
+<div class="schema-panel" bind:this={host}>
+  {#if docType.shared}
+    <p class="shared-badge"><Icon name="info" size={12} /> {docType.demo ? "Field examples for testing. These values are separate from your website settings." : "Shared content. Changes appear on every page that references it."}</p>
+  {/if}
+  <div class:page-properties-header={!docType.shared}>
+  {#if seoFields.length}<PropertiesTabs bind:tab />{/if}
+  <section class="document-properties" hidden={tab !== "content"}>
+    <h3>{docType.shared ? "Content" : "Page properties"}</h3>
+    {#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))} />
+      </div>
+    {/each}
+  </section>
+  </div>
+  <div id="properties-content" role={seoFields.length ? "tabpanel" : undefined} aria-labelledby={seoFields.length ? "properties-tab-content" : undefined} hidden={tab !== "content"}>
+  {#if creating}
+    <p class="panel-note">New page. Save writes the JSON file; the route appears once the site has the file.</p>
+  {/if}
+  {#if sections.length || values.sections !== undefined}
+    <section>
+      <h3>Structure</h3>
+      <ul class="structure-list">
+        {#each sections as section, index (section._key)}
+          <li class:active={selected?.sectionKey === section._key}>
+            <button type="button" class="structure-row" onclick={() => onselect({ docId, path: "", sectionKey: String(section._key) })}>
+              <span>{sectionLabel(schema, section._type)}</span>
+              {#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>
+            </div>
+          </li>
+        {/each}
+      </ul>
+      <div class="add-section">
+        <Select ariaLabel="Section type to add" value={addType} onchange={next => { addType = String(next); }} options={[{ value: "", label: "Choose a section…" }, ...allowedTypes.map(type => ({ value: type.name, label: type.title }))]} />
+        <button type="button" class="outlined" disabled={!addType} onclick={addSection}>Add section</button>
+      </div>
+      {#if pending.length}<p class="panel-note" role="status">{pending.length} new section{pending.length === 1 ? "" : "s"} will appear after Save.</p>{/if}
+    </section>
+  {/if}
+
+  {#if selectedSection || (selectedField && selected?.path.includes("."))}
+  <section class="section-properties">
+    <h3>Section properties</h3>
+    {#if selectedSection && selected?.sectionKey}
+      <p class="selected-path">{selectedField ? `${selectedField.label} · ` : ""}{selectedSection.title}</p>
+      {#each selectedSection.fields as field (field.key)}
+        {@const reference = field.type === "reference" ? sections.find((section) => section._key === selected?.sectionKey)?.[field.key] as { _ref?: string } | undefined : undefined}
+        <div data-schema-path={`sections.${selected.sectionKey}.${field.key}`}>
+          <SchemaField
+            {schema}
+            {documents}
+            {devMode}
+            {field}
+            base={`sections.${selected.sectionKey}.${field.key}`}
+            value={sections.find((section) => section._key === selected?.sectionKey)?.[field.key]}
+            onvalue={(next) => onchange(replaceAt(values, `sections.${selected!.sectionKey}.${field.key}`, next))}
+          />
+          {#if reference?._ref && documents.some((doc) => doc.id === reference._ref)}
+            <button type="button" class="outlined" onclick={() => oneditdocument(reference._ref!)}>Edit {field.label.toLowerCase()} ↗</button>
+          {/if}
+        </div>
+      {/each}
+    {:else if selectedField && selected}
+      <p class="selected-path">{selectedField.label}{selected.sectionKey ? ` · ${sectionLabel(schema, sections.find((section) => section._key === selected.sectionKey)?._type)}` : ""}</p>
+      <SchemaField
+        {schema}
+        {documents}
+        {devMode}
+        field={selectedField}
+        base={selected.path}
+        value={selectedValue}
+        onvalue={(next) => onchange(replaceAt(values, selected.path, next))}
+      />
+
+    {/if}
+  </section>
+  {/if}
+  </div>
+  {#if seoFields.length}
+    <div id="properties-seo" role="tabpanel" aria-labelledby="properties-tab-seo" hidden={tab !== "seo"}>
+    <section class="seo-fields">
+      <h3>SEO</h3>
+      {#each seoFields 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))} />
+          <SeoGuidance field={field.key} value={values[field.key]} />
+        </div>
+      {/each}
+    </section>
+    </div>
+  {/if}
+</div>

package/src/editor/lib/Select.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import { tick } from "svelte";
+  import Icon from "./Icon.svelte";
+  import type { ICONS } from "./icons";
+
+  let { label = "", ariaLabel = label, title, icon, value = "", options, multiple = false, disabled = false, onchange = () => {} }: {
+    label?: string;
+    ariaLabel?: string;
+    title?: string;
+    icon?: keyof typeof ICONS;
+    value?: string | string[];
+    options: { value: string; label: string; icon?: keyof typeof ICONS; disabled?: boolean }[];
+    multiple?: boolean;
+    disabled?: boolean;
+    onchange?: (value: string | string[]) => void;
+  } = $props();
+  const id = $props.id();
+  let trigger: HTMLButtonElement;
+  let menu: HTMLDivElement;
+  let open = $state(false);
+  let active = $state(-1);
+  let placement = $state("");
+  let search = "";
+  let lastKey = 0;
+  const selected = $derived(Array.isArray(value) ? value : [value]);
+  const text = $derived(options.filter(option => selected.includes(option.value)).map(option => option.label).join(", "));
+
+  function position() {
+    if (!open || !trigger || !menu) return;
+    const { innerWidth, innerHeight } = trigger.ownerDocument.defaultView!;
+    const rect = trigger.getBoundingClientRect();
+    const below = innerHeight - rect.bottom - 8;
+    const above = rect.top - 8;
+    const upward = below < 160 && above > below;
+    const height = Math.min(280, upward ? above : below);
+    const width = Math.min(Math.max(rect.width, 160), innerWidth - 16);
+    const left = Math.max(8, Math.min(rect.left, innerWidth - width - 8));
+    const top = upward ? Math.max(8, rect.top - Math.min(menu.scrollHeight + 2, height) - 4) : rect.bottom + 4;
+    placement = `left:${left}px;top:${top}px;width:${width}px;max-height:${Math.max(32, height)}px`;
+  }
+
+  function close() {
+    if (menu?.matches(":popover-open")) menu.hidePopover();
+    open = false;
+  }
+
+  async function reveal(last = false) {
+    if (disabled) return;
+    active = options.findIndex(option => !option.disabled && selected.includes(option.value));
+    if (active < 0) active = last ? options.map((option, index) => option.disabled ? -1 : index).filter(index => index >= 0).at(-1) ?? -1 : options.findIndex(option => !option.disabled);
+    open = true;
+    search = "";
+    menu.showPopover();
+    await tick();
+    position();
+    await tick();
+    position();
+    menu.querySelector(`#${CSS.escape(id)}-option-${active}`)?.scrollIntoView({ block: "nearest" });
+  }
+
+  function choose(index: number) {
+    const option = options[index];
+    if (!option || option.disabled) return;
+    active = index;
+    value = multiple ? selected.includes(option.value) ? selected.filter(item => item !== option.value) : [...selected, option.value] : option.value;
+    if (!multiple) close();
+    trigger.focus({ preventScroll: true });
+    onchange(value);
+  }
+
+  async function onkey(event: KeyboardEvent) {
+    const expanded = menu.matches(":popover-open");
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault();
+      if (!expanded) await reveal(event.key === "ArrowUp" || event.key === "End");
+      if (expanded || event.key === "Home" || event.key === "End") {
+        const enabled = options.map((option, index) => option.disabled ? -1 : index).filter(index => index >= 0);
+        const current = enabled.indexOf(active);
+        active = (event.key === "Home" ? enabled[0] : event.key === "End" ? enabled.at(-1) : enabled[(current + (event.key === "ArrowDown" ? 1 : -1) + enabled.length) % enabled.length]) ?? -1;
+      }
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (expanded) choose(active); else await reveal();
+    } else if (event.key === "Escape" && expanded) {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+    } else if (event.key === "Tab") close();
+    else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      event.preventDefault();
+      if (!expanded) await reveal();
+      search = event.timeStamp - lastKey > 700 ? event.key : search + event.key;
+      lastKey = event.timeStamp;
+      let match = options.findIndex((option, index) => index > active && !option.disabled && option.label.toLocaleLowerCase().startsWith(search.toLocaleLowerCase()));
+      if (match < 0) match = options.findIndex(option => !option.disabled && option.label.toLocaleLowerCase().startsWith(search.toLocaleLowerCase()));
+      if (match >= 0) active = match;
+    } else return;
+    await tick();
+    menu.querySelector(`#${CSS.escape(id)}-option-${active}`)?.scrollIntoView({ block: "nearest" });
+  }
+
+  $effect(() => {
+    void options;
+    if (disabled) close();
+  });
+
+  $effect(() => {
+    if (!open) return;
+    const observer = new ResizeObserver(position);
+    observer.observe(trigger);
+    observer.observe(menu);
+    const dialog = trigger.closest("dialog");
+    if (dialog) observer.observe(dialog);
+    const view = trigger.ownerDocument.defaultView!;
+    const scroll = (event: Event) => { if (!(event.target as Node)?.nodeType || !menu.contains(event.target as Node)) position(); };
+    view.addEventListener("resize", position); view.addEventListener("scroll", scroll, true);
+    return () => { observer.disconnect(); view.removeEventListener("resize", position); view.removeEventListener("scroll", scroll, true); };
+  });
+</script>
+
+<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}>
+    {#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); }}>
+    {#each options as option (option.value)}<option value={option.value} disabled={option.disabled}>{option.label}</option>{/each}
+  </select>
+  <div bind:this={menu} id={`${id}-list`} class="select-menu" popover="auto" role="listbox" aria-label={ariaLabel} aria-multiselectable={multiple || undefined} style={placement} ontoggle={event => { open = event.currentTarget.matches(":popover-open"); }} onkeydown={onkey}>
+    {#each options as option, index (option.value)}
+      <div id={`${id}-option-${index}`} class="select-option" class:active={active === index} role="option" tabindex="-1" aria-selected={selected.includes(option.value)} aria-disabled={option.disabled || undefined} onpointermove={() => { if (!option.disabled) active = index; }} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); choose(index); }}>
+        {#if option.icon}<Icon name={option.icon} size={16} />{/if}
+        <span>{option.label}</span><span class="select-check" aria-hidden="true">{selected.includes(option.value) ? "✓" : ""}</span>
+      </div>
+    {/each}
+    {#if !options.length}<p class="select-empty">No options available.</p>{/if}
+  </div>
+</div>

package/src/editor/lib/SeoGuidance.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  let { field, value }: { field: string; value: unknown } = $props();
+  const limits = $derived(field === "metaTitle" ? { min: 50, max: 60, label: "SEO title" } : { min: 120, max: 160, label: "SEO description" });
+  const count = $derived(typeof value === "string" ? [...value].length : 0);
+  const status = $derived(!count ? "Not set" : count < limits.min ? "Too short" : count > limits.max ? "Too long" : "Recommended length");
+  const tone = $derived(!count ? "empty" : count > limits.max || count < limits.min / 2 ? "danger" : count < limits.min ? "warning" : "success");
+</script>
+
+{#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}>
+      <span class="seo-length-fill" style:width={`${Math.min(count / limits.max * 100, 100)}%`}></span>
+    </div>
+    <div class="seo-length-summary hint">
+      <span>Recommended: {limits.min}–{limits.max} characters.</span>
+      <span class="seo-length-count" aria-hidden="true">{count}/{limits.max}</span>
+    </div>
+  </div>
+{:else if field === "ogImage"}
+  <p class="hint">Recommended size: 1200 × 628 px.</p>
+{/if}

package/src/editor/lib/Settings.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { getKeys, setKeys, STOCK_PROVIDERS } from "./images";
+  import type { RigelSettings } from "./settings";
+  import Icon from "./Icon.svelte";
+
+  let { s = $bindable(), error, saving, onerase, onclose }: {
+    s: RigelSettings;
+    error: string;
+    saving: boolean;
+    onerase: () => void;
+    onclose: () => void;
+  } = $props();
+
+  type PaneId = "appearance" | "editor" | "media" | "language" | "advanced";
+  let active: PaneId = $state("appearance");
+
+  const providerIds = Object.keys(STOCK_PROVIDERS) as (keyof typeof STOCK_PROVIDERS)[];
+  let keys = $state(getKeys());
+  let revealed = $state<Partial<Record<keyof typeof STOCK_PROVIDERS, boolean>>>({});
+  let keysError = $state("");
+  let eraseError = $state("");
+
+  const panes: { id: PaneId; label: string }[] = [
+    { id: "appearance", label: "Appearance" },
+    { id: "editor", label: "Editor" },
+    { id: "media", label: "Media" },
+    { id: "language", label: "Language" },
+    { id: "advanced", label: "Advanced" },
+  ];
+
+  const PANE_ICONS = {
+    appearance: "palette",
+    editor: "textB",
+    media: "image",
+    language: "translate",
+    advanced: "wrench",
+  } as const;
+
+  $effect(() => {
+    try {
+      setKeys(Object.fromEntries(providerIds.map((id) => [id, keys[id]?.trim() || undefined])));
+      keysError = "";
+    } catch {
+      keysError = "API keys could not be saved in this browser. Allow browser storage and try again.";
+    }
+  });
+</script>
+
+<div
+  class="rigel-modal-backdrop rigel"
+  role="presentation"
+  onclick={onclose}
+  onkeydown={(e) => e.key === "Escape" && onclose()}
+>
+  <div class="rigel-modal settings-modal" role="dialog" aria-label="Settings" onclick={(e) => e.stopPropagation()}>
+    <div class="settings-head">
+      <h2>Settings</h2>
+      <button class="close" onclick={onclose} aria-label="Close">
+        <Icon name="x" size={14} weight="bold" />
+      </button>
+    </div>
+    <div class="settings-body">
+      <nav class="settings-nav">
+        {#each panes as p (p.id)}
+          <button
+            class:active={active === p.id}
+            onclick={() => (active = p.id)}
+          >
+            <span class="pico"><Icon name={PANE_ICONS[p.id]} size={24} /></span>
+            {p.label}
+          </button>
+        {/each}
+      </nav>
+
+      <div class="settings-pane">
+        {#if active === "appearance"}
+          <h3>Appearance</h3>
+          <fieldset>
+            <legend>Theme</legend>
+            <div class="theme-options">
+              {#each ["system", "light", "dark"] as const as t}
+                <label class="theme-option">
+                  <input type="radio" bind:group={s.theme} value={t} />
+                  <span>{t[0].toUpperCase() + t.slice(1)}</span>
+                </label>
+              {/each}
+            </div>
+          </fieldset>
+          <fieldset class="accessibility-options">
+            <legend>Accessibility</legend>
+            <label class="inline">
+              <input type="checkbox" role="switch" class="switch" bind:checked={s.highContrast} aria-describedby="high-contrast-hint" />
+              <span>High contrast mode</span>
+            </label>
+            <p class="hint" id="high-contrast-hint">Stronger text and borders in both light and dark themes.</p>
+          </fieldset>
+
+        {:else if active === "editor"}
+          <h3>Editor experience</h3>
+          <fieldset>
+            <legend>Article body editing</legend>
+            <label class="radio"><input type="radio" bind:group={s.userPref.editorExperience} value="sidebar" /><span>Sidebar</span></label>
+            <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 === "media"}
+
+          <section class="media-settings-section">
+            <h3>Stock Photo Service API Keys</h3>
+            <p class="hint">Manage API keys for stock photo services. Keys save automatically in this browser only.</p>
+            {#each providerIds as id (id)}
+              {@const provider = STOCK_PROVIDERS[id]}
+              {@const keyLabel = `${provider.label} ${id === "unsplash" ? "Access Key" : "API key"}`}
+              {@const invalid = !!keys[id]?.trim() && !new RegExp(`^${provider.pattern}$`).test(keys[id]!.trim())}
+              <div class="stock-key">
+                <div class="stock-key-head">
+                  <h4><label for={`rigel-key-${id}`}>{keyLabel}</label></h4>
+                  <a href={provider.keyURL} target="_blank" rel="noopener noreferrer">Get {id === "unsplash" ? "Access Key" : "API key"}</a>
+                </div>
+                <div class="secret-input">
+                  <input
+                    id={`rigel-key-${id}`}
+                    type={revealed[id] ? "text" : "password"}
+                    bind:value={keys[id]}
+                    placeholder={provider.placeholder}
+                    autocomplete="off"
+                    spellcheck={false}
+                    aria-label={keyLabel}
+                    aria-invalid={invalid}
+                    aria-describedby={invalid ? `rigel-key-${id}-error` : undefined}
+                  />
+                  <button type="button" aria-label={`${revealed[id] ? "Hide" : "Show"} ${keyLabel}`} aria-controls={`rigel-key-${id}`} aria-pressed={revealed[id] ?? false} onclick={() => revealed[id] = !revealed[id]}>
+                    <Icon name={revealed[id] ? "eyeSlash" : "eye"} size={18} />
+                  </button>
+                </div>
+                {#if invalid}<p class="error" id={`rigel-key-${id}-error`}>Check the {keyLabel} format.</p>{/if}
+              </div>
+            {/each}
+
+          </section>
+
+        {:else if active === "language"}
+          <h3>Language</h3>
+          <fieldset>
+            <legend>Editor interface language</legend>
+            {#each ["en", "es", "ru"] as const as lang}
+              <label class="radio">
+                <input type="radio" bind:group={s.language} value={lang} />
+                <span>{{ en: "English", es: "Español", ru: "Русский" }[lang]}{lang !== "en" ? " (soon)" : ""}</span>
+              </label>
+            {/each}
+          </fieldset>
+          <p class="hint">English is the only shipped locale today.</p>
+
+        {:else}
+          <h3>Developer Mode</h3>
+          <label class="inline">
+            <input type="checkbox" role="switch" class="switch" bind:checked={s.devMode} />
+            <span>Enable dev mode</span>
+          </label>
+          <p class="hint">Shows raw JSON of the current draft + field keys next to labels.</p>
+          <div class="clear-data">
+            <h3>Clear Data</h3>
+            <p class="hint">Rigel does not currently store file contents or thumbnails in a persistent browser cache.</p>
+            <button type="button" class="danger-btn" disabled>Clear File Cache</button>
+            <p class="hint">Erase Rigel settings, API keys and unsaved drafts from this browser. Files already saved to your repository are not affected.</p>
+            <button type="button" class="danger-btn" disabled={saving} onclick={() => {
+              eraseError = "";
+              try { onerase(); }
+              catch { eraseError = "Could not erase browser data. Check browser storage permissions and try again."; }
+            }}>Erase All Data</button>
+            {#if saving}<p class="hint" role="status">Wait for the current save to finish.</p>{/if}
+            {#if eraseError}<p class="error" role="alert">{eraseError}</p>{/if}
+          </div>
+        {/if}
+
+        {#if error || keysError}
+          <p class="error" role="alert">{error || keysError}</p>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>

package/src/editor/lib/Shortcuts.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  let { onclose }: { onclose: () => void } = $props();
+
+  const rows: [string, string][] = [
+    ["Search", "⌘/Ctrl + K"],
+    ["Close dialog", "Esc"],
+  ];
+</script>
+
+<div
+  class="rigel-modal-backdrop rigel"
+  role="presentation"
+  onclick={onclose}
+  onkeydown={(e) => e.key === "Escape" && onclose()}
+>
+  <div class="rigel-modal" role="dialog" aria-label="Keyboard shortcuts" onclick={(e) => e.stopPropagation()}>
+    <h2>Keyboard shortcuts</h2>
+    <table class="keys">
+      <tbody>
+        {#each rows as [action, key]}
+          <tr>
+            <td>{action}</td>
+            <td><kbd>{key}</kbd></td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>

package/src/editor/lib/SidebarIcon.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { isSidebarIconPath } from "../../manifest/navigation";
+  let { name }: { name: string } = $props();
+  const assets = import.meta.glob<string>("../assets/sidebar/*.svg", { eager: true, query: "?url&no-inline", import: "default" });
+  const url = $derived(isSidebarIconPath(name) ? name : assets[`../assets/sidebar/${name}.svg`] ?? assets["../assets/sidebar/squares-four.svg"]);
+</script>
+
+<span class="sidebar-asset-icon" aria-hidden="true" style={`--sidebar-icon: url("${url}")`}></span>

package/src/editor/lib/SitePreview.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import Icon from "./Icon.svelte";
+  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(previewUrl(config, target, "live"));
+  const key = $derived(`${target.kind}:${target.collection ?? ""}:${target.slug}`);
+  let frame: HTMLIFrameElement | undefined = $state();
+  let loaded = $state(false);
+  let error = $state("");
+  let path = $state<string | null>(null);
+  $effect(() => {
+    void key;
+    loaded = false;
+    error = "";
+    path = untrack(() => previewUrl(config, target, "draft", isNew));
+  });
+  function patch() {
+    if (!loaded || !frame?.contentDocument) return;
+    patchPreview(frame.contentDocument, JSON.parse(JSON.stringify(values)), body);
+  }
+  function onload() {
+    try {
+      const doc = frame?.contentDocument;
+      doc?.addEventListener("contextmenu", event => { if (!devMode) event.preventDefault(); }, true);
+      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);
+      loaded = true;
+      patch();
+    } catch (cause) { error = cause instanceof Error ? cause.message : "Preview unavailable"; }
+  }
+  $effect(() => { JSON.stringify(values); void body; patch(); });
+</script>
+
+<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}
+  </div>
+  {#if error}<p role="status" class="preview-error">{error}</p>{/if}
+  {#if path}
+    {#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>
+  {/if}
+</div>