@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/TemplatePicker.tsx

@@ -6,12 +6,18 @@
  * and a one-sentence description so authors can quickly find the right layout.
  */
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import type { CustomTemplateDefinition } from '@bendyline/squisq/schemas';
 import { TEMPLATE_METADATA, resolveTemplateName } from '@bendyline/squisq/doc';
+import { extractPlainText } from '@bendyline/squisq/markdown';
 import { useCustomTemplates } from './customTemplates/CustomTemplateContext';
 import { TemplateThumbnail } from './customTemplates/thumbnail';
+import { TemplateContentPreview } from './TemplateContentPreview';
+import {
+  resolveTemplateContentPreviewResult,
+  type TemplatePreviewSource,
+} from './templateContentPreviewResolver';
 
 // ── Template metadata ─────────────────────────────────────────────
 //
@@ -30,6 +36,21 @@ interface TemplateEntry {
   icon: JSX.Element;
 }
 
+/** Matches every gallery when multiple editor instances are mounted. */
+export const TEMPLATE_GALLERY_PORTAL_SELECTOR = '[data-squisq-template-gallery-portal]';
+
+const TEMPLATE_GALLERY_DIALOG_ID = 'squisq-template-gallery-dialog';
+const TEMPLATE_GALLERY_PORTAL_ID_PREFIX = 'squisq-template-gallery-portal';
+
+/**
+ * Give each portaled gallery a stable, collision-free id. Hosts should match
+ * galleries through {@link TEMPLATE_GALLERY_PORTAL_SELECTOR}; a process-wide
+ * singleton id cannot identify the right editor when several are mounted.
+ */
+function useTemplateGalleryPortalId(): string {
+  return `${TEMPLATE_GALLERY_PORTAL_ID_PREFIX}-${useId().replace(/:/g, '')}`;
+}
+
 const W = 56;
 const H = 40;
 
