/* Pipeline prototype — icons, atoms, mention parser, frame thumbnails */
const { useState, useEffect, useRef } = React;
function CIcon({ name, size = 16, className = "" }) {
const p = { width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
const G = {
gallery: ,
bible: ,
mywork: ,
review: ,
shots: ,
chars: ,
env: ,
assets: ,
rnd: ,
library: ,
sync: ,
members: ,
chev: ,
back: ,
plus: ,
x: ,
check: ,
clock: ,
plane: ,
heart: ,
link: ,
download: ,
play: ,
sparkle: ,
wand: ,
search: ,
grid: ,
sliders: ,
folder: ,
bolt: ,
refs: ,
timeline:
};
return ;
}
function Avt({ m, size = "s26" }) { return {m.initials}; }
function Status({ s }) { return {window.CL.statusLabel[s] || s}; }
function memberById(id) { return window.CL.members.find((m) => m.id === id); }
function entityByName(name) {
const c = window.CL;
const all = [...c.chars.map((x) => ({ ...x, kind: "char" })), ...c.envs.map((x) => ({ ...x, kind: "env" })), ...c.assets.map((x) => ({ ...x, kind: "asset" }))];
return all.find((e) => e.name.toLowerCase() === name.toLowerCase());
}
/* render text with @Mentions as colored links */
function Mentions({ text, onClick }) {
const parts = String(text).split(/(@[A-Za-z][A-Za-z0-9]*)/g);
return <>{parts.map((p, i) => {
if (p[0] === "@") {
const e = entityByName(p.slice(1));
const kind = e ? e.kind : "char";
return { ev.stopPropagation(); onClick && onClick(e, kind); }}>{p.slice(1)};
}
return {p};
})};
}
/* procedural cinematic frame — deterministic from seed */
function frameStyle(seed, hue) {
let h = 0; for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
const base = hue != null ? hue : (h % 360);
const ang = 90 + (h % 60);
const gx = 25 + (h % 50), gy = 30 + ((h >> 3) % 40);
const l1 = 30 + (h % 12);
return {
background:
`radial-gradient(120% 90% at ${gx}% ${gy}%, hsl(${base} 55% ${l1}% / .9), transparent 60%),` +
`radial-gradient(80% 70% at ${100 - gx}% ${100 - gy}%, hsl(${(base + 30) % 360} 40% 22% / .8), transparent 55%),` +
`linear-gradient(${ang}deg, hsl(${base} 30% 10%), hsl(${(base + 20) % 360} 35% 16%))`
};
}
function Frame({ seed, hue, children, className = "", style = {} }) {
return {children}
;
}
Object.assign(window, { CIcon, Avt, Status, memberById, entityByName, Mentions, frameStyle, Frame });