{open && (
<>
setOpen(false)} />
Switch project
{FOUNDRY_PROJECTS.map(x => (
))}
)}
);
}
/* =============================== CONTROLLED PREVIEW (the inspected page) == */
/* A representative rendered surface for the project. Each element carries the
metadata the picker captures: selector, element type, file hint. */
function SitePreview({ project, inspect, onHover, onPick }) {
const p = project;
function meta(el) {
if (!el) return null;
const r = el.getBoundingClientRect();
const wrap = el.closest(".fp-site");
const wr = wrap.getBoundingClientRect();
const parent = el.parentElement.closest("[data-sel]");
return {
sel: el.getAttribute("data-sel"), type: el.getAttribute("data-type") || el.tagName.toLowerCase(),
name: el.getAttribute("data-name") || (el.textContent || "").trim().slice(0, 48),
text: (el.textContent || "").trim().slice(0, 120), file: el.getAttribute("data-file"),
context: parent ? parent.getAttribute("data-sel") : "document",
box: { x: Math.round(r.left - wr.left), y: Math.round(r.top - wr.top), w: Math.round(r.width), h: Math.round(r.height) },
rect: { left: r.left - wr.left, top: r.top - wr.top, width: r.width, height: r.height },
};
}
const onMove = (e) => { if (!inspect) return; const el = e.target.closest("[data-sel]"); onHover(el ? meta(el) : null); };
const onClick = (e) => { if (!inspect) return; e.preventDefault(); e.stopPropagation(); const el = e.target.closest("[data-sel]"); if (el) onPick(meta(el)); };
return (
inspect && onHover(null)} onClick={onClick}>
Control every change to {p.domain}
Request, validate and publish safely — nothing reaches production without approval.
{[["Requests", "branch"], ["Validation", "ops"], ["Deploys", "rocket"]].map(([t, ic], i) => (
{t}
Operational control over {t.toLowerCase()} with a full audit trail.
))}
);
}
/* ============================================ INSPECT PROJECT (desktop) == */
function InspectProject({ project, onCreateCR }) {
const [inspect, setInspect] = useStateP(true);
const [hover, setHover] = useStateP(null);
const [picked, setPicked] = useStateP(null);
const p = project;
const url = "https://" + (p.preview ? p.preview.url : p.domain);
const overlay = inspect ? (picked || hover) : null;
return (
{url}
{ setPicked(m); }} />
{overlay && (
{overlay.sel} {overlay.box.w}×{overlay.box.h}
)}
setPicked(null)} onCreateCR={onCreateCR} />
);
}
/* ------------------------------------------- selected-element inspector -- */
function ElementInspector({ picked, project, url, onClear, onCreateCR }) {
if (!picked) {
return (
Element inspector
No element selected
Turn on Inspect, then click an element in the preview to capture it as an edit target.
);
}
const rows = [
["Element type", picked.type], ["Selector", picked.sel], ["Accessible name", picked.name || "—"],
["Visible text", picked.text || "—"], ["Bounding box", `${picked.box.x}, ${picked.box.y} · ${picked.box.w}×${picked.box.h}`],
["Nearby context", picked.context], ["Component hint", picked.file || "—"],
];
return (
Edit target captured
{picked.sel}capture · {project.domain} · 1280×800
URL{url}
Viewport1280 × 800
{rows.map(([k, v]) =>
{k}{v}
)}
Inspect can only open a change request. Production stays locked behind approval.
);
}
/* ====================================== MOBILE — screenshot annotation ==== */
function MobileAnnotate({ project, onCreateCR }) {
const [shot, setShot] = useStateP(false);
const [mark, setMark] = useStateP(null); // { x, y } in % (tap point)
const ref = useRefP(null);
function tap(e) {
if (!shot) return;
const r = ref.current.getBoundingClientRect();
const x = ((e.clientX - r.left) / r.width) * 100, y = ((e.clientY - r.top) / r.height) * 100;
setMark({ x: Math.max(3, Math.min(97, x)), y: Math.max(3, Math.min(97, y)) });
}
return (
InspectMark a target on a screenshot
{!shot ? (
) : (
<>
{project.domain} · tap the area to edit
{mark &&
}
Project{project.name}
Screenshotcapture-{project.id}.png
Marker{mark ? `${Math.round(mark.x)}%, ${Math.round(mark.y)}%` : "tap to place"}
)}
);
}
/* turn a captured element into a NewRequest seed ------------------------- */
function elementToSeed(picked, project) {
if (!picked) return null;
return {
target: project.name, project: project.id,
area: picked.context && picked.context !== "document" ? picked.context + " · " + picked.sel : picked.sel,
type: picked.annotated ? "UI" : (picked.type === "text" || picked.type === "heading" ? "Copy" : "UI"),
element: picked,
};
}
Object.assign(window, {
FOUNDRY_PROJECTS, EXTRA_SEED, fproj, projOpenCRs, projAwaiting,
ProjectSelector, ProjectSwitcher, SitePreview, InspectProject, ElementInspector, MobileAnnotate, elementToSeed,
});