// sketchy.jsx — lo-fi wireframe primitives + lang/anno contexts
// Loaded BEFORE wf-*.jsx files. Exports to window.
// ─── Contexts ──────────────────────────────────────────────────────
const LangContext = React.createContext('mn');
const LangSetContext = React.createContext(() => {}); // setter so the Nav toggle can flip language
const AnnoContext = React.createContext(true);
// — margin annotation, only shows when annotations enabled
function Anno({ mn, en, color = 'red', style, children }) {
const show = React.useContext(AnnoContext);
if (!show) return null;
const c = color === 'blue' ? '#2b4ec9' : '#c92b2b';
return (
{children ??
);
}
// AnnoArrow — small arrow + label, absolutely positioned via style prop
function AnnoArrow({ mn, en, dir = 'left', color = 'red', children, style }) {
const show = React.useContext(AnnoContext);
if (!show) return null;
const c = color === 'blue' ? '#2b4ec9' : '#c92b2b';
return (
{dir === 'left' && ↳ }
{children ??
{dir === 'right' && ↲ }
);
}
// ─── Wobble path generator ─────────────────────────────────────────
// Deterministic per-corner-coords so the same box renders identically.
function roughPath(x, y, w, h, jitter = 1.6, seed = 0) {
const seg = Math.max(8, Math.round((w + h) / 30));
const r = (i, side) =>
(Math.sin((i + 1) * 1.7 + side * 2.3 + seed * 0.9) +
Math.sin((i + 1) * 0.7 + side * 1.1 + seed * 1.7)) *
0.5 *
jitter;
const pts = [];
for (let i = 0; i <= seg; i++) { const t = i / seg; pts.push([x + t * w, y + r(i, 0)]); }
for (let i = 1; i <= seg; i++) { const t = i / seg; pts.push([x + w + r(i, 1), y + t * h]); }
for (let i = 1; i <= seg; i++) { const t = i / seg; pts.push([x + w - t * w, y + h + r(i, 2)]); }
for (let i = 1; i < seg; i++) { const t = i / seg; pts.push([x + r(i, 3), y + h - t * h]); }
return 'M' + pts.map((p) => p[0].toFixed(2) + ',' + p[1].toFixed(2)).join(' L') + ' Z';
}
function roughLine(x1, y1, x2, y2, jitter = 1.4, seed = 0) {
const dx = x2 - x1, dy = y2 - y1;
const len = Math.hypot(dx, dy);
const seg = Math.max(6, Math.round(len / 18));
const nx = -dy / len, ny = dx / len;
const pts = [];
for (let i = 0; i <= seg; i++) {
const t = i / seg;
const j = (Math.sin(i * 1.7 + seed) + Math.sin(i * 0.6 + seed * 2)) * 0.5 * jitter;
pts.push([x1 + dx * t + nx * j, y1 + dy * t + ny * j]);
}
return 'M' + pts.map((p) => p[0].toFixed(2) + ',' + p[1].toFixed(2)).join(' L');
}
// ─── SketchBox — div with hand-drawn rect border ───────────────────
function SketchBox({
children,
style,
className,
jitter = 1.6,
seed = 0,
fill = 'transparent',
fillColor = null,
stroke = '#1a1a1f',
strokeWidth = 1.4,
dashed = false,
doubled = false,
inset = 2, // padding inside SVG so stroke isn't clipped
...rest
}) {
const ref = React.useRef(null);
const [size, setSize] = React.useState({ w: 0, h: 0 });
React.useLayoutEffect(() => {
if (!ref.current) return;
const el = ref.current;
const measure = () => setSize({ w: el.offsetWidth, h: el.offsetHeight });
measure();
const ro = new ResizeObserver(measure);
ro.observe(el);
return () => ro.disconnect();
}, []);
return (
{size.w > 0 && (
{fillColor &&
)}
{children}
);
}
// Placeholder — dashed box with X and a label inside
function Placeholder({ label, sublabel, style, jitter = 1.4, ratio, mn, en }) {
return (
{mn || en ?
{sublabel &&
{sublabel}
}
);
}
// Scribble — fake squiggly text line (for ipsum body copy)
function Scribble({ length = 100, lines = 1, gap = 6, density = 1, color = '#1a1a1f', strokeWidth = 1.2, style }) {
const items = [];
for (let i = 0; i < lines; i++) {
const w = i === lines - 1 && lines > 1 ? length * (0.5 + Math.sin(i + 1) * 0.2) : length;
items.push(
{
const seg = Math.max(8, Math.floor(w / 6 * density));
const pts = [];
for (let k = 0; k <= seg; k++) {
const t = k / seg;
const y = 3 + Math.sin(k * 1.2 + i * 0.8) * 1.4;
pts.push([t * w, y]);
}
return 'M' + pts.map((p) => p[0].toFixed(2) + ',' + p[1].toFixed(2)).join(' L');
})()}
fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round"
/>
);
}
return {items}
;
}
// Avatar — circle placeholder
function Avatar({ size = 32, label, style }) {
return (
{(() => {
const cx = size / 2, cy = size / 2, r = size / 2 - 1;
const seg = 24;
const pts = [];
for (let i = 0; i <= seg; i++) {
const a = (i / seg) * Math.PI * 2;
const rr = r + Math.sin(i * 1.7) * 0.6;
pts.push([cx + Math.cos(a) * rr, cy + Math.sin(a) * rr]);
}
return p[0].toFixed(2) + ',' + p[1].toFixed(2)).join(' L') + ' Z'} fill="#eae6dc" stroke="#1a1a1f" strokeWidth="1.2" />;
})()}
{label && (
{label}
)}
);
}
// Chip / button placeholder pill
function Chip({ children, filled = false, style, mn, en }) {
return (
{(mn || en) ?
);
}
// Headline text helper — H1-ish, hand drawn weight
function Headline({ children, size = 36, color = '#1a1a1f', style }) {
return (
{children}
);
}
// Caret label / mono section tag in margin
function Tag({ children, mn, en, color = '#6b6b7a', style }) {
return (
{(mn || en) ?
);
}
// ─── Device frames ─────────────────────────────────────────────────
// DesktopFrame — laptop window with traffic lights, gives content area
function DesktopFrame({ children, label, mn, en, width = 720, height = 460, scrollH }) {
return (
{/* Title bar */}
{(mn || en) ?
{scrollH
?
{children}
: children}
);
}
// PhoneFrame — minimal phone outline with status bar
function PhoneFrame({ children, label, mn, en, width = 200, height = 420 }) {
return (
9:41
{(mn || en) ?
●●●
{children}
);
}
// ChatBubble — used in messenger / chat-metaphor screens
function ChatBubble({ from = 'andaa', children, mn, en, style, jitter = 1.2, width }) {
const isUser = from === 'user';
return (
{(mn || en) ?
);
}
// CornerSticker — small star/burst sticker (e.g. "Most loved")
function Burst({ children, mn, en, style, size = 56, color = '#1a1a1f' }) {
const pts = [];
const spikes = 12;
for (let i = 0; i < spikes * 2; i++) {
const r = i % 2 === 0 ? size / 2 : size / 2 - 4;
const a = (i / (spikes * 2)) * Math.PI * 2 + Math.sin(i) * 0.05;
pts.push([size / 2 + Math.cos(a) * r, size / 2 + Math.sin(a) * r]);
}
return (
p[0].toFixed(2) + ',' + p[1].toFixed(2)).join(' L') + ' Z'} fill="none" stroke={color} strokeWidth="1.3" strokeLinejoin="round" />
{(mn || en) ?
);
}
// VariantHeader — sits at top of an artboard inside DC label area; not used as
// we rely on DCArtboard label. But we expose a small reasoning block.
function Reasoning({ title, children }) {
const show = React.useContext(AnnoContext);
if (!show) return null;
return (
{title || 'WHY'}
{children}
);
}
// Tradeoff block — pros/cons side by side
function Tradeoff({ pros = [], cons = [] }) {
const show = React.useContext(AnnoContext);
const lang = React.useContext(LangContext);
if (!show) return null;
const t = (o) => typeof o === 'string' ? o : (lang === 'mn' ? o.mn : o.en);
return (
+ {lang === 'mn' ? 'Давуу' : 'PROS'}
{pros.map((p, i) =>
· {t(p)}
)}
− {lang === 'mn' ? 'Сул' : 'CONS'}
{cons.map((p, i) =>
· {t(p)}
)}
);
}
// ─── Export to window ──────────────────────────────────────────────
Object.assign(window, {
LangContext, LangSetContext, AnnoContext,
L, Anno, AnnoArrow,
SketchBox, SketchLine, Placeholder, Scribble, Avatar, Chip, Headline, Tag,
DesktopFrame, PhoneFrame, ChatBubble, Burst,
Reasoning, Tradeoff,
roughPath, roughLine,
});