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

package/src/editor/lib/TopBar.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import Icon from "./Icon.svelte";
+  import SidebarIcon from "./SidebarIcon.svelte";
+  import { tick } from "svelte";
+  import type { Manifest } from "../../manifest/types";
+
+  type Sel =
+    | { kind: "media" }
+    | { kind: "menus" }
+    | { kind: "menu"; slug: string }
+    | { kind: "pages"; category?: string }
+    | { kind: "page"; slug: string }
+    | { kind: "documents"; type: string }
+    | { kind: "document"; type: string; id: string }
+    | { kind: "collection"; name: string }
+    | { kind: "post"; collection: string; slug: string };
+
+  let {
+    manifest,
+    sel,
+    onselect,
+  }: {
+    manifest: Manifest;
+    sel: Sel | null;
+    onselect: (s: Sel) => void;
+  } = $props();
+
+  let open = $state(false);
+  let query = $state("");
+  let active = $state(-1);
+  let inputEl = $state<HTMLInputElement | null>(null);
+
+  $effect(() => {
+    if (open) inputEl?.focus();
+  });
+
+  interface Hit {
+    label: string;
+    hint: string;
+    action: () => void;
+  }
+
+  const hits = $derived.by((): Hit[] => {
+    const q = query.trim().toLowerCase();
+    const all: Hit[] = [];
+    for (const p of manifest.pages) {
+      all.push({
+        label: p.label,
+        hint: "Page",
+        action: () => onselect({ kind: "page", slug: p.slug }),
+      });
+    }
+    for (const doc of manifest.documents ?? []) {
+      all.push({
+        label: String(doc.data.title ?? doc.data.name ?? doc.slug),
+        hint: `${doc.type} · ${doc.slug}`,
+        action: () => onselect({ kind: "document", type: doc.type, id: doc.id }),
+      });
+    }
+    for (const c of manifest.collections ?? []) {
+      all.push({
+        label: c.label,
+        hint: "Collection",
+        action: () => onselect({ kind: "collection", name: c.name }),
+      });
+      for (const po of c.posts) {
+        all.push({
+          label: String(po.frontmatter.title ?? po.slug),
+          hint: `${c.label} · ${po.slug}`,
+          action: () => onselect({ kind: "post", collection: c.name, slug: po.slug }),
+        });
+      }
+    }
+    if (manifest.menus) {
+      all.push({ label: "Menus", hint: "Collection", action: () => onselect({ kind: "menus" }) });
+      for (const m of manifest.menus.entries) all.push({ label: m.title, hint: `Menu · ${m.slug}`, action: () => onselect({ kind: "menu", slug: m.slug }) });
+    }
+    if (!q) return all.slice(0, 12);
+    return all.filter((h) => h.label.toLowerCase().includes(q) || h.hint.toLowerCase().includes(q)).slice(0, 12);
+  });
+
+  function trigger(h: Hit) {
+    h.action();
+    open = false;
+    query = "";
+    active = -1;
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+      e.preventDefault();
+      open = !open;
+      query = "";
+      active = -1;
+    }
+    if (e.key === "Escape") open = false;
+    if (!open || e.isComposing) return;
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!hits.length) return;
+      active = e.key === "ArrowDown" ? (active + 1) % hits.length : (active <= 0 ? hits.length : active) - 1;
+      inputEl?.focus();
+      void tick().then(() => document.getElementById(`rigel-search-hit-${active}`)?.scrollIntoView({ block: "nearest" }));
+    }
+    if (e.key === "Enter" && e.target === inputEl) {
+      e.preventDefault();
+      const hit = hits[active < 0 ? 0 : active];
+      if (hit) trigger(hit);
+    }
+  }
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+<button class="search-trigger" aria-label="Search content" title="Search content (⌘K)" onclick={() => { active = -1; open = true; }}>
+  <SidebarIcon name="magnifying-glass" />
+  <span class="sidebar-label">Search…</span>
+  <kbd>⌘K</kbd>
+</button>
+
+{#if open}
+  <div
+    class="palette-backdrop"
+    role="presentation"
+    onclick={() => (open = false)}
+    onkeydown={(e) => e.key === "Escape" && (open = false)}
+  >
+    <div class="palette" role="dialog" aria-label="Search content" onclick={(e) => e.stopPropagation()}>
+      <div class="palette-search">
+        <Icon name="magnifier" size={20} />
+        <input
+          type="search"
+          role="combobox"
+          aria-expanded="true"
+          aria-controls="rigel-search-results"
+          aria-autocomplete="list"
+          aria-activedescendant={active >= 0 && hits[active] ? `rigel-search-hit-${active}` : undefined}
+          aria-label="Search pages, collections, posts"
+          placeholder="Search pages, collections, posts…"
+          bind:value={query}
+          oninput={() => active = -1}
+          bind:this={inputEl}
+        />
+        <kbd>esc</kbd>
+      </div>
+      <ul id="rigel-search-results" role="listbox" aria-label="Search results">
+        {#each hits as h, i (h.hint + h.label)}
+          <li role="presentation">
+            <button id={`rigel-search-hit-${i}`} role="option" aria-selected={active === i} onfocus={() => active = i} onclick={() => trigger(h)}>
+              <span>{h.label}</span>
+              <span class="hint">{h.hint}</span>
+            </button>
+          </li>
+        {:else}
+          <li class="empty" role="presentation">No results</li>
+        {/each}
+      </ul>
+      <div class="palette-footer">
+        <span><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
+        <span><kbd>↵</kbd> open</span>
+        <span><kbd>esc</kbd> close</span>
+      </div>
+    </div>
+  </div>
+{/if}

package/src/editor/lib/UnsavedChanges.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import Icon from "./Icon.svelte";
+  let { busy, error, onsave, ondiscard, oncancel }: { busy: boolean; error: string; onsave: () => void; ondiscard: () => void; oncancel: () => 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 unsaved-dialog" aria-labelledby="unsaved-title" aria-describedby="unsaved-description" oncancel={(event) => { event.preventDefault(); if (!busy) oncancel(); }}>
+  <div class="rigel-modal">
+    <div class="unsaved-head">
+      <h2 id="unsaved-title">Unsaved changes</h2>
+      <button type="button" class="icon-btn" aria-label="Keep editing" disabled={busy} onclick={oncancel}><Icon name="x" size={16} /></button>
+    </div>
+    <p id="unsaved-description">You have unsaved changes. Save before leaving, or discard this draft?</p>
+    {#if error}<p role="alert">{error}</p>{/if}
+    <div class="unsaved-actions">
+      <button type="button" bind:this={cancel} disabled={busy} onclick={oncancel}>Keep editing</button>
+      <button type="button" disabled={busy} onclick={ondiscard}>Discard changes</button>
+      <button type="button" class="primary" disabled={busy} onclick={onsave}>{busy ? 'Saving…' : 'Save and leave'}</button>
+    </div>
+  </div>
+</dialog>
+
+<style>
+  .unsaved-dialog { box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 1rem; border: none; color: var(--text); }
+  .unsaved-dialog .rigel-modal { box-sizing: border-box; }
+  .unsaved-dialog:not([open]) { display: none; }
+  .unsaved-dialog::backdrop { background: transparent; }
+  .unsaved-head, .unsaved-actions { display: flex; align-items: center; gap: 0.75rem; }
+  .unsaved-head { justify-content: space-between; }
+  .unsaved-actions { justify-content: flex-end; flex-wrap: wrap; margin-top: 1.5rem; }
+  .unsaved-actions button:not(.primary) { padding: 0.4375rem 0.75rem; border: 1px solid var(--border-control); border-radius: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 0.8125rem; cursor: pointer; }
+</style>