// share.jsx — "A mind, observed": a shareable poster artifact from a Witness sitting.
// Built as a single SVG so what you see is exactly what exports to PNG.
function mtShapeSVG(s, attrs, capColor) {
if (s.t === 'ell') return ``;
if (s.t === 'rr') return ``;
if (s.t === 'cap') return ``;
return '';
}
function mtWrap(text, max) {
const words = text.split(' '); const lines = []; let cur = '';
words.forEach(w => {
if ((cur + ' ' + w).trim().length > max) { lines.push(cur.trim()); cur = w; }
else cur += ' ' + w;
});
if (cur.trim()) lines.push(cur.trim());
return lines;
}
function esc(s) { return String(s).replace(/&/g, '&').replace(//g, '>'); }
// data: { pose, phenoms:[{hue,lx,ly,kind}], arose, noted, quote:{t,a}, dateLabel }
function buildWitnessShareSVG(data) {
const W = 1080, H = 1920;
const P = mtPose(data.pose);
const [, , vw, vh] = P.vb;
// body placement box
const bw = 760, bx = (W - bw) / 2, scale = bw / vw, bh = vh * scale, by = 470;
const tx = bx, ty = by;
// body shapes
const bodyFill = 'rgba(54,232,210,0.08)', bodyStroke = 'rgba(54,232,210,0.42)', capCol = 'rgba(54,232,210,0.16)';
let body = '';
P.regions.forEach(r => {
const isHead = r.id === P.headId;
if (r.shape.t === 'cap') body += mtShapeSVG(r.shape, '', capCol);
else body += mtShapeSVG(r.shape, `fill="${isHead ? 'rgba(120,205,255,0.5)' : bodyFill}" stroke="${isHead ? 'rgba(140,210,255,0.7)' : bodyStroke}" stroke-width="1.4"`);
});
// phenomena dots (in pose coords)
let dots = '';
(data.phenoms || []).slice(0, 16).forEach(p => {
const x = (p.lx / 100) * vw, y = (p.ly / 100) * vh;
const rr = p.kind === 'body' ? 11 : 8;
dots += ``;
dots += ``;
dots += ``;
});
const quoteLines = data.quote ? mtWrap('“' + data.quote.t + '”', 38) : [];
const qY = 1600;
const quoteSVG = quoteLines.map((ln, i) =>
`${esc(ln)}`
).join('');
return ``;
}
// SVG string → PNG Blob
function svgToPngBlob(svg, w, h) {
return new Promise((resolve, reject) => {
const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const img = new Image();
img.onload = () => {
const cv = document.createElement('canvas'); cv.width = w; cv.height = h;
const ctx = cv.getContext('2d'); ctx.drawImage(img, 0, 0, w, h);
URL.revokeObjectURL(url);
cv.toBlob(b => b ? resolve(b) : reject(new Error('toBlob failed')), 'image/png');
};
img.onerror = (e) => { URL.revokeObjectURL(url); reject(e); };
img.src = url;
});
}
function ShareCard({ data, onClose }) {
const C = MT_COLORS;
const svg = React.useMemo(() => buildWitnessShareSVG(data), [data]);
const dataUrl = React.useMemo(() => 'data:image/svg+xml;utf8,' + encodeURIComponent(svg), [svg]);
const [status, setStatus] = React.useState('');
async function getBlob() { return svgToPngBlob(svg, 1080, 1920); }
async function onSave() {
try {
setStatus('Rendering…');
const blob = await getBlob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = 'anicca-a-mind-observed.png';
document.body.appendChild(a); a.click(); a.remove();
setTimeout(() => URL.revokeObjectURL(url), 4000);
setStatus('Saved ✓');
} catch (e) { setStatus('Save unavailable here'); }
}
async function onShare() {
try {
const blob = await getBlob();
const file = new File([blob], 'anicca-a-mind-observed.png', { type: 'image/png' });
if (navigator.canShare && navigator.canShare({ files: [file] })) {
await navigator.share({ files: [file], title: 'A mind, observed', text: 'A sitting, witnessed — via Anicca.' });
setStatus('Shared ✓');
} else { onSave(); }
} catch (e) { setStatus(''); }
}
return (
{status &&
{status}
}
Share
Save image
);
}
Object.assign(window, { buildWitnessShareSVG, svgToPngBlob, ShareCard });