@taprootio/espalier 2.11.0 → 2.12.0

package/dist/flyout/esp-flyout.js

@@ -1,4 +1,4 @@
-var l=function(d,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(d,e,t,r);else for(var i=d.length-1;i>=0;i--)(n=d[i])&&(s=(o<3?n(s):o>3?n(e,t,s):n(e,t))||s);return o>3&&s&&Object.defineProperty(e,t,s),s};import{css as p,html as w,nothing as T}from"lit";import{customElement as O,property as h}from"lit/decorators.js";import{classMap as _}from"lit/directives/class-map.js";import{createRef as F,ref as L}from"lit/directives/ref.js";import{EspalierElementBase as k}from"../shared/esp-element-base.js";import{getEspBus as f}from"../shared/bus-events.js";import{FLYOUT_FULL_HEIGHT_REQUEST_EVENT as A,markFlyoutRequestServiced as M}from"../shared/flyout-events.js";import{OverlayController as q}from"../shared/overlay-controller.js";import{cancelSVG as G}from"../shared/svgs/cancel.js";import{traverseToClosest as v}from"../shared/utilities.js";const B="(max-width: 50em)",H="Flyout",R=p`
+var l=function(d,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(d,e,t,r);else for(var i=d.length-1;i>=0;i--)(n=d[i])&&(s=(o<3?n(s):o>3?n(e,t,s):n(e,t))||s);return o>3&&s&&Object.defineProperty(e,t,s),s};import{css as p,html as w,nothing as T}from"lit";import{customElement as _,property as h}from"lit/decorators.js";import{classMap as O}from"lit/directives/class-map.js";import{createRef as F,ref as L}from"lit/directives/ref.js";import{EspalierElementBase as k}from"../shared/esp-element-base.js";import{getEspBus as f}from"../shared/bus-events.js";import{FLYOUT_FULL_HEIGHT_REQUEST_EVENT as A,markFlyoutRequestServiced as M}from"../shared/flyout-events.js";import{OverlayController as q}from"../shared/overlay-controller.js";import{cancelSVG as G}from"../shared/svgs/cancel.js";import{traverseToClosest as v}from"../shared/utilities.js";const B="(max-width: 50em)",H="Flyout",R=p`
   position: fixed;
   inset: 0;
   margin-block-start: 0;
@@ -34,7 +34,7 @@ var l=function(d,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnP
 `;let a=class extends k{constructor(){super(...arguments),this.open=!1,this.heading="",this.mode="auto",this.pageOverlayRequested=!1,this.fullHeight=!1,this.matchSurface=!1,this.standalone=!1,this.scope="outermost",this.lastGeneratedAriaLabel=null,this.boundKeydown=e=>this.handleKeydown(e),this.boundShowRequest=e=>this.handleShowRequest(e),this.boundCloseRequest=()=>this.close(),this.boundOverlayMediaChange=()=>{this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry(),this.dispatchEvent(new CustomEvent("flyout-state-changed",{detail:{},bubbles:!0,composed:!0}))},this.boundAnchorViewportChange=()=>this.scheduleAnchorGeometrySync(),this.boundFullHeightRequest=e=>{e.stopPropagation(),this.fullHeight=!0},this.anchorPositionRaf=0,this.trackingAnchorPosition=!1,this.busSubscribed=!1,this.panelRef=F(),this.overlay=new q({host:this,getFocusTrapContainer:()=>this.panelRef.value??null,getFocusFallback:()=>this.panelRef.value??null,promote:!1}),this.overlayActive=!1,this.baseRole="complementary"}get effectiveOverlay(){return this.mode==="overlay"||this.pageOverlayRequested||(this.overlayMediaQuery?.matches??!1)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","complementary"),this.baseRole=this.getAttribute("role")??"complementary",!this.overlayMediaQuery&&typeof window<"u"&&"matchMedia"in window&&(this.overlayMediaQuery=window.matchMedia(B)),this.overlayMediaQuery?.addEventListener("change",this.boundOverlayMediaChange),this.syncBusSubscription(),document.addEventListener("keydown",this.boundKeydown),this.addEventListener(A,this.boundFullHeightRequest),this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeBus(),this.overlayMediaQuery?.removeEventListener("change",this.boundOverlayMediaChange),document.removeEventListener("keydown",this.boundKeydown),this.removeEventListener(A,this.boundFullHeightRequest),this.stopAnchorTracking(),this.overlayActive&&(this.overlayActive=!1,this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel()),this.overlayReturnFocusTo=void 0}syncBusSubscription(){if(this.standalone||!this.isConnected){this.unsubscribeBus();return}this.busSubscribed||(f().subscribe("show-flyout",this.boundShowRequest),f().subscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!0)}unsubscribeBus(){this.busSubscribed&&(f().unsubscribe("show-flyout",this.boundShowRequest),f().unsubscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!1)}show(){this.open||(this.open=!0,this.dispatchEvent(new CustomEvent("flyout-opened",{detail:{},bubbles:!0,composed:!0})))}close(e="programmatic"){if(this.open){if(this.open=!1,this.overlayActive)this.overlayReturnFocusTo=this.returnFocusTo;else{const t=this.focusIsInside();this.overlay.close(),t&&this.returnFocusTo?.focus()}this.returnFocusTo=void 0,this.dispatchEvent(new CustomEvent("flyout-closed",{detail:{reason:e},bubbles:!0,composed:!0}))}}toggle(){this.open?this.close():this.show()}handleShowRequest(e){this.shouldHandleShowRequest(e)&&(M(e),e.heading!==void 0&&(this.heading=e.heading),e.content!==void 0&&this.replaceChildren(typeof e.content=="string"?document.createTextNode(e.content):e.content),this.anchor=e.anchor,this.fullHeight=e.fullHeight??!1,this.returnFocusTo=e.returnFocusTo,this.show())}shouldHandleShowRequest(e){const t=v(this,"esp-page"),r=e.anchor??e.returnFocusTo;if(!r){if(!t)return!0;const i=this.getPageChain(t);return this.scope==="outermost"&&i[i.length-1]===t}const o=this.getPageChain(r);if(o.length===0)return t===null;const s=o.find(i=>this.hasNearestScopeFlyout(i)),n=s??o[o.length-1];return t!==n?!1:s?this.scope==="nearest":this.scope==="outermost"}getPageChain(e){const t=[];let r=e;for(;r;){const o=v(r,"esp-page");if(!o||t.includes(o))break;t.push(o),r=this.composedParent(o)}return t}hasNearestScopeFlyout(e){return Array.from(e.querySelectorAll("esp-flyout")).some(t=>!t.standalone&&t.scope==="nearest"&&v(t,"esp-page")===e)}handleKeydown(e){if(this.open){if(this.overlayActive&&e.key==="Tab"){this.overlay.trapFocus(e);return}e.key!=="Escape"||e.defaultPrevented||(e.preventDefault(),this.close("escape"))}}focusIsInside(){const e=document.activeElement;return e&&this.contains(e)?!0:this.shadowRoot?.activeElement!=null}updated(e){super.updated(e),e.has("standalone")&&this.syncBusSubscription(),e.has("heading")&&this.updateGeneratedAriaLabel(),(e.has("anchor")||e.has("fullHeight")||e.has("open")||e.has("mode")||e.has("pageOverlayRequested"))&&(this.syncAnchorTracking(),this.syncAnchorGeometry()),(e.has("open")||e.has("mode")||e.has("pageOverlayRequested"))&&this.syncOverlayModal(),(e.has("open")||e.has("mode")||e.has("anchor")||e.has("pageOverlayRequested"))&&this.dispatchEvent(new CustomEvent("flyout-state-changed",{detail:{},bubbles:!0,composed:!0}))}syncAnchorGeometry(){const e=v(this,"esp-page"),t=this.anchor?this.getPageChain(this.anchor):[],r=e?.shadowRoot?.querySelector(".esp-page-main"),o=this.panelRef.value;if(!this.open||this.effectiveOverlay||!this.anchor||!e||!t.includes(e)||!r||!o){this.clearAnchorGeometry();return}const s=this.anchor.getBoundingClientRect(),n=Math.max(0,s.top-r.getBoundingClientRect().top),i=this.getVisibleBlockBounds(),u=Math.max(0,i.bottom-i.top),c=Number.isFinite(s.height)?s.height:0;this.setGeometryProperty("--_esp-flyout-anchor-offset",`${n}px`),this.setGeometryProperty("--_esp-flyout-max-block-size",`${u}px`),this.setGeometryProperty("--_esp-flyout-anchor-block-size",`${c}px`);const y=o.getBoundingClientRect().height||u,b=Math.max(0,s.top+y-i.bottom),P=Math.max(0,y-c),g=this.fullHeight?b:Math.min(b,P);this.setGeometryProperty("--_esp-flyout-viewport-shift",`${g}px`);const C=s.top-g,m=8,E=s.top+c/2,S=Math.min(Math.max(m,y-m),Math.max(m,E-C));this.setGeometryProperty("--_esp-flyout-anchor-marker-offset",`${S}px`)}getVisibleBlockBounds(){const e=window.visualViewport;let t=e?.offsetTop??0,r=t+(e?.height??window.innerHeight);for(let o=this.composedParent(this);o;o=this.composedParent(o)){const s=getComputedStyle(o).overflowY;if(s!=="auto"&&s!=="scroll")continue;const n=o.getBoundingClientRect(),i=o instanceof HTMLElement?o.clientTop:0,u=o instanceof HTMLElement?o.clientHeight:n.height;if(u<=0)continue;const c=n.top+i;t=Math.max(t,c),r=Math.min(r,c+u)}return{top:t,bottom:Math.max(t,r)}}composedParent(e){if(e.parentElement)return e.parentElement;const t=e.getRootNode();return t instanceof ShadowRoot?t.host:null}setGeometryProperty(e,t){this.style.getPropertyValue(e)!==t&&this.style.setProperty(e,t)}clearAnchorGeometry(){this.style.removeProperty("--_esp-flyout-anchor-offset"),this.style.removeProperty("--_esp-flyout-viewport-shift"),this.style.removeProperty("--_esp-flyout-max-block-size"),this.style.removeProperty("--_esp-flyout-anchor-block-size"),this.style.removeProperty("--_esp-flyout-anchor-marker-offset")}scheduleAnchorGeometrySync(){!this.isConnected||this.anchorPositionRaf||(this.anchorPositionRaf=requestAnimationFrame(()=>{this.anchorPositionRaf=0,this.syncAnchorGeometry()}))}syncAnchorTracking(){if(!(this.isConnected&&this.open&&!!this.anchor&&!this.effectiveOverlay)){this.stopAnchorTracking();return}this.trackingAnchorPosition||(this.trackingAnchorPosition=!0,window.addEventListener("scroll",this.boundAnchorViewportChange,{capture:!0,passive:!0}),window.addEventListener("resize",this.boundAnchorViewportChange,{passive:!0}));const t=this.panelRef.value;t&&t!==this.observedAnchorPanel&&typeof ResizeObserver<"u"&&(this.anchorResizeObserver??=new ResizeObserver(this.boundAnchorViewportChange),this.anchorResizeObserver.disconnect(),this.anchorResizeObserver.observe(t),this.observedAnchorPanel=t)}stopAnchorTracking(){this.trackingAnchorPosition&&(window.removeEventListener("scroll",this.boundAnchorViewportChange,{capture:!0}),window.removeEventListener("resize",this.boundAnchorViewportChange),this.trackingAnchorPosition=!1),this.anchorPositionRaf&&(cancelAnimationFrame(this.anchorPositionRaf),this.anchorPositionRaf=0),this.anchorResizeObserver?.disconnect(),this.observedAnchorPanel=void 0}syncOverlayModal(){const e=this.isConnected&&this.open&&this.effectiveOverlay;if(e===this.overlayActive){!e&&!this.open&&this.overlay.close();return}e?(this.overlayActive=!0,this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.updateGeneratedAriaLabel(),this.overlay.open(),this.updateComplete.then(()=>{this.overlayActive&&this.overlay.moveFocusInto()})):(this.overlayActive=!1,this.overlay.close(),this.overlayReturnFocusTo&&(this.overlayReturnFocusTo.focus(),this.overlayReturnFocusTo=void 0),this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel())}updateGeneratedAriaLabel(){const e=this.getAttribute("aria-label");if(e!==null&&e!==this.lastGeneratedAriaLabel)return;const t=this.heading||(this.overlayActive?H:"");t?(this.setAttribute("aria-label",t),this.lastGeneratedAriaLabel=t):(this.removeAttribute("aria-label"),this.lastGeneratedAriaLabel=null)}render(){return w`
       <div class="vellum" aria-hidden="true" @click=${()=>this.close("vellum")}></div>
       <div
-        class=${_({panel:!0,anchored:!!this.anchor,"full-height":this.fullHeight})}
+        class=${O({panel:!0,anchored:!!this.anchor,"full-height":this.fullHeight})}
         part="panel"
         ${L(this.panelRef)}
       >
@@ -111,7 +111,7 @@ var l=function(d,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnP
           }
 
           > .anchor-terminus {
-            display: block;
+            display: var(--_esp-flyout-preview-anchor-display, none);
             position: absolute;
             z-index: 2;
             inset-block-start: var(--_esp-flyout-anchor-marker-offset, 50%);
@@ -251,4 +251,4 @@ var l=function(d,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnP
           transition: none;
         }
       }
-    `],l([h({type:Boolean,reflect:!0})],a.prototype,"open",void 0),l([h({type:String})],a.prototype,"heading",void 0),l([h({reflect:!0})],a.prototype,"mode",void 0),l([h({type:Boolean,reflect:!0,attribute:"data-page-overlay"})],a.prototype,"pageOverlayRequested",void 0),l([h({attribute:!1})],a.prototype,"anchor",void 0),l([h({type:Boolean,reflect:!0,attribute:"full-height"})],a.prototype,"fullHeight",void 0),l([h({type:Boolean,reflect:!0,attribute:"match-surface"})],a.prototype,"matchSurface",void 0),l([h({type:Boolean,reflect:!0})],a.prototype,"standalone",void 0),l([h({type:String,reflect:!0})],a.prototype,"scope",void 0),a=l([O("esp-flyout")],a);export{a as EspalierFlyout};
+    `],l([h({type:Boolean,reflect:!0})],a.prototype,"open",void 0),l([h({type:String})],a.prototype,"heading",void 0),l([h({reflect:!0})],a.prototype,"mode",void 0),l([h({type:Boolean,reflect:!0,attribute:"data-page-overlay"})],a.prototype,"pageOverlayRequested",void 0),l([h({attribute:!1})],a.prototype,"anchor",void 0),l([h({type:Boolean,reflect:!0,attribute:"full-height"})],a.prototype,"fullHeight",void 0),l([h({type:Boolean,reflect:!0,attribute:"match-surface"})],a.prototype,"matchSurface",void 0),l([h({type:Boolean,reflect:!0})],a.prototype,"standalone",void 0),l([h({type:String,reflect:!0})],a.prototype,"scope",void 0),a=l([_("esp-flyout")],a);export{a as EspalierFlyout};

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

