domma-cms 0.36.1 → 0.36.3

package/admin/js/lib/timeline-builder.js

@@ -1,6 +1,6 @@
-import{openIconPicker as Q}from"./card-builder.js";import{safeSetHTML as X}from"./safe-html.js";function R(e){const t={};for(const[,i,l,o]of e.matchAll(/([\w-]+)=(?:"([^"]*)"|'([^']*)')/g))t[i]=l??o??"";const n=e.replace(/([\w-]+)=(?:"[^"]*"|'[^']*')/g,i=>" ".repeat(i.length));for(const[,i]of n.matchAll(/\b([\w-]+)\b/g))i in t||(t[i]=!0);return t}function h(e){return String(e).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}const Z=new Set(["layout","theme","mode","id","class"]),ee=new Set(["title","date","status","icon"]),te=new Set(["slug","display","layout","theme","mode","title-field","date-field","status-field","icon-field","body-field","limit"]),P=["vertical","centred","horizontal"],M=["minimal","corporate","modern"],ne=["","planned","in-progress","completed","blocked"];let F=null,a=null,C=null,T=null,k=null,$=null,q=0;export const TimelineBuilder={open(e,t={}){if(F)return;C=e,T=t,a=O(),k=null;const n=parseTimelineAtCursor(e.value,e.selectionStart);n.found&&(k=n.range,a=n.state),de()},close(){z()}};function O(){const e=new Date().toISOString().slice(0,10);return{mode:"static",layout:"vertical",theme:"minimal",roadmap:!1,id:"",className:"",extras:{},events:[{title:"First Event",date:e,status:"completed",icon:"",body:"Describe this event.",extras:{}},{title:"Second Event",date:"",status:"planned",icon:"",body:"Describe this event.",extras:{}}],collection:{slug:"",titleField:"",dateField:"",statusField:"",iconField:"",bodyField:"",limit:""}}}export function parseTimelineAtCursor(e,t){let n=null;const i=/\[timeline([^\]]*)\]([\s\S]*?)\[\/timeline\]/gi;for(const s of e.matchAll(i)){const c=s.index,u=c+s[0].length;t>=c&&t<=u&&(!n||u-c<n.range.end-n.range.start)&&(n={kind:"static",range:{start:c,end:u},attrStr:s[1],body:s[2]})}const l=/\[collection([^\]]*?)\/\]/gi;for(const s of e.matchAll(l)){const c=s.index,u=c+s[0].length;if(t<c||t>u)continue;const w=R(s[1]);w.display==="timeline"&&(!n||u-c<n.range.end-n.range.start)&&(n={kind:"collection",range:{start:c,end:u},attrs:w})}if(!n)return{found:!1};if(n.kind==="static"){const s=R(n.attrStr),c={};Object.keys(s).forEach(g=>{!Z.has(g)&&s[g]!==!0&&(c[g]=s[g])});const u=[],w=/\[event([^\]]*)\]([\s\S]*?)\[\/event\]/gi;for(const g of n.body.matchAll(w)){const y=R(g[1]),p={};Object.keys(y).forEach(v=>{!ee.has(v)&&y[v]!==!0&&(p[v]=y[v])}),u.push({title:y.title||"",date:y.date||"",status:y.status||"",icon:y.icon||"",body:g[2].trim(),extras:p})}return{found:!0,range:n.range,state:{mode:"static",layout:P.includes(s.layout)?s.layout:"vertical",theme:M.includes(s.theme)?s.theme:"minimal",roadmap:s.mode==="roadmap",id:s.id||"",className:s.class||"",extras:c,events:u.length?u:O().events,collection:O().collection}}}const o=n.attrs,f={};return Object.keys(o).forEach(s=>{!te.has(s)&&o[s]!==!0&&(f[s]=o[s])}),{found:!0,range:n.range,state:{mode:"collection",layout:P.includes(o.layout)?o.layout:"vertical",theme:M.includes(o.theme)?o.theme:"minimal",roadmap:o.mode==="roadmap",id:"",className:"",extras:f,events:O().events,collection:{slug:o.slug||"",titleField:o["title-field"]||"",dateField:o["date-field"]||"",statusField:o["status-field"]||"",iconField:o["icon-field"]||"",bodyField:o["body-field"]||"",limit:o.limit||""}}}}function U(){return a.mode==="collection"?oe():ie()}function ie(){const e=a,t=[];e.layout!=="vertical"&&t.push(`layout="${h(e.layout)}"`),e.theme!=="minimal"&&t.push(`theme="${h(e.theme)}"`),e.roadmap&&t.push('mode="roadmap"'),e.id&&t.push(`id="${h(e.id)}"`),e.className&&t.push(`class="${h(e.className)}"`),Object.entries(e.extras).forEach(([l,o])=>t.push(`${l}="${h(o)}"`));const n=t.length?" "+t.join(" "):"",i=e.events.map(l=>{const o=[];return l.title&&o.push(`title="${h(l.title)}"`),l.date&&o.push(`date="${h(l.date)}"`),l.status&&o.push(`status="${h(l.status)}"`),l.icon&&o.push(`icon="${h(l.icon)}"`),Object.entries(l.extras||{}).forEach(([s,c])=>o.push(`${s}="${h(c)}"`)),`[event${o.length?" "+o.join(" "):""}]
+import{openIconPicker as Q}from"./card-builder.js";import{safeSetHTML as X}from"./safe-html.js";function R(e){const t={};for(const[,i,l,o]of e.matchAll(/([\w-]+)=(?:"([^"]*)"|'([^']*)')/g))t[i]=l??o??"";const n=e.replace(/([\w-]+)=(?:"[^"]*"|'[^']*')/g,i=>" ".repeat(i.length));for(const[,i]of n.matchAll(/\b([\w-]+)\b/g))i in t||(t[i]=!0);return t}function h(e){return String(e).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}const Z=new Set(["layout","theme","mode","id","class"]),ee=new Set(["title","date","status","icon"]),te=new Set(["slug","display","layout","theme","mode","title-field","date-field","status-field","icon-field","body-field","limit"]),P=["vertical","centred","horizontal"],M=["minimal","corporate","modern"],ne=["","planned","in-progress","completed","blocked"];let k=null,a=null,y=null,F=null,T=null,$=null,q=0;export const TimelineBuilder={open(e,t={}){if(k)return;y=e,F=t,a=O(),T=null;const n=parseTimelineAtCursor(e.value,e.selectionStart);n.found&&(T=n.range,a=n.state),de()},close(){z()}};function O(){const e=new Date().toISOString().slice(0,10);return{mode:"static",layout:"vertical",theme:"minimal",roadmap:!1,id:"",className:"",extras:{},events:[{title:"First Event",date:e,status:"completed",icon:"",body:"Describe this event.",extras:{}},{title:"Second Event",date:"",status:"planned",icon:"",body:"Describe this event.",extras:{}}],collection:{slug:"",titleField:"",dateField:"",statusField:"",iconField:"",bodyField:"",limit:""}}}export function parseTimelineAtCursor(e,t){let n=null;const i=/\[timeline([^\]]*)\]([\s\S]*?)\[\/timeline\]/gi;for(const s of e.matchAll(i)){const c=s.index,u=c+s[0].length;t>=c&&t<=u&&(!n||u-c<n.range.end-n.range.start)&&(n={kind:"static",range:{start:c,end:u},attrStr:s[1],body:s[2]})}const l=/\[collection([^\]]*?)\/\]/gi;for(const s of e.matchAll(l)){const c=s.index,u=c+s[0].length;if(t<c||t>u)continue;const w=R(s[1]);w.display==="timeline"&&(!n||u-c<n.range.end-n.range.start)&&(n={kind:"collection",range:{start:c,end:u},attrs:w})}if(!n)return{found:!1};if(n.kind==="static"){const s=R(n.attrStr),c={};Object.keys(s).forEach(g=>{!Z.has(g)&&s[g]!==!0&&(c[g]=s[g])});const u=[],w=/\[event([^\]]*)\]([\s\S]*?)\[\/event\]/gi;for(const g of n.body.matchAll(w)){const C=R(g[1]),p={};Object.keys(C).forEach(v=>{!ee.has(v)&&C[v]!==!0&&(p[v]=C[v])}),u.push({title:C.title||"",date:C.date||"",status:C.status||"",icon:C.icon||"",body:g[2].trim(),extras:p})}return{found:!0,range:n.range,state:{mode:"static",layout:P.includes(s.layout)?s.layout:"vertical",theme:M.includes(s.theme)?s.theme:"minimal",roadmap:s.mode==="roadmap",id:s.id||"",className:s.class||"",extras:c,events:u.length?u:O().events,collection:O().collection}}}const o=n.attrs,m={};return Object.keys(o).forEach(s=>{!te.has(s)&&o[s]!==!0&&(m[s]=o[s])}),{found:!0,range:n.range,state:{mode:"collection",layout:P.includes(o.layout)?o.layout:"vertical",theme:M.includes(o.theme)?o.theme:"minimal",roadmap:o.mode==="roadmap",id:"",className:"",extras:m,events:O().events,collection:{slug:o.slug||"",titleField:o["title-field"]||"",dateField:o["date-field"]||"",statusField:o["status-field"]||"",iconField:o["icon-field"]||"",bodyField:o["body-field"]||"",limit:o.limit||""}}}}function U(){return a.mode==="collection"?oe():ie()}function ie(){const e=a,t=[];e.layout!=="vertical"&&t.push(`layout="${h(e.layout)}"`),e.theme!=="minimal"&&t.push(`theme="${h(e.theme)}"`),e.roadmap&&t.push('mode="roadmap"'),e.id&&t.push(`id="${h(e.id)}"`),e.className&&t.push(`class="${h(e.className)}"`),Object.entries(e.extras).forEach(([l,o])=>t.push(`${l}="${h(o)}"`));const n=t.length?" "+t.join(" "):"",i=e.events.map(l=>{const o=[];return l.title&&o.push(`title="${h(l.title)}"`),l.date&&o.push(`date="${h(l.date)}"`),l.status&&o.push(`status="${h(l.status)}"`),l.icon&&o.push(`icon="${h(l.icon)}"`),Object.entries(l.extras||{}).forEach(([s,c])=>o.push(`${s}="${h(c)}"`)),`[event${o.length?" "+o.join(" "):""}]
 ${(l.body||"").trim()}
 [/event]`}).join(`
 `);return`[timeline${n}]
 ${i}
-[/timeline]`}function oe(){const e=a,t=e.collection,n=[`slug="${h(t.slug)}"`,'display="timeline"'];return e.layout!=="vertical"&&n.push(`layout="${h(e.layout)}"`),e.theme!=="minimal"&&n.push(`theme="${h(e.theme)}"`),e.roadmap&&n.push('mode="roadmap"'),t.titleField&&n.push(`title-field="${h(t.titleField)}"`),t.dateField&&n.push(`date-field="${h(t.dateField)}"`),t.statusField&&n.push(`status-field="${h(t.statusField)}"`),t.iconField&&n.push(`icon-field="${h(t.iconField)}"`),t.bodyField&&n.push(`body-field="${h(t.bodyField)}"`),t.limit&&n.push(`limit="${h(t.limit)}"`),Object.entries(e.extras).forEach(([i,l])=>n.push(`${i}="${h(l)}"`)),`[collection ${n.join(" ")} /]`}function z(){$&&(clearTimeout($),$=null),F&&(F.remove(),F=null,a=null,k=null)}function le(){const e=U();if(k){const{start:t,end:n}=k;C.value=C.value.slice(0,t)+e+C.value.slice(n),C.selectionStart=C.selectionEnd=t+e.length}else{const t=C.selectionStart,n=C.selectionEnd;C.value=C.value.slice(0,t)+e+C.value.slice(n),C.selectionStart=C.selectionEnd=t+e.length}C.dispatchEvent(new Event("input",{bubbles:!0})),C.focus(),z()}function d(e,t=""){const n=document.createElement(e);return t&&(n.style.cssText=t),n}const L="padding:7px 10px;border-radius:7px;border:1px solid var(--dm-border,#334155);background:var(--dm-surface,#0f172a);color:var(--dm-text,#e2e8f0);font-size:12px;font-family:inherit;width:100%",j="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--dm-text-muted,#475569)";function S(e,t){const n=d("div","display:flex;flex-direction:column;gap:5px"),i=d("div",j);return i.textContent=e,n.appendChild(i),n.appendChild(t),n}function H(){return d("div","height:1px;background:var(--dm-border,#334155);margin:2px 0")}function de(){F=d("div","position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:9999;padding:24px;isolation:isolate");const e=d("div","background:var(--dm-surface,#1e293b);border:1px solid var(--dm-border,#334155);border-radius:14px;width:100%;max-width:960px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.6);overflow:hidden"),t=d("div","display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--dm-border,#334155);flex-shrink:0"),n=d("span","font-weight:700;color:var(--dm-text,#f1f5f9);font-size:14px");n.textContent=k?"Edit Timeline":"Insert Timeline";const i=d("button","background:var(--dm-border,#334155);border:none;color:var(--dm-text-muted,#94a3b8);border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:14px");i.textContent="\u2715",i.addEventListener("click",z),t.appendChild(n),t.appendChild(i);const l=d("div","display:grid;grid-template-columns:340px 1fr;flex:1;overflow:hidden");l.appendChild(ae()),l.appendChild(me());const o=d("div","display:flex;justify-content:flex-end;gap:10px;padding:12px 20px;border-top:1px solid var(--dm-border,#334155);flex-shrink:0"),f=d("button","padding:8px 18px;border-radius:8px;border:none;background:var(--dm-border,#334155);color:var(--dm-text-muted,#94a3b8);font-size:12px;font-weight:700;cursor:pointer");f.textContent="Cancel",f.addEventListener("click",z);const s=d("button","padding:8px 18px;border-radius:8px;border:none;background:#6366f1;color:#fff;font-size:12px;font-weight:700;cursor:pointer");s.textContent=k?"Save Timeline":"Insert Timeline",s.addEventListener("click",le),o.appendChild(f),o.appendChild(s),e.appendChild(t),e.appendChild(l),e.appendChild(o),F.appendChild(e),F.addEventListener("click",c=>{c.target===F&&z()}),document.body.appendChild(F),x()}function ae(){const e=d("div","padding:18px;border-right:1px solid var(--dm-border,#334155);display:flex;flex-direction:column;gap:14px;overflow-y:auto");e.appendChild(re()),e.appendChild(H()),e.appendChild(S("Layout",V("layout",P.map(i=>[i,G(i)])))),e.appendChild(S("Theme",V("theme",M.map(i=>[i,G(i)])))),e.appendChild(S("Mode",se())),e.appendChild(H());const t=d("div","display:flex;flex-direction:column;gap:12px");t.id="tb-static",t.appendChild(ce()),e.appendChild(t);const n=d("div","display:flex;flex-direction:column;gap:12px");return n.id="tb-collection",n.appendChild(fe()),e.appendChild(n),K(),e}function re(){const e=d("div","display:flex;gap:6px"),t=(n,i)=>{const l=d("button"),o=()=>{const f=a.mode===n;l.style.cssText=`flex:1;padding:8px 10px;border-radius:8px;border:1px solid;font-size:12px;font-weight:700;cursor:pointer;${f?"border-color:#6366f1;background:#1e1b4b;color:#a5b4fc":"border-color:var(--dm-border,#334155);background:var(--dm-surface,#0f172a);color:var(--dm-text-muted,#94a3b8)"}`};return l.type="button",l.textContent=i,o(),l.addEventListener("click",()=>{a.mode=n,e.querySelectorAll("button").forEach(f=>f._paint&&f._paint()),K(),x()}),l._paint=o,l};return e.appendChild(t("static","Static")),e.appendChild(t("collection","From Collection")),e}function K(){const e=document.getElementById("tb-static"),t=document.getElementById("tb-collection");e&&(e.style.display=a.mode==="static"?"":"none"),t&&(t.style.display=a.mode==="collection"?"":"none")}function V(e,t){const n=d("select",L+";cursor:pointer");return t.forEach(([i,l])=>{const o=document.createElement("option");o.value=i,o.textContent=l,i===a[e]&&(o.selected=!0),n.appendChild(o)}),n.addEventListener("change",()=>{a[e]=n.value,x()}),n}function se(){const e=d("label","display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:12px;color:var(--dm-text,#e2e8f0)"),t=document.createElement("input");return t.type="checkbox",t.checked=!!a.roadmap,t.addEventListener("change",()=>{a.roadmap=t.checked,x()}),e.appendChild(t),e.appendChild(document.createTextNode("Roadmap mode")),e}function ce(){const e=d("div","display:flex;flex-direction:column;gap:8px"),t=d("div","display:flex;align-items:center;justify-content:space-between"),n=d("div",j);n.textContent="Events";const i=d("button","padding:4px 10px;border-radius:6px;border:1px dashed var(--dm-border,#334155);background:transparent;color:var(--dm-text-muted,#94a3b8);font-size:11px;cursor:pointer");i.type="button",i.textContent="+ Add event",i.addEventListener("click",()=>{a.events.push({title:"New Event",date:"",status:"",icon:"",body:"",extras:{}}),N(),x()}),t.appendChild(n),t.appendChild(i),e.appendChild(t);const l=d("div","display:flex;flex-direction:column;gap:8px");return l.id="tb-events",e.appendChild(l),N(l),e}function N(e){const t=e||document.getElementById("tb-events");if(t){for(;t.firstChild;)t.removeChild(t.firstChild);a.events.forEach((n,i)=>t.appendChild(pe(n,i)))}}function pe(e,t){const n=d("div","border:1px solid var(--dm-border,#334155);border-radius:8px;padding:10px;background:var(--dm-surface-subtle,#0b1120);display:flex;flex-direction:column;gap:8px");n.draggable=!0,n.dataset.idx=String(t);const i=d("div","display:flex;align-items:center;gap:6px"),l=d("span","cursor:grab;color:var(--dm-text-muted,#475569);font-size:14px;user-select:none;padding:0 4px");l.textContent="\u2261",l.title="Drag to reorder",i.appendChild(l);const o=d("div","flex:1;font-size:12px;color:var(--dm-text,#e2e8f0);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis");o.textContent=e.title||"(untitled event)",i.appendChild(o);const f=(r,m,b,E)=>{const _=d("button",`padding:2px 6px;border-radius:5px;border:1px solid var(--dm-border,#334155);background:transparent;color:var(--dm-text-muted,#94a3b8);font-size:11px;cursor:${E?"not-allowed":"pointer"};opacity:${E?"0.4":"1"}`);return _.type="button",_.title=m,_.textContent=r,E||_.addEventListener("click",b),_};i.appendChild(f("\u2191","Move up",()=>Y(t,-1),t===0)),i.appendChild(f("\u2193","Move down",()=>Y(t,1),t===a.events.length-1)),i.appendChild(f("\u2715","Delete",()=>ue(t),a.events.length<=1)),n.appendChild(i);const s=W(e.title,"Event title",r=>{e.title=r,o.textContent=r||"(untitled event)",x()});n.appendChild(A("Title",s));const c=d("div","display:grid;grid-template-columns:1fr 1fr;gap:6px"),u=document.createElement("input");u.type="date",u.value=e.date||"",u.style.cssText=L,u.addEventListener("input",()=>{e.date=u.value,x()}),c.appendChild(A("Date",u));const w=document.createElement("select");w.style.cssText=L+";cursor:pointer",ne.forEach(r=>{const m=document.createElement("option");m.value=r,m.textContent=r===""?"\u2014 none \u2014":G(r),r===e.status&&(m.selected=!0),w.appendChild(m)}),w.addEventListener("change",()=>{e.status=w.value,x()}),c.appendChild(A("Status",w)),n.appendChild(c);const g=d("div","display:flex;gap:6px"),y=W(e.icon,"e.g. rocket",r=>{e.icon=r,x()});y.style.flex="1";const p=d("button","padding:0 10px;background:var(--dm-border,#334155);border:none;color:var(--dm-text-muted,#94a3b8);border-radius:7px;font-size:12px;cursor:pointer;flex-shrink:0");p.type="button",p.title="Browse icons",p.textContent="\u2605",p.addEventListener("click",()=>Q(r=>{e.icon=r,y.value=r,x()})),g.appendChild(y),g.appendChild(p),n.appendChild(A("Icon",g));const v=document.createElement("textarea");return v.value=e.body||"",v.rows=2,v.style.cssText=L+";resize:vertical;min-height:48px;line-height:1.5",v.addEventListener("input",()=>{e.body=v.value,x()}),n.appendChild(A("Body (Markdown)",v)),n.addEventListener("dragstart",r=>{r.dataTransfer.effectAllowed="move",r.dataTransfer.setData("text/plain",String(t)),n.style.opacity="0.5"}),n.addEventListener("dragend",()=>{n.style.opacity=""}),n.addEventListener("dragover",r=>{r.preventDefault(),r.dataTransfer.dropEffect="move",n.style.borderColor="#6366f1"}),n.addEventListener("dragleave",()=>{n.style.borderColor="var(--dm-border,#334155)"}),n.addEventListener("drop",r=>{r.preventDefault(),n.style.borderColor="var(--dm-border,#334155)";const m=parseInt(r.dataTransfer.getData("text/plain"),10);if(Number.isNaN(m)||m===t)return;const[b]=a.events.splice(m,1);a.events.splice(t,0,b),N(),x()}),n}function Y(e,t){const n=e+t;if(n<0||n>=a.events.length)return;const[i]=a.events.splice(e,1);a.events.splice(n,0,i),N(),x()}function ue(e){a.events.length<=1||(a.events.splice(e,1),N(),x())}function W(e,t,n){const i=document.createElement("input");return i.type="text",i.value=e||"",i.placeholder=t||"",i.style.cssText=L,i.addEventListener("input",()=>n(i.value)),i}function A(e,t){const n=d("div","display:flex;flex-direction:column;gap:4px"),i=d("div","font-size:10px;font-weight:600;color:var(--dm-text-muted,#64748b);letter-spacing:.04em");return i.textContent=e,n.appendChild(i),n.appendChild(t),n}function fe(){const e=d("div","display:flex;flex-direction:column;gap:10px"),t=d("select",L+";cursor:pointer"),n=document.createElement("option");n.value="",n.textContent="Loading collections\u2026",t.appendChild(n),e.appendChild(S("Collection",t));const i=B("titleField"),l=B("dateField"),o=B("statusField"),f=B("iconField"),s=B("bodyField");e.appendChild(S("Title field",i));const c=d("div","display:grid;grid-template-columns:1fr 1fr;gap:8px");c.appendChild(S("Date field",l)),c.appendChild(S("Status field",o)),e.appendChild(c),e.appendChild(S("Icon field",f)),e.appendChild(S("Body field",s));const u=W(a.collection.limit,"All",p=>{a.collection.limit=p,x()});u.type="number",u.min="1",e.appendChild(S("Limit (optional)",u));const w=d("div","font-size:11px;color:var(--dm-text-muted,#64748b);line-height:1.4");w.textContent="Picks entries in their default collection order. Set date, status, and icon fields to drive visual cues on the page.",e.appendChild(w);const g=p=>{[i,l,o,f,s].forEach(b=>{for(;b.firstChild;)b.removeChild(b.firstChild);const E=document.createElement("option");E.value="",E.textContent="\u2014 none \u2014",b.appendChild(E),p.forEach(_=>{const D=document.createElement("option");D.value=_.name,D.textContent=_.label||_.name,b.appendChild(D)})});const r=new Set(p.map(b=>b.name)),m=(b,E)=>{a.collection[b]&&r.has(a.collection[b])||(a.collection[b]=r.has(E)?E:"")};m("titleField","title"),m("dateField","date"),m("statusField","status"),m("iconField","icon"),m("bodyField","description"),i.value=a.collection.titleField,l.value=a.collection.dateField,o.value=a.collection.statusField,f.value=a.collection.iconField,s.value=a.collection.bodyField},y=async p=>{if(!p){g([]);return}try{const v=T.onGetCollection?await T.onGetCollection(p):null,r=v&&v.fields||[];g(r)}catch{g([])}};return t.addEventListener("change",()=>{a.collection.slug=t.value,y(t.value).then(x)}),(async()=>{let p=[];try{p=T.onListCollections?await T.onListCollections():[]}catch{p=[]}for(;t.firstChild;)t.removeChild(t.firstChild);if(!p.length){const r=document.createElement("option");r.value="",r.textContent="No collections available",t.appendChild(r),g([]);return}p.forEach(r=>{const m=document.createElement("option");m.value=r.slug,m.textContent=r.title||r.slug,t.appendChild(m)});const v=a.collection.slug;v&&p.some(r=>r.slug===v)?t.value=v:(a.collection.slug=p[0].slug,t.value=p[0].slug),await y(t.value),x()})(),e}function B(e){const t=d("select",L+";cursor:pointer"),n=document.createElement("option");return n.value="",n.textContent="\u2014 none \u2014",t.appendChild(n),t.addEventListener("change",()=>{a.collection[e]=t.value,x()}),t}function me(){const e=d("div","padding:20px;background:var(--dm-surface,#0f172a);display:flex;flex-direction:column;gap:14px;overflow-y:auto"),t=d("div",j);t.textContent="Live Preview";const n=d("div","flex:1;min-height:160px;background:var(--dm-surface-subtle,#fff);border-radius:10px;padding:16px;color:#0f172a");n.id="tb-preview-area";const i=d("div",j+";margin-bottom:4px");i.textContent="Shortcode";const l=d("pre","background:var(--dm-surface-subtle,#1e293b);border:1px solid var(--dm-border,#334155);border-radius:8px;padding:10px 14px;font-family:monospace;font-size:11px;color:var(--dm-primary,#a5b4fc);line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:160px;overflow:auto;margin:0");return l.id="tb-snippet",e.appendChild(t),e.appendChild(n),e.appendChild(i),e.appendChild(l),e}function x(){const e=document.getElementById("tb-snippet");e&&(e.textContent=U()),he()}function he(){$&&clearTimeout($),$=setTimeout(ve,300)}async function ve(){const e=document.getElementById("tb-preview-area");if(!e)return;const t=U(),n=++q;xe(e);try{const i=T.onPreview?await T.onPreview(t):null;if(n!==q)return;if(!i||typeof i.html!="string"){J(e);return}X(e,i.html),typeof I<"u"&&I.scan&&I.scan(e)}catch{if(n!==q)return;J(e)}}function xe(e){if(!e.dataset.loaded){for(;e.firstChild;)e.removeChild(e.firstChild);const t=d("div","color:var(--dm-text-muted,#94a3b8);font-size:12px");t.textContent="Rendering preview\u2026",e.appendChild(t),e.dataset.loaded="1"}}function J(e){for(;e.firstChild;)e.removeChild(e.firstChild);const t=d("div","color:var(--dm-text-muted,#94a3b8);font-size:12px;font-style:italic");t.textContent="Preview unavailable",e.appendChild(t)}function G(e){return e.charAt(0).toUpperCase()+e.slice(1)}
+[/timeline]`}function oe(){const e=a,t=e.collection,n=[`slug="${h(t.slug)}"`,'display="timeline"'];return e.layout!=="vertical"&&n.push(`layout="${h(e.layout)}"`),e.theme!=="minimal"&&n.push(`theme="${h(e.theme)}"`),e.roadmap&&n.push('mode="roadmap"'),t.titleField&&n.push(`title-field="${h(t.titleField)}"`),t.dateField&&n.push(`date-field="${h(t.dateField)}"`),t.statusField&&n.push(`status-field="${h(t.statusField)}"`),t.iconField&&n.push(`icon-field="${h(t.iconField)}"`),t.bodyField&&n.push(`body-field="${h(t.bodyField)}"`),t.limit&&n.push(`limit="${h(t.limit)}"`),Object.entries(e.extras).forEach(([i,l])=>n.push(`${i}="${h(l)}"`)),`[collection ${n.join(" ")} /]`}function z(){$&&(clearTimeout($),$=null),k&&(k.remove(),k=null,a=null,T=null)}function le(){const e=U();if(T){const{start:t,end:n}=T;y.value=y.value.slice(0,t)+e+y.value.slice(n),y.selectionStart=y.selectionEnd=t+e.length}else{const t=y.selectionStart,n=y.selectionEnd;y.value=y.value.slice(0,t)+e+y.value.slice(n),y.selectionStart=y.selectionEnd=t+e.length}y.dispatchEvent(new Event("input",{bubbles:!0})),y.focus(),z()}function d(e,t=""){const n=document.createElement(e);return t&&(n.style.cssText=t),n}const L="padding:7px 10px;border-radius:7px;border:1px solid var(--dm-border,#334155);background:var(--dm-surface,#0f172a);color:var(--dm-text,#e2e8f0);font-size:12px;font-family:inherit;width:100%",j="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--dm-text-muted,#475569)";function S(e,t){const n=d("div","display:flex;flex-direction:column;gap:5px"),i=d("div",j);return i.textContent=e,n.appendChild(i),n.appendChild(t),n}function H(){return d("div","height:1px;background:var(--dm-border,#334155);margin:2px 0")}function de(){k=d("div","position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:9999;padding:24px;isolation:isolate");const e=d("div","background:var(--dm-surface,#1e293b);border:1px solid var(--dm-border,#334155);border-radius:14px;width:100%;max-width:960px;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--dm-shadow-lg);overflow:hidden"),t=d("div","display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--dm-border,#334155);flex-shrink:0"),n=d("span","font-weight:700;color:var(--dm-text,#f1f5f9);font-size:14px");n.textContent=T?"Edit Timeline":"Insert Timeline";const i=d("button","background:var(--dm-border,#334155);border:none;color:var(--dm-text-muted,#94a3b8);border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:14px");i.textContent="\u2715",i.addEventListener("click",z),t.appendChild(n),t.appendChild(i);const l=d("div","display:grid;grid-template-columns:340px 1fr;flex:1;overflow:hidden");l.appendChild(ae()),l.appendChild(fe());const o=d("div","display:flex;justify-content:flex-end;gap:10px;padding:12px 20px;border-top:1px solid var(--dm-border,#334155);flex-shrink:0"),m=d("button","padding:8px 18px;border-radius:8px;border:none;background:var(--dm-border,#334155);color:var(--dm-text-muted,#94a3b8);font-size:12px;font-weight:700;cursor:pointer");m.textContent="Cancel",m.addEventListener("click",z);const s=d("button","padding:8px 18px;border-radius:8px;border:none;background:var(--dm-primary,#6366f1);color:var(--dm-primary-text,#fff);font-size:12px;font-weight:700;cursor:pointer");s.textContent=T?"Save Timeline":"Insert Timeline",s.addEventListener("click",le),o.appendChild(m),o.appendChild(s),e.appendChild(t),e.appendChild(l),e.appendChild(o),k.appendChild(e),k.addEventListener("click",c=>{c.target===k&&z()}),document.body.appendChild(k),x()}function ae(){const e=d("div","padding:18px;border-right:1px solid var(--dm-border,#334155);display:flex;flex-direction:column;gap:14px;overflow-y:auto");e.appendChild(re()),e.appendChild(H()),e.appendChild(S("Layout",V("layout",P.map(i=>[i,G(i)])))),e.appendChild(S("Theme",V("theme",M.map(i=>[i,G(i)])))),e.appendChild(S("Mode",se())),e.appendChild(H());const t=d("div","display:flex;flex-direction:column;gap:12px");t.id="tb-static",t.appendChild(ce()),e.appendChild(t);const n=d("div","display:flex;flex-direction:column;gap:12px");return n.id="tb-collection",n.appendChild(me()),e.appendChild(n),K(),e}function re(){const e=d("div","display:flex;gap:6px"),t=(n,i)=>{const l=d("button"),o=()=>{const m=a.mode===n;l.style.cssText=`flex:1;padding:8px 10px;border-radius:8px;border:1px solid;font-size:12px;font-weight:700;cursor:pointer;${m?"border-color:var(--dm-primary,#6366f1);background:color-mix(in srgb, var(--dm-primary,#6366f1) 15%, transparent);color:var(--dm-primary,#a5b4fc)":"border-color:var(--dm-border,#334155);background:var(--dm-surface,#0f172a);color:var(--dm-text-muted,#94a3b8)"}`};return l.type="button",l.textContent=i,o(),l.addEventListener("click",()=>{a.mode=n,e.querySelectorAll("button").forEach(m=>m._paint&&m._paint()),K(),x()}),l._paint=o,l};return e.appendChild(t("static","Static")),e.appendChild(t("collection","From Collection")),e}function K(){const e=document.getElementById("tb-static"),t=document.getElementById("tb-collection");e&&(e.style.display=a.mode==="static"?"":"none"),t&&(t.style.display=a.mode==="collection"?"":"none")}function V(e,t){const n=d("select",L+";cursor:pointer");return t.forEach(([i,l])=>{const o=document.createElement("option");o.value=i,o.textContent=l,i===a[e]&&(o.selected=!0),n.appendChild(o)}),n.addEventListener("change",()=>{a[e]=n.value,x()}),n}function se(){const e=d("label","display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:12px;color:var(--dm-text,#e2e8f0)"),t=document.createElement("input");return t.type="checkbox",t.checked=!!a.roadmap,t.addEventListener("change",()=>{a.roadmap=t.checked,x()}),e.appendChild(t),e.appendChild(document.createTextNode("Roadmap mode")),e}function ce(){const e=d("div","display:flex;flex-direction:column;gap:8px"),t=d("div","display:flex;align-items:center;justify-content:space-between"),n=d("div",j);n.textContent="Events";const i=d("button","padding:4px 10px;border-radius:6px;border:1px dashed var(--dm-border,#334155);background:transparent;color:var(--dm-text-muted,#94a3b8);font-size:11px;cursor:pointer");i.type="button",i.textContent="+ Add event",i.addEventListener("click",()=>{a.events.push({title:"New Event",date:"",status:"",icon:"",body:"",extras:{}}),N(),x()}),t.appendChild(n),t.appendChild(i),e.appendChild(t);const l=d("div","display:flex;flex-direction:column;gap:8px");return l.id="tb-events",e.appendChild(l),N(l),e}function N(e){const t=e||document.getElementById("tb-events");if(t){for(;t.firstChild;)t.removeChild(t.firstChild);a.events.forEach((n,i)=>t.appendChild(pe(n,i)))}}function pe(e,t){const n=d("div","border:1px solid var(--dm-border,#334155);border-radius:8px;padding:10px;background:var(--dm-background-alt,#0b1120);display:flex;flex-direction:column;gap:8px");n.draggable=!0,n.dataset.idx=String(t);const i=d("div","display:flex;align-items:center;gap:6px"),l=d("span","cursor:grab;color:var(--dm-text-muted,#475569);font-size:14px;user-select:none;padding:0 4px");l.textContent="\u2261",l.title="Drag to reorder",i.appendChild(l);const o=d("div","flex:1;font-size:12px;color:var(--dm-text,#e2e8f0);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis");o.textContent=e.title||"(untitled event)",i.appendChild(o);const m=(r,f,b,E)=>{const _=d("button",`padding:2px 6px;border-radius:5px;border:1px solid var(--dm-border,#334155);background:transparent;color:var(--dm-text-muted,#94a3b8);font-size:11px;cursor:${E?"not-allowed":"pointer"};opacity:${E?"0.4":"1"}`);return _.type="button",_.title=f,_.textContent=r,E||_.addEventListener("click",b),_};i.appendChild(m("\u2191","Move up",()=>Y(t,-1),t===0)),i.appendChild(m("\u2193","Move down",()=>Y(t,1),t===a.events.length-1)),i.appendChild(m("\u2715","Delete",()=>ue(t),a.events.length<=1)),n.appendChild(i);const s=W(e.title,"Event title",r=>{e.title=r,o.textContent=r||"(untitled event)",x()});n.appendChild(A("Title",s));const c=d("div","display:grid;grid-template-columns:1fr 1fr;gap:6px"),u=document.createElement("input");u.type="date",u.value=e.date||"",u.style.cssText=L,u.addEventListener("input",()=>{e.date=u.value,x()}),c.appendChild(A("Date",u));const w=document.createElement("select");w.style.cssText=L+";cursor:pointer",ne.forEach(r=>{const f=document.createElement("option");f.value=r,f.textContent=r===""?"\u2014 none \u2014":G(r),r===e.status&&(f.selected=!0),w.appendChild(f)}),w.addEventListener("change",()=>{e.status=w.value,x()}),c.appendChild(A("Status",w)),n.appendChild(c);const g=d("div","display:flex;gap:6px"),C=W(e.icon,"e.g. rocket",r=>{e.icon=r,x()});C.style.flex="1";const p=d("button","padding:0 10px;background:var(--dm-border,#334155);border:none;color:var(--dm-text-muted,#94a3b8);border-radius:7px;font-size:12px;cursor:pointer;flex-shrink:0");p.type="button",p.title="Browse icons",p.textContent="\u2605",p.addEventListener("click",()=>Q(r=>{e.icon=r,C.value=r,x()})),g.appendChild(C),g.appendChild(p),n.appendChild(A("Icon",g));const v=document.createElement("textarea");return v.value=e.body||"",v.rows=2,v.style.cssText=L+";resize:vertical;min-height:48px;line-height:1.5",v.addEventListener("input",()=>{e.body=v.value,x()}),n.appendChild(A("Body (Markdown)",v)),n.addEventListener("dragstart",r=>{r.dataTransfer.effectAllowed="move",r.dataTransfer.setData("text/plain",String(t)),n.style.opacity="0.5"}),n.addEventListener("dragend",()=>{n.style.opacity=""}),n.addEventListener("dragover",r=>{r.preventDefault(),r.dataTransfer.dropEffect="move",n.style.borderColor="var(--dm-primary,#6366f1)"}),n.addEventListener("dragleave",()=>{n.style.borderColor="var(--dm-border,#334155)"}),n.addEventListener("drop",r=>{r.preventDefault(),n.style.borderColor="var(--dm-border,#334155)";const f=parseInt(r.dataTransfer.getData("text/plain"),10);if(Number.isNaN(f)||f===t)return;const[b]=a.events.splice(f,1);a.events.splice(t,0,b),N(),x()}),n}function Y(e,t){const n=e+t;if(n<0||n>=a.events.length)return;const[i]=a.events.splice(e,1);a.events.splice(n,0,i),N(),x()}function ue(e){a.events.length<=1||(a.events.splice(e,1),N(),x())}function W(e,t,n){const i=document.createElement("input");return i.type="text",i.value=e||"",i.placeholder=t||"",i.style.cssText=L,i.addEventListener("input",()=>n(i.value)),i}function A(e,t){const n=d("div","display:flex;flex-direction:column;gap:4px"),i=d("div","font-size:10px;font-weight:600;color:var(--dm-text-muted,#64748b);letter-spacing:.04em");return i.textContent=e,n.appendChild(i),n.appendChild(t),n}function me(){const e=d("div","display:flex;flex-direction:column;gap:10px"),t=d("select",L+";cursor:pointer"),n=document.createElement("option");n.value="",n.textContent="Loading collections\u2026",t.appendChild(n),e.appendChild(S("Collection",t));const i=B("titleField"),l=B("dateField"),o=B("statusField"),m=B("iconField"),s=B("bodyField");e.appendChild(S("Title field",i));const c=d("div","display:grid;grid-template-columns:1fr 1fr;gap:8px");c.appendChild(S("Date field",l)),c.appendChild(S("Status field",o)),e.appendChild(c),e.appendChild(S("Icon field",m)),e.appendChild(S("Body field",s));const u=W(a.collection.limit,"All",p=>{a.collection.limit=p,x()});u.type="number",u.min="1",e.appendChild(S("Limit (optional)",u));const w=d("div","font-size:11px;color:var(--dm-text-muted,#64748b);line-height:1.4");w.textContent="Picks entries in their default collection order. Set date, status, and icon fields to drive visual cues on the page.",e.appendChild(w);const g=p=>{[i,l,o,m,s].forEach(b=>{for(;b.firstChild;)b.removeChild(b.firstChild);const E=document.createElement("option");E.value="",E.textContent="\u2014 none \u2014",b.appendChild(E),p.forEach(_=>{const D=document.createElement("option");D.value=_.name,D.textContent=_.label||_.name,b.appendChild(D)})});const r=new Set(p.map(b=>b.name)),f=(b,E)=>{a.collection[b]&&r.has(a.collection[b])||(a.collection[b]=r.has(E)?E:"")};f("titleField","title"),f("dateField","date"),f("statusField","status"),f("iconField","icon"),f("bodyField","description"),i.value=a.collection.titleField,l.value=a.collection.dateField,o.value=a.collection.statusField,m.value=a.collection.iconField,s.value=a.collection.bodyField},C=async p=>{if(!p){g([]);return}try{const v=F.onGetCollection?await F.onGetCollection(p):null,r=v&&v.fields||[];g(r)}catch{g([])}};return t.addEventListener("change",()=>{a.collection.slug=t.value,C(t.value).then(x)}),(async()=>{let p=[];try{p=F.onListCollections?await F.onListCollections():[]}catch{p=[]}for(;t.firstChild;)t.removeChild(t.firstChild);if(!p.length){const r=document.createElement("option");r.value="",r.textContent="No collections available",t.appendChild(r),g([]);return}p.forEach(r=>{const f=document.createElement("option");f.value=r.slug,f.textContent=r.title||r.slug,t.appendChild(f)});const v=a.collection.slug;v&&p.some(r=>r.slug===v)?t.value=v:(a.collection.slug=p[0].slug,t.value=p[0].slug),await C(t.value),x()})(),e}function B(e){const t=d("select",L+";cursor:pointer"),n=document.createElement("option");return n.value="",n.textContent="\u2014 none \u2014",t.appendChild(n),t.addEventListener("change",()=>{a.collection[e]=t.value,x()}),t}function fe(){const e=d("div","padding:20px;background:var(--dm-surface,#0f172a);display:flex;flex-direction:column;gap:14px;overflow-y:auto"),t=d("div",j);t.textContent="Live Preview";const n=d("div","flex:1;min-height:160px;background:var(--dm-background-alt,#fff);border-radius:10px;padding:16px;color:var(--dm-text,#0f172a)");n.id="tb-preview-area";const i=d("div",j+";margin-bottom:4px");i.textContent="Shortcode";const l=d("pre","background:var(--dm-background-alt,#1e293b);border:1px solid var(--dm-border,#334155);border-radius:8px;padding:10px 14px;font-family:monospace;font-size:11px;color:var(--dm-primary,#a5b4fc);line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:160px;overflow:auto;margin:0");return l.id="tb-snippet",e.appendChild(t),e.appendChild(n),e.appendChild(i),e.appendChild(l),e}function x(){const e=document.getElementById("tb-snippet");e&&(e.textContent=U()),he()}function he(){$&&clearTimeout($),$=setTimeout(ve,300)}async function ve(){const e=document.getElementById("tb-preview-area");if(!e)return;const t=U(),n=++q;xe(e);try{const i=F.onPreview?await F.onPreview(t):null;if(n!==q)return;if(!i||typeof i.html!="string"){J(e);return}X(e,i.html),typeof I<"u"&&I.scan&&I.scan(e)}catch{if(n!==q)return;J(e)}}function xe(e){if(!e.dataset.loaded){for(;e.firstChild;)e.removeChild(e.firstChild);const t=d("div","color:var(--dm-text-muted,#94a3b8);font-size:12px");t.textContent="Rendering preview\u2026",e.appendChild(t),e.dataset.loaded="1"}}function J(e){for(;e.firstChild;)e.removeChild(e.firstChild);const t=d("div","color:var(--dm-text-muted,#94a3b8);font-size:12px;font-style:italic");t.textContent="Preview unavailable",e.appendChild(t)}function G(e){return e.charAt(0).toUpperCase()+e.slice(1)}

package/admin/js/templates/api-endpoint-editor.html

@@ -144,7 +144,7 @@
 
     <div class="ep-results-col">
     <div class="card" id="tryit-results-placeholder">
-        <div class="card-body" style="text-align:center;color:var(--color-text-muted,#8a94a6);padding:2rem 1rem;">
+        <div class="card-body" style="text-align:center;color:var(--dm-text-muted,#8a94a6);padding:2rem 1rem;">
             <div data-icon="zap" style="font-size:1.5rem;opacity:.5;"></div>
             <p style="margin:.5rem 0 0;font-size:.9rem;">Send a request to see the response here.</p>
         </div>
@@ -158,7 +158,7 @@
             </div>
         </div>
         <div class="card-body" style="padding-top:.5rem;">
-            <div id="tryit-json" style="max-height:460px;overflow:auto;font-family:var(--font-mono,ui-monospace,monospace);font-size:.8rem;line-height:1.5;padding:.6rem;"></div>
+            <div id="tryit-json" style="max-height:460px;overflow:auto;font-family:var(--dm-font-mono,ui-monospace,monospace);font-size:.8rem;line-height:1.5;padding:.6rem;"></div>
             <pre id="tryit-body" style="display:none;max-height:460px;overflow:auto;font-size:.8rem;padding:.6rem;margin:0;white-space:pre-wrap;word-break:break-word;"></pre>
         </div>
     </div>

package/admin/js/templates/block-editor.html

@@ -110,7 +110,7 @@
                 <div id="block-sample-data" style="
                     border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));
                     padding:.6rem .75rem;
-                    background:var(--dm-surface-subtle,rgba(0,0,0,.1));
+                    background:var(--dm-background-alt,rgba(0,0,0,.1));
                     flex-shrink:0;">
                     <p class="text-muted" style="font-size:.8rem;margin:0;">
                         Write some template HTML to populate sample data fields.

package/admin/js/templates/component-editor.html

@@ -56,11 +56,11 @@
             display:flex;align-items:center;justify-content:space-between;gap:.75rem;
             padding:.45rem .75rem;
             border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));
-            background:var(--dm-surface-subtle,rgba(0,0,0,.05));
+            background:var(--dm-background-alt,rgba(0,0,0,.05));
             font-size:.78rem;">
             <div>
                 <span id="component-compile-indicator"
-                      style="display:inline-block;min-width:.7rem;height:.7rem;border-radius:50%;background:#aaa;margin-right:.4rem;"></span>
+                      style="display:inline-block;min-width:.7rem;height:.7rem;border-radius:50%;background:var(--dm-text-muted);margin-right:.4rem;"></span>
                 <span id="component-compile-status">Compiling…</span>
             </div>
             <span id="component-cursor-pos" style="display:none;"></span>
@@ -68,8 +68,8 @@
         <pre id="component-compile-errors" hidden style="
             margin:0;
             padding:.75rem;
-            background:rgba(201,42,42,.08);
-            color:#c92a2a;
+            background:color-mix(in srgb, var(--dm-danger) 8%, transparent);
+            color:var(--dm-danger);
             border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));
             white-space:pre-wrap;
             font-size:.78rem;

