@acms-subir/core 0.0.2 → 0.2.0

package/src/components/editor/extensions/mediaCards.tsx

@@ -5,6 +5,7 @@ import { useRef, useState } from 'react';
 import { actions } from 'astro:actions';
 import { uploadFile, mediaUrl } from '../imaging';
 import { ImagePicker } from '../ImagePicker';
+import { cleanEventName } from '../../../lib/analytics';
 
 // Media cards beyond the basic image: file/download, gallery, bookmark.
 // Same contract as cards.tsx — renderHTML emits public `.pc-*` markup,
@@ -30,6 +31,8 @@ export const FileCard = Node.create({
       href: { default: '' },
       filename: { default: '' },
       size: { default: 0 },
+      // optional analytics event name → data-umami-event on the public <a>
+      event: { default: '' },
     };
   },
 
@@ -43,6 +46,7 @@ export const FileCard = Node.create({
             href: e.getAttribute('href') ?? '',
             filename: e.querySelector('.pc-file-name')?.textContent ?? e.getAttribute('download') ?? '',
             size: Number(e.getAttribute('data-size') ?? 0),
+            event: e.getAttribute('data-umami-event') ?? '',
           };
         },
       },
@@ -51,9 +55,13 @@ export const FileCard = Node.create({
 
   renderHTML({ node }) {
     const a = node.attrs;
+    const event = cleanEventName(a.event ?? '');
     return [
       'a',
-      { class: 'pc-filecard', href: a.href, download: a.filename, 'data-size': String(a.size) },
+      {
+        class: 'pc-filecard', href: a.href, download: a.filename, 'data-size': String(a.size),
+        ...(event ? { 'data-umami-event': event } : {}),
+      },
       ['span', { class: 'pc-file-icon', 'aria-hidden': 'true' }, '↓'],
       ['span', { class: 'pc-file-text' },
         ['span', { class: 'pc-file-name' }, a.filename || 'Download'],
@@ -111,6 +119,15 @@ function FileCardView({ node, updateAttributes, deleteNode, selected }: NodeView
         <span className="pe-provider">File</span>
         <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
       </div>
+      <div className="pe-button-fields" contentEditable={false}>
+        <input
+          type="text"
+          placeholder="Analytics event (optional)"
+          title="Downloads are counted under this name in Umami (and forwarded to enabled ad pixels)"
+          value={a.event}
+          onChange={(e) => updateAttributes({ event: e.target.value })}
+        />
+      </div>
       <span className="pc-filecard" contentEditable={false}>
         <span className="pc-file-icon" aria-hidden="true">↓</span>
         <span className="pc-file-text">
@@ -262,6 +279,8 @@ export const BookmarkCard = Node.create({
       image: { default: '' },
       favicon: { default: '' },
       siteName: { default: '' },
+      // optional analytics event name → data-umami-event on the public <a>
+      event: { default: '' },
     };
   },
 
@@ -278,6 +297,7 @@ export const BookmarkCard = Node.create({
             image: e.querySelector<HTMLElement>('.pc-bookmark-thumb img')?.getAttribute('src') ?? '',
             favicon: e.querySelector<HTMLElement>('.pc-bookmark-favicon')?.getAttribute('src') ?? '',
             siteName: e.querySelector('.pc-bookmark-site')?.textContent ?? '',
+            event: e.getAttribute('data-umami-event') ?? '',
           };
         },
       },
@@ -296,7 +316,12 @@ export const BookmarkCard = Node.create({
     ];
     if (a.description) content.push(['div', { class: 'pc-bookmark-desc' }, a.description]);
     content.push(meta);
-    const out: unknown[] = ['a', { class: 'pc-bookmark', href: a.url, target: '_blank', rel: 'noopener' }, content];
+    const event = cleanEventName(a.event ?? '');
+    const out: unknown[] = [
+      'a',
+      { class: 'pc-bookmark', href: a.url, target: '_blank', rel: 'noopener', ...(event ? { 'data-umami-event': event } : {}) },
+      content,
+    ];
     if (a.image) out.push(['div', { class: 'pc-bookmark-thumb' }, ['img', { src: a.image, alt: '', loading: 'lazy' }]]);
     return out as [string, Record<string, string>, ...unknown[]];
   },
@@ -352,6 +377,15 @@ function BookmarkCardView({ node, updateAttributes, deleteNode, selected }: Node
         <span className="pe-provider">Bookmark</span>
         <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
       </div>
+      <div className="pe-button-fields" contentEditable={false}>
+        <input
+          type="text"
+          placeholder="Analytics event (optional)"
+          title="Clicks are counted under this name in Umami (and forwarded to enabled ad pixels)"
+          value={a.event}
+          onChange={(e) => updateAttributes({ event: e.target.value })}
+        />
+      </div>
       <span className="pc-bookmark" contentEditable={false}>
         <span className="pc-bookmark-content">
           <span className="pc-bookmark-title">{a.title || a.url}</span>

package/src/components/editor/extensions/slash.tsx

@@ -6,16 +6,27 @@ import { CONTENT } from '../../../lib/content';
 
 // "/" command menu, Ghost-style: type / on a line to insert cards and blocks.
 
+export interface SlashSnippet {
+  id: string;
+  name: string;
+  contentJson: string; // JSON array of ProseMirror nodes
+}
+
 export interface SlashContext {
   openImagePicker: (insertAt: Range) => void;
+  // saved snippets, provided by the editor shell (loaded once per mount)
+  getSnippets: () => SlashSnippet[];
+  deleteSnippet: (id: string) => void;
 }
 
 interface SlashItem {
   title: string;
   description: string;
   keywords: string;
-  group: 'Basic' | 'Cards';
+  group: 'Basic' | 'Cards' | 'Snippets';
   icon: string; // svg path (24 viewBox, stroked)
+  snippetId?: string;
+  onDelete?: () => void;
   run: (editor: Editor, range: Range, ctx: SlashContext) => void;
 }
 
@@ -58,6 +69,17 @@ const ITEMS: SlashItem[] = [
     icon: 'M12 3l9 18H3zM12 10v4M12 17.5h0',
     run: (editor, range) => editor.chain().focus().deleteRange(range).insertContent({ type: 'callout' }).run(),
   },
+  {
+    title: 'Toggle', description: 'Collapsible section', keywords: 'toggle accordion collapse details faq expand', group: 'Cards',
+    icon: 'M8 5l4 4 4-4M6 13h12M6 17h8',
+    run: (editor, range) =>
+      editor.chain().focus().deleteRange(range).insertContent({ type: 'toggleCard', content: [{ type: 'paragraph' }] }).run(),
+  },
+  {
+    title: 'Table of contents', description: 'Linked outline of this document (dynamic)', keywords: 'toc contents outline sections navigation dynamic', group: 'Cards',
+    icon: 'M9 6h12M9 12h12M12 18h9M4 5.5h2v2H4zM6 11h3M7 16.5h2',
+    run: (editor, range) => editor.chain().focus().deleteRange(range).insertContent({ type: 'tocCard' }).run(),
+  },
   {
     title: 'HTML', description: 'Raw HTML block', keywords: 'html code embed custom', group: 'Cards',
     icon: 'M8 6l-5 6 5 6M16 6l5 6-5 6',
@@ -89,6 +111,11 @@ const ITEMS: SlashItem[] = [
     icon: 'M3 12h18',
     run: (editor, range) => editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
   },
+  {
+    title: 'Heading 1', description: 'Large section heading', keywords: 'heading h1 title large', group: 'Basic',
+    icon: 'M4 5v14M14 5v14M4 12h10M18.5 9.5l1.5-1v7',
+    run: (editor, range) => editor.chain().focus().deleteRange(range).setNode('heading', { level: 1 }).run(),
+  },
   {
     title: 'Heading 2', description: 'Section heading', keywords: 'heading h2 title section', group: 'Basic',
     icon: 'M4 5v14M14 5v14M4 12h10M18 15c0-1 2-1.6 2-3a1.8 1.8 0 0 0-3.4-.8',
@@ -132,23 +159,27 @@ export interface SlashListHandle {
 
 const SlashList = forwardRef<SlashListHandle, ListProps>(function SlashList({ items, command }, ref) {
   const [selected, setSelected] = useState(0);
+  // snippets deleted from the open menu disappear immediately; the source
+  // list refreshes on the next menu open
+  const [hidden, setHidden] = useState<Set<string>>(() => new Set());
+  const visible = items.filter((i) => !i.snippetId || !hidden.has(i.snippetId));
   useEffect(() => setSelected(0), [items]);
 
   useImperativeHandle(ref, () => ({
     onKeyDown(e) {
-      if (e.key === 'ArrowDown') { setSelected((s) => (s + 1) % items.length); return true; }
-      if (e.key === 'ArrowUp') { setSelected((s) => (s - 1 + items.length) % items.length); return true; }
-      if (e.key === 'Enter') { if (items[selected]) command(items[selected]); return true; }
+      if (e.key === 'ArrowDown') { setSelected((s) => (s + 1) % visible.length); return true; }
+      if (e.key === 'ArrowUp') { setSelected((s) => (s - 1 + visible.length) % visible.length); return true; }
+      if (e.key === 'Enter') { if (visible[selected]) command(visible[selected]); return true; }
       return false;
     },
   }));
 
-  if (!items.length) return <div className="pe-slash"><div className="pe-slash-empty">No matches</div></div>;
+  if (!visible.length) return <div className="pe-slash"><div className="pe-slash-empty">No matches</div></div>;
 
   let lastGroup = '';
   return (
     <div className="pe-slash">
-      {items.map((item, i) => {
+      {visible.map((item, i) => {
         const header = item.group !== lastGroup ? item.group : null;
         lastGroup = item.group;
         return (
@@ -169,6 +200,22 @@ const SlashList = forwardRef<SlashListHandle, ListProps>(function SlashList({ it
                 <span className="pe-slash-title">{item.title}</span>
                 <span className="pe-slash-desc">{item.description}</span>
               </span>
+              {item.onDelete && item.snippetId && (
+                <span
+                  role="button"
+                  tabIndex={-1}
+                  className="pe-slash-del"
+                  title="Delete snippet"
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    item.onDelete!();
+                    setHidden((h) => new Set(h).add(item.snippetId!));
+                  }}
+                >
+                  ✕
+                </span>
+              )}
             </button>
           </div>
         );
@@ -181,7 +228,7 @@ export const SlashMenu = Extension.create<{ context: SlashContext }>({
   name: 'slashMenu',
 
   addOptions() {
-    return { context: { openImagePicker: () => {} } };
+    return { context: { openImagePicker: () => {}, getSnippets: () => [], deleteSnippet: () => {} } };
   },
 
   addProseMirrorPlugins() {
@@ -196,7 +243,22 @@ export const SlashMenu = Extension.create<{ context: SlashContext }>({
         },
         items: ({ query }: { query: string }) => {
           const q = query.toLowerCase();
-          return ITEMS.filter(
+          const snippets: SlashItem[] = context.getSnippets().map((s) => ({
+            title: s.name,
+            description: 'Saved snippet',
+            keywords: `snippet ${s.name.toLowerCase()}`,
+            group: 'Snippets' as const,
+            icon: 'M4 7l8-4 8 4-8 4zM4 12l8 4 8-4M4 17l8 4 8-4',
+            snippetId: s.id,
+            onDelete: () => context.deleteSnippet(s.id),
+            run: (editor, range) => {
+              let content: unknown = null;
+              try { content = JSON.parse(s.contentJson); } catch { /* corrupt row: insert nothing */ }
+              if (!Array.isArray(content) || !content.length) return;
+              editor.chain().focus().deleteRange(range).insertContent(content).run();
+            },
+          }));
+          return [...ITEMS, ...snippets].filter(
             (i) => i.title.toLowerCase().includes(q) || i.keywords.includes(q)
           );
         },

package/src/components/editor/extensions/toc.tsx

@@ -0,0 +1,89 @@
+import { Node } from '@tiptap/core';
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
+import type { NodeViewProps } from '@tiptap/react';
+import { useEffect, useState } from 'react';
+
+// Table-of-contents card: a *dynamic* block like the post list — it
+// serializes as a placeholder div (data-dyn="toc") that public routes expand
+// at request time from the body's anchored headings, so it can never go
+// stale. The editor shows a live outline built from the current document.
+
+export const TocCard = Node.create({
+  name: 'tocCard',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return { title: { default: 'In this article' } };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-dyn="toc"]',
+        getAttrs: (el) => ({ title: (el as HTMLElement).getAttribute('data-title') ?? '' }),
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    return ['div', { 'data-dyn': 'toc', 'data-title': node.attrs.title }];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(TocView);
+  },
+});
+
+interface OutlineItem {
+  level: number;
+  text: string;
+}
+
+function TocView({ node, editor, updateAttributes, deleteNode, selected }: NodeViewProps) {
+  const [outline, setOutline] = useState<OutlineItem[]>([]);
+
+  useEffect(() => {
+    const collect = () => {
+      const items: OutlineItem[] = [];
+      editor.state.doc.descendants((n) => {
+        if (n.type.name === 'heading' && n.textContent.trim()) {
+          items.push({ level: n.attrs.level as number, text: n.textContent });
+        }
+      });
+      setOutline(items);
+    };
+    collect();
+    editor.on('update', collect);
+    return () => {
+      editor.off('update', collect);
+    };
+  }, [editor]);
+
+  const min = outline.length ? Math.min(...outline.map((i) => i.level)) : 1;
+  return (
+    <NodeViewWrapper className={`pe-card pe-toc ${selected ? 'is-selected' : ''}`} data-drag-handle>
+      <div className="pe-card-tools" contentEditable={false}>
+        <span className="pe-provider">Contents · dynamic</span>
+        <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
+      </div>
+      <div className="pc-toc" contentEditable={false}>
+        <input
+          className="pe-toc-title"
+          type="text"
+          placeholder="Title (empty hides it)"
+          value={node.attrs.title}
+          onChange={(e) => updateAttributes({ title: e.target.value })}
+        />
+        {outline.length ? (
+          outline.map((i, idx) => (
+            <span key={idx} className="pc-toc-link" data-depth={i.level - min}>{i.text}</span>
+          ))
+        ) : (
+          <span className="pe-toc-empty">No headings yet — headings you write will be listed here, linked to their section.</span>
+        )}
+      </div>
+    </NodeViewWrapper>
+  );
+}

package/src/components/editor/extensions/toggle.tsx

@@ -0,0 +1,70 @@
+import { Node } from '@tiptap/core';
+import { NodeViewWrapper, NodeViewContent, ReactNodeViewRenderer } from '@tiptap/react';
+import type { NodeViewProps } from '@tiptap/react';
+import { useState } from 'react';
+
+// Toggle card: a collapsible section — summary line + rich block content.
+// Publishes as native <details>/<summary> so the public site needs no JS;
+// the editor keeps its own open/closed state (not serialized) so collapsing
+// while writing never changes what readers see.
+
+export const ToggleCard = Node.create({
+  name: 'toggleCard',
+  group: 'block',
+  content: 'block+',
+  defining: true,
+
+  addAttributes() {
+    return { summary: { default: '', renderHTML: () => ({}) } };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'details.pc-toggle',
+        getAttrs: (el) => ({ summary: (el as HTMLElement).querySelector(':scope > summary')?.textContent ?? '' }),
+        contentElement: '.pc-toggle-body',
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    return [
+      'details',
+      { class: 'pc-toggle' },
+      ['summary', {}, node.attrs.summary],
+      ['div', { class: 'pc-toggle-body' }, 0],
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ToggleView);
+  },
+});
+
+function ToggleView({ node, updateAttributes, selected }: NodeViewProps) {
+  const [open, setOpen] = useState(true);
+  return (
+    <NodeViewWrapper className={`pc-toggle pe-toggle ${selected ? 'is-selected' : ''} ${open ? 'is-open' : ''}`}>
+      <div className="pe-toggle-head" contentEditable={false}>
+        <button
+          type="button"
+          className="pe-toggle-chevron"
+          title={open ? 'Collapse' : 'Expand'}
+          onClick={() => setOpen((v) => !v)}
+        >
+          ▸
+        </button>
+        <input
+          className="pe-toggle-summary"
+          type="text"
+          placeholder="Toggle heading…"
+          value={node.attrs.summary}
+          onChange={(e) => updateAttributes({ summary: e.target.value })}
+        />
+      </div>
+      {/* stays mounted when collapsed — ProseMirror must keep its content DOM */}
+      <NodeViewContent className="pc-toggle-body" style={open ? undefined : { display: 'none' }} />
+    </NodeViewWrapper>
+  );
+}

package/src/layouts/Site.astro

@@ -6,6 +6,10 @@ import { siteOrigin, absUrl, canonicalPath } from '../lib/seo';
 import { siteLang } from '../lib/dates';
 import { CONTENT } from '../lib/content';
 import { I18N, localeFromPath, localeHomeUrl } from '../lib/i18n';
+import { SEARCH } from '../lib/search-config';
+import { searchStrings } from '../lib/search-i18n';
+import { effectiveSettings } from '../lib/designPreview';
+import { analyticsHead, analyticsBody } from '../lib/analytics';
 import '../styles/site.css';
 import '../styles/cards.css';
 
@@ -33,7 +37,9 @@ const {
 } = Astro.props;
 
 const repo = await getRepo(Astro.locals);
-const [settings, pages, navItems] = await Promise.all([repo.getSettings(), repo.listPages(), repo.listNavItems()]);
+const [rawSettings, pages, navItems] = await Promise.all([repo.getSettings(), repo.listPages(), repo.listNavItems()]);
+// ?designPreview=1 (admin-only) renders the staged Design-screen changes
+const settings = effectiveSettings(rawSettings, Astro.url, Astro.cookies);
 const design = resolveDesign(settings);
 const navPages = pages.filter((p) => p.status === 'published' && !p.isHome);
 const headerNav = navItems.filter((n) => n.area === 'header');
@@ -62,9 +68,17 @@ const metaDescription = description || settings.tagline || undefined;
 // locale setting (a date-formatting concern) stays the fallback
 const reqLocale = I18N.enabled ? localeFromPath(current) : '';
 const htmlLang = reqLocale || siteLang(settings);
+// search modal chrome: strings follow the document language, the form's
+// no-JS fallback goes to the (locale-prefixed) /search page
+const showSearch = !bare && SEARCH.enabled;
+const searchT = searchStrings(htmlLang.slice(0, 2));
+const searchAction = reqLocale && reqLocale !== I18N.defaultLocale ? `/${reqLocale}/search` : '/search';
 // hreflang alternates connect the per-language home pages; other routes have
 // no language twins yet, so alternates are emitted only on home paths
 const isHomePath = I18N.enabled && I18N.locales.some((l) => current === localeHomeUrl(l));
+// analytics tags render wherever headCode does (bare pages and previews too)
+const analyticsHtml = analyticsHead(settings);
+const analyticsBodyHtml = analyticsBody(settings);
 const shareImage = image || settings.siteCover || '';
 const shareImageAbs = shareImage ? absUrl(shareImage, origin) : '';
 const faviconType =
@@ -122,6 +136,7 @@ const homeJsonLd =
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     {design.fontsHref && <link href={design.fontsHref} rel="stylesheet" />}
     <Fragment set:html={`<style>${design.css}</style>`} />
+    {analyticsHtml && <Fragment set:html={analyticsHtml} />}
     {settings.headCode && <Fragment set:html={settings.headCode} />}
   </head>
   <body>
@@ -188,9 +203,114 @@ const homeJsonLd =
               ))}
             </span>
           )}
+          {showSearch && (
+            <a class="pc-search-trigger" href={searchAction} data-search-open aria-label={searchT.label}>
+              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.6-3.6" /></svg>
+            </a>
+          )}
         </nav>
       </header>
     )}
+    {showSearch && (
+      <dialog class="pc-search" aria-label={searchT.label}>
+        {/* a real GET form: with JS disabled (or the fetch failing) the
+            query submits to the /search page instead of the live modal */}
+        <form class="pc-search-box" action={searchAction} method="get" role="search">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.6-3.6" /></svg>
+          <input class="pc-search-input" type="search" name="q" placeholder={searchT.placeholder} aria-label={searchT.label} autocomplete="off" />
+          <button type="button" class="pc-search-kbd" data-search-close>esc</button>
+        </form>
+        <div class="pc-search-results" hidden></div>
+      </dialog>
+    )}
+    {showSearch && (
+      <script is:inline define:vars={{ searchLocale: reqLocale, t: searchT }}>
+        (() => {
+          const dlg = document.querySelector('dialog.pc-search');
+          if (!dlg || !dlg.showModal) return;
+          const input = dlg.querySelector('.pc-search-input');
+          const box = dlg.querySelector('.pc-search-results');
+          let ctl = null;
+          let timer = 0;
+          let sel = -1;
+
+          const open = () => { if (!dlg.open) dlg.showModal(); input.focus(); input.select(); };
+          document.querySelectorAll('[data-search-open]').forEach((el) =>
+            el.addEventListener('click', (e) => { e.preventDefault(); open(); })
+          );
+          dlg.querySelectorAll('[data-search-close]').forEach((el) => el.addEventListener('click', () => dlg.close()));
+          // clicks on ::backdrop (and the dialog's transparent frame) land on
+          // the dialog element itself — descendants stop at the panel
+          dlg.addEventListener('click', (e) => { if (e.target === dlg) dlg.close(); });
+          document.addEventListener('keydown', (e) => {
+            if ((e.key === 'k' || e.key === 'K') && (e.metaKey || e.ctrlKey)) {
+              e.preventDefault();
+              dlg.open ? dlg.close() : open();
+              return;
+            }
+            const a = document.activeElement;
+            const typing = a && (/^(INPUT|TEXTAREA|SELECT)$/.test(a.tagName) || a.isContentEditable);
+            if (e.key === '/' && !typing && !dlg.open) { e.preventDefault(); open(); }
+          });
+
+          const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+          // snippet arrives pre-escaped from /api/search (only <mark> inside)
+          const hit = (url, title, meta, snippet) =>
+            `<a class="pc-search-hit" href="${esc(url)}"><span class="pc-search-t">${esc(title)}` +
+            (snippet ? `<span class="pc-search-snip">${snippet}</span>` : '') +
+            `</span>${meta ? `<span class="pc-search-m">${esc(meta)}</span>` : ''}</a>`;
+
+          const render = (d) => {
+            const groups = [];
+            if (d.posts.length) groups.push([t.posts, d.posts.map((p) => hit(p.url, p.title, p.date, p.snippet))]);
+            if (d.pages.length) groups.push([t.pages, d.pages.map((p) => hit(p.url, p.title, (p.locale || '').toUpperCase(), p.snippet))]);
+            if (d.tags.length) groups.push([t.tags, d.tags.map((g) => hit(g.url, g.name, `${g.count} ${t.posts.toLowerCase()}`))]);
+            if (d.authors.length) groups.push([t.authors, d.authors.map((u) => hit(u.url, u.name, ''))]);
+            box.innerHTML = groups.length
+              ? groups.map(([label, items]) => `<div class="pc-search-group">${esc(label)}</div>${items.join('')}`).join('')
+              : `<div class="pc-search-empty">${esc(t.empty)} “${esc(input.value.trim())}”</div>`;
+            box.hidden = false;
+            sel = -1;
+          };
+
+          input.addEventListener('input', () => {
+            clearTimeout(timer);
+            const q = input.value.trim();
+            if (!q) {
+              if (ctl) ctl.abort();
+              box.hidden = true;
+              box.innerHTML = '';
+              return;
+            }
+            timer = setTimeout(async () => {
+              if (ctl) ctl.abort();
+              ctl = new AbortController();
+              try {
+                const res = await fetch(`/api/search?q=${encodeURIComponent(q)}&locale=${encodeURIComponent(searchLocale)}`, { signal: ctl.signal });
+                if (res.ok) render(await res.json());
+              } catch { /* aborted or offline — the form still submits to /search */ }
+            }, 150);
+          });
+
+          const move = (dir) => {
+            const hits = [...box.querySelectorAll('.pc-search-hit')];
+            if (!hits.length) return;
+            sel = (sel + dir + hits.length) % hits.length;
+            hits.forEach((h, i) => h.classList.toggle('sel', i === sel));
+            hits[sel].scrollIntoView({ block: 'nearest' });
+          };
+          input.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowDown') { e.preventDefault(); move(1); }
+            else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1); }
+            else if (e.key === 'Enter') {
+              const cur = box.querySelector('.pc-search-hit.sel');
+              if (cur) { e.preventDefault(); cur.click(); }
+              // no selection: the form submits to the /search page
+            }
+          });
+        })();
+      </script>
+    )}
     <main class="site-main">
       <slot />
     </main>
@@ -213,6 +333,7 @@ const homeJsonLd =
         <div class="footer-text" set:html={footerHtml} />
       </footer>
     )}
+    {analyticsBodyHtml && <Fragment set:html={analyticsBodyHtml} />}
     {settings.footerCode && <Fragment set:html={settings.footerCode} />}
   </body>
 </html>