domma-cms 1.12.0 → 1.13.0

package/admin/js/views/menu-editor.js

@@ -1,4 +1,4 @@
-import{api as P}from"../api.js";import{colourToCss as xt,HIGHLIGHT_HOVER as dt,HIGHLIGHT_ACTIVE as ut,HIGHLIGHT_HOVER_LABELS as mt,HIGHLIGHT_ACTIVE_LABELS as pt,cssClassProblems as ht,normaliseCssClasses as St,ENTRANCE_ANIMATIONS as nt,ENTRANCE_ANIMATION_LABELS as At}from"/public/js/menu-decor.mjs?v=20261014-menu-entrance";import{openIconPicker as Et}from"../lib/card-builder.js";import{normalisePanel as $t,DESCRIPTION_MAX as Ct}from"/public/js/menu-look.mjs?v=20261029-pill-floats";import{sortableMenuRows as Lt}from"../lib/menu-drag.js";import{placeTools as Tt,ensureLockedTools as _t,isLockedUrl as It,groupKeyFor as Ht,slugify as Nt,GROUP_ICON as Rt,TOOLS_FOLDER_KEY as Bt}from"../lib/sidebar-grouping.js";import{flatten as ft,nest as Ot,uid as Ge}from"../lib/menu-rows.js";import{addBannerAction as ot}from"../lib/plugin-chrome.js";import{helpPopovers as Dt}from"../lib/help-popover.js";import{onceClosed as Pt,openMenuAt as at,sidebarCount as jt}from"../lib/tool-kit.js";import{addChild as Ft,bindingFrom as Mt,duplicateRow as zt,indentRow as Ut,insertBelow as Wt,isStructural as ge,menuFromForm as Kt,menuProblems as qt,moveRow as gt,outdentRow as Gt,siblingsOf as Vt,snapshot as Ve}from"../lib/menu-editor-arrange.js";import{fmtDateTime as Yt}from"../lib/dates.js";const Xt=760,Jt="admin-sidebar",Qt=/^\/menus\/(new|edit\/[^?#]+)(\?.*)?$/;function A(n){return String(n||"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;")}const Ye=n=>String(n??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");function Zt(n,d){let i=0,r=d.find(l=>l.id===n);for(;r&&r.parentId;)i++,r=d.find(l=>l.id===r.parentId);return i}function vt(n){const d=new Set,i=new Set,r=l=>{for(const k of n.filter(L=>L.parentId===l))!k.type&&It(k.url)&&!i.has(k.url)&&(i.add(k.url),d.add(k.id)),r(k.id)};return r(null),d}const Xe='<button type="button" class="btn btn-sm btn-ghost mex-kebab" aria-label="Actions" title="Actions (right-click, or Shift+F10)">\u22EE</button>';function en(n,d,i=!1){const r=i?vt(d):new Set,l=[];function k(L){for(const u of d.filter(q=>q.parentId===L)){const C=`style="margin-left:${Zt(u.id,d)*28}px"`;if(u.type==="separator"){l.push(`
+import{api as P}from"../api.js";import{colourToCss as St,HIGHLIGHT_HOVER as dt,HIGHLIGHT_ACTIVE as ut,HIGHLIGHT_HOVER_LABELS as mt,HIGHLIGHT_ACTIVE_LABELS as pt,cssClassProblems as ht,normaliseCssClasses as xt,ENTRANCE_ANIMATIONS as nt,ENTRANCE_ANIMATION_LABELS as At}from"/public/js/menu-decor.mjs?v=20261014-menu-entrance";import{openIconPicker as Et}from"../lib/card-builder.js";import{normalisePanel as $t,DESCRIPTION_MAX as Ct}from"/public/js/menu-look.mjs?v=20261029-bar-shapes";import{sortableMenuRows as Lt}from"../lib/menu-drag.js";import{placeTools as Tt,ensureLockedTools as _t,isLockedUrl as It,groupKeyFor as Ht,slugify as Nt,GROUP_ICON as Rt,TOOLS_FOLDER_KEY as Bt}from"../lib/sidebar-grouping.js";import{flatten as ft,nest as Ot,uid as Ge}from"../lib/menu-rows.js";import{addBannerAction as ot}from"../lib/plugin-chrome.js";import{helpPopovers as Dt}from"../lib/help-popover.js";import{onceClosed as Pt,openMenuAt as at,sidebarCount as jt}from"../lib/tool-kit.js";import{addChild as Ft,bindingFrom as Mt,duplicateRow as zt,indentRow as Ut,insertBelow as Wt,isStructural as ge,menuFromForm as Kt,menuProblems as qt,moveRow as gt,outdentRow as Gt,siblingsOf as Vt,snapshot as Ve}from"../lib/menu-editor-arrange.js";import{fmtDateTime as Yt}from"../lib/dates.js";const Xt=760,Jt="admin-sidebar",Qt=/^\/menus\/(new|edit\/[^?#]+)(\?.*)?$/;function A(n){return String(n||"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;")}const Ye=n=>String(n??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");function Zt(n,d){let i=0,r=d.find(l=>l.id===n);for(;r&&r.parentId;)i++,r=d.find(l=>l.id===r.parentId);return i}function vt(n){const d=new Set,i=new Set,r=l=>{for(const k of n.filter(L=>L.parentId===l))!k.type&&It(k.url)&&!i.has(k.url)&&(i.add(k.url),d.add(k.id)),r(k.id)};return r(null),d}const Xe='<button type="button" class="btn btn-sm btn-ghost mex-kebab" aria-label="Actions" title="Actions (right-click, or Shift+F10)">\u22EE</button>';function en(n,d,i=!1){const r=i?vt(d):new Set,l=[];function k(L){for(const u of d.filter(q=>q.parentId===L)){const C=`style="margin-left:${Zt(u.id,d)*28}px"`;if(u.type==="separator"){l.push(`
                     <div class="menu-tree-row menu-tree-row--separator" data-id="${u.id}" tabindex="0" ${C}>
                         <span class="menu-tree-grip" data-icon="grip-vertical" data-icon-size="18" title="Drag to move"></span>
                         <span class="me-sep-line"><span class="me-sep-label">Separator</span></span>
@@ -16,7 +16,7 @@ import{api as P}from"../api.js";import{colourToCss as xt,HIGHLIGHT_HOVER as dt,H
                         <span class="menu-tree-grip" data-icon="grip-vertical" data-icon-size="18" title="Drag to move"></span>
                         <span class="me-sep-line"><span class="me-sep-label"><span data-icon="palette"></span> Theme switcher - the themes chosen under Theme &gt; Theme switcher</span></span>
                         ${Xe}
-                    </div>`);continue}const Q=u.badge&&(u.badge.text||u.badge.countFrom)?`<span class="dm-menu-badge">${A(String(u.badge.text||"#"))}</span>`:"",N=u.tool,v=N&&(N.persisted||u.touched),le=N?N.orphan?' <span class="badge badge-secondary me-tool-badge" title="A placeholder for a Tool that is not enabled - it returns here when it is">Not enabled</span>':` <span class="badge badge-secondary me-tool-badge" title="${v?"A Tool, placed here by this menu":"A Tool in its default place - move or edit it to place it here"}">${A(N.source||"Tool")}${v?"":" \xB7 default"}</span>`:"",Z=r.has(u.id),se=xt(u.colour),ee=se?` style="color:${A(se)}"`:"",ie=Z?'<button type="button" class="btn btn-sm btn-ghost" disabled title="Always shown - it can be moved, not hidden" aria-label="Always shown"><span data-icon="lock"></span></button>':`<button type="button" class="btn btn-sm btn-ghost me-hidden ${u.hidden?"active":""}" title="${u.hidden?"Hidden - click to show":"Hide"}" aria-label="${u.hidden?"Show":"Hide"}" aria-pressed="${u.hidden?"true":"false"}"><span data-icon="${u.hidden?"eye-off":"eye"}"></span></button>`;l.push(`
+                    </div>`);continue}const Q=u.badge&&(u.badge.text||u.badge.countFrom)?`<span class="dm-menu-badge">${A(String(u.badge.text||"#"))}</span>`:"",N=u.tool,v=N&&(N.persisted||u.touched),le=N?N.orphan?' <span class="badge badge-secondary me-tool-badge" title="A placeholder for a Tool that is not enabled - it returns here when it is">Not enabled</span>':` <span class="badge badge-secondary me-tool-badge" title="${v?"A Tool, placed here by this menu":"A Tool in its default place - move or edit it to place it here"}">${A(N.source||"Tool")}${v?"":" \xB7 default"}</span>`:"",Z=r.has(u.id),se=St(u.colour),ee=se?` style="color:${A(se)}"`:"",ie=Z?'<button type="button" class="btn btn-sm btn-ghost" disabled title="Always shown - it can be moved, not hidden" aria-label="Always shown"><span data-icon="lock"></span></button>':`<button type="button" class="btn btn-sm btn-ghost me-hidden ${u.hidden?"active":""}" title="${u.hidden?"Hidden - click to show":"Hide"}" aria-label="${u.hidden?"Show":"Hide"}" aria-pressed="${u.hidden?"true":"false"}"><span data-icon="${u.hidden?"eye-off":"eye"}"></span></button>`;l.push(`
                 <div class="menu-tree-row menu-tree-row--slim${u.hidden?" menu-tree-row--hidden":""}${N?" menu-tree-row--tool":""}${N&&!v?" menu-tree-row--default":""}" data-id="${u.id}" tabindex="0" ${C}>
                     <span class="menu-tree-grip" data-icon="grip-vertical" data-icon-size="18" title="Drag to move"></span>
                     <span class="me-row-label${!u.text&&!N?" mex-untitled":""}"${ee}>${A(u.text||N?.label||"(no label - click to add one)")}${Q}${le}</span>
@@ -25,8 +25,8 @@ import{api as P}from"../api.js";import{colourToCss as xt,HIGHLIGHT_HOVER as dt,H
                     <button type="button" class="btn btn-sm btn-ghost me-edit" title="Edit" aria-label="Edit"><span data-icon="edit"></span></button>
                     ${Xe}
                 </div>`),k(u.id)}}k(null),n.innerHTML=l.join("")||'<p class="mex-note">No items yet - Add item, or right-click an item for more.</p>',I.scan(n)}function b(n,d={},...i){const r=document.createElement(n);Object.assign(r,d);for(const l of i)l!=null&&r.append(l);return r}function y(n,d,i){const r=b("label",{className:"form-field"},b("span",{className:"form-label",textContent:n}),d);return i&&r.append(b("small",{className:"form-hint",textContent:i,style:"display:block;font-size:.78em;opacity:.7;margin-top:.25rem;line-height:1.35"})),r}function tn(n,d){const i=[["","- Everyone -"],["public","Public - anyone, incl. logged-out"],...(d||[]).map(l=>[l.name,`${l.label||l.name} and above`]),...(d||[]).filter(l=>l.level!==0).map(l=>[`=${l.name}`,`${l.label||l.name} only`]),["private","Private - super-admin only"]];n&&!i.some(([l])=>l===n)&&i.push([n,`${n} (custom)`]);const r=W(i,n||"");return r.name="visibility",r}function W(n,d){const i=b("select",{className:"form-select"});return n.forEach(([r,l])=>i.add(new Option(l,r))),i.value=d??"",i}function De(n,d){const i=typeof d=="string"&&d.startsWith("#"),r=W([["","- none -"],["primary","primary"],["success","success"],["danger","danger"],["warning","warning"],["info","info"],["neutral","neutral"],["__custom__","Custom\u2026"]],i?"__custom__":d||""),l=b("input",{type:"color",className:"form-input me-colour-hex",value:i?d:"#000000"});l.style.display=i?"":"none",r.addEventListener("change",()=>{l.style.display=r.value==="__custom__"?"":"none"});const k=y(n,r);return k.append(l),k._read=()=>r.value==="__custom__"?l.value:r.value,k}function nn(n,d){const i=b("input",{className:"form-input me-icon",name:"icon",value:d||""}),r=b("span",{className:"me-icon-preview"});d&&r.setAttribute("data-icon",d);const l=b("button",{type:"button",className:"btn btn-sm btn-ghost",textContent:"Browse\u2026"}),k=L=>{L?r.setAttribute("data-icon",L):r.removeAttribute("data-icon"),Domma.icons.scan(r.parentNode||r)};return l.addEventListener("click",()=>Et(L=>{i.value=L,k(L)})),i.addEventListener("input",()=>k(i.value.trim())),y(n,b("div",{className:"me-icon-field"},i,l,r))}function J(...n){return b("div",{className:"me-field-grid"},...n)}async function on(n,d,i,r,l,{cards:k=!0}={}){const L=n.text||n.tool?.label||"",u=m=>b("h4",{className:"me-form-section",textContent:m}),q=y("Label",b("input",{className:"form-input",name:"text",value:n.text||""}),"The text shown for this item."),C=b("input",{className:"form-input",name:"url",value:n.url||""}),Q=y("URL",C,n.tool||n.locked?"A Tool's address is its identity, so it cannot be changed here.":"Where it links. Must start with /, #, https://, or mailto: . Leave blank for a parent that only groups sub-items.");(n.tool||n.locked)&&(C.readOnly=!0);const N=nn("Icon",n.icon||""),v=tn(n.visibility||"",r),le=y("Visibility",v,n.locked?"Always in the sidebar for everyone who may use it, so it cannot be restricted here.":'Who can see this item. "Role and above" shows it to that role and anyone more senior; "Role only" shows it to holders of that role alone (and the super-admin). Blank = everyone.');n.locked&&(v.disabled=!0);const Z=W([["","- no permission gate -"],...(d||[]).map(m=>[m.key,m.label||m.key])],n.permission||"");Z.name="permission";const se=y("Permission",Z,n.tool||n.locked?"A Tool is guarded by its own permission, which always applies.":"Hide unless the viewer holds this specific permission. Independent of Visibility - both must pass.");(n.tool||n.locked)&&(Z.disabled=!0);const ee=y("Badge text",b("input",{className:"form-input",name:"badgeText",value:n.badge?.text||""})),ie=W([["","- none -"],...(i||[]).map(m=>[m.slug,m.title||m.slug])],n.badge?.countFrom||"");ie.name="badgeCount";const ve=y("Badge count from",ie,"Show a live count of this collection\u2019s entries as the badge."),te=De("Badge colour",n.badge?.variant||""),be=W([["link","Link"],["pill","Pill"]],n.pill?"pill":"link");be.name="renderAs";const D=y("Render as",be,"Pill draws the item as a rounded chip. Pill styling applies to top-level navbar items."),$e=y("Pill style",W([["filled","Filled"],["outline","Outline"]],n.pill?.style||"filled"));$e.querySelector("select").name="pillStyle";const Ce=De("Pill colour",n.pill?.variant||""),h=b("div",{className:"me-pill-wrap"},J($e,Ce));h.style.display=n.pill?"":"none",be.addEventListener("change",()=>{h.style.display=be.value==="pill"?"":"none"});const j=De("Text colour",n.colour||""),re=W([["","- use the menu default -"],...dt.map(m=>[m,mt[m]||m])],n.highlight?.hover||"");re.name="hlHover";const Pe=y("Hover effect",re,"Overrides the menu-wide hover effect for this item only."),Le=W([["","- use the menu default -"],...ut.map(m=>[m,pt[m]||m])],n.highlight?.active||"");Le.name="hlActive";const G=y("When selected",Le,"How this item is marked when it points at the page being viewed."),T=De("Highlight colour",n.highlight?.accent||""),ye=b("input",{className:"form-input",name:"class",value:n.class||"",placeholder:"nav-cta push-right",autocomplete:"off",spellcheck:!1}),B=y("CSS classes",ye,"Your own class names, separated by spaces, added to this item's <li> - target the link with .your-class > a. Style them in Custom CSS."),V=b("small",{className:"text-danger",style:"display:none;margin-top:.25rem"});B.append(V);const ce=b("textarea",{className:"form-input",name:"description",rows:2,maxLength:Ct,value:n.description||"",placeholder:"Answers every new lead in under a minute."}),de=y("Description",ce,"One short line under the label, shown when the menu's dropdowns are Cards."),Te=De("Tile colour",n.tile||""),_e=b("input",{type:"checkbox",name:"chip",checked:!!n.chip,style:"width:auto;margin:0"}),je=b("label",{className:"form-field",style:"display:flex;gap:.5rem;align-items:center;font-weight:400"},_e,b("span",{textContent:"Show as a small chip in the card's footer strip"})),ue=n.parentId==null,x=n.panel||{},O=(m,F,he,Ee=80)=>b("input",{className:"form-input",name:m,value:F||"",placeholder:he,maxLength:Ee}),ke=y("Card heading",O("panelHeading",x.heading,"The crew - six agents, one job each"),"Small capitals over the entries."),Fe=y("Link text",O("panelLinkText",x.link?.text,"Meet the crew",60)),Me=y("Link URL",O("panelLinkUrl",x.link?.url,"/crew",500)),Ie=W([["","Automatic"],["1","1"],["2","2"],["3","3"],["4","4"]],x.columns?String(x.columns):"");Ie.name="panelColumns";const ze=y("Columns",Ie),Je=y("Chip strip label",O("panelChipsLabel",x.chipsLabel,"Add to your crew",60),'Words before the chips - tick "Show as a small chip" on the sub-items that belong there.'),me=W([["","- no side box -"],["dark","Dark"],["light","Light"],["accent","Theme colour"]],x.feature?x.feature.tone||"dark":"");me.name="featureTone";const Qe=y("Side box",me,"A box down the right of the card - a call to action or a short list."),Ue=y("Box small heading",O("featureEyebrow",x.feature?.eyebrow,"Free - 20 minutes",60)),We=y("Box title",O("featureTitle",x.feature?.title,"See it live")),Ke=y("Box points",b("textarea",{className:"form-input",name:"featurePoints",rows:3,value:(x.feature?.points||[]).join(`
-`),placeholder:"One per line, up to six"})),t=y("Button text",O("featureBtnText",x.feature?.button?.text,"Book a demo",60)),we=y("Button URL",O("featureBtnUrl",x.feature?.button?.url,"/book",500)),pe=b("div",{},J(Ue,We),Ke,J(t,we));pe.style.display=me.value?"":"none",me.addEventListener("change",()=>{pe.style.display=me.value?"":"none"});const He=k?[u("Card dropdown"),b("small",{className:"form-hint",style:"display:block;opacity:.7;margin-bottom:.4rem",textContent:"Used when the menu's Dropdown style is Cards (Behaviour tab)."}),de,J(Te,ue?null:je),...ue?[ke,J(Fe,Me),J(ze,Je),Qe,pe]:[]]:[],Ne=b("button",{className:"btn btn-primary",textContent:"Apply",title:"Apply to the item (Ctrl+Enter) - Save the menu to keep it"}),U=b("div",{className:"me-item-form"},u("Link"),q,Q,N,u("Access"),J(le,se),u("Badge"),J(ee,te),ve,u("Appearance"),D,h,j,u("Highlighting"),J(Pe,G),T,...He,u("Styling"),B,Ne),_=E.slideover({title:L?`Edit ${Ye(L)}`:"Edit menu item",size:"lg",position:"right"});_.element.appendChild(U);const Re=()=>JSON.stringify([...U.querySelectorAll("input, select, textarea")].map(m=>m.type==="checkbox"?m.checked:m.value)),Ze=Re();let xe=!1,Se=!1;Pt(_);const Be=_.close.bind(_);_.close=async m=>{if(!xe&&m!==!0&&Re()!==Ze){if(Se)return;Se=!0;const F=await E.confirm("Discard the changes to this item?");if(Se=!1,!F)return}return xe=!0,Be()},U.addEventListener("keydown",m=>{(m.ctrlKey||m.metaKey)&&m.key==="Enter"&&(m.preventDefault(),Ne.click())}),_.open();const Ae=_.element.closest(".dm-slideover")||_.element.querySelector(".dm-slideover")||_.element;Ae.style.setProperty("width",Xt+"px","important"),Ae.style.setProperty("max-width","95vw","important"),Domma.icons.scan(U);const f=m=>U.querySelector(`[name="${m}"]`)?.value||"";Ne.addEventListener("click",()=>{const m=ht(f("class"));if(m.length){V.textContent=m.join("; "),V.style.display="block",ye.focus();return}n.class=St(f("class")),n.text=f("text"),n.icon=f("icon"),n.locked||(n.visibility=f("visibility")),!n.tool&&!n.locked?(n.url=f("url"),n.permission=f("permission")):n.touched=!0;const F=f("badgeText"),he=f("badgeCount"),Ee=te._read();if(n.badge=F||he?{...F&&{text:F},...he&&{countFrom:he},...Ee&&{variant:Ee}}:null,f("renderAs")==="pill"){const oe=Ce._read();n.pill={style:f("pillStyle")||"filled",...oe&&{variant:oe}}}else n.pill=null;n.colour=j._read();const fe=f("hlHover"),$=f("hlActive"),ne=T._read();if(n.highlight=fe||$||ne?{...fe&&{hover:fe},...$&&{active:$},...ne&&{accent:ne}}:null,k&&(n.description=f("description").trim(),n.tile=Te._read(),n.chip=!ue&&_e.checked,ue)){const oe=f("featureTone");n.panel=$t({heading:f("panelHeading"),link:{text:f("panelLinkText"),url:f("panelLinkUrl")},columns:f("panelColumns"),chipsLabel:f("panelChipsLabel"),feature:oe?{tone:oe,eyebrow:f("featureEyebrow"),title:f("featureTitle"),points:f("featurePoints").split(`
-`),button:{text:f("featureBtnText"),url:f("featureBtnUrl")}}:null})}xe=!0,_.close(!0),l()})}let K=null,bt=!1;function an(){bt||!window.R?.use||(bt=!0,R.use((n,d,i)=>{const r=d?.path||"";return!(Qt.test(r)&&(n?.path||"")!==r)||!K?.dirty()?i():E.confirm(`You have unsaved changes to the menu "${Ye(K.name())}". Leave anyway? They are kept as a draft for your next visit.`).then(k=>{k?i():history.replaceState(null,"",`#${r}`)})}),M.subscribe("router:afterChange",({to:n}={})=>{if(K&&(n?.path||"")!==K.path){const d=K;K=null,d.dispose()}}))}function yt(n,d){const i=n.querySelector(".dm-plugin-banner-name"),r=i?.querySelector(".dm-plugin-banner-sep");if(!(!i||!r)){for(;r.nextSibling;)r.nextSibling.remove();i.appendChild(document.createTextNode(d))}}export const menuEditorView={templateUrl:"/admin/js/templates/menu-editor.html",async onMount(n){if(an(),K){const e=K;K=null,e.dispose()}const d=[],i=e=>(d.push(e),e);let r=!1;const l=n.get(0).querySelector(".mex")||n.get(0),k=()=>!r&&l.isConnected,L=location.hash.replace(/^#/,""),u=location.hash.match(/^#\/menus\/edit\/([^?#]+)/),q=u?decodeURIComponent(u[1]):null,C=!q,Q=`menu-editor.draft.${q||"new"}`,N=E.loader(n.get(0),{type:"dots"});let v,le,Z,se,ee,ie,ve;try{if(C)v={slug:"",name:"",description:"",items:[]};else try{v=await P.menus.get(q)}catch(e){E.toast(`Failed to load menu: ${e.message||e}`,{type:"error"}),location.hash="#/menus";return}[le,Z,se,ee,ie,ve]=await Promise.all([P.projects.list().catch(()=>[]),H.get("/api/auth/permissions-registry").catch(()=>({resources:[]})),P.collections.list().catch(()=>[]),P.get("/collections/roles/entries?limit=100").catch(()=>null),P.menuLocations.registry().catch(()=>[]),P.pages.list().catch(()=>[])])}finally{N.destroy()}if(!l.isConnected)return;const be=(Array.isArray(ee)?ee:ee?.entries||[]).map(e=>({name:e.data?.name,label:e.data?.label,level:e.data?.level??99})).filter(e=>e.name).sort((e,o)=>o.level-e.level),D=!C&&q===Jt;let $e=[];if(D&&($e=await H.get("/api/sidebar/registered-items").catch(()=>(E.toast("Could not load the Tools - they are not shown, and saving keeps their places as they are.",{type:"warning",duration:8e3}),[])),!l.isConnected))return;const Ce=e=>ft(D?_t(Tt(e||[],$e,{forEditor:!0}),{leaveInHiddenFolders:!0}):e);let h=Ce(v.items);const j=M.observable(!1),re=M.observable(!1),Pe=M.observable(""),Le=M.observable(0);let G="";const T=l.querySelector("#me-items-list");function ye(){en(T,h,D),Le.value=h.filter(e=>!ge(e)).length}const B=()=>{ye(),Y()},V=()=>D?vt(h):new Set,ce=e=>h.find(o=>o.id===e);function de(e){requestAnimationFrame(()=>T.querySelector(`.menu-tree-row[data-id="${CSS.escape(e)}"]`)?.focus())}function Te(e){const o=g=>h.find(s=>!s.type&&!s.url&&!s.tool&&(s.key||"").toLowerCase()===g)||h.find(s=>!s.type&&!s.url&&!s.tool&&!s.key&&(s.text||"").toLowerCase()===g);let a=o(String(e.tool.folder||"").toLowerCase())||o(Bt);const p=String(e.tool.group||"").trim();if(a&&p){const g=Ht(a.key||Nt(a.text),p),s=c=>c!==e&&!c.type&&!c.url&&!c.tool;let w=h.find(c=>s(c)&&(c.key||"").toLowerCase()===g)||h.find(c=>s(c)&&c.parentId===a.id&&(!c.key||c.key.toLowerCase()===g)&&(c.text||"").toLowerCase()===p.toLowerCase());w||([w]=ft([{text:p,key:g,icon:Rt,synthesised:!0}],a.id),h.push(w)),a=w}e.parentId=a?a.id:null,h.splice(h.indexOf(e),1),h.push(e),Object.assign(e,{text:e.tool.defaults.text,icon:e.tool.defaults.icon,visibility:"",hidden:!1,badge:null,pill:null,colour:"",highlight:null,touched:!1}),e.tool={...e.tool,persisted:!1}}const _e=e=>!V().has(e.id)&&!(e.tool&&!e.tool.orphan);async function je(e){const o=ce(e);if(!o||!_e(o))return;const a=c=>{let X=c;for(;X;){if(X.id===e)return!0;X=h.find(z=>z.id===X.parentId)}return!1},p=h.filter(c=>c.id!==e&&a(c));if(p.length&&!await E.confirm(`Remove "${Ye(o.text||o.type||"this item")}" and the ${p.length} item${p.length===1?"":"s"} beneath it?`))return;const g=V(),s=p.filter(c=>c.tool),w=p.filter(c=>!c.tool&&g.has(c.id));h=h.filter(c=>!a(c)||s.includes(c)||w.includes(c));for(const c of w)c.parentId=o.parentId??null;for(const c of s)c.tool.orphan?c.parentId=o.parentId??null:Te(c);B()}function ue(e){const o=ce(e);!o||ge(o)||V().has(e)||(o.hidden=!o.hidden,o.touched=!0,B())}function x(e){const o=ce(e);!o||ge(o)||(o.locked=D&&V().has(o.id),on(o,Z.resources||[],se,be,()=>{B(),de(e)},{cards:!D}))}function O(e){const o={id:Ge(),parentId:null,...e==="separator"||e==="theme-switcher"?{type:e}:e==="spacer"?{type:e,size:"md"}:{text:"",url:"/",icon:"",visibility:"",permission:"",hidden:!1,bundled:!1}};h.push(o),B(),ge(o)?de(o.id):x(o.id)}const ke=e=>o=>{e(o)&&(B(),de(o))},Fe=ke(e=>gt(h,e,-1)),Me=ke(e=>gt(h,e,1)),Ie=ke(e=>Ut(h,e)),ze=ke(e=>Gt(h,e));function Je(e){const o=ce(e);if(!o)return[];const a=ge(o),p=V().has(e),g=Vt(h,e),s=g.findIndex(z=>z.id===e),w=o.tool,c=w&&(w.persisted||o.touched),X=z=>()=>{const Oe=Wt(h,e,z,Ge());B(),Oe&&!ge(Oe)?x(Oe.id):Oe&&de(Oe.id)};return[{header:a?{separator:"Separator",spacer:"Spacer","theme-switcher":"Theme switcher"}[o.type]:o.text||w?.label||"(untitled)"},...a?[]:[{label:"Edit\u2026",icon:"edit",action:()=>x(e)}],{type:"divider"},{label:"Add item below",icon:"plus",action:X("item")},{label:"Add sub-item",icon:"corner-down-right",disabled:a,action:()=>{const z=Ft(h,e,Ge());B(),z&&x(z.id)}},{label:"Add separator below",icon:"minus",action:X("separator")},{label:"Add spacer below",icon:"move",action:X("spacer")},...D?[]:[{label:"Add theme switcher below",icon:"palette",action:X("theme-switcher")}],{type:"divider"},{label:"Move up",icon:"arrow-up",shortcut:"Alt+\u2191",disabled:s<=0,action:()=>Fe(e)},{label:"Move down",icon:"arrow-down",shortcut:"Alt+\u2193",disabled:s<0||s>=g.length-1,action:()=>Me(e)},{label:"Indent",icon:"chevron-right",shortcut:"Alt+\u2192",disabled:s<=0||ge(g[s-1]),action:()=>Ie(e)},{label:"Outdent",icon:"chevron-left",shortcut:"Alt+\u2190",disabled:o.parentId==null,action:()=>ze(e)},{type:"divider"},...a?[]:[{label:o.hidden?"Show":"Hide",icon:o.hidden?"eye":"eye-off",disabled:p,action:()=>ue(e)}],{label:"Duplicate",icon:"copy",disabled:!!w,action:()=>{const z=zt(h,e,Ge);B(),z&&de(z.id)}},...w&&!w.orphan&&c?[{label:"Back to its default place",icon:"rotate-ccw",action:()=>{Te(o),B()}}]:[],{label:p?"Remove - always in the sidebar":w&&!w.orphan?"Remove - a Tool is hidden, not removed":"Remove\u2026",icon:"trash",danger:!0,disabled:!_e(o),action:()=>je(e)}]}const me=E.contextMenu(T,{cursor:"glyph",match:".menu-tree-row",inherit:!1,density:"compact",items:e=>Je(e.dataset.id)});i(()=>me?.destroy?.());const Qe=Lt(T,()=>h,B,{items:".menu-tree-row",handle:".menu-tree-grip"});i(()=>Qe?.destroy());const Ue=e=>{const o=e.target.closest(".menu-tree-row");if(!o)return;const a=o.dataset.id;if(e.target.closest(".mex-kebab")){at(e.target.closest(".mex-kebab"));return}if(e.target.closest(".me-hidden")){ue(a);return}if(e.target.closest(".me-edit")){x(a);return}e.target.closest("select, .menu-tree-grip, button")||x(a)},We=e=>{const o=e.target.closest(".menu-tree-row");if(!o||e.target!==o){o&&e.key==="F10"&&e.shiftKey&&(e.preventDefault(),at(o));return}const a=o.dataset.id;if(e.key==="F10"&&e.shiftKey)e.preventDefault(),at(o);else if(e.key==="Enter")e.preventDefault(),x(a);else if(e.key==="Delete")e.preventDefault(),je(a);else if(e.altKey&&e.key==="ArrowUp")e.preventDefault(),Fe(a);else if(e.altKey&&e.key==="ArrowDown")e.preventDefault(),Me(a);else if(e.altKey&&e.key==="ArrowRight")e.preventDefault(),Ie(a);else if(e.altKey&&e.key==="ArrowLeft")e.preventDefault(),ze(a);else if(e.key==="ArrowDown"||e.key==="ArrowUp"){const p=[...T.querySelectorAll(".menu-tree-row")],g=p.indexOf(o)+(e.key==="ArrowDown"?1:-1);p[g]&&(e.preventDefault(),p[g].focus())}},Ke=e=>{if(!e.target.matches(".me-spacer-size"))return;const o=ce(e.target.closest(".menu-tree-row")?.dataset.id);o&&(o.size=e.target.value,Y())};T.addEventListener("click",Ue),T.addEventListener("keydown",We),T.addEventListener("change",Ke),i(()=>{T.removeEventListener("click",Ue),T.removeEventListener("keydown",We),T.removeEventListener("change",Ke)});const t=e=>n.find(e),we=t("#me-float-accent"),pe=t("#me-float-accent-hex"),He=()=>{pe.get(0).style.display=we.val()==="__custom__"?"":"none"},Ne=()=>we.val()==="__custom__"?pe.val():we.val(),U=t("#me-highlight-accent"),_=t("#me-highlight-accent-hex"),Re=()=>{_.get(0).style.display=U.val()==="__custom__"?"":"none"},Ze=()=>U.val()==="__custom__"?_.val():U.val(),xe=()=>{const e=!!(t("#me-entrance-enabled").get(0)||{}).checked;t(".dm-entrance-field").each(function(){this.style.display=e?"":"none"});const o=t("#me-position").val()==="floating";t(".dm-float-field").each(function(){this.style.display=o?"":"none"}),o&&He();const a=t("#me-orientation").val()==="vertical";t(".dm-vertical-field").each(function(){this.style.display=a?"":"none"}),t(".dm-dock-rail-field").each(function(){this.style.display=a&&!o?"":"none"}),t(".dm-dock-bar-field").each(function(){this.style.display=!a&&!o?"":"none"});const p=!!(t("#me-dock-collapsible").get(0)||{}).checked,g=!!(t("#me-dock-autohide").get(0)||{}).checked;t(".dm-dock-collapsed-field").each(function(){this.style.display=p&&!g?"":"none"});const s=!!(t("#me-float-collapsible").get(0)||{}).checked;t(".dm-float-collapsed-field").each(function(){this.style.display=o&&s?"":"none"});const w=!a&&!D;t(".dm-look-field").each(function(){this.style.display=w?"":"none"});const c=w&&t("#me-look-dropdown").val()==="cards";t(".dm-look-cards-field").each(function(){this.style.display=c?"":"none"})},Se=(e,o,a,p)=>{const g=t(e).get(0);g&&(g.innerHTML="",g.add(new Option(p,"")),o.forEach(s=>g.add(new Option(a[s]||s,s))))};Se("#me-highlight-hover",dt,mt,"- theme default -"),Se("#me-highlight-active",ut,pt,"- theme default -");{const e=t("#me-entrance-animation").get(0);e&&(e.innerHTML="",nt.forEach(o=>e.add(new Option(At[o]||o,o))))}const Be=t("#me-bind-slot"),Ae=t("#me-bind-projects"),f=t("#me-bind-pages");Be.html('<option value="">- not bound -</option>'+(ie||[]).map(e=>`<option value="${A(e.slot)}">${A(e.label||e.slot)} (${A(e.slot)})</option>`).join("")),Ae.html(le.map(e=>`<option value="${A(e.slug)}">${A(e.name||e.slug)}</option>`).join("")),t("#me-bind-page-pick").html('<option value="">- pick a page -</option>'+ve.map(e=>{const o=e.urlPath||e.url||"";return o?`<option value="${A(o)}">${A(e.title||o)} - ${A(o)}</option>`:""}).join(""));const m=()=>Mt({slot:Be.val(),projects:Array.from(Ae.get(0).selectedOptions).map(e=>e.value),pagesText:f.val()});function F(){const e=m(),o=t("#me-bind-summary");if(!e){o.html('<span class="text-muted">Not bound - this menu renders only where it is mapped or placed by a shortcode.</span>');return}const a=[];e.projects.length&&a.push(`pages in ${e.projects.map(s=>`<code>${A(s)}</code>`).join(", ")}`),e.pages.length&&a.push(`pages matching ${e.pages.map(s=>`<code>${A(s)}</code>`).join(", ")}`);const p=e.pages.filter(s=>!/^\/[^\s?#*]*(\/\*)?$|^\/\*$/.test(s)),g=p.length?`<div class="text-danger" style="margin-top:.4rem">Not valid page patterns: ${p.map(s=>`<code>${A(s)}</code>`).join(", ")}</div>`:"";o.html(a.length?`Takes over the <code>${A(e.slot)}</code> slot on ${a.join(" and ")}.${g}`:`<span class="text-warning">Slot <code>${A(e.slot)}</code> selected but no project or page chosen - the binding will never match.</span>`)}const{getProjectFromHash:he}=await import("../lib/project-context.js");if(!k())return;const Ee=C?he():null;t("#me-project").html('<option value="">- none -</option>'+le.map(e=>`<option value="${A(e.slug)}">${A(e.name||e.slug)}</option>`).join(""));function fe(e){h=Ce(e.items),t("#me-variant").val(e.variant||""),t("#me-position").val(e.position||"");const o=t("#me-appearOnHover").get(0);o&&(o.checked=e.appearOnHover===!0),t("#me-float-anchor").val(e.float?.anchor||"TL"),t("#me-float-offsetX").val(e.float?.offsetX??""),t("#me-float-offsetY").val(e.float?.offsetY??""),t("#me-float-width").val(e.float?.width??""),t("#me-float-radius").val(e.float?.radius??""),t("#me-float-shadow").val(e.float?.shadow||""),t("#me-float-opacity").val(e.float?.opacity??""),t("#me-float-title").val(e.float?.title||"");for(const[s,w]of[["#me-float-collapsible",e.float?.collapsible],["#me-float-collapsed",e.float?.collapsed],["#me-float-movable",e.float?.movable],["#me-float-resizable",e.float?.resizable]]){const c=t(s).get(0);c&&(c.checked=w===!0)}const a=e.float?.accent||"";we.val(a.startsWith("#")?"__custom__":a),a.startsWith("#")&&pe.val(a),He(),t("#me-orientation").val(e.orientation||""),t("#me-align").val(e.align||""),t("#me-mobile-hamburger").get(0).checked=e.mobile?.hamburgerOnly===!0,t("#me-mobile-brand").get(0).checked=e.mobile?.hideBrand===!0,t("#me-look-bar").val(e.look?.bar||""),t("#me-look-brand").val(e.look?.brand||""),t("#me-look-strip").val(e.look?.strip||""),t("#me-look-dropdown").val(e.look?.dropdown||""),t("#me-look-tiles").val(e.look?.tiles||""),t("#me-look-morph").get(0).checked=e.look?.morph===!0,t("#me-side").val(e.side||"left"),t("#me-dock-width").val(e.dock?.width??"");for(const s of["collapsible","collapsed","autohide","hideOnScroll"]){const w=t(`#me-dock-${s}`).get(0);w&&(w.checked=e.dock?.[s]===!0)}t("#me-class").val(e.class||""),t("#me-highlight-hover").val(e.highlight?.hover||""),t("#me-highlight-active").val(e.highlight?.active||"");const p=e.highlight?.accent||"";U.val(p.startsWith("#")?"__custom__":p),p.startsWith("#")&&_.val(p),Re();{const s=t("#me-entrance-enabled").get(0);s&&(s.checked=e.entrance?.enabled===!0)}t("#me-entrance-animation").val(nt.includes(e.entrance?.animation)?e.entrance.animation:nt[0]),t("#me-entrance-stagger").val(e.entrance?.stagger??""),t("#me-entrance-duration").val(e.entrance?.duration??""),t("#me-fontFamily").val(e.style?.fontFamily||""),t("#me-fontSize").val(e.style?.fontSize||""),t("#me-fontWeight").val(e.style?.fontWeight||""),t("#me-letterSpacing").val(e.style?.letterSpacing||""),t("#me-iconSize").val(e.style?.iconSize||""),Be.val(e.binding?.slot||"");const g=new Set(e.binding?.projects||[]);Array.from(Ae.get(0).options).forEach(s=>{s.selected=g.has(s.value)}),f.val((e.binding?.pages||[]).join(`
-`)),t("#me-slug").val(e.slug||""),t("#me-name").val(e.name||""),t("#me-description").val(e.description||""),t("#me-project").val(e.meta?.project||Ee||""),xe(),F(),ye()}const $=e=>!!(t(e).get(0)||{}).checked;function ne(){const e={variant:t("#me-variant").val(),position:t("#me-position").val(),appearOnHover:$("#me-appearOnHover"),floatAnchor:t("#me-float-anchor").val(),floatOffsetX:t("#me-float-offsetX").val(),floatOffsetY:t("#me-float-offsetY").val(),floatWidth:t("#me-float-width").val(),floatRadius:t("#me-float-radius").val(),floatShadow:t("#me-float-shadow").val(),floatAccent:Ne(),floatOpacity:t("#me-float-opacity").val(),floatTitle:t("#me-float-title").val(),floatCollapsible:$("#me-float-collapsible"),floatCollapsed:$("#me-float-collapsed"),floatMovable:$("#me-float-movable"),floatResizable:$("#me-float-resizable"),highlightHover:t("#me-highlight-hover").val(),highlightActive:t("#me-highlight-active").val(),highlightAccent:Ze(),class:t("#me-class").val(),entranceEnabled:$("#me-entrance-enabled"),entranceAnimation:t("#me-entrance-animation").val(),entranceStagger:t("#me-entrance-stagger").val(),entranceDuration:t("#me-entrance-duration").val(),orientation:t("#me-orientation").val(),align:t("#me-align").val(),side:t("#me-side").val(),fontFamily:t("#me-fontFamily").val(),fontSize:t("#me-fontSize").val(),fontWeight:t("#me-fontWeight").val(),letterSpacing:t("#me-letterSpacing").val(),iconSize:t("#me-iconSize").val(),dockWidth:t("#me-dock-width").val(),dockCollapsible:$("#me-dock-collapsible"),dockCollapsed:$("#me-dock-collapsed"),dockAutohide:$("#me-dock-autohide"),mobileHamburgerOnly:$("#me-mobile-hamburger"),mobileHideBrand:$("#me-mobile-brand"),lookBar:t("#me-look-bar").val(),lookDropdown:t("#me-look-dropdown").val(),lookBrand:t("#me-look-brand").val(),lookStrip:t("#me-look-strip").val(),lookTiles:t("#me-look-tiles").val(),lookMorph:$("#me-look-morph"),dockHideOnScroll:$("#me-dock-hideOnScroll")},o={slug:t("#me-slug").val(),name:t("#me-name").val(),description:t("#me-description").val(),project:t("#me-project").val()};return Kt(e,o,m(),Ot(h),v.meta||{})}const oe=e=>[...qt(e),...ht(e.class).map(o=>`CSS classes: ${o} (Behaviour tab).`)];let lt=!1,et=null;function Y(){if(!G)return;const e=ne();et=e,j.value=Ve(e)!==G,Pe.value=j.peek()||lt?oe(e).join(" "):""}const qe=e=>{e.target.closest("#me-items-list")||(e.target.matches("#me-position, #me-orientation, #me-look-dropdown, #me-float-collapsible, #me-dock-collapsible, #me-dock-autohide, #me-entrance-enabled")&&xe(),e.target.matches("#me-float-accent")&&He(),e.target.matches("#me-highlight-accent")&&Re(),e.target.closest("#me-binding")&&F(),Y())};l.addEventListener("input",qe),l.addEventListener("change",qe),i(()=>{l.removeEventListener("input",qe),l.removeEventListener("change",qe)}),t("#me-bind-page-add").on("click",()=>{const e=t("#me-bind-page-pick").val();if(!e)return;const o=f.val().split(`
+`),placeholder:"One per line, up to six"})),t=y("Button text",O("featureBtnText",x.feature?.button?.text,"Book a demo",60)),we=y("Button URL",O("featureBtnUrl",x.feature?.button?.url,"/book",500)),pe=b("div",{},J(Ue,We),Ke,J(t,we));pe.style.display=me.value?"":"none",me.addEventListener("change",()=>{pe.style.display=me.value?"":"none"});const He=k?[u("Card dropdown"),b("small",{className:"form-hint",style:"display:block;opacity:.7;margin-bottom:.4rem",textContent:"Used when the menu's Dropdown style is Cards (Behaviour tab)."}),de,J(Te,ue?null:je),...ue?[ke,J(Fe,Me),J(ze,Je),Qe,pe]:[]]:[],Ne=b("button",{className:"btn btn-primary",textContent:"Apply",title:"Apply to the item (Ctrl+Enter) - Save the menu to keep it"}),U=b("div",{className:"me-item-form"},u("Link"),q,Q,N,u("Access"),J(le,se),u("Badge"),J(ee,te),ve,u("Appearance"),D,h,j,u("Highlighting"),J(Pe,G),T,...He,u("Styling"),B,Ne),_=E.slideover({title:L?`Edit ${Ye(L)}`:"Edit menu item",size:"lg",position:"right"});_.element.appendChild(U);const Re=()=>JSON.stringify([...U.querySelectorAll("input, select, textarea")].map(m=>m.type==="checkbox"?m.checked:m.value)),Ze=Re();let Se=!1,xe=!1;Pt(_);const Be=_.close.bind(_);_.close=async m=>{if(!Se&&m!==!0&&Re()!==Ze){if(xe)return;xe=!0;const F=await E.confirm("Discard the changes to this item?");if(xe=!1,!F)return}return Se=!0,Be()},U.addEventListener("keydown",m=>{(m.ctrlKey||m.metaKey)&&m.key==="Enter"&&(m.preventDefault(),Ne.click())}),_.open();const Ae=_.element.closest(".dm-slideover")||_.element.querySelector(".dm-slideover")||_.element;Ae.style.setProperty("width",Xt+"px","important"),Ae.style.setProperty("max-width","95vw","important"),Domma.icons.scan(U);const f=m=>U.querySelector(`[name="${m}"]`)?.value||"";Ne.addEventListener("click",()=>{const m=ht(f("class"));if(m.length){V.textContent=m.join("; "),V.style.display="block",ye.focus();return}n.class=xt(f("class")),n.text=f("text"),n.icon=f("icon"),n.locked||(n.visibility=f("visibility")),!n.tool&&!n.locked?(n.url=f("url"),n.permission=f("permission")):n.touched=!0;const F=f("badgeText"),he=f("badgeCount"),Ee=te._read();if(n.badge=F||he?{...F&&{text:F},...he&&{countFrom:he},...Ee&&{variant:Ee}}:null,f("renderAs")==="pill"){const oe=Ce._read();n.pill={style:f("pillStyle")||"filled",...oe&&{variant:oe}}}else n.pill=null;n.colour=j._read();const fe=f("hlHover"),$=f("hlActive"),ne=T._read();if(n.highlight=fe||$||ne?{...fe&&{hover:fe},...$&&{active:$},...ne&&{accent:ne}}:null,k&&(n.description=f("description").trim(),n.tile=Te._read(),n.chip=!ue&&_e.checked,ue)){const oe=f("featureTone");n.panel=$t({heading:f("panelHeading"),link:{text:f("panelLinkText"),url:f("panelLinkUrl")},columns:f("panelColumns"),chipsLabel:f("panelChipsLabel"),feature:oe?{tone:oe,eyebrow:f("featureEyebrow"),title:f("featureTitle"),points:f("featurePoints").split(`
+`),button:{text:f("featureBtnText"),url:f("featureBtnUrl")}}:null})}Se=!0,_.close(!0),l()})}let K=null,bt=!1;function an(){bt||!window.R?.use||(bt=!0,R.use((n,d,i)=>{const r=d?.path||"";return!(Qt.test(r)&&(n?.path||"")!==r)||!K?.dirty()?i():E.confirm(`You have unsaved changes to the menu "${Ye(K.name())}". Leave anyway? They are kept as a draft for your next visit.`).then(k=>{k?i():history.replaceState(null,"",`#${r}`)})}),M.subscribe("router:afterChange",({to:n}={})=>{if(K&&(n?.path||"")!==K.path){const d=K;K=null,d.dispose()}}))}function yt(n,d){const i=n.querySelector(".dm-plugin-banner-name"),r=i?.querySelector(".dm-plugin-banner-sep");if(!(!i||!r)){for(;r.nextSibling;)r.nextSibling.remove();i.appendChild(document.createTextNode(d))}}export const menuEditorView={templateUrl:"/admin/js/templates/menu-editor.html",async onMount(n){if(an(),K){const e=K;K=null,e.dispose()}const d=[],i=e=>(d.push(e),e);let r=!1;const l=n.get(0).querySelector(".mex")||n.get(0),k=()=>!r&&l.isConnected,L=location.hash.replace(/^#/,""),u=location.hash.match(/^#\/menus\/edit\/([^?#]+)/),q=u?decodeURIComponent(u[1]):null,C=!q,Q=`menu-editor.draft.${q||"new"}`,N=E.loader(n.get(0),{type:"dots"});let v,le,Z,se,ee,ie,ve;try{if(C)v={slug:"",name:"",description:"",items:[]};else try{v=await P.menus.get(q)}catch(e){E.toast(`Failed to load menu: ${e.message||e}`,{type:"error"}),location.hash="#/menus";return}[le,Z,se,ee,ie,ve]=await Promise.all([P.projects.list().catch(()=>[]),H.get("/api/auth/permissions-registry").catch(()=>({resources:[]})),P.collections.list().catch(()=>[]),P.get("/collections/roles/entries?limit=100").catch(()=>null),P.menuLocations.registry().catch(()=>[]),P.pages.list().catch(()=>[])])}finally{N.destroy()}if(!l.isConnected)return;const be=(Array.isArray(ee)?ee:ee?.entries||[]).map(e=>({name:e.data?.name,label:e.data?.label,level:e.data?.level??99})).filter(e=>e.name).sort((e,o)=>o.level-e.level),D=!C&&q===Jt;let $e=[];if(D&&($e=await H.get("/api/sidebar/registered-items").catch(()=>(E.toast("Could not load the Tools - they are not shown, and saving keeps their places as they are.",{type:"warning",duration:8e3}),[])),!l.isConnected))return;const Ce=e=>ft(D?_t(Tt(e||[],$e,{forEditor:!0}),{leaveInHiddenFolders:!0}):e);let h=Ce(v.items);const j=M.observable(!1),re=M.observable(!1),Pe=M.observable(""),Le=M.observable(0);let G="";const T=l.querySelector("#me-items-list");function ye(){en(T,h,D),Le.value=h.filter(e=>!ge(e)).length}const B=()=>{ye(),Y()},V=()=>D?vt(h):new Set,ce=e=>h.find(o=>o.id===e);function de(e){requestAnimationFrame(()=>T.querySelector(`.menu-tree-row[data-id="${CSS.escape(e)}"]`)?.focus())}function Te(e){const o=g=>h.find(s=>!s.type&&!s.url&&!s.tool&&(s.key||"").toLowerCase()===g)||h.find(s=>!s.type&&!s.url&&!s.tool&&!s.key&&(s.text||"").toLowerCase()===g);let a=o(String(e.tool.folder||"").toLowerCase())||o(Bt);const p=String(e.tool.group||"").trim();if(a&&p){const g=Ht(a.key||Nt(a.text),p),s=c=>c!==e&&!c.type&&!c.url&&!c.tool;let w=h.find(c=>s(c)&&(c.key||"").toLowerCase()===g)||h.find(c=>s(c)&&c.parentId===a.id&&(!c.key||c.key.toLowerCase()===g)&&(c.text||"").toLowerCase()===p.toLowerCase());w||([w]=ft([{text:p,key:g,icon:Rt,synthesised:!0}],a.id),h.push(w)),a=w}e.parentId=a?a.id:null,h.splice(h.indexOf(e),1),h.push(e),Object.assign(e,{text:e.tool.defaults.text,icon:e.tool.defaults.icon,visibility:"",hidden:!1,badge:null,pill:null,colour:"",highlight:null,touched:!1}),e.tool={...e.tool,persisted:!1}}const _e=e=>!V().has(e.id)&&!(e.tool&&!e.tool.orphan);async function je(e){const o=ce(e);if(!o||!_e(o))return;const a=c=>{let X=c;for(;X;){if(X.id===e)return!0;X=h.find(z=>z.id===X.parentId)}return!1},p=h.filter(c=>c.id!==e&&a(c));if(p.length&&!await E.confirm(`Remove "${Ye(o.text||o.type||"this item")}" and the ${p.length} item${p.length===1?"":"s"} beneath it?`))return;const g=V(),s=p.filter(c=>c.tool),w=p.filter(c=>!c.tool&&g.has(c.id));h=h.filter(c=>!a(c)||s.includes(c)||w.includes(c));for(const c of w)c.parentId=o.parentId??null;for(const c of s)c.tool.orphan?c.parentId=o.parentId??null:Te(c);B()}function ue(e){const o=ce(e);!o||ge(o)||V().has(e)||(o.hidden=!o.hidden,o.touched=!0,B())}function x(e){const o=ce(e);!o||ge(o)||(o.locked=D&&V().has(o.id),on(o,Z.resources||[],se,be,()=>{B(),de(e)},{cards:!D}))}function O(e){const o={id:Ge(),parentId:null,...e==="separator"||e==="theme-switcher"?{type:e}:e==="spacer"?{type:e,size:"md"}:{text:"",url:"/",icon:"",visibility:"",permission:"",hidden:!1,bundled:!1}};h.push(o),B(),ge(o)?de(o.id):x(o.id)}const ke=e=>o=>{e(o)&&(B(),de(o))},Fe=ke(e=>gt(h,e,-1)),Me=ke(e=>gt(h,e,1)),Ie=ke(e=>Ut(h,e)),ze=ke(e=>Gt(h,e));function Je(e){const o=ce(e);if(!o)return[];const a=ge(o),p=V().has(e),g=Vt(h,e),s=g.findIndex(z=>z.id===e),w=o.tool,c=w&&(w.persisted||o.touched),X=z=>()=>{const Oe=Wt(h,e,z,Ge());B(),Oe&&!ge(Oe)?x(Oe.id):Oe&&de(Oe.id)};return[{header:a?{separator:"Separator",spacer:"Spacer","theme-switcher":"Theme switcher"}[o.type]:o.text||w?.label||"(untitled)"},...a?[]:[{label:"Edit\u2026",icon:"edit",action:()=>x(e)}],{type:"divider"},{label:"Add item below",icon:"plus",action:X("item")},{label:"Add sub-item",icon:"corner-down-right",disabled:a,action:()=>{const z=Ft(h,e,Ge());B(),z&&x(z.id)}},{label:"Add separator below",icon:"minus",action:X("separator")},{label:"Add spacer below",icon:"move",action:X("spacer")},...D?[]:[{label:"Add theme switcher below",icon:"palette",action:X("theme-switcher")}],{type:"divider"},{label:"Move up",icon:"arrow-up",shortcut:"Alt+\u2191",disabled:s<=0,action:()=>Fe(e)},{label:"Move down",icon:"arrow-down",shortcut:"Alt+\u2193",disabled:s<0||s>=g.length-1,action:()=>Me(e)},{label:"Indent",icon:"chevron-right",shortcut:"Alt+\u2192",disabled:s<=0||ge(g[s-1]),action:()=>Ie(e)},{label:"Outdent",icon:"chevron-left",shortcut:"Alt+\u2190",disabled:o.parentId==null,action:()=>ze(e)},{type:"divider"},...a?[]:[{label:o.hidden?"Show":"Hide",icon:o.hidden?"eye":"eye-off",disabled:p,action:()=>ue(e)}],{label:"Duplicate",icon:"copy",disabled:!!w,action:()=>{const z=zt(h,e,Ge);B(),z&&de(z.id)}},...w&&!w.orphan&&c?[{label:"Back to its default place",icon:"rotate-ccw",action:()=>{Te(o),B()}}]:[],{label:p?"Remove - always in the sidebar":w&&!w.orphan?"Remove - a Tool is hidden, not removed":"Remove\u2026",icon:"trash",danger:!0,disabled:!_e(o),action:()=>je(e)}]}const me=E.contextMenu(T,{cursor:"glyph",match:".menu-tree-row",inherit:!1,density:"compact",items:e=>Je(e.dataset.id)});i(()=>me?.destroy?.());const Qe=Lt(T,()=>h,B,{items:".menu-tree-row",handle:".menu-tree-grip"});i(()=>Qe?.destroy());const Ue=e=>{const o=e.target.closest(".menu-tree-row");if(!o)return;const a=o.dataset.id;if(e.target.closest(".mex-kebab")){at(e.target.closest(".mex-kebab"));return}if(e.target.closest(".me-hidden")){ue(a);return}if(e.target.closest(".me-edit")){x(a);return}e.target.closest("select, .menu-tree-grip, button")||x(a)},We=e=>{const o=e.target.closest(".menu-tree-row");if(!o||e.target!==o){o&&e.key==="F10"&&e.shiftKey&&(e.preventDefault(),at(o));return}const a=o.dataset.id;if(e.key==="F10"&&e.shiftKey)e.preventDefault(),at(o);else if(e.key==="Enter")e.preventDefault(),x(a);else if(e.key==="Delete")e.preventDefault(),je(a);else if(e.altKey&&e.key==="ArrowUp")e.preventDefault(),Fe(a);else if(e.altKey&&e.key==="ArrowDown")e.preventDefault(),Me(a);else if(e.altKey&&e.key==="ArrowRight")e.preventDefault(),Ie(a);else if(e.altKey&&e.key==="ArrowLeft")e.preventDefault(),ze(a);else if(e.key==="ArrowDown"||e.key==="ArrowUp"){const p=[...T.querySelectorAll(".menu-tree-row")],g=p.indexOf(o)+(e.key==="ArrowDown"?1:-1);p[g]&&(e.preventDefault(),p[g].focus())}},Ke=e=>{if(!e.target.matches(".me-spacer-size"))return;const o=ce(e.target.closest(".menu-tree-row")?.dataset.id);o&&(o.size=e.target.value,Y())};T.addEventListener("click",Ue),T.addEventListener("keydown",We),T.addEventListener("change",Ke),i(()=>{T.removeEventListener("click",Ue),T.removeEventListener("keydown",We),T.removeEventListener("change",Ke)});const t=e=>n.find(e),we=t("#me-float-accent"),pe=t("#me-float-accent-hex"),He=()=>{pe.get(0).style.display=we.val()==="__custom__"?"":"none"},Ne=()=>we.val()==="__custom__"?pe.val():we.val(),U=t("#me-highlight-accent"),_=t("#me-highlight-accent-hex"),Re=()=>{_.get(0).style.display=U.val()==="__custom__"?"":"none"},Ze=()=>U.val()==="__custom__"?_.val():U.val(),Se=()=>{const e=!!(t("#me-entrance-enabled").get(0)||{}).checked;t(".dm-entrance-field").each(function(){this.style.display=e?"":"none"});const o=t("#me-position").val()==="floating";t(".dm-float-field").each(function(){this.style.display=o?"":"none"}),o&&He();const a=t("#me-orientation").val()==="vertical";t(".dm-vertical-field").each(function(){this.style.display=a?"":"none"}),t(".dm-dock-rail-field").each(function(){this.style.display=a&&!o?"":"none"}),t(".dm-dock-bar-field").each(function(){this.style.display=!a&&!o?"":"none"});const p=!!(t("#me-dock-collapsible").get(0)||{}).checked,g=!!(t("#me-dock-autohide").get(0)||{}).checked;t(".dm-dock-collapsed-field").each(function(){this.style.display=p&&!g?"":"none"});const s=!!(t("#me-float-collapsible").get(0)||{}).checked;t(".dm-float-collapsed-field").each(function(){this.style.display=o&&s?"":"none"});const w=!a&&!D;t(".dm-look-field").each(function(){this.style.display=w?"":"none"});const c=w&&t("#me-look-dropdown").val()==="cards";t(".dm-look-cards-field").each(function(){this.style.display=c?"":"none"})},xe=(e,o,a,p)=>{const g=t(e).get(0);g&&(g.innerHTML="",g.add(new Option(p,"")),o.forEach(s=>g.add(new Option(a[s]||s,s))))};xe("#me-highlight-hover",dt,mt,"- theme default -"),xe("#me-highlight-active",ut,pt,"- theme default -");{const e=t("#me-entrance-animation").get(0);e&&(e.innerHTML="",nt.forEach(o=>e.add(new Option(At[o]||o,o))))}const Be=t("#me-bind-slot"),Ae=t("#me-bind-projects"),f=t("#me-bind-pages");Be.html('<option value="">- not bound -</option>'+(ie||[]).map(e=>`<option value="${A(e.slot)}">${A(e.label||e.slot)} (${A(e.slot)})</option>`).join("")),Ae.html(le.map(e=>`<option value="${A(e.slug)}">${A(e.name||e.slug)}</option>`).join("")),t("#me-bind-page-pick").html('<option value="">- pick a page -</option>'+ve.map(e=>{const o=e.urlPath||e.url||"";return o?`<option value="${A(o)}">${A(e.title||o)} - ${A(o)}</option>`:""}).join(""));const m=()=>Mt({slot:Be.val(),projects:Array.from(Ae.get(0).selectedOptions).map(e=>e.value),pagesText:f.val()});function F(){const e=m(),o=t("#me-bind-summary");if(!e){o.html('<span class="text-muted">Not bound - this menu renders only where it is mapped or placed by a shortcode.</span>');return}const a=[];e.projects.length&&a.push(`pages in ${e.projects.map(s=>`<code>${A(s)}</code>`).join(", ")}`),e.pages.length&&a.push(`pages matching ${e.pages.map(s=>`<code>${A(s)}</code>`).join(", ")}`);const p=e.pages.filter(s=>!/^\/[^\s?#*]*(\/\*)?$|^\/\*$/.test(s)),g=p.length?`<div class="text-danger" style="margin-top:.4rem">Not valid page patterns: ${p.map(s=>`<code>${A(s)}</code>`).join(", ")}</div>`:"";o.html(a.length?`Takes over the <code>${A(e.slot)}</code> slot on ${a.join(" and ")}.${g}`:`<span class="text-warning">Slot <code>${A(e.slot)}</code> selected but no project or page chosen - the binding will never match.</span>`)}const{getProjectFromHash:he}=await import("../lib/project-context.js");if(!k())return;const Ee=C?he():null;t("#me-project").html('<option value="">- none -</option>'+le.map(e=>`<option value="${A(e.slug)}">${A(e.name||e.slug)}</option>`).join(""));function fe(e){h=Ce(e.items),t("#me-variant").val(e.variant||""),t("#me-position").val(e.position||"");const o=t("#me-appearOnHover").get(0);o&&(o.checked=e.appearOnHover===!0),t("#me-float-anchor").val(e.float?.anchor||"TL"),t("#me-float-offsetX").val(e.float?.offsetX??""),t("#me-float-offsetY").val(e.float?.offsetY??""),t("#me-float-width").val(e.float?.width??""),t("#me-float-radius").val(e.float?.radius??""),t("#me-float-shadow").val(e.float?.shadow||""),t("#me-float-opacity").val(e.float?.opacity??""),t("#me-float-title").val(e.float?.title||"");for(const[s,w]of[["#me-float-collapsible",e.float?.collapsible],["#me-float-collapsed",e.float?.collapsed],["#me-float-movable",e.float?.movable],["#me-float-resizable",e.float?.resizable]]){const c=t(s).get(0);c&&(c.checked=w===!0)}const a=e.float?.accent||"";we.val(a.startsWith("#")?"__custom__":a),a.startsWith("#")&&pe.val(a),He(),t("#me-orientation").val(e.orientation||""),t("#me-align").val(e.align||""),t("#me-mobile-hamburger").get(0).checked=e.mobile?.hamburgerOnly===!0,t("#me-mobile-brand").get(0).checked=e.mobile?.hideBrand===!0,t("#me-look-bar").val(e.look?.bar||""),t("#me-look-brand").val(e.look?.brand||""),t("#me-look-strip").val(e.look?.strip||""),t("#me-look-dropdown").val(e.look?.dropdown||""),t("#me-look-tiles").val(e.look?.tiles||""),t("#me-look-morph").get(0).checked=e.look?.morph===!0,t("#me-look-shrink").get(0).checked=e.look?.shrink===!0,t("#me-side").val(e.side||"left"),t("#me-dock-width").val(e.dock?.width??"");for(const s of["collapsible","collapsed","autohide","hideOnScroll"]){const w=t(`#me-dock-${s}`).get(0);w&&(w.checked=e.dock?.[s]===!0)}t("#me-class").val(e.class||""),t("#me-highlight-hover").val(e.highlight?.hover||""),t("#me-highlight-active").val(e.highlight?.active||"");const p=e.highlight?.accent||"";U.val(p.startsWith("#")?"__custom__":p),p.startsWith("#")&&_.val(p),Re();{const s=t("#me-entrance-enabled").get(0);s&&(s.checked=e.entrance?.enabled===!0)}t("#me-entrance-animation").val(nt.includes(e.entrance?.animation)?e.entrance.animation:nt[0]),t("#me-entrance-stagger").val(e.entrance?.stagger??""),t("#me-entrance-duration").val(e.entrance?.duration??""),t("#me-fontFamily").val(e.style?.fontFamily||""),t("#me-fontSize").val(e.style?.fontSize||""),t("#me-fontWeight").val(e.style?.fontWeight||""),t("#me-letterSpacing").val(e.style?.letterSpacing||""),t("#me-iconSize").val(e.style?.iconSize||""),Be.val(e.binding?.slot||"");const g=new Set(e.binding?.projects||[]);Array.from(Ae.get(0).options).forEach(s=>{s.selected=g.has(s.value)}),f.val((e.binding?.pages||[]).join(`
+`)),t("#me-slug").val(e.slug||""),t("#me-name").val(e.name||""),t("#me-description").val(e.description||""),t("#me-project").val(e.meta?.project||Ee||""),Se(),F(),ye()}const $=e=>!!(t(e).get(0)||{}).checked;function ne(){const e={variant:t("#me-variant").val(),position:t("#me-position").val(),appearOnHover:$("#me-appearOnHover"),floatAnchor:t("#me-float-anchor").val(),floatOffsetX:t("#me-float-offsetX").val(),floatOffsetY:t("#me-float-offsetY").val(),floatWidth:t("#me-float-width").val(),floatRadius:t("#me-float-radius").val(),floatShadow:t("#me-float-shadow").val(),floatAccent:Ne(),floatOpacity:t("#me-float-opacity").val(),floatTitle:t("#me-float-title").val(),floatCollapsible:$("#me-float-collapsible"),floatCollapsed:$("#me-float-collapsed"),floatMovable:$("#me-float-movable"),floatResizable:$("#me-float-resizable"),highlightHover:t("#me-highlight-hover").val(),highlightActive:t("#me-highlight-active").val(),highlightAccent:Ze(),class:t("#me-class").val(),entranceEnabled:$("#me-entrance-enabled"),entranceAnimation:t("#me-entrance-animation").val(),entranceStagger:t("#me-entrance-stagger").val(),entranceDuration:t("#me-entrance-duration").val(),orientation:t("#me-orientation").val(),align:t("#me-align").val(),side:t("#me-side").val(),fontFamily:t("#me-fontFamily").val(),fontSize:t("#me-fontSize").val(),fontWeight:t("#me-fontWeight").val(),letterSpacing:t("#me-letterSpacing").val(),iconSize:t("#me-iconSize").val(),dockWidth:t("#me-dock-width").val(),dockCollapsible:$("#me-dock-collapsible"),dockCollapsed:$("#me-dock-collapsed"),dockAutohide:$("#me-dock-autohide"),mobileHamburgerOnly:$("#me-mobile-hamburger"),mobileHideBrand:$("#me-mobile-brand"),lookBar:t("#me-look-bar").val(),lookDropdown:t("#me-look-dropdown").val(),lookBrand:t("#me-look-brand").val(),lookStrip:t("#me-look-strip").val(),lookTiles:t("#me-look-tiles").val(),lookMorph:$("#me-look-morph"),lookShrink:$("#me-look-shrink"),dockHideOnScroll:$("#me-dock-hideOnScroll")},o={slug:t("#me-slug").val(),name:t("#me-name").val(),description:t("#me-description").val(),project:t("#me-project").val()};return Kt(e,o,m(),Ot(h),v.meta||{})}const oe=e=>[...qt(e),...ht(e.class).map(o=>`CSS classes: ${o} (Behaviour tab).`)];let lt=!1,et=null;function Y(){if(!G)return;const e=ne();et=e,j.value=Ve(e)!==G,Pe.value=j.peek()||lt?oe(e).join(" "):""}const qe=e=>{e.target.closest("#me-items-list")||(e.target.matches("#me-position, #me-orientation, #me-look-dropdown, #me-float-collapsible, #me-dock-collapsible, #me-dock-autohide, #me-entrance-enabled")&&Se(),e.target.matches("#me-float-accent")&&He(),e.target.matches("#me-highlight-accent")&&Re(),e.target.closest("#me-binding")&&F(),Y())};l.addEventListener("input",qe),l.addEventListener("change",qe),i(()=>{l.removeEventListener("input",qe),l.removeEventListener("change",qe)}),t("#me-bind-page-add").on("click",()=>{const e=t("#me-bind-page-pick").val();if(!e)return;const o=f.val().split(`
 `).map(a=>a.trim()).filter(Boolean);o.includes(e)||o.push(e),f.val(o.join(`
 `)),F(),Y()}),fe(v),G=Ve(ne()),Y();const st=()=>{try{S.remove?S.remove(Q):S.set(Q,null)}catch{}};async function tt(){if(re.peek())return;const e=ne(),o=oe(e);if(o.length){lt=!0,Y(),E.toast(o.join(" "),{type:"warning",duration:7e3});return}re.value=!0;try{if(C)await P.menus.create(e);else if(e.slug!==v.slug){await P.menus.create(e);const a=await P.menuLocations.get();let p=!1;for(const[g,s]of Object.entries(a))s===v.slug&&(a[g]=e.slug,p=!0);p&&await P.menuLocations.save(a),await P.menus.remove(v.slug)}else await P.menus.update(v.slug,e);if(G=Ve(e),j.value=!1,st(),jt("#/menus"),E.toast("Saved.",{type:"success"}),C||e.slug!==v.slug)location.hash="#/menus/edit/"+encodeURIComponent(e.slug);else{v={...v,...e};for(const a of h)a.tool&&a.touched&&(a.tool={...a.tool,persisted:!0});ye(),G=Ve(ne()),Y(),yt(n.get(0),e.name||e.slug)}if(D)try{document.dispatchEvent(new CustomEvent("dm:sidebar-rebuild"))}catch{}}catch(a){E.toast(`Save failed: ${a.message||a}`,{type:"error"})}finally{re.value=!1}}async function kt(){!j.peek()||!await E.confirm("Throw away the changes you have not saved?")||(fe(v),Y())}E.tabs(t("#me-tabs").get(0));const wt=M.applyBindings({dirty:j,saving:re,problems:Pe,itemCount:Le},l,{methods:{save:()=>tt(),discard:()=>kt(),addItem:()=>O("item"),addSeparator:()=>O("separator"),addSpacer:()=>O("spacer"),addSwitcher:()=>O("theme-switcher")}});i(()=>wt.dispose()),i(Dt(l,{position:"bottom"})),D&&t("#me-add-switcher").hide(),yt(n.get(0),C?"New menu":v.name||v.slug),ot(n,{id:"menu-editor-back",icon:"arrow-left",title:"All menus",onClick:()=>{location.hash="#/menus"}}),ot(n,{id:"menu-editor-locations",icon:"map-pin",title:"Menu locations",onClick:()=>{location.hash="#/menu-locations"}}),ot(n,{id:"menu-editor-save",icon:"save",title:"Save (Ctrl+S)",onClick:()=>tt()});const it=e=>{if(!(!(e.ctrlKey||e.metaKey)||e.key!=="s")){if(e.preventDefault(),e.stopImmediatePropagation(),document.querySelector(".me-item-form")?.offsetParent){E.toast("Apply the item first (Ctrl+Enter), then Save.",{type:"info"});return}tt()}};document.addEventListener("keydown",it,!0),i(()=>document.removeEventListener("keydown",it,!0));const rt=()=>{if(!(!j.peek()||!et))try{S.set(Q,{menu:et,base:G,at:new Date().toISOString()})}catch{}},ct=e=>{j.peek()&&(rt(),e.preventDefault(),e.returnValue="")};window.addEventListener("beforeunload",ct),i(()=>window.removeEventListener("beforeunload",ct)),K={path:L,dirty:()=>j.peek(),name:()=>t("#me-name").val()||v.name||v.slug||"new menu",dispose(){r=!0,rt(),d.splice(0).reverse().forEach(e=>{try{e()}catch{}})}},I.scan(l);let ae=null;try{ae=S.get(Q)}catch{}if(ae?.menu){st();const e=ae.base&&ae.base!==G,o=ae.at?` (${Yt(ae.at)})`:"",a=C?"the new menu you started":`the menu "${Ye(v.name||v.slug)}"`,p=e?`You left unsaved changes to ${a}${o}, but the saved menu has changed since. Restore your version anyway?`:`You left unsaved changes to ${a}${o}. Restore them?`;await E.confirm(p)&&k()&&(fe({...ae.menu,meta:{...v.meta||{},...ae.menu.meta||{}}}),Y())}}};

package/docs/DommaFeatures.md

@@ -353,7 +353,7 @@ headings (Layouts → Page contents settings, and `[contents]` per page).
 - **Bindings** - a menu can take over a slot only on chosen pages or projects.
 - **Overlay slot** - menus bound to the core `overlay` slot render as floating panels anywhere on the page; floating panels can be collapsible, movable, resizable, with radius, shadow, accent and opacity. Since 0.42.0.
 - **Presentation** - variant, position (sticky, fixed, static, floating), orientation (vertical navbar docks as a side rail), alignment (left, centre, right, spread), and highlight effects for hover (colour, underline, overline, background, uppercase, grow, breathe, glow) and current page (bold, underline, overline, background, darken, pill).
-- **Pill bar and card dropdowns** - a menu's `look` block, for the horizontal public navbar: `bar: pill` gathers the items into one rounded capsule with a soft pill on hover and on the current page; `brand: pill` gives the logo and name a capsule of their own; a pill bar drops the band and its line so the pills float over the page top on frosted glass (`strip: band` keeps it; `strip: none` floats any bar; desktop only); `dropdown: cards` opens each dropdown as a large card with a coloured icon tile and a line of description per sub-item, in columns (a sub-item with its own sub-items becomes a headed column). `tiles` picks rainbow (default), accent, neutral or none; `morph` slides one card into the next. Per item: `description`, `tile` colour, `chip` (a small chip in the card's footer strip). A top-level item's `panel` adds a heading with a "See all" link, `columns`, a chip strip label and a side box (`feature`: dark/light/accent, eyebrow, title, up to six points, a button). The mobile drawer keeps tiles and descriptions as a list. Page override: `[navbar bar=… dropdown=… tiles=… morph=… /]`. Navbar only - the `[menu]` shortcode is unchanged. Vocabulary in `public/js/menu-look.mjs` (shared by server and browser), drawing in `menu-cards.mjs` + `menu-cards.css`.
+- **Pill bar and card dropdowns** - a menu's `look` block, for the horizontal public navbar: `bar: pill` gathers the items into one rounded capsule with a soft pill on hover and on the current page; `bar` can also be `segmented` (a tray with a sliding thumb), `underline` (a gliding underline, no tray), `dock` (items swell under the pointer) or `neon` (glowing tray and items); `shrink: true` tightens the bar on scroll. `brand: pill` gives the logo and name a capsule of their own; a pill bar drops the band and its line so the pills float over the page top on frosted glass (`strip: band` keeps it; `strip: none` floats any bar; desktop only); `dropdown: cards` opens each dropdown as a large card with a coloured icon tile and a line of description per sub-item, in columns (a sub-item with its own sub-items becomes a headed column). `tiles` picks rainbow (default), accent, neutral or none; `morph` slides one card into the next. Per item: `description`, `tile` colour, `chip` (a small chip in the card's footer strip). A top-level item's `panel` adds a heading with a "See all" link, `columns`, a chip strip label and a side box (`feature`: dark/light/accent, eyebrow, title, up to six points, a button). The mobile drawer keeps tiles and descriptions as a list. Page override: `[navbar bar=… dropdown=… tiles=… morph=… /]`. Navbar only - the `[menu]` shortcode is unchanged. Vocabulary in `public/js/menu-look.mjs` (shared by server and browser), drawing in `menu-cards.mjs` + `menu-cards.css`.
   - Where: **Content > Menus > Behaviour** (Bar shape, Dropdown style) and each item's **Card dropdown** section
 - **`[menu]` shortcode** - render a menu by `slug` or `location` inline, with `depth`, `orientation` and `float="no"` per placement; per-user filtering is server-side.
 

package/docs/markdown-shortcodes.md

@@ -774,7 +774,7 @@ nothing itself.
 Every Behaviour setting of a menu is an attribute: `position`, `orientation`, `side`, `align`,
 `variant`, `hover-open`, `hover`, `selected`, `accent`, `class`, `font`, `font-size`, `font-weight`,
 `letter-spacing`, `icon-size`, `width`, `collapsible`, `collapsed`, `autohide`, `hide-on-scroll`, the look's
-`bar` (`pill`), `brand` (`pill`), `strip` (`none`, `band`), `dropdown` (`cards`), `tiles` and `morph`, and the floating panel's `float-anchor`, `float-x`, `float-y`, `float-width`, `float-radius`, `float-shadow`,
+`bar` (`pill`, `segmented`, `underline`, `dock`, `neon`), `shrink`, `brand` (`pill`), `strip` (`none`, `band`), `dropdown` (`cards`), `tiles` and `morph`, and the floating panel's `float-anchor`, `float-x`, `float-y`, `float-width`, `float-radius`, `float-shadow`,
 `float-accent`, `float-opacity`, `float-title`, `float-collapsible`, `float-collapsed`, `float-movable`,
 `float-resizable`. `true` / `false` switch a setting on or off (so a page can turn off what the menu
 turns on); an empty value clears it back to the default. The first `[navbar]` on a page counts. The

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "File-based CMS powered by Domma and Fastify. Run npx domma-cms my-site to create a new project.",
   "type": "module",
   "main": "server/server.js",

package/public/css/menu-cards.css

@@ -1 +1 @@
-@media(min-width:993px){#site-navbar.dm-nav-bar-pill:not(.dm-nav-vertical) .navbar-nav{gap:2px;padding:5px;border-radius:999px;background:color-mix(in srgb,currentColor 5%,transparent);border:1px solid color-mix(in srgb,currentColor 12%,transparent);box-shadow:var(--dm-shadow-sm);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}#site-navbar.dm-nav-bar-pill:not(.dm-nav-vertical) .navbar-nav>li>.navbar-link,#site-navbar.dm-nav-bar-pill:not(.dm-nav-vertical) .navbar-nav>li>.navbar-dropdown-toggle{border-radius:999px;padding:.45rem .95rem;transition:background-color .15s ease,color .15s ease}#site-navbar.dm-nav-bar-pill:not(.dm-nav-vertical):not([data-menu-hover]) .navbar-nav>li>.navbar-link:not([data-menu-item-hover]):hover,#site-navbar.dm-nav-bar-pill:not(.dm-nav-vertical):not([data-menu-hover]) .navbar-nav>li>.navbar-dropdown-toggle:not([data-menu-item-hover]):hover,#site-navbar.dm-nav-bar-pill:not(.dm-nav-vertical):not([data-menu-hover]) .navbar-nav>.navbar-dropdown.open>.navbar-dropdown-toggle{background:color-mix(in srgb,currentColor 10%,transparent)!important;color:inherit!important;text-decoration:none!important}#site-navbar.dm-nav-bar-pill:not(.dm-nav-vertical):not([data-menu-active]) .navbar-nav>li>.navbar-link.active:not([data-menu-item-active]){background:color-mix(in srgb,currentColor 14%,transparent)!important;box-shadow:none!important}#site-navbar.dm-nav-bar-pill:not(.dm-nav-vertical):not([data-menu-active]) .navbar-nav>li>.navbar-link.active:not([data-menu-item-active]):after{display:none!important}}@media(min-width:993px){#site-navbar.dm-nav-brand-pill:not(.dm-nav-vertical) .navbar-brand:has(img,svg,[data-icon]){padding-left:.55rem}#site-navbar.dm-nav-brand-pill:not(.dm-nav-vertical) .navbar-brand{display:inline-flex;align-items:center;padding:.3rem 1.1rem;border-radius:999px;background:color-mix(in srgb,currentColor 5%,transparent);border:1px solid color-mix(in srgb,currentColor 12%,transparent);box-shadow:var(--dm-shadow-sm);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}}@media(min-width:993px){#site-navbar.dm-nav-no-strip:not(.dm-nav-vertical){position:fixed!important;top:0;left:0;right:0;background:transparent!important;border-color:transparent!important;border-bottom-width:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}#site-navbar.dm-nav-no-strip:not(.dm-nav-vertical) .navbar-nav,#site-navbar.dm-nav-no-strip.dm-nav-brand-pill:not(.dm-nav-vertical) .navbar-brand{background:color-mix(in srgb,var(--dm-surface) 80%,transparent);border-color:color-mix(in srgb,var(--dm-text) 10%,transparent);box-shadow:var(--dm-shadow-md);color:var(--dm-text)}#site-navbar.dm-nav-no-strip:not(.dm-nav-vertical) .navbar-nav>li>.navbar-link,#site-navbar.dm-nav-no-strip:not(.dm-nav-vertical) .navbar-nav>li>.navbar-dropdown-toggle,#site-navbar.dm-nav-no-strip.dm-nav-brand-pill:not(.dm-nav-vertical) .navbar-brand :is(a,.navbar-brand-text){color:var(--dm-text)}body.dm-nav-floating-pills>.site-main{padding-top:calc(2rem + var(--dm-nav-float-h, 76px))}}#site-navbar .dm-nc-card .dm-nc-link{display:flex!important;align-items:flex-start;gap:.8rem;white-space:normal;text-decoration:none}#site-navbar .dm-nc-tile{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.65rem;color:var(--dm-nc-tone, var(--dm-primary));background:color-mix(in srgb,var(--dm-nc-tone, var(--dm-primary)) 13%,var(--dm-surface));border:1px solid color-mix(in srgb,var(--dm-nc-tone, var(--dm-primary)) 28%,transparent)}#site-navbar .dm-nc-tile svg{width:1.1rem;height:1.1rem;margin:0!important}#site-navbar .dm-nc-icon{flex:0 0 auto;margin:.15rem 0 0!important}#site-navbar .dm-nc-card .dm-nc-link:not(:has(.dm-nc-desc)){align-items:center}#site-navbar .dm-nc-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}#site-navbar .dm-nc-title{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--dm-text);line-height:1.3}#site-navbar .dm-nc-desc{font-size:.82rem;font-weight:400;line-height:1.4;color:var(--dm-text-muted)}#site-navbar .dm-nc-card .dm-nc-skip,#site-navbar .dm-nc-card [hidden]{display:none!important}@keyframes dm-nc-in{0%{clip-path:inset(0 0 calc(100% - 1.5rem) 0 round 18px);transform:translate(calc(-50% + var(--dm-nc-shift, 0px))) translateY(-4px)}to{clip-path:inset(-20px -20px -40px -20px round 18px);transform:translate(calc(-50% + var(--dm-nc-shift, 0px)))}}@media(min-width:993px){#site-navbar:not(.dm-nav-vertical) .navbar-nav>.navbar-dropdown>.dm-nc-card{left:50%;right:auto;transform:translate(calc(-50% + var(--dm-nc-shift, 0px)));margin-top:.75rem;padding:1.1rem;min-width:0;width:max-content;max-width:calc(100vw - 2rem);max-height:none!important;overflow:visible!important;border-radius:18px;border:1px solid var(--dm-border);background:var(--dm-surface);color:var(--dm-text);box-shadow:var(--dm-shadow-xl);column-gap:.5rem;row-gap:.25rem;grid-template-columns:repeat(var(--dm-nc-cols, 2),minmax(13rem,16.5rem));align-items:start}#site-navbar:not(.dm-nav-vertical) .navbar-nav>.navbar-dropdown>.dm-nc-card.dm-nc-has-feature{grid-template-columns:repeat(var(--dm-nc-cols, 2),minmax(13rem,16.5rem)) minmax(15rem,17rem)}#site-navbar:not(.dm-nav-vertical) .navbar-nav>.navbar-dropdown.open>.dm-nc-card{display:grid}#site-navbar:not(.dm-nav-vertical) .navbar-nav>.navbar-dropdown.open>.dm-nc-card:not([data-nc-morph]){animation:dm-nc-in .22s cubic-bezier(.2,.8,.2,1)}#site-navbar:not(.dm-nav-vertical) .dm-nc-card:before{content:"";position:absolute;top:-7px;left:var(--dm-nc-caret, 50%);width:12px;height:12px;margin-left:-6px;background:var(--dm-surface);border-top:1px solid var(--dm-border);border-left:1px solid var(--dm-border);transform:rotate(45deg);border-top-left-radius:3px}#site-navbar:not(.dm-nav-vertical) .dm-nc-card:after{content:"";position:absolute;left:0;right:0;top:-.85rem;height:.85rem}#site-navbar:not(.dm-nav-vertical) .dm-nc-card>li{grid-row:var(--dm-nc-r, auto);grid-column:var(--dm-nc-c, auto);list-style:none;min-width:0}#site-navbar .dm-nc-card .dm-nc-link{padding:.6rem .7rem;border-radius:12px;font-size:var(--dm-font-size-sm);background:transparent;transition:background-color .15s ease}#site-navbar .dm-nc-card .dm-nc-link:hover,#site-navbar .dm-nc-card .dm-nc-link:focus-visible{background:var(--dm-hover-bg)!important;color:var(--dm-text)!important;border-radius:12px;text-decoration:none!important}#site-navbar .dm-nc-card>.dm-nc-head{--dm-nc-r: 1;--dm-nc-c: 1 / span var(--dm-nc-cols, 2);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.15rem .7rem .45rem}#site-navbar .dm-nc-eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dm-text-muted)}#site-navbar .dm-nc-more{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--dm-font-size-sm);font-weight:600;color:var(--dm-text);text-decoration:none;white-space:nowrap}#site-navbar .dm-nc-more:hover .dm-nc-arrow{transform:translate(2px)}#site-navbar .dm-nc-arrow{transition:transform .15s ease;display:inline-flex}#site-navbar .dm-nc-card .dm-nc-group>.navbar-submenu-toggle{pointer-events:none;padding:.3rem .7rem;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dm-text-muted);background:none!important}#site-navbar .dm-nc-card .dm-nc-group>.navbar-submenu-toggle .navbar-caret,#site-navbar .dm-nc-card .dm-nc-group>.navbar-submenu-toggle svg{display:none}#site-navbar .dm-nc-card .dm-nc-group>.navbar-dropdown-menu{display:block;position:static;margin:0;padding:0;min-width:0;border:0;box-shadow:none;background:none}#site-navbar .dm-nc-card>.dm-nc-feature{--dm-nc-c: calc(var(--dm-nc-cols, 2) + 1);--dm-nc-r: 1 / span var(--dm-nc-rows, 1);align-self:stretch;margin-left:.5rem}#site-navbar .dm-nc-feature-box{display:flex;flex-direction:column;gap:.55rem;height:100%;padding:1rem 1.1rem;border-radius:14px}#site-navbar .dm-nc-feature--dark .dm-nc-feature-box{color:#f5f3ff;background:radial-gradient(120% 80% at 100% 100%,color-mix(in srgb,var(--dm-primary) 45%,transparent),transparent 60%),linear-gradient(160deg,#1d1a33,#0e0d1c)}#site-navbar .dm-nc-feature--accent .dm-nc-feature-box{color:var(--dm-primary-text);background:var(--dm-primary)}#site-navbar .dm-nc-feature--light .dm-nc-feature-box{color:var(--dm-text);background:color-mix(in srgb,var(--dm-text) 4%,var(--dm-surface));border:1px solid var(--dm-border)}#site-navbar .dm-nc-feature-eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.75}#site-navbar .dm-nc-feature-title{font-size:1.05rem}#site-navbar .dm-nc-points{margin:.1rem 0 0;display:flex;flex-direction:column;gap:.45rem;font-size:.85rem}#site-navbar .dm-nc-point{display:flex;gap:.5rem;align-items:flex-start;line-height:1.35}#site-navbar .dm-nc-point-tick{flex:0 0 auto;width:1rem;height:1rem;margin-top:.1rem;border-radius:50%;border:1.5px solid currentColor;opacity:.85;position:relative}#site-navbar .dm-nc-point-tick:after{content:"";position:absolute;left:.27rem;top:.13rem;width:.25rem;height:.45rem;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}#site-navbar .dm-nc-feature-btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .9rem;border-radius:999px;font-size:var(--dm-font-size-sm);font-weight:600;text-decoration:none;background:#fff;color:#15131f}#site-navbar .dm-nc-feature--light .dm-nc-feature-btn{background:var(--dm-primary);color:var(--dm-primary-text)}#site-navbar .dm-nc-card>.dm-nc-chips{--dm-nc-c: 1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:.6rem -1.1rem -1.1rem;padding:.75rem 1.4rem;border-top:1px solid var(--dm-border);border-radius:0 0 18px 18px;background:color-mix(in srgb,var(--dm-text) 3%,var(--dm-surface))}}#site-navbar .dm-nc-chips-label{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dm-text-muted)}#site-navbar .dm-nc-chips-row{display:flex;flex-wrap:wrap;gap:.4rem}#site-navbar .dm-nc-card .dm-nc-chip{display:inline-flex!important;align-items:center;gap:.35rem;padding:.22rem .7rem!important;border-radius:999px!important;border:1px solid var(--dm-border);background:var(--dm-surface);color:var(--dm-text-secondary);font-size:.8rem;white-space:nowrap}#site-navbar .dm-nc-card .dm-nc-chip svg{width:.85rem;height:.85rem;margin:0!important}#site-navbar .dm-nc-card .dm-nc-chip:hover{background:var(--dm-hover-bg)!important;color:var(--dm-text)!important;border-radius:999px!important}@media(max-width:992px){#site-navbar .dm-nc-card .dm-nc-link{padding:.55rem 1rem}#site-navbar .dm-nc-tile{width:2rem;height:2rem;border-radius:.55rem}#site-navbar .dm-nc-card>.dm-nc-head{display:flex;justify-content:space-between;padding:.5rem 1rem .25rem}#site-navbar .dm-nc-eyebrow,#site-navbar .dm-nc-chips-label{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dm-text-muted)}#site-navbar .dm-nc-more{font-size:.8rem;font-weight:600}#site-navbar .dm-nc-card>.dm-nc-feature,#site-navbar .dm-nc-card>.dm-nc-chips{padding:.5rem 1rem}#site-navbar .dm-nc-feature-box{padding:.75rem .9rem;border-radius:12px;display:flex;flex-direction:column;gap:.4rem}#site-navbar .dm-nc-feature--dark .dm-nc-feature-box{color:#f5f3ff;background:linear-gradient(160deg,#1d1a33,#0e0d1c)}#site-navbar .dm-nc-feature--accent .dm-nc-feature-box{color:var(--dm-primary-text);background:var(--dm-primary)}#site-navbar .dm-nc-feature--light .dm-nc-feature-box{background:var(--dm-hover-bg)}#site-navbar .dm-nc-feature-eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.75}#site-navbar .dm-nc-feature-title{font-size:1rem}#site-navbar .dm-nc-points{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem}#site-navbar .dm-nc-point-tick{display:none}#site-navbar .dm-nc-feature-btn{font-weight:600;text-decoration:underline;color:inherit}#site-navbar .dm-nc-chips{display:flex;flex-direction:column;gap:.4rem}}
+@media(min-width:993px){#site-navbar.dm-nav-tray:not(.dm-nav-vertical) .navbar-nav{gap:2px;padding:5px;border-radius:999px;background:color-mix(in srgb,currentColor 5%,transparent);border:1px solid color-mix(in srgb,currentColor 12%,transparent);box-shadow:var(--dm-shadow-sm);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}#site-navbar.dm-nav-tray:not(.dm-nav-vertical) .navbar-nav>li>.navbar-link,#site-navbar.dm-nav-tray:not(.dm-nav-vertical) .navbar-nav>li>.navbar-dropdown-toggle{border-radius:999px;padding:.45rem .95rem;transition:background-color .15s ease,color .15s ease}#site-navbar.dm-nav-bar-pill:not(.dm-nav-vertical):not([data-menu-hover]) .navbar-nav>li>.navbar-link:not([data-menu-item-hover]):hover,#site-navbar.dm-nav-bar-pill:not(.dm-nav-vertical):not([data-menu-hover]) .navbar-nav>li>.navbar-dropdown-toggle:not([data-menu-item-hover]):hover,#site-navbar.dm-nav-bar-pill:not(.dm-nav-vertical):not([data-menu-hover]) .navbar-nav>.navbar-dropdown.open>.navbar-dropdown-toggle{background:color-mix(in srgb,currentColor 10%,transparent)!important;color:inherit!important;text-decoration:none!important}#site-navbar.dm-nav-bar-pill:not(.dm-nav-vertical):not([data-menu-active]) .navbar-nav>li>.navbar-link.active:not([data-menu-item-active]){background:color-mix(in srgb,currentColor 14%,transparent)!important;box-shadow:none!important}#site-navbar.dm-nav-bar-pill:not(.dm-nav-vertical):not([data-menu-active]) .navbar-nav>li>.navbar-link.active:not([data-menu-item-active]):after{display:none!important}}@media(min-width:993px){#site-navbar:is(.dm-nav-bar-segmented,.dm-nav-bar-underline,.dm-nav-bar-dock,.dm-nav-bar-neon):not(.dm-nav-vertical):not([data-menu-hover]) .navbar-nav>li>:is(.navbar-link,.navbar-dropdown-toggle):not([data-menu-item-hover]):hover,#site-navbar:is(.dm-nav-bar-segmented,.dm-nav-bar-underline,.dm-nav-bar-dock,.dm-nav-bar-neon):not(.dm-nav-vertical):not([data-menu-hover]) .navbar-nav>.navbar-dropdown.open>.navbar-dropdown-toggle{background:transparent!important;color:inherit!important;text-decoration:none!important}#site-navbar:is(.dm-nav-bar-segmented,.dm-nav-bar-underline):not(.dm-nav-vertical):not([data-menu-active]) .navbar-nav>li>.navbar-link.active:not([data-menu-item-active]){background:transparent!important;box-shadow:none!important}#site-navbar:is(.dm-nav-bar-segmented,.dm-nav-bar-underline,.dm-nav-bar-dock,.dm-nav-bar-neon):not(.dm-nav-vertical):not([data-menu-active]) .navbar-nav>li>.navbar-link.active:not([data-menu-item-active]):after{display:none!important}#site-navbar .navbar-nav:has(>.dm-nav-glider){position:relative}#site-navbar .navbar-nav>li:not(.dm-nav-glider){position:relative;z-index:1}#site-navbar .navbar-nav>.dm-nav-glider{position:absolute;left:0;top:0;width:var(--dm-glide-w, 0px);height:var(--dm-glide-h, 0px);transform:translate(var(--dm-glide-x, 0px),var(--dm-glide-y, 0px));opacity:var(--dm-glide-o, 0);pointer-events:none;list-style:none;z-index:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1),opacity .2s ease}#site-navbar .navbar-nav>.dm-nav-glider.is-jump{transition:opacity .2s ease}#site-navbar.dm-nav-bar-segmented:not(.dm-nav-vertical) .navbar-nav{background:color-mix(in srgb,currentColor 8%,transparent)}#site-navbar.dm-nav-bar-segmented .navbar-nav>.dm-nav-glider{border-radius:999px;background:color-mix(in srgb,var(--dm-primary) 14%,var(--dm-surface));box-shadow:var(--dm-shadow-sm),inset 0 0 0 1px color-mix(in srgb,var(--dm-primary) 22%,transparent)}#site-navbar.dm-nav-bar-underline .navbar-nav>.dm-nav-glider{border-radius:2px;background:var(--dm-primary)}#site-navbar.dm-nav-bar-dock:not(.dm-nav-vertical) .navbar-nav{align-items:flex-end}#site-navbar.dm-nav-bar-dock:not(.dm-nav-vertical) .navbar-nav>li>:is(.navbar-link,.navbar-dropdown-toggle){transform:scale(var(--dm-dock-s, 1));transform-origin:50% 85%;transition:transform .18s ease-out}#site-navbar.dm-nav-bar-dock:not(.dm-nav-vertical) .navbar-nav>li>:is(.navbar-link,.navbar-dropdown-toggle) svg{width:1.15em;height:1.15em}#site-navbar.dm-nav-bar-neon:not(.dm-nav-vertical) .navbar-nav{border-color:color-mix(in srgb,var(--dm-primary) 70%,transparent)!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--dm-primary) 25%,transparent),0 0 18px color-mix(in srgb,var(--dm-primary) 35%,transparent),inset 0 0 12px color-mix(in srgb,var(--dm-primary) 12%,transparent)!important;animation:dm-nav-neon 3.2s ease-in-out infinite}#site-navbar.dm-nav-bar-neon:not(.dm-nav-vertical) .navbar-nav>li>:is(.navbar-link,.navbar-dropdown-toggle):hover,#site-navbar.dm-nav-bar-neon:not(.dm-nav-vertical) .navbar-nav>li>.navbar-link.active{color:var(--dm-primary)!important;text-shadow:0 0 10px color-mix(in srgb,var(--dm-primary) 60%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-primary) 55%,transparent),0 0 12px color-mix(in srgb,var(--dm-primary) 30%,transparent)!important}}@keyframes dm-nav-neon{50%{filter:brightness(1.12) saturate(1.2)}}@media(prefers-reduced-motion:reduce){#site-navbar .navbar-nav>.dm-nav-glider{transition:none}#site-navbar.dm-nav-bar-neon .navbar-nav{animation:none}}html.dm-reduced-motion #site-navbar .navbar-nav>.dm-nav-glider{transition:none}html.dm-reduced-motion #site-navbar.dm-nav-bar-neon .navbar-nav{animation:none}@media(min-width:993px){#site-navbar.dm-nav-shrinks:not(.dm-nav-vertical) .navbar-container,#site-navbar.dm-nav-shrinks:not(.dm-nav-vertical) .navbar-nav>li>:is(.navbar-link,.navbar-dropdown-toggle),#site-navbar.dm-nav-shrinks:not(.dm-nav-vertical) .navbar-brand{transition:padding .25s ease,font-size .25s ease,min-height .25s ease}#site-navbar.dm-nav-shrinks.is-shrunk:not(.dm-nav-vertical) .navbar-container{padding-top:.25rem;padding-bottom:.25rem;min-height:0}#site-navbar.dm-nav-shrinks.is-shrunk:not(.dm-nav-vertical) .navbar-nav>li>:is(.navbar-link,.navbar-dropdown-toggle){padding-top:.3rem;padding-bottom:.3rem}#site-navbar.dm-nav-shrinks.is-shrunk:not(.dm-nav-vertical) .navbar-brand{font-size:.9em}}@media(min-width:993px){#site-navbar.dm-nav-brand-pill:not(.dm-nav-vertical) .navbar-brand:has(img,svg,[data-icon]){padding-left:.55rem}#site-navbar.dm-nav-brand-pill:not(.dm-nav-vertical) .navbar-brand{display:inline-flex;align-items:center;padding:.3rem 1.1rem;border-radius:999px;background:color-mix(in srgb,currentColor 5%,transparent);border:1px solid color-mix(in srgb,currentColor 12%,transparent);box-shadow:var(--dm-shadow-sm);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}}@media(min-width:993px){#site-navbar.dm-nav-no-strip:not(.dm-nav-vertical){position:fixed!important;top:0;left:0;right:0;background:transparent!important;border-color:transparent!important;border-bottom-width:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}#site-navbar.dm-nav-no-strip:not(.dm-nav-vertical) .navbar-nav,#site-navbar.dm-nav-no-strip.dm-nav-brand-pill:not(.dm-nav-vertical) .navbar-brand{background:color-mix(in srgb,var(--dm-surface) 80%,transparent);border-color:color-mix(in srgb,var(--dm-text) 10%,transparent);box-shadow:var(--dm-shadow-md);color:var(--dm-text)}#site-navbar.dm-nav-no-strip:not(.dm-nav-vertical) .navbar-nav>li>.navbar-link,#site-navbar.dm-nav-no-strip:not(.dm-nav-vertical) .navbar-nav>li>.navbar-dropdown-toggle,#site-navbar.dm-nav-no-strip.dm-nav-brand-pill:not(.dm-nav-vertical) .navbar-brand :is(a,.navbar-brand-text){color:var(--dm-text)}body.dm-nav-floating-pills>.site-main{padding-top:calc(2rem + var(--dm-nav-float-h, 76px))}}#site-navbar .dm-nc-card .dm-nc-link{display:flex!important;align-items:flex-start;gap:.8rem;white-space:normal;text-decoration:none}#site-navbar .dm-nc-tile{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.65rem;color:var(--dm-nc-tone, var(--dm-primary));background:color-mix(in srgb,var(--dm-nc-tone, var(--dm-primary)) 13%,var(--dm-surface));border:1px solid color-mix(in srgb,var(--dm-nc-tone, var(--dm-primary)) 28%,transparent)}#site-navbar .dm-nc-tile svg{width:1.1rem;height:1.1rem;margin:0!important}#site-navbar .dm-nc-icon{flex:0 0 auto;margin:.15rem 0 0!important}#site-navbar .dm-nc-card .dm-nc-link:not(:has(.dm-nc-desc)){align-items:center}#site-navbar .dm-nc-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}#site-navbar .dm-nc-title{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--dm-text);line-height:1.3}#site-navbar .dm-nc-desc{font-size:.82rem;font-weight:400;line-height:1.4;color:var(--dm-text-muted)}#site-navbar .dm-nc-card .dm-nc-skip,#site-navbar .dm-nc-card [hidden]{display:none!important}@keyframes dm-nc-in{0%{clip-path:inset(0 0 calc(100% - 1.5rem) 0 round 18px);transform:translate(calc(-50% + var(--dm-nc-shift, 0px))) translateY(-4px)}to{clip-path:inset(-20px -20px -40px -20px round 18px);transform:translate(calc(-50% + var(--dm-nc-shift, 0px)))}}@media(min-width:993px){#site-navbar:not(.dm-nav-vertical) .navbar-nav>.navbar-dropdown>.dm-nc-card{left:50%;right:auto;transform:translate(calc(-50% + var(--dm-nc-shift, 0px)));margin-top:.75rem;padding:1.1rem;min-width:0;width:max-content;max-width:calc(100vw - 2rem);max-height:none!important;overflow:visible!important;border-radius:18px;border:1px solid var(--dm-border);background:var(--dm-surface);color:var(--dm-text);box-shadow:var(--dm-shadow-xl);column-gap:.5rem;row-gap:.25rem;grid-template-columns:repeat(var(--dm-nc-cols, 2),minmax(13rem,16.5rem));align-items:start}#site-navbar:not(.dm-nav-vertical) .navbar-nav>.navbar-dropdown>.dm-nc-card.dm-nc-has-feature{grid-template-columns:repeat(var(--dm-nc-cols, 2),minmax(13rem,16.5rem)) minmax(15rem,17rem)}#site-navbar:not(.dm-nav-vertical) .navbar-nav>.navbar-dropdown.open>.dm-nc-card{display:grid}#site-navbar:not(.dm-nav-vertical) .navbar-nav>.navbar-dropdown.open>.dm-nc-card:not([data-nc-morph]){animation:dm-nc-in .22s cubic-bezier(.2,.8,.2,1)}#site-navbar:not(.dm-nav-vertical) .dm-nc-card:before{content:"";position:absolute;top:-7px;left:var(--dm-nc-caret, 50%);width:12px;height:12px;margin-left:-6px;background:var(--dm-surface);border-top:1px solid var(--dm-border);border-left:1px solid var(--dm-border);transform:rotate(45deg);border-top-left-radius:3px}#site-navbar:not(.dm-nav-vertical) .dm-nc-card:after{content:"";position:absolute;left:0;right:0;top:-.85rem;height:.85rem}#site-navbar:not(.dm-nav-vertical) .dm-nc-card>li{grid-row:var(--dm-nc-r, auto);grid-column:var(--dm-nc-c, auto);list-style:none;min-width:0}#site-navbar .dm-nc-card .dm-nc-link{padding:.6rem .7rem;border-radius:12px;font-size:var(--dm-font-size-sm);background:transparent;transition:background-color .15s ease}#site-navbar .dm-nc-card .dm-nc-link:hover,#site-navbar .dm-nc-card .dm-nc-link:focus-visible{background:var(--dm-hover-bg)!important;color:var(--dm-text)!important;border-radius:12px;text-decoration:none!important}#site-navbar .dm-nc-card>.dm-nc-head{--dm-nc-r: 1;--dm-nc-c: 1 / span var(--dm-nc-cols, 2);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.15rem .7rem .45rem}#site-navbar .dm-nc-eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dm-text-muted)}#site-navbar .dm-nc-more{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--dm-font-size-sm);font-weight:600;color:var(--dm-text);text-decoration:none;white-space:nowrap}#site-navbar .dm-nc-more:hover .dm-nc-arrow{transform:translate(2px)}#site-navbar .dm-nc-arrow{transition:transform .15s ease;display:inline-flex}#site-navbar .dm-nc-card .dm-nc-group>.navbar-submenu-toggle{pointer-events:none;padding:.3rem .7rem;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dm-text-muted);background:none!important}#site-navbar .dm-nc-card .dm-nc-group>.navbar-submenu-toggle .navbar-caret,#site-navbar .dm-nc-card .dm-nc-group>.navbar-submenu-toggle svg{display:none}#site-navbar .dm-nc-card .dm-nc-group>.navbar-dropdown-menu{display:block;position:static;margin:0;padding:0;min-width:0;border:0;box-shadow:none;background:none}#site-navbar .dm-nc-card>.dm-nc-feature{--dm-nc-c: calc(var(--dm-nc-cols, 2) + 1);--dm-nc-r: 1 / span var(--dm-nc-rows, 1);align-self:stretch;margin-left:.5rem}#site-navbar .dm-nc-feature-box{display:flex;flex-direction:column;gap:.55rem;height:100%;padding:1rem 1.1rem;border-radius:14px}#site-navbar .dm-nc-feature--dark .dm-nc-feature-box{color:#f5f3ff;background:radial-gradient(120% 80% at 100% 100%,color-mix(in srgb,var(--dm-primary) 45%,transparent),transparent 60%),linear-gradient(160deg,#1d1a33,#0e0d1c)}#site-navbar .dm-nc-feature--accent .dm-nc-feature-box{color:var(--dm-primary-text);background:var(--dm-primary)}#site-navbar .dm-nc-feature--light .dm-nc-feature-box{color:var(--dm-text);background:color-mix(in srgb,var(--dm-text) 4%,var(--dm-surface));border:1px solid var(--dm-border)}#site-navbar .dm-nc-feature-eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.75}#site-navbar .dm-nc-feature-title{font-size:1.05rem}#site-navbar .dm-nc-points{margin:.1rem 0 0;display:flex;flex-direction:column;gap:.45rem;font-size:.85rem}#site-navbar .dm-nc-point{display:flex;gap:.5rem;align-items:flex-start;line-height:1.35}#site-navbar .dm-nc-point-tick{flex:0 0 auto;width:1rem;height:1rem;margin-top:.1rem;border-radius:50%;border:1.5px solid currentColor;opacity:.85;position:relative}#site-navbar .dm-nc-point-tick:after{content:"";position:absolute;left:.27rem;top:.13rem;width:.25rem;height:.45rem;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}#site-navbar .dm-nc-feature-btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .9rem;border-radius:999px;font-size:var(--dm-font-size-sm);font-weight:600;text-decoration:none;background:#fff;color:#15131f}#site-navbar .dm-nc-feature--light .dm-nc-feature-btn{background:var(--dm-primary);color:var(--dm-primary-text)}#site-navbar .dm-nc-card>.dm-nc-chips{--dm-nc-c: 1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:.6rem -1.1rem -1.1rem;padding:.75rem 1.4rem;border-top:1px solid var(--dm-border);border-radius:0 0 18px 18px;background:color-mix(in srgb,var(--dm-text) 3%,var(--dm-surface))}}#site-navbar .dm-nc-chips-label{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dm-text-muted)}#site-navbar .dm-nc-chips-row{display:flex;flex-wrap:wrap;gap:.4rem}#site-navbar .dm-nc-card .dm-nc-chip{display:inline-flex!important;align-items:center;gap:.35rem;padding:.22rem .7rem!important;border-radius:999px!important;border:1px solid var(--dm-border);background:var(--dm-surface);color:var(--dm-text-secondary);font-size:.8rem;white-space:nowrap}#site-navbar .dm-nc-card .dm-nc-chip svg{width:.85rem;height:.85rem;margin:0!important}#site-navbar .dm-nc-card .dm-nc-chip:hover{background:var(--dm-hover-bg)!important;color:var(--dm-text)!important;border-radius:999px!important}@media(max-width:992px){#site-navbar .dm-nc-card .dm-nc-link{padding:.55rem 1rem}#site-navbar .dm-nc-tile{width:2rem;height:2rem;border-radius:.55rem}#site-navbar .dm-nc-card>.dm-nc-head{display:flex;justify-content:space-between;padding:.5rem 1rem .25rem}#site-navbar .dm-nc-eyebrow,#site-navbar .dm-nc-chips-label{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dm-text-muted)}#site-navbar .dm-nc-more{font-size:.8rem;font-weight:600}#site-navbar .dm-nc-card>.dm-nc-feature,#site-navbar .dm-nc-card>.dm-nc-chips{padding:.5rem 1rem}#site-navbar .dm-nc-feature-box{padding:.75rem .9rem;border-radius:12px;display:flex;flex-direction:column;gap:.4rem}#site-navbar .dm-nc-feature--dark .dm-nc-feature-box{color:#f5f3ff;background:linear-gradient(160deg,#1d1a33,#0e0d1c)}#site-navbar .dm-nc-feature--accent .dm-nc-feature-box{color:var(--dm-primary-text);background:var(--dm-primary)}#site-navbar .dm-nc-feature--light .dm-nc-feature-box{background:var(--dm-hover-bg)}#site-navbar .dm-nc-feature-eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.75}#site-navbar .dm-nc-feature-title{font-size:1rem}#site-navbar .dm-nc-points{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem}#site-navbar .dm-nc-point-tick{display:none}#site-navbar .dm-nc-feature-btn{font-weight:600;text-decoration:underline;color:inherit}#site-navbar .dm-nc-chips{display:flex;flex-direction:column;gap:.4rem}}