@evotecit/canopyx 0.3.16 → 0.3.20

package/CanopyX.Html/Assets/canopyx-stack.css

@@ -0,0 +1,35 @@
+.cx-stack-host > .cx-grid{display:none;}
+.cx-stack{min-width:0;min-height:0;flex:1 1 auto;overflow:auto;padding:var(--hfx-space-3,0.75rem);color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));font:var(--hfx-weight-regular,400) var(--hfx-type-body-size,0.875rem) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);}
+.cx-stack-title-heading{font:var(--hfx-weight-semibold,600) var(--hfx-type-heading-size,0.9375rem) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);line-height:var(--hfx-type-heading-line,1.4);margin:0 0 var(--hfx-space-4,1rem);}
+.cx-stack-winner{border:var(--hfx-border-width,1px) solid var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a));border-radius:var(--hfx-radius-container,var(--hfx-radius-lg,10px));background:var(--hfx-color-status-good-bg,light-dark(#e2f0e9,#1f362f));padding:calc(var(--hfx-space-1,0.25rem)*3.5) var(--hfx-space-4,1rem);}
+.cx-stack-winner h3{color:var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a));font-size:var(--hfx-type-caption-size,0.75rem);margin:0 0 var(--hfx-space-1-5,6px);}
+.cx-stack-title{height:auto;text-align:start;white-space:normal;overflow-wrap:anywhere;}
+.cx-stack-title:hover{text-decoration:underline;}
+.cx-stack-order{font-size:var(--hfx-type-body-size,0.875rem);margin:var(--hfx-space-5,1.5rem) 0 calc(var(--hfx-space-1,0.25rem)*2.5);}
+.cx-stack-layers{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:calc(var(--hfx-space-1,0.25rem)*2.5);}
+.cx-stack-layer{display:flex;gap:var(--hfx-space-3,0.75rem);padding:calc(var(--hfx-space-1,0.25rem)*3.5);border:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-container,var(--hfx-radius-lg,10px));background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));break-inside:avoid;}
+.cx-stack-number{display:grid;place-items:center;flex:0 0 calc(var(--hfx-space-1,0.25rem)*7);align-self:start;min-height:calc(var(--hfx-space-1,0.25rem)*7);border:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:50%;font-size:var(--hfx-type-caption-size,0.75rem);font-variant-numeric:tabular-nums;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
+.cx-stack-body{min-width:0;flex:1;}
+.cx-stack-selected{border-color:var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a));}
+.cx-stack-filtered{border-style:dashed;}
+.cx-stack-reason{margin:var(--hfx-space-1-5,6px) 0;line-height:var(--hfx-type-body-line,1.5);overflow-wrap:anywhere;white-space:pre-wrap;}
+.cx-stack-context,.cx-stack-empty{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));margin:var(--hfx-space-1-5,6px) 0;font-size:var(--hfx-type-caption-size,0.75rem);overflow-wrap:anywhere;}
+.cx-stack-badges{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hfx-space-1,0.25rem);margin-top:var(--hfx-space-2,0.5rem);}
+.cx-stack-badges[hidden]{display:none;}
+@media (max-width: 640px){
+.cx-stack{padding:calc(var(--hfx-space-1,0.25rem)*2.5);}
+.cx-stack-layer{padding:var(--hfx-space-3,0.75rem) calc(var(--hfx-space-1,0.25rem)*2.5);gap:calc(var(--hfx-space-1,0.25rem)*2.5);}
+.cx-stack-title{min-height:calc(var(--hfx-space-1,0.25rem)*9);}
+.cx-stack-winner{padding:var(--hfx-space-3,0.75rem);}
+}
+@media print{
+.cx-stack-host,.cx-stack{height:auto !important;max-height:none !important;overflow:visible !important;}
+.cx-stack-host > .cx-grid{display:none !important;}
+.cx-stack-layers{display:block;}
+.cx-stack-layer{margin-bottom:calc(var(--hfx-space-1,0.25rem)*2.5);}
+.cx-stack-title{color:inherit;text-decoration:none;}
+.cx-stack-winner,.cx-stack-layer{break-inside:avoid;}
+}
+.cx-stack .cx-stack-title{color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));font-weight:var(--hfx-weight-semibold,600);font-size:var(--hfx-type-body-size,0.875rem);line-height:var(--hfx-type-body-line,1.5);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;justify-content:flex-start;min-height:0;}
+.cx-stack .cx-stack-title:hover{color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));background:transparent;text-decoration:underline;}
+.cx-stack .cx-stack-title:focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:var(--hfx-focus-offset,2px);}

package/CanopyX.Html/Assets/canopyx-stack.js

@@ -0,0 +1,24 @@
+(function(global){"use strict";const installed=new WeakSet();const part={version:"e29298edc07edb6d",install(context){if(installed.has(context.DataGrid.prototype))return;const{DataGrid,h,setText,fill,cellValue,cellText,badgeElement,applyTone,toneOf,PROTOCOL}=context;const STACK_TEXT={stackWinner:"Winner",stackEnforced:"Enforced",stackFiltered:"Filtered",stackEmpty:"No layers to display.",stackOrder:"Processing order",stackTruncated:"{shown} of {total} layers shown in processing order; the winning layer is always included."};const stackHasText=value=>typeof value==="string"&&/[^\u0009-\u000d\u0020\u0085\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000]/.test(value);
+const stackObject=(value,keys)=>!!value&&typeof value==="object"&&!Array.isArray(value)&&Object.keys(value).every(key=>keys.includes(key));function stackIdentifier(value){if(!stackHasText(value))return false;for(let index=0;index<value.length;index++){const code=value.charCodeAt(index);if(code>=0xd800&&code<=0xdbff){const next=value.charCodeAt(++index);if(!(next>=0xdc00&&next<=0xdfff))return false}
+else if(code>=0xdc00&&code<=0xdfff)return false}
+return true}
+function stackSettings(grid){grid.validateStackSource();const input=grid.view.stack,known=id=>grid.columns.some(column=>column.id===id);if(!stackObject(input,["titleColumn","layers"])||
+input.titleColumn!==undefined&&(!stackIdentifier(input.titleColumn)||!known(input.titleColumn))||
+!Array.isArray(input.layers)||input.layers.length>1000)
+throw new Error("CanopyX: a stack needs inline records, stable identities, known title columns and at most 1,000 layers.");const titleColumn=input.titleColumn||grid.columns.find(column=>column.rowHeader)?.id||grid.columns.find(column=>!column.hidden)?.id;if(!titleColumn)throw new Error("CanopyX: a stack needs a title column.");const records=new Map((grid.view.rows||[]).map(row=>[row.id,row])),ids=new Set();let winners=0;for(const layer of input.layers){if(!stackObject(layer,["id","record","reason","label","winner","enforced","filtered","badges"])||
+!stackIdentifier(layer.id)||!stackIdentifier(layer.record)||ids.has(layer.id)||!records.has(layer.record)||
+!stackHasText(layer.reason)||layer.label!==undefined&&typeof layer.label!=="string"||
+["winner","enforced","filtered"].some(name=>layer[name]!==undefined&&typeof layer[name]!=="boolean")||
+layer.badges!==undefined&&(!Array.isArray(layer.badges)||layer.badges.some(badge=>!stackObject(badge,["text","tone","title"])||typeof badge.text!=="string"||!badge.text||
+badge.tone!==undefined&&(typeof badge.tone!=="string"||!/^[a-z][a-z0-9-]{0,31}$/.test(badge.tone) || badge.tone.endsWith("-bg")) || badge.title !== undefined && typeof badge.title !== "string")))
+throw new Error("CanopyX: stack layers need unique ids, existing records, reasons and valid badges.");ids.add(layer.id);if(layer.winner)winners++;if(layer.winner&&layer.filtered)throw new Error("CanopyX: a filtered stack layer cannot be the winner.")}
+if(input.layers.length&&winners!==1)throw new Error("CanopyX: a nonempty stack needs exactly one host-supplied winner.");return{...input,titleColumn,records}}
+Object.assign(DataGrid.prototype,{validateStackSource(){if(this.view.source.kind!=="inline"||this.opts.source||this.view.rowIdentity==="ordinal")
+throw new Error("CanopyX: a stack requires stable inline records.")},startStack(){if(this.stack)return;const settings=stackSettings(this),labels={};for(const[key,text]of Object.entries(STACK_TEXT))labels[key]=this.opts.labels?.[key]||this.view.labels?.[key]||text;this.stack={settings,labels};const previousHidden=this.grid.hidden,pagerHidden=this.pager?.hidden;const toolbarHidden=this.toolbar.hidden,originalMaxHeight=this.fitInline??this.host.style.maxHeight;this.host.style.maxHeight=originalMaxHeight;this.toolbar.hidden=true;this.host.classList.add("cx-stack-host");this.grid.hidden=true;if(this.pager)this.pager.hidden=true;this.stackFrame=h("section","cx-stack");this.stackFrame.setAttribute("aria-label",this.view.label);this.host.insertBefore(this.stackFrame,this.grid.nextSibling);const repaint=()=>{try{this.stack.settings=stackSettings(this);if(this.stack.failure){this.stack.failure=false;this.setNotice("",false)}
+this.stackPaint()}catch(error){this.stack.settings={...this.stack.settings,records:new Map()};this.stack.failure=true;this.stackFrame.replaceChildren();this.setNotice(error.message,true);this.emit("error",{error})}};this.host.addEventListener("canopyx:format",repaint,{signal:this.lifetime.signal});this.host.addEventListener("canopyx:rowsChanged",repaint,{signal:this.lifetime.signal});this.lifetime.signal.addEventListener("abort",()=>{this.stackFrame.remove();this.host.classList.remove("cx-stack-host");this.grid.hidden=previousHidden;this.toolbar.hidden=toolbarHidden;this.host.style.maxHeight=originalMaxHeight;if(this.pager)this.pager.hidden=pagerHidden},{once:true});this.stackPaint()}});function stackRecordTemplate(text){const button=h("button","cx-btn cx-stack-title");button.type="button";setText(button,text);return button}
+function stackBadgesTemplate(layer,labels){const badges=h("div","cx-stack-badges");if(layer.winner)badges.appendChild(badgeElement({text:labels.stackWinner,tone:"success"}));if(layer.enforced)badges.appendChild(badgeElement({text:labels.stackEnforced,tone:"info"}));if(layer.filtered)badges.appendChild(badgeElement({text:labels.stackFiltered,tone:"neutral"}));for(const badge of layer.badges||[])badges.appendChild(badgeElement(badge));badges.hidden=!badges.childElementCount;return badges}
+function stackFrameTemplate(stack,frame,layers,recordButton,attachLayer){const stackBadges=layer=>stackBadgesTemplate(layer,stack.labels);const viewTitle=h("h2","cx-stack-title-heading");setText(viewTitle,this.view.label);frame.appendChild(viewTitle);if(!layers.length){const empty=h("p","cx-stack-empty");setText(empty,stack.labels.stackEmpty);frame.appendChild(empty);return null}
+const winner=layers.find(layer=>layer.winner),summary=h("header","cx-stack-winner"),summaryLabel=h("h3"),summaryTitle=recordButton(winner);applyTone(summary,"cx-stack-winner",toneOf("success"));setText(summaryLabel,stack.labels.stackWinner);summary.append(summaryLabel,summaryTitle);if(winner.label){const label=h("p","cx-stack-context");setText(label,winner.label);summary.appendChild(label)}
+const summaryReason=h("p","cx-stack-reason");setText(summaryReason,winner.reason);summary.append(summaryReason,stackBadges(winner));frame.appendChild(summary);const heading=h("h3","cx-stack-order"),list=h("ol","cx-stack-layers");heading.id=this.id+"-stack-order";setText(heading,stack.labels.stackOrder);list.setAttribute("aria-labelledby",heading.id);list.setAttribute("role","list");frame.append(heading,list);layers.forEach((layer,index)=>{const item=h("li","cx-stack-layer"),number=h("span","cx-stack-number"),body=h("div","cx-stack-body");item.dataset.cxStackLayer=layer.id;item.dataset.cxStackRecord=layer.record;item.classList.toggle("cx-stack-filtered",!!layer.filtered);item.classList.toggle("cx-stack-selected",!!layer.winner);number.setAttribute("aria-hidden","true");setText(number,String(index+1));const title=recordButton(layer),reason=h("p","cx-stack-reason");reason.id=this.id+"-stack-reason-"+index;title.setAttribute("aria-describedby",reason.id);setText(reason,layer.reason);body.appendChild(title);if(layer.label){const label=h("p","cx-stack-context");setText(label,layer.label);body.appendChild(label)}
+body.append(reason,stackBadges(layer));item.append(number,body);list.appendChild(item);attachLayer(title,list,index)});return list}
+Object.assign(DataGrid.prototype,{stackTitle(layer){const stack=this.stack,row=stack.settings.records.get(layer.record),column=this.columns.find(column=>column.id===stack.settings.titleColumn);return cellText(row.cells[column.id],column,this.fmt)||row.id},stackRecordButton(layer){const button=stackRecordTemplate(this.stackTitle(layer));button.addEventListener("click",()=>this.openRecord(layer.record,{returnFocus:button}).catch(error=>{this.setNotice(error.message,true);this.emit("error",{error})}));return button},stackPaint(){const stack=this.stack,frame=this.stackFrame,layers=stack.settings.layers;const held=document.activeElement,focusLayer=frame.contains(held)?held.closest("[data-cx-stack-layer]")?.dataset.cxStackLayer:null;frame.replaceChildren();const list=stackFrameTemplate.call(this,stack,frame,layers,layer=>this.stackRecordButton(layer),(title,list,index)=>{title.addEventListener("keydown",event=>{if(event.altKey||event.ctrlKey||event.metaKey||event.shiftKey)return;const next=event.key==="Home"?0:event.key==="End"?layers.length-1:event.key==="ArrowDown"?Math.min(layers.length-1,index+1):event.key==="ArrowUp"?Math.max(0,index-1):null;if(next!==null){event.preventDefault();list.children[next].querySelector("button").focus()}})});if(!list)return;if(focusLayer)[...list.children].find(item=>item.dataset.cxStackLayer===focusLayer)?.querySelector("button").focus({preventScroll:true})}});installed.add(context.DataGrid.prototype)}};(global.CanopyXParts||=[]).push(["stack",part])})(typeof window!=="undefined"?window:globalThis);

