pmx-canvas 0.7.3 → 0.8.0

package/dist/canvas/mermaid-entry.js

@@ -3560,4 +3560,4 @@ Expecting `+ve.join(", ")+", got '"+(this.terminals_[U]||U)+"'";else Pe="Parse e
   ${m7t}
 </iframe>`},"putIntoIFrame"),dDe=v((e,t,r,n,i)=>{let a=e.append("div");if(a.attr("id",r),n)a.attr("style",n);let s=a.append("svg").attr("id",t).attr("width","100%").attr("xmlns",l7t);if(i)s.attr("xmlns:xlink",i);return s.append("g"),e},"appendDivSvgG");function IX(e,t){return e.append("iframe").attr("id",t).attr("style","width: 100%; height: 100%;").attr("sandbox","")}v(IX,"sandboxedIframe");var k7t=v((e,t,r,n)=>{e.getElementById(t)?.remove(),e.getElementById(r)?.remove(),e.getElementById(n)?.remove()},"removeExistingElements"),S7t=v(async function(e,t,r){hL();let n=DX(t);t=n.code;let i=Mt();if(ne.debug(i),t.length>(i?.maxTextSize??i7t))t=a7t;let a=`#${e}`,s="i"+e,o="#"+s,l="d"+e,u="#"+l,h=v(()=>{let _=nt(f?o:u).node();if(_&&"remove"in _)_.remove()},"removeTempElements"),d=nt(document.body),f=i.securityLevel===s7t,p=i.securityLevel===o7t,g=i.fontFamily;if(r!==void 0){if(r)r.innerHTML="";if(f){let R=IX(nt(r),s);d=nt(R.nodes()[0].contentDocument.body),d.node().style.margin="0"}else d=nt(r);dDe(d,e,l,`font-family: ${g}`,c7t)}else{if(k7t(document,e,l,s),f){let R=IX(nt(document.body),s);d=nt(R.nodes()[0].contentDocument.body),d.node().style.margin="0"}else d=nt("body");dDe(d,e,l)}let m,y;try{m=await LX.fromText(t,{title:n.title})}catch(R){if(i.suppressErrorRendering)throw h(),R;m=await LX.fromText("error"),y=R}let x=d.select(u).node(),b=m.type,T=x.firstChild,k=T.firstChild,w=m.renderer.getClasses?.(t,m),C=T7t(i,b,w,a),S=document.createElement("style");S.innerHTML=C,T.insertBefore(S,k);try{await m.renderer.draw(t,e,"11.16.1",m)}catch(R){if(i.suppressErrorRendering)h();else I6t.draw(t,e,"11.16.1");throw R}let A=d.select(`${u} svg`),L=m.db.getAccTitle?.(),N=m.db.getAccDescription?.();a9e(b,A,L,N),d.select(`[id="${e}"]`).selectAll("foreignobject > *").attr("xmlns",u7t);let I=d.select(u).node().innerHTML;if(ne.debug("config.arrowMarkerAbsolute",i.arrowMarkerAbsolute),I=w7t(I,f,bl(i.arrowMarkerAbsolute)),f){let R=d.select(u+" svg").node();I=C7t(I,R)}else if(!p)I=io.sanitize(I,{ADD_TAGS:y7t,ADD_ATTR:v7t,HTML_INTEGRATION_POINTS:{foreignobject:!0}});if(JRt(),y)throw y;return h(),{diagramType:b,svg:I,bindFunctions:m.db.bindFunctions}},"render");function n9e(e={}){let t=fi({},e);if(t?.fontFamily&&!t.themeVariables?.fontFamily){if(!t.themeVariables)t.themeVariables={};t.themeVariables.fontFamily=t.fontFamily}if(wZ(t),t?.theme&&t.theme in Qc)t.themeVariables=Qc[t.theme].getThemeVariables(t.themeVariables);else if(t)t.themeVariables=Qc.default.getThemeVariables(t.themeVariables);let r=typeof t==="object"?TZ(t):C8();Ex(r.logLevel),hL()}v(n9e,"initialize");var i9e=v((e,t={})=>{let{code:r}=MX(e);return LX.fromText(r,t)},"getDiagramFromText");function a9e(e,t,r,n){QDe(t,e),JDe(t,r,n,t.attr("id"))}v(a9e,"addA11yInfo");var qm=Object.freeze({render:S7t,parse:r9e,getDiagramFromText:i9e,initialize:n9e,getConfig:Mt,setConfig:k8,getSiteConfig:C8,updateSiteConfig:CZ,reset:v(()=>{Xx()},"reset"),globalReset:v(()=>{Xx(d0)},"globalReset"),defaultConfig:d0});Ex(Mt().logLevel);Xx(Mt());var E7t=v((e,t,r)=>{if(ne.warn(e),jS(e)){if(r)r(e.str,e.hash);t.push({...e,message:e.str,error:e})}else{if(r)r(e);if(e instanceof Error)t.push({str:e.message,message:e.message,hash:e.name,error:e})}},"handleError"),s9e=v(async function(e={querySelector:".mermaid"}){try{await A7t(e)}catch(t){if(jS(t))ne.error(t.str);if(Bd.parseError)Bd.parseError(t);if(!e.suppressErrors)throw ne.error("Use the suppressErrors option to suppress these errors"),t}},"run"),A7t=v(async function({postRenderCallback:e,querySelector:t,nodes:r}={querySelector:".mermaid"}){let n=qm.getConfig();ne.debug(`${!e?"No ":""}Callback function found`);let i;if(r)i=r;else if(t)i=document.querySelectorAll(t);else throw Error("Nodes and querySelector are both undefined");if(ne.debug(`Found ${i.length} diagrams`),n?.startOnLoad!==void 0)ne.debug("Start On Load: "+n?.startOnLoad),qm.updateSiteConfig({startOnLoad:n?.startOnLoad});let a=new Zt.InitIDGenerator(n.deterministicIds,n.deterministicIDSeed),s,o=[];for(let l of Array.from(i)){if(ne.info("Rendering diagram: "+l.id),l.getAttribute("data-processed"))continue;l.setAttribute("data-processed","true");let u=`mermaid-${a.next()}`;s=l.innerHTML,s=iE(Zt.entityDecode(s)).trim().replace(/<br\s*\/?>/gi,"<br/>");let h=Zt.detectInit(s);if(h)ne.debug("Detected early reinit: ",h);try{let{svg:d,bindFunctions:f}=await u9e(u,s,l);if(l.innerHTML=d,e)await e(u);if(f)f(l)}catch(d){E7t(d,o,Bd.parseError)}}if(o.length>0)throw o[0]},"runThrowsErrors"),o9e=v(function(e){qm.initialize(e)},"initialize"),_7t=v(async function(e,t,r){if(ne.warn("mermaid.init is deprecated. Please use run instead."),e)o9e(e);let n={postRenderCallback:r,querySelector:".mermaid"};if(typeof t==="string")n.querySelector=t;else if(t)if(t instanceof HTMLElement)n.nodes=[t];else n.nodes=t;await s9e(n)},"init"),R7t=v(async(e,{lazyLoad:t=!0}={})=>{if(hL(),Zk(...e),t===!1)await ZRt()},"registerExternalDiagrams"),l9e=v(function(){if(Bd.startOnLoad){let{startOnLoad:e}=qm.getConfig();if(e)Bd.run().catch((t)=>ne.error("Mermaid failed to initialize",t))}},"contentLoaded");if(typeof document<"u")window.addEventListener("load",l9e,!1);var L7t=v(function(e){Bd.parseError=e},"setParseErrorHandler"),uL=[],RX=!1,c9e=v(async()=>{if(RX)return;RX=!0;while(uL.length>0){let e=uL.shift();if(e)try{await e()}catch(t){ne.error("Error executing queue",t)}}RX=!1},"executeQueue"),I7t=v(async(e,t)=>new Promise((r,n)=>{let i=v(()=>new Promise((a,s)=>{qm.parse(e,t).then((o)=>{a(o),r(o)},(o)=>{ne.error("Error parsing",o),Bd.parseError?.(o),s(o),n(o)})}),"performCall");uL.push(i),c9e().catch(n)}),"parse"),u9e=v((e,t,r)=>new Promise((n,i)=>{let a=v(()=>new Promise((s,o)=>{qm.render(e,t,r).then((l)=>{s(l),n(l)},(l)=>{ne.error("Error parsing",l),Bd.parseError?.(l),o(l),i(l)})}),"performCall");uL.push(a),c9e().catch(i)}),"render"),M7t=v(()=>Object.keys(Xd).map((e)=>({id:e})),"getRegisteredDiagramsMetadata"),Bd={startOnLoad:!0,mermaidAPI:qm,parse:I7t,render:u9e,init:_7t,run:s9e,registerExternalDiagrams:R7t,registerLayoutLoaders:IF,initialize:o9e,parseError:void 0,contentLoaded:l9e,setParseErrorHandler:L7t,detectType:jx,registerIconPacks:qy,getRegisteredDiagramsMetadata:M7t},NX=Bd;/*! Check if previously processed *//*!
  * Wait for document loaded before starting the execution
- */var D7t=["dark","light","high-contrast","midnight","sepia","arctic","ember","forest","volt"];function N7t(e){return typeof e==="string"&&D7t.includes(e)}function O7t(e,t="dark"){return N7t(e)?e:t}var P7t={dark:{label:"Dark",scheme:"dark",swatchBg:"#081524",swatchAccent:"#4BBCFF"},light:{label:"Light",scheme:"light",swatchBg:"#F4EFE6",swatchAccent:"#1A7ABF"},"high-contrast":{label:"High contrast",scheme:"dark",swatchBg:"#000000",swatchAccent:"#00ffff"},midnight:{label:"Midnight",scheme:"dark",swatchBg:"#0A0D1C",swatchAccent:"#8B96FF"},sepia:{label:"Sepia",scheme:"light",swatchBg:"#F2E7D5",swatchAccent:"#B4632C"},arctic:{label:"Arctic",scheme:"dark",swatchBg:"#20242E",swatchAccent:"#7FC8DE"},ember:{label:"Ember",scheme:"dark",swatchBg:"#0B0B0C",swatchAccent:"#F34E1C"},forest:{label:"Forest",scheme:"dark",swatchBg:"#0C1712",swatchAccent:"#5CCF8F"},volt:{label:"Volt",scheme:"dark",swatchBg:"#0B0D0B",swatchAccent:"#DFDFC1"}};function h9e(e){return P7t[O7t(e)].scheme}function OX(){return h9e(document.documentElement.getAttribute("data-theme"))}function g9e(e,t){e.innerHTML="";let r=document.createElement("pre");r.className="mermaid-error",r.style.cssText="margin:12px;padding:12px;border-radius:6px;color:var(--c-dim,#8a93a6);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;white-space:pre-wrap;",r.textContent=t,e.appendChild(r)}var d9e=0;function m9e(e){let t=e.querySelector("svg"),r=t?.viewBox.baseVal;if(!t||!r?.width||!r.height)return;let n=document.querySelector(".mermaid-source"),i=n?.dataset.frameToken,a=!!i&&window.parent!==window,s=a&&n?.dataset.fit!=="none",o=document.documentElement.clientWidth,l=document.documentElement.clientHeight,u=s?Math.min(1,o/r.width,l/r.height):1;if(t.style.maxWidth="none",t.style.width=`${r.width*u}px`,t.style.height=`${r.height*u}px`,t.style.display="block",t.style.margin=s?"0 auto":"0",t.setAttribute("preserveAspectRatio","xMidYMid meet"),a&&i)window.parent.postMessage({source:"pmx-canvas-frame",type:"content-height",token:i,height:r.height*(s?Math.min(1,o/r.width):1)},"*")}async function f9e(e,t){let r=OX();NX.initialize({startOnLoad:!1,theme:r==="dark"?"dark":"default",securityLevel:"strict"}),d9e+=1;try{let{svg:n}=await NX.render(`pmx-mermaid-${d9e}`,e);t.innerHTML=n,m9e(t)}catch(n){g9e(t,n instanceof Error?n.message:String(n))}}function p9e(){let t=document.querySelector(".mermaid-source")?.textContent??"",r=document.createElement("div");if(r.className="mermaid-diagram",document.body.style.margin="0",document.body.style.padding="0",document.body.appendChild(r),window.addEventListener("resize",()=>m9e(r)),!t.trim()){g9e(r,"Empty mermaid diagram");return}f9e(t,r);let n=OX();new MutationObserver(()=>{let a=OX();if(a===n)return;n=a,f9e(t,r)}).observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",p9e);else p9e();
+ */var D7t=["harbor","daylight","high-contrast","midnight","sepia","arctic","ember","forest","volt"];function N7t(e){return typeof e==="string"&&D7t.includes(e)}function O7t(e,t="harbor"){return N7t(e)?e:t}var P7t={harbor:{label:"Harbor",scheme:"dark",swatchBg:"#081524",swatchAccent:"#4BBCFF"},daylight:{label:"Daylight",scheme:"light",swatchBg:"#F6F7F9",swatchAccent:"#1A7ABF"},"high-contrast":{label:"High contrast",scheme:"dark",swatchBg:"#000000",swatchAccent:"#00ffff"},midnight:{label:"Midnight",scheme:"dark",swatchBg:"#0A0D1C",swatchAccent:"#8B96FF"},sepia:{label:"Sepia",scheme:"light",swatchBg:"#F2E7D5",swatchAccent:"#B4632C"},arctic:{label:"Arctic",scheme:"dark",swatchBg:"#20242E",swatchAccent:"#7FC8DE"},ember:{label:"Ember",scheme:"dark",swatchBg:"#0B0B0C",swatchAccent:"#F34E1C"},forest:{label:"Forest",scheme:"dark",swatchBg:"#0C1712",swatchAccent:"#5CCF8F"},volt:{label:"Volt",scheme:"dark",swatchBg:"#0B0D0B",swatchAccent:"#DFDFC1"}};function h9e(e){return P7t[O7t(e)].scheme}function OX(){return h9e(document.documentElement.getAttribute("data-theme"))}function g9e(e,t){e.innerHTML="";let r=document.createElement("pre");r.className="mermaid-error",r.style.cssText="margin:12px;padding:12px;border-radius:6px;color:var(--c-dim,#8a93a6);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;white-space:pre-wrap;",r.textContent=t,e.appendChild(r)}var d9e=0;function m9e(e){let t=e.querySelector("svg"),r=t?.viewBox.baseVal;if(!t||!r?.width||!r.height)return;let n=document.querySelector(".mermaid-source"),i=n?.dataset.frameToken,a=!!i&&window.parent!==window,s=a&&n?.dataset.fit!=="none",o=document.documentElement.clientWidth,l=document.documentElement.clientHeight,u=s?Math.min(1,o/r.width,l/r.height):1;if(t.style.maxWidth="none",t.style.width=`${r.width*u}px`,t.style.height=`${r.height*u}px`,t.style.display="block",t.style.margin=s?"0 auto":"0",t.setAttribute("preserveAspectRatio","xMidYMid meet"),a&&i)window.parent.postMessage({source:"pmx-canvas-frame",type:"content-height",token:i,height:r.height*(s?Math.min(1,o/r.width):1)},"*")}async function f9e(e,t){let r=OX();NX.initialize({startOnLoad:!1,theme:r==="dark"?"dark":"default",securityLevel:"strict"}),d9e+=1;try{let{svg:n}=await NX.render(`pmx-mermaid-${d9e}`,e);t.innerHTML=n,m9e(t)}catch(n){g9e(t,n instanceof Error?n.message:String(n))}}function p9e(){let t=document.querySelector(".mermaid-source")?.textContent??"",r=document.createElement("div");if(r.className="mermaid-diagram",document.body.style.margin="0",document.body.style.padding="0",document.body.appendChild(r),window.addEventListener("resize",()=>m9e(r)),!t.trim()){g9e(r,"Empty mermaid diagram");return}f9e(t,r);let n=OX();new MutationObserver(()=>{let a=OX();if(a===n)return;n=a,f9e(t,r)}).observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",p9e);else p9e();

package/dist/canvas/surface-theme.css

@@ -30,9 +30,18 @@
   --c-accent: #4BBCFF;
   --c-ok: #2fd07f;
   --c-warn: #f4c542;
-  --c-warn-alt: #FFB300;
   --c-danger: #ff6a7f;
-  --c-purple: #b07aff;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #8ea3bd;
 
   /* Common aliases authored HTML might use. */
   --color-bg: #081524;
@@ -49,44 +58,74 @@
   --color-warning: #f4c542;
   --color-danger: #ff6a7f;
 
-  --font: "IBM Plex Sans", "SF Pro Text", "Avenir Next", system-ui, sans-serif;
-  --mono: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
+  --font-ui: "IBM Plex Sans", "SF Pro Text", "Avenir Next", system-ui, sans-serif;
+  --font-code: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
   --font-sans: "IBM Plex Sans", "SF Pro Text", "Avenir Next", system-ui, sans-serif;
   --font-mono: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
+  /* ── Scale (same in every theme; see docs/design.md) ───────── */
+  --fs-meta: 11px;
+  --fs-ui: 12px;
+  --fs-body: 13px;
+  --fs-title: 15px;
+  --fs-heading: 20px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --r-control: 6px;
+  --r-node: 10px;
+  --r-overlay: 14px;
+  --r-pill: 999px;
+  --e-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.24);
+  --e-2: 0 10px 30px rgba(0, 0, 0, 0.6);
 
   color-scheme: dark light;
 }
 
