/* Shell: responsive device frames + shared design state (Canvas direction) */
const { useState, useRef, useEffect, useLayoutEffect } = React;
const { PS_DATA: DS } = window;
const DEVICES = [
{ id: "desktop", w: 1280, h: 800, bp: "desktop", label: "Desktop", icon: "Monitor", chrome: "browser" },
{ id: "tablet", w: 834, h: 1040, bp: "tablet", label: "Tablet", icon: "Tablet", chrome: "device" },
{ id: "mobile", w: 390, h: 820, bp: "mobile", label: "Phone", icon: "Smartphone", chrome: "device" },
];
function BrowserChrome({ children, mode }) {
const url = mode === "etsy" ? "bellemaison.com/personalize?order=ETSY-4827-1193" : "bellemaison.com/studio";
return (
{["#E2A08A", "#E6C788", "#A8C194"].map((c, i) =>
{children}
);
}
function DeviceChrome({ children, mobile }) {
const pad = mobile ? 11 : 13;
const sbH = mobile ? 36 : 28;
return (
);
}
function Toast({ show, label }) {
return (
);
}
function Seg({ items, value, onChange, getIcon, getLabel, getId }) {
return (
{items.map(it => {
const id = getId(it), active = value === id;
return (
onChange(id)} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "8px 15px", borderRadius: "var(--r-pill)", border: "none", cursor: "pointer", fontSize: 13.5, fontWeight: 600, background: active ? "var(--card)" : "transparent", color: active ? "var(--ink)" : "var(--ink-3)", boxShadow: active ? "var(--sh-sm)" : "none", transition: "background .15s, color .15s" }}>
{getIcon &&
);
})}
);
}
const MODES = [
{ id: "shop", label: "Direct shop", icon: "Store" },
{ id: "etsy", label: "Etsy order", icon: "ShoppingBag" },
];
function loadDesign(mode) {
const base = DS.defaultDesign(DS.ENTRIES[mode]);
try {
const raw = localStorage.getItem("ps_design_" + mode);
if (raw) return { ...base, ...JSON.parse(raw) };
} catch (e) {}
return base;
}
function App() {
const [mode, setMode] = useState("shop");
const { design, update, reset, undo, redo, canUndo, canRedo } = useHistory(() => loadDesign("shop"));
const [intro, setIntro] = useState(true);
const [verified, setVerified] = useState(false);
const [etsyEntry, setEtsyEntry] = useState(null);
const entry = mode === "etsy" ? (etsyEntry || DS.ENTRIES.etsy) : DS.ENTRIES[mode];
const [device, setDevice] = useState("desktop");
const [scale, setScale] = useState(1);
const [toast, setToast] = useState(null);
const stageRef = useRef(null);
const toastT = useRef(null);
const showToast = label => { setToast(label); clearTimeout(toastT.current); toastT.current = setTimeout(() => setToast(null), 2400); };
const resetDesign = () => reset(DS.defaultDesign(entry));
// persist current design per mode
useEffect(() => {
try { localStorage.setItem("ps_design_" + mode, JSON.stringify(design)); } catch (e) {}
}, [design, mode]);
// load a shared design from the URL hash on first mount
useEffect(() => {
const shared = window.PS_SHARE && window.PS_SHARE.readSharedDesign();
if (shared) { reset({ ...DS.defaultDesign(DS.ENTRIES.shop), ...shared }); setIntro(false); showToast("Opened a shared design"); }
}, []);
// keyboard: Cmd/Ctrl+Z undo, Shift+Cmd/Ctrl+Z (or Ctrl+Y) redo
useEffect(() => {
const onKey = e => {
const meta = e.metaKey || e.ctrlKey;
if (!meta) return;
const k = e.key.toLowerCase();
if (k === "z" && !e.shiftKey) { e.preventDefault(); undo(); }
else if ((k === "z" && e.shiftKey) || k === "y") { e.preventDefault(); redo(); }
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [undo, redo]);
const switchMode = m => {
if (m === mode) return;
setMode(m);
reset(loadDesign(m));
setIntro(true);
setVerified(false);
setEtsyEntry(null);
};
const onVerified = e => {
setEtsyEntry(e);
// re-seed the design from the verified order's locked size/frame + template
reset({ ...DS.defaultDesign(e), ...loadDesign("etsy"), size: e.lockSize, frame: e.lockFrame });
setVerified(true);
};
const doShare = () => {
const url = window.PS_SHARE.shareURL(design);
const finish = ok => showToast(ok ? "Share link copied!" : "Link ready โ copy from the address bar");
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(() => finish(true)).catch(() => { try { location.hash = "d=" + window.PS_SHARE.encodeDesign(design); } catch (e) {} finish(false); });
} else { try { location.hash = "d=" + window.PS_SHARE.encodeDesign(design); } catch (e) {} finish(false); }
};
const dev = DEVICES.find(d => d.id === device);
useLayoutEffect(() => {
const fit = () => {
const el = stageRef.current; if (!el) return;
const availW = el.clientWidth - 48, availH = el.clientHeight - 48;
setScale(Math.min(availW / dev.w, availH / dev.h, 1));
};
fit();
const ro = new ResizeObserver(fit);
if (stageRef.current) ro.observe(stageRef.current);
window.addEventListener("resize", fit);
return () => { ro.disconnect(); window.removeEventListener("resize", fit); };
}, [device]);
const needsVerify = mode === "etsy" && !verified;
const inner = needsVerify
? setIntro(false)} onResetDesign={resetDesign}
undo={undo} redo={redo} canUndo={canUndo} canRedo={canRedo} onShare={doShare} />;
const framed = dev.chrome === "browser"
? {inner}
: {inner} ;
return (
{/* top toolbar */}
Poster Studio
Working editor ยท responsive
m.id} getIcon={m => m.icon} getLabel={m => m.label} />
d.id} getIcon={d => d.icon} getLabel={d => d.label} />
setIntro(true)} title="Show intro" className="btn-icon btn-ghost" style={{ width: 40, height: 40, minHeight: 40 }}>
{/* caption */}
{mode === "etsy"
? "Customer already paid on Etsy โ size & frame are locked; they personalize and submit their design."
: "Live sale on the poster site โ full choice of size & frame, running price, add to cart."}
{/* stage */}
);
}
ReactDOM.createRoot(document.getElementById("root")).render(