{/* Mobile/tablet: re-open the step editor drawer if a step is selected */}
{hasSelection && (
)}
);
}
// ── Left rail: step library ────────────────────────────────────────────
function BuilderLibrary({ tab, setTab, onOpenSearch, onAddIcon, onClose }) {
return (
);
}
function LibraryIconGrid({ onAdd }) {
const groups = Object.values(CATEGORIES).map((c) => ({
cat: c, items: STEP_LIBRARY.filter((s) => s.category === c.id),
})).filter((g) => g.items.length);
return (
{groups.map((g) => (
{g.cat.label}
{g.items.map((it) => (
))}
))}
);
}
function LibraryPhotos({ onOpenSearch }) {
return (
Select a step on the canvas first, then click Search or generate in the inspector or this button to attach a picture.
);
}
function LibraryWords() {
const phrases = [
'First… then…', 'All done!', 'My turn / Your turn', 'I need a break',
'Quiet please', 'I can do it', 'I feel calm', 'Take a deep breath',
'Ask for help', 'I am safe',
];
return (
{phrases.map((p) => (
{p}
))}
Phrase-only steps (no image) are coming soon — for now, click an icon to add a step then change the title.
Click an icon in the left rail to add your first step.
) : view === 'grid' ? (
) : (
)}
Drag step cards to reorder.
Click a card to edit, or use the icon rail on the left to add more.
The Strip view shows your board exactly the way Sam will see it.
);
}
// ── Drag-and-drop grid ─────────────────────────────────────────────
function DraggableGrid({ steps, selId, setSelId,
dragId, setDragId, dropIdx, setDropIdx,
onReorder, onAddStep }) {
const onDragStart = (e, id, idx) => {
setDragId(id);
setDropIdx(idx);
e.dataTransfer.effectAllowed = 'move';
// Required for Firefox to fire dragstart
try { e.dataTransfer.setData('text/plain', id); } catch {}
};
const onDragOver = (e, idx) => {
e.preventDefault();
if (dragId) {
// Compute insertion point based on whether we're over the left or
// right half of the target card
const r = e.currentTarget.getBoundingClientRect();
const mid = r.left + r.width / 2;
const insert = e.clientX < mid ? idx : idx + 1;
if (insert !== dropIdx) setDropIdx(insert);
}
};
const onDrop = (e) => {
e.preventDefault();
if (dragId && dropIdx != null) {
const fromIdx = steps.findIndex((s) => s.id === dragId);
let toIdx = dropIdx;
// Account for the slot being collapsed when we remove the dragged item
if (toIdx > fromIdx) toIdx -= 1;
if (fromIdx !== toIdx) onReorder(fromIdx, toIdx);
}
setDragId(null); setDropIdx(null);
};
const onDragEnd = () => { setDragId(null); setDropIdx(null); };
return (