peelable && setPeeled(p => !p)}
style={{
position: 'absolute', width: w, height: h,
background: patterns[pattern] || patterns.solid,
transform: `rotate(${rotate + (peeled ? -12 : 0)}deg) ${peeled ? 'translateY(-4px)' : ''}`,
transformOrigin: '20% 50%',
boxShadow: peeled
? '0 6px 14px rgba(0,0,0,0.18)'
: '0 1px 2px rgba(0,0,0,0.08)',
opacity: 0.92,
cursor: peelable ? 'pointer' : 'default',
transition: 'transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .2s',
// tape has slight transparency / texture
backgroundBlendMode: 'multiply',
outline: '1px solid rgba(255,255,255,0.4)',
outlineOffset: -2,
...style,
}}
/>
);
}
// ───── Polaroid (photo with white frame + tape) ───────────────────────────
function Polaroid({ children, w = 180, h = 200, rotate = -4, caption, tapeColor = PJ.yellow, slot, slotId, slotPlaceholder = 'photo', hoverable = false, style }) {
const [hover, setHover] = React.useState(false);
return (
hoverable && setHover(true)}
onMouseLeave={() => hoverable && setHover(false)}
style={{
position: 'absolute', width: w, height: h,
background: '#fdfaf2',
padding: '10px 10px 0 10px',
boxShadow: hover
? '0 26px 50px rgba(0,0,0,0.28), 0 6px 10px rgba(0,0,0,0.12)'
: '0 8px 22px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.10)',
transform: hover
? `rotate(${rotate}deg) translateY(-12px) scale(1.05)`
: `rotate(${rotate}deg)`,
transition: 'transform .4s cubic-bezier(.5, 1.6, .35, 1), box-shadow .3s',
cursor: hoverable ? 'pointer' : 'default',
...style,
}}>
{slot ? (
) : children}
{caption && (
{caption}
)}
);
}
// ───── Torn-paper note ─────────────────────────────────────────────────────
function TornPaper({ children, w = 240, bg = PJ.paper, rotate = 0, style, padding = '20px 24px' }) {
// jagged torn edges via clip-path polygon
const torn = `polygon(
0% 4%, 4% 0%, 12% 3%, 22% 0%, 35% 4%, 50% 1%, 65% 3%, 78% 0%, 90% 3%, 100% 1%,
98% 12%, 100% 25%, 97% 40%, 100% 55%, 98% 70%, 100% 85%, 97% 95%, 100% 100%,
88% 97%, 75% 100%, 60% 96%, 45% 100%, 30% 97%, 15% 100%, 5% 96%, 0% 98%,
2% 85%, 0% 70%, 3% 55%, 0% 40%, 2% 25%, 0% 12%
)`;
return (
{children}
);
}
// ───── Paper clip (SVG) ────────────────────────────────────────────────────
function PaperClip({ color = '#8a96a0', rotate = 0, size = 44, style }) {
return (
);
}
// ───── Sticker primitives (geometric shapes only — no figurative SVG) ─────
function StickerStar({ color = PJ.yellow, size = 60, rotate = 0, style }) {
return (
);
}
function StickerBlob({ color = PJ.pink, size = 80, rotate = 0, style, label, labelColor = '#fff' }) {
// organic blob shape
return (
);
}
function StickerFlower({ color = PJ.pink, center = PJ.yellow, size = 60, rotate = 0, style }) {
return (
);
}
function StickerHeart({ color = PJ.pinkHot, size = 50, rotate = 0, style }) {
return (
);
}
function StickerCheck({ color = PJ.cyan, size = 50, rotate = 0, style }) {
return (
);
}
// Doodle: squiggly underline
function Squiggle({ color = PJ.pink, w = 120, h = 16, rotate = 0, style, thickness = 3 }) {
return (
);
}
// Doodle: arrow drawn by hand
function Arrow({ color = PJ.ink, w = 100, h = 60, rotate = 0, style, thickness = 3 }) {
return (
);
}
// Doodle: hand-drawn circle (highlight)
function CircleHighlight({ color = PJ.pink, w = 120, h = 50, rotate = -3, style, thickness = 3 }) {
return (
);
}
// Drag-to-move wrapper — saves position to a key in state
function Draggable({ children, initialX = 0, initialY = 0, onDrag, zBoost = true }) {
const [pos, setPos] = React.useState({ x: initialX, y: initialY });
const [dragging, setDragging] = React.useState(false);
const ref = React.useRef(null);
const start = React.useRef({ x: 0, y: 0, px: 0, py: 0 });
const onDown = (e) => {
e.preventDefault(); e.stopPropagation();
const ev = e.touches ? e.touches[0] : e;
start.current = { x: ev.clientX, y: ev.clientY, px: pos.x, py: pos.y };
setDragging(true);
};
React.useEffect(() => {
if (!dragging) return;
const onMove = (e) => {
const ev = e.touches ? e.touches[0] : e;
const nx = start.current.px + (ev.clientX - start.current.x);
const ny = start.current.py + (ev.clientY - start.current.y);
setPos({ x: nx, y: ny });
onDrag && onDrag({ x: nx, y: ny });
};
const onUp = () => setDragging(false);
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseup', onUp);
window.addEventListener('touchmove', onMove);
window.addEventListener('touchend', onUp);
return () => {
window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseup', onUp);
window.removeEventListener('touchmove', onMove);
window.removeEventListener('touchend', onUp);
};
}, [dragging]);
return (
{children}
);
}
// Big chunky display title with optional offset shadow
function ChunkyTitle({ children, color = PJ.pink, shadow = PJ.yellow, size = 60, rotate = 0, style }) {
return (
{children}
);
}
// Handwritten title (Caveat)
function HandTitle({ children, color = PJ.pink, size = 48, rotate = 0, style, weight = 700 }) {
return (
{children}
);
}
// Small label sticker (like an inventory tag)
function TagSticker({ label, color = PJ.yellow, rotate = -4, style }) {
return (
{label}
);
}
// ─── Responsive viewport hook ───────────────────────────────────────────────
function useIsMobile(bp = 768) {
const [m, setM] = React.useState(() => typeof window !== 'undefined' && window.innerWidth <= bp);
React.useEffect(() => {
const fn = () => setM(window.innerWidth <= bp);
window.addEventListener('resize', fn);
return () => window.removeEventListener('resize', fn);
}, [bp]);
return m;
}
// ─── Shared edit context (used by Landing, AboutPage, etc.) ─────────────────
// Provides a boolean `edit` value. Default true so pages without a Provider
// are always in edit mode (safe fallback — no content disappears).
const PageEditCtx = React.createContext(true);
// ─── Can this copy be edited? ───────────────────────────────────────────────
// Editing (the Edit/Preview toolbar, inline contentEditable, drag-drop image
// slots, add/remove section chrome) is only available inside the Omelette
// editor, which injects window.omelette.writeFile. When the site is published
// to any normal static host that bridge is absent, so every page locks to
// Preview automatically and visitors get a clean, read-only site. Setting
// window.__PREVIEW_ONLY__ = true forces the same lock even inside the editor.
window.siteCanEdit = function () {
return !window.__PREVIEW_ONLY__ && !!(window.omelette && window.omelette.writeFile);
};
// ─── Shared page toolbar (Edit / Preview / Save) ──────────────────────────
// Drop inside any page that wraps itself in
.
// extraPrefixes: additional localStorage key prefixes to include in the save
// (beyond the default cs:{pageKey}: prefix). e.g. ['land:', 'col:', 'rm:']
function PageEditToolbar({ edit, setEdit, pageKey, extraPrefixes }) {
const [saved, setSaved] = React.useState(false);
React.useEffect(() => {
const handler = (e) => {
if (e.detail && e.detail.pageKey === pageKey) {
setSaved(true);
setTimeout(() => setSaved(false), 2200);
}
};
window.addEventListener('cs-sidecar-saved', handler);
return () => window.removeEventListener('cs-sidecar-saved', handler);
}, [pageKey]);
const doSave = () => {
if (window.csSidecarSave) window.csSidecarSave(pageKey, extraPrefixes);
};
return (
);
}
Object.assign(window, {
PJ, GraphPaper, LinedPaper, Tape, Polaroid, TornPaper, PaperClip,
StickerStar, StickerBlob, StickerFlower, StickerHeart, StickerCheck,
Squiggle, Arrow, CircleHighlight, Draggable, ChunkyTitle, HandTitle, TagSticker,
PageEditCtx, PageEditToolbar, useIsMobile,
});