@acms-subir/core 0.1.0 → 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

@@ -8,6 +8,8 @@ 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';
 
@@ -35,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');
@@ -72,6 +76,9 @@ const searchAction = reqLocale && reqLocale !== I18N.defaultLocale ? `/${reqLoca
 // 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 =
@@ -129,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>
@@ -325,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>

package/src/lib/analytics.ts

@@ -0,0 +1,121 @@
+// Analytics providers (Umami, Meta Pixel, TikTok Pixel): builds the script
+// markup Site.astro renders into the public <head> via set:html. Because the
+// output bypasses Astro's escaping, nothing is emitted unless the stored
+// ID/URL passes its validator — a bad value renders nothing, never broken or
+// injected markup. The admin form rejects invalid values with the same rules.
+import type { Settings } from './schema';
+
+export const UMAMI_ID_RE = /^[0-9a-f]{8}(?:-[0-9a-f]{4}){3}-[0-9a-f]{12}$/i;
+export const META_PIXEL_ID_RE = /^\d{5,20}$/;
+export const TIKTOK_PIXEL_ID_RE = /^[A-Z0-9_-]{8,40}$/i;
+
+// https only (self-hosted instances included); returns the normalized href,
+// whose serialization percent-encodes quotes/angle brackets, so the value is
+// attribute-safe. Belt and braces: reject anything still risky post-encode.
+export function normalizeScriptUrl(url: string): string {
+  try {
+    const href = new URL(url).href;
+    if (new URL(url).protocol !== 'https:' || /["'<>\s]/.test(href)) return '';
+    return href;
+  } catch {
+    return '';
+  }
+}
+
+type Analytics = Settings['analytics'];
+
+function umamiTag(a: Analytics['umami']): string {
+  const src = normalizeScriptUrl(a.scriptUrl);
+  if (!a.enabled || !UMAMI_ID_RE.test(a.websiteId) || !src) return '';
+  return `<script defer src="${src}" data-website-id="${a.websiteId.toLowerCase()}"></script>`;
+}
+
+// The replay recorder lives next to the tracker on the same instance:
+// swap the URL's last path segment for recorder.js and re-validate.
+export function umamiRecorderUrl(scriptUrl: string): string {
+  const src = normalizeScriptUrl(scriptUrl);
+  if (!src) return '';
+  const url = new URL(src);
+  url.pathname = url.pathname.replace(/[^/]*$/, 'recorder.js');
+  return normalizeScriptUrl(url.href);
+}
+
+// Session replay (Umami v3.1+): a second tag mirroring the dashboard-generated
+// snippet. Attributes are re-clamped here because, like the rest of this file,
+// the output bypasses Astro escaping — schema-invalid values render defaults,
+// never broken markup.
+function umamiReplayTag(a: Analytics['umami']): string {
+  const src = umamiRecorderUrl(a.scriptUrl);
+  if (!a.enabled || !a.replay.enabled || !UMAMI_ID_RE.test(a.websiteId) || !src) return '';
+  const rate =
+    Number.isFinite(a.replay.sampleRate) && a.replay.sampleRate >= 0.01 && a.replay.sampleRate <= 1
+      ? a.replay.sampleRate
+      : 0.15;
+  const mask = a.replay.maskLevel === 'strict' ? 'strict' : 'moderate';
+  const duration =
+    Number.isInteger(a.replay.maxDuration) && a.replay.maxDuration > 0 ? a.replay.maxDuration : 300000;
+  return `<script defer src="${src}" data-website-id="${a.websiteId.toLowerCase()}" data-sample-rate="${rate}" data-mask-level="${mask}" data-max-duration="${duration}"></script>`;
+}
+
+// Meta's standard base code: fbq loader + PageView, with the no-JS pixel
+// image fallback. The ID is digits-only by validation, so safe to inline.
+function metaPixelTag(a: Analytics['metaPixel']): string {
+  if (!a.enabled || !META_PIXEL_ID_RE.test(a.pixelId)) return '';
+  return `<script>
+!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
+n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
+t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
+document,'script','https://connect.facebook.net/en_US/fbevents.js');
+fbq('init', '${a.pixelId}');
+fbq('track', 'PageView');
+</script>
+<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=${a.pixelId}&ev=PageView&noscript=1"/></noscript>`;
+}
+
+// TikTok's published base code (experimental — untested live): ttq loader +
+// page(). ID is restricted to [A-Z0-9_-] by validation.
+function tiktokPixelTag(a: Analytics['tiktokPixel']): string {
+  if (!a.enabled || !TIKTOK_PIXEL_ID_RE.test(a.pixelId)) return '';
+  return `<script>
+!function (w, d, t) {
+w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<e.length;n++)ttq.setAndDefer(e[n],ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
+ttq.load('${a.pixelId}');
+ttq.page();
+}(window, document, 'ttq');
+</script>`;
+}
+
+export function analyticsHead(settings: Settings): string {
+  const a = settings.analytics;
+  return [umamiTag(a.umami), umamiReplayTag(a.umami), metaPixelTag(a.metaPixel), tiktokPixelTag(a.tiktokPixel)]
+    .filter(Boolean)
+    .join('\n');
+}
+
+// Event names are author-typed; collapse whitespace so "Sign  up " and
+// "Sign up" count as one event in the dashboards.
+export function cleanEventName(name: string): string {
+  return name.replace(/\s+/g, ' ').trim();
+}
+
+// Click-event bridge: elements carrying data-umami-event (editor cards, the
+// links page) are counted by Umami natively — this dispatcher only exists to
+// forward the same clicks to the ad pixels, so it is emitted solely when one
+// of them is actually enabled. Umami-only sites ship zero extra JS.
+export function analyticsBody(settings: Settings): string {
+  const a = settings.analytics;
+  const meta = a.metaPixel.enabled && META_PIXEL_ID_RE.test(a.metaPixel.pixelId);
+  const tiktok = a.tiktokPixel.enabled && TIKTOK_PIXEL_ID_RE.test(a.tiktokPixel.pixelId);
+  if (!meta && !tiktok) return '';
+  return `<script>
+document.addEventListener('click', function (e) {
+  var el = e.target && e.target.closest && e.target.closest('[data-umami-event]');
+  if (!el) return;
+  var name = el.getAttribute('data-umami-event');
+  if (!name) return;
+  if (window.fbq) window.fbq('trackCustom', name);
+  if (window.ttq) window.ttq.track(name);
+});
+</script>`;
+}

