{ if (suppressClickRef.current) { suppressClickRef.current = false; return; } if (isEditableTarget(e.target)) return; if (e.target.closest('.dc-comments-hud, .dc-comments-sidebar, .dc-comment-thread, .dc-comment-menu, .dc-sidebar-menu, .dc-draft-composer, .dc-comment-pin, .dc-labelrow, .dc-grip, .dc-delete, .dc-expand')) return; const point = toWorldPoint(e.clientX, e.clientY); const slotEl = e.target.closest('[data-dc-slot]'); const cardEl = e.target.closest('[data-dc-card]'); let frame = null; if (slotEl && cardEl) { const scale = tf.current.scale || 1; const cardRect = cardEl.getBoundingClientRect(); frame = { slotId: slotEl.dataset.dcSlotId || null, sectionId: slotEl.dataset.dcSectionId || null, artboardId: slotEl.dataset.dcArtboardId || null, label: slotEl.dataset.dcLabel || null, localX: (e.clientX - cardRect.left) / scale, localY: (e.clientY - cardRect.top) / scale, }; } if (commentMode) { onCanvasClick && onCanvasClick({ point, frame }); return; } if (!slotEl) onCanvasBackgroundClick && onCanvasBackgroundClick(); }} style={{ height: '100vh', width: '100vw', background: DC.bg, cursor: commentMode ? DC_COMMENT_CURSOR : undefined, overflow: 'hidden', overscrollBehavior: 'none', touchAction: 'none', position: 'relative', fontFamily: DC.font, boxSizing: 'border-box', ...style, }} >

{children}

{overlay}

); } function DCCommentsHud({ currentUser, commentMode, commentsVisible, commentCount, onToggleCommentMode, onToggleCommentsVisible }) { return (

e.stopPropagation()}>

Commenting as

{currentUser.name}

{commentCount} {commentCount === 1 ? 'open thread' : 'open threads'}

); } function DCSearchGlyph() { return ( ); } function DCFilterGlyph() { return ( ); } function DCCheckGlyph() { return ( ); } function DCCloseGlyph() { return ( ); } function DCSendGlyph() { return ( ); } function getClusterItems(threads, expandedClusterId, activeThreadId) { const groups = []; threads.forEach((thread) => { if (thread.id === activeThreadId) { groups.push({ x: thread.x, y: thread.y, threads: [thread], forceSingle: true }); return; } const match = groups.find((group) => !group.forceSingle && Math.hypot(group.x - thread.x, group.y - thread.y) <= 78); if (!match) { groups.push({ x: thread.x, y: thread.y, threads: [thread] }); return; } match.threads.push(thread); match.x = match.threads.reduce((sum, item) => sum + item.x, 0) / match.threads.length; match.y = match.threads.reduce((sum, item) => sum + item.y, 0) / match.threads.length; }); return groups.flatMap((group) => { const id = group.threads.map((thread) => thread.id).sort().join('|'); if (group.forceSingle || group.threads.length === 1 || id === expandedClusterId) { return group.threads.map((thread) => ({ type: 'thread', thread })); } return [{ type: 'cluster', id, x: group.x, y: group.y, threads: group.threads }]; }); } function DCCommentsSidebar({ comments, activeThreadId, currentUser, usersById, onOpenThread, onResolveThread, onDeleteThread }) { const [query, setQuery] = React.useState(''); const [sortBy, setSortBy] = React.useState('date'); const [showResolved, setShowResolved] = React.useState(false); const [onlyMine, setOnlyMine] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); const threadNumbers = React.useMemo(() => { const ordered = comments.slice().sort((a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0)); return new Map(ordered.map((thread, index) => [thread.id, index + 1])); }, [comments]); const visibleThreads = React.useMemo(() => { const normalizedQuery = query.trim().toLowerCase(); return comments .filter((thread) => showResolved || !thread.resolvedAt) .filter((thread) => !onlyMine || isThreadRelevantToUser(thread, currentUser.id)) .filter((thread) => { if (!normalizedQuery) return true; const haystack = [ thread.frameLabel, thread.sectionTitle, getThreadOwner(usersById, thread).name, ...getThreadMessages(thread).map((message) => message.body), ].filter(Boolean).join(' ').toLowerCase(); return haystack.includes(normalizedQuery); }) .sort((a, b) => { const aUnread = isThreadUnreadFor(a, currentUser.id) ? 1 : 0; const bUnread = isThreadUnreadFor(b, currentUser.id) ? 1 : 0; if (sortBy === 'unread' && aUnread !== bUnread) return bUnread - aUnread; return new Date(b.updatedAt || b.createdAt || 0) - new Date(a.updatedAt || a.createdAt || 0); }); }, [comments, currentUser.id, onlyMine, query, showResolved, sortBy, usersById]); const hasComments = comments.length > 0; return (

e.stopPropagation()}>

