@acms-subir/core 0.1.0 → 0.2.0

package/src/pages/admin/pages/[id].astro

@@ -5,6 +5,8 @@ import { createPreviewToken } from '../../../lib/preview';
 import { resolveDesign } from '../../../lib/theme';
 import { env } from '../../../lib/env';
 import { BRAND } from '../../../lib/brand';
+import { mergePageDraft } from '../../../lib/drafts';
+import { localeHomeUrl } from '../../../lib/i18n';
 import PostEditor from '../../../components/editor/PostEditor';
 import '../../../styles/admin.css';
 import '../../../styles/editor.css';
@@ -14,9 +16,14 @@ const id = Astro.params.id!;
 const page = await repo.getPage(id);
 if (!page) return new Response(null, { status: 404 });
 
+// The editor hydrates from the pending draft when one exists (live pages
+// stage their edits until Update); the live URL stays on the live slug.
+const editable = mergePageDraft(page);
+const livePath = page.isHome ? localeHomeUrl(page.locale) : `/${page.slug}`;
+
 // Canonical content is the TipTap doc (as HTML). Legacy widget-block pages
 // are converted on first open and become rich content on next save.
-const initialHTML = page.bodyHtml || blocksToHtml(page.blocks);
+const initialHTML = editable.bodyHtml || blocksToHtml(editable.blocks);
 const previewPath = `/preview/page/${page.id}`;
 const sharePath = `${previewPath}?token=${createPreviewToken('page', page.id)}`;
 const unsplashEnabled = Boolean(env('UNSPLASH_ACCESS_KEY'));
@@ -38,11 +45,12 @@ const templates = Object.keys(resolveDesign(settings).theme.pageTemplates);
     <PostEditor
       client:only="react"
       kind="page"
-      page={page}
+      page={editable}
       initialHTML={initialHTML}
       unsplashEnabled={unsplashEnabled}
       previewPath={previewPath}
       sharePath={sharePath}
+      livePath={livePath}
       templates={templates}
     />
   </body>

package/src/pages/admin/pages/index.astro

@@ -70,6 +70,7 @@ const fmt = (ts: number) => new Date(ts).toLocaleDateString('en-US', { month: 's
             </td>
             <td>
               <span class={`pill ${p.status}`}>{p.status}</span>
+              {p.draft && <span class="pill edited" title="Has pending edits — press Update in the editor to push them live">edited</span>}
               {p.isHome && <span class="pill home">home</span>}
               {I18N.enabled && <span class="pill lang">{(p.locale || I18N.defaultLocale).toUpperCase()}</span>}
             </td>

package/src/pages/admin/settings.astro

@@ -4,6 +4,7 @@ import { getRepo } from '../../lib/repo';
 import { verifySessionToken, OWNER_ENV, SESSION_COOKIE } from '../../lib/auth';
 import { invalidateRedirectCache } from '../../middleware';
 import { CONTENT } from '../../lib/content';
+import { UMAMI_ID_RE, META_PIXEL_ID_RE, TIKTOK_PIXEL_ID_RE, normalizeScriptUrl } from '../../lib/analytics';
 
 const repo = await getRepo(Astro.locals);
 
@@ -77,6 +78,57 @@ if (Astro.request.method === 'POST') {
       });
       flash = 'Code injection saved.';
     }
