@rigel-cms/rigel 1.4.0-rc.1 → 1.4.0-rc.3

package/src/editor/lib/BlockEditor.svelte

@@ -25,8 +25,9 @@
   import { articleMarkdown } from "../../article-render";
   import Icon from "./Icon.svelte";
   import Select from "./Select.svelte";
-  let { value, oninput, editableRoot }: { value: ArticleBody; oninput: (value: ArticleBody) => void; editableRoot?: HTMLElement } = $props();
+  let { value, oninput, editableRoot, label }: { value: ArticleBody; oninput: (value: ArticleBody) => void; editableRoot?: HTMLElement; label?: string } = $props();
   const inline = $derived(!!editableRoot);
+  const regionLabel = $derived(label ?? $t("richtext.body"));
   let root: HTMLElement;
   let surface: HTMLDivElement;
   let menu: HTMLDivElement;
@@ -203,7 +204,7 @@
   onMount(() => {
     if (editableRoot) {
       root = editableRoot; root.classList.add("block-content", "rigel-article-content"); root.contentEditable = "true";
-      root.setAttribute("role", "textbox"); root.setAttribute("aria-label", $t("richtext.body")); root.setAttribute("aria-multiline", "true");
+      root.setAttribute("role", "textbox"); root.setAttribute("aria-label", regionLabel); root.setAttribute("aria-multiline", "true");
       root.setAttribute("aria-keyshortcuts", "Alt+F10");
     }
     view = root.ownerDocument.defaultView!;
@@ -278,7 +279,7 @@
     };
   });
 
-  $effect(() => { if (editableRoot) editableRoot.setAttribute("aria-label", $t("richtext.body")); });
+  $effect(() => { if (editableRoot) editableRoot.setAttribute("aria-label", regionLabel); });
 
   $effect(() => { if (!linkOpen) view?.CSS.highlights?.delete("rigel-link-selection"); });
 

package/src/editor/lib/CollectionPanel.svelte

@@ -16,14 +16,16 @@
   import type { ContentDocument } from "../../schema/types";
   import { slugify } from "../../slugs";
 