{currentUser.initials}

Comment

100%

{hasComments && (

setQuery(e.target.value)} placeholder="Search comments" /> {menuOpen && (

)}

{!hasComments && (

No comments yet

Click anywhere on the canvas to place the first comment. It will appear here for the whole team.

Comments are pinned to the canvas

)} {hasComments && visibleThreads.length === 0 && (

No matching comments

Try a different search, show resolved comments, or turn off "Only your threads."

)} {visibleThreads.map((thread) => { const owner = getThreadOwner(usersById, thread); const messages = getThreadMessages(thread); const participants = getThreadParticipantUsers(thread, usersById); const active = activeThreadId === thread.id; const unread = isThreadUnreadFor(thread, currentUser.id); const replies = Math.max(0, messages.length - 1); return (

onOpenThread && onOpenThread(thread.id, { keepCommentMode: true, forceOpen: true })} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpenThread && onOpenThread(thread.id, { keepCommentMode: true, forceOpen: true }); } }} >

{participants.slice(0, 3).map((user) => ( {user.initials} ))}

{unread && } {active && (

)}

#{threadNumbers.get(thread.id) || 1} · Page 1

{owner.name} {formatCommentRelativeTime(thread.updatedAt || thread.createdAt)}

{getThreadPreview(thread)}

{replies > 0 &&

{replies} {replies === 1 ? 'reply' : 'replies'}

}

); })}

); } function DCCommentLayer({ comments, hiddenSlotIds = [], draftThread, activeThreadId, currentUser, usersById, commentsVisible, commentMode, onOpenThread, onCloseThread, onCancelDraft, onDeleteThread, onResolveThread, onMarkThreadUnread, onToggleReaction, onDeleteMessage, onCreateThread, onReplyToThread, }) { const [expandedClusterId, setExpandedClusterId] = React.useState(null); const hiddenSlotSet = React.useMemo(() => new Set(hiddenSlotIds), [hiddenSlotIds]); const orderedComments = React.useMemo(() => ( comments .filter((thread) => !thread.slotId || !hiddenSlotSet.has(thread.slotId)) .slice() .sort((a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0)) ), [comments, hiddenSlotSet]); const activeThread = draftThread && activeThreadId === draftThread.id ? draftThread : comments.find((thread) => thread.id === activeThreadId) || null; const visiblePins = orderedComments.filter((thread) => !thread.resolvedAt || thread.id === activeThreadId); const clusterItems = React.useMemo( () => getClusterItems(visiblePins, expandedClusterId, activeThreadId), [activeThreadId, expandedClusterId, visiblePins] ); const threadNumbers = React.useMemo( () => new Map(orderedComments.map((thread, index) => [thread.id, index + 1])), [orderedComments] ); const shouldShowPins = commentsVisible || commentMode || !!activeThreadId; return (

{shouldShowPins && clusterItems.map((item) => { if (item.type === 'cluster') { const participants = item.threads.flatMap((thread) => getThreadParticipantUsers(thread, usersById)); const uniqueParticipants = participants.filter((user, index, all) => all.findIndex((candidate) => candidate.id === user.id) === index); return (

{item.threads.length} comments close together

{uniqueParticipants.slice(0, 4).map((user) => ( {user.initials} ))}

); } const { thread } = item; const owner = getThreadOwner(usersById, thread); return (

{owner.name} {formatCommentRelativeTime(thread.updatedAt || thread.createdAt)}

{getThreadPreview(thread)}

); })} {draftThread && ( )} {activeThread && !draftThread && ( onDeleteThread && onDeleteThread(activeThread.id)} onResolve={(resolved) => onResolveThread && onResolveThread(activeThread.id, resolved)} onMarkUnread={() => onMarkThreadUnread && onMarkThreadUnread(activeThread.id)} onToggleReaction={(messageId, emoji) => onToggleReaction && onToggleReaction(activeThread.id, messageId, emoji)} onDeleteMessage={(messageId) => onDeleteMessage && onDeleteMessage(activeThread.id, messageId)} onSubmit={(body) => onReplyToThread(activeThread.id, body)} /> )}

); } function DCCommentDraftComposer({ draftThread, currentUser, onCancel, onSubmit }) { const [text, setText] = React.useState(''); const inputRef = React.useRef(null); React.useEffect(() => { setText(''); window.setTimeout(() => inputRef.current?.focus(), 0); }, [draftThread.id]); const submit = () => { const trimmed = text.trim(); if (!trimmed) return; onSubmit && onSubmit(trimmed); setText(''); }; return (

e.stopPropagation()} onSubmit={(e) => { e.preventDefault(); submit(); }} >

setText(e.target.value)} onKeyDown={(e) => { if (e.key === 'Escape') { e.preventDefault(); onCancel && onCancel(); } }} />

); } function DCCommentThread({ thread, index, currentUser, usersById, onClose, onDelete, onResolve, onMarkUnread, onToggleReaction, onDeleteMessage, onSubmit }) { const [text, setText] = React.useState(''); const [menuOpen, setMenuOpen] = React.useState(false); const [offset, setOffset] = React.useState({ x: 0, y: 0 }); const [dragging, setDragging] = React.useState(false); const dragRef = React.useRef(null); const messages = getThreadMessages(thread); const resolved = !!thread.resolvedAt; React.useEffect(() => { setText(''); setMenuOpen(false); setOffset({ x: 0, y: 0 }); }, [thread.id, currentUser.id]); const submit = () => { const trimmed = text.trim(); if (!trimmed) return; onSubmit(trimmed); setText(''); }; const copyLink = () => { setMenuOpen(false); const href = typeof window !== 'undefined' ? `${window.location.href.split('#')[0]}#comment-${thread.id}` : `#comment-${thread.id}`; if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) { navigator.clipboard.writeText(href).catch(() => {}); } }; const startDrag = (e) => { if (e.target instanceof Element && e.target.closest('button, .dc-comment-menu')) return; e.preventDefault(); e.stopPropagation(); e.currentTarget.setPointerCapture?.(e.pointerId); dragRef.current = { pointerId: e.pointerId, startX: e.clientX, startY: e.clientY, startOffset: offset, }; setDragging(true); }; const moveDrag = (e) => { const drag = dragRef.current; if (!drag || drag.pointerId !== e.pointerId) return; setOffset({ x: drag.startOffset.x + e.clientX - drag.startX, y: drag.startOffset.y + e.clientY - drag.startY, }); }; const endDrag = (e) => { const drag = dragRef.current; if (!drag || drag.pointerId !== e.pointerId) return; e.currentTarget.releasePointerCapture?.(e.pointerId); dragRef.current = null; setDragging(false); }; return (

e.stopPropagation()} >