+  } else if (action === 'analytics') {
+    if (!isOwner) {
+      flashError = 'Only owners can edit analytics.';
+    } else {
+      // replay sample rate is edited as a percent, stored as a fraction
+      const replayPct = Number(String(form.get('umamiReplaySampleRate') ?? '15').trim());
+      const replayDuration = Number(String(form.get('umamiReplayMaxDuration') ?? '300000').trim());
+      const umami = {
+        enabled: form.get('umamiEnabled') === 'on',
+        websiteId: String(form.get('umamiWebsiteId') ?? '').trim(),
+        scriptUrl: String(form.get('umamiScriptUrl') ?? '').trim() || 'https://cloud.umami.is/script.js',
+        replay: {
+          enabled: form.get('umamiReplayEnabled') === 'on',
+          sampleRate: Math.round(replayPct) / 100,
+          maskLevel: (form.get('umamiReplayMaskLevel') === 'strict' ? 'strict' : 'moderate') as 'strict' | 'moderate',
+          maxDuration: replayDuration,
+        },
+      };
+      const metaPixel = {
+        enabled: form.get('metaEnabled') === 'on',
+        pixelId: String(form.get('metaPixelId') ?? '').trim(),
+      };
+      const tiktokPixel = {
+        enabled: form.get('tiktokEnabled') === 'on',
+        pixelId: String(form.get('tiktokPixelId') ?? '').trim(),
+      };
+      // reject bad values even while disabled — a stored ID must always be
+      // renderable, since these end up in set:html on every public page
+      if (umami.websiteId && !UMAMI_ID_RE.test(umami.websiteId)) {
+        flashError = 'Umami website ID should be a UUID — copy it from your Umami dashboard (Settings → Websites → Edit).';
+      } else if (!normalizeScriptUrl(umami.scriptUrl)) {
+        flashError = 'Umami script URL must be an https:// URL, e.g. https://cloud.umami.is/script.js';
+      } else if (!Number.isFinite(replayPct) || replayPct < 1 || replayPct > 100) {
+        flashError = 'Replay sample rate must be between 1 and 100 percent.';
+      } else if (!Number.isInteger(replayDuration) || replayDuration <= 0) {
+        flashError = 'Replay max duration is invalid.';
+      } else if (metaPixel.pixelId && !META_PIXEL_ID_RE.test(metaPixel.pixelId)) {
+        flashError = 'Meta Pixel ID should be numbers only — find it in Meta Events Manager.';
+      } else if (tiktokPixel.pixelId && !TIKTOK_PIXEL_ID_RE.test(tiktokPixel.pixelId)) {
+        flashError = 'TikTok Pixel ID should be letters and numbers only — find it in TikTok Events Manager.';
+      } else if (umami.enabled && !umami.websiteId) {
+        flashError = 'Enter the Umami website ID to enable it.';
+      } else if (metaPixel.enabled && !metaPixel.pixelId) {
+        flashError = 'Enter the Meta Pixel ID to enable it.';
+      } else if (tiktokPixel.enabled && !tiktokPixel.pixelId) {
+        flashError = 'Enter the TikTok Pixel ID to enable it.';
+      } else {
+        await repo.updateSettings({ analytics: { umami, metaPixel, tiktokPixel } });
+        flash = 'Analytics saved.';
+      }
+    }
   } else if (action === 'announcement') {
     // link must be a relative path or http(s) URL — never javascript: etc.
     const rawLink = String(form.get('annLink') ?? '').trim();
@@ -314,6 +366,102 @@ const remainingPresets = ORIGIN_PRESETS.filter((p) => !settings.draftsAllowedOri
     </div>
   )}
 