@@ -3,6 +3,23 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
 import { type EspalierDialog } from "../dialog/esp-dialog.js";
 import "../toaster/esp-toaster.js";
 type HeaderPosition = "normal" | "sticky" | "fixed";
+export type PageWorkspaceSeparator = "main-preview" | "preview-flyout" | "main-flyout";
+export type PageWorkspaceResizeSource = "keyboard" | "pointer";
+/** Detail emitted while an `esp-page` workspace separator changes pane sizes. */
+export interface PageWorkspaceResizeDetail {
+    /**
+     * Separator that initiated the resize. The second physical seam reports
+     * `"preview-flyout"` while preview is visible and `"main-flyout"` when it
+     * sits directly between main and help because preview is hidden or closed.
+     */
+    separator: PageWorkspaceSeparator;
+    /** Input modality that initiated the resize. */
+    source: PageWorkspaceResizeSource;
+    /** Currently allocated preview width in CSS pixels, or zero while preview is hidden. */
+    previewWidth: number;
+    /** Currently allocated in-grid flyout/help width in CSS pixels, or zero when closed. */
+    flyoutWidth: number;
+}
 /**
  * Used to lay out standard page structure.
  *
@@ -34,8 +51,12 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  *
  * The authoring workspace is ordered main, preview, then help. Each region
  * negotiates between public minimum and maximum widths; preview grows first,
- * then help. Opt into collapsing a directly paired header/sidebar navigation
- * to its accessible burger/drawer mode when the combined workspace needs it.
+ * then help. Set `workspace-resizable` to expose accessible drag and keyboard
+ * separators on the dotted seams. 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
+ * header/sidebar navigation to its accessible burger/drawer mode when the
+ * combined workspace needs it.
  *
  * @slot sidebar - Contextual navigation placed in the left aside.
  * @slot right - Content to place in the right aside.
@@ -65,6 +86,12 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  * slotted children are constrained to `max-inline-size: 66ch`
  * for optimal reading measure.
  *
+ * @event {CustomEvent<PageWorkspaceResizeDetail>} esp-page-workspace-resize -
+ * Fired while a pointer or keyboard interaction changes a preferred workspace
+ * allocation. `separator` is `"main-preview"`, `"preview-flyout"`, or
+ * `"main-flyout"` (the second seam without a visible preview). Bubbles and
+ * crosses the shadow boundary.
+ *
  * ```html
  * <esp-page class="docs">
  *   <esp-header slot="header">
@@ -172,6 +199,16 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  * to `20rem`.
  * @cssprop --esp-page-flyout-max-width - Maximum help width and overlay drawer
  * cap before the `85vw` viewport cap. Defaults to `30rem`.
+ * @cssprop --esp-page-resize-step - Arrow-key resize step. Defaults to `1rem`.
+ * @cssprop --esp-page-resize-large-step - Shift+Arrow resize step. Defaults to
+ * `4rem`.
+ * @cssprop --esp-page-resize-handle-hit-size - Transparent inline hit target
+ * centered on each dotted seam. Defaults to `2.75rem`.
+ * @cssprop --esp-page-resize-focus-outline - Keyboard-focus line drawn along
+ * the focused seam, spanning the visible dotted edge up to one viewport
+ * height. Defaults to `2px dashed var(--esp-color-link)`.
+ * @cssprop --esp-page-resize-focus-shadow - Glow cast by the focused seam
+ * line, in the line's color. Defaults to `0 0 0.75rem var(--esp-color-link)`.
  * @cssprop --esp-page-preview-width - Legacy fixed-width alias that pins both
  * preview bounds.
  * @cssprop --esp-page-flyout-width - Legacy fixed-width alias that pins both
@@ -189,6 +226,13 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  * @csspart surface - The surface backdrop carrying the edge shadow/border.
  * @csspart preview - The persistent preview complementary landmark.
  * @csspart preview-content - The sticky wrapper around preview content.
+ * @csspart main-preview-resize-handle - Separator between main and preview.
+ * Announces main's width.
+ * @csspart preview-flyout-resize-handle - Separator between preview and
+ * in-grid flyout/help while preview is visible. Announces help's width.
+ * @csspart main-flyout-resize-handle - The same physical seam while preview
+ * is hidden or closed: it then sits between main and in-grid help, sizes
+ * help directly against main, and reports `separator: "main-flyout"`.
  *
  * ```html
  * <style>
@@ -239,16 +283,54 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  * @menuIcon layout
  *
  *
+ * @example Resizable preview
+ * ```html
+ * <style>
+ * .page-preview-resize-demo {
+ *   --esp-page-main-min-width: 100px;
+ *   --esp-page-main-max-width: 100vw;
+ *   --esp-page-preview-min-width: 100px;
+ *   --esp-page-preview-max-width: 100vw;
+ * }
+ *
+ * .page-preview-resize-demo > main,
+ * .page-preview-resize-demo > [slot="preview"] {
+ *   box-sizing: border-box;
+ *   padding: var(--esp-size-padding-page);
+ * }
+ * </style>
+ *
+ * <esp-page
+ *   class="page-preview-resize-demo"
+ *   preview-open
+ *   preview-label="Article preview"
+ *   workspace-resizable
+ * >
+ *   <main>
+ *     <h2>Article editor</h2>
+ *     <p>
+ *       Preview starts at its minimum width. Drag the dotted seam left to
+ *       enlarge it, then resize in either direction. You can also focus the
+ *       seam and use Left/Right Arrow.
+ *     </p>
+ *   </main>
+ *   <article slot="preview">
+ *     <h2>Article preview</h2>
+ *     <p>The selected width stays with this mounted page and adapts when its container changes.</p>
+ *   </article>
+ * </esp-page>
+ * ```
+ *
  * @example Main, preview, and contextual help
  * ```html
  * <style>
  * .page-workspace-demo {
- *   --esp-page-main-min-width: 26rem;
- *   --esp-page-main-max-width: 48rem;
- *   --esp-page-preview-min-width: 18rem;
- *   --esp-page-preview-max-width: 26rem;
- *   --esp-page-flyout-min-width: 18rem;
- *   --esp-page-flyout-max-width: 22rem;
+ *   --esp-page-main-min-width: 100px;
+ *   --esp-page-main-max-width: 100vw;
+ *   --esp-page-preview-min-width: 100px;
+ *   --esp-page-preview-max-width: 100vw;
+ *   --esp-page-flyout-min-width: 100px;
+ *   --esp-page-flyout-max-width: 100vw;
  * }
  *
  * .page-workspace-demo > main,
@@ -267,6 +349,7 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  *   class="page-workspace-demo"
  *   preview-open
  *   preview-label="Rendered page preview"
+ *   workspace-resizable
  * >
  *   <main>
  *     <h2>Page details</h2>
@@ -276,6 +359,7 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  *     <p>
  *       Help is anchored to the title field in this main editor. Its caret and
  *       dotted connector cross the persistent preview without blocking it.
+ *       Both dotted pane seams are resize handles while their panes are in-grid.
  *     </p>
  *     <esp-button id="page-workspace-preview-toggle" label="Toggle preview"></esp-button>
  *     <esp-button id="page-workspace-help-toggle" label="Toggle title help"></esp-button>
@@ -398,6 +482,12 @@ export declare class EspalierPage extends EspalierElementBase {
      * collapse to its burger/drawer presentation when preview needs more room.
      */
     previewCollapseSidebar: boolean;
