Edit Source Panel

Name

Also known as (comma separated)

Brief definition Displays supporting sources.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "primarySourceTitle", "type": "text", "label": "Primary source title", "default": "Quarterly infrastructure report" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "collapsed", "type": "toggle", "label": "Collapsed by default", "default": false }, { "id": "showDomains", "type": "toggle", "label": "Show source domains", "default": true } ]

Templates (JSON object keyed by format) { "html": "<details class=\"sp\" style=\"--accent:{{accent}};\" {{#unless collapsed}}open{{/unless}}>\n <summary class=\"sp__summary\">Sources (3)</summary>\n <ul class=\"sp__list\">\n <li class=\"sp__item\">\n <span class=\"sp__dot\" aria-hidden=\"true\"></span>\n <span class=\"sp__title\">{{primarySourceTitle}}</span>\n {{#if showDomains}}<span class=\"sp__domain\">internal-reports.example</span>{{/if}}\n </li>\n <li class=\"sp__item\">\n <span class=\"sp__dot\" aria-hidden=\"true\"></span>\n <span class=\"sp__title\">API rate limit changelog</span>\n {{#if showDomains}}<span class=\"sp__domain\">docs.example.com</span>{{/if}}\n </li>\n <li class=\"sp__item\">\n <span class=\"sp__dot\" aria-hidden=\"true\"></span>\n <span class=\"sp__title\">Support ticket #4821</span>\n {{#if showDomains}}<span class=\"sp__domain\">support.example.com</span>{{/if}}\n </li>\n </ul>\n</details>\n<style>\n.sp { font: 14px/1.5 system-ui, sans-serif; max-width: 420px; border: 1.5px solid #24143026; border-radius: 10px;\n padding: 4px 14px; background: #FAF7F2; color: #241430; }\n.sp__summary { cursor: pointer; padding: 10px 0; font-weight: 600; list-style: none; }\n.sp__summary::-webkit-details-marker { display: none; }\n.sp__summary::before { content: \"▸\"; display: inline-block; margin-right: 6px; color: var(--accent); }\n.sp[open] .sp__summary::before { transform: rotate(90deg); }\n@media (prefers-reduced-motion: no-preference) {\n .sp__summary::before { transition: transform .15s ease; }\n}\n.sp__list { list-style: none; margin: 0; padding: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }\n.sp__item { display: flex; align-items: baseline; gap: 8px; }\n.sp__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); align-self: center; }\n.sp__title { flex: 1; min-width: 0; }\n.sp__domain { flex: none; font-size: 12px; color: #24143080; }\n</style>", "tailwind": "<details class=\"sp-tw max-w-md rounded-[10px] border-[1.5px] border-[#24143026] px-3.5 bg-[#FAF7F2] text-[#241430] font-sans\" style=\"--accent:{{accent}};\" {{#unless collapsed}}open{{/unless}}>\n <summary class=\"sp-tw__summary cursor-pointer py-2.5 font-semibold list-none\">Sources (3)</summary>\n <ul class=\"list-none m-0 p-0 pb-2.5 flex flex-col gap-2\">\n <li class=\"flex items-baseline gap-2\">\n <span aria-hidden=\"true\" class=\"flex-none w-1.5 h-1.5 rounded-full self-center\" style=\"background:{{accent}}\"></span>\n <span class=\"flex-1 min-w-0\">{{primarySourceTitle}}</span>\n {{#if showDomains}}<span class=\"flex-none text-xs text-[#241430]/50\">internal-reports.example</span>{{/if}}\n </li>\n <li class=\"flex items-baseline gap-2\">\n <span aria-hidden=\"true\" class=\"flex-none w-1.5 h-1.5 rounded-full self-center\" style=\"background:{{accent}}\"></span>\n <span class=\"flex-1 min-w-0\">API rate limit changelog</span>\n {{#if showDomains}}<span class=\"flex-none text-xs text-[#241430]/50\">docs.example.com</span>{{/if}}\n </li>\n <li class=\"flex items-baseline gap-2\">\n <span aria-hidden=\"true\" class=\"flex-none w-1.5 h-1.5 rounded-full self-center\" style=\"background:{{accent}}\"></span>\n <span class=\"flex-1 min-w-0\">Support ticket #4821</span>\n {{#if showDomains}}<span class=\"flex-none text-xs text-[#241430]/50\">support.example.com</span>{{/if}}\n </li>\n </ul>\n</details>\n<style>\n.sp-tw__summary::-webkit-details-marker { display: none; }\n.sp-tw__summary::before { content: \"▸\"; display: inline-block; margin-right: 6px; color: var(--accent); }\n.sp-tw[open] .sp-tw__summary::before { transform: rotate(90deg); }\n@media (prefers-reduced-motion: no-preference) {\n .sp-tw__summary::before { transition: transform .15s ease; }\n}\n</style>", "react": "export function SourcePanel({\n primarySourceTitle = \"{{primarySourceTitle}}\",\n accent = \"{{accent}}\",\n collapsed = {{collapsed}},\n showDomains = {{showDomains}},\n}) {\n const sources = [\n { title: primarySourceTitle, domain: \"internal-reports.example\" },\n { title: \"API rate limit changelog\", domain: \"docs.example.com\" },\n { title: \"Support ticket #4821\", domain: \"support.example.com\" },\n ];\n return (\n <details open={!collapsed} style={{ maxWidth: 420, border: \"1.5px solid #24143026\", borderRadius: 10,\n padding: \"4px 14px\", background: \"#FAF7F2\", color: \"#241430\", fontFamily: \"system-ui, sans-serif\", fontSize: 14 }}>\n <summary style={{ cursor: \"pointer\", padding: \"10px 0\", fontWeight: 600, listStyle: \"none\" }}>\n Sources (3)\n </summary>\n <ul style={{ listStyle: \"none\", margin: 0, padding: \"0 0 10px\", display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n {sources.map((s) => (\n <li key={s.title} style={{ display: \"flex\", alignItems: \"baseline\", gap: 8 }}>\n <span aria-hidden=\"true\" style={{ flex: \"none\", width: 6, height: 6, borderRadius: \"50%\", background: accent, alignSelf: \"center\" }} />\n <span style={{ flex: 1, minWidth: 0 }}>{s.title}</span>\n {showDomains && <span style={{ flex: \"none\", fontSize: 12, color: \"#24143080\" }}>{s.domain}</span>}\n </li>\n ))}\n </ul>\n </details>\n );\n}" }