package/src/lib/designPreview.ts

@@ -0,0 +1,14 @@
+import type { AstroCookies } from 'astro';
+import type { Settings } from './schema';
+import { mergeDesignDraft } from './drafts';
+import { verifySessionToken, SESSION_COOKIE } from './auth';
+
+// The Design screen's preview iframe appends ?designPreview=1 so admins see
+// the STAGED design (settings.draftDesign) while every normal request keeps
+// rendering the live one. Session-gated: the flag is inert for visitors.
+export function effectiveSettings(settings: Settings, url: URL, cookies: AstroCookies): Settings {
+  if (!settings.draftDesign) return settings;
+  if (!url.searchParams.has('designPreview')) return settings;
+  if (!verifySessionToken(cookies.get(SESSION_COOKIE)?.value)) return settings;
+  return mergeDesignDraft(settings);
+}

package/src/lib/drafts.ts

@@ -0,0 +1,77 @@
+import type { Page, Post, Settings } from './schema';
+
+// Pending-edit ("draft") snapshots for live documents. A published or
+// scheduled post/page never receives content edits directly: they accumulate
+// in the row's `draft` JSON column and only reach the live columns when the
+// user hits Update (repo.applyPostDraft / applyPageDraft).
+//
+// The snapshot stores the same camelCase field names the save actions accept,
+// plus `savedAt`. Status transitions, schedule times and the publish sweep
+// never live in a snapshot — those stay deliberate, immediate actions.
+
+export const POST_DRAFT_KEYS = [
+  'title', 'slug', 'collection', 'body', 'bodyJson', 'bodyHtml', 'excerpt',
+  'tags', 'cover', 'coverAlt', 'seoTitle', 'seoDesc', 'featured',
+  'authorIds', 'template', 'publishedAt',
+] as const;
+
+export const PAGE_DRAFT_KEYS = [
+  'title', 'slug', 'locale', 'isHome', 'seoTitle', 'seoDesc', 'template',
+  'bodyJson', 'bodyHtml', 'blocks',
+] as const;
+
+type PostDraftKey = (typeof POST_DRAFT_KEYS)[number];
+type PageDraftKey = (typeof PAGE_DRAFT_KEYS)[number];
+
+function pick(draft: Record<string, unknown>, keys: readonly string[]) {
+  const out: Record<string, unknown> = {};
+  for (const k of keys) if (draft[k] !== undefined) out[k] = draft[k];
+  return out;
+}
+
+// Only known editable fields survive the pick — a hand-edited or legacy
+// snapshot can never smuggle status/id/timestamps into an UPDATE.
+export function pickPostDraft(draft: Record<string, unknown>): Partial<Pick<Post, PostDraftKey>> {
+  return pick(draft, POST_DRAFT_KEYS) as Partial<Pick<Post, PostDraftKey>>;
+}
+export function pickPageDraft(draft: Record<string, unknown>): Partial<Pick<Page, PageDraftKey>> {
+  return pick(draft, PAGE_DRAFT_KEYS) as Partial<Pick<Page, PageDraftKey>>;
+}
+
+// The document as it will look after Update — what the editor hydrates from
+// and what /preview renders. Live rows pass through untouched.
+export function mergePostDraft(post: Post): Post {
+  if (!post.draft) return post;
+  const staged = pickPostDraft(post.draft);
+  const merged = { ...post, ...staged };
+  if (staged.authorIds) merged.authorId = staged.authorIds[0] ?? null;
+  return merged;
+}
+export function mergePageDraft(page: Page): Page {
+  if (!page.draft) return page;
+  return { ...page, ...pickPageDraft(page.draft) };
+}
+
+export function draftSavedAt(doc: Pick<Post | Page, 'draft'>): number | null {
+  const ts = doc.draft?.savedAt;
+  return typeof ts === 'number' ? ts : null;
+}
+
+// Design-screen staging: the same shape, stored in settings.draftDesign and
+// applied by the "Publish design" button.
+export const DESIGN_DRAFT_KEYS = [
+  'activeTheme', 'designOverrides', 'siteLogo', 'siteFavicon', 'siteCover',
+] as const;
+
+type DesignDraftKey = (typeof DESIGN_DRAFT_KEYS)[number];
+
+export function pickDesignDraft(draft: Record<string, unknown>): Partial<Pick<Settings, DesignDraftKey>> {
+  return pick(draft, DESIGN_DRAFT_KEYS) as Partial<Pick<Settings, DesignDraftKey>>;
+}
+
+// Settings as they will look after Publish design — what ?designPreview=1
+// renders for admins while visitors keep the live design.
+export function mergeDesignDraft(settings: Settings): Settings {
+  if (!settings.draftDesign) return settings;
+  return { ...settings, ...pickDesignDraft(settings.draftDesign) };
+}