@acms-subir/core 0.0.1

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

@@ -0,0 +1,270 @@
+import { Node } from '@tiptap/core';
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
+import type { NodeViewProps } from '@tiptap/react';
+
+// Info cards: a *static* grid of title / badge / description / detail-line
+// cards — services, opening hours, team members, feature grids. Unlike the
+// calendar card there is nothing to keep fresh, so renderHTML emits the full
+// public `.pc-info*` markup (real text, SEO-visible, works in any theme
+// template that splats bodyHtml) plus one data-items JSON attribute that
+// parseHTML round-trips from. Only cards with a title are rendered publicly;
+// data-items keeps unfinished drafts intact across saves.
+//
+// No inline style attributes are emitted — everything is styled by the
+// .pc-info-* / --info-* API in src/styles/cards.css so theme CSS (unlayered)
+// always wins.
+
+export interface InfoLine {
+  icon: string; // id from INFO_ICONS
+  text: string;
+}
+
+export interface InfoItem {
+  title: string;
+  badge: string; // empty = no pill
+  badgeStyle: 'filled' | 'outline';
+  description: string;
+  href: string; // empty = plain card; set = whole card is a link
+  lines: InfoLine[];
+}
+
+export const MAX_INFO_CARDS = 12;
+export const MAX_INFO_LINES = 6;
+
+// The public side mirrors these paths as CSS mask data-URIs on
+// .pc-info-row[data-icon=…] in cards.css — keep both lists in sync.
+export const INFO_ICONS: { id: string; label: string; d: string }[] = [
+  { id: 'calendar', label: 'Calendar', d: 'M3 5h18v16H3zM3 9h18M8 3v4M16 3v4' },
+  { id: 'clock', label: 'Clock', d: 'M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18M12 7v5l3 2' },
+  { id: 'pin', label: 'Map pin', d: 'M12 21s-7-5.6-7-11a7 7 0 0 1 14 0c0 5.4-7 11-7 11zM12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5' },
+  { id: 'person', label: 'Person', d: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5' },
+  { id: 'phone', label: 'Phone', d: 'M22 16.5v3a2 2 0 0 1-2.2 2A19 19 0 0 1 3 4.2 2 2 0 0 1 5 2h3l2 5-2.5 2a15 15 0 0 0 7.5 7.5L17 14l5 2.5z' },
+  { id: 'mail', label: 'Email', d: 'M3 6h18v13H3zM3 8l9 6 9-6' },
+  { id: 'link', label: 'Link', d: 'M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1.5 1.5M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1.5-1.5' },
+  { id: 'tag', label: 'Tag', d: 'M4 4h7l9 9-7 7-9-9zM8.5 8.5h.01' },
+  { id: 'check', label: 'Check', d: 'M4 12.5l5 5 11-11' },
+];
+
+const ICON_IDS = new Set(INFO_ICONS.map((i) => i.id));
+
+const str = (v: unknown): string => (typeof v === 'string' ? v : '');
+
+const sanitizeItem = (raw: unknown): InfoItem | null => {
+  if (!raw || typeof raw !== 'object') return null;
+  const it = raw as Record<string, unknown>;
+  const lines = Array.isArray(it.lines)
+    ? it.lines
+        .slice(0, MAX_INFO_LINES)
+        .flatMap((l): InfoLine[] => {
+          if (!l || typeof l !== 'object') return [];
+          const { icon, text } = l as Record<string, unknown>;
+          return [{ icon: ICON_IDS.has(str(icon)) ? str(icon) : 'calendar', text: str(text) }];
+        })
+    : [];
+  return {
+    title: str(it.title),
+    badge: str(it.badge),
+    badgeStyle: it.badgeStyle === 'outline' ? 'outline' : 'filled',
+    description: str(it.description),
+    href: str(it.href),
+    lines,
+  };
+};
+
+export const parseInfoItems = (raw: string | null): InfoItem[] => {
+  try {
+    const parsed = JSON.parse(raw ?? '[]');
+    if (!Array.isArray(parsed)) return [];
+    return parsed.slice(0, MAX_INFO_CARDS).flatMap((it) => {
+      const item = sanitizeItem(it);
+      return item ? [item] : [];
+    });
+  } catch {
+    return [];
+  }
+};
+
+const newItem = (): InfoItem => ({
+  title: '',
+  badge: '',
+  badgeStyle: 'filled',
+  description: '',
+  href: '',
+  lines: [
+    { icon: 'calendar', text: '' },
+    { icon: 'clock', text: '' },
+  ],
+});
+
+type Spec = [string, Record<string, string>, ...unknown[]];
+
+export const InfoCards = Node.create({
+  name: 'infoCards',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      items: { default: [] as InfoItem[] },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div.pc-infocards',
+        getAttrs: (el) => ({ items: parseInfoItems((el as HTMLElement).getAttribute('data-items')) }),
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    const items = (node.attrs.items as InfoItem[]) ?? [];
+    const cards = items
+      .filter((it) => it.title.trim())
+      .map((it): Spec => {
+        const children: Spec[] = [];
+        const head: Spec = ['header', { class: 'pc-info-head' }, ['h3', { class: 'pc-info-title' }, it.title]];
+        if (it.badge.trim()) {
+          head.push(['span', { class: `pc-info-badge${it.badgeStyle === 'filled' ? ' is-filled' : ''}` }, it.badge]);
+        }
+        children.push(head);
+        if (it.description.trim()) children.push(['p', { class: 'pc-info-desc' }, it.description]);
+        const lines = it.lines.filter((l) => l.text.trim());
+        if (lines.length) {
+          children.push([
+            'div',
+            { class: 'pc-info-meta' },
+            ...lines.map((l): Spec => ['span', { class: 'pc-info-row', 'data-icon': l.icon }, l.text]),
+          ]);
+        }
+        const href = it.href.trim();
+        return href
+          ? ['a', { class: 'pc-info-card', href }, ...children]
+          : ['article', { class: 'pc-info-card' }, ...children];
+      });
+    return ['div', { class: 'pc-infocards', 'data-items': JSON.stringify(items) }, ...cards];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(InfoCardsView);
+  },
+});
+
+function LineIcon({ icon }: { icon: string }) {
+  const d = INFO_ICONS.find((i) => i.id === icon)?.d ?? INFO_ICONS[0].d;
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d={d} />
+    </svg>
+  );
+}
+
+function InfoCardsView({ node, updateAttributes, deleteNode, selected }: NodeViewProps) {
+  const items = (node.attrs.items as InfoItem[]) ?? [];
+
+  const setItems = (next: InfoItem[]) => updateAttributes({ items: next });
+  const patch = (i: number, part: Partial<InfoItem>) =>
+    setItems(items.map((it, j) => (j === i ? { ...it, ...part } : it)));
+  const patchLine = (i: number, li: number, part: Partial<InfoLine>) =>
+    patch(i, { lines: items[i].lines.map((l, j) => (j === li ? { ...l, ...part } : l)) });
+  const move = (i: number, dir: -1 | 1) => {
+    const next = [...items];
+    const [it] = next.splice(i, 1);
+    next.splice(i + dir, 0, it);
+    setItems(next);
+  };
+
+  return (
+    <NodeViewWrapper className={`pe-card pe-infocards ${selected ? 'is-selected' : ''}`} data-drag-handle>
+      <div className="pe-card-tools" contentEditable={false}>
+        <span className="pe-provider">Info cards · {items.length}</span>
+        <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
+      </div>
+      <div contentEditable={false}>
+        {items.length === 0 && (
+          <div className="pe-infocards-empty">A grid of info cards — services, opening hours, team, features…</div>
+        )}
+        {items.map((it, i) => (
+          <div className="pe-infocard" key={i}>
+            <div className="pe-infocard-row">
+              <input
+                type="text"
+                className="pe-infocard-title"
+                placeholder="Card title"
+                value={it.title}
+                onChange={(e) => patch(i, { title: e.target.value })}
+              />
+              <input
+                type="text"
+                className="pe-infocard-badge"
+                placeholder="Badge (optional)"
+                value={it.badge}
+                onChange={(e) => patch(i, { badge: e.target.value })}
+              />
+              {it.badge.trim() !== '' && (
+                <select
+                  value={it.badgeStyle}
+                  onChange={(e) => patch(i, { badgeStyle: e.target.value as InfoItem['badgeStyle'] })}
+                >
+                  <option value="filled">Filled</option>
+                  <option value="outline">Outline</option>
+                </select>
+              )}
+              <span className="pe-infocard-ops">
+                <button type="button" title="Move up" disabled={i === 0} onClick={() => move(i, -1)}>↑</button>
+                <button type="button" title="Move down" disabled={i === items.length - 1} onClick={() => move(i, 1)}>↓</button>
+                <button type="button" title="Remove card" onClick={() => setItems(items.filter((_, j) => j !== i))}>✕</button>
+              </span>
+            </div>
+            <textarea
+              className="pe-infocard-desc"
+              rows={2}
+              placeholder="Description (optional)"
+              value={it.description}
+              onChange={(e) => patch(i, { description: e.target.value })}
+            />
+            {it.lines.map((l, li) => (
+              <div className="pe-infocard-line" key={li}>
+                <span className="pe-infocard-icon"><LineIcon icon={l.icon} /></span>
+                <select value={l.icon} onChange={(e) => patchLine(i, li, { icon: e.target.value })}>
+                  {INFO_ICONS.map((ic) => <option key={ic.id} value={ic.id}>{ic.label}</option>)}
+                </select>
+                <input
+                  type="text"
+                  placeholder={l.icon === 'clock' ? 'e.g. 7:30 PM' : 'e.g. Every Thursday'}
+                  value={l.text}
+                  onChange={(e) => patchLine(i, li, { text: e.target.value })}
+                />
+                <button
+                  type="button" title="Remove line"
+                  onClick={() => patch(i, { lines: it.lines.filter((_, j) => j !== li) })}
+                >✕</button>
+              </div>
+            ))}
+            <div className="pe-infocard-foot">
+              {it.lines.length < MAX_INFO_LINES && (
+                <button type="button" className="pe-btn sm" onClick={() => patch(i, { lines: [...it.lines, { icon: 'calendar', text: '' }] })}>
+                  + Add line
+                </button>
+              )}
+              <input
+                type="url"
+                className="pe-infocard-href"
+                placeholder="Link URL (optional — makes the card clickable)"
+                value={it.href}
+                onChange={(e) => patch(i, { href: e.target.value })}
+              />
+            </div>
+          </div>
+        ))}
+        {items.length < MAX_INFO_CARDS && (
+          <button type="button" className="pe-btn primary sm" onClick={() => setItems([...items, newItem()])}>
+            + Add card
+          </button>
+        )}
+      </div>
+    </NodeViewWrapper>
+  );
+}

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