-  let { fields, values, storageSlug, body, selected, focusToken, devMode, documents = [], bodyInline = false, bodyLoading = false, oneditbody = () => {}, onchange, onbody }: {
+  let { fields, values, storageSlug, body, selected, focusToken, devMode, documents = [], bodyInline = false, bodyLoading = false, inlineFields = [], oneditbody = () => {}, oneditfield = () => {}, onchange, onbody }: {
     fields: CollectionField[];
     values: Record<string, unknown>;
     storageSlug: string;
     body: ArticleBody;
     bodyInline?: boolean;
     bodyLoading?: boolean;
+    inlineFields?: string[];
     oneditbody?: () => void;
+    oneditfield?: (path: string) => void;
     selected: SelectedField | null;
     focusToken: number;
     devMode: boolean;
@@ -66,7 +68,13 @@
             <span>{label}{devMode ? ` (${field.key})` : ""}</span>
           </label>
         {:else if field.type === "markdown"}
-          <MarkdownEditor {label} value={String(values[field.key] ?? "")} oninput={(value) => onchange(field.key, value)} />
+          {#if inlineFields.includes(field.key)}
+            <span class="schema-label">{label}{devMode ? ` (${field.key})` : ""}</span>
+            <button type="button" class="outlined" onclick={() => oneditfield(field.key)}>{$t("fields.editRichText")}</button>
+            <p class="hint">{$t("fields.editRichTextHint")}</p>
+          {:else}
+            <MarkdownEditor {label} value={String(values[field.key] ?? "")} oninput={(value) => onchange(field.key, value)} />
+          {/if}
         {:else if field.type === "image"}
           <label><span>{label}{devMode ? ` (${field.key})` : ""}</span><ImagePicker value={String(values[field.key] ?? "")} onpick={(value) => onchange(field.key, value)} /></label>
         {:else if field.type === "tags"}

package/src/editor/lib/MarkdownEditor.svelte

@@ -28,6 +28,28 @@
   let view: EditorView | undefined;
   let lastValue: string | undefined;
   let imageSelection: SelectionBookmark | undefined;
+  let toolbar: HTMLDivElement | undefined;
+  let floating = $state("");
+  let linkPosition = $state("");
+  let releaseFloating: (() => void) | undefined;
+  const inline = $derived(!!editableRoot);
+  function positionFloating() {
+    if (!inline || !editableRoot || !view || mode !== "visual") { floating = ""; linkPosition = ""; return; }
+    const owner = editableRoot.ownerDocument;
+    const active = owner.activeElement;
+    if (!editableRoot.contains(active) && !toolbar?.contains(active)) { floating = ""; linkPosition = ""; return; }
+    const anchor = view.state.selection.$from;
+    const block = anchor.depth > 0 ? view.nodeDOM(anchor.before(1)) : null;
+    const rect = block instanceof HTMLElement ? block.getBoundingClientRect() : editableRoot.getBoundingClientRect();
+    const { innerWidth, innerHeight } = owner.defaultView!;
+    if (rect.bottom < 0 || rect.top > innerHeight) { floating = ""; linkPosition = ""; return; }
+    const size = toolbar?.getBoundingClientRect();
+    const height = size?.height || 44, width = size?.width || 360;
+    const top = Math.max(8, Math.min(rect.top >= height + 12 ? rect.top - height - 8 : rect.bottom + 8, innerHeight - height - 8));
+    const left = Math.max(8, Math.min(rect.left, innerWidth - width - 8));
+    floating = `left:${left}px;top:${top}px`;
+    linkPosition = `left:${Math.max(8, Math.min(left, innerWidth - 356))}px;top:${Math.max(8, Math.min(top + height + 4, innerHeight - 128))}px`;
+  }
   function insertImage(url: string, alt: string, credit?: StockResult) {
     if (!view || !imageSelection || !safeImageUrl(url)) return;
     let tr = view.state.tr.setSelection(imageSelection.resolve(view.state.doc));
@@ -76,6 +98,7 @@
           state = view!.state.apply(transaction);
           view!.updateState(state);
           if (transaction.docChanged) emit(serializeMarkdown(state.doc));
+          positionFloating();
         },
         handlePaste(editor, event) {
           event.preventDefault();
@@ -85,8 +108,14 @@
         },
         handleDrop(_editor, _event, _slice, moved) { return !moved; },
         handleClickOn(_editor, _pos, node) { return node.type.name === "image"; },
-        handleDOMEvents: { click: (_editor, event) => { if ((event.target as Element).closest("a")) { event.preventDefault(); return true; } return false; } },
+        handleDOMEvents: { click: (_editor, event) => { if ((event.target as Element).closest("a")) { event.preventDefault(); return true; } return false; }, focus: () => { positionFloating(); return false; }, blur: () => { setTimeout(positionFloating); return false; } },
       });
+      const target = editableRoot ?? host;
+      const owner = target.ownerDocument;
+      const reposition = () => positionFloating();
+      owner.defaultView?.addEventListener("scroll", reposition, true);
+      owner.defaultView?.addEventListener("resize", reposition);
+      releaseFloating = () => { owner.defaultView?.removeEventListener("scroll", reposition, true); owner.defaultView?.removeEventListener("resize", reposition); };
     }
     if (value !== lastValue) {
       lastValue = value;
@@ -94,7 +123,8 @@
     }
   });
   $effect(() => { const editable = mode === "visual"; view?.setProps({ editable: () => editable }); });
