@acms-subir/core 0.0.1

package/src/components/editor/PreviewOverlay.tsx

@@ -0,0 +1,77 @@
+import { useEffect, 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).
+
+const DEVICES = [
+  { key: 'desktop', label: 'Desktop', width: '100%' },
+  { key: 'tablet', label: 'Tablet', width: '768px' },
+  { key: 'mobile', label: 'Mobile', width: '390px' },
+] as const;
+
+interface Props {
+  open: boolean;
+  url: string;      // admin-session preview (relative)
+  shareUrl: string; // token preview (absolute-ish), safe to send around
+  onClose: () => void;
+}
+
+export function PreviewOverlay({ open, url, shareUrl, onClose }: Props) {
+  const [device, setDevice] = useState<(typeof DEVICES)[number]>(DEVICES[0]);
+  const [copied, setCopied] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  useEffect(() => {
+    if (!open) return;
+    setRefreshKey((k) => k + 1); // fresh content each time it opens
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  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>
+        <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>
+      </div>
+      <div className="pe-preview-stage">
+        <iframe
+          key={refreshKey}
+          src={url}
+          title="Preview"
+          style={{ width: device.width }}
+          className={device.key !== 'desktop' ? 'is-framed' : ''}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,230 @@
+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';
+import { calendarSrcLabel } from '../../../lib/calendar/src';
+
+// Calendar card: a *dynamic* block like postListCard. It serializes into
+// bodyHtml as a placeholder div (data-dyn="calendar") that public routes
+// expand at request time via src/lib/calendar/render.ts, so events are always
+// fresh. The editor validates pasted sources through the calendar.preview
+// action (which also normalizes embed URLs / IDs into ICS feed URLs — the
+// stored attr is always the canonical feed URL) and shows the next few real
+// events as a preview. One card renders exactly one view: month, week, or
+// upcoming.
+
+// dot colors for multi-calendar cards; index 0 is the site accent. The public
+// side mirrors these as --cal-dot-* custom properties in site.css.
+export const CAL_DOT_COLORS = ['var(--accent)', '#2f9e6e', '#b3541e', '#8250df', '#c2255c', '#0c8599'];
+
+export const CalendarCard = Node.create({
+  name: 'calendarCard',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      sources: { default: [] as string[] }, // canonical ICS feed URLs
+      view: { default: 'month' }, // month | week | upcoming
+      title: { default: '' },
+      subtitle: { default: '' },
+      limit: { default: 6 }, // upcoming view only
+      showOpenLink: { default: true },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-dyn="calendar"]',
+        getAttrs: (el) => {
+          const e = el as HTMLElement;
+          let sources: string[] = [];
+          try {
+            const parsed = JSON.parse(e.getAttribute('data-sources') ?? '[]');
+            if (Array.isArray(parsed)) sources = parsed.filter((s): s is string => typeof s === 'string');
+          } catch {
+            /* malformed attr — start empty */
+          }
+          return {
+            sources,
+            view: e.getAttribute('data-view') ?? 'month',
+            title: e.getAttribute('data-title') ?? '',
+            subtitle: e.getAttribute('data-subtitle') ?? '',
+            limit: Number(e.getAttribute('data-limit') ?? 6),
+            showOpenLink: e.getAttribute('data-open-link') !== '0',
+          };
+        },
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    const a = node.attrs;
+    return [
+      'div',
+      {
+        'data-dyn': 'calendar',
+        'data-sources': JSON.stringify(a.sources ?? []),
+        'data-view': a.view,
+        'data-title': a.title,
+        'data-subtitle': a.subtitle,
+        'data-limit': String(a.limit),
+        'data-open-link': a.showOpenLink ? '1' : '0',
+      },
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(CalendarView);
+  },
+});
+
+interface PreviewItem { when: string; title: string; cal: number }
+
+function CalendarView({ node, updateAttributes, deleteNode, selected }: NodeViewProps) {
+  const a = node.attrs;
+  const sources: string[] = a.sources ?? [];
+  const [draft, setDraft] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [adding, setAdding] = useState(false);
+  const [preview, setPreview] = useState<PreviewItem[] | null>(null);
+
+  const addSource = async (raw: string) => {
+    const value = raw.trim();
+    if (!value) return;
+    setBusy(true);
+    setError('');
+    const r = await actions.calendar.preview({ sources: [...sources, value] });
+    setBusy(false);
+    if (r.error) return setError(r.error.message);
+    updateAttributes({ sources: r.data.sources });
+    setPreview(r.data.upcoming);
+    setDraft('');
+    setAdding(false);
+  };
+
+  // refresh the schematic preview when sources change (e.g. after undo)
+  const key = JSON.stringify(sources);
+  useEffect(() => {
+    if (!sources.length) return setPreview(null);
+    let alive = true;
+    actions.calendar.preview({ sources }).then((r) => {
+      if (!alive) return;
+      if (r.error) setError(r.error.message);
+      else setPreview(r.data.upcoming);
+    });
+    return () => { alive = false; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+
+  if (!sources.length) {
+    return (
+      <NodeViewWrapper className={`pe-card pe-calcard is-empty ${selected ? 'is-selected' : ''}`}>
+        <form
+          className="pe-embed-form"
+          contentEditable={false}
+          onSubmit={(e) => { e.preventDefault(); void addSource(draft); }}
+        >
+          <span className="pe-embed-label">Calendar</span>
+          <input
+            autoFocus
+            type="text"
+            placeholder="Paste a Google Calendar link, calendar ID, or .ics feed URL…"
+            value={draft}
+            onChange={(e) => { setDraft(e.target.value); setError(''); }}
+            onKeyDown={(e) => { if (e.key === 'Escape') deleteNode(); }}
+          />
+          <button type="submit" className="pe-btn primary sm" disabled={busy}>{busy ? 'Checking…' : 'Add calendar'}</button>
+          {error && <span className="pe-embed-error">{error}</span>}
+        </form>
+      </NodeViewWrapper>
+    );
+  }
+
+  return (
+    <NodeViewWrapper className={`pe-card pe-calcard ${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-calendar-config" contentEditable={false}>
+        <span className="pe-postlist-badge">Calendar · dynamic</span>
+        <select value={a.view} onChange={(e) => updateAttributes({ view: e.target.value })}>
+          <option value="month">Month</option>
+          <option value="week">Week</option>
+          <option value="upcoming">Upcoming</option>
+        </select>
+        {a.view === 'upcoming' && (
+          <select value={a.limit} onChange={(e) => updateAttributes({ limit: Number(e.target.value) })}>
+            {[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>
+      </div>
+      <div className="pe-calendar-config" contentEditable={false}>
+        <input
+          type="text" className="pe-cal-title"
+          placeholder="Title (optional)"
+          value={a.title}
+          onChange={(e) => updateAttributes({ title: e.target.value })}
+        />
+        <input
+          type="text" className="pe-cal-title"
+          placeholder="Subtitle (optional)"
+          value={a.subtitle}
+          onChange={(e) => updateAttributes({ subtitle: e.target.value })}
+        />
+      </div>
+      <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)}
+            <button
+              type="button" title="Remove calendar"
+              onClick={() => updateAttributes({ sources: sources.filter((x) => x !== s) })}
+            >✕</button>
+          </span>
+        ))}
+        {adding ? (
+          <form className="pe-cal-add" onSubmit={(e) => { e.preventDefault(); void addSource(draft); }}>
+            <input
+              autoFocus type="text" placeholder="Another calendar…"
+              value={draft}
+              onChange={(e) => { setDraft(e.target.value); setError(''); }}
+              onKeyDown={(e) => { if (e.key === 'Escape') { setAdding(false); setDraft(''); } }}
+            />
+            <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>
+        )}
+        {error && <span className="pe-embed-error">{error}</span>}
+      </div>
+      <div className="pe-cal-preview" contentEditable={false}>
+        {preview === null ? (
+          <p className="pe-postlist-note">Loading events…</p>
+        ) : preview.length ? (
+          <>
+            {preview.map((ev, i) => (
+              <div className="pe-cal-previewrow" key={i}>
+                <i style={{ background: CAL_DOT_COLORS[ev.cal % CAL_DOT_COLORS.length] }} />
+                <span className="w">{ev.when}</span>
+                <span className="ti">{ev.title}</span>
+              </div>
+            ))}
+            <p className="pe-postlist-note">{a.view === 'month' ? 'Month' : a.view === 'week' ? 'Week' : 'Upcoming'} view renders live on the site (see preview)</p>
+          </>
+        ) : (
+          <p className="pe-postlist-note">No upcoming events in this calendar — the widget still renders live on the site.</p>
+        )}
+      </div>
+    </NodeViewWrapper>
+  );
+}