Comment

#{index} · Page 1

{menuOpen && (

)}

{messages.map((message) => { const user = getCommentUser(usersById, message.userId); const reactions = Object.entries(message.reactions || {}).filter(([, ids]) => Array.isArray(ids) && ids.length > 0); return (

{user.initials}

{user.name} {formatCommentRelativeTime(message.createdAt)}

{message.body}

0 ? 'true' : 'false'}> {reactions.map(([emoji, ids]) => ( ))} {message.userId === currentUser.id && ( )}

); })}

{ e.preventDefault(); submit(); }}>

{currentUser.initials}

setText(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                  e.preventDefault();
                  submit();
                }
                if (e.key === 'Escape') {
                  e.preventDefault();
                  onClose && onClose();
                }
              }}
            />
            <div className="dc-comment-compose-actions">
              <button className="dc-compose-tool" type="button" title="Add emoji">:)</button>
              <button className="dc-compose-tool" type="button" title="Mention someone">@</button>
              <button className="dc-compose-tool" type="button" title="Attach image">img</button>
              <span className="dc-comment-compose-spacer" />
              <button className="dc-primary" type="submit" disabled={!text.trim()} aria-label="Submit reply">
                <DCSendGlyph />
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// DCSection — editable title + h-row of artboards in persisted order
// ─────────────────────────────────────────────────────────────
function DCSection({ id, title, subtitle, children, gap = 48 }) {
  const ctx = React.useContext(DCCtx);
  const sid = id ?? title;
  const all = React.Children.toArray(children);
  const artboards = all.filter((c) => c && c.type === DCArtboard);
  const rest = all.filter((c) => !(c && c.type === DCArtboard));
  const hiddenSlotSet = React.useMemo(() => new Set(ctx?.state.hiddenSlotIds || []), [ctx?.state.hiddenSlotIds]);
  const visibleArtboards = artboards.filter((a) => {
    const aid = a.props.id ?? a.props.label;
    return !hiddenSlotSet.has(`${sid}/${aid}`);
  });
  const srcOrder = visibleArtboards.map((a) => a.props.id ?? a.props.label);
  const sec = (ctx && sid && ctx.section(sid)) || {};

const order = React.useMemo(() => {
    const kept = (sec.order || []).filter((k) => srcOrder.includes(k));
    return [...kept, ...srcOrder.filter((k) => !kept.includes(k))];
  }, [sec.order, srcOrder.join('|')]);

const byId = Object.fromEntries(visibleArtboards.map((a) => [a.props.id ?? a.props.label, a]));

if (srcOrder.length === 0 && rest.length === 0) return null;

return (
    <div data-dc-section={sid} style={{ marginBottom: 80, position: 'relative' }}>
      <div style={{ padding: '0 60px 56px' }}>
        <DCEditable tag="div" value={sec.title ?? title}
          onChange={(v) => ctx && sid && ctx.patchSection(sid, { title: v })}
          style={{ fontSize: 28, fontWeight: 600, color: DC.title, letterSpacing: -0.4, marginBottom: 6, display: 'inline-block' }} />
        {subtitle && <div style={{ fontSize: 16, color: DC.subtitle }}>{subtitle}</div>}
      </div>
      <div style={{ display: 'flex', gap, padding: '0 60px', alignItems: 'flex-start', width: 'max-content' }}>
        {order.map((k) => (
          <DCArtboardFrame key={k} sectionId={sid} artboard={byId[k]} order={order}
            label={(sec.labels || {})[k] ?? byId[k].props.label}
            onRename={(v) => ctx && ctx.patchSection(sid, (x) => ({ labels: { ...x.labels, [k]: v } }))}
            onReorder={(next) => ctx && ctx.patchSection(sid, { order: next })}
            onFocus={() => ctx && ctx.setFocus(`${sid}/${k}`)} />
        ))}
      </div>
      {rest}
    </div>
  );
}