-  onDestroy(() => view?.destroy());
+  $effect(() => { void mode; void inline; positionFloating(); });
+  onDestroy(() => { releaseFloating?.(); view?.destroy(); });
 
   function activeMark(type: string) {
     if (!state) return false;
@@ -164,7 +194,8 @@
 
 <svelte:window onpointerdown={event => { if (linkOpen && !document.getElementById(`${id}-link`)?.contains(event.target as Node) && !linkButton?.contains(event.target as Node)) linkOpen = false; }} />
 
-<div class="markdown-editor body-editor" class:markdown-inline={!!editableRoot}>
+<div class="markdown-editor body-editor" class:markdown-inline={inline} class:markdown-floating={inline && mode === "visual"}>
+  {#if !inline || mode === "source"}
   <div class="markdown-heading">
     <div class="field-label" id={`${id}-label`}>{label}</div>
     <div class="markdown-modes" role="group" aria-label={$t("richtext.editingMode", { label })}>
@@ -172,9 +203,10 @@
       <button type="button" aria-pressed={mode === "source"} onclick={() => { mode = "source"; linkOpen = false; }}>{$t("richtext.markdown")}</button>
     </div>
   </div>
+  {/if}
   {#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={$t("richtext.formatting", { label })}>
+    <div class="body-toolbar formatting-toolbar" bind:this={toolbar} role="group" aria-label={$t("richtext.formatting", { label })} style={inline ? floating : undefined} hidden={inline && !floating}>
       <Select ariaLabel={$t("richtext.textStyle")} data-tooltip={$t("richtext.textStyle")} value={format} options={[{ value: "paragraph", label: $t("richtext.paragraph") }, ...[1, 2, 3, 4, 5, 6].map(level => ({ value: `h${level}`, label: $t("richtext.heading", { level }) })), { value: "code_block", label: $t("richtext.codeBlock") }].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={$t("richtext.textFormatting")}>
         {#each marks as item}
@@ -188,9 +220,10 @@
       </div>
       <button bind:this={linkButton} type="button" aria-label={$t("richtext.link")} data-tooltip={$t("richtext.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; }} />
+      {#if inline}<button type="button" class="markdown-toggle" aria-label={$t("richtext.markdown")} data-tooltip={$t("richtext.markdown")} onmousedown={event => event.preventDefault()} onclick={() => { mode = "source"; linkOpen = false; }}>{$t("richtext.markdown")}</button>{/if}
     </div>
     {#if linkOpen}
-      <div class="markdown-link" id={`${id}-link`} role="group" aria-label={$t("richtext.editLink")} onkeydown={event => { if (event.key === "Escape") { event.stopPropagation(); linkOpen = false; linkButton.focus(); } if (event.key === "Enter") { event.preventDefault(); link(); } }}>
+      <div class="markdown-link" id={`${id}-link`} role="group" aria-label={$t("richtext.editLink")} style={inline ? linkPosition : undefined} onkeydown={event => { if (event.key === "Escape") { event.stopPropagation(); linkOpen = false; linkButton.focus(); } if (event.key === "Enter") { event.preventDefault(); link(); } }}>
         <label for={`${id}-url`}>{$t("richtext.linkUrl")}</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} />

package/src/editor/lib/PropertiesTabs.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
   import { t } from "../i18n";
   let { tab = $bindable("content") }: { tab?: "content" | "seo" } = $props();
+  let tabs: HTMLDivElement;
+  let height = $state(0);
+  $effect(() => {
+    const panel = tabs?.parentElement;
+    panel?.style.setProperty("--properties-tabs-height", `${height}px`);
+    return () => panel?.style.removeProperty("--properties-tabs-height");
+  });
   function onkey(event: KeyboardEvent) {
     if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
     event.preventDefault();
@@ -9,7 +16,7 @@
   }
 </script>
 
-<div class="panel-tabs" role="tablist" aria-label={$t("fields.properties")}>
+<div class="panel-tabs" role="tablist" aria-label={$t("fields.properties")} bind:this={tabs} bind:offsetHeight={height}>
   {#each ["content", "seo"] as value}
     <button type="button" role="tab" id={`properties-tab-${value}`} aria-controls={`properties-${value}`} aria-selected={tab === value} tabindex={tab === value ? 0 : -1} data-tab={value} onclick={() => (tab = value as "content" | "seo")} onkeydown={onkey}>{$t(value === "content" ? "fields.content" : "fields.seo")}</button>
   {/each}

package/src/editor/lib/SchemaField.svelte

@@ -18,7 +18,7 @@
   import type { ContentDocument, FieldDef, Schema } from "../../schema/types";
 
   let {
-    schema, field, value, base, documents, devMode = false, onvalue,
+    schema, field, value, base, documents, devMode = false, inlineFields = [], oneditfield = () => {}, onvalue,
   }: {
     schema: Schema;
     field: FieldDef;
@@ -26,6 +26,8 @@
     base: string;
     documents: ContentDocument[];
     devMode?: boolean;
+    inlineFields?: string[];
+    oneditfield?: (path: string) => void;
     onvalue: (next: unknown) => void;
   } = $props();
 
@@ -85,7 +87,15 @@
     <textarea rows="3" value={typeof value === "string" ? value : ""} oninput={(event) => onvalue(event.currentTarget.value)}></textarea>
   </label>
 {:else if field.type === "markdown"}
-  <MarkdownEditor label={fieldLabel} value={typeof value === "string" ? value : ""} oninput={(next) => onvalue(next)} />
+  {#if !field.sidebarOnly && inlineFields.includes(base)}
+    <div class="schema-field">
+      <span class="schema-label">{label}</span>
+      <button type="button" class="outlined" onclick={() => oneditfield(base)}>{$t("fields.editRichText")}</button>
+      <p class="hint">{$t("fields.editRichTextHint")}</p>
+    </div>
+  {:else}
+    <MarkdownEditor label={fieldLabel} value={typeof value === "string" ? value : ""} oninput={(next) => onvalue(next)} />
+  {/if}
 {:else if field.type === "image" || field.type === "file"}
   <div class="schema-field">
     <span class="schema-label">{label}</span>
@@ -113,6 +123,8 @@
         {schema}
         {documents}
         {devMode}
+        {inlineFields}
+        {oneditfield}
         field={sub}
         base={`${base}.${sub.key}`}
         value={value && typeof value === "object" ? (value as Record<string, unknown>)[sub.key] : undefined}
@@ -141,6 +153,8 @@
               {schema}
               {documents}
               {devMode}
+              {inlineFields}
+              {oneditfield}
               field={sub}
               base={`${base}.${(item as Record<string, unknown>)._key}.${sub.key}`}
               value={item && typeof item === "object" ? (item as Record<string, unknown>)[sub.key] : undefined}

package/src/editor/lib/SchemaPanel.svelte

@@ -23,7 +23,7 @@
   import { slugify } from "../../slugs";
 
   let {
-    schema, docType, values, docId, selected, creating, pending, documents, focusToken, devMode, onchange, onselect, oneditdocument,
+    schema, docType, values, docId, selected, creating, pending, documents, focusToken, devMode, inlineFields = [], oneditfield = () => {}, onchange, onselect, oneditdocument,
   }: {
     schema: Schema;
     docType: DocumentDef;
@@ -35,6 +35,8 @@
     documents: ContentDocument[];
     focusToken: number;
     devMode: boolean;
+    inlineFields?: string[];
+    oneditfield?: (path: string) => void;
     onchange: (next: Record<string, unknown>) => void;
     onselect: (next: SelectedField | null) => void;
     oneditdocument: (id: string) => void;
@@ -176,7 +178,7 @@
     {/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))} />
+        <SchemaField {schema} {documents} {devMode} {inlineFields} {oneditfield} {field} base={field.key} value={values[field.key]} onvalue={(next) => onchange(replaceAt(values, field.key, next))} />
       </div>
     {/each}
   </section>
@@ -223,6 +225,8 @@
             {schema}
             {documents}
             {devMode}
+            {inlineFields}
+            {oneditfield}
             {field}
             base={`sections.${selected.sectionKey}.${field.key}`}
             value={sections.find((section) => section._key === selected?.sectionKey)?.[field.key]}
@@ -239,6 +243,8 @@
         {schema}
         {documents}
         {devMode}
+        {inlineFields}
+        {oneditfield}
         field={selectedField}
         base={selected.path}
         value={selectedValue}
@@ -255,7 +261,7 @@
       <h3>{$t("fields.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))} />
+          <SchemaField {schema} {documents} {devMode} {inlineFields} {oneditfield} {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}

package/src/editor/lib/Settings.svelte

@@ -5,9 +5,13 @@
   import type { Manifest } from "../../manifest/types";
   import type { GitHubAccess } from "./github-auth";
   import Icon from "./Icon.svelte";
+  import Select from "./Select.svelte";
+  import { effectiveSearchScope } from "../../manifest/search";
 
-  let { s = $bindable(), github, user, error, saving, onerase, onclose }: {
+  let { s = $bindable(), search, contentLocales, github, user, error, saving, onerase, onclose }: {
     s: RigelSettings;
+    search?: Manifest["search"];
+    contentLocales?: Manifest["contentLocales"];
     github?: Manifest["github"];
     user?: GitHubAccess["user"];
     error: string;
@@ -16,8 +20,8 @@
     onclose: () => void;
   } = $props();
 
-  type PaneId = "appearance" | "editor" | "connection" | "media" | "language" | "advanced";
-  let active: PaneId = $state("appearance");
+  type PaneId = "interface" | "content" | "connection" | "media" | "advanced";
+  let active: PaneId = $state("interface");
 
   const providerIds = Object.keys(STOCK_PROVIDERS) as (keyof typeof STOCK_PROVIDERS)[];
   let keys = $state(getKeys());
@@ -26,20 +30,20 @@
   let eraseError = $state("");
 
   const panes: { id: PaneId; label: string }[] = $derived([
-    { id: "appearance", label: $t("shell.appearance") },
-    { id: "editor", label: $t("shell.editor") },
+    { id: "interface", label: $t("shell.interface") },
+    { id: "content", label: $t("shell.content") },
     { id: "connection", label: $t("shell.connection") },
     { id: "media", label: $t("shell.media") },
-    { id: "language", label: $t("shell.language") },
+
     { id: "advanced", label: $t("shell.advanced") },
   ]);
 
   const PANE_ICONS = {
-    appearance: "palette",
-    editor: "textB",
+    interface: "palette",
+    content: "fileText",
     connection: "user",
     media: "image",
-    language: "translate",
+
     advanced: "wrench",
   } as const;
 
@@ -71,6 +75,7 @@
         {#each panes as p (p.id)}
           <button
             class:active={active === p.id}
+            aria-current={active === p.id ? "true" : undefined}
             onclick={() => (active = p.id)}
           >
             <span class="pico"><Icon name={PANE_ICONS[p.id]} size={24} /></span>
@@ -79,9 +84,9 @@
         {/each}
       </nav>
 
-      <div class="settings-pane">
-        {#if active === "appearance"}
-          <h3>{$t("shell.appearance")}</h3>
+      <div class="settings-pane" role="region" aria-label={panes.find(p => p.id === active)?.label}>
+        {#if active === "interface"}
+
           <fieldset>
             <legend>{$t("shell.theme")}</legend>
             <div class="theme-options">
@@ -101,17 +106,30 @@
             </label>
             <p class="hint" id="high-contrast-hint">{$t("shell.highContrastHint")}</p>
           </fieldset>
-
-        {:else if active === "editor"}
-          <h3>{$t("shell.editorExperience")}</h3>
           <fieldset>
-            <legend>{$t("shell.articleBodyEditing")}</legend>
-            <label class="radio"><input type="radio" bind:group={s.userPref.editorExperience} value="sidebar" /><span>{$t("shell.sidebar")}</span></label>
-            <label class="radio"><input type="radio" bind:group={s.userPref.editorExperience} value="inline" /><span>{$t("shell.inlinePreview")}</span></label>
+            <legend>{$t("shell.editorInterfaceLanguage")}</legend>
+            {#each availableLocales as lang}
+              <label class="radio">
+                <input type="radio" bind:group={s.language} value={lang} />
+                <span>{localeNames[lang]}</span>
+              </label>
+            {/each}
           </fieldset>
+
+        {:else if active === "content"}
+
+          <Select label={$t("shell.articleBodyEditing")} value={s.userPref.editorExperience ?? "inline"} options={[
+            { value: "sidebar", label: $t("shell.sidebar") },
+            { value: "inline", label: $t("shell.inlinePreview") },
+          ]} onchange={value => s.userPref.editorExperience = value === "sidebar" ? "sidebar" : "inline"} />
           <p class="hint">{$t("shell.editorExperienceHint")}</p>
+          <Select label={$t("shell.searchScope")} value={s.userPref.searchScope ?? "inherit"} options={[
+            { value: "inherit", label: $t("shell.searchScopeDefault", { scope: $t(effectiveSearchScope(search, undefined) === "all" ? "shell.searchScopeAll" : "shell.searchScopeCurrent") }) },
+            { value: "all", label: $t("shell.searchScopeAll") },
+            { value: "currentLocale", label: $t("shell.searchScopeCurrent"), disabled: !contentLocales || contentLocales.locales.length < 2 },
+          ]} onchange={value => s.userPref.searchScope = value === "all" || value === "currentLocale" ? value : undefined} />
         {:else if active === "connection"}
-          <h3>{$t("shell.connection")}</h3>
+
           {#if github}
             <dl class="connection-details">
               <dt>{$t("shell.githubAccount")}</dt>
@@ -165,17 +183,6 @@
 
           </section>
 
-        {:else if active === "language"}
-          <h3>{$t("shell.language")}</h3>
-          <fieldset>
-            <legend>{$t("shell.editorInterfaceLanguage")}</legend>
-            {#each availableLocales as lang}
-              <label class="radio">
-                <input type="radio" bind:group={s.language} value={lang} />
-                <span>{localeNames[lang]}</span>
-              </label>
-            {/each}
-          </fieldset>
 
         {:else}
           <h3>{$t("shell.developerMode")}</h3>

package/src/editor/lib/TopBar.svelte

@@ -4,6 +4,8 @@
   import SidebarIcon from "./SidebarIcon.svelte";
   import { tick } from "svelte";
   import type { Manifest } from "../../manifest/types";
+  import { searchIndex, type SearchHit } from "../../manifest/search";
+  import type { SearchScope } from "../../config";
 
   type Sel =
     | { kind: "media" }
@@ -20,10 +22,14 @@
     manifest,
     sel,
     onselect,
+    scope = "all",
+    contentLocale,
   }: {
     manifest: Manifest;
     sel: Sel | null;
-    onselect: (s: Sel) => void;
+    onselect: (s: Sel, locale?: string) => void;
+    scope?: SearchScope;
+    contentLocale?: string;
   } = $props();
 
   let open = $state(false);
@@ -35,53 +41,11 @@
     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: $t("shell.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: $t("shell.searchItemHint", { name: doc.type, slug: doc.slug }),
-        action: () => onselect({ kind: "document", type: doc.type, id: doc.id }),
-      });
-    }
-    for (const c of manifest.collections ?? []) {
-      all.push({
-        label: c.label,
-        hint: $t("shell.collection"),
-        action: () => onselect({ kind: "collection", name: c.name }),
-      });
-      for (const po of c.posts) {
-        all.push({
-          label: String(po.frontmatter.title ?? po.slug),
-          hint: $t("shell.searchItemHint", { name: c.label, slug: po.slug }),
-          action: () => onselect({ kind: "post", collection: c.name, slug: po.slug }),
-        });
-      }
-    }
-    if (manifest.menus) {
-      all.push({ label: $t("shell.menus"), hint: $t("shell.collection"), action: () => onselect({ kind: "menus" }) });
-      for (const m of manifest.menus.entries) all.push({ label: m.title, hint: $t("shell.searchMenuHint", { slug: 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);
-  });
+  const index = $derived(searchIndex(manifest, scope, contentLocale, $t));
+  const hits = $derived(index.filter(hit => [hit.label, hit.hint, hit.language ?? ""].some(value => value.toLowerCase().includes(query.trim().toLowerCase()))).slice(0, 12));
 
-  function trigger(h: Hit) {
-    h.action();
+  function trigger(h: SearchHit) {
+    onselect(h.selection, h.locale);
     open = false;
     query = "";
     active = -1;
@@ -145,10 +109,10 @@
         <kbd>{$t("shell.escapeKeyLowercase")}</kbd>
       </div>
       <ul id="rigel-search-results" role="listbox" aria-label={$t("shell.searchResults")}>
-        {#each hits as h, i (h.hint + h.label)}
+        {#each hits as h, i (h.id)}
           <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>{h.label}{#if h.language}<span class="badge search-language" title={h.language} aria-label={h.language}>{h.locale?.slice(0, 2).toUpperCase()}</span>{/if}</span>
               <span class="hint">{h.hint}</span>
             </button>
           </li>