@0m0g1/griot 0.1.3 → 0.1.5

package/src/Griot.js

@@ -1,32 +1,27 @@
 // ─── Griot.js ─────────────────────────────────────────────────────────────────
-// Public facade. Import from here — never from internal modules directly.
+// Public facade. Import from here only — never from internal modules directly.
 //
-// Named exports cover every public surface:
-//
-//   Classes
-//     Editor, Viewer
-//
-//   Document model
-//     createDocument, createBlock, cloneBlock
-//     updateBlock, insertBlockAfter, insertBlockBefore,
-//     removeBlock, splitBlock, mergeBlockWithPrev, moveBlock,
-//     getBlock, getBlockIndex, toJSON, fromJSON
-//
-//   Block helpers
-//     anchorId, scrollToBlock, isTextBlock
-//
-//   Inline
-//     tokenizeInline, renderInlineToDOM, renderInlineToHTML, TOKEN
-//
-//   Schema
-//     getBlockDef, getAllTypes, defaultMeta, BlockSchema
+//   Classes       Editor, Viewer, FormatToolbar, SlashMenu, DropHandler
+//   Document      createDocument, createBlock, cloneBlock
+//                 updateBlock, insertBlockAfter, insertBlockBefore,
+//                 removeBlock, moveBlock, splitBlock, mergeBlockWithPrev,
+//                 getBlock, getBlockIndex, getBlockBefore, getBlockAfter,
+//                 toJSON, fromJSON
+//   Block         anchorId, scrollToBlock, isTextBlock, isValidBlock
+//                 TEXT_TYPES, ALL_TYPES
+//   Inline        tokenizeInline, renderInlineToDOM, renderInlineToHTML,
+//                 escHtml, escAttr, TOKEN
+//   Schema        getBlockDef, getAllTypes, getTypesByCategory,
+//                 defaultMeta, BlockSchema
+//   Keyboard      attachKeyboardHandler, getCursorOffset, getSelectionOffsets,
+//                 setCursorOffset, focusAtEnd, focusAtStart
+//   URL helpers   resolveYouTube, resolveVimeo, resolveSpotify, resolveSoundCloud
+//   Gallery       renderGallery, lightbox
 // ─────────────────────────────────────────────────────────────────────────────
 
