@acms-subir/core 0.1.0 → 0.3.0

package/src/components/editor/PreviewOverlay.tsx

@@ -1,76 +1,275 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-// Full-screen draft preview: live iframe of the public route with
-// desktop / tablet / mobile widths and a copyable share link that works
-// logged-out (signed token).
+// Full-screen draft preview. Three views of the same draft:
+//   Page   — live iframe of the public route at desktop / tablet / phone width
+//   Search — how the result renders on Google
+//   Social — the link card X / Facebook / iMessage build from OG tags
+// plus a "Before you publish" checklist and a Share popover with the signed,
+// login-free link. Search/Social read the same fields the public <head> uses
+// (seoTitle → title, seoDesc → excerpt → first paragraph, cover image), and
+// edit them in place under the preview so the card updates as you type.
 
 const DEVICES = [
-  { key: 'desktop', label: 'Desktop', width: '100%' },
-  { key: 'tablet', label: 'Tablet', width: '768px' },
-  { key: 'mobile', label: 'Mobile', width: '390px' },
+  { key: 'desktop', label: 'Desktop', width: '100%', d: 'M3 4h18v12H3zM8 20h8M12 16v4' },
+  { key: 'tablet', label: 'Tablet', width: '768px', d: 'M5 3h14v18H5zM11 17h2' },
+  { key: 'mobile', label: 'Phone', width: '390px', d: 'M7 2h10v20H7zM11 18h2' },
 ] as const;
+type View = 'page' | 'search' | 'social';
+
+export interface PreviewMeta {
+  title: string;
+  seoTitle: string;
+  seoDesc: string;
+  excerpt: string;
+  cover: string;
+  coverAlt: string;
+  path: string;        // public path the doc will live at
+  firstParagraph: string;
+  links: number;
+  imagesMissingAlt: number;
+}
 
 interface Props {
   open: boolean;
   url: string;      // admin-session preview (relative)
-  shareUrl: string; // token preview (absolute-ish), safe to send around
+  shareUrl: string; // token preview, safe to send around
+  meta: PreviewMeta;
+  site: { title: string; url: string };
+  isPost: boolean;
+  startView?: View;
+  onChange: (patch: Partial<Pick<PreviewMeta, 'seoTitle' | 'seoDesc' | 'coverAlt'>>) => void;
+  onPickCover: () => void;
   onClose: () => void;
 }
 
-export function PreviewOverlay({ open, url, shareUrl, onClose }: Props) {
+// character budget bar: fills toward the limit, amber past it
+function Meter({ n, max }: { n: number; max: number }) {
+  const state = n === 0 ? 'empty' : n > max ? 'over' : 'ok';
+  return (
+    <span className={`pe-meter ${state}`} aria-hidden="true">
+      <i style={{ width: `${Math.min(100, (n / max) * 100)}%` }} />
+    </span>
+  );
+}
+
+export function PreviewOverlay({ open, url, shareUrl, meta, site, isPost, startView = 'page', onChange, onPickCover, onClose }: Props) {
+  const [view, setView] = useState<View>('page');
   const [device, setDevice] = useState<(typeof DEVICES)[number]>(DEVICES[0]);
   const [copied, setCopied] = useState(false);
+  const [shareOpen, setShareOpen] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
+  const titleRef = useRef<HTMLInputElement>(null);
+  const descRef = useRef<HTMLTextAreaElement>(null);
+  const altRef = useRef<HTMLInputElement>(null);
+  // "Fix" jumps to the view that edits the field, then focuses it
+  const [focusField, setFocusField] = useState<'title' | 'desc' | 'alt' | null>(null);
+  useEffect(() => {
+    if (!focusField) return;
+    ({ title: titleRef, desc: descRef, alt: altRef })[focusField].current?.focus();
+    setFocusField(null);
+  }, [focusField, view]);
 
   useEffect(() => {
     if (!open) return;
     setRefreshKey((k) => k + 1); // fresh content each time it opens
-    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    setView(startView);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      if (document.querySelector('.pe-modal-backdrop')) return; // the image picker closes first
+      if (shareOpen) setShareOpen(false);
+      else onClose();
+    };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [open, onClose]);
+  }, [open, onClose, shareOpen]);
 
   if (!open) return null;
 