+    /**
+     * Expose accessible pointer and keyboard separators for the visible
+     * Main → Preview → Flyout/Help workspace seams. Preferred sizes remain on
+     * this mounted instance and are continuously re-clamped by page allocation.
+     */
+    workspaceResizable: boolean;
     /**
      * Whether preview content is currently rendered. Managed by the page's
      * space negotiation; consumers should treat this reflected property as read-only.

package/dist/page/esp-page.js

@@ -1,5 +1,5 @@
-var w=function(P,e,t,i){var a=arguments.length,r=a<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(P,e,t,i);else for(var o=P.length-1;o>=0;o--)(s=P[o])&&(r=(a<3?s(r):a>3?s(e,t,r):s(e,t))||r);return a>3&&r&&Object.defineProperty(e,t,r),r};import{css as B,html as q,nothing as T}from"lit";import{customElement as I,property as m,state as N}from"lit/decorators.js";import{classMap as G}from"lit/directives/class-map.js";import{createRef as y,ref as b}from"lit/directives/ref.js";import{EspalierElementBase as F}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as W}from"./bi-directional-sticky-controller.js";import{getEspBus as D}from"../shared/bus-events.js";import"../toaster/esp-toaster.js";const z='esp-footer, footer, [role~="contentinfo"]',$="(max-width: 50em)",l=1,H=5,U=12,V=48;let v=class extends F{constructor(){super(),this.dialogZone=y(),this.flyoutSlot=y(),this.footerSlot=y(),this.previewSlot=y(),this.previewSpace=y(),this.previewMinWidthProbe=y(),this.previewMaxWidthProbe=y(),this.flyoutMinWidthProbe=y(),this.flyoutMaxWidthProbe=y(),this.mainMinWidthProbe=y(),this.previewObservedWidths=new WeakMap,this.previewSyncRaf=null,this.previewSyncGeneration=0,this.previewSyncTask=Promise.resolve(),this.previewOverlayRecoveryRequested=!1,this.previewHeader=null,this.previewMenu=null,this.previewCollapsedSidebarWidth=0,this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration=0,this.footerWrapperIsLandmark=!0,this.schedulePreviewLayout=(e=!1)=>{if(!this.isConnected||!this.hasUpdated)return;this.previewOverlayRecoveryRequested||=e===!0,this.previewSyncGeneration+=1;const t=this.previewSyncGeneration;this.previewSyncRaf!==null&&cancelAnimationFrame(this.previewSyncRaf),this.previewSyncRaf=requestAnimationFrame(()=>{this.previewSyncRaf=null;const i=this.previewOverlayRecoveryRequested;this.previewOverlayRecoveryRequested=!1,this.previewSyncTask=this.previewSyncTask.then(()=>this.syncPreviewLayout(t,i)).catch(()=>{})})},this.onPreviewMediaChange=()=>this.schedulePreviewLayout(!0),this.onPreviewResize=e=>{e.some(i=>{const a=i.contentRect.width,r=this.previewObservedWidths.get(i.target);return this.previewObservedWidths.set(i.target,a),r===void 0||Math.abs(r-a)>.25})&&this.schedulePreviewLayout(!0)},this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,this.previewOpen=!1,this.previewLabel="Preview",this.previewCollapseSidebar=!1,this.previewVisible=!1,this.previewReclaiming=!1,new W(this,".esp-page-left > .sticky-wrapper"),new W(this,".esp-page-right > .sticky-wrapper"),new W(this,".esp-page-flyout > .sticky-wrapper"),new W(this,".esp-page-preview > .sticky-wrapper",{topOffset:()=>0}),this.addEventListener("flyout-state-changed",e=>this.syncFlyoutState(e))}connectedCallback(){const e=Array.from(this.children).filter(t=>t.getAttribute("slot")==="footer");this.footerWrapperIsLandmark=!e.some(t=>this.footerElementProvidesLandmark(t)),super.connectedCallback(),this.hasUpdated&&queueMicrotask(()=>this.setupPreviewLayoutObserver())}disconnectedCallback(){this.previewResizeObserver?.disconnect(),this.previewResizeObserver=void 0,this.previewMediaQuery?.removeEventListener("change",this.onPreviewMediaChange),this.previewMediaQuery=void 0,this.previewSyncRaf!==null&&(cancelAnimationFrame(this.previewSyncRaf),this.previewSyncRaf=null),this.previewSyncGeneration+=1,this.previewOverlayRecoveryRequested=!1,this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.toggleAttribute("descendant-flyout-overlay-open",!1),this.clearFlyoutOverlayRecovery(),this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),this.setPreviewNavigationCollapse(!1),super.disconnectedCallback()}syncFlyoutState(e){if(e&&e.target?.closest?.("esp-page")!==this){this.syncDescendantFlyoutOverlayState();return}const t=s=>{const o=s;return(typeof o.mode=="string"?o.mode:s.getAttribute("mode"))==="overlay"||o.pageOverlayRequested===!0},i=s=>{const o=s.open;return typeof o=="boolean"?o:s.hasAttribute("open")},a=s=>s.anchor!=null,r=(this.flyoutSlot.value?.assignedElements()??[]).filter(s=>s.tagName==="ESP-FLYOUT");for(const s of r){const o=s,n=typeof o.mode=="string"?o.mode:s.getAttribute("mode");o.pageOverlayRequested&&(!i(s)||n!=="auto")&&(o.pageOverlayRequested=!1)}r.some(s=>s.pageOverlayRequested===!0)||this.clearFlyoutOverlayRecovery(),this.toggleAttribute("flyout-open",r.some(s=>i(s)&&!t(s))),this.toggleAttribute("flyout-overlay-open",r.some(s=>i(s)&&t(s))),this.toggleAttribute("flyout-anchored",r.some(s=>i(s)&&a(s))),this.schedulePreviewLayout()}syncDescendantFlyoutOverlayState(){const e=Array.from(this.querySelectorAll("esp-flyout")).some(t=>{if(t.closest("esp-page")===this)return!1;const i=t,a=typeof i.open=="boolean"?i.open:t.hasAttribute("open"),r=typeof i.mode=="string"?i.mode:t.getAttribute("mode");return a&&(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 a of this.assignedFlyouts()){const r=e&&i.has(a);a.pageOverlayRequested!==r&&(a.pageOverlayRequested=r,t=!0)}return t&&await Promise.all(this.assignedFlyouts().map(a=>a.updateComplete??Promise.resolve())),e||this.clearFlyoutOverlayRecovery(),t}clearFlyoutOverlayRecovery(){this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration+=1}armFlyoutOverlayRecovery(){const e=++this.flyoutOverlayRecoveryGeneration;this.flyoutOverlayRecoveryReady=!1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{e!==this.flyoutOverlayRecoveryGeneration||!this.openAutoFlyouts().some(t=>t.pageOverlayRequested===!0)||(this.flyoutOverlayPromotionWidth=this.visiblePageInlineBounds().width,this.flyoutOverlayRecoveryReady=!0)})})}previewHasContent(){const e=this.previewSlot.value?.assignedNodes({flatten:!0});return e?e.some(t=>t.nodeType===Node.ELEMENT_NODE||(t.textContent?.trim().length??0)>0):Array.from(this.childNodes).some(t=>t instanceof Element&&t.getAttribute("slot")==="preview"&&!t.hasAttribute("hidden"))}getPreviewNavigationPair(){if(!this.previewCollapseSidebar)return null;const e=Array.from(this.children),t=e.find(s=>s.slot==="header"&&s.tagName==="ESP-HEADER"),i=e.find(s=>s.slot==="sidebar"&&s.tagName==="ESP-MENU");if(!t||!i||!i.id)return null;const a=typeof t.drawerTarget=="string"?t.drawerTarget:t.getAttribute("drawer-target")??"",r=typeof i.mode=="string"?i.mode:i.getAttribute("mode");return a!==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,a=this.previewHeader&&this.previewHeader!==t?.header?this.previewHeader:null,r=this.previewMenu&&this.previewMenu!==t?.menu?this.previewMenu:null;if(a&&(a.previewCollapseRequested=!1),r&&(r.previewCollapseRequested=!1),this.previewHeader=t?.header??null,this.previewMenu=t?.menu??null,this.toggleAttribute("data-preview-navigation-collapsed",!1),await a?.updateComplete,await r?.updateComplete,!t)return this.previewCollapsedSidebarWidth=0,!1;const s=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=s,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,this.previewCollapsedSidebarWidth=0,!1)}setPreviewLayoutState(e,t){this.previewVisible=e,this.previewReclaiming=e&&t}setWorkspaceWidths(e,t){this.style.setProperty("--_esp-page-preview-used-width",`${Math.max(0,e)}px`),this.style.setProperty("--_esp-page-flyout-used-width",`${Math.max(0,t)}px`)}visiblePageInlineBounds(){const e=this.getBoundingClientRect();let t=e.left,i=e.right;const a=window.visualViewport,r=a?.offsetLeft??0,s=a?.width??document.documentElement.clientWidth;s>0&&(t=Math.max(t,r),i=Math.min(i,r+s));const o=this.getRootNode();let n=this.parentElement??(o instanceof ShadowRoot?o.host:null);for(;n;){const g=getComputedStyle(n).overflowX;if(["auto","clip","hidden","scroll"].includes(g)){const h=n.getBoundingClientRect();t=Math.max(t,h.left),i=Math.min(i,h.right)}const d=n.getRootNode();n=n.parentElement??(d instanceof ShadowRoot?d.host:null)}return{left:t,right:i,width:Math.max(0,i-t)}}visibleSpaceWidth(){const e=this.previewSpace.value?.getBoundingClientRect();if(!e)return 0;const t=this.visiblePageInlineBounds(),i=Math.max(0,t.left-e.left),a=Math.max(0,e.right-t.right);return Math.max(0,e.width-i-a)}probeWidth(e){return e.value?.getBoundingClientRect().width??0}allocateWorkspaceWidths(e,t,i,a,r,s,o){const n=Math.max(0,e),g=Math.max(0,a),d=Math.max(g,r),h=Math.max(0,s),p=Math.max(h,o);let u=0,f=0;return t&&i?(u=Math.min(d,Math.max(g,n-h)),f=Math.min(p,Math.max(h,n-u))):t?u=Math.min(d,Math.max(g,n)):i&&(f=Math.min(p,Math.max(h,n))),{previewWidth:u,flyoutWidth:f}}previewFitsWithinPage(e,t,i,a,r,s){const o=this.shadowRoot?.querySelector(".esp-page-main"),n=this.shadowRoot?.querySelector(".esp-page-preview"),g=this.shadowRoot?.querySelector(".esp-page-flyout");if(!o||!n||!g)return!1;const d=this.visiblePageInlineBounds(),h=o.getBoundingClientRect(),p=n.getBoundingClientRect(),u=g.getBoundingClientRect(),f=Math.max(t,i),M=Math.max(r,s),O=p.width+l>=t&&p.width<=f+l,R=!a||u.width+l>=r&&u.width<=M+l,x=p.left+l>=d.left&&p.right<=d.right+l&&(!a||u.left+l>=d.left&&u.right<=d.right+l),c=getComputedStyle(this).direction==="rtl"?h.left+l>=p.right&&(!a||p.left+l>=u.right):h.right<=p.left+l&&(!a||p.right<=u.left+l);return h.width+l>=e&&O&&R&&x&&c}flyoutFitsWithinPage(e,t,i){const a=this.shadowRoot?.querySelector(".esp-page-main"),r=this.shadowRoot?.querySelector(".esp-page-flyout");if(!a||!r)return!1;const s=this.visiblePageInlineBounds(),o=a.getBoundingClientRect(),n=r.getBoundingClientRect(),g=Math.max(t,i),d=n.width+l>=t&&n.width<=g+l,h=n.left+l>=s.left&&n.right<=s.right+l,p=getComputedStyle(this).direction==="rtl"?o.left+l>=n.right:o.right<=n.left+l;return o.width+l>=e&&d&&h&&p}workspaceMinimumsCanFit(e,t,i,a,r){const s=this.visiblePageInlineBounds().width;if(s<=0||e<=0||t&&i<=0||a&&r<=0)return!1;const o=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,n=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,d=(t&&this.getPreviewNavigationPair()!==null?0:o)+n+e+(t?i:0)+(a?r:0);return s+l>=d}workspaceGeometrySample(){const e=this.visiblePageInlineBounds(),t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect(),i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect(),a=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect();return[e.left,e.right,e.width,t?.left??0,t?.right??0,t?.width??0,i?.left??0,i?.right??0,i?.width??0,a?.left??0,a?.right??0,a?.width??0]}workspaceGeometryMatches(e,t){return e.length===t.length&&e.every((i,a)=>Math.abs(i-(t[a]??i))<=l)}workspaceCandidateIsMeasurable(e,t){const i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect().width??0,a=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect().width??0;return(!e||i>l)&&(!t||a>l)}async candidateFitsAfterLayoutSettles(e,t,i){if(await this.updateComplete,e!==this.previewSyncGeneration||!this.isConnected)return null;let a=null,r=0;for(let s=0;s<U;s+=1){if(await new Promise(n=>requestAnimationFrame(()=>n())),e!==this.previewSyncGeneration||!this.isConnected)return null;if(t())return!0;if(!i()){a=null,r=0;continue}const o=this.workspaceGeometrySample();if(r=a&&this.workspaceGeometryMatches(a,o)?r+1:1,r>=H)return!1;a=o}return null}async promoteFlyoutIfClipped(e,t,i,a){if(i<=0)return!1;const r=await this.candidateFitsAfterLayoutSettles(e,()=>this.flyoutFitsWithinPage(t,i,a),()=>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)return;let i=!1;const a=this.previewVisible;this.toggleAttribute("data-preview-measuring",!0);try{const r=this.previewOpen&&this.previewHasContent(),s=this.previewMediaQuery?.matches??!1,o=this.hasAttribute("flyout-overlay-open"),n=this.hasAttribute("flyout-open"),g=this.hasAttribute("data-preview-navigation-collapsed")?this.previewCollapsedSidebarWidth:0,d=this.probeWidth(this.previewMinWidthProbe),h=this.probeWidth(this.previewMaxWidthProbe),p=this.probeWidth(this.flyoutMinWidthProbe),u=this.probeWidth(this.flyoutMaxWidthProbe),f=this.probeWidth(this.mainMinWidthProbe),M=this.openAutoFlyouts().some(k=>k.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),M){const k=this.visiblePageInlineBounds().width,E=this.flyoutOverlayPromotionWidth===null||k>=this.flyoutOverlayPromotionWidth+V;!s&&t&&this.flyoutOverlayRecoveryReady&&E&&this.workspaceMinimumsCanFit(f,r,d,!0,p)?await this.setPageFlyoutOverlay(!1):s&&await this.setPageFlyoutOverlay(!1);return}if(this.toggleAttribute("data-preview-navigation-collapsed",!1),await this.updateComplete,e!==this.previewSyncGeneration)return;const O=this.visibleSpaceWidth(),R=Math.max(0,O-g),x=r&&!s&&!o,c=n&&!s;if(f>0&&(!x||d>0)&&(!c||p>0)&&(x||c)&&!this.workspaceMinimumsCanFit(f,x,d,c,p)){c&&await this.promoteFlyoutToOverlay();return}const C=(x?d:0)+(c?p:0);let S=this.allocateWorkspaceWidths(R,x,c,d,h,p,u);if(this.setWorkspaceWidths(S.previewWidth,S.flyoutWidth),!x||d<=0){c&&await this.promoteFlyoutIfClipped(e,f,p,u);return}if(R+l>=C){a||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,!1);const k=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(f,d,h,c,p,u),()=>this.workspaceCandidateIsMeasurable(!0,c));if(k===null)return;if(k){this.toggleAttribute("data-preview-validating",!1);return}this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,c?p:0),c&&await this.promoteFlyoutToOverlay();return}const _=(this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0)+R+l>=f+C;if(i=_?!1:await this.setPreviewNavigationCollapse(this.previewCollapseSidebar),_&&await this.setPreviewNavigationCollapse(!1),e!==this.previewSyncGeneration||(a||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,!0),await this.updateComplete,e!==this.previewSyncGeneration))return;const L=this.visibleSpaceWidth();S=this.allocateWorkspaceWidths(L,!0,c,d,h,p,u),this.setWorkspaceWidths(S.previewWidth,S.flyoutWidth);const A=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(f,d,h,c,p,u),()=>this.workspaceCandidateIsMeasurable(!0,c));if(A===null)return;A?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,c?p: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))}}setupPreviewLayoutObserver(){if(this.isConnected){if(!this.previewMediaQuery&&typeof window.matchMedia=="function"&&(this.previewMediaQuery=window.matchMedia($),this.previewMediaQuery.addEventListener("change",this.onPreviewMediaChange)),!this.previewResizeObserver&&typeof ResizeObserver<"u"){this.previewResizeObserver=new ResizeObserver(this.onPreviewResize),this.previewResizeObserver.observe(this);for(const e of[this.previewMinWidthProbe,this.previewMaxWidthProbe,this.flyoutMinWidthProbe,this.flyoutMaxWidthProbe,this.mainMinWidthProbe])e.value&&this.previewResizeObserver.observe(e.value)}this.schedulePreviewLayout(!0)}}footerElementProvidesLandmark(e){return e.matches(z)||e.querySelector(z)!==null}syncFooterLandmark(){const t=(this.footerSlot.value?.assignedElements({flatten:!0})??[]).some(i=>this.footerElementProvidesLandmark(i));this.footerWrapperIsLandmark=!t}showPreview(){this.previewOpen=!0}closePreview(){this.previewOpen=!1}togglePreview(){this.previewOpen=!this.previewOpen}AddDialog(e){this.dialogZone.value?.appendChild(e)}firstUpdated(e){super.firstUpdated(e),this.syncFlyoutState(),this.setupPreviewLayoutObserver()}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&D().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"}),(e.has("previewOpen")||e.has("previewCollapseSidebar"))&&this.schedulePreviewLayout(!0)}render(){const e=this.fixedMenus||this.headerPosition==="fixed",t=!e&&this.headerPosition==="sticky";return q`
-      <div part="wrapper" class="esp-page ${G({"fixed-menus":e,"fixed-header":e,"sticky-header":t})}">
+var k=function(F,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(F,e,t,i);else for(var o=F.length-1;o>=0;o--)(r=F[o])&&(a=(s<3?r(a):s>3?r(e,t,a):r(e,t))||a);return s>3&&a&&Object.defineProperty(e,t,a),a};import{css as D,html as K,nothing as G}from"lit";import{customElement as j,property as M,state as L}from"lit/decorators.js";import{classMap as V}from"lit/directives/class-map.js";import{createRef as x,ref as R}from"lit/directives/ref.js";import{EspalierElementBase as q}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as _}from"./bi-directional-sticky-controller.js";import{getEspBus as H}from"../shared/bus-events.js";import"../toaster/esp-toaster.js";const I='esp-footer, footer, [role~="contentinfo"]',U="(max-width: 50em)",c=1,Y=5,Q=12,X=48,Z=16,J=64,ee=250;let w=class extends q{constructor(){super(),this.dialogZone=x(),this.flyoutSlot=x(),this.footerSlot=x(),this.previewSlot=x(),this.previewSpace=x(),this.previewMinWidthProbe=x(),this.previewMaxWidthProbe=x(),this.flyoutMinWidthProbe=x(),this.flyoutMaxWidthProbe=x(),this.mainMinWidthProbe=x(),this.mainMaxWidthProbe=x(),this.resizeStepProbe=x(),this.resizeLargeStepProbe=x(),this.previewObservedWidths=new WeakMap,this.previewSyncRaf=null,this.previewSyncGeneration=0,this.previewSyncTask=Promise.resolve(),this.previewOverlayRecoveryRequested=!1,this.previewHeader=null,this.previewMenu=null,this.previewCollapsedSidebarWidth=0,this.previewNavigationCollapseTask=null,this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration=0,this.preferredPreviewWidth=null,this.preferredFlyoutWidth=null,this.resizeSession=null,this.workspaceKeyboardSettlementTimer=null,this.footerWrapperIsLandmark=!0,this.allocatedPreviewWidth=0,this.allocatedFlyoutWidth=0,this.onWorkspaceResizePointerDown=(e,t)=>{if(t.button!==0||!this.separatorIsAvailable(e))return;const i=t.currentTarget,s=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,a=this.renderedWorkspaceWidths();this.endWorkspaceResize(),this.finishWorkspaceKeyboardResize(!1),this.suspendPreviewLayoutForWorkspaceResize(),this.resizeSession={separator:e,pointerId:t.pointerId,target:i,startClientX:t.clientX,startPreviewWidth:a.previewWidth,startFlyoutWidth:a.flyoutWidth,startMainWidth:s,startNavigationAllowance:this.previewNavigationResizeAllowance(),direction:this.workspaceResizeDirection()};try{i.setPointerCapture?.(t.pointerId)}catch{}this.toggleAttribute("data-workspace-resizing",!0),t.preventDefault()},this.onWorkspaceResizePointerMove=e=>{const t=this.resizeSession;!t||t.pointerId!==e.pointerId||(e.preventDefault(),this.applyWorkspaceResize(t.separator,e.clientX-t.startClientX,"pointer",t.startPreviewWidth,t.startFlyoutWidth,t.startMainWidth,t.startNavigationAllowance,t.direction))},this.onWorkspaceResizePointerEnd=e=>{!this.resizeSession||this.resizeSession.pointerId!==e.pointerId||(e.preventDefault(),this.endWorkspaceResize())},this.onWorkspaceResizeBlur=e=>{this.hasAttribute("data-workspace-keyboard-adjusting")&&(e.relatedTarget instanceof Element&&e.relatedTarget.classList.contains("esp-page-workspace-resize-handle")||this.finishWorkspaceKeyboardResize())},this.onWorkspaceResizeKeyDown=(e,t)=>{if(t.key!=="ArrowLeft"&&t.key!=="ArrowRight"||!this.separatorIsAvailable(e))return;t.preventDefault(),this.hasAttribute("data-workspace-keyboard-adjusting")||this.suspendPreviewLayoutForWorkspaceResize();const i=(t.key==="ArrowLeft"?-1:1)*this.resizeStep(t.shiftKey),s=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,a=this.renderedWorkspaceWidths();this.applyWorkspaceResize(e,i,"keyboard",a.previewWidth,a.flyoutWidth,s,this.previewNavigationResizeAllowance(),this.workspaceResizeDirection())},this.schedulePreviewLayout=(e=!1)=>{if(!this.isConnected||!this.hasUpdated||(this.previewOverlayRecoveryRequested||=e===!0,this.resizeSession||this.hasAttribute("data-workspace-keyboard-adjusting")))return;this.previewSyncGeneration+=1;const t=this.previewSyncGeneration;this.previewSyncRaf!==null&&cancelAnimationFrame(this.previewSyncRaf),this.previewSyncRaf=requestAnimationFrame(()=>{this.previewSyncRaf=null;const i=this.previewOverlayRecoveryRequested;this.previewOverlayRecoveryRequested=!1,this.previewSyncTask=this.previewSyncTask.then(()=>this.syncPreviewLayout(t,i)).catch(()=>{})})},this.onPreviewMediaChange=()=>this.schedulePreviewLayout(!0),this.onPreviewResize=e=>{let t=!1;for(const i of e){const s=i.contentRect.width;if(i.target instanceof HTMLElement&&i.target.classList.contains("esp-page-left")){s>c&&!this.hasAttribute("data-preview-navigation-collapsed")&&(this.previewCollapsedSidebarWidth=s);continue}const a=this.previewObservedWidths.get(i.target);this.previewObservedWidths.set(i.target,s),t||=a===void 0||Math.abs(a-s)>.25}t&&this.schedulePreviewLayout(!0)},this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,this.previewOpen=!1,this.previewLabel="Preview",this.previewCollapseSidebar=!1,this.workspaceResizable=!1,this.previewVisible=!1,this.previewReclaiming=!1,new _(this,".esp-page-left > .sticky-wrapper"),new _(this,".esp-page-right > .sticky-wrapper"),new _(this,".esp-page-flyout > .sticky-wrapper"),new _(this,".esp-page-preview > .sticky-wrapper",{topOffset:()=>0}),this.addEventListener("flyout-state-changed",e=>this.syncFlyoutState(e))}connectedCallback(){const e=Array.from(this.children).filter(t=>t.getAttribute("slot")==="footer");this.footerWrapperIsLandmark=!e.some(t=>this.footerElementProvidesLandmark(t)),super.connectedCallback(),this.hasUpdated&&queueMicrotask(()=>this.setupPreviewLayoutObserver())}disconnectedCallback(){this.finishWorkspaceKeyboardResize(!1),this.endWorkspaceResize(),this.previewResizeObserver?.disconnect(),this.previewResizeObserver=void 0,this.previewMediaQuery?.removeEventListener("change",this.onPreviewMediaChange),this.previewMediaQuery=void 0,this.previewSyncRaf!==null&&(cancelAnimationFrame(this.previewSyncRaf),this.previewSyncRaf=null),this.previewSyncGeneration+=1,this.previewOverlayRecoveryRequested=!1,this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.toggleAttribute("data-workspace-keyboard-adjusting",!1),this.toggleAttribute("descendant-flyout-overlay-open",!1),this.clearFlyoutOverlayRecovery(),this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),this.preferredPreviewWidth=null,this.preferredFlyoutWidth=null,this.previewNavigationCollapseTask=null,this.setPreviewNavigationCollapse(!1),super.disconnectedCallback()}syncFlyoutState(e){if(e&&e.target?.closest?.("esp-page")!==this){this.syncDescendantFlyoutOverlayState();return}const t=r=>{const o=r;return(typeof o.mode=="string"?o.mode:r.getAttribute("mode"))==="overlay"||o.pageOverlayRequested===!0},i=r=>{const o=r.open;return typeof o=="boolean"?o:r.hasAttribute("open")},s=r=>r.anchor!=null,a=(this.flyoutSlot.value?.assignedElements()??[]).filter(r=>r.tagName==="ESP-FLYOUT");for(const r of a){const o=r,n=typeof o.mode=="string"?o.mode:r.getAttribute("mode");o.pageOverlayRequested&&(!i(r)||n!=="auto")&&(o.pageOverlayRequested=!1)}a.some(r=>r.pageOverlayRequested===!0)||this.clearFlyoutOverlayRecovery(),this.toggleAttribute("flyout-open",a.some(r=>i(r)&&!t(r))),this.toggleAttribute("flyout-overlay-open",a.some(r=>i(r)&&t(r))),this.toggleAttribute("flyout-anchored",a.some(r=>i(r)&&s(r))),this.resizeSession&&(this.hasAttribute("flyout-overlay-open")||this.resizeSession.separator==="preview-flyout"&&!this.hasAttribute("flyout-open"))&&this.endWorkspaceResize(),this.requestUpdate(),this.schedulePreviewLayout()}syncDescendantFlyoutOverlayState(){const e=Array.from(this.querySelectorAll("esp-flyout")).some(t=>{if(t.closest("esp-page")===this)return!1;const i=t,s=typeof i.open=="boolean"?i.open:t.hasAttribute("open"),a=typeof i.mode=="string"?i.mode:t.getAttribute("mode");return s&&(a==="overlay"||i.pageOverlayRequested===!0||t.getAttribute("aria-modal")==="true")});this.toggleAttribute("descendant-flyout-overlay-open",e)}assignedFlyouts(){return(this.flyoutSlot.value?.assignedElements()??[]).filter(e=>e.tagName==="ESP-FLYOUT")}openAutoFlyouts(){return this.assignedFlyouts().filter(e=>{const t=typeof e.open=="boolean"?e.open:e.hasAttribute("open"),i=typeof e.mode=="string"?e.mode:e.getAttribute("mode");return t&&i!=="overlay"})}async setPageFlyoutOverlay(e){let t=!1;const i=new Set(this.openAutoFlyouts());for(const s of this.assignedFlyouts()){const a=e&&i.has(s);s.pageOverlayRequested!==a&&(s.pageOverlayRequested=a,t=!0)}return t&&await Promise.all(this.assignedFlyouts().map(s=>s.updateComplete??Promise.resolve())),e||this.clearFlyoutOverlayRecovery(),t}clearFlyoutOverlayRecovery(){this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration+=1}armFlyoutOverlayRecovery(){const e=++this.flyoutOverlayRecoveryGeneration;this.flyoutOverlayRecoveryReady=!1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{e!==this.flyoutOverlayRecoveryGeneration||!this.openAutoFlyouts().some(t=>t.pageOverlayRequested===!0)||(this.flyoutOverlayPromotionWidth=this.visiblePageInlineBounds().width,this.flyoutOverlayRecoveryReady=!0)})})}previewHasContent(){const e=this.previewSlot.value?.assignedNodes({flatten:!0});return e?e.some(t=>t.nodeType===Node.ELEMENT_NODE||(t.textContent?.trim().length??0)>0):Array.from(this.childNodes).some(t=>t instanceof Element&&t.getAttribute("slot")==="preview"&&!t.hasAttribute("hidden"))}getPreviewNavigationPair(){if(!this.previewCollapseSidebar)return null;const e=Array.from(this.children),t=e.find(r=>r.slot==="header"&&r.tagName==="ESP-HEADER"),i=e.find(r=>r.slot==="sidebar"&&r.tagName==="ESP-MENU");if(!t||!i||!i.id)return null;const s=typeof t.drawerTarget=="string"?t.drawerTarget:t.getAttribute("drawer-target")??"",a=typeof i.mode=="string"?i.mode:i.getAttribute("mode");return s!==i.id||a!=="vertical"||!("previewCollapseRequested"in t)||!("previewCollapseRequested"in i)?null:{header:t,menu:i}}async setPreviewNavigationCollapse(e){const t=e?this.getPreviewNavigationPair():null,i=t!==null&&this.previewHeader===t.header&&this.previewMenu===t.menu,s=this.previewHeader&&this.previewHeader!==t?.header?this.previewHeader:null,a=this.previewMenu&&this.previewMenu!==t?.menu?this.previewMenu:null;if(s&&(s.previewCollapseRequested=!1),a&&(a.previewCollapseRequested=!1),this.previewHeader=t?.header??null,this.previewMenu=t?.menu??null,this.toggleAttribute("data-preview-navigation-collapsed",!1),await s?.updateComplete,await a?.updateComplete,!t)return!1;const r=i?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0;return t.header.previewCollapseRequested=!0,t.menu.previewCollapseRequested=!0,await t.header.updateComplete,await t.menu.updateComplete,t.menu.hasExternalDrawerControl===!0?(this.previewCollapsedSidebarWidth=r,this.toggleAttribute("data-preview-navigation-collapsed",!0),!0):(t.header.previewCollapseRequested=!1,t.menu.previewCollapseRequested=!1,await t.header.updateComplete,await t.menu.updateComplete,this.previewHeader=null,this.previewMenu=null,!1)}requestPreviewNavigationCollapse(){if(this.hasAttribute("data-preview-navigation-collapsed")||this.previewNavigationCollapseTask)return;const e=this.setPreviewNavigationCollapse(!0);this.previewNavigationCollapseTask=e,e.then(()=>{this.previewNavigationCollapseTask===e&&(this.previewNavigationCollapseTask=null)},()=>{this.previewNavigationCollapseTask===e&&(this.previewNavigationCollapseTask=null)})}scheduleWorkspaceSettlement(e=null){const t=()=>{this.schedulePreviewLayout(),e&&requestAnimationFrame(()=>{this.previewSyncTask.then(()=>{const a=this.shadowRoot?.activeElement,r=this.ownerDocument.activeElement;!this.isConnected||!e.isConnected||a&&a!==e||r!==this&&r!==this.ownerDocument.body||getComputedStyle(e).display!=="none"&&e.focus({preventScroll:!0})})})},i=this.previewNavigationCollapseTask;if(!i){t();return}i.then(()=>t(),()=>t())}clearWorkspaceKeyboardSettlementTimer(){this.workspaceKeyboardSettlementTimer!==null&&(clearTimeout(this.workspaceKeyboardSettlementTimer),this.workspaceKeyboardSettlementTimer=null)}finishWorkspaceKeyboardResize(e=!0){this.clearWorkspaceKeyboardSettlementTimer();const t=this.hasAttribute("data-workspace-keyboard-adjusting");this.toggleAttribute("data-workspace-keyboard-adjusting",!1),t&&e&&!this.resizeSession&&this.scheduleWorkspaceSettlement()}deferWorkspaceKeyboardSettlement(){this.clearWorkspaceKeyboardSettlementTimer(),this.workspaceKeyboardSettlementTimer=setTimeout(()=>{if(this.workspaceKeyboardSettlementTimer=null,!this.hasAttribute("data-workspace-keyboard-adjusting"))return;const e=this.shadowRoot?.activeElement,t=e instanceof HTMLElement&&e.classList.contains("esp-page-workspace-resize-handle")?e:null;this.toggleAttribute("data-workspace-keyboard-adjusting",!1),this.resizeSession||this.scheduleWorkspaceSettlement(t)},ee)}suspendPreviewLayoutForWorkspaceResize(){this.previewSyncRaf!==null&&(cancelAnimationFrame(this.previewSyncRaf),this.previewSyncRaf=null),this.previewSyncGeneration+=1,this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1)}setPreviewLayoutState(e,t){this.previewVisible=e,this.previewReclaiming=e&&t,e||this.endWorkspaceResize()}setWorkspaceWidths(e,t,i=!1){const s=Math.max(0,e),a=Math.max(0,t);this.style.setProperty("--_esp-page-preview-used-width",`${s}px`),this.style.setProperty("--_esp-page-flyout-used-width",`${a}px`),this.toggleAttribute("data-workspace-preferred",i),this.allocatedPreviewWidth=s,this.allocatedFlyoutWidth=a}clampWidth(e,t,i){return Math.min(Math.max(e,t),Math.max(t,i))}workspaceUsesPreference(e,t){return e&&this.preferredPreviewWidth!==null||t&&this.preferredFlyoutWidth!==null}preferredWorkspaceWidth(e,t,i,s,a,r){const o=e?this.clampWidth(this.preferredPreviewWidth??i,Math.max(0,i),Math.max(i,s)):0,n=t?this.clampWidth(this.preferredFlyoutWidth??a,Math.max(0,a),Math.max(a,r)):0;return o+n}visiblePageInlineBounds(){const e=this.getBoundingClientRect();let t=e.left,i=e.right;const s=window.visualViewport,a=s?.offsetLeft??0,r=s?.width??document.documentElement.clientWidth;r>0&&(t=Math.max(t,a),i=Math.min(i,a+r));const o=this.getRootNode();let n=this.parentElement??(o instanceof ShadowRoot?o.host:null);for(;n;){const v=getComputedStyle(n).overflowX;if(["auto","clip","hidden","scroll"].includes(v)){const d=n.getBoundingClientRect();t=Math.max(t,d.left),i=Math.min(i,d.right)}const p=n.getRootNode();n=n.parentElement??(p instanceof ShadowRoot?p.host:null)}return{left:t,right:i,width:Math.max(0,i-t)}}visibleSpaceWidth(){const e=this.previewSpace.value?.getBoundingClientRect();if(!e)return 0;const t=this.visiblePageInlineBounds(),i=Math.max(0,t.left-e.left),s=Math.max(0,e.right-t.right);return Math.max(0,e.width-i-s)}probeWidth(e){return e.value?.getBoundingClientRect().width??0}allocateWorkspaceWidths(e,t,i,s,a,r,o){const n=Math.max(0,e),v=Math.max(0,s),p=Math.max(v,a),d=Math.max(0,r),l=Math.max(d,o);let h=0,u=0;t&&i?(h=Math.min(p,Math.max(v,n-d)),u=Math.min(l,Math.max(d,n-h))):t?h=Math.min(p,Math.max(v,n)):i&&(u=Math.min(l,Math.max(d,n))),t&&this.preferredPreviewWidth!==null&&(h=this.clampWidth(this.preferredPreviewWidth,v,p),i&&this.preferredFlyoutWidth===null&&(u=this.clampWidth(n-h,d,l))),i&&this.preferredFlyoutWidth!==null&&(u=this.clampWidth(this.preferredFlyoutWidth,d,l),t&&this.preferredPreviewWidth===null&&(h=this.clampWidth(n-u,v,p)));let g=h+u-n;if(g>0&&i){const b=Math.min(g,Math.max(0,u-d));u-=b,g-=b}return g>0&&t&&(h-=Math.min(g,Math.max(0,h-v))),{previewWidth:h,flyoutWidth:u}}workspaceResizeDirection(){return getComputedStyle(this).direction==="rtl"?-1:1}resizeStep(e){const t=this.probeWidth(e?this.resizeLargeStepProbe:this.resizeStepProbe);return t>0?t:e?J:Z}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>c&&(this.previewCollapsedSidebarWidth=e),e>c?e:this.previewCollapsedSidebarWidth}renderedWorkspaceWidths(){const e=this.shadowRoot?.querySelector(".esp-page-preview"),t=this.shadowRoot?.querySelector(".esp-page-flyout");return{previewWidth:this.allocatedPreviewWidth>0?this.allocatedPreviewWidth:e?.getBoundingClientRect().width??0,flyoutWidth:this.allocatedFlyoutWidth>0?this.allocatedFlyoutWidth:t?.getBoundingClientRect().width??0}}mainPreviewResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,i=this.previewNavigationResizeAllowance()){const s=Math.max(0,this.probeWidth(this.previewMinWidthProbe)),a=Math.max(s,this.probeWidth(this.previewMaxWidthProbe)),r=Math.max(0,this.probeWidth(this.mainMinWidthProbe)),o=this.probeWidth(this.mainMaxWidthProbe),n=Math.max(0,t+e),v=o>0?Math.max(0,n-o):0,p=Math.max(s,v),d=Math.max(0,n+i-r);return{minimum:p,maximum:Math.max(p,Math.min(a,d))}}previewFlyoutResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.renderedWorkspaceWidths().flyoutWidth){const i=Math.max(0,this.probeWidth(this.previewMinWidthProbe)),s=Math.max(i,this.probeWidth(this.previewMaxWidthProbe)),a=Math.max(0,this.probeWidth(this.flyoutMinWidthProbe)),r=Math.max(a,this.probeWidth(this.flyoutMaxWidthProbe)),o=e+t;return{minimum:Math.max(i,o-r),maximum:Math.max(i,Math.min(s,o-a))}}separatorIsAvailable(e){return!this.workspaceResizable||this.hasAttribute("flyout-overlay-open")?!1:e==="main-preview"?this.previewVisible:this.hasAttribute("flyout-open")}flyoutOnlyResizeRange(e=this.renderedWorkspaceWidths().flyoutWidth,t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0){const i=Math.max(0,this.probeWidth(this.flyoutMinWidthProbe)),s=Math.max(i,this.probeWidth(this.flyoutMaxWidthProbe)),a=Math.max(0,this.probeWidth(this.mainMinWidthProbe)),r=this.probeWidth(this.mainMaxWidthProbe),o=Math.max(0,t+e),n=r>0?Math.max(0,o-r):0,v=Math.max(i,n);return{minimum:v,maximum:Math.max(v,Math.min(s,o-a))}}applyWorkspaceResize(e,t,i,s,a,r,o,n){if(!this.separatorIsAvailable(e))return;const v=t*n;let p=e,d=s,l=a;if(e==="main-preview"){const h=this.mainPreviewResizeRange(s,r,o),u=s-v;d=this.clampWidth(u,h.minimum,h.maximum),this.preferredPreviewWidth=d;const g=Math.max(0,this.probeWidth(this.mainMinWidthProbe));o>0&&d>Math.max(0,r+s-g)+c&&this.requestPreviewNavigationCollapse();const b=Math.max(0,this.probeWidth(this.previewMinWidthProbe)),W=Math.max(0,b-u),y=h.minimum<=b+c;if(W>0&&y&&a>0){const m=Math.max(0,this.probeWidth(this.flyoutMinWidthProbe)),f=Math.max(m,this.probeWidth(this.flyoutMaxWidthProbe));l=this.clampWidth(a-W,m,f),this.preferredFlyoutWidth=l}else a>0&&(this.preferredFlyoutWidth??=a)}else if(this.previewVisible){const h=this.previewFlyoutResizeRange(s,a),u=s+v;d=this.clampWidth(u,h.minimum,h.maximum),l=s+a-d,this.preferredPreviewWidth=d;const g=Math.max(0,this.probeWidth(this.previewMinWidthProbe)),b=Math.max(0,g-u),W=h.minimum<=g+c;if(b>0&&W){const y=Math.max(0,this.probeWidth(this.flyoutMinWidthProbe)),m=Math.max(y,this.probeWidth(this.flyoutMaxWidthProbe)),f=Math.max(0,this.probeWidth(this.mainMinWidthProbe)),S=Math.max(0,r-f);l=this.clampWidth(l+Math.min(b,S),y,m)}this.preferredFlyoutWidth=l}else{p="main-flyout";const h=this.flyoutOnlyResizeRange(a,r);l=this.clampWidth(a-v,h.minimum,h.maximum),d=0,this.preferredFlyoutWidth=l}this.setWorkspaceWidths(d,l,!0),this.previewVisible&&this.setPreviewLayoutState(!0,!0),i==="keyboard"&&(this.toggleAttribute("data-workspace-keyboard-adjusting",!0),this.deferWorkspaceKeyboardSettlement()),this.dispatchEvent(new CustomEvent("esp-page-workspace-resize",{bubbles:!0,composed:!0,detail:{separator:p,source:i,previewWidth:d,flyoutWidth:l}}))}endWorkspaceResize(){const e=this.resizeSession;this.resizeSession=null,this.toggleAttribute("data-workspace-resizing",!1),e?.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),e&&this.scheduleWorkspaceSettlement()}previewFitsWithinPage(e,t,i,s,a,r){const o=this.shadowRoot?.querySelector(".esp-page-main"),n=this.shadowRoot?.querySelector(".esp-page-preview"),v=this.shadowRoot?.querySelector(".esp-page-flyout");if(!o||!n||!v)return!1;const p=this.visiblePageInlineBounds(),d=o.getBoundingClientRect(),l=n.getBoundingClientRect(),h=v.getBoundingClientRect(),u=Math.max(t,i),g=Math.max(a,r),b=l.width+c>=t&&l.width<=u+c,W=!s||h.width+c>=a&&h.width<=g+c,y=l.left+c>=p.left&&l.right<=p.right+c&&(!s||h.left+c>=p.left&&h.right<=p.right+c),m=getComputedStyle(this).direction==="rtl"?d.left+c>=l.right&&(!s||l.left+c>=h.right):d.right<=l.left+c&&(!s||l.right<=h.left+c);return d.width+c>=e&&b&&W&&y&&m}flyoutFitsWithinPage(e,t,i){const s=this.shadowRoot?.querySelector(".esp-page-main"),a=this.shadowRoot?.querySelector(".esp-page-flyout");if(!s||!a)return!1;const r=this.visiblePageInlineBounds(),o=s.getBoundingClientRect(),n=a.getBoundingClientRect(),v=Math.max(t,i),p=n.width+c>=t&&n.width<=v+c,d=n.left+c>=r.left&&n.right<=r.right+c,l=getComputedStyle(this).direction==="rtl"?o.left+c>=n.right:o.right<=n.left+c;return o.width+c>=e&&p&&d&&l}workspaceMinimumsCanFit(e,t,i,s,a){const r=this.visiblePageInlineBounds().width;if(r<=0||e<=0||t&&i<=0||s&&a<=0)return!1;const o=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,n=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,p=(t&&this.getPreviewNavigationPair()!==null?0:o)+n+e+(t?i:0)+(s?a:0);return r+c>=p}preferredWorkspaceFitsWithNavigation(e,t,i){const s=this.visiblePageInlineBounds().width,a=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,r=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,o=a+i+r+e+t;return s+c>=o}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))<=c)}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>c)&&(!t||s>c)}async candidateFitsAfterLayoutSettles(e,t,i){if(await this.updateComplete,e!==this.previewSyncGeneration||!this.isConnected)return null;let s=null,a=0;for(let r=0;r<Q;r+=1){if(await new Promise(n=>requestAnimationFrame(()=>n())),e!==this.previewSyncGeneration||!this.isConnected)return null;if(t())return!0;if(!i()){s=null,a=0;continue}const o=this.workspaceGeometrySample();if(a=s&&this.workspaceGeometryMatches(s,o)?a+1:1,a>=Y)return!1;s=o}return null}async promoteFlyoutIfClipped(e,t,i,s){if(i<=0)return!1;const a=await this.candidateFitsAfterLayoutSettles(e,()=>this.flyoutFitsWithinPage(t,i,s),()=>this.workspaceCandidateIsMeasurable(!1,!0));return a===null?!0:a?!1:(await this.promoteFlyoutToOverlay(),!0)}async promoteFlyoutToOverlay(){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),this.flyoutOverlayPromotionWidth===null&&(this.flyoutOverlayPromotionWidth=this.visiblePageInlineBounds().width,this.armFlyoutOverlayRecovery()),await this.setPageFlyoutOverlay(!0)}async syncPreviewLayout(e,t=!0){if(e!==this.previewSyncGeneration||!this.isConnected||this.resizeSession||this.hasAttribute("data-workspace-keyboard-adjusting"))return;let i=!1;const s=this.previewVisible;this.toggleAttribute("data-preview-measuring",!0);try{const a=this.previewOpen&&this.previewHasContent(),r=this.previewMediaQuery?.matches??!1,o=this.hasAttribute("flyout-overlay-open"),n=this.hasAttribute("flyout-open"),v=this.hasAttribute("data-preview-navigation-collapsed")?this.previewCollapsedSidebarWidth:0,p=this.probeWidth(this.previewMinWidthProbe),d=this.probeWidth(this.previewMaxWidthProbe),l=this.probeWidth(this.flyoutMinWidthProbe),h=this.probeWidth(this.flyoutMaxWidthProbe),u=this.probeWidth(this.mainMinWidthProbe),g=this.openAutoFlyouts().some(P=>P.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),g){const P=this.visiblePageInlineBounds().width,A=this.flyoutOverlayPromotionWidth===null||P>=this.flyoutOverlayPromotionWidth+X;!r&&t&&this.flyoutOverlayRecoveryReady&&A&&this.workspaceMinimumsCanFit(u,a,p,!0,l)?await this.setPageFlyoutOverlay(!1):r&&await this.setPageFlyoutOverlay(!1);return}if(this.toggleAttribute("data-preview-navigation-collapsed",!1),await this.updateComplete,e!==this.previewSyncGeneration)return;const b=this.visibleSpaceWidth(),W=Math.max(0,b-v),y=a&&!r&&!o,m=n&&!r;if(u>0&&(!y||p>0)&&(!m||l>0)&&(y||m)&&!this.workspaceMinimumsCanFit(u,y,p,m,l)){m&&await this.promoteFlyoutToOverlay();return}const S=(y?p:0)+(m?l:0),C=this.workspaceUsesPreference(y,m),O=this.preferredWorkspaceWidth(y,m,p,d,l,h),E=C?Math.max(S,O):S;let z=this.allocateWorkspaceWidths(W,y,m,p,d,l,h);if(this.setWorkspaceWidths(z.previewWidth,z.flyoutWidth,C),!y||p<=0){if(m){if(C){const P=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,A=Math.max(l,P+W-u);z=this.allocateWorkspaceWidths(A,!1,!0,p,d,l,h),this.setWorkspaceWidths(0,z.flyoutWidth,!0),await this.updateComplete}await this.promoteFlyoutIfClipped(e,u,l,h)}return}if(W+c>=E){s||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,!1);const P=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(u,p,d,m,l,h),()=>this.workspaceCandidateIsMeasurable(!0,m));if(P===null)return;if(P){this.toggleAttribute("data-preview-validating",!1);return}this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,m?l:0),m&&await this.promoteFlyoutToOverlay();return}const N=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,T=C?this.preferredWorkspaceFitsWithNavigation(u,E,v):N+W+c>=u+E;if(i=T?!1:await this.setPreviewNavigationCollapse(this.previewCollapseSidebar),T&&await this.setPreviewNavigationCollapse(!1),e!==this.previewSyncGeneration)return;if(C){const P=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,A=Math.max(S,P+this.visibleSpaceWidth()-u);z=this.allocateWorkspaceWidths(A,!0,m,p,d,l,h),this.setWorkspaceWidths(z.previewWidth,z.flyoutWidth,!0)}if(s||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,!0),await this.updateComplete,e!==this.previewSyncGeneration)return;const $=this.visibleSpaceWidth();z=this.allocateWorkspaceWidths($,!0,m,p,d,l,h),this.setWorkspaceWidths(z.previewWidth,z.flyoutWidth,C);const B=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(u,p,d,m,l,h),()=>this.workspaceCandidateIsMeasurable(!0,m));if(B===null)return;B?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,m?l:0),i=!1,m&&await this.promoteFlyoutToOverlay())}finally{e===this.previewSyncGeneration&&!i&&await this.setPreviewNavigationCollapse(!1),e===this.previewSyncGeneration&&(this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.requestUpdate())}}setupPreviewLayoutObserver(){if(this.isConnected){if(!this.previewMediaQuery&&typeof window.matchMedia=="function"&&(this.previewMediaQuery=window.matchMedia(U),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.previewMaxWidthProbe,this.flyoutMinWidthProbe,this.flyoutMaxWidthProbe,this.mainMinWidthProbe,this.resizeStepProbe,this.resizeLargeStepProbe])t.value&&this.previewResizeObserver.observe(t.value)}this.schedulePreviewLayout(!0)}}footerElementProvidesLandmark(e){return e.matches(I)||e.querySelector(I)!==null}syncFooterLandmark(){const t=(this.footerSlot.value?.assignedElements({flatten:!0})??[]).some(i=>this.footerElementProvidesLandmark(i));this.footerWrapperIsLandmark=!t}showPreview(){this.previewOpen=!0}closePreview(){this.previewOpen=!1}togglePreview(){this.previewOpen=!this.previewOpen}AddDialog(e){this.dialogZone.value?.appendChild(e)}firstUpdated(e){super.firstUpdated(e),this.syncFlyoutState(),this.setupPreviewLayoutObserver()}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&H().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"}),(e.has("previewOpen")||e.has("previewCollapseSidebar"))&&this.schedulePreviewLayout(!0),e.has("workspaceResizable")&&!this.workspaceResizable&&(this.finishWorkspaceKeyboardResize(),this.endWorkspaceResize())}render(){const e=this.fixedMenus||this.headerPosition==="fixed",t=!e&&this.headerPosition==="sticky",i=this.mainPreviewResizeRange(),s=Math.max(0,this.probeWidth(this.previewMinWidthProbe)),a=Math.max(0,this.probeWidth(this.flyoutMinWidthProbe)),r=Math.max(a,this.probeWidth(this.flyoutMaxWidthProbe)),o=Math.max(0,this.probeWidth(this.mainMinWidthProbe)),n=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,v=this.hasAttribute("flyout-open"),p=n+this.allocatedPreviewWidth,d=i.minimum<=s+c,l=v&&d?Math.max(0,this.allocatedFlyoutWidth-a):0,h=Math.max(o,p-i.maximum),u=Math.max(h,Math.max(o,p-i.minimum)+l);let g,b;if(this.previewVisible){const f=this.previewFlyoutResizeRange(),S=this.allocatedPreviewWidth+this.allocatedFlyoutWidth,O=f.minimum<=s+c?Math.max(0,n-o):0;g=Math.max(a,S-f.maximum),b=Math.max(g,Math.min(r,S-f.minimum+O))}else{const f=this.flyoutOnlyResizeRange();g=f.minimum,b=f.maximum}const W=this.previewVisible?"preview-flyout-resize-handle":"main-flyout-resize-handle",y=this.previewVisible?"Resize preview and help panes":"Resize help pane";return K`
+      <div part="wrapper" class="esp-page ${V({"fixed-menus":e,"fixed-header":e,"sticky-header":t})}">
         <div part="canvas" class="esp-page-canvas esp-page-canvas--left" aria-hidden="true"></div>
         <div part="canvas" class="esp-page-canvas esp-page-canvas--right" aria-hidden="true"></div>
         <div part="surface" class="esp-page-surface" aria-hidden="true"></div>
@@ -23,7 +23,7 @@ var w=function(P,e,t,i){var a=arguments.length,r=a<3?e:i===null?i=Object.getOwnP
           <div class="sticky-wrapper">
             <slot
               name="flyout"
-              ${b(this.flyoutSlot)}
+              ${R(this.flyoutSlot)}
               @slotchange=${()=>this.syncFlyoutState()}
             ></slot>
           </div>
@@ -31,46 +31,99 @@ var w=function(P,e,t,i){var a=arguments.length,r=a<3?e:i===null?i=Object.getOwnP
         <div
           class="esp-page-preview-width-probe esp-page-preview-min-width-probe"
           aria-hidden="true"
-          ${b(this.previewMinWidthProbe)}
+          ${R(this.previewMinWidthProbe)}
         ></div>
         <div
           class="esp-page-preview-max-width-probe"
           aria-hidden="true"
-          ${b(this.previewMaxWidthProbe)}
+          ${R(this.previewMaxWidthProbe)}
         ></div>
         <div
           class="esp-page-flyout-min-width-probe"
           aria-hidden="true"
-          ${b(this.flyoutMinWidthProbe)}
+          ${R(this.flyoutMinWidthProbe)}
         ></div>
         <div
           class="esp-page-flyout-max-width-probe"
           aria-hidden="true"
-          ${b(this.flyoutMaxWidthProbe)}
+          ${R(this.flyoutMaxWidthProbe)}
         ></div>
         <div
           class="esp-page-preview-main-min-probe esp-page-main-min-width-probe"
           aria-hidden="true"
-          ${b(this.mainMinWidthProbe)}
+          ${R(this.mainMinWidthProbe)}
         ></div>
-        <div class="esp-page-preview-space" ${b(this.previewSpace)}>
+        <div
+          class="esp-page-main-max-width-probe"
+          aria-hidden="true"
+          ${R(this.mainMaxWidthProbe)}
+        ></div>
+        <div
+          class="esp-page-resize-step-probe"
+          aria-hidden="true"
+          ${R(this.resizeStepProbe)}
+        ></div>
+        <div
+          class="esp-page-resize-large-step-probe"
+          aria-hidden="true"
+          ${R(this.resizeLargeStepProbe)}
+        ></div>
+        <div class="esp-page-preview-space" ${R(this.previewSpace)}>
           <aside part="preview" class="esp-page-preview" aria-label=${this.previewLabel}>
             <div part="preview-content" class="sticky-wrapper">
               <slot
                 name="preview"
-                ${b(this.previewSlot)}
+                ${R(this.previewSlot)}
                 @slotchange=${this.schedulePreviewLayout}
               ></slot>
             </div>
           </aside>
         </div>
-        <div class="esp-page-footer" role=${this.footerWrapperIsLandmark?"contentinfo":T}>
-          <slot name="footer" ${b(this.footerSlot)} @slotchange=${this.syncFooterLandmark}></slot>
+        <div class="esp-page-workspace-resize-handles">
+          <div
+            part="main-preview-resize-handle"
+            class="esp-page-workspace-resize-handle esp-page-main-preview-resize-handle"
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize main pane"
+            aria-valuemin=${Math.round(h)}
+            aria-valuemax=${Math.round(u)}
+            aria-valuenow=${Math.round(n)}
+            tabindex="0"
+            @pointerdown=${f=>this.onWorkspaceResizePointerDown("main-preview",f)}
+            @pointermove=${this.onWorkspaceResizePointerMove}
+            @pointerup=${this.onWorkspaceResizePointerEnd}
+            @pointercancel=${this.onWorkspaceResizePointerEnd}
+            @lostpointercapture=${this.onWorkspaceResizePointerEnd}
+            @keydown=${f=>this.onWorkspaceResizeKeyDown("main-preview",f)}
+            @blur=${this.onWorkspaceResizeBlur}
+          ></div>
+          <div
+            part=${W}
+            class="esp-page-workspace-resize-handle esp-page-preview-flyout-resize-handle"
+            role="separator"
+            aria-orientation="vertical"
+            aria-label=${y}
+            aria-valuemin=${Math.round(g)}
+            aria-valuemax=${Math.round(b)}
+            aria-valuenow=${Math.round(this.allocatedFlyoutWidth)}
+            tabindex="0"
+            @pointerdown=${f=>this.onWorkspaceResizePointerDown("preview-flyout",f)}
+            @pointermove=${this.onWorkspaceResizePointerMove}
+            @pointerup=${this.onWorkspaceResizePointerEnd}
+            @pointercancel=${this.onWorkspaceResizePointerEnd}
+            @lostpointercapture=${this.onWorkspaceResizePointerEnd}
+            @keydown=${f=>this.onWorkspaceResizeKeyDown("preview-flyout",f)}
+            @blur=${this.onWorkspaceResizeBlur}
+          ></div>
+        </div>
+        <div class="esp-page-footer" role=${this.footerWrapperIsLandmark?"contentinfo":G}>
+          <slot name="footer" ${R(this.footerSlot)} @slotchange=${this.syncFooterLandmark}></slot>
         </div>
-        <div id="dialog-drop-zone" ${b(this.dialogZone)}></div>
+        <div id="dialog-drop-zone" ${R(this.dialogZone)}></div>
         <esp-toaster></esp-toaster>
       </div>
-    `}};v.styles=[...F.styles,B`
+    `}};w.styles=[...q.styles,D`
       :host {
         --_esp-page-resolved-max-width: var(
           --esp-page-main-max-width,
@@ -161,6 +214,15 @@ var w=function(P,e,t,i){var a=arguments.length,r=a<3?e:i===null?i=Object.getOwnP
         --_esp-page-preview-min: var(--_esp-page-preview-resolved-min-width);
       }
 
+      
+      :host([flyout-open][data-workspace-preferred]) {
+        --_esp-page-flyout-min: var(--_esp-page-flyout-used-width);
+      }
+
+      :host([preview-reclaiming][data-workspace-preferred]) {
+        --_esp-page-preview-min: var(--_esp-page-preview-used-width);
+      }
+
       :host([flyout-open]),
       :host([preview-reclaiming]) {
         --_esp-page-main-track: minmax(
@@ -194,7 +256,8 @@ var w=function(P,e,t,i){var a=arguments.length,r=a<3?e:i===null?i=Object.getOwnP
           --_esp-page-main-track: 1fr;
         }
 
-        .esp-page > .esp-page-preview-space {
+        .esp-page > .esp-page-preview-space,
+        .esp-page > .esp-page-workspace-resize-handles {
           display: none;
         }
       }
@@ -222,7 +285,13 @@ var w=function(P,e,t,i){var a=arguments.length,r=a<3?e:i===null?i=Object.getOwnP
 
       slot[name="flyout"]::slotted(esp-flyout) {
         --_esp-flyout-used-width: var(--_esp-page-flyout-used-width);
+        --_esp-flyout-preview-bridge-width: 0px;
+        --_esp-flyout-preview-anchor-display: none;
+      }
+
+      :host([preview-visible]) slot[name="flyout"]::slotted(esp-flyout) {
         --_esp-flyout-preview-bridge-width: var(--_esp-page-preview-used-width);
+        --_esp-flyout-preview-anchor-display: block;
       }
 
       
@@ -299,6 +368,28 @@ var w=function(P,e,t,i){var a=arguments.length,r=a<3?e:i===null?i=Object.getOwnP
         display: block;
       }
 
+      :host([workspace-resizable][preview-visible]:not([flyout-overlay-open]))
+        .esp-page
+        > div.esp-page-workspace-resize-handles
+        > .esp-page-main-preview-resize-handle,
+      :host([workspace-resizable][flyout-open]:not([flyout-overlay-open]))
+        .esp-page
+        > div.esp-page-workspace-resize-handles
+        > .esp-page-preview-flyout-resize-handle {
+        display: block;
+      }
+
+      :host([data-workspace-resizing]) {
+        cursor: col-resize;
+        user-select: none;
+      }
+
+      
+      :host([data-workspace-resizing]) .esp-page,
+      :host([data-workspace-keyboard-adjusting]) .esp-page {
+        transition: none;
+      }
+
       
       :host([data-preview-navigation-collapsed]) .esp-page > aside.esp-page-left {
         inline-size: 0;
@@ -439,11 +530,71 @@ var w=function(P,e,t,i){var a=arguments.length,r=a<3?e:i===null?i=Object.getOwnP
         }
 
         
+        > div.esp-page-workspace-resize-handles {
+          grid-column: flyout;
+          grid-row: top-start / footer-end;
+          z-index: calc(var(--esp-page-header-z-index, 20) + 3);
+          position: relative;
+          min-inline-size: 0;
+          pointer-events: none;
+        }
+
+        > div.esp-page-workspace-resize-handles > .esp-page-workspace-resize-handle {
+          display: none;
+          box-sizing: border-box;
+          position: absolute;
+          inset-block: 0;
+          z-index: 3;
+          inline-size: var(--esp-page-resize-handle-hit-size, 2.75rem);
+          margin-inline-start: calc(-0.5 * var(--esp-page-resize-handle-hit-size, 2.75rem));
+          border: 0;
+          outline: 0;
+          background: transparent;
+          cursor: col-resize;
+          pointer-events: auto;
+          touch-action: none;
+
+          
+          &::after {
+            content: "";
+            display: block;
+            position: sticky;
+            inset-block-start: 0;
+            box-sizing: border-box;
+            inline-size: 0;
+            margin-inline: auto;
+            block-size: 100dvh;
+            max-block-size: 100%;
+            pointer-events: none;
+          }
+
+          &:focus-visible::after {
+            border-inline-start: var(
+              --esp-page-resize-focus-outline,
+              2px dashed var(--esp-color-link)
+            );
+            
+            box-shadow: var(--esp-page-resize-focus-shadow, 0 0 0.75rem var(--esp-color-link));
+          }
+        }
+
+        > div.esp-page-workspace-resize-handles > .esp-page-main-preview-resize-handle {
+          inset-inline-start: 0;
+        }
+
+        > div.esp-page-workspace-resize-handles > .esp-page-preview-flyout-resize-handle {
+          inset-inline-start: var(--_esp-page-preview-used-width);
+        }
+
+        
         > .esp-page-preview-min-width-probe,
         > .esp-page-preview-max-width-probe,
         > .esp-page-flyout-min-width-probe,
         > .esp-page-flyout-max-width-probe,
-        > .esp-page-main-min-width-probe {
+        > .esp-page-main-min-width-probe,
+        > .esp-page-main-max-width-probe,
+        > .esp-page-resize-step-probe,
+        > .esp-page-resize-large-step-probe {
           position: absolute;
           block-size: 0;
           visibility: hidden;
@@ -471,6 +622,18 @@ var w=function(P,e,t,i){var a=arguments.length,r=a<3?e:i===null?i=Object.getOwnP
           inline-size: var(--_esp-page-main-min-width);
         }
 
+        > .esp-page-main-max-width-probe {
+          inline-size: var(--_esp-page-resolved-max-width);
+        }
+
+        > .esp-page-resize-step-probe {
+          inline-size: var(--esp-page-resize-step, 1rem);
+        }
+
+        > .esp-page-resize-large-step-probe {
+          inline-size: var(--esp-page-resize-large-step, 4rem);
+        }
+
         
         > .esp-page-canvas {
           
@@ -621,4 +784,4 @@ var w=function(P,e,t,i){var a=arguments.length,r=a<3?e:i===null?i=Object.getOwnP
           transition: none;
         }
       }
-    `],w([N()],v.prototype,"footerWrapperIsLandmark",void 0),w([m({reflect:!0})],v.prototype,"kind",void 0),w([m({reflect:!0})],v.prototype,"align",void 0),w([m({type:Boolean,reflect:!0})],v.prototype,"contained",void 0),w([m({attribute:"header-position",reflect:!0})],v.prototype,"headerPosition",void 0),w([m({attribute:"fixed-menus",type:Boolean,reflect:!0})],v.prototype,"fixedMenus",void 0),w([m({attribute:"preview-open",type:Boolean,reflect:!0})],v.prototype,"previewOpen",void 0),w([m({attribute:"preview-label",type:String,reflect:!0})],v.prototype,"previewLabel",void 0),w([m({attribute:"preview-collapse-sidebar",type:Boolean,reflect:!0})],v.prototype,"previewCollapseSidebar",void 0),w([m({attribute:"preview-visible",type:Boolean,reflect:!0})],v.prototype,"previewVisible",void 0),w([m({attribute:"preview-reclaiming",type:Boolean,reflect:!0})],v.prototype,"previewReclaiming",void 0),v=w([I("esp-page")],v);export{v as EspalierPage};
+    `],k([L()],w.prototype,"footerWrapperIsLandmark",void 0),k([L()],w.prototype,"allocatedPreviewWidth",void 0),k([L()],w.prototype,"allocatedFlyoutWidth",void 0),k([M({reflect:!0})],w.prototype,"kind",void 0),k([M({reflect:!0})],w.prototype,"align",void 0),k([M({type:Boolean,reflect:!0})],w.prototype,"contained",void 0),k([M({attribute:"header-position",reflect:!0})],w.prototype,"headerPosition",void 0),k([M({attribute:"fixed-menus",type:Boolean,reflect:!0})],w.prototype,"fixedMenus",void 0),k([M({attribute:"preview-open",type:Boolean,reflect:!0})],w.prototype,"previewOpen",void 0),k([M({attribute:"preview-label",type:String,reflect:!0})],w.prototype,"previewLabel",void 0),k([M({attribute:"preview-collapse-sidebar",type:Boolean,reflect:!0})],w.prototype,"previewCollapseSidebar",void 0),k([M({attribute:"workspace-resizable",type:Boolean,reflect:!0})],w.prototype,"workspaceResizable",void 0),k([M({attribute:"preview-visible",type:Boolean,reflect:!0})],w.prototype,"previewVisible",void 0),k([M({attribute:"preview-reclaiming",type:Boolean,reflect:!0})],w.prototype,"previewReclaiming",void 0),w=k([j("esp-page")],w);export{w as EspalierPage};