+  {isOwner && (
+    <div class="card card-pad">
+      <p class="card-title">Analytics</p>
+      <p style="margin:0">
+        Traffic and ad tracking on every public page. Only the ID is stored — the tracking code itself
+        is rendered by the CMS. The admin is never tracked. Mind visitor-consent rules (GDPR) if you
+        enable the ad pixels.
+      </p>
+      <form method="post">
+        <input type="hidden" name="action" value="analytics" />
+
+        <div style="border-top:1px solid var(--line);margin-top:14px;padding-top:12px">
+          <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
+            <input type="checkbox" name="umamiEnabled" checked={settings.analytics.umami.enabled} />
+            <span style="font-weight:600">Umami</span>
+          </label>
+          <div class="field-row">
+            <label class="field">
+              <span>Website ID</span>
+              <input type="text" name="umamiWebsiteId" value={settings.analytics.umami.websiteId} placeholder="94db1cb1-74f4-4a40-ad6c-962362670409" style="font-family:monospace;font-size:12.5px" />
+            </label>
+            <label class="field">
+              <span>Script URL</span>
+              <input type="text" name="umamiScriptUrl" value={settings.analytics.umami.scriptUrl} placeholder="https://cloud.umami.is/script.js" style="font-family:monospace;font-size:12.5px" />
+            </label>
+          </div>
+          <p class="hint" style="margin:0">
+            Privacy-friendly stats: pageviews, referrers, devices, countries, visit duration.
+            Umami Cloud by default — point Script URL at your own instance if self-hosting.
+          </p>
+          <div style="margin:10px 0 0 24px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px">
+            <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
+              <input type="checkbox" name="umamiReplayEnabled" checked={settings.analytics.umami.replay.enabled} />
+              <span style="font-weight:600">Session replay</span>
+            </label>
+            <div class="field-row">
+              <label class="field">
+                <span>Sample rate (%)</span>
+                <input type="number" name="umamiReplaySampleRate" min="1" max="100" step="1" value={Math.round(settings.analytics.umami.replay.sampleRate * 100)} />
+              </label>
+              <label class="field">
+                <span>Mask level</span>
+                <select name="umamiReplayMaskLevel">
+                  <option value="moderate" selected={settings.analytics.umami.replay.maskLevel === 'moderate'}>moderate</option>
+                  <option value="strict" selected={settings.analytics.umami.replay.maskLevel === 'strict'}>strict</option>
+                </select>
+              </label>
+              <label class="field">
+                <span>Max duration</span>
+                <select name="umamiReplayMaxDuration">
+                  <option value="60000" selected={settings.analytics.umami.replay.maxDuration === 60000}>1 minute</option>
+                  <option value="300000" selected={settings.analytics.umami.replay.maxDuration === 300000}>5 minutes</option>
+                  <option value="600000" selected={settings.analytics.umami.replay.maxDuration === 600000}>10 minutes</option>
+                  <option value="1800000" selected={settings.analytics.umami.replay.maxDuration === 1800000}>30 minutes</option>
+                </select>
+              </label>
+            </div>
+            <p class="hint" style="margin:0">
+              Records a sample of visitor sessions for playback in Umami (v3.1+, Behavior → Replays).
+              Umami keeps replays for 30 days. Inputs are masked — mind visitor-consent rules (GDPR) before enabling.
+            </p>
+          </div>
+        </div>
+
+        <div style="border-top:1px solid var(--line);margin-top:14px;padding-top:12px">
+          <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
+            <input type="checkbox" name="metaEnabled" checked={settings.analytics.metaPixel.enabled} />
+            <span style="font-weight:600">Meta Pixel</span>
+          </label>
+          <label class="field">
+            <span>Pixel ID</span>
+            <input type="text" name="metaPixelId" value={settings.analytics.metaPixel.pixelId} placeholder="724159876543210" style="font-family:monospace;font-size:12.5px;max-width:320px" />
+          </label>
+          <p class="hint" style="margin:0">Tracks page views for Facebook/Instagram ad attribution and retargeting audiences.</p>
+        </div>
+
+        <div style="border-top:1px solid var(--line);margin-top:14px;padding-top:12px">
+          <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
+            <input type="checkbox" name="tiktokEnabled" checked={settings.analytics.tiktokPixel.enabled} />
+            <span style="font-weight:600">TikTok Pixel <span style="display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;padding:2px 8px;border-radius:999px;background:var(--amber-soft);color:var(--amber);vertical-align:1px">Experimental</span></span>
+          </label>
+          <label class="field">
+            <span>Pixel ID</span>
+            <input type="text" name="tiktokPixelId" value={settings.analytics.tiktokPixel.pixelId} placeholder="CABC123DEF456GHI789" style="font-family:monospace;font-size:12.5px;max-width:320px" />
+          </label>
+          <p class="hint" style="margin:0">
+            Untested integration — the snippet follows TikTok’s published base code, but verify events
+            in TikTok Events Manager before relying on it.
+          </p>
+        </div>
+
+        <div class="form-actions"><button class="btn primary" type="submit">Save</button></div>
+      </form>
+    </div>
+  )}
+
   <div class="card card-pad">
     <p class="card-title">Announcement bar</p>
     <form method="post">

package/src/pages/blog/[slug].astro

@@ -7,6 +7,7 @@ import { highlightCodeHtml } from '../../lib/highlightCode';
 import { verifySessionToken, SESSION_COOKIE } from '../../lib/auth';
 import { slugify, authorSlug, publicTags } from '../../lib/schema';
 import { resolveDesign } from '../../lib/theme';
+import { effectiveSettings } from '../../lib/designPreview';
 import { siteOrigin } from '../../lib/seo';
 import { formatDate } from '../../lib/dates';
 import { collectionFromPath, collectionUrl, tagUrl } from '../../lib/content';
@@ -24,13 +25,15 @@ if (!post || (post.status !== 'published' && !isAdmin)) {
   return new Response(null, { status: 404, statusText: 'Not found' });
 }
 const authorIds = post.authorIds.length ? post.authorIds : post.authorId ? [post.authorId] : [];