+  const origin = site.url ? site.url.replace(/\/+$/, '') : location.origin;
+  const host = origin.replace(/^https?:\/\//, '');
+  const shareHref = new URL(shareUrl, location.origin).href;
+  const title = meta.seoTitle || meta.title || 'Untitled';
+  const fullTitle = site.title && !title.includes(site.title) ? `${title} | ${site.title}` : title;
+  const desc = meta.seoDesc || meta.excerpt || meta.firstParagraph;
+  const crumbs = [host, ...meta.path.split('/').filter(Boolean)].join(' › ');
+  const clip = (s: string, n: number) => (s.length > n ? `${s.slice(0, n - 1).trimEnd()}…` : s);
+
+  const fixIn = (v: View, field: 'title' | 'desc' | 'alt' | null) => () => { setView(v); setFocusField(field); };
+  const checks: { ok: boolean | 'warn'; label: string; detail: string; fix?: () => void }[] = [
+    {
+      ok: title.length > 0 && title.length <= 60 ? true : 'warn',
+      label: 'Search title',
+      detail: `${title.length} characters${title.length > 60 ? ' — Google cuts titles around 60' : ', fits'}`,
+      fix: title.length > 60 ? fixIn('search', 'title') : undefined,
+    },
+    {
+      ok: meta.seoDesc || meta.excerpt ? true : 'warn',
+      label: 'Meta description',
+      detail: meta.seoDesc || meta.excerpt ? `${desc.length} characters` : 'Missing — search engines will use the first paragraph',
+      fix: !(meta.seoDesc || meta.excerpt) ? fixIn('search', 'desc') : undefined,
+    },
+    ...(isPost
+      ? [{
+          ok: meta.cover ? (meta.coverAlt ? true : 'warn') : 'warn',
+          label: 'Feature image',
+          detail: !meta.cover ? 'None — social cards will be text-only' : meta.coverAlt ? 'Set, with alt text' : 'Missing alt text',
+          fix: !meta.cover ? () => { setView('social'); onPickCover(); } : !meta.coverAlt ? fixIn('social', 'alt') : undefined,
+        } as const]
+      : []),
+    {
+      ok: meta.imagesMissingAlt === 0 ? true : 'warn',
+      label: 'Image alt text',
+      detail: meta.imagesMissingAlt === 0 ? 'Every image is described' : `${meta.imagesMissingAlt} image${meta.imagesMissingAlt === 1 ? '' : 's'} without alt text`,
+    },
+    { ok: true, label: 'Links', detail: meta.links ? `${meta.links} link${meta.links === 1 ? '' : 's'} in the body` : 'No links' },
+  ];
+  const passed = checks.filter((c) => c.ok === true).length;
+
+  const titleLen = (meta.seoTitle || meta.title).length;
+  const descLen = (meta.seoDesc || meta.excerpt || meta.firstParagraph).length;
+  const seoInputs = (
+    <>
+      <label className="pe-seo-field">
+        <span className="pe-seo-label">Meta title <em className={titleLen > 60 ? 'over' : ''}>{titleLen} / 60</em></span>
+        <input ref={titleRef} value={meta.seoTitle} placeholder={meta.title || 'Untitled'} onChange={(e) => onChange({ seoTitle: e.target.value })} />
+        <Meter n={titleLen} max={60} />
+        <small>{meta.seoTitle ? 'Overrides the title in search and social.' : 'Empty — uses the title.'}</small>
+      </label>
+      <label className="pe-seo-field">
+        <span className="pe-seo-label">Meta description <em className={descLen > 160 ? 'over' : ''}>{descLen} / 160</em></span>
+        <textarea ref={descRef} rows={3} value={meta.seoDesc} placeholder={meta.excerpt || meta.firstParagraph || 'One or two sentences that make people click'} onChange={(e) => onChange({ seoDesc: e.target.value })} />
+        <Meter n={descLen} max={160} />
+        <small>{meta.seoDesc ? 'Overrides the excerpt in search and social.' : meta.excerpt ? 'Empty — uses the excerpt.' : 'Empty — uses the first paragraph.'}</small>
+      </label>
+    </>
+  );
+  const seoFields = <section className="pe-seo-edit">{seoInputs}</section>;
+
   return (
     <div className="pe-preview">
       <div className="pe-preview-bar">
-        <button type="button" className="pe-btn ghost sm" onClick={onClose}>‹ Back to editor</button>
-        <div className="pe-devices">
-          {DEVICES.map((d) => (
-            <button
-              key={d.key}
-              type="button"
-              className={device.key === d.key ? 'is-active' : ''}
-              onClick={() => setDevice(d)}
-            >
-              {d.label}
-            </button>
-          ))}
+        <div className="pe-preview-left">
+          <button type="button" className="pe-btn ghost sm" onClick={onClose}>‹ <span className="pe-hide-sm">Back to editor</span></button>
+        </div>
+        <div className="pe-preview-center">
+          <div className="pe-seg" role="tablist" aria-label="Preview view">
+            {(['page', 'search', 'social'] as View[]).map((v) => (
+              <button key={v} type="button" role="tab" aria-selected={view === v} onClick={() => setView(v)}>
+                {v[0].toUpperCase() + v.slice(1)}
+              </button>
+            ))}
+          </div>
+          {view === 'page' && (
+            <div className="pe-seg pe-hide-sm" role="group" aria-label="Device width">
+              {DEVICES.map((d) => (
+                <button key={d.key} type="button" aria-pressed={device.key === d.key} title={d.label} onClick={() => setDevice(d)}>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d={d.d} /></svg>
+                </button>
+              ))}
+            </div>
+          )}
         </div>
         <div className="pe-preview-actions">
-          <button
-            type="button"
-            className="pe-btn ghost sm"
-            onClick={async () => {
-              await navigator.clipboard.writeText(new URL(shareUrl, location.origin).href);
-              setCopied(true);
-              setTimeout(() => setCopied(false), 1600);
-            }}
-          >
-            {copied ? 'Copied ✓' : 'Copy share link'}
-          </button>
-          <a className="pe-btn ghost sm" href={url} target="_blank" rel="noopener">Open in tab ↗</a>
+          <div className="pe-share-wrap">
+            <button type="button" className="pe-btn sm" onClick={() => setShareOpen((v) => !v)} aria-expanded={shareOpen}>
+              Share <span className="pe-hide-sm">draft</span>
+            </button>
+            {shareOpen && (
+              <div className="pe-share" role="dialog" aria-label="Share preview link">
+                <b>Share a preview link</b>
+                <p>Anyone with this link can read the draft without signing in. It always shows the latest autosave.</p>
+                <div className="pe-share-row">
+                  <input readOnly value={shareHref} onFocus={(e) => e.currentTarget.select()} aria-label="Preview link" />
+                  <button
+                    type="button"
+                    className="pe-btn primary sm"
+                    onClick={async () => {
+                      if (navigator.share && matchMedia('(pointer: coarse)').matches) {
+                        try { await navigator.share({ title: meta.title, url: shareHref }); return; } catch { /* cancelled */ }
+                      }
+                      await navigator.clipboard.writeText(shareHref);
+                      setCopied(true);
+                      setTimeout(() => setCopied(false), 1600);
+                    }}
+                  >
+                    {copied ? 'Copied ✓' : 'Copy'}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+          <a className="pe-btn ghost sm pe-hide-sm" href={url} target="_blank" rel="noopener">Open ↗</a>
         </div>
       </div>
-      <div className="pe-preview-stage">
-        <iframe
-          key={refreshKey}
-          src={url}
-          title="Preview"
-          style={{ width: device.width }}
-          className={device.key !== 'desktop' ? 'is-framed' : ''}
-        />
+      <div className="pe-preview-body">
+        <div className={`pe-preview-stage view-${view}`}>
+          {view === 'page' && (
+            <iframe
+              key={refreshKey}
+              src={url}
+              title="Preview"
+              style={{ width: device.width }}
+              className={device.key !== 'desktop' ? 'is-framed' : ''}
+            />
+          )}
+          {view === 'search' && (
+            <div className="pe-seo-view">
+              <div className="pe-serp">
+                <div className="pe-serp-site"><span className="pe-serp-fav"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c2.5 2.4 3.8 5.6 3.8 9S14.5 18.6 12 21c-2.5-2.4-3.8-5.6-3.8-9S9.5 5.4 12 3z" /></svg></span><span><b>{site.title || host}</b><small>{crumbs}</small></span></div>
+                <div className="pe-serp-title">{clip(fullTitle, 62)}</div>
+                <div className="pe-serp-desc">{desc ? clip(desc, 158) : <i>No description yet.</i>}</div>
+              </div>
+              {seoFields}
+            </div>
+          )}
+          {view === 'social' && (
+            <div className="pe-seo-view">
+              <div className="pe-og">
+                {meta.cover ? <img src={meta.cover} alt={meta.coverAlt} /> : <div className="pe-og-empty">No feature image — this card shows text only</div>}
+                <div className="pe-og-text">
+                  <small>{host}</small>
+                  <b>{clip(title, 70)}</b>
+                  {desc && <span>{clip(desc, 110)}</span>}
+                </div>
+              </div>
+              <section className="pe-seo-edit">
+                {isPost && (
+                  <div className="pe-seo-image">
+                    {meta.cover ? <img src={meta.cover} alt="" /> : <span className="pe-seo-image-empty" aria-hidden="true" />}
+                    <div>
+                      <b>Feature image</b>
+                      <small>{meta.cover ? 'Shown at 1.91 : 1 on X, Facebook, LinkedIn and iMessage' : 'Cards with an image get far more clicks'}</small>
+                    </div>
+                    <button type="button" className="pe-btn sm" onClick={onPickCover}>{meta.cover ? 'Change' : 'Add image'}</button>
+                  </div>
+                )}
+                {isPost && meta.cover && (
+                  <label className="pe-seo-field">
+                    <span className="pe-seo-label">Image alt text</span>
+                    <input ref={altRef} value={meta.coverAlt} placeholder="Describe the image for screen readers" onChange={(e) => onChange({ coverAlt: e.target.value })} />
+                  </label>
+                )}
+                <p className="pe-seo-note">Social cards use the same title and description as search.</p>
+                {seoInputs}
+              </section>
+            </div>
+          )}
+        </div>
+        <aside className="pe-checks">
+          <div className="pe-checks-head"><b>Before you publish</b><span>{passed} / {checks.length}</span></div>
+          {checks.map((c) => (
+            <div className="pe-check-row" key={c.label}>
+              <i className={c.ok === true ? 'ok' : 'warn'}>{c.ok === true ? '✓' : '!'}</i>
+              <div><b>{c.label}</b><small>{c.detail}</small></div>
+              {c.fix && <button type="button" className="pe-btn sm" onClick={c.fix}>Fix</button>}
+            </div>
+          ))}
+        </aside>
       </div>
     </div>
   );

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

@@ -83,6 +83,18 @@ export const CalendarCard = Node.create({
 });
 
 interface PreviewItem { when: string; title: string; cal: number }
+interface SiteCalendar { slug: string; name: string; color: string; visibility: string }
+
+const isSiteSource = (s: string) => s === 'acms:all' || s.startsWith('acms:cal:');
+
+// site calendars for the picker, fetched once per editor session
+let siteCalendarsPromise: Promise<SiteCalendar[]> | null = null;
+function loadSiteCalendars(): Promise<SiteCalendar[]> {
+  siteCalendarsPromise ??= actions.calendars.list({}).then((r) =>
+    r.error ? [] : r.data.calendars.filter((c) => c.visibility !== 'private' && c.kind === 'native')
+  );
+  return siteCalendarsPromise;
+}
 
 function CalendarView({ node, updateAttributes, deleteNode, selected }: NodeViewProps) {
   const a = node.attrs;
@@ -92,6 +104,17 @@ function CalendarView({ node, updateAttributes, deleteNode, selected }: NodeView
   const [error, setError] = useState('');
   const [adding, setAdding] = useState(false);
   const [preview, setPreview] = useState<PreviewItem[] | null>(null);
+  const [site, setSite] = useState<SiteCalendar[]>([]);
+  useEffect(() => { void loadSiteCalendars().then(setSite); }, []);
+  const label = (s: string) =>
+    s === 'acms:all' ? 'All site events' : s.startsWith('acms:cal:') ? site.find((c) => `acms:cal:${c.slug}` === s)?.name ?? s.slice(9) : calendarSrcLabel(s);
+  const dot = (s: string, i: number) =>
+    s.startsWith('acms:cal:') ? site.find((c) => `acms:cal:${c.slug}` === s)?.color ?? CAL_DOT_COLORS[i % CAL_DOT_COLORS.length] : CAL_DOT_COLORS[i % CAL_DOT_COLORS.length];
+  const addSite = (value: string) => void addSource(value);
+  const unusedSite = [
+    ...(sources.includes('acms:all') ? [] : [{ value: 'acms:all', name: 'All site events' }]),
+    ...site.filter((c) => !sources.includes(`acms:cal:${c.slug}`)).map((c) => ({ value: `acms:cal:${c.slug}`, name: c.name })),
+  ];
 
   const addSource = async (raw: string) => {
     const value = raw.trim();
@@ -140,6 +163,15 @@ function CalendarView({ node, updateAttributes, deleteNode, selected }: NodeView
           />
           <button type="submit" className="pe-btn primary sm" disabled={busy}>{busy ? 'Checking…' : 'Add calendar'}</button>
           {error && <span className="pe-embed-error">{error}</span>}
+          <span className="pe-cal-site">
+            <span>Or show this site’s events:</span>
+            <button type="button" className="pe-btn sm" disabled={busy} onClick={() => addSite('acms:all')}>All events</button>
+            {site.map((c) => (
+              <button key={c.slug} type="button" className="pe-btn sm" disabled={busy} onClick={() => addSite(`acms:cal:${c.slug}`)}>
+                <i style={{ background: c.color }} aria-hidden="true" />{c.name}
+              </button>
+            ))}
+          </span>
         </form>
       </NodeViewWrapper>
     );
@@ -162,10 +194,12 @@ function CalendarView({ node, updateAttributes, deleteNode, selected }: NodeView
             {[3, 4, 5, 6, 8, 10, 15, 20].map((n) => <option key={n} value={n}>{n} events</option>)}
           </select>
         )}
-        <label>
-          <input type="checkbox" checked={a.showOpenLink} onChange={(e) => updateAttributes({ showOpenLink: e.target.checked })} />
-          Google link
-        </label>
+        {sources.some((x) => !isSiteSource(x)) && (
+          <label>
+            <input type="checkbox" checked={a.showOpenLink} onChange={(e) => updateAttributes({ showOpenLink: e.target.checked })} />
+            Google link
+          </label>
+        )}
       </div>
       <div className="pe-calendar-config" contentEditable={false}>
         <input
@@ -184,8 +218,8 @@ function CalendarView({ node, updateAttributes, deleteNode, selected }: NodeView
       <div className="pe-cal-sources" contentEditable={false}>
         {sources.map((s, i) => (
           <span className="pe-cal-chip" key={s}>
-            <i style={{ background: CAL_DOT_COLORS[i % CAL_DOT_COLORS.length] }} />
-            {calendarSrcLabel(s)}
+            <i style={{ background: dot(s, i) }} />
+            {label(s)}
             <button
               type="button" title="Remove calendar"
               onClick={() => updateAttributes({ sources: sources.filter((x) => x !== s) })}
@@ -203,7 +237,17 @@ function CalendarView({ node, updateAttributes, deleteNode, selected }: NodeView
             <button type="submit" className="pe-btn sm" disabled={busy}>{busy ? '…' : 'Add'}</button>
           </form>
         ) : (
-          sources.length < 6 && <button type="button" className="pe-btn sm" onClick={() => setAdding(true)}>+ Add calendar</button>
+          sources.length < 6 && (
+            <>
+              <button type="button" className="pe-btn sm" onClick={() => setAdding(true)}>+ Add feed</button>
+              {unusedSite.length > 0 && (
+                <select className="pe-cal-sitepick" value="" onChange={(e) => e.target.value && addSite(e.target.value)} aria-label="Add a site calendar">
+                  <option value="">+ Site calendar…</option>
+                  {unusedSite.map((o) => <option key={o.value} value={o.value}>{o.name}</option>)}
+                </select>
+              )}
+            </>
+          )
         )}
         {error && <span className="pe-embed-error">{error}</span>}
       </div>

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

@@ -2,6 +2,7 @@ import { Node } from '@tiptap/react';
 import { NodeViewWrapper, NodeViewContent, ReactNodeViewRenderer } from '@tiptap/react';
 import type { NodeViewProps } from '@tiptap/react';
 import { useState } from 'react';
+import { cleanEventName } from '../../../lib/analytics';
 
 // Card nodes shared by the post editor. renderHTML emits the public markup
 // (`.pc-*` classes, styled in src/styles/cards.css); parseHTML round-trips it
@@ -292,6 +293,8 @@ export const ButtonCard = Node.create({
       label: { default: '' },
       href: { default: '' },
       align: { default: 'center' },
+      // optional analytics event name → data-umami-event on the public <a>
+      event: { default: '' },
     };
   },
 
@@ -306,6 +309,7 @@ export const ButtonCard = Node.create({
             label: link?.textContent ?? '',
             href: link?.getAttribute('href') ?? '',
             align: e.getAttribute('data-align') ?? 'center',
+            event: link?.getAttribute('data-umami-event') ?? '',
           };
         },
       },
@@ -314,10 +318,15 @@ export const ButtonCard = Node.create({
 
   renderHTML({ node }) {
     const a = node.attrs;
+    const event = cleanEventName(a.event ?? '');
     return [
       'div',
       { class: 'pc-buttoncard', 'data-align': a.align, style: `text-align:${a.align}` },
-      ['a', { class: 'pc-btncard', href: a.href }, a.label || 'Button'],
+      [
+        'a',
+        { class: 'pc-btncard', href: a.href, ...(event ? { 'data-umami-event': event } : {}) },
+        a.label || 'Button',
+      ],
     ];
   },
 
@@ -353,6 +362,13 @@ function ButtonCardView({ node, updateAttributes, deleteNode, selected }: NodeVi
           value={a.href}
           onChange={(e) => updateAttributes({ href: e.target.value })}
         />
+        <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>
       <div className="pc-buttoncard" style={{ textAlign: a.align as 'center' | 'left' }}>
         <span className="pc-btncard">{a.label || 'Button'}</span>

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

@@ -54,7 +54,7 @@ function CodeBlockView({ node, updateAttributes }: NodeViewProps) {
         ))}
       </select>
       <pre>
-        <NodeViewContent as="code" />
+        <NodeViewContent<'code'> as="code" />
       </pre>
     </NodeViewWrapper>
   );

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

@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react';
+import { Node } from '@tiptap/core';
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
+import type { NodeViewProps } from '@tiptap/react';
+import { actions } from 'astro:actions';
+
+// Event card: a dynamic block (data-dyn="events") rendered at request time by
+// lib/calendar/cards.ts, so dates, images and "cancelled" stay current.
+// Two modes: one chosen event (with its button), or the next few events from
+// a calendar as image cards — the "Coming up" strip for a home page.
+
+export const EventCard = Node.create({
+  name: 'eventCard',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      mode: { default: 'upcoming' }, // upcoming | single
+      eventId: { default: '' },
+      calendar: { default: '' }, // calendar slug; '' = all public
+      limit: { default: 3 },
+      layout: { default: 'grid' }, // grid | list
+      showImage: { default: true },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-dyn="events"]',
+        getAttrs: (el) => {
+          const e = el as HTMLElement;
+          return {
+            mode: e.getAttribute('data-mode') === 'single' ? 'single' : 'upcoming',
+            eventId: e.getAttribute('data-event') ?? '',
+            calendar: e.getAttribute('data-calendar') ?? '',
+            limit: Number(e.getAttribute('data-limit') ?? 3),
+            layout: e.getAttribute('data-layout') === 'list' ? 'list' : 'grid',
+            showImage: e.getAttribute('data-show-image') !== '0',
+          };
+        },
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    const a = node.attrs;
+    return [
+      'div',
+      {
+        'data-dyn': 'events',
+        'data-mode': a.mode,
+        'data-event': a.eventId,
+        'data-calendar': a.calendar,
+        'data-limit': String(a.limit),
+        'data-layout': a.layout,
+        'data-show-image': a.showImage ? '1' : '0',
+      },
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(EventCardView);
+  },
+});
+
+interface EventOption { id: string; title: string; when: string; status: string; cover: string }
+interface CalOption { slug: string; name: string; color: string }
+
+let cache: Promise<{ events: EventOption[]; calendars: CalOption[] }> | null = null;
+function loadOptions() {
+  cache ??= Promise.all([actions.events.list({ publishedOnly: false }), actions.calendars.list({})]).then(([ev, cal]) => ({
+    events: ev.error ? [] : ev.data.events,
+    calendars: cal.error ? [] : cal.data.calendars.filter((c) => c.kind === 'native' && c.visibility !== 'private'),
+  }));
+  return cache;
+}
+
+function EventCardView({ node, updateAttributes, deleteNode, selected }: NodeViewProps) {
+  const a = node.attrs;
+  const [opts, setOpts] = useState<{ events: EventOption[]; calendars: CalOption[] } | null>(null);
+  useEffect(() => { void loadOptions().then(setOpts); }, []);
+  const chosen = opts?.events.find((e) => e.id === a.eventId);
+  const count = Math.min(12, Math.max(1, Number(a.limit) || 3));
+  const calName = a.calendar ? opts?.calendars.find((c) => c.slug === a.calendar)?.name ?? a.calendar : 'all calendars';
+
+  return (
+    <NodeViewWrapper className={`pe-card pe-postlist pe-evcard ${selected ? 'is-selected' : ''}`} data-drag-handle>
+      <div className="pe-card-tools" contentEditable={false}>
+        <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
+      </div>
+      <div className="pe-postlist-config" contentEditable={false}>
+        <span className="pe-postlist-badge">Events · dynamic</span>
+        <select value={a.mode} onChange={(e) => updateAttributes({ mode: e.target.value })}>
+          <option value="upcoming">Coming up</option>
+          <option value="single">One event</option>
+        </select>
+        {a.mode === 'single' ? (
+          <select value={a.eventId} onChange={(e) => updateAttributes({ eventId: e.target.value })}>
+            <option value="">Choose an event…</option>
+            {opts?.events.map((e) => (
+              <option key={e.id} value={e.id}>{e.title}{e.when ? ` — ${e.when}` : ''}{e.status !== 'published' ? ` (${e.status})` : ''}</option>
+            ))}
+          </select>
+        ) : (
+          <>
+            <select value={a.calendar} onChange={(e) => updateAttributes({ calendar: e.target.value })}>
+              <option value="">All calendars</option>
+              {opts?.calendars.map((c) => <option key={c.slug} value={c.slug}>{c.name}</option>)}
+            </select>
+            <select value={count} onChange={(e) => updateAttributes({ limit: Number(e.target.value) })}>
+              {[1, 2, 3, 4, 6, 8, 12].map((n) => <option key={n} value={n}>{n} event{n > 1 ? 's' : ''}</option>)}
+            </select>
+            <select value={a.layout} onChange={(e) => updateAttributes({ layout: e.target.value })}>
+              <option value="grid">Grid</option>
+              <option value="list">List</option>
+            </select>
+          </>
+        )}
+        <label><input type="checkbox" checked={a.showImage} onChange={(e) => updateAttributes({ showImage: e.target.checked })} /> Images</label>
+      </div>
+      <div className={`pe-postlist-ghost layout-${a.mode === 'single' ? 'feature' : a.layout}`} contentEditable={false}>
+        {a.mode === 'single' ? (
+          chosen ? (
+            <div className="pe-evcard-one">
+              {a.showImage && (chosen.cover ? <img src={chosen.cover} alt="" /> : <div className="g-img" />)}
+              <div>
+                <small>{chosen.when}</small>
+                <b>{chosen.title}</b>
+                {chosen.status !== 'published' && <em>Not published yet — hidden on the site until it is.</em>}
+              </div>
+            </div>
+          ) : (
+            <p className="pe-postlist-note">{opts && !opts.events.length ? 'No events yet — create one under Calendar → Events.' : 'Pick the event to feature.'}</p>
+          )
+        ) : (
+          <>
+            {Array.from({ length: Math.min(count, 4) }, (_, i) => (
+              <div className="pe-postlist-ghostcard" key={i}>
+                {a.showImage && <div className="g-img" />}
+                <div className="g-line w40" />
+                <div className="g-line w90" />
+              </div>
+            ))}
+            <p className="pe-postlist-note">Next {count} event{count > 1 ? 's' : ''} from {calName} — renders live on the site (see preview)</p>
+          </>
+        )}
+      </div>
+    </NodeViewWrapper>
+  );
+}