package/CanopyX.Html/Assets/canopyx-time-slider.css

@@ -0,0 +1,18 @@
+.cx-time-host{display:flex;flex-direction:column;min-height:0;box-sizing:border-box;border:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-container,var(--hfx-radius-lg,10px));background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));overflow:auto;}
+.cx-time-host > .cx-matrix{flex:1 1 auto;min-height:0;max-height:none;border:0;border-radius:0;background:inherit;}
+.cx-time{flex:none;font:var(--hfx-weight-regular,400) var(--hfx-type-body-size,0.875rem) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);display:grid;gap:var(--hfx-space-2,0.5rem);padding:var(--hfx-space-4,1rem) 0;color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));min-inline-size:0;background:inherit;}
+.cx-time-controls{display:flex;align-items:center;gap:var(--hfx-space-2,0.5rem);min-inline-size:0;}
+.cx-time-button{flex:none;min-block-size:var(--hfx-control-height-lg,calc(44px - var(--cx-compact,0) * 8px));min-inline-size:var(--hfx-control-height-lg,calc(44px - var(--cx-compact,0) * 8px));}
+.cx-time-button svg{inline-size:var(--hfx-icon-lg,20px);block-size:var(--hfx-icon-lg,20px);fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;}
+.cx-time[data-playing="true"] .cx-time-button[aria-pressed="true"]{color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
+.cx-time-scrubber{position:relative;min-inline-size:0;padding-inline:var(--hfx-space-2,0.5rem);}
+.cx-time-range{display:block;box-sizing:border-box;inline-size:100%;margin:0;accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));block-size:var(--hfx-control-height-sm,calc(28px - var(--cx-compact,0) * 4px));}
+.cx-time-range:focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:var(--hfx-focus-offset,2px);}
+.cx-time-ticks{position:relative;block-size:var(--hfx-space-2,0.5rem);margin-inline:var(--hfx-space-2,0.5rem);}
+.cx-time-ticks i{position:absolute;inline-size:var(--hfx-border-width,1px);block-size:var(--hfx-space-1-5,6px);background:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
+.cx-time-position{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-variant-numeric:tabular-nums;font-size:var(--hfx-type-caption-size,0.75rem);}
+.cx-time-stamp{font-weight:var(--hfx-weight-semibold,600);line-height:var(--hfx-type-body-line,1.5);margin-inline-start:var(--hfx-space-2,0.5rem);overflow-wrap:anywhere;}
+.cx-time-reduced{margin:0;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--hfx-type-caption-size,0.75rem);}
+.cx-time [hidden]{display:none;}
+@media(max-width:480px){.cx-time{padding:var(--hfx-space-3,0.75rem) 0;}.cx-time-controls{flex-wrap:wrap;}.cx-time-stamp{flex-basis:100%;margin-inline-start:0;}}
+@media print{.cx-time-host{border:0;}.cx-time{padding:0;}.cx-time-controls .cx-time-button,.cx-time-scrubber,.cx-time-reduced{display:none;}.cx-time-stamp{display:block;color:inherit;}}

package/CanopyX.Html/Assets/canopyx-time-slider.js