package/admin/js/templates/docs/api-actions.html

@@ -16,28 +16,28 @@
     }
 
     .method-get {
-        background: #d1fae5;
-        color: #065f46;
+        background: color-mix(in srgb, var(--dm-success) 15%, transparent);
+        color: var(--dm-success);
     }
 
     .method-post {
-        background: #dbeafe;
-        color: #1e40af;
+        background: color-mix(in srgb, var(--dm-primary) 15%, transparent);
+        color: var(--dm-primary);
     }
 
     .method-put {
-        background: #fef3c7;
-        color: #92400e;
+        background: color-mix(in srgb, var(--dm-warning) 15%, transparent);
+        color: var(--dm-warning-dark);
     }
 
     .method-patch {
-        background: #ccfbf1;
-        color: #134e4a;
+        background: color-mix(in srgb, var(--dm-info) 15%, transparent);
+        color: var(--dm-info);
     }
 
     .method-delete {
-        background: #fee2e2;
-        color: #991b1b;
+        background: color-mix(in srgb, var(--dm-danger) 15%, transparent);
+        color: var(--dm-danger);
     }
 
     .endpoint-path {
@@ -47,7 +47,7 @@
 
     .auth-note {
         font-size: 12px;
-        color: var(--dm-color-text-muted, #6b7280);
+        color: var(--dm-text-muted, #6b7280);
         margin: 4px 0 12px;
     }
 

package/admin/js/templates/docs/api-authentication.html

@@ -16,28 +16,28 @@
     }
 
     .method-get {
-        background: #d1fae5;
-        color: #065f46;
+        background: color-mix(in srgb, var(--dm-success) 15%, transparent);
+        color: var(--dm-success);
     }
 
     .method-post {
-        background: #dbeafe;
-        color: #1e40af;
+        background: color-mix(in srgb, var(--dm-primary) 15%, transparent);
+        color: var(--dm-primary);
     }
 
     .method-put {
-        background: #fef3c7;
-        color: #92400e;
+        background: color-mix(in srgb, var(--dm-warning) 15%, transparent);
+        color: var(--dm-warning-dark);
     }
 
     .method-patch {
-        background: #ccfbf1;
-        color: #134e4a;
+        background: color-mix(in srgb, var(--dm-info) 15%, transparent);
+        color: var(--dm-info);
     }
 
     .method-delete {
-        background: #fee2e2;
-        color: #991b1b;
+        background: color-mix(in srgb, var(--dm-danger) 15%, transparent);
+        color: var(--dm-danger);
     }
 
     .endpoint-path {
@@ -47,7 +47,7 @@
 
     .auth-note {
         font-size: 12px;
-        color: var(--dm-color-text-muted, #6b7280);
+        color: var(--dm-text-muted, #6b7280);
         margin: 4px 0 12px;
     }
 

package/admin/js/templates/docs/api-collections.html

@@ -16,28 +16,28 @@
     }
 
     .method-get {
-        background: #d1fae5;
-        color: #065f46;
+        background: color-mix(in srgb, var(--dm-success) 15%, transparent);
+        color: var(--dm-success);
     }
 
     .method-post {
-        background: #dbeafe;
-        color: #1e40af;
+        background: color-mix(in srgb, var(--dm-primary) 15%, transparent);
+        color: var(--dm-primary);
     }
 
     .method-put {
-        background: #fef3c7;
-        color: #92400e;
+        background: color-mix(in srgb, var(--dm-warning) 15%, transparent);
+        color: var(--dm-warning-dark);
     }
 
     .method-patch {
-        background: #ccfbf1;
-        color: #134e4a;
+        background: color-mix(in srgb, var(--dm-info) 15%, transparent);
+        color: var(--dm-info);
     }
 
     .method-delete {
-        background: #fee2e2;
-        color: #991b1b;
+        background: color-mix(in srgb, var(--dm-danger) 15%, transparent);
+        color: var(--dm-danger);
     }
 
     .endpoint-path {
@@ -47,7 +47,7 @@
 
     .auth-note {
         font-size: 12px;
-        color: var(--dm-color-text-muted, #6b7280);
+        color: var(--dm-text-muted, #6b7280);
         margin: 4px 0 12px;
     }
 

package/admin/js/templates/docs/api-layouts.html

@@ -16,28 +16,28 @@
     }
 
     .method-get {
-        background: #d1fae5;
-        color: #065f46;
+        background: color-mix(in srgb, var(--dm-success) 15%, transparent);
+        color: var(--dm-success);
     }
 
     .method-post {
-        background: #dbeafe;
-        color: #1e40af;
+        background: color-mix(in srgb, var(--dm-primary) 15%, transparent);
+        color: var(--dm-primary);
     }
 
     .method-put {
-        background: #fef3c7;
-        color: #92400e;
+        background: color-mix(in srgb, var(--dm-warning) 15%, transparent);
+        color: var(--dm-warning-dark);
     }
 
     .method-patch {
-        background: #ccfbf1;
-        color: #134e4a;
+        background: color-mix(in srgb, var(--dm-info) 15%, transparent);
+        color: var(--dm-info);
     }
 
     .method-delete {
-        background: #fee2e2;
-        color: #991b1b;
+        background: color-mix(in srgb, var(--dm-danger) 15%, transparent);
+        color: var(--dm-danger);
     }
 
     .endpoint-path {
@@ -47,7 +47,7 @@
 
     .auth-note {
         font-size: 12px;
-        color: var(--dm-color-text-muted, #6b7280);
+        color: var(--dm-text-muted, #6b7280);
         margin: 4px 0 12px;
     }
 

package/admin/js/templates/docs/api-media.html

@@ -16,28 +16,28 @@
     }
 
     .method-get {
-        background: #d1fae5;
-        color: #065f46;
+        background: color-mix(in srgb, var(--dm-success) 15%, transparent);
+        color: var(--dm-success);
     }
 
     .method-post {
-        background: #dbeafe;
-        color: #1e40af;
+        background: color-mix(in srgb, var(--dm-primary) 15%, transparent);
+        color: var(--dm-primary);
     }
 
     .method-put {
-        background: #fef3c7;
-        color: #92400e;
+        background: color-mix(in srgb, var(--dm-warning) 15%, transparent);
+        color: var(--dm-warning-dark);
     }
 
     .method-patch {
-        background: #ccfbf1;
-        color: #134e4a;
+        background: color-mix(in srgb, var(--dm-info) 15%, transparent);
+        color: var(--dm-info);
     }
 
     .method-delete {
-        background: #fee2e2;
-        color: #991b1b;
+        background: color-mix(in srgb, var(--dm-danger) 15%, transparent);
+        color: var(--dm-danger);
     }
 
     .endpoint-path {
@@ -47,7 +47,7 @@
 
     .auth-note {
         font-size: 12px;
-        color: var(--dm-color-text-muted, #6b7280);
+        color: var(--dm-text-muted, #6b7280);
         margin: 4px 0 12px;
     }
 

package/admin/js/templates/docs/api-navigation.html

@@ -16,28 +16,28 @@
     }
 
     .method-get {
-        background: #d1fae5;
-        color: #065f46;
+        background: color-mix(in srgb, var(--dm-success) 15%, transparent);
+        color: var(--dm-success);
     }
 
     .method-post {
-        background: #dbeafe;
-        color: #1e40af;
+        background: color-mix(in srgb, var(--dm-primary) 15%, transparent);
+        color: var(--dm-primary);
     }
 
     .method-put {
-        background: #fef3c7;
-        color: #92400e;
+        background: color-mix(in srgb, var(--dm-warning) 15%, transparent);
+        color: var(--dm-warning-dark);
     }
 
     .method-patch {
-        background: #ccfbf1;
-        color: #134e4a;
+        background: color-mix(in srgb, var(--dm-info) 15%, transparent);
+        color: var(--dm-info);
     }
 
     .method-delete {
-        background: #fee2e2;
-        color: #991b1b;
+        background: color-mix(in srgb, var(--dm-danger) 15%, transparent);
+        color: var(--dm-danger);
     }
 
     .endpoint-path {
@@ -47,7 +47,7 @@
 
     .auth-note {
         font-size: 12px;
-        color: var(--dm-color-text-muted, #6b7280);
+        color: var(--dm-text-muted, #6b7280);
         margin: 4px 0 12px;
     }
 

package/admin/js/templates/docs/api-pages.html

@@ -16,28 +16,28 @@
     }
 
     .method-get {
-        background: #d1fae5;
-        color: #065f46;
+        background: color-mix(in srgb, var(--dm-success) 15%, transparent);
+        color: var(--dm-success);
     }
 
     .method-post {
-        background: #dbeafe;
-        color: #1e40af;
+        background: color-mix(in srgb, var(--dm-primary) 15%, transparent);
+        color: var(--dm-primary);
     }
 
     .method-put {
-        background: #fef3c7;
-        color: #92400e;
+        background: color-mix(in srgb, var(--dm-warning) 15%, transparent);
+        color: var(--dm-warning-dark);
     }
 
     .method-patch {
-        background: #ccfbf1;
-        color: #134e4a;
+        background: color-mix(in srgb, var(--dm-info) 15%, transparent);
+        color: var(--dm-info);
     }
 
     .method-delete {
-        background: #fee2e2;
-        color: #991b1b;
+        background: color-mix(in srgb, var(--dm-danger) 15%, transparent);
+        color: var(--dm-danger);
     }
 
     .endpoint-path {
@@ -47,7 +47,7 @@
 
     .auth-note {
         font-size: 12px;
-        color: var(--dm-color-text-muted, #6b7280);
+        color: var(--dm-text-muted, #6b7280);
         margin: 4px 0 12px;
     }
 

package/admin/js/templates/docs/api-plugins.html

@@ -16,28 +16,28 @@
     }
 
     .method-get {
-        background: #d1fae5;
-        color: #065f46;
+        background: color-mix(in srgb, var(--dm-success) 15%, transparent);
+        color: var(--dm-success);
     }
 
     .method-post {
-        background: #dbeafe;
-        color: #1e40af;
+        background: color-mix(in srgb, var(--dm-primary) 15%, transparent);
+        color: var(--dm-primary);
     }
 
     .method-put {
-        background: #fef3c7;
-        color: #92400e;
+        background: color-mix(in srgb, var(--dm-warning) 15%, transparent);
+        color: var(--dm-warning-dark);
     }
 
     .method-patch {
-        background: #ccfbf1;
-        color: #134e4a;
+        background: color-mix(in srgb, var(--dm-info) 15%, transparent);
+        color: var(--dm-info);
     }
 
     .method-delete {
-        background: #fee2e2;
-        color: #991b1b;
+        background: color-mix(in srgb, var(--dm-danger) 15%, transparent);
+        color: var(--dm-danger);
     }
 
     .endpoint-path {
@@ -47,7 +47,7 @@
 
     .auth-note {
         font-size: 12px;
-        color: var(--dm-color-text-muted, #6b7280);
+        color: var(--dm-text-muted, #6b7280);
         margin: 4px 0 12px;
     }
 

package/admin/js/templates/docs/api-settings.html

@@ -16,28 +16,28 @@
     }
 
     .method-get {
-        background: #d1fae5;
-        color: #065f46;
+        background: color-mix(in srgb, var(--dm-success) 15%, transparent);
+        color: var(--dm-success);
     }
 
     .method-post {
-        background: #dbeafe;
-        color: #1e40af;
+        background: color-mix(in srgb, var(--dm-primary) 15%, transparent);
+        color: var(--dm-primary);
     }
 
     .method-put {
-        background: #fef3c7;
-        color: #92400e;
+        background: color-mix(in srgb, var(--dm-warning) 15%, transparent);
+        color: var(--dm-warning-dark);
     }
 
     .method-patch {
-        background: #ccfbf1;
-        color: #134e4a;
+        background: color-mix(in srgb, var(--dm-info) 15%, transparent);
+        color: var(--dm-info);
     }
 
     .method-delete {
-        background: #fee2e2;
-        color: #991b1b;
+        background: color-mix(in srgb, var(--dm-danger) 15%, transparent);
+        color: var(--dm-danger);
     }
 
     .endpoint-path {
@@ -47,7 +47,7 @@
 
     .auth-note {
         font-size: 12px;
-        color: var(--dm-color-text-muted, #6b7280);
+        color: var(--dm-text-muted, #6b7280);
         margin: 4px 0 12px;
     }
 

package/admin/js/templates/docs/api-users.html

@@ -16,28 +16,28 @@
     }
 
     .method-get {
-        background: #d1fae5;
-        color: #065f46;
+        background: color-mix(in srgb, var(--dm-success) 15%, transparent);
+        color: var(--dm-success);
     }
 
     .method-post {
-        background: #dbeafe;
-        color: #1e40af;
+        background: color-mix(in srgb, var(--dm-primary) 15%, transparent);
+        color: var(--dm-primary);
     }
 
     .method-put {
-        background: #fef3c7;
-        color: #92400e;
+        background: color-mix(in srgb, var(--dm-warning) 15%, transparent);
+        color: var(--dm-warning-dark);
     }
 
     .method-patch {
-        background: #ccfbf1;
-        color: #134e4a;
+        background: color-mix(in srgb, var(--dm-info) 15%, transparent);
+        color: var(--dm-info);
     }
 
     .method-delete {
-        background: #fee2e2;
-        color: #991b1b;
+        background: color-mix(in srgb, var(--dm-danger) 15%, transparent);
+        color: var(--dm-danger);
     }
 
     .endpoint-path {
@@ -47,7 +47,7 @@
 
     .auth-note {
         font-size: 12px;
-        color: var(--dm-color-text-muted, #6b7280);
+        color: var(--dm-text-muted, #6b7280);
         margin: 4px 0 12px;
     }