// DCArtboard — marker; rendered by DCArtboardFrame via DCSection.
function DCArtboard() { return null; }

// Live drag-reorder: dragged card sticks to cursor; siblings slide into
  // their would-be slots in real time via transforms. DOM order only
  // changes on drop.
  const onGripDown = (e) => {
    e.preventDefault(); e.stopPropagation();
    const me = ref.current;
    // translateX is applied in local (pre-scale) space but pointer deltas and
    // getBoundingClientRect().left are screen-space — divide by the viewport's
    // current scale so the dragged card tracks the cursor at any zoom level.
    const scale = me.getBoundingClientRect().width / me.offsetWidth || 1;
    const peers = Array.from(document.querySelectorAll(`[data-dc-section="${sectionId}"] [data-dc-slot]`));
    const homes = peers.map((el) => ({ el, id: el.dataset.dcSlot, x: el.getBoundingClientRect().left }));
    const slotXs = homes.map((h) => h.x);
    const startIdx = order.indexOf(id);
    const startX = e.clientX;
    let liveOrder = order.slice();
    me.classList.add('dc-dragging');

return (
    <div
      ref={ref}
      data-dc-slot={id}
      data-dc-slot-id={slotId}
      data-dc-section-id={sectionId}
      data-dc-artboard-id={id}
      data-dc-label={label}
      data-dc-selected={isSelected ? 'true' : 'false'}
      style={{ position: 'relative', flexShrink: 0 }}
    >
      <div className="dc-labelrow" style={{ position: 'absolute', bottom: '100%', left: -4, marginBottom: 4, color: DC.label }}>
        <div className="dc-grip" onPointerDown={onGripDown} title="Drag to reorder this frame">
          <svg width="9" height="13" viewBox="0 0 9 13" fill="currentColor"><circle cx="2" cy="2" r="1.1"/><circle cx="7" cy="2" r="1.1"/><circle cx="2" cy="6.5" r="1.1"/><circle cx="7" cy="6.5" r="1.1"/><circle cx="2" cy="11" r="1.1"/><circle cx="7" cy="11" r="1.1"/></svg>
        </div>
        <button
          className="dc-delete"
          type="button"
          title="Hide this frame"
          aria-label={`Hide ${label}`}
          onPointerDown={(e) => {
            e.preventDefault();
            e.stopPropagation();
          }}
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            ctx?.hideSlot(slotId);
          }}
        >
          ×
        </button>
        <div className="dc-labeltext" onClick={() => { ctx?.setSelection(slotId); onFocus(); }} title="Focus this frame">
          <DCEditable value={label} onChange={onRename} onClick={(e) => e.stopPropagation()}
            style={{ fontSize: 15, fontWeight: 500, color: DC.label, lineHeight: 1 }} />
        </div>
      </div>
      <button className="dc-expand" onClick={onFocus} onPointerDown={(e) => e.stopPropagation()} title="Open this frame">
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M7 1h4v4M5 11H1V7M11 1L7.5 4.5M1 11l3.5-3.5"/></svg>
      </button>
      <div
        className="dc-card"
        data-dc-card
        data-dc-selected={isSelected ? 'true' : 'false'}
        onClick={(e) => {
          if (ctx?.commentMode) return;
          e.stopPropagation();
          ctx?.setSelection(slotId);
        }}
        style={{ borderRadius: 2, boxShadow: '0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06)', overflow: 'hidden', width, height, background: '#fff', ...style }}>
        <div className="dc-card-content">
          {children || <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#bbb', fontSize: 13, fontFamily: DC.font }}>{id}</div>}
        </div>
      </div>
    </div>
  );
}

