// screens/print.jsx — printable export function PrintScreen({ route, navigate, tweaks }) { const store = useStore(); const boardId = route.params.boardId; const board = store.getBoard(boardId); const child = board ? store.state.children.find((c) => c.id === board.childId) : null; const [layout, setLayout] = React.useState('grid'); const [cols, setCols] = React.useState(3); const [showTimes, setShowTimes] = React.useState(true); const [showFooter, setShowFooter] = React.useState(true); const [paper, setPaper] = React.useState('letter'); const [shareOpen, setShareOpen] = React.useState(false); if (!board) { return (
Board not found
); } return (
{/* Topbar */}
Print preview
{board.title} · printable handout
setShareOpen(false)} />
); } function LayoutSwatch({ active, onClick, label, preview }) { return ( ); } const SwatchGrid = () => (
{Array.from({ length: 6 }).map((_, i) => (
))}
); const SwatchChecklist = () => (
{Array.from({ length: 5 }).map((_, i) => (
))}
); const SwatchSchedule = () => (
{Array.from({ length: 4 }).map((_, i) => (
))}
); function PrintToggle({ label, subtitle, value, onChange }) { return (
{label}
{subtitle &&
{subtitle}
}
); } // ── The paper page ───────────────────────────────────────────────────── function PrintPaper({ paper, layout, cols, board, child, showTimes, showFooter }) { const ratio = paper === 'a4' ? 1 / 1.414 : 1 / 1.294; // Fit to available width on narrow viewports. We scale the paper // by setting CSS width and computing height from the aspect ratio, // but cap at 760px so it still looks like a sheet on desktop. const width = 760; const height = Math.round(width / ratio); return (
{board.title}
{child && For {child.name}} {child && (board.schedule || board.steps.length) ? ( ) : null} {board.schedule ? {board.schedule} : null} {board.schedule && board.steps.length ? ( ) : null} {board.steps.length} steps
{layout === 'grid' && } {layout === 'checklist' && } {layout === 'schedule' && }
{showFooter && }
); } function PaperHeader() { return (
KindCue
Visual schedules for families
Printed {new Date().toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' })}
); } function PaperFooter({ child }) { return (
Notes for today
{child && (
For
{child.name}{child.age != null ? ', age ' + child.age : ''}
)}
Generated with KindCue — visual schedules & stories for neurodiverse families.
); } function PaperGrid({ steps, cols, showTimes }) { return (
{steps.map((s, i) => { const cat = CATEGORIES[s.category] || CATEGORIES.routine; return (
{s.photo ? ( {s.photo.title ) : ( )}
{i + 1}
{s.title}
{showTimes && (s.time || s.duration) && (
{s.time}{s.time && s.duration ? ' · ' : ''}{s.duration ? s.duration + ' min' : ''}
)}
); })}
); } function PaperChecklist({ steps, showTimes }) { return (
Put a check next to each step after it's finished…
{steps.map((s, i) => { const cat = CATEGORIES[s.category] || CATEGORIES.routine; return (
{s.photo ? ( {s.photo.title ) : ( )}
{i + 1}.{s.title}
{s.note &&
{s.note}
}
{showTimes && (s.time || s.duration) && (
{s.time &&
{s.time}
} {s.duration ?
{s.duration} min
: null}
)}
); })}
); } function PaperSchedule({ steps }) { return (
{steps.map((s, i) => { const cat = CATEGORIES[s.category] || CATEGORIES.routine; return (
{s.time || '—'} {s.duration ?
{s.duration} min
: null}
{s.photo ? ( {s.photo.title ) : ( )}
{s.title}
{s.note &&
{s.note}
}
{cat.label}
); })}
); } Object.assign(window, { PrintScreen });