@taprootio/espalier 6.4.0 → 6.6.0

package/dist/details/esp-details.js

@@ -1,4 +1,4 @@
-var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,o):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(i,e,o,s);else for(var l=i.length-1;l>=0;l--)(n=i[l])&&(r=(t<3?n(r):t>3?n(e,o,r):n(e,o))||r);return t>3&&r&&Object.defineProperty(e,o,r),r};import{paintedSurface as h}from"../shared/surface-layer.js";import{css as f,html as b}from"lit";import{customElement as v,property as p}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{ESP_EVENTS as u}from"../shared/events.js";import{disabledControl as g}from"../shared/style-fragments.js";let a=class extends m{constructor(){super(...arguments),this.summary="",this.open=!1,this.disabled=!1,this._toggleFromClick=!1}close(){this.open=!1}getScrollParent(){let e=this.assignedSlot?.parentElement??(this.parentNode instanceof ShadowRoot?this.parentNode.host:this.parentElement);for(;e&&e!==document.documentElement;){const s=getComputedStyle(e).overflowY;if((s==="auto"||s==="scroll")&&e.scrollHeight>e.clientHeight)return e;e=e.assignedSlot?.parentElement??(e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentElement)}return null}handleToggle(e){const o=e.target;if(this.disabled){o.open=this.open;return}if(this._toggleFromClick){this._toggleFromClick=!1;return}this.open=o.open,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}))}handleSummaryClick(e){if(e.preventDefault(),this.disabled)return;const o=e.currentTarget,s=o.getBoundingClientRect().top,t=this.getScrollParent(),r=t?t.scrollTop:window.scrollY;this._toggleFromClick=!0,this.open=!this.open,this.updateComplete.then(()=>{this._toggleFromClick=!1,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}));const l=o.getBoundingClientRect().top-s;if(Math.abs(l)>1)if(t){const c=t.scrollTop;Math.abs(c-r)>1&&(t.scrollTop=r)}else{const c=window.scrollY;Math.abs(c-r)>1&&window.scrollBy(0,l)}})}render(){return b`
+var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,o):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(i,e,o,s);else for(var l=i.length-1;l>=0;l--)(n=i[l])&&(r=(t<3?n(r):t>3?n(e,o,r):n(e,o))||r);return t>3&&r&&Object.defineProperty(e,o,r),r};import{paintedSurface as f}from"../shared/surface-layer.js";import{css as h,html as b}from"lit";import{customElement as v,property as c}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{ESP_EVENTS as u}from"../shared/events.js";import{disabledControl as g}from"../shared/style-fragments.js";let a=class extends m{constructor(){super(...arguments),this.summary="",this.open=!1,this.disabled=!1,this._toggleFromClick=!1}close(){this.open=!1}getScrollParent(){let e=this.assignedSlot?.parentElement??(this.parentNode instanceof ShadowRoot?this.parentNode.host:this.parentElement);for(;e&&e!==document.documentElement;){const s=getComputedStyle(e).overflowY;if((s==="auto"||s==="scroll")&&e.scrollHeight>e.clientHeight)return e;e=e.assignedSlot?.parentElement??(e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentElement)}return null}handleToggle(e){const o=e.target;if(this.disabled){o.open=this.open;return}if(this._toggleFromClick){this._toggleFromClick=!1;return}this.open=o.open,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}))}handleSummaryClick(e){if(e.preventDefault(),this.disabled)return;const o=e.currentTarget,s=o.getBoundingClientRect().top,t=this.getScrollParent(),r=t?t.scrollTop:window.scrollY;this._toggleFromClick=!0,this.open=!this.open,this.updateComplete.then(()=>{this._toggleFromClick=!1,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}));const l=o.getBoundingClientRect().top-s;if(Math.abs(l)>1)if(t){const p=t.scrollTop;Math.abs(p-r)>1&&(t.scrollTop=r)}else{const p=window.scrollY;Math.abs(p-r)>1&&window.scrollBy(0,l)}})}render(){return b`
       <details ?open=${this.open} @toggle=${this.handleToggle}>
         <summary @click=${this.handleSummaryClick}>
           <span class="indicator"></span>
@@ -8,22 +8,23 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
           <slot></slot>
         </div>
       </details>
-    `}};a.styles=[...m.styles,h(1),g(":host([disabled]) summary"),f`
+    `}};a.styles=[...m.styles,f(1),g(":host([disabled]) summary"),h`
       :host {
         display: block;
         
         min-inline-size: 0;
         overflow-anchor: none;
+        
         --_esp-details-resolved-summary-hover-background: var(
           --esp-details-color-summary-hover-background,
-          oklch(from var(--esp-color-layer-1) calc(l * 0.92) c h)
-        );
-      }
-
-      :host([scheme="light"]) {
-        --_esp-details-resolved-summary-hover-background: var(
-          --esp-details-color-summary-hover-background,
-          oklch(from var(--esp-color-layer-1) calc(l + (1 - l) * 0.4) c h)
+          oklch(
+            from var(--esp-color-layer-1)
+              calc(
+                var(--_esp-surface-polarity, 1) * (l + (1 - l) * 0.4) +
+                  (1 - var(--_esp-surface-polarity, 1)) * l * 0.92
+              )
+              c h
+          )
         );
       }
 
@@ -132,4 +133,4 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
       :host([in-group]:last-of-type) details {
         border-bottom: none;
       }
-    `],d([p({type:String})],a.prototype,"summary",void 0),d([p({type:Boolean,reflect:!0})],a.prototype,"open",void 0),d([p({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0),a=d([v("esp-details")],a);export{a as EspalierDetails};
+    `],d([c({type:String})],a.prototype,"summary",void 0),d([c({type:Boolean,reflect:!0})],a.prototype,"open",void 0),d([c({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0),a=d([v("esp-details")],a);export{a as EspalierDetails};

package/dist/page/esp-page.d.ts

@@ -57,7 +57,9 @@ export interface PageWorkspaceResizeDetail {
  * separators on the dotted internal seams and the exposed trailing edge of the
  * last auxiliary pane. Preferred pane sizes remain attached to the mounted
  * page instance and are re-clamped by the same allocator whenever the available
- * inline size changes. Opt into collapsing a directly paired
+ * inline size changes. A chosen size is a floor while main sits at its
+ * configured maximum: the preview, then help, absorb the spare width up to
+ * their maximums before any canvas appears. Opt into collapsing a directly paired
  * header/sidebar navigation to its accessible burger/drawer mode after
  * auxiliary panes contract and before main is reclaimed. The rail returns
  * only when doing so preserves the settled pane allocation.
@@ -187,6 +189,9 @@ export interface PageWorkspaceResizeDetail {
  * `none`.
  * @cssprop --esp-page-canvas-background-image-opacity - The opacity of the
  * canvas gutter image layer. Defaults to `1`.
+ * @cssprop --esp-page-canvas-background-attachment - Whether the canvas
+ * gutter image scrolls with the page (`scroll`) or stays put against the
+ * viewport (`fixed`). Defaults to `scroll`.
  * @cssprop --esp-page-surface-shadow - The box shadow drawn on the left
  * and right edges of the content surface. On by default; casts into the
  * gutters and is clipped away when the surface fills the viewport, so it
@@ -215,7 +220,8 @@ export interface PageWorkspaceResizeDetail {
  * established preview-first flexible allocation remains in effect. A retained
  * pointer or keyboard resize preference supersedes this target.
  * @cssprop --esp-page-preview-max-width - Maximum preview width. Defaults to
- * `48rem`. Preview receives flexible trailing space before help grows.
+ * `48rem`. Preview receives flexible trailing space before help grows, and
+ * absorbs the width beyond a capped main up to this maximum.
  * @cssprop --esp-page-flyout-min-width - Minimum in-grid help width. Defaults
  * to `20rem`.
  * @cssprop --esp-page-flyout-default-width - Initial automatic in-grid help

package/dist/page/esp-page.js

@@ -1,5 +1,5 @@
-var b=function(N,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(N,e,t,i);else for(var a=N.length-1;a>=0;a--)(o=N[a])&&(r=(s<3?o(r):s>3?o(e,t,r):o(e,t))||r);return s>3&&r&&Object.defineProperty(e,t,r),r};import{html as oe,nothing as L}from"lit";import{customElement as ne,property as C,state as q}from"lit/decorators.js";import{classMap as le}from"lit/directives/class-map.js";import{createRef as W,ref as R}from"lit/directives/ref.js";import{EspalierElementBase as he}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as G}from"./bi-directional-sticky-controller.js";import{getEspBus as de}from"../shared/bus-events.js";import{RafThrottle as pe}from"../shared/raf-throttle.js";import{InlineBounds as ue,PaneProbes as Y,PREVIEW_LAYOUT_EPSILON as l,probeWidth as ce,WidthRange as D}from"./workspace-width.js";import{clampWorkspaceWidth as F,workspaceTargetWidth as ve,workspaceWidthCapacityForAvailable as j}from"./workspace-geometry.js";import{slotHasContent as se}from"../shared/slot-content.js";import"../toaster/esp-toaster.js";import{pageStyles as we}from"./esp-page.styles.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as me}from"../shared/responsive.js";const ae='esp-footer, footer, [role~="contentinfo"]',ye=5,fe=12,ge=48,be=48,We=16,Re=64;let m=class extends he{constructor(){super(),this.dialogZone=W(),this.flyoutSlot=W(),this.footerSlot=W(),this.previewSlot=W(),this.sidebarSlot=W(),this.rightSlot=W(),this.previewSpace=W(),this.previewMinWidthProbe=W(),this.previewDefaultWidthProbe=W(),this.previewMaxWidthProbe=W(),this.previewProbes=new Y(this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe),this.flyoutMinWidthProbe=W(),this.flyoutDefaultWidthProbe=W(),this.flyoutMaxWidthProbe=W(),this.flyoutProbes=new Y(this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe),this.mainMinWidthProbe=W(),this.mainConfiguredMaxWidthProbe=W(),this.mainMaxWidthProbe=W(),this.mainProbes=new Y(this.mainMinWidthProbe,this.mainMaxWidthProbe,this.mainMaxWidthProbe),this.resizeStepProbe=W(),this.resizeLargeStepProbe=W(),this.previewObservedWidths=new WeakMap,this.previewSyncFrame=new pe(()=>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.footerWrapperIsLandmark=!0,this.sidebarHasContent=!1,this.rightHasContent=!1,this.allocatedPreviewWidth=0,this.allocatedFlyoutWidth=0,this.onWorkspaceResizePointerDown=(e,t)=>{this.workspaceResizeController?.onWorkspaceResizePointerDown(e,t)},this.onWorkspaceResizePointerMove=e=>{this.workspaceResizeController?.onWorkspaceResizePointerMove(e)},this.onWorkspaceResizePointerEnd=e=>{this.workspaceResizeController?.onWorkspaceResizePointerEnd(e)},this.onWorkspaceResizeBlur=e=>{this.workspaceResizeController?.onWorkspaceResizeBlur(e)},this.onWorkspaceResizeKeyDown=(e,t)=>{this.workspaceResizeController?.onWorkspaceResizeKeyDown(e,t)},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 s=i.contentRect.width;if(i.target instanceof HTMLElement&&i.target.classList.contains("esp-page-left")){s>l&&!this.hasAttribute("data-preview-navigation-collapsed")&&(this.previewCollapsedSidebarWidth=s);continue}const r=this.previewObservedWidths.get(i.target);this.previewObservedWidths.set(i.target,s),t||=r===void 0||Math.abs(r-s)>.25}t&&this.schedulePreviewLayout(!0)},this.onSidebarSlotChange=()=>{this.syncAsideContent(),this.schedulePreviewLayout()},this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.previewOpen=!1,this.sidebarLabel="Sidebar",this.rightLabel="Related",this.previewLabel="Preview",this.previewCollapseSidebar=!1,this.workspaceResizable=!1,this.previewVisible=!1,this.previewReclaiming=!1,this.warnedSiteRails=!1,new G(this,".esp-page-left > .sticky-wrapper"),new G(this,".esp-page-right > .sticky-wrapper"),new G(this,".esp-page-flyout > .sticky-wrapper",{topOffset:()=>this.flyoutFullHeightActive?0:void 0}),new G(this,".esp-page-preview > .sticky-wrapper",{topOffset:()=>0}),this.addEventListener("esp-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)),this.syncAsideContent(),super.connectedCallback(),this.syncMainMaximumConfiguration(),this.ensureWorkspaceResizeController(),this.hasUpdated&&queueMicrotask(()=>this.setupPreviewLayoutObserver())}disconnectedCallback(){this.toggleAttribute("data-workspace-resize-ready",!1),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=a=>{const n=a;return(typeof n.mode=="string"?n.mode:a.getAttribute("mode"))==="overlay"||n.pageOverlayRequested===!0},i=a=>{const n=a.open;return typeof n=="boolean"?n:a.hasAttribute("open")},s=a=>a.anchor!=null,r=a=>{const n=a.fullHeight;return typeof n=="boolean"?n:a.hasAttribute("full-height")},o=(this.flyoutSlot.value?.assignedElements()??[]).filter(a=>a.tagName==="ESP-FLYOUT");for(const a of o){const n=a,p=typeof n.mode=="string"?n.mode:a.getAttribute("mode");n.pageOverlayRequested&&(!i(a)||p!=="auto")&&(n.pageOverlayRequested=!1)}o.some(a=>a.pageOverlayRequested===!0)||this.clearFlyoutOverlayRecovery(),this.toggleAttribute("flyout-open",o.some(a=>i(a)&&!t(a))),this.toggleAttribute("flyout-overlay-open",o.some(a=>i(a)&&t(a))),this.toggleAttribute("flyout-anchored",o.some(a=>i(a)&&s(a))),this.flyoutFullHeightActive=o.some(a=>i(a)&&!t(a)&&r(a)),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,s=typeof i.open=="boolean"?i.open:t.hasAttribute("open"),r=typeof i.mode=="string"?i.mode:t.getAttribute("mode");return s&&(r==="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 r=e&&i.has(s);s.pageOverlayRequested!==r&&(s.pageOverlayRequested=r,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;return e?se(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 s=typeof t.drawerTarget=="string"?t.drawerTarget:t.getAttribute("drawer-target")??"",r=typeof i.mode=="string"?i.mode:i.getAttribute("mode");return s!==i.id||r!=="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,r=this.previewMenu&&this.previewMenu!==t?.menu?this.previewMenu:null;if(s&&(s.previewCollapseRequested=!1),r&&(r.previewCollapseRequested=!1),this.previewHeader=t?.header??null,this.previewMenu=t?.menu??null,this.toggleAttribute("data-preview-navigation-collapsed",!1),await s?.updateComplete,await r?.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)})}createWorkspaceResizeHost(){const e=this;return{element:e,get previewSyncTask(){return e.previewSyncTask},get previewNavigationCollapseTask(){return e.previewNavigationCollapseTask},get previewSyncFrame(){return e.previewSyncFrame},get previewSyncGeneration(){return e.previewSyncGeneration},set previewSyncGeneration(t){e.previewSyncGeneration=t},get previewVisible(){return e.previewVisible},get allocatedPreviewWidth(){return e.allocatedPreviewWidth},get allocatedFlyoutWidth(){return e.allocatedFlyoutWidth},get preferredPreviewWidth(){return e.preferredPreviewWidth},set preferredPreviewWidth(t){e.preferredPreviewWidth=t},get preferredFlyoutWidth(){return e.preferredFlyoutWidth},set preferredFlyoutWidth(t){e.preferredFlyoutWidth=t},get align(){return e.align},get previewProbes(){return e.previewProbes},get flyoutProbes(){return e.flyoutProbes},get mainProbes(){return e.mainProbes},get mainMaxWidthProbe(){return e.mainMaxWidthProbe},schedulePreviewLayout:t=>e.schedulePreviewLayout(t),setWorkspaceWidths:(t,i,s)=>e.setWorkspaceWidths(t,i,s),setPreviewLayoutState:(t,i)=>e.setPreviewLayoutState(t,i)}}createWorkspaceResizeGeometry(){return{separatorIsAvailable:e=>this.separatorIsAvailable(e),mainResizeGrowthCapacity:e=>this.mainResizeGrowthCapacity(e),trailingPaneResizeRange:(e,t,i)=>this.trailingPaneResizeRange(e,t,i),mainPreviewResizeRange:(e,t,i)=>this.mainPreviewResizeRange(e,t,i),workspaceWidthCapacity:(e,t,i)=>this.workspaceWidthCapacity(e,t,i),flyoutOnlyResizeRange:(e,t)=>this.flyoutOnlyResizeRange(e,t),previewFlyoutResizeRange:(e,t)=>this.previewFlyoutResizeRange(e,t),probeWidth:e=>this.probeWidth(e),mainTrackUnbounded:()=>this.mainTrackUnbounded(),renderedWorkspaceWidths:()=>this.renderedWorkspaceWidths(),workspaceLogicalGutterWidths:()=>this.workspaceLogicalGutterWidths(),previewNavigationResizeAllowance:()=>this.previewNavigationResizeAllowance(),workspaceResizeDirection:()=>this.workspaceResizeDirection(),syncTrailingWorkspaceResizeAvailability:()=>this.syncTrailingWorkspaceResizeAvailability()}}ensureWorkspaceResizeController(){if(!this.workspaceResizable||!this.isConnected){this.toggleAttribute("data-workspace-resize-ready",!1);return}if(this.workspaceResizeController){this.toggleAttribute("data-workspace-resize-ready",!0);return}if(this.workspaceResizeControllerLoad)return;this.toggleAttribute("data-workspace-resize-ready",!1);const e=import("./workspace-resize-session.js").then(({WorkspaceResizeSessionController:t})=>{!this.workspaceResizable||!this.isConnected||(this.workspaceResizeController=new t(this.createWorkspaceResizeHost(),this.createWorkspaceResizeGeometry(),{requestPreviewNavigationCollapse:()=>this.requestPreviewNavigationCollapse(),resizeStep:i=>this.resizeStep(i)}),this.toggleAttribute("data-workspace-resize-ready",this.workspaceResizable))}).catch(t=>{this.toggleAttribute("data-workspace-resize-ready",!1),console.warn("<esp-page>: workspace resizing could not be loaded; retry is available",t)}).finally(()=>{this.workspaceResizeControllerLoad===e&&(this.workspaceResizeControllerLoad=void 0)});this.workspaceResizeControllerLoad=e}get resizeSession(){return this.workspaceResizeController?.currentSession??null}finishWorkspaceKeyboardResize(e=!0){this.workspaceResizeController?.finishWorkspaceKeyboardResize(e)}endWorkspaceResize(){this.workspaceResizeController?.endWorkspaceResize()}clearWorkspaceRecenteringState(){this.workspaceResizeController?.clearWorkspaceRecenteringState()}setPreviewLayoutState(e,t){this.previewVisible=e,this.previewReclaiming=e&&t,e||this.endWorkspaceResize()}setWorkspaceWidths(e,t,i=!1){const s=Math.max(0,e),r=Math.max(0,t);this.style.setProperty("--_esp-page-preview-used-width",`${s}px`),this.style.setProperty("--_esp-page-flyout-used-width",`${r}px`),this.toggleAttribute("data-workspace-targeted",i),this.allocatedPreviewWidth=s,this.allocatedFlyoutWidth=r}visiblePageInlineBounds(){const e=this.getBoundingClientRect();let t=e.left,i=e.right;const s=window.visualViewport,r=s?.offsetLeft??0,o=s?.width??document.documentElement.clientWidth;o>0&&(t=Math.max(t,r),i=Math.min(i,r+o));const a=this.getRootNode();let n=this.parentElement??(a instanceof ShadowRoot?a.host:null);for(;n;){const p=getComputedStyle(n).overflowX;if(["auto","clip","hidden","scroll"].includes(p)){const c=n.getBoundingClientRect();t=Math.max(t,c.left),i=Math.min(i,c.right)}const u=n.getRootNode();n=n.parentElement??(u instanceof ShadowRoot?u.host:null)}return new ue(t,i)}probeWidth(e){return ce(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 s=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,r=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,o=Math.max(0,this.visiblePageInlineBounds().width-s-r-Math.max(0,i));return j(o,e,t)}allocateWorkspaceWidths(e,t,i,s,r,o,a,n=null,p=null){const u=Math.max(0,e),c=Math.max(0,s),h=Math.max(c,r),y=Math.max(0,o),P=Math.max(y,a),f=t?this.preferredPreviewWidth??(n===null?null:F(n,c,h)):null,z=i?this.preferredFlyoutWidth??(p===null?null:F(p,y,P)):null;let g=0,d=0;t&&i?(g=Math.min(h,Math.max(c,u-y)),d=Math.min(P,Math.max(y,u-g))):t?g=Math.min(h,Math.max(c,u)):i&&(d=Math.min(P,Math.max(y,u))),t&&f!==null&&(g=F(f,c,h),i&&z===null&&(d=F(u-g,y,P))),i&&z!==null&&(d=F(z,y,P),t&&f===null&&(g=F(u-d,c,h)));let M=g+d-u;if(M>0&&i){const x=Math.min(M,Math.max(0,d-y));d-=x,M-=x}return M>0&&t&&(g-=Math.min(M,Math.max(0,g-c))),{previewWidth:g,flyoutWidth:d}}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(),s=t.getBoundingClientRect(),r=this.workspaceResizeDirection()===1?i.right-s.right:s.left-i.left;return{leading:e,trailing:Math.max(0,r)}}syncTrailingWorkspaceResizeAvailability(){const{trailing:e}=this.workspaceLogicalGutterWidths();this.toggleAttribute("data-workspace-trailing-edge-exposed",this.trailingWorkspaceSeparator()!==null&&e>l)}trailingPaneResizeRange(e,t,i){const s=e==="preview-end"?this.previewMinWidthProbe:this.flyoutMinWidthProbe,r=e==="preview-end"?this.previewMaxWidthProbe:this.flyoutMaxWidthProbe,o=Math.max(0,this.probeWidth(s)),a=Math.max(o,this.probeWidth(r));return D.of(o,a).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?Re:We}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 s=this.previewProbes.minimum,r=this.previewProbes.maximum,o=this.mainProbes.minimum,a=Math.max(0,t+e),n=Math.max(0,a+i-o);return D.of(s,Math.max(s,Math.min(r,n)))}previewFlyoutResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.renderedWorkspaceWidths().flyoutWidth){const i=this.previewProbes.minimum,s=this.previewProbes.maximum,r=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,a=e+t;return D.of(Math.max(i,a-o),Math.max(i,Math.min(s,a-r)))}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,s=this.flyoutProbes.maximum,r=this.mainProbes.minimum,o=this.probeWidth(this.mainMaxWidthProbe),a=Math.max(0,t+e),n=o>0?Math.max(0,a-o):0,p=Math.max(i,n);return D.of(p,Math.min(s,a-r))}mainTrackUnbounded(){return this.kind==="site"||this.kind==="full"&&!this.hasAttribute("data-main-max-configured")}mainResizeGrowthCapacity(e){return this.mainTrackUnbounded()?Number.POSITIVE_INFINITY:Math.max(0,this.probeWidth(this.mainMaxWidthProbe)-e)}previewFitsWithinPage(e,t,i,s,r,o){const a=this.shadowRoot?.querySelector(".esp-page-main"),n=this.shadowRoot?.querySelector(".esp-page-preview"),p=this.shadowRoot?.querySelector(".esp-page-flyout");if(!a||!n||!p)return!1;const u=this.visiblePageInlineBounds(),c=a.getBoundingClientRect(),h=n.getBoundingClientRect(),y=p.getBoundingClientRect(),P=Math.max(t,i),f=Math.max(r,o),z=h.width+l>=t&&h.width<=P+l,g=!s||y.width+l>=r&&y.width<=f+l,d=h.left+l>=u.left&&h.right<=u.right+l&&(!s||y.left+l>=u.left&&y.right<=u.right+l),M=getComputedStyle(this).direction==="rtl"?c.left+l>=h.right&&(!s||h.left+l>=y.right):c.right<=h.left+l&&(!s||h.right<=y.left+l);return c.width+l>=e&&z&&g&&d&&M}flyoutFitsWithinPage(e,t,i){const s=this.shadowRoot?.querySelector(".esp-page-main"),r=this.shadowRoot?.querySelector(".esp-page-flyout");if(!s||!r)return!1;const o=this.visiblePageInlineBounds(),a=s.getBoundingClientRect(),n=r.getBoundingClientRect(),p=Math.max(t,i),u=n.width+l>=t&&n.width<=p+l,c=n.left+l>=o.left&&n.right<=o.right+l,h=getComputedStyle(this).direction==="rtl"?a.left+l>=n.right:a.right<=n.left+l;return a.width+l>=e&&u&&c&&h}workspaceMinimumsCanFit(e,t,i,s,r){const o=this.visiblePageInlineBounds().width;if(o<=0||e<=0||t&&i<=0||s&&r<=0)return!1;const a=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,n=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,u=(t&&this.getPreviewNavigationPair()!==null?0:a)+n+e+(t?i:0)+(s?r:0);return o+l>=u}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))<=l)}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>l)&&(!t||s>l)}async candidateFitsAfterLayoutSettles(e,t,i){if(await this.updateComplete,e!==this.previewSyncGeneration||!this.isConnected)return null;let s=null,r=0;for(let o=0;o<fe;o+=1){if(await new Promise(n=>requestAnimationFrame(()=>n())),e!==this.previewSyncGeneration||!this.isConnected)return null;if(t())return!0;if(!i()){s=null,r=0;continue}const a=this.workspaceGeometrySample();if(r=s&&this.workspaceGeometryMatches(s,a)?r+1:1,r>=ye)return!1;s=a}return null}async promoteFlyoutIfClipped(e,t,i,s){if(i<=0)return!1;const r=await this.candidateFitsAfterLayoutSettles(e,()=>this.flyoutFitsWithinPage(t,i,s),()=>this.workspaceCandidateIsMeasurable(!1,!0));return r===null?!0:r?!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 s=this.previewVisible;this.toggleAttribute("data-preview-measuring",!0);try{const r=this.previewOpen&&this.previewHasContent(),o=this.previewMediaQuery?.matches??!1,a=this.hasAttribute("flyout-overlay-open"),n=this.hasAttribute("flyout-open"),p=this.hasAttribute("data-preview-navigation-collapsed"),u=this.getPreviewNavigationPair(),c=u===null?0:p?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,h=this.probeWidth(this.previewMinWidthProbe),y=this.optionalWidth("--esp-page-preview-default-width",this.previewDefaultWidthProbe),P=this.probeWidth(this.previewMaxWidthProbe),f=this.probeWidth(this.flyoutMinWidthProbe),z=this.optionalWidth("--esp-page-flyout-default-width",this.flyoutDefaultWidthProbe),g=this.probeWidth(this.flyoutMaxWidthProbe),d=this.probeWidth(this.mainMinWidthProbe);this.syncMainMaximumConfiguration();const M=this.probeWidth(this.mainMaxWidthProbe),x=this.mainTrackUnbounded()?0:M,H=this.openAutoFlyouts().some(k=>k.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),H){const k=this.visiblePageInlineBounds().width,A=this.flyoutOverlayPromotionWidth===null||k>=this.flyoutOverlayPromotionWidth+ge;!o&&t&&this.flyoutOverlayRecoveryReady&&A&&this.workspaceMinimumsCanFit(d,r,h,!0,f)?await this.setPageFlyoutOverlay(!1):o&&await this.setPageFlyoutOverlay(!1);return}if(await this.updateComplete,e!==this.previewSyncGeneration)return;const S=r&&!o&&!a,v=n&&!o;if(d>0&&(!S||h>0)&&(!v||f>0)&&(S||v)&&!this.workspaceMinimumsCanFit(d,S,h,v,f)){v&&await this.promoteFlyoutToOverlay();return}const E=(S?h:0)+(v?f:0),I=S&&this.preferredPreviewWidth!==null||v&&this.preferredFlyoutWidth!==null||(S&&y!==null||v&&z!==null),Z=(S?this.preferredPreviewWidth===null?h:F(this.preferredPreviewWidth,h,P):0)+(v?this.preferredFlyoutWidth===null?f:F(this.preferredFlyoutWidth,f,g):0),w=k=>{const A=ve(k,E,Z),O=this.allocateWorkspaceWidths(A,S,v,h,P,f,g,y,z),K=k.maximum+d,te=Math.max(0,K-k.natural),re=O.previewWidth+O.flyoutWidth,ie=Math.max(0,Math.min(te,K-re));return{allocation:O,mainWidth:ie,reclaimsMain:ie+l<te}},$=(k,A)=>Math.abs(k.mainWidth-A.mainWidth)>l||Math.abs(k.allocation.previewWidth-A.allocation.previewWidth)>l||Math.abs(k.allocation.flyoutWidth-A.allocation.flyoutWidth)>l,U=this.workspaceWidthCapacity(d,x,p?c:0),B=w(U);let T=B.allocation;if(this.setWorkspaceWidths(T.previewWidth,T.flyoutWidth,I),!S||h<=0){v&&await this.promoteFlyoutIfClipped(e,d,f,g);return}if(u!==null&&c>l){const k=U.maximum+d,A=j(k+c,d,x),O=w(A);(p?$(w(j(Math.max(0,k-be),d,x)),O):B.reclaimsMain&&$(B,O))?i=await this.setPreviewNavigationCollapse(!0):await this.setPreviewNavigationCollapse(!1)}else await this.setPreviewNavigationCollapse(!1);if(e!==this.previewSyncGeneration)return;const X=this.workspaceWidthCapacity(d,x);if(X.maximum+l<E){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,v?f:0),i=!1,v&&await this.promoteFlyoutToOverlay();return}const J=w(X);if(T=J.allocation,this.setWorkspaceWidths(T.previewWidth,T.flyoutWidth,I),s||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,J.reclaimsMain),await this.updateComplete,e!==this.previewSyncGeneration)return;const ee=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(d,h,P,v,f,g),()=>this.workspaceCandidateIsMeasurable(!0,v));if(ee===null)return;ee?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,v?f:0),i=!1,v&&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(me),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}syncAsideContent(){const e=(t,i)=>t?se(t):Array.from(this.children).some(s=>s.getAttribute("slot")===i);this.sidebarHasContent=e(this.sidebarSlot.value,"sidebar"),this.rightHasContent=e(this.rightSlot.value,"right")}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()}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.workspaceResizeControllerLoad,this.isUpdatePending?super.getUpdateComplete():e}updated(e){super.updated(e),e.has("headerPosition")&&de().publish("fixed-menus-changed",{fixed:this.headerPosition==="fixed"}),(e.has("previewOpen")||e.has("previewCollapseSidebar")||e.has("align"))&&this.schedulePreviewLayout(!0),e.has("workspaceResizable")&&(this.workspaceResizable?this.ensureWorkspaceResizeController():(this.toggleAttribute("data-workspace-resize-ready",!1),this.finishWorkspaceKeyboardResize(),this.endWorkspaceResize(),this.clearWorkspaceRecenteringState())),this.warnSiteRailSlots()}warnSiteRailSlots(){this.kind!=="site"||this.warnedSiteRails||!["sidebar","right"].some(t=>(this.shadowRoot?.querySelector(`slot[name="${t}"]`)?.assignedElements({flatten:!0}).length??0)>0)||(this.warnedSiteRails=!0,console.warn('Espalier page: kind="site" does not compose with the sidebar/right rails \u2014 sections span the full viewport and the shared well column ignores rail width. Use kind="wide" for railed layouts, or remove the rail slots from a site page.'))}render(){const e=this.headerPosition==="fixed",t=!e&&this.headerPosition==="sticky",i=this.mainPreviewResizeRange(this.renderedWorkspaceWidths().previewWidth,this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,this.previewNavigationResizeAllowance()),s=this.previewProbes.minimum,r=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,a=this.mainProbes.minimum,n=this.probeWidth(this.mainMaxWidthProbe),p=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,u=this.hasAttribute("flyout-open"),c=p+this.allocatedPreviewWidth,h=i.min<=s+l,y=u&&h?Math.max(0,this.allocatedFlyoutWidth-r):0,P=Math.max(a,c-i.max),f=Math.max(P,Math.max(a,c-i.min)+y),z=n>0?Math.max(P,Math.min(Math.max(a,n),f)):f,g=n>0&&p+l>=n?`${Math.round(p)}px main, ${Math.round(this.allocatedPreviewWidth)}px preview`:L;let d,M;if(this.previewVisible){const w=this.previewFlyoutResizeRange(this.renderedWorkspaceWidths().previewWidth,this.renderedWorkspaceWidths().flyoutWidth),$=this.allocatedPreviewWidth+this.allocatedFlyoutWidth,B=w.min<=s+l?Math.max(0,p-a):0;d=Math.max(r,$-w.max),M=Math.max(d,Math.min(o,$-w.min+B))}else{const w=this.flyoutOnlyResizeRange(this.renderedWorkspaceWidths().flyoutWidth,p);d=w.min,M=w.max}const x=this.previewVisible?"preview-flyout-resize-handle":"main-flyout-resize-handle",H=this.previewVisible?"Resize preview and help panes":"Resize help pane",S=this.previewVisible?`${Math.round(this.allocatedPreviewWidth)}px preview, ${Math.round(this.allocatedFlyoutWidth)}px help`:`${Math.round(this.allocatedFlyoutWidth)}px help`,v=u?"flyout-end":"preview-end",_=v==="flyout-end"?this.allocatedFlyoutWidth:this.allocatedPreviewWidth,E=this.workspaceLogicalGutterWidths(),V=this.trailingPaneResizeRange(v,_,E.leading+E.trailing),Q=v==="flyout-end"?"flyout-end-resize-handle":"preview-end-resize-handle",I=v==="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})}">
+var W=function(N,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(N,e,t,i);else for(var a=N.length-1;a>=0;a--)(o=N[a])&&(r=(s<3?o(r):s>3?o(e,t,r):o(e,t))||r);return s>3&&r&&Object.defineProperty(e,t,r),r};import{html as le,nothing as E}from"lit";import{customElement as he,property as z,state as q}from"lit/decorators.js";import{classMap as de}from"lit/directives/class-map.js";import{createRef as R,ref as P}from"lit/directives/ref.js";import{EspalierElementBase as pe}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as H}from"./bi-directional-sticky-controller.js";import{getEspBus as ue}from"../shared/bus-events.js";import{RafThrottle as ce}from"../shared/raf-throttle.js";import{InlineBounds as ve,PaneProbes as j,PREVIEW_LAYOUT_EPSILON as l,probeWidth as we,WidthRange as _}from"./workspace-width.js";import{absorbWorkspaceSurplus as me,clampWorkspaceWidth as O,workspaceTargetWidth as fe,workspaceWidthCapacityForAvailable as Q}from"./workspace-geometry.js";import{slotHasContent as re}from"../shared/slot-content.js";import"../toaster/esp-toaster.js";import{pageStyles as ye}from"./esp-page.styles.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as ge}from"../shared/responsive.js";const oe='esp-footer, footer, [role~="contentinfo"]',be=5,We=12,Re=48,Pe=48,ke=16,Me=64;let y=class extends pe{constructor(){super(),this.dialogZone=R(),this.flyoutSlot=R(),this.footerSlot=R(),this.previewSlot=R(),this.sidebarSlot=R(),this.rightSlot=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 ce(()=>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.footerWrapperIsLandmark=!0,this.sidebarHasContent=!1,this.rightHasContent=!1,this.allocatedPreviewWidth=0,this.allocatedFlyoutWidth=0,this.onWorkspaceResizePointerDown=(e,t)=>{this.workspaceResizeController?.onWorkspaceResizePointerDown(e,t)},this.onWorkspaceResizePointerMove=e=>{this.workspaceResizeController?.onWorkspaceResizePointerMove(e)},this.onWorkspaceResizePointerEnd=e=>{this.workspaceResizeController?.onWorkspaceResizePointerEnd(e)},this.onWorkspaceResizeBlur=e=>{this.workspaceResizeController?.onWorkspaceResizeBlur(e)},this.onWorkspaceResizeKeyDown=(e,t)=>{this.workspaceResizeController?.onWorkspaceResizeKeyDown(e,t)},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 s=i.contentRect.width;if(i.target instanceof HTMLElement&&i.target.classList.contains("esp-page-left")){s>l&&!this.hasAttribute("data-preview-navigation-collapsed")&&(this.previewCollapsedSidebarWidth=s);continue}const r=this.previewObservedWidths.get(i.target);this.previewObservedWidths.set(i.target,s),t||=r===void 0||Math.abs(r-s)>.25}t&&this.schedulePreviewLayout(!0)},this.onSidebarSlotChange=()=>{this.syncAsideContent(),this.schedulePreviewLayout()},this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.previewOpen=!1,this.sidebarLabel="Sidebar",this.rightLabel="Related",this.previewLabel="Preview",this.previewCollapseSidebar=!1,this.workspaceResizable=!1,this.previewVisible=!1,this.previewReclaiming=!1,this.warnedSiteRails=!1,new H(this,".esp-page-left > .sticky-wrapper"),new H(this,".esp-page-right > .sticky-wrapper"),new H(this,".esp-page-flyout > .sticky-wrapper",{topOffset:()=>this.flyoutFullHeightActive?0:void 0}),new H(this,".esp-page-preview > .sticky-wrapper",{topOffset:()=>0}),this.addEventListener("esp-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)),this.syncAsideContent(),super.connectedCallback(),this.syncMainMaximumConfiguration(),this.ensureWorkspaceResizeController(),this.hasUpdated&&queueMicrotask(()=>this.setupPreviewLayoutObserver())}disconnectedCallback(){this.toggleAttribute("data-workspace-resize-ready",!1),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=a=>{const n=a;return(typeof n.mode=="string"?n.mode:a.getAttribute("mode"))==="overlay"||n.pageOverlayRequested===!0},i=a=>{const n=a.open;return typeof n=="boolean"?n:a.hasAttribute("open")},s=a=>a.anchor!=null,r=a=>{const n=a.fullHeight;return typeof n=="boolean"?n:a.hasAttribute("full-height")},o=(this.flyoutSlot.value?.assignedElements()??[]).filter(a=>a.tagName==="ESP-FLYOUT");for(const a of o){const n=a,p=typeof n.mode=="string"?n.mode:a.getAttribute("mode");n.pageOverlayRequested&&(!i(a)||p!=="auto")&&(n.pageOverlayRequested=!1)}o.some(a=>a.pageOverlayRequested===!0)||this.clearFlyoutOverlayRecovery(),this.toggleAttribute("flyout-open",o.some(a=>i(a)&&!t(a))),this.toggleAttribute("flyout-overlay-open",o.some(a=>i(a)&&t(a))),this.toggleAttribute("flyout-anchored",o.some(a=>i(a)&&s(a))),this.flyoutFullHeightActive=o.some(a=>i(a)&&!t(a)&&r(a)),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,s=typeof i.open=="boolean"?i.open:t.hasAttribute("open"),r=typeof i.mode=="string"?i.mode:t.getAttribute("mode");return s&&(r==="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 r=e&&i.has(s);s.pageOverlayRequested!==r&&(s.pageOverlayRequested=r,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;return e?re(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 s=typeof t.drawerTarget=="string"?t.drawerTarget:t.getAttribute("drawer-target")??"",r=typeof i.mode=="string"?i.mode:i.getAttribute("mode");return s!==i.id||r!=="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,r=this.previewMenu&&this.previewMenu!==t?.menu?this.previewMenu:null;if(s&&(s.previewCollapseRequested=!1),r&&(r.previewCollapseRequested=!1),this.previewHeader=t?.header??null,this.previewMenu=t?.menu??null,this.toggleAttribute("data-preview-navigation-collapsed",!1),await s?.updateComplete,await r?.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)})}createWorkspaceResizeHost(){const e=this;return{element:e,get previewSyncTask(){return e.previewSyncTask},get previewNavigationCollapseTask(){return e.previewNavigationCollapseTask},get previewSyncFrame(){return e.previewSyncFrame},get previewSyncGeneration(){return e.previewSyncGeneration},set previewSyncGeneration(t){e.previewSyncGeneration=t},get previewVisible(){return e.previewVisible},get allocatedPreviewWidth(){return e.allocatedPreviewWidth},get allocatedFlyoutWidth(){return e.allocatedFlyoutWidth},get preferredPreviewWidth(){return e.preferredPreviewWidth},set preferredPreviewWidth(t){e.preferredPreviewWidth=t},get preferredFlyoutWidth(){return e.preferredFlyoutWidth},set preferredFlyoutWidth(t){e.preferredFlyoutWidth=t},get align(){return e.align},get previewProbes(){return e.previewProbes},get flyoutProbes(){return e.flyoutProbes},get mainProbes(){return e.mainProbes},get mainMaxWidthProbe(){return e.mainMaxWidthProbe},schedulePreviewLayout:t=>e.schedulePreviewLayout(t),setWorkspaceWidths:(t,i,s)=>e.setWorkspaceWidths(t,i,s),setPreviewLayoutState:(t,i)=>e.setPreviewLayoutState(t,i)}}createWorkspaceResizeGeometry(){return{separatorIsAvailable:e=>this.separatorIsAvailable(e),mainResizeGrowthCapacity:e=>this.mainResizeGrowthCapacity(e),trailingPaneResizeRange:(e,t,i)=>this.trailingPaneResizeRange(e,t,i),mainPreviewResizeRange:(e,t,i)=>this.mainPreviewResizeRange(e,t,i),workspaceWidthCapacity:(e,t,i)=>this.workspaceWidthCapacity(e,t,i),flyoutOnlyResizeRange:(e,t)=>this.flyoutOnlyResizeRange(e,t),previewFlyoutResizeRange:(e,t)=>this.previewFlyoutResizeRange(e,t),probeWidth:e=>this.probeWidth(e),mainTrackUnbounded:()=>this.mainTrackUnbounded(),renderedWorkspaceWidths:()=>this.renderedWorkspaceWidths(),workspaceLogicalGutterWidths:()=>this.workspaceLogicalGutterWidths(),previewNavigationResizeAllowance:()=>this.previewNavigationResizeAllowance(),workspaceResizeDirection:()=>this.workspaceResizeDirection(),syncTrailingWorkspaceResizeAvailability:()=>this.syncTrailingWorkspaceResizeAvailability()}}ensureWorkspaceResizeController(){if(!this.workspaceResizable||!this.isConnected){this.toggleAttribute("data-workspace-resize-ready",!1);return}if(this.workspaceResizeController){this.toggleAttribute("data-workspace-resize-ready",!0);return}if(this.workspaceResizeControllerLoad)return;this.toggleAttribute("data-workspace-resize-ready",!1);const e=import("./workspace-resize-session.js").then(({WorkspaceResizeSessionController:t})=>{!this.workspaceResizable||!this.isConnected||(this.workspaceResizeController=new t(this.createWorkspaceResizeHost(),this.createWorkspaceResizeGeometry(),{requestPreviewNavigationCollapse:()=>this.requestPreviewNavigationCollapse(),resizeStep:i=>this.resizeStep(i)}),this.toggleAttribute("data-workspace-resize-ready",this.workspaceResizable))}).catch(t=>{this.toggleAttribute("data-workspace-resize-ready",!1),console.warn("<esp-page>: workspace resizing could not be loaded; retry is available",t)}).finally(()=>{this.workspaceResizeControllerLoad===e&&(this.workspaceResizeControllerLoad=void 0)});this.workspaceResizeControllerLoad=e}get resizeSession(){return this.workspaceResizeController?.currentSession??null}finishWorkspaceKeyboardResize(e=!0){this.workspaceResizeController?.finishWorkspaceKeyboardResize(e)}endWorkspaceResize(){this.workspaceResizeController?.endWorkspaceResize()}clearWorkspaceRecenteringState(){this.workspaceResizeController?.clearWorkspaceRecenteringState()}setPreviewLayoutState(e,t){this.previewVisible=e,this.previewReclaiming=e&&t,e||this.endWorkspaceResize()}setWorkspaceWidths(e,t,i=!1){const s=Math.max(0,e),r=Math.max(0,t);this.style.setProperty("--_esp-page-preview-used-width",`${s}px`),this.style.setProperty("--_esp-page-flyout-used-width",`${r}px`),this.toggleAttribute("data-workspace-targeted",i),this.allocatedPreviewWidth=s,this.allocatedFlyoutWidth=r}visiblePageInlineBounds(){const e=this.getBoundingClientRect();let t=e.left,i=e.right;const s=window.visualViewport,r=s?.offsetLeft??0,o=s?.width??document.documentElement.clientWidth;o>0&&(t=Math.max(t,r),i=Math.min(i,r+o));const a=this.getRootNode();let n=this.parentElement??(a instanceof ShadowRoot?a.host:null);for(;n;){const p=getComputedStyle(n).overflowX;if(["auto","clip","hidden","scroll"].includes(p)){const v=n.getBoundingClientRect();t=Math.max(t,v.left),i=Math.min(i,v.right)}const u=n.getRootNode();n=n.parentElement??(u instanceof ShadowRoot?u.host:null)}return new ve(t,i)}probeWidth(e){return we(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 s=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,r=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,o=Math.max(0,this.visiblePageInlineBounds().width-s-r-Math.max(0,i));return Q(o,e,t)}allocateWorkspaceWidths(e,t,i,s,r,o,a,n=null,p=null){const u=Math.max(0,e),v=Math.max(0,s),h=Math.max(v,r),w=Math.max(0,o),k=Math.max(w,a),m=t?this.preferredPreviewWidth??(n===null?null:O(n,v,h)):null,x=i?this.preferredFlyoutWidth??(p===null?null:O(p,w,k)):null;let g=0,d=0;t&&i?(g=Math.min(h,Math.max(v,u-w)),d=Math.min(k,Math.max(w,u-g))):t?g=Math.min(h,Math.max(v,u)):i&&(d=Math.min(k,Math.max(w,u))),t&&m!==null&&(g=O(m,v,h),i&&x===null&&(d=O(u-g,w,k))),i&&x!==null&&(d=O(x,w,k),t&&m===null&&(g=O(u-d,v,h)));let M=g+d-u;if(M>0&&i){const F=Math.min(M,Math.max(0,d-w));d-=F,M-=F}return M>0&&t&&(g-=Math.min(M,Math.max(0,g-v))),{previewWidth:g,flyoutWidth:d}}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(),s=t.getBoundingClientRect(),r=this.workspaceResizeDirection()===1?i.right-s.right:s.left-i.left;return{leading:e,trailing:Math.max(0,r)}}syncTrailingWorkspaceResizeAvailability(){const{trailing:e}=this.workspaceLogicalGutterWidths();this.toggleAttribute("data-workspace-trailing-edge-exposed",this.trailingWorkspaceSeparator()!==null&&e>l)}trailingPaneResizeRange(e,t,i){const s=e==="preview-end"?this.previewMinWidthProbe:this.flyoutMinWidthProbe,r=e==="preview-end"?this.previewMaxWidthProbe:this.flyoutMaxWidthProbe,o=Math.max(0,this.probeWidth(s)),a=Math.max(o,this.probeWidth(r));return _.of(o,a).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?Me:ke}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 s=this.previewProbes.minimum,r=this.previewProbes.maximum,o=this.mainProbes.minimum,a=Math.max(0,t+e),n=Math.max(0,a+i-o);return _.of(s,Math.max(s,Math.min(r,n)))}previewFlyoutResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.renderedWorkspaceWidths().flyoutWidth){const i=this.previewProbes.minimum,s=this.previewProbes.maximum,r=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,a=e+t;return _.of(Math.max(i,a-o),Math.max(i,Math.min(s,a-r)))}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,s=this.flyoutProbes.maximum,r=this.mainProbes.minimum,o=this.probeWidth(this.mainMaxWidthProbe),a=Math.max(0,t+e),n=o>0?Math.max(0,a-o):0,p=Math.max(i,n);return _.of(p,Math.min(s,a-r))}mainTrackUnbounded(){return this.kind==="site"||this.kind==="full"&&!this.hasAttribute("data-main-max-configured")}mainResizeGrowthCapacity(e){return this.mainTrackUnbounded()?Number.POSITIVE_INFINITY:Math.max(0,this.probeWidth(this.mainMaxWidthProbe)-e)}previewFitsWithinPage(e,t,i,s,r,o){const a=this.shadowRoot?.querySelector(".esp-page-main"),n=this.shadowRoot?.querySelector(".esp-page-preview"),p=this.shadowRoot?.querySelector(".esp-page-flyout");if(!a||!n||!p)return!1;const u=this.visiblePageInlineBounds(),v=a.getBoundingClientRect(),h=n.getBoundingClientRect(),w=p.getBoundingClientRect(),k=Math.max(t,i),m=Math.max(r,o),x=h.width+l>=t&&h.width<=k+l,g=!s||w.width+l>=r&&w.width<=m+l,d=h.left+l>=u.left&&h.right<=u.right+l&&(!s||w.left+l>=u.left&&w.right<=u.right+l),M=getComputedStyle(this).direction==="rtl"?v.left+l>=h.right&&(!s||h.left+l>=w.right):v.right<=h.left+l&&(!s||h.right<=w.left+l);return v.width+l>=e&&x&&g&&d&&M}flyoutFitsWithinPage(e,t,i){const s=this.shadowRoot?.querySelector(".esp-page-main"),r=this.shadowRoot?.querySelector(".esp-page-flyout");if(!s||!r)return!1;const o=this.visiblePageInlineBounds(),a=s.getBoundingClientRect(),n=r.getBoundingClientRect(),p=Math.max(t,i),u=n.width+l>=t&&n.width<=p+l,v=n.left+l>=o.left&&n.right<=o.right+l,h=getComputedStyle(this).direction==="rtl"?a.left+l>=n.right:a.right<=n.left+l;return a.width+l>=e&&u&&v&&h}workspaceMinimumsCanFit(e,t,i,s,r){const o=this.visiblePageInlineBounds().width;if(o<=0||e<=0||t&&i<=0||s&&r<=0)return!1;const a=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,n=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,u=(t&&this.getPreviewNavigationPair()!==null?0:a)+n+e+(t?i:0)+(s?r:0);return o+l>=u}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))<=l)}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>l)&&(!t||s>l)}async candidateFitsAfterLayoutSettles(e,t,i){if(await this.updateComplete,e!==this.previewSyncGeneration||!this.isConnected)return null;let s=null,r=0;for(let o=0;o<We;o+=1){if(await new Promise(n=>requestAnimationFrame(()=>n())),e!==this.previewSyncGeneration||!this.isConnected)return null;if(t())return!0;if(!i()){s=null,r=0;continue}const a=this.workspaceGeometrySample();if(r=s&&this.workspaceGeometryMatches(s,a)?r+1:1,r>=be)return!1;s=a}return null}async promoteFlyoutIfClipped(e,t,i,s){if(i<=0)return!1;const r=await this.candidateFitsAfterLayoutSettles(e,()=>this.flyoutFitsWithinPage(t,i,s),()=>this.workspaceCandidateIsMeasurable(!1,!0));return r===null?!0:r?!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 s=this.previewVisible;this.toggleAttribute("data-preview-measuring",!0);try{const r=this.previewOpen&&this.previewHasContent(),o=this.previewMediaQuery?.matches??!1,a=this.hasAttribute("flyout-overlay-open"),n=this.hasAttribute("flyout-open"),p=this.hasAttribute("data-preview-navigation-collapsed"),u=this.getPreviewNavigationPair(),v=u===null?0:p?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,h=this.probeWidth(this.previewMinWidthProbe),w=this.optionalWidth("--esp-page-preview-default-width",this.previewDefaultWidthProbe),k=this.probeWidth(this.previewMaxWidthProbe),m=this.probeWidth(this.flyoutMinWidthProbe),x=this.optionalWidth("--esp-page-flyout-default-width",this.flyoutDefaultWidthProbe),g=this.probeWidth(this.flyoutMaxWidthProbe),d=this.probeWidth(this.mainMinWidthProbe);this.syncMainMaximumConfiguration();const M=this.probeWidth(this.mainMaxWidthProbe),F=this.mainTrackUnbounded()?0:M,V=this.openAutoFlyouts().some(b=>b.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),V){const b=this.visiblePageInlineBounds().width,S=this.flyoutOverlayPromotionWidth===null||b>=this.flyoutOverlayPromotionWidth+Re;!o&&t&&this.flyoutOverlayRecoveryReady&&S&&this.workspaceMinimumsCanFit(d,r,h,!0,m)?await this.setPageFlyoutOverlay(!1):o&&await this.setPageFlyoutOverlay(!1);return}if(await this.updateComplete,e!==this.previewSyncGeneration)return;const C=r&&!o&&!a,c=n&&!o;if(d>0&&(!C||h>0)&&(!c||m>0)&&(C||c)&&!this.workspaceMinimumsCanFit(d,C,h,c,m)){c&&await this.promoteFlyoutToOverlay();return}const $=(C?h:0)+(c?m:0),B=C&&this.preferredPreviewWidth!==null||c&&this.preferredFlyoutWidth!==null,I=B||(C&&w!==null||c&&x!==null),X=(C?this.preferredPreviewWidth===null?h:O(this.preferredPreviewWidth,h,k):0)+(c?this.preferredFlyoutWidth===null?m:O(this.preferredFlyoutWidth,m,g):0),f=(b,S,A,D)=>[O(b??D??S,S,A),A],L=b=>{const S=fe(b,$,X),A=this.allocateWorkspaceWidths(S,C,c,h,k,m,g,w,x),D=C&&B&&me(Math.min(b.natural,b.maximum),f(this.preferredPreviewWidth,h,k,w),c?f(this.preferredFlyoutWidth,m,g,x):null)||A,ie=b.maximum+d,se=Math.max(0,ie-b.natural),ne=A.previewWidth+A.flyoutWidth,ae=Math.max(0,Math.min(se,ie-ne));return{allocation:A,shown:D,mainWidth:ae,reclaimsMain:ae+l<se}},K=(b,S)=>Math.abs(b.mainWidth-S.mainWidth)>l||Math.abs(b.allocation.previewWidth-S.allocation.previewWidth)>l||Math.abs(b.allocation.flyoutWidth-S.allocation.flyoutWidth)>l,G=this.workspaceWidthCapacity(d,F,p?v:0),Y=L(G);let T=Y.shown;if(this.setWorkspaceWidths(T.previewWidth,T.flyoutWidth,I),!C||h<=0){c&&await this.promoteFlyoutIfClipped(e,d,m,g);return}if(u!==null&&v>l){const b=G.maximum+d,S=Q(b+v,d,F),A=L(S);(p?K(L(Q(Math.max(0,b-Pe),d,F)),A):Y.reclaimsMain&&K(Y,A))?i=await this.setPreviewNavigationCollapse(!0):await this.setPreviewNavigationCollapse(!1)}else await this.setPreviewNavigationCollapse(!1);if(e!==this.previewSyncGeneration)return;const J=this.workspaceWidthCapacity(d,F);if(J.maximum+l<$){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,c?m:0),i=!1,c&&await this.promoteFlyoutToOverlay();return}const ee=L(J);if(T=ee.shown,this.setWorkspaceWidths(T.previewWidth,T.flyoutWidth,I),s||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,ee.reclaimsMain),await this.updateComplete,e!==this.previewSyncGeneration)return;const te=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(d,h,k,c,m,g),()=>this.workspaceCandidateIsMeasurable(!0,c));if(te===null)return;te?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,c?m:0),i=!1,c&&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(ge),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(oe)||e.querySelector(oe)!==null}syncAsideContent(){const e=(t,i)=>t?re(t):Array.from(this.children).some(s=>s.getAttribute("slot")===i);this.sidebarHasContent=e(this.sidebarSlot.value,"sidebar"),this.rightHasContent=e(this.rightSlot.value,"right")}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()}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.workspaceResizeControllerLoad,this.isUpdatePending?super.getUpdateComplete():e}updated(e){super.updated(e),e.has("headerPosition")&&ue().publish("fixed-menus-changed",{fixed:this.headerPosition==="fixed"}),(e.has("previewOpen")||e.has("previewCollapseSidebar")||e.has("align"))&&this.schedulePreviewLayout(!0),e.has("workspaceResizable")&&(this.workspaceResizable?this.ensureWorkspaceResizeController():(this.toggleAttribute("data-workspace-resize-ready",!1),this.finishWorkspaceKeyboardResize(),this.endWorkspaceResize(),this.clearWorkspaceRecenteringState())),this.warnSiteRailSlots()}warnSiteRailSlots(){this.kind!=="site"||this.warnedSiteRails||!["sidebar","right"].some(t=>(this.shadowRoot?.querySelector(`slot[name="${t}"]`)?.assignedElements({flatten:!0}).length??0)>0)||(this.warnedSiteRails=!0,console.warn('Espalier page: kind="site" does not compose with the sidebar/right rails \u2014 sections span the full viewport and the shared well column ignores rail width. Use kind="wide" for railed layouts, or remove the rail slots from a site page.'))}render(){const e=this.headerPosition==="fixed",t=!e&&this.headerPosition==="sticky",i=this.mainPreviewResizeRange(this.renderedWorkspaceWidths().previewWidth,this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,this.previewNavigationResizeAllowance()),s=this.previewProbes.minimum,r=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,a=this.mainProbes.minimum,n=this.probeWidth(this.mainMaxWidthProbe),p=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,u=this.hasAttribute("flyout-open"),v=p+this.allocatedPreviewWidth,h=i.min<=s+l,w=u&&h?Math.max(0,this.allocatedFlyoutWidth-r):0,k=Math.max(a,v-i.max),m=Math.max(k,Math.max(a,v-i.min)+w),x=n>0?Math.max(k,Math.min(Math.max(a,n),m)):m,g=n>0&&p+l>=n?`${Math.round(p)}px main, ${Math.round(this.allocatedPreviewWidth)}px preview`:E;let d,M;if(this.previewVisible){const f=this.previewFlyoutResizeRange(this.renderedWorkspaceWidths().previewWidth,this.renderedWorkspaceWidths().flyoutWidth),L=this.allocatedPreviewWidth+this.allocatedFlyoutWidth,G=f.min<=s+l?Math.max(0,p-a):0;d=Math.max(r,L-f.max),M=Math.max(d,Math.min(o,L-f.min+G))}else{const f=this.flyoutOnlyResizeRange(this.renderedWorkspaceWidths().flyoutWidth,p);d=f.min,M=f.max}const F=this.previewVisible?"preview-flyout-resize-handle":"main-flyout-resize-handle",V=this.previewVisible?"Resize preview and help panes":"Resize help pane",C=this.previewVisible?`${Math.round(this.allocatedPreviewWidth)}px preview, ${Math.round(this.allocatedFlyoutWidth)}px help`:`${Math.round(this.allocatedFlyoutWidth)}px help`,c=u?"flyout-end":"preview-end",U=c==="flyout-end"?this.allocatedFlyoutWidth:this.allocatedPreviewWidth,$=this.workspaceLogicalGutterWidths(),B=this.trailingPaneResizeRange(c,U,$.leading+$.trailing),Z=c==="flyout-end"?"flyout-end-resize-handle":"preview-end-resize-handle",I=c==="flyout-end"?"Resize help pane from its outer edge":"Resize preview pane from its outer edge";return le`
+      <div part="wrapper" class="esp-page ${de({"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>
@@ -9,13 +9,13 @@ var b=function(N,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
         
         <aside
           class="esp-page-left"
-          role=${this.sidebarHasContent?L:"none"}
-          aria-label=${this.sidebarHasContent?this.sidebarLabel:L}
+          role=${this.sidebarHasContent?E:"none"}
+          aria-label=${this.sidebarHasContent?this.sidebarLabel:E}
         >
           <div class="sticky-wrapper">
             <slot
               name="sidebar"
-              ${R(this.sidebarSlot)}
+              ${P(this.sidebarSlot)}
               @slotchange=${this.onSidebarSlotChange}
             ></slot>
           </div>
@@ -25,13 +25,13 @@ var b=function(N,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
         </div>
         <aside
           class="esp-page-right"
-          role=${this.rightHasContent?L:"none"}
-          aria-label=${this.rightHasContent?this.rightLabel:L}
+          role=${this.rightHasContent?E:"none"}
+          aria-label=${this.rightHasContent?this.rightLabel:E}
         >
           <div class="sticky-wrapper">
             <slot
               name="right"
-              ${R(this.rightSlot)}
+              ${P(this.rightSlot)}
               @slotchange=${()=>this.syncAsideContent()}
             ></slot>
           </div>
@@ -40,7 +40,7 @@ var b=function(N,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
           <div class="sticky-wrapper">
             <slot
               name="flyout"
-              ${R(this.flyoutSlot)}
+              ${P(this.flyoutSlot)}
               @slotchange=${()=>this.syncFlyoutState()}
             ></slot>
           </div>
@@ -48,64 +48,64 @@ var b=function(N,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
         <div
           class="esp-page-preview-width-probe esp-page-preview-min-width-probe"
           aria-hidden="true"
-          ${R(this.previewMinWidthProbe)}
+          ${P(this.previewMinWidthProbe)}
         ></div>
         <div
           class="esp-page-preview-default-width-probe"
           aria-hidden="true"
-          ${R(this.previewDefaultWidthProbe)}
+          ${P(this.previewDefaultWidthProbe)}
         ></div>
         <div
           class="esp-page-preview-max-width-probe"
           aria-hidden="true"
-          ${R(this.previewMaxWidthProbe)}
+          ${P(this.previewMaxWidthProbe)}
         ></div>
         <div
           class="esp-page-flyout-min-width-probe"
           aria-hidden="true"
-          ${R(this.flyoutMinWidthProbe)}
+          ${P(this.flyoutMinWidthProbe)}
         ></div>
         <div
           class="esp-page-flyout-default-width-probe"
           aria-hidden="true"
-          ${R(this.flyoutDefaultWidthProbe)}
+          ${P(this.flyoutDefaultWidthProbe)}
         ></div>
         <div
           class="esp-page-flyout-max-width-probe"
           aria-hidden="true"
-          ${R(this.flyoutMaxWidthProbe)}
+          ${P(this.flyoutMaxWidthProbe)}
         ></div>
         <div
           class="esp-page-preview-main-min-probe esp-page-main-min-width-probe"
           aria-hidden="true"
-          ${R(this.mainMinWidthProbe)}
+          ${P(this.mainMinWidthProbe)}
         ></div>
         <div
           class="esp-page-main-configured-max-width-probe"
           aria-hidden="true"
-          ${R(this.mainConfiguredMaxWidthProbe)}
+          ${P(this.mainConfiguredMaxWidthProbe)}
         ></div>
         <div
           class="esp-page-main-max-width-probe"
           aria-hidden="true"
-          ${R(this.mainMaxWidthProbe)}
+          ${P(this.mainMaxWidthProbe)}
         ></div>
         <div
           class="esp-page-resize-step-probe"
           aria-hidden="true"
-          ${R(this.resizeStepProbe)}
+          ${P(this.resizeStepProbe)}
         ></div>
         <div
           class="esp-page-resize-large-step-probe"
           aria-hidden="true"
-          ${R(this.resizeLargeStepProbe)}
+          ${P(this.resizeLargeStepProbe)}
         ></div>
-        <div class="esp-page-preview-space" ${R(this.previewSpace)}>
+        <div class="esp-page-preview-space" ${P(this.previewSpace)}>
           <aside part="preview" class="esp-page-preview" aria-label=${this.previewLabel}>
             <div part="preview-content" class="sticky-wrapper">
               <slot
                 name="preview"
-                ${R(this.previewSlot)}
+                ${P(this.previewSlot)}
                 @slotchange=${this.schedulePreviewLayout}
               ></slot>
             </div>
@@ -118,61 +118,61 @@ var b=function(N,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
             role="separator"
             aria-orientation="vertical"
             aria-label="Resize main pane"
-            aria-valuemin=${Math.round(P)}
-            aria-valuemax=${Math.round(z)}
+            aria-valuemin=${Math.round(k)}
+            aria-valuemax=${Math.round(x)}
             aria-valuenow=${Math.round(p)}
             aria-valuetext=${g}
             tabindex="0"
-            @pointerdown=${w=>this.onWorkspaceResizePointerDown("main-preview",w)}
+            @pointerdown=${f=>this.onWorkspaceResizePointerDown("main-preview",f)}
             @pointermove=${this.onWorkspaceResizePointerMove}
             @pointerup=${this.onWorkspaceResizePointerEnd}
             @pointercancel=${this.onWorkspaceResizePointerEnd}
             @lostpointercapture=${this.onWorkspaceResizePointerEnd}
-            @keydown=${w=>this.onWorkspaceResizeKeyDown("main-preview",w)}
+            @keydown=${f=>this.onWorkspaceResizeKeyDown("main-preview",f)}
             @blur=${this.onWorkspaceResizeBlur}
           ></div>
           <div
-            part=${x}
+            part=${F}
             class="esp-page-workspace-resize-handle esp-page-preview-flyout-resize-handle"
             role="separator"
             aria-orientation="vertical"
-            aria-label=${H}
+            aria-label=${V}
             aria-valuemin=${Math.round(d)}
             aria-valuemax=${Math.round(M)}
             aria-valuenow=${Math.round(this.allocatedFlyoutWidth)}
-            aria-valuetext=${S}
+            aria-valuetext=${C}
             tabindex="0"
-            @pointerdown=${w=>this.onWorkspaceResizePointerDown("preview-flyout",w)}
+            @pointerdown=${f=>this.onWorkspaceResizePointerDown("preview-flyout",f)}
             @pointermove=${this.onWorkspaceResizePointerMove}
             @pointerup=${this.onWorkspaceResizePointerEnd}
             @pointercancel=${this.onWorkspaceResizePointerEnd}
             @lostpointercapture=${this.onWorkspaceResizePointerEnd}
-            @keydown=${w=>this.onWorkspaceResizeKeyDown("preview-flyout",w)}
+            @keydown=${f=>this.onWorkspaceResizeKeyDown("preview-flyout",f)}
             @blur=${this.onWorkspaceResizeBlur}
           ></div>
           <div
-            part=${Q}
+            part=${Z}
             class="esp-page-workspace-resize-handle esp-page-workspace-end-resize-handle"
             role="separator"
             aria-orientation="vertical"
             aria-label=${I}
-            aria-valuemin=${Math.round(V.min)}
-            aria-valuemax=${Math.round(V.max)}
-            aria-valuenow=${Math.round(_)}
+            aria-valuemin=${Math.round(B.min)}
+            aria-valuemax=${Math.round(B.max)}
+            aria-valuenow=${Math.round(U)}
             tabindex="0"
-            @pointerdown=${w=>this.onWorkspaceResizePointerDown(v,w)}
+            @pointerdown=${f=>this.onWorkspaceResizePointerDown(c,f)}
             @pointermove=${this.onWorkspaceResizePointerMove}
             @pointerup=${this.onWorkspaceResizePointerEnd}
             @pointercancel=${this.onWorkspaceResizePointerEnd}
             @lostpointercapture=${this.onWorkspaceResizePointerEnd}
-            @keydown=${w=>this.onWorkspaceResizeKeyDown(v,w)}
+            @keydown=${f=>this.onWorkspaceResizeKeyDown(c,f)}
             @blur=${this.onWorkspaceResizeBlur}
           ></div>
         </div>
-        <div class="esp-page-footer" role=${this.footerWrapperIsLandmark?"contentinfo":L}>
-          <slot name="footer" ${R(this.footerSlot)} @slotchange=${this.syncFooterLandmark}></slot>
+        <div class="esp-page-footer" role=${this.footerWrapperIsLandmark?"contentinfo":E}>
+          <slot name="footer" ${P(this.footerSlot)} @slotchange=${this.syncFooterLandmark}></slot>
         </div>
-        <div id="dialog-drop-zone" ${R(this.dialogZone)}></div>
+        <div id="dialog-drop-zone" ${P(this.dialogZone)}></div>
         <esp-toaster></esp-toaster>
       </div>
-    `}};m.styles=we,b([q()],m.prototype,"footerWrapperIsLandmark",void 0),b([q()],m.prototype,"sidebarHasContent",void 0),b([q()],m.prototype,"rightHasContent",void 0),b([q()],m.prototype,"allocatedPreviewWidth",void 0),b([q()],m.prototype,"allocatedFlyoutWidth",void 0),b([C({reflect:!0})],m.prototype,"kind",void 0),b([C({reflect:!0})],m.prototype,"align",void 0),b([C({type:Boolean,reflect:!0})],m.prototype,"contained",void 0),b([C({attribute:"header-position",reflect:!0})],m.prototype,"headerPosition",void 0),b([C({attribute:"preview-open",type:Boolean,reflect:!0})],m.prototype,"previewOpen",void 0),b([C({attribute:"sidebar-label",type:String,reflect:!0})],m.prototype,"sidebarLabel",void 0),b([C({attribute:"right-label",type:String,reflect:!0})],m.prototype,"rightLabel",void 0),b([C({attribute:"preview-label",type:String,reflect:!0})],m.prototype,"previewLabel",void 0),b([C({attribute:"preview-collapse-sidebar",type:Boolean,reflect:!0})],m.prototype,"previewCollapseSidebar",void 0),b([C({attribute:"workspace-resizable",type:Boolean,reflect:!0})],m.prototype,"workspaceResizable",void 0),b([C({attribute:"preview-visible",type:Boolean,reflect:!0})],m.prototype,"previewVisible",void 0),b([C({attribute:"preview-reclaiming",type:Boolean,reflect:!0})],m.prototype,"previewReclaiming",void 0),m=b([ne("esp-page")],m);export{m as EspalierPage};
+    `}};y.styles=ye,W([q()],y.prototype,"footerWrapperIsLandmark",void 0),W([q()],y.prototype,"sidebarHasContent",void 0),W([q()],y.prototype,"rightHasContent",void 0),W([q()],y.prototype,"allocatedPreviewWidth",void 0),W([q()],y.prototype,"allocatedFlyoutWidth",void 0),W([z({reflect:!0})],y.prototype,"kind",void 0),W([z({reflect:!0})],y.prototype,"align",void 0),W([z({type:Boolean,reflect:!0})],y.prototype,"contained",void 0),W([z({attribute:"header-position",reflect:!0})],y.prototype,"headerPosition",void 0),W([z({attribute:"preview-open",type:Boolean,reflect:!0})],y.prototype,"previewOpen",void 0),W([z({attribute:"sidebar-label",type:String,reflect:!0})],y.prototype,"sidebarLabel",void 0),W([z({attribute:"right-label",type:String,reflect:!0})],y.prototype,"rightLabel",void 0),W([z({attribute:"preview-label",type:String,reflect:!0})],y.prototype,"previewLabel",void 0),W([z({attribute:"preview-collapse-sidebar",type:Boolean,reflect:!0})],y.prototype,"previewCollapseSidebar",void 0),W([z({attribute:"workspace-resizable",type:Boolean,reflect:!0})],y.prototype,"workspaceResizable",void 0),W([z({attribute:"preview-visible",type:Boolean,reflect:!0})],y.prototype,"previewVisible",void 0),W([z({attribute:"preview-reclaiming",type:Boolean,reflect:!0})],y.prototype,"previewReclaiming",void 0),y=W([he("esp-page")],y);export{y as EspalierPage};

package/dist/page/esp-page.styles.js

@@ -588,6 +588,7 @@ import{css as a,unsafeCSS as e}from"lit";import{EspalierElementBase as i}from"..
           position: absolute;
           inset: 0;
           background-image: var(--esp-page-canvas-background-image, none);
+          background-attachment: var(--esp-page-canvas-background-attachment, scroll);
           opacity: var(--esp-page-canvas-background-image-opacity, 1);
         }
       }

package/dist/page/workspace-geometry.js

@@ -1 +1 @@
-import{WidthRange as o}from"./workspace-width.js";function e(a,r,t){const n=Math.max(0,a),m=t>0?Math.min(n,t):n;return{natural:Math.max(0,n-m),maximum:Math.max(0,n-Math.max(0,r))}}function h(a,r,t){return Math.min(a.maximum,Math.max(r,t,a.natural))}function u(a,r,t){return o.of(r,t).clamp(a)}export{u as clampWorkspaceWidth,h as workspaceTargetWidth,e as workspaceWidthCapacityForAvailable};
+import{WidthRange as m}from"./workspace-width.js";function h(n,t,a){const r=Math.max(0,n),i=a>0?Math.min(r,a):r;return{natural:Math.max(0,r-i),maximum:Math.max(0,r-Math.max(0,t))}}function e(n,t,a){return Math.min(n.maximum,Math.max(t,a,n.natural))}function u(n,t,a){return m.of(t,a).clamp(n)}function c(n,t,a){const r=n-t[0]-(a?.[0]??0);if(r<=0)return null;const i=Math.min(r,Math.max(0,t[1]-t[0]));return{previewWidth:t[0]+i,flyoutWidth:a?a[0]+Math.min(r-i,Math.max(0,a[1]-a[0])):0}}export{c as absorbWorkspaceSurplus,u as clampWorkspaceWidth,e as workspaceTargetWidth,h as workspaceWidthCapacityForAvailable};

package/dist/page/workspace-resize-session.js

@@ -1 +1 @@
-import{ESP_EVENTS as A}from"../shared/events.js";import{RafThrottle as D}from"../shared/raf-throttle.js";import{clampWorkspaceWidth as T}from"./workspace-geometry.js";import{PREVIEW_LAYOUT_EPSILON as b}from"./workspace-width.js";const G=250,L=250,x=40;class N{get element(){return this.host.element}constructor(e,r,s){this.host=e,this.geometry=r,this.callbacks=s,this.resizeSession=null,this.workspaceKeyboardSettlementTimer=null,this.pendingRecenterLeading=0,this.workspaceRecenteringTimer=null,this.onWorkspaceResizePointerDown=(i,t)=>{if(t.button!==0||!this.geometry.separatorIsAvailable(i))return;const a=t.currentTarget,h=this.element.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,l=this.geometry.renderedWorkspaceWidths();this.endWorkspaceResize(),this.finishWorkspaceKeyboardResize(!1),this.suspendPreviewLayoutForWorkspaceResize();const p=a.getBoundingClientRect(),P=this.holdWorkspacePosition();this.element.toggleAttribute("data-workspace-resizing",!0);const{leading:n,trailing:u}=this.geometry.workspaceLogicalGutterWidths(),S=u>b?n+u:0,z=u>b?Math.max(1,S/u):1;this.resizeSession={separator:i,pointerId:t.pointerId,target:a,startClientX:t.clientX,startPreviewWidth:l.previewWidth,startFlyoutWidth:l.flyoutWidth,startMainWidth:h,startNavigationAllowance:this.geometry.previewNavigationResizeAllowance(),startOuterGrowthCapacity:S,trailingExpansionScale:z,trailingGroupPushDelta:0,startHandleClientX:p.left+p.width/2,startLeadingGutterWidth:P,heldLeadingGutterWidth:P,direction:this.geometry.workspaceResizeDirection()};try{a.setPointerCapture?.(t.pointerId)}catch{}t.preventDefault()},this.onWorkspaceResizePointerMove=i=>{const t=this.resizeSession;if(!t||t.pointerId!==i.pointerId)return;i.preventDefault();const a=i.clientX-t.startClientX,h=a*t.direction,l=t.separator==="main-preview"||t.separator==="preview-flyout"&&!this.host.previewVisible;t.trailingGroupPushDelta=l&&h>0?Math.min(h,t.startOuterGrowthCapacity/t.trailingExpansionScale,this.geometry.mainResizeGrowthCapacity(t.startMainWidth)):0,this.applyWorkspaceResize(t.separator,a,"pointer",t.startPreviewWidth,t.startFlyoutWidth,t.startMainWidth,t.startNavigationAllowance,t.startOuterGrowthCapacity,t.trailingExpansionScale,t.direction),this.host.align!=="start"&&!this.seedWorkspaceResizeLeadingGutter(t)&&this.trackWorkspaceResizePointer(t)},this.onWorkspaceResizePointerEnd=i=>{!this.resizeSession||this.resizeSession.pointerId!==i.pointerId||(i.preventDefault(),this.endWorkspaceResize())},this.onWorkspaceResizeBlur=i=>{this.element.hasAttribute("data-workspace-keyboard-adjusting")&&(i.relatedTarget instanceof Element&&i.relatedTarget.classList.contains("esp-page-workspace-resize-handle")||this.finishWorkspaceKeyboardResize())},this.onWorkspaceResizeKeyDown=(i,t)=>{if(t.key!=="ArrowLeft"&&t.key!=="ArrowRight"||!this.geometry.separatorIsAvailable(i))return;t.preventDefault(),this.element.hasAttribute("data-workspace-keyboard-adjusting")||this.suspendPreviewLayoutForWorkspaceResize();const a=(t.key==="ArrowLeft"?-1:1)*this.callbacks.resizeStep(t.shiftKey),h=this.element.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,l=this.geometry.renderedWorkspaceWidths();this.applyWorkspaceResize(i,a,"keyboard",l.previewWidth,l.flyoutWidth,h,this.geometry.previewNavigationResizeAllowance(),(()=>{const p=this.geometry.workspaceLogicalGutterWidths();return p.leading+p.trailing})(),1,this.geometry.workspaceResizeDirection())},this.workspaceRecenteringFrame=new D(()=>this.applyWorkspaceRecentering()),e.element.addController(this)}get currentSession(){return this.resizeSession}hostDisconnected(){this.finishWorkspaceKeyboardResize(!1),this.endWorkspaceResize(),this.clearWorkspaceRecenteringState()}scheduleWorkspaceSettlement(e=null){const r=()=>{this.host.schedulePreviewLayout(),e&&requestAnimationFrame(()=>{this.host.previewSyncTask.then(()=>{const t=this.element.shadowRoot?.activeElement,a=this.element.ownerDocument.activeElement;!this.element.isConnected||!e.isConnected||t&&t!==e||a!==this.element&&a!==this.element.ownerDocument.body||getComputedStyle(e).display!=="none"&&e.focus({preventScroll:!0})})})},s=this.host.previewNavigationCollapseTask;if(!s){r();return}s.then(()=>r(),()=>r())}clearWorkspaceKeyboardSettlementTimer(){this.workspaceKeyboardSettlementTimer!==null&&(clearTimeout(this.workspaceKeyboardSettlementTimer),this.workspaceKeyboardSettlementTimer=null)}finishWorkspaceKeyboardResize(e=!0){this.clearWorkspaceKeyboardSettlementTimer();const r=this.element.hasAttribute("data-workspace-keyboard-adjusting");this.element.toggleAttribute("data-workspace-keyboard-adjusting",!1),r&&e&&!this.resizeSession&&this.scheduleWorkspaceSettlement()}deferWorkspaceKeyboardSettlement(){this.clearWorkspaceKeyboardSettlementTimer(),this.workspaceKeyboardSettlementTimer=setTimeout(()=>{if(this.workspaceKeyboardSettlementTimer=null,!this.element.hasAttribute("data-workspace-keyboard-adjusting"))return;const e=this.element.shadowRoot?.activeElement,r=e instanceof HTMLElement&&e.classList.contains("esp-page-workspace-resize-handle")?e:null;this.element.toggleAttribute("data-workspace-keyboard-adjusting",!1),this.resizeSession||this.scheduleWorkspaceSettlement(r)},G)}suspendPreviewLayoutForWorkspaceResize(){this.host.previewSyncFrame.cancel(),this.host.previewSyncGeneration+=1,this.element.toggleAttribute("data-preview-measuring",!1),this.element.toggleAttribute("data-preview-validating",!1)}applyWorkspaceResize(e,r,s,i,t,a,h,l,p,P){if(!this.geometry.separatorIsAvailable(e))return;const n=r*P,u=l/p,S=e==="main-preview"||e==="preview-flyout"&&!this.host.previewVisible,z=s==="pointer"&&S&&n>0?Math.min(n,u,this.geometry.mainResizeGrowthCapacity(a)):0;let E=e,c=i,o=t;if(e==="preview-end"||e==="flyout-end"){const d=e==="preview-end"?i:t,k=this.geometry.trailingPaneResizeRange(e,d,l),W=d+(n>0?n*p:n),m=k.clamp(W);e==="preview-end"?(c=m,this.host.preferredPreviewWidth=m):(o=m,this.host.preferredFlyoutWidth=m)}else if(e==="main-preview"){const d=this.geometry.mainPreviewResizeRange(i,a,h),k=i-(n-z);c=d.clamp(k),this.host.preferredPreviewWidth=c;const W=this.host.mainProbes.minimum,m=this.geometry.probeWidth(this.host.mainMaxWidthProbe),g=this.geometry.mainTrackUnbounded()?0:m,w=this.geometry.workspaceWidthCapacity(W,g);h>0&&c+o>w.natural+b&&this.callbacks.requestPreviewNavigationCollapse();const y=this.host.previewProbes.minimum,f=Math.max(0,y-k),v=d.min<=y+b;if(f>0&&v&&t>0){const R=this.host.flyoutProbes.minimum,M=this.host.flyoutProbes.maximum;o=T(t-f,R,M),this.host.preferredFlyoutWidth=o}else t>0&&(this.host.preferredFlyoutWidth??=t)}else if(!this.host.previewVisible)E="main-flyout",o=this.geometry.flyoutOnlyResizeRange(t,a).clamp(t-(n-z)),c=0,this.host.preferredFlyoutWidth=o;else{const d=this.host.previewProbes.minimum,k=this.host.previewProbes.maximum,W=this.host.flyoutProbes.minimum,m=this.host.flyoutProbes.maximum;if(n>=0){const g=Math.max(0,t-W),w=Math.min(n,u),y=Math.max(0,n-w),f=w*p+y,v=g+l;c=T(i+f,d,Math.min(k,i+v));const R=Math.max(0,c-i),M=Math.min(R,l);o=t-Math.min(Math.max(0,R-M),g)}else{const g=this.geometry.previewFlyoutResizeRange(i,t),w=i+n;c=g.clamp(w),o=i+t-c;const y=Math.max(0,d-w),f=g.min<=d+b;if(y>0&&f){const v=this.host.mainProbes.minimum,R=Math.max(0,a-v);o=T(o+Math.min(y,R),W,m)}}this.host.preferredPreviewWidth=c,this.host.preferredFlyoutWidth=o}this.host.setWorkspaceWidths(c,o,!0),this.element.requestUpdate(),this.host.previewVisible&&this.host.setPreviewLayoutState(!0,!0),s==="keyboard"&&(this.element.toggleAttribute("data-workspace-keyboard-adjusting",!0),this.deferWorkspaceKeyboardSettlement()),this.element.dispatchEvent(new CustomEvent(A.PAGE_WORKSPACE_RESIZE,{bubbles:!0,composed:!0,detail:{separator:E,source:s,previewWidth:c,flyoutWidth:o}}))}appliedSeparatorInlineDelta(e){if(e.separator==="preview-end"){const i=this.host.allocatedPreviewWidth-e.startPreviewWidth;return i>0?i/e.trailingExpansionScale:i}if(e.separator==="flyout-end"){const i=this.host.allocatedFlyoutWidth-e.startFlyoutWidth;return i>0?i/e.trailingExpansionScale:i}if(e.separator==="main-preview")return e.trailingGroupPushDelta+e.startPreviewWidth-this.host.allocatedPreviewWidth+(e.startFlyoutWidth-this.host.allocatedFlyoutWidth);const r=e.startFlyoutWidth-this.host.allocatedFlyoutWidth;if(!this.host.previewVisible)return e.trailingGroupPushDelta+r;if(this.host.allocatedPreviewWidth<e.startPreviewWidth)return r;const s=Math.max(0,this.host.allocatedPreviewWidth+this.host.allocatedFlyoutWidth-e.startPreviewWidth-e.startFlyoutWidth);return r+s/e.trailingExpansionScale}clearWorkspaceRecenteringState(){this.workspaceRecenteringFrame.cancel(),this.workspaceRecenteringTimer!==null&&(clearTimeout(this.workspaceRecenteringTimer),this.workspaceRecenteringTimer=null),this.element.toggleAttribute("data-workspace-position-held",!1),this.element.style.removeProperty("--_esp-page-resize-leading-gutter-width")}holdWorkspacePosition(){const e=this.geometry.workspaceLogicalGutterWidths().leading;return this.clearWorkspaceRecenteringState(),this.element.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e}px`),this.element.toggleAttribute("data-workspace-position-held",!0),e}trackWorkspaceResizePointer(e){const r=e.startHandleClientX+this.appliedSeparatorInlineDelta(e)*e.direction;for(let s=0;s<3;s+=1){const i=e.target.getBoundingClientRect(),t=i.left+i.width/2,a=(r-t)*e.direction;if(Math.abs(a)<=.25)return;const h=Math.max(0,e.heldLeadingGutterWidth+a);if(Math.abs(h-e.heldLeadingGutterWidth)<=.25)return;e.heldLeadingGutterWidth=h,this.element.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e.heldLeadingGutterWidth}px`)}}seedWorkspaceResizeLeadingGutter(e){if(this.host.align==="start")return!1;const r=this.appliedSeparatorInlineDelta(e);if(r<=0)return!1;let s=0;if(e.separator==="preview-end"||e.separator==="flyout-end")s=this.host.allocatedPreviewWidth-e.startPreviewWidth+this.host.allocatedFlyoutWidth-e.startFlyoutWidth;else if(e.separator==="preview-flyout"&&this.host.previewVisible)s=this.host.allocatedPreviewWidth-e.startPreviewWidth;else{const i=Math.max(0,e.startPreviewWidth-this.host.allocatedPreviewWidth+e.startFlyoutWidth-this.host.allocatedFlyoutWidth),t=this.geometry.probeWidth(this.host.mainMaxWidthProbe),a=this.geometry.mainTrackUnbounded()?Number.POSITIVE_INFINITY:Math.max(0,t-e.startMainWidth);s=Math.min(e.trailingGroupPushDelta+i,a)}return e.heldLeadingGutterWidth=Math.max(0,e.startLeadingGutterWidth+r-s),this.element.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e.heldLeadingGutterWidth}px`),!0}finishWorkspaceRecentering(){this.clearWorkspaceRecenteringState(),this.geometry.syncTrailingWorkspaceResizeAvailability(),this.element.isConnected&&this.scheduleWorkspaceSettlement()}beginWorkspaceRecentering(){const e=this.geometry.workspaceLogicalGutterWidths(),r=e.leading+e.trailing,s=this.host.align==="center"?r/2:this.host.align==="end"?r:0;if(Math.abs(s-e.leading)<=b){this.finishWorkspaceRecentering();return}this.pendingRecenterLeading=s,this.workspaceRecenteringFrame.restart()}applyWorkspaceRecentering(){this.resizeSession||!this.element.hasAttribute("data-workspace-position-held")||(this.element.style.setProperty("--_esp-page-resize-leading-gutter-width",`${this.pendingRecenterLeading}px`),this.workspaceRecenteringTimer=setTimeout(()=>this.finishWorkspaceRecentering(),L+x))}endWorkspaceResize(){const e=this.resizeSession;this.resizeSession=null,this.element.toggleAttribute("data-workspace-resizing",!1),e?.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),e&&this.beginWorkspaceRecentering()}}export{N as WorkspaceResizeSessionController};
+import{ESP_EVENTS as D}from"../shared/events.js";import{RafThrottle as G}from"../shared/raf-throttle.js";import{absorbWorkspaceSurplus as L,clampWorkspaceWidth as T}from"./workspace-geometry.js";import{PREVIEW_LAYOUT_EPSILON as R}from"./workspace-width.js";const I=250,F=250,K=40;class q{get element(){return this.host.element}constructor(e,r,s){this.host=e,this.geometry=r,this.callbacks=s,this.resizeSession=null,this.workspaceKeyboardSettlementTimer=null,this.pendingRecenterLeading=0,this.workspaceRecenteringTimer=null,this.onWorkspaceResizePointerDown=(i,t)=>{if(t.button!==0||!this.geometry.separatorIsAvailable(i))return;const a=t.currentTarget,l=this.element.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,c=this.geometry.renderedWorkspaceWidths();this.endWorkspaceResize(),this.finishWorkspaceKeyboardResize(!1),this.suspendPreviewLayoutForWorkspaceResize();const p=a.getBoundingClientRect(),P=this.holdWorkspacePosition();this.element.toggleAttribute("data-workspace-resizing",!0);const{leading:h,trailing:u}=this.geometry.workspaceLogicalGutterWidths(),S=u>R?h+u:0,z=u>R?Math.max(1,S/u):1;this.resizeSession={separator:i,pointerId:t.pointerId,target:a,startClientX:t.clientX,startPreviewWidth:c.previewWidth,startFlyoutWidth:c.flyoutWidth,startMainWidth:l,startNavigationAllowance:this.geometry.previewNavigationResizeAllowance(),startOuterGrowthCapacity:S,trailingExpansionScale:z,trailingGroupPushDelta:0,startHandleClientX:p.left+p.width/2,startLeadingGutterWidth:P,heldLeadingGutterWidth:P,direction:this.geometry.workspaceResizeDirection()};try{a.setPointerCapture?.(t.pointerId)}catch{}t.preventDefault()},this.onWorkspaceResizePointerMove=i=>{const t=this.resizeSession;if(!t||t.pointerId!==i.pointerId)return;i.preventDefault();const a=i.clientX-t.startClientX,l=a*t.direction,c=t.separator==="main-preview"||t.separator==="preview-flyout"&&!this.host.previewVisible;t.trailingGroupPushDelta=c&&l>0?Math.min(l,t.startOuterGrowthCapacity/t.trailingExpansionScale,this.geometry.mainResizeGrowthCapacity(t.startMainWidth)):0,this.applyWorkspaceResize(t.separator,a,"pointer",t.startPreviewWidth,t.startFlyoutWidth,t.startMainWidth,t.startNavigationAllowance,t.startOuterGrowthCapacity,t.trailingExpansionScale,t.direction),this.host.align!=="start"&&!this.seedWorkspaceResizeLeadingGutter(t)&&this.trackWorkspaceResizePointer(t)},this.onWorkspaceResizePointerEnd=i=>{!this.resizeSession||this.resizeSession.pointerId!==i.pointerId||(i.preventDefault(),this.endWorkspaceResize())},this.onWorkspaceResizeBlur=i=>{this.element.hasAttribute("data-workspace-keyboard-adjusting")&&(i.relatedTarget instanceof Element&&i.relatedTarget.classList.contains("esp-page-workspace-resize-handle")||this.finishWorkspaceKeyboardResize())},this.onWorkspaceResizeKeyDown=(i,t)=>{if(t.key!=="ArrowLeft"&&t.key!=="ArrowRight"||!this.geometry.separatorIsAvailable(i))return;t.preventDefault(),this.element.hasAttribute("data-workspace-keyboard-adjusting")||this.suspendPreviewLayoutForWorkspaceResize();const a=(t.key==="ArrowLeft"?-1:1)*this.callbacks.resizeStep(t.shiftKey),l=this.element.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,c=this.geometry.renderedWorkspaceWidths();this.applyWorkspaceResize(i,a,"keyboard",c.previewWidth,c.flyoutWidth,l,this.geometry.previewNavigationResizeAllowance(),(()=>{const p=this.geometry.workspaceLogicalGutterWidths();return p.leading+p.trailing})(),1,this.geometry.workspaceResizeDirection())},this.workspaceRecenteringFrame=new G(()=>this.applyWorkspaceRecentering()),e.element.addController(this)}get currentSession(){return this.resizeSession}hostDisconnected(){this.finishWorkspaceKeyboardResize(!1),this.endWorkspaceResize(),this.clearWorkspaceRecenteringState()}scheduleWorkspaceSettlement(e=null){const r=()=>{this.host.schedulePreviewLayout(),e&&requestAnimationFrame(()=>{this.host.previewSyncTask.then(()=>{const t=this.element.shadowRoot?.activeElement,a=this.element.ownerDocument.activeElement;!this.element.isConnected||!e.isConnected||t&&t!==e||a!==this.element&&a!==this.element.ownerDocument.body||getComputedStyle(e).display!=="none"&&e.focus({preventScroll:!0})})})},s=this.host.previewNavigationCollapseTask;if(!s){r();return}s.then(()=>r(),()=>r())}clearWorkspaceKeyboardSettlementTimer(){this.workspaceKeyboardSettlementTimer!==null&&(clearTimeout(this.workspaceKeyboardSettlementTimer),this.workspaceKeyboardSettlementTimer=null)}finishWorkspaceKeyboardResize(e=!0){this.clearWorkspaceKeyboardSettlementTimer();const r=this.element.hasAttribute("data-workspace-keyboard-adjusting");this.element.toggleAttribute("data-workspace-keyboard-adjusting",!1),r&&e&&!this.resizeSession&&this.scheduleWorkspaceSettlement()}deferWorkspaceKeyboardSettlement(){this.clearWorkspaceKeyboardSettlementTimer(),this.workspaceKeyboardSettlementTimer=setTimeout(()=>{if(this.workspaceKeyboardSettlementTimer=null,!this.element.hasAttribute("data-workspace-keyboard-adjusting"))return;const e=this.element.shadowRoot?.activeElement,r=e instanceof HTMLElement&&e.classList.contains("esp-page-workspace-resize-handle")?e:null;this.element.toggleAttribute("data-workspace-keyboard-adjusting",!1),this.resizeSession||this.scheduleWorkspaceSettlement(r)},I)}suspendPreviewLayoutForWorkspaceResize(){this.host.previewSyncFrame.cancel(),this.host.previewSyncGeneration+=1,this.element.toggleAttribute("data-preview-measuring",!1),this.element.toggleAttribute("data-preview-validating",!1)}applyWorkspaceResize(e,r,s,i,t,a,l,c,p,P){if(!this.geometry.separatorIsAvailable(e))return;const h=r*P,u=c/p,S=e==="main-preview"||e==="preview-flyout"&&!this.host.previewVisible,z=s==="pointer"&&S&&h>0?Math.min(h,u,this.geometry.mainResizeGrowthCapacity(a)):0;let E=e,n=i,o=t;if(e==="preview-end"||e==="flyout-end"){const d=e==="preview-end"?i:t,W=this.geometry.trailingPaneResizeRange(e,d,c),k=d+(h>0?h*p:h),m=W.clamp(k);e==="preview-end"?(n=m,this.host.preferredPreviewWidth=m):(o=m,this.host.preferredFlyoutWidth=m)}else if(e==="main-preview"){const d=this.geometry.mainPreviewResizeRange(i,a,l),W=i-(h-z);n=d.clamp(W),this.host.preferredPreviewWidth=n;const k=this.host.mainProbes.minimum,m=this.geometry.probeWidth(this.host.mainMaxWidthProbe),g=this.geometry.mainTrackUnbounded()?0:m,w=this.geometry.workspaceWidthCapacity(k,g);l>0&&n+o>w.natural+R&&this.callbacks.requestPreviewNavigationCollapse();const y=this.host.previewProbes.minimum,f=Math.max(0,y-W),v=d.min<=y+R;if(f>0&&v&&t>0){const b=this.host.flyoutProbes.minimum,M=this.host.flyoutProbes.maximum;o=T(t-f,b,M),this.host.preferredFlyoutWidth=o}else t>0&&(this.host.preferredFlyoutWidth??=t)}else if(!this.host.previewVisible)E="main-flyout",o=this.geometry.flyoutOnlyResizeRange(t,a).clamp(t-(h-z)),n=0,this.host.preferredFlyoutWidth=o;else{const d=this.host.previewProbes.minimum,W=this.host.previewProbes.maximum,k=this.host.flyoutProbes.minimum,m=this.host.flyoutProbes.maximum;if(h>=0){const g=Math.max(0,t-k),w=Math.min(h,u),y=Math.max(0,h-w),f=w*p+y,v=g+c;n=T(i+f,d,Math.min(W,i+v));const b=Math.max(0,n-i),M=Math.min(b,c);o=t-Math.min(Math.max(0,b-M),g)}else{const g=this.geometry.previewFlyoutResizeRange(i,t),w=i+h;n=g.clamp(w),o=i+t-n;const y=Math.max(0,d-w),f=g.min<=d+R;if(y>0&&f){const v=this.host.mainProbes.minimum,b=Math.max(0,a-v);o=T(o+Math.min(y,b),k,m)}}this.host.preferredPreviewWidth=n,this.host.preferredFlyoutWidth=o}const C=this.geometry.mainTrackUnbounded()?0:this.geometry.probeWidth(this.host.mainMaxWidthProbe),x=this.geometry.workspaceWidthCapacity(this.host.mainProbes.minimum,C),A=this.host.previewVisible&&L(Math.min(x.natural,x.maximum),[n,this.host.previewProbes.maximum],o>0?[o,this.host.flyoutProbes.maximum]:null)||{previewWidth:n,flyoutWidth:o};n=A.previewWidth,o=A.flyoutWidth,this.host.setWorkspaceWidths(n,o,!0),this.element.requestUpdate(),this.host.previewVisible&&this.host.setPreviewLayoutState(!0,!0),s==="keyboard"&&(this.element.toggleAttribute("data-workspace-keyboard-adjusting",!0),this.deferWorkspaceKeyboardSettlement()),this.element.dispatchEvent(new CustomEvent(D.PAGE_WORKSPACE_RESIZE,{bubbles:!0,composed:!0,detail:{separator:E,source:s,previewWidth:n,flyoutWidth:o}}))}appliedSeparatorInlineDelta(e){if(e.separator==="preview-end"){const i=this.host.allocatedPreviewWidth-e.startPreviewWidth;return i>0?i/e.trailingExpansionScale:i}if(e.separator==="flyout-end"){const i=this.host.allocatedFlyoutWidth-e.startFlyoutWidth;return i>0?i/e.trailingExpansionScale:i}if(e.separator==="main-preview")return e.trailingGroupPushDelta+e.startPreviewWidth-this.host.allocatedPreviewWidth+(e.startFlyoutWidth-this.host.allocatedFlyoutWidth);const r=e.startFlyoutWidth-this.host.allocatedFlyoutWidth;if(!this.host.previewVisible)return e.trailingGroupPushDelta+r;if(this.host.allocatedPreviewWidth<e.startPreviewWidth)return r;const s=Math.max(0,this.host.allocatedPreviewWidth+this.host.allocatedFlyoutWidth-e.startPreviewWidth-e.startFlyoutWidth);return r+s/e.trailingExpansionScale}clearWorkspaceRecenteringState(){this.workspaceRecenteringFrame.cancel(),this.workspaceRecenteringTimer!==null&&(clearTimeout(this.workspaceRecenteringTimer),this.workspaceRecenteringTimer=null),this.element.toggleAttribute("data-workspace-position-held",!1),this.element.style.removeProperty("--_esp-page-resize-leading-gutter-width")}holdWorkspacePosition(){const e=this.geometry.workspaceLogicalGutterWidths().leading;return this.clearWorkspaceRecenteringState(),this.element.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e}px`),this.element.toggleAttribute("data-workspace-position-held",!0),e}trackWorkspaceResizePointer(e){const r=e.startHandleClientX+this.appliedSeparatorInlineDelta(e)*e.direction;for(let s=0;s<3;s+=1){const i=e.target.getBoundingClientRect(),t=i.left+i.width/2,a=(r-t)*e.direction;if(Math.abs(a)<=.25)return;const l=Math.max(0,e.heldLeadingGutterWidth+a);if(Math.abs(l-e.heldLeadingGutterWidth)<=.25)return;e.heldLeadingGutterWidth=l,this.element.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e.heldLeadingGutterWidth}px`)}}seedWorkspaceResizeLeadingGutter(e){if(this.host.align==="start")return!1;const r=this.appliedSeparatorInlineDelta(e);if(r<=0)return!1;let s=0;if(e.separator==="preview-end"||e.separator==="flyout-end")s=this.host.allocatedPreviewWidth-e.startPreviewWidth+this.host.allocatedFlyoutWidth-e.startFlyoutWidth;else if(e.separator==="preview-flyout"&&this.host.previewVisible)s=this.host.allocatedPreviewWidth-e.startPreviewWidth;else{const i=Math.max(0,e.startPreviewWidth-this.host.allocatedPreviewWidth+e.startFlyoutWidth-this.host.allocatedFlyoutWidth),t=this.geometry.probeWidth(this.host.mainMaxWidthProbe),a=this.geometry.mainTrackUnbounded()?Number.POSITIVE_INFINITY:Math.max(0,t-e.startMainWidth);s=Math.min(e.trailingGroupPushDelta+i,a)}return e.heldLeadingGutterWidth=Math.max(0,e.startLeadingGutterWidth+r-s),this.element.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e.heldLeadingGutterWidth}px`),!0}finishWorkspaceRecentering(){this.clearWorkspaceRecenteringState(),this.geometry.syncTrailingWorkspaceResizeAvailability(),this.element.isConnected&&this.scheduleWorkspaceSettlement()}beginWorkspaceRecentering(){const e=this.geometry.workspaceLogicalGutterWidths(),r=e.leading+e.trailing,s=this.host.align==="center"?r/2:this.host.align==="end"?r:0;if(Math.abs(s-e.leading)<=R){this.finishWorkspaceRecentering();return}this.pendingRecenterLeading=s,this.workspaceRecenteringFrame.restart()}applyWorkspaceRecentering(){this.resizeSession||!this.element.hasAttribute("data-workspace-position-held")||(this.element.style.setProperty("--_esp-page-resize-leading-gutter-width",`${this.pendingRecenterLeading}px`),this.workspaceRecenteringTimer=setTimeout(()=>this.finishWorkspaceRecentering(),F+K))}endWorkspaceResize(){const e=this.resizeSession;this.resizeSession=null,this.element.toggleAttribute("data-workspace-resizing",!1),e?.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),e&&this.beginWorkspaceRecentering()}}export{q as WorkspaceResizeSessionController};

package/dist/root/helpers/compute-theme-properties.js

@@ -1 +1 @@
-import{parseCssColor as f,serializeOklch as u,gamutMapToSRGB as m}from"../../shared/color-engine.js";import{generateScaleProperties as y}from"../../shared/scale-engine.js";import{DATA_SERIES_KEYS as b,DEFAULT_DATA_PALETTE as k,generateDivergingRamp as v,generateSequentialRamp as O}from"../../shared/data-colors.js";import{DEFAULT_BODY_FONT_FAMILY as B,DEFAULT_MONOSPACE_FONT_FAMILY as R,resolveDataColorSource as w}from"../../shared/theme.js";import{dataCompanionProperties as E}from"./data-companion-properties.js";import{lightnessRampProperties as I}from"./lightness-ramp-properties.js";import{computeVariants as $}from"./compute-variants.js";import{computeSemanticProperties as M}from"./compute-semantic-properties.js";function T(o){return{rootFontSize:o.rootFontSize,typeRatio:o.typeRatio,spaceRatio:o.spaceRatio,borderRadius:o.borderRadius,viewportMin:o.viewportMin,viewportMax:o.viewportMax}}function x(o,d,g){const i={},a=o.dataPalette??k;for(let t=0;t<b.length;t+=1){const p=b[t],r=f(g(a[p],`dataPalette.${p}`))??d;i[`--esp-color-series-${t+1}`]=u(m(r))}return i}function W(o,d,g){const i=f(o.seedColor);if(!i)return{};const a={};a["--esp-scheme"]=d,a["--esp-seed-color"]=o.seedColor;const t=$(i,o);for(const[e,n]of Object.entries(t))a[`--esp-color-${e}`]=u(m(n));const p=new Set,r=(e,n)=>{const s=typeof e=="string"?w(e,o.anchors):null;if(s)return s;const c=typeof e=="string"?e:String(e);return p.has(c)||(p.add(c),console.warn(`Espalier theme: ${n} color source "${c}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared data colors.`)),o.seedColor};Object.assign(a,x(o,i,r));for(const[e,n]of Object.entries(o.dataRamps??{}))try{(n.type==="sequential"?O(r(n.source,`dataRamps.${e}.source`),{steps:n.steps,lightnessStart:n.lightnessStart,lightnessEnd:n.lightnessEnd}):v(r(n.start,`dataRamps.${e}.start`),r(n.end,`dataRamps.${e}.end`),{steps:n.steps,neutral:n.neutral===void 0?void 0:r(n.neutral,`dataRamps.${e}.neutral`)})).forEach((c,S)=>{a[`--esp-color-ramp-${e}-${S+1}`]=c})}catch(s){console.warn(`Espalier theme: dataRamps.${e} cannot be generated \u2014 ${s instanceof Error?s.message:String(s)}`)}Object.assign(a,I(o));const l=new Set;return Object.assign(a,M(o,t,{trace:g,onUnresolvedSource:e=>{l.has(e)||(l.add(e),console.warn(`Espalier theme: color source "${e}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared anchors.`))}})),Object.assign(a,E(a)),Object.assign(a,y(T(o))),a["--esp-font-body"]=o.fontBody||B,o.fontHeadings&&(a["--esp-font-headings"]=o.fontHeadings),o.fontBrand&&(a["--esp-font-brand"]=o.fontBrand),o.fontMenu&&(a["--esp-font-menu"]=o.fontMenu),a["--esp-font-monospace"]=o.fontMonospace||R,a["--esp-font-weight-body"]=o.fontWeightBody,a["--esp-font-weight-headings"]=o.fontWeightHeadings,a["--esp-font-weight-brand"]=o.fontWeightBrand,a["--esp-font-weight-menu"]=o.fontWeightMenu,a["--esp-font-weight-monospace"]=o.fontWeightMonospace,o.pageBackgroundImage&&(a["--esp-page-background-image"]=o.pageBackgroundImage),o.pageBackgroundImageOpacity!==void 0&&(a["--esp-page-background-image-opacity"]=o.pageBackgroundImageOpacity.toString()),o.boxBackgroundImage&&(a["--esp-box-background-image"]=o.boxBackgroundImage),o.boxBackgroundImageOpacity!==void 0&&(a["--esp-box-background-image-opacity"]=o.boxBackgroundImageOpacity.toString()),o.vellumOpacity!==void 0&&(a["--esp-vellum-opacity"]=o.vellumOpacity.toString()),o.vellumBackgroundImage&&(a["--esp-vellum-background-image"]=o.vellumBackgroundImage),o.vellumBackgroundImageOpacity!==void 0&&(a["--esp-vellum-background-image-opacity"]=o.vellumBackgroundImageOpacity.toString()),a}export{W as computeThemeProperties,x as dataSeriesProperties};
+import{parseCssColor as f,serializeOklch as u,gamutMapToSRGB as m}from"../../shared/color-engine.js";import{generateScaleProperties as y}from"../../shared/scale-engine.js";import{DATA_SERIES_KEYS as b,DEFAULT_DATA_PALETTE as k,generateDivergingRamp as v,generateSequentialRamp as O}from"../../shared/data-colors.js";import{DEFAULT_BODY_FONT_FAMILY as B,DEFAULT_MONOSPACE_FONT_FAMILY as R,resolveDataColorSource as w}from"../../shared/theme.js";import{dataCompanionProperties as E}from"./data-companion-properties.js";import{lightnessRampProperties as I}from"./lightness-ramp-properties.js";import{surfacePolarityProperty as $}from"./surface-polarity-property.js";import{computeVariants as M}from"./compute-variants.js";import{computeSemanticProperties as P}from"./compute-semantic-properties.js";function T(o){return{rootFontSize:o.rootFontSize,typeRatio:o.typeRatio,spaceRatio:o.spaceRatio,borderRadius:o.borderRadius,viewportMin:o.viewportMin,viewportMax:o.viewportMax}}function x(o,d,g){const i={},a=o.dataPalette??k;for(let r=0;r<b.length;r+=1){const p=b[r],t=f(g(a[p],`dataPalette.${p}`))??d;i[`--esp-color-series-${r+1}`]=u(m(t))}return i}function Y(o,d,g){const i=f(o.seedColor);if(!i)return{};const a={};a["--esp-scheme"]=d,a["--esp-seed-color"]=o.seedColor;const r=M(i,o);for(const[e,n]of Object.entries(r))a[`--esp-color-${e}`]=u(m(n));const p=new Set,t=(e,n)=>{const s=typeof e=="string"?w(e,o.anchors):null;if(s)return s;const c=typeof e=="string"?e:String(e);return p.has(c)||(p.add(c),console.warn(`Espalier theme: ${n} color source "${c}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared data colors.`)),o.seedColor};Object.assign(a,x(o,i,t));for(const[e,n]of Object.entries(o.dataRamps??{}))try{(n.type==="sequential"?O(t(n.source,`dataRamps.${e}.source`),{steps:n.steps,lightnessStart:n.lightnessStart,lightnessEnd:n.lightnessEnd}):v(t(n.start,`dataRamps.${e}.start`),t(n.end,`dataRamps.${e}.end`),{steps:n.steps,neutral:n.neutral===void 0?void 0:t(n.neutral,`dataRamps.${e}.neutral`)})).forEach((c,S)=>{a[`--esp-color-ramp-${e}-${S+1}`]=c})}catch(s){console.warn(`Espalier theme: dataRamps.${e} cannot be generated \u2014 ${s instanceof Error?s.message:String(s)}`)}Object.assign(a,I(o));const l=new Set;return Object.assign(a,P(o,r,{trace:g,onUnresolvedSource:e=>{l.has(e)||(l.add(e),console.warn(`Espalier theme: color source "${e}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared anchors.`))}})),Object.assign(a,$(a)),Object.assign(a,E(a)),Object.assign(a,y(T(o))),a["--esp-font-body"]=o.fontBody||B,o.fontHeadings&&(a["--esp-font-headings"]=o.fontHeadings),o.fontBrand&&(a["--esp-font-brand"]=o.fontBrand),o.fontMenu&&(a["--esp-font-menu"]=o.fontMenu),a["--esp-font-monospace"]=o.fontMonospace||R,a["--esp-font-weight-body"]=o.fontWeightBody,a["--esp-font-weight-headings"]=o.fontWeightHeadings,a["--esp-font-weight-brand"]=o.fontWeightBrand,a["--esp-font-weight-menu"]=o.fontWeightMenu,a["--esp-font-weight-monospace"]=o.fontWeightMonospace,o.pageBackgroundImage&&(a["--esp-page-background-image"]=o.pageBackgroundImage),o.pageBackgroundImageOpacity!==void 0&&(a["--esp-page-background-image-opacity"]=o.pageBackgroundImageOpacity.toString()),o.boxBackgroundImage&&(a["--esp-box-background-image"]=o.boxBackgroundImage),o.boxBackgroundImageOpacity!==void 0&&(a["--esp-box-background-image-opacity"]=o.boxBackgroundImageOpacity.toString()),o.vellumOpacity!==void 0&&(a["--esp-vellum-opacity"]=o.vellumOpacity.toString()),o.vellumBackgroundImage&&(a["--esp-vellum-background-image"]=o.vellumBackgroundImage),o.vellumBackgroundImageOpacity!==void 0&&(a["--esp-vellum-background-image-opacity"]=o.vellumBackgroundImageOpacity.toString()),a}export{Y as computeThemeProperties,x as dataSeriesProperties};

package/dist/root/helpers/surface-polarity-property.js

@@ -0,0 +1 @@
+import{parseCssColor as e}from"../../shared/color-engine.js";function c(r){const o=e(r["--esp-color-background"]??""),t=e(r["--esp-color-text"]??"");return!o||!t?{}:{"--_esp-surface-polarity":t.l<o.l?"1":"0"}}export{c as surfacePolarityProperty};