1 ? '70%' : `${70 * ratio}%`,
height: ratio > 1 ? `${70 / ratio}%` : '70%',
borderRadius: 4,
boxShadow: 'var(--shadow-sm)',
}} />
{preset.name}
{preset.w} × {preset.h}
);
}
function TemplateCard({ template, onApply, onDelete, isCustom }) {
const [hover, setHover] = hS(false);
const first = template.canvases[0];
const ratio = first ? first.w / first.h : 1;
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{ position: 'relative' }}
>
{template.name}
{isCustom &&
Saved {timeAgo(template.createdAt)}
}
{!isCustom &&
Starter · {first?.w}×{first?.h}
}
{isCustom && onDelete && (
)}
);
}
function EmptyState({ onCreate, isSearch }) {
return (
{isSearch ? 'Nothing matches that search' : 'Your studio is a fresh page'}
{isSearch
? 'Try a different phrase, or start a new design from scratch.'
: 'Start with a preset size, apply a starter template, or import a Petal file.'}
);
}
// Export helpers
function exportProjectFile(project) {
const payload = {
__petal: 'project',
version: 1,
exportedAt: now(),
project: JSON.parse(JSON.stringify(project)),
};
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
downloadBlob(blob, `${(project.name || 'design').replace(/[^\w-]/g, '_')}.petal.json`);
}
// Show the next 7 days of queued content on the home page — turns a "generator" into a "workflow".
function ThisWeekStrip() {
const { state, dispatch } = useStore();
const calendar = state.calendar || [];
// Group next-7-days entries by date.
const now = new Date(); now.setHours(0, 0, 0, 0);
const in7 = new Date(now); in7.setDate(in7.getDate() + 7);
const upcoming = calendar
.filter(e => e.status !== 'posted' && e.ts >= now.getTime() && e.ts < in7.getTime())
.sort((a, b) => a.ts - b.ts);
if (upcoming.length === 0) return null;
const daysMap = new Map();
for (const e of upcoming) {
const d = new Date(e.ts); d.setHours(0, 0, 0, 0);
const key = d.getTime();
if (!daysMap.has(key)) daysMap.set(key, []);
daysMap.get(key).push(e);
}
const days = [...daysMap.entries()].sort((a, b) => a[0] - b[0]);
const fmtDayLabel = (ts) => {
const d = new Date(ts);
const today = new Date(); today.setHours(0,0,0,0);
const tmr = new Date(today); tmr.setDate(tmr.getDate() + 1);
if (d.getTime() === today.getTime()) return 'Today';
if (d.getTime() === tmr.getTime()) return 'Tomorrow';
return d.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });
};
const icons = window.CAL_PLATFORM_ICON || {};
const labels = window.CAL_PLATFORM_LABEL || {};
return (
This week
{upcoming.length} post{upcoming.length !== 1 ? 's' : ''} queued
{days.map(([ts, items]) => (
{fmtDayLabel(ts)}
{items.slice(0, 3).map(e => (
))}
{items.length > 3 && (
+{items.length - 3} more
)}
))}
);
}
// Petal — clearly visible Backup / Restore of the entire editable project.
// The backup keeps every project, canvas, brand data, saved backgrounds, arrangements,
// content-tool history, calendar and relevant application state.
function BackupRestoreCard() {
const { state, dispatch } = useStore();
const fileRef = hR(null);
const onRestore = (e) => {
const f = e.target.files?.[0];
if (!f) return;
const r = new FileReader();
r.onload = (ev) => {
try {
const restored = parseEditableProjectFile(ev.target.result);
const projectCount = restored.projects?.length || 0;
if (!confirm(
`Restore ${projectCount} project${projectCount === 1 ? '' : 's'} + all brand data, saved backgrounds, arrangements, calendar and content history?\n\nThis replaces your current studio data.`
)) { e.target.value = ''; return; }
dispatch({ type: 'load-state', state: { ...restored, past: [], future: [], selection: [], saveStatus: 'idle' } });
alert('Backup restored successfully.');
} catch (err) {
alert('This is not a valid Wonder Pads Content Studio backup file.\n\n' + (err.message || ''));
}
e.target.value = '';
};
r.readAsText(f);
};
const nProjects = state.projects.length;
const nDesigns = state.projects.reduce((sum, p) => sum + p.canvases.length, 0);
const nBackgrounds = (state.savedBackgrounds || []).length;
const nArrangements = (state.brand.savedArrangements || []).length;
return (
Editable project safety
Back up everything to a file
{nProjects} project{nProjects === 1 ? '' : 's'} · {nDesigns} canvas{nDesigns === 1 ? '' : 'es'} · {nBackgrounds} saved bg · {nArrangements} arrangement{nArrangements === 1 ? '' : 's'} · brand data · content history
);
}
Object.assign(window, { HomeScreen, STARTER_TEMPLATES, exportProjectFile, timeAgo, MiniPreview, ThisWeekStrip, BackupRestoreCard });
