@diagrammo/dgmo 0.32.0 → 0.32.1

package/dist/auto.cjs

@@ -63254,7 +63254,7 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
 
 // src/auto/index.ts
 init_safe_href();
-var VERSION = "0.32.0";
+var VERSION = "0.32.1";
 var DEFAULTS = {
   theme: "auto",
   palette: "slate",

package/dist/auto.js

@@ -378,7 +378,7 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
 .dgmo-rendered.dgmo-theme-dark .dgmo-source-pre .dgmo-tok-comment,
 .dgmo-rendered.dgmo-theme-dark .dgmo-source-pre .dgmo-tok-noteContent,
 .dgmo-rendered.dgmo-theme-dark .dgmo-source-pre .dgmo-tok-punctuation { color: #616e88; }
-`;Mx();var OU="0.32.0",rKt={theme:"auto",palette:"slate",showSource:!0,showEditorLink:!0},mR={...rKt},G_=new Set,nKt="https://online.diagrammo.app",oKt=8192,Sxt=256*1024,iKt=200,aKt=1200,sKt="[dgmo:auto]",lKt=/[\x00-\x1F‪-‮⁦-⁩]/g,DU="dgmoAutoStyles";function Sa(...t){typeof console<"u"&&console.warn&&console.warn(sKt,...t)}function Ext(t){return typeof t=="object"&&t!==null&&!Array.isArray(t)}function cKt(t){t.querySelectorAll("script, foreignObject").forEach(n=>n.remove());let r=[t,...Array.from(t.querySelectorAll("*"))];for(let n of r){for(let o of Array.from(n.attributes))o.name.toLowerCase().startsWith("on")&&n.removeAttribute(o.name);if(n.hasAttribute("href")&&au(n.getAttribute("href"))===null&&n.removeAttribute("href"),n.hasAttributeNS("http://www.w3.org/1999/xlink","href")){let o=n.getAttributeNS("http://www.w3.org/1999/xlink","href");au(o)===null&&n.removeAttributeNS("http://www.w3.org/1999/xlink","href")}}}function Txt(t){try{return oE().some(e=>e.id===t)}catch{return!1}}function Cxt(){if(typeof document>"u")return null;let t=document.currentScript;if(t&&t instanceof HTMLScriptElement)return t;let e=document.querySelectorAll('script[src*="auto.js"], script[src*="auto.min.js"]');return e.length===0?null:e[e.length-1]}var uKt=["theme","palette","showSource","showEditorLink"],Lxt=["__proto__","constructor","prototype"],dKt=["auto","light","dark","transparent"];function Mxt(t){return typeof t=="string"&&dKt.includes(t)}function Axt(t){if(!t)return{};let e;try{e=JSON.parse(t)}catch(n){return Sa("data-config: invalid JSON",n),{}}if(!Ext(e))return Sa("data-config: not an object"),{};for(let n of Lxt)if(Object.prototype.hasOwnProperty.call(e,n))return Sa("data-config: rejected (prototype-pollution key:",n,")"),{};let r={};for(let[n,o]of Object.entries(e)){if(!uKt.includes(n)){Sa("data-config: dropping unknown key",n);continue}if(n==="theme"){if(!Mxt(o)){Sa("data-config: rejected theme",o);continue}r.theme=o}else if(n==="palette"){if(typeof o!="string"||!Txt(o)){Sa("data-config: rejected palette",o);continue}r.palette=o}else if(n==="showSource"){if(typeof o!="boolean"){Sa("data-config: rejected showSource",o);continue}r.showSource=o}else if(n==="showEditorLink"){if(typeof o!="boolean"){Sa("data-config: rejected showEditorLink",o);continue}r.showEditorLink=o}}return r}function Nxt(t=document){let e=t.querySelectorAll(".dgmo:not([data-dgmo-processed]), .language-dgmo:not([data-dgmo-processed])");return Array.from(e).filter(r=>!r.closest(".dgmo-rendered"))}function kxt(t){if(t==="light"||t==="dark"||t==="transparent")return t;if(typeof document>"u")return"light";let e=document.documentElement,r=e.getAttribute("data-theme");return r==="dark"?"dark":r==="light"?"light":e.classList.contains("dark")?"dark":e.classList.contains("light")?"light":typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function Rxt(){if(typeof document>"u")return;let t=document.documentElement;if(t?.dataset?.[DU]==="1")return;if(document.querySelector('link[rel="stylesheet"][href*="auto.css"]')){t&&t.dataset&&(t.dataset[DU]="1");return}let r=document.createElement("style");r.setAttribute("data-dgmo-auto",""),r.textContent=wxt,document.head.appendChild(r),t&&t.dataset&&(t.dataset[DU]="1")}function fKt(t){let e=document.createDocumentFragment(),r;try{r=xxt(t)}catch{return e.appendChild(document.createTextNode(t)),e}for(let n of r){if(!n.text)continue;let o=document.createElement("span");o.className=`dgmo-tok-${n.role}`,o.textContent=n.text,e.appendChild(o)}return e}var Ixt='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 5.5V3a1.5 1.5 0 0 0-1.5-1.5H3A1.5 1.5 0 0 0 1.5 3v6A1.5 1.5 0 0 0 3 10.5h2.5"/></svg>',pKt='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 8.5 6.5 12 13 4.5"/></svg>',hKt='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 2h5v5"/><path d="M14 2L7 9"/><path d="M13 9v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4"/></svg>';function gR(t,e){t.innerHTML=e}function mKt(t,e,r){let n=document.createElement("div");n.className="dgmo-source-panel";let o=document.createElement("button");o.type="button",o.className="dgmo-source-toggle",o.setAttribute("aria-expanded","false");let i=document.createElement("span");i.className="dgmo-chevron",i.setAttribute("aria-hidden","true"),i.textContent="\u25B8",o.appendChild(i);let a=document.createElement("span");a.textContent="DGMO source",o.appendChild(a);let s=document.createElement("div");s.className="dgmo-source-body";let l=document.createElement("pre");l.className="dgmo-source-pre",l.appendChild(fKt(t)),s.appendChild(l);let c=document.createElement("div");c.className="dgmo-source-actions";let u=document.createElement("button");if(u.type="button",u.className="dgmo-btn dgmo-btn-copy",u.setAttribute("aria-label","Copy DGMO source"),u.title="Copy source",gR(u,Ixt),u.addEventListener("click",()=>{gKt(t,u)}),c.appendChild(u),r){let d=document.createElement("a");d.className="dgmo-btn dgmo-btn-editor",d.target="_blank",d.rel="noopener noreferrer",d.setAttribute("aria-label","Open in editor"),gR(d,hKt),e?(d.href=e,d.title="Open in editor"):(d.setAttribute("aria-disabled","true"),d.title="Diagram too large for share link; copy source and paste into editor",d.addEventListener("click",f=>f.preventDefault())),c.appendChild(d)}return s.appendChild(c),n.appendChild(o),n.appendChild(s),o.addEventListener("click",()=>{let d=s.classList.toggle("dgmo-open");o.setAttribute("aria-expanded",d?"true":"false")}),n}async function gKt(t,e){let r=!1;try{navigator?.clipboard?.writeText&&(await navigator.clipboard.writeText(t),r=!0)}catch{}if(!r&&typeof document<"u")try{let n=document.createElement("textarea");n.value=t,n.setAttribute("readonly",""),n.style.position="absolute",n.style.left="-9999px",document.body.appendChild(n),n.select(),r=document.execCommand("copy"),document.body.removeChild(n)}catch{r=!1}r?(gR(e,pKt),e.classList.add("dgmo-btn-copied"),setTimeout(()=>{gR(e,Ixt),e.classList.remove("dgmo-btn-copied")},aKt)):Sa("clipboard write failed")}function O_(t){let e=document.createElement("div");e.className="dgmo-error-banner",e.setAttribute("role","alert");let r=document.createElement("div");if(r.className="dgmo-error-banner-title",r.textContent=`${t.severity??"error"}: ${t.message}`,e.appendChild(r),t.line!==void 0&&t.line>0){let n=document.createElement("div");n.className="dgmo-error-banner-loc",n.textContent=t.column!==void 0?`at ${t.line}:${t.column}`:`at line ${t.line}`,e.appendChild(n)}return e}function yKt(t){let e=t.split(`
+`;Mx();var OU="0.32.1",rKt={theme:"auto",palette:"slate",showSource:!0,showEditorLink:!0},mR={...rKt},G_=new Set,nKt="https://online.diagrammo.app",oKt=8192,Sxt=256*1024,iKt=200,aKt=1200,sKt="[dgmo:auto]",lKt=/[\x00-\x1F‪-‮⁦-⁩]/g,DU="dgmoAutoStyles";function Sa(...t){typeof console<"u"&&console.warn&&console.warn(sKt,...t)}function Ext(t){return typeof t=="object"&&t!==null&&!Array.isArray(t)}function cKt(t){t.querySelectorAll("script, foreignObject").forEach(n=>n.remove());let r=[t,...Array.from(t.querySelectorAll("*"))];for(let n of r){for(let o of Array.from(n.attributes))o.name.toLowerCase().startsWith("on")&&n.removeAttribute(o.name);if(n.hasAttribute("href")&&au(n.getAttribute("href"))===null&&n.removeAttribute("href"),n.hasAttributeNS("http://www.w3.org/1999/xlink","href")){let o=n.getAttributeNS("http://www.w3.org/1999/xlink","href");au(o)===null&&n.removeAttributeNS("http://www.w3.org/1999/xlink","href")}}}function Txt(t){try{return oE().some(e=>e.id===t)}catch{return!1}}function Cxt(){if(typeof document>"u")return null;let t=document.currentScript;if(t&&t instanceof HTMLScriptElement)return t;let e=document.querySelectorAll('script[src*="auto.js"], script[src*="auto.min.js"]');return e.length===0?null:e[e.length-1]}var uKt=["theme","palette","showSource","showEditorLink"],Lxt=["__proto__","constructor","prototype"],dKt=["auto","light","dark","transparent"];function Mxt(t){return typeof t=="string"&&dKt.includes(t)}function Axt(t){if(!t)return{};let e;try{e=JSON.parse(t)}catch(n){return Sa("data-config: invalid JSON",n),{}}if(!Ext(e))return Sa("data-config: not an object"),{};for(let n of Lxt)if(Object.prototype.hasOwnProperty.call(e,n))return Sa("data-config: rejected (prototype-pollution key:",n,")"),{};let r={};for(let[n,o]of Object.entries(e)){if(!uKt.includes(n)){Sa("data-config: dropping unknown key",n);continue}if(n==="theme"){if(!Mxt(o)){Sa("data-config: rejected theme",o);continue}r.theme=o}else if(n==="palette"){if(typeof o!="string"||!Txt(o)){Sa("data-config: rejected palette",o);continue}r.palette=o}else if(n==="showSource"){if(typeof o!="boolean"){Sa("data-config: rejected showSource",o);continue}r.showSource=o}else if(n==="showEditorLink"){if(typeof o!="boolean"){Sa("data-config: rejected showEditorLink",o);continue}r.showEditorLink=o}}return r}function Nxt(t=document){let e=t.querySelectorAll(".dgmo:not([data-dgmo-processed]), .language-dgmo:not([data-dgmo-processed])");return Array.from(e).filter(r=>!r.closest(".dgmo-rendered"))}function kxt(t){if(t==="light"||t==="dark"||t==="transparent")return t;if(typeof document>"u")return"light";let e=document.documentElement,r=e.getAttribute("data-theme");return r==="dark"?"dark":r==="light"?"light":e.classList.contains("dark")?"dark":e.classList.contains("light")?"light":typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function Rxt(){if(typeof document>"u")return;let t=document.documentElement;if(t?.dataset?.[DU]==="1")return;if(document.querySelector('link[rel="stylesheet"][href*="auto.css"]')){t&&t.dataset&&(t.dataset[DU]="1");return}let r=document.createElement("style");r.setAttribute("data-dgmo-auto",""),r.textContent=wxt,document.head.appendChild(r),t&&t.dataset&&(t.dataset[DU]="1")}function fKt(t){let e=document.createDocumentFragment(),r;try{r=xxt(t)}catch{return e.appendChild(document.createTextNode(t)),e}for(let n of r){if(!n.text)continue;let o=document.createElement("span");o.className=`dgmo-tok-${n.role}`,o.textContent=n.text,e.appendChild(o)}return e}var Ixt='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 5.5V3a1.5 1.5 0 0 0-1.5-1.5H3A1.5 1.5 0 0 0 1.5 3v6A1.5 1.5 0 0 0 3 10.5h2.5"/></svg>',pKt='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 8.5 6.5 12 13 4.5"/></svg>',hKt='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 2h5v5"/><path d="M14 2L7 9"/><path d="M13 9v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4"/></svg>';function gR(t,e){t.innerHTML=e}function mKt(t,e,r){let n=document.createElement("div");n.className="dgmo-source-panel";let o=document.createElement("button");o.type="button",o.className="dgmo-source-toggle",o.setAttribute("aria-expanded","false");let i=document.createElement("span");i.className="dgmo-chevron",i.setAttribute("aria-hidden","true"),i.textContent="\u25B8",o.appendChild(i);let a=document.createElement("span");a.textContent="DGMO source",o.appendChild(a);let s=document.createElement("div");s.className="dgmo-source-body";let l=document.createElement("pre");l.className="dgmo-source-pre",l.appendChild(fKt(t)),s.appendChild(l);let c=document.createElement("div");c.className="dgmo-source-actions";let u=document.createElement("button");if(u.type="button",u.className="dgmo-btn dgmo-btn-copy",u.setAttribute("aria-label","Copy DGMO source"),u.title="Copy source",gR(u,Ixt),u.addEventListener("click",()=>{gKt(t,u)}),c.appendChild(u),r){let d=document.createElement("a");d.className="dgmo-btn dgmo-btn-editor",d.target="_blank",d.rel="noopener noreferrer",d.setAttribute("aria-label","Open in editor"),gR(d,hKt),e?(d.href=e,d.title="Open in editor"):(d.setAttribute("aria-disabled","true"),d.title="Diagram too large for share link; copy source and paste into editor",d.addEventListener("click",f=>f.preventDefault())),c.appendChild(d)}return s.appendChild(c),n.appendChild(o),n.appendChild(s),o.addEventListener("click",()=>{let d=s.classList.toggle("dgmo-open");o.setAttribute("aria-expanded",d?"true":"false")}),n}async function gKt(t,e){let r=!1;try{navigator?.clipboard?.writeText&&(await navigator.clipboard.writeText(t),r=!0)}catch{}if(!r&&typeof document<"u")try{let n=document.createElement("textarea");n.value=t,n.setAttribute("readonly",""),n.style.position="absolute",n.style.left="-9999px",document.body.appendChild(n),n.select(),r=document.execCommand("copy"),document.body.removeChild(n)}catch{r=!1}r?(gR(e,pKt),e.classList.add("dgmo-btn-copied"),setTimeout(()=>{gR(e,Ixt),e.classList.remove("dgmo-btn-copied")},aKt)):Sa("clipboard write failed")}function O_(t){let e=document.createElement("div");e.className="dgmo-error-banner",e.setAttribute("role","alert");let r=document.createElement("div");if(r.className="dgmo-error-banner-title",r.textContent=`${t.severity??"error"}: ${t.message}`,e.appendChild(r),t.line!==void 0&&t.line>0){let n=document.createElement("div");n.className="dgmo-error-banner-loc",n.textContent=t.column!==void 0?`at ${t.line}:${t.column}`:`at line ${t.line}`,e.appendChild(n)}return e}function yKt(t){let e=t.split(`
 `).map(r=>r.trim()).find(r=>r.length>0);return e?e.replace(lKt,"").slice(0,iKt):"DGMO diagram"}function vKt(t){if(t.tagName==="CODE"){let e=t.parentElement;if(e?.tagName==="PRE"){let r=Array.from(e.childNodes).filter(n=>n.nodeType===1||n.nodeType===3&&(n.textContent||"").trim().length>0);if(r.length===1&&r[0]===t)return e}}return t}async function Dxt(t){if(!(t instanceof HTMLElement))return{};if(t.dataset.dgmoProcessed==="true")return{};t.dataset.dgmoProcessed="true";let e=t.textContent||"";if(new TextEncoder().encode(e).byteLength>Sxt){t.style.visibility="";let y=O_({message:`DGMO source too large to render \u2014 ${Sxt/1024} KB max`,severity:"error"});return t.parentElement?.insertBefore(y,t),Sa("source exceeds 256 KB cap"),{}}let n=mR,o=n.theme==="transparent"?"transparent":kxt(n.theme),i=o==="transparent"?"transparent":o,a=yKt(e),s=t.dataset.showSource,l=n.showSource;s==="true"?l=!0:s==="false"?l=!1:s!==void 0&&Sa("data-show-source: invalid value",s,'\u2014 expected "true" or "false"');let c;try{c=await Qbt(e,{theme:i,palette:n.palette})}catch(y){t.style.visibility="";let v=y instanceof Error?y.message:"Render failed unexpectedly",b=O_({message:v,severity:"error"});return t.parentElement?.insertBefore(b,t),Sa("render() rejected:",y),{}}if(c.diagnostics&&c.diagnostics.length>0){t.style.visibility="";let y=c.diagnostics[0],v=O_({message:y.message,severity:y.severity,line:y.line,...y.column!==void 0&&{column:y.column}});return t.parentElement?.insertBefore(v,t),Sa("diagnostic:",y.message,y.line,y.column),{}}if(!c.svg){t.style.visibility="";let y=O_({message:"Empty SVG returned from renderer",severity:"error"});return t.parentElement?.insertBefore(y,t),{}}let u=document.createElement("div"),d=o==="dark"?"dgmo-theme-dark":o==="transparent"?"dgmo-theme-transparent":"dgmo-theme-light";u.className=`dgmo-rendered ${d}`,u.dataset.dgmoProcessed="true";let f=document.createElement("div");f.innerHTML=c.svg;let p=f.querySelector("svg");if(!p){t.style.visibility="";let y=O_({message:"Empty SVG returned from renderer",severity:"error"});return t.parentElement?.insertBefore(y,t),{}}if(cKt(p),p.setAttribute("role","img"),p.setAttribute("aria-label",a),u.appendChild(p),l){let y=null;if(n.showEditorLink){let b=o==="dark"?"dark":"light",x=ext(e,{baseUrl:nKt,palette:n.palette,theme:b});if(x.url){let w=`utm_source=auto-embed&utm_medium=html&utm_campaign=${encodeURIComponent(OU)}`,S=x.url.indexOf("#"),_;if(S===-1){let M=x.url.includes("?")?"&":"?";_=x.url+M+w}else{let M=x.url.slice(0,S),A=x.url.slice(S+1),E=M.includes("?")?"&":"?",L=A.length>0?"&":"";_=M+E+w+"#"+A+L+w}y=_,au(y)||(y=null)}else x.error==="too-large"&&x.compressedSize>oKt&&(y=null)}let v=mKt(e,y,n.showEditorLink);u.appendChild(v)}let m={wrapper:u,source:e,perElementShowSource:s==="true"?!0:s==="false"?!1:null};return G_.add(m),vKt(t).replaceWith(u),{wrapper:u}}function GU(t={}){if(!Ext(t))return;for(let r of Lxt)if(Object.prototype.hasOwnProperty.call(t,r)){Sa("initialize: rejected (prototype-pollution key:",r,")");return}let e={...mR};Mxt(t.theme)&&(e.theme=t.theme),typeof t.palette=="string"&&Txt(t.palette)&&(e.palette=t.palette),typeof t.showSource=="boolean"&&(e.showSource=t.showSource),typeof t.showEditorLink=="boolean"&&(e.showEditorLink=t.showEditorLink),mR=e}async function BU(t={}){Rxt();for(let r of Array.from(G_))document.contains(r.wrapper)||G_.delete(r);let e;if(t.nodes){e=("length"in t.nodes&&typeof t.nodes!="string"?Array.from(t.nodes):[]).filter(o=>o instanceof Element&&(o.matches(".dgmo, .language-dgmo")||o.querySelector(".dgmo, .language-dgmo")!==null));let n=[];for(let o of e)o.matches(".dgmo, .language-dgmo")&&n.push(o),o.querySelectorAll(".dgmo:not([data-dgmo-processed]), .language-dgmo:not([data-dgmo-processed])").forEach(a=>n.push(a));e=Array.from(new Set(n)).filter(o=>!o.closest(".dgmo-rendered"))}else e=Nxt();await Promise.all(e.map(r=>Dxt(r).catch(()=>({}))))}function bKt(){if(mR.theme==="auto")for(let t of Array.from(G_)){let e=document.createElement("pre");e.className="dgmo",e.textContent=t.source,t.perElementShowSource!==null&&(e.dataset.showSource=String(t.perElementShowSource)),t.wrapper.replaceWith(e),G_.delete(t),Dxt(e)}}function xKt(){if(typeof window>"u"||!window.matchMedia)return;let t=window.matchMedia("(prefers-color-scheme: dark)"),e=()=>bKt();t.addEventListener?t.addEventListener("change",e):"addListener"in t&&typeof t.addListener=="function"&&t.addListener(e)}function PU(){if(typeof document>"u")return;document.querySelectorAll(".dgmo:not(.dgmo-rendered), .language-dgmo").forEach(e=>{e.closest(".dgmo-rendered")||(e.style.visibility="visible")}),document.documentElement&&document.documentElement.dataset&&(document.documentElement.dataset.dgmoAutoFailed="1")}function wKt(){try{Rxt();let t=Cxt(),e=t?.getAttribute("data-auto"),r=t?.getAttribute("data-config");if(r){let o=Axt(r);GU(o)}if(xKt(),typeof window<"u"&&window.setTimeout(()=>{document.querySelectorAll(".dgmo:not(.dgmo-rendered):not([data-dgmo-processed])").length>0&&(Sa("safety timeout: un-hiding unrendered sources"),PU())},3e4),e==="false")return;let n=()=>{BU().catch(o=>{Sa("run() crashed:",o),PU()})};typeof document<"u"&&document.readyState!=="loading"?n():typeof document<"u"&&document.addEventListener("DOMContentLoaded",n,{once:!0})}catch(t){Sa("bootstrap failed:",t),PU()}}var Pxt=Object.freeze({initialize:GU,run:BU,version:OU});function _xt(t,e){try{Object.defineProperty(t,e,{value:Pxt,writable:!1,configurable:!1,enumerable:!0})}catch{}}typeof window<"u"&&(_xt(window,"dgmo"),_xt(window,"diagrammo"),wKt());var SKt=Pxt;return zU(_Kt);})();
 /*! Bundled license information:
 

package/dist/auto.mjs

@@ -63264,7 +63264,7 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
 
 // src/auto/index.ts
 init_safe_href();
-var VERSION = "0.32.0";
+var VERSION = "0.32.1";
 var DEFAULTS = {
   theme: "auto",
   palette: "slate",

package/docs/language-reference.md

@@ -1328,7 +1328,7 @@ tag Crew as c
 <!-- TYPE:sitemap -->
 
 <!-- TIPS start -->
-**Styling tips:** Connect pages by indenting `-> Target` lines under a parent page (not a top-level `Home -> Products`, which becomes one box), and declare each target as its own page too — bare indentation alone draws no connectors. Default flow is left-to-right; use `direction-tb` for a vertical tree. Keep labels to short page names.
+**Styling tips:** Mirror the real navigation: group child pages under their section and keep the tree shallow (2–3 levels), ordering siblings by prominence. Connect pages with indented `-> Target` lines under each parent (a top-level `Home -> Products` renders as one box) and declare every target as its own page.
 <!-- TIPS end -->
 
 ### 11.1 Declaration
@@ -1541,7 +1541,7 @@ want; anything left un-chained starts together at the parent's start.
 <!-- TYPE:pert -->
 
 <!-- TIPS start -->
-**Styling tips:** Give each task a duration and wire dependencies with `-> next`. Provide a single (most-likely) estimate plus `default-confidence medium` to auto-expand to a 3-point estimate, or give optimistic/likely/pessimistic explicitly. The critical path and slack are computed for you.
+**Styling tips:** Name each task as a short action and wire the real finish-to-start dependencies — branch and merge them so the critical path and per-task slack become meaningful. Give one most-likely estimate per task (the engine derives optimistic/pessimistic), or explicit O/M/P when you know them.
 <!-- TIPS end -->
 
 PERT diagrams visualize project networks with three-point duration estimates, surfacing critical path, slack, and project μ/σ. Each activity renders as a node card (rectangle, or diamond for milestones); dependencies are arrows between them. Monte Carlo simulation runs automatically whenever any activity carries duration data.
@@ -1707,7 +1707,7 @@ See spec §13A for full date-anchoring semantics, S-curve axes, and diagnostic c
 <!-- TYPE:boxes-and-lines -->
 
 <!-- TIPS start -->
-**Styling tips:** Write each connection as `Source -> Target` on its own line; boxes are auto-created from the labels. Group related boxes with a `[Group]` bracket and indent its members. Keep every box label a short noun phrase.
+**Styling tips:** Show one clear direction of flow; group related boxes with a `[Group]` bracket and label each edge with the relationship rather than a bare arrow. Keep every box a short noun phrase.
 <!-- TIPS end -->
 
 ### 13.1 Declaration
@@ -2085,7 +2085,7 @@ Point names render by default. Use `no-name` to hide them.
 <!-- TYPE:heatmap -->
 
 <!-- TIPS start -->
-**Styling tips:** Declare the column headers in a `columns` block, then one row per item with space-separated numeric values (`Dana 5 2 4 3 2`). The values drive the color scale, so keep them on a consistent range.
+**Styling tips:** Sort rows and columns by their totals (not alphabetically) so the strongest cells gather in one corner and the high-to-low pattern reads at a glance; keep every cell on the same numeric scale so the colors stay comparable.
 <!-- TIPS end -->
 
 **Columns** — follows §15 Rule B (prefer the indented block for multiple columns):
@@ -2110,7 +2110,7 @@ RowLabel 5 4 3
 <!-- TYPE:function -->
 
 <!-- TIPS start -->
-**Styling tips:** Set the domain once with `x <min> to <max>`. Give each curve a short plain-text name and put the math after the colon (`Sine blue: sin(x)`); the text before the colon is a label, so prefer a word like `Sine` over repeating the expression.
+**Styling tips:** Pick a domain (`x <min> to <max>`) that frames the interesting behavior and keep to a few curves for legibility. Give each curve a short readable name before the colon (`Sine: sin(x)`), not the expression repeated.
 <!-- TIPS end -->
 
 ```
@@ -2134,7 +2134,7 @@ The colon between name and expression is **required** — both sides can contain
 <!-- TYPE:sankey -->
 
 <!-- TIPS start -->
-**Styling tips:** Write each flow as `Source -> Target value` (space-separated value, no comma). The value sets the band width; flow reads left-to-right, so order sources upstream of targets.
+**Styling tips:** Feed flows in process order (left to right) and let each connection’s value set its band width — the layout already orders nodes to reduce crossings. Fold flows into one "Other" band only when many are individually negligible; never rename a single meaningful node.
 <!-- TIPS end -->
 
 **Tree structure (indented, space-separated):**
@@ -2159,7 +2159,7 @@ Source -- Target 2000
 <!-- TYPE:chord -->
 
 <!-- TIPS start -->
-**Styling tips:** Write each connection as `Source -> Target value` (or `--` for undirected). Every node becomes an arc on the circle and each value sets the ribbon thickness — good for dense many-to-many relationships.
+**Styling tips:** Chord shines for genuinely reciprocal, many-to-many relationships; if your flows are mostly one-directional or hub-and-spoke, a sankey reads clearer. List heavily-connected nodes consecutively — arcs follow first-appearance order, so this keeps the thickest ribbons short.
 <!-- TIPS end -->
 
 ```
@@ -2194,7 +2194,7 @@ Purchases 200
 <!-- TYPE:slope -->
 
 <!-- TIPS start -->
-**Styling tips:** Declare exactly two periods with `period <A> <B>`, then one line per item as `Label <from> <to>`. Slope charts compare two points in time only — use a line/bar chart for more periods.
+**Styling tips:** Slope auto-labels both endpoints and colors each line — recolor only when one line is the story, then color just that mover and leave the rest to the default palette. It compares exactly two periods; use a line chart for more.
 <!-- TIPS end -->
 
 ```
@@ -2222,7 +2222,7 @@ Roberts 12 52
 <!-- TYPE:wordcloud -->
 
 <!-- TIPS start -->
-**Styling tips:** One `term weight` per line (`TypeScript 95`); the weight drives font size, so spread weights across a wide range for visual contrast. Keep terms to single words or short phrases.
+**Styling tips:** Make the largest and smallest terms differ enough in size to read at a glance — set an explicit `size <min> <max>` when raw weights are bunched together. Keep to the signal terms: cap the list (~30–40) and drop filler words.
 <!-- TIPS end -->
 
 ```
@@ -2243,7 +2243,7 @@ navigation 88
 <!-- TYPE:arc -->
 
 <!-- TIPS start -->
-**Styling tips:** Write each link as `Source -> Target value`; nodes sit on a single axis and arcs are sized by value. Order nodes so the busiest connections form short arcs where possible.
+**Styling tips:** Set `order appearance` and list links so the busiest pairs sit next to each other — heavy connections then read as short arcs hugging the axis instead of long sweeps (otherwise placement is automatic and row order is ignored).
 <!-- TIPS end -->
 
 ```
@@ -2264,7 +2264,7 @@ order group
 <!-- TYPE:venn -->
 
 <!-- TIPS start -->
-**Styling tips:** Declare each set as `Name as <alias> <color>`, then intersections as `<alias> + <alias> <count>` (and a triple `a + b + c <count>`). Note: all circles render the same size — overlap labels, not circle area, convey the numbers.
+**Styling tips:** Use 2–3 sets and write the count of each meaningful overlap directly on its intersection; circle area is NOT proportional, so the numbers — not the sizes — carry the comparison.
 <!-- TIPS end -->
 
 ```
@@ -2287,7 +2287,7 @@ sw + nav + lead Legendary Pirates
 <!-- TYPE:quadrant -->
 
 <!-- TIPS start -->
-**Styling tips:** Plot points as `Label x y` (space-separated, no comma between x and y). Normalize raw metrics to a 0–1 range yourself — axes are not auto-scaled. Name the four regions with `top-left`/`top-right`/`bottom-left`/`bottom-right` + a color so each quadrant reads as a category.
+**Styling tips:** Name the four quadrants as meaningful categories (not just positions) and call out the outliers; normalize values to 0–1 so the points spread across the whole space.
 <!-- TIPS end -->
 
 ```
@@ -2447,7 +2447,7 @@ Universal options (`palette`, `theme`) apply as elsewhere.
 <!-- TYPE:wireframe -->
 
 <!-- TIPS start -->
-**Styling tips:** There is no link element — render hyperlinks as bare text (`Forgot password?`), NOT `[brackets]` (which is a text INPUT). Use `#`/`##` for headings, `(Label) primary` for the main button, and the `password` flag to mask a field.
+**Styling tips:** Keep it low-fidelity — boxes, labels, and one primary action `(Sign in) primary` per screen, grouped by region. Links are bare text (`Forgot password?`); `[brackets]` is an input field.
 <!-- TIPS end -->
 
 Wireframe diagrams use **visual-mnemonic syntax** where bracket characters communicate element type.
@@ -2585,7 +2585,7 @@ wireframe Login Page
 <!-- TYPE:tech-radar -->
 
 <!-- TIPS start -->
-**Styling tips:** Use exactly four quadrants and place each item in one with `quadrant: <name>`; every blip needs a `ring:`. When the source is a numeric score rather than adopt/trial/assess/hold, bucket the scores into rings yourself and note the raw value in the blip description.
+**Styling tips:** Group blips into the four domain quadrants and let the rings carry adoption stage (Adopt→Hold); annotate movement with a `trend`. When the source is a numeric score, bucket it into a ring and keep the number in the description.
 <!-- TIPS end -->
 
 ```
@@ -2657,7 +2657,7 @@ Blips receive sequential global numbers. Order: quadrants clockwise (top-left
 <!-- TYPE:cycle -->
 
 <!-- TIPS start -->
-**Styling tips:** List the stages in order — the renderer closes the loop back to the first automatically, so do not add a wrap-around edge. An indented line under a stage becomes its description.
+**Styling tips:** Aim for 3–6 stages so the loop stays legible; name each as a short step and let the closed ring imply repetition (no wrap-around edge needed). An indented line adds a description.
 <!-- TIPS end -->
 
 Circular process flows where nodes sit on a ring and directed edges connect each to the next, wrapping from last back to first. Common use: OODA loops, PDCA, product lifecycles, continuous improvement.
@@ -2794,7 +2794,7 @@ Act red
 <!-- TYPE:journey-map -->
 
 <!-- TIPS start -->
-**Styling tips:** Write each stage as `Stage score: <1-5>` with an indented `description:` for the action; add `persona <name>` once at the top. The scores draw the emotion curve, so vary them to show highs and lows.
+**Styling tips:** Label a single-word `emotion:` on each step so the highs and lows are named, not just shaped; give one concrete action per stage and name the persona. Mark the trough with `pain:` and the peak with `opportunity:` so the arc’s meaning lands.
 <!-- TIPS end -->
 
 Persona-centric mood landscapes. Steps carry a 1–5 score and optional emotion label; the renderer draws an emotion curve over phase-grouped step cards. **Declaration is required** — the `journey-map` keyword must appear on the first line (no inference, to avoid colliding with kanban's `[Column]` + indented items shape).
@@ -2923,7 +2923,7 @@ Got resolution score: 5, emotion: Relieved
 <!-- TYPE:pyramid -->
 
 <!-- TIPS start -->
-**Styling tips:** Source order is apex-first (first line = top). For a funnel-shaped dataset, list the smallest stage first so the widest tier lands at the base. Bands are uniform height (not value-proportional) — put counts in an indented description.
+**Styling tips:** Keep to a few tiers (3–5), widest at the base, and label each tier with its value — bands are uniform height, so the number carries the magnitude. For a funnel-shaped dataset, list the smallest stage first.
 <!-- TIPS end -->
 
 Hierarchical pyramid visualization with stacked layers, descriptions, and optional per-layer color. Source order reads apex-first (top of file = top of pyramid).
@@ -2990,7 +2990,7 @@ When descriptions don't fit a layer's band the renderer wraps at the column edge
 <!-- TYPE:ring -->
 
 <!-- TIPS start -->
-**Styling tips:** Source order is innermost→outermost (first line = center disc). Bands are uniform thickness, not value-proportional; put the value in an indented description line. For a true part-of-whole proportion use pie or funnel instead.
+**Styling tips:** Order rings core→outward by hierarchy, not by size — band thickness is uniform and carries no proportional meaning (use pie/funnel for part-of-whole). Keep any value you want read at a glance in the ring’s own label.
 <!-- TIPS end -->
 
 Concentric-ring visualization for nested or hierarchical categories. Source order reads core-out: top of file = innermost element (rendered as a filled disc), last line = outermost ring. Min 2 layers, max 15.
@@ -3063,7 +3063,7 @@ When ring band thickness would force the in-band label below the readable floor
 <!-- TYPE:raci -->
 
 <!-- TIPS start -->
-**Styling tips:** Put each task at indent-0 and its role cells one level in (`Role: A`/`R`/`C`/`I`); declare the roles with a top-level `roles <A>, <B>, ...` line. Give every task exactly one A and one R to avoid lint warnings. A `[Phase]` header is optional — only use the indented `roles` block form when a `[Phase]` header follows.
+**Styling tips:** Put each task at indent-0 with its `Role: A/R/C/I` cells indented one level under it — never nest tasks inside the `roles` block (it swallows them). Give every task exactly one Accountable (ideally one Responsible) and keep roles small (≤~6) so the matrix stays scannable.
 <!-- TIPS end -->
 
 A tasks × roles responsibility matrix with author-time linting. **One chart type — `raci` — covers all three variants.** Variant is inferred from the markers used; an optional `variant-*` directive locks it explicitly.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.32.0",
+  "version": "0.32.1",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "repository": {