@taprootio/espalier 2.13.1 → 2.15.0

package/dist/page/esp-page.js

@@ -1,5 +1,5 @@
-var R=function(A,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(A,e,t,i);else for(var o=A.length-1;o>=0;o--)(r=A[o])&&(a=(s<3?r(a):s>3?r(e,t,a):r(e,t))||a);return s>3&&a&&Object.defineProperty(e,t,a),a};import{css as j,html as H,nothing as U}from"lit";import{customElement as Y,property as P,state as E}from"lit/decorators.js";import{classMap as Q}from"lit/directives/class-map.js";import{createRef as W,ref as x}from"lit/directives/ref.js";import{EspalierElementBase as N}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as _}from"./bi-directional-sticky-controller.js";import{getEspBus as X}from"../shared/bus-events.js";import"../toaster/esp-toaster.js";const $='esp-footer, footer, [role~="contentinfo"]',Z="(max-width: 50em)",h=1,J=5,ee=12,te=48,ie=16,ae=64,se=250;let k=class extends N{constructor(){super(),this.dialogZone=W(),this.flyoutSlot=W(),this.footerSlot=W(),this.previewSlot=W(),this.previewSpace=W(),this.previewMinWidthProbe=W(),this.previewDefaultWidthProbe=W(),this.previewMaxWidthProbe=W(),this.flyoutMinWidthProbe=W(),this.flyoutDefaultWidthProbe=W(),this.flyoutMaxWidthProbe=W(),this.mainMinWidthProbe=W(),this.mainConfiguredMaxWidthProbe=W(),this.mainMaxWidthProbe=W(),this.resizeStepProbe=W(),this.resizeLargeStepProbe=W(),this.previewObservedWidths=new WeakMap,this.previewSyncRaf=null,this.previewSyncGeneration=0,this.previewSyncTask=Promise.resolve(),this.previewOverlayRecoveryRequested=!1,this.previewHeader=null,this.previewMenu=null,this.previewCollapsedSidebarWidth=0,this.previewNavigationCollapseTask=null,this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration=0,this.preferredPreviewWidth=null,this.preferredFlyoutWidth=null,this.resizeSession=null,this.workspaceKeyboardSettlementTimer=null,this.footerWrapperIsLandmark=!0,this.allocatedPreviewWidth=0,this.allocatedFlyoutWidth=0,this.onWorkspaceResizePointerDown=(e,t)=>{if(t.button!==0||!this.separatorIsAvailable(e))return;const i=t.currentTarget,s=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,a=this.renderedWorkspaceWidths();this.endWorkspaceResize(),this.finishWorkspaceKeyboardResize(!1),this.suspendPreviewLayoutForWorkspaceResize(),this.resizeSession={separator:e,pointerId:t.pointerId,target:i,startClientX:t.clientX,startPreviewWidth:a.previewWidth,startFlyoutWidth:a.flyoutWidth,startMainWidth:s,startNavigationAllowance:this.previewNavigationResizeAllowance(),direction:this.workspaceResizeDirection()};try{i.setPointerCapture?.(t.pointerId)}catch{}this.toggleAttribute("data-workspace-resizing",!0),t.preventDefault()},this.onWorkspaceResizePointerMove=e=>{const t=this.resizeSession;!t||t.pointerId!==e.pointerId||(e.preventDefault(),this.applyWorkspaceResize(t.separator,e.clientX-t.startClientX,"pointer",t.startPreviewWidth,t.startFlyoutWidth,t.startMainWidth,t.startNavigationAllowance,t.direction))},this.onWorkspaceResizePointerEnd=e=>{!this.resizeSession||this.resizeSession.pointerId!==e.pointerId||(e.preventDefault(),this.endWorkspaceResize())},this.onWorkspaceResizeBlur=e=>{this.hasAttribute("data-workspace-keyboard-adjusting")&&(e.relatedTarget instanceof Element&&e.relatedTarget.classList.contains("esp-page-workspace-resize-handle")||this.finishWorkspaceKeyboardResize())},this.onWorkspaceResizeKeyDown=(e,t)=>{if(t.key!=="ArrowLeft"&&t.key!=="ArrowRight"||!this.separatorIsAvailable(e))return;t.preventDefault(),this.hasAttribute("data-workspace-keyboard-adjusting")||this.suspendPreviewLayoutForWorkspaceResize();const i=(t.key==="ArrowLeft"?-1:1)*this.resizeStep(t.shiftKey),s=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,a=this.renderedWorkspaceWidths();this.applyWorkspaceResize(e,i,"keyboard",a.previewWidth,a.flyoutWidth,s,this.previewNavigationResizeAllowance(),this.workspaceResizeDirection())},this.schedulePreviewLayout=(e=!1)=>{if(!this.isConnected||!this.hasUpdated||(this.previewOverlayRecoveryRequested||=e===!0,this.resizeSession||this.hasAttribute("data-workspace-keyboard-adjusting")))return;this.previewSyncGeneration+=1;const t=this.previewSyncGeneration;this.previewSyncRaf!==null&&cancelAnimationFrame(this.previewSyncRaf),this.previewSyncRaf=requestAnimationFrame(()=>{this.previewSyncRaf=null;const i=this.previewOverlayRecoveryRequested;this.previewOverlayRecoveryRequested=!1,this.previewSyncTask=this.previewSyncTask.then(()=>this.syncPreviewLayout(t,i)).catch(()=>{})})},this.onPreviewMediaChange=()=>this.schedulePreviewLayout(!0),this.onPreviewResize=e=>{let t=!1;for(const i of e){const s=i.contentRect.width;if(i.target instanceof HTMLElement&&i.target.classList.contains("esp-page-left")){s>h&&!this.hasAttribute("data-preview-navigation-collapsed")&&(this.previewCollapsedSidebarWidth=s);continue}const a=this.previewObservedWidths.get(i.target);this.previewObservedWidths.set(i.target,s),t||=a===void 0||Math.abs(a-s)>.25}t&&this.schedulePreviewLayout(!0)},this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,this.previewOpen=!1,this.previewLabel="Preview",this.previewCollapseSidebar=!1,this.workspaceResizable=!1,this.previewVisible=!1,this.previewReclaiming=!1,new _(this,".esp-page-left > .sticky-wrapper"),new _(this,".esp-page-right > .sticky-wrapper"),new _(this,".esp-page-flyout > .sticky-wrapper"),new _(this,".esp-page-preview > .sticky-wrapper",{topOffset:()=>0}),this.addEventListener("flyout-state-changed",e=>this.syncFlyoutState(e))}connectedCallback(){const e=Array.from(this.children).filter(t=>t.getAttribute("slot")==="footer");this.footerWrapperIsLandmark=!e.some(t=>this.footerElementProvidesLandmark(t)),super.connectedCallback(),this.syncMainMaximumConfiguration(),this.hasUpdated&&queueMicrotask(()=>this.setupPreviewLayoutObserver())}disconnectedCallback(){this.finishWorkspaceKeyboardResize(!1),this.endWorkspaceResize(),this.previewResizeObserver?.disconnect(),this.previewResizeObserver=void 0,this.previewMediaQuery?.removeEventListener("change",this.onPreviewMediaChange),this.previewMediaQuery=void 0,this.previewSyncRaf!==null&&(cancelAnimationFrame(this.previewSyncRaf),this.previewSyncRaf=null),this.previewSyncGeneration+=1,this.previewOverlayRecoveryRequested=!1,this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.toggleAttribute("data-workspace-keyboard-adjusting",!1),this.toggleAttribute("descendant-flyout-overlay-open",!1),this.clearFlyoutOverlayRecovery(),this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),this.preferredPreviewWidth=null,this.preferredFlyoutWidth=null,this.previewNavigationCollapseTask=null,this.setPreviewNavigationCollapse(!1),super.disconnectedCallback()}syncFlyoutState(e){if(e&&e.target?.closest?.("esp-page")!==this){this.syncDescendantFlyoutOverlayState();return}const t=r=>{const o=r;return(typeof o.mode=="string"?o.mode:r.getAttribute("mode"))==="overlay"||o.pageOverlayRequested===!0},i=r=>{const o=r.open;return typeof o=="boolean"?o:r.hasAttribute("open")},s=r=>r.anchor!=null,a=(this.flyoutSlot.value?.assignedElements()??[]).filter(r=>r.tagName==="ESP-FLYOUT");for(const r of a){const o=r,p=typeof o.mode=="string"?o.mode:r.getAttribute("mode");o.pageOverlayRequested&&(!i(r)||p!=="auto")&&(o.pageOverlayRequested=!1)}a.some(r=>r.pageOverlayRequested===!0)||this.clearFlyoutOverlayRecovery(),this.toggleAttribute("flyout-open",a.some(r=>i(r)&&!t(r))),this.toggleAttribute("flyout-overlay-open",a.some(r=>i(r)&&t(r))),this.toggleAttribute("flyout-anchored",a.some(r=>i(r)&&s(r))),this.resizeSession&&(this.hasAttribute("flyout-overlay-open")||this.resizeSession.separator==="preview-flyout"&&!this.hasAttribute("flyout-open"))&&this.endWorkspaceResize(),this.requestUpdate(),this.schedulePreviewLayout()}syncDescendantFlyoutOverlayState(){const e=Array.from(this.querySelectorAll("esp-flyout")).some(t=>{if(t.closest("esp-page")===this)return!1;const i=t,s=typeof i.open=="boolean"?i.open:t.hasAttribute("open"),a=typeof i.mode=="string"?i.mode:t.getAttribute("mode");return s&&(a==="overlay"||i.pageOverlayRequested===!0||t.getAttribute("aria-modal")==="true")});this.toggleAttribute("descendant-flyout-overlay-open",e)}assignedFlyouts(){return(this.flyoutSlot.value?.assignedElements()??[]).filter(e=>e.tagName==="ESP-FLYOUT")}openAutoFlyouts(){return this.assignedFlyouts().filter(e=>{const t=typeof e.open=="boolean"?e.open:e.hasAttribute("open"),i=typeof e.mode=="string"?e.mode:e.getAttribute("mode");return t&&i!=="overlay"})}async setPageFlyoutOverlay(e){let t=!1;const i=new Set(this.openAutoFlyouts());for(const s of this.assignedFlyouts()){const a=e&&i.has(s);s.pageOverlayRequested!==a&&(s.pageOverlayRequested=a,t=!0)}return t&&await Promise.all(this.assignedFlyouts().map(s=>s.updateComplete??Promise.resolve())),e||this.clearFlyoutOverlayRecovery(),t}clearFlyoutOverlayRecovery(){this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration+=1}armFlyoutOverlayRecovery(){const e=++this.flyoutOverlayRecoveryGeneration;this.flyoutOverlayRecoveryReady=!1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{e!==this.flyoutOverlayRecoveryGeneration||!this.openAutoFlyouts().some(t=>t.pageOverlayRequested===!0)||(this.flyoutOverlayPromotionWidth=this.visiblePageInlineBounds().width,this.flyoutOverlayRecoveryReady=!0)})})}previewHasContent(){const e=this.previewSlot.value?.assignedNodes({flatten:!0});return e?e.some(t=>t.nodeType===Node.ELEMENT_NODE||(t.textContent?.trim().length??0)>0):Array.from(this.childNodes).some(t=>t instanceof Element&&t.getAttribute("slot")==="preview"&&!t.hasAttribute("hidden"))}getPreviewNavigationPair(){if(!this.previewCollapseSidebar)return null;const e=Array.from(this.children),t=e.find(r=>r.slot==="header"&&r.tagName==="ESP-HEADER"),i=e.find(r=>r.slot==="sidebar"&&r.tagName==="ESP-MENU");if(!t||!i||!i.id)return null;const s=typeof t.drawerTarget=="string"?t.drawerTarget:t.getAttribute("drawer-target")??"",a=typeof i.mode=="string"?i.mode:i.getAttribute("mode");return s!==i.id||a!=="vertical"||!("previewCollapseRequested"in t)||!("previewCollapseRequested"in i)?null:{header:t,menu:i}}async setPreviewNavigationCollapse(e){const t=e?this.getPreviewNavigationPair():null,i=t!==null&&this.previewHeader===t.header&&this.previewMenu===t.menu,s=this.previewHeader&&this.previewHeader!==t?.header?this.previewHeader:null,a=this.previewMenu&&this.previewMenu!==t?.menu?this.previewMenu:null;if(s&&(s.previewCollapseRequested=!1),a&&(a.previewCollapseRequested=!1),this.previewHeader=t?.header??null,this.previewMenu=t?.menu??null,this.toggleAttribute("data-preview-navigation-collapsed",!1),await s?.updateComplete,await a?.updateComplete,!t)return!1;const r=i?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0;return t.header.previewCollapseRequested=!0,t.menu.previewCollapseRequested=!0,await t.header.updateComplete,await t.menu.updateComplete,t.menu.hasExternalDrawerControl===!0?(this.previewCollapsedSidebarWidth=r,this.toggleAttribute("data-preview-navigation-collapsed",!0),!0):(t.header.previewCollapseRequested=!1,t.menu.previewCollapseRequested=!1,await t.header.updateComplete,await t.menu.updateComplete,this.previewHeader=null,this.previewMenu=null,!1)}requestPreviewNavigationCollapse(){if(this.hasAttribute("data-preview-navigation-collapsed")||this.previewNavigationCollapseTask)return;const e=this.setPreviewNavigationCollapse(!0);this.previewNavigationCollapseTask=e,e.then(()=>{this.previewNavigationCollapseTask===e&&(this.previewNavigationCollapseTask=null)},()=>{this.previewNavigationCollapseTask===e&&(this.previewNavigationCollapseTask=null)})}scheduleWorkspaceSettlement(e=null){const t=()=>{this.schedulePreviewLayout(),e&&requestAnimationFrame(()=>{this.previewSyncTask.then(()=>{const a=this.shadowRoot?.activeElement,r=this.ownerDocument.activeElement;!this.isConnected||!e.isConnected||a&&a!==e||r!==this&&r!==this.ownerDocument.body||getComputedStyle(e).display!=="none"&&e.focus({preventScroll:!0})})})},i=this.previewNavigationCollapseTask;if(!i){t();return}i.then(()=>t(),()=>t())}clearWorkspaceKeyboardSettlementTimer(){this.workspaceKeyboardSettlementTimer!==null&&(clearTimeout(this.workspaceKeyboardSettlementTimer),this.workspaceKeyboardSettlementTimer=null)}finishWorkspaceKeyboardResize(e=!0){this.clearWorkspaceKeyboardSettlementTimer();const t=this.hasAttribute("data-workspace-keyboard-adjusting");this.toggleAttribute("data-workspace-keyboard-adjusting",!1),t&&e&&!this.resizeSession&&this.scheduleWorkspaceSettlement()}deferWorkspaceKeyboardSettlement(){this.clearWorkspaceKeyboardSettlementTimer(),this.workspaceKeyboardSettlementTimer=setTimeout(()=>{if(this.workspaceKeyboardSettlementTimer=null,!this.hasAttribute("data-workspace-keyboard-adjusting"))return;const e=this.shadowRoot?.activeElement,t=e instanceof HTMLElement&&e.classList.contains("esp-page-workspace-resize-handle")?e:null;this.toggleAttribute("data-workspace-keyboard-adjusting",!1),this.resizeSession||this.scheduleWorkspaceSettlement(t)},se)}suspendPreviewLayoutForWorkspaceResize(){this.previewSyncRaf!==null&&(cancelAnimationFrame(this.previewSyncRaf),this.previewSyncRaf=null),this.previewSyncGeneration+=1,this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1)}setPreviewLayoutState(e,t){this.previewVisible=e,this.previewReclaiming=e&&t,e||this.endWorkspaceResize()}setWorkspaceWidths(e,t,i=!1){const s=Math.max(0,e),a=Math.max(0,t);this.style.setProperty("--_esp-page-preview-used-width",`${s}px`),this.style.setProperty("--_esp-page-flyout-used-width",`${a}px`),this.toggleAttribute("data-workspace-targeted",i),this.allocatedPreviewWidth=s,this.allocatedFlyoutWidth=a}clampWidth(e,t,i){return Math.min(Math.max(e,t),Math.max(t,i))}visiblePageInlineBounds(){const e=this.getBoundingClientRect();let t=e.left,i=e.right;const s=window.visualViewport,a=s?.offsetLeft??0,r=s?.width??document.documentElement.clientWidth;r>0&&(t=Math.max(t,a),i=Math.min(i,a+r));const o=this.getRootNode();let p=this.parentElement??(o instanceof ShadowRoot?o.host:null);for(;p;){const g=getComputedStyle(p).overflowX;if(["auto","clip","hidden","scroll"].includes(g)){const c=p.getBoundingClientRect();t=Math.max(t,c.left),i=Math.min(i,c.right)}const l=p.getRootNode();p=p.parentElement??(l instanceof ShadowRoot?l.host:null)}return{left:t,right:i,width:Math.max(0,i-t)}}probeWidth(e){return e.value?.getBoundingClientRect().width??0}optionalWidth(e,t){return getComputedStyle(this).getPropertyValue(e).trim()===""?null:this.probeWidth(t)}syncMainMaximumConfiguration(){const e=getComputedStyle(this).getPropertyValue("--esp-page-main-max-width").trim()!=="";this.toggleAttribute("data-main-max-configured",e)}workspaceWidthCapacity(e,t,i=0){const s=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,a=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,r=Math.max(0,this.visiblePageInlineBounds().width-s-a-Math.max(0,i)),o=t>0?Math.min(r,t):r;return{natural:Math.max(0,r-o),maximum:Math.max(0,r-Math.max(0,e))}}workspaceTargetWidth(e,t,i){return Math.min(e.maximum,Math.max(t,i,e.natural))}allocateWorkspaceWidths(e,t,i,s,a,r,o,p=null,g=null){const l=Math.max(0,e),c=Math.max(0,s),d=Math.max(c,a),n=Math.max(0,r),b=Math.max(n,o),f=t?this.preferredPreviewWidth??(p===null?null:this.clampWidth(p,c,d)):null,v=i?this.preferredFlyoutWidth??(g===null?null:this.clampWidth(g,n,b)):null;let w=0,y=0;t&&i?(w=Math.min(d,Math.max(c,l-n)),y=Math.min(b,Math.max(n,l-w))):t?w=Math.min(d,Math.max(c,l)):i&&(y=Math.min(b,Math.max(n,l))),t&&f!==null&&(w=this.clampWidth(f,c,d),i&&v===null&&(y=this.clampWidth(l-w,n,b))),i&&v!==null&&(y=this.clampWidth(v,n,b),t&&f===null&&(w=this.clampWidth(l-y,c,d)));let M=w+y-l;if(M>0&&i){const u=Math.min(M,Math.max(0,y-n));y-=u,M-=u}return M>0&&t&&(w-=Math.min(M,Math.max(0,w-c))),{previewWidth:w,flyoutWidth:y}}workspaceResizeDirection(){return getComputedStyle(this).direction==="rtl"?-1:1}resizeStep(e){const t=this.probeWidth(e?this.resizeLargeStepProbe:this.resizeStepProbe);return t>0?t:e?ae:ie}previewNavigationResizeAllowance(){if(this.hasAttribute("data-preview-navigation-collapsed")||this.getPreviewNavigationPair()===null)return 0;const e=Math.max(0,this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0);return e>h&&(this.previewCollapsedSidebarWidth=e),e>h?e:this.previewCollapsedSidebarWidth}renderedWorkspaceWidths(){const e=this.shadowRoot?.querySelector(".esp-page-preview"),t=this.shadowRoot?.querySelector(".esp-page-flyout");return{previewWidth:this.allocatedPreviewWidth>0?this.allocatedPreviewWidth:e?.getBoundingClientRect().width??0,flyoutWidth:this.allocatedFlyoutWidth>0?this.allocatedFlyoutWidth:t?.getBoundingClientRect().width??0}}mainPreviewResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,i=this.previewNavigationResizeAllowance()){const s=Math.max(0,this.probeWidth(this.previewMinWidthProbe)),a=Math.max(s,this.probeWidth(this.previewMaxWidthProbe)),r=Math.max(0,this.probeWidth(this.mainMinWidthProbe)),o=this.probeWidth(this.mainMaxWidthProbe),p=Math.max(0,t+e),g=o>0?Math.max(0,p-o):0,l=Math.max(s,g),c=Math.max(0,p+i-r);return{minimum:l,maximum:Math.max(l,Math.min(a,c))}}previewFlyoutResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.renderedWorkspaceWidths().flyoutWidth){const i=Math.max(0,this.probeWidth(this.previewMinWidthProbe)),s=Math.max(i,this.probeWidth(this.previewMaxWidthProbe)),a=Math.max(0,this.probeWidth(this.flyoutMinWidthProbe)),r=Math.max(a,this.probeWidth(this.flyoutMaxWidthProbe)),o=e+t;return{minimum:Math.max(i,o-r),maximum:Math.max(i,Math.min(s,o-a))}}separatorIsAvailable(e){return!this.workspaceResizable||this.hasAttribute("flyout-overlay-open")?!1:e==="main-preview"?this.previewVisible:this.hasAttribute("flyout-open")}flyoutOnlyResizeRange(e=this.renderedWorkspaceWidths().flyoutWidth,t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0){const i=Math.max(0,this.probeWidth(this.flyoutMinWidthProbe)),s=Math.max(i,this.probeWidth(this.flyoutMaxWidthProbe)),a=Math.max(0,this.probeWidth(this.mainMinWidthProbe)),r=this.probeWidth(this.mainMaxWidthProbe),o=Math.max(0,t+e),p=r>0?Math.max(0,o-r):0,g=Math.max(i,p);return{minimum:g,maximum:Math.max(g,Math.min(s,o-a))}}applyWorkspaceResize(e,t,i,s,a,r,o,p){if(!this.separatorIsAvailable(e))return;const g=t*p;let l=e,c=s,d=a;if(e==="main-preview"){const n=this.mainPreviewResizeRange(s,r,o),b=s-g;c=this.clampWidth(b,n.minimum,n.maximum),this.preferredPreviewWidth=c;const f=Math.max(0,this.probeWidth(this.mainMinWidthProbe));o>0&&c>Math.max(0,r+s-f)+h&&this.requestPreviewNavigationCollapse();const v=Math.max(0,this.probeWidth(this.previewMinWidthProbe)),w=Math.max(0,v-b),y=n.minimum<=v+h;if(w>0&&y&&a>0){const M=Math.max(0,this.probeWidth(this.flyoutMinWidthProbe)),u=Math.max(M,this.probeWidth(this.flyoutMaxWidthProbe));d=this.clampWidth(a-w,M,u),this.preferredFlyoutWidth=d}else a>0&&(this.preferredFlyoutWidth??=a)}else if(this.previewVisible){const n=this.previewFlyoutResizeRange(s,a),b=s+g;c=this.clampWidth(b,n.minimum,n.maximum),d=s+a-c,this.preferredPreviewWidth=c;const f=Math.max(0,this.probeWidth(this.previewMinWidthProbe)),v=Math.max(0,f-b),w=n.minimum<=f+h;if(v>0&&w){const y=Math.max(0,this.probeWidth(this.flyoutMinWidthProbe)),M=Math.max(y,this.probeWidth(this.flyoutMaxWidthProbe)),u=Math.max(0,this.probeWidth(this.mainMinWidthProbe)),m=Math.max(0,r-u);d=this.clampWidth(d+Math.min(v,m),y,M)}this.preferredFlyoutWidth=d}else{l="main-flyout";const n=this.flyoutOnlyResizeRange(a,r);d=this.clampWidth(a-g,n.minimum,n.maximum),c=0,this.preferredFlyoutWidth=d}this.setWorkspaceWidths(c,d,!0),this.previewVisible&&this.setPreviewLayoutState(!0,!0),i==="keyboard"&&(this.toggleAttribute("data-workspace-keyboard-adjusting",!0),this.deferWorkspaceKeyboardSettlement()),this.dispatchEvent(new CustomEvent("esp-page-workspace-resize",{bubbles:!0,composed:!0,detail:{separator:l,source:i,previewWidth:c,flyoutWidth:d}}))}endWorkspaceResize(){const e=this.resizeSession;this.resizeSession=null,this.toggleAttribute("data-workspace-resizing",!1),e?.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),e&&this.scheduleWorkspaceSettlement()}previewFitsWithinPage(e,t,i,s,a,r){const o=this.shadowRoot?.querySelector(".esp-page-main"),p=this.shadowRoot?.querySelector(".esp-page-preview"),g=this.shadowRoot?.querySelector(".esp-page-flyout");if(!o||!p||!g)return!1;const l=this.visiblePageInlineBounds(),c=o.getBoundingClientRect(),d=p.getBoundingClientRect(),n=g.getBoundingClientRect(),b=Math.max(t,i),f=Math.max(a,r),v=d.width+h>=t&&d.width<=b+h,w=!s||n.width+h>=a&&n.width<=f+h,y=d.left+h>=l.left&&d.right<=l.right+h&&(!s||n.left+h>=l.left&&n.right<=l.right+h),M=getComputedStyle(this).direction==="rtl"?c.left+h>=d.right&&(!s||d.left+h>=n.right):c.right<=d.left+h&&(!s||d.right<=n.left+h);return c.width+h>=e&&v&&w&&y&&M}flyoutFitsWithinPage(e,t,i){const s=this.shadowRoot?.querySelector(".esp-page-main"),a=this.shadowRoot?.querySelector(".esp-page-flyout");if(!s||!a)return!1;const r=this.visiblePageInlineBounds(),o=s.getBoundingClientRect(),p=a.getBoundingClientRect(),g=Math.max(t,i),l=p.width+h>=t&&p.width<=g+h,c=p.left+h>=r.left&&p.right<=r.right+h,d=getComputedStyle(this).direction==="rtl"?o.left+h>=p.right:o.right<=p.left+h;return o.width+h>=e&&l&&c&&d}workspaceMinimumsCanFit(e,t,i,s,a){const r=this.visiblePageInlineBounds().width;if(r<=0||e<=0||t&&i<=0||s&&a<=0)return!1;const o=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,p=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,l=(t&&this.getPreviewNavigationPair()!==null?0:o)+p+e+(t?i:0)+(s?a:0);return r+h>=l}workspaceGeometrySample(){const e=this.visiblePageInlineBounds(),t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect(),i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect(),s=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect();return[e.left,e.right,e.width,t?.left??0,t?.right??0,t?.width??0,i?.left??0,i?.right??0,i?.width??0,s?.left??0,s?.right??0,s?.width??0]}workspaceGeometryMatches(e,t){return e.length===t.length&&e.every((i,s)=>Math.abs(i-(t[s]??i))<=h)}workspaceCandidateIsMeasurable(e,t){const i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect().width??0,s=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect().width??0;return(!e||i>h)&&(!t||s>h)}async candidateFitsAfterLayoutSettles(e,t,i){if(await this.updateComplete,e!==this.previewSyncGeneration||!this.isConnected)return null;let s=null,a=0;for(let r=0;r<ee;r+=1){if(await new Promise(p=>requestAnimationFrame(()=>p())),e!==this.previewSyncGeneration||!this.isConnected)return null;if(t())return!0;if(!i()){s=null,a=0;continue}const o=this.workspaceGeometrySample();if(a=s&&this.workspaceGeometryMatches(s,o)?a+1:1,a>=J)return!1;s=o}return null}async promoteFlyoutIfClipped(e,t,i,s){if(i<=0)return!1;const a=await this.candidateFitsAfterLayoutSettles(e,()=>this.flyoutFitsWithinPage(t,i,s),()=>this.workspaceCandidateIsMeasurable(!1,!0));return a===null?!0:a?!1:(await this.promoteFlyoutToOverlay(),!0)}async promoteFlyoutToOverlay(){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),this.flyoutOverlayPromotionWidth===null&&(this.flyoutOverlayPromotionWidth=this.visiblePageInlineBounds().width,this.armFlyoutOverlayRecovery()),await this.setPageFlyoutOverlay(!0)}async syncPreviewLayout(e,t=!0){if(e!==this.previewSyncGeneration||!this.isConnected||this.resizeSession||this.hasAttribute("data-workspace-keyboard-adjusting"))return;let i=!1;const s=this.previewVisible;this.toggleAttribute("data-preview-measuring",!0);try{const a=this.previewOpen&&this.previewHasContent(),r=this.previewMediaQuery?.matches??!1,o=this.hasAttribute("flyout-overlay-open"),p=this.hasAttribute("flyout-open"),g=this.hasAttribute("data-preview-navigation-collapsed")?this.previewCollapsedSidebarWidth:0,l=this.probeWidth(this.previewMinWidthProbe),c=this.optionalWidth("--esp-page-preview-default-width",this.previewDefaultWidthProbe),d=this.probeWidth(this.previewMaxWidthProbe),n=this.probeWidth(this.flyoutMinWidthProbe),b=this.optionalWidth("--esp-page-flyout-default-width",this.flyoutDefaultWidthProbe),f=this.probeWidth(this.flyoutMaxWidthProbe),v=this.probeWidth(this.mainMinWidthProbe);this.syncMainMaximumConfiguration();const w=this.probeWidth(this.mainMaxWidthProbe),y=this.kind==="full"&&!this.hasAttribute("data-main-max-configured")?0:w,M=this.openAutoFlyouts().some(S=>S.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),M){const S=this.visiblePageInlineBounds().width,V=this.flyoutOverlayPromotionWidth===null||S>=this.flyoutOverlayPromotionWidth+te;!r&&t&&this.flyoutOverlayRecoveryReady&&V&&this.workspaceMinimumsCanFit(v,a,l,!0,n)?await this.setPageFlyoutOverlay(!1):r&&await this.setPageFlyoutOverlay(!1);return}if(this.toggleAttribute("data-preview-navigation-collapsed",!1),await this.updateComplete,e!==this.previewSyncGeneration)return;const u=a&&!r&&!o,m=p&&!r;if(v>0&&(!u||l>0)&&(!m||n>0)&&(u||m)&&!this.workspaceMinimumsCanFit(v,u,l,m,n)){m&&await this.promoteFlyoutToOverlay();return}const z=(u?l:0)+(m?n:0),T=u&&this.preferredPreviewWidth!==null||m&&this.preferredFlyoutWidth!==null||(u&&c!==null||m&&b!==null),L=(u?this.preferredPreviewWidth===null?l:this.clampWidth(this.preferredPreviewWidth,l,d):0)+(m?this.preferredFlyoutWidth===null?n:this.clampWidth(this.preferredFlyoutWidth,n,f):0),F=this.workspaceWidthCapacity(v,y,g),B=this.workspaceTargetWidth(F,z,L);let C=this.allocateWorkspaceWidths(B,u,m,l,d,n,f,c,b);if(this.setWorkspaceWidths(C.previewWidth,C.flyoutWidth,T),!u||l<=0){m&&await this.promoteFlyoutIfClipped(e,v,n,f);return}if(F.natural+h>=z){s||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,B>F.natural+h);const S=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(v,l,d,m,n,f),()=>this.workspaceCandidateIsMeasurable(!0,m));if(S===null)return;if(S){this.toggleAttribute("data-preview-validating",!1);return}this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,m?n:0),m&&await this.promoteFlyoutToOverlay();return}const q=F.maximum+h>=z;if(i=q?!1:await this.setPreviewNavigationCollapse(this.previewCollapseSidebar),q&&await this.setPreviewNavigationCollapse(!1),e!==this.previewSyncGeneration)return;const O=this.workspaceWidthCapacity(v,y);if(O.maximum+h<z){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,m?n:0),i=!1,m&&await this.promoteFlyoutToOverlay();return}const I=this.workspaceTargetWidth(O,z,L),G=I>O.natural+h;if(C=this.allocateWorkspaceWidths(I,!0,m,l,d,n,f,c,b),this.setWorkspaceWidths(C.previewWidth,C.flyoutWidth,T),s||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,G),await this.updateComplete,e!==this.previewSyncGeneration)return;const D=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(v,l,d,m,n,f),()=>this.workspaceCandidateIsMeasurable(!0,m));if(D===null)return;D?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,m?n:0),i=!1,m&&await this.promoteFlyoutToOverlay())}finally{e===this.previewSyncGeneration&&!i&&await this.setPreviewNavigationCollapse(!1),e===this.previewSyncGeneration&&(this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.requestUpdate())}}setupPreviewLayoutObserver(){if(this.isConnected){if(!this.previewMediaQuery&&typeof window.matchMedia=="function"&&(this.previewMediaQuery=window.matchMedia(Z),this.previewMediaQuery.addEventListener("change",this.onPreviewMediaChange)),!this.previewResizeObserver&&typeof ResizeObserver<"u"){this.previewResizeObserver=new ResizeObserver(this.onPreviewResize),this.previewResizeObserver.observe(this);const e=this.shadowRoot?.querySelector(".esp-page-left");e&&this.previewResizeObserver.observe(e);for(const t of[this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe,this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe,this.mainMinWidthProbe,this.mainConfiguredMaxWidthProbe,this.mainMaxWidthProbe,this.resizeStepProbe,this.resizeLargeStepProbe])t.value&&this.previewResizeObserver.observe(t.value)}this.schedulePreviewLayout(!0)}}footerElementProvidesLandmark(e){return e.matches($)||e.querySelector($)!==null}syncFooterLandmark(){const t=(this.footerSlot.value?.assignedElements({flatten:!0})??[]).some(i=>this.footerElementProvidesLandmark(i));this.footerWrapperIsLandmark=!t}showPreview(){this.previewOpen=!0}closePreview(){this.previewOpen=!1}togglePreview(){this.previewOpen=!this.previewOpen}AddDialog(e){this.dialogZone.value?.appendChild(e)}firstUpdated(e){super.firstUpdated(e),this.syncFlyoutState(),this.setupPreviewLayoutObserver()}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&X().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"}),(e.has("previewOpen")||e.has("previewCollapseSidebar"))&&this.schedulePreviewLayout(!0),e.has("workspaceResizable")&&!this.workspaceResizable&&(this.finishWorkspaceKeyboardResize(),this.endWorkspaceResize())}render(){const e=this.fixedMenus||this.headerPosition==="fixed",t=!e&&this.headerPosition==="sticky",i=this.mainPreviewResizeRange(),s=Math.max(0,this.probeWidth(this.previewMinWidthProbe)),a=Math.max(0,this.probeWidth(this.flyoutMinWidthProbe)),r=Math.max(a,this.probeWidth(this.flyoutMaxWidthProbe)),o=Math.max(0,this.probeWidth(this.mainMinWidthProbe)),p=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,g=this.hasAttribute("flyout-open"),l=p+this.allocatedPreviewWidth,c=i.minimum<=s+h,d=g&&c?Math.max(0,this.allocatedFlyoutWidth-a):0,n=Math.max(o,l-i.maximum),b=Math.max(n,Math.max(o,l-i.minimum)+d);let f,v;if(this.previewVisible){const u=this.previewFlyoutResizeRange(),m=this.allocatedPreviewWidth+this.allocatedFlyoutWidth,z=u.minimum<=s+h?Math.max(0,p-o):0;f=Math.max(a,m-u.maximum),v=Math.max(f,Math.min(r,m-u.minimum+z))}else{const u=this.flyoutOnlyResizeRange();f=u.minimum,v=u.maximum}const w=this.previewVisible?"preview-flyout-resize-handle":"main-flyout-resize-handle",y=this.previewVisible?"Resize preview and help panes":"Resize help pane";return H`
-      <div part="wrapper" class="esp-page ${Q({"fixed-menus":e,"fixed-header":e,"sticky-header":t})}">
+var M=function(q,e,t,i){var a=arguments.length,s=a<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(q,e,t,i);else for(var r=q.length-1;r>=0;r--)(o=q[r])&&(s=(a<3?o(s):a>3?o(e,t,s):o(e,t))||s);return a>3&&s&&Object.defineProperty(e,t,s),s};import{css as re,html as oe,nothing as ee}from"lit";import{customElement as ne,property as _,state as H}from"lit/decorators.js";import{classMap as le}from"lit/directives/class-map.js";import{createRef as R,ref as z}from"lit/directives/ref.js";import{EspalierElementBase as te}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as N}from"./bi-directional-sticky-controller.js";import{getEspBus as pe}from"../shared/bus-events.js";import{RafThrottle as ie}from"../shared/raf-throttle.js";import{InlineBounds as he,PaneProbes as j,probeWidth as de,WidthRange as G}from"./workspace-width.js";import{slotHasContent as ce}from"../shared/slot-content.js";import"../toaster/esp-toaster.js";const ae='esp-footer, footer, [role~="contentinfo"]',ue="(max-width: 50em)",l=1,ge=5,me=12,ve=48,we=48,fe=16,ye=64,be=250,ke=250,We=40;let x=class extends te{constructor(){super(),this.dialogZone=R(),this.flyoutSlot=R(),this.footerSlot=R(),this.previewSlot=R(),this.previewSpace=R(),this.previewMinWidthProbe=R(),this.previewDefaultWidthProbe=R(),this.previewMaxWidthProbe=R(),this.previewProbes=new j(this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe),this.flyoutMinWidthProbe=R(),this.flyoutDefaultWidthProbe=R(),this.flyoutMaxWidthProbe=R(),this.flyoutProbes=new j(this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe),this.mainMinWidthProbe=R(),this.mainConfiguredMaxWidthProbe=R(),this.mainMaxWidthProbe=R(),this.mainProbes=new j(this.mainMinWidthProbe,this.mainMaxWidthProbe,this.mainMaxWidthProbe),this.resizeStepProbe=R(),this.resizeLargeStepProbe=R(),this.previewObservedWidths=new WeakMap,this.previewSyncFrame=new ie(()=>this.runScheduledPreviewLayout()),this.previewSyncGeneration=0,this.previewSyncTask=Promise.resolve(),this.previewOverlayRecoveryRequested=!1,this.previewHeader=null,this.previewMenu=null,this.previewCollapsedSidebarWidth=0,this.previewNavigationCollapseTask=null,this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration=0,this.preferredPreviewWidth=null,this.preferredFlyoutWidth=null,this.flyoutFullHeightActive=!1,this.resizeSession=null,this.workspaceKeyboardSettlementTimer=null,this.workspaceRecenteringFrame=new ie(()=>this.applyWorkspaceRecentering()),this.pendingRecenterLeading=0,this.workspaceRecenteringTimer=null,this.footerWrapperIsLandmark=!0,this.allocatedPreviewWidth=0,this.allocatedFlyoutWidth=0,this.onWorkspaceResizePointerDown=(e,t)=>{if(t.button!==0||!this.separatorIsAvailable(e))return;const i=t.currentTarget,a=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,s=this.renderedWorkspaceWidths();this.endWorkspaceResize(),this.finishWorkspaceKeyboardResize(!1),this.suspendPreviewLayoutForWorkspaceResize();const o=i.getBoundingClientRect(),r=this.holdWorkspacePosition();this.toggleAttribute("data-workspace-resizing",!0);const{leading:n,trailing:d}=this.workspaceLogicalGutterWidths(),m=d>l?n+d:0,h=d>l?Math.max(1,m/d):1;this.resizeSession={separator:e,pointerId:t.pointerId,target:i,startClientX:t.clientX,startPreviewWidth:s.previewWidth,startFlyoutWidth:s.flyoutWidth,startMainWidth:a,startNavigationAllowance:this.previewNavigationResizeAllowance(),startOuterGrowthCapacity:m,trailingExpansionScale:h,trailingGroupPushDelta:0,startHandleClientX:o.left+o.width/2,startLeadingGutterWidth:r,heldLeadingGutterWidth:r,direction:this.workspaceResizeDirection()};try{i.setPointerCapture?.(t.pointerId)}catch{}t.preventDefault()},this.onWorkspaceResizePointerMove=e=>{const t=this.resizeSession;if(!t||t.pointerId!==e.pointerId)return;e.preventDefault();const i=e.clientX-t.startClientX,a=i*t.direction,s=t.separator==="main-preview"||t.separator==="preview-flyout"&&!this.previewVisible;t.trailingGroupPushDelta=s&&a>0?Math.min(a,t.startOuterGrowthCapacity/t.trailingExpansionScale,this.mainResizeGrowthCapacity(t.startMainWidth)):0,this.applyWorkspaceResize(t.separator,i,"pointer",t.startPreviewWidth,t.startFlyoutWidth,t.startMainWidth,t.startNavigationAllowance,t.startOuterGrowthCapacity,t.trailingExpansionScale,t.direction),this.align!=="start"&&!this.seedWorkspaceResizeLeadingGutter(t)&&this.trackWorkspaceResizePointer(t)},this.onWorkspaceResizePointerEnd=e=>{!this.resizeSession||this.resizeSession.pointerId!==e.pointerId||(e.preventDefault(),this.endWorkspaceResize())},this.onWorkspaceResizeBlur=e=>{this.hasAttribute("data-workspace-keyboard-adjusting")&&(e.relatedTarget instanceof Element&&e.relatedTarget.classList.contains("esp-page-workspace-resize-handle")||this.finishWorkspaceKeyboardResize())},this.onWorkspaceResizeKeyDown=(e,t)=>{if(t.key!=="ArrowLeft"&&t.key!=="ArrowRight"||!this.separatorIsAvailable(e))return;t.preventDefault(),this.hasAttribute("data-workspace-keyboard-adjusting")||this.suspendPreviewLayoutForWorkspaceResize();const i=(t.key==="ArrowLeft"?-1:1)*this.resizeStep(t.shiftKey),a=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,s=this.renderedWorkspaceWidths();this.applyWorkspaceResize(e,i,"keyboard",s.previewWidth,s.flyoutWidth,a,this.previewNavigationResizeAllowance(),(()=>{const o=this.workspaceLogicalGutterWidths();return o.leading+o.trailing})(),1,this.workspaceResizeDirection())},this.schedulePreviewLayout=(e=!1)=>{!this.isConnected||!this.hasUpdated||(this.previewOverlayRecoveryRequested||=e===!0,!(this.resizeSession||this.hasAttribute("data-workspace-keyboard-adjusting")||this.hasAttribute("data-workspace-position-held"))&&(this.previewSyncGeneration+=1,this.previewSyncFrame.restart()))},this.onPreviewMediaChange=()=>this.schedulePreviewLayout(!0),this.onPreviewResize=e=>{let t=!1;for(const i of e){const a=i.contentRect.width;if(i.target instanceof HTMLElement&&i.target.classList.contains("esp-page-left")){a>l&&!this.hasAttribute("data-preview-navigation-collapsed")&&(this.previewCollapsedSidebarWidth=a);continue}const s=this.previewObservedWidths.get(i.target);this.previewObservedWidths.set(i.target,a),t||=s===void 0||Math.abs(s-a)>.25}t&&this.schedulePreviewLayout(!0)},this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,this.previewOpen=!1,this.previewLabel="Preview",this.previewCollapseSidebar=!1,this.workspaceResizable=!1,this.previewVisible=!1,this.previewReclaiming=!1,new N(this,".esp-page-left > .sticky-wrapper"),new N(this,".esp-page-right > .sticky-wrapper"),new N(this,".esp-page-flyout > .sticky-wrapper",{topOffset:()=>this.flyoutFullHeightActive?0:void 0}),new N(this,".esp-page-preview > .sticky-wrapper",{topOffset:()=>0}),this.addEventListener("flyout-state-changed",e=>this.syncFlyoutState(e))}connectedCallback(){const e=Array.from(this.children).filter(t=>t.getAttribute("slot")==="footer");this.footerWrapperIsLandmark=!e.some(t=>this.footerElementProvidesLandmark(t)),super.connectedCallback(),this.syncMainMaximumConfiguration(),this.hasUpdated&&queueMicrotask(()=>this.setupPreviewLayoutObserver())}disconnectedCallback(){this.finishWorkspaceKeyboardResize(!1),this.endWorkspaceResize(),this.clearWorkspaceRecenteringState(),this.previewResizeObserver?.disconnect(),this.previewResizeObserver=void 0,this.previewMediaQuery?.removeEventListener("change",this.onPreviewMediaChange),this.previewMediaQuery=void 0,this.previewSyncFrame.cancel(),this.previewSyncGeneration+=1,this.previewOverlayRecoveryRequested=!1,this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.toggleAttribute("data-workspace-keyboard-adjusting",!1),this.toggleAttribute("descendant-flyout-overlay-open",!1),this.clearFlyoutOverlayRecovery(),this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),this.preferredPreviewWidth=null,this.preferredFlyoutWidth=null,this.previewNavigationCollapseTask=null,this.setPreviewNavigationCollapse(!1),super.disconnectedCallback()}syncFlyoutState(e){if(e&&e.target?.closest?.("esp-page")!==this){this.syncDescendantFlyoutOverlayState();return}const t=r=>{const n=r;return(typeof n.mode=="string"?n.mode:r.getAttribute("mode"))==="overlay"||n.pageOverlayRequested===!0},i=r=>{const n=r.open;return typeof n=="boolean"?n:r.hasAttribute("open")},a=r=>r.anchor!=null,s=r=>{const n=r.fullHeight;return typeof n=="boolean"?n:r.hasAttribute("full-height")},o=(this.flyoutSlot.value?.assignedElements()??[]).filter(r=>r.tagName==="ESP-FLYOUT");for(const r of o){const n=r,d=typeof n.mode=="string"?n.mode:r.getAttribute("mode");n.pageOverlayRequested&&(!i(r)||d!=="auto")&&(n.pageOverlayRequested=!1)}o.some(r=>r.pageOverlayRequested===!0)||this.clearFlyoutOverlayRecovery(),this.toggleAttribute("flyout-open",o.some(r=>i(r)&&!t(r))),this.toggleAttribute("flyout-overlay-open",o.some(r=>i(r)&&t(r))),this.toggleAttribute("flyout-anchored",o.some(r=>i(r)&&a(r))),this.flyoutFullHeightActive=o.some(r=>i(r)&&!t(r)&&s(r)),this.toggleAttribute("flyout-full-height",this.flyoutFullHeightActive),this.resizeSession&&(this.hasAttribute("flyout-overlay-open")||this.resizeSession.separator==="preview-flyout"&&!this.hasAttribute("flyout-open"))&&this.endWorkspaceResize(),this.requestUpdate(),this.schedulePreviewLayout()}syncDescendantFlyoutOverlayState(){const e=Array.from(this.querySelectorAll("esp-flyout")).some(t=>{if(t.closest("esp-page")===this)return!1;const i=t,a=typeof i.open=="boolean"?i.open:t.hasAttribute("open"),s=typeof i.mode=="string"?i.mode:t.getAttribute("mode");return a&&(s==="overlay"||i.pageOverlayRequested===!0||t.getAttribute("aria-modal")==="true")});this.toggleAttribute("descendant-flyout-overlay-open",e)}assignedFlyouts(){return(this.flyoutSlot.value?.assignedElements()??[]).filter(e=>e.tagName==="ESP-FLYOUT")}openAutoFlyouts(){return this.assignedFlyouts().filter(e=>{const t=typeof e.open=="boolean"?e.open:e.hasAttribute("open"),i=typeof e.mode=="string"?e.mode:e.getAttribute("mode");return t&&i!=="overlay"})}async setPageFlyoutOverlay(e){let t=!1;const i=new Set(this.openAutoFlyouts());for(const a of this.assignedFlyouts()){const s=e&&i.has(a);a.pageOverlayRequested!==s&&(a.pageOverlayRequested=s,t=!0)}return t&&await Promise.all(this.assignedFlyouts().map(a=>a.updateComplete??Promise.resolve())),e||this.clearFlyoutOverlayRecovery(),t}clearFlyoutOverlayRecovery(){this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration+=1}armFlyoutOverlayRecovery(){const e=++this.flyoutOverlayRecoveryGeneration;this.flyoutOverlayRecoveryReady=!1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{e!==this.flyoutOverlayRecoveryGeneration||!this.openAutoFlyouts().some(t=>t.pageOverlayRequested===!0)||(this.flyoutOverlayPromotionWidth=this.visiblePageInlineBounds().width,this.flyoutOverlayRecoveryReady=!0)})})}previewHasContent(){const e=this.previewSlot.value;return e?ce(e):Array.from(this.childNodes).some(t=>t instanceof Element&&t.getAttribute("slot")==="preview"&&!t.hasAttribute("hidden"))}getPreviewNavigationPair(){if(!this.previewCollapseSidebar)return null;const e=Array.from(this.children),t=e.find(o=>o.slot==="header"&&o.tagName==="ESP-HEADER"),i=e.find(o=>o.slot==="sidebar"&&o.tagName==="ESP-MENU");if(!t||!i||!i.id)return null;const a=typeof t.drawerTarget=="string"?t.drawerTarget:t.getAttribute("drawer-target")??"",s=typeof i.mode=="string"?i.mode:i.getAttribute("mode");return a!==i.id||s!=="vertical"||!("previewCollapseRequested"in t)||!("previewCollapseRequested"in i)?null:{header:t,menu:i}}async setPreviewNavigationCollapse(e){const t=e?this.getPreviewNavigationPair():null,i=t!==null&&this.previewHeader===t.header&&this.previewMenu===t.menu,a=this.previewHeader&&this.previewHeader!==t?.header?this.previewHeader:null,s=this.previewMenu&&this.previewMenu!==t?.menu?this.previewMenu:null;if(a&&(a.previewCollapseRequested=!1),s&&(s.previewCollapseRequested=!1),this.previewHeader=t?.header??null,this.previewMenu=t?.menu??null,this.toggleAttribute("data-preview-navigation-collapsed",!1),await a?.updateComplete,await s?.updateComplete,!t)return!1;const o=i?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0;return t.header.previewCollapseRequested=!0,t.menu.previewCollapseRequested=!0,await t.header.updateComplete,await t.menu.updateComplete,t.menu.hasExternalDrawerControl===!0?(this.previewCollapsedSidebarWidth=o,this.toggleAttribute("data-preview-navigation-collapsed",!0),!0):(t.header.previewCollapseRequested=!1,t.menu.previewCollapseRequested=!1,await t.header.updateComplete,await t.menu.updateComplete,this.previewHeader=null,this.previewMenu=null,!1)}requestPreviewNavigationCollapse(){if(this.hasAttribute("data-preview-navigation-collapsed")||this.previewNavigationCollapseTask)return;const e=this.setPreviewNavigationCollapse(!0);this.previewNavigationCollapseTask=e,e.then(()=>{this.previewNavigationCollapseTask===e&&(this.previewNavigationCollapseTask=null)},()=>{this.previewNavigationCollapseTask===e&&(this.previewNavigationCollapseTask=null)})}scheduleWorkspaceSettlement(e=null){const t=()=>{this.schedulePreviewLayout(),e&&requestAnimationFrame(()=>{this.previewSyncTask.then(()=>{const s=this.shadowRoot?.activeElement,o=this.ownerDocument.activeElement;!this.isConnected||!e.isConnected||s&&s!==e||o!==this&&o!==this.ownerDocument.body||getComputedStyle(e).display!=="none"&&e.focus({preventScroll:!0})})})},i=this.previewNavigationCollapseTask;if(!i){t();return}i.then(()=>t(),()=>t())}clearWorkspaceKeyboardSettlementTimer(){this.workspaceKeyboardSettlementTimer!==null&&(clearTimeout(this.workspaceKeyboardSettlementTimer),this.workspaceKeyboardSettlementTimer=null)}finishWorkspaceKeyboardResize(e=!0){this.clearWorkspaceKeyboardSettlementTimer();const t=this.hasAttribute("data-workspace-keyboard-adjusting");this.toggleAttribute("data-workspace-keyboard-adjusting",!1),t&&e&&!this.resizeSession&&this.scheduleWorkspaceSettlement()}deferWorkspaceKeyboardSettlement(){this.clearWorkspaceKeyboardSettlementTimer(),this.workspaceKeyboardSettlementTimer=setTimeout(()=>{if(this.workspaceKeyboardSettlementTimer=null,!this.hasAttribute("data-workspace-keyboard-adjusting"))return;const e=this.shadowRoot?.activeElement,t=e instanceof HTMLElement&&e.classList.contains("esp-page-workspace-resize-handle")?e:null;this.toggleAttribute("data-workspace-keyboard-adjusting",!1),this.resizeSession||this.scheduleWorkspaceSettlement(t)},be)}suspendPreviewLayoutForWorkspaceResize(){this.previewSyncFrame.cancel(),this.previewSyncGeneration+=1,this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1)}setPreviewLayoutState(e,t){this.previewVisible=e,this.previewReclaiming=e&&t,e||this.endWorkspaceResize()}setWorkspaceWidths(e,t,i=!1){const a=Math.max(0,e),s=Math.max(0,t);this.style.setProperty("--_esp-page-preview-used-width",`${a}px`),this.style.setProperty("--_esp-page-flyout-used-width",`${s}px`),this.toggleAttribute("data-workspace-targeted",i),this.allocatedPreviewWidth=a,this.allocatedFlyoutWidth=s}clampWidth(e,t,i){return G.of(t,i).clamp(e)}visiblePageInlineBounds(){const e=this.getBoundingClientRect();let t=e.left,i=e.right;const a=window.visualViewport,s=a?.offsetLeft??0,o=a?.width??document.documentElement.clientWidth;o>0&&(t=Math.max(t,s),i=Math.min(i,s+o));const r=this.getRootNode();let n=this.parentElement??(r instanceof ShadowRoot?r.host:null);for(;n;){const d=getComputedStyle(n).overflowX;if(["auto","clip","hidden","scroll"].includes(d)){const h=n.getBoundingClientRect();t=Math.max(t,h.left),i=Math.min(i,h.right)}const m=n.getRootNode();n=n.parentElement??(m instanceof ShadowRoot?m.host:null)}return new he(t,i)}probeWidth(e){return de(e)}optionalWidth(e,t){return getComputedStyle(this).getPropertyValue(e).trim()===""?null:this.probeWidth(t)}syncMainMaximumConfiguration(){const e=getComputedStyle(this).getPropertyValue("--esp-page-main-max-width").trim()!=="";this.toggleAttribute("data-main-max-configured",e)}workspaceWidthCapacity(e,t,i=0){const a=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,s=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,o=Math.max(0,this.visiblePageInlineBounds().width-a-s-Math.max(0,i));return this.workspaceWidthCapacityForAvailable(o,e,t)}workspaceWidthCapacityForAvailable(e,t,i){const a=Math.max(0,e),s=i>0?Math.min(a,i):a;return{natural:Math.max(0,a-s),maximum:Math.max(0,a-Math.max(0,t))}}workspaceTargetWidth(e,t,i){return Math.min(e.maximum,Math.max(t,i,e.natural))}allocateWorkspaceWidths(e,t,i,a,s,o,r,n=null,d=null){const m=Math.max(0,e),h=Math.max(0,a),u=Math.max(h,s),y=Math.max(0,o),W=Math.max(y,r),v=t?this.preferredPreviewWidth??(n===null?null:this.clampWidth(n,h,u)):null,w=i?this.preferredFlyoutWidth??(d===null?null:this.clampWidth(d,y,W)):null;let c=0,p=0;t&&i?(c=Math.min(u,Math.max(h,m-y)),p=Math.min(W,Math.max(y,m-c))):t?c=Math.min(u,Math.max(h,m)):i&&(p=Math.min(W,Math.max(y,m))),t&&v!==null&&(c=this.clampWidth(v,h,u),i&&w===null&&(p=this.clampWidth(m-c,y,W))),i&&w!==null&&(p=this.clampWidth(w,y,W),t&&v===null&&(c=this.clampWidth(m-p,h,u)));let b=c+p-m;if(b>0&&i){const P=Math.min(b,Math.max(0,p-y));p-=P,b-=P}return b>0&&t&&(c-=Math.min(b,Math.max(0,c-h))),{previewWidth:c,flyoutWidth:p}}workspaceResizeDirection(){return getComputedStyle(this).direction==="rtl"?-1:1}trailingWorkspaceSeparator(){return this.hasAttribute("flyout-open")&&!this.hasAttribute("flyout-overlay-open")?"flyout-end":this.previewVisible?"preview-end":null}trailingWorkspacePane(){const e=this.trailingWorkspaceSeparator()==="flyout-end"?".esp-page-flyout":this.trailingWorkspaceSeparator()==="preview-end"?".esp-page-preview":null;return e?this.shadowRoot?.querySelector(e)??null:null}workspaceLogicalGutterWidths(){const e=Math.max(0,this.shadowRoot?.querySelector(".esp-page-canvas--left")?.getBoundingClientRect().width??0),t=this.trailingWorkspacePane();if(!t)return{leading:e,trailing:0};const i=this.visiblePageInlineBounds(),a=t.getBoundingClientRect(),s=this.workspaceResizeDirection()===1?i.right-a.right:a.left-i.left;return{leading:e,trailing:Math.max(0,s)}}syncTrailingWorkspaceResizeAvailability(){const{trailing:e}=this.workspaceLogicalGutterWidths();this.toggleAttribute("data-workspace-trailing-edge-exposed",this.trailingWorkspaceSeparator()!==null&&e>l)}trailingPaneResizeRange(e,t,i){const a=e==="preview-end"?this.previewMinWidthProbe:this.flyoutMinWidthProbe,s=e==="preview-end"?this.previewMaxWidthProbe:this.flyoutMaxWidthProbe,o=Math.max(0,this.probeWidth(a)),r=Math.max(o,this.probeWidth(s));return G.of(o,r).cappedAt(Math.max(0,t)+Math.max(0,i))}resizeStep(e){const t=this.probeWidth(e?this.resizeLargeStepProbe:this.resizeStepProbe);return t>0?t:e?ye:fe}previewNavigationResizeAllowance(){if(this.hasAttribute("data-preview-navigation-collapsed")||this.getPreviewNavigationPair()===null)return 0;const e=Math.max(0,this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0);return e>l&&(this.previewCollapsedSidebarWidth=e),e>l?e:this.previewCollapsedSidebarWidth}renderedWorkspaceWidths(){const e=this.shadowRoot?.querySelector(".esp-page-preview"),t=this.shadowRoot?.querySelector(".esp-page-flyout");return{previewWidth:this.allocatedPreviewWidth>0?this.allocatedPreviewWidth:e?.getBoundingClientRect().width??0,flyoutWidth:this.allocatedFlyoutWidth>0?this.allocatedFlyoutWidth:t?.getBoundingClientRect().width??0}}mainPreviewResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,i=this.previewNavigationResizeAllowance()){const a=this.previewProbes.minimum,s=this.previewProbes.maximum,o=this.mainProbes.minimum,r=Math.max(0,t+e),n=Math.max(0,r+i-o);return G.of(a,Math.max(a,Math.min(s,n)))}previewFlyoutResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.renderedWorkspaceWidths().flyoutWidth){const i=this.previewProbes.minimum,a=this.previewProbes.maximum,s=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,r=e+t;return G.of(Math.max(i,r-o),Math.max(i,Math.min(a,r-s)))}separatorIsAvailable(e){return!this.workspaceResizable||this.hasAttribute("flyout-overlay-open")?!1:e==="main-preview"?this.previewVisible:e==="preview-end"||e==="flyout-end"?this.trailingWorkspaceSeparator()===e&&(this.hasAttribute("data-workspace-trailing-edge-exposed")||this.hasAttribute("data-workspace-position-held")||this.hasAttribute("data-workspace-keyboard-adjusting")):this.hasAttribute("flyout-open")}flyoutOnlyResizeRange(e=this.renderedWorkspaceWidths().flyoutWidth,t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0){const i=this.flyoutProbes.minimum,a=this.flyoutProbes.maximum,s=this.mainProbes.minimum,o=this.probeWidth(this.mainMaxWidthProbe),r=Math.max(0,t+e),n=o>0?Math.max(0,r-o):0,d=Math.max(i,n);return G.of(d,Math.min(a,r-s))}mainResizeGrowthCapacity(e){return this.kind==="full"&&!this.hasAttribute("data-main-max-configured")?Number.POSITIVE_INFINITY:Math.max(0,this.probeWidth(this.mainMaxWidthProbe)-e)}applyWorkspaceResize(e,t,i,a,s,o,r,n,d,m){if(!this.separatorIsAvailable(e))return;const h=t*m,u=n/d,y=e==="main-preview"||e==="preview-flyout"&&!this.previewVisible,W=i==="pointer"&&y&&h>0?Math.min(h,u,this.mainResizeGrowthCapacity(o)):0;let v=e,w=a,c=s;if(e==="preview-end"||e==="flyout-end"){const p=e==="preview-end"?a:s,b=this.trailingPaneResizeRange(e,p,n),P=p+(h>0?h*d:h),C=b.clamp(P);e==="preview-end"?(w=C,this.preferredPreviewWidth=C):(c=C,this.preferredFlyoutWidth=C)}else if(e==="main-preview"){const p=this.mainPreviewResizeRange(a,o,r),b=a-(h-W);w=p.clamp(b),this.preferredPreviewWidth=w;const P=this.mainProbes.minimum,C=this.probeWidth(this.mainMaxWidthProbe),k=this.kind==="full"&&!this.hasAttribute("data-main-max-configured")?0:C,g=this.workspaceWidthCapacity(P,k);r>0&&w+c>g.natural+l&&this.requestPreviewNavigationCollapse();const F=this.previewProbes.minimum,A=Math.max(0,F-b),O=p.min<=F+l;if(A>0&&O&&s>0){const E=this.flyoutProbes.minimum,L=this.flyoutProbes.maximum;c=this.clampWidth(s-A,E,L),this.preferredFlyoutWidth=c}else s>0&&(this.preferredFlyoutWidth??=s)}else if(!this.previewVisible)v="main-flyout",c=this.flyoutOnlyResizeRange(s,o).clamp(s-(h-W)),w=0,this.preferredFlyoutWidth=c;else{const p=this.previewProbes.minimum,b=this.previewProbes.maximum,P=this.flyoutProbes.minimum,C=this.flyoutProbes.maximum;if(h>=0){const k=Math.max(0,s-P),g=Math.min(h,u),F=Math.max(0,h-g),A=g*d+F,O=k+n;w=this.clampWidth(a+A,p,Math.min(b,a+O));const E=Math.max(0,w-a),L=Math.min(E,n);c=s-Math.min(Math.max(0,E-L),k)}else{const k=this.previewFlyoutResizeRange(a,s),g=a+h;w=k.clamp(g),c=a+s-w;const F=Math.max(0,p-g),A=k.min<=p+l;if(F>0&&A){const O=this.mainProbes.minimum,E=Math.max(0,o-O);c=this.clampWidth(c+Math.min(F,E),P,C)}}this.preferredPreviewWidth=w,this.preferredFlyoutWidth=c}this.setWorkspaceWidths(w,c,!0),this.requestUpdate(),this.previewVisible&&this.setPreviewLayoutState(!0,!0),i==="keyboard"&&(this.toggleAttribute("data-workspace-keyboard-adjusting",!0),this.deferWorkspaceKeyboardSettlement()),this.dispatchEvent(new CustomEvent("esp-page-workspace-resize",{bubbles:!0,composed:!0,detail:{separator:v,source:i,previewWidth:w,flyoutWidth:c}}))}appliedSeparatorInlineDelta(e){if(e.separator==="preview-end"){const a=this.allocatedPreviewWidth-e.startPreviewWidth;return a>0?a/e.trailingExpansionScale:a}if(e.separator==="flyout-end"){const a=this.allocatedFlyoutWidth-e.startFlyoutWidth;return a>0?a/e.trailingExpansionScale:a}if(e.separator==="main-preview")return e.trailingGroupPushDelta+e.startPreviewWidth-this.allocatedPreviewWidth+(e.startFlyoutWidth-this.allocatedFlyoutWidth);const t=e.startFlyoutWidth-this.allocatedFlyoutWidth;if(!this.previewVisible)return e.trailingGroupPushDelta+t;if(this.allocatedPreviewWidth<e.startPreviewWidth)return t;const i=Math.max(0,this.allocatedPreviewWidth+this.allocatedFlyoutWidth-e.startPreviewWidth-e.startFlyoutWidth);return t+i/e.trailingExpansionScale}clearWorkspaceRecenteringState(){this.workspaceRecenteringFrame.cancel(),this.workspaceRecenteringTimer!==null&&(clearTimeout(this.workspaceRecenteringTimer),this.workspaceRecenteringTimer=null),this.toggleAttribute("data-workspace-position-held",!1),this.style.removeProperty("--_esp-page-resize-leading-gutter-width")}holdWorkspacePosition(){const e=this.workspaceLogicalGutterWidths().leading;return this.clearWorkspaceRecenteringState(),this.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e}px`),this.toggleAttribute("data-workspace-position-held",!0),e}trackWorkspaceResizePointer(e){const t=e.startHandleClientX+this.appliedSeparatorInlineDelta(e)*e.direction;for(let i=0;i<3;i+=1){const a=e.target.getBoundingClientRect(),s=a.left+a.width/2,o=(t-s)*e.direction;if(Math.abs(o)<=.25)return;const r=Math.max(0,e.heldLeadingGutterWidth+o);if(Math.abs(r-e.heldLeadingGutterWidth)<=.25)return;e.heldLeadingGutterWidth=r,this.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e.heldLeadingGutterWidth}px`)}}seedWorkspaceResizeLeadingGutter(e){if(this.align==="start")return!1;const t=this.appliedSeparatorInlineDelta(e);if(t<=0)return!1;let i=0;if(e.separator==="preview-end"||e.separator==="flyout-end")i=this.allocatedPreviewWidth-e.startPreviewWidth+this.allocatedFlyoutWidth-e.startFlyoutWidth;else if(e.separator==="preview-flyout"&&this.previewVisible)i=this.allocatedPreviewWidth-e.startPreviewWidth;else{const a=Math.max(0,e.startPreviewWidth-this.allocatedPreviewWidth+e.startFlyoutWidth-this.allocatedFlyoutWidth),s=this.probeWidth(this.mainMaxWidthProbe),o=this.kind==="full"&&!this.hasAttribute("data-main-max-configured")?Number.POSITIVE_INFINITY:Math.max(0,s-e.startMainWidth);i=Math.min(e.trailingGroupPushDelta+a,o)}return e.heldLeadingGutterWidth=Math.max(0,e.startLeadingGutterWidth+t-i),this.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e.heldLeadingGutterWidth}px`),!0}finishWorkspaceRecentering(){this.clearWorkspaceRecenteringState(),this.syncTrailingWorkspaceResizeAvailability(),this.isConnected&&this.scheduleWorkspaceSettlement()}beginWorkspaceRecentering(){const e=this.workspaceLogicalGutterWidths(),t=e.leading+e.trailing,i=this.align==="center"?t/2:this.align==="end"?t:0;if(Math.abs(i-e.leading)<=l){this.finishWorkspaceRecentering();return}this.pendingRecenterLeading=i,this.workspaceRecenteringFrame.restart()}applyWorkspaceRecentering(){this.resizeSession||!this.hasAttribute("data-workspace-position-held")||(this.style.setProperty("--_esp-page-resize-leading-gutter-width",`${this.pendingRecenterLeading}px`),this.workspaceRecenteringTimer=setTimeout(()=>this.finishWorkspaceRecentering(),ke+We))}endWorkspaceResize(){const e=this.resizeSession;this.resizeSession=null,this.toggleAttribute("data-workspace-resizing",!1),e?.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),e&&this.beginWorkspaceRecentering()}previewFitsWithinPage(e,t,i,a,s,o){const r=this.shadowRoot?.querySelector(".esp-page-main"),n=this.shadowRoot?.querySelector(".esp-page-preview"),d=this.shadowRoot?.querySelector(".esp-page-flyout");if(!r||!n||!d)return!1;const m=this.visiblePageInlineBounds(),h=r.getBoundingClientRect(),u=n.getBoundingClientRect(),y=d.getBoundingClientRect(),W=Math.max(t,i),v=Math.max(s,o),w=u.width+l>=t&&u.width<=W+l,c=!a||y.width+l>=s&&y.width<=v+l,p=u.left+l>=m.left&&u.right<=m.right+l&&(!a||y.left+l>=m.left&&y.right<=m.right+l),b=getComputedStyle(this).direction==="rtl"?h.left+l>=u.right&&(!a||u.left+l>=y.right):h.right<=u.left+l&&(!a||u.right<=y.left+l);return h.width+l>=e&&w&&c&&p&&b}flyoutFitsWithinPage(e,t,i){const a=this.shadowRoot?.querySelector(".esp-page-main"),s=this.shadowRoot?.querySelector(".esp-page-flyout");if(!a||!s)return!1;const o=this.visiblePageInlineBounds(),r=a.getBoundingClientRect(),n=s.getBoundingClientRect(),d=Math.max(t,i),m=n.width+l>=t&&n.width<=d+l,h=n.left+l>=o.left&&n.right<=o.right+l,u=getComputedStyle(this).direction==="rtl"?r.left+l>=n.right:r.right<=n.left+l;return r.width+l>=e&&m&&h&&u}workspaceMinimumsCanFit(e,t,i,a,s){const o=this.visiblePageInlineBounds().width;if(o<=0||e<=0||t&&i<=0||a&&s<=0)return!1;const r=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,n=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,m=(t&&this.getPreviewNavigationPair()!==null?0:r)+n+e+(t?i:0)+(a?s:0);return o+l>=m}workspaceGeometrySample(){const e=this.visiblePageInlineBounds(),t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect(),i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect(),a=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect();return[e.left,e.right,e.width,t?.left??0,t?.right??0,t?.width??0,i?.left??0,i?.right??0,i?.width??0,a?.left??0,a?.right??0,a?.width??0]}workspaceGeometryMatches(e,t){return e.length===t.length&&e.every((i,a)=>Math.abs(i-(t[a]??i))<=l)}workspaceCandidateIsMeasurable(e,t){const i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect().width??0,a=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect().width??0;return(!e||i>l)&&(!t||a>l)}async candidateFitsAfterLayoutSettles(e,t,i){if(await this.updateComplete,e!==this.previewSyncGeneration||!this.isConnected)return null;let a=null,s=0;for(let o=0;o<me;o+=1){if(await new Promise(n=>requestAnimationFrame(()=>n())),e!==this.previewSyncGeneration||!this.isConnected)return null;if(t())return!0;if(!i()){a=null,s=0;continue}const r=this.workspaceGeometrySample();if(s=a&&this.workspaceGeometryMatches(a,r)?s+1:1,s>=ge)return!1;a=r}return null}async promoteFlyoutIfClipped(e,t,i,a){if(i<=0)return!1;const s=await this.candidateFitsAfterLayoutSettles(e,()=>this.flyoutFitsWithinPage(t,i,a),()=>this.workspaceCandidateIsMeasurable(!1,!0));return s===null?!0:s?!1:(await this.promoteFlyoutToOverlay(),!0)}async promoteFlyoutToOverlay(){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),this.flyoutOverlayPromotionWidth===null&&(this.flyoutOverlayPromotionWidth=this.visiblePageInlineBounds().width,this.armFlyoutOverlayRecovery()),await this.setPageFlyoutOverlay(!0)}async syncPreviewLayout(e,t=!0){if(e!==this.previewSyncGeneration||!this.isConnected||this.resizeSession||this.hasAttribute("data-workspace-keyboard-adjusting")||this.hasAttribute("data-workspace-position-held"))return;let i=!1;const a=this.previewVisible;this.toggleAttribute("data-preview-measuring",!0);try{const s=this.previewOpen&&this.previewHasContent(),o=this.previewMediaQuery?.matches??!1,r=this.hasAttribute("flyout-overlay-open"),n=this.hasAttribute("flyout-open"),d=this.hasAttribute("data-preview-navigation-collapsed"),m=this.getPreviewNavigationPair(),h=m===null?0:d?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,u=this.probeWidth(this.previewMinWidthProbe),y=this.optionalWidth("--esp-page-preview-default-width",this.previewDefaultWidthProbe),W=this.probeWidth(this.previewMaxWidthProbe),v=this.probeWidth(this.flyoutMinWidthProbe),w=this.optionalWidth("--esp-page-flyout-default-width",this.flyoutDefaultWidthProbe),c=this.probeWidth(this.flyoutMaxWidthProbe),p=this.probeWidth(this.mainMinWidthProbe);this.syncMainMaximumConfiguration();const b=this.probeWidth(this.mainMaxWidthProbe),P=this.kind==="full"&&!this.hasAttribute("data-main-max-configured")?0:b,C=this.openAutoFlyouts().some(S=>S.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),C){const S=this.visiblePageInlineBounds().width,T=this.flyoutOverlayPromotionWidth===null||S>=this.flyoutOverlayPromotionWidth+ve;!o&&t&&this.flyoutOverlayRecoveryReady&&T&&this.workspaceMinimumsCanFit(p,s,u,!0,v)?await this.setPageFlyoutOverlay(!1):o&&await this.setPageFlyoutOverlay(!1);return}if(await this.updateComplete,e!==this.previewSyncGeneration)return;const k=s&&!o&&!r,g=n&&!o;if(p>0&&(!k||u>0)&&(!g||v>0)&&(k||g)&&!this.workspaceMinimumsCanFit(p,k,u,g,v)){g&&await this.promoteFlyoutToOverlay();return}const A=(k?u:0)+(g?v:0),L=k&&this.preferredPreviewWidth!==null||g&&this.preferredFlyoutWidth!==null||(k&&y!==null||g&&w!==null),U=(k?this.preferredPreviewWidth===null?u:this.clampWidth(this.preferredPreviewWidth,u,W):0)+(g?this.preferredFlyoutWidth===null?v:this.clampWidth(this.preferredFlyoutWidth,v,c):0),f=S=>{const T=this.workspaceTargetWidth(S,A,U),B=this.allocateWorkspaceWidths(T,k,g,u,W,v,c,y,w),K=S.maximum+p,Z=Math.max(0,K-S.natural),se=B.previewWidth+B.flyoutWidth,J=Math.max(0,Math.min(Z,K-se));return{allocation:B,mainWidth:J,reclaimsMain:J+l<Z}},D=(S,T)=>Math.abs(S.mainWidth-T.mainWidth)>l||Math.abs(S.allocation.previewWidth-T.allocation.previewWidth)>l||Math.abs(S.allocation.flyoutWidth-T.allocation.flyoutWidth)>l,V=this.workspaceWidthCapacity(p,P,d?h:0),I=f(V);let $=I.allocation;if(this.setWorkspaceWidths($.previewWidth,$.flyoutWidth,L),!k||u<=0){g&&await this.promoteFlyoutIfClipped(e,p,v,c);return}if(m!==null&&h>l){const S=V.maximum+p,T=this.workspaceWidthCapacityForAvailable(S+h,p,P),B=f(T);(d?D(f(this.workspaceWidthCapacityForAvailable(Math.max(0,S-we),p,P)),B):I.reclaimsMain&&D(I,B))?i=await this.setPreviewNavigationCollapse(!0):await this.setPreviewNavigationCollapse(!1)}else await this.setPreviewNavigationCollapse(!1);if(e!==this.previewSyncGeneration)return;const Y=this.workspaceWidthCapacity(p,P);if(Y.maximum+l<A){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,g?v:0),i=!1,g&&await this.promoteFlyoutToOverlay();return}const X=f(Y);if($=X.allocation,this.setWorkspaceWidths($.previewWidth,$.flyoutWidth,L),a||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,X.reclaimsMain),await this.updateComplete,e!==this.previewSyncGeneration)return;const Q=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(p,u,W,g,v,c),()=>this.workspaceCandidateIsMeasurable(!0,g));if(Q===null)return;Q?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,g?v:0),i=!1,g&&await this.promoteFlyoutToOverlay())}finally{e===this.previewSyncGeneration&&!i&&await this.setPreviewNavigationCollapse(!1),e===this.previewSyncGeneration&&(this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.syncTrailingWorkspaceResizeAvailability(),this.requestUpdate())}}runScheduledPreviewLayout(){const e=this.previewSyncGeneration,t=this.previewOverlayRecoveryRequested;this.previewOverlayRecoveryRequested=!1,this.previewSyncTask=this.previewSyncTask.then(()=>this.syncPreviewLayout(e,t)).catch(()=>{})}setupPreviewLayoutObserver(){if(this.isConnected){if(!this.previewMediaQuery&&typeof window.matchMedia=="function"&&(this.previewMediaQuery=window.matchMedia(ue),this.previewMediaQuery.addEventListener("change",this.onPreviewMediaChange)),!this.previewResizeObserver&&typeof ResizeObserver<"u"){this.previewResizeObserver=new ResizeObserver(this.onPreviewResize),this.previewResizeObserver.observe(this);const e=this.shadowRoot?.querySelector(".esp-page-left");e&&this.previewResizeObserver.observe(e);for(const t of[this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe,this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe,this.mainMinWidthProbe,this.mainConfiguredMaxWidthProbe,this.mainMaxWidthProbe,this.resizeStepProbe,this.resizeLargeStepProbe])t.value&&this.previewResizeObserver.observe(t.value)}this.schedulePreviewLayout(!0)}}footerElementProvidesLandmark(e){return e.matches(ae)||e.querySelector(ae)!==null}syncFooterLandmark(){const t=(this.footerSlot.value?.assignedElements({flatten:!0})??[]).some(i=>this.footerElementProvidesLandmark(i));this.footerWrapperIsLandmark=!t}showPreview(){this.previewOpen=!0}closePreview(){this.previewOpen=!1}togglePreview(){this.previewOpen=!this.previewOpen}AddDialog(e){this.dialogZone.value?.appendChild(e)}firstUpdated(e){super.firstUpdated(e),this.syncFlyoutState(),this.setupPreviewLayoutObserver()}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&pe().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"}),(e.has("previewOpen")||e.has("previewCollapseSidebar")||e.has("align"))&&this.schedulePreviewLayout(!0),e.has("workspaceResizable")&&!this.workspaceResizable&&(this.finishWorkspaceKeyboardResize(),this.endWorkspaceResize(),this.clearWorkspaceRecenteringState())}render(){const e=this.fixedMenus||this.headerPosition==="fixed",t=!e&&this.headerPosition==="sticky",i=this.mainPreviewResizeRange(),a=this.previewProbes.minimum,s=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,r=this.mainProbes.minimum,n=this.probeWidth(this.mainMaxWidthProbe),d=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,m=this.hasAttribute("flyout-open"),h=d+this.allocatedPreviewWidth,u=i.min<=a+l,y=m&&u?Math.max(0,this.allocatedFlyoutWidth-s):0,W=Math.max(r,h-i.max),v=Math.max(W,Math.max(r,h-i.min)+y),w=n>0?Math.max(W,Math.min(Math.max(r,n),v)):v,c=n>0&&d+l>=n?`${Math.round(d)}px main, ${Math.round(this.allocatedPreviewWidth)}px preview`:ee;let p,b;if(this.previewVisible){const f=this.previewFlyoutResizeRange(),D=this.allocatedPreviewWidth+this.allocatedFlyoutWidth,I=f.min<=a+l?Math.max(0,d-r):0;p=Math.max(s,D-f.max),b=Math.max(p,Math.min(o,D-f.min+I))}else{const f=this.flyoutOnlyResizeRange();p=f.min,b=f.max}const P=this.previewVisible?"preview-flyout-resize-handle":"main-flyout-resize-handle",C=this.previewVisible?"Resize preview and help panes":"Resize help pane",k=this.previewVisible?`${Math.round(this.allocatedPreviewWidth)}px preview, ${Math.round(this.allocatedFlyoutWidth)}px help`:`${Math.round(this.allocatedFlyoutWidth)}px help`,g=m?"flyout-end":"preview-end",F=g==="flyout-end"?this.allocatedFlyoutWidth:this.allocatedPreviewWidth,A=this.workspaceLogicalGutterWidths(),O=this.trailingPaneResizeRange(g,F,A.leading+A.trailing),E=g==="flyout-end"?"flyout-end-resize-handle":"preview-end-resize-handle",L=g==="flyout-end"?"Resize help pane from its outer edge":"Resize preview pane from its outer edge";return oe`
+      <div part="wrapper" class="esp-page ${le({"fixed-menus":e,"fixed-header":e,"sticky-header":t})}">
         <div part="canvas" class="esp-page-canvas esp-page-canvas--left" aria-hidden="true"></div>
         <div part="canvas" class="esp-page-canvas esp-page-canvas--right" aria-hidden="true"></div>
         <div part="surface" class="esp-page-surface" aria-hidden="true"></div>