@@ -57,7 +78,7 @@ function TemplateIcon({ children }: { children: React.ReactNode }) {
 const NONE_ENTRY: TemplateEntry = {
   name: '',
   label: '— none —',
-  description: 'Plain heading block with no visual template.',
+  description: 'Plain heading block with no visual treatment.',
   icon: (
     <TemplateIcon>
       <rect
@@ -404,28 +425,62 @@ export const TEMPLATE_ENTRIES: TemplateEntry[] = [
         <rect x={4} y={6} width={16} height={10} rx={2} fill={FA} opacity={0.85} />
         <rect x={36} y={6} width={16} height={10} rx={2} fill={F2} opacity={0.8} />
         <rect x={20} y={24} width={16} height={10} rx={2} fill={F2} opacity={0.8} />
+        <path d="M 20 11 L 36 11" stroke={FA} strokeWidth={1.5} fill="none" opacity={0.7} />
+        <path d="M 36 11 L 32 8.5 L 32 13.5 Z" fill={FA} opacity={0.7} />
         <path
-          d="M 20 11 L 36 11"
+          d="M 12 16 C 12 22, 24 22, 24 24"
           stroke={FA}
           strokeWidth={1.5}
           fill="none"
           opacity={0.7}
-          markerEnd="url(#tp-diagram-arrow)"
         />
         <path
-          d="M 12 16 C 12 22, 24 22, 24 24"
+          d="M 44 16 C 44 22, 32 22, 32 24"
           stroke={FA}
           strokeWidth={1.5}
           fill="none"
           opacity={0.7}
         />
+      </TemplateIcon>
+    ),
+  },
+  {
+    name: 'tree',
+    label: 'Tree',
+    description:
+      'Renders an ASCII file-tree / outline fence as a filesystem-style treeview — edit as an outline.',
+    icon: (
+      <TemplateIcon>
+        <rect x={6} y={5} width={16} height={7} rx={1.5} fill={FA} opacity={0.85} />
         <path
-          d="M 44 16 C 44 22, 32 22, 32 24"
-          stroke={FA}
+          d="M 12 12 L 12 34 M 12 20 L 22 20 M 12 34 L 22 34"
+          stroke={F1}
           strokeWidth={1.5}
           fill="none"
           opacity={0.7}
         />
+        <rect x={24} y={16} width={14} height={7} rx={1.5} fill={F2} opacity={0.8} />
+        <rect x={24} y={30} width={14} height={7} rx={1.5} fill={F2} opacity={0.8} />
+        <rect x={26} y={2} width={14} height={7} rx={1.5} fill={F2} opacity={0.6} />
+      </TemplateIcon>
+    ),
+  },
+  {
+    name: 'timeline',
+    label: 'Timeline',
+    description:
+      'Plots events across one or more horizontal tracks with callouts and optional branching links.',
+    icon: (
+      <TemplateIcon>
+        <path d="M 5 21 L 51 21" stroke={F1} strokeWidth={1.8} fill="none" />
+        <path d="M 47 18 L 52 21 L 47 24" stroke={F1} strokeWidth={1.5} fill="none" />
+        <circle cx={13} cy={21} r={3} fill={FA} />
+        <circle cx={29} cy={21} r={3} fill={F2} />
+        <circle cx={44} cy={21} r={3} fill={FA} />
+        <path d="M 13 18 L 13 10 M 29 24 L 29 32 M 44 18 L 44 8" stroke={F1} strokeWidth={1} />
+        <rect x={7} y={5} width={12} height={3} rx={1} fill={F2} opacity={0.8} />
+        <rect x={23} y={33} width={12} height={3} rx={1} fill={F2} opacity={0.8} />
+        <rect x={38} y={3} width={12} height={3} rx={1} fill={F2} opacity={0.8} />
       </TemplateIcon>
     ),
   },
@@ -513,6 +568,8 @@ export function templateLabel(
 export interface TemplatePickerProps {
   value: string;
   onChange: (name: string) => void;
+  /** Active editor chrome theme, used by the portaled dialog. */
+  colorScheme?: 'light' | 'dark';
   /** When true, shows only the trigger button (no popover) — used in the overflow menu. */
   compact?: boolean;
   /**
@@ -528,48 +585,37 @@ export interface TemplatePickerProps {
    * hidden.
    */
   onOpenDesigner?: () => void;
+  /**
+   * Active block content used to render live template thumbnails. When omitted,
+   * or when a template cannot be meaningfully derived from the block, cards use
+   * their static wireframe icons.
+   */
+  previewSource?: TemplatePreviewSource;
 }
 
 export function TemplatePicker({
   value,
   onChange,
+  colorScheme = 'light',
   compact,
   recommended,
   onOpenDesigner,
+  previewSource,
 }: TemplatePickerProps) {
   const [open, setOpen] = useState(false);
-  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
+  const [dialogStyle, setDialogStyle] = useState<React.CSSProperties>({});
   const containerRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const dialogId = `${TEMPLATE_GALLERY_DIALOG_ID}-${useId().replace(/:/g, '')}`;
 
-  // Position the portal popover below the trigger button. Clamp the
-  // left edge so the gallery (up to 780px wide) doesn't overflow the
-  // viewport when the toolbar trigger sits near the right edge of the
-  // window — previously the popover was left-aligned to the trigger,
-  // which pushed half the cards off-screen at narrow widths.
-  const updatePosition = () => {
+  const updateDialogBounds = () => {
     if (!triggerRef.current) return;
-    const rect = triggerRef.current.getBoundingClientRect();
-    const popoverEl = document.getElementById('squisq-template-gallery-portal');
-    // Use the actual rendered width if the popover is already mounted;
-    // otherwise fall back to the CSS-defined max so the first paint
-    // doesn't overflow either. Measure the portal element directly —
-    // its `firstElementChild` is the (small) "(none)" option, not the
-    // gallery itself.
-    const popoverWidth = popoverEl?.getBoundingClientRect().width ?? 780;
-    const margin = 8;
-    const maxLeft = Math.max(margin, window.innerWidth - popoverWidth - margin);
-    const left = Math.min(Math.max(margin, rect.left), maxLeft);
-    setPopoverStyle({
-      position: 'fixed',
-      top: rect.bottom + 6,
-      left,
-      zIndex: 9999,
-    });
+    setDialogStyle(computeDialogStyle(triggerRef.current));
   };
 
   const handleOpen = () => {
-    updatePosition();
+    updateDialogBounds();
     setOpen((v) => !v);
   };
 
@@ -579,8 +625,8 @@ export function TemplatePicker({
     const handler = (e: MouseEvent) => {
       const target = e.target as Node;
       const inTrigger = triggerRef.current?.contains(target);
-      const inPopover = document.getElementById('squisq-template-gallery-portal')?.contains(target);
-      if (!inTrigger && !inPopover) {
+      const inDialog = dialogRef.current?.contains(target);
+      if (!inTrigger && !inDialog) {
         setOpen(false);
       }
     };
@@ -601,10 +647,8 @@ export function TemplatePicker({
   // Reposition on scroll/resize while open
   useEffect(() => {
     if (!open) return;
-    // Reposition once on the next frame so the clamp uses the actual
-    // rendered popover width (the initial open() runs before mount).
-    requestAnimationFrame(updatePosition);
-    const handler = () => updatePosition();
+    requestAnimationFrame(updateDialogBounds);
+    const handler = () => updateDialogBounds();
     window.addEventListener('scroll', handler, true);
     window.addEventListener('resize', handler);
     return () => {
@@ -621,6 +665,7 @@ export function TemplatePicker({
   const currentLabel = templateLabel(value);
   const currentEntry: TemplateEntry =
     (value && TEMPLATE_ENTRIES.find((e) => e.name === value)) || NONE_ENTRY;
+  const dialogTitle = templateDialogTitle(previewSource);
 
   if (compact) {
     // In overflow menu, use a simple select for space efficiency
@@ -642,13 +687,23 @@ export function TemplatePicker({
 
   const gallery = open
     ? createPortal(
-        <TemplateGalleryBody
-          value={value}
-          onSelect={handleSelect}
-          style={popoverStyle}
-          recommended={recommended}
-          onOpenDesigner={onOpenDesigner}
-        />,
+        <TemplateGalleryDialog
+          dialogRef={dialogRef}
+          dialogId={dialogId}
+          title={dialogTitle}
+          colorScheme={colorScheme}
+          style={dialogStyle}
+          onClose={() => setOpen(false)}
+        >
+          <TemplateGalleryBody
+            value={value}
+            onSelect={handleSelect}
+            style={{}}
+            recommended={recommended}
+            onOpenDesigner={onOpenDesigner}
+            previewSource={previewSource}
+          />
+        </TemplateGalleryDialog>,
         document.body,
       )
     : null;
@@ -660,9 +715,10 @@ export function TemplatePicker({
         type="button"
         className={`squisq-template-picker-trigger${open ? ' squisq-template-picker-trigger--open' : ''}`}
         onClick={handleOpen}
-        aria-haspopup="listbox"
+        aria-haspopup="dialog"
         aria-expanded={open}
-        title="Choose block template"
+        aria-controls={open ? dialogId : undefined}
+        title="Choose block type"
       >
         <span className="squisq-template-picker-trigger-label">Block:</span>
         <span className="squisq-template-picker-trigger-thumb" aria-hidden="true">
@@ -695,8 +751,66 @@ export function TemplatePicker({
 
 // ── Reusable gallery body ──────────────────────────────────────────
 
+function TemplateGalleryDialog({
+  dialogRef,
+  dialogId,
+  children,
+  title,
+  colorScheme,
+  style,
+  onClose,
+}: {
+  dialogRef: React.RefObject<HTMLDivElement>;
+  dialogId: string;
+  children: React.ReactNode;
+  title: string;
+  colorScheme: 'light' | 'dark';
+  style: React.CSSProperties;
+  onClose: () => void;
+}) {
+  return (
+    <div
+      ref={dialogRef}
+      id={dialogId}
+      className="squisq-template-gallery-dialog"
+      data-theme={colorScheme}
+      style={style}
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
+      <div
+        className="squisq-template-gallery-dialog-panel"
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+      >
+        <div className="squisq-template-gallery-dialog-header">
+          <h2 className="squisq-template-gallery-dialog-title">{title}</h2>
+          <button
+            type="button"
+            className="squisq-template-gallery-dialog-close"
+            onClick={onClose}
+            aria-label="Close block type picker"
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+              <path
+                d="M3.2 3.2l7.6 7.6M10.8 3.2l-7.6 7.6"
+                stroke="currentColor"
+                strokeWidth="1.7"
+                strokeLinecap="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="squisq-template-gallery-dialog-body">{children}</div>
+      </div>
+    </div>
+  );
+}
+
 /**
- * The popover/grid markup shared by the toolbar `TemplatePicker` and the
+ * The dialog/grid markup shared by the toolbar `TemplatePicker` and the
  * inline `TemplateBadgeMenu`. Renders all template cards plus the
  * "(none)" option; no positioning logic — callers supply `style` (typically
  * a `position: fixed` rect from `getBoundingClientRect()`).
@@ -705,10 +819,12 @@ function TemplateCard({
   entry,
   value,
   onSelect,
+  previewSource,
 }: {
   entry: TemplateEntry;
   value: string;
   onSelect: (name: string) => void;
+  previewSource?: TemplatePreviewSource;
 }) {
   return (
     <button
@@ -719,7 +835,13 @@ function TemplateCard({
       onClick={() => onSelect(entry.name)}
       title={entry.description}
     >
-      <div className="squisq-template-gallery-card-icon">{entry.icon}</div>
+      <div className="squisq-template-gallery-card-icon">
+        <TemplateContentPreview
+          templateName={entry.name}
+          source={previewSource}
+          fallback={entry.icon}
+        />
+      </div>
       <div className="squisq-template-gallery-card-body">
         <span className="squisq-template-gallery-card-name">{entry.label}</span>
         <span className="squisq-template-gallery-card-desc">{entry.description}</span>
@@ -728,19 +850,40 @@ function TemplateCard({
   );
 }
 
+function splitBlockTypeEntriesByContent(
+  entries: readonly TemplateEntry[],
+  previewSource?: TemplatePreviewSource,
+): { blockTypeEntries: TemplateEntry[]; contentNeededEntries: TemplateEntry[] } {
+  if (!previewSource) return { blockTypeEntries: [...entries], contentNeededEntries: [] };
+
+  const blockTypeEntries: TemplateEntry[] = [];
+  const contentNeededEntries: TemplateEntry[] = [];
+
+  for (const entry of entries) {
+    const result = resolveTemplateContentPreviewResult(entry.name, previewSource);
+    if (result.warning) contentNeededEntries.push(entry);
+    else blockTypeEntries.push(entry);
+  }
+
+  return { blockTypeEntries, contentNeededEntries };
+}
+
 function TemplateGalleryBody({
   value,
   onSelect,
   style,
   recommended,
   onOpenDesigner,
+  previewSource,
 }: {
   value: string;
   onSelect: (name: string) => void;
   style: React.CSSProperties;
   recommended?: readonly string[];
   onOpenDesigner?: () => void;
+  previewSource?: TemplatePreviewSource;
 }) {
+  const galleryId = useTemplateGalleryPortalId();
   const [query, setQuery] = useState('');
   const searchRef = useRef<HTMLInputElement>(null);
   // Pull merged doc + library templates from the surrounding context.
@@ -779,21 +922,34 @@ function TemplateGalleryBody({
     return { built, custom };
   }, [hasQuery, trimmedQuery, customTemplates]);
 
-  const recommendedSet = recommended && recommended.length > 0 ? new Set(recommended) : null;
-  const recommendedEntries = recommendedSet
-    ? TEMPLATE_ENTRIES.filter((e) => recommendedSet.has(e.name))
-    : [];
-  const restEntries = recommendedSet
-    ? TEMPLATE_ENTRIES.filter((e) => !recommendedSet.has(e.name))
-    : TEMPLATE_ENTRIES;
-  const segmented = !hasQuery && recommendedEntries.length > 0;
+  const recommendedSet = useMemo(
+    () => (recommended && recommended.length > 0 ? new Set(recommended) : null),
+    [recommended],
+  );
+  const recommendedEntries = useMemo(
+    () => (recommendedSet ? TEMPLATE_ENTRIES.filter((e) => recommendedSet.has(e.name)) : []),
+    [recommendedSet],
+  );
+  const restEntries = useMemo(
+    () =>
+      recommendedSet
+        ? TEMPLATE_ENTRIES.filter((e) => !recommendedSet.has(e.name))
+        : TEMPLATE_ENTRIES,
+    [recommendedSet],
+  );
+  const { blockTypeEntries, contentNeededEntries } = useMemo(
+    () => splitBlockTypeEntriesByContent(restEntries, previewSource),
+    [restEntries, previewSource],
+  );
+  const grouped = !hasQuery && (recommendedEntries.length > 0 || contentNeededEntries.length > 0);
 
   return (
     <div
-      id="squisq-template-gallery-portal"
-      className={`squisq-template-gallery${segmented ? ' squisq-template-gallery--segmented' : ''}`}
+      id={galleryId}
+      data-squisq-template-gallery-portal=""
+      className={`squisq-template-gallery${grouped ? ' squisq-template-gallery--segmented' : ''}`}
       role="listbox"
-      aria-label="Block templates"
+      aria-label="Block types"
       style={style}
     >
       <div className="squisq-template-gallery-search">
@@ -812,10 +968,10 @@ function TemplateGalleryBody({
           ref={searchRef}
           type="search"
           className="squisq-template-gallery-search-input"
-          placeholder="Search templates…"
+          placeholder="Search block types…"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
-          aria-label="Search block templates"
+          aria-label="Search block types"
         />
       </div>
 
@@ -854,13 +1010,19 @@ function TemplateGalleryBody({
             {matches.built.length > 0 && (
               <div className="squisq-template-gallery-grid">
                 {matches.built.map((entry) => (
-                  <TemplateCard key={entry.name} entry={entry} value={value} onSelect={onSelect} />
+                  <TemplateCard
+                    key={entry.name}
+                    entry={entry}
+                    value={value}
+                    onSelect={onSelect}
+                    previewSource={previewSource}
+                  />
                 ))}
               </div>
             )}
           </>
         ) : (
-          <div className="squisq-template-gallery-empty">No templates match "{query}".</div>
+          <div className="squisq-template-gallery-empty">No block types match "{query}".</div>
         )
       ) : (
         <>
@@ -872,9 +1034,9 @@ function TemplateGalleryBody({
                 +
               </span>
               <span className="squisq-template-gallery-new-body">
-                <span className="squisq-template-gallery-new-label">New layout</span>
+                <span className="squisq-template-gallery-new-label">New block type</span>
                 <span className="squisq-template-gallery-new-desc">
-                  Design a reusable layout with placeholders for {'{title}'} and {'{content}'}.
+                  Design a reusable block type with placeholders for {'{title}'} and {'{content}'}.
                 </span>
               </span>
             </button>
@@ -891,30 +1053,69 @@ function TemplateGalleryBody({
             </div>
           )}
 
-          {segmented && (
+          {recommendedEntries.length > 0 && (
             <div className="squisq-template-gallery-section">
-              <h3 className="squisq-template-gallery-section-title">Recommended for this block</h3>
+              <h3 className="squisq-template-gallery-section-title">Suggested Block Types</h3>
               <div className="squisq-template-gallery-grid">
                 {recommendedEntries.map((entry) => (
-                  <TemplateCard key={entry.name} entry={entry} value={value} onSelect={onSelect} />
+                  <TemplateCard
+                    key={entry.name}
+                    entry={entry}
+                    value={value}
+                    onSelect={onSelect}
+                    previewSource={previewSource}
+                  />
                 ))}
               </div>
             </div>
           )}
 
-          {segmented ? (
-            <div className="squisq-template-gallery-section">
-              <h3 className="squisq-template-gallery-section-title">All templates</h3>
-              <div className="squisq-template-gallery-grid">
-                {restEntries.map((entry) => (
-                  <TemplateCard key={entry.name} entry={entry} value={value} onSelect={onSelect} />
-                ))}
-              </div>
-            </div>
+          {grouped ? (
+            <>
+              {blockTypeEntries.length > 0 && (
+                <div className="squisq-template-gallery-section">
+                  <h3 className="squisq-template-gallery-section-title">Block Types</h3>
+                  <div className="squisq-template-gallery-grid">
+                    {blockTypeEntries.map((entry) => (
+                      <TemplateCard
+                        key={entry.name}
+                        entry={entry}
+                        value={value}
+                        onSelect={onSelect}
+                        previewSource={previewSource}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {contentNeededEntries.length > 0 && (
+                <div className="squisq-template-gallery-section">
+                  <h3 className="squisq-template-gallery-section-title">Block Types for Content</h3>
+                  <div className="squisq-template-gallery-grid">
+                    {contentNeededEntries.map((entry) => (
+                      <TemplateCard
+                        key={entry.name}
+                        entry={entry}
+                        value={value}
+                        onSelect={onSelect}
+                        previewSource={previewSource}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+            </>
           ) : (
             <div className="squisq-template-gallery-grid">
-              {restEntries.map((entry) => (
-                <TemplateCard key={entry.name} entry={entry} value={value} onSelect={onSelect} />
+              {blockTypeEntries.map((entry) => (
+                <TemplateCard
+                  key={entry.name}
+                  entry={entry}
+                  value={value}
+                  onSelect={onSelect}
+                  previewSource={previewSource}
+                />
               ))}
             </div>
           )}
@@ -957,7 +1158,7 @@ function CustomTemplateCard({
       <div className="squisq-template-gallery-card-body">
         <span className="squisq-template-gallery-card-name">{def.label}</span>
         <span className="squisq-template-gallery-card-desc">
-          {def.description ?? 'Custom template'}
+          {def.description ?? 'Custom block type'}
         </span>
       </div>
     </button>
@@ -973,6 +1174,8 @@ export interface TemplateBadgePopoverProps {
   value: string;
   onChange: (name: string) => void;
   onClose: () => void;
+  /** Active editor chrome theme, used by the portaled dialog. */
+  colorScheme?: 'light' | 'dark';
   /** Optional list of template names to surface as "Recommended for this block". */
   recommended?: readonly string[];
   /**
@@ -981,27 +1184,35 @@ export interface TemplateBadgePopoverProps {
    * it closes the popover and opens the designer.
    */
   onOpenDesigner?: () => void;
+  /**
+   * Active block content used to render live template thumbnails. Falls back to
+   * static icons when a candidate cannot be derived.
+   */
+  previewSource?: TemplatePreviewSource;
 }
 
 /**
- * Standalone popover that mirrors the toolbar `TemplatePicker`'s gallery,
- * but is anchored to a caller-supplied DOM rect (typically a clicked
- * `.squisq-template-badge` span). Handles its own positioning, outside
- * clicks, Escape, and viewport-edge clamping.
+ * Standalone dialog that mirrors the toolbar `TemplatePicker`'s gallery
+ * when opened from an inline heading badge.
  */
 export function TemplateBadgePopover({
   anchorRect,
   value,
   onChange,
   onClose,
+  colorScheme = 'light',
   recommended,
   onOpenDesigner,
+  previewSource,
 }: TemplateBadgePopoverProps) {
-  const [style, setStyle] = useState<React.CSSProperties>(() => computePopoverStyle(anchorRect));
+  const [style, setStyle] = useState<React.CSSProperties>(() => computeDialogStyle(anchorRect));
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const dialogId = `${TEMPLATE_GALLERY_DIALOG_ID}-${useId().replace(/:/g, '')}`;
 
-  // Reposition once after mount using the actual rendered popover width.
+  // Reposition once after mount so the dialog covers the current editor shell.
   useEffect(() => {
-    requestAnimationFrame(() => setStyle(computePopoverStyle(anchorRect)));
+    const frame = requestAnimationFrame(() => setStyle(computeDialogStyle(anchorRect)));
+    return () => cancelAnimationFrame(frame);
   }, [anchorRect]);
 
   // Outside click + Escape close
@@ -1011,8 +1222,8 @@ export function TemplateBadgePopover({
     };
     const onMouse = (e: MouseEvent) => {
       const target = e.target as Node;
-      const inPopover = document.getElementById('squisq-template-gallery-portal')?.contains(target);
-      if (!inPopover) onClose();
+      const inDialog = dialogRef.current?.contains(target);
+      if (!inDialog) onClose();
     };
     // Defer the mousedown listener by one frame so the click that opened
     // us doesn't immediately close us.
@@ -1032,62 +1243,72 @@ export function TemplateBadgePopover({
     onClose();
   };
 
+  const dialogTitle = templateDialogTitle(previewSource);
+
   return createPortal(
-    <TemplateGalleryBody
-      value={value}
-      onSelect={handleSelect}
+    <TemplateGalleryDialog
+      dialogRef={dialogRef}
+      dialogId={dialogId}
+      title={dialogTitle}
+      colorScheme={colorScheme}
       style={style}
-      recommended={recommended}
-      onOpenDesigner={onOpenDesigner}
-    />,
+      onClose={onClose}
+    >
+      <TemplateGalleryBody
+        value={value}
+        onSelect={handleSelect}
+        style={{}}
+        recommended={recommended}
+        onOpenDesigner={onOpenDesigner}
+        previewSource={previewSource}
+      />
+    </TemplateGalleryDialog>,
     document.body,
   );
 }
 
-function computePopoverStyle(rect: DOMRect): React.CSSProperties {
-  // The portal *is* the gallery (`#squisq-template-gallery-portal` is the
-  // outer `.squisq-template-gallery` div). Measure it directly — using
-  // `firstElementChild` returns the "(none)" option, which is ~50px tall
-  // and made the "fits below" check incorrectly pass on tall galleries.
-  const popoverEl = document.getElementById('squisq-template-gallery-portal');
-  const popoverRect = popoverEl?.getBoundingClientRect();
-  const popoverWidth = popoverRect?.width ?? 780;
-  const popoverHeight = popoverRect?.height ?? 520;
-  const margin = 8;
-  const gap = 6;
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
+function templateDialogTitle(previewSource?: TemplatePreviewSource): string {
+  return `Block Type for ${templateDialogBlockTitle(previewSource)}`;
+}
 
-  // Vertical placement: prefer below the badge, fall back to above.
-  // If neither fits, center the popover in the viewport (dialog-style)
-  // so the gallery is always fully visible no matter where the chip
-  // sits in the editor (top, middle, bottom).
-  const spaceBelow = vh - rect.bottom - margin;
-  const spaceAbove = rect.top - margin;
-  let top: number;
-  let left: number;
-  if (popoverHeight + gap <= spaceBelow) {
-    top = rect.bottom + gap;
-    const maxLeft = Math.max(margin, vw - popoverWidth - margin);
-    left = Math.min(Math.max(margin, rect.left), maxLeft);
-  } else if (popoverHeight + gap <= spaceAbove) {
-    top = rect.top - popoverHeight - gap;
-    const maxLeft = Math.max(margin, vw - popoverWidth - margin);
-    left = Math.min(Math.max(margin, rect.left), maxLeft);
-  } else {
-    // Center it.
-    top = Math.max(margin, Math.floor((vh - popoverHeight) / 2));
-    left = Math.max(margin, Math.floor((vw - popoverWidth) / 2));
-  }
+function templateDialogBlockTitle(previewSource?: TemplatePreviewSource): string {
+  const block = previewSource?.block;
+  if (!block) return 'this block';
+
+  const headingText = block.sourceHeading ? extractPlainText(block.sourceHeading).trim() : '';
+  const title = (headingText || block.title || '').replace(/\s+/g, ' ').trim();
+  return title || 'this block';
+}
+
+function computeDialogStyle(anchor: Element | DOMRect): React.CSSProperties {
+  const shellRect = findEditorShellRect(anchor);
+  const left = Math.max(0, shellRect.left);
+  const top = Math.max(0, shellRect.top);
+  const right = Math.min(window.innerWidth, shellRect.right);
+  const bottom = Math.min(window.innerHeight, shellRect.bottom);
 
   return {
     position: 'fixed',
     top,
     left,
-    // Cap height so an oversized gallery still fits and scrolls
-    // gracefully instead of pushing past the viewport.
-    maxHeight: `${vh - 2 * margin}px`,
-    overflowY: 'auto',
+    width: Math.max(0, right - left),
+    height: Math.max(0, bottom - top),
     zIndex: 9999,
   };
 }
+
+function findEditorShellRect(anchor: Element | DOMRect): DOMRect {
+  if (anchor instanceof Element) {
+    const shell = anchor.closest('.squisq-editor-shell');
+    if (shell) return shell.getBoundingClientRect();
+  } else {
+    const x = anchor.left + anchor.width / 2;
+    const y = anchor.top + anchor.height / 2;
+    for (const element of document.elementsFromPoint(x, y)) {
+      const shell = element.closest('.squisq-editor-shell');
+      if (shell) return shell.getBoundingClientRect();
+    }
+  }
+
+  return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+}