@@ -0,0 +1,27 @@
+(function(global){"use strict";const installed=new WeakSet();const part={version:"5516099a165cc345",install(context){if(installed.has(context.TIME_SLIDER_IMPL))return;const{TIME_SLIDER_IMPL,h,setText,fill,PROTOCOL}=context;function humanTimeFormat(lang,local,utcTemplate){const formatter=new Intl.DateTimeFormat(lang||undefined,{year:"numeric",month:"short",day:"numeric",hour:"2-digit",minute:"2-digit",hourCycle:"h23",timeZone:local?undefined:"UTC",...(local?{timeZoneName:"short"}:{})});return{format(value){const parts=formatter.formatToParts(new Date(value));const text=parts.map((part,index)=>part.type==="literal"&&parts[index+1]?.type==="timeZoneName"?part.value.replace(/\s/g,"\u00a0"):part.value).join("");
+return local?text:fill(utcTemplate||"{time} UTC",{time:text}).replace(/ (\S+)$/,"\u00a0$1");
+}}}
+const TIME_TEXT={timePlay:"Play",timePause:"Pause",timePrevious:"Previous snapshot",timeNext:"Next snapshot",timePosition:"Snapshot {index} of {count}",timeFrame:"Snapshot at {time}",timeReducedMotion:"Timed playback is off because reduced motion is enabled. Step through snapshots manually."};function timeFail(message){throw new Error("CanopyX: the time slider is not valid: "+message+".")}
+function timeKeys(value,names,what){if(!value||typeof value!=="object"||Array.isArray(value))timeFail(what+" must be an object");for(const name of Object.keys(value))if(!names.includes(name))timeFail(what+" has the unknown property '"+name+"'")}
+function timeModel(source,kind,validate){const input=source.timeSlider;timeKeys(input,["interval","initial","snapshots"],"settings");const interval=input.interval===undefined?1000:input.interval;if(!Number.isInteger(interval)||interval<100||interval>60000)timeFail("interval must be 100 to 60000 milliseconds");if(!Array.isArray(input.snapshots)||!input.snapshots.length||input.snapshots.length>500)timeFail("supply 1 to 500 snapshots");let previous=-Infinity;const snapshots=input.snapshots.map(item=>{timeKeys(item,["at","label","view"],"snapshot");if(typeof item.at!=="string"||!/^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(?:\.\d{1,7})?(?:Z|[+-]\d\d:\d\d)$/.test(item.at)) timeFail("snapshot time needs an ISO timestamp with a zone");
+const parts=item.at.match(/\d+/g).map(Number), [year, month, day, hour, minute, second] = parts;
+const zone=item.at.match(/([+-])(\d\d):(\d\d)$/);
+const days=month===2?year%4===0&&(year%100!==0||year%400===0)?29:28:[4,6,9,11].includes(month)?30:31;if(!year||month<1||month>12||day<1||day>days||hour>23||minute>59||second>59||
+zone&&(+zone[2]>14||+zone[3]>59||+zone[2]===14&&+zone[3]!==0))timeFail("snapshot time is outside the supported date range");const instant=Date.parse(item.at);if(!Number.isFinite(instant)||instant<=previous)timeFail("snapshot times must increase strictly");previous=instant;if(item.label!==undefined&&(typeof item.label!=="string"||!/\S/.test(item.label) || item.label.length > 200)) timeFail("snapshot label must be visible text of at most 200 characters");
+if(!item.view||item.view.type!==kind||item.view.id!==source.id||Object.hasOwn(item.view,"timeSlider"))timeFail("snapshots need the same view type and id, without nested time sliders");validate(item.view);const view=JSON.parse(JSON.stringify(item.view));return Object.freeze({at:item.at,label:item.label,view})});const initial=input.initial===undefined?snapshots.length-1:input.initial;if(!Number.isInteger(initial)||initial<0||initial>=snapshots.length)timeFail("initial must identify a supplied snapshot");return{interval,initial,snapshots}}
+function timeLabels(...sources){const labels={...TIME_TEXT};for(const source of sources)for(const[key,value]of Object.entries(source||{})){if(!Object.hasOwn(labels,key)){if(/^time[A-Z]/.test(key)) timeFail("unknown label '" + key + "'"); continue; }
+if(typeof value!=="string"||!/\S/.test(value)) timeFail("label '" + key + "' needs visible text");
+labels[key]=value}
+return labels}
+function timeIcon(button,playing,direction){const svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),path=document.createElementNS(svg.namespaceURI,"path");svg.setAttribute("viewBox","0 0 24 24");svg.setAttribute("aria-hidden","true");path.setAttribute("d",direction===-1?"M7 5V19M18 5L9 12L18 19Z":direction===1?"M17 5V19M6 5L15 12L6 19Z":playing?"M8 5V19M16 5V19":"M7 4L20 12L7 20Z");svg.appendChild(path);button.replaceChildren(svg)}
+function timeControlsTemplate(model,labels,source,hostLabels,hostLang){const root=h("section","cx-time"),controls=h("div","cx-time-controls"),range=h("input","cx-time-range");const stamp=h("div","cx-time-stamp"),position=h("span","cx-time-position"),reduced=h("p","cx-time-reduced");const scrubber=h("div","cx-time-scrubber"),ticks=h("div","cx-time-ticks");ticks.setAttribute("aria-hidden","true");const formatter=humanTimeFormat(source.lang||hostLang||document.documentElement.lang,source.timeZone==="local",hostLabels?.changeUtcTime??source.labels?.changeUtcTime);const button=text=>{const result=h("button","cx-btn icon cx-time-button");result.type="button";result.setAttribute("aria-label",text);result.title=text;return result};const previous=button(labels.timePrevious),play=button(labels.timePlay),next=button(labels.timeNext);timeIcon(previous,false,-1);timeIcon(next,false,1);range.type="range";range.min="0";range.max=String(model.snapshots.length-1);range.step="1";range.setAttribute("aria-label",labels.timePosition.replace("{index}","").replace("{count}",String(model.snapshots.length)).trim());stamp.setAttribute("aria-live","polite");root.setAttribute("aria-label",labels.timeFrame.replace("{time}","").trim());setText(reduced,labels.timeReducedMotion);for(const[index,item]of model.snapshots.entries()){const tick=h("i");tick.style.insetInlineStart=(model.snapshots.length===1?0:index*100 / (model.snapshots.length - 1)) + "%";
+tick.title=formatter.format(new Date(item.at));ticks.appendChild(tick)}
+controls.append(previous,play,next,stamp);scrubber.append(range,ticks);root.append(controls,scrubber,position,reduced);return{root,range,stamp,position,reduced,previous,play,next,formatter}}
+function timeStateTemplate(elements,model,labels,index,playing,reducedMotion){const{root,range,stamp,position,reduced,previous,play,next,formatter}=elements;const item=model.snapshots[index],text=fill(labels.timePosition,{index:index+1,count:model.snapshots.length});const time=formatter.format(new Date(item.at));range.value=String(index);range.setAttribute("aria-valuetext",text+": "+time);setText(position,text);setText(stamp,(item.label?item.label+" · ":"")+ fill(labels.timeFrame,{time}));previous.disabled=index===0;next.disabled=index===model.snapshots.length-1;play.disabled=reducedMotion||model.snapshots.length<2||!playing&&index===model.snapshots.length-1;root.dataset.playing=String(playing);play.setAttribute("aria-pressed",String(playing));const name=playing?labels.timePause:labels.timePlay;play.setAttribute("aria-label",name);play.title=name;timeIcon(play,playing);reduced.hidden=!reducedMotion}
+function timeCreate(host,source,hostLabels,kind,validate,update){const model=timeModel(source,kind,validate),labels=timeLabels(source.labels,hostLabels);const lifetime=new AbortController(),signal=lifetime.signal,media=matchMedia("(prefers-reduced-motion: reduce)");const elements=timeControlsTemplate(model,labels,source,hostLabels,host.closest("[lang]")?.getAttribute("lang"));const{root,range,previous,play,next}=elements;const hadFrame=host.classList.contains("cx-time-host");host.classList.add("cx-time-host");let index=model.initial,playing=false,timer=null,disposed=false;const state=()=>Object.freeze({index,count:model.snapshots.length,at:model.snapshots[index].at,playing,reducedMotion:media.matches});const paint=()=>timeStateTemplate(elements,model,labels,index,playing,media.matches);const pause=()=>{playing=false;clearTimeout(timer);timer=null;if(!disposed)paint();return state()};const seek=target=>{if(disposed)throw new DOMException("Snapshot playback was destroyed.","AbortError");if(!Number.isInteger(target)||target<0||target>=model.snapshots.length)throw new RangeError("Snapshot index is outside the supplied history.");pause();update(model.snapshots[target].view);index=target;paint();return state()};const tick=()=>{timer=setTimeout(()=>{if(disposed||!playing)return;if(media.matches){pause();return}
+try{update(model.snapshots[index+1].view);++index}
+catch(error){pause();host.dispatchEvent(new CustomEvent("canopyx:error",{detail:{error},bubbles:true}));return}
+if(index===model.snapshots.length-1)pause();else{paint();tick()}},model.interval)};const start=()=>{if(!disposed&&!playing&&!media.matches&&index<model.snapshots.length-1){playing=true;paint();tick()}return state()};previous.addEventListener("click",()=>seek(index-1),{signal});next.addEventListener("click",()=>seek(index+1),{signal});play.addEventListener("click",()=>playing?pause():start(),{signal});range.addEventListener("input",()=>seek(Number(range.value)),{signal});media.addEventListener("change",pause,{signal});window.addEventListener("beforeprint",pause,{signal});try{update(model.snapshots[index].view);paint();host.prepend(root)}
+catch(error){lifetime.abort();root.remove();if(!hadFrame)host.classList.remove("cx-time-host");throw error}
+return{play:start,pause,seek,step:(delta=1)=>{if(!Number.isInteger(delta))throw new RangeError("Snapshot step must be an integer.");return seek(Math.max(0,Math.min(model.snapshots.length-1,index+delta)))},getState:state,destroy:()=>{if(disposed)return;pause();disposed=true;lifetime.abort();root.remove();if(!hadFrame)host.classList.remove("cx-time-host")}}}
+TIME_SLIDER_IMPL.create=timeCreate;installed.add(context.TIME_SLIDER_IMPL)}};(global.CanopyXParts||=[]).push(["time-slider",part])})(typeof window!=="undefined"?window:globalThis);

package/CanopyX.Html/Assets/canopyx-timeline.css

@@ -1,31 +1,31 @@
 /* Resource timeline: the resource tree at the start,the time header and lanes after it,sharing rows. */
 .cx-tl{--cx-tl-side-w:var(--cx-tl-side,280px);display:grid;grid-template-columns:var(--cx-tl-side-w) minmax(0,1fr);height:100%;min-height:0;}
 .cx-tl.cx-tl-solo{grid-template-columns:minmax(0,1fr);}
-.cx-tl-side{display:flex;flex-direction:column;min-width:0;min-height:0;border-inline-end:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-tl-side{display:flex;flex-direction:column;min-width:0;min-height:0;border-inline-end:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-tl-side > .cx-tl-tree.cx-host{flex:1 1 auto;height:auto;min-height:0;border:0;border-radius:0;}
 .cx-tl-tree.cx-host > .cx-grid{overflow-y:hidden;overflow-x:scroll;border:0;border-radius:0;}
 .cx-tl-tree .cx-head{display:flex;flex-direction:column;justify-content:flex-end;box-sizing:border-box;height:var(--cx-tl-head-h,57px);}
 .cx-tl-tree .cx-tl-agg{justify-content:flex-end;font-variant-numeric:tabular-nums;color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
 .cx-tl-main{position:relative;min-width:0;min-height:0;overflow:scroll;overscroll-behavior:contain;}
-.cx-tl-head{position:sticky;top:0;z-index:7;height:var(--cx-tl-head-h,57px);background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-tl-head{position:sticky;top:0;z-index:7;height:var(--cx-tl-head-h,57px);background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));border-bottom:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-tl-hrow{position:relative;height:var(--cx-size-28px);}
-.cx-tl-upper{border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
-.cx-tl-hcell{position:absolute;top:0;height:100%;display:flex;align-items:center;padding:0 var(--cx-size-6px);border-inline-start:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));font-size:var(--cx-size-12px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
-.cx-tl-hcell.cx-tl-hupper{overflow:visible;font-size:var(--cx-size-13px);font-weight:600;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
+.cx-tl-upper{border-bottom:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
+.cx-tl-hcell{position:absolute;top:0;height:100%;display:flex;align-items:center;padding:0 var(--cx-size-6px);border-inline-start:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));font-size:var(--cx-size-12px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
+.cx-tl-hcell.cx-tl-hupper{overflow:visible;font-size:var(--cx-size-13px);font-weight:600;color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
 .cx-tl-hupper > .cx-tl-hlabel{position:sticky;inset-inline-start:var(--cx-size-6px);max-width:100%;overflow:hidden;text-overflow:ellipsis;}
 .cx-tl-hcell > .cx-tl-hlabel{min-width:0;overflow:hidden;text-overflow:ellipsis;}
-.cx-tl-hcell.cx-tl-weekend{background:color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 5%,transparent);}
-.cx-tl-range-labels{position:relative;height:var(--cx-size-20px);border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-tl-hcell.cx-tl-weekend{background:color-mix(in srgb,var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5))) 5%,transparent);}
+.cx-tl-range-labels{position:relative;height:var(--cx-size-20px);border-top:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-tl-head:not(.cx-tl-has-ranges) > .cx-tl-range-labels{display:none;}
-.cx-tl-range-label{position:absolute;top:var(--cx-size-2px);height:var(--cx-size-16px);padding:0 var(--cx-size-6px);border-radius:var(--hfx-radius-sm,4px);background:color-mix(in srgb,var(--hfx-color-status-info-fg,light-dark(#2b5fc0,#74a2f7)) 14%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));font-size:var(--cx-size-11d5px);line-height:var(--cx-size-16px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.cx-tl-range-label{position:absolute;top:var(--cx-size-2px);height:var(--cx-size-16px);padding:0 var(--cx-size-6px);border-radius:var(--hfx-radius-sm,4px);background:color-mix(in srgb,var(--hfx-color-status-info-fg,light-dark(#2b5fc0,#74a2f7)) 14%,var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c))));font-size:var(--cx-size-11d5px);line-height:var(--cx-size-16px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 .cx-tl-canvas{position:relative;}
 .cx-tl-layer{position:absolute;inset-inline-start:0;top:0;width:100%;pointer-events:none;}
-.cx-tl-weekend-col{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 3.5%,transparent);}
+.cx-tl-weekend-col{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5))) 3.5%,transparent);}
 .cx-tl-range{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--cx-bg-tone) 9%,transparent);box-shadow:inset var(--cx-size-2px) 0 0 color-mix(in srgb,var(--cx-bg-tone) 50%,transparent);}
 :where(.cx-cal-rtl) .cx-tl-range{box-shadow:inset calc(-1 * var(--cx-size-2px)) 0 0 color-mix(in srgb,var(--cx-bg-tone) 50%,transparent);}
 .cx-tl-now{position:absolute;top:0;bottom:0;width:var(--cx-size-2px);margin-inline-start:calc(-1 * var(--cx-size-1px));background:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));z-index:1;}