// Inline rename — commits on blur or Enter.
function DCEditable({ value, onChange, style, tag = 'span', onClick }) {
  const T = tag;
  return (
    <T className="dc-editable" contentEditable suppressContentEditableWarning
      onClick={onClick}
      onPointerDown={(e) => e.stopPropagation()}
      onBlur={(e) => onChange && onChange(e.currentTarget.textContent)}
      onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); e.currentTarget.blur(); } }}
      style={style}>{value}</T>
  );
}

// ─────────────────────────────────────────────────────────────
// Focus mode — overlay one artboard; ←/→ within section, ↑/↓ across
// sections, Esc or backdrop click to exit.
// ─────────────────────────────────────────────────────────────
function DCFocusOverlay({ entry, sectionMeta, sectionOrder }) {
  const ctx = React.useContext(DCCtx);
  const { sectionId, artboard } = entry;
  const sec = ctx.section(sectionId);
  const meta = sectionMeta[sectionId];
  const peers = meta.slotIds;
  const aid = artboard.props.id ?? artboard.props.label;
  const idx = peers.indexOf(aid);
  const secIdx = sectionOrder.indexOf(sectionId);

React.useEffect(() => {
    const k = (e) => {
      if (e.key === 'ArrowLeft') { e.preventDefault(); go(-1); }
      if (e.key === 'ArrowRight') { e.preventDefault(); go(1); }
      if (e.key === 'ArrowUp') { e.preventDefault(); goSection(-1); }
      if (e.key === 'ArrowDown') { e.preventDefault(); goSection(1); }
    };
    document.addEventListener('keydown', k);
    return () => document.removeEventListener('keydown', k);
  });

const { width = 260, height = 480, children } = artboard.props;
  const [vp, setVp] = React.useState({ w: window.innerWidth, h: window.innerHeight });
  React.useEffect(() => { const r = () => setVp({ w: window.innerWidth, h: window.innerHeight }); window.addEventListener('resize', r); return () => window.removeEventListener('resize', r); }, []);
  const scale = Math.max(0.1, Math.min((vp.w - 200) / width, (vp.h - 260) / height, 2));

const [ddOpen, setDd] = React.useState(false);
  const Arrow = ({ dir, onClick }) => (
    <button onClick={(e) => { e.stopPropagation(); onClick(); }}
      style={{ position: 'absolute', top: '50%', [dir]: 28, transform: 'translateY(-50%)',
        border: 'none', background: 'rgba(255,255,255,.08)', color: 'rgba(255,255,255,.9)',
        width: 44, height: 44, borderRadius: 22, fontSize: 18, cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'background .15s' }}
      onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.18)')}
      onMouseLeave={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.08)')}>
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
        <path d={dir === 'left' ? 'M11 3L5 9l6 6' : 'M7 3l6 6-6 6'} /></svg>
    </button>
  );

// Portal to body so position:fixed is the real viewport regardless of any
  // transform on DesignCanvas's ancestors (including the canvas zoom itself).
  return ReactDOM.createPortal(
    <div onClick={() => ctx.setFocus(null)}
      onWheel={(e) => e.preventDefault()}
      style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(24,20,16,.6)', backdropFilter: 'blur(14px)',
        fontFamily: DC.font, color: '#fff' }}>

{/* top bar: section dropdown (left) · close (right) */}
      <div onClick={(e) => e.stopPropagation()}
        style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 72, display: 'flex', alignItems: 'flex-start', padding: '16px 20px 0', gap: 16 }}>
        <div style={{ position: 'relative' }}>
          <button onClick={() => setDd((o) => !o)}
            style={{ border: 'none', background: 'transparent', color: '#fff', cursor: 'pointer', padding: '6px 8px',
              borderRadius: 6, textAlign: 'left', fontFamily: 'inherit' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: -0.3 }}>{meta.title}</span>
              <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" style={{ opacity: .7 }}><path d="M2 4l3.5 3.5L9 4"/></svg>
            </span>
            {meta.subtitle && <span style={{ display: 'block', fontSize: 13, opacity: .6, fontWeight: 400, marginTop: 2 }}>{meta.subtitle}</span>}
          </button>
          {ddOpen && (
            <div style={{ position: 'absolute', top: '100%', left: 0, marginTop: 4, background: '#2a251f', borderRadius: 8,
              boxShadow: '0 8px 32px rgba(0,0,0,.4)', padding: 4, minWidth: 200, zIndex: 10 }}>
              {sectionOrder.map((sid) => (
                <button key={sid} onClick={() => { setDd(false); const f = sectionMeta[sid].slotIds[0]; if (f) ctx.setFocus(`${sid}/${f}`); }}
                  style={{ display: 'block', width: '100%', textAlign: 'left', border: 'none', cursor: 'pointer',
                    background: sid === sectionId ? 'rgba(255,255,255,.1)' : 'transparent', color: '#fff',
                    padding: '8px 12px', borderRadius: 5, fontSize: 14, fontWeight: sid === sectionId ? 600 : 400, fontFamily: 'inherit' }}>
                  {sectionMeta[sid].title}
                </button>
              ))}
            </div>
          )}
        </div>
        <div style={{ flex: 1 }} />
        <button onClick={() => ctx.setFocus(null)}
          onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.12)')}
          onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
          style={{ border: 'none', background: 'transparent', color: 'rgba(255,255,255,.7)', width: 32, height: 32,
            borderRadius: 16, fontSize: 20, cursor: 'pointer', lineHeight: 1, transition: 'background .12s' }}>×</button>
      </div>

{/* card centered, label + index below — only the card itself stops
          propagation so any backdrop click (including the margins around
          the card) exits focus */}
      <div
        style={{ position: 'absolute', top: 64, bottom: 56, left: 100, right: 100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
        <div onClick={(e) => e.stopPropagation()} style={{ width: width * scale, height: height * scale, position: 'relative' }}>
          <div style={{ width, height, transform: `scale(${scale})`, transformOrigin: 'top left', background: '#fff', borderRadius: 2, overflow: 'hidden',
            boxShadow: '0 20px 80px rgba(0,0,0,.4)' }}>
            {children || <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#bbb' }}>{aid}</div>}
          </div>
        </div>
        <div onClick={(e) => e.stopPropagation()} style={{ fontSize: 14, fontWeight: 500, opacity: .85, textAlign: 'center' }}>
          {(sec.labels || {})[aid] ?? artboard.props.label}
          <span style={{ opacity: .5, marginLeft: 10, fontVariantNumeric: 'tabular-nums' }}>{idx + 1} / {peers.length}</span>
        </div>
      </div>

{/* dots */}
      <div onClick={(e) => e.stopPropagation()}
        style={{ position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 8 }}>
        {peers.map((p, i) => (
          <button key={p} onClick={() => ctx.setFocus(`${sectionId}/${p}`)}
            style={{ border: 'none', padding: 0, cursor: 'pointer', width: 6, height: 6, borderRadius: 3,
              background: i === idx ? '#fff' : 'rgba(255,255,255,.3)' }} />
        ))}
      </div>
    </div>,
    document.body,
  );
}

// ─────────────────────────────────────────────────────────────
// Post-it — absolute-positioned sticky note
// ─────────────────────────────────────────────────────────────
function DCPostIt({ children, top, left, right, bottom, rotate = -2, width = 180 }) {
  return (
    <div style={{
      position: 'absolute', top, left, right, bottom, width,
      background: DC.postitBg, padding: '14px 16px',
      fontFamily: '"Comic Sans MS", "Marker Felt", "Segoe Print", cursive',
      fontSize: 14, lineHeight: 1.4, color: DC.postitText,
      boxShadow: '0 2px 8px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)',
      transform: `rotate(${rotate}deg)`,
      zIndex: 5,
    }}>{children}</div>
  );
}

Object.assign(window, { DesignCanvas, DCSection, DCArtboard, DCPostIt });