-// Core
 export {
   createBlock, cloneBlock, isTextBlock, isValidBlock,
-  anchorId, scrollToBlock,
-  TEXT_TYPES, ALL_TYPES,
+  anchorId, scrollToBlock, TEXT_TYPES, ALL_TYPES,
 } from './core/Block.js';
 
 export {
@@ -38,17 +33,23 @@ export {
 
 export { History } from './core/History.js';
 
-// Inline
-export { tokenizeInline, TOKEN } from './inline/InlineLexer.js';
-export {
-  renderInlineToDOM, renderInlineToHTML, escHtml, escAttr,
-} from './inline/InlineRenderer.js';
+export { tokenizeInline, TOKEN }               from './inline/InlineLexer.js';
+export { renderInlineToDOM, renderInlineToHTML, escHtml, escAttr } from './inline/InlineRenderer.js';
 
-// Blocks
-export { getBlockDef, getAllTypes, defaultMeta }    from './blocks/BlockSchema.js';
-export { default as BlockSchema }                  from './blocks/BlockSchema.js';
-export { renderBlock }                             from './blocks/BlockRenderer.js';
+export { getBlockDef, getAllTypes, getTypesByCategory, defaultMeta } from './blocks/BlockSchema.js';
+export { default as BlockSchema }               from './blocks/BlockSchema.js';
+export { renderBlock, resolveYouTube, resolveVimeo, resolveSpotify, resolveSoundCloud } from './blocks/BlockRenderer.js';
+export { renderGallery }                        from './blocks/GalleryRenderer.js';
+export { lightbox }                             from './blocks/Lightbox.js';
+
+export { Editor }         from './editor/Editor.js';
+export { FormatToolbar }  from './editor/FormatToolbar.js';
+export { SlashMenu }      from './editor/SlashMenu.js';
+export { DropHandler }    from './editor/DropHandler.js';
+export {
+  attachKeyboardHandler,
+  getCursorOffset, getSelectionOffsets, setCursorOffset,
+  focusAtEnd, focusAtStart,
+} from './editor/Keyboard.js';
 
-// Editor / Viewer
-export { Editor }  from './editor/Editor.js';
-export { Viewer }  from './viewer/Viewer.js';
+export { Viewer } from './viewer/Viewer.js';

package/src/blocks/BlockRenderer.js

@@ -1,46 +1,48 @@
 // ─── BlockRenderer.js ─────────────────────────────────────────────────────────
-// Renders a single block to a DOM element.
-// Used by both Viewer (read-only) and Editor (preview layer).
+// Renders a single block → DOM element.
+// Used by Viewer (read-only) and Editor preview layer.
 //
 // Options:
-//   books         — array of parsed book objects (for book_citation)
-//   onEventClick  — (eventId) => void
-//   onCiteClick   — (blockId) => void
-//   editable      — if true, skips event listeners (Editor manages them)
+//   books        — array of book objects
+//   onEventClick — (eventId) => void
+//   onCiteClick  — (blockId) => void
 // ─────────────────────────────────────────────────────────────────────────────
 
-import { anchorId }                             from '../core/Block.js';
+import { anchorId }                                               from '../core/Block.js';
 import { renderInlineToDOM, renderInlineToHTML, escHtml, escAttr } from '../inline/InlineRenderer.js';
-import { getBlockDef }                          from './BlockSchema.js';
+import { getBlockDef }                                            from './BlockSchema.js';
 
-// ─── Public entry point ───────────────────────────────────────────────────────
-export function renderBlock(block, { books = [], onEventClick, onCiteClick } = {}) {
-  const el = _render(block, { books, onEventClick, onCiteClick });
+const LAYOUT_OPTIONS = ['grid','masonry','carousel','strip'];
+
+// ─── Public ───────────────────────────────────────────────────────────────────
+
+export function renderBlock(block, opts = {}) {
+  const el = _render(block, opts);
   if (el) {
-    el.id = anchorId(block.id);
-    el.dataset.blockId = block.id;
+    el.id                = anchorId(block.id);
+    el.dataset.blockId   = block.id;
     el.dataset.blockType = block.type;
   }
   return el;
 }
 
-// ─── Internal ─────────────────────────────────────────────────────────────────
-function inlineDOM(text, opts) {
-  return renderInlineToDOM(text, {
-    onEventClick: opts.onEventClick,
-    onCiteClick:  opts.onCiteClick,
-  });
+// ─── Dispatcher ───────────────────────────────────────────────────────────────
+
+function il(text, opts) {
+  return renderInlineToDOM(text, { onEventClick: opts.onEventClick, onCiteClick: opts.onCiteClick });
 }
 
 function _render(block, opts) {
-  const { text, meta = {}, type } = block;
+  const { text = '', meta = {}, type } = block;
 
   switch (type) {
 
+    // ── Text ──────────────────────────────────────────────────────────────────
+
     case 'paragraph': {
       const el = document.createElement('p');
       el.className = 'griot-block griot-paragraph';
-      if (text) el.appendChild(inlineDOM(text, opts));
+      if (text) el.appendChild(il(text, opts));
       return el;
     }
 
@@ -55,70 +57,185 @@ function _render(block, opts) {
     case 'blockquote': {
       const el = document.createElement('blockquote');
       el.className = 'griot-block griot-blockquote';
-      if (text) el.appendChild(inlineDOM(text, opts));
+      if (text) el.appendChild(il(text, opts));
       return el;
     }
 
-    case 'callout': {
-      const el    = document.createElement('div');
-      const icon  = document.createElement('span');
-      const body  = document.createElement('div');
-      el.className   = 'griot-block griot-callout';
+    case 'callout':
+    case 'callout_warning':
+    case 'callout_tip':
+    case 'callout_danger': {
+      const ICONS = { callout:'💡', callout_warning:'⚠️', callout_tip:'✅', callout_danger:'🚨' };
+      const el   = document.createElement('div');
+      const icon = document.createElement('span');
+      const body = document.createElement('div');
+      el.className   = `griot-block griot-callout griot-callout--${type.replace('callout_','') || 'info'}`;
       icon.className = 'griot-callout__icon';
       body.className = 'griot-callout__body';
-      icon.textContent = meta.icon ?? '💡';
-      if (text) body.appendChild(inlineDOM(text, opts));
-      el.appendChild(icon);
-      el.appendChild(body);
+      icon.textContent = meta.icon ?? ICONS[type] ?? '💡';
+      if (text) body.appendChild(il(text, opts));
+      el.append(icon, body);
       return el;
     }
 
     case 'code': {
       const pre  = document.createElement('pre');
       const code = document.createElement('code');
-      pre.className  = 'griot-block griot-code';
-      if (meta.language) code.className = `language-${meta.language}`;
+      pre.className = 'griot-block griot-code';
+      if (meta.language) { pre.dataset.language = meta.language; code.className = `language-${meta.language}`; }
       code.textContent = text ?? '';
       pre.appendChild(code);
       return pre;
     }
 
-    case 'divider': {
-      const el = document.createElement('hr');
-      el.className = 'griot-block griot-divider';
+    case 'list_ul':
+    case 'list_ol': {
+      const tag = type === 'list_ul' ? 'ul' : 'ol';
+      const el  = document.createElement(tag);
+      el.className = `griot-block griot-list griot-list--${tag}`;
+      for (const item of (text ?? '').split('\n').filter(l => l.trim())) {
+        const li = document.createElement('li');
+        li.appendChild(il(item, opts));
+        el.appendChild(li);
+      }
       return el;
     }
 
+    // ── Media ─────────────────────────────────────────────────────────────────
+
     case 'image': {
-      const figure  = document.createElement('figure');
-      const img     = document.createElement('img');
-      figure.className = 'griot-block griot-image';
-      img.src = meta.src ?? '';
-      img.alt = meta.alt ?? '';
-      figure.appendChild(img);
-      if (meta.caption) {
-        const cap = document.createElement('figcaption');
-        cap.textContent = meta.caption;
-        figure.appendChild(cap);
+      const fig = document.createElement('figure');
+      fig.className = `griot-block griot-image griot-image--${meta.width ?? 'full'}`;
+      if (meta.uploading) {
+        const sp = document.createElement('div');
+        sp.className = 'griot-media-uploading';
+        sp.textContent = 'Uploading…';
+        fig.appendChild(sp);
+      } else if (meta.src) {
+        const img = document.createElement('img');
+        img.src = meta.src; img.alt = meta.alt ?? '';
+        fig.appendChild(img);
+        if (meta.caption) {
+          const cap = document.createElement('figcaption');
+          cap.textContent = meta.caption;
+          fig.appendChild(cap);
+        }
+      }
+      return fig;
+    }
+
+    case 'video': {
+      const fig = document.createElement('figure');
+      fig.className = 'griot-block griot-video';
+      const embed = meta.embedUrl ?? _ytEmbed(meta.src) ?? _vimeoEmbed(meta.src);
+      if (embed) {
+        const iframe = document.createElement('iframe');
+        iframe.src = embed; iframe.className = 'griot-video__iframe';
+        iframe.frameBorder = '0';
+        iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
+        iframe.allowFullscreen = true;
+        fig.appendChild(iframe);
+      } else if (meta.src) {
+        const v = document.createElement('video');
+        v.src = meta.src; v.controls = true; v.className = 'griot-video__native';
+        fig.appendChild(v);
+      }
+      if (meta.caption) { const c = document.createElement('figcaption'); c.textContent = meta.caption; fig.appendChild(c); }
+      return fig;
+    }
+
+    case 'audio': {
+      const fig = document.createElement('figure');
+      fig.className = 'griot-block griot-audio';
+      const embed = meta.embedUrl ?? _spotifyEmbed(meta.src) ?? _scEmbed(meta.src);
+      if (embed) {
+        const iframe = document.createElement('iframe');
+        iframe.src = embed; iframe.className = 'griot-audio__iframe';
+        iframe.frameBorder = '0';
+        iframe.allow = 'autoplay; clipboard-write; encrypted-media; fullscreen';
+        fig.appendChild(iframe);
+      } else if (meta.src) {
+        const a = document.createElement('audio');
+        a.src = meta.src; a.controls = true; a.className = 'griot-audio__native';
+        fig.appendChild(a);
       }
-      return figure;
+      if (meta.caption) { const c = document.createElement('figcaption'); c.textContent = meta.caption; fig.appendChild(c); }
+      return fig;
+    }
+
+    case 'gallery': {
+      return _renderGallery(meta.items ?? [], meta.layout ?? 'grid', opts);
+    }
+
+    case 'embed': {
+      const fig = document.createElement('figure');
+      fig.className = 'griot-block griot-embed';
+      if (meta.src) {
+        const iframe = document.createElement('iframe');
+        iframe.src = meta.src;
+        iframe.style.height = `${meta.height ?? 400}px`;
+        iframe.className = 'griot-embed__iframe';
+        iframe.frameBorder = '0';
+        iframe.allow = 'autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media';
+        iframe.allowFullscreen = true;
+        fig.appendChild(iframe);
+      }
+      if (meta.caption) { const c = document.createElement('figcaption'); c.textContent = meta.caption; fig.appendChild(c); }
+      return fig;
+    }
+
+    // ── Structure ─────────────────────────────────────────────────────────────
+
+    case 'table': {
+      const headers  = Array.isArray(meta.headers) ? meta.headers : [];
+      const rows     = Array.isArray(meta.rows)    ? meta.rows    : [];
+      const colCount = Math.max(headers.length, ...rows.map(r => r.length), 1);
+      const wrap  = document.createElement('div');
+      wrap.className = 'griot-block griot-table-wrap';
+      const table = document.createElement('table');
+      table.className = 'griot-table';
+      if (headers.length) {
+        const thead = document.createElement('thead');
+        const tr    = document.createElement('tr');
+        for (let ci = 0; ci < colCount; ci++) {
+          const th = document.createElement('th');
+          th.appendChild(il(headers[ci] ?? '', opts));
+          tr.appendChild(th);
+        }
+        thead.appendChild(tr); table.appendChild(thead);
+      }
+      const tbody = document.createElement('tbody');
+      for (const row of rows) {
+        const tr = document.createElement('tr');
+        for (let ci = 0; ci < colCount; ci++) {
+          const td = document.createElement('td');
+          td.appendChild(il(row[ci] ?? '', opts));
+          tr.appendChild(td);
+        }
+        tbody.appendChild(tr);
+      }
+      table.appendChild(tbody); wrap.appendChild(table);
+      return wrap;
+    }
+
+    case 'divider': {
+      const el = document.createElement('hr');
+      el.className = 'griot-block griot-divider';
+      return el;
     }
 
     case 'timeline_ref': {
       const el = document.createElement('div');
       el.className = 'griot-block griot-timeline-ref';
       if (meta.eventId && opts.onEventClick) {
-        el.setAttribute('role', 'button');
-        el.tabIndex = 0;
+        el.setAttribute('role','button'); el.tabIndex = 0;
         el.addEventListener('click', () => opts.onEventClick(meta.eventId));
-        el.addEventListener('keydown', (e) => {
-          if (e.key === 'Enter' || e.key === ' ') opts.onEventClick(meta.eventId);
-        });
+        el.addEventListener('keydown', e => { if (e.key==='Enter'||e.key===' ') opts.onEventClick(meta.eventId); });
       }
       el.innerHTML = `
         <span class="griot-timeline-ref__icon">⏱</span>
         <div class="griot-timeline-ref__body">
-          <div class="griot-timeline-ref__title">${escHtml(meta.eventTitle || 'Timeline Event')}</div>
+          <div class="griot-timeline-ref__title">${escHtml(meta.eventTitle||'Timeline Event')}</div>
           ${meta.note ? `<div class="griot-timeline-ref__note">${escHtml(meta.note)}</div>` : ''}
         </div>
         ${meta.eventId ? '<span class="griot-timeline-ref__arrow">→</span>' : ''}
@@ -133,69 +250,99 @@ function _render(block, opts) {
     default: {
       const el = document.createElement('p');
       el.className = 'griot-block griot-paragraph';
-      el.textContent = text ?? '';
+      if (text) el.appendChild(il(text, opts));
       return el;
     }
   }
 }
 
+// ─── Gallery renderer ─────────────────────────────────────────────────────────
+
+function _renderGallery(items, layout, opts) {
+  const wrap = document.createElement('div');
+  wrap.className = `griot-block griot-gallery griot-gallery--${LAYOUT_OPTIONS.includes(layout)?layout:'grid'}`;
+
+  if (!items.length) {
+    wrap.innerHTML = `<div class="griot-gallery__empty">No images yet</div>`;
+    return wrap;
+  }
+
+  for (const [i, item] of items.entries()) {
+    const el  = document.createElement('div');
+    el.className = 'griot-gallery__item';
+    const img = document.createElement('img');
+    img.src = item.src ?? item.url ?? '';
+    img.alt = item.alt ?? item.alt_text ?? '';
+    img.loading = 'lazy';
+    el.appendChild(img);
+    if (item.caption) {
+      const cap = document.createElement('p');
+      cap.className = 'griot-gallery__caption';
+      cap.textContent = item.caption;
+      el.appendChild(cap);
+    }
+    wrap.appendChild(el);
+  }
+  return wrap;
+}
+
+// ─── Citation renderer ────────────────────────────────────────────────────────
+
 function _renderCitation(block, opts) {
   const { meta = {} } = block;
   const wrap = document.createElement('figure');
   wrap.className = 'griot-block griot-citation';
 
-  if (!meta.bookId) {
-    wrap.innerHTML = `<div class="griot-citation__empty">📖 No source selected yet</div>`;
-    return wrap;
-  }
+  if (!meta.bookId) { wrap.innerHTML = `<div class="griot-citation__empty">📖 No source selected yet</div>`; return wrap; }
 
   const book = (opts.books ?? []).find(b => b.id === meta.bookId);
   const unit = book?.units?.find(u => u.id === meta.unitId);
-
-  if (!book || !unit) {
-    wrap.innerHTML = `<div class="griot-citation__missing">📖 Source not found — book may have been removed</div>`;
-    return wrap;
-  }
+  if (!book || !unit) { wrap.innerHTML = `<div class="griot-citation__missing">📖 Source not found</div>`; return wrap; }
 
   const inner = document.createElement('div');
   inner.className = 'griot-citation__inner';
-
-  // Header
-  const hdr = document.createElement('div');
-  hdr.className = 'griot-citation__header';
-  hdr.innerHTML = `
-    <span class="griot-citation__book-icon">📖</span>
-    <span class="griot-citation__book-title">${escHtml(book.title)}</span>
-    ${book.author ? `<span class="griot-citation__author">${escHtml(book.author)}</span>` : ''}
-    <span class="griot-citation__unit">${escHtml(unit.label)}</span>
+  inner.innerHTML = `
+    <div class="griot-citation__header">
+      <span class="griot-citation__book-icon">📖</span>
+      <span class="griot-citation__book-title">${escHtml(book.title)}</span>
+      ${book.author ? `<span class="griot-citation__author">${escHtml(book.author)}</span>` : ''}
+      <span class="griot-citation__unit">${escHtml(unit.label)}</span>
+    </div>
+    ${meta.quote ? `<blockquote class="griot-citation__quote">${escHtml(meta.quote)}</blockquote>` : ''}
   `;
-  inner.appendChild(hdr);
-
-  // Quote
-  if (meta.quote) {
-    const q = document.createElement('blockquote');
-    q.className = 'griot-citation__quote';
-    q.textContent = meta.quote;
-    inner.appendChild(q);
-  }
-
-  // Note (supports inline syntax)
   if (meta.note) {
     const note = document.createElement('div');
     note.className = 'griot-citation__note';
-    note.appendChild(inlineDOM(meta.note, opts));
+    note.appendChild(renderInlineToDOM(meta.note, opts));
     inner.appendChild(note);
   }
-
   wrap.appendChild(inner);
+  return wrap;
+}
 
-  // Content preview
-  if (unit.content) {
-    const preview = document.createElement('div');
-    preview.className = 'griot-citation__preview';
-    preview.textContent = unit.content.slice(0, 180) + (unit.content.length > 180 ? '…' : '');
-    wrap.appendChild(preview);
-  }
+// ─── Embed URL helpers ────────────────────────────────────────────────────────
 
-  return wrap;
+function _ytEmbed(src) {
+  if (!src) return null;
+  const m = src.match(/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|shorts\/|embed\/))([a-zA-Z0-9_-]{11})/);
+  return m ? `https://www.youtube.com/embed/${m[1]}?rel=0` : null;
+}
+function _vimeoEmbed(src) {
+  if (!src) return null;
+  const m = src.match(/vimeo\.com\/(\d+)/);
+  return m ? `https://player.vimeo.com/video/${m[1]}` : null;
 }
+function _spotifyEmbed(src) {
+  if (!src) return null;
+  const m = src.match(/open\.spotify\.com\/(track|album|playlist|episode)\/([a-zA-Z0-9]+)/);
+  return m ? `https://open.spotify.com/embed/${m[1]}/${m[2]}` : null;
+}
+function _scEmbed(src) {
+  if (!src) return null;
+  if (src.includes('soundcloud.com/'))
+    return `https://w.soundcloud.com/player/?url=${encodeURIComponent(src)}&color=%236366f1&auto_play=false&hide_related=true&show_comments=false`;
+  return null;
+}
+
+// Export helpers for editor use
+export { _ytEmbed as resolveYouTube, _vimeoEmbed as resolveVimeo, _spotifyEmbed as resolveSpotify, _scEmbed as resolveSoundCloud };

package/src/blocks/BlockSchema.js

@@ -1,24 +1,37 @@
 // ─── BlockSchema.js ───────────────────────────────────────────────────────────
+// Single source of truth for all block types
+// Fields: category, label, icon, slashLabel, hasText, hasInline, defaultMeta, placeholder
+// ─────────────────────────────────────────────────────────────────────────────
+
 const SCHEMA = {
-  paragraph:       { label: 'Paragraph',      icon: '¶',   hasText: true,  hasInline: true,  defaultMeta: {},                                              placeholder: 'Write something… **bold** *italic* `code` ==highlight== [[event:id|label]]' },
-  heading:         { label: 'Heading',         icon: 'H',   hasText: true,  hasInline: false, defaultMeta: { level: 2 },                                    placeholder: 'Heading…' },
-  blockquote:      { label: 'Quote',           icon: '❝',   hasText: true,  hasInline: true,  defaultMeta: {},                                              placeholder: 'Quote…' },
-  callout:         { label: 'Callout',         icon: '💡',  hasText: true,  hasInline: true,  defaultMeta: { icon: '💡' },                                  placeholder: 'Callout text…' },
-  callout_warning: { label: 'Warning',         icon: '⚠️',  hasText: true,  hasInline: true,  defaultMeta: { icon: '⚠️' },                                  placeholder: 'Warning message…' },
-  callout_tip:     { label: 'Tip',             icon: '✅',  hasText: true,  hasInline: true,  defaultMeta: { icon: '✅' },                                  placeholder: 'Tip or note…' },
-  callout_danger:  { label: 'Danger',          icon: '🚨',  hasText: true,  hasInline: true,  defaultMeta: { icon: '🚨' },                                  placeholder: 'Critical warning…' },
-  code:            { label: 'Code',            icon: '</>',  hasText: true,  hasInline: false, defaultMeta: { language: '' },                               placeholder: '// code…' },
-  list_ul:         { label: 'Bullet List',     icon: '•',   hasText: true,  hasInline: false, defaultMeta: {},                                              placeholder: 'Item 1\nItem 2\nItem 3' },
-  list_ol:         { label: 'Numbered List',   icon: '1.',  hasText: true,  hasInline: false, defaultMeta: {},                                              placeholder: 'First item\nSecond item' },
-  table:           { label: 'Table',           icon: '⊞',   hasText: false, hasInline: false, defaultMeta: { headers: ['Column 1', 'Column 2'], rows: [['', '']] }, placeholder: null },
-  divider:         { label: 'Divider',         icon: '—',   hasText: false, hasInline: false, defaultMeta: {},                                              placeholder: null },
-  image:           { label: 'Image',           icon: '🖼',  hasText: false, hasInline: false, defaultMeta: { src: '', alt: '', caption: '' },               placeholder: null },
-  video:           { label: 'Video',           icon: '▶',   hasText: false, hasInline: false, defaultMeta: { src: '', caption: '' },                        placeholder: null },
-  timeline_ref:    { label: 'Timeline Event',  icon: '⏱',  hasText: false, hasInline: false, defaultMeta: { eventId: '', eventTitle: '', note: '' },        placeholder: null },
-  book_citation:   { label: 'Book Citation',   icon: '📖',  hasText: false, hasInline: false, defaultMeta: { bookId: '', unitId: '', quote: '', note: '' }, placeholder: null },
+  paragraph:       { category:'text', label:'Paragraph', icon:'¶',  slashLabel:'Text',           hasText:true,  hasInline:true,  defaultMeta:{},                                              placeholder:'Write something… **bold** *italic* `code` ==highlight==' },
+  heading:         { category:'text', label:'Heading', icon:'H',    slashLabel:'Heading',        hasText:true,  hasInline:false, defaultMeta:{ level:2 },                                    placeholder:'Heading…' },
+  blockquote:      { category:'text', label:'Quote', icon:'❝',      slashLabel:'Quote',          hasText:true,  hasInline:true,  defaultMeta:{},                                              placeholder:'Quote…' },
+  callout:         { category:'text', label:'Callout', icon:'💡',   slashLabel:'Callout',        hasText:true,  hasInline:true,  defaultMeta:{ icon:'💡' },                                  placeholder:'Callout text…' },
+  callout_warning: { category:'text', label:'Warning', icon:'⚠️',   slashLabel:'Warning',        hasText:true,  hasInline:true,  defaultMeta:{ icon:'⚠️' },                                  placeholder:'Warning message…' },
+  callout_tip:     { category:'text', label:'Tip', icon:'✅',       slashLabel:'Tip',            hasText:true,  hasInline:true,  defaultMeta:{ icon:'✅' },                                  placeholder:'Tip or note…' },
+  callout_danger:  { category:'text', label:'Danger', icon:'🚨',    slashLabel:'Danger',         hasText:true,  hasInline:true,  defaultMeta:{ icon:'🚨' },                                  placeholder:'Critical warning…' },
+  code:            { category:'text', label:'Code', icon:'</>',     slashLabel:'Code block',     hasText:true,  hasInline:false, defaultMeta:{ language:'' },                               placeholder:'// code…' },
+  list_ul:         { category:'text', label:'Bullet List', icon:'•', slashLabel:'Bullet list',   hasText:true,  hasInline:false, defaultMeta:{},                                              placeholder:'Item 1\nItem 2\nItem 3' },
+  list_ol:         { category:'text', label:'Numbered List', icon:'1.', slashLabel:'Numbered list', hasText:true, hasInline:false, defaultMeta:{},                                           placeholder:'First item\nSecond item' },
+
+  image:           { category:'media', label:'Image', icon:'🖼',    slashLabel:'Image',          hasText:false, hasInline:false, defaultMeta:{ src:'', alt:'', caption:'', width:'full' }, placeholder:null },
+  video:           { category:'media', label:'Video', icon:'▶',     slashLabel:'Video',          hasText:false, hasInline:false, defaultMeta:{ src:'', caption:'', embedUrl:null, platform:null }, placeholder:null },
+  audio:           { category:'media', label:'Audio', icon:'🎵',    slashLabel:'Audio',          hasText:false, hasInline:false, defaultMeta:{ src:'', caption:'', embedUrl:null, platform:null }, placeholder:null },
+  gallery:         { category:'media', label:'Gallery', icon:'▦',   slashLabel:'Gallery',        hasText:false, hasInline:false, defaultMeta:{ items:[], layout:'grid' },                  placeholder:null },
+
+  embed:           { category:'embed', label:'Embed', icon:'⬡',     slashLabel:'Embed / iframe', hasText:false, hasInline:false, defaultMeta:{ src:'', height:400, caption:'' },            placeholder:null },
+
+  table:           { category:'structure', label:'Table', icon:'⊞', slashLabel:'Table',          hasText:false, hasInline:false, defaultMeta:{ headers:['Column 1','Column 2'], rows:[['','']] }, placeholder:null },
+  divider:         { category:'structure', label:'Divider', icon:'—', slashLabel:'Divider',     hasText:false, hasInline:false, defaultMeta:{},                                              placeholder:null },
+
+  timeline_ref:    { category:'structure', label:'Timeline Event', icon:'⏱', slashLabel:'Timeline event', hasText:false, hasInline:false, defaultMeta:{ eventId:'', eventTitle:'', note:'' }, placeholder:null },
+  book_citation:   { category:'structure', label:'Book Citation', icon:'📖', slashLabel:'Book citation', hasText:false, hasInline:false, defaultMeta:{ bookId:'', unitId:'', quote:'', note:'' }, placeholder:null },
 };
 
-export function getBlockDef(type) { return SCHEMA[type] ?? SCHEMA.paragraph; }
-export function getAllTypes()      { return Object.keys(SCHEMA); }
-export function defaultMeta(type) { return { ...(SCHEMA[type]?.defaultMeta ?? {}) }; }
+export function getBlockDef(type)        { return SCHEMA[type] ?? SCHEMA.paragraph; }
+export function getAllTypes()            { return Object.keys(SCHEMA); }
+export function getTypesByCategory(cat)  { return Object.entries(SCHEMA).filter(([,d]) => d.category === cat).map(([t]) => t); }
+export function defaultMeta(type)        { return { ...(SCHEMA[type]?.defaultMeta ?? {}) }; }
+
 export default SCHEMA;