-.cx-tl-lane{position:absolute;inset-inline-start:0;inset-inline-end:0;border-bottom:var(--cx-size-1px) solid color-mix(in srgb,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)) 70%,transparent);}
-.cx-tl-lane.cx-tl-group{background:color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 2.5%,transparent);}
+.cx-tl-lane{position:absolute;inset-inline-start:0;inset-inline-end:0;border-bottom:var(--cx-size-1px) solid color-mix(in srgb,var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30))) 70%,transparent);}
+.cx-tl-lane.cx-tl-group{background:color-mix(in srgb,var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5))) 2.5%,transparent);}
 .cx-tl-cell{position:absolute;top:0;bottom:0;pointer-events:none;outline:none;}
 .cx-tl-cell:focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:calc(-1 * var(--cx-size-2px));z-index:5;}
 .cx-tl-cell[aria-selected="true"]{background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));}
@@ -43,15 +43,15 @@
 .cx-tl-lane .cx-cal-ev-lane.cx-tl-point.cx-tl-bare > .cx-cal-ev-title{display:none;}
 .cx-tl-shade{position:absolute;top:0;bottom:0;pointer-events:none;overflow:hidden;overflow:clip;}
 .cx-tl-shade > span{position:sticky;inset-inline-start:0;display:block;width:max-content;max-width:100%;box-sizing:border-box;padding:var(--cx-size-2px) var(--cx-size-6px);font-size:var(--cx-size-11px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
-.cx-tl-shade.cx-tl-off{background:color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 4.5%,transparent);}
-:is(.cx-tl-shade,.cx-tl-range).cx-tl-unavailable{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 9%,transparent) 0 var(--cx-size-6px),transparent var(--cx-size-6px) var(--cx-size-12px));box-shadow:none;}
+.cx-tl-shade.cx-tl-off{background:color-mix(in srgb,var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5))) 4.5%,transparent);}
+:is(.cx-tl-shade,.cx-tl-range).cx-tl-unavailable{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5))) 9%,transparent) 0 var(--cx-size-6px),transparent var(--cx-size-6px) var(--cx-size-12px));box-shadow:none;}
 .cx-tl-shade.cx-tl-bg{background:color-mix(in srgb,var(--cx-bg-tone) 12%,transparent);box-shadow:inset var(--cx-size-2px) 0 0 color-mix(in srgb,var(--cx-bg-tone) 55%,transparent);}
 :where(.cx-cal-rtl) .cx-tl-shade.cx-tl-bg{box-shadow:inset calc(-1 * var(--cx-size-2px)) 0 0 color-mix(in srgb,var(--cx-bg-tone) 55%,transparent);}
-.cx-tl-heat{position:absolute;z-index:2;background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));top:var(--cx-size-5px);bottom:var(--cx-size-5px);display:grid;place-items:center;border-radius:var(--hfx-radius-sm,4px);font-size:var(--cx-size-11d5px);font-weight:600;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font-variant-numeric:tabular-nums;overflow:hidden;isolation:isolate;}
+.cx-tl-heat{position:absolute;z-index:2;background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));top:var(--cx-size-5px);bottom:var(--cx-size-5px);display:grid;place-items:center;border-radius:var(--hfx-radius-sm,4px);font-size:var(--cx-size-11d5px);font-weight:600;color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));font-variant-numeric:tabular-nums;overflow:hidden;isolation:isolate;}
 .cx-tl-heat::before{content:"";position:absolute;inset:0 var(--cx-size-1px);z-index:-1;border-radius:inherit;background:var(--cx-bg-tone,var(--hfx-color-accent,light-dark(#11776f,#37c9b8)));opacity:calc(.12 + var(--cx-heat,0) * .38);}
 .cx-tl-heat[data-cx-tone]::before{opacity:calc(.28 + var(--cx-heat,0) * .42);}
 .cx-tl-lane > .cx-tl-ghost{top:var(--cx-size-3px);bottom:var(--cx-size-3px);padding:0;overflow:visible;}
-.cx-tl-ghost > .cx-tl-ghost-label{position:absolute;inset-inline-start:calc(100% + var(--cx-size-6px));top:50%;transform:translateY(-50%);padding:var(--cx-size-2px) var(--cx-size-6px);border:var(--cx-size-1px) solid currentColor;border-radius:var(--hfx-radius-sm,4px);background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));white-space:nowrap;box-shadow:var(--hfx-elevation-1,0 1px 2px rgba(22,24,28,.06));}
+.cx-tl-ghost > .cx-tl-ghost-label{position:absolute;inset-inline-start:calc(100% + var(--cx-size-6px));top:50%;transform:translateY(-50%);padding:var(--cx-size-2px) var(--cx-size-6px);border:var(--cx-size-1px) solid currentColor;border-radius:var(--hfx-radius-sm,4px);background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));white-space:nowrap;box-shadow:var(--hfx-elevation-1,0 1px 2px rgba(22,24,28,.06));}
 .cx-tl-print{display:none;}
 .cx-cal-phone .cx-tl{--cx-tl-side-w:176px;}
 .cx-cal-phone .cx-tl-tree .cx-hidden-fields{display:none;}
@@ -67,14 +67,14 @@
 .cx-tl > :is(.cx-tl-side,.cx-tl-main){display:none!important;}
 .cx-tl{display:block;height:auto;}
 .cx-tl-print{display:block;font-size:10px;}
-.cx-tl-print-row{display:grid;grid-template-columns:24% 1fr;align-items:stretch;min-height:18px;border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));break-inside:avoid;}
+.cx-tl-print-row{display:grid;grid-template-columns:24% 1fr;align-items:stretch;min-height:18px;border-bottom:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));break-inside:avoid;}
 .cx-tl-print-head{font-weight:700;border-bottom-width:var(--cx-size-2px);}