@@ -0,0 +1,376 @@
+import { Node } from '@tiptap/react';
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
+import type { NodeViewProps } from '@tiptap/react';
+import { useRef, useState } from 'react';
+import { actions } from 'astro:actions';
+import { uploadFile, mediaUrl } from '../imaging';
+import { ImagePicker } from '../ImagePicker';
+
+// Media cards beyond the basic image: file/download, gallery, bookmark.
+// Same contract as cards.tsx — renderHTML emits public `.pc-*` markup,
+// parseHTML round-trips it.
+
+// ---- file / download -------------------------------------------------------
+
+export function formatBytes(n: number): string {
+  if (!n) return '';
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+
+export const FileCard = Node.create({
+  name: 'fileCard',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      href: { default: '' },
+      filename: { default: '' },
+      size: { default: 0 },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'a.pc-filecard',
+        getAttrs: (el) => {
+          const e = el as HTMLElement;
+          return {
+            href: e.getAttribute('href') ?? '',
+            filename: e.querySelector('.pc-file-name')?.textContent ?? e.getAttribute('download') ?? '',
+            size: Number(e.getAttribute('data-size') ?? 0),
+          };
+        },
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    const a = node.attrs;
+    return [
+      'a',
+      { class: 'pc-filecard', href: a.href, download: a.filename, 'data-size': String(a.size) },
+      ['span', { class: 'pc-file-icon', 'aria-hidden': 'true' }, '↓'],
+      ['span', { class: 'pc-file-text' },
+        ['span', { class: 'pc-file-name' }, a.filename || 'Download'],
+        ['span', { class: 'pc-file-meta' }, formatBytes(a.size)],
+      ],
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(FileCardView);
+  },
+});
+
+function FileCardView({ node, updateAttributes, deleteNode, selected }: NodeViewProps) {
+  const a = node.attrs;
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  if (!a.href) {
+    return (
+      <NodeViewWrapper className={`pe-card pe-filecard is-empty ${selected ? 'is-selected' : ''}`}>
+        <div className="pe-embed-form" contentEditable={false}>
+          <span className="pe-embed-label">File</span>
+          <input
+            ref={inputRef}
+            type="file"
+            accept=".pdf,.zip,.txt,.csv,.md,.json,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.epub"
+            onChange={async (e) => {
+              const f = e.target.files?.[0];
+              if (!f) return;
+              setBusy(true);
+              setError('');
+              try {
+                const media = await uploadFile(f);
+                updateAttributes({ href: mediaUrl(media.key), filename: media.filename, size: media.size });
+              } catch (err) {
+                setError(err instanceof Error ? err.message : 'Upload failed');
+              } finally {
+                setBusy(false);
+              }
+            }}
+          />
+          {busy && <span className="pe-embed-label">Uploading…</span>}
+          {error && <span className="pe-embed-error">{error}</span>}
+          <button type="button" className="pe-btn sm" onClick={() => deleteNode()}>Cancel</button>
+        </div>
+      </NodeViewWrapper>
+    );
+  }
+
+  return (
+    <NodeViewWrapper className={`pe-card pe-filecard ${selected ? 'is-selected' : ''}`} data-drag-handle>
+      <div className="pe-card-tools" contentEditable={false}>
+        <span className="pe-provider">File</span>
+        <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
+      </div>
+      <span className="pc-filecard" contentEditable={false}>
+        <span className="pc-file-icon" aria-hidden="true">↓</span>
+        <span className="pc-file-text">
+          <span className="pc-file-name">{a.filename || 'Download'}</span>
+          <span className="pc-file-meta">{formatBytes(a.size)}</span>
+        </span>
+      </span>
+    </NodeViewWrapper>
+  );
+}
+
+// ---- gallery ---------------------------------------------------------------
+
+interface GalleryImage {
+  src: string;
+  srcset?: string;
+  alt?: string;
+}
+
+export const GalleryCard = Node.create<{ unsplashEnabled: boolean }>({
+  name: 'galleryCard',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addOptions() {
+    return { unsplashEnabled: false };
+  },
+
+  addAttributes() {
+    return {
+      images: { default: [] as GalleryImage[] },
+      caption: { default: '' },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'figure.pc-gallery',
+        getAttrs: (el) => {
+          const e = el as HTMLElement;
+          return {
+            images: [...e.querySelectorAll('img')].map((img) => ({
+              src: img.getAttribute('src') ?? '',
+              srcset: img.getAttribute('srcset') ?? undefined,
+              alt: img.getAttribute('alt') ?? '',
+            })),
+            caption: e.querySelector('figcaption')?.textContent ?? '',
+          };
+        },
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    const a = node.attrs;
+    const images = (a.images as GalleryImage[]).map(
+      (img): [string, Record<string, string>] => [
+        'img',
+        {
+          src: img.src,
+          alt: img.alt ?? '',
+          loading: 'lazy',
+          ...(img.srcset ? { srcset: img.srcset, sizes: '(max-width: 760px) 100vw, 380px' } : {}),
+        },
+      ]
+    );
+    const grid: [string, Record<string, string>, ...unknown[]] = [
+      'div',
+      { class: 'pc-gallery-grid', 'data-count': String(images.length) },
+      ...images,
+    ];
+    const fig = { class: 'pc-gallery' };
+    return a.caption
+      ? ['figure', fig, grid, ['figcaption', {}, a.caption]]
+      : ['figure', fig, grid];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(GalleryCardView);
+  },
+});
+
+function GalleryCardView({ node, updateAttributes, deleteNode, selected, extension }: NodeViewProps) {
+  const images = node.attrs.images as GalleryImage[];
+  const [pickerOpen, setPickerOpen] = useState(images.length === 0);
+  const unsplashEnabled = Boolean((extension.options as { unsplashEnabled?: boolean }).unsplashEnabled);
+
+  return (
+    <NodeViewWrapper className={`pe-card pe-gallerycard ${selected ? 'is-selected' : ''}`} data-drag-handle>
+      <div className="pe-card-tools" contentEditable={false}>
+        <span className="pe-provider">Gallery · {images.length}</span>
+        <button type="button" onClick={() => setPickerOpen(true)}>+ Add image</button>
+        <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
+      </div>
+      {images.length === 0 ? (
+        <div className="pe-gallery-empty" contentEditable={false}>Empty gallery — add at least two images.</div>
+      ) : (
+        <div className="pc-gallery-grid" data-count={String(images.length)} contentEditable={false}>
+          {images.map((img, i) => (
+            <span key={`${img.src}-${i}`} className="pe-gallery-item">
+              <img src={img.src} alt={img.alt ?? ''} />
+              <button
+                type="button"
+                className="pe-gallery-x"
+                title="Remove image"
+                onClick={() => updateAttributes({ images: images.filter((_, j) => j !== i) })}
+              >
+                ✕
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+      <input
+        className="pe-caption"
+        type="text"
+        placeholder="Add a caption (optional)"
+        value={node.attrs.caption}
+        onChange={(e) => updateAttributes({ caption: e.target.value })}
+      />
+      <ImagePicker
+        open={pickerOpen}
+        unsplashEnabled={unsplashEnabled}
+        onClose={() => setPickerOpen(false)}
+        onSelect={(img) => {
+          updateAttributes({ images: [...images, { src: img.src, srcset: img.srcset || undefined, alt: img.alt }] });
+          setPickerOpen(false);
+        }}
+      />
+    </NodeViewWrapper>
+  );
+}
+
+// ---- bookmark --------------------------------------------------------------
+
+export const BookmarkCard = Node.create({
+  name: 'bookmarkCard',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      url: { default: '' },
+      title: { default: '' },
+      description: { default: '' },
+      image: { default: '' },
+      favicon: { default: '' },
+      siteName: { default: '' },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'a.pc-bookmark',
+        getAttrs: (el) => {
+          const e = el as HTMLElement;
+          return {
+            url: e.getAttribute('href') ?? '',
+            title: e.querySelector('.pc-bookmark-title')?.textContent ?? '',
+            description: e.querySelector('.pc-bookmark-desc')?.textContent ?? '',
+            image: e.querySelector<HTMLElement>('.pc-bookmark-thumb img')?.getAttribute('src') ?? '',
+            favicon: e.querySelector<HTMLElement>('.pc-bookmark-favicon')?.getAttribute('src') ?? '',
+            siteName: e.querySelector('.pc-bookmark-site')?.textContent ?? '',
+          };
+        },
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    const a = node.attrs;
+    const meta: unknown[] = ['div', { class: 'pc-bookmark-meta' }];
+    if (a.favicon) meta.push(['img', { class: 'pc-bookmark-favicon', src: a.favicon, alt: '', loading: 'lazy' }]);
+    meta.push(['span', { class: 'pc-bookmark-site' }, a.siteName || safeHostname(a.url)]);
+    const content: unknown[] = [
+      'div',
+      { class: 'pc-bookmark-content' },
+      ['div', { class: 'pc-bookmark-title' }, a.title || a.url],
+    ];
+    if (a.description) content.push(['div', { class: 'pc-bookmark-desc' }, a.description]);
+    content.push(meta);
+    const out: unknown[] = ['a', { class: 'pc-bookmark', href: a.url, target: '_blank', rel: 'noopener' }, content];
+    if (a.image) out.push(['div', { class: 'pc-bookmark-thumb' }, ['img', { src: a.image, alt: '', loading: 'lazy' }]]);
+    return out as [string, Record<string, string>, ...unknown[]];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(BookmarkCardView);
+  },
+});
+
+function BookmarkCardView({ node, updateAttributes, deleteNode, selected }: NodeViewProps) {
+  const a = node.attrs;
+  const [draft, setDraft] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  if (!a.url) {
+    return (
+      <NodeViewWrapper className={`pe-card pe-bookmarkcard is-empty ${selected ? 'is-selected' : ''}`}>
+        <form
+          className="pe-embed-form"
+          contentEditable={false}
+          onSubmit={async (e) => {
+            e.preventDefault();
+            const url = draft.trim();
+            if (!/^https?:\/\//.test(url)) return setError('Paste a full URL, starting with https://');
+            setBusy(true);
+            setError('');
+            const r = await actions.bookmark.fetch({ url });
+            setBusy(false);
+            if (r.error) return setError('Couldn’t read that page — check the URL.');
+            updateAttributes({ url, ...r.data.meta });
+          }}
+        >
+          <span className="pe-embed-label">Bookmark</span>
+          <input
+            autoFocus
+            type="url"
+            placeholder="Paste a URL to create a rich link preview…"
+            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 ? 'Fetching…' : 'Create'}</button>
+          {error && <span className="pe-embed-error">{error}</span>}
+        </form>
+      </NodeViewWrapper>
+    );
+  }
+
+  return (
+    <NodeViewWrapper className={`pe-card pe-bookmarkcard ${selected ? 'is-selected' : ''}`} data-drag-handle>
+      <div className="pe-card-tools" contentEditable={false}>
+        <span className="pe-provider">Bookmark</span>
+        <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
+      </div>
+      <span className="pc-bookmark" contentEditable={false}>
+        <span className="pc-bookmark-content">
+          <span className="pc-bookmark-title">{a.title || a.url}</span>
+          {a.description && <span className="pc-bookmark-desc">{a.description}</span>}
+          <span className="pc-bookmark-meta">
+            {a.favicon && <img className="pc-bookmark-favicon" src={a.favicon} alt="" />}
+            <span className="pc-bookmark-site">{a.siteName || safeHostname(a.url)}</span>
+          </span>
+        </span>
+        {a.image && <span className="pc-bookmark-thumb"><img src={a.image} alt="" /></span>}
+      </span>
+    </NodeViewWrapper>
+  );
+}
+
+function safeHostname(url: string): string {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return url;
+  }
+}