@acms-subir/core 0.0.1

package/src/components/builder/PageBuilder.tsx

@@ -0,0 +1,575 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  DndContext, DragOverlay, PointerSensor, KeyboardSensor, useSensor, useSensors,
+  useDraggable, useDroppable, closestCenter, type DragStartEvent, type DragEndEvent,
+} from '@dnd-kit/core';
+import { SortableContext, useSortable, verticalListSortingStrategy, arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { marked } from 'marked';
+import { actions } from 'astro:actions';
+import type { Page, Status, WidgetInstance, WidgetType } from '../../lib/schema';
+import { parseConfig, widgetTypes } from '../../lib/schema';
+import { widgetMeta, fieldSpecs, type FieldSpec } from '../../lib/widgets';
+import { ImagePicker, type PickedImage } from '../editor/ImagePicker';
+import { PreviewOverlay } from '../editor/PreviewOverlay';
+
+// The three-pane widget builder: palette → canvas → inspector.
+// One document model, drag to add/reorder, autosaved as a whole.
+
+type SaveState = 'saved' | 'dirty' | 'saving' | 'error';
+
+interface Props {
+  page: Page;
+  previewPath: string;
+  sharePath: string;
+  unsplashEnabled: boolean;
+}
+
+interface Meta {
+  title: string;
+  slug: string;
+  status: Status;
+  isHome: boolean;
+  seoTitle: string;
+  seoDesc: string;
+}
+
+const DEVICES = [
+  { key: 'desktop', label: 'Desktop', width: '100%' },
+  { key: 'tablet', label: 'Tablet', width: '768px' },
+  { key: 'mobile', label: 'Mobile', width: '390px' },
+] as const;
+
+const uuid = () => crypto.randomUUID();
+
+export default function PageBuilder({ page, previewPath, sharePath, unsplashEnabled }: Props) {
+  const [blocks, setBlocks] = useState<WidgetInstance[]>(
+    page.blocks.map((b) => ({ ...b, config: parseConfig(b.type as WidgetType, b.config) as Record<string, unknown> }))
+  );
+  const [meta, setMeta] = useState<Meta>({
+    title: page.title, slug: page.slug, status: page.status,
+    isHome: page.isHome, seoTitle: page.seoTitle, seoDesc: page.seoDesc,
+  });
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [saveState, setSaveState] = useState<SaveState>('saved');
+  const [device, setDevice] = useState<(typeof DEVICES)[number]>(DEVICES[0]);
+  const [dragging, setDragging] = useState<{ type?: WidgetType; block?: WidgetInstance } | null>(null);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [pickerFor, setPickerFor] = useState<{ blockId: string; key: string } | null>(null);
+
+  const blocksRef = useRef(blocks);
+  const metaRef = useRef(meta);
+  const saveStateRef = useRef<SaveState>('saved');
+  const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const undoStack = useRef<WidgetInstance[][]>([]);
+  const redoStack = useRef<WidgetInstance[][]>([]);
+  const lastEdit = useRef<{ token: string; at: number }>({ token: '', at: 0 });
+
+  const setSave = (s: SaveState) => { saveStateRef.current = s; setSaveState(s); };
+
+  const save = useCallback(async () => {
+    if (saveTimer.current) { clearTimeout(saveTimer.current); saveTimer.current = null; }
+    setSave('saving');
+    const m = metaRef.current;
+    const r = await actions.pages.save({
+      id: page.id,
+      title: m.title, slug: m.slug, status: m.status, isHome: m.isHome,
+      seoTitle: m.seoTitle, seoDesc: m.seoDesc,
+      blocks: blocksRef.current,
+    });
+    if (r.error) {
+      setSave('error');
+    } else {
+      metaRef.current = { ...metaRef.current, slug: r.data.page.slug };
+      setMeta((prev) => ({ ...prev, slug: r.data.page.slug }));
+      setSave(saveStateRef.current === 'saving' ? 'saved' : saveStateRef.current);
+    }
+  }, [page.id]);
+
+  const queueSave = useCallback(() => {
+    setSave('dirty');
+    if (saveTimer.current) clearTimeout(saveTimer.current);
+    saveTimer.current = setTimeout(() => save(), 1200);
+  }, [save]);
+
+  // history: coalesce rapid edits to the same field into one undo step
+  const commitBlocks = useCallback((next: WidgetInstance[], editToken = '') => {
+    const now = Date.now();
+    const coalesce = editToken && editToken === lastEdit.current.token && now - lastEdit.current.at < 900;
+    if (!coalesce) undoStack.current.push(blocksRef.current);
+    if (undoStack.current.length > 100) undoStack.current.shift();
+    redoStack.current = [];
+    lastEdit.current = { token: editToken, at: now };
+    blocksRef.current = next;
+    setBlocks(next);
+    queueSave();
+  }, [queueSave]);
+
+  const updateMeta = useCallback((patch: Partial<Meta>) => {
+    setMeta((prev) => {
+      const next = { ...prev, ...patch };
+      metaRef.current = next;
+      return next;
+    });
+    queueSave();
+  }, [queueSave]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement;
+      const typing = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT';
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') { e.preventDefault(); save(); return; }
+      if (typing) return;
+      if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
+        e.preventDefault();
+        const source = e.shiftKey ? redoStack.current : undoStack.current;
+        const target2 = e.shiftKey ? undoStack.current : redoStack.current;
+        const prev = source.pop();
+        if (prev) {
+          target2.push(blocksRef.current);
+          blocksRef.current = prev;
+          setBlocks(prev);
+          queueSave();
+        }
+        return;
+      }
+      if ((e.key === 'Backspace' || e.key === 'Delete') && selectedId) {
+        e.preventDefault();
+        commitBlocks(blocksRef.current.filter((b) => b.id !== selectedId));
+        setSelectedId(null);
+      }
+    };
+    const onLeave = (e: BeforeUnloadEvent) => {
+      if (saveStateRef.current === 'dirty' || saveStateRef.current === 'saving') e.preventDefault();
+    };
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('beforeunload', onLeave);
+    return () => { window.removeEventListener('keydown', onKey); window.removeEventListener('beforeunload', onLeave); };
+  }, [save, queueSave, commitBlocks, selectedId]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  function newBlock(type: WidgetType): WidgetInstance {
+    return { id: uuid(), type, config: parseConfig(type, {}) as Record<string, unknown> };
+  }
+
+  function addBlock(type: WidgetType, index?: number) {
+    const b = newBlock(type);
+    const next = [...blocksRef.current];
+    next.splice(index ?? next.length, 0, b);
+    commitBlocks(next);
+    setSelectedId(b.id);
+  }
+
+  function onDragStart(e: DragStartEvent) {
+    const id = String(e.active.id);
+    if (id.startsWith('palette:')) {
+      setDragging({ type: id.slice(8) as WidgetType });
+    } else {
+      setDragging({ block: blocksRef.current.find((b) => b.id === id) });
+    }
+  }
+
+  function onDragEnd(e: DragEndEvent) {
+    setDragging(null);
+    const { active, over } = e;
+    if (!over) return;
+    const activeId = String(active.id);
+    const overId = String(over.id);
+    if (activeId.startsWith('palette:')) {
+      const type = activeId.slice(8) as WidgetType;
+      const overIndex = blocksRef.current.findIndex((b) => b.id === overId);
+      addBlock(type, overIndex === -1 ? undefined : overIndex);
+      return;
+    }
+    if (activeId !== overId) {
+      const from = blocksRef.current.findIndex((b) => b.id === activeId);
+      const to = blocksRef.current.findIndex((b) => b.id === overId);
+      if (from !== -1 && to !== -1) commitBlocks(arrayMove(blocksRef.current, from, to));
+    }
+  }
+
+  function updateBlockConfig(blockId: string, key: string, value: unknown) {
+    commitBlocks(
+      blocksRef.current.map((b) => (b.id === blockId ? { ...b, config: { ...b.config, [key]: value } } : b)),
+      `${blockId}:${key}`
+    );
+  }
+
+  function duplicateBlock(id: string) {
+    const i = blocksRef.current.findIndex((b) => b.id === id);
+    if (i === -1) return;
+    const copy = { ...blocksRef.current[i], id: uuid(), config: { ...blocksRef.current[i].config } };
+    const next = [...blocksRef.current];
+    next.splice(i + 1, 0, copy);
+    commitBlocks(next);
+    setSelectedId(copy.id);
+  }
+
+  const selected = blocks.find((b) => b.id === selectedId) ?? null;
+  const saveLabel =
+    saveState === 'saved' ? 'Saved' :
+    saveState === 'saving' ? 'Saving…' :
+    saveState === 'dirty' ? 'Unsaved changes' : 'Save failed';
+
+  return (
+    <div className="pb-shell">
+      <header className="pb-topbar">
+        <div className="pb-topbar-side">
+          <a className="pe-btn ghost sm" href="/admin/pages">‹ Pages</a>
+          <div>
+            <div className="pb-title">{meta.title}{meta.isHome ? ' · home' : ''}</div>
+            <div className={`pb-savestate ${saveState}`}>
+              {blocks.length} block{blocks.length === 1 ? '' : 's'} · {saveLabel}
+            </div>
+          </div>
+        </div>
+        <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="pb-topbar-side right">
+          <button type="button" className="pe-btn ghost sm" onClick={() => setPreviewOpen(true)}>Preview</button>
+          <button
+            type="button"
+            className={`pe-btn sm ${meta.status === 'published' ? '' : 'primary'}`}
+            onClick={() => updateMeta({ status: meta.status === 'published' ? 'draft' : 'published' })}
+          >
+            {meta.status === 'published' ? 'Unpublish' : 'Publish'}
+          </button>
+          <button
+            type="button"
+            className={`pe-btn ghost sm ${selectedId === null ? 'is-active' : ''}`}
+            title="Page settings"
+            onClick={() => setSelectedId(null)}
+          >
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+              <rect x="3" y="4" width="18" height="16" rx="2" /><path d="M15 4v16" />
+            </svg>
+          </button>
+        </div>
+      </header>
+
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragStart={onDragStart} onDragEnd={onDragEnd}>
+        <div className="pb-body">
+          <aside className="pb-palette">
+            {(['Layout', 'Content', 'Advanced'] as const).map((group) => (
+              <div key={group}>
+                <div className="pb-palette-group">{group}</div>
+                {widgetTypes.filter((t) => widgetMeta[t].group === group).map((t) => (
+                  <PaletteTile key={t} type={t} onAdd={() => addBlock(t)} />
+                ))}
+              </div>
+            ))}
+            <p className="pb-palette-hint">Drag onto the canvas, or click to append. ⌫ removes the selected block, ⌘Z undoes.</p>
+          </aside>
+
+          <main className="pb-canvas-wrap" onClick={() => setSelectedId(null)}>
+            <div className="pb-canvas" style={{ width: device.width, maxWidth: '100%' }}>
+              <SortableContext items={blocks.map((b) => b.id)} strategy={verticalListSortingStrategy}>
+                {blocks.map((b) => (
+                  <CanvasBlock
+                    key={b.id}
+                    block={b}
+                    selected={b.id === selectedId}
+                    onSelect={() => setSelectedId(b.id)}
+                    onDuplicate={() => duplicateBlock(b.id)}
+                    onDelete={() => {
+                      commitBlocks(blocksRef.current.filter((x) => x.id !== b.id));
+                      if (selectedId === b.id) setSelectedId(null);
+                    }}
+                  />
+                ))}
+              </SortableContext>
+              <EmptyDrop visible={blocks.length === 0} />
+            </div>
+          </main>
+
+          <aside className="pb-inspector" onClick={(e) => e.stopPropagation()}>
+            {selected ? (
+              <BlockInspector
+                key={selected.id}
+                block={selected}
+                onChange={(k, v) => updateBlockConfig(selected.id, k, v)}
+                onPickImage={(key) => setPickerFor({ blockId: selected.id, key })}
+              />
+            ) : (
+              <PageSettings meta={meta} onChange={updateMeta} pageId={page.id} />
+            )}
+          </aside>
+        </div>
+
+        <DragOverlay dropAnimation={null}>
+          {dragging?.type && <div className="pb-tile is-ghost"><TileInner type={dragging.type} /></div>}
+          {dragging?.block && (
+            <div className="pb-block is-ghost"><BlockPreview block={dragging.block} /></div>
+          )}
+        </DragOverlay>
+      </DndContext>
+
+      <ImagePicker
+        open={pickerFor !== null}
+        unsplashEnabled={unsplashEnabled}
+        onClose={() => setPickerFor(null)}
+        onSelect={(img: PickedImage) => {
+          if (pickerFor) {
+            const b = blocksRef.current.find((x) => x.id === pickerFor.blockId);
+            if (b) {
+              commitBlocks(
+                blocksRef.current.map((x) =>
+                  x.id === pickerFor.blockId
+                    ? { ...x, config: { ...x.config, [pickerFor.key]: img.src, ...(x.type === 'image' && !x.config.alt ? { alt: img.alt } : {}) } }
+                    : x
+                )
+              );
+            }
+          }
+          setPickerFor(null);
+        }}
+      />
+      <PreviewOverlay open={previewOpen} url={previewPath} shareUrl={sharePath} onClose={() => setPreviewOpen(false)} />
+    </div>
+  );
+}
+
+// ---- palette --------------------------------------------------------------
+
+function TileInner({ type }: { type: WidgetType }) {
+  const m = widgetMeta[type];
+  return (
+    <>
+      <span className="pb-tile-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+          <path d={m.icon} />
+        </svg>
+      </span>
+      <span>
+        <span className="pb-tile-label">{m.label}</span>
+        <span className="pb-tile-desc">{m.description}</span>
+      </span>
+      <span className="pb-tile-grip">⠿</span>
+    </>
+  );
+}
+
+function PaletteTile({ type, onAdd }: { type: WidgetType; onAdd: () => void }) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({ id: `palette:${type}` });
+  return (
+    <button
+      ref={setNodeRef}
+      type="button"
+      className={`pb-tile ${isDragging ? 'is-dragging' : ''}`}
+      onClick={onAdd}
+      {...listeners}
+      {...attributes}
+    >
+      <TileInner type={type} />
+    </button>
+  );
+}
+
+// ---- canvas ---------------------------------------------------------------
+
+function EmptyDrop({ visible }: { visible: boolean }) {
+  const { setNodeRef, isOver } = useDroppable({ id: 'canvas-empty' });
+  if (!visible) return null;
+  return (
+    <div ref={setNodeRef} className={`pb-empty ${isOver ? 'is-over' : ''}`}>
+      Drag a widget here to start building
+    </div>
+  );
+}
+
+function CanvasBlock({
+  block, selected, onSelect, onDuplicate, onDelete,
+}: {
+  block: WidgetInstance;
+  selected: boolean;
+  onSelect: () => void;
+  onDuplicate: () => void;
+  onDelete: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: block.id });
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={`pb-block ${selected ? 'is-selected' : ''} ${isDragging ? 'is-dragging' : ''}`}
+      onClick={(e) => { e.stopPropagation(); onSelect(); }}
+    >
+      <div className="pb-block-tools">
+        <button type="button" className="pb-grip" title="Drag to reorder" {...listeners} {...attributes}>⠿</button>
+        <span className="pb-block-type">{widgetMeta[block.type as WidgetType].label}</span>
+        <button type="button" title="Duplicate" onClick={(e) => { e.stopPropagation(); onDuplicate(); }}>⧉</button>
+        <button type="button" title="Delete" onClick={(e) => { e.stopPropagation(); onDelete(); }}>✕</button>
+      </div>
+      <BlockPreview block={block} />
+    </div>
+  );
+}
+
+function BlockPreview({ block }: { block: WidgetInstance }) {
+  const c = block.config as Record<string, any>;
+  switch (block.type as WidgetType) {
+    case 'hero':
+      return (
+        <div className="bp-hero" style={{ textAlign: c.align === 'left' ? 'left' : 'center' }}>
+          <div className="bp-hero-heading">{c.heading || 'Hero heading'}</div>
+          {c.sub ? <div className="bp-hero-sub">{c.sub}</div> : null}
+          {c.ctaLabel ? <span className="bp-btn">{c.ctaLabel}</span> : null}
+        </div>
+      );
+    case 'text':
+      return c.markdown ? (
+        <div className="bp-text" dangerouslySetInnerHTML={{ __html: marked.parse(c.markdown, { async: false }) as string }} />
+      ) : (
+        <div className="bp-placeholder">Empty text block — write some markdown in the inspector</div>
+      );
+    case 'image':
+      return c.src ? (
+        <figure className="bp-image">
+          <img src={c.src} alt={c.alt || ''} />
+          {c.caption ? <figcaption>{c.caption}</figcaption> : null}
+        </figure>
+      ) : (
+        <div className="bp-placeholder">No image yet — choose one in the inspector</div>
+      );
+    case 'button':
+      return (
+        <div style={{ textAlign: 'center', padding: '6px 0' }}>
+          <span className={`bp-btn ${c.variant === 'outline' ? 'outline' : ''}`}>{c.label || 'Button'}</span>
+        </div>
+      );
+    case 'spacer': {
+      const h = c.size === 's' ? 16 : c.size === 'l' ? 64 : 32;
+      return <div className="bp-spacer" style={{ height: h }}><span>spacer · {c.size}</span></div>;
+    }
+    case 'embed':
+      return c.url ? (
+        <iframe className="bp-embed" src={c.url} style={{ height: Math.min(Number(c.height) || 400, 420) }} loading="lazy" title="Embed preview" />
+      ) : (
+        <div className="bp-placeholder">No URL yet — set one in the inspector</div>
+      );
+    case 'customHtml':
+      return c.html || c.js ? (
+        <iframe
+          className="bp-embed"
+          sandbox="allow-scripts"
+          style={{ height: Math.min(Number(c.height) || 300, 420) }}
+          srcDoc={`<style>html,body{margin:0;font-family:system-ui}${c.css ?? ''}</style>${c.html ?? ''}<script>${c.js ?? ''}<\/script>`}
+          title="Custom HTML preview"
+        />
+      ) : (
+        <div className="bp-placeholder">Empty custom HTML block</div>
+      );
+  }
+}
+
+// ---- inspector ------------------------------------------------------------
+
+function BlockInspector({
+  block, onChange, onPickImage,
+}: {
+  block: WidgetInstance;
+  onChange: (key: string, value: unknown) => void;
+  onPickImage: (key: string) => void;
+}) {
+  const specs = fieldSpecs(block.type as WidgetType);
+  const c = block.config as Record<string, any>;
+  return (
+    <>
+      <div className="pb-inspector-head">
+        <span className="pb-inspector-type">{widgetMeta[block.type as WidgetType].label}</span>
+        <span className="pb-inspector-sub">{widgetMeta[block.type as WidgetType].description}</span>
+      </div>
+      {specs.map((f: FieldSpec) => (
+        <label key={f.key} className="pe-field">
+          <span>{f.label}</span>
+          {f.kind === 'select' && (
+            <select value={String(c[f.key] ?? '')} onChange={(e) => onChange(f.key, e.target.value)}>
+              {f.options!.map((o) => <option key={o} value={o}>{o}</option>)}
+            </select>
+          )}
+          {f.kind === 'number' && (
+            <input type="number" value={Number(c[f.key] ?? 0)} onChange={(e) => onChange(f.key, Number(e.target.value))} />
+          )}
+          {(f.kind === 'textarea' || f.kind === 'code') && (
+            <textarea
+              rows={f.kind === 'code' ? 6 : 5}
+              className={f.kind === 'code' ? 'pb-code' : undefined}
+              value={String(c[f.key] ?? '')}
+              onChange={(e) => onChange(f.key, e.target.value)}
+            />
+          )}
+          {f.kind === 'image' && (
+            <div className="pb-image-field">
+              <input type="text" placeholder="https://… or pick →" value={String(c[f.key] ?? '')} onChange={(e) => onChange(f.key, e.target.value)} />
+              <button type="button" className="pe-btn sm" onClick={() => onPickImage(f.key)}>Choose</button>
+            </div>
+          )}
+          {f.kind === 'text' && (
+            <input type="text" value={String(c[f.key] ?? '')} onChange={(e) => onChange(f.key, e.target.value)} />
+          )}
+        </label>
+      ))}
+    </>
+  );
+}
+
+function PageSettings({ meta, onChange, pageId }: { meta: Meta; onChange: (p: Partial<Meta>) => void; pageId: string }) {
+  return (
+    <>
+      <div className="pb-inspector-head">
+        <span className="pb-inspector-type">Page settings</span>
+        <span className="pb-inspector-sub">Select a block to edit it instead</span>
+      </div>
+      <label className="pe-field"><span>Title</span>
+        <input type="text" value={meta.title} onChange={(e) => onChange({ title: e.target.value })} />
+      </label>
+      <label className="pe-field"><span>Slug</span>
+        <div className="pe-slug"><span className="pe-slug-prefix">/</span>
+          <input type="text" value={meta.slug} onChange={(e) => onChange({ slug: e.target.value })} />
+        </div>
+      </label>
+      <label className="pe-field"><span>Status</span>
+        <select value={meta.status} onChange={(e) => onChange({ status: e.target.value as Status })}>
+          <option value="draft">Draft</option>
+          <option value="published">Published</option>
+          <option value="archived">Archived</option>
+        </select>
+      </label>
+      <label className="pb-check">
+        <input type="checkbox" checked={meta.isHome} onChange={(e) => onChange({ isHome: e.target.checked })} />
+        Serve this page at <code>/</code>
+      </label>
+      <details className="pe-seo" open>
+        <summary>Search engine optimization</summary>
+        <label className="pe-field"><span>SEO title</span>
+          <input type="text" value={meta.seoTitle} onChange={(e) => onChange({ seoTitle: e.target.value })} />
+        </label>
+        <label className="pe-field"><span>SEO description</span>
+          <textarea rows={3} value={meta.seoDesc} onChange={(e) => onChange({ seoDesc: e.target.value })} />
+        </label>
+      </details>
+      <div className="pe-danger">
+        <button
+          type="button"
+          className="pe-btn danger sm"
+          onClick={async () => {
+            if (!window.confirm('Delete this page permanently? This cannot be undone.')) return;
+            await actions.pages.delete({ id: pageId });
+            location.href = '/admin/pages';
+          }}
+        >
+          Delete page
+        </button>
+      </div>
+    </>
+  );
+}