-.cx-tl-print-group{background:color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 4%,transparent);font-weight:600;}
+.cx-tl-print-group{background:color-mix(in srgb,var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5))) 4%,transparent);font-weight:600;}
 .cx-tl-print-name{padding:var(--cx-size-2px) var(--cx-size-4px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
 .cx-tl-print-lane{position:relative;min-height:18px;}
-.cx-tl-print-unit,.cx-tl-print-heat{position:absolute;top:0;bottom:0;padding:0 var(--cx-size-2px);border-inline-start:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));overflow:hidden;white-space:nowrap;}
+.cx-tl-print-unit,.cx-tl-print-heat{position:absolute;top:0;bottom:0;padding:0 var(--cx-size-2px);border-inline-start:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));overflow:hidden;white-space:nowrap;}
 .cx-tl-print-bar.cx-tl-print-tiny{background:var(--cx-ev,var(--hfx-color-accent,light-dark(#11776f,#37c9b8)));box-shadow:none;}
-.cx-tl-print-bar{position:absolute;top:var(--cx-size-2px);bottom:var(--cx-size-2px);padding:0 var(--cx-size-2px);border-radius:var(--cx-size-2px);background:color-mix(in srgb,var(--cx-ev,var(--hfx-color-accent,light-dark(#11776f,#37c9b8))) 22%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));box-shadow:inset var(--cx-size-2px) 0 0 var(--cx-ev,var(--hfx-color-accent,light-dark(#11776f,#37c9b8)));overflow:hidden;white-space:nowrap;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
+.cx-tl-print-bar{position:absolute;top:var(--cx-size-2px);bottom:var(--cx-size-2px);padding:0 var(--cx-size-2px);border-radius:var(--cx-size-2px);background:color-mix(in srgb,var(--cx-ev,var(--hfx-color-accent,light-dark(#11776f,#37c9b8))) 22%,var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c))));box-shadow:inset var(--cx-size-2px) 0 0 var(--cx-ev,var(--hfx-color-accent,light-dark(#11776f,#37c9b8)));overflow:hidden;white-space:nowrap;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
 :where(.cx-cal-rtl) .cx-tl-print-bar{box-shadow:inset calc(-1 * var(--cx-size-2px)) 0 0 var(--cx-ev,var(--hfx-color-accent,light-dark(#11776f,#37c9b8)));}
 }
 @media (forced-colors:active){.cx-tl-ghost > .cx-tl-ghost-label{background:Canvas;color:CanvasText;border-color:CanvasText;}}

package/CanopyX.Html/Assets/canopyx-timeline.js

@@ -1,4 +1,4 @@
-(function(global){"use strict";const installed=new WeakSet();const part={version:"22c9e15c108aeaa1",requires:["calendar"],install(context){if(installed.has(context.DataGrid.prototype))return;const{toneVariable,DataGrid,TreeGrid,h,setText,fill,numberFormat}=context;const{CAL_DAY,CAL_HOUR,CAL_MINUTE,calAddMonths,calCount,calDayNumber,calDayParts,calDow,calMonthStart,calWeekStart}=DataGrid.prototype.calKit;const TL_ZOOMS={hour:{width:56,unit:"hour"},day:{width:44,unit:"day"},week:{width:92,unit:"week"},month:{width:112,unit:"month"},quarter:{width:150,unit:"quarter"}};function tlSpan(zoom,date,firstDay){if(zoom==="hour")return{firstDay:date,lastDay:date};if(zoom==="day"){const month=calMonthStart(date);return{firstDay:month,lastDay:calAddMonths(month,1)- 1}}
+(function(global){"use strict";const installed=new WeakSet();const part={version:"cb9b9dd33154172c",requires:["calendar"],install(context){if(installed.has(context.DataGrid.prototype))return;const{toneVariable,DataGrid,TreeGrid,h,setText,fill,numberFormat}=context;const{CAL_DAY,CAL_HOUR,CAL_MINUTE,calAddMonths,calCount,calDayNumber,calDayParts,calDow,calMonthStart,calWeekStart}=DataGrid.prototype.calKit;const TL_ZOOMS={hour:{width:56,unit:"hour"},day:{width:44,unit:"day"},week:{width:92,unit:"week"},month:{width:112,unit:"month"},quarter:{width:150,unit:"quarter"}};function tlSpan(zoom,date,firstDay){if(zoom==="hour")return{firstDay:date,lastDay:date};if(zoom==="day"){const month=calMonthStart(date);return{firstDay:month,lastDay:calAddMonths(month,1)- 1}}
 if(zoom==="week"){const parts=calDayParts(date),quarter=calDayNumber(parts.y,Math.floor((parts.m-1)/ 3) * 3 + 1, 1);
 return{firstDay:calWeekStart(quarter,firstDay),lastDay:calWeekStart(calAddMonths(quarter,3)- 1,firstDay)+ 6}}
 const parts=calDayParts(date);if(zoom==="month")return{firstDay:calDayNumber(parts.y,1,1),lastDay:calDayNumber(parts.y+1,1,1)- 1};return{firstDay:calDayNumber(parts.y,1,1),lastDay:calDayNumber(parts.y+3,1,1)- 1}}
@@ -8,7 +8,8 @@ function tlCustomStep(span,date,direction){return span.unit==="month"?calAddMont
 function tlStep(zoom,date,direction){if(zoom==="hour")return date+direction;if(zoom==="day")return calAddMonths(date,direction);if(zoom==="week")return calAddMonths(date,3*direction);return calAddMonths(date,(zoom==="month"?12:36)*direction)}
 function tlUnits(zoom,span,zone,firstDay){const units=[],width=TL_ZOOMS[zoom].width;const push=(first,last,start,end)=>units.push({first,last,start,end,x:units.length*width});if(zoom==="hour"){for(let at=zone.start(span.firstDay),end=zone.start(span.lastDay+1);at<end;at +=CAL_HOUR){const day=zone.day(at);push(day,day,at,Math.min(at+CAL_HOUR,end))}}else if(zoom==="day"){for(let day=span.firstDay;day<=span.lastDay;day++)push(day,day,zone.start(day),zone.start(day+1))}else if(zoom==="week"){for(let day=calWeekStart(span.firstDay,firstDay);day<=span.lastDay;day +=7)push(day,day+6,zone.start(day),zone.start(day+7))}else{const months=zoom==="month"?1:3;for(let day=span.firstDay;day<=span.lastDay;day=calAddMonths(day,months)){const next=calAddMonths(day,months);push(day,next-1,zone.start(day),zone.start(next))}}
 return units}
-function tlAxis(zoom,span,zone,firstDay){const units=tlUnits(zoom,span,zone,firstDay),width=TL_ZOOMS[zoom].width,total=units.length*width;const unitOf=time=>{let low=0,high=units.length-1;while(low<high){const mid=(low+high+1)>>1;if(units[mid].start<=time)low=mid;else high=mid-1}
+function tlAxis(zoom,span,zone,firstDay,minWidth=0){const units=tlUnits(zoom,span,zone,firstDay),width=Math.max(TL_ZOOMS[zoom].width,minWidth / units.length), total = units.length * width;
+units.forEach((unit,index)=>{unit.x=index*width});const unitOf=time=>{let low=0,high=units.length-1;while(low<high){const mid=(low+high+1)>>1;if(units[mid].start<=time)low=mid;else high=mid-1}
 return low};return{zoom,units,width,total,from:units[0].start,to:units[units.length-1].end,x(time){if(time<=this.from)return 0;if(time>=this.to)return total;const unit=units[unitOf(time)];return unit.x +(time-unit.start)/ (unit.end - unit.start) * width;
 },time(x){const index=Math.max(0,Math.min(units.length-1,Math.floor(x / width))), unit = units[index];
 return unit.start+Math.max(0,Math.min(1,(x-unit.x)/ width)) * (unit.end - unit.start);
@@ -24,11 +25,11 @@ Object.assign(DataGrid.prototype,{startTimeline(){if(this.tl)return;const resour
 const inline=!resources.view.source||resources.view.source.kind==="inline";if(inline)this.tlLearnNodes(resources.view.roots||[],null);this.tlInline=inline},tlLearnNodes(nodes,parent){const stack=nodes.map(node=>[node,parent]).reverse();while(stack.length){const[node,owner]=stack.pop();if(!node||typeof node.id!=="string"||this.tl.learned.has(node.id))continue;this.tl.learned.add(node.id);this.tl.names.set(node.id,node.label??node.id);this.tl.parent.set(node.id,owner);this.tl.order.push(node.id);if(owner!==null){if(!this.tl.children.has(owner))this.tl.children.set(owner,[]);this.tl.children.get(owner).push(node.id)}
 if(Array.isArray(node.children))for(let i=node.children.length-1;i>=0;i--)stack.push([node.children[i],node.id])}},calResourceName(id){return this.tl?.names.get(id)??id},calResourceColumns(){if(!this.tl||!this.tlInline)return null;const leaves=this.tl.order.filter(id=>!this.tl.children.has(id));if(!leaves.length)return null;return leaves.map(id=>({id,label:this.calResourceName(id),group:this.tl.parent.get(id)==null?null:this.calResourceName(this.tl.parent.get(id))}))},calHoursFor(resource,dow){const list=this.cal.availability;if(!list.length)return undefined;let own=resource==null?[]:list.filter(item=>item.resource===resource);for(let parent=this.tl?.parent.get(resource);!own.length&&parent!=null;parent=this.tl.parent.get(parent))own=list.filter(item=>item.resource===parent);const entries=own.length?own:list.filter(item=>item.resource==null);return entries.length?entries.filter(item=>item.days.has(dow)):undefined},calResourceStep(resource,sign){if(this.tlSolo)return resource;const rows=this.tlTree?this.tlTree.rows.filter(row=>!row.status&&!this.tl.children.has(row.key)).map(row=>row.key):this.tl.order.filter(id=>!this.tl.children.has(id));const at=rows.indexOf(resource);return rows[Math.max(0,Math.min(rows.length-1,(at<0?0:at)+ sign))]??resource},calResourceWindow(){if(this.cal.resourceIds||this.calView!=="timeline"||this.tlSolo||this.view.source.kind==="inline"&&!this.opts.source)return null;this.tlEnsure();if(!this.tlTree?.rows?.length)return null;const range=this.tlMain.clientHeight?this.tlVisibleRows(40):{first:0,last:Math.min(this.tlTree.rows.length-1,80)},ids=new Set();for(let i=range.first;i<=range.last&&ids.size<1000;i++){const row=this.tlTree.rows[i];if(!row||row.status)continue;const stack=[row.key];while(stack.length&&ids.size<1000){const id=stack.pop();if(ids.has(id))continue;ids.add(id);const children=this.tl.children.get(id)||[];for(let at=children.length-1;at>=0;at--)stack.push(children[at])}}
 const window=[...ids];return window.length?window:null},tlCheckWindow(){if(this.view.source.kind==="inline"&&!this.opts.source)return;clearTimeout(this.tlWindowTimer);this.tlWindowTimer=setTimeout(()=>{if(this.destroyed||this.calView!=="timeline")return;const wanted=this.calResourceWindow(),loaded=JSON.parse(this.calWindowKey||"null"),known=new Set(loaded||[]);if(wanted&&(!loaded||wanted.some(id=>!known.has(id))))this.calReload({keep:true})},250)},calResourcesReady(){if(this.calView!=="timeline"||this.view.source.kind==="inline"&&!this.opts.source)return null;this.tlEnsure();return this.tlTree.ready?.catch(()=>{})},calTimelineRange(date){return this.cal.span?tlCustomSpan(this.cal.span,date,this.cal.firstDay):tlSpan(this.calZoom,date,this.cal.firstDay)},calTimelineStep(date,direction){return this.cal.span?tlCustomStep(this.cal.span,date,direction):tlStep(this.calZoom,date,direction)},calTimelineTitle(){const range=this.calRange,fmt=this.calFmt;if(this.cal.span)return range.firstDay===range.lastDay?fmt.longDay(range.firstDay):fmt.dayRange(range.firstDay,range.lastDay);if(this.calZoom==="hour")return fmt.longDay(range.firstDay);if(this.calZoom==="day")return fmt.monthTitle(range.firstDay);if(this.calZoom==="week")return fmt.monthRange(range.firstDay,range.lastDay);return range.lastDay-range.firstDay>400?fmt.year(range.firstDay)+ " – "+fmt.year(range.lastDay):fmt.year(range.firstDay)},calTimelineHasNow(){const now=Date.now();return this.tlAxis?now>=this.tlAxis.from&&now<this.tlAxis.to:false},tlEnsure(){if(this.tlRoot)return;const resources=this.cal.resources,root=this.tlRoot=h("div","cx-tl" +(this.tlSolo?" cx-tl-solo":"")),side=h("div","cx-tl-side"),host=this.tlTreeHost=h("div","cx-tl-tree");const main=this.tlMain=h("div","cx-tl-main"),head=this.tlHead=h("div","cx-tl-head"),canvas=this.tlCanvas=h("div","cx-tl-canvas");head.setAttribute("aria-hidden","true");const upper=this.tlUpper=h("div","cx-tl-hrow cx-tl-upper"),lower=this.tlLower=h("div","cx-tl-hrow cx-tl-lower");head.append(upper,lower);canvas.setAttribute("role","grid");canvas.setAttribute("aria-labelledby",this.calTitle.id);canvas.setAttribute("aria-readonly",String(!this.cal.editable));if(this.tlSolo){root.append(main);main.append(head,canvas);const signal=this.lifetime.signal;this.tlTree={rows:[],tops:[0],rowH:this.rowH||34,version:0,destroyed:false,ready:Promise.resolve(),grid:side,scheduleRender:()=>this.tlScheduleLanes(),setState:()=>Promise.resolve(),destroy(){this.destroyed=true}};main.addEventListener("scroll",()=>this.tlScheduleLanes(),{passive:true,signal});return}
-root.style.setProperty("--cx-tl-side",resources.width+"px");main.append(head,canvas);side.appendChild(host);root.append(side,main);const aggregates=resources.aggregates,renderers={};for(const[column,kind]of Object.entries(aggregates))renderers[column]=(node,element)=>{setText(element,this.tlAggregateText(node.id,kind));element.classList.add("cx-tl-agg");return true};const view={...resources.view,rowHeight:resources.view.rowHeight||this.rowH,labels:{...this.view.labels,...resources.view.labels}};const tree=this.tlTree=new TreeGrid(host,{view,toolbar:false,renderers,labels:this.opts.labels});tree.emit=(name,detail)=>{if(!tree.destroyed)host.dispatchEvent(new CustomEvent("canopyx:"+name,{detail}))};const render=tree.render.bind(tree);tree.render=()=>{const result=render();if(!this.tlRows||this.tlRows!==tree.rows.length+":"+tree.version){this.tlLearnLoaded()}this.tlPaintLanes();this.tlCheckWindow();return result};const signal=this.lifetime.signal;let syncing=false;main.addEventListener("scroll",()=>{if(!syncing&&tree.grid.scrollTop!==main.scrollTop){syncing=true;tree.grid.scrollTop=main.scrollTop;syncing=false}
+root.style.setProperty("--cx-tl-side",resources.width+"px");main.append(head,canvas);side.appendChild(host);root.append(side,main);const aggregates=resources.aggregates,renderers={};for(const[column,kind]of Object.entries(aggregates))renderers[column]=(node,element)=>{setText(element,this.tlAggregateText(node.id,kind));element.classList.add("cx-tl-agg");return true};const view={...resources.view,rowHeight:this.view.plan?Math.max(64,resources.view.rowHeight||this.rowH):resources.view.rowHeight||this.rowH,labels:{...this.view.labels,...resources.view.labels}};const tree=this.tlTree=new TreeGrid(host,{view,toolbar:false,renderers,labels:this.opts.labels});main.setAttribute("aria-controls",tree.grid.id);tree.emit=(name,detail)=>{if(!tree.destroyed)host.dispatchEvent(new CustomEvent("canopyx:"+name,{detail}))};const render=tree.render.bind(tree);tree.render=()=>{const result=render();if(!this.tlRows||this.tlRows!==tree.rows.length+":"+tree.version){this.tlLearnLoaded()}this.tlPaintLanes();this.tlCheckWindow();return result};const signal=this.lifetime.signal;let syncing=false;main.addEventListener("scroll",()=>{if(!syncing&&tree.grid.scrollTop!==main.scrollTop){syncing=true;tree.grid.scrollTop=main.scrollTop;syncing=false}
 this.tlScheduleLanes();this.tlCheckWindow()},{passive:true,signal});tree.grid.addEventListener("scroll",()=>{if(!syncing&&Math.abs(tree.grid.scrollTop-main.scrollTop)>1){syncing=true;main.scrollTop=tree.grid.scrollTop;syncing=false}},{passive:true,signal});host.addEventListener("wheel",event=>{if(!event.deltaY||event.ctrlKey)return;event.preventDefault();main.scrollTop +=event.deltaY*(event.deltaMode===1?tree.rowH:event.deltaMode===2?main.clientHeight:1)},{passive:false,signal});host.addEventListener("canopyx:toggle",event=>{const node=event.detail.node;if(event.detail.expanded)this.calCollapsed.delete(node.id);else this.calCollapsed.add(node.id);this.stateChanged()},{signal});host.addEventListener("canopyx:select",event=>{const node=event.detail.node;if(!node){this.clearCalendarSelection();return}
 const zone=this.calZone,range=this.calRange,ids=new Set([node.id,...this.tlDescendants(node.id)]);this.calSelection={first:range.firstDay,last:range.lastDay,from:zone.start(range.firstDay),to:zone.start(range.lastDay+1),resource:node.id};const events=this.calEvents.filter(item=>!item.background&&this.calEventResources(item).some(id=>ids.has(id)));this.calAnnounce(fill(this.calLabels.calendarSelected,{range:this.calResourceName(node.id)}));this.calEmitLink("select",events,this.calResourceName(node.id),this.calSelection)},{signal});signal.addEventListener("abort",()=>{clearTimeout(this.tlWindowTimer);tree.destroy()},{once:true});tree.ready.then(()=>{if(!this.destroyed){this.calApplyCollapsed();this.tlPaintLanes()}},error=>this.emit("error",{error}))},tlLearnLoaded(){const tree=this.tlTree;this.tlRows=tree.rows.length+":"+tree.version;for(const row of tree.rows)if(!row.status&&row.key!=null&&!this.tl.learned.has(row.key)){this.tl.learned.add(row.key);this.tl.names.set(row.key,row.h.label??row.key);this.tl.order.push(row.key);const parent=row.parent?.key??null;this.tl.parent.set(row.key,parent);if(parent!==null){if(!this.tl.children.has(parent))this.tl.children.set(parent,[]);this.tl.children.get(parent).push(row.key)}
 if(row.h.hasChildren&&!this.tl.children.has(row.key))this.tl.children.set(row.key,[])}},tlDescendants(id){const out=[],stack=[...(this.tl.children.get(id)||[])];while(stack.length&&out.length<100000){const next=stack.pop();out.push(next);stack.push(...(this.tl.children.get(next)||[]))}
-return out},calApplyCollapsed(){const tree=this.tlTree;if(!tree||this.destroyed)return;const expanded=[];if(this.tlInline){const walk=(id,path)=>{if(!this.tl.children.has(id)||this.calCollapsed.has(id))return;expanded.push(path);for(const child of this.tl.children.get(id))walk(child,path.concat(child))};for(const id of this.tl.order)if(this.tl.parent.get(id)===null)walk(id,[id]);tree.setState({expanded}).catch?.(()=>{})}},calPaintTimeline(){this.tlEnsure();const span=this.calRange,axis=this.tlAxis=tlAxis(this.calZoom,span,this.calZone,this.cal.firstDay);this.tlIndex=this.tlIndexEvents();this.tl.heat.clear();if(this.tlRoot.parentNode!==this.calBody)this.calBody.replaceChildren(this.tlRoot);this.tlCanvas.style.width=axis.total+"px";this.tlHead.style.width=axis.total+"px";const header=tlHeader(this,axis),paint=(row,cells,cls)=>{row.replaceChildren(...cells.map(cell=>{const element=h("div",cls +(cell.weekend?" cx-tl-weekend":"")),text=h("span","cx-tl-hlabel");element.style.insetInlineStart=cell.x+"px";element.style.width=cell.width+"px";setText(text,cell.text);element.appendChild(text);element.title=cell.label;return element}))};paint(this.tlUpper,header.upper,"cx-tl-hcell cx-tl-hupper");paint(this.tlLower,header.lower,"cx-tl-hcell");this.tlHeader=header;this.calGrid=this.tlCanvas;if(this.tlScrolledFor!==this.calZoom+":"+span.firstDay){this.tlScrolledFor=this.calZoom+":"+span.firstDay;const now=Date.now(),target=now>=axis.from&&now<axis.to?axis.x(now)- this.tlMain.clientWidth / 3 : 0;
+return out},calApplyCollapsed(){const tree=this.tlTree;if(!tree||this.destroyed)return;const expanded=[];if(this.tlInline){const walk=(id,path)=>{if(!this.tl.children.has(id)||this.calCollapsed.has(id))return;expanded.push(path);for(const child of this.tl.children.get(id))walk(child,path.concat(child))};for(const id of this.tl.order)if(this.tl.parent.get(id)===null)walk(id,[id]);tree.setState({expanded}).catch?.(()=>{})}},calPaintTimeline(){this.tlEnsure();if(this.tlRoot.parentNode!==this.calBody)this.calBody.replaceChildren(this.tlRoot);const span=this.calRange,axis=this.tlAxis=tlAxis(this.calZoom,span,this.calZone,this.cal.firstDay,this.view.plan?this.tlMain.clientWidth:0);if(this.view.plan)this.planFitWidth=this.tlMain.clientWidth;this.tlIndex=this.tlIndexEvents();this.tl.heat.clear();if(this.tlRoot.parentNode!==this.calBody)this.calBody.replaceChildren(this.tlRoot);this.tlCanvas.style.width=axis.total+"px";this.tlHead.style.width=axis.total+"px";const header=tlHeader(this,axis),paint=(row,cells,cls)=>{row.replaceChildren(...cells.map(cell=>{const element=h("div",cls +(cell.weekend?" cx-tl-weekend":"")),text=h("span","cx-tl-hlabel");element.style.insetInlineStart=cell.x+"px";element.style.width=cell.width+"px";setText(text,cell.text);element.appendChild(text);element.title=cell.label;return element}))};paint(this.tlUpper,header.upper,"cx-tl-hcell cx-tl-hupper");paint(this.tlLower,header.lower,"cx-tl-hcell");this.tlHeader=header;this.calGrid=this.tlCanvas;if(this.tlScrolledFor!==this.calZoom+":"+span.firstDay){this.tlScrolledFor=this.calZoom+":"+span.firstDay;const selected=this.calZone.start(this.calDate),target=selected>=axis.from&&selected<axis.to?axis.x(selected)- this.tlMain.clientWidth / 3 : 0;
 this.tlScrollTo(Math.max(0,target))}
 this.tlTree.version++;this.tlTree.scheduleRender();this.tlPaintLanes()},tlScrollX(){return Math.abs(this.tlMain.scrollLeft)},tlScrollTo(x){this.tlMain.scrollLeft=this.calRtl?-x:x},calTimelineScroll(){return this.tlMain?{timeline:true,top:this.tlMain.scrollTop,left:this.tlScrollX(),view:"timeline",date:this.calDate,zoom:this.calZoom}:null},calRestoreTimelineScroll(state){if(state.zoom!==this.calZoom||state.date!==this.calDate)return false;this.tlMain.scrollTop=state.top;this.tlScrollTo(state.left);return true}});Object.assign(DataGrid.prototype,{calWindowTimeColumns(columns){this.calTimeWindow=null;if(this.calPhone||this.calPrinting||columns.length<=24)return columns;const size=Math.max(2,Math.min(24,Math.floor((this.calBody.clientWidth-this.calKit.CAL_GUTTER)/ 150)));
 const first=Math.max(0,Math.min(columns.length-size,this.calTimeFirst||0));this.calTimeFirst=first;this.calTimeWindow={first,size,total:columns.length,columns};return columns.slice(first,first+size).map((column,index)=>({...column,index:first+index}))},calTimeReveal(index,minutes){const window=this.calTimeWindow;if(!window||index<0||index>=window.total)return false;const column=window.columns[index];this.calTimeFirst=index<window.first?index:index>=window.first+window.size?index-window.size+1:window.first;this.calFocus={day:column.day,minutes,resource:column.resource,event:null};this.calPaint({keep:true});this.calRestoreFocus(true);return true}});const TL_MARGIN=480,TL_STACK=4,TL_MIN_BAR=8,TL_SOLID_BAR=16;Object.assign(DataGrid.prototype,{tlIndexEvents(){const byResource=new Map(),backgrounds=new Map();for(const event of this.calEvents){const span=this.calDisplaySpan(event);event.tlStart=span.start;event.tlEnd=span.end}
@@ -41,7 +42,7 @@ for(const event of events){let lane=ends.findIndex(end=>end<=event.tlStart);if(l
 ends[lane]=Math.max(event.tlEnd,event.tlStart+1);const key="lane-"+lane;event.tlLane=0;event.tlRow=key;if(!byResource.has(key)){const list=[];list.lanes=1;byResource.set(key,list)}
 byResource.get(key).push(event)}
 const count=Math.max(1,ends.length);tree.rows=Array.from({length:count},(_,index)=>({key:"lane-"+index,level:1,status:null,h:{label:String(index+1)}}));tree.tops=Array.from({length:count+1},(_,index)=>index*tree.rowH);for(const row of tree.rows)this.tl.names.set(row.key,row.h.label);tree.version++;this.tl.stats=null;return{byResource,backgrounds}},tlVisibleRows(margin){const tree=this.tlTree,tops=tree.tops,count=tree.rows.length,main=this.tlMain;if(!count)return{first:0,last:-1};const top=main.scrollTop,bottom=top+main.clientHeight,find=y=>{let low=0,high=count-1;while(low<high){const mid=(low+high+1)>>1;if(tops[mid]<=y)low=mid;else high=mid-1}return low};return{first:Math.max(0,find(top)- margin),last:Math.min(count-1,find(bottom)+ margin)}},tlScheduleLanes(){if(this.tlFrame)return;this.tlFrame=requestAnimationFrame(()=>{this.tlFrame=0;if(!this.destroyed)this.tlPaintLanes()})},tlPaintLanes(){const tree=this.tlTree,axis=this.tlAxis,canvas=this.tlCanvas;if(!tree||!axis||this.calView!=="timeline"||!canvas.isConnected)return;const rows=tree.rows,tops=tree.tops,total=tops[rows.length]||0,main=this.tlMain;canvas.style.height=total+"px";canvas.setAttribute("aria-rowcount",String(rows.length));const visible=this.tlVisibleRows(3),bucket=Math.floor(this.tlScrollX()/ TL_MARGIN), left = (bucket - 1) * TL_MARGIN, right = (bucket + 2) * TL_MARGIN + main.clientWidth;
-const lanes=this.tlLanes||=new Map(),keep=new Set(),signature=[this.calEpoch,this.calVersion,this.calSourceVersion||0,axis.zoom,axis.from,bucket,this.linkHighlight?.size||0,this.calSelection?.resource??""].join("|");for(let i=visible.first;i<=visible.last;i++){const row=rows[i],key=row.status?"status:"+i:row.key;keep.add(key);let lane=lanes.get(key);if(!lane){lane=h("div","cx-tl-lane");lane.setAttribute("role","row");lanes.set(key,lane)}
+const lanes=this.tlLanes||=new Map(),keep=new Set(),signature=[this.calEpoch,this.calVersion,this.calSourceVersion||0,axis.zoom,axis.from,axis.width,bucket,this.linkHighlight?.size||0,this.calSelection?.resource??""].join("|");for(let i=visible.first;i<=visible.last;i++){const row=rows[i],key=row.status?"status:"+i:row.key;keep.add(key);let lane=lanes.get(key);if(!lane){lane=h("div","cx-tl-lane");lane.setAttribute("role","row");lanes.set(key,lane)}
 const height=(tops[i+1]??total)- tops[i];lane.style.top=tops[i]+ "px";lane.style.height=height+"px";lane.setAttribute("aria-rowindex",String(i+1));if(lane._sig!==signature+"|"+height||lane._row!==row){lane._sig=signature+"|"+height;lane._row=row;this.tlPaintLane(lane,row,height,left,right)}
 if(lane.parentNode!==canvas)canvas.appendChild(lane)}
 for(const[key,lane]of lanes)if(!keep.has(key)){if(lane.contains(document.activeElement))continue;lane.remove();lanes.delete(key)}

package/CanopyX.Html/Assets/canopyx-tree-tools.css

@@ -1,29 +1,23 @@
-/* Graphite chrome shared by flat grids and trees: the card,toolbar,search,buttons,menus,header and cells. */
-.cx-tree-tools{border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-container,var(--hfx-radius-lg,10px));overflow:hidden;font:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem))/1.4 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);}
+/* Graphite chrome shared by flat grids and trees: the card,toolbar,search,menus,header and cells. Buttons,fields,chips
+   and badges are the shared controls (canopyx.source/controls.css). */
+.cx-tree-tools{border:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-container,var(--hfx-radius-lg,10px));overflow:hidden;font:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem))/1.4 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);}
 .cx-page > .cx-tree-tools,.cx-page > .cx-main > .cx-tree-tools{padding:0;}
 body .cx-host.cx-tree-tools{padding:0;}
 .cx-tree-tools [hidden]{display:none!important;}
 .cx-tree-tools .cx-grid{border:0;border-radius:0;overflow-anchor:none;}
-.cx-tree-tools .cx-toolbar{flex:none;gap:var(--cx-size-8px);padding:var(--cx-size-10px) var(--cx-size-12px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
-.cx-tree-tools .cx-search{flex:1 1 var(--cx-size-240px);max-width:var(--cx-size-360px);height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));display:flex;align-items:center;gap:var(--cx-size-8px);padding:0 var(--cx-size-10px);border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));min-width:0;}
+.cx-tree-tools .cx-toolbar{flex:none;gap:var(--cx-size-8px);padding:var(--cx-size-10px) var(--cx-size-12px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
+.cx-tree-tools .cx-search{flex:1 1 var(--cx-size-240px);max-width:var(--cx-size-360px);height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));display:flex;align-items:center;gap:var(--cx-size-8px);padding:0 var(--cx-size-10px);border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));min-width:0;}
 .cx-tree-tools .cx-search::before,.cx-tree-tools .cx-search::after{display:none;}
 .cx-tree-tools .cx-search-input{flex:1;min-width:0;width:100%;max-width:none;min-height:0;height:100%;border:0;padding:0;border-radius:0;background:transparent;}
 .cx-tree-tools .cx-search:focus-within{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:var(--hfx-focus-offset,2px);}
 .cx-tree-tools .cx-search .cx-search-input:focus-visible{outline:0;}
-.cx-tree-tools .cx-search kbd{font:var(--cx-size-11px) var(--hfx-font-mono,"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace);border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));padding:0 var(--cx-size-5px);}
-.cx-tree-tools .cx-button,.cx-tree-tools .cx-btn{height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));min-height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));display:inline-flex;align-items:center;justify-content:center;gap:var(--cx-size-6px);padding:0 var(--cx-size-11px);border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font:var(--hfx-weight-medium,500) var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem)) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);cursor:pointer;white-space:nowrap;}
+.cx-tree-tools .cx-search kbd{font:var(--cx-size-11px) var(--hfx-font-mono,"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace);border:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));padding:0 var(--cx-size-5px);}
 .cx-tree-tools .cx-columns > summary::after{display:none;}
-.cx-tree-tools .cx-button:hover,.cx-tree-tools .cx-btn:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
-.cx-tree-tools .ghost{border-color:transparent;color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
-.cx-tree-tools .icon{width:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0;}
-.cx-tree-tools .active{border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));}
-.cx-tree-tools .badge{min-width:var(--cx-size-18px);height:var(--cx-size-18px);padding:0 var(--cx-size-5px);border-radius:var(--hfx-radius-badge,var(--hfx-radius-sm,4px));background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));font-size:var(--cx-size-11d5px);font-weight:700;display:inline-grid;place-items:center;}
-.cx-tree-tools .cx-button:disabled{opacity:.4;cursor:default;}
 .cx-spacer{flex:1;}
-.cx-sep{width:var(--cx-size-1px);height:var(--cx-size-20px);background:var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-sep{width:var(--cx-size-1px);height:var(--cx-size-20px);background:var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-tree-tools .cx-hrow{height:var(--hfx-table-header-height,calc(40px - var(--cx-compact,0) * 8px));}
 .cx-tree-tools .cx-hcell{padding:0 var(--hfx-cell-padding-x,calc(12px - var(--cx-compact,0) * 4px));border-right:0;overflow:visible;gap:var(--cx-size-4px);}
-.cx-tree-tools .cx-hcell::after{content:"";position:absolute;right:0;top:var(--cx-size-9px);bottom:var(--cx-size-9px);width:var(--cx-size-1px);background:var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-tree-tools .cx-hcell::after{content:"";position:absolute;right:0;top:var(--cx-size-9px);bottom:var(--cx-size-9px);width:var(--cx-size-1px);background:var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-tree-tools .cx-hcell:last-child::after{display:none;}
 .cx-tree-tools .cx-hcell:last-child .cx-resize{right:0;}
 .cx-tree-tools .cx-hcell .cx-sort{min-width:var(--cx-size-24px);overflow:hidden;}
@@ -31,14 +25,26 @@ body .cx-host.cx-tree-tools{padding:0;}
 .cx-tree-tools .cx-cell{padding:0 var(--hfx-cell-padding-x,calc(12px - var(--cx-compact,0) * 4px));font-variant-numeric:tabular-nums;}
 .cx-tree-tools .cx-row > .cx-cell:first-child:not([data-cx-pin]){position:relative;}
 .cx-tree-tools .cx-row[aria-selected="true"] > .cx-cell:first-child::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--cx-size-2px);background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));pointer-events:none;z-index:4;}
-.cx-tree-tools .cx-grid-panel{position:fixed;height:auto;color:inherit;width:var(--cx-size-280px);max-width:calc(var(--cx-size-100vw) - var(--cx-size-32px));display:flex;flex-wrap:wrap;gap:var(--cx-size-8px);padding:var(--cx-size-10px) var(--cx-size-12px);border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));}
+.cx-tree-tools .cx-grid-panel{position:fixed;height:auto;color:inherit;width:var(--cx-size-280px);max-width:calc(var(--cx-size-100vw) - var(--cx-size-32px));display:flex;flex-wrap:wrap;gap:var(--cx-size-8px);padding:var(--cx-size-10px) var(--cx-size-12px);border:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));}
 .cx-tree-tools .cx-grid-columns > .cx-grid-panel{display:block;width:var(--cx-size-320px);padding:var(--cx-size-8px);max-height:var(--cx-size-420px);overflow:auto;}
 .cx-tree-tools .cx-grid-field{display:flex;flex-direction:column;gap:var(--cx-size-4px);align-items:stretch;min-width:0;}
-.cx-tree-tools .cx-grid-field :is(input:not([type="checkbox"]),select,textarea),.cx-tree-tools .cx-grid-panel > :is(select,input){min-width:0;width:100%;height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0 var(--cx-size-10px);border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font:inherit;}
+.cx-tree-tools .cx-grid-field :is(input:not([type="checkbox"]),select,textarea),.cx-tree-tools .cx-grid-panel > :is(select,input){min-width:0;width:100%;height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0 var(--cx-size-10px);border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));font:inherit;}
 .cx-grid-control-error{color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));margin:0;width:100%;overflow-wrap:anywhere;}
 .cx-grid-delivery-status{margin:0;font-size:var(--cx-size-d875em);overflow-wrap:anywhere;}
 .cx-grid-delivery-status:empty{display:none;}
 .cx-grid-export progress{width:100%;max-width:100%;accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
+.cx-tree-tools .cx-export-panel{display:flex;flex-direction:column;flex-wrap:nowrap;width:min(44ch,calc(100vw - var(--hfx-space-4,1rem)));gap:var(--hfx-space-2,0.5rem);overflow:auto;}
+.cx-tree-tools .cx-export-panel > *{flex-shrink:0;}
+.cx-tree-tools.cx-phone .cx-grid-panel.cx-export-panel::before{flex:0 0 var(--hfx-space-1,0.25rem);}
+.cx-export-count{margin:0;padding:0 var(--hfx-space-0-5,2px) var(--hfx-space-1,0.25rem);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--hfx-type-caption-size,0.75rem);}
+.cx-export-formats,.cx-export-actions{display:flex;flex-direction:column;gap:var(--hfx-space-0-5,2px);}
+.cx-export-actions{border-top:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));padding-top:var(--hfx-space-2,0.5rem);margin-top:var(--hfx-space-1,0.25rem);}
+.cx-tree-tools .cx-export-choice{width:100%;height:auto;min-height:var(--hfx-control-height-lg,calc(44px - var(--cx-compact,0) * 8px));justify-content:flex-start;text-align:left;padding:var(--hfx-space-2,0.5rem) var(--hfx-space-2,0.5rem);gap:var(--hfx-space-3,0.75rem);border:0;background:transparent;white-space:normal;}
+.cx-export-icon{flex:none;display:grid;place-items:center;box-sizing:border-box;width:calc(var(--hfx-icon-md,16px)*2.5);height:var(--hfx-menu-item-height,calc(32px - var(--cx-compact,0) * 4px));padding:var(--hfx-space-1,0.25rem);border:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font:var(--hfx-weight-semibold,600) var(--hfx-type-caption-size,0.75rem) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);}
+.cx-export-actions .cx-export-icon{font-size:var(--hfx-icon-md,16px);}
+.cx-export-choice-text{display:flex;flex-direction:column;min-width:0;gap:var(--hfx-space-1,0.25rem);}
+.cx-export-choice-title{font-weight:var(--hfx-weight-semibold,600);}
+.cx-export-hint{font-size:var(--hfx-type-caption-size,0.75rem);font-weight:normal;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));line-height:var(--hfx-type-caption-line-height,1.35);}
 .cx-tree-tools .cx-grid-views .cx-grid-field{width:100%;}
 .cx-tree-tools :is(button,summary,select,input,textarea):focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:var(--hfx-focus-offset,2px);}
 .cx-tree-tools .cx-grid-overflow .cx-grid-panel{right:0;left:auto;width:var(--cx-size-244px);}
@@ -50,7 +56,7 @@ body .cx-host.cx-tree-tools{padding:0;}
 .cx-tree-tools.cx-phone .cx-grid-columns > summary .cx-ico{width:var(--cx-size-16px);height:var(--cx-size-16px);}
 .cx-tree-tools.cx-phone .cx-toolbar :is(.cx-btn,.cx-button){min-height:var(--cx-size-44px);}
 .cx-tree-tools.cx-phone .cx-grid-panel{position:fixed!important;inset:auto 0 0!important;width:100%!important;max-width:100%!important;max-height:var(--cx-size-85vh)!important;overflow:auto;border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));z-index:30;}
-.cx-tree-tools.cx-phone .cx-grid-panel::before{content:"";display:block;width:var(--cx-size-32px);height:var(--cx-size-4px);border-radius:var(--hfx-radius-pill,999px);background:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));margin:0 auto var(--cx-size-8px);flex-basis:var(--cx-size-32px);}
+.cx-tree-tools.cx-phone .cx-grid-panel::before{content:"";display:block;width:var(--cx-size-32px);height:var(--cx-size-4px);border-radius:var(--hfx-radius-pill,999px);background:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));margin:0 auto var(--cx-size-8px);}
 .cx-tree-tools.cx-phone .cx-grid-panel:has(> [open])::before{display:none;}
 .cx-tree-tools.cx-phone .cx-hrow{height:var(--cx-size-44px);}
 .cx-tree-tools.cx-phone .cx-hidden-fields::after{content:"";position:absolute;inset:calc(-1 * var(--cx-size-10px)) calc(-1 * var(--cx-size-8px));}
@@ -60,36 +66,31 @@ body .cx-host.cx-tree-tools{padding:0;}
 .cx-grid-column-choice{display:flex;align-items:center;border-radius:var(--hfx-radius-sm,4px);}
 .cx-grid-column-choice label{flex:1;min-width:0;white-space:nowrap;}
 .cx-grid-column-name{flex:1;overflow:hidden;text-overflow:ellipsis;}
-:is(.cx-grid-column-note,.cx-grid-column-handle){flex:none;padding:0 var(--cx-size-6px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-12px);white-space:nowrap;}
-.cx-grid-column-handle{height:var(--cx-size-28px);border:0;background:none;cursor:grab;touch-action:none;}
-.cx-grid-column-choice.cx-drop-before{box-shadow:inset 0 var(--cx-size-2px) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
-.cx-grid-column-choice.cx-drop-after{box-shadow:inset 0 var(--cx-size-neg-2px) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
-.cx-grid-column-actions{display:flex;justify-content:space-between;margin-top:var(--cx-size-4px);padding-top:var(--cx-size-4px);border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+:is(.cx-grid-column-note,.cx-grid-column-handle){flex:none;padding:0 var(--hfx-space-1-5,6px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--hfx-type-caption-size,0.75rem);white-space:nowrap;}
+.cx-grid-column-handle{height:calc(var(--hfx-space-1,0.25rem)*7);border:0;background:none;cursor:grab;touch-action:none;}
+.cx-grid-column-choice.cx-drop-before{box-shadow:inset 0 var(--hfx-space-0-5,2px) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
+.cx-grid-column-choice.cx-drop-after{box-shadow:inset 0 calc(var(--hfx-space-0-5,2px)*-1) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
+.cx-grid-column-actions{display:flex;justify-content:space-between;margin-top:var(--hfx-space-1,0.25rem);padding-top:var(--hfx-space-1,0.25rem);border-top:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-grid-column-actions .cx-button{border:0;color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));background:none;}
-.cx-drawer{width:100%;max-width:var(--cx-size-440px);background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));font:var(--cx-size-14px)/1.45 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));overflow:hidden;}
-.cx-drawer-h{display:flex;align-items:flex-start;gap:var(--cx-size-12px);padding:var(--cx-size-14px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
-.cx-drawer-h h4{margin:0;font-size:var(--cx-size-17px);width:fit-content;}
-.cx-drawer-h p{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-13px);}
-.cx-drawer-h .cx-btn{margin-left:auto;}
-.cx-dl{display:grid;grid-template-columns:var(--cx-size-140px) 1fr;gap:var(--cx-size-8px) var(--cx-size-16px);padding:var(--cx-size-14px) var(--cx-size-16px);margin:0;}
-.cx-dl dt{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-13px);padding-top:var(--cx-size-1px);}
+@layer hfx.components{
+.cx-drawer-h h4{width:fit-content;}
+.cx-drawer-h p{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--hfx-type-small-size,0.8125rem);}
+.cx-drawer-h .cx-btn{margin-inline-start:auto;}
+.cx-dl{display:grid;grid-template-columns:calc(var(--hfx-space-1,0.25rem)*35) 1fr;gap:var(--hfx-space-2,0.5rem) var(--hfx-space-4,1rem);padding:calc(var(--hfx-space-1,0.25rem)*3.5) 0;margin:0;}
+.cx-dl dt{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--hfx-type-small-size,0.8125rem);padding-block-start:var(--hfx-border-width,1px);}
 .cx-dl dd{margin:0;}
-.cx-drawer-s{padding:var(--cx-size-4px) var(--cx-size-16px) 0;font-size:var(--cx-size-11d5px);letter-spacing:var(--cx-size-d06em);text-transform:uppercase;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-weight:700;}
-body .cx-host.cx-drawer{position:fixed;left:auto;right:var(--cx-size-12px);top:var(--cx-size-12px);bottom:var(--cx-size-12px);margin:0;width:calc(100% - var(--cx-size-24px));max-width:var(--cx-size-440px);height:calc(100% - var(--cx-size-24px));padding:0;display:flex;flex-direction:column;z-index:1000;}
-.cx-drawer-body{overflow:auto;flex:1;}
-.cx-drawer .cx-drawer-h > div{flex:1;min-width:0;}
-.cx-drawer .cx-drawer-h{flex:none;}
-.cx-drawer .cx-drawer-h p{margin:var(--cx-size-4px) 0 0;overflow-wrap:anywhere;}
-.cx-drawer dd{overflow-wrap:anywhere;min-width:0;}
+.cx-drawer-s{padding:var(--hfx-space-1,0.25rem) 0 0;font-size:calc(var(--hfx-type-caption-size,0.75rem)*.9583);letter-spacing:.06em;text-transform:uppercase;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-weight:700;}
+.cx-drawer .cx-drawer-h > div{flex:1;min-inline-size:0;}
+.cx-drawer .cx-drawer-h p{margin:var(--hfx-space-1,0.25rem) 0 0;overflow-wrap:anywhere;}
+.cx-drawer dd{overflow-wrap:anywhere;min-inline-size:0;}
 .cx-drawer .cx-button{flex:none;}
-.cx-drawer :is(.p-strip,.p-spark,.p-line){max-width:100%;}
-body .cx-host.cx-drawer.cx-phone{inset:0;width:100%;max-width:none;height:100%;max-height:none;border-radius:var(--hfx-radius-none,0);}
-.cx-drawer.cx-phone .cx-dl{grid-template-columns:1fr;gap:var(--cx-size-2px) 0;}
-.cx-drawer.cx-phone dd{margin-bottom:var(--cx-size-8px);}
-.cx-drawer.cx-phone .cx-button{min-height:var(--cx-size-44px);min-width:var(--cx-size-44px);}
-.cx-drawer::backdrop{background:var(--hfx-color-overlay,light-dark(rgba(22,24,28,0.42),rgba(0,0,0,0.66)));}
-.cx-grid-overlay{color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem))/1.45 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);}
-body .cx-host.cx-grid-overlay{height:auto;min-height:0;padding:0;}
+.cx-drawer :is(.p-strip,.p-spark,.p-line){max-inline-size:100%;}
+.cx-drawer[data-phone="true"] .cx-dl{grid-template-columns:1fr;gap:var(--hfx-space-0-5,2px) 0;}
+.cx-drawer[data-phone="true"] dd{margin-block-end:var(--hfx-space-2,0.5rem);}
+.cx-drawer[data-phone="true"] .cx-button{min-block-size:calc(var(--hfx-space-1,0.25rem)*11);min-inline-size:calc(var(--hfx-space-1,0.25rem)*11);}
+}
+.cx-grid-overlay{color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));font:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem))/1.45 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);}
+body .cx-host.cx-grid-overlay:not(.cx-drawer){height:auto;min-height:0;padding:0;}
 .cx-grid-overlay [hidden]{display:none!important;}
 .cx-tree-tools.cx-pin-tree .cx-row > .cx-cell.cx-tree:first-child{position:sticky;}
 .cx-tree-tools .cx-row > [data-cx-pin]{position:sticky;z-index:1;background:inherit;}