-const [tags, allUsers, allPosts, settings, allMedia] = await Promise.all([
+const [tags, allUsers, allPosts, rawSettings, allMedia] = await Promise.all([
   repo.listTags(),
   authorIds.length ? repo.listUsers() : Promise.resolve([]),
   repo.listPublishedPosts(col.key), // related reading stays within the collection
   repo.getSettings(),
   post.cover.startsWith('/media/') ? repo.listMedia() : Promise.resolve([]),
 ]);
+// ?designPreview=1 (admin-only) renders the staged Design-screen changes
+const settings = effectiveSettings(rawSettings, Astro.url, Astro.cookies);
 // ordered author objects; the first is the primary (gets the author card)
 const authors = authorIds
   .map((id) => allUsers.find((u) => u.id === id))

package/src/pages/index.astro

@@ -3,6 +3,7 @@ import Site from '../layouts/Site.astro';
 import WidgetRenderer from '../components/WidgetRenderer.astro';
 import { getRepo } from '../lib/repo';
 import { resolveDesign } from '../lib/theme';
+import { effectiveSettings } from '../lib/designPreview';
 import { expandDynamicBlocks } from '../lib/dynamicBlocks';
 import { I18N, localeFromPath } from '../lib/i18n';
 
@@ -11,10 +12,12 @@ const repo = await getRepo(Astro.locals);
 // resolved from the request path (injectRoute can't pass props)
 const locale = I18N.enabled ? localeFromPath(Astro.url.pathname) : I18N.defaultLocale;
 const wantsLocaleHome = I18N.enabled && locale !== I18N.defaultLocale;
-let [home, settings] = await Promise.all([
+let [home, rawSettings] = await Promise.all([
   repo.getHomePage(wantsLocaleHome ? locale : undefined),
   repo.getSettings(),
 ]);
+// ?designPreview=1 (admin-only) renders the staged Design-screen changes
+const settings = effectiveSettings(rawSettings, Astro.url, Astro.cookies);
 // a locale home that isn't authored yet falls back to the default home —
 // /es must never 404 mid-setup
 if (wantsLocaleHome && !home) home = await repo.getHomePage();

package/src/pages/links.astro

@@ -1,6 +1,7 @@
 ---
 import Site from '../layouts/Site.astro';
 import { getRepo } from '../lib/repo';
+import { cleanEventName } from '../lib/analytics';
 
 const repo = await getRepo(Astro.locals);
 const [links, settings] = await Promise.all([repo.listLinks(), repo.getSettings()]);
@@ -11,6 +12,11 @@ const profileBio = settings.linksBio || settings.tagline;
 
 const SPACER_PX: Record<string, number> = { s: 16, m: 36, l: 72 };
 
+// every link button is auto-stamped with an analytics event so per-link click
+// counts (sponsors!) show up in Umami alongside the first-party /go counter
+const linkEvent = (label: string): string | undefined =>
+  cleanEventName(`Link: ${label}`) === 'Link:' ? undefined : cleanEventName(`Link: ${label}`);
+
 // icon column convention: '<svg…' inline markup, http/​/ image URL,
 // 'favicon' derive from the link's host, anything else = emoji/text
 function iconInfo(l: (typeof links)[number]): { type: 'svg' | 'img' | 'emoji' | 'none'; value: string } {
@@ -96,13 +102,13 @@ const visible = links.filter((l) => {
         case 'html':
           return <div class="link-html" set:html={l.html} />;
         case 'email':
-          return <a class="link-btn" style={buttonStyle(l)} href={`mailto:${l.url}`}>{icon}<span class="link-label">{l.label || l.url}</span></a>;
+          return <a class="link-btn" style={buttonStyle(l)} href={`mailto:${l.url}`} data-umami-event={linkEvent(l.label || l.url)}>{icon}<span class="link-label">{l.label || l.url}</span></a>;
         case 'phone':
-          return <a class="link-btn" style={buttonStyle(l)} href={`tel:${l.url.replace(/[^+\d]/g, '')}`}>{icon}<span class="link-label">{l.label || l.url}</span></a>;
+          return <a class="link-btn" style={buttonStyle(l)} href={`tel:${l.url.replace(/[^+\d]/g, '')}`} data-umami-event={linkEvent(l.label || l.url)}>{icon}<span class="link-label">{l.label || l.url}</span></a>;
         case 'vcard':
-          return <a class="link-btn" style={buttonStyle(l)} href={vcardHref(l)} download={`${(l.meta.firstName as string) || 'contact'}.vcf`}>{icon}<span class="link-label">{l.label || 'Save contact'}</span></a>;
+          return <a class="link-btn" style={buttonStyle(l)} href={vcardHref(l)} download={`${(l.meta.firstName as string) || 'contact'}.vcf`} data-umami-event={linkEvent(l.label || 'Save contact')}>{icon}<span class="link-label">{l.label || 'Save contact'}</span></a>;
         default:
-          return <a class="link-btn" style={buttonStyle(l)} href={`/go/${l.id}`} rel="noopener">{icon}<span class="link-label">{l.label}</span></a>;
+          return <a class="link-btn" style={buttonStyle(l)} href={`/go/${l.id}`} rel="noopener" data-umami-event={linkEvent(l.label)}>{icon}<span class="link-label">{l.label}</span></a>;
       }
     })}
     {visible.length === 0 && <p>No links yet.</p>}

package/src/pages/preview/[type]/[id].astro

@@ -7,9 +7,12 @@ import { verifyPreviewToken } from '../../../lib/preview';
 import { expandDynamicBlocks } from '../../../lib/dynamicBlocks';
 import { highlightCodeHtml } from '../../../lib/highlightCode';
 import { verifySessionToken, SESSION_COOKIE } from '../../../lib/auth';
+import { mergePageDraft, mergePostDraft } from '../../../lib/drafts';
 
 // Draft preview, any status. Reachable by a logged-in admin (the editor's
-// preview iframe) or by anyone holding a signed share token.
+// preview iframe) or by anyone holding a signed share token. Live documents
+// with pending edits render the PENDING version — exactly what Update will
+// publish — while the public URL keeps serving the live one.
 const { type, id } = Astro.params;
 if (type !== 'post' && type !== 'page') return new Response(null, { status: 404 });
 
@@ -20,9 +23,11 @@ if (!isAdmin && !verifyPreviewToken(type, id!, token)) {
 }
 
 const repo = await getRepo(Astro.locals);
-const post = type === 'post' ? await repo.getPost(id!) : null;
-const page = type === 'page' ? await repo.getPage(id!) : null;
-if (!post && !page) return new Response(null, { status: 404 });
+const livePost = type === 'post' ? await repo.getPost(id!) : null;
+const livePage = type === 'page' ? await repo.getPage(id!) : null;
+if (!livePost && !livePage) return new Response(null, { status: 404 });
+const post = livePost ? mergePostDraft(livePost) : null;
+const page = livePage ? mergePageDraft(livePage) : null;
 
 const html = post ? highlightCodeHtml(await expandDynamicBlocks(post.bodyHtml || renderMarkdown(post.body), repo)) : '';
 const pageHtml = page?.bodyHtml ? highlightCodeHtml(await expandDynamicBlocks(page.bodyHtml, repo)) : '';

package/src/styles/admin.css

@@ -140,6 +140,8 @@ table.list { width: 100%; border-collapse: collapse; }
 .pill.scheduled { background: #fde5d8; color: var(--accent-deep); }
 .pill.archived { background: rgb(102 109 124 / 12%); color: var(--muted); }
 .pill.home { background: #fde5d8; color: var(--accent-deep); }
+/* live doc with staged edits awaiting Update */
+.pill.edited { background: var(--amber-soft); color: var(--amber); margin-left: 4px; }
 .pill.lang { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
 
 /* buttons & forms */
@@ -443,6 +445,8 @@ input.bare.mono { font-family: ui-monospace, 'SF Mono', monospace; font-size: 12
 .lm-savestate { font-size: 11.5px; color: var(--faint); margin-left: auto; }
 .lm-savestate.saving { color: var(--muted); }
 .lm-savestate.error { color: var(--red); }
+/* local edits awaiting an explicit "Save changes" */
+.lm-savestate.dirty { color: var(--amber); font-weight: 600; }
 .lm-phone {
   border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
   background: #fff; height: min(640px, calc(100vh - 140px)); box-shadow: var(--shadow-pop);

package/src/styles/cards.css

@@ -174,3 +174,26 @@ a.pc-info-card:hover { border-color: var(--info-badge); }
 .pc-info-row[data-icon='tag']::before { display: inline-block; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7l9 9-7 7-9-9zM8.5 8.5h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7l9 9-7 7-9-9zM8.5 8.5h.01'/%3E%3C/svg%3E"); }
 .pc-info-row[data-icon='check']::before { display: inline-block; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-11'/%3E%3C/svg%3E"); }
 }
+
+@layer base {
+/* toggle — collapsible section, native <details> so no JS needed */
+.pc-toggle { border: 1px solid var(--line, #e3e3e0); border-radius: 10px; padding: 12px 18px; margin: 1.6em 0; }
+.pc-toggle > summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
+.pc-toggle > summary::-webkit-details-marker { display: none; }
+.pc-toggle > summary::before { content: "▸"; font-size: 0.8em; color: var(--muted, #777); transition: transform 0.15s ease; }
+.pc-toggle[open] > summary::before { transform: rotate(90deg); }
+.pc-toggle-body { margin-top: 10px; }
+.pc-toggle-body > :last-child { margin-bottom: 0; }
+
+/* table of contents — expanded at request time from the body's headings */
+.pc-toc {
+  display: flex; flex-direction: column; gap: 2px;
+  border-left: 3px solid var(--accent, #6e7bff); background: rgb(0 0 0 / 3%);
+  border-radius: 0 10px 10px 0; padding: 14px 20px; margin: 1.6em 0;
+}
+.pc-toc-title { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; font-weight: 700; color: var(--muted, #777); margin-bottom: 6px; }
+.pc-toc-link { color: inherit; text-decoration: none; padding: 2px 0; font-size: 0.95em; }
+a.pc-toc-link:hover { color: var(--accent, #6e7bff); }
+.pc-toc-link[data-depth='1'] { padding-left: 16px; }
+.pc-toc-link[data-depth='2'] { padding-left: 32px; }
+}

package/src/styles/editor.css

@@ -11,6 +11,7 @@
 }
 .pe-topbar-left, .pe-topbar-right { display: flex; align-items: center; gap: 10px; }
 .pe-savestate { font-size: 12.5px; color: var(--faint); }
+.pe-edited-dot { font-style: normal; font-weight: 600; color: var(--amber); }
 .pe-savestate.dirty { color: var(--muted); }
 .pe-savestate.saving { color: var(--muted); }
 .pe-savestate.error { color: var(--red); }
@@ -98,6 +99,7 @@
 /* prose */
 .pe-prose { outline: none; color: var(--text); font-size: 16.5px; line-height: 1.72; min-height: 320px; }
 .pe-prose p { margin: 0 0 0.9em; }
+.pe-prose h1 { font-size: 31px; letter-spacing: -0.02em; margin: 1.3em 0 0.5em; }
 .pe-prose h2 { font-size: 25px; letter-spacing: -0.015em; margin: 1.4em 0 0.5em; }
 .pe-prose h3 { font-size: 19px; letter-spacing: -0.01em; margin: 1.3em 0 0.4em; }
 .pe-prose a { color: var(--accent-deep); text-decoration: underline; text-decoration-color: rgb(238 93 32 / 35%); }
@@ -106,6 +108,8 @@
 .pe-prose pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; overflow-x: auto; margin: 1.2em 0; }
 .pe-prose pre code { background: none; border: none; padding: 0; font-size: 13.5px; }
 .pe-prose hr { border: none; border-top: 1px solid var(--line); margin: 2em auto; width: 120px; }
+.pe-prose mark { background: #fde58a; border-radius: 3px; padding: 0 2px; }
+.pe-bubble mark { background: #fde58a; border-radius: 3px; padding: 0 4px; color: #1a1d25; }
 
 /* ---- code block (extensions/codeBlock.tsx) ---- */
 .pe-codeblock { position: relative; margin: 1.2em 0; }
@@ -246,6 +250,12 @@
   background: none; border: none; border-radius: var(--r-md); padding: 7px 10px; cursor: pointer; font-family: inherit;
 }
 .pe-slash-item.is-selected { background: var(--accent-soft); }
+.pe-slash-del {
+  margin-left: auto; padding: 2px 7px; border-radius: 6px; color: var(--faint);
+  font-size: 11px; opacity: 0; transition: opacity 0.1s ease;
+}
+.pe-slash-item:hover .pe-slash-del, .pe-slash-item.is-selected .pe-slash-del { opacity: 1; }
+.pe-slash-del:hover { color: var(--red); background: var(--red-soft); }
 .pe-slash-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--muted); }
 .pe-slash-icon svg { width: 16px; height: 16px; }
 .pe-slash-item.is-selected .pe-slash-icon { color: var(--accent-deep); }
@@ -482,14 +492,27 @@
 /* floating link editor (⌘K) */
 .pe-linkedit {
   position: sticky; top: 12px; z-index: 60;
-  display: flex; gap: 8px; align-items: center;
   background: var(--panel, #fff); border: 1px solid var(--border, #d5d2ca);
   border-radius: 10px; padding: 8px 10px; margin: 0 auto 12px;
   max-width: 560px; box-shadow: 0 10px 30px rgb(0 0 0 / 14%);
 }
+.pe-linkedit-row { display: flex; gap: 8px; align-items: center; }
 .pe-linkedit input {
   flex: 1; border: 0; outline: none; font-size: 14px; background: none; color: inherit;
 }
+.pe-link-results {
+  border-top: 1px solid var(--line, #e3e5ec); margin-top: 8px; padding-top: 6px;
+  display: flex; flex-direction: column;
+}
+.pe-link-results button {
+  display: flex; align-items: baseline; gap: 8px; border: 0; background: none;
+  text-align: left; padding: 7px 8px; border-radius: 8px; cursor: pointer;
+  font: inherit; color: var(--text, #1a1d25);
+}
+.pe-link-results button.is-selected { background: var(--panel-2, #f4f5f8); }
+.pe-link-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pe-link-url { font-size: 12px; color: var(--faint, #8f95a3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pe-link-kind { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint, #8f95a3); }
 
 /* shortcut cheat-sheet */
 .pe-wordcount { display: flex; align-items: center; gap: 10px; }
@@ -594,3 +617,32 @@
 .pe-infocard-icon svg { width: 14px; height: 14px; }
 .pe-infocard-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
 .pe-infocard-href { flex: 1; }
+
+/* toggle card (editor) — cards.css isn't loaded in the admin, so the box
+   look is restated here on the editor tokens */
+.pe-toggle { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; margin: 1.2em 0; }
+.pe-toggle.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
+.pe-toggle .pe-toggle-head { display: flex; align-items: center; gap: 8px; }
+.pe-toggle-chevron {
+  border: 0; background: none; cursor: pointer; color: var(--muted, #666d7c);
+  font-size: 13px; padding: 2px 4px; transition: transform 0.15s ease;
+}
+.pe-toggle.is-open .pe-toggle-chevron { transform: rotate(90deg); }
+.pe-toggle-summary { flex: 1; border: 0; outline: none; background: none; font: inherit; font-weight: 600; color: inherit; }
+.pe-toggle .pc-toggle-body { margin-top: 10px; }
+
+/* toc card (editor) */
+.pe-toc .pc-toc {
+  display: flex; flex-direction: column; gap: 2px; margin: 0;
+  border-left: 3px solid var(--accent); background: var(--panel-2);
+  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 14px 18px;
+}
+.pe-toc .pc-toc-link { padding: 2px 0; font-size: 14.5px; }
+.pe-toc .pc-toc-link[data-depth='1'] { padding-left: 16px; }
+.pe-toc .pc-toc-link[data-depth='2'] { padding-left: 32px; }
+.pe-toc-title {
+  border: 0; outline: none; background: none; text-transform: uppercase;
+  letter-spacing: 0.08em; font-size: 11.5px; font-weight: 700;
+  color: var(--muted, #666d7c); margin-bottom: 6px; padding: 0;
+}
+.pe-toc-empty { color: var(--faint, #8f95a3); font-size: 13.5px; }

package/src/styles/site.css

@@ -77,6 +77,7 @@ pre .hljs-strong { font-weight: 700; }
 code { font-family: ui-monospace, 'SF Mono', monospace; font-size: 0.9em; }
 p code { background: var(--soft); padding: 2px 5px; border-radius: 4px; }
 blockquote { margin: 16px 0; padding: 4px 18px; border-left: 3px solid var(--line); color: var(--muted); }
+mark { background: #fde58a; border-radius: 3px; padding: 0 2px; }
 table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; line-height: 1.5; }
 th, td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
 th { background: var(--soft); font-weight: 600; }
@@ -233,6 +234,8 @@ a.tag:hover { background: var(--accent); color: #fff; }
   .post-kicker:empty { display: none; }
   .post-layout { margin-top: 8px; }
   .post-content > :first-child { margin-top: 0; }
+  /* in-body h1: below the post title's scale, above h2 */
+  .post-content h1 { font-size: 30px; margin: 1.2em 0 0.4em; }
 
   .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
   .related-card h3 { font-size: 18px; line-height: 1.3; margin: 4px 0 4px; }