// WireframeTile.jsx — custom tile visual for the `wireframe-components` project.
//
// Ported from Andy's "Wireframe Tile v2" mockup (Algoma Platform Design System
// export, July 28 2026). Reads left-to-right: a rotated, half-opacity wireframe
// sketch → dashed arrow → the shipped UI built from it → a strip of the actual
// catalog components underneath. It's the argument the project makes, as a
// picture.
//
// Why a component and not a tile.jpg like every other project:
// • This is the component-catalog case study. A tile that IS live components
// is the point, and it stays pin-sharp at any card size and any DPR — the
// rasters elsewhere are capped by their source resolution.
// • The composition is ~100 nested boxes of pure geometry. As markup it's
// smaller than the JPEG would be, and editable.
//
// The mockup ships its own bottom title block + scrim. Both are DELIBERATELY
// omitted here: ReelCard already draws that treatment over every tile, so
// keeping them would double the title and break the shared card grammar.
//
// Fonts: the mockup calls for Poppins (body) and Ubuntu (numerals). Neither is
// loaded by the site, and adding two families for one tile isn't worth the
// requests — at final size the largest type here renders around 6px, where the
// substitution is invisible. Swap FONT_UI / FONT_NUM below if they're ever
// loaded for real.
const WF = (() => {
const CREAM = 'rgb(242,239,230)';
const MINT = '#03F3A3';
const FONT_UI = "'Inter', system-ui, sans-serif"; // stands in for Poppins
const FONT_NUM = "'Inter', system-ui, sans-serif"; // stands in for Ubuntu
const FONT_MONO = "var(--ff-mono), ui-monospace, Menlo, monospace";
return { CREAM, MINT, FONT_UI, FONT_NUM, FONT_MONO };
})();
// ── Small primitives ────────────────────────────────────────────────────────
const WfLabel = ({ children, color, top, left, size = 8, ls = 1.2 }) => (
{children}
);
// Outlined box in the wireframe sketch — everything there is 1.5px linework.
const WfBox = ({ dashed, style, children }) => (
{children}
);
const WfPill = ({ label, style }) => (
{label}
);
const WfStat = ({ label, value, delta }) => (
{label}
{value}
{delta &&
{delta}
}
);
const WfSwatch = ({ bg }) => (
);
// ── The 640×480 composition ─────────────────────────────────────────────────
// Authored at the mockup's native size and scaled as a unit, so every offset
// below is the mockup's own number — no re-derivation, no drift.
const WireframeStage = ({ hovered }) => (
{/* Aquamarine glow behind the shipped UI */}
{/* ── 01 · the wireframe sketch ── */}
01 · Wireframe
);
// ── Scaler ──────────────────────────────────────────────────────────────────
// The card is 4:3 but its pixel width varies (up to 640 in the reel, full-bleed
// on mobile, narrower in the Work grid). Scaling the whole 640×480 stage by
// width keeps every internal proportion exact — the alternative, making 100
// nested boxes fluid, would drift.
const WireframeTile = ({ hovered = false }) => {
const ref = React.useRef(null);
const [scale, setScale] = React.useState(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const ro = new ResizeObserver(() => {
const w = el.clientWidth;
if (w) setScale(w / 640);
});
ro.observe(el);
return () => ro.disconnect();
}, []);
return (
{/* Held back until measured — a flash of the unscaled 640px stage inside a
narrow mobile card is far uglier than one frame of flat background. */}
{scale !== null && (
)}
);
};
// Registry the tile system reads — see ProjectVisual in ProjectTile.jsx.
window.CUSTOM_TILES = Object.assign(window.CUSTOM_TILES || {}, {
'wireframe-components': WireframeTile,
});
Object.assign(window, { WireframeTile, WireframeStage });