-:root[data-theme="light"] {
-  /* ── Core palette (light · paper + ink) ──────────────────── */
-  --c-bg: #F4EFE6;
-  --c-panel: #EFE7D4;
-  --c-panel-soft: #ECE4D0;
-  --c-line: #D6CBB4;
-  --c-text: #081524;
+:root[data-theme="daylight"] {
+  /* ── Core palette (Daylight · neutral paper + ink) ───────── */
+  --c-bg: #F6F7F9;
+  --c-panel: #FFFFFF;
+  --c-panel-soft: #F2F4F7;
+  --c-line: #DDE2E9;
+  --c-text: #0B1726;
   --c-text-soft: #3d4d63;
-  --c-muted: #5c6b80;
-  --c-dim: #8794a6;
+  --c-muted: #55657a;
+  --c-dim: #6f7d90;
   --c-accent: #1A7ABF;
-  --c-ok: #1a9f55;
-  --c-warn: #c89b2a;
-  --c-warn-alt: #b8860b;
-  --c-danger: #d32f2f;
-  --c-purple: #7c4dff;
+  --c-ok: #1E7F51;
+  --c-warn: #94600A;
+  --c-danger: #B8344A;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #1A7ABF;
+  --c-on-pin: #FFFFFF;
+  --c-agent: #7C4DDB;
+  --c-subagent: #A83BB0;
+  --c-rel-supports: #1E8C80;
+  --c-rel-contradicts: #B8572A;
+  --c-rel-cites: #4257C9;
+  --c-rel-derived: #4A5566;
+  --c-rel-informs: #B03F72;
+  --c-rel-related: #5c6b80;
+  /* Light themes: ink-tinted shadows (the drawn black ones are for dark surfaces). */
+  --e-1: 0 1px 2px rgba(8, 21, 36, 0.1), 0 6px 20px rgba(8, 21, 36, 0.08);
+  --e-2: 0 10px 30px rgba(8, 21, 36, 0.18);
 
-  --color-bg: #F4EFE6;
-  --color-panel: #EFE7D4;
-  --color-surface: #ECE4D0;
-  --color-border: #D6CBB4;
-  --color-text: #081524;
-  --color-text-primary: #081524;
+  --color-bg: #F6F7F9;
+  --color-panel: #FFFFFF;
+  --color-surface: #F2F4F7;
+  --color-border: #DDE2E9;
+  --color-text: #0B1726;
+  --color-text-primary: #0B1726;
   --color-text-secondary: #3d4d63;
-  --color-text-muted: #5c6b80;
-  --color-text-dim: #8794a6;
+  --color-text-muted: #55657a;
+  --color-text-dim: #6f7d90;
   --color-accent: #1A7ABF;
-  --color-success: #1a9f55;
-  --color-warning: #c89b2a;
-  --color-danger: #d32f2f;
+  --color-success: #1E7F51;
+  --color-warning: #94600A;
+  --color-danger: #B8344A;
 }
 
 :root[data-theme="high-contrast"] {
@@ -102,9 +141,18 @@
   --c-accent: #00ffff;
   --c-ok: #00ff00;
   --c-warn: #ffff00;
-  --c-warn-alt: #ffcc00;
   --c-danger: #ff0000;
-  --c-purple: #e040fb;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #00ffff;
+  --c-on-pin: #000000;
+  --c-agent: #e040fb;
+  --c-subagent: #ff99ff;
+  --c-rel-supports: #00e5c0;
+  --c-rel-contradicts: #ff8a00;
+  --c-rel-cites: #8c9eff;
+  --c-rel-derived: #ffffff;
+  --c-rel-informs: #ff80ab;
+  --c-rel-related: #aaaaaa;
 
   --color-bg: #000000;
   --color-panel: #0a0a0a;
@@ -134,9 +182,18 @@
   --c-accent: #8B96FF;
   --c-ok: #34D399;
   --c-warn: #F5C452;
-  --c-warn-alt: #FFB300;
   --c-danger: #FF6B8A;
-  --c-purple: #B388FF;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #8D96BC;
 
   --color-bg: #0A0D1C;
   --color-panel: #12172E;
@@ -165,10 +222,22 @@
   --c-dim: #978870;
   --c-accent: #B4632C;
   --c-ok: #3E7D4F;
-  --c-warn: #A97B1E;
-  --c-warn-alt: #8F6A0D;
+  --c-warn: #8A5A00;
   --c-danger: #B3402E;
-  --c-purple: #8456B0;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #1F6FA8;
+  --c-on-pin: #FFFFFF;
+  --c-agent: #7046A6;
+  --c-subagent: #A83BB0;
+  --c-rel-supports: #1E8C80;
+  --c-rel-contradicts: #A3461C;
+  --c-rel-cites: #3D50B0;
+  --c-rel-derived: #4E4433;
+  --c-rel-informs: #9C3A66;
+  --c-rel-related: #6B6A66;
+  /* Light themes: ink-tinted shadows (the drawn black ones are for dark surfaces). */
+  --e-1: 0 1px 2px rgba(8, 21, 36, 0.1), 0 6px 20px rgba(8, 21, 36, 0.08);
+  --e-2: 0 10px 30px rgba(8, 21, 36, 0.18);
 
   --color-bg: #F2E7D5;
   --color-panel: #EBDCC2;
@@ -181,7 +250,7 @@
   --color-text-dim: #978870;
   --color-accent: #B4632C;
   --color-success: #3E7D4F;
-  --color-warning: #A97B1E;
+  --color-warning: #8A5A00;
   --color-danger: #B3402E;
 }
 
@@ -198,9 +267,18 @@
   --c-accent: #7FC8DE;
   --c-ok: #74C596;
   --c-warn: #E8C476;
-  --c-warn-alt: #E0A93F;
   --c-danger: #D9707C;
-  --c-purple: #B48EAD;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #6EC1F5;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #939DB1;
 
   --color-bg: #20242E;
   --color-panel: #2A2F3C;
@@ -230,9 +308,18 @@
   --c-accent: #F34E1C;
   --c-ok: #4CC38A;
   --c-warn: #F5B944;
-  --c-warn-alt: #FFB300;
   --c-danger: #F0566A;
-  --c-purple: #A78BFA;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #96948D;
 
   --color-bg: #0B0B0C;
   --color-panel: #161618;
@@ -262,9 +349,18 @@
   --c-accent: #5CCF8F;
   --c-ok: #74D99F;
   --c-warn: #E0B84F;
-  --c-warn-alt: #D9A421;
   --c-danger: #E57373;
-  --c-purple: #A88FE0;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #4FC9D9;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #8BA695;
 
   --color-bg: #0C1712;
   --color-panel: #14231B;
@@ -294,9 +390,18 @@
   --c-accent: #DFDFC1;
   --c-ok: #52C880;
   --c-warn: #E4C465;
-  --c-warn-alt: #FFB300;
   --c-danger: #D67670;
-  --c-purple: #BC8FB4;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #9CA49C;
 
   --color-bg: #0B0D0B;
   --color-panel: #171A17;
@@ -319,7 +424,7 @@ body {
   padding: 0;
   background: var(--c-bg);
   color: var(--c-text);
-  font-family: var(--font, system-ui, sans-serif);
+  font-family: var(--font-ui, system-ui, sans-serif);
   font-size: 14px;
   line-height: 1.5;
 }