@@ -23,7 +23,7 @@ var R=function(A,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
           <div class="sticky-wrapper">
             <slot
               name="flyout"
-              ${x(this.flyoutSlot)}
+              ${z(this.flyoutSlot)}
               @slotchange=${()=>this.syncFlyoutState()}
             ></slot>
           </div>
@@ -31,64 +31,64 @@ var R=function(A,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
         <div
           class="esp-page-preview-width-probe esp-page-preview-min-width-probe"
           aria-hidden="true"
-          ${x(this.previewMinWidthProbe)}
+          ${z(this.previewMinWidthProbe)}
         ></div>
         <div
           class="esp-page-preview-default-width-probe"
           aria-hidden="true"
-          ${x(this.previewDefaultWidthProbe)}
+          ${z(this.previewDefaultWidthProbe)}
         ></div>
         <div
           class="esp-page-preview-max-width-probe"
           aria-hidden="true"
-          ${x(this.previewMaxWidthProbe)}
+          ${z(this.previewMaxWidthProbe)}
         ></div>
         <div
           class="esp-page-flyout-min-width-probe"
           aria-hidden="true"
-          ${x(this.flyoutMinWidthProbe)}
+          ${z(this.flyoutMinWidthProbe)}
         ></div>
         <div
           class="esp-page-flyout-default-width-probe"
           aria-hidden="true"
-          ${x(this.flyoutDefaultWidthProbe)}
+          ${z(this.flyoutDefaultWidthProbe)}
         ></div>
         <div
           class="esp-page-flyout-max-width-probe"
           aria-hidden="true"
-          ${x(this.flyoutMaxWidthProbe)}
+          ${z(this.flyoutMaxWidthProbe)}
         ></div>
         <div
           class="esp-page-preview-main-min-probe esp-page-main-min-width-probe"
           aria-hidden="true"
-          ${x(this.mainMinWidthProbe)}
+          ${z(this.mainMinWidthProbe)}
         ></div>
         <div
           class="esp-page-main-configured-max-width-probe"
           aria-hidden="true"
-          ${x(this.mainConfiguredMaxWidthProbe)}
+          ${z(this.mainConfiguredMaxWidthProbe)}
         ></div>
         <div
           class="esp-page-main-max-width-probe"
           aria-hidden="true"
-          ${x(this.mainMaxWidthProbe)}
+          ${z(this.mainMaxWidthProbe)}
         ></div>
         <div
           class="esp-page-resize-step-probe"
           aria-hidden="true"
-          ${x(this.resizeStepProbe)}
+          ${z(this.resizeStepProbe)}
         ></div>
         <div
           class="esp-page-resize-large-step-probe"
           aria-hidden="true"
-          ${x(this.resizeLargeStepProbe)}
+          ${z(this.resizeLargeStepProbe)}
         ></div>
-        <div class="esp-page-preview-space" ${x(this.previewSpace)}>
+        <div class="esp-page-preview-space" ${z(this.previewSpace)}>
           <aside part="preview" class="esp-page-preview" aria-label=${this.previewLabel}>
             <div part="preview-content" class="sticky-wrapper">
               <slot
                 name="preview"
-                ${x(this.previewSlot)}
+                ${z(this.previewSlot)}
                 @slotchange=${this.schedulePreviewLayout}
               ></slot>
             </div>
@@ -101,44 +101,64 @@ var R=function(A,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
             role="separator"
             aria-orientation="vertical"
             aria-label="Resize main pane"
-            aria-valuemin=${Math.round(n)}
-            aria-valuemax=${Math.round(b)}
-            aria-valuenow=${Math.round(p)}
+            aria-valuemin=${Math.round(W)}
+            aria-valuemax=${Math.round(w)}
+            aria-valuenow=${Math.round(d)}
+            aria-valuetext=${c}
             tabindex="0"
-            @pointerdown=${u=>this.onWorkspaceResizePointerDown("main-preview",u)}
+            @pointerdown=${f=>this.onWorkspaceResizePointerDown("main-preview",f)}
             @pointermove=${this.onWorkspaceResizePointerMove}
             @pointerup=${this.onWorkspaceResizePointerEnd}
             @pointercancel=${this.onWorkspaceResizePointerEnd}
             @lostpointercapture=${this.onWorkspaceResizePointerEnd}
-            @keydown=${u=>this.onWorkspaceResizeKeyDown("main-preview",u)}
+            @keydown=${f=>this.onWorkspaceResizeKeyDown("main-preview",f)}
             @blur=${this.onWorkspaceResizeBlur}
           ></div>
           <div
-            part=${w}
+            part=${P}
             class="esp-page-workspace-resize-handle esp-page-preview-flyout-resize-handle"
             role="separator"
             aria-orientation="vertical"
-            aria-label=${y}
-            aria-valuemin=${Math.round(f)}
-            aria-valuemax=${Math.round(v)}
+            aria-label=${C}
+            aria-valuemin=${Math.round(p)}
+            aria-valuemax=${Math.round(b)}
             aria-valuenow=${Math.round(this.allocatedFlyoutWidth)}
+            aria-valuetext=${k}
+            tabindex="0"
+            @pointerdown=${f=>this.onWorkspaceResizePointerDown("preview-flyout",f)}
+            @pointermove=${this.onWorkspaceResizePointerMove}
+            @pointerup=${this.onWorkspaceResizePointerEnd}
+            @pointercancel=${this.onWorkspaceResizePointerEnd}
+            @lostpointercapture=${this.onWorkspaceResizePointerEnd}
+            @keydown=${f=>this.onWorkspaceResizeKeyDown("preview-flyout",f)}
+            @blur=${this.onWorkspaceResizeBlur}
+          ></div>
+          <div
+            part=${E}
+            class="esp-page-workspace-resize-handle esp-page-workspace-end-resize-handle"
+            role="separator"
+            aria-orientation="vertical"
+            aria-label=${L}
+            aria-valuemin=${Math.round(O.min)}
+            aria-valuemax=${Math.round(O.max)}
+            aria-valuenow=${Math.round(F)}
             tabindex="0"
-            @pointerdown=${u=>this.onWorkspaceResizePointerDown("preview-flyout",u)}
+            @pointerdown=${f=>this.onWorkspaceResizePointerDown(g,f)}
             @pointermove=${this.onWorkspaceResizePointerMove}
             @pointerup=${this.onWorkspaceResizePointerEnd}
             @pointercancel=${this.onWorkspaceResizePointerEnd}
             @lostpointercapture=${this.onWorkspaceResizePointerEnd}
-            @keydown=${u=>this.onWorkspaceResizeKeyDown("preview-flyout",u)}
+            @keydown=${f=>this.onWorkspaceResizeKeyDown(g,f)}
             @blur=${this.onWorkspaceResizeBlur}
           ></div>
         </div>
-        <div class="esp-page-footer" role=${this.footerWrapperIsLandmark?"contentinfo":U}>
-          <slot name="footer" ${x(this.footerSlot)} @slotchange=${this.syncFooterLandmark}></slot>
+        <div class="esp-page-footer" role=${this.footerWrapperIsLandmark?"contentinfo":ee}>
+          <slot name="footer" ${z(this.footerSlot)} @slotchange=${this.syncFooterLandmark}></slot>
         </div>
-        <div id="dialog-drop-zone" ${x(this.dialogZone)}></div>
+        <div id="dialog-drop-zone" ${z(this.dialogZone)}></div>
         <esp-toaster></esp-toaster>
       </div>
-    `}};k.styles=[...N.styles,j`
+    `}};x.styles=[...te.styles,re`
       :host {
         --_esp-page-resolved-max-width: var(
           --esp-page-main-max-width,
@@ -296,11 +316,20 @@ var R=function(A,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
       }
 
       
-      :host([flyout-anchored]) .esp-page > div.esp-page-flyout > .sticky-wrapper {
+      :host([flyout-anchored]:not([flyout-full-height]))
+        .esp-page
+        > div.esp-page-flyout
+        > .sticky-wrapper {
         position: static;
       }
 
       
+      :host([flyout-full-height]) .esp-page > div.esp-page-flyout {
+        grid-row: top-start / footer-end;
+        z-index: calc(var(--esp-page-header-z-index, 20) + 2);
+      }
+
+      
       :host([flyout-anchored][preview-visible]) .esp-page > div.esp-page-flyout {
         z-index: calc(var(--esp-page-header-z-index, 20) + 2);
       }
@@ -403,6 +432,23 @@ var R=function(A,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
         display: block;
       }
 
+      :host([workspace-resizable][data-workspace-trailing-edge-exposed]:not([flyout-overlay-open]))
+        .esp-page
+        > div.esp-page-workspace-resize-handles
+        > .esp-page-workspace-end-resize-handle,
+      :host([workspace-resizable][data-workspace-position-held]:not([flyout-overlay-open]))
+        .esp-page
+        > div.esp-page-workspace-resize-handles
+        > .esp-page-workspace-end-resize-handle {
+        display: block;
+      }
+
+      
+      :host([data-workspace-position-held]) {
+        --_esp-page-gutter-left: var(--_esp-page-resize-leading-gutter-width, 0px);
+        --_esp-page-gutter-right: 1fr;
+      }
+
       :host([data-workspace-resizing]) {
         cursor: col-resize;
         user-select: none;
@@ -609,6 +655,12 @@ var R=function(A,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
           inset-inline-start: var(--_esp-page-preview-used-width);
         }
 
+        > div.esp-page-workspace-resize-handles > .esp-page-workspace-end-resize-handle {
+          inset-inline-start: calc(
+            var(--_esp-page-preview-used-width) + var(--_esp-page-flyout-used-width)
+          );
+        }
+
         
         > .esp-page-preview-min-width-probe,
         > .esp-page-preview-default-width-probe,
@@ -822,4 +874,4 @@ var R=function(A,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
           transition: none;
         }
       }
-    `],R([E()],k.prototype,"footerWrapperIsLandmark",void 0),R([E()],k.prototype,"allocatedPreviewWidth",void 0),R([E()],k.prototype,"allocatedFlyoutWidth",void 0),R([P({reflect:!0})],k.prototype,"kind",void 0),R([P({reflect:!0})],k.prototype,"align",void 0),R([P({type:Boolean,reflect:!0})],k.prototype,"contained",void 0),R([P({attribute:"header-position",reflect:!0})],k.prototype,"headerPosition",void 0),R([P({attribute:"fixed-menus",type:Boolean,reflect:!0})],k.prototype,"fixedMenus",void 0),R([P({attribute:"preview-open",type:Boolean,reflect:!0})],k.prototype,"previewOpen",void 0),R([P({attribute:"preview-label",type:String,reflect:!0})],k.prototype,"previewLabel",void 0),R([P({attribute:"preview-collapse-sidebar",type:Boolean,reflect:!0})],k.prototype,"previewCollapseSidebar",void 0),R([P({attribute:"workspace-resizable",type:Boolean,reflect:!0})],k.prototype,"workspaceResizable",void 0),R([P({attribute:"preview-visible",type:Boolean,reflect:!0})],k.prototype,"previewVisible",void 0),R([P({attribute:"preview-reclaiming",type:Boolean,reflect:!0})],k.prototype,"previewReclaiming",void 0),k=R([Y("esp-page")],k);export{k as EspalierPage};
+    `],M([H()],x.prototype,"footerWrapperIsLandmark",void 0),M([H()],x.prototype,"allocatedPreviewWidth",void 0),M([H()],x.prototype,"allocatedFlyoutWidth",void 0),M([_({reflect:!0})],x.prototype,"kind",void 0),M([_({reflect:!0})],x.prototype,"align",void 0),M([_({type:Boolean,reflect:!0})],x.prototype,"contained",void 0),M([_({attribute:"header-position",reflect:!0})],x.prototype,"headerPosition",void 0),M([_({attribute:"fixed-menus",type:Boolean,reflect:!0})],x.prototype,"fixedMenus",void 0),M([_({attribute:"preview-open",type:Boolean,reflect:!0})],x.prototype,"previewOpen",void 0),M([_({attribute:"preview-label",type:String,reflect:!0})],x.prototype,"previewLabel",void 0),M([_({attribute:"preview-collapse-sidebar",type:Boolean,reflect:!0})],x.prototype,"previewCollapseSidebar",void 0),M([_({attribute:"workspace-resizable",type:Boolean,reflect:!0})],x.prototype,"workspaceResizable",void 0),M([_({attribute:"preview-visible",type:Boolean,reflect:!0})],x.prototype,"previewVisible",void 0),M([_({attribute:"preview-reclaiming",type:Boolean,reflect:!0})],x.prototype,"previewReclaiming",void 0),x=M([ne("esp-page")],x);export{x as EspalierPage};

package/dist/page/workspace-width.js

@@ -0,0 +1 @@
+class r{constructor(t,i){this.min=t,this.max=i}static of(t,i){const e=Math.max(0,t);return new r(e,Math.max(e,i))}static exactly(t){return r.of(t,t)}clamp(t){return Math.min(Math.max(t,this.min),this.max)}headroom(t){return Math.max(0,this.max-t)}cappedAt(t){return r.of(this.min,Math.min(this.max,t))}}function a(m){return m.value?.getBoundingClientRect().width??0}class s{constructor(t,i,e){this.minProbe=t,this.defaultProbe=i,this.maxProbe=e}get minimum(){return Math.max(0,a(this.minProbe))}get maximum(){return Math.max(this.minimum,a(this.maxProbe))}get defaultWidth(){return a(this.defaultProbe)}bounds(){return r.of(this.minimum,this.maximum)}}class n{constructor(t,i){this.left=t,this.right=i}get width(){return Math.max(0,this.right-this.left)}}export{n as InlineBounds,s as PaneProbes,r as WidthRange,a as probeWidth};

package/dist/pickers/esp-pick-one.d.ts

@@ -1,8 +1,8 @@
 import { type PropertyValues } from "lit";
 import "./esp-picker-item.js";
 import "./esp-picker-menu.js";
+import { type PickerItem } from "./esp-picker-item.js";
 import { EspalierPickerBase } from "./esp-picker-base.js";
-import type { TypeaheadFetchItems } from "./types.js";
 /**
  * Component for selecting a single option from a list of
  * options. For selecting multiple options, see
@@ -133,6 +133,13 @@ import type { TypeaheadFetchItems } from "./types.js";
  * @customElement esp-pick-one
  */
 export declare class EspalierPickOne extends EspalierPickerBase {
+    protected decorateFilteredItems(items: PickerItem[]): PickerItem[];
+    protected get typeaheadRestoreText(): string;
+    /**
+     * Single-select keeps the last remote result set only while something is
+     * selected, so reopening shows the same list with the pick highlighted.
+     */
+    protected get preservesRemoteResultsOnReset(): boolean;
     /**
      * The currently selected item value, or `undefined` when no item
      * is selected.
@@ -142,31 +149,6 @@ export declare class EspalierPickOne extends EspalierPickerBase {
      */
     get value(): string | undefined;
     set value(val: string | undefined);
-    /**
-     * When true, the picker input becomes a typeahead search field.
-     * The user types to filter the option list. The match is
-     * constrained — the user must pick from the filtered results.
-     *
-     * @type {boolean}
-     */
-    typeahead: boolean;
-    /**
-     * Async callback for fetching items from a remote source.
-     * When set alongside `typeahead`, the picker delegates to this
-     * callback instead of filtering locally.
-     *
-     * The callback receives the current query string and an
-     * `AbortSignal` that the component will abort when a newer
-     * query arrives before the previous request completes.
-     */
-    fetchItems: TypeaheadFetchItems | null;
-    /**
-     * Debounce delay in milliseconds for typeahead input. Defaults
-     * to `0` for local filtering and `300` for remote fetching.
-     *
-     * @type {number}
-     */
-    debounceMs: number | undefined;
     protected getPickerFormValue(): string | null;
     protected getPickerValidity(): {
         flags: ValidityStateFlags;
@@ -174,10 +156,7 @@ export declare class EspalierPickOne extends EspalierPickerBase {
     } | null;
     protected handlePickerReset(): void;
     protected handlePickerRestore(state: string): void;
-    protected set showOptions(val: boolean);
-    protected get showOptions(): boolean;
-    protected willUpdate(changedProperties: PropertyValues): void;
-    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected syncSelectionFromItems(changedProperties: PropertyValues): void;
     protected render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist/pickers/esp-pick-one.js

@@ -1,75 +1,43 @@
-var h=function(l,e,i,t){var s=arguments.length,a=s<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,i):t,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(l,e,i,t);else for(var u=l.length-1;u>=0;u--)(o=l[u])&&(a=(s<3?o(a):s>3?o(e,i,a):o(e,i))||a);return s>3&&a&&Object.defineProperty(e,i,a),a};import{css as c,html as f}from"lit";import{customElement as m,property as p,state as r}from"lit/decorators.js";import{classMap as y}from"lit/directives/class-map.js";import{ref as d}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{EspalierElementBase as I}from"../shared/esp-element-base.js";import{styleMap as w}from"lit/directives/style-map.js";import{caretUpDown as v}from"../shared/svgs/caret-up-down.js";import{filter as g}from"../shared/svgs/filter.js";import{EspalierPickerBase as b}from"./esp-picker-base.js";import{TypeaheadController as O}from"./typeahead-controller.js";let n=class extends b{constructor(){super(...arguments),this.typeaheadLoading=!1,this.filteredItems=[],this.inputFocused=!1,this.suppressAutoSelect=!1,this.lastMenuPointSelectionAt=Number.NEGATIVE_INFINITY,this.suppressNextHostClick=!1,this.typeaheadCtrl=new O({host:this,onFilteredItemsChanged:e=>{if(this.selectedItem){const i=this.selectedItem.value;this.filteredItems=e.map(t=>({...t,selected:t.value===i}))}else this.filteredItems=e.map(i=>({...i}))},onLoadingChanged:e=>{this.typeaheadLoading=e}}),this._hasPendingValue=!1,this.typeahead=!1,this.fetchItems=null,this.debounceMs=void 0,this.handleHostPointerDown=e=>{this.selectOpenMenuAtPoint(e)&&(this.lastMenuPointSelectionAt=performance.now())},this.handleHostMouseDown=e=>{if(performance.now()-this.lastMenuPointSelectionAt<500){e.preventDefault(),e.stopPropagation();return}this.selectOpenMenuAtPoint(e)}}get value(){return this.selectedItem?.value}set value(e){const i=this.pickerItems??[];for(const a of i)a.selected=a.value===e;const t=this.pickerMenu.value?.pickerItems;if(t&&t!==i)for(const a of t)a.selected=a.value===e;const s=i.find(a=>a.selected);this.selectedItem=s,s?(this._hasPendingValue=!1,this._pendingValue=void 0):(this._hasPendingValue=!0,this._pendingValue=e),this.formCtrl.syncValue()}getPickerFormValue(){return this.selectedItem?.value??null}getPickerValidity(){return this.required&&!this.selectedItem?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select an option."}:null}handlePickerReset(){this.selectedItem=void 0,this._hasPendingValue=!1,this._pendingValue=void 0}handlePickerRestore(e){this.value=e}set showOptions(e){const i=this.showOptions;super.showOptions=e,e&&!i&&this.typeahead&&this.typeaheadCtrl.isRemote&&this.filteredItems.length===0&&this.typeaheadCtrl.fetchInitial()}get showOptions(){return super.showOptions}willUpdate(e){if(super.willUpdate(e),e.has("pickerItems")){if(this._hasPendingValue)this.value=this._pendingValue;else if(!this.selectedItem){const i=this.pickerItems.find(t=>t.selected);i&&(this.selectedItem=i)}}this.typeahead&&((e.has("pickerItems")||e.has("typeahead"))&&this.typeaheadCtrl.setAllItems(this.pickerItems),(e.has("fetchItems")||e.has("typeahead"))&&this.typeaheadCtrl.setFetchItems(this.fetchItems),(e.has("debounceMs")||e.has("typeahead"))&&this.debounceMs!==void 0&&this.typeaheadCtrl.setDebounceMs(this.debounceMs))}firstUpdated(e){if(super.firstUpdated(e),this.typeahead){const i=this.theInput.value;i&&(i.ariaAutoComplete="list")}}resetTypeaheadInput(){const e=this.theInput.value;e&&(e.value=this.selectedItem?.text??""),this.typeaheadCtrl.isRemote&&this.selectedItem?this.typeaheadCtrl.resetQuery():this.typeaheadCtrl.clearQuery()}selectOpenMenuAtPoint(e){return!this.showOptions||!(this.pickerMenu.value?.selectItemAtPoint(e.clientX,e.clientY)??!1)?!1:(this.suppressNextHostClick=!0,e.preventDefault(),e.stopPropagation(),!0)}render(){const{showOptions:e}=this;return f`
+var h=function(a,e,n,t){var i=arguments.length,s=i<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,n):t,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(a,e,n,t);else for(var l=a.length-1;l>=0;l--)(o=a[l])&&(s=(i<3?o(s):i>3?o(e,n,s):o(e,n))||s);return i>3&&s&&Object.defineProperty(e,n,s),s};import{css as d,html as m}from"lit";import{customElement as f,property as I,state as y}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{ref as p}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{EspalierElementBase as k}from"../shared/esp-element-base.js";import{styleMap as P}from"lit/directives/style-map.js";import{caretUpDown as w}from"../shared/svgs/caret-up-down.js";import{filter as v}from"../shared/svgs/filter.js";import{EspalierPickerBase as u}from"./esp-picker-base.js";import{PickOneSelection as r}from"./pick-one-selection.js";let c=class extends u{constructor(){super(...arguments),this.selection=r.empty(),this.suppressAutoSelect=!1,this.lastMenuPointSelectionAt=Number.NEGATIVE_INFINITY,this.suppressNextHostClick=!1,this.handleHostPointerDown=e=>{this.selectOpenMenuAtPoint(e)&&(this.lastMenuPointSelectionAt=performance.now())},this.handleHostMouseDown=e=>{if(performance.now()-this.lastMenuPointSelectionAt<500){e.preventDefault(),e.stopPropagation();return}this.selectOpenMenuAtPoint(e)}}get selectedItem(){return this.selection.item}decorateFilteredItems(e){if(!this.selectedItem)return e.map(t=>({...t}));const n=this.selectedItem.value;return e.map(t=>({...t,selected:t.value===n}))}get typeaheadRestoreText(){return this.selectedItem?.text??""}get preservesRemoteResultsOnReset(){return this.typeaheadIsRemote&&this.selectedItem!==void 0}get value(){return this.selectedItem?.value}set value(e){const n=this.pickerItems??[];for(const i of n)i.selected=i.value===e;const t=this.pickerMenu.value?.pickerItems;if(t&&t!==n)for(const i of t)i.selected=i.value===e;this.selection=r.resolve(n,e),this.formCtrl.syncValue()}getPickerFormValue(){return this.selectedItem?.value??null}getPickerValidity(){return this.required&&!this.selectedItem?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select an option."}:null}handlePickerReset(){this.selection=r.empty()}handlePickerRestore(e){this.value=e}syncSelectionFromItems(e){if(e.has("pickerItems")){if(this.selection.hasPending){this.value=this.selection.pending;return}if(!this.selectedItem){const n=this.pickerItems.find(t=>t.selected);n&&(this.selection=r.of(n))}}}selectOpenMenuAtPoint(e){return!this.showOptions||!(this.pickerMenu.value?.selectItemAtPoint(e.clientX,e.clientY)??!1)?!1:(this.suppressNextHostClick=!0,e.preventDefault(),e.stopPropagation(),!0)}render(){const{showOptions:e}=this;return m`
       <div
         tabindex="-1"
-        class=${y({"esp-field":!0,"show-options":e})}
+        class=${g({"esp-field":!0,"show-options":e})}
         @pointerdown=${this.handleHostPointerDown}
         @mousedown=${this.handleHostMouseDown}
         @click=${t=>{if(this.suppressNextHostClick){this.suppressNextHostClick=!1,t.preventDefault(),t.stopPropagation();return}this.typeahead&&!this.showOptions&&(this.suppressAutoSelect=!0),this.theInput.value?.focus(),this.showOptions=!this.showOptions,t.stopPropagation()}}
       >
         <section>
           <input
-            ${d(this.theInput)}
+            ${p(this.theInput)}
             class="esp-input"
             value=${this.selectedItem?.text??""}
-            style=${w(this.selectedItem?.styles??{})}
+            style=${P(this.selectedItem?.styles??{})}
             placeholder=${this.placeholder}
             ?readonly=${!this.typeahead}
-            @input=${t=>{if(!this.typeahead)return;const s=t.target;this.typeaheadCtrl.setQuery(s.value),this.showOptions||(this.showOptions=!0)}}
+            @input=${this.handleTypeaheadInput}
             @focus=${()=>{this.inputFocused=!0,this.typeahead&&!this.suppressAutoSelect&&this.theInput.value?.select(),this.suppressAutoSelect=!1}}
-            @blur=${t=>{this.inputFocused=!1;const s=t.relatedTarget;if(!(s&&(this.contains(s)||this.shadowRoot?.contains(s)))){if(!s&&this.showOptions){requestAnimationFrame(()=>{this.showOptions&&this.shadowRoot?.activeElement!==this.theInput.value&&(this.showOptions=!1,this.typeahead&&this.resetTypeaheadInput())});return}this.showOptions=!1,this.typeahead&&this.resetTypeaheadInput()}}}
-            @keydown=${t=>{if(this.pickerMenu.value)switch(t.key){case" ":this.typeahead||(this.showOptions=!this.showOptions);break;case"ArrowDown":case"ArrowUp":case"Enter":case"Home":case"End":t.preventDefault(),this.showOptions?(this.pickerMenu.value.doKeyboardNav(t.key),this.updateActiveDescendant()):this.showOptions=!0;break;case"Tab":this.showOptions&&(this.showOptions=!1),this.typeahead&&this.resetTypeaheadInput();break;case"Escape":this.showOptions=!1,this.typeahead&&this.resetTypeaheadInput();break}}}
+            @blur=${this.handleInputBlur}
+            @keydown=${t=>{if(this.pickerMenu.value&&!this.handleSharedPickerKeydown(t))switch(t.key){case"ArrowDown":case"ArrowUp":case"Enter":case"Home":case"End":this.handleMenuNavigationKey(t.key,t);break}}}
           />
         </section>
-        <label>${this.typeahead&&this.inputFocused?g:v}</label>
+        <label>${this.typeahead&&this.inputFocused?v:w}</label>
 
         <esp-picker-menu
-          .pickerItems=${this.typeahead?this.filteredItems:this.pickerItems}
+          .pickerItems=${this.menuItems}
           .loading=${this.typeaheadLoading}
           .emptyMessage=${this.typeahead?"No matches":""}
           .label=${this.placeholder}
           tabindex="-1"
-          ${d(this.pickerMenu)}
-          @selection-changed=${t=>{if(t.stopPropagation(),this.typeahead)return;const s=t.detail;let a=!1;s.length>0&&this.selectedItem!==s[0]&&(this.selectedItem=s[0],a=!0),s.length===0&&this.selectedItem&&(this.selectedItem=void 0,a=!0),a&&(this.showOptions&&(this._hasPendingValue=!1,this._pendingValue=void 0),this.formCtrl.syncValue(),this.dispatchEvent(new CustomEvent("value-changed",{detail:this.selectedItem,bubbles:!0,composed:!0})))}}
-          @close-menu=${t=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const s=t.detail;if(s.length>0&&this.selectedItem?.value!==s[0].value){this.selectedItem=s[0];const a=this.selectedItem.value;for(const o of this.pickerItems)o.selected=o.value===a;this._hasPendingValue=!1,this._pendingValue=void 0,this.formCtrl.syncValue(),this.dispatchEvent(new CustomEvent("value-changed",{detail:this.selectedItem,bubbles:!0,composed:!0}))}else s.length===0&&this.selectedItem&&(this.selectedItem=void 0,this._hasPendingValue=!1,this._pendingValue=void 0,this.formCtrl.syncValue(),this.dispatchEvent(new CustomEvent("value-changed",{detail:this.selectedItem,bubbles:!0,composed:!0})));this.suppressAutoSelect=!0,this.theInput.value?.focus(),this.resetTypeaheadInput()}else this.theInput.value?.focus()}}
+          ${p(this.pickerMenu)}
+          @selection-changed=${t=>{if(t.stopPropagation(),this.typeahead)return;const i=t.detail,s=i.length>0?i[0]:void 0;(i.length>0?this.selectedItem!==s:this.selectedItem!==void 0)&&(this.selection=this.showOptions?r.of(s):this.selection.withProvisionalItem(s),this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem))}}
+          @close-menu=${t=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const i=t.detail,s=i.length>0?i[0]:void 0;if(s?this.selectedItem?.value!==s.value:this.selectedItem!==void 0){if(this.selection=r.of(s),s)for(const l of this.pickerItems)l.selected=l.value===s.value;this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)}this.suppressAutoSelect=!0,this.theInput.value?.focus(),this.resetTypeaheadInput()}else this.theInput.value?.focus()}}
         >
         </esp-picker-menu>
       </div>
-      <slot ${d(this.itemsSlot)}></slot>
-    `}};n.styles=[...I.styles,c`
-      :host([disabled]) {
-        pointer-events: none;
-        opacity: 0.5;
+      <slot ${p(this.itemsSlot)}></slot>
+    `}};c.styles=[...k.styles,u.pickerFieldStyles,d`
+      .esp-field input.esp-input {
+        width: 0;
+        flex-grow: 1;
       }
-
-      .esp-field {
-        display: grid;
-        grid-template-columns: auto min-content;
-        position: relative;
-
-        & input.esp-input {
-          width: 0;
-          flex-grow: 1;
-        }
-
-        > section {
-          cursor: pointer;
-          display: flex;
-          flex-wrap: wrap;
-        }
-
-        > label {
-          display: grid;
-          place-content: center;
-          cursor: pointer;
-
-          > svg {
-            height: var(--esp-size-normal-to-medium);
-            width: var(--esp-size-normal-to-medium);
-          }
-        }
-      }
-
-      :host([typeahead]) .esp-field > section {
-        cursor: text;
-      }
-    `],h([r()],n.prototype,"selectedItem",void 0),h([r()],n.prototype,"typeaheadLoading",void 0),h([r()],n.prototype,"filteredItems",void 0),h([r()],n.prototype,"inputFocused",void 0),h([p({type:String})],n.prototype,"value",null),h([p({type:Boolean,reflect:!0})],n.prototype,"typeahead",void 0),h([p({attribute:!1})],n.prototype,"fetchItems",void 0),h([p({type:Number,attribute:"debounce-ms"})],n.prototype,"debounceMs",void 0),n=h([m("esp-pick-one")],n);export{n as EspalierPickOne};
+    `],h([y()],c.prototype,"selection",void 0),h([I({type:String})],c.prototype,"value",null),c=h([f("esp-pick-one")],c);export{c as EspalierPickOne};