@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/ImageEditor.tsx

@@ -19,7 +19,7 @@ import { exportImageEditDoc, type ImageEditExportFormat } from '@bendyline/squis
 import type { SurfaceScheme, Theme } from '@bendyline/squisq/schemas';
 import { CanvasSurface } from './imageEditor/CanvasSurface.js';
 import { ImageVersionHistoryDropdown } from './imageEditor/ImageVersionHistoryDropdown.js';
-import { LayersPanel } from './imageEditor/LayersPanel.js';
+import { LayersPanel, type AddableLayerKind } from './imageEditor/LayersPanel.js';
 import { PropertiesPanel } from './imageEditor/PropertiesPanel.js';
 import { Toolbar } from './imageEditor/Toolbar.js';
 import { useImageEditor } from './imageEditor/useImageEditor.js';
@@ -115,6 +115,7 @@ export function ImageEditor(props: ImageEditorProps) {
   const [historyRefreshKey, setHistoryRefreshKey] = useState(0);
 
   const surfaceRef = useRef<HTMLDivElement>(null);
+  const imageInputRef = useRef<HTMLInputElement>(null);
   const [zoom, setZoom] = useState(1.0);
 
   const handleZoomIn = useCallback(() => {
@@ -276,6 +277,24 @@ export function ImageEditor(props: ImageEditorProps) {
     [dispatch, shapeKind],
   );
 
+  const handleAddLayer = useCallback(
+    (kind: AddableLayerKind) => {
+      if (!state) return;
+      if (kind === 'image') {
+        imageInputRef.current?.click();
+        return;
+      }
+
+      const { width, height } = state.doc.canvas;
+      if (kind === 'text') {
+        handleCreateTextAt(Math.max(0, (width - 240) / 2), Math.max(0, (height - 48) / 2));
+        return;
+      }
+      handleCreateShapeAt(width / 2, height / 2);
+    },
+    [handleCreateShapeAt, handleCreateTextAt, state],
+  );
+
   if (error) {
     return (
       <div
@@ -312,6 +331,7 @@ export function ImageEditor(props: ImageEditorProps) {
         shapeKind={state.shapeKind}
         dispatch={dispatch}
         uploadAsset={uploadAsset}
+        imageInputRef={imageInputRef}
         onExport={handleExport}
         onSave={saveBehavior === 'export' ? handleSaveAndClose : flush}
         saveLabel={saveLabel ?? (saveBehavior === 'export' ? 'Save and close' : 'Save')}
@@ -361,6 +381,7 @@ export function ImageEditor(props: ImageEditorProps) {
             doc={state.doc}
             selectedLayerId={state.selectedLayerId}
             dispatch={dispatch}
+            onAddLayer={handleAddLayer}
           />
           <PropertiesPanel
             doc={state.doc}

package/src/InlinePreviewGutter.tsx

@@ -8,7 +8,7 @@
  *
  * The gutter consumes the parsed `Doc` from `useEditorContext()` and reuses
  * the same template-resolution path as `LinearDocView` (heading text →
- * template defaults → `getLayers()` → `BlockRenderer`).
+ * template defaults → `materializeBlockLayers()` → `BlockRenderer`).
  *
  * Auto-hides via container queries when the surrounding container is too
  * narrow (see `.squisq-editor-with-gutter` rules in `styles/editor.css`).
@@ -31,10 +31,10 @@ import type { Block, DocBlock, ViewportConfig } from '@bendyline/squisq/schemas'
 import { VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
 import {
   flattenBlocks,
-  getLayers,
-  hasTemplate,
+  materializeBlockLayers,
   DEFAULT_THEME,
-  type RenderContext,
+  deriveTemplateInputs,
+  type MaterializeBlockLayersOptions,
 } from '@bendyline/squisq/doc';
 import { extractPlainText, getChildren } from '@bendyline/squisq/markdown';
 import { usePreviewSettingsOptional } from './PreviewControls';
@@ -56,7 +56,7 @@ import { useHeadingLayout } from './useHeadingLayout';
 function isAnnotated(block: Block): boolean {
   const annotation = block.sourceHeading?.templateAnnotation;
   if (!annotation) return false;
-  return !!annotation.template && hasTemplate(annotation.template);
+  return !!annotation.template;
 }
 
 function extractBodyPlainText(contents?: MarkdownBlockNode[]): string {
@@ -188,7 +188,12 @@ function getTemplateDefaults(
 ): Record<string, unknown> {
   switch (templateName) {
     case 'statHighlight':
-      return { stat: headingText, description: bodyText || headingText };
+      return (
+        deriveTemplateInputs(templateName, headingText, contents, { placeholders: true }) ?? {
+          stat: headingText,
+          description: bodyText || headingText,
+        }
+      );
     case 'quote':
     case 'fullBleedQuote':
     case 'pullQuote':
@@ -334,6 +339,8 @@ export function InlinePreviewGutter({
         duration: 1,
         audioSegment: 0,
         title: headingText,
+        contents: block.contents,
+        children: block.children,
         ...getTemplateDefaults(
           template,
           headingText,
@@ -345,15 +352,16 @@ export function InlinePreviewGutter({
         ...block.templateOverrides,
       };
 
-      const ctx: RenderContext = {
+      const ctx: MaterializeBlockLayersOptions = {
         blockIndex: index,
         totalBlocks,
         theme: activeTheme,
         viewport,
+        customTemplates: doc.customTemplates,
       };
 
       try {
-        const layers = getLayers(templateBlock as unknown as DocBlock, ctx);
+        const { layers } = materializeBlockLayers(templateBlock as unknown as DocBlock, ctx);
         const visualBlock = {
           ...block,
           layers,

package/src/MediaBin.tsx

@@ -9,6 +9,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import type { MediaProvider, MediaEntry } from '@bendyline/squisq/schemas';
 import { SQUISQ_MEDIA_MIME } from './mediaDragMime';
+import { filterVisibleMediaEntries } from './mediaEntries';
 
 // ============================================
 // Types
@@ -24,8 +25,8 @@ export interface MediaBinProps {
   /** Relative media paths currently referenced by the document. */
   usedMediaPaths?: ReadonlySet<string>;
   /**
-   * Fired after a successful upload via the MediaBin's own "+ Upload"
-   * button. `relativePath` is what the provider returned (the same
+   * Fired after a successful upload via the MediaBin's "+ Upload"
+   * button or image drop target. `relativePath` is what the provider returned (the same
    * value embedded in markdown refs, e.g. `attachments/xyz.png`);
    * `name` is the uploader-chosen filename before storage renamed
    * it. Consumers typically use this to insert a markdown image ref
@@ -66,6 +67,24 @@ function isImageMime(mimeType: string): boolean {
   return mimeType.startsWith('image/');
 }
 
+const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'avif', 'ico']);
+
+function isImageFile(file: Pick<File, 'name' | 'type'>): boolean {
+  if (isImageMime(file.type)) return true;
+  const dot = file.name.lastIndexOf('.');
+  return dot >= 0 && IMAGE_EXTENSIONS.has(file.name.slice(dot + 1).toLowerCase());
+}
+
+/** During drag-over browsers expose item MIME types but often not filenames. */
+function dataTransferMayContainImage(dataTransfer: DataTransfer): boolean {
+  if (dataTransfer.items.length > 0) {
+    return Array.from(dataTransfer.items).some(
+      (item) => item.kind === 'file' && (item.type === '' || isImageMime(item.type)),
+    );
+  }
+  return Array.from(dataTransfer.files).some(isImageFile);
+}
+
 function sortMediaEntries(entries: MediaEntry[]): MediaEntry[] {
   return entries.sort((a, b) => {
     const aImg = isImageMime(a.mimeType) ? 0 : 1;
@@ -91,6 +110,7 @@ export function MediaBin({
   const [entries, setEntries] = useState<MediaEntry[]>([]);
   const [thumbUrls, setThumbUrls] = useState<Record<string, string>>({});
   const [loading, setLoading] = useState(false);
+  const [isDropActive, setIsDropActive] = useState(false);
   const [contextMenu, setContextMenu] = useState<{
     entry: MediaEntry;
     x: number;
@@ -98,10 +118,11 @@ export function MediaBin({
   } | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const contextMenuRef = useRef<HTMLDivElement>(null);
+  const dropDepthRef = useRef(0);
 
   const updateEntries = useCallback(
     async (provider: MediaProvider) => {
-      const list = sortMediaEntries(await provider.listMedia());
+      const list = sortMediaEntries(filterVisibleMediaEntries(await provider.listMedia()));
       setEntries(list);
       onCountChange?.(list.length);
 
@@ -159,7 +180,7 @@ export function MediaBin({
     async function scan() {
       setLoading(true);
       try {
-        const list = await mediaProvider!.listMedia();
+        const list = filterVisibleMediaEntries(await mediaProvider!.listMedia());
         if (cancelled) return;
 
         sortMediaEntries(list);
@@ -194,16 +215,12 @@ export function MediaBin({
     fileInputRef.current?.click();
   }, []);
 
-  const handleFileChange = useCallback(
-    async (e: React.ChangeEvent<HTMLInputElement>) => {
-      const files = e.target.files;
-      if (!files || !mediaProvider) return;
-
+  const uploadFiles = useCallback(
+    async (files: readonly File[]) => {
+      if (files.length === 0 || !mediaProvider) return;
       setLoading(true);
       try {
-        for (let i = 0; i < files.length; i++) {
-          const file = files[i];
-          if (!file) continue;
+        for (const file of files) {
           const buffer = await file.arrayBuffer();
           const mimeType = file.type || 'application/octet-stream';
           const relativePath = await mediaProvider.addMedia(file.name, buffer, mimeType);
@@ -219,12 +236,67 @@ export function MediaBin({
         await updateEntries(mediaProvider);
       } finally {
         setLoading(false);
-        if (fileInputRef.current) fileInputRef.current.value = '';
       }
     },
     [mediaProvider, onMediaUploaded, updateEntries],
   );
 
+  const handleFileChange = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      try {
+        await uploadFiles(Array.from(e.target.files ?? []));
+      } finally {
+        if (fileInputRef.current) fileInputRef.current.value = '';
+      }
+    },
+    [uploadFiles],
+  );
+
+  const handleDragEnter = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      if (!mediaProvider || loading || !dataTransferMayContainImage(event.dataTransfer)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      dropDepthRef.current += 1;
+      setIsDropActive(true);
+    },
+    [loading, mediaProvider],
+  );
+
+  const handleDragOver = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      if (!mediaProvider || loading || !dataTransferMayContainImage(event.dataTransfer)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.dataTransfer.dropEffect = 'copy';
+    },
+    [loading, mediaProvider],
+  );
+
+  const handleDragLeave = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      if (!isDropActive) return;
+      event.preventDefault();
+      event.stopPropagation();
+      dropDepthRef.current = Math.max(0, dropDepthRef.current - 1);
+      if (dropDepthRef.current === 0) setIsDropActive(false);
+    },
+    [isDropActive],
+  );
+
+  const handleDrop = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      const imageFiles = Array.from(event.dataTransfer.files).filter(isImageFile);
+      if (!mediaProvider || (!isDropActive && imageFiles.length === 0)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      dropDepthRef.current = 0;
+      setIsDropActive(false);
+      if (imageFiles.length > 0) void uploadFiles(imageFiles);
+    },
+    [isDropActive, mediaProvider, uploadFiles],
+  );
+
   const handleRemoveEntry = useCallback(
     async (entry: MediaEntry) => {
       if (!mediaProvider) return;
@@ -279,7 +351,20 @@ export function MediaBin({
   );
 
   return (
-    <div className={`squisq-media-bin${isDark ? ' squisq-media-bin--dark' : ''}`}>
+    <div
+      className={[
+        'squisq-media-bin',
+        isDark ? 'squisq-media-bin--dark' : '',
+        isDropActive ? 'squisq-media-bin--drop-active' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      aria-busy={loading}
+    >
       {/* Header */}
       <div className="squisq-media-bin-header">
         <span className="squisq-media-bin-title">
@@ -374,6 +459,14 @@ export function MediaBin({
         })}
       </div>
 
+      {isDropActive && (
+        <div className="squisq-media-bin-drop-target" aria-hidden="true">
+          <span className="squisq-media-bin-drop-target-icon">+</span>
+          <strong>Drop images here</strong>
+          <span>Add to Files</span>
+        </div>
+      )}
+
       {contextMenu && (
         <div
           ref={contextMenuRef}

package/src/OutlinePanel.tsx

@@ -8,7 +8,15 @@
  * lives in `useHeadingLayout`.
  */
 
-import { type CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  type CSSProperties,
+  type DragEvent as ReactDragEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import type { Block } from '@bendyline/squisq/schemas';
 import { flattenBlocks, hasTemplate } from '@bendyline/squisq/doc';
 import { extractPlainText } from '@bendyline/squisq/markdown';
@@ -16,6 +24,7 @@ import { useEditorContext } from './EditorContext';
 import { templateLabel } from './TemplatePicker';
 import { useHeadingLayout } from './useHeadingLayout';
 import { usePreviewSettingsOptional } from './PreviewControls';
+import { moveHeadingSectionInSource, type OutlineDropPlacement } from './outlineSource';
 
 /**
  * Responsive default width for the outline pane, used when no fixed `width`
@@ -38,13 +47,34 @@ export interface OutlinePanelProps {
   width?: number;
   /** Optional CSS class for the outer container. */
   className?: string;
+  /** Disable heading-level changes and section reordering. */
+  readOnly?: boolean;
 }
 
-export function OutlinePanel({ width, className }: OutlinePanelProps) {
+interface OutlineSectionRef {
+  blockId: string;
+  headingLine: number;
+  depth: number;
+  parentId: string | null;
+}
+
+interface ActiveOutlineDrag extends OutlineSectionRef {
+  sourceAtStart: string;
+}
+
+interface OutlineDropTarget {
+  blockId: string;
+  placement: OutlineDropPlacement;
+}
+
+const OUTLINE_DRAG_MIME = 'application/x-squisq-outline-section';
+
+export function OutlinePanel({ width, className, readOnly = false }: OutlinePanelProps) {
   const {
     doc,
     markdownSource,
     setMarkdownSource,
+    isParsing,
     layoutMode,
     goToBlockByLine,
     activeBlockStartLine,
@@ -52,6 +82,9 @@ export function OutlinePanel({ width, className }: OutlinePanelProps) {
   const paneRef = useRef<HTMLElement | null>(null);
   const { scrollToBlock } = useHeadingLayout(paneRef);
   const cursorActiveId = useActiveOutlineBlockId();
+  const activeDragRef = useRef<ActiveOutlineDrag | null>(null);
+  const [draggedBlockId, setDraggedBlockId] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<OutlineDropTarget | null>(null);
 
   // In block-at-a-time mode there's no live cursor across the whole document
   // (only the active block is mounted), so the highlight follows the card:
@@ -87,12 +120,94 @@ export function OutlinePanel({ width, className }: OutlinePanelProps) {
   // Both editor surfaces resync from `markdownSource` automatically.
   const changeHeadingLevel = useCallback(
     (block: Block, delta: number) => {
+      if (readOnly || isParsing) return;
       const line = block.sourceHeading?.position?.start.line;
       if (typeof line !== 'number') return;
       const next = bumpHeadingLevelInSource(markdownSource, line, delta);
       if (next != null) setMarkdownSource(next);
     },
-    [markdownSource, setMarkdownSource],
+    [isParsing, markdownSource, readOnly, setMarkdownSource],
+  );
+
+  const clearDragState = useCallback(() => {
+    activeDragRef.current = null;
+    setDraggedBlockId(null);
+    setDropTarget(null);
+  }, []);
+
+  const handleDragStart = useCallback(
+    (event: ReactDragEvent<HTMLElement>, section: OutlineSectionRef) => {
+      if (readOnly || isParsing) {
+        event.preventDefault();
+        return;
+      }
+
+      activeDragRef.current = { ...section, sourceAtStart: markdownSource };
+      setDraggedBlockId(section.blockId);
+      setDropTarget(null);
+      event.dataTransfer.effectAllowed = 'move';
+      // Firefox requires a text payload before it will initiate a native drag.
+      // The custom type makes the payload identifiable to other Squisq panes;
+      // the in-memory ref remains authoritative for this mounted panel.
+      event.dataTransfer.setData(OUTLINE_DRAG_MIME, String(section.headingLine));
+      event.dataTransfer.setData('text/plain', String(section.headingLine));
+    },
+    [isParsing, markdownSource, readOnly],
+  );
+
+  const handleDragOver = useCallback(
+    (event: ReactDragEvent<HTMLElement>, section: OutlineSectionRef) => {
+      const dragged = activeDragRef.current;
+      if (!dragged) return;
+
+      // Prevent the editor shell's file-drop handler from changing this to a
+      // copy operation while an outline section is being moved.
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (!canDropOnSection(dragged, section) || readOnly || isParsing) {
+        event.dataTransfer.dropEffect = 'none';
+        setDropTarget(null);
+        return;
+      }
+
+      const placement = placementForPointer(event);
+      event.dataTransfer.dropEffect = 'move';
+      setDropTarget((current) =>
+        current?.blockId === section.blockId && current.placement === placement
+          ? current
+          : { blockId: section.blockId, placement },
+      );
+    },
+    [isParsing, readOnly],
+  );
+
+  const handleDrop = useCallback(
+    (event: ReactDragEvent<HTMLElement>, section: OutlineSectionRef) => {
+      const dragged = activeDragRef.current;
+      if (!dragged) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      const placement = placementForPointer(event);
+      const canMove =
+        !readOnly &&
+        !isParsing &&
+        dragged.sourceAtStart === markdownSource &&
+        canDropOnSection(dragged, section);
+      const next = canMove
+        ? moveHeadingSectionInSource(
+            markdownSource,
+            dragged.headingLine,
+            section.headingLine,
+            placement,
+          )
+        : null;
+
+      clearDragState();
+      if (next != null) setMarkdownSource(next);
+    },
+    [clearDragState, isParsing, markdownSource, readOnly, setMarkdownSource],
   );
 
   // Inherit the active document theme's primary color so the current-row
@@ -137,9 +252,17 @@ export function OutlinePanel({ width, className }: OutlinePanelProps) {
             <OutlineNode
               key={b.id}
               block={b}
+              parentId={null}
               activeBlockId={activeBlockId}
+              draggedBlockId={draggedBlockId}
+              dropTarget={dropTarget}
+              mutationsDisabled={readOnly || isParsing}
               onSelect={handleSelect}
               onChangeLevel={changeHeadingLevel}
+              onDragStart={handleDragStart}
+              onDragOver={handleDragOver}
+              onDrop={handleDrop}
+              onDragEnd={clearDragState}
             />
           ))}
         </ul>
@@ -152,17 +275,34 @@ export function OutlinePanel({ width, className }: OutlinePanelProps) {
 
 function OutlineNode({
   block,
+  parentId,
   activeBlockId,
+  draggedBlockId,
+  dropTarget,
+  mutationsDisabled,
   onSelect,
   onChangeLevel,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
 }: {
   block: Block;
+  parentId: string | null;
   activeBlockId: string | null;
+  draggedBlockId: string | null;
+  dropTarget: OutlineDropTarget | null;
+  mutationsDisabled: boolean;
   onSelect: (b: Block) => void;
   onChangeLevel: (block: Block, delta: number) => void;
+  onDragStart: (event: ReactDragEvent<HTMLElement>, section: OutlineSectionRef) => void;
+  onDragOver: (event: ReactDragEvent<HTMLElement>, section: OutlineSectionRef) => void;
+  onDrop: (event: ReactDragEvent<HTMLElement>, section: OutlineSectionRef) => void;
+  onDragEnd: () => void;
 }) {
   const heading = block.sourceHeading;
   const depth = heading?.depth ?? 1;
+  const headingLine = heading?.position?.start.line;
   const text = heading ? extractPlainText(heading).trim() : '';
   const annotation = heading?.templateAnnotation;
   const tplName = annotation?.template;
@@ -170,18 +310,52 @@ function OutlineNode({
   const isActive = block.id === activeBlockId;
   const canPromote = !!heading && depth > 1;
   const canDemote = !!heading && depth < 6;
+  const section =
+    heading && typeof headingLine === 'number'
+      ? { blockId: block.id, headingLine, depth, parentId }
+      : null;
+  const canDrag = section != null && !mutationsDisabled;
+  const isDragging = block.id === draggedBlockId;
+  const dropPlacement = dropTarget?.blockId === block.id ? dropTarget.placement : null;
+  const itemClasses = [
+    'squisq-outline-item',
+    isDragging ? 'squisq-outline-item--dragging' : '',
+    dropPlacement ? `squisq-outline-item--drop-${dropPlacement}` : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   return (
-    <li className="squisq-outline-item" role="treeitem" aria-current={isActive || undefined}>
-      <div className="squisq-outline-row-wrap">
+    <li className={itemClasses} role="treeitem" aria-current={isActive || undefined}>
+      <div
+        className="squisq-outline-row-wrap"
+        onDragOver={section ? (event) => onDragOver(event, section) : undefined}
+        onDrop={section ? (event) => onDrop(event, section) : undefined}
+      >
         <button
           type="button"
           className={`squisq-outline-row squisq-outline-row--depth-${depth}${
             isActive ? ' squisq-outline-row--current' : ''
           }`}
           onClick={() => onSelect(block)}
+          draggable={canDrag}
+          aria-grabbed={isDragging || undefined}
+          onDragStart={section ? (event) => onDragStart(event, section) : undefined}
+          onDragEnd={onDragEnd}
           title={text || '(empty heading)'}
         >
+          {canDrag && (
+            <span className="squisq-outline-drag-handle" aria-hidden="true">
+              <svg width="8" height="12" viewBox="0 0 8 12">
+                <circle cx="2" cy="2" r="1" fill="currentColor" />
+                <circle cx="6" cy="2" r="1" fill="currentColor" />
+                <circle cx="2" cy="6" r="1" fill="currentColor" />
+                <circle cx="6" cy="6" r="1" fill="currentColor" />
+                <circle cx="2" cy="10" r="1" fill="currentColor" />
+                <circle cx="6" cy="10" r="1" fill="currentColor" />
+              </svg>
+            </span>
+          )}
           <span className="squisq-outline-row-text">{text || '(untitled)'}</span>
           {showChip && (
             <span className="squisq-outline-template-chip">{templateLabel(tplName!)}</span>
@@ -194,7 +368,7 @@ function OutlineNode({
               className="squisq-outline-row-arrow"
               aria-label={`Promote heading (currently H${depth})`}
               title="Promote heading"
-              disabled={!canPromote}
+              disabled={mutationsDisabled || !canPromote}
               onClick={() => onChangeLevel(block, -1)}
             >
               <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
@@ -213,7 +387,7 @@ function OutlineNode({
               className="squisq-outline-row-arrow"
               aria-label={`Demote heading (currently H${depth})`}
               title="Demote heading"
-              disabled={!canDemote}
+              disabled={mutationsDisabled || !canDemote}
               onClick={() => onChangeLevel(block, +1)}
             >
               <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
@@ -236,9 +410,17 @@ function OutlineNode({
             <OutlineNode
               key={child.id}
               block={child}
+              parentId={block.id}
               activeBlockId={activeBlockId}
+              draggedBlockId={draggedBlockId}
+              dropTarget={dropTarget}
+              mutationsDisabled={mutationsDisabled}
               onSelect={onSelect}
               onChangeLevel={onChangeLevel}
+              onDragStart={onDragStart}
+              onDragOver={onDragOver}
+              onDrop={onDrop}
+              onDragEnd={onDragEnd}
             />
           ))}
         </ul>
@@ -323,6 +505,19 @@ function useActiveOutlineBlockId(): string | null {
 
 // ── Helpers ────────────────────────────────────────────────────────
 
+function canDropOnSection(dragged: OutlineSectionRef, target: OutlineSectionRef): boolean {
+  return (
+    dragged.blockId !== target.blockId &&
+    dragged.depth === target.depth &&
+    dragged.parentId === target.parentId
+  );
+}
+
+function placementForPointer(event: ReactDragEvent<HTMLElement>): OutlineDropPlacement {
+  const bounds = event.currentTarget.getBoundingClientRect();
+  return event.clientY < bounds.top + bounds.height / 2 ? 'before' : 'after';
+}
+
 function hasAnyHeading(blocks: Block[]): boolean {
   for (const b of blocks) {
     if (b.sourceHeading) return true;