{part.slice(1, -1)} : part);
const SOURCES = useMemo(() => ({
'workflows': '/en/common-workflows',
'teams': 'https://claude.com/blog/how-anthropic-teams-use-claude-code',
'legal': 'https://claude.com/blog/how-anthropic-uses-claude-legal',
'cybersecurity': 'https://claude.com/blog/how-anthropic-uses-claude-cybersecurity',
'best-practices': '/en/best-practices',
'ebook': 'https://resources.anthropic.com/hubfs/Scaling%20agentic%20coding%20across%20your%20organization.pdf'
}), []);
const [mounted, setMounted] = useState(false);
const [q, setQ] = useState('');
const [start, setStart] = useState(true);
const [sel, setSel] = useState(null);
const [openId, setOpenId] = useState(null);
const [copied, setCopied] = useState(null);
const [fills, setFills] = useState({});
const copyTimer = useRef(null);
useEffect(() => {
setMounted(true);
return () => clearTimeout(copyTimer.current);
}, []);
const setFill = (id, key, val) => setFills(f => ({
...f,
[id + '.' + key]: val
}));
const fillOf = (p, key) => {
const v = fills[p.id + '.' + key];
return v !== undefined ? v : p.slots && p.slots[key] !== undefined ? p.slots[key] : '';
};
const assemble = p => p.prompt.replace(/\{(\w+)\}/g, (_, k) => fillOf(p, k) || p.slots && p.slots[k] || k);
const preview = p => p.prompt.replace(/\{(\w+)\}/g, (_, k) => p.slots && p.slots[k] || k);
const bodyText = p => preview(p) + ' ' + p.teaches.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') + ' ' + (p.next || '');
const widthFor = s => (s || '').length + 3 + 'ch';
const ql = q.trim().toLowerCase();
const toggleTag = k => {
setStart(false);
setSel(s => !ql && s === k ? null : k);
};
const clear = () => {
setStart(false);
setSel(null);
setQ('');
};
const results = useMemo(() => {
const list = PROMPTS.filter(p => {
if (ql) return p.title.toLowerCase().includes(ql) || bodyText(p).toLowerCase().includes(ql);
if (start) return !!p.startN;
if (sel) return tagsOf(p).includes(sel);
return true;
});
if (ql) return list;
if (start) return list.sort((a, b) => a.startN - b.startN);
if (sel) return list.sort((a, b) => (a.roles || []).length - (b.roles || []).length || (b.sdlc === 'operate') - (a.sdlc === 'operate'));
return list;
}, [PROMPTS, ql, start, sel]);
const matchSnippet = p => {
if (!ql || p.title.toLowerCase().includes(ql)) return null;
const txt = bodyText(p);
const at = txt.toLowerCase().indexOf(ql);
if (at < 0) return null;
const lo = Math.max(0, at - 30), hi = Math.min(txt.length, at + ql.length + 50);
return [lo > 0 ? '…' : '', txt.slice(lo, at), {txt.slice(at, at + ql.length)}, txt.slice(at + ql.length, hi), hi < txt.length ? '…' : ''];
};
const grouped = useMemo(() => {
if (start && !q.trim()) return [];
const g = {};
for (const p of results) {
const key = p.sdlc + '|' + p.cat;
(g[key] = g[key] || ({
sdlc: p.sdlc,
cat: p.cat,
items: []
})).items.push(p);
}
return Object.values(g);
}, [results, start, q]);
const copy = async (str, id) => {
try {
await navigator.clipboard.writeText(str);
} catch {
const ta = document.createElement('textarea');
ta.value = str;
ta.setAttribute('readonly', '');
ta.style.position = 'fixed';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
}
clearTimeout(copyTimer.current);
setCopied(id);
copyTimer.current = setTimeout(() => setCopied(null), 1600);
};
const promptBody = p => {
if (!p.slots) return {p.prompt};
const parts = p.prompt.split(/(\{\w+\})/g);
return
{parts.map((part, idx) => {
const m = part.match(/^\{(\w+)\}$/);
if (!m) return {part};
const k = m[1];
const val = fillOf(p, k);
return setFill(p.id, k, e.target.value)} onFocus={e => e.target.select()} onClick={e => e.stopPropagation()} />;
})}
;
};
const card = p => {
const open = openId === p.id;
const srcHref = SOURCES[p.src];
const srcLabel = sourceLabels[p.src];
const snip = matchSnippet(p);
return {preview(p)}}
{open && {q} : null}