@@ -98,7 +99,7 @@ body .cx-host.cx-grid-overlay{height:auto;min-height:0;padding:0;}
 .cx-tree-tools .cx-hcell[aria-sort="ascending"] .cx-sort::after{content:"↑";font-size:var(--cx-size-14px);color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
 .cx-tree-tools .cx-hcell[aria-sort="descending"] .cx-sort::after{content:"↓";font-size:var(--cx-size-14px);color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
 .cx-tree-tools .cx-switch{font-size:var(--cx-size-14px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));white-space:nowrap;}
-.cx-tree-tools .cx-hidden-fields{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font:var(--cx-size-12d5px) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);border:0;background:transparent;padding:0;flex:none;height:auto;min-height:var(--cx-size-24px);min-width:var(--cx-size-24px);margin-left:var(--cx-size-4px);position:relative;}
+.cx-tree-tools .cx-hidden-fields{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font:var(--cx-size-12d5px) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);border:0;background:transparent;padding:0;flex:none;height:auto;min-height:var(--cx-size-24px);min-width:var(--cx-size-24px);margin-left:var(--cx-size-4px);position:relative;}
 .cx-tree-tools.cx-drawer :focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:var(--hfx-focus-offset,2px);}
 .cx-tree-tools.cx-drawer [data-cx-pointer-focus]:focus-visible{outline:none;}
-.cx-tree-tools.cx-drawer .p-sub{margin-inline-start:var(--cx-size-6px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-12d5px);}
+.cx-tree-tools.cx-drawer .p-sub{margin-inline-start:var(--cx-size-6px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--cx-size-12d5px);}