// ───────────────────────────────────────────────────────────── // Shared DM chrome — the header strip that sits inside the phone for // every Tree variant. Matches the user's original screenshot: // ┌─────────────────────────────────────────────────────┐ // │ [M+] [ Canvas | Tree | Manage ] │ ← top row // │ ↑ Load older │ // │ [< (M) marina_k 332 nodes · tree ⊙ ] │ ← thread card // └─────────────────────────────────────────────────────┘ // // And the bottom-pinned "selected node" preview + Branch CTA that's // also reused across variants. // ───────────────────────────────────────────────────────────── function DMTopBar({ variant }) { return (
{/* Left: user avatar + add */}
M
+
{/* Right: view toggle */}
{/* Load older */}
); } function ViewToggle({ variant = 'tree' }) { const pill = (id, label) => { const active = id === 'tree'; return ( {label} ); }; return (
{pill('canvas', 'Canvas')} {pill('tree', 'Tree')} {pill('manage', 'Manage')}
); } // The peer header — variant-tagged in italic serif at top-right so it's // easy for the user to keep track of which artboard is which. function DMHeaderCard({ subtitle = '332 nodes · tree', variantTag = '' }) { return (
M
marina_k
{subtitle}
{/* target / aim glyph — kept from original; means "scroll Canvas to here" */}
{variantTag && ( {variantTag} )}
); } // Bottom-pinned "selected node" preview + Branch CTA. // Almost every variant pins this to the bottom so the user can read the // chosen root in place. Tap a root in the tree → this populates. function SelectedNodePanel({ node }) { if (!node) return null; return (
NODE_{node.id.toUpperCase().padStart(6, 'C')} d:{node.depth} · b:{node.branches} · l:{node.leaves}
{node.body}
{node.from === 'you' ? 'you' : 'marina_k'} · {node.age}
); } // Tiny relative-time-to-thickness helper — keeps a consistent feel of // "older = thinner / dimmer" across variants. function ageWeight(age) { if (age.endsWith('h')) return 1; const v = parseInt(age, 10); if (age.endsWith('d')) return v <= 2 ? 0.95 : 0.85; if (age.endsWith('w')) { if (v <= 2) return 0.7; if (v <= 6) return 0.5; return 0.32; } return 0.32; } // Small "from" dot — green = you, dew = them. Mirrors the bubble bg colors // in Canvas view so the user can tell at-a-glance who started each thread. function FromDot({ from, size = 7 }) { return ( ); } Object.assign(window, { DMTopBar, ViewToggle, DMHeaderCard, SelectedNodePanel